Design System — Professor+

Catalogue de tous les composants et tokens. À valider avant de construire les 12 pages réelles.

🎨 Palette principale

Tokens HSL définis dans tailwind.config.ts + globals.css

Primary

#1F3A67

219 54% 26%

Accent

#14B8A6

168 80% 40%

Background

#F7F9FA

210 20% 98%

Foreground

#0F1B2D

222 47% 11%

Card

#FFFFFF

0 0% 100%

Secondary

#EEF1F4

210 18% 95%

Muted FG

#697080

215 16% 47%

Border

#DDE3EC

214 20% 90%

Success

#29C76F

142 71% 45%

Warning

#F59E0B

38 92% 50%

Info

#0EA5E9

199 89% 48%

Destructive

#F35454

0 84% 60%

Sidebar bg

#1A1F2E

225 25% 14%

Sidebar accent

#282E3F

225 20% 20%

🏷️ Couleurs catégorielles

Utilisées pour les badges et icônes contextuels

Émeraude

#10B981

Payé, connecté

Ambre

#F59E0B

Retard, warning

Bleu

#3B82F6

Extraction

Violet

#8B5CF6

Factures

Cyan

#06B6D4

Emails

Orange

#F97316

Rappels

Terminal

#0D1117

Logs background

📊 Stats Cards

Composant principal du dashboard. 11 tons disponibles.

Professeurs

10 TutorBird + 2 Notion

Familles

Mois en cours

À facturer

3 658,00EUR+6 108,00CHF+1 322,00AED

≈ 10 595 € brut

Net : 5 154 €

12.4%

Net EUR

5 154 €

CA 10 595 € − Profs 5 441 €

Extractions

Factures

Emails envoyés

Rappels

💱 Multi-devise & taux FX

Cas critique A du spec — calcul leçon par leçon

MultiCurrencyTotal

Affichage des sommes en plusieurs devises

Taille small

1 037,00EUR+1 322,00AED

Taille medium

3 658,32EUR+6 445,00CHF

Taille large

3 658,32EUR+6 445,00CHF+1 321,80AED

FXRateBadge

Source de taux avec fallback chain

CHF→EUR = 1.0712·Frankfurter

USD→EUR = 0.9234·ECB

AED→USD = 3.6725·fallback

🔘 Boutons & Badges

Boutons

Badges sémantiques

Default

Secondary

Accent

Payé

En attente

Info

Erreur

Outline

📈 Progress & cards de paiement

Composant pour le dashboard accueil

% payé

73%

34 / 47 factures

Montant payé

2 671,50EUR+4 703,85CHF

sur 7,425 € total

Reste à encaisser

986,82EUR+1 741,15CHF+1 321,80AED

⚠️ 5 familles > 30 jours

🚀 Workflow & Activité

Workflow recommandé

État du mois en cours

Extraire les leçons
TutorBird + Notion hors TB
Créer les liens de paiement
Avec impayés n-2
Générer les factures PDF
47 familles
4
Envoyer les factures
4 templates : FR, EN, Carole, Multi
5
Rappels paiement
À J+10, J+20, J+30

Activité récente

Paiement reçu — Calabresi A.
il y a 12 min
315 € via Stripe webhook
47 factures envoyées
il y a 2h
Templates FR (28), EN (8), Carole (1), Multi (10)
Factures générées
il y a 3h
Octobre 2025 · 47 PDFs
Liens Stripe créés
hier
47 liens · 12 inclus n-2
5 familles en retard
hier
À relancer manuellement

🖥️ Terminal Log (jobs longs)

Composant utilisé pour streaming des logs (extraction, factures, paiements…). Couleurs auto selon emoji/keywords.

running

En attente de logs…

Job en cours

Extraction TutorBird

Progression0%

Job ID

a1b2c3d4e5f6

🌫️ Empty States

Aucune extraction encore

Lance ta première extraction TutorBird pour voir tes leçons apparaître ici.

Toutes les factures sont envoyées 🎉

Plus rien à faire pour ce mois-ci. Reviens demain pour suivre les paiements.

🎴 Cards diverses (préview pages réelles)

Calabresi Aurélie

Payé

2 élèves · 18h45 · Octobre 2025

Montant315.00 €

ProfsSophia / Mehdi

Lien Stripeplink_xxx

Tessier Carole

OCTOPUS SARL

Package · Multi-mois · Monaco

Montant1,440.00 €

Inclut Sept. + Oct. (impayés n-2)

Aseelah Bin K.

En attente

1 élève · 8h00 · Dubai

Montant1,321.80 AED

Équivalent EUR≈ 334.50 €

✅ Tous les composants sont prêts pour la migration des 12 pages réelles.

Validation visuelle requise avant de commencer l'étape suivante.