# Prompt ULTRA optimisé — Parcours utilisateur uniquement (Cursor / v0) ## Scope strict — À respecter absolument **Périmètre : parcours utilisateur (simulation budget étudiant) uniquement.** - **Modifier uniquement :** - Les 8 écrans du parcours : Home (Bienvenue), LettreAcceptation, Recettes, Logement, Alimentation, Loisirs, Marge, Recap. - Les composants de layout du parcours : `BudgetBanner`, `ParcoursLayout`, `EstablishmentBrand` (dans `Layout.tsx` et `ParcoursLayout.tsx`). - Les classes et variables CSS utilisées par le parcours dans `index.css` (`.parcours-screen`, `.parcours-card`, `.step-nav`, `.budget-banner`, etc.). - **Ne pas modifier :** - Aucune route ni composant admin : `/admin`, `AdminLayout`, `AdminDashboard`, `AdminSessionLive`, `AdminLogements`, `AdminThemeBranding`, `AdminLicences`, `AdminMessagerie`, `AdminScenarioReset`, `IntegrationUrl` (côté admin), etc. - Aucune page ni composant d’édition de scénario : `ScenarioEditLayout`, `ScenarioEditMain`, `ScenarioCampus`, `ScenarioLogementsLayout`, `ScenarioPaniers`, `ScenarioLoisirs`, `ScenarioFormations`, `ScenarioTransport`, `ScenarioVilles`, `ScenarioBourse`, `ScenarioAlternance`. - Super Admin : toutes les routes sous `/super-admin` et leurs composants. - `AdminPageHeader`, `AdminPageLayout`, `AdminLayout`. - `App.tsx` : ne pas modifier le routing ; les routes existantes du parcours restent inchangées. **Fichiers autorisés à modifier ou à créer (parcours uniquement) :** - `frontend/src/pages/Home.tsx` - `frontend/src/pages/LettreAcceptation.tsx` - `frontend/src/pages/Recettes.tsx` - `frontend/src/pages/Logement.tsx` - `frontend/src/pages/Alimentation.tsx` - `frontend/src/pages/Loisirs.tsx` - `frontend/src/pages/Marge.tsx` - `frontend/src/pages/Recap.tsx` - `frontend/src/components/Layout.tsx` (uniquement les parties liées à `BudgetBanner` / parcours) - `frontend/src/components/ParcoursLayout.tsx` - `frontend/src/components/EstablishmentBrand.tsx` (optionnel) - `frontend/src/index.css` (uniquement les classes et variables utilisées par le parcours) - Nouveaux composants dans `frontend/src/components/` utilisés **uniquement** par les pages du parcours (ex. `SelectionCard.tsx`, `SummaryRow.tsx`, etc.) **Fichiers à ne pas modifier :** - Tous les fichiers sous `frontend/src/pages/` liés à l’admin ou au Super Admin (AdminDashboard, AdminSessionLive, AdminLogements, etc.) - Tous les fichiers sous `frontend/src/pages/ScenarioEdit/` - `frontend/src/components/AdminLayout.tsx`, `AdminPageLayout.tsx`, `AdminPageHeader.tsx` - `frontend/src/App.tsx` --- # Génération d’une UI parcours : Simulation de budget étudiant Build a **mobile-first React interface** for the **user/participant journey** of a **Student Budget Simulation application**. The goal is to generate a **realistic, structured, production-quality UI** for the simulation flow only — **not** a landing page, **not** admin screens. This journey has **6 steps** plus **2 onboarding screens**. The UI must feel like a **real educational / fintech / student support tool**. --- ## Core requirements - **Stack :** React 18, TypeScript, Vite. - **Styling :** Use the **existing CSS** of the project. Do **not** introduce Tailwind unless you add it **only** for parcours-related files (parcours pages + ParcoursLayout). Prefer : - CSS variables from `frontend/src/index.css` : `--color-primary`, `--color-border`, `--color-surface`, `--color-text`, `--color-text-muted`, `--color-success`, `--color-warning`, `--color-danger`, `--parcours-gradient-start`, `--parcours-gradient-end`, `--parcours-card-radius`, `--budget-card-shadow`, `--shadow`, `--radius`. - Existing classes : `.parcours-screen`, `.parcours-card`, `.card`, `.budget-card`, `.card-shadow`, `.step-nav`, `.step-nav__item`, `.step-nav__item--active`, `.budget-banner`, `.parcours-header__back`, `.parcours-header__title`. - **Layout :** The parcours uses `Layout` → `ParcoursLayout`. Keep using `BudgetBanner` (in `Layout.tsx`) for the header on steps 3–8, and the existing header "marque seule" (logo + establishment name + "Bienvenue") on the Welcome screen (in `ParcoursLayout.tsx`). Bottom navigation is the existing **step-nav** in `ParcoursLayout.tsx` (Recettes, Logement, Alimentation, Loisirs, Marge, Récap). Use **EstablishmentBrand** for logo + establishment name. - **Architecture :** Component-based, mobile-first responsive. Do **not** generate : landing pages, marketing hero sections, empty mockups, or any admin UI. Generate a **real application UI** with : cards, forms, step navigation, bottom tabs, summaries, budget indicators. --- ## Global UI style (parcours) - **Visual :** Modern, clean, trustworthy, student-friendly. Inspired by fintech and educational budgeting apps. - **Layout :** Mobile-first. Content in a scrollable area with padding; bottom nav fixed. - **Background (parcours screens) :** Gradient using `var(--parcours-gradient-start)` and `var(--parcours-gradient-end)` (already set by theme). - **Cards :** `bg` from `var(--color-surface)`, `border-radius: var(--parcours-card-radius)`, `box-shadow: var(--budget-card-shadow)`, `border: 1px solid var(--color-border)`, padding ~1rem–1.25rem. Use class `.parcours-card` or `.card` as appropriate. - **Typography :** Titles `font-semibold` / `font-weight: 600`, section titles `font-medium`, secondary text `color: var(--color-text-muted)`. --- ## Color system (use CSS variables) - Primary : `var(--color-primary)` - Success : `var(--color-success)` - Warning : `var(--color-warning)` - Danger : `var(--color-danger)` - Muted text : `var(--color-text-muted)` - Active states (e.g. step nav) : background tint of primary, text primary, border primary. --- ## Application structure (parcours only) Screens to generate or refine : 1. **Welcome Screen** (`/` — Home) 2. **Acceptance Letter Screen** (`/lettre-acceptation`) 3. **Income & Aid Screen** (`/recettes`) — Étape 1 / 6 4. **Housing Screen** (`/logement`) — Étape 2 / 6 5. **Food Screen** (`/alimentation`) — Étape 3 / 6 6. **Leisure Screen** (`/loisirs`) — Étape 4 / 6 7. **Safety Margin Screen** (`/marge`) — Étape 5 / 6 8. **Summary Screen** (`/recap`) — Étape 6 / 6 Use **realistic student financial data** in labels and examples. --- ## Reusable components (parcours only) Create or refine reusable components **used only by parcours pages** (in `frontend/src/components/`) : - **Existing (keep / reuse) :** `BudgetBanner`, `ParcoursLayout`, `EstablishmentBrand`, step-nav inside `ParcoursLayout`. - **Suggested for parcours :** `InfoCard`, `SelectionCard`, `BudgetIndicator` (or use existing in Layout), `StepBadge`, `SummaryRow`, `PrimaryButton` / `SecondaryButton` (or use existing `.btn`, `.btn-primary`, `.btn-secondary`), `ToggleField`, `AmountField`, `SectionCard`. - **Optional :** `ExpandableSummaryRow`, `StatusBadge`, `ModeCard`, `HousingCard`, `FoodBasketCard`, `LeisureItemRow`. Do **not** add or change components used by admin or scenario edit. --- ## Global header rules (screens 3 → 8) Use the existing **BudgetBanner** (in `Layout.tsx`). It must include : - **Left :** Back arrow (link to previous step), Establishment logo, Establishment name (via `EstablishmentBrand`). - **Center :** Step title (e.g. "Recettes et aides"), and below "Étape X / 6". - **Right :** Timer (e.g. 12:45) when in session, and **Budget remaining** (e.g. 850 €). Budget colors : green when safe, orange when warning, red when deficit. --- ## Bottom navigation Use the existing **step-nav** in `ParcoursLayout.tsx`. Tabs : - Recettes - Logement - Alimentation - Loisirs - Marge - Récap Each tab : icon + label. Active tab : `step-nav__item--active` (primary color, light background). Style : fixed bottom, white background, rounded top corners, shadow. --- ## Screen details ### 1. Welcome Screen (`Home.tsx`) - **Header :** Logo + establishment name + "Bienvenue" (current "marque seule" header in ParcoursLayout for `/`). - **Top right buttons :** Administration (if admin), Déconnexion. - **Intro card :** e.g. "Mode asynchrone : simulez votre budget étudiant en quelques étapes." - **Session card (participant) :** Title "Mode compétition ou autonomie", session code input (6 characters), buttons "Rejoindre la session", "Mode autonomie". - **Main card :** Title "Commencer la simulation", mini blocks (Recettes, Logement, Alimentation), buttons "Commencer la simulation", "Simuler mon budget". - **Footer cards :** "Durée estimée : 5–10 min", "6 étapes". ### 2. Acceptance Letter Screen (`LettreAcceptation.tsx`) - Centered card with logo, establishment name, city. - Title : "Lettre d'acceptation". - Text : e.g. "Nous avons le plaisir de vous informer que votre candidature a été retenue." - Button : "J'accepte, commencer la simulation". ### 3. Income Screen (`Recettes.tsx`) - Title : "Recettes et aides", "Étape 1 / 6". - Fields : Boursier toggle, Échelon de bourse dropdown, Aide familiale (€), Alternance toggle, sector, salary (€), Job étudiant (€), Prime d'activité, Aide MOBILI‑JEUNE toggle. - Summary card : "Total recettes : 1245 € / mois". - Button : "Suivant : Logement". ### 4. Housing Screen (`Logement.tsx`) - Title : "Logement" / "Choix du logement", "Étape 2 / 6". - Housing type cards : CROUS, Résidence privée, Location privée, Colocation. - Housing list cards : e.g. "Studio CROUS Jean Zay", Loyer, Charges, APL, Coût net. - Mobility section : À pied, Transports, Voiture. - Button : "Suivant : Alimentation". ### 5. Food Screen (`Alimentation.tsx`) - Title : "Alimentation et courses", "Étape 3 / 6". - Text : "Choisissez un panier correspondant à votre consommation mensuelle." - Food baskets : e.g. RU + courses — 180 €, Petit budget — 120 €, Équilibré — 240 €, Confort — 320 €. - Button : "Suivant : Loisirs". ### 6. Leisure Screen (`Loisirs.tsx`) - Title : "Loisirs et vie sociale", "Étape 4 / 6". - Items : e.g. Salle de sport — 25 €, Netflix — 14 €, Cinéma — 20 €, Sorties — 60 €, Association — 15 €. - Custom activity : label, category, price. - Summary : "Total loisirs : 94 €". - Button : "Suivant : Marge". ### 7. Safety Margin Screen (`Marge.tsx`) - Title : "Marge de sécurité", "Étape 5 / 6". - Rows : Recettes, Logement, Mobilité, Alimentation, Loisirs (expandable for detail). - Indicator : "Budget restant : 138 €" or "Budget restant : -72 €". - Text : "Marge minimum recommandée : 50 €". - Button : "Suivant : Récap". ### 8. Summary Screen (`Recap.tsx`) - Title : "Récapitulatif et verdict", "Étape 6 / 6". - Verdict : "Budget équilibré" or "Budget en négatif". - Display : total recettes, total dépenses, dépenses par catégorie, budget restant. - Buttons : Télécharger PDF, Recommencer, Envoyer mon résultat (session). - Optional : "Vous êtes #3 avec 850 points". --- ## Mock data examples (realistic) - Bourse : 492 € - Aide famille : 150 € - Alternance : 980 € - Job étudiant : 180 € - Logement net : 250 € - Transport : 30 € - Alimentation : 180 € - Loisirs : 94 € --- ## Important constraints - Do **not** generate landing pages, simplify the flow, remove screens, or replace the parcours with a dashboard. - Do **not** modify admin, super-admin, or scenario-edit code or routes. - Prioritize : realistic interface, real values, visible selected states, mobile usability, clear budget visualization. - The result must look like a **real student budgeting application prototype** for the **user/participant journey** only, ready for testing.