audit.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Open-eIDAS Console - Journal d'Audit Cryptographique</title>
  <style>
    :root {
      --bg-canvas: #090d16;
      --bg-surface: #111827;
      --bg-surface-elevated: #1f2937;
      --bg-surface-hover: #1a2332;
      --border-subtle: #374151;
      --text-main: #f3f4f6;
      --text-muted: #9ca3af;
      --text-dim: #6b7280;
      
      --prod-banner-bg: #881337;
      --prod-banner-text: #ffe4e6;

      --valid-bg: #064e3b;
      --valid-text: #34d399;
      --valid-border: #059669;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: var(--bg-canvas);
      color: var(--text-main);
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: hidden;
      font-size: 13px;
    }

    .security-bar {
      background: var(--prod-banner-bg);
      color: var(--prod-banner-text);
      padding: 4px 16px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    header {
      background: var(--bg-surface);
      border-bottom: 1px solid var(--border-subtle);
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .brand { display: flex; align-items: center; gap: 12px; }
    .brand-logo {
      width: 24px; height: 24px; background: #3b82f6; border-radius: 4px;
      display: flex; align-items: center; justify-content: center; font-weight: bold; color: white;
    }
    .brand-title { font-size: 15px; font-weight: 600; color: #fff; }
    .user-profile { display: flex; align-items: center; gap: 10px; }
    .role-badge {
      background: #1e3a8a; color: #bfdbfe; border: 1px solid #2563eb; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;
    }

    .app-body { display: flex; flex: 1; overflow: hidden; }

    aside {
      width: 230px; background: var(--bg-surface); border-right: 1px solid var(--border-subtle);
      display: flex; flex-direction: column; padding: 16px 0;
    }
    .nav-group-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); padding: 0 16px 8px 16px; font-weight: 700; }
    .nav-item {
      display: flex; align-items: center; justify-content: space-between; padding: 8px 16px;
      color: var(--text-muted); text-decoration: none; font-size: 13px; font-weight: 500; border-left: 3px solid transparent; cursor: pointer;
    }
    .nav-item.active { background: #1e293b; color: #fff; border-left-color: #38bdf8; font-weight: 600; }
    .counter { background: #374151; color: #f3f4f6; padding: 1px 7px; border-radius: 9999px; font-size: 11px; font-weight: 600; }

    main {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 20px 24px;
      gap: 16px;
    }

    /* INTEGRITY BANNER */
    .integrity-banner {
      background: linear-gradient(90deg, #064e3b 0%, #022c22 100%);
      border: 1px solid #059669;
      border-radius: 8px;
      padding: 14px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .integrity-left {
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .integrity-icon {
      width: 36px; height: 36px; background: #10b981; color: #022c22;
      border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold;
    }
    .integrity-title { font-size: 14px; font-weight: 700; color: #fff; }
    .integrity-desc { font-size: 12px; color: #6ee7b7; }
    .integrity-meta {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: #a7f3d0;
      text-align: right;
    }

    /* FILTER BAR */
    .filter-bar {
      display: flex;
      gap: 12px;
      align-items: center;
      background: var(--bg-surface);
      padding: 10px 16px;
      border-radius: 8px;
      border: 1px solid var(--border-subtle);
    }
    .filter-input {
      background: #090d16;
      border: 1px solid var(--border-subtle);
      color: #fff;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 12px;
    }

    /* AUDIT TABLE */
    .audit-table-container {
      flex: 1;
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      overflow-y: auto;
    }
    table { width: 100%; border-collapse: collapse; text-align: left; }
    th {
      background: #0f172a; color: var(--text-muted); font-size: 11px; font-weight: 600;
      text-transform: uppercase; padding: 10px 16px; border-bottom: 1px solid var(--border-subtle);
      position: sticky; top: 0; z-index: 2;
    }
    td { padding: 10px 16px; border-bottom: 1px solid #1f2937; font-size: 12px; }
    .mono { font-family: 'JetBrains Mono', monospace; font-size: 11px; }

    .chain-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #38bdf8;
      background: #0c4a6e33;
      padding: 2px 8px;
      border-radius: 4px;
      border: 1px solid #0284c755;
    }

    .row-expanded {
      background: #172033;
    }
    .expanded-payload {
      padding: 12px 16px;
      background: #090d16;
      border-radius: 6px;
      border: 1px solid #1f2937;
      margin: 8px 16px 14px 16px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      color: #a5f3fc;
      line-height: 1.5;
    }
  </style>
</head>
<body>

  <!-- GLOBAL SECURITY BAR -->
  <div class="security-bar">
    <div>⚠️ ENVIRONNEMENT : PRODUCTION — JOURNAL D'AUDIT INALTÉRABLE (ETSI EN 319 401 §7.10)</div>
    <div>ACCÈS EN LECTURE SEULE STRICTE</div>
  </div>

  <!-- HEADER -->
  <header>
    <div class="brand">
      <div class="brand-logo">OE</div>
      <div class="brand-title">Open-eIDAS Console — Audit & Imputabilité</div>
    </div>
    <div class="user-profile">
      <span>Claire Dupont</span>
      <span class="role-badge">auditeur</span>
      <span>🔑 FIDO2</span>
    </div>
  </header>

  <div class="app-body">
    <!-- SIDEBAR -->
    <aside>
      <div class="nav-group-title">Opérations Trust Service</div>
      <div class="nav-item"><span>📥 Demandes d'enrôlement</span></div>
      <div class="nav-item"><span>📜 Certificats émis</span></div>
      <div class="nav-item"><span>⚠️ Salle Quorum</span></div>
      <div class="nav-item"><span>🛡️ Dossiers d'Incident</span></div>

      <div class="nav-group-title" style="margin-top: 20px;">Gouvernance & Audit</div>
      <div class="nav-item active"><span>🔍 Journal d'Audit (Inaltérable)</span></div>
      <div class="nav-item"><span>⚖️ Matrice ETSI EN 319 411-1</span></div>
    </aside>

    <main>
      <!-- INTEGRITY BANNER -->
      <div class="integrity-banner">
        <div class="integrity-left">
          <div class="integrity-icon">✓</div>
          <div>
            <div class="integrity-title">CHAÎNE D'AUDIT CRYPTOGRAPHIQUEMENT INTÈGRE</div>
            <div class="integrity-desc">14 285 entrées chaînées par SHA-256 sans discontinuité depuis le bloc de genèse.</div>
          </div>
        </div>
        <div class="integrity-meta">
          Dernier hachage de tête :<br>
          <span style="color:#fff;">f489b10...98ac21e</span>
        </div>
      </div>

      <!-- FILTER BAR -->
      <div class="filter-bar">
        <input type="text" class="filter-input" placeholder="Recherche (opérateur, hash, id)..." style="width: 260px;">
        <select class="filter-input">
          <option>Tous les événements</option>
          <option>ENROLL_APPROVE</option>
          <option>REVOCATION</option>
          <option>QUORUM_COMPLETE</option>
          <option>ADMIN_ONBOARD</option>
        </select>
        <span style="color: var(--text-dim); margin-left: auto;">Période : Dernières 24 heures (42 événements)</span>
      </div>

      <!-- TABLE -->
      <div class="audit-table-container">
        <table>
          <thead>
            <tr>
              <th>Séquence</th>
              <th>Horodatage (UTC)</th>
              <th>Type d'Événement</th>
              <th>Opérateur Imputable</th>
              <th>Liaison Chaînée SHA-256 (prev → current)</th>
              <th>Assertion FIDO2</th>
            </tr>
          </thead>
          <tbody>
            <tr class="row-expanded">
              <td class="mono"><strong>#00014285</strong></td>
              <td class="mono">2026-09-19 13:51:22</td>
              <td><span style="color:#34d399; font-weight:600;">ENROLL_APPROVE</span></td>
              <td>Alice Durand (<span class="mono">alice@pki.internal</span>)</td>
              <td><span class="chain-link mono">4a19...d0 → f489...1e</span></td>
              <td><span class="mono" style="color:#a78bfa;">✓ Signé (YubiKey #8812)</span></td>
            </tr>
            <tr>
              <td colspan="6" style="padding:0; background: #0c1220;">
                <div class="expanded-payload">
                  {<br>
                  &nbsp;&nbsp;"action": "ENROLL_APPROVE",<br>
                  &nbsp;&nbsp;"request_id": "REQ-2026-0842",<br>
                  &nbsp;&nbsp;"subject_dn": "CN=Open-eIDAS Timestamping Unit 2026-B, O=Open-eIDAS, C=FR",<br>
                  &nbsp;&nbsp;"profile": "TSA_SIGNER",<br>
                  &nbsp;&nbsp;"fido2_signature_counter": 1422,<br>
                  &nbsp;&nbsp;"challenge_sha256": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"<br>
                  }
                </div>
              </td>
            </tr>
            <tr>
              <td class="mono"><strong>#00014284</strong></td>
              <td class="mono">2026-09-19 13:42:10</td>
              <td><span style="color:#c084fc; font-weight:600;">QUORUM_STEP_1</span></td>
              <td>Bob Martin (<span class="mono">bob@pki.internal</span>)</td>
              <td><span class="chain-link mono">e812...99 → 4a19...d0</span></td>
              <td><span class="mono" style="color:#a78bfa;">✓ Signé (YubiKey #77219)</span></td>
            </tr>
            <tr>
              <td class="mono"><strong>#00014283</strong></td>
              <td class="mono">2026-09-19 12:15:01</td>
              <td><span style="color:#f87171; font-weight:600;">REVOCATION</span></td>
              <td>Alice Durand (<span class="mono">alice@pki.internal</span>)</td>
              <td><span class="chain-link mono">1204...aa → e812...99</span></td>
              <td><span class="mono" style="color:#a78bfa;">✓ Signé (YubiKey #8812)</span></td>
            </tr>
            <tr>
              <td class="mono"><strong>#00014282</strong></td>
              <td class="mono">2026-09-19 10:00:00</td>
              <td><span style="color:#94a3b8; font-weight:600;">CRL_GENERATION</span></td>
              <td>SYSTEM (Daemon ca-server)</td>
              <td><span class="chain-link mono">a099...11 → 1204...aa</span></td>
              <td><span class="mono" style="color:#9ca3af;">HSM Key Sign #01</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </main>
  </div>

</body>
</html>