660295e218
The admin-v2 application was incomplete in the repository. This commit restores all missing components: - Admin pages (76 pages): dashboard, ai, compliance, dsgvo, education, infrastructure, communication, development, onboarding, rbac - SDK pages (45 pages): tom, dsfa, vvt, loeschfristen, einwilligungen, vendor-compliance, tom-generator, dsr, and more - Developer portal (25 pages): API docs, SDK guides, frameworks - All components, lib files, hooks, and types - Updated package.json with all dependencies The issue was caused by incomplete initial repository state - the full admin-v2 codebase existed in backend/admin-v2 and docs-src/admin-v2 but was never fully synced to the main admin-v2 directory. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
644 lines
31 KiB
TypeScript
644 lines
31 KiB
TypeScript
'use client'
|
||
|
||
/**
|
||
* UCCA - System Documentation Page
|
||
*
|
||
* Displays architecture documentation, auditor information,
|
||
* and transparency data for the UCCA compliance system.
|
||
*/
|
||
|
||
import { useState, useEffect } from 'react'
|
||
import { PagePurpose } from '@/components/common/PagePurpose'
|
||
import Link from 'next/link'
|
||
|
||
// ============================================================================
|
||
// Types
|
||
// ============================================================================
|
||
|
||
type DocTab = 'overview' | 'architecture' | 'auditor' | 'rules' | 'legal-corpus'
|
||
|
||
interface Rule {
|
||
code: string
|
||
category: string
|
||
title: string
|
||
description: string
|
||
severity: string
|
||
gdpr_ref: string
|
||
rationale?: string
|
||
risk_add?: number
|
||
}
|
||
|
||
interface Pattern {
|
||
id: string
|
||
title: string
|
||
description: string
|
||
benefit?: string
|
||
effort?: string
|
||
risk_reduction?: number
|
||
}
|
||
|
||
interface Control {
|
||
id: string
|
||
title: string
|
||
description: string
|
||
gdpr_ref?: string
|
||
effort?: string
|
||
}
|
||
|
||
interface LegalCorpusStats {
|
||
total_chunks: number
|
||
regulations: {
|
||
code: string
|
||
name: string
|
||
chunks: number
|
||
type: string
|
||
}[]
|
||
}
|
||
|
||
// ============================================================================
|
||
// API Configuration
|
||
// ============================================================================
|
||
|
||
const API_BASE = process.env.NEXT_PUBLIC_SDK_API_URL || 'https://macmini:8090'
|
||
|
||
// ============================================================================
|
||
// Main Component
|
||
// ============================================================================
|
||
|
||
export default function DocumentationPage() {
|
||
const [activeTab, setActiveTab] = useState<DocTab>('overview')
|
||
const [rules, setRules] = useState<Rule[]>([])
|
||
const [patterns, setPatterns] = useState<Pattern[]>([])
|
||
const [controls, setControls] = useState<Control[]>([])
|
||
const [policyVersion, setPolicyVersion] = useState<string>('')
|
||
const [legalStats, setLegalStats] = useState<LegalCorpusStats | null>(null)
|
||
const [loading, setLoading] = useState(false)
|
||
|
||
// Fetch rules, patterns, and controls for transparency
|
||
useEffect(() => {
|
||
const fetchData = async () => {
|
||
setLoading(true)
|
||
try {
|
||
// Fetch rules
|
||
const rulesRes = await fetch(`${API_BASE}/sdk/v1/ucca/rules`, {
|
||
headers: { 'X-Tenant-ID': '00000000-0000-0000-0000-000000000000' }
|
||
})
|
||
if (rulesRes.ok) {
|
||
const rulesData = await rulesRes.json()
|
||
setRules(rulesData.rules || [])
|
||
setPolicyVersion(rulesData.policy_version || '')
|
||
}
|
||
|
||
// Fetch patterns
|
||
const patternsRes = await fetch(`${API_BASE}/sdk/v1/ucca/patterns`, {
|
||
headers: { 'X-Tenant-ID': '00000000-0000-0000-0000-000000000000' }
|
||
})
|
||
if (patternsRes.ok) {
|
||
const patternsData = await patternsRes.json()
|
||
setPatterns(patternsData.patterns || [])
|
||
}
|
||
|
||
// Fetch controls
|
||
const controlsRes = await fetch(`${API_BASE}/sdk/v1/ucca/controls`, {
|
||
headers: { 'X-Tenant-ID': '00000000-0000-0000-0000-000000000000' }
|
||
})
|
||
if (controlsRes.ok) {
|
||
const controlsData = await controlsRes.json()
|
||
setControls(controlsData.controls || [])
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to fetch documentation data:', error)
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
fetchData()
|
||
}, [])
|
||
|
||
// ============================================================================
|
||
// Tab Content Renderers
|
||
// ============================================================================
|
||
|
||
const renderOverview = () => (
|
||
<div className="space-y-6">
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<div className="text-4xl mb-3">📋</div>
|
||
<h3 className="font-semibold text-slate-800 mb-2">Deterministische Regeln</h3>
|
||
<div className="text-3xl font-bold text-primary-600">{rules.length}</div>
|
||
<p className="text-sm text-slate-500 mt-2">
|
||
Alle Entscheidungen basieren auf transparenten, nachvollziehbaren Regeln.
|
||
</p>
|
||
</div>
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<div className="text-4xl mb-3">🏗️</div>
|
||
<h3 className="font-semibold text-slate-800 mb-2">Architektur-Patterns</h3>
|
||
<div className="text-3xl font-bold text-green-600">{patterns.length}</div>
|
||
<p className="text-sm text-slate-500 mt-2">
|
||
Best-Practice-Loesungen fuer datenschutzkonforme KI-Systeme.
|
||
</p>
|
||
</div>
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||
<div className="text-4xl mb-3">🛡️</div>
|
||
<h3 className="font-semibold text-slate-800 mb-2">Compliance-Kontrollen</h3>
|
||
<div className="text-3xl font-bold text-blue-600">{controls.length}</div>
|
||
<p className="text-sm text-slate-500 mt-2">
|
||
Technische und organisatorische Massnahmen.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-gradient-to-br from-primary-50 to-blue-50 rounded-xl border border-primary-200 p-6">
|
||
<h3 className="font-semibold text-primary-800 text-lg mb-4">Was ist UCCA?</h3>
|
||
<div className="prose prose-sm max-w-none text-slate-700">
|
||
<p>
|
||
<strong>UCCA (Use-Case Compliance & Feasibility Advisor)</strong> ist ein deterministisches
|
||
Compliance-Pruefwerkzeug, das Organisationen bei der Bewertung geplanter KI-Anwendungsfaelle
|
||
hinsichtlich ihrer datenschutzrechtlichen Zulaessigkeit unterstuetzt.
|
||
</p>
|
||
<h4 className="text-primary-700 mt-4">Kernprinzipien</h4>
|
||
<ul className="space-y-2">
|
||
<li>
|
||
<strong>Determinismus:</strong> Alle Entscheidungen basieren auf transparenten Regeln.
|
||
Die KI trifft KEINE autonomen Entscheidungen.
|
||
</li>
|
||
<li>
|
||
<strong>Transparenz:</strong> Alle Regeln, Kontrollen und Patterns sind einsehbar.
|
||
</li>
|
||
<li>
|
||
<strong>Human-in-the-Loop:</strong> Kritische Entscheidungen erfordern immer
|
||
menschliche Pruefung durch DSB oder Legal.
|
||
</li>
|
||
<li>
|
||
<strong>Rechtsgrundlage:</strong> Jede Regel referenziert konkrete DSGVO-Artikel.
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-amber-50 border border-amber-200 rounded-xl p-6">
|
||
<h3 className="font-semibold text-amber-800 mb-3 flex items-center gap-2">
|
||
<span>⚠️</span>
|
||
Wichtiger Hinweis zur KI-Nutzung
|
||
</h3>
|
||
<p className="text-amber-700">
|
||
Das System verwendet KI (LLM) <strong>ausschliesslich zur Erklaerung</strong> bereits
|
||
getroffener Regelentscheidungen. Die eigentliche Compliance-Bewertung erfolgt
|
||
<strong> rein deterministisch</strong> durch die Policy Engine. BLOCK-Entscheidungen
|
||
koennen NICHT durch KI ueberschrieben werden.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)
|
||
|
||
const renderArchitecture = () => (
|
||
<div className="space-y-6">
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
||
<h3 className="font-semibold text-slate-800 text-lg mb-4">Systemarchitektur</h3>
|
||
|
||
{/* ASCII Diagram */}
|
||
<div className="bg-slate-900 text-green-400 p-6 rounded-lg font-mono text-sm overflow-x-auto">
|
||
<pre>{`
|
||
┌─────────────────────────────────────────────────────────────────────┐
|
||
│ Frontend (Next.js) │
|
||
│ admin-v2:3000/dsgvo/advisory-board │
|
||
└───────────────────────────────┬─────────────────────────────────────┘
|
||
│ HTTPS
|
||
▼
|
||
┌─────────────────────────────────────────────────────────────────────┐
|
||
│ AI Compliance SDK (Go) │
|
||
│ Port 8090 │
|
||
│ ┌─────────────────────────────────────────────────────────────┐ │
|
||
│ │ Policy Engine │ │
|
||
│ │ ┌───────────────────────────────────────────────────────┐ │ │
|
||
│ │ │ YAML-basierte Regeln (ucca_policy_v1.yaml) │ │ │
|
||
│ │ │ ~45 Regeln in 7 Kategorien │ │ │
|
||
│ │ │ Deterministisch - Kein LLM in Entscheidungslogik │ │ │
|
||
│ │ └───────────────────────────────────────────────────────┘ │ │
|
||
│ │ │ │ │
|
||
│ │ ▼ │ │
|
||
│ │ ┌────────────────┐ ┌────────────────┐ ┌────────────────┐ │ │
|
||
│ │ │ Controls │ │ Patterns │ │ Examples │ │ │
|
||
│ │ │ Library │ │ Library │ │ Library │ │ │
|
||
│ │ └────────────────┘ └────────────────┘ └────────────────┘ │ │
|
||
│ └─────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ┌──────────────────┐ ┌──────────────────┐ │
|
||
│ │ LLM Integration │ │ Legal RAG │──────┐ │
|
||
│ │ (nur Explain) │ │ Client │ │ │
|
||
│ └──────────────────┘ └──────────────────┘ │ │
|
||
└─────────────────────────────┬────────────────────┼──────────────────┘
|
||
│ │
|
||
▼ ▼
|
||
┌─────────────────────────────────────────────────────────────────────┐
|
||
│ Datenschicht │
|
||
│ ┌────────────────────┐ ┌────────────────────┐ │
|
||
│ │ PostgreSQL │ │ Qdrant │ │
|
||
│ │ (Assessments, │ │ (Legal Corpus, │ │
|
||
│ │ Escalations) │ │ 2,274 Chunks) │ │
|
||
│ └────────────────────┘ └────────────────────┘ │
|
||
└─────────────────────────────────────────────────────────────────────┘
|
||
`}</pre>
|
||
</div>
|
||
|
||
<div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
|
||
<h4 className="font-medium text-blue-800 mb-2">Datenfluss</h4>
|
||
<ol className="text-sm text-blue-700 list-decimal list-inside space-y-1">
|
||
<li>Benutzer beschreibt Use Case im Frontend</li>
|
||
<li>Policy Engine evaluiert gegen alle Regeln</li>
|
||
<li>Ergebnis mit Controls + Patterns zurueck</li>
|
||
<li>Optional: LLM erklaert das Ergebnis</li>
|
||
<li>Bei Risiko: Automatische Eskalation</li>
|
||
</ol>
|
||
</div>
|
||
<div className="p-4 bg-green-50 rounded-lg border border-green-200">
|
||
<h4 className="font-medium text-green-800 mb-2">Sicherheitsmerkmale</h4>
|
||
<ul className="text-sm text-green-700 list-disc list-inside space-y-1">
|
||
<li>TLS 1.3 Verschluesselung</li>
|
||
<li>RBAC mit Tenant-Isolation</li>
|
||
<li>JWT-basierte Authentifizierung</li>
|
||
<li>Audit-Trail aller Aktionen</li>
|
||
<li>Keine Rohtext-Speicherung (nur Hash)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
||
<h3 className="font-semibold text-slate-800 text-lg mb-4">Eskalations-Workflow</h3>
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-sm">
|
||
<thead>
|
||
<tr className="border-b border-slate-200">
|
||
<th className="text-left py-2 px-3 font-medium text-slate-600">Level</th>
|
||
<th className="text-left py-2 px-3 font-medium text-slate-600">Ausloeser</th>
|
||
<th className="text-left py-2 px-3 font-medium text-slate-600">Pruefer</th>
|
||
<th className="text-left py-2 px-3 font-medium text-slate-600">SLA</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr className="border-b border-slate-100 bg-green-50">
|
||
<td className="py-2 px-3 font-medium text-green-700">E0</td>
|
||
<td className="py-2 px-3 text-slate-600">Nur INFO-Regeln, Risiko < 20</td>
|
||
<td className="py-2 px-3 text-slate-600">Automatisch</td>
|
||
<td className="py-2 px-3 text-slate-600">-</td>
|
||
</tr>
|
||
<tr className="border-b border-slate-100 bg-yellow-50">
|
||
<td className="py-2 px-3 font-medium text-yellow-700">E1</td>
|
||
<td className="py-2 px-3 text-slate-600">WARN-Regeln, Risiko 20-40</td>
|
||
<td className="py-2 px-3 text-slate-600">Team-Lead</td>
|
||
<td className="py-2 px-3 text-slate-600">24h / 72h</td>
|
||
</tr>
|
||
<tr className="border-b border-slate-100 bg-orange-50">
|
||
<td className="py-2 px-3 font-medium text-orange-700">E2</td>
|
||
<td className="py-2 px-3 text-slate-600">Art. 9 Daten, DSFA empfohlen, Risiko 40-60</td>
|
||
<td className="py-2 px-3 text-slate-600">DSB</td>
|
||
<td className="py-2 px-3 text-slate-600">8h / 48h</td>
|
||
</tr>
|
||
<tr className="bg-red-50">
|
||
<td className="py-2 px-3 font-medium text-red-700">E3</td>
|
||
<td className="py-2 px-3 text-slate-600">BLOCK-Regeln, Art. 22, Risiko > 60</td>
|
||
<td className="py-2 px-3 text-slate-600">DSB + Legal</td>
|
||
<td className="py-2 px-3 text-slate-600">4h / 24h</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
|
||
const renderAuditorInfo = () => (
|
||
<div className="space-y-6">
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
||
<h3 className="font-semibold text-slate-800 text-lg mb-4">
|
||
Dokumentation fuer externe Auditoren
|
||
</h3>
|
||
<p className="text-slate-600 mb-4">
|
||
Diese Dokumentation erfuellt die Anforderungen nach Art. 30 DSGVO (Verzeichnis von
|
||
Verarbeitungstaetigkeiten) und dient als Grundlage fuer Audits nach Art. 32 DSGVO.
|
||
</p>
|
||
|
||
<div className="space-y-4">
|
||
<div className="p-4 bg-slate-50 rounded-lg border border-slate-200">
|
||
<h4 className="font-medium text-slate-800 mb-2">1. Zweck des Systems</h4>
|
||
<p className="text-sm text-slate-600">
|
||
UCCA ist ein Compliance-Pruefwerkzeug zur Bewertung geplanter KI-Anwendungsfaelle
|
||
hinsichtlich ihrer datenschutzrechtlichen Zulaessigkeit. Es unterstuetzt Organisationen
|
||
bei der Einhaltung der DSGVO und des AI Acts.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="p-4 bg-slate-50 rounded-lg border border-slate-200">
|
||
<h4 className="font-medium text-slate-800 mb-2">2. Rechtsgrundlage</h4>
|
||
<ul className="text-sm text-slate-600 list-disc list-inside space-y-1">
|
||
<li><strong>Art. 6 Abs. 1 lit. c DSGVO</strong> - Erfuellung rechtlicher Verpflichtungen</li>
|
||
<li><strong>Art. 6 Abs. 1 lit. f DSGVO</strong> - Berechtigte Interessen (Compliance-Management)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="p-4 bg-slate-50 rounded-lg border border-slate-200">
|
||
<h4 className="font-medium text-slate-800 mb-2">3. Verarbeitete Datenkategorien</h4>
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full text-sm mt-2">
|
||
<thead>
|
||
<tr className="border-b border-slate-200">
|
||
<th className="text-left py-2 px-2 font-medium text-slate-600">Kategorie</th>
|
||
<th className="text-left py-2 px-2 font-medium text-slate-600">Speicherung</th>
|
||
<th className="text-left py-2 px-2 font-medium text-slate-600">Aufbewahrung</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="text-slate-600">
|
||
<tr className="border-b border-slate-100">
|
||
<td className="py-2 px-2">Use-Case-Beschreibung</td>
|
||
<td className="py-2 px-2">Nur Hash (SHA-256)</td>
|
||
<td className="py-2 px-2">10 Jahre</td>
|
||
</tr>
|
||
<tr className="border-b border-slate-100">
|
||
<td className="py-2 px-2">Bewertungsergebnis</td>
|
||
<td className="py-2 px-2">Vollstaendig</td>
|
||
<td className="py-2 px-2">10 Jahre</td>
|
||
</tr>
|
||
<tr className="border-b border-slate-100">
|
||
<td className="py-2 px-2">Audit-Trail</td>
|
||
<td className="py-2 px-2">Vollstaendig</td>
|
||
<td className="py-2 px-2">10 Jahre</td>
|
||
</tr>
|
||
<tr>
|
||
<td className="py-2 px-2">Eskalations-Historie</td>
|
||
<td className="py-2 px-2">Vollstaendig</td>
|
||
<td className="py-2 px-2">10 Jahre</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-4 bg-slate-50 rounded-lg border border-slate-200">
|
||
<h4 className="font-medium text-slate-800 mb-2">4. Keine autonomen KI-Entscheidungen</h4>
|
||
<p className="text-sm text-slate-600">
|
||
Das System trifft <strong>KEINE automatisierten Einzelentscheidungen</strong> im Sinne
|
||
von Art. 22 DSGVO, da:
|
||
</p>
|
||
<ul className="text-sm text-slate-600 list-disc list-inside mt-2 space-y-1">
|
||
<li>Regelauswertung ist keine rechtlich bindende Entscheidung</li>
|
||
<li>Alle kritischen Faelle werden menschlich geprueft (E1-E3)</li>
|
||
<li>BLOCK-Entscheidungen erfordern immer menschliche Freigabe</li>
|
||
<li>Betroffene haben Anfechtungsmoeglichkeit ueber Eskalation</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="p-4 bg-green-50 rounded-lg border border-green-200">
|
||
<h4 className="font-medium text-green-800 mb-2">5. Technische und Organisatorische Massnahmen</h4>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
|
||
<div>
|
||
<strong className="text-green-700">Vertraulichkeit</strong>
|
||
<ul className="text-green-700 list-disc list-inside mt-1">
|
||
<li>RBAC mit Tenant-Isolation</li>
|
||
<li>TLS 1.3 Verschluesselung</li>
|
||
<li>AES-256 at rest</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<strong className="text-green-700">Integritaet</strong>
|
||
<ul className="text-green-700 list-disc list-inside mt-1">
|
||
<li>Unveraenderlicher Audit-Trail</li>
|
||
<li>Policy-Versionierung</li>
|
||
<li>Input-Validierung</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex gap-4">
|
||
<a
|
||
href="/api/ucca/documentation/architecture.md"
|
||
download
|
||
className="flex-1 p-4 bg-primary-50 rounded-lg border border-primary-200 text-center hover:bg-primary-100"
|
||
>
|
||
<div className="text-2xl mb-2">📄</div>
|
||
<div className="font-medium text-primary-800">ARCHITECTURE.md herunterladen</div>
|
||
<div className="text-sm text-primary-600">Technische Dokumentation</div>
|
||
</a>
|
||
<a
|
||
href="/api/ucca/documentation/auditor.md"
|
||
download
|
||
className="flex-1 p-4 bg-green-50 rounded-lg border border-green-200 text-center hover:bg-green-100"
|
||
>
|
||
<div className="text-2xl mb-2">📋</div>
|
||
<div className="font-medium text-green-800">AUDITOR_DOCUMENTATION.md</div>
|
||
<div className="text-sm text-green-600">Art. 30 DSGVO konform</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
)
|
||
|
||
const renderRulesTab = () => (
|
||
<div className="space-y-6">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h3 className="font-semibold text-slate-800 text-lg">Regel-Katalog</h3>
|
||
<p className="text-sm text-slate-500">Policy Version: {policyVersion}</p>
|
||
</div>
|
||
<div className="text-sm text-slate-500">
|
||
{rules.length} Regeln insgesamt
|
||
</div>
|
||
</div>
|
||
|
||
{loading ? (
|
||
<div className="text-center py-8 text-slate-500">Lade Regeln...</div>
|
||
) : (
|
||
<div className="space-y-4">
|
||
{/* Group by category */}
|
||
{Array.from(new Set(rules.map(r => r.category))).map(category => (
|
||
<div key={category} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
||
<div className="px-4 py-3 bg-slate-50 border-b border-slate-200">
|
||
<h4 className="font-medium text-slate-800">{category}</h4>
|
||
<p className="text-xs text-slate-500">
|
||
{rules.filter(r => r.category === category).length} Regeln
|
||
</p>
|
||
</div>
|
||
<div className="divide-y divide-slate-100">
|
||
{rules.filter(r => r.category === category).map(rule => (
|
||
<div key={rule.code} className="p-4">
|
||
<div className="flex items-start justify-between gap-4">
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2">
|
||
<span className="font-mono text-sm text-slate-500">{rule.code}</span>
|
||
<span className={`text-xs px-2 py-0.5 rounded ${
|
||
rule.severity === 'BLOCK' ? 'bg-red-100 text-red-700' :
|
||
rule.severity === 'WARN' ? 'bg-yellow-100 text-yellow-700' :
|
||
'bg-blue-100 text-blue-700'
|
||
}`}>
|
||
{rule.severity}
|
||
</span>
|
||
</div>
|
||
<div className="font-medium text-slate-800 mt-1">{rule.title}</div>
|
||
<div className="text-sm text-slate-600 mt-1">{rule.description}</div>
|
||
{rule.gdpr_ref && (
|
||
<div className="text-xs text-slate-500 mt-2">{rule.gdpr_ref}</div>
|
||
)}
|
||
</div>
|
||
{rule.risk_add && (
|
||
<div className="text-sm font-medium text-red-600">
|
||
+{rule.risk_add}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
|
||
const renderLegalCorpus = () => (
|
||
<div className="space-y-6">
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
||
<h3 className="font-semibold text-slate-800 text-lg mb-4">Legal RAG Corpus</h3>
|
||
<p className="text-slate-600 mb-4">
|
||
Das System verwendet einen semantischen Suchindex mit 2.274 Chunks aus 19 EU-Regulierungen
|
||
fuer rechtsgrundlagenbasierte Erklaerungen.
|
||
</p>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
|
||
<h4 className="font-medium text-blue-800 mb-2">Indexierte Regulierungen</h4>
|
||
<ul className="text-sm text-blue-700 space-y-1">
|
||
<li>DSGVO - Datenschutz-Grundverordnung</li>
|
||
<li>AI Act - EU KI-Verordnung</li>
|
||
<li>NIS2 - Cybersicherheits-Richtlinie</li>
|
||
<li>CRA - Cyber Resilience Act</li>
|
||
<li>Data Act - Datengesetz</li>
|
||
<li>DSA/DMA - Digital Services/Markets Act</li>
|
||
<li>DPF - EU-US Data Privacy Framework</li>
|
||
<li>BSI-TR-03161 - Digitale Identitaeten</li>
|
||
</ul>
|
||
</div>
|
||
<div className="p-4 bg-green-50 rounded-lg border border-green-200">
|
||
<h4 className="font-medium text-green-800 mb-2">RAG-Funktionalitaet</h4>
|
||
<ul className="text-sm text-green-700 space-y-1">
|
||
<li>Hybride Suche (Dense + BM25)</li>
|
||
<li>Semantisches Chunking</li>
|
||
<li>Cross-Encoder Reranking</li>
|
||
<li>Artikel-Referenz-Extraktion</li>
|
||
<li>Mehrsprachig (DE/EN)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-xl border border-slate-200 p-6">
|
||
<h3 className="font-semibold text-slate-800 mb-4">Verwendung im System</h3>
|
||
<div className="space-y-3">
|
||
<div className="flex items-start gap-3">
|
||
<div className="w-8 h-8 bg-primary-100 text-primary-700 rounded-full flex items-center justify-center flex-shrink-0">
|
||
1
|
||
</div>
|
||
<div>
|
||
<div className="font-medium text-slate-800">Benutzer fordert Erklaerung an</div>
|
||
<div className="text-sm text-slate-600">
|
||
Nach der Bewertung kann eine LLM-basierte Erklaerung generiert werden.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start gap-3">
|
||
<div className="w-8 h-8 bg-primary-100 text-primary-700 rounded-full flex items-center justify-center flex-shrink-0">
|
||
2
|
||
</div>
|
||
<div>
|
||
<div className="font-medium text-slate-800">Legal RAG Client sucht relevante Artikel</div>
|
||
<div className="text-sm text-slate-600">
|
||
Basierend auf den ausgeloesten Regeln werden passende Gesetzestexte gefunden.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-start gap-3">
|
||
<div className="w-8 h-8 bg-primary-100 text-primary-700 rounded-full flex items-center justify-center flex-shrink-0">
|
||
3
|
||
</div>
|
||
<div>
|
||
<div className="font-medium text-slate-800">LLM generiert Erklaerung mit Rechtsgrundlage</div>
|
||
<div className="text-sm text-slate-600">
|
||
Die Erklaerung referenziert konkrete Artikel aus DSGVO, AI Act etc.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
|
||
// ============================================================================
|
||
// Tabs Configuration
|
||
// ============================================================================
|
||
|
||
const tabs: { id: DocTab; label: string; icon: string }[] = [
|
||
{ id: 'overview', label: 'Uebersicht', icon: '🏠' },
|
||
{ id: 'architecture', label: 'Architektur', icon: '🏗️' },
|
||
{ id: 'auditor', label: 'Fuer Auditoren', icon: '📋' },
|
||
{ id: 'rules', label: 'Regel-Katalog', icon: '📜' },
|
||
{ id: 'legal-corpus', label: 'Legal RAG', icon: '⚖️' },
|
||
]
|
||
|
||
// ============================================================================
|
||
// Main Render
|
||
// ============================================================================
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<div className="flex items-center justify-between">
|
||
<PagePurpose
|
||
title="System-Dokumentation"
|
||
purpose="Transparente Dokumentation des UCCA-Systems fuer Entwickler, Auditoren und Datenschutzbeauftragte. Alle Regeln, Kontrollen und Architektur-Details sind hier einsehbar."
|
||
audience={['Entwickler', 'DSB', 'Externe Auditoren', 'Rechtsabteilung']}
|
||
gdprArticles={['Art. 30', 'Art. 32', 'Art. 35']}
|
||
collapsible={true}
|
||
defaultCollapsed={true}
|
||
/>
|
||
<Link
|
||
href="/dsgvo/advisory-board"
|
||
className="px-4 py-2 text-sm text-slate-600 hover:text-slate-800 border border-slate-200 rounded-lg hover:bg-slate-50"
|
||
>
|
||
← Zurueck zum Advisory Board
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Tab Navigation */}
|
||
<div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
|
||
<div className="flex border-b border-slate-200 overflow-x-auto">
|
||
{tabs.map(tab => (
|
||
<button
|
||
key={tab.id}
|
||
onClick={() => setActiveTab(tab.id)}
|
||
className={`flex items-center gap-2 px-4 py-3 text-sm font-medium whitespace-nowrap transition-colors ${
|
||
activeTab === tab.id
|
||
? 'text-primary-600 border-b-2 border-primary-600 bg-primary-50'
|
||
: 'text-slate-600 hover:text-slate-800 hover:bg-slate-50'
|
||
}`}
|
||
>
|
||
<span>{tab.icon}</span>
|
||
{tab.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
<div className="p-6">
|
||
{activeTab === 'overview' && renderOverview()}
|
||
{activeTab === 'architecture' && renderArchitecture()}
|
||
{activeTab === 'auditor' && renderAuditorInfo()}
|
||
{activeTab === 'rules' && renderRulesTab()}
|
||
{activeTab === 'legal-corpus' && renderLegalCorpus()}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|