diff --git a/admin-compliance/app/sdk/advisory-board/page.tsx b/admin-compliance/app/sdk/advisory-board/page.tsx
index d866bae..9c0d280 100644
--- a/admin-compliance/app/sdk/advisory-board/page.tsx
+++ b/admin-compliance/app/sdk/advisory-board/page.tsx
@@ -1,1521 +1,1096 @@
'use client'
-import React, { useState } from 'react'
+import React, { useState, useEffect, Suspense } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
import Link from 'next/link'
-import { useSDK, UseCaseAssessment, UseCaseIntake } from '@/lib/sdk'
+import { useSDK } from '@/lib/sdk'
import { AssessmentResultCard } from '@/components/sdk/use-case-assessment/AssessmentResultCard'
// =============================================================================
-// WIZARD STEPS
+// WIZARD STEPS CONFIG
// =============================================================================
const WIZARD_STEPS = [
- { id: 1, name: 'Grunddaten', description: 'Name, Beschreibung, Kategorie und Branche' },
- { id: 2, name: 'Datenkategorien', description: 'Welche Daten werden verarbeitet?' },
- { id: 3, name: 'Verarbeitungszweck', description: 'Rechtsgrundlage und Zweck' },
- { id: 4, name: 'Technologie & Modell', description: 'KI-Technologien und Modell-Nutzung' },
- { id: 5, name: 'Automatisierung', description: 'Grad der Automatisierung' },
- { id: 6, name: 'Hosting & Transfer', description: 'Hosting und Datentransfer' },
- { id: 7, name: 'Datenhaltung', description: 'Aufbewahrung und Vertraege' },
- { id: 8, name: 'Zusammenfassung', description: 'Ueberpruefung und Abschluss' },
-]
-
-const TOTAL_STEPS = WIZARD_STEPS.length
-
-const DOMAINS = [
- { value: 'healthcare', label: 'Gesundheit' },
- { value: 'finance', label: 'Finanzen' },
- { value: 'education', label: 'Bildung' },
- { value: 'retail', label: 'Handel' },
- { value: 'it_services', label: 'IT-Dienstleistungen' },
- { value: 'consulting', label: 'Beratung' },
- { value: 'manufacturing', label: 'Produktion' },
- { value: 'hr', label: 'Personalwesen' },
- { value: 'marketing', label: 'Marketing' },
- { value: 'legal', label: 'Recht' },
- { value: 'public', label: 'Oeffentlicher Sektor' },
- { value: 'general', label: 'Allgemein' },
+ { id: 1, title: 'Grundlegendes', description: 'Titel, Beschreibung und KI-Kategorie' },
+ { id: 2, title: 'Datenkategorien', description: 'Welche Daten werden verarbeitet?' },
+ { id: 3, title: 'Verarbeitungszweck', description: 'Zweck der Datenverarbeitung' },
+ { id: 4, title: 'Automatisierung', description: 'Grad der Automatisierung' },
+ { id: 5, title: 'Hosting & Modell', description: 'Technische Details' },
+ { id: 6, title: 'Datentransfer', description: 'Internationaler Datentransfer' },
+ { id: 7, title: 'Datenhaltung', description: 'Aufbewahrung und Speicherung' },
+ { id: 8, title: 'Vertraege', description: 'Compliance und Vereinbarungen' },
]
// =============================================================================
-// RISK CALCULATION (client-side)
+// KI-Anwendungskategorien als Auswahlkacheln
// =============================================================================
-function calculateRiskScore(form: WizardFormData): { score: number; level: 'LOW' | 'MEDIUM' | 'HIGH' | 'CRITICAL'; dsfaRequired: boolean } {
- let score = 0
- if (form.processesPersonalData) score += 10
- if (form.specialCategories) score += 25
- if (form.biometricData) score += 20
- if (form.healthData) score += 15
- if (form.minorsData) score += 15
- if (form.financialData) score += 5
- if (form.purposeProfiling) score += 15
- if (form.purposeAutomatedDecision) score += 20
- if (form.automation === 'fully_automated') score += 25
- else if (form.automation === 'semi_automated') score += 10
- if (form.internationalTransfer) score += 10
- if (form.modelTraining) score += 10
- if (form.modelFinetune) score += 5
+const AI_USE_CATEGORIES = [
+ { value: 'content_generation', label: 'Content-Erstellung', icon: 'โ๏ธ', desc: 'Texte, Berichte, E-Mails, Dokumentation automatisch erstellen' },
+ { value: 'image_generation', label: 'Bilder erstellen', icon: '๐จ', desc: 'KI-generierte Bilder, Grafiken, Produktfotos' },
+ { value: 'marketing_material', label: 'Marketingmaterial', icon: '๐ข', desc: 'Werbetexte, Social Media Posts, Newsletter generieren' },
+ { value: 'customer_service', label: 'Kundenservice / Chatbot', icon: '๐ฌ', desc: 'Automatisierte Kundenanfragen, FAQ-Bots, Support-Tickets' },
+ { value: 'crm_analytics', label: 'CRM & Kundenanalyse', icon: '๐ฅ', desc: 'Kundensegmentierung, Churn-Vorhersage, Lead-Scoring' },
+ { value: 'hr_recruiting', label: 'Bewerberauswahl / HR', icon: '๐งโ๐ผ', desc: 'CV-Screening, Matching, Mitarbeiteranalysen' },
+ { value: 'financial_analysis', label: 'Finanzdaten analysieren', icon: '๐', desc: 'Buchhaltung, Forecasting, Betrugsยญerkennung, Risikobewertung' },
+ { value: 'predictive_maintenance', label: 'Predictive Maintenance', icon: '๐ง', desc: 'Vorausschauende Wartung, Ausfallvorhersage, IoT-Sensoranalyse' },
+ { value: 'production_analytics', label: 'Produktionsdatenยญauswertung', icon: '๐ญ', desc: 'Qualitaetskontrolle, Prozessยญoptimierung, OEE-Analyse' },
+ { value: 'document_analysis', label: 'Dokumentenanalyse', icon: '๐', desc: 'Vertraege, Rechnungen, PDFs automatisch auswerten und klassifizieren' },
+ { value: 'code_development', label: 'Softwareentwicklung', icon: '๐ป', desc: 'Code-Generierung, Code-Review, Test-Erstellung, Dokumentation' },
+ { value: 'translation', label: 'Uebersetzung', icon: '๐', desc: 'Automatische Uebersetzung von Texten, Dokumenten, Webinhalten' },
+ { value: 'search_knowledge', label: 'Wissensmanagement / Suche', icon: '๐', desc: 'Interne Wissensdatenbank, RAG-basierte Suche, FAQ-Systeme' },
+ { value: 'data_extraction', label: 'Datenextraktion', icon: 'โ๏ธ', desc: 'OCR, Formularerkennung, strukturierte Daten aus Freitext' },
+ { value: 'risk_compliance', label: 'Risiko & Compliance', icon: 'โ๏ธ', desc: 'Compliance-Pruefung, Risikobewertung, Audit-Unterstuetzung' },
+ { value: 'supply_chain', label: 'Lieferkette & Logistik', icon: '๐', desc: 'Bedarfsprognose, Routenoptimierung, Bestandsmanagement' },
+ { value: 'medical_health', label: 'Medizin & Gesundheit', icon: '๐ฅ', desc: 'Diagnoseunterstuetzung, Bildanalyse, Patientendaten' },
+ { value: 'security_monitoring', label: 'Sicherheit & Monitoring', icon: '๐ก๏ธ', desc: 'Anomalieerkennung, Bedrohungsanalyse, Zugriffskontrolle' },
+ { value: 'personalization', label: 'Personalisierung', icon: '๐ฏ', desc: 'Produktempfehlungen, dynamische Preisgestaltung, A/B-Testing' },
+ { value: 'voice_speech', label: 'Sprache & Audio', icon: '๐๏ธ', desc: 'Spracherkennung, Text-to-Speech, Meeting-Transkription' },
+ { value: 'other', label: 'Sonstiges', icon: 'โ', desc: 'Anderer KI-Anwendungsfall' },
+]
- let level: 'LOW' | 'MEDIUM' | 'HIGH' | 'CRITICAL'
- if (score >= 60) level = 'CRITICAL'
- else if (score >= 40) level = 'HIGH'
- else if (score >= 20) level = 'MEDIUM'
- else level = 'LOW'
-
- const dsfaRequired = score >= 40 || form.specialCategories || (form.purposeAutomatedDecision && form.automation === 'fully_automated')
-
- return { score, level, dsfaRequired }
+// Map Profil-Branche to domain value for backend compatibility
+function industryToDomain(industries: string[]): string {
+ if (!industries || industries.length === 0) return 'general'
+ const first = industries[0].toLowerCase()
+ if (first.includes('gesundheit') || first.includes('pharma')) return 'healthcare'
+ if (first.includes('finanz') || first.includes('versicherung')) return 'finance'
+ if (first.includes('bildung')) return 'education'
+ if (first.includes('handel') || first.includes('commerce')) return 'retail'
+ if (first.includes('it') || first.includes('technologie')) return 'it_services'
+ if (first.includes('beratung') || first.includes('consulting')) return 'consulting'
+ if (first.includes('produktion') || first.includes('industrie') || first.includes('maschinenbau')) return 'manufacturing'
+ if (first.includes('marketing') || first.includes('agentur')) return 'marketing'
+ if (first.includes('recht')) return 'legal'
+ return 'general'
}
// =============================================================================
-// USE CASE CARD
+// DATA CATEGORIES (Step 2) โ grouped tile selection
// =============================================================================
-function UseCaseCard({
- useCase,
- isActive,
- onSelect,
- onDelete,
-}: {
- useCase: UseCaseAssessment
- isActive: boolean
- onSelect: () => void
- onDelete: () => void
-}) {
- const completionPercent = Math.round((useCase.stepsCompleted / TOTAL_STEPS) * 100)
+const DATA_CATEGORY_GROUPS = [
+ {
+ group: 'Stamm- & Kontaktdaten',
+ items: [
+ { value: 'basic_identity', label: 'Name & Identitaet', icon: '๐ค', desc: 'Vor-/Nachname, Geburtsdatum, Geschlecht' },
+ { value: 'contact_data', label: 'Kontaktdaten', icon: '๐ง', desc: 'E-Mail, Telefon, Fax' },
+ { value: 'address_data', label: 'Adressdaten', icon: '๐ ', desc: 'Wohn-/Meldeadresse, PLZ, Lieferadresse' },
+ { value: 'government_ids', label: 'Ausweisdaten', icon: '๐ชช', desc: 'Personalausweis-Nr., Reisepass, Fuehrerschein' },
+ { value: 'customer_ids', label: 'Kundennummern', icon: '๐ท๏ธ', desc: 'Kunden-ID, Vertrags-Nr., Mitgliedsnummer' },
+ ],
+ },
+ {
+ group: 'Besondere Kategorien (Art. 9 DSGVO)',
+ art9: true,
+ items: [
+ { value: 'health_data', label: 'Gesundheitsdaten', icon: '๐ฅ', desc: 'Diagnosen, Medikation, AU, Pflegegrad' },
+ { value: 'biometric_data', label: 'Biometrische Daten', icon: '๐', desc: 'Fingerabdruck, Gesichtserkennung, Iris-Scan' },
+ { value: 'genetic_data', label: 'Genetische Daten', icon: '๐งฌ', desc: 'DNA-Profil, Genomsequenzen, Erbkrankheitstests' },
+ { value: 'racial_ethnic', label: 'Ethnische Herkunft', icon: '๐', desc: 'Rassische/ethnische Zugehoerigkeit' },
+ { value: 'political_opinions', label: 'Politische Meinungen', icon: '๐ณ๏ธ', desc: 'Politische Ueberzeugungen, Parteizugehoerigkeit' },
+ { value: 'religious_beliefs', label: 'Religion', icon: '๐๏ธ', desc: 'Religionszugehoerigkeit, Weltanschauung' },
+ { value: 'trade_union', label: 'Gewerkschaft', icon: '๐ค', desc: 'Gewerkschaftsmitgliedschaft' },
+ { value: 'sexual_orientation', label: 'Sexuelle Orientierung', icon: '๐ณ๏ธโ๐', desc: 'Sexualleben und Orientierung' },
+ ],
+ },
+ {
+ group: 'Finanz- & Steuerdaten',
+ items: [
+ { value: 'bank_account', label: 'Bankverbindung', icon: '๐ฆ', desc: 'IBAN, BIC, Kontonummer' },
+ { value: 'payment_card', label: 'Zahlungskarten', icon: '๐ณ', desc: 'Kreditkarten-Nr., CVV (PCI-DSS)' },
+ { value: 'transaction_data', label: 'Transaktionsdaten', icon: '๐งพ', desc: 'Zahlungshistorie, Ueberweisungen, Kaufhistorie' },
+ { value: 'credit_score', label: 'Bonitaet / Schufa', icon: '๐', desc: 'Kreditwuerdigkeit, Schuldenhistorie' },
+ { value: 'income_salary', label: 'Einkommen & Gehalt', icon: '๐ฐ', desc: 'Bruttogehalt, Nettolohn, Boni' },
+ { value: 'tax_ids', label: 'Steuer-IDs', icon: '๐', desc: 'Steuer-ID, Steuernummer, USt-IdNr.' },
+ { value: 'insurance_data', label: 'Versicherungsdaten', icon: 'โ๏ธ', desc: 'Versicherungsnummern, Policen, Schadenmeldungen' },
+ ],
+ },
+ {
+ group: 'Fahrzeug- & Mobilitaetsdaten',
+ items: [
+ { value: 'vehicle_ids', label: 'Fahrzeug-IDs (VIN)', icon: '๐', desc: 'Fahrgestellnummer (VIN/FIN), Fahrzeugschein' },
+ { value: 'license_plates', label: 'Kennzeichen', icon: '๐ข', desc: 'Amtliches Kennzeichen, Wunschkennzeichen' },
+ { value: 'gps_tracking', label: 'GPS & Routen', icon: '๐', desc: 'Echtzeitposition, Fahrtenprotokolle' },
+ { value: 'telematics', label: 'Telematikdaten', icon: '๐ก', desc: 'Fahrverhalten, Geschwindigkeit, Motordiagnose' },
+ { value: 'fleet_data', label: 'Fuhrpark / Logistik', icon: '๐', desc: 'Einsatzzeiten, Kilometerstand, Fahrerzuweisung' },
+ ],
+ },
+ {
+ group: 'Technische Identifikatoren',
+ items: [
+ { value: 'ip_address', label: 'IP-Adresse', icon: '๐', desc: 'IPv4/IPv6 (EuGH: personenbezogen)' },
+ { value: 'device_ids', label: 'Geraete-IDs', icon: '๐ฑ', desc: 'IMEI, UUID, Advertising-ID, Seriennummer' },
+ { value: 'cookies_tracking', label: 'Cookies & Tracking', icon: '๐ช', desc: 'Session-/Persistent Cookies, Pixel-Tags' },
+ { value: 'browser_fingerprint', label: 'Browser-Fingerprint', icon: '๐', desc: 'Browser-Typ, OS, Plugins, Canvas-Fingerprint' },
+ { value: 'mac_address', label: 'MAC-Adresse', icon: '๐ถ', desc: 'Netzwerkadapter-Kennung, WLAN-Praesenz' },
+ ],
+ },
+ {
+ group: 'Verhaltens- & Nutzungsdaten',
+ items: [
+ { value: 'clickstream', label: 'Klick- & Nutzungspfade', icon: '๐ฑ๏ธ', desc: 'Klickpfade, Scrolltiefe, Verweildauer, Heatmaps' },
+ { value: 'purchase_history', label: 'Kaufverhalten', icon: '๐', desc: 'Bestellhistorie, Warenkorb, Wunschlisten' },
+ { value: 'app_usage', label: 'App-Nutzung', icon: '๐ฒ', desc: 'Genutzte Apps, Nutzungsdauer, In-App-Aktivitaeten' },
+ { value: 'profiling_scores', label: 'Profiling / Scoring', icon: '๐', desc: 'KI-generierte Profile, Segmente, Affinitaetsscores' },
+ ],
+ },
+ {
+ group: 'Kommunikation & Medien',
+ items: [
+ { value: 'email_content', label: 'E-Mail-Inhalte', icon: 'โ๏ธ', desc: 'E-Mail-Texte, Anhaenge, Metadaten' },
+ { value: 'chat_messages', label: 'Chat & Messaging', icon: '๐ฌ', desc: 'Textnachrichten, Messenger, Teams, Slack' },
+ { value: 'call_recordings', label: 'Telefonaufzeichnungen', icon: '๐', desc: 'Gespraeche, Transkripte, Anrufmetadaten' },
+ { value: 'video_conference', label: 'Videokonferenzen', icon: '๐น', desc: 'Meeting-Aufzeichnungen, Teilnehmerlisten' },
+ { value: 'photographs', label: 'Fotos & Bilder', icon: '๐ท', desc: 'Portraitfotos, Profilbilder, Produktfotos' },
+ { value: 'cctv_surveillance', label: 'Videoueberwachung', icon: '๐น', desc: 'CCTV-Aufnahmen, Zutrittskontrolle' },
+ { value: 'voice_recordings', label: 'Sprachaufnahmen', icon: '๐๏ธ', desc: 'Voicemails, Sprachmemos, Diktate' },
+ ],
+ },
+ {
+ group: 'HR & Beschaeftigung',
+ items: [
+ { value: 'employment_data', label: 'Beschaeftigungsdaten', icon: '๐ผ', desc: 'Arbeitgeber, Berufsbezeichnung, Vertragsart' },
+ { value: 'performance_data', label: 'Leistungsbeurteilungen', icon: '๐', desc: 'Zielerreichung, Feedback, Abmahnungen' },
+ { value: 'work_time', label: 'Arbeitszeit', icon: 'โฐ', desc: 'Zeiterfassung, Ueberstunden, Schichtplaene' },
+ { value: 'candidate_data', label: 'Bewerberdaten', icon: '๐', desc: 'Lebenslaeufe, Interviews, Assessment-Ergebnisse' },
+ { value: 'social_security', label: 'Sozialversicherungs-Nr.', icon: '๐ก๏ธ', desc: 'RVNR (Art. 9 โ kodiert Geburtsdatum/Geschlecht)' },
+ ],
+ },
+ {
+ group: 'IoT & Sensordaten',
+ items: [
+ { value: 'industrial_sensor', label: 'Industriesensoren', icon: '๐ญ', desc: 'Maschinendaten, Fehlerprotokolle, Produktionsmesswerte' },
+ { value: 'wearable_data', label: 'Wearable-Daten', icon: 'โ', desc: 'Herzfrequenz, Schritte, Schlaf (Art. 9 โ Gesundheit)' },
+ { value: 'smart_home', label: 'Smart-Home', icon: '๐ก', desc: 'Heizung, Licht, Bewegungsmelder, Nutzungszeiten' },
+ { value: 'energy_data', label: 'Energieverbrauch', icon: '๐', desc: 'Smart-Meter, Verbrauchsprofil (enthuellt Verhalten)' },
+ ],
+ },
+ {
+ group: 'Sonstige Kategorien',
+ items: [
+ { value: 'children_data', label: 'Kinderdaten (unter 16)', icon: '๐ถ', desc: 'Besonderer Schutz, Eltern-Einwilligung erforderlich' },
+ { value: 'criminal_data', label: 'Strafrechtliche Daten', icon: 'โ๏ธ', desc: 'Vorstrafen, Ermittlungsverfahren (Art. 10 DSGVO)' },
+ { value: 'location_data', label: 'Standortdaten', icon: '๐', desc: 'GPS, Mobilfunk, WLAN-Ortung, Bewegungsprofile' },
+ { value: 'social_media', label: 'Social-Media-Daten', icon: '๐ฑ', desc: 'Profile, Posts, Follower, Interaktionen' },
+ { value: 'auth_credentials', label: 'Login & Zugangsdaten', icon: '๐', desc: 'Passwoerter, 2FA, Session-Tokens, Zugriffsprotokolle' },
+ ],
+ },
+]
- return (
-
- {/* Delete Button */}
-
{
- e.stopPropagation()
- onDelete()
- }}
- className="absolute top-4 right-4 p-1 text-gray-400 hover:text-red-500 transition-colors"
- >
-
-
-
-
+// =============================================================================
+// PROCESSING PURPOSES (Step 3) โ tile selection
+// =============================================================================
-
-
- {completionPercent === 100 ? (
-
-
-
- ) : (
-
-
-
- )}
-
-
-
{useCase.name}
-
{useCase.description}
-
-
- Fortschritt
- {completionPercent}%
-
-
-
- {useCase.assessmentResult && (
-
-
- Risiko: {useCase.assessmentResult.riskLevel}
-
- {useCase.assessmentResult.dsfaRequired && (
-
- DSFA erforderlich
-
- )}
-
- )}
-
-
-
- )
+const PURPOSE_TILES = [
+ { value: 'service_delivery', label: 'Serviceerbringung', icon: 'โ๏ธ', desc: 'Kernfunktion des Produkts oder Services' },
+ { value: 'analytics', label: 'Analyse & BI', icon: '๐', desc: 'Statistische Auswertung, Business Intelligence, Reporting' },
+ { value: 'marketing', label: 'Marketing & Werbung', icon: '๐ข', desc: 'Werbung, Personalisierung, Targeting, Newsletter' },
+ { value: 'profiling', label: 'Profiling', icon: '๐ฏ', desc: 'Automatisierte Analyse personenbezogener Aspekte' },
+ { value: 'automated_decision', label: 'Automatisierte Entscheidung', icon: '๐ค', desc: 'Art. 22 DSGVO โ Entscheidung ohne menschliches Zutun' },
+ { value: 'customer_support', label: 'Kundensupport', icon: '๐ง', desc: 'Anfragenbearbeitung, Ticketsystem, Chatbot' },
+ { value: 'quality_control', label: 'Qualitaetskontrolle', icon: 'โ
', desc: 'Produktpruefung, Fehleranalyse, Prozessoptimierung' },
+ { value: 'hr_management', label: 'Personalverwaltung', icon: '๐ฅ', desc: 'Recruiting, Onboarding, Mitarbeiterentwicklung' },
+ { value: 'fraud_detection', label: 'Betrugserkennung', icon: '๐ต๏ธ', desc: 'Anomalieerkennung, Transaktionsueberwachung' },
+ { value: 'research', label: 'Forschung & Entwicklung', icon: '๐ฌ', desc: 'Wissenschaftliche Auswertung, Produktentwicklung' },
+ { value: 'compliance_audit', label: 'Compliance & Audit', icon: '๐', desc: 'Regulatorische Pruefung, Dokumentation, Audit-Trail' },
+ { value: 'communication', label: 'Kommunikation', icon: '๐ฌ', desc: 'Interne/externe Kommunikation, Uebersetzung' },
+ { value: 'content_creation', label: 'Content-Erstellung', icon: 'โ๏ธ', desc: 'Text-, Bild-, Video-Generierung' },
+ { value: 'predictive', label: 'Vorhersage & Prognose', icon: '๐ฎ', desc: 'Demand Forecasting, Predictive Analytics, Wartungsvorhersage' },
+ { value: 'security', label: 'IT-Sicherheit', icon: '๐ก๏ธ', desc: 'Bedrohungserkennung, Zugriffskontrolle, Monitoring' },
+ { value: 'archiving', label: 'Archivierung', icon: '๐๏ธ', desc: 'Gesetzliche Aufbewahrung, Dokumentenarchiv' },
+]
+
+// =============================================================================
+// AUTOMATION LEVELS (Step 4) โ single-select tiles
+// =============================================================================
+
+const AUTOMATION_TILES = [
+ { value: 'assistive', label: 'Assistiv (Mensch entscheidet)', icon: '๐งโ๐ป', desc: 'KI liefert Vorschlaege, Mensch trifft Entscheidung', examples: 'Rechtschreibkorrektur, Suchvorschlaege, Zusammenfassungen' },
+ { value: 'semi_automated', label: 'Teilautomatisiert (Mensch prueft)', icon: '๐ค', desc: 'KI erstellt Ergebnisse, Mensch prueft und bestaetigt', examples: 'E-Mail-Entwuerfe mit Freigabe, KI-Vertraege mit juristischer Pruefung' },
+ { value: 'fully_automated', label: 'Vollautomatisiert (KI entscheidet)', icon: '๐ค', desc: 'KI trifft Entscheidungen eigenstaendig', examples: 'Automatische Kreditentscheidungen, autonome Chatbot-Antworten' },
+]
+
+// =============================================================================
+// HOSTING & MODEL (Step 5) โ tiles
+// =============================================================================
+
+const HOSTING_PROVIDER_TILES = [
+ { value: 'self_hosted', label: 'Eigenes Hosting', icon: '๐ข', desc: 'On-Premise oder eigene Server' },
+ { value: 'hetzner', label: 'Hetzner (DE)', icon: '๐ฉ๐ช', desc: 'Deutsche Cloud-Infrastruktur' },
+ { value: 'aws', label: 'AWS', icon: 'โ๏ธ', desc: 'Amazon Web Services' },
+ { value: 'azure', label: 'Microsoft Azure', icon: '๐ท', desc: 'Microsoft Cloud' },
+ { value: 'gcp', label: 'Google Cloud', icon: '๐ต', desc: 'Google Cloud Platform' },
+ { value: 'other', label: 'Anderer Anbieter', icon: '๐', desc: 'Sonstiger Cloud-Anbieter' },
+]
+
+const HOSTING_REGION_TILES = [
+ { value: 'de', label: 'Deutschland', icon: '๐ฉ๐ช', desc: 'Rechenzentrum in Deutschland' },
+ { value: 'eu', label: 'EU / EWR', icon: '๐ช๐บ', desc: 'Innerhalb der Europaeischen Union' },
+ { value: 'us', label: 'USA', icon: '๐บ๐ธ', desc: 'Vereinigte Staaten' },
+ { value: 'other', label: 'Andere Region', icon: '๐', desc: 'Drittland ausserhalb EU/USA' },
+]
+
+const MODEL_USAGE_TILES = [
+ { value: 'inference', label: 'Inferenz', icon: 'โก', desc: 'Fertiges Modell direkt nutzen (z.B. ChatGPT, Claude, DeepL)' },
+ { value: 'rag', label: 'RAG', icon: '๐', desc: 'Modell erhaelt Kontext aus eigenen Dokumenten' },
+ { value: 'finetune', label: 'Fine-Tuning', icon: '๐๏ธ', desc: 'Bestehendes Modell mit eigenen Daten nachtrainieren' },
+ { value: 'training', label: 'Eigenes Modell trainieren', icon: '๐ง ', desc: 'Komplett eigenes KI-Modell von Grund auf' },
+]
+
+// =============================================================================
+// DATA TRANSFER (Step 6) โ tiles
+// =============================================================================
+
+const TRANSFER_TARGET_TILES = [
+ { value: 'no_transfer', label: 'Kein Drittlandtransfer', icon: '๐ช๐บ', desc: 'Daten verbleiben in der EU/EWR' },
+ { value: 'usa', label: 'USA', icon: '๐บ๐ธ', desc: 'Datentransfer in die USA' },
+ { value: 'uk', label: 'Grossbritannien', icon: '๐ฌ๐ง', desc: 'Datentransfer nach UK (Angemessenheitsbeschluss)' },
+ { value: 'switzerland', label: 'Schweiz', icon: '๐จ๐ญ', desc: 'Datentransfer in die Schweiz (Angemessenheitsbeschluss)' },
+ { value: 'other_adequate', label: 'Anderes Land (Angemessenheit)', icon: 'โ
', desc: 'Land mit Angemessenheitsbeschluss der EU' },
+ { value: 'other_third', label: 'Sonstiges Drittland', icon: '๐', desc: 'Land ohne Angemessenheitsbeschluss' },
+]
+
+const TRANSFER_MECHANISM_TILES = [
+ { value: 'not_needed', label: 'Nicht erforderlich', icon: 'โ
', desc: 'Kein Drittlandtransfer oder Angemessenheit' },
+ { value: 'scc', label: 'Standardvertragsklauseln', icon: '๐', desc: 'SCC nach Art. 46 Abs. 2c DSGVO' },
+ { value: 'bcr', label: 'Binding Corporate Rules', icon: '๐๏ธ', desc: 'BCR nach Art. 47 DSGVO' },
+ { value: 'adequacy', label: 'Angemessenheitsbeschluss', icon: '๐ค', desc: 'EU-Kommissionsbeschluss (z.B. EU-US DPF)' },
+ { value: 'derogation', label: 'Ausnahme (Art. 49)', icon: 'โ ๏ธ', desc: 'Einwilligung oder zwingende Interessen' },
+]
+
+// =============================================================================
+// RETENTION (Step 7) โ tiles
+// =============================================================================
+
+const RETENTION_TILES = [
+ { value: 'session', label: 'Nur waehrend Session', icon: 'โฑ๏ธ', desc: 'Daten werden nach Sitzungsende geloescht' },
+ { value: '30_days', label: '30 Tage', icon: '๐
', desc: 'Kurzfristige Aufbewahrung' },
+ { value: '90_days', label: '90 Tage', icon: '๐
', desc: 'Standardaufbewahrung' },
+ { value: '1_year', label: '1 Jahr', icon: '๐', desc: 'Jaehrliche Aufbewahrung' },
+ { value: '3_years', label: '3 Jahre', icon: '๐', desc: 'Mittelfristige Aufbewahrung' },
+ { value: '6_years', label: '6 Jahre', icon: '๐', desc: 'Handelsrechtliche Aufbewahrungsfrist' },
+ { value: '10_years', label: '10 Jahre', icon: '๐', desc: 'Steuerrechtliche Aufbewahrungsfrist' },
+ { value: 'indefinite', label: 'Unbefristet', icon: 'โพ๏ธ', desc: 'Keine zeitliche Begrenzung' },
+]
+
+// =============================================================================
+// CONTRACTS (Step 8) โ tiles
+// =============================================================================
+
+const CONTRACT_TILES = [
+ { value: 'has_dpa', label: 'AVV / DPA vorhanden', icon: '๐', desc: 'Auftragsverarbeitungsvertrag nach Art. 28 DSGVO' },
+ { value: 'has_aia_doc', label: 'AI Act Dokumentation', icon: '๐ค', desc: 'Risikoklassifizierung und technische Doku nach EU AI Act' },
+ { value: 'has_dsfa', label: 'DSFA durchgefuehrt', icon: '๐', desc: 'Datenschutz-Folgenabschaetzung nach Art. 35 DSGVO' },
+ { value: 'has_tia', label: 'TIA durchgefuehrt', icon: '๐', desc: 'Transfer Impact Assessment fuer Drittlandtransfers' },
+ { value: 'has_tom', label: 'TOM dokumentiert', icon: '๐', desc: 'Technisch-organisatorische Massnahmen nach Art. 32 DSGVO' },
+ { value: 'has_vvt', label: 'Im VVT erfasst', icon: '๐', desc: 'Im Verzeichnis von Verarbeitungstaetigkeiten eingetragen' },
+ { value: 'has_consent', label: 'Einwilligungen eingeholt', icon: 'โ
', desc: 'Nutzereinwilligungen vorhanden und dokumentiert' },
+ { value: 'none', label: 'Noch keine Dokumente', icon: 'โ ๏ธ', desc: 'Compliance-Dokumentation steht noch aus' },
+]
+
+// =============================================================================
+// SHARED TILE TOGGLE HELPER
+// =============================================================================
+
+function toggleInArray(arr: string[], value: string): string[] {
+ return arr.includes(value) ? arr.filter(v => v !== value) : [...arr, value]
}
// =============================================================================
-// WIZARD FORM DATA
+// MAIN COMPONENT
// =============================================================================
-interface WizardFormData {
- // Step 1: Grunddaten
- name: string
- description: string
- category: string
- domain: string
- // Step 2: Datenkategorien
- dataCategories: string[]
- processesPersonalData: boolean
- specialCategories: boolean
- healthData: boolean
- biometricData: boolean
- minorsData: boolean
- financialData: boolean
- customDataTypes: string[]
- // Step 3: Verarbeitungszweck
- legalBasis: string
- purposeProfiling: boolean
- purposeAutomatedDecision: boolean
- purposeMarketing: boolean
- purposeAnalytics: boolean
- purposeServiceDelivery: boolean
- // Step 4: Technologie & Modell
- aiTechnologies: string[]
- modelInference: boolean
- modelRag: boolean
- modelFinetune: boolean
- modelTraining: boolean
- // Step 5: Automatisierung
- automation: 'assistive' | 'semi_automated' | 'fully_automated'
- // Step 6: Hosting & Transfer
- hostingProvider: string
- hostingRegion: string
- internationalTransfer: boolean
- transferCountries: string[]
- transferMechanism: string
- // Step 7: Datenhaltung & Vertraege
- retentionDays: number
- retentionPurpose: string
- hasDpa: boolean
- hasAiaDocumentation: boolean
- hasRiskAssessment: boolean
- subprocessors: string
- // Notes
- notes: string
-}
+function AdvisoryBoardPageInner() {
+ const router = useRouter()
+ const searchParams = useSearchParams()
+ const { state: sdkState } = useSDK()
+ const editId = searchParams.get('edit')
+ const isEditMode = !!editId
-// =============================================================================
-// WIZARD COMPONENT
-// =============================================================================
-
-function UseCaseWizard({
- onComplete,
- onCancel,
-}: {
- onComplete: (useCase: UseCaseAssessment) => void
- onCancel: () => void
-}) {
const [currentStep, setCurrentStep] = useState(1)
const [isSubmitting, setIsSubmitting] = useState(false)
- const [uccaError, setUccaError] = useState(null)
- const [uccaResult, setUccaResult] = useState | null>(null)
- const [completedUseCase, setCompletedUseCase] = useState(null)
- const [resultSource, setResultSource] = useState<'api' | 'local'>('local')
- const [formData, setFormData] = useState({
- name: '',
- description: '',
- category: '',
+ const [editLoading, setEditLoading] = useState(false)
+ const [result, setResult] = useState(null)
+ const [error, setError] = useState(null)
+
+ // Derive domain from company profile industry
+ const profileIndustry = sdkState.companyProfile?.industry
+ const derivedDomain = industryToDomain(
+ Array.isArray(profileIndustry) ? profileIndustry : profileIndustry ? [profileIndustry] : []
+ )
+
+ // Form state โ tile-based multi-select via arrays
+ const [form, setForm] = useState({
+ title: '',
+ use_case_text: '',
domain: 'general',
- dataCategories: [],
- processesPersonalData: false,
- specialCategories: false,
- healthData: false,
- biometricData: false,
- minorsData: false,
- financialData: false,
- customDataTypes: [],
- legalBasis: 'consent',
- purposeProfiling: false,
- purposeAutomatedDecision: false,
- purposeMarketing: false,
- purposeAnalytics: false,
- purposeServiceDelivery: false,
- aiTechnologies: [],
- modelInference: true,
- modelRag: false,
- modelFinetune: false,
- modelTraining: false,
- automation: 'assistive',
- hostingProvider: 'self_hosted',
- hostingRegion: 'eu',
- internationalTransfer: false,
- transferCountries: [],
- transferMechanism: 'none',
- retentionDays: 90,
- retentionPurpose: '',
- hasDpa: false,
- hasAiaDocumentation: false,
- hasRiskAssessment: false,
+ category: '' as string,
+ // Data categories (multi-select tiles)
+ data_categories: [] as string[],
+ custom_data_types: [] as string[],
+ // Purpose (multi-select tiles)
+ purposes: [] as string[],
+ // Automation (single-select tile)
+ automation: '' as string,
+ // Hosting (single-select tile)
+ hosting_provider: '' as string,
+ hosting_region: '' as string,
+ // Model Usage (multi-select tiles)
+ model_usage: [] as string[],
+ // Data Transfer (Step 6 โ tiles)
+ transfer_targets: [] as string[],
+ transfer_countries: [] as string[],
+ transfer_mechanism: '' as string,
+ // Retention (Step 7)
+ retention_period: '' as string,
+ retention_purpose: '',
+ // Contracts (Step 8 โ multi-select tiles)
+ contracts: [] as string[],
subprocessors: '',
- notes: '',
})
- const updateFormData = (updates: Partial) => {
- setFormData(prev => ({ ...prev, ...updates }))
+ const updateForm = (updates: Partial) => {
+ setForm(prev => ({ ...prev, ...updates }))
}
- const buildIntake = (): UseCaseIntake => ({
- domain: formData.domain,
- dataCategories: formData.dataCategories,
- processesPersonalData: formData.processesPersonalData,
- specialCategories: formData.specialCategories,
- healthData: formData.healthData,
- biometricData: formData.biometricData,
- minorsData: formData.minorsData,
- financialData: formData.financialData,
- customDataTypes: formData.customDataTypes.filter(s => s.trim()),
- legalBasis: formData.legalBasis,
- purposes: {
- profiling: formData.purposeProfiling,
- automatedDecision: formData.purposeAutomatedDecision,
- marketing: formData.purposeMarketing,
- analytics: formData.purposeAnalytics,
- serviceDelivery: formData.purposeServiceDelivery,
- },
- automation: formData.automation,
- hosting: {
- provider: formData.hostingProvider,
- region: formData.hostingRegion,
- },
- modelUsage: {
- inference: formData.modelInference,
- rag: formData.modelRag,
- finetune: formData.modelFinetune,
- training: formData.modelTraining,
- },
- aiTechnologies: formData.aiTechnologies,
- internationalTransfer: {
- enabled: formData.internationalTransfer,
- countries: formData.transferCountries,
- mechanism: formData.transferMechanism,
- },
- retention: {
- days: formData.retentionDays,
- purpose: formData.retentionPurpose,
- },
- contracts: {
- hasDpa: formData.hasDpa,
- hasAiaDocumentation: formData.hasAiaDocumentation,
- hasRiskAssessment: formData.hasRiskAssessment,
- subprocessors: formData.subprocessors,
- },
- })
-
- const handleNext = async () => {
- if (currentStep < TOTAL_STEPS) {
- setCurrentStep(prev => prev + 1)
- return
+ // Auto-set domain from profile
+ useEffect(() => {
+ if (!isEditMode && derivedDomain !== 'general') {
+ updateForm({ domain: derivedDomain })
}
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [derivedDomain])
- // Final step โ create use case + call UCCA API
+ // Pre-fill form when in edit mode
+ useEffect(() => {
+ if (!editId) return
+ setEditLoading(true)
+ fetch(`/api/sdk/v1/ucca/assessments/${editId}`)
+ .then(r => r.json())
+ .then(data => {
+ const intake = data.intake || {}
+ setForm({
+ title: data.title || '',
+ use_case_text: intake.use_case_text || '',
+ domain: data.domain || 'general',
+ category: data.category || intake.category || '',
+ data_categories: intake.data_categories || [],
+ custom_data_types: intake.data_types?.custom_data_types || intake.custom_data_types || [],
+ purposes: intake.purposes || [],
+ automation: intake.automation || '',
+ hosting_provider: intake.hosting?.provider || '',
+ hosting_region: intake.hosting?.region || '',
+ model_usage: intake.model_usage_list || [],
+ transfer_targets: intake.transfer_targets || [],
+ transfer_countries: intake.international_transfer?.countries || intake.transfer_countries || [],
+ transfer_mechanism: intake.transfer_mechanism || intake.international_transfer?.mechanism || '',
+ retention_period: intake.retention_period || '',
+ retention_purpose: intake.retention?.purpose || intake.retention_purpose || '',
+ contracts: intake.contracts_list || [],
+ subprocessors: intake.contracts?.subprocessors || intake.subprocessors || '',
+ })
+ })
+ .catch(() => {})
+ .finally(() => setEditLoading(false))
+ }, [editId])
+
+ const handleSubmit = async () => {
setIsSubmitting(true)
- setUccaError(null)
-
- const risk = calculateRiskScore(formData)
- const intake = buildIntake()
-
- const newUseCase: UseCaseAssessment = {
- id: `uc-${Date.now()}`,
- name: formData.name,
- description: formData.description,
- category: formData.category,
- stepsCompleted: TOTAL_STEPS,
- steps: WIZARD_STEPS.map(s => ({
- id: `step-${s.id}`,
- name: s.name,
- completed: true,
- data: {},
- })),
- assessmentResult: {
- riskLevel: risk.level,
- applicableRegulations: ['DSGVO', 'AI Act'],
- recommendedControls: buildRecommendations(formData, risk),
- dsfaRequired: risk.dsfaRequired,
- aiActClassification: formData.aiTechnologies.length > 0
- ? (risk.level === 'CRITICAL' || risk.level === 'HIGH' ? 'HIGH' : 'LIMITED')
- : 'MINIMAL',
- },
- intake,
- createdAt: new Date(),
- updatedAt: new Date(),
- }
-
- // Call UCCA API in background
+ setError(null)
try {
- const uccaIntake = {
- title: formData.name,
- use_case_text: formData.description,
- domain: formData.domain,
- data_types: {
- personal_data: formData.processesPersonalData,
- special_categories: formData.specialCategories,
- health_data: formData.healthData,
- biometric_data: formData.biometricData,
- minors_data: formData.minorsData,
- financial_data: formData.financialData,
- custom_data_types: formData.customDataTypes.filter(s => s.trim()),
- },
- purpose: {
- profiling: formData.purposeProfiling,
- automated_decision: formData.purposeAutomatedDecision,
- marketing: formData.purposeMarketing,
- analytics: formData.purposeAnalytics,
- service_delivery: formData.purposeServiceDelivery,
- },
- automation: formData.automation,
- hosting: { provider: formData.hostingProvider, region: formData.hostingRegion },
- model_usage: {
- inference: formData.modelInference,
- rag: formData.modelRag,
- finetune: formData.modelFinetune,
- training: formData.modelTraining,
- },
- legal_basis: formData.legalBasis,
- international_transfer: {
- enabled: formData.internationalTransfer,
- countries: formData.transferCountries,
- mechanism: formData.transferMechanism,
- },
- retention: { days: formData.retentionDays, purpose: formData.retentionPurpose },
- contracts: {
- has_dpa: formData.hasDpa,
- has_aia_documentation: formData.hasAiaDocumentation,
- has_risk_assessment: formData.hasRiskAssessment,
- subprocessors: formData.subprocessors,
+ const intake = {
+ title: form.title,
+ use_case_text: form.use_case_text,
+ domain: form.domain,
+ category: form.category,
+ data_categories: form.data_categories,
+ custom_data_types: form.custom_data_types.filter(s => s.trim()),
+ purposes: form.purposes,
+ automation: form.automation,
+ hosting: {
+ provider: form.hosting_provider,
+ region: form.hosting_region,
},
+ model_usage_list: form.model_usage,
+ transfer_targets: form.transfer_targets,
+ transfer_countries: form.transfer_countries,
+ transfer_mechanism: form.transfer_mechanism,
+ retention_period: form.retention_period,
+ retention_purpose: form.retention_purpose,
+ contracts_list: form.contracts,
+ subprocessors: form.subprocessors,
store_raw_text: true,
}
- const resp = await fetch('/api/sdk/v1/ucca/assess', {
- method: 'POST',
+ const url = isEditMode
+ ? `/api/sdk/v1/ucca/assessments/${editId}`
+ : '/api/sdk/v1/ucca/assess'
+ const method = isEditMode ? 'PUT' : 'POST'
+
+ const response = await fetch(url, {
+ method,
headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify(uccaIntake),
+ body: JSON.stringify(intake),
})
- if (resp.ok) {
- const data = await resp.json()
- // Merge UCCA result if available
- if (data.assessment?.id) {
- newUseCase.uccaAssessmentId = data.assessment.id
- }
- if (data.result) {
- newUseCase.assessmentResult = {
- ...newUseCase.assessmentResult!,
- riskLevel: data.result.risk_level || newUseCase.assessmentResult!.riskLevel,
- dsfaRequired: data.result.dsfa_required ?? newUseCase.assessmentResult!.dsfaRequired,
- }
- setUccaResult(data.result)
- setResultSource('api')
- }
- } else {
- setUccaError('UCCA-API nicht erreichbar โ lokale Risikobewertung wird verwendet.')
- setResultSource('local')
+ if (!response.ok) {
+ const errData = await response.json().catch(() => null)
+ throw new Error(errData?.error || `HTTP ${response.status}`)
}
- } catch {
- setUccaError('UCCA-API nicht erreichbar โ lokale Risikobewertung wird verwendet.')
- setResultSource('local')
+
+ if (isEditMode) {
+ router.push(`/sdk/use-cases/${editId}`)
+ return
+ }
+
+ const data = await response.json()
+ setResult(data)
+ } catch (err) {
+ setError(err instanceof Error ? err.message : 'Fehler bei der Bewertung')
+ } finally {
+ setIsSubmitting(false)
}
-
- setIsSubmitting(false)
- setCompletedUseCase(newUseCase)
}
- const handleBack = () => {
- if (currentStep > 1) setCurrentStep(prev => prev - 1)
- }
-
- const risk = calculateRiskScore(formData)
-
- // ========== RESULT VIEW (after completion) ==========
- if (completedUseCase) {
+ // If we have a result, show it
+ if (result) {
+ const r = result as { assessment?: { id: string }; result?: Record }
return (
-
- {/* Header */}
+
-
-
Assessment-Ergebnis: {completedUseCase.name}
-
- {resultSource === 'api'
- ? 'Regelbasierte Bewertung durch UCCA Policy Engine'
- : 'Lokale Risikobewertung (UCCA-API nicht verfuegbar)'}
-
-
-
-
- {resultSource === 'api' ? 'UCCA API' : 'Lokal'}
-
-
-
-
- {/* UCCA API Result (detailed) */}
- {uccaResult && (
-
[0]['result']} />
- )}
-
- {/* Local result fallback (when API not available) */}
- {!uccaResult && completedUseCase.assessmentResult && (
-
-
-
- {risk.score}
-
-
-
- Risikostufe: {completedUseCase.assessmentResult.riskLevel}
-
-
- AI Act: {completedUseCase.assessmentResult.aiActClassification}
-
-
- {completedUseCase.assessmentResult.dsfaRequired && (
-
- DSFA empfohlen
-
- )}
-
-
- {/* Recommended Controls */}
- {completedUseCase.assessmentResult.recommendedControls.length > 0 && (
-
-
Empfohlene Massnahmen
-
- {completedUseCase.assessmentResult.recommendedControls.map((ctrl, i) => (
-
- ))}
-
-
+
Assessment Ergebnis
+
+ {r.assessment?.id && (
+
router.push(`/sdk/use-cases/${r.assessment!.id}`)}
+ className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
+ >
+ Zum Assessment
+
)}
-
- {/* Applicable Regulations */}
-
- {completedUseCase.assessmentResult.applicableRegulations.map(reg => (
-
- {reg}
-
- ))}
-
+
router.push('/sdk/use-cases')}
+ className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200"
+ >
+ Zur Uebersicht
+
- )}
-
- {/* UCCA Error info */}
- {uccaError && (
-
- {uccaError}
-
- )}
-
- {/* Action buttons */}
-
-
- Schliessen
-
- onComplete(completedUseCase)}
- className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 font-medium transition-colors"
- >
- Use Case speichern
-
+ {r.result && (
+
[0]['result']} />
+ )}
)
}
return (
-
+
{/* Header */}
-
-
-
Neuer Use Case
-
-
-
-
-
+
+
+
+ {isEditMode ? 'Assessment bearbeiten' : 'Use Case Workshop'}
+
+
+ {isEditMode
+ ? 'Angaben anpassen und Assessment neu bewerten'
+ : 'Erfassen Sie Ihren KI-Anwendungsfall Schritt fuer Schritt'}
+
- {/* Progress */}
-
- {WIZARD_STEPS.map((step, index) => (
-
-
- {step.id < currentStep ? (
-
-
-
- ) : (
- step.id
- )}
-
- {index < WIZARD_STEPS.length - 1 && (
-
- )}
-
- ))}
-
-
- Schritt {currentStep} von {TOTAL_STEPS}: {WIZARD_STEPS[currentStep - 1].description}
-
+
+ UCCA-Dokumentation
+
- {/* Content */}
-
- {/* ============================================ */}
- {/* STEP 1: Grunddaten */}
- {/* ============================================ */}
+ {/* Edit loading indicator */}
+ {editLoading && (
+
+ Lade Assessment-Daten...
+
+ )}
+
+ {/* Step Indicator */}
+
+ {WIZARD_STEPS.map((step, idx) => (
+
+ setCurrentStep(step.id)}
+ className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${
+ currentStep === step.id
+ ? 'bg-purple-600 text-white'
+ : currentStep > step.id
+ ? 'bg-green-100 text-green-700'
+ : 'bg-gray-100 text-gray-500'
+ }`}
+ >
+
+ {currentStep > step.id ? 'โ' : step.id}
+
+ {step.title}
+
+ {idx < WIZARD_STEPS.length - 1 &&
}
+
+ ))}
+
+
+ {/* Error */}
+ {error && (
+
{error}
+ )}
+
+ {/* Step Content */}
+
+ {/* Step 1: Grundlegendes */}
{currentStep === 1 && (
-
+
+
Grundlegende Informationen
+
+ {/* Branche aus Profil (nur Anzeige) */}
+ {profileIndustry && (Array.isArray(profileIndustry) ? profileIndustry.length > 0 : true) && (
+
+
Branche (aus Unternehmensprofil)
+
+ {Array.isArray(profileIndustry) ? profileIndustry.join(', ') : profileIndustry}
+
+
+ )}
+
- Name des Use Cases *
+ Titel des Anwendungsfalls
updateFormData({ name: e.target.value })}
- placeholder="z.B. Marketing-KI fuer Kundensegmentierung"
+ value={form.title}
+ onChange={e => updateForm({ title: e.target.value })}
+ placeholder="z.B. Chatbot fuer Kundenservice"
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
/>
- Beschreibung *
+ Beschreibung
+
+ {/* KI-Anwendungskategorie als Kacheln */}
- Kategorie
- updateFormData({ category: e.target.value })}
- className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
- >
- Kategorie waehlen...
- Marketing & Vertrieb
- Personal & HR
- Finanzen & Controlling
- Betrieb & Produktion
- Kundenservice
- Sonstiges
-
-
-
-
Branche
-
updateFormData({ domain: e.target.value })}
- className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
- >
- {DOMAINS.map(d => (
- {d.label}
+
+ In welchem Bereich kommt KI zum Einsatz?
+
+ Waehlen Sie die passende Kategorie fuer Ihren Anwendungsfall.
+
+ {AI_USE_CATEGORIES.map(cat => (
+
updateForm({ category: cat.value })}
+ className={`p-3 rounded-xl border-2 text-left transition-all ${
+ form.category === cat.value
+ ? 'border-purple-500 bg-purple-50 ring-1 ring-purple-300'
+ : 'border-gray-200 hover:border-purple-300 hover:bg-gray-50'
+ }`}
+ >
+
+ {cat.icon}
+ {cat.label}
+
+ {cat.desc}
+
))}
-
+
)}
- {/* ============================================ */}
- {/* STEP 2: Datenkategorien */}
- {/* ============================================ */}
+ {/* Step 2: Datenkategorien */}
{currentStep === 2 && (
-
-
Welche Daten werden verarbeitet?
+
+
Welche Daten werden verarbeitet?
+
Waehlen Sie alle Datenkategorien, die in diesem Use Case verarbeitet werden.
- {/* Personenbezogene Daten Ja/Nein */}
-
-
- {formData.processesPersonalData && (
- <>
- {/* Standard-Datenkategorien */}
-
-
- Welche Datenkategorien? (Mehrfachauswahl)
-
-
- {['Name/Kontakt', 'E-Mail', 'Adresse', 'Telefon', 'Geburtsdatum', 'Finanzdaten', 'Standort', 'Nutzungsverhalten'].map(
- cat => (
-
- {
- if (e.target.checked) {
- updateFormData({ dataCategories: [...formData.dataCategories, cat] })
- } else {
- updateFormData({ dataCategories: formData.dataCategories.filter(c => c !== cat) })
- }
- }}
- className="w-4 h-4 text-purple-600"
- />
- {cat}
-
- )
- )}
-
-
-
- {/* Art. 9 + besondere Kategorien */}
-
-
- updateFormData({ specialCategories: e.target.checked })}
- className="w-4 h-4 text-purple-600"
- />
-
- Besondere Kategorien (Art. 9 DSGVO): Gesundheit, Biometrie, Religion, etc.
-
-
- {formData.specialCategories && (
-
- Bei besonderen Kategorien ist eine DSFA in der Regel erforderlich!
-
- )}
-
-
- {/* Spezifische sensitive Daten */}
- {[
- { key: 'healthData' as const, label: 'Gesundheitsdaten', desc: 'Diagnosen, Medikation, Fitness' },
- { key: 'biometricData' as const, label: 'Biometrische Daten', desc: 'Gesichtserkennung, Fingerabdruck, Stimme' },
- { key: 'minorsData' as const, label: 'Daten von Minderjaehrigen', desc: 'Unter 16 Jahren' },
- { key: 'financialData' as const, label: 'Finanzdaten', desc: 'Kontodaten, Transaktionen, Kreditwuerdigkeit' },
- ].map(item => (
-
- updateFormData({ [item.key]: e.target.checked })}
- className="mt-1 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
- />
-
-
{item.label}
-
{item.desc}
-
-
- ))}
-
- {/* Sonstige Datentypen */}
-
-
Sonstige Datentypen
-
- z.B. Kennzeichen, Fahrzeug-Identifikationsnummer (VIN), Geraete-IDs, IP-Adressen
-
- {formData.customDataTypes.map((dt, idx) => (
-
-
{
- const updated = [...formData.customDataTypes]
- updated[idx] = e.target.value
- updateFormData({ customDataTypes: updated })
- }}
- placeholder="Datentyp eingeben..."
- className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent"
- />
-
{
- updateFormData({ customDataTypes: formData.customDataTypes.filter((_, i) => i !== idx) })
- }}
- className="p-2 text-red-500 hover:bg-red-50 rounded-lg"
- title="Entfernen"
- >
-
-
-
+ {DATA_CATEGORY_GROUPS.map(group => (
+
+
+ {group.art9 && 'โ ๏ธ '}{group.group}
+
+ {group.art9 && (
+
Besonders schutzwuerdig โ erhoehte Anforderungen an Rechtsgrundlage und TOM
+ )}
+
+ {group.items.map(item => (
+
updateForm({ data_categories: toggleInArray(form.data_categories, item.value) })}
+ className={`p-3 rounded-xl border-2 text-left transition-all ${
+ form.data_categories.includes(item.value)
+ ? group.art9
+ ? 'border-orange-500 bg-orange-50 ring-1 ring-orange-300'
+ : 'border-purple-500 bg-purple-50 ring-1 ring-purple-300'
+ : 'border-gray-200 hover:border-purple-300 hover:bg-gray-50'
+ }`}
+ >
+
+ {item.icon}
+ {item.label}
+
+ {item.desc}
+
))}
+
+
+ ))}
+
+ {/* Sonstige Datentypen */}
+
+
Sonstige Datentypen
+
+ Falls Ihre Datenkategorie oben nicht aufgefuehrt ist, koennen Sie sie hier ergaenzen.
+
+ {form.custom_data_types.map((dt, idx) => (
+
- >
+ ))}
+
updateForm({ custom_data_types: [...form.custom_data_types, ''] })}
+ className="flex items-center gap-1 text-sm text-purple-600 hover:text-purple-700 font-medium"
+ >
+
+ Weiteren Datentyp hinzufuegen
+
+
+
+ {form.data_categories.length > 0 && (
+
+ {form.data_categories.length} Datenkategorie{form.data_categories.length !== 1 ? 'n' : ''} ausgewaehlt
+ {form.data_categories.some(c => DATA_CATEGORY_GROUPS.find(g => g.art9)?.items.some(i => i.value === c)) && (
+ โ inkl. besonderer Kategorien (Art. 9)
+ )}
+
)}
)}
- {/* ============================================ */}
- {/* STEP 3: Verarbeitungszweck */}
- {/* ============================================ */}
+ {/* Step 3: Verarbeitungszweck */}
{currentStep === 3 && (
-
Verarbeitungszweck & Rechtsgrundlage
+
Zweck der Verarbeitung
+
Waehlen Sie alle zutreffenden Verarbeitungszwecke. Die passende Rechtsgrundlage wird vom SDK automatisch ermittelt.
-
-
Rechtsgrundlage (Art. 6 DSGVO)
-
updateFormData({ legalBasis: e.target.value })}
- className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
- >
- Einwilligung (Art. 6 Abs. 1a)
- Vertragserfullung (Art. 6 Abs. 1b)
- Rechtliche Verpflichtung (Art. 6 Abs. 1c)
- Lebenswichtige Interessen (Art. 6 Abs. 1d)
- Oeffentliches Interesse (Art. 6 Abs. 1e)
- Berechtigtes Interesse (Art. 6 Abs. 1f)
-
+
+ {PURPOSE_TILES.map(item => (
+
updateForm({ purposes: toggleInArray(form.purposes, item.value) })}
+ className={`p-3 rounded-xl border-2 text-left transition-all ${
+ form.purposes.includes(item.value)
+ ? 'border-purple-500 bg-purple-50 ring-1 ring-purple-300'
+ : 'border-gray-200 hover:border-purple-300 hover:bg-gray-50'
+ }`}
+ >
+
+ {item.icon}
+ {item.label}
+
+ {item.desc}
+
+ ))}
-
Zweck der Verarbeitung
- {[
- { key: 'purposeProfiling' as const, label: 'Profiling', desc: 'Automatisierte Analyse personenbezogener Aspekte' },
- { key: 'purposeAutomatedDecision' as const, label: 'Automatisierte Entscheidung', desc: 'Art. 22 DSGVO โ Entscheidung ohne menschliches Zutun' },
- { key: 'purposeMarketing' as const, label: 'Marketing', desc: 'Werbung, Personalisierung, Targeting' },
- { key: 'purposeAnalytics' as const, label: 'Analytics', desc: 'Statistische Auswertung, Business Intelligence' },
- { key: 'purposeServiceDelivery' as const, label: 'Serviceerbringung', desc: 'Kernfunktion des Produkts/Services' },
- ].map(item => (
-
- updateFormData({ [item.key]: e.target.checked })}
- className="mt-1 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
- />
-
-
{item.label}
-
{item.desc}
-
-
- ))}
+ {form.purposes.includes('profiling') && (
+
+
Hinweis: Profiling
+
Profiling unterliegt besonderen Anforderungen nach Art. 22 DSGVO. Betroffene haben das Recht auf Information und Widerspruch.
+
+ )}
+ {form.purposes.includes('automated_decision') && (
+
+
Achtung: Automatisierte Entscheidung
+
Art. 22 DSGVO: Vollautomatisierte Entscheidungen mit rechtlicher Wirkung erfordern besondere Schutzmassnahmen, Informationspflichten und das Recht auf menschliche Ueberpruefung.
+
+ )}
)}
- {/* ============================================ */}
- {/* STEP 4: Technologie & Modell */}
- {/* ============================================ */}
+ {/* Step 4: Automatisierung */}
{currentStep === 4 && (
-
Technologie & Modell-Nutzung
-
- {/* KI-Technologien */}
-
-
- Eingesetzte KI-Technologien (Mehrfachauswahl)
-
-
- {[
- 'Machine Learning',
- 'Deep Learning',
- 'Natural Language Processing',
- 'Computer Vision',
- 'Generative AI (LLM)',
- 'Empfehlungssysteme',
- 'Predictive Analytics',
- 'Chatbots/Assistenten',
- ].map(tech => (
-
- {
- if (e.target.checked) {
- updateFormData({ aiTechnologies: [...formData.aiTechnologies, tech] })
- } else {
- updateFormData({ aiTechnologies: formData.aiTechnologies.filter(t => t !== tech) })
- }
- }}
- className="w-4 h-4 text-purple-600"
- />
- {tech}
-
- ))}
-
-
-
- {/* Modell-Nutzung mit Erklaerungen */}
-
Wie wird das KI-Modell genutzt?
-
Waehlen Sie alle zutreffenden Optionen.
-
- {[
- {
- key: 'modelInference' as const,
- label: 'Inferenz',
- desc: 'Ein fertiges, vortrainiertes Modell wird direkt genutzt โ z.B. ChatGPT, Claude, DeepL. Das Modell wird nicht veraendert.',
- example: 'Sie nutzen die OpenAI API, um Texte zusammenzufassen.',
- },
- {
- key: 'modelRag' as const,
- label: 'RAG (Retrieval-Augmented Generation)',
- desc: 'Das Modell erhaelt zusaetzlichen Kontext aus Ihren eigenen Dokumenten. Das Modell selbst wird nicht veraendert.',
- example: 'Ein Chatbot durchsucht Ihre Firmen-FAQ und beantwortet Fragen basierend auf den gefundenen Dokumenten.',
- },
- {
- key: 'modelFinetune' as const,
- label: 'Fine-Tuning',
- desc: 'Ein bestehendes Modell wird mit Ihren eigenen Daten nachtrainiert. Die Originaldaten fliessen ins Modell ein.',
- example: 'Sie trainieren GPT-3.5 mit 1.000 Ihrer Support-Tickets, damit es Ihren Kommunikationsstil uebernimmt.',
- },
- {
- key: 'modelTraining' as const,
- label: 'Training (eigenes Modell)',
- desc: 'Sie trainieren ein komplett eigenes KI-Modell von Grund auf. Hoechster Kontrollgrad, aber auch hoechstes Datenrisiko.',
- example: 'Sie trainieren ein eigenes Bilderkennungsmodell fuer Qualitaetskontrolle in der Produktion.',
- },
- ].map(item => (
-
-
- updateFormData({ [item.key]: e.target.checked })}
- className="mt-1 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
- />
-
-
{item.label}
-
{item.desc}
-
- Beispiel: {item.example}
-
-
-
-
- ))}
-
- {/* Glossar */}
-
-
- Glossar: ML, DL, NLP, LLM, RAG, Fine-Tuning โ Was bedeutet das?
-
-
-
- ML (Machine Learning) โ
- Computer lernt Muster aus Daten, statt explizit programmiert zu werden.
- Beispiel: Spam-Filter, der aus markierten E-Mails lernt.
-
-
- DL (Deep Learning) โ
- Spezielle Form von ML mit kuenstlichen neuronalen Netzen (viele Schichten).
- Beispiel: Bilderkennung, Spracherkennung, Textgenerierung.
-
-
- NLP (Natural Language Processing) โ
- KI, die menschliche Sprache versteht und verarbeitet.
- Beispiel: ChatGPT, DeepL, Sentiment-Analyse von Kundenbewertungen.
-
-
- LLM (Large Language Model) โ
- Sehr grosses Sprachmodell, trainiert auf riesigen Textmengen.
- Beispiel: GPT-4, Claude, Llama, Gemini.
-
-
- RAG (Retrieval-Augmented Generation) โ
- Das LLM erhaelt vor der Antwort relevante Dokumente aus einer Datenbank als Kontext.
- Vorteil: Aktuelle und firmenspezifische Antworten, ohne das Modell neu zu trainieren.
-
-
- Fine-Tuning โ
- Ein bestehendes Modell wird mit eigenen Daten weiter trainiert, um es zu spezialisieren.
- Achtung: Ihre Trainingsdaten werden Teil des Modells.
-
-
-
-
- )}
-
- {/* ============================================ */}
- {/* STEP 5: Automatisierung */}
- {/* ============================================ */}
- {currentStep === 5 && (
-
-
Grad der Automatisierung
+
Grad der Automatisierung
Wie stark greift die KI in Entscheidungen ein? Je hoeher der Automatisierungsgrad, desto strenger die regulatorischen Anforderungen.
- {[
- {
- value: 'assistive' as const,
- label: 'Assistiv (Mensch entscheidet)',
- desc: 'Die KI liefert Informationen oder Vorschlaege, aber ein Mensch trifft immer die finale Entscheidung.',
- examples: 'Rechtschreibkorrektur, Suchvorschlaege, Zusammenfassungen, Uebersetzungshilfe',
- },
- {
- value: 'semi_automated' as const,
- label: 'Teilautomatisiert (Mensch prueft)',
- desc: 'Die KI erstellt Ergebnisse oder Entwuerfe, die ein Mensch vor der Ausfuehrung prueft und bestaetigt.',
- examples: 'E-Mail-Entwuerfe mit manueller Freigabe, vorgeschlagene Diagnosen mit Arztbestaetigung, KI-generierte Vertraege mit juristischer Pruefung',
- },
- {
- value: 'fully_automated' as const,
- label: 'Vollautomatisiert (KI entscheidet)',
- desc: 'Die KI trifft Entscheidungen eigenstaendig. Ein Mensch ueberwacht nur stichprobenartig oder bei Ausnahmen.',
- examples: 'Automatische Kreditentscheidungen, automatisierte Bewerbungs-Vorauswahl, autonome Chatbot-Antworten ohne Pruefung',
- },
- ].map(item => (
-
- updateFormData({ automation: e.target.value as typeof formData.automation })}
- className="mt-1 text-purple-600 focus:ring-purple-500"
- />
-
-
{item.label}
-
{item.desc}
-
Beispiele: {item.examples}
-
-
- ))}
+
+ {AUTOMATION_TILES.map(item => (
+
updateForm({ automation: item.value })}
+ className={`p-4 rounded-xl border-2 text-left transition-all ${
+ form.automation === item.value
+ ? 'border-purple-500 bg-purple-50 ring-1 ring-purple-300'
+ : 'border-gray-200 hover:border-purple-300 hover:bg-gray-50'
+ }`}
+ >
+
+ {item.icon}
+ {item.label}
+
+ {item.desc}
+ Beispiele: {item.examples}
+
+ ))}
+
- {/* Art. 22 DSGVO Info-Box */}
-
Art. 22 DSGVO โ Automatisierte Einzelentscheidungen
+
Warum ist das wichtig?
- Vollautomatisierte Systeme, die Personen erheblich beeinflussen (z.B. Kreditvergabe, Bewerbungsauswahl),
- unterliegen strengen Auflagen: Informationspflicht, Recht auf menschliche Ueberpruefung und Anfechtungsmoeglichkeit.
+ Art. 22 DSGVO regelt automatisierte Einzelentscheidungen. Vollautomatisierte Systeme, die Personen
+ erheblich beeinflussen (z.B. Kreditvergabe, Bewerbungsauswahl), unterliegen strengen Auflagen:
+ Informationspflicht, Recht auf menschliche Ueberpruefung und Anfechtungsmoeglichkeit.
)}
- {/* ============================================ */}
- {/* STEP 6: Hosting & Transfer */}
- {/* ============================================ */}
- {currentStep === 6 && (
-
-
Hosting & Datentransfer
+ {/* Step 5: Hosting & Modell */}
+ {currentStep === 5 && (
+
+
Technische Details
+ {/* Hosting Provider */}
- Hosting-Provider
- updateFormData({ hostingProvider: e.target.value })}
- className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
- >
- Eigenes Hosting
- AWS
- Microsoft Azure
- Google Cloud
- Hetzner (DE)
- Anderer Anbieter
-
-
-
- Region
- updateFormData({ hostingRegion: e.target.value })}
- className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
- >
- EU
- Deutschland
- USA
- Andere
-
-
-
-
-
-
Internationaler Datentransfer
-
- updateFormData({ internationalTransfer: e.target.checked })}
- className="mt-1 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
- />
-
-
Daten werden in Drittlaender uebermittelt
-
Ausserhalb des EWR (z.B. USA, UK, Schweiz)
-
-
-
- {formData.internationalTransfer && (
- <>
-
-
Ziellaender
-
updateFormData({ transferCountries: e.target.value.split(',').map(s => s.trim()).filter(Boolean) })}
- placeholder="z.B. USA, UK, CH"
- className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
- />
-
Kommagetrennte Laenderkuerzel
-
-
-
Transfer-Mechanismus
-
updateFormData({ transferMechanism: e.target.value })}
- className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+ Hosting-Anbieter
+
+ {HOSTING_PROVIDER_TILES.map(item => (
+
updateForm({ hosting_provider: item.value })}
+ className={`p-3 rounded-xl border-2 text-left transition-all ${
+ form.hosting_provider === item.value
+ ? 'border-purple-500 bg-purple-50 ring-1 ring-purple-300'
+ : 'border-gray-200 hover:border-purple-300 hover:bg-gray-50'
+ }`}
>
- Noch nicht festgelegt
- Angemessenheitsbeschluss
- Standardvertragsklauseln (SCC)
- Binding Corporate Rules (BCR)
- Ausnahmeregelung (Art. 49 DSGVO)
-
+
+ {item.icon}
+ {item.label}
+
+ {item.desc}
+
+ ))}
+
+
+
+ {/* Hosting Region */}
+
+
Hosting-Region
+
+ {HOSTING_REGION_TILES.map(item => (
+
updateForm({ hosting_region: item.value })}
+ className={`p-3 rounded-xl border-2 text-left transition-all ${
+ form.hosting_region === item.value
+ ? 'border-purple-500 bg-purple-50 ring-1 ring-purple-300'
+ : 'border-gray-200 hover:border-purple-300 hover:bg-gray-50'
+ }`}
+ >
+
+ {item.icon}
+ {item.label}
+
+ {item.desc}
+
+ ))}
+
+
+
+ {/* Model Usage */}
+
+
Wie wird das KI-Modell genutzt?
+
Waehlen Sie alle zutreffenden Optionen.
+
+ {MODEL_USAGE_TILES.map(item => (
+
updateForm({ model_usage: toggleInArray(form.model_usage, item.value) })}
+ className={`p-3 rounded-xl border-2 text-left transition-all ${
+ form.model_usage.includes(item.value)
+ ? 'border-purple-500 bg-purple-50 ring-1 ring-purple-300'
+ : 'border-gray-200 hover:border-purple-300 hover:bg-gray-50'
+ }`}
+ >
+
+ {item.icon}
+ {item.label}
+
+ {item.desc}
+
+ ))}
+
+
+
+ {/* Info-Box: Begriffe erklaert */}
+
+
+ Begriffe erklaert: ML, DL, NLP, LLM — Was bedeutet das?
+
+
+
ML (Machine Learning) — Computer lernt Muster aus Daten. Beispiel: Spam-Filter.
+
DL (Deep Learning) — ML mit neuronalen Netzen. Beispiel: Bilderkennung, Spracherkennung.
+
NLP (Natural Language Processing) — KI versteht Sprache. Beispiel: ChatGPT, DeepL.
+
LLM (Large Language Model) — Grosses Sprachmodell. Beispiel: GPT-4, Claude, Llama.
+
RAG — LLM erhaelt Kontext aus eigener Datenbank. Vorteil: Aktuelle, firmenspezifische Antworten.
+
Fine-Tuning — Bestehendes Modell mit eigenen Daten weitertrainieren. Achtung: Daten werden Teil des Modells.
+
+
+
+ )}
+
+ {/* Step 6: Internationaler Datentransfer */}
+ {currentStep === 6 && (
+
+
Internationaler Datentransfer
+
Wohin werden die Daten uebermittelt? Waehlen Sie alle zutreffenden Ziellaender/-regionen.
+
+ {/* Transfer Targets */}
+
+
Datentransfer-Ziele
+
+ {TRANSFER_TARGET_TILES.map(item => (
+
updateForm({ transfer_targets: toggleInArray(form.transfer_targets, item.value) })}
+ className={`p-3 rounded-xl border-2 text-left transition-all ${
+ form.transfer_targets.includes(item.value)
+ ? 'border-purple-500 bg-purple-50 ring-1 ring-purple-300'
+ : 'border-gray-200 hover:border-purple-300 hover:bg-gray-50'
+ }`}
+ >
+
+ {item.icon}
+ {item.label}
+
+ {item.desc}
+
+ ))}
+
+
+
+ {/* Transfer Mechanism โ only if not "no_transfer" only */}
+ {form.transfer_targets.length > 0 && !form.transfer_targets.every(t => t === 'no_transfer') && (
+
+
Transfer-Mechanismus
+
Welche Schutzgarantie nutzen Sie fuer den Drittlandtransfer?
+
+ {TRANSFER_MECHANISM_TILES.map(item => (
+
updateForm({ transfer_mechanism: item.value })}
+ className={`p-3 rounded-xl border-2 text-left transition-all ${
+ form.transfer_mechanism === item.value
+ ? 'border-purple-500 bg-purple-50 ring-1 ring-purple-300'
+ : 'border-gray-200 hover:border-purple-300 hover:bg-gray-50'
+ }`}
+ >
+
+ {item.icon}
+ {item.label}
+
+ {item.desc}
+
+ ))}
- >
+
+ )}
+
+ {/* Specific countries text input */}
+ {form.transfer_targets.some(t => !['no_transfer'].includes(t)) && (
+
+
Konkrete Ziellaender (optional)
+
updateForm({ transfer_countries: e.target.value.split(',').map(s => s.trim()).filter(Boolean) })}
+ placeholder="z.B. USA, UK, Schweiz, Japan"
+ className="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+ />
+
Kommagetrennte Laendernamen oder -kuerzel
+
)}
)}
- {/* ============================================ */}
- {/* STEP 7: Datenhaltung & Vertraege */}
- {/* ============================================ */}
+ {/* Step 7: Datenhaltung */}
{currentStep === 7 && (
-
-
Datenhaltung & Vertraege
+
+
Datenhaltung & Aufbewahrung
+
Wie lange sollen die Daten gespeichert werden?
-
- Aufbewahrungsdauer (Tage)
- updateFormData({ retentionDays: parseInt(e.target.value) || 0 })}
- className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
- />
-
-
-
Zweck der Aufbewahrung
-