AdamThomasandClaude Sonnet 5
ac469f0cd1
Portage du projet « Bénévoles Festival.dc.html » en implémentation statique pilotée par un jeu de démonstration déterministe (portage du générateur du design : 15 postes, 64 bénévoles, ~209 affectations). - Système visuel néo-brutaliste : palette + primitives Tailwind, polices Archivo / DM Mono, primitives dans components/ui.tsx. - Domaine (aligné CLAUDE.md) : types, jours/plages, moteur de validation (mêmes codes BLOCKING/WARNING que le back-end), sélecteurs, différentiel de publication. - État applicatif : PlanningProvider (reducer) — affecter / désaffecter / publier / confirmer / éditer besoins et bénévoles / import simulé / pointage. - Écrans : 01 Grille des besoins + panneau d'affectation (candidats triés, alertes), 02 Vue par bénévole, 03 Publication, 04 Mobile bénévole, 05 Mobile référent, 06 Configuration (4 sous-onglets). - i18n : aucun texte d'interface en dur, locales/fr.json. - Vérifs : build tsc + vite, eslint (0 erreur), rendu headless des 6 écrans (npm run smoke). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AwswqSChc3Rwtu61pRXiY2
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)) etsrc/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éesBLOCKING/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