# Frontend — Gestion des bénévoles

React + Vite + TypeScript + Tailwind. Interface en français, code en anglais.

Intégration du design Claude Design « Bénévoles Festival »
(`Bénévoles Festival.dc.html`) : les 6 écrans du projet sont implémentés en
statique, pilotés par un **jeu de démonstration déterministe** (portage du
générateur du design). Le branchement sur l'API back-end est l'étape suivante.

## Écrans (onglets)

| # | Route                | Écran                                                      |
|---|----------------------|----------------------------------------------------------|
| 01 | `/grille`           | Grille des besoins (postes × jours × plages) + panneau d'affectation (candidats triés, alertes bloquantes / avertissements) |
| 02 | `/benevoles`        | Vue par bénévole (affectations + disponibilités déclarées, surcharge / oubliés) |
| 03 | `/publication`      | Différentiel brouillon ↔ version publiée, aperçu du message, publication |
| 04 | `/mobile-benevole`  | Maquette mobile : planning personnel, confirmation de créneau |
| 05 | `/mobile-referent`  | Maquette mobile : pointage de l'équipe sur le créneau en cours |
| 06 | `/configuration`    | Grille des besoins, bénévoles & import, messages & envois, règles du festival |

## Commandes

| Action                 | Commande                    |
|------------------------|-----------------------------|
| Installer              | `npm install`               |
| Dev (hot reload)       | `npm run dev` → http://localhost:5173 |
| Build de production    | `npm run build`             |
| Lint                   | `npm run lint`              |
| Vérif. de types        | `npm run typecheck`         |
| Rendu headless des 6 écrans | `npm run smoke`        |

En dev, Vite proxifie `/api` vers le backend (`VITE_API_TARGET`, défaut
`http://localhost:8000`).

## Conventions

- **Aucun texte d'interface en dur.** Tout passe par `src/i18n` (`t(key, params)`)
  et `src/i18n/locales/fr.json`. Les libellés *de données* (nom d'un poste,
  d'une plage, d'une journée) sont portés par l'entité — ils viendront de l'API.
- Code, noms de fichiers et de variables en anglais. Alias `@/` → `src/`.
- Vocabulaire métier : glossaire FR ↔ EN de `CLAUDE.md`.
- Le moteur de validation (`src/domain/rules.ts`) reprend le contrat du back-end
  (CLAUDE.md §3) : violations typées `BLOCKING` / `WARNING`, jamais de phrase.

## Arborescence

```
src/
├── main.tsx                  # point d'entrée (Router + PlanningProvider)
├── app/
│   ├── AppShell.tsx          # en-tête + onglets + badge brouillon
│   ├── router.tsx            # routes (tableau réutilisable)
│   └── planning-store.tsx    # état + actions (reducer) sur le jeu de démo
├── domain/
│   ├── types.ts              # modèle (aligné CLAUDE.md)
│   ├── festival.ts           # jours, plages, helpers temps
│   ├── rules.ts              # moteur de validation (portage back-end)
│   ├── selectors.ts          # index des affectations, surcharge
│   └── publication.ts        # différentiel de publication
├── mock/                     # jeu de démonstration déterministe
├── components/ui.tsx         # primitives visuelles (bordures/ombres franches)
├── pages/                    # un fichier par écran (+ sous-dossiers grille/, config/, mobile/)
└── i18n/                     # t() + locales/fr.json
```