From 87f2ce9692ffc5ef17562766dc098c7f3e9b7cb2 Mon Sep 17 00:00:00 2001 From: Sharang Parnerkar <30073382+mighty840@users.noreply.github.com> Date: Thu, 16 Apr 2026 13:14:28 +0200 Subject: [PATCH] refactor(admin): split workshop, vendor-compliance, advisory-board/documentation pages Each page.tsx was >500 LOC (610/602/596). Extracted React components to _components/ and custom hook to _hooks/ per-route, reducing all three page.tsx orchestrators to 107/229/120 LOC respectively. Zero behavior changes. Co-Authored-By: Claude Sonnet 4.6 --- .../_components/ArchitectureTab.tsx | 118 ++++ .../documentation/_components/AuditorTab.tsx | 106 ++++ .../_components/LegalCorpusTab.tsx | 72 +++ .../documentation/_components/OverviewTab.tsx | 63 +++ .../documentation/_components/RulesTab.tsx | 64 +++ .../documentation/_components/types.ts | 29 + .../sdk/advisory-board/documentation/page.tsx | 512 +---------------- .../_components/QuickActionCard.tsx | 48 ++ .../vendor-compliance/_components/RiskBar.tsx | 28 + .../_components/StatCard.tsx | 30 + .../_components/VendorCreateModal.tsx | 169 ++++++ .../app/sdk/vendor-compliance/page.tsx | 427 +-------------- .../_components/CreateSessionModal.tsx | 86 +++ .../sdk/workshop/_components/SessionCard.tsx | 49 ++ .../_components/SessionDetailView.tsx | 237 ++++++++ .../app/sdk/workshop/_components/types.ts | 93 ++++ .../sdk/workshop/_components/workshopApi.ts | 13 + .../workshop/_hooks/useWorkshopSessions.ts | 37 ++ admin-compliance/app/sdk/workshop/page.tsx | 517 +----------------- 19 files changed, 1294 insertions(+), 1404 deletions(-) create mode 100644 admin-compliance/app/sdk/advisory-board/documentation/_components/ArchitectureTab.tsx create mode 100644 admin-compliance/app/sdk/advisory-board/documentation/_components/AuditorTab.tsx create mode 100644 admin-compliance/app/sdk/advisory-board/documentation/_components/LegalCorpusTab.tsx create mode 100644 admin-compliance/app/sdk/advisory-board/documentation/_components/OverviewTab.tsx create mode 100644 admin-compliance/app/sdk/advisory-board/documentation/_components/RulesTab.tsx create mode 100644 admin-compliance/app/sdk/advisory-board/documentation/_components/types.ts create mode 100644 admin-compliance/app/sdk/vendor-compliance/_components/QuickActionCard.tsx create mode 100644 admin-compliance/app/sdk/vendor-compliance/_components/RiskBar.tsx create mode 100644 admin-compliance/app/sdk/vendor-compliance/_components/StatCard.tsx create mode 100644 admin-compliance/app/sdk/vendor-compliance/_components/VendorCreateModal.tsx create mode 100644 admin-compliance/app/sdk/workshop/_components/CreateSessionModal.tsx create mode 100644 admin-compliance/app/sdk/workshop/_components/SessionCard.tsx create mode 100644 admin-compliance/app/sdk/workshop/_components/SessionDetailView.tsx create mode 100644 admin-compliance/app/sdk/workshop/_components/types.ts create mode 100644 admin-compliance/app/sdk/workshop/_components/workshopApi.ts create mode 100644 admin-compliance/app/sdk/workshop/_hooks/useWorkshopSessions.ts diff --git a/admin-compliance/app/sdk/advisory-board/documentation/_components/ArchitectureTab.tsx b/admin-compliance/app/sdk/advisory-board/documentation/_components/ArchitectureTab.tsx new file mode 100644 index 0000000..c2d3a74 --- /dev/null +++ b/admin-compliance/app/sdk/advisory-board/documentation/_components/ArchitectureTab.tsx @@ -0,0 +1,118 @@ +export function ArchitectureTab() { + return ( +
+
+

Systemarchitektur

+ +
+ 
{`
+┌─────────────────────────────────────────────────────────────────────┐
+│                        Frontend (Next.js)                            │
+│                     admin-v2:3000/sdk/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)  │                     │
+│  └────────────────────┘  └────────────────────┘                     │
+└─────────────────────────────────────────────────────────────────────┘
+          `}
+
+ +
+
+

Datenfluss

+
    +
  1. Benutzer beschreibt Use Case im Frontend
    2. +
  2. Policy Engine evaluiert gegen alle Regeln
    3. +
  3. Ergebnis mit Controls + Patterns zurueck
    4. +
  4. Optional: LLM erklaert das Ergebnis
    5. +
  5. Bei Risiko: Automatische Eskalation
    6. +
+
+
+

Sicherheitsmerkmale

+
    +
  • TLS 1.3 Verschluesselung
    • +
  • RBAC mit Tenant-Isolation
    • +
  • JWT-basierte Authentifizierung
    • +
  • Audit-Trail aller Aktionen
    • +
  • Keine Rohtext-Speicherung (nur Hash)
    • +
+
+
+
+ +
+

Eskalations-Workflow

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
LevelAusloeserPrueferSLA
E0Nur INFO-Regeln, Risiko < 20Automatisch-
E1WARN-Regeln, Risiko 20-40Team-Lead24h / 72h
E2Art. 9 Daten, DSFA empfohlen, Risiko 40-60DSB8h / 48h
E3BLOCK-Regeln, Art. 22, Risiko > 60DSB + Legal4h / 24h
+
+
+
+ ) +} diff --git a/admin-compliance/app/sdk/advisory-board/documentation/_components/AuditorTab.tsx b/admin-compliance/app/sdk/advisory-board/documentation/_components/AuditorTab.tsx new file mode 100644 index 0000000..21599bd --- /dev/null +++ b/admin-compliance/app/sdk/advisory-board/documentation/_components/AuditorTab.tsx @@ -0,0 +1,106 @@ +export function AuditorTab() { + return ( +
+
+

+ Dokumentation fuer externe Auditoren +

+

+ Diese Dokumentation erfuellt die Anforderungen nach Art. 30 DSGVO (Verzeichnis von + Verarbeitungstaetigkeiten) und dient als Grundlage fuer Audits nach Art. 32 DSGVO. +

+ +
+
+

1. Zweck des Systems

+

+ UCCA ist ein Compliance-Pruefwerkzeug zur Bewertung geplanter KI-Anwendungsfaelle + hinsichtlich ihrer datenschutzrechtlichen Zulaessigkeit. +

+
+ +
+

2. Rechtsgrundlage

+
    +
  • Art. 6 Abs. 1 lit. c DSGVO - Erfuellung rechtlicher Verpflichtungen
    • +
  • Art. 6 Abs. 1 lit. f DSGVO - Berechtigte Interessen (Compliance-Management)
    • +
+
+ +
+

3. Verarbeitete Datenkategorien

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KategorieSpeicherungAufbewahrung
Use-Case-BeschreibungNur Hash (SHA-256)10 Jahre
BewertungsergebnisVollstaendig10 Jahre
Audit-TrailVollstaendig10 Jahre
Eskalations-HistorieVollstaendig10 Jahre
+
+
+ +
+

4. Keine autonomen KI-Entscheidungen

+

+ Das System trifft KEINE automatisierten Einzelentscheidungen im Sinne + von Art. 22 DSGVO, da: +

+
    +
  • Regelauswertung ist keine rechtlich bindende Entscheidung
    • +
  • Alle kritischen Faelle werden menschlich geprueft (E1-E3)
    • +
  • BLOCK-Entscheidungen erfordern immer menschliche Freigabe
    • +
  • Betroffene haben Anfechtungsmoeglichkeit ueber Eskalation
    • +
+
+ +
+

5. Technische und Organisatorische Massnahmen

+
+
+ Vertraulichkeit +
    +
  • RBAC mit Tenant-Isolation
    • +
  • TLS 1.3 Verschluesselung
    • +
  • AES-256 at rest
    • +
+
+
+ Integritaet +
    +
  • Unveraenderlicher Audit-Trail
    • +
  • Policy-Versionierung
    • +
  • Input-Validierung
    • +
+
+
+
+
+
+
+ ) +} diff --git a/admin-compliance/app/sdk/advisory-board/documentation/_components/LegalCorpusTab.tsx b/admin-compliance/app/sdk/advisory-board/documentation/_components/LegalCorpusTab.tsx new file mode 100644 index 0000000..c46a57e --- /dev/null +++ b/admin-compliance/app/sdk/advisory-board/documentation/_components/LegalCorpusTab.tsx @@ -0,0 +1,72 @@ +export function LegalCorpusTab() { + return ( +
+
+

Legal RAG Corpus

+

+ Das System verwendet einen semantischen Suchindex mit 2.274 Chunks aus 19 EU-Regulierungen + fuer rechtsgrundlagenbasierte Erklaerungen. +

+ +
+
+

Indexierte Regulierungen

+
    +
  • DSGVO - Datenschutz-Grundverordnung
    • +
  • AI Act - EU KI-Verordnung
    • +
  • NIS2 - Cybersicherheits-Richtlinie
    • +
  • CRA - Cyber Resilience Act
    • +
  • Data Act - Datengesetz
    • +
  • DSA/DMA - Digital Services/Markets Act
    • +
  • DPF - EU-US Data Privacy Framework
    • +
  • BSI-TR-03161 - Digitale Identitaeten
    • +
+
+
+

RAG-Funktionalitaet

+
    +
  • Hybride Suche (Dense + BM25)
    • +
  • Semantisches Chunking
    • +
  • Cross-Encoder Reranking
    • +
  • Artikel-Referenz-Extraktion
    • +
  • Mehrsprachig (DE/EN)
    • +
+
+
+
+ +
+

Verwendung im System

+
+ {[ + { + step: 1, + title: 'Benutzer fordert Erklaerung an', + text: 'Nach der Bewertung kann eine LLM-basierte Erklaerung generiert werden.', + }, + { + step: 2, + title: 'Legal RAG Client sucht relevante Artikel', + text: 'Basierend auf den ausgeloesten Regeln werden passende Gesetzestexte gefunden.', + }, + { + step: 3, + title: 'LLM generiert Erklaerung mit Rechtsgrundlage', + text: 'Die Erklaerung referenziert konkrete Artikel aus DSGVO, AI Act etc.', + }, + ].map(({ step, title, text }) => ( +
+
+ {step} +
+
+
{title}
+
{text}
+
+
+ ))} +
+
+
+ ) +} diff --git a/admin-compliance/app/sdk/advisory-board/documentation/_components/OverviewTab.tsx b/admin-compliance/app/sdk/advisory-board/documentation/_components/OverviewTab.tsx new file mode 100644 index 0000000..bd73415 --- /dev/null +++ b/admin-compliance/app/sdk/advisory-board/documentation/_components/OverviewTab.tsx @@ -0,0 +1,63 @@ +import { Rule, Pattern, Control } from './types' + +export function OverviewTab({ rules, patterns, controls }: { + rules: Rule[] + patterns: Pattern[] + controls: Control[] +}) { + return ( +
+
+
+

Deterministische Regeln

+
{rules.length}
+

+ Alle Entscheidungen basieren auf transparenten, nachvollziehbaren Regeln. +

+
+
+

Architektur-Patterns

+
{patterns.length}
+

+ Best-Practice-Loesungen fuer datenschutzkonforme KI-Systeme. +

+
+
+

Compliance-Kontrollen

+
{controls.length}
+

+ Technische und organisatorische Massnahmen. +

+
+
+ +
+

Was ist UCCA?

+
+

+ UCCA (Use-Case Compliance & Feasibility Advisor) ist ein deterministisches + Compliance-Pruefwerkzeug, das Organisationen bei der Bewertung geplanter KI-Anwendungsfaelle + hinsichtlich ihrer datenschutzrechtlichen Zulaessigkeit unterstuetzt. +

+

Kernprinzipien

+
    +
  • Determinismus: Alle Entscheidungen basieren auf transparenten Regeln. Die KI trifft KEINE autonomen Entscheidungen.
    • +
  • Transparenz: Alle Regeln, Kontrollen und Patterns sind einsehbar.
    • +
  • Human-in-the-Loop: Kritische Entscheidungen erfordern immer menschliche Pruefung durch DSB oder Legal.
    • +
  • Rechtsgrundlage: Jede Regel referenziert konkrete DSGVO-Artikel.
    • +
+
+
+ +
+

Wichtiger Hinweis zur KI-Nutzung

+

+ Das System verwendet KI (LLM) ausschliesslich zur Erklaerung bereits + getroffener Regelentscheidungen. Die eigentliche Compliance-Bewertung erfolgt + rein deterministisch durch die Policy Engine. BLOCK-Entscheidungen + koennen NICHT durch KI ueberschrieben werden. +

+
+
+ ) +} diff --git a/admin-compliance/app/sdk/advisory-board/documentation/_components/RulesTab.tsx b/admin-compliance/app/sdk/advisory-board/documentation/_components/RulesTab.tsx new file mode 100644 index 0000000..8722a02 --- /dev/null +++ b/admin-compliance/app/sdk/advisory-board/documentation/_components/RulesTab.tsx @@ -0,0 +1,64 @@ +import { Rule } from './types' + +export function RulesTab({ rules, policyVersion, loading }: { + rules: Rule[] + policyVersion: string + loading: boolean +}) { + return ( +
+
+
+

Regel-Katalog

+

Policy Version: {policyVersion}

+
+
{rules.length} Regeln insgesamt
+
+ + {loading ? ( +
Lade Regeln...
+ ) : ( +
+ {Array.from(new Set(rules.map(r => r.category))).map(category => ( +
+
+

{category}

+

+ {rules.filter(r => r.category === category).length} Regeln +

+
+
+ {rules.filter(r => r.category === category).map(rule => ( +
+
+
+
+ {rule.code} + + {rule.severity} + +
+
{rule.title}
+
{rule.description}
+ {rule.gdpr_ref && ( +
{rule.gdpr_ref}
+ )} +
+ {rule.risk_add && ( +
+{rule.risk_add}
+ )} +
+
+ ))} +
+
+ ))} +
+ )} +
+ ) +} diff --git a/admin-compliance/app/sdk/advisory-board/documentation/_components/types.ts b/admin-compliance/app/sdk/advisory-board/documentation/_components/types.ts new file mode 100644 index 0000000..bd58c8d --- /dev/null +++ b/admin-compliance/app/sdk/advisory-board/documentation/_components/types.ts @@ -0,0 +1,29 @@ +export type DocTab = 'overview' | 'architecture' | 'auditor' | 'rules' | 'legal-corpus' + +export interface Rule { + code: string + category: string + title: string + description: string + severity: string + gdpr_ref: string + rationale?: string + risk_add?: number +} + +export interface Pattern { + id: string + title: string + description: string + benefit?: string + effort?: string + risk_reduction?: number +} + +export interface Control { + id: string + title: string + description: string + gdpr_ref?: string + effort?: string +} diff --git a/admin-compliance/app/sdk/advisory-board/documentation/page.tsx b/admin-compliance/app/sdk/advisory-board/documentation/page.tsx index a624c61..072d96f 100644 --- a/admin-compliance/app/sdk/advisory-board/documentation/page.tsx +++ b/admin-compliance/app/sdk/advisory-board/documentation/page.tsx @@ -9,50 +9,22 @@ import { useState, useEffect } from 'react' 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 -} - -// ============================================================================ -// API Configuration -// ============================================================================ +import { DocTab, Rule, Pattern, Control } from './_components/types' +import { OverviewTab } from './_components/OverviewTab' +import { ArchitectureTab } from './_components/ArchitectureTab' +import { AuditorTab } from './_components/AuditorTab' +import { RulesTab } from './_components/RulesTab' +import { LegalCorpusTab } from './_components/LegalCorpusTab' const API_BASE = process.env.NEXT_PUBLIC_SDK_API_URL || 'https://macmini:8090' -// ============================================================================ -// Main Component -// ============================================================================ +const tabs: { id: DocTab; label: string }[] = [ + { id: 'overview', label: 'Uebersicht' }, + { id: 'architecture', label: 'Architektur' }, + { id: 'auditor', label: 'Fuer Auditoren' }, + { id: 'rules', label: 'Regel-Katalog' }, + { id: 'legal-corpus', label: 'Legal RAG' }, +] export default function DocumentationPage() { const [activeTab, setActiveTab] = useState('overview') @@ -100,454 +72,6 @@ export default function DocumentationPage() { fetchData() }, []) - // ============================================================================ - // Tab Content Renderers - // ============================================================================ - - const renderOverview = () => ( -
-
-
-

Deterministische Regeln

-
{rules.length}
-

- Alle Entscheidungen basieren auf transparenten, nachvollziehbaren Regeln. -

-
-
-

Architektur-Patterns

-
{patterns.length}
-

- Best-Practice-Loesungen fuer datenschutzkonforme KI-Systeme. -

-
-
-

Compliance-Kontrollen

-
{controls.length}
-

- Technische und organisatorische Massnahmen. -

-
-
- -
-

Was ist UCCA?

-
-

- UCCA (Use-Case Compliance & Feasibility Advisor) ist ein deterministisches - Compliance-Pruefwerkzeug, das Organisationen bei der Bewertung geplanter KI-Anwendungsfaelle - hinsichtlich ihrer datenschutzrechtlichen Zulaessigkeit unterstuetzt. -

-

Kernprinzipien

-
    -
  • - Determinismus: Alle Entscheidungen basieren auf transparenten Regeln. - Die KI trifft KEINE autonomen Entscheidungen. -
    • -
  • - Transparenz: Alle Regeln, Kontrollen und Patterns sind einsehbar. -
    • -
  • - Human-in-the-Loop: Kritische Entscheidungen erfordern immer - menschliche Pruefung durch DSB oder Legal. -
    • -
  • - Rechtsgrundlage: Jede Regel referenziert konkrete DSGVO-Artikel. -
    • -
-
-
- -
-

- Wichtiger Hinweis zur KI-Nutzung -

-

- Das System verwendet KI (LLM) ausschliesslich zur Erklaerung bereits - getroffener Regelentscheidungen. Die eigentliche Compliance-Bewertung erfolgt - rein deterministisch durch die Policy Engine. BLOCK-Entscheidungen - koennen NICHT durch KI ueberschrieben werden. -

-
-
- ) - - const renderArchitecture = () => ( -
-
-

Systemarchitektur

- -
- 
{`
-┌─────────────────────────────────────────────────────────────────────┐
-│                        Frontend (Next.js)                            │
-│                     admin-v2:3000/sdk/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)  │                     │
-│  └────────────────────┘  └────────────────────┘                     │
-└─────────────────────────────────────────────────────────────────────┘
-          `}
-
- -
-
-

Datenfluss

-
    -
  1. Benutzer beschreibt Use Case im Frontend
    2. -
  2. Policy Engine evaluiert gegen alle Regeln
    3. -
  3. Ergebnis mit Controls + Patterns zurueck
    4. -
  4. Optional: LLM erklaert das Ergebnis
    5. -
  5. Bei Risiko: Automatische Eskalation
    6. -
-
-
-

Sicherheitsmerkmale

-
    -
  • TLS 1.3 Verschluesselung
    • -
  • RBAC mit Tenant-Isolation
    • -
  • JWT-basierte Authentifizierung
    • -
  • Audit-Trail aller Aktionen
    • -
  • Keine Rohtext-Speicherung (nur Hash)
    • -
-
-
-
- -
-

Eskalations-Workflow

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
LevelAusloeserPrueferSLA
E0Nur INFO-Regeln, Risiko < 20Automatisch-
E1WARN-Regeln, Risiko 20-40Team-Lead24h / 72h
E2Art. 9 Daten, DSFA empfohlen, Risiko 40-60DSB8h / 48h
E3BLOCK-Regeln, Art. 22, Risiko > 60DSB + Legal4h / 24h
-
-
-
- ) - - const renderAuditorInfo = () => ( -
-
-

- Dokumentation fuer externe Auditoren -

-

- Diese Dokumentation erfuellt die Anforderungen nach Art. 30 DSGVO (Verzeichnis von - Verarbeitungstaetigkeiten) und dient als Grundlage fuer Audits nach Art. 32 DSGVO. -

- -
-
-

1. Zweck des Systems

-

- UCCA ist ein Compliance-Pruefwerkzeug zur Bewertung geplanter KI-Anwendungsfaelle - hinsichtlich ihrer datenschutzrechtlichen Zulaessigkeit. -

-
- -
-

2. Rechtsgrundlage

-
    -
  • Art. 6 Abs. 1 lit. c DSGVO - Erfuellung rechtlicher Verpflichtungen
    • -
  • Art. 6 Abs. 1 lit. f DSGVO - Berechtigte Interessen (Compliance-Management)
    • -
-
- -
-

3. Verarbeitete Datenkategorien

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KategorieSpeicherungAufbewahrung
Use-Case-BeschreibungNur Hash (SHA-256)10 Jahre
BewertungsergebnisVollstaendig10 Jahre
Audit-TrailVollstaendig10 Jahre
Eskalations-HistorieVollstaendig10 Jahre
-
-
- -
-

4. Keine autonomen KI-Entscheidungen

-

- Das System trifft KEINE automatisierten Einzelentscheidungen im Sinne - von Art. 22 DSGVO, da: -

-
    -
  • Regelauswertung ist keine rechtlich bindende Entscheidung
    • -
  • Alle kritischen Faelle werden menschlich geprueft (E1-E3)
    • -
  • BLOCK-Entscheidungen erfordern immer menschliche Freigabe
    • -
  • Betroffene haben Anfechtungsmoeglichkeit ueber Eskalation
    • -
-
- -
-

5. Technische und Organisatorische Massnahmen

-
-
- Vertraulichkeit -
    -
  • RBAC mit Tenant-Isolation
    • -
  • TLS 1.3 Verschluesselung
    • -
  • AES-256 at rest
    • -
-
-
- Integritaet -
    -
  • Unveraenderlicher Audit-Trail
    • -
  • Policy-Versionierung
    • -
  • Input-Validierung
    • -
-
-
-
-
-
-
- ) - - const renderRulesTab = () => ( -
-
-
-

Regel-Katalog

-

Policy Version: {policyVersion}

-
-
- {rules.length} Regeln insgesamt -
-
- - {loading ? ( -
Lade Regeln...
- ) : ( -
- {Array.from(new Set(rules.map(r => r.category))).map(category => ( -
-
-

{category}

-

- {rules.filter(r => r.category === category).length} Regeln -

-
-
- {rules.filter(r => r.category === category).map(rule => ( -
-
-
-
- {rule.code} - - {rule.severity} - -
-
{rule.title}
-
{rule.description}
- {rule.gdpr_ref && ( -
{rule.gdpr_ref}
- )} -
- {rule.risk_add && ( -
- +{rule.risk_add} -
- )} -
-
- ))} -
-
- ))} -
- )} -
- ) - - const renderLegalCorpus = () => ( -
-
-

Legal RAG Corpus

-

- Das System verwendet einen semantischen Suchindex mit 2.274 Chunks aus 19 EU-Regulierungen - fuer rechtsgrundlagenbasierte Erklaerungen. -

- -
-
-

Indexierte Regulierungen

-
    -
  • DSGVO - Datenschutz-Grundverordnung
    • -
  • AI Act - EU KI-Verordnung
    • -
  • NIS2 - Cybersicherheits-Richtlinie
    • -
  • CRA - Cyber Resilience Act
    • -
  • Data Act - Datengesetz
    • -
  • DSA/DMA - Digital Services/Markets Act
    • -
  • DPF - EU-US Data Privacy Framework
    • -
  • BSI-TR-03161 - Digitale Identitaeten
    • -
-
-
-

RAG-Funktionalitaet

-
    -
  • Hybride Suche (Dense + BM25)
    • -
  • Semantisches Chunking
    • -
  • Cross-Encoder Reranking
    • -
  • Artikel-Referenz-Extraktion
    • -
  • Mehrsprachig (DE/EN)
    • -
-
-
-
- -
-

Verwendung im System

-
-
-
- 1 -
-
-
Benutzer fordert Erklaerung an
-
- Nach der Bewertung kann eine LLM-basierte Erklaerung generiert werden. -
-
-
-
-
- 2 -
-
-
Legal RAG Client sucht relevante Artikel
-
- Basierend auf den ausgeloesten Regeln werden passende Gesetzestexte gefunden. -
-
-
-
-
- 3 -
-
-
LLM generiert Erklaerung mit Rechtsgrundlage
-
- Die Erklaerung referenziert konkrete Artikel aus DSGVO, AI Act etc. -
-
-
-
-
-
- ) - - // ============================================================================ - // Tabs Configuration - // ============================================================================ - - const tabs: { id: DocTab; label: string }[] = [ - { id: 'overview', label: 'Uebersicht' }, - { id: 'architecture', label: 'Architektur' }, - { id: 'auditor', label: 'Fuer Auditoren' }, - { id: 'rules', label: 'Regel-Katalog' }, - { id: 'legal-corpus', label: 'Legal RAG' }, - ] - - // ============================================================================ - // Main Render - // ============================================================================ - return (
@@ -584,11 +108,11 @@ export default function DocumentationPage() {
- {activeTab === 'overview' && renderOverview()} - {activeTab === 'architecture' && renderArchitecture()} - {activeTab === 'auditor' && renderAuditorInfo()} - {activeTab === 'rules' && renderRulesTab()} - {activeTab === 'legal-corpus' && renderLegalCorpus()} + {activeTab === 'overview' && } + {activeTab === 'architecture' && } + {activeTab === 'auditor' && } + {activeTab === 'rules' && } + {activeTab === 'legal-corpus' && }
diff --git a/admin-compliance/app/sdk/vendor-compliance/_components/QuickActionCard.tsx b/admin-compliance/app/sdk/vendor-compliance/_components/QuickActionCard.tsx new file mode 100644 index 0000000..5fbad8b --- /dev/null +++ b/admin-compliance/app/sdk/vendor-compliance/_components/QuickActionCard.tsx @@ -0,0 +1,48 @@ +import React from 'react' +import Link from 'next/link' + +export function QuickActionCard({ + title, + description, + href, + onClick, + icon, +}: { + title: string + description: string + href?: string + onClick?: () => void + icon: React.ReactNode +}) { + const inner = ( + <> +
+ {icon} +
+
+

{title}

+

{description}

+
+ + ) + + if (onClick) { + return ( + + ) + } + + return ( + + {inner} + + ) +} diff --git a/admin-compliance/app/sdk/vendor-compliance/_components/RiskBar.tsx b/admin-compliance/app/sdk/vendor-compliance/_components/RiskBar.tsx new file mode 100644 index 0000000..cf7ce16 --- /dev/null +++ b/admin-compliance/app/sdk/vendor-compliance/_components/RiskBar.tsx @@ -0,0 +1,28 @@ +export function RiskBar({ + label, + count, + total, + color, +}: { + label: string + count: number + total: number + color: string +}) { + const percentage = total > 0 ? (count / total) * 100 : 0 + + return ( +
+
+ {label} + {count} +
+
+
+
+
+ ) +} diff --git a/admin-compliance/app/sdk/vendor-compliance/_components/StatCard.tsx b/admin-compliance/app/sdk/vendor-compliance/_components/StatCard.tsx new file mode 100644 index 0000000..62924af --- /dev/null +++ b/admin-compliance/app/sdk/vendor-compliance/_components/StatCard.tsx @@ -0,0 +1,30 @@ +import Link from 'next/link' + +export function StatCard({ + title, + value, + description, + href, + color, +}: { + title: string + value: number + description: string + href: string + color: 'blue' | 'purple' | 'green' | 'red' +}) { + const colors = { + blue: 'bg-blue-50 dark:bg-blue-900/20', + purple: 'bg-purple-50 dark:bg-purple-900/20', + green: 'bg-green-50 dark:bg-green-900/20', + red: 'bg-red-50 dark:bg-red-900/20', + } + + return ( + +

{title}

+

{value}

+

{description}

+ + ) +} diff --git a/admin-compliance/app/sdk/vendor-compliance/_components/VendorCreateModal.tsx b/admin-compliance/app/sdk/vendor-compliance/_components/VendorCreateModal.tsx new file mode 100644 index 0000000..1ef6bb2 --- /dev/null +++ b/admin-compliance/app/sdk/vendor-compliance/_components/VendorCreateModal.tsx @@ -0,0 +1,169 @@ +'use client' + +import { useState } from 'react' + +export function VendorCreateModal({ + onClose, + onSuccess +}: { + onClose: () => void + onSuccess: () => void +}) { + const [name, setName] = useState('') + const [serviceDescription, setServiceDescription] = useState('') + const [category, setCategory] = useState('data_processor') + const [country, setCountry] = useState('Germany') + const [riskLevel, setRiskLevel] = useState('MEDIUM') + const [dpaStatus, setDpaStatus] = useState('PENDING') + const [contractUrl, setContractUrl] = useState('') + const [isSaving, setIsSaving] = useState(false) + const [error, setError] = useState(null) + + const handleSave = async () => { + if (!name.trim()) { + setError('Name ist erforderlich.') + return + } + setIsSaving(true) + setError(null) + try { + const res = await fetch('/api/sdk/v1/vendor-compliance/vendors', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + name, + serviceDescription, + category, + country, + riskLevel, + dpaStatus, + contractUrl + }) + }) + if (!res.ok) { + const data = await res.json().catch(() => ({})) + throw new Error(data.detail || data.message || `Fehler: ${res.status}`) + } + onSuccess() + } catch (err: unknown) { + setError(err instanceof Error ? err.message : 'Unbekannter Fehler') + } finally { + setIsSaving(false) + } + } + + return ( +
+
+
+
+

Neuen Vendor anlegen

+ +
+ + {error && ( +
+ {error} +
+ )} + +
+
+ + setName(e.target.value)} + className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" + placeholder="Name des Vendors / Dienstleisters" + /> +
+ +
+ + setServiceDescription(e.target.value)} + className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" + placeholder="Kurze Beschreibung der erbrachten Leistung" + /> +
+ +
+ + +
+ +
+ + setCountry(e.target.value)} + className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" + placeholder="z.B. Germany, USA, Netherlands" + /> +
+ +
+ + +
+ +
+ + +
+ +
+ + setContractUrl(e.target.value)} + className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" + placeholder="https://..." + /> +
+
+ +
+ + +
+
+
+ ) +} diff --git a/admin-compliance/app/sdk/vendor-compliance/page.tsx b/admin-compliance/app/sdk/vendor-compliance/page.tsx index 91c32c3..3874527 100644 --- a/admin-compliance/app/sdk/vendor-compliance/page.tsx +++ b/admin-compliance/app/sdk/vendor-compliance/page.tsx @@ -3,217 +3,10 @@ import { useState } from 'react' import { useVendorCompliance } from '@/lib/sdk/vendor-compliance' import Link from 'next/link' - -// ============================================================================= -// VENDOR CREATE MODAL -// ============================================================================= - -function VendorCreateModal({ - onClose, - onSuccess -}: { - onClose: () => void - onSuccess: () => void -}) { - const [name, setName] = useState('') - const [serviceDescription, setServiceDescription] = useState('') - const [category, setCategory] = useState('data_processor') - const [country, setCountry] = useState('Germany') - const [riskLevel, setRiskLevel] = useState('MEDIUM') - const [dpaStatus, setDpaStatus] = useState('PENDING') - const [contractUrl, setContractUrl] = useState('') - const [isSaving, setIsSaving] = useState(false) - const [error, setError] = useState(null) - - const handleSave = async () => { - if (!name.trim()) { - setError('Name ist erforderlich.') - return - } - setIsSaving(true) - setError(null) - try { - const res = await fetch('/api/sdk/v1/vendor-compliance/vendors', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - name, - serviceDescription, - category, - country, - riskLevel, - dpaStatus, - contractUrl - }) - }) - if (!res.ok) { - const data = await res.json().catch(() => ({})) - throw new Error(data.detail || data.message || `Fehler: ${res.status}`) - } - onSuccess() - } catch (err: unknown) { - setError(err instanceof Error ? err.message : 'Unbekannter Fehler') - } finally { - setIsSaving(false) - } - } - - return ( -
- {/* Backdrop */} -
- {/* Modal */} -
-
-

Neuen Vendor anlegen

- -
- - {error && ( -
- {error} -
- )} - -
- {/* Name */} -
- - setName(e.target.value)} - className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" - placeholder="Name des Vendors / Dienstleisters" - /> -
- - {/* Service Description */} -
- - setServiceDescription(e.target.value)} - className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" - placeholder="Kurze Beschreibung der erbrachten Leistung" - /> -
- - {/* Category */} -
- - -
- - {/* Country */} -
- - setCountry(e.target.value)} - className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" - placeholder="z.B. Germany, USA, Netherlands" - /> -
- - {/* Risk Level */} -
- - -
- - {/* DPA Status */} -
- - -
- - {/* Contract URL */} -
- - setContractUrl(e.target.value)} - className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm" - placeholder="https://..." - /> -
-
- - {/* Buttons */} -
- - -
-
-
- ) -} - -// ============================================================================= -// MAIN PAGE -// ============================================================================= +import { VendorCreateModal } from './_components/VendorCreateModal' +import { StatCard } from './_components/StatCard' +import { RiskBar } from './_components/RiskBar' +import { QuickActionCard } from './_components/QuickActionCard' export default function VendorComplianceDashboard() { const { @@ -300,47 +93,19 @@ export default function VendorComplianceDashboard() { Vendor Risiko-Verteilung
- - - - + + + +
- - Durchschn. Inherent Risk - - - {Math.round(riskOverview.averageInherentRisk)}% - + Durchschn. Inherent Risk + {Math.round(riskOverview.averageInherentRisk)}%
- - Durchschn. Residual Risk - - - {Math.round(riskOverview.averageResidualRisk)}% - + Durchschn. Residual Risk + {Math.round(riskOverview.averageResidualRisk)}%
@@ -353,23 +118,11 @@ export default function VendorComplianceDashboard() {
- - + +
@@ -380,30 +133,18 @@ export default function VendorComplianceDashboard() {
-
- {complianceStats.resolvedFindings} -
-
- Behoben -
+
{complianceStats.resolvedFindings}
+
Behoben
-
- {complianceStats.openFindings} -
-
- Offen -
+
{complianceStats.openFindings}
+
Offen
- - Control Pass Rate - - - {Math.round(complianceStats.controlPassRate)}% - + Control Pass Rate + {Math.round(complianceStats.controlPassRate)}%
@@ -443,12 +184,10 @@ export default function VendorComplianceDashboard() { />
- {/* Recent Activity */} + {/* Faellige Reviews */}
-

- Fällige Reviews -

+

Fällige Reviews

{vendors @@ -462,12 +201,8 @@ export default function VendorComplianceDashboard() { >
-

- {vendor.name} -

-

- {vendor.serviceDescription} -

+

{vendor.name}

+

{vendor.serviceDescription}

Review fällig @@ -483,7 +218,6 @@ export default function VendorComplianceDashboard() {
- {/* Vendor Create Modal */} {showVendorCreate && ( setShowVendorCreate(false)} @@ -493,110 +227,3 @@ export default function VendorComplianceDashboard() {
) } - -function StatCard({ - title, - value, - description, - href, - color, -}: { - title: string - value: number - description: string - href: string - color: 'blue' | 'purple' | 'green' | 'red' -}) { - const colors = { - blue: 'bg-blue-50 dark:bg-blue-900/20', - purple: 'bg-purple-50 dark:bg-purple-900/20', - green: 'bg-green-50 dark:bg-green-900/20', - red: 'bg-red-50 dark:bg-red-900/20', - } - - return ( - -

{title}

-

{value}

-

{description}

- - ) -} - -function RiskBar({ - label, - count, - total, - color, -}: { - label: string - count: number - total: number - color: string -}) { - const percentage = total > 0 ? (count / total) * 100 : 0 - - return ( -
-
- {label} - {count} -
-
-
-
-
- ) -} - -function QuickActionCard({ - title, - description, - href, - onClick, - icon, -}: { - title: string - description: string - href?: string - onClick?: () => void - icon: React.ReactNode -}) { - const inner = ( - <> -
- {icon} -
-
-

{title}

-

{description}

-
- - ) - - if (onClick) { - return ( - - ) - } - - return ( - - {inner} - - ) -} diff --git a/admin-compliance/app/sdk/workshop/_components/CreateSessionModal.tsx b/admin-compliance/app/sdk/workshop/_components/CreateSessionModal.tsx new file mode 100644 index 0000000..d418378 --- /dev/null +++ b/admin-compliance/app/sdk/workshop/_components/CreateSessionModal.tsx @@ -0,0 +1,86 @@ +'use client' + +import { useState } from 'react' +import { api } from './workshopApi' + +export function CreateSessionModal({ onClose, onCreated }: { + onClose: () => void + onCreated: () => void +}) { + const [title, setTitle] = useState('') + const [description, setDescription] = useState('') + const [sessionType, setSessionType] = useState<'ucca' | 'dsfa' | 'custom'>('custom') + const [totalSteps, setTotalSteps] = useState(5) + const [saving, setSaving] = useState(false) + + const handleCreate = async () => { + if (!title.trim()) return + setSaving(true) + try { + await api('', { + method: 'POST', + body: JSON.stringify({ + title: title.trim(), + description: description.trim(), + session_type: sessionType, + total_steps: totalSteps, + }), + }) + onCreated() + } catch (err) { + console.error('Create session error:', err) + } finally { + setSaving(false) + } + } + + return ( +
+
e.stopPropagation()}> +

Neuer Workshop

+
+
+ + setTitle(e.target.value)} + className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" + placeholder="z.B. DSFA Workshop Q1" + /> +
+
+ +