TEMPLATES

App interne

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

Commandes

Référence	Client	Type	Montant	Statut	Actions
CMD-0241	Scouts de Namur	Textile	€ 1 240	En attente	Voir
CMD-0240	Marathon Liège	Textile	€ 3 800	En cours	Voir
CMD-0239	BNP Paribas	Objet	€ 850	Validé	Voir

Affichage 1–3 sur 143

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">
    <!-- Breadcrumb -->
    <nav class="text-sm text-base-content/40 mb-3">
      <a href="#" class="hover:text-base-content">Section</a>
      <span class="mx-1.5">/</span>
      <span class="text-base-content/70">Page courante</span>
    </nav>

    <!-- 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>

    <!-- Toolbar (search + filters) -->
    <div class="flex items-center gap-3 mb-4">
      <div class="relative flex-1 max-w-sm">
        <input type="text" placeholder="Rechercher..." class="input input-bordered input-sm 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>
      <select class="select select-sm w-40">
        <option>Tous les statuts</option>
        <option>En cours</option>
        <option>Validé</option>
      </select>
    </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-primary badge-sm">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.

CMD-0241

En attente

Informations de la commande

Client: Scouts de Namur ASBL
Type: Production spéciale
Montant estimé: € 1 240 (HT)
Délai estimé: 4–6 semaines

Règles

✓ Navbar bg-neutral (mc-navy) sticky, text-neutral-content

✓ Contenu dans max-w-screen-xl mx-auto px-6 py-6

✓ Breadcrumb avant le h1 sur toutes les pages de détail et sous-pages

✗ Jamais bg-white pour le body — toujours bg-base-200

✗ Jamais font-display dans les apps internes — uniquement font-accent pour les titres