diff --git a/.agents/rules/frontend/shared.md b/.agents/rules/frontend/shared.md index 9974e44e35..6ebd4fc94a 100644 --- a/.agents/rules/frontend/shared.md +++ b/.agents/rules/frontend/shared.md @@ -72,6 +72,17 @@ So "neutrals must be chroma 0" is a **dashboard** rule. Admin neutrals are inten `src/realtime/realtime-context.tsx`: one `HubConnection` to `/api/v1/realtime/hub`. `@microsoft/signalr` is **dynamically imported** (lazy ~37KB) only when an authed session opens the hub. Auth via `accessTokenFactory`; a `tokenEpoch` (bumped by `tokenStore.subscribe`) forces reconnect on login/refresh/impersonation. Consume with `useRealtimeEvent("EventName", handler, deps)` (handler kept in a ref). Pre-register new event names in the provider's event list. +## Translations (i18next) + +Every string a user reads goes through `t()`; English and Portuguese ship today. The backend negotiates its own messages from the `Accept-Language` that `apiFetch` sends, so ProblemDetails text is shown as-is (`.agents/rules/localization.md`). + +- **One namespace per area**: `src/locales/en-US/{ns}.json`, registered with one line in the catalog map in `src/i18n.ts` (`CATALOGS` in admin, `catalogs` in dashboard). `src/locales/pt-BR/{ns}.json` is optional: `src/locales/pt-BR.ts` picks every file up into one lazy chunk, and a missing key renders in English. +- **Keys are flat and dotted** inside the file (`"header.title"`, `"create.validation.url"`). Interpolate with `{{name}}`; counts use `_one` / `_other` plus `{{count, number}}` and are called with `{ count }`. +- **In a component**: `const { t } = useTranslation("ns")`. Another namespace through the list form, `useTranslation(["activity", "audits"])` with `t("audits:…")`, or through a second translator when a helper requires one bound to it (`const { t: tCommon } = useTranslation("common")` for `describeUploadError`). Never prefix a key with the namespace the translator is already bound to. +- **Keys are typed.** `src/i18next.d.ts` types every key against the en-US catalogs, so add the key to the JSON first: a key the namespace lacks fails `tsc -b`. A helper that receives the translator takes `TFunction<"ns">`; a key stored in data (nav items, tabs, enum labels) is `ParseKeys<"ns">`, and an enum label goes through a map typed against the enum (`satisfies Record>`) rather than a template key, so a new member without a label stops compiling. Billing and impersonation statuses have their maps in `src/lib/status-keys.ts`, read through `statusKey()`, which returns `undefined` for a status added after the build so the caller can show the raw value; `tests/i18n/status-keys.spec.ts` checks every member of the backend enum against those maps and both catalogs. A template key still compiles when the call passes `defaultValue`, but its key is not checked; a few remain. +- **The lint blocks untranslated JSX text** (`i18next/no-literal-string`, `jsx-text-only`, in `src/pages` and `src/components`). Text inside ``/``, glyph-only runs, the product name and the build tag are allowed by pattern in `eslint.config.js`; anything else is moved to a catalog, never silenced with `eslint-disable`. It does not see attribute values (`aria-label`, `placeholder`, `title`), strings outside JSX (`toast.success("…")`, zod messages), or JSX outside those two folders, so those stay a review item. +- **Tests:** `tests/i18n/parity.spec.ts` fails on a pt-BR key en-US lacks or on different `{{variables}}` between the two; a pt-BR key may be missing. + ## Testing (Playwright, route-mocked) - `playwright.config.ts`: `testDir: ./tests`, chromium, auto-boots `npm run dev`, no real backend. @@ -83,7 +94,7 @@ So "neutrals must be chroma 0" is a **dashboard** rule. Admin neutrals are inten ## Add a page/feature (shared steps) 1. API: extend `src/api/{feature}.ts` — hand-written types + `apiFetch` calls. -2. Page: `src/pages/{area}/{name}.tsx`, **named** export. `useQuery` with hierarchical key; `useMutation` invalidating in `onSuccess`, passing per-call data via `mutate(arg)`. +2. Page: `src/pages/{area}/{name}.tsx`, **named** export. `useQuery` with hierarchical key; `useMutation` invalidating in `onSuccess`, passing per-call data via `mutate(arg)`. Text through `t()` from the area's namespace, with the keys added to `src/locales/en-US/{ns}.json` (see Translations). 3. Route: add `const X = lazyNamed(() => import("@/pages/area/name"), "XPage")` and a child route under `AppShell`. 4. Test: `tests/{area}/{name}.spec.ts` with seed + shell mocks + page mocks. diff --git a/.agents/skills/add-react-page/SKILL.md b/.agents/skills/add-react-page/SKILL.md index 49d9d0d4f9..b25f2411da 100644 --- a/.agents/skills/add-react-page/SKILL.md +++ b/.agents/skills/add-react-page/SKILL.md @@ -47,10 +47,28 @@ export async function create{Resource}(input: Create{Resource}Input) { (dashboard: inline `type PagedResponse = …`, inline the path, camelCase params, mutations often return `Promise`.) -## Step 2 — Page (`src/pages/{area}/...tsx`, named export) +## Step 2 — Catalog keys (`src/locales/en-US/{ns}.json`) + +Every string the page shows is a key in its area's namespace. Add the English entries **before** using +them: keys are typed against the en-US catalogs, so `t("{resources}.title")` fails `tsc -b` until the +key exists. A new area gets a new `{ns}.json` plus one line in the catalog map in `src/i18n.ts`. +`src/locales/pt-BR/{ns}.json` is optional; a missing key renders in English. + +```json +{ + "{resources}.title": "{Resources}", + "{resources}.count_one": "{{count, number}} {resource}", + "{resources}.count_other": "{{count, number}} {resources}", + "{resources}.created": "{Resource} created.", + "{resources}.createFailed": "Could not create the {resource}." +} +``` + +## Step 3 — Page (`src/pages/{area}/...tsx`, named export) ```tsx export function {Resource}ListPage() { + const { t } = useTranslation("{ns}"); const [search, setSearch] = useState(""); // debounce → reset page to 1 on change const [pageNumber, setPage] = useState(1); const query = useQuery({ @@ -58,11 +76,12 @@ export function {Resource}ListPage() { queryFn: () => search{Resources}({ pageNumber, search: search || undefined }), placeholderData: keepPreviousData, }); - // render with components/ui/* + components/list/* (admin: PageHeader/Field…; dashboard: Entity* family) + // render with components/ui/* + components/list/* (admin: PageHeader/Field…; dashboard: Entity* family), + // every visible string through t():

{t("{resources}.title")}

} ``` -## Step 3 — Mutation (race-safe `mutate(arg)`) +## Step 4 — Mutation (race-safe `mutate(arg)`) Pass per-call data through `mutate(arg)`; read it from the callback `variables` — never from a closed-over render variable. @@ -70,8 +89,9 @@ Pass per-call data through `mutate(arg)`; read it from the callback `variables` const qc = useQueryClient(); const createMut = useMutation({ mutationFn: (input: Create{Resource}Input) => create{Resource}(input), - onSuccess: () => { toast.success("Created"); qc.invalidateQueries({ queryKey: ["{resources}"] }); }, - onError: (e) => toast.error(e instanceof ApiRequestError ? e.message : "Failed"), + onSuccess: () => { toast.success(t("{resources}.created")); qc.invalidateQueries({ queryKey: ["{resources}"] }); }, + // ProblemDetails text is already in the user's language: apiFetch sends Accept-Language. + onError: (e) => toast.error(e instanceof ApiRequestError ? e.message : t("{resources}.createFailed")), }); // admin: const form = useForm({ resolver: zodResolver(schema) }); form.handleSubmit(v => createMut.mutate(v)) // dashboard: controlled useState fields; onSubmit(e){ e.preventDefault(); createMut.mutate(payload); } @@ -79,7 +99,7 @@ const createMut = useMutation({ If you need to track the in-flight item (e.g. a per-row busy state), use `onMutate: (arg) => setBusyId(arg)` reading the `mutate(arg)` value (pattern: `admin/src/pages/settings/sessions.tsx`). -## Step 4 — Register the route (`routes.tsx`) +## Step 5 — Register the route (`routes.tsx`) ```tsx const {Resource}ListPage = lazyNamed(() => import("@/pages/{area}/list"), "{Resource}ListPage"); @@ -89,11 +109,11 @@ const {Resource}ListPage = lazyNamed(() => import("@/pages/{area}/list"), "{Reso { path: "{area}/{resources}", element: withSuspense(<{Resource}ListPage />) }, ``` -## Step 5 — (admin only) mirror the permission +## Step 6 — (admin only) mirror the permission Add the constant to `src/lib/permissions.ts` (`{Module}Permissions.{Resources}.View` = `"Permissions.{Resources}.View"`), and a `PERMISSION_CATALOG` entry if it belongs in the Role editor. See `add-permission`. -## Step 6 — Playwright test (`tests/{area}/{resource}.spec.ts`) +## Step 7 — Playwright test (`tests/{area}/{resource}.spec.ts`) ```ts test.beforeEach(async ({ page }) => { @@ -105,17 +125,22 @@ test.beforeEach(async ({ page }) => { Use `mockProblemDetails(...)` for error states. Dashboard: scope row assertions with `.last()` / dialog scoping (lists render mobile + desktop copies → strict-mode double match). -## Step 7 — Verify +## Step 8 — Verify ```bash -cd clients/{app} && npm run lint && npm run test:e2e +cd clients/{app} && npm run lint && npm run build && npm run test:e2e ``` +`lint` fails on untranslated JSX text in `src/pages` / `src/components`; `build` (`tsc -b`) fails on a key its +namespace lacks. Neither sees a literal in `aria-label`, `placeholder`, `title` or a `toast("…")`: check those by +hand (`.agents/rules/frontend/shared.md`, Translations). + ## Checklist - [ ] API module: hand-written types, `apiFetch`, correct param casing per app (Pascal=admin, camel=dashboard) +- [ ] English keys in `src/locales/en-US/{ns}.json` (pt-BR optional); every visible string, toast and `aria-label` through `t()` - [ ] Page is a **named export**; `useQuery` key hierarchical + `placeholderData: keepPreviousData` - [ ] Mutation passes data via `mutate(arg)`, invalidates in `onSuccess` - [ ] Route via `lazyNamed`; admin wraps in ``, dashboard in `withSuspense` - [ ] (admin) permission mirrored in `lib/permissions.ts` -- [ ] Playwright test: seed + shell mocks + page mocks; `lint` + `test:e2e` green +- [ ] Playwright test: seed + shell mocks + page mocks; `lint` + `build` + `test:e2e` green diff --git a/AGENTS.md b/AGENTS.md index c76d8a5724..930276719d 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -136,7 +136,7 @@ records for DTOs/events/value objects · `default!` for required non-nullable st - **Feature** — Contracts command/query → handler → validator → endpoint → wire in module `MapEndpoints()` → tests. Details: `api-conventions.md`. - **Module** — new `Modules.{Name}` + `.Contracts`, implement `IModule` w/ assembly-level `[assembly: FshModule(typeof(XModule), order)]`, register in **all four places**, add migration folder + tests. Details: `architecture.md`. -- **React page** — API module (`src/api/`) → page → register lazy route → (admin) mirror permission + RouteGuard → Playwright test. Details: `frontend/shared.md`. +- **React page** — API module (`src/api/`) → English keys in `src/locales/en-US/{ns}.json` → page (`t()`) → register lazy route → (admin) mirror permission + RouteGuard → Playwright test. Details: `frontend/shared.md`. ## AI tooling resources diff --git a/clients/admin/docker/config.json.template b/clients/admin/docker/config.json.template index e3d5dc73d3..b6a6d3084d 100644 --- a/clients/admin/docker/config.json.template +++ b/clients/admin/docker/config.json.template @@ -1,5 +1,6 @@ { "apiBase": "${FSH_API_URL}", "defaultTenant": "${FSH_DEFAULT_TENANT}", - "dashboardUrl": "${FSH_DASHBOARD_URL}" + "dashboardUrl": "${FSH_DASHBOARD_URL}", + "defaultLanguage": "${FSH_DEFAULT_LANGUAGE}" } diff --git a/clients/admin/docker/docker-entrypoint.sh b/clients/admin/docker/docker-entrypoint.sh index 8e6bce4f3a..1d42317dbd 100644 --- a/clients/admin/docker/docker-entrypoint.sh +++ b/clients/admin/docker/docker-entrypoint.sh @@ -5,10 +5,12 @@ set -e : "${FSH_API_URL:?FSH_API_URL is required (e.g. https://api.example.com)}" : "${FSH_DASHBOARD_URL:?FSH_DASHBOARD_URL is required (e.g. https://app.example.com)}" -# Defaults for non-required values. +# Defaults for non-required values. The language default matches the one the bundle falls back to, +# so an unset variable and an absent config.json land on the same UI language. : "${FSH_DEFAULT_TENANT:=root}" +: "${FSH_DEFAULT_LANGUAGE:=en-US}" -export FSH_API_URL FSH_DASHBOARD_URL FSH_DEFAULT_TENANT +export FSH_API_URL FSH_DASHBOARD_URL FSH_DEFAULT_TENANT FSH_DEFAULT_LANGUAGE # Render the runtime config into nginx's web root on every start. The template # lives outside the web root, so it is never served and survives a restart. diff --git a/clients/admin/eslint.config.js b/clients/admin/eslint.config.js index 083fdcba77..9a2c928375 100644 --- a/clients/admin/eslint.config.js +++ b/clients/admin/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( @@ -31,4 +35,31 @@ export default tseslint.config( 'jsx-a11y/label-has-associated-control': ['error', { depth: 3 }], }, }, + { + // 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+)*( · admin)?$/, + ], + }, + }, + ], + }, + }, ); diff --git a/clients/admin/package-lock.json b/clients/admin/package-lock.json index 0ea88ccd42..53f9f86059 100644 --- a/clients/admin/package-lock.json +++ b/clients/admin/package-lock.json @@ -18,11 +18,14 @@ "@types/qrcode": "^1.5.6", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", + "i18next": "^26.3.6", + "i18next-browser-languagedetector": "^8.2.1", "lucide-react": "^0.475.0", "qrcode": "^1.5.4", "react": "^19.0.0", "react-dom": "^19.0.0", "react-hook-form": "^7.54.2", + "react-i18next": "^17.0.10", "react-router-dom": "^7.18.4", "sonner": "^2.0.7", "tailwind-merge": "^3.0.1", @@ -37,6 +40,7 @@ "@vitejs/plugin-react": "^4.3.4", "autoprefixer": "^10.4.20", "eslint": "^9.19.0", + "eslint-plugin-i18next": "^6.1.5", "eslint-plugin-jsx-a11y": "^6.10.2", "eslint-plugin-react-hooks": "^5.1.0", "eslint-plugin-react-refresh": "^0.4.18", @@ -284,6 +288,15 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/runtime": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz", + "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/template": { "version": "7.29.7", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz", @@ -3913,6 +3926,19 @@ } } }, + "node_modules/eslint-plugin-i18next": { + "version": "6.1.5", + "resolved": "https://registry.npmjs.org/eslint-plugin-i18next/-/eslint-plugin-i18next-6.1.5.tgz", + "integrity": "sha512-xCTfstbK9ZpQ6UFT5S1s6zbZMhKn2o2jRSQYiU2UkV7wt8y1m3WjkUYGkGlipgRdFInYI9+LAqE+JQU/L73HmA==", + "dev": true, + "license": "ISC", + "dependencies": { + "requireindex": "~1.1.0" + }, + "engines": { + "node": ">=18.10.0" + } + }, "node_modules/eslint-plugin-jsx-a11y": { "version": "6.10.2", "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz", @@ -4523,6 +4549,52 @@ "node": ">= 0.4" } }, + "node_modules/html-parse-stringify": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz", + "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==", + "license": "MIT", + "dependencies": { + "void-elements": "3.1.0" + } + }, + "node_modules/i18next": { + "version": "26.3.6", + "resolved": "https://registry.npmjs.org/i18next/-/i18next-26.3.6.tgz", + "integrity": "sha512-Bu5Z2nAXgfVyM8xvW3jk9EKRIuX37PudsrBViThNFx7CR7aaYTpP01cxNB/E4c4UUzTDiAZRstEhsRfPOL/8xA==", + "funding": [ + { + "type": "individual", + "url": "https://www.locize.com/i18next" + }, + { + "type": "individual", + "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project" + }, + { + "type": "individual", + "url": "https://www.locize.com" + } + ], + "license": "MIT", + "peerDependencies": { + "typescript": "^5 || ^6 || ^7" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/i18next-browser-languagedetector": { + "version": "8.2.1", + "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.1.tgz", + "integrity": "sha512-bZg8+4bdmaOiApD7N7BPT9W8MLZG+nPTOFlLiJiT8uzKXFjhxw4v2ierCXOwB5sFDMtuA5G4kgYZ0AznZxQ/cw==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.23.2" + } + }, "node_modules/ignore": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", @@ -5914,6 +5986,33 @@ "react": "^16.8.0 || ^17 || ^18 || ^19" } }, + "node_modules/react-i18next": { + "version": "17.0.10", + "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-17.0.10.tgz", + "integrity": "sha512-XneHftyYA774MJkkccSkZ5oKrUpCnXIPmxio3wemqrVzCRLWiGXOMbIzObrer03fNDEnm8g8R5yYls4HcE+esg==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.29.2", + "html-parse-stringify": "^3.0.1", + "use-sync-external-store": "^1.6.0" + }, + "peerDependencies": { + "i18next": ">= 26.2.0", + "react": ">= 16.8.0", + "typescript": "^5 || ^6 || ^7" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + }, + "typescript": { + "optional": true + } + } + }, "node_modules/react-refresh": { "version": "0.17.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz", @@ -6090,6 +6189,16 @@ "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==", "license": "ISC" }, + "node_modules/requireindex": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.1.0.tgz", + "integrity": "sha512-LBnkqsDE7BZKvqylbmn7lTIVdpx4K/QCduRATpO5R+wtPmky/a8pN1bO2D6wXppn1497AJF9mNjqAXr6bdl9jg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.5" + } + }, "node_modules/requires-port": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", @@ -6725,7 +6834,7 @@ "version": "5.9.3", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", - "dev": true, + "devOptional": true, "license": "Apache-2.0", "bin": { "tsc": "bin/tsc", @@ -6887,6 +6996,15 @@ } } }, + "node_modules/use-sync-external-store": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz", + "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==", + "license": "MIT", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/vite": { "version": "7.3.5", "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.5.tgz", @@ -6962,6 +7080,15 @@ } } }, + "node_modules/void-elements": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz", + "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/webidl-conversions": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", diff --git a/clients/admin/package.json b/clients/admin/package.json index af28898016..9e6c68e3b8 100644 --- a/clients/admin/package.json +++ b/clients/admin/package.json @@ -22,11 +22,14 @@ "@types/qrcode": "^1.5.6", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", + "i18next": "^26.3.6", + "i18next-browser-languagedetector": "^8.2.1", "lucide-react": "^0.475.0", "qrcode": "^1.5.4", "react": "^19.0.0", "react-dom": "^19.0.0", "react-hook-form": "^7.54.2", + "react-i18next": "^17.0.10", "react-router-dom": "^7.18.4", "sonner": "^2.0.7", "tailwind-merge": "^3.0.1", @@ -41,6 +44,7 @@ "@vitejs/plugin-react": "^4.3.4", "autoprefixer": "^10.4.20", "eslint": "^9.19.0", + "eslint-plugin-i18next": "^6.1.5", "eslint-plugin-jsx-a11y": "^6.10.2", "eslint-plugin-react-hooks": "^5.1.0", "eslint-plugin-react-refresh": "^0.4.18", diff --git a/clients/admin/playwright.config.ts b/clients/admin/playwright.config.ts index 31ecc38abc..4e4cee173b 100644 --- a/clients/admin/playwright.config.ts +++ b/clients/admin/playwright.config.ts @@ -18,6 +18,11 @@ export default defineConfig({ actionTimeout: 10_000, 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 the first paint of a lazy route lands past 5s while + // staying well inside the action and navigation budgets. + expect: { timeout: 10_000 }, projects: [{ name: "chromium", use: { ...devices["Desktop Chrome"] } }], webServer: { command: "npm run dev", diff --git a/clients/admin/public/config.json b/clients/admin/public/config.json index 015dc0c1a2..c760e9d765 100644 --- a/clients/admin/public/config.json +++ b/clients/admin/public/config.json @@ -3,5 +3,6 @@ "defaultTenant": "root", "dashboardUrl": "http://localhost:5174", "inactivityIdleMs": 600000, - "inactivityWarningMs": 60000 + "inactivityWarningMs": 60000, + "defaultLanguage": "en-US" } diff --git a/clients/admin/src/App.tsx b/clients/admin/src/App.tsx index f8b80fc335..bb6f4f875c 100644 --- a/clients/admin/src/App.tsx +++ b/clients/admin/src/App.tsx @@ -2,6 +2,7 @@ import { Suspense } from "react"; import { RouterProvider } from "react-router-dom"; import { QueryClientProvider } from "@tanstack/react-query"; import { Toaster } from "sonner"; +import { useTranslation } from "react-i18next"; import { AlertCircle, AlertTriangle, CheckCircle2, Info, Loader2 } from "lucide-react"; import { queryClient } from "@/lib/query-client"; import { AuthProvider } from "@/auth/auth-context"; @@ -10,6 +11,7 @@ import { ThemeProvider, useTheme } from "@/components/theme/theme-provider"; import { router } from "@/routes"; export function App() { + const { t } = useTranslation("common"); return ( @@ -22,7 +24,7 @@ export function App() { fallback={
} diff --git a/clients/admin/src/api/billing.ts b/clients/admin/src/api/billing.ts index 2a0941fd77..a99a8ab583 100644 --- a/clients/admin/src/api/billing.ts +++ b/clients/admin/src/api/billing.ts @@ -1,5 +1,7 @@ +import type { ParseKeys } from "i18next"; import { apiFetch, ApiRequestError } from "@/lib/api-client"; import type { PagedResponse } from "@/lib/api-types"; +import { INVOICE_STATUS_KEYS, statusKey } from "@/lib/status-keys"; import { env } from "@/env"; import { tokenStore } from "@/auth/token-store"; @@ -7,6 +9,11 @@ import { tokenStore } from "@/auth/token-store"; export type InvoiceStatus = "Draft" | "Issued" | "Paid" | "Void" | (string & {}); +/** The `billing` catalog key for a status, or undefined for one the server added after this build. */ +export function invoiceStatusKey(status: InvoiceStatus): ParseKeys<"billing"> | undefined { + return statusKey(INVOICE_STATUS_KEYS, status); +} + export type SubscriptionStatus = "Active" | "Suspended" | "Cancelled" | (string & {}); export type InvoiceLineItemKind = "BaseFee" | "Overage" | "Adjustment" | (string & {}); diff --git a/clients/admin/src/api/users.ts b/clients/admin/src/api/users.ts index e082822225..fefb6a750c 100644 --- a/clients/admin/src/api/users.ts +++ b/clients/admin/src/api/users.ts @@ -12,6 +12,8 @@ export type UserDto = { phoneNumber?: string | null; imageUrl?: string | null; twoFactorEnabled?: boolean; + /** Persisted BCP 47 UI language tag (e.g. "pt-BR"); null when the user never chose. */ + locale?: string | null; }; export type UserRoleDto = { @@ -76,6 +78,39 @@ export async function setProfileImage(imageUrl: string | null): Promise { }); } +export type UpdateMyProfileInput = { + 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; +}; + +/** + * Self-update of the authenticated user's profile (PUT /identity/profile, + * server forces the id to the caller). The backend sets FirstName/LastName + * unconditionally from the command, so a partial update (e.g. the language + * switcher sending only `locale`) would wipe the others. Reads the current + * profile from the server first and merges, so any field the caller omits + * keeps its persisted value instead of being nulled — never trust a possibly + * stale/undefined client-side snapshot for the echoed fields. + */ +export async function updateMyProfile(input: UpdateMyProfileInput): Promise { + const profile = await getMyProfile(); + await apiFetch(`${IDENTITY}/profile`, { + method: "PUT", + body: JSON.stringify({ + id: profile.id, + 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, + }), + }); +} + export async function changePassword(input: { password: string; newPassword: string; diff --git a/clients/admin/src/api/wallet.ts b/clients/admin/src/api/wallet.ts index c2e46a4d38..f575135d7e 100644 --- a/clients/admin/src/api/wallet.ts +++ b/clients/admin/src/api/wallet.ts @@ -3,11 +3,14 @@ import type { PagedResponse } from "@/lib/api-types"; // ─── shared enums ──────────────────────────────────────────────────── +// Mirrors TopupRequestStatus in Modules.Billing.Contracts/BillingEnums.cs. "Approved" was never +// one of them: approving a request moves it to Invoiced. export type TopupRequestStatus = | "Pending" - | "Approved" - | "Rejected" + | "Invoiced" | "Completed" + | "Rejected" + | "Cancelled" | (string & {}); // ─── top-up requests ───────────────────────────────────────────────── diff --git a/clients/admin/src/auth/protected-route.tsx b/clients/admin/src/auth/protected-route.tsx index 1ebe746496..2cf962b78e 100644 --- a/clients/admin/src/auth/protected-route.tsx +++ b/clients/admin/src/auth/protected-route.tsx @@ -1,4 +1,5 @@ import { Navigate, Outlet, useLocation } from "react-router-dom"; +import { useTranslation } from "react-i18next"; import { useAuth } from "@/auth/use-auth"; import { ForbiddenView } from "@/components/forbidden-view"; @@ -14,6 +15,7 @@ type ProtectedRouteProps = { export function ProtectedRoute({ permissions = [] }: ProtectedRouteProps) { const { isAuthenticated, isInitializing, user } = useAuth(); const location = useLocation(); + const { t } = useTranslation("common"); // Resolving a stored session (silent token refresh) — hold rendering so we // neither flash a protected surface with a stale/expired token nor bounce to @@ -25,7 +27,7 @@ export function ProtectedRoute({ permissions = [] }: ProtectedRouteProps) { role="status" aria-busy="true" > - Restoring your session… + {t("protectedRoute.restoring")} - Resolving permissions + {t("routeGuard.resolving")}
); diff --git a/clients/admin/src/components/auth/auth-shell.tsx b/clients/admin/src/components/auth/auth-shell.tsx index 68981ec30c..9ae418c27e 100644 --- a/clients/admin/src/components/auth/auth-shell.tsx +++ b/clients/admin/src/components/auth/auth-shell.tsx @@ -1,4 +1,5 @@ import type { ReactNode } from "react"; +import { useTranslation } from "react-i18next"; import { BrandMarkXL } from "@/components/brand-mark"; import { cn } from "@/lib/cn"; @@ -44,6 +45,7 @@ export function AuthShell({ /** Form area below the blurb. */ children: ReactNode; }) { + const { t } = useTranslation("common"); return (
{/* ─── Left pane — brand stage ───────────────────────────────── */} @@ -60,22 +62,22 @@ export function AuthShell({
- // FSH / CONSOLE / RECOVER + {t("authShell.breadcrumb")}
-
authorized personnel
+
{t("authShell.authorizedPersonnel")}
- Account recovery is rate-limited and audited. + {t("authShell.recoveryNotice")}
- Reset links expire 30 minutes after issue. + {t("authShell.recoveryExpiry")}
v0.1
- build · live + {t("authShell.buildStatus")}
diff --git a/clients/admin/src/components/auth/demo-accounts-dialog.tsx b/clients/admin/src/components/auth/demo-accounts-dialog.tsx index e0f8b25c84..fe16a086ee 100644 --- a/clients/admin/src/components/auth/demo-accounts-dialog.tsx +++ b/clients/admin/src/components/auth/demo-accounts-dialog.tsx @@ -1,4 +1,5 @@ import { useEffect } from "react"; +import { useTranslation } from "react-i18next"; import { ArrowUpRight, ShieldCheck } from "lucide-react"; import { Dialog, @@ -26,6 +27,7 @@ interface DemoAccountsDialogProps { } export function DemoAccountsDialog({ open, onOpenChange, onPick }: DemoAccountsDialogProps) { + const { t } = useTranslation("auth"); // Nothing to reset on re-open (single account list, no tenant rail). useEffect(() => {}, [open]); @@ -37,9 +39,9 @@ export function DemoAccountsDialog({ open, onOpenChange, onPick }: DemoAccountsD return ( - Demo accounts + {t("demo.dialogTitle")} - Pick a demo account to sign in to the admin console. + {t("demo.dialogDescription")} {/* Atmospheric gradient wash */} @@ -60,14 +62,14 @@ export function DemoAccountsDialog({ open, onOpenChange, onPick }: DemoAccountsD - Dev · demo + {t("demo.badge")}

- Sign in as operator. + {t("demo.title")}

- Tap an account below — we'll fill the credentials and sign you in instantly. + {t("demo.subtitle")}

@@ -75,11 +77,11 @@ export function DemoAccountsDialog({ open, onOpenChange, onPick }: DemoAccountsD
- Operator accounts + {t("demo.operatorAccounts")}
- tap to sign in + {t("demo.tapToSignIn")}
@@ -100,9 +102,9 @@ export function DemoAccountsDialog({ open, onOpenChange, onPick }: DemoAccountsD

- dev only + {t("demo.devOnly")} · - Not visible in production. + {t("demo.notVisibleInProduction")}

diff --git a/clients/admin/src/components/auth/inactivity-dialog.tsx b/clients/admin/src/components/auth/inactivity-dialog.tsx index fbee548cb4..cde62e8dcf 100644 --- a/clients/admin/src/components/auth/inactivity-dialog.tsx +++ b/clients/admin/src/components/auth/inactivity-dialog.tsx @@ -1,4 +1,5 @@ import * as DialogPrimitive from "@radix-ui/react-dialog"; +import { useTranslation } from "react-i18next"; import { ShieldAlert } from "lucide-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/cn"; @@ -34,6 +35,7 @@ export function InactivityDialog({ onStay: () => void; onSignOut: () => void; }) { + const { t } = useTranslation("auth"); const fraction = totalSeconds > 0 ? Math.max(0, Math.min(1, secondsLeft / totalSeconds)) : 0; const dashOffset = RING_CIRCUMFERENCE * (1 - fraction); @@ -96,7 +98,7 @@ export function InactivityDialog({ {Math.max(0, secondsLeft)} - seconds + {t("inactivity.seconds")}
@@ -105,23 +107,22 @@ export function InactivityDialog({
- Still there? + {t("inactivity.title")}
- You've been inactive for a while. We'll sign you out shortly to keep your - account secure. + {t("inactivity.description")}
diff --git a/clients/admin/src/components/billing/plan-form-dialog.tsx b/clients/admin/src/components/billing/plan-form-dialog.tsx index 08c603731c..286a806268 100644 --- a/clients/admin/src/components/billing/plan-form-dialog.tsx +++ b/clients/admin/src/components/billing/plan-form-dialog.tsx @@ -1,4 +1,6 @@ import { useEffect, useMemo, useState, type FormEvent } from "react"; +import { useTranslation } from "react-i18next"; +import type { ParseKeys } from "i18next"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import { z } from "zod"; import { CreditCard, Gauge } from "lucide-react"; @@ -28,14 +30,17 @@ const PLAN_KEY_PATTERN = /^[a-z0-9][a-z0-9-]{0,62}[a-z0-9]$/; // A money/rate field is a free-text decimal string. These refinements run // client-side so a negative price is rejected before any network call (the -// server also rejects it, but we don't rely on that). -const NON_NEGATIVE_MSG = "Must be a non-negative number."; +// server also rejects it, but we don't rely on that). Messages are i18n keys, +// resolved to text at display time via t(). +const NON_NEGATIVE_MSG = "planForm.validation.nonNegative" satisfies ParseKeys<"billing">; +const REQUIRED_MSG = "planForm.validation.required" satisfies ParseKeys<"billing">; +type ValidationMessage = typeof NON_NEGATIVE_MSG | typeof REQUIRED_MSG; /** Required non-negative decimal (e.g. monthly base price). */ const requiredNonNegative = z .string() .trim() - .min(1, "Required.") + .min(1, REQUIRED_MSG) .refine((v) => Number.isFinite(Number(v)) && Number(v) >= 0, NON_NEGATIVE_MSG); /** Optional non-negative decimal (blank allowed → omitted). */ @@ -44,16 +49,11 @@ const optionalNonNegative = z .trim() .refine((v) => v === "" || (Number.isFinite(Number(v)) && Number(v) >= 0), NON_NEGATIVE_MSG); -const INTERVAL_OPTIONS: SelectOption[] = [ - { value: "Monthly", label: "Monthly", hint: "billed every month" }, - { value: "Yearly", label: "Yearly", hint: "billed every 12 months" }, -]; - -const OVERAGE_RESOURCES: { key: QuotaResource; label: string; placeholder: string }[] = [ - { key: "ApiCalls", label: "API calls", placeholder: "0.0010" }, - { key: "StorageBytes", label: "Storage bytes", placeholder: "0.00000001" }, - { key: "Users", label: "Users", placeholder: "5.00" }, - { key: "ActiveFeatureFlags", label: "Feature flags", placeholder: "1.00" }, +const OVERAGE_RESOURCES: { key: QuotaResource; labelKey: ParseKeys<"billing">; placeholder: string }[] = [ + { key: "ApiCalls", labelKey: "planForm.overage.apiCalls", placeholder: "0.0010" }, + { key: "StorageBytes", labelKey: "planForm.overage.storageBytes", placeholder: "0.00000001" }, + { key: "Users", labelKey: "planForm.overage.users", placeholder: "5.00" }, + { key: "ActiveFeatureFlags", labelKey: "planForm.overage.featureFlags", placeholder: "1.00" }, ]; type OverageState = Record; @@ -75,9 +75,10 @@ function toOverageNumbers(state: OverageState): Record | null { } /** First validation message for a value against a schema, or undefined when valid. */ -function fieldError(schema: z.ZodTypeAny, value: string): string | undefined { +// zod types a message as string; every schema here sets one of the two keys above. +function fieldError(schema: z.ZodTypeAny, value: string): ValidationMessage | undefined { const result = schema.safeParse(value); - return result.success ? undefined : result.error.issues[0]?.message; + return result.success ? undefined : (result.error.issues[0]?.message as ValidationMessage | undefined); } function describe(err: unknown, fallback: string): string { @@ -124,9 +125,15 @@ export function PlanFormDialog({ onOpenChange: (open: boolean) => void; plan?: BillingPlanDto; }) { + const { t } = useTranslation("billing"); const queryClient = useQueryClient(); const isEdit = !!plan; + const INTERVAL_OPTIONS: SelectOption[] = [ + { value: "Monthly", label: t("planForm.interval.monthly"), hint: t("planForm.interval.monthlyHint") }, + { value: "Yearly", label: t("planForm.interval.yearly"), hint: t("planForm.interval.yearlyHint") }, + ]; + const [key, setKey] = useState(""); const [name, setName] = useState(""); const [currency, setCurrency] = useState("USD"); @@ -163,7 +170,7 @@ export function PlanFormDialog({ // Per-resource overage validation — a negative or non-numeric rate blocks submit. const overageErrors = useMemo(() => { - const out: Partial> = {}; + const out: Partial> = {}; for (const { key: resKey } of OVERAGE_RESOURCES) { const err = fieldError(optionalNonNegative, overage[resKey] ?? ""); if (err) out[resKey] = err; @@ -180,21 +187,21 @@ export function PlanFormDialog({ const createMutation = useMutation({ mutationFn: createPlan, onSuccess: () => { - toast.success(`Plan "${name}" created`); + toast.success(t("planForm.toast.created", { name })); queryClient.invalidateQueries({ queryKey: ["billing", "plans"] }); onClose(); }, - onError: (err) => toast.error("Create failed", { description: describe(err, "Could not create plan.") }), + onError: (err) => toast.error(t("planForm.toast.createFailed"), { description: describe(err, t("planForm.toast.createFailedDesc")) }), }); const updateMutation = useMutation({ mutationFn: updatePlan, onSuccess: () => { - toast.success(`Plan "${name}" updated`); + toast.success(t("planForm.toast.updated", { name })); queryClient.invalidateQueries({ queryKey: ["billing", "plans"] }); onClose(); }, - onError: (err) => toast.error("Update failed", { description: describe(err, "Could not update plan.") }), + onError: (err) => toast.error(t("planForm.toast.updateFailed"), { description: describe(err, t("planForm.toast.updateFailedDesc")) }), }); const pending = createMutation.isPending || updateMutation.isPending; @@ -240,12 +247,10 @@ export function PlanFormDialog({ > - {isEdit ? "Edit plan" : "New plan"} + {isEdit ? t("planForm.editTitle") : t("planForm.newTitle")} - {isEdit - ? "Update name, pricing, interval, or overage rates. Key and currency are immutable." - : "Plan keys are canonical slugs used by tenant subscriptions and quota configuration."} + {isEdit ? t("planForm.editDescription") : t("planForm.newDescription")} @@ -255,17 +260,17 @@ export function PlanFormDialog({
- + setName(e.target.value)} placeholder="Pro" /> - + - + id="pf-interval" value={interval} @@ -317,9 +322,9 @@ export function PlanFormDialog({ {interval === "Yearly" && (
@@ -346,8 +351,8 @@ export function PlanFormDialog({ diff --git a/clients/admin/src/components/brand-mark.tsx b/clients/admin/src/components/brand-mark.tsx index 5883828c0e..b1828f3d00 100644 --- a/clients/admin/src/components/brand-mark.tsx +++ b/clients/admin/src/components/brand-mark.tsx @@ -1,3 +1,4 @@ +import { useTranslation } from "react-i18next"; import { cn } from "@/lib/cn"; /** @@ -12,6 +13,7 @@ import { cn } from "@/lib/cn"; * Colour-identity is now driven purely by the shared `--color-primary` token. */ export function BrandMark({ className }: { className?: string }) { + const { t } = useTranslation("common"); return (
hero - Admin + {t("brandMark.appName")}
@@ -41,6 +43,7 @@ export function BrandMark({ className }: { className?: string }) { * system blurb. */ export function BrandMarkXL({ className }: { className?: string }) { + const { t } = useTranslation("common"); return (
@@ -53,15 +56,14 @@ export function BrandMarkXL({ className }: { className?: string }) { fullstackhero - · platform admin + · {t("brandMark.platformAdmin")}

- Admin. + {t("brandMark.appName")}.

- Operate every tenant on this instance — identity, multitenancy, billing, - and the rest of the system surface, from one place. + {t("brandMark.tagline")}

); diff --git a/clients/admin/src/components/file/image-input.tsx b/clients/admin/src/components/file/image-input.tsx index 33f0f58023..e61dded071 100644 --- a/clients/admin/src/components/file/image-input.tsx +++ b/clients/admin/src/components/file/image-input.tsx @@ -2,12 +2,12 @@ import { useState } from "react"; import { useMutation } from "@tanstack/react-query"; import { Image as ImageIcon, Loader2, Upload, X, Link as LinkIcon } from "lucide-react"; import { toast } from "sonner"; +import { useTranslation } from "react-i18next"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { cn } from "@/lib/cn"; -import { useFileUpload, formatBytes } from "@/hooks/use-file-upload"; +import { useFileUpload, formatBytes, describeUploadError } from "@/hooks/use-file-upload"; import { getFileMetadata, Visibility } from "@/api/files"; -import { ApiRequestError } from "@/lib/api-client"; type Props = { /** Current image URL (or empty). The component is fully controlled. */ @@ -45,6 +45,7 @@ export function ImageInput({ shape = "square", className, }: Props) { + const { t } = useTranslation("common"); const [mode, setMode] = useState<"upload" | "url">("upload"); const { upload, progress, isUploading, reset } = useFileUpload({ ownerType, @@ -77,17 +78,13 @@ export function ImageInput({ const asset = await upload(file); const url = await resolveUrl.mutateAsync(asset.id); onChange(url); - toast.success("Image uploaded"); + toast.success(t("imageInput.uploaded")); // Clear progress so the dropzone re-arms for another upload. setTimeout(reset, 1500); } catch (e) { - const message = - e instanceof ApiRequestError - ? (e.problem?.detail ?? e.problem?.title ?? e.message) - : e instanceof Error - ? e.message - : "Upload failed"; - toast.error(message); + // describeUploadError resolves the catalog key an UploadError carries; anything else is + // prose the API already localized. + toast.error(describeUploadError(e, t, t("imageInput.uploadFailed"))); } }; input.click(); @@ -102,10 +99,10 @@ export function ImageInput({ {/* Mode toggle */}
setMode("upload")} icon={}> - Upload + {t("imageInput.upload")} setMode("url")} icon={}> - Paste URL + {t("imageInput.pasteUrl")}
@@ -133,12 +130,12 @@ export function ImageInput({ {isWorking ? : } - {hasImage ? "Replace image" : "Choose image"} + {hasImage ? t("imageInput.replace") : t("imageInput.choose")} {hasImage && !isWorking && ( )} {isUploading && progress && ( @@ -159,8 +156,8 @@ export function ImageInput({

{mode === "upload" - ? `JPG/PNG/WebP/GIF · up to ${formatBytes(maxBytes)}` - : "Direct link to an image you host elsewhere."} + ? t("imageInput.formats", { size: formatBytes(maxBytes) }) + : t("imageInput.directLink")}

diff --git a/clients/admin/src/components/forbidden-view.tsx b/clients/admin/src/components/forbidden-view.tsx index 782a7f69c7..7a9c571041 100644 --- a/clients/admin/src/components/forbidden-view.tsx +++ b/clients/admin/src/components/forbidden-view.tsx @@ -1,5 +1,6 @@ import { Link } from "react-router-dom"; import { ShieldOff } from "lucide-react"; +import { useTranslation } from "react-i18next"; import { Button } from "@/components/ui/button"; type ForbiddenViewProps = { @@ -13,6 +14,7 @@ type ForbiddenViewProps = { * as code-chips so the operator can paste them into a permission grant. */ export function ForbiddenView({ missing }: ForbiddenViewProps) { + const { t } = useTranslation("common"); return (
@@ -21,20 +23,20 @@ export function ForbiddenView({ missing }: ForbiddenViewProps) {
- // 403 · access denied + {t("forbidden.kicker")}

- You don't hold the permissions to view this surface. + {t("forbidden.title")}

- Ask a root-tenant operator to grant the permissions below to a role you hold. + {t("forbidden.description")}

{missing && missing.length > 0 && (
-
missing
+
{t("forbidden.missing")}
    {missing.map((p) => (
  • @@ -47,7 +49,7 @@ export function ForbiddenView({ missing }: ForbiddenViewProps) {
diff --git a/clients/admin/src/components/impersonation/active-grants-card.tsx b/clients/admin/src/components/impersonation/active-grants-card.tsx index b938e09298..45e911ce54 100644 --- a/clients/admin/src/components/impersonation/active-grants-card.tsx +++ b/clients/admin/src/components/impersonation/active-grants-card.tsx @@ -1,6 +1,8 @@ import { useState } from "react"; +import { formatTime } from "@/lib/format"; import { useQuery } from "@tanstack/react-query"; import { ShieldOff, UserCog } from "lucide-react"; +import { useTranslation } from "react-i18next"; import { listImpersonationGrants, type ImpersonationGrantDto, @@ -22,6 +24,7 @@ const REFRESH_INTERVAL_MS = 5_000; * if the caller can't see impersonation grants (perm-gated upstream). */ export function ActiveGrantsCard({ tenantId }: { tenantId: string }) { + const { t } = useTranslation("impersonation"); const { user } = useAuth(); const canView = (user?.permissions ?? []).includes(IdentityPermissions.Impersonation.View); const canRevoke = (user?.permissions ?? []).includes(IdentityPermissions.Impersonation.Revoke); @@ -66,9 +69,9 @@ export function ActiveGrantsCard({ tenantId }: { tenantId: string }) { return ( <>
    {items.map((g) => ( @@ -121,13 +124,14 @@ function GrantRow({ onRevoke: () => void; onReopen: () => void; }) { + const { t } = useTranslation("impersonation"); return (
  • {/* Live-session pulse dot */} {/* Session detail */} @@ -143,12 +147,14 @@ function GrantRow({ - Active + {t("status.active")}
- started {new Date(g.startedAtUtc).toLocaleTimeString()} · expires{" "} - {new Date(g.expiresAtUtc).toLocaleTimeString()} + {t("card.window", { + started: formatTime(g.startedAtUtc), + expires: formatTime(g.expiresAtUtc), + })} {g.reason && <> · {truncate(g.reason, 80)}}
@@ -178,10 +184,11 @@ function RowActions({ onRevoke: () => void; onReopen: () => void; }) { + const { t } = useTranslation("impersonation"); if (!canRevoke && !canReopen) { return ( - view-only + {t("card.viewOnly")} ); } @@ -192,14 +199,14 @@ function RowActions({ variant="outline" size="sm" onClick={onReopen} - title="Issue a fresh impersonation token — use when you lost the original dashboard tab." + title={t("card.reopenTooltip")} > - Re-open + {t("reopen")} )} {canRevoke && ( )}
diff --git a/clients/admin/src/components/impersonation/impersonate-dialog.tsx b/clients/admin/src/components/impersonation/impersonate-dialog.tsx index 0cbe613033..8e6306085d 100644 --- a/clients/admin/src/components/impersonation/impersonate-dialog.tsx +++ b/clients/admin/src/components/impersonation/impersonate-dialog.tsx @@ -1,4 +1,5 @@ import { useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; import { useMutation, useQuery, keepPreviousData } from "@tanstack/react-query"; import { ArrowLeft, ArrowRight, Check, Search, ShieldAlert, UserCog } from "lucide-react"; import { toast } from "sonner"; @@ -19,7 +20,11 @@ import { import { Monogram } from "@/components/monogram"; import { ApiRequestError } from "@/lib/api-client"; import { env } from "@/env"; +import i18n from "@/i18n"; import { cn } from "@/lib/cn"; +import type { TFunction } from "i18next"; + +type TFn = TFunction<"impersonation">; type Props = { open: boolean; @@ -54,6 +59,7 @@ export function ImpersonateDialog({ tenantName, prefillUser, }: Props) { + const { t } = useTranslation("impersonation"); const [step, setStep] = useState<"pick" | "configure">(prefillUser ? "configure" : "pick"); const [selected, setSelected] = useState(prefillUser ?? null); @@ -76,14 +82,14 @@ export function ImpersonateDialog({ > - Impersonate user + {t("dialog.title")} - Tenant{" "} + {t("dialog.tenant")}{" "} {tenantName ?? tenantId} ·{" "} {step === "pick" - ? "pick a user to impersonate." - : "session details. Token will be issued and opened in the dashboard."} + ? t("dialog.descPick") + : t("dialog.descConfigure")} @@ -130,6 +136,7 @@ function PickStep({ onPick: (user: UserDto) => void; onCancel: () => void; }) { + const { t } = useTranslation("impersonation"); const [search, setSearch] = useState(""); const [debounced, setDebounced] = useState(""); @@ -164,8 +171,8 @@ function PickStep({ autoFocus value={search} onChange={(e) => setSearch(e.target.value)} - placeholder="Search by name, email, or username…" - aria-label="Search users to impersonate" + placeholder={t("dialog.pick.searchPlaceholder")} + aria-label={t("dialog.pick.searchAria")} className="pl-9" /> @@ -175,20 +182,20 @@ function PickStep({
{query.error instanceof ApiRequestError ? query.error.problem?.detail ?? query.error.message - : "Failed to load users."} + : t("dialog.pick.loadError")}
)} {query.isLoading && (
- Loading + {t("dialog.pick.loading")}
)} {!query.isLoading && users.length === 0 && (
- No users match{debounced ? ` “${debounced}”` : ""}. + {t("dialog.pick.noMatch")}{debounced ? ` “${debounced}”` : ""}.
)} @@ -213,7 +220,7 @@ function PickStep({ {[user.firstName, user.lastName].filter(Boolean).join(" ") || user.userName || user.email || - "Unnamed"} + t("dialog.pick.unnamed")} {user.userName && ( @@ -235,7 +242,7 @@ function PickStep({ @@ -257,6 +264,7 @@ function ConfigureStep({ onBack?: () => void; onDone: () => void; }) { + const { t } = useTranslation("impersonation"); const [reason, setReason] = useState(""); const [minutes, setMinutes] = useState(15); @@ -273,8 +281,8 @@ function ConfigureStep({ }), onSuccess: (response) => { handoffToDashboard(response, tenantId); - toast.success(`Impersonation started · ${minutes} min`, { - description: `Opened the dashboard as ${labelFor(user)}. End impersonation from inside the dashboard tab.`, + toast.success(t("dialog.toast.started", { minutes }), { + description: t("dialog.toast.startedDesc", { name: labelFor(user, t) }), }); onDone(); }, @@ -283,7 +291,7 @@ function ConfigureStep({ err instanceof ApiRequestError ? err.problem?.detail ?? err.problem?.title ?? err.message : err.message; - toast.error("Impersonation failed", { description: detail }); + toast.error(t("dialog.toast.failed"), { description: detail }); }, }); @@ -293,7 +301,7 @@ function ConfigureStep({
- // Duration + {t("dialog.configure.duration")}
{DURATION_OPTIONS.map((opt) => { const active = minutes === opt.minutes; @@ -313,7 +321,7 @@ function ConfigureStep({ {opt.minutes} - minutes + {t("dialog.configure.minutes")} ); })} @@ -325,7 +333,7 @@ function ConfigureStep({ htmlFor="impersonation-reason" className="meta flex items-center gap-1.5 text-[var(--color-muted-foreground)]" > - Reason + {t("dialog.configure.reason")} · @@ -334,7 +342,7 @@ function ConfigureStep({ id="impersonation-reason" value={reason} onChange={(e) => setReason(e.target.value)} - placeholder="e.g. Customer ticket #4821 — verifying ledger discrepancy" + placeholder={t("dialog.configure.reasonPlaceholder")} rows={3} maxLength={500} className={cn( @@ -346,8 +354,7 @@ function ConfigureStep({ />

- Recorded in the security audit trail — be specific enough that a reviewer can - reconstruct the case later. + {t("dialog.configure.reasonHelp")}

- Everything you do is attributed to your account. - {" "}The session token carries actor claims; the audit trail will show - both the user being impersonated and you as the actor. End from the dashboard - tab when done. + {t("dialog.configure.warningStrong")} + {t("dialog.configure.warningRest")}
@@ -374,7 +379,7 @@ function ConfigureStep({ {onBack && ( )} @@ -404,6 +409,7 @@ function SelectedUserCard({ tenantId: string; tenantName?: string; }) { + const { t } = useTranslation("impersonation"); return (
- {labelFor(user)} + {labelFor(user, t)} {user.userName && ( @{user.userName} @@ -443,12 +449,21 @@ function SelectedUserCard({ * history.replaceState() to strip the hash before any render. * * `expiresAt` is included so the dashboard can show a countdown. + * + * `locale` carries the OPERATOR's language across the origin boundary. The + * server deliberately strips the target's `locale` claim so the operator keeps + * reading in their own language (StartImpersonationCommandHandler), but the + * dashboard usually runs on a different origin and therefore cannot read this + * app's persisted language (`fsh.admin.lng`). Without this parameter the API culture falls + * through to the dashboard's own detected locale, so the shell would be in the + * operator's language while API errors came back in another. */ function handoffToDashboard(response: ImpersonationResponse, tenantId: string) { const params = new URLSearchParams(); params.set("token", response.accessToken); params.set("tenant", tenantId); params.set("expiresAt", response.accessTokenExpiresAt); + params.set("locale", i18n.resolvedLanguage ?? "en-US"); const url = `${env.dashboardUrl}/#impersonate?${params.toString()}`; // noopener+noreferrer so the opened tab can't navigate this one and the // referrer header is suppressed entirely (defense in depth — the hash @@ -456,11 +471,11 @@ function handoffToDashboard(response: ImpersonationResponse, tenantId: string) { window.open(url, "_blank", "noopener,noreferrer"); } -function labelFor(user: UserDto): string { +function labelFor(user: UserDto, t: TFn): string { return ( [user.firstName, user.lastName].filter(Boolean).join(" ").trim() || user.userName || user.email || - "Unnamed user" + t("dialog.unnamedUser") ); } diff --git a/clients/admin/src/components/impersonation/revoke-grant-dialog.tsx b/clients/admin/src/components/impersonation/revoke-grant-dialog.tsx index 9b78466549..46274143e1 100644 --- a/clients/admin/src/components/impersonation/revoke-grant-dialog.tsx +++ b/clients/admin/src/components/impersonation/revoke-grant-dialog.tsx @@ -1,4 +1,6 @@ import { useEffect, useState } from "react"; +import { formatDateTime } from "@/lib/format"; +import { useTranslation } from "react-i18next"; import { useMutation, useQueryClient } from "@tanstack/react-query"; import { ShieldOff } from "lucide-react"; import { toast } from "sonner"; @@ -34,6 +36,7 @@ type Props = { * operator knows exactly what they're killing. */ export function RevokeGrantDialog({ grant, onOpenChange, onRevoked }: Props) { + const { t } = useTranslation("impersonation"); const queryClient = useQueryClient(); const [reason, setReason] = useState(""); const open = grant !== null; @@ -46,8 +49,10 @@ export function RevokeGrantDialog({ grant, onOpenChange, onRevoked }: Props) { const mutation = useMutation({ mutationFn: () => revokeImpersonationGrant(grant!.id, reason.trim() || undefined), onSuccess: (updated) => { - toast.success("Impersonation revoked", { - description: `Token for ${updated.impersonatedUserName ?? updated.impersonatedUserId} will be rejected on the next request.`, + toast.success(t("revokeDialog.toast.revoked"), { + description: t("revokeDialog.toast.revokedDesc", { + name: updated.impersonatedUserName ?? updated.impersonatedUserId, + }), }); queryClient.invalidateQueries({ queryKey: ["impersonation-grants"] }); onRevoked?.(updated); @@ -58,7 +63,7 @@ export function RevokeGrantDialog({ grant, onOpenChange, onRevoked }: Props) { err instanceof ApiRequestError ? err.problem?.detail ?? err.problem?.title ?? err.message : err.message; - toast.error("Revoke failed", { description: detail }); + toast.error(t("revokeDialog.toast.revokeFailed"), { description: detail }); }, }); @@ -73,11 +78,10 @@ export function RevokeGrantDialog({ grant, onOpenChange, onRevoked }: Props) { > - Revoke impersonation grant + {t("revokeDialog.title")}
- The issued token will be rejected on the next authenticated request (within ~1 - second of cache TTL). The session in the dashboard tab is killed without warning. + {t("revokeDialog.description")} @@ -89,13 +93,13 @@ export function RevokeGrantDialog({ grant, onOpenChange, onRevoked }: Props) { htmlFor="revoke-reason" className="meta text-[var(--color-muted-foreground)]" > - Reason (optional) + {t("revokeDialog.reasonLabel")}