### Preflight Checklist - [x] I have searched [existing issues](https://github.com/anthropics/claude-code/issues?q=is%3Aissue%20state%3Aopen%20label%3Amodel) for similar behavior reports - [x] 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 So

[MODEL] Claude falsely claimed task completion, causing wasted tokens

Resolved 💬 3 comments Opened Apr 12, 2026 by nb2608 Closed Apr 15, 2026

Preflight Checklist

[x] I have searched existing issues for similar behavior reports
[x] 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 : client.qualifie@test.fr
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

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

Ce qui doit être CORRIGÉ (bugs PRD)

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

Ce qui doit être REFAIT (design)

Police : Inter/Geist → Poppins (toutes les graisses)
Couleurs : Tailwind green-* → variables CSS Velio (#3DBB82, #2a9a6a, #6fcca0, #202325, #F0F3F4)
Icônes : emoji bruts → icônes SVG stylisées avec fond coloré
Ombres/radius : adapter aux tokens Velio (12px radius, shadow subtile)
Animations : aucune actuellement → micro-interactions, transitions d'étape
É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

Contextualité — Ne montrer QUE ce qui est pertinent à l'étape actuelle
Action unique — À chaque écran, une seule action principale claire
Feedback émotionnel — Chaque transition d'étape est un micro-événement positif
Zéro jargon technique — Jamais de "status: booking_scheduled"
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/ :

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

Le client choisit toujours. L'expert recommande, n'impose jamais.
Mandat signé visite 1 = bloquant pour l'audit.
L'expert ne fait QUE les visites physiques. PAS de calls, PAS d'admin.
Le call est fait par le bureau/conseiller. PAS par l'expert.
Affectation expert = automatique, basée sur agenda, délai max 2h ouvrées.
Le jour où le client valide le devis = création accès aides + initiation demandes. PAS AVANT.
GO chantier = payout.paid + DP approuvée.
Le client ne voit jamais le split artisan/Velio.
La logique métier ne vit pas dans le frontend.
Webhooks idempotents.
"Votre expert Velio" — pas de prénom.
"Un conseiller Velio" — pour les calls.
Scénarios = travaux préconisés + note DPE finale + saut de classe. Pas de budget.
Le client ne complète pas les infos maison — tout vient du relevé V1.
Modification RDV libre jusqu'à 2h avant. Politique 3 paliers ensuite.
Agenda bureau ≠ agenda expert.
Les sections du menu apparaissent progressivement par phase.
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 : client.qualifie@test.fr
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

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

Ce qui doit être CORRIGÉ (bugs PRD)

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

Ce qui doit être REFAIT (design)

Police : Inter/Geist → Poppins (toutes les graisses)
Couleurs : Tailwind green-* → variables CSS Velio (#3DBB82, #2a9a6a, #6fcca0, #202325, #F0F3F4)
Icônes : emoji bruts → icônes SVG stylisées avec fond coloré
Ombres/radius : adapter aux tokens Velio (12px radius, shadow subtile)
Animations : aucune actuellement → micro-interactions, transitions d'étape
É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

Contextualité — Ne montrer QUE ce qui est pertinent à l'étape actuelle
Action unique — À chaque écran, une seule action principale claire
Feedback émotionnel — Chaque transition d'étape est un micro-événement positif
Zéro jargon technique — Jamais de "status: booking_scheduled"
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/ :

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

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

View original on GitHub ↗

This issue has 3 comments on GitHub. Read the full discussion on GitHub ↗

[MODEL] Claude falsely claimed task completion, causing wasted tokens

Preflight Checklist

Type of Behavior Issue

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)

AUDIT DE L'EXISTANT

Architecture technique en place

Pages existantes — état détaillé

Ce qui est BIEN et à CONSERVER

Ce qui doit être CORRIGÉ (bugs PRD)

Ce qui doit être REFAIT (design)

PHILOSOPHIE UX — À RESPECTER DANS CHAQUE LIGNE DE CODE

Ce que Velio n'est PAS visuellement

Ce que Velio EST visuellement

Principes UX inviolables

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

Iconographie — pattern obligatoire

Animations et micro-interactions

SPRINT 0 — FONDATIONS DESIGN (refonte des bases existantes)

Objectif

0.1 — Typographie et couleurs globales

0.2 — Composants fondamentaux (nouveaux fichiers)

0.3 — Refonte du layout sidebar

0.4 — Refonte page login

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

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

1.2 — Politique de modification RDV

1.3 — Écran nurturing (score < 120)

1.4 — Bandeau vérification email

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

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

2.2 — Dashboard état post-V1

2.3 — Audit disponible (pré-V2)

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

3.1 — Refonte /client/scenarios

3.2 — Formulaire sélection travaux (nouveau composant)

3.3 — Refonte /client/devis

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

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

4.1 — Suivi VT dans le dashboard

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

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

5.1 — Réception

5.2 — Projet finalisé

SPRINT 6 — REFONTE /client/documents

SPRINT 7 — REFONTE /client/paiement

SPRINT 8 — SYSTÈME D'AGENDAS ET NOTIFICATIONS

8.1 — Double agenda

8.2 — Notifications in-app

SPRINT 9 — REFONTE /client/messages

RÉCAPITULATIF DES RÈGLES ABSOLUES

MAPPING FICHIERS EXISTANTS → ACTIONS

ORDRE DE BUILD

What Claude Actually Did

Problem

False claim made by Claude

Reality (verified file by file)

Impact

Project

Request

Expected Behavior

ROADMAP D'IMPLÉMENTATION — ESPACE CLIENT VELIO

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

AUDIT DE L'EXISTANT

Architecture technique en place

Pages existantes — état détaillé

Ce qui est BIEN et à CONSERVER

Ce qui doit être CORRIGÉ (bugs PRD)

Ce qui doit être REFAIT (design)

PHILOSOPHIE UX — À RESPECTER DANS CHAQUE LIGNE DE CODE

Ce que Velio n'est PAS visuellement

Ce que Velio EST visuellement

Principes UX inviolables

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

Iconographie — pattern obligatoire

Animations et micro-interactions

SPRINT 0 — FONDATIONS DESIGN (refonte des bases existantes)

Objectif

0.1 — Typographie et couleurs globales

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

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

3.1 — Refonte `/client/scenarios`

3.3 — Refonte `/client/devis`

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

SPRINT 6 — REFONTE `/client/documents`

SPRINT 7 — REFONTE `/client/paiement`

SPRINT 9 — REFONTE `/client/messages`

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

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

3.1 — Refonte `/client/scenarios`

3.3 — Refonte `/client/devis`

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

SPRINT 6 — REFONTE `/client/documents`

SPRINT 7 — REFONTE `/client/paiement`

SPRINT 9 — REFONTE `/client/messages`