Aller au contenu

Analyse designer Claude — Écarts FrontEnd à combler

Contexte

Analyse des fichiers du dossier PsycoEnLigne-N2 (Claude Designer) pour identifier ce qui est déjà en place dans le FrontEnd et ce qui manque. Les fichiers analysés sont les écrans JSX et le tokens.css (le sous-dossier uploads/ est exclu).

Fichiers designer : screen-auth, screen-patient, screen-praticien, screen-questionnaire, screen-visio, screen-billing, screen-notifications, screen-onboarding, screen-admin, primitives, tokens.css.

Contenu

✅ Déjà en place et conforme

Élément État
ThemeProvider.tsx + themes.ts Identiques entre designer et shared-kernel/theme/
Modules auth, patients, praticiens, rendez-vous, consultations, facturation, notifications Structures présentes dans modules/
Routes pour tous ces modules Définies dans routes/index.tsx

🔴 Modules entièrement manquants #frontend

1. Module questionnaires - Dossier modules/questionnaires inexistant - Aucune route /questionnaires, /questionnaires/nouveau, /questionnaires/:id - Aucun alias @questionnaires dans vite.config.ts - Le designer montre : Questionnaire Builder côté praticien (3 colonnes : palette de types, canvas, inspector) + Preview patient - 8 types de questions : short, long, single, multi, scale (Likert), slider, date, mood

2. Page visio - Aucune page dans modules/consultations pour la vidéo - Aucune route /consultations/:id/visio - Le designer montre : timer en cours, mute/cam, chat latéral, indicateur E2E chiffré, PiP patient

🟡 Tokens CSS manquants dans globals.css

globals.css utilise var(--shadow-*), var(--radius-*), var(--font-*) mais ne les définit pas. Le designer les fournit dans tokens.css. Manquent :

--shadow-sm / md / lg / xl / glow
--radius-sm / md / lg / xl / 2xl / full
--font-sans  : 'Plus Jakarta Sans', 'Inter', sans-serif
--font-display : 'Fraunces', 'Plus Jakarta Sans', serif
--font-mono  : 'JetBrains Mono', ui-monospace, monospace

Nécessite aussi l'import Google Fonts pour Plus Jakarta Sans et Fraunces.

🟡 DTOs incomplets

Module Champs manquants
praticiens badges[], bio, langues[], exp, matchScore — utilisés dans l'onboarding matchmaking
notifications Mapping QUESTIONNAIRE_ASSIGNE → catégorie questionnaire
facturation Affichage devise FCFA : n.toLocaleString('fr-FR') + ' F CFA'

Données mockées révélatrices dans les écrans

  • Monnaie : FCFA (Francs CFA) — ex: 18 000 F CFA, 22 000 F CFA
  • Pays : Bénin / Cotonou — cohérent avec pays: 'Bénin' dans le schema Prisma
  • Langues praticiens : FR, Fon, EN
  • Méthodes paiement : Mobile Money (MTN MoMo), Carte — cohérent avec MOBILE_MONEY dans MethodePaiement
  • Onboarding : 8 étapes (welcome → objectifs → préférences → dispo → match → sélection → créneau → confirmation)
  • Notifications : 5 catégories (rdv, questionnaire, facture, sécurité, système)

À faire

  • [x] Ajouter les tokens CSS manquants dans shared-kernel/styles/globals.css
  • [x] Créer modules/questionnaires complet (domain, DTOs, routes)
  • [x] Créer page visio dans modules/consultations/presentation/pages/VisioPage.tsx
  • [x] Ajouter alias @questionnaires dans vite.config.ts
  • [x] Ajouter routes /questionnaires/* et /consultations/:id/visio dans routes/index.tsx
  • [x] Compléter DTOs praticiens avec badges, bio, langues, exp, matchScore
  • [x] Vérifier mapping TypeNotification.QUESTIONNAIRE_ASSIGNE dans modules/notifications
  • [x] Vérifier affichage FCFA dans modules/facturation

Liens connexes

Résolu — 2026-04-29

Toutes les tâches listées ci-dessus ont été traitées lors des missions designer (28 avril 2026) :

Mission Phases
20260428_1556_tokens_tailwind_designer Phase 1 — tokens CSS, Tailwind, Google Fonts
20260428_1606_designer_enrichissement_modules Phase 2 — Avatar, FCFA, DTOs praticiens + notifications
20260428_2005_module_questionnaires Phase 3 — module questionnaires complet (Builder + Preview)
20260428_2100_page_visio Phase 4 — page Visio plein-écran (/consultations/:id/visio)

Ce qui reste hors périmètre de ce fichier → voir roadmap ecrans-manquants.md