aaf95cf894
Some checks failed
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-ai-compliance (push) Failing after 51s
CI / test-python-backend-compliance (push) Successful in 40s
CI / test-python-document-crawler (push) Successful in 26s
CI / test-python-dsms-gateway (push) Successful in 19s
- Step 2: Dynamische Textfelder fuer eigene Datentypen (Kennzeichen, VIN etc.) - Step 4: Konkrete Beispiele fuer Automatisierungsgrade + Art. 22 DSGVO Info - Step 5: Ausfuehrliche Erklaerungen mit Beispielen + aufklappbares Glossar (ML, DL, NLP, LLM, RAG, Fine-Tuning) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
821 lines
38 KiB
TypeScript
821 lines
38 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState, useEffect, Suspense } from 'react'
|
|
import { useRouter, useSearchParams } from 'next/navigation'
|
|
import { AssessmentResultCard } from '@/components/sdk/use-case-assessment/AssessmentResultCard'
|
|
|
|
// =============================================================================
|
|
// WIZARD STEPS CONFIG
|
|
// =============================================================================
|
|
|
|
const WIZARD_STEPS = [
|
|
{ id: 1, title: 'Grundlegendes', description: 'Titel und Beschreibung' },
|
|
{ id: 2, title: 'Datenkategorien', description: 'Welche Daten werden verarbeitet?' },
|
|
{ id: 3, title: 'Verarbeitungszweck', description: 'Rechtsgrundlage und Zweck' },
|
|
{ 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' },
|
|
]
|
|
|
|
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' },
|
|
]
|
|
|
|
// =============================================================================
|
|
// MAIN COMPONENT
|
|
// =============================================================================
|
|
|
|
function NewUseCasePageInner() {
|
|
const router = useRouter()
|
|
const searchParams = useSearchParams()
|
|
const editId = searchParams.get('edit')
|
|
const isEditMode = !!editId
|
|
|
|
const [currentStep, setCurrentStep] = useState(1)
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
const [editLoading, setEditLoading] = useState(false)
|
|
const [result, setResult] = useState<unknown>(null)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
// Form state
|
|
const [form, setForm] = useState({
|
|
title: '',
|
|
use_case_text: '',
|
|
domain: 'general',
|
|
// Data Types
|
|
personal_data: false,
|
|
special_categories: false,
|
|
minors_data: false,
|
|
health_data: false,
|
|
biometric_data: false,
|
|
financial_data: false,
|
|
custom_data_types: [] as string[],
|
|
// Purpose
|
|
purpose_profiling: false,
|
|
purpose_automated_decision: false,
|
|
purpose_marketing: false,
|
|
purpose_analytics: false,
|
|
purpose_service_delivery: false,
|
|
// Automation
|
|
automation: 'assistive' as 'assistive' | 'semi_automated' | 'fully_automated',
|
|
// Hosting
|
|
hosting_provider: 'self_hosted',
|
|
hosting_region: 'eu',
|
|
// Model Usage
|
|
model_rag: false,
|
|
model_finetune: false,
|
|
model_training: false,
|
|
model_inference: true,
|
|
// Legal Basis (Step 3)
|
|
legal_basis: 'consent' as 'consent' | 'contract' | 'legitimate_interest' | 'legal_obligation' | 'vital_interest' | 'public_interest',
|
|
// Data Transfer (Step 6)
|
|
international_transfer: false,
|
|
transfer_countries: [] as string[],
|
|
transfer_mechanism: 'none' as 'none' | 'scc' | 'bcr' | 'adequacy' | 'derogation',
|
|
// Retention (Step 7)
|
|
retention_days: 90,
|
|
retention_purpose: '',
|
|
// Contracts (Step 8)
|
|
has_dpa: false,
|
|
has_aia_documentation: false,
|
|
has_risk_assessment: false,
|
|
subprocessors: '',
|
|
})
|
|
|
|
const updateForm = (updates: Partial<typeof form>) => {
|
|
setForm(prev => ({ ...prev, ...updates }))
|
|
}
|
|
|
|
// 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',
|
|
personal_data: intake.data_types?.personal_data || false,
|
|
special_categories: intake.data_types?.article_9_data || false,
|
|
minors_data: intake.data_types?.minor_data || false,
|
|
health_data: intake.data_types?.health_data || false,
|
|
biometric_data: intake.data_types?.biometric_data || false,
|
|
financial_data: intake.data_types?.financial_data || false,
|
|
custom_data_types: intake.data_types?.custom_data_types || [],
|
|
purpose_profiling: intake.purpose?.profiling || false,
|
|
purpose_automated_decision: intake.purpose?.automated_decision || intake.purpose?.decision_making || false,
|
|
purpose_marketing: intake.purpose?.marketing || false,
|
|
purpose_analytics: intake.purpose?.analytics || false,
|
|
purpose_service_delivery: intake.purpose?.service_delivery || intake.purpose?.customer_support || false,
|
|
automation: intake.automation || 'assistive',
|
|
hosting_provider: intake.hosting?.provider || 'self_hosted',
|
|
hosting_region: intake.hosting?.region || 'eu',
|
|
model_rag: intake.model_usage?.rag || false,
|
|
model_finetune: intake.model_usage?.finetune || false,
|
|
model_training: intake.model_usage?.training || false,
|
|
model_inference: intake.model_usage?.inference ?? true,
|
|
legal_basis: intake.legal_basis || 'consent',
|
|
international_transfer: intake.international_transfer?.enabled || false,
|
|
transfer_countries: intake.international_transfer?.countries || [],
|
|
transfer_mechanism: intake.international_transfer?.mechanism || 'none',
|
|
retention_days: intake.retention?.days || 90,
|
|
retention_purpose: intake.retention?.purpose || '',
|
|
has_dpa: intake.contracts?.has_dpa || false,
|
|
has_aia_documentation: intake.contracts?.has_aia_documentation || false,
|
|
has_risk_assessment: intake.contracts?.has_risk_assessment || false,
|
|
subprocessors: intake.contracts?.subprocessors || '',
|
|
})
|
|
})
|
|
.catch(() => {})
|
|
.finally(() => setEditLoading(false))
|
|
}, [editId])
|
|
|
|
const handleSubmit = async () => {
|
|
setIsSubmitting(true)
|
|
setError(null)
|
|
try {
|
|
const intake = {
|
|
title: form.title,
|
|
use_case_text: form.use_case_text,
|
|
domain: form.domain,
|
|
data_types: {
|
|
personal_data: form.personal_data,
|
|
special_categories: form.special_categories,
|
|
minors_data: form.minors_data,
|
|
health_data: form.health_data,
|
|
biometric_data: form.biometric_data,
|
|
financial_data: form.financial_data,
|
|
custom_data_types: form.custom_data_types.filter(s => s.trim()),
|
|
},
|
|
purpose: {
|
|
profiling: form.purpose_profiling,
|
|
automated_decision: form.purpose_automated_decision,
|
|
marketing: form.purpose_marketing,
|
|
analytics: form.purpose_analytics,
|
|
service_delivery: form.purpose_service_delivery,
|
|
},
|
|
automation: form.automation,
|
|
hosting: {
|
|
provider: form.hosting_provider,
|
|
region: form.hosting_region,
|
|
},
|
|
model_usage: {
|
|
rag: form.model_rag,
|
|
finetune: form.model_finetune,
|
|
training: form.model_training,
|
|
inference: form.model_inference,
|
|
},
|
|
legal_basis: form.legal_basis,
|
|
international_transfer: {
|
|
enabled: form.international_transfer,
|
|
countries: form.transfer_countries,
|
|
mechanism: form.transfer_mechanism,
|
|
},
|
|
retention: {
|
|
days: form.retention_days,
|
|
purpose: form.retention_purpose,
|
|
},
|
|
contracts: {
|
|
has_dpa: form.has_dpa,
|
|
has_aia_documentation: form.has_aia_documentation,
|
|
has_risk_assessment: form.has_risk_assessment,
|
|
subprocessors: form.subprocessors,
|
|
},
|
|
store_raw_text: true,
|
|
}
|
|
|
|
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(intake),
|
|
})
|
|
|
|
if (!response.ok) {
|
|
const errData = await response.json().catch(() => null)
|
|
throw new Error(errData?.error || `HTTP ${response.status}`)
|
|
}
|
|
|
|
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)
|
|
}
|
|
}
|
|
|
|
// If we have a result, show it
|
|
if (result) {
|
|
const r = result as { assessment?: { id: string }; result?: Record<string, unknown> }
|
|
return (
|
|
<div className="max-w-4xl mx-auto space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-2xl font-bold text-gray-900">Assessment Ergebnis</h1>
|
|
<div className="flex gap-2">
|
|
{r.assessment?.id && (
|
|
<button
|
|
onClick={() => 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
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={() => router.push('/sdk/use-cases')}
|
|
className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200"
|
|
>
|
|
Zur Uebersicht
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{r.result && (
|
|
<AssessmentResultCard result={r.result as Parameters<typeof AssessmentResultCard>[0]['result']} />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-3xl mx-auto space-y-6">
|
|
{/* Header */}
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">
|
|
{isEditMode ? 'Assessment bearbeiten' : 'Neues Use Case Assessment'}
|
|
</h1>
|
|
<p className="mt-1 text-gray-500">
|
|
{isEditMode
|
|
? 'Angaben anpassen und Assessment neu bewerten'
|
|
: 'Beschreiben Sie Ihren KI-Anwendungsfall Schritt fuer Schritt'}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Edit loading indicator */}
|
|
{editLoading && (
|
|
<div className="bg-purple-50 border border-purple-200 rounded-lg p-4 text-purple-700 text-sm">
|
|
Lade Assessment-Daten...
|
|
</div>
|
|
)}
|
|
|
|
{/* Step Indicator */}
|
|
<div className="flex items-center gap-2">
|
|
{WIZARD_STEPS.map((step, idx) => (
|
|
<React.Fragment key={step.id}>
|
|
<button
|
|
onClick={() => 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'
|
|
}`}
|
|
>
|
|
<span className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center text-xs font-bold">
|
|
{currentStep > step.id ? '✓' : step.id}
|
|
</span>
|
|
<span className="hidden md:inline">{step.title}</span>
|
|
</button>
|
|
{idx < WIZARD_STEPS.length - 1 && <div className="flex-1 h-px bg-gray-200" />}
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
|
|
{/* Error */}
|
|
{error && (
|
|
<div className="bg-red-50 border border-red-200 rounded-lg p-4 text-red-700">{error}</div>
|
|
)}
|
|
|
|
{/* Step Content */}
|
|
<div className="bg-white rounded-xl border border-gray-200 p-6">
|
|
{/* Step 1: Grundlegendes */}
|
|
{currentStep === 1 && (
|
|
<div className="space-y-4">
|
|
<h2 className="text-lg font-semibold text-gray-900">Grundlegende Informationen</h2>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Titel</label>
|
|
<input
|
|
type="text"
|
|
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"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
|
|
<textarea
|
|
value={form.use_case_text}
|
|
onChange={e => updateForm({ use_case_text: e.target.value })}
|
|
rows={4}
|
|
placeholder="Beschreiben Sie den Anwendungsfall..."
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Branche</label>
|
|
<select
|
|
value={form.domain}
|
|
onChange={e => updateForm({ domain: e.target.value })}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
|
|
>
|
|
{DOMAINS.map(d => (
|
|
<option key={d.value} value={d.value}>{d.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Step 2: Datenkategorien */}
|
|
{currentStep === 2 && (
|
|
<div className="space-y-4">
|
|
<h2 className="text-lg font-semibold text-gray-900">Welche Daten werden verarbeitet?</h2>
|
|
{[
|
|
{ key: 'personal_data', label: 'Personenbezogene Daten', desc: 'Name, E-Mail, Adresse etc.' },
|
|
{ key: 'special_categories', label: 'Besondere Kategorien (Art. 9)', desc: 'Religion, Gesundheit, politische Meinung' },
|
|
{ key: 'health_data', label: 'Gesundheitsdaten', desc: 'Diagnosen, Medikation, Fitness' },
|
|
{ key: 'biometric_data', label: 'Biometrische Daten', desc: 'Gesichtserkennung, Fingerabdruck, Stimme' },
|
|
{ key: 'minors_data', label: 'Daten von Minderjaehrigen', desc: 'Unter 16 Jahren' },
|
|
{ key: 'financial_data', label: 'Finanzdaten', desc: 'Kontodaten, Transaktionen, Kreditwuerdigkeit' },
|
|
].map(item => (
|
|
<label key={item.key} className="flex items-start gap-3 p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100">
|
|
<input
|
|
type="checkbox"
|
|
checked={form[item.key as keyof typeof form] as boolean}
|
|
onChange={e => updateForm({ [item.key]: e.target.checked })}
|
|
className="mt-1 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
|
|
/>
|
|
<div>
|
|
<div className="font-medium text-gray-900">{item.label}</div>
|
|
<div className="text-sm text-gray-500">{item.desc}</div>
|
|
</div>
|
|
</label>
|
|
))}
|
|
|
|
{/* Sonstige Datentypen */}
|
|
<div className="border border-gray-200 rounded-lg p-4 space-y-3">
|
|
<div className="font-medium text-gray-900">Sonstige Datentypen</div>
|
|
<p className="text-sm text-gray-500">
|
|
z.B. Kennzeichen, Fahrzeug-Identifikationsnummer (VIN), Geraete-IDs, IP-Adressen
|
|
</p>
|
|
{form.custom_data_types.map((dt, idx) => (
|
|
<div key={idx} className="flex items-center gap-2">
|
|
<input
|
|
type="text"
|
|
value={dt}
|
|
onChange={e => {
|
|
const updated = [...form.custom_data_types]
|
|
updated[idx] = e.target.value
|
|
updateForm({ custom_data_types: 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"
|
|
/>
|
|
<button
|
|
onClick={() => {
|
|
const updated = form.custom_data_types.filter((_, i) => i !== idx)
|
|
updateForm({ custom_data_types: updated })
|
|
}}
|
|
className="p-2 text-red-500 hover:bg-red-50 rounded-lg"
|
|
title="Entfernen"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
|
|
</button>
|
|
</div>
|
|
))}
|
|
<button
|
|
onClick={() => 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"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
|
|
Weiteren Datentyp hinzufuegen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Step 3: Verarbeitungszweck & Rechtsgrundlage */}
|
|
{currentStep === 3 && (
|
|
<div className="space-y-4">
|
|
<h2 className="text-lg font-semibold text-gray-900">Verarbeitungszweck & Rechtsgrundlage</h2>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Rechtsgrundlage (Art. 6 DSGVO)</label>
|
|
<select
|
|
value={form.legal_basis}
|
|
onChange={e => updateForm({ legal_basis: e.target.value as typeof form.legal_basis })}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
|
|
>
|
|
<option value="consent">Einwilligung (Art. 6 Abs. 1a)</option>
|
|
<option value="contract">Vertragserfullung (Art. 6 Abs. 1b)</option>
|
|
<option value="legal_obligation">Rechtliche Verpflichtung (Art. 6 Abs. 1c)</option>
|
|
<option value="vital_interest">Lebenswichtige Interessen (Art. 6 Abs. 1d)</option>
|
|
<option value="public_interest">Oeffentliches Interesse (Art. 6 Abs. 1e)</option>
|
|
<option value="legitimate_interest">Berechtigtes Interesse (Art. 6 Abs. 1f)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<h3 className="text-sm font-medium text-gray-700 mt-4">Zweck der Verarbeitung</h3>
|
|
{[
|
|
{ key: 'purpose_profiling', label: 'Profiling', desc: 'Automatisierte Analyse personenbezogener Aspekte' },
|
|
{ key: 'purpose_automated_decision', label: 'Automatisierte Entscheidung', desc: 'Art. 22 DSGVO — Entscheidung ohne menschliches Zutun' },
|
|
{ key: 'purpose_marketing', label: 'Marketing', desc: 'Werbung, Personalisierung, Targeting' },
|
|
{ key: 'purpose_analytics', label: 'Analytics', desc: 'Statistische Auswertung, Business Intelligence' },
|
|
{ key: 'purpose_service_delivery', label: 'Serviceerbringung', desc: 'Kernfunktion des Produkts/Services' },
|
|
].map(item => (
|
|
<label key={item.key} className="flex items-start gap-3 p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100">
|
|
<input
|
|
type="checkbox"
|
|
checked={form[item.key as keyof typeof form] as boolean}
|
|
onChange={e => updateForm({ [item.key]: e.target.checked })}
|
|
className="mt-1 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
|
|
/>
|
|
<div>
|
|
<div className="font-medium text-gray-900">{item.label}</div>
|
|
<div className="text-sm text-gray-500">{item.desc}</div>
|
|
</div>
|
|
</label>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Step 4: Automatisierung */}
|
|
{currentStep === 4 && (
|
|
<div className="space-y-4">
|
|
<h2 className="text-lg font-semibold text-gray-900">Grad der Automatisierung</h2>
|
|
<p className="text-sm text-gray-600">
|
|
Wie stark greift die KI in Entscheidungen ein? Je hoeher der Automatisierungsgrad, desto strenger die regulatorischen Anforderungen.
|
|
</p>
|
|
{[
|
|
{
|
|
value: 'assistive',
|
|
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',
|
|
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',
|
|
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 => (
|
|
<label
|
|
key={item.value}
|
|
className={`flex items-start gap-3 p-4 rounded-lg border-2 cursor-pointer transition-all ${
|
|
form.automation === item.value
|
|
? 'border-purple-500 bg-purple-50'
|
|
: 'border-gray-200 hover:border-gray-300'
|
|
}`}
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="automation"
|
|
value={item.value}
|
|
checked={form.automation === item.value}
|
|
onChange={e => updateForm({ automation: e.target.value as typeof form.automation })}
|
|
className="mt-1 text-purple-600 focus:ring-purple-500"
|
|
/>
|
|
<div>
|
|
<div className="font-medium text-gray-900">{item.label}</div>
|
|
<div className="text-sm text-gray-500">{item.desc}</div>
|
|
<div className="text-xs text-gray-400 mt-1">Beispiele: {item.examples}</div>
|
|
</div>
|
|
</label>
|
|
))}
|
|
|
|
{/* Info-Box: Warum ist das wichtig? */}
|
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm text-blue-800">
|
|
<div className="font-medium mb-1">Warum ist das wichtig?</div>
|
|
<p>
|
|
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.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Step 5: Hosting & Modell */}
|
|
{currentStep === 5 && (
|
|
<div className="space-y-4">
|
|
<h2 className="text-lg font-semibold text-gray-900">Technische Details</h2>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Hosting</label>
|
|
<select
|
|
value={form.hosting_provider}
|
|
onChange={e => updateForm({ hosting_provider: e.target.value })}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
|
|
>
|
|
<option value="self_hosted">Eigenes Hosting</option>
|
|
<option value="aws">AWS</option>
|
|
<option value="azure">Microsoft Azure</option>
|
|
<option value="gcp">Google Cloud</option>
|
|
<option value="hetzner">Hetzner (DE)</option>
|
|
<option value="other">Anderer Anbieter</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Region</label>
|
|
<select
|
|
value={form.hosting_region}
|
|
onChange={e => updateForm({ hosting_region: e.target.value })}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
|
|
>
|
|
<option value="eu">EU</option>
|
|
<option value="de">Deutschland</option>
|
|
<option value="us">USA</option>
|
|
<option value="other">Andere</option>
|
|
</select>
|
|
</div>
|
|
|
|
<h3 className="text-sm font-medium text-gray-700 mt-4">Wie wird das KI-Modell genutzt?</h3>
|
|
<p className="text-sm text-gray-500">Waehlen Sie alle zutreffenden Optionen. Klicken Sie auf die Info-Symbole fuer Erklaerungen.</p>
|
|
|
|
{[
|
|
{
|
|
key: 'model_inference',
|
|
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: 'model_rag',
|
|
label: 'RAG (Retrieval-Augmented Generation)',
|
|
desc: 'Das Modell erhaelt zusaetzlichen Kontext aus Ihren eigenen Dokumenten (z.B. Wissensdatenbank, Handbuecher). Das Modell selbst wird nicht veraendert.',
|
|
example: 'Ein Chatbot durchsucht Ihre Firmen-FAQ und beantwortet Fragen basierend auf den gefundenen Dokumenten.',
|
|
},
|
|
{
|
|
key: 'model_finetune',
|
|
label: 'Fine-Tuning',
|
|
desc: 'Ein bestehendes Modell wird mit Ihren eigenen Daten nachtrainiert, um es an Ihre spezifischen Anforderungen anzupassen. Die Originaldaten fliessen ins Modell ein.',
|
|
example: 'Sie trainieren GPT-3.5 mit 1.000 Ihrer Support-Tickets, damit es Ihren Kommunikationsstil uebernimmt.',
|
|
},
|
|
{
|
|
key: 'model_training',
|
|
label: 'Training (eigenes Modell)',
|
|
desc: 'Sie trainieren ein komplett eigenes KI-Modell von Grund auf mit Ihren Daten. Hoechster Kontrollgrad, aber auch hoechster Aufwand und Datenrisiko.',
|
|
example: 'Sie trainieren ein eigenes Bilderkennungsmodell fuer Qualitaetskontrolle in der Produktion.',
|
|
},
|
|
].map(item => (
|
|
<div key={item.key} className="bg-gray-50 rounded-lg border border-gray-200 overflow-hidden">
|
|
<label className="flex items-start gap-3 p-3 cursor-pointer hover:bg-gray-100">
|
|
<input
|
|
type="checkbox"
|
|
checked={form[item.key as keyof typeof form] as boolean}
|
|
onChange={e => updateForm({ [item.key]: e.target.checked })}
|
|
className="mt-1 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
|
|
/>
|
|
<div>
|
|
<div className="font-medium text-gray-900">{item.label}</div>
|
|
<div className="text-sm text-gray-500">{item.desc}</div>
|
|
<div className="text-xs text-purple-600 mt-1 bg-purple-50 inline-block px-2 py-0.5 rounded">
|
|
Beispiel: {item.example}
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
))}
|
|
|
|
{/* Info-Box: Begriffe erklaert */}
|
|
<details className="bg-amber-50 border border-amber-200 rounded-lg overflow-hidden">
|
|
<summary className="px-4 py-3 text-sm font-medium text-amber-800 cursor-pointer hover:bg-amber-100">
|
|
Begriffe erklaert: ML, DL, NLP, LLM — Was bedeutet das?
|
|
</summary>
|
|
<div className="px-4 pb-4 space-y-3 text-sm text-amber-900">
|
|
<div>
|
|
<span className="font-semibold">ML (Machine Learning)</span> —
|
|
Computer lernt Muster aus Daten, statt explizit programmiert zu werden.
|
|
Beispiel: Spam-Filter, der aus markierten E-Mails lernt.
|
|
</div>
|
|
<div>
|
|
<span className="font-semibold">DL (Deep Learning)</span> —
|
|
Spezielle Form von ML mit kuenstlichen neuronalen Netzen (viele Schichten).
|
|
Beispiel: Bilderkennung, Spracherkennung, Textgenerierung.
|
|
</div>
|
|
<div>
|
|
<span className="font-semibold">NLP (Natural Language Processing)</span> —
|
|
KI, die menschliche Sprache versteht und verarbeitet.
|
|
Beispiel: ChatGPT, DeepL, Sentiment-Analyse von Kundenbewertungen.
|
|
</div>
|
|
<div>
|
|
<span className="font-semibold">LLM (Large Language Model)</span> —
|
|
Sehr grosses Sprachmodell, trainiert auf riesigen Textmengen. Kann Texte verstehen, generieren und uebersetzen.
|
|
Beispiel: GPT-4, Claude, Llama, Gemini.
|
|
</div>
|
|
<div>
|
|
<span className="font-semibold">RAG (Retrieval-Augmented Generation)</span> —
|
|
Das LLM erhaelt vor der Antwort relevante Dokumente aus einer Datenbank als Kontext.
|
|
Vorteil: Aktuelle und firmenspezifische Antworten, ohne das Modell neu zu trainieren.
|
|
</div>
|
|
<div>
|
|
<span className="font-semibold">Fine-Tuning</span> —
|
|
Ein bestehendes Modell wird mit eigenen Daten weiter trainiert, um es zu spezialisieren.
|
|
Achtung: Ihre Trainingsdaten werden Teil des Modells.
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
)}
|
|
|
|
{/* Step 6: Internationaler Datentransfer */}
|
|
{currentStep === 6 && (
|
|
<div className="space-y-4">
|
|
<h2 className="text-lg font-semibold text-gray-900">Internationaler Datentransfer</h2>
|
|
|
|
<label className="flex items-start gap-3 p-4 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100">
|
|
<input
|
|
type="checkbox"
|
|
checked={form.international_transfer}
|
|
onChange={e => updateForm({ international_transfer: e.target.checked })}
|
|
className="mt-1 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
|
|
/>
|
|
<div>
|
|
<div className="font-medium text-gray-900">Daten werden in Drittlaender uebermittelt</div>
|
|
<div className="text-sm text-gray-500">Ausserhalb des EWR (z.B. USA, UK, Schweiz)</div>
|
|
</div>
|
|
</label>
|
|
|
|
{form.international_transfer && (
|
|
<>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Ziellaender</label>
|
|
<input
|
|
type="text"
|
|
value={form.transfer_countries.join(', ')}
|
|
onChange={e => updateForm({ transfer_countries: 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"
|
|
/>
|
|
<p className="text-xs text-gray-500 mt-1">Kommagetrennte Laenderkuerzel</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Transfer-Mechanismus</label>
|
|
<select
|
|
value={form.transfer_mechanism}
|
|
onChange={e => updateForm({ transfer_mechanism: e.target.value as typeof form.transfer_mechanism })}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
|
|
>
|
|
<option value="none">Noch nicht festgelegt</option>
|
|
<option value="adequacy">Angemessenheitsbeschluss</option>
|
|
<option value="scc">Standardvertragsklauseln (SCC)</option>
|
|
<option value="bcr">Binding Corporate Rules (BCR)</option>
|
|
<option value="derogation">Ausnahmeregelung (Art. 49 DSGVO)</option>
|
|
</select>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Step 7: Datenhaltung */}
|
|
{currentStep === 7 && (
|
|
<div className="space-y-4">
|
|
<h2 className="text-lg font-semibold text-gray-900">Datenhaltung & Aufbewahrung</h2>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Aufbewahrungsdauer (Tage)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
min={0}
|
|
value={form.retention_days}
|
|
onChange={e => updateForm({ retention_days: parseInt(e.target.value) || 0 })}
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Zweck der Aufbewahrung
|
|
</label>
|
|
<textarea
|
|
value={form.retention_purpose}
|
|
onChange={e => updateForm({ retention_purpose: e.target.value })}
|
|
rows={3}
|
|
placeholder="z.B. Vertragliche Pflichten, gesetzliche Aufbewahrungsfristen..."
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Step 8: Vertraege & Compliance */}
|
|
{currentStep === 8 && (
|
|
<div className="space-y-4">
|
|
<h2 className="text-lg font-semibold text-gray-900">Vertraege & Compliance-Dokumentation</h2>
|
|
|
|
{[
|
|
{ key: 'has_dpa', label: 'Auftragsverarbeitungsvertrag (AVV/DPA)', desc: 'Vertrag mit KI-Anbieter / Subprozessor nach Art. 28 DSGVO' },
|
|
{ key: 'has_aia_documentation', label: 'AI Act Dokumentation', desc: 'Risikoklassifizierung und technische Dokumentation nach EU AI Act' },
|
|
{ key: 'has_risk_assessment', label: 'Risikobewertung / DSFA', desc: 'Datenschutz-Folgenabschaetzung nach Art. 35 DSGVO' },
|
|
].map(item => (
|
|
<label key={item.key} className="flex items-start gap-3 p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100">
|
|
<input
|
|
type="checkbox"
|
|
checked={form[item.key as keyof typeof form] as boolean}
|
|
onChange={e => updateForm({ [item.key]: e.target.checked })}
|
|
className="mt-1 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
|
|
/>
|
|
<div>
|
|
<div className="font-medium text-gray-900">{item.label}</div>
|
|
<div className="text-sm text-gray-500">{item.desc}</div>
|
|
</div>
|
|
</label>
|
|
))}
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">Subprozessoren</label>
|
|
<textarea
|
|
value={form.subprocessors}
|
|
onChange={e => updateForm({ subprocessors: e.target.value })}
|
|
rows={3}
|
|
placeholder="z.B. OpenAI (USA, SCC), Hetzner Cloud (DE)..."
|
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Navigation Buttons */}
|
|
<div className="flex items-center justify-between">
|
|
<button
|
|
onClick={() => currentStep > 1 ? setCurrentStep(currentStep - 1) : router.push('/sdk/use-cases')}
|
|
className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
|
|
>
|
|
{currentStep === 1 ? 'Abbrechen' : 'Zurueck'}
|
|
</button>
|
|
|
|
{currentStep < 8 ? (
|
|
<button
|
|
onClick={() => setCurrentStep(currentStep + 1)}
|
|
disabled={currentStep === 1 && !form.title}
|
|
className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
|
|
>
|
|
Weiter
|
|
</button>
|
|
) : (
|
|
<button
|
|
onClick={handleSubmit}
|
|
disabled={isSubmitting || !form.title}
|
|
className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors disabled:opacity-50 flex items-center gap-2"
|
|
>
|
|
{isSubmitting ? (
|
|
<>
|
|
<svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
|
</svg>
|
|
Bewerte...
|
|
</>
|
|
) : (
|
|
isEditMode ? 'Speichern & neu bewerten' : 'Assessment starten'
|
|
)}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function NewUseCasePage() {
|
|
return (
|
|
<Suspense fallback={<div className="flex items-center justify-center h-64 text-gray-500">Lade...</div>}>
|
|
<NewUseCasePageInner />
|
|
</Suspense>
|
|
)
|
|
}
|