language

apps/edr-freight-web/backoffice/package.json

@@ -67,6 +67,7 @@
     "framer-motion": "^12.40.0",
     "html2canvas": "^1.4.1",
     "i18next": "^26.3.5",
+    "i18next-browser-languagedetector": "^8.2.1",
     "jquery": "^3.7.1",
     "js-cookie": "^3.0.8",
     "jspdf": "^3.0.4",

apps/edr-freight-web/backoffice/src/i18n/index.ts

@@ -1,22 +1,49 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+
+// Shared locale bundles live one level above this app, at
+// apps/edr-freight-web/locales/<lng>/translation.json (Vite's default fs.allow
+// covers the workspace root, so importing across the app boundary is permitted).
+import en from "../../../locales/en/translation.json";
+import am from "../../../locales/am/translation.json";
+import af from "../../../locales/af/translation.json";
+import fr from "../../../locales/fr/translation.json";
+import or from "../../../locales/or/translation.json";
+import sm from "../../../locales/sm/translation.json";
+import tg from "../../../locales/tg/translation.json";
+
+export const SUPPORTED_LANGUAGES = ["en", "am", "af", "fr", "or", "sm", "tg"] as const;
 
 /**
  * i18next singleton for the vendored IAM UI (shared/super-admin/
- * user-management), which do `import i18n from "@/i18n"` and call
- * `useTranslation()` / `t()`. Minimal init so those resolve and render keys;
- * load real translation resources here as they are migrated.
+ * user-management), imported as `@/i18n`. Loads the shared translation bundles
+ * and enables language detection/persistence so the header language switcher
+ * (i18n.changeLanguage) works and survives reloads.
  */
 if (!i18n.isInitialized) {
-  void i18n.use(initReactI18next).init({
-    resources: { en: { translation: {} } },
-    lng: "en",
-    fallbackLng: "en",
-    interpolation: { escapeValue: false },
-    returnNull: false,
-    // Missing keys render as the key text itself (acceptable until resources land).
-    parseMissingKeyHandler: (key) => key,
-  });
+  void i18n
+    .use(LanguageDetector)
+    .use(initReactI18next)
+    .init({
+      resources: {
+        en: { translation: en },
+        am: { translation: am },
+        af: { translation: af },
+        fr: { translation: fr },
+        or: { translation: or },
+        sm: { translation: sm },
+        tg: { translation: tg },
+      },
+      fallbackLng: "en",
+      supportedLngs: SUPPORTED_LANGUAGES as unknown as string[],
+      interpolation: { escapeValue: false },
+      returnNull: false,
+      detection: {
+        order: ["localStorage", "navigator", "htmlTag"],
+        caches: ["localStorage"],
+      },
+    });
 }
 
 export default i18n;

apps/edr-freight-web/backoffice/src/main.tsx

@@ -10,6 +10,10 @@ import "@edr/ui-common/theme.css";
 
 import { Toaster } from "react-hot-toast";
 
+// Initialize i18next before first paint so the detected/persisted language
+// applies immediately (the vendored IAM UI also imports this via @/i18n).
+import "./i18n";
+
 import App from "./App";
 import { ErrorBoundary } from "./components/ErrorBoundary";
 import { AuthProvider } from "./auth/AuthProvider";

apps/edr-freight-web/backoffice/tsconfig.app.json

@@ -4,6 +4,7 @@
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "useDefineForClassFields": true,
     "skipLibCheck": true,
+    "resolveJsonModule": true,
     "paths": {
       "@/*": ["./src/*"],
       "@tria-plc/iamui": ["./src/types/@tria-plc__iamui.d.ts"]