More style fixes (#8140)

* more style fixes

* fix more changes

src/frontend/src/components/DashboardItemProxy.tsx

@@ -14,13 +14,13 @@ export function DashboardItemProxy({
   url,
   params,
   autoupdate = true
-}: {
+}: Readonly<{
   id: string;
   text: string;
   url: ApiEndpoints;
   params: any;
   autoupdate: boolean;
-}) {
+}>) {
   function fetchData() {
     return api
       .get(`${apiUrl(url)}?search=&offset=0&limit=25`, { params: params })

src/frontend/src/components/buttons/ButtonMenu.tsx

@@ -9,12 +9,12 @@ export function ButtonMenu({
   actions,
   tooltip = '',
   label = ''
-}: {
+}: Readonly<{
   icon: any;
   actions: React.ReactNode[];
   label?: string;
   tooltip?: string;
-}) {
+}>) {
   return (
     <Menu shadow="xs">
       <Menu.Target>

src/frontend/src/components/buttons/CopyButton.tsx

@@ -12,10 +12,10 @@ import { InvenTreeIcon } from '../../functions/icons';
 export function CopyButton({
   value,
   label
-}: {
+}: Readonly<{
   value: any;
   label?: JSX.Element;
-}) {
+}>) {
   const ButtonComponent = label ? Button : ActionIcon;
 
   return (

src/frontend/src/components/buttons/EditButton.tsx

@@ -6,12 +6,12 @@ export function EditButton({
   editing,
   disabled,
   saveIcon
-}: {
+}: Readonly<{
   setEditing: (value?: React.SetStateAction<boolean> | undefined) => void;
   editing: boolean;
   disabled?: boolean;
   saveIcon?: JSX.Element;
-}) {
+}>) {
   saveIcon = saveIcon || <IconDeviceFloppy />;
   return (
     <ActionIcon

src/frontend/src/components/buttons/SSOButton.tsx

@@ -33,7 +33,7 @@ const brandIcons: { [key: string]: JSX.Element } = {
   microsoft: <IconBrandAzure />
 };
 
-export function SsoButton({ provider }: { provider: Provider }) {
+export function SsoButton({ provider }: Readonly<{ provider: Provider }>) {
   function login() {
     // set preferred provider
     api

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

@@ -96,7 +96,10 @@ type FieldProps = {
  * Badge shows username, full name, or group name depending on server settings.
  * Badge appends icon to describe type of Owner
  */
-function NameBadge({ pk, type }: { pk: string | number; type: BadgeType }) {
+function NameBadge({
+  pk,
+  type
+}: Readonly<{ pk: string | number; type: BadgeType }>) {
   const { data } = useQuery({
     queryKey: ['badge', type, pk],
     queryFn: async () => {
@@ -331,17 +334,17 @@ function StatusValue(props: Readonly<FieldProps>) {
   );
 }
 
-function CopyField({ value }: { value: string }) {
+function CopyField({ value }: Readonly<{ value: string }>) {
   return <CopyButton value={value} />;
 }
 
 export function DetailsTableField({
   item,
   field
-}: {
+}: Readonly<{
   item: any;
   field: DetailsField;
-}) {
+}>) {
   function getFieldType(type: string) {
     switch (type) {
       case 'text':
@@ -394,11 +397,11 @@ export function DetailsTable({
   item,
   fields,
   title
-}: {
+}: Readonly<{
   item: any;
   fields: DetailsField[];
   title?: string;
-}) {
+}>) {
   return (
     <Paper p="xs" withBorder radius="xs">
       <Stack gap="xs">

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

@@ -81,10 +81,10 @@ const removeModal = (apiPath: string, setImage: (image: string) => void) =>
 function UploadModal({
   apiPath,
   setImage
-}: {
+}: Readonly<{
   apiPath: string;
   setImage: (image: string) => void;
-}) {
+}>) {
   const [currentFile, setCurrentFile] = useState<FileWithPath | null>(null);
   let uploading = false;
 
@@ -96,7 +96,7 @@ function UploadModal({
         <Text size="xl" inline>
           <Trans>Drag and drop to upload</Trans>
         </Text>
-        <Text size="sm" color="dimmed" inline mt={7}>
+        <Text size="sm" c="dimmed" inline mt={7}>
           <Trans>Click to select file(s)</Trans>
         </Text>
       </div>
@@ -131,7 +131,7 @@ function UploadModal({
           <Text size="xl" inline style={{ wordBreak: 'break-all' }}>
             {file.name}
           </Text>
-          <Text size="sm" color="dimmed" inline mt={7}>
+          <Text size="sm" c="dimmed" inline mt={7}>
             {size.toFixed(2)} MB
           </Text>
         </div>
@@ -246,14 +246,14 @@ function ImageActionButtons({
   hasImage,
   pk,
   setImage
-}: {
+}: Readonly<{
   actions?: DetailImageButtonProps;
   visible: boolean;
   apiPath: string;
   hasImage: boolean;
   pk: string;
   setImage: (image: string) => void;
-}) {
+}>) {
   return (
     <>
       {visible && (

src/frontend/src/components/errors/ServerError.tsx

@@ -2,7 +2,7 @@ import { t } from '@lingui/macro';
 
 import GenericErrorPage from './GenericErrorPage';
 
-export default function ServerError({ status }: { status?: number }) {
+export default function ServerError({ status }: Readonly<{ status?: number }>) {
   return (
     <GenericErrorPage
       title={t`Server Error`}

src/frontend/src/components/forms/ApiForm.tsx

@@ -74,7 +74,7 @@ export interface ApiFormAction {
  */
 export interface ApiFormProps {
   url: ApiEndpoints | string;
-  pk?: number | string | undefined;
+  pk?: number | string;
   pk_field?: string;
   pathParams?: PathParams;
   method?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
@@ -103,10 +103,10 @@ export interface ApiFormProps {
 export function OptionsApiForm({
   props: _props,
   id: pId
-}: {
+}: Readonly<{
   props: ApiFormProps;
   id?: string;
-}) {
+}>) {
   const props = useMemo(
     () => ({
       ..._props,
@@ -197,11 +197,11 @@ export function ApiForm({
   id,
   props,
   optionsLoading
-}: {
+}: Readonly<{
   id: string;
   props: ApiFormProps;
   optionsLoading: boolean;
-}) {
+}>) {
   const navigate = useNavigate();
 
   const [fields, setFields] = useState<ApiFormFieldSet>(
@@ -649,10 +649,10 @@ export function ApiForm({
 export function CreateApiForm({
   id,
   props
-}: {
+}: Readonly<{
   id?: string;
   props: ApiFormProps;
-}) {
+}>) {
   const createProps = useMemo<ApiFormProps>(
     () => ({
       ...props,
@@ -667,10 +667,10 @@ export function CreateApiForm({
 export function EditApiForm({
   id,
   props
-}: {
+}: Readonly<{
   id?: string;
   props: ApiFormProps;
-}) {
+}>) {
   const editProps = useMemo<ApiFormProps>(
     () => ({
       ...props,
@@ -687,10 +687,10 @@ export function EditApiForm({
 export function DeleteApiForm({
   id,
   props
-}: {
+}: Readonly<{
   id?: string;
   props: ApiFormProps;
-}) {
+}>) {
   const deleteProps = useMemo<ApiFormProps>(
     () => ({
       ...props,

src/frontend/src/components/forms/AuthenticationForm.tsx

@@ -118,7 +118,7 @@ export function AuthenticationForm() {
                 <Anchor
                   component="button"
                   type="button"
-                  color="dimmed"
+                  c="dimmed"
                   size="xs"
                   onClick={() => navigate('/reset-password')}
                 >
@@ -143,7 +143,7 @@ export function AuthenticationForm() {
           <Anchor
             component="button"
             type="button"
-            color="dimmed"
+            c="dimmed"
             size="xs"
             onClick={() => setMode.toggle()}
           >
@@ -278,10 +278,10 @@ export function RegistrationForm() {
 export function ModeSelector({
   loginMode,
   setMode
-}: {
+}: Readonly<{
   loginMode: boolean;
   setMode: any;
-}) {
+}>) {
   const [auth_settings] = useServerApiState((state) => [state.auth_settings]);
   const registration_enabled =
     auth_settings?.registration_enabled ||
@@ -297,7 +297,7 @@ export function ModeSelector({
           <Anchor
             component="button"
             type="button"
-            color="dimmed"
+            c="dimmed"
             size="xs"
             onClick={() => setMode.close()}
           >
@@ -308,7 +308,7 @@ export function ModeSelector({
         <Anchor
           component="button"
           type="button"
-          color="dimmed"
+          c="dimmed"
           size="xs"
           onClick={() => setMode.open()}
         >

src/frontend/src/components/forms/HostOptionsForm.tsx

@@ -17,10 +17,10 @@ import { HostList } from '../../states/states';
 export function HostOptionsForm({
   data,
   saveOptions
-}: {
+}: Readonly<{
   data: HostList;
   saveOptions: (newData: HostList) => void;
-}) {
+}>) {
   const form = useForm({ initialValues: data });
   function deleteItem(key: string) {
     const newData = form.values;

src/frontend/src/components/forms/InstanceOptions.tsx

@@ -13,11 +13,11 @@ export function InstanceOptions({
   hostKey,
   ChangeHost,
   setHostEdit
-}: {
+}: Readonly<{
   hostKey: string;
   ChangeHost: (newHost: string | null) => void;
   setHostEdit: () => void;
-}) {
+}>) {
   const [HostListEdit, setHostListEdit] = useToggle([false, true] as const);
   const [setHost, setHostList, hostList] = useLocalState((state) => [
     state.setHost,
@@ -85,10 +85,10 @@ export function InstanceOptions({
 function ServerInfo({
   hostList,
   hostKey
-}: {
+}: Readonly<{
   hostList: HostList;
   hostKey: string;
-}) {
+}>) {
   const [server] = useServerApiState((state) => [state.server]);
 
   return (

src/frontend/src/components/forms/StandaloneField.tsx

@@ -9,13 +9,13 @@ export function StandaloneField({
   defaultValue,
   hideLabels,
   error
-}: {
+}: Readonly<{
   fieldDefinition: ApiFormFieldType;
   fieldName?: string;
   defaultValue?: any;
   hideLabels?: boolean;
   error?: string;
-}) {
+}>) {
   // Field must have a defined name
   const name = useMemo(() => fieldName ?? 'field', [fieldName]);
 

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

@@ -105,14 +105,14 @@ export function ApiFormField({
   hideLabels,
   url,
   setFields
-}: {
+}: Readonly<{
   fieldName: string;
   definition: ApiFormFieldType;
   control: Control<FieldValues, any>;
   hideLabels?: boolean;
   url?: string;
   setFields?: React.Dispatch<React.SetStateAction<ApiFormFieldSet>>;
-}) {
+}>) {
   const fieldId = useId();
   const controller = useController({
     name: fieldName,

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

@@ -11,10 +11,10 @@ dayjs.extend(customParseFormat);
 export default function DateField({
   controller,
   definition
-}: {
+}: Readonly<{
   controller: UseControllerReturn<FieldValues, any>;
   definition: ApiFormFieldType;
-}) {
+}>) {
   const fieldId = useId();
 
   const {

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

@@ -13,13 +13,13 @@ export function NestedObjectField({
   definition,
   url,
   setFields
-}: {
+}: Readonly<{
   control: Control<FieldValues, any>;
   definition: ApiFormFieldType;
   fieldName: string;
   url?: string;
   setFields?: React.Dispatch<React.SetStateAction<ApiFormFieldSet>>;
-}) {
+}>) {
   return (
     <Accordion defaultValue={'OpenByDefault'} variant="contained">
       <Accordion.Item value={'OpenByDefault'}>

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

@@ -28,12 +28,12 @@ export function RelatedModelField({
   fieldName,
   definition,
   limit = 10
-}: {
+}: Readonly<{
   controller: UseControllerReturn<FieldValues, any>;
   definition: ApiFormFieldType;
   fieldName: string;
   limit?: number;
-}) {
+}>) {
   const fieldId = useId();
   const {
     field,

src/frontend/src/components/items/AttachmentLink.tsx

@@ -55,10 +55,10 @@ export function attachmentIcon(attachment: string): ReactNode {
 export function AttachmentLink({
   attachment,
   external
-}: {
+}: Readonly<{
   attachment: string;
   external?: boolean;
-}): ReactNode {
+}>): ReactNode {
   let text = external ? attachment : attachment.split('/').pop();
 
   const host = useLocalState((s) => s.host);

src/frontend/src/components/items/DashboardItem.tsx

@@ -11,16 +11,16 @@ export function StatisticItem({
   id,
   data,
   isLoading
-}: {
+}: Readonly<{
   id: string;
   data: StatisticItemProps;
   isLoading: boolean;
-}) {
+}>) {
   return (
     <Paper withBorder p="xs" key={id} pos="relative">
       <LoadingOverlay visible={isLoading} overlayProps={{ blur: 2 }} />
       <Group justify="space-between">
-        <Text size="xs" color="dimmed" className={classes.dashboardItemTitle}>
+        <Text size="xs" c="dimmed" className={classes.dashboardItemTitle}>
           {data.title}
         </Text>
       </Group>

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

@@ -50,12 +50,12 @@ function ConstBody({
   detail,
   docchildren,
   link
-}: {
+}: Readonly<{
   text: string | JSX.Element;
   detail?: string | JSX.Element;
   docchildren?: React.ReactNode;
   link?: string;
-}) {
+}>) {
   const [height, setHeight] = useState(0);
   const ref = useRef(null);
 
@@ -78,7 +78,7 @@ function ConstBody({
         <ScrollArea h={height} mah={250}>
           <div ref={ref}>
             {detail && (
-              <Text size="xs" color="dimmed">
+              <Text size="xs" c="dimmed">
                 {detail}
               </Text>
             )}

src/frontend/src/components/items/DocumentationLinks.tsx

@@ -26,9 +26,9 @@ export type DocumentationLinkItem =
 
 export function DocumentationLinks({
   links
-}: {
+}: Readonly<{
   links: DocumentationLinkItem[];
-}) {
+}>) {
   const DocumentationLinkRenderer = ({
     link
   }: {

src/frontend/src/components/items/ErrorItem.tsx

@@ -1,6 +1,9 @@
 import { Trans } from '@lingui/macro';
 
-export function ErrorItem({ id, error }: { id: string; error?: any }) {
+export function ErrorItem({
+  id,
+  error
+}: Readonly<{ id: string; error?: any }>) {
   const error_message = error?.message || error?.toString() || (
     <Trans>Unknown error</Trans>
   );

src/frontend/src/components/items/GettingStartedCarousel.tsx

@@ -33,9 +33,9 @@ function StartedCard({
 
 export function GettingStartedCarousel({
   items
-}: {
+}: Readonly<{
   items: DocumentationLinkItem[];
-}) {
+}>) {
   const slides = items.map((item) => (
     <Carousel.Slide key={item.id}>
       <StartedCard {...item} />

src/frontend/src/components/items/InfoItem.tsx

@@ -12,14 +12,14 @@ export function InfoItem({
   value,
   link,
   detailDrawerLink
-}: {
+}: Readonly<{
   name: string;
   children?: React.ReactNode;
   type?: 'text' | 'boolean' | 'code';
   value?: any;
   link?: To;
   detailDrawerLink?: boolean;
-}) {
+}>) {
   function renderComponent() {
     if (value === undefined) return null;
 

src/frontend/src/components/items/LanguageSelect.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { getSupportedLanguages } from '../../contexts/LanguageContext';
 import { useLocalState } from '../../states/LocalState';
 
-export function LanguageSelect({ width = 80 }: { width?: number }) {
+export function LanguageSelect({ width = 80 }: Readonly<{ width?: number }>) {
   const [value, setValue] = useState<string | null>(null);
   const [locale, setLanguage] = useLocalState((state) => [
     state.language,

src/frontend/src/components/items/MenuLinks.tsx

@@ -23,10 +23,10 @@ export type menuItemsCollection = {
 function ConditionalDocTooltip({
   item,
   children
-}: {
+}: Readonly<{
   item: MenuLinkItem;
   children: React.ReactNode;
-}) {
+}>) {
   if (item.doctext !== undefined) {
     return (
       <DocTooltip
@@ -46,10 +46,10 @@ function ConditionalDocTooltip({
 export function MenuLinks({
   links,
   highlighted = false
-}: {
+}: Readonly<{
   links: MenuLinkItem[];
   highlighted?: boolean;
-}) {
+}>) {
   const filteredLinks = links.filter(
     (item) => !highlighted || item.highlight === true
   );

src/frontend/src/components/items/StylishText.tsx

@@ -5,10 +5,10 @@ import * as classes from '../../main.css';
 export function StylishText({
   children,
   size = 'md'
-}: {
+}: Readonly<{
   children: JSX.Element | string;
   size?: string;
-}) {
+}>) {
   return (
     <Text size={size} className={classes.signText} variant="gradient">
       {children}

src/frontend/src/components/modals/LicenseModal.tsx

@@ -16,7 +16,7 @@ import { api } from '../../App';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { apiUrl } from '../../states/ApiState';
 
-export function LicenceView(entries: Readonly<any[]>) {
+export function LicenceView(entries: any[]) {
   return (
     <Stack gap="xs">
       <Divider />

src/frontend/src/components/nav/BreadcrumbList.tsx

@@ -25,10 +25,10 @@ export type Breadcrumb = {
 export function BreadcrumbList({
   breadcrumbs,
   navCallback
-}: {
+}: Readonly<{
   breadcrumbs: Breadcrumb[];
   navCallback?: () => void;
-}) {
+}>) {
   const navigate = useNavigate();
 
   const elements = useMemo(() => {

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

@@ -88,7 +88,10 @@ export function DetailDrawer(props: Readonly<DrawerProps>) {
   );
 }
 
-export function DetailDrawerLink({ to, text }: { to: To; text: string }) {
+export function DetailDrawerLink({
+  to,
+  text
+}: Readonly<{ to: To; text: string }>) {
   const addDetailDrawer = useLocalState((state) => state.addDetailDrawer);
 
   const onNavigate = useCallback(() => {

src/frontend/src/components/nav/NavHoverMenu.tsx

@@ -26,9 +26,9 @@ const onlyItems = Object.values(menuItems);
 
 export function NavHoverMenu({
   openDrawer: openDrawer
-}: {
+}: Readonly<{
   openDrawer: () => void;
-}) {
+}>) {
   const [hostKey, hostList] = useLocalState((state) => [
     state.hostKey,
     state.hostList
@@ -99,7 +99,7 @@ export function NavHoverMenu({
               <Text fw={500} fz="sm">
                 <Trans>Get started</Trans>
               </Text>
-              <Text size="xs" color="dimmed">
+              <Text size="xs" c="dimmed">
                 <Trans>
                   Overview over high-level objects, functions and possible
                   usecases.

src/frontend/src/components/nav/NavigationDrawer.tsx

@@ -23,10 +23,10 @@ const onlyItems = Object.values(menuItems);
 export function NavigationDrawer({
   opened,
   close
-}: {
+}: Readonly<{
   opened: boolean;
   close: () => void;
-}) {
+}>) {
   return (
     <Drawer
       opened={opened}

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

@@ -30,10 +30,10 @@ import { StylishText } from '../items/StylishText';
 export function NotificationDrawer({
   opened,
   onClose
-}: {
+}: Readonly<{
   opened: boolean;
   onClose: () => void;
-}) {
+}>) {
   const { isLoggedIn } = useUserState();
 
   const navigate = useNavigate();

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

@@ -56,11 +56,11 @@ function QueryResultGroup({
   query,
   onRemove,
   onResultClick
-}: {
+}: Readonly<{
   query: SearchQuery;
   onRemove: (query: ModelType) => void;
   onResultClick: (query: ModelType, pk: number, event: any) => void;
-}) {
+}>) {
   if (query.results.count == 0) {
     return null;
   }
@@ -115,10 +115,10 @@ function QueryResultGroup({
 export function SearchDrawer({
   opened,
   onClose
-}: {
+}: Readonly<{
   opened: boolean;
   onClose: () => void;
-}) {
+}>) {
   const [value, setValue] = useState<string>('');
   const [searchText] = useDebouncedValue(value, 500);
 

src/frontend/src/components/render/InstanceFromUrl.tsx

@@ -14,10 +14,10 @@ import { RenderInstance } from './Instance';
 export function InstanceFromUrl({
   model,
   url
-}: {
+}: Readonly<{
   model: ModelType;
   url: string;
-}) {
+}>) {
   const [data, setData] = useState<any>(null);
   useMemo(
     () =>

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

@@ -110,9 +110,9 @@ export function RenderSalesOrder(
  */
 export function RenderSalesOrderShipment({
   instance
-}: {
+}: Readonly<{
   instance: any;
-}): ReactNode {
+}>): ReactNode {
   let order = instance.sales_order_detail || {};
 
   return (

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

@@ -83,9 +83,9 @@ export function RenderPartCategory(
  */
 export function RenderPartParameterTemplate({
   instance
-}: {
+}: Readonly<{
   instance: any;
-}): ReactNode {
+}>): ReactNode {
   return (
     <RenderInlineModel
       primary={instance.name}
@@ -97,9 +97,9 @@ export function RenderPartParameterTemplate({
 
 export function RenderPartTestTemplate({
   instance
-}: {
+}: Readonly<{
   instance: any;
-}): ReactNode {
+}>): ReactNode {
   return (
     <RenderInlineModel
       primary={instance.test_name}

src/frontend/src/components/settings/SettingItem.tsx

@@ -22,11 +22,11 @@ function SettingValue({
   setting,
   onEdit,
   onToggle
-}: {
+}: Readonly<{
   setting: Setting;
   onEdit: (setting: Setting) => void;
   onToggle: (setting: Setting, value: boolean) => void;
-}) {
+}>) {
   // Determine the text to display for the setting value
   const valueText: string = useMemo(() => {
     let value = setting.value;
@@ -81,12 +81,12 @@ export function SettingItem({
   shaded,
   onEdit,
   onToggle
-}: {
+}: Readonly<{
   setting: Setting;
   shaded: boolean;
   onEdit: (setting: Setting) => void;
   onToggle: (setting: Setting, value: boolean) => void;
-}) {
+}>) {
   const { colorScheme } = useMantineColorScheme();
 
   const style: Record<string, string> = { paddingLeft: '8px' };

src/frontend/src/components/settings/SettingList.tsx

@@ -31,11 +31,11 @@ export function SettingList({
   settingsState,
   keys,
   onChange
-}: {
+}: Readonly<{
   settingsState: SettingsStateProps;
   keys?: string[];
   onChange?: () => void;
-}) {
+}>) {
   useEffect(() => {
     settingsState.fetchSettings();
   }, []);
@@ -150,7 +150,7 @@ export function SettingList({
                   onToggle={onValueToggle}
                 />
               ) : (
-                <Text size="sm" style={{ fontStyle: 'italic' }} color="red">
+                <Text size="sm" style={{ fontStyle: 'italic' }} c="red">
                   Setting {key} not found
                 </Text>
               )}
@@ -167,19 +167,21 @@ export function SettingList({
   );
 }
 
-export function UserSettingList({ keys }: { keys: string[] }) {
+export function UserSettingList({ keys }: Readonly<{ keys: string[] }>) {
   const userSettings = useUserSettingsState();
 
   return <SettingList settingsState={userSettings} keys={keys} />;
 }
 
-export function GlobalSettingList({ keys }: { keys: string[] }) {
+export function GlobalSettingList({ keys }: Readonly<{ keys: string[] }>) {
   const globalSettings = useGlobalSettingsState();
 
   return <SettingList settingsState={globalSettings} keys={keys} />;
 }
 
-export function PluginSettingList({ pluginKey }: { pluginKey: string }) {
+export function PluginSettingList({
+  pluginKey
+}: Readonly<{ pluginKey: string }>) {
   const pluginSettingsStore = useRef(
     createPluginSettingsState({ plugin: pluginKey })
   ).current;
@@ -192,11 +194,11 @@ export function MachineSettingList({
   machinePk,
   configType,
   onChange
-}: {
+}: Readonly<{
   machinePk: string;
   configType: 'M' | 'D';
   onChange?: () => void;
-}) {
+}>) {
   const machineSettingsStore = useRef(
     createMachineSettingsState({
       machine: machinePk,

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

@@ -43,12 +43,12 @@ export function WidgetLayout({
   className = 'layout',
   localstorageName = 'argl',
   rowHeight = 30
-}: {
+}: Readonly<{
   items: LayoutItemType[];
   className?: string;
   localstorageName?: string;
   rowHeight?: number;
-}) {
+}>) {
   const [layouts, setLayouts] = useState({});
   const [editable, setEditable] = useDisclosure(false);
   const [boxShown, setBoxShown] = useDisclosure(true);
@@ -130,13 +130,13 @@ function WidgetControlBar({
   resetLayout,
   boxShown,
   boxFnc
-}: {
+}: Readonly<{
   editable: boolean;
   editFnc: () => void;
   resetLayout: () => void;
   boxShown: boolean;
   boxFnc: () => void;
-}) {
+}>) {
   useHotkeys([['mod+E', () => editFnc()]]);
 
   return (
@@ -177,7 +177,7 @@ function WidgetControlBar({
             }
             onClick={editFnc}
             rightSection={
-              <Text size="xs" color="dimmed">
+              <Text size="xs" c="dimmed">
                 ⌘E
               </Text>
             }

src/frontend/src/contexts/LanguageContext.tsx

@@ -57,7 +57,9 @@ export const getSupportedLanguages = (): Record<string, string> => {
   };
 };
 
-export function LanguageContext({ children }: { children: JSX.Element }) {
+export function LanguageContext({
+  children
+}: Readonly<{ children: JSX.Element }>) {
   const [language] = useLocalState((state) => [state.language]);
   const [server] = useServerApiState((state) => [state.server]);
 

src/frontend/src/contexts/ThemeContext.tsx

@@ -11,7 +11,9 @@ import { useLocalState } from '../states/LocalState';
 import { LanguageContext } from './LanguageContext';
 import { colorSchema } from './colorSchema';
 
-export function ThemeContext({ children }: { children: JSX.Element }) {
+export function ThemeContext({
+  children
+}: Readonly<{ children: JSX.Element }>) {
   const [primaryColor, whiteColor, blackColor, radius] = useLocalState(
     (state) => [
       state.primaryColor,

src/frontend/src/forms/StockForms.tsx

@@ -190,10 +190,10 @@ export function useCreateStockItem() {
 function StockItemDefaultMove({
   stockItem,
   value
-}: {
+}: Readonly<{
   stockItem: any;
   value: any;
-}) {
+}>) {
   const { data } = useSuspenseQuery({
     queryKey: [
       'location',

src/frontend/src/functions/loading.tsx

@@ -23,7 +23,7 @@ export const Loadable = (Component: any) => (props: JSX.IntrinsicAttributes) =>
     </Suspense>
   );
 
-export function LoadingItem({ item }: { item: any }): JSX.Element {
+export function LoadingItem({ item }: Readonly<{ item: any }>): JSX.Element {
   const Itm = Loadable(item);
   return <Itm />;
 }

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

@@ -195,10 +195,10 @@ function SpotlighPlayground() {
 function PlaygroundArea({
   title,
   content
-}: {
+}: Readonly<{
   title: string;
   content: ReactNode;
-}) {
+}>) {
   return (
     <Accordion.Item value={`accordion-playground-${title}`}>
       <Accordion.Control>

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

@@ -415,11 +415,11 @@ function HistoryTable({
   data,
   selection,
   setSelection
-}: {
+}: Readonly<{
   data: ScanItem[];
   selection: string[];
   setSelection: React.Dispatch<React.SetStateAction<string[]>>;
-}) {
+}>) {
   const toggleRow = (id: string) =>
     setSelection((current) =>
       current.includes(id)

src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx

@@ -209,7 +209,7 @@ function EmailContent() {
   );
 }
 
-function SsoContent({ dataProvider }: { dataProvider: any | undefined }) {
+function SsoContent({ dataProvider }: Readonly<{ dataProvider: any }>) {
   const [value, setValue] = useState<string>('');
   const [currentProviders, setCurrentProviders] = useState<[]>();
   const { isLoading, data } = useQuery({
@@ -249,7 +249,7 @@ function SsoContent({ dataProvider }: { dataProvider: any | undefined }) {
   /* renderer */
   if (isLoading) return <Loader />;
 
-  function ProviderButton({ provider }: { provider: any }) {
+  function ProviderButton({ provider }: Readonly<{ provider: any }>) {
     const button = (
       <Button
         key={provider.id}

src/frontend/src/pages/part/PartPricingPanel.tsx

@@ -28,7 +28,7 @@ export enum panelOptions {
   overall = 'overall'
 }
 
-export default function PartPricingPanel({ part }: { part: any }) {
+export default function PartPricingPanel({ part }: Readonly<{ part: any }>) {
   const user = useUserState();
 
   const { instance: pricing, instanceQuery } = useInstance({

src/frontend/src/pages/part/pricing/PriceBreakPanel.tsx

@@ -29,10 +29,10 @@ import { NoPricingData } from './PricingPanel';
 export default function PriceBreakPanel({
   part,
   endpoint
-}: {
+}: Readonly<{
   part: any;
   endpoint: ApiEndpoints;
-}) {
+}>) {
   const user = useUserState();
   const table = useTable('pricing-internal');
 
@@ -107,6 +107,7 @@ export default function PriceBreakPanel({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
+        key="add-price-break"
         tooltip={t`Add Price Break`}
         onClick={() => {
           newPriceBreak.open();

src/frontend/src/pages/part/pricing/PricingOverviewPanel.tsx

@@ -39,11 +39,11 @@ export default function PricingOverviewPanel({
   part,
   pricing,
   doNavigation
-}: {
+}: Readonly<{
   part: any;
   pricing: any;
   doNavigation: (panel: panelOptions) => void;
-}): ReactNode {
+}>): ReactNode {
   const columns: any[] = useMemo(() => {
     return [
       {

src/frontend/src/pages/part/pricing/SupplierPricingPanel.tsx

@@ -15,7 +15,9 @@ import {
 } from '../../../tables/purchasing/SupplierPriceBreakTable';
 import { NoPricingData } from './PricingPanel';
 
-export default function SupplierPricingPanel({ part }: { part: any }) {
+export default function SupplierPricingPanel({
+  part
+}: Readonly<{ part: any }>) {
   const table = useTable('pricing-supplier');
 
   const columns: TableColumn[] = useMemo(() => {

src/frontend/src/pages/part/pricing/VariantPricingPanel.tsx

@@ -17,10 +17,10 @@ import { NoPricingData } from './PricingPanel';
 export default function VariantPricingPanel({
   part,
   pricing
-}: {
+}: Readonly<{
   part: any;
   pricing: any;
-}): ReactNode {
+}>): ReactNode {
   const table = useTable('pricing-variants');
 
   const columns: TableColumn[] = useMemo(() => {

src/frontend/src/tables/ColumnSelect.tsx

@@ -5,10 +5,10 @@ import { IconAdjustments } from '@tabler/icons-react';
 export function TableColumnSelect({
   columns,
   onToggleColumn
-}: {
+}: Readonly<{
   columns: any[];
   onToggleColumn: (columnName: string) => void;
-}) {
+}>) {
   return (
     <Menu shadow="xs" closeOnItemClick={false}>
       <Menu.Target>

src/frontend/src/tables/DownloadAction.tsx

@@ -14,9 +14,9 @@ import {
 
 export function DownloadAction({
   downloadCallback
-}: {
+}: Readonly<{
   downloadCallback: (fileFormat: string) => void;
-}) {
+}>) {
   const formatOptions = [
     { value: 'csv', label: t`CSV`, icon: <IconFileTypeCsv /> },
     { value: 'tsv', label: t`TSV`, icon: <IconFileText /> },

src/frontend/src/tables/FilterSelectDrawer.tsx

@@ -28,10 +28,10 @@ import {
 function FilterItem({
   flt,
   tableState
-}: {
+}: Readonly<{
   flt: TableFilter;
   tableState: TableState;
-}) {
+}>) {
   const removeFilter = useCallback(() => {
     let newFilters = tableState.activeFilters.filter(
       (f) => f.name !== flt.name
@@ -60,10 +60,10 @@ function FilterItem({
 function FilterAddGroup({
   tableState,
   availableFilters
-}: {
+}: Readonly<{
   tableState: TableState;
   availableFilters: TableFilter[];
-}) {
+}>) {
   const filterOptions: TableFilterChoice[] = useMemo(() => {
     // List of filter names which are already active on this table
     let activeFilterNames: string[] = [];
@@ -156,12 +156,12 @@ export function FilterSelectDrawer({
   tableState,
   opened,
   onClose
-}: {
+}: Readonly<{
   availableFilters: TableFilter[];
   tableState: TableState;
   opened: boolean;
   onClose: () => void;
-}) {
+}>) {
   const [addFilter, setAddFilter] = useState<boolean>(false);
 
   // Hide the "add filter" selection whenever the selected filters change

src/frontend/src/tables/InvenTreeTable.tsx

@@ -143,12 +143,12 @@ export function InvenTreeTable<T extends Record<string, any>>({
   tableState,
   columns,
   props
-}: {
+}: Readonly<{
   url: string;
   tableState: TableState;
   columns: TableColumn<T>[];
   props: InvenTreeTableProps<T>;
-}) {
+}>) {
   const {
     getTableColumnNames,
     setTableColumnNames,

src/frontend/src/tables/Search.tsx

@@ -6,9 +6,9 @@ import { useEffect, useState } from 'react';
 
 export function TableSearchInput({
   searchCallback
-}: {
+}: Readonly<{
   searchCallback: (searchTerm: string) => void;
-}) {
+}>) {
   const [value, setValue] = useState<string>('');
   const [searchText] = useDebouncedValue(value, 500);
 

src/frontend/src/tables/TableHoverCard.tsx

@@ -16,13 +16,13 @@ export function TableHoverCard({
   title, // The title of the hovercard
   icon, // The icon to display
   iconColor // The icon color
-}: {
+}: Readonly<{
   value: any;
   extra?: ReactNode;
   title?: string;
   icon?: InvenTreeIconType;
   iconColor?: string;
-}) {
+}>) {
   const extraItems: ReactNode = useMemo(() => {
     if (Array.isArray(extra)) {
       if (extra.length == 0) {

src/frontend/src/tables/bom/BomTable.tsx

@@ -65,11 +65,11 @@ export function BomTable({
   partId,
   partLocked,
   params = {}
-}: {
+}: Readonly<{
   partId: number;
   partLocked?: boolean;
   params?: any;
-}) {
+}>) {
   const user = useUserState();
   const table = useTable('bom');
   const navigate = useNavigate();
@@ -507,18 +507,21 @@ export function BomTable({
   const tableActions = useMemo(() => {
     return [
       <ActionButton
+        key="import-bom"
         hidden={partLocked || !user.hasAddRole(UserRoles.part)}
         tooltip={t`Import BOM Data`}
         icon={<IconFileArrowLeft />}
         onClick={() => importBomItem.open()}
       />,
       <ActionButton
+        key="validate-bom"
         hidden={partLocked || !user.hasChangeRole(UserRoles.part)}
         tooltip={t`Validate BOM`}
         icon={<IconCircleCheck />}
         onClick={() => validateBom.open()}
       />,
       <AddItemButton
+        key="add-bom-item"
         hidden={partLocked || !user.hasAddRole(UserRoles.part)}
         tooltip={t`Add BOM Item`}
         onClick={() => newBomItem.open()}

src/frontend/src/tables/bom/UsedInTable.tsx

@@ -18,10 +18,10 @@ import { InvenTreeTable } from '../InvenTreeTable';
 export function UsedInTable({
   partId,
   params = {}
-}: {
+}: Readonly<{
   partId: number;
   params?: any;
-}) {
+}>) {
   const table = useTable('usedin');
 
   const tableColumns: TableColumn[] = useMemo(() => {

src/frontend/src/tables/build/BuildOrderTable.tsx

@@ -33,11 +33,11 @@ export function BuildOrderTable({
   partId,
   parentBuildId,
   salesOrderId
-}: {
+}: Readonly<{
   partId?: number;
   parentBuildId?: number;
   salesOrderId?: number;
-}) {
+}>) {
   const tableColumns = useMemo(() => {
     return [
       ReferenceColumn({}),

src/frontend/src/tables/company/AddressTable.tsx

@@ -22,10 +22,10 @@ import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
 export function AddressTable({
   companyId,
   params
-}: {
+}: Readonly<{
   companyId: number;
   params?: any;
-}) {
+}>) {
   const user = useUserState();
 
   const table = useTable('address');
@@ -179,6 +179,7 @@ export function AddressTable({
 
     return [
       <AddItemButton
+        key="add-address"
         tooltip={t`Add Address`}
         onClick={() => newAddress.open()}
         hidden={!can_add}

src/frontend/src/tables/company/CompanyTable.tsx

@@ -28,10 +28,10 @@ import { RowAction, RowEditAction } from '../RowActions';
 export function CompanyTable({
   params,
   path
-}: {
+}: Readonly<{
   params?: any;
   path?: string;
-}) {
+}>) {
   const table = useTable('company');
 
   const navigate = useNavigate();
@@ -120,6 +120,7 @@ export function CompanyTable({
 
     return [
       <AddItemButton
+        key="add-company"
         tooltip={t`Add Company`}
         onClick={() => newCompany.open()}
         hidden={!can_add}

src/frontend/src/tables/company/ContactTable.tsx

@@ -20,10 +20,10 @@ import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
 export function ContactTable({
   companyId,
   params
-}: {
+}: Readonly<{
   companyId: number;
   params?: any;
-}) {
+}>) {
   const user = useUserState();
 
   const table = useTable('contact');
@@ -126,6 +126,7 @@ export function ContactTable({
 
     return [
       <AddItemButton
+        key="add-contact"
         tooltip={t`Add contact`}
         onClick={() => newContact.open()}
         hidden={!can_add}

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

@@ -94,10 +94,10 @@ function attachmentTableColumns(): TableColumn[] {
 export function AttachmentTable({
   model_type,
   model_id
-}: {
+}: Readonly<{
   model_type: ModelType;
   model_id: number;
-}): ReactNode {
+}>): ReactNode {
   const user = useUserState();
   const table = useTable(`${model_type}-attachments`);
 

src/frontend/src/tables/machine/MachineListTable.tsx

@@ -68,7 +68,7 @@ interface MachineI {
   restart_required: boolean;
 }
 
-function MachineStatusIndicator({ machine }: { machine: MachineI }) {
+function MachineStatusIndicator({ machine }: Readonly<{ machine: MachineI }>) {
   const style = { marginLeft: '4px' };
 
   // machine is not active, show a gray dot
@@ -142,10 +142,10 @@ export function useMachineTypeDriver({
 function MachineDrawer({
   machinePk,
   refreshTable
-}: {
+}: Readonly<{
   machinePk: string;
   refreshTable: () => void;
-}) {
+}>) {
   const navigate = useNavigate();
   const {
     data: machine,
@@ -406,11 +406,11 @@ export function MachineListTable({
   props,
   renderMachineDrawer = true,
   createProps
-}: {
+}: Readonly<{
   props: InvenTreeTableProps;
   renderMachineDrawer?: boolean;
   createProps?: { machine_type?: string; driver?: string };
-}) {
+}>) {
   const { machineTypes, machineDrivers } = useMachineTypeDriver();
 
   const table = useTable('machine');
@@ -543,6 +543,7 @@ export function MachineListTable({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
+        key="outline"
         variant="outline"
         onClick={() => {
           setCreateFormMachineType(null);

src/frontend/src/tables/machine/MachineTypeTable.tsx

@@ -45,7 +45,9 @@ export interface MachineDriverI {
   driver_errors: string[];
 }
 
-function MachineTypeDrawer({ machineTypeSlug }: { machineTypeSlug: string }) {
+function MachineTypeDrawer({
+  machineTypeSlug
+}: Readonly<{ machineTypeSlug: string }>) {
   const navigate = useNavigate();
 
   const { machineTypes, refresh, isFetching } = useMachineTypeDriver({
@@ -169,9 +171,9 @@ function MachineTypeDrawer({ machineTypeSlug }: { machineTypeSlug: string }) {
 
 function MachineDriverDrawer({
   machineDriverSlug
-}: {
+}: Readonly<{
   machineDriverSlug: string;
-}) {
+}>) {
   const { machineDrivers, machineTypes, refresh, isFetching } =
     useMachineTypeDriver();
   const machineDriver = useMemo(
@@ -306,9 +308,9 @@ function MachineDriverDrawer({
  */
 export function MachineTypeListTable({
   props
-}: {
+}: Readonly<{
   props: InvenTreeTableProps;
-}) {
+}>) {
   const table = useTable('machineTypes');
   const navigate = useNavigate();
 

src/frontend/src/tables/notifications/NotificationsTable.tsx

@@ -13,12 +13,12 @@ export function NotificationTable({
   tableState,
   tableActions,
   actions
-}: {
+}: Readonly<{
   params: any;
   tableState: TableState;
   tableActions: any[];
   actions: (record: any) => RowAction[];
-}) {
+}>) {
   const columns: TableColumn[] = useMemo(() => {
     return [
       {

src/frontend/src/tables/part/ParametricPartTable.tsx

@@ -34,11 +34,11 @@ function ParameterCell({
   record,
   template,
   canEdit
-}: {
+}: Readonly<{
   record: any;
   template: any;
   canEdit: boolean;
-}) {
+}>) {
   const { hovered, ref } = useHover();
 
   // Find matching template parameter
@@ -92,9 +92,9 @@ function ParameterCell({
 
 export default function ParametricPartTable({
   categoryId
-}: {
+}: Readonly<{
   categoryId?: any;
-}) {
+}>) {
   const table = useTable('parametric-parts');
   const user = useUserState();
   const navigate = useNavigate();

src/frontend/src/tables/part/PartCategoryTable.tsx

@@ -25,7 +25,7 @@ import { RowAction, RowEditAction } from '../RowActions';
 /**
  * PartCategoryTable - Displays a table of part categories
  */
-export function PartCategoryTable({ parentId }: { parentId?: any }) {
+export function PartCategoryTable({ parentId }: Readonly<{ parentId?: any }>) {
   const table = useTable('partcategory');
   const user = useUserState();
 
@@ -109,6 +109,7 @@ export function PartCategoryTable({ parentId }: { parentId?: any }) {
 
     return [
       <AddItemButton
+        key="add-part-category"
         tooltip={t`Add Part Category`}
         onClick={() => newCategory.open()}
         hidden={!can_add}

src/frontend/src/tables/part/PartTable.tsx

@@ -73,7 +73,7 @@ function partTableColumns(): TableColumn[] {
 
         if (min_stock > stock) {
           extra.push(
-            <Text key="min-stock" color="orange">
+            <Text key="min-stock" c="orange">
               {t`Minimum stock` + `: ${min_stock}`}
             </Text>
           );
@@ -144,7 +144,7 @@ function partTableColumns(): TableColumn[] {
               <Group gap="xs" justify="left" wrap="nowrap">
                 <Text c={color}>{text}</Text>
                 {record.units && (
-                  <Text size="xs" color={color}>
+                  <Text size="xs" c={color}>
                     [{record.units}]
                   </Text>
                 )}
@@ -312,10 +312,10 @@ function partTableFilters(): TableFilter[] {
 export function PartListTable({
   props,
   defaultPartData
-}: {
+}: Readonly<{
   props: InvenTreeTableProps;
   defaultPartData?: any;
-}) {
+}>) {
   const tableColumns = useMemo(() => partTableColumns(), []);
   const tableFilters = useMemo(() => partTableFilters(), []);
 
@@ -338,6 +338,7 @@ export function PartListTable({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
+        key="add-part"
         hidden={!user.hasAddRole(UserRoles.part)}
         tooltip={t`Add Part`}
         onClick={() => newPart.open()}

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

@@ -127,7 +127,7 @@ export function PartThumbTable({
   search = '',
   pk,
   setImage
-}: ThumbTableProps) {
+}: Readonly<ThumbTableProps>) {
   const [thumbImage, setThumbImage] = useState<string | null>(null);
   const [filterInput, setFilterInput] = useState<string>('');
   const [filterQuery, setFilterQuery] = useState<string>(search);

src/frontend/src/tables/part/PartVariantTable.tsx

@@ -7,7 +7,7 @@ import { PartListTable } from './PartTable';
 /**
  * Display variant parts for the specified parent part
  */
-export function PartVariantTable({ part }: { part: any }) {
+export function PartVariantTable({ part }: Readonly<{ part: any }>) {
   const tableFilters: TableFilter[] = useMemo(() => {
     return [
       {

src/frontend/src/tables/part/RelatedPartTable.tsx

@@ -22,7 +22,9 @@ import { RowAction, RowDeleteAction } from '../RowActions';
 /**
  * Construct a table listing related parts for a given part
  */
-export function RelatedPartTable({ partId }: { partId: number }): ReactNode {
+export function RelatedPartTable({
+  partId
+}: Readonly<{ partId: number }>): ReactNode {
   const table = useTable('relatedparts');
 
   const navigate = useNavigate();
@@ -103,6 +105,7 @@ export function RelatedPartTable({ partId }: { partId: number }): ReactNode {
   const tableActions: ReactNode[] = useMemo(() => {
     return [
       <AddItemButton
+        key="add-related-part"
         tooltip={t`Add related part`}
         hidden={!user.hasAddRole(UserRoles.part)}
         onClick={() => newRelatedPart.open()}

src/frontend/src/tables/purchasing/ManufacturerPartParameterTable.tsx

@@ -19,9 +19,9 @@ import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
 
 export default function ManufacturerPartParameterTable({
   params
-}: {
+}: Readonly<{
   params: any;
-}) {
+}>) {
   const table = useTable('manufacturer-part-parameter');
   const user = useUserState();
 

src/frontend/src/tables/purchasing/ManufacturerPartTable.tsx

@@ -23,7 +23,9 @@ import { RowAction, RowDeleteAction, RowEditAction } from '../RowActions';
 /*
  * Construct a table listing manufacturer parts
  */
-export function ManufacturerPartTable({ params }: { params: any }): ReactNode {
+export function ManufacturerPartTable({
+  params
+}: Readonly<{ params: any }>): ReactNode {
   const table = useTable('manufacturerparts');
 
   const user = useUserState();
@@ -100,6 +102,7 @@ export function ManufacturerPartTable({ params }: { params: any }): ReactNode {
 
     return [
       <AddItemButton
+        key="add-manufacturer-part"
         tooltip={t`Add Manufacturer Part`}
         onClick={() => createManufacturerPart.open()}
         hidden={!can_add}

src/frontend/src/tables/purchasing/PurchaseOrderLineItemTable.tsx

@@ -53,13 +53,13 @@ export function PurchaseOrderLineItemTable({
   currency,
   supplierId,
   params
-}: {
+}: Readonly<{
   order: any;
   orderId: number;
   currency: string;
   supplierId?: number;
   params?: any;
-}) {
+}>) {
   const table = useTable('purchase-order-line-item');
 
   const user = useUserState();
@@ -333,12 +333,14 @@ export function PurchaseOrderLineItemTable({
   const tableActions = useMemo(() => {
     return [
       <ActionButton
+        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"
         tooltip={t`Add line item`}
         onClick={() => {
           setInitialData({
@@ -349,6 +351,7 @@ export function PurchaseOrderLineItemTable({
         hidden={!orderOpen || !user?.hasAddRole(UserRoles.purchase_order)}
       />,
       <ActionButton
+        key="receive-items"
         text={t`Receive items`}
         icon={<IconSquareArrowRight />}
         onClick={() => receiveLineItems.open()}

src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx

@@ -38,10 +38,10 @@ import { InvenTreeTable } from '../InvenTreeTable';
 export function PurchaseOrderTable({
   supplierId,
   supplierPartId
-}: {
+}: Readonly<{
   supplierId?: number;
   supplierPartId?: number;
-}) {
+}>) {
   const table = useTable('purchase-order');
   const user = useUserState();
 
@@ -137,6 +137,7 @@ export function PurchaseOrderTable({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
+        key="add-purchase-order"
         tooltip={t`Add Purchase Order`}
         onClick={() => newPurchaseOrder.open()}
         hidden={!user.hasAddRole(UserRoles.purchase_order)}

src/frontend/src/tables/purchasing/SupplierPartTable.tsx

@@ -33,7 +33,9 @@ import { TableHoverCard } from '../TableHoverCard';
  * Construct a table listing supplier parts
  */
 
-export function SupplierPartTable({ params }: { params: any }): ReactNode {
+export function SupplierPartTable({
+  params
+}: Readonly<{ params: any }>): ReactNode {
   const table = useTable('supplierparts');
 
   const user = useUserState();
@@ -173,6 +175,7 @@ export function SupplierPartTable({ params }: { params: any }): ReactNode {
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
+        key="add-supplier-part"
         tooltip={t`Add supplier part`}
         onClick={() => addSupplierPart.open()}
         hidden={!user.hasAddRole(UserRoles.purchase_order)}

src/frontend/src/tables/purchasing/SupplierPriceBreakTable.tsx

@@ -112,9 +112,9 @@ export function SupplierPriceBreakColumns(): TableColumn[] {
 
 export default function SupplierPriceBreakTable({
   supplierPartId
-}: {
+}: Readonly<{
   supplierPartId: number;
-}) {
+}>) {
   const table = useTable('supplierpricebreaks');
 
   const user = useUserState();
@@ -165,6 +165,7 @@ export default function SupplierPriceBreakTable({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
+        key="add-price-break"
         tooltip={t`Add Price Break`}
         onClick={() => {
           newPriceBreak.open();

src/frontend/src/tables/sales/ReturnOrderTable.tsx

@@ -32,7 +32,7 @@ import {
 } from '../Filter';
 import { InvenTreeTable } from '../InvenTreeTable';
 
-export function ReturnOrderTable({ params }: { params?: any }) {
+export function ReturnOrderTable({ params }: Readonly<{ params?: any }>) {
   const table = useTable('return-orders');
   const user = useUserState();
 
@@ -125,6 +125,7 @@ export function ReturnOrderTable({ params }: { params?: any }) {
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
+        key="add-return-order"
         tooltip={t`Add Return Order`}
         onClick={() => newReturnOrder.open()}
         hidden={!user.hasAddRole(UserRoles.return_order)}

src/frontend/src/tables/sales/SalesOrderTable.tsx

@@ -36,10 +36,10 @@ import { InvenTreeTable } from '../InvenTreeTable';
 export function SalesOrderTable({
   partId,
   customerId
-}: {
+}: Readonly<{
   partId?: number;
   customerId?: number;
-}) {
+}>) {
   const table = useTable('sales-order');
   const user = useUserState();
 
@@ -93,6 +93,7 @@ export function SalesOrderTable({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
+        key="add-sales-order"
         tooltip={t`Add Sales Order`}
         onClick={() => newSalesOrder.open()}
         hidden={!user.hasAddRole(UserRoles.sales_order)}

src/frontend/src/tables/settings/GroupTable.tsx

@@ -38,10 +38,10 @@ export interface GroupDetailI {
 export function GroupDrawer({
   id,
   refreshTable
-}: {
+}: Readonly<{
   id: string;
   refreshTable: () => void;
-}) {
+}>) {
   const {
     instance,
     refreshInstance,

src/frontend/src/tables/settings/TemplateTable.tsx

@@ -58,10 +58,10 @@ export interface TemplateProps {
 export function TemplateDrawer({
   id,
   templateProps
-}: {
+}: Readonly<{
   id: string | number;
   templateProps: TemplateProps;
-}) {
+}>) {
   const { templateEndpoint, printingEndpoint } = templateProps;
 
   const {
@@ -109,9 +109,9 @@ export function TemplateDrawer({
 
 export function TemplateTable({
   templateProps
-}: {
+}: Readonly<{
   templateProps: TemplateProps;
-}) {
+}>) {
   const { templateEndpoint, additionalFormFields } = templateProps;
 
   const table = useTable(`${templateEndpoint}-template`);

src/frontend/src/tables/stock/InstalledItemsTable.tsx

@@ -11,9 +11,9 @@ import { InvenTreeTable } from '../InvenTreeTable';
 
 export default function InstalledItemsTable({
   parentId
-}: {
+}: Readonly<{
   parentId?: number | string;
-}) {
+}>) {
   const table = useTable('stock_item_install');
   const user = useUserState();
 

src/frontend/src/tables/stock/StockItemTable.tsx

@@ -173,7 +173,7 @@ function stockItemTableColumns(): TableColumn[] {
         if (available != quantity) {
           if (available > 0) {
             extra.push(
-              <Text key="available" size="sm" color="orange">
+              <Text key="available" size="sm" c="orange">
                 {t`Available` + `: ${available}`}
               </Text>
             );
@@ -182,7 +182,7 @@ function stockItemTableColumns(): TableColumn[] {
               <Text
                 key="no-stock"
                 size="sm"
-                color="red"
+                c="red"
               >{t`No stock available`}</Text>
             );
           }
@@ -207,7 +207,7 @@ function stockItemTableColumns(): TableColumn[] {
               <Group gap="xs" justify="left" wrap="nowrap">
                 <Text c={color}>{text}</Text>
                 {part.units && (
-                  <Text size="xs" color={color}>
+                  <Text size="xs" c={color}>
                     [{part.units}]
                   </Text>
                 )}
@@ -388,11 +388,11 @@ export function StockItemTable({
   params = {},
   allowAdd = false,
   tableName = 'stockitems'
-}: {
+}: Readonly<{
   params?: any;
   allowAdd?: boolean;
   tableName: string;
-}) {
+}>) {
   let tableColumns = useMemo(() => stockItemTableColumns(), []);
   let tableFilters = useMemo(() => stockItemTableFilters(), []);
 
@@ -441,6 +441,7 @@ export function StockItemTable({
     let can_change_order = user.hasChangeRole(UserRoles.purchase_order);
     return [
       <ActionDropdown
+        key="stock-actions"
         tooltip={t`Stock Actions`}
         icon={<InvenTreeIcon icon="stock" />}
         disabled={table.selectedRecords.length === 0}
@@ -531,6 +532,7 @@ export function StockItemTable({
         ]}
       />,
       <AddItemButton
+        key="add-stock-item"
         hidden={!allowAdd || !user.hasAddRole(UserRoles.stock)}
         tooltip={t`Add Stock Item`}
         onClick={() => newStockItem.open()}

src/frontend/src/tables/stock/StockItemTestResultTable.tsx

@@ -43,10 +43,10 @@ import {
 export default function StockItemTestResultTable({
   partId,
   itemId
-}: {
+}: Readonly<{
   partId: number;
   itemId: number;
-}) {
+}>) {
   const user = useUserState();
   const table = useTable('stocktests');
 
@@ -399,6 +399,7 @@ export default function StockItemTestResultTable({
   const tableActions = useMemo(() => {
     return [
       <AddItemButton
+        key="add-test-result"
         tooltip={t`Add Test Result`}
         onClick={() => {
           setSelectedTemplate(undefined);

src/frontend/src/tables/stock/StockLocationTable.tsx

@@ -25,7 +25,7 @@ import { RowAction, RowEditAction } from '../RowActions';
 /**
  * Stock location table
  */
-export function StockLocationTable({ parentId }: { parentId?: any }) {
+export function StockLocationTable({ parentId }: Readonly<{ parentId?: any }>) {
   const table = useTable('stocklocation');
   const user = useUserState();
 
@@ -130,6 +130,7 @@ export function StockLocationTable({ parentId }: { parentId?: any }) {
 
     return [
       <AddItemButton
+        key="add-stock-location"
         tooltip={t`Add Stock Location`}
         onClick={() => newLocation.open()}
         hidden={!can_add}