# Frontend: i18n Structure & Output Formatting

> Referenced from `steps/step-05-frontend.md` — i18n files and output presentation.

---

## i18n Structure

All i18n files must follow this structure:

```
locales/
├── fr/
│   └── {entityCode}.json
├── en/
│   └── {entityCode}.json
├── it/
│   └── {entityCode}.json
└── de/
    └── {entityCode}.json
```

**Note:** i18n files are auto-generated by `type: "page"` scaffold. Verify the 4 language files were created and customize the `title`/`subtitle` with proper labels.

If customization needed:
- `i18n/locales/fr/{entityCode}.json` → set `"title": "{labels.fr}"`
- `i18n/locales/en/{entityCode}.json` → set `"title": "{labels.en}"`
- `i18n/locales/it/{entityCode}.json` → set `"title": "{labels.it}"`
- `i18n/locales/de/{entityCode}.json` → set `"title": "{labels.de}"`

---

## Presenting Output to User

Display generated frontend code organized by category:

### Pages
- `pages/{application}/{module}/{EntityName}Page.tsx`
- `pages/{application}/{module}/{EntityName}ListView.tsx`

### Components
- `components/{application}/{module}/{EntityName}.tsx`
- `hooks/use{EntityName}.ts`

### API Client
- `services/api/{entityCode}Api.ts`
- `types/{entityName}.types.ts`

### Routes
- Updated `navRoutes.generated.ts`
- Generated `componentRegistry.generated.ts` (PageRegistry registrations)
- Navigation seed data has matching componentKeys

### i18n
- `locales/fr/{entityCode}.json`
- `locales/en/{entityCode}.json`
- `locales/it/{entityCode}.json`
- `locales/de/{entityCode}.json`

### Route Configuration Example
```tsx
// In routes.tsx - NESTED routes (not flat!)
<Route path="{application_kebab}">
  <Route index element={<Navigate to="{module_kebab}" replace />} />
  <Route path="{module_kebab}" element={<{EntityName}Page />} />
</Route>
```
