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
65 lines
3.4 KiB
Markdown
65 lines
3.4 KiB
Markdown
# 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
|
||
```
|