diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index 6c6a62f9f901..ade75a833aac 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -31,7 +31,8 @@
         "ms-python.python",
         "ms-python.vscode-pylance",
         "batisteo.vscode-django",
-        "eamodio.gitlens"
+        "eamodio.gitlens",
+        "biomejs.biome"
       ]
     }
   },
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 302c7d4a6913..1c5df1a003d8 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -69,26 +69,12 @@ repos:
           pyproject.toml |
           src/frontend/vite.config.ts |
       )$
-- repo: https://github.com/pre-commit/mirrors-prettier
-  rev: "v4.0.0-alpha.8"
-  hooks:
-    - id: prettier
-      files: ^src/frontend/.*\.(js|jsx|ts|tsx)$
-      additional_dependencies:
-      - "prettier@^2.4.1"
-      - "@trivago/prettier-plugin-sort-imports"
-- repo: https://github.com/pre-commit/mirrors-eslint
-  rev: "v9.12.0"
-  hooks:
-  - id: eslint
-    additional_dependencies:
-      - eslint@^8.41.0
-      - eslint-config-google@^0.14.0
-      - eslint-plugin-react@6.10.3
-      - babel-eslint@6.1.2
-      - "@typescript-eslint/eslint-plugin@latest"
-      - "@typescript-eslint/parser"
-    files: ^src/frontend/.*\.(js|jsx|ts|tsx)$
+-   repo: https://github.com/biomejs/pre-commit
+    rev: "v0.5.0"
+    hooks:
+    -   id: biome-check
+        additional_dependencies: ["@biomejs/biome@1.9.4"]
+        files: ^src/frontend/.*\.(js|ts|tsx)$
 -   repo: https://github.com/gitleaks/gitleaks
     rev: v8.21.0
     hooks:
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 000000000000..dcc97bee6388
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "biomejs.biome"
+    ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000000..04b0a9dd9b30
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,8 @@
+{
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "editor.codeActionsOnSave": {
+    "quickfix.biome": "explicit"
+  }
+}
diff --git a/biome.json b/biome.json
new file mode 100644
index 000000000000..1db36e466675
--- /dev/null
+++ b/biome.json
@@ -0,0 +1,40 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "single",
+			"jsxQuoteStyle": "single",
+			"trailingCommas": "none",
+			"indentStyle": "space"
+		}
+	},
+	"linter": {
+    "rules": {
+		"suspicious" : {
+			"noExplicitAny": "off",
+			"noDoubleEquals": "off",
+			"noArrayIndexKey": "off",
+			"useDefaultSwitchClauseLast": "off"
+		},
+		"style": {
+			"noUselessElse": "off",
+			"noNonNullAssertion": "off",
+			"noParameterAssign": "off"
+		}, "correctness":{
+			"useExhaustiveDependencies": "off",
+			"useJsxKeyInIterable": "off",
+			"noUnsafeOptionalChaining": "off",
+			"noSwitchDeclarations": "off",
+			"noUnusedImports":"error"
+		}, "complexity": {
+			"noBannedTypes": "off",
+			"noExtraBooleanCast": "off",
+			"noForEach": "off",
+			"noUselessSwitchCase": "off",
+			"useLiteralKeys":"off"
+		}, "performance": {
+			"noDelete":"off"
+		}
+	}
+}
+}
diff --git a/pyproject.toml b/pyproject.toml
index 32e336ba227a..fc10ce92edc7 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -106,4 +106,4 @@ known_django="django"
 sections=["FUTURE","STDLIB","DJANGO","THIRDPARTY","FIRSTPARTY","LOCALFOLDER"]
 
 [tool.codespell]
-ignore-words-list = ["assertIn","SME","intoto"]
+ignore-words-list = ["assertIn","SME","intoto","fitH"]
diff --git a/src/frontend/.prettierrc b/src/frontend/.prettierrc
deleted file mode 100644
index 3df4eac0cd8c..000000000000
--- a/src/frontend/.prettierrc
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "semi": true,
-  "trailingComma": "none",
-  "singleQuote": true,
-  "printWidth": 80,
-  "importOrder": ["<THIRD_PARTY_MODULES>", "^[./]"],
-  "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true
-}
diff --git a/src/frontend/eslint.config.cjs b/src/frontend/eslint.config.cjs
deleted file mode 100644
index b15982d7c656..000000000000
--- a/src/frontend/eslint.config.cjs
+++ /dev/null
@@ -1,7 +0,0 @@
-/* eslint-env node */
-module.exports = {
-    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
-    parser: '@typescript-eslint/parser',
-    plugins: ['@typescript-eslint'],
-    root: true,
-  };
diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index 24818dccbe3e..f093dba68036 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -23,7 +23,7 @@ export function setApiDefaults() {
   api.defaults.xsrfHeaderName = 'X-CSRFToken';
 
   if (token) {
-    api.defaults.headers['Authorization'] = `Token ${token}`;
+    api.defaults.headers.Authorization = `Token ${token}`;
   } else {
     delete api.defaults.headers['Authorization'];
   }
diff --git a/src/frontend/src/components/Boundary.tsx b/src/frontend/src/components/Boundary.tsx
index 126b9b76fbf9..a0d8181f9767 100644
--- a/src/frontend/src/components/Boundary.tsx
+++ b/src/frontend/src/components/Boundary.tsx
@@ -1,15 +1,15 @@
 import { t } from '@lingui/macro';
 import { Alert } from '@mantine/core';
-import { ErrorBoundary, FallbackRender } from '@sentry/react';
+import { ErrorBoundary, type FallbackRender } from '@sentry/react';
 import { IconExclamationCircle } from '@tabler/icons-react';
-import { ReactNode, useCallback } from 'react';
+import { type ReactNode, useCallback } from 'react';
 
 function DefaultFallback({ title }: Readonly<{ title: string }>): ReactNode {
   return (
     <Alert
-      color="red"
+      color='red'
       icon={<IconExclamationCircle />}
-      title={t`Error rendering component` + `: ${title}`}
+      title={`${t`Error rendering component`}: ${title}`}
     >
       {t`An error occurred while rendering this component. Refer to the console for more information.`}
     </Alert>
diff --git a/src/frontend/src/components/buttons/ActionButton.tsx b/src/frontend/src/components/buttons/ActionButton.tsx
index 4b8d6265b34d..57583cfb9baf 100644
--- a/src/frontend/src/components/buttons/ActionButton.tsx
+++ b/src/frontend/src/components/buttons/ActionButton.tsx
@@ -1,5 +1,10 @@
-import { ActionIcon, FloatingPosition, Group, Tooltip } from '@mantine/core';
-import { ReactNode } from 'react';
+import {
+  ActionIcon,
+  type FloatingPosition,
+  Group,
+  Tooltip
+} from '@mantine/core';
+import type { ReactNode } from 'react';
 
 import { identifierString } from '../../functions/conversion';
 
@@ -46,7 +51,7 @@ export function ActionButton(props: ActionButtonProps) {
           }}
           variant={props.variant ?? 'transparent'}
         >
-          <Group gap="xs" wrap="nowrap">
+          <Group gap='xs' wrap='nowrap'>
             {props.icon}
           </Group>
         </ActionIcon>
diff --git a/src/frontend/src/components/buttons/AddItemButton.tsx b/src/frontend/src/components/buttons/AddItemButton.tsx
index adece8195f28..397fc2ed6e9e 100644
--- a/src/frontend/src/components/buttons/AddItemButton.tsx
+++ b/src/frontend/src/components/buttons/AddItemButton.tsx
@@ -1,10 +1,10 @@
 import { IconPlus } from '@tabler/icons-react';
 
-import { ActionButton, ActionButtonProps } from './ActionButton';
+import { ActionButton, type ActionButtonProps } from './ActionButton';
 
 /**
  * A generic icon button which is used to add or create a new item
  */
 export function AddItemButton(props: Readonly<ActionButtonProps>) {
-  return <ActionButton {...props} color="green" icon={<IconPlus />} />;
+  return <ActionButton {...props} color='green' icon={<IconPlus />} />;
 }
diff --git a/src/frontend/src/components/buttons/AdminButton.tsx b/src/frontend/src/components/buttons/AdminButton.tsx
index 60a7107ecdb1..0bd5093077cf 100644
--- a/src/frontend/src/components/buttons/AdminButton.tsx
+++ b/src/frontend/src/components/buttons/AdminButton.tsx
@@ -2,7 +2,7 @@ import { t } from '@lingui/macro';
 import { IconUserStar } from '@tabler/icons-react';
 import { useCallback, useMemo } from 'react';
 
-import { ModelType } from '../../enums/ModelType';
+import type { ModelType } from '../../enums/ModelType';
 import { useServerApiState } from '../../states/ApiState';
 import { useLocalState } from '../../states/LocalState';
 import { useUserState } from '../../states/UserState';
@@ -78,14 +78,14 @@ export default function AdminButton(props: Readonly<AdminButtonProps>) {
   return (
     <ActionButton
       icon={<IconUserStar />}
-      color="blue"
-      size="lg"
-      radius="sm"
-      variant="filled"
+      color='blue'
+      size='lg'
+      radius='sm'
+      variant='filled'
       tooltip={t`Open in admin interface`}
       hidden={!enabled}
       onClick={openAdmin}
-      tooltipAlignment="bottom"
+      tooltipAlignment='bottom'
     />
   );
 }
diff --git a/src/frontend/src/components/buttons/ButtonMenu.tsx b/src/frontend/src/components/buttons/ButtonMenu.tsx
index be9bef990430..d2b137a94b21 100644
--- a/src/frontend/src/components/buttons/ButtonMenu.tsx
+++ b/src/frontend/src/components/buttons/ButtonMenu.tsx
@@ -16,16 +16,16 @@ export function ButtonMenu({
   tooltip?: string;
 }>) {
   return (
-    <Menu shadow="xs">
+    <Menu shadow='xs'>
       <Menu.Target>
-        <ActionIcon variant="default">
+        <ActionIcon variant='default'>
           <Tooltip label={tooltip}>{icon}</Tooltip>
         </ActionIcon>
       </Menu.Target>
       <Menu.Dropdown>
         {label && <Menu.Label>{label}</Menu.Label>}
         {actions.map((action, i) => (
-          <Menu.Item key={i}>{action}</Menu.Item>
+          <Menu.Item key={`${i}-${action}`}>{action}</Menu.Item>
         ))}
       </Menu.Dropdown>
     </Menu>
diff --git a/src/frontend/src/components/buttons/CopyButton.tsx b/src/frontend/src/components/buttons/CopyButton.tsx
index 6f2c733ec961..c42db4adbd6c 100644
--- a/src/frontend/src/components/buttons/CopyButton.tsx
+++ b/src/frontend/src/components/buttons/CopyButton.tsx
@@ -3,7 +3,7 @@ import {
   ActionIcon,
   Button,
   CopyButton as MantineCopyButton,
-  MantineSize,
+  type MantineSize,
   Text,
   Tooltip
 } from '@mantine/core';
@@ -30,13 +30,13 @@ export function CopyButton({
           <ButtonComponent
             color={copied ? 'teal' : 'gray'}
             onClick={copy}
-            variant="transparent"
+            variant='transparent'
             size={size ?? 'sm'}
           >
             {copied ? (
-              <InvenTreeIcon icon="check" />
+              <InvenTreeIcon icon='check' />
             ) : (
-              <InvenTreeIcon icon="copy" />
+              <InvenTreeIcon icon='copy' />
             )}
             {content}
             {label && (
diff --git a/src/frontend/src/components/buttons/EditButton.tsx b/src/frontend/src/components/buttons/EditButton.tsx
index 39c72114054e..7a941d3bb38f 100644
--- a/src/frontend/src/components/buttons/EditButton.tsx
+++ b/src/frontend/src/components/buttons/EditButton.tsx
@@ -17,7 +17,7 @@ export function EditButton({
     <ActionIcon
       onClick={() => setEditing()}
       disabled={disabled}
-      variant="default"
+      variant='default'
     >
       {editing ? saveIcon : <IconEdit />}
     </ActionIcon>
diff --git a/src/frontend/src/components/buttons/PrimaryActionButton.tsx b/src/frontend/src/components/buttons/PrimaryActionButton.tsx
index 65aa4defaecf..5bd94c9adcf7 100644
--- a/src/frontend/src/components/buttons/PrimaryActionButton.tsx
+++ b/src/frontend/src/components/buttons/PrimaryActionButton.tsx
@@ -1,6 +1,6 @@
 import { Button, Tooltip } from '@mantine/core';
 
-import { InvenTreeIcon, InvenTreeIconType } from '../../functions/icons';
+import { InvenTreeIcon, type InvenTreeIconType } from '../../functions/icons';
 
 /**
  * A "primary action" button for display on a page detail, (for example)
@@ -25,12 +25,12 @@ export default function PrimaryActionButton({
   }
 
   return (
-    <Tooltip label={tooltip ?? title} position="bottom" hidden={!tooltip}>
+    <Tooltip label={tooltip ?? title} position='bottom' hidden={!tooltip}>
       <Button
         leftSection={icon && <InvenTreeIcon icon={icon} />}
         color={color}
-        radius="sm"
-        p="xs"
+        radius='sm'
+        p='xs'
         onClick={onClick}
       >
         {title}
diff --git a/src/frontend/src/components/buttons/PrintingActions.tsx b/src/frontend/src/components/buttons/PrintingActions.tsx
index 694c378c8cab..db9dd22f1bcf 100644
--- a/src/frontend/src/components/buttons/PrintingActions.tsx
+++ b/src/frontend/src/components/buttons/PrintingActions.tsx
@@ -6,13 +6,13 @@ import { useMemo, useState } from 'react';
 
 import { api } from '../../App';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
-import { ModelType } from '../../enums/ModelType';
+import type { ModelType } from '../../enums/ModelType';
 import { extractAvailableFields } from '../../functions/forms';
 import { useCreateApiFormModal } from '../../hooks/UseForm';
 import { apiUrl } from '../../states/ApiState';
 import { useLocalState } from '../../states/LocalState';
 import { useUserSettingsState } from '../../states/SettingsState';
-import { ApiFormFieldSet } from '../forms/fields/ApiFormField';
+import type { ApiFormFieldSet } from '../forms/fields/ApiFormField';
 import { ActionDropdown } from '../items/ActionDropdown';
 
 export function PrintingActions({
@@ -57,11 +57,11 @@ export function PrintingActions({
   });
 
   const labelFields: ApiFormFieldSet = useMemo(() => {
-    let fields: ApiFormFieldSet = printingFields.data || {};
+    const fields: ApiFormFieldSet = printingFields.data || {};
 
     // Override field values
-    fields['template'] = {
-      ...fields['template'],
+    fields.template = {
+      ...fields.template,
       filters: {
         enabled: true,
         model_type: modelType,
@@ -69,8 +69,8 @@ export function PrintingActions({
       }
     };
 
-    fields['items'] = {
-      ...fields['items'],
+    fields.items = {
+      ...fields.items,
       value: items,
       hidden: true
     };
diff --git a/src/frontend/src/components/buttons/RemoveRowButton.tsx b/src/frontend/src/components/buttons/RemoveRowButton.tsx
index ebdcca60c1a2..a43095c7fbe8 100644
--- a/src/frontend/src/components/buttons/RemoveRowButton.tsx
+++ b/src/frontend/src/components/buttons/RemoveRowButton.tsx
@@ -13,10 +13,10 @@ export default function RemoveRowButton({
   return (
     <ActionButton
       onClick={onClick}
-      icon={<InvenTreeIcon icon="square_x" />}
+      icon={<InvenTreeIcon icon='square_x' />}
       tooltip={tooltip}
-      tooltipAlignment="top"
-      color="red"
+      tooltipAlignment='top'
+      color='red'
     />
   );
 }
diff --git a/src/frontend/src/components/buttons/SSOButton.tsx b/src/frontend/src/components/buttons/SSOButton.tsx
index 24b6e2661ab2..e16548a33142 100644
--- a/src/frontend/src/components/buttons/SSOButton.tsx
+++ b/src/frontend/src/components/buttons/SSOButton.tsx
@@ -17,7 +17,7 @@ import {
 import { api } from '../../App';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { apiUrl } from '../../states/ApiState';
-import { Provider } from '../../states/states';
+import type { Provider } from '../../states/states';
 
 const brandIcons: { [key: string]: JSX.Element } = {
   google: <IconBrandGoogle />,
@@ -51,8 +51,8 @@ export function SsoButton({ provider }: Readonly<{ provider: Provider }>) {
   return (
     <Button
       leftSection={getBrandIcon(provider)}
-      radius="xl"
-      component="a"
+      radius='xl'
+      component='a'
       onClick={login}
     >
       {provider.display_name}{' '}
diff --git a/src/frontend/src/components/buttons/ScanButton.tsx b/src/frontend/src/components/buttons/ScanButton.tsx
index 2d716b722f7e..3356696c0e45 100644
--- a/src/frontend/src/components/buttons/ScanButton.tsx
+++ b/src/frontend/src/components/buttons/ScanButton.tsx
@@ -16,7 +16,7 @@ export function ScanButton() {
           innerProps: {}
         })
       }
-      variant="transparent"
+      variant='transparent'
       title={t`Open Barcode Scanner`}
     >
       <IconQrcode />
diff --git a/src/frontend/src/components/buttons/SplitButton.tsx b/src/frontend/src/components/buttons/SplitButton.tsx
index ae497bb6dd0b..da2fa81b78db 100644
--- a/src/frontend/src/components/buttons/SplitButton.tsx
+++ b/src/frontend/src/components/buttons/SplitButton.tsx
@@ -11,7 +11,7 @@ import { IconChevronDown } from '@tabler/icons-react';
 import { useEffect, useMemo, useState } from 'react';
 
 import { identifierString } from '../../functions/conversion';
-import { TablerIconType } from '../../functions/icons';
+import type { TablerIconType } from '../../functions/icons';
 import * as classes from './SplitButton.css';
 
 interface SplitButtonOption {
@@ -58,7 +58,7 @@ export function SplitButton({
   const theme = useMantineTheme();
 
   return (
-    <Group wrap="nowrap" style={{ gap: 0 }}>
+    <Group wrap='nowrap' style={{ gap: 0 }}>
       <Button
         onClick={currentOption?.onClick}
         disabled={loading ? false : currentOption?.disabled}
@@ -70,12 +70,12 @@ export function SplitButton({
       </Button>
       <Menu
         transitionProps={{ transition: 'pop' }}
-        position="bottom-end"
+        position='bottom-end'
         withinPortal
       >
         <Menu.Target>
           <ActionIcon
-            variant="filled"
+            variant='filled'
             color={theme.primaryColor}
             size={36}
             className={classes.icon}
@@ -99,7 +99,7 @@ export function SplitButton({
               disabled={option.disabled}
               leftSection={<option.icon />}
             >
-              <Tooltip label={option.tooltip} position="right">
+              <Tooltip label={option.tooltip} position='right'>
                 <Text>{option.name}</Text>
               </Tooltip>
             </Menu.Item>
diff --git a/src/frontend/src/components/buttons/SpotlightButton.tsx b/src/frontend/src/components/buttons/SpotlightButton.tsx
index 7ca95d78bfa0..275650133b12 100644
--- a/src/frontend/src/components/buttons/SpotlightButton.tsx
+++ b/src/frontend/src/components/buttons/SpotlightButton.tsx
@@ -12,8 +12,8 @@ export function SpotlightButton() {
     <ActionIcon
       onClick={() => firstSpotlight.open()}
       title={t`Open spotlight`}
-      variant="transparent"
-      aria-label="open-spotlight"
+      variant='transparent'
+      aria-label='open-spotlight'
     >
       <IconCommand />
     </ActionIcon>
diff --git a/src/frontend/src/components/buttons/YesNoButton.tsx b/src/frontend/src/components/buttons/YesNoButton.tsx
index 26786074708e..dfbad978390e 100644
--- a/src/frontend/src/components/buttons/YesNoButton.tsx
+++ b/src/frontend/src/components/buttons/YesNoButton.tsx
@@ -19,9 +19,9 @@ export function PassFailButton({
   return (
     <Badge
       color={v ? 'lime.5' : 'red.6'}
-      variant="filled"
-      radius="lg"
-      size="sm"
+      variant='filled'
+      radius='lg'
+      size='sm'
       style={{ maxWidth: '50px' }}
     >
       {v ? pass : fail}
diff --git a/src/frontend/src/components/dashboard/DashboardLayout.tsx b/src/frontend/src/components/dashboard/DashboardLayout.tsx
index 3917e4e6fa85..d536627d4f72 100644
--- a/src/frontend/src/components/dashboard/DashboardLayout.tsx
+++ b/src/frontend/src/components/dashboard/DashboardLayout.tsx
@@ -3,12 +3,12 @@ import { Alert, Card, Center, Divider, Loader, Text } from '@mantine/core';
 import { useDisclosure, useHotkeys } from '@mantine/hooks';
 import { IconInfoCircle } from '@tabler/icons-react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Layout, Responsive, WidthProvider } from 'react-grid-layout';
+import { type Layout, Responsive, WidthProvider } from 'react-grid-layout';
 
 import { useDashboardItems } from '../../hooks/UseDashboardItems';
 import { useUserState } from '../../states/UserState';
 import DashboardMenu from './DashboardMenu';
-import DashboardWidget, { DashboardWidgetProps } from './DashboardWidget';
+import DashboardWidget, { type DashboardWidgetProps } from './DashboardWidget';
 import DashboardWidgetDrawer from './DashboardWidgetDrawer';
 
 const ReactGridLayout = WidthProvider(Responsive);
@@ -17,7 +17,7 @@ const ReactGridLayout = WidthProvider(Responsive);
  * Save the dashboard layout to local storage
  */
 function saveDashboardLayout(layouts: any, userId: number | undefined): void {
-  let reducedLayouts: any = {};
+  const reducedLayouts: any = {};
 
   // Reduce the layouts to exclude default attributes from the dataset
   Object.keys(layouts).forEach((key) => {
@@ -93,7 +93,7 @@ function loadDashboardWidgets(userId: number | undefined): string[] {
   }
 }
 
-export default function DashboardLayout({}: {}) {
+export default function DashboardLayout() {
   const user = useUserState();
 
   // Dashboard layout definition
@@ -141,7 +141,7 @@ export default function DashboardLayout({}: {}) {
    */
   const addWidget = useCallback(
     (widget: string) => {
-      let newWidget = availableWidgets.items.find(
+      const newWidget = availableWidgets.items.find(
         (wid) => wid.label === widget
       );
 
@@ -150,7 +150,7 @@ export default function DashboardLayout({}: {}) {
       }
 
       // Update the layouts to include the new widget (and enforce initial size)
-      let _layouts: any = { ...layouts };
+      const _layouts: any = { ...layouts };
 
       Object.keys(_layouts).forEach((key) => {
         _layouts[key] = updateLayoutForWidget(_layouts[key], widgets, true);
@@ -170,7 +170,7 @@ export default function DashboardLayout({}: {}) {
       setWidgets(widgets.filter((item) => item.label !== widget));
 
       // Remove the widget from the layout
-      let _layouts: any = { ...layouts };
+      const _layouts: any = { ...layouts };
 
       Object.keys(_layouts).forEach((key) => {
         _layouts[key] = _layouts[key].filter(
@@ -188,7 +188,7 @@ export default function DashboardLayout({}: {}) {
     (layout: any[], widgets: any[], overrideSize: boolean) => {
       return layout.map((item: Layout): Layout => {
         // Find the matching widget
-        let widget = widgets.find(
+        const widget = widgets.find(
           (widget: DashboardWidgetProps) => widget.label === item.i
         );
 
@@ -275,14 +275,14 @@ export default function DashboardLayout({}: {}) {
         editing={editing}
         removing={removing}
       />
-      <Divider p="xs" />
+      <Divider p='xs' />
       {layouts && loaded && availableWidgets.loaded ? (
         <>
           {widgetLabels.length == 0 ? (
             <Center>
-              <Card shadow="xs" padding="xl" style={{ width: '100%' }}>
+              <Card shadow='xs' padding='xl' style={{ width: '100%' }}>
                 <Alert
-                  color="blue"
+                  color='blue'
                   title={t`No Widgets Selected`}
                   icon={<IconInfoCircle />}
                 >
@@ -292,7 +292,7 @@ export default function DashboardLayout({}: {}) {
             </Center>
           ) : (
             <ReactGridLayout
-              className="dashboard-layout"
+              className='dashboard-layout'
               breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
               cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
               rowHeight={64}
@@ -320,7 +320,7 @@ export default function DashboardLayout({}: {}) {
         </>
       ) : (
         <Center>
-          <Loader size="xl" />
+          <Loader size='xl' />
         </Center>
       )}
     </>
diff --git a/src/frontend/src/components/dashboard/DashboardMenu.tsx b/src/frontend/src/components/dashboard/DashboardMenu.tsx
index 1303375cda0b..f6c275836198 100644
--- a/src/frontend/src/components/dashboard/DashboardMenu.tsx
+++ b/src/frontend/src/components/dashboard/DashboardMenu.tsx
@@ -45,42 +45,42 @@ export default function DashboardMenu({
     const username = user.username();
 
     return (
-      <StylishText size="lg">{`${instanceName} - ${username}`}</StylishText>
+      <StylishText size='lg'>{`${instanceName} - ${username}`}</StylishText>
     );
   }, [user, instanceName]);
 
   return (
-    <Paper p="sm" shadow="xs">
-      <Group justify="space-between" wrap="nowrap">
+    <Paper p='sm' shadow='xs'>
+      <Group justify='space-between' wrap='nowrap'>
         {title}
 
-        <Group justify="right" wrap="nowrap">
+        <Group justify='right' wrap='nowrap'>
           {(editing || removing) && (
             <Tooltip label={t`Accept Layout`} onClick={onAcceptLayout}>
               <ActionIcon
                 aria-label={'dashboard-accept-layout'}
-                color="green"
-                variant="transparent"
+                color='green'
+                variant='transparent'
               >
                 <IconCircleCheck />
               </ActionIcon>
             </Tooltip>
           )}
           <Menu
-            shadow="md"
+            shadow='md'
             width={200}
             openDelay={100}
             closeDelay={400}
-            position="bottom-end"
+            position='bottom-end'
           >
             <Menu.Target>
               <Indicator
-                color="red"
-                position="bottom-start"
+                color='red'
+                position='bottom-start'
                 processing
                 disabled={!editing}
               >
-                <ActionIcon variant="transparent" aria-label="dashboard-menu">
+                <ActionIcon variant='transparent' aria-label='dashboard-menu'>
                   <IconDotsVertical />
                 </ActionIcon>
               </Indicator>
@@ -93,7 +93,7 @@ export default function DashboardMenu({
 
               {!editing && !removing && (
                 <Menu.Item
-                  leftSection={<IconLayout2 color="blue" size={14} />}
+                  leftSection={<IconLayout2 color='blue' size={14} />}
                   onClick={onStartEdit}
                 >
                   <Trans>Edit Layout</Trans>
@@ -102,7 +102,7 @@ export default function DashboardMenu({
 
               {!editing && !removing && (
                 <Menu.Item
-                  leftSection={<IconLayoutGridAdd color="green" size={14} />}
+                  leftSection={<IconLayoutGridAdd color='green' size={14} />}
                   onClick={onAddWidget}
                 >
                   <Trans>Add Widget</Trans>
@@ -111,7 +111,7 @@ export default function DashboardMenu({
 
               {!editing && !removing && (
                 <Menu.Item
-                  leftSection={<IconLayoutGridRemove color="red" size={14} />}
+                  leftSection={<IconLayoutGridRemove color='red' size={14} />}
                   onClick={onStartRemove}
                 >
                   <Trans>Remove Widgets</Trans>
@@ -120,7 +120,7 @@ export default function DashboardMenu({
 
               {(editing || removing) && (
                 <Menu.Item
-                  leftSection={<IconCircleCheck color="green" size={14} />}
+                  leftSection={<IconCircleCheck color='green' size={14} />}
                   onClick={onAcceptLayout}
                 >
                   <Trans>Accept Layout</Trans>
diff --git a/src/frontend/src/components/dashboard/DashboardWidget.tsx b/src/frontend/src/components/dashboard/DashboardWidget.tsx
index 479b7567c1ac..839279aab776 100644
--- a/src/frontend/src/components/dashboard/DashboardWidget.tsx
+++ b/src/frontend/src/components/dashboard/DashboardWidget.tsx
@@ -43,7 +43,7 @@ export default function DashboardWidget({
   // TODO: Add button to remove widget (if "editing")
 
   return (
-    <Paper withBorder key={item.label} shadow="sm" p="xs">
+    <Paper withBorder key={item.label} shadow='sm' p='xs'>
       <Boundary label={`dashboard-widget-${item.label}`}>
         <Box
           key={`dashboard-widget-${item.label}`}
@@ -58,17 +58,17 @@ export default function DashboardWidget({
           {item.render()}
         </Box>
         {removing && (
-          <Overlay color="black" opacity={0.7} zIndex={1000}>
+          <Overlay color='black' opacity={0.7} zIndex={1000}>
             {removing && (
-              <Group justify="right">
+              <Group justify='right'>
                 <Tooltip
                   label={t`Remove this widget from the dashboard`}
-                  position="bottom"
+                  position='bottom'
                 >
                   <ActionIcon
                     aria-label={`remove-dashboard-item-${item.label}`}
-                    variant="filled"
-                    color="red"
+                    variant='filled'
+                    color='red'
                     onClick={onRemove}
                   >
                     <IconX />
diff --git a/src/frontend/src/components/dashboard/DashboardWidgetDrawer.tsx b/src/frontend/src/components/dashboard/DashboardWidgetDrawer.tsx
index 81e7103c29e6..ab0063c072cc 100644
--- a/src/frontend/src/components/dashboard/DashboardWidgetDrawer.tsx
+++ b/src/frontend/src/components/dashboard/DashboardWidgetDrawer.tsx
@@ -49,7 +49,7 @@ export default function DashboardWidgetDrawer({
 
   // Filter widgets based on search text
   const filteredWidgets = useMemo(() => {
-    let words = filterText.trim().toLowerCase().split(' ');
+    const words = filterText.trim().toLowerCase().split(' ');
 
     return unusedWidgets.filter((widget) => {
       return words.every((word) =>
@@ -60,28 +60,28 @@ export default function DashboardWidgetDrawer({
 
   return (
     <Drawer
-      position="right"
-      size="50%"
+      position='right'
+      size='50%'
       opened={opened}
       onClose={onClose}
       title={
-        <Group justify="space-between" wrap="nowrap">
-          <StylishText size="lg">Add Dashboard Widgets</StylishText>
+        <Group justify='space-between' wrap='nowrap'>
+          <StylishText size='lg'>Add Dashboard Widgets</StylishText>
         </Group>
       }
     >
-      <Stack gap="xs">
+      <Stack gap='xs'>
         <Divider />
         <TextInput
-          aria-label="dashboard-widgets-filter-input"
+          aria-label='dashboard-widgets-filter-input'
           placeholder={t`Filter dashboard widgets`}
           value={filter}
           onChange={(event) => setFilter(event.currentTarget.value)}
           rightSection={
             filter && (
               <IconBackspace
-                aria-label="dashboard-widgets-filter-clear"
-                color="red"
+                aria-label='dashboard-widgets-filter-clear'
+                color='red'
                 onClick={() => setFilter('')}
               />
             )
@@ -94,18 +94,18 @@ export default function DashboardWidgetDrawer({
               <Table.Tr key={widget.label}>
                 <Table.Td>
                   <Tooltip
-                    position="left"
+                    position='left'
                     label={t`Add this widget to the dashboard`}
                   >
                     <ActionIcon
                       aria-label={`add-widget-${widget.label}`}
-                      variant="transparent"
-                      color="green"
+                      variant='transparent'
+                      color='green'
                       onClick={() => {
                         onAddWidget(widget.label);
                       }}
                     >
-                      <IconLayoutGridAdd></IconLayoutGridAdd>
+                      <IconLayoutGridAdd />
                     </ActionIcon>
                   </Tooltip>
                 </Table.Td>
@@ -113,14 +113,14 @@ export default function DashboardWidgetDrawer({
                   <Text>{widget.title}</Text>
                 </Table.Td>
                 <Table.Td>
-                  <Text size="sm">{widget.description}</Text>
+                  <Text size='sm'>{widget.description}</Text>
                 </Table.Td>
               </Table.Tr>
             ))}
           </Table.Tbody>
         </Table>
         {unusedWidgets.length === 0 && (
-          <Alert color="blue" title={t`No Widgets Available`}>
+          <Alert color='blue' title={t`No Widgets Available`}>
             <Text>{t`There are no more widgets available for the dashboard`}</Text>
           </Alert>
         )}
diff --git a/src/frontend/src/components/dashboard/DashboardWidgetLibrary.tsx b/src/frontend/src/components/dashboard/DashboardWidgetLibrary.tsx
index a13372bdd620..c8c26138a0fa 100644
--- a/src/frontend/src/components/dashboard/DashboardWidgetLibrary.tsx
+++ b/src/frontend/src/components/dashboard/DashboardWidgetLibrary.tsx
@@ -1,7 +1,7 @@
 import { t } from '@lingui/macro';
 
 import { ModelType } from '../../enums/ModelType';
-import { DashboardWidgetProps } from './DashboardWidget';
+import type { DashboardWidgetProps } from './DashboardWidget';
 import ColorToggleDashboardWidget from './widgets/ColorToggleWidget';
 import GetStartedWidget from './widgets/GetStartedWidget';
 import LanguageSelectDashboardWidget from './widgets/LanguageSelectWidget';
diff --git a/src/frontend/src/components/dashboard/widgets/ColorToggleWidget.tsx b/src/frontend/src/components/dashboard/widgets/ColorToggleWidget.tsx
index fdd73b197f7d..f1ff1c5bb455 100644
--- a/src/frontend/src/components/dashboard/widgets/ColorToggleWidget.tsx
+++ b/src/frontend/src/components/dashboard/widgets/ColorToggleWidget.tsx
@@ -3,12 +3,12 @@ import { Group } from '@mantine/core';
 
 import { ColorToggle } from '../../items/ColorToggle';
 import { StylishText } from '../../items/StylishText';
-import { DashboardWidgetProps } from '../DashboardWidget';
+import type { DashboardWidgetProps } from '../DashboardWidget';
 
 function ColorToggleWidget(title: string) {
   return (
-    <Group justify="space-between" wrap="nowrap">
-      <StylishText size="lg">{title}</StylishText>
+    <Group justify='space-between' wrap='nowrap'>
+      <StylishText size='lg'>{title}</StylishText>
       <ColorToggle />
     </Group>
   );
diff --git a/src/frontend/src/components/dashboard/widgets/GetStartedWidget.tsx b/src/frontend/src/components/dashboard/widgets/GetStartedWidget.tsx
index 3a9b5a82ee5f..e0d18dc3d42b 100644
--- a/src/frontend/src/components/dashboard/widgets/GetStartedWidget.tsx
+++ b/src/frontend/src/components/dashboard/widgets/GetStartedWidget.tsx
@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 
 import { DocumentationLinks } from '../../../defaults/links';
 import { GettingStartedCarousel } from '../../items/GettingStartedCarousel';
-import { MenuLinkItem } from '../../items/MenuLinks';
+import type { MenuLinkItem } from '../../items/MenuLinks';
 import { StylishText } from '../../items/StylishText';
 
 export default function GetStartedWidget() {
@@ -12,7 +12,7 @@ export default function GetStartedWidget() {
 
   return (
     <Stack>
-      <StylishText size="xl">{t`Getting Started`}</StylishText>
+      <StylishText size='xl'>{t`Getting Started`}</StylishText>
       <GettingStartedCarousel items={docLinks} />
     </Stack>
   );
diff --git a/src/frontend/src/components/dashboard/widgets/LanguageSelectWidget.tsx b/src/frontend/src/components/dashboard/widgets/LanguageSelectWidget.tsx
index 8ede090d476b..a5195639c620 100644
--- a/src/frontend/src/components/dashboard/widgets/LanguageSelectWidget.tsx
+++ b/src/frontend/src/components/dashboard/widgets/LanguageSelectWidget.tsx
@@ -3,12 +3,12 @@ import { Stack } from '@mantine/core';
 
 import { LanguageSelect } from '../../items/LanguageSelect';
 import { StylishText } from '../../items/StylishText';
-import { DashboardWidgetProps } from '../DashboardWidget';
+import type { DashboardWidgetProps } from '../DashboardWidget';
 
 function LanguageSelectWidget(title: string) {
   return (
-    <Stack gap="xs">
-      <StylishText size="lg">{title}</StylishText>
+    <Stack gap='xs'>
+      <StylishText size='lg'>{title}</StylishText>
       <LanguageSelect width={140} />
     </Stack>
   );
diff --git a/src/frontend/src/components/dashboard/widgets/NewsWidget.tsx b/src/frontend/src/components/dashboard/widgets/NewsWidget.tsx
index ee704ae9390c..6eaaa442315d 100644
--- a/src/frontend/src/components/dashboard/widgets/NewsWidget.tsx
+++ b/src/frontend/src/components/dashboard/widgets/NewsWidget.tsx
@@ -4,7 +4,6 @@ import {
   Alert,
   Anchor,
   Container,
-  Group,
   ScrollArea,
   Stack,
   Table,
@@ -28,13 +27,13 @@ import { StylishText } from '../../items/StylishText';
 function NewsLink({ item }: { item: any }) {
   let link: string = item.link;
 
-  if (link && link.startsWith('/')) {
-    link = 'https://inventree.org' + link;
+  if (link?.startsWith('/')) {
+    link = `https://inventree.org${link}`;
   }
 
   if (link) {
     return (
-      <Anchor href={link} target="_blank">
+      <Anchor href={link} target='_blank'>
         {item.title}
       </Anchor>
     );
@@ -60,9 +59,9 @@ function NewsItem({
       <Table.Td>
         <Tooltip label={t`Mark as read`}>
           <ActionIcon
-            size="sm"
-            color="green"
-            variant="transparent"
+            size='sm'
+            color='green'
+            variant='transparent'
             onClick={() => onMarkRead(item.pk)}
           >
             <IconMailCheck />
@@ -112,7 +111,7 @@ export default function NewsWidget() {
 
   if (!user.isSuperuser()) {
     return (
-      <Alert color="red" title={t`Requires Superuser`}>
+      <Alert color='red' title={t`Requires Superuser`}>
         <Text>{t`This widget requires superuser permissions`}</Text>
       </Alert>
     );
@@ -120,7 +119,7 @@ export default function NewsWidget() {
 
   return (
     <Stack>
-      <StylishText size="xl">{t`News Updates`}</StylishText>
+      <StylishText size='xl'>{t`News Updates`}</StylishText>
       <ScrollArea h={400}>
         <Container>
           <Table>
@@ -130,7 +129,7 @@ export default function NewsWidget() {
                   <NewsItem key={item.pk} item={item} onMarkRead={markRead} />
                 ))
               ) : (
-                <Alert color="green" title={t`No News`}>
+                <Alert color='green' title={t`No News`}>
                   <Text>{t`There are no unread news items`}</Text>
                 </Alert>
               )}
diff --git a/src/frontend/src/components/dashboard/widgets/QueryCountDashboardWidget.tsx b/src/frontend/src/components/dashboard/widgets/QueryCountDashboardWidget.tsx
index 452e99acb305..577e6e03bba3 100644
--- a/src/frontend/src/components/dashboard/widgets/QueryCountDashboardWidget.tsx
+++ b/src/frontend/src/components/dashboard/widgets/QueryCountDashboardWidget.tsx
@@ -1,29 +1,21 @@
-import {
-  ActionIcon,
-  Card,
-  Group,
-  Loader,
-  Skeleton,
-  Space,
-  Stack,
-  Text
-} from '@mantine/core';
+import { ActionIcon, Group, Loader } from '@mantine/core';
 import { IconExternalLink } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
-import { on } from 'events';
-import { ReactNode, useCallback } from 'react';
+import { type ReactNode, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { api } from '../../../App';
-import { ModelType } from '../../../enums/ModelType';
-import { identifierString } from '../../../functions/conversion';
-import { InvenTreeIcon, InvenTreeIconType } from '../../../functions/icons';
+import type { ModelType } from '../../../enums/ModelType';
+import {
+  InvenTreeIcon,
+  type InvenTreeIconType
+} from '../../../functions/icons';
 import { navigateToLink } from '../../../functions/navigation';
 import { apiUrl } from '../../../states/ApiState';
 import { useUserState } from '../../../states/UserState';
 import { StylishText } from '../../items/StylishText';
 import { ModelInformationDict } from '../../render/ModelType';
-import { DashboardWidgetProps } from '../DashboardWidget';
+import type { DashboardWidgetProps } from '../DashboardWidget';
 
 /**
  * A simple dashboard widget for displaying the number of results for a particular query
@@ -81,18 +73,18 @@ function QueryCountWidget({
   // TODO: Improve visual styling
 
   return (
-    <Group gap="xs" wrap="nowrap">
+    <Group gap='xs' wrap='nowrap'>
       <InvenTreeIcon icon={icon ?? modelProperties.icon} />
-      <Group gap="xs" wrap="nowrap" justify="space-between">
-        <StylishText size="md">{title}</StylishText>
-        <Group gap="xs" wrap="nowrap" justify="right">
+      <Group gap='xs' wrap='nowrap' justify='space-between'>
+        <StylishText size='md'>{title}</StylishText>
+        <Group gap='xs' wrap='nowrap' justify='right'>
           {query.isFetching ? (
-            <Loader size="sm" />
+            <Loader size='sm' />
           ) : (
-            <StylishText size="sm">{query.data?.count ?? '-'}</StylishText>
+            <StylishText size='sm'>{query.data?.count ?? '-'}</StylishText>
           )}
           {modelProperties?.url_overview && (
-            <ActionIcon size="sm" variant="transparent" onClick={onFollowLink}>
+            <ActionIcon size='sm' variant='transparent' onClick={onFollowLink}>
               <IconExternalLink />
             </ActionIcon>
           )}
diff --git a/src/frontend/src/components/details/Details.tsx b/src/frontend/src/components/details/Details.tsx
index 4b72f69600b8..1e9aceaad7fb 100644
--- a/src/frontend/src/components/details/Details.tsx
+++ b/src/frontend/src/components/details/Details.tsx
@@ -11,14 +11,14 @@ import {
 } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
 import { getValueAtPath } from 'mantine-datatable';
-import { ReactNode, useCallback, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { api } from '../../App';
 import { formatDate } from '../../defaults/formatters';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
-import { ModelType } from '../../enums/ModelType';
-import { InvenTreeIcon, InvenTreeIconType } from '../../functions/icons';
+import type { ModelType } from '../../enums/ModelType';
+import { InvenTreeIcon, type InvenTreeIconType } from '../../functions/icons';
 import { navigateToLink } from '../../functions/navigation';
 import { getDetailUrl } from '../../functions/urls';
 import { apiUrl } from '../../states/ApiState';
@@ -30,22 +30,21 @@ import { StylishText } from '../items/StylishText';
 import { getModelInfo } from '../render/ModelType';
 import { StatusRenderer } from '../render/StatusRenderer';
 
-export type DetailsField =
-  | {
-      hidden?: boolean;
-      icon?: InvenTreeIconType;
-      name: string;
-      label?: string;
-      badge?: BadgeType;
-      copy?: boolean;
-      value_formatter?: () => ValueFormatterReturn;
-    } & (
-      | StringDetailField
-      | BooleanField
-      | LinkDetailField
-      | ProgressBarField
-      | StatusField
-    );
+export type DetailsField = {
+  hidden?: boolean;
+  icon?: InvenTreeIconType;
+  name: string;
+  label?: string;
+  badge?: BadgeType;
+  copy?: boolean;
+  value_formatter?: () => ValueFormatterReturn;
+} & (
+  | StringDetailField
+  | BooleanField
+  | LinkDetailField
+  | ProgressBarField
+  | StatusField
+);
 
 type BadgeType = 'owner' | 'user' | 'group';
 type ValueFormatterReturn = string | number | null | React.ReactNode;
@@ -104,7 +103,7 @@ function NameBadge({
   const { data } = useQuery({
     queryKey: ['badge', type, pk],
     queryFn: async () => {
-      let path: string = '';
+      let path = '';
 
       switch (type) {
         case 'owner':
@@ -141,7 +140,7 @@ function NameBadge({
   const settings = useGlobalSettingsState();
 
   if (!data || data.isLoading || data.isFetching) {
-    return <Skeleton height={12} radius="md" />;
+    return <Skeleton height={12} radius='md' />;
   }
 
   // Rendering a user's rame for the badge
@@ -162,10 +161,10 @@ function NameBadge({
   }
 
   return (
-    <Group wrap="nowrap" gap="sm" justify="right">
+    <Group wrap='nowrap' gap='sm' justify='right'>
       <Badge
-        color="dark"
-        variant="filled"
+        color='dark'
+        variant='filled'
         style={{ display: 'flex', alignItems: 'center' }}
       >
         {data?.name ?? _render_name()}
@@ -176,7 +175,7 @@ function NameBadge({
 }
 
 function DateValue(props: Readonly<FieldProps>) {
-  return <Text size="sm">{formatDate(props.field_value?.toString())}</Text>;
+  return <Text size='sm'>{formatDate(props.field_value?.toString())}</Text>;
 }
 
 /**
@@ -185,7 +184,7 @@ function DateValue(props: Readonly<FieldProps>) {
  * If user is defined, a badge is rendered in addition to main value
  */
 function TableStringValue(props: Readonly<FieldProps>) {
-  let value = props?.field_value;
+  const value = props?.field_value;
 
   let renderedValue = null;
 
@@ -194,19 +193,19 @@ function TableStringValue(props: Readonly<FieldProps>) {
   } else if (props?.field_data?.value_formatter) {
     renderedValue = props.field_data.value_formatter();
   } else if (value === null || value === undefined) {
-    renderedValue = <Text size="sm">'---'</Text>;
+    renderedValue = <Text size='sm'>'---'</Text>;
   } else {
-    renderedValue = <Text size="sm">{value.toString()}</Text>;
+    renderedValue = <Text size='sm'>{value.toString()}</Text>;
   }
 
   return (
-    <Group wrap="nowrap" gap="xs" justify="space-apart">
-      <Group wrap="nowrap" gap="xs" justify="left">
+    <Group wrap='nowrap' gap='xs' justify='space-apart'>
+      <Group wrap='nowrap' gap='xs' justify='left'>
         {renderedValue}
-        {props.field_data.unit == true && <Text size="xs">{props.unit}</Text>}
+        {props.field_data.unit && <Text size='xs'>{props.unit}</Text>}
       </Group>
       {props.field_data.user && (
-        <NameBadge pk={props.field_data?.user} type="user" />
+        <NameBadge pk={props.field_data?.user} type='user' />
       )}
     </Group>
   );
@@ -265,7 +264,7 @@ function TableAnchorValue(props: Readonly<FieldProps>) {
   );
 
   if (!data || data.isLoading || data.isFetching) {
-    return <Skeleton height={12} radius="md" />;
+    return <Skeleton height={12} radius='md' />;
   }
 
   if (props.field_data.external) {
@@ -277,7 +276,7 @@ function TableAnchorValue(props: Readonly<FieldProps>) {
       >
         <span style={{ display: 'flex', alignItems: 'center', gap: '3px' }}>
           <Text>{props.field_value}</Text>
-          <InvenTreeIcon icon="external" iconProps={{ size: 15 }} />
+          <InvenTreeIcon icon='external' iconProps={{ size: 15 }} />
         </span>
       </Anchor>
     );
@@ -304,7 +303,7 @@ function TableAnchorValue(props: Readonly<FieldProps>) {
   return (
     <>
       {make_link ? (
-        <Anchor href="#" onClick={handleLinkClick}>
+        <Anchor href='#' onClick={handleLinkClick}>
           <Text>{value}</Text>
         </Anchor>
       ) : (
@@ -316,7 +315,7 @@ function TableAnchorValue(props: Readonly<FieldProps>) {
 
 function ProgressBarValue(props: Readonly<FieldProps>) {
   if (props.field_data.total <= 0) {
-    return <Text size="sm">{props.field_data.progress}</Text>;
+    return <Text size='sm'>{props.field_data.progress}</Text>;
   }
 
   return (
@@ -404,10 +403,10 @@ export function DetailsTable({
   title?: string;
 }>) {
   return (
-    <Paper p="xs" withBorder radius="xs">
-      <Stack gap="xs">
-        {title && <StylishText size="lg">{title}</StylishText>}
-        <Table striped verticalSpacing={5} horizontalSpacing="sm">
+    <Paper p='xs' withBorder radius='xs'>
+      <Stack gap='xs'>
+        {title && <StylishText size='lg'>{title}</StylishText>}
+        <Table striped verticalSpacing={5} horizontalSpacing='sm'>
           <Table.Tbody>
             {fields
               .filter((field: DetailsField) => !field.hidden)
diff --git a/src/frontend/src/components/details/DetailsBadge.tsx b/src/frontend/src/components/details/DetailsBadge.tsx
index 826595589642..93f60fd5e3e2 100644
--- a/src/frontend/src/components/details/DetailsBadge.tsx
+++ b/src/frontend/src/components/details/DetailsBadge.tsx
@@ -13,7 +13,7 @@ export default function DetailsBadge(props: Readonly<DetailsBadgeProps>) {
   }
 
   return (
-    <Badge color={props.color} variant="filled" size={props.size ?? 'lg'}>
+    <Badge color={props.color} variant='filled' size={props.size ?? 'lg'}>
       {props.label}
     </Badge>
   );
diff --git a/src/frontend/src/components/details/DetailsImage.tsx b/src/frontend/src/components/details/DetailsImage.tsx
index c4d3ccc63085..43fae3913a97 100644
--- a/src/frontend/src/components/details/DetailsImage.tsx
+++ b/src/frontend/src/components/details/DetailsImage.tsx
@@ -10,13 +10,17 @@ import {
   rem,
   useMantineColorScheme
 } from '@mantine/core';
-import { Dropzone, FileWithPath, IMAGE_MIME_TYPE } from '@mantine/dropzone';
+import {
+  Dropzone,
+  type FileWithPath,
+  IMAGE_MIME_TYPE
+} from '@mantine/dropzone';
 import { useHover } from '@mantine/hooks';
 import { modals } from '@mantine/modals';
 import { useMemo, useState } from 'react';
 
 import { api } from '../../App';
-import { UserRoles } from '../../enums/Roles';
+import type { UserRoles } from '../../enums/Roles';
 import { cancelEvent } from '../../functions/events';
 import { InvenTreeIcon } from '../../functions/icons';
 import { useEditApiFormModal } from '../../hooks/UseForm';
@@ -66,7 +70,7 @@ const backup_image = '/static/img/blank_image.png';
  */
 const removeModal = (apiPath: string, setImage: (image: string) => void) =>
   modals.openConfirmModal({
-    title: <StylishText size="xl">{t`Remove Image`}</StylishText>,
+    title: <StylishText size='xl'>{t`Remove Image`}</StylishText>,
     children: (
       <Text>
         <Trans>Remove the associated image from this item?</Trans>
@@ -95,12 +99,12 @@ function UploadModal({
   // Components to show in the Dropzone when no file is selected
   const noFileIdle = (
     <Group>
-      <InvenTreeIcon icon="photo" iconProps={{ size: '3.2rem', stroke: 1.5 }} />
+      <InvenTreeIcon icon='photo' iconProps={{ size: '3.2rem', stroke: 1.5 }} />
       <div>
-        <Text size="xl" inline>
+        <Text size='xl' inline>
           <Trans>Drag and drop to upload</Trans>
         </Text>
-        <Text size="sm" c="dimmed" inline mt={7}>
+        <Text size='sm' c='dimmed' inline mt={7}>
           <Trans>Click to select file(s)</Trans>
         </Text>
       </div>
@@ -126,16 +130,16 @@ function UploadModal({
         <Image
           src={imageUrl}
           onLoad={() => URL.revokeObjectURL(imageUrl)}
-          radius="sm"
+          radius='sm'
           height={75}
-          fit="contain"
+          fit='contain'
           style={{ flexBasis: '40%' }}
         />
         <div style={{ flexBasis: '60%' }}>
-          <Text size="xl" inline style={{ wordBreak: 'break-all' }}>
+          <Text size='xl' inline style={{ wordBreak: 'break-all' }}>
             {file.name}
           </Text>
-          <Text size="sm" c="dimmed" inline mt={7}>
+          <Text size='sm' c='dimmed' inline mt={7}>
             {size.toFixed(2)} MB
           </Text>
         </div>
@@ -178,13 +182,13 @@ function UploadModal({
         loading={uploading}
       >
         <Group
-          justify="center"
-          gap="xl"
+          justify='center'
+          gap='xl'
           style={{ minHeight: rem(140), pointerEvents: 'none' }}
         >
           <Dropzone.Accept>
             <InvenTreeIcon
-              icon="upload"
+              icon='upload'
               iconProps={{
                 size: '3.2rem',
                 stroke: 1.5,
@@ -194,7 +198,7 @@ function UploadModal({
           </Dropzone.Accept>
           <Dropzone.Reject>
             <InvenTreeIcon
-              icon="reject"
+              icon='reject'
               iconProps={{
                 size: '3.2rem',
                 stroke: 1.5,
@@ -223,7 +227,7 @@ function UploadModal({
         }}
       >
         <Button
-          variant="outline"
+          variant='outline'
           disabled={!currentFile}
           onClick={() => setCurrentFile(null)}
         >
@@ -266,26 +270,26 @@ function ImageActionButtons({
     <>
       {visible && (
         <Group
-          gap="xs"
+          gap='xs'
           style={{ zIndex: 2, position: 'absolute', top: '10px', left: '10px' }}
         >
           {actions.selectExisting && (
             <ActionButton
               icon={
                 <InvenTreeIcon
-                  icon="select_image"
+                  icon='select_image'
                   iconProps={{ color: 'white' }}
                 />
               }
               tooltip={t`Select from existing images`}
-              variant="outline"
-              size="lg"
-              tooltipAlignment="top"
+              variant='outline'
+              size='lg'
+              tooltipAlignment='top'
               onClick={(event: any) => {
                 cancelEvent(event);
 
                 modals.open({
-                  title: <StylishText size="xl">{t`Select Image`}</StylishText>,
+                  title: <StylishText size='xl'>{t`Select Image`}</StylishText>,
                   size: 'xxl',
                   children: <PartThumbTable pk={pk} setImage={setImage} />
                 });
@@ -297,14 +301,14 @@ function ImageActionButtons({
               <ActionButton
                 icon={
                   <InvenTreeIcon
-                    icon="download"
+                    icon='download'
                     iconProps={{ color: 'white' }}
                   />
                 }
                 tooltip={t`Download remote image`}
-                variant="outline"
-                size="lg"
-                tooltipAlignment="top"
+                variant='outline'
+                size='lg'
+                tooltipAlignment='top'
                 onClick={(event: any) => {
                   cancelEvent(event);
                   downloadImage();
@@ -314,16 +318,16 @@ function ImageActionButtons({
           {actions.uploadFile && (
             <ActionButton
               icon={
-                <InvenTreeIcon icon="upload" iconProps={{ color: 'white' }} />
+                <InvenTreeIcon icon='upload' iconProps={{ color: 'white' }} />
               }
               tooltip={t`Upload new image`}
-              variant="outline"
-              size="lg"
-              tooltipAlignment="top"
+              variant='outline'
+              size='lg'
+              tooltipAlignment='top'
               onClick={(event: any) => {
                 cancelEvent(event);
                 modals.open({
-                  title: <StylishText size="xl">{t`Upload Image`}</StylishText>,
+                  title: <StylishText size='xl'>{t`Upload Image`}</StylishText>,
                   children: (
                     <UploadModal apiPath={apiPath} setImage={setImage} />
                   )
@@ -334,12 +338,12 @@ function ImageActionButtons({
           {actions.deleteFile && hasImage && (
             <ActionButton
               icon={
-                <InvenTreeIcon icon="delete" iconProps={{ color: 'red' }} />
+                <InvenTreeIcon icon='delete' iconProps={{ color: 'red' }} />
               }
               tooltip={t`Delete image`}
-              variant="outline"
-              size="lg"
-              tooltipAlignment="top"
+              variant='outline'
+              size='lg'
+              tooltipAlignment='top'
               onClick={(event: any) => {
                 cancelEvent(event);
                 removeModal(apiPath, setImage);
@@ -363,7 +367,7 @@ export function DetailsImage(props: Readonly<DetailImageProps>) {
   // Sets a new image, and triggers upstream instance refresh
   const setAndRefresh = (image: string) => {
     setImg(image);
-    props.refresh && props.refresh();
+    props.refresh?.();
   };
 
   const permissions = useUserState();
@@ -403,7 +407,7 @@ export function DetailsImage(props: Readonly<DetailImageProps>) {
   return (
     <>
       {downloadImage.modal}
-      <AspectRatio ref={ref} maw={IMAGE_DIMENSION} ratio={1} pos="relative">
+      <AspectRatio ref={ref} maw={IMAGE_DIMENSION} ratio={1} pos='relative'>
         <>
           <ApiImage
             src={img}
@@ -414,12 +418,12 @@ export function DetailsImage(props: Readonly<DetailImageProps>) {
           {permissions.hasChangeRole(props.appRole) &&
             hasOverlay &&
             hovered && (
-              <Overlay color="black" opacity={0.8} onClick={expandImage}>
+              <Overlay color='black' opacity={0.8} onClick={expandImage}>
                 <ImageActionButtons
                   visible={hovered}
                   actions={props.imageActions}
                   apiPath={props.apiPath}
-                  hasImage={props.src ? true : false}
+                  hasImage={!!props.src}
                   pk={props.pk}
                   setImage={setAndRefresh}
                   downloadImage={downloadImage.open}
diff --git a/src/frontend/src/components/details/ItemDetails.tsx b/src/frontend/src/components/details/ItemDetails.tsx
index e2116240ff9a..f1e18fa1b91a 100644
--- a/src/frontend/src/components/details/ItemDetails.tsx
+++ b/src/frontend/src/components/details/ItemDetails.tsx
@@ -1,10 +1,10 @@
 import { Paper, SimpleGrid } from '@mantine/core';
-import React from 'react';
+import type React from 'react';
 
 export function ItemDetailsGrid(props: React.PropsWithChildren<{}>) {
   return (
-    <Paper p="xs">
-      <SimpleGrid cols={2} spacing="xs" verticalSpacing="xs">
+    <Paper p='xs'>
+      <SimpleGrid cols={2} spacing='xs' verticalSpacing='xs'>
         {props.children}
       </SimpleGrid>
     </Paper>
diff --git a/src/frontend/src/components/editors/NotesEditor.tsx b/src/frontend/src/components/editors/NotesEditor.tsx
index e576512f1563..87bf4a43100a 100644
--- a/src/frontend/src/components/editors/NotesEditor.tsx
+++ b/src/frontend/src/components/editors/NotesEditor.tsx
@@ -2,14 +2,14 @@ import { t } from '@lingui/macro';
 import { notifications } from '@mantine/notifications';
 import { useQuery } from '@tanstack/react-query';
 import DOMPurify from 'dompurify';
-import EasyMDE, { default as SimpleMde } from 'easymde';
+import EasyMDE, { type default as SimpleMde } from 'easymde';
 import 'easymde/dist/easymde.min.css';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import SimpleMDE from 'react-simplemde-editor';
 
 import { api } from '../../App';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
-import { ModelType } from '../../enums/ModelType';
+import type { ModelType } from '../../enums/ModelType';
 import { apiUrl } from '../../states/ApiState';
 import { ModelInformationDict } from '../render/ModelType';
 
@@ -126,7 +126,7 @@ export default function NotesEditor({
         .catch((error) => {
           notifications.hide('notes');
 
-          let msg =
+          const msg =
             error?.response?.data?.non_field_errors[0] ??
             t`Failed to save notes`;
 
@@ -142,7 +142,7 @@ export default function NotesEditor({
   );
 
   const editorOptions: SimpleMde.Options = useMemo(() => {
-    let icons: any[] = [];
+    const icons: any[] = [];
 
     if (editing) {
       icons.push({
@@ -201,13 +201,14 @@ export default function NotesEditor({
 
   useEffect(() => {
     if (mdeInstance) {
-      let previewMode = !(editable && editing);
+      const previewMode = !(editable && editing);
 
       mdeInstance.codemirror?.setOption('readOnly', previewMode);
 
       // Ensure the preview mode is toggled if required
       if (mdeInstance.isPreviewActive() != previewMode) {
-        let sibling = mdeInstance?.codemirror.getWrapperElement()?.nextSibling;
+        const sibling =
+          mdeInstance?.codemirror.getWrapperElement()?.nextSibling;
 
         if (sibling != null) {
           EasyMDE.togglePreview(mdeInstance);
diff --git a/src/frontend/src/components/editors/TemplateEditor/CodeEditor/CodeEditor.tsx b/src/frontend/src/components/editors/TemplateEditor/CodeEditor/CodeEditor.tsx
index 789fbad4c19f..bc0ce2b73745 100644
--- a/src/frontend/src/components/editors/TemplateEditor/CodeEditor/CodeEditor.tsx
+++ b/src/frontend/src/components/editors/TemplateEditor/CodeEditor/CodeEditor.tsx
@@ -9,7 +9,7 @@ import {
   useState
 } from 'react';
 
-import { EditorComponent } from '../TemplateEditor';
+import type { EditorComponent } from '../TemplateEditor';
 
 type Tag = {
   label: string;
@@ -88,8 +88,8 @@ Returns: <small>${tag.returns}</small>`;
 const tooltips = hoverTooltip((view, pos, side) => {
   // extract the word at the current hover position into the variable text
   let { from, to, text } = view.state.doc.lineAt(pos);
-  let start = pos,
-    end = pos;
+  let start = pos;
+  let end = pos;
   while (start > from && /\w/.test(text[start - from - 1])) start--;
   while (end < to && /\w/.test(text[end - from])) end++;
   if ((start == pos && side < 0) || (end == pos && side > 0)) return null;
@@ -152,7 +152,7 @@ export const CodeEditorComponent: EditorComponent = forwardRef((props, ref) => {
       <div
         style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}
         ref={editor}
-      ></div>
+      />
     </div>
   );
 });
diff --git a/src/frontend/src/components/editors/TemplateEditor/CodeEditor/index.tsx b/src/frontend/src/components/editors/TemplateEditor/CodeEditor/index.tsx
index f8f15dac63d7..47d4d7218148 100644
--- a/src/frontend/src/components/editors/TemplateEditor/CodeEditor/index.tsx
+++ b/src/frontend/src/components/editors/TemplateEditor/CodeEditor/index.tsx
@@ -1,7 +1,7 @@
 import { t } from '@lingui/macro';
 import { IconCode } from '@tabler/icons-react';
 
-import { Editor } from '../TemplateEditor';
+import type { Editor } from '../TemplateEditor';
 import { CodeEditorComponent } from './CodeEditor';
 
 export const CodeEditor: Editor = {
diff --git a/src/frontend/src/components/editors/TemplateEditor/PdfPreview/PdfPreview.tsx b/src/frontend/src/components/editors/TemplateEditor/PdfPreview/PdfPreview.tsx
index c0e48ae0a50c..3f0a4b033f8b 100644
--- a/src/frontend/src/components/editors/TemplateEditor/PdfPreview/PdfPreview.tsx
+++ b/src/frontend/src/components/editors/TemplateEditor/PdfPreview/PdfPreview.tsx
@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro';
 import { forwardRef, useImperativeHandle, useState } from 'react';
 
 import { api } from '../../../../App';
-import { PreviewAreaComponent } from '../TemplateEditor';
+import type { PreviewAreaComponent } from '../TemplateEditor';
 
 export const PdfPreviewComponent: PreviewAreaComponent = forwardRef(
   (props, ref) => {
@@ -56,13 +56,13 @@ export const PdfPreviewComponent: PreviewAreaComponent = forwardRef(
           });
         }
 
-        let pdf = new Blob([preview.data], {
+        const pdf = new Blob([preview.data], {
           type: preview.headers['content-type']
         });
 
-        let srcUrl = URL.createObjectURL(pdf);
+        const srcUrl = URL.createObjectURL(pdf);
 
-        setPdfUrl(srcUrl + '#view=fitH');
+        setPdfUrl(`${srcUrl}#view=fitH`);
       }
     }));
 
@@ -82,7 +82,7 @@ export const PdfPreviewComponent: PreviewAreaComponent = forwardRef(
           </div>
         )}
         {pdfUrl && (
-          <iframe src={pdfUrl} width="100%" height="100%" title="PDF Preview" />
+          <iframe src={pdfUrl} width='100%' height='100%' title='PDF Preview' />
         )}
       </>
     );
diff --git a/src/frontend/src/components/editors/TemplateEditor/PdfPreview/index.tsx b/src/frontend/src/components/editors/TemplateEditor/PdfPreview/index.tsx
index 5709d756e8f9..884fba88f7c5 100644
--- a/src/frontend/src/components/editors/TemplateEditor/PdfPreview/index.tsx
+++ b/src/frontend/src/components/editors/TemplateEditor/PdfPreview/index.tsx
@@ -1,7 +1,7 @@
 import { t } from '@lingui/macro';
 import { IconFileTypePdf } from '@tabler/icons-react';
 
-import { PreviewArea } from '../TemplateEditor';
+import type { PreviewArea } from '../TemplateEditor';
 import { PdfPreviewComponent } from './PdfPreview';
 
 export const PdfPreview: PreviewArea = {
diff --git a/src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx b/src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx
index 6e8290458cea..b01bdafd798f 100644
--- a/src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx
+++ b/src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx
@@ -21,19 +21,14 @@ import {
   IconRefresh
 } from '@tabler/icons-react';
 import Split from '@uiw/react-split';
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from 'react';
+import type React from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { api } from '../../../App';
 import { ModelType } from '../../../enums/ModelType';
-import { TablerIconType } from '../../../functions/icons';
+import type { TablerIconType } from '../../../functions/icons';
 import { apiUrl } from '../../../states/ApiState';
-import { TemplateI } from '../../../tables/settings/TemplateTable';
+import type { TemplateI } from '../../../tables/settings/TemplateTable';
 import { Boundary } from '../../Boundary';
 import { SplitButton } from '../../buttons/SplitButton';
 import { StandaloneField } from '../../forms/StandaloneField';
@@ -166,13 +161,13 @@ export function TemplateEditor(props: Readonly<TemplateEditorProps>) {
   }, [editorValue]);
 
   const updatePreview = useCallback(
-    async (confirmed: boolean, saveTemplate: boolean = true) => {
+    async (confirmed: boolean, saveTemplate = true) => {
       if (!confirmed) {
         openConfirmModal({
           title: t`Save & Reload Preview`,
           children: (
             <Alert
-              color="yellow"
+              color='yellow'
               icon={<IconAlertTriangle />}
               title={t`Are you sure you want to Save & Reload the preview?`}
             >
@@ -254,7 +249,7 @@ export function TemplateEditor(props: Readonly<TemplateEditorProps>) {
   }, [previewApiUrl, templateFilters]);
 
   return (
-    <Boundary label="TemplateEditor">
+    <Boundary label='TemplateEditor'>
       <Stack style={{ height: '100%', flex: '1' }}>
         <Split style={{ gap: '10px' }}>
           <Tabs
@@ -277,18 +272,18 @@ export function TemplateEditor(props: Readonly<TemplateEditorProps>) {
                   <Tabs.Tab
                     key={Editor.key}
                     value={Editor.key}
-                    leftSection={Editor.icon && <Editor.icon size="0.8rem" />}
+                    leftSection={Editor.icon && <Editor.icon size='0.8rem' />}
                   >
                     {Editor.name}
                   </Tabs.Tab>
                 );
               })}
 
-              <Group justify="right" style={{ flex: '1' }} wrap="nowrap">
+              <Group justify='right' style={{ flex: '1' }} wrap='nowrap'>
                 <SplitButton
                   loading={isPreviewLoading}
-                  defaultSelected="preview_save"
-                  name="preview-options"
+                  defaultSelected='preview_save'
+                  name='preview-options'
                   options={[
                     {
                       key: 'preview',
@@ -342,7 +337,7 @@ export function TemplateEditor(props: Readonly<TemplateEditorProps>) {
                   key={PreviewArea.key}
                   value={PreviewArea.key}
                   leftSection={
-                    PreviewArea.icon && <PreviewArea.icon size="0.8rem" />
+                    PreviewArea.icon && <PreviewArea.icon size='0.8rem' />
                   }
                 >
                   {PreviewArea.name}
@@ -392,7 +387,7 @@ export function TemplateEditor(props: Readonly<TemplateEditorProps>) {
                   <PreviewArea.component ref={previewRef} />
 
                   {errorOverlay && (
-                    <Overlay color="red" center blur={0.2}>
+                    <Overlay color='red' center blur={0.2}>
                       <CloseButton
                         onClick={() => setErrorOverlay(null)}
                         style={{
@@ -401,13 +396,13 @@ export function TemplateEditor(props: Readonly<TemplateEditorProps>) {
                           right: '10px',
                           color: '#fff'
                         }}
-                        variant="filled"
+                        variant='filled'
                       />
                       <Alert
-                        color="red"
+                        color='red'
                         icon={<IconExclamationCircle />}
                         title={t`Error rendering template`}
-                        mx="10px"
+                        mx='10px'
                       >
                         <Code>{errorOverlay}</Code>
                       </Alert>
diff --git a/src/frontend/src/components/errors/GenericErrorPage.tsx b/src/frontend/src/components/errors/GenericErrorPage.tsx
index 128f487955f1..08b0fc3db0d2 100644
--- a/src/frontend/src/components/errors/GenericErrorPage.tsx
+++ b/src/frontend/src/components/errors/GenericErrorPage.tsx
@@ -31,20 +31,20 @@ export default function ErrorPage({
   return (
     <LanguageContext>
       <Center>
-        <Container w="md" miw={400}>
-          <Card withBorder shadow="xs" padding="xl" radius="sm">
-            <Card.Section p="lg">
-              <Group gap="xs">
-                <ActionIcon color="red" variant="transparent" size="xl">
+        <Container w='md' miw={400}>
+          <Card withBorder shadow='xs' padding='xl' radius='sm'>
+            <Card.Section p='lg'>
+              <Group gap='xs'>
+                <ActionIcon color='red' variant='transparent' size='xl'>
                   <IconExclamationCircle />
                 </ActionIcon>
-                <Text size="xl">{title}</Text>
+                <Text size='xl'>{title}</Text>
               </Group>
             </Card.Section>
             <Divider />
-            <Card.Section p="lg">
-              <Stack gap="md">
-                <Text size="lg">{message}</Text>
+            <Card.Section p='lg'>
+              <Stack gap='md'>
+                <Text size='lg'>{message}</Text>
                 {status && (
                   <Text>
                     <Trans>Status Code</Trans>: {status}
@@ -53,11 +53,11 @@ export default function ErrorPage({
               </Stack>
             </Card.Section>
             <Divider />
-            <Card.Section p="lg">
+            <Card.Section p='lg'>
               <Center>
                 <Button
-                  variant="outline"
-                  color="green"
+                  variant='outline'
+                  color='green'
                   onClick={() => navigate('/')}
                 >
                   <Trans>Return to the index page</Trans>
diff --git a/src/frontend/src/components/forms/ApiForm.tsx b/src/frontend/src/components/forms/ApiForm.tsx
index d7dbffd1a9c8..3e6a5abf8b63 100644
--- a/src/frontend/src/components/forms/ApiForm.tsx
+++ b/src/frontend/src/components/forms/ApiForm.tsx
@@ -2,7 +2,7 @@ import { t } from '@lingui/macro';
 import {
   Alert,
   Button,
-  DefaultMantineColor,
+  type DefaultMantineColor,
   Divider,
   Group,
   LoadingOverlay,
@@ -15,19 +15,19 @@ import { notifications } from '@mantine/notifications';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
-  FieldValues,
+  type FieldValues,
   FormProvider,
-  SubmitErrorHandler,
-  SubmitHandler,
+  type SubmitErrorHandler,
+  type SubmitHandler,
   useForm
 } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 
 import { api, queryClient } from '../../App';
-import { ApiEndpoints } from '../../enums/ApiEndpoints';
-import { ModelType } from '../../enums/ModelType';
+import type { ApiEndpoints } from '../../enums/ApiEndpoints';
+import type { ModelType } from '../../enums/ModelType';
 import {
-  NestedDict,
+  type NestedDict,
   constructField,
   constructFormUrl,
   extractAvailableFields,
@@ -38,13 +38,13 @@ import {
   showTimeoutNotification
 } from '../../functions/notifications';
 import { getDetailUrl } from '../../functions/urls';
-import { TableState } from '../../hooks/UseTable';
-import { PathParams } from '../../states/ApiState';
+import type { TableState } from '../../hooks/UseTable';
+import type { PathParams } from '../../states/ApiState';
 import { Boundary } from '../Boundary';
 import {
   ApiFormField,
-  ApiFormFieldSet,
-  ApiFormFieldType
+  type ApiFormFieldSet,
+  type ApiFormFieldType
 } from './fields/ApiFormField';
 
 export interface ApiFormAction {
@@ -137,7 +137,7 @@ export function OptionsApiForm({
       props.pathParams
     ],
     queryFn: async () => {
-      let response = await api.options(url);
+      const response = await api.options(url);
       let fields: Record<string, ApiFormFieldType> | null = {};
       if (!props.ignorePermissionCheck) {
         fields = extractAvailableFields(response, props.method);
@@ -173,7 +173,7 @@ export function OptionsApiForm({
       });
 
       // If the user has specified initial data, use that value here
-      let value = _props?.initialData?.[k];
+      const value = _props?.initialData?.[k];
 
       if (value) {
         _props.fields[k].value = value;
@@ -212,7 +212,7 @@ export function ApiForm({
   );
 
   const defaultValues: FieldValues = useMemo(() => {
-    let defaultValuesMap = mapFields(fields ?? {}, (_path, field) => {
+    const defaultValuesMap = mapFields(fields ?? {}, (_path, field) => {
       return field.value ?? field.default ?? undefined;
     });
 
@@ -306,9 +306,9 @@ export function ApiForm({
   });
 
   useEffect(() => {
-    let _fields: any = props.fields || {};
-    let _initialData: any = props.initialData || {};
-    let _fetchedData: any = initialDataQuery.data || {};
+    const _fields: any = props.fields || {};
+    const _initialData: any = props.initialData || {};
+    const _fetchedData: any = initialDataQuery.data || {};
 
     for (const k of Object.keys(_fields)) {
       // Ensure default values override initial field spec
@@ -391,7 +391,7 @@ export function ApiForm({
   const submitForm: SubmitHandler<FieldValues> = async (data) => {
     setNonFieldErrors([]);
 
-    let method = props.method?.toLowerCase() ?? 'get';
+    const method = props.method?.toLowerCase() ?? 'get';
 
     let hasFiles = false;
 
@@ -400,13 +400,13 @@ export function ApiForm({
       data = props.processFormData(data);
     }
 
-    let jsonData = { ...data };
-    let formData = new FormData();
+    const jsonData = { ...data };
+    const formData = new FormData();
 
     Object.keys(data).forEach((key: string) => {
       let value: any = data[key];
-      let field_type = fields[key]?.field_type;
-      let exclude = fields[key]?.exclude;
+      const field_type = fields[key]?.field_type;
+      const exclude = fields[key]?.exclude;
 
       if (field_type == 'file upload' && !!value) {
         hasFiles = true;
@@ -457,7 +457,7 @@ export function ApiForm({
               navigate(getDetailUrl(props.modelType, response.data?.pk));
             } else if (props.table) {
               // If we want to automatically update or reload a linked table
-              let pk_field = props.pk_field ?? 'pk';
+              const pk_field = props.pk_field ?? 'pk';
 
               if (props.pk && response?.data[pk_field]) {
                 props.table.updateRecord(response.data);
@@ -499,8 +499,8 @@ export function ApiForm({
                   const path = _path ? `${_path}.${k}` : k;
 
                   // Determine if field "k" is valid (exists and is visible)
-                  let field = fields[k];
-                  let valid = field && !field.hidden;
+                  const field = fields[k];
+                  const valid = field && !field.hidden;
 
                   if (!valid || k === 'non_field_errors' || k === '__all__') {
                     if (Array.isArray(v)) {
@@ -574,11 +574,11 @@ export function ApiForm({
         <Paper mah={'65vh'} style={{ overflowY: 'auto' }}>
           <div>
             {/* Form Fields */}
-            <Stack gap="sm">
+            <Stack gap='sm'>
               {(!isValid || nonFieldErrors.length > 0) && (
-                <Alert radius="sm" color="red" title={t`Form Error`}>
+                <Alert radius='sm' color='red' title={t`Form Error`}>
                   {nonFieldErrors.length > 0 ? (
-                    <Stack gap="xs">
+                    <Stack gap='xs'>
                       {nonFieldErrors.map((message) => (
                         <Text key={message}>{message}</Text>
                       ))}
@@ -591,19 +591,19 @@ export function ApiForm({
               <Boundary label={`ApiForm-${id}-PreFormContent`}>
                 {props.preFormContent}
                 {props.preFormSuccess && (
-                  <Alert color="green" radius="sm">
+                  <Alert color='green' radius='sm'>
                     {props.preFormSuccess}
                   </Alert>
                 )}
                 {props.preFormWarning && (
-                  <Alert color="orange" radius="sm">
+                  <Alert color='orange' radius='sm'>
                     {props.preFormWarning}
                   </Alert>
                 )}
               </Boundary>
               <Boundary label={`ApiForm-${id}-FormContent`}>
                 <FormProvider {...form}>
-                  <Stack gap="xs">
+                  <Stack gap='xs'>
                     {Object.entries(fields).map(([fieldName, field]) => {
                       return (
                         <ApiFormField
@@ -638,13 +638,13 @@ export function ApiForm({
         {/* Footer with Action Buttons */}
         <Divider />
         <div>
-          <Group justify="right">
+          <Group justify='right'>
             {props.actions?.map((action, i) => (
               <Button
-                key={i}
+                key={`${i}-${action.text}`}
                 onClick={action.onClick}
                 variant={action.variant ?? 'outline'}
-                radius="sm"
+                radius='sm'
                 color={action.color}
               >
                 {action.text}
@@ -652,8 +652,8 @@ export function ApiForm({
             ))}
             <Button
               onClick={form.handleSubmit(submitForm, onFormError)}
-              variant="filled"
-              radius="sm"
+              variant='filled'
+              radius='sm'
               color={props.submitColor ?? 'green'}
               disabled={isLoading || (props.fetchInitialData && !isDirty)}
             >
diff --git a/src/frontend/src/components/forms/AuthenticationForm.tsx b/src/frontend/src/components/forms/AuthenticationForm.tsx
index 37f7e8b5ae72..cc75bb2d026d 100644
--- a/src/frontend/src/components/forms/AuthenticationForm.tsx
+++ b/src/frontend/src/components/forms/AuthenticationForm.tsx
@@ -88,7 +88,7 @@ export function AuthenticationForm() {
     <>
       {auth_settings?.sso_enabled === true ? (
         <>
-          <Group grow mb="md" mt="md">
+          <Group grow mb='md' mt='md'>
             {auth_settings.providers.map((provider) => (
               <SsoButton provider={provider} key={provider.id} />
             ))}
@@ -96,8 +96,8 @@ export function AuthenticationForm() {
 
           <Divider
             label={t`Or continue with other methods`}
-            labelPosition="center"
-            my="lg"
+            labelPosition='center'
+            my='lg'
           />
         </>
       ) : null}
@@ -117,12 +117,12 @@ export function AuthenticationForm() {
               {...classicForm.getInputProps('password')}
             />
             {auth_settings?.password_forgotten_enabled === true && (
-              <Group justify="space-between" mt="0">
+              <Group justify='space-between' mt='0'>
                 <Anchor
-                  component="button"
-                  type="button"
-                  c="dimmed"
-                  size="xs"
+                  component='button'
+                  type='button'
+                  c='dimmed'
+                  size='xs'
                   onClick={() => navigate('/reset-password')}
                 >
                   <Trans>Reset password</Trans>
@@ -136,18 +136,18 @@ export function AuthenticationForm() {
               required
               label={t`Email`}
               description={t`We will send you a link to login - if you are registered`}
-              placeholder="email@example.org"
+              placeholder='email@example.org'
               {...simpleForm.getInputProps('email')}
             />
           </Stack>
         )}
 
-        <Group justify="space-between" mt="xl">
+        <Group justify='space-between' mt='xl'>
           <Anchor
-            component="button"
-            type="button"
-            c="dimmed"
-            size="xs"
+            component='button'
+            type='button'
+            c='dimmed'
+            size='xs'
             onClick={() => setMode.toggle()}
           >
             {classicLoginMode ? (
@@ -156,9 +156,9 @@ export function AuthenticationForm() {
               <Trans>Use username and password</Trans>
             )}
           </Anchor>
-          <Button type="submit" disabled={isLoggingIn} onClick={handleLogin}>
+          <Button type='submit' disabled={isLoggingIn} onClick={handleLogin}>
             {isLoggingIn ? (
-              <Loader size="sm" />
+              <Loader size='sm' />
             ) : (
               <>
                 {classicLoginMode ? (
@@ -235,7 +235,7 @@ export function RegistrationForm() {
               required
               label={t`Email`}
               description={t`This will be used for a confirmation`}
-              placeholder="email@example.org"
+              placeholder='email@example.org'
               {...registrationForm.getInputProps('email')}
             />
             <PasswordInput
@@ -252,9 +252,9 @@ export function RegistrationForm() {
             />
           </Stack>
 
-          <Group justify="space-between" mt="xl">
+          <Group justify='space-between' mt='xl'>
             <Button
-              type="submit"
+              type='submit'
               disabled={isRegistering}
               onClick={handleRegistration}
               fullWidth
@@ -265,10 +265,10 @@ export function RegistrationForm() {
         </form>
       )}
       {both_reg_enabled && (
-        <Divider label={t`Or use SSO`} labelPosition="center" my="lg" />
+        <Divider label={t`Or use SSO`} labelPosition='center' my='lg' />
       )}
       {auth_settings?.sso_registration === true && (
-        <Group grow mb="md" mt="md">
+        <Group grow mb='md' mt='md'>
           {auth_settings.providers.map((provider) => (
             <SsoButton provider={provider} key={provider.id} />
           ))}
@@ -293,15 +293,15 @@ export function ModeSelector({
 
   if (registration_enabled === false) return null;
   return (
-    <Text ta="center" size={'xs'} mt={'md'}>
+    <Text ta='center' size={'xs'} mt={'md'}>
       {loginMode ? (
         <>
           <Trans>Don&apos;t have an account?</Trans>{' '}
           <Anchor
-            component="button"
-            type="button"
-            c="dimmed"
-            size="xs"
+            component='button'
+            type='button'
+            c='dimmed'
+            size='xs'
             onClick={() => setMode.close()}
           >
             <Trans>Register</Trans>
@@ -309,10 +309,10 @@ export function ModeSelector({
         </>
       ) : (
         <Anchor
-          component="button"
-          type="button"
-          c="dimmed"
-          size="xs"
+          component='button'
+          type='button'
+          c='dimmed'
+          size='xs'
           onClick={() => setMode.open()}
         >
           <Trans>Go back to login</Trans>
diff --git a/src/frontend/src/components/forms/HostOptionsForm.tsx b/src/frontend/src/components/forms/HostOptionsForm.tsx
index dddb592b835e..5b300611177f 100644
--- a/src/frontend/src/components/forms/HostOptionsForm.tsx
+++ b/src/frontend/src/components/forms/HostOptionsForm.tsx
@@ -12,7 +12,7 @@ import { useForm } from '@mantine/form';
 import { randomId } from '@mantine/hooks';
 import { IconSquarePlus, IconTrash } from '@tabler/icons-react';
 
-import { HostList } from '../../states/states';
+import type { HostList } from '../../states/states';
 
 export function HostOptionsForm({
   data,
@@ -29,7 +29,7 @@ export function HostOptionsForm({
   }
 
   const fields = Object.entries(form.values).map(([key]) => (
-    <Group key={key} mt="xs">
+    <Group key={key} mt='xs'>
       {form.values[key] !== undefined && (
         <>
           <TextInput
@@ -45,11 +45,11 @@ export function HostOptionsForm({
             {...form.getInputProps(`${key}.name`)}
           />
           <ActionIcon
-            color="red"
+            color='red'
             onClick={() => {
               deleteItem(key);
             }}
-            variant="default"
+            variant='default'
           >
             <IconTrash />
           </ActionIcon>
@@ -60,23 +60,23 @@ export function HostOptionsForm({
 
   return (
     <form onSubmit={form.onSubmit(saveOptions)}>
-      <Box style={{ maxWidth: 500 }} mx="auto">
+      <Box style={{ maxWidth: 500 }} mx='auto'>
         {fields.length > 0 ? (
-          <Group mb="xs">
-            <Text fw={500} size="sm" style={{ flex: 1 }}>
+          <Group mb='xs'>
+            <Text fw={500} size='sm' style={{ flex: 1 }}>
               <Trans>Host</Trans>
             </Text>
-            <Text fw={500} size="sm" style={{ flex: 1 }}>
+            <Text fw={500} size='sm' style={{ flex: 1 }}>
               <Trans>Name</Trans>
             </Text>
           </Group>
         ) : (
-          <Text c="dimmed" ta="center">
+          <Text c='dimmed' ta='center'>
             <Trans>No one here...</Trans>
           </Text>
         )}
         {fields}
-        <Group mt="md">
+        <Group mt='md'>
           <Button
             onClick={() =>
               form.setFieldValue(`${randomId()}`, { name: '', host: '' })
@@ -86,7 +86,7 @@ export function HostOptionsForm({
             <Trans>Add Host</Trans>
           </Button>
           <Space style={{ flex: 1 }} />
-          <Button type="submit">
+          <Button type='submit'>
             <Trans>Save</Trans>
           </Button>
         </Group>
diff --git a/src/frontend/src/components/forms/InstanceOptions.tsx b/src/frontend/src/components/forms/InstanceOptions.tsx
index 65616aa1c81c..4c7b282a2601 100644
--- a/src/frontend/src/components/forms/InstanceOptions.tsx
+++ b/src/frontend/src/components/forms/InstanceOptions.tsx
@@ -5,7 +5,7 @@ import { IconCheck } from '@tabler/icons-react';
 
 import { useServerApiState } from '../../states/ApiState';
 import { useLocalState } from '../../states/LocalState';
-import { HostList } from '../../states/states';
+import type { HostList } from '../../states/states';
 import { EditButton } from '../buttons/EditButton';
 import { HostOptionsForm } from './HostOptionsForm';
 
diff --git a/src/frontend/src/components/forms/StandaloneField.tsx b/src/frontend/src/components/forms/StandaloneField.tsx
index 73f6299ed1d8..f086c1296818 100644
--- a/src/frontend/src/components/forms/StandaloneField.tsx
+++ b/src/frontend/src/components/forms/StandaloneField.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useMemo } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
-import { ApiFormField, ApiFormFieldType } from './fields/ApiFormField';
+import { ApiFormField, type ApiFormFieldType } from './fields/ApiFormField';
 
 export function StandaloneField({
   fieldDefinition,
diff --git a/src/frontend/src/components/forms/fields/ApiFormField.tsx b/src/frontend/src/components/forms/fields/ApiFormField.tsx
index 30a42061aab2..8a4426564b1e 100644
--- a/src/frontend/src/components/forms/fields/ApiFormField.tsx
+++ b/src/frontend/src/components/forms/fields/ApiFormField.tsx
@@ -1,11 +1,11 @@
 import { t } from '@lingui/macro';
 import { Alert, FileInput, NumberInput, Stack, Switch } from '@mantine/core';
-import { UseFormReturnType } from '@mantine/form';
+import type { UseFormReturnType } from '@mantine/form';
 import { useId } from '@mantine/hooks';
-import { ReactNode, useCallback, useEffect, useMemo } from 'react';
-import { Control, FieldValues, useController } from 'react-hook-form';
+import { type ReactNode, useCallback, useEffect, useMemo } from 'react';
+import { type Control, type FieldValues, useController } from 'react-hook-form';
 
-import { ModelType } from '../../../enums/ModelType';
+import type { ModelType } from '../../../enums/ModelType';
 import { isTrue } from '../../../functions/conversion';
 import { ChoiceField } from './ChoiceField';
 import DateField from './DateField';
@@ -167,15 +167,16 @@ export function ApiFormField({
   // Callback helper when form value changes
   const onChange = useCallback(
     (value: any) => {
+      let rtnValue = value;
       // Allow for custom value adjustments (per field)
       if (definition.adjustValue) {
-        value = definition.adjustValue(value);
+        rtnValue = definition.adjustValue(value);
       }
 
-      field.onChange(value);
+      field.onChange(rtnValue);
 
       // Run custom callback for this field
-      definition.onValueChange?.(value);
+      definition.onValueChange?.(rtnValue);
     },
     [fieldName, definition]
   );
@@ -186,18 +187,18 @@ export function ApiFormField({
 
     switch (definition.field_type) {
       case 'integer':
-        val = parseInt(value) ?? '';
+        val = Number.parseInt(value) ?? '';
         break;
       case 'decimal':
       case 'float':
       case 'number':
-        val = parseFloat(value) ?? '';
+        val = Number.parseFloat(value) ?? '';
         break;
       default:
         break;
     }
 
-    if (isNaN(val) || !isFinite(val)) {
+    if (Number.isNaN(val) || !Number.isFinite(val)) {
       val = '';
     }
 
@@ -246,8 +247,8 @@ export function ApiFormField({
             ref={ref}
             id={fieldId}
             aria-label={`boolean-field-${fieldName}`}
-            radius="lg"
-            size="sm"
+            radius='lg'
+            size='sm'
             error={error?.message}
             onChange={(event) => onChange(event.currentTarget.checked)}
           />
@@ -264,7 +265,7 @@ export function ApiFormField({
         return (
           <NumberInput
             {...reducedDefinition}
-            radius="sm"
+            radius='sm'
             ref={field.ref}
             id={fieldId}
             aria-label={`number-field-${field.name}`}
@@ -289,7 +290,7 @@ export function ApiFormField({
             {...reducedDefinition}
             id={fieldId}
             ref={field.ref}
-            radius="sm"
+            radius='sm'
             value={value}
             error={error?.message}
             onChange={(payload: File | null) => onChange(payload)}
@@ -325,7 +326,7 @@ export function ApiFormField({
         );
       default:
         return (
-          <Alert color="red" title={t`Error`}>
+          <Alert color='red' title={t`Error`}>
             Invalid field type for field '{fieldName}': '
             {fieldDefinition.field_type}'
           </Alert>
diff --git a/src/frontend/src/components/forms/fields/ChoiceField.tsx b/src/frontend/src/components/forms/fields/ChoiceField.tsx
index fcf6f219175d..6a574a0ee3e5 100644
--- a/src/frontend/src/components/forms/fields/ChoiceField.tsx
+++ b/src/frontend/src/components/forms/fields/ChoiceField.tsx
@@ -1,9 +1,9 @@
 import { Select } from '@mantine/core';
 import { useId } from '@mantine/hooks';
 import { useCallback, useMemo } from 'react';
-import { FieldValues, UseControllerReturn } from 'react-hook-form';
+import type { FieldValues, UseControllerReturn } from 'react-hook-form';
 
-import { ApiFormFieldType } from './ApiFormField';
+import type { ApiFormFieldType } from './ApiFormField';
 
 /**
  * Render a 'select' field for selecting from a list of choices
@@ -28,7 +28,7 @@ export function ChoiceField({
 
   // Build a set of choices for the field
   const choices: any[] = useMemo(() => {
-    let choices = definition.choices ?? [];
+    const choices = definition.choices ?? [];
 
     // TODO: Allow provision of custom render function also
 
@@ -64,7 +64,7 @@ export function ChoiceField({
       id={fieldId}
       aria-label={`choice-field-${field.name}`}
       error={error?.message}
-      radius="sm"
+      radius='sm'
       {...field}
       onChange={onChange}
       data={choices}
diff --git a/src/frontend/src/components/forms/fields/DateField.tsx b/src/frontend/src/components/forms/fields/DateField.tsx
index d80fbaf4d4a7..a0aaee289e03 100644
--- a/src/frontend/src/components/forms/fields/DateField.tsx
+++ b/src/frontend/src/components/forms/fields/DateField.tsx
@@ -2,9 +2,9 @@ import { DateInput } from '@mantine/dates';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { useCallback, useId, useMemo } from 'react';
-import { FieldValues, UseControllerReturn } from 'react-hook-form';
+import type { FieldValues, UseControllerReturn } from 'react-hook-form';
 
-import { ApiFormFieldType } from './ApiFormField';
+import type { ApiFormFieldType } from './ApiFormField';
 
 dayjs.extend(customParseFormat);
 
@@ -47,7 +47,7 @@ export default function DateField({
     }
 
     // Ensure that the date is valid
-    if (dv instanceof Date && !isNaN(dv.getTime())) {
+    if (dv instanceof Date && !Number.isNaN(dv.getTime())) {
       return dv;
     } else {
       return null;
@@ -58,7 +58,7 @@ export default function DateField({
     <DateInput
       id={fieldId}
       aria-label={`date-field-${field.name}`}
-      radius="sm"
+      radius='sm'
       ref={field.ref}
       type={undefined}
       error={error?.message}
diff --git a/src/frontend/src/components/forms/fields/DependentField.tsx b/src/frontend/src/components/forms/fields/DependentField.tsx
index 0b44ba7ccdff..c8670300ae0d 100644
--- a/src/frontend/src/components/forms/fields/DependentField.tsx
+++ b/src/frontend/src/components/forms/fields/DependentField.tsx
@@ -1,5 +1,9 @@
 import { useEffect, useMemo } from 'react';
-import { Control, FieldValues, useFormContext } from 'react-hook-form';
+import {
+  type Control,
+  type FieldValues,
+  useFormContext
+} from 'react-hook-form';
 
 import { api } from '../../../App';
 import {
@@ -8,8 +12,8 @@ import {
 } from '../../../functions/forms';
 import {
   ApiFormField,
-  ApiFormFieldSet,
-  ApiFormFieldType
+  type ApiFormFieldSet,
+  type ApiFormFieldType
 } from './ApiFormField';
 
 export function DependentField({
diff --git a/src/frontend/src/components/forms/fields/IconField.tsx b/src/frontend/src/components/forms/fields/IconField.tsx
index 4d63132094b6..1d420e81618f 100644
--- a/src/frontend/src/components/forms/fields/IconField.tsx
+++ b/src/frontend/src/components/forms/fields/IconField.tsx
@@ -3,7 +3,7 @@ import {
   Box,
   CloseButton,
   Combobox,
-  ComboboxStore,
+  type ComboboxStore,
   Group,
   Input,
   InputBase,
@@ -17,12 +17,12 @@ import { useDebouncedValue, useElementSize } from '@mantine/hooks';
 import { IconX } from '@tabler/icons-react';
 import Fuse from 'fuse.js';
 import { startTransition, useEffect, useMemo, useRef, useState } from 'react';
-import { FieldValues, UseControllerReturn } from 'react-hook-form';
+import type { FieldValues, UseControllerReturn } from 'react-hook-form';
 import { FixedSizeGrid as Grid } from 'react-window';
 
 import { useIconState } from '../../../states/IconState';
 import { ApiIcon } from '../../items/ApiIcon';
-import { ApiFormFieldType } from './ApiFormField';
+import type { ApiFormFieldType } from './ApiFormField';
 
 export default function IconField({
   controller,
@@ -52,13 +52,13 @@ export default function IconField({
           required={definition.required}
           error={error?.message}
           ref={field.ref}
-          component="button"
-          type="button"
+          component='button'
+          type='button'
           pointer
           rightSection={
             value !== null && !definition.required ? (
               <CloseButton
-                size="sm"
+                size='sm'
                 onMouseDown={(e) => e.preventDefault()}
                 onClick={() => field.onChange(null)}
               />
@@ -70,9 +70,9 @@ export default function IconField({
           rightSectionPointerEvents={value === null ? 'none' : 'all'}
         >
           {field.value ? (
-            <Group gap="xs">
+            <Group gap='xs'>
               <ApiIcon name={field.value} />
-              <Text size="sm" c="dimmed">
+              <Text size='sm' c='dimmed'>
                 {field.value}
               </Text>
             </Group>
@@ -209,7 +209,7 @@ function ComboboxDropdown({
           placeholder={t`Search...`}
           rightSection={
             searchValue && !definition.required ? (
-              <IconX size="1rem" onClick={() => setSearchValue('')} />
+              <IconX size='1rem' onClick={() => setSearchValue('')} />
             ) : null
           }
           flex={1}
@@ -233,7 +233,7 @@ function ComboboxDropdown({
         />
       </Group>
 
-      <Text size="sm" c="dimmed" ta="center" mt={-4}>
+      <Text size='sm' c='dimmed' ta='center' mt={-4}>
         <Trans>{filteredIcons.length} icons</Trans>
       </Text>
 
diff --git a/src/frontend/src/components/forms/fields/NestedObjectField.tsx b/src/frontend/src/components/forms/fields/NestedObjectField.tsx
index bbecd056aaa1..fa60893c7265 100644
--- a/src/frontend/src/components/forms/fields/NestedObjectField.tsx
+++ b/src/frontend/src/components/forms/fields/NestedObjectField.tsx
@@ -1,10 +1,10 @@
 import { Accordion, Divider, Stack, Text } from '@mantine/core';
-import { Control, FieldValues } from 'react-hook-form';
+import type { Control, FieldValues } from 'react-hook-form';
 
 import {
   ApiFormField,
-  ApiFormFieldSet,
-  ApiFormFieldType
+  type ApiFormFieldSet,
+  type ApiFormFieldType
 } from './ApiFormField';
 
 export function NestedObjectField({
@@ -21,14 +21,14 @@ export function NestedObjectField({
   setFields?: React.Dispatch<React.SetStateAction<ApiFormFieldSet>>;
 }>) {
   return (
-    <Accordion defaultValue={'OpenByDefault'} variant="contained">
+    <Accordion defaultValue={'OpenByDefault'} variant='contained'>
       <Accordion.Item value={'OpenByDefault'}>
         <Accordion.Control icon={definition.icon}>
           <Text>{definition.label}</Text>
         </Accordion.Control>
         <Accordion.Panel>
           <Divider style={{ marginTop: '-10px', marginBottom: '10px' }} />
-          <Stack gap="xs">
+          <Stack gap='xs'>
             {Object.entries(definition.children ?? {}).map(
               ([childFieldName, field]) => (
                 <ApiFormField
diff --git a/src/frontend/src/components/forms/fields/RelatedModelField.tsx b/src/frontend/src/components/forms/fields/RelatedModelField.tsx
index 3886c943d40e..6e6e50923991 100644
--- a/src/frontend/src/components/forms/fields/RelatedModelField.tsx
+++ b/src/frontend/src/components/forms/fields/RelatedModelField.tsx
@@ -9,8 +9,8 @@ import { useDebouncedValue, useId } from '@mantine/hooks';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
-  FieldValues,
-  UseControllerReturn,
+  type FieldValues,
+  type UseControllerReturn,
   useFormContext
 } from 'react-hook-form';
 import Select from 'react-select';
@@ -18,7 +18,7 @@ import Select from 'react-select';
 import { api } from '../../../App';
 import { vars } from '../../../theme';
 import { RenderInstance } from '../../render/Instance';
-import { ApiFormFieldType } from './ApiFormField';
+import type { ApiFormFieldType } from './ApiFormField';
 
 /**
  * Render a 'select' field for searching the database against a particular model type
@@ -71,8 +71,8 @@ export function RelatedModelField({
       }
 
       api.get(url).then((response) => {
-        let pk_field = definition.pk_field ?? 'pk';
-        if (response.data && response.data[pk_field]) {
+        const pk_field = definition.pk_field ?? 'pk';
+        if (response.data?.[pk_field]) {
           const value = {
             value: response.data[pk_field],
             data: response.data
@@ -138,7 +138,7 @@ export function RelatedModelField({
         setFilters(_filters);
       }
 
-      let params = {
+      const params = {
         ..._filters,
         search: searchText,
         offset: offset,
@@ -158,8 +158,8 @@ export function RelatedModelField({
           const results = response.data?.results ?? response.data ?? [];
 
           results.forEach((item: any) => {
-            let pk_field = definition.pk_field ?? 'pk';
-            let pk = item[pk_field];
+            const pk_field = definition.pk_field ?? 'pk';
+            const pk = item[pk_field];
 
             if (pk && !alreadyPresentPks.includes(pk)) {
               values.push({
@@ -201,7 +201,7 @@ export function RelatedModelField({
   // Update form values when the selected value changes
   const onChange = useCallback(
     (value: any) => {
-      let _pk = value?.value ?? null;
+      const _pk = value?.value ?? null;
       field.onChange(_pk);
 
       setPk(_pk);
@@ -230,7 +230,7 @@ export function RelatedModelField({
       return null;
     }
 
-    let _data = [...data, initialData];
+    const _data = [...data, initialData];
     return _data.find((item) => item.value === pk);
   }, [pk, data]);
 
@@ -316,11 +316,11 @@ export function RelatedModelField({
         isClearable={!definition.required}
         isDisabled={definition.disabled}
         isSearchable={true}
-        placeholder={definition.placeholder || t`Search` + `...`}
-        loadingMessage={() => t`Loading` + `...`}
+        placeholder={definition.placeholder || `${t`Search`}...`}
+        loadingMessage={() => `${t`Loading`}...`}
         menuPortalTarget={document.body}
         noOptionsMessage={() => t`No results found`}
-        menuPosition="fixed"
+        menuPosition='fixed'
         styles={{ menuPortal: (base: any) => ({ ...base, zIndex: 9999 }) }}
         formatOptionLabel={(option: any) => formatOption(option)}
         theme={(theme) => {
diff --git a/src/frontend/src/components/forms/fields/TableField.tsx b/src/frontend/src/components/forms/fields/TableField.tsx
index bb0da08540b1..ad53f9bf4903 100644
--- a/src/frontend/src/components/forms/fields/TableField.tsx
+++ b/src/frontend/src/components/forms/fields/TableField.tsx
@@ -1,13 +1,13 @@
 import { Trans, t } from '@lingui/macro';
 import { Alert, Container, Group, Stack, Table, Text } from '@mantine/core';
 import { IconExclamationCircle } from '@tabler/icons-react';
-import { ReactNode, useCallback, useEffect, useMemo } from 'react';
-import { FieldValues, UseControllerReturn } from 'react-hook-form';
+import { type ReactNode, useCallback, useEffect, useMemo } from 'react';
+import type { FieldValues, UseControllerReturn } from 'react-hook-form';
 
 import { identifierString } from '../../../functions/conversion';
 import { InvenTreeIcon } from '../../../functions/icons';
 import { StandaloneField } from '../StandaloneField';
-import { ApiFormFieldType } from './ApiFormField';
+import type { ApiFormFieldType } from './ApiFormField';
 
 export interface TableFieldRowProps {
   item: any;
@@ -38,10 +38,10 @@ function TableFieldRow({
   // Table fields require render function
   if (!definition.modelRenderer) {
     return (
-      <Table.Tr key="table-row-no-renderer">
+      <Table.Tr key='table-row-no-renderer'>
         <Table.Td colSpan={definition.headers?.length}>
-          <Alert color="red" title={t`Error`} icon={<IconExclamationCircle />}>
-            {`modelRenderer entry required for tables`}
+          <Alert color='red' title={t`Error`} icon={<IconExclamationCircle />}>
+            {t`modelRenderer entry required for tables`}
           </Alert>
         </Table.Td>
       </Table.Tr>
@@ -67,13 +67,13 @@ export function TableFieldErrorWrapper({
   errorKey: string;
   children: ReactNode;
 }) {
-  const msg = props?.rowErrors && props.rowErrors[errorKey];
+  const msg = props?.rowErrors?.[errorKey];
 
   return (
-    <Stack gap="xs">
+    <Stack gap='xs'>
       {children}
       {msg && (
-        <Text size="xs" c="red">
+        <Text size='xs' c='red'>
           {msg.message}
         </Text>
       )}
@@ -151,7 +151,7 @@ export function TableField({
             );
           })
         ) : (
-          <Table.Tr key="table-row-no-entries">
+          <Table.Tr key='table-row-no-entries'>
             <Table.Td
               style={{ textAlign: 'center' }}
               colSpan={definition.headers?.length}
@@ -163,7 +163,7 @@ export function TableField({
                   gap: '5px'
                 }}
               >
-                <InvenTreeIcon icon="info" />
+                <InvenTreeIcon icon='info' />
                 <Trans>No entries available</Trans>
               </span>
             </Table.Td>
@@ -215,9 +215,9 @@ export function TableFieldExtraRow({
     visible && (
       <Table.Tr>
         <Table.Td colSpan={10}>
-          <Group grow preventGrowOverflow={false} justify="flex-apart" p="xs">
-            <Container flex={0} p="xs">
-              <InvenTreeIcon icon="downright" />
+          <Group grow preventGrowOverflow={false} justify='flex-apart' p='xs'>
+            <Container flex={0} p='xs'>
+              <InvenTreeIcon icon='downright' />
             </Container>
             <StandaloneField
               fieldDefinition={field}
diff --git a/src/frontend/src/components/forms/fields/TextField.tsx b/src/frontend/src/components/forms/fields/TextField.tsx
index a3fe160c0969..9ebaa796ffc0 100644
--- a/src/frontend/src/components/forms/fields/TextField.tsx
+++ b/src/frontend/src/components/forms/fields/TextField.tsx
@@ -2,7 +2,7 @@ import { TextInput } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
 import { IconX } from '@tabler/icons-react';
 import { useCallback, useEffect, useId, useState } from 'react';
-import { FieldValues, UseControllerReturn } from 'react-hook-form';
+import type { FieldValues, UseControllerReturn } from 'react-hook-form';
 
 /*
  * Custom implementation of the mantine <TextInput> component,
@@ -57,7 +57,7 @@ export default function TextField({
       type={definition.field_type}
       value={rawText || ''}
       error={error?.message}
-      radius="sm"
+      radius='sm'
       onChange={(event) => onTextChange(event.currentTarget.value)}
       onBlur={(event) => {
         if (event.currentTarget.value != value) {
@@ -67,7 +67,7 @@ export default function TextField({
       onKeyDown={(event) => onKeyDown(event.code)}
       rightSection={
         value && !definition.required ? (
-          <IconX size="1rem" color="red" onClick={() => onTextChange('')} />
+          <IconX size='1rem' color='red' onClick={() => onTextChange('')} />
         ) : null
       }
     />
diff --git a/src/frontend/src/components/images/ApiImage.tsx b/src/frontend/src/components/images/ApiImage.tsx
index 9f0634cea172..18952360d2fc 100644
--- a/src/frontend/src/components/images/ApiImage.tsx
+++ b/src/frontend/src/components/images/ApiImage.tsx
@@ -3,7 +3,7 @@
  *
  * Image caching is handled automagically by the browsers cache
  */
-import { Image, ImageProps, Skeleton, Stack } from '@mantine/core';
+import { Image, type ImageProps, Skeleton, Stack } from '@mantine/core';
 import { useMemo } from 'react';
 
 import { useLocalState } from '../../states/LocalState';
@@ -25,7 +25,7 @@ export function ApiImage(props: Readonly<ApiImageProps>) {
   return (
     <Stack>
       {imageUrl ? (
-        <Image {...props} src={imageUrl} fit="contain" />
+        <Image {...props} src={imageUrl} fit='contain' />
       ) : (
         <Skeleton h={props?.h ?? props.w} w={props?.w ?? props.h} />
       )}
diff --git a/src/frontend/src/components/images/Thumbnail.tsx b/src/frontend/src/components/images/Thumbnail.tsx
index 148fcc09f97b..20225fae9dc2 100644
--- a/src/frontend/src/components/images/Thumbnail.tsx
+++ b/src/frontend/src/components/images/Thumbnail.tsx
@@ -1,6 +1,6 @@
 import { t } from '@lingui/macro';
 import { Anchor, Group } from '@mantine/core';
-import { ReactNode, useMemo } from 'react';
+import { type ReactNode, useMemo } from 'react';
 
 import { ApiImage } from './ApiImage';
 
@@ -27,7 +27,7 @@ export function Thumbnail({
   const inner = useMemo(() => {
     if (link) {
       return (
-        <Anchor href={link} target="_blank">
+        <Anchor href={link} target='_blank'>
           {text}
         </Anchor>
       );
@@ -37,13 +37,13 @@ export function Thumbnail({
   }, [link, text]);
 
   return (
-    <Group align={align ?? 'left'} gap="xs" wrap="nowrap">
+    <Group align={align ?? 'left'} gap='xs' wrap='nowrap'>
       <ApiImage
         src={src || backup_image}
         aria-label={alt}
         w={size}
-        fit="contain"
-        radius="xs"
+        fit='contain'
+        radius='xs'
         style={{ maxHeight: size }}
       />
       {inner}
diff --git a/src/frontend/src/components/importer/ImportDataSelector.tsx b/src/frontend/src/components/importer/ImportDataSelector.tsx
index 072122dc31ec..531d60f16a06 100644
--- a/src/frontend/src/components/importer/ImportDataSelector.tsx
+++ b/src/frontend/src/components/importer/ImportDataSelector.tsx
@@ -7,7 +7,7 @@ import {
   IconCircleDashedCheck,
   IconExclamationCircle
 } from '@tabler/icons-react';
-import { ReactNode, useCallback, useMemo, useState } from 'react';
+import { type ReactNode, useCallback, useMemo, useState } from 'react';
 
 import { api } from '../../App';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
@@ -16,20 +16,20 @@ import {
   useDeleteApiFormModal,
   useEditApiFormModal
 } from '../../hooks/UseForm';
-import { ImportSessionState } from '../../hooks/UseImportSession';
+import type { ImportSessionState } from '../../hooks/UseImportSession';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
-import { TableColumn } from '../../tables/Column';
-import { TableFilter } from '../../tables/Filter';
+import type { TableColumn } from '../../tables/Column';
+import type { TableFilter } from '../../tables/Filter';
 import { InvenTreeTable } from '../../tables/InvenTreeTable';
 import {
-  RowAction,
+  type RowAction,
   RowDeleteAction,
   RowEditAction
 } from '../../tables/RowActions';
 import { ActionButton } from '../buttons/ActionButton';
 import { YesNoButton } from '../buttons/YesNoButton';
-import { ApiFormFieldSet } from '../forms/fields/ApiFormField';
+import type { ApiFormFieldSet } from '../forms/fields/ApiFormField';
 import { ProgressBar } from '../items/ProgressBar';
 import { RenderRemoteInstance } from '../render/Instance';
 
@@ -63,7 +63,7 @@ function ImporterDataCell({
   }, [row.errors, column.field]);
 
   const cellValue: ReactNode = useMemo(() => {
-    let field_def = session.availableFields[column.field];
+    const field_def = session.availableFields[column.field];
 
     if (!row?.data) {
       return '-';
@@ -88,7 +88,7 @@ function ImporterDataCell({
         break;
     }
 
-    let value = row.data ? row.data[column.field] ?? '' : '';
+    let value = row.data ? (row.data[column.field] ?? '') : '';
 
     if (!value) {
       value = '-';
@@ -105,18 +105,18 @@ function ImporterDataCell({
   return (
     <HoverCard disabled={cellValid} openDelay={100} closeDelay={100}>
       <HoverCard.Target>
-        <Group grow justify="apart" onClick={onRowEdit}>
+        <Group grow justify='apart' onClick={onRowEdit}>
           <Group grow style={{ flex: 1 }}>
-            <Text size="xs" c={cellValid ? undefined : 'red'}>
+            <Text size='xs' c={cellValid ? undefined : 'red'}>
               {cellValue}
             </Text>
           </Group>
         </Group>
       </HoverCard.Target>
       <HoverCard.Dropdown>
-        <Stack gap="xs">
+        <Stack gap='xs'>
           {cellErrors.map((error: string) => (
-            <Text size="xs" c="red" key={error}>
+            <Text size='xs' c='red' key={error}>
               {error}
             </Text>
           ))}
@@ -136,11 +136,11 @@ export default function ImporterDataSelector({
   const [selectedFieldNames, setSelectedFieldNames] = useState<string[]>([]);
 
   const selectedFields: ApiFormFieldSet = useMemo(() => {
-    let fields: ApiFormFieldSet = {};
+    const fields: ApiFormFieldSet = {};
 
-    for (let field of selectedFieldNames) {
+    for (const field of selectedFieldNames) {
       // Find the field definition in session.availableFields
-      let fieldDef = session.availableFields[field];
+      const fieldDef = session.availableFields[field];
       if (fieldDef) {
         // Construct field filters based on session field filters
         let filters = fieldDef.filters ?? {};
@@ -243,7 +243,7 @@ export default function ImporterDataSelector({
       return [];
     }
 
-    let errors: string[] = [];
+    const errors: string[] = [];
 
     for (const k of Object.keys(row.errors)) {
       if (row.errors[k]) {
@@ -261,7 +261,7 @@ export default function ImporterDataSelector({
   }, []);
 
   const columns: TableColumn[] = useMemo(() => {
-    let columns: TableColumn[] = [
+    const columns: TableColumn[] = [
       {
         accessor: 'row_index',
         title: t`Row`,
@@ -269,22 +269,22 @@ export default function ImporterDataSelector({
         switchable: false,
         render: (row: any) => {
           return (
-            <Group justify="left" gap="xs">
-              <Text size="sm">{row.row_index}</Text>
-              {row.complete && <IconCircleCheck color="green" size={16} />}
+            <Group justify='left' gap='xs'>
+              <Text size='sm'>{row.row_index}</Text>
+              {row.complete && <IconCircleCheck color='green' size={16} />}
               {!row.complete && row.valid && (
-                <IconCircleDashedCheck color="blue" size={16} />
+                <IconCircleDashedCheck color='blue' size={16} />
               )}
               {!row.complete && !row.valid && (
                 <HoverCard openDelay={50} closeDelay={100}>
                   <HoverCard.Target>
-                    <IconExclamationCircle color="red" size={16} />
+                    <IconExclamationCircle color='red' size={16} />
                   </HoverCard.Target>
                   <HoverCard.Dropdown>
-                    <Stack gap="xs">
+                    <Stack gap='xs'>
                       <Text>{t`Row contains errors`}:</Text>
                       {rowErrors(row).map((error: string) => (
-                        <Text size="sm" c="red" key={error}>
+                        <Text size='sm' c='red' key={error}>
                           {error}
                         </Text>
                       ))}
@@ -377,10 +377,10 @@ export default function ImporterDataSelector({
 
     return [
       <ActionButton
-        key="import-selected-rows"
+        key='import-selected-rows'
         disabled={!canImport}
         icon={<IconArrowRight />}
-        color="green"
+        color='green'
         tooltip={t`Import selected rows`}
         onClick={() => {
           importData(table.selectedRecords.map((row: any) => row.pk));
@@ -393,10 +393,10 @@ export default function ImporterDataSelector({
     <>
       {editRow.modal}
       {deleteRow.modal}
-      <Stack gap="xs">
-        <Paper shadow="xs" p="xs">
-          <Group grow justify="apart">
-            <Text size="lg">{t`Processing Data`}</Text>
+      <Stack gap='xs'>
+        <Paper shadow='xs' p='xs'>
+          <Group grow justify='apart'>
+            <Text size='lg'>{t`Processing Data`}</Text>
             <Space />
             <ProgressBar
               maximum={session.rowCount}
diff --git a/src/frontend/src/components/importer/ImporterColumnSelector.tsx b/src/frontend/src/components/importer/ImporterColumnSelector.tsx
index 1e903009f064..b640f3809b6a 100644
--- a/src/frontend/src/components/importer/ImporterColumnSelector.tsx
+++ b/src/frontend/src/components/importer/ImporterColumnSelector.tsx
@@ -15,10 +15,10 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { api } from '../../App';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
-import { ImportSessionState } from '../../hooks/UseImportSession';
+import type { ImportSessionState } from '../../hooks/UseImportSession';
 import { apiUrl } from '../../states/ApiState';
 import { StandaloneField } from '../forms/StandaloneField';
-import { ApiFormFieldType } from '../forms/fields/ApiFormField';
+import type { ApiFormFieldType } from '../forms/fields/ApiFormField';
 
 function ImporterColumn({
   column,
@@ -81,7 +81,7 @@ function ImporterDefaultField({
   const onChange = useCallback(
     (value: any) => {
       // Update the default value for the field
-      let defaults = {
+      const defaults = {
         ...session.fieldDefaults,
         [fieldName]: value
       };
@@ -133,19 +133,19 @@ function ImporterColumnTableRow({
   return (
     <Table.Tr key={column.label ?? column.field}>
       <Table.Td>
-        <Group gap="xs">
+        <Group gap='xs'>
           <Text fw={column.required ? 700 : undefined}>
             {column.label ?? column.field}
           </Text>
           {column.required && (
-            <Text c="red" fw={700}>
+            <Text c='red' fw={700}>
               *
             </Text>
           )}
         </Group>
       </Table.Td>
       <Table.Td>
-        <Text size="sm">{column.description}</Text>
+        <Text size='sm'>{column.description}</Text>
       </Table.Td>
       <Table.Td>
         <ImporterColumn column={column} options={options} />
@@ -193,12 +193,12 @@ export default function ImporterColumnSelector({
   }, [session.availableColumns]);
 
   return (
-    <Stack gap="xs">
-      <Paper shadow="xs" p="xs">
-        <Group grow justify="apart">
-          <Text size="lg">{t`Mapping data columns to database fields`}</Text>
+    <Stack gap='xs'>
+      <Paper shadow='xs' p='xs'>
+        <Group grow justify='apart'>
+          <Text size='lg'>{t`Mapping data columns to database fields`}</Text>
           <Space />
-          <Button color="green" variant="filled" onClick={acceptMapping}>
+          <Button color='green' variant='filled' onClick={acceptMapping}>
             <Group>
               <IconCheck />
               {t`Accept Column Mapping`}
@@ -207,7 +207,7 @@ export default function ImporterColumnSelector({
         </Group>
       </Paper>
       {errorMessage && (
-        <Alert color="red" title={t`Error`}>
+        <Alert color='red' title={t`Error`}>
           <Text>{errorMessage}</Text>
         </Alert>
       )}
diff --git a/src/frontend/src/components/importer/ImporterDrawer.tsx b/src/frontend/src/components/importer/ImporterDrawer.tsx
index f66b93c7b90c..f68719160581 100644
--- a/src/frontend/src/components/importer/ImporterDrawer.tsx
+++ b/src/frontend/src/components/importer/ImporterDrawer.tsx
@@ -14,7 +14,7 @@ import {
   Text
 } from '@mantine/core';
 import { IconCheck } from '@tabler/icons-react';
-import { ReactNode, useMemo } from 'react';
+import { type ReactNode, useMemo } from 'react';
 
 import { ModelType } from '../../enums/ModelType';
 import { useImportSession } from '../../hooks/UseImportSession';
@@ -41,7 +41,7 @@ function ImportDrawerStepper({
       onStepClick={undefined}
       allowNextStepsSelect={false}
       iconSize={20}
-      size="xs"
+      size='xs'
     >
       <Stepper.Step label={t`Upload File`} />
       <Stepper.Step label={t`Map Columns`} />
@@ -100,24 +100,24 @@ export default function ImporterDrawer({
         return <ImporterDataSelector session={session} />;
       case importSessionStatus.COMPLETE:
         return (
-          <Stack gap="xs">
+          <Stack gap='xs'>
             <Alert
-              color="green"
+              color='green'
               title={t`Import Complete`}
               icon={<IconCheck />}
             >
               {t`Data has been imported successfully`}
             </Alert>
-            <Button color="blue" onClick={onClose}>{t`Close`}</Button>
+            <Button color='blue' onClick={onClose}>{t`Close`}</Button>
           </Stack>
         );
       default:
         return (
-          <Stack gap="xs">
-            <Alert color="red" title={t`Unknown Status`} icon={<IconCheck />}>
+          <Stack gap='xs'>
+            <Alert color='red' title={t`Unknown Status`} icon={<IconCheck />}>
               {t`Import session has unknown status`}: {session.status}
             </Alert>
-            <Button color="red" onClick={onClose}>{t`Close`}</Button>
+            <Button color='red' onClick={onClose}>{t`Close`}</Button>
           </Stack>
         );
     }
@@ -125,15 +125,15 @@ export default function ImporterDrawer({
 
   const title: ReactNode = useMemo(() => {
     return (
-      <Stack gap="xs" style={{ width: '100%' }}>
+      <Stack gap='xs' style={{ width: '100%' }}>
         <Group
-          gap="xs"
-          wrap="nowrap"
-          justify="space-apart"
+          gap='xs'
+          wrap='nowrap'
+          justify='space-apart'
           grow
           preventGrowOverflow={false}
         >
-          <StylishText size="lg">
+          <StylishText size='lg'>
             {session.sessionData?.statusText ?? t`Importing Data`}
           </StylishText>
           <ImportDrawerStepper currentStep={currentStep} />
@@ -146,8 +146,8 @@ export default function ImporterDrawer({
 
   return (
     <Drawer
-      position="bottom"
-      size="80%"
+      position='bottom'
+      size='80%'
       title={title}
       opened={opened}
       onClose={onClose}
@@ -163,9 +163,9 @@ export default function ImporterDrawer({
         }
       }}
     >
-      <Stack gap="xs">
+      <Stack gap='xs'>
         <LoadingOverlay visible={session.sessionQuery.isFetching} />
-        <Paper p="md">{session.sessionQuery.isFetching || widget}</Paper>
+        <Paper p='md'>{session.sessionQuery.isFetching || widget}</Paper>
       </Stack>
     </Drawer>
   );
diff --git a/src/frontend/src/components/importer/ImporterImportProgress.tsx b/src/frontend/src/components/importer/ImporterImportProgress.tsx
index c4d9400162f6..5990d8bcbafa 100644
--- a/src/frontend/src/components/importer/ImporterImportProgress.tsx
+++ b/src/frontend/src/components/importer/ImporterImportProgress.tsx
@@ -4,7 +4,7 @@ import { useInterval } from '@mantine/hooks';
 import { useEffect } from 'react';
 
 import { ModelType } from '../../enums/ModelType';
-import { ImportSessionState } from '../../hooks/UseImportSession';
+import type { ImportSessionState } from '../../hooks/UseImportSession';
 import useStatusCodes from '../../hooks/UseStatusCodes';
 import { StylishText } from '../items/StylishText';
 
@@ -32,10 +32,10 @@ export default function ImporterImportProgress({
   return (
     <Center>
       <Container>
-        <Stack gap="xs">
-          <StylishText size="lg">{t`Importing Records`}</StylishText>
+        <Stack gap='xs'>
+          <StylishText size='lg'>{t`Importing Records`}</StylishText>
           <Loader />
-          <Text size="lg">
+          <Text size='lg'>
             {t`Imported Rows`}: {session.sessionData.row_count}
           </Text>
         </Stack>
diff --git a/src/frontend/src/components/items/ActionDropdown.tsx b/src/frontend/src/components/items/ActionDropdown.tsx
index 9ead93213b38..81dad21e065d 100644
--- a/src/frontend/src/components/items/ActionDropdown.tsx
+++ b/src/frontend/src/components/items/ActionDropdown.tsx
@@ -2,7 +2,7 @@ import { t } from '@lingui/macro';
 import {
   Button,
   Indicator,
-  IndicatorProps,
+  type IndicatorProps,
   Menu,
   Tooltip
 } from '@mantine/core';
@@ -17,9 +17,9 @@ import {
   IconTrash,
   IconUnlink
 } from '@tabler/icons-react';
-import { ReactNode, useMemo } from 'react';
+import { type ReactNode, useMemo } from 'react';
 
-import { ModelType } from '../../enums/ModelType';
+import type { ModelType } from '../../enums/ModelType';
 import { identifierString } from '../../functions/conversion';
 import { InvenTreeIcon } from '../../functions/icons';
 import { InvenTreeQRCode, QRCodeLink, QRCodeUnlink } from './QRCode';
@@ -67,17 +67,17 @@ export function ActionDropdown({
   }, [tooltip]);
 
   return !hidden && hasActions ? (
-    <Menu position="bottom-end" key={menuName}>
+    <Menu position='bottom-end' key={menuName}>
       <Indicator disabled={!indicatorProps} {...indicatorProps?.indicator}>
         <Menu.Target>
-          <Tooltip label={tooltip} hidden={!tooltip} position="bottom">
+          <Tooltip label={tooltip} hidden={!tooltip} position='bottom'>
             <Button
-              radius="sm"
+              radius='sm'
               variant={noindicator ? 'transparent' : 'light'}
               disabled={disabled}
               aria-label={menuName}
-              p="0"
-              size="sm"
+              p='0'
+              size='sm'
               rightSection={
                 noindicator ? null : <IconChevronDown stroke={1.5} />
               }
@@ -102,7 +102,7 @@ export function ActionDropdown({
               <Tooltip
                 label={action.tooltip}
                 hidden={!action.tooltip}
-                position="left"
+                position='left'
               >
                 <Menu.Item
                   aria-label={id}
@@ -232,7 +232,7 @@ function GeneralBarcodeAction({
 export function EditItemAction(props: ActionDropdownItem): ActionDropdownItem {
   return {
     ...props,
-    icon: <IconEdit color="blue" />,
+    icon: <IconEdit color='blue' />,
     name: t`Edit`,
     tooltip: props.tooltip ?? t`Edit item`
   };
@@ -244,7 +244,7 @@ export function DeleteItemAction(
 ): ActionDropdownItem {
   return {
     ...props,
-    icon: <IconTrash color="red" />,
+    icon: <IconTrash color='red' />,
     name: t`Delete`,
     tooltip: props.tooltip ?? t`Delete item`
   };
@@ -253,7 +253,7 @@ export function DeleteItemAction(
 export function HoldItemAction(props: ActionDropdownItem): ActionDropdownItem {
   return {
     ...props,
-    icon: <InvenTreeIcon icon="hold" iconProps={{ color: 'orange' }} />,
+    icon: <InvenTreeIcon icon='hold' iconProps={{ color: 'orange' }} />,
     name: t`Hold`,
     tooltip: props.tooltip ?? t`Hold`
   };
@@ -264,7 +264,7 @@ export function CancelItemAction(
 ): ActionDropdownItem {
   return {
     ...props,
-    icon: <InvenTreeIcon icon="cancel" iconProps={{ color: 'red' }} />,
+    icon: <InvenTreeIcon icon='cancel' iconProps={{ color: 'red' }} />,
     name: t`Cancel`,
     tooltip: props.tooltip ?? t`Cancel`
   };
@@ -276,7 +276,7 @@ export function DuplicateItemAction(
 ): ActionDropdownItem {
   return {
     ...props,
-    icon: <IconCopy color="green" />,
+    icon: <IconCopy color='green' />,
     name: t`Duplicate`,
     tooltip: props.tooltip ?? t`Duplicate item`
   };
diff --git a/src/frontend/src/components/items/ApiIcon.tsx b/src/frontend/src/components/items/ApiIcon.tsx
index a41dd0eae018..d820099919f2 100644
--- a/src/frontend/src/components/items/ApiIcon.tsx
+++ b/src/frontend/src/components/items/ApiIcon.tsx
@@ -9,9 +9,9 @@ type ApiIconProps = {
 export const ApiIcon = ({ name: _name, size = 22 }: ApiIconProps) => {
   const [iconPackage, name, variant] = _name.split(':');
   const icon = useIconState(
-    (s) => s.packagesMap[iconPackage]?.['icons'][name]?.['variants'][variant]
+    (s) => s.packagesMap[iconPackage]?.icons[name]?.variants[variant]
   );
-  const unicode = icon ? String.fromCodePoint(parseInt(icon, 16)) : '';
+  const unicode = icon ? String.fromCodePoint(Number.parseInt(icon, 16)) : '';
 
   return (
     <i
diff --git a/src/frontend/src/components/items/AttachmentLink.tsx b/src/frontend/src/components/items/AttachmentLink.tsx
index b76e610b75ad..8e03c458eb6d 100644
--- a/src/frontend/src/components/items/AttachmentLink.tsx
+++ b/src/frontend/src/components/items/AttachmentLink.tsx
@@ -9,7 +9,7 @@ import {
   IconLink,
   IconPhoto
 } from '@tabler/icons-react';
-import { ReactNode, useMemo } from 'react';
+import { type ReactNode, useMemo } from 'react';
 
 import { useLocalState } from '../../states/LocalState';
 
@@ -18,7 +18,7 @@ import { useLocalState } from '../../states/LocalState';
  */
 export function attachmentIcon(attachment: string): ReactNode {
   const sz = 18;
-  let suffix = attachment.split('.').pop()?.toLowerCase() ?? '';
+  const suffix = attachment.split('.').pop()?.toLowerCase() ?? '';
   switch (suffix) {
     case 'pdf':
       return <IconFileTypePdf size={sz} />;
@@ -59,7 +59,7 @@ export function AttachmentLink({
   attachment: string;
   external?: boolean;
 }>): ReactNode {
-  let text = external ? attachment : attachment.split('/').pop();
+  const text = external ? attachment : attachment.split('/').pop();
 
   const host = useLocalState((s) => s.host);
 
@@ -72,9 +72,9 @@ export function AttachmentLink({
   }, [host, attachment, external]);
 
   return (
-    <Group justify="left" gap="sm" wrap="nowrap">
+    <Group justify='left' gap='sm' wrap='nowrap'>
       {external ? <IconLink /> : attachmentIcon(attachment)}
-      <Anchor href={url} target="_blank" rel="noopener noreferrer">
+      <Anchor href={url} target='_blank' rel='noopener noreferrer'>
         {text}
       </Anchor>
     </Group>
diff --git a/src/frontend/src/components/items/BarcodeInput.tsx b/src/frontend/src/components/items/BarcodeInput.tsx
index 2ae2200cf317..eeaaca365023 100644
--- a/src/frontend/src/components/items/BarcodeInput.tsx
+++ b/src/frontend/src/components/items/BarcodeInput.tsx
@@ -1,7 +1,8 @@
 import { t } from '@lingui/macro';
 import { ActionIcon, Box, Button, Divider, TextInput } from '@mantine/core';
 import { IconQrcode } from '@tabler/icons-react';
-import React, { useState } from 'react';
+import type React from 'react';
+import { useState } from 'react';
 
 import { InputImageBarcode } from '../../pages/Index/Scan';
 
@@ -47,10 +48,10 @@ export function BarcodeInput({
             <IconQrcode />
           </ActionIcon>
         }
-        w="100%"
+        w='100%'
       />
       {onAction ? (
-        <Button color="green" onClick={onAction} mt="lg" fullWidth>
+        <Button color='green' onClick={onAction} mt='lg' fullWidth>
           {actionText}
         </Button>
       ) : null}
diff --git a/src/frontend/src/components/items/ColorToggle.tsx b/src/frontend/src/components/items/ColorToggle.tsx
index 59be5d72498e..1835ccaf8ddc 100644
--- a/src/frontend/src/components/items/ColorToggle.tsx
+++ b/src/frontend/src/components/items/ColorToggle.tsx
@@ -7,15 +7,15 @@ export function ColorToggle() {
   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
 
   return (
-    <Group justify="center">
+    <Group justify='center'>
       <ActionIcon
         onClick={toggleColorScheme}
-        size="lg"
+        size='lg'
         style={{
           color:
             colorScheme === 'dark' ? vars.colors.yellow[4] : vars.colors.blue[6]
         }}
-        variant="transparent"
+        variant='transparent'
       >
         {colorScheme === 'dark' ? <IconSun /> : <IconMoonStars />}
       </ActionIcon>
diff --git a/src/frontend/src/components/items/DashboardItem.tsx b/src/frontend/src/components/items/DashboardItem.tsx
index e1a3225da49c..742aef962b7d 100644
--- a/src/frontend/src/components/items/DashboardItem.tsx
+++ b/src/frontend/src/components/items/DashboardItem.tsx
@@ -17,15 +17,15 @@ export function StatisticItem({
   isLoading: boolean;
 }>) {
   return (
-    <Paper withBorder p="xs" key={id} pos="relative">
+    <Paper withBorder p='xs' key={id} pos='relative'>
       <LoadingOverlay visible={isLoading} overlayProps={{ blur: 2 }} />
-      <Group justify="space-between">
-        <Text size="xs" c="dimmed" className={classes.dashboardItemTitle}>
+      <Group justify='space-between'>
+        <Text size='xs' c='dimmed' className={classes.dashboardItemTitle}>
           {data.title}
         </Text>
       </Group>
 
-      <Group align="flex-end" gap="xs" mt={25}>
+      <Group align='flex-end' gap='xs' mt={25}>
         <Text className={classes.dashboardItemValue}>{data.value}</Text>
       </Group>
     </Paper>
diff --git a/src/frontend/src/components/items/DocInfo.tsx b/src/frontend/src/components/items/DocInfo.tsx
index 5b5d54d8917f..c75e8af6734e 100644
--- a/src/frontend/src/components/items/DocInfo.tsx
+++ b/src/frontend/src/components/items/DocInfo.tsx
@@ -1,6 +1,6 @@
 import { IconInfoCircle } from '@tabler/icons-react';
 
-import { BaseDocProps, DocTooltip } from './DocTooltip';
+import { type BaseDocProps, DocTooltip } from './DocTooltip';
 
 interface DocInfoProps extends BaseDocProps {
   size?: number;
diff --git a/src/frontend/src/components/items/DocTooltip.tsx b/src/frontend/src/components/items/DocTooltip.tsx
index 99558659b1d2..ead86eec27fd 100644
--- a/src/frontend/src/components/items/DocTooltip.tsx
+++ b/src/frontend/src/components/items/DocTooltip.tsx
@@ -24,7 +24,7 @@ export function DocTooltip({
 }: Readonly<DocTooltipProps>) {
   return (
     <HoverCard
-      shadow="md"
+      shadow='md'
       openDelay={200}
       closeDelay={200}
       withinPortal={true}
@@ -63,7 +63,7 @@ function ConstBody({
   useEffect(() => {
     if (ref.current == null) return;
 
-    let height = ref.current['clientHeight'];
+    const height = ref.current['clientHeight'];
     if (height > 250) {
       setHeight(250);
     } else {
@@ -78,7 +78,7 @@ function ConstBody({
         <ScrollArea h={height} mah={250}>
           <div ref={ref}>
             {detail && (
-              <Text size="xs" c="dimmed">
+              <Text size='xs' c='dimmed'>
                 {detail}
               </Text>
             )}
@@ -87,7 +87,7 @@ function ConstBody({
         </ScrollArea>
       )}
       {link && (
-        <Anchor href={link} target="_blank">
+        <Anchor href={link} target='_blank'>
           <Text size={'sm'}>
             <Trans>Read More</Trans>
           </Text>
diff --git a/src/frontend/src/components/items/ErrorItem.tsx b/src/frontend/src/components/items/ErrorItem.tsx
index e25e65065551..dfc44af78447 100644
--- a/src/frontend/src/components/items/ErrorItem.tsx
+++ b/src/frontend/src/components/items/ErrorItem.tsx
@@ -9,7 +9,7 @@ export function ErrorItem({
 
   return (
     <>
-      <Alert color="red" title={t`An error occurred`}>
+      <Alert color='red' title={t`An error occurred`}>
         <Text>{error_message}</Text>
       </Alert>
     </>
diff --git a/src/frontend/src/components/items/GettingStartedCarousel.tsx b/src/frontend/src/components/items/GettingStartedCarousel.tsx
index f119c10ced53..8165266dc321 100644
--- a/src/frontend/src/components/items/GettingStartedCarousel.tsx
+++ b/src/frontend/src/components/items/GettingStartedCarousel.tsx
@@ -3,19 +3,19 @@ import { Carousel } from '@mantine/carousel';
 import { Anchor, Button, Paper, Text } from '@mantine/core';
 
 import * as classes from './GettingStartedCarousel.css';
-import { MenuLinkItem } from './MenuLinks';
+import type { MenuLinkItem } from './MenuLinks';
 import { StylishText } from './StylishText';
 
 function StartedCard({ title, description, link }: MenuLinkItem) {
   return (
-    <Paper shadow="md" p="xl" radius="md" className={classes.card}>
+    <Paper shadow='md' p='xl' radius='md' className={classes.card}>
       <div>
-        <StylishText size="md">{title}</StylishText>
-        <Text size="sm" className={classes.category} lineClamp={2}>
+        <StylishText size='md'>{title}</StylishText>
+        <Text size='sm' className={classes.category} lineClamp={2}>
           {description}
         </Text>
       </div>
-      <Anchor href={link} target="_blank">
+      <Anchor href={link} target='_blank'>
         <Button>
           <Trans>Read More</Trans>
         </Button>
@@ -40,7 +40,7 @@ export function GettingStartedCarousel({
       slideSize={{ base: '100%', sm: '50%', md: '33.333333%' }}
       slideGap={{ base: 0, sm: 'md' }}
       slidesToScroll={3}
-      align="start"
+      align='start'
       loop
     >
       {slides}
diff --git a/src/frontend/src/components/items/InfoItem.tsx b/src/frontend/src/components/items/InfoItem.tsx
index 85621c42f40b..5e035ea00530 100644
--- a/src/frontend/src/components/items/InfoItem.tsx
+++ b/src/frontend/src/components/items/InfoItem.tsx
@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro';
 import { Code, Flex, Group, Text } from '@mantine/core';
-import { Link, To } from 'react-router-dom';
+import { Link, type To } from 'react-router-dom';
 
 import { YesNoButton } from '../buttons/YesNoButton';
 import { DetailDrawerLink } from '../nav/DetailDrawer';
@@ -43,8 +43,8 @@ export function InfoItem({
   }
 
   return (
-    <Group justify="space-between">
-      <Text fz="sm" fw={700}>
+    <Group justify='space-between'>
+      <Text fz='sm' fw={700}>
         {name}:
       </Text>
       <Flex>
diff --git a/src/frontend/src/components/items/InvenTreeLogo.tsx b/src/frontend/src/components/items/InvenTreeLogo.tsx
index b0a92c3c65d1..5bca4900f12b 100644
--- a/src/frontend/src/components/items/InvenTreeLogo.tsx
+++ b/src/frontend/src/components/items/InvenTreeLogo.tsx
@@ -10,7 +10,7 @@ export const InvenTreeLogoHomeButton = forwardRef<HTMLDivElement>(
     return (
       <div ref={ref} {...props}>
         <NavLink to={'/'}>
-          <ActionIcon size={28} variant="transparent">
+          <ActionIcon size={28} variant='transparent'>
             <InvenTreeLogo />
           </ActionIcon>
         </NavLink>
diff --git a/src/frontend/src/components/items/LanguageSelect.tsx b/src/frontend/src/components/items/LanguageSelect.tsx
index 55b2d613c3cd..a7a062c71442 100644
--- a/src/frontend/src/components/items/LanguageSelect.tsx
+++ b/src/frontend/src/components/items/LanguageSelect.tsx
@@ -37,7 +37,7 @@ export function LanguageSelect({ width = 80 }: Readonly<{ width?: number }>) {
       value={value}
       onChange={setValue}
       searchable
-      aria-label="Select language"
+      aria-label='Select language'
     />
   );
 }
diff --git a/src/frontend/src/components/items/LanguageToggle.tsx b/src/frontend/src/components/items/LanguageToggle.tsx
index 40d1fcfada93..ab48d6c53380 100644
--- a/src/frontend/src/components/items/LanguageToggle.tsx
+++ b/src/frontend/src/components/items/LanguageToggle.tsx
@@ -9,17 +9,17 @@ export function LanguageToggle() {
 
   return (
     <Group
-      justify="center"
+      justify='center'
       style={{
-        border: open === true ? `1px dashed ` : ``,
+        border: open === true ? '1px dashed' : '',
         margin: open === true ? 2 : 12,
         padding: open === true ? 8 : 0
       }}
     >
       <ActionIcon
         onClick={() => toggle.toggle()}
-        size="lg"
-        variant="transparent"
+        size='lg'
+        variant='transparent'
       >
         <IconLanguage />
       </ActionIcon>
diff --git a/src/frontend/src/components/items/MenuLinks.tsx b/src/frontend/src/components/items/MenuLinks.tsx
index 1f509d10bfe7..9f882e22a575 100644
--- a/src/frontend/src/components/items/MenuLinks.tsx
+++ b/src/frontend/src/components/items/MenuLinks.tsx
@@ -8,11 +8,10 @@ import {
   Tooltip,
   UnstyledButton
 } from '@mantine/core';
-import { IconLink } from '@tabler/icons-react';
 import { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { InvenTreeIcon, InvenTreeIconType } from '../../functions/icons';
+import { InvenTreeIcon, type InvenTreeIconType } from '../../functions/icons';
 import { navigateToLink } from '../../functions/navigation';
 import { StylishText } from './StylishText';
 
@@ -50,9 +49,9 @@ export function MenuLinks({
 
   return (
     <>
-      <Stack gap="xs">
+      <Stack gap='xs'>
         <Divider />
-        <StylishText size="md">{title}</StylishText>
+        <StylishText size='md'>{title}</StylishText>
         <Divider />
         <SimpleGrid cols={2} spacing={0} p={3}>
           {visibleLinks.map((item) => (
@@ -63,7 +62,7 @@ export function MenuLinks({
             >
               {item.link && item.external ? (
                 <Anchor href={item.link}>
-                  <Group wrap="nowrap">
+                  <Group wrap='nowrap'>
                     {item.external && (
                       <InvenTreeIcon
                         icon={item.icon ?? 'link'}
@@ -87,7 +86,7 @@ export function MenuLinks({
                     }
                   }}
                 >
-                  <Group wrap="nowrap">
+                  <Group wrap='nowrap'>
                     {item.icon && (
                       <InvenTreeIcon
                         icon={item.icon}
diff --git a/src/frontend/src/components/items/Placeholder.tsx b/src/frontend/src/components/items/Placeholder.tsx
index 9706b85f310f..6bf47831bc29 100644
--- a/src/frontend/src/components/items/Placeholder.tsx
+++ b/src/frontend/src/components/items/Placeholder.tsx
@@ -13,7 +13,7 @@ export function PlaceholderPill() {
       withArrow
       label={t`This feature/button/site is a placeholder for a feature that is not implemented, only partial or intended for testing.`}
     >
-      <Badge color="teal" variant="outline">
+      <Badge color='teal' variant='outline'>
         <Trans>PLH</Trans>
       </Badge>
     </Tooltip>
@@ -27,11 +27,11 @@ export function PlaceholderPanel() {
   return (
     <Stack>
       <Alert
-        color="teal"
+        color='teal'
         title={t`This panel is a placeholder.`}
         icon={<IconInfoCircle />}
       >
-        <Text c="gray">This panel has not yet been implemented</Text>
+        <Text c='gray'>This panel has not yet been implemented</Text>
       </Alert>
     </Stack>
   );
diff --git a/src/frontend/src/components/items/ProgressBar.tsx b/src/frontend/src/components/items/ProgressBar.tsx
index d0d199fe9f38..59224e8c90ba 100644
--- a/src/frontend/src/components/items/ProgressBar.tsx
+++ b/src/frontend/src/components/items/ProgressBar.tsx
@@ -15,8 +15,8 @@ export type ProgressBarProps = {
  */
 export function ProgressBar(props: Readonly<ProgressBarProps>) {
   const progress = useMemo(() => {
-    let maximum = props.maximum ?? 100;
-    let value = Math.max(props.value, 0);
+    const maximum = props.maximum ?? 100;
+    const value = Math.max(props.value, 0);
 
     if (maximum == 0) {
       return 0;
@@ -28,7 +28,7 @@ export function ProgressBar(props: Readonly<ProgressBarProps>) {
   return (
     <Stack gap={2} style={{ flexGrow: 1, minWidth: '100px' }}>
       {props.progressLabel && (
-        <Text ta="center" size="xs">
+        <Text ta='center' size='xs'>
           {props.value} / {props.maximum}
         </Text>
       )}
@@ -36,7 +36,7 @@ export function ProgressBar(props: Readonly<ProgressBarProps>) {
         value={progress}
         color={progress < 100 ? 'orange' : progress > 100 ? 'blue' : 'green'}
         size={props.size ?? 'md'}
-        radius="sm"
+        radius='sm'
       />
     </Stack>
   );
diff --git a/src/frontend/src/components/items/QRCode.tsx b/src/frontend/src/components/items/QRCode.tsx
index ade6ebac898c..9681d09c902b 100644
--- a/src/frontend/src/components/items/QRCode.tsx
+++ b/src/frontend/src/components/items/QRCode.tsx
@@ -21,7 +21,7 @@ import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { apiUrl } from '../../states/ApiState';
 import { useGlobalSettingsState } from '../../states/SettingsState';
 import { CopyButton } from '../buttons/CopyButton';
-import { QrCodeType } from './ActionDropdown';
+import type { QrCodeType } from './ActionDropdown';
 import { BarcodeInput } from './BarcodeInput';
 
 type QRCodeProps = {
@@ -46,7 +46,7 @@ export const QRCode = ({ data, ecl = 'Q', margin = 1 }: QRCodeProps) => {
   return (
     <Box>
       {qrCode ? (
-        <Image src={qrCode} alt="QR Code" />
+        <Image src={qrCode} alt='QR Code' />
       ) : (
         <Skeleton height={500} />
       )}
@@ -97,7 +97,7 @@ export const InvenTreeQRCode = ({
   return (
     <Stack>
       {mdl_prop.hash ? (
-        <Alert variant="outline" color="red" title={t`Custom barcode`}>
+        <Alert variant='outline' color='red' title={t`Custom barcode`}>
           <Trans>
             A custom barcode is registered for this item. The shown code is not
             that custom barcode.
@@ -110,11 +110,11 @@ export const InvenTreeQRCode = ({
       {data && settings.getSetting('BARCODE_SHOW_TEXT', 'false') && (
         <Group
           justify={showEclSelector ? 'space-between' : 'center'}
-          align="flex-start"
+          align='flex-start'
           px={16}
         >
           <Stack gap={4} pt={2}>
-            <Text size="sm" fw={500}>
+            <Text size='sm' fw={500}>
               <Trans>Barcode Data:</Trans>
             </Text>
             <Group>
@@ -189,7 +189,7 @@ export const QRCodeUnlink = ({ mdl_prop }: { mdl_prop: QrCodeType }) => {
       <Text>
         <Trans>This will remove the link to the associated barcode</Trans>
       </Text>
-      <Button color="red" onClick={unlinkBarcode}>
+      <Button color='red' onClick={unlinkBarcode}>
         <Trans>Unlink Barcode</Trans>
       </Button>
     </Box>
diff --git a/src/frontend/src/components/items/StylishText.tsx b/src/frontend/src/components/items/StylishText.tsx
index cae6245c8acf..040f9a9258a2 100644
--- a/src/frontend/src/components/items/StylishText.tsx
+++ b/src/frontend/src/components/items/StylishText.tsx
@@ -10,7 +10,7 @@ export function StylishText({
   size?: string;
 }>) {
   return (
-    <Text size={size} className={classes.signText} variant="gradient">
+    <Text size={size} className={classes.signText} variant='gradient'>
       {children}
     </Text>
   );
diff --git a/src/frontend/src/components/items/TitleWithDoc.tsx b/src/frontend/src/components/items/TitleWithDoc.tsx
index 89ca569e61de..7b2179329c56 100644
--- a/src/frontend/src/components/items/TitleWithDoc.tsx
+++ b/src/frontend/src/components/items/TitleWithDoc.tsx
@@ -1,4 +1,4 @@
-import { Group, Title, TitleProps } from '@mantine/core';
+import { Group, Title, type TitleProps } from '@mantine/core';
 
 import { DocInfo } from './DocInfo';
 
diff --git a/src/frontend/src/components/items/UnavailableIndicator.tsx b/src/frontend/src/components/items/UnavailableIndicator.tsx
index 41a9b953be75..694d486d99af 100644
--- a/src/frontend/src/components/items/UnavailableIndicator.tsx
+++ b/src/frontend/src/components/items/UnavailableIndicator.tsx
@@ -1,5 +1,5 @@
 import { IconAlertCircle } from '@tabler/icons-react';
 
 export function UnavailableIndicator() {
-  return <IconAlertCircle size={18} color="red" />;
+  return <IconAlertCircle size={18} color='red' />;
 }
diff --git a/src/frontend/src/components/modals/AboutInvenTreeModal.tsx b/src/frontend/src/components/modals/AboutInvenTreeModal.tsx
index dc8e7300fd4f..677b22ad3e51 100644
--- a/src/frontend/src/components/modals/AboutInvenTreeModal.tsx
+++ b/src/frontend/src/components/modals/AboutInvenTreeModal.tsx
@@ -8,10 +8,9 @@ import {
   Space,
   Stack,
   Table,
-  Text,
-  Title
+  Text
 } from '@mantine/core';
-import { ContextModalProps } from '@mantine/modals';
+import type { ContextModalProps } from '@mantine/modals';
 import { useQuery } from '@tanstack/react-query';
 
 import { api } from '../../App';
@@ -51,22 +50,18 @@ export function AboutInvenTreeModal({
     queryFn: () => api.get(apiUrl(ApiEndpoints.version)).then((res) => res.data)
   });
 
-  function fillTable(
-    lookup: AboutLookupRef[],
-    data: any,
-    alwaysLink: boolean = false
-  ) {
+  function fillTable(lookup: AboutLookupRef[], data: any, alwaysLink = false) {
     return lookup.map((map: AboutLookupRef, idx) => (
       <Table.Tr key={idx}>
         <Table.Td>{map.title}</Table.Td>
         <Table.Td>
-          <Group justify="space-between" gap="xs">
+          <Group justify='space-between' gap='xs'>
             {alwaysLink ? (
-              <Anchor href={data[map.ref]} target="_blank">
+              <Anchor href={data[map.ref]} target='_blank'>
                 {data[map.ref]}
               </Anchor>
             ) : map.link ? (
-              <Anchor href={map.link} target="_blank">
+              <Anchor href={map.link} target='_blank'>
                 {data[map.ref]}
               </Anchor>
             ) : (
@@ -96,20 +91,20 @@ export function AboutInvenTreeModal({
   return (
     <Stack>
       <Divider />
-      <Group justify="space-between" wrap="nowrap">
-        <StylishText size="lg">
+      <Group justify='space-between' wrap='nowrap'>
+        <StylishText size='lg'>
           <Trans>Version Information</Trans>
         </StylishText>
         {data.dev ? (
-          <Badge color="blue">
+          <Badge color='blue'>
             <Trans>Development Version</Trans>
           </Badge>
         ) : data.up_to_date ? (
-          <Badge color="green">
+          <Badge color='green'>
             <Trans>Up to Date</Trans>
           </Badge>
         ) : (
-          <Badge color="teal">
+          <Badge color='teal'>
             <Trans>Update Available</Trans>
           </Badge>
         )}
@@ -162,7 +157,7 @@ export function AboutInvenTreeModal({
         </Table.Tbody>
       </Table>
       <Divider />
-      <StylishText size="lg">
+      <StylishText size='lg'>
         <Trans>Links</Trans>
       </StylishText>
       <Table striped>
@@ -181,7 +176,7 @@ export function AboutInvenTreeModal({
         </Table.Tbody>
       </Table>
       <Divider />
-      <Group justify="space-between">
+      <Group justify='space-between'>
         <CopyButton value={copyval} label={t`Copy version information`} />
         <Space />
         <Button
diff --git a/src/frontend/src/components/modals/LicenseModal.tsx b/src/frontend/src/components/modals/LicenseModal.tsx
index 7a9e8c8527ca..441d8985095d 100644
--- a/src/frontend/src/components/modals/LicenseModal.tsx
+++ b/src/frontend/src/components/modals/LicenseModal.tsx
@@ -19,17 +19,17 @@ import { apiUrl } from '../../states/ApiState';
 
 export function LicenceView(entries: any[]) {
   return (
-    <Stack gap="xs">
+    <Stack gap='xs'>
       <Divider />
       {entries?.length > 0 ? (
-        <Accordion variant="contained" defaultValue="-">
+        <Accordion variant='contained' defaultValue='-'>
           {entries?.map((entry: any, index: number) => (
             <Accordion.Item
               key={entry.name + entry.license + entry.version}
               value={`entry-${index}`}
             >
               <Accordion.Control>
-                <Group justify="space-between" grow>
+                <Group justify='space-between' grow>
                   <Text>{entry.name}</Text>
                   <Text>{entry.license}</Text>
                   <Space />
@@ -75,7 +75,7 @@ export function LicenseModal() {
   }, [packageKeys]);
 
   return (
-    <Stack gap="xs">
+    <Stack gap='xs'>
       <Divider />
       <LoadingOverlay visible={isFetching} />
       {isFetching && (
@@ -84,7 +84,7 @@ export function LicenseModal() {
         </Text>
       )}
       {isError ? (
-        <Alert color="red" title={t`Error`}>
+        <Alert color='red' title={t`Error`}>
           <Text>
             <Trans>Failed to fetch license information</Trans>
           </Text>
diff --git a/src/frontend/src/components/modals/QrCodeModal.tsx b/src/frontend/src/components/modals/QrCodeModal.tsx
index 061609eb81d1..8f02566c4ef9 100644
--- a/src/frontend/src/components/modals/QrCodeModal.tsx
+++ b/src/frontend/src/components/modals/QrCodeModal.tsx
@@ -1,7 +1,7 @@
 import { Trans, t } from '@lingui/macro';
 import { Button, ScrollArea, Stack, Text } from '@mantine/core';
 import { useListState } from '@mantine/hooks';
-import { ContextModalProps } from '@mantine/modals';
+import type { ContextModalProps } from '@mantine/modals';
 import { showNotification } from '@mantine/notifications';
 
 import { api } from '../../App';
@@ -32,14 +32,14 @@ export function QrCodeModal({
   }
 
   return (
-    <Stack gap="xs">
+    <Stack gap='xs'>
       <BarcodeInput onScan={onScanAction} />
       {values.length == 0 ? (
         <Text c={'grey'}>
           <Trans>No scans yet!</Trans>
         </Text>
       ) : (
-        <ScrollArea style={{ height: 200 }} type="auto" offsetScrollbars>
+        <ScrollArea style={{ height: 200 }} type='auto' offsetScrollbars>
           {values.map((value, index) => (
             <div key={`${index}-${value}`}>{value}</div>
           ))}
@@ -47,8 +47,8 @@ export function QrCodeModal({
       )}
       <Button
         fullWidth
-        mt="md"
-        color="red"
+        mt='md'
+        color='red'
         onClick={() => {
           // stopScanning();
           context.closeModal(id);
diff --git a/src/frontend/src/components/modals/ServerInfoModal.tsx b/src/frontend/src/components/modals/ServerInfoModal.tsx
index 528c6f2844d2..b0afc87dd274 100644
--- a/src/frontend/src/components/modals/ServerInfoModal.tsx
+++ b/src/frontend/src/components/modals/ServerInfoModal.tsx
@@ -1,14 +1,6 @@
 import { Trans } from '@lingui/macro';
-import {
-  Badge,
-  Button,
-  Divider,
-  Group,
-  Stack,
-  Table,
-  Title
-} from '@mantine/core';
-import { ContextModalProps } from '@mantine/modals';
+import { Badge, Button, Divider, Group, Stack, Table } from '@mantine/core';
+import type { ContextModalProps } from '@mantine/modals';
 
 import { useServerApiState } from '../../states/ApiState';
 import { OnlyStaff } from '../items/OnlyStaff';
@@ -23,7 +15,7 @@ export function ServerInfoModal({
   return (
     <Stack>
       <Divider />
-      <StylishText size="lg">
+      <StylishText size='lg'>
         <Trans>Server</Trans>
       </StylishText>
       <Table striped>
@@ -110,7 +102,7 @@ export function ServerInfoModal({
                 <Trans>Background Worker</Trans>
               </Table.Td>
               <Table.Td>
-                <Badge color="red">
+                <Badge color='red'>
                   <Trans>Background worker not running</Trans>
                 </Badge>
               </Table.Td>
@@ -122,7 +114,7 @@ export function ServerInfoModal({
                 <Trans>Email Settings</Trans>
               </Table.Td>
               <Table.Td>
-                <Badge color="red">
+                <Badge color='red'>
                   <Trans>Email settings not configured</Trans>
                 </Badge>
               </Table.Td>
@@ -131,7 +123,7 @@ export function ServerInfoModal({
         </Table.Tbody>
       </Table>
       <Divider />
-      <Group justify="right">
+      <Group justify='right'>
         <Button
           onClick={() => {
             context.closeModal(id);
diff --git a/src/frontend/src/components/nav/BreadcrumbList.tsx b/src/frontend/src/components/nav/BreadcrumbList.tsx
index 930c4ffb6444..817617b0db1c 100644
--- a/src/frontend/src/components/nav/BreadcrumbList.tsx
+++ b/src/frontend/src/components/nav/BreadcrumbList.tsx
@@ -45,23 +45,23 @@ export function BreadcrumbList({
   }, [breadcrumbs]);
 
   return (
-    <Paper p="7" radius="xs" shadow="xs">
-      <Group gap="xs">
+    <Paper p='7' radius='xs' shadow='xs'>
+      <Group gap='xs'>
         {navCallback && (
           <ActionIcon
-            key="nav-breadcrumb-action"
-            aria-label="nav-breadcrumb-action"
+            key='nav-breadcrumb-action'
+            aria-label='nav-breadcrumb-action'
             onClick={navCallback}
-            variant="transparent"
+            variant='transparent'
           >
             <IconMenu2 />
           </ActionIcon>
         )}
-        <Breadcrumbs key="breadcrumbs" separator=">">
+        <Breadcrumbs key='breadcrumbs' separator='>'>
           {elements.map((breadcrumb, index) => {
             return (
               <Anchor
-                key={index}
+                key={`${index}-${breadcrumb.name}`}
                 aria-label={`breadcrumb-${index}-${identifierString(
                   breadcrumb.name
                 )}`}
@@ -72,7 +72,7 @@ export function BreadcrumbList({
               >
                 <Group gap={4}>
                   {breadcrumb.icon}
-                  <Text size="sm">{breadcrumb.name}</Text>
+                  <Text size='sm'>{breadcrumb.name}</Text>
                 </Group>
               </Anchor>
             );
diff --git a/src/frontend/src/components/nav/DetailDrawer.tsx b/src/frontend/src/components/nav/DetailDrawer.tsx
index 981ae39c45eb..42c84b3b6d05 100644
--- a/src/frontend/src/components/nav/DetailDrawer.tsx
+++ b/src/frontend/src/components/nav/DetailDrawer.tsx
@@ -4,7 +4,7 @@ import { useCallback, useMemo } from 'react';
 import { Link, Route, Routes, useNavigate, useParams } from 'react-router-dom';
 import type { To } from 'react-router-dom';
 
-import { UiSizeType } from '../../defaults/formatters';
+import type { UiSizeType } from '../../defaults/formatters';
 import { useLocalState } from '../../states/LocalState';
 import * as classes from './DetailDrawer.css';
 
@@ -57,7 +57,7 @@ function DetailDrawerComponent({
         <Group>
           {detailDrawerStack > 0 && (
             <ActionIcon
-              variant="outline"
+              variant='outline'
               onClick={() => {
                 navigate(-1);
                 addDetailDrawer(-1);
@@ -66,7 +66,7 @@ function DetailDrawerComponent({
               <IconChevronLeft />
             </ActionIcon>
           )}
-          <Text size="xl" fw={600} variant="gradient">
+          <Text size='xl' fw={600} variant='gradient'>
             {title}
           </Text>
         </Group>
@@ -83,7 +83,7 @@ function DetailDrawerComponent({
 export function DetailDrawer(props: Readonly<DrawerProps>) {
   return (
     <Routes>
-      <Route path=":id?/" element={<DetailDrawerComponent {...props} />} />
+      <Route path=':id?/' element={<DetailDrawerComponent {...props} />} />
     </Routes>
   );
 }
diff --git a/src/frontend/src/components/nav/Header.tsx b/src/frontend/src/components/nav/Header.tsx
index 5f9c829dabfd..a97f3aa6058b 100644
--- a/src/frontend/src/components/nav/Header.tsx
+++ b/src/frontend/src/components/nav/Header.tsx
@@ -2,7 +2,7 @@ import { ActionIcon, Container, Group, Indicator, Tabs } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { IconBell, IconSearch } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
-import { ReactNode, useEffect, useMemo, useState } from 'react';
+import { type ReactNode, useEffect, useMemo, useState } from 'react';
 import { useMatch, useNavigate } from 'react-router-dom';
 
 import { api } from '../../App';
@@ -61,7 +61,7 @@ export function Header() {
             limit: 1
           }
         };
-        let response = await api
+        const response = await api
           .get(apiUrl(ApiEndpoints.notifications_list), params)
           .catch(() => {
             return null;
@@ -99,8 +99,8 @@ export function Header() {
           closeNotificationDrawer();
         }}
       />
-      <Container className={classes.layoutHeaderSection} size="100%">
-        <Group justify="space-between">
+      <Container className={classes.layoutHeaderSection} size='100%'>
+        <Group justify='space-between'>
           <Group>
             <NavHoverMenu openDrawer={openNavDrawer} />
             <NavTabs />
@@ -108,25 +108,25 @@ export function Header() {
           <Group>
             <ActionIcon
               onClick={openSearchDrawer}
-              variant="transparent"
-              aria-label="open-search"
+              variant='transparent'
+              aria-label='open-search'
             >
               <IconSearch />
             </ActionIcon>
             <SpotlightButton />
             {globalSettings.isSet('BARCODE_ENABLE') && <ScanButton />}
             <Indicator
-              radius="lg"
-              size="18"
+              radius='lg'
+              size='18'
               label={notificationCount}
-              color="red"
+              color='red'
               disabled={notificationCount <= 0}
               inline
             >
               <ActionIcon
                 onClick={openNotificationDrawer}
-                variant="transparent"
-                aria-label="open-notifications"
+                variant='transparent'
+                aria-label='open-notifications'
               >
                 <IconBell />
               </ActionIcon>
@@ -146,7 +146,7 @@ function NavTabs() {
   const tabValue = match?.params.tabName;
 
   const tabs: ReactNode[] = useMemo(() => {
-    let _tabs: ReactNode[] = [];
+    const _tabs: ReactNode[] = [];
 
     mainNavTabs.forEach((tab) => {
       if (tab.role && !user.hasViewRole(tab.role)) {
@@ -171,7 +171,7 @@ function NavTabs() {
 
   return (
     <Tabs
-      defaultValue="home"
+      defaultValue='home'
       classNames={{
         root: classes.tabs,
         list: classes.tabsList,
diff --git a/src/frontend/src/components/nav/Layout.tsx b/src/frontend/src/components/nav/Layout.tsx
index 236e3dd63b72..39a2f9c091fe 100644
--- a/src/frontend/src/components/nav/Layout.tsx
+++ b/src/frontend/src/components/nav/Layout.tsx
@@ -19,7 +19,7 @@ export const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
   if (!isLoggedIn()) {
     return (
       <Navigate
-        to="/logged-in"
+        to='/logged-in'
         state={{
           redirectUrl: location.pathname,
           queryParams: location.search,
@@ -58,22 +58,22 @@ export default function LayoutComponent() {
 
   return (
     <ProtectedRoute>
-      <Flex direction="column" mih="100vh">
+      <Flex direction='column' mih='100vh'>
         <Header />
-        <Container className={classes.layoutContent} size="100%">
+        <Container className={classes.layoutContent} size='100%'>
           <Boundary label={'layout'}>
             <Outlet />
           </Boundary>
           {/* </ErrorBoundary> */}
         </Container>
-        <Space h="xl" />
+        <Space h='xl' />
         <Footer />
         <Spotlight
           actions={actions}
           store={firstStore}
           highlightQuery
           searchProps={{
-            leftSection: <IconSearch size="1.2rem" />,
+            leftSection: <IconSearch size='1.2rem' />,
             placeholder: t`Search...`
           }}
           shortcut={['mod + K', '/']}
diff --git a/src/frontend/src/components/nav/MainMenu.tsx b/src/frontend/src/components/nav/MainMenu.tsx
index 6ca50d08bffb..922ccecd7492 100644
--- a/src/frontend/src/components/nav/MainMenu.tsx
+++ b/src/frontend/src/components/nav/MainMenu.tsx
@@ -32,12 +32,12 @@ export function MainMenu() {
   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
 
   return (
-    <Menu width={260} position="bottom-end">
+    <Menu width={260} position='bottom-end'>
       <Menu.Target>
         <UnstyledButton className={classes.layoutHeaderUser}>
           <Group gap={7}>
             {username() ? (
-              <Text fw={500} size="sm" style={{ lineHeight: 1 }} mr={3}>
+              <Text fw={500} size='sm' style={{ lineHeight: 1 }} mr={3}>
                 {username()}
               </Text>
             ) : (
@@ -54,7 +54,7 @@ export function MainMenu() {
         <Menu.Item
           leftSection={<IconUserCog />}
           component={Link}
-          to="/settings/user"
+          to='/settings/user'
         >
           <Trans>Account Settings</Trans>
         </Menu.Item>
@@ -62,7 +62,7 @@ export function MainMenu() {
           <Menu.Item
             leftSection={<IconSettings />}
             component={Link}
-            to="/settings/system"
+            to='/settings/system'
           >
             <Trans>System Settings</Trans>
           </Menu.Item>
@@ -81,7 +81,7 @@ export function MainMenu() {
           <Menu.Item
             leftSection={<IconUserBolt />}
             component={Link}
-            to="/settings/admin"
+            to='/settings/admin'
           >
             <Trans>Admin Center</Trans>
           </Menu.Item>
diff --git a/src/frontend/src/components/nav/NavHoverMenu.tsx b/src/frontend/src/components/nav/NavHoverMenu.tsx
index 82e126dad7ef..21e8555e035f 100644
--- a/src/frontend/src/components/nav/NavHoverMenu.tsx
+++ b/src/frontend/src/components/nav/NavHoverMenu.tsx
@@ -3,12 +3,12 @@ import { UnstyledButton } from '@mantine/core';
 import { InvenTreeLogo } from '../items/InvenTreeLogo';
 
 export function NavHoverMenu({
-  openDrawer: openDrawer
+  openDrawer
 }: Readonly<{
   openDrawer: () => void;
 }>) {
   return (
-    <UnstyledButton onClick={() => openDrawer()} aria-label="navigation-menu">
+    <UnstyledButton onClick={() => openDrawer()} aria-label='navigation-menu'>
       <InvenTreeLogo />
     </UnstyledButton>
   );
diff --git a/src/frontend/src/components/nav/NavigationDrawer.tsx b/src/frontend/src/components/nav/NavigationDrawer.tsx
index c77872f9c32f..1ff04e45ebba 100644
--- a/src/frontend/src/components/nav/NavigationDrawer.tsx
+++ b/src/frontend/src/components/nav/NavigationDrawer.tsx
@@ -18,7 +18,7 @@ import * as classes from '../../main.css';
 import { useGlobalSettingsState } from '../../states/SettingsState';
 import { useUserState } from '../../states/UserState';
 import { InvenTreeLogo } from '../items/InvenTreeLogo';
-import { MenuLinkItem, MenuLinks } from '../items/MenuLinks';
+import { type MenuLinkItem, MenuLinks } from '../items/MenuLinks';
 import { StylishText } from '../items/StylishText';
 
 // TODO @matmair #1: implement plugin loading and menu item generation see #5269
@@ -35,7 +35,7 @@ export function NavigationDrawer({
     <Drawer
       opened={opened}
       onClose={close}
-      size="lg"
+      size='lg'
       withCloseButton={false}
       classNames={{
         body: classes.navigationDrawer
@@ -161,14 +161,14 @@ function DrawerContent({ closeFunc }: { closeFunc?: () => void }) {
   const menuItemsAbout: MenuLinkItem[] = useMemo(() => AboutLinks(), []);
 
   return (
-    <Flex direction="column" mih="100vh" p={16}>
-      <Group wrap="nowrap">
+    <Flex direction='column' mih='100vh' p={16}>
+      <Group wrap='nowrap'>
         <InvenTreeLogo />
-        <StylishText size="xl">{title}</StylishText>
+        <StylishText size='xl'>{title}</StylishText>
       </Group>
-      <Space h="xs" />
+      <Space h='xs' />
       <Container className={classes.layoutContent} p={0}>
-        <ScrollArea h={scrollHeight} type="always" offsetScrollbars>
+        <ScrollArea h={scrollHeight} type='always' offsetScrollbars>
           <MenuLinks
             title={t`Navigation`}
             links={menuItemsNavigate}
@@ -184,7 +184,7 @@ function DrawerContent({ closeFunc }: { closeFunc?: () => void }) {
             links={menuItemsAction}
             beforeClick={closeFunc}
           />
-          <Space h="md" />
+          <Space h='md' />
           {plugins.length > 0 ? (
             <>
               <MenuLinks
@@ -199,13 +199,13 @@ function DrawerContent({ closeFunc }: { closeFunc?: () => void }) {
         </ScrollArea>
       </Container>
       <div ref={ref}>
-        <Space h="md" />
+        <Space h='md' />
         <MenuLinks
           title={t`Documentation`}
           links={menuItemsDocumentation}
           beforeClick={closeFunc}
         />
-        <Space h="md" />
+        <Space h='md' />
         <MenuLinks
           title={t`About`}
           links={menuItemsAbout}
diff --git a/src/frontend/src/components/nav/NavigationTree.tsx b/src/frontend/src/components/nav/NavigationTree.tsx
index ec2773f92ec5..98d2f66708e8 100644
--- a/src/frontend/src/components/nav/NavigationTree.tsx
+++ b/src/frontend/src/components/nav/NavigationTree.tsx
@@ -5,11 +5,11 @@ import {
   Drawer,
   Group,
   LoadingOverlay,
-  RenderTreeNodePayload,
+  type RenderTreeNodePayload,
   Space,
   Stack,
   Tree,
-  TreeNodeData,
+  type TreeNodeData,
   useTree
 } from '@mantine/core';
 import {
@@ -22,8 +22,8 @@ import { useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { api } from '../../App';
-import { ApiEndpoints } from '../../enums/ApiEndpoints';
-import { ModelType } from '../../enums/ModelType';
+import type { ApiEndpoints } from '../../enums/ApiEndpoints';
+import type { ModelType } from '../../enums/ModelType';
 import { navigateToLink } from '../../functions/navigation';
 import { getDetailUrl } from '../../functions/urls';
 import { apiUrl } from '../../states/ApiState';
@@ -89,19 +89,19 @@ export default function NavigationTree({
      * It is required (and assumed) that the data is first sorted by level.
      */
 
-    let nodes: Record<number, any> = {};
-    let tree: TreeNodeData[] = [];
+    const nodes: Record<number, any> = {};
+    const tree: TreeNodeData[] = [];
 
     if (!query?.data?.length) {
       return [];
     }
 
     for (let ii = 0; ii < query.data.length; ii++) {
-      let node = {
+      const node = {
         ...query.data[ii],
         children: [],
         label: (
-          <Group gap="xs">
+          <Group gap='xs'>
             <ApiIcon name={query.data[ii].icon} />
             {query.data[ii].name}
           </Group>
@@ -141,9 +141,9 @@ export default function NavigationTree({
     (payload: RenderTreeNodePayload) => {
       return (
         <Group
-          justify="left"
+          justify='left'
           key={payload.node.value}
-          wrap="nowrap"
+          wrap='nowrap'
           onClick={() => {
             if (payload.hasChildren) {
               treeState.toggleExpanded(payload.node.value);
@@ -152,8 +152,8 @@ export default function NavigationTree({
         >
           <Space w={5 * payload.level} />
           <ActionIcon
-            size="sm"
-            variant="transparent"
+            size='sm'
+            variant='transparent'
             aria-label={`nav-tree-toggle-${payload.node.value}}`}
           >
             {payload.hasChildren ? (
@@ -179,8 +179,8 @@ export default function NavigationTree({
   return (
     <Drawer
       opened={opened}
-      size="md"
-      position="left"
+      size='md'
+      position='left'
       onClose={onClose}
       withCloseButton={true}
       styles={{
@@ -192,13 +192,13 @@ export default function NavigationTree({
         }
       }}
       title={
-        <Group justify="left" p="ms" gap="md" wrap="nowrap">
+        <Group justify='left' p='ms' gap='md' wrap='nowrap'>
           <IconSitemap />
-          <StylishText size="lg">{title}</StylishText>
+          <StylishText size='lg'>{title}</StylishText>
         </Group>
       }
     >
-      <Stack gap="xs">
+      <Stack gap='xs'>
         <Divider />
         <LoadingOverlay visible={query.isFetching || query.isLoading} />
         <Tree data={data} tree={treeState} renderNode={renderNode} />
diff --git a/src/frontend/src/components/nav/NotificationDrawer.tsx b/src/frontend/src/components/nav/NotificationDrawer.tsx
index 72e016542eec..3ff32fb6be51 100644
--- a/src/frontend/src/components/nav/NotificationDrawer.tsx
+++ b/src/frontend/src/components/nav/NotificationDrawer.tsx
@@ -20,7 +20,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { api } from '../../App';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
-import { ModelType } from '../../enums/ModelType';
+import type { ModelType } from '../../enums/ModelType';
 import { navigateToLink } from '../../functions/navigation';
 import { getDetailUrl } from '../../functions/urls';
 import { base_url } from '../../main';
@@ -44,12 +44,12 @@ function NotificationEntry({
 
   let link = notification.target?.link;
 
-  let model_type = notification.target?.model_type;
-  let model_id = notification.target?.model_id;
+  const model_type = notification.target?.model_type;
+  const model_id = notification.target?.model_id;
 
   // If a valid model type is provided, that overrides the specified link
   if (model_type as ModelType) {
-    let model_info = ModelInformationDict[model_type as ModelType];
+    const model_info = ModelInformationDict[model_type as ModelType];
     if (model_info?.url_detail && model_id) {
       link = getDetailUrl(model_type as ModelType, model_id);
     } else if (model_info?.url_overview) {
@@ -58,18 +58,18 @@ function NotificationEntry({
   }
 
   return (
-    <Paper p="xs" shadow="xs">
-      <Group justify="space-between" wrap="nowrap">
+    <Paper p='xs' shadow='xs'>
+      <Group justify='space-between' wrap='nowrap'>
         <Tooltip
           label={notification.message}
-          position="bottom-end"
+          position='bottom-end'
           hidden={!notification.message}
         >
           <Stack gap={2}>
             <Anchor
               href={link ? `/${base_url}${link}` : '#'}
-              underline="hover"
-              target="_blank"
+              underline='hover'
+              target='_blank'
               onClick={(event: any) => {
                 if (link) {
                   // Mark the notification as read
@@ -81,13 +81,13 @@ function NotificationEntry({
                 }
               }}
             >
-              <Text size="sm">{notification.name}</Text>
+              <Text size='sm'>{notification.name}</Text>
             </Anchor>
-            <Text size="xs">{notification.age_human}</Text>
+            <Text size='xs'>{notification.age_human}</Text>
           </Stack>
         </Tooltip>
-        <Tooltip label={t`Mark as read`} position="bottom-end">
-          <ActionIcon variant="transparent" onClick={onRead}>
+        <Tooltip label={t`Mark as read`} position='bottom-end'>
+          <ActionIcon variant='transparent' onClick={onRead}>
             <IconBellCheck />
           </ActionIcon>
         </Tooltip>
@@ -162,8 +162,8 @@ export function NotificationDrawer({
   return (
     <Drawer
       opened={opened}
-      size="md"
-      position="right"
+      size='md'
+      position='right'
       onClose={onClose}
       withCloseButton={false}
       styles={{
@@ -175,12 +175,12 @@ export function NotificationDrawer({
         }
       }}
       title={
-        <Group justify="space-between" wrap="nowrap">
-          <StylishText size="lg">{t`Notifications`}</StylishText>
-          <Group justify="end" wrap="nowrap">
+        <Group justify='space-between' wrap='nowrap'>
+          <StylishText size='lg'>{t`Notifications`}</StylishText>
+          <Group justify='end' wrap='nowrap'>
             <Tooltip label={t`Mark all as read`}>
               <ActionIcon
-                variant="transparent"
+                variant='transparent'
                 onClick={() => {
                   markAllAsRead();
                 }}
@@ -194,7 +194,7 @@ export function NotificationDrawer({
                   onClose();
                   navigateToLink('/notifications/unread', navigate, event);
                 }}
-                variant="transparent"
+                variant='transparent'
               >
                 <IconArrowRight />
               </ActionIcon>
@@ -203,12 +203,12 @@ export function NotificationDrawer({
         </Group>
       }
     >
-      <Boundary label="NotificationDrawer">
-        <Stack gap="xs">
+      <Boundary label='NotificationDrawer'>
+        <Stack gap='xs'>
           <Divider />
           {!hasNotifications && (
-            <Alert color="green">
-              <Text size="sm">{t`You have no unread notifications.`}</Text>
+            <Alert color='green'>
+              <Text size='sm'>{t`You have no unread notifications.`}</Text>
             </Alert>
           )}
           {hasNotifications &&
@@ -221,7 +221,7 @@ export function NotificationDrawer({
             ))}
           {notificationQuery.isFetching && (
             <Center>
-              <Loader size="sm" />
+              <Loader size='sm' />
             </Center>
           )}
         </Stack>
diff --git a/src/frontend/src/components/nav/PageDetail.tsx b/src/frontend/src/components/nav/PageDetail.tsx
index a407fded3f3e..77948320d699 100644
--- a/src/frontend/src/components/nav/PageDetail.tsx
+++ b/src/frontend/src/components/nav/PageDetail.tsx
@@ -1,10 +1,10 @@
 import { Group, Paper, Space, Stack, Text } from '@mantine/core';
 import { useHotkeys } from '@mantine/hooks';
-import { Fragment, ReactNode } from 'react';
+import { Fragment, type ReactNode } from 'react';
 
 import { ApiImage } from '../images/ApiImage';
 import { StylishText } from '../items/StylishText';
-import { Breadcrumb, BreadcrumbList } from './BreadcrumbList';
+import { type Breadcrumb, BreadcrumbList } from './BreadcrumbList';
 
 interface PageDetailInterface {
   title?: string;
@@ -51,26 +51,26 @@ export function PageDetail({
   ]);
 
   return (
-    <Stack gap="xs">
+    <Stack gap='xs'>
       {breadcrumbs && breadcrumbs.length > 0 && (
         <BreadcrumbList
           navCallback={breadcrumbAction}
           breadcrumbs={breadcrumbs}
         />
       )}
-      <Paper p="xs" radius="xs" shadow="xs">
-        <Stack gap="xs">
-          <Group justify="space-between" wrap="nowrap">
-            <Group justify="left" wrap="nowrap">
+      <Paper p='xs' radius='xs' shadow='xs'>
+        <Stack gap='xs'>
+          <Group justify='space-between' wrap='nowrap'>
+            <Group justify='left' wrap='nowrap'>
               {imageUrl && (
-                <ApiImage src={imageUrl} radius="sm" mah={42} maw={42} />
+                <ApiImage src={imageUrl} radius='sm' mah={42} maw={42} />
               )}
-              <Stack gap="xs">
-                {title && <StylishText size="lg">{title}</StylishText>}
+              <Stack gap='xs'>
+                {title && <StylishText size='lg'>{title}</StylishText>}
                 {subtitle && (
-                  <Group gap="xs">
+                  <Group gap='xs'>
                     {icon}
-                    <Text size="md" truncate>
+                    <Text size='md' truncate>
                       {subtitle}
                     </Text>
                   </Group>
@@ -79,14 +79,14 @@ export function PageDetail({
             </Group>
             <Space />
             {detail}
-            <Group justify="right" gap="xs" wrap="nowrap">
+            <Group justify='right' gap='xs' wrap='nowrap'>
               {badges?.map((badge, idx) => (
                 <Fragment key={idx}>{badge}</Fragment>
               ))}
             </Group>
             <Space />
             {actions && (
-              <Group gap={5} justify="right">
+              <Group gap={5} justify='right'>
                 {actions.map((action, idx) => (
                   <Fragment key={idx}>{action}</Fragment>
                 ))}
diff --git a/src/frontend/src/components/nav/SearchDrawer.tsx b/src/frontend/src/components/nav/SearchDrawer.tsx
index 15180edf503a..c13a7c593c55 100644
--- a/src/frontend/src/components/nav/SearchDrawer.tsx
+++ b/src/frontend/src/components/nav/SearchDrawer.tsx
@@ -71,26 +71,26 @@ function QueryResultGroup({
   return (
     <Paper
       withBorder
-      shadow="sm"
-      p="md"
+      shadow='sm'
+      p='md'
       key={`paper-${query.model}`}
       aria-label={`search-group-${query.model}`}
     >
       <Stack key={`stack-${query.model}`}>
-        <Group justify="space-between" wrap="nowrap">
-          <Group justify="left" gap={5} wrap="nowrap">
-            <Text size="lg">{model.label_multiple}</Text>
-            <Text size="sm" style={{ fontStyle: 'italic' }}>
+        <Group justify='space-between' wrap='nowrap'>
+          <Group justify='left' gap={5} wrap='nowrap'>
+            <Text size='lg'>{model.label_multiple}</Text>
+            <Text size='sm' style={{ fontStyle: 'italic' }}>
               {' '}
               - {query.results.count} <Trans>results</Trans>
             </Text>
           </Group>
           <Space />
           <ActionIcon
-            size="sm"
-            color="red"
-            variant="transparent"
-            radius="xs"
+            size='sm'
+            color='red'
+            variant='transparent'
+            radius='xs'
             aria-label={`remove-search-group-${query.model}`}
             onClick={() => onRemove(query.model)}
           >
@@ -101,7 +101,7 @@ function QueryResultGroup({
         <Stack aria-label={`search-group-results-${query.model}`}>
           {query.results.results.map((result: any) => (
             <Anchor
-              underline="never"
+              underline='never'
               onClick={(event: any) =>
                 onResultClick(query.model, result.pk, event)
               }
@@ -231,7 +231,7 @@ export function SearchDrawer({
         },
         enabled:
           user.hasViewRole(UserRoles.purchase_order) &&
-          userSettings.isSet(`SEARCH_PREVIEW_SHOW_PURCHASE_ORDERS`)
+          userSettings.isSet('SEARCH_PREVIEW_SHOW_PURCHASE_ORDERS')
       },
       {
         model: ModelType.salesorder,
@@ -245,7 +245,7 @@ export function SearchDrawer({
         },
         enabled:
           user.hasViewRole(UserRoles.sales_order) &&
-          userSettings.isSet(`SEARCH_PREVIEW_SHOW_SALES_ORDERS`)
+          userSettings.isSet('SEARCH_PREVIEW_SHOW_SALES_ORDERS')
       },
       {
         model: ModelType.returnorder,
@@ -259,7 +259,7 @@ export function SearchDrawer({
         },
         enabled:
           user.hasViewRole(UserRoles.return_order) &&
-          userSettings.isSet(`SEARCH_PREVIEW_SHOW_RETURN_ORDERS`)
+          userSettings.isSet('SEARCH_PREVIEW_SHOW_RETURN_ORDERS')
       }
     ];
   }, [user, userSettings]);
@@ -279,7 +279,7 @@ export function SearchDrawer({
       return [];
     }
 
-    let params: any = {
+    const params: any = {
       offset: 0,
       limit: userSettings.getSetting('SEARCH_PREVIEW_RESULTS', '10'),
       search: searchText,
@@ -294,10 +294,8 @@ export function SearchDrawer({
 
     return api
       .post(apiUrl(ApiEndpoints.api_search), params)
-      .then(function (response) {
-        return response.data;
-      })
-      .catch(function (error) {
+      .then((response) => response.data)
+      .catch((error) => {
         console.error(error);
         return [];
       });
@@ -319,8 +317,8 @@ export function SearchDrawer({
         (query) => query.model in searchQuery.data
       );
 
-      for (let key in searchQuery.data) {
-        let query = queries.find((q) => q.model == key);
+      for (const key in searchQuery.data) {
+        const query = queries.find((q) => q.model == key);
         if (query) {
           query.results = searchQuery.data[key];
         }
@@ -361,37 +359,37 @@ export function SearchDrawer({
       closeDrawer();
     }
 
-    let url = targetModel.url_detail.replace(':pk', pk.toString());
+    const url = targetModel.url_detail.replace(':pk', pk.toString());
     navigateToLink(url, navigate, event);
   }
 
   return (
     <Drawer
       opened={opened}
-      size="xl"
+      size='xl'
       onClose={closeDrawer}
-      position="right"
+      position='right'
       withCloseButton={false}
       styles={{ header: { width: '100%' }, title: { width: '100%' } }}
       title={
-        <Group justify="space-between" gap={1} wrap="nowrap">
+        <Group justify='space-between' gap={1} wrap='nowrap'>
           <TextInput
-            aria-label="global-search-input"
+            aria-label='global-search-input'
             placeholder={t`Enter search text`}
             value={value}
             onChange={(event) => setValue(event.currentTarget.value)}
-            leftSection={<IconSearch size="0.8rem" />}
+            leftSection={<IconSearch size='0.8rem' />}
             rightSection={
               value && (
-                <IconBackspace color="red" onClick={() => setValue('')} />
+                <IconBackspace color='red' onClick={() => setValue('')} />
               )
             }
             styles={{ root: { width: '100%' } }}
           />
-          <Tooltip label={t`Refresh search results`} position="bottom-end">
+          <Tooltip label={t`Refresh search results`} position='bottom-end'>
             <ActionIcon
-              size="lg"
-              variant="transparent"
+              size='lg'
+              variant='transparent'
               onClick={() => searchQuery.refetch()}
             >
               <IconRefresh />
@@ -399,8 +397,8 @@ export function SearchDrawer({
           </Tooltip>
           <Menu>
             <Menu.Target>
-              <Tooltip label={t`Search Options`} position="bottom-end">
-                <ActionIcon size="lg" variant="transparent">
+              <Tooltip label={t`Search Options`} position='bottom-end'>
+                <ActionIcon size='lg' variant='transparent'>
                   <IconSettings />
                 </ActionIcon>
               </Tooltip>
@@ -430,14 +428,14 @@ export function SearchDrawer({
         </Group>
       }
     >
-      <Boundary label="SearchDrawer">
+      <Boundary label='SearchDrawer'>
         {searchQuery.isFetching && (
           <Center>
             <Loader />
           </Center>
         )}
         {!searchQuery.isFetching && !searchQuery.isError && (
-          <Stack gap="md">
+          <Stack gap='md'>
             {queryResults.map((query, idx) => (
               <QueryResultGroup
                 key={idx}
@@ -452,11 +450,11 @@ export function SearchDrawer({
         )}
         {searchQuery.isError && (
           <Alert
-            color="red"
-            radius="sm"
-            variant="light"
+            color='red'
+            radius='sm'
+            variant='light'
             title={t`Error`}
-            icon={<IconAlertCircle size="1rem" />}
+            icon={<IconAlertCircle size='1rem' />}
           >
             <Trans>An error occurred during search query</Trans>
           </Alert>
@@ -466,11 +464,11 @@ export function SearchDrawer({
           !searchQuery.isError &&
           queryResults.length == 0 && (
             <Alert
-              color="blue"
-              radius="sm"
-              variant="light"
+              color='blue'
+              radius='sm'
+              variant='light'
               title={t`No Results`}
-              icon={<IconSearch size="1rem" />}
+              icon={<IconSearch size='1rem' />}
             >
               <Trans>No results available for search query</Trans>
             </Alert>
diff --git a/src/frontend/src/components/nav/SettingsHeader.tsx b/src/frontend/src/components/nav/SettingsHeader.tsx
index 6d2bf95e5cd2..90d5580d533b 100644
--- a/src/frontend/src/components/nav/SettingsHeader.tsx
+++ b/src/frontend/src/components/nav/SettingsHeader.tsx
@@ -1,15 +1,7 @@
 import { t } from '@lingui/macro';
-import {
-  Anchor,
-  Group,
-  SegmentedControl,
-  Stack,
-  Text,
-  Title
-} from '@mantine/core';
-import { IconSwitch } from '@tabler/icons-react';
-import { ReactNode } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { Group, SegmentedControl, Stack, Text } from '@mantine/core';
+import type { ReactNode } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { useUserState } from '../../states/UserState';
 import { StylishText } from '../items/StylishText';
@@ -34,13 +26,13 @@ export function SettingsHeader({
   const navigate = useNavigate();
 
   return (
-    <Group justify="space-between">
-      <Stack gap="0" ml={'sm'}>
+    <Group justify='space-between'>
+      <Stack gap='0' ml={'sm'}>
         <Group>
-          <StylishText size="xl">{title}</StylishText>
-          {shorthand && <Text c="dimmed">({shorthand})</Text>}
+          <StylishText size='xl'>{title}</StylishText>
+          {shorthand && <Text c='dimmed'>({shorthand})</Text>}
         </Group>
-        <Group>{subtitle ? <Text c="dimmed">{subtitle}</Text> : null}</Group>
+        <Group>{subtitle ? <Text c='dimmed'>{subtitle}</Text> : null}</Group>
       </Stack>
       {user.isStaff() && (
         <SegmentedControl
diff --git a/src/frontend/src/components/panels/AttachmentPanel.tsx b/src/frontend/src/components/panels/AttachmentPanel.tsx
index 253b51dea71e..f47b0d05382d 100644
--- a/src/frontend/src/components/panels/AttachmentPanel.tsx
+++ b/src/frontend/src/components/panels/AttachmentPanel.tsx
@@ -2,9 +2,9 @@ import { t } from '@lingui/macro';
 import { Skeleton } from '@mantine/core';
 import { IconPaperclip } from '@tabler/icons-react';
 
-import { ModelType } from '../../enums/ModelType';
+import type { ModelType } from '../../enums/ModelType';
 import { AttachmentTable } from '../../tables/general/AttachmentTable';
-import { PanelType } from './Panel';
+import type { PanelType } from './Panel';
 
 export default function AttachmentPanel({
   model_type,
diff --git a/src/frontend/src/components/panels/NotesPanel.tsx b/src/frontend/src/components/panels/NotesPanel.tsx
index 0aee7ec4bb88..00388d1a09e1 100644
--- a/src/frontend/src/components/panels/NotesPanel.tsx
+++ b/src/frontend/src/components/panels/NotesPanel.tsx
@@ -1,12 +1,11 @@
 import { t } from '@lingui/macro';
 import { Skeleton } from '@mantine/core';
 import { IconNotes } from '@tabler/icons-react';
-import { useMemo } from 'react';
 
-import { ModelType } from '../../enums/ModelType';
+import type { ModelType } from '../../enums/ModelType';
 import { useUserState } from '../../states/UserState';
 import NotesEditor from '../editors/NotesEditor';
-import { PanelType } from './Panel';
+import type { PanelType } from './Panel';
 
 export default function NotesPanel({
   model_type,
diff --git a/src/frontend/src/components/panels/Panel.tsx b/src/frontend/src/components/panels/Panel.tsx
index d03602e2f734..824200ef0b3e 100644
--- a/src/frontend/src/components/panels/Panel.tsx
+++ b/src/frontend/src/components/panels/Panel.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 /**
  * Type used to specify a single panel in a panel group
diff --git a/src/frontend/src/components/panels/PanelGroup.tsx b/src/frontend/src/components/panels/PanelGroup.tsx
index 35c6d3f5fbf9..295bb036307f 100644
--- a/src/frontend/src/components/panels/PanelGroup.tsx
+++ b/src/frontend/src/components/panels/PanelGroup.tsx
@@ -10,7 +10,13 @@ import {
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarRightCollapse
 } from '@tabler/icons-react';
-import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from 'react';
 import {
   Navigate,
   Route,
@@ -20,7 +26,7 @@ import {
   useParams
 } from 'react-router-dom';
 
-import { ModelType } from '../../enums/ModelType';
+import type { ModelType } from '../../enums/ModelType';
 import { identifierString } from '../../functions/conversion';
 import { cancelEvent } from '../../functions/events';
 import { navigateToLink } from '../../functions/navigation';
@@ -28,7 +34,7 @@ import { usePluginPanels } from '../../hooks/UsePluginPanels';
 import { useLocalState } from '../../states/LocalState';
 import { Boundary } from '../Boundary';
 import { StylishText } from '../items/StylishText';
-import { PanelType } from '../panels/Panel';
+import type { PanelType } from '../panels/Panel';
 
 /**
  * Set of properties which define a panel group:
@@ -127,14 +133,14 @@ function BasePanelGroup({
 
   return (
     <Boundary label={`PanelGroup-${pageKey}`}>
-      <Paper p="sm" radius="xs" shadow="xs" aria-label={`${pageKey}`}>
+      <Paper p='sm' radius='xs' shadow='xs' aria-label={`${pageKey}`}>
         <Tabs
           value={currentPanel}
-          orientation="vertical"
+          orientation='vertical'
           keepMounted={false}
           aria-label={`panel-group-${pageKey}`}
         >
-          <Tabs.List justify="left" aria-label={`panel-tabs-${pageKey}`}>
+          <Tabs.List justify='left' aria-label={`panel-tabs-${pageKey}`}>
             {allPanels.map(
               (panel) =>
                 !panel.hidden && (
@@ -142,10 +148,10 @@ function BasePanelGroup({
                     label={panel.label ?? panel.name}
                     key={panel.name}
                     disabled={expanded}
-                    position="right"
+                    position='right'
                   >
                     <Tabs.Tab
-                      p="xs"
+                      p='xs'
                       key={`panel-label-${panel.name}`}
                       value={panel.name}
                       leftSection={panel.icon}
@@ -167,8 +173,8 @@ function BasePanelGroup({
                   paddingLeft: '10px'
                 }}
                 onClick={() => setExpanded(!expanded)}
-                variant="transparent"
-                size="md"
+                variant='transparent'
+                size='md'
               >
                 {expanded ? (
                   <IconLayoutSidebarLeftCollapse opacity={0.5} />
@@ -187,16 +193,16 @@ function BasePanelGroup({
                   aria-label={`nav-panel-${identifierString(
                     `${pageKey}-${panel.name}`
                   )}`}
-                  p="sm"
+                  p='sm'
                   style={{
                     overflowX: 'scroll',
                     width: '100%'
                   }}
                 >
-                  <Stack gap="md">
+                  <Stack gap='md'>
                     {panel.showHeadline !== false && (
                       <>
-                        <StylishText size="xl">{panel.label}</StylishText>
+                        <StylishText size='xl'>{panel.label}</StylishText>
                         <Divider />
                       </>
                     )}
@@ -246,7 +252,7 @@ export function PanelGroup(props: Readonly<PanelProps>) {
   return (
     <Routes>
       <Route index element={<IndexPanelComponent {...props} />} />
-      <Route path="/:panel/*" element={<BasePanelGroup {...props} />} />
+      <Route path='/:panel/*' element={<BasePanelGroup {...props} />} />
     </Routes>
   );
 }
diff --git a/src/frontend/src/components/plugins/PluginContext.tsx b/src/frontend/src/components/plugins/PluginContext.tsx
index cfff92f7387d..ec22514402c5 100644
--- a/src/frontend/src/components/plugins/PluginContext.tsx
+++ b/src/frontend/src/components/plugins/PluginContext.tsx
@@ -1,21 +1,21 @@
 import {
-  MantineColorScheme,
-  MantineTheme,
+  type MantineColorScheme,
+  type MantineTheme,
   useMantineColorScheme,
   useMantineTheme
 } from '@mantine/core';
-import { AxiosInstance } from 'axios';
+import type { AxiosInstance } from 'axios';
 import { useMemo } from 'react';
-import { NavigateFunction, useNavigate } from 'react-router-dom';
+import { type NavigateFunction, useNavigate } from 'react-router-dom';
 
 import { api } from '../../App';
 import { useLocalState } from '../../states/LocalState';
 import {
-  SettingsStateProps,
+  type SettingsStateProps,
   useGlobalSettingsState,
   useUserSettingsState
 } from '../../states/SettingsState';
-import { UserStateProps, useUserState } from '../../states/UserState';
+import { type UserStateProps, useUserState } from '../../states/UserState';
 
 /**
  * A set of properties which are passed to a plugin,
diff --git a/src/frontend/src/components/plugins/PluginDrawer.tsx b/src/frontend/src/components/plugins/PluginDrawer.tsx
index 02154c6225e9..36e0aaf6c460 100644
--- a/src/frontend/src/components/plugins/PluginDrawer.tsx
+++ b/src/frontend/src/components/plugins/PluginDrawer.tsx
@@ -9,7 +9,7 @@ import { useInstance } from '../../hooks/UseInstance';
 import { InfoItem } from '../items/InfoItem';
 import { StylishText } from '../items/StylishText';
 import { PluginSettingList } from '../settings/SettingList';
-import { PluginInterface } from './PluginInterface';
+import type { PluginInterface } from './PluginInterface';
 import PluginSettingsPanel from './PluginSettingsPanel';
 
 /**
@@ -43,7 +43,7 @@ export default function PluginDrawer({
   if (!pluginInstance.active) {
     return (
       <Alert
-        color="red"
+        color='red'
         title={t`Plugin Inactive`}
         icon={<IconExclamationCircle />}
       >
@@ -55,42 +55,42 @@ export default function PluginDrawer({
   return (
     <>
       <Accordion defaultValue={['plugin-details', 'plugin-settings']} multiple>
-        <Accordion.Item value="plugin-details">
+        <Accordion.Item value='plugin-details'>
           <Accordion.Control>
-            <StylishText size="lg">{t`Plugin Information`}</StylishText>
+            <StylishText size='lg'>{t`Plugin Information`}</StylishText>
           </Accordion.Control>
           <Accordion.Panel>
-            <Stack gap="xs">
+            <Stack gap='xs'>
               <Card withBorder>
-                <Stack gap="md">
-                  <Stack pos="relative" gap="xs">
+                <Stack gap='md'>
+                  <Stack pos='relative' gap='xs'>
                     <InfoItem
-                      type="text"
+                      type='text'
                       name={t`Name`}
                       value={pluginInstance?.name}
                     />
                     <InfoItem
-                      type="text"
+                      type='text'
                       name={t`Description`}
                       value={pluginInstance?.meta.description}
                     />
                     <InfoItem
-                      type="text"
+                      type='text'
                       name={t`Author`}
                       value={pluginInstance?.meta.author}
                     />
                     <InfoItem
-                      type="text"
+                      type='text'
                       name={t`Date`}
                       value={pluginInstance?.meta.pub_date}
                     />
                     <InfoItem
-                      type="text"
+                      type='text'
                       name={t`Version`}
                       value={pluginInstance?.meta.version}
                     />
                     <InfoItem
-                      type="boolean"
+                      type='boolean'
                       name={t`Active`}
                       value={pluginInstance?.active}
                     />
@@ -98,27 +98,27 @@ export default function PluginDrawer({
                 </Stack>
               </Card>
               <Card withBorder>
-                <Stack gap="md">
-                  <Stack pos="relative" gap="xs">
+                <Stack gap='md'>
+                  <Stack pos='relative' gap='xs'>
                     {pluginInstance?.is_package && (
                       <InfoItem
-                        type="text"
+                        type='text'
                         name={t`Package Name`}
                         value={pluginInstance?.package_name}
                       />
                     )}
                     <InfoItem
-                      type="text"
+                      type='text'
                       name={t`Installation Path`}
                       value={pluginInstance?.meta.package_path}
                     />
                     <InfoItem
-                      type="boolean"
+                      type='boolean'
                       name={t`Builtin`}
                       value={pluginInstance?.is_builtin}
                     />
                     <InfoItem
-                      type="boolean"
+                      type='boolean'
                       name={t`Package`}
                       value={pluginInstance?.is_package}
                     />
@@ -129,9 +129,9 @@ export default function PluginDrawer({
           </Accordion.Panel>
         </Accordion.Item>
         {hasSettings && (
-          <Accordion.Item value="plugin-settings">
+          <Accordion.Item value='plugin-settings'>
             <Accordion.Control>
-              <StylishText size="lg">{t`Plugin Settings`}</StylishText>
+              <StylishText size='lg'>{t`Plugin Settings`}</StylishText>
             </Accordion.Control>
             <Accordion.Panel>
               <Card withBorder>
@@ -141,9 +141,9 @@ export default function PluginDrawer({
           </Accordion.Item>
         )}
         {pluginAdmin?.source && (
-          <Accordion.Item value="plugin-custom">
+          <Accordion.Item value='plugin-custom'>
             <Accordion.Control>
-              <StylishText size="lg">{t`Plugin Configuration`}</StylishText>
+              <StylishText size='lg'>{t`Plugin Configuration`}</StylishText>
             </Accordion.Control>
             <Accordion.Panel>
               <Card withBorder>
diff --git a/src/frontend/src/components/plugins/PluginPanel.tsx b/src/frontend/src/components/plugins/PluginPanel.tsx
index 848cbcfd47fa..d11e64aca066 100644
--- a/src/frontend/src/components/plugins/PluginPanel.tsx
+++ b/src/frontend/src/components/plugins/PluginPanel.tsx
@@ -1,8 +1,8 @@
 import { Stack } from '@mantine/core';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
-import { InvenTreeContext } from './PluginContext';
-import { PluginUIFeature } from './PluginUIFeature';
+import type { InvenTreeContext } from './PluginContext';
+import type { PluginUIFeature } from './PluginUIFeature';
 import RemoteComponent from './RemoteComponent';
 
 /**
@@ -26,10 +26,10 @@ export default function PluginPanelContent({
   pluginContext: InvenTreeContext;
 }>): ReactNode {
   return (
-    <Stack gap="xs">
+    <Stack gap='xs'>
       <RemoteComponent
         source={pluginFeature.source}
-        defaultFunctionName="renderPanel"
+        defaultFunctionName='renderPanel'
         context={pluginContext}
       />
     </Stack>
diff --git a/src/frontend/src/components/plugins/PluginSettingsPanel.tsx b/src/frontend/src/components/plugins/PluginSettingsPanel.tsx
index ca6f971473f9..d107fe0e3525 100644
--- a/src/frontend/src/components/plugins/PluginSettingsPanel.tsx
+++ b/src/frontend/src/components/plugins/PluginSettingsPanel.tsx
@@ -26,7 +26,7 @@ export default function PluginSettingsPanel({
   return (
     <RemoteComponent
       source={pluginAdmin.source}
-      defaultFunctionName="renderPluginSettings"
+      defaultFunctionName='renderPluginSettings'
       context={{ ...pluginContext, context: pluginAdmin.context }}
     />
   );
diff --git a/src/frontend/src/components/plugins/PluginSource.tsx b/src/frontend/src/components/plugins/PluginSource.tsx
index 580496fbf6a7..71129dc8995f 100644
--- a/src/frontend/src/components/plugins/PluginSource.tsx
+++ b/src/frontend/src/components/plugins/PluginSource.tsx
@@ -45,7 +45,7 @@ export async function findExternalPluginFunction(
 
   const module = await loadExternalPluginSource(source);
 
-  if (module && module[functionName]) {
+  if (module?.[functionName]) {
     return module[functionName];
   }
 
diff --git a/src/frontend/src/components/plugins/PluginUIFeature.tsx b/src/frontend/src/components/plugins/PluginUIFeature.tsx
index 929e09c42ad2..15ecfee337e2 100644
--- a/src/frontend/src/components/plugins/PluginUIFeature.tsx
+++ b/src/frontend/src/components/plugins/PluginUIFeature.tsx
@@ -9,13 +9,13 @@ import {
   useState
 } from 'react';
 
-import { TemplateI } from '../../tables/settings/TemplateTable';
-import {
+import type { TemplateI } from '../../tables/settings/TemplateTable';
+import type {
   EditorComponent,
   PreviewAreaComponent,
   PreviewAreaRef
 } from '../editors/TemplateEditor/TemplateEditor';
-import {
+import type {
   PluginUIFuncWithoutInvenTreeContextType,
   TemplateEditorUIFeature,
   TemplatePreviewUIFeature
@@ -104,17 +104,17 @@ export const getPluginTemplateEditor = (
     }, []);
 
     return (
-      <Stack gap="xs" style={{ display: 'flex', flex: 1 }}>
+      <Stack gap='xs' style={{ display: 'flex', flex: 1 }}>
         {error && (
           <Alert
-            color="red"
+            color='red'
             title={t`Error Loading Plugin Editor`}
             icon={<IconExclamationCircle />}
           >
             <Text>{error}</Text>
           </Alert>
         )}
-        <div ref={elRef as any} style={{ display: 'flex', flex: 1 }}></div>
+        <div ref={elRef as any} style={{ display: 'flex', flex: 1 }} />
       </Stack>
     );
   }) as EditorComponent;
@@ -151,17 +151,17 @@ export const getPluginTemplatePreview = (
     }, []);
 
     return (
-      <Stack gap="xs" style={{ display: 'flex', flex: 1 }}>
+      <Stack gap='xs' style={{ display: 'flex', flex: 1 }}>
         {error && (
           <Alert
-            color="red"
+            color='red'
             title={t`Error Loading Plugin Preview`}
             icon={<IconExclamationCircle />}
           >
             <Text>{error}</Text>
           </Alert>
         )}
-        <div ref={elRef as any} style={{ display: 'flex', flex: 1 }}></div>
+        <div ref={elRef as any} style={{ display: 'flex', flex: 1 }} />
       </Stack>
     );
   }) as PreviewAreaComponent;
diff --git a/src/frontend/src/components/plugins/PluginUIFeatureTypes.ts b/src/frontend/src/components/plugins/PluginUIFeatureTypes.ts
index 45818228a6c4..ba1eedf499d3 100644
--- a/src/frontend/src/components/plugins/PluginUIFeatureTypes.ts
+++ b/src/frontend/src/components/plugins/PluginUIFeatureTypes.ts
@@ -1,9 +1,9 @@
-import { ModelType } from '../../enums/ModelType';
-import { InvenTreeIconType } from '../../functions/icons';
-import { TemplateI } from '../../tables/settings/TemplateTable';
-import { TemplateEditorProps } from '../editors/TemplateEditor/TemplateEditor';
-import { InvenTreeContext } from './PluginContext';
-import { PluginUIFeature } from './PluginUIFeature';
+import type { ModelType } from '../../enums/ModelType';
+import type { InvenTreeIconType } from '../../functions/icons';
+import type { TemplateI } from '../../tables/settings/TemplateTable';
+import type { TemplateEditorProps } from '../editors/TemplateEditor/TemplateEditor';
+import type { InvenTreeContext } from './PluginContext';
+import type { PluginUIFeature } from './PluginUIFeature';
 
 // #region  Type Helpers
 export type BaseUIFeature = {
@@ -45,7 +45,7 @@ export type TemplateEditorUIFeature = {
     }) => void;
     template: TemplateI;
   };
-  featureReturnType: void;
+  featureReturnType: undefined;
 };
 
 export type TemplatePreviewUIFeature = {
@@ -71,5 +71,5 @@ export type TemplatePreviewUIFeature = {
       ) => void | Promise<void>;
     }) => void;
   };
-  featureReturnType: void;
+  featureReturnType: undefined;
 };
diff --git a/src/frontend/src/components/plugins/RemoteComponent.tsx b/src/frontend/src/components/plugins/RemoteComponent.tsx
index 338110eb5bb6..0a16e60b244a 100644
--- a/src/frontend/src/components/plugins/RemoteComponent.tsx
+++ b/src/frontend/src/components/plugins/RemoteComponent.tsx
@@ -5,7 +5,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { identifierString } from '../../functions/conversion';
 import { Boundary } from '../Boundary';
-import { InvenTreeContext } from './PluginContext';
+import type { InvenTreeContext } from './PluginContext';
 import { findExternalPluginFunction } from './PluginSource';
 
 /**
@@ -67,7 +67,7 @@ export default function RemoteComponent({
       });
     } else {
       setRenderingError(
-        t`Invalid source or function name` + ` - ${sourceFile}:${functionName}`
+        `${t`Invalid source or function name`} - ${sourceFile}:${functionName}`
       );
     }
   };
@@ -84,10 +84,10 @@ export default function RemoteComponent({
           `RemoteComponent-${sourceFile}-${functionName}`
         )}
       >
-        <Stack gap="xs">
+        <Stack gap='xs'>
           {renderingError && (
             <Alert
-              color="red"
+              color='red'
               title={t`Error Loading Content`}
               icon={<IconExclamationCircle />}
             >
@@ -97,7 +97,7 @@ export default function RemoteComponent({
               </Text>
             </Alert>
           )}
-          <div ref={componentRef as any}></div>
+          <div ref={componentRef as any} />
         </Stack>
       </Boundary>
     </>
diff --git a/src/frontend/src/components/render/Build.tsx b/src/frontend/src/components/render/Build.tsx
index 5a8687ba7e7c..04ce1e1bb686 100644
--- a/src/frontend/src/components/render/Build.tsx
+++ b/src/frontend/src/components/render/Build.tsx
@@ -1,8 +1,8 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import { ModelType } from '../../enums/ModelType';
 import { getDetailUrl } from '../../functions/urls';
-import { InstanceRenderInterface, RenderInlineModel } from './Instance';
+import { type InstanceRenderInterface, RenderInlineModel } from './Instance';
 import { StatusRenderer } from './StatusRenderer';
 
 /**
diff --git a/src/frontend/src/components/render/Company.tsx b/src/frontend/src/components/render/Company.tsx
index 9b472bac2f58..d0d1c6c47ad2 100644
--- a/src/frontend/src/components/render/Company.tsx
+++ b/src/frontend/src/components/render/Company.tsx
@@ -1,9 +1,9 @@
 import { Text } from '@mantine/core';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import { ModelType } from '../../enums/ModelType';
 import { getDetailUrl } from '../../functions/urls';
-import { InstanceRenderInterface, RenderInlineModel } from './Instance';
+import { type InstanceRenderInterface, RenderInlineModel } from './Instance';
 
 /**
  * Inline rendering of a single Address instance
@@ -11,7 +11,7 @@ import { InstanceRenderInterface, RenderInlineModel } from './Instance';
 export function RenderAddress({
   instance
 }: Readonly<InstanceRenderInterface>): ReactNode {
-  let text = [
+  const text = [
     instance.country,
     instance.postal_code,
     instance.postal_city,
@@ -72,7 +72,7 @@ export function RenderSupplierPart(
       secondary={instance.SKU}
       image={part?.thumbnail ?? part?.image}
       suffix={
-        part.full_name ? <Text size="sm">{part.full_name}</Text> : undefined
+        part.full_name ? <Text size='sm'>{part.full_name}</Text> : undefined
       }
       url={
         props.link
@@ -99,7 +99,7 @@ export function RenderManufacturerPart(
       primary={manufacturer.name}
       secondary={instance.MPN}
       suffix={
-        part.full_name ? <Text size="sm">{part.full_name}</Text> : undefined
+        part.full_name ? <Text size='sm'>{part.full_name}</Text> : undefined
       }
       image={manufacturer?.thumnbnail ?? manufacturer.image}
       url={
diff --git a/src/frontend/src/components/render/Generic.tsx b/src/frontend/src/components/render/Generic.tsx
index 59a64236f1c3..1b5f412e768c 100644
--- a/src/frontend/src/components/render/Generic.tsx
+++ b/src/frontend/src/components/render/Generic.tsx
@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
-import { InstanceRenderInterface, RenderInlineModel } from './Instance';
+import { type InstanceRenderInterface, RenderInlineModel } from './Instance';
 
 export function RenderProjectCode({
   instance
diff --git a/src/frontend/src/components/render/Instance.tsx b/src/frontend/src/components/render/Instance.tsx
index 95672057d887..8e95b604a8ba 100644
--- a/src/frontend/src/components/render/Instance.tsx
+++ b/src/frontend/src/components/render/Instance.tsx
@@ -1,7 +1,7 @@
 import { t } from '@lingui/macro';
 import { Alert, Anchor, Group, Skeleton, Space, Text } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
-import { ReactNode, useCallback } from 'react';
+import { type ReactNode, useCallback } from 'react';
 
 import { api } from '../../App';
 import { ModelType } from '../../enums/ModelType';
@@ -192,18 +192,18 @@ export function RenderInlineModel({
   );
 
   return (
-    <Group gap="xs" justify="space-between" wrap="nowrap" title={tooltip}>
-      <Group gap="xs" justify="left" wrap="nowrap">
+    <Group gap='xs' justify='space-between' wrap='nowrap' title={tooltip}>
+      <Group gap='xs' justify='left' wrap='nowrap'>
         {prefix}
         {image && <Thumbnail src={image} size={18} />}
         {url ? (
           <Anchor href={url} onClick={(event: any) => onClick(event)}>
-            <Text size="sm">{primary}</Text>
+            <Text size='sm'>{primary}</Text>
           </Anchor>
         ) : (
-          <Text size="sm">{primary}</Text>
+          <Text size='sm'>{primary}</Text>
         )}
-        {showSecondary && secondary && <Text size="xs">{secondary}</Text>}
+        {showSecondary && secondary && <Text size='xs'>{secondary}</Text>}
       </Group>
       {suffix && (
         <>
@@ -220,9 +220,5 @@ export function UnknownRenderer({
 }: Readonly<{
   model: ModelType | undefined;
 }>): ReactNode {
-  return (
-    <Alert color="red" title={t`Unknown model: ${model}`}>
-      <></>
-    </Alert>
-  );
+  return <Alert color='red' title={t`Unknown model: ${model}`} />;
 }
diff --git a/src/frontend/src/components/render/InstanceFromUrl.tsx b/src/frontend/src/components/render/InstanceFromUrl.tsx
index 845e4941453d..c9a9c8e23ac5 100644
--- a/src/frontend/src/components/render/InstanceFromUrl.tsx
+++ b/src/frontend/src/components/render/InstanceFromUrl.tsx
@@ -2,7 +2,7 @@ import { Loader } from '@mantine/core';
 import { useMemo, useState } from 'react';
 
 import { api } from '../../App';
-import { ModelType } from '../../enums/ModelType';
+import type { ModelType } from '../../enums/ModelType';
 import { RenderInstance } from './Instance';
 
 /**
diff --git a/src/frontend/src/components/render/ModelType.tsx b/src/frontend/src/components/render/ModelType.tsx
index 149e4d58ffa2..ea802ac17337 100644
--- a/src/frontend/src/components/render/ModelType.tsx
+++ b/src/frontend/src/components/render/ModelType.tsx
@@ -1,8 +1,8 @@
 import { t } from '@lingui/macro';
 
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
-import { ModelType } from '../../enums/ModelType';
-import { InvenTreeIconType } from '../../functions/icons';
+import type { ModelType } from '../../enums/ModelType';
+import type { InvenTreeIconType } from '../../functions/icons';
 
 export interface ModelInformationInterface {
   label: string;
diff --git a/src/frontend/src/components/render/Order.tsx b/src/frontend/src/components/render/Order.tsx
index 61fcf53edc9a..91012d92cf1c 100644
--- a/src/frontend/src/components/render/Order.tsx
+++ b/src/frontend/src/components/render/Order.tsx
@@ -1,9 +1,9 @@
 import { t } from '@lingui/macro';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import { ModelType } from '../../enums/ModelType';
 import { getDetailUrl } from '../../functions/urls';
-import { InstanceRenderInterface, RenderInlineModel } from './Instance';
+import { type InstanceRenderInterface, RenderInlineModel } from './Instance';
 import { StatusRenderer } from './StatusRenderer';
 
 /**
@@ -113,12 +113,12 @@ export function RenderSalesOrderShipment({
 }: Readonly<{
   instance: any;
 }>): ReactNode {
-  let order = instance.order_detail || {};
+  const order = instance.order_detail || {};
 
   return (
     <RenderInlineModel
       primary={order.reference}
-      secondary={t`Shipment` + ` ${instance.reference}`}
+      secondary={`${t`Shipment`} ${instance.reference}`}
     />
   );
 }
diff --git a/src/frontend/src/components/render/Part.tsx b/src/frontend/src/components/render/Part.tsx
index a7f404e48ae0..a5bb08bd5e29 100644
--- a/src/frontend/src/components/render/Part.tsx
+++ b/src/frontend/src/components/render/Part.tsx
@@ -1,11 +1,11 @@
 import { t } from '@lingui/macro';
 import { Badge } from '@mantine/core';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import { ModelType } from '../../enums/ModelType';
 import { getDetailUrl } from '../../functions/urls';
 import { ApiIcon } from '../items/ApiIcon';
-import { InstanceRenderInterface, RenderInlineModel } from './Instance';
+import { type InstanceRenderInterface, RenderInlineModel } from './Instance';
 
 /**
  * Inline rendering of a single Part instance
@@ -18,7 +18,7 @@ export function RenderPart(
   let badgeText = '';
   let badgeColor = '';
 
-  let stock = instance.total_in_stock;
+  const stock = instance.total_in_stock;
 
   if (instance.active == false) {
     badgeColor = 'red';
@@ -27,12 +27,12 @@ export function RenderPart(
     badgeColor = 'orange';
     badgeText = t`No stock`;
   } else {
-    badgeText = t`Stock` + `: ${stock}`;
+    badgeText = `${t`Stock`}: ${stock}`;
     badgeColor = instance.minimum_stock > stock ? 'yellow' : 'green';
   }
 
   const badge = (
-    <Badge size="xs" color={badgeColor}>
+    <Badge size='xs' color={badgeColor}>
       {badgeText}
     </Badge>
   );
diff --git a/src/frontend/src/components/render/Plugin.tsx b/src/frontend/src/components/render/Plugin.tsx
index 59770d00dd2a..9b0f5d73e631 100644
--- a/src/frontend/src/components/render/Plugin.tsx
+++ b/src/frontend/src/components/render/Plugin.tsx
@@ -1,6 +1,6 @@
 import { t } from '@lingui/macro';
 import { Badge } from '@mantine/core';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import { RenderInlineModel } from './Instance';
 
@@ -14,7 +14,7 @@ export function RenderPlugin({
       primary={instance.name}
       secondary={instance.meta?.description}
       suffix={
-        !instance.active && <Badge size="sm" color="red">{t`Inactive`}</Badge>
+        !instance.active && <Badge size='sm' color='red'>{t`Inactive`}</Badge>
       }
     />
   );
diff --git a/src/frontend/src/components/render/Report.tsx b/src/frontend/src/components/render/Report.tsx
index 20980439c18e..d380bad5d6db 100644
--- a/src/frontend/src/components/render/Report.tsx
+++ b/src/frontend/src/components/render/Report.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import { RenderInlineModel } from './Instance';
 
diff --git a/src/frontend/src/components/render/StatusRenderer.tsx b/src/frontend/src/components/render/StatusRenderer.tsx
index e9cfb806b28d..7fc1def3eee0 100644
--- a/src/frontend/src/components/render/StatusRenderer.tsx
+++ b/src/frontend/src/components/render/StatusRenderer.tsx
@@ -1,7 +1,7 @@
-import { Badge, Center, MantineSize } from '@mantine/core';
+import { Badge, Center, type MantineSize } from '@mantine/core';
 
 import { colorMap } from '../../defaults/backendMappings';
-import { ModelType } from '../../enums/ModelType';
+import type { ModelType } from '../../enums/ModelType';
 import { resolveItem } from '../../functions/conversion';
 import { useGlobalStatusState } from '../../states/StatusState';
 
@@ -33,8 +33,8 @@ function renderStatusLabel(
   let color = null;
 
   // Find the entry which matches the provided key
-  for (let name in codes) {
-    let entry = codes[name];
+  for (const name in codes) {
+    const entry = codes[name];
 
     if (entry.key == key) {
       text = entry.label;
@@ -59,7 +59,7 @@ function renderStatusLabel(
   }
 
   return (
-    <Badge color={color} variant="filled" size={size}>
+    <Badge color={color} variant='filled' size={size}>
       {text}
     </Badge>
   );
@@ -96,8 +96,8 @@ export function getStatusCodeName(
     return null;
   }
 
-  for (let name in statusCodes) {
-    let entry = statusCodes[name];
+  for (const name in statusCodes) {
+    const entry = statusCodes[name];
 
     if (entry.key == key) {
       return entry.name;
diff --git a/src/frontend/src/components/render/Stock.tsx b/src/frontend/src/components/render/Stock.tsx
index 8c0c75220f1c..99d6bad36390 100644
--- a/src/frontend/src/components/render/Stock.tsx
+++ b/src/frontend/src/components/render/Stock.tsx
@@ -1,11 +1,11 @@
 import { t } from '@lingui/macro';
 import { Text } from '@mantine/core';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import { ModelType } from '../../enums/ModelType';
 import { getDetailUrl } from '../../functions/urls';
 import { ApiIcon } from '../items/ApiIcon';
-import { InstanceRenderInterface, RenderInlineModel } from './Instance';
+import { type InstanceRenderInterface, RenderInlineModel } from './Instance';
 
 /**
  * Inline rendering of a single StockLocation instance
@@ -46,7 +46,7 @@ export function RenderStockLocationType({
     <RenderInlineModel
       primary={instance.name}
       prefix={instance.icon && <ApiIcon name={instance.icon} />}
-      secondary={instance.description + ` (${instance.location_count})`}
+      secondary={`${instance.description} (${instance.location_count})`}
     />
   );
 }
@@ -58,16 +58,16 @@ export function RenderStockItem(
   let quantity_string = '';
 
   if (instance?.serial !== null && instance?.serial !== undefined) {
-    quantity_string += t`Serial Number` + `: ${instance.serial}`;
+    quantity_string += `${t`Serial Number`}: ${instance.serial}`;
   } else if (instance?.quantity) {
-    quantity_string = t`Quantity` + `: ${instance.quantity}`;
+    quantity_string = `${t`Quantity`}: ${instance.quantity}`;
   }
 
   return (
     <RenderInlineModel
       {...props}
       primary={instance.part_detail?.full_name}
-      suffix={<Text size="sm">{quantity_string}</Text>}
+      suffix={<Text size='sm'>{quantity_string}</Text>}
       image={instance.part_detail?.thumbnail || instance.part_detail?.image}
       url={
         props.link ? getDetailUrl(ModelType.stockitem, instance.pk) : undefined
diff --git a/src/frontend/src/components/render/User.tsx b/src/frontend/src/components/render/User.tsx
index b969e203e16d..313b1c6b84d8 100644
--- a/src/frontend/src/components/render/User.tsx
+++ b/src/frontend/src/components/render/User.tsx
@@ -1,7 +1,7 @@
 import { IconUser, IconUsersGroup } from '@tabler/icons-react';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
-import { InstanceRenderInterface, RenderInlineModel } from './Instance';
+import { type InstanceRenderInterface, RenderInlineModel } from './Instance';
 
 export function RenderOwner({
   instance
diff --git a/src/frontend/src/components/settings/FactCollection.tsx b/src/frontend/src/components/settings/FactCollection.tsx
index 5ba9dbc39c61..633a92c6d4bd 100644
--- a/src/frontend/src/components/settings/FactCollection.tsx
+++ b/src/frontend/src/components/settings/FactCollection.tsx
@@ -10,7 +10,7 @@ export function FactCollection({
   minItems?: number;
 }>) {
   return (
-    <SimpleGrid cols={minItems} spacing="xs">
+    <SimpleGrid cols={minItems} spacing='xs'>
       {items.map((item, index) => (
         <FactItem
           key={`${index}-${item.value}`}
diff --git a/src/frontend/src/components/settings/FactItem.tsx b/src/frontend/src/components/settings/FactItem.tsx
index a4a69cf92663..6daa2a306583 100644
--- a/src/frontend/src/components/settings/FactItem.tsx
+++ b/src/frontend/src/components/settings/FactItem.tsx
@@ -7,9 +7,9 @@ export function FactItem({
   value
 }: Readonly<{ title: string; value: number }>) {
   return (
-    <Paper p="md" shadow="xs">
-      <Stack gap="xs">
-        <StylishText size="md">{title}</StylishText>
+    <Paper p='md' shadow='xs'>
+      <Stack gap='xs'>
+        <StylishText size='md'>{title}</StylishText>
         <Text>{value}</Text>
       </Stack>
     </Paper>
diff --git a/src/frontend/src/components/settings/SettingItem.tsx b/src/frontend/src/components/settings/SettingItem.tsx
index b6aba71b4ccc..b6bc866ad30e 100644
--- a/src/frontend/src/components/settings/SettingItem.tsx
+++ b/src/frontend/src/components/settings/SettingItem.tsx
@@ -11,7 +11,7 @@ import {
 import { IconEdit } from '@tabler/icons-react';
 import { useMemo } from 'react';
 
-import { Setting } from '../../states/states';
+import type { Setting } from '../../states/states';
 import { vars } from '../../theme';
 import { Boundary } from '../Boundary';
 
@@ -48,8 +48,8 @@ function SettingValue({
     case 'boolean':
       return (
         <Switch
-          size="sm"
-          radius="lg"
+          size='sm'
+          radius='lg'
           checked={setting.value.toLowerCase() == 'true'}
           onChange={(event) => onToggle(setting, event.currentTarget.checked)}
           style={{
@@ -59,14 +59,14 @@ function SettingValue({
       );
     default:
       return valueText ? (
-        <Group gap="xs" justify="right">
+        <Group gap='xs' justify='right'>
           <Space />
-          <Button variant="subtle" onClick={() => onEdit(setting)}>
+          <Button variant='subtle' onClick={() => onEdit(setting)}>
             {valueText}
           </Button>
         </Group>
       ) : (
-        <Button variant="subtle" onClick={() => onEdit(setting)}>
+        <Button variant='subtle' onClick={() => onEdit(setting)}>
           <IconEdit />
         </Button>
       );
@@ -97,13 +97,13 @@ export function SettingItem({
 
   return (
     <Paper style={style}>
-      <Group justify="space-between" p="3">
-        <Stack gap="2" p="4px">
+      <Group justify='space-between' p='3'>
+        <Stack gap='2' p='4px'>
           <Text>
             {setting.name}
             {setting.required ? ' *' : ''}
           </Text>
-          <Text size="xs">{setting.description}</Text>
+          <Text size='xs'>{setting.description}</Text>
         </Stack>
         <Boundary label={`setting-value-${setting.key}`}>
           <SettingValue setting={setting} onEdit={onEdit} onToggle={onToggle} />
diff --git a/src/frontend/src/components/settings/SettingList.tsx b/src/frontend/src/components/settings/SettingList.tsx
index 08492d9142bd..e4a8893f6b73 100644
--- a/src/frontend/src/components/settings/SettingList.tsx
+++ b/src/frontend/src/components/settings/SettingList.tsx
@@ -11,17 +11,17 @@ import React, {
 import { useStore } from 'zustand';
 
 import { api } from '../../App';
-import { ModelType } from '../../enums/ModelType';
+import type { ModelType } from '../../enums/ModelType';
 import { useEditApiFormModal } from '../../hooks/UseForm';
 import { apiUrl } from '../../states/ApiState';
 import {
-  SettingsStateProps,
+  type SettingsStateProps,
   createMachineSettingsState,
   createPluginSettingsState,
   useGlobalSettingsState,
   useUserSettingsState
 } from '../../states/SettingsState';
-import { Setting } from '../../states/states';
+import type { Setting } from '../../states/states';
 import { SettingItem } from './SettingItem';
 
 /**
@@ -130,7 +130,7 @@ export function SettingList({
   return (
     <>
       {editSettingModal.modal}
-      <Stack gap="xs">
+      <Stack gap='xs'>
         {(keys || allKeys).map((key, i) => {
           const setting = settingsState?.settings?.find(
             (s: any) => s.key === key
@@ -150,7 +150,7 @@ export function SettingList({
                   onToggle={onValueToggle}
                 />
               ) : (
-                <Text size="sm" style={{ fontStyle: 'italic' }} c="red">
+                <Text size='sm' style={{ fontStyle: 'italic' }} c='red'>
                   Setting {key} not found
                 </Text>
               )}
diff --git a/src/frontend/src/contexts/LanguageContext.tsx b/src/frontend/src/contexts/LanguageContext.tsx
index 0ccf1b815afb..adc8c8a2b4f0 100644
--- a/src/frontend/src/contexts/LanguageContext.tsx
+++ b/src/frontend/src/contexts/LanguageContext.tsx
@@ -85,7 +85,7 @@ export function LanguageContext({
          * - Server default locale
          * - en-us (backup)
          */
-        let locales: (string | undefined)[] = [];
+        const locales: (string | undefined)[] = [];
 
         if (language != 'pseudo-LOCALE') {
           locales.push(language);
@@ -100,7 +100,7 @@ export function LanguageContext({
         }
 
         // Ensure that the locales are properly formatted
-        let new_locales = locales
+        const new_locales = locales
           .map((locale) => locale?.replaceAll('_', '-').toLowerCase())
           .join(', ');
 
diff --git a/src/frontend/src/contexts/colorSchema.tsx b/src/frontend/src/contexts/colorSchema.tsx
index 4bc6311584c4..131e9da8e4a7 100644
--- a/src/frontend/src/contexts/colorSchema.tsx
+++ b/src/frontend/src/contexts/colorSchema.tsx
@@ -1,6 +1,6 @@
 import {
-  MantineColorScheme,
-  MantineColorSchemeManager,
+  type MantineColorScheme,
+  type MantineColorSchemeManager,
   isMantineColorScheme
 } from '@mantine/core';
 
diff --git a/src/frontend/src/defaults/actions.tsx b/src/frontend/src/defaults/actions.tsx
index 68997f0e1a59..e762f9800485 100644
--- a/src/frontend/src/defaults/actions.tsx
+++ b/src/frontend/src/defaults/actions.tsx
@@ -1,7 +1,7 @@
 import { t } from '@lingui/macro';
 import type { SpotlightActionData } from '@mantine/spotlight';
-import { IconHome, IconLink, IconPointer } from '@tabler/icons-react';
-import { NavigateFunction } from 'react-router-dom';
+import { IconLink, IconPointer } from '@tabler/icons-react';
+import type { NavigateFunction } from 'react-router-dom';
 
 import { useLocalState } from '../states/LocalState';
 import { useUserState } from '../states/UserState';
@@ -17,42 +17,44 @@ export function getActions(navigate: NavigateFunction) {
       label: t`Dashboard`,
       description: t`Go to the InvenTree dashboard`,
       onClick: () => {}, // navigate(menuItems.dashboard.link),
-      leftSection: <IconLink size="1.2rem" />
+      leftSection: <IconLink size='1.2rem' />
     },
     {
       id: 'documentation',
       label: t`Documentation`,
       description: t`Visit the documentation to learn more about InvenTree`,
-      onClick: () => (window.location.href = docLinks.faq),
-      leftSection: <IconLink size="1.2rem" />
+      onClick: () => {
+        window.location.href = docLinks.faq;
+      },
+      leftSection: <IconLink size='1.2rem' />
     },
     {
       id: 'about',
       label: t`About InvenTree`,
       description: t`About the InvenTree org`,
       onClick: () => aboutInvenTree(),
-      leftSection: <IconLink size="1.2rem" />
+      leftSection: <IconLink size='1.2rem' />
     },
     {
       id: 'server-info',
       label: t`Server Information`,
       description: t`About this Inventree instance`,
       onClick: () => serverInfo(),
-      leftSection: <IconLink size="1.2rem" />
+      leftSection: <IconLink size='1.2rem' />
     },
     {
       id: 'license-info',
       label: t`License Information`,
       description: t`Licenses for dependencies of the service`,
       onClick: () => licenseInfo(),
-      leftSection: <IconLink size="1.2rem" />
+      leftSection: <IconLink size='1.2rem' />
     },
     {
       id: 'navigation',
       label: t`Open Navigation`,
       description: t`Open the main navigation menu`,
       onClick: () => setNavigationOpen(true),
-      leftSection: <IconPointer size="1.2rem" />
+      leftSection: <IconPointer size='1.2rem' />
     }
   ];
 
@@ -63,7 +65,7 @@ export function getActions(navigate: NavigateFunction) {
       label: t`Admin Center`,
       description: t`Go to the Admin Center`,
       onClick: () => {}, /// navigate(menuItems['settings-admin'].link),}
-      leftSection: <IconLink size="1.2rem" />
+      leftSection: <IconLink size='1.2rem' />
     });
 
   return actions;
diff --git a/src/frontend/src/defaults/defaultHostList.tsx b/src/frontend/src/defaults/defaultHostList.tsx
index b0f5fbd77fae..467bcb6f25a0 100644
--- a/src/frontend/src/defaults/defaultHostList.tsx
+++ b/src/frontend/src/defaults/defaultHostList.tsx
@@ -1,4 +1,4 @@
-import { HostList } from '../states/states';
+import type { HostList } from '../states/states';
 
 export const defaultHostList: HostList = window.INVENTREE_SETTINGS.server_list;
 export const defaultHostKey = window.INVENTREE_SETTINGS.default_server;
diff --git a/src/frontend/src/defaults/defaults.tsx b/src/frontend/src/defaults/defaults.tsx
index 00f2286eb8a5..14227fb31e43 100644
--- a/src/frontend/src/defaults/defaults.tsx
+++ b/src/frontend/src/defaults/defaults.tsx
@@ -1,4 +1,4 @@
-import { MantineSize } from '@mantine/core';
+import type { MantineSize } from '@mantine/core';
 
 export const emptyServerAPI = {
   server: null,
diff --git a/src/frontend/src/defaults/formatters.tsx b/src/frontend/src/defaults/formatters.tsx
index 0f671a258586..63dbf510fe20 100644
--- a/src/frontend/src/defaults/formatters.tsx
+++ b/src/frontend/src/defaults/formatters.tsx
@@ -1,4 +1,4 @@
-import { MantineSize } from '@mantine/core';
+import type { MantineSize } from '@mantine/core';
 import dayjs from 'dayjs';
 
 import {
@@ -24,13 +24,13 @@ export function formatDecimal(
   value: number | null | undefined,
   options: FormatDecmimalOptionsInterface = {}
 ) {
-  let locale = options.locale || navigator.language || 'en-US';
+  const locale = options.locale || navigator.language || 'en-US';
 
   if (value === null || value === undefined) {
     return value;
   }
 
-  let formatter = new Intl.NumberFormat(locale, {
+  const formatter = new Intl.NumberFormat(locale, {
     style: 'decimal',
     maximumFractionDigits: options.digits ?? 6,
     minimumFractionDigits: options.minDigits ?? 0
@@ -55,9 +55,9 @@ export function formatCurrency(
     return null;
   }
 
-  value = parseFloat(value.toString());
+  value = Number.parseFloat(value.toString());
 
-  if (isNaN(value) || !isFinite(value)) {
+  if (Number.isNaN(value) || !Number.isFinite(value)) {
     return null;
   }
 
@@ -72,13 +72,13 @@ export function formatCurrency(
   minDigits = Number(minDigits);
 
   // Extract default currency information
-  let currency =
+  const currency =
     options.currency || global_settings.INVENTREE_DEFAULT_CURRENCY || 'USD';
 
   // Extract locale information
-  let locale = options.locale || navigator.language || 'en-US';
+  const locale = options.locale || navigator.language || 'en-US';
 
-  let formatter = new Intl.NumberFormat(locale, {
+  const formatter = new Intl.NumberFormat(locale, {
     style: 'currency',
     currency: currency,
     maximumFractionDigits: Math.max(minDigits, maxDigits),
diff --git a/src/frontend/src/defaults/links.tsx b/src/frontend/src/defaults/links.tsx
index 932c1d7f2d7c..45336d22e502 100644
--- a/src/frontend/src/defaults/links.tsx
+++ b/src/frontend/src/defaults/links.tsx
@@ -1,7 +1,7 @@
 import { Trans, t } from '@lingui/macro';
 import { openContextModal } from '@mantine/modals';
 
-import { MenuLinkItem } from '../components/items/MenuLinks';
+import type { MenuLinkItem } from '../components/items/MenuLinks';
 import { StylishText } from '../components/items/StylishText';
 import { UserRoles } from '../enums/Roles';
 
@@ -75,7 +75,7 @@ export function serverInfo() {
   return openContextModal({
     modal: 'info',
     title: (
-      <StylishText size="xl">
+      <StylishText size='xl'>
         <Trans>System Information</Trans>
       </StylishText>
     ),
@@ -88,7 +88,7 @@ export function aboutInvenTree() {
   return openContextModal({
     modal: 'about',
     title: (
-      <StylishText size="xl">
+      <StylishText size='xl'>
         <Trans>About InvenTree</Trans>
       </StylishText>
     ),
@@ -101,7 +101,7 @@ export function licenseInfo() {
   return openContextModal({
     modal: 'license',
     title: (
-      <StylishText size="xl">
+      <StylishText size='xl'>
         <Trans>License Information</Trans>
       </StylishText>
     ),
diff --git a/src/frontend/src/forms/BomForms.tsx b/src/frontend/src/forms/BomForms.tsx
index 5533cfcd7663..18c43bc801fc 100644
--- a/src/frontend/src/forms/BomForms.tsx
+++ b/src/frontend/src/forms/BomForms.tsx
@@ -1,4 +1,4 @@
-import { ApiFormFieldSet } from '../components/forms/fields/ApiFormField';
+import type { ApiFormFieldSet } from '../components/forms/fields/ApiFormField';
 
 /**
  * Field set for BomItem form
diff --git a/src/frontend/src/forms/BuildForms.tsx b/src/frontend/src/forms/BuildForms.tsx
index f0c52403c307..8beffe254719 100644
--- a/src/frontend/src/forms/BuildForms.tsx
+++ b/src/frontend/src/forms/BuildForms.tsx
@@ -13,13 +13,13 @@ import { useEffect, useMemo, useState } from 'react';
 
 import RemoveRowButton from '../components/buttons/RemoveRowButton';
 import { StandaloneField } from '../components/forms/StandaloneField';
-import {
+import type {
   ApiFormFieldSet,
   ApiFormFieldType
 } from '../components/forms/fields/ApiFormField';
 import {
   TableFieldErrorWrapper,
-  TableFieldRowProps
+  type TableFieldRowProps
 } from '../components/forms/fields/TableField';
 import { ProgressBar } from '../components/items/ProgressBar';
 import { StatusRenderer } from '../components/render/StatusRenderer';
@@ -55,7 +55,7 @@ export function useBuildOrderFields({
   const globalSettings = useGlobalSettingsState();
 
   return useMemo(() => {
-    let fields: ApiFormFieldSet = {
+    const fields: ApiFormFieldSet = {
       reference: {},
       part: {
         disabled: !create,
@@ -154,8 +154,8 @@ export function useBuildOrderOutputFields({
   const [quantity, setQuantity] = useState<number>(0);
 
   useEffect(() => {
-    let build_quantity = build.quantity ?? 0;
-    let build_complete = build.completed ?? 0;
+    const build_quantity = build.quantity ?? 0;
+    const build_complete = build.completed ?? 0;
 
     setQuantity(Math.max(0, build_quantity - build_complete));
   }, [build]);
@@ -203,7 +203,7 @@ function BuildOutputFormRow({
     if (record.serial) {
       return `# ${record.serial}`;
     } else {
-      return t`Quantity` + `: ${record.quantity}`;
+      return `${t`Quantity`}: ${record.quantity}`;
     }
   }, [record]);
 
@@ -214,13 +214,16 @@ function BuildOutputFormRow({
           <PartColumn part={record.part_detail} />
         </Table.Td>
         <Table.Td>
-          <TableFieldErrorWrapper props={props} errorKey="output">
+          <TableFieldErrorWrapper props={props} errorKey='output'>
             {serial}
           </TableFieldErrorWrapper>
         </Table.Td>
         <Table.Td>{record.batch}</Table.Td>
         <Table.Td>
-          <StatusRenderer status={record.status} type={ModelType.stockitem} />{' '}
+          <StatusRenderer
+            status={record.status}
+            type={ModelType.stockitem}
+          />{' '}
         </Table.Td>
         <Table.Td style={{ width: '1%', whiteSpace: 'nowrap' }}>
           <RemoveRowButton onClick={() => props.removeFn(props.idx)} />
@@ -428,7 +431,7 @@ function BuildAllocateLineRow({
 
         // Update the allocated quantity based on the selected stock item
         if (instance) {
-          let available = instance.quantity - instance.allocated;
+          const available = instance.quantity - instance.allocated;
 
           if (available < props.item.quantity) {
             props.changeFn(
@@ -468,14 +471,14 @@ function BuildAllocateLineRow({
       </Table.Td>
       <Table.Td>
         <StandaloneField
-          fieldName="stock_item"
+          fieldName='stock_item'
           fieldDefinition={stockField}
           error={props.rowErrors?.stock_item?.message}
         />
       </Table.Td>
       <Table.Td>
         <StandaloneField
-          fieldName="quantity"
+          fieldName='quantity'
           fieldDefinition={quantityField}
           error={props.rowErrors?.quantity?.message}
         />
@@ -554,7 +557,7 @@ export function useAllocateStockToBuildForm({
 
   const preFormContent = useMemo(() => {
     return (
-      <Stack gap="xs">
+      <Stack gap='xs'>
         <StandaloneField fieldDefinition={sourceLocationField} />
       </Stack>
     );
diff --git a/src/frontend/src/forms/CommonForms.tsx b/src/frontend/src/forms/CommonForms.tsx
index 40c060b92d28..3f20dff13180 100644
--- a/src/frontend/src/forms/CommonForms.tsx
+++ b/src/frontend/src/forms/CommonForms.tsx
@@ -1,6 +1,6 @@
 import { IconUsers } from '@tabler/icons-react';
 
-import { ApiFormFieldSet } from '../components/forms/fields/ApiFormField';
+import type { ApiFormFieldSet } from '../components/forms/fields/ApiFormField';
 
 export function projectCodeFields(): ApiFormFieldSet {
   return {
diff --git a/src/frontend/src/forms/CompanyForms.tsx b/src/frontend/src/forms/CompanyForms.tsx
index f56ce2aa8cdf..85138ec7f324 100644
--- a/src/frontend/src/forms/CompanyForms.tsx
+++ b/src/frontend/src/forms/CompanyForms.tsx
@@ -10,7 +10,7 @@ import {
 } from '@tabler/icons-react';
 import { useMemo } from 'react';
 
-import {
+import type {
   ApiFormAdjustFilterType,
   ApiFormFieldSet
 } from '../components/forms/fields/ApiFormField';
diff --git a/src/frontend/src/forms/ImporterForms.tsx b/src/frontend/src/forms/ImporterForms.tsx
index 9ce00d30b60f..3065a34fe5a1 100644
--- a/src/frontend/src/forms/ImporterForms.tsx
+++ b/src/frontend/src/forms/ImporterForms.tsx
@@ -1,4 +1,4 @@
-import { ApiFormFieldSet } from '../components/forms/fields/ApiFormField';
+import type { ApiFormFieldSet } from '../components/forms/fields/ApiFormField';
 
 export function dataImporterSessionFields(): ApiFormFieldSet {
   return {
diff --git a/src/frontend/src/forms/PartForms.tsx b/src/frontend/src/forms/PartForms.tsx
index 54a30cf3f985..f3901681688c 100644
--- a/src/frontend/src/forms/PartForms.tsx
+++ b/src/frontend/src/forms/PartForms.tsx
@@ -2,7 +2,7 @@ import { t } from '@lingui/macro';
 import { IconPackages } from '@tabler/icons-react';
 import { useMemo, useState } from 'react';
 
-import { ApiFormFieldSet } from '../components/forms/fields/ApiFormField';
+import type { ApiFormFieldSet } from '../components/forms/fields/ApiFormField';
 import { useGlobalSettingsState } from '../states/SettingsState';
 
 /**
@@ -134,8 +134,8 @@ export function partCategoryFields({
 }: {
   create?: boolean;
 }): ApiFormFieldSet {
-  let fields: ApiFormFieldSet = useMemo(() => {
-    let fields: ApiFormFieldSet = {
+  const fields: ApiFormFieldSet = useMemo(() => {
+    const fields: ApiFormFieldSet = {
       parent: {
         description: t`Parent part category`,
         required: false
@@ -198,7 +198,7 @@ export function usePartParameterFields({
             setChoices([]);
             setFieldType('boolean');
           } else if (record?.choices) {
-            let _choices: string[] = record.choices.split(',');
+            const _choices: string[] = record.choices.split(',');
 
             if (_choices.length > 0) {
               setChoices(
diff --git a/src/frontend/src/forms/PurchaseOrderForms.tsx b/src/frontend/src/forms/PurchaseOrderForms.tsx
index 4e485acc627a..b36145dcb21d 100644
--- a/src/frontend/src/forms/PurchaseOrderForms.tsx
+++ b/src/frontend/src/forms/PurchaseOrderForms.tsx
@@ -29,13 +29,13 @@ import { api } from '../App';
 import { ActionButton } from '../components/buttons/ActionButton';
 import RemoveRowButton from '../components/buttons/RemoveRowButton';
 import { StandaloneField } from '../components/forms/StandaloneField';
-import {
+import type {
   ApiFormAdjustFilterType,
   ApiFormFieldSet
 } from '../components/forms/fields/ApiFormField';
 import {
   TableFieldExtraRow,
-  TableFieldRowProps
+  type TableFieldRowProps
 } from '../components/forms/fields/TableField';
 import { Thumbnail } from '../components/images/Thumbnail';
 import { ProgressBar } from '../components/items/ProgressBar';
@@ -144,7 +144,7 @@ export function usePurchaseOrderFields({
   duplicateOrderId?: number;
 }): ApiFormFieldSet {
   return useMemo(() => {
-    let fields: ApiFormFieldSet = {
+    const fields: ApiFormFieldSet = {
       reference: {
         icon: <IconHash />
       },
@@ -333,7 +333,7 @@ function LineItemFormRow({
 
   // Info string with details about certain selected locations
   const locationDescription = useMemo(() => {
-    let text = t`Choose Location`;
+    const text = t`Choose Location`;
 
     if (location === null) {
       return text;
@@ -377,11 +377,11 @@ function LineItemFormRow({
       <Modal
         opened={opened}
         onClose={close}
-        title={<StylishText children={t`Scan Barcode`} />}
+        title={<StylishText>{t`Scan Barcode`}</StylishText>}
       >
         <FocusTrap>
           <TextInput
-            label="Barcode data"
+            label='Barcode data'
             data-autofocus
             value={barcodeInput}
             onChange={(e) => setBarcodeInput(e.target.value)}
@@ -390,11 +390,11 @@ function LineItemFormRow({
       </Modal>
       <Table.Tr>
         <Table.Td>
-          <Flex gap="sm" align="center">
+          <Flex gap='sm' align='center'>
             <Thumbnail
               size={40}
               src={record.part_detail.thumbnail}
-              align="center"
+              align='center'
             />
             <div>{record.part_detail.name}</div>
           </Flex>
@@ -409,7 +409,7 @@ function LineItemFormRow({
         </Table.Td>
         <Table.Td style={{ whiteSpace: 'nowrap' }}>
           <StandaloneField
-            fieldName="quantity"
+            fieldName='quantity'
             fieldDefinition={{
               field_type: 'number',
               value: props.item.quantity,
@@ -420,60 +420,60 @@ function LineItemFormRow({
           />
         </Table.Td>
         <Table.Td style={{ width: '1%', whiteSpace: 'nowrap' }}>
-          <Flex gap="1px">
+          <Flex gap='1px'>
             <ActionButton
-              size="sm"
+              size='sm'
               onClick={() => locationHandlers.toggle()}
-              icon={<InvenTreeIcon icon="location" />}
+              icon={<InvenTreeIcon icon='location' />}
               tooltip={t`Set Location`}
-              tooltipAlignment="top"
+              tooltipAlignment='top'
               variant={locationOpen ? 'filled' : 'transparent'}
             />
             <ActionButton
-              size="sm"
+              size='sm'
               onClick={() => batchHandlers.toggle()}
-              icon={<InvenTreeIcon icon="batch_code" />}
+              icon={<InvenTreeIcon icon='batch_code' />}
               tooltip={batchToolTip}
-              tooltipAlignment="top"
+              tooltipAlignment='top'
               variant={batchOpen ? 'filled' : 'transparent'}
             />
             <ActionButton
-              size="sm"
-              icon={<InvenTreeIcon icon="packaging" />}
+              size='sm'
+              icon={<InvenTreeIcon icon='packaging' />}
               tooltip={t`Adjust Packaging`}
-              tooltipAlignment="top"
+              tooltipAlignment='top'
               onClick={() => packagingHandlers.toggle()}
               variant={packagingOpen ? 'filled' : 'transparent'}
             />
             <ActionButton
               onClick={() => statusHandlers.toggle()}
-              icon={<InvenTreeIcon icon="status" />}
+              icon={<InvenTreeIcon icon='status' />}
               tooltip={t`Change Status`}
-              tooltipAlignment="top"
+              tooltipAlignment='top'
               variant={statusOpen ? 'filled' : 'transparent'}
             />
             <ActionButton
-              icon={<InvenTreeIcon icon="note" />}
+              icon={<InvenTreeIcon icon='note' />}
               tooltip={t`Add Note`}
-              tooltipAlignment="top"
+              tooltipAlignment='top'
               variant={noteOpen ? 'filled' : 'transparent'}
               onClick={() => noteHandlers.toggle()}
             />
             {barcode ? (
               <ActionButton
-                icon={<InvenTreeIcon icon="unlink" />}
+                icon={<InvenTreeIcon icon='unlink' />}
                 tooltip={t`Unlink Barcode`}
-                tooltipAlignment="top"
-                variant="filled"
-                color="red"
+                tooltipAlignment='top'
+                variant='filled'
+                color='red'
                 onClick={() => setBarcode(undefined)}
               />
             ) : (
               <ActionButton
-                icon={<InvenTreeIcon icon="barcode" />}
+                icon={<InvenTreeIcon icon='barcode' />}
                 tooltip={t`Scan Barcode`}
-                tooltipAlignment="top"
-                variant="transparent"
+                tooltipAlignment='top'
+                variant='transparent'
                 onClick={() => open()}
               />
             )}
@@ -484,9 +484,9 @@ function LineItemFormRow({
       {locationOpen && (
         <Table.Tr>
           <Table.Td colSpan={10}>
-            <Group grow preventGrowOverflow={false} justify="flex-apart" p="xs">
-              <Container flex={0} p="xs">
-                <InvenTreeIcon icon="downright" />
+            <Group grow preventGrowOverflow={false} justify='flex-apart' p='xs'>
+              <Container flex={0} p='xs'>
+                <InvenTreeIcon icon='downright' />
               </Container>
               <StandaloneField
                 fieldDefinition={{
@@ -502,7 +502,7 @@ function LineItemFormRow({
                   description: locationDescription,
                   value: props.item.location,
                   label: t`Location`,
-                  icon: <InvenTreeIcon icon="location" />
+                  icon: <InvenTreeIcon icon='location' />
                 }}
                 defaultValue={
                   record.destination ??
@@ -515,7 +515,7 @@ function LineItemFormRow({
                 {(record.part_detail?.default_location ||
                   record.part_detail?.category_default_location) && (
                   <ActionButton
-                    icon={<InvenTreeIcon icon="default_location" />}
+                    icon={<InvenTreeIcon icon='default_location' />}
                     tooltip={t`Store at default location`}
                     onClick={() =>
                       props.changeFn(
@@ -525,24 +525,24 @@ function LineItemFormRow({
                           record.part_detail?.category_default_location
                       )
                     }
-                    tooltipAlignment="top"
+                    tooltipAlignment='top'
                   />
                 )}
                 {record.destination && (
                   <ActionButton
-                    icon={<InvenTreeIcon icon="destination" />}
+                    icon={<InvenTreeIcon icon='destination' />}
                     tooltip={t`Store at line item destination `}
                     onClick={() =>
                       props.changeFn(props.idx, 'location', record.destination)
                     }
-                    tooltipAlignment="top"
+                    tooltipAlignment='top'
                   />
                 )}
                 {!record.destination &&
                   record.destination_detail &&
                   record.received > 0 && (
                     <ActionButton
-                      icon={<InvenTreeIcon icon="repeat_destination" />}
+                      icon={<InvenTreeIcon icon='repeat_destination' />}
                       tooltip={t`Store with already received stock`}
                       onClick={() =>
                         props.changeFn(
@@ -551,7 +551,7 @@ function LineItemFormRow({
                           record.destination_detail.pk
                         )
                       }
-                      tooltipAlignment="top"
+                      tooltipAlignment='top'
                     />
                   )}
               </Flex>
diff --git a/src/frontend/src/forms/ReturnOrderForms.tsx b/src/frontend/src/forms/ReturnOrderForms.tsx
index 743c43b7fccf..805c94b3ec47 100644
--- a/src/frontend/src/forms/ReturnOrderForms.tsx
+++ b/src/frontend/src/forms/ReturnOrderForms.tsx
@@ -4,11 +4,11 @@ import { IconAddressBook, IconUser, IconUsers } from '@tabler/icons-react';
 import { useMemo } from 'react';
 
 import RemoveRowButton from '../components/buttons/RemoveRowButton';
-import {
+import type {
   ApiFormAdjustFilterType,
   ApiFormFieldSet
 } from '../components/forms/fields/ApiFormField';
-import { TableFieldRowProps } from '../components/forms/fields/TableField';
+import type { TableFieldRowProps } from '../components/forms/fields/TableField';
 import { Thumbnail } from '../components/images/Thumbnail';
 import { ApiEndpoints } from '../enums/ApiEndpoints';
 import { useCreateApiFormModal } from '../hooks/UseForm';
@@ -20,7 +20,7 @@ export function useReturnOrderFields({
   duplicateOrderId?: number;
 }): ApiFormFieldSet {
   return useMemo(() => {
-    let fields: ApiFormFieldSet = {
+    const fields: ApiFormFieldSet = {
       reference: {},
       description: {},
       customer: {
@@ -137,11 +137,11 @@ function ReturnOrderLineItemFormRow({
     <>
       <Table.Tr>
         <Table.Td>
-          <Flex gap="sm" align="center">
+          <Flex gap='sm' align='center'>
             <Thumbnail
               size={40}
               src={record.part_detail.thumbnail}
-              align="center"
+              align='center'
             />
             <div>{record.part_detail.name}</div>
           </Flex>
diff --git a/src/frontend/src/forms/SalesOrderForms.tsx b/src/frontend/src/forms/SalesOrderForms.tsx
index 1932251dcdf9..889a88b71793 100644
--- a/src/frontend/src/forms/SalesOrderForms.tsx
+++ b/src/frontend/src/forms/SalesOrderForms.tsx
@@ -5,12 +5,12 @@ import { useEffect, useMemo, useState } from 'react';
 
 import RemoveRowButton from '../components/buttons/RemoveRowButton';
 import { StandaloneField } from '../components/forms/StandaloneField';
-import {
+import type {
   ApiFormAdjustFilterType,
   ApiFormFieldSet,
   ApiFormFieldType
 } from '../components/forms/fields/ApiFormField';
-import { TableFieldRowProps } from '../components/forms/fields/TableField';
+import type { TableFieldRowProps } from '../components/forms/fields/TableField';
 import { ProgressBar } from '../components/items/ProgressBar';
 import { ApiEndpoints } from '../enums/ApiEndpoints';
 import { ModelType } from '../enums/ModelType';
@@ -24,7 +24,7 @@ export function useSalesOrderFields({
   duplicateOrderId?: number;
 }): ApiFormFieldSet {
   return useMemo(() => {
-    let fields: ApiFormFieldSet = {
+    const fields: ApiFormFieldSet = {
       reference: {},
       description: {},
       customer: {
@@ -147,8 +147,8 @@ function SalesOrderAllocateLineRow({
 
         // Update the allocated quantity based on the selected stock item
         if (instance) {
-          let available = instance.quantity - instance.allocated;
-          let required = record.quantity - record.allocated;
+          const available = instance.quantity - instance.allocated;
+          const required = record.quantity - record.allocated;
 
           let quantity = props.item?.quantity ?? 0;
 
@@ -190,14 +190,14 @@ function SalesOrderAllocateLineRow({
       </Table.Td>
       <Table.Td>
         <StandaloneField
-          fieldName="stock_item"
+          fieldName='stock_item'
           fieldDefinition={stockItemField}
           error={props.rowErrors?.stock_item?.message}
         />
       </Table.Td>
       <Table.Td>
         <StandaloneField
-          fieldName="quantity"
+          fieldName='quantity'
           fieldDefinition={quantityField}
           error={props.rowErrors?.quantity?.message}
         />
diff --git a/src/frontend/src/forms/StockForms.tsx b/src/frontend/src/forms/StockForms.tsx
index 7857427f4c17..f52e547b117c 100644
--- a/src/frontend/src/forms/StockForms.tsx
+++ b/src/frontend/src/forms/StockForms.tsx
@@ -17,13 +17,13 @@ import { api } from '../App';
 import { ActionButton } from '../components/buttons/ActionButton';
 import RemoveRowButton from '../components/buttons/RemoveRowButton';
 import { StandaloneField } from '../components/forms/StandaloneField';
-import {
+import type {
   ApiFormAdjustFilterType,
   ApiFormFieldSet
 } from '../components/forms/fields/ApiFormField';
 import {
   TableFieldExtraRow,
-  TableFieldRowProps
+  type TableFieldRowProps
 } from '../components/forms/fields/TableField';
 import { Thumbnail } from '../components/images/Thumbnail';
 import { StylishText } from '../components/items/StylishText';
@@ -32,7 +32,7 @@ import { ApiEndpoints } from '../enums/ApiEndpoints';
 import { ModelType } from '../enums/ModelType';
 import { InvenTreeIcon } from '../functions/icons';
 import {
-  ApiFormModalProps,
+  type ApiFormModalProps,
   useCreateApiFormModal,
   useDeleteApiFormModal
 } from '../hooks/UseForm';
@@ -40,7 +40,6 @@ import {
   useBatchCodeGenerator,
   useSerialNumberGenerator
 } from '../hooks/UseGenerator';
-import { useInstance } from '../hooks/UseInstance';
 import { useSerialNumberPlaceholder } from '../hooks/UsePlaceholder';
 import { apiUrl } from '../states/ApiState';
 import { useGlobalSettingsState } from '../states/SettingsState';
@@ -69,7 +68,7 @@ export function useStockFields({
 
   const batchGenerator = useBatchCodeGenerator((value: any) => {
     if (value) {
-      setNextBatchCode(`Next batch code` + `: ${value}`);
+      setNextBatchCode(`${t`Next batch code`}: ${value}`);
     } else {
       setNextBatchCode('');
     }
@@ -77,7 +76,7 @@ export function useStockFields({
 
   const serialGenerator = useSerialNumberGenerator((value: any) => {
     if (value) {
-      setNextSerialNumber(t`Next serial number` + `: ${value}`);
+      setNextSerialNumber(`${t`Next serial number`}: ${value}`);
     } else {
       setNextSerialNumber('');
     }
@@ -352,21 +351,21 @@ function StockItemDefaultMove({
   });
 
   return (
-    <Flex gap="sm" justify="space-evenly" align="center">
-      <Flex gap="sm" direction="column" align="center">
+    <Flex gap='sm' justify='space-evenly' align='center'>
+      <Flex gap='sm' direction='column' align='center'>
         <Text>
           {value} x {stockItem.part_detail.name}
         </Text>
         <Thumbnail
           src={stockItem.part_detail.thumbnail}
           size={80}
-          align="center"
+          align='center'
         />
       </Flex>
-      <Flex direction="column" gap="sm" align="center">
+      <Flex direction='column' gap='sm' align='center'>
         <Text>{stockItem.location_detail.pathstring}</Text>
-        <InvenTreeIcon icon="arrow_down" />
-        <Suspense fallback={<Skeleton width="150px" />}>
+        <InvenTreeIcon icon='arrow_down' />
+        <Suspense fallback={<Skeleton width='150px' />}>
           <Text>{data?.pathstring}</Text>
         </Suspense>
       </Flex>
@@ -380,7 +379,7 @@ function moveToDefault(
   refresh: () => void
 ) {
   modals.openConfirmModal({
-    title: <StylishText>Confirm Stock Transfer</StylishText>,
+    title: <StylishText>{t`Confirm Stock Transfer`}</StylishText>,
     children: <StockItemDefaultMove stockItem={stockItem} value={value} />,
     onConfirm: () => {
       if (
@@ -444,7 +443,7 @@ function StockOperationsRow({
   record?: any;
 }) {
   const [quantity, setQuantity] = useState<StockItemQuantity>(
-    add ? 0 : props.item?.quantity ?? 0
+    add ? 0 : (props.item?.quantity ?? 0)
   );
 
   const removeAndRefresh = () => {
@@ -482,11 +481,11 @@ function StockOperationsRow({
     <>
       <Table.Tr>
         <Table.Td>
-          <Flex gap="sm" align="center">
+          <Flex gap='sm' align='center'>
             <Thumbnail
               size={40}
               src={record.part_detail?.thumbnail}
-              align="center"
+              align='center'
             />
             <div>{record.part_detail?.name}</div>
           </Flex>
@@ -495,7 +494,7 @@ function StockOperationsRow({
           {record.location ? record.location_detail?.pathstring : '-'}
         </Table.Td>
         <Table.Td>
-          <Group grow justify="space-between" wrap="nowrap">
+          <Group grow justify='space-between' wrap='nowrap'>
             <Text>{stockString}</Text>
             <StatusRenderer status={record.status} type={ModelType.stockitem} />
           </Group>
@@ -503,7 +502,7 @@ function StockOperationsRow({
         {!merge && (
           <Table.Td>
             <StandaloneField
-              fieldName="quantity"
+              fieldName='quantity'
               fieldDefinition={{
                 field_type: 'number',
                 value: quantity,
@@ -517,15 +516,15 @@ function StockOperationsRow({
           </Table.Td>
         )}
         <Table.Td>
-          <Flex gap="3px">
+          <Flex gap='3px'>
             {transfer && (
               <ActionButton
                 onClick={() =>
                   moveToDefault(record, props.item.quantity, removeAndRefresh)
                 }
-                icon={<InvenTreeIcon icon="default_location" />}
+                icon={<InvenTreeIcon icon='default_location' />}
                 tooltip={t`Move to default location`}
-                tooltipAlignment="top"
+                tooltipAlignment='top'
                 disabled={
                   !record.part_detail?.default_location &&
                   !record.part_detail?.category_default_location
@@ -534,8 +533,8 @@ function StockOperationsRow({
             )}
             {transfer && (
               <ActionButton
-                size="sm"
-                icon={<InvenTreeIcon icon="packaging" />}
+                size='sm'
+                icon={<InvenTreeIcon icon='packaging' />}
                 tooltip={t`Adjust Packaging`}
                 onClick={() => packagingHandlers.toggle()}
                 variant={packagingOpen ? 'filled' : 'transparent'}
@@ -890,7 +889,7 @@ function stockOperationModal({
   };
 
   const params = useMemo(() => {
-    let query_params: any = {
+    const query_params: any = {
       ...baseParams,
       ...(filters ?? {})
     };
@@ -1004,7 +1003,7 @@ export function useAssignStockItem(props: StockOperationProps) {
     ...props,
     fieldGenerator: stockAssignFields,
     endpoint: ApiEndpoints.stock_assign,
-    title: `Assign Stock to Customer`
+    title: t`Assign Stock to Customer`
   });
 }
 
@@ -1019,7 +1018,7 @@ export function useDeleteStockItem(props: StockOperationProps) {
 }
 
 export function stockLocationFields(): ApiFormFieldSet {
-  let fields: ApiFormFieldSet = {
+  const fields: ApiFormFieldSet = {
     parent: {
       description: t`Parent stock location`,
       required: false
@@ -1065,7 +1064,7 @@ export function useTestResultFields({
   );
 
   return useMemo(() => {
-    let fields: ApiFormFieldSet = {
+    const fields: ApiFormFieldSet = {
       stock_item: {
         value: itemId,
         hidden: true
@@ -1079,7 +1078,7 @@ export function useTestResultFields({
         onValueChange: (value: any, record: any) => {
           // Adjust the type of the "value" field based on the selected template
           if (record?.choices) {
-            let _choices: string[] = record.choices.split(',');
+            const _choices: string[] = record.choices.split(',');
 
             if (_choices.length > 0) {
               setChoices(
diff --git a/src/frontend/src/functions/auth.tsx b/src/frontend/src/functions/auth.tsx
index a05b0437555f..98514c234a85 100644
--- a/src/frontend/src/functions/auth.tsx
+++ b/src/frontend/src/functions/auth.tsx
@@ -1,7 +1,7 @@
 import { t } from '@lingui/macro';
 import { notifications } from '@mantine/notifications';
 import axios from 'axios';
-import { Navigate, NavigateFunction } from 'react-router-dom';
+import type { NavigateFunction } from 'react-router-dom';
 
 import { api, setApiDefaults } from '../App';
 import { ApiEndpoints } from '../enums/ApiEndpoints';
@@ -16,7 +16,7 @@ export function followRedirect(navigate: NavigateFunction, redirect: any) {
 
   if (redirect?.queryParams) {
     // Construct and appand query parameters
-    url = url + '?' + new URLSearchParams(redirect.queryParams).toString();
+    url = `${url}?${new URLSearchParams(redirect.queryParams).toString()}`;
   }
 
   navigate(url);
@@ -37,7 +37,7 @@ function post(path: string, params: any, method = 'post') {
   form.action = path;
 
   for (const key in params) {
-    if (params.hasOwnProperty(key)) {
+    if (params.hasOwn(key)) {
       const hiddenField = document.createElement('input');
       hiddenField.type = 'hidden';
       hiddenField.name = key;
@@ -68,7 +68,7 @@ export const doBasicLogin = async (username: string, password: string) => {
 
   const login_url = apiUrl(ApiEndpoints.user_login);
 
-  let result: boolean = false;
+  let result = false;
 
   // Attempt login with
   await api
diff --git a/src/frontend/src/functions/conversion.tsx b/src/frontend/src/functions/conversion.tsx
index 3539a1da15b1..64ae944e8aff 100644
--- a/src/frontend/src/functions/conversion.tsx
+++ b/src/frontend/src/functions/conversion.tsx
@@ -15,7 +15,7 @@ export function isTrue(value: any): boolean {
     return false;
   }
 
-  let s = String(value).trim().toLowerCase();
+  const s = String(value).trim().toLowerCase();
 
   return ['true', 'yes', '1', 'on', 't', 'y'].includes(s);
 }
@@ -29,7 +29,7 @@ export function isTrue(value: any): boolean {
  * Allows for retrieval of nested items in an object.
  */
 export function resolveItem(obj: any, path: string): any {
-  let properties = path.split('.');
+  const properties = path.split('.');
   return properties.reduce((prev, curr) => prev?.[curr], obj);
 }
 
diff --git a/src/frontend/src/functions/forms.tsx b/src/frontend/src/functions/forms.tsx
index bbee73fe81f5..c7c088b90420 100644
--- a/src/frontend/src/functions/forms.tsx
+++ b/src/frontend/src/functions/forms.tsx
@@ -1,11 +1,11 @@
-import { AxiosResponse } from 'axios';
+import type { AxiosResponse } from 'axios';
 
-import {
+import type {
   ApiFormFieldSet,
   ApiFormFieldType
 } from '../components/forms/fields/ApiFormField';
-import { ApiEndpoints } from '../enums/ApiEndpoints';
-import { PathParams, apiUrl } from '../states/ApiState';
+import type { ApiEndpoints } from '../enums/ApiEndpoints';
+import { type PathParams, apiUrl } from '../states/ApiState';
 import { invalidResponse, permissionDenied } from './notifications';
 
 /**
@@ -35,7 +35,7 @@ export function extractAvailableFields(
     return null;
   }
 
-  let actions: any = response.data?.actions ?? null;
+  const actions: any = response.data?.actions ?? null;
 
   if (!method || !actions) {
     return null;
@@ -109,7 +109,7 @@ export function mapFields(
 
   for (const [k, v] of Object.entries(fields)) {
     const path = _path ? `${_path}.${k}` : k;
-    let value;
+    let value: any;
 
     if (v.field_type === 'nested object' && v.children) {
       value = mapFields(v.children, fieldFunction, path);
diff --git a/src/frontend/src/functions/icons.tsx b/src/frontend/src/functions/icons.tsx
index 38b313cb36cc..6a89892f2d5a 100644
--- a/src/frontend/src/functions/icons.tsx
+++ b/src/frontend/src/functions/icons.tsx
@@ -1,5 +1,5 @@
 import {
-  Icon,
+  type Icon,
   Icon123,
   IconArrowBigDownLineFilled,
   IconArrowMerge,
@@ -72,7 +72,7 @@ import {
   IconPoint,
   IconPrinter,
   IconProgressCheck,
-  IconProps,
+  type IconProps,
   IconQrcode,
   IconQuestionMark,
   IconRefresh,
@@ -105,7 +105,7 @@ import {
   IconWorldCode,
   IconX
 } from '@tabler/icons-react';
-import React from 'react';
+import type React from 'react';
 
 const icons = {
   name: IconPoint,
diff --git a/src/frontend/src/functions/loading.tsx b/src/frontend/src/functions/loading.tsx
index 5238ee8dd450..87c3f249c633 100644
--- a/src/frontend/src/functions/loading.tsx
+++ b/src/frontend/src/functions/loading.tsx
@@ -16,8 +16,8 @@ function LoadingFallback() {
   );
 }
 
-export const Loadable = (Component: any) => (props: JSX.IntrinsicAttributes) =>
-  (
+export const Loadable =
+  (Component: any) => (props: JSX.IntrinsicAttributes) => (
     <Suspense fallback={<LoadingFallback />}>
       <Component {...props} />
     </Suspense>
diff --git a/src/frontend/src/functions/tables.tsx b/src/frontend/src/functions/tables.tsx
index 6b3b9a4946a2..0abe409b2bbd 100644
--- a/src/frontend/src/functions/tables.tsx
+++ b/src/frontend/src/functions/tables.tsx
@@ -20,7 +20,7 @@ export function shortenString({
   }
 
   // Otherwise, shorten it
-  let N = Math.floor(len / 2 - 1);
+  const N = Math.floor(len / 2 - 1);
 
-  return str.slice(0, N) + ' ... ' + str.slice(-N);
+  return `${str.slice(0, N)} ... ${str.slice(-N)}`;
 }
diff --git a/src/frontend/src/functions/uid.tsx b/src/frontend/src/functions/uid.tsx
index 1496e7f6901d..3311809f834e 100644
--- a/src/frontend/src/functions/uid.tsx
+++ b/src/frontend/src/functions/uid.tsx
@@ -7,8 +7,8 @@ function dec2hex(dec: number) {
 /**
  * Generate a unique ID string with the specified number of values
  */
-export function generateUniqueId(length: number = 8): string {
-  let arr = new Uint8Array(length / 2);
+export function generateUniqueId(length = 8): string {
+  const arr = new Uint8Array(length / 2);
   window.crypto.getRandomValues(arr);
 
   return Array.from(arr, dec2hex).join('');
diff --git a/src/frontend/src/functions/urls.tsx b/src/frontend/src/functions/urls.tsx
index ce058edd4563..5440a61ab82c 100644
--- a/src/frontend/src/functions/urls.tsx
+++ b/src/frontend/src/functions/urls.tsx
@@ -1,5 +1,5 @@
 import { ModelInformationDict } from '../components/render/ModelType';
-import { ModelType } from '../enums/ModelType';
+import type { ModelType } from '../enums/ModelType';
 import { base_url } from '../main';
 
 /**
@@ -17,8 +17,8 @@ export function getDetailUrl(
   }
 
   if (!!pk && modelInfo && modelInfo.url_detail) {
-    let url = modelInfo.url_detail.replace(':pk', pk.toString());
-    let base = base_url;
+    const url = modelInfo.url_detail.replace(':pk', pk.toString());
+    const base = base_url;
 
     if (absolute && base) {
       return `/${base}${url}`;
diff --git a/src/frontend/src/hooks/UseDashboardItems.tsx b/src/frontend/src/hooks/UseDashboardItems.tsx
index 910eb37fe219..45a3542902a2 100644
--- a/src/frontend/src/hooks/UseDashboardItems.tsx
+++ b/src/frontend/src/hooks/UseDashboardItems.tsx
@@ -2,11 +2,11 @@ import { useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
 
 import { api } from '../App';
-import { DashboardWidgetProps } from '../components/dashboard/DashboardWidget';
+import type { DashboardWidgetProps } from '../components/dashboard/DashboardWidget';
 import DashboardWidgetLibrary from '../components/dashboard/DashboardWidgetLibrary';
 import { useInvenTreeContext } from '../components/plugins/PluginContext';
 import {
-  PluginUIFeature,
+  type PluginUIFeature,
   PluginUIFeatureType
 } from '../components/plugins/PluginUIFeature';
 import RemoteComponent from '../components/plugins/RemoteComponent';
@@ -82,7 +82,7 @@ export function useDashboardItems(): DashboardLibraryProps {
             return (
               <RemoteComponent
                 source={item.source}
-                defaultFunctionName="renderDashboardItem"
+                defaultFunctionName='renderDashboardItem'
                 context={pluginContext}
               />
             );
diff --git a/src/frontend/src/hooks/UseFilter.tsx b/src/frontend/src/hooks/UseFilter.tsx
index 62d63713cb1c..92419dcf0036 100644
--- a/src/frontend/src/hooks/UseFilter.tsx
+++ b/src/frontend/src/hooks/UseFilter.tsx
@@ -9,7 +9,7 @@ import { api } from '../App';
 import { ApiEndpoints } from '../enums/ApiEndpoints';
 import { resolveItem } from '../functions/conversion';
 import { apiUrl } from '../states/ApiState';
-import { TableFilterChoice } from '../tables/Filter';
+import type { TableFilterChoice } from '../tables/Filter';
 
 type UseFilterProps = {
   url: string;
@@ -32,7 +32,7 @@ export function useFilters(props: UseFilterProps) {
           params: props.params
         })
         .then((response) => {
-          let data = resolveItem(response, props.accessor ?? 'data');
+          const data = resolveItem(response, props.accessor ?? 'data');
 
           if (data == null || data == undefined) {
             return [];
@@ -45,7 +45,7 @@ export function useFilters(props: UseFilterProps) {
   });
 
   const choices: TableFilterChoice[] = useMemo(() => {
-    let opts = query.data?.map(props.transform) ?? [];
+    const opts = query.data?.map(props.transform) ?? [];
 
     // Ensure stringiness
     return opts.map((opt: any) => {
diff --git a/src/frontend/src/hooks/UseForm.tsx b/src/frontend/src/hooks/UseForm.tsx
index fc73d58840e5..085ea6d97807 100644
--- a/src/frontend/src/hooks/UseForm.tsx
+++ b/src/frontend/src/hooks/UseForm.tsx
@@ -3,8 +3,8 @@ import { Alert, Divider, Stack } from '@mantine/core';
 import { useId } from '@mantine/hooks';
 import { useEffect, useMemo, useRef } from 'react';
 
-import { ApiFormProps, OptionsApiForm } from '../components/forms/ApiForm';
-import { UiSizeType } from '../defaults/formatters';
+import { type ApiFormProps, OptionsApiForm } from '../components/forms/ApiForm';
+import type { UiSizeType } from '../defaults/formatters';
 import { useModal } from './UseModal';
 
 /**
diff --git a/src/frontend/src/hooks/UseInstance.tsx b/src/frontend/src/hooks/UseInstance.tsx
index 1f52325ed024..4b93d1bb6c1c 100644
--- a/src/frontend/src/hooks/UseInstance.tsx
+++ b/src/frontend/src/hooks/UseInstance.tsx
@@ -1,9 +1,9 @@
-import { QueryObserverResult, useQuery } from '@tanstack/react-query';
+import { type QueryObserverResult, useQuery } from '@tanstack/react-query';
 import { useCallback, useMemo, useState } from 'react';
 
 import { api } from '../App';
-import { ApiEndpoints } from '../enums/ApiEndpoints';
-import { PathParams, apiUrl } from '../states/ApiState';
+import type { ApiEndpoints } from '../enums/ApiEndpoints';
+import { type PathParams, apiUrl } from '../states/ApiState';
 
 export interface UseInstanceResult {
   instance: any;
@@ -112,9 +112,7 @@ export function useInstance<T = any>({
     );
   }, [instanceQuery]);
 
-  const refreshInstance = useCallback(function () {
-    return instanceQuery.refetch();
-  }, []);
+  const refreshInstance = useCallback(() => instanceQuery.refetch(), []);
 
   return {
     instance,
diff --git a/src/frontend/src/hooks/UseModal.tsx b/src/frontend/src/hooks/UseModal.tsx
index cb122df6b411..16e9736ffde2 100644
--- a/src/frontend/src/hooks/UseModal.tsx
+++ b/src/frontend/src/hooks/UseModal.tsx
@@ -1,9 +1,10 @@
 import { Modal } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import React, { useCallback } from 'react';
+import type React from 'react';
+import { useCallback } from 'react';
 
 import { StylishText } from '../components/items/StylishText';
-import { UiSizeType } from '../defaults/formatters';
+import type { UiSizeType } from '../defaults/formatters';
 
 export interface UseModalProps {
   title: string;
@@ -38,7 +39,7 @@ export function useModal(props: UseModalProps) {
         onClose={close}
         closeOnClickOutside={props.closeOnClickOutside}
         size={props.size ?? 'xl'}
-        title={<StylishText size="xl">{props.title}</StylishText>}
+        title={<StylishText size='xl'>{props.title}</StylishText>}
       >
         {props.children}
       </Modal>
diff --git a/src/frontend/src/hooks/UsePlaceholder.tsx b/src/frontend/src/hooks/UsePlaceholder.tsx
index d67839e2401a..899ecc9f4887 100644
--- a/src/frontend/src/hooks/UsePlaceholder.tsx
+++ b/src/frontend/src/hooks/UsePlaceholder.tsx
@@ -54,9 +54,9 @@ export function useSerialNumberPlaceholder({
     if (!enabled) {
       return undefined;
     } else if (snQuery.data?.next) {
-      return t`Next serial number` + `: ${snQuery.data.next}`;
+      return `${t`Next serial number`}: ${snQuery.data.next}`;
     } else if (snQuery.data?.latest) {
-      return t`Latest serial number` + `: ${snQuery.data.latest}`;
+      return `${t`Latest serial number`}: ${snQuery.data.latest}`;
     } else {
       return undefined;
     }
diff --git a/src/frontend/src/hooks/UsePluginPanels.tsx b/src/frontend/src/hooks/UsePluginPanels.tsx
index d8352c666e04..78df7362c0f1 100644
--- a/src/frontend/src/hooks/UsePluginPanels.tsx
+++ b/src/frontend/src/hooks/UsePluginPanels.tsx
@@ -2,20 +2,20 @@ import { useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
 
 import { api } from '../App';
-import { PanelType } from '../components/panels/Panel';
+import type { PanelType } from '../components/panels/Panel';
 import {
-  InvenTreeContext,
+  type InvenTreeContext,
   useInvenTreeContext
 } from '../components/plugins/PluginContext';
 import PluginPanelContent from '../components/plugins/PluginPanel';
 import {
-  PluginUIFeature,
+  type PluginUIFeature,
   PluginUIFeatureType
 } from '../components/plugins/PluginUIFeature';
 import { ApiEndpoints } from '../enums/ApiEndpoints';
-import { ModelType } from '../enums/ModelType';
+import type { ModelType } from '../enums/ModelType';
 import { identifierString } from '../functions/conversion';
-import { InvenTreeIcon, InvenTreeIconType } from '../functions/icons';
+import { InvenTreeIcon, type InvenTreeIconType } from '../functions/icons';
 import { apiUrl } from '../states/ApiState';
 import { useGlobalSettingsState } from '../states/SettingsState';
 
@@ -68,7 +68,7 @@ export function usePluginPanels({
         })
         .then((response: any) => response.data)
         .catch((_error: any) => {
-          console.error(`ERR: Failed to fetch plugin panels`);
+          console.error('ERR: Failed to fetch plugin panels');
           return [];
         });
     }
diff --git a/src/frontend/src/hooks/UsePluginUIFeature.tsx b/src/frontend/src/hooks/UsePluginUIFeature.tsx
index df630cd3ae3c..3504652677ce 100644
--- a/src/frontend/src/hooks/UsePluginUIFeature.tsx
+++ b/src/frontend/src/hooks/UsePluginUIFeature.tsx
@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 import { api } from '../App';
 import { useInvenTreeContext } from '../components/plugins/PluginContext';
 import { findExternalPluginFunction } from '../components/plugins/PluginSource';
-import {
+import type {
   BaseUIFeature,
   PluginUIFeatureAPIResponse,
   PluginUIFuncWithoutInvenTreeContextType
diff --git a/src/frontend/src/hooks/UseStatusCodes.tsx b/src/frontend/src/hooks/UseStatusCodes.tsx
index b581aa7502de..fcc29bd06099 100644
--- a/src/frontend/src/hooks/UseStatusCodes.tsx
+++ b/src/frontend/src/hooks/UseStatusCodes.tsx
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
 import { getStatusCodes } from '../components/render/StatusRenderer';
-import { ModelType } from '../enums/ModelType';
+import type { ModelType } from '../enums/ModelType';
 import { useGlobalStatusState } from '../states/StatusState';
 
 /**
@@ -33,9 +33,9 @@ export default function useStatusCodes({
   const codes = useMemo(() => {
     const statusCodes = getStatusCodes(modelType) || {};
 
-    let codesMap: Record<any, any> = {};
+    const codesMap: Record<any, any> = {};
 
-    for (let name in statusCodes) {
+    for (const name in statusCodes) {
       codesMap[name] = statusCodes[name].key;
     }
 
diff --git a/src/frontend/src/hooks/UseTable.tsx b/src/frontend/src/hooks/UseTable.tsx
index 62b012d6cc0b..49cc59ffa9fd 100644
--- a/src/frontend/src/hooks/UseTable.tsx
+++ b/src/frontend/src/hooks/UseTable.tsx
@@ -1,8 +1,8 @@
 import { randomId, useLocalStorage } from '@mantine/hooks';
 import { useCallback, useMemo, useState } from 'react';
-import { SetURLSearchParams, useSearchParams } from 'react-router-dom';
+import { type SetURLSearchParams, useSearchParams } from 'react-router-dom';
 
-import { TableFilter } from '../tables/Filter';
+import type { TableFilter } from '../tables/Filter';
 
 /*
  * Type definition for representing the state of a table:
@@ -161,7 +161,7 @@ export function useTable(tableName: string): TableState {
   // Update a single record in the table, by primary key value
   const updateRecord = useCallback(
     (record: any) => {
-      let _records = [...records];
+      const _records = [...records];
 
       // Find the matching record in the table
       const index = _records.findIndex((r) => r.pk === record.pk);
diff --git a/src/frontend/src/main.css.ts b/src/frontend/src/main.css.ts
index fe1c199faae4..9906e6002b94 100644
--- a/src/frontend/src/main.css.ts
+++ b/src/frontend/src/main.css.ts
@@ -83,7 +83,7 @@ export const link = style({
 });
 
 export const docHover = style({
-  border: `1px dashed `
+  border: '1px dashed '
 });
 
 export const layoutContent = style({
diff --git a/src/frontend/src/main.tsx b/src/frontend/src/main.tsx
index 118e02ee55ea..e1dc08cc98a5 100644
--- a/src/frontend/src/main.tsx
+++ b/src/frontend/src/main.tsx
@@ -12,7 +12,7 @@ import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
 
 import { api } from './App';
-import { HostList } from './states/states';
+import type { HostList } from './states/states';
 import MainView from './views/MainView';
 
 // define settings
@@ -36,7 +36,7 @@ export const IS_DEMO = import.meta.env.VITE_DEMO === 'true';
 export const IS_DEV_OR_DEMO = IS_DEV || IS_DEMO;
 
 // Filter out any settings that are not defined
-let loaded_vals = (window.INVENTREE_SETTINGS || {}) as any;
+const loaded_vals = (window.INVENTREE_SETTINGS || {}) as any;
 Object.keys(loaded_vals).forEach((key) => {
   if (loaded_vals[key] === undefined) {
     delete loaded_vals[key];
@@ -73,8 +73,8 @@ window.INVENTREE_SETTINGS = {
   default_server: IS_DEV
     ? 'mantine-2j5j5j5j5'
     : IS_DEMO
-    ? 'mantine-u56l5jt85'
-    : 'mantine-cqj63coxn',
+      ? 'mantine-u56l5jt85'
+      : 'mantine-cqj63coxn',
   show_server_selector: IS_DEV_OR_DEMO,
 
   // merge in settings that are already set via django's spa_view or for development
diff --git a/src/frontend/src/pages/Auth/Logged-In.tsx b/src/frontend/src/pages/Auth/Logged-In.tsx
index 6aec17440090..bee4bb57dadd 100644
--- a/src/frontend/src/pages/Auth/Logged-In.tsx
+++ b/src/frontend/src/pages/Auth/Logged-In.tsx
@@ -15,13 +15,13 @@ export default function Logged_In() {
 
   return (
     <Container>
-      <Stack align="center">
-        <Card shadow="sm" padding="lg" radius="md">
+      <Stack align='center'>
+        <Card shadow='sm' padding='lg' radius='md'>
           <Stack>
-            <Text size="lg">
+            <Text size='lg'>
               <Trans>Checking if you are already logged in</Trans>
             </Text>
-            <Group justify="center">
+            <Group justify='center'>
               <Loader />
             </Group>
           </Stack>
diff --git a/src/frontend/src/pages/Auth/Login.tsx b/src/frontend/src/pages/Auth/Login.tsx
index 213963a34cb1..9ef7ad799ca6 100644
--- a/src/frontend/src/pages/Auth/Login.tsx
+++ b/src/frontend/src/pages/Auth/Login.tsx
@@ -75,8 +75,8 @@ export default function Login() {
 
   // Main rendering block
   return (
-    <Center mih="100vh">
-      <Container w="md" miw={400}>
+    <Center mih='100vh'>
+      <Container w='md' miw={400}>
         {hostEdit ? (
           <InstanceOptions
             hostKey={hostKey}
@@ -85,8 +85,8 @@ export default function Login() {
           />
         ) : (
           <>
-            <Paper radius="md" p="xl" withBorder>
-              <Text size="lg" fw={500}>
+            <Paper radius='md' p='xl' withBorder>
+              <Text size='lg' fw={500}>
                 {loginMode ? (
                   <Trans>Welcome, log in below</Trans>
                 ) : (
diff --git a/src/frontend/src/pages/Auth/Logout.tsx b/src/frontend/src/pages/Auth/Logout.tsx
index c8c0944016cc..967564d73874 100644
--- a/src/frontend/src/pages/Auth/Logout.tsx
+++ b/src/frontend/src/pages/Auth/Logout.tsx
@@ -15,13 +15,13 @@ export default function Logout() {
 
   return (
     <Container>
-      <Stack align="center">
-        <Card shadow="sm" padding="lg" radius="md">
+      <Stack align='center'>
+        <Card shadow='sm' padding='lg' radius='md'>
           <Stack>
-            <Text size="lg">
+            <Text size='lg'>
               <Trans>Logging out</Trans>
             </Text>
-            <Group justify="center">
+            <Group justify='center'>
               <Loader />
             </Group>
           </Stack>
diff --git a/src/frontend/src/pages/Auth/Reset.tsx b/src/frontend/src/pages/Auth/Reset.tsx
index 4a32758b5580..2529c7644ea4 100644
--- a/src/frontend/src/pages/Auth/Reset.tsx
+++ b/src/frontend/src/pages/Auth/Reset.tsx
@@ -19,8 +19,8 @@ export default function Reset() {
 
   return (
     <LanguageContext>
-      <Center mih="100vh">
-        <Container w="md" miw={425}>
+      <Center mih='100vh'>
+        <Container w='md' miw={425}>
           <Stack>
             <Title>
               <Trans>Reset password</Trans>
@@ -30,12 +30,12 @@ export default function Reset() {
                 required
                 label={t`Email`}
                 description={t`We will send you a link to login - if you are registered`}
-                placeholder="email@example.org"
+                placeholder='email@example.org'
                 {...simpleForm.getInputProps('email')}
               />
             </Stack>
             <Button
-              type="submit"
+              type='submit'
               onClick={() => handleReset(navigate, simpleForm.values)}
             >
               <Trans>Send Email</Trans>
diff --git a/src/frontend/src/pages/Auth/Set-Password.tsx b/src/frontend/src/pages/Auth/Set-Password.tsx
index 1fcc4bf93e63..88f9870031c1 100644
--- a/src/frontend/src/pages/Auth/Set-Password.tsx
+++ b/src/frontend/src/pages/Auth/Set-Password.tsx
@@ -89,8 +89,8 @@ export default function Set_Password() {
 
   return (
     <LanguageContext>
-      <Center mih="100vh">
-        <Container w="md" miw={425}>
+      <Center mih='100vh'>
+        <Container w='md' miw={425}>
           <Stack>
             <Title>
               <Trans>Set new password</Trans>
@@ -103,7 +103,7 @@ export default function Set_Password() {
                 {...simpleForm.getInputProps('password')}
               />
             </Stack>
-            <Button type="submit" onClick={handleSet}>
+            <Button type='submit' onClick={handleSet}>
               <Trans>Send Email</Trans>
             </Button>
           </Stack>
diff --git a/src/frontend/src/pages/ErrorPage.tsx b/src/frontend/src/pages/ErrorPage.tsx
index db52eb768551..60050ce66ce8 100644
--- a/src/frontend/src/pages/ErrorPage.tsx
+++ b/src/frontend/src/pages/ErrorPage.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { useRouteError } from 'react-router-dom';
 
 import GenericErrorPage from '../components/errors/GenericErrorPage';
-import { ErrorResponse } from '../states/states';
+import type { ErrorResponse } from '../states/states';
 
 export default function ErrorPage() {
   const error = useRouteError() as ErrorResponse;
diff --git a/src/frontend/src/pages/Index/Scan.tsx b/src/frontend/src/pages/Index/Scan.tsx
index 560a53e9663c..99d15b0ebc69 100644
--- a/src/frontend/src/pages/Index/Scan.tsx
+++ b/src/frontend/src/pages/Index/Scan.tsx
@@ -40,7 +40,7 @@ import {
   IconX
 } from '@tabler/icons-react';
 import { Html5Qrcode } from 'html5-qrcode';
-import { CameraDevice } from 'html5-qrcode/camera/core';
+import type { CameraDevice } from 'html5-qrcode/camera/core';
 import { useEffect, useMemo, useState } from 'react';
 
 import { api } from '../../App';
@@ -159,10 +159,10 @@ export default function Scan() {
 
         // Fetch instance data
         if (item.model && item.pk) {
-          let model_info = ModelInformationDict[item.model];
+          const model_info = ModelInformationDict[item.model];
 
-          if (model_info && model_info.api_endpoint) {
-            let url = apiUrl(model_info.api_endpoint, item.pk);
+          if (model_info?.api_endpoint) {
+            const url = apiUrl(model_info.api_endpoint, item.pk);
 
             api
               .get(url)
@@ -217,7 +217,7 @@ export default function Scan() {
     { value: InputMethod.ImageBarcode, label: t`Image Barcode` }
   ];
 
-  const inp = (function () {
+  const inp = (() => {
     switch (inputValue) {
       case InputMethod.Manual:
         return <InputManual action={addItems} />;
@@ -257,28 +257,28 @@ export default function Scan() {
     if (uniqueObjectTypes.length === 0) {
       return (
         <Group gap={0}>
-          <IconQuestionMark color="orange" />
+          <IconQuestionMark color='orange' />
           <Trans>Selected elements are not known</Trans>
         </Group>
       );
     } else if (uniqueObjectTypes.length > 1) {
       return (
         <Group gap={0}>
-          <IconAlertCircle color="orange" />
+          <IconAlertCircle color='orange' />
           <Trans>Multiple object types selected</Trans>
         </Group>
       );
     }
     return (
       <>
-        <Text fz="sm" c="dimmed">
+        <Text fz='sm' c='dimmed'>
           <Trans>Actions for {uniqueObjectTypes[0]} </Trans>
         </Text>
         <Group>
           <ActionIcon
             onClick={notYetImplemented}
             title={t`Count`}
-            variant="default"
+            variant='default'
           >
             <IconNumber />
           </ActionIcon>
@@ -290,8 +290,8 @@ export default function Scan() {
   // rendering
   return (
     <>
-      <Group justify="space-between">
-        <Group justify="left">
+      <Group justify='space-between'>
+        <Group justify='left'>
           <StylishText>
             <Trans>Scan Page</Trans>
           </StylishText>
@@ -301,8 +301,8 @@ export default function Scan() {
         </Group>
         <Button
           onClick={toggleFullscreen}
-          size="sm"
-          variant="subtle"
+          size='sm'
+          variant='subtle'
           title={t`Toggle Fullscreen`}
         >
           {fullscreen ? <IconArrowsMaximize /> : <IconArrowsMinimize />}
@@ -312,8 +312,8 @@ export default function Scan() {
       <Grid maw={'100%'}>
         <Grid.Col span={4}>
           <Stack>
-            <Stack gap="xs">
-              <Group justify="space-between">
+            <Stack gap='xs'>
+              <Group justify='space-between'>
                 <TitleWithDoc
                   order={3}
                   text={t`Select the input method you want to use to scan items.`}
@@ -347,15 +347,15 @@ export default function Scan() {
                   <Text>
                     <Trans>{selection.length} items selected</Trans>
                   </Text>
-                  <Text fz="sm" c="dimmed">
+                  <Text fz='sm' c='dimmed'>
                     <Trans>General Actions</Trans>
                   </Text>
                   <Group>
                     <ActionIcon
-                      color="red"
+                      color='red'
                       onClick={btnDeleteHistory}
                       title={t`Delete`}
-                      variant="default"
+                      variant='default'
                     >
                       <IconTrash />
                     </ActionIcon>
@@ -363,7 +363,7 @@ export default function Scan() {
                       onClick={btnRunSelectedBarcode}
                       disabled={selection.length > 1}
                       title={t`Lookup part`}
-                      variant="default"
+                      variant='default'
                     >
                       <IconSearch />
                     </ActionIcon>
@@ -371,7 +371,7 @@ export default function Scan() {
                       onClick={btnOpenSelectedLink}
                       disabled={!selectionLinked}
                       title={t`Open Link`}
-                      variant="default"
+                      variant='default'
                     >
                       <IconLink />
                     </ActionIcon>
@@ -383,7 +383,7 @@ export default function Scan() {
           </Stack>
         </Grid.Col>
         <Grid.Col span={8}>
-          <Group justify="space-between">
+          <Group justify='space-between'>
             <TitleWithDoc
               order={3}
               text={t`History is locally kept in this browser.`}
@@ -392,9 +392,9 @@ export default function Scan() {
               <Trans>History</Trans>
             </TitleWithDoc>
             <ActionIcon
-              color="red"
+              color='red'
               onClick={btnDeleteFullHistory}
-              variant="default"
+              variant='default'
               title={t`Delete History`}
             >
               <IconTrash />
@@ -465,7 +465,7 @@ function HistoryTable({
     );
   return (
     <ScrollArea>
-      <Table miw={800} verticalSpacing="sm">
+      <Table miw={800} verticalSpacing='sm'>
         <thead>
           <tr>
             <th style={{ width: rem(40) }}>
@@ -549,13 +549,13 @@ function InputManual({ action }: Readonly<ScanInputInterface>) {
           onChange={(event) => setValue(event.currentTarget.value)}
           onKeyDown={getHotkeyHandler([['Enter', btnAddItem]])}
         />
-        <ActionIcon onClick={btnAddItem} w={16} variant="default">
+        <ActionIcon onClick={btnAddItem} w={16} variant='default'>
           <IconPlus />
         </ActionIcon>
       </Group>
 
       {IS_DEV_OR_DEMO && (
-        <Button onClick={btnAddDummyItem} variant="outline">
+        <Button onClick={btnAddDummyItem} variant='outline'>
           <Trans>Add dummy item</Trans>
         </Button>
       )}
@@ -579,7 +579,7 @@ export function InputImageBarcode({
   const [wasAutoPaused, setWasAutoPaused] = useState<boolean>(false);
   const documentState = useDocumentVisibility();
 
-  let lastValue: string = '';
+  let lastValue = '';
 
   // Mount QR code once we are loaded
   useEffect(() => {
@@ -727,8 +727,8 @@ export function InputImageBarcode({
   }, [cameraValue]);
 
   return (
-    <Stack gap="xs">
-      <Group gap="xs" preventGrowOverflow>
+    <Stack gap='xs'>
+      <Group gap='xs' preventGrowOverflow>
         <Select
           value={cameraValue}
           onChange={setCameraValue}
@@ -736,24 +736,24 @@ export function InputImageBarcode({
             return { value: device.id, label: device.label };
           })}
           maw={200}
-          size="sm"
+          size='sm'
         />
         {scanningEnabled ? (
           <ActionIcon
-            size="input-sm"
+            size='input-sm'
             onClick={btnStopScanning}
             title={t`Stop scanning`}
-            variant="default"
+            variant='default'
           >
             <IconPlayerStopFilled />
           </ActionIcon>
         ) : (
           <ActionIcon
-            size="input-sm"
+            size='input-sm'
             onClick={btnStartScanning}
             title={t`Start scanning`}
             disabled={!camId}
-            variant="default"
+            variant='default'
           >
             <IconPlayerPlayFilled />
           </ActionIcon>
@@ -764,9 +764,9 @@ export function InputImageBarcode({
         </Badge>
       </Group>
       {scanningEnabled ? (
-        <Container px={0} id="reader" w={'100%'} mih="300px" />
+        <Container px={0} id='reader' w={'100%'} mih='300px' />
       ) : (
-        <Container px={0} id="reader" w={'100%'} mih="300px">
+        <Container px={0} id='reader' w={'100%'} mih='300px'>
           {notScanningPlaceholder}
         </Container>
       )}
diff --git a/src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx b/src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx
index 9e1f7a710bc2..fcbda4e262a9 100644
--- a/src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx
@@ -4,7 +4,7 @@ import { IconKey, IconUser } from '@tabler/icons-react';
 import { useMemo } from 'react';
 
 import { YesNoUndefinedButton } from '../../../../components/buttons/YesNoButton';
-import { ApiFormFieldSet } from '../../../../components/forms/fields/ApiFormField';
+import type { ApiFormFieldSet } from '../../../../components/forms/fields/ApiFormField';
 import { ActionDropdown } from '../../../../components/items/ActionDropdown';
 import { ApiEndpoints } from '../../../../enums/ApiEndpoints';
 import { notYetImplemented } from '../../../../functions/notifications';
@@ -35,8 +35,8 @@ export function AccountDetailPanel() {
   return (
     <>
       {editUser.modal}
-      <Stack gap="xs">
-        <Group justify="space-between">
+      <Stack gap='xs'>
+        <Group justify='space-between'>
           <Title order={3}>
             <Trans>User Details</Trans>
           </Title>
diff --git a/src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx b/src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx
index 0915e4830f8f..089ee7102548 100644
--- a/src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx
+++ b/src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx
@@ -58,9 +58,9 @@ export function SecurityContent() {
         <SsoContent dataProvider={dataProvider} />
       ) : (
         <Alert
-          icon={<IconAlertCircle size="1rem" />}
+          icon={<IconAlertCircle size='1rem' />}
           title={t`Not enabled`}
-          color="yellow"
+          color='yellow'
         >
           <Trans>Single Sign On is not enabled for this server </Trans>
         </Alert>
@@ -76,9 +76,9 @@ export function SecurityContent() {
             <MfaContent />
           ) : (
             <Alert
-              icon={<IconAlertCircle size="1rem" />}
+              icon={<IconAlertCircle size='1rem' />}
               title={t`Not enabled`}
-              color="yellow"
+              color='yellow'
             >
               <Trans>
                 Multifactor authentication is not configured for your account{' '}
@@ -135,28 +135,28 @@ function EmailContent() {
         <Radio.Group
           value={value}
           onChange={setValue}
-          name="email_accounts"
+          name='email_accounts'
           label={t`The following email addresses are associated with your account:`}
         >
-          <Stack mt="xs">
+          <Stack mt='xs'>
             {data.map((link: any) => (
               <Radio
                 key={link.id}
                 value={String(link.id)}
                 label={
-                  <Group justify="space-between">
+                  <Group justify='space-between'>
                     {link.email}
                     {link.primary && (
-                      <Badge color="blue">
+                      <Badge color='blue'>
                         <Trans>Primary</Trans>
                       </Badge>
                     )}
                     {link.verified ? (
-                      <Badge color="green">
+                      <Badge color='green'>
                         <Trans>Verified</Trans>
                       </Badge>
                     ) : (
-                      <Badge color="yellow">
+                      <Badge color='yellow'>
                         <Trans>Unverified</Trans>
                       </Badge>
                     )}
@@ -253,12 +253,12 @@ function SsoContent({ dataProvider }: Readonly<{ dataProvider: any }>) {
     const button = (
       <Button
         key={provider.id}
-        component="a"
+        component='a'
         href={provider.connect}
-        variant="outline"
+        variant='outline'
         disabled={!provider.configured}
       >
-        <Group justify="space-between">
+        <Group justify='space-between'>
           {provider.display_name}
           {provider.configured == false && <IconAlertCircle />}
         </Group>
@@ -276,9 +276,9 @@ function SsoContent({ dataProvider }: Readonly<{ dataProvider: any }>) {
       <Grid.Col span={6}>
         {data.length == 0 ? (
           <Alert
-            icon={<IconAlertCircle size="1rem" />}
+            icon={<IconAlertCircle size='1rem' />}
             title={t`Not configured`}
-            color="yellow"
+            color='yellow'
           >
             <Trans>
               There are no social network accounts connected to this account.{' '}
@@ -289,10 +289,10 @@ function SsoContent({ dataProvider }: Readonly<{ dataProvider: any }>) {
             <Radio.Group
               value={value}
               onChange={setValue}
-              name="sso_accounts"
+              name='sso_accounts'
               label={t`You can sign in to your account using any of the following third party accounts`}
             >
-              <Stack mt="xs">
+              <Stack mt='xs'>
                 {data.map((link: any) => (
                   <Radio
                     key={link.id}
@@ -315,7 +315,7 @@ function SsoContent({ dataProvider }: Readonly<{ dataProvider: any }>) {
             {currentProviders === undefined ? (
               <Trans>Loading</Trans>
             ) : (
-              <Stack gap="xs">
+              <Stack gap='xs'>
                 {currentProviders.map((provider: any) => (
                   <ProviderButton key={provider.id} provider={provider} />
                 ))}
@@ -369,7 +369,7 @@ function TokenContent() {
           ) : (
             <Button
               onClick={() => revokeToken(token.id)}
-              color="red"
+              color='red'
               disabled={!token.active}
             >
               <Trans>Revoke</Trans>
@@ -385,7 +385,7 @@ function TokenContent() {
 
   if (data.length == 0)
     return (
-      <Alert icon={<IconAlertCircle size="1rem" />} color="green">
+      <Alert icon={<IconAlertCircle size='1rem' />} color='green'>
         <Trans>No tokens configured</Trans>
       </Alert>
     );
diff --git a/src/frontend/src/pages/Index/Settings/AccountSettings/UserPanel.tsx b/src/frontend/src/pages/Index/Settings/AccountSettings/UserPanel.tsx
index d080eb913b64..ffea0c136e58 100644
--- a/src/frontend/src/pages/Index/Settings/AccountSettings/UserPanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AccountSettings/UserPanel.tsx
@@ -9,11 +9,11 @@ export function AccountContent() {
 
   return (
     <div>
-      <SimpleGrid cols={2} spacing="md">
-        <Container w="100%">
+      <SimpleGrid cols={2} spacing='md'>
+        <Container w='100%'>
           <AccountDetailPanel />
         </Container>
-        <Grid gutter="md">
+        <Grid gutter='md'>
           <Grid.Col>
             <UserTheme height={SECONDARY_COL_HEIGHT} />
           </Grid.Col>
diff --git a/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx b/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx
index 609ca51ba3ce..0f30aa05e437 100644
--- a/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx
@@ -96,7 +96,7 @@ export function UserTheme({ height }: Readonly<{ height: number }>) {
   }
 
   return (
-    <Container w="100%" mih={height} p={0}>
+    <Container w='100%' mih={height} p={0}>
       <Title order={3}>
         <Trans>Display Settings</Trans>
       </Title>
@@ -111,7 +111,7 @@ export function UserTheme({ height }: Readonly<{ height: number }>) {
             </Table.Td>
             <Table.Td>
               {IS_DEV && (
-                <Button onClick={enablePseudoLang} variant="light">
+                <Button onClick={enablePseudoLang} variant='light'>
                   <Trans>Use pseudo language</Trans>
                 </Button>
               )}
@@ -122,11 +122,11 @@ export function UserTheme({ height }: Readonly<{ height: number }>) {
               <Trans>Color Mode</Trans>
             </Table.Td>
             <Table.Td>
-              <Group justify="left">
+              <Group justify='left'>
                 <ColorToggle />
               </Group>
             </Table.Td>
-            <Table.Td></Table.Td>
+            <Table.Td />
           </Table.Tr>
           <Table.Tr>
             <Table.Td>
@@ -134,14 +134,14 @@ export function UserTheme({ height }: Readonly<{ height: number }>) {
             </Table.Td>
             <Table.Td>
               <ColorPicker
-                format="hex"
+                format='hex'
                 onChange={changePrimary}
                 withPicker={false}
                 swatches={Object.keys(LOOKUP)}
               />
             </Table.Td>
             <Table.Td>
-              <Button color={theme.primaryColor} variant="light">
+              <Button color={theme.primaryColor} variant='light'>
                 <Trans>Example</Trans>
               </Button>
             </Table.Td>
@@ -155,7 +155,7 @@ export function UserTheme({ height }: Readonly<{ height: number }>) {
             </Table.Td>
             <Table.Td>
               <ActionIcon
-                variant="default"
+                variant='default'
                 onClick={() => changeWhite('#FFFFFF')}
               >
                 <IconRestore />
@@ -171,7 +171,7 @@ export function UserTheme({ height }: Readonly<{ height: number }>) {
             </Table.Td>
             <Table.Td>
               <ActionIcon
-                variant="default"
+                variant='default'
                 onClick={() => changeBlack('#000000')}
               >
                 <IconRestore />
@@ -199,7 +199,7 @@ export function UserTheme({ height }: Readonly<{ height: number }>) {
               <Trans>Loader</Trans>
             </Table.Td>
             <Table.Td>
-              <Group justify="left">
+              <Group justify='left'>
                 <Select
                   data={loaderDate}
                   value={themeLoader}
@@ -208,8 +208,8 @@ export function UserTheme({ height }: Readonly<{ height: number }>) {
               </Group>
             </Table.Td>
             <Table.Td>
-              <Group justify="left">
-                <Loader type={themeLoader} mah={16} size="sm" />
+              <Group justify='left'>
+                <Loader type={themeLoader} mah={16} size='sm' />
               </Group>
             </Table.Td>
           </Table.Tr>
diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/CurrencyManagmentPanel.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/CurrencyManagmentPanel.tsx
index 5a963e606a79..651769739755 100644
--- a/src/frontend/src/pages/Index/Settings/AdminCenter/CurrencyManagmentPanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AdminCenter/CurrencyManagmentPanel.tsx
@@ -57,7 +57,7 @@ export function CurrencyTable({
   const tableActions = useMemo(() => {
     return [
       <ActionButton
-        key="refresh"
+        key='refresh'
         onClick={refreshCurrencies}
         tooltip={t`Refresh currency exchange rates`}
         icon={<IconReload />}
@@ -75,7 +75,7 @@ export function CurrencyTable({
         tableActions: tableActions,
         dataFormatter: (data: any) => {
           setInfo(data);
-          let rates = data.exchange_rates ?? {};
+          const rates = data.exchange_rates ?? {};
 
           return Object.entries(rates).map(([currency, rate]) => {
             return {
@@ -93,7 +93,7 @@ export default function CurrencyManagmentPanel() {
   const [info, setInfo] = useState<any>({});
 
   return (
-    <Stack gap="xs">
+    <Stack gap='xs'>
       <FactCollection
         items={[
           { title: t`Last fetched`, value: info?.updated },
diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx
index aa8d1c3904cd..1fd1e900f0a0 100644
--- a/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx
+++ b/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx
@@ -31,7 +31,7 @@ import { lazy, useMemo } from 'react';
 import PermissionDenied from '../../../../components/errors/PermissionDenied';
 import { PlaceholderPill } from '../../../../components/items/Placeholder';
 import { SettingsHeader } from '../../../../components/nav/SettingsHeader';
-import { PanelType } from '../../../../components/panels/Panel';
+import type { PanelType } from '../../../../components/panels/Panel';
 import { PanelGroup } from '../../../../components/panels/PanelGroup';
 import { GlobalSettingList } from '../../../../components/settings/SettingList';
 import { Loadable } from '../../../../functions/loading';
@@ -145,7 +145,7 @@ export default function AdminCenter() {
         label: t`Project Codes`,
         icon: <IconListDetails />,
         content: (
-          <Stack gap="xs">
+          <Stack gap='xs'>
             <GlobalSettingList keys={['PROJECT_CODES_ENABLED']} />
             <Divider />
             <ProjectCodeTable />
@@ -221,17 +221,17 @@ export default function AdminCenter() {
         <Trans>Quick Actions</Trans>
       </Title>
       <SimpleGrid cols={3}>
-        <Paper shadow="xs" p="sm" withBorder>
+        <Paper shadow='xs' p='sm' withBorder>
           <Text>
             <Trans>Add a new user</Trans>
           </Text>
         </Paper>
 
-        <Paper shadow="xs" p="sm" withBorder>
+        <Paper shadow='xs' p='sm' withBorder>
           <PlaceholderPill />
         </Paper>
 
-        <Paper shadow="xs" p="sm" withBorder>
+        <Paper shadow='xs' p='sm' withBorder>
           <PlaceholderPill />
         </Paper>
       </SimpleGrid>
@@ -245,18 +245,18 @@ export default function AdminCenter() {
   return (
     <>
       {user.isStaff() ? (
-        <Stack gap="xs">
+        <Stack gap='xs'>
           <SettingsHeader
-            label="admin"
+            label='admin'
             title={t`Admin Center`}
             subtitle={t`Advanced Options`}
           />
           <QuickAction />
           <PanelGroup
-            pageKey="admin-center"
+            pageKey='admin-center'
             panels={adminCenterPanels}
             collapsible={true}
-            model="admincenter"
+            model='admincenter'
             id={null}
           />
         </Stack>
diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/MachineManagementPanel.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/MachineManagementPanel.tsx
index c3a292a9c1a5..9aa9b5559653 100644
--- a/src/frontend/src/pages/Index/Settings/AdminCenter/MachineManagementPanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AdminCenter/MachineManagementPanel.tsx
@@ -43,37 +43,37 @@ export default function MachineManagementPanel() {
 
   return (
     <Accordion multiple defaultValue={['machinelist', 'machinetypes']}>
-      <Accordion.Item value="machinelist">
+      <Accordion.Item value='machinelist'>
         <Accordion.Control>
-          <StylishText size="lg">{t`Machines`}</StylishText>
+          <StylishText size='lg'>{t`Machines`}</StylishText>
         </Accordion.Control>
         <Accordion.Panel>
           <MachineListTable props={{}} />
         </Accordion.Panel>
       </Accordion.Item>
-      <Accordion.Item value="machinetypes">
+      <Accordion.Item value='machinetypes'>
         <Accordion.Control>
-          <StylishText size="lg">{t`Machine Types`}</StylishText>
+          <StylishText size='lg'>{t`Machine Types`}</StylishText>
         </Accordion.Control>
         <Accordion.Panel>
           <MachineTypeListTable props={{}} />
         </Accordion.Panel>
       </Accordion.Item>
-      <Accordion.Item value="machineerrors">
+      <Accordion.Item value='machineerrors'>
         <Accordion.Control>
-          <StylishText size="lg">{t`Machine Errors`}</StylishText>
+          <StylishText size='lg'>{t`Machine Errors`}</StylishText>
         </Accordion.Control>
         <Accordion.Panel>
-          <Stack gap="xs">
+          <Stack gap='xs'>
             <Group
-              justify="space-beteen"
-              wrap="nowrap"
+              justify='space-beteen'
+              wrap='nowrap'
               style={{ width: '100%' }}
             >
               {hasErrors ? (
                 <Alert
                   flex={10}
-                  color="red"
+                  color='red'
                   title={t`Registry Registry Errors`}
                   icon={<IconInfoCircle />}
                 >
@@ -82,14 +82,14 @@ export default function MachineManagementPanel() {
               ) : (
                 <Alert
                   flex={10}
-                  color="green"
+                  color='green'
                   title={t`Machine Registry Errors`}
                   icon={<IconInfoCircle />}
                 >
                   <Text>{t`There are no machine registry errors`}</Text>
                 </Alert>
               )}
-              <ActionIcon variant="outline" onClick={() => refetch()}>
+              <ActionIcon variant='outline' onClick={() => refetch()}>
                 <IconRefresh />
               </ActionIcon>
             </Group>
diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/PluginManagementPanel.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/PluginManagementPanel.tsx
index 59d1445b49b5..dade090fe549 100644
--- a/src/frontend/src/pages/Index/Settings/AdminCenter/PluginManagementPanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AdminCenter/PluginManagementPanel.tsx
@@ -30,7 +30,7 @@ export default function PluginManagementPanel() {
         <Alert
           title={<Trans>Info</Trans>}
           icon={<IconInfoCircle />}
-          color="blue"
+          color='blue'
         >
           <Trans>
             External plugins are not enabled for this InvenTree installation.
@@ -38,19 +38,19 @@ export default function PluginManagementPanel() {
         </Alert>
       )}
 
-      <Accordion defaultValue="pluginlist">
-        <Accordion.Item value="pluginlist">
+      <Accordion defaultValue='pluginlist'>
+        <Accordion.Item value='pluginlist'>
           <Accordion.Control>
-            <StylishText size="lg">{t`Plugins`}</StylishText>
+            <StylishText size='lg'>{t`Plugins`}</StylishText>
           </Accordion.Control>
           <Accordion.Panel>
             <PluginListTable />
           </Accordion.Panel>
         </Accordion.Item>
 
-        <Accordion.Item value="pluginsettings">
+        <Accordion.Item value='pluginsettings'>
           <Accordion.Control>
-            <StylishText size="lg">{t`Plugin Settings`}</StylishText>
+            <StylishText size='lg'>{t`Plugin Settings`}</StylishText>
           </Accordion.Control>
           <Accordion.Panel>
             <GlobalSettingList
@@ -68,9 +68,9 @@ export default function PluginManagementPanel() {
           </Accordion.Panel>
         </Accordion.Item>
         {user.isSuperuser() && (
-          <Accordion.Item value="pluginerror">
+          <Accordion.Item value='pluginerror'>
             <Accordion.Control>
-              <StylishText size="lg">{t`Plugin Errors`}</StylishText>
+              <StylishText size='lg'>{t`Plugin Errors`}</StylishText>
             </Accordion.Control>
             <Accordion.Panel>
               <PluginErrorTable />
diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/StocktakePanel.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/StocktakePanel.tsx
index fdc10e1f362d..62a9cf8b3fc4 100644
--- a/src/frontend/src/pages/Index/Settings/AdminCenter/StocktakePanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AdminCenter/StocktakePanel.tsx
@@ -12,7 +12,7 @@ const StocktakeReportTable = Loadable(
 
 export default function StocktakePanel() {
   return (
-    <Stack gap="xs">
+    <Stack gap='xs'>
       <GlobalSettingList
         keys={[
           'STOCKTAKE_ENABLE',
@@ -21,7 +21,7 @@ export default function StocktakePanel() {
           'STOCKTAKE_DELETE_REPORT_DAYS'
         ]}
       />
-      <StylishText size="lg">
+      <StylishText size='lg'>
         <Trans>Stocktake Reports</Trans>
       </StylishText>
       <Divider />
diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/TaskManagementPanel.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/TaskManagementPanel.tsx
index 0e20cfad7e41..8ee3e5841749 100644
--- a/src/frontend/src/pages/Index/Settings/AdminCenter/TaskManagementPanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AdminCenter/TaskManagementPanel.tsx
@@ -26,11 +26,11 @@ export default function TaskManagementPanel() {
   return (
     <>
       {taskInfo?.is_running == false && (
-        <Alert title={t`Background worker not running`} color="red">
+        <Alert title={t`Background worker not running`} color='red'>
           <Text>{t`The background task manager service is not running. Contact your system administrator.`}</Text>
         </Alert>
       )}
-      <Stack gap="xs">
+      <Stack gap='xs'>
         <FactCollection
           items={[
             { title: t`Pending Tasks`, value: taskInfo?.pending_tasks },
@@ -39,26 +39,26 @@ export default function TaskManagementPanel() {
           ]}
         />
         <Divider />
-        <Accordion defaultValue="pending">
-          <Accordion.Item value="pending" key="pending-tasks">
+        <Accordion defaultValue='pending'>
+          <Accordion.Item value='pending' key='pending-tasks'>
             <Accordion.Control>
-              <StylishText size="lg">{t`Pending Tasks`}</StylishText>
+              <StylishText size='lg'>{t`Pending Tasks`}</StylishText>
             </Accordion.Control>
             <Accordion.Panel>
               <PendingTasksTable onRecordsUpdated={refreshTaskInfo} />
             </Accordion.Panel>
           </Accordion.Item>
-          <Accordion.Item value="scheduled" key="scheduled-tasks">
+          <Accordion.Item value='scheduled' key='scheduled-tasks'>
             <Accordion.Control>
-              <StylishText size="lg">{t`Scheduled Tasks`}</StylishText>
+              <StylishText size='lg'>{t`Scheduled Tasks`}</StylishText>
             </Accordion.Control>
             <Accordion.Panel>
               <ScheduledTasksTable />
             </Accordion.Panel>
           </Accordion.Item>
-          <Accordion.Item value="failed" key="failed-tasks">
+          <Accordion.Item value='failed' key='failed-tasks'>
             <Accordion.Control>
-              <StylishText size="lg">{t`Failed Tasks`}</StylishText>
+              <StylishText size='lg'>{t`Failed Tasks`}</StylishText>
             </Accordion.Control>
             <Accordion.Panel>
               <FailedTasksTable onRecordsUpdated={refreshTaskInfo} />
diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/UnitManagmentPanel.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/UnitManagmentPanel.tsx
index 6c947b71b5aa..53f1d5922b27 100644
--- a/src/frontend/src/pages/Index/Settings/AdminCenter/UnitManagmentPanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AdminCenter/UnitManagmentPanel.tsx
@@ -34,7 +34,7 @@ function AllUnitTable() {
         enablePagination: false,
         enableColumnSwitching: false,
         dataFormatter: (data: any) => {
-          let units = data.available_units ?? {};
+          const units = data.available_units ?? {};
           return Object.entries(units).map(([key, values]: [string, any]) => {
             return {
               name: values.name,
@@ -51,19 +51,19 @@ function AllUnitTable() {
 
 export default function UnitManagmentPanel() {
   return (
-    <Stack gap="xs">
-      <Accordion defaultValue="custom">
-        <Accordion.Item value="custom" key="custom">
+    <Stack gap='xs'>
+      <Accordion defaultValue='custom'>
+        <Accordion.Item value='custom' key='custom'>
           <Accordion.Control>
-            <StylishText size="lg">{t`Custom Units`}</StylishText>
+            <StylishText size='lg'>{t`Custom Units`}</StylishText>
           </Accordion.Control>
           <Accordion.Panel>
             <CustomUnitsTable />
           </Accordion.Panel>
         </Accordion.Item>
-        <Accordion.Item value="all" key="all">
+        <Accordion.Item value='all' key='all'>
           <Accordion.Control>
-            <StylishText size="lg">{t`All units`}</StylishText>
+            <StylishText size='lg'>{t`All units`}</StylishText>
           </Accordion.Control>
           <Accordion.Panel>
             <AllUnitTable />
diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/UserManagementPanel.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/UserManagementPanel.tsx
index 1a59ffc60331..7b231af0ee50 100644
--- a/src/frontend/src/pages/Index/Settings/AdminCenter/UserManagementPanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AdminCenter/UserManagementPanel.tsx
@@ -8,7 +8,7 @@ import { UserTable } from '../../../../tables/settings/UserTable';
 
 export default function UserManagementPanel() {
   return (
-    <Stack gap="xs">
+    <Stack gap='xs'>
       <Title order={5}>
         <Trans>Users</Trans>
       </Title>
@@ -28,7 +28,7 @@ export default function UserManagementPanel() {
           <Trans>Settings</Trans>
         </Text>
         <Group>
-          <Text c="dimmed">
+          <Text c='dimmed'>
             <Trans>
               Select settings relevant for user lifecycle. More available in
             </Trans>
diff --git a/src/frontend/src/pages/Index/Settings/SystemSettings.tsx b/src/frontend/src/pages/Index/Settings/SystemSettings.tsx
index 249ddba48a08..cf821cd8a356 100644
--- a/src/frontend/src/pages/Index/Settings/SystemSettings.tsx
+++ b/src/frontend/src/pages/Index/Settings/SystemSettings.tsx
@@ -1,4 +1,4 @@
-import { Trans, t } from '@lingui/macro';
+import { t } from '@lingui/macro';
 import { Skeleton, Stack } from '@mantine/core';
 import {
   IconBellCog,
@@ -20,7 +20,7 @@ import { useMemo } from 'react';
 import PermissionDenied from '../../../components/errors/PermissionDenied';
 import { PlaceholderPanel } from '../../../components/items/Placeholder';
 import { SettingsHeader } from '../../../components/nav/SettingsHeader';
-import { PanelType } from '../../../components/panels/Panel';
+import type { PanelType } from '../../../components/panels/Panel';
 import { PanelGroup } from '../../../components/panels/PanelGroup';
 import { GlobalSettingList } from '../../../components/settings/SettingList';
 import { useServerApiState } from '../../../states/ApiState';
@@ -304,16 +304,16 @@ export default function SystemSettings() {
   return (
     <>
       {user.isStaff() ? (
-        <Stack gap="xs">
+        <Stack gap='xs'>
           <SettingsHeader
-            label="system"
+            label='system'
             title={t`System Settings`}
             subtitle={server.instance || ''}
           />
           <PanelGroup
-            pageKey="system-settings"
+            pageKey='system-settings'
             panels={systemSettingsPanels}
-            model="systemsettings"
+            model='systemsettings'
             id={null}
           />
         </Stack>
diff --git a/src/frontend/src/pages/Index/Settings/UserSettings.tsx b/src/frontend/src/pages/Index/Settings/UserSettings.tsx
index f30b63591b59..1d644b03b85b 100644
--- a/src/frontend/src/pages/Index/Settings/UserSettings.tsx
+++ b/src/frontend/src/pages/Index/Settings/UserSettings.tsx
@@ -1,4 +1,4 @@
-import { Trans, t } from '@lingui/macro';
+import { t } from '@lingui/macro';
 import { Skeleton, Stack } from '@mantine/core';
 import {
   IconBellCog,
@@ -12,7 +12,7 @@ import {
 import { useMemo } from 'react';
 
 import { SettingsHeader } from '../../../components/nav/SettingsHeader';
-import { PanelType } from '../../../components/panels/Panel';
+import type { PanelType } from '../../../components/panels/Panel';
 import { PanelGroup } from '../../../components/panels/PanelGroup';
 import { UserSettingList } from '../../../components/settings/SettingList';
 import { useUserState } from '../../../states/UserState';
@@ -146,9 +146,9 @@ export default function UserSettings() {
   }
 
   return (
-    <Stack gap="xs">
+    <Stack gap='xs'>
       <SettingsHeader
-        label="user"
+        label='user'
         title={t`Account Settings`}
         subtitle={
           user?.first_name && user?.last_name
@@ -158,9 +158,9 @@ export default function UserSettings() {
         shorthand={user?.username || ''}
       />
       <PanelGroup
-        pageKey="user-settings"
+        pageKey='user-settings'
         panels={userSettingsPanels}
-        model="usersettings"
+        model='usersettings'
         id={null}
       />
     </Stack>
diff --git a/src/frontend/src/pages/Notifications.tsx b/src/frontend/src/pages/Notifications.tsx
index 9d10dac123f3..101c3512788b 100644
--- a/src/frontend/src/pages/Notifications.tsx
+++ b/src/frontend/src/pages/Notifications.tsx
@@ -63,7 +63,7 @@ export default function NotificationsPage() {
       {
         name: 'unread',
         label: t`Notifications`,
-        icon: <IconBellExclamation size="18" />,
+        icon: <IconBellExclamation size='18' />,
         content: (
           <NotificationTable
             params={{ read: false }}
@@ -74,7 +74,10 @@ export default function NotificationsPage() {
                 color: 'green',
                 icon: <IconCircleCheck />,
                 onClick: () => {
-                  let url = apiUrl(ApiEndpoints.notifications_list, record.pk);
+                  const url = apiUrl(
+                    ApiEndpoints.notifications_list,
+                    record.pk
+                  );
                   api
                     .patch(url, {
                       read: true
@@ -88,7 +91,7 @@ export default function NotificationsPage() {
             tableActions={[
               <ActionButton
                 icon={<IconMailOpened />}
-                tooltip={`Mark all as read`}
+                tooltip={t`Mark all as read`}
                 onClick={markAllAsRead}
               />
             ]}
@@ -98,7 +101,7 @@ export default function NotificationsPage() {
       {
         name: 'history',
         label: t`History`,
-        icon: <IconBellCheck size="18" />,
+        icon: <IconBellCheck size='18' />,
         content: (
           <NotificationTable
             params={{ read: true }}
@@ -108,7 +111,10 @@ export default function NotificationsPage() {
                 title: t`Mark as unread`,
                 icon: <IconMail />,
                 onClick: () => {
-                  let url = apiUrl(ApiEndpoints.notifications_list, record.pk);
+                  const url = apiUrl(
+                    ApiEndpoints.notifications_list,
+                    record.pk
+                  );
 
                   api
                     .patch(url, {
@@ -134,9 +140,9 @@ export default function NotificationsPage() {
             ]}
             tableActions={[
               <ActionButton
-                color="red"
+                color='red'
                 icon={<IconTrash />}
-                tooltip={`Delete notifications`}
+                tooltip={t`Delete notifications`}
                 onClick={deleteNotifications}
               />
             ]}
@@ -149,7 +155,7 @@ export default function NotificationsPage() {
   return (
     <Stack>
       <PageDetail title={t`Notifications`} />
-      <PanelGroup pageKey="notifications" panels={notificationPanels} />
+      <PanelGroup pageKey='notifications' panels={notificationPanels} />
     </Stack>
   );
 }
diff --git a/src/frontend/src/pages/build/BuildDetail.tsx b/src/frontend/src/pages/build/BuildDetail.tsx
index f7c0e0c1aeaa..d30742494287 100644
--- a/src/frontend/src/pages/build/BuildDetail.tsx
+++ b/src/frontend/src/pages/build/BuildDetail.tsx
@@ -17,7 +17,10 @@ import { useParams } from 'react-router-dom';
 import AdminButton from '../../components/buttons/AdminButton';
 import PrimaryActionButton from '../../components/buttons/PrimaryActionButton';
 import { PrintingActions } from '../../components/buttons/PrintingActions';
-import { DetailsField, DetailsTable } from '../../components/details/Details';
+import {
+  type DetailsField,
+  DetailsTable
+} from '../../components/details/Details';
 import { DetailsImage } from '../../components/details/DetailsImage';
 import { ItemDetailsGrid } from '../../components/details/ItemDetails';
 import {
@@ -32,7 +35,7 @@ import InstanceDetail from '../../components/nav/InstanceDetail';
 import { PageDetail } from '../../components/nav/PageDetail';
 import AttachmentPanel from '../../components/panels/AttachmentPanel';
 import NotesPanel from '../../components/panels/NotesPanel';
-import { PanelType } from '../../components/panels/Panel';
+import type { PanelType } from '../../components/panels/Panel';
 import { PanelGroup } from '../../components/panels/PanelGroup';
 import { StatusRenderer } from '../../components/render/StatusRenderer';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
@@ -85,7 +88,7 @@ export default function BuildDetail() {
       return <Skeleton />;
     }
 
-    let tl: DetailsField[] = [
+    const tl: DetailsField[] = [
       {
         type: 'link',
         name: 'part',
@@ -130,7 +133,7 @@ export default function BuildDetail() {
       }
     ];
 
-    let tr: DetailsField[] = [
+    const tr: DetailsField[] = [
       {
         type: 'text',
         name: 'quantity',
@@ -155,7 +158,7 @@ export default function BuildDetail() {
       }
     ];
 
-    let bl: DetailsField[] = [
+    const bl: DetailsField[] = [
       {
         type: 'text',
         name: 'issued_by',
@@ -201,7 +204,7 @@ export default function BuildDetail() {
       }
     ];
 
-    let br: DetailsField[] = [
+    const br: DetailsField[] = [
       {
         type: 'link',
         name: 'take_from',
@@ -283,7 +286,7 @@ export default function BuildDetail() {
         content: (
           <StockItemTable
             allowAdd={false}
-            tableName="build-outputs"
+            tableName='build-outputs'
             params={{
               build: id,
               is_building: false
@@ -311,7 +314,7 @@ export default function BuildDetail() {
         content: (
           <StockItemTable
             allowAdd={false}
-            tableName="build-consumed"
+            tableName='build-consumed'
             params={{
               consumed_by: id
             }}
@@ -451,16 +454,16 @@ export default function BuildDetail() {
     return [
       <PrimaryActionButton
         title={t`Issue Order`}
-        icon="issue"
+        icon='issue'
         hidden={!canIssue}
-        color="blue"
+        color='blue'
         onClick={issueOrder.open}
       />,
       <PrimaryActionButton
         title={t`Complete Order`}
-        icon="complete"
+        icon='complete'
         hidden={!canComplete}
-        color="green"
+        color='green'
         onClick={completeOrder.open}
       />,
       <AdminButton model={ModelType.build} pk={build.pk} />,
@@ -523,7 +526,7 @@ export default function BuildDetail() {
       {issueOrder.modal}
       {completeOrder.modal}
       <InstanceDetail status={requestStatus} loading={instanceQuery.isFetching}>
-        <Stack gap="xs">
+        <Stack gap='xs'>
           <PageDetail
             title={build.reference}
             subtitle={build.title}
@@ -541,7 +544,7 @@ export default function BuildDetail() {
             actions={buildActions}
           />
           <PanelGroup
-            pageKey="build"
+            pageKey='build'
             panels={buildPanels}
             instance={build}
             model={ModelType.build}
diff --git a/src/frontend/src/pages/build/BuildIndex.tsx b/src/frontend/src/pages/build/BuildIndex.tsx
index b5d0197e509f..c2be829f6284 100644
--- a/src/frontend/src/pages/build/BuildIndex.tsx
+++ b/src/frontend/src/pages/build/BuildIndex.tsx
@@ -35,9 +35,9 @@ export default function BuildIndex() {
     <Stack>
       <PageDetail title={t`Manufacturing`} actions={[]} />
       <PanelGroup
-        pageKey="build-index"
+        pageKey='build-index'
         panels={panels}
-        model="manufacturing"
+        model='manufacturing'
         id={null}
       />
     </Stack>
diff --git a/src/frontend/src/pages/company/CompanyDetail.tsx b/src/frontend/src/pages/company/CompanyDetail.tsx
index 5d71d4d66247..48217a920a0a 100644
--- a/src/frontend/src/pages/company/CompanyDetail.tsx
+++ b/src/frontend/src/pages/company/CompanyDetail.tsx
@@ -12,11 +12,14 @@ import {
   IconTruckReturn,
   IconUsersGroup
 } from '@tabler/icons-react';
-import { ReactNode, useMemo } from 'react';
+import { type ReactNode, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
 import AdminButton from '../../components/buttons/AdminButton';
-import { DetailsField, DetailsTable } from '../../components/details/Details';
+import {
+  type DetailsField,
+  DetailsTable
+} from '../../components/details/Details';
 import DetailsBadge from '../../components/details/DetailsBadge';
 import { DetailsImage } from '../../components/details/DetailsImage';
 import { ItemDetailsGrid } from '../../components/details/ItemDetails';
@@ -25,12 +28,12 @@ import {
   EditItemAction,
   OptionsActionDropdown
 } from '../../components/items/ActionDropdown';
-import { Breadcrumb } from '../../components/nav/BreadcrumbList';
+import type { Breadcrumb } from '../../components/nav/BreadcrumbList';
 import InstanceDetail from '../../components/nav/InstanceDetail';
 import { PageDetail } from '../../components/nav/PageDetail';
 import AttachmentPanel from '../../components/panels/AttachmentPanel';
 import NotesPanel from '../../components/panels/NotesPanel';
-import { PanelType } from '../../components/panels/Panel';
+import type { PanelType } from '../../components/panels/Panel';
 import { PanelGroup } from '../../components/panels/PanelGroup';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
@@ -82,7 +85,7 @@ export default function CompanyDetail(props: Readonly<CompanyDetailProps>) {
       return <Skeleton />;
     }
 
-    let tl: DetailsField[] = [
+    const tl: DetailsField[] = [
       {
         type: 'text',
         name: 'description',
@@ -113,7 +116,7 @@ export default function CompanyDetail(props: Readonly<CompanyDetailProps>) {
       }
     ];
 
-    let tr: DetailsField[] = [
+    const tr: DetailsField[] = [
       {
         type: 'string',
         name: 'currency',
@@ -206,7 +209,7 @@ export default function CompanyDetail(props: Readonly<CompanyDetailProps>) {
         content: company?.pk && (
           <StockItemTable
             allowAdd={false}
-            tableName="company-stock"
+            tableName='company-stock'
             params={{ company: company.pk }}
           />
         )
@@ -237,7 +240,7 @@ export default function CompanyDetail(props: Readonly<CompanyDetailProps>) {
         content: company?.pk ? (
           <StockItemTable
             allowAdd={false}
-            tableName="assigned-stock"
+            tableName='assigned-stock'
             params={{ customer: company.pk }}
           />
         ) : (
@@ -305,7 +308,7 @@ export default function CompanyDetail(props: Readonly<CompanyDetailProps>) {
     return [
       <DetailsBadge
         label={t`Inactive`}
-        color="red"
+        color='red'
         visible={company.active == false}
       />
     ];
@@ -316,9 +319,9 @@ export default function CompanyDetail(props: Readonly<CompanyDetailProps>) {
       {editCompany.modal}
       {deleteCompany.modal}
       <InstanceDetail status={requestStatus} loading={instanceQuery.isFetching}>
-        <Stack gap="xs">
+        <Stack gap='xs'>
           <PageDetail
-            title={t`Company` + `: ${company.name}`}
+            title={`${t`Company`}: ${company.name}`}
             subtitle={company.description}
             actions={companyActions}
             imageUrl={company.image}
@@ -328,7 +331,7 @@ export default function CompanyDetail(props: Readonly<CompanyDetailProps>) {
             editEnabled={user.hasChangePermission(ModelType.company)}
           />
           <PanelGroup
-            pageKey="company"
+            pageKey='company'
             panels={companyPanels}
             instance={company}
             model={ModelType.company}
diff --git a/src/frontend/src/pages/company/ManufacturerPartDetail.tsx b/src/frontend/src/pages/company/ManufacturerPartDetail.tsx
index 5d5465eb3b21..82c5ad5c9fd4 100644
--- a/src/frontend/src/pages/company/ManufacturerPartDetail.tsx
+++ b/src/frontend/src/pages/company/ManufacturerPartDetail.tsx
@@ -9,7 +9,10 @@ import { useMemo } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import AdminButton from '../../components/buttons/AdminButton';
-import { DetailsField, DetailsTable } from '../../components/details/Details';
+import {
+  type DetailsField,
+  DetailsTable
+} from '../../components/details/Details';
 import { DetailsImage } from '../../components/details/DetailsImage';
 import { ItemDetailsGrid } from '../../components/details/ItemDetails';
 import {
@@ -22,7 +25,7 @@ import InstanceDetail from '../../components/nav/InstanceDetail';
 import { PageDetail } from '../../components/nav/PageDetail';
 import AttachmentPanel from '../../components/panels/AttachmentPanel';
 import NotesPanel from '../../components/panels/NotesPanel';
-import { PanelType } from '../../components/panels/Panel';
+import type { PanelType } from '../../components/panels/Panel';
 import { PanelGroup } from '../../components/panels/PanelGroup';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
@@ -65,9 +68,9 @@ export default function ManufacturerPartDetail() {
       return <Skeleton />;
     }
 
-    let data = manufacturerPart ?? {};
+    const data = manufacturerPart ?? {};
 
-    let tl: DetailsField[] = [
+    const tl: DetailsField[] = [
       {
         type: 'link',
         name: 'part',
@@ -93,7 +96,7 @@ export default function ManufacturerPartDetail() {
       }
     ];
 
-    let tr: DetailsField[] = [
+    const tr: DetailsField[] = [
       {
         type: 'link',
         name: 'manufacturer',
@@ -229,10 +232,12 @@ export default function ManufacturerPartDetail() {
   const manufacturerPartActions = useMemo(() => {
     return [
       <AdminButton
+        key='admin'
         model={ModelType.manufacturerpart}
         pk={manufacturerPart.pk}
       />,
       <OptionsActionDropdown
+        key='options'
         tooltip={t`Manufacturer Part Actions`}
         actions={[
           DuplicateItemAction({
@@ -271,7 +276,7 @@ export default function ManufacturerPartDetail() {
       {duplicateManufacturerPart.modal}
       {editManufacturerPart.modal}
       <InstanceDetail status={requestStatus} loading={instanceQuery.isFetching}>
-        <Stack gap="xs">
+        <Stack gap='xs'>
           <PageDetail
             title={t`ManufacturerPart`}
             subtitle={`${manufacturerPart.MPN} - ${manufacturerPart.part_detail?.name}`}
@@ -282,7 +287,7 @@ export default function ManufacturerPartDetail() {
             editEnabled={user.hasChangePermission(ModelType.manufacturerpart)}
           />
           <PanelGroup
-            pageKey="manufacturerpart"
+            pageKey='manufacturerpart'
             panels={panels}
             instance={manufacturerPart}
             model={ModelType.manufacturerpart}
diff --git a/src/frontend/src/pages/company/SupplierPartDetail.tsx b/src/frontend/src/pages/company/SupplierPartDetail.tsx
index e60fbea87b8a..8dab3c9e885c 100644
--- a/src/frontend/src/pages/company/SupplierPartDetail.tsx
+++ b/src/frontend/src/pages/company/SupplierPartDetail.tsx
@@ -6,11 +6,14 @@ import {
   IconPackages,
   IconShoppingCart
 } from '@tabler/icons-react';
-import { ReactNode, useMemo } from 'react';
+import { type ReactNode, useMemo } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import AdminButton from '../../components/buttons/AdminButton';
-import { DetailsField, DetailsTable } from '../../components/details/Details';
+import {
+  type DetailsField,
+  DetailsTable
+} from '../../components/details/Details';
 import DetailsBadge from '../../components/details/DetailsBadge';
 import { DetailsImage } from '../../components/details/DetailsImage';
 import { ItemDetailsGrid } from '../../components/details/ItemDetails';
@@ -24,7 +27,7 @@ import {
 import InstanceDetail from '../../components/nav/InstanceDetail';
 import { PageDetail } from '../../components/nav/PageDetail';
 import NotesPanel from '../../components/panels/NotesPanel';
-import { PanelType } from '../../components/panels/Panel';
+import type { PanelType } from '../../components/panels/Panel';
 import { PanelGroup } from '../../components/panels/PanelGroup';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
@@ -70,14 +73,14 @@ export default function SupplierPartDetail() {
       return <Skeleton />;
     }
 
-    let data = supplierPart ?? {};
+    const data = supplierPart ?? {};
 
     // Access nested data
     data.manufacturer = data.manufacturer_detail?.pk;
     data.MPN = data.manufacturer_part_detail?.MPN;
     data.manufacturer_part = data.manufacturer_part_detail?.pk;
 
-    let tl: DetailsField[] = [
+    const tl: DetailsField[] = [
       {
         type: 'link',
         name: 'part',
@@ -118,7 +121,7 @@ export default function SupplierPartDetail() {
       }
     ];
 
-    let tr: DetailsField[] = [
+    const tr: DetailsField[] = [
       {
         type: 'link',
         name: 'supplier',
@@ -161,7 +164,7 @@ export default function SupplierPartDetail() {
       }
     ];
 
-    let bl: DetailsField[] = [
+    const bl: DetailsField[] = [
       {
         type: 'string',
         name: 'packaging',
@@ -179,7 +182,7 @@ export default function SupplierPartDetail() {
       }
     ];
 
-    let br: DetailsField[] = [
+    const br: DetailsField[] = [
       {
         type: 'string',
         name: 'available',
@@ -236,7 +239,7 @@ export default function SupplierPartDetail() {
         icon: <IconPackages />,
         content: supplierPart?.pk ? (
           <StockItemTable
-            tableName="supplier-stock"
+            tableName='supplier-stock'
             allowAdd={false}
             params={{ supplier_part: supplierPart.pk }}
           />
@@ -347,7 +350,7 @@ export default function SupplierPartDetail() {
     return [
       <DetailsBadge
         label={t`Inactive`}
-        color="red"
+        color='red'
         visible={supplierPart.active == false}
       />
     ];
@@ -359,7 +362,7 @@ export default function SupplierPartDetail() {
       {duplicateSupplierPart.modal}
       {editSupplierPart.modal}
       <InstanceDetail status={requestStatus} loading={instanceQuery.isFetching}>
-        <Stack gap="xs">
+        <Stack gap='xs'>
           <PageDetail
             title={t`Supplier Part`}
             subtitle={`${supplierPart.SKU} - ${supplierPart?.part_detail?.name}`}
@@ -371,7 +374,7 @@ export default function SupplierPartDetail() {
             editEnabled={user.hasChangePermission(ModelType.supplierpart)}
           />
           <PanelGroup
-            pageKey="supplierpart"
+            pageKey='supplierpart'
             panels={panels}
             instance={supplierPart}
             model={ModelType.supplierpart}
diff --git a/src/frontend/src/pages/part/CategoryDetail.tsx b/src/frontend/src/pages/part/CategoryDetail.tsx
index a8f0590386f9..247c197f3d47 100644
--- a/src/frontend/src/pages/part/CategoryDetail.tsx
+++ b/src/frontend/src/pages/part/CategoryDetail.tsx
@@ -10,7 +10,10 @@ import { useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import AdminButton from '../../components/buttons/AdminButton';
-import { DetailsField, DetailsTable } from '../../components/details/Details';
+import {
+  type DetailsField,
+  DetailsTable
+} from '../../components/details/Details';
 import { ItemDetailsGrid } from '../../components/details/ItemDetails';
 import {
   DeleteItemAction,
@@ -21,7 +24,7 @@ import { ApiIcon } from '../../components/items/ApiIcon';
 import InstanceDetail from '../../components/nav/InstanceDetail';
 import NavigationTree from '../../components/nav/NavigationTree';
 import { PageDetail } from '../../components/nav/PageDetail';
-import { PanelType } from '../../components/panels/Panel';
+import type { PanelType } from '../../components/panels/Panel';
 import { PanelGroup } from '../../components/panels/PanelGroup';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
@@ -46,7 +49,7 @@ import { PartListTable } from '../../tables/part/PartTable';
 export default function CategoryDetail() {
   const { id: _id } = useParams();
   const id = useMemo(
-    () => (!isNaN(parseInt(_id || '')) ? _id : undefined),
+    () => (!Number.isNaN(Number.parseInt(_id || '')) ? _id : undefined),
     [_id]
   );
 
@@ -74,14 +77,14 @@ export default function CategoryDetail() {
       return <Skeleton />;
     }
 
-    let left: DetailsField[] = [
+    const left: DetailsField[] = [
       {
         type: 'text',
         name: 'name',
         label: t`Name`,
         copy: true,
         value_formatter: () => (
-          <Group gap="xs">
+          <Group gap='xs'>
             {category.icon && <ApiIcon name={category.icon} />}
             {category.name}
           </Group>
@@ -118,7 +121,7 @@ export default function CategoryDetail() {
       }
     ];
 
-    let right: DetailsField[] = [
+    const right: DetailsField[] = [
       {
         type: 'text',
         name: 'part_count',
@@ -179,7 +182,7 @@ export default function CategoryDetail() {
     return [
       {
         value: 0,
-        display_name: `Move items to parent category`
+        display_name: t`Move items to parent category`
       },
       {
         value: 1,
@@ -217,8 +220,13 @@ export default function CategoryDetail() {
 
   const categoryActions = useMemo(() => {
     return [
-      <AdminButton model={ModelType.partcategory} pk={category.pk} />,
+      <AdminButton
+        key='admin'
+        model={ModelType.partcategory}
+        pk={category.pk}
+      />,
       <OptionsActionDropdown
+        key='category-actions'
         tooltip={t`Category Actions`}
         actions={[
           EditItemAction({
@@ -294,7 +302,7 @@ export default function CategoryDetail() {
         status={requestStatus}
         loading={id ? instanceQuery.isFetching : false}
       >
-        <Stack gap="xs">
+        <Stack gap='xs'>
           <LoadingOverlay visible={instanceQuery.isFetching} />
           <NavigationTree
             modelType={ModelType.partcategory}
@@ -319,7 +327,7 @@ export default function CategoryDetail() {
             editEnabled={user.hasChangePermission(ModelType.partcategory)}
           />
           <PanelGroup
-            pageKey="partcategory"
+            pageKey='partcategory'
             panels={panels}
             model={ModelType.partcategory}
             instance={category}
diff --git a/src/frontend/src/pages/part/PartAllocationPanel.tsx b/src/frontend/src/pages/part/PartAllocationPanel.tsx
index 7fe25a9d93d6..b2ffd12f5cf5 100644
--- a/src/frontend/src/pages/part/PartAllocationPanel.tsx
+++ b/src/frontend/src/pages/part/PartAllocationPanel.tsx
@@ -17,9 +17,9 @@ export default function PartAllocationPanel({ part }: { part: any }) {
         defaultValue={['buildallocations', 'salesallocations']}
       >
         {part.component && user.hasViewRole(UserRoles.build) && (
-          <Accordion.Item value="buildallocations" key="buildallocations">
+          <Accordion.Item value='buildallocations' key='buildallocations'>
             <Accordion.Control>
-              <StylishText size="lg">{t`Build Order Allocations`}</StylishText>
+              <StylishText size='lg'>{t`Build Order Allocations`}</StylishText>
             </Accordion.Control>
             <Accordion.Panel>
               <PartBuildAllocationsTable partId={part.pk} />
@@ -27,9 +27,9 @@ export default function PartAllocationPanel({ part }: { part: any }) {
           </Accordion.Item>
         )}
         {part.salable && user.hasViewRole(UserRoles.sales_order) && (
-          <Accordion.Item value="salesallocations" key="salesallocations">
+          <Accordion.Item value='salesallocations' key='salesallocations'>
             <Accordion.Control>
-              <StylishText size="lg">{t`Sales Order Allocations`}</StylishText>
+              <StylishText size='lg'>{t`Sales Order Allocations`}</StylishText>
             </Accordion.Control>
             <Accordion.Panel>
               <PartSalesAllocationsTable partId={part.pk} />
diff --git a/src/frontend/src/pages/part/PartDetail.tsx b/src/frontend/src/pages/part/PartDetail.tsx
index 0f57ca5a0189..7b02ccf8e56b 100644
--- a/src/frontend/src/pages/part/PartDetail.tsx
+++ b/src/frontend/src/pages/part/PartDetail.tsx
@@ -31,18 +31,21 @@ import {
   IconVersions
 } from '@tabler/icons-react';
 import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
-import { ReactNode, useMemo, useState } from 'react';
+import { type ReactNode, useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import Select from 'react-select';
 
 import { api } from '../../App';
 import AdminButton from '../../components/buttons/AdminButton';
 import { PrintingActions } from '../../components/buttons/PrintingActions';
-import { DetailsField, DetailsTable } from '../../components/details/Details';
+import {
+  type DetailsField,
+  DetailsTable
+} from '../../components/details/Details';
 import DetailsBadge from '../../components/details/DetailsBadge';
 import { DetailsImage } from '../../components/details/DetailsImage';
 import { ItemDetailsGrid } from '../../components/details/ItemDetails';
-import { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
+import type { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
 import { Thumbnail } from '../../components/images/Thumbnail';
 import {
   ActionDropdown,
@@ -57,7 +60,7 @@ import NavigationTree from '../../components/nav/NavigationTree';
 import { PageDetail } from '../../components/nav/PageDetail';
 import AttachmentPanel from '../../components/panels/AttachmentPanel';
 import NotesPanel from '../../components/panels/NotesPanel';
-import { PanelType } from '../../components/panels/Panel';
+import type { PanelType } from '../../components/panels/Panel';
 import { PanelGroup } from '../../components/panels/PanelGroup';
 import { RenderPart } from '../../components/render/Part';
 import { formatPriceRange } from '../../defaults/formatters';
@@ -66,7 +69,7 @@ import { ModelType } from '../../enums/ModelType';
 import { UserRoles } from '../../enums/Roles';
 import { usePartFields } from '../../forms/PartForms';
 import {
-  StockOperationProps,
+  type StockOperationProps,
   useCountStockItem,
   useTransferStockItem
 } from '../../forms/StockForms';
@@ -143,7 +146,7 @@ export default function PartDetail() {
       return <Skeleton />;
     }
 
-    let data = { ...part };
+    const data = { ...part };
 
     data.required =
       (data?.required_for_build_orders ?? 0) +
@@ -155,7 +158,7 @@ export default function PartDetail() {
     }
 
     // Construct the details tables
-    let tl: DetailsField[] = [
+    const tl: DetailsField[] = [
       {
         type: 'string',
         name: 'name',
@@ -241,7 +244,7 @@ export default function PartDetail() {
       }
     ];
 
-    let tr: DetailsField[] = [
+    const tr: DetailsField[] = [
       {
         type: 'string',
         name: 'total_in_stock',
@@ -322,7 +325,7 @@ export default function PartDetail() {
       }
     ];
 
-    let bl: DetailsField[] = [
+    const bl: DetailsField[] = [
       {
         type: 'boolean',
         name: 'active',
@@ -384,7 +387,7 @@ export default function PartDetail() {
       }
     ];
 
-    let br: DetailsField[] = [
+    const br: DetailsField[] = [
       {
         type: 'string',
         name: 'creation_date',
@@ -447,7 +450,7 @@ export default function PartDetail() {
           return (
             data.overall_min &&
             `${formatPriceRange(data.overall_min, data.overall_max)}${
-              part.units && ' / ' + part.units
+              part.units && ` / ${part.units}`
             }`
           );
         }
@@ -495,7 +498,7 @@ export default function PartDetail() {
             }
           });
 
-          if (data && data.quantity) {
+          if (data?.quantity) {
             return `${data.quantity} (${data.date})`;
           } else {
             return '-';
@@ -592,7 +595,7 @@ export default function PartDetail() {
         icon: <IconPackages />,
         content: part.pk ? (
           <StockItemTable
-            tableName="part-stock"
+            tableName='part-stock'
             allowAdd
             params={{
               part: part.pk
@@ -766,7 +769,7 @@ export default function PartDetail() {
         return [];
       }
 
-      let revisions = [];
+      const revisions = [];
 
       // First, fetch information for the top-level part
       if (part.revision_of) {
@@ -813,7 +816,7 @@ export default function PartDetail() {
       return [];
     }
 
-    let options: any[] = partRevisionQuery.data.map((revision: any) => {
+    const options: any[] = partRevisionQuery.data.map((revision: any) => {
       return {
         value: revision.pk,
         label: revision.full_name,
@@ -831,7 +834,7 @@ export default function PartDetail() {
     }
 
     return options.sort((a, b) => {
-      return ('' + a.part.revision).localeCompare(b.part.revision);
+      return `${a.part.revision}`.localeCompare(b.part.revision);
     });
   }, [part, partRevisionQuery.isFetching, partRevisionQuery.data]);
 
@@ -856,46 +859,52 @@ export default function PartDetail() {
 
     return [
       <DetailsBadge
-        label={t`In Stock` + `: ${part.total_in_stock}`}
+        label={`${t`In Stock`}: ${part.total_in_stock}`}
         color={part.total_in_stock >= part.minimum_stock ? 'green' : 'orange'}
         visible={part.total_in_stock > 0}
-        key="in_stock"
+        key='in_stock'
       />,
       <DetailsBadge
-        label={t`Available` + `: ${part.unallocated_stock}`}
-        color="yellow"
-        key="available_stock"
+        label={`${t`Available`}: ${part.unallocated_stock}`}
+        color='yellow'
+        key='available_stock'
         visible={part.unallocated_stock != part.total_in_stock}
       />,
       <DetailsBadge
         label={t`No Stock`}
-        color="orange"
+        color='orange'
         visible={part.total_in_stock == 0}
-        key="no_stock"
+        key='no_stock'
       />,
       <DetailsBadge
-        label={t`Required` + `: ${required}`}
-        color="grape"
+        label={`${t`Required`}: ${required}`}
+        color='grape'
         visible={required > 0}
-        key="required"
+        key='required'
       />,
       <DetailsBadge
-        label={t`On Order` + `: ${part.ordering}`}
-        color="blue"
+        label={`${t`On Order`}: ${part.ordering}`}
+        color='blue'
         visible={part.ordering > 0}
-        key="on_order"
+        key='on_order'
       />,
       <DetailsBadge
-        label={t`In Production` + `: ${part.building}`}
-        color="blue"
+        label={`${t`In Production`}: ${part.building}`}
+        color='blue'
         visible={part.building > 0}
-        key="in_production"
+        key='in_production'
+      />,
+      <DetailsBadge
+        label={t`Locked`}
+        color='black'
+        visible={part.locked}
+        key='locked'
       />,
       <DetailsBadge
         label={t`Inactive`}
-        color="red"
-        visible={part.active == false}
-        key="inactive"
+        color='red'
+        visible={!part.active}
+        key='inactive'
       />
     ];
   }, [part, instanceQuery]);
@@ -963,8 +972,8 @@ export default function PartDetail() {
       }
     },
     preFormContent: (
-      <Alert color="red" title={t`Deleting this part cannot be reversed`}>
-        <Stack gap="xs">
+      <Alert color='red' title={t`Deleting this part cannot be reversed`}>
+        <Stack gap='xs'>
           <Thumbnail src={part.thumbnail ?? part.image} text={part.full_name} />
         </Stack>
       </Alert>
@@ -993,7 +1002,7 @@ export default function PartDetail() {
         pk={part.pk}
         hash={part?.barcode_hash}
         perm={user.hasChangeRole(UserRoles.part)}
-        key="action_dropdown"
+        key='action_dropdown'
       />,
       <PrintingActions
         modelType={ModelType.part}
@@ -1007,7 +1016,7 @@ export default function PartDetail() {
         actions={[
           {
             icon: (
-              <InvenTreeIcon icon="stocktake" iconProps={{ color: 'blue' }} />
+              <InvenTreeIcon icon='stocktake' iconProps={{ color: 'blue' }} />
             ),
             name: t`Count Stock`,
             tooltip: t`Count part stock`,
@@ -1018,7 +1027,7 @@ export default function PartDetail() {
           },
           {
             icon: (
-              <InvenTreeIcon icon="transfer" iconProps={{ color: 'blue' }} />
+              <InvenTreeIcon icon='transfer' iconProps={{ color: 'blue' }} />
             ),
             name: t`Transfer Stock`,
             tooltip: t`Transfer part stock`,
@@ -1063,7 +1072,7 @@ export default function PartDetail() {
       {editPart.modal}
       {deletePart.modal}
       <InstanceDetail status={requestStatus} loading={instanceQuery.isFetching}>
-        <Stack gap="xs">
+        <Stack gap='xs'>
           <NavigationTree
             title={t`Part Categories`}
             modelType={ModelType.partcategory}
@@ -1075,10 +1084,10 @@ export default function PartDetail() {
             selectedId={part?.category}
           />
           <PageDetail
-            title={t`Part` + ': ' + part.full_name}
+            title={`${t`Part`}: ${part.full_name}`}
             icon={
               part?.locked ? (
-                <IconLock aria-label="part-lock-icon" />
+                <IconLock aria-label='part-lock-icon' />
               ) : undefined
             }
             subtitle={part.description}
@@ -1093,11 +1102,11 @@ export default function PartDetail() {
             actions={partActions}
             detail={
               enableRevisionSelection ? (
-                <Stack gap="xs">
+                <Stack gap='xs'>
                   <Text>{t`Select Part Revision`}</Text>
                   <Select
-                    id="part-revision-select"
-                    aria-label="part-revision-select"
+                    id='part-revision-select'
+                    aria-label='part-revision-select'
                     options={partRevisionOptions}
                     value={{
                       value: part.pk,
@@ -1127,7 +1136,7 @@ export default function PartDetail() {
             }
           />
           <PanelGroup
-            pageKey="part"
+            pageKey='part'
             panels={partPanels}
             instance={part}
             model={ModelType.part}
diff --git a/src/frontend/src/pages/part/PartPricingPanel.tsx b/src/frontend/src/pages/part/PartPricingPanel.tsx
index 0fdc1c6191bb..85b9c0e27912 100644
--- a/src/frontend/src/pages/part/PartPricingPanel.tsx
+++ b/src/frontend/src/pages/part/PartPricingPanel.tsx
@@ -65,10 +65,10 @@ export default function PartPricingPanel({ part }: Readonly<{ part: any }>) {
   }
 
   return (
-    <Stack gap="xs">
+    <Stack gap='xs'>
       <LoadingOverlay visible={instanceQuery.isLoading} />
       {!pricing && !instanceQuery.isLoading && (
-        <Alert color="ref" title={t`Error`}>
+        <Alert color='ref' title={t`Error`}>
           <Text>{t`No pricing data found for this part.`}</Text>
         </Alert>
       )}
diff --git a/src/frontend/src/pages/part/PartSchedulingDetail.tsx b/src/frontend/src/pages/part/PartSchedulingDetail.tsx
index 612ef028cce4..771cf39cb623 100644
--- a/src/frontend/src/pages/part/PartSchedulingDetail.tsx
+++ b/src/frontend/src/pages/part/PartSchedulingDetail.tsx
@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro';
-import { ChartTooltipProps, LineChart } from '@mantine/charts';
+import { type ChartTooltipProps, LineChart } from '@mantine/charts';
 import {
   Alert,
   Center,
@@ -9,7 +9,7 @@ import {
   SimpleGrid,
   Text
 } from '@mantine/core';
-import { ReactNode, useMemo } from 'react';
+import { type ReactNode, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { formatDate } from '../../defaults/formatters';
@@ -18,7 +18,7 @@ import { navigateToLink } from '../../functions/navigation';
 import { getDetailUrl } from '../../functions/urls';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
-import { TableColumn } from '../../tables/Column';
+import type { TableColumn } from '../../tables/Column';
 import { DateColumn, DescriptionColumn } from '../../tables/ColumnRenderers';
 import { InvenTreeTable } from '../../tables/InvenTreeTable';
 import { TableHoverCard } from '../../tables/TableHoverCard';
@@ -40,16 +40,16 @@ function ChartTooltip({ label, payload }: ChartTooltipProps) {
   const maximum = payload.find((item) => item.name == 'maximum');
 
   return (
-    <Paper px="md" py="sm" withBorder shadow="md" radius="md">
-      <Text key="title">{label}</Text>
+    <Paper px='md' py='sm' withBorder shadow='md' radius='md'>
+      <Text key='title'>{label}</Text>
       <Divider />
-      <Text key="maximum" c={maximum?.color} fz="sm">
+      <Text key='maximum' c={maximum?.color} fz='sm'>
         {t`Maximum`} : {maximum?.value}
       </Text>
-      <Text key="scheduled" c={scheduled?.color} fz="sm">
+      <Text key='scheduled' c={scheduled?.color} fz='sm'>
         {t`Scheduled`} : {scheduled?.value}
       </Text>
-      <Text key="minimum" c={minimum?.color} fz="sm">
+      <Text key='minimum' c={minimum?.color} fz='sm'>
         {t`Minimum`} : {minimum?.value}
       </Text>
     </Paper>
@@ -81,13 +81,13 @@ export default function PartSchedulingDetail({ part }: { part: any }) {
         switchable: false,
         render: (record: any) => {
           let q = record.quantity;
-          let extra: ReactNode[] = [];
+          const extra: ReactNode[] = [];
 
           if (record.speculative_quantity != 0) {
             q = record.speculative_quantity;
             extra.push(
               <Text
-                size="sm"
+                size='sm'
                 key={'speculative'}
               >{t`Quantity is speculative`}</Text>
             );
@@ -97,18 +97,18 @@ export default function PartSchedulingDetail({ part }: { part: any }) {
             extra.push(
               <Text
                 key={'null-date'}
-                size="sm"
+                size='sm'
               >{t`No date available for provided quantity`}</Text>
             );
           } else if (new Date(record.date) < new Date()) {
             extra.push(
-              <Text size="sm" key={'past-date'}>{t`Date is in the past`}</Text>
+              <Text size='sm' key={'past-date'}>{t`Date is in the past`}</Text>
             );
           }
 
           return (
             <TableHoverCard
-              value={<Text key="quantity">{q}</Text>}
+              value={<Text key='quantity'>{q}</Text>}
               title={t`Scheduled Quantity`}
               extra={extra}
             />
@@ -138,7 +138,7 @@ export default function PartSchedulingDetail({ part }: { part: any }) {
 
     // First, iterate through each entry and find any entries without an associated date, or in the past
     table.records.forEach((record) => {
-      let q = record.quantity + record.speculative_quantity;
+      const q = record.quantity + record.speculative_quantity;
 
       if (record.date == null || new Date(record.date) < today) {
         if (q < 0) {
@@ -150,7 +150,7 @@ export default function PartSchedulingDetail({ part }: { part: any }) {
     });
 
     // Construct initial chart entry (for today)
-    let entries: any[] = [
+    const entries: any[] = [
       {
         // date: formatDate(today.toISOString()),
         date: today.valueOf(),
@@ -163,7 +163,7 @@ export default function PartSchedulingDetail({ part }: { part: any }) {
     ];
 
     table.records.forEach((record) => {
-      let q = record.quantity + record.speculative_quantity;
+      const q = record.quantity + record.speculative_quantity;
 
       if (!record.date) {
         return;
@@ -237,7 +237,7 @@ export default function PartSchedulingDetail({ part }: { part: any }) {
   return (
     <>
       {!table.isLoading && !hasSchedulingInfo && (
-        <Alert color="blue" title={t`No information available`}>
+        <Alert color='blue' title={t`No information available`}>
           <Text>{t`There is no scheduling information available for the selected part`}</Text>
         </Alert>
       )}
@@ -265,7 +265,7 @@ export default function PartSchedulingDetail({ part }: { part: any }) {
           <LineChart
             data={chartData}
             mah={'500px'}
-            dataKey="date"
+            dataKey='date'
             withLegend
             withYAxis
             tooltipProps={{
diff --git a/src/frontend/src/pages/part/PartStocktakeDetail.tsx b/src/frontend/src/pages/part/PartStocktakeDetail.tsx
index 6b7e54688bb1..6ea21452a913 100644
--- a/src/frontend/src/pages/part/PartStocktakeDetail.tsx
+++ b/src/frontend/src/pages/part/PartStocktakeDetail.tsx
@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro';
-import { ChartTooltipProps, LineChart } from '@mantine/charts';
+import { type ChartTooltipProps, LineChart } from '@mantine/charts';
 import {
   Center,
   Divider,
@@ -26,7 +26,7 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../../tables/Column';
+import type { TableColumn } from '../../tables/Column';
 import { InvenTreeTable } from '../../tables/InvenTreeTable';
 import { RowDeleteAction, RowEditAction } from '../../tables/RowActions';
 
@@ -53,13 +53,13 @@ function ChartTooltip({ label, payload }: ChartTooltipProps) {
   const value_max = payload.find((item) => item.name == 'value_max');
 
   return (
-    <Paper px="md" py="sm" withBorder shadow="md" radius="md">
-      <Text key="title">{formattedLabel}</Text>
+    <Paper px='md' py='sm' withBorder shadow='md' radius='md'>
+      <Text key='title'>{formattedLabel}</Text>
       <Divider />
-      <Text key="quantity" fz="sm">
+      <Text key='quantity' fz='sm'>
         {t`Quantity`} : {quantity?.value}
       </Text>
-      <Text key="values" fz="sm">
+      <Text key='values' fz='sm'>
         {t`Value`} : {formatPriceRange(value_min?.value, value_max?.value)}
       </Text>
     </Paper>
@@ -136,6 +136,7 @@ export default function PartStocktakeDetail({ partId }: { partId: number }) {
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
+        key='add'
         tooltip={t`New Stocktake Report`}
         onClick={() => generateReport.open()}
         hidden={!user.hasAddRole(UserRoles.stocktake)}
@@ -166,7 +167,7 @@ export default function PartStocktakeDetail({ partId }: { partId: number }) {
   );
 
   const chartData = useMemo(() => {
-    let records =
+    const records =
       table.records?.map((record: any) => {
         return {
           date: new Date(record.date).valueOf(),
@@ -227,7 +228,7 @@ export default function PartStocktakeDetail({ partId }: { partId: number }) {
           <LineChart
             data={chartData}
             mah={'500px'}
-            dataKey="date"
+            dataKey='date'
             withLegend
             withYAxis
             withRightYAxis
diff --git a/src/frontend/src/pages/part/PartSupplierDetail.tsx b/src/frontend/src/pages/part/PartSupplierDetail.tsx
index c05290050f47..24ce2409c106 100644
--- a/src/frontend/src/pages/part/PartSupplierDetail.tsx
+++ b/src/frontend/src/pages/part/PartSupplierDetail.tsx
@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro';
-import { Accordion, Skeleton } from '@mantine/core';
+import { Accordion } from '@mantine/core';
 
 import { StylishText } from '../../components/items/StylishText';
 import { ManufacturerPartTable } from '../../tables/purchasing/ManufacturerPartTable';
@@ -8,17 +8,17 @@ import { SupplierPartTable } from '../../tables/purchasing/SupplierPartTable';
 export default function PartSupplierDetail({ partId }: { partId: number }) {
   return (
     <Accordion multiple defaultValue={['part-suppliers', 'part-manufacturers']}>
-      <Accordion.Item value="part-suppliers">
+      <Accordion.Item value='part-suppliers'>
         <Accordion.Control>
-          <StylishText size="lg">{t`Suppliers`}</StylishText>
+          <StylishText size='lg'>{t`Suppliers`}</StylishText>
         </Accordion.Control>
         <Accordion.Panel>
           <SupplierPartTable params={{ part: partId }} />
         </Accordion.Panel>
       </Accordion.Item>
-      <Accordion.Item value="part-manufacturers">
+      <Accordion.Item value='part-manufacturers'>
         <Accordion.Control>
-          <StylishText size="lg">{t`Manufacturers`}</StylishText>
+          <StylishText size='lg'>{t`Manufacturers`}</StylishText>
         </Accordion.Control>
         <Accordion.Panel>
           <ManufacturerPartTable params={{ part: partId }} />
diff --git a/src/frontend/src/pages/part/pricing/BomPricingPanel.tsx b/src/frontend/src/pages/part/pricing/BomPricingPanel.tsx
index 98bface11e00..4127c4f03372 100644
--- a/src/frontend/src/pages/part/pricing/BomPricingPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/BomPricingPanel.tsx
@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro';
-import { BarChart, ChartTooltipProps, DonutChart } from '@mantine/charts';
+import { BarChart, type ChartTooltipProps, DonutChart } from '@mantine/charts';
 import {
   Center,
   Group,
@@ -9,7 +9,7 @@ import {
   Stack,
   Text
 } from '@mantine/core';
-import { ReactNode, useMemo, useState } from 'react';
+import { type ReactNode, useMemo, useState } from 'react';
 
 import { CHART_COLORS } from '../../../components/charts/colors';
 import { tooltipFormatter } from '../../../components/charts/tooltipFormatter';
@@ -22,7 +22,7 @@ import { ApiEndpoints } from '../../../enums/ApiEndpoints';
 import { ModelType } from '../../../enums/ModelType';
 import { useTable } from '../../../hooks/UseTable';
 import { apiUrl } from '../../../states/ApiState';
-import { TableColumn } from '../../../tables/Column';
+import type { TableColumn } from '../../../tables/Column';
 import { DateColumn, PartColumn } from '../../../tables/ColumnRenderers';
 import { InvenTreeTable } from '../../../tables/InvenTreeTable';
 import { LoadingPricingData, NoPricingData } from './PricingPanel';
@@ -38,12 +38,12 @@ function ChartTooltip({ label, payload }: ChartTooltipProps) {
   const data = payload[0] ?? {};
 
   return (
-    <Paper px="md" py="sm" withBorder shadow="md" radius="md">
-      <Group justify="space-between" wrap="nowrap">
-        <Text key="title" c={data.payload?.color}>
+    <Paper px='md' py='sm' withBorder shadow='md' radius='md'>
+      <Group justify='space-between' wrap='nowrap'>
+        <Text key='title' c={data.payload?.color}>
           {data.name}
         </Text>
-        <Text key="price" fz="sm">
+        <Text key='price' fz='sm'>
           {formatCurrency(data.payload?.value)}
         </Text>
       </Group>
@@ -69,7 +69,7 @@ function BomPieChart({
             // Note: Replace '.' in name to avoid issues with tooltip
             name: entry?.name?.replace('.', '') ?? '',
             value: entry?.total_price_max,
-            color: CHART_COLORS[index % CHART_COLORS.length] + '.5'
+            color: `${CHART_COLORS[index % CHART_COLORS.length]}.5`
           };
         }) ?? []
     );
@@ -83,7 +83,7 @@ function BomPieChart({
         thickness={80}
         withLabels={false}
         withLabelsLine={false}
-        tooltipDataSource="segment"
+        tooltipDataSource='segment'
         chartLabel={t`Total Price`}
         valueFormatter={(value) => tooltipFormatter(value, currency)}
         tooltipProps={{
@@ -107,7 +107,7 @@ function BomBarChart({
   return (
     <BarChart
       h={500}
-      dataKey="name"
+      dataKey='name'
       data={data}
       xAxisLabel={t`Component`}
       yAxisLabel={t`Price Range`}
@@ -149,13 +149,13 @@ export default function BomPricingPanel({
         sortable: true,
         switchable: false,
         render: (record: any) => {
-          let quantity = formatDecimal(record.quantity);
-          let units = record.sub_part_detail?.units;
+          const quantity = formatDecimal(record.quantity);
+          const units = record.sub_part_detail?.units;
 
           return (
-            <Group justify="space-between" grow>
+            <Group justify='space-between' grow>
               <Text>{quantity}</Text>
-              {units && <Text size="xs">[{units}]</Text>}
+              {units && <Text size='xs'>[{units}]</Text>}
             </Group>
           );
         }
@@ -201,10 +201,10 @@ export default function BomPricingPanel({
     const pricing = table.records.map((entry: any) => {
       return {
         name: entry.sub_part_detail?.name,
-        unit_price_min: parseFloat(entry.pricing_min ?? 0),
-        unit_price_max: parseFloat(entry.pricing_max ?? 0),
-        total_price_min: parseFloat(entry.pricing_min_total ?? 0),
-        total_price_max: parseFloat(entry.pricing_max_total ?? 0)
+        unit_price_min: Number.parseFloat(entry.pricing_min ?? 0),
+        unit_price_max: Number.parseFloat(entry.pricing_max ?? 0),
+        total_price_min: Number.parseFloat(entry.pricing_min_total ?? 0),
+        total_price_max: Number.parseFloat(entry.pricing_max_total ?? 0)
       };
     });
 
@@ -218,7 +218,7 @@ export default function BomPricingPanel({
   }, [table.isLoading, bomPricingData]);
 
   return (
-    <Stack gap="xs">
+    <Stack gap='xs'>
       <SimpleGrid cols={2}>
         <InvenTreeTable
           tableState={table}
@@ -235,10 +235,10 @@ export default function BomPricingPanel({
             modelField: 'sub_part'
           }}
         />
-        <Stack gap="xs">
+        <Stack gap='xs'>
           {table.isLoading && <LoadingPricingData />}
           {hasData && (
-            <Stack gap="xs">
+            <Stack gap='xs'>
               {chartType == 'bar' && (
                 <BomBarChart
                   data={bomPricingData}
diff --git a/src/frontend/src/pages/part/pricing/PriceBreakPanel.tsx b/src/frontend/src/pages/part/pricing/PriceBreakPanel.tsx
index ba8016872022..85710b494632 100644
--- a/src/frontend/src/pages/part/pricing/PriceBreakPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/PriceBreakPanel.tsx
@@ -5,9 +5,9 @@ import { useCallback, useMemo, useState } from 'react';
 
 import { AddItemButton } from '../../../components/buttons/AddItemButton';
 import { tooltipFormatter } from '../../../components/charts/tooltipFormatter';
-import { ApiFormFieldSet } from '../../../components/forms/fields/ApiFormField';
+import type { ApiFormFieldSet } from '../../../components/forms/fields/ApiFormField';
 import { formatCurrency } from '../../../defaults/formatters';
-import { ApiEndpoints } from '../../../enums/ApiEndpoints';
+import type { ApiEndpoints } from '../../../enums/ApiEndpoints';
 import { UserRoles } from '../../../enums/Roles';
 import {
   useCreateApiFormModal,
@@ -17,10 +17,10 @@ import {
 import { useTable } from '../../../hooks/UseTable';
 import { apiUrl } from '../../../states/ApiState';
 import { useUserState } from '../../../states/UserState';
-import { TableColumn } from '../../../tables/Column';
+import type { TableColumn } from '../../../tables/Column';
 import { InvenTreeTable } from '../../../tables/InvenTreeTable';
 import {
-  RowAction,
+  type RowAction,
   RowDeleteAction,
   RowEditAction
 } from '../../../tables/RowActions';
@@ -107,7 +107,7 @@ export default function PriceBreakPanel({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
-        key="add-price-break"
+        key='add-price-break'
         tooltip={t`Add Price Break`}
         onClick={() => {
           newPriceBreak.open();
@@ -166,7 +166,7 @@ export default function PriceBreakPanel({
         />
         {table.records.length > 0 ? (
           <BarChart
-            dataKey="quantity"
+            dataKey='quantity'
             data={table.records}
             series={[{ name: 'price', label: t`Price`, color: 'blue.6' }]}
             xAxisLabel={t`Quantity`}
diff --git a/src/frontend/src/pages/part/pricing/PricingOverviewPanel.tsx b/src/frontend/src/pages/part/pricing/PricingOverviewPanel.tsx
index a4266db7d491..720b639db3f8 100644
--- a/src/frontend/src/pages/part/pricing/PricingOverviewPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/PricingOverviewPanel.tsx
@@ -20,10 +20,9 @@ import {
   IconShoppingCart,
   IconTriangleSquareCircle
 } from '@tabler/icons-react';
-import { UseQueryResult } from '@tanstack/react-query';
-import { toggleUnorderedList } from 'easymde';
+import type { UseQueryResult } from '@tanstack/react-query';
 import { DataTable } from 'mantine-datatable';
-import { ReactNode, useCallback, useMemo } from 'react';
+import { type ReactNode, useCallback, useMemo } from 'react';
 
 import { api } from '../../../App';
 import { tooltipFormatter } from '../../../components/charts/tooltipFormatter';
@@ -72,7 +71,7 @@ export default function PricingOverviewPanel({
       autoClose: false
     });
 
-    let success: boolean = false;
+    let success = false;
 
     api
       .patch(url, { update: true })
@@ -126,7 +125,7 @@ export default function PricingOverviewPanel({
         render: (record: PricingOverviewEntry) => {
           const is_link = record.name !== panelOptions.overall;
           return (
-            <Group justify="left" gap="xs">
+            <Group justify='left' gap='xs'>
               {record.icon}
               {is_link ? (
                 <Anchor fw={700} onClick={() => doNavigation(record.name)}>
@@ -240,17 +239,17 @@ export default function PricingOverviewPanel({
   return (
     <>
       {editPricing.modal}
-      <Stack gap="xs">
+      <Stack gap='xs'>
         <SimpleGrid cols={2}>
-          <Stack gap="xs">
-            <Paper p="xs">
-              <Group justify="space-between" wrap="nowrap">
+          <Stack gap='xs'>
+            <Paper p='xs'>
+              <Group justify='space-between' wrap='nowrap'>
                 {pricing?.updated ? (
-                  <Alert color="blue" title={t`Last Updated`} flex={1}>
+                  <Alert color='blue' title={t`Last Updated`} flex={1}>
                     <Text>{formatDate(pricing.updated)}</Text>
                   </Alert>
                 ) : (
-                  <Alert color="orange" title={t`Pricing Not Set`} flex={1}>
+                  <Alert color='orange' title={t`Pricing Not Set`} flex={1}>
                     <Text>{t`Pricing data has not been calculated for this part`}</Text>
                   </Alert>
                 )}
@@ -262,7 +261,7 @@ export default function PricingOverviewPanel({
                       tooltip: t`Refresh pricing data`,
                       icon: (
                         <InvenTreeIcon
-                          icon="refresh"
+                          icon='refresh'
                           iconProps={{ color: 'green' }}
                         />
                       ),
@@ -281,14 +280,14 @@ export default function PricingOverviewPanel({
               </Group>
             </Paper>
             <DataTable
-              idAccessor="name"
+              idAccessor='name'
               records={overviewData}
               columns={columns}
             />
           </Stack>
           <BarChart
-            aria-label="pricing-overview-chart"
-            dataKey="title"
+            aria-label='pricing-overview-chart'
+            dataKey='title'
             data={overviewData}
             title={t`Pricing Overview`}
             series={[
diff --git a/src/frontend/src/pages/part/pricing/PricingPanel.tsx b/src/frontend/src/pages/part/pricing/PricingPanel.tsx
index cc8b4d45fe2a..2b6bc0ee3bd8 100644
--- a/src/frontend/src/pages/part/pricing/PricingPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/PricingPanel.tsx
@@ -1,7 +1,7 @@
 import { t } from '@lingui/macro';
 import {
   Accordion,
-  AccordionControlProps,
+  type AccordionControlProps,
   Alert,
   Box,
   Center,
@@ -12,17 +12,17 @@ import {
   Tooltip
 } from '@mantine/core';
 import { IconAlertCircle, IconExclamationCircle } from '@tabler/icons-react';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import { StylishText } from '../../../components/items/StylishText';
-import { panelOptions } from '../PartPricingPanel';
+import type { panelOptions } from '../PartPricingPanel';
 
 function AccordionControl(props: AccordionControlProps) {
   return (
     <Box style={{ display: 'flex', alignItems: 'center' }}>
       {props.disabled && (
         <Tooltip label={t`No data available`}>
-          <IconAlertCircle size="1rem" color="gray" />
+          <IconAlertCircle size='1rem' color='gray' />
         </Tooltip>
       )}
       <Accordion.Control
@@ -51,7 +51,7 @@ export default function PricingPanel({
     visible && (
       <Accordion.Item value={label} id={label}>
         <AccordionControl disabled={is_disabled}>
-          <StylishText size="lg">{title}</StylishText>
+          <StylishText size='lg'>{title}</StylishText>
         </AccordionControl>
         <Accordion.Panel>{!is_disabled && content}</Accordion.Panel>
       </Accordion.Item>
@@ -61,8 +61,8 @@ export default function PricingPanel({
 
 export function NoPricingData() {
   return (
-    <Stack gap="xs">
-      <Alert icon={<IconExclamationCircle />} color="blue" title={t`No Data`}>
+    <Stack gap='xs'>
+      <Alert icon={<IconExclamationCircle />} color='blue' title={t`No Data`}>
         <Text>{t`No pricing data available`}</Text>
       </Alert>
       <Space />
@@ -73,7 +73,7 @@ export function NoPricingData() {
 export function LoadingPricingData() {
   return (
     <Center>
-      <Stack gap="xs">
+      <Stack gap='xs'>
         <Text>{t`Loading pricing data`}</Text>
         <Loader />
       </Stack>
diff --git a/src/frontend/src/pages/part/pricing/PurchaseHistoryPanel.tsx b/src/frontend/src/pages/part/pricing/PurchaseHistoryPanel.tsx
index 02c4ff05ae6c..ce3ea98e3359 100644
--- a/src/frontend/src/pages/part/pricing/PurchaseHistoryPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/PurchaseHistoryPanel.tsx
@@ -1,13 +1,13 @@
 import { t } from '@lingui/macro';
 import { BarChart } from '@mantine/charts';
 import { Group, SimpleGrid, Text } from '@mantine/core';
-import { ReactNode, useCallback, useMemo } from 'react';
+import { type ReactNode, useCallback, useMemo } from 'react';
 
 import { formatCurrency, formatDate } from '../../../defaults/formatters';
 import { ApiEndpoints } from '../../../enums/ApiEndpoints';
 import { useTable } from '../../../hooks/UseTable';
 import { apiUrl } from '../../../states/ApiState';
-import { TableColumn } from '../../../tables/Column';
+import type { TableColumn } from '../../../tables/Column';
 import { InvenTreeTable } from '../../../tables/InvenTreeTable';
 import { NoPricingData } from './PricingPanel';
 
@@ -19,8 +19,9 @@ export default function PurchaseHistoryPanel({
   const table = useTable('pricingpurchasehistory');
 
   const calculateUnitPrice = useCallback((record: any) => {
-    let pack_quantity = record?.supplier_part_detail?.pack_quantity_native ?? 1;
-    let unit_price = record.purchase_price / pack_quantity;
+    const pack_quantity =
+      record?.supplier_part_detail?.pack_quantity_native ?? 1;
+    const unit_price = record.purchase_price / pack_quantity;
 
     return unit_price;
   }, []);
@@ -48,19 +49,19 @@ export default function PurchaseHistoryPanel({
         sortable: true,
         switchable: false,
         render: (record: any) => {
-          let price = formatCurrency(record.purchase_price, {
+          const price = formatCurrency(record.purchase_price, {
             currency: record.purchase_price_currency
           });
 
-          let packQuatity = record.supplier_part_detail?.pack_quantity;
-          let hasPackQuantity =
+          const packQuatity = record.supplier_part_detail?.pack_quantity;
+          const hasPackQuantity =
             !!packQuatity &&
             record.supplier_part_detail?.pack_quantity_native != 1;
 
           return (
-            <Group justify="space-between" gap="xs">
+            <Group justify='space-between' gap='xs'>
               <Text>{price}</Text>
-              {hasPackQuantity && <Text size="xs">[{packQuatity}]</Text>}
+              {hasPackQuantity && <Text size='xs'>[{packQuatity}]</Text>}
             </Group>
           );
         }
@@ -72,17 +73,17 @@ export default function PurchaseHistoryPanel({
         sortable: true,
         switchable: false,
         render: (record: any) => {
-          let price = formatCurrency(calculateUnitPrice(record), {
+          const price = formatCurrency(calculateUnitPrice(record), {
             currency: record.purchase_price_currency
           });
 
-          let units = record.part_detail?.units;
-          let hasUnits = !!units && units !== 1;
+          const units = record.part_detail?.units;
+          const hasUnits = !!units && units !== 1;
 
           return (
-            <Group justify="space-between" gap="xs">
+            <Group justify='space-between' gap='xs'>
               <Text>{price}</Text>
-              {hasUnits && <Text size="xs">[{units}]</Text>}
+              {hasUnits && <Text size='xs'>[{units}]</Text>}
             </Group>
           );
         }
@@ -120,7 +121,7 @@ export default function PurchaseHistoryPanel({
       {purchaseHistoryData.length > 0 ? (
         <BarChart
           data={purchaseHistoryData}
-          dataKey="name"
+          dataKey='name'
           series={[
             { name: 'unit_price', label: t`Unit Price`, color: 'blue.5' }
           ]}
diff --git a/src/frontend/src/pages/part/pricing/SaleHistoryPanel.tsx b/src/frontend/src/pages/part/pricing/SaleHistoryPanel.tsx
index 10de2eb17f15..7bbee81ed7e2 100644
--- a/src/frontend/src/pages/part/pricing/SaleHistoryPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/SaleHistoryPanel.tsx
@@ -1,13 +1,13 @@
 import { t } from '@lingui/macro';
 import { BarChart } from '@mantine/charts';
 import { SimpleGrid } from '@mantine/core';
-import { ReactNode, useMemo } from 'react';
+import { type ReactNode, useMemo } from 'react';
 
 import { formatCurrency } from '../../../defaults/formatters';
 import { ApiEndpoints } from '../../../enums/ApiEndpoints';
 import { useTable } from '../../../hooks/UseTable';
 import { apiUrl } from '../../../states/ApiState';
-import { TableColumn } from '../../../tables/Column';
+import type { TableColumn } from '../../../tables/Column';
 import { DateColumn } from '../../../tables/ColumnRenderers';
 import { InvenTreeTable } from '../../../tables/InvenTreeTable';
 import { NoPricingData } from './PricingPanel';
@@ -82,7 +82,7 @@ export default function SaleHistoryPanel({
       {saleHistoryData.length > 0 ? (
         <BarChart
           data={saleHistoryData}
-          dataKey="name"
+          dataKey='name'
           series={[
             { name: 'sale_price', label: t`Sale Price`, color: 'blue.6' }
           ]}
diff --git a/src/frontend/src/pages/part/pricing/SupplierPricingPanel.tsx b/src/frontend/src/pages/part/pricing/SupplierPricingPanel.tsx
index 189e7b56f032..a4ad95681658 100644
--- a/src/frontend/src/pages/part/pricing/SupplierPricingPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/SupplierPricingPanel.tsx
@@ -7,7 +7,7 @@ import { tooltipFormatter } from '../../../components/charts/tooltipFormatter';
 import { ApiEndpoints } from '../../../enums/ApiEndpoints';
 import { useTable } from '../../../hooks/UseTable';
 import { apiUrl } from '../../../states/ApiState';
-import { TableColumn } from '../../../tables/Column';
+import type { TableColumn } from '../../../tables/Column';
 import { InvenTreeTable } from '../../../tables/InvenTreeTable';
 import {
   SupplierPriceBreakColumns,
@@ -61,7 +61,7 @@ export default function SupplierPricingPanel({
       {supplierPricingData.length > 0 ? (
         <BarChart
           data={supplierPricingData}
-          dataKey="name"
+          dataKey='name'
           series={[
             { name: 'unit_price', label: t`Unit Price`, color: 'blue.6' },
             {
diff --git a/src/frontend/src/pages/part/pricing/VariantPricingPanel.tsx b/src/frontend/src/pages/part/pricing/VariantPricingPanel.tsx
index 884c1c67ea8e..224736929d13 100644
--- a/src/frontend/src/pages/part/pricing/VariantPricingPanel.tsx
+++ b/src/frontend/src/pages/part/pricing/VariantPricingPanel.tsx
@@ -1,7 +1,7 @@
 import { t } from '@lingui/macro';
 import { BarChart } from '@mantine/charts';
 import { SimpleGrid, Stack } from '@mantine/core';
-import { ReactNode, useMemo } from 'react';
+import { type ReactNode, useMemo } from 'react';
 
 import { tooltipFormatter } from '../../../components/charts/tooltipFormatter';
 import { formatCurrency } from '../../../defaults/formatters';
@@ -9,7 +9,7 @@ import { ApiEndpoints } from '../../../enums/ApiEndpoints';
 import { ModelType } from '../../../enums/ModelType';
 import { useTable } from '../../../hooks/UseTable';
 import { apiUrl } from '../../../states/ApiState';
-import { TableColumn } from '../../../tables/Column';
+import type { TableColumn } from '../../../tables/Column';
 import { DateColumn, PartColumn } from '../../../tables/ColumnRenderers';
 import { InvenTreeTable } from '../../../tables/InvenTreeTable';
 import { NoPricingData } from './PricingPanel';
@@ -72,7 +72,7 @@ export default function VariantPricingPanel({
   }, [table.records]);
 
   return (
-    <Stack gap="xs">
+    <Stack gap='xs'>
       <SimpleGrid cols={2}>
         <InvenTreeTable
           tableState={table}
@@ -89,7 +89,7 @@ export default function VariantPricingPanel({
         />
         {variantPricingData.length > 0 ? (
           <BarChart
-            dataKey="name"
+            dataKey='name'
             data={variantPricingData}
             xAxisLabel={t`Variant Part`}
             yAxisLabel={t`Price Range`}
diff --git a/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx b/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx
index 36054a07483e..7591bccdf67c 100644
--- a/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx
+++ b/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx
@@ -1,13 +1,16 @@
 import { t } from '@lingui/macro';
 import { Accordion, Grid, Skeleton, Stack } from '@mantine/core';
 import { IconInfoCircle, IconList, IconPackages } from '@tabler/icons-react';
-import { ReactNode, useMemo } from 'react';
+import { type ReactNode, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
 import AdminButton from '../../components/buttons/AdminButton';
 import PrimaryActionButton from '../../components/buttons/PrimaryActionButton';
 import { PrintingActions } from '../../components/buttons/PrintingActions';
-import { DetailsField, DetailsTable } from '../../components/details/Details';
+import {
+  type DetailsField,
+  DetailsTable
+} from '../../components/details/Details';
 import { DetailsImage } from '../../components/details/DetailsImage';
 import { ItemDetailsGrid } from '../../components/details/ItemDetails';
 import {
@@ -23,7 +26,7 @@ import InstanceDetail from '../../components/nav/InstanceDetail';
 import { PageDetail } from '../../components/nav/PageDetail';
 import AttachmentPanel from '../../components/panels/AttachmentPanel';
 import NotesPanel from '../../components/panels/NotesPanel';
-import { PanelType } from '../../components/panels/Panel';
+import type { PanelType } from '../../components/panels/Panel';
 import { PanelGroup } from '../../components/panels/PanelGroup';
 import { StatusRenderer } from '../../components/render/StatusRenderer';
 import { formatCurrency } from '../../defaults/formatters';
@@ -108,7 +111,7 @@ export default function PurchaseOrderDetail() {
       return <Skeleton />;
     }
 
-    let tl: DetailsField[] = [
+    const tl: DetailsField[] = [
       {
         type: 'text',
         name: 'reference',
@@ -144,7 +147,7 @@ export default function PurchaseOrderDetail() {
       }
     ];
 
-    let tr: DetailsField[] = [
+    const tr: DetailsField[] = [
       {
         type: 'progressbar',
         name: 'completed',
@@ -179,7 +182,7 @@ export default function PurchaseOrderDetail() {
       }
     ];
 
-    let bl: DetailsField[] = [
+    const bl: DetailsField[] = [
       {
         type: 'link',
         external: true,
@@ -208,7 +211,7 @@ export default function PurchaseOrderDetail() {
       }
     ];
 
-    let br: DetailsField[] = [
+    const br: DetailsField[] = [
       {
         type: 'date',
         name: 'creation_date',
@@ -286,9 +289,9 @@ export default function PurchaseOrderDetail() {
             multiple={true}
             defaultValue={['line-items', 'extra-items']}
           >
-            <Accordion.Item value="line-items" key="lineitems">
+            <Accordion.Item value='line-items' key='lineitems'>
               <Accordion.Control>
-                <StylishText size="lg">{t`Line Items`}</StylishText>
+                <StylishText size='lg'>{t`Line Items`}</StylishText>
               </Accordion.Control>
               <Accordion.Panel>
                 <PurchaseOrderLineItemTable
@@ -299,9 +302,9 @@ export default function PurchaseOrderDetail() {
                 />
               </Accordion.Panel>
             </Accordion.Item>
-            <Accordion.Item value="extra-items" key="extraitems">
+            <Accordion.Item value='extra-items' key='extraitems'>
               <Accordion.Control>
-                <StylishText size="lg">{t`Extra Line Items`}</StylishText>
+                <StylishText size='lg'>{t`Extra Line Items`}</StylishText>
               </Accordion.Control>
               <Accordion.Panel>
                 <ExtraLineItemTable
@@ -321,7 +324,7 @@ export default function PurchaseOrderDetail() {
         icon: <IconPackages />,
         content: (
           <StockItemTable
-            tableName="received-stock"
+            tableName='received-stock'
             params={{
               purchase_order: id
             }}
@@ -398,16 +401,16 @@ export default function PurchaseOrderDetail() {
     return [
       <PrimaryActionButton
         title={t`Issue Order`}
-        icon="issue"
+        icon='issue'
         hidden={!canIssue}
-        color="blue"
+        color='blue'
         onClick={issueOrder.open}
       />,
       <PrimaryActionButton
         title={t`Complete Order`}
-        icon="complete"
+        icon='complete'
         hidden={!canComplete}
-        color="green"
+        color='green'
         onClick={completeOrder.open}
       />,
       <AdminButton model={ModelType.purchaseorder} pk={order.pk} />,
@@ -472,9 +475,9 @@ export default function PurchaseOrderDetail() {
       {editPurchaseOrder.modal}
       {duplicatePurchaseOrder.modal}
       <InstanceDetail status={requestStatus} loading={instanceQuery.isFetching}>
-        <Stack gap="xs">
+        <Stack gap='xs'>
           <PageDetail
-            title={t`Purchase Order` + `: ${order.reference}`}
+            title={`${t`Purchase Order`}: ${order.reference}`}
             subtitle={order.description}
             imageUrl={order.supplier_detail?.image}
             breadcrumbs={[{ name: t`Purchasing`, url: '/purchasing/' }]}
@@ -484,7 +487,7 @@ export default function PurchaseOrderDetail() {
             editEnabled={user.hasChangePermission(ModelType.purchaseorder)}
           />
           <PanelGroup
-            pageKey="purchaseorder"
+            pageKey='purchaseorder'
             panels={orderPanels}
             model={ModelType.purchaseorder}
             instance={order}
diff --git a/src/frontend/src/pages/purchasing/PurchasingIndex.tsx b/src/frontend/src/pages/purchasing/PurchasingIndex.tsx
index 4c7d9f93d6b6..4cf9b5f0300f 100644
--- a/src/frontend/src/pages/purchasing/PurchasingIndex.tsx
+++ b/src/frontend/src/pages/purchasing/PurchasingIndex.tsx
@@ -32,7 +32,7 @@ export default function PurchasingIndex() {
         icon: <IconBuildingStore />,
         content: (
           <CompanyTable
-            path="purchasing/supplier"
+            path='purchasing/supplier'
             params={{ is_supplier: true }}
           />
         )
@@ -43,7 +43,7 @@ export default function PurchasingIndex() {
         icon: <IconBuildingFactory2 />,
         content: (
           <CompanyTable
-            path="purchasing/manufacturer"
+            path='purchasing/manufacturer'
             params={{ is_manufacturer: true }}
           />
         )
@@ -59,7 +59,7 @@ export default function PurchasingIndex() {
     <Stack>
       <PageDetail title={t`Purchasing`} />
       <PanelGroup
-        pageKey="purchasing-index"
+        pageKey='purchasing-index'
         panels={panels}
         model={'purchasing'}
         id={null}
diff --git a/src/frontend/src/pages/sales/ReturnOrderDetail.tsx b/src/frontend/src/pages/sales/ReturnOrderDetail.tsx
index 4542fde44e03..e13738e15f86 100644
--- a/src/frontend/src/pages/sales/ReturnOrderDetail.tsx
+++ b/src/frontend/src/pages/sales/ReturnOrderDetail.tsx
@@ -1,13 +1,16 @@
 import { t } from '@lingui/macro';
 import { Accordion, Grid, Skeleton, Stack } from '@mantine/core';
 import { IconInfoCircle, IconList } from '@tabler/icons-react';
-import { ReactNode, useMemo } from 'react';
+import { type ReactNode, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
 import AdminButton from '../../components/buttons/AdminButton';
 import PrimaryActionButton from '../../components/buttons/PrimaryActionButton';
 import { PrintingActions } from '../../components/buttons/PrintingActions';
-import { DetailsField, DetailsTable } from '../../components/details/Details';
+import {
+  type DetailsField,
+  DetailsTable
+} from '../../components/details/Details';
 import { DetailsImage } from '../../components/details/DetailsImage';
 import { ItemDetailsGrid } from '../../components/details/ItemDetails';
 import {
@@ -23,7 +26,7 @@ import InstanceDetail from '../../components/nav/InstanceDetail';
 import { PageDetail } from '../../components/nav/PageDetail';
 import AttachmentPanel from '../../components/panels/AttachmentPanel';
 import NotesPanel from '../../components/panels/NotesPanel';
-import { PanelType } from '../../components/panels/Panel';
+import type { PanelType } from '../../components/panels/Panel';
 import { PanelGroup } from '../../components/panels/PanelGroup';
 import { StatusRenderer } from '../../components/render/StatusRenderer';
 import { formatCurrency } from '../../defaults/formatters';
@@ -79,7 +82,7 @@ export default function ReturnOrderDetail() {
       return <Skeleton />;
     }
 
-    let tl: DetailsField[] = [
+    const tl: DetailsField[] = [
       {
         type: 'text',
         name: 'reference',
@@ -115,7 +118,7 @@ export default function ReturnOrderDetail() {
       }
     ];
 
-    let tr: DetailsField[] = [
+    const tr: DetailsField[] = [
       {
         type: 'text',
         name: 'line_items',
@@ -149,7 +152,7 @@ export default function ReturnOrderDetail() {
       }
     ];
 
-    let bl: DetailsField[] = [
+    const bl: DetailsField[] = [
       {
         type: 'link',
         external: true,
@@ -178,7 +181,7 @@ export default function ReturnOrderDetail() {
       }
     ];
 
-    let br: DetailsField[] = [
+    const br: DetailsField[] = [
       {
         type: 'date',
         name: 'creation_date',
@@ -258,9 +261,9 @@ export default function ReturnOrderDetail() {
             multiple={true}
             defaultValue={['line-items', 'extra-items']}
           >
-            <Accordion.Item value="line-items" key="lineitems">
+            <Accordion.Item value='line-items' key='lineitems'>
               <Accordion.Control>
-                <StylishText size="lg">{t`Line Items`}</StylishText>
+                <StylishText size='lg'>{t`Line Items`}</StylishText>
               </Accordion.Control>
               <Accordion.Panel>
                 <ReturnOrderLineItemTable
@@ -271,9 +274,9 @@ export default function ReturnOrderDetail() {
                 />
               </Accordion.Panel>
             </Accordion.Item>
-            <Accordion.Item value="extra-items" key="extraitems">
+            <Accordion.Item value='extra-items' key='extraitems'>
               <Accordion.Control>
-                <StylishText size="lg">{t`Extra Line Items`}</StylishText>
+                <StylishText size='lg'>{t`Extra Line Items`}</StylishText>
               </Accordion.Control>
               <Accordion.Panel>
                 <ExtraLineItemTable
@@ -397,16 +400,16 @@ export default function ReturnOrderDetail() {
     return [
       <PrimaryActionButton
         title={t`Issue Order`}
-        icon="issue"
+        icon='issue'
         hidden={!canIssue}
-        color="blue"
+        color='blue'
         onClick={() => issueOrder.open()}
       />,
       <PrimaryActionButton
         title={t`Complete Order`}
-        icon="complete"
+        icon='complete'
         hidden={!canComplete}
-        color="green"
+        color='green'
         onClick={() => completeOrder.open()}
       />,
       <AdminButton model={ModelType.returnorder} pk={order.pk} />,
@@ -459,9 +462,9 @@ export default function ReturnOrderDetail() {
       {completeOrder.modal}
       {duplicateReturnOrder.modal}
       <InstanceDetail status={requestStatus} loading={instanceQuery.isFetching}>
-        <Stack gap="xs">
+        <Stack gap='xs'>
           <PageDetail
-            title={t`Return Order` + `: ${order.reference}`}
+            title={`${t`Return Order`}: ${order.reference}`}
             subtitle={order.description}
             imageUrl={order.customer_detail?.image}
             badges={orderBadges}
@@ -471,7 +474,7 @@ export default function ReturnOrderDetail() {
             editEnabled={user.hasChangePermission(ModelType.returnorder)}
           />
           <PanelGroup
-            pageKey="returnorder"
+            pageKey='returnorder'
             panels={orderPanels}
             model={ModelType.returnorder}
             instance={order}
diff --git a/src/frontend/src/pages/sales/SalesIndex.tsx b/src/frontend/src/pages/sales/SalesIndex.tsx
index 8e8197d9dec7..968b005f6bda 100644
--- a/src/frontend/src/pages/sales/SalesIndex.tsx
+++ b/src/frontend/src/pages/sales/SalesIndex.tsx
@@ -38,7 +38,7 @@ export default function PurchasingIndex() {
         label: t`Customers`,
         icon: <IconBuildingStore />,
         content: (
-          <CompanyTable path="sales/customer" params={{ is_customer: true }} />
+          <CompanyTable path='sales/customer' params={{ is_customer: true }} />
         )
       }
     ];
@@ -52,7 +52,7 @@ export default function PurchasingIndex() {
     <Stack>
       <PageDetail title={t`Sales`} />
       <PanelGroup
-        pageKey="sales-index"
+        pageKey='sales-index'
         panels={panels}
         model={'sales'}
         id={null}
diff --git a/src/frontend/src/pages/sales/SalesOrderDetail.tsx b/src/frontend/src/pages/sales/SalesOrderDetail.tsx
index 3071b5ac74b9..7a7426a6fe1e 100644
--- a/src/frontend/src/pages/sales/SalesOrderDetail.tsx
+++ b/src/frontend/src/pages/sales/SalesOrderDetail.tsx
@@ -7,13 +7,16 @@ import {
   IconTools,
   IconTruckDelivery
 } from '@tabler/icons-react';
-import { ReactNode, useMemo } from 'react';
+import { type ReactNode, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
 import AdminButton from '../../components/buttons/AdminButton';
 import PrimaryActionButton from '../../components/buttons/PrimaryActionButton';
 import { PrintingActions } from '../../components/buttons/PrintingActions';
-import { DetailsField, DetailsTable } from '../../components/details/Details';
+import {
+  type DetailsField,
+  DetailsTable
+} from '../../components/details/Details';
 import { DetailsImage } from '../../components/details/DetailsImage';
 import { ItemDetailsGrid } from '../../components/details/ItemDetails';
 import {
@@ -29,7 +32,7 @@ import InstanceDetail from '../../components/nav/InstanceDetail';
 import { PageDetail } from '../../components/nav/PageDetail';
 import AttachmentPanel from '../../components/panels/AttachmentPanel';
 import NotesPanel from '../../components/panels/NotesPanel';
-import { PanelType } from '../../components/panels/Panel';
+import type { PanelType } from '../../components/panels/Panel';
 import { PanelGroup } from '../../components/panels/PanelGroup';
 import { StatusRenderer } from '../../components/render/StatusRenderer';
 import { formatCurrency } from '../../defaults/formatters';
@@ -88,7 +91,7 @@ export default function SalesOrderDetail() {
       return <Skeleton />;
     }
 
-    let tl: DetailsField[] = [
+    const tl: DetailsField[] = [
       {
         type: 'text',
         name: 'reference',
@@ -124,7 +127,7 @@ export default function SalesOrderDetail() {
       }
     ];
 
-    let tr: DetailsField[] = [
+    const tr: DetailsField[] = [
       {
         type: 'progressbar',
         name: 'completed',
@@ -161,7 +164,7 @@ export default function SalesOrderDetail() {
       }
     ];
 
-    let bl: DetailsField[] = [
+    const bl: DetailsField[] = [
       {
         type: 'link',
         external: true,
@@ -190,7 +193,7 @@ export default function SalesOrderDetail() {
       }
     ];
 
-    let br: DetailsField[] = [
+    const br: DetailsField[] = [
       {
         type: 'date',
         name: 'creation_date',
@@ -298,9 +301,9 @@ export default function SalesOrderDetail() {
             multiple={true}
             defaultValue={['line-items', 'extra-items']}
           >
-            <Accordion.Item value="line-items" key="lineitems">
+            <Accordion.Item value='line-items' key='lineitems'>
               <Accordion.Control>
-                <StylishText size="lg">{t`Line Items`}</StylishText>
+                <StylishText size='lg'>{t`Line Items`}</StylishText>
               </Accordion.Control>
               <Accordion.Panel>
                 <SalesOrderLineItemTable
@@ -314,9 +317,9 @@ export default function SalesOrderDetail() {
                 />
               </Accordion.Panel>
             </Accordion.Item>
-            <Accordion.Item value="extra-items" key="extraitems">
+            <Accordion.Item value='extra-items' key='extraitems'>
               <Accordion.Control>
-                <StylishText size="lg">{t`Extra Line Items`}</StylishText>
+                <StylishText size='lg'>{t`Extra Line Items`}</StylishText>
               </Accordion.Control>
               <Accordion.Panel>
                 <ExtraLineItemTable
@@ -345,7 +348,7 @@ export default function SalesOrderDetail() {
             orderId={order.pk}
             showPartInfo
             allowEdit
-            modelField="item"
+            modelField='item'
             modelTarget={ModelType.stockitem}
           />
         )
@@ -431,23 +434,23 @@ export default function SalesOrderDetail() {
     return [
       <PrimaryActionButton
         title={t`Issue Order`}
-        icon="issue"
+        icon='issue'
         hidden={!canIssue}
-        color="blue"
+        color='blue'
         onClick={issueOrder.open}
       />,
       <PrimaryActionButton
         title={t`Ship Order`}
-        icon="deliver"
+        icon='deliver'
         hidden={!canShip}
-        color="blue"
+        color='blue'
         onClick={completeOrder.open}
       />,
       <PrimaryActionButton
         title={t`Complete Order`}
-        icon="complete"
+        icon='complete'
         hidden={!canComplete}
-        color="green"
+        color='green'
         onClick={completeOrder.open}
       />,
       <AdminButton model={ModelType.salesorder} pk={order.pk} />,
@@ -511,9 +514,9 @@ export default function SalesOrderDetail() {
       {editSalesOrder.modal}
       {duplicateSalesOrder.modal}
       <InstanceDetail status={requestStatus} loading={instanceQuery.isFetching}>
-        <Stack gap="xs">
+        <Stack gap='xs'>
           <PageDetail
-            title={t`Sales Order` + `: ${order.reference}`}
+            title={`${t`Sales Order`}: ${order.reference}`}
             subtitle={order.description}
             imageUrl={order.customer_detail?.image}
             badges={orderBadges}
@@ -523,7 +526,7 @@ export default function SalesOrderDetail() {
             editEnabled={user.hasChangePermission(ModelType.salesorder)}
           />
           <PanelGroup
-            pageKey="salesorder"
+            pageKey='salesorder'
             panels={orderPanels}
             model={ModelType.salesorder}
             id={order.pk}
diff --git a/src/frontend/src/pages/sales/SalesOrderShipmentDetail.tsx b/src/frontend/src/pages/sales/SalesOrderShipmentDetail.tsx
index d9bcde769f75..0eb086692917 100644
--- a/src/frontend/src/pages/sales/SalesOrderShipmentDetail.tsx
+++ b/src/frontend/src/pages/sales/SalesOrderShipmentDetail.tsx
@@ -6,7 +6,10 @@ import { useNavigate, useParams } from 'react-router-dom';
 
 import PrimaryActionButton from '../../components/buttons/PrimaryActionButton';
 import { PrintingActions } from '../../components/buttons/PrintingActions';
-import { DetailsField, DetailsTable } from '../../components/details/Details';
+import {
+  type DetailsField,
+  DetailsTable
+} from '../../components/details/Details';
 import DetailsBadge from '../../components/details/DetailsBadge';
 import { DetailsImage } from '../../components/details/DetailsImage';
 import { ItemDetailsGrid } from '../../components/details/ItemDetails';
@@ -20,7 +23,7 @@ import InstanceDetail from '../../components/nav/InstanceDetail';
 import { PageDetail } from '../../components/nav/PageDetail';
 import AttachmentPanel from '../../components/panels/AttachmentPanel';
 import NotesPanel from '../../components/panels/NotesPanel';
-import { PanelType } from '../../components/panels/Panel';
+import type { PanelType } from '../../components/panels/Panel';
 import { PanelGroup } from '../../components/panels/PanelGroup';
 import { formatDate } from '../../defaults/formatters';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
@@ -76,7 +79,7 @@ export default function SalesOrderShipmentDetail() {
       return <Skeleton />;
     }
 
-    let data: any = {
+    const data: any = {
       ...shipment,
       customer: customer?.pk,
       customer_name: customer?.name,
@@ -84,7 +87,7 @@ export default function SalesOrderShipmentDetail() {
     };
 
     // Top Left: Order / customer information
-    let tl: DetailsField[] = [
+    const tl: DetailsField[] = [
       {
         type: 'link',
         model: ModelType.salesorder,
@@ -126,7 +129,7 @@ export default function SalesOrderShipmentDetail() {
     ];
 
     // Top right: Shipment information
-    let tr: DetailsField[] = [
+    const tr: DetailsField[] = [
       {
         type: 'text',
         name: 'tracking_number',
@@ -214,7 +217,7 @@ export default function SalesOrderShipmentDetail() {
             shipmentId={shipment.pk}
             showPartInfo
             allowEdit={isPending}
-            modelField="item"
+            modelField='item'
             modelTarget={ModelType.stockitem}
           />
         )
@@ -273,11 +276,22 @@ export default function SalesOrderShipmentDetail() {
     }
 
     return [
-      <DetailsBadge label={t`Pending`} color="gray" visible={isPending} />,
-      <DetailsBadge label={t`Shipped`} color="green" visible={!isPending} />,
       <DetailsBadge
+        key='pending'
+        label={t`Pending`}
+        color='gray'
+        visible={isPending}
+      />,
+      <DetailsBadge
+        key='shipped'
+        label={t`Shipped`}
+        color='green'
+        visible={!isPending}
+      />,
+      <DetailsBadge
+        key='delivered'
         label={t`Delivered`}
-        color="blue"
+        color='blue'
         visible={!!shipment.delivery_date}
       />
     ];
@@ -290,25 +304,29 @@ export default function SalesOrderShipmentDetail() {
 
     return [
       <PrimaryActionButton
+        key='send-shipment'
         title={t`Send Shipment`}
-        icon="sales_orders"
+        icon='sales_orders'
         hidden={!isPending}
-        color="green"
+        color='green'
         onClick={() => {
           completeShipment.open();
         }}
       />,
       <BarcodeActionDropdown
+        key='barcode'
         model={ModelType.salesordershipment}
         pk={shipment.pk}
       />,
       <PrintingActions
+        key='print'
         modelType={ModelType.salesordershipment}
         items={[shipment.pk]}
         enableLabels
         enableReports
       />,
       <OptionsActionDropdown
+        key='actions'
         tooltip={t`Shipment Actions`}
         actions={[
           EditItemAction({
@@ -335,10 +353,10 @@ export default function SalesOrderShipmentDetail() {
         status={shipmentStatus}
         loading={shipmentQuery.isFetching || customerQuery.isFetching}
       >
-        <Stack gap="xs">
+        <Stack gap='xs'>
           <PageDetail
-            title={t`Sales Order Shipment` + `: ${shipment.reference}`}
-            subtitle={t`Sales Order` + `: ${shipment.order_detail?.reference}`}
+            title={`${t`Sales Order Shipment`}: ${shipment.reference}`}
+            subtitle={`${t`Sales Order`}: ${shipment.order_detail?.reference}`}
             breadcrumbs={[
               { name: t`Sales`, url: '/sales/' },
               {
@@ -353,7 +371,7 @@ export default function SalesOrderShipmentDetail() {
             actions={shipmentActions}
           />
           <PanelGroup
-            pageKey="salesordershipment"
+            pageKey='salesordershipment'
             panels={shipmentPanels}
             model={ModelType.salesordershipment}
             instance={shipment}
diff --git a/src/frontend/src/pages/stock/LocationDetail.tsx b/src/frontend/src/pages/stock/LocationDetail.tsx
index 6ed43e1ddeb8..f9f9e6c4fa71 100644
--- a/src/frontend/src/pages/stock/LocationDetail.tsx
+++ b/src/frontend/src/pages/stock/LocationDetail.tsx
@@ -7,7 +7,10 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { ActionButton } from '../../components/buttons/ActionButton';
 import AdminButton from '../../components/buttons/AdminButton';
 import { PrintingActions } from '../../components/buttons/PrintingActions';
-import { DetailsField, DetailsTable } from '../../components/details/Details';
+import {
+  type DetailsField,
+  DetailsTable
+} from '../../components/details/Details';
 import { ItemDetailsGrid } from '../../components/details/ItemDetails';
 import {
   ActionDropdown,
@@ -20,13 +23,13 @@ import { ApiIcon } from '../../components/items/ApiIcon';
 import InstanceDetail from '../../components/nav/InstanceDetail';
 import NavigationTree from '../../components/nav/NavigationTree';
 import { PageDetail } from '../../components/nav/PageDetail';
-import { PanelType } from '../../components/panels/Panel';
+import type { PanelType } from '../../components/panels/Panel';
 import { PanelGroup } from '../../components/panels/PanelGroup';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
 import { UserRoles } from '../../enums/Roles';
 import {
-  StockOperationProps,
+  type StockOperationProps,
   stockLocationFields,
   useCountStockItem,
   useTransferStockItem
@@ -48,7 +51,7 @@ export default function Stock() {
   const { id: _id } = useParams();
 
   const id = useMemo(
-    () => (!isNaN(parseInt(_id || '')) ? _id : undefined),
+    () => (!Number.isNaN(Number.parseInt(_id || '')) ? _id : undefined),
     [_id]
   );
 
@@ -76,14 +79,14 @@ export default function Stock() {
       return <Skeleton />;
     }
 
-    let left: DetailsField[] = [
+    const left: DetailsField[] = [
       {
         type: 'text',
         name: 'name',
         label: t`Name`,
         copy: true,
         value_formatter: () => (
-          <Group gap="xs">
+          <Group gap='xs'>
             {location.icon && <ApiIcon name={location.icon} />}
             {location.name}
           </Group>
@@ -114,7 +117,7 @@ export default function Stock() {
       }
     ];
 
-    let right: DetailsField[] = [
+    const right: DetailsField[] = [
       {
         type: 'text',
         name: 'items',
@@ -176,7 +179,7 @@ export default function Stock() {
         icon: <IconPackages />,
         content: (
           <StockItemTable
-            tableName="location-stock"
+            tableName='location-stock'
             allowAdd
             params={{
               location: id
@@ -220,7 +223,7 @@ export default function Stock() {
     return [
       {
         value: 0,
-        display_name: `Move items to parent location`
+        display_name: t`Move items to parent location`
       },
       {
         value: 1,
@@ -274,10 +277,10 @@ export default function Stock() {
     () => [
       <AdminButton model={ModelType.stocklocation} pk={location.pk} />,
       <ActionButton
-        icon={<InvenTreeIcon icon="stocktake" />}
+        icon={<InvenTreeIcon icon='stocktake' />}
         onClick={notYetImplemented}
-        variant="outline"
-        size="lg"
+        variant='outline'
+        size='lg'
       />,
       location.pk ? (
         <BarcodeActionDropdown
@@ -286,13 +289,13 @@ export default function Stock() {
           actions={[
             {
               name: 'Scan in stock items',
-              icon: <InvenTreeIcon icon="stock" />,
+              icon: <InvenTreeIcon icon='stock' />,
               tooltip: 'Scan items',
               onClick: notYetImplemented
             },
             {
               name: 'Scan in container',
-              icon: <InvenTreeIcon icon="unallocated_stock" />,
+              icon: <InvenTreeIcon icon='unallocated_stock' />,
               tooltip: 'Scan container',
               onClick: notYetImplemented
             }
@@ -308,12 +311,12 @@ export default function Stock() {
       />,
       <ActionDropdown
         tooltip={t`Stock Actions`}
-        icon={<InvenTreeIcon icon="stock" />}
+        icon={<InvenTreeIcon icon='stock' />}
         actions={[
           {
             name: t`Count Stock`,
             icon: (
-              <InvenTreeIcon icon="stocktake" iconProps={{ color: 'blue' }} />
+              <InvenTreeIcon icon='stocktake' iconProps={{ color: 'blue' }} />
             ),
             tooltip: t`Count Stock`,
             onClick: () => countStockItems.open()
@@ -321,7 +324,7 @@ export default function Stock() {
           {
             name: 'Transfer Stock',
             icon: (
-              <InvenTreeIcon icon="transfer" iconProps={{ color: 'blue' }} />
+              <InvenTreeIcon icon='transfer' iconProps={{ color: 'blue' }} />
             ),
             tooltip: 'Transfer Stock',
             onClick: () => transferStockItems.open()
@@ -389,7 +392,7 @@ export default function Stock() {
             }}
           />
           <PanelGroup
-            pageKey="stocklocation"
+            pageKey='stocklocation'
             panels={locationPanels}
             model={ModelType.stocklocation}
             id={location.pk ?? null}
diff --git a/src/frontend/src/pages/stock/StockDetail.tsx b/src/frontend/src/pages/stock/StockDetail.tsx
index 181e0acdf1db..5ec82dcb887d 100644
--- a/src/frontend/src/pages/stock/StockDetail.tsx
+++ b/src/frontend/src/pages/stock/StockDetail.tsx
@@ -10,13 +10,16 @@ import {
   IconSitemap
 } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
-import { ReactNode, useMemo, useState } from 'react';
+import { type ReactNode, useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { api } from '../../App';
 import AdminButton from '../../components/buttons/AdminButton';
 import { PrintingActions } from '../../components/buttons/PrintingActions';
-import { DetailsField, DetailsTable } from '../../components/details/Details';
+import {
+  type DetailsField,
+  DetailsTable
+} from '../../components/details/Details';
 import DetailsBadge from '../../components/details/DetailsBadge';
 import { DetailsImage } from '../../components/details/DetailsImage';
 import { ItemDetailsGrid } from '../../components/details/ItemDetails';
@@ -34,7 +37,7 @@ import NavigationTree from '../../components/nav/NavigationTree';
 import { PageDetail } from '../../components/nav/PageDetail';
 import AttachmentPanel from '../../components/panels/AttachmentPanel';
 import NotesPanel from '../../components/panels/NotesPanel';
-import { PanelType } from '../../components/panels/Panel';
+import type { PanelType } from '../../components/panels/Panel';
 import { PanelGroup } from '../../components/panels/PanelGroup';
 import { StatusRenderer } from '../../components/render/StatusRenderer';
 import { formatCurrency } from '../../defaults/formatters';
@@ -42,7 +45,7 @@ import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
 import { UserRoles } from '../../enums/Roles';
 import {
-  StockOperationProps,
+  type StockOperationProps,
   useAddStockItem,
   useCountStockItem,
   useRemoveStockItem,
@@ -100,8 +103,8 @@ export default function StockDetail() {
   });
 
   const detailsPanel = useMemo(() => {
-    let data = { ...stockitem };
-    let part = stockitem?.part_detail ?? {};
+    const data = { ...stockitem };
+    const part = stockitem?.part_detail ?? {};
 
     data.available_stock = Math.max(0, data.quantity - data.allocated);
 
@@ -110,7 +113,7 @@ export default function StockDetail() {
     }
 
     // Top left - core part information
-    let tl: DetailsField[] = [
+    const tl: DetailsField[] = [
       {
         name: 'part',
         label: t`Base Part`,
@@ -134,7 +137,7 @@ export default function StockDetail() {
       {
         type: 'text',
         name: 'tests',
-        label: `Completed Tests`,
+        label: t`Completed Tests`,
         icon: 'progress',
         hidden: !part?.testable
       },
@@ -154,7 +157,7 @@ export default function StockDetail() {
     ];
 
     // Top right - available stock information
-    let tr: DetailsField[] = [
+    const tr: DetailsField[] = [
       {
         type: 'text',
         name: 'quantity',
@@ -188,7 +191,7 @@ export default function StockDetail() {
     ];
 
     // Bottom left: location information
-    let bl: DetailsField[] = [
+    const bl: DetailsField[] = [
       {
         name: 'supplier_part',
         label: t`Supplier Part`,
@@ -275,7 +278,7 @@ export default function StockDetail() {
     ];
 
     // Bottom right - any other information
-    let br: DetailsField[] = [
+    const br: DetailsField[] = [
       // Expiry date
       {
         type: 'date',
@@ -438,14 +441,14 @@ export default function StockDetail() {
             defaultValue={['buildallocations', 'salesallocations']}
           >
             {showBuildAllocations && (
-              <Accordion.Item value="buildallocations" key="buildallocations">
+              <Accordion.Item value='buildallocations' key='buildallocations'>
                 <Accordion.Control>
-                  <StylishText size="lg">{t`Build Order Allocations`}</StylishText>
+                  <StylishText size='lg'>{t`Build Order Allocations`}</StylishText>
                 </Accordion.Control>
                 <Accordion.Panel>
                   <BuildAllocatedStockTable
                     stockId={stockitem.pk}
-                    modelField="build"
+                    modelField='build'
                     modelTarget={ModelType.build}
                     showBuildInfo
                   />
@@ -453,14 +456,14 @@ export default function StockDetail() {
               </Accordion.Item>
             )}
             {showSalesAlloctions && (
-              <Accordion.Item value="salesallocations" key="salesallocations">
+              <Accordion.Item value='salesallocations' key='salesallocations'>
                 <Accordion.Control>
-                  <StylishText size="lg">{t`Sales Order Allocations`}</StylishText>
+                  <StylishText size='lg'>{t`Sales Order Allocations`}</StylishText>
                 </Accordion.Control>
                 <Accordion.Panel>
                   <SalesOrderAllocationTable
                     stockId={stockitem.pk}
-                    modelField="order"
+                    modelField='order'
                     modelTarget={ModelType.salesorder}
                     showOrderInfo
                   />
@@ -498,7 +501,7 @@ export default function StockDetail() {
         hidden: (stockitem?.child_items ?? 0) == 0,
         content: stockitem?.pk ? (
           <StockItemTable
-            tableName="child-stock"
+            tableName='child-stock'
             params={{ ancestor: stockitem.pk }}
           />
         ) : (
@@ -623,7 +626,7 @@ export default function StockDetail() {
     pk: stockitem.pk,
     title: t`Return Stock Item`,
     preFormContent: (
-      <Alert color="blue">
+      <Alert color='blue'>
         {t`Return this item into stock. This will remove the customer assignment.`}
       </Alert>
     ),
@@ -672,7 +675,7 @@ export default function StockDetail() {
             tooltip: t`Count stock`,
             hidden: serialized || !inStock,
             icon: (
-              <InvenTreeIcon icon="stocktake" iconProps={{ color: 'blue' }} />
+              <InvenTreeIcon icon='stocktake' iconProps={{ color: 'blue' }} />
             ),
             onClick: () => {
               stockitem.pk && countStockItem.open();
@@ -682,7 +685,7 @@ export default function StockDetail() {
             name: t`Add`,
             tooltip: t`Add Stock`,
             hidden: serialized || !inStock,
-            icon: <InvenTreeIcon icon="add" iconProps={{ color: 'green' }} />,
+            icon: <InvenTreeIcon icon='add' iconProps={{ color: 'green' }} />,
             onClick: () => {
               stockitem.pk && addStockItem.open();
             }
@@ -691,7 +694,7 @@ export default function StockDetail() {
             name: t`Remove`,
             tooltip: t`Remove Stock`,
             hidden: serialized || !inStock,
-            icon: <InvenTreeIcon icon="remove" iconProps={{ color: 'red' }} />,
+            icon: <InvenTreeIcon icon='remove' iconProps={{ color: 'red' }} />,
             onClick: () => {
               stockitem.pk && removeStockItem.open();
             }
@@ -703,7 +706,7 @@ export default function StockDetail() {
               !inStock ||
               serialized ||
               stockitem?.part_detail?.trackable != true,
-            icon: <InvenTreeIcon icon="serial" iconProps={{ color: 'blue' }} />,
+            icon: <InvenTreeIcon icon='serial' iconProps={{ color: 'blue' }} />,
             onClick: () => {
               serializeStockItem.open();
             }
@@ -713,7 +716,7 @@ export default function StockDetail() {
             tooltip: t`Transfer Stock`,
             hidden: !inStock,
             icon: (
-              <InvenTreeIcon icon="transfer" iconProps={{ color: 'blue' }} />
+              <InvenTreeIcon icon='transfer' iconProps={{ color: 'blue' }} />
             ),
             onClick: () => {
               stockitem.pk && transferStockItem.open();
@@ -725,7 +728,7 @@ export default function StockDetail() {
             hidden: !stockitem.sales_order,
             icon: (
               <InvenTreeIcon
-                icon="return_orders"
+                icon='return_orders'
                 iconProps={{ color: 'blue' }}
               />
             ),
@@ -763,37 +766,37 @@ export default function StockDetail() {
       ? []
       : [
           <DetailsBadge
-            color="yellow"
+            color='yellow'
             label={t`In Production`}
             visible={stockitem.is_building}
           />,
           <DetailsBadge
-            color="blue"
-            label={t`Serial Number` + `: ${stockitem.serial}`}
+            color='blue'
+            label={`${t`Serial Number`}: ${stockitem.serial}`}
             visible={!!stockitem.serial}
-            key="serial"
+            key='serial'
           />,
           <DetailsBadge
-            color="blue"
-            label={t`Quantity` + `: ${stockitem.quantity}`}
+            color='blue'
+            label={`${t`Quantity`}: ${stockitem.quantity}`}
             visible={!stockitem.serial}
-            key="quantity"
+            key='quantity'
           />,
           <DetailsBadge
-            color="yellow"
-            label={t`Available` + `: ${available}`}
+            color='yellow'
+            label={`${t`Available`}: ${available}`}
             visible={
               stockitem.in_stock &&
               !stockitem.serial &&
               available != stockitem.quantity
             }
-            key="available"
+            key='available'
           />,
           <DetailsBadge
-            color="blue"
-            label={t`Batch Code` + `: ${stockitem.batch}`}
+            color='blue'
+            label={`${t`Batch Code`}: ${stockitem.batch}`}
             visible={!!stockitem.batch}
-            key="batch"
+            key='batch'
           />,
           <StatusRenderer
             status={stockitem.status_custom_key}
@@ -802,25 +805,25 @@ export default function StockDetail() {
               size: 'lg',
               hidden: !!stockitem.status_custom_key
             }}
-            key="status"
+            key='status'
           />,
           <DetailsBadge
-            color="yellow"
+            color='yellow'
             label={t`Stale`}
             visible={enableExpiry && stockitem.stale && !stockitem.expired}
-            key="stale"
+            key='stale'
           />,
           <DetailsBadge
-            color="orange"
+            color='orange'
             label={t`Expired`}
             visible={enableExpiry && stockitem.expired}
-            key="expired"
+            key='expired'
           />,
           <DetailsBadge
-            color="red"
+            color='red'
             label={t`Unavailable`}
             visible={stockitem.in_stock == false}
-            key="unavailable"
+            key='unavailable'
           />
         ];
   }, [stockitem, instanceQuery, enableExpiry]);
@@ -850,7 +853,7 @@ export default function StockDetail() {
           actions={stockActions}
         />
         <PanelGroup
-          pageKey="stockitem"
+          pageKey='stockitem'
           panels={stockPanels}
           model={ModelType.stockitem}
           id={stockitem.pk}
diff --git a/src/frontend/src/router.tsx b/src/frontend/src/router.tsx
index a7f272152bb7..c444f9afeb25 100644
--- a/src/frontend/src/router.tsx
+++ b/src/frontend/src/router.tsx
@@ -114,61 +114,61 @@ export const Set_Password = Loadable(
 // Routes
 export const routes = (
   <Routes>
-    <Route path="*" element={<NotFound />} errorElement={<ErrorPage />} />
-    <Route path="/" element={<LayoutComponent />} errorElement={<ErrorPage />}>
+    <Route path='*' element={<NotFound />} errorElement={<ErrorPage />} />
+    <Route path='/' element={<LayoutComponent />} errorElement={<ErrorPage />}>
       <Route index element={<Home />} />,
-      <Route path="home/" element={<Home />} />,
-      <Route path="notifications/*" element={<Notifications />} />,
-      <Route path="scan/" element={<Scan />} />,
-      <Route path="settings/">
-        <Route index element={<Navigate to="admin/" />} />
-        <Route path="admin/*" element={<AdminCenter />} />
-        <Route path="system/*" element={<SystemSettings />} />
-        <Route path="user/*" element={<UserSettings />} />
+      <Route path='home/' element={<Home />} />,
+      <Route path='notifications/*' element={<Notifications />} />,
+      <Route path='scan/' element={<Scan />} />,
+      <Route path='settings/'>
+        <Route index element={<Navigate to='admin/' />} />
+        <Route path='admin/*' element={<AdminCenter />} />
+        <Route path='system/*' element={<SystemSettings />} />
+        <Route path='user/*' element={<UserSettings />} />
       </Route>
-      <Route path="part/">
-        <Route index element={<Navigate to="category/index/" />} />
-        <Route path="category/:id?/*" element={<CategoryDetail />} />
-        <Route path=":id/*" element={<PartDetail />} />
+      <Route path='part/'>
+        <Route index element={<Navigate to='category/index/' />} />
+        <Route path='category/:id?/*' element={<CategoryDetail />} />
+        <Route path=':id/*' element={<PartDetail />} />
       </Route>
-      <Route path="stock/">
-        <Route index element={<Navigate to="location/index/" />} />
-        <Route path="location/:id?/*" element={<LocationDetail />} />
-        <Route path="item/:id/*" element={<StockDetail />} />
+      <Route path='stock/'>
+        <Route index element={<Navigate to='location/index/' />} />
+        <Route path='location/:id?/*' element={<LocationDetail />} />
+        <Route path='item/:id/*' element={<StockDetail />} />
       </Route>
-      <Route path="manufacturing/">
-        <Route index element={<Navigate to="index/" />} />
-        <Route path="index/*" element={<BuildIndex />} />
-        <Route path="build-order/:id/*" element={<BuildDetail />} />
+      <Route path='manufacturing/'>
+        <Route index element={<Navigate to='index/' />} />
+        <Route path='index/*' element={<BuildIndex />} />
+        <Route path='build-order/:id/*' element={<BuildDetail />} />
       </Route>
-      <Route path="purchasing/">
-        <Route index element={<Navigate to="index/" />} />
-        <Route path="index/*" element={<PurchasingIndex />} />
-        <Route path="purchase-order/:id/*" element={<PurchaseOrderDetail />} />
-        <Route path="supplier/:id/*" element={<SupplierDetail />} />
-        <Route path="supplier-part/:id/*" element={<SupplierPartDetail />} />
-        <Route path="manufacturer/:id/*" element={<ManufacturerDetail />} />
+      <Route path='purchasing/'>
+        <Route index element={<Navigate to='index/' />} />
+        <Route path='index/*' element={<PurchasingIndex />} />
+        <Route path='purchase-order/:id/*' element={<PurchaseOrderDetail />} />
+        <Route path='supplier/:id/*' element={<SupplierDetail />} />
+        <Route path='supplier-part/:id/*' element={<SupplierPartDetail />} />
+        <Route path='manufacturer/:id/*' element={<ManufacturerDetail />} />
         <Route
-          path="manufacturer-part/:id/*"
+          path='manufacturer-part/:id/*'
           element={<ManufacturerPartDetail />}
         />
       </Route>
-      <Route path="company/:id/*" element={<CompanyDetail />} />
-      <Route path="sales/">
-        <Route index element={<Navigate to="index/" />} />
-        <Route path="index/*" element={<SalesIndex />} />
-        <Route path="sales-order/:id/*" element={<SalesOrderDetail />} />
-        <Route path="shipment/:id/*" element={<SalesOrderShipmentDetail />} />
-        <Route path="return-order/:id/*" element={<ReturnOrderDetail />} />
-        <Route path="customer/:id/*" element={<CustomerDetail />} />
+      <Route path='company/:id/*' element={<CompanyDetail />} />
+      <Route path='sales/'>
+        <Route index element={<Navigate to='index/' />} />
+        <Route path='index/*' element={<SalesIndex />} />
+        <Route path='sales-order/:id/*' element={<SalesOrderDetail />} />
+        <Route path='shipment/:id/*' element={<SalesOrderShipmentDetail />} />
+        <Route path='return-order/:id/*' element={<ReturnOrderDetail />} />
+        <Route path='customer/:id/*' element={<CustomerDetail />} />
       </Route>
     </Route>
-    <Route path="/" errorElement={<ErrorPage />}>
-      <Route path="/login" element={<Login />} />,
-      <Route path="/logout" element={<Logout />} />,
-      <Route path="/logged-in" element={<Logged_In />} />
-      <Route path="/reset-password" element={<Reset />} />
-      <Route path="/set-password" element={<Set_Password />} />
+    <Route path='/' errorElement={<ErrorPage />}>
+      <Route path='/login' element={<Login />} />,
+      <Route path='/logout' element={<Logout />} />,
+      <Route path='/logged-in' element={<Logged_In />} />
+      <Route path='/reset-password' element={<Reset />} />
+      <Route path='/set-password' element={<Set_Password />} />
     </Route>
   </Routes>
 );
diff --git a/src/frontend/src/states/ApiState.tsx b/src/frontend/src/states/ApiState.tsx
index de6fa148380d..60431112610f 100644
--- a/src/frontend/src/states/ApiState.tsx
+++ b/src/frontend/src/states/ApiState.tsx
@@ -4,7 +4,7 @@ import { createJSONStorage, persist } from 'zustand/middleware';
 import { api } from '../App';
 import { emptyServerAPI } from '../defaults/defaults';
 import { ApiEndpoints } from '../enums/ApiEndpoints';
-import { AuthProps, ServerAPIProps } from './states';
+import type { AuthProps, ServerAPIProps } from './states';
 
 interface ServerApiStateProps {
   server: ServerAPIProps;
diff --git a/src/frontend/src/states/IconState.tsx b/src/frontend/src/states/IconState.tsx
index 2990c44482f2..683c4bbdf550 100644
--- a/src/frontend/src/states/IconState.tsx
+++ b/src/frontend/src/states/IconState.tsx
@@ -49,7 +49,7 @@ export const useIconState = create<IconState>()((set, get) => ({
               }) format("${format}")`
           )
           .join(',\n');
-        const font = new FontFace(fontName, src + ';');
+        const font = new FontFace(fontName, `${src};`);
         await font.load();
         document.fonts.add(font);
 
diff --git a/src/frontend/src/states/LocalState.tsx b/src/frontend/src/states/LocalState.tsx
index ba783b04c6f4..d6d4761ea367 100644
--- a/src/frontend/src/states/LocalState.tsx
+++ b/src/frontend/src/states/LocalState.tsx
@@ -1,9 +1,9 @@
-import { DataTableSortStatus } from 'mantine-datatable';
+import type { DataTableSortStatus } from 'mantine-datatable';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
-import { UiSizeType } from '../defaults/formatters';
-import { HostList } from './states';
+import type { UiSizeType } from '../defaults/formatters';
+import type { HostList } from './states';
 
 interface LocalStateProps {
   autoupdate: boolean;
diff --git a/src/frontend/src/states/SettingsState.tsx b/src/frontend/src/states/SettingsState.tsx
index d86f4de4481b..396ca01c1d96 100644
--- a/src/frontend/src/states/SettingsState.tsx
+++ b/src/frontend/src/states/SettingsState.tsx
@@ -6,9 +6,9 @@ import { create, createStore } from 'zustand';
 import { api } from '../App';
 import { ApiEndpoints } from '../enums/ApiEndpoints';
 import { isTrue } from '../functions/conversion';
-import { PathParams, apiUrl } from './ApiState';
+import { type PathParams, apiUrl } from './ApiState';
 import { useUserState } from './UserState';
-import { Setting, SettingsLookup } from './states';
+import type { Setting, SettingsLookup } from './states';
 
 export interface SettingsStateProps {
   settings: Setting[];
@@ -51,7 +51,7 @@ export const useGlobalSettingsState = create<SettingsStateProps>(
       return get().lookup[key] ?? default_value ?? '';
     },
     isSet: (key: string, default_value?: boolean) => {
-      let value = get().lookup[key] ?? default_value ?? 'false';
+      const value = get().lookup[key] ?? default_value ?? 'false';
       return isTrue(value);
     }
   })
@@ -87,7 +87,7 @@ export const useUserSettingsState = create<SettingsStateProps>((set, get) => ({
     return get().lookup[key] ?? default_value ?? '';
   },
   isSet: (key: string, default_value?: boolean) => {
-    let value = get().lookup[key] ?? default_value ?? 'false';
+    const value = get().lookup[key] ?? default_value ?? 'false';
     return isTrue(value);
   }
 }));
@@ -127,7 +127,7 @@ export const createPluginSettingsState = ({
       return get().lookup[key] ?? default_value ?? '';
     },
     isSet: (key: string, default_value?: boolean) => {
-      let value = get().lookup[key] ?? default_value ?? 'false';
+      const value = get().lookup[key] ?? default_value ?? 'false';
       return isTrue(value);
     }
   }));
@@ -175,7 +175,7 @@ export const createMachineSettingsState = ({
       return get().lookup[key] ?? default_value ?? '';
     },
     isSet: (key: string, default_value?: boolean) => {
-      let value = get().lookup[key] ?? default_value ?? 'false';
+      const value = get().lookup[key] ?? default_value ?? 'false';
       return isTrue(value);
     }
   }));
@@ -185,8 +185,8 @@ export const createMachineSettingsState = ({
   return a lookup dictionary for the value of the provided Setting list
 */
 function generate_lookup(data: Setting[]) {
-  let lookup_dir: SettingsLookup = {};
-  for (let setting of data) {
+  const lookup_dir: SettingsLookup = {};
+  for (const setting of data) {
     lookup_dir[setting.key] = setting.value;
   }
   return lookup_dir;
diff --git a/src/frontend/src/states/StatusState.tsx b/src/frontend/src/states/StatusState.tsx
index 884b19325129..7f0eba824ba5 100644
--- a/src/frontend/src/states/StatusState.tsx
+++ b/src/frontend/src/states/StatusState.tsx
@@ -2,10 +2,10 @@ import { create } from 'zustand';
 import { createJSONStorage, persist } from 'zustand/middleware';
 
 import { api } from '../App';
-import { StatusCodeListInterface } from '../components/render/StatusRenderer';
+import type { StatusCodeListInterface } from '../components/render/StatusRenderer';
 import { statusCodeList } from '../defaults/backendMappings';
 import { ApiEndpoints } from '../enums/ApiEndpoints';
-import { ModelType } from '../enums/ModelType';
+import type { ModelType } from '../enums/ModelType';
 import { apiUrl } from './ApiState';
 import { useUserState } from './UserState';
 
diff --git a/src/frontend/src/states/UserState.tsx b/src/frontend/src/states/UserState.tsx
index 9785115aa2e9..8ba1abc88b07 100644
--- a/src/frontend/src/states/UserState.tsx
+++ b/src/frontend/src/states/UserState.tsx
@@ -2,11 +2,11 @@ import { create } from 'zustand';
 
 import { api, setApiDefaults } from '../App';
 import { ApiEndpoints } from '../enums/ApiEndpoints';
-import { ModelType } from '../enums/ModelType';
-import { UserPermissions, UserRoles } from '../enums/Roles';
+import type { ModelType } from '../enums/ModelType';
+import { UserPermissions, type UserRoles } from '../enums/Roles';
 import { clearCsrfCookie } from '../functions/auth';
 import { apiUrl } from './ApiState';
-import { UserProps } from './states';
+import type { UserProps } from './states';
 
 export interface UserStateProps {
   user: UserProps | undefined;
diff --git a/src/frontend/src/tables/Column.tsx b/src/frontend/src/tables/Column.tsx
index 03366ca1fbda..6c9b6f9ea424 100644
--- a/src/frontend/src/tables/Column.tsx
+++ b/src/frontend/src/tables/Column.tsx
@@ -1,4 +1,4 @@
-import { ApiFormFieldType } from '../components/forms/fields/ApiFormField';
+import type { ApiFormFieldType } from '../components/forms/fields/ApiFormField';
 
 export type TableColumnProps<T = any> = {
   accessor?: string; // The key in the record to access
diff --git a/src/frontend/src/tables/ColumnRenderers.tsx b/src/frontend/src/tables/ColumnRenderers.tsx
index 8a6d3667b6f5..513d9c78e727 100644
--- a/src/frontend/src/tables/ColumnRenderers.tsx
+++ b/src/frontend/src/tables/ColumnRenderers.tsx
@@ -11,10 +11,10 @@ import { ProgressBar } from '../components/items/ProgressBar';
 import { TableStatusRenderer } from '../components/render/StatusRenderer';
 import { RenderOwner } from '../components/render/User';
 import { formatCurrency, formatDate } from '../defaults/formatters';
-import { ModelType } from '../enums/ModelType';
+import type { ModelType } from '../enums/ModelType';
 import { resolveItem } from '../functions/conversion';
 import { cancelEvent } from '../functions/events';
-import { TableColumn, TableColumnProps } from './Column';
+import type { TableColumn, TableColumnProps } from './Column';
 import { ProjectCodeHoverCard } from './TableHoverCard';
 
 // Render a Part instance within a table
@@ -26,15 +26,15 @@ export function PartColumn({
   full_name?: boolean;
 }) {
   return part ? (
-    <Group justify="space-between" wrap="nowrap">
+    <Group justify='space-between' wrap='nowrap'>
       <Thumbnail
         src={part?.thumbnail ?? part?.image}
         text={full_name ? part?.full_name : part?.name}
       />
-      <Group justify="flex-end" wrap="nowrap" gap="xs">
+      <Group justify='flex-end' wrap='nowrap' gap='xs'>
         {part?.active == false && (
           <Tooltip label={t`Part is not active`}>
-            <IconExclamationCircle color="red" size={16} />
+            <IconExclamationCircle color='red' size={16} />
           </Tooltip>
         )}
         {part?.locked && (
@@ -44,7 +44,7 @@ export function PartColumn({
         )}
         {part?.starred && (
           <Tooltip label={t`You are subscribed to notifications for this part`}>
-            <IconBell size={16} color="green" />
+            <IconBell size={16} color='green' />
           </Tooltip>
         )}
       </Group>
@@ -61,7 +61,7 @@ export function LocationColumn(props: TableColumnProps): TableColumn {
     sortable: true,
     ordering: 'location',
     render: (record: any) => {
-      let location = resolveItem(record, props.accessor ?? '');
+      const location = resolveItem(record, props.accessor ?? '');
 
       if (!location) {
         return (
@@ -101,7 +101,7 @@ export function LinkColumn(props: TableColumnProps): TableColumn {
     accessor: 'link',
     sortable: false,
     render: (record: any) => {
-      let url = resolveItem(record, props.accessor ?? 'link');
+      const url = resolveItem(record, props.accessor ?? 'link');
 
       if (!url) {
         return '-';
@@ -110,8 +110,8 @@ export function LinkColumn(props: TableColumnProps): TableColumn {
       return (
         <Anchor
           href={url}
-          target="_blank"
-          rel="noreferrer noopener"
+          target='_blank'
+          rel='noreferrer noopener'
           onClick={(event: any) => {
             cancelEvent(event);
 
@@ -167,7 +167,7 @@ export function ProjectCodeColumn(props: TableColumnProps): TableColumn {
     sortable: true,
     title: t`Project Code`,
     render: (record: any) => {
-      let project_code = resolveItem(
+      const project_code = resolveItem(
         record,
         props.accessor ?? 'project_code_detail'
       );
@@ -268,7 +268,7 @@ export function CurrencyColumn({
     title: title ?? t`Currency`,
     sortable: sortable ?? true,
     render: (record: any) => {
-      let currency_key = currency_accessor ?? `${accessor}_currency`;
+      const currency_key = currency_accessor ?? `${accessor}_currency`;
       return formatCurrency(resolveItem(record, accessor), {
         currency: currency ?? resolveItem(record, currency_key)
       });
diff --git a/src/frontend/src/tables/ColumnSelect.tsx b/src/frontend/src/tables/ColumnSelect.tsx
index 7d1b54596189..f3095d618641 100644
--- a/src/frontend/src/tables/ColumnSelect.tsx
+++ b/src/frontend/src/tables/ColumnSelect.tsx
@@ -10,9 +10,9 @@ export function TableColumnSelect({
   onToggleColumn: (columnName: string) => void;
 }>) {
   return (
-    <Menu shadow="xs" closeOnItemClick={false}>
+    <Menu shadow='xs' closeOnItemClick={false}>
       <Menu.Target>
-        <ActionIcon variant="transparent" aria-label="table-select-columns">
+        <ActionIcon variant='transparent' aria-label='table-select-columns'>
           <Tooltip label={t`Select Columns`}>
             <IconAdjustments />
           </Tooltip>
@@ -29,7 +29,7 @@ export function TableColumnSelect({
                 checked={!col.hidden}
                 label={col.title || col.accessor}
                 onChange={() => onToggleColumn(col.accessor)}
-                radius="sm"
+                radius='sm'
               />
             </Menu.Item>
           ))}
diff --git a/src/frontend/src/tables/DownloadAction.tsx b/src/frontend/src/tables/DownloadAction.tsx
index f34a353b43af..c7ec67fe7d10 100644
--- a/src/frontend/src/tables/DownloadAction.tsx
+++ b/src/frontend/src/tables/DownloadAction.tsx
@@ -9,7 +9,7 @@ import { useMemo } from 'react';
 
 import {
   ActionDropdown,
-  ActionDropdownItem
+  type ActionDropdownItem
 } from '../components/items/ActionDropdown';
 
 export function DownloadAction({
diff --git a/src/frontend/src/tables/Filter.tsx b/src/frontend/src/tables/Filter.tsx
index 9be775352b58..50616c13622b 100644
--- a/src/frontend/src/tables/Filter.tsx
+++ b/src/frontend/src/tables/Filter.tsx
@@ -1,6 +1,6 @@
 import { t } from '@lingui/macro';
 
-import { ModelType } from '../enums/ModelType';
+import type { ModelType } from '../enums/ModelType';
 import { useGlobalStatusState } from '../states/StatusState';
 
 /**
diff --git a/src/frontend/src/tables/FilterSelectDrawer.tsx b/src/frontend/src/tables/FilterSelectDrawer.tsx
index de9b40202bae..037e608cd956 100644
--- a/src/frontend/src/tables/FilterSelectDrawer.tsx
+++ b/src/frontend/src/tables/FilterSelectDrawer.tsx
@@ -1,5 +1,4 @@
 import { t } from '@lingui/macro';
-import { L } from '@lingui/react/dist/shared/react.e5f95de8';
 import {
   Badge,
   Button,
@@ -13,16 +12,16 @@ import {
   Text,
   Tooltip
 } from '@mantine/core';
-import { DateInput, DateValue } from '@mantine/dates';
+import { DateInput, type DateValue } from '@mantine/dates';
 import dayjs from 'dayjs';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { StylishText } from '../components/items/StylishText';
-import { TableState } from '../hooks/UseTable';
+import type { TableState } from '../hooks/UseTable';
 import {
-  TableFilter,
-  TableFilterChoice,
-  TableFilterType,
+  type TableFilter,
+  type TableFilterChoice,
+  type TableFilterType,
   getTableFilterOptions
 } from './Filter';
 
@@ -37,23 +36,23 @@ function FilterItem({
   tableState: TableState;
 }>) {
   const removeFilter = useCallback(() => {
-    let newFilters = tableState.activeFilters.filter(
+    const newFilters = tableState.activeFilters.filter(
       (f) => f.name !== flt.name
     );
     tableState.setActiveFilters(newFilters);
   }, [flt]);
 
   return (
-    <Paper p="sm" shadow="sm" radius="xs">
-      <Group justify="space-between" key={flt.name} wrap="nowrap">
-        <Stack gap="xs">
-          <Text size="sm">{flt.label}</Text>
-          <Text size="xs">{flt.description}</Text>
+    <Paper p='sm' shadow='sm' radius='xs'>
+      <Group justify='space-between' key={flt.name} wrap='nowrap'>
+        <Stack gap='xs'>
+          <Text size='sm'>{flt.label}</Text>
+          <Text size='xs'>{flt.description}</Text>
         </Stack>
-        <Group justify="right">
+        <Group justify='right'>
           <Badge>{flt.displayValue ?? flt.value}</Badge>
           <Tooltip label={t`Remove filter`} withinPortal={true}>
-            <CloseButton size="md" color="red" onClick={removeFilter} />
+            <CloseButton size='md' color='red' onClick={removeFilter} />
           </Tooltip>
         </Group>
       </Group>
@@ -92,7 +91,7 @@ function FilterAddGroup({
 
   const valueOptions: TableFilterChoice[] = useMemo(() => {
     // Find the matching filter
-    let filter: TableFilter | undefined = availableFilters?.find(
+    const filter: TableFilter | undefined = availableFilters?.find(
       (flt) => flt.name === selectedFilter
     );
 
@@ -114,7 +113,7 @@ function FilterAddGroup({
   const setSelectedValue = useCallback(
     (value: string | null) => {
       // Find the matching filter
-      let filter: TableFilter | undefined = availableFilters.find(
+      const filter: TableFilter | undefined = availableFilters.find(
         (flt) => flt.name === selectedFilter
       );
 
@@ -122,12 +121,12 @@ function FilterAddGroup({
         return;
       }
 
-      let filters =
+      const filters =
         tableState.activeFilters?.filter(
           (flt) => flt.name !== selectedFilter
         ) ?? [];
 
-      let newFilter: TableFilter = {
+      const newFilter: TableFilter = {
         ...filter,
         value: value,
         displayValue: valueOptions.find((v) => v.value === value)?.label
@@ -141,7 +140,7 @@ function FilterAddGroup({
   const setDateValue = useCallback(
     (value: DateValue) => {
       if (value) {
-        let date = value.toString();
+        const date = value.toString();
         setSelectedValue(dayjs(date).format('YYYY-MM-DD'));
       } else {
         setSelectedValue('');
@@ -151,7 +150,7 @@ function FilterAddGroup({
   );
 
   return (
-    <Stack gap="xs">
+    <Stack gap='xs'>
       <Divider />
       <Select
         data={filterOptions}
@@ -201,31 +200,31 @@ export function FilterSelectDrawer({
   }, [tableState.activeFilters]);
 
   const hasFilters: boolean = useMemo(() => {
-    let filters = tableState?.activeFilters ?? [];
+    const filters = tableState?.activeFilters ?? [];
 
     return filters.length > 0;
   }, [tableState.activeFilters]);
 
   return (
     <Drawer
-      size="sm"
-      position="right"
+      size='sm'
+      position='right'
       withCloseButton={true}
       opened={opened}
       onClose={onClose}
       closeButtonProps={{
         'aria-label': 'filter-drawer-close'
       }}
-      title={<StylishText size="lg">{t`Table Filters`}</StylishText>}
+      title={<StylishText size='lg'>{t`Table Filters`}</StylishText>}
     >
-      <Stack gap="xs">
+      <Stack gap='xs'>
         {hasFilters &&
           tableState.activeFilters?.map((f) => (
             <FilterItem key={f.name} flt={f} tableState={tableState} />
           ))}
         {hasFilters && <Divider />}
         {addFilter && (
-          <Stack gap="xs">
+          <Stack gap='xs'>
             <FilterAddGroup
               tableState={tableState}
               availableFilters={availableFilters}
@@ -235,8 +234,8 @@ export function FilterSelectDrawer({
         {addFilter && (
           <Button
             onClick={() => setAddFilter(false)}
-            color="orange"
-            variant="subtle"
+            color='orange'
+            variant='subtle'
           >
             <Text>{t`Cancel`}</Text>
           </Button>
@@ -245,8 +244,8 @@ export function FilterSelectDrawer({
           tableState.activeFilters.length < availableFilters.length && (
             <Button
               onClick={() => setAddFilter(true)}
-              color="green"
-              variant="subtle"
+              color='green'
+              variant='subtle'
             >
               <Text>{t`Add Filter`}</Text>
             </Button>
@@ -254,8 +253,8 @@ export function FilterSelectDrawer({
         {!addFilter && tableState.activeFilters.length > 0 && (
           <Button
             onClick={tableState.clearActiveFilters}
-            color="red"
-            variant="subtle"
+            color='red'
+            variant='subtle'
           >
             <Text>{t`Clear Filters`}</Text>
           </Button>
diff --git a/src/frontend/src/tables/InvenTreeTable.tsx b/src/frontend/src/tables/InvenTreeTable.tsx
index f8470432c5a5..e131b9f9d726 100644
--- a/src/frontend/src/tables/InvenTreeTable.tsx
+++ b/src/frontend/src/tables/InvenTreeTable.tsx
@@ -3,28 +3,29 @@ import { Box, Stack } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
 import {
   DataTable,
-  DataTableCellClickHandler,
-  DataTableRowExpansionProps,
-  DataTableSortStatus
+  type DataTableCellClickHandler,
+  type DataTableRowExpansionProps,
+  type DataTableSortStatus
 } from 'mantine-datatable';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import type React from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { api } from '../App';
 import { Boundary } from '../components/Boundary';
-import { ApiFormFieldSet } from '../components/forms/fields/ApiFormField';
-import { ModelType } from '../enums/ModelType';
+import type { ApiFormFieldSet } from '../components/forms/fields/ApiFormField';
+import type { ModelType } from '../enums/ModelType';
 import { resolveItem } from '../functions/conversion';
 import { cancelEvent } from '../functions/events';
 import { extractAvailableFields, mapFields } from '../functions/forms';
 import { navigateToLink } from '../functions/navigation';
 import { getDetailUrl } from '../functions/urls';
-import { TableState } from '../hooks/UseTable';
+import type { TableState } from '../hooks/UseTable';
 import { useLocalState } from '../states/LocalState';
-import { TableColumn } from './Column';
-import { TableFilter } from './Filter';
+import type { TableColumn } from './Column';
+import type { TableFilter } from './Filter';
 import InvenTreeTableHeader from './InvenTreeTableHeader';
-import { RowAction, RowActions } from './RowActions';
+import { type RowAction, RowActions } from './RowActions';
 
 const defaultPageSize: number = 25;
 const PAGE_SIZES = [10, 15, 20, 25, 50, 100, 500];
@@ -176,9 +177,9 @@ export function InvenTreeTable<T extends Record<string, any>>({
           if (response.status == 200) {
             // Extract field information from the API
 
-            let names: Record<string, string> = {};
+            const names: Record<string, string> = {};
 
-            let fields: ApiFormFieldSet =
+            const fields: ApiFormFieldSet =
               extractAvailableFields(response, 'GET', true) || {};
 
             // Extract flattened map of fields
@@ -258,7 +259,7 @@ export function InvenTreeTable<T extends Record<string, any>>({
 
   // Update column visibility when hiddenColumns change
   const dataColumns: any = useMemo(() => {
-    let cols: TableColumn[] = columns
+    const cols: TableColumn[] = columns
       .filter((col) => col?.hidden != true)
       .map((col) => {
         let hidden: boolean = col.hidden ?? false;
@@ -304,9 +305,9 @@ export function InvenTreeTable<T extends Record<string, any>>({
 
   // Callback when column visibility is toggled
   function toggleColumn(columnName: string) {
-    let newColumns = [...dataColumns];
+    const newColumns = [...dataColumns];
 
-    let colIdx = newColumns.findIndex((col) => col.accessor == columnName);
+    const colIdx = newColumns.findIndex((col) => col.accessor == columnName);
 
     if (colIdx >= 0 && colIdx < newColumns.length) {
       newColumns[colIdx].hidden = !newColumns[colIdx].hidden;
@@ -332,21 +333,21 @@ export function InvenTreeTable<T extends Record<string, any>>({
    * Construct query filters for the current table
    */
   const getTableFilters = useCallback(
-    (paginate: boolean = false) => {
-      let queryParams = {
+    (paginate = false) => {
+      const queryParams = {
         ...tableProps.params
       };
 
       // Add custom filters
       if (tableState.activeFilters) {
-        tableState.activeFilters.forEach(
-          (flt) => (queryParams[flt.name] = flt.value)
-        );
+        tableState.activeFilters.forEach((flt) => {
+          queryParams[flt.name] = flt.value;
+        });
       }
 
       // Allow override of filters based on URL query parameters
       if (tableState.queryFilters) {
-        for (let [key, value] of tableState.queryFilters) {
+        for (const [key, value] of tableState.queryFilters) {
           queryParams[key] = value;
         }
       }
@@ -358,14 +359,14 @@ export function InvenTreeTable<T extends Record<string, any>>({
 
       // Pagination
       if (tableProps.enablePagination && paginate) {
-        let pageSize = tableState.pageSize ?? defaultPageSize;
+        const pageSize = tableState.pageSize ?? defaultPageSize;
         if (pageSize != tableState.pageSize) tableState.setPageSize(pageSize);
         queryParams.limit = pageSize;
         queryParams.offset = (tableState.page - 1) * pageSize;
       }
 
       // Ordering
-      let ordering = getOrderingTerm();
+      const ordering = getOrderingTerm();
 
       if (ordering) {
         if (sortStatus.direction == 'asc') {
@@ -401,7 +402,7 @@ export function InvenTreeTable<T extends Record<string, any>>({
 
   // Return the ordering parameter
   function getOrderingTerm() {
-    let key = sortStatus.columnAccessor;
+    const key = sortStatus.columnAccessor;
 
     // Sorting column not specified
     if (key == '') {
@@ -410,7 +411,7 @@ export function InvenTreeTable<T extends Record<string, any>>({
 
     // Find matching column:
     // If column provides custom ordering term, use that
-    let column = dataColumns.find((col: any) => col.accessor == key);
+    const column = dataColumns.find((col: any) => col.accessor == key);
     return column?.ordering || key;
   }
 
@@ -429,14 +430,14 @@ export function InvenTreeTable<T extends Record<string, any>>({
 
   // Function to perform API query to fetch required data
   const fetchTableData = async () => {
-    let queryParams = getTableFilters(true);
+    const queryParams = getTableFilters(true);
 
     return api
       .get(url, {
         params: queryParams,
         timeout: 5 * 1000
       })
-      .then(function (response) {
+      .then((response) => {
         switch (response.status) {
           case 200:
             setMissingRecordsText(
@@ -472,15 +473,15 @@ export function InvenTreeTable<T extends Record<string, any>>({
             break;
           default:
             setMissingRecordsText(
-              t`Unknown error` + ': ' + response.statusText
+              `${t`Unknown error`}: ${response.statusText}`
             );
             break;
         }
 
         return [];
       })
-      .catch(function (error) {
-        setMissingRecordsText(t`Error` + ': ' + error.message);
+      .catch((error) => {
+        setMissingRecordsText(`${t`Error`}: ${error.message}`);
         return [];
       });
   };
@@ -556,7 +557,7 @@ export function InvenTreeTable<T extends Record<string, any>>({
         if (pk) {
           cancelEvent(event);
           // If a model type is provided, navigate to the detail view for that model
-          let url = getDetailUrl(tableProps.modelType, pk);
+          const url = getDetailUrl(tableProps.modelType, pk);
           navigateToLink(url, navigate, event);
         }
       }
@@ -599,7 +600,7 @@ export function InvenTreeTable<T extends Record<string, any>>({
     ]);
 
   const optionalParams = useMemo(() => {
-    let optionalParamsa: Record<string, any> = {};
+    const optionalParamsa: Record<string, any> = {};
     if (tableProps.enablePagination) {
       optionalParamsa['recordsPerPageOptions'] = PAGE_SIZES;
       optionalParamsa['onRecordsPerPageChange'] = updatePageSize;
@@ -609,7 +610,7 @@ export function InvenTreeTable<T extends Record<string, any>>({
 
   return (
     <>
-      <Stack gap="xs">
+      <Stack gap='xs'>
         {!tableProps.noHeader && (
           <Boundary label={`InvenTreeTableHeader-${tableState.tableKey}`}>
             <InvenTreeTableHeader
@@ -624,7 +625,7 @@ export function InvenTreeTable<T extends Record<string, any>>({
           </Boundary>
         )}
         <Boundary label={`InvenTreeTable-${tableState.tableKey}`}>
-          <Box pos="relative">
+          <Box pos='relative'>
             <DataTable
               withTableBorder={!tableProps.noHeader}
               withColumnBorders
diff --git a/src/frontend/src/tables/InvenTreeTableHeader.tsx b/src/frontend/src/tables/InvenTreeTableHeader.tsx
index e36eafba0325..705e29d1e5a7 100644
--- a/src/frontend/src/tables/InvenTreeTableHeader.tsx
+++ b/src/frontend/src/tables/InvenTreeTableHeader.tsx
@@ -10,12 +10,10 @@ import {
 import {
   IconBarcode,
   IconFilter,
-  IconFilterCancel,
   IconRefresh,
   IconTrash
 } from '@tabler/icons-react';
-import { useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useState } from 'react';
 import { Fragment } from 'react/jsx-runtime';
 
 import { api } from '../App';
@@ -24,12 +22,12 @@ import { ActionButton } from '../components/buttons/ActionButton';
 import { ButtonMenu } from '../components/buttons/ButtonMenu';
 import { PrintingActions } from '../components/buttons/PrintingActions';
 import { useDeleteApiFormModal } from '../hooks/UseForm';
-import { TableState } from '../hooks/UseTable';
+import type { TableState } from '../hooks/UseTable';
 import { TableColumnSelect } from './ColumnSelect';
 import { DownloadAction } from './DownloadAction';
-import { TableFilter } from './Filter';
+import type { TableFilter } from './Filter';
 import { FilterSelectDrawer } from './FilterSelectDrawer';
-import { InvenTreeTableProps } from './InvenTreeTable';
+import type { InvenTreeTableProps } from './InvenTreeTable';
 import { TableSearchInput } from './Search';
 
 /**
@@ -58,7 +56,7 @@ export default function InvenTreeTableHeader({
   const downloadData = (fileFormat: string) => {
     // Download entire dataset (no pagination)
 
-    let queryParams = {
+    const queryParams = {
       ...tableProps.params
     };
 
@@ -71,7 +69,7 @@ export default function InvenTreeTableHeader({
 
     // Allow overriding of query parameters
     if (tableState.queryFilters) {
-      for (let [key, value] of tableState.queryFilters) {
+      for (const [key, value] of tableState.queryFilters) {
         queryParams[key] = value;
       }
     }
@@ -84,7 +82,7 @@ export default function InvenTreeTableHeader({
     // Specify file format
     queryParams.export = fileFormat;
 
-    let downloadUrl = api.getUri({
+    const downloadUrl = api.getUri({
       url: tableUrl,
       params: queryParams
     });
@@ -98,7 +96,7 @@ export default function InvenTreeTableHeader({
     title: t`Delete Selected Items`,
     preFormContent: (
       <Alert
-        color="red"
+        color='red'
         title={t`Are you sure you want to delete the selected items?`}
       >
         {t`This action cannot be undone`}
@@ -137,15 +135,15 @@ export default function InvenTreeTableHeader({
       )}
       {tableState.queryFilters.size > 0 && (
         <Alert
-          color="yellow"
+          color='yellow'
           withCloseButton
           title={t`Custom table filters are active`}
           onClose={() => tableState.clearQueryFilters()}
-        ></Alert>
+        />
       )}
 
-      <Group justify="apart" grow wrap="nowrap">
-        <Group justify="left" key="custom-actions" gap={5} wrap="nowrap">
+      <Group justify='apart' grow wrap='nowrap'>
+        <Group justify='left' key='custom-actions' gap={5} wrap='nowrap'>
           <PrintingActions
             items={tableState.selectedIds}
             modelType={tableProps.modelType}
@@ -154,7 +152,7 @@ export default function InvenTreeTableHeader({
           />
           {(tableProps.barcodeActions?.length ?? 0) > 0 && (
             <ButtonMenu
-              key="barcode-actions"
+              key='barcode-actions'
               icon={<IconBarcode />}
               label={t`Barcode Actions`}
               tooltip={t`Barcode Actions`}
@@ -165,7 +163,7 @@ export default function InvenTreeTableHeader({
             <ActionButton
               disabled={!tableState.hasSelectedRecords}
               icon={<IconTrash />}
-              color="red"
+              color='red'
               tooltip={t`Delete selected records`}
               onClick={() => {
                 deleteRecords.open();
@@ -177,14 +175,14 @@ export default function InvenTreeTableHeader({
           ))}
         </Group>
         <Space />
-        <Group justify="right" gap={5} wrap="nowrap">
+        <Group justify='right' gap={5} wrap='nowrap'>
           {tableProps.enableSearch && (
             <TableSearchInput
               searchCallback={(term: string) => tableState.setSearchTerm(term)}
             />
           )}
           {tableProps.enableRefresh && (
-            <ActionIcon variant="transparent" aria-label="table-refresh">
+            <ActionIcon variant='transparent' aria-label='table-refresh'>
               <Tooltip label={t`Refresh data`}>
                 <IconRefresh
                   onClick={() => {
@@ -203,13 +201,13 @@ export default function InvenTreeTableHeader({
           )}
           {tableProps.enableFilters && filters.length > 0 && (
             <Indicator
-              size="xs"
+              size='xs'
               label={tableState.activeFilters?.length ?? 0}
               disabled={tableState.activeFilters?.length == 0}
             >
               <ActionIcon
-                variant="transparent"
-                aria-label="table-select-filters"
+                variant='transparent'
+                aria-label='table-select-filters'
               >
                 <Tooltip label={t`Table Filters`}>
                   <IconFilter
@@ -221,7 +219,7 @@ export default function InvenTreeTableHeader({
           )}
           {tableProps.enableDownload && (
             <DownloadAction
-              key="download-action"
+              key='download-action'
               downloadCallback={downloadData}
             />
           )}
diff --git a/src/frontend/src/tables/RowActions.tsx b/src/frontend/src/tables/RowActions.tsx
index 17c78155443b..a9d7185767a0 100644
--- a/src/frontend/src/tables/RowActions.tsx
+++ b/src/frontend/src/tables/RowActions.tsx
@@ -8,10 +8,10 @@ import {
   IconEdit,
   IconTrash
 } from '@tabler/icons-react';
-import { ReactNode, useMemo, useState } from 'react';
-import { NavigateFunction } from 'react-router-dom';
+import { type ReactNode, useMemo, useState } from 'react';
+import type { NavigateFunction } from 'react-router-dom';
 
-import { ModelType } from '../enums/ModelType';
+import type { ModelType } from '../enums/ModelType';
 import { cancelEvent } from '../functions/events';
 import { navigateToLink } from '../functions/navigation';
 import { getDetailUrl } from '../functions/urls';
@@ -123,7 +123,7 @@ export function RowActions({
         withinPortal={true}
         label={action.tooltip ?? action.title}
         key={action.title}
-        position="left"
+        position='left'
       >
         <Menu.Item
           color={action.color}
@@ -147,7 +147,7 @@ export function RowActions({
       <Menu
         withinPortal={true}
         disabled={disabled}
-        position="bottom-end"
+        position='bottom-end'
         opened={opened}
         onChange={setOpened}
       >
@@ -158,8 +158,8 @@ export function RowActions({
               aria-label={`row-action-menu-${index ?? ''}`}
               onClick={openMenu}
               disabled={disabled}
-              variant="subtle"
-              color="gray"
+              variant='subtle'
+              color='gray'
             >
               <IconDots />
             </ActionIcon>
diff --git a/src/frontend/src/tables/RowExpansionIcon.tsx b/src/frontend/src/tables/RowExpansionIcon.tsx
index 3313778752c1..374b2559c1ae 100644
--- a/src/frontend/src/tables/RowExpansionIcon.tsx
+++ b/src/frontend/src/tables/RowExpansionIcon.tsx
@@ -9,7 +9,7 @@ export default function RowExpansionIcon({
   expanded: boolean;
 }) {
   return (
-    <ActionIcon size="sm" variant="transparent" disabled={!enabled}>
+    <ActionIcon size='sm' variant='transparent' disabled={!enabled}>
       {expanded ? <IconChevronDown /> : <IconChevronRight />}
     </ActionIcon>
   );
diff --git a/src/frontend/src/tables/Search.tsx b/src/frontend/src/tables/Search.tsx
index f708ad82ce17..84bb0f090b0c 100644
--- a/src/frontend/src/tables/Search.tsx
+++ b/src/frontend/src/tables/Search.tsx
@@ -24,7 +24,7 @@ export function TableSearchInput({
       onChange={(event) => setValue(event.target.value)}
       rightSection={
         value.length > 0 ? (
-          <CloseButton size="xs" onClick={() => setValue('')} />
+          <CloseButton size='xs' onClick={() => setValue('')} />
         ) : null
       }
     />
diff --git a/src/frontend/src/tables/TableHoverCard.tsx b/src/frontend/src/tables/TableHoverCard.tsx
index 0b92e6628638..fef42a66b24a 100644
--- a/src/frontend/src/tables/TableHoverCard.tsx
+++ b/src/frontend/src/tables/TableHoverCard.tsx
@@ -1,9 +1,9 @@
 import { t } from '@lingui/macro';
 import { Divider, Group, HoverCard, Stack, Text } from '@mantine/core';
 import { IconInfoCircle } from '@tabler/icons-react';
-import { ReactNode, useMemo } from 'react';
+import { type ReactNode, useMemo } from 'react';
 
-import { InvenTreeIcon, InvenTreeIconType } from '../functions/icons';
+import { InvenTreeIcon, type InvenTreeIconType } from '../functions/icons';
 
 /*
  * A custom hovercard element for displaying extra information in a table cell.
@@ -30,9 +30,9 @@ export function TableHoverCard({
       }
 
       return (
-        <Stack gap="xs">
+        <Stack gap='xs'>
           {extra.map((item, idx) => (
-            <div key={`item-${idx}`}>{item}</div>
+            <div key={`item-${idx}-${item}`}>{item}</div>
           ))}
         </Stack>
       );
@@ -49,7 +49,7 @@ export function TableHoverCard({
   return (
     <HoverCard withinPortal={true} closeDelay={20} openDelay={250}>
       <HoverCard.Target>
-        <Group gap="xs" justify="space-between" wrap="nowrap">
+        <Group gap='xs' justify='space-between' wrap='nowrap'>
           {value}
           <InvenTreeIcon
             icon={icon ?? 'info'}
@@ -58,10 +58,10 @@ export function TableHoverCard({
         </Group>
       </HoverCard.Target>
       <HoverCard.Dropdown>
-        <Stack gap="xs">
-          <Group gap="xs" justify="left">
-            <IconInfoCircle size="16" color="blue" />
-            <Text fw="bold">{title}</Text>
+        <Stack gap='xs'>
+          <Group gap='xs' justify='left'>
+            <IconInfoCircle size='16' color='blue' />
+            <Text fw='bold'>{title}</Text>
           </Group>
           <Divider />
           {extraItems}
@@ -81,7 +81,7 @@ export function ProjectCodeHoverCard({ projectCode }: { projectCode: any }) {
       title={t`Project Code`}
       extra={
         projectCode && (
-          <Text key="project-code">{projectCode?.description}</Text>
+          <Text key='project-code'>{projectCode?.description}</Text>
         )
       }
     />
diff --git a/src/frontend/src/tables/bom/BomTable.tsx b/src/frontend/src/tables/bom/BomTable.tsx
index 263bf53e88e9..6e9509bf583e 100644
--- a/src/frontend/src/tables/bom/BomTable.tsx
+++ b/src/frontend/src/tables/bom/BomTable.tsx
@@ -8,7 +8,7 @@ import {
   IconLock,
   IconSwitch3
 } from '@tabler/icons-react';
-import { ReactNode, useCallback, useMemo, useState } from 'react';
+import { type ReactNode, useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { api } from '../../App';
@@ -34,16 +34,16 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import {
   BooleanColumn,
   DescriptionColumn,
   NoteColumn,
   ReferenceColumn
 } from '../ColumnRenderers';
-import { TableFilter } from '../Filter';
+import type { TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
 import { TableHoverCard } from '../TableHoverCard';
 
 // Calculate the total stock quantity available for a given BomItem
@@ -88,12 +88,12 @@ export function BomTable({
         switchable: false,
         sortable: true,
         render: (record) => {
-          let part = record.sub_part_detail;
-          let extra = [];
+          const part = record.sub_part_detail;
+          const extra = [];
 
           if (record.part != partId) {
             extra.push(
-              <Text key="different-parent">{t`This BOM item is defined for a different parent`}</Text>
+              <Text key='different-parent'>{t`This BOM item is defined for a different parent`}</Text>
             );
           }
 
@@ -130,14 +130,14 @@ export function BomTable({
         switchable: false,
         sortable: true,
         render: (record: any) => {
-          let quantity = formatDecimal(record.quantity);
-          let units = record.sub_part_detail?.units;
+          const quantity = formatDecimal(record.quantity);
+          const units = record.sub_part_detail?.units;
 
           return (
-            <Group justify="space-between" grow>
+            <Group justify='space-between' grow>
               <Text>{quantity}</Text>
-              {record.overage && <Text size="xs">+{record.overage}</Text>}
-              {units && <Text size="xs">{units}</Text>}
+              {record.overage && <Text size='xs'>+{record.overage}</Text>}
+              {units && <Text size='xs'>{units}</Text>}
             </Group>
           );
         }
@@ -146,7 +146,7 @@ export function BomTable({
         accessor: 'substitutes',
         // TODO: Show hovercard with list of substitutes
         render: (row) => {
-          let substitutes = row.substitutes ?? [];
+          const substitutes = row.substitutes ?? [];
 
           return substitutes.length > 0 ? (
             row.length
@@ -194,22 +194,22 @@ export function BomTable({
         accessor: 'available_stock',
         sortable: true,
         render: (record) => {
-          let extra: ReactNode[] = [];
+          const extra: ReactNode[] = [];
 
-          let available_stock: number = availableStockQuantity(record);
-          let on_order: number = record?.on_order ?? 0;
-          let building: number = record?.building ?? 0;
+          const available_stock: number = availableStockQuantity(record);
+          const on_order: number = record?.on_order ?? 0;
+          const building: number = record?.building ?? 0;
 
-          let text =
+          const text =
             available_stock <= 0 ? (
-              <Text c="red" style={{ fontStyle: 'italic' }}>{t`No stock`}</Text>
+              <Text c='red' style={{ fontStyle: 'italic' }}>{t`No stock`}</Text>
             ) : (
               available_stock
             );
 
           if (record.external_stock > 0) {
             extra.push(
-              <Text key="external">
+              <Text key='external'>
                 {t`External stock`}: {record.external_stock}
               </Text>
             );
@@ -217,7 +217,7 @@ export function BomTable({
 
           if (record.available_substitute_stock > 0) {
             extra.push(
-              <Text key="substitute">
+              <Text key='substitute'>
                 {t`Includes substitute stock`}:{' '}
                 {record.available_substitute_stock}
               </Text>
@@ -226,7 +226,7 @@ export function BomTable({
 
           if (record.allow_variants && record.available_variant_stock > 0) {
             extra.push(
-              <Text key="variant">
+              <Text key='variant'>
                 {t`Includes variant stock`}: {record.available_variant_stock}
               </Text>
             );
@@ -234,7 +234,7 @@ export function BomTable({
 
           if (on_order > 0) {
             extra.push(
-              <Text key="on_order">
+              <Text key='on_order'>
                 {t`On order`}: {on_order}
               </Text>
             );
@@ -242,7 +242,7 @@ export function BomTable({
 
           if (building > 0) {
             extra.push(
-              <Text key="building">
+              <Text key='building'>
                 {t`Building`}: {building}
               </Text>
             );
@@ -266,12 +266,15 @@ export function BomTable({
             return '-';
           }
 
-          if (!isFinite(record.can_build) || isNaN(record.can_build)) {
+          if (
+            !Number.isFinite(record.can_build) ||
+            Number.isNaN(record.can_build)
+          ) {
             return '-';
           }
 
-          let can_build = Math.trunc(record.can_build);
-          let value = (
+          const can_build = Math.trunc(record.can_build);
+          const value = (
             <Text
               fs={record.consumable && 'italic'}
               c={can_build <= 0 && !record.consumable ? 'red' : undefined}
@@ -280,13 +283,13 @@ export function BomTable({
             </Text>
           );
 
-          let extra = [];
+          const extra = [];
 
           if (record.consumable) {
-            extra.push(<Text key="consumable">{t`Consumable item`}</Text>);
+            extra.push(<Text key='consumable'>{t`Consumable item`}</Text>);
           } else if (can_build <= 0) {
             extra.push(
-              <Text key="no-build" c="red">{t`No available stock`}</Text>
+              <Text key='no-build' c='red'>{t`No available stock`}</Text>
             );
           }
 
@@ -362,7 +365,7 @@ export function BomTable({
   const [selectedBomItem, setSelectedBomItem] = useState<number>(0);
 
   const importSessionFields = useMemo(() => {
-    let fields = dataImporterSessionFields();
+    const fields = dataImporterSessionFields();
 
     fields.model_type.hidden = true;
     fields.model_type.value = 'bomitem';
@@ -424,7 +427,7 @@ export function BomTable({
     title: t`Validate BOM`,
     pk: partId,
     preFormContent: (
-      <Alert color="green" icon={<IconCircleCheck />} title={t`Validate BOM`}>
+      <Alert color='green' icon={<IconCircleCheck />} title={t`Validate BOM`}>
         <Text>{t`Do you want to validate the bill of materials for this assembly?`}</Text>
       </Alert>
     ),
@@ -510,21 +513,21 @@ export function BomTable({
   const tableActions = useMemo(() => {
     return [
       <ActionButton
-        key="import-bom"
+        key='import-bom'
         hidden={partLocked || !user.hasAddRole(UserRoles.part)}
         tooltip={t`Import BOM Data`}
         icon={<IconFileArrowLeft />}
         onClick={() => importBomItem.open()}
       />,
       <ActionButton
-        key="validate-bom"
+        key='validate-bom'
         hidden={partLocked || !user.hasChangeRole(UserRoles.part)}
         tooltip={t`Validate BOM`}
         icon={<IconCircleCheck />}
         onClick={() => validateBom.open()}
       />,
       <AddItemButton
-        key="add-bom-item"
+        key='add-bom-item'
         hidden={partLocked || !user.hasAddRole(UserRoles.part)}
         tooltip={t`Add BOM Item`}
         onClick={() => newBomItem.open()}
@@ -539,13 +542,13 @@ export function BomTable({
       {editBomItem.modal}
       {validateBom.modal}
       {deleteBomItem.modal}
-      <Stack gap="xs">
+      <Stack gap='xs'>
         {partLocked && (
           <Alert
             title={t`Part is Locked`}
-            color="orange"
+            color='orange'
             icon={<IconLock />}
-            p="xs"
+            p='xs'
           >
             <Text>{t`Bill of materials cannot be edited, as the part is locked`}</Text>
           </Alert>
diff --git a/src/frontend/src/tables/bom/UsedInTable.tsx b/src/frontend/src/tables/bom/UsedInTable.tsx
index 577942160281..70b92e9780dc 100644
--- a/src/frontend/src/tables/bom/UsedInTable.tsx
+++ b/src/frontend/src/tables/bom/UsedInTable.tsx
@@ -7,9 +7,9 @@ import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { PartColumn, ReferenceColumn } from '../ColumnRenderers';
-import { TableFilter } from '../Filter';
+import type { TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
 
 /*
@@ -53,13 +53,13 @@ export function UsedInTable({
         accessor: 'quantity',
         switchable: false,
         render: (record: any) => {
-          let quantity = formatDecimal(record.quantity);
-          let units = record.sub_part_detail?.units;
+          const quantity = formatDecimal(record.quantity);
+          const units = record.sub_part_detail?.units;
 
           return (
-            <Group justify="space-between" grow wrap="nowrap">
+            <Group justify='space-between' grow wrap='nowrap'>
               <Text>{quantity}</Text>
-              {units && <Text size="xs">{units}</Text>}
+              {units && <Text size='xs'>{units}</Text>}
             </Group>
           );
         }
diff --git a/src/frontend/src/tables/build/BuildAllocatedStockTable.tsx b/src/frontend/src/tables/build/BuildAllocatedStockTable.tsx
index eeaa2ffef25c..450214d016e9 100644
--- a/src/frontend/src/tables/build/BuildAllocatedStockTable.tsx
+++ b/src/frontend/src/tables/build/BuildAllocatedStockTable.tsx
@@ -11,16 +11,16 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import {
   LocationColumn,
   PartColumn,
   ReferenceColumn,
   StatusColumn
 } from '../ColumnRenderers';
-import { TableFilter } from '../Filter';
+import type { TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
 
 /**
  * Render a table of allocated stock for a build.
@@ -50,7 +50,7 @@ export default function BuildAllocatedStockTable({
   );
 
   const tableFilters: TableFilter[] = useMemo(() => {
-    let filters: TableFilter[] = [
+    const filters: TableFilter[] = [
       {
         name: 'tracked',
         label: t`Allocated to Output`,
diff --git a/src/frontend/src/tables/build/BuildLineTable.tsx b/src/frontend/src/tables/build/BuildLineTable.tsx
index 97ded0a9df84..575da23583f6 100644
--- a/src/frontend/src/tables/build/BuildLineTable.tsx
+++ b/src/frontend/src/tables/build/BuildLineTable.tsx
@@ -7,7 +7,7 @@ import {
   IconTool,
   IconWand
 } from '@tabler/icons-react';
-import { DataTable, DataTableRowExpansionProps } from 'mantine-datatable';
+import { DataTable, type DataTableRowExpansionProps } from 'mantine-datatable';
 import { useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -30,12 +30,12 @@ import useStatusCodes from '../../hooks/UseStatusCodes';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { BooleanColumn, LocationColumn, PartColumn } from '../ColumnRenderers';
-import { TableFilter } from '../Filter';
+import type { TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
 import {
-  RowAction,
+  type RowAction,
   RowActions,
   RowDeleteAction,
   RowEditAction,
@@ -129,15 +129,15 @@ export function BuildLineSubTable({
   }, [user, onEditAllocation, onDeleteAllocation]);
 
   return (
-    <Paper p="md">
-      <Stack gap="xs">
+    <Paper p='md'>
+      <Stack gap='xs'>
         <DataTable
           minHeight={50}
           withTableBorder
           withColumnBorders
           striped
           pinLastColumn
-          idAccessor="pk"
+          idAccessor='pk'
           columns={tableColumns}
           records={lineItem.filteredAllocations ?? lineItem.allocations}
         />
@@ -215,15 +215,15 @@ export default function BuildLineTable({
   }, []);
 
   const renderAvailableColumn = useCallback((record: any) => {
-    let bom_item = record?.bom_item_detail ?? {};
-    let extra: any[] = [];
+    const bom_item = record?.bom_item_detail ?? {};
+    const extra: any[] = [];
     let available = record?.available_stock;
 
     // Account for substitute stock
     if (record.available_substitute_stock > 0) {
       available += record.available_substitute_stock;
       extra.push(
-        <Text key="substitite" size="sm">
+        <Text key='substitite' size='sm'>
           {t`Includes substitute stock`}
         </Text>
       );
@@ -233,7 +233,7 @@ export default function BuildLineTable({
     if (bom_item.allow_variants && record.available_variant_stock > 0) {
       available += record.available_variant_stock;
       extra.push(
-        <Text key="variant" size="sm">
+        <Text key='variant' size='sm'>
           {t`Includes variant stock`}
         </Text>
       );
@@ -242,7 +242,7 @@ export default function BuildLineTable({
     // Account for in-production stock
     if (record.in_production > 0) {
       extra.push(
-        <Text key="production" size="sm">
+        <Text key='production' size='sm'>
           {t`In production`}: {record.in_production}
         </Text>
       );
@@ -251,7 +251,7 @@ export default function BuildLineTable({
     // Account for stock on order
     if (record.on_order > 0) {
       extra.push(
-        <Text key="on-order" size="sm">
+        <Text key='on-order' size='sm'>
           {t`On order`}: {record.on_order}
         </Text>
       );
@@ -260,7 +260,7 @@ export default function BuildLineTable({
     // Account for "external" stock
     if (record.external_stock > 0) {
       extra.push(
-        <Text key="external" size="sm">
+        <Text key='external' size='sm'>
           {t`External stock`}: {record.external_stock}
         </Text>
       );
@@ -270,7 +270,7 @@ export default function BuildLineTable({
 
     if (!sufficient) {
       extra.push(
-        <Text key="insufficient" c="orange" size="sm">
+        <Text key='insufficient' c='orange' size='sm'>
           {t`Insufficient stock`}
         </Text>
       );
@@ -285,7 +285,7 @@ export default function BuildLineTable({
             available
           ) : (
             <Text
-              c="red"
+              c='red'
               style={{ fontStyle: 'italic' }}
             >{t`No stock available`}</Text>
           )
@@ -308,7 +308,7 @@ export default function BuildLineTable({
           const hasAllocatedItems = record.allocatedQuantity > 0;
 
           return (
-            <Group wrap="nowrap">
+            <Group wrap='nowrap'>
               <RowExpansionIcon
                 enabled={hasAllocatedItems}
                 expanded={table.isRowExpanded(record.pk)}
@@ -367,10 +367,10 @@ export default function BuildLineTable({
         ordering: 'unit_quantity',
         render: (record: any) => {
           return (
-            <Group justify="space-between" wrap="nowrap">
+            <Group justify='space-between' wrap='nowrap'>
               <Text>{record.bom_item_detail?.quantity}</Text>
               {record?.part_detail?.units && (
-                <Text size="xs">[{record.part_detail.units}]</Text>
+                <Text size='xs'>[{record.part_detail.units}]</Text>
               )}
             </Group>
           );
@@ -384,10 +384,10 @@ export default function BuildLineTable({
         render: (record: any) => {
           // If a build output is specified, use the provided quantity
           return (
-            <Group justify="space-between" wrap="nowrap">
+            <Group justify='space-between' wrap='nowrap'>
               <Text>{record.requiredQuantity}</Text>
               {record?.part_detail?.units && (
-                <Text size="xs">[{record.part_detail.units}]</Text>
+                <Text size='xs'>[{record.part_detail.units}]</Text>
               )}
             </Group>
           );
@@ -460,7 +460,7 @@ export default function BuildLineTable({
     successMessage: t`Auto allocation in progress`,
     table: table,
     preFormContent: (
-      <Alert color="green" title={t`Auto Allocate Stock`}>
+      <Alert color='green' title={t`Auto Allocate Stock`}>
         <Text>{t`Automatically allocate stock to this build according to the selected options`}</Text>
       </Alert>
     )
@@ -493,7 +493,7 @@ export default function BuildLineTable({
       output: output?.pk ?? null
     },
     preFormContent: (
-      <Alert color="red" title={t`Deallocate Stock`}>
+      <Alert color='red' title={t`Deallocate Stock`}>
         {selectedLine == undefined ? (
           <Text>{t`Deallocate all untracked stock for this build order`}</Text>
         ) : (
@@ -529,14 +529,14 @@ export default function BuildLineTable({
 
   const rowActions = useCallback(
     (record: any): RowAction[] => {
-      let part = record.part_detail ?? {};
+      const part = record.part_detail ?? {};
       const in_production = build.status == buildStatus.PRODUCTION;
       const consumable = record.bom_item_detail?.consumable ?? false;
 
       const hasOutput = !!output?.pk;
 
       // Can allocate
-      let canAllocate =
+      const canAllocate =
         in_production &&
         !consumable &&
         user.hasChangeRole(UserRoles.build) &&
@@ -544,20 +544,20 @@ export default function BuildLineTable({
         record.trackable == hasOutput;
 
       // Can de-allocate
-      let canDeallocate =
+      const canDeallocate =
         in_production &&
         !consumable &&
         user.hasChangeRole(UserRoles.build) &&
         record.allocated > 0 &&
         record.trackable == hasOutput;
 
-      let canOrder =
+      const canOrder =
         in_production &&
         !consumable &&
         user.hasAddRole(UserRoles.purchase_order) &&
         part.purchaseable;
 
-      let canBuild =
+      const canBuild =
         in_production &&
         !consumable &&
         user.hasAddRole(UserRoles.build) &&
@@ -622,22 +622,22 @@ export default function BuildLineTable({
     const visible = production && canEdit;
     return [
       <ActionButton
-        key="auto-allocate"
+        key='auto-allocate'
         icon={<IconWand />}
         tooltip={t`Auto Allocate Stock`}
         hidden={!visible || hasOutput}
-        color="blue"
+        color='blue'
         onClick={() => {
           autoAllocateStock.open();
         }}
       />,
       <ActionButton
-        key="allocate-stock"
+        key='allocate-stock'
         icon={<IconArrowRight />}
         tooltip={t`Allocate Stock`}
         hidden={!visible}
         disabled={!table.hasSelectedRecords}
-        color="green"
+        color='green'
         onClick={() => {
           let rows = table.selectedRecords
             .filter((r) => r.allocatedQuantity < r.requiredQuantity)
@@ -654,12 +654,12 @@ export default function BuildLineTable({
         }}
       />,
       <ActionButton
-        key="deallocate-stock"
+        key='deallocate-stock'
         icon={<IconCircleMinus />}
         tooltip={t`Deallocate Stock`}
         hidden={!visible || hasOutput}
         disabled={table.hasSelectedRecords}
-        color="red"
+        color='red'
         onClick={() => {
           setSelectedLine(null);
           deallocateStock.open();
diff --git a/src/frontend/src/tables/build/BuildOrderTable.tsx b/src/frontend/src/tables/build/BuildOrderTable.tsx
index 43732f2b8097..6e3d25ba8756 100644
--- a/src/frontend/src/tables/build/BuildOrderTable.tsx
+++ b/src/frontend/src/tables/build/BuildOrderTable.tsx
@@ -30,7 +30,7 @@ import {
   MinDateFilter,
   OverdueFilter,
   StatusFilterOptions,
-  TableFilter
+  type TableFilter
 } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
 
@@ -113,7 +113,7 @@ export function BuildOrderTable({
   const ownerFilters = useOwnerFilters();
 
   const tableFilters: TableFilter[] = useMemo(() => {
-    let filters: TableFilter[] = [
+    const filters: TableFilter[] = [
       {
         name: 'outstanding',
         type: 'boolean',
@@ -187,7 +187,7 @@ export function BuildOrderTable({
         hidden={!user.hasAddRole(UserRoles.build)}
         tooltip={t`Add Build Order`}
         onClick={() => newBuild.open()}
-        key="add-build-order"
+        key='add-build-order'
       />
     ];
   }, [user]);
diff --git a/src/frontend/src/tables/build/BuildOrderTestTable.tsx b/src/frontend/src/tables/build/BuildOrderTestTable.tsx
index ff8cb61d688e..df6619c9ae11 100644
--- a/src/frontend/src/tables/build/BuildOrderTestTable.tsx
+++ b/src/frontend/src/tables/build/BuildOrderTestTable.tsx
@@ -2,11 +2,17 @@ import { t } from '@lingui/macro';
 import { ActionIcon, Badge, Group, Text, Tooltip } from '@mantine/core';
 import { IconCirclePlus } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
-import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from 'react';
 
 import { api } from '../../App';
 import { PassFailButton } from '../../components/buttons/YesNoButton';
-import { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
+import type { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
 import { RenderUser } from '../../components/render/User';
 import { formatDate } from '../../defaults/formatters';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
@@ -15,11 +21,11 @@ import { useCreateApiFormModal } from '../../hooks/UseForm';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { LocationColumn } from '../ColumnRenderers';
-import { TableFilter } from '../Filter';
+import type { TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction } from '../RowActions';
+import type { RowAction } from '../RowActions';
 import { TableHoverCard } from '../TableHoverCard';
 
 /**
@@ -96,10 +102,10 @@ export default function BuildOrderTestTable({
         sortable: false,
         switchable: true,
         render: (record: any) => {
-          let tests = record.tests || [];
+          const tests = record.tests || [];
 
           // Find the most recent test result (highest primary key)
-          let test = tests
+          const test = tests
             .filter((test: any) => test.template == template.pk)
             .sort((a: any, b: any) => b.pk - a.pk)
             .shift();
@@ -107,13 +113,13 @@ export default function BuildOrderTestTable({
           // No test result recorded
           if (!test || test.result === undefined) {
             return (
-              <Group gap="xs" wrap="nowrap" justify="space-between">
-                <Badge color="lightblue" variant="filled">{t`No Result`}</Badge>
+              <Group gap='xs' wrap='nowrap' justify='space-between'>
+                <Badge color='lightblue' variant='filled'>{t`No Result`}</Badge>
                 <Tooltip label={t`Add Test Result`}>
                   <ActionIcon
-                    size="xs"
-                    color="green"
-                    variant="transparent"
+                    size='xs'
+                    color='green'
+                    variant='transparent'
                     onClick={() => {
                       setSelectedOutput(record.pk);
                       setSelectedTemplate(template.pk);
@@ -127,11 +133,11 @@ export default function BuildOrderTestTable({
             );
           }
 
-          let extra: ReactNode[] = [];
+          const extra: ReactNode[] = [];
 
           if (test.value) {
             extra.push(
-              <Text key="value" size="sm">
+              <Text key='value' size='sm'>
                 {t`Value`}: {test.value}
               </Text>
             );
@@ -139,7 +145,7 @@ export default function BuildOrderTestTable({
 
           if (test.notes) {
             extra.push(
-              <Text key="notes" size="sm">
+              <Text key='notes' size='sm'>
                 {t`Notes`}: {test.notes}
               </Text>
             );
@@ -147,14 +153,14 @@ export default function BuildOrderTestTable({
 
           if (test.date) {
             extra.push(
-              <Text key="date" size="sm">
+              <Text key='date' size='sm'>
                 {t`Date`}: {formatDate(test.date)}
               </Text>
             );
           }
 
           if (test.user_detail) {
-            extra.push(<RenderUser key="user" instance={test.user_detail} />);
+            extra.push(<RenderUser key='user' instance={test.user_detail} />);
           }
 
           return (
@@ -171,7 +177,7 @@ export default function BuildOrderTestTable({
 
   const tableColumns: TableColumn[] = useMemo(() => {
     // Fixed columns
-    let columns: TableColumn[] = [
+    const columns: TableColumn[] = [
       {
         accessor: 'stock',
         title: t`Build Output`,
@@ -181,11 +187,11 @@ export default function BuildOrderTestTable({
           if (record.serial) {
             return `# ${record.serial}`;
           } else {
-            let extra: ReactNode[] = [];
+            const extra: ReactNode[] = [];
 
             if (record.batch) {
               extra.push(
-                <Text key="batch" size="sm">
+                <Text key='batch' size='sm'>
                   {t`Batch Code`}: {record.batch}
                 </Text>
               );
diff --git a/src/frontend/src/tables/build/BuildOutputTable.tsx b/src/frontend/src/tables/build/BuildOutputTable.tsx
index 47d9dede94b8..66516d7acd46 100644
--- a/src/frontend/src/tables/build/BuildOutputTable.tsx
+++ b/src/frontend/src/tables/build/BuildOutputTable.tsx
@@ -41,10 +41,10 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { LocationColumn, PartColumn, StatusColumn } from '../ColumnRenderers';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowEditAction, RowViewAction } from '../RowActions';
+import { type RowAction, RowEditAction, RowViewAction } from '../RowActions';
 import { TableHoverCard } from '../TableHoverCard';
 import BuildLineTable from './BuildLineTable';
 
@@ -70,24 +70,24 @@ function OutputAllocationDrawer({
   return (
     <>
       <Drawer
-        position="bottom"
-        size="lg"
+        position='bottom'
+        size='lg'
         title={
-          <Group p="md" wrap="nowrap" justify="space-apart">
-            <StylishText size="lg">{t`Build Output Stock Allocation`}</StylishText>
-            <Space h="lg" />
+          <Group p='md' wrap='nowrap' justify='space-apart'>
+            <StylishText size='lg'>{t`Build Output Stock Allocation`}</StylishText>
+            <Space h='lg' />
             <PartColumn part={build.part_detail} />
             {output?.serial && (
-              <Text size="sm">
+              <Text size='sm'>
                 {t`Serial Number`}: {output.serial}
               </Text>
             )}
             {output?.batch && (
-              <Text size="sm">
+              <Text size='sm'>
                 {t`Batch Code`}: {output.batch}
               </Text>
             )}
-            <Space h="lg" />
+            <Space h='lg' />
           </Group>
         }
         opened={opened}
@@ -105,7 +105,7 @@ function OutputAllocationDrawer({
         }}
       >
         <Divider />
-        <Paper p="md">
+        <Paper p='md'>
           <BuildLineTable
             build={build}
             output={output}
@@ -200,13 +200,13 @@ export default function BuildOutputTable({
     (records: any[]): any[] => {
       records?.forEach((record: any, index: number) => {
         // Test result information, per record
-        let results: TestResultOverview[] = [];
-        let passCount: number = 0;
+        const results: TestResultOverview[] = [];
+        let passCount = 0;
 
         // Iterate through each
         testTemplates?.forEach((template: any) => {
           // Find the "newest" result for this template in the returned data
-          let result = record.tests
+          const result = record.tests
             ?.filter((test: any) => test.template == template.pk)
             .sort((a: any, b: any) => {
               return a.pk < b.pk ? 1 : -1;
@@ -227,7 +227,7 @@ export default function BuildOutputTable({
         records[index].results = results;
 
         // Stock allocation information, per record
-        let fullyAllocatedCount: number = 0;
+        let fullyAllocatedCount = 0;
 
         // Iterate through each tracked item
         trackedItems?.forEach((item: any) => {
@@ -316,7 +316,7 @@ export default function BuildOutputTable({
     title: t`Deallocate Stock`,
     preFormContent: (
       <Alert
-        color="yellow"
+        color='yellow'
         icon={<IconExclamationCircle />}
         title={t`Deallocate Stock`}
       >
@@ -339,10 +339,10 @@ export default function BuildOutputTable({
   const tableActions = useMemo(() => {
     return [
       <ActionButton
-        key="complete-selected-outputs"
+        key='complete-selected-outputs'
         tooltip={t`Complete selected outputs`}
-        icon={<InvenTreeIcon icon="success" />}
-        color="green"
+        icon={<InvenTreeIcon icon='success' />}
+        color='green'
         disabled={!table.hasSelectedRecords}
         onClick={() => {
           setSelectedOutputs(table.selectedRecords);
@@ -350,10 +350,10 @@ export default function BuildOutputTable({
         }}
       />,
       <ActionButton
-        key="scrap-selected-outputs"
+        key='scrap-selected-outputs'
         tooltip={t`Scrap selected outputs`}
-        icon={<InvenTreeIcon icon="delete" />}
-        color="red"
+        icon={<InvenTreeIcon icon='delete' />}
+        color='red'
         disabled={!table.hasSelectedRecords}
         onClick={() => {
           setSelectedOutputs(table.selectedRecords);
@@ -361,10 +361,10 @@ export default function BuildOutputTable({
         }}
       />,
       <ActionButton
-        key="cancel-selected-outputs"
+        key='cancel-selected-outputs'
         tooltip={t`Cancel selected outputs`}
-        icon={<InvenTreeIcon icon="cancel" />}
-        color="red"
+        icon={<InvenTreeIcon icon='cancel' />}
+        color='red'
         disabled={!table.hasSelectedRecords}
         onClick={() => {
           setSelectedOutputs(table.selectedRecords);
@@ -372,7 +372,7 @@ export default function BuildOutputTable({
         }}
       />,
       <AddItemButton
-        key="add-build-output"
+        key='add-build-output'
         tooltip={t`Add Build Output`}
         hidden={!user.hasAddRole(UserRoles.build)}
         onClick={addBuildOutput.open}
@@ -394,7 +394,7 @@ export default function BuildOutputTable({
           tooltip: t`Allocate stock to build output`,
           color: 'blue',
           hidden: !hasTrackedItems || !user.hasChangeRole(UserRoles.build),
-          icon: <InvenTreeIcon icon="plus" />,
+          icon: <InvenTreeIcon icon='plus' />,
           onClick: () => {
             setSelectedOutputs([record]);
             openDrawer();
@@ -405,7 +405,7 @@ export default function BuildOutputTable({
           tooltip: t`Deallocate stock from build output`,
           color: 'red',
           hidden: !hasTrackedItems || !user.hasChangeRole(UserRoles.build),
-          icon: <InvenTreeIcon icon="minus" />,
+          icon: <InvenTreeIcon icon='minus' />,
           onClick: () => {
             setSelectedOutputs([record]);
             deallocateBuildOutput.open();
@@ -415,7 +415,7 @@ export default function BuildOutputTable({
           title: t`Complete`,
           tooltip: t`Complete build output`,
           color: 'green',
-          icon: <InvenTreeIcon icon="success" />,
+          icon: <InvenTreeIcon icon='success' />,
           onClick: () => {
             setSelectedOutputs([record]);
             completeBuildOutputsForm.open();
@@ -431,7 +431,7 @@ export default function BuildOutputTable({
         {
           title: t`Scrap`,
           tooltip: t`Scrap build output`,
-          icon: <InvenTreeIcon icon="delete" />,
+          icon: <InvenTreeIcon icon='delete' />,
           color: 'red',
           onClick: () => {
             setSelectedOutputs([record]);
@@ -441,7 +441,7 @@ export default function BuildOutputTable({
         {
           title: t`Cancel`,
           tooltip: t`Cancel build output`,
-          icon: <InvenTreeIcon icon="cancel" />,
+          icon: <InvenTreeIcon icon='cancel' />,
           color: 'red',
           onClick: () => {
             setSelectedOutputs([record]);
@@ -515,11 +515,11 @@ export default function BuildOutputTable({
             record.results?.map((result: TestResultOverview) => {
               return (
                 result && (
-                  <Group justify="left" key={result.name} wrap="nowrap">
+                  <Group justify='left' key={result.name} wrap='nowrap'>
                     {result.result ? (
-                      <IconCircleCheck color="green" />
+                      <IconCircleCheck color='green' />
                     ) : (
-                      <IconCircleX color="red" />
+                      <IconCircleX color='red' />
                     )}
                     <Text>{result.name}</Text>
                   </Group>
diff --git a/src/frontend/src/tables/company/AddressTable.tsx b/src/frontend/src/tables/company/AddressTable.tsx
index c5f98de94fad..948aea65fc9d 100644
--- a/src/frontend/src/tables/company/AddressTable.tsx
+++ b/src/frontend/src/tables/company/AddressTable.tsx
@@ -3,7 +3,7 @@ import { useCallback, useMemo, useState } from 'react';
 
 import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { YesNoButton } from '../../components/buttons/YesNoButton';
-import { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
+import type { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { UserRoles } from '../../enums/Roles';
 import {
@@ -14,10 +14,10 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { LinkColumn } from '../ColumnRenderers';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
 
 export function AddressTable({
   companyId,
@@ -56,7 +56,7 @@ export function AddressTable({
           }
 
           if (record?.line2) {
-            address += ' ' + record.line2;
+            address += ` ${record.line2}`;
           }
 
           return address.trim();
@@ -144,11 +144,11 @@ export function AddressTable({
 
   const rowActions = useCallback(
     (record: any): RowAction[] => {
-      let can_edit =
+      const can_edit =
         user.hasChangeRole(UserRoles.purchase_order) ||
         user.hasChangeRole(UserRoles.sales_order);
 
-      let can_delete =
+      const can_delete =
         user.hasDeleteRole(UserRoles.purchase_order) ||
         user.hasDeleteRole(UserRoles.sales_order);
 
@@ -173,13 +173,13 @@ export function AddressTable({
   );
 
   const tableActions = useMemo(() => {
-    let can_add =
+    const can_add =
       user.hasChangeRole(UserRoles.purchase_order) ||
       user.hasChangeRole(UserRoles.sales_order);
 
     return [
       <AddItemButton
-        key="add-address"
+        key='add-address'
         tooltip={t`Add Address`}
         onClick={() => newAddress.open()}
         hidden={!can_add}
diff --git a/src/frontend/src/tables/company/CompanyTable.tsx b/src/frontend/src/tables/company/CompanyTable.tsx
index 0e14bbf6f914..a217b6e7d758 100644
--- a/src/frontend/src/tables/company/CompanyTable.tsx
+++ b/src/frontend/src/tables/company/CompanyTable.tsx
@@ -18,9 +18,9 @@ import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
 import { BooleanColumn, DescriptionColumn } from '../ColumnRenderers';
-import { TableFilter } from '../Filter';
+import type { TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowEditAction } from '../RowActions';
+import { type RowAction, RowEditAction } from '../RowActions';
 
 /**
  * A table which displays a list of company records,
@@ -45,7 +45,7 @@ export function CompanyTable({
         sortable: true,
         render: (record: any) => {
           return (
-            <Group gap="xs" wrap="nowrap">
+            <Group gap='xs' wrap='nowrap'>
               <Thumbnail
                 src={record.thumbnail ?? record.image ?? ''}
                 alt={record.name}
@@ -121,7 +121,7 @@ export function CompanyTable({
 
     return [
       <AddItemButton
-        key="add-company"
+        key='add-company'
         tooltip={t`Add Company`}
         onClick={() => newCompany.open()}
         hidden={!can_add}
@@ -160,7 +160,7 @@ export function CompanyTable({
           },
           onRowClick: (record: any, index: number, event: any) => {
             if (record.pk) {
-              let base = path ?? 'company';
+              const base = path ?? 'company';
               navigateToLink(`/${base}/${record.pk}`, navigate, event);
             }
           },
diff --git a/src/frontend/src/tables/company/ContactTable.tsx b/src/frontend/src/tables/company/ContactTable.tsx
index 8bb64959eaca..6e0d020d9f2a 100644
--- a/src/frontend/src/tables/company/ContactTable.tsx
+++ b/src/frontend/src/tables/company/ContactTable.tsx
@@ -2,7 +2,7 @@ import { t } from '@lingui/macro';
 import { useCallback, useMemo, useState } from 'react';
 
 import { AddItemButton } from '../../components/buttons/AddItemButton';
-import { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
+import type { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { UserRoles } from '../../enums/Roles';
 import {
@@ -13,9 +13,9 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
 
 export function ContactTable({
   companyId,
@@ -92,10 +92,10 @@ export function ContactTable({
 
   const rowActions = useCallback(
     (record: any): RowAction[] => {
-      let can_edit =
+      const can_edit =
         user.hasChangeRole(UserRoles.purchase_order) ||
         user.hasChangeRole(UserRoles.sales_order);
-      let can_delete =
+      const can_delete =
         user.hasDeleteRole(UserRoles.purchase_order) ||
         user.hasDeleteRole(UserRoles.sales_order);
 
@@ -120,13 +120,13 @@ export function ContactTable({
   );
 
   const tableActions = useMemo(() => {
-    let can_add =
+    const can_add =
       user.hasAddRole(UserRoles.purchase_order) ||
       user.hasAddRole(UserRoles.sales_order);
 
     return [
       <AddItemButton
-        key="add-contact"
+        key='add-contact'
         tooltip={t`Add contact`}
         onClick={() => newContact.open()}
         hidden={!can_add}
diff --git a/src/frontend/src/tables/general/AttachmentTable.tsx b/src/frontend/src/tables/general/AttachmentTable.tsx
index 2c0c80c6a18f..dbd4f7784d1f 100644
--- a/src/frontend/src/tables/general/AttachmentTable.tsx
+++ b/src/frontend/src/tables/general/AttachmentTable.tsx
@@ -8,15 +8,15 @@ import {
   IconUpload,
   IconX
 } from '@tabler/icons-react';
-import { ReactNode, useCallback, useMemo, useState } from 'react';
+import { type ReactNode, useCallback, useMemo, useState } from 'react';
 
 import { api } from '../../App';
 import { ActionButton } from '../../components/buttons/ActionButton';
-import { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
+import type { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
 import { AttachmentLink } from '../../components/items/AttachmentLink';
 import { formatFileSize } from '../../defaults/formatters';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
-import { ModelType } from '../../enums/ModelType';
+import type { ModelType } from '../../enums/ModelType';
 import {
   useCreateApiFormModal,
   useDeleteApiFormModal,
@@ -25,10 +25,10 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
-import { TableFilter } from '../Filter';
+import type { TableColumn } from '../Column';
+import type { TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
 
 /**
  * Define set of columns to display for the attachment table
@@ -64,10 +64,10 @@ function attachmentTableColumns(): TableColumn[] {
 
       render: (record: any) => {
         return (
-          <Group justify="space-between">
+          <Group justify='space-between'>
             <Text>{record.upload_date}</Text>
             {record.user_detail && (
-              <Badge size="xs">{record.user_detail.username}</Badge>
+              <Badge size='xs'>{record.user_detail.username}</Badge>
             )}
           </Group>
         );
@@ -121,7 +121,7 @@ export function AttachmentTable({
   // Callback to upload file attachment(s)
   function uploadFiles(files: File[]) {
     files.forEach((file) => {
-      let formData = new FormData();
+      const formData = new FormData();
       formData.append('attachment', file);
       formData.append('model_type', model_type);
       formData.append('model_id', model_id.toString());
@@ -165,7 +165,7 @@ export function AttachmentTable({
   >(undefined);
 
   const uploadFields: ApiFormFieldSet = useMemo(() => {
-    let fields: ApiFormFieldSet = {
+    const fields: ApiFormFieldSet = {
       model_type: {
         value: model_type,
         hidden: true
@@ -241,7 +241,7 @@ export function AttachmentTable({
   const tableActions: ReactNode[] = useMemo(() => {
     return [
       <ActionButton
-        key="add-attachment"
+        key='add-attachment'
         tooltip={t`Add attachment`}
         hidden={!user.hasAddPermission(model_type)}
         icon={<IconFileUpload />}
@@ -252,7 +252,7 @@ export function AttachmentTable({
         }}
       />,
       <ActionButton
-        key="add-external-link"
+        key='add-external-link'
         tooltip={t`Add external link`}
         hidden={!user.hasAddPermission(model_type)}
         icon={<IconExternalLink />}
@@ -293,10 +293,10 @@ export function AttachmentTable({
       {uploadAttachment.modal}
       {editAttachment.modal}
       {deleteAttachment.modal}
-      <Stack gap="xs">
+      <Stack gap='xs'>
         {validPk && (
           <InvenTreeTable
-            key="attachment-table"
+            key='attachment-table'
             url={url}
             tableState={table}
             columns={tableColumns}
@@ -315,13 +315,13 @@ export function AttachmentTable({
           />
         )}
         {allowDragAndDrop && validPk && (
-          <Paper p="md" shadow="xs" radius="md">
+          <Paper p='md' shadow='xs' radius='md'>
             <Dropzone
               onDrop={uploadFiles}
               loading={isUploading}
-              key="attachment-dropzone"
+              key='attachment-dropzone'
             >
-              <Group justify="center" gap="lg" mih={100}>
+              <Group justify='center' gap='lg' mih={100}>
                 <Dropzone.Accept>
                   <IconUpload
                     style={{ color: 'var(--mantine-color-blue-6)' }}
@@ -340,7 +340,7 @@ export function AttachmentTable({
                     stroke={1.5}
                   />
                 </Dropzone.Idle>
-                <Text size="sm">{t`Drag attachment file here to upload`}</Text>
+                <Text size='sm'>{t`Drag attachment file here to upload`}</Text>
               </Group>
             </Dropzone>
           </Paper>
diff --git a/src/frontend/src/tables/general/ExtraLineItemTable.tsx b/src/frontend/src/tables/general/ExtraLineItemTable.tsx
index dfbb39711f80..af6f6ec091c6 100644
--- a/src/frontend/src/tables/general/ExtraLineItemTable.tsx
+++ b/src/frontend/src/tables/general/ExtraLineItemTable.tsx
@@ -3,8 +3,8 @@ import { useCallback, useMemo, useState } from 'react';
 
 import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { formatCurrency } from '../../defaults/formatters';
-import { ApiEndpoints } from '../../enums/ApiEndpoints';
-import { UserRoles } from '../../enums/Roles';
+import type { ApiEndpoints } from '../../enums/ApiEndpoints';
+import type { UserRoles } from '../../enums/Roles';
 import { extraLineItemFields } from '../../forms/CommonForms';
 import {
   useCreateApiFormModal,
@@ -14,11 +14,11 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { LinkColumn, NoteColumn } from '../ColumnRenderers';
 import { InvenTreeTable } from '../InvenTreeTable';
 import {
-  RowAction,
+  type RowAction,
   RowDeleteAction,
   RowDuplicateAction,
   RowEditAction
@@ -139,7 +139,7 @@ export default function ExtraLineItemTable({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
-        key="add-line-item"
+        key='add-line-item'
         tooltip={t`Add Extra Line Item`}
         hidden={!user.hasAddRole(role)}
         onClick={() => {
diff --git a/src/frontend/src/tables/machine/MachineListTable.tsx b/src/frontend/src/tables/machine/MachineListTable.tsx
index a851ca096f0d..c6f13a9ed092 100644
--- a/src/frontend/src/tables/machine/MachineListTable.tsx
+++ b/src/frontend/src/tables/machine/MachineListTable.tsx
@@ -48,10 +48,10 @@ import {
 } from '../../hooks/UseForm';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { BooleanColumn } from '../ColumnRenderers';
-import { InvenTreeTable, InvenTreeTableProps } from '../InvenTreeTable';
-import { MachineDriverI, MachineTypeI } from './MachineTypeTable';
+import { InvenTreeTable, type InvenTreeTableProps } from '../InvenTreeTable';
+import type { MachineDriverI, MachineTypeI } from './MachineTypeTable';
 
 interface MachineI {
   pk: string;
@@ -74,8 +74,8 @@ function MachineStatusIndicator({ machine }: Readonly<{ machine: MachineI }>) {
   // machine is not active, show a gray dot
   if (!machine.active) {
     return (
-      <Indicator style={style} color="gray">
-        <Box></Box>
+      <Indicator style={style} color='gray'>
+        <Box />
       </Indicator>
     );
   }
@@ -94,7 +94,7 @@ function MachineStatusIndicator({ machine }: Readonly<{ machine: MachineI }>) {
 
   return (
     <Indicator processing={processing} style={style} color={color}>
-      <Box></Box>
+      <Box />
     </Indicator>
   );
 }
@@ -201,7 +201,7 @@ function MachineDrawer({
           notifications.show({
             message: t`Machine restarted`,
             color: 'green',
-            icon: <IconCheck size="1rem" />
+            icon: <IconCheck size='1rem' />
           });
         });
     },
@@ -238,11 +238,11 @@ function MachineDrawer({
 
   return (
     <>
-      <Stack gap="xs">
+      <Stack gap='xs'>
         {machineEditModal.modal}
         {machineDeleteModal.modal}
 
-        <Group justify="space-between">
+        <Group justify='space-between'>
           <Group>
             {machine && <MachineStatusIndicator machine={machine} />}
             <Title order={4}>{machine?.name}</Title>
@@ -250,7 +250,7 @@ function MachineDrawer({
 
           <Group>
             {machine?.restart_required && (
-              <Badge color="red">
+              <Badge color='red'>
                 <Trans>Restart required</Trans>
               </Badge>
             )}
@@ -271,7 +271,7 @@ function MachineDrawer({
                   tooltip:
                     t`Restart machine` +
                     (machine?.restart_required
-                      ? ' (' + t`manual restart required` + ')'
+                      ? ` (${t`manual restart required`})`
                       : ''),
                   indicator: machine?.restart_required
                     ? { color: 'red' }
@@ -287,20 +287,20 @@ function MachineDrawer({
           multiple
           defaultValue={['machine-info', 'machine-settings', 'driver-settings']}
         >
-          <Accordion.Item value="machine-info">
+          <Accordion.Item value='machine-info'>
             <Accordion.Control>
-              <StylishText size="lg">{t`Machine Information`}</StylishText>
+              <StylishText size='lg'>{t`Machine Information`}</StylishText>
             </Accordion.Control>
             <Accordion.Panel>
               <Card withBorder>
-                <Stack gap="md">
-                  <Stack pos="relative" gap="xs">
+                <Stack gap='md'>
+                  <Stack pos='relative' gap='xs'>
                     <LoadingOverlay
                       visible={isFetching}
                       overlayProps={{ opacity: 0 }}
                     />
                     <InfoItem name={t`Machine Type`}>
-                      <Group gap="xs">
+                      <Group gap='xs'>
                         {machineType ? (
                           <DetailDrawerLink
                             to={`../type-${machine?.machine_type}`}
@@ -313,7 +313,7 @@ function MachineDrawer({
                       </Group>
                     </InfoItem>
                     <InfoItem name={t`Machine Driver`}>
-                      <Group gap="xs">
+                      <Group gap='xs'>
                         {machineDriver ? (
                           <DetailDrawerLink
                             to={`../driver-${machine?.driver}`}
@@ -334,32 +334,32 @@ function MachineDrawer({
                       <YesNoButton value={machine?.active || false} />
                     </InfoItem>
                     <InfoItem name={t`Status`}>
-                      <Flex direction="column">
+                      <Flex direction='column'>
                         {machine?.status === -1 ? (
-                          <Text fz="xs">No status</Text>
+                          <Text fz='xs'>No status</Text>
                         ) : (
                           StatusRenderer({
                             status: `${machine?.status || -1}`,
                             type: `MachineStatus__${machine?.status_model}` as any
                           })
                         )}
-                        <Text fz="sm">{machine?.status_text}</Text>
+                        <Text fz='sm'>{machine?.status_text}</Text>
                       </Flex>
                     </InfoItem>
-                    <Group justify="space-between" gap="xs">
-                      <Text fz="sm" fw={700}>
+                    <Group justify='space-between' gap='xs'>
+                      <Text fz='sm' fw={700}>
                         <Trans>Errors</Trans>:
                       </Text>
                       {machine && machine?.machine_errors.length > 0 ? (
-                        <Badge color="red" style={{ marginLeft: '10px' }}>
+                        <Badge color='red' style={{ marginLeft: '10px' }}>
                           {machine?.machine_errors.length}
                         </Badge>
                       ) : (
-                        <Text fz="xs">
+                        <Text fz='xs'>
                           <Trans>No errors reported</Trans>
                         </Text>
                       )}
-                      <List w="100%">
+                      <List w='100%'>
                         {machine?.machine_errors.map((error, i) => (
                           <List.Item key={i}>
                             <Code>{error}</Code>
@@ -373,15 +373,15 @@ function MachineDrawer({
             </Accordion.Panel>
           </Accordion.Item>
           {machine?.is_driver_available && (
-            <Accordion.Item value="machine-settings">
+            <Accordion.Item value='machine-settings'>
               <Accordion.Control>
-                <StylishText size="lg">{t`Machine Settings`}</StylishText>
+                <StylishText size='lg'>{t`Machine Settings`}</StylishText>
               </Accordion.Control>
               <Accordion.Panel>
                 <Card withBorder>
                   <MachineSettingList
                     machinePk={machinePk}
-                    configType="M"
+                    configType='M'
                     onChange={refreshAll}
                   />
                 </Card>
@@ -389,15 +389,15 @@ function MachineDrawer({
             </Accordion.Item>
           )}
           {machine?.is_driver_available && (
-            <Accordion.Item value="driver-settings">
+            <Accordion.Item value='driver-settings'>
               <Accordion.Control>
-                <StylishText size="lg">{t`Driver Settings`}</StylishText>
+                <StylishText size='lg'>{t`Driver Settings`}</StylishText>
               </Accordion.Control>
               <Accordion.Panel>
                 <Card withBorder>
                   <MachineSettingList
                     machinePk={machinePk}
-                    configType="D"
+                    configType='D'
                     onChange={refreshAll}
                   />
                 </Card>
@@ -432,19 +432,17 @@ export function MachineListTable({
       {
         accessor: 'name',
         sortable: true,
-        render: function (record) {
-          return (
-            <Group justify="left" wrap="nowrap">
-              <MachineStatusIndicator machine={record} />
-              <Text>{record.name}</Text>
-              {record.restart_required && (
-                <Badge color="red">
-                  <Trans>Restart required</Trans>
-                </Badge>
-              )}
-            </Group>
-          );
-        }
+        render: (record) => (
+          <Group justify='left' wrap='nowrap'>
+            <MachineStatusIndicator machine={record} />
+            <Text>{record.name}</Text>
+            {record.restart_required && (
+              <Badge color='red'>
+                <Trans>Restart required</Trans>
+              </Badge>
+            )}
+          </Group>
+        )
       },
       {
         accessor: 'machine_type',
@@ -454,7 +452,7 @@ export function MachineListTable({
             (m) => m.slug === record.machine_type
           );
           return (
-            <Group gap="xs">
+            <Group gap='xs'>
               <Text>
                 {machineType ? machineType.name : record.machine_type}
               </Text>
@@ -469,7 +467,7 @@ export function MachineListTable({
         render: (record) => {
           const driver = machineDrivers?.find((d) => d.slug === record.driver);
           return (
-            <Group gap="xs">
+            <Group gap='xs'>
               <Text>{driver ? driver.name : record.driver}</Text>
               {!record.is_driver_available && <UnavailableIndicator />}
             </Group>
@@ -554,7 +552,7 @@ export function MachineListTable({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
-        key="add-machine"
+        key='add-machine'
         tooltip={t`Add machine`}
         onClick={() => {
           setCreateFormMachineType(null);
diff --git a/src/frontend/src/tables/machine/MachineTypeTable.tsx b/src/frontend/src/tables/machine/MachineTypeTable.tsx
index 19acaead82c0..751efe027c69 100644
--- a/src/frontend/src/tables/machine/MachineTypeTable.tsx
+++ b/src/frontend/src/tables/machine/MachineTypeTable.tsx
@@ -23,9 +23,9 @@ import { DetailDrawer } from '../../components/nav/DetailDrawer';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { BooleanColumn } from '../ColumnRenderers';
-import { InvenTreeTable, InvenTreeTableProps } from '../InvenTreeTable';
+import { InvenTreeTable, type InvenTreeTableProps } from '../InvenTreeTable';
 import { MachineListTable, useMachineTypeDriver } from './MachineListTable';
 
 export interface MachineTypeI {
@@ -84,7 +84,7 @@ function MachineTypeDrawer({
   return (
     <>
       <Stack>
-        <Group wrap="nowrap">
+        <Group wrap='nowrap'>
           <Title order={4}>
             {machineType ? machineType.name : machineTypeSlug}
           </Title>
@@ -92,7 +92,7 @@ function MachineTypeDrawer({
 
         {!machineType && (
           <Alert
-            color="red"
+            color='red'
             title={t`Not Found`}
             icon={<IconExclamationCircle />}
           >
@@ -104,13 +104,13 @@ function MachineTypeDrawer({
           multiple
           defaultValue={['machine-type-info', 'machine-drivers']}
         >
-          <Accordion.Item value="machine-type-info">
+          <Accordion.Item value='machine-type-info'>
             <Accordion.Control>
-              <StylishText size="lg">{t`Machine Type Information`}</StylishText>
+              <StylishText size='lg'>{t`Machine Type Information`}</StylishText>
             </Accordion.Control>
             <Accordion.Panel>
               <Card withBorder>
-                <Stack pos="relative" gap="xs">
+                <Stack pos='relative' gap='xs'>
                   <LoadingOverlay
                     visible={isFetching}
                     overlayProps={{ opacity: 0 }}
@@ -118,23 +118,23 @@ function MachineTypeDrawer({
                   <InfoItem
                     name={t`Name`}
                     value={machineType?.name}
-                    type="text"
+                    type='text'
                   />
                   <InfoItem
                     name={t`Slug`}
                     value={machineType?.slug}
-                    type="text"
+                    type='text'
                   />
                   <InfoItem
                     name={t`Description`}
                     value={machineType?.description}
-                    type="text"
+                    type='text'
                   />
                   {!machineType?.is_builtin && (
                     <InfoItem
                       name={t`Provider plugin`}
                       value={machineType?.provider_plugin?.name}
-                      type="text"
+                      type='text'
                       link={
                         machineType?.provider_plugin?.pk !== null
                           ? `../../plugin/${machineType?.provider_plugin?.pk}/`
@@ -146,20 +146,20 @@ function MachineTypeDrawer({
                   <InfoItem
                     name={t`Provider file`}
                     value={machineType?.provider_file}
-                    type="code"
+                    type='code'
                   />
                   <InfoItem
                     name={t`Builtin`}
                     value={machineType?.is_builtin}
-                    type="boolean"
+                    type='boolean'
                   />
                 </Stack>
               </Card>
             </Accordion.Panel>
           </Accordion.Item>
-          <Accordion.Item value="machine-drivers">
+          <Accordion.Item value='machine-drivers'>
             <Accordion.Control>
-              <StylishText size="lg">{t`Available Drivers`}</StylishText>
+              <StylishText size='lg'>{t`Available Drivers`}</StylishText>
             </Accordion.Control>
             <Accordion.Panel>
               <Card withBorder>
@@ -206,7 +206,7 @@ function MachineDriverDrawer({
 
   return (
     <Stack>
-      <Group justify="center">
+      <Group justify='center'>
         <Title order={4}>
           {machineDriver ? machineDriver.name : machineDriverSlug}
         </Title>
@@ -219,34 +219,34 @@ function MachineDriverDrawer({
       )}
 
       <Card withBorder>
-        <Stack gap="md">
-          <Group justify="space-between">
+        <Stack gap='md'>
+          <Group justify='space-between'>
             <Title order={4}>
               <Trans>Machine driver information</Trans>
             </Title>
-            <ActionIcon variant="outline" onClick={() => refresh()}>
+            <ActionIcon variant='outline' onClick={() => refresh()}>
               <IconRefresh />
             </ActionIcon>
           </Group>
 
-          <Stack pos="relative" gap="xs">
+          <Stack pos='relative' gap='xs'>
             <LoadingOverlay
               visible={isFetching}
               overlayProps={{ opacity: 0 }}
             />
-            <InfoItem name={t`Name`} value={machineDriver?.name} type="text" />
-            <InfoItem name={t`Slug`} value={machineDriver?.slug} type="text" />
+            <InfoItem name={t`Name`} value={machineDriver?.name} type='text' />
+            <InfoItem name={t`Slug`} value={machineDriver?.slug} type='text' />
             <InfoItem
               name={t`Description`}
               value={machineDriver?.description}
-              type="text"
+              type='text'
             />
             <InfoItem
               name={t`Machine type`}
               value={
                 machineType ? machineType.name : machineDriver?.machine_type
               }
-              type="text"
+              type='text'
               link={
                 machineType
                   ? `../type-${machineDriver?.machine_type}`
@@ -258,7 +258,7 @@ function MachineDriverDrawer({
               <InfoItem
                 name={t`Provider plugin`}
                 value={machineDriver?.provider_plugin?.name}
-                type="text"
+                type='text'
                 link={
                   machineDriver?.provider_plugin?.pk !== null
                     ? `../../plugin/${machineDriver?.provider_plugin?.pk}/`
@@ -270,29 +270,29 @@ function MachineDriverDrawer({
             <InfoItem
               name={t`Provider file`}
               value={machineDriver?.provider_file}
-              type="code"
+              type='code'
             />
             <InfoItem
               name={t`Builtin`}
               value={machineDriver?.is_builtin}
-              type="boolean"
+              type='boolean'
             />
-            <Group justify="space-between" gap="xs">
-              <Text fz="sm" fw={700}>
+            <Group justify='space-between' gap='xs'>
+              <Text fz='sm' fw={700}>
                 <Trans>Errors</Trans>:
               </Text>
               {machineDriver && machineDriver?.driver_errors.length > 0 ? (
-                <Badge color="red" style={{ marginLeft: '10px' }}>
+                <Badge color='red' style={{ marginLeft: '10px' }}>
                   {machineDriver.driver_errors.length}
                 </Badge>
               ) : (
-                <Text fz="xs">
+                <Text fz='xs'>
                   <Trans>No errors reported</Trans>
                 </Text>
               )}
-              <List w="100%">
+              <List w='100%'>
                 {machineDriver?.driver_errors.map((error, i) => (
-                  <List.Item key={i}>
+                  <List.Item key={`${i}-${error}`}>
                     <Code>{error}</Code>
                   </List.Item>
                 ))}
@@ -303,7 +303,7 @@ function MachineDriverDrawer({
       </Card>
 
       <Card withBorder>
-        <Stack gap="md">
+        <Stack gap='md'>
           <Title order={4}>
             <Trans>Machines</Trans>
           </Title>
diff --git a/src/frontend/src/tables/notifications/NotificationsTable.tsx b/src/frontend/src/tables/notifications/NotificationsTable.tsx
index f092663d1d72..83fbfbb55c4c 100644
--- a/src/frontend/src/tables/notifications/NotificationsTable.tsx
+++ b/src/frontend/src/tables/notifications/NotificationsTable.tsx
@@ -2,11 +2,11 @@ import { t } from '@lingui/macro';
 import { useMemo } from 'react';
 
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
-import { TableState } from '../../hooks/UseTable';
+import type { TableState } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction } from '../RowActions';
+import type { RowAction } from '../RowActions';
 
 export function NotificationTable({
   params,
@@ -32,7 +32,7 @@ export function NotificationTable({
         sortable: true
       },
       {
-        accessor: `name`,
+        accessor: 'name',
         title: t`Notification`
       },
       {
diff --git a/src/frontend/src/tables/part/ParametricPartTable.tsx b/src/frontend/src/tables/part/ParametricPartTable.tsx
index 6e01d9555211..cf802657b520 100644
--- a/src/frontend/src/tables/part/ParametricPartTable.tsx
+++ b/src/frontend/src/tables/part/ParametricPartTable.tsx
@@ -2,12 +2,12 @@ import { t } from '@lingui/macro';
 import { Group } from '@mantine/core';
 import { useHover } from '@mantine/hooks';
 import { useQuery } from '@tanstack/react-query';
-import { ReactNode, useCallback, useMemo, useState } from 'react';
+import { type ReactNode, useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { api } from '../../App';
 import { YesNoButton } from '../../components/buttons/YesNoButton';
-import { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
+import type { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
 import { formatDecimal } from '../../defaults/formatters';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
@@ -23,9 +23,9 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { DescriptionColumn, PartColumn } from '../ColumnRenderers';
-import { TableFilter } from '../Filter';
+import type { TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
 import { TableHoverCard } from '../TableHoverCard';
 
@@ -46,7 +46,7 @@ function ParameterCell({
     return record.parameters?.find((p: any) => p.template == template.pk);
   }, [record.parameters, template]);
 
-  let extra: any[] = [];
+  const extra: any[] = [];
 
   // Format the value for display
   const value: ReactNode = useMemo(() => {
@@ -76,7 +76,7 @@ function ParameterCell({
 
   return (
     <div>
-      <Group grow ref={ref} justify="space-between">
+      <Group grow ref={ref} justify='space-between'>
         <Group grow>
           <TableHoverCard
             value={value ?? '-'}
@@ -150,8 +150,8 @@ export default function ParametricPartTable({
   // Update a single parameter record in the table
   const updateParameterRecord = useCallback(
     (part: number, parameter: any) => {
-      let records = table.records;
-      let partIndex = records.findIndex((record: any) => record.pk == part);
+      const records = table.records;
+      const partIndex = records.findIndex((record: any) => record.pk == part);
 
       if (partIndex < 0) {
         // No matching part: reload the entire table
@@ -159,7 +159,7 @@ export default function ParametricPartTable({
         return;
       }
 
-      let parameterIndex = records[partIndex].parameters.findIndex(
+      const parameterIndex = records[partIndex].parameters.findIndex(
         (p: any) => p.pk == parameter.pk
       );
 
@@ -176,7 +176,7 @@ export default function ParametricPartTable({
   );
 
   const parameterColumns: TableColumn[] = useMemo(() => {
-    let data = categoryParmeters.data ?? [];
+    const data = categoryParmeters.data ?? [];
 
     return data.map((template: any) => {
       let title = template.name;
@@ -206,7 +206,7 @@ export default function ParametricPartTable({
   const onParameterClick = useCallback((template: number, part: any) => {
     setSelectedTemplate(template);
     setSelectedPart(part.pk);
-    let parameter = part.parameters?.find((p: any) => p.template == template);
+    const parameter = part.parameters?.find((p: any) => p.template == template);
 
     if (parameter) {
       setSelectedParameter(parameter.pk);
diff --git a/src/frontend/src/tables/part/PartBuildAllocationsTable.tsx b/src/frontend/src/tables/part/PartBuildAllocationsTable.tsx
index b3dd4be29c10..61184aea502f 100644
--- a/src/frontend/src/tables/part/PartBuildAllocationsTable.tsx
+++ b/src/frontend/src/tables/part/PartBuildAllocationsTable.tsx
@@ -1,6 +1,6 @@
 import { t } from '@lingui/macro';
 import { Group, Text } from '@mantine/core';
-import { DataTableRowExpansionProps } from 'mantine-datatable';
+import type { DataTableRowExpansionProps } from 'mantine-datatable';
 import { useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -11,7 +11,7 @@ import { UserRoles } from '../../enums/Roles';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import {
   DescriptionColumn,
   ProjectCodeColumn,
@@ -41,7 +41,7 @@ export default function PartBuildAllocationsTable({
         title: t`Build Order`,
         sortable: true,
         render: (record: any) => (
-          <Group wrap="nowrap" gap="xs">
+          <Group wrap='nowrap' gap='xs'>
             <RowExpansionIcon
               enabled={record.allocated > 0}
               expanded={table.isRowExpanded(record.pk)}
diff --git a/src/frontend/src/tables/part/PartCategoryTable.tsx b/src/frontend/src/tables/part/PartCategoryTable.tsx
index a6eba9bef8f4..be5ed601a162 100644
--- a/src/frontend/src/tables/part/PartCategoryTable.tsx
+++ b/src/frontend/src/tables/part/PartCategoryTable.tsx
@@ -17,11 +17,11 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { DescriptionColumn } from '../ColumnRenderers';
-import { TableFilter } from '../Filter';
+import type { TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowEditAction } from '../RowActions';
+import { type RowAction, RowEditAction } from '../RowActions';
 
 /**
  * PartCategoryTable - Displays a table of part categories
@@ -37,17 +37,17 @@ export function PartCategoryTable({ parentId }: Readonly<{ parentId?: any }>) {
         sortable: true,
         switchable: false,
         render: (record: any) => (
-          <Group gap="xs" wrap="nowrap" justify="space-between">
-            <Group gap="xs" wrap="nowrap">
+          <Group gap='xs' wrap='nowrap' justify='space-between'>
+            <Group gap='xs' wrap='nowrap'>
               {record.icon && <ApiIcon name={record.icon} />}
               {record.name}
             </Group>
-            <Group gap="xs" justify="flex-end" wrap="nowrap">
+            <Group gap='xs' justify='flex-end' wrap='nowrap'>
               {record.starred && (
                 <Tooltip
                   label={t`You are subscribed to notifications for this category`}
                 >
-                  <IconBell color="green" size={16} />
+                  <IconBell color='green' size={16} />
                 </Tooltip>
               )}
             </Group>
@@ -121,11 +121,11 @@ export function PartCategoryTable({ parentId }: Readonly<{ parentId?: any }>) {
   });
 
   const tableActions = useMemo(() => {
-    let can_add = user.hasAddRole(UserRoles.part_category);
+    const can_add = user.hasAddRole(UserRoles.part_category);
 
     return [
       <AddItemButton
-        key="add-part-category"
+        key='add-part-category'
         tooltip={t`Add Part Category`}
         onClick={() => newCategory.open()}
         hidden={!can_add}
@@ -135,7 +135,7 @@ export function PartCategoryTable({ parentId }: Readonly<{ parentId?: any }>) {
 
   const rowActions = useCallback(
     (record: any): RowAction[] => {
-      let can_edit = user.hasChangeRole(UserRoles.part_category);
+      const can_edit = user.hasChangeRole(UserRoles.part_category);
 
       return [
         RowEditAction({
diff --git a/src/frontend/src/tables/part/PartCategoryTemplateTable.tsx b/src/frontend/src/tables/part/PartCategoryTemplateTable.tsx
index 44fc1845652a..5fe917ef1f2b 100644
--- a/src/frontend/src/tables/part/PartCategoryTemplateTable.tsx
+++ b/src/frontend/src/tables/part/PartCategoryTemplateTable.tsx
@@ -3,7 +3,7 @@ import { Group, Text } from '@mantine/core';
 import { useCallback, useMemo, useState } from 'react';
 
 import { AddItemButton } from '../../components/buttons/AddItemButton';
-import { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
+import type { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { UserRoles } from '../../enums/Roles';
 import {
@@ -14,10 +14,10 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
-import { TableFilter } from '../Filter';
+import type { TableColumn } from '../Column';
+import type { TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
 
 export default function PartCategoryTemplateTable() {
   const table = useTable('part-category-parameter-templates');
@@ -93,9 +93,9 @@ export default function PartCategoryTemplateTable() {
           }
 
           return (
-            <Group justify="space-between" grow>
+            <Group justify='space-between' grow>
               <Text>{record.default_value}</Text>
-              {units && <Text size="xs">{units}</Text>}
+              {units && <Text size='xs'>{units}</Text>}
             </Group>
           );
         }
@@ -128,6 +128,7 @@ export default function PartCategoryTemplateTable() {
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
+        key='add'
         tooltip={t`Add Category Parameter`}
         onClick={() => newTemplate.open()}
         hidden={!user.hasAddRole(UserRoles.part)}
diff --git a/src/frontend/src/tables/part/PartParameterTable.tsx b/src/frontend/src/tables/part/PartParameterTable.tsx
index 341864ec3346..d04bac73a363 100644
--- a/src/frontend/src/tables/part/PartParameterTable.tsx
+++ b/src/frontend/src/tables/part/PartParameterTable.tsx
@@ -5,7 +5,7 @@ import { useCallback, useMemo, useState } from 'react';
 
 import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { YesNoButton } from '../../components/buttons/YesNoButton';
-import { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
+import type { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
 import { formatDecimal } from '../../defaults/formatters';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { UserRoles } from '../../enums/Roles';
@@ -18,10 +18,10 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { DescriptionColumn, PartColumn } from '../ColumnRenderers';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
 import { TableHoverCard } from '../TableHoverCard';
 
 /**
@@ -56,7 +56,7 @@ export function PartParameterTable({
         sortable: true,
         ordering: 'name',
         render: (record) => {
-          let variant = String(partId) != String(record.part);
+          const variant = String(partId) != String(record.part);
 
           return (
             <Text style={{ fontStyle: variant ? 'italic' : 'inherit' }}>
@@ -73,13 +73,13 @@ export function PartParameterTable({
         switchable: false,
         sortable: true,
         render: (record) => {
-          let template = record.template_detail;
+          const template = record.template_detail;
 
           if (template?.checkbox) {
             return <YesNoButton value={record.data} />;
           }
 
-          let extra: any[] = [];
+          const extra: any[] = [];
 
           if (
             template.units &&
@@ -174,7 +174,7 @@ export function PartParameterTable({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
-        key="add-parameter"
+        key='add-parameter'
         hidden={partLocked || !user.hasAddRole(UserRoles.part)}
         tooltip={t`Add parameter`}
         onClick={() => newParameter.open()}
@@ -187,13 +187,13 @@ export function PartParameterTable({
       {newParameter.modal}
       {editParameter.modal}
       {deleteParameter.modal}
-      <Stack gap="xs">
+      <Stack gap='xs'>
         {partLocked && (
           <Alert
             title={t`Part is Locked`}
-            color="orange"
+            color='orange'
             icon={<IconLock />}
-            p="xs"
+            p='xs'
           >
             <Text>{t`Part parameters cannot be edited, as the part is locked`}</Text>
           </Alert>
diff --git a/src/frontend/src/tables/part/PartParameterTemplateTable.tsx b/src/frontend/src/tables/part/PartParameterTemplateTable.tsx
index 7fec8371274a..b77e7c2e10b4 100644
--- a/src/frontend/src/tables/part/PartParameterTemplateTable.tsx
+++ b/src/frontend/src/tables/part/PartParameterTemplateTable.tsx
@@ -2,7 +2,7 @@ import { t } from '@lingui/macro';
 import { useCallback, useMemo, useState } from 'react';
 
 import { AddItemButton } from '../../components/buttons/AddItemButton';
-import { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
+import type { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { UserRoles } from '../../enums/Roles';
 import {
@@ -13,11 +13,11 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { BooleanColumn, DescriptionColumn } from '../ColumnRenderers';
-import { TableFilter } from '../Filter';
+import type { TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
 
 export default function PartParameterTemplateTable() {
   const table = useTable('part-parameter-templates');
@@ -138,6 +138,7 @@ export default function PartParameterTemplateTable() {
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
+        key='add'
         tooltip={t`Add Parameter Template`}
         onClick={() => newTemplate.open()}
         hidden={!user.hasAddRole(UserRoles.part)}
diff --git a/src/frontend/src/tables/part/PartPurchaseOrdersTable.tsx b/src/frontend/src/tables/part/PartPurchaseOrdersTable.tsx
index 643d5fd5702c..2ae98b091b2a 100644
--- a/src/frontend/src/tables/part/PartPurchaseOrdersTable.tsx
+++ b/src/frontend/src/tables/part/PartPurchaseOrdersTable.tsx
@@ -8,9 +8,9 @@ import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { DateColumn, ReferenceColumn, StatusColumn } from '../ColumnRenderers';
-import { StatusFilterOptions, TableFilter } from '../Filter';
+import { StatusFilterOptions, type TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
 import { TableHoverCard } from '../TableHoverCard';
 
@@ -60,21 +60,21 @@ export default function PartPurchaseOrdersTable({
         sortable: true,
         switchable: false,
         render: (record: any) => {
-          let supplier_part = record?.supplier_part_detail ?? {};
-          let part = record?.part_detail ?? supplier_part?.part_detail ?? {};
-          let extra = [];
+          const supplier_part = record?.supplier_part_detail ?? {};
+          const part = record?.part_detail ?? supplier_part?.part_detail ?? {};
+          const extra = [];
 
           if (supplier_part.pack_quantity_native != 1) {
-            let total = record.quantity * supplier_part.pack_quantity_native;
+            const total = record.quantity * supplier_part.pack_quantity_native;
 
             extra.push(
-              <Text key="pack-quantity">
+              <Text key='pack-quantity'>
                 {t`Pack Quantity`}: {supplier_part.pack_quantity}
               </Text>
             );
 
             extra.push(
-              <Text key="total-quantity">
+              <Text key='total-quantity'>
                 {t`Total Quantity`}: {total} {part?.units}
               </Text>
             );
diff --git a/src/frontend/src/tables/part/PartSalesAllocationsTable.tsx b/src/frontend/src/tables/part/PartSalesAllocationsTable.tsx
index 5f27d649a8a2..fa8aaad4d1c0 100644
--- a/src/frontend/src/tables/part/PartSalesAllocationsTable.tsx
+++ b/src/frontend/src/tables/part/PartSalesAllocationsTable.tsx
@@ -1,6 +1,6 @@
 import { t } from '@lingui/macro';
 import { Group, Text } from '@mantine/core';
-import { DataTableRowExpansionProps } from 'mantine-datatable';
+import type { DataTableRowExpansionProps } from 'mantine-datatable';
 import { useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -11,7 +11,7 @@ import { UserRoles } from '../../enums/Roles';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import {
   DescriptionColumn,
   ProjectCodeColumn,
@@ -37,7 +37,7 @@ export default function PartSalesAllocationsTable({
         accessor: 'order',
         title: t`Sales Order`,
         render: (record: any) => (
-          <Group wrap="nowrap" gap="xs">
+          <Group wrap='nowrap' gap='xs'>
             <RowExpansionIcon
               enabled={record.allocated > 0}
               expanded={table.isRowExpanded(record.pk)}
diff --git a/src/frontend/src/tables/part/PartTable.tsx b/src/frontend/src/tables/part/PartTable.tsx
index 08f473b6973f..51583ce1f331 100644
--- a/src/frontend/src/tables/part/PartTable.tsx
+++ b/src/frontend/src/tables/part/PartTable.tsx
@@ -1,6 +1,6 @@
 import { t } from '@lingui/macro';
 import { Group, Text } from '@mantine/core';
-import { ReactNode, useMemo } from 'react';
+import { type ReactNode, useMemo } from 'react';
 
 import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { formatPriceRange } from '../../defaults/formatters';
@@ -12,10 +12,10 @@ import { useCreateApiFormModal } from '../../hooks/UseForm';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { DescriptionColumn, LinkColumn, PartColumn } from '../ColumnRenderers';
-import { TableFilter } from '../Filter';
-import { InvenTreeTable, InvenTreeTableProps } from '../InvenTreeTable';
+import type { TableFilter } from '../Filter';
+import { InvenTreeTable, type InvenTreeTableProps } from '../InvenTreeTable';
 import { TableHoverCard } from '../TableHoverCard';
 
 /**
@@ -58,14 +58,14 @@ function partTableColumns(): TableColumn[] {
       sortable: true,
 
       render: (record) => {
-        let extra: ReactNode[] = [];
+        const extra: ReactNode[] = [];
 
-        let stock = record?.total_in_stock ?? 0;
-        let allocated =
+        const stock = record?.total_in_stock ?? 0;
+        const allocated =
           (record?.allocated_to_build_orders ?? 0) +
           (record?.allocated_to_sales_orders ?? 0);
-        let available = Math.max(0, stock - allocated);
-        let min_stock = record?.minimum_stock ?? 0;
+        const available = Math.max(0, stock - allocated);
+        const min_stock = record?.minimum_stock ?? 0;
 
         let text = String(stock);
 
@@ -73,8 +73,8 @@ function partTableColumns(): TableColumn[] {
 
         if (min_stock > stock) {
           extra.push(
-            <Text key="min-stock" c="orange">
-              {t`Minimum stock` + `: ${min_stock}`}
+            <Text key='min-stock' c='orange'>
+              {`${t`Minimum stock`}: ${min_stock}`}
             </Text>
           );
 
@@ -83,37 +83,35 @@ function partTableColumns(): TableColumn[] {
 
         if (record.ordering > 0) {
           extra.push(
-            <Text key="on-order">{t`On Order` + `: ${record.ordering}`}</Text>
+            <Text key='on-order'>{`${t`On Order`}: ${record.ordering}`}</Text>
           );
         }
 
         if (record.building) {
           extra.push(
-            <Text key="building">{t`Building` + `: ${record.building}`}</Text>
+            <Text key='building'>{`${t`Building`}: ${record.building}`}</Text>
           );
         }
 
         if (record.allocated_to_build_orders > 0) {
           extra.push(
-            <Text key="bo-allocations">
-              {t`Build Order Allocations` +
-                `: ${record.allocated_to_build_orders}`}
+            <Text key='bo-allocations'>
+              {`${t`Build Order Allocations`}: ${record.allocated_to_build_orders}`}
             </Text>
           );
         }
 
         if (record.allocated_to_sales_orders > 0) {
           extra.push(
-            <Text key="so-allocations">
-              {t`Sales Order Allocations` +
-                `: ${record.allocated_to_sales_orders}`}
+            <Text key='so-allocations'>
+              {`${t`Sales Order Allocations`}: ${record.allocated_to_sales_orders}`}
             </Text>
           );
         }
 
         if (available != stock) {
           extra.push(
-            <Text key="available">
+            <Text key='available'>
               {t`Available`}: {available}
             </Text>
           );
@@ -121,7 +119,7 @@ function partTableColumns(): TableColumn[] {
 
         if (record.external_stock > 0) {
           extra.push(
-            <Text key="external">
+            <Text key='external'>
               {t`External stock`}: {record.external_stock}
             </Text>
           );
@@ -141,10 +139,10 @@ function partTableColumns(): TableColumn[] {
         return (
           <TableHoverCard
             value={
-              <Group gap="xs" justify="left" wrap="nowrap">
+              <Group gap='xs' justify='left' wrap='nowrap'>
                 <Text c={color}>{text}</Text>
                 {record.units && (
-                  <Text size="xs" c={color}>
+                  <Text size='xs' c={color}>
                     [{record.units}]
                   </Text>
                 )}
@@ -338,7 +336,7 @@ export function PartListTable({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
-        key="add-part"
+        key='add-part'
         hidden={!user.hasAddRole(UserRoles.part)}
         tooltip={t`Add Part`}
         onClick={() => newPart.open()}
diff --git a/src/frontend/src/tables/part/PartTestTemplateTable.tsx b/src/frontend/src/tables/part/PartTestTemplateTable.tsx
index 166aabf85bc1..15a98976c5d7 100644
--- a/src/frontend/src/tables/part/PartTestTemplateTable.tsx
+++ b/src/frontend/src/tables/part/PartTestTemplateTable.tsx
@@ -1,11 +1,11 @@
 import { Trans, t } from '@lingui/macro';
 import { Alert, Badge, Stack, Text } from '@mantine/core';
 import { IconLock } from '@tabler/icons-react';
-import { ReactNode, useCallback, useMemo, useState } from 'react';
+import { type ReactNode, useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { AddItemButton } from '../../components/buttons/AddItemButton';
-import { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
+import type { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
 import { UserRoles } from '../../enums/Roles';
@@ -18,12 +18,12 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { BooleanColumn, DescriptionColumn } from '../ColumnRenderers';
-import { TableFilter } from '../Filter';
+import type { TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
 import {
-  RowAction,
+  type RowAction,
   RowDeleteAction,
   RowEditAction,
   RowViewAction
@@ -48,11 +48,11 @@ export default function PartTestTemplateTable({
         switchable: false,
         sortable: true,
         render: (record: any) => {
-          let extra: ReactNode[] = [];
+          const extra: ReactNode[] = [];
 
           if (record.part != partId) {
             extra.push(
-              <Text size="sm">{t`Test is defined for a parent template part`}</Text>
+              <Text size='sm'>{t`Test is defined for a parent template part`}</Text>
             );
           }
 
@@ -78,7 +78,7 @@ export default function PartTestTemplateTable({
         sortable: true,
         title: t`Results`,
         render: (record: any) => {
-          return record.results || <Badge color="blue">{t`No Results`}</Badge>;
+          return record.results || <Badge color='blue'>{t`No Results`}</Badge>;
         }
       },
       DescriptionColumn({
@@ -185,7 +185,7 @@ export default function PartTestTemplateTable({
     pk: selectedTest,
     title: t`Delete Test Template`,
     preFormContent: (
-      <Alert color="red" title={t`This action cannot be reversed`}>
+      <Alert color='red' title={t`This action cannot be reversed`}>
         <Text>
           <Trans>
             Any tests results associated with this template will be deleted
@@ -234,11 +234,11 @@ export default function PartTestTemplateTable({
   );
 
   const tableActions = useMemo(() => {
-    let can_add = user.hasAddRole(UserRoles.part);
+    const can_add = user.hasAddRole(UserRoles.part);
 
     return [
       <AddItemButton
-        key="add-test-template"
+        key='add-test-template'
         tooltip={t`Add Test Template`}
         onClick={() => newTestTemplate.open()}
         hidden={partLocked || !can_add}
@@ -251,13 +251,13 @@ export default function PartTestTemplateTable({
       {newTestTemplate.modal}
       {editTestTemplate.modal}
       {deleteTestTemplate.modal}
-      <Stack gap="xs">
+      <Stack gap='xs'>
         {partLocked && (
           <Alert
             title={t`Part is Locked`}
-            color="orange"
+            color='orange'
             icon={<IconLock />}
-            p="xs"
+            p='xs'
           >
             <Text>{t`Part templates cannot be edited, as the part is locked`}</Text>
           </Alert>
diff --git a/src/frontend/src/tables/part/PartThumbTable.tsx b/src/frontend/src/tables/part/PartThumbTable.tsx
index 80a0a607babb..1120af09fdeb 100644
--- a/src/frontend/src/tables/part/PartThumbTable.tsx
+++ b/src/frontend/src/tables/part/PartThumbTable.tsx
@@ -14,7 +14,8 @@ import {
 import { useHover } from '@mantine/hooks';
 import { modals } from '@mantine/modals';
 import { useQuery } from '@tanstack/react-query';
-import React, { Suspense, useEffect, useState } from 'react';
+import type React from 'react';
+import { Suspense, useEffect, useState } from 'react';
 
 import { api } from '../../App';
 import { Thumbnail } from '../../components/images/Thumbnail';
@@ -78,15 +79,15 @@ function PartThumbComponent({
     <Paper
       withBorder
       style={{ backgroundColor: color }}
-      p="sm"
+      p='sm'
       ref={ref}
       onClick={() => selectImage(element.image)}
     >
-      <Stack justify="space-between">
+      <Stack justify='space-between'>
         <AspectRatio ratio={1}>
-          <Thumbnail size={120} src={src} align="center"></Thumbnail>
+          <Thumbnail size={120} src={src} align='center' />
         </AspectRatio>
-        <Text size="xs">
+        <Text size='xs'>
           {element.image.split('/')[1]} ({element.count})
         </Text>
       </Stack>
@@ -159,7 +160,7 @@ export function PartThumbTable({
     <>
       <Suspense>
         <Divider />
-        <Paper p="sm">
+        <Paper p='sm'>
           <SimpleGrid cols={8}>
             {!thumbQuery.isFetching
               ? thumbQuery.data?.data.map(
@@ -176,7 +177,7 @@ export function PartThumbTable({
                   <Skeleton
                     height={150}
                     width={150}
-                    radius="sm"
+                    radius='sm'
                     key={idx}
                     style={{ padding: '5px' }}
                   />
@@ -186,8 +187,8 @@ export function PartThumbTable({
       </Suspense>
 
       <Divider />
-      <Paper p="sm">
-        <Group justify="space-between">
+      <Paper p='sm'>
+        <Group justify='space-between'>
           <TextInput
             placeholder={t`Search...`}
             onChange={(event) => {
diff --git a/src/frontend/src/tables/part/PartVariantTable.tsx b/src/frontend/src/tables/part/PartVariantTable.tsx
index 6dfc51f0c479..927abf44b3bc 100644
--- a/src/frontend/src/tables/part/PartVariantTable.tsx
+++ b/src/frontend/src/tables/part/PartVariantTable.tsx
@@ -1,7 +1,7 @@
 import { t } from '@lingui/macro';
 import { useMemo } from 'react';
 
-import { TableFilter } from '../Filter';
+import type { TableFilter } from '../Filter';
 import { PartListTable } from './PartTable';
 
 /**
diff --git a/src/frontend/src/tables/part/RelatedPartTable.tsx b/src/frontend/src/tables/part/RelatedPartTable.tsx
index 243b23eb3f97..d1e4f8bbd974 100644
--- a/src/frontend/src/tables/part/RelatedPartTable.tsx
+++ b/src/frontend/src/tables/part/RelatedPartTable.tsx
@@ -1,10 +1,10 @@
 import { t } from '@lingui/macro';
 import { Group, Text } from '@mantine/core';
-import { ReactNode, useCallback, useMemo, useState } from 'react';
+import { type ReactNode, useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { AddItemButton } from '../../components/buttons/AddItemButton';
-import { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
+import type { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
 import { Thumbnail } from '../../components/images/Thumbnail';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { UserRoles } from '../../enums/Roles';
@@ -15,9 +15,9 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowDeleteAction } from '../RowActions';
+import { type RowAction, RowDeleteAction } from '../RowActions';
 
 /**
  * Construct a table listing related parts for a given part
@@ -46,11 +46,11 @@ export function RelatedPartTable({
         accessor: 'part',
         title: t`Part`,
         render: (record: any) => {
-          let part = getPart(record);
+          const part = getPart(record);
           return (
             <Group
-              wrap="nowrap"
-              justify="left"
+              wrap='nowrap'
+              justify='left'
               onClick={() => {
                 navigate(`/part/${part.pk}/`);
               }}
@@ -105,7 +105,7 @@ export function RelatedPartTable({
   const tableActions: ReactNode[] = useMemo(() => {
     return [
       <AddItemButton
-        key="add-related-part"
+        key='add-related-part'
         tooltip={t`Add Related Part`}
         hidden={!user.hasAddRole(UserRoles.part)}
         onClick={() => newRelatedPart.open()}
diff --git a/src/frontend/src/tables/plugin/PluginErrorTable.tsx b/src/frontend/src/tables/plugin/PluginErrorTable.tsx
index 4d599c498c49..120b567a54ed 100644
--- a/src/frontend/src/tables/plugin/PluginErrorTable.tsx
+++ b/src/frontend/src/tables/plugin/PluginErrorTable.tsx
@@ -5,7 +5,7 @@ import { useMemo } from 'react';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { InvenTreeTable } from '../InvenTreeTable';
 
 export interface PluginRegistryErrorI {
diff --git a/src/frontend/src/tables/plugin/PluginListTable.tsx b/src/frontend/src/tables/plugin/PluginListTable.tsx
index 2e2056a73e06..ea589d3e0490 100644
--- a/src/frontend/src/tables/plugin/PluginListTable.tsx
+++ b/src/frontend/src/tables/plugin/PluginListTable.tsx
@@ -18,7 +18,7 @@ import { ActionButton } from '../../components/buttons/ActionButton';
 import { YesNoButton } from '../../components/buttons/YesNoButton';
 import { DetailDrawer } from '../../components/nav/DetailDrawer';
 import PluginDrawer from '../../components/plugins/PluginDrawer';
-import { PluginInterface } from '../../components/plugins/PluginInterface';
+import type { PluginInterface } from '../../components/plugins/PluginInterface';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import {
   useCreateApiFormModal,
@@ -28,9 +28,9 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl, useServerApiState } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction } from '../RowActions';
+import type { RowAction } from '../RowActions';
 
 /**
  * Construct an indicator icon for a single plugin
@@ -40,13 +40,13 @@ function PluginIcon({ plugin }: Readonly<{ plugin: PluginInterface }>) {
     if (plugin?.active) {
       return (
         <Tooltip label={t`Plugin is active`}>
-          <IconCircleCheck color="green" />
+          <IconCircleCheck color='green' />
         </Tooltip>
       );
     } else {
       return (
         <Tooltip label={t`Plugin is inactive`}>
-          <IconCircleX color="red" />
+          <IconCircleX color='red' />
         </Tooltip>
       );
     }
@@ -75,13 +75,13 @@ export default function PluginListTable() {
         accessor: 'name',
         title: t`Plugin`,
         sortable: true,
-        render: function (record: any) {
+        render: (record: any) => {
           if (!record) {
             return;
           }
 
           return (
-            <Group justify="left">
+            <Group justify='left'>
               <PluginIcon plugin={record} />
               <Text>{record.name}</Text>
             </Group>
@@ -98,14 +98,14 @@ export default function PluginListTable() {
         accessor: 'meta.description',
         title: t`Description`,
         sortable: false,
-        render: function (record: any) {
+        render: (record: any) => {
           if (record.active) {
             return record?.meta.description;
           } else {
             return (
               <Text
                 style={{ fontStyle: 'italic' }}
-                size="sm"
+                size='sm'
               >{t`Description not available`}</Text>
             );
           }
@@ -135,7 +135,7 @@ export default function PluginListTable() {
 
   const activateModalContent = useMemo(() => {
     return (
-      <Stack gap="xs">
+      <Stack gap='xs'>
         <Alert
           color={activate ? 'green' : 'red'}
           icon={<IconCircleCheck />}
@@ -253,8 +253,8 @@ export default function PluginListTable() {
     fetchInitialData: false,
     method: 'POST',
     successMessage: activate
-      ? `The plugin was activated`
-      : `The plugin was deactivated`,
+      ? t`The plugin was activated`
+      : t`The plugin was deactivated`,
     fields: {
       active: {
         hidden: true
@@ -296,11 +296,11 @@ export default function PluginListTable() {
     },
     preFormContent: (
       <Alert
-        color="red"
+        color='red'
         icon={<IconInfoCircle />}
         title={t`Confirm plugin uninstall`}
       >
-        <Stack gap="xs">
+        <Stack gap='xs'>
           <Text>{t`The selected plugin will be uninstalled.`}</Text>
           <Text>{t`This action cannot be undone`}</Text>
         </Stack>
@@ -344,15 +344,15 @@ export default function PluginListTable() {
 
     return [
       <ActionButton
-        key="reload"
-        color="green"
+        key='reload'
+        color='green'
         icon={<IconRefresh />}
         tooltip={t`Reload Plugins`}
         onClick={reloadPlugins}
       />,
       <ActionButton
-        key="install"
-        color="green"
+        key='install'
+        color='green'
         icon={<IconPlaylistAdd />}
         tooltip={t`Install Plugin`}
         onClick={() => {
@@ -371,7 +371,7 @@ export default function PluginListTable() {
       {deletePluginModal.modal}
       {activatePluginModal.modal}
       <DetailDrawer
-        title={t`Plugin Detail` + ' - ' + selectedPlugin?.name}
+        title={`${t`Plugin Detail`} - ${selectedPlugin?.name}`}
         size={'65%'}
         renderContent={(pluginKey) => {
           if (!pluginKey) return;
diff --git a/src/frontend/src/tables/purchasing/ManufacturerPartParameterTable.tsx b/src/frontend/src/tables/purchasing/ManufacturerPartParameterTable.tsx
index 01e6ed38c506..1c099bafa7eb 100644
--- a/src/frontend/src/tables/purchasing/ManufacturerPartParameterTable.tsx
+++ b/src/frontend/src/tables/purchasing/ManufacturerPartParameterTable.tsx
@@ -13,9 +13,9 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
 
 export default function ManufacturerPartParameterTable({
   params
@@ -104,7 +104,7 @@ export default function ManufacturerPartParameterTable({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
-        key="add-parameter"
+        key='add-parameter'
         tooltip={t`Add Parameter`}
         onClick={() => {
           createParameter.open();
diff --git a/src/frontend/src/tables/purchasing/ManufacturerPartTable.tsx b/src/frontend/src/tables/purchasing/ManufacturerPartTable.tsx
index e6ad551c50a5..d175ec1e61fe 100644
--- a/src/frontend/src/tables/purchasing/ManufacturerPartTable.tsx
+++ b/src/frontend/src/tables/purchasing/ManufacturerPartTable.tsx
@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro';
-import { ReactNode, useCallback, useMemo, useState } from 'react';
+import { type ReactNode, useCallback, useMemo, useState } from 'react';
 
 import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { Thumbnail } from '../../components/images/Thumbnail';
@@ -15,10 +15,10 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { DescriptionColumn, LinkColumn, PartColumn } from '../ColumnRenderers';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
 
 /*
  * Construct a table listing manufacturer parts
@@ -43,7 +43,7 @@ export function ManufacturerPartTable({
         accessor: 'manufacturer',
         sortable: true,
         render: (record: any) => {
-          let manufacturer = record?.manufacturer_detail ?? {};
+          const manufacturer = record?.manufacturer_detail ?? {};
 
           return (
             <Thumbnail
@@ -96,13 +96,13 @@ export function ManufacturerPartTable({
   });
 
   const tableActions = useMemo(() => {
-    let can_add =
+    const can_add =
       user.hasAddRole(UserRoles.purchase_order) &&
       user.hasAddRole(UserRoles.part);
 
     return [
       <AddItemButton
-        key="add-manufacturer-part"
+        key='add-manufacturer-part'
         tooltip={t`Add Manufacturer Part`}
         onClick={() => createManufacturerPart.open()}
         hidden={!can_add}
diff --git a/src/frontend/src/tables/purchasing/PurchaseOrderLineItemTable.tsx b/src/frontend/src/tables/purchasing/PurchaseOrderLineItemTable.tsx
index 9a97a4c961d7..54cacac4bdd8 100644
--- a/src/frontend/src/tables/purchasing/PurchaseOrderLineItemTable.tsx
+++ b/src/frontend/src/tables/purchasing/PurchaseOrderLineItemTable.tsx
@@ -25,7 +25,7 @@ import useStatusCodes from '../../hooks/UseStatusCodes';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import {
   CurrencyColumn,
   LinkColumn,
@@ -35,10 +35,10 @@ import {
   TargetDateColumn,
   TotalPriceColumn
 } from '../ColumnRenderers';
-import { TableFilter } from '../Filter';
+import type { TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
 import {
-  RowAction,
+  type RowAction,
   RowDeleteAction,
   RowDuplicateAction,
   RowEditAction
@@ -72,7 +72,7 @@ export function PurchaseOrderLineItemTable({
   );
 
   const importSessionFields = useMemo(() => {
-    let fields = dataImporterSessionFields();
+    const fields = dataImporterSessionFields();
 
     fields.model_type.hidden = true;
     fields.model_type.value = ModelType.purchaseorderlineitem;
@@ -147,24 +147,24 @@ export function PurchaseOrderLineItemTable({
         sortable: true,
         switchable: false,
         render: (record: any) => {
-          let supplier_part = record?.supplier_part_detail ?? {};
-          let part = record?.part_detail ?? supplier_part?.part_detail ?? {};
-          let extra = [];
+          const supplier_part = record?.supplier_part_detail ?? {};
+          const part = record?.part_detail ?? supplier_part?.part_detail ?? {};
+          const extra = [];
 
           if (
             supplier_part?.pack_quantity_native != undefined &&
             supplier_part.pack_quantity_native != 1
           ) {
-            let total = record.quantity * supplier_part.pack_quantity_native;
+            const total = record.quantity * supplier_part.pack_quantity_native;
 
             extra.push(
-              <Text key="pack-quantity">
+              <Text key='pack-quantity'>
                 {t`Pack Quantity`}: {supplier_part.pack_quantity}
               </Text>
             );
 
             extra.push(
-              <Text key="total-quantity">
+              <Text key='total-quantity'>
                 {t`Total Quantity`}: {total} {part?.units}
               </Text>
             );
@@ -308,7 +308,7 @@ export function PurchaseOrderLineItemTable({
 
   const rowActions = useCallback(
     (record: any): RowAction[] => {
-      let received = (record?.received ?? 0) >= (record?.quantity ?? 0);
+      const received = (record?.received ?? 0) >= (record?.quantity ?? 0);
 
       return [
         {
@@ -351,14 +351,14 @@ export function PurchaseOrderLineItemTable({
   const tableActions = useMemo(() => {
     return [
       <ActionButton
-        key="import-line-items"
+        key='import-line-items'
         hidden={!orderOpen || !user.hasAddRole(UserRoles.purchase_order)}
         tooltip={t`Import Line Items`}
         icon={<IconFileArrowLeft />}
         onClick={() => importLineItems.open()}
       />,
       <AddItemButton
-        key="add-line-item"
+        key='add-line-item'
         tooltip={t`Add Line Item`}
         onClick={() => {
           setInitialData({
@@ -369,7 +369,7 @@ export function PurchaseOrderLineItemTable({
         hidden={!orderOpen || !user?.hasAddRole(UserRoles.purchase_order)}
       />,
       <ActionButton
-        key="receive-items"
+        key='receive-items'
         text={t`Receive items`}
         icon={<IconSquareArrowRight />}
         onClick={() => receiveLineItems.open()}
diff --git a/src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx b/src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx
index e95166ca75b0..0f33d6e57128 100644
--- a/src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx
+++ b/src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx
@@ -31,7 +31,7 @@ import {
   OutstandingFilter,
   OverdueFilter,
   StatusFilterOptions,
-  TableFilter
+  type TableFilter
 } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
 
@@ -88,8 +88,8 @@ export function PurchaseOrderTable({
         accessor: 'supplier__name',
         title: t`Supplier`,
         sortable: true,
-        render: function (record: any) {
-          let supplier = record.supplier_detail ?? {};
+        render: (record: any) => {
+          const supplier = record.supplier_detail ?? {};
 
           return (
             <Thumbnail
@@ -138,7 +138,7 @@ export function PurchaseOrderTable({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
-        key="add-purchase-order"
+        key='add-purchase-order'
         tooltip={t`Add Purchase Order`}
         onClick={() => newPurchaseOrder.open()}
         hidden={!user.hasAddRole(UserRoles.purchase_order)}
diff --git a/src/frontend/src/tables/purchasing/SupplierPartTable.tsx b/src/frontend/src/tables/purchasing/SupplierPartTable.tsx
index a47801821168..1e23746805c7 100644
--- a/src/frontend/src/tables/purchasing/SupplierPartTable.tsx
+++ b/src/frontend/src/tables/purchasing/SupplierPartTable.tsx
@@ -1,6 +1,6 @@
 import { t } from '@lingui/macro';
 import { Text } from '@mantine/core';
-import { ReactNode, useCallback, useMemo, useState } from 'react';
+import { type ReactNode, useCallback, useMemo, useState } from 'react';
 
 import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { Thumbnail } from '../../components/images/Thumbnail';
@@ -16,7 +16,7 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import {
   BooleanColumn,
   DescriptionColumn,
@@ -24,9 +24,9 @@ import {
   NoteColumn,
   PartColumn
 } from '../ColumnRenderers';
-import { TableFilter } from '../Filter';
+import type { TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
 import { TableHoverCard } from '../TableHoverCard';
 
 /*
@@ -53,7 +53,7 @@ export function SupplierPartTable({
         accessor: 'supplier',
         sortable: true,
         render: (record: any) => {
-          let supplier = record?.supplier_detail ?? {};
+          const supplier = record?.supplier_detail ?? {};
 
           return supplier?.pk ? (
             <Thumbnail
@@ -76,7 +76,7 @@ export function SupplierPartTable({
 
         sortable: true,
         render: (record: any) => {
-          let manufacturer = record?.manufacturer_detail ?? {};
+          const manufacturer = record?.manufacturer_detail ?? {};
 
           return manufacturer?.pk ? (
             <Thumbnail
@@ -114,13 +114,13 @@ export function SupplierPartTable({
         sortable: true,
 
         render: (record: any) => {
-          let part = record?.part_detail ?? {};
+          const part = record?.part_detail ?? {};
 
-          let extra = [];
+          const extra = [];
 
           if (part.units) {
             extra.push(
-              <Text key="base">
+              <Text key='base'>
                 {t`Base units`} : {part.units}
               </Text>
             );
@@ -142,7 +142,7 @@ export function SupplierPartTable({
         sortable: true,
 
         render: (record: any) => {
-          let extra = [];
+          const extra = [];
 
           if (record.availablility_updated) {
             extra.push(
@@ -175,7 +175,7 @@ export function SupplierPartTable({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
-        key="add-supplier-part"
+        key='add-supplier-part'
         tooltip={t`Add supplier part`}
         onClick={() => addSupplierPart.open()}
         hidden={!user.hasAddRole(UserRoles.purchase_order)}
diff --git a/src/frontend/src/tables/purchasing/SupplierPriceBreakTable.tsx b/src/frontend/src/tables/purchasing/SupplierPriceBreakTable.tsx
index 966e33c54bc8..b0085a04a168 100644
--- a/src/frontend/src/tables/purchasing/SupplierPriceBreakTable.tsx
+++ b/src/frontend/src/tables/purchasing/SupplierPriceBreakTable.tsx
@@ -3,7 +3,7 @@ import { Anchor, Group, Text } from '@mantine/core';
 import { useCallback, useMemo, useState } from 'react';
 
 import { AddItemButton } from '../../components/buttons/AddItemButton';
-import { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
+import type { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
 import { Thumbnail } from '../../components/images/Thumbnail';
 import { formatCurrency } from '../../defaults/formatters';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
@@ -18,13 +18,13 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
 
 export function calculateSupplierPartUnitPrice(record: any) {
-  let pack_quantity = record?.part_detail?.pack_quantity_native ?? 1;
-  let unit_price = record.price / pack_quantity;
+  const pack_quantity = record?.part_detail?.pack_quantity_native ?? 1;
+  const unit_price = record.price / pack_quantity;
 
   return unit_price;
 }
@@ -38,7 +38,7 @@ export function SupplierPriceBreakColumns(): TableColumn[] {
       switchable: true,
       render: (record: any) => {
         return (
-          <Group gap="xs" wrap="nowrap">
+          <Group gap='xs' wrap='nowrap'>
             <Thumbnail
               src={
                 record?.supplier_detail?.thumbnail ??
@@ -93,16 +93,16 @@ export function SupplierPriceBreakColumns(): TableColumn[] {
       sortable: true,
       switchable: true,
       render: (record: any) => {
-        let units = record.part_detail?.pack_quantity;
+        const units = record.part_detail?.pack_quantity;
 
-        let price = formatCurrency(calculateSupplierPartUnitPrice(record), {
+        const price = formatCurrency(calculateSupplierPartUnitPrice(record), {
           currency: record.price_currency
         });
 
         return (
-          <Group justify="space-between" gap="xs" grow>
+          <Group justify='space-between' gap='xs' grow>
             <Text>{price}</Text>
-            {units && <Text size="xs">[{units}]</Text>}
+            {units && <Text size='xs'>[{units}]</Text>}
           </Group>
         );
       }
@@ -165,7 +165,7 @@ export default function SupplierPriceBreakTable({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
-        key="add-price-break"
+        key='add-price-break'
         tooltip={t`Add Price Break`}
         onClick={() => {
           newPriceBreak.open();
diff --git a/src/frontend/src/tables/sales/ReturnOrderLineItemTable.tsx b/src/frontend/src/tables/sales/ReturnOrderLineItemTable.tsx
index 7734904f6131..d770f7d10243 100644
--- a/src/frontend/src/tables/sales/ReturnOrderLineItemTable.tsx
+++ b/src/frontend/src/tables/sales/ReturnOrderLineItemTable.tsx
@@ -21,7 +21,7 @@ import useStatusCodes from '../../hooks/UseStatusCodes';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import {
   DateColumn,
   LinkColumn,
@@ -30,9 +30,9 @@ import {
   ReferenceColumn,
   StatusColumn
 } from '../ColumnRenderers';
-import { StatusFilterOptions, TableFilter } from '../Filter';
+import { StatusFilterOptions, type TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
 
 export default function ReturnOrderLineItemTable({
   orderId,
@@ -164,7 +164,7 @@ export default function ReturnOrderLineItemTable({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
-        key="add-line-item"
+        key='add-line-item'
         tooltip={t`Add Line Item`}
         hidden={!user.hasAddRole(UserRoles.return_order)}
         onClick={() => {
@@ -172,7 +172,7 @@ export default function ReturnOrderLineItemTable({
         }}
       />,
       <ActionButton
-        key="receive-items"
+        key='receive-items'
         tooltip={t`Receive selected items`}
         icon={<IconSquareArrowRight />}
         hidden={!inProgress || !user.hasChangeRole(UserRoles.return_order)}
diff --git a/src/frontend/src/tables/sales/ReturnOrderTable.tsx b/src/frontend/src/tables/sales/ReturnOrderTable.tsx
index f399c5b26298..8c62811ba9b4 100644
--- a/src/frontend/src/tables/sales/ReturnOrderTable.tsx
+++ b/src/frontend/src/tables/sales/ReturnOrderTable.tsx
@@ -32,7 +32,7 @@ import {
   OutstandingFilter,
   OverdueFilter,
   StatusFilterOptions,
-  TableFilter
+  type TableFilter
 } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
 
@@ -50,7 +50,7 @@ export function ReturnOrderTable({
   const responsibleFilters = useOwnerFilters();
 
   const tableFilters: TableFilter[] = useMemo(() => {
-    let filters: TableFilter[] = [
+    const filters: TableFilter[] = [
       {
         name: 'status',
         label: t`Status`,
@@ -96,8 +96,8 @@ export function ReturnOrderTable({
         accessor: 'customer__name',
         title: t`Customer`,
         sortable: true,
-        render: function (record: any) {
-          let customer = record.customer_detail ?? {};
+        render: (record: any) => {
+          const customer = record.customer_detail ?? {};
 
           return (
             <Thumbnail
@@ -148,7 +148,7 @@ export function ReturnOrderTable({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
-        key="add-return-order"
+        key='add-return-order'
         tooltip={t`Add Return Order`}
         onClick={() => newReturnOrder.open()}
         hidden={!user.hasAddRole(UserRoles.return_order)}
diff --git a/src/frontend/src/tables/sales/SalesOrderAllocationTable.tsx b/src/frontend/src/tables/sales/SalesOrderAllocationTable.tsx
index 999759367bd4..8758fbddc7ec 100644
--- a/src/frontend/src/tables/sales/SalesOrderAllocationTable.tsx
+++ b/src/frontend/src/tables/sales/SalesOrderAllocationTable.tsx
@@ -12,16 +12,16 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import {
   LocationColumn,
   PartColumn,
   ReferenceColumn,
   StatusColumn
 } from '../ColumnRenderers';
-import { TableFilter } from '../Filter';
+import type { TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
 
 export default function SalesOrderAllocationTable({
   partId,
@@ -51,7 +51,7 @@ export default function SalesOrderAllocationTable({
   const user = useUserState();
 
   const tableId = useMemo(() => {
-    let id: string = 'salesorderallocations';
+    let id = 'salesorderallocations';
 
     if (!!partId) {
       id += '-part';
@@ -67,7 +67,7 @@ export default function SalesOrderAllocationTable({
   const table = useTable(tableId);
 
   const tableFilters: TableFilter[] = useMemo(() => {
-    let filters: TableFilter[] = [
+    const filters: TableFilter[] = [
       {
         name: 'outstanding',
         label: t`Outstanding`,
diff --git a/src/frontend/src/tables/sales/SalesOrderLineItemTable.tsx b/src/frontend/src/tables/sales/SalesOrderLineItemTable.tsx
index bfd4d1a96c20..2fb3cda56be3 100644
--- a/src/frontend/src/tables/sales/SalesOrderLineItemTable.tsx
+++ b/src/frontend/src/tables/sales/SalesOrderLineItemTable.tsx
@@ -7,8 +7,8 @@ import {
   IconSquareArrowRight,
   IconTools
 } from '@tabler/icons-react';
-import { DataTableRowExpansionProps } from 'mantine-datatable';
-import { ReactNode, useCallback, useMemo, useState } from 'react';
+import type { DataTableRowExpansionProps } from 'mantine-datatable';
+import { type ReactNode, useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { ActionButton } from '../../components/buttons/ActionButton';
@@ -33,12 +33,12 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { DateColumn, LinkColumn, PartColumn } from '../ColumnRenderers';
-import { TableFilter } from '../Filter';
+import type { TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
 import {
-  RowAction,
+  type RowAction,
   RowDeleteAction,
   RowDuplicateAction,
   RowEditAction,
@@ -71,7 +71,7 @@ export default function SalesOrderLineItemTable({
         switchable: false,
         render: (record: any) => {
           return (
-            <Group wrap="nowrap">
+            <Group wrap='nowrap'>
               <RowExpansionIcon
                 enabled={record.allocated}
                 expanded={table.isRowExpanded(record.pk)}
@@ -126,19 +126,19 @@ export default function SalesOrderLineItemTable({
         accessor: 'stock',
         title: t`Available Stock`,
         render: (record: any) => {
-          let part_stock = record?.available_stock ?? 0;
-          let variant_stock = record?.available_variant_stock ?? 0;
-          let available = part_stock + variant_stock;
+          const part_stock = record?.available_stock ?? 0;
+          const variant_stock = record?.available_variant_stock ?? 0;
+          const available = part_stock + variant_stock;
 
-          let required = Math.max(
+          const required = Math.max(
             record.quantity - record.allocated - record.shipped,
             0
           );
 
           let color: string | undefined = undefined;
-          let text: string = `${available}`;
+          let text = `${available}`;
 
-          let extra: ReactNode[] = [];
+          const extra: ReactNode[] = [];
 
           if (available <= 0) {
             color = 'red';
@@ -148,12 +148,12 @@ export default function SalesOrderLineItemTable({
           }
 
           if (variant_stock > 0) {
-            extra.push(<Text size="sm">{t`Includes variant stock`}</Text>);
+            extra.push(<Text size='sm'>{t`Includes variant stock`}</Text>);
           }
 
           if (record.building > 0) {
             extra.push(
-              <Text size="sm">
+              <Text size='sm'>
                 {t`In production`}: {record.building}
               </Text>
             );
@@ -161,7 +161,7 @@ export default function SalesOrderLineItemTable({
 
           if (record.on_order > 0) {
             extra.push(
-              <Text size="sm">
+              <Text size='sm'>
                 {t`On order`}: {record.on_order}
               </Text>
             );
@@ -303,7 +303,7 @@ export default function SalesOrderLineItemTable({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
-        key="add-line-item"
+        key='add-line-item'
         tooltip={t`Add Line Item`}
         onClick={() => {
           setInitialData({
@@ -314,11 +314,11 @@ export default function SalesOrderLineItemTable({
         hidden={!editable || !user.hasAddRole(UserRoles.sales_order)}
       />,
       <ActionButton
-        key="allocate-stock"
+        key='allocate-stock'
         tooltip={t`Allocate Stock`}
         icon={<IconArrowRight />}
         disabled={!table.hasSelectedRecords}
-        color="green"
+        color='green'
         onClick={() => {
           setSelectedItems(
             table.selectedRecords.filter((r) => r.allocated < r.quantity)
diff --git a/src/frontend/src/tables/sales/SalesOrderShipmentTable.tsx b/src/frontend/src/tables/sales/SalesOrderShipmentTable.tsx
index 66aa47f97d9f..d9e3de429a41 100644
--- a/src/frontend/src/tables/sales/SalesOrderShipmentTable.tsx
+++ b/src/frontend/src/tables/sales/SalesOrderShipmentTable.tsx
@@ -20,12 +20,12 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { DateColumn, LinkColumn } from '../ColumnRenderers';
-import { TableFilter } from '../Filter';
+import type { TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
 import {
-  RowAction,
+  type RowAction,
   RowCancelAction,
   RowEditAction,
   RowViewAction
@@ -172,7 +172,7 @@ export default function SalesOrderShipmentTable({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
-        key="add-shipment"
+        key='add-shipment'
         tooltip={t`Add shipment`}
         hidden={!user.hasAddRole(UserRoles.sales_order)}
         onClick={() => {
diff --git a/src/frontend/src/tables/sales/SalesOrderTable.tsx b/src/frontend/src/tables/sales/SalesOrderTable.tsx
index cfbf00997227..220eadb9a987 100644
--- a/src/frontend/src/tables/sales/SalesOrderTable.tsx
+++ b/src/frontend/src/tables/sales/SalesOrderTable.tsx
@@ -33,7 +33,7 @@ import {
   OutstandingFilter,
   OverdueFilter,
   StatusFilterOptions,
-  TableFilter
+  type TableFilter
 } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
 
@@ -51,7 +51,7 @@ export function SalesOrderTable({
   const responsibleFilters = useOwnerFilters();
 
   const tableFilters: TableFilter[] = useMemo(() => {
-    let filters: TableFilter[] = [
+    const filters: TableFilter[] = [
       {
         name: 'status',
         label: t`Status`,
@@ -106,7 +106,7 @@ export function SalesOrderTable({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
-        key="add-sales-order"
+        key='add-sales-order'
         tooltip={t`Add Sales Order`}
         onClick={() => newSalesOrder.open()}
         hidden={!user.hasAddRole(UserRoles.sales_order)}
@@ -121,8 +121,8 @@ export function SalesOrderTable({
         accessor: 'customer__name',
         title: t`Customer`,
         sortable: true,
-        render: function (record: any) {
-          let customer = record.customer_detail ?? {};
+        render: (record: any) => {
+          const customer = record.customer_detail ?? {};
 
           return (
             <Thumbnail
diff --git a/src/frontend/src/tables/settings/BarcodeScanHistoryTable.tsx b/src/frontend/src/tables/settings/BarcodeScanHistoryTable.tsx
index c9999b520783..be8c1916273c 100644
--- a/src/frontend/src/tables/settings/BarcodeScanHistoryTable.tsx
+++ b/src/frontend/src/tables/settings/BarcodeScanHistoryTable.tsx
@@ -5,7 +5,7 @@ import {
   Divider,
   Drawer,
   Group,
-  MantineStyleProp,
+  type MantineStyleProp,
   Stack,
   Table,
   Text
@@ -27,8 +27,8 @@ import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useGlobalSettingsState } from '../../states/SettingsState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
-import { TableFilter } from '../Filter';
+import type { TableColumn } from '../Column';
+import type { TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
 import { RowDeleteAction } from '../RowActions';
 
@@ -52,24 +52,24 @@ function BarcodeScanDetail({ scan }: { scan: any }) {
 
   return (
     <>
-      <Stack gap="xs">
+      <Stack gap='xs'>
         <Divider />
         <Table>
           <Table.Tbody>
             <Table.Tr>
               <Table.Td colSpan={2}>
-                <StylishText size="sm">{t`Barcode Information`}</StylishText>
+                <StylishText size='sm'>{t`Barcode Information`}</StylishText>
               </Table.Td>
             </Table.Tr>
             <Table.Tr>
               <Table.Th>{t`Barcode`}</Table.Th>
               <Table.Td>
-                <Text size="sm" style={dataStyle}>
+                <Text size='sm' style={dataStyle}>
                   {scan.data}
                 </Text>
               </Table.Td>
               <Table.Td>
-                <CopyButton value={scan.data} size="xs" />
+                <CopyButton value={scan.data} size='xs' />
               </Table.Td>
             </Table.Tr>
             <Table.Tr>
@@ -95,7 +95,7 @@ function BarcodeScanDetail({ scan }: { scan: any }) {
             {hasContextData && (
               <Table.Tr>
                 <Table.Td colSpan={2}>
-                  <StylishText size="sm">{t`Context`}</StylishText>
+                  <StylishText size='sm'>{t`Context`}</StylishText>
                 </Table.Td>
               </Table.Tr>
             )}
@@ -104,19 +104,19 @@ function BarcodeScanDetail({ scan }: { scan: any }) {
                 <Table.Tr key={key}>
                   <Table.Th>{key}</Table.Th>
                   <Table.Td>
-                    <Text size="sm" style={dataStyle}>
+                    <Text size='sm' style={dataStyle}>
                       {scan.context[key]}
                     </Text>
                   </Table.Td>
                   <Table.Td>
-                    <CopyButton value={scan.context[key]} size="xs" />
+                    <CopyButton value={scan.context[key]} size='xs' />
                   </Table.Td>
                 </Table.Tr>
               ))}
             {hasResponseData && (
               <Table.Tr>
                 <Table.Td colSpan={2}>
-                  <StylishText size="sm">{t`Response`}</StylishText>
+                  <StylishText size='sm'>{t`Response`}</StylishText>
                 </Table.Td>
               </Table.Tr>
             )}
@@ -125,12 +125,12 @@ function BarcodeScanDetail({ scan }: { scan: any }) {
                 <Table.Tr key={key}>
                   <Table.Th>{key}</Table.Th>
                   <Table.Td>
-                    <Text size="sm" style={dataStyle}>
+                    <Text size='sm' style={dataStyle}>
                       {scan.response[key]}
                     </Text>
                   </Table.Td>
                   <Table.Td>
-                    <CopyButton value={scan.response[key]} size="xs" />
+                    <CopyButton value={scan.response[key]} size='xs' />
                   </Table.Td>
                 </Table.Tr>
               ))}
@@ -162,10 +162,10 @@ export default function BarcodeScanHistoryTable() {
         switchable: false,
         render: (record: any) => {
           return (
-            <Group justify="space-between" wrap="nowrap">
+            <Group justify='space-between' wrap='nowrap'>
               <Text>{record.timestamp}</Text>
               {record.user_detail && (
-                <Badge size="xs">{record.user_detail.username}</Badge>
+                <Badge size='xs'>{record.user_detail.username}</Badge>
               )}
             </Group>
           );
@@ -178,7 +178,7 @@ export default function BarcodeScanHistoryTable() {
         render: (record: any) => {
           return (
             <Text
-              size="xs"
+              size='xs'
               style={{
                 textWrap: 'wrap',
                 lineBreak: 'auto',
@@ -253,17 +253,17 @@ export default function BarcodeScanHistoryTable() {
       {deleteResult.modal}
       <Drawer
         opened={opened}
-        size="xl"
-        position="right"
+        size='xl'
+        position='right'
         title={<StylishText>{t`Barcode Scan Details`}</StylishText>}
         onClose={close}
       >
         <BarcodeScanDetail scan={selectedResult} />
       </Drawer>
-      <Stack gap="xs">
+      <Stack gap='xs'>
         {!globalSettings.isSet('BARCODE_STORE_RESULTS') && (
           <Alert
-            color="red"
+            color='red'
             icon={<IconExclamationCircle />}
             title={t`Logging Disabled`}
           >
diff --git a/src/frontend/src/tables/settings/CustomStateTable.tsx b/src/frontend/src/tables/settings/CustomStateTable.tsx
index b5ab497cc252..594086569ccf 100644
--- a/src/frontend/src/tables/settings/CustomStateTable.tsx
+++ b/src/frontend/src/tables/settings/CustomStateTable.tsx
@@ -13,9 +13,9 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
 
 /**
  * Table for displaying list of custom states
@@ -111,6 +111,7 @@ export default function CustomStateTable() {
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
+        key={'add'}
         onClick={() => newCustomState.open()}
         tooltip={t`Add State`}
       />
diff --git a/src/frontend/src/tables/settings/CustomUnitsTable.tsx b/src/frontend/src/tables/settings/CustomUnitsTable.tsx
index 4da699989eee..bfbb8ddabd6b 100644
--- a/src/frontend/src/tables/settings/CustomUnitsTable.tsx
+++ b/src/frontend/src/tables/settings/CustomUnitsTable.tsx
@@ -13,9 +13,9 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
 
 /**
  * Table for displaying list of custom physical units
@@ -92,7 +92,7 @@ export default function CustomUnitsTable() {
   );
 
   const tableActions = useMemo(() => {
-    let actions = [];
+    const actions = [];
 
     actions.push(
       <AddItemButton
diff --git a/src/frontend/src/tables/settings/ErrorTable.tsx b/src/frontend/src/tables/settings/ErrorTable.tsx
index 5d8accc4f8c2..7846478b4a96 100644
--- a/src/frontend/src/tables/settings/ErrorTable.tsx
+++ b/src/frontend/src/tables/settings/ErrorTable.tsx
@@ -11,9 +11,9 @@ import { useInstance } from '../../hooks/UseInstance';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowDeleteAction } from '../RowActions';
+import { type RowAction, RowDeleteAction } from '../RowActions';
 
 function ErrorDetail({ errorId }: { errorId?: number }) {
   const { id } = useParams();
@@ -43,15 +43,15 @@ function ErrorDetail({ errorId }: { errorId?: number }) {
   }
 
   return (
-    <Stack gap="xs">
+    <Stack gap='xs'>
       <Table>
         <Table.Tbody>
           <Table.Tr>
             <Table.Th>{t`Message`}</Table.Th>
             <Table.Td>{error.info}</Table.Td>
             <Table.Td>
-              <Group justify="right">
-                <CopyButton value={error.info} size="sm" />
+              <Group justify='right'>
+                <CopyButton value={error.info} size='sm' />
               </Group>
             </Table.Td>
           </Table.Tr>
@@ -66,8 +66,8 @@ function ErrorDetail({ errorId }: { errorId?: number }) {
           <Table.Tr>
             <Table.Th>{t`Traceback`}</Table.Th>
             <Table.Td colSpan={2}>
-              <Group justify="right">
-                <CopyButton value={error.data} size="sm" />
+              <Group justify='right'>
+                <CopyButton value={error.data} size='sm' />
               </Group>
             </Table.Td>
           </Table.Tr>
@@ -75,7 +75,7 @@ function ErrorDetail({ errorId }: { errorId?: number }) {
             <Table.Td colSpan={2}>
               <Stack gap={3}>
                 {error.data?.split('\n').map((line: string, index: number) => (
-                  <Text size="xs" key={`error-line-${index}`}>
+                  <Text size='xs' key={`error-line-${index}`}>
                     {line}
                   </Text>
                 ))}
@@ -122,7 +122,7 @@ export default function ErrorReportTable() {
     pk: selectedError.pk,
     title: t`Delete Error Report`,
     preFormContent: (
-      <Text c="red">{t`Are you sure you want to delete this error report?`}</Text>
+      <Text c='red'>{t`Are you sure you want to delete this error report?`}</Text>
     ),
     successMessage: t`Error report deleted`,
     table: table
diff --git a/src/frontend/src/tables/settings/FailedTasksTable.tsx b/src/frontend/src/tables/settings/FailedTasksTable.tsx
index 3fba322a2ee1..ecda2aef0ebd 100644
--- a/src/frontend/src/tables/settings/FailedTasksTable.tsx
+++ b/src/frontend/src/tables/settings/FailedTasksTable.tsx
@@ -10,7 +10,7 @@ import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { InvenTreeTable } from '../InvenTreeTable';
 
 export default function FailedTasksTable({
@@ -60,14 +60,14 @@ export default function FailedTasksTable({
     <>
       <Drawer
         opened={opened}
-        size="xl"
-        position="right"
+        size='xl'
+        position='right'
         title={<StylishText>{t`Error Details`}</StylishText>}
         onClose={close}
       >
         {error.split('\n').map((line: string, index: number) => {
           return (
-            <Text key={`error-${index}`} size="sm">
+            <Text key={`error-${index}`} size='sm'>
               {line}
             </Text>
           );
diff --git a/src/frontend/src/tables/settings/GroupTable.tsx b/src/frontend/src/tables/settings/GroupTable.tsx
index dfaa36ac5e9b..9f2dd3c25fd1 100644
--- a/src/frontend/src/tables/settings/GroupTable.tsx
+++ b/src/frontend/src/tables/settings/GroupTable.tsx
@@ -26,9 +26,9 @@ import { useInstance } from '../../hooks/UseInstance';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
 
 export interface GroupDetailI {
   pk: number;
@@ -111,7 +111,7 @@ export function GroupDrawer({
         }}
         id={`group-detail-drawer-${id}`}
       />
-      <Group justify="space-between">
+      <Group justify='space-between'>
         <Title order={5}>
           <Trans>Permission set</Trans>
         </Title>
@@ -188,7 +188,7 @@ export function GroupTable() {
   });
 
   const tableActions = useMemo(() => {
-    let actions = [];
+    const actions = [];
 
     actions.push(
       <AddItemButton
diff --git a/src/frontend/src/tables/settings/ImportSessionTable.tsx b/src/frontend/src/tables/settings/ImportSessionTable.tsx
index 1d3511c86f04..87deee0a96a7 100644
--- a/src/frontend/src/tables/settings/ImportSessionTable.tsx
+++ b/src/frontend/src/tables/settings/ImportSessionTable.tsx
@@ -16,11 +16,11 @@ import {
 } from '../../hooks/UseForm';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { DateColumn, StatusColumn } from '../ColumnRenderers';
-import { StatusFilterOptions, TableFilter } from '../Filter';
+import { StatusFilterOptions, type TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowDeleteAction } from '../RowActions';
+import { type RowAction, RowDeleteAction } from '../RowActions';
 
 export default function ImportSesssionTable() {
   const table = useTable('importsession');
@@ -127,7 +127,7 @@ export default function ImportSesssionTable() {
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
-        key="create-import-session"
+        key='create-import-session'
         tooltip={t`Create Import Session`}
         onClick={() => newImportSession.open()}
       />
diff --git a/src/frontend/src/tables/settings/PendingTasksTable.tsx b/src/frontend/src/tables/settings/PendingTasksTable.tsx
index b91e7167af5e..15b1f2a39fe0 100644
--- a/src/frontend/src/tables/settings/PendingTasksTable.tsx
+++ b/src/frontend/src/tables/settings/PendingTasksTable.tsx
@@ -5,7 +5,7 @@ import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { InvenTreeTable } from '../InvenTreeTable';
 
 export default function PendingTasksTable({
diff --git a/src/frontend/src/tables/settings/ProjectCodeTable.tsx b/src/frontend/src/tables/settings/ProjectCodeTable.tsx
index b1d9b1694d50..c752ad0628a0 100644
--- a/src/frontend/src/tables/settings/ProjectCodeTable.tsx
+++ b/src/frontend/src/tables/settings/ProjectCodeTable.tsx
@@ -13,10 +13,10 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { DescriptionColumn, ResponsibleColumn } from '../ColumnRenderers';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
 
 /**
  * Table for displaying list of project codes
@@ -88,6 +88,7 @@ export default function ProjectCodeTable() {
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
+        key='add'
         onClick={() => newProjectCode.open()}
         tooltip={t`Add project code`}
       />
diff --git a/src/frontend/src/tables/settings/ScheduledTasksTable.tsx b/src/frontend/src/tables/settings/ScheduledTasksTable.tsx
index 9859706dda60..38fd4e99a0d1 100644
--- a/src/frontend/src/tables/settings/ScheduledTasksTable.tsx
+++ b/src/frontend/src/tables/settings/ScheduledTasksTable.tsx
@@ -6,7 +6,7 @@ import { useMemo } from 'react';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { InvenTreeTable } from '../InvenTreeTable';
 
 export default function ScheduledTasksTable() {
@@ -31,12 +31,12 @@ export default function ScheduledTasksTable() {
           }
 
           return (
-            <Group justify="space-between">
+            <Group justify='space-between'>
               <Text>{record.last_run}</Text>
               {record.success ? (
-                <IconCircleCheck color="green" />
+                <IconCircleCheck color='green' />
               ) : (
-                <IconCircleX color="red" />
+                <IconCircleX color='red' />
               )}
             </Group>
           );
diff --git a/src/frontend/src/tables/settings/StocktakeReportTable.tsx b/src/frontend/src/tables/settings/StocktakeReportTable.tsx
index ac8a67307e98..ae0678b059b2 100644
--- a/src/frontend/src/tables/settings/StocktakeReportTable.tsx
+++ b/src/frontend/src/tables/settings/StocktakeReportTable.tsx
@@ -2,7 +2,7 @@ import { t } from '@lingui/macro';
 import { useCallback, useMemo, useState } from 'react';
 
 import { AddItemButton } from '../../components/buttons/AddItemButton';
-import { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
+import type { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
 import { AttachmentLink } from '../../components/items/AttachmentLink';
 import { RenderUser } from '../../components/render/User';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
@@ -13,10 +13,10 @@ import {
 } from '../../hooks/UseForm';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { DateColumn } from '../ColumnRenderers';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowDeleteAction } from '../RowActions';
+import { type RowAction, RowDeleteAction } from '../RowActions';
 
 export default function StocktakeReportTable() {
   const table = useTable('stocktake-report');
diff --git a/src/frontend/src/tables/settings/TemplateTable.tsx b/src/frontend/src/tables/settings/TemplateTable.tsx
index 3db65d0ecbb0..81763823bfce 100644
--- a/src/frontend/src/tables/settings/TemplateTable.tsx
+++ b/src/frontend/src/tables/settings/TemplateTable.tsx
@@ -1,7 +1,7 @@
 import { Trans, t } from '@lingui/macro';
 import { Group, LoadingOverlay, Stack, Text, Title } from '@mantine/core';
 import { IconFileCode } from '@tabler/icons-react';
-import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
+import { type ReactNode, useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { AddItemButton } from '../../components/buttons/AddItemButton';
@@ -10,23 +10,23 @@ import {
   PdfPreview,
   TemplateEditor
 } from '../../components/editors/TemplateEditor';
-import {
+import type {
   Editor,
   PreviewArea
 } from '../../components/editors/TemplateEditor/TemplateEditor';
-import { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
+import type { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
 import { AttachmentLink } from '../../components/items/AttachmentLink';
 import { DetailDrawer } from '../../components/nav/DetailDrawer';
 import {
   getPluginTemplateEditor,
   getPluginTemplatePreview
 } from '../../components/plugins/PluginUIFeature';
-import {
+import type {
   TemplateEditorUIFeature,
   TemplatePreviewUIFeature
 } from '../../components/plugins/PluginUIFeatureTypes';
-import { ApiEndpoints } from '../../enums/ApiEndpoints';
-import { ModelType } from '../../enums/ModelType';
+import type { ApiEndpoints } from '../../enums/ApiEndpoints';
+import type { ModelType } from '../../enums/ModelType';
 import { identifierString } from '../../functions/conversion';
 import { GetIcon } from '../../functions/icons';
 import { notYetImplemented } from '../../functions/notifications';
@@ -41,12 +41,12 @@ import { usePluginUIFeature } from '../../hooks/UsePluginUIFeature';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { BooleanColumn } from '../ColumnRenderers';
-import { TableFilter } from '../Filter';
+import type { TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
 import {
-  RowAction,
+  type RowAction,
   RowDeleteAction,
   RowDuplicateAction,
   RowEditAction
@@ -144,7 +144,7 @@ export function TemplateDrawer({
             name: preview.options.title,
             icon: GetIcon(preview.options.icon || 'plugin'),
             component: getPluginTemplatePreview(preview.func, template)
-          } as PreviewArea)
+          }) as PreviewArea
       ) || [])
     );
 
@@ -168,8 +168,8 @@ export function TemplateDrawer({
   }
 
   return (
-    <Stack gap="xs" style={{ display: 'flex', flex: '1' }}>
-      <Group justify="left">
+    <Stack gap='xs' style={{ display: 'flex', flex: '1' }}>
+      <Group justify='left'>
         <Title order={4}>{template?.name}</Title>
       </Group>
 
@@ -336,7 +336,7 @@ export function TemplateTable({
   const tableActions: ReactNode[] = useMemo(() => {
     return [
       <AddItemButton
-        key="add-template"
+        key='add-template'
         onClick={() => newTemplate.open()}
         tooltip={t`Add template`}
         hidden={!user.hasAddPermission(templateProps.modelType)}
diff --git a/src/frontend/src/tables/settings/UserTable.tsx b/src/frontend/src/tables/settings/UserTable.tsx
index 3d7891a913a6..01b6eeb32af0 100644
--- a/src/frontend/src/tables/settings/UserTable.tsx
+++ b/src/frontend/src/tables/settings/UserTable.tsx
@@ -28,12 +28,12 @@ import { useInstance } from '../../hooks/UseInstance';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { BooleanColumn } from '../ColumnRenderers';
-import { TableFilter } from '../Filter';
+import type { TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
-import { GroupDetailI } from './GroupTable';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+import type { GroupDetailI } from './GroupTable';
 
 export interface UserDetailI {
   pk: number;
@@ -66,7 +66,7 @@ export function UserDrawer({
 
   const currentUserPk = useUserState((s) => s.user?.pk);
   const isCurrentUser = useMemo(
-    () => currentUserPk === parseInt(id, 10),
+    () => currentUserPk === Number.parseInt(id, 10),
     [currentUserPk, id]
   );
 
@@ -116,7 +116,7 @@ export function UserDrawer({
           postFormContent: isCurrentUser ? (
             <Alert
               title={<Trans>Info</Trans>}
-              color="blue"
+              color='blue'
               icon={<IconInfoCircle />}
             >
               <Trans>
@@ -136,7 +136,7 @@ export function UserDrawer({
         <Title order={5}>
           <Trans>Groups</Trans>
         </Title>
-        <Spoiler maxHeight={125} showLabel="Show More" hideLabel="Show Less">
+        <Spoiler maxHeight={125} showLabel='Show More' hideLabel='Show Less'>
           <Text ml={'md'}>
             {userDetail?.groups && userDetail?.groups?.length > 0 ? (
               <List>
@@ -262,11 +262,11 @@ export function UserTable() {
   });
 
   const tableActions = useMemo(() => {
-    let actions = [];
+    const actions = [];
 
     actions.push(
       <AddItemButton
-        key="add-user"
+        key='add-user'
         onClick={newUser.open}
         tooltip={t`Add user`}
         hidden={!user.hasAddPermission(ModelType.user)}
diff --git a/src/frontend/src/tables/stock/InstalledItemsTable.tsx b/src/frontend/src/tables/stock/InstalledItemsTable.tsx
index 694d16acfba5..73e21fcd57a2 100644
--- a/src/frontend/src/tables/stock/InstalledItemsTable.tsx
+++ b/src/frontend/src/tables/stock/InstalledItemsTable.tsx
@@ -15,7 +15,7 @@ import { useCreateApiFormModal } from '../../hooks/UseForm';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { PartColumn, StatusColumn } from '../ColumnRenderers';
 import { InvenTreeTable } from '../InvenTreeTable';
 
@@ -87,6 +87,7 @@ export default function InstalledItemsTable({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
+        key='install'
         tooltip={t`Install Item`}
         onClick={() => {
           installItem.open();
diff --git a/src/frontend/src/tables/stock/LocationTypesTable.tsx b/src/frontend/src/tables/stock/LocationTypesTable.tsx
index 93e0526f0f4e..8eaa37942108 100644
--- a/src/frontend/src/tables/stock/LocationTypesTable.tsx
+++ b/src/frontend/src/tables/stock/LocationTypesTable.tsx
@@ -2,7 +2,7 @@ import { t } from '@lingui/macro';
 import { useCallback, useMemo, useState } from 'react';
 
 import { AddItemButton } from '../../components/buttons/AddItemButton';
-import { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
+import type { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
 import { ApiIcon } from '../../components/items/ApiIcon';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { UserRoles } from '../../enums/Roles';
@@ -14,9 +14,9 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
+import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
 
 export default function LocationTypesTable() {
   const table = useTable('location-types');
@@ -105,7 +105,7 @@ export default function LocationTypesTable() {
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
-        key="add-location-type"
+        key='add-location-type'
         tooltip={t`Add Location Type`}
         onClick={() => newLocationType.open()}
         hidden={!user.hasAddRole(UserRoles.stock_location)}
diff --git a/src/frontend/src/tables/stock/StockItemTable.tsx b/src/frontend/src/tables/stock/StockItemTable.tsx
index 0ec87d075fcb..276978cac06c 100644
--- a/src/frontend/src/tables/stock/StockItemTable.tsx
+++ b/src/frontend/src/tables/stock/StockItemTable.tsx
@@ -1,6 +1,6 @@
 import { t } from '@lingui/macro';
 import { Group, Text } from '@mantine/core';
-import { ReactNode, useMemo } from 'react';
+import { type ReactNode, useMemo } from 'react';
 
 import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { ActionDropdown } from '../../components/items/ActionDropdown';
@@ -9,7 +9,7 @@ import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
 import { UserRoles } from '../../enums/Roles';
 import {
-  StockOperationProps,
+  type StockOperationProps,
   useAddStockItem,
   useAssignStockItem,
   useChangeStockStatus,
@@ -27,7 +27,7 @@ import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useGlobalSettingsState } from '../../states/SettingsState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import {
   DateColumn,
   DescriptionColumn,
@@ -35,7 +35,7 @@ import {
   PartColumn,
   StatusColumn
 } from '../ColumnRenderers';
-import { StatusFilterOptions, TableFilter } from '../Filter';
+import { StatusFilterOptions, type TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
 import { TableHoverCard } from '../TableHoverCard';
 
@@ -69,12 +69,12 @@ function stockItemTableColumns(): TableColumn[] {
       title: t`Stock`,
       render: (record: any) => {
         // TODO: Push this out into a custom renderer
-        let quantity = record?.quantity ?? 0;
-        let allocated = record?.allocated ?? 0;
-        let available = quantity - allocated;
+        const quantity = record?.quantity ?? 0;
+        const allocated = record?.allocated ?? 0;
+        const available = quantity - allocated;
         let text = quantity;
-        let part = record?.part_detail ?? {};
-        let extra: ReactNode[] = [];
+        const part = record?.part_detail ?? {};
+        const extra: ReactNode[] = [];
         let color = undefined;
 
         if (record.serial && quantity == 1) {
@@ -85,43 +85,43 @@ function stockItemTableColumns(): TableColumn[] {
           color = 'blue';
           extra.push(
             <Text
-              key="production"
-              size="sm"
+              key='production'
+              size='sm'
             >{t`This stock item is in production`}</Text>
           );
         } else if (record.sales_order) {
           extra.push(
             <Text
-              key="sales-order"
-              size="sm"
+              key='sales-order'
+              size='sm'
             >{t`This stock item has been assigned to a sales order`}</Text>
           );
         } else if (record.customer) {
           extra.push(
             <Text
-              key="customer"
-              size="sm"
+              key='customer'
+              size='sm'
             >{t`This stock item has been assigned to a customer`}</Text>
           );
         } else if (record.belongs_to) {
           extra.push(
             <Text
-              key="belongs-to"
-              size="sm"
+              key='belongs-to'
+              size='sm'
             >{t`This stock item is installed in another stock item`}</Text>
           );
         } else if (record.consumed_by) {
           extra.push(
             <Text
-              key="consumed-by"
-              size="sm"
+              key='consumed-by'
+              size='sm'
             >{t`This stock item has been consumed by a build order`}</Text>
           );
         } else if (!record.in_stock) {
           extra.push(
             <Text
-              key="unavailable"
-              size="sm"
+              key='unavailable'
+              size='sm'
             >{t`This stock item is unavailable`}</Text>
           );
         }
@@ -129,13 +129,13 @@ function stockItemTableColumns(): TableColumn[] {
         if (record.expired) {
           extra.push(
             <Text
-              key="expired"
-              size="sm"
+              key='expired'
+              size='sm'
             >{t`This stock item has expired`}</Text>
           );
         } else if (record.stale) {
           extra.push(
-            <Text key="stale" size="sm">{t`This stock item is stale`}</Text>
+            <Text key='stale' size='sm'>{t`This stock item is stale`}</Text>
           );
         }
 
@@ -145,15 +145,15 @@ function stockItemTableColumns(): TableColumn[] {
               color = 'orange';
               extra.push(
                 <Text
-                  key="fully-allocated"
-                  size="sm"
+                  key='fully-allocated'
+                  size='sm'
                 >{t`This stock item is fully allocated`}</Text>
               );
             } else {
               extra.push(
                 <Text
-                  key="partially-allocated"
-                  size="sm"
+                  key='partially-allocated'
+                  size='sm'
                 >{t`This stock item is partially allocated`}</Text>
               );
             }
@@ -162,16 +162,16 @@ function stockItemTableColumns(): TableColumn[] {
           if (available != quantity) {
             if (available > 0) {
               extra.push(
-                <Text key="available" size="sm" c="orange">
-                  {t`Available` + `: ${available}`}
+                <Text key='available' size='sm' c='orange'>
+                  {`${t`Available`}: ${available}`}
                 </Text>
               );
             } else {
               extra.push(
                 <Text
-                  key="no-stock"
-                  size="sm"
-                  c="red"
+                  key='no-stock'
+                  size='sm'
+                  c='red'
                 >{t`No stock available`}</Text>
               );
             }
@@ -180,8 +180,8 @@ function stockItemTableColumns(): TableColumn[] {
           if (quantity <= 0) {
             extra.push(
               <Text
-                key="depleted"
-                size="sm"
+                key='depleted'
+                size='sm'
               >{t`This stock item has been depleted`}</Text>
             );
           }
@@ -194,10 +194,10 @@ function stockItemTableColumns(): TableColumn[] {
         return (
           <TableHoverCard
             value={
-              <Group gap="xs" justify="left" wrap="nowrap">
+              <Group gap='xs' justify='left' wrap='nowrap'>
                 <Text c={color}>{text}</Text>
                 {part.units && (
-                  <Text size="xs" c={color}>
+                  <Text size='xs' c={color}>
                     [{part.units}]
                   </Text>
                 )}
@@ -249,11 +249,11 @@ function stockItemTableColumns(): TableColumn[] {
       title: t`Stock Value`,
       sortable: false,
       render: (record: any) => {
-        let min_price =
+        const min_price =
           record.purchase_price || record.part_detail?.pricing_min;
-        let max_price =
+        const max_price =
           record.purchase_price || record.part_detail?.pricing_max;
-        let currency = record.purchase_price_currency || undefined;
+        const currency = record.purchase_price_currency || undefined;
 
         return formatPriceRange(min_price, max_price, {
           currency: currency,
@@ -397,8 +397,8 @@ export function StockItemTable({
   allowAdd?: boolean;
   tableName: string;
 }>) {
-  let tableColumns = useMemo(() => stockItemTableColumns(), []);
-  let tableFilters = useMemo(() => stockItemTableFilters(), []);
+  const tableColumns = useMemo(() => stockItemTableColumns(), []);
+  const tableFilters = useMemo(() => stockItemTableFilters(), []);
 
   const table = useTable(tableName);
   const user = useUserState();
@@ -441,21 +441,21 @@ export function StockItemTable({
   const deleteStock = useDeleteStockItem(tableActionParams);
 
   const tableActions = useMemo(() => {
-    let can_delete_stock = user.hasDeleteRole(UserRoles.stock);
-    let can_add_stock = user.hasAddRole(UserRoles.stock);
-    let can_add_stocktake = user.hasAddRole(UserRoles.stocktake);
-    let can_add_order = user.hasAddRole(UserRoles.purchase_order);
-    let can_change_order = user.hasChangeRole(UserRoles.purchase_order);
+    const can_delete_stock = user.hasDeleteRole(UserRoles.stock);
+    const can_add_stock = user.hasAddRole(UserRoles.stock);
+    const can_add_stocktake = user.hasAddRole(UserRoles.stocktake);
+    const can_add_order = user.hasAddRole(UserRoles.purchase_order);
+    const can_change_order = user.hasChangeRole(UserRoles.purchase_order);
     return [
       <ActionDropdown
-        key="stock-actions"
+        key='stock-actions'
         tooltip={t`Stock Actions`}
-        icon={<InvenTreeIcon icon="stock" />}
+        icon={<InvenTreeIcon icon='stock' />}
         disabled={table.selectedRecords.length === 0}
         actions={[
           {
             name: t`Add Stock`,
-            icon: <InvenTreeIcon icon="add" iconProps={{ color: 'green' }} />,
+            icon: <InvenTreeIcon icon='add' iconProps={{ color: 'green' }} />,
             tooltip: t`Add a new stock item`,
             disabled: !can_add_stock,
             onClick: () => {
@@ -464,7 +464,7 @@ export function StockItemTable({
           },
           {
             name: t`Remove Stock`,
-            icon: <InvenTreeIcon icon="remove" iconProps={{ color: 'red' }} />,
+            icon: <InvenTreeIcon icon='remove' iconProps={{ color: 'red' }} />,
             tooltip: t`Remove some quantity from a stock item`,
             disabled: !can_add_stock,
             onClick: () => {
@@ -474,7 +474,7 @@ export function StockItemTable({
           {
             name: t`Count Stock`,
             icon: (
-              <InvenTreeIcon icon="stocktake" iconProps={{ color: 'blue' }} />
+              <InvenTreeIcon icon='stocktake' iconProps={{ color: 'blue' }} />
             ),
             tooltip: t`Count Stock`,
             disabled: !can_add_stocktake,
@@ -485,7 +485,7 @@ export function StockItemTable({
           {
             name: t`Transfer Stock`,
             icon: (
-              <InvenTreeIcon icon="transfer" iconProps={{ color: 'blue' }} />
+              <InvenTreeIcon icon='transfer' iconProps={{ color: 'blue' }} />
             ),
             tooltip: t`Move Stock items to new locations`,
             disabled: !can_add_stock,
@@ -495,7 +495,7 @@ export function StockItemTable({
           },
           {
             name: t`Change stock status`,
-            icon: <InvenTreeIcon icon="info" iconProps={{ color: 'blue' }} />,
+            icon: <InvenTreeIcon icon='info' iconProps={{ color: 'blue' }} />,
             tooltip: t`Change the status of stock items`,
             disabled: !can_add_stock,
             onClick: () => {
@@ -504,7 +504,7 @@ export function StockItemTable({
           },
           {
             name: t`Merge stock`,
-            icon: <InvenTreeIcon icon="merge" />,
+            icon: <InvenTreeIcon icon='merge' />,
             tooltip: t`Merge stock items`,
             disabled: !can_add_stock,
             onClick: () => {
@@ -513,14 +513,14 @@ export function StockItemTable({
           },
           {
             name: t`Order stock`,
-            icon: <InvenTreeIcon icon="buy" />,
+            icon: <InvenTreeIcon icon='buy' />,
             tooltip: t`Order new stock`,
             disabled: !can_add_order || !can_change_order,
             onClick: notYetImplemented
           },
           {
             name: t`Assign to customer`,
-            icon: <InvenTreeIcon icon="customer" />,
+            icon: <InvenTreeIcon icon='customer' />,
             tooltip: t`Order new stock`,
             disabled: !can_add_stock,
             onClick: () => {
@@ -529,7 +529,7 @@ export function StockItemTable({
           },
           {
             name: t`Delete stock`,
-            icon: <InvenTreeIcon icon="delete" iconProps={{ color: 'red' }} />,
+            icon: <InvenTreeIcon icon='delete' iconProps={{ color: 'red' }} />,
             tooltip: t`Delete Stock Items`,
             disabled: !can_delete_stock,
             onClick: () => {
@@ -539,7 +539,7 @@ export function StockItemTable({
         ]}
       />,
       <AddItemButton
-        key="add-stock-item"
+        key='add-stock-item'
         hidden={!allowAdd || !user.hasAddRole(UserRoles.stock)}
         tooltip={t`Add Stock Item`}
         onClick={() => newStockItem.open()}
diff --git a/src/frontend/src/tables/stock/StockItemTestResultTable.tsx b/src/frontend/src/tables/stock/StockItemTestResultTable.tsx
index e8e371bfd662..46863385f945 100644
--- a/src/frontend/src/tables/stock/StockItemTestResultTable.tsx
+++ b/src/frontend/src/tables/stock/StockItemTestResultTable.tsx
@@ -13,7 +13,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { api } from '../../App';
 import { AddItemButton } from '../../components/buttons/AddItemButton';
 import { PassFailButton } from '../../components/buttons/YesNoButton';
-import { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
+import type { ApiFormFieldSet } from '../../components/forms/fields/ApiFormField';
 import { AttachmentLink } from '../../components/items/AttachmentLink';
 import { RenderUser } from '../../components/render/User';
 import { formatDate } from '../../defaults/formatters';
@@ -29,12 +29,12 @@ import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useGlobalSettingsState } from '../../states/SettingsState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { DateColumn, DescriptionColumn, NoteColumn } from '../ColumnRenderers';
-import { TableFilter } from '../Filter';
+import type { TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
 import {
-  RowAction,
+  type RowAction,
   RowActions,
   RowDeleteAction,
   RowEditAction
@@ -84,7 +84,7 @@ export default function StockItemTestResultTable({
   const formatRecords = useCallback(
     (records: any[]): any[] => {
       // Construct a list of test templates
-      let results = testTemplates.map((template: any) => {
+      const results = testTemplates.map((template: any) => {
         return {
           ...template,
           templateId: template.pk,
@@ -112,7 +112,7 @@ export default function StockItemTestResultTable({
         })
         .forEach((record) => {
           // Find matching template
-          let idx = results.findIndex(
+          const idx = results.findIndex(
             (r: any) => r.templateId == record.template
           );
           if (idx >= 0) {
@@ -143,7 +143,7 @@ export default function StockItemTestResultTable({
             record.stock_item != undefined && record.stock_item != itemId;
 
           return (
-            <Group justify="space-between" wrap="nowrap">
+            <Group justify='space-between' wrap='nowrap'>
               <Text
                 style={{ fontStyle: installed ? 'italic' : undefined }}
                 c={enabled ? undefined : 'red'}
@@ -151,17 +151,17 @@ export default function StockItemTestResultTable({
                 {!record.templateId && '- '}
                 {record.test_name ?? record.template_detail?.test_name}
               </Text>
-              <Group justify="right">
+              <Group justify='right'>
                 {record.results && record.results.length > 1 && (
                   <Tooltip label={t`Test Results`}>
-                    <Badge color="lightblue" variant="filled">
+                    <Badge color='lightblue' variant='filled'>
                       {record.results.length}
                     </Badge>
                   </Tooltip>
                 )}
                 {installed && (
                   <Tooltip label={t`Test result for installed stock item`}>
-                    <IconInfoCircle size={16} color="blue" />
+                    <IconInfoCircle size={16} color='blue' />
                   </Tooltip>
                 )}
               </Group>
@@ -177,7 +177,7 @@ export default function StockItemTestResultTable({
         render: (record: any) => {
           if (record.result === undefined) {
             return (
-              <Badge color="lightblue" variant="filled">{t`No Result`}</Badge>
+              <Badge color='lightblue' variant='filled'>{t`No Result`}</Badge>
             );
           } else {
             return <PassFailButton value={record.result} />;
@@ -219,7 +219,7 @@ export default function StockItemTestResultTable({
         hidden: !includeTestStation,
         render: (record: any) => {
           return (
-            <Group justify="space-between">
+            <Group justify='space-between'>
               {formatDate(record.started_datetime, {
                 showTime: true,
                 showSeconds: true
@@ -235,7 +235,7 @@ export default function StockItemTestResultTable({
         hidden: !includeTestStation,
         render: (record: any) => {
           return (
-            <Group justify="space-between">
+            <Group justify='space-between'>
               {formatDate(record.finished_datetime, {
                 showTime: true,
                 showSeconds: true
@@ -399,7 +399,7 @@ export default function StockItemTestResultTable({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
-        key="add-test-result"
+        key='add-test-result'
         tooltip={t`Add Test Result`}
         onClick={() => {
           setSelectedTemplate(undefined);
diff --git a/src/frontend/src/tables/stock/StockLocationTable.tsx b/src/frontend/src/tables/stock/StockLocationTable.tsx
index 651ae3061127..9f569b3a7380 100644
--- a/src/frontend/src/tables/stock/StockLocationTable.tsx
+++ b/src/frontend/src/tables/stock/StockLocationTable.tsx
@@ -16,11 +16,11 @@ import {
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { BooleanColumn, DescriptionColumn } from '../ColumnRenderers';
-import { TableFilter } from '../Filter';
+import type { TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
-import { RowAction, RowEditAction } from '../RowActions';
+import { type RowAction, RowEditAction } from '../RowActions';
 
 /**
  * Stock location table
@@ -73,7 +73,7 @@ export function StockLocationTable({ parentId }: Readonly<{ parentId?: any }>) {
         accessor: 'name',
         switchable: false,
         render: (record: any) => (
-          <Group gap="xs">
+          <Group gap='xs'>
             {record.icon && <ApiIcon name={record.icon} />}
             {record.name}
           </Group>
@@ -126,11 +126,11 @@ export function StockLocationTable({ parentId }: Readonly<{ parentId?: any }>) {
   });
 
   const tableActions = useMemo(() => {
-    let can_add = user.hasAddRole(UserRoles.stock_location);
+    const can_add = user.hasAddRole(UserRoles.stock_location);
 
     return [
       <AddItemButton
-        key="add-stock-location"
+        key='add-stock-location'
         tooltip={t`Add Stock Location`}
         onClick={() => newLocation.open()}
         hidden={!can_add}
@@ -140,7 +140,7 @@ export function StockLocationTable({ parentId }: Readonly<{ parentId?: any }>) {
 
   const rowActions = useCallback(
     (record: any): RowAction[] => {
-      let can_edit = user.hasChangeRole(UserRoles.stock_location);
+      const can_edit = user.hasChangeRole(UserRoles.stock_location);
 
       return [
         RowEditAction({
diff --git a/src/frontend/src/tables/stock/StockTrackingTable.tsx b/src/frontend/src/tables/stock/StockTrackingTable.tsx
index 07df6e2236df..f42c8a3bd191 100644
--- a/src/frontend/src/tables/stock/StockTrackingTable.tsx
+++ b/src/frontend/src/tables/stock/StockTrackingTable.tsx
@@ -1,6 +1,6 @@
 import { t } from '@lingui/macro';
 import { Table, Text } from '@mantine/core';
-import { ReactNode, useCallback, useMemo } from 'react';
+import { type ReactNode, useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { RenderBuildOrder } from '../../components/render/Build';
@@ -22,9 +22,9 @@ import { ModelType } from '../../enums/ModelType';
 import { useUserFilters } from '../../hooks/UseFilter';
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { DateColumn, DescriptionColumn } from '../ColumnRenderers';
-import { TableFilter } from '../Filter';
+import type { TableFilter } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
 
 type StockTrackingEntry = {
@@ -44,7 +44,7 @@ export function StockTrackingTable({ itemId }: Readonly<{ itemId: number }>) {
     (record: any) => {
       const deltas: any = record?.deltas ?? {};
 
-      let entries: StockTrackingEntry[] = [
+      const entries: StockTrackingEntry[] = [
         {
           label: t`Stock Item`,
           key: 'stockitem',
@@ -210,7 +210,7 @@ export function StockTrackingTable({ itemId }: Readonly<{ itemId: number }>) {
         title: t`User`,
         render: (record: any) => {
           if (!record.user_detail) {
-            return <Text size="sm" fs="italic">{t`No user information`}</Text>;
+            return <Text size='sm' fs='italic'>{t`No user information`}</Text>;
           }
 
           return RenderUser({ instance: record.user_detail });
diff --git a/src/frontend/src/tables/stock/TestStatisticsTable.tsx b/src/frontend/src/tables/stock/TestStatisticsTable.tsx
index a82e51d35baf..ab6745a44ea3 100644
--- a/src/frontend/src/tables/stock/TestStatisticsTable.tsx
+++ b/src/frontend/src/tables/stock/TestStatisticsTable.tsx
@@ -3,7 +3,7 @@ import { useCallback, useMemo, useState } from 'react';
 
 import { useTable } from '../../hooks/UseTable';
 import { apiUrl } from '../../states/ApiState';
-import { TableColumn } from '../Column';
+import type { TableColumn } from '../Column';
 import { InvenTreeTable } from '../InvenTreeTable';
 
 export function TestStatisticsTable({
@@ -13,7 +13,7 @@ export function TestStatisticsTable({
   const [templateColumnList, setTemplateColumnList] = useState(initialColumns);
 
   const testTemplateColumns: TableColumn[] = useMemo(() => {
-    let data = templateColumnList ?? [];
+    const data = templateColumnList ?? [];
     return data;
   }, [templateColumnList]);
 
@@ -39,13 +39,13 @@ export function TestStatisticsTable({
 
   function statCountString(count: number, total: number) {
     if (count > 0) {
-      let percentage =
-        ' (' +
-        ((100.0 * count) / total).toLocaleString(undefined, {
+      const percentage = ` (${((100.0 * count) / total).toLocaleString(
+        undefined,
+        {
           minimumFractionDigits: 0,
           maximumFractionDigits: 2
-        }) +
-        '%)';
+        }
+      )}%)`;
       return count.toString() + percentage;
     }
     return '-';
@@ -58,7 +58,7 @@ export function TestStatisticsTable({
       [key: string]: string;
     }
     // Construct a list of test templates
-    let results: ResultRow[] = [
+    const results: ResultRow[] = [
       { id: 'row_passed', col_0: t`Passed` },
       { id: 'row_failed', col_0: t`Failed` },
       { id: 'row_total', col_0: t`Total` }
@@ -67,10 +67,10 @@ export function TestStatisticsTable({
 
     columnIndex = 1;
 
-    let newColumns: TableColumn[] = [];
-    for (let key in records[0]) {
+    const newColumns: TableColumn[] = [];
+    for (const key in records[0]) {
       if (key == 'total') continue;
-      let acc = 'col_' + columnIndex.toString();
+      const acc = `col_${columnIndex.toString()}`;
 
       const resultKeys = ['passed', 'failed', 'total'];
 
@@ -85,7 +85,7 @@ export function TestStatisticsTable({
       results[2][acc] = records[0][key]['total'].toString();
 
       newColumns.push({
-        accessor: 'col_' + columnIndex.toString(),
+        accessor: `col_${columnIndex.toString()}`,
         title: key
       });
       columnIndex++;
@@ -110,7 +110,7 @@ export function TestStatisticsTable({
 
   return (
     <InvenTreeTable
-      url={apiUrl(params.apiEndpoint, params.pk) + '/'}
+      url={`${apiUrl(params.apiEndpoint, params.pk)}/`}
       tableState={table}
       columns={tableColumns}
       props={{
diff --git a/src/frontend/src/views/MobileAppView.tsx b/src/frontend/src/views/MobileAppView.tsx
index 21353b98d300..99c912e5f6f0 100644
--- a/src/frontend/src/views/MobileAppView.tsx
+++ b/src/frontend/src/views/MobileAppView.tsx
@@ -15,10 +15,10 @@ export default function MobileAppView() {
   }
   return (
     <BaseContext>
-      <Center h="100vh">
+      <Center h='100vh'>
         <Container>
           <Stack>
-            <Title c="red">
+            <Title c='red'>
               <Trans>Mobile viewport detected</Trans>
             </Title>
             <Text>
diff --git a/src/frontend/tests/baseFixtures.ts b/src/frontend/tests/baseFixtures.ts
index 02f729d2a738..834883aa2151 100644
--- a/src/frontend/tests/baseFixtures.ts
+++ b/src/frontend/tests/baseFixtures.ts
@@ -1,12 +1,12 @@
+import * as crypto from 'node:crypto';
+import * as fs from 'node:fs';
+import os from 'node:os';
+import * as path from 'node:path';
 import { test as baseTest } from '@playwright/test';
-import * as crypto from 'crypto';
-import * as fs from 'fs';
-import os from 'os';
-import * as path from 'path';
 
 const istanbulCLIOutput = path.join(process.cwd(), '.nyc_output');
-let platform = os.platform();
-let systemKeyVar;
+const platform = os.platform();
+let systemKeyVar: string;
 if (platform === 'darwin') {
   systemKeyVar = 'Meta';
 } else {
diff --git a/src/frontend/tests/cui.spec.ts b/src/frontend/tests/cui.spec.ts
index 66f705f25df3..a7a5502e47be 100644
--- a/src/frontend/tests/cui.spec.ts
+++ b/src/frontend/tests/cui.spec.ts
@@ -6,7 +6,7 @@ test('CUI - Index', async ({ page }) => {
   await page.goto(`${classicUrl}/api/`);
   await page.goto(`${classicUrl}/index/`, { timeout: 10000 });
   console.log('Page title:', await page.title());
-  await expect(page).toHaveTitle(RegExp('^InvenTree.*Sign In$'));
+  await expect(page).toHaveTitle(/^InvenTree.*Sign In$/);
   await expect(page.getByRole('heading', { name: 'Sign In' })).toBeVisible();
 
   await page.getByLabel('username').fill(user.username);
diff --git a/src/frontend/tests/login.ts b/src/frontend/tests/login.ts
index 841abae1769a..bf286e55bb47 100644
--- a/src/frontend/tests/login.ts
+++ b/src/frontend/tests/login.ts
@@ -9,7 +9,7 @@ export const doLogin = async (page, username?: string, password?: string) => {
   password = password ?? user.password;
 
   await page.goto(logoutUrl);
-  await expect(page).toHaveTitle(RegExp('^InvenTree.*$'));
+  await expect(page).toHaveTitle(/^InvenTree.*$/);
   await page.waitForURL('**/platform/login');
   await page.getByLabel('username').fill(username);
   await page.getByLabel('password').fill(password);
diff --git a/src/frontend/tests/pages/pui_build.spec.ts b/src/frontend/tests/pages/pui_build.spec.ts
index 04e946cc8869..6d3126c910b5 100644
--- a/src/frontend/tests/pages/pui_build.spec.ts
+++ b/src/frontend/tests/pages/pui_build.spec.ts
@@ -108,7 +108,7 @@ test('Pages - Build Order - Build Outputs', async ({ page }) => {
   let sn = 1;
 
   if (!!placeholder && placeholder.includes('Next serial number')) {
-    sn = parseInt(placeholder.split(':')[1].trim());
+    sn = Number.parseInt(placeholder.split(':')[1].trim());
   }
 
   // Generate some new serial numbers
@@ -234,11 +234,11 @@ test('Pages - Build Order - Allocation', async ({ page }) => {
 
   // Check for expected rows
   for (let idx = 0; idx < data.length; idx++) {
-    let item = data[idx];
+    const item = data[idx];
 
-    let cell = await page.getByRole('cell', { name: item.name });
-    let row = await cell.locator('xpath=ancestor::tr').first();
-    let progress = `${item.allocated} / ${item.required}`;
+    const cell = await page.getByRole('cell', { name: item.name });
+    const row = await cell.locator('xpath=ancestor::tr').first();
+    const progress = `${item.allocated} / ${item.required}`;
 
     await row.getByRole('cell', { name: item.ipn }).first().waitFor();
     await row.getByRole('cell', { name: item.available }).first().waitFor();
@@ -246,8 +246,8 @@ test('Pages - Build Order - Allocation', async ({ page }) => {
   }
 
   // Check for expected buttons on Red Widget
-  let redWidget = await page.getByRole('cell', { name: 'Red Widget' });
-  let redRow = await redWidget.locator('xpath=ancestor::tr').first();
+  const redWidget = await page.getByRole('cell', { name: 'Red Widget' });
+  const redRow = await redWidget.locator('xpath=ancestor::tr').first();
 
   await redRow.getByLabel(/row-action-menu-/i).click();
   await page
diff --git a/src/frontend/tests/pages/pui_part.spec.ts b/src/frontend/tests/pages/pui_part.spec.ts
index b09e2680a28c..21affbababfc 100644
--- a/src/frontend/tests/pages/pui_part.spec.ts
+++ b/src/frontend/tests/pages/pui_part.spec.ts
@@ -194,7 +194,7 @@ test('Parts - Pricing (Nothing, BOM)', async ({ page }) => {
   await page.getByRole('button', { name: 'BOM Pricing' }).isEnabled();
 
   // Overview Graph
-  let graph = page.getByLabel('pricing-overview-chart');
+  const graph = page.getByLabel('pricing-overview-chart');
   await graph.waitFor();
   await graph.getByText('$60').waitFor();
   await graph.locator('tspan').filter({ hasText: 'BOM Pricing' }).waitFor();
@@ -236,7 +236,7 @@ test('Parts - Pricing (Supplier)', async ({ page }) => {
   await page.getByRole('button', { name: 'SKU Not sorted' }).waitFor();
 
   // Supplier Pricing - linkjumping
-  let target = page.getByText('ARR-26041-LPC').first();
+  const target = page.getByText('ARR-26041-LPC').first();
   await target.waitFor();
   await target.click();
   // await page.waitForURL('**/purchasing/supplier-part/697/');
@@ -262,7 +262,7 @@ test('Parts - Pricing (Variant)', async ({ page }) => {
   await page.getByRole('button', { name: 'Variant Pricing' }).click();
 
   // Variant Pricing - linkjumping
-  let target = page.getByText('Green Chair').first();
+  const target = page.getByText('Green Chair').first();
   await target.waitFor();
   await target.click();
   await page.waitForURL('**/part/109/**');
diff --git a/src/frontend/tests/pui_basic.spec.ts b/src/frontend/tests/pui_basic.spec.ts
index 1f529278b45d..e28e76bb1839 100644
--- a/src/frontend/tests/pui_basic.spec.ts
+++ b/src/frontend/tests/pui_basic.spec.ts
@@ -8,7 +8,7 @@ test('Basic Login Test', async ({ page }) => {
   // Check that the username is provided
   await page.getByText(user.username);
 
-  await expect(page).toHaveTitle(RegExp('^InvenTree'));
+  await expect(page).toHaveTitle(/^InvenTree/);
 
   // Go to the dashboard
   await page.goto(baseUrl);
@@ -19,7 +19,7 @@ test('Basic Login Test', async ({ page }) => {
   // Check that the username is provided
   await page.getByText(user.username);
 
-  await expect(page).toHaveTitle(RegExp('^InvenTree'));
+  await expect(page).toHaveTitle(/^InvenTree/);
 
   // Go to the dashboard
   await page.goto(baseUrl);
@@ -39,7 +39,7 @@ test('Quick Login Test', async ({ page }) => {
   // Check that the username is provided
   await page.getByText(user.username);
 
-  await expect(page).toHaveTitle(RegExp('^InvenTree'));
+  await expect(page).toHaveTitle(/^InvenTree/);
 
   // Go to the dashboard
   await page.goto(baseUrl);
diff --git a/src/frontend/tests/pui_printing.spec.ts b/src/frontend/tests/pui_printing.spec.ts
index 68645442d5b2..986274327fd5 100644
--- a/src/frontend/tests/pui_printing.spec.ts
+++ b/src/frontend/tests/pui_printing.spec.ts
@@ -120,7 +120,7 @@ test('Report Editing', async ({ page, request }) => {
   expect(textareaValue).toContain(
     `<img class='qr' alt="{% trans 'QR Code' %}" src='{% qrcode qr_data %}'>`
   );
-  textarea.fill(textareaValue + '\nHello world');
+  textarea.fill(`${textareaValue}\nHello world`);
 
   // Switch back and forth to see if the changed contents get correctly passed between the hooks
   await page.getByRole('tab', { name: 'Code', exact: true }).click();
diff --git a/src/frontend/vite.config.ts b/src/frontend/vite.config.ts
index d036182db22d..8e1e732a06d4 100644
--- a/src/frontend/vite.config.ts
+++ b/src/frontend/vite.config.ts
@@ -1,7 +1,7 @@
+import { platform, release } from 'node:os';
 import { codecovVitePlugin } from '@codecov/vite-plugin';
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 import react from '@vitejs/plugin-react';
-import { platform, release } from 'node:os';
 import license from 'rollup-plugin-license';
 import { defineConfig, splitVendorChunkPlugin } from 'vite';
 import istanbul from 'vite-plugin-istanbul';