Updated client dependencies

client/package.json

@@ -7,52 +7,52 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@ant-design/icons": "^5.5.1",
+    "@ant-design/icons": "^5.6.1",
     "@loadable/component": "^5.16.4",
-    "@refinedev/antd": "^5.44.0",
+    "@refinedev/antd": "^5.45.1",
-    "@refinedev/core": "^4.56.0",
+    "@refinedev/core": "^4.57.5",
-    "@refinedev/kbar": "^1.3.12",
+    "@refinedev/kbar": "^1.3.14",
-    "@refinedev/react-router-v6": "^4.6.0",
+    "@refinedev/react-router": "^1.0.1",
-    "@refinedev/simple-rest": "^5.0.8",
+    "@refinedev/simple-rest": "^5.0.10",
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-query-devtools": "^4.36.1",
     "@types/loadable__component": "^5.13.9",
-    "@types/lodash": "^4.17.13",
+    "@types/lodash": "^4.17.15",
     "@types/uuid": "^10.0.0",
     "@yudiel/react-qr-scanner": "^1.2.10",
-    "antd": "^5.22.1",
+    "antd": "^5.24.2",
-    "axios": "^1.7.7",
+    "axios": "^1.7.9",
-    "flag-icons": "^7.2.3",
+    "flag-icons": "^7.3.2",
-    "html-to-image": "^1.11.11",
+    "html-to-image": "^1.11.13",
-    "i18next": "^23.16.6",
+    "i18next": "^24.2.2",
-    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-browser-languagedetector": "^8.0.4",
-    "i18next-http-backend": "^2.6.2",
+    "i18next-http-backend": "^3.0.2",
     "lodash": "^4.17.21",
-    "react": "^18.3.1",
+    "react": "^19.0.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.0.0",
-    "react-i18next": "^15.1.1",
+    "react-i18next": "^15.4.1",
-    "react-router-dom": "^6.28.0",
+    "react-router": "^7.2.0",
-    "react-to-print": "^2.15.1",
+    "react-to-print": "^3.0.5",
-    "uuid": "^11.0.3",
+    "uuid": "^11.1.0",
     "vite-plugin-svgr": "^4.3.0",
-    "zustand": "^5.0.1"
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
-    "@refinedev/cli": "^2.16.39",
+    "@refinedev/cli": "^2.16.42",
     "@simbathesailor/use-what-changed": "^2.0.0",
-    "@types/node": "^22.9.1",
+    "@types/node": "^22.13.5",
-    "@types/react": "^18.3.12",
+    "@types/react": "^19.0.10",
-    "@types/react-dom": "^18.3.1",
+    "@types/react-dom": "^19.0.4",
-    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/eslint-plugin": "^8.25.0",
-    "@typescript-eslint/parser": "^8.15.0",
+    "@typescript-eslint/parser": "^8.25.0",
-    "@vitejs/plugin-react": "^4.3.3",
+    "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.8.0",
+    "eslint": "^9.21.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.9",
+    "eslint-plugin-react-refresh": "^0.4.19",
-    "typescript": "^5.6.3",
+    "typescript": "^5.7.3",
-    "vite": "^5.4.14",
+    "vite": "^6.1.1",
     "vite-plugin-mkcert": "^1.17.6"
   },
   "scripts": {
@@ -74,4 +74,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

client/src/App.tsx

@@ -15,12 +15,12 @@ import {
   UserOutlined,
 } from "@ant-design/icons";
 import loadable from "@loadable/component";
-import routerBindings, { DocumentTitleHandler, UnsavedChangesNotifier } from "@refinedev/react-router-v6";
+import routerBindings, { DocumentTitleHandler, UnsavedChangesNotifier } from "@refinedev/react-router";
 import { ConfigProvider } from "antd";
 import { Locale } from "antd/es/locale";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Outlet, Route, Routes } from "react-router";
 import dataProvider from "./components/dataProvider";
 import { Favicon } from "./components/favicon";
 import { SpoolmanLayout } from "./components/layout";

client/src/components/column.tsx

@@ -5,7 +5,7 @@ import { ColumnFilterItem, ColumnType } from "antd/es/table/interface";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { AlignType } from "rc-table/lib/interface";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { getFiltersForField, typeFilters } from "../utils/filtering";
 import { enrichText } from "../utils/parsing";
 import { Field, FieldType } from "../utils/queryFields";

client/src/components/qrCodeScanner.tsx

@@ -3,7 +3,7 @@ import { useTranslate } from "@refinedev/core";
 import { QrScanner } from "@yudiel/react-qr-scanner";
 import { FloatButton, Modal, Space } from "antd";
 import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 
 const QRCodeScannerModal: React.FC = () => {
   const [visible, setVisible] = useState(false);

client/src/pages/filaments/list.tsx

@@ -5,23 +5,23 @@ import { Button, Dropdown, Table } from "antd";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import {
-  ActionsColumn,
+    ActionsColumn,
-  CustomFieldColumn,
+    CustomFieldColumn,
-  DateColumn,
+    DateColumn,
-  FilteredQueryColumn,
+    FilteredQueryColumn,
-  NumberColumn,
+    NumberColumn,
-  RichColumn,
+    RichColumn,
-  SortedColumn,
+    SortedColumn,
-  SpoolIconColumn,
+    SpoolIconColumn,
 } from "../../components/column";
 import { useLiveify } from "../../components/liveify";
 import {
-  useSpoolmanArticleNumbers,
+    useSpoolmanArticleNumbers,
-  useSpoolmanFilamentNames,
+    useSpoolmanFilamentNames,
-  useSpoolmanMaterials,
+    useSpoolmanMaterials,
-  useSpoolmanVendors,
+    useSpoolmanVendors,
 } from "../../components/otherModels";
 import { removeUndefined } from "../../utils/filtering";
 import { EntityType, useGetFields } from "../../utils/queryFields";

client/src/pages/filaments/show.tsx

@@ -4,7 +4,7 @@ import { Button, Typography } from "antd";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import React from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { ExtraFieldDisplay } from "../../components/extraFields";
 import { NumberFieldUnit } from "../../components/numberField";
 import SpoolIcon from "../../components/spoolIcon";

client/src/pages/help/index.tsx

@@ -7,7 +7,7 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import React from "react";
 import { Trans } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 dayjs.extend(utc);
 

client/src/pages/home/index.tsx

@@ -6,7 +6,7 @@ import Title from "antd/es/typography/Title";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import React, { ReactNode } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import Logo from "../../icon.svg?react";
 import { ISpool } from "../spools/model";
 

client/src/pages/locations/components/spoolCard.tsx

@@ -8,7 +8,7 @@ import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import utc from "dayjs/plugin/utc";
 import { useEffect, useRef } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import SpoolIcon from "../../../components/spoolIcon";
 import { formatWeight } from "../../../utils/parsing";
 import { ISpool } from "../../spools/model";

client/src/pages/printing/index.tsx

@@ -5,7 +5,7 @@ import { Content } from "antd/es/layout/layout";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import React from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router";
 import SpoolQRCodePrintingDialog from "./spoolQrCodePrintingDialog";
 import SpoolSelectModal from "./spoolSelectModal";
 

client/src/pages/printing/printing.tsx

@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 import { v4 as uuidv4 } from "uuid";
 import { useGetSetting, useSetSetting } from "../../utils/querySettings";
 import { ISpool } from "../spools/model";
@@ -75,7 +76,7 @@ function getTagValue(tag: string, obj: GenericObject): any {
   return value;
 }
 
-function applyNewline(text: string): JSX.Element[] {
+function applyNewline(text: string): ReactElement[] {
   return text.split("\n").map((line, idx, arr) => (
     <span key={idx}>
       {line}
@@ -84,7 +85,7 @@ function applyNewline(text: string): JSX.Element[] {
   ));
 }
 
-function applyTextFormatting(text: string): JSX.Element[] {
+function applyTextFormatting(text: string): ReactElement[] {
   const regex = /\*\*([\w\W]*?)\*\*/g;
   const parts = text.split(regex);
   // Map over the parts and wrap matched text with <b> tags
@@ -96,7 +97,7 @@ function applyTextFormatting(text: string): JSX.Element[] {
   return elements;
 }
 
-export function renderLabelContents(template: string, spool: ISpool): JSX.Element {
+export function renderLabelContents(template: string, spool: ISpool): ReactElement {
   // Find all {tags} in the template string and loop over them
   // let matches = [...template.matchAll(/(?:{(.*?))?{(.*?)}(.*?)(?:}(.*?))?/gs)];
   let matches = [...template.matchAll(/{(?:[^}{]|{[^}{]*})*}/gs)];

client/src/pages/printing/printingDialog.tsx

@@ -15,19 +15,19 @@ import {
   Space,
 } from "antd";
 import * as htmlToImage from "html-to-image";
-import React, { useRef } from "react";
+import React, { ReactElement, useRef } from "react";
-import ReactToPrint from "react-to-print";
+import { useReactToPrint } from "react-to-print";
 import { useSavedState } from "../../utils/saveload";
 import { PrintSettings } from "./printing";
 
 interface PrintingDialogProps {
-  items: JSX.Element[];
+  items: ReactElement[];
   printSettings: PrintSettings;
   setPrintSettings: (setPrintSettings: PrintSettings) => void;
   style?: string;
-  extraSettings?: JSX.Element;
+  extraSettings?: ReactElement;
-  extraSettingsStart?: JSX.Element;
+  extraSettingsStart?: ReactElement;
-  extraButtons?: JSX.Element;
+  extraButtons?: ReactElement;
 }
 
 interface PaperDimensions {
@@ -90,7 +90,8 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
   const paperWidth = paperSize === "custom" ? customPaperSize.width : paperDimensions[paperSize].width;
   const paperHeight = paperSize === "custom" ? customPaperSize.height : paperDimensions[paperSize].height;
 
-  const printRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const reactToPrintFn = useReactToPrint({ contentRef });
 
   const itemWidth = (paperWidth - margin.left - margin.right - spacing.horizontal) / paperColumns - spacing.horizontal;
   const itemHeight = (paperHeight - margin.top - margin.bottom - spacing.vertical) / paperRows - spacing.vertical;
@@ -223,7 +224,7 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
           >
             <div
               className="print-container"
-              ref={printRef}
+              ref={contentRef}
               style={{
                 transform: `scale(${previewScale})`,
                 transformOrigin: "top left",
@@ -817,15 +818,9 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
             <Button type="primary" icon={<FileImageOutlined />} size="large" onClick={saveAsImage}>
               {t("printing.generic.saveAsImage")}
             </Button>
-            <ReactToPrint
+            <Button type="primary" icon={<PrinterOutlined />} size="large" onClick={() => reactToPrintFn()}>
-              key="print-button"
+              {t("printing.generic.print")}
-              trigger={() => (
+            </Button>
-                <Button type="primary" icon={<PrinterOutlined />} size="large">
-                  {t("printing.generic.print")}
-                </Button>
-              )}
-              content={() => printRef.current}
-            />
           </Space>
         </Col>
       </Row>

client/src/pages/printing/qrCodePrintingDialog.tsx

@@ -1,6 +1,7 @@
-import { getBasePath } from "../../utils/url";
 import { useTranslate } from "@refinedev/core";
 import { Col, Form, InputNumber, QRCode, Radio, RadioChangeEvent, Row, Slider, Switch, Typography } from "antd";
+import { ReactElement } from "react";
+import { getBasePath } from "../../utils/url";
 import { QRCodePrintSettings } from "./printing";
 import PrintingDialog from "./printingDialog";
 
@@ -8,7 +9,7 @@ const { Text } = Typography;
 
 interface QRCodeData {
   value: string;
-  label?: JSX.Element;
+  label?: ReactElement;
   errorLevel?: "L" | "M" | "Q" | "H";
 }
 
@@ -16,9 +17,9 @@ interface QRCodePrintingDialogProps {
   items: QRCodeData[];
   printSettings: QRCodePrintSettings;
   setPrintSettings: (setPrintSettings: QRCodePrintSettings) => void;
-  extraSettings?: JSX.Element;
+  extraSettings?: ReactElement;
-  extraSettingsStart?: JSX.Element;
+  extraSettingsStart?: ReactElement;
-  extraButtons?: JSX.Element;
+  extraButtons?: ReactElement;
   baseUrlRoot: string;
   useHTTPUrl: boolean;
   setUseHTTPUrl: (value: boolean) => void;

client/src/pages/printing/spoolSelectModal.tsx

@@ -3,7 +3,7 @@ import { useTable } from "@refinedev/antd";
 import { Button, Checkbox, Col, message, Row, Space, Table } from "antd";
 import { t } from "i18next";
 import { useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { FilteredQueryColumn, SortedColumn, SpoolIconColumn } from "../../components/column";
 import { useSpoolmanFilamentFilter, useSpoolmanMaterials } from "../../components/otherModels";
 import { removeUndefined } from "../../utils/filtering";

client/src/pages/settings/extraFieldsSettings.tsx

@@ -1,18 +1,18 @@
 import { PlusOutlined } from "@ant-design/icons";
 import { useTranslate } from "@refinedev/core";
 import {
-  Button,
+    Button,
-  Checkbox,
+    Checkbox,
-  Flex,
+    Flex,
-  Form,
+    Form,
-  FormInstance,
+    FormInstance,
-  Input,
+    Input,
-  InputNumber,
+    InputNumber,
-  Popconfirm,
+    Popconfirm,
-  Select,
+    Select,
-  Space,
+    Space,
-  Table,
+    Table,
-  message,
+    message,
 } from "antd";
 import { FormItemProps, Rule } from "antd/es/form";
 import { ColumnType } from "antd/es/table";
@@ -22,7 +22,7 @@ import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 import { useState } from "react";
 import { Trans } from "react-i18next";
-import { useParams } from "react-router-dom";
+import { useParams } from "react-router";
 import { DateTimePicker } from "../../components/dateTimePicker";
 import { InputNumberRange } from "../../components/inputNumberRange";
 import { EntityType, Field, FieldType, useDeleteField, useGetFields, useSetField } from "../../utils/queryFields";

client/src/pages/settings/generalSettings.tsx

@@ -47,69 +47,67 @@ export function GeneralSettings() {
     }
   };
 
-  return (
+  return (<>
-    <>
+    <Form
-      <Form
+      form={form}
-        form={form}
+      labelCol={{ span: 8 }}
-        labelCol={{ span: 8 }}
+      wrapperCol={{ span: 16 }}
-        wrapperCol={{ span: 16 }}
+      initialValues={{
-        initialValues={{
+        currency: settings.data?.currency.value,
-          currency: settings.data?.currency.value,
+        round_prices: settings.data?.round_prices.value,
-          round_prices: settings.data?.round_prices.value,
+      }}
-        }}
+      onFinish={onFinish}
-        onFinish={onFinish}
+      style={{
-        style={{
+        maxWidth: "600px",
-          maxWidth: "600px",
+        margin: "0 auto",
-          margin: "0 auto",
+      }}
-        }}
+    >
+      <Form.Item
+        label={t("settings.general.currency.label")}
+        name="currency"
+        rules={[
+          {
+            required: true,
+          },
+          {
+            pattern: /^[A-Z]{3}$/,
+          },
+        ]}
       >
-        <Form.Item
+        <Input />
-          label={t("settings.general.currency.label")}
+      </Form.Item>
-          name="currency"
-          rules={[
-            {
-              required: true,
-            },
-            {
-              pattern: /^[A-Z]{3}$/,
-            },
-          ]}
-        >
-          <Input />
-        </Form.Item>
 
-        <Form.Item
+      <Form.Item
-          label={t("settings.general.base_url.label")}
+        label={t("settings.general.base_url.label")}
-          tooltip={t("settings.general.base_url.tooltip")}
+        tooltip={t("settings.general.base_url.tooltip")}
-          name="base_url"
+        name="base_url"
-          rules={[
+        rules={[
-            {
+          {
-              required: false,
+            required: false,
-            },
+          },
-            {
+          {
-              pattern: /^https?:\/\/.+(?<!\/)$/,
+            pattern: /^https?:\/\/.+(?<!\/)$/,
-            },
+          },
-          ]}
+        ]}
-        >
+      >
-          <Input placeholder="https://example.com:8000" />
+        <Input placeholder="https://example.com:8000" />
-        </Form.Item>
+      </Form.Item>
 
-        <Form.Item
+      <Form.Item
-          label={t("settings.general.round_prices.label")}
+        label={t("settings.general.round_prices.label")}
-          tooltip={t("settings.general.round_prices.tooltip")}
+        tooltip={t("settings.general.round_prices.tooltip")}
-          name="round_prices"
+        name="round_prices"
-          valuePropName="checked"
+        valuePropName="checked"
-        >
+      >
-          <Checkbox />
+        <Checkbox />
-        </Form.Item>
+      </Form.Item>
 
-        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
-          <Button type="primary" htmlType="submit" loading={settings.isFetching || setCurrency.isLoading}>
+        <Button type="primary" htmlType="submit" loading={settings.isFetching || setCurrency.isLoading}>
-            {t("buttons.save")}
+          {t("buttons.save")}
-          </Button>
+        </Button>
-        </Form.Item>
+      </Form.Item>
-      </Form>
+    </Form>
-      {contextHolder}
+    {contextHolder}
-    </>
+  </>);
-  );
 }

client/src/pages/settings/index.tsx

@@ -5,7 +5,7 @@ import { Content } from "antd/es/layout/layout";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import React from "react";
-import { Route, Routes, useNavigate } from "react-router-dom";
+import { Route, Routes, useNavigate } from "react-router";
 import { ExtraFieldsSettings } from "./extraFieldsSettings";
 import { GeneralSettings } from "./generalSettings";
 

client/src/pages/spools/edit.tsx

@@ -5,7 +5,7 @@ import TextArea from "antd/es/input/TextArea";
 import { message } from "antd/lib";
 import dayjs from "dayjs";
 import { useEffect, useMemo, useState } from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router";
 import { ExtraFieldFormItem, ParsedExtras, StringifiedExtras } from "../../components/extraFields";
 import { useSpoolmanLocations } from "../../components/otherModels";
 import { searchMatches } from "../../utils/filtering";

client/src/pages/spools/list.tsx

@@ -1,12 +1,12 @@
 import {
-  EditOutlined,
+    EditOutlined,
-  EyeOutlined,
+    EyeOutlined,
-  FilterOutlined,
+    FilterOutlined,
-  InboxOutlined,
+    InboxOutlined,
-  PlusSquareOutlined,
+    PlusSquareOutlined,
-  PrinterOutlined,
+    PrinterOutlined,
-  ToolOutlined,
+    ToolOutlined,
-  ToTopOutlined,
+    ToTopOutlined,
 } from "@ant-design/icons";
 import { List, useTable } from "@refinedev/antd";
 import { IResourceComponentsProps, useInvalidate, useNavigation, useTranslate } from "@refinedev/core";
@@ -14,24 +14,24 @@ import { Button, Dropdown, Modal, Table } from "antd";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { useCallback, useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import {
-  Action,
+    Action,
-  ActionsColumn,
+    ActionsColumn,
-  CustomFieldColumn,
+    CustomFieldColumn,
-  DateColumn,
+    DateColumn,
-  FilteredQueryColumn,
+    FilteredQueryColumn,
-  NumberColumn,
+    NumberColumn,
-  RichColumn,
+    RichColumn,
-  SortedColumn,
+    SortedColumn,
-  SpoolIconColumn,
+    SpoolIconColumn,
 } from "../../components/column";
 import { useLiveify } from "../../components/liveify";
 import {
-  useSpoolmanFilamentFilter,
+    useSpoolmanFilamentFilter,
-  useSpoolmanLocations,
+    useSpoolmanLocations,
-  useSpoolmanLotNumbers,
+    useSpoolmanLotNumbers,
-  useSpoolmanMaterials,
+    useSpoolmanMaterials,
 } from "../../components/otherModels";
 import { removeUndefined } from "../../utils/filtering";
 import { EntityType, useGetFields } from "../../utils/queryFields";

client/src/pages/vendors/list.tsx

@@ -5,14 +5,14 @@ import { Button, Dropdown, Table } from "antd";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { useCallback, useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import {
-  ActionsColumn,
+    ActionsColumn,
-  CustomFieldColumn,
+    CustomFieldColumn,
-  DateColumn,
+    DateColumn,
-  NumberColumn,
+    NumberColumn,
-  RichColumn,
+    RichColumn,
-  SortedColumn,
+    SortedColumn,
 } from "../../components/column";
 import { useLiveify } from "../../components/liveify";
 import { removeUndefined } from "../../utils/filtering";