[PUI] More style fixes (#7142)

* fix interface names

* use Readonly for props

* fix typescript:S3863

* require hashes in package installer too

contrib/packager.io/functions.sh

@@ -90,7 +90,7 @@ function detect_envs() {
     echo "# Using existing config file: ${INVENTREE_CONFIG_FILE}"
 
     # Install parser
-    pip install -r ${APP_HOME}/.github/requirements.txt -q
+    pip install --require-hashes -r ${APP_HOME}/.github/requirements.txt -q
 
     # Load config
     local CONF=$(cat ${INVENTREE_CONFIG_FILE} | jc --yaml)

src/frontend/src/components/buttons/AddItemButton.tsx

@@ -5,6 +5,6 @@ import { ActionButton, ActionButtonProps } from './ActionButton';
 /**
  * A generic icon button which is used to add or create a new item
  */
-export function AddItemButton(props: ActionButtonProps) {
+export function AddItemButton(props: Readonly<ActionButtonProps>) {
   return <ActionButton {...props} color="green" icon={<IconPlus />} />;
 }

src/frontend/src/components/buttons/SplitButton.tsx

@@ -52,7 +52,7 @@ export function SplitButton({
   selected,
   setSelected,
   loading
-}: SplitButtonProps) {
+}: Readonly<SplitButtonProps>) {
   const [current, setCurrent] = useState<string>(defaultSelected);
   const { classes } = useStyles();
 

src/frontend/src/components/details/Details.tsx

@@ -180,7 +180,7 @@ function NameBadge({ pk, type }: { pk: string | number; type: BadgeType }) {
  * If owner is defined, only renders a badge
  * If user is defined, a badge is rendered in addition to main value
  */
-function TableStringValue(props: FieldProps) {
+function TableStringValue(props: Readonly<FieldProps>) {
   let value = props?.field_value;
 
   if (value === undefined) {
@@ -217,11 +217,11 @@ function TableStringValue(props: FieldProps) {
   );
 }
 
-function BooleanValue(props: FieldProps) {
+function BooleanValue(props: Readonly<FieldProps>) {
   return <YesNoButton value={props.field_value} />;
 }
 
-function TableAnchorValue(props: FieldProps) {
+function TableAnchorValue(props: Readonly<FieldProps>) {
   if (props.field_data.external) {
     return (
       <Anchor
@@ -303,7 +303,7 @@ function TableAnchorValue(props: FieldProps) {
   );
 }
 
-function ProgressBarValue(props: FieldProps) {
+function ProgressBarValue(props: Readonly<FieldProps>) {
   return (
     <ProgressBar
       value={props.field_data.progress}
@@ -313,7 +313,7 @@ function ProgressBarValue(props: FieldProps) {
   );
 }
 
-function StatusValue(props: FieldProps) {
+function StatusValue(props: Readonly<FieldProps>) {
   return (
     <StatusRenderer type={props.field_data.model} status={props.field_value} />
   );

src/frontend/src/components/details/DetailsBadge.tsx

@@ -7,7 +7,7 @@ export type DetailsBadgeProps = {
   visible?: boolean;
 };
 
-export default function DetailsBadge(props: DetailsBadgeProps) {
+export default function DetailsBadge(props: Readonly<DetailsBadgeProps>) {
   if (props.visible == false) {
     return null;
   }

src/frontend/src/components/details/DetailsImage.tsx

@@ -322,7 +322,7 @@ function ImageActionButtons({
 /**
  * Renders an image with action buttons for display on Details panels
  */
-export function DetailsImage(props: DetailImageProps) {
+export function DetailsImage(props: Readonly<DetailImageProps>) {
   // Displays a group of ActionButtons on hover
   const { hovered, ref } = useHover();
   const [img, setImg] = useState<string>(props.src ?? backup_image);

src/frontend/src/components/editors/TemplateEditor/TemplateEditor.tsx

@@ -87,7 +87,7 @@ type TemplateEditorProps = {
   template: TemplateI;
 };
 
-export function TemplateEditor(props: TemplateEditorProps) {
+export function TemplateEditor(props: Readonly<TemplateEditorProps>) {
   const { downloadUrl, editors, previewAreas, preview } = props;
   const editorRef = useRef<EditorRef>();
   const previewRef = useRef<PreviewAreaRef>();

src/frontend/src/components/forms/fields/ApiFormField.tsx

@@ -10,8 +10,7 @@ import {
 import { UseFormReturnType } from '@mantine/form';
 import { useId } from '@mantine/hooks';
 import { IconX } from '@tabler/icons-react';
-import { ReactNode, useCallback, useEffect } from 'react';
+import { ReactNode, useCallback, useEffect, useMemo } from 'react';
-import { useMemo } from 'react';
 import { Control, FieldValues, useController } from 'react-hook-form';
 
 import { ModelType } from '../../../enums/ModelType';

src/frontend/src/components/forms/fields/ChoiceField.tsx

@@ -1,7 +1,6 @@
 import { Select } from '@mantine/core';
 import { useId } from '@mantine/hooks';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
-import { useMemo } from 'react';
 import { FieldValues, UseControllerReturn } from 'react-hook-form';
 
 import { ApiFormFieldType } from './ApiFormField';

src/frontend/src/components/forms/fields/RelatedModelField.tsx

@@ -1,7 +1,6 @@
 import { t } from '@lingui/macro';
 import { Input, useMantineTheme } from '@mantine/core';
-import { useDebouncedValue } from '@mantine/hooks';
+import { useDebouncedValue, useId } from '@mantine/hooks';
-import { useId } from '@mantine/hooks';
 import { useQuery } from '@tanstack/react-query';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {

src/frontend/src/components/images/Thumbnail.tsx

@@ -1,7 +1,5 @@
 import { t } from '@lingui/macro';
-import { Anchor, Skeleton } from '@mantine/core';
+import { Anchor, Group, Skeleton, Text } from '@mantine/core';
-import { Group } from '@mantine/core';
-import { Text } from '@mantine/core';
 import { ReactNode, useMemo } from 'react';
 
 import { ApiImage } from './ApiImage';

src/frontend/src/components/items/DocInfo.tsx

@@ -6,7 +6,12 @@ interface DocInfoProps extends BaseDocProps {
   size?: number;
 }
 
-export function DocInfo({ size = 18, text, detail, link }: DocInfoProps) {
+export function DocInfo({
+  size = 18,
+  text,
+  detail,
+  link
+}: Readonly<DocInfoProps>) {
   return (
     <DocTooltip text={text} detail={detail} link={link}>
       <IconInfoCircle size={size} />

src/frontend/src/components/items/DocTooltip.tsx

@@ -21,7 +21,7 @@ export function DocTooltip({
   detail,
   link,
   docchildren
-}: DocTooltipProps) {
+}: Readonly<DocTooltipProps>) {
   const { classes } = InvenTreeStyle();
 
   return (

src/frontend/src/components/items/ProgressBar.tsx

@@ -13,7 +13,7 @@ export type ProgressBarProps = {
  * A progress bar element, built on mantine.Progress
  * The color of the bar is determined based on the value
  */
-export function ProgressBar(props: ProgressBarProps) {
+export function ProgressBar(props: Readonly<ProgressBarProps>) {
   const progress = useMemo(() => {
     let maximum = props.maximum ?? 100;
     let value = Math.max(props.value, 0);

src/frontend/src/components/items/TitleWithDoc.tsx

@@ -14,7 +14,7 @@ export function TitleWithDoc({
   size,
   text,
   detail
-}: DocTitleProps) {
+}: Readonly<DocTitleProps>) {
   return (
     <Group>
       <Title variant={variant} order={order} size={size}>

src/frontend/src/components/nav/DetailDrawer.tsx

@@ -43,7 +43,7 @@ function DetailDrawerComponent({
   size,
   closeOnEscape = true,
   renderContent
-}: DrawerProps) {
+}: Readonly<DrawerProps>) {
   const navigate = useNavigate();
   const { id } = useParams();
   const { classes } = useStyles();
@@ -95,7 +95,7 @@ function DetailDrawerComponent({
   );
 }
 
-export function DetailDrawer(props: DrawerProps) {
+export function DetailDrawer(props: Readonly<DrawerProps>) {
   return (
     <Routes>
       <Route path=":id?/" element={<DetailDrawerComponent {...props} />} />

src/frontend/src/components/nav/NotificationDrawer.tsx

@@ -4,15 +4,16 @@ import {
   Alert,
   Divider,
   Drawer,
+  Group,
   LoadingOverlay,
   Space,
+  Stack,
+  Text,
   Tooltip
 } from '@mantine/core';
-import { Group, Stack, Text } from '@mantine/core';
 import { IconBellCheck, IconBellPlus } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
-import { Link } from 'react-router-dom';
 
 import { api } from '../../App';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';

src/frontend/src/components/nav/PageDetail.tsx

@@ -5,6 +5,17 @@ import { ApiImage } from '../images/ApiImage';
 import { StylishText } from '../items/StylishText';
 import { Breadcrumb, BreadcrumbList } from './BreadcrumbList';
 
+interface PageDetailInterface {
+  title?: string;
+  subtitle?: string;
+  imageUrl?: string;
+  detail?: ReactNode;
+  badges?: ReactNode[];
+  breadcrumbs?: Breadcrumb[];
+  breadcrumbAction?: () => void;
+  actions?: ReactNode[];
+}
+
 /**
  * Construct a "standard" page detail for common display between pages.
  *
@@ -20,16 +31,7 @@ export function PageDetail({
   breadcrumbs,
   breadcrumbAction,
   actions
-}: {
+}: Readonly<PageDetailInterface>) {
-  title?: string;
-  subtitle?: string;
-  imageUrl?: string;
-  detail?: ReactNode;
-  badges?: ReactNode[];
-  breadcrumbs?: Breadcrumb[];
-  breadcrumbAction?: () => void;
-  actions?: ReactNode[];
-}) {
   return (
     <Stack spacing="xs">
       {breadcrumbs && breadcrumbs.length > 0 && (

src/frontend/src/components/nav/PanelGroup.tsx

@@ -10,8 +10,7 @@ import {
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarRightCollapse
 } from '@tabler/icons-react';
-import { ReactNode, useMemo } from 'react';
+import { ReactNode, useEffect, useMemo, useState } from 'react';
-import { useEffect, useState } from 'react';
 import {
   Navigate,
   Route,
@@ -51,7 +50,7 @@ function BasePanelGroup({
   onPanelChange,
   selectedPanel,
   collapsible = true
-}: PanelProps): ReactNode {
+}: Readonly<PanelProps>): ReactNode {
   const navigate = useNavigate();
   const { panel } = useParams();
 
@@ -178,7 +177,11 @@ function BasePanelGroup({
   );
 }
 
-function IndexPanelComponent({ pageKey, selectedPanel, panels }: PanelProps) {
+function IndexPanelComponent({
+  pageKey,
+  selectedPanel,
+  panels
+}: Readonly<PanelProps>) {
   const lastUsedPanel = useLocalState((state) => {
     const panelName =
       selectedPanel || state.lastUsedPanels[pageKey] || panels[0]?.name;
@@ -203,7 +206,7 @@ function IndexPanelComponent({ pageKey, selectedPanel, panels }: PanelProps) {
  * @param onPanelChange - Callback when the active panel changes
  * @param collapsible - If true, the panel group can be collapsed (defaults to true)
  */
-export function PanelGroup(props: PanelProps) {
+export function PanelGroup(props: Readonly<PanelProps>) {
   return (
     <Routes>
       <Route index element={<IndexPanelComponent {...props} />} />

src/frontend/src/components/nav/SearchDrawer.tsx

@@ -8,6 +8,7 @@ import {
   Divider,
   Drawer,
   Group,
+  Loader,
   Menu,
   Paper,
   Space,
@@ -15,7 +16,6 @@ import {
   Text,
   TextInput
 } from '@mantine/core';
-import { Loader } from '@mantine/core';
 import { useDebouncedValue } from '@mantine/hooks';
 import {
   IconAlertCircle,

src/frontend/src/components/nav/SettingsHeader.tsx

@@ -3,6 +3,15 @@ import { IconSwitch } from '@tabler/icons-react';
 import { ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 
+interface SettingsHeaderInterface {
+  title: string | ReactNode;
+  shorthand?: string;
+  subtitle?: string | ReactNode;
+  switch_condition?: boolean;
+  switch_text?: string | ReactNode;
+  switch_link?: string;
+}
+
 /**
  * Construct a settings page header with interlinks to one other settings page
  */
@@ -13,14 +22,7 @@ export function SettingsHeader({
   switch_condition = true,
   switch_text,
   switch_link
-}: {
+}: Readonly<SettingsHeaderInterface>) {
-  title: string | ReactNode;
-  shorthand?: string;
-  subtitle?: string | ReactNode;
-  switch_condition?: boolean;
-  switch_text?: string | ReactNode;
-  switch_link?: string;
-}) {
   return (
     <Stack spacing="0" ml={'sm'}>
       <Group>

src/frontend/src/components/render/Build.tsx

@@ -1,13 +1,15 @@
 import { ReactNode } from 'react';
 
 import { ModelType } from '../../enums/ModelType';
-import { RenderInlineModel } from './Instance';
+import { InstanceRenderInterface, RenderInlineModel } from './Instance';
 import { StatusRenderer } from './StatusRenderer';
 
 /**
  * Inline rendering of a single BuildOrder instance
  */
-export function RenderBuildOrder({ instance }: { instance: any }): ReactNode {
+export function RenderBuildOrder({
+  instance
+}: Readonly<InstanceRenderInterface>): ReactNode {
   return (
     <RenderInlineModel
       primary={instance.reference}
@@ -24,7 +26,9 @@ export function RenderBuildOrder({ instance }: { instance: any }): ReactNode {
 /*
  * Inline rendering of a single BuildLine instance
  */
-export function RenderBuildLine({ instance }: { instance: any }): ReactNode {
+export function RenderBuildLine({
+  instance
+}: Readonly<InstanceRenderInterface>): ReactNode {
   return (
     <RenderInlineModel
       primary={instance.part_detail.full_name}

src/frontend/src/components/render/Company.tsx

@@ -1,11 +1,13 @@
 import { ReactNode } from 'react';
 
-import { RenderInlineModel } from './Instance';
+import { InstanceRenderInterface, RenderInlineModel } from './Instance';
 
 /**
  * Inline rendering of a single Address instance
  */
-export function RenderAddress({ instance }: { instance: any }): ReactNode {
+export function RenderAddress({
+  instance
+}: Readonly<InstanceRenderInterface>): ReactNode {
   let text = [
     instance.country,
     instance.postal_code,
@@ -23,7 +25,9 @@ export function RenderAddress({ instance }: { instance: any }): ReactNode {
 /**
  * Inline rendering of a single Company instance
  */
-export function RenderCompany({ instance }: { instance: any }): ReactNode {
+export function RenderCompany({
+  instance
+}: Readonly<InstanceRenderInterface>): ReactNode {
   // TODO: Handle URL
 
   return (
@@ -38,14 +42,18 @@ export function RenderCompany({ instance }: { instance: any }): ReactNode {
 /**
  * Inline rendering of a single Contact instance
  */
-export function RenderContact({ instance }: { instance: any }): ReactNode {
+export function RenderContact({
+  instance
+}: Readonly<InstanceRenderInterface>): ReactNode {
   return <RenderInlineModel primary={instance.name} />;
 }
 
 /**
  * Inline rendering of a single SupplierPart instance
  */
-export function RenderSupplierPart({ instance }: { instance: any }): ReactNode {
+export function RenderSupplierPart({
+  instance
+}: Readonly<InstanceRenderInterface>): ReactNode {
   // TODO: handle URL
 
   let supplier = instance.supplier_detail ?? {};
@@ -66,9 +74,7 @@ export function RenderSupplierPart({ instance }: { instance: any }): ReactNode {
  */
 export function RenderManufacturerPart({
   instance
-}: {
+}: Readonly<InstanceRenderInterface>): ReactNode {
-  instance: any;
-}): ReactNode {
   let part = instance.part_detail ?? {};
   let manufacturer = instance.manufacturer_detail ?? {};
 

src/frontend/src/components/render/Generic.tsx

@@ -1,8 +1,10 @@
 import { ReactNode } from 'react';
 
-import { RenderInlineModel } from './Instance';
+import { InstanceRenderInterface, RenderInlineModel } from './Instance';
 
-export function RenderProjectCode({ instance }: { instance: any }): ReactNode {
+export function RenderProjectCode({
+  instance
+}: Readonly<InstanceRenderInterface>): ReactNode {
   return (
     instance && (
       <RenderInlineModel

src/frontend/src/components/render/Instance.tsx

@@ -1,6 +1,5 @@
 import { t } from '@lingui/macro';
-import { Alert, Space } from '@mantine/core';
+import { Alert, Group, Space, Text } from '@mantine/core';
-import { Group, Text } from '@mantine/core';
 import { ReactNode } from 'react';
 
 import { ModelType } from '../../enums/ModelType';
@@ -38,7 +37,7 @@ type EnumDictionary<T extends string | symbol | number, U> = {
  */
 const RendererLookup: EnumDictionary<
   ModelType,
-  (props: { instance: any }) => ReactNode
+  (props: Readonly<InstanceRenderInterface>) => ReactNode
 > = {
   [ModelType.address]: RenderAddress,
   [ModelType.build]: RenderBuildOrder,
@@ -140,3 +139,7 @@ export function UnknownRenderer({
     </Alert>
   );
 }
+
+export interface InstanceRenderInterface {
+  instance: any;
+}

src/frontend/src/components/render/Order.tsx

@@ -2,7 +2,7 @@ import { t } from '@lingui/macro';
 import { ReactNode } from 'react';
 
 import { ModelType } from '../../enums/ModelType';
-import { RenderInlineModel } from './Instance';
+import { InstanceRenderInterface, RenderInlineModel } from './Instance';
 import { StatusRenderer } from './StatusRenderer';
 
 /**
@@ -10,9 +10,7 @@ import { StatusRenderer } from './StatusRenderer';
  */
 export function RenderPurchaseOrder({
   instance
-}: {
+}: Readonly<InstanceRenderInterface>): ReactNode {
-  instance: any;
-}): ReactNode {
   let supplier = instance.supplier_detail || {};
 
   // TODO: Handle URL
@@ -32,7 +30,9 @@ export function RenderPurchaseOrder({
 /**
  * Inline rendering of a single ReturnOrder instance
  */
-export function RenderReturnOrder({ instance }: { instance: any }): ReactNode {
+export function RenderReturnOrder({
+  instance
+}: Readonly<InstanceRenderInterface>): ReactNode {
   let customer = instance.customer_detail || {};
 
   return (
@@ -51,7 +51,9 @@ export function RenderReturnOrder({ instance }: { instance: any }): ReactNode {
 /**
  * Inline rendering of a single SalesOrder instance
  */
-export function RenderSalesOrder({ instance }: { instance: any }): ReactNode {
+export function RenderSalesOrder({
+  instance
+}: Readonly<InstanceRenderInterface>): ReactNode {
   let customer = instance.customer_detail || {};
 
   // TODO: Handle URL

src/frontend/src/components/render/Part.tsx

@@ -1,12 +1,14 @@
 import { t } from '@lingui/macro';
 import { ReactNode } from 'react';
 
-import { RenderInlineModel } from './Instance';
+import { InstanceRenderInterface, RenderInlineModel } from './Instance';
 
 /**
  * Inline rendering of a single Part instance
  */
-export function RenderPart({ instance }: { instance: any }): ReactNode {
+export function RenderPart({
+  instance
+}: Readonly<InstanceRenderInterface>): ReactNode {
   const stock = t`Stock` + `: ${instance.in_stock}`;
 
   return (
@@ -22,7 +24,9 @@ export function RenderPart({ instance }: { instance: any }): ReactNode {
 /**
  * Inline rendering of a PartCategory instance
  */
-export function RenderPartCategory({ instance }: { instance: any }): ReactNode {
+export function RenderPartCategory({
+  instance
+}: Readonly<InstanceRenderInterface>): ReactNode {
   // TODO: Handle URL
 
   let lvl = '-'.repeat(instance.level || 0);

src/frontend/src/components/render/StatusRenderer.tsx

@@ -14,7 +14,7 @@ export interface StatusCodeListInterface {
   [key: string]: StatusCodeInterface;
 }
 
-interface renderStatusLabelOptionsInterface {
+interface RenderStatusLabelOptionsInterface {
   size?: MantineSize;
 }
 
@@ -24,7 +24,7 @@ interface renderStatusLabelOptionsInterface {
 function renderStatusLabel(
   key: string | number,
   codes: StatusCodeListInterface,
-  options: renderStatusLabelOptionsInterface = {}
+  options: RenderStatusLabelOptionsInterface = {}
 ) {
   let text = null;
   let color = null;
@@ -70,7 +70,7 @@ export const StatusRenderer = ({
 }: {
   status: string | number;
   type: ModelType | string;
-  options?: renderStatusLabelOptionsInterface;
+  options?: RenderStatusLabelOptionsInterface;
 }) => {
   const statusCodeList = useGlobalStatusState.getState().status;
 

src/frontend/src/components/render/Stock.tsx

@@ -1,16 +1,14 @@
 import { t } from '@lingui/macro';
 import { ReactNode } from 'react';
 
-import { RenderInlineModel } from './Instance';
+import { InstanceRenderInterface, RenderInlineModel } from './Instance';
 
 /**
  * Inline rendering of a single StockLocation instance
  */
 export function RenderStockLocation({
   instance
-}: {
+}: Readonly<InstanceRenderInterface>): ReactNode {
-  instance: any;
-}): ReactNode {
   return (
     <RenderInlineModel
       primary={instance.name}
@@ -19,7 +17,9 @@ export function RenderStockLocation({
   );
 }
 
-export function RenderStockItem({ instance }: { instance: any }): ReactNode {
+export function RenderStockItem({
+  instance
+}: Readonly<InstanceRenderInterface>): ReactNode {
   let quantity_string = '';
 
   if (instance?.serial !== null && instance?.serial !== undefined) {

src/frontend/src/components/render/User.tsx

@@ -1,9 +1,11 @@
 import { IconUser, IconUsersGroup } from '@tabler/icons-react';
 import { ReactNode } from 'react';
 
-import { RenderInlineModel } from './Instance';
+import { InstanceRenderInterface, RenderInlineModel } from './Instance';
 
-export function RenderOwner({ instance }: { instance: any }): ReactNode {
+export function RenderOwner({
+  instance
+}: Readonly<InstanceRenderInterface>): ReactNode {
   return (
     instance && (
       <RenderInlineModel
@@ -14,7 +16,9 @@ export function RenderOwner({ instance }: { instance: any }): ReactNode {
   );
 }
 
-export function RenderUser({ instance }: { instance: any }): ReactNode {
+export function RenderUser({
+  instance
+}: Readonly<InstanceRenderInterface>): ReactNode {
   return (
     instance && (
       <RenderInlineModel

src/frontend/src/components/widgets/MarkdownEditor.tsx

@@ -2,8 +2,7 @@ import { t } from '@lingui/macro';
 import { showNotification } from '@mantine/notifications';
 import EasyMDE from 'easymde';
 import 'easymde/dist/easymde.min.css';
-import { ReactNode, useCallback, useMemo } from 'react';
+import { ReactNode, useCallback, useMemo, useState } from 'react';
-import { useState } from 'react';
 import SimpleMDE from 'react-simplemde-editor';
 
 import { api } from '../../App';

src/frontend/src/components/widgets/WidgetLayout.tsx

@@ -4,9 +4,10 @@ import {
   Container,
   Group,
   Indicator,
+  Menu,
+  Text,
   createStyles
 } from '@mantine/core';
-import { Menu, Text } from '@mantine/core';
 import { useDisclosure, useHotkeys } from '@mantine/hooks';
 import {
   IconArrowBackUpDouble,

src/frontend/src/defaults/formatters.tsx

@@ -5,13 +5,13 @@ import {
   useUserSettingsState
 } from '../states/SettingsState';
 
-interface formatDecmimalOptionsType {
+interface FormatDecmimalOptionsInterface {
   digits?: number;
   minDigits?: number;
   locale?: string;
 }
 
-interface formatCurrencyOptionsType {
+interface FormatCurrencyOptionsInterface {
   digits?: number;
   minDigits?: number;
   currency?: string;
@@ -21,7 +21,7 @@ interface formatCurrencyOptionsType {
 
 export function formatDecimal(
   value: number | null | undefined,
-  options: formatDecmimalOptionsType = {}
+  options: FormatDecmimalOptionsInterface = {}
 ) {
   let locale = options.locale || navigator.language || 'en-US';
 
@@ -44,7 +44,7 @@ export function formatDecimal(
  */
 export function formatCurrency(
   value: number | string | null | undefined,
-  options: formatCurrencyOptionsType = {}
+  options: FormatCurrencyOptionsInterface = {}
 ) {
   if (value == null || value == undefined) {
     return null;
@@ -89,7 +89,7 @@ export function formatCurrency(
 export function formatPriceRange(
   minValue: number | null,
   maxValue: number | null,
-  options: formatCurrencyOptionsType = {}
+  options: FormatCurrencyOptionsInterface = {}
 ) {
   // If neither values are provided, return a dash
   if (minValue == null && maxValue == null) {
@@ -116,7 +116,7 @@ export function formatPriceRange(
   )}`;
 }
 
-interface renderDateOptionsType {
+interface RenderDateOptionsInterface {
   showTime?: boolean;
   showSeconds?: boolean;
 }
@@ -127,7 +127,10 @@ interface renderDateOptionsType {
  * The provided "date" variable is a string, nominally ISO format e.g. 2022-02-22
  * The user-configured setting DATE_DISPLAY_FORMAT determines how the date should be displayed.
  */
-export function renderDate(date: string, options: renderDateOptionsType = {}) {
+export function renderDate(
+  date: string,
+  options: RenderDateOptionsInterface = {}
+) {
   if (!date) {
     return '-';
   }

src/frontend/src/functions/icons.tsx

@@ -217,7 +217,7 @@ type InvenTreeIconProps = {
   iconProps?: TablerIconProps;
 };
 
-export function InvenTreeIcon(props: InvenTreeIconProps) {
+export function InvenTreeIcon(props: Readonly<InvenTreeIconProps>) {
   let Icon: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 
   if (props.icon in icons) {

src/frontend/src/pages/Index/Playground.tsx

@@ -1,7 +1,13 @@
 import { Trans } from '@lingui/macro';
-import { Button, Card, Stack, TextInput } from '@mantine/core';
+import {
-import { Group, Text } from '@mantine/core';
+  Accordion,
-import { Accordion } from '@mantine/core';
+  Button,
+  Card,
+  Group,
+  Stack,
+  Text,
+  TextInput
+} from '@mantine/core';
 import { spotlight } from '@mantine/spotlight';
 import { IconAlien } from '@tabler/icons-react';
 import { ReactNode, useMemo, useState } from 'react';

src/frontend/src/pages/Index/Scan.tsx

@@ -1,9 +1,11 @@
 import { Trans, t } from '@lingui/macro';
 import {
   ActionIcon,
+  Badge,
   Button,
   Checkbox,
   Col,
+  Container,
   Grid,
   Group,
   ScrollArea,
@@ -15,15 +17,14 @@ import {
   TextInput,
   rem
 } from '@mantine/core';
-import { Badge, Container } from '@mantine/core';
 import {
   getHotkeyHandler,
   randomId,
+  useDocumentVisibility,
   useFullscreen,
   useListState,
   useLocalStorage
 } from '@mantine/hooks';
-import { useDocumentVisibility } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
 import {
   IconAlertCircle,
@@ -36,9 +37,9 @@ import {
   IconPlus,
   IconQuestionMark,
   IconSearch,
-  IconTrash
+  IconTrash,
+  IconX
 } from '@tabler/icons-react';
-import { IconX } from '@tabler/icons-react';
 import { Html5Qrcode } from 'html5-qrcode';
 import { CameraDevice } from 'html5-qrcode/camera/core';
 import { useEffect, useState } from 'react';
@@ -470,11 +471,11 @@ enum InputMethod {
   ImageBarcode = 'imageBarcode'
 }
 
-interface inputProps {
+interface ScanInputInterface {
   action: (items: ScanItem[]) => void;
 }
 
-function InputManual({ action }: inputProps) {
+function InputManual({ action }: Readonly<ScanInputInterface>) {
   const [value, setValue] = useState<string>('');
 
   function btnAddItem() {
@@ -526,7 +527,7 @@ function InputManual({ action }: inputProps) {
 }
 
 /* Input that uses QR code detection from images */
-function InputImageBarcode({ action }: inputProps) {
+function InputImageBarcode({ action }: Readonly<ScanInputInterface>) {
   const [qrCodeScanner, setQrCodeScanner] = useState<Html5Qrcode | null>(null);
   const [camId, setCamId] = useLocalStorage<CameraDevice | null>({
     key: 'camId',

src/frontend/src/pages/company/CompanyDetail.tsx

@@ -29,8 +29,7 @@ import {
 } from '../../components/items/ActionDropdown';
 import { Breadcrumb } from '../../components/nav/BreadcrumbList';
 import { PageDetail } from '../../components/nav/PageDetail';
-import { PanelGroup } from '../../components/nav/PanelGroup';
+import { PanelGroup, PanelType } from '../../components/nav/PanelGroup';
-import { PanelType } from '../../components/nav/PanelGroup';
 import { NotesEditor } from '../../components/widgets/MarkdownEditor';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { UserRoles } from '../../enums/Roles';
@@ -57,7 +56,7 @@ export type CompanyDetailProps = {
 /**
  * Detail view for a single company instance
  */
-export default function CompanyDetail(props: CompanyDetailProps) {
+export default function CompanyDetail(props: Readonly<CompanyDetailProps>) {
   const { id } = useParams();
 
   const user = useUserState();

src/frontend/src/tables/ColumnSelect.tsx

@@ -1,6 +1,5 @@
 import { t } from '@lingui/macro';
-import { Checkbox, Menu, Tooltip } from '@mantine/core';
+import { ActionIcon, Checkbox, Menu, Tooltip } from '@mantine/core';
-import { ActionIcon } from '@mantine/core';
 import { IconAdjustments } from '@tabler/icons-react';
 
 export function TableColumnSelect({

src/frontend/src/tables/DownloadAction.tsx

@@ -1,6 +1,5 @@
 import { t } from '@lingui/macro';
-import { ActionIcon, Menu } from '@mantine/core';
+import { ActionIcon, Menu, Tooltip } from '@mantine/core';
-import { Tooltip } from '@mantine/core';
 import { IconDownload } from '@tabler/icons-react';
 
 export function DownloadAction({

src/frontend/src/tables/InvenTreeTable.tsx

@@ -3,17 +3,22 @@ import {
   ActionIcon,
   Alert,
   Box,
+  Group,
   Indicator,
   LoadingOverlay,
   Space,
   Stack,
   Tooltip
 } from '@mantine/core';
-import { Group } from '@mantine/core';
 import { modals } from '@mantine/modals';
 import { showNotification } from '@mantine/notifications';
-import { IconFilter, IconRefresh, IconTrash } from '@tabler/icons-react';
+import {
-import { IconBarcode, IconPrinter } from '@tabler/icons-react';
+  IconBarcode,
+  IconFilter,
+  IconPrinter,
+  IconRefresh,
+  IconTrash
+} from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import {
   DataTable,

src/frontend/src/tables/RowActions.tsx

@@ -1,6 +1,5 @@
 import { t } from '@lingui/macro';
-import { ActionIcon, Tooltip } from '@mantine/core';
+import { ActionIcon, Menu, Tooltip } from '@mantine/core';
-import { Menu } from '@mantine/core';
 import { IconCopy, IconDots, IconEdit, IconTrash } from '@tabler/icons-react';
 import { ReactNode, useMemo, useState } from 'react';
 
@@ -105,7 +104,7 @@ export function RowActions({
   }, [actions]);
 
   // Render a single action icon
-  function RowActionIcon(action: RowAction) {
+  function RowActionIcon(action: Readonly<RowAction>) {
     return (
       <Tooltip
         withinPortal={true}

src/frontend/src/tables/general/AttachmentTable.tsx

@@ -1,6 +1,5 @@
 import { t } from '@lingui/macro';
-import { Badge, Group, Stack, Text, Tooltip } from '@mantine/core';
+import { ActionIcon, Badge, Group, Stack, Text, Tooltip } from '@mantine/core';
-import { ActionIcon } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { notifications } from '@mantine/notifications';
 import { IconExternalLink, IconFileUpload } from '@tabler/icons-react';

src/frontend/src/tables/part/PartThumbTable.tsx

@@ -52,7 +52,11 @@ type ThumbProps = {
 /**
  * Renders a single image thumbnail
  */
-function PartThumbComponent({ selected, element, selectImage }: ThumbProps) {
+function PartThumbComponent({
+  selected,
+  element,
+  selectImage
+}: Readonly<ThumbProps>) {
   const { hovered, ref } = useHover();
 
   const hoverColor = 'rgba(127,127,127,0.2)';

src/frontend/src/tables/plugin/PluginListTable.tsx

@@ -15,12 +15,12 @@ import { notifications, showNotification } from '@mantine/notifications';
 import {
   IconCircleCheck,
   IconCircleX,
+  IconDots,
   IconHelpCircle,
   IconInfoCircle,
   IconPlaylistAdd,
   IconRefresh
 } from '@tabler/icons-react';
-import { IconDots } from '@tabler/icons-react';
 import { useCallback, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';