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

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"

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/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,
       email: profile.email,
       deleteCurrentImage: false,
     }),

clients/dashboard/src/auth/impersonation-handoff.ts

@@ -1,31 +1,33 @@
 import { tokenStore } from "@/auth/token-store";
+import i18n, { SUPPORTED } from "@/i18n";
 
 /**
  * Cross-app impersonation handoff. The admin app issues an impersonation
  * access token server-side, then opens the dashboard with the token in the
  * URL hash:
  *
- *   https://dashboard.example.com/#impersonate?token=<jwt>&tenant=<id>&expiresAt=<iso>
+ *   https://dashboard.example.com/#impersonate?token=<jwt>&tenant=<id>&expiresAt=<iso>&locale=<tag>
  *
  * We use the hash (not query) for two reasons:
  *   1. Browsers never send the fragment in HTTP requests, so the token can't
  *      leak via referrer headers or server access logs.
  *   2. SPA hash routes are already a thing — the bootstrap can scrub the
  *      hash before any router runs, without touching the path.
  *
- * Call this synchronously in main.tsx BEFORE createRoot so the token is
- * installed before AuthProvider's first render — otherwise ProtectedRoute
+ * Await this in main.tsx BEFORE createRoot so both the token and the language
+ * are installed before AuthProvider's first render — otherwise ProtectedRoute
  * would see an anonymous session, redirect to /login, and the user would
  * have to sign in even though we have a valid impersonation token.
  */
-export function installImpersonationFromHash(): void {
+export async function installImpersonationFromHash(): Promise<void> {
   if (typeof window === "undefined") return;
   const hash = window.location.hash;
   if (!hash.startsWith("#impersonate?")) return;
 
   const params = new URLSearchParams(hash.slice("#impersonate?".length));
   const token = params.get("token");
   const tenant = params.get("tenant");
+  const locale = params.get("locale");
   if (!token) {
     // Malformed handoff — strip the hash and let the normal sign-in flow
     // take over rather than getting stuck.
@@ -40,6 +42,17 @@ export function installImpersonationFromHash(): void {
   // which mints a real actor token+refresh for the admin operator's account.
   tokenStore.beginImpersonation(token, tenant);
   stripHash();
+
+  // Adopt the operator's language for the impersonation session. The server
+  // strips the target's `locale` claim on purpose, and this app is normally on a
+  // different origin than admin, so the handoff parameter is the only channel
+  // that carries the operator's choice. Applying it here also fixes the API
+  // side: apiFetch derives Accept-Language from i18n.language, so responses come
+  // back in the operator's language instead of the browser-detected one.
+  // Unsupported or absent tags are ignored, leaving normal detection in place.
+  if (locale && (SUPPORTED as readonly string[]).includes(locale) && i18n.language !== locale) {
+    await i18n.changeLanguage(locale);
+  }
 }
 
 function stripHash(): void {

clients/dashboard/src/auth/protected-route.tsx

@@ -1,7 +1,9 @@
 import { Navigate, Outlet, useLocation } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import { useAuth } from "@/auth/use-auth";
 
 export function ProtectedRoute() {
+  const { t } = useTranslation("common");
   const { isAuthenticated, isInitializing } = useAuth();
   const location = useLocation();
 
@@ -15,7 +17,7 @@ export function ProtectedRoute() {
         role="status"
         aria-busy="true"
       >
-        <span className="sr-only">Restoring your session…</span>
+        <span className="sr-only">{t("session.restoring")}</span>
         <span
           className="size-5 animate-spin rounded-full border-2 border-current border-t-transparent"
           aria-hidden

clients/dashboard/src/components/auth/auth-shell.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
 import { ShieldCheck } from "lucide-react";
 
 // ────────────────────────────────────────────────────────────────────────
@@ -42,6 +43,7 @@ export function AuthShell({
   /** Optional row beneath the card — e.g. "Back to sign in" link */
   footer?: ReactNode;
 }) {
+  const { t } = useTranslation("auth");
   return (
     <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-[var(--color-background)] px-5 py-8 sm:py-12">
       {/* Atmospheric background — three rose/saffron blur orbs at
@@ -77,7 +79,7 @@ export function AuthShell({
           </div>
           <div className="mt-3 flex items-center gap-2 text-[10px] font-semibold uppercase tracking-[0.2em] text-[oklch(from_var(--color-muted-foreground)_l_c_h_/_0.7)]">
             <span aria-hidden className="h-px w-6 bg-[var(--color-border)]" />
-            <span>.NET 10 Starter Kit</span>
+            <span>{t("shell.tagline")}</span>
             <span aria-hidden className="h-px w-6 bg-[var(--color-border)]" />
           </div>
         </div>
@@ -95,10 +97,10 @@ export function AuthShell({
 
         <div className="mt-6 flex items-center justify-center gap-1.5 text-[11px] text-[var(--color-muted-foreground)]">
           <ShieldCheck className="size-3" />
-          <span>Encrypted in transit · JWT-secured session</span>
+          <span>{t("shell.encrypted")}</span>
         </div>
         <p className="mt-4 text-center text-[10px] font-medium uppercase tracking-wider text-[oklch(from_var(--color-muted-foreground)_l_c_h_/_0.5)]">
-          fullstackhero Administration
+          {t("shell.footer")}
         </p>
       </div>
     </div>

clients/dashboard/src/components/auth/demo-accounts-dialog.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { ArrowUpRight } from "lucide-react";
 import {
   Dialog,
@@ -30,6 +31,7 @@ interface DemoAccountsDialogProps {
 }
 
 export function DemoAccountsDialog({ open, onOpenChange, onPick }: DemoAccountsDialogProps) {
+  const { t } = useTranslation("auth");
   const tenants = DEMO_ACCOUNT_GROUPS;
   const [activeIdx, setActiveIdx] = useState(0);
 
@@ -48,9 +50,9 @@ export function DemoAccountsDialog({ open, onOpenChange, onPick }: DemoAccountsD
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="overflow-hidden rounded-2xl border-border/70 p-0 sm:max-w-[680px]">
-        <DialogTitle className="sr-only">Demo accounts</DialogTitle>
+        <DialogTitle className="sr-only">{t("demo.dialogTitle")}</DialogTitle>
         <DialogDescription className="sr-only">
-          Pick a demo tenant and account to sign in with.
+          {t("demo.dialogDescription")}
         </DialogDescription>
 
         {/* Atmospheric gradients */}
@@ -71,14 +73,14 @@ export function DemoAccountsDialog({ open, onOpenChange, onPick }: DemoAccountsD
               <span className="relative inline-flex size-1.5 rounded-full bg-primary" />
             </span>
             <span className="font-mono text-[10px] font-semibold uppercase tracking-[0.22em] text-primary/85">
-              Live demo
+              {t("demo.liveDemo")}
             </span>
           </div>
           <h2 className="font-display text-[22px] font-semibold leading-[1.15] tracking-[-0.01em] text-foreground">
-            Step into any role.
+            {t("demo.title")}
           </h2>
           <p className="mt-1.5 max-w-[80%] text-[12.5px] leading-relaxed text-muted-foreground/80">
-            Explore fullstackhero as any user across the demo tenants — we'll sign you in instantly.
+            {t("demo.subtitle")}
           </p>
         </header>
 
@@ -96,9 +98,9 @@ export function DemoAccountsDialog({ open, onOpenChange, onPick }: DemoAccountsD
         {/* Footer */}
         <div className="relative flex items-center justify-between border-t border-border/60 bg-background/40 px-7 py-3">
           <p className="text-[10.5px] tracking-wide text-muted-foreground/60">
-            <span className="font-mono text-muted-foreground/80">demo only</span>
+            <span className="font-mono text-muted-foreground/80">{t("demo.demoOnly")}</span>
             <span className="mx-2 text-muted-foreground/30">·</span>
-            Resets with every reseed.
+            {t("demo.resets")}
           </p>
           <kbd className="hidden items-center gap-1 rounded border border-border/60 bg-background/60 px-1.5 py-0.5 font-mono text-[9.5px] text-muted-foreground/60 sm:inline-flex">
             esc
@@ -122,10 +124,11 @@ function TenantRail({
   activeIdx: number;
   onSelect: (idx: number) => void;
 }) {
+  const { t } = useTranslation("auth");
   return (
     <nav
       className="relative flex gap-1 overflow-x-auto p-3 sm:flex-col sm:overflow-visible"
-      aria-label="Demo tenants"
+      aria-label={t("demo.tenantsAria")}
     >
       {tenants.map((tenant, i) => {
         const isActive = i === activeIdx;
@@ -165,7 +168,7 @@ function TenantRail({
                 {tenant.tenantLabel}
               </span>
               <span className="mt-0.5 block font-mono text-[10px] uppercase tracking-wider text-muted-foreground/55">
-                {tenant.accounts.length} users
+                {t("demo.userCount", { count: tenant.accounts.length })}
               </span>
             </span>
           </button>
@@ -184,15 +187,16 @@ function UserPane({
   tenant: DemoTenant;
   onPick: (account: DemoAccount) => void;
 }) {
+  const { t } = useTranslation("auth");
   return (
     <div className="fsh-enter max-h-[340px] overflow-y-auto p-3">
       <div className="mb-1 flex items-baseline gap-2 px-2 pb-2">
         <span className="font-mono text-[9.5px] font-semibold uppercase tabular-nums tracking-[0.18em] text-primary/55">
-          Users
+          {t("demo.users")}
         </span>
         <div className="relative top-[-2px] h-px flex-1 bg-border/70" />
         <span className="font-mono text-[9.5px] uppercase tracking-[0.15em] text-muted-foreground/50">
-          tap to sign in
+          {t("demo.tapToSignIn")}
         </span>
       </div>
       <div className="space-y-0.5">