chore: Add development screens, update navigation and docker-compose
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Boenisch
1132
admin-compliance/app/(admin)/development/brandbook/page.tsx
Normal file
1132
admin-compliance/app/(admin)/development/brandbook/page.tsx
Normal file
File diff suppressed because it is too large
Load Diff
622
admin-compliance/app/(admin)/development/screen-flow/page.tsx
Normal file
622
admin-compliance/app/(admin)/development/screen-flow/page.tsx
Normal file
@@ -0,0 +1,622 @@
|
||||
'use client'
|
||||
|
||||
/**
|
||||
* Screen Flow Visualization - Compliance SDK
|
||||
*
|
||||
* Visualisiert alle Screens aus:
|
||||
* - Admin Compliance (Port 3007): Verwaltung
|
||||
* - SDK Pipeline: Compliance-Module
|
||||
*/
|
||||
|
||||
import { useCallback, useState, useMemo, useEffect } from 'react'
|
||||
import ReactFlow, {
|
||||
Node,
|
||||
Edge,
|
||||
Controls,
|
||||
Background,
|
||||
MiniMap,
|
||||
useNodesState,
|
||||
useEdgesState,
|
||||
BackgroundVariant,
|
||||
MarkerType,
|
||||
Panel,
|
||||
} from 'reactflow'
|
||||
import 'reactflow/dist/style.css'
|
||||
|
||||
// ============================================
|
||||
// TYPES
|
||||
// ============================================
|
||||
|
||||
interface ScreenDefinition {
|
||||
id: string
|
||||
name: string
|
||||
description: string
|
||||
category: string
|
||||
icon: string
|
||||
url?: string
|
||||
}
|
||||
|
||||
interface ConnectionDef {
|
||||
source: string
|
||||
target: string
|
||||
label?: string
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// ADMIN COMPLIANCE SCREENS (Port 3007)
|
||||
// ============================================
|
||||
|
||||
const SCREENS: ScreenDefinition[] = [
|
||||
// === DASHBOARD & VERWALTUNG (Blue) ===
|
||||
{ id: 'dashboard', name: 'Dashboard', description: 'Uebersicht & Statistiken', category: 'dashboard', icon: '🏠', url: '/dashboard' },
|
||||
{ id: 'catalog-manager', name: 'Katalogverwaltung', description: 'SDK-Kataloge & Auswahltabellen', category: 'dashboard', icon: '📦', url: '/dashboard/catalog-manager' },
|
||||
|
||||
// === DSGVO-GRUNDLAGEN (Violet) ===
|
||||
{ id: 'vvt', name: 'VVT', description: 'Verarbeitungsverzeichnis Art. 30', category: 'dsgvo', icon: '📋', url: '/sdk/vvt' },
|
||||
{ id: 'dsfa', name: 'DSFA', description: 'Datenschutz-Folgenabschaetzung', category: 'dsgvo', icon: '⚖️', url: '/sdk/dsfa' },
|
||||
{ id: 'tom', name: 'TOMs', description: 'Technische & Org. Massnahmen', category: 'dsgvo', icon: '🛡️', url: '/sdk/tom' },
|
||||
{ id: 'tom-generator', name: 'TOM Generator', description: 'TOM-Erstellung mit Wizard', category: 'dsgvo', icon: '⚙️', url: '/sdk/tom-generator' },
|
||||
{ id: 'loeschfristen', name: 'Loeschfristen', description: 'Aufbewahrung & Deadlines', category: 'dsgvo', icon: '🗑️', url: '/sdk/loeschfristen' },
|
||||
{ id: 'einwilligungen', name: 'Einwilligungen', description: 'Nutzer-Consent Uebersicht', category: 'dsgvo', icon: '✅', url: '/sdk/einwilligungen' },
|
||||
{ id: 'dsr', name: 'Datenschutzanfragen', description: 'DSGVO Art. 15-21 (DSR)', category: 'dsgvo', icon: '🔒', url: '/sdk/dsr' },
|
||||
{ id: 'consent', name: 'Consent Verwaltung', description: 'Rechtliche Dokumente & Versionen', category: 'dsgvo', icon: '📄', url: '/sdk/consent' },
|
||||
{ id: 'consent-management', name: 'Consent Management', description: 'Einwilligungsmanagement', category: 'dsgvo', icon: '📝', url: '/sdk/consent-management' },
|
||||
|
||||
// === COMPLIANCE-MANAGEMENT (Purple) ===
|
||||
{ id: 'compliance-hub', name: 'Compliance Hub', description: 'Zentrales GRC Dashboard', category: 'compliance', icon: '✅', url: '/sdk/compliance-hub' },
|
||||
{ id: 'compliance-scope', name: 'Compliance Scope', description: 'Geltungsbereich definieren', category: 'compliance', icon: '🎯', url: '/sdk/compliance-scope' },
|
||||
{ id: 'requirements', name: 'Requirements', description: '558+ aus 19 Verordnungen', category: 'compliance', icon: '📜', url: '/sdk/requirements' },
|
||||
{ id: 'controls', name: 'Controls', description: '474 Control-Mappings', category: 'compliance', icon: '🎛️', url: '/sdk/controls' },
|
||||
{ id: 'evidence', name: 'Evidence', description: 'Nachweise & Dokumentation', category: 'compliance', icon: '📎', url: '/sdk/evidence' },
|
||||
{ id: 'risks', name: 'Risiken', description: 'Risk Matrix & Register', category: 'compliance', icon: '⚠️', url: '/sdk/risks' },
|
||||
{ id: 'audit-checklist', name: 'Audit Checkliste', description: '476 Anforderungen pruefen', category: 'compliance', icon: '📋', url: '/sdk/audit-checklist' },
|
||||
{ id: 'audit-report', name: 'Audit Report', description: 'PDF Audit-Berichte', category: 'compliance', icon: '📊', url: '/sdk/audit-report' },
|
||||
{ id: 'workflow', name: 'Workflow', description: 'Freigabe-Workflows', category: 'compliance', icon: '🔄', url: '/sdk/workflow' },
|
||||
{ id: 'modules', name: 'Service Registry', description: '30+ Service-Module', category: 'compliance', icon: '🔧', url: '/sdk/modules' },
|
||||
|
||||
// === KI & AUTOMATISIERUNG (Teal) ===
|
||||
{ id: 'ai-act', name: 'EU-AI-Act', description: 'KI-Risikoklassifizierung', category: 'ai', icon: '🤖', url: '/sdk/ai-act' },
|
||||
{ id: 'screening', name: 'Screening', description: 'Compliance-Screening & Pruefung', category: 'ai', icon: '🔍', url: '/sdk/screening' },
|
||||
{ id: 'rag', name: 'Daten & RAG', description: 'Training Data & RAG', category: 'ai', icon: '🗄️', url: '/sdk/rag' },
|
||||
{ id: 'quality', name: 'Qualitaet & Audit', description: 'Compliance-Audit & Traceability', category: 'ai', icon: '✨', url: '/sdk/quality' },
|
||||
{ id: 'advisory-board', name: 'Advisory Board', description: 'KI-Use-Case Pruefung', category: 'ai', icon: '🧑⚖️', url: '/sdk/advisory-board' },
|
||||
{ id: 'obligations', name: 'Pflichten', description: 'NIS2, DSGVO, AI Act', category: 'ai', icon: '⚡', url: '/sdk/obligations' },
|
||||
{ id: 'escalations', name: 'Eskalations-Queue', description: 'DSB Review & Freigabe', category: 'ai', icon: '🚨', url: '/sdk/escalations' },
|
||||
|
||||
// === DOKUMENTE & LEGAL (Orange) ===
|
||||
{ id: 'document-generator', name: 'Document Generator', description: 'Datenschutz-Dokumente erstellen', category: 'documents', icon: '📄', url: '/sdk/document-generator' },
|
||||
{ id: 'notfallplan', name: 'Notfallplan', description: 'Incident Response Plan', category: 'documents', icon: '🚨', url: '/sdk/notfallplan' },
|
||||
{ id: 'source-policy', name: 'Quellen-Policy', description: 'Datenquellen & Compliance', category: 'documents', icon: '📚', url: '/sdk/source-policy' },
|
||||
{ id: 'cookie-banner', name: 'Cookie-Banner', description: 'Cookie Consent Builder', category: 'documents', icon: '🍪', url: '/sdk/cookie-banner' },
|
||||
{ id: 'company-profile', name: 'Unternehmensprofil', description: 'Firmen-Stammdaten', category: 'documents', icon: '🏢', url: '/sdk/company-profile' },
|
||||
{ id: 'security-backlog', name: 'Security Backlog', description: 'Sicherheits-Massnahmen Tracking', category: 'documents', icon: '🔐', url: '/sdk/security-backlog' },
|
||||
|
||||
// === VENDOR & EXTERN (Green) ===
|
||||
{ id: 'vendor-compliance', name: 'Vendor Compliance', description: 'Lieferanten-Management', category: 'vendor', icon: '🏭', url: '/sdk/vendor-compliance' },
|
||||
{ id: 'vendor-vendors', name: 'Vendor-Liste', description: 'Lieferanten-Uebersicht', category: 'vendor', icon: '📋', url: '/sdk/vendor-compliance/vendors' },
|
||||
{ id: 'vendor-contracts', name: 'Vertraege', description: 'AVV & Vertragsmanagement', category: 'vendor', icon: '📝', url: '/sdk/vendor-compliance/contracts' },
|
||||
{ id: 'vendor-controls', name: 'Vendor Controls', description: 'Lieferanten-Kontrollen', category: 'vendor', icon: '🎛️', url: '/sdk/vendor-compliance/controls' },
|
||||
{ id: 'vendor-risks', name: 'Vendor Risiken', description: 'Lieferanten-Risikobewertung', category: 'vendor', icon: '⚠️', url: '/sdk/vendor-compliance/risks' },
|
||||
{ id: 'vendor-processing', name: 'Verarbeitungen', description: 'Auftragsverarbeitung', category: 'vendor', icon: '🔄', url: '/sdk/vendor-compliance/processing-activities' },
|
||||
{ id: 'vendor-reports', name: 'Vendor Reports', description: 'Lieferanten-Berichte', category: 'vendor', icon: '📊', url: '/sdk/vendor-compliance/reports' },
|
||||
{ id: 'dsms', name: 'DSMS', description: 'Datenschutz-Management-System', category: 'vendor', icon: '🏛️', url: '/sdk/dsms' },
|
||||
{ id: 'import', name: 'Import', description: 'Daten-Import', category: 'vendor', icon: '📥', url: '/sdk/import' },
|
||||
|
||||
// === ENTWICKLUNG (Slate) ===
|
||||
{ id: 'dev-docs', name: 'Developer Docs', description: 'API & Architektur', category: 'development', icon: '📖', url: '/development/docs' },
|
||||
{ id: 'dev-screen-flow', name: 'Screen Flow', description: 'UI Screen-Verbindungen', category: 'development', icon: '🔀', url: '/development/screen-flow' },
|
||||
{ id: 'dev-brandbook', name: 'Brandbook', description: 'Corporate Design', category: 'development', icon: '🎨', url: '/development/brandbook' },
|
||||
]
|
||||
|
||||
const CONNECTIONS: ConnectionDef[] = [
|
||||
// === DASHBOARD FLOW ===
|
||||
{ source: 'dashboard', target: 'catalog-manager', label: 'Kataloge' },
|
||||
{ source: 'dashboard', target: 'compliance-hub', label: 'Compliance' },
|
||||
{ source: 'dashboard', target: 'vvt', label: 'VVT' },
|
||||
|
||||
// === DSGVO FLOW ===
|
||||
{ source: 'consent-management', target: 'einwilligungen', label: 'Nutzer' },
|
||||
{ source: 'consent-management', target: 'dsr' },
|
||||
{ source: 'consent', target: 'consent-management' },
|
||||
{ source: 'consent', target: 'cookie-banner' },
|
||||
{ source: 'dsr', target: 'loeschfristen' },
|
||||
{ source: 'vvt', target: 'tom' },
|
||||
{ source: 'vvt', target: 'dsfa' },
|
||||
{ source: 'dsfa', target: 'tom' },
|
||||
{ source: 'tom', target: 'tom-generator', label: 'Wizard' },
|
||||
{ source: 'einwilligungen', target: 'consent' },
|
||||
{ source: 'einwilligungen', target: 'loeschfristen' },
|
||||
|
||||
// === COMPLIANCE FLOW ===
|
||||
{ source: 'compliance-hub', target: 'audit-checklist', label: 'Audit' },
|
||||
{ source: 'compliance-hub', target: 'requirements', label: 'Anforderungen' },
|
||||
{ source: 'compliance-hub', target: 'risks', label: 'Risiken' },
|
||||
{ source: 'compliance-hub', target: 'ai-act', label: 'AI Act' },
|
||||
{ source: 'compliance-hub', target: 'compliance-scope' },
|
||||
{ source: 'requirements', target: 'controls' },
|
||||
{ source: 'controls', target: 'evidence' },
|
||||
{ source: 'audit-checklist', target: 'audit-report', label: 'Report' },
|
||||
{ source: 'risks', target: 'controls' },
|
||||
{ source: 'modules', target: 'controls' },
|
||||
{ source: 'obligations', target: 'requirements' },
|
||||
{ source: 'dsms', target: 'workflow' },
|
||||
{ source: 'workflow', target: 'audit-report' },
|
||||
|
||||
// === KI & AUTOMATISIERUNG FLOW ===
|
||||
{ source: 'advisory-board', target: 'escalations', label: 'Eskalation' },
|
||||
{ source: 'advisory-board', target: 'dsfa', label: 'Risiko' },
|
||||
{ source: 'ai-act', target: 'screening' },
|
||||
{ source: 'screening', target: 'advisory-board' },
|
||||
{ source: 'source-policy', target: 'rag' },
|
||||
{ source: 'rag', target: 'quality' },
|
||||
|
||||
// === DOKUMENTE FLOW ===
|
||||
{ source: 'document-generator', target: 'notfallplan' },
|
||||
{ source: 'document-generator', target: 'audit-report' },
|
||||
{ source: 'security-backlog', target: 'tom' },
|
||||
{ source: 'company-profile', target: 'document-generator' },
|
||||
|
||||
// === VENDOR FLOW ===
|
||||
{ source: 'vendor-compliance', target: 'vendor-vendors' },
|
||||
{ source: 'vendor-compliance', target: 'vendor-contracts' },
|
||||
{ source: 'vendor-compliance', target: 'vendor-controls' },
|
||||
{ source: 'vendor-compliance', target: 'vendor-risks' },
|
||||
{ source: 'vendor-compliance', target: 'vendor-processing' },
|
||||
{ source: 'vendor-compliance', target: 'vendor-reports' },
|
||||
{ source: 'vendor-vendors', target: 'vendor-contracts' },
|
||||
{ source: 'vendor-risks', target: 'risks' },
|
||||
{ source: 'dsms', target: 'compliance-hub' },
|
||||
{ source: 'import', target: 'catalog-manager' },
|
||||
|
||||
// === ENTWICKLUNG FLOW ===
|
||||
{ source: 'dev-brandbook', target: 'dev-screen-flow' },
|
||||
{ source: 'dev-docs', target: 'dev-brandbook' },
|
||||
]
|
||||
|
||||
// ============================================
|
||||
// CATEGORY COLORS & LABELS
|
||||
// ============================================
|
||||
|
||||
const COLORS: Record<string, { bg: string; border: string; text: string }> = {
|
||||
dashboard: { bg: '#dbeafe', border: '#3b82f6', text: '#1e40af' },
|
||||
dsgvo: { bg: '#ede9fe', border: '#7c3aed', text: '#5b21b6' },
|
||||
compliance: { bg: '#f3e8ff', border: '#9333ea', text: '#6b21a8' },
|
||||
ai: { bg: '#ccfbf1', border: '#14b8a6', text: '#0f766e' },
|
||||
documents: { bg: '#ffedd5', border: '#f97316', text: '#c2410c' },
|
||||
vendor: { bg: '#dcfce7', border: '#22c55e', text: '#166534' },
|
||||
development: { bg: '#f1f5f9', border: '#64748b', text: '#334155' },
|
||||
}
|
||||
|
||||
const LABELS: Record<string, string> = {
|
||||
dashboard: 'Dashboard & Verwaltung',
|
||||
dsgvo: 'DSGVO-Grundlagen',
|
||||
compliance: 'Compliance-Management',
|
||||
ai: 'KI & Automatisierung',
|
||||
documents: 'Dokumente & Legal',
|
||||
vendor: 'Vendor & Extern',
|
||||
development: 'Entwicklung',
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// HELPER: Find all connected nodes
|
||||
// ============================================
|
||||
|
||||
function findConnectedNodes(
|
||||
startNodeId: string,
|
||||
connections: ConnectionDef[],
|
||||
direction: 'children' | 'parents' | 'both' = 'children'
|
||||
): Set<string> {
|
||||
const connected = new Set<string>()
|
||||
connected.add(startNodeId)
|
||||
|
||||
const queue = [startNodeId]
|
||||
while (queue.length > 0) {
|
||||
const current = queue.shift()!
|
||||
|
||||
connections.forEach(conn => {
|
||||
if ((direction === 'children' || direction === 'both') && conn.source === current) {
|
||||
if (!connected.has(conn.target)) {
|
||||
connected.add(conn.target)
|
||||
queue.push(conn.target)
|
||||
}
|
||||
}
|
||||
if ((direction === 'parents' || direction === 'both') && conn.target === current) {
|
||||
if (!connected.has(conn.source)) {
|
||||
connected.add(conn.source)
|
||||
queue.push(conn.source)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return connected
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// LAYOUT HELPERS
|
||||
// ============================================
|
||||
|
||||
const CATEGORY_POSITIONS: Record<string, { x: number; y: number }> = {
|
||||
dashboard: { x: 400, y: 30 },
|
||||
dsgvo: { x: 50, y: 150 },
|
||||
compliance: { x: 700, y: 150 },
|
||||
ai: { x: 50, y: 380 },
|
||||
documents: { x: 400, y: 380 },
|
||||
vendor: { x: 700, y: 380 },
|
||||
development: { x: 400, y: 580 },
|
||||
}
|
||||
|
||||
const getNodePosition = (id: string, category: string) => {
|
||||
const base = CATEGORY_POSITIONS[category] || { x: 400, y: 300 }
|
||||
const categoryScreens = SCREENS.filter(s => s.category === category)
|
||||
const categoryIndex = categoryScreens.findIndex(s => s.id === id)
|
||||
|
||||
const cols = Math.ceil(Math.sqrt(categoryScreens.length + 1))
|
||||
const row = Math.floor(categoryIndex / cols)
|
||||
const col = categoryIndex % cols
|
||||
|
||||
return {
|
||||
x: base.x + col * 160,
|
||||
y: base.y + row * 90,
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// MAIN COMPONENT
|
||||
// ============================================
|
||||
|
||||
export default function ScreenFlowPage() {
|
||||
const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
|
||||
const [selectedNode, setSelectedNode] = useState<string | null>(null)
|
||||
const [previewScreen, setPreviewScreen] = useState<ScreenDefinition | null>(null)
|
||||
|
||||
const baseUrl = 'https://macmini:3007'
|
||||
|
||||
// Calculate connected nodes
|
||||
const connectedNodes = useMemo(() => {
|
||||
if (!selectedNode) return new Set<string>()
|
||||
return findConnectedNodes(selectedNode, CONNECTIONS, 'children')
|
||||
}, [selectedNode])
|
||||
|
||||
// Create nodes with useMemo
|
||||
const initialNodes = useMemo((): Node[] => {
|
||||
return SCREENS.map((screen) => {
|
||||
const catColors = COLORS[screen.category] || { bg: '#f1f5f9', border: '#94a3b8', text: '#475569' }
|
||||
const position = getNodePosition(screen.id, screen.category)
|
||||
|
||||
let opacity = 1
|
||||
if (selectedNode) {
|
||||
opacity = connectedNodes.has(screen.id) ? 1 : 0.2
|
||||
} else if (selectedCategory) {
|
||||
opacity = screen.category === selectedCategory ? 1 : 0.2
|
||||
}
|
||||
|
||||
const isSelected = selectedNode === screen.id
|
||||
|
||||
return {
|
||||
id: screen.id,
|
||||
type: 'default',
|
||||
position,
|
||||
data: {
|
||||
label: (
|
||||
<div className="text-center p-1">
|
||||
<div className="text-lg mb-1">{screen.icon}</div>
|
||||
<div className="font-medium text-xs leading-tight">{screen.name}</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
style: {
|
||||
background: isSelected ? catColors.border : catColors.bg,
|
||||
color: isSelected ? 'white' : catColors.text,
|
||||
border: `2px solid ${catColors.border}`,
|
||||
borderRadius: '12px',
|
||||
padding: '6px',
|
||||
minWidth: '110px',
|
||||
opacity,
|
||||
cursor: 'pointer',
|
||||
boxShadow: isSelected ? `0 0 20px ${catColors.border}` : 'none',
|
||||
},
|
||||
}
|
||||
})
|
||||
}, [selectedCategory, selectedNode, connectedNodes])
|
||||
|
||||
// Create edges with useMemo
|
||||
const initialEdges = useMemo((): Edge[] => {
|
||||
return CONNECTIONS.map((conn, index) => {
|
||||
const isHighlighted = selectedNode && (conn.source === selectedNode || conn.target === selectedNode)
|
||||
const isInSubtree = selectedNode && connectedNodes.has(conn.source) && connectedNodes.has(conn.target)
|
||||
|
||||
return {
|
||||
id: `e-${conn.source}-${conn.target}-${index}`,
|
||||
source: conn.source,
|
||||
target: conn.target,
|
||||
label: conn.label,
|
||||
type: 'smoothstep',
|
||||
animated: isHighlighted || false,
|
||||
style: {
|
||||
stroke: isHighlighted ? '#3b82f6' : (isInSubtree ? '#94a3b8' : '#e2e8f0'),
|
||||
strokeWidth: isHighlighted ? 3 : 1.5,
|
||||
opacity: selectedNode ? (isInSubtree ? 1 : 0.15) : 1,
|
||||
},
|
||||
labelStyle: { fontSize: 9, fill: '#64748b' },
|
||||
labelBgStyle: { fill: '#f8fafc' },
|
||||
markerEnd: { type: MarkerType.ArrowClosed, color: isHighlighted ? '#3b82f6' : '#94a3b8', width: 15, height: 15 },
|
||||
}
|
||||
})
|
||||
}, [selectedNode, connectedNodes])
|
||||
|
||||
const [nodes, setNodes, onNodesChange] = useNodesState([])
|
||||
const [edges, setEdges, onEdgesChange] = useEdgesState([])
|
||||
|
||||
// Update nodes/edges when dependencies change
|
||||
useEffect(() => {
|
||||
setNodes(initialNodes)
|
||||
setEdges(initialEdges)
|
||||
}, [initialNodes, initialEdges, setNodes, setEdges])
|
||||
|
||||
// Handle node click
|
||||
const onNodeClick = useCallback((_event: React.MouseEvent, node: Node) => {
|
||||
const screen = SCREENS.find(s => s.id === node.id)
|
||||
|
||||
if (selectedNode === node.id) {
|
||||
if (screen?.url) {
|
||||
window.open(`${baseUrl}${screen.url}`, '_blank')
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
setSelectedNode(node.id)
|
||||
setSelectedCategory(null)
|
||||
|
||||
if (screen) {
|
||||
setPreviewScreen(screen)
|
||||
}
|
||||
}, [selectedNode, baseUrl])
|
||||
|
||||
// Handle background click - deselect
|
||||
const onPaneClick = useCallback(() => {
|
||||
setSelectedNode(null)
|
||||
setPreviewScreen(null)
|
||||
}, [])
|
||||
|
||||
// Stats
|
||||
const stats = {
|
||||
totalScreens: SCREENS.length,
|
||||
totalConnections: CONNECTIONS.length,
|
||||
connectedCount: connectedNodes.size,
|
||||
}
|
||||
|
||||
const categories = Object.keys(LABELS)
|
||||
|
||||
// Connected screens list
|
||||
const connectedScreens = selectedNode
|
||||
? SCREENS.filter(s => connectedNodes.has(s.id))
|
||||
: []
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-14 h-14 rounded-xl bg-violet-500 flex items-center justify-center text-2xl text-white">
|
||||
🔀
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-slate-900">Compliance SDK Screen Flow</h2>
|
||||
<p className="text-sm text-slate-500">
|
||||
{stats.totalScreens} Screens mit {stats.totalConnections} Verbindungen
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
<div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
|
||||
<div className="text-3xl font-bold text-slate-800">{stats.totalScreens}</div>
|
||||
<div className="text-sm text-slate-500">Screens</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
|
||||
<div className="text-3xl font-bold text-violet-600">{stats.totalConnections}</div>
|
||||
<div className="text-sm text-slate-500">Verbindungen</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm col-span-2">
|
||||
{selectedNode ? (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="text-3xl">{previewScreen?.icon}</div>
|
||||
<div>
|
||||
<div className="font-bold text-slate-800">{previewScreen?.name}</div>
|
||||
<div className="text-sm text-slate-500">
|
||||
{stats.connectedCount} verbundene Screen{stats.connectedCount !== 1 ? 's' : ''}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedNode(null)
|
||||
setPreviewScreen(null)
|
||||
}}
|
||||
className="ml-auto px-3 py-1 text-sm bg-slate-100 hover:bg-slate-200 rounded-lg"
|
||||
>
|
||||
Zuruecksetzen
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-slate-500 text-sm">
|
||||
Klicke auf einen Screen um den Subtree zu sehen
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Category Filter */}
|
||||
<div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedCategory(null)
|
||||
setSelectedNode(null)
|
||||
setPreviewScreen(null)
|
||||
}}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
selectedCategory === null && !selectedNode
|
||||
? 'bg-slate-800 text-white'
|
||||
: 'bg-slate-100 text-slate-700 hover:bg-slate-200'
|
||||
}`}
|
||||
>
|
||||
Alle ({SCREENS.length})
|
||||
</button>
|
||||
{categories.map((key) => {
|
||||
const count = SCREENS.filter(s => s.category === key).length
|
||||
const catColors = COLORS[key] || { bg: '#f1f5f9', border: '#94a3b8', text: '#475569' }
|
||||
return (
|
||||
<button
|
||||
key={key}
|
||||
onClick={() => {
|
||||
setSelectedCategory(selectedCategory === key ? null : key)
|
||||
setSelectedNode(null)
|
||||
setPreviewScreen(null)
|
||||
}}
|
||||
className="px-4 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2"
|
||||
style={{
|
||||
background: selectedCategory === key ? catColors.border : catColors.bg,
|
||||
color: selectedCategory === key ? 'white' : catColors.text,
|
||||
}}
|
||||
>
|
||||
<span className="w-3 h-3 rounded-full" style={{ background: catColors.border }} />
|
||||
{LABELS[key]} ({count})
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Connected Screens List */}
|
||||
{selectedNode && connectedScreens.length > 1 && (
|
||||
<div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
|
||||
<div className="text-sm font-medium text-slate-700 mb-3">Verbundene Screens:</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{connectedScreens.map((screen) => {
|
||||
const catColors = COLORS[screen.category] || { bg: '#f1f5f9', border: '#94a3b8', text: '#475569' }
|
||||
const isCurrentNode = screen.id === selectedNode
|
||||
return (
|
||||
<button
|
||||
key={screen.id}
|
||||
onClick={() => {
|
||||
if (screen.url) {
|
||||
window.open(`${baseUrl}${screen.url}`, '_blank')
|
||||
}
|
||||
}}
|
||||
className={`px-3 py-2 rounded-lg text-sm font-medium transition-all flex items-center gap-2 ${
|
||||
isCurrentNode ? 'ring-2 ring-violet-500' : ''
|
||||
}`}
|
||||
style={{
|
||||
background: isCurrentNode ? catColors.border : catColors.bg,
|
||||
color: isCurrentNode ? 'white' : catColors.text,
|
||||
}}
|
||||
>
|
||||
<span>{screen.icon}</span>
|
||||
{screen.name}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Flow Diagram */}
|
||||
<div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden" style={{ height: '500px' }}>
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onNodeClick={onNodeClick}
|
||||
onPaneClick={onPaneClick}
|
||||
fitView
|
||||
fitViewOptions={{ padding: 0.2 }}
|
||||
attributionPosition="bottom-left"
|
||||
>
|
||||
<Controls />
|
||||
<MiniMap
|
||||
nodeColor={(node) => {
|
||||
const screen = SCREENS.find(s => s.id === node.id)
|
||||
const catColors = screen ? COLORS[screen.category] : null
|
||||
return catColors?.border || '#94a3b8'
|
||||
}}
|
||||
maskColor="rgba(0, 0, 0, 0.1)"
|
||||
/>
|
||||
<Background variant={BackgroundVariant.Dots} gap={12} size={1} />
|
||||
|
||||
<Panel position="top-left" className="bg-white/95 p-3 rounded-lg shadow-lg text-xs">
|
||||
<div className="font-medium text-slate-700 mb-2">
|
||||
🛡️ Compliance SDK
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
{categories.slice(0, 5).map((key) => {
|
||||
const catColors = COLORS[key] || { bg: '#f1f5f9', border: '#94a3b8' }
|
||||
return (
|
||||
<div key={key} className="flex items-center gap-2">
|
||||
<span
|
||||
className="w-3 h-3 rounded"
|
||||
style={{ background: catColors.bg, border: `1px solid ${catColors.border}` }}
|
||||
/>
|
||||
<span className="text-slate-600">{LABELS[key]}</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="mt-2 pt-2 border-t text-slate-400">
|
||||
Klick = Subtree<br/>
|
||||
Doppelklick = Oeffnen
|
||||
</div>
|
||||
</Panel>
|
||||
</ReactFlow>
|
||||
</div>
|
||||
|
||||
{/* Screen List */}
|
||||
<div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
|
||||
<div className="px-4 py-3 bg-slate-50 border-b flex items-center justify-between">
|
||||
<h3 className="font-medium text-slate-700">
|
||||
Alle Screens ({SCREENS.length})
|
||||
</h3>
|
||||
<span className="text-xs text-slate-400">{baseUrl}</span>
|
||||
</div>
|
||||
<div className="divide-y max-h-80 overflow-y-auto">
|
||||
{SCREENS
|
||||
.filter(s => !selectedCategory || s.category === selectedCategory)
|
||||
.map((screen) => {
|
||||
const catColors = COLORS[screen.category] || { bg: '#f1f5f9', border: '#94a3b8', text: '#475569' }
|
||||
return (
|
||||
<button
|
||||
key={screen.id}
|
||||
onClick={() => {
|
||||
setSelectedNode(screen.id)
|
||||
setSelectedCategory(null)
|
||||
setPreviewScreen(screen)
|
||||
}}
|
||||
className="w-full flex items-center gap-4 p-3 hover:bg-slate-50 transition-colors text-left"
|
||||
>
|
||||
<span
|
||||
className="w-9 h-9 rounded-lg flex items-center justify-center text-lg"
|
||||
style={{ background: catColors.bg }}
|
||||
>
|
||||
{screen.icon}
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-medium text-slate-800 text-sm">{screen.name}</div>
|
||||
<div className="text-xs text-slate-500 truncate">{screen.description}</div>
|
||||
</div>
|
||||
<span
|
||||
className="px-2 py-1 rounded text-xs font-medium shrink-0"
|
||||
style={{ background: catColors.bg, color: catColors.text }}
|
||||
>
|
||||
{LABELS[screen.category]}
|
||||
</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -56,20 +56,36 @@ export const navigation: NavCategory[] = [
|
||||
// =========================================================================
|
||||
{
|
||||
id: 'development',
|
||||
name: 'Entwicklung',
|
||||
name: 'Entwicklung & Produkte',
|
||||
icon: 'code',
|
||||
color: '#0ea5e9', // Sky-500
|
||||
color: '#64748b', // Slate-500
|
||||
colorClass: 'development',
|
||||
description: 'Dokumentation & Entwickler-Tools',
|
||||
description: 'Dokumentation, Screenflow & Brandbook',
|
||||
modules: [
|
||||
{
|
||||
id: 'docs',
|
||||
name: 'Dokumentation',
|
||||
name: 'Developer Docs',
|
||||
href: '/development/docs',
|
||||
description: 'MkDocs Projekt-Dokumentation',
|
||||
purpose: 'Technische Dokumentation der Compliance-Plattform mit Architektur, API-Referenz und Entwickler-Guides.',
|
||||
audience: ['Entwickler', 'Architekten'],
|
||||
},
|
||||
{
|
||||
id: 'screen-flow',
|
||||
name: 'Screen Flow',
|
||||
href: '/development/screen-flow',
|
||||
description: 'UI Screen-Verbindungen & Navigation',
|
||||
purpose: 'Visualisierung aller SDK-Screens und deren Verbindungen mit interaktivem ReactFlow-Diagramm.',
|
||||
audience: ['Entwickler', 'Designer'],
|
||||
},
|
||||
{
|
||||
id: 'brandbook',
|
||||
name: 'Brandbook',
|
||||
href: '/development/brandbook',
|
||||
description: 'Corporate Design & Styleguide',
|
||||
purpose: 'Compliance SDK Design-System mit Farben, Typografie, Komponenten und Tonalitaet.',
|
||||
audience: ['Entwickler', 'Designer'],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
@@ -24,7 +24,7 @@ export const roles: Role[] = [
|
||||
name: 'Entwickler',
|
||||
description: 'Voller Zugriff auf alle Compliance-Bereiche',
|
||||
icon: 'code',
|
||||
visibleCategories: ['compliance-sdk'],
|
||||
visibleCategories: ['compliance-sdk', 'development'],
|
||||
color: 'bg-primary-100 border-primary-300 text-primary-700',
|
||||
},
|
||||
{
|
||||
@@ -32,7 +32,7 @@ export const roles: Role[] = [
|
||||
name: 'Manager',
|
||||
description: 'Executive Uebersicht',
|
||||
icon: 'chart',
|
||||
visibleCategories: ['compliance-sdk'],
|
||||
visibleCategories: ['compliance-sdk', 'development'],
|
||||
color: 'bg-blue-100 border-blue-300 text-blue-700',
|
||||
},
|
||||
{
|
||||
@@ -40,7 +40,7 @@ export const roles: Role[] = [
|
||||
name: 'Auditor',
|
||||
description: 'Compliance Pruefung',
|
||||
icon: 'clipboard',
|
||||
visibleCategories: ['compliance-sdk'],
|
||||
visibleCategories: ['compliance-sdk', 'development'],
|
||||
color: 'bg-amber-100 border-amber-300 text-amber-700',
|
||||
},
|
||||
{
|
||||
@@ -48,7 +48,7 @@ export const roles: Role[] = [
|
||||
name: 'DSB',
|
||||
description: 'Datenschutzbeauftragter',
|
||||
icon: 'shield',
|
||||
visibleCategories: ['compliance-sdk'],
|
||||
visibleCategories: ['compliance-sdk', 'development'],
|
||||
color: 'bg-purple-100 border-purple-300 text-purple-700',
|
||||
},
|
||||
]
|
||||
|
||||
891
developer-portal/app/development/docs/page.tsx
Normal file
891
developer-portal/app/development/docs/page.tsx
Normal file
@@ -0,0 +1,891 @@
|
||||
import { DevPortalLayout, CodeBlock, InfoBox } from '@/components/DevPortalLayout'
|
||||
|
||||
export default function ComplianceServiceDocsPage() {
|
||||
return (
|
||||
<DevPortalLayout
|
||||
title="Wie funktioniert der Compliance Service?"
|
||||
description="Eine umfassende Erklaerung des gesamten Systems -- vom Rechtstext bis zur Compliance-Bewertung."
|
||||
>
|
||||
{/* ============================================================ */}
|
||||
{/* 1. EINLEITUNG */}
|
||||
{/* ============================================================ */}
|
||||
<h2 id="einfuehrung">1. Was ist der Compliance Hub?</h2>
|
||||
<p>
|
||||
Der <strong>BreakPilot Compliance Hub</strong> ist ein System, das Organisationen dabei
|
||||
unterstuetzt, gesetzliche Vorschriften einzuhalten. Er beantwortet die zentrale Frage:
|
||||
</p>
|
||||
<blockquote>
|
||||
<em>“Duerfen wir das, was wir vorhaben, ueberhaupt so machen -- und wenn ja, welche
|
||||
Auflagen muessen wir dafuer erfuellen?”</em>
|
||||
</blockquote>
|
||||
<p>
|
||||
Konkret geht es um EU- und deutsche Gesetze, die fuer den Umgang mit Daten und
|
||||
kuenstlicher Intelligenz relevant sind: die <strong>DSGVO</strong>, den <strong>AI Act</strong>,
|
||||
die <strong>NIS2-Richtlinie</strong> und viele weitere Regelwerke. Das System hat vier
|
||||
Hauptaufgaben:
|
||||
</p>
|
||||
<ol>
|
||||
<li>
|
||||
<strong>Wissen bereitstellen:</strong> Hunderte Rechtstexte sind eingelesen und
|
||||
durchsuchbar -- nicht nur per Stichwort, sondern nach Bedeutung (semantische Suche).
|
||||
</li>
|
||||
<li>
|
||||
<strong>Bewerten:</strong> Wenn ein Nutzer einen geplanten KI-Anwendungsfall beschreibt,
|
||||
bewertet das System automatisch, ob er zulaessig ist, welches Risiko besteht und welche
|
||||
Massnahmen noetig sind.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Dokumentieren:</strong> Das System erzeugt die Dokumente, die Aufsichtsbehoerden
|
||||
verlangen: Datenschutz-Folgenabschaetzungen (DSFA), technisch-organisatorische Massnahmen
|
||||
(TOM), Verarbeitungsverzeichnisse (VVT) und mehr.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Nachweisen:</strong> Jede Bewertung, jede Entscheidung und jeder Zugriff wird
|
||||
revisionssicher protokolliert -- als Nachweis gegenueber Pruefer und Behoerden.
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<InfoBox type="info" title="Kern-Designprinzip">
|
||||
<strong>Die KI ist nicht die Entscheidungsinstanz.</strong> Alle
|
||||
Compliance-Entscheidungen (zulaessig / bedingt zulaessig / nicht zulaessig) trifft ein
|
||||
deterministisches Regelwerk. Das LLM (Sprachmodell) wird ausschliesslich dafuer verwendet,
|
||||
Ergebnisse verstaendlich zu <em>erklaeren</em> -- niemals um sie zu <em>treffen</em>.
|
||||
</InfoBox>
|
||||
|
||||
{/* ============================================================ */}
|
||||
{/* 2. ARCHITEKTUR-UEBERSICHT */}
|
||||
{/* ============================================================ */}
|
||||
<h2 id="architektur">2. Architektur im Ueberblick</h2>
|
||||
<p>
|
||||
Das System besteht aus mehreren Bausteinen, die jeweils eine klar abgegrenzte Aufgabe haben.
|
||||
Man kann es sich wie ein Buero vorstellen:
|
||||
</p>
|
||||
|
||||
<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">Baustein</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-500">Analogie</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-500">Technologie</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-500">Aufgabe</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
<tr><td className="px-4 py-3 font-medium">API-Gateway</td><td className="px-4 py-3">Empfang / Rezeption</td><td className="px-4 py-3">Go (Gin)</td><td className="px-4 py-3">Nimmt alle Anfragen entgegen, prueft Identitaet und leitet weiter</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Compliance Engine (UCCA)</td><td className="px-4 py-3">Sachbearbeiter</td><td className="px-4 py-3">Go</td><td className="px-4 py-3">Bewertet Anwendungsfaelle gegen 45+ Regeln und berechnet Risikoscore</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">RAG Service</td><td className="px-4 py-3">Rechtsbibliothek</td><td className="px-4 py-3">Python (FastAPI)</td><td className="px-4 py-3">Durchsucht Gesetze semantisch und beantwortet Rechtsfragen</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Legal Corpus</td><td className="px-4 py-3">Gesetzesbuecher im Regal</td><td className="px-4 py-3">YAML/JSON + Qdrant</td><td className="px-4 py-3">Enthaelt alle Rechtstexte als durchsuchbare Wissensbasis</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Policy Engine</td><td className="px-4 py-3">Regelbuch des Sachbearbeiters</td><td className="px-4 py-3">YAML-Dateien</td><td className="px-4 py-3">45+ auditierbare Pruefregeln in maschinenlesbarer Form</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Eskalations-System</td><td className="px-4 py-3">Chef-Unterschrift</td><td className="px-4 py-3">Go + PostgreSQL</td><td className="px-4 py-3">Leitet kritische Faelle an menschliche Pruefer weiter</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Admin Dashboard</td><td className="px-4 py-3">Schreibtisch</td><td className="px-4 py-3">Next.js</td><td className="px-4 py-3">Benutzeroberflaeche fuer alle Funktionen</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">PostgreSQL</td><td className="px-4 py-3">Aktenschrank</td><td className="px-4 py-3">SQL-Datenbank</td><td className="px-4 py-3">Speichert Assessments, Eskalationen, Controls, Audit-Trail</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Qdrant</td><td className="px-4 py-3">Suchindex der Bibliothek</td><td className="px-4 py-3">Vektordatenbank</td><td className="px-4 py-3">Ermoeglicht semantische Suche ueber Rechtstexte</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Wie die Bausteine zusammenspielen</h3>
|
||||
<CodeBlock language="text" filename="Datenfluss: Vom Benutzer zur Compliance-Bewertung">
|
||||
{`Benutzer (Browser)
|
||||
|
|
||||
v
|
||||
┌─────────────────────────────┐
|
||||
│ API-Gateway (Port 8080) │ ← Authentifizierung, Rate-Limiting, Tenant-Isolation
|
||||
│ "Wer bist du? Darfst du?" │
|
||||
└──────────┬──────────────────┘
|
||||
|
|
||||
┌─────┼──────────────────────────────┐
|
||||
v v v
|
||||
┌─────────────┐ ┌──────────────┐ ┌──────────────┐
|
||||
│ Compliance │ │ RAG Service │ │ Security │
|
||||
│ Engine │ │ (Bibliothek)│ │ Scanner │
|
||||
│ (Bewertung) │ │ │ │ │
|
||||
└──────┬───┬──┘ └──────┬───────┘ └──────────────┘
|
||||
| | |
|
||||
| | ┌──────┴───────┐
|
||||
| | │ Qdrant │ ← Vektordatenbank mit allen Rechtstexten
|
||||
| | │ (Suchindex) │
|
||||
| | └──────────────┘
|
||||
| |
|
||||
| └──────────────────────┐
|
||||
v v
|
||||
┌──────────────┐ ┌──────────────┐
|
||||
│ PostgreSQL │ │ Eskalation │
|
||||
│ (Speicher) │ │ (E0-E3) │
|
||||
└──────────────┘ └──────────────┘`}
|
||||
</CodeBlock>
|
||||
|
||||
{/* ============================================================ */}
|
||||
{/* 3. DER KATALOGMANAGER / LEGAL CORPUS */}
|
||||
{/* ============================================================ */}
|
||||
<h2 id="katalogmanager">3. Der Katalogmanager: Die Wissensbasis</h2>
|
||||
<p>
|
||||
Das Herzstueck des Systems ist seine <strong>Wissensbasis</strong> -- eine Sammlung aller
|
||||
relevanten Rechtstexte, die das System kennt und durchsuchen kann. Wir nennen das den
|
||||
<strong> Legal Corpus</strong> (wörtlich: “Rechtlicher Koerper”).
|
||||
</p>
|
||||
|
||||
<h3>3.1 Welche Dokumente sind enthalten?</h3>
|
||||
<p>
|
||||
Der Legal Corpus ist in zwei Hauptbereiche gegliedert: <strong>EU-Recht</strong> und
|
||||
<strong> deutsches Recht</strong>.
|
||||
</p>
|
||||
|
||||
<h4>EU-Verordnungen und -Richtlinien</h4>
|
||||
<div className="not-prose my-4 overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200 text-sm">
|
||||
<thead className="bg-blue-50">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-700">Regelwerk</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-700">Abkuerzung</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-700">Artikel</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-700">Gueltig seit</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-700">Thema</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
<tr><td className="px-4 py-3 font-medium">Datenschutz-Grundverordnung</td><td className="px-4 py-3">DSGVO</td><td className="px-4 py-3">99</td><td className="px-4 py-3">25.05.2018</td><td className="px-4 py-3">Schutz personenbezogener Daten</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">KI-Verordnung</td><td className="px-4 py-3">AI Act</td><td className="px-4 py-3">113</td><td className="px-4 py-3">01.08.2024</td><td className="px-4 py-3">Regulierung kuenstlicher Intelligenz</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Netz- und Informationssicherheit</td><td className="px-4 py-3">NIS2</td><td className="px-4 py-3">46</td><td className="px-4 py-3">18.10.2024</td><td className="px-4 py-3">Cybersicherheit kritischer Infrastrukturen</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">ePrivacy-Verordnung</td><td className="px-4 py-3">ePrivacy</td><td className="px-4 py-3">--</td><td className="px-4 py-3">in Arbeit</td><td className="px-4 py-3">Vertraulichkeit elektronischer Kommunikation</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Cyber Resilience Act</td><td className="px-4 py-3">CRA</td><td className="px-4 py-3">--</td><td className="px-4 py-3">2024</td><td className="px-4 py-3">Cybersicherheit von Produkten mit digitalen Elementen</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Data Act</td><td className="px-4 py-3">DA</td><td className="px-4 py-3">--</td><td className="px-4 py-3">2024</td><td className="px-4 py-3">Zugang und Nutzung von Daten</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Digital Markets Act</td><td className="px-4 py-3">DMA</td><td className="px-4 py-3">--</td><td className="px-4 py-3">2023</td><td className="px-4 py-3">Regulierung digitaler Gatekeeper</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h4>Deutsches Recht</h4>
|
||||
<div className="not-prose my-4 overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200 text-sm">
|
||||
<thead className="bg-green-50">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-700">Gesetz</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-700">Abkuerzung</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-700">Thema</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
<tr><td className="px-4 py-3 font-medium">Telekommunikation-Digitale-Dienste-Datenschutz-Gesetz</td><td className="px-4 py-3">TDDDG</td><td className="px-4 py-3">Datenschutz bei Telekommunikation und digitalen Diensten</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Bundesdatenschutzgesetz</td><td className="px-4 py-3">BDSG</td><td className="px-4 py-3">Nationale Ergaenzung zur DSGVO</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">IT-Sicherheitsgesetz</td><td className="px-4 py-3">IT-SiG</td><td className="px-4 py-3">IT-Sicherheit kritischer Infrastrukturen</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">BSI-KritisV</td><td className="px-4 py-3">KritisV</td><td className="px-4 py-3">BSI-Verordnung fuer kritische Infrastrukturen</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h4>Standards und Normen</h4>
|
||||
<div className="not-prose my-4 overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200 text-sm">
|
||||
<thead className="bg-purple-50">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-700">Standard</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-700">Thema</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
<tr><td className="px-4 py-3 font-medium">ISO 27001</td><td className="px-4 py-3">Informationssicherheits-Managementsystem (ISMS)</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">SOC2</td><td className="px-4 py-3">Trust Service Criteria (Sicherheit, Verfuegbarkeit, Vertraulichkeit)</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">BSI Grundschutz</td><td className="px-4 py-3">IT-Grundschutz des BSI</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">BSI TR-03161</td><td className="px-4 py-3">Technische Richtlinie fuer Anforderungen an Anwendungen im Gesundheitswesen</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">SCC (Standard Contractual Clauses)</td><td className="px-4 py-3">Standardvertragsklauseln fuer Drittlandtransfers</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>3.2 Wie werden Rechtstexte gespeichert?</h3>
|
||||
<p>
|
||||
Jeder Rechtstext durchlaeuft eine <strong>Verarbeitungspipeline</strong>, bevor er im
|
||||
System durchsuchbar ist. Der Vorgang laesst sich mit dem Erstellen eines
|
||||
Bibliothekskatalogs vergleichen:
|
||||
</p>
|
||||
<ol>
|
||||
<li>
|
||||
<strong>Erfassung (Ingestion):</strong> Der Rechtstext wird als Dokument (PDF, Markdown
|
||||
oder Klartext) in das System geladen. Fuer jede Verordnung gibt es eine
|
||||
<code>metadata.json</code>-Datei, die beschreibt, um welches Gesetz es sich handelt,
|
||||
wie viele Artikel es hat und welche Schluesselbegriffe relevant sind.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Zerkleinerung (Chunking):</strong> Lange Gesetzestexte werden in kleinere
|
||||
Abschnitte von ca. 512 Zeichen zerlegt. Dabei ueberlappen sich die Abschnitte um
|
||||
50 Zeichen, damit kein Kontext verloren geht. Stellen Sie sich vor, Sie zerschneiden
|
||||
einen langen Brief in Absaetze, wobei jeder Absatz die letzten zwei Zeilen des
|
||||
vorherigen enthaelt.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Vektorisierung (Embedding):</strong> Jeder Textabschnitt wird vom
|
||||
Embedding-Modell <strong>BGE-M3</strong> in einen <em>Vektor</em> umgewandelt -- eine
|
||||
Liste von 1.024 Zahlen, die die <em>Bedeutung</em> des Textes repraesentieren. Texte
|
||||
mit aehnlicher Bedeutung haben aehnliche Vektoren, unabhaengig von der Wortwahl.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Indexierung:</strong> Die Vektoren werden in der Vektordatenbank
|
||||
<strong> Qdrant</strong> gespeichert. Zusammen mit jedem Vektor werden Metadaten
|
||||
hinterlegt: zu welchem Gesetz der Text gehoert, welcher Artikel es ist und welcher
|
||||
Paragraph.
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<CodeBlock language="text" filename="Verarbeitungspipeline: Vom Gesetzestext zur Suche">
|
||||
{`Rechtstext (z.B. DSGVO Art. 32)
|
||||
|
|
||||
v
|
||||
┌────────────────────────┐
|
||||
│ 1. Einlesen │ ← PDF/Markdown/Klartext + metadata.json
|
||||
│ Metadaten zuordnen │
|
||||
└──────────┬─────────────┘
|
||||
|
|
||||
v
|
||||
┌────────────────────────┐
|
||||
│ 2. Chunking │ ← Text in 512-Zeichen-Abschnitte zerlegen
|
||||
│ Ueberlappung: 50 Zch. │ (mit 50 Zeichen Ueberlappung)
|
||||
└──────────┬─────────────┘
|
||||
|
|
||||
v
|
||||
┌────────────────────────┐
|
||||
│ 3. Embedding │ ← BGE-M3 wandelt Text in 1024 Zahlen um
|
||||
│ Text → Vektor │ (Bedeutungs-Repraesentation)
|
||||
└──────────┬─────────────┘
|
||||
|
|
||||
v
|
||||
┌────────────────────────┐
|
||||
│ 4. Qdrant speichern │ ← Vektor + Metadaten werden indexiert
|
||||
│ Sofort durchsuchbar │ (~2.274 Chunks insgesamt)
|
||||
└────────────────────────┘`}
|
||||
</CodeBlock>
|
||||
|
||||
<InfoBox type="success" title="Aktueller Bestand">
|
||||
Der Legal Corpus enthaelt derzeit ca. <strong>2.274 Textabschnitte</strong> aus ueber
|
||||
400 Gesetzesartikeln. Darunter 99 DSGVO-Artikel, 85 AI-Act-Artikel, 46 NIS2-Artikel,
|
||||
86 BDSG-Paragraphen sowie zahlreiche Artikel aus TDDDG, CRA, Data Act und weiteren
|
||||
Regelwerken.
|
||||
</InfoBox>
|
||||
|
||||
<h3>3.3 Wie funktioniert die semantische Suche?</h3>
|
||||
<p>
|
||||
Klassische Suchmaschinen suchen nach <em>Woertern</em>. Wenn Sie “Einwilligung”
|
||||
eingeben, finden sie nur Texte, die genau dieses Wort enthalten. Unsere semantische Suche
|
||||
funktioniert anders: Sie sucht nach <em>Bedeutung</em>.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Beispiel:</strong> Wenn Sie fragen “Wann muss ich den Nutzer um Erlaubnis
|
||||
bitten?”, findet das System Art. 7 DSGVO (Bedingungen fuer die Einwilligung), obwohl
|
||||
Ihre Frage das Wort “Einwilligung” gar nicht enthaelt. Das funktioniert, weil
|
||||
die Bedeutungsvektoren von “um Erlaubnis bitten” und “Einwilligung”
|
||||
sehr aehnlich sind.
|
||||
</p>
|
||||
<p>Der Suchvorgang im Detail:</p>
|
||||
<ol>
|
||||
<li>Ihre Suchanfrage wird vom gleichen Modell (BGE-M3) in einen Vektor umgewandelt.</li>
|
||||
<li>Qdrant vergleicht diesen Vektor mit allen gespeicherten Vektoren (Kosinus-Aehnlichkeit).</li>
|
||||
<li>Die aehnlichsten Textabschnitte werden zurueckgegeben, sortiert nach Relevanz (Score 0-1).</li>
|
||||
<li>Optional kann nach bestimmten Gesetzen gefiltert werden (nur DSGVO, nur AI Act, etc.).</li>
|
||||
</ol>
|
||||
|
||||
<h3>3.4 Der KI-Rechtsassistent (Legal Q&A)</h3>
|
||||
<p>
|
||||
Ueber die reine Suche hinaus kann das System auch <strong>Fragen beantworten</strong>.
|
||||
Dabei wird die semantische Suche mit einem Sprachmodell kombiniert:
|
||||
</p>
|
||||
<ol>
|
||||
<li><strong>Suche:</strong> Das System findet die 5 relevantesten Gesetzesabschnitte zur Frage.</li>
|
||||
<li><strong>Kontext-Erstellung:</strong> Diese Abschnitte werden zusammen mit der Frage an das Sprachmodell (Qwen 2.5 32B) uebergeben.</li>
|
||||
<li><strong>Antwort-Generierung:</strong> Das Modell formuliert eine verstaendliche Antwort auf Deutsch und zitiert die verwendeten Rechtsquellen.</li>
|
||||
<li><strong>Quellenangabe:</strong> Jede Antwort enthaelt exakte Zitate mit Artikelangaben, damit die Aussagen nachpruefbar sind.</li>
|
||||
</ol>
|
||||
|
||||
<InfoBox type="warning" title="Wichtige Einschraenkung">
|
||||
Der Rechtsassistent gibt <strong>keine Rechtsberatung</strong>. Er hilft, relevante
|
||||
Gesetzespassagen zu finden und verstaendlich zusammenzufassen. Die Antworten enthalten
|
||||
immer einen Confidence-Score (0-1), der angibt, wie sicher sich das System ist. Bei
|
||||
niedrigem Score wird explizit auf die Unsicherheit hingewiesen.
|
||||
</InfoBox>
|
||||
|
||||
{/* ============================================================ */}
|
||||
{/* 4. DIE COMPLIANCE ENGINE (UCCA) */}
|
||||
{/* ============================================================ */}
|
||||
<h2 id="compliance-engine">4. Die Compliance Engine: Wie Bewertungen funktionieren</h2>
|
||||
<p>
|
||||
Das Kernmodul des Compliance Hub ist die <strong>UCCA Engine</strong> (Unified Compliance
|
||||
Control Assessment). Sie bewertet, ob ein geplanter KI-Anwendungsfall zulaessig ist.
|
||||
</p>
|
||||
|
||||
<h3>4.1 Der Fragebogen (Use Case Intake)</h3>
|
||||
<p>
|
||||
Alles beginnt mit einem strukturierten Fragebogen. Der Nutzer beschreibt seinen geplanten
|
||||
Anwendungsfall, indem er Fragen zu folgenden Bereichen beantwortet:
|
||||
</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">Bereich</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-500">Typische Fragen</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-500">Warum relevant?</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
<tr><td className="px-4 py-3 font-medium">Datentypen</td><td className="px-4 py-3">Werden personenbezogene Daten verarbeitet? Besondere Kategorien (Art. 9)?</td><td className="px-4 py-3">Art. 9-Daten (Gesundheit, Religion, etc.) erfordern besondere Schutzmassnahmen</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Verarbeitungszweck</td><td className="px-4 py-3">Wird Profiling betrieben? Scoring? Automatisierte Entscheidungen?</td><td className="px-4 py-3">Art. 22 DSGVO schuetzt vor vollautomatischen Entscheidungen</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Modellnutzung</td><td className="px-4 py-3">Wird das Modell nur genutzt (Inference) oder mit Nutzerdaten trainiert (Fine-Tuning)?</td><td className="px-4 py-3">Training mit personenbezogenen Daten erfordert besondere Rechtsgrundlage</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Automatisierungsgrad</td><td className="px-4 py-3">Assistenzsystem, teil- oder vollautomatisch?</td><td className="px-4 py-3">Vollautomatische Systeme unterliegen strengeren Auflagen</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Datenspeicherung</td><td className="px-4 py-3">Wie lange werden Daten gespeichert? Wo?</td><td className="px-4 py-3">DSGVO Art. 5: Speicherbegrenzung / Zweckbindung</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Hosting-Standort</td><td className="px-4 py-3">EU, USA, oder anderswo?</td><td className="px-4 py-3">Drittlandtransfers erfordern zusaetzliche Garantien (SCC, DPF)</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Branche</td><td className="px-4 py-3">Gesundheit, Finanzen, Bildung, Automotive, ...?</td><td className="px-4 py-3">Bestimmte Branchen unterliegen zusaetzlichen Regulierungen</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Menschliche Aufsicht</td><td className="px-4 py-3">Gibt es einen Human-in-the-Loop?</td><td className="px-4 py-3">AI Act fordert menschliche Aufsicht fuer Hochrisiko-KI</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>4.2 Die Pruefregeln (Policy Engine)</h3>
|
||||
<p>
|
||||
Die Antworten des Fragebogens werden gegen ein <strong>Regelwerk von ueber 45 Regeln</strong>
|
||||
geprueft. Jede Regel ist in einer YAML-Datei definiert und hat folgende Struktur:
|
||||
</p>
|
||||
<ul>
|
||||
<li><strong>Bedingung:</strong> Wann greift die Regel? (z.B. “Art. 9-Daten werden verarbeitet”)</li>
|
||||
<li><strong>Schweregrad:</strong> INFO (Hinweis), WARN (Risiko, aber loesbar) oder BLOCK (grundsaetzlich nicht zulaessig)</li>
|
||||
<li><strong>Auswirkung:</strong> Was passiert, wenn die Regel greift? (Risikoerhoehung, zusaetzliche Controls, Eskalation)</li>
|
||||
<li><strong>Gesetzesreferenz:</strong> Auf welchen Artikel bezieht sich die Regel?</li>
|
||||
</ul>
|
||||
|
||||
<p>Die Regeln sind in <strong>10 Kategorien</strong> organisiert:</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">Kategorie</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-500">Regel-IDs</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-500">Prueft</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-500">Beispiel</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
<tr><td className="px-4 py-3 font-medium">A. Datenklassifikation</td><td className="px-4 py-3">R-001 bis R-006</td><td className="px-4 py-3">Welche Daten werden verarbeitet?</td><td className="px-4 py-3">R-001: Werden personenbezogene Daten verarbeitet? → +10 Risiko</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">B. Zweck & Kontext</td><td className="px-4 py-3">R-010 bis R-013</td><td className="px-4 py-3">Warum und wie werden Daten genutzt?</td><td className="px-4 py-3">R-011: Profiling? → DSFA empfohlen</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">C. Automatisierung</td><td className="px-4 py-3">R-020 bis R-025</td><td className="px-4 py-3">Wie stark ist die Automatisierung?</td><td className="px-4 py-3">R-023: Vollautomatisch? → Art. 22 Risiko</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">D. Training vs. Nutzung</td><td className="px-4 py-3">R-030 bis R-035</td><td className="px-4 py-3">Wird das Modell trainiert?</td><td className="px-4 py-3">R-035: Training + Art. 9-Daten? → BLOCK</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">E. Speicherung</td><td className="px-4 py-3">R-040 bis R-042</td><td className="px-4 py-3">Wie lange werden Daten gespeichert?</td><td className="px-4 py-3">R-041: Unbegrenzte Speicherung? → WARN</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">F. Hosting</td><td className="px-4 py-3">R-050 bis R-052</td><td className="px-4 py-3">Wo werden Daten gehostet?</td><td className="px-4 py-3">R-051: Hosting in USA? → SCC/DPF pruefen</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">G. Transparenz</td><td className="px-4 py-3">R-060 bis R-062</td><td className="px-4 py-3">Werden Nutzer informiert?</td><td className="px-4 py-3">R-060: Keine Offenlegung? → AI Act Verstoss</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">H. Branchenspezifisch</td><td className="px-4 py-3">R-070 bis R-074</td><td className="px-4 py-3">Gelten Sonderregeln fuer die Branche?</td><td className="px-4 py-3">R-070: Gesundheitsbranche? → zusaetzliche Anforderungen</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">I. Aggregation</td><td className="px-4 py-3">R-090 bis R-092</td><td className="px-4 py-3">Meta-Regeln ueber andere Regeln</td><td className="px-4 py-3">R-090: Zu viele WARN-Regeln? → Gesamtrisiko erhoeht</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">J. Erklaerung</td><td className="px-4 py-3">R-100</td><td className="px-4 py-3">Warum hat das System so entschieden?</td><td className="px-4 py-3">Automatisch generierte Begruendung</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<InfoBox type="info" title="Warum YAML-Regeln statt Code?">
|
||||
Die Regeln sind bewusst in YAML-Dateien definiert und nicht im Programmcode versteckt.
|
||||
Das hat zwei Vorteile: (1) Sie sind fuer Nicht-Programmierer lesbar und damit
|
||||
<strong> auditierbar</strong>, d.h. ein Datenschutzbeauftragter oder Wirtschaftspruefer kann
|
||||
pruefen, ob die Regeln korrekt sind. (2) Sie koennen <strong>versioniert</strong> werden --
|
||||
wenn sich ein Gesetz aendert, wird die Regelaenderung im Versionsverlauf sichtbar.
|
||||
</InfoBox>
|
||||
|
||||
<h3>4.3 Das Ergebnis: Die Compliance-Bewertung</h3>
|
||||
<p>
|
||||
Nach der Pruefung aller Regeln erhaelt der Nutzer eine strukturierte Bewertung:
|
||||
</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">Ergebnis</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 font-medium">Machbarkeit</td>
|
||||
<td className="px-4 py-3">
|
||||
<span className="inline-block px-2 py-0.5 rounded bg-green-100 text-green-800 text-xs font-bold mr-1">YES</span>
|
||||
<span className="inline-block px-2 py-0.5 rounded bg-yellow-100 text-yellow-800 text-xs font-bold mr-1">CONDITIONAL</span>
|
||||
<span className="inline-block px-2 py-0.5 rounded bg-red-100 text-red-800 text-xs font-bold">NO</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Risikoscore</td><td className="px-4 py-3">0-100 Punkte. Je hoeher, desto mehr Massnahmen sind erforderlich.</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Risikostufe</td><td className="px-4 py-3">MINIMAL / LOW / MEDIUM / HIGH / UNACCEPTABLE</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Ausgeloeste Regeln</td><td className="px-4 py-3">Liste aller Regeln, die angeschlagen haben, mit Schweregrad und Gesetzesreferenz</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Erforderliche Controls</td><td className="px-4 py-3">Konkrete Massnahmen, die umgesetzt werden muessen (z.B. Verschluesselung, Einwilligung einholen)</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Empfohlene Architektur</td><td className="px-4 py-3">Technische Muster, die eingesetzt werden sollten (z.B. On-Premise statt Cloud)</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Verbotene Muster</td><td className="px-4 py-3">Technische Ansaetze, die vermieden werden muessen</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">DSFA erforderlich?</td><td className="px-4 py-3">Ob eine Datenschutz-Folgenabschaetzung nach Art. 35 DSGVO durchgefuehrt werden muss</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<CodeBlock language="text" filename="Beispiel: Bewertung eines Chatbots mit Kundendaten">
|
||||
{`Anwendungsfall: "Chatbot fuer Kundenservice mit Zugriff auf Bestellhistorie"
|
||||
|
||||
Machbarkeit: CONDITIONAL (bedingt zulaessig)
|
||||
Risikoscore: 35/100 (LOW)
|
||||
Risikostufe: LOW
|
||||
|
||||
Ausgeloeste Regeln:
|
||||
R-001 WARN Personenbezogene Daten werden verarbeitet (Art. 6 DSGVO)
|
||||
R-010 INFO Verarbeitungszweck: Kundenservice (Art. 5 DSGVO)
|
||||
R-020 INFO Assistenzsystem (nicht vollautomatisch) (Art. 22 DSGVO)
|
||||
R-060 WARN Nutzer muessen ueber KI-Nutzung informiert werden (AI Act Art. 52)
|
||||
|
||||
Erforderliche Controls:
|
||||
C_EXPLICIT_CONSENT Einwilligung fuer Chatbot-Nutzung einholen
|
||||
C_TRANSPARENCY Hinweis "Sie sprechen mit einer KI"
|
||||
C_DATA_MINIMIZATION Nur notwendige Bestelldaten abrufen
|
||||
|
||||
DSFA erforderlich: Nein (Risikoscore unter 40)
|
||||
Eskalation: E0 (keine manuelle Pruefung noetig)`}
|
||||
</CodeBlock>
|
||||
|
||||
{/* ============================================================ */}
|
||||
{/* 5. DAS ESKALATIONS-SYSTEM */}
|
||||
{/* ============================================================ */}
|
||||
<h2 id="eskalation">5. Das Eskalations-System: Wann Menschen entscheiden</h2>
|
||||
<p>
|
||||
Nicht jede Bewertung ist eindeutig. Fuer heikle Faelle gibt es ein abgestuftes
|
||||
Eskalations-System, das sicherstellt, dass die richtigen Menschen die endgueltige
|
||||
Entscheidung treffen.
|
||||
</p>
|
||||
|
||||
<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">Stufe</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-500">Wann?</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-500">Wer prueft?</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-500">Frist (SLA)</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-500">Beispiel</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
<tr className="bg-green-50"><td className="px-4 py-3 font-bold text-green-800">E0</td><td className="px-4 py-3">Nur INFO-Regeln, Risiko < 20</td><td className="px-4 py-3">Niemand (automatisch freigegeben)</td><td className="px-4 py-3">--</td><td className="px-4 py-3">Spam-Filter ohne personenbezogene Daten</td></tr>
|
||||
<tr className="bg-yellow-50"><td className="px-4 py-3 font-bold text-yellow-800">E1</td><td className="px-4 py-3">WARN-Regeln, Risiko 20-39</td><td className="px-4 py-3">Teamleiter</td><td className="px-4 py-3">24 Stunden</td><td className="px-4 py-3">Chatbot mit Kundendaten (unser Beispiel oben)</td></tr>
|
||||
<tr className="bg-orange-50"><td className="px-4 py-3 font-bold text-orange-800">E2</td><td className="px-4 py-3">Art. 9-Daten ODER Risiko 40-59 ODER DSFA empfohlen</td><td className="px-4 py-3">Datenschutzbeauftragter (DSB)</td><td className="px-4 py-3">8 Stunden</td><td className="px-4 py-3">KI-System, das Gesundheitsdaten verarbeitet</td></tr>
|
||||
<tr className="bg-red-50"><td className="px-4 py-3 font-bold text-red-800">E3</td><td className="px-4 py-3">BLOCK-Regel ODER Risiko ≥ 60 ODER Art. 22-Risiko</td><td className="px-4 py-3">DSB + Rechtsabteilung</td><td className="px-4 py-3">4 Stunden</td><td className="px-4 py-3">Vollautomatische Kreditentscheidung</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<strong>Zuweisung:</strong> Die Zuweisung erfolgt automatisch an den Pruefer mit der
|
||||
geringsten aktuellen Arbeitslast (Workload-basiertes Round-Robin). Jeder Pruefer hat eine
|
||||
konfigurierbare Obergrenze fuer gleichzeitige Reviews (z.B. 10 fuer Teamleiter, 5 fuer DSB,
|
||||
3 fuer Rechtsabteilung).
|
||||
</p>
|
||||
<p>
|
||||
<strong>Entscheidung:</strong> Der Pruefer kann den Anwendungsfall <em>freigeben</em>,
|
||||
<em>ablehnen</em>, <em>mit Auflagen freigeben</em> oder <em>weiter eskalieren</em>.
|
||||
Jede Entscheidung wird mit Begruendung im Audit-Trail gespeichert.
|
||||
</p>
|
||||
|
||||
{/* ============================================================ */}
|
||||
{/* 6. CONTROLS, EVIDENCE & RISIKEN */}
|
||||
{/* ============================================================ */}
|
||||
<h2 id="controls">6. Controls, Nachweise und Risiken</h2>
|
||||
|
||||
<h3>6.1 Was sind Controls?</h3>
|
||||
<p>
|
||||
Ein <strong>Control</strong> ist eine konkrete Massnahme, die eine Organisation umsetzt,
|
||||
um ein Compliance-Risiko zu beherrschen. Es gibt drei Arten:
|
||||
</p>
|
||||
<ul>
|
||||
<li><strong>Technische Controls:</strong> Verschluesselung, Zugangskontrollen, Firewalls, Pseudonymisierung</li>
|
||||
<li><strong>Organisatorische Controls:</strong> Schulungen, Richtlinien, Verantwortlichkeiten, Audits</li>
|
||||
<li><strong>Physische Controls:</strong> Zutrittskontrolle zu Serverraeumen, Schliesssysteme</li>
|
||||
</ul>
|
||||
<p>
|
||||
Der Compliance Hub verwaltet einen <strong>Katalog von ueber 100 vordefinierten Controls</strong>,
|
||||
die in 9 Domaenen organisiert sind:
|
||||
</p>
|
||||
<div className="not-prose my-4">
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{[
|
||||
{ code: 'AC', name: 'Zugriffsmanagement', desc: 'Wer darf was?' },
|
||||
{ code: 'DP', name: 'Datenschutz', desc: 'Schutz personenbezogener Daten' },
|
||||
{ code: 'NS', name: 'Netzwerksicherheit', desc: 'Sichere Kommunikation' },
|
||||
{ code: 'IR', name: 'Incident Response', desc: 'Reaktion auf Sicherheitsvorfaelle' },
|
||||
{ code: 'BC', name: 'Business Continuity', desc: 'Geschaeftskontinuitaet' },
|
||||
{ code: 'VM', name: 'Vendor Management', desc: 'Dienstleister-Steuerung' },
|
||||
{ code: 'AM', name: 'Asset Management', desc: 'Verwaltung von IT-Werten' },
|
||||
{ code: 'CR', name: 'Kryptographie', desc: 'Verschluesselung & Schluessel' },
|
||||
{ code: 'PS', name: 'Physische Sicherheit', desc: 'Gebaeude & Hardware' },
|
||||
].map(d => (
|
||||
<div key={d.code} className="border border-gray-200 rounded-lg p-3 text-sm">
|
||||
<div className="font-bold text-blue-600">{d.code}</div>
|
||||
<div className="font-medium">{d.name}</div>
|
||||
<div className="text-gray-500 text-xs">{d.desc}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>6.2 Wie Controls mit Gesetzen verknuepft sind</h3>
|
||||
<p>
|
||||
Jeder Control ist mit einem oder mehreren Gesetzesartikeln verknuepft. Diese
|
||||
<strong> Mappings</strong> machen sichtbar, warum eine Massnahme erforderlich ist:
|
||||
</p>
|
||||
|
||||
<CodeBlock language="text" filename="Beispiel: Control-Mapping">
|
||||
{`Control: AC-01 (Zugriffskontrolle)
|
||||
├── DSGVO Art. 32 → "Sicherheit der Verarbeitung"
|
||||
├── NIS2 Art. 21 → "Massnahmen zum Management von Cyberrisiken"
|
||||
├── ISO 27001 A.9 → "Zugangskontrolle"
|
||||
└── BSI Grundschutz → "ORP.4 Identitaets- und Berechtigungsmanagement"
|
||||
|
||||
Control: DP-03 (Datenverschluesselung)
|
||||
├── DSGVO Art. 32 → "Verschluesselung personenbezogener Daten"
|
||||
├── DSGVO Art. 34 → "Benachrichtigung ueber Datenverletzung" (Ausnahme bei Verschluesselung)
|
||||
└── NIS2 Art. 21 → "Einsatz von Kryptographie"`}
|
||||
</CodeBlock>
|
||||
|
||||
<h3>6.3 Evidence (Nachweise)</h3>
|
||||
<p>
|
||||
Ein Control allein genuegt nicht -- man muss auch <strong>nachweisen</strong>, dass er
|
||||
umgesetzt wurde. Das System verwaltet verschiedene Nachweis-Typen:
|
||||
</p>
|
||||
<ul>
|
||||
<li><strong>Zertifikate:</strong> ISO 27001-Zertifikat, SOC2-Report</li>
|
||||
<li><strong>Richtlinien:</strong> Interne Datenschutzrichtlinie, Passwort-Policy</li>
|
||||
<li><strong>Audit-Berichte:</strong> Ergebnisse interner oder externer Pruefungen</li>
|
||||
<li><strong>Screenshots / Konfigurationen:</strong> Nachweis technischer Umsetzung</li>
|
||||
</ul>
|
||||
<p>
|
||||
Jeder Nachweis hat ein <strong>Ablaufdatum</strong>. Das System warnt automatisch,
|
||||
wenn Nachweise bald ablaufen (z.B. ein ISO-Zertifikat, das in 3 Monaten erneuert werden muss).
|
||||
</p>
|
||||
|
||||
<h3>6.4 Risikobewertung</h3>
|
||||
<p>
|
||||
Risiken werden in einer <strong>5x5-Risikomatrix</strong> dargestellt. Die beiden Achsen sind:
|
||||
</p>
|
||||
<ul>
|
||||
<li><strong>Eintrittswahrscheinlichkeit:</strong> Wie wahrscheinlich ist es, dass das Risiko eintritt?</li>
|
||||
<li><strong>Auswirkung:</strong> Wie schwerwiegend waeren die Folgen?</li>
|
||||
</ul>
|
||||
<p>
|
||||
Aus der Kombination ergibt sich die Risikostufe: <em>Minimal</em>, <em>Low</em>,
|
||||
<em>Medium</em>, <em>High</em> oder <em>Critical</em>. Fuer jedes identifizierte Risiko
|
||||
wird dokumentiert, welche Controls es abmildern und wer dafuer verantwortlich ist.
|
||||
</p>
|
||||
|
||||
{/* ============================================================ */}
|
||||
{/* 7. OBLIGATIONS FRAMEWORK */}
|
||||
{/* ============================================================ */}
|
||||
<h2 id="obligations">7. Pflichten-Ableitung: Welche Gesetze gelten fuer mich?</h2>
|
||||
<p>
|
||||
Nicht jedes Gesetz gilt fuer jede Organisation. Das <strong>Obligations Framework</strong>
|
||||
ermittelt automatisch, welche konkreten Pflichten sich aus der Situation einer Organisation
|
||||
ergeben. Dafuer werden “Fakten” ueber die Organisation gesammelt und gegen die
|
||||
Anwendbarkeitsbedingungen der einzelnen Gesetze geprueft.
|
||||
</p>
|
||||
|
||||
<h3>Beispiel: NIS2-Anwendbarkeit</h3>
|
||||
<CodeBlock language="text" filename="Entscheidungsbaum: Gilt NIS2 fuer mein Unternehmen?">
|
||||
{`Ist Ihr Unternehmen in einem der NIS2-Sektoren taetig?
|
||||
(Energie, Transport, Banken, Gesundheit, Wasser, Digitale Infrastruktur, ...)
|
||||
│
|
||||
├── Nein → NIS2 gilt NICHT fuer Sie
|
||||
│
|
||||
└── Ja → Wie gross ist Ihr Unternehmen?
|
||||
│
|
||||
├── >= 250 Mitarbeiter ODER >= 50 Mio. EUR Umsatz
|
||||
│ → ESSENTIAL ENTITY (wesentliche Einrichtung)
|
||||
│ → Volle NIS2-Pflichten, strenge Aufsicht
|
||||
│ → Bussgelder bis 10 Mio. EUR oder 2% Jahresumsatz
|
||||
│
|
||||
├── >= 50 Mitarbeiter ODER >= 10 Mio. EUR Umsatz
|
||||
│ → IMPORTANT ENTITY (wichtige Einrichtung)
|
||||
│ → NIS2-Pflichten, reaktive Aufsicht
|
||||
│ → Bussgelder bis 7 Mio. EUR oder 1,4% Jahresumsatz
|
||||
│
|
||||
└── Kleiner → NIS2 gilt grundsaetzlich NICHT
|
||||
(Ausnahmen fuer bestimmte Sektoren moeglich)`}
|
||||
</CodeBlock>
|
||||
|
||||
<p>
|
||||
Aehnliche Entscheidungsbaeume existieren fuer DSGVO (Verarbeitung personenbezogener Daten?),
|
||||
AI Act (KI-System im Einsatz? Welche Risikokategorie?) und alle anderen Regelwerke.
|
||||
Das System leitet daraus konkrete Pflichten ab -- z.B. “Meldepflicht bei
|
||||
Sicherheitsvorfaellen innerhalb von 72 Stunden” oder “Ernennung eines
|
||||
Datenschutzbeauftragten”.
|
||||
</p>
|
||||
|
||||
{/* ============================================================ */}
|
||||
{/* 8. DSGVO-MODULE */}
|
||||
{/* ============================================================ */}
|
||||
<h2 id="dsgvo-module">8. DSGVO-Compliance-Module im Detail</h2>
|
||||
<p>
|
||||
Fuer die Einhaltung der DSGVO bietet der Compliance Hub spezialisierte Module:
|
||||
</p>
|
||||
|
||||
<h3>8.1 Consent Management (Einwilligungsverwaltung)</h3>
|
||||
<p>
|
||||
Verwaltet die Einwilligung von Nutzern gemaess Art. 6/7 DSGVO. Jede Einwilligung wird
|
||||
protokolliert: wer hat wann, auf welchem Kanal, fuer welchen Zweck zugestimmt (oder
|
||||
abgelehnt)? Einwilligungen koennen jederzeit widerrufen werden, der Widerruf wird ebenfalls
|
||||
dokumentiert.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Zwecke:</strong> Essential (funktionsnotwendig), Functional, Analytics, Marketing,
|
||||
Personalization, Third-Party.
|
||||
</p>
|
||||
|
||||
<h3>8.2 DSR Management (Betroffenenrechte)</h3>
|
||||
<p>
|
||||
Verwaltet Antraege betroffener Personen nach Art. 15-21 DSGVO: Auskunft, Berichtigung,
|
||||
Loeschung, Datenportabilitaet, Einschraenkung und Widerspruch. Das System ueberwacht die
|
||||
<strong> 30-Tage-Frist</strong> (Art. 12) und eskaliert automatisch, wenn Fristen drohen
|
||||
zu verstreichen.
|
||||
</p>
|
||||
|
||||
<h3>8.3 VVT (Verzeichnis von Verarbeitungstaetigkeiten)</h3>
|
||||
<p>
|
||||
Dokumentiert alle Datenverarbeitungen gemaess Art. 30 DSGVO: Welche Daten werden fuer
|
||||
welchen Zweck, auf welcher Rechtsgrundlage, wie lange und von wem verarbeitet? Jede
|
||||
Verarbeitungstaetigkeit wird mit ihren Datenkategorien, Empfaengern und
|
||||
Loeschfristen erfasst.
|
||||
</p>
|
||||
|
||||
<h3>8.4 DSFA (Datenschutz-Folgenabschaetzung)</h3>
|
||||
<p>
|
||||
Wenn eine Datenverarbeitung voraussichtlich ein hohes Risiko fuer die Rechte natuerlicher
|
||||
Personen mit sich bringt, ist eine DSFA nach Art. 35 DSGVO Pflicht. Das System unterstuetzt
|
||||
den Prozess: Risiken identifizieren, bewerten, Gegenmassnahmen definieren und das Ergebnis
|
||||
dokumentieren.
|
||||
</p>
|
||||
|
||||
<h3>8.5 TOM (Technisch-Organisatorische Massnahmen)</h3>
|
||||
<p>
|
||||
Dokumentiert die Schutzmassnahmen nach Art. 32 DSGVO. Fuer jede Massnahme wird erfasst:
|
||||
Kategorie (z.B. Verschluesselung, Zugriffskontrolle), Status (implementiert / in
|
||||
Bearbeitung / geplant), Verantwortlicher und Nachweise.
|
||||
</p>
|
||||
|
||||
<h3>8.6 Loeschkonzept</h3>
|
||||
<p>
|
||||
Verwaltet Aufbewahrungsfristen und automatische Loeschung gemaess Art. 5/17 DSGVO.
|
||||
Fuer jede Datenkategorie wird definiert: wie lange darf sie gespeichert werden, wann muss
|
||||
sie geloescht werden und wie (z.B. Ueberschreiben, Schluesselloeschung bei verschluesselten
|
||||
Daten).
|
||||
</p>
|
||||
|
||||
{/* ============================================================ */}
|
||||
{/* 9. MULTI-TENANCY & ZUGRIFFSKONTROLLE */}
|
||||
{/* ============================================================ */}
|
||||
<h2 id="multi-tenancy">9. Multi-Tenancy und Zugriffskontrolle</h2>
|
||||
<p>
|
||||
Das System ist <strong>mandantenfaehig</strong> (Multi-Tenant): Mehrere Organisationen
|
||||
koennen es gleichzeitig nutzen, ohne dass sie gegenseitig auf ihre Daten zugreifen koennen.
|
||||
Jede Anfrage enthaelt eine Tenant-ID, und die Datenbank-Abfragen filtern automatisch nach
|
||||
dieser ID.
|
||||
</p>
|
||||
|
||||
<h3>9.1 Rollenbasierte Zugriffskontrolle (RBAC)</h3>
|
||||
<p>
|
||||
Innerhalb eines Mandanten gibt es verschiedene Rollen mit unterschiedlichen Berechtigungen:
|
||||
</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">Rolle</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-500">Darf</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
<tr><td className="px-4 py-3 font-medium">Mitarbeiter</td><td className="px-4 py-3">Anwendungsfaelle einreichen, eigene Bewertungen einsehen</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Teamleiter</td><td className="px-4 py-3">E1-Eskalationen pruefen, Team-Assessments einsehen</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">DSB (Datenschutzbeauftragter)</td><td className="px-4 py-3">E2/E3-Eskalationen pruefen, alle Assessments einsehen, Policies aendern</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Rechtsabteilung</td><td className="px-4 py-3">E3-Eskalationen pruefen, Grundsatzentscheidungen</td></tr>
|
||||
<tr><td className="px-4 py-3 font-medium">Administrator</td><td className="px-4 py-3">System konfigurieren, Nutzer verwalten, LLM-Policies festlegen</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>9.2 PII-Erkennung und -Schutz</h3>
|
||||
<p>
|
||||
Bevor Texte an ein Sprachmodell gesendet werden, durchlaufen sie eine automatische
|
||||
<strong> PII-Erkennung</strong> (Personally Identifiable Information). Das System erkennt
|
||||
ueber 20 Arten personenbezogener Daten:
|
||||
</p>
|
||||
<ul>
|
||||
<li>E-Mail-Adressen, Telefonnummern, Postanschriften</li>
|
||||
<li>Sozialversicherungsnummern, Kreditkartennummern</li>
|
||||
<li>Personennamen, IP-Adressen</li>
|
||||
<li>und weitere...</li>
|
||||
</ul>
|
||||
<p>
|
||||
Je nach Konfiguration werden erkannte PII-Daten <strong>geschwuerzt</strong> (durch
|
||||
Platzhalter ersetzt), <strong>maskiert</strong> (nur Anfang/Ende sichtbar) oder nur im
|
||||
Audit-Log <strong>markiert</strong>.
|
||||
</p>
|
||||
|
||||
{/* ============================================================ */}
|
||||
{/* 10. LLM-NUTZUNG */}
|
||||
{/* ============================================================ */}
|
||||
<h2 id="llm-nutzung">10. Wie das System KI nutzt (und wie nicht)</h2>
|
||||
<p>
|
||||
Der Compliance Hub setzt kuenstliche Intelligenz gezielt und kontrolliert ein. Es gibt
|
||||
eine klare Trennung zwischen dem, was die KI tut, und dem, was sie nicht tun darf:
|
||||
</p>
|
||||
|
||||
<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">Aufgabe</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-500">Entschieden von</th>
|
||||
<th className="px-4 py-3 text-left font-medium text-gray-500">Rolle der KI</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
<tr><td className="px-4 py-3">Machbarkeit (YES/CONDITIONAL/NO)</td><td className="px-4 py-3 font-medium">Deterministische Regeln</td><td className="px-4 py-3 text-gray-400">Keine</td></tr>
|
||||
<tr><td className="px-4 py-3">Risikoscore berechnen</td><td className="px-4 py-3 font-medium">Regelbasierte Berechnung</td><td className="px-4 py-3 text-gray-400">Keine</td></tr>
|
||||
<tr><td className="px-4 py-3">Eskalation ausloesen</td><td className="px-4 py-3 font-medium">Schwellenwerte + Regellogik</td><td className="px-4 py-3 text-gray-400">Keine</td></tr>
|
||||
<tr><td className="px-4 py-3">Controls zuordnen</td><td className="px-4 py-3 font-medium">Regel-zu-Control-Mapping</td><td className="px-4 py-3 text-gray-400">Keine</td></tr>
|
||||
<tr className="bg-blue-50"><td className="px-4 py-3">Ergebnis erklaeren</td><td className="px-4 py-3 text-gray-400">--</td><td className="px-4 py-3 font-medium text-blue-800">LLM + RAG-Kontext</td></tr>
|
||||
<tr className="bg-blue-50"><td className="px-4 py-3">Verbesserungsvorschlaege</td><td className="px-4 py-3 text-gray-400">--</td><td className="px-4 py-3 font-medium text-blue-800">LLM</td></tr>
|
||||
<tr className="bg-blue-50"><td className="px-4 py-3">Rechtsfragen beantworten</td><td className="px-4 py-3 text-gray-400">--</td><td className="px-4 py-3 font-medium text-blue-800">LLM + RAG (Rechtskorpus)</td></tr>
|
||||
<tr className="bg-blue-50"><td className="px-4 py-3">Dokumente generieren (DSFA, TOM, VVT)</td><td className="px-4 py-3 text-gray-400">--</td><td className="px-4 py-3 font-medium text-blue-800">LLM + Vorlagen</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>LLM-Provider und Fallback</h3>
|
||||
<p>
|
||||
Das System unterstuetzt mehrere KI-Anbieter mit automatischem Fallback:
|
||||
</p>
|
||||
<ol>
|
||||
<li><strong>Primaer: Ollama (lokal)</strong> -- Qwen 2.5 32B bzw. Mistral, laeuft direkt auf dem Server. Keine Daten verlassen das lokale Netzwerk.</li>
|
||||
<li><strong>Fallback: Anthropic Claude</strong> -- Wird nur aktiviert, wenn das lokale Modell nicht verfuegbar ist.</li>
|
||||
</ol>
|
||||
<p>
|
||||
Jeder LLM-Aufruf wird im Audit-Trail protokolliert: Prompt-Hash (SHA-256), verwendetes
|
||||
Modell, Antwortzeit und ob PII erkannt wurde.
|
||||
</p>
|
||||
|
||||
{/* ============================================================ */}
|
||||
{/* 11. AUDIT-TRAIL */}
|
||||
{/* ============================================================ */}
|
||||
<h2 id="audit-trail">11. Audit-Trail: Alles wird protokolliert</h2>
|
||||
<p>
|
||||
Saemtliche Aktionen im System werden revisionssicher protokolliert:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Jede Compliance-Bewertung mit allen Ein- und Ausgaben</li>
|
||||
<li>Jede Eskalationsentscheidung mit Begruendung</li>
|
||||
<li>Jeder LLM-Aufruf (wer hat was wann gefragt, welches Modell wurde verwendet)</li>
|
||||
<li>Jede Aenderung an Controls, Evidence und Policies</li>
|
||||
<li>Jeder Login und Daten-Export</li>
|
||||
</ul>
|
||||
<p>
|
||||
Der Audit-Trail kann als <strong>PDF, CSV oder JSON</strong> exportiert werden und dient als
|
||||
Nachweis gegenueber Aufsichtsbehoerden, Wirtschaftspruefern und internen Revisoren.
|
||||
</p>
|
||||
|
||||
<InfoBox type="info" title="Datenschutz des Audit-Trails">
|
||||
Der Use-Case-Text (die Beschreibung des Anwendungsfalls) wird
|
||||
<strong> nur mit Einwilligung des Nutzers</strong> gespeichert. Standardmaessig wird nur
|
||||
ein SHA-256-Hash des Textes gespeichert -- damit kann nachgewiesen werden, <em>dass</em>
|
||||
ein bestimmter Text bewertet wurde, ohne den Text selbst preiszugeben.
|
||||
</InfoBox>
|
||||
|
||||
{/* ============================================================ */}
|
||||
{/* 12. SECURITY SCANNER */}
|
||||
{/* ============================================================ */}
|
||||
<h2 id="security">12. Security Scanner: Technische Sicherheitspruefung</h2>
|
||||
<p>
|
||||
Ergaenzend zur rechtlichen Compliance prueft der Security Scanner die
|
||||
<strong> technische Sicherheit</strong>:
|
||||
</p>
|
||||
<ul>
|
||||
<li><strong>Container-Scanning (Trivy):</strong> Prueft Docker-Images auf bekannte Schwachstellen (CVEs)</li>
|
||||
<li><strong>Statische Code-Analyse (Semgrep):</strong> Sucht im Quellcode nach Sicherheitsluecken (SQL Injection, XSS, etc.)</li>
|
||||
<li><strong>Secret Detection (Gitleaks):</strong> Findet versehentlich eingecheckte Passwoerter, API-Keys und Tokens</li>
|
||||
<li><strong>SBOM-Generierung:</strong> Erstellt eine Software Bill of Materials -- eine vollstaendige Liste aller verwendeten Bibliotheken und deren Lizenzen</li>
|
||||
</ul>
|
||||
<p>
|
||||
Gefundene Schwachstellen werden nach Schweregrad (Critical, High, Medium, Low) klassifiziert
|
||||
und koennen direkt im System nachverfolgt und behoben werden.
|
||||
</p>
|
||||
|
||||
{/* ============================================================ */}
|
||||
{/* 13. ZUSAMMENFASSUNG */}
|
||||
{/* ============================================================ */}
|
||||
<h2 id="zusammenfassung">13. Zusammenfassung: Der komplette Datenfluss</h2>
|
||||
<p>
|
||||
Hier ist der gesamte Prozess von Anfang bis Ende:
|
||||
</p>
|
||||
|
||||
<CodeBlock language="text" filename="Der komplette Compliance-Workflow">
|
||||
{`SCHRITT 1: FAKTEN SAMMELN
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
Nutzer fuellt Fragebogen aus:
|
||||
→ Welche Daten? Welcher Zweck? Welche Branche? Wo gehostet?
|
||||
|
||||
SCHRITT 2: ANWENDBARKEIT PRUEFEN
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
Obligations Framework ermittelt:
|
||||
→ DSGVO betroffen? → Ja (personenbezogene Daten)
|
||||
→ AI Act betroffen? → Ja (KI-System)
|
||||
→ NIS2 betroffen? → Nein (< 50 Mitarbeiter, kein KRITIS-Sektor)
|
||||
|
||||
SCHRITT 3: REGELN PRUEFEN
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
Policy Engine wertet 45+ Regeln aus:
|
||||
→ R-001 (WARN): Personenbezogene Daten +10 Risiko
|
||||
→ R-020 (INFO): Assistenzsystem +0 Risiko
|
||||
→ R-060 (WARN): KI-Transparenz fehlt +15 Risiko
|
||||
→ ...
|
||||
→ Gesamt-Risikoscore: 35/100 (LOW)
|
||||
→ Machbarkeit: CONDITIONAL
|
||||
|
||||
SCHRITT 4: CONTROLS ZUORDNEN
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
Jede ausgeloeste Regel triggert Controls:
|
||||
→ C_EXPLICIT_CONSENT: Einwilligung einholen
|
||||
→ C_TRANSPARENCY: KI-Nutzung offenlegen
|
||||
→ C_DATA_MINIMIZATION: Datenminimierung
|
||||
|
||||
SCHRITT 5: ESKALATION (bei Bedarf)
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
Score 35 → Stufe E1 → Teamleiter wird benachrichtigt
|
||||
→ SLA: 24 Stunden fuer Pruefung
|
||||
→ Entscheidung: Freigabe mit Auflagen
|
||||
|
||||
SCHRITT 6: ERKLAERUNG GENERIEREN
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
LLM + RAG erstellen verstaendliche Erklaerung:
|
||||
→ Suche relevante Gesetzesartikel (Qdrant)
|
||||
→ Generiere Erklaerungstext (Qwen 2.5)
|
||||
→ Fuege Zitate und Quellen hinzu
|
||||
|
||||
SCHRITT 7: DOKUMENTATION
|
||||
━━━━━━━━━━━━━━━━━━━━━━━
|
||||
System erzeugt erforderliche Dokumente:
|
||||
→ DSFA (falls empfohlen)
|
||||
→ TOM-Dokumentation
|
||||
→ VVT-Eintrag
|
||||
→ Compliance-Report (PDF/ZIP/JSON)
|
||||
|
||||
SCHRITT 8: MONITORING
|
||||
━━━━━━━━━━━━━━━━━━━━
|
||||
Laufende Ueberwachung:
|
||||
→ Controls werden regelmaessig geprueft
|
||||
→ Nachweise werden auf Ablauf ueberwacht
|
||||
→ Gesetzesaenderungen fliessen in den Corpus ein`}
|
||||
</CodeBlock>
|
||||
|
||||
<InfoBox type="success" title="Das Wichtigste in einem Satz">
|
||||
Der Compliance Hub nimmt die Beschreibung eines KI-Vorhabens entgegen, prueft es gegen
|
||||
ueber 45 deterministische Regeln und 400+ Gesetzesartikel, berechnet ein Risiko, ordnet
|
||||
Massnahmen zu, eskaliert bei Bedarf an menschliche Pruefer und dokumentiert alles
|
||||
revisionssicher -- wobei die KI nur fuer Erklaerungen und Zusammenfassungen eingesetzt wird,
|
||||
niemals fuer die eigentliche Compliance-Entscheidung.
|
||||
</InfoBox>
|
||||
</DevPortalLayout>
|
||||
)
|
||||
}
|
||||
@@ -3,7 +3,7 @@
|
||||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import { Book, Code, FileText, HelpCircle, Zap, Terminal, Database, Shield, ChevronRight, Clock } from 'lucide-react'
|
||||
import { Book, Code, FileText, HelpCircle, Zap, Terminal, Database, Shield, ChevronRight, Clock, BookOpen } from 'lucide-react'
|
||||
|
||||
interface NavItem {
|
||||
title: string
|
||||
@@ -66,6 +66,14 @@ const navigation: NavItem[] = [
|
||||
{ title: 'Phase 2: Dokumentation', href: '/guides/phase2' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Systemdokumentation',
|
||||
href: '/development/docs',
|
||||
icon: <BookOpen className="w-4 h-4" />,
|
||||
items: [
|
||||
{ title: 'Compliance Service', href: '/development/docs' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Changelog',
|
||||
href: '/changelog',
|
||||
|
||||
@@ -54,7 +54,7 @@ services:
|
||||
CONSENT_SERVICE_URL: http://bp-core-consent-service:8081
|
||||
SDK_URL: http://ai-compliance-sdk:8090
|
||||
OLLAMA_URL: ${OLLAMA_URL:-http://host.docker.internal:11434}
|
||||
COMPLIANCE_LLM_MODEL: ${COMPLIANCE_LLM_MODEL:-llama3.2}
|
||||
COMPLIANCE_LLM_MODEL: ${COMPLIANCE_LLM_MODEL:-qwen3:30b-a3b}
|
||||
extra_hosts:
|
||||
- "host.docker.internal:host-gateway"
|
||||
depends_on:
|
||||
@@ -101,7 +101,7 @@ services:
|
||||
SESSION_TTL_HOURS: ${SESSION_TTL_HOURS:-24}
|
||||
COMPLIANCE_LLM_PROVIDER: ${COMPLIANCE_LLM_PROVIDER:-ollama}
|
||||
SELF_HOSTED_LLM_URL: ${SELF_HOSTED_LLM_URL:-http://host.docker.internal:11434}
|
||||
SELF_HOSTED_LLM_MODEL: ${SELF_HOSTED_LLM_MODEL:-llama3.2}
|
||||
SELF_HOSTED_LLM_MODEL: ${SELF_HOSTED_LLM_MODEL:-qwen3:30b-a3b}
|
||||
COMPLIANCE_LLM_MAX_TOKENS: ${COMPLIANCE_LLM_MAX_TOKENS:-4096}
|
||||
COMPLIANCE_LLM_TEMPERATURE: ${COMPLIANCE_LLM_TEMPERATURE:-0.3}
|
||||
COMPLIANCE_LLM_TIMEOUT: ${COMPLIANCE_LLM_TIMEOUT:-120}
|
||||
@@ -139,7 +139,7 @@ services:
|
||||
LLM_PROVIDER: ${COMPLIANCE_LLM_PROVIDER:-ollama}
|
||||
LLM_FALLBACK_PROVIDER: ${LLM_FALLBACK_PROVIDER:-}
|
||||
OLLAMA_URL: ${OLLAMA_URL:-http://host.docker.internal:11434}
|
||||
OLLAMA_DEFAULT_MODEL: ${OLLAMA_DEFAULT_MODEL:-llama3.2}
|
||||
OLLAMA_DEFAULT_MODEL: ${OLLAMA_DEFAULT_MODEL:-qwen3:30b-a3b}
|
||||
ANTHROPIC_API_KEY: ${ANTHROPIC_API_KEY:-}
|
||||
ANTHROPIC_DEFAULT_MODEL: ${ANTHROPIC_DEFAULT_MODEL:-claude-sonnet-4-5-20250929}
|
||||
PII_REDACTION_ENABLED: ${PII_REDACTION_ENABLED:-true}
|
||||
|
||||
Reference in New Issue
Block a user