breakpilot-compliance/developer-portal/app/development/byoeh/_components/AuditApiSummarySection.tsx

import { InfoBox } from '@/components/DevPortalLayout'

export function AuditApiSummarySection() {
  return (
    <>
      <h2 id="audit">10. Audit-Trail: Vollstaendige Nachvollziehbarkeit</h2>
      <p>
        Jede Aktion im Namespace wird revisionssicher im <strong>Audit-Log</strong> gespeichert.
      </p>

      <div className="not-prose my-4 overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200 text-sm">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Event</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Was protokolliert wird</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            <tr><td className="px-4 py-3 font-medium">upload</td><td className="px-4 py-3">Dokument hochgeladen (Dateigroesse, Metadaten, Zeitstempel)</td></tr>
            <tr><td className="px-4 py-3 font-medium">index</td><td className="px-4 py-3">Referenzdokument indexiert (Anzahl Chunks, Dauer)</td></tr>
            <tr><td className="px-4 py-3 font-medium">rag_query</td><td className="px-4 py-3">RAG-Suchanfrage ausgefuehrt (Query-Hash, Anzahl Ergebnisse)</td></tr>
            <tr><td className="px-4 py-3 font-medium">analyze</td><td className="px-4 py-3">KI-Verarbeitung gestartet (Dokument-Token, Modell, Dauer)</td></tr>
            <tr><td className="px-4 py-3 font-medium">share</td><td className="px-4 py-3">Namespace mit anderem Nutzer geteilt (Empfaenger, Rolle)</td></tr>
            <tr><td className="px-4 py-3 font-medium">revoke_share</td><td className="px-4 py-3">Zugriff widerrufen (wer, wann)</td></tr>
            <tr><td className="px-4 py-3 font-medium">decrypt</td><td className="px-4 py-3">Ergebnis entschluesselt (durch wen, Zeitstempel)</td></tr>
            <tr><td className="px-4 py-3 font-medium">delete</td><td className="px-4 py-3">Dokument geloescht (Soft Delete, bleibt in Logs)</td></tr>
          </tbody>
        </table>
      </div>

      <h2 id="api">11. API-Endpunkte (SDK-Referenz)</h2>
      <p>Authentifizierung erfolgt ueber API-Key + JWT-Token.</p>

      <h3>11.1 Namespace-Verwaltung</h3>
      <div className="not-prose my-4 overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200 text-sm">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Methode</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Endpunkt</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Beschreibung</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            <tr><td className="px-4 py-3"><span className="px-2 py-0.5 rounded bg-blue-100 text-blue-800 text-xs font-bold">POST</span></td><td className="px-4 py-3 font-mono text-sm">/api/v1/namespace/upload</td><td className="px-4 py-3">Verschluesseltes Dokument hochladen</td></tr>
            <tr><td className="px-4 py-3"><span className="px-2 py-0.5 rounded bg-green-100 text-green-800 text-xs font-bold">GET</span></td><td className="px-4 py-3 font-mono text-sm">/api/v1/namespace/documents</td><td className="px-4 py-3">Eigene Dokumente auflisten</td></tr>
            <tr><td className="px-4 py-3"><span className="px-2 py-0.5 rounded bg-green-100 text-green-800 text-xs font-bold">GET</span></td><td className="px-4 py-3 font-mono text-sm">/api/v1/namespace/documents/{'{id}'}</td><td className="px-4 py-3">Einzelnes Dokument abrufen</td></tr>
            <tr><td className="px-4 py-3"><span className="px-2 py-0.5 rounded bg-red-100 text-red-800 text-xs font-bold">DELETE</span></td><td className="px-4 py-3 font-mono text-sm">/api/v1/namespace/documents/{'{id}'}</td><td className="px-4 py-3">Dokument loeschen (Soft Delete)</td></tr>
          </tbody>
        </table>
      </div>

      <h3>11.2 Referenzdokumente &amp; RAG</h3>
      <div className="not-prose my-4 overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200 text-sm">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Methode</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Endpunkt</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Beschreibung</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            <tr><td className="px-4 py-3"><span className="px-2 py-0.5 rounded bg-blue-100 text-blue-800 text-xs font-bold">POST</span></td><td className="px-4 py-3 font-mono text-sm">/api/v1/namespace/references/upload</td><td className="px-4 py-3">Referenzdokument hochladen</td></tr>
            <tr><td className="px-4 py-3"><span className="px-2 py-0.5 rounded bg-blue-100 text-blue-800 text-xs font-bold">POST</span></td><td className="px-4 py-3 font-mono text-sm">/api/v1/namespace/references/{'{id}'}/index</td><td className="px-4 py-3">Referenz fuer RAG indexieren</td></tr>
            <tr><td className="px-4 py-3"><span className="px-2 py-0.5 rounded bg-blue-100 text-blue-800 text-xs font-bold">POST</span></td><td className="px-4 py-3 font-mono text-sm">/api/v1/namespace/rag-query</td><td className="px-4 py-3">RAG-Suchanfrage ausfuehren</td></tr>
            <tr><td className="px-4 py-3"><span className="px-2 py-0.5 rounded bg-blue-100 text-blue-800 text-xs font-bold">POST</span></td><td className="px-4 py-3 font-mono text-sm">/api/v1/namespace/analyze</td><td className="px-4 py-3">KI-Verarbeitung anstossen</td></tr>
          </tbody>
        </table>
      </div>

      <h3>11.3 Key Sharing</h3>
      <div className="not-prose my-4 overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200 text-sm">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Methode</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Endpunkt</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Beschreibung</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            <tr><td className="px-4 py-3"><span className="px-2 py-0.5 rounded bg-blue-100 text-blue-800 text-xs font-bold">POST</span></td><td className="px-4 py-3 font-mono text-sm">/api/v1/namespace/share</td><td className="px-4 py-3">Namespace mit anderem Nutzer teilen</td></tr>
            <tr><td className="px-4 py-3"><span className="px-2 py-0.5 rounded bg-green-100 text-green-800 text-xs font-bold">GET</span></td><td className="px-4 py-3 font-mono text-sm">/api/v1/namespace/shares</td><td className="px-4 py-3">Aktive Shares auflisten</td></tr>
            <tr><td className="px-4 py-3"><span className="px-2 py-0.5 rounded bg-red-100 text-red-800 text-xs font-bold">DELETE</span></td><td className="px-4 py-3 font-mono text-sm">/api/v1/namespace/shares/{'{shareId}'}</td><td className="px-4 py-3">Zugriff widerrufen</td></tr>
            <tr><td className="px-4 py-3"><span className="px-2 py-0.5 rounded bg-green-100 text-green-800 text-xs font-bold">GET</span></td><td className="px-4 py-3 font-mono text-sm">/api/v1/namespace/shared-with-me</td><td className="px-4 py-3">Mit mir geteilte Namespaces</td></tr>
          </tbody>
        </table>
      </div>

      <h2 id="zusammenfassung">12. Zusammenfassung: Compliance-Garantien</h2>

      <div className="not-prose my-6 overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200 text-sm">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Garantie</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Wie umgesetzt</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Regelwerk</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            <tr><td className="px-4 py-3 font-medium">Keine PII verlaesst das Kundensystem</td><td className="px-4 py-3">Header-Redaction + verschluesselte Identity-Map</td><td className="px-4 py-3">DSGVO Art. 4 Nr. 5</td></tr>
            <tr><td className="px-4 py-3 font-medium">Betreiber kann nicht mitlesen</td><td className="px-4 py-3">Client-seitige AES-256-GCM Verschluesselung</td><td className="px-4 py-3">DSGVO Art. 32</td></tr>
            <tr><td className="px-4 py-3 font-medium">Kein Zugriff durch andere Kunden</td><td className="px-4 py-3">Tenant-Isolation (Namespace) auf allen 3 Ebenen</td><td className="px-4 py-3">DSGVO Art. 25</td></tr>
            <tr><td className="px-4 py-3 font-medium">Kein KI-Training mit Kundendaten</td><td className="px-4 py-3"><code>training_allowed: false</code> auf allen Vektoren</td><td className="px-4 py-3">AI Act Art. 10</td></tr>
            <tr><td className="px-4 py-3 font-medium">Alles nachvollziehbar</td><td className="px-4 py-3">Vollstaendiger Audit-Trail aller Aktionen</td><td className="px-4 py-3">DSGVO Art. 5 Abs. 2</td></tr>
            <tr><td className="px-4 py-3 font-medium">Kunde behaelt volle Kontrolle</td><td className="px-4 py-3">Jederzeitiger Widerruf, Loeschung, Datenexport</td><td className="px-4 py-3">DSGVO Art. 17, 20</td></tr>
          </tbody>
        </table>
      </div>

      <InfoBox type="success" title="Das Wichtigste in einem Satz">
        Die Namespace-Technologie ermoeglicht KI-gestuetzte Datenverarbeitung in der Cloud, bei der
        <strong> keine personenbezogenen Daten das Kundensystem verlassen</strong>, alle Daten
        <strong> Ende-zu-Ende verschluesselt</strong> sind, jeder Kunde seinen
        <strong> eigenen abgeschotteten Namespace</strong> hat, und ein
        <strong> vollstaendiger Audit-Trail</strong> jede Aktion dokumentiert.
      </InfoBox>
    </>
  )
}