Layout standard pour toutes les apps internes MC. Navbar bg-neutral sticky + zone principale sur fond bg-base-200. Exemple ci-dessous : liste de commandes de l'outil Productions spéciales.

Démo complète

Étapes et filtres d'une liste

Les étapes d'une liste (projet, devis envoyé, en production, terminé) sont des onglets au-dessus de la barre d'outils, jamais un filtre select : chaque onglet est une vue de la même liste avec son compteur, « Toutes » en premier, et changer d'onglet garde la recherche et les autres filtres. Un filtre qui traverse les onglets (« En retard ») s'affiche sous la barre d'outils comme une puce de filtre : le tag supprimable dont la croix renvoie la même page sans ce filtre.

<nav class="tabs tabs-border mb-4 overflow-x-auto" aria-label="Avancement">
  <a href="?phase=all" class="tab whitespace-nowrap">Toutes (143)</a>
  <a href="?phase=quote_sent" class="tab whitespace-nowrap tab-active" aria-current="page">Devis envoyés (8)</a>
</nav>

<!-- toolbar: search, then the select filters -->

<div class="flex flex-wrap items-center gap-2 mb-4">
  <span class="badge badge-draft gap-1 pr-1">
    <span class="font-accent font-bold text-mc-navy">En retard</span>
    <a href="?phase=quote_sent" class="hover:bg-base-content/10 rounded-full p-0.5" aria-label="Retirer En retard">×</a>
  </span>
</div>

<%# Rails: the controller includes PhaseTabs, the model declares PHASES and in_phase %>
orders = phase_tabs(orders, Order::PHASES)   # sets @phase and @phase_counts

<%= render "design_system/phase_tabs", labels: { "all" => "Toutes", "quote_sent" => "Devis envoyés" },
      phase: @phase, counts: @phase_counts %>
<%= filter_chip "En retard", "late" if params[:late].present? %>

Structure HTML complète

<body class="bg-base-200 min-h-screen font-body">
  <!-- Navbar dark -->
  <nav class="navbar bg-neutral text-neutral-content shadow-sm sticky top-0 z-30">
    <div class="navbar-start gap-3 pl-4">
      <div class="bg-mc-green rounded px-2 py-1">
        <span class="text-white font-accent font-bold text-xs">MC</span>
      </div>
      <span class="font-accent font-bold text-sm">Nom de l'app</span>
    </div>
    <div class="navbar-center hidden md:flex gap-6">
      <a href="#" class="text-sm text-neutral-content font-accent font-bold">Section active</a>
      <a href="#" class="text-sm text-neutral-content/60 hover:text-neutral-content">Autre section</a>
    </div>
    <div class="navbar-end gap-2 pr-4">
      <button class="btn btn-ghost btn-sm text-neutral-content/60">NJ</button>
    </div>
  </nav>

  <!-- Main content -->
  <main class="max-w-screen-xl mx-auto px-6 py-6">
    <!-- Page header -->
    <div class="flex items-center justify-between mb-6">
      <h1 class="font-accent font-bold text-2xl text-mc-navy">Titre de la page</h1>
      <button class="btn btn-primary btn-sm">Créer un dossier</button>
    </div>

    <!-- Stage tabs, then the toolbar (search + filters), then the active filter chips:
         see "Étapes et filtres d'une liste" -->
    <div class="flex items-center gap-3 mb-4">
      <div class="relative flex-1 max-w-sm">
        <input type="text" placeholder="Rechercher..." class="input w-full pl-8">
        <svg class="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-base-content/40"
             fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
        </svg>
      </div>
      <div class="w-40">
        <select class="select">
          <option>Tous les types</option>
          <option>Textile</option>
          <option>Objet</option>
        </select>
      </div>
    </div>

    <!-- Table content -->
    <div class="card bg-base-100 shadow-sm border border-base-200">
      <div class="overflow-x-auto">
        <table class="table">
          <thead>
            <tr>
              <th>Référence</th><th>Client</th><th>Statut</th><th class="text-right">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr class="hover cursor-pointer">
              <td class="font-mono text-xs">CMD-0241</td>
              <td>Dupont SA</td>
              <td><span class="badge badge-validated">Validé</span></td>
              <td class="text-right"><a href="#" class="text-primary text-sm hover:underline">Voir</a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </main>
</body>

Page de détail

Structure d'une page de détail avec card + définitions + boutons d'action.

Règles