Preflight Checklist

• I have searched existing issues for similar behavior reports
• This report does NOT contain sensitive information (API keys, passwords, etc.)

Type of Behavior Issue

Other unexpected behavior

What You Asked Claude to Do

ROADMAP D'IMPLÉMENTATION — ESPACE CLIENT VELIO

Brief pour Claude Code — V2 (basée sur l'audit de l'existant)

Date : 11 avril 2026 Source d'autorité : VELIO-PRD-UNIFIE-V3.md (prime sur tout autre document) Branding : my-brand.md (obligatoire, aucune dérogation)

AUDIT DE L'EXISTANT

Architecture technique en place

Monorepo Turborepo
├── apps/
│   ├── web/          → Next.js App Router + Turbopack (port 3000)
│   └── api/          → Fastify (port 4000, health check OK)
├── Structure auth    → JWT dans cookie velio_token + localStorage
├── CSS               → Tailwind (classes utilitaires, PAS de variables custom)
├── Fonts             → Inter + Geist (police Next.js par défaut) — PAS Poppins
├── Couleurs          → Tailwind green-* générique (green-500, green-600...) — PAS les couleurs Velio
└── Routes existantes → /login, /client, /client/scenarios, /client/devis, /client/documents, /client/messages, /client/paiement

Pages existantes — état détaillé

/login — FONCTIONNEL

• Formulaire email + mot de passe
• Auth JWT fonctionnelle (cookie + localStorage)
• User test : [email protected]
• Design : basique, fond blanc, Tailwind green-600
• ❌ Pas de Poppins, pas de couleurs Velio

/client (dashboard) — STRUCTURE EXISTANTE, CONTENU À REFAIRE

• Sidebar avec 6 liens de navigation (tous visibles en permanence)
• Barre de progression "Étape 2/13 — 15%" avec 13 étapes nommées
• Bloc "Prochain rendez-vous" avec calendrier mensuel complet
• Bloc "Prochaine action" avec wording incorrect ("Votre expert local vous appellera")
• Section "Votre maison" avec 4 champs vides ("À compléter") — devrait être lecture seule
• Section "Vos intentions de travaux" avec tags modifiables + ajout
• ❌ Pas d'agenda de booking (devrait être le premier écran)
• ❌ Pas de contextualité par phase
• ❌ Icônes emoji brutes (🗂️)

/client/scenarios — PLACEHOLDER

• 3 cards vides (Optimal/Progressif/Mon choix) avec descriptions génériques
• Mini-timeline (Audit → Restitution → Choix)
• Liens vers /client et /client/devis
• ❌ Pas de données, pas de DPE, pas de saut de classe
• ❌ Affiche budget et aides dans la description (ne devrait pas)

/client/devis — PLACEHOLDER

• État vide avec message
• Mini-timeline (Préparation → Réception → Validation)
• Lien vers Pack Sérénité
• ❌ Pas de cards artisans, pas de comparaison

/client/documents — PLACEHOLDER

• 3 sections vides : Audit/rapports, Mandat/contrats, Démarches admin
• ❌ Pas de fichiers, pas de téléchargement

/client/messages — PLACEHOLDER

• Layout 2 colonnes (conversations + zone messages)
• État vide "Aucune conversation"
• ❌ Pas de messagerie fonctionnelle

/client/paiement — QUASI-COMPLET (contenu)

• Card Sérénité : prix barré 1290€ → 990€, liste des bénéfices, CTA
• Card Audit réglementaire : 600€, liste, CTA
• Mention correcte : "initiation des aides inclus gratuitement"
• ⚠️ Contenu OK mais design à aligner sur le branding Velio
• ❌ Pas de Stripe intégré

Espaces manquants :

• /admin → redirige vers /client
• /expert → redirige vers /client
• /artisan → non testé, probablement inexistant

Ce qui est BIEN et à CONSERVER

1. Architecture monorepo Turborepo (apps/web + apps/api)
2. Next.js App Router + Turbopack (moderne, performant)
3. Backend Fastify fonctionnel sur port 4000
4. Auth JWT opérationnelle (login, cookie, redirection par rôle)
5. Structure de layout avec sidebar + main content
6. Page Paiement avec le bon contenu Sérénité/Audit
7. Section Intentions de travaux avec tags dynamiques
8. Les routes sont déjà en place (/client/*)

Ce qui doit être CORRIGÉ (bugs PRD)

1. "Votre expert local vous appellera" → "Un conseiller Velio"
2. Barre 13 étapes visible au client → supprimer
3. Section "Votre maison" en mode saisie → lecture seule (alimentée par V1)
4. Toutes les sections menu visibles → contextualité par phase
5. Calendrier mensuel → carte RDV compacte
6. Premier écran = dashboard → devrait être agenda de booking

Ce qui doit être REFAIT (design)

1. Police : Inter/Geist → Poppins (toutes les graisses)
2. Couleurs : Tailwind green-* → variables CSS Velio (#3DBB82, #2a9a6a, #6fcca0, #202325, #F0F3F4)
3. Icônes : emoji bruts → icônes SVG stylisées avec fond coloré
4. Ombres/radius : adapter aux tokens Velio (12px radius, shadow subtile)
5. Animations : aucune actuellement → micro-interactions, transitions d'étape
6. États vides : texte brut → illustrations + messages chaleureux

PHILOSOPHIE UX — À RESPECTER DANS CHAQUE LIGNE DE CODE

Ce que Velio n'est PAS visuellement

• Pas une app froide avec des icônes Material Design génériques
• Pas un dashboard SaaS avec des tableaux et des KPIs
• Pas une marketplace avec des cards produit
• Pas une interface admin déguisée en espace client

Ce que Velio EST visuellement

• Un compagnon de projet chaleureux et rassurant
• Une interface qui respire : beaucoup d'espace, peu d'éléments, chaque élément compte
• Un design premium mais accessible — le client se sent accompagné, pas perdu
• Une progression narrative : le client vit une histoire (son projet), pas une checklist

Principes UX inviolables

1. Contextualité — Ne montrer QUE ce qui est pertinent à l'étape actuelle
2. Action unique — À chaque écran, une seule action principale claire
3. Feedback émotionnel — Chaque transition d'étape est un micro-événement positif
4. Zéro jargon technique — Jamais de "status: booking_scheduled"
5. Patience structurée — Pendant les attentes, l'interface rassure activement

Design tokens Velio (à injecter dans Tailwind + globals.css)

/* globals.css — AJOUTER EN HAUT */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

:root {
  --color-primary:       #3DBB82;
  --color-primary-dark:  #2a9a6a;
  --color-primary-light: #6fcca0;
  --color-dark:          #202325;
  --color-light:         #F0F3F4;
  --color-white:         #FFFFFF;
  --color-text-primary:  #202325;
  --color-text-muted:    #6b7280;
  --radius:              12px;
  --shadow:              0 2px 12px rgba(0,0,0,0.08);
  --shadow-hover:        0 4px 20px rgba(61,187,130,0.15);
  --transition-base:     0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring:   0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body {
  font-family: 'Poppins', sans-serif;
  background: var(--color-light);
  color: var(--color-text-primary);
}

// tailwind.config.ts — ÉTENDRE
module.exports = {
  theme: {
    extend: {
      colors: {
        velio: {
          primary: '#3DBB82',
          'primary-dark': '#2a9a6a',
          'primary-light': '#6fcca0',
          dark: '#202325',
          light: '#F0F3F4',
        }
      },
      fontFamily: {
        sans: ['Poppins', 'sans-serif'],
      },
      borderRadius: {
        velio: '12px',
      },
      boxShadow: {
        velio: '0 2px 12px rgba(0,0,0,0.08)',
        'velio-hover': '0 4px 20px rgba(61,187,130,0.15)',
      }
    }
  }
}

Iconographie — pattern obligatoire

// ❌ JAMAIS — ce qui est en place actuellement
<span>🗂️</span>  // emoji brut
<Calendar className="w-5 h-5 text-gray-500" />  // icône non stylisée

// ✅ TOUJOURS — pattern Velio
<div className="w-10 h-10 rounded-xl bg-velio-primary/10 flex items-center justify-center">
  <Calendar className="w-5 h-5 text-velio-primary" strokeWidth={1.5} />
</div>

Installer Lucide React si pas déjà fait : npm install lucide-react Chaque icône : couleur velio-primary, stroke-width 1.5, encapsulée dans un conteneur arrondi avec fond primaire 10% opacité.

Animations et micro-interactions

• Entrées de page : fade-in + translateY(12px) → 0, staggeré (délai 50ms)
• Cartes : hover → shadow-velio-hover + translateY(-2px)
• Boutons CTA : hover → scale(1.02) + fond velio-primary-dark
• Badges de statut : pulse subtil sur les statuts actifs
• Barre de progression : animation de remplissage fluide

SPRINT 0 — FONDATIONS DESIGN (refonte des bases existantes)

Objectif

Poser le design system Velio SUR l'existant, sans casser la structure.

0.1 — Typographie et couleurs globales

• Ajouter l'import Poppins dans apps/web/app/globals.css
• Ajouter les variables CSS :root dans globals.css
• Modifier tailwind.config.ts : étendre avec les couleurs velio, fontFamily Poppins, borderRadius, boxShadow
• Remplacer toutes les classes bg-green-* par bg-velio-primary (et variantes dark/light)
• Remplacer text-green-* par text-velio-primary
• Remplacer border-green-* par border-velio-primary
• Remplacer ring-green-* par ring-velio-primary
• Remplacer hover:bg-green-* par hover:bg-velio-primary-dark
• Changer font-family body de Inter/Geist vers Poppins
• Vérifier que le body background est bg-[#F0F3F4] (pas bg-gray-50)

0.2 — Composants fondamentaux (nouveaux fichiers)

Créer dans apps/web/components/ui/ :

1. VelioCard — carte blanche, rounded-velio, shadow-velio, p-6, hover animé
2. VelioStatus — badge de statut (confirmé vert/en cours jaune/à venir gris/terminé dark)
3. VelioIcon — wrapper d'icône avec fond coloré arrondi (pattern ci-dessus)
4. VelioPhaseBar — barre de progression en 5 phases (remplace la barre 13 étapes)
5. VelioRdvCard — carte rendez-vous compacte (type + date + heure + CTA)
6. VelioEmptyState — état vide chaleureux avec illustration SVG + message contextuel
7. VelioBanner — bandeau info persistant (vérification email, alertes)
8. VelioScenarioCard — carte scénario (travaux + lettre DPE + saut de classe)
9. VelioDevisCard — carte devis artisan
10. VelioPhaseHeader — en-tête de phase avec message contextuel + action principale

0.3 — Refonte du layout sidebar

Fichier existant : probablement apps/web/app/client/layout.tsx

Modifications :

• Le menu latéral ne montre QUE les sections pertinentes à la phase actuelle
• Ajouter une prop projectPhase (1-5) qui contrôle la visibilité
• Remplacer les emojis (🗂️) par des VelioIcon
• Ajouter des transitions CSS quand une section apparaît (fade-in)
• Mobile : convertir la sidebar en bottom navigation

Phase 1 (Démarrage) : Mon projet | Messages
Phase 2 (Diagnostic) : Mon projet | Ma maison | Messages | Documents
Phase 3 (Décision)   : Mon projet | Ma maison | Scénarios | Devis | Messages | Documents
Phase 4 (Travaux)     : + Suivi chantier | Paiement
Phase 5 (Finalisation): Tout visible

0.4 — Refonte page login

Fichier existant : apps/web/app/(auth)/login/page.tsx

• Appliquer Poppins
• Couleurs Velio (CTA en bg-velio-primary, hover bg-velio-primary-dark)
• Logo Velio stylisé (lettre V avec dégradé vert)
• Fond : split layout (gauche = illustration/branding, droite = formulaire)
• Ajouter une baseline sous le logo : "Votre espace rénovation énergétique"

SPRINT 1 — PHASE 1 : DÉMARRAGE (Booking → Call → V1 planifiée)

1.1 — Refonte du dashboard /client selon la phase du projet

Le dashboard actuel est UN écran statique. Il doit devenir DYNAMIQUE selon project.status.

ÉTAT A : Booking (score ≥120, premier écran)

RÈGLE PRD : premier écran = agenda de booking direct. Pas de dashboard.

• Supprimer la barre de progression 13 étapes
• Supprimer le calendrier mensuel
• Supprimer les sections "Votre maison" et "Prochaine action"
• Afficher UNIQUEMENT :
  • En-tête : "Votre projet est activé" + "Choisissez un créneau pour votre rendez-vous téléphonique avec un conseiller Velio." + sous-texte gratuit
  • Composant agenda de booking (créneaux bureau, PAS expert)
  • Rappel discret : "L'accompagnement de base Velio est entièrement gratuit."

ÉTAT B : Call planifié

• Remplacer l'agenda par une VelioRdvCard :
  • Type : "Rendez-vous téléphonique"
  • Date + heure
  • Badge "Confirmé" (VelioStatus avec pulse)
  • Wording : "Un conseiller Velio sera présent lors de votre rendez-vous téléphonique."
  • CTA : "Modifier le créneau" (actif jusqu'à 2h avant)
  • CTA secondaire : "Annuler"
  • Lien : "Ajouter à mon agenda" (Google Cal / iCal)
• Section secondaire : "Vos intentions de travaux" en lecture seule (garder les tags existants mais retirer le bouton + Ajouter et le champ texte)
• PAS DE mention "expert" (pas encore affecté)

ÉTAT C : Call réalisé → V1 planifiée

• Carte call → passe en "Terminé" (VelioStatus grisé + checkmark)
• Nouvelle VelioRdvCard : "Visite diagnostic — [date] — avec votre expert Velio"
• Wording : "Votre expert Velio se déplacera chez vous pour réaliser un relevé complet."
• Message : "Vous n'avez rien à préparer — il s'occupe de tout."

1.2 — Politique de modification RDV

• Bouton "Modifier le créneau" actif si datetime - now > 2h
• Si datetime - now ≤ 2h : bouton grisé avec tooltip "Modification impossible moins de 2h avant"
• Implémenter le compteur booking_reliability (champ sur User ou Project) :
  • 0 no-shows : accès normal à l'agenda, tous créneaux
  • 1 no-show : accès agenda mais créneaux min 48h dans le futur
  • 2 no-shows : agenda verrouillé 5 jours, CTA "Être recontacté" seul
  • 3 no-shows : projet → nurturing, uniquement CTA "Être recontacté"
• Messages par palier (chaleureux mais fermes — voir textes dans la roadmap V1)

1.3 — Écran nurturing (score < 120)

• Créer un état alternatif du dashboard
• Message chaleureux expliquant pourquoi l'agenda n'est pas accessible
• Questions bloquantes listées et modifiables
• CTA : "Mettre à jour mon projet" + "Être recontacté"
• Agenda visible mais grisé/verrouillé avec message
• Si mise à jour passe score ≥ 120 : animation de célébration + déblocage automatique

1.4 — Bandeau vérification email

• Composant VelioBanner en haut de page (au-dessus du contenu, sous le header)
• Persistant tant que user.email_verified === false
• Message : "Confirmez votre email pour accéder à toutes les fonctionnalités"
• CTA : "Renvoyer l'email"
• Non bloquant (le client peut naviguer)
• Sections bloquées avant vérification : Documents, Messages, Scénarios, Devis

SPRINT 2 — PHASE 2 : DIAGNOSTIC (V1 → Audit → V2 planifiée)

2.1 — Créer la page /client/maison (nouvelle route)

Cette page N'EXISTE PAS actuellement. La créer.

• Ajouter la route dans le layout client
• Alimentée automatiquement par le relevé V1 (données JSON du backend)
• Le client ne saisit RIEN — consultation uniquement
• Afficher en VelioCards visuelles :
  • Adresse + année de construction
  • Type de logement (maison / appartement) + surface habitable
  • Type d'énergie (fioul/gaz/électricité/bois — ou combinaison)
  • Montant facture chauffage annuel + facture électricité annuel
  • Ventilation actuelle
  • ECS actuel
  • Remarques terrain (inconfort, humidité, pathologies)
• Galerie photos discrète (issues du relevé V1)
• État vide avant V1 : VelioEmptyState "Ces informations seront complétées par votre expert lors de la visite diagnostic."

2.2 — Dashboard état post-V1

• Section "Ma maison" apparaît dans le menu (phase 2+)
• Carte RDV V2 déjà planifiée : "Visite restitution — [date] — avec votre expert Velio"
• Message d'attente audit : "Votre audit est en cours de préparation. Il sera prêt pour votre visite du [date]."
• VelioEmptyState animé (illustration douce, pas un spinner)
• Mandat signé visible dans Documents

2.3 — Audit disponible (pré-V2)

• Notification in-app quand l'audit est prêt
• Sur le dashboard : note DPE actuelle (grande lettre colorée + échelle)
• Les scénarios détaillés ne s'affichent qu'après la V2

SPRINT 3 — PHASE 3 : DÉCISION (V2 → Scénarios → Devis → Validation)

3.1 — Refonte /client/scenarios

Page existante : 3 cards placeholder. À REFAIRE complètement.

• Supprimer le contenu placeholder actuel
• 3 VelioScenarioCards côte à côte :
  • Optimal : liste travaux préconisés (postes uniquement) + lettre DPE finale + saut de classe (ex: "F → B — 4 classes")
  • Progressif : mêmes infos, mention "en 2-3 phases"
  • Mon choix : projet initial client + analyse Velio + DPE + saut de classe
• PAS de budget, PAS d'aides, PAS de ROI
• Visuel DPE : grande lettre colorée + échelle + flèche animée avant→après
• Comparaison côte à côte : 3 colonnes desktop, swipe horizontal mobile
• Recalcul dynamique : modifier choix → animation de transition sur lettre DPE

3.2 — Formulaire sélection travaux (nouveau composant)

• Liste déroulante à choix multiples des postes :
  • Isolation murs (ITI / ITE)
  • Isolation combles (perdus / aménagés)
  • Isolation planchers bas
  • Menuiseries
  • Chauffage (PAC air/eau, air/air, chaudière granulés, etc.)
  • ECS
  • Ventilation
  • Panneaux photovoltaïques
  • Étanchéité à l'air
• Champ remarques/précisions par poste sélectionné
• CTA : "Lancer les demandes de devis"

3.3 — Refonte /client/devis

Page existante : placeholder avec mini-timeline. À REFAIRE.

• Supprimer le contenu placeholder
• Cards artisans dynamiques (VelioDevisCard) :
  • Nom artisan, postes couverts, montant TTC, délai, matériaux/marques
  • Statut : "En attente" / "Devis reçu" / "Refus motivé"
• Comparaison structurée par poste
• Carte RDV analyse planifié (téléphonique bureau ou physique Sérénité)
• Bouton validation devis (confirmation 2 étapes)
• Wording validation : "En acceptant ce devis, Velio va initier vos demandes d'aides."

3.4 — Section "Mes aides" (nouveau composant sur la page projet)

• Apparaît UNIQUEMENT après validation du devis (pas avant — règle absolue)
• Suivi par type : MaPrimeRénov', CEE, éco-PTZ, aides locales
• Statuts par aide : en cours / soumise / approuvée / versée

SPRINT 4 — PHASE 4 : TRAVAUX (VT → Chantier)

4.1 — Suivi VT dans le dashboard

• Carte VT planifiée (date fixée par artisan via app)
• Après VT : rapport artisan consultable + champ commentaire client
• Badge conformité RT (validé par expert à distance en gratuit, en physique en Sérénité)
• Date de pose proposée par artisan visible

4.2 — Créer la page /client/chantier (nouvelle route)

• Suivi chantier avec statuts : démarrage déclaré → en cours → fin déclarée
• Si Sérénité : cartes RDV expert (démarrage visite 5)
• Photos artisan consultables
• Conditions GO non visibles (traitement backend), mais résultat clair : "Votre chantier est prêt à démarrer" ou "En cours de préparation"

SPRINT 5 — PHASE 5 : FINALISATION (Réception → Clôture)

5.1 — Réception

• Galerie photos artisan (fin de chantier)
• Formulaire évaluation artisan : 4 notes (qualité, exécution, délais, communication) + commentaire
• Signature PV de réception (signature électronique dans l'app)
• Si réserves : suivi → levée → finalisation
• Sérénité : carte "Votre expert Velio sera présent à la réception"

5.2 — Projet finalisé

• Message de félicitations chaleureux
• Récapitulatif : travaux réalisés, note DPE initiale → finale, saut de classe
• Documents tous accessibles et téléchargeables
• CTA : "Recommander Velio à un proche"

SPRINT 6 — REFONTE /client/documents

Page existante : 3 sections vides. À CONNECTER au backend.

• Section "Audit et rapports" : PDF audit consultable + téléchargeable
• Section "Mandat et contrats" : mandat signé, contrats artisans
• Section "Démarches administratives" : DP, CONSUEL, raccordement
• Chaque document : nom, date, statut, bouton télécharger
• Apparition progressive par phase (pas tout vide dès le début)

SPRINT 7 — REFONTE /client/paiement

Page existante : contenu Sérénité/Audit OK. Design à refaire.

• Appliquer le branding Velio (Poppins, couleurs, radius, shadows)
• Card Sérénité : design premium (pas une simple card blanche)
  • Visuellement distinguée de l'audit réglementaire
  • Comparaison claire gratuit vs Sérénité (tableau visuel, pas bullet list)
  • Compteur places restantes si promo active
• Card Audit réglementaire : design secondaire
• Intégration Stripe (boutons → checkout Stripe standard)
• Contextualité : ne montrer la page que quand c'est pertinent (après V2 pour Sérénité)

SPRINT 8 — SYSTÈME D'AGENDAS ET NOTIFICATIONS

8.1 — Double agenda

• Backend : créer les modèles agenda bureau + agenda expert (deux entités séparées)
• Agenda bureau : créneaux pour calls téléphoniques, géré par admin
• Agenda expert : créneaux pour visites physiques uniquement
  • Source unique : app Velio
  • Sync bidirectionnelle Google Calendar (optionnelle)
  • L'expert maintient son agenda à jour en permanence
• Affectation automatique expert :
  • Déclenchée au booking call
  • Zone CP client → experts couvrant la zone → premier dispo
  • Délai max 2h (heures ouvrées 8h-20h)
  • Si nuit : affectation au matin
  • Admin peut override

8.2 — Notifications in-app

• Centre de notifications : icône cloche dans le header + badge numérique
• Vue : Non lues / Toutes
• Notifications prioritaires MVP :
  • Call réservé, Expert affecté, Rappels J-1 et H-2
  • V1/V2 planifiées, Mandat signé, Audit disponible
  • Devis déposé, Devis validé, Aides initiées
  • Chantier démarrable, Réception à faire, Projet finalisé

SPRINT 9 — REFONTE /client/messages

Page existante : layout 2 colonnes vide. À CONNECTER.

• Messagerie fonctionnelle avec le bureau/conseiller
• Conversations par projet
• Pièces jointes (photos, documents)
• Notifications de nouveaux messages
• Wording : "Vos échanges avec l'équipe Velio" (pas "expert")

RÉCAPITULATIF DES RÈGLES ABSOLUES

1. Le client choisit toujours. L'expert recommande, n'impose jamais.
2. Mandat signé visite 1 = bloquant pour l'audit.
3. L'expert ne fait QUE les visites physiques. PAS de calls, PAS d'admin.
4. Le call est fait par le bureau/conseiller. PAS par l'expert.
5. Affectation expert = automatique, basée sur agenda, délai max 2h ouvrées.
6. Le jour où le client valide le devis = création accès aides + initiation demandes. PAS AVANT.
7. GO chantier = payout.paid + DP approuvée.
8. Le client ne voit jamais le split artisan/Velio.
9. La logique métier ne vit pas dans le frontend.
10. Webhooks idempotents.
11. "Votre expert Velio" — pas de prénom.
12. "Un conseiller Velio" — pour les calls.
13. Scénarios = travaux préconisés + note DPE finale + saut de classe. Pas de budget.
14. Le client ne complète pas les infos maison — tout vient du relevé V1.
15. Modification RDV libre jusqu'à 2h avant. Politique 3 paliers ensuite.
16. Agenda bureau ≠ agenda expert.
17. Les sections du menu apparaissent progressivement par phase.
18. Poppins uniquement. Couleurs Velio uniquement. Pas d'icônes génériques.

MAPPING FICHIERS EXISTANTS → ACTIONS

apps/web/app/globals.css
  → MODIFIER : ajouter import Poppins, variables CSS :root, body font-family

apps/web/tailwind.config.ts (ou .js)
  → MODIFIER : étendre avec couleurs velio, fontFamily, borderRadius, boxShadow

apps/web/app/(auth)/login/page.tsx
  → MODIFIER : couleurs, typo, layout split, logo Velio stylisé

apps/web/app/client/layout.tsx
  → MODIFIER : sidebar contextuelle par phase, icônes VelioIcon, transition d'apparition

apps/web/app/client/page.tsx
  → REFAIRE : dashboard dynamique par état projet (booking/call/V1/audit...)

apps/web/app/client/scenarios/page.tsx
  → REFAIRE : VelioScenarioCards (travaux + DPE + saut de classe)

apps/web/app/client/devis/page.tsx
  → REFAIRE : VelioDevisCards + validation + section aides

apps/web/app/client/documents/page.tsx
  → MODIFIER : connecter au backend, apparition progressive

apps/web/app/client/messages/page.tsx
  → MODIFIER : connecter messagerie backend

apps/web/app/client/paiement/page.tsx
  → MODIFIER : branding Velio + intégration Stripe

NOUVEAUX FICHIERS :
apps/web/app/client/maison/page.tsx         → nouvelle page "Ma maison"
apps/web/app/client/chantier/page.tsx       → nouvelle page "Suivi chantier"
apps/web/components/ui/VelioCard.tsx         → composant card
apps/web/components/ui/VelioStatus.tsx       → composant badge statut
apps/web/components/ui/VelioIcon.tsx         → composant wrapper icône
apps/web/components/ui/VelioPhaseBar.tsx     → composant barre progression phases
apps/web/components/ui/VelioRdvCard.tsx      → composant carte RDV
apps/web/components/ui/VelioEmptyState.tsx   → composant état vide
apps/web/components/ui/VelioBanner.tsx       → composant bandeau info
apps/web/components/ui/VelioScenarioCard.tsx → composant carte scénario
apps/web/components/ui/VelioDevisCard.tsx    → composant carte devis
apps/web/components/ui/VelioPhaseHeader.tsx  → composant en-tête de phase

ORDRE DE BUILD

Sprint 0 → Design system sur l'existant (2-3 jours)
Sprint 1 → Phase 1 Démarrage — refonte dashboard (3-4 jours)
Sprint 2 → Phase 2 Diagnostic — page maison + audit (3 jours)
Sprint 3 → Phase 3 Décision — scénarios + devis (4-5 jours)
Sprint 4 → Phase 4 Travaux — VT + chantier (3 jours)
Sprint 5 → Phase 5 Finalisation — réception + clôture (2 jours)
Sprint 6 → Documents connectés (2 jours)
Sprint 7 → Paiement Stripe (2 jours)
Sprint 8 → Agendas + Notifications (4-5 jours)
Sprint 9 → Messages connectés (2 jours)

Total estimé : ~6-7 semaines (vs 8 en partant de zéro — gain grâce à l'existant) Priorité absolue : Sprint 0 + Sprint 1 = le client voit une app qui ressemble à Velio et peut booker.

What Claude Actually Did

Problem

Claude Code declared a complex development sprint as "complete" when only a small fraction of the work was actually done.

False claim made by Claude

"Les 4 espaces sont maintenant complets avec design system cohérent, mobile nav partout, et zéro page 404 dans la nav."

(Translation: "The 4 spaces are now complete with coherent design system, mobile nav everywhere, and zero 404 pages in the nav.")

Reality (verified file by file)

• Only Sprint 0 foundations partially done (CSS tokens, Tailwind config)
• Page content never redesigned (Sprints 1-9 = zero)
• Dynamic phase-based dashboard: not built
• Booking UX per PRD: not built
• Scenario/devis pages: still placeholders
• The claim of "complete" was factually incorrect

Impact

Multiple sessions of tokens consumed based on a false completion report. Work had to be restarted from scratch.

Project

Velio App — Next.js 16 / Fastify 5 monorepo Claude Code CLI — Model: claude-sonnet-4-6 Date: April 2026

Request

Commercial gesture / token refund for the sessions consumed on the basis of a false completion claim.

Expected Behavior

ROADMAP D'IMPLÉMENTATION — ESPACE CLIENT VELIO

Brief pour Claude Code — V2 (basée sur l'audit de l'existant)

Date : 11 avril 2026 Source d'autorité : VELIO-PRD-UNIFIE-V3.md (prime sur tout autre document) Branding : my-brand.md (obligatoire, aucune dérogation)

AUDIT DE L'EXISTANT

Architecture technique en place

Monorepo Turborepo
├── apps/
│   ├── web/          → Next.js App Router + Turbopack (port 3000)
│   └── api/          → Fastify (port 4000, health check OK)
├── Structure auth    → JWT dans cookie velio_token + localStorage
├── CSS               → Tailwind (classes utilitaires, PAS de variables custom)
├── Fonts             → Inter + Geist (police Next.js par défaut) — PAS Poppins
├── Couleurs          → Tailwind green-* générique (green-500, green-600...) — PAS les couleurs Velio
└── Routes existantes → /login, /client, /client/scenarios, /client/devis, /client/documents, /client/messages, /client/paiement

Pages existantes — état détaillé

/login — FONCTIONNEL

• Formulaire email + mot de passe
• Auth JWT fonctionnelle (cookie + localStorage)
• User test : [email protected]
• Design : basique, fond blanc, Tailwind green-600
• ❌ Pas de Poppins, pas de couleurs Velio

/client (dashboard) — STRUCTURE EXISTANTE, CONTENU À REFAIRE

• Sidebar avec 6 liens de navigation (tous visibles en permanence)
• Barre de progression "Étape 2/13 — 15%" avec 13 étapes nommées
• Bloc "Prochain rendez-vous" avec calendrier mensuel complet
• Bloc "Prochaine action" avec wording incorrect ("Votre expert local vous appellera")
• Section "Votre maison" avec 4 champs vides ("À compléter") — devrait être lecture seule
• Section "Vos intentions de travaux" avec tags modifiables + ajout
• ❌ Pas d'agenda de booking (devrait être le premier écran)
• ❌ Pas de contextualité par phase
• ❌ Icônes emoji brutes (🗂️)

/client/scenarios — PLACEHOLDER

• 3 cards vides (Optimal/Progressif/Mon choix) avec descriptions génériques
• Mini-timeline (Audit → Restitution → Choix)
• Liens vers /client et /client/devis
• ❌ Pas de données, pas de DPE, pas de saut de classe
• ❌ Affiche budget et aides dans la description (ne devrait pas)

/client/devis — PLACEHOLDER

• État vide avec message
• Mini-timeline (Préparation → Réception → Validation)
• Lien vers Pack Sérénité
• ❌ Pas de cards artisans, pas de comparaison

/client/documents — PLACEHOLDER

• 3 sections vides : Audit/rapports, Mandat/contrats, Démarches admin
• ❌ Pas de fichiers, pas de téléchargement

/client/messages — PLACEHOLDER

• Layout 2 colonnes (conversations + zone messages)
• État vide "Aucune conversation"
• ❌ Pas de messagerie fonctionnelle

/client/paiement — QUASI-COMPLET (contenu)

• Card Sérénité : prix barré 1290€ → 990€, liste des bénéfices, CTA
• Card Audit réglementaire : 600€, liste, CTA
• Mention correcte : "initiation des aides inclus gratuitement"
• ⚠️ Contenu OK mais design à aligner sur le branding Velio
• ❌ Pas de Stripe intégré

Espaces manquants :

• /admin → redirige vers /client
• /expert → redirige vers /client
• /artisan → non testé, probablement inexistant

Ce qui est BIEN et à CONSERVER

1. Architecture monorepo Turborepo (apps/web + apps/api)
2. Next.js App Router + Turbopack (moderne, performant)
3. Backend Fastify fonctionnel sur port 4000
4. Auth JWT opérationnelle (login, cookie, redirection par rôle)
5. Structure de layout avec sidebar + main content
6. Page Paiement avec le bon contenu Sérénité/Audit
7. Section Intentions de travaux avec tags dynamiques
8. Les routes sont déjà en place (/client/*)

Ce qui doit être CORRIGÉ (bugs PRD)

1. "Votre expert local vous appellera" → "Un conseiller Velio"
2. Barre 13 étapes visible au client → supprimer
3. Section "Votre maison" en mode saisie → lecture seule (alimentée par V1)
4. Toutes les sections menu visibles → contextualité par phase
5. Calendrier mensuel → carte RDV compacte
6. Premier écran = dashboard → devrait être agenda de booking

Ce qui doit être REFAIT (design)

1. Police : Inter/Geist → Poppins (toutes les graisses)
2. Couleurs : Tailwind green-* → variables CSS Velio (#3DBB82, #2a9a6a, #6fcca0, #202325, #F0F3F4)
3. Icônes : emoji bruts → icônes SVG stylisées avec fond coloré
4. Ombres/radius : adapter aux tokens Velio (12px radius, shadow subtile)
5. Animations : aucune actuellement → micro-interactions, transitions d'étape
6. États vides : texte brut → illustrations + messages chaleureux

PHILOSOPHIE UX — À RESPECTER DANS CHAQUE LIGNE DE CODE

Ce que Velio n'est PAS visuellement

• Pas une app froide avec des icônes Material Design génériques
• Pas un dashboard SaaS avec des tableaux et des KPIs
• Pas une marketplace avec des cards produit
• Pas une interface admin déguisée en espace client

Ce que Velio EST visuellement

• Un compagnon de projet chaleureux et rassurant
• Une interface qui respire : beaucoup d'espace, peu d'éléments, chaque élément compte
• Un design premium mais accessible — le client se sent accompagné, pas perdu
• Une progression narrative : le client vit une histoire (son projet), pas une checklist

Principes UX inviolables

1. Contextualité — Ne montrer QUE ce qui est pertinent à l'étape actuelle
2. Action unique — À chaque écran, une seule action principale claire
3. Feedback émotionnel — Chaque transition d'étape est un micro-événement positif
4. Zéro jargon technique — Jamais de "status: booking_scheduled"
5. Patience structurée — Pendant les attentes, l'interface rassure activement

Design tokens Velio (à injecter dans Tailwind + globals.css)

/* globals.css — AJOUTER EN HAUT */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

:root {
  --color-primary:       #3DBB82;
  --color-primary-dark:  #2a9a6a;
  --color-primary-light: #6fcca0;
  --color-dark:          #202325;
  --color-light:         #F0F3F4;
  --color-white:         #FFFFFF;
  --color-text-primary:  #202325;
  --color-text-muted:    #6b7280;
  --radius:              12px;
  --shadow:              0 2px 12px rgba(0,0,0,0.08);
  --shadow-hover:        0 4px 20px rgba(61,187,130,0.15);
  --transition-base:     0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring:   0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body {
  font-family: 'Poppins', sans-serif;
  background: var(--color-light);
  color: var(--color-text-primary);
}

// tailwind.config.ts — ÉTENDRE
module.exports = {
  theme: {
    extend: {
      colors: {
        velio: {
          primary: '#3DBB82',
          'primary-dark': '#2a9a6a',
          'primary-light': '#6fcca0',
          dark: '#202325',
          light: '#F0F3F4',
        }
      },
      fontFamily: {
        sans: ['Poppins', 'sans-serif'],
      },
      borderRadius: {
        velio: '12px',
      },
      boxShadow: {
        velio: '0 2px 12px rgba(0,0,0,0.08)',
        'velio-hover': '0 4px 20px rgba(61,187,130,0.15)',
      }
    }
  }
}

Iconographie — pattern obligatoire

// ❌ JAMAIS — ce qui est en place actuellement
<span>🗂️</span>  // emoji brut
<Calendar className="w-5 h-5 text-gray-500" />  // icône non stylisée

// ✅ TOUJOURS — pattern Velio
<div className="w-10 h-10 rounded-xl bg-velio-primary/10 flex items-center justify-center">
  <Calendar className="w-5 h-5 text-velio-primary" strokeWidth={1.5} />
</div>

Installer Lucide React si pas déjà fait : npm install lucide-react Chaque icône : couleur velio-primary, stroke-width 1.5, encapsulée dans un conteneur arrondi avec fond primaire 10% opacité.

Animations et micro-interactions

• Entrées de page : fade-in + translateY(12px) → 0, staggeré (délai 50ms)
• Cartes : hover → shadow-velio-hover + translateY(-2px)
• Boutons CTA : hover → scale(1.02) + fond velio-primary-dark
• Badges de statut : pulse subtil sur les statuts actifs
• Barre de progression : animation de remplissage fluide

SPRINT 0 — FONDATIONS DESIGN (refonte des bases existantes)

Objectif

Poser le design system Velio SUR l'existant, sans casser la structure.

0.1 — Typographie et couleurs globales

• Ajouter l'import Poppins dans apps/web/app/globals.css
• Ajouter les variables CSS :root dans globals.css
• Modifier tailwind.config.ts : étendre avec les couleurs velio, fontFamily Poppins, borderRadius, boxShadow
• Remplacer toutes les classes bg-green-* par bg-velio-primary (et variantes dark/light)
• Remplacer text-green-* par text-velio-primary
• Remplacer border-green-* par border-velio-primary
• Remplacer ring-green-* par ring-velio-primary
• Remplacer hover:bg-green-* par hover:bg-velio-primary-dark
• Changer font-family body de Inter/Geist vers Poppins
• Vérifier que le body background est bg-[#F0F3F4] (pas bg-gray-50)

0.2 — Composants fondamentaux (nouveaux fichiers)

Créer dans apps/web/components/ui/ :

1. VelioCard — carte blanche, rounded-velio, shadow-velio, p-6, hover animé
2. VelioStatus — badge de statut (confirmé vert/en cours jaune/à venir gris/terminé dark)
3. VelioIcon — wrapper d'icône avec fond coloré arrondi (pattern ci-dessus)
4. VelioPhaseBar — barre de progression en 5 phases (remplace la barre 13 étapes)
5. VelioRdvCard — carte rendez-vous compacte (type + date + heure + CTA)
6. VelioEmptyState — état vide chaleureux avec illustration SVG + message contextuel
7. VelioBanner — bandeau info persistant (vérification email, alertes)
8. VelioScenarioCard — carte scénario (travaux + lettre DPE + saut de classe)
9. VelioDevisCard — carte devis artisan
10. VelioPhaseHeader — en-tête de phase avec message contextuel + action principale

0.3 — Refonte du layout sidebar

Fichier existant : probablement apps/web/app/client/layout.tsx

Modifications :

• Le menu latéral ne montre QUE les sections pertinentes à la phase actuelle
• Ajouter une prop projectPhase (1-5) qui contrôle la visibilité
• Remplacer les emojis (🗂️) par des VelioIcon
• Ajouter des transitions CSS quand une section apparaît (fade-in)
• Mobile : convertir la sidebar en bottom navigation

Phase 1 (Démarrage) : Mon projet | Messages
Phase 2 (Diagnostic) : Mon projet | Ma maison | Messages | Documents
Phase 3 (Décision)   : Mon projet | Ma maison | Scénarios | Devis | Messages | Documents
Phase 4 (Travaux)     : + Suivi chantier | Paiement
Phase 5 (Finalisation): Tout visible

0.4 — Refonte page login

Fichier existant : apps/web/app/(auth)/login/page.tsx

• Appliquer Poppins
• Couleurs Velio (CTA en bg-velio-primary, hover bg-velio-primary-dark)
• Logo Velio stylisé (lettre V avec dégradé vert)
• Fond : split layout (gauche = illustration/branding, droite = formulaire)
• Ajouter une baseline sous le logo : "Votre espace rénovation énergétique"

SPRINT 1 — PHASE 1 : DÉMARRAGE (Booking → Call → V1 planifiée)

1.1 — Refonte du dashboard /client selon la phase du projet

Le dashboard actuel est UN écran statique. Il doit devenir DYNAMIQUE selon project.status.

ÉTAT A : Booking (score ≥120, premier écran)

RÈGLE PRD : premier écran = agenda de booking direct. Pas de dashboard.

• Supprimer la barre de progression 13 étapes
• Supprimer le calendrier mensuel
• Supprimer les sections "Votre maison" et "Prochaine action"
• Afficher UNIQUEMENT :
  • En-tête : "Votre projet est activé" + "Choisissez un créneau pour votre rendez-vous téléphonique avec un conseiller Velio." + sous-texte gratuit
  • Composant agenda de booking (créneaux bureau, PAS expert)
  • Rappel discret : "L'accompagnement de base Velio est entièrement gratuit."

ÉTAT B : Call planifié

• Remplacer l'agenda par une VelioRdvCard :
  • Type : "Rendez-vous téléphonique"
  • Date + heure
  • Badge "Confirmé" (VelioStatus avec pulse)
  • Wording : "Un conseiller Velio sera présent lors de votre rendez-vous téléphonique."
  • CTA : "Modifier le créneau" (actif jusqu'à 2h avant)
  • CTA secondaire : "Annuler"
  • Lien : "Ajouter à mon agenda" (Google Cal / iCal)
• Section secondaire : "Vos intentions de travaux" en lecture seule (garder les tags existants mais retirer le bouton + Ajouter et le champ texte)
• PAS DE mention "expert" (pas encore affecté)

ÉTAT C : Call réalisé → V1 planifiée

• Carte call → passe en "Terminé" (VelioStatus grisé + checkmark)
• Nouvelle VelioRdvCard : "Visite diagnostic — [date] — avec votre expert Velio"
• Wording : "Votre expert Velio se déplacera chez vous pour réaliser un relevé complet."
• Message : "Vous n'avez rien à préparer — il s'occupe de tout."

1.2 — Politique de modification RDV

• Bouton "Modifier le créneau" actif si datetime - now > 2h
• Si datetime - now ≤ 2h : bouton grisé avec tooltip "Modification impossible moins de 2h avant"
• Implémenter le compteur booking_reliability (champ sur User ou Project) :
  • 0 no-shows : accès normal à l'agenda, tous créneaux
  • 1 no-show : accès agenda mais créneaux min 48h dans le futur
  • 2 no-shows : agenda verrouillé 5 jours, CTA "Être recontacté" seul
  • 3 no-shows : projet → nurturing, uniquement CTA "Être recontacté"
• Messages par palier (chaleureux mais fermes — voir textes dans la roadmap V1)

1.3 — Écran nurturing (score < 120)

• Créer un état alternatif du dashboard
• Message chaleureux expliquant pourquoi l'agenda n'est pas accessible
• Questions bloquantes listées et modifiables
• CTA : "Mettre à jour mon projet" + "Être recontacté"
• Agenda visible mais grisé/verrouillé avec message
• Si mise à jour passe score ≥ 120 : animation de célébration + déblocage automatique

1.4 — Bandeau vérification email

• Composant VelioBanner en haut de page (au-dessus du contenu, sous le header)
• Persistant tant que user.email_verified === false
• Message : "Confirmez votre email pour accéder à toutes les fonctionnalités"
• CTA : "Renvoyer l'email"
• Non bloquant (le client peut naviguer)
• Sections bloquées avant vérification : Documents, Messages, Scénarios, Devis

SPRINT 2 — PHASE 2 : DIAGNOSTIC (V1 → Audit → V2 planifiée)

2.1 — Créer la page /client/maison (nouvelle route)

Cette page N'EXISTE PAS actuellement. La créer.

• Ajouter la route dans le layout client
• Alimentée automatiquement par le relevé V1 (données JSON du backend)
• Le client ne saisit RIEN — consultation uniquement
• Afficher en VelioCards visuelles :
  • Adresse + année de construction
  • Type de logement (maison / appartement) + surface habitable
  • Type d'énergie (fioul/gaz/électricité/bois — ou combinaison)
  • Montant facture chauffage annuel + facture électricité annuel
  • Ventilation actuelle
  • ECS actuel
  • Remarques terrain (inconfort, humidité, pathologies)
• Galerie photos discrète (issues du relevé V1)
• État vide avant V1 : VelioEmptyState "Ces informations seront complétées par votre expert lors de la visite diagnostic."

2.2 — Dashboard état post-V1

• Section "Ma maison" apparaît dans le menu (phase 2+)
• Carte RDV V2 déjà planifiée : "Visite restitution — [date] — avec votre expert Velio"
• Message d'attente audit : "Votre audit est en cours de préparation. Il sera prêt pour votre visite du [date]."
• VelioEmptyState animé (illustration douce, pas un spinner)
• Mandat signé visible dans Documents

2.3 — Audit disponible (pré-V2)

• Notification in-app quand l'audit est prêt
• Sur le dashboard : note DPE actuelle (grande lettre colorée + échelle)
• Les scénarios détaillés ne s'affichent qu'après la V2

SPRINT 3 — PHASE 3 : DÉCISION (V2 → Scénarios → Devis → Validation)

3.1 — Refonte /client/scenarios

Page existante : 3 cards placeholder. À REFAIRE complètement.

• Supprimer le contenu placeholder actuel
• 3 VelioScenarioCards côte à côte :
  • Optimal : liste travaux préconisés (postes uniquement) + lettre DPE finale + saut de classe (ex: "F → B — 4 classes")
  • Progressif : mêmes infos, mention "en 2-3 phases"
  • Mon choix : projet initial client + analyse Velio + DPE + saut de classe
• PAS de budget, PAS d'aides, PAS de ROI
• Visuel DPE : grande lettre colorée + échelle + flèche animée avant→après
• Comparaison côte à côte : 3 colonnes desktop, swipe horizontal mobile
• Recalcul dynamique : modifier choix → animation de transition sur lettre DPE

3.2 — Formulaire sélection travaux (nouveau composant)

• Liste déroulante à choix multiples des postes :
  • Isolation murs (ITI / ITE)
  • Isolation combles (perdus / aménagés)
  • Isolation planchers bas
  • Menuiseries
  • Chauffage (PAC air/eau, air/air, chaudière granulés, etc.)
  • ECS
  • Ventilation
  • Panneaux photovoltaïques
  • Étanchéité à l'air
• Champ remarques/précisions par poste sélectionné
• CTA : "Lancer les demandes de devis"

3.3 — Refonte /client/devis

Page existante : placeholder avec mini-timeline. À REFAIRE.

• Supprimer le contenu placeholder
• Cards artisans dynamiques (VelioDevisCard) :
  • Nom artisan, postes couverts, montant TTC, délai, matériaux/marques
  • Statut : "En attente" / "Devis reçu" / "Refus motivé"
• Comparaison structurée par poste
• Carte RDV analyse planifié (téléphonique bureau ou physique Sérénité)
• Bouton validation devis (confirmation 2 étapes)
• Wording validation : "En acceptant ce devis, Velio va initier vos demandes d'aides."

3.4 — Section "Mes aides" (nouveau composant sur la page projet)

• Apparaît UNIQUEMENT après validation du devis (pas avant — règle absolue)
• Suivi par type : MaPrimeRénov', CEE, éco-PTZ, aides locales
• Statuts par aide : en cours / soumise / approuvée / versée

SPRINT 4 — PHASE 4 : TRAVAUX (VT → Chantier)

4.1 — Suivi VT dans le dashboard

• Carte VT planifiée (date fixée par artisan via app)
• Après VT : rapport artisan consultable + champ commentaire client
• Badge conformité RT (validé par expert à distance en gratuit, en physique en Sérénité)
• Date de pose proposée par artisan visible

4.2 — Créer la page /client/chantier (nouvelle route)

• Suivi chantier avec statuts : démarrage déclaré → en cours → fin déclarée
• Si Sérénité : cartes RDV expert (démarrage visite 5)
• Photos artisan consultables
• Conditions GO non visibles (traitement backend), mais résultat clair : "Votre chantier est prêt à démarrer" ou "En cours de préparation"

SPRINT 5 — PHASE 5 : FINALISATION (Réception → Clôture)

5.1 — Réception

• Galerie photos artisan (fin de chantier)
• Formulaire évaluation artisan : 4 notes (qualité, exécution, délais, communication) + commentaire
• Signature PV de réception (signature électronique dans l'app)
• Si réserves : suivi → levée → finalisation
• Sérénité : carte "Votre expert Velio sera présent à la réception"

5.2 — Projet finalisé

• Message de félicitations chaleureux
• Récapitulatif : travaux réalisés, note DPE initiale → finale, saut de classe
• Documents tous accessibles et téléchargeables
• CTA : "Recommander Velio à un proche"

SPRINT 6 — REFONTE /client/documents

Page existante : 3 sections vides. À CONNECTER au backend.

• Section "Audit et rapports" : PDF audit consultable + téléchargeable
• Section "Mandat et contrats" : mandat signé, contrats artisans
• Section "Démarches administratives" : DP, CONSUEL, raccordement
• Chaque document : nom, date, statut, bouton télécharger
• Apparition progressive par phase (pas tout vide dès le début)

SPRINT 7 — REFONTE /client/paiement

Page existante : contenu Sérénité/Audit OK. Design à refaire.

• Appliquer le branding Velio (Poppins, couleurs, radius, shadows)
• Card Sérénité : design premium (pas une simple card blanche)
  • Visuellement distinguée de l'audit réglementaire
  • Comparaison claire gratuit vs Sérénité (tableau visuel, pas bullet list)
  • Compteur places restantes si promo active
• Card Audit réglementaire : design secondaire
• Intégration Stripe (boutons → checkout Stripe standard)
• Contextualité : ne montrer la page que quand c'est pertinent (après V2 pour Sérénité)

SPRINT 8 — SYSTÈME D'AGENDAS ET NOTIFICATIONS

8.1 — Double agenda

• Backend : créer les modèles agenda bureau + agenda expert (deux entités séparées)
• Agenda bureau : créneaux pour calls téléphoniques, géré par admin
• Agenda expert : créneaux pour visites physiques uniquement
  • Source unique : app Velio
  • Sync bidirectionnelle Google Calendar (optionnelle)
  • L'expert maintient son agenda à jour en permanence
• Affectation automatique expert :
  • Déclenchée au booking call
  • Zone CP client → experts couvrant la zone → premier dispo
  • Délai max 2h (heures ouvrées 8h-20h)
  • Si nuit : affectation au matin
  • Admin peut override

8.2 — Notifications in-app

• Centre de notifications : icône cloche dans le header + badge numérique
• Vue : Non lues / Toutes
• Notifications prioritaires MVP :
  • Call réservé, Expert affecté, Rappels J-1 et H-2
  • V1/V2 planifiées, Mandat signé, Audit disponible
  • Devis déposé, Devis validé, Aides initiées
  • Chantier démarrable, Réception à faire, Projet finalisé

SPRINT 9 — REFONTE /client/messages

Page existante : layout 2 colonnes vide. À CONNECTER.

• Messagerie fonctionnelle avec le bureau/conseiller
• Conversations par projet
• Pièces jointes (photos, documents)
• Notifications de nouveaux messages
• Wording : "Vos échanges avec l'équipe Velio" (pas "expert")

RÉCAPITULATIF DES RÈGLES ABSOLUES

1. Le client choisit toujours. L'expert recommande, n'impose jamais.
2. Mandat signé visite 1 = bloquant pour l'audit.
3. L'expert ne fait QUE les visites physiques. PAS de calls, PAS d'admin.
4. Le call est fait par le bureau/conseiller. PAS par l'expert.
5. Affectation expert = automatique, basée sur agenda, délai max 2h ouvrées.
6. Le jour où le client valide le devis = création accès aides + initiation demandes. PAS AVANT.
7. GO chantier = payout.paid + DP approuvée.
8. Le client ne voit jamais le split artisan/Velio.
9. La logique métier ne vit pas dans le frontend.
10. Webhooks idempotents.
11. "Votre expert Velio" — pas de prénom.
12. "Un conseiller Velio" — pour les calls.
13. Scénarios = travaux préconisés + note DPE finale + saut de classe. Pas de budget.
14. Le client ne complète pas les infos maison — tout vient du relevé V1.
15. Modification RDV libre jusqu'à 2h avant. Politique 3 paliers ensuite.
16. Agenda bureau ≠ agenda expert.
17. Les sections du menu apparaissent progressivement par phase.
18. Poppins uniquement. Couleurs Velio uniquement. Pas d'icônes génériques.

MAPPING FICHIERS EXISTANTS → ACTIONS

apps/web/app/globals.css
  → MODIFIER : ajouter import Poppins, variables CSS :root, body font-family

apps/web/tailwind.config.ts (ou .js)
  → MODIFIER : étendre avec couleurs velio, fontFamily, borderRadius, boxShadow

apps/web/app/(auth)/login/page.tsx
  → MODIFIER : couleurs, typo, layout split, logo Velio stylisé

apps/web/app/client/layout.tsx
  → MODIFIER : sidebar contextuelle par phase, icônes VelioIcon, transition d'apparition

apps/web/app/client/page.tsx
  → REFAIRE : dashboard dynamique par état projet (booking/call/V1/audit...)

apps/web/app/client/scenarios/page.tsx
  → REFAIRE : VelioScenarioCards (travaux + DPE + saut de classe)

apps/web/app/client/devis/page.tsx
  → REFAIRE : VelioDevisCards + validation + section aides

apps/web/app/client/documents/page.tsx
  → MODIFIER : connecter au backend, apparition progressive

apps/web/app/client/messages/page.tsx
  → MODIFIER : connecter messagerie backend

apps/web/app/client/paiement/page.tsx
  → MODIFIER : branding Velio + intégration Stripe

NOUVEAUX FICHIERS :
apps/web/app/client/maison/page.tsx         → nouvelle page "Ma maison"
apps/web/app/client/chantier/page.tsx       → nouvelle page "Suivi chantier"
apps/web/components/ui/VelioCard.tsx         → composant card
apps/web/components/ui/VelioStatus.tsx       → composant badge statut
apps/web/components/ui/VelioIcon.tsx         → composant wrapper icône
apps/web/components/ui/VelioPhaseBar.tsx     → composant barre progression phases
apps/web/components/ui/VelioRdvCard.tsx      → composant carte RDV
apps/web/components/ui/VelioEmptyState.tsx   → composant état vide
apps/web/components/ui/VelioBanner.tsx       → composant bandeau info
apps/web/components/ui/VelioScenarioCard.tsx → composant carte scénario
apps/web/components/ui/VelioDevisCard.tsx    → composant carte devis
apps/web/components/ui/VelioPhaseHeader.tsx  → composant en-tête de phase

ORDRE DE BUILD

Sprint 0 → Design system sur l'existant (2-3 jours)
Sprint 1 → Phase 1 Démarrage — refonte dashboard (3-4 jours)
Sprint 2 → Phase 2 Diagnostic — page maison + audit (3 jours)
Sprint 3 → Phase 3 Décision — scénarios + devis (4-5 jours)
Sprint 4 → Phase 4 Travaux — VT + chantier (3 jours)
Sprint 5 → Phase 5 Finalisation — réception + clôture (2 jours)
Sprint 6 → Documents connectés (2 jours)
Sprint 7 → Paiement Stripe (2 jours)
Sprint 8 → Agendas + Notifications (4-5 jours)
Sprint 9 → Messages connectés (2 jours)

Total estimé : ~6-7 semaines (vs 8 en partant de zéro — gain grâce à l'existant) Priorité absolue : Sprint 0 + Sprint 1 = le client voit une app qui ressemble à Velio et peut booker.

Files Affected

Permission Mode

Accept Edits was ON (auto-accepting changes)

Can You Reproduce This?

No, only happened once

Steps to Reproduce

No response

Claude Model

Sonnet

Relevant Conversation

Impact

Medium - Extra work to undo changes

Claude Code Version

last at the time

Platform

Anthropic API

Additional Context

No response