70f2b0ae64
Remove standalone services (ai-compliance-sdk root, developer-portal, dsms-gateway, dsms-node, night-scheduler) and legacy compliance/dsgvo pages. Add new SDK pipeline modules (academy, document-crawler, dsb-portal, incidents, whistleblower, reporting, sso, multi-tenant, industry-templates). Add drafting engine, legal corpus files (AT/CH/DE), pitch-deck, blog and Förderantrag pages. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
868 lines
38 KiB
TypeScript
868 lines
38 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState } from 'react'
|
|
import Link from 'next/link'
|
|
import { useRouter } from 'next/navigation'
|
|
import { useSDK, getStepById, getNextStep, getPreviousStep, SDKStep, SDK_STEPS } from '@/lib/sdk'
|
|
|
|
// =============================================================================
|
|
// TYPES
|
|
// =============================================================================
|
|
|
|
export interface StepTip {
|
|
icon: 'info' | 'warning' | 'success' | 'lightbulb'
|
|
title: string
|
|
description: string
|
|
}
|
|
|
|
interface StepHeaderProps {
|
|
stepId: string
|
|
title: string
|
|
description: string
|
|
explanation: string
|
|
tips?: StepTip[]
|
|
showNavigation?: boolean
|
|
showProgress?: boolean
|
|
onComplete?: () => void
|
|
isCompleted?: boolean
|
|
children?: React.ReactNode
|
|
}
|
|
|
|
// =============================================================================
|
|
// ICONS
|
|
// =============================================================================
|
|
|
|
const icons = {
|
|
info: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
),
|
|
warning: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
),
|
|
success: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
),
|
|
lightbulb: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
|
</svg>
|
|
),
|
|
arrowLeft: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
</svg>
|
|
),
|
|
arrowRight: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
|
</svg>
|
|
),
|
|
check: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
),
|
|
help: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
),
|
|
}
|
|
|
|
const tipColors = {
|
|
info: 'bg-blue-50 border-blue-200 text-blue-800',
|
|
warning: 'bg-amber-50 border-amber-200 text-amber-800',
|
|
success: 'bg-green-50 border-green-200 text-green-800',
|
|
lightbulb: 'bg-purple-50 border-purple-200 text-purple-800',
|
|
}
|
|
|
|
const tipIconColors = {
|
|
info: 'text-blue-500',
|
|
warning: 'text-amber-500',
|
|
success: 'text-green-500',
|
|
lightbulb: 'text-purple-500',
|
|
}
|
|
|
|
// =============================================================================
|
|
// STEP HEADER COMPONENT
|
|
// =============================================================================
|
|
|
|
export function StepHeader({
|
|
stepId,
|
|
title,
|
|
description,
|
|
explanation,
|
|
tips = [],
|
|
showNavigation = true,
|
|
showProgress = true,
|
|
onComplete,
|
|
isCompleted = false,
|
|
children,
|
|
}: StepHeaderProps) {
|
|
const router = useRouter()
|
|
const { state, dispatch } = useSDK()
|
|
const [showHelp, setShowHelp] = useState(false)
|
|
|
|
const currentStep = getStepById(stepId)
|
|
const prevStep = getPreviousStep(stepId)
|
|
const nextStep = getNextStep(stepId)
|
|
|
|
const stepCompleted = state.completedSteps.includes(stepId)
|
|
|
|
const handleComplete = () => {
|
|
if (onComplete) {
|
|
onComplete()
|
|
}
|
|
dispatch({ type: 'COMPLETE_STEP', payload: stepId })
|
|
if (nextStep) {
|
|
router.push(nextStep.url)
|
|
}
|
|
}
|
|
|
|
const handleSkip = () => {
|
|
if (nextStep) {
|
|
router.push(nextStep.url)
|
|
}
|
|
}
|
|
|
|
// Calculate step progress within phase
|
|
const phaseSteps = currentStep ?
|
|
SDK_STEPS.filter(s => s.phase === currentStep.phase).length : 0
|
|
const stepNumber = currentStep?.order || 0
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Breadcrumb & Progress */}
|
|
{showProgress && currentStep && (
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2 text-sm text-gray-500">
|
|
<Link href="/sdk" className="hover:text-purple-600 transition-colors">
|
|
SDK
|
|
</Link>
|
|
<span>/</span>
|
|
<span className="text-gray-700">
|
|
Phase {currentStep.phase}: {currentStep.phase === 1 ? 'Assessment' : 'Dokumente'}
|
|
</span>
|
|
<span>/</span>
|
|
<span className="text-purple-600 font-medium">{currentStep.nameShort}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<span className="text-gray-500">Schritt {stepNumber} von {phaseSteps}</span>
|
|
<div className="w-24 h-2 bg-gray-200 rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full bg-purple-600 rounded-full transition-all"
|
|
style={{ width: `${(stepNumber / phaseSteps) * 100}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Main Header Card */}
|
|
<div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
|
|
{/* Header */}
|
|
<div className="p-6 border-b border-gray-100">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-3">
|
|
<h1 className="text-2xl font-bold text-gray-900">{title}</h1>
|
|
{stepCompleted && (
|
|
<span className="flex items-center gap-1 px-2 py-1 text-xs bg-green-100 text-green-700 rounded-full">
|
|
{icons.check}
|
|
Abgeschlossen
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="mt-2 text-gray-500">{description}</p>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowHelp(!showHelp)}
|
|
className={`p-2 rounded-lg transition-colors ${
|
|
showHelp ? 'bg-purple-100 text-purple-600' : 'text-gray-400 hover:bg-gray-100 hover:text-gray-600'
|
|
}`}
|
|
title="Hilfe anzeigen"
|
|
>
|
|
{icons.help}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Explanation Panel (collapsible) */}
|
|
{showHelp && (
|
|
<div className="px-6 py-4 bg-gradient-to-r from-purple-50 to-indigo-50 border-b border-purple-100">
|
|
<div className="flex items-start gap-3">
|
|
<div className="p-2 bg-purple-100 rounded-lg text-purple-600">
|
|
{icons.lightbulb}
|
|
</div>
|
|
<div>
|
|
<h3 className="font-medium text-purple-900">Was ist das?</h3>
|
|
<p className="mt-1 text-sm text-purple-800">{explanation}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Tips */}
|
|
{tips.length > 0 && (
|
|
<div className="px-6 py-4 space-y-3 bg-gray-50 border-b border-gray-100">
|
|
{tips.map((tip, index) => (
|
|
<div
|
|
key={index}
|
|
className={`flex items-start gap-3 p-3 rounded-lg border ${tipColors[tip.icon]}`}
|
|
>
|
|
<div className={tipIconColors[tip.icon]}>
|
|
{icons[tip.icon]}
|
|
</div>
|
|
<div>
|
|
<h4 className="font-medium text-sm">{tip.title}</h4>
|
|
<p className="text-sm opacity-80">{tip.description}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Action Buttons */}
|
|
{children && (
|
|
<div className="px-6 py-4 bg-gray-50">
|
|
{children}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
{showNavigation && (
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
{prevStep ? (
|
|
<Link
|
|
href={prevStep.url}
|
|
className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
|
|
>
|
|
{icons.arrowLeft}
|
|
<span>Zurueck: {prevStep.nameShort}</span>
|
|
</Link>
|
|
) : (
|
|
<Link
|
|
href="/sdk"
|
|
className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
|
|
>
|
|
{icons.arrowLeft}
|
|
<span>Zur Uebersicht</span>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
{nextStep && !stepCompleted && (
|
|
<button
|
|
onClick={handleSkip}
|
|
className="px-4 py-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
|
|
>
|
|
Ueberspringen
|
|
</button>
|
|
)}
|
|
{nextStep ? (
|
|
<button
|
|
onClick={handleComplete}
|
|
className="flex items-center gap-2 px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
|
|
>
|
|
<span>{stepCompleted ? 'Weiter' : 'Abschliessen & Weiter'}</span>
|
|
{icons.arrowRight}
|
|
</button>
|
|
) : (
|
|
<button
|
|
onClick={handleComplete}
|
|
className="flex items-center gap-2 px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
|
|
>
|
|
{icons.check}
|
|
<span>Phase abschliessen</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// =============================================================================
|
|
// STEP EXPLANATION PRESETS
|
|
// =============================================================================
|
|
|
|
export const STEP_EXPLANATIONS = {
|
|
'company-profile': {
|
|
title: 'Unternehmensprofil',
|
|
description: 'Erfassen Sie Ihr Geschäftsmodell und Ihre Zielmärkte',
|
|
explanation: 'Im Unternehmensprofil erfassen wir grundlegende Informationen zu Ihrem Unternehmen: Geschäftsmodell (B2B/B2C), Angebote, Firmengröße und Zielmärkte. Diese Informationen helfen uns, die für Sie relevanten Regulierungen zu identifizieren und ehrlich zu kommunizieren, wo unsere Grenzen liegen.',
|
|
tips: [
|
|
{
|
|
icon: 'lightbulb' as const,
|
|
title: 'Ehrliche Einschätzung',
|
|
description: 'Wir zeigen Ihnen transparent, welche Regulierungen wir abdecken und wann Sie einen Anwalt hinzuziehen sollten.',
|
|
},
|
|
{
|
|
icon: 'info' as const,
|
|
title: 'Zielmärkte',
|
|
description: 'Je nach Zielmarkt (Deutschland, DACH, EU, weltweit) gelten unterschiedliche Datenschutzgesetze.',
|
|
},
|
|
],
|
|
},
|
|
'compliance-scope': {
|
|
title: 'Compliance Scope',
|
|
description: 'Umfang und Tiefe Ihrer Compliance-Dokumentation bestimmen',
|
|
explanation: 'Die Compliance Scope Engine bestimmt deterministisch, welche Dokumente Sie in welcher Tiefe benoetigen. Basierend auf 35 Fragen in 6 Bloecken werden Risiko-, Komplexitaets- und Assurance-Scores berechnet, die in ein 4-Level-Modell (L1 Lean bis L4 Zertifizierungsbereit) muenden.',
|
|
tips: [
|
|
{
|
|
icon: 'lightbulb' as const,
|
|
title: 'Deterministisch',
|
|
description: 'Alle Entscheidungen sind nachvollziehbar — keine KI, keine Black Box. Jede Einstufung wird mit Rechtsgrundlage und Audit-Trail begruendet.',
|
|
},
|
|
{
|
|
icon: 'info' as const,
|
|
title: '4-Level-Modell',
|
|
description: 'L1 (Lean Startup) bis L4 (Zertifizierungsbereit). Hard Triggers (Art. 9, Minderjaehrige, Zertifizierungsziele) heben das Level automatisch an.',
|
|
},
|
|
{
|
|
icon: 'warning' as const,
|
|
title: 'Hard Triggers',
|
|
description: '50 deterministische Regeln pruefen besondere Kategorien (Art. 9), Minderjaehrige, KI-Einsatz, Drittlandtransfers und Zertifizierungsziele.',
|
|
},
|
|
],
|
|
},
|
|
'use-case-assessment': {
|
|
title: 'Anwendungsfall-Erfassung',
|
|
description: 'Erfassen Sie Ihre KI-Anwendungsfälle systematisch',
|
|
explanation: 'In der Anwendungsfall-Erfassung dokumentieren Sie Ihre KI-Anwendungsfälle in 5 Schritten: Grunddaten, Datenkategorien, Risikobewertung, Stakeholder und Compliance-Anforderungen. Dies bildet die Basis für alle weiteren Compliance-Maßnahmen.',
|
|
tips: [
|
|
{
|
|
icon: 'lightbulb' as const,
|
|
title: 'Tipp: Vollständigkeit',
|
|
description: 'Je detaillierter Sie den Anwendungsfall beschreiben, desto besser kann das System passende Compliance-Anforderungen ableiten.',
|
|
},
|
|
{
|
|
icon: 'info' as const,
|
|
title: 'Mehrere Anwendungsfälle',
|
|
description: 'Sie können mehrere Anwendungsfälle erfassen. Jeder wird separat bewertet und durchläuft den Compliance-Prozess.',
|
|
},
|
|
],
|
|
},
|
|
'screening': {
|
|
title: 'System Screening',
|
|
description: 'Analysieren Sie Ihre Systemlandschaft auf Schwachstellen',
|
|
explanation: 'Das System Screening generiert eine Software Bill of Materials (SBOM) und fuehrt einen Security-Scan durch. So erkennen Sie Schwachstellen in Ihren Abhaengigkeiten fruehzeitig.',
|
|
tips: [
|
|
{
|
|
icon: 'warning' as const,
|
|
title: 'Kritische Schwachstellen',
|
|
description: 'CVEs mit CVSS >= 7.0 sollten priorisiert behandelt werden. Diese werden automatisch in den Security Backlog uebernommen.',
|
|
},
|
|
{
|
|
icon: 'info' as const,
|
|
title: 'SBOM-Format',
|
|
description: 'Die SBOM wird im CycloneDX-Format generiert und kann fuer Audits exportiert werden.',
|
|
},
|
|
],
|
|
},
|
|
'modules': {
|
|
title: 'Compliance Module',
|
|
description: 'Waehlen Sie die relevanten Regulierungen fuer Ihr Unternehmen',
|
|
explanation: 'Compliance-Module sind vordefinierte Regelwerke (z.B. DSGVO, AI Act, ISO 27001). Durch die Aktivierung eines Moduls werden automatisch die zugehoerigen Anforderungen und Kontrollen geladen.',
|
|
tips: [
|
|
{
|
|
icon: 'lightbulb' as const,
|
|
title: 'Modul-Auswahl',
|
|
description: 'Aktivieren Sie nur Module, die fuer Ihr Unternehmen relevant sind. Weniger ist oft mehr - fokussieren Sie sich auf die wichtigsten Regulierungen.',
|
|
},
|
|
{
|
|
icon: 'info' as const,
|
|
title: 'Abhaengigkeiten',
|
|
description: 'Manche Module haben Ueberschneidungen. Das System erkennt dies automatisch und vermeidet doppelte Anforderungen.',
|
|
},
|
|
],
|
|
},
|
|
'requirements': {
|
|
title: 'Anforderungen',
|
|
description: 'Pruefen und verwalten Sie die Compliance-Anforderungen',
|
|
explanation: 'Anforderungen sind konkrete Vorgaben aus den aktivierten Modulen. Jede Anforderung verweist auf einen Gesetzesartikel und muss durch Kontrollen abgedeckt werden.',
|
|
tips: [
|
|
{
|
|
icon: 'warning' as const,
|
|
title: 'Kritische Anforderungen',
|
|
description: 'Anforderungen mit Kritikalitaet "HOCH" sollten priorisiert werden, da Verstoesse zu hohen Bussgeldern fuehren koennen.',
|
|
},
|
|
{
|
|
icon: 'success' as const,
|
|
title: 'Status-Workflow',
|
|
description: 'Anforderungen durchlaufen: Nicht begonnen → In Bearbeitung → Implementiert → Verifiziert.',
|
|
},
|
|
],
|
|
},
|
|
'controls': {
|
|
title: 'Kontrollen',
|
|
description: 'Definieren Sie technische und organisatorische Massnahmen',
|
|
explanation: 'Kontrollen (auch TOMs genannt) sind konkrete Massnahmen zur Erfuellung der Anforderungen. Sie koennen praeventiv, detektiv oder korrektiv sein.',
|
|
tips: [
|
|
{
|
|
icon: 'lightbulb' as const,
|
|
title: 'Wirksamkeit',
|
|
description: 'Bewerten Sie die Wirksamkeit jeder Kontrolle. Eine hohe Wirksamkeit (>80%) reduziert das Restrisiko erheblich.',
|
|
},
|
|
{
|
|
icon: 'info' as const,
|
|
title: 'Verantwortlichkeiten',
|
|
description: 'Weisen Sie jeder Kontrolle einen Verantwortlichen zu. Dies ist fuer Audits wichtig.',
|
|
},
|
|
],
|
|
},
|
|
'evidence': {
|
|
title: 'Nachweise',
|
|
description: 'Dokumentieren Sie die Umsetzung mit Belegen',
|
|
explanation: 'Nachweise sind Dokumente, Screenshots oder Berichte, die belegen, dass Kontrollen implementiert sind. Sie sind essentiell fuer Audits und Zertifizierungen.',
|
|
tips: [
|
|
{
|
|
icon: 'warning' as const,
|
|
title: 'Gueltigkeit',
|
|
description: 'Achten Sie auf das Ablaufdatum von Nachweisen. Abgelaufene Zertifikate oder Berichte muessen erneuert werden.',
|
|
},
|
|
{
|
|
icon: 'success' as const,
|
|
title: 'Verknuepfung',
|
|
description: 'Verknuepfen Sie Nachweise direkt mit den zugehoerigen Kontrollen fuer eine lueckenlose Dokumentation.',
|
|
},
|
|
],
|
|
},
|
|
'audit-checklist': {
|
|
title: 'Audit-Checkliste',
|
|
description: 'Systematische Pruefung der Compliance-Konformitaet',
|
|
explanation: 'Die Audit-Checkliste wird automatisch aus den Anforderungen generiert. Gehen Sie jeden Punkt durch und dokumentieren Sie den Compliance-Status.',
|
|
tips: [
|
|
{
|
|
icon: 'lightbulb' as const,
|
|
title: 'Regelmaessige Pruefung',
|
|
description: 'Fuehren Sie die Checkliste mindestens jaehrlich durch, um Compliance-Luecken fruehzeitig zu erkennen.',
|
|
},
|
|
{
|
|
icon: 'info' as const,
|
|
title: 'Notizen',
|
|
description: 'Nutzen Sie das Notizfeld, um Massnahmen oder Abweichungen zu dokumentieren.',
|
|
},
|
|
],
|
|
},
|
|
'risks': {
|
|
title: 'Risiko-Matrix',
|
|
description: 'Bewerten und priorisieren Sie Ihre Compliance-Risiken',
|
|
explanation: 'Die 5x5 Risiko-Matrix visualisiert Ihre Risiken nach Wahrscheinlichkeit und Auswirkung. Risiken mit hohem Score erfordern Mitigationsmassnahmen.',
|
|
tips: [
|
|
{
|
|
icon: 'warning' as const,
|
|
title: 'Kritische Risiken',
|
|
description: 'Risiken im roten Bereich (Score >= 15) muessen priorisiert behandelt werden.',
|
|
},
|
|
{
|
|
icon: 'success' as const,
|
|
title: 'Mitigation',
|
|
description: 'Definieren Sie fuer jedes Risiko Mitigationsmassnahmen. Abgeschlossene Massnahmen reduzieren den Residual-Risk.',
|
|
},
|
|
],
|
|
},
|
|
'ai-act': {
|
|
title: 'AI Act Klassifizierung',
|
|
description: 'Bestimmen Sie die Risikostufe Ihrer KI-Systeme',
|
|
explanation: 'Der EU AI Act klassifiziert KI-Systeme in Risikostufen: Minimal, Begrenzt, Hoch und Unzulaessig. Die Einstufung bestimmt die regulatorischen Anforderungen.',
|
|
tips: [
|
|
{
|
|
icon: 'warning' as const,
|
|
title: 'Hochrisiko-Systeme',
|
|
description: 'Hochrisiko-KI-Systeme unterliegen strengen Anforderungen bezueglich Transparenz, Dokumentation und menschlicher Aufsicht.',
|
|
},
|
|
{
|
|
icon: 'info' as const,
|
|
title: 'Deadline',
|
|
description: 'Die AI Act Anforderungen treten schrittweise in Kraft. Beginnen Sie fruehzeitig mit der Compliance.',
|
|
},
|
|
],
|
|
},
|
|
'dsfa': {
|
|
title: 'Datenschutz-Folgenabschaetzung',
|
|
description: 'Erstellen Sie eine DSFA fuer Hochrisiko-Verarbeitungen',
|
|
explanation: 'Eine DSFA (Art. 35 DSGVO) ist erforderlich, wenn eine Verarbeitung voraussichtlich hohe Risiken fuer Betroffene birgt. Das Tool fuehrt Sie durch alle erforderlichen Abschnitte.',
|
|
tips: [
|
|
{
|
|
icon: 'warning' as const,
|
|
title: 'Pflicht',
|
|
description: 'Eine DSFA ist Pflicht bei: Profiling mit rechtlicher Wirkung, umfangreicher Verarbeitung besonderer Datenkategorien, systematischer Ueberwachung.',
|
|
},
|
|
{
|
|
icon: 'lightbulb' as const,
|
|
title: 'Konsultation',
|
|
description: 'Bei hohem Restrisiko muss die Aufsichtsbehoerde konsultiert werden (Art. 36 DSGVO).',
|
|
},
|
|
],
|
|
},
|
|
'tom': {
|
|
title: 'Technische und Organisatorische Massnahmen',
|
|
description: 'Dokumentieren Sie Ihre TOMs nach Art. 32 DSGVO',
|
|
explanation: 'TOMs sind konkrete Sicherheitsmassnahmen zum Schutz personenbezogener Daten. Das Dashboard zeigt den Status aller aus dem TOM Generator abgeleiteten Massnahmen mit SDM-Mapping und Gap-Analyse.',
|
|
tips: [
|
|
{
|
|
icon: 'warning' as const,
|
|
title: 'Nachweispflicht',
|
|
description: 'TOMs muessen nachweisbar real sein. Verknuepfen Sie Evidence-Dokumente (Policies, Zertifikate, Screenshots) mit jeder Massnahme, um die Rechenschaftspflicht (Art. 5 Abs. 2 DSGVO) zu erfuellen.',
|
|
},
|
|
{
|
|
icon: 'info' as const,
|
|
title: 'Generator nutzen',
|
|
description: 'Der 6-Schritt-Wizard leitet TOMs systematisch aus Ihrem Risikoprofil ab. Starten Sie dort, um eine vollstaendige Baseline zu erhalten.',
|
|
},
|
|
{
|
|
icon: 'info' as const,
|
|
title: 'SDM-Mapping',
|
|
description: 'Kontrollen werden den 7 SDM-Gewaehrleistungszielen zugeordnet: Verfuegbarkeit, Integritaet, Vertraulichkeit, Nichtverkettung, Intervenierbarkeit, Transparenz, Datenminimierung.',
|
|
},
|
|
],
|
|
},
|
|
'vvt': {
|
|
title: 'Verarbeitungsverzeichnis',
|
|
description: 'Erstellen und verwalten Sie Ihr Verzeichnis nach Art. 30 DSGVO',
|
|
explanation: 'Das Verarbeitungsverzeichnis (VVT) dokumentiert alle Verarbeitungstaetigkeiten mit personenbezogenen Daten. Der integrierte Generator-Fragebogen befuellt 70-90% der Pflichtfelder automatisch anhand Ihres Unternehmensprofils.',
|
|
tips: [
|
|
{
|
|
icon: 'warning' as const,
|
|
title: 'Pflicht fuer alle',
|
|
description: 'Die Ausnahme fuer Unternehmen <250 Mitarbeiter greift nur bei gelegentlicher, risikoarmer Verarbeitung ohne besondere Kategorien (Art. 30 Abs. 5).',
|
|
},
|
|
{
|
|
icon: 'info' as const,
|
|
title: 'Zweck-zuerst',
|
|
description: 'Definieren Sie Verarbeitungen nach Geschaeftszweck, nicht nach Tool. Ein Tool kann mehrere Verarbeitungen abdecken, eine Verarbeitung kann mehrere Tools nutzen.',
|
|
},
|
|
{
|
|
icon: 'info' as const,
|
|
title: 'Kein oeffentliches Dokument',
|
|
description: 'Das VVT ist ein internes Dokument. Es muss der Aufsichtsbehoerde nur auf Verlangen vorgelegt werden (Art. 30 Abs. 4).',
|
|
},
|
|
],
|
|
},
|
|
'cookie-banner': {
|
|
title: 'Cookie Banner',
|
|
description: 'Generieren Sie einen DSGVO-konformen Cookie Banner',
|
|
explanation: 'Der Cookie Banner Generator erstellt einen rechtssicheren Banner mit Opt-In fuer nicht-essentielle Cookies. Der generierte Code kann direkt eingebunden werden.',
|
|
tips: [
|
|
{
|
|
icon: 'warning' as const,
|
|
title: 'Opt-In Pflicht',
|
|
description: 'Fuer Marketing- und Analytics-Cookies ist eine aktive Einwilligung erforderlich. Vorangekreuzte Checkboxen sind nicht erlaubt.',
|
|
},
|
|
{
|
|
icon: 'lightbulb' as const,
|
|
title: 'Design',
|
|
description: 'Der Banner kann an Ihr Corporate Design angepasst werden.',
|
|
},
|
|
],
|
|
},
|
|
'obligations': {
|
|
title: 'Pflichtenuebersicht',
|
|
description: 'Alle regulatorischen Pflichten auf einen Blick',
|
|
explanation: 'Die Pflichtenuebersicht aggregiert alle Anforderungen aus DSGVO, AI Act, NIS2 und weiteren Regulierungen. Sie sehen auf einen Blick, welche Pflichten fuer Ihr Unternehmen gelten.',
|
|
tips: [
|
|
{
|
|
icon: 'info' as const,
|
|
title: 'Filterung',
|
|
description: 'Filtern Sie nach Regulierung, Prioritaet oder Status, um die relevanten Pflichten schnell zu finden.',
|
|
},
|
|
{
|
|
icon: 'warning' as const,
|
|
title: 'Fristen',
|
|
description: 'Achten Sie auf die Umsetzungsfristen. Einige Pflichten haben feste Deadlines.',
|
|
},
|
|
],
|
|
},
|
|
'loeschfristen': {
|
|
title: 'Loeschfristen',
|
|
description: 'Definieren Sie Aufbewahrungsrichtlinien fuer Ihre Daten',
|
|
explanation: 'Loeschfristen legen fest, wie lange personenbezogene Daten gespeichert werden duerfen. Die 3-Stufen-Logik (Zweckende, Aufbewahrungspflicht, Legal Hold) stellt sicher, dass alle gesetzlichen Anforderungen beruecksichtigt werden.',
|
|
tips: [
|
|
{
|
|
icon: 'warning' as const,
|
|
title: '3-Stufen-Logik',
|
|
description: 'Jede Loeschfrist folgt einer 3-Stufen-Logik: 1. Zweckende (Daten werden nach Zweckwegfall geloescht), 2. Aufbewahrungspflicht (gesetzliche Fristen verhindern Loeschung), 3. Legal Hold (laufende Verfahren blockieren Loeschung).',
|
|
},
|
|
{
|
|
icon: 'info' as const,
|
|
title: 'Deutsche Rechtsgrundlagen',
|
|
description: 'Der Generator kennt die wichtigsten Aufbewahrungstreiber: AO (10 J. Steuer), HGB (10/6 J. Handel), UStG (10 J. Rechnungen), BGB (3 J. Verjaehrung), ArbZG (2 J. Zeiterfassung), AGG (6 Mon. Bewerbungen).',
|
|
},
|
|
{
|
|
icon: 'info' as const,
|
|
title: 'Backup-Behandlung',
|
|
description: 'Auch Backups muessen ins Loeschkonzept einbezogen werden. Daten koennen nach primaerer Loeschung noch in Backup-Systemen existieren.',
|
|
},
|
|
],
|
|
},
|
|
'consent': {
|
|
title: 'Rechtliche Vorlagen',
|
|
description: 'Generieren Sie AGB, Datenschutzerklaerung und Nutzungsbedingungen',
|
|
explanation: 'Die rechtlichen Vorlagen werden basierend auf Ihren Verarbeitungstaetigkeiten und Use Cases generiert. Sie sind auf Ihre spezifische Situation zugeschnitten.',
|
|
tips: [
|
|
{
|
|
icon: 'info' as const,
|
|
title: 'Anpassung',
|
|
description: 'Die generierten Vorlagen koennen und sollten an Ihre spezifischen Anforderungen angepasst werden.',
|
|
},
|
|
{
|
|
icon: 'warning' as const,
|
|
title: 'Rechtspruefung',
|
|
description: 'Lassen Sie die finalen Dokumente von einem Rechtsanwalt pruefen, bevor Sie sie veroeffentlichen.',
|
|
},
|
|
],
|
|
},
|
|
'einwilligungen': {
|
|
title: 'Einwilligungen',
|
|
description: 'Verwalten Sie Consent-Tracking und Einwilligungsnachweise',
|
|
explanation: 'Hier konfigurieren Sie, wie Einwilligungen erfasst, gespeichert und nachgewiesen werden. Dies ist essentiell fuer den Nachweis der Rechtmaessigkeit.',
|
|
tips: [
|
|
{
|
|
icon: 'success' as const,
|
|
title: 'Nachweis',
|
|
description: 'Speichern Sie fuer jede Einwilligung: Zeitpunkt, Version des Textes, Art der Einwilligung.',
|
|
},
|
|
{
|
|
icon: 'info' as const,
|
|
title: 'Widerruf',
|
|
description: 'Stellen Sie sicher, dass Nutzer ihre Einwilligung jederzeit widerrufen koennen.',
|
|
},
|
|
],
|
|
},
|
|
'dsr': {
|
|
title: 'DSR Portal',
|
|
description: 'Richten Sie ein Portal fuer Betroffenenrechte ein',
|
|
explanation: 'Das DSR (Data Subject Rights) Portal ermoeglicht Betroffenen, ihre Rechte nach DSGVO auszuueben: Auskunft, Loeschung, Berichtigung, Datenportabilitaet.',
|
|
tips: [
|
|
{
|
|
icon: 'warning' as const,
|
|
title: 'Fristen',
|
|
description: 'Anfragen muessen innerhalb von 30 Tagen beantwortet werden. Richten Sie Workflows ein, um dies sicherzustellen.',
|
|
},
|
|
{
|
|
icon: 'lightbulb' as const,
|
|
title: 'Identitaetspruefung',
|
|
description: 'Implementieren Sie eine sichere Identitaetspruefung, bevor Sie Daten herausgeben.',
|
|
},
|
|
],
|
|
},
|
|
'escalations': {
|
|
title: 'Eskalations-Workflows',
|
|
description: 'Definieren Sie Management-Workflows fuer Compliance-Vorfaelle',
|
|
explanation: 'Eskalations-Workflows legen fest, wie auf Compliance-Vorfaelle reagiert wird: Wer wird informiert, welche Massnahmen werden ergriffen, wie wird dokumentiert.',
|
|
tips: [
|
|
{
|
|
icon: 'info' as const,
|
|
title: 'Datenpannen',
|
|
description: 'Bei Datenpannen muss die Aufsichtsbehoerde innerhalb von 72 Stunden informiert werden.',
|
|
},
|
|
{
|
|
icon: 'success' as const,
|
|
title: 'Verantwortlichkeiten',
|
|
description: 'Definieren Sie klare Verantwortlichkeiten fuer jeden Schritt im Eskalationsprozess.',
|
|
},
|
|
],
|
|
},
|
|
'document-generator': {
|
|
title: 'Dokumentengenerator',
|
|
description: 'Generieren Sie rechtliche Dokumente aus lizenzkonformen Vorlagen',
|
|
explanation: 'Der Dokumentengenerator nutzt frei lizenzierte Textbausteine (CC0, MIT, CC BY 4.0) um Datenschutzerklaerungen, AGB, Cookie-Banner und andere rechtliche Dokumente zu erstellen. Die Quellen werden mit korrekter Lizenz-Compliance und Attribution gehandhabt.',
|
|
tips: [
|
|
{
|
|
icon: 'lightbulb' as const,
|
|
title: 'Lizenzfreie Vorlagen',
|
|
description: 'Alle verwendeten Textbausteine stammen aus lizenzierten Quellen (CC0, MIT, CC BY 4.0). Die Attribution wird automatisch hinzugefuegt.',
|
|
},
|
|
{
|
|
icon: 'info' as const,
|
|
title: 'Platzhalter',
|
|
description: 'Fuellen Sie die Platzhalter (z.B. [FIRMENNAME], [ADRESSE]) mit Ihren Unternehmensdaten aus.',
|
|
},
|
|
{
|
|
icon: 'warning' as const,
|
|
title: 'Rechtspruefung',
|
|
description: 'Lassen Sie generierte Dokumente vor der Veroeffentlichung von einem Rechtsanwalt pruefen.',
|
|
},
|
|
],
|
|
},
|
|
'source-policy': {
|
|
title: 'Source Policy',
|
|
description: 'Verwalten Sie Ihre Datenquellen-Governance',
|
|
explanation: 'Die Source Policy definiert, welche externen Datenquellen fuer Ihre Anwendung zugelassen sind. Sie umfasst eine Whitelist, Operationsmatrix (Lookup, RAG, Training, Export), PII-Regeln und ein Audit-Trail.',
|
|
tips: [
|
|
{
|
|
icon: 'warning' as const,
|
|
title: 'Lizenzierung',
|
|
description: 'Pruefen Sie die Lizenzen aller Datenquellen (DL-DE-BY, CC-BY, CC0). Nicht-lizenzierte Quellen koennen rechtliche Risiken bergen.',
|
|
},
|
|
{
|
|
icon: 'info' as const,
|
|
title: 'PII-Regeln',
|
|
description: 'Definieren Sie klare Regeln fuer den Umgang mit personenbezogenen Daten in externen Quellen.',
|
|
},
|
|
],
|
|
},
|
|
'audit-report': {
|
|
title: 'Audit Report',
|
|
description: 'Erstellen und verwalten Sie Audit-Sitzungen',
|
|
explanation: 'Im Audit Report erstellen Sie formelle Audit-Sitzungen mit Pruefer-Informationen, fuehren die Pruefung durch und generieren PDF-Reports. Jede Sitzung dokumentiert den Compliance-Stand zu einem bestimmten Zeitpunkt.',
|
|
tips: [
|
|
{
|
|
icon: 'lightbulb' as const,
|
|
title: 'Regelmaessigkeit',
|
|
description: 'Fuehren Sie mindestens jaehrlich ein formelles Audit durch. Dokumentieren Sie Abweichungen und Massnahmenplaene.',
|
|
},
|
|
{
|
|
icon: 'success' as const,
|
|
title: 'PDF-Export',
|
|
description: 'Generieren Sie PDF-Reports in Deutsch oder Englisch fuer externe Pruefer.',
|
|
},
|
|
],
|
|
},
|
|
'workflow': {
|
|
title: 'Document Workflow',
|
|
description: 'Verwalten Sie den Freigabe-Prozess Ihrer rechtlichen Dokumente',
|
|
explanation: 'Der Document Workflow bietet einen Split-View-Editor mit synchronisiertem Scrollen. Dokumente durchlaufen den Status Draft → Review → Approved → Published. Aenderungen werden versioniert und der Freigabeprozess wird protokolliert.',
|
|
tips: [
|
|
{
|
|
icon: 'warning' as const,
|
|
title: 'Vier-Augen-Prinzip',
|
|
description: 'Rechtliche Dokumente sollten immer von mindestens einer weiteren Person geprueft werden, bevor sie veroeffentlicht werden.',
|
|
},
|
|
{
|
|
icon: 'info' as const,
|
|
title: 'Versionierung',
|
|
description: 'Jede Aenderung wird als neue Version gespeichert. So koennen Sie jederzeit den Stand eines Dokuments nachvollziehen.',
|
|
},
|
|
],
|
|
},
|
|
'consent-management': {
|
|
title: 'Consent Verwaltung',
|
|
description: 'Verwalten Sie Consent-Dokumente, Versionen und DSGVO-Prozesse',
|
|
explanation: 'Die Consent Verwaltung umfasst das Lifecycle-Management Ihrer rechtlichen Dokumente (AGB, Datenschutz, Cookie-Richtlinien), die Verwaltung von E-Mail-Templates (16 Lifecycle-E-Mails) und die Steuerung der DSGVO-Prozesse (Art. 15-21).',
|
|
tips: [
|
|
{
|
|
icon: 'info' as const,
|
|
title: 'Dokumentversionen',
|
|
description: 'Jede Aenderung an einem Consent-Dokument erzeugt eine neue Version. Aktive Nutzer muessen bei Aenderungen erneut zustimmen.',
|
|
},
|
|
{
|
|
icon: 'warning' as const,
|
|
title: 'DSGVO-Fristen',
|
|
description: 'Betroffenenrechte (Art. 15-21) haben gesetzliche Fristen. Auskunft: 30 Tage, Loeschung: unverzueglich.',
|
|
},
|
|
],
|
|
},
|
|
'notfallplan': {
|
|
title: 'Notfallplan & Breach Response',
|
|
description: 'Verwalten Sie Ihr Datenpannen-Management nach Art. 33/34 DSGVO',
|
|
explanation: 'Der Notfallplan definiert Ihren Prozess bei Datenpannen gemaess Art. 33/34 DSGVO. Er umfasst die 72-Stunden-Meldepflicht an die Aufsichtsbehoerde, die Benachrichtigung betroffener Personen bei hohem Risiko, Incident-Klassifizierung, Eskalationswege und Dokumentationspflichten.',
|
|
tips: [
|
|
{
|
|
icon: 'warning' as const,
|
|
title: '72-Stunden-Frist',
|
|
description: 'Art. 33 DSGVO: Meldung an die Aufsichtsbehoerde innerhalb von 72 Stunden nach Bekanntwerden. Verspaetete Meldungen muessen begruendet werden.',
|
|
},
|
|
{
|
|
icon: 'info' as const,
|
|
title: 'Dokumentationspflicht',
|
|
description: 'Art. 33 Abs. 5: Alle Datenpannen muessen dokumentiert werden — auch solche, die nicht meldepflichtig sind. Die Dokumentation muss der Aufsichtsbehoerde auf Verlangen vorgelegt werden koennen.',
|
|
},
|
|
],
|
|
},
|
|
'incidents': {
|
|
title: 'Incident Management',
|
|
description: 'Erfassen, bewerten und melden Sie Datenschutzverletzungen nach Art. 33/34 DSGVO',
|
|
explanation: 'Das Incident Management ermoeglicht die strukturierte Erfassung und Bearbeitung von Datenschutzverletzungen. Es umfasst die Ersterfassung des Vorfalls, eine automatische Risikobewertung zur Bestimmung der Meldepflicht, einen 72-Stunden-Countdown fuer die Meldung an die Aufsichtsbehoerde, die Generierung des Meldeformulars sowie die Dokumentation aller Sofort- und Langfristmassnahmen.',
|
|
tips: [
|
|
{
|
|
icon: 'warning' as const,
|
|
title: '72-Stunden-Frist',
|
|
description: 'Art. 33 DSGVO: Die Aufsichtsbehoerde muss innerhalb von 72 Stunden nach Bekanntwerden einer meldepflichtigen Datenpanne informiert werden.',
|
|
},
|
|
{
|
|
icon: 'info' as const,
|
|
title: 'Risikobewertung',
|
|
description: 'Nicht jede Datenpanne ist meldepflichtig. Die Risikobewertung hilft automatisch zu bestimmen, ob eine Meldung an die Aufsichtsbehoerde oder Betroffene erforderlich ist.',
|
|
},
|
|
{
|
|
icon: 'lightbulb' as const,
|
|
title: 'Massnahmen dokumentieren',
|
|
description: 'Dokumentieren Sie sowohl Sofortmassnahmen (Eindaemmung) als auch langfristige Massnahmen (Praevention). Dies ist fuer Audits essentiell.',
|
|
},
|
|
{
|
|
icon: 'success' as const,
|
|
title: 'Lessons Learned',
|
|
description: 'Schliessen Sie jeden Vorfall mit einer Ursachenanalyse und Lessons Learned ab, um kuenftige Vorfaelle zu vermeiden.',
|
|
},
|
|
],
|
|
},
|
|
'whistleblower': {
|
|
title: 'Hinweisgebersystem',
|
|
description: 'Anonymes Meldesystem gemaess Hinweisgeberschutzgesetz (HinSchG)',
|
|
explanation: 'Das Hinweisgebersystem ermoeglicht anonyme Meldungen von Missstaenden gemaess dem Hinweisgeberschutzgesetz (HinSchG). Unternehmen ab 50 Mitarbeitern sind gesetzlich verpflichtet, einen internen Meldekanal bereitzustellen. Das System bietet ein oeffentliches Meldeformular (ohne Login), einen anonymen Rueckkanal ueber Zugangscodes, Fallmanagement fuer die Ombudsperson und revisionssichere Dokumentation.',
|
|
tips: [
|
|
{
|
|
icon: 'warning' as const,
|
|
title: 'Gesetzliche Pflicht',
|
|
description: 'Ab 50 Mitarbeitern ist ein interner Meldekanal Pflicht (§ 12 HinSchG). Bussgeld bei Verstoessen: bis zu 50.000 EUR.',
|
|
},
|
|
{
|
|
icon: 'info' as const,
|
|
title: '7-Tage-Frist',
|
|
description: 'Eingangsbestaetigung muss innerhalb von 7 Tagen erfolgen. Rueckmeldung an den Hinweisgeber innerhalb von 3 Monaten.',
|
|
},
|
|
{
|
|
icon: 'lightbulb' as const,
|
|
title: 'Anonymitaet schuetzen',
|
|
description: 'Die Identitaet des Hinweisgebers darf nur mit dessen Einwilligung offengelegt werden. Das System unterstuetzt vollstaendig anonyme Meldungen.',
|
|
},
|
|
{
|
|
icon: 'success' as const,
|
|
title: 'Massnahmen-Tracking',
|
|
description: 'Dokumentieren Sie alle ergriffenen Massnahmen. Dies dient als Nachweis fuer die Aufsichtsbehoerde.',
|
|
},
|
|
],
|
|
},
|
|
'academy': {
|
|
title: 'Compliance Academy',
|
|
description: 'Schulen Sie Ihre Mitarbeiter in Datenschutz, IT-Sicherheit und KI-Kompetenz',
|
|
explanation: 'Die Compliance Academy bietet eine integrierte Schulungsplattform fuer Mitarbeiter-Compliance-Trainings. Sie umfasst vorgefertigte Kurse zu DSGVO-Grundlagen, IT-Sicherheit, AI Literacy und Hinweisgeberschutz. Mitarbeiter absolvieren Lektionen mit Videos und Texten, beantworten Quiz-Fragen und erhalten nach erfolgreichem Abschluss ein Zertifikat. Administratoren koennen den Fortschritt aller Mitarbeiter nachverfolgen und Erinnerungen fuer jaehrliche Auffrischungen einrichten.',
|
|
tips: [
|
|
{
|
|
icon: 'warning' as const,
|
|
title: 'DSGVO-Schulungspflicht',
|
|
description: 'Art. 39 Abs. 1 lit. b DSGVO: Der DSB muss die Sensibilisierung und Schulung der Mitarbeiter sicherstellen. Nachweisbare Schulungen sind Pflicht.',
|
|
},
|
|
{
|
|
icon: 'info' as const,
|
|
title: 'Jaehrliche Auffrischung',
|
|
description: 'Compliance-Schulungen sollten mindestens jaehrlich wiederholt werden. Das System erinnert automatisch an faellige Auffrischungen.',
|
|
},
|
|
{
|
|
icon: 'lightbulb' as const,
|
|
title: 'Zertifikate als Nachweis',
|
|
description: 'Jeder abgeschlossene Kurs generiert ein PDF-Zertifikat. Dies dient als Audit-Nachweis fuer die Schulungspflicht.',
|
|
},
|
|
{
|
|
icon: 'success' as const,
|
|
title: 'Quiz-Pflicht',
|
|
description: 'Nach jeder Lektion muss ein Quiz bestanden werden. So wird sichergestellt, dass die Inhalte verstanden wurden.',
|
|
},
|
|
],
|
|
},
|
|
}
|
|
|
|
export default StepHeader
|