sebvtl728
94 lines
3.7 KiB
Markdown
94 lines
3.7 KiB
Markdown
# Redesign Professionnel — Bilan d'Évaluation
|
||
|
||
**Date :** 2026-06-21
|
||
**Contexte :** Application React/Vite standalone utilisée par un formateur seul pour évaluer un apprenant (CP1–CP9), puis exporter un PDF.
|
||
|
||
---
|
||
|
||
## Problèmes identifiés
|
||
|
||
1. Pas de hiérarchie visuelle — tout est au même niveau
|
||
2. Workflow non évident — l'ordre des actions n'est pas guidé
|
||
3. Aspect peu professionnel à montrer
|
||
4. Actions importantes (Générer, IA, PDF) noyées en bas de page
|
||
|
||
---
|
||
|
||
## Architecture générale
|
||
|
||
### Topbar sticky (64px)
|
||
|
||
Structure en trois zones :
|
||
|
||
- **Gauche :** logo Arinfo (32px hauteur) + séparateur + CP selector stylisé en pill indigo
|
||
- **Centre :** titre dynamique `Bilan CPX — [sous-titre]` en font-weight 600, taille 15px
|
||
- **Droite :** champs Prénom + Nom (inputs compacts, 36px, fond transparent) + trois boutons d'action principaux
|
||
|
||
Boutons topbar (hiérarchie visuelle explicite) :
|
||
- `📝 Générer` — style outline, secondaire
|
||
- `✨ Résumer avec l'IA` — gradient violet→rose, bouton dominant
|
||
- `📄 PDF` — gradient emerald, visible uniquement si `anySelected === true`
|
||
|
||
Le topbar reste visible au scroll via `position: sticky; top: 0; z-index: 100`.
|
||
|
||
### Toolbar critères (44px)
|
||
|
||
Barre fine sous le topbar, fond `#f8fafc`, `border-bottom` subtile :
|
||
- Gauche : liens texte "Tout sélectionner" / "Tout désélectionner"
|
||
- Droite : input "Ajouter un critère…" + bouton `+` compact
|
||
|
||
### Grille de critères
|
||
|
||
Trois colonnes (Performance / Compétence / Connaissance), layout identique à l'existant avec amélioration du layout interne des items.
|
||
|
||
**Header de card :** titre bucket uppercase + badge compteur sur fond coloré très léger (teinte propre à chaque bucket).
|
||
|
||
**Layout interne d'un item :** passage de `flex-column` à `flex-row` :
|
||
```
|
||
[☐ checkbox] [label texte — flex-grow] [NA][EC][AC][MA] [× supprimer]
|
||
```
|
||
Cela rend les items plus denses, plus lisibles, et réduit la hauteur de page.
|
||
|
||
### Section synthèse
|
||
|
||
Séparée du reste par un divider visuel centré : `──── Synthèse & Export ────`
|
||
|
||
Layout deux colonnes :
|
||
- **Gauche :** notes formateur (textarea), tonalité (select), checkbox "insérer en tête", config API OpenAI (accordéon collapsible)
|
||
- **Droite :** textarea bilan (monospace, `min-height: 380px`, hauteur libre)
|
||
|
||
### Notifications de statut
|
||
|
||
Les messages de statut (`success`, `error`, `info`) passent en **toast flottant** positionné `fixed` en bas à droite, avec disparition automatique. Ils ne s'insèrent plus dans le flux de contenu.
|
||
|
||
---
|
||
|
||
## Changements CSS
|
||
|
||
- Ajout de `.app-topbar` (sticky header)
|
||
- Ajout de `.criteria-toolbar`
|
||
- Ajout de `.section-divider`
|
||
- Modification de `.competence-item` : `flex-direction: row`, `align-items: center`
|
||
- Modification de `.level-group` : suppression du `border-top`, intégration inline
|
||
- Ajout de `.toast-container` + `.toast` (positionnement fixed)
|
||
- Suppression des `.controls` génériques (remplacés par topbar et toolbar dédiés)
|
||
|
||
---
|
||
|
||
## Changements JSX
|
||
|
||
- Le rendu passe de `.bilan-wrapper > .bilan-container` à `.app-shell > .app-topbar + .app-main`
|
||
- Le `<select>` CP selector, les inputs identité et les trois boutons d'action montent dans le topbar
|
||
- La toolbar critères regroupe les boutons "Tout sélectionner/désélectionner" et le champ "Ajouter"
|
||
- `showStatus` redirige vers un système de toast (état `toasts: []`, auto-retrait)
|
||
- Le reste de la logique métier est inchangé
|
||
|
||
---
|
||
|
||
## Ce qui ne change pas
|
||
|
||
- Logique métier complète (niveaux, drag & drop, génération PDF, appel OpenAI)
|
||
- Les 3 colonnes de critères et leurs level pills
|
||
- Les variables CSS existantes (couleurs, shadows, fonts)
|
||
- La responsivité mobile (media queries à adapter)
|