4

Design System

Composants shadcn/ui — palette DREP'APP appliquée via CSS variables. Tous les composants sont réels et interactifs.

Sommaire
19 sections
Tokens — palette
Couleurs sémantiques exposées en CSS variables
background
#FFFFFF
--background
foreground
#094067
--foreground
primary
#094067
--primary
primary-foreground
#FFFFFE
--primary-foreground
accent
#E0F2FE
--accent
accent-foreground
#094067
--accent-foreground
secondary
#F1F5F9
--secondary
muted-foreground
#5F6C7B
--muted-foreground
destructive
#EF4565
--destructive
ring
#3DA9FC
--ring
border
#E2E8F0
--border
chart-1
#3DA9FC
--chart-1
chart-3
#EF4565
--chart-3
chart-4 (success)
#10B981
--chart-4
chart-5 (warning)
#F59E0B
--chart-5
Typographie
Inter — scale Tailwind

Display 36 — Patients en suivi actif

Heading 24 — Vue d'ensemble

Subheading 18 — Compteur dynamique

Body 14 — Le compteur s'actualise toutes les 30 secondes pour refléter l'état réel des diagnostics en cours.

Caption 12 — Dernière mise à jour

--font-sans: Inter
Buttons
6 variants × 4 tailles + icon
asChild + Link
Badges & Status
Badges shadcn + status médical custom
DefaultSecondaryOutlineDestructive
StableEn coursEn crise
Form controls
Input, Label, Textarea, Switch, Checkbox, Select
Input group
Champ avec addon (icône, bouton, kbd…)
⌘K
Avatar & Tabs
Identité + onglets shadcn
SMMDLB
Contenu de l'onglet Compte.
Échelle d'intensité (custom)
Pour les douleurs 1-10
2/10
5/10
7/10
9/10
Overlays
Dropdown, Tooltip, Popover
Sheet (drawer)
Tiroir latéral pour formulaires longs ou détails
Command palette
Recherche fuzzy + groupes + raccourcis. Aussi accessible globalement via ⌘K.
Modals
Dialog informatif + AlertDialog destructif + Toast
Card & Skeleton
Card avec slots + états de chargement
Patient suivi
Mis à jour il y a quelques secondes

47

+3 vs hier

Skeletons
États de chargement
Table
Tableau de données simple
PatientÉtatIntensitéAction
ABDOU HassaniStable
1/10
ABDOU ComboStable
4/10
ABDOU SaidStable
3/10
ATTOUMANE AbdouStable
2/10
Scroll Area
Scrolling stylé (utilisé dans /stats pour la liste de patients)

Patients récents

  • ABDOU Hassani — PA-1008
  • ABDOU Combo — PA-1034
  • ABDOU Said — PA-1046
  • ATTOUMANE Abdou — PA-1036
  • ATTOUMANE Ousseni — PA-1042
  • BACAR Hassani — PA-1044
  • BACO Toufaili — PA-1003
  • BACO Soimadou — PA-1039
  • BAKARI Roukia — PA-1024
  • BOINAIDI Zalifa — PA-1037
  • BOURA Anissa — PA-1033
  • BOURHANE Moustoifa — PA-1009
  • BOURHANE Nadjima — PA-1010
  • DJAE Rachadati — PA-1016
  • DJAE Charif — PA-1020
  • HAMADA Halidi — PA-1019
  • HAMADA Maïdatie — PA-1027
  • HASSANI Mansour — PA-1017
  • HASSANI Anissa — PA-1032
  • HASSANI Saandati — PA-1043
Breadcrumb
Aussi visible dans la top bar de l'app shell
Calendar
Sélecteur de dates (single & range)

Mode single

April 2026
Charts (shadcn + Recharts)
Area, Line, Bar (stacked + horizontal), Pie, Radial — tooltips et légendes shadcn
Composants métier DREP'APP
Briques spécifiques à la drépanocytose : feed live, timeline crises, mini-fiche patient

Timeline crises (3 derniers épisodes)

  1. Hier

    18:26 — il y a environ 13 heuresEn criseCritique
    Intensité
    10/10
    Température
    39.2°C
    Zones rapportées
    TêteJambe gauche

  2. mercredi 11 mars

    11:50 — il y a environ 2 moisStable
    Intensité
    4/10
    Température
    36.8°C
    Zones rapportées
    Dos basBuste haut

    Résolution : il y a environ 2 mois

  3. vendredi 6 mars

    17:50 — il y a environ 2 moisEn cours
    Intensité
    7/10
    Température
    36.7°C
    Zones rapportées
    Dos haut

    Résolution : il y a environ 2 mois