+
+
+ )
+}
diff --git a/admin-compliance/components/sdk/DocumentUpload/DocumentUploadSection.tsx b/admin-compliance/components/sdk/DocumentUpload/DocumentUploadSection.tsx
index 64e7e84..03c8973 100644
--- a/admin-compliance/components/sdk/DocumentUpload/DocumentUploadSection.tsx
+++ b/admin-compliance/components/sdk/DocumentUpload/DocumentUploadSection.tsx
@@ -1,257 +1,30 @@
'use client'
-import React, { useState, useCallback, useEffect } from 'react'
+import React, { useState, useCallback } from 'react'
import { useRouter } from 'next/navigation'
+import {
+ type UploadedDocument,
+ type DocumentUploadSectionProps,
+ formatFileSize,
+ detectVersionFromFilename,
+ suggestNextVersion,
+} from './DocumentUploadTypes'
+import {
+ UploadIcon,
+ QRIcon,
+ DocumentIcon,
+ CheckIcon,
+ EditIcon,
+ CloseIcon,
+} from './DocumentUploadIcons'
+import { QRCodeModal } from './DocumentUploadQRModal'
-// =============================================================================
-// TYPES
-// =============================================================================
-
-export interface UploadedDocument {
- id: string
- name: string
- type: string
- size: number
- uploadedAt: Date
- extractedVersion?: string
- extractedContent?: ExtractedContent
- status: 'uploading' | 'processing' | 'ready' | 'error'
- error?: string
-}
-
-export interface ExtractedContent {
- title?: string
- version?: string
- lastModified?: string
- sections?: ExtractedSection[]
- metadata?: Record
+
+
+
+
+
+
+
+
+
+
+
+ Mit Handy hochladen
+QR-Code scannen
+
+
+
+ {qrCodeUrl ? (
+ 
+ ) : (
+
+
+
+
+
+ )}
+
+ Scannen Sie den Code mit Ihrem Handy,
+ um Dokumente hochzuladen.
+
+
+
+ Oder Link teilen:
+
+
+
+
+
+
+ + Hinweis: Ihr Handy muss im gleichen Netzwerk sein. +
+
-
-
- )
-}
+export type {
+ UploadedDocument,
+ ExtractedContent,
+ ExtractedSection,
+ DocumentUploadSectionProps,
+} from './DocumentUploadTypes'
// =============================================================================
// MAIN COMPONENT
diff --git a/admin-compliance/components/sdk/DocumentUpload/DocumentUploadTypes.ts b/admin-compliance/components/sdk/DocumentUpload/DocumentUploadTypes.ts
new file mode 100644
index 0000000..be4bf3a
--- /dev/null
+++ b/admin-compliance/components/sdk/DocumentUpload/DocumentUploadTypes.ts
@@ -0,0 +1,89 @@
+// =============================================================================
+// DocumentUpload shared types — extracted from DocumentUploadSection for LOC compliance
+// =============================================================================
+
+export interface UploadedDocument {
+ id: string
+ name: string
+ type: string
+ size: number
+ uploadedAt: Date
+ extractedVersion?: string
+ extractedContent?: ExtractedContent
+ status: 'uploading' | 'processing' | 'ready' | 'error'
+ error?: string
+}
+
+export interface ExtractedContent {
+ title?: string
+ version?: string
+ lastModified?: string
+ sections?: ExtractedSection[]
+ metadata?: Record
-
-
-
-
-
-
-
-
-
-
-
- Mit Handy hochladen
-QR-Code scannen
-
-
-
- {qrCodeUrl ? (
-
- ) : (
-
-
-
-
-
- )}
-
- Scannen Sie den Code mit Ihrem Handy,
- um Dokumente hochzuladen.
-
-
-
- Oder Link teilen:
-
-
-
-
-
-
- - Hinweis: Ihr Handy muss im gleichen Netzwerk sein. -
-
-
-
- )
-}
-
-// =============================================================================
-// PACKAGE INDICATOR
-// =============================================================================
-
-interface PackageIndicatorProps {
- packageId: SDKPackageId
- order: number
- name: string
- icon: string
- completion: number
- isActive: boolean
- isExpanded: boolean
- isLocked: boolean
- onToggle: () => void
- collapsed: boolean
-}
-
-function PackageIndicator({
- order,
- name,
- icon,
- completion,
- isActive,
- isExpanded,
- isLocked,
- onToggle,
- collapsed,
-}: PackageIndicatorProps) {
- if (collapsed) {
- return (
-
- )
- }
-
- return (
-
- )
-}
-
-// =============================================================================
-// STEP ITEM
-// =============================================================================
-
-interface StepItemProps {
- step: SDKStep
- isActive: boolean
- isCompleted: boolean
- isLocked: boolean
- checkpointStatus?: 'passed' | 'failed' | 'warning' | 'pending'
- collapsed: boolean
- projectId?: string
-}
-
-function StepItem({ step, isActive, isCompleted, isLocked, checkpointStatus, collapsed, projectId }: StepItemProps) {
- const content = (
-
- {/* Step indicator */}
-
- )
-
- if (isLocked) {
- return content
- }
-
- return (
-
- {content}
-
- )
-}
-
-// =============================================================================
-// ADDITIONAL MODULE ITEM
-// =============================================================================
-
-interface AdditionalModuleItemProps {
- href: string
- icon: React.ReactNode
- label: string
- isActive: boolean
- collapsed: boolean
- projectId?: string
-}
-
-function AdditionalModuleItem({ href, icon, label, isActive, collapsed, projectId }: AdditionalModuleItemProps) {
- const isExternal = href.startsWith('http')
- const className = `flex items-center gap-3 px-4 py-2.5 text-sm transition-colors ${
- collapsed ? 'justify-center' : ''
- } ${
- isActive
- ? 'bg-purple-100 text-purple-900 font-medium'
- : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
- }`
-
- if (isExternal) {
- return (
-
- {icon}
- {!collapsed && (
-
- {label}
-
-
- )}
-
- )
- }
-
- return (
-
- {icon}
- {!collapsed && {label}}
-
- )
-}
+import { CollapseIcon } from './SidebarIcons'
+import {
+ ProgressBar,
+ PackageIndicator,
+ StepItem,
+ CorpusStalenessInfo,
+ withProject,
+} from './SidebarSubComponents'
+import { SidebarModuleList } from './SidebarModuleList'
// =============================================================================
// MAIN SIDEBAR
@@ -315,41 +30,6 @@ interface SDKSidebarProps {
onCollapsedChange?: (collapsed: boolean) => void
}
-// =============================================================================
-// CORPUS STALENESS INFO
-// =============================================================================
-
-function CorpusStalenessInfo({ ragCorpusStatus }: { ragCorpusStatus: RAGCorpusStatus }) {
- const collections = ragCorpusStatus.collections
- const collectionNames = Object.keys(collections)
- if (collectionNames.length === 0) return null
-
- // Check if corpus was updated after the last fetch (simplified: show last update time)
- const lastUpdated = collectionNames.reduce((latest, name) => {
- const updated = new Date(collections[name].last_updated)
- return updated > latest ? updated : latest
- }, new Date(0))
-
- const daysSinceUpdate = Math.floor((Date.now() - lastUpdated.getTime()) / (1000 * 60 * 60 * 24))
- const totalChunks = collectionNames.reduce((sum, name) => sum + collections[name].chunks_count, 0)
-
- return (
-
- {isCompleted ? (
-
-
- {/* Step name - hidden when collapsed */}
- {!collapsed && {step.nameShort}}
-
- {/* Checkpoint status - hidden when collapsed */}
- {!collapsed && checkpointStatus && checkpointStatus !== 'pending' && (
-
-
- ) : isLocked ? (
-
-
- ) : isActive ? (
-
-
-
- ) : (
-
- )}
-
- {checkpointStatus === 'passed' ? (
-
- )}
-
-
- ) : checkpointStatus === 'failed' ? (
-
- !
-
- ) : (
-
-
- )}
-
-
{!collapsed && (
@@ -467,7 +138,7 @@ export function SDKSidebar({ collapsed = false, onCollapsedChange }: SDKSidebarP
- {/* Overall Progress - hidden when collapsed */}
+ {/* Overall Progress */}
{!collapsed && (
-
- )
-}
-
export function SDKSidebar({ collapsed = false, onCollapsedChange }: SDKSidebarProps) {
const pathname = usePathname()
const { state, packageCompletion, completionPercentage, getCheckpointStatus, projectId } = useSDK()
@@ -404,11 +84,8 @@ export function SDKSidebar({ collapsed = false, onCollapsedChange }: SDKSidebarP
if (state.preferences?.allowParallelWork) return false
const pkg = SDK_PACKAGES.find(p => p.id === packageId)
if (!pkg || pkg.order === 1) return false
-
- // Check if previous package is complete
const prevPkg = SDK_PACKAGES.find(p => p.order === pkg.order - 1)
if (!prevPkg) return false
-
return packageCompletion[prevPkg.id] < 100
}
@@ -428,7 +105,6 @@ export function SDKSidebar({ collapsed = false, onCollapsedChange }: SDKSidebarP
return steps.some(s => s.url === pathname)
}
- // Filter steps based on visibleWhen conditions
const getVisibleStepsForPackage = (packageId: SDKPackageId): SDKStep[] => {
const steps = getStepsForPackage(packageId)
return steps.filter(step => {
@@ -448,12 +124,7 @@ export function SDKSidebar({ collapsed = false, onCollapsedChange }: SDKSidebarP
>
30 ? 'bg-amber-400' : 'bg-green-400'}`} />
-
- RAG Corpus: {totalChunks} Chunks
-
-
- {daysSinceUpdate > 30 && (
-
- Corpus {daysSinceUpdate}d alt — Re-Evaluation empfohlen
-
- )}
-
@@ -483,7 +154,7 @@ export function SDKSidebar({ collapsed = false, onCollapsedChange }: SDKSidebarP
- {/* Collapse Toggle */}
- {/* Export Button */}
{!collapsed && (
diff --git a/admin-compliance/components/sdk/Sidebar/SidebarIcons.tsx b/admin-compliance/components/sdk/Sidebar/SidebarIcons.tsx
new file mode 100644
index 0000000..0a536b5
--- /dev/null
+++ b/admin-compliance/components/sdk/Sidebar/SidebarIcons.tsx
@@ -0,0 +1,40 @@
+'use client'
+// =============================================================================
+// SIDEBAR ICON COMPONENTS
+// Small SVG icons used in SDKSidebar sub-components.
+// =============================================================================
+
+export const CheckIcon = () => (
+
+)
+
+export const LockIcon = () => (
+
+)
+
+export const WarningIcon = () => (
+
+)
+
+export const ChevronDownIcon = ({ className = '' }: { className?: string }) => (
+
+)
+
+export const CollapseIcon = ({ collapsed }: { collapsed: boolean }) => (
+
+)
diff --git a/admin-compliance/components/sdk/Sidebar/SidebarModuleList.tsx b/admin-compliance/components/sdk/Sidebar/SidebarModuleList.tsx
new file mode 100644
index 0000000..986dc84
--- /dev/null
+++ b/admin-compliance/components/sdk/Sidebar/SidebarModuleList.tsx
@@ -0,0 +1,108 @@
+'use client'
+// =============================================================================
+// SIDEBAR ADDITIONAL MODULE LIST
+// The "Zusatzmodule" and "Maschinenrecht / CE" sections rendered in the nav.
+// =============================================================================
+
+import React from 'react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { AdditionalModuleItem, withProject } from './SidebarSubComponents'
+
+interface SidebarModuleListProps {
+ collapsed: boolean
+ projectId?: string
+ pendingCRCount: number
+}
+
+export function SidebarModuleList({ collapsed, projectId, pendingCRCount }: SidebarModuleListProps) {
+ const pathname = usePathname()
+
+ return (
+ <>
+ {/* Maschinenrecht / CE */}
+
+ {!collapsed && (
+
+
+
+ {/* Additional Modules */}
+
+ Maschinenrecht / CE
+
+ )}
+
+ {!collapsed && (
+
+
+ )
+}
diff --git a/admin-compliance/components/sdk/Sidebar/SidebarSubComponents.tsx b/admin-compliance/components/sdk/Sidebar/SidebarSubComponents.tsx
new file mode 100644
index 0000000..a64a1b4
--- /dev/null
+++ b/admin-compliance/components/sdk/Sidebar/SidebarSubComponents.tsx
@@ -0,0 +1,295 @@
+'use client'
+// =============================================================================
+// SIDEBAR SUB-COMPONENTS
+// ProgressBar, PackageIndicator, StepItem, AdditionalModuleItem,
+// CorpusStalenessInfo — all used internally by SDKSidebar.
+// =============================================================================
+
+import React from 'react'
+import Link from 'next/link'
+import type { SDKStep, SDKPackageId, RAGCorpusStatus } from '@/lib/sdk'
+import { CheckIcon, LockIcon, WarningIcon, ChevronDownIcon } from './SidebarIcons'
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+export function withProject(url: string, projectId?: string): string {
+ if (!projectId) return url
+ const separator = url.includes('?') ? '&' : '?'
+ return `${url}${separator}project=${projectId}`
+}
+
+// ---------------------------------------------------------------------------
+// ProgressBar
+// ---------------------------------------------------------------------------
+
+interface ProgressBarProps {
+ value: number
+ className?: string
+}
+
+export function ProgressBar({ value, className = '' }: ProgressBarProps) {
+ return (
+
+ Zusatzmodule
+
+ )}
+
+
+
+ )
+}
+
+// ---------------------------------------------------------------------------
+// PackageIndicator
+// ---------------------------------------------------------------------------
+
+interface PackageIndicatorProps {
+ packageId: SDKPackageId
+ order: number
+ name: string
+ icon: string
+ completion: number
+ isActive: boolean
+ isExpanded: boolean
+ isLocked: boolean
+ onToggle: () => void
+ collapsed: boolean
+}
+
+export function PackageIndicator({
+ order,
+ name,
+ icon,
+ completion,
+ isActive,
+ isExpanded,
+ isLocked,
+ onToggle,
+ collapsed,
+}: PackageIndicatorProps) {
+ if (collapsed) {
+ return (
+
+ )
+ }
+
+ return (
+
+ )
+}
+
+// ---------------------------------------------------------------------------
+// StepItem
+// ---------------------------------------------------------------------------
+
+interface StepItemProps {
+ step: SDKStep
+ isActive: boolean
+ isCompleted: boolean
+ isLocked: boolean
+ checkpointStatus?: 'passed' | 'failed' | 'warning' | 'pending'
+ collapsed: boolean
+ projectId?: string
+}
+
+export function StepItem({ step, isActive, isCompleted, isLocked, checkpointStatus, collapsed, projectId }: StepItemProps) {
+ const content = (
+
+
+ )
+
+ if (isLocked) return content
+
+ return (
+
+ {content}
+
+ )
+}
+
+// ---------------------------------------------------------------------------
+// AdditionalModuleItem
+// ---------------------------------------------------------------------------
+
+interface AdditionalModuleItemProps {
+ href: string
+ icon: React.ReactNode
+ label: string
+ isActive: boolean
+ collapsed: boolean
+ projectId?: string
+}
+
+export function AdditionalModuleItem({ href, icon, label, isActive, collapsed, projectId }: AdditionalModuleItemProps) {
+ const isExternal = href.startsWith('http')
+ const className = `flex items-center gap-3 px-4 py-2.5 text-sm transition-colors ${
+ collapsed ? 'justify-center' : ''
+ } ${
+ isActive
+ ? 'bg-purple-100 text-purple-900 font-medium'
+ : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
+ }`
+
+ if (isExternal) {
+ return (
+
+ {icon}
+ {!collapsed && (
+
+ {label}
+
+
+ )}
+
+ )
+ }
+
+ return (
+
+ {icon}
+ {!collapsed && {label}}
+
+ )
+}
+
+// ---------------------------------------------------------------------------
+// CorpusStalenessInfo
+// ---------------------------------------------------------------------------
+
+export function CorpusStalenessInfo({ ragCorpusStatus }: { ragCorpusStatus: RAGCorpusStatus }) {
+ const collections = ragCorpusStatus.collections
+ const collectionNames = Object.keys(collections)
+ if (collectionNames.length === 0) return null
+
+ const lastUpdated = collectionNames.reduce((latest, name) => {
+ const updated = new Date(collections[name].last_updated)
+ return updated > latest ? updated : latest
+ }, new Date(0))
+
+ const daysSinceUpdate = Math.floor((Date.now() - lastUpdated.getTime()) / (1000 * 60 * 60 * 24))
+ const totalChunks = collectionNames.reduce((sum, name) => sum + collections[name].chunks_count, 0)
+
+ return (
+
+ {isCompleted ? (
+
+
+ {!collapsed && {step.nameShort}}
+
+ {!collapsed && checkpointStatus && checkpointStatus !== 'pending' && (
+
+
+ ) : isLocked ? (
+
+
+ ) : isActive ? (
+
+
+
+ ) : (
+
+ )}
+
+ {checkpointStatus === 'passed' ? (
+
+ )}
+
+
+ ) : checkpointStatus === 'failed' ? (
+
+ !
+
+ ) : (
+
+
+ )}
+
+ = {
+ ...STEP_EXPLANATIONS_PART1,
+ ...STEP_EXPLANATIONS_PART2,
+}
diff --git a/admin-compliance/components/sdk/StepHeader/StepExplanationsPart1.ts b/admin-compliance/components/sdk/StepHeader/StepExplanationsPart1.ts
new file mode 100644
index 0000000..82018aa
--- /dev/null
+++ b/admin-compliance/components/sdk/StepHeader/StepExplanationsPart1.ts
@@ -0,0 +1,197 @@
+// =============================================================================
+// STEP EXPLANATION PRESETS — Part 1 (company-profile … einwilligungen)
+// =============================================================================
+
+import type { StepTip } from './StepHeader'
+
+type ExplanationEntry = { title: string; description: string; explanation: string; tips: StepTip[] }
+
+export const STEP_EXPLANATIONS_PART1: Record = {
+ '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. Vollstaendige CRUD-Operationen mit Backend-Persistenz.',
+ 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. Bei Backend-Fehler erfolgt automatischer Rollback.' },
+ { icon: 'lightbulb' as const, title: 'CRUD-Operationen', description: 'Anforderungen koennen erstellt, bearbeitet und geloescht werden. Alle Aenderungen werden sofort im Backend persistiert.' },
+ ],
+ },
+ '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. Evidence-Linking zeigt verknuepfte Nachweise mit Gueltigkeits-Badge.',
+ 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.' },
+ { icon: 'success' as const, title: 'Evidence-Linking', description: 'Verknuepfen Sie Nachweise direkt mit Controls. Gueltige, abgelaufene und ausstehende Nachweise werden mit Badges angezeigt.' },
+ ],
+ },
+ 'evidence': {
+ title: 'Nachweise',
+ description: 'Dokumentieren Sie die Umsetzung mit Belegen',
+ explanation: 'Nachweise sind Dokumente, Screenshots oder Berichte, die belegen, dass Kontrollen implementiert sind. Server-seitige Pagination fuer grosse Nachweis-Sammlungen.',
+ tips: [
+ { icon: 'warning' as const, title: 'Gueltigkeit', description: 'Achten Sie auf das Ablaufdatum von Nachweisen. Abgelaufene Zertifikate oder Berichte muessen erneuert werden. Status: valid, expired, pending, failed.' },
+ { icon: 'success' as const, title: 'Verknuepfung', description: 'Verknuepfen Sie Nachweise direkt mit den zugehoerigen Kontrollen fuer eine lueckenlose Dokumentation.' },
+ { icon: 'info' as const, title: 'Pagination', description: 'Bei vielen Nachweisen wird automatisch paginiert. Nutzen Sie die Seitennavigation am Ende der Liste.' },
+ ],
+ },
+ 'audit-checklist': {
+ title: 'Audit-Checkliste',
+ description: 'Systematische Pruefung der Compliance-Konformitaet',
+ explanation: 'Die Audit-Checkliste wird automatisch aus den Anforderungen generiert. Session-Management mit Sign-Off-Workflow und PDF-Export.',
+ 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: 'Sign-Off & PDF', description: 'Zeichnen Sie Pruefpunkte mit digitalem Hash (SHA-256) ab. Exportieren Sie den Report als PDF in Deutsch oder Englisch.' },
+ { icon: 'success' as const, title: 'Session-History', description: 'Vergangene Audit-Sitzungen werden mit Status-Badges angezeigt: Draft, In Progress, Completed, Archived.' },
+ ],
+ },
+ 'risks': {
+ title: 'Risiko-Matrix',
+ description: 'Bewerten und priorisieren Sie Ihre Compliance-Risiken',
+ explanation: 'Die 5x5 Risiko-Matrix visualisiert Ihre Risiken nach Wahrscheinlichkeit und Auswirkung. Inherent Risk vs. Residual Risk mit visuellem Vergleich.',
+ tips: [
+ { icon: 'warning' as const, title: 'Kritische Risiken', description: 'Risiken mit Score >= 20 sind CRITICAL (rot), >= 12 HIGH (orange), >= 6 MEDIUM (gelb), < 6 LOW (gruen).' },
+ { icon: 'success' as const, title: 'Mitigation', description: 'Verknuepfen Sie Controls als Mitigationsmassnahmen. Der Residual-Risk wird automatisch anhand verknuepfter Controls berechnet.' },
+ { icon: 'info' as const, title: 'Status-Workflow', description: 'Risiken durchlaufen: Identifiziert → Bewertet → Mitigiert → Akzeptiert → Geschlossen.' },
+ ],
+ },
+ 'ai-act': {
+ title: 'AI Act Klassifizierung',
+ description: 'Registrieren und klassifizieren Sie Ihre KI-Systeme',
+ explanation: 'Der EU AI Act klassifiziert KI-Systeme in Risikostufen: Minimal, Begrenzt, Hoch und Verboten. KI-Systeme werden im Backend persistent gespeichert und koennen automatisch bewertet werden.',
+ tips: [
+ { icon: 'warning' as const, title: 'Hochrisiko-Systeme', description: 'Hochrisiko-KI erfordert 8 Pflichten: Risikomanagement, Daten-Governance, Dokumentation, Transparenz, menschliche Aufsicht, Genauigkeit, Robustheit, Cybersicherheit.' },
+ { icon: 'lightbulb' as const, title: 'Automatische Bewertung', description: 'Nutzen Sie die Assess-Funktion: Sie analysiert Zweck und Sektor und leitet die Risikokategorie + Pflichten automatisch ab.' },
+ { icon: 'info' as const, title: 'CRUD-Operationen', description: 'KI-Systeme koennen registriert, bearbeitet, bewertet und geloescht werden. Alle Daten werden backend-persistent gespeichert.' },
+ ],
+ },
+ '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: 'TOMs nach Art. 32 DSGVO mit Vendor-Controls-Querverweis',
+ 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. Im Uebersicht-Tab werden zusaetzlich Vendor-TOM-Controls (VND-TOM-01 bis VND-TOM-06) aus dem Vendor-Compliance-Modul als Querverweis angezeigt.',
+ 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.' },
+ { icon: 'success' as const, title: 'Vendor-Controls', description: 'Im Uebersicht-Tab werden Vendor-TOM-Controls (VND-TOM-01 bis 06) als Read-Only-Querverweis angezeigt: Verschluesselung, Zugriffskontrolle, Verfuegbarkeit und Ueberpruefungsverfahren Ihrer Auftragsverarbeiter.' },
+ ],
+ },
+ 'vvt': {
+ title: 'Verarbeitungsverzeichnis',
+ description: 'Verarbeitungsverzeichnis nach Art. 30 DSGVO mit integriertem Processor-Tab',
+ explanation: 'Das Verarbeitungsverzeichnis (VVT) dokumentiert alle Verarbeitungstaetigkeiten mit personenbezogenen Daten. Der integrierte Generator-Fragebogen befuellt 70-90% der Pflichtfelder automatisch. Der Tab "Auftragsverarbeiter (Abs. 2)" liest Vendors mit role=PROCESSOR/SUB_PROCESSOR direkt aus der Vendor-Compliance-API — keine doppelte Datenhaltung.',
+ 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).' },
+ { icon: 'success' as const, title: 'Processor-Tab (Art. 30 Abs. 2)', description: 'Auftragsverarbeiter werden direkt aus dem Vendor Register gelesen (Read-Only). Neue Vendors werden im Vendor-Compliance-Modul angelegt und erscheinen hier automatisch. PDF-Druck fuer Art. 30 Abs. 2 Dokument.' },
+ ],
+ },
+ 'cookie-banner': {
+ title: 'Cookie Banner',
+ description: 'Konfigurieren Sie einen DSGVO-konformen Cookie Banner mit persistenter DB-Speicherung',
+ explanation: 'Der Cookie Banner Generator erstellt einen rechtssicheren Banner mit Opt-In fuer nicht-essentielle Cookies. Alle Einstellungen — einschliesslich Ueberschrift, Beschreibung und Datenschutz-Link — werden in der Datenbank gespeichert und bleiben auch nach einem Neustart erhalten. Der generierte Embed-Code wird direkt aus der gespeicherten Konfiguration erzeugt.',
+ 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 und Texte', description: 'Passen Sie Ueberschrift, Beschreibung und Farben an Ihr Corporate Design an. Aenderungen werden in der Vorschau sofort sichtbar.' },
+ { icon: 'info' as const, title: 'Embed-Code', description: 'Der Code exportiert einen vollstaendigen HTML+CSS+JS-Block aus Ihrer gespeicherten Konfiguration — einfach vor dem schliessenden
+
+ )
+}
diff --git a/admin-compliance/components/sdk/StepHeader/StepExplanations.ts b/admin-compliance/components/sdk/StepHeader/StepExplanations.ts
new file mode 100644
index 0000000..69e3e01
--- /dev/null
+++ b/admin-compliance/components/sdk/StepHeader/StepExplanations.ts
@@ -0,0 +1,16 @@
+// =============================================================================
+// STEP EXPLANATION PRESETS — merged index
+// Combines Part1 (company-profile … einwilligungen) and
+// Part2 (dsr … use-case-workshop) for backward-compatible re-export.
+// =============================================================================
+
+import type { StepTip } from './StepHeader'
+import { STEP_EXPLANATIONS_PART1 } from './StepExplanationsPart1'
+import { STEP_EXPLANATIONS_PART2 } from './StepExplanationsPart2'
+
+type ExplanationEntry = { title: string; description: string; explanation: string; tips: StepTip[] }
+
+export const STEP_EXPLANATIONS: Record 30 ? 'bg-amber-400' : 'bg-green-400'}`} />
+
+ RAG Corpus: {totalChunks} Chunks
+
+
+ {daysSinceUpdate > 30 && (
+
+ Corpus {daysSinceUpdate}d alt — Re-Evaluation empfohlen
+
+ )}
+