COMPOSANTS

Stats

Carte statistique

Un seul chiffre clé avec son contexte. Fond blanc, bordure et ombre légère pour le faire ressortir du fond de page.

Produits actifs

2 847

↑ +12% ce mois

<div class="stat bg-base-100 border border-base-200 rounded-box shadow-sm">
  <div class="stat-title">Produits actifs</div>
  <div class="stat-value text-mc-navy">2 847</div>
  <div class="stat-desc text-success">↑ +12% ce mois</div>
</div>

Grille de stats (4 colonnes)

Afficher plusieurs KPIs côte à côte. Maximum 4 par rangée — au-delà, grouper en deux rangées ou revoir la hiérarchie.

Commandes

En cours ce mois

Dossiers validés

↑ +8% vs mois dernier

En attente

Nécessitent une action

Fournisseurs actifs

Dont 3 nouveaux

<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
  <div class="stat bg-base-100 border border-base-200 rounded-box shadow-sm">
    <div class="stat-title">Commandes</div>
    <div class="stat-value text-mc-navy">48</div>
    <div class="stat-desc">En cours ce mois</div>
  </div>
  <div class="stat bg-base-100 border border-base-200 rounded-box shadow-sm">
    <div class="stat-title">Dossiers validés</div>
    <div class="stat-value text-primary">31</div>
    <div class="stat-desc text-success">↑ +8% vs mois dernier</div>
  </div>
  <div class="stat bg-base-100 border border-base-200 rounded-box shadow-sm">
    <div class="stat-title">En attente</div>
    <div class="stat-value text-warning">7</div>
    <div class="stat-desc">Nécessitent une action</div>
  </div>
  <div class="stat bg-base-100 border border-base-200 rounded-box shadow-sm">
    <div class="stat-title">Fournisseurs actifs</div>
    <div class="stat-value text-mc-navy">12</div>
    <div class="stat-desc">Dont 3 nouveaux</div>
  </div>
</div>

Stat avec icône

L'icône est alignée à droite via stat-figure. Réservée aux dashboards — ne pas systématiser.

Articles commandés

12 430

Unités ce trimestre

<div class="stat bg-base-100 border border-base-200 rounded-box shadow-sm">
  <div class="stat-figure text-primary">
    <svg class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 16H4L5 9z"/>
    </svg>
  </div>
  <div class="stat-title">Articles commandés</div>
  <div class="stat-value text-mc-navy">12 430</div>
  <div class="stat-desc">Unités ce trimestre</div>
</div>

✓ Utiliser stat-value pour le chiffre principal — chiffre ou très courte valeur uniquement.

✓ Couleur du chiffre : text-mc-navy (neutre), text-primary (positif), text-warning / text-error (alerte).

✗ Jamais plus de 4 stats en grille sans espacer visuellement.

✗ Ne pas mettre de texte long dans stat-value — chiffre ou très courte valeur uniquement.