Projet 2 — Dashboard admin (Niv. ⭐⭐)

⏱️ TL;DR — Un back-office : navbar supérieure, sidebar latérale (offcanvas sur mobile), rangée de cartes statistiques, un tableau de données avec actions, et une zone de graphiques (placeholders). Objectif : composer une vraie mise en page d’application.

🎯 Cahier des charges

1. Layout : navbar en haut (sticky-top), sidebar à gauche en desktop, offcanvas en mobile.
2. Cartes stats : 4 cartes (Utilisateurs, Ventes, Revenu, Taux) avec valeur, libellé et petite tendance.
3. Tableau : liste d’éléments (rayé, hover, responsive), colonne d’actions avec un dropdown par ligne.
4. Zone graphiques : deux blocs avec des placeholders (squelettes) en attendant les données.
5. Dark mode : un interrupteur dans la navbar.

🔍 Endroits à visiter

Jalons

• La sidebar devient un offcanvas sous lg.
• Les 4 cartes stats sont sur une ligne en desktop, empilées en mobile.
• Le tableau défile horizontalement sur petit écran.
• Chaque ligne a un menu d’actions.
• L’interrupteur bascule tout le dashboard en sombre.

<div class="d-flex">
  <!-- sidebar desktop -->
  <aside class="d-none d-lg-block border-end" style="width:250px">…</aside>
  <!-- contenu -->
  <main class="flex-grow-1 p-4">
    <div class="row row-cols-1 row-cols-sm-2 row-cols-xl-4 g-3">
      <div class="col"><div class="card"><div class="card-body">…</div></div></div>
    </div>
    <div class="table-responsive mt-4">
      <table class="table table-hover align-middle">…</table>
    </div>
  </main>
</div>

Pour aller plus loin

• Rendez les cartes stats cliquables (filtrent le tableau).
• Ajoutez une pagination sous le tableau (5.2).

Projet suivant : Projet 3 — Formulaire multi-étapes