feat(dashboard): localize the tenant app with react-i18next (4/4)

clients/dashboard/eslint.config.js

@@ -2,6 +2,10 @@ import globals from 'globals';
 import reactHooks from 'eslint-plugin-react-hooks';
 import reactRefresh from 'eslint-plugin-react-refresh';
 import jsxA11y from 'eslint-plugin-jsx-a11y';
+import i18next from 'eslint-plugin-i18next';
+// The plugin exports no defaults object; this is 6.x's internal path, and an upgrade that moves it
+// fails the lint at import rather than silently dropping the defaults.
+import i18nextDefaults from 'eslint-plugin-i18next/lib/options/defaults.js';
 import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
@@ -48,4 +52,31 @@ export default tseslint.config(
       'jsx-a11y/anchor-has-content': 'error',
     },
   },
+  {
+    // Text rendered in JSX goes through t(): an unwrapped literal would ship in English to every
+    // language. Scoped to where the UI lives; tests sit outside src/ and are not linted for this.
+    files: ['src/pages/**/*.tsx', 'src/components/**/*.tsx'],
+    plugins: { i18next },
+    rules: {
+      'i18next/no-literal-string': [
+        'error',
+        {
+          mode: 'jsx-text-only',
+          // Code identifiers and key caps are not prose.
+          'jsx-components': { exclude: [...i18nextDefaults['jsx-components'].exclude, 'code', 'kbd'] },
+          // The plugin replaces, not merges, a list it is given, so its defaults are spread back in.
+          words: {
+            exclude: [
+              ...i18nextDefaults.words.exclude,
+              // Separators, units and glyphs (·, %, /, ✓) carry no words to translate.
+              /^[\p{P}\p{S}\p{N}\s]+$/u,
+              // The product name and the build tag stay as they are in every language.
+              /^(fullstack|hero|fullstackhero)$/,
+              /^v\d+(\.\d+)*( · dashboard)?$/,
+            ],
+          },
+        },
+      ],
+    },
+  },
 );

clients/dashboard/package.json

@@ -22,10 +22,13 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "i18next": "^26.3.6",
+    "i18next-browser-languagedetector": "^8.2.1",
     "lucide-react": "^0.475.0",
     "qrcode": "^1.5.4",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
+    "react-i18next": "^17.0.10",
     "react-router-dom": "^7.18.4",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0"
@@ -39,6 +42,7 @@
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.7.0",
     "eslint": "^9.39.4",
+    "eslint-plugin-i18next": "^6.1.5",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.26",

clients/dashboard/playwright.config.ts

@@ -40,6 +40,13 @@ export default defineConfig({
     navigationTimeout: 15_000,
   },
 
+  // Assertions get the same budget as actions. Left at the 5s default they were
+  // the tightest deadline in the suite — every test ends in a toBeVisible, and
+  // under CPU contention (a second suite running, a loaded dev server) the first
+  // paint of a lazy route lands past 5s while staying well inside the action and
+  // navigation budgets. That asymmetry, not the specs, is what made runs flaky.
+  expect: { timeout: 10_000 },
+
   projects: [
     {
       name: "chromium",

clients/dashboard/public/config.json

@@ -3,5 +3,6 @@
   "defaultTenant": "root",
   "demoMode": true,
   "inactivityIdleMs": 1200000,
-  "inactivityWarningMs": 60000
+  "inactivityWarningMs": 60000,
+  "defaultLanguage": "en-US"
 }

clients/dashboard/src/api/billing.ts

@@ -1,4 +1,6 @@
+import type { ParseKeys } from "i18next";
 import { apiFetch, ApiRequestError } from "@/lib/api-client";
+import { INVOICE_STATUS_KEYS, statusKey } from "@/lib/status-keys";
 import { env } from "@/env";
 import { tokenStore } from "@/auth/token-store";
 
@@ -23,6 +25,11 @@ export type UsageSnapshotDto = {
 
 export type InvoiceStatus = "Draft" | "Issued" | "Paid" | "Void" | (string & {});
 
+/** The `subscription` catalog key for a status, or undefined for one the server added after this build. */
+export function invoiceStatusKey(status: InvoiceStatus): ParseKeys<"subscription"> | undefined {
+  return statusKey(INVOICE_STATUS_KEYS, status);
+}
+
 export type InvoicePurpose = "Subscription" | "Usage" | (string & {});
 
 export type InvoiceLineItemKind = "BaseFee" | "Overage" | "Adjustment" | (string & {});

clients/dashboard/src/api/identity.ts

@@ -16,6 +16,7 @@ export type UserDto = {
   phoneNumber?: string;
   imageUrl?: string;
   twoFactorEnabled?: boolean;
+  locale?: string | null;
 };
 
 export type UserRoleDto = {
@@ -398,6 +399,8 @@ export type UpdateProfileInput = {
   firstName: string | null;
   lastName: string | null;
   phoneNumber: string | null;
+  /** BCP 47 UI language tag persisted on the user (drives the JWT locale claim). */
+  locale: string | null;
 };
 
 /**
@@ -447,6 +450,7 @@ export async function updateMyProfile(input: UpdateProfileInput): Promise<void>
       firstName: input.firstName ?? profile.firstName ?? null,
       lastName: input.lastName ?? profile.lastName ?? null,
       phoneNumber: input.phoneNumber ?? profile.phoneNumber ?? null,
+      locale: input.locale ?? profile.locale ?? null,
       deleteCurrentImage: false,
     }),
   });

clients/dashboard/src/api/wallet.ts

@@ -1,5 +1,7 @@
 import { apiFetch } from "@/lib/api-client";
+import type { ParseKeys } from "i18next";
 import type { PagedResult } from "@/api/billing";
+import { statusKey, TOPUP_STATUS_KEYS } from "@/lib/status-keys";
 
 // Wallet transaction kinds. The backend serializes enums as STRINGS
 // (see project_api_string_enums); mirror them as a string union with an
@@ -39,6 +41,11 @@ export type TopupRequestStatus =
   | "Cancelled"
   | (string & {});
 
+/** The `subscription` catalog key for a status, or undefined for one the server added after this build. */
+export function topupStatusKey(status: TopupRequestStatus): ParseKeys<"subscription"> | undefined {
+  return statusKey(TOPUP_STATUS_KEYS, status);
+}
+
 export type TopupRequestDto = {
   id: string;
   tenantId: string;