Client: Full localization, dynamic title

client/package-lock.json

@@ -16,6 +16,7 @@
         "@refinedev/simple-rest": "^4.5.0",
         "@tanstack/react-query": "^4.29.19",
         "antd": "^5.6.4",
+        "flag-icons": "^6.7.0",
         "i18next": "^23.2.8",
         "i18next-browser-languagedetector": "^7.1.0",
         "i18next-xhr-backend": "^3.2.2",
@@ -4837,6 +4838,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/flag-icons": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/flag-icons/-/flag-icons-6.7.0.tgz",
+      "integrity": "sha512-+KXrrrXN2jiETFxisFl+3f83Bq7tj5nuIWnbv9fX59k05lvldEXRCOffybb5hAIjMWt4nmG0E8OfKt7Flm99Eg=="
+    },
     "node_modules/flat-cache": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",

client/package.json

@@ -15,6 +15,7 @@
     "@refinedev/simple-rest": "^4.5.0",
     "@tanstack/react-query": "^4.29.19",
     "antd": "^5.6.4",
+    "flag-icons": "^6.7.0",
     "i18next": "^23.2.8",
     "i18next-browser-languagedetector": "^7.1.0",
     "i18next-xhr-backend": "^3.2.2",

client/public/images/flags/en.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="640" height="480" viewBox="0 0 640 480"><defs><clipPath id="a"><path fill-opacity=".67" d="M-85.333 0h682.67v512h-682.67z"/></clipPath></defs><g clip-path="url(#a)" transform="translate(80) scale(.94)"><g stroke-width="1pt"><path fill="#006" d="M-256 0H768.02v512.01H-256z"/><path fill="#fff" d="M-256 0v57.244l909.535 454.768H768.02V454.77L-141.515 0H-256zM768.02 0v57.243L-141.515 512.01H-256v-57.243L653.535 0H768.02z"/><path fill="#fff" d="M170.675 0v512.01h170.67V0h-170.67zM-256 170.67v170.67H768.02V170.67H-256z"/><path fill="#c00" d="M-256 204.804v102.402H768.02V204.804H-256zM204.81 0v512.01h102.4V0h-102.4zM-256 512.01L85.34 341.34h76.324l-341.34 170.67H-256zM-256 0L85.34 170.67H9.016L-256 38.164V0zm606.356 170.67L691.696 0h76.324L426.68 170.67h-76.324zM768.02 512.01L426.68 341.34h76.324L768.02 473.848v38.162z"/></g></g></svg>

client/public/locales/de/common.json

@@ -0,0 +1,48 @@
+{
+  "actions": {
+    "list": "Aufführen",
+    "create": "Erstellen",
+    "edit": "Bearbeiten",
+    "show": "Zeigen"
+  },
+  "buttons": {
+    "create": "Erstellen",
+    "save": "Speichern",
+    "logout": "Abmelden",
+    "delete": "Löschen",
+    "edit": "Bearbeiten",
+    "cancel": "Abbrechen",
+    "confirm": "Sicher?",
+    "filter": "Filter",
+    "clear": "Löschen",
+    "refresh": "Erneuern",
+    "show": "Zeigen",
+    "undo": "Undo",
+    "import": "Importieren",
+    "clone": "Klon",
+    "notAccessTitle": "Sie haben keine zugriffsberechtigung"
+  },
+  "warnWhenUnsavedChanges": "Nicht gespeicherte Änderungen werden nicht übernommen.",
+  "notifications": {
+    "success": "Erfolg",
+    "error": "Fehler (status code: {{statusCode}})",
+    "undoable": "Sie haben {{seconds}} Sekunden Zeit für Undo.",
+    "createSuccess": "{{resource}} erfolgreich erstellt.",
+    "createError": "Fehler beim Erstellen {{resource}} (status code: {{statusCode}})",
+    "deleteSuccess": "{{resource}} erfolgreich gelöscht.",
+    "deleteError": "Fehler beim Löschen {{resource}} (status code: {{statusCode}})",
+    "editSuccess": "{{resource}} erfolgreich bearbeitet.",
+    "editError": "Fehler beim Bearbeiten {{resource}} (status code: {{statusCode}})",
+    "importProgress": "{{processed}}/{{total}} importiert"
+  },
+  "loading": "Wird geladen",
+  "tags": {
+    "clone": "Klon"
+  },
+  "dashboard": {
+    "title": "Dashboard"
+  },
+  "table": {
+    "actions": "Aktionen"
+  }
+}

client/public/locales/en/common.json

@@ -1,70 +1,4 @@
 {
-  "pages": {
-    "login": {
-      "title": "Sign in to your account",
-      "signin": "Sign in",
-      "signup": "Sign up",
-      "divider": "or",
-      "fields": {
-        "email": "Email",
-        "password": "Password"
-      },
-      "errors": {
-        "validEmail": "Invalid email address"
-      },
-      "buttons": {
-        "submit": "Login",
-        "forgotPassword": "Forgot password?",
-        "noAccount": "Don’t have an account?",
-        "rememberMe": "Remember me"
-      }
-    },
-    "forgotPassword": {
-      "title": "Forgot your password?",
-      "fields": {
-        "email": "Email"
-      },
-      "errors": {
-        "validEmail": "Invalid email address"
-      },
-      "buttons": {
-        "submit": "Send reset instructions"
-      }
-    },
-    "register": {
-      "title": "Sign up for your account",
-      "fields": {
-        "email": "Email",
-        "password": "Password"
-      },
-      "errors": {
-        "validEmail": "Invalid email address"
-      },
-      "buttons": {
-        "submit": "Register",
-        "haveAccount": "Have an account?"
-      }
-    },
-    "updatePassword": {
-      "title": "Update password",
-      "fields": {
-        "password": "New Password",
-        "confirmPassword": "Confirm new password"
-      },
-      "errors": {
-        "confirmPasswordNotMatch": "Passwords do not match"
-      },
-      "buttons": {
-        "submit": "Update"
-      }
-    },
-    "error": {
-      "info": "You may have forgotten to add the {{action}} component to {{resource}} resource.",
-      "404": "Sorry, the page you visited does not exist.",
-      "resource404": "Are you sure you have created the {{resource}} resource.",
-      "backHome": "Back Home"
-    }
-  },
   "actions": {
     "list": "List",
     "create": "Create",
@@ -87,7 +21,9 @@
     "undo": "Undo",
     "import": "Import",
     "clone": "Clone",
-    "notAccessTitle": "You don't have permission to access"
+    "notAccessTitle": "You don't have permission to access",
+    "hideColumns": "Hide Columns",
+    "clearFilters": "Clear Filters"
   },
   "warnWhenUnsavedChanges": "Are you sure you want to leave? You have unsaved changes.",
   "notifications": {
@@ -103,25 +39,33 @@
     "importProgress": "Importing: {{processed}}/{{total}}"
   },
   "loading": "Loading",
+  "version": "Version",
   "tags": {
     "clone": "Clone"
   },
   "dashboard": {
     "title": "Dashboard"
   },
-  "spools": {
+  "spool": {
-    "spools": "Spools",
+    "spool": "Spools",
     "fields": {
       "id": "Id",
-      "filament_name": "Filament Name",
+      "filament_name": "Filament",
+      "filament": "Filament",
       "used_weight": "Used Weight",
       "remaining_weight": "Remaining Weight",
       "location": "Location",
       "lot_nr": "Lot Nr",
       "first_used": "First Used",
       "last_used": "Last Used",
+      "registered": "Registered",
       "comment": "Comment"
     },
+    "fields_help": {
+      "used_weight": "How much filament has been used from the spool. A new spool should have 0g used.",
+      "location": "Where the spool is located if you have multiple locations where you store your spools.",
+      "lot_nr": "Manufacturer's lot number. Can be used to ensure a print has consistent color if multiple spools are used."
+    },
     "titles": {
       "create": "Create Spool",
       "clone": "Clone Spool",
@@ -130,11 +74,12 @@
       "show": "Show Spool"
     }
   },
-  "filaments": {
+  "filament": {
-    "filaments": "Filaments",
+    "filament": "Filaments",
     "fields": {
       "id": "Id",
-      "vendor_name": "Vendor Name",
+      "vendor_name": "Vendor",
+      "vendor": "Vendor",
       "name": "Name",
       "material": "Material",
       "price": "Price",
@@ -149,6 +94,14 @@
       "settings_bed_temp": "Bed Temp",
       "color_hex": "Color"
     },
+    "fields_help": {
+      "name": "Filament name, to distinguish this filament type among others from the same vendor. Should contain the color for example.",
+      "material": "E.g. PLA, ABS, PETG, etc.",
+      "price": "Price of a full spool in the system configured currency.",
+      "weight": "The filament weight of a full spool (net weight). This should not include the weight of the spool itself, only the filament. It is what is usually written on the packaging.",
+      "spool_weight": "The weight of an empty spool. Currently not used for anything, but could be used by thirdparty apps to e.g. calculate the filament weight from a weight measurement.",
+      "article_number": "E.g. EAN, UPC, etc."
+    },
     "titles": {
       "create": "Create Filament",
       "clone": "Clone Filament",
@@ -157,8 +110,8 @@
       "show": "Show Filament"
     }
   },
-  "vendors": {
+  "vendor": {
-    "vendors": "Vendors",
+    "vendor": "Vendors",
     "fields": {
       "id": "Id",
       "name": "Name",
@@ -175,5 +128,30 @@
   },
   "table": {
     "actions": "Actions"
+  },
+  "documentTitle": {
+    "default": "Spoolman",
+    "suffix": " | Spoolman",
+    "filament": {
+      "list": "Filaments | Spoolman",
+      "show": "#{{id}} Show Filament | Spoolman",
+      "edit": "#{{id}} Edit Filament | Spoolman",
+      "create": "Create Filament | Spoolman",
+      "clone": "#{{id}} Clone Filament | Spoolman"
+    },
+    "spool": {
+      "list": "Spools | Spoolman",
+      "show": "#{{id}} Show Spool | Spoolman",
+      "edit": "#{{id}} Edit Spool | Spoolman",
+      "create": "Create Spool | Spoolman",
+      "clone": "#{{id}} Clone Spool | Spoolman"
+    },
+    "vendor": {
+      "list": "Vendors | Spoolman",
+      "show": "#{{id}} Show Vendor | Spoolman",
+      "edit": "#{{id}} Edit Vendor | Spoolman",
+      "create": "Create Vendor | Spoolman",
+      "clone": "#{{id}} Clone Vendor | Spoolman"
+    }
   }
 }

client/public/locales/sv/common.json

@@ -0,0 +1,157 @@
+{
+  "actions": {
+    "list": "Lista",
+    "create": "Skapa",
+    "edit": "Ändra",
+    "show": "Visa",
+    "clone": "Klona"
+  },
+  "buttons": {
+    "create": "Skapa",
+    "save": "Spara",
+    "logout": "Logga ut",
+    "delete": "Ta bort",
+    "edit": "Ändra",
+    "cancel": "Avbryt",
+    "confirm": "Är du säker?",
+    "filter": "Filtrera",
+    "clear": "Rensa",
+    "refresh": "Uppdatera",
+    "show": "Visa",
+    "undo": "Ångra",
+    "import": "Importera",
+    "clone": "Klona",
+    "notAccessTitle": "Du har inte tillgång till denna sida",
+    "hideColumns": "Dölj kolumner",
+    "clearFilters": "Rensa filter"
+  },
+  "warnWhenUnsavedChanges": "Du har osparade ändringar. Är du säker på att du vill lämna sidan?",
+  "notifications": {
+    "success": "Lyckades!",
+    "error": "Fel (statuskod: {{statusCode}})",
+    "undoable": "Du har {{seconds}} sekunder på dig att ångra",
+    "createSuccess": "Lyckades skapa {{resource}}",
+    "createError": "Det gick inte att skapa {{resource}} (statuskod: {{statusCode}})",
+    "deleteSuccess": "Lyckades ta bort {{resource}}",
+    "deleteError": "Det gick inte att ta bort {{resource}} (statuskod: {{statusCode}})",
+    "editSuccess": "Lyckades ändra {{resource}}",
+    "editError": "Det gick inte att ändra {{resource}} (statuskod: {{statusCode}})",
+    "importProgress": "Importerar: {{processed}}/{{total}}"
+  },
+  "loading": "Laddar...",
+  "version": "Version",
+  "tags": {
+    "clone": "Klona"
+  },
+  "dashboard": {
+    "title": "Hem"
+  },
+  "spool": {
+    "spool": "Spolar",
+    "fields": {
+      "id": "Id",
+      "filament_name": "Filament",
+      "filament": "Filament",
+      "used_weight": "Använd vikt",
+      "remaining_weight": "Återstående vikt",
+      "location": "Plats",
+      "lot_nr": "Batchnummer",
+      "first_used": "Användes först",
+      "last_used": "Användes senast",
+      "registered": "Registrerad",
+      "comment": "Kommentar"
+    },
+    "fields_help": {
+      "used_weight": "Hur mycket filament som använts på spolen. En ny spole har värdet 0g.",
+      "location": "Vart spolen finns om du har flera platser att förvara spolar på.",
+      "lot_nr": "Tillverkarens batchnummer. Kan användas för att se till att en utskrift har jämn färg ifall flera spolar används."
+    },
+    "titles": {
+      "create": "Skapa spole",
+      "clone": "Klona spole",
+      "edit": "Ändra spole",
+      "list": "Spolar",
+      "show": "Visa spole"
+    }
+  },
+  "filament": {
+    "filament": "Filament",
+    "fields": {
+      "id": "Id",
+      "vendor_name": "Leverantör",
+      "vendor": "Leverantör",
+      "name": "Namn",
+      "material": "Material",
+      "price": "Pris",
+      "density": "Densitet",
+      "diameter": "Diameter",
+      "weight": "Vikt",
+      "spool_weight": "Spolvikt",
+      "article_number": "Artikelnummer",
+      "registered": "Registrerad",
+      "comment": "Kommentar",
+      "settings_extruder_temp": "Extrudertemp",
+      "settings_bed_temp": "Bäddtemp",
+      "color_hex": "Färg"
+    },
+    "fields_help": {
+      "name": "Filamentets namn, för att skilja detta filament från andra från samma leverantör. Bör innehålla färgen till exempel.",
+      "material": "T.ex. PLA, ABS, PETG, etc.",
+      "price": "Pris för en full spole i systemets valuta.",
+      "weight": "Vikten på en full spole (nettovikt). Detta ska inte inkludera vikten på spolen själv, bara filamentet. Det är vad som vanligtvis står på förpackningen.",
+      "spool_weight": "Vikten på en tom spole. Detta används inte till något i dagsläget, men skulle kunna användas av tredjepartsappar för att t.ex. beräkna filamentvikten från en viktmätning.",
+      "article_number": "T.ex. EAN, UPC, etc."
+    },
+    "titles": {
+      "create": "Skapa filament",
+      "clone": "Klona filament",
+      "edit": "Ändra filament",
+      "list": "Filament",
+      "show": "Visa filament"
+    }
+  },
+  "vendor": {
+    "vendor": "Leverantörer",
+    "fields": {
+      "id": "Id",
+      "name": "Namn",
+      "registered": "Registrerad",
+      "comment": "Kommentar"
+    },
+    "titles": {
+      "create": "Skapa leverantör",
+      "clone": "Klona leverantör",
+      "edit": "Ändra leverantör",
+      "list": "Leverantörer",
+      "show": "Visa leverantör"
+    }
+  },
+  "table": {
+    "actions": "Åtgärder"
+  },
+  "documentTitle": {
+    "default": "Spoolman",
+    "suffix": " | Spoolman",
+    "filament": {
+      "list": "Filament | Spoolman",
+      "show": "#{{id}} Visa filament | Spoolman",
+      "edit": "#{{id}} Redigera filament | Spoolman",
+      "create": "Skapa filament | Spoolman",
+      "clone": "#{{id}} Klona filament | Spoolman"
+    },
+    "spool": {
+      "list": "Spolar | Spoolman",
+      "show": "#{{id}} Visa spole | Spoolman",
+      "edit": "#{{id}} Redigera spole | Spoolman",
+      "create": "Skapa spole | Spoolman",
+      "clone": "#{{id}} Klona spole | Spoolman"
+    },
+    "vendor": {
+      "list": "Leverantörer | Spoolman",
+      "show": "#{{id}} Visa leverantör | Spoolman",
+      "edit": "#{{id}} Redigera leverantör | Spoolman",
+      "create": "Skapa leverantör | Spoolman",
+      "clone": "#{{id}} Klona leverantör | Spoolman"
+    }
+  }
+}

client/src/App.tsx

@@ -11,6 +11,7 @@ import {
 import "@refinedev/antd/dist/reset.css";
 
 import routerBindings, {
+  DocumentTitleHandler,
   NavigateToResource,
   UnsavedChangesNotifier,
 } from "@refinedev/react-router-v6";
@@ -41,6 +42,9 @@ import {
 import { ConfigProvider } from "antd";
 import { Footer } from "antd/es/layout/layout";
 import { Version } from "./components/version";
+import React from "react";
+import { Locale } from "antd/es/locale";
+import { languages } from "./i18n";
 
 function App() {
   const { t, i18n } = useTranslation();
@@ -51,6 +55,20 @@ function App() {
     getLocale: () => i18n.language,
   };
 
+  // Fetch the antd locale using dynamic imports
+  const [antdLocale, setAntdLocale] = React.useState<Locale | undefined>();
+  React.useEffect(() => {
+    const fetchLocale = async () => {
+      const locale = await import(
+        `./../node_modules/antd/es/locale/${languages[
+          i18n.language
+        ].fullCode.replace("-", "_")}.js`
+      );
+      setAntdLocale(locale.default);
+    };
+    fetchLocale().catch(console.error);
+  }, [i18n.language]);
+
   if (!import.meta.env.VITE_APIURL) {
     return (
       <>
@@ -68,6 +86,7 @@ function App() {
       <RefineKbarProvider>
         <ColorModeContextProvider>
           <ConfigProvider
+            locale={antdLocale}
             theme={{
               token: {
                 colorPrimary: "#dc7734",
@@ -142,7 +161,7 @@ function App() {
                       )}
                       Footer={() => (
                         <Footer style={{ textAlign: "center" }}>
-                          Spoolman - Version <Version />
+                          Spoolman - {t("version")} <Version />
                         </Footer>
                       )}
                     >
@@ -199,6 +218,7 @@ function App() {
 
               <RefineKbar />
               <UnsavedChangesNotifier />
+              <DocumentTitleHandler />
             </Refine>
           </ConfigProvider>
         </ColorModeContextProvider>

client/src/components/column.tsx

@@ -14,12 +14,13 @@ import utc from "dayjs/plugin/utc";
 import { DateField, TextField } from "@refinedev/antd";
 import Icon from "@ant-design/icons";
 import { ReactComponent as SpoolIcon } from "../icon_spool.svg";
+import { useTranslate } from "@refinedev/core";
 
 dayjs.extend(utc);
 
 interface BaseColumnProps<Obj> {
   id: keyof Obj & string;
-  title: string;
+  i18ncat: string;
   dataSource: Obj[];
   tableState: TableState;
 }
@@ -42,6 +43,7 @@ interface CustomColumnProps<Obj> {
 function Column<Obj>(
   props: BaseColumnProps<Obj> & FilteredColumnProps & CustomColumnProps<Obj>
 ) {
+  const t = useTranslate();
   if (
     props.tableState.showColumns &&
     !props.tableState.showColumns.includes(props.id)
@@ -51,7 +53,7 @@ function Column<Obj>(
   const typedSorters = typeSorters<Obj>(props.tableState.sorters);
   const columnProps: AntdColumnProps<Obj> = {
     dataIndex: props.id,
-    title: props.title,
+    title: t(`${props.i18ncat}.fields.${props.id}`),
     sorter: true,
     sortOrder: getSortOrderForField(typedSorters, props.id),
   };

client/src/components/header/index.tsx

@@ -1,8 +1,7 @@
 import { DownOutlined } from "@ant-design/icons";
 import type { RefineThemedLayoutV2HeaderProps } from "@refinedev/antd";
-import { useGetIdentity, useGetLocale, useSetLocale } from "@refinedev/core";
+import { useGetLocale, useSetLocale } from "@refinedev/core";
 import {
-  Avatar,
   Button,
   Dropdown,
   Layout as AntdLayout,
@@ -10,20 +9,15 @@ import {
   Space,
   Switch,
   theme,
-  Typography,
 } from "antd";
 import React, { useContext } from "react";
 import { useTranslation } from "react-i18next";
 import { ColorModeContext } from "../../contexts/color-mode";
 
-const { Text } = Typography;
+import "/node_modules/flag-icons/css/flag-icons.min.css";
-const { useToken } = theme;
+import { languages } from "../../i18n";
 
-type IUser = {
+const { useToken } = theme;
-  id: number;
-  name: string;
-  avatar: string;
-};
 
 export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
   sticky,
@@ -32,7 +26,6 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
   const { i18n } = useTranslation();
   const locale = useGetLocale();
   const changeLanguage = useSetLocale();
-  const { data: user } = useGetIdentity<IUser>();
   const { mode, setMode } = useContext(ColorModeContext);
 
   const currentLocale = locale();
@@ -43,11 +36,12 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
       key: lang,
       onClick: () => changeLanguage(lang),
       icon: (
-        <span style={{ marginRight: 8 }}>
+        <span
-          <Avatar size={16} src={`/images/flags/${lang}.svg`} />
+          className={"fi fi-" + languages[lang].countryCode}
-        </span>
+          style={{ marginRight: 8 }}
+        />
       ),
-      label: lang === "en" ? "English" : "German",
+      label: languages[lang].name,
     }));
 
   const headerStyles: React.CSSProperties = {
@@ -76,8 +70,12 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
         >
           <Button type="text">
             <Space>
-              <Avatar size={16} src={`/images/flags/${currentLocale}.svg`} />
+              <span
-              {currentLocale === "en" ? "English" : "German"}
+                className={
+                  "fi fi-" + languages[currentLocale ?? "en"].countryCode
+                }
+              />
+              {languages[currentLocale ?? "en"].name}
               <DownOutlined />
             </Space>
           </Button>
@@ -88,10 +86,6 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
           onChange={() => setMode(mode === "light" ? "dark" : "light")}
           defaultChecked={mode === "dark"}
         />
-        <Space style={{ marginLeft: "8px" }} size="middle">
-          {user?.name && <Text strong>{user.name}</Text>}
-          {user?.avatar && <Avatar src={user?.avatar} alt={user?.name} />}
-        </Space>
       </Space>
     </AntdLayout.Header>
   );

client/src/i18n.ts

@@ -3,17 +3,41 @@ import detector from "i18next-browser-languagedetector";
 import Backend from "i18next-xhr-backend";
 import { initReactI18next } from "react-i18next";
 
+interface Language {
+  name: string;
+  countryCode: string;
+  fullCode: string;
+}
+
+export const languages: { [key: string]: Language } = {
+  ["en"]: {
+    name: "English",
+    countryCode: "gb",
+    fullCode: "en-GB",
+  },
+  ["sv"]: {
+    name: "Svenska",
+    countryCode: "se",
+    fullCode: "sv-SE",
+  },
+  ["de"]: {
+    name: "Deutsch",
+    countryCode: "de",
+    fullCode: "de-DE",
+  },
+}
+
 i18n
   .use(Backend)
   .use(detector)
   .use(initReactI18next)
   .init({
-    supportedLngs: ["en"],
+    supportedLngs: Object.keys(languages),
     backend: {
       loadPath: "/locales/{{lng}}/{{ns}}.json",
     },
     defaultNS: "common",
-    fallbackLng: ["en"],
+    fallbackLng: Object.keys(languages),
   });
 
 export default i18n;

client/src/pages/filaments/create.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { IResourceComponentsProps } from "@refinedev/core";
+import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import { Create, useForm, useSelect } from "@refinedev/antd";
 import { Form, Input, Select, InputNumber, ColorPicker } from "antd";
 import TextArea from "antd/es/input/TextArea";
@@ -14,6 +14,8 @@ interface CreateOrCloneProps {
 export const FilamentCreate: React.FC<
   IResourceComponentsProps & CreateOrCloneProps
 > = (props) => {
+  const t = useTranslate();
+
   const { formProps, saveButtonProps, formLoading } = useForm<IFilament>();
 
   if (props.mode === "clone" && formProps.initialValues) {
@@ -36,8 +38,8 @@ export const FilamentCreate: React.FC<
     >
       <Form {...formProps} layout="vertical">
         <Form.Item
-          label="Name"
+          label={t("filament.fields.name")}
-          help="Filament name, to distinguish this filament type among others from the same vendor. Should contain the color for example."
+          help={t("filament.fields_help.name")}
           name={["name"]}
           rules={[
             {
@@ -48,7 +50,7 @@ export const FilamentCreate: React.FC<
           <Input maxLength={64} />
         </Form.Item>
         <Form.Item
-          label="Vendor"
+          label={t("filament.fields.vendor")}
           name={["vendor_id"]}
           rules={[
             {
@@ -59,7 +61,7 @@ export const FilamentCreate: React.FC<
           <Select {...selectProps} allowClear />
         </Form.Item>
         <Form.Item
-          label="Color"
+          label={t("filament.fields.color_hex")}
           name={["color_hex"]}
           rules={[
             {
@@ -73,8 +75,8 @@ export const FilamentCreate: React.FC<
           <ColorPicker format="hex" />
         </Form.Item>
         <Form.Item
-          label="Material"
+          label={t("filament.fields.material")}
-          help="E.g. PLA, ABS, PETG, etc."
+          help={t("filament.fields_help.material")}
           name={["material"]}
           rules={[
             {
@@ -85,8 +87,8 @@ export const FilamentCreate: React.FC<
           <Input maxLength={64} />
         </Form.Item>
         <Form.Item
-          label="Price"
+          label={t("filament.fields.price")}
-          help="Price of a full spool in the system configured currency."
+          help={t("filament.fields_help.price")}
           name={["price"]}
           rules={[
             {
@@ -102,7 +104,7 @@ export const FilamentCreate: React.FC<
           />
         </Form.Item>
         <Form.Item
-          label="Density"
+          label={t("filament.fields.density")}
           name={["density"]}
           rules={[
             {
@@ -119,7 +121,7 @@ export const FilamentCreate: React.FC<
           />
         </Form.Item>
         <Form.Item
-          label="Diameter"
+          label={t("filament.fields.diameter")}
           name={["diameter"]}
           rules={[
             {
@@ -136,8 +138,8 @@ export const FilamentCreate: React.FC<
           />
         </Form.Item>
         <Form.Item
-          label="Weight"
+          label={t("filament.fields.weight")}
-          help="The filament weight of a full spool (net weight). This should not include the weight of the spool itself, only the filament. It is what is usually written on the packaging."
+          help={t("filament.fields_help.weight")}
           name={["weight"]}
           rules={[
             {
@@ -148,8 +150,8 @@ export const FilamentCreate: React.FC<
           <InputNumber min={0} addonAfter="g" precision={0} />
         </Form.Item>
         <Form.Item
-          label="Spool Weight"
+          label={t("filament.fields.spool_weight")}
-          help="The weight of an empty spool. Currently not used for anything, but could be used by thirdparty apps to e.g. calculate the filament weight from a weight measurement."
+          help={t("filament.fields_help.spool_weight")}
           name={["spool_weight"]}
           rules={[
             {
@@ -160,8 +162,7 @@ export const FilamentCreate: React.FC<
           <InputNumber min={0} addonAfter="g" precision={0} />
         </Form.Item>
         <Form.Item
-          label="Override Extruder Temperature"
+          label={t("filament.fields.settings_extruder_temp")}
-          help="Override the extruder temperature for this filament type."
           name={["settings_extruder_temp"]}
           rules={[
             {
@@ -172,8 +173,7 @@ export const FilamentCreate: React.FC<
           <InputNumber min={0} addonAfter="°C" precision={0} />
         </Form.Item>
         <Form.Item
-          label="Override Bed Temperature"
+          label={t("filament.fields.settings_bed_temp")}
-          help="Override the bed temperature for this filament type."
           name={["settings_bed_temp"]}
           rules={[
             {
@@ -184,9 +184,9 @@ export const FilamentCreate: React.FC<
           <InputNumber min={0} addonAfter="°C" precision={0} />
         </Form.Item>
         <Form.Item
-          label="Article Number"
+          label={t("filament.fields.article_number")}
+          help={t("filament.fields_help.article_number")}
           name={["article_number"]}
-          help="E.g. EAN, UPC, etc."
           rules={[
             {
               required: false,
@@ -196,7 +196,7 @@ export const FilamentCreate: React.FC<
           <Input maxLength={64} />
         </Form.Item>
         <Form.Item
-          label="Comment"
+          label={t("filament.fields.comment")}
           name={["comment"]}
           rules={[
             {

client/src/pages/filaments/edit.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { IResourceComponentsProps } from "@refinedev/core";
+import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import { Edit, useForm, useSelect } from "@refinedev/antd";
 import {
   Form,
@@ -16,6 +16,8 @@ import { IVendor } from "../vendors/model";
 import { IFilament } from "./model";
 
 export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
+  const t = useTranslate();
+
   const { formProps, saveButtonProps } = useForm<IFilament>();
 
   const { selectProps } = useSelect<IVendor>({
@@ -32,7 +34,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
     <Edit saveButtonProps={saveButtonProps}>
       <Form {...formProps} layout="vertical">
         <Form.Item
-          label="Id"
+          label={t("filament.fields.id")}
           name={["id"]}
           rules={[
             {
@@ -43,7 +45,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
           <Input readOnly disabled />
         </Form.Item>
         <Form.Item
-          label="Registered"
+          label={t("filament.fields.registered")}
           name={["registered"]}
           rules={[
             {
@@ -57,8 +59,8 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
           <DatePicker disabled showTime format="YYYY-MM-DD HH:mm:ss" />
         </Form.Item>
         <Form.Item
-          label="Name"
+          label={t("filament.fields.name")}
-          help="Filament name, to distinguish this filament type among others from the same vendor. Should contain the color for example."
+          help={t("filament.fields_help.name")}
           name={["name"]}
           rules={[
             {
@@ -69,7 +71,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
           <Input maxLength={64} />
         </Form.Item>
         <Form.Item
-          label="Vendor"
+          label={t("filament.fields.vendor")}
           name={["vendor_id"]}
           rules={[
             {
@@ -87,7 +89,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
           <Select {...selectProps} allowClear />
         </Form.Item>
         <Form.Item
-          label="Color"
+          label={t("filament.fields.color_hex")}
           name={["color_hex"]}
           rules={[
             {
@@ -101,8 +103,8 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
           <ColorPicker format="hex" />
         </Form.Item>
         <Form.Item
-          label="Material"
+          label={t("filament.fields.material")}
-          help="E.g. PLA, ABS, PETG, etc."
+          help={t("filament.fields_help.material")}
           name={["material"]}
           rules={[
             {
@@ -113,8 +115,8 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
           <Input maxLength={64} />
         </Form.Item>
         <Form.Item
-          label="Price"
+          label={t("filament.fields.price")}
-          help="Price of a full spool in the system configured currency."
+          help={t("filament.fields_help.price")}
           name={["price"]}
           rules={[
             {
@@ -130,7 +132,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
           />
         </Form.Item>
         <Form.Item
-          label="Density"
+          label={t("filament.fields.density")}
           name={["density"]}
           rules={[
             {
@@ -147,7 +149,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
           />
         </Form.Item>
         <Form.Item
-          label="Diameter"
+          label={t("filament.fields.diameter")}
           name={["diameter"]}
           rules={[
             {
@@ -164,8 +166,8 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
           />
         </Form.Item>
         <Form.Item
-          label="Weight"
+          label={t("filament.fields.weight")}
-          help="The filament weight of a full spool (net weight). This should not include the weight of the spool itself, only the filament. It is what is usually written on the packaging."
+          help={t("filament.fields_help.weight")}
           name={["weight"]}
           rules={[
             {
@@ -176,8 +178,8 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
           <InputNumber min={0} addonAfter="g" precision={0} />
         </Form.Item>
         <Form.Item
-          label="Spool Weight"
+          label={t("filament.fields.spool_weight")}
-          help="The weight of an empty spool. Currently not used for anything, but could be used by thirdparty apps to e.g. calculate the filament weight from a weight measurement."
+          help={t("filament.fields_help.spool_weight")}
           name={["spool_weight"]}
           rules={[
             {
@@ -188,8 +190,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
           <InputNumber min={0} addonAfter="g" precision={0} />
         </Form.Item>
         <Form.Item
-          label="Override Extruder Temperature"
+          label={t("filament.fields.settings_extruder_temp")}
-          help="Override the extruder temperature for this filament type."
           name={["settings_extruder_temp"]}
           rules={[
             {
@@ -200,8 +201,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
           <InputNumber min={0} addonAfter="°C" precision={0} />
         </Form.Item>
         <Form.Item
-          label="Override Bed Temperature"
+          label={t("filament.fields.settings_bed_temp")}
-          help="Override the bed temperature for this filament type."
           name={["settings_bed_temp"]}
           rules={[
             {
@@ -212,9 +212,9 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
           <InputNumber min={0} addonAfter="°C" precision={0} />
         </Form.Item>
         <Form.Item
-          label="Article Number"
+          label={t("filament.fields.article_number")}
+          help={t("filament.fields_help.article_number")}
           name={["article_number"]}
-          help="E.g. EAN, UPC, etc."
           rules={[
             {
               required: false,
@@ -224,7 +224,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
           <Input maxLength={64} />
         </Form.Item>
         <Form.Item
-          label="Comment"
+          label={t("filament.fields.comment")}
           name={["comment"]}
           rules={[
             {

client/src/pages/filaments/list.tsx

@@ -1,5 +1,9 @@
 import React from "react";
-import { IResourceComponentsProps, BaseRecord } from "@refinedev/core";
+import {
+  IResourceComponentsProps,
+  BaseRecord,
+  useTranslate,
+} from "@refinedev/core";
 import {
   useTable,
   List,
@@ -26,7 +30,6 @@ import {
   SortedColumn,
   SpoolIconColumn,
 } from "../../components/column";
-import i18n from "../../i18n";
 
 dayjs.extend(utc);
 
@@ -35,6 +38,8 @@ interface IFilamentCollapsed extends Omit<IFilament, "vendor"> {
 }
 
 export const FilamentList: React.FC<IResourceComponentsProps> = () => {
+  const t = useTranslate();
+
   // Load initial state
   const initialState = useInitialTableState("filamentList");
 
@@ -133,14 +138,14 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
               setCurrent(1);
             }}
           >
-            Clear Filters
+            {t("buttons.clearFilters")}
           </Button>
           <Dropdown
             trigger={["click"]}
             menu={{
               items: allColumns.map((column_id) => ({
                 key: column_id,
-                label: i18n.t(`filaments.fields.${column_id}`),
+                label: t(`filament.fields.${column_id}`),
               })),
               selectedKeys: showColumns,
               selectable: true,
@@ -154,7 +159,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
             }}
           >
             <Button type="primary" icon={<EditOutlined />}>
-              Hide Columns
+              {t("buttons.hideColumns")}
             </Button>
           </Dropdown>
           {defaultButtons}
@@ -177,38 +182,38 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
       >
         {SortedColumn({
           id: "id",
-          title: "Id",
+          i18ncat: "filament",
           dataSource,
           tableState,
         })}
         {FilteredColumn({
           id: "vendor_name",
-          title: "Vendor",
+          i18ncat: "filament",
           dataSource,
           tableState,
         })}
         {SpoolIconColumn({
           id: "name",
-          title: "Name",
+          i18ncat: "filament",
           color: (record: IFilamentCollapsed) => record.color_hex,
           dataSource,
           tableState,
         })}
         {FilteredColumn({
           id: "material",
-          title: "Material",
+          i18ncat: "filament",
           dataSource,
           tableState,
         })}
         {SortedColumn({
           id: "price",
-          title: "Price",
+          i18ncat: "filament",
           dataSource,
           tableState,
         })}
         {NumberColumn({
           id: "density",
-          title: "Density",
+          i18ncat: "filament",
           unit: "g/cm³",
           decimals: 2,
           dataSource,
@@ -216,7 +221,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
         })}
         {NumberColumn({
           id: "diameter",
-          title: "Diameter",
+          i18ncat: "filament",
           unit: "mm",
           decimals: 2,
           dataSource,
@@ -224,7 +229,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
         })}
         {NumberColumn({
           id: "weight",
-          title: "Weight",
+          i18ncat: "filament",
           unit: "g",
           decimals: 1,
           dataSource,
@@ -232,7 +237,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
         })}
         {NumberColumn({
           id: "spool_weight",
-          title: "Spool Weight",
+          i18ncat: "filament",
           unit: "g",
           decimals: 1,
           dataSource,
@@ -240,42 +245,41 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
         })}
         {FilteredColumn({
           id: "article_number",
-          title: "Article Number",
+          i18ncat: "filament",
           dataSource,
           tableState,
         })}
         {DateColumn({
           id: "registered",
-          title: "Registered",
+          i18ncat: "filament",
           dataSource,
           tableState,
         })}
         {SortedColumn({
           id: "comment",
-          title: "Comment",
+          i18ncat: "filament",
           dataSource,
           tableState,
         })}
         <Table.Column
-          title="Actions"
+          title={t("table.actions")}
-          dataIndex="actions"
           render={(_, record: BaseRecord) => (
             <Space>
               <EditButton
                 hideText
-                title="Edit"
+                title={t("buttons.edit")}
                 size="small"
                 recordItemId={record.id}
               />
               <ShowButton
                 hideText
-                title="Show"
+                title={t("buttons.show")}
                 size="small"
                 recordItemId={record.id}
               />
               <CloneButton
                 hideText
-                title="Clone"
+                title={t("buttons.clone")}
                 size="small"
                 recordItemId={record.id}
               />

client/src/pages/filaments/show.tsx

@@ -1,5 +1,9 @@
 import React from "react";
-import { IResourceComponentsProps, useShow } from "@refinedev/core";
+import {
+  IResourceComponentsProps,
+  useShow,
+  useTranslate,
+} from "@refinedev/core";
 import { Show, NumberField, DateField, TextField } from "@refinedev/antd";
 import { Typography } from "antd";
 import { NumberFieldUnit } from "../../components/numberField";
@@ -12,6 +16,8 @@ dayjs.extend(utc);
 const { Title } = Typography;
 
 export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
+  const t = useTranslate();
+
   const { queryResult } = useShow<IFilament>();
   const { data, isLoading } = queryResult;
 
@@ -19,25 +25,25 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
 
   return (
     <Show isLoading={isLoading}>
-      <Title level={5}>Id</Title>
+      <Title level={5}>{t("filament.fields.id")}</Title>
       <NumberField value={record?.id ?? ""} />
-      <Title level={5}>Registered</Title>
+      <Title level={5}>{t("filament.fields.registered")}</Title>
       <DateField
         value={dayjs.utc(record?.registered).local()}
         title={dayjs.utc(record?.registered).local().format()}
         format="YYYY-MM-DD HH:mm:ss"
       />
-      <Title level={5}>Name</Title>
+      <Title level={5}>{t("filament.fields.name")}</Title>
       <TextField value={record?.name} />
-      <Title level={5}>Vendor</Title>
+      {/* <Title level={5}>{t("filament.fields.id")}</Title>
-      {/* {vendorIsLoading ? <>Loading...</> : <>{vendorData?.data?.id}</>} */}
+      {vendorIsLoading ? <>Loading...</> : <>{vendorData?.data?.id}</>} */}
-      <Title level={5}>Color</Title>
+      <Title level={5}>{t("filament.fields.color_hex")}</Title>
       <TextField value={record?.color_hex} />
-      <Title level={5}>Material</Title>
+      <Title level={5}>{t("filament.fields.material")}</Title>
       <TextField value={record?.material} />
-      <Title level={5}>Price</Title>
+      <Title level={5}>{t("filament.fields.price")}</Title>
       <NumberField value={record?.price ?? ""} />
-      <Title level={5}>Density</Title>
+      <Title level={5}>{t("filament.fields.density")}</Title>
       <NumberFieldUnit
         value={record?.density ?? ""}
         unit="g/cm³"
@@ -45,7 +51,7 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
           maximumFractionDigits: 2,
         }}
       />
-      <Title level={5}>Diameter</Title>
+      <Title level={5}>{t("filament.fields.diameter")}</Title>
       <NumberFieldUnit
         value={record?.diameter ?? ""}
         unit="mm"
@@ -53,7 +59,7 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
           maximumFractionDigits: 2,
         }}
       />
-      <Title level={5}>Weight</Title>
+      <Title level={5}>{t("filament.fields.weight")}</Title>
       <NumberFieldUnit
         value={record?.weight ?? ""}
         unit="g"
@@ -61,7 +67,7 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
           maximumFractionDigits: 1,
         }}
       />
-      <Title level={5}>Spool Weight</Title>
+      <Title level={5}>{t("filament.fields.spool_weight")}</Title>
       <NumberFieldUnit
         value={record?.spool_weight ?? ""}
         unit="g"
@@ -69,7 +75,7 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
           maximumFractionDigits: 1,
         }}
       />
-      <Title level={5}>Overridden Extruder Temperature</Title>
+      <Title level={5}>{t("filament.fields.settings_extruder_temp")}</Title>
       {!record?.settings_extruder_temp ? (
         <TextField value="Not Set" />
       ) : (
@@ -78,15 +84,15 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
           unit="°C"
         />
       )}
-      <Title level={5}>Overridden Bed Temperature</Title>
+      <Title level={5}>{t("filament.fields.settings_bed_temp")}</Title>
       {!record?.settings_bed_temp ? (
         <TextField value="Not Set" />
       ) : (
         <NumberFieldUnit value={record?.settings_bed_temp ?? ""} unit="°C" />
       )}
-      <Title level={5}>Article Number</Title>
+      <Title level={5}>{t("filament.fields.article_number")}</Title>
       <TextField value={record?.article_number} />
-      <Title level={5}>Comment</Title>
+      <Title level={5}>{t("filament.fields.comment")}</Title>
       <TextField value={record?.comment} />
     </Show>
   );

client/src/pages/spools/create.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { IResourceComponentsProps } from "@refinedev/core";
+import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import { Create, useForm, useSelect } from "@refinedev/antd";
 import { Form, Input, DatePicker, Select, InputNumber } from "antd";
 import dayjs from "dayjs";
@@ -14,6 +14,8 @@ interface CreateOrCloneProps {
 export const SpoolCreate: React.FC<
   IResourceComponentsProps & CreateOrCloneProps
 > = (props) => {
+  const t = useTranslate();
+
   const { formProps, saveButtonProps, formLoading } = useForm<ISpool>();
 
   if (props.mode === "clone" && formProps.initialValues) {
@@ -49,13 +51,17 @@ export const SpoolCreate: React.FC<
 
   return (
     <Create
-      title={props.mode === "create" ? "Create Spool" : "Clone Spool"}
+      title={
+        props.mode === "create"
+          ? t("spool.titles.create")
+          : t("spool.titles.clone")
+      }
       saveButtonProps={saveButtonProps}
       isLoading={formLoading}
     >
       <Form {...formProps} layout="vertical">
         <Form.Item
-          label="First Used"
+          label={t("spool.fields.first_used")}
           name={["first_used"]}
           rules={[
             {
@@ -69,7 +75,7 @@ export const SpoolCreate: React.FC<
           <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
         </Form.Item>
         <Form.Item
-          label="Last Used"
+          label={t("spool.fields.last_used")}
           name={["last_used"]}
           rules={[
             {
@@ -83,7 +89,7 @@ export const SpoolCreate: React.FC<
           <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
         </Form.Item>
         <Form.Item
-          label="Filament"
+          label={t("spool.fields.filament")}
           name={["filament_id"]}
           rules={[
             {
@@ -94,7 +100,8 @@ export const SpoolCreate: React.FC<
           <Select options={filamentOptions} />
         </Form.Item>
         <Form.Item
-          label="Used Weight"
+          label={t("spool.fields.used_weight")}
+          help={t("spool.fields_help.used_weight")}
           name={["used_weight"]}
           rules={[
             {
@@ -105,7 +112,8 @@ export const SpoolCreate: React.FC<
           <InputNumber min={0} addonAfter="g" precision={0} />
         </Form.Item>
         <Form.Item
-          label="Location"
+          label={t("spool.fields.location")}
+          help={t("spool.fields_help.location")}
           name={["location"]}
           rules={[
             {
@@ -116,7 +124,8 @@ export const SpoolCreate: React.FC<
           <Input maxLength={64} />
         </Form.Item>
         <Form.Item
-          label="Lot Nr"
+          label={t("spool.fields.lot_nr")}
+          help={t("spool.fields_help.lot_nr")}
           name={["lot_nr"]}
           rules={[
             {
@@ -127,7 +136,7 @@ export const SpoolCreate: React.FC<
           <Input maxLength={64} />
         </Form.Item>
         <Form.Item
-          label="Comment"
+          label={t("spool.fields.comment")}
           name={["comment"]}
           rules={[
             {

client/src/pages/spools/edit.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { IResourceComponentsProps } from "@refinedev/core";
+import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import { Edit, useForm, useSelect } from "@refinedev/antd";
 import { Form, Input, DatePicker, Select, InputNumber } from "antd";
 import dayjs from "dayjs";
@@ -8,6 +8,8 @@ import { IFilament } from "../filaments/model";
 import { ISpool } from "./model";
 
 export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
+  const t = useTranslate();
+
   const { formProps, saveButtonProps } = useForm<ISpool>();
 
   const { queryResult } = useSelect<IFilament>({
@@ -40,7 +42,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
     <Edit saveButtonProps={saveButtonProps}>
       <Form {...formProps} layout="vertical">
         <Form.Item
-          label="Id"
+          label={t("spool.fields.id")}
           name={["id"]}
           rules={[
             {
@@ -51,7 +53,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
           <Input readOnly disabled />
         </Form.Item>
         <Form.Item
-          label="Registered"
+          label={t("spool.fields.registered")}
           name={["registered"]}
           rules={[
             {
@@ -65,7 +67,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
           <DatePicker disabled showTime format="YYYY-MM-DD HH:mm:ss" />
         </Form.Item>
         <Form.Item
-          label="First Used"
+          label={t("spool.fields.first_used")}
           name={["first_used"]}
           rules={[
             {
@@ -79,7 +81,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
           <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
         </Form.Item>
         <Form.Item
-          label="Last Used"
+          label={t("spool.fields.last_used")}
           name={["last_used"]}
           rules={[
             {
@@ -93,7 +95,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
           <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
         </Form.Item>
         <Form.Item
-          label="Filament"
+          label={t("spool.fields.filament")}
           name={["filament_id"]}
           rules={[
             {
@@ -104,7 +106,8 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
           <Select options={filamentOptions} />
         </Form.Item>
         <Form.Item
-          label="Used Weight"
+          label={t("spool.fields.used_weight")}
+          help={t("spool.fields_help.used_weight")}
           name={["used_weight"]}
           rules={[
             {
@@ -118,7 +121,8 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
           more elegantly for locales which use , as a thousands separator. */}
         </Form.Item>
         <Form.Item
-          label="Location"
+          label={t("spool.fields.location")}
+          help={t("spool.fields_help.location")}
           name={["location"]}
           rules={[
             {
@@ -129,7 +133,8 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
           <Input maxLength={64} />
         </Form.Item>
         <Form.Item
-          label="Lot Nr"
+          label={t("spool.fields.lot_nr")}
+          help={t("spool.fields_help.lot_nr")}
           name={["lot_nr"]}
           rules={[
             {
@@ -140,7 +145,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
           <Input maxLength={64} />
         </Form.Item>
         <Form.Item
-          label="Comment"
+          label={t("spool.fields.comment")}
           name={["comment"]}
           rules={[
             {

client/src/pages/spools/list.tsx

@@ -1,5 +1,9 @@
 import React from "react";
-import { IResourceComponentsProps, BaseRecord } from "@refinedev/core";
+import {
+  IResourceComponentsProps,
+  BaseRecord,
+  useTranslate,
+} from "@refinedev/core";
 import {
   useTable,
   List,
@@ -26,7 +30,6 @@ import {
   SortedColumn,
   SpoolIconColumn,
 } from "../../components/column";
-import i18n from "../../i18n";
 
 dayjs.extend(utc);
 
@@ -35,6 +38,8 @@ interface ISpoolCollapsed extends ISpool {
 }
 
 export const SpoolList: React.FC<IResourceComponentsProps> = () => {
+  const t = useTranslate();
+
   // Load initial state
   const initialState = useInitialTableState("spoolList");
 
@@ -131,14 +136,14 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
               setCurrent(1);
             }}
           >
-            Clear Filters
+            {t("buttons.clearFilters")}
           </Button>
           <Dropdown
             trigger={["click"]}
             menu={{
               items: allColumns.map((column) => ({
                 key: column,
-                label: i18n.t(`spools.fields.${column}`),
+                label: t(`spool.fields.${column}`),
               })),
               selectedKeys: showColumns,
               selectable: true,
@@ -152,7 +157,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
             }}
           >
             <Button type="primary" icon={<EditOutlined />}>
-              Hide Columns
+              {t("buttons.hideColumns")}
             </Button>
           </Dropdown>
           {defaultButtons}
@@ -175,20 +180,20 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
       >
         {SortedColumn({
           id: "id",
-          title: "Id",
+          i18ncat: "spool",
           dataSource,
           tableState,
         })}
         {SpoolIconColumn({
           id: "filament_name",
-          title: "Filament",
+          i18ncat: "spool",
           color: (record: ISpoolCollapsed) => record.filament.color_hex,
           dataSource,
           tableState,
         })}
         {NumberColumn({
           id: "used_weight",
-          title: "Used Weight",
+          i18ncat: "spool",
           unit: "g",
           decimals: 1,
           dataSource,
@@ -196,7 +201,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
         })}
         {NumberColumn({
           id: "remaining_weight",
-          title: "Estimated Remaining Weight",
+          i18ncat: "spool",
           unit: "g",
           decimals: 1,
           dataSource,
@@ -204,53 +209,53 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
         })}
         {FilteredColumn({
           id: "location",
-          title: "Location",
+          i18ncat: "spool",
           dataSource,
           tableState,
         })}
         {FilteredColumn({
           id: "lot_nr",
-          title: "Lot Nr",
+          i18ncat: "spool",
           dataSource,
           tableState,
         })}
         {DateColumn({
           id: "first_used",
-          title: "First Used",
+          i18ncat: "spool",
           dataSource,
           tableState,
         })}
         {DateColumn({
           id: "last_used",
-          title: "Last Used",
+          i18ncat: "spool",
           dataSource,
           tableState,
         })}
         {SortedColumn({
           id: "comment",
-          title: "Comment",
+          i18ncat: "spool",
           dataSource,
           tableState,
         })}
         <Table.Column
-          title="Actions"
+          title={t("table.actions")}
           render={(_, record: BaseRecord) => (
             <Space>
               <EditButton
                 hideText
-                title="Edit"
+                title={t("buttons.edit")}
                 size="small"
                 recordItemId={record.id}
               />
               <ShowButton
                 hideText
-                title="Show"
+                title={t("buttons.show")}
                 size="small"
                 recordItemId={record.id}
               />
               <CloneButton
                 hideText
-                title="Clone"
+                title={t("buttons.clone")}
                 size="small"
                 recordItemId={record.id}
               />

client/src/pages/spools/show.tsx

@@ -1,5 +1,9 @@
 import React from "react";
-import { IResourceComponentsProps, useShow } from "@refinedev/core";
+import {
+  IResourceComponentsProps,
+  useShow,
+  useTranslate,
+} from "@refinedev/core";
 import { Show, NumberField, DateField, TextField } from "@refinedev/antd";
 import { Typography } from "antd";
 import { NumberFieldUnit } from "../../components/numberField";
@@ -12,6 +16,8 @@ dayjs.extend(utc);
 const { Title } = Typography;
 
 export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
+  const t = useTranslate();
+
   const { queryResult } = useShow<ISpool>();
   const { data, isLoading } = queryResult;
 
@@ -19,35 +25,35 @@ export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
 
   return (
     <Show isLoading={isLoading}>
-      <Title level={5}>Id</Title>
+      <Title level={5}>{t("spool.fields.id")}</Title>
       <NumberField value={record?.id ?? ""} />
-      <Title level={5}>Registered</Title>
+      <Title level={5}>{t("spool.fields.registered")}</Title>
       <DateField
         value={dayjs.utc(record?.registered).local()}
         title={dayjs.utc(record?.registered).local().format()}
         format="YYYY-MM-DD HH:mm:ss"
       />
-      <Title level={5}>First Used</Title>
+      <Title level={5}>{t("spool.fields.first_used")}</Title>
       <DateField
         hidden={!record?.first_used}
         value={dayjs.utc(record?.first_used).local()}
         title={dayjs.utc(record?.first_used).local().format()}
         format="YYYY-MM-DD HH:mm:ss"
       />
-      <Title level={5}>Last Used</Title>
+      <Title level={5}>{t("spool.fields.last_used")}</Title>
       <DateField
         hidden={!record?.last_used}
         value={dayjs.utc(record?.last_used).local()}
         title={dayjs.utc(record?.last_used).local().format()}
         format="YYYY-MM-DD HH:mm:ss"
       />
-      <Title level={5}>Filament</Title>
+      {/* <Title level={5}>{t("spool.fields.filament_id")}</Title>
-      {/* {filamentIsLoading ? (
+      {filamentIsLoading ? (
                 <>Loading...</>
             ) : (
                 <>{filamentData?.data?.id}</>
             )} */}
-      <Title level={5}>Remaining Weight</Title>
+      <Title level={5}>{t("spool.fields.remaining_weight")}</Title>
       <NumberFieldUnit
         value={record?.remaining_weight ?? ""}
         unit="g"
@@ -55,7 +61,7 @@ export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
           maximumFractionDigits: 1,
         }}
       />
-      <Title level={5}>Used Weight</Title>
+      <Title level={5}>{t("spool.fields.used_weight")}</Title>
       <NumberFieldUnit
         value={record?.used_weight ?? ""}
         unit="g"
@@ -63,11 +69,11 @@ export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
           maximumFractionDigits: 1,
         }}
       />
-      <Title level={5}>Location</Title>
+      <Title level={5}>{t("spool.fields.location")}</Title>
       <TextField value={record?.location} />
-      <Title level={5}>Lot Nr</Title>
+      <Title level={5}>{t("spool.fields.lot_nr")}</Title>
       <TextField value={record?.lot_nr} />
-      <Title level={5}>Comment</Title>
+      <Title level={5}>{t("spool.fields.comment")}</Title>
       <TextField value={record?.comment} />
     </Show>
   );

client/src/pages/vendors/create.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { IResourceComponentsProps } from "@refinedev/core";
+import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import { Create, useForm } from "@refinedev/antd";
 import { Form, Input } from "antd";
 import TextArea from "antd/es/input/TextArea";
@@ -12,17 +12,23 @@ interface CreateOrCloneProps {
 export const VendorCreate: React.FC<
   IResourceComponentsProps & CreateOrCloneProps
 > = (props) => {
+  const t = useTranslate();
+
   const { formProps, saveButtonProps, formLoading } = useForm<IVendor>();
 
   return (
     <Create
-      title={props.mode === "create" ? "Create Vendor" : "Clone Vendor"}
+      title={
+        props.mode === "create"
+          ? t("vendor.titles.create")
+          : t("vendor.titles.clone")
+      }
       isLoading={formLoading}
       saveButtonProps={saveButtonProps}
     >
       <Form {...formProps} layout="vertical">
         <Form.Item
-          label="Name"
+          label={t("vendor.fields.name")}
           name={["name"]}
           rules={[
             {
@@ -33,7 +39,7 @@ export const VendorCreate: React.FC<
           <Input maxLength={64} />
         </Form.Item>
         <Form.Item
-          label="Comment"
+          label={t("vendor.fields.comment")}
           name={["comment"]}
           rules={[
             {

client/src/pages/vendors/edit.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { IResourceComponentsProps } from "@refinedev/core";
+import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import { Edit, useForm } from "@refinedev/antd";
 import { Form, Input, DatePicker } from "antd";
 import dayjs from "dayjs";
@@ -7,13 +7,15 @@ import TextArea from "antd/es/input/TextArea";
 import { IVendor } from "./model";
 
 export const VendorEdit: React.FC<IResourceComponentsProps> = () => {
+  const t = useTranslate();
+
   const { formProps, saveButtonProps } = useForm<IVendor>();
 
   return (
     <Edit saveButtonProps={saveButtonProps}>
       <Form {...formProps} layout="vertical">
         <Form.Item
-          label="Id"
+          label={t("vendor.fields.id")}
           name={["id"]}
           rules={[
             {
@@ -24,7 +26,7 @@ export const VendorEdit: React.FC<IResourceComponentsProps> = () => {
           <Input readOnly disabled />
         </Form.Item>
         <Form.Item
-          label="Registered"
+          label={t("vendor.fields.registered")}
           name={["registered"]}
           rules={[
             {
@@ -38,7 +40,7 @@ export const VendorEdit: React.FC<IResourceComponentsProps> = () => {
           <DatePicker disabled showTime format="YYYY-MM-DD HH:mm:ss" />
         </Form.Item>
         <Form.Item
-          label="Name"
+          label={t("vendor.fields.name")}
           name={["name"]}
           rules={[
             {
@@ -49,7 +51,7 @@ export const VendorEdit: React.FC<IResourceComponentsProps> = () => {
           <Input maxLength={64} />
         </Form.Item>
         <Form.Item
-          label="Comment"
+          label={t("vendor.fields.comment")}
           name={["comment"]}
           rules={[
             {

client/src/pages/vendors/list.tsx

@@ -1,5 +1,9 @@
 import React from "react";
-import { IResourceComponentsProps, BaseRecord } from "@refinedev/core";
+import {
+  IResourceComponentsProps,
+  BaseRecord,
+  useTranslate,
+} from "@refinedev/core";
 import {
   useTable,
   List,
@@ -19,12 +23,13 @@ import {
   useStoreInitialState,
 } from "../../utils/saveload";
 import { EditOutlined, FilterOutlined } from "@ant-design/icons";
-import i18n from "../../i18n";
 import { DateColumn, SortedColumn } from "../../components/column";
 
 dayjs.extend(utc);
 
 export const VendorList: React.FC<IResourceComponentsProps> = () => {
+  const t = useTranslate();
+
   // Load initial state
   const initialState = useInitialTableState("vendorList");
 
@@ -106,14 +111,14 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
               setCurrent(1);
             }}
           >
-            Clear Filters
+            {t("buttons.clearFilters")}
           </Button>
           <Dropdown
             trigger={["click"]}
             menu={{
               items: allColumns.map((column) => ({
                 key: column,
-                label: i18n.t(`vendors.fields.${column}`),
+                label: t(`vendor.fields.${column}`),
               })),
               selectedKeys: showColumns,
               selectable: true,
@@ -127,7 +132,7 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
             }}
           >
             <Button type="primary" icon={<EditOutlined />}>
-              Hide Columns
+              {t("buttons.hideColumns")}
             </Button>
           </Dropdown>
           {defaultButtons}
@@ -150,48 +155,47 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
       >
         {SortedColumn({
           id: "id",
-          title: "Id",
+          i18ncat: "vendor",
           dataSource,
           tableState,
         })}
         {SortedColumn({
           id: "name",
-          title: "Name",
+          i18ncat: "vendor",
           dataSource,
           tableState,
         })}
         {DateColumn({
           id: "registered",
-          title: "Registered",
+          i18ncat: "vendor",
           dataSource,
           tableState,
         })}
         {SortedColumn({
           id: "comment",
-          title: "Comment",
+          i18ncat: "vendor",
           dataSource,
           tableState,
         })}
         <Table.Column
-          title="Actions"
+          title={t("table.actions")}
-          dataIndex="actions"
           render={(_, record: BaseRecord) => (
             <Space>
               <EditButton
                 hideText
-                title="Edit"
+                title={t("buttons.edit")}
                 size="small"
                 recordItemId={record.id}
               />
               <ShowButton
                 hideText
-                title="Show"
+                title={t("buttons.show")}
                 size="small"
                 recordItemId={record.id}
               />
               <CloneButton
                 hideText
-                title="Clone"
+                title={t("buttons.clone")}
                 size="small"
                 recordItemId={record.id}
               />

client/src/pages/vendors/show.tsx

@@ -1,5 +1,9 @@
 import React from "react";
-import { IResourceComponentsProps, useShow } from "@refinedev/core";
+import {
+  IResourceComponentsProps,
+  useShow,
+  useTranslate,
+} from "@refinedev/core";
 import { Show, NumberField, DateField, TextField } from "@refinedev/antd";
 import { Typography } from "antd";
 import dayjs from "dayjs";
@@ -11,6 +15,8 @@ dayjs.extend(utc);
 const { Title } = Typography;
 
 export const VendorShow: React.FC<IResourceComponentsProps> = () => {
+  const t = useTranslate();
+
   const { queryResult } = useShow<IVendor>();
   const { data, isLoading } = queryResult;
 
@@ -18,17 +24,17 @@ export const VendorShow: React.FC<IResourceComponentsProps> = () => {
 
   return (
     <Show isLoading={isLoading}>
-      <Title level={5}>Id</Title>
+      <Title level={5}>{t("vendor.fields.id")}</Title>
       <NumberField value={record?.id ?? ""} />
-      <Title level={5}>Registered</Title>
+      <Title level={5}>{t("vendor.fields.registered")}</Title>
       <DateField
         value={dayjs.utc(record?.registered).local()}
         title={dayjs.utc(record?.registered).local().format()}
         format="YYYY-MM-DD HH:mm:ss"
       />
-      <Title level={5}>Name</Title>
+      <Title level={5}>{t("vendor.fields.name")}</Title>
       <TextField value={record?.name} />
-      <Title level={5}>Comment</Title>
+      <Title level={5}>{t("vendor.fields.comment")}</Title>
       <TextField value={record?.comment} />
     </Show>
   );