{{ template "headersDATAMIX.html" . }}


  <div class="max-w-7xl mx-auto px-6 py-8 grid grid-cols-12 gap-8">
    <!-- SIDEBAR STATS -->
    <aside class="col-span-12 md:col-span-3 space-y-8">
      <div class="bg-white p-6 rounded-lg shadow-sm">
        <p class="text-4xl font-bold">3 460</p>
        <p class="uppercase text-sm text-gray-500">licences en retard</p>
        <p class="uppercase text-sm text-gray-500">en 3 abonnements</p>
      </div>
    </aside>

    <!-- MAIN CONTENT -->
    <main class="col-span-12 md:col-span-9 space-y-8">
      <!-- DEVIS EN ATTENTE -->
      <section class="bg-white p-6 rounded-lg shadow-sm">
        <h2 class="text-lg font-semibold mb-4">Vous avez 6 devis en attente</h2>
        <ul class="divide-y">
          <!-- Exemple d’item -->
          <li class="flex items-center justify-between py-3">
            <div class="flex items-center space-x-3">
              <span class="px-2 py-1 bg-gray-800 text-white text-xs rounded">D‑51825</span>
              <span class="text-sm text-gray-600">Créé 20 février 2025</span>
            </div>
            <div class="flex items-center space-x-4">
              <span class="text-sm font-medium">1 600.00 € HT</span>
              <button class="text-gray-400 hover:text-gray-600">
                → 
              </button>
            </div>
          </li>
          <!-- Répéter 5 fois… -->
        </ul>
      </section>

      <!-- ABONNEMENTS EN RETARD -->
      <section class="space-y-6">
        <!-- Carte d’abonnement -->
        <div class="bg-white p-6 rounded-lg shadow-sm border-l-4 border-red-600">
          <header class="flex items-center justify-between mb-4">
            <div>
              <h3 class="text-md font-semibold">Abonnement 400 licences</h3>
              <p class="text-sm text-gray-500">Projet CNP</p>
            </div>
            <p class="text-sm text-red-600 uppercase">Quota dépassé de 792 jours</p>
          </header>
          <table class="w-full text-sm mb-4">
            <thead class="text-left text-gray-500 uppercase">
              <tr><th>Début</th><th>Fin</th><th>Montant TTC</th><th>Règlement</th><th></th></tr>
            </thead>
            <tbody class="divide-y">
              <tr>
                <td>15/02/2022</td>
                <td>15/02/2023</td>
                <td>3 840.00 €</td>
                <td class="text-gray-400">–</td>
                <td><button class="px-2 py-1 border rounded text-xs">Facture PDF</button></td>
              </tr>
              <tr>
                <td class="text-red-600">15/02/2023</td>
                <td class="text-red-600">15/02/2024</td>
                <td class="text-red-600">3 840.00 €</td>
                <td><a href="#" class="underline text-sm text-red-600">Renouvellement dû</a></td>
                <td class="space-x-2">
                  <button class="px-3 py-1 bg-black text-white text-xs rounded">Régler</button>
                  <button class="px-1 text-red-600">✕</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- Répéter la carte pour 60 licences et 3000 licences… -->
      </section>
    </main>
  </div>
  

{{ template "footer.html" . }}