fix(backend): Bump maybe vulnerable esbuild (#9155)

* fix(backend): Bump vulnerable vanilla-extract

* bump deps futher

* remove @types/dompurify

* bump @lingui

* use more modern image
20.04 ships with node 18 as default, 24.04 with 20

* bump rest of image deps

* bump deps

* bump base deps

* bump resolution

* lower resolution

* fix resolution

* update lingui

* switch to build-in macro

* fix imports

.github/workflows/qc_checks.yaml

@@ -77,7 +77,7 @@ jobs:
 
   pre-commit:
     name: Style [pre-commit]
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     needs: paths-filter
     if: needs.paths-filter.outputs.server == 'true' || needs.paths-filter.outputs.frontend == 'true' || needs.paths-filter.outputs.requirements == 'true' || needs.paths-filter.outputs.force == 'true'
 
@@ -99,7 +99,7 @@ jobs:
 
   mkdocs:
     name: Style [Documentation]
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
 
     needs: paths-filter
 
@@ -127,7 +127,7 @@ jobs:
 
   schema:
     name: Tests - API Schema Documentation
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     needs: paths-filter
     if: needs.paths-filter.outputs.server == 'true' || needs.paths-filter.outputs.force == 'true'
     env:
@@ -222,7 +222,7 @@ jobs:
 
   schema-push:
     name: Push new schema
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     needs: [paths-filter, schema]
     if: needs.schema.result == 'success' && github.ref == 'refs/heads/master' && needs.paths-filter.outputs.api == 'true' && github.repository_owner == 'inventree'
     env:
@@ -262,7 +262,7 @@ jobs:
 
   python:
     name: Tests - inventree-python
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
 
     needs: ["pre-commit", "paths-filter"]
     if: needs.paths-filter.outputs.server == 'true' || needs.paths-filter.outputs.force == 'true'
@@ -307,7 +307,7 @@ jobs:
 
   coverage:
     name: Tests - DB [SQLite] + Coverage ${{ matrix.python_version }}
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
 
     needs: ["pre-commit", "paths-filter"]
     if: needs.paths-filter.outputs.server == 'true' || needs.paths-filter.outputs.force == 'true'
@@ -353,7 +353,7 @@ jobs:
 
   postgres:
     name: Tests - DB [PostgreSQL]
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     needs: ["pre-commit", "paths-filter"]
     if: needs.paths-filter.outputs.server == 'true' || needs.paths-filter.outputs.force == 'true'
 
@@ -401,7 +401,7 @@ jobs:
 
   mysql:
     name: Tests - DB [MySQL]
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
 
     needs: ["pre-commit", "paths-filter"]
     if: needs.paths-filter.outputs.server == 'true' || needs.paths-filter.outputs.force == 'true'
@@ -556,7 +556,7 @@ jobs:
 
   platform_ui:
     name: Tests - Web UI
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     timeout-minutes: 60
     needs: ["pre-commit", "paths-filter"]
     if: needs.paths-filter.outputs.frontend == 'true' || needs.paths-filter.outputs.force == 'true'
@@ -635,7 +635,7 @@ jobs:
 
   platform_ui_build:
     name: Build - Web UI
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     timeout-minutes: 60
 
     steps:
@@ -664,7 +664,7 @@ jobs:
 
   zizmor:
     name: Security [Zizmor]
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     needs: ["pre-commit", "paths-filter"]
     if: needs.paths-filter.outputs.cicd == 'true' || needs.paths-filter.outputs.force == 'true'
 

src/frontend/.babelrc

@@ -3,6 +3,6 @@
         "@babel/preset-react"
     ],
     "plugins": [
-        "macros"
+        "@lingui/babel-plugin-lingui-macro"
     ]
 }

src/frontend/package.json

@@ -28,8 +28,8 @@
         "@fullcalendar/daygrid": "^6.1.15",
         "@fullcalendar/interaction": "^6.1.15",
         "@fullcalendar/react": "^6.1.15",
-        "@lingui/core": "^4.11.4",
+        "@lingui/core": "^5.3.0",
-        "@lingui/react": "^4.11.4",
+        "@lingui/react": "^5.3.0",
         "@mantine/carousel": "^7.16.0",
         "@mantine/charts": "^7.16.0",
         "@mantine/core": "^7.16.0",
@@ -44,12 +44,11 @@
         "@sentry/react": "^8.43.0",
         "@tabler/icons-react": "^3.17.0",
         "@tanstack/react-query": "^5.56.2",
-        "@types/dompurify": "^3.0.5",
         "@uiw/codemirror-theme-vscode": "4.23.7",
         "@uiw/react-codemirror": "4.23.7",
         "@uiw/react-split": "^5.9.3",
-        "@vanilla-extract/css": "^1.17.0",
+        "@vanilla-extract/css": "^1.17.1",
-        "axios": "^1.8.2",
+        "axios": "^1.8.4",
         "clsx": "^2.1.1",
         "codemirror": "6.0.1",
         "dayjs": "^1.11.13",
@@ -75,12 +74,13 @@
         "zustand": "^4.5.5"
     },
     "devDependencies": {
-        "@babel/core": "^7.26.0",
+        "@babel/core": "^7.26.10",
         "@babel/preset-react": "^7.26.3",
-        "@babel/preset-typescript": "^7.26.0",
+        "@babel/preset-typescript": "^7.27.0",
-        "@codecov/vite-plugin": "^1.7.0",
+        "@codecov/vite-plugin": "^1.9.0",
-        "@lingui/cli": "^4.11.4",
+        "@lingui/babel-plugin-lingui-macro": "^5.3.0",
-        "@lingui/macro": "^4.11.4",
+        "@lingui/cli": "^5.3.0",
+        "@lingui/macro": "^5.3.0",
         "@playwright/test": "^1.49.1",
         "@types/node": "^22.6.0",
         "@types/qrcode": "^1.5.5",
@@ -89,13 +89,13 @@
         "@types/react-grid-layout": "^1.3.5",
         "@types/react-router-dom": "^5.3.3",
         "@types/react-window": "^1.8.8",
-        "@vanilla-extract/vite-plugin": "^4.0.19",
+        "@vanilla-extract/vite-plugin": "^5.0.1",
         "@vitejs/plugin-react": "^4.3.4",
         "babel-plugin-macros": "^3.1.0",
         "nyc": "^17.1.0",
         "rollup-plugin-license": "^3.5.3",
-        "typescript": "^5.7.3",
+        "typescript": "^5.8.2",
-        "vite": "^6.0.9",
+        "vite": "^6.2.3",
         "vite-plugin-babel-macros": "^1.0.6",
         "vite-plugin-istanbul": "^6.0.2"
     }

src/frontend/src/components/Boundary.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Alert } from '@mantine/core';
 import { ErrorBoundary, type FallbackRender } from '@sentry/react';
 import { IconExclamationCircle } from '@tabler/icons-react';

src/frontend/src/components/barcodes/BarcodeCameraInput.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { ActionIcon, Container, Group, Select, Stack } from '@mantine/core';
 import { useDocumentVisibility, useLocalStorage } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';

src/frontend/src/components/barcodes/BarcodeInput.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import {
   Alert,
   Box,

src/frontend/src/components/barcodes/BarcodeKeyboardInput.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Button, FocusTrap, Stack, TextInput } from '@mantine/core';
 import { IconQrcode } from '@tabler/icons-react';
 import { useCallback, useState } from 'react';

src/frontend/src/components/barcodes/BarcodeScanDialog.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Box, Divider, Modal } from '@mantine/core';
 import { useCallback, useState } from 'react';
 import { type NavigateFunction, useNavigate } from 'react-router-dom';

src/frontend/src/components/barcodes/QRCode.tsx

@@ -1,4 +1,5 @@
-import { Trans, t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
 import {
   Alert,
   Box,

src/frontend/src/components/buttons/AdminButton.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { IconUserStar } from '@tabler/icons-react';
 import { useCallback, useMemo } from 'react';
 

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

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import {
   ActionIcon,
   Button,

src/frontend/src/components/buttons/PrintingActions.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { IconPrinter, IconReport, IconTags } from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { useMemo, useState } from 'react';

src/frontend/src/components/buttons/RemoveRowButton.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 
 import { InvenTreeIcon } from '../../functions/icons';
 import { ActionButton } from './ActionButton';

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

@@ -14,7 +14,7 @@ import {
   IconLogin
 } from '@tabler/icons-react';
 
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { ProviderLogin } from '../../functions/auth';
 import type { Provider } from '../../states/states';
 

src/frontend/src/components/buttons/ScanButton.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { ActionIcon, Tooltip } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { IconQrcode } from '@tabler/icons-react';

src/frontend/src/components/buttons/SpotlightButton.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { ActionIcon, Tooltip } from '@mantine/core';
 import { IconCommand } from '@tabler/icons-react';
 

src/frontend/src/components/buttons/StarredToggleButton.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { showNotification } from '@mantine/notifications';
 import { IconBell } from '@tabler/icons-react';
 import { useApi } from '../../contexts/ApiContext';

src/frontend/src/components/buttons/YesNoButton.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Badge, Skeleton } from '@mantine/core';
 
 import { isTrue } from '../../functions/conversion';

src/frontend/src/components/calendar/Calendar.tsx

@@ -4,7 +4,7 @@ import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
 import FullCalendar from '@fullcalendar/react';
 
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import {
   ActionIcon,
   Box,

src/frontend/src/components/calendar/OrderCalendar.tsx

@@ -3,7 +3,7 @@ import type {
   EventClickArg,
   EventContentArg
 } from '@fullcalendar/core';
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { ActionIcon, Group, Text } from '@mantine/core';
 import { hideNotification, showNotification } from '@mantine/notifications';
 import {

src/frontend/src/components/dashboard/DashboardLayout.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Alert, Card, Center, Loader, Text } from '@mantine/core';
 import { useDisclosure, useHotkeys } from '@mantine/hooks';
 import { IconInfoCircle } from '@tabler/icons-react';

src/frontend/src/components/dashboard/DashboardMenu.tsx

@@ -1,4 +1,5 @@
-import { Trans, t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
 import {
   ActionIcon,
   Group,

src/frontend/src/components/dashboard/DashboardWidget.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { ActionIcon, Box, Group, Overlay, Paper, Tooltip } from '@mantine/core';
 import { IconX } from '@tabler/icons-react';
 

src/frontend/src/components/dashboard/DashboardWidgetDrawer.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import {
   ActionIcon,
   Alert,

src/frontend/src/components/dashboard/DashboardWidgetLibrary.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 
 import { ModelType } from '../../enums/ModelType';
 import { useGlobalSettingsState } from '../../states/SettingsState';

src/frontend/src/components/dashboard/widgets/ColorToggleWidget.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Group } from '@mantine/core';
 
 import { ColorToggle } from '../../items/ColorToggle';

src/frontend/src/components/dashboard/widgets/GetStartedWidget.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Stack } from '@mantine/core';
 import { useMemo } from 'react';
 

src/frontend/src/components/dashboard/widgets/LanguageSelectWidget.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Stack } from '@mantine/core';
 
 import { LanguageSelect } from '../../items/LanguageSelect';

src/frontend/src/components/dashboard/widgets/NewsWidget.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import {
   ActionIcon,
   Alert,

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

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import {
   Anchor,
   Avatar,

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

@@ -1,4 +1,5 @@
-import { Trans, t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
 import {
   AspectRatio,
   Button,

src/frontend/src/components/editors/NotesEditor.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { notifications } from '@mantine/notifications';
 import { useQuery } from '@tanstack/react-query';
 import DOMPurify from 'dompurify';

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

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { IconCode } from '@tabler/icons-react';
 
 import type { Editor } from '../TemplateEditor';

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

@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/macro';
+import { Trans } from '@lingui/react/macro';
 import { forwardRef, useImperativeHandle, useState } from 'react';
 
 import { api } from '../../../../App';

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

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { IconFileTypePdf } from '@tabler/icons-react';
 
 import type { PreviewArea } from '../TemplateEditor';

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

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import {
   Alert,
   CloseButton,

src/frontend/src/components/errors/ClientError.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 
 import GenericErrorPage from './GenericErrorPage';
 import NotAuthenticated from './NotAuthenticated';

src/frontend/src/components/errors/GenericErrorPage.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/macro';
+import { Trans } from '@lingui/react/macro';
 import {
   ActionIcon,
   Button,

src/frontend/src/components/errors/NotAuthenticated.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 
 import GenericErrorPage from './GenericErrorPage';
 

src/frontend/src/components/errors/NotFound.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 
 import GenericErrorPage from './GenericErrorPage';
 

src/frontend/src/components/errors/PermissionDenied.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 
 import GenericErrorPage from './GenericErrorPage';
 

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

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 
 import GenericErrorPage from './GenericErrorPage';
 

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

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import {
   Alert,
   Button,

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

@@ -1,4 +1,5 @@
-import { Trans, t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
 import {
   Anchor,
   Button,

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

@@ -1,4 +1,5 @@
-import { Trans, t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
 import {
   ActionIcon,
   Box,

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

@@ -1,4 +1,5 @@
-import { Trans, t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
 import { ActionIcon, Divider, Group, Select, Table, Text } from '@mantine/core';
 import { useToggle } from '@mantine/hooks';
 import {

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

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import {
   Alert,
   FileInput,

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

@@ -1,4 +1,5 @@
-import { Trans, t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
 import {
   Box,
   CloseButton,

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

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import {
   Input,
   darken,

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

@@ -1,4 +1,5 @@
-import { Trans, t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
 import { Alert, Container, Group, Stack, Table, Text } from '@mantine/core';
 import { IconExclamationCircle } from '@tabler/icons-react';
 import { type ReactNode, useCallback, useEffect, useMemo } from 'react';

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

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Anchor, Group } from '@mantine/core';
 import { type ReactNode, useMemo } from 'react';
 

src/frontend/src/components/importer/ImportDataSelector.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Group, HoverCard, Paper, Space, Stack, Text } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import {

src/frontend/src/components/importer/ImporterColumnSelector.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import {
   Alert,
   Button,

src/frontend/src/components/importer/ImporterDrawer.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import {
   Alert,
   Button,

src/frontend/src/components/importer/ImporterImportProgress.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Center, Container, Loader, Stack, Text } from '@mantine/core';
 import { useInterval } from '@mantine/hooks';
 import { useEffect } from 'react';

src/frontend/src/components/items/ActionDropdown.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import {
   Button,
   type FloatingPosition,

src/frontend/src/components/items/ColorToggle.tsx

@@ -6,7 +6,7 @@ import {
 } from '@mantine/core';
 import { IconMoonStars, IconSun } from '@tabler/icons-react';
 
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { vars } from '../../theme';
 
 export function ColorToggle() {

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

@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/macro';
+import { Trans } from '@lingui/react/macro';
 import { Anchor, Container, HoverCard, ScrollArea, Text } from '@mantine/core';
 import { useEffect, useRef, useState } from 'react';
 

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

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Alert, Text } from '@mantine/core';
 
 export function ErrorItem({

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

@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/macro';
+import { Trans } from '@lingui/react/macro';
 import { Carousel } from '@mantine/carousel';
 import { Anchor, Button, Paper, Text } from '@mantine/core';
 

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

@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/macro';
+import { Trans } from '@lingui/react/macro';
 import { Code, Flex, Group, Text } from '@mantine/core';
 import { Link, type To } from 'react-router-dom';
 

src/frontend/src/components/items/InvenTreeLogo.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { ActionIcon } from '@mantine/core';
 import { forwardRef } from 'react';
 import { NavLink } from 'react-router-dom';

src/frontend/src/components/items/LanguageToggle.tsx

@@ -2,7 +2,7 @@ import { ActionIcon, Group, Tooltip } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { IconLanguage } from '@tabler/icons-react';
 
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { LanguageSelect } from './LanguageSelect';
 
 export function LanguageToggle() {

src/frontend/src/components/items/OnlyStaff.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/macro';
+import { Trans } from '@lingui/react/macro';
 
 import { useUserState } from '../../states/UserState';
 

src/frontend/src/components/modals/AboutInvenTreeModal.tsx

@@ -1,4 +1,5 @@
-import { Trans, t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
 import {
   Anchor,
   Badge,

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

@@ -1,4 +1,5 @@
-import { Trans, t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
 import {
   Accordion,
   Alert,

src/frontend/src/components/modals/ServerInfoModal.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/macro';
+import { Trans } from '@lingui/react/macro';
 import { Badge, Button, Divider, Group, Stack, Table } from '@mantine/core';
 import type { ContextModalProps } from '@mantine/modals';
 

src/frontend/src/components/nav/Header.tsx

@@ -19,7 +19,7 @@ import { useQuery } from '@tanstack/react-query';
 import { type ReactNode, useEffect, useMemo, useState } from 'react';
 import { useMatch, useNavigate } from 'react-router-dom';
 
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { api } from '../../App';
 import { getNavTabs } from '../../defaults/links';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';

src/frontend/src/components/nav/Layout.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Container, Flex, Space } from '@mantine/core';
 import { Spotlight, createSpotlight } from '@mantine/spotlight';
 import { IconSearch } from '@tabler/icons-react';

src/frontend/src/components/nav/MainMenu.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/macro';
+import { Trans } from '@lingui/react/macro';
 import {
   Group,
   Menu,

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

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import {
   Container,
   Drawer,

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

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import {
   ActionIcon,
   Alert,

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

@@ -1,4 +1,5 @@
-import { Trans, t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
 import {
   Accordion,
   ActionIcon,

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

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Group, SegmentedControl, Stack, Text } from '@mantine/core';
 import type { ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';

src/frontend/src/components/panels/AttachmentPanel.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Skeleton } from '@mantine/core';
 import { IconPaperclip } from '@tabler/icons-react';
 

src/frontend/src/components/panels/NotesPanel.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Skeleton } from '@mantine/core';
 import { IconNotes } from '@tabler/icons-react';
 

src/frontend/src/components/plugins/LocateItemButton.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { IconRadar } from '@tabler/icons-react';
 import { useEffect, useMemo, useState } from 'react';
 import { ApiEndpoints } from '../../enums/ApiEndpoints';

src/frontend/src/components/plugins/PluginDrawer.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Accordion, Alert, Card, Stack, Text } from '@mantine/core';
 import { IconExclamationCircle } from '@tabler/icons-react';
 import { useMemo } from 'react';

src/frontend/src/components/plugins/PluginUIFeature.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Alert, Stack, Text } from '@mantine/core';
 import { IconExclamationCircle } from '@tabler/icons-react';
 import {

src/frontend/src/components/plugins/RemoteComponent.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Alert, Stack, Text } from '@mantine/core';
 import { IconExclamationCircle } from '@tabler/icons-react';
 import { useEffect, useMemo, useRef, useState } from 'react';

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

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Alert, Anchor, Group, Skeleton, Space, Text } from '@mantine/core';
 import { useQuery } from '@tanstack/react-query';
 import { type ReactNode, useCallback } from 'react';
@@ -235,5 +235,6 @@ export function UnknownRenderer({
 }: Readonly<{
   model: ModelType | undefined;
 }>): ReactNode {
-  return <Alert color='red' title={t`Unknown model: ${model}`} />;
+  const model_name = model ? model.toString() : 'undefined';
+  return <Alert color='red' title={t`Unknown model: ${model_name}`} />;
 }

src/frontend/src/components/render/ModelType.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 
 import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import type { ModelType } from '../../enums/ModelType';

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

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import type { ReactNode } from 'react';
 
 import { ModelType } from '../../enums/ModelType';

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

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Badge } from '@mantine/core';
 import type { ReactNode } from 'react';
 

src/frontend/src/components/render/Plugin.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Badge } from '@mantine/core';
 import type { ReactNode } from 'react';
 

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

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Text } from '@mantine/core';
 import type { ReactNode } from 'react';
 

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

@@ -1,4 +1,5 @@
-import { Trans, t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
 import { Stack, Text } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import React, {

src/frontend/src/components/wizards/OrderPartsWizard.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Alert, Group, Paper, Tooltip } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { IconShoppingCart } from '@tabler/icons-react';

src/frontend/src/components/wizards/WizardDrawer.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import {
   ActionIcon,
   Card,

src/frontend/src/contexts/LanguageContext.tsx

@@ -1,5 +1,5 @@
 import { i18n } from '@lingui/core';
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { I18nProvider } from '@lingui/react';
 import { LoadingOverlay, Text } from '@mantine/core';
 import { useEffect, useRef, useState } from 'react';

src/frontend/src/contexts/ThemeContext.tsx

@@ -1,9 +1,9 @@
-import { t } from '@lingui/macro';
+import { msg } from '@lingui/core/macro';
+import { Trans } from '@lingui/react';
 import { MantineProvider, createTheme } from '@mantine/core';
 import { ModalsProvider } from '@mantine/modals';
 import { Notifications } from '@mantine/notifications';
 import { ContextMenuProvider } from 'mantine-contextmenu';
-
 import { AboutInvenTreeModal } from '../components/modals/AboutInvenTreeModal';
 import { LicenseModal } from '../components/modals/LicenseModal';
 import { QrModal } from '../components/modals/QrModal';
@@ -37,7 +37,10 @@ export function ThemeContext({
       <ContextMenuProvider>
         <LanguageContext>
           <ModalsProvider
-            labels={{ confirm: t`Submit`, cancel: t`Cancel` }}
+            labels={{
+              confirm: <Trans id={msg`Submit`.id} />,
+              cancel: <Trans id={msg`Cancel`.id} />
+            }}
             modals={{
               info: ServerInfoModal,
               about: AboutInvenTreeModal,

src/frontend/src/defaults/actions.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import type { SpotlightActionData } from '@mantine/spotlight';
 import { IconBarcode, IconLink, IconPointer } from '@tabler/icons-react';
 import type { NavigateFunction } from 'react-router-dom';

src/frontend/src/defaults/links.tsx

@@ -1,4 +1,5 @@
-import { Trans, t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
 import { openContextModal } from '@mantine/modals';
 
 import {

src/frontend/src/forms/BuildForms.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Stack, Table } from '@mantine/core';
 import {
   IconCalendar,

src/frontend/src/forms/PartForms.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { IconPackages } from '@tabler/icons-react';
 import { useMemo, useState } from 'react';
 

src/frontend/src/forms/PurchaseOrderForms.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import {
   Container,
   Flex,

src/frontend/src/forms/ReturnOrderForms.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Flex, Table } from '@mantine/core';
 import {
   IconAddressBook,

src/frontend/src/forms/SalesOrderForms.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Table } from '@mantine/core';
 import {
   IconAddressBook,

src/frontend/src/forms/StockForms.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Flex, Group, Skeleton, Stack, Table, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { modals } from '@mantine/modals';

src/frontend/src/forms/selectionListFields.tsx

@@ -1,4 +1,4 @@
-import { t } from '@lingui/macro';
+import { t } from '@lingui/core/macro';
 import { Table } from '@mantine/core';
 import { useMemo } from 'react';