From 1fcd8244b1b82e3a31d9bae6e05034d1ff600e37 Mon Sep 17 00:00:00 2001
From: Sharang Parnerkar <30073382+mighty840@users.noreply.github.com>
Date: Thu, 16 Apr 2026 17:12:15 +0200
Subject: [PATCH] refactor(admin): split evidence, process-tasks, iace/hazards
 pages

Extract components and hooks into _components/ and _hooks/ subdirectories
to reduce each page.tsx to under 500 LOC (was 1545/1383/1316).

Final line counts: evidence=213, process-tasks=304, hazards=157.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../evidence/_components/AuditTrailPanel.tsx  |   95 +
 .../sdk/evidence/_components/ChecksTab.tsx    |  115 ++
 .../sdk/evidence/_components/EvidenceCard.tsx |   73 +-
 .../sdk/evidence/_components/EvidenceTypes.ts |   77 +
 .../sdk/evidence/_components/MappingTab.tsx   |   73 +
 .../sdk/evidence/_components/RejectModal.tsx  |   76 +
 .../sdk/evidence/_components/ReportTab.tsx    |   88 +
 .../sdk/evidence/_components/ReviewModal.tsx  |  125 ++
 .../app/sdk/evidence/_hooks/useEvidence.ts    |  195 +-
 admin-compliance/app/sdk/evidence/page.tsx    | 1634 ++---------------
 .../hazards/_components/AutoSuggestPanel.tsx  |  153 ++
 .../hazards/_components/HazardForm.tsx        |  171 +-
 .../hazards/_components/HazardTable.tsx       |   39 +-
 .../hazards/_components/LibraryModal.tsx      |   83 +-
 .../hazards/_components/RiskBadge.tsx         |   17 +-
 .../[projectId]/hazards/_components/types.ts  |  130 +-
 .../[projectId]/hazards/_hooks/useHazards.ts  |  173 ++
 .../app/sdk/iace/[projectId]/hazards/page.tsx | 1265 +------------
 .../_components/CalendarView.tsx              |   81 +
 .../_components/CompleteModal.tsx             |   70 +
 .../process-tasks/_components/SkipModal.tsx   |   55 +
 .../_components/TaskDetailModal.tsx           |  165 ++
 .../_components/TaskFormModal.tsx             |  146 ++
 .../sdk/process-tasks/_components/Toast.tsx   |   16 +
 .../sdk/process-tasks/_components/types.ts    |  179 ++
 .../process-tasks/_hooks/useProcessTasks.ts   |  149 ++
 .../app/sdk/process-tasks/page.tsx            | 1261 +------------
 27 files changed, 2621 insertions(+), 4083 deletions(-)
 create mode 100644 admin-compliance/app/sdk/evidence/_components/AuditTrailPanel.tsx
 create mode 100644 admin-compliance/app/sdk/evidence/_components/ChecksTab.tsx
 create mode 100644 admin-compliance/app/sdk/evidence/_components/MappingTab.tsx
 create mode 100644 admin-compliance/app/sdk/evidence/_components/RejectModal.tsx
 create mode 100644 admin-compliance/app/sdk/evidence/_components/ReportTab.tsx
 create mode 100644 admin-compliance/app/sdk/evidence/_components/ReviewModal.tsx
 create mode 100644 admin-compliance/app/sdk/iace/[projectId]/hazards/_components/AutoSuggestPanel.tsx
 create mode 100644 admin-compliance/app/sdk/iace/[projectId]/hazards/_hooks/useHazards.ts
 create mode 100644 admin-compliance/app/sdk/process-tasks/_components/CalendarView.tsx
 create mode 100644 admin-compliance/app/sdk/process-tasks/_components/CompleteModal.tsx
 create mode 100644 admin-compliance/app/sdk/process-tasks/_components/SkipModal.tsx
 create mode 100644 admin-compliance/app/sdk/process-tasks/_components/TaskDetailModal.tsx
 create mode 100644 admin-compliance/app/sdk/process-tasks/_components/TaskFormModal.tsx
 create mode 100644 admin-compliance/app/sdk/process-tasks/_components/Toast.tsx
 create mode 100644 admin-compliance/app/sdk/process-tasks/_components/types.ts
 create mode 100644 admin-compliance/app/sdk/process-tasks/_hooks/useProcessTasks.ts

diff --git a/admin-compliance/app/sdk/evidence/_components/AuditTrailPanel.tsx b/admin-compliance/app/sdk/evidence/_components/AuditTrailPanel.tsx
new file mode 100644
index 0000000..0543c39
--- /dev/null
+++ b/admin-compliance/app/sdk/evidence/_components/AuditTrailPanel.tsx
@@ -0,0 +1,95 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+
+export function AuditTrailPanel({ evidenceId, onClose }: { evidenceId: string; onClose: () => void }) {
+  const [entries, setEntries] = useState<{ id: string; action: string; actor: string; timestamp: string; details: Record<string, unknown> | null }[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    fetch(`/api/sdk/v1/compliance/audit-trail?entity_type=evidence&entity_id=${evidenceId}`)
+      .then(res => res.json())
+      .then(data => {
+        const mapped = (data.entries || []).map((e: Record<string, unknown>) => ({
+          id: e.id as string,
+          action: e.action as string,
+          actor: (e.performed_by || 'System') as string,
+          timestamp: (e.performed_at || '') as string,
+          details: {
+            ...(e.field_changed ? { field: e.field_changed } : {}),
+            ...(e.old_value ? { old: e.old_value } : {}),
+            ...(e.new_value ? { new: e.new_value } : {}),
+            ...(e.change_summary ? { summary: e.change_summary } : {}),
+          } as Record<string, unknown>,
+        }))
+        setEntries(mapped)
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false))
+  }, [evidenceId])
+
+  const actionLabels: Record<string, { label: string; color: string }> = {
+    created: { label: 'Erstellt', color: 'bg-blue-100 text-blue-700' },
+    uploaded: { label: 'Hochgeladen', color: 'bg-purple-100 text-purple-700' },
+    reviewed: { label: 'Reviewed', color: 'bg-green-100 text-green-700' },
+    rejected: { label: 'Abgelehnt', color: 'bg-red-100 text-red-700' },
+    updated: { label: 'Aktualisiert', color: 'bg-yellow-100 text-yellow-700' },
+    deleted: { label: 'Geloescht', color: 'bg-gray-100 text-gray-700' },
+    approved: { label: 'Genehmigt', color: 'bg-emerald-100 text-emerald-700' },
+    four_eyes_first: { label: '1. Review (4-Augen)', color: 'bg-blue-100 text-blue-700' },
+    four_eyes_final: { label: 'Finale Freigabe (4-Augen)', color: 'bg-emerald-100 text-emerald-700' },
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
+      <div className="bg-white rounded-2xl shadow-xl w-full max-w-2xl mx-4 p-6 max-h-[80vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-xl font-bold text-gray-900">Audit-Trail</h2>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-xl">&times;</button>
+        </div>
+
+        {loading ? (
+          <div className="flex justify-center py-12">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
+          </div>
+        ) : entries.length === 0 ? (
+          <div className="py-12 text-center text-gray-500">
+            <p>Keine Audit-Trail-Eintraege vorhanden.</p>
+          </div>
+        ) : (
+          <div className="relative">
+            <div className="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-200" />
+            <div className="space-y-4">
+              {entries.map((entry, idx) => {
+                const meta = actionLabels[entry.action] || { label: entry.action, color: 'bg-gray-100 text-gray-700' }
+                return (
+                  <div key={entry.id || idx} className="relative flex items-start gap-4 pl-10">
+                    <div className="absolute left-2.5 top-1.5 w-3 h-3 rounded-full bg-white border-2 border-purple-400" />
+                    <div className="flex-1 bg-gray-50 rounded-lg p-3">
+                      <div className="flex items-center gap-2 mb-1">
+                        <span className={`px-2 py-0.5 text-xs rounded ${meta.color}`}>{meta.label}</span>
+                        <span className="text-xs text-gray-400">
+                          {entry.timestamp ? new Date(entry.timestamp).toLocaleString('de-DE') : '—'}
+                        </span>
+                      </div>
+                      <div className="text-sm text-gray-600">
+                        <span className="font-medium">{entry.actor || 'System'}</span>
+                      </div>
+                      {entry.details && Object.keys(entry.details).length > 0 && (
+                        <div className="mt-2 text-xs text-gray-500 font-mono bg-white rounded p-2 border">
+                          {Object.entries(entry.details).map(([k, v]) => (
+                            <div key={k}><span className="text-gray-400">{k}:</span> {String(v)}</div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/evidence/_components/ChecksTab.tsx b/admin-compliance/app/sdk/evidence/_components/ChecksTab.tsx
new file mode 100644
index 0000000..5bc3206
--- /dev/null
+++ b/admin-compliance/app/sdk/evidence/_components/ChecksTab.tsx
@@ -0,0 +1,115 @@
+'use client'
+
+import type { EvidenceCheck, CheckResult, CHECK_TYPE_LABELS, RUN_STATUS_LABELS } from './EvidenceTypes'
+import { CHECK_TYPE_LABELS as checkTypeLabels, RUN_STATUS_LABELS as runStatusLabels } from './EvidenceTypes'
+
+export function ChecksTab({
+  checks,
+  checksLoading,
+  checkResults,
+  runningCheckId,
+  seedingChecks,
+  onRun,
+  onLoadResults,
+  onSeed,
+}: {
+  checks: EvidenceCheck[]
+  checksLoading: boolean
+  checkResults: Record<string, CheckResult[]>
+  runningCheckId: string | null
+  seedingChecks: boolean
+  onRun: (id: string) => void
+  onLoadResults: (id: string) => void
+  onSeed: () => void
+}) {
+  return (
+    <>
+      {!checksLoading && checks.length === 0 && (
+        <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg flex items-center justify-between">
+          <div>
+            <p className="font-medium text-yellow-800">Keine automatischen Checks vorhanden</p>
+            <p className="text-sm text-yellow-700">Laden Sie ca. 15 Standard-Checks (TLS, Header, Zertifikate, etc.).</p>
+          </div>
+          <button onClick={onSeed} disabled={seedingChecks}
+            className="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 disabled:opacity-50">
+            {seedingChecks ? 'Lade...' : 'Standard-Checks laden'}
+          </button>
+        </div>
+      )}
+
+      {checksLoading ? (
+        <div className="flex justify-center py-12">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {checks.map(check => {
+            const typeMeta = checkTypeLabels[check.check_type] || { label: check.check_type, color: 'bg-gray-100 text-gray-700' }
+            const results = checkResults[check.id] || []
+            const lastResult = results[0]
+            const isRunning = runningCheckId === check.id
+
+            return (
+              <div key={check.id} className="bg-white rounded-xl border border-gray-200 p-5">
+                <div className="flex items-start justify-between">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2">
+                      <h4 className="font-medium text-gray-900">{check.title}</h4>
+                      <span className={`px-2 py-0.5 text-xs rounded ${typeMeta.color}`}>{typeMeta.label}</span>
+                      {!check.is_active && (
+                        <span className="px-2 py-0.5 text-xs rounded bg-gray-100 text-gray-500">Deaktiviert</span>
+                      )}
+                    </div>
+                    {check.description && <p className="text-sm text-gray-500 mt-1">{check.description}</p>}
+                    <div className="flex items-center gap-4 mt-2 text-xs text-gray-400">
+                      <span>Code: {check.check_code}</span>
+                      {check.target_url && <span>Ziel: {check.target_url}</span>}
+                      <span>Frequenz: {check.frequency}</span>
+                      {check.last_run_at && <span>Letzter Lauf: {new Date(check.last_run_at).toLocaleDateString('de-DE')}</span>}
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2 ml-4">
+                    {lastResult && (
+                      <span className={`px-2 py-0.5 text-xs rounded ${runStatusLabels[lastResult.run_status]?.color || ''}`}>
+                        {runStatusLabels[lastResult.run_status]?.label || lastResult.run_status}
+                      </span>
+                    )}
+                    <button onClick={() => { onRun(check.id); onLoadResults(check.id) }} disabled={isRunning}
+                      className="px-3 py-1.5 text-xs bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50">
+                      {isRunning ? 'Laeuft...' : 'Ausfuehren'}
+                    </button>
+                    <button onClick={() => onLoadResults(check.id)}
+                      className="px-3 py-1.5 text-xs border rounded-lg hover:bg-gray-50">
+                      Historie
+                    </button>
+                  </div>
+                </div>
+
+                {results.length > 0 && (
+                  <div className="mt-3 border-t pt-3">
+                    <p className="text-xs font-medium text-gray-500 mb-2">Letzte Ergebnisse</p>
+                    <div className="space-y-1">
+                      {results.slice(0, 3).map(r => (
+                        <div key={r.id} className="flex items-center gap-3 text-xs">
+                          <span className={`px-1.5 py-0.5 rounded ${runStatusLabels[r.run_status]?.color || 'bg-gray-100'}`}>
+                            {runStatusLabels[r.run_status]?.label || r.run_status}
+                          </span>
+                          <span className="text-gray-500">{new Date(r.run_at).toLocaleString('de-DE')}</span>
+                          <span className="text-gray-400">{r.duration_ms}ms</span>
+                          {r.findings_count > 0 && (
+                            <span className="text-orange-600">{r.findings_count} Findings ({r.critical_findings} krit.)</span>
+                          )}
+                          {r.summary && <span className="text-gray-600 truncate">{r.summary}</span>}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/admin-compliance/app/sdk/evidence/_components/EvidenceCard.tsx b/admin-compliance/app/sdk/evidence/_components/EvidenceCard.tsx
index a94bd48..a0f4957 100644
--- a/admin-compliance/app/sdk/evidence/_components/EvidenceCard.tsx
+++ b/admin-compliance/app/sdk/evidence/_components/EvidenceCard.tsx
@@ -1,5 +1,12 @@
 'use client'
 
+import React from 'react'
+import {
+  ConfidenceLevelBadge,
+  TruthStatusBadge,
+  GenerationModeBadge,
+  ApprovalStatusBadge,
+} from '../components/anti-fake-badges'
 import type { DisplayEvidence, DisplayEvidenceType } from './EvidenceTypes'
 
 const typeIcons: Record<DisplayEvidenceType, React.ReactNode> = {
@@ -50,16 +57,14 @@ const typeIconBg: Record<DisplayEvidenceType, string> = {
   document: 'bg-gray-100 text-gray-600',
 }
 
-export function EvidenceCard({
-  evidence,
-  onDelete,
-  onView,
-  onDownload,
-}: {
+export function EvidenceCard({ evidence, onDelete, onView, onDownload, onReview, onReject, onShowHistory }: {
   evidence: DisplayEvidence
   onDelete: () => void
   onView: () => void
   onDownload: () => void
+  onReview: () => void
+  onReject: () => void
+  onShowHistory: () => void
 }) {
   return (
     <div className={`bg-white rounded-xl border-2 p-6 ${
@@ -73,9 +78,15 @@ export function EvidenceCard({
         <div className="flex-1">
           <div className="flex items-center justify-between">
             <h3 className="text-lg font-semibold text-gray-900">{evidence.name}</h3>
-            <span className={`px-3 py-1 text-xs rounded-full ${statusColors[evidence.status]}`}>
-              {statusLabels[evidence.status]}
-            </span>
+            <div className="flex items-center gap-1.5 flex-wrap">
+              <span className={`px-3 py-1 text-xs rounded-full ${statusColors[evidence.status]}`}>
+                {statusLabels[evidence.status]}
+              </span>
+              <ConfidenceLevelBadge level={evidence.confidenceLevel} />
+              <TruthStatusBadge status={evidence.truthStatus} />
+              <GenerationModeBadge mode={evidence.generationMode} />
+              <ApprovalStatusBadge status={evidence.approvalStatus} requiresFourEyes={evidence.requiresFourEyes} />
+            </div>
           </div>
           <p className="text-sm text-gray-500 mt-1">{evidence.description}</p>
 
@@ -91,14 +102,10 @@ export function EvidenceCard({
 
           <div className="mt-3 flex items-center gap-2 flex-wrap">
             {evidence.linkedRequirements.map(req => (
-              <span key={req} className="px-2 py-0.5 text-xs bg-blue-50 text-blue-600 rounded">
-                {req}
-              </span>
+              <span key={req} className="px-2 py-0.5 text-xs bg-blue-50 text-blue-600 rounded">{req}</span>
             ))}
             {evidence.linkedControls.map(ctrl => (
-              <span key={ctrl} className="px-2 py-0.5 text-xs bg-green-50 text-green-600 rounded">
-                {ctrl}
-              </span>
+              <span key={ctrl} className="px-2 py-0.5 text-xs bg-green-50 text-green-600 rounded">{ctrl}</span>
             ))}
           </div>
         </div>
@@ -107,26 +114,34 @@ export function EvidenceCard({
       <div className="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between">
         <span className="text-sm text-gray-500">Hochgeladen von: {evidence.uploadedBy}</span>
         <div className="flex items-center gap-2">
-          <button
-            onClick={onView}
-            disabled={!evidence.fileUrl}
-            className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
-          >
+          <button onClick={onView} disabled={!evidence.fileUrl}
+            className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed">
             Anzeigen
           </button>
-          <button
-            onClick={onDownload}
-            disabled={!evidence.fileUrl}
-            className="px-3 py-1 text-sm text-purple-600 hover:bg-purple-50 rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
-          >
+          <button onClick={onDownload} disabled={!evidence.fileUrl}
+            className="px-3 py-1 text-sm text-purple-600 hover:bg-purple-50 rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed">
             Herunterladen
           </button>
-          <button
-            onClick={onDelete}
-            className="px-3 py-1 text-sm text-red-600 hover:bg-red-50 rounded-lg transition-colors"
-          >
+          <button onClick={onDelete}
+            className="px-3 py-1 text-sm text-red-600 hover:bg-red-50 rounded-lg transition-colors">
             Loeschen
           </button>
+          {(evidence.approvalStatus === 'none' || evidence.approvalStatus === 'pending_first' || evidence.approvalStatus === 'first_approved' || !evidence.approvalStatus) && evidence.approvalStatus !== 'approved' && evidence.approvalStatus !== 'rejected' && (
+            <button onClick={onReview}
+              className="px-3 py-1 text-sm text-green-600 hover:bg-green-50 rounded-lg transition-colors font-medium">
+              Reviewen
+            </button>
+          )}
+          {evidence.requiresFourEyes && evidence.approvalStatus !== 'rejected' && evidence.approvalStatus !== 'approved' && (
+            <button onClick={onReject}
+              className="px-3 py-1 text-sm text-orange-600 hover:bg-orange-50 rounded-lg transition-colors">
+              Ablehnen
+            </button>
+          )}
+          <button onClick={onShowHistory}
+            className="px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-lg transition-colors">
+            Historie
+          </button>
         </div>
       </div>
     </div>
diff --git a/admin-compliance/app/sdk/evidence/_components/EvidenceTypes.ts b/admin-compliance/app/sdk/evidence/_components/EvidenceTypes.ts
index ce3ad6a..ab37925 100644
--- a/admin-compliance/app/sdk/evidence/_components/EvidenceTypes.ts
+++ b/admin-compliance/app/sdk/evidence/_components/EvidenceTypes.ts
@@ -20,6 +20,12 @@ export interface DisplayEvidence {
   status: DisplayStatus
   fileSize: string
   fileUrl: string | null
+  // Anti-Fake-Evidence Phase 2
+  confidenceLevel: string | null
+  truthStatus: string | null
+  generationMode: string | null
+  approvalStatus: string | null
+  requiresFourEyes: boolean
 }
 
 export interface EvidenceTemplate {
@@ -37,6 +43,77 @@ export interface EvidenceTemplate {
   fileSize: string
 }
 
+export interface EvidenceCheck {
+  id: string
+  check_code: string
+  title: string
+  description: string | null
+  check_type: string
+  target_url: string | null
+  frequency: string
+  is_active: boolean
+  last_run_at: string | null
+  next_run_at: string | null
+}
+
+export interface CheckResult {
+  id: string
+  check_id: string
+  run_status: string
+  summary: string | null
+  findings_count: number
+  critical_findings: number
+  duration_ms: number
+  run_at: string
+}
+
+export interface EvidenceMapping {
+  id: string
+  evidence_id: string
+  control_code: string
+  mapping_type: string
+  verified_at: string | null
+  verified_by: string | null
+  notes: string | null
+}
+
+export interface CoverageReport {
+  total_controls: number
+  controls_with_evidence: number
+  controls_without_evidence: number
+  coverage_percent: number
+}
+
+export type EvidenceTabKey = 'evidence' | 'checks' | 'mapping' | 'report'
+
+export const CHECK_TYPE_LABELS: Record<string, { label: string; color: string }> = {
+  tls_scan: { label: 'TLS-Scan', color: 'bg-blue-100 text-blue-700' },
+  header_check: { label: 'Header-Check', color: 'bg-green-100 text-green-700' },
+  certificate_check: { label: 'Zertifikat', color: 'bg-yellow-100 text-yellow-700' },
+  dns_check: { label: 'DNS-Check', color: 'bg-purple-100 text-purple-700' },
+  api_scan: { label: 'API-Scan', color: 'bg-indigo-100 text-indigo-700' },
+  config_scan: { label: 'Config-Scan', color: 'bg-orange-100 text-orange-700' },
+  port_scan: { label: 'Port-Scan', color: 'bg-red-100 text-red-700' },
+}
+
+export const RUN_STATUS_LABELS: Record<string, { label: string; color: string }> = {
+  running: { label: 'Laeuft...', color: 'bg-blue-100 text-blue-700' },
+  passed: { label: 'Bestanden', color: 'bg-green-100 text-green-700' },
+  failed: { label: 'Fehlgeschlagen', color: 'bg-red-100 text-red-700' },
+  warning: { label: 'Warnung', color: 'bg-yellow-100 text-yellow-700' },
+  error: { label: 'Fehler', color: 'bg-red-100 text-red-700' },
+}
+
+export const confidenceFilterColors: Record<string, string> = {
+  E0: 'bg-red-200 text-red-800',
+  E1: 'bg-yellow-200 text-yellow-800',
+  E2: 'bg-blue-200 text-blue-800',
+  E3: 'bg-green-200 text-green-800',
+  E4: 'bg-emerald-200 text-emerald-800',
+}
+
+export const CHECK_API = '/api/sdk/v1/compliance/evidence-checks'
+
 export function mapEvidenceTypeToDisplay(type: EvidenceType): DisplayEvidenceType {
   switch (type) {
     case 'DOCUMENT': return 'document'
diff --git a/admin-compliance/app/sdk/evidence/_components/MappingTab.tsx b/admin-compliance/app/sdk/evidence/_components/MappingTab.tsx
new file mode 100644
index 0000000..8a9771a
--- /dev/null
+++ b/admin-compliance/app/sdk/evidence/_components/MappingTab.tsx
@@ -0,0 +1,73 @@
+'use client'
+
+import type { EvidenceMapping, CoverageReport } from './EvidenceTypes'
+
+export function MappingTab({
+  mappings,
+  coverageReport,
+}: {
+  mappings: EvidenceMapping[]
+  coverageReport: CoverageReport | null
+}) {
+  return (
+    <>
+      {coverageReport && (
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <div className="bg-white rounded-xl border border-gray-200 p-6">
+            <p className="text-sm text-gray-500">Gesamt Controls</p>
+            <p className="text-3xl font-bold text-gray-900">{coverageReport.total_controls}</p>
+          </div>
+          <div className="bg-white rounded-xl border border-green-200 p-6">
+            <p className="text-sm text-green-600">Mit Nachweis</p>
+            <p className="text-3xl font-bold text-green-600">{coverageReport.controls_with_evidence}</p>
+          </div>
+          <div className="bg-white rounded-xl border border-red-200 p-6">
+            <p className="text-sm text-red-600">Ohne Nachweis</p>
+            <p className="text-3xl font-bold text-red-600">{coverageReport.controls_without_evidence}</p>
+          </div>
+          <div className="bg-white rounded-xl border border-purple-200 p-6">
+            <p className="text-sm text-purple-600">Abdeckung</p>
+            <p className="text-3xl font-bold text-purple-600">{coverageReport.coverage_percent.toFixed(0)}%</p>
+          </div>
+        </div>
+      )}
+
+      <div className="bg-white rounded-xl shadow-sm border overflow-hidden">
+        <div className="p-4 border-b">
+          <h3 className="font-semibold text-gray-900">Evidence-Control-Verknuepfungen ({mappings.length})</h3>
+        </div>
+        {mappings.length === 0 ? (
+          <div className="p-8 text-center text-gray-500">
+            <p>Noch keine Verknuepfungen erstellt.</p>
+            <p className="text-sm mt-1">Fuehren Sie automatische Checks aus, um Nachweise automatisch mit Controls zu verknuepfen.</p>
+          </div>
+        ) : (
+          <table className="w-full">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Control</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Evidence</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Typ</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Verifiziert</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200">
+              {mappings.map(m => (
+                <tr key={m.id} className="hover:bg-gray-50">
+                  <td className="px-4 py-3 font-mono text-sm text-purple-600">{m.control_code}</td>
+                  <td className="px-4 py-3 text-sm text-gray-700">{m.evidence_id.slice(0, 8)}...</td>
+                  <td className="px-4 py-3">
+                    <span className="px-2 py-0.5 text-xs rounded bg-blue-100 text-blue-700">{m.mapping_type}</span>
+                  </td>
+                  <td className="px-4 py-3 text-sm text-gray-500">
+                    {m.verified_at ? `${new Date(m.verified_at).toLocaleDateString('de-DE')} von ${m.verified_by || '—'}` : 'Ausstehend'}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+    </>
+  )
+}
diff --git a/admin-compliance/app/sdk/evidence/_components/RejectModal.tsx b/admin-compliance/app/sdk/evidence/_components/RejectModal.tsx
new file mode 100644
index 0000000..349a24d
--- /dev/null
+++ b/admin-compliance/app/sdk/evidence/_components/RejectModal.tsx
@@ -0,0 +1,76 @@
+'use client'
+
+import { useState } from 'react'
+import type { DisplayEvidence } from './EvidenceTypes'
+
+export function RejectModal({ evidence, onClose, onSuccess }: {
+  evidence: DisplayEvidence
+  onClose: () => void
+  onSuccess: () => void
+}) {
+  const [reviewedBy, setReviewedBy] = useState('')
+  const [rejectionReason, setRejectionReason] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = async () => {
+    if (!reviewedBy.trim()) { setError('Bitte E-Mail-Adresse angeben'); return }
+    if (!rejectionReason.trim()) { setError('Bitte Ablehnungsgrund angeben'); return }
+    setSubmitting(true)
+    setError(null)
+    try {
+      const res = await fetch(`/api/sdk/v1/compliance/evidence/${evidence.id}/reject`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ reviewed_by: reviewedBy, rejection_reason: rejectionReason }),
+      })
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({ detail: 'Ablehnung fehlgeschlagen' }))
+        throw new Error(typeof err.detail === 'string' ? err.detail : JSON.stringify(err.detail))
+      }
+      onSuccess()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
+      <div className="bg-white rounded-2xl shadow-xl w-full max-w-lg mx-4 p-6" onClick={e => e.stopPropagation()}>
+        <h2 className="text-xl font-bold text-gray-900 mb-4">Evidence Ablehnen</h2>
+        <p className="text-sm text-gray-500 mb-4">{evidence.name}</p>
+
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-gray-700 mb-1">Reviewer (E-Mail)</label>
+          <input type="email" value={reviewedBy} onChange={e => setReviewedBy(e.target.value)}
+            placeholder="reviewer@unternehmen.de"
+            className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500 focus:border-transparent" />
+        </div>
+
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-gray-700 mb-1">Ablehnungsgrund</label>
+          <textarea value={rejectionReason} onChange={e => setRejectionReason(e.target.value)}
+            placeholder="Bitte beschreiben Sie den Grund fuer die Ablehnung..."
+            rows={4}
+            className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500 focus:border-transparent resize-none" />
+        </div>
+
+        {error && (
+          <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">{error}</div>
+        )}
+
+        <div className="flex justify-end gap-3">
+          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
+            Abbrechen
+          </button>
+          <button onClick={handleSubmit} disabled={submitting}
+            className="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50">
+            {submitting ? 'Wird abgelehnt...' : 'Ablehnen'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/evidence/_components/ReportTab.tsx b/admin-compliance/app/sdk/evidence/_components/ReportTab.tsx
new file mode 100644
index 0000000..40a8764
--- /dev/null
+++ b/admin-compliance/app/sdk/evidence/_components/ReportTab.tsx
@@ -0,0 +1,88 @@
+'use client'
+
+import type { EvidenceCheck, CoverageReport } from './EvidenceTypes'
+
+export function ReportTab({
+  coverageReport,
+  checks,
+  displayEvidenceLength,
+  validCount,
+  expiredCount,
+  pendingCount,
+}: {
+  coverageReport: CoverageReport | null
+  checks: EvidenceCheck[]
+  displayEvidenceLength: number
+  validCount: number
+  expiredCount: number
+  pendingCount: number
+}) {
+  return (
+    <div className="bg-white rounded-xl shadow-sm border p-6">
+      <h3 className="text-lg font-semibold text-gray-900 mb-6">Evidence Coverage Report</h3>
+
+      {!coverageReport ? (
+        <div className="flex justify-center py-12">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
+        </div>
+      ) : (
+        <>
+          <div className="mb-8">
+            <div className="flex items-center justify-between mb-2">
+              <span className="text-sm font-medium text-gray-700">Gesamt-Abdeckung</span>
+              <span className={`text-2xl font-bold ${
+                coverageReport.coverage_percent >= 80 ? 'text-green-600' :
+                coverageReport.coverage_percent >= 50 ? 'text-yellow-600' : 'text-red-600'
+              }`}>
+                {coverageReport.coverage_percent.toFixed(1)}%
+              </span>
+            </div>
+            <div className="h-4 bg-gray-200 rounded-full overflow-hidden">
+              <div
+                className={`h-full transition-all duration-500 ${
+                  coverageReport.coverage_percent >= 80 ? 'bg-green-500' :
+                  coverageReport.coverage_percent >= 50 ? 'bg-yellow-500' : 'bg-red-500'
+                }`}
+                style={{ width: `${coverageReport.coverage_percent}%` }}
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+            <div className="p-4 bg-gray-50 rounded-lg text-center">
+              <p className="text-3xl font-bold text-gray-900">{coverageReport.total_controls}</p>
+              <p className="text-sm text-gray-500">Controls gesamt</p>
+            </div>
+            <div className="p-4 bg-green-50 rounded-lg text-center">
+              <p className="text-3xl font-bold text-green-600">{coverageReport.controls_with_evidence}</p>
+              <p className="text-sm text-green-600">Mit Nachweis belegt</p>
+            </div>
+            <div className="p-4 bg-red-50 rounded-lg text-center">
+              <p className="text-3xl font-bold text-red-600">{coverageReport.controls_without_evidence}</p>
+              <p className="text-sm text-red-600">Ohne Nachweis</p>
+            </div>
+          </div>
+
+          <div className="border-t pt-6">
+            <h4 className="font-medium text-gray-900 mb-3">Automatische Checks</h4>
+            <div className="flex items-center gap-4 text-sm text-gray-600">
+              <span>{checks.length} Check-Definitionen</span>
+              <span>{checks.filter(c => c.is_active).length} aktiv</span>
+              <span>{checks.filter(c => c.last_run_at).length} mindestens 1x ausgefuehrt</span>
+            </div>
+          </div>
+
+          <div className="border-t pt-6 mt-6">
+            <h4 className="font-medium text-gray-900 mb-3">Nachweise</h4>
+            <div className="flex items-center gap-4 text-sm text-gray-600">
+              <span>{displayEvidenceLength} Nachweise gesamt</span>
+              <span className="text-green-600">{validCount} gueltig</span>
+              <span className="text-red-600">{expiredCount} abgelaufen</span>
+              <span className="text-yellow-600">{pendingCount} ausstehend</span>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/evidence/_components/ReviewModal.tsx b/admin-compliance/app/sdk/evidence/_components/ReviewModal.tsx
new file mode 100644
index 0000000..52dfdb8
--- /dev/null
+++ b/admin-compliance/app/sdk/evidence/_components/ReviewModal.tsx
@@ -0,0 +1,125 @@
+'use client'
+
+import { useState } from 'react'
+import type { DisplayEvidence } from './EvidenceTypes'
+
+export function ReviewModal({ evidence, onClose, onSuccess }: {
+  evidence: DisplayEvidence
+  onClose: () => void
+  onSuccess: () => void
+}) {
+  const [confidenceLevel, setConfidenceLevel] = useState(evidence.confidenceLevel || 'E1')
+  const [truthStatus, setTruthStatus] = useState(evidence.truthStatus || 'uploaded')
+  const [reviewedBy, setReviewedBy] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = async () => {
+    if (!reviewedBy.trim()) { setError('Bitte E-Mail-Adresse angeben'); return }
+    setSubmitting(true)
+    setError(null)
+    try {
+      const res = await fetch(`/api/sdk/v1/compliance/evidence/${evidence.id}/review`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ confidence_level: confidenceLevel, truth_status: truthStatus, reviewed_by: reviewedBy }),
+      })
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({ detail: 'Review fehlgeschlagen' }))
+        throw new Error(typeof err.detail === 'string' ? err.detail : JSON.stringify(err.detail))
+      }
+      onSuccess()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const confidenceLevels = [
+    { value: 'E0', label: 'E0 — Generiert' },
+    { value: 'E1', label: 'E1 — Manuell' },
+    { value: 'E2', label: 'E2 — Intern validiert' },
+    { value: 'E3', label: 'E3 — System-beobachtet' },
+    { value: 'E4', label: 'E4 — Extern auditiert' },
+  ]
+
+  const truthStatuses = [
+    { value: 'generated', label: 'Generiert' },
+    { value: 'uploaded', label: 'Hochgeladen' },
+    { value: 'observed', label: 'Beobachtet' },
+    { value: 'validated', label: 'Validiert' },
+    { value: 'audited', label: 'Auditiert' },
+  ]
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
+      <div className="bg-white rounded-2xl shadow-xl w-full max-w-lg mx-4 p-6" onClick={e => e.stopPropagation()}>
+        <h2 className="text-xl font-bold text-gray-900 mb-4">Evidence Reviewen</h2>
+        <p className="text-sm text-gray-500 mb-4">{evidence.name}</p>
+
+        <div className="mb-4 p-3 bg-gray-50 rounded-lg text-sm space-y-1">
+          <div className="flex justify-between">
+            <span className="text-gray-500">Aktuelles Confidence-Level:</span>
+            <span className="font-medium">{evidence.confidenceLevel || '—'}</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="text-gray-500">Aktueller Truth-Status:</span>
+            <span className="font-medium">{evidence.truthStatus || '—'}</span>
+          </div>
+        </div>
+
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-gray-700 mb-1">Neues Confidence-Level</label>
+          <select value={confidenceLevel} onChange={e => setConfidenceLevel(e.target.value)}
+            className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent">
+            {confidenceLevels.map(l => <option key={l.value} value={l.value}>{l.label}</option>)}
+          </select>
+        </div>
+
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-gray-700 mb-1">Neuer Truth-Status</label>
+          <select value={truthStatus} onChange={e => setTruthStatus(e.target.value)}
+            className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent">
+            {truthStatuses.map(s => <option key={s.value} value={s.value}>{s.label}</option>)}
+          </select>
+        </div>
+
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-gray-700 mb-1">Reviewer (E-Mail)</label>
+          <input type="email" value={reviewedBy} onChange={e => setReviewedBy(e.target.value)}
+            placeholder="reviewer@unternehmen.de"
+            className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
+        </div>
+
+        {evidence.requiresFourEyes && evidence.approvalStatus !== 'approved' && (
+          <div className="mb-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
+            <div className="flex items-start gap-2">
+              <svg className="w-5 h-5 text-yellow-600 mt-0.5 flex-shrink-0" 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>
+              <div className="text-sm text-yellow-800">
+                <p className="font-medium">4-Augen-Prinzip aktiv</p>
+                <p>Dieser Nachweis erfordert eine zusaetzliche Freigabe durch einen zweiten Reviewer.</p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {error && (
+          <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">{error}</div>
+        )}
+
+        <div className="flex justify-end gap-3">
+          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
+            Abbrechen
+          </button>
+          <button onClick={handleSubmit} disabled={submitting}
+            className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50">
+            {submitting ? 'Wird gespeichert...' : 'Review abschliessen'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/evidence/_hooks/useEvidence.ts b/admin-compliance/app/sdk/evidence/_hooks/useEvidence.ts
index a32dd93..95d5aa1 100644
--- a/admin-compliance/app/sdk/evidence/_hooks/useEvidence.ts
+++ b/admin-compliance/app/sdk/evidence/_hooks/useEvidence.ts
@@ -4,13 +4,28 @@ import { useState, useEffect, useRef } from 'react'
 import { useSDK, Evidence as SDKEvidence, EvidenceType } from '@/lib/sdk'
 import {
   DisplayEvidence,
+  EvidenceCheck,
+  CheckResult,
+  EvidenceMapping,
+  CoverageReport,
+  EvidenceTabKey,
   mapEvidenceTypeToDisplay,
   getEvidenceStatus,
   evidenceTemplates,
+  CHECK_API,
 } from '../_components/EvidenceTypes'
 
+type AntiFakeMeta = Record<string, {
+  confidenceLevel: string | null
+  truthStatus: string | null
+  generationMode: string | null
+  approvalStatus: string | null
+  requiresFourEyes: boolean
+}>
+
 export function useEvidence() {
   const { state, dispatch } = useSDK()
+  const [activeTab, setActiveTab] = useState<EvidenceTabKey>('evidence')
   const [filter, setFilter] = useState<string>('all')
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -19,6 +34,25 @@ export function useEvidence() {
   const [page, setPage] = useState(1)
   const [pageSize] = useState(20)
   const [total, setTotal] = useState(0)
+  const [antiFakeMeta, setAntiFakeMeta] = useState<AntiFakeMeta>({})
+
+  // Evidence Checks state
+  const [checks, setChecks] = useState<EvidenceCheck[]>([])
+  const [checksLoading, setChecksLoading] = useState(false)
+  const [runningCheckId, setRunningCheckId] = useState<string | null>(null)
+  const [checkResults, setCheckResults] = useState<Record<string, CheckResult[]>>({})
+
+  // Mappings state
+  const [mappings, setMappings] = useState<EvidenceMapping[]>([])
+  const [coverageReport, setCoverageReport] = useState<CoverageReport | null>(null)
+  const [seedingChecks, setSeedingChecks] = useState(false)
+
+  // Phase 3: Review/Reject/AuditTrail state
+  const [reviewEvidence, setReviewEvidence] = useState<DisplayEvidence | null>(null)
+  const [rejectEvidence, setRejectEvidence] = useState<DisplayEvidence | null>(null)
+  const [auditTrailId, setAuditTrailId] = useState<string | null>(null)
+  const [confidenceFilter, setConfidenceFilter] = useState<string | null>(null)
+  const [refreshKey, setRefreshKey] = useState(0)
 
   useEffect(() => {
     const fetchEvidence = async () => {
@@ -30,18 +64,30 @@ export function useEvidence() {
           if (data.total !== undefined) setTotal(data.total)
           const backendEvidence = data.evidence || data
           if (Array.isArray(backendEvidence) && backendEvidence.length > 0) {
-            const mapped: SDKEvidence[] = backendEvidence.map((e: Record<string, unknown>) => ({
-              id: (e.id || '') as string,
-              controlId: (e.control_id || '') as string,
-              type: ((e.evidence_type || 'DOCUMENT') as string).toUpperCase() as EvidenceType,
-              name: (e.title || e.name || '') as string,
-              description: (e.description || '') as string,
-              fileUrl: (e.artifact_url || null) as string | null,
-              validFrom: e.valid_from ? new Date(e.valid_from as string) : new Date(),
-              validUntil: e.valid_until ? new Date(e.valid_until as string) : null,
-              uploadedBy: (e.uploaded_by || 'System') as string,
-              uploadedAt: e.created_at ? new Date(e.created_at as string) : new Date(),
-            }))
+            const metaMap: AntiFakeMeta = {}
+            const mapped: SDKEvidence[] = backendEvidence.map((e: Record<string, unknown>) => {
+              const id = (e.id || '') as string
+              metaMap[id] = {
+                confidenceLevel: (e.confidence_level || null) as string | null,
+                truthStatus: (e.truth_status || null) as string | null,
+                generationMode: (e.generation_mode || null) as string | null,
+                approvalStatus: (e.approval_status || null) as string | null,
+                requiresFourEyes: !!e.requires_four_eyes,
+              }
+              return {
+                id,
+                controlId: (e.control_id || '') as string,
+                type: ((e.evidence_type || 'DOCUMENT') as string).toUpperCase() as EvidenceType,
+                name: (e.title || e.name || '') as string,
+                description: (e.description || '') as string,
+                fileUrl: (e.artifact_url || null) as string | null,
+                validFrom: e.valid_from ? new Date(e.valid_from as string) : new Date(),
+                validUntil: e.valid_until ? new Date(e.valid_until as string) : null,
+                uploadedBy: (e.uploaded_by || 'System') as string,
+                uploadedAt: e.created_at ? new Date(e.created_at as string) : new Date(),
+              }
+            })
+            setAntiFakeMeta(metaMap)
             dispatch({ type: 'SET_STATE', payload: { evidence: mapped } })
             setError(null)
             return
@@ -58,20 +104,16 @@ export function useEvidence() {
     const loadFromTemplates = () => {
       if (state.evidence.length > 0) return
       if (state.controls.length === 0) return
-
       const relevantEvidence = evidenceTemplates.filter(e =>
         state.controls.some(c => c.id === e.controlId || e.linkedControls.includes(c.id))
       )
-
       const now = new Date()
       relevantEvidence.forEach(template => {
         const validFrom = new Date(now)
         validFrom.setMonth(validFrom.getMonth() - 1)
-
         const validUntil = template.validityDays > 0
           ? new Date(validFrom.getTime() + template.validityDays * 24 * 60 * 60 * 1000)
           : null
-
         const sdkEvidence: SDKEvidence = {
           id: template.id,
           controlId: template.controlId,
@@ -89,10 +131,11 @@ export function useEvidence() {
     }
 
     fetchEvidence()
-  }, [page, pageSize]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [page, pageSize, refreshKey]) // eslint-disable-line react-hooks/exhaustive-deps
 
   const displayEvidence: DisplayEvidence[] = state.evidence.map(ev => {
     const template = evidenceTemplates.find(t => t.id === ev.id)
+    const meta = antiFakeMeta[ev.id]
     return {
       id: ev.id,
       name: ev.name,
@@ -109,12 +152,18 @@ export function useEvidence() {
       status: getEvidenceStatus(ev.validUntil),
       fileSize: template?.fileSize || 'Unbekannt',
       fileUrl: ev.fileUrl,
+      confidenceLevel: meta?.confidenceLevel || null,
+      truthStatus: meta?.truthStatus || null,
+      generationMode: meta?.generationMode || null,
+      approvalStatus: meta?.approvalStatus || null,
+      requiresFourEyes: meta?.requiresFourEyes || false,
     }
   })
 
-  const filteredEvidence = filter === 'all'
+  const filteredEvidence = (filter === 'all'
     ? displayEvidence
     : displayEvidence.filter(e => e.status === filter || e.displayType === filter)
+  ).filter(e => !confidenceFilter || e.confidenceLevel === confidenceFilter)
 
   const validCount = displayEvidence.filter(e => e.status === 'valid').length
   const expiredCount = displayEvidence.filter(e => e.status === 'expired').length
@@ -125,9 +174,7 @@ export function useEvidence() {
     dispatch({ type: 'DELETE_EVIDENCE', payload: evidenceId })
     try {
       await fetch(`/api/sdk/v1/compliance/evidence/${evidenceId}`, { method: 'DELETE' })
-    } catch {
-      // Silently fail — SDK state is already updated
-    }
+    } catch { /* Silently fail */ }
   }
 
   const handleUpload = async (file: File) => {
@@ -135,17 +182,10 @@ export function useEvidence() {
     setError(null)
     try {
       const controlId = state.controls.length > 0 ? state.controls[0].id : 'GENERIC'
-      const params = new URLSearchParams({
-        control_id: controlId,
-        evidence_type: 'document',
-        title: file.name,
-      })
+      const params = new URLSearchParams({ control_id: controlId, evidence_type: 'document', title: file.name })
       const formData = new FormData()
       formData.append('file', file)
-      const res = await fetch(`/api/sdk/v1/compliance/evidence/upload?${params}`, {
-        method: 'POST',
-        body: formData,
-      })
+      const res = await fetch(`/api/sdk/v1/compliance/evidence/upload?${params}`, { method: 'POST', body: formData })
       if (!res.ok) {
         const errData = await res.json().catch(() => ({ error: 'Upload fehlgeschlagen' }))
         throw new Error(errData.error || errData.detail || 'Upload fehlgeschlagen')
@@ -153,7 +193,7 @@ export function useEvidence() {
       const data = await res.json()
       const newEvidence: SDKEvidence = {
         id: data.id || `ev-${Date.now()}`,
-        controlId: controlId,
+        controlId,
         type: 'DOCUMENT',
         name: file.name,
         description: `Hochgeladen am ${new Date().toLocaleDateString('de-DE')}`,
@@ -172,11 +212,8 @@ export function useEvidence() {
   }
 
   const handleView = (ev: DisplayEvidence) => {
-    if (ev.fileUrl) {
-      window.open(ev.fileUrl, '_blank')
-    } else {
-      alert('Keine Datei vorhanden')
-    }
+    if (ev.fileUrl) window.open(ev.fileUrl, '_blank')
+    else alert('Keine Datei vorhanden')
   }
 
   const handleDownload = (ev: DisplayEvidence) => {
@@ -189,20 +226,73 @@ export function useEvidence() {
     document.body.removeChild(a)
   }
 
-  const handleUploadClick = () => {
-    fileInputRef.current?.click()
-  }
+  const handleUploadClick = () => fileInputRef.current?.click()
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0]
-    if (file) {
-      handleUpload(file)
-      e.target.value = ''
-    }
+    if (file) { handleUpload(file); e.target.value = '' }
   }
 
+  const loadChecks = async () => {
+    setChecksLoading(true)
+    try {
+      const res = await fetch(`${CHECK_API}?limit=50`)
+      if (res.ok) { const data = await res.json(); setChecks(data.checks || []) }
+    } catch { /* silent */ }
+    finally { setChecksLoading(false) }
+  }
+
+  const runCheck = async (checkId: string) => {
+    setRunningCheckId(checkId)
+    try {
+      const res = await fetch(`${CHECK_API}/${checkId}/run`, { method: 'POST' })
+      if (res.ok) {
+        const result = await res.json()
+        setCheckResults(prev => ({ ...prev, [checkId]: [result, ...(prev[checkId] || [])].slice(0, 5) }))
+        loadChecks()
+      }
+    } catch { /* silent */ }
+    finally { setRunningCheckId(null) }
+  }
+
+  const loadCheckResults = async (checkId: string) => {
+    try {
+      const res = await fetch(`${CHECK_API}/${checkId}/results?limit=5`)
+      if (res.ok) { const data = await res.json(); setCheckResults(prev => ({ ...prev, [checkId]: data.results || [] })) }
+    } catch { /* silent */ }
+  }
+
+  const seedChecks = async () => {
+    setSeedingChecks(true)
+    try { await fetch(`${CHECK_API}/seed`, { method: 'POST' }); loadChecks() }
+    catch { /* silent */ }
+    finally { setSeedingChecks(false) }
+  }
+
+  const loadMappings = async () => {
+    try {
+      const res = await fetch(`${CHECK_API}/mappings`)
+      if (res.ok) { const data = await res.json(); setMappings(data.mappings || []) }
+    } catch { /* silent */ }
+  }
+
+  const loadCoverageReport = async () => {
+    try {
+      const res = await fetch(`${CHECK_API}/mappings/report`)
+      if (res.ok) setCoverageReport(await res.json())
+    } catch { /* silent */ }
+  }
+
+  useEffect(() => {
+    if (activeTab === 'checks' && checks.length === 0) loadChecks()
+    if (activeTab === 'mapping') { loadMappings(); loadCoverageReport() }
+    if (activeTab === 'report') loadCoverageReport()
+  }, [activeTab]) // eslint-disable-line react-hooks/exhaustive-deps
+
   return {
     state,
+    activeTab,
+    setActiveTab,
     filter,
     setFilter,
     loading,
@@ -219,10 +309,29 @@ export function useEvidence() {
     validCount,
     expiredCount,
     pendingCount,
+    confidenceFilter,
+    setConfidenceFilter,
+    reviewEvidence,
+    setReviewEvidence,
+    rejectEvidence,
+    setRejectEvidence,
+    auditTrailId,
+    setAuditTrailId,
+    setRefreshKey,
+    checks,
+    checksLoading,
+    checkResults,
+    runningCheckId,
+    seedingChecks,
+    mappings,
+    coverageReport,
     handleDelete,
     handleView,
     handleDownload,
     handleUploadClick,
     handleFileChange,
+    runCheck,
+    loadCheckResults,
+    seedChecks,
   }
 }
diff --git a/admin-compliance/app/sdk/evidence/page.tsx b/admin-compliance/app/sdk/evidence/page.tsx
index 9437ff7..38dd43d 100644
--- a/admin-compliance/app/sdk/evidence/page.tsx
+++ b/admin-compliance/app/sdk/evidence/page.tsx
@@ -2,1096 +2,38 @@
 
 import React from 'react'
 import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
-import {
-  ConfidenceLevelBadge,
-  TruthStatusBadge,
-  GenerationModeBadge,
-  ApprovalStatusBadge,
-} from './components/anti-fake-badges'
+import { EvidenceCard } from './_components/EvidenceCard'
+import { LoadingSkeleton } from './_components/LoadingSkeleton'
+import { ReviewModal } from './_components/ReviewModal'
+import { RejectModal } from './_components/RejectModal'
+import { AuditTrailPanel } from './_components/AuditTrailPanel'
+import { ChecksTab } from './_components/ChecksTab'
+import { MappingTab } from './_components/MappingTab'
+import { ReportTab } from './_components/ReportTab'
+import { confidenceFilterColors } from './_components/EvidenceTypes'
+import { useEvidence } from './_hooks/useEvidence'
 
-// =============================================================================
-// TYPES
-// =============================================================================
-
-type DisplayEvidenceType = 'document' | 'screenshot' | 'log' | 'audit-report' | 'certificate'
-type DisplayFormat = 'pdf' | 'image' | 'text' | 'json'
-type DisplayStatus = 'valid' | 'expired' | 'pending-review'
-
-interface DisplayEvidence {
-  id: string
-  name: string
-  description: string
-  displayType: DisplayEvidenceType
-  format: DisplayFormat
-  controlId: string
-  linkedRequirements: string[]
-  linkedControls: string[]
-  uploadedBy: string
-  uploadedAt: Date
-  validFrom: Date
-  validUntil: Date | null
-  status: DisplayStatus
-  fileSize: string
-  fileUrl: string | null
-  // Anti-Fake-Evidence Phase 2
-  confidenceLevel: string | null
-  truthStatus: string | null
-  generationMode: string | null
-  approvalStatus: string | null
-  requiresFourEyes: boolean
-}
-
-// =============================================================================
-// HELPER FUNCTIONS
-// =============================================================================
-
-function mapEvidenceTypeToDisplay(type: EvidenceType): DisplayEvidenceType {
-  switch (type) {
-    case 'DOCUMENT': return 'document'
-    case 'SCREENSHOT': return 'screenshot'
-    case 'LOG': return 'log'
-    case 'CERTIFICATE': return 'certificate'
-    case 'AUDIT_REPORT': return 'audit-report'
-    default: return 'document'
-  }
-}
-
-function getEvidenceStatus(validUntil: Date | null): DisplayStatus {
-  if (!validUntil) return 'pending-review'
-  const now = new Date()
-  if (validUntil < now) return 'expired'
-  return 'valid'
-}
-
-// =============================================================================
-// FALLBACK TEMPLATES
-// =============================================================================
-
-interface EvidenceTemplate {
-  id: string
-  name: string
-  description: string
-  type: EvidenceType
-  displayType: DisplayEvidenceType
-  format: DisplayFormat
-  controlId: string
-  linkedRequirements: string[]
-  linkedControls: string[]
-  uploadedBy: string
-  validityDays: number
-  fileSize: string
-}
-
-const evidenceTemplates: EvidenceTemplate[] = [
-  {
-    id: 'ev-dse-001',
-    name: 'Datenschutzerklaerung v2.3',
-    description: 'Aktuelle Datenschutzerklaerung fuer Website und App',
-    type: 'DOCUMENT',
-    displayType: 'document',
-    format: 'pdf',
-    controlId: 'ctrl-org-001',
-    linkedRequirements: ['req-gdpr-13', 'req-gdpr-14'],
-    linkedControls: ['ctrl-org-001'],
-    uploadedBy: 'DSB',
-    validityDays: 365,
-    fileSize: '245 KB',
-  },
-  {
-    id: 'ev-pentest-001',
-    name: 'Penetrationstest Report Q4/2024',
-    description: 'Externer Penetrationstest durch Security-Partner',
-    type: 'AUDIT_REPORT',
-    displayType: 'audit-report',
-    format: 'pdf',
-    controlId: 'ctrl-tom-001',
-    linkedRequirements: ['req-gdpr-32', 'req-iso-a12'],
-    linkedControls: ['ctrl-tom-001', 'ctrl-tom-002', 'ctrl-det-001'],
-    uploadedBy: 'IT Security Team',
-    validityDays: 365,
-    fileSize: '2.1 MB',
-  },
-  {
-    id: 'ev-iso-cert',
-    name: 'ISO 27001 Zertifikat',
-    description: 'Zertifizierung des ISMS',
-    type: 'CERTIFICATE',
-    displayType: 'certificate',
-    format: 'pdf',
-    controlId: 'ctrl-tom-001',
-    linkedRequirements: ['req-iso-4.1', 'req-iso-5.1'],
-    linkedControls: [],
-    uploadedBy: 'QM Abteilung',
-    validityDays: 365,
-    fileSize: '156 KB',
-  },
-  {
-    id: 'ev-schulung-001',
-    name: 'Schulungsnachweis Datenschutz 2024',
-    description: 'Teilnehmerliste und Schulungsinhalt',
-    type: 'DOCUMENT',
-    displayType: 'document',
-    format: 'pdf',
-    controlId: 'ctrl-org-001',
-    linkedRequirements: ['req-gdpr-39'],
-    linkedControls: ['ctrl-org-001'],
-    uploadedBy: 'HR Team',
-    validityDays: 365,
-    fileSize: '890 KB',
-  },
-  {
-    id: 'ev-rbac-001',
-    name: 'Access Control Screenshot',
-    description: 'Nachweis der RBAC-Konfiguration',
-    type: 'SCREENSHOT',
-    displayType: 'screenshot',
-    format: 'image',
-    controlId: 'ctrl-tom-001',
-    linkedRequirements: ['req-gdpr-32'],
-    linkedControls: ['ctrl-tom-001'],
-    uploadedBy: 'Admin',
-    validityDays: 0,
-    fileSize: '1.2 MB',
-  },
-  {
-    id: 'ev-log-001',
-    name: 'Audit Log Export',
-    description: 'Monatlicher Audit-Log Export',
-    type: 'LOG',
-    displayType: 'log',
-    format: 'json',
-    controlId: 'ctrl-det-001',
-    linkedRequirements: ['req-gdpr-32'],
-    linkedControls: ['ctrl-det-001'],
-    uploadedBy: 'System',
-    validityDays: 90,
-    fileSize: '4.5 MB',
-  },
+const evidenceTabs = [
+  { key: 'evidence' as const, label: 'Nachweise' },
+  { key: 'checks' as const, label: 'Automatische Checks' },
+  { key: 'mapping' as const, label: 'Control-Mapping' },
+  { key: 'report' as const, label: 'Report' },
 ]
 
-// =============================================================================
-// COMPONENTS
-// =============================================================================
-
-// =============================================================================
-// CONFIDENCE FILTER COLORS (matching anti-fake-badges)
-// =============================================================================
-
-const confidenceFilterColors: Record<string, string> = {
-  E0: 'bg-red-200 text-red-800',
-  E1: 'bg-yellow-200 text-yellow-800',
-  E2: 'bg-blue-200 text-blue-800',
-  E3: 'bg-green-200 text-green-800',
-  E4: 'bg-emerald-200 text-emerald-800',
-}
-
-// =============================================================================
-// REVIEW MODAL
-// =============================================================================
-
-function ReviewModal({ evidence, onClose, onSuccess }: { evidence: DisplayEvidence; onClose: () => void; onSuccess: () => void }) {
-  const [confidenceLevel, setConfidenceLevel] = useState(evidence.confidenceLevel || 'E1')
-  const [truthStatus, setTruthStatus] = useState(evidence.truthStatus || 'uploaded')
-  const [reviewedBy, setReviewedBy] = useState('')
-  const [submitting, setSubmitting] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
-  const handleSubmit = async () => {
-    if (!reviewedBy.trim()) { setError('Bitte E-Mail-Adresse angeben'); return }
-    setSubmitting(true)
-    setError(null)
-    try {
-      const res = await fetch(`/api/sdk/v1/compliance/evidence/${evidence.id}/review`, {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ confidence_level: confidenceLevel, truth_status: truthStatus, reviewed_by: reviewedBy }),
-      })
-      if (!res.ok) {
-        const err = await res.json().catch(() => ({ detail: 'Review fehlgeschlagen' }))
-        throw new Error(typeof err.detail === 'string' ? err.detail : JSON.stringify(err.detail))
-      }
-      onSuccess()
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
-    } finally {
-      setSubmitting(false)
-    }
-  }
-
-  const confidenceLevels = [
-    { value: 'E0', label: 'E0 — Generiert' },
-    { value: 'E1', label: 'E1 — Manuell' },
-    { value: 'E2', label: 'E2 — Intern validiert' },
-    { value: 'E3', label: 'E3 — System-beobachtet' },
-    { value: 'E4', label: 'E4 — Extern auditiert' },
-  ]
-
-  const truthStatuses = [
-    { value: 'generated', label: 'Generiert' },
-    { value: 'uploaded', label: 'Hochgeladen' },
-    { value: 'observed', label: 'Beobachtet' },
-    { value: 'validated', label: 'Validiert' },
-    { value: 'audited', label: 'Auditiert' },
-  ]
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
-      <div className="bg-white rounded-2xl shadow-xl w-full max-w-lg mx-4 p-6" onClick={e => e.stopPropagation()}>
-        <h2 className="text-xl font-bold text-gray-900 mb-4">Evidence Reviewen</h2>
-        <p className="text-sm text-gray-500 mb-4">{evidence.name}</p>
-
-        {/* Current values */}
-        <div className="mb-4 p-3 bg-gray-50 rounded-lg text-sm space-y-1">
-          <div className="flex justify-between">
-            <span className="text-gray-500">Aktuelles Confidence-Level:</span>
-            <span className="font-medium">{evidence.confidenceLevel || '—'}</span>
-          </div>
-          <div className="flex justify-between">
-            <span className="text-gray-500">Aktueller Truth-Status:</span>
-            <span className="font-medium">{evidence.truthStatus || '—'}</span>
-          </div>
-        </div>
-
-        {/* New confidence level */}
-        <div className="mb-4">
-          <label className="block text-sm font-medium text-gray-700 mb-1">Neues Confidence-Level</label>
-          <select value={confidenceLevel} onChange={e => setConfidenceLevel(e.target.value)}
-            className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent">
-            {confidenceLevels.map(l => <option key={l.value} value={l.value}>{l.label}</option>)}
-          </select>
-        </div>
-
-        {/* New truth status */}
-        <div className="mb-4">
-          <label className="block text-sm font-medium text-gray-700 mb-1">Neuer Truth-Status</label>
-          <select value={truthStatus} onChange={e => setTruthStatus(e.target.value)}
-            className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent">
-            {truthStatuses.map(s => <option key={s.value} value={s.value}>{s.label}</option>)}
-          </select>
-        </div>
-
-        {/* Reviewed by */}
-        <div className="mb-4">
-          <label className="block text-sm font-medium text-gray-700 mb-1">Reviewer (E-Mail)</label>
-          <input type="email" value={reviewedBy} onChange={e => setReviewedBy(e.target.value)}
-            placeholder="reviewer@unternehmen.de"
-            className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
-        </div>
-
-        {/* Four-eyes warning */}
-        {evidence.requiresFourEyes && evidence.approvalStatus !== 'approved' && (
-          <div className="mb-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
-            <div className="flex items-start gap-2">
-              <svg className="w-5 h-5 text-yellow-600 mt-0.5 flex-shrink-0" 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>
-              <div className="text-sm text-yellow-800">
-                <p className="font-medium">4-Augen-Prinzip aktiv</p>
-                <p>Dieser Nachweis erfordert eine zusaetzliche Freigabe durch einen zweiten Reviewer.</p>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Error */}
-        {error && (
-          <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">{error}</div>
-        )}
-
-        {/* Actions */}
-        <div className="flex justify-end gap-3">
-          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
-            Abbrechen
-          </button>
-          <button onClick={handleSubmit} disabled={submitting}
-            className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50">
-            {submitting ? 'Wird gespeichert...' : 'Review abschliessen'}
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-// =============================================================================
-// REJECT MODAL
-// =============================================================================
-
-function RejectModal({ evidence, onClose, onSuccess }: { evidence: DisplayEvidence; onClose: () => void; onSuccess: () => void }) {
-  const [reviewedBy, setReviewedBy] = useState('')
-  const [rejectionReason, setRejectionReason] = useState('')
-  const [submitting, setSubmitting] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
-  const handleSubmit = async () => {
-    if (!reviewedBy.trim()) { setError('Bitte E-Mail-Adresse angeben'); return }
-    if (!rejectionReason.trim()) { setError('Bitte Ablehnungsgrund angeben'); return }
-    setSubmitting(true)
-    setError(null)
-    try {
-      const res = await fetch(`/api/sdk/v1/compliance/evidence/${evidence.id}/reject`, {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ reviewed_by: reviewedBy, rejection_reason: rejectionReason }),
-      })
-      if (!res.ok) {
-        const err = await res.json().catch(() => ({ detail: 'Ablehnung fehlgeschlagen' }))
-        throw new Error(typeof err.detail === 'string' ? err.detail : JSON.stringify(err.detail))
-      }
-      onSuccess()
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
-    } finally {
-      setSubmitting(false)
-    }
-  }
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
-      <div className="bg-white rounded-2xl shadow-xl w-full max-w-lg mx-4 p-6" onClick={e => e.stopPropagation()}>
-        <h2 className="text-xl font-bold text-gray-900 mb-4">Evidence Ablehnen</h2>
-        <p className="text-sm text-gray-500 mb-4">{evidence.name}</p>
-
-        {/* Reviewed by */}
-        <div className="mb-4">
-          <label className="block text-sm font-medium text-gray-700 mb-1">Reviewer (E-Mail)</label>
-          <input type="email" value={reviewedBy} onChange={e => setReviewedBy(e.target.value)}
-            placeholder="reviewer@unternehmen.de"
-            className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500 focus:border-transparent" />
-        </div>
-
-        {/* Rejection reason */}
-        <div className="mb-4">
-          <label className="block text-sm font-medium text-gray-700 mb-1">Ablehnungsgrund</label>
-          <textarea value={rejectionReason} onChange={e => setRejectionReason(e.target.value)}
-            placeholder="Bitte beschreiben Sie den Grund fuer die Ablehnung..."
-            rows={4}
-            className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500 focus:border-transparent resize-none" />
-        </div>
-
-        {/* Error */}
-        {error && (
-          <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">{error}</div>
-        )}
-
-        {/* Actions */}
-        <div className="flex justify-end gap-3">
-          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
-            Abbrechen
-          </button>
-          <button onClick={handleSubmit} disabled={submitting}
-            className="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50">
-            {submitting ? 'Wird abgelehnt...' : 'Ablehnen'}
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-// =============================================================================
-// AUDIT TRAIL PANEL
-// =============================================================================
-
-function AuditTrailPanel({ evidenceId, onClose }: { evidenceId: string; onClose: () => void }) {
-  const [entries, setEntries] = useState<{ id: string; action: string; actor: string; timestamp: string; details: Record<string, unknown> | null }[]>([])
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    fetch(`/api/sdk/v1/compliance/audit-trail?entity_type=evidence&entity_id=${evidenceId}`)
-      .then(res => res.json())
-      .then(data => {
-        const mapped = (data.entries || []).map((e: Record<string, unknown>) => ({
-          id: e.id as string,
-          action: e.action as string,
-          actor: (e.performed_by || 'System') as string,
-          timestamp: (e.performed_at || '') as string,
-          details: {
-            ...(e.field_changed ? { field: e.field_changed } : {}),
-            ...(e.old_value ? { old: e.old_value } : {}),
-            ...(e.new_value ? { new: e.new_value } : {}),
-            ...(e.change_summary ? { summary: e.change_summary } : {}),
-          } as Record<string, unknown>,
-        }))
-        setEntries(mapped)
-      })
-      .catch(() => {})
-      .finally(() => setLoading(false))
-  }, [evidenceId])
-
-  const actionLabels: Record<string, { label: string; color: string }> = {
-    created: { label: 'Erstellt', color: 'bg-blue-100 text-blue-700' },
-    uploaded: { label: 'Hochgeladen', color: 'bg-purple-100 text-purple-700' },
-    reviewed: { label: 'Reviewed', color: 'bg-green-100 text-green-700' },
-    rejected: { label: 'Abgelehnt', color: 'bg-red-100 text-red-700' },
-    updated: { label: 'Aktualisiert', color: 'bg-yellow-100 text-yellow-700' },
-    deleted: { label: 'Geloescht', color: 'bg-gray-100 text-gray-700' },
-    approved: { label: 'Genehmigt', color: 'bg-emerald-100 text-emerald-700' },
-    four_eyes_first: { label: '1. Review (4-Augen)', color: 'bg-blue-100 text-blue-700' },
-    four_eyes_final: { label: 'Finale Freigabe (4-Augen)', color: 'bg-emerald-100 text-emerald-700' },
-  }
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
-      <div className="bg-white rounded-2xl shadow-xl w-full max-w-2xl mx-4 p-6 max-h-[80vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
-        <div className="flex items-center justify-between mb-4">
-          <h2 className="text-xl font-bold text-gray-900">Audit-Trail</h2>
-          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-xl">&times;</button>
-        </div>
-
-        {loading ? (
-          <div className="flex justify-center py-12">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
-          </div>
-        ) : entries.length === 0 ? (
-          <div className="py-12 text-center text-gray-500">
-            <p>Keine Audit-Trail-Eintraege vorhanden.</p>
-          </div>
-        ) : (
-          <div className="relative">
-            {/* Timeline line */}
-            <div className="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-200" />
-
-            <div className="space-y-4">
-              {entries.map((entry, idx) => {
-                const meta = actionLabels[entry.action] || { label: entry.action, color: 'bg-gray-100 text-gray-700' }
-                return (
-                  <div key={entry.id || idx} className="relative flex items-start gap-4 pl-10">
-                    {/* Timeline dot */}
-                    <div className="absolute left-2.5 top-1.5 w-3 h-3 rounded-full bg-white border-2 border-purple-400" />
-
-                    <div className="flex-1 bg-gray-50 rounded-lg p-3">
-                      <div className="flex items-center gap-2 mb-1">
-                        <span className={`px-2 py-0.5 text-xs rounded ${meta.color}`}>{meta.label}</span>
-                        <span className="text-xs text-gray-400">
-                          {entry.timestamp ? new Date(entry.timestamp).toLocaleString('de-DE') : '—'}
-                        </span>
-                      </div>
-                      <div className="text-sm text-gray-600">
-                        <span className="font-medium">{entry.actor || 'System'}</span>
-                      </div>
-                      {entry.details && Object.keys(entry.details).length > 0 && (
-                        <div className="mt-2 text-xs text-gray-500 font-mono bg-white rounded p-2 border">
-                          {Object.entries(entry.details).map(([k, v]) => (
-                            <div key={k}><span className="text-gray-400">{k}:</span> {String(v)}</div>
-                          ))}
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                )
-              })}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-// =============================================================================
-// EVIDENCE CARD
-// =============================================================================
-
-function EvidenceCard({ evidence, onDelete, onView, onDownload, onReview, onReject, onShowHistory }: { evidence: DisplayEvidence; onDelete: () => void; onView: () => void; onDownload: () => void; onReview: () => void; onReject: () => void; onShowHistory: () => void }) {
-  const typeIcons = {
-    document: (
-      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-      </svg>
-    ),
-    screenshot: (
-      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-      </svg>
-    ),
-    log: (
-      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
-      </svg>
-    ),
-    'audit-report': (
-      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-      </svg>
-    ),
-    certificate: (
-      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
-      </svg>
-    ),
-  }
-
-  const statusColors = {
-    valid: 'bg-green-100 text-green-700 border-green-200',
-    expired: 'bg-red-100 text-red-700 border-red-200',
-    'pending-review': 'bg-yellow-100 text-yellow-700 border-yellow-200',
-  }
-
-  const statusLabels = {
-    valid: 'Gueltig',
-    expired: 'Abgelaufen',
-    'pending-review': 'Pruefung ausstehend',
-  }
-
-  return (
-    <div className={`bg-white rounded-xl border-2 p-6 ${
-      evidence.status === 'expired' ? 'border-red-200' :
-      evidence.status === 'pending-review' ? 'border-yellow-200' : 'border-gray-200'
-    }`}>
-      <div className="flex items-start gap-4">
-        <div className={`w-12 h-12 rounded-lg flex items-center justify-center ${
-          evidence.displayType === 'certificate' ? 'bg-yellow-100 text-yellow-600' :
-          evidence.displayType === 'audit-report' ? 'bg-purple-100 text-purple-600' :
-          evidence.displayType === 'screenshot' ? 'bg-blue-100 text-blue-600' :
-          evidence.displayType === 'log' ? 'bg-green-100 text-green-600' :
-          'bg-gray-100 text-gray-600'
-        }`}>
-          {typeIcons[evidence.displayType]}
-        </div>
-        <div className="flex-1">
-          <div className="flex items-center justify-between">
-            <h3 className="text-lg font-semibold text-gray-900">{evidence.name}</h3>
-            <div className="flex items-center gap-1.5 flex-wrap">
-              <span className={`px-3 py-1 text-xs rounded-full ${statusColors[evidence.status]}`}>
-                {statusLabels[evidence.status]}
-              </span>
-              <ConfidenceLevelBadge level={evidence.confidenceLevel} />
-              <TruthStatusBadge status={evidence.truthStatus} />
-              <GenerationModeBadge mode={evidence.generationMode} />
-              <ApprovalStatusBadge status={evidence.approvalStatus} requiresFourEyes={evidence.requiresFourEyes} />
-            </div>
-          </div>
-          <p className="text-sm text-gray-500 mt-1">{evidence.description}</p>
-
-          <div className="mt-3 flex items-center gap-4 text-sm text-gray-500">
-            <span>Hochgeladen: {evidence.uploadedAt.toLocaleDateString('de-DE')}</span>
-            {evidence.validUntil && (
-              <span className={evidence.status === 'expired' ? 'text-red-600' : ''}>
-                Gueltig bis: {evidence.validUntil.toLocaleDateString('de-DE')}
-              </span>
-            )}
-            <span>{evidence.fileSize}</span>
-          </div>
-
-          <div className="mt-3 flex items-center gap-2 flex-wrap">
-            {evidence.linkedRequirements.map(req => (
-              <span key={req} className="px-2 py-0.5 text-xs bg-blue-50 text-blue-600 rounded">
-                {req}
-              </span>
-            ))}
-            {evidence.linkedControls.map(ctrl => (
-              <span key={ctrl} className="px-2 py-0.5 text-xs bg-green-50 text-green-600 rounded">
-                {ctrl}
-              </span>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      <div className="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between">
-        <span className="text-sm text-gray-500">Hochgeladen von: {evidence.uploadedBy}</span>
-        <div className="flex items-center gap-2">
-          <button
-            onClick={onView}
-            disabled={!evidence.fileUrl}
-            className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
-          >
-            Anzeigen
-          </button>
-          <button
-            onClick={onDownload}
-            disabled={!evidence.fileUrl}
-            className="px-3 py-1 text-sm text-purple-600 hover:bg-purple-50 rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
-          >
-            Herunterladen
-          </button>
-          <button
-            onClick={onDelete}
-            className="px-3 py-1 text-sm text-red-600 hover:bg-red-50 rounded-lg transition-colors"
-          >
-            Loeschen
-          </button>
-          {/* Review button — visible when review is possible */}
-          {(evidence.approvalStatus === 'none' || evidence.approvalStatus === 'pending_first' || evidence.approvalStatus === 'first_approved' || !evidence.approvalStatus) && evidence.approvalStatus !== 'approved' && evidence.approvalStatus !== 'rejected' && (
-            <button
-              onClick={onReview}
-              className="px-3 py-1 text-sm text-green-600 hover:bg-green-50 rounded-lg transition-colors font-medium"
-            >
-              Reviewen
-            </button>
-          )}
-          {/* Reject button — visible for four-eyes evidence that's not yet resolved */}
-          {evidence.requiresFourEyes && evidence.approvalStatus !== 'rejected' && evidence.approvalStatus !== 'approved' && (
-            <button
-              onClick={onReject}
-              className="px-3 py-1 text-sm text-orange-600 hover:bg-orange-50 rounded-lg transition-colors"
-            >
-              Ablehnen
-            </button>
-          )}
-          {/* History button */}
-          <button
-            onClick={onShowHistory}
-            className="px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-lg transition-colors"
-          >
-            Historie
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function LoadingSkeleton() {
-  return (
-    <div className="space-y-4">
-      {[1, 2, 3].map(i => (
-        <div key={i} className="bg-white rounded-xl border border-gray-200 p-6 animate-pulse">
-          <div className="flex items-start gap-4">
-            <div className="w-12 h-12 bg-gray-200 rounded-lg" />
-            <div className="flex-1">
-              <div className="h-6 w-3/4 bg-gray-200 rounded mb-2" />
-              <div className="h-4 w-full bg-gray-100 rounded" />
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-// =============================================================================
-// MAIN PAGE
-// =============================================================================
-
-// =============================================================================
-// EVIDENCE CHECK TYPES
-// =============================================================================
-
-interface EvidenceCheck {
-  id: string
-  check_code: string
-  title: string
-  description: string | null
-  check_type: string
-  target_url: string | null
-  frequency: string
-  is_active: boolean
-  last_run_at: string | null
-  next_run_at: string | null
-}
-
-interface CheckResult {
-  id: string
-  check_id: string
-  run_status: string
-  summary: string | null
-  findings_count: number
-  critical_findings: number
-  duration_ms: number
-  run_at: string
-}
-
-interface EvidenceMapping {
-  id: string
-  evidence_id: string
-  control_code: string
-  mapping_type: string
-  verified_at: string | null
-  verified_by: string | null
-  notes: string | null
-}
-
-interface CoverageReport {
-  total_controls: number
-  controls_with_evidence: number
-  controls_without_evidence: number
-  coverage_percent: number
-}
-
-type EvidenceTabKey = 'evidence' | 'checks' | 'mapping' | 'report'
-
-const CHECK_TYPE_LABELS: Record<string, { label: string; color: string }> = {
-  tls_scan: { label: 'TLS-Scan', color: 'bg-blue-100 text-blue-700' },
-  header_check: { label: 'Header-Check', color: 'bg-green-100 text-green-700' },
-  certificate_check: { label: 'Zertifikat', color: 'bg-yellow-100 text-yellow-700' },
-  dns_check: { label: 'DNS-Check', color: 'bg-purple-100 text-purple-700' },
-  api_scan: { label: 'API-Scan', color: 'bg-indigo-100 text-indigo-700' },
-  config_scan: { label: 'Config-Scan', color: 'bg-orange-100 text-orange-700' },
-  port_scan: { label: 'Port-Scan', color: 'bg-red-100 text-red-700' },
-}
-
-const RUN_STATUS_LABELS: Record<string, { label: string; color: string }> = {
-  running: { label: 'Laeuft...', color: 'bg-blue-100 text-blue-700' },
-  passed: { label: 'Bestanden', color: 'bg-green-100 text-green-700' },
-  failed: { label: 'Fehlgeschlagen', color: 'bg-red-100 text-red-700' },
-  warning: { label: 'Warnung', color: 'bg-yellow-100 text-yellow-700' },
-  error: { label: 'Fehler', color: 'bg-red-100 text-red-700' },
-}
-
-const CHECK_API = '/api/sdk/v1/compliance/evidence-checks'
-
 export default function EvidencePage() {
-  const { state, dispatch } = useSDK()
-  const [activeTab, setActiveTab] = useState<EvidenceTabKey>('evidence')
-  const [filter, setFilter] = useState<string>('all')
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [uploading, setUploading] = useState(false)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const [page, setPage] = useState(1)
-  const [pageSize] = useState(20)
-  const [total, setTotal] = useState(0)
-
-  // Anti-Fake-Evidence metadata (keyed by evidence ID)
-  const [antiFakeMeta, setAntiFakeMeta] = useState<Record<string, {
-    confidenceLevel: string | null
-    truthStatus: string | null
-    generationMode: string | null
-    approvalStatus: string | null
-    requiresFourEyes: boolean
-  }>>({})
-
-  // Evidence Checks state
-  const [checks, setChecks] = useState<EvidenceCheck[]>([])
-  const [checksLoading, setChecksLoading] = useState(false)
-  const [runningCheckId, setRunningCheckId] = useState<string | null>(null)
-  const [checkResults, setCheckResults] = useState<Record<string, CheckResult[]>>({})
-
-  // Mappings state
-  const [mappings, setMappings] = useState<EvidenceMapping[]>([])
-  const [coverageReport, setCoverageReport] = useState<CoverageReport | null>(null)
-  const [seedingChecks, setSeedingChecks] = useState(false)
-
-  // Phase 3: Review/Reject/AuditTrail state
-  const [reviewEvidence, setReviewEvidence] = useState<DisplayEvidence | null>(null)
-  const [rejectEvidence, setRejectEvidence] = useState<DisplayEvidence | null>(null)
-  const [auditTrailId, setAuditTrailId] = useState<string | null>(null)
-  const [confidenceFilter, setConfidenceFilter] = useState<string | null>(null)
-  const [refreshKey, setRefreshKey] = useState(0)
-
-  // Fetch evidence from backend on mount and when page changes
-  useEffect(() => {
-    const fetchEvidence = async () => {
-      try {
-        setLoading(true)
-        const res = await fetch(`/api/sdk/v1/compliance/evidence?page=${page}&limit=${pageSize}`)
-        if (res.ok) {
-          const data = await res.json()
-          if (data.total !== undefined) setTotal(data.total)
-          const backendEvidence = data.evidence || data
-          if (Array.isArray(backendEvidence) && backendEvidence.length > 0) {
-            const metaMap: typeof antiFakeMeta = {}
-            const mapped: SDKEvidence[] = backendEvidence.map((e: Record<string, unknown>) => {
-              const id = (e.id || '') as string
-              metaMap[id] = {
-                confidenceLevel: (e.confidence_level || null) as string | null,
-                truthStatus: (e.truth_status || null) as string | null,
-                generationMode: (e.generation_mode || null) as string | null,
-                approvalStatus: (e.approval_status || null) as string | null,
-                requiresFourEyes: !!e.requires_four_eyes,
-              }
-              return {
-                id,
-                controlId: (e.control_id || '') as string,
-                type: ((e.evidence_type || 'DOCUMENT') as string).toUpperCase() as EvidenceType,
-                name: (e.title || e.name || '') as string,
-                description: (e.description || '') as string,
-                fileUrl: (e.artifact_url || null) as string | null,
-                validFrom: e.valid_from ? new Date(e.valid_from as string) : new Date(),
-                validUntil: e.valid_until ? new Date(e.valid_until as string) : null,
-                uploadedBy: (e.uploaded_by || 'System') as string,
-                uploadedAt: e.created_at ? new Date(e.created_at as string) : new Date(),
-              }
-            })
-            setAntiFakeMeta(metaMap)
-            dispatch({ type: 'SET_STATE', payload: { evidence: mapped } })
-            setError(null)
-            return
-          }
-        }
-        loadFromTemplates()
-      } catch {
-        loadFromTemplates()
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    const loadFromTemplates = () => {
-      if (state.evidence.length > 0) return
-      if (state.controls.length === 0) return
-
-      const relevantEvidence = evidenceTemplates.filter(e =>
-        state.controls.some(c => c.id === e.controlId || e.linkedControls.includes(c.id))
-      )
-
-      const now = new Date()
-      relevantEvidence.forEach(template => {
-        const validFrom = new Date(now)
-        validFrom.setMonth(validFrom.getMonth() - 1)
-
-        const validUntil = template.validityDays > 0
-          ? new Date(validFrom.getTime() + template.validityDays * 24 * 60 * 60 * 1000)
-          : null
-
-        const sdkEvidence: SDKEvidence = {
-          id: template.id,
-          controlId: template.controlId,
-          type: template.type,
-          name: template.name,
-          description: template.description,
-          fileUrl: null,
-          validFrom,
-          validUntil,
-          uploadedBy: template.uploadedBy,
-          uploadedAt: validFrom,
-        }
-        dispatch({ type: 'ADD_EVIDENCE', payload: sdkEvidence })
-      })
-    }
-
-    fetchEvidence()
-  }, [page, pageSize, refreshKey]) // eslint-disable-line react-hooks/exhaustive-deps
-
-  // Convert SDK evidence to display evidence
-  const displayEvidence: DisplayEvidence[] = state.evidence.map(ev => {
-    const template = evidenceTemplates.find(t => t.id === ev.id)
-
-    const meta = antiFakeMeta[ev.id]
-    return {
-      id: ev.id,
-      name: ev.name,
-      description: ev.description,
-      displayType: mapEvidenceTypeToDisplay(ev.type),
-      format: template?.format || 'pdf',
-      controlId: ev.controlId,
-      linkedRequirements: template?.linkedRequirements || [],
-      linkedControls: template?.linkedControls || [ev.controlId],
-      uploadedBy: ev.uploadedBy,
-      uploadedAt: ev.uploadedAt,
-      validFrom: ev.validFrom,
-      validUntil: ev.validUntil,
-      status: getEvidenceStatus(ev.validUntil),
-      fileSize: template?.fileSize || 'Unbekannt',
-      fileUrl: ev.fileUrl,
-      confidenceLevel: meta?.confidenceLevel || null,
-      truthStatus: meta?.truthStatus || null,
-      generationMode: meta?.generationMode || null,
-      approvalStatus: meta?.approvalStatus || null,
-      requiresFourEyes: meta?.requiresFourEyes || false,
-    }
-  })
-
-  const filteredEvidence = (filter === 'all'
-    ? displayEvidence
-    : displayEvidence.filter(e => e.status === filter || e.displayType === filter)
-  ).filter(e => !confidenceFilter || e.confidenceLevel === confidenceFilter)
-
-  const validCount = displayEvidence.filter(e => e.status === 'valid').length
-  const expiredCount = displayEvidence.filter(e => e.status === 'expired').length
-  const pendingCount = displayEvidence.filter(e => e.status === 'pending-review').length
-
-  const handleDelete = async (evidenceId: string) => {
-    if (!confirm('Moechten Sie diesen Nachweis wirklich loeschen?')) return
-
-    dispatch({ type: 'DELETE_EVIDENCE', payload: evidenceId })
-
-    try {
-      await fetch(`/api/sdk/v1/compliance/evidence/${evidenceId}`, {
-        method: 'DELETE',
-      })
-    } catch {
-      // Silently fail — SDK state is already updated
-    }
-  }
-
-  const handleUpload = async (file: File) => {
-    setUploading(true)
-    setError(null)
-
-    try {
-      // Use the first control as default, or a generic one
-      const controlId = state.controls.length > 0 ? state.controls[0].id : 'GENERIC'
-
-      const params = new URLSearchParams({
-        control_id: controlId,
-        evidence_type: 'document',
-        title: file.name,
-      })
-
-      const formData = new FormData()
-      formData.append('file', file)
-
-      const res = await fetch(`/api/sdk/v1/compliance/evidence/upload?${params}`, {
-        method: 'POST',
-        body: formData,
-      })
-
-      if (!res.ok) {
-        const errData = await res.json().catch(() => ({ error: 'Upload fehlgeschlagen' }))
-        throw new Error(errData.error || errData.detail || 'Upload fehlgeschlagen')
-      }
-
-      const data = await res.json()
-
-      // Add to SDK state
-      const newEvidence: SDKEvidence = {
-        id: data.id || `ev-${Date.now()}`,
-        controlId: controlId,
-        type: 'DOCUMENT',
-        name: file.name,
-        description: `Hochgeladen am ${new Date().toLocaleDateString('de-DE')}`,
-        fileUrl: data.artifact_url || null,
-        validFrom: new Date(),
-        validUntil: null,
-        uploadedBy: 'Aktueller Benutzer',
-        uploadedAt: new Date(),
-      }
-      dispatch({ type: 'ADD_EVIDENCE', payload: newEvidence })
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Upload fehlgeschlagen')
-    } finally {
-      setUploading(false)
-    }
-  }
-
-  const handleView = (ev: DisplayEvidence) => {
-    if (ev.fileUrl) {
-      window.open(ev.fileUrl, '_blank')
-    } else {
-      alert('Keine Datei vorhanden')
-    }
-  }
-
-  const handleDownload = (ev: DisplayEvidence) => {
-    if (!ev.fileUrl) return
-    const a = document.createElement('a')
-    a.href = ev.fileUrl
-    a.download = ev.name
-    document.body.appendChild(a)
-    a.click()
-    document.body.removeChild(a)
-  }
-
-  const handleUploadClick = () => {
-    fileInputRef.current?.click()
-  }
-
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-    if (file) {
-      handleUpload(file)
-      e.target.value = '' // Reset input
-    }
-  }
-
-  // Load checks when tab changes
-  const loadChecks = async () => {
-    setChecksLoading(true)
-    try {
-      const res = await fetch(`${CHECK_API}?limit=50`)
-      if (res.ok) {
-        const data = await res.json()
-        setChecks(data.checks || [])
-      }
-    } catch { /* silent */ }
-    finally { setChecksLoading(false) }
-  }
-
-  const runCheck = async (checkId: string) => {
-    setRunningCheckId(checkId)
-    try {
-      const res = await fetch(`${CHECK_API}/${checkId}/run`, { method: 'POST' })
-      if (res.ok) {
-        const result = await res.json()
-        setCheckResults(prev => ({
-          ...prev,
-          [checkId]: [result, ...(prev[checkId] || [])].slice(0, 5),
-        }))
-        loadChecks() // refresh last_run_at
-      }
-    } catch { /* silent */ }
-    finally { setRunningCheckId(null) }
-  }
-
-  const loadCheckResults = async (checkId: string) => {
-    try {
-      const res = await fetch(`${CHECK_API}/${checkId}/results?limit=5`)
-      if (res.ok) {
-        const data = await res.json()
-        setCheckResults(prev => ({ ...prev, [checkId]: data.results || [] }))
-      }
-    } catch { /* silent */ }
-  }
-
-  const seedChecks = async () => {
-    setSeedingChecks(true)
-    try {
-      await fetch(`${CHECK_API}/seed`, { method: 'POST' })
-      loadChecks()
-    } catch { /* silent */ }
-    finally { setSeedingChecks(false) }
-  }
-
-  const loadMappings = async () => {
-    try {
-      const res = await fetch(`${CHECK_API}/mappings`)
-      if (res.ok) {
-        const data = await res.json()
-        setMappings(data.mappings || [])
-      }
-    } catch { /* silent */ }
-  }
-
-  const loadCoverageReport = async () => {
-    try {
-      const res = await fetch(`${CHECK_API}/mappings/report`)
-      if (res.ok) setCoverageReport(await res.json())
-    } catch { /* silent */ }
-  }
-
-  useEffect(() => {
-    if (activeTab === 'checks' && checks.length === 0) loadChecks()
-    if (activeTab === 'mapping') { loadMappings(); loadCoverageReport() }
-    if (activeTab === 'report') loadCoverageReport()
-  }, [activeTab]) // eslint-disable-line react-hooks/exhaustive-deps
-
+  const ev = useEvidence()
   const stepInfo = STEP_EXPLANATIONS['evidence']
 
-  const evidenceTabs: { key: EvidenceTabKey; label: string }[] = [
-    { key: 'evidence', label: 'Nachweise' },
-    { key: 'checks', label: 'Automatische Checks' },
-    { key: 'mapping', label: 'Control-Mapping' },
-    { key: 'report', label: 'Report' },
-  ]
-
   return (
     <div className="space-y-6">
-      {/* Hidden file input */}
-      <input
-        ref={fileInputRef}
-        type="file"
-        className="hidden"
-        onChange={handleFileChange}
-        accept=".pdf,.doc,.docx,.png,.jpg,.jpeg,.json,.csv,.txt"
-      />
+      <input ref={ev.fileInputRef} type="file" className="hidden" onChange={ev.handleFileChange}
+        accept=".pdf,.doc,.docx,.png,.jpg,.jpeg,.json,.csv,.txt" />
 
-      {/* Step Header */}
-      <StepHeader
-        stepId="evidence"
-        title={stepInfo.title}
-        description={stepInfo.description}
-        explanation={stepInfo.explanation}
-        tips={stepInfo.tips}
-      >
-        <button
-          onClick={handleUploadClick}
-          disabled={uploading}
-          className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
-        >
-          {uploading ? (
+      <StepHeader stepId="evidence" title={stepInfo.title} description={stepInfo.description}
+        explanation={stepInfo.explanation} tips={stepInfo.tips}>
+        <button onClick={ev.handleUploadClick} disabled={ev.uploading}
+          className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50">
+          {ev.uploading ? (
             <>
               <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" />
@@ -1110,435 +52,161 @@ export default function EvidencePage() {
         </button>
       </StepHeader>
 
-      {/* Tab Navigation */}
       <div className="bg-white rounded-xl shadow-sm border">
         <div className="flex border-b">
           {evidenceTabs.map(tab => (
-            <button
-              key={tab.key}
-              onClick={() => setActiveTab(tab.key)}
+            <button key={tab.key} onClick={() => ev.setActiveTab(tab.key)}
               className={`px-6 py-3 text-sm font-medium transition-colors ${
-                activeTab === tab.key
-                  ? 'text-purple-600 border-b-2 border-purple-600'
-                  : 'text-gray-500 hover:text-gray-700'
-              }`}
-            >
+                ev.activeTab === tab.key ? 'text-purple-600 border-b-2 border-purple-600' : 'text-gray-500 hover:text-gray-700'
+              }`}>
               {tab.label}
             </button>
           ))}
         </div>
       </div>
 
-      {/* Error Banner */}
-      {error && (
+      {ev.error && (
         <div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 flex items-center justify-between">
-          <span>{error}</span>
-          <button onClick={() => setError(null)} className="text-red-500 hover:text-red-700">&times;</button>
+          <span>{ev.error}</span>
+          <button onClick={() => ev.setError(null)} className="text-red-500 hover:text-red-700">&times;</button>
         </div>
       )}
 
-      {/* ============================================================ */}
-      {/* TAB: Nachweise (existing content) */}
-      {/* ============================================================ */}
-      {activeTab === 'evidence' && <>
+      {ev.activeTab === 'evidence' && (
+        <>
+          {ev.state.controls.length === 0 && !ev.loading && (
+            <div className="bg-amber-50 border border-amber-200 rounded-xl p-4">
+              <div className="flex items-start gap-3">
+                <svg className="w-5 h-5 text-amber-600 mt-0.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>
+                <div>
+                  <h4 className="font-medium text-amber-800">Keine Kontrollen definiert</h4>
+                  <p className="text-sm text-amber-700 mt-1">Bitte definieren Sie zuerst Kontrollen, um die zugehoerigen Nachweise zu laden.</p>
+                </div>
+              </div>
+            </div>
+          )}
 
-      {/* Controls Alert */}
-      {state.controls.length === 0 && !loading && (
-        <div className="bg-amber-50 border border-amber-200 rounded-xl p-4">
-          <div className="flex items-start gap-3">
-            <svg className="w-5 h-5 text-amber-600 mt-0.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>
-            <div>
-              <h4 className="font-medium text-amber-800">Keine Kontrollen definiert</h4>
-              <p className="text-sm text-amber-700 mt-1">
-                Bitte definieren Sie zuerst Kontrollen, um die zugehoerigen Nachweise zu laden.
-              </p>
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+            <div className="bg-white rounded-xl border border-gray-200 p-6">
+              <div className="text-sm text-gray-500">Gesamt</div>
+              <div className="text-3xl font-bold text-gray-900">{ev.displayEvidence.length}</div>
+            </div>
+            <div className="bg-white rounded-xl border border-green-200 p-6">
+              <div className="text-sm text-green-600">Gueltig</div>
+              <div className="text-3xl font-bold text-green-600">{ev.validCount}</div>
+            </div>
+            <div className="bg-white rounded-xl border border-red-200 p-6">
+              <div className="text-sm text-red-600">Abgelaufen</div>
+              <div className="text-3xl font-bold text-red-600">{ev.expiredCount}</div>
+            </div>
+            <div className="bg-white rounded-xl border border-yellow-200 p-6">
+              <div className="text-sm text-yellow-600">Pruefung ausstehend</div>
+              <div className="text-3xl font-bold text-yellow-600">{ev.pendingCount}</div>
             </div>
           </div>
-        </div>
-      )}
 
-      {/* Stats */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <div className="bg-white rounded-xl border border-gray-200 p-6">
-          <div className="text-sm text-gray-500">Gesamt</div>
-          <div className="text-3xl font-bold text-gray-900">{displayEvidence.length}</div>
-        </div>
-        <div className="bg-white rounded-xl border border-green-200 p-6">
-          <div className="text-sm text-green-600">Gueltig</div>
-          <div className="text-3xl font-bold text-green-600">{validCount}</div>
-        </div>
-        <div className="bg-white rounded-xl border border-red-200 p-6">
-          <div className="text-sm text-red-600">Abgelaufen</div>
-          <div className="text-3xl font-bold text-red-600">{expiredCount}</div>
-        </div>
-        <div className="bg-white rounded-xl border border-yellow-200 p-6">
-          <div className="text-sm text-yellow-600">Pruefung ausstehend</div>
-          <div className="text-3xl font-bold text-yellow-600">{pendingCount}</div>
-        </div>
-      </div>
-
-      {/* Filter */}
-      <div className="flex items-center gap-2 flex-wrap">
-        <span className="text-sm text-gray-500">Filter:</span>
-        {['all', 'valid', 'expired', 'pending-review', 'document', 'certificate', 'audit-report'].map(f => (
-          <button
-            key={f}
-            onClick={() => setFilter(f)}
-            className={`px-3 py-1 text-sm rounded-full transition-colors ${
-              filter === f ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
-            }`}
-          >
-            {f === 'all' ? 'Alle' :
-             f === 'valid' ? 'Gueltig' :
-             f === 'expired' ? 'Abgelaufen' :
-             f === 'pending-review' ? 'Ausstehend' :
-             f === 'document' ? 'Dokumente' :
-             f === 'certificate' ? 'Zertifikate' : 'Audit-Berichte'}
-          </button>
-        ))}
-        <span className="text-gray-300 mx-1">|</span>
-        {['E0', 'E1', 'E2', 'E3', 'E4'].map(level => (
-          <button
-            key={level}
-            onClick={() => setConfidenceFilter(confidenceFilter === level ? null : level)}
-            className={`px-3 py-1 text-sm rounded-full transition-colors ${
-              confidenceFilter === level
-                ? confidenceFilterColors[level]
-                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
-            }`}
-          >
-            {level}
-          </button>
-        ))}
-      </div>
-
-      {/* Loading State */}
-      {loading && <LoadingSkeleton />}
-
-      {/* Evidence List */}
-      {!loading && (
-        <div className="space-y-4">
-          {filteredEvidence.map(ev => (
-            <EvidenceCard
-              key={ev.id}
-              evidence={ev}
-              onDelete={() => handleDelete(ev.id)}
-              onView={() => handleView(ev)}
-              onDownload={() => handleDownload(ev)}
-              onReview={() => setReviewEvidence(ev)}
-              onReject={() => setRejectEvidence(ev)}
-              onShowHistory={() => setAuditTrailId(ev.id)}
-            />
-          ))}
-        </div>
-      )}
-
-      {/* Pagination */}
-      {!loading && total > pageSize && (
-        <div className="flex items-center justify-between bg-white rounded-xl border border-gray-200 p-4">
-          <span className="text-sm text-gray-500">
-            Zeige {((page - 1) * pageSize) + 1}–{Math.min(page * pageSize, total)} von {total} Nachweisen
-          </span>
-          <div className="flex items-center gap-2">
-            <button
-              onClick={() => setPage(p => Math.max(1, p - 1))}
-              disabled={page <= 1}
-              className="px-3 py-1 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed"
-            >
-              Zurueck
-            </button>
-            <span className="text-sm text-gray-700">
-              Seite {page} von {Math.ceil(total / pageSize)}
-            </span>
-            <button
-              onClick={() => setPage(p => Math.min(Math.ceil(total / pageSize), p + 1))}
-              disabled={page >= Math.ceil(total / pageSize)}
-              className="px-3 py-1 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed"
-            >
-              Weiter
-            </button>
-          </div>
-        </div>
-      )}
-
-      {!loading && filteredEvidence.length === 0 && state.controls.length > 0 && (
-        <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
-          <div className="w-16 h-16 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
-            <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-            </svg>
-          </div>
-          <h3 className="text-lg font-semibold text-gray-900">Keine Nachweise gefunden</h3>
-          <p className="mt-2 text-gray-500">Passen Sie den Filter an oder laden Sie neue Nachweise hoch.</p>
-        </div>
-      )}
-
-      </>}
-
-      {/* ============================================================ */}
-      {/* TAB: Automatische Checks */}
-      {/* ============================================================ */}
-      {activeTab === 'checks' && (
-        <>
-          {/* Seed if empty */}
-          {!checksLoading && checks.length === 0 && (
-            <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg flex items-center justify-between">
-              <div>
-                <p className="font-medium text-yellow-800">Keine automatischen Checks vorhanden</p>
-                <p className="text-sm text-yellow-700">Laden Sie ca. 15 Standard-Checks (TLS, Header, Zertifikate, etc.).</p>
-              </div>
-              <button onClick={seedChecks} disabled={seedingChecks}
-                className="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 disabled:opacity-50">
-                {seedingChecks ? 'Lade...' : 'Standard-Checks laden'}
+          <div className="flex items-center gap-2 flex-wrap">
+            <span className="text-sm text-gray-500">Filter:</span>
+            {['all', 'valid', 'expired', 'pending-review', 'document', 'certificate', 'audit-report'].map(f => (
+              <button key={f} onClick={() => ev.setFilter(f)}
+                className={`px-3 py-1 text-sm rounded-full transition-colors ${
+                  ev.filter === f ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                }`}>
+                {f === 'all' ? 'Alle' : f === 'valid' ? 'Gueltig' : f === 'expired' ? 'Abgelaufen' :
+                 f === 'pending-review' ? 'Ausstehend' : f === 'document' ? 'Dokumente' :
+                 f === 'certificate' ? 'Zertifikate' : 'Audit-Berichte'}
               </button>
-            </div>
-          )}
-
-          {checksLoading ? (
-            <div className="flex justify-center py-12">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
-            </div>
-          ) : (
-            <div className="space-y-3">
-              {checks.map(check => {
-                const typeMeta = CHECK_TYPE_LABELS[check.check_type] || { label: check.check_type, color: 'bg-gray-100 text-gray-700' }
-                const results = checkResults[check.id] || []
-                const lastResult = results[0]
-                const isRunning = runningCheckId === check.id
-
-                return (
-                  <div key={check.id} className="bg-white rounded-xl border border-gray-200 p-5">
-                    <div className="flex items-start justify-between">
-                      <div className="flex-1">
-                        <div className="flex items-center gap-2">
-                          <h4 className="font-medium text-gray-900">{check.title}</h4>
-                          <span className={`px-2 py-0.5 text-xs rounded ${typeMeta.color}`}>{typeMeta.label}</span>
-                          {!check.is_active && (
-                            <span className="px-2 py-0.5 text-xs rounded bg-gray-100 text-gray-500">Deaktiviert</span>
-                          )}
-                        </div>
-                        {check.description && <p className="text-sm text-gray-500 mt-1">{check.description}</p>}
-                        <div className="flex items-center gap-4 mt-2 text-xs text-gray-400">
-                          <span>Code: {check.check_code}</span>
-                          {check.target_url && <span>Ziel: {check.target_url}</span>}
-                          <span>Frequenz: {check.frequency}</span>
-                          {check.last_run_at && <span>Letzter Lauf: {new Date(check.last_run_at).toLocaleDateString('de-DE')}</span>}
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-2 ml-4">
-                        {lastResult && (
-                          <span className={`px-2 py-0.5 text-xs rounded ${RUN_STATUS_LABELS[lastResult.run_status]?.color || ''}`}>
-                            {RUN_STATUS_LABELS[lastResult.run_status]?.label || lastResult.run_status}
-                          </span>
-                        )}
-                        <button
-                          onClick={() => { runCheck(check.id); loadCheckResults(check.id) }}
-                          disabled={isRunning}
-                          className="px-3 py-1.5 text-xs bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
-                        >
-                          {isRunning ? 'Laeuft...' : 'Ausfuehren'}
-                        </button>
-                        <button
-                          onClick={() => loadCheckResults(check.id)}
-                          className="px-3 py-1.5 text-xs border rounded-lg hover:bg-gray-50"
-                        >
-                          Historie
-                        </button>
-                      </div>
-                    </div>
-
-                    {/* Results */}
-                    {results.length > 0 && (
-                      <div className="mt-3 border-t pt-3">
-                        <p className="text-xs font-medium text-gray-500 mb-2">Letzte Ergebnisse</p>
-                        <div className="space-y-1">
-                          {results.slice(0, 3).map(r => (
-                            <div key={r.id} className="flex items-center gap-3 text-xs">
-                              <span className={`px-1.5 py-0.5 rounded ${RUN_STATUS_LABELS[r.run_status]?.color || 'bg-gray-100'}`}>
-                                {RUN_STATUS_LABELS[r.run_status]?.label || r.run_status}
-                              </span>
-                              <span className="text-gray-500">{new Date(r.run_at).toLocaleString('de-DE')}</span>
-                              <span className="text-gray-400">{r.duration_ms}ms</span>
-                              {r.findings_count > 0 && (
-                                <span className="text-orange-600">{r.findings_count} Findings ({r.critical_findings} krit.)</span>
-                              )}
-                              {r.summary && <span className="text-gray-600 truncate">{r.summary}</span>}
-                            </div>
-                          ))}
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                )
-              })}
-            </div>
-          )}
-        </>
-      )}
-
-      {/* ============================================================ */}
-      {/* TAB: Control-Mapping */}
-      {/* ============================================================ */}
-      {activeTab === 'mapping' && (
-        <>
-          {coverageReport && (
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-              <div className="bg-white rounded-xl border border-gray-200 p-6">
-                <p className="text-sm text-gray-500">Gesamt Controls</p>
-                <p className="text-3xl font-bold text-gray-900">{coverageReport.total_controls}</p>
-              </div>
-              <div className="bg-white rounded-xl border border-green-200 p-6">
-                <p className="text-sm text-green-600">Mit Nachweis</p>
-                <p className="text-3xl font-bold text-green-600">{coverageReport.controls_with_evidence}</p>
-              </div>
-              <div className="bg-white rounded-xl border border-red-200 p-6">
-                <p className="text-sm text-red-600">Ohne Nachweis</p>
-                <p className="text-3xl font-bold text-red-600">{coverageReport.controls_without_evidence}</p>
-              </div>
-              <div className="bg-white rounded-xl border border-purple-200 p-6">
-                <p className="text-sm text-purple-600">Abdeckung</p>
-                <p className="text-3xl font-bold text-purple-600">{coverageReport.coverage_percent.toFixed(0)}%</p>
-              </div>
-            </div>
-          )}
-
-          <div className="bg-white rounded-xl shadow-sm border overflow-hidden">
-            <div className="p-4 border-b">
-              <h3 className="font-semibold text-gray-900">Evidence-Control-Verknuepfungen ({mappings.length})</h3>
-            </div>
-            {mappings.length === 0 ? (
-              <div className="p-8 text-center text-gray-500">
-                <p>Noch keine Verknuepfungen erstellt.</p>
-                <p className="text-sm mt-1">Fuehren Sie automatische Checks aus, um Nachweise automatisch mit Controls zu verknuepfen.</p>
-              </div>
-            ) : (
-              <table className="w-full">
-                <thead className="bg-gray-50">
-                  <tr>
-                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Control</th>
-                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Evidence</th>
-                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Typ</th>
-                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Verifiziert</th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-200">
-                  {mappings.map(m => (
-                    <tr key={m.id} className="hover:bg-gray-50">
-                      <td className="px-4 py-3 font-mono text-sm text-purple-600">{m.control_code}</td>
-                      <td className="px-4 py-3 text-sm text-gray-700">{m.evidence_id.slice(0, 8)}...</td>
-                      <td className="px-4 py-3">
-                        <span className="px-2 py-0.5 text-xs rounded bg-blue-100 text-blue-700">{m.mapping_type}</span>
-                      </td>
-                      <td className="px-4 py-3 text-sm text-gray-500">
-                        {m.verified_at ? `${new Date(m.verified_at).toLocaleDateString('de-DE')} von ${m.verified_by || '—'}` : 'Ausstehend'}
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            )}
+            ))}
+            <span className="text-gray-300 mx-1">|</span>
+            {['E0', 'E1', 'E2', 'E3', 'E4'].map(level => (
+              <button key={level} onClick={() => ev.setConfidenceFilter(ev.confidenceFilter === level ? null : level)}
+                className={`px-3 py-1 text-sm rounded-full transition-colors ${
+                  ev.confidenceFilter === level ? confidenceFilterColors[level] : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                }`}>
+                {level}
+              </button>
+            ))}
           </div>
+
+          {ev.loading && <LoadingSkeleton />}
+
+          {!ev.loading && (
+            <div className="space-y-4">
+              {ev.filteredEvidence.map(e => (
+                <EvidenceCard key={e.id} evidence={e}
+                  onDelete={() => ev.handleDelete(e.id)}
+                  onView={() => ev.handleView(e)}
+                  onDownload={() => ev.handleDownload(e)}
+                  onReview={() => ev.setReviewEvidence(e)}
+                  onReject={() => ev.setRejectEvidence(e)}
+                  onShowHistory={() => ev.setAuditTrailId(e.id)}
+                />
+              ))}
+            </div>
+          )}
+
+          {!ev.loading && ev.total > ev.pageSize && (
+            <div className="flex items-center justify-between bg-white rounded-xl border border-gray-200 p-4">
+              <span className="text-sm text-gray-500">
+                Zeige {((ev.page - 1) * ev.pageSize) + 1}–{Math.min(ev.page * ev.pageSize, ev.total)} von {ev.total} Nachweisen
+              </span>
+              <div className="flex items-center gap-2">
+                <button onClick={() => ev.setPage(p => Math.max(1, p - 1))} disabled={ev.page <= 1}
+                  className="px-3 py-1 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed">
+                  Zurueck
+                </button>
+                <span className="text-sm text-gray-700">Seite {ev.page} von {Math.ceil(ev.total / ev.pageSize)}</span>
+                <button onClick={() => ev.setPage(p => Math.min(Math.ceil(ev.total / ev.pageSize), p + 1))}
+                  disabled={ev.page >= Math.ceil(ev.total / ev.pageSize)}
+                  className="px-3 py-1 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed">
+                  Weiter
+                </button>
+              </div>
+            </div>
+          )}
+
+          {!ev.loading && ev.filteredEvidence.length === 0 && ev.state.controls.length > 0 && (
+            <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
+              <div className="w-16 h-16 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
+                <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                </svg>
+              </div>
+              <h3 className="text-lg font-semibold text-gray-900">Keine Nachweise gefunden</h3>
+              <p className="mt-2 text-gray-500">Passen Sie den Filter an oder laden Sie neue Nachweise hoch.</p>
+            </div>
+          )}
         </>
       )}
 
-      {/* ============================================================ */}
-      {/* TAB: Report */}
-      {/* ============================================================ */}
-      {activeTab === 'report' && (
-        <div className="bg-white rounded-xl shadow-sm border p-6">
-          <h3 className="text-lg font-semibold text-gray-900 mb-6">Evidence Coverage Report</h3>
-
-          {!coverageReport ? (
-            <div className="flex justify-center py-12">
-              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
-            </div>
-          ) : (
-            <>
-              {/* Coverage Bar */}
-              <div className="mb-8">
-                <div className="flex items-center justify-between mb-2">
-                  <span className="text-sm font-medium text-gray-700">Gesamt-Abdeckung</span>
-                  <span className={`text-2xl font-bold ${
-                    coverageReport.coverage_percent >= 80 ? 'text-green-600' :
-                    coverageReport.coverage_percent >= 50 ? 'text-yellow-600' : 'text-red-600'
-                  }`}>
-                    {coverageReport.coverage_percent.toFixed(1)}%
-                  </span>
-                </div>
-                <div className="h-4 bg-gray-200 rounded-full overflow-hidden">
-                  <div
-                    className={`h-full transition-all duration-500 ${
-                      coverageReport.coverage_percent >= 80 ? 'bg-green-500' :
-                      coverageReport.coverage_percent >= 50 ? 'bg-yellow-500' : 'bg-red-500'
-                    }`}
-                    style={{ width: `${coverageReport.coverage_percent}%` }}
-                  />
-                </div>
-              </div>
-
-              {/* Summary */}
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
-                <div className="p-4 bg-gray-50 rounded-lg text-center">
-                  <p className="text-3xl font-bold text-gray-900">{coverageReport.total_controls}</p>
-                  <p className="text-sm text-gray-500">Controls gesamt</p>
-                </div>
-                <div className="p-4 bg-green-50 rounded-lg text-center">
-                  <p className="text-3xl font-bold text-green-600">{coverageReport.controls_with_evidence}</p>
-                  <p className="text-sm text-green-600">Mit Nachweis belegt</p>
-                </div>
-                <div className="p-4 bg-red-50 rounded-lg text-center">
-                  <p className="text-3xl font-bold text-red-600">{coverageReport.controls_without_evidence}</p>
-                  <p className="text-sm text-red-600">Ohne Nachweis</p>
-                </div>
-              </div>
-
-              {/* Check Summary */}
-              <div className="border-t pt-6">
-                <h4 className="font-medium text-gray-900 mb-3">Automatische Checks</h4>
-                <div className="flex items-center gap-4 text-sm text-gray-600">
-                  <span>{checks.length} Check-Definitionen</span>
-                  <span>{checks.filter(c => c.is_active).length} aktiv</span>
-                  <span>{checks.filter(c => c.last_run_at).length} mindestens 1x ausgefuehrt</span>
-                </div>
-              </div>
-
-              {/* Evidence Summary */}
-              <div className="border-t pt-6 mt-6">
-                <h4 className="font-medium text-gray-900 mb-3">Nachweise</h4>
-                <div className="flex items-center gap-4 text-sm text-gray-600">
-                  <span>{displayEvidence.length} Nachweise gesamt</span>
-                  <span className="text-green-600">{validCount} gueltig</span>
-                  <span className="text-red-600">{expiredCount} abgelaufen</span>
-                  <span className="text-yellow-600">{pendingCount} ausstehend</span>
-                </div>
-              </div>
-            </>
-          )}
-        </div>
+      {ev.activeTab === 'checks' && (
+        <ChecksTab checks={ev.checks} checksLoading={ev.checksLoading} checkResults={ev.checkResults}
+          runningCheckId={ev.runningCheckId} seedingChecks={ev.seedingChecks}
+          onRun={ev.runCheck} onLoadResults={ev.loadCheckResults} onSeed={ev.seedChecks} />
       )}
 
-      {/* Phase 3 Modals */}
-      {reviewEvidence && (
-        <ReviewModal
-          evidence={reviewEvidence}
-          onClose={() => setReviewEvidence(null)}
-          onSuccess={() => { setReviewEvidence(null); setRefreshKey(k => k + 1) }}
-        />
+      {ev.activeTab === 'mapping' && (
+        <MappingTab mappings={ev.mappings} coverageReport={ev.coverageReport} />
       )}
-      {rejectEvidence && (
-        <RejectModal
-          evidence={rejectEvidence}
-          onClose={() => setRejectEvidence(null)}
-          onSuccess={() => { setRejectEvidence(null); setRefreshKey(k => k + 1) }}
-        />
+
+      {ev.activeTab === 'report' && (
+        <ReportTab coverageReport={ev.coverageReport} checks={ev.checks}
+          displayEvidenceLength={ev.displayEvidence.length}
+          validCount={ev.validCount} expiredCount={ev.expiredCount} pendingCount={ev.pendingCount} />
       )}
-      {auditTrailId && (
-        <AuditTrailPanel
-          evidenceId={auditTrailId}
-          onClose={() => setAuditTrailId(null)}
-        />
+
+      {ev.reviewEvidence && (
+        <ReviewModal evidence={ev.reviewEvidence} onClose={() => ev.setReviewEvidence(null)}
+          onSuccess={() => { ev.setReviewEvidence(null); ev.setRefreshKey(k => k + 1) }} />
+      )}
+      {ev.rejectEvidence && (
+        <RejectModal evidence={ev.rejectEvidence} onClose={() => ev.setRejectEvidence(null)}
+          onSuccess={() => { ev.setRejectEvidence(null); ev.setRefreshKey(k => k + 1) }} />
+      )}
+      {ev.auditTrailId && (
+        <AuditTrailPanel evidenceId={ev.auditTrailId} onClose={() => ev.setAuditTrailId(null)} />
       )}
     </div>
   )
diff --git a/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/AutoSuggestPanel.tsx b/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/AutoSuggestPanel.tsx
new file mode 100644
index 0000000..9108926
--- /dev/null
+++ b/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/AutoSuggestPanel.tsx
@@ -0,0 +1,153 @@
+'use client'
+
+import { useState } from 'react'
+import { MatchOutput, CATEGORY_LABELS } from './types'
+
+export function AutoSuggestPanel({ matchResult, applying, onApply, onClose }: {
+  projectId: string
+  matchResult: MatchOutput
+  applying: boolean
+  onApply: (acceptedHazardCats: string[], acceptedMeasureIds: string[], acceptedEvidenceIds: string[], patternIds: string[]) => void
+  onClose: () => void
+}) {
+  const [selectedHazards, setSelectedHazards] = useState<Set<string>>(
+    new Set(matchResult.suggested_hazards.map(h => h.category))
+  )
+  const [selectedMeasures, setSelectedMeasures] = useState<Set<string>>(
+    new Set(matchResult.suggested_measures.map(m => m.measure_id))
+  )
+  const [selectedEvidence, setSelectedEvidence] = useState<Set<string>>(
+    new Set(matchResult.suggested_evidence.map(e => e.evidence_id))
+  )
+
+  function toggle<T>(set: Set<T>, setSet: (s: Set<T>) => void, key: T) {
+    const next = new Set(set)
+    if (next.has(key)) next.delete(key)
+    else next.add(key)
+    setSet(next)
+  }
+
+  const totalSelected = selectedHazards.size + selectedMeasures.size + selectedEvidence.size
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-xl border-2 border-purple-300 p-6 space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Pattern-Matching Ergebnisse</h3>
+          <p className="text-sm text-gray-500">
+            {matchResult.matched_patterns.length} Patterns erkannt, {matchResult.resolved_tags.length} Tags aufgeloest
+          </p>
+        </div>
+        <button onClick={onClose} className="p-1 text-gray-400 hover:text-gray-600 rounded">
+          <svg className="w-5 h-5" 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>
+
+      <div>
+        <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
+          Erkannte Patterns ({matchResult.matched_patterns.length})
+        </h4>
+        <div className="flex flex-wrap gap-2">
+          {matchResult.matched_patterns.sort((a, b) => b.priority - a.priority).map(p => (
+            <span key={p.pattern_id} className="inline-flex items-center gap-1 px-2 py-1 rounded-lg text-xs bg-purple-50 text-purple-700 border border-purple-200">
+              <span className="font-mono">{p.pattern_id}</span>
+              <span>{p.pattern_name}</span>
+              <span className="text-purple-400">P:{p.priority}</span>
+            </span>
+          ))}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+        <div className="border border-orange-200 rounded-lg p-3 bg-orange-50/50">
+          <h4 className="text-sm font-semibold text-orange-800 mb-2">Gefaehrdungen ({matchResult.suggested_hazards.length})</h4>
+          <div className="space-y-2 max-h-48 overflow-auto">
+            {matchResult.suggested_hazards.map(h => (
+              <label key={h.category} className="flex items-start gap-2 cursor-pointer">
+                <input type="checkbox" checked={selectedHazards.has(h.category)}
+                  onChange={() => toggle(selectedHazards, setSelectedHazards, h.category)}
+                  className="mt-0.5 accent-purple-600" />
+                <div>
+                  <div className="text-xs font-medium text-gray-900">{CATEGORY_LABELS[h.category] || h.category}</div>
+                  <div className="text-xs text-gray-500">Konfidenz: {Math.round(h.confidence * 100)}%</div>
+                </div>
+              </label>
+            ))}
+          </div>
+        </div>
+
+        <div className="border border-green-200 rounded-lg p-3 bg-green-50/50">
+          <h4 className="text-sm font-semibold text-green-800 mb-2">Massnahmen ({matchResult.suggested_measures.length})</h4>
+          <div className="space-y-2 max-h-48 overflow-auto">
+            {matchResult.suggested_measures.map(m => (
+              <label key={m.measure_id} className="flex items-start gap-2 cursor-pointer">
+                <input type="checkbox" checked={selectedMeasures.has(m.measure_id)}
+                  onChange={() => toggle(selectedMeasures, setSelectedMeasures, m.measure_id)}
+                  className="mt-0.5 accent-purple-600" />
+                <div>
+                  <div className="text-xs font-medium text-gray-900 font-mono">{m.measure_id}</div>
+                  <div className="text-xs text-gray-500">von {m.source_patterns.length} Pattern(s)</div>
+                </div>
+              </label>
+            ))}
+          </div>
+        </div>
+
+        <div className="border border-blue-200 rounded-lg p-3 bg-blue-50/50">
+          <h4 className="text-sm font-semibold text-blue-800 mb-2">Nachweise ({matchResult.suggested_evidence.length})</h4>
+          <div className="space-y-2 max-h-48 overflow-auto">
+            {matchResult.suggested_evidence.map(e => (
+              <label key={e.evidence_id} className="flex items-start gap-2 cursor-pointer">
+                <input type="checkbox" checked={selectedEvidence.has(e.evidence_id)}
+                  onChange={() => toggle(selectedEvidence, setSelectedEvidence, e.evidence_id)}
+                  className="mt-0.5 accent-purple-600" />
+                <div>
+                  <div className="text-xs font-medium text-gray-900 font-mono">{e.evidence_id}</div>
+                  <div className="text-xs text-gray-500">von {e.source_patterns.length} Pattern(s)</div>
+                </div>
+              </label>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {matchResult.resolved_tags.length > 0 && (
+        <div>
+          <h4 className="text-xs font-semibold text-gray-500 mb-1">Aufgeloeste Tags</h4>
+          <div className="flex flex-wrap gap-1">
+            {matchResult.resolved_tags.map(tag => (
+              <span key={tag} className="text-xs px-1.5 py-0.5 rounded bg-gray-100 text-gray-500">{tag}</span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div className="flex items-center justify-between pt-2 border-t border-gray-200">
+        <span className="text-sm text-gray-500">{totalSelected} Elemente ausgewaehlt</span>
+        <div className="flex gap-3">
+          <button onClick={onClose} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
+            Abbrechen
+          </button>
+          <button
+            onClick={() => onApply(
+              Array.from(selectedHazards),
+              Array.from(selectedMeasures),
+              Array.from(selectedEvidence),
+              matchResult.matched_patterns.map(p => p.pattern_id),
+            )}
+            disabled={totalSelected === 0 || applying}
+            className={`px-6 py-2 rounded-lg font-medium transition-colors ${totalSelected > 0 && !applying ? 'bg-purple-600 text-white hover:bg-purple-700' : 'bg-gray-200 text-gray-400 cursor-not-allowed'}`}>
+            {applying ? (
+              <span className="flex items-center gap-2">
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white" />
+                Wird uebernommen...
+              </span>
+            ) : `${totalSelected} uebernehmen`}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/HazardForm.tsx b/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/HazardForm.tsx
index fb26a3b..646c654 100644
--- a/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/HazardForm.tsx
+++ b/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/HazardForm.tsx
@@ -1,27 +1,37 @@
 'use client'
 
 import { useState } from 'react'
-import { HazardFormData, HAZARD_CATEGORIES, CATEGORY_LABELS, getRiskLevel, getRiskColor } from './types'
+import {
+  HazardFormData, LifecyclePhase, RoleInfo,
+  HAZARD_CATEGORIES, CATEGORY_LABELS, getRiskColor, getRiskLevelISO, getRiskLevelLegacy,
+} from './types'
 import { RiskBadge } from './RiskBadge'
 
-interface HazardFormProps {
+export function HazardForm({
+  onSubmit,
+  onCancel,
+  lifecyclePhases,
+  roles,
+}: {
   onSubmit: (data: HazardFormData) => void
   onCancel: () => void
-}
-
-export function HazardForm({ onSubmit, onCancel }: HazardFormProps) {
+  lifecyclePhases: LifecyclePhase[]
+  roles: RoleInfo[]
+}) {
   const [formData, setFormData] = useState<HazardFormData>({
-    name: '',
-    description: '',
-    category: 'mechanical',
-    component_id: '',
-    severity: 3,
-    exposure: 3,
-    probability: 3,
+    name: '', description: '', category: 'mechanical_hazard', component_id: '',
+    severity: 3, exposure: 3, probability: 3, avoidance: 3,
+    lifecycle_phase: '', trigger_event: '', affected_person: '',
+    possible_harm: '', hazardous_zone: '', machine_module: '',
   })
+  const [showExtended, setShowExtended] = useState(false)
 
-  const rInherent = formData.severity * formData.exposure * formData.probability
-  const riskLevel = getRiskLevel(rInherent)
+  const isISOMode = formData.avoidance > 0
+  const rInherent = isISOMode
+    ? formData.severity * formData.exposure * formData.probability * formData.avoidance
+    : formData.severity * formData.exposure * formData.probability
+  const riskLevel = isISOMode ? getRiskLevelISO(rInherent) : getRiskLevelLegacy(rInherent)
+  const formulaLabel = isISOMode ? 'R = S × F × P × A' : 'R = S × E × P'
 
   return (
     <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
@@ -30,77 +40,93 @@ export function HazardForm({ onSubmit, onCancel }: HazardFormProps) {
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div>
             <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Bezeichnung *</label>
-            <input
-              type="text"
-              value={formData.name}
+            <input type="text" value={formData.name}
               onChange={(e) => setFormData({ ...formData, name: e.target.value })}
               placeholder="z.B. Quetschung durch Roboterarm"
-              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-            />
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white" />
           </div>
           <div>
             <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Kategorie</label>
-            <select
-              value={formData.category}
-              onChange={(e) => setFormData({ ...formData, category: e.target.value })}
-              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-            >
-              {HAZARD_CATEGORIES.map((cat) => (
-                <option key={cat} value={cat}>{CATEGORY_LABELS[cat] || cat}</option>
-              ))}
+            <select value={formData.category} onChange={(e) => setFormData({ ...formData, category: e.target.value })}
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white">
+              {HAZARD_CATEGORIES.map((cat) => <option key={cat} value={cat}>{CATEGORY_LABELS[cat] || cat}</option>)}
             </select>
           </div>
         </div>
 
         <div>
           <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Beschreibung</label>
-          <textarea
-            value={formData.description}
-            onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-            rows={2}
-            placeholder="Detaillierte Beschreibung der Gefaehrdung..."
-            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-          />
+          <textarea value={formData.description} onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+            rows={2} placeholder="Detaillierte Beschreibung der Gefaehrdung..."
+            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white" />
         </div>
 
-        <div className="bg-gray-50 dark:bg-gray-750 rounded-lg p-4">
-          <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Risikobewertung (S x E x P)</h4>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <div>
-              <label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">
-                Schwere (S): <span className="font-bold">{formData.severity}</span>
-              </label>
-              <input type="range" min={1} max={5} value={formData.severity}
-                onChange={(e) => setFormData({ ...formData, severity: Number(e.target.value) })}
-                className="w-full accent-purple-600"
-              />
-              <div className="flex justify-between text-xs text-gray-400"><span>Gering</span><span>Toedlich</span></div>
-            </div>
-            <div>
-              <label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">
-                Exposition (E): <span className="font-bold">{formData.exposure}</span>
-              </label>
-              <input type="range" min={1} max={5} value={formData.exposure}
-                onChange={(e) => setFormData({ ...formData, exposure: Number(e.target.value) })}
-                className="w-full accent-purple-600"
-              />
-              <div className="flex justify-between text-xs text-gray-400"><span>Selten</span><span>Staendig</span></div>
-            </div>
-            <div>
-              <label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">
-                Wahrscheinlichkeit (P): <span className="font-bold">{formData.probability}</span>
-              </label>
-              <input type="range" min={1} max={5} value={formData.probability}
-                onChange={(e) => setFormData({ ...formData, probability: Number(e.target.value) })}
-                className="w-full accent-purple-600"
-              />
-              <div className="flex justify-between text-xs text-gray-400"><span>Unwahrscheinlich</span><span>Sehr wahrscheinlich</span></div>
-            </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Lebensphase</label>
+            <select value={formData.lifecycle_phase} onChange={(e) => setFormData({ ...formData, lifecycle_phase: e.target.value })}
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white">
+              <option value="">-- Keine Auswahl --</option>
+              {lifecyclePhases.map((p) => <option key={p.id} value={p.id}>{p.label_de}</option>)}
+            </select>
           </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Betroffene Personen</label>
+            <select value={formData.affected_person} onChange={(e) => setFormData({ ...formData, affected_person: e.target.value })}
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white">
+              <option value="">-- Bitte waehlen --</option>
+              {roles.map((r) => <option key={r.id} value={r.id}>{r.label_de}</option>)}
+            </select>
+          </div>
+        </div>
 
+        <button type="button" onClick={() => setShowExtended(!showExtended)}
+          className="text-sm text-purple-600 hover:text-purple-700 font-medium">
+          {showExtended ? 'Weniger Felder anzeigen' : 'Weitere Felder anzeigen (Ausloeser, Gefahrenzone, Modul...)'}
+        </button>
+
+        {showExtended && (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 bg-gray-50 dark:bg-gray-750 rounded-lg">
+            {[
+              { label: 'Ausloeseereignis', field: 'trigger_event' as const, placeholder: 'z.B. Schutztuer offen bei Betrieb' },
+              { label: 'Moeglicher Schaden', field: 'possible_harm' as const, placeholder: 'z.B. Schwere Quetschverletzung' },
+              { label: 'Gefahrenzone', field: 'hazardous_zone' as const, placeholder: 'z.B. Roboter-Arbeitsbereich' },
+              { label: 'Maschinenmodul', field: 'machine_module' as const, placeholder: 'z.B. Antriebseinheit' },
+            ].map(({ label, field, placeholder }) => (
+              <div key={field}>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{label}</label>
+                <input type="text" value={formData[field] as string}
+                  onChange={(e) => setFormData({ ...formData, [field]: e.target.value })}
+                  placeholder={placeholder}
+                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white" />
+              </div>
+            ))}
+          </div>
+        )}
+
+        <div className="bg-gray-50 dark:bg-gray-750 rounded-lg p-4">
+          <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Risikobewertung ({formulaLabel})</h4>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {[
+              { label: 'Schwere (S)', field: 'severity' as const, low: 'Gering', high: 'Toedlich' },
+              { label: 'Haeufigkeit (F)', field: 'exposure' as const, low: 'Selten', high: 'Staendig' },
+              { label: 'Wahrscheinlichkeit (P)', field: 'probability' as const, low: 'Unwahrscheinlich', high: 'Sehr wahrscheinlich' },
+              { label: 'Vermeidbarkeit (A)', field: 'avoidance' as const, low: 'Leicht', high: 'Unmoeglich' },
+            ].map(({ label, field, low, high }) => (
+              <div key={field}>
+                <label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">
+                  {label}: <span className="font-bold">{formData[field]}</span>
+                </label>
+                <input type="range" min={1} max={5} value={formData[field]}
+                  onChange={(e) => setFormData({ ...formData, [field]: Number(e.target.value) })}
+                  className="w-full accent-purple-600" />
+                <div className="flex justify-between text-xs text-gray-400"><span>{low}</span><span>{high}</span></div>
+              </div>
+            ))}
+          </div>
           <div className={`mt-4 p-3 rounded-lg border ${getRiskColor(riskLevel)}`}>
             <div className="flex items-center justify-between">
-              <span className="text-sm font-medium">R_inherent = S x E x P</span>
+              <span className="text-sm font-medium">{formulaLabel}</span>
               <div className="flex items-center gap-2">
                 <span className="text-lg font-bold">{rInherent}</span>
                 <RiskBadge level={riskLevel} />
@@ -111,13 +137,8 @@ export function HazardForm({ onSubmit, onCancel }: HazardFormProps) {
       </div>
 
       <div className="mt-4 flex items-center gap-3">
-        <button
-          onClick={() => onSubmit(formData)}
-          disabled={!formData.name}
-          className={`px-6 py-2 rounded-lg font-medium transition-colors ${
-            formData.name ? 'bg-purple-600 text-white hover:bg-purple-700' : 'bg-gray-200 text-gray-400 cursor-not-allowed'
-          }`}
-        >
+        <button onClick={() => onSubmit(formData)} disabled={!formData.name}
+          className={`px-6 py-2 rounded-lg font-medium transition-colors ${formData.name ? 'bg-purple-600 text-white hover:bg-purple-700' : 'bg-gray-200 text-gray-400 cursor-not-allowed'}`}>
           Hinzufuegen
         </button>
         <button onClick={onCancel} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
diff --git a/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/HazardTable.tsx b/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/HazardTable.tsx
index 13de838..dc1c88f 100644
--- a/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/HazardTable.tsx
+++ b/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/HazardTable.tsx
@@ -1,14 +1,13 @@
 'use client'
 
-import { Hazard, CATEGORY_LABELS, STATUS_LABELS } from './types'
-import { RiskBadge } from './RiskBadge'
+import { Hazard, LifecyclePhase, CATEGORY_LABELS, STATUS_LABELS } from './types'
+import { RiskBadge, ReviewStatusBadge } from './RiskBadge'
 
-interface HazardTableProps {
+export function HazardTable({ hazards, lifecyclePhases, onDelete }: {
   hazards: Hazard[]
+  lifecyclePhases: LifecyclePhase[]
   onDelete: (id: string) => void
-}
-
-export function HazardTable({ hazards, onDelete }: HazardTableProps) {
+}) {
   return (
     <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
       <div className="overflow-x-auto">
@@ -17,42 +16,52 @@ export function HazardTable({ hazards, onDelete }: HazardTableProps) {
             <tr className="bg-gray-50 dark:bg-gray-750 border-b border-gray-200 dark:border-gray-700">
               <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bezeichnung</th>
               <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Kategorie</th>
-              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Komponente</th>
               <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">S</th>
-              <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">E</th>
+              <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">F</th>
               <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">P</th>
+              <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">A</th>
               <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">R</th>
               <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Risiko</th>
+              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Review</th>
               <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
               <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Aktionen</th>
             </tr>
           </thead>
           <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
             {hazards
-              .sort((a, b) => b.r_inherent - a.r_inherent)
+              .sort((a, b) => (b.r_inherent || 0) - (a.r_inherent || 0))
               .map((hazard) => (
                 <tr key={hazard.id} className="hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors">
                   <td className="px-4 py-3">
-                    <div className="text-sm font-medium text-gray-900 dark:text-white">{hazard.name}</div>
+                    <div className="flex items-center gap-2">
+                      <div className="text-sm font-medium text-gray-900 dark:text-white">{hazard.name}</div>
+                      {hazard.name.startsWith('Auto:') && (
+                        <span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-green-100 text-green-700">Auto</span>
+                      )}
+                    </div>
                     {hazard.description && (
                       <div className="text-xs text-gray-500 truncate max-w-[250px]">{hazard.description}</div>
                     )}
+                    {hazard.lifecycle_phase && (
+                      <div className="text-xs text-purple-500 mt-0.5">
+                        {lifecyclePhases.find(p => p.id === hazard.lifecycle_phase)?.label_de || hazard.lifecycle_phase}
+                      </div>
+                    )}
                   </td>
                   <td className="px-4 py-3 text-sm text-gray-600">{CATEGORY_LABELS[hazard.category] || hazard.category}</td>
-                  <td className="px-4 py-3 text-sm text-gray-600">{hazard.component_name || '--'}</td>
                   <td className="px-4 py-3 text-sm text-gray-900 dark:text-white text-center font-medium">{hazard.severity}</td>
                   <td className="px-4 py-3 text-sm text-gray-900 dark:text-white text-center font-medium">{hazard.exposure}</td>
                   <td className="px-4 py-3 text-sm text-gray-900 dark:text-white text-center font-medium">{hazard.probability}</td>
+                  <td className="px-4 py-3 text-sm text-gray-900 dark:text-white text-center font-medium">{hazard.avoidance || '-'}</td>
                   <td className="px-4 py-3 text-sm text-gray-900 dark:text-white text-center font-bold">{hazard.r_inherent}</td>
                   <td className="px-4 py-3"><RiskBadge level={hazard.risk_level} /></td>
+                  <td className="px-4 py-3"><ReviewStatusBadge status={hazard.review_status || 'draft'} /></td>
                   <td className="px-4 py-3">
                     <span className="text-xs text-gray-500">{STATUS_LABELS[hazard.status] || hazard.status}</span>
                   </td>
                   <td className="px-4 py-3 text-right">
-                    <button
-                      onClick={() => onDelete(hazard.id)}
-                      className="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
-                    >
+                    <button onClick={() => onDelete(hazard.id)}
+                      className="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors">
                       <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                       </svg>
diff --git a/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/LibraryModal.tsx b/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/LibraryModal.tsx
index 2ab02f7..6b22ce7 100644
--- a/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/LibraryModal.tsx
+++ b/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/LibraryModal.tsx
@@ -3,15 +3,14 @@
 import { useState } from 'react'
 import { LibraryHazard, HAZARD_CATEGORIES, CATEGORY_LABELS } from './types'
 
-interface LibraryModalProps {
+export function LibraryModal({ library, onAdd, onClose }: {
   library: LibraryHazard[]
   onAdd: (item: LibraryHazard) => void
   onClose: () => void
-}
-
-export function LibraryModal({ library, onAdd, onClose }: LibraryModalProps) {
+}) {
   const [search, setSearch] = useState('')
   const [filterCat, setFilterCat] = useState('')
+  const [expandedId, setExpandedId] = useState<string | null>(null)
 
   const filtered = library.filter((h) => {
     const matchSearch = !search || h.name.toLowerCase().includes(search.toLowerCase()) || h.description.toLowerCase().includes(search.toLowerCase())
@@ -21,10 +20,10 @@ export function LibraryModal({ library, onAdd, onClose }: LibraryModalProps) {
 
   return (
     <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-white dark:bg-gray-800 rounded-xl w-full max-w-2xl max-h-[80vh] flex flex-col">
+      <div className="bg-white dark:bg-gray-800 rounded-xl w-full max-w-3xl max-h-[85vh] flex flex-col">
         <div className="p-6 border-b border-gray-200 dark:border-gray-700">
           <div className="flex items-center justify-between mb-4">
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Gefaehrdungsbibliothek</h3>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Gefaehrdungsbibliothek ({filtered.length} Eintraege)</h3>
             <button onClick={onClose} className="p-1 text-gray-400 hover:text-gray-600 rounded">
               <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -32,43 +31,61 @@ export function LibraryModal({ library, onAdd, onClose }: LibraryModalProps) {
             </button>
           </div>
           <div className="flex gap-3">
-            <input
-              type="text"
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
+            <input type="text" value={search} onChange={(e) => setSearch(e.target.value)}
               placeholder="Suchen..."
-              className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-            />
-            <select
-              value={filterCat}
-              onChange={(e) => setFilterCat(e.target.value)}
-              className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-            >
+              className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white" />
+            <select value={filterCat} onChange={(e) => setFilterCat(e.target.value)}
+              className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
               <option value="">Alle Kategorien</option>
-              {HAZARD_CATEGORIES.map((cat) => (
-                <option key={cat} value={cat}>{CATEGORY_LABELS[cat] || cat}</option>
-              ))}
+              {HAZARD_CATEGORIES.map((cat) => <option key={cat} value={cat}>{CATEGORY_LABELS[cat] || cat}</option>)}
             </select>
           </div>
         </div>
         <div className="flex-1 overflow-auto p-4 space-y-2">
           {filtered.length > 0 ? (
             filtered.map((item) => (
-              <div key={item.id} className="flex items-center justify-between p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-750">
-                <div className="flex-1 min-w-0 mr-3">
-                  <div className="text-sm font-medium text-gray-900 dark:text-white">{item.name}</div>
-                  <div className="text-xs text-gray-500 truncate">{item.description}</div>
-                  <div className="flex items-center gap-2 mt-1">
-                    <span className="text-xs text-gray-400">{CATEGORY_LABELS[item.category] || item.category}</span>
-                    <span className="text-xs text-gray-400">S:{item.default_severity} E:{item.default_exposure} P:{item.default_probability}</span>
+              <div key={item.id} className="rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-750">
+                <div className="flex items-center justify-between p-3">
+                  <div className="flex-1 min-w-0 mr-3 cursor-pointer"
+                    onClick={() => setExpandedId(expandedId === item.id ? null : item.id)}>
+                    <div className="text-sm font-medium text-gray-900 dark:text-white">{item.name}</div>
+                    <div className="text-xs text-gray-500 truncate">{item.description}</div>
+                    <div className="flex items-center gap-2 mt-1">
+                      <span className="text-xs text-gray-400">{CATEGORY_LABELS[item.category] || item.category}</span>
+                      <span className="text-xs text-gray-400">
+                        S:{item.default_severity} F:{item.default_exposure || 3} P:{item.default_probability} A:{item.default_avoidance || 3}
+                      </span>
+                    </div>
                   </div>
+                  <button onClick={() => onAdd(item)}
+                    className="flex-shrink-0 px-3 py-1.5 text-xs bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
+                    Hinzufuegen
+                  </button>
                 </div>
-                <button
-                  onClick={() => onAdd(item)}
-                  className="flex-shrink-0 px-3 py-1.5 text-xs bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
-                >
-                  Hinzufuegen
-                </button>
+                {expandedId === item.id && (
+                  <div className="px-3 pb-3 space-y-2 text-xs">
+                    {item.typical_causes && item.typical_causes.length > 0 && (
+                      <div><span className="font-medium text-gray-600">Typische Ursachen: </span>
+                        <span className="text-gray-500">{item.typical_causes.join(', ')}</span></div>
+                    )}
+                    {item.typical_harm && (
+                      <div><span className="font-medium text-gray-600">Typischer Schaden: </span>
+                        <span className="text-gray-500">{item.typical_harm}</span></div>
+                    )}
+                    {item.recommended_measures_design && item.recommended_measures_design.length > 0 && (
+                      <div><span className="font-medium text-blue-600">Konstruktiv: </span>
+                        <span className="text-gray-500">{item.recommended_measures_design.join(', ')}</span></div>
+                    )}
+                    {item.recommended_measures_technical && item.recommended_measures_technical.length > 0 && (
+                      <div><span className="font-medium text-green-600">Technisch: </span>
+                        <span className="text-gray-500">{item.recommended_measures_technical.join(', ')}</span></div>
+                    )}
+                    {item.recommended_measures_information && item.recommended_measures_information.length > 0 && (
+                      <div><span className="font-medium text-yellow-600">Information: </span>
+                        <span className="text-gray-500">{item.recommended_measures_information.join(', ')}</span></div>
+                    )}
+                  </div>
+                )}
               </div>
             ))
           ) : (
diff --git a/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/RiskBadge.tsx b/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/RiskBadge.tsx
index d405a74..61ed5a7 100644
--- a/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/RiskBadge.tsx
+++ b/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/RiskBadge.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { getRiskColor, getRiskLevelLabel } from './types'
+import { getRiskColor, getRiskLevelLabel, REVIEW_STATUS_LABELS } from './types'
 
 export function RiskBadge({ level }: { level: string }) {
   return (
@@ -9,3 +9,18 @@ export function RiskBadge({ level }: { level: string }) {
     </span>
   )
 }
+
+export function ReviewStatusBadge({ status }: { status: string }) {
+  const colors: Record<string, string> = {
+    draft: 'bg-gray-100 text-gray-600 border-gray-200',
+    in_review: 'bg-blue-100 text-blue-600 border-blue-200',
+    reviewed: 'bg-indigo-100 text-indigo-600 border-indigo-200',
+    approved: 'bg-green-100 text-green-600 border-green-200',
+    rejected: 'bg-red-100 text-red-600 border-red-200',
+  }
+  return (
+    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border ${colors[status] || colors.draft}`}>
+      {REVIEW_STATUS_LABELS[status] || status}
+    </span>
+  )
+}
diff --git a/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/types.ts b/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/types.ts
index ed90338..6aa55f4 100644
--- a/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/types.ts
+++ b/admin-compliance/app/sdk/iace/[projectId]/hazards/_components/types.ts
@@ -5,13 +5,23 @@ export interface Hazard {
   component_id: string | null
   component_name: string | null
   category: string
+  sub_category: string
   status: string
   severity: number
   exposure: number
   probability: number
+  avoidance: number
   r_inherent: number
   risk_level: string
+  machine_module: string
+  lifecycle_phase: string
+  trigger_event: string
+  affected_person: string
+  possible_harm: string
+  hazardous_zone: string
+  review_status: string
   created_at: string
+  source?: string
 }
 
 export interface LibraryHazard {
@@ -19,9 +29,31 @@ export interface LibraryHazard {
   name: string
   description: string
   category: string
+  sub_category: string
   default_severity: number
   default_exposure: number
   default_probability: number
+  default_avoidance: number
+  typical_causes: string[]
+  typical_harm: string
+  relevant_lifecycle_phases: string[]
+  recommended_measures_design: string[]
+  recommended_measures_technical: string[]
+  recommended_measures_information: string[]
+}
+
+export interface LifecyclePhase {
+  id: string
+  label_de: string
+  label_en: string
+  sort_order: number
+}
+
+export interface RoleInfo {
+  id: string
+  label_de: string
+  label_en: string
+  sort_order: number
 }
 
 export interface HazardFormData {
@@ -32,40 +64,84 @@ export interface HazardFormData {
   severity: number
   exposure: number
   probability: number
+  avoidance: number
+  lifecycle_phase: string
+  trigger_event: string
+  affected_person: string
+  possible_harm: string
+  hazardous_zone: string
+  machine_module: string
+}
+
+// Pattern matching types (Phase 5)
+export interface PatternMatch {
+  pattern_id: string
+  pattern_name: string
+  priority: number
+  matched_tags: string[]
+}
+
+export interface HazardSuggestion {
+  category: string
+  source_patterns: string[]
+  confidence: number
+}
+
+export interface MeasureSuggestion {
+  measure_id: string
+  source_patterns: string[]
+}
+
+export interface EvidenceSuggestion {
+  evidence_id: string
+  source_patterns: string[]
+}
+
+export interface MatchOutput {
+  matched_patterns: PatternMatch[]
+  suggested_hazards: HazardSuggestion[]
+  suggested_measures: MeasureSuggestion[]
+  suggested_evidence: EvidenceSuggestion[]
+  resolved_tags: string[]
 }
 
 export const HAZARD_CATEGORIES = [
-  'mechanical', 'electrical', 'thermal', 'noise', 'vibration',
-  'radiation', 'material', 'ergonomic', 'software', 'ai_specific',
-  'cybersecurity', 'functional_safety', 'environmental',
+  'mechanical', 'electrical', 'thermal',
+  'pneumatic_hydraulic', 'noise_vibration', 'ergonomic',
+  'material_environmental', 'software_control', 'cyber_network', 'ai_specific',
 ]
 
 export const CATEGORY_LABELS: Record<string, string> = {
-  mechanical: 'Mechanisch',
-  electrical: 'Elektrisch',
-  thermal: 'Thermisch',
-  noise: 'Laerm',
-  vibration: 'Vibration',
-  radiation: 'Strahlung',
-  material: 'Stoffe/Materialien',
-  ergonomic: 'Ergonomie',
-  software: 'Software',
-  ai_specific: 'KI-spezifisch',
-  cybersecurity: 'Cybersecurity',
-  functional_safety: 'Funktionale Sicherheit',
-  environmental: 'Umgebung',
+  mechanical: 'A. Mechanisch', electrical: 'B. Elektrisch', thermal: 'C. Thermisch',
+  pneumatic_hydraulic: 'D. Pneumatik/Hydraulik', noise_vibration: 'E. Laerm/Vibration',
+  ergonomic: 'F. Ergonomie', material_environmental: 'G. Stoffe/Umwelt',
+  software_control: 'H. Software/Steuerung', cyber_network: 'I. Cyber/Netzwerk',
+  ai_specific: 'J. KI-spezifisch',
+  // Legacy names (backward compat)
+  mechanical_hazard: 'A. Mechanisch', electrical_hazard: 'B. Elektrisch',
+  thermal_hazard: 'C. Thermisch', software_fault: 'H. Software/Steuerung',
+  safety_function_failure: 'H. Sicherheitsfunktionen', false_classification: 'J. KI-spezifisch',
+  unauthorized_access: 'I. Cyber/Netzwerk', configuration_error: 'H. Konfiguration',
+  hmi_error: 'H. HMI-Fehler', integration_error: 'H. Integration',
+  communication_failure: 'I. Kommunikation', sensor_spoofing: 'I. Sensormanipulation',
+  model_drift: 'J. Modelldrift', data_poisoning: 'J. Daten-Poisoning',
+  emc_hazard: 'B. EMV', maintenance_hazard: 'F. Wartung', update_failure: 'H. Update-Fehler',
 }
 
 export const STATUS_LABELS: Record<string, string> = {
-  identified: 'Identifiziert',
-  assessed: 'Bewertet',
-  mitigated: 'Gemindert',
-  accepted: 'Akzeptiert',
-  closed: 'Geschlossen',
+  identified: 'Identifiziert', assessed: 'Bewertet',
+  mitigated: 'Gemindert', accepted: 'Akzeptiert', closed: 'Geschlossen',
+}
+
+export const REVIEW_STATUS_LABELS: Record<string, string> = {
+  draft: 'Entwurf', in_review: 'In Pruefung',
+  reviewed: 'Geprueft', approved: 'Freigegeben', rejected: 'Abgelehnt',
 }
 
 export function getRiskColor(level: string): string {
   switch (level) {
+    case 'not_acceptable': return 'bg-red-200 text-red-900 border-red-300'
+    case 'very_high': return 'bg-red-100 text-red-700 border-red-200'
     case 'critical': return 'bg-red-100 text-red-700 border-red-200'
     case 'high': return 'bg-orange-100 text-orange-700 border-orange-200'
     case 'medium': return 'bg-yellow-100 text-yellow-700 border-yellow-200'
@@ -74,7 +150,15 @@ export function getRiskColor(level: string): string {
   }
 }
 
-export function getRiskLevel(r: number): string {
+export function getRiskLevelISO(r: number): string {
+  if (r > 300) return 'not_acceptable'
+  if (r >= 151) return 'very_high'
+  if (r >= 61) return 'high'
+  if (r >= 21) return 'medium'
+  return 'low'
+}
+
+export function getRiskLevelLegacy(r: number): string {
   if (r >= 100) return 'critical'
   if (r >= 50) return 'high'
   if (r >= 20) return 'medium'
@@ -83,6 +167,8 @@ export function getRiskLevel(r: number): string {
 
 export function getRiskLevelLabel(level: string): string {
   switch (level) {
+    case 'not_acceptable': return 'Nicht akzeptabel'
+    case 'very_high': return 'Sehr hoch'
     case 'critical': return 'Kritisch'
     case 'high': return 'Hoch'
     case 'medium': return 'Mittel'
diff --git a/admin-compliance/app/sdk/iace/[projectId]/hazards/_hooks/useHazards.ts b/admin-compliance/app/sdk/iace/[projectId]/hazards/_hooks/useHazards.ts
new file mode 100644
index 0000000..96171d5
--- /dev/null
+++ b/admin-compliance/app/sdk/iace/[projectId]/hazards/_hooks/useHazards.ts
@@ -0,0 +1,173 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import {
+  Hazard, LibraryHazard, LifecyclePhase, RoleInfo, HazardFormData, MatchOutput,
+  CATEGORY_LABELS,
+} from '../_components/types'
+
+export function useHazards(projectId: string) {
+  const [hazards, setHazards] = useState<Hazard[]>([])
+  const [library, setLibrary] = useState<LibraryHazard[]>([])
+  const [lifecyclePhases, setLifecyclePhases] = useState<LifecyclePhase[]>([])
+  const [roles, setRoles] = useState<RoleInfo[]>([])
+  const [loading, setLoading] = useState(true)
+  const [showForm, setShowForm] = useState(false)
+  const [showLibrary, setShowLibrary] = useState(false)
+  const [suggestingAI, setSuggestingAI] = useState(false)
+  const [matchingPatterns, setMatchingPatterns] = useState(false)
+  const [matchResult, setMatchResult] = useState<MatchOutput | null>(null)
+  const [applyingPatterns, setApplyingPatterns] = useState(false)
+
+  useEffect(() => {
+    fetchHazards()
+    fetchLifecyclePhases()
+    fetchRoles()
+  }, [projectId]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  async function fetchHazards() {
+    try {
+      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/hazards`)
+      if (res.ok) {
+        const json = await res.json()
+        setHazards(json.hazards || json || [])
+      }
+    } catch (err) {
+      console.error('Failed to fetch hazards:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function fetchLifecyclePhases() {
+    try {
+      const res = await fetch('/api/sdk/v1/iace/lifecycle-phases')
+      if (res.ok) { const json = await res.json(); setLifecyclePhases(json.lifecycle_phases || []) }
+    } catch (err) { console.error('Failed to fetch lifecycle phases:', err) }
+  }
+
+  async function fetchRoles() {
+    try {
+      const res = await fetch('/api/sdk/v1/iace/roles')
+      if (res.ok) { const json = await res.json(); setRoles(json.roles || []) }
+    } catch (err) { console.error('Failed to fetch roles:', err) }
+  }
+
+  async function fetchLibrary() {
+    try {
+      const res = await fetch('/api/sdk/v1/iace/hazard-library')
+      if (res.ok) { const json = await res.json(); setLibrary(json.hazard_library || json.hazards || json || []) }
+    } catch (err) { console.error('Failed to fetch hazard library:', err) }
+    setShowLibrary(true)
+  }
+
+  async function handleAddFromLibrary(item: LibraryHazard) {
+    try {
+      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/hazards`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: item.name, description: item.description, category: item.category,
+          sub_category: item.sub_category || '', severity: item.default_severity,
+          exposure: item.default_exposure || 3, probability: item.default_probability,
+          avoidance: item.default_avoidance || 3,
+        }),
+      })
+      if (res.ok) await fetchHazards()
+    } catch (err) { console.error('Failed to add from library:', err) }
+  }
+
+  async function handleSubmit(data: HazardFormData) {
+    try {
+      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/hazards`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      })
+      if (res.ok) { setShowForm(false); await fetchHazards() }
+    } catch (err) { console.error('Failed to add hazard:', err) }
+  }
+
+  async function handleAISuggestions() {
+    setSuggestingAI(true)
+    try {
+      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/hazards/suggest`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+      })
+      if (res.ok) await fetchHazards()
+    } catch (err) { console.error('Failed to get AI suggestions:', err) }
+    finally { setSuggestingAI(false) }
+  }
+
+  async function handlePatternMatching() {
+    setMatchingPatterns(true)
+    setMatchResult(null)
+    try {
+      const compRes = await fetch(`/api/sdk/v1/iace/projects/${projectId}/components`)
+      let componentLibraryIds: string[] = []
+      let energySourceIds: string[] = []
+      if (compRes.ok) {
+        const compJson = await compRes.json()
+        const comps = compJson.components || compJson || []
+        componentLibraryIds = comps.map((c: { library_component_id?: string }) => c.library_component_id).filter(Boolean) as string[]
+        const allEnergyIds = comps.flatMap((c: { energy_source_ids?: string[] }) => c.energy_source_ids || [])
+        energySourceIds = [...new Set(allEnergyIds)] as string[]
+      }
+      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/match-patterns`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ component_library_ids: componentLibraryIds, energy_source_ids: energySourceIds, lifecycle_phases: [], custom_tags: [] }),
+      })
+      if (res.ok) setMatchResult(await res.json())
+    } catch (err) { console.error('Failed to match patterns:', err) }
+    finally { setMatchingPatterns(false) }
+  }
+
+  async function handleApplyPatterns(
+    acceptedHazardCats: string[], acceptedMeasureIds: string[],
+    acceptedEvidenceIds: string[], patternIds: string[],
+  ) {
+    setApplyingPatterns(true)
+    try {
+      const acceptedHazards = acceptedHazardCats.map(cat => ({
+        name: `Auto: ${CATEGORY_LABELS[cat] || cat}`,
+        description: `Automatisch erkannte Gefaehrdung aus Pattern-Matching (Kategorie: ${cat})`,
+        category: cat, severity: 3, exposure: 3, probability: 3, avoidance: 3,
+      }))
+      const acceptedMeasures = acceptedMeasureIds.map(id => ({
+        name: `Auto: Massnahme ${id}`,
+        description: `Automatisch vorgeschlagene Massnahme aus Pattern-Matching`,
+        reduction_type: 'design',
+      }))
+      const acceptedEvidence = acceptedEvidenceIds.map(id => ({
+        title: `Auto: Nachweis ${id}`,
+        description: `Automatisch vorgeschlagener Nachweis aus Pattern-Matching`,
+        method: 'test_report',
+      }))
+      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/apply-patterns`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ accepted_hazards: acceptedHazards, accepted_measures: acceptedMeasures, accepted_evidence: acceptedEvidence, source_pattern_ids: patternIds }),
+      })
+      if (res.ok) { setMatchResult(null); await fetchHazards() }
+    } catch (err) { console.error('Failed to apply patterns:', err) }
+    finally { setApplyingPatterns(false) }
+  }
+
+  async function handleDelete(id: string) {
+    if (!confirm('Gefaehrdung wirklich loeschen?')) return
+    try {
+      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/hazards/${id}`, { method: 'DELETE' })
+      if (res.ok) await fetchHazards()
+    } catch (err) { console.error('Failed to delete hazard:', err) }
+  }
+
+  return {
+    hazards, library, lifecyclePhases, roles, loading,
+    showForm, setShowForm, showLibrary, setShowLibrary,
+    suggestingAI, matchingPatterns, matchResult, setMatchResult, applyingPatterns,
+    fetchLibrary, handleAddFromLibrary, handleSubmit,
+    handleAISuggestions, handlePatternMatching, handleApplyPatterns, handleDelete,
+  }
+}
diff --git a/admin-compliance/app/sdk/iace/[projectId]/hazards/page.tsx b/admin-compliance/app/sdk/iace/[projectId]/hazards/page.tsx
index 3424f93..06b7b34 100644
--- a/admin-compliance/app/sdk/iace/[projectId]/hazards/page.tsx
+++ b/admin-compliance/app/sdk/iace/[projectId]/hazards/page.tsx
@@ -1,1066 +1,19 @@
 'use client'
 
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import { useParams } from 'next/navigation'
-
-interface Hazard {
-  id: string
-  name: string
-  description: string
-  component_id: string | null
-  component_name: string | null
-  category: string
-  sub_category: string
-  status: string
-  severity: number
-  exposure: number
-  probability: number
-  avoidance: number
-  r_inherent: number
-  risk_level: string
-  machine_module: string
-  lifecycle_phase: string
-  trigger_event: string
-  affected_person: string
-  possible_harm: string
-  hazardous_zone: string
-  review_status: string
-  created_at: string
-  source?: string
-}
-
-interface LibraryHazard {
-  id: string
-  name: string
-  description: string
-  category: string
-  sub_category: string
-  default_severity: number
-  default_exposure: number
-  default_probability: number
-  default_avoidance: number
-  typical_causes: string[]
-  typical_harm: string
-  relevant_lifecycle_phases: string[]
-  recommended_measures_design: string[]
-  recommended_measures_technical: string[]
-  recommended_measures_information: string[]
-}
-
-interface LifecyclePhase {
-  id: string
-  label_de: string
-  label_en: string
-  sort_order: number
-}
-
-interface RoleInfo {
-  id: string
-  label_de: string
-  label_en: string
-  sort_order: number
-}
-
-// Pattern matching types (Phase 5)
-interface PatternMatch {
-  pattern_id: string
-  pattern_name: string
-  priority: number
-  matched_tags: string[]
-}
-
-interface HazardSuggestion {
-  category: string
-  source_patterns: string[]
-  confidence: number
-}
-
-interface MeasureSuggestion {
-  measure_id: string
-  source_patterns: string[]
-}
-
-interface EvidenceSuggestion {
-  evidence_id: string
-  source_patterns: string[]
-}
-
-interface MatchOutput {
-  matched_patterns: PatternMatch[]
-  suggested_hazards: HazardSuggestion[]
-  suggested_measures: MeasureSuggestion[]
-  suggested_evidence: EvidenceSuggestion[]
-  resolved_tags: string[]
-}
-
-// ISO 12100 Hazard Categories (A-J)
-const HAZARD_CATEGORIES = [
-  'mechanical', 'electrical', 'thermal',
-  'pneumatic_hydraulic', 'noise_vibration', 'ergonomic',
-  'material_environmental', 'software_control', 'cyber_network',
-  'ai_specific',
-]
-
-const CATEGORY_LABELS: Record<string, string> = {
-  // Primary categories (new naming)
-  mechanical: 'A. Mechanisch',
-  electrical: 'B. Elektrisch',
-  thermal: 'C. Thermisch',
-  pneumatic_hydraulic: 'D. Pneumatik/Hydraulik',
-  noise_vibration: 'E. Laerm/Vibration',
-  ergonomic: 'F. Ergonomie',
-  material_environmental: 'G. Stoffe/Umwelt',
-  software_control: 'H. Software/Steuerung',
-  cyber_network: 'I. Cyber/Netzwerk',
-  ai_specific: 'J. KI-spezifisch',
-  // Legacy names (backward compat for existing data)
-  mechanical_hazard: 'A. Mechanisch',
-  electrical_hazard: 'B. Elektrisch',
-  thermal_hazard: 'C. Thermisch',
-  software_fault: 'H. Software/Steuerung',
-  safety_function_failure: 'H. Sicherheitsfunktionen',
-  false_classification: 'J. KI-spezifisch',
-  unauthorized_access: 'I. Cyber/Netzwerk',
-  configuration_error: 'H. Konfiguration',
-  hmi_error: 'H. HMI-Fehler',
-  integration_error: 'H. Integration',
-  communication_failure: 'I. Kommunikation',
-  sensor_spoofing: 'I. Sensormanipulation',
-  model_drift: 'J. Modelldrift',
-  data_poisoning: 'J. Daten-Poisoning',
-  emc_hazard: 'B. EMV',
-  maintenance_hazard: 'F. Wartung',
-  update_failure: 'H. Update-Fehler',
-}
-
-const STATUS_LABELS: Record<string, string> = {
-  identified: 'Identifiziert',
-  assessed: 'Bewertet',
-  mitigated: 'Gemindert',
-  accepted: 'Akzeptiert',
-  closed: 'Geschlossen',
-}
-
-const REVIEW_STATUS_LABELS: Record<string, string> = {
-  draft: 'Entwurf',
-  in_review: 'In Pruefung',
-  reviewed: 'Geprueft',
-  approved: 'Freigegeben',
-  rejected: 'Abgelehnt',
-}
-
-function getRiskColor(level: string): string {
-  switch (level) {
-    case 'not_acceptable': return 'bg-red-200 text-red-900 border-red-300'
-    case 'very_high': return 'bg-red-100 text-red-700 border-red-200'
-    case 'critical': return 'bg-red-100 text-red-700 border-red-200'
-    case 'high': return 'bg-orange-100 text-orange-700 border-orange-200'
-    case 'medium': return 'bg-yellow-100 text-yellow-700 border-yellow-200'
-    case 'low': return 'bg-green-100 text-green-700 border-green-200'
-    default: return 'bg-gray-100 text-gray-700 border-gray-200'
-  }
-}
-
-// ISO 12100 mode risk levels (S*F*P*A, max 625)
-function getRiskLevelISO(r: number): string {
-  if (r > 300) return 'not_acceptable'
-  if (r >= 151) return 'very_high'
-  if (r >= 61) return 'high'
-  if (r >= 21) return 'medium'
-  return 'low'
-}
-
-// Legacy mode (S*E*P, max 125)
-function getRiskLevelLegacy(r: number): string {
-  if (r >= 100) return 'critical'
-  if (r >= 50) return 'high'
-  if (r >= 20) return 'medium'
-  return 'low'
-}
-
-function getRiskLevelLabel(level: string): string {
-  switch (level) {
-    case 'not_acceptable': return 'Nicht akzeptabel'
-    case 'very_high': return 'Sehr hoch'
-    case 'critical': return 'Kritisch'
-    case 'high': return 'Hoch'
-    case 'medium': return 'Mittel'
-    case 'low': return 'Niedrig'
-    default: return level
-  }
-}
-
-function RiskBadge({ level }: { level: string }) {
-  return (
-    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border ${getRiskColor(level)}`}>
-      {getRiskLevelLabel(level)}
-    </span>
-  )
-}
-
-function ReviewStatusBadge({ status }: { status: string }) {
-  const colors: Record<string, string> = {
-    draft: 'bg-gray-100 text-gray-600 border-gray-200',
-    in_review: 'bg-blue-100 text-blue-600 border-blue-200',
-    reviewed: 'bg-indigo-100 text-indigo-600 border-indigo-200',
-    approved: 'bg-green-100 text-green-600 border-green-200',
-    rejected: 'bg-red-100 text-red-600 border-red-200',
-  }
-  return (
-    <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium border ${colors[status] || colors.draft}`}>
-      {REVIEW_STATUS_LABELS[status] || status}
-    </span>
-  )
-}
-
-interface HazardFormData {
-  name: string
-  description: string
-  category: string
-  component_id: string
-  severity: number
-  exposure: number
-  probability: number
-  avoidance: number
-  lifecycle_phase: string
-  trigger_event: string
-  affected_person: string
-  possible_harm: string
-  hazardous_zone: string
-  machine_module: string
-}
-
-function HazardForm({
-  onSubmit,
-  onCancel,
-  lifecyclePhases,
-  roles,
-}: {
-  onSubmit: (data: HazardFormData) => void
-  onCancel: () => void
-  lifecyclePhases: LifecyclePhase[]
-  roles: RoleInfo[]
-}) {
-  const [formData, setFormData] = useState<HazardFormData>({
-    name: '',
-    description: '',
-    category: 'mechanical_hazard',
-    component_id: '',
-    severity: 3,
-    exposure: 3,
-    probability: 3,
-    avoidance: 3,
-    lifecycle_phase: '',
-    trigger_event: '',
-    affected_person: '',
-    possible_harm: '',
-    hazardous_zone: '',
-    machine_module: '',
-  })
-
-  const [showExtended, setShowExtended] = useState(false)
-
-  // ISO 12100 mode: S * F * P * A when avoidance is set
-  const isISOMode = formData.avoidance > 0
-  const rInherent = isISOMode
-    ? formData.severity * formData.exposure * formData.probability * formData.avoidance
-    : formData.severity * formData.exposure * formData.probability
-  const riskLevel = isISOMode ? getRiskLevelISO(rInherent) : getRiskLevelLegacy(rInherent)
-  const formulaLabel = isISOMode ? 'R = S × F × P × A' : 'R = S × E × P'
-
-  return (
-    <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
-      <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Neue Gefaehrdung</h3>
-      <div className="space-y-4">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Bezeichnung *</label>
-            <input
-              type="text"
-              value={formData.name}
-              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-              placeholder="z.B. Quetschung durch Roboterarm"
-              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Kategorie</label>
-            <select
-              value={formData.category}
-              onChange={(e) => setFormData({ ...formData, category: e.target.value })}
-              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-            >
-              {HAZARD_CATEGORIES.map((cat) => (
-                <option key={cat} value={cat}>{CATEGORY_LABELS[cat] || cat}</option>
-              ))}
-            </select>
-          </div>
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Beschreibung</label>
-          <textarea
-            value={formData.description}
-            onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-            rows={2}
-            placeholder="Detaillierte Beschreibung der Gefaehrdung..."
-            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-          />
-        </div>
-
-        {/* Lifecycle Phase */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Lebensphase</label>
-            <select
-              value={formData.lifecycle_phase}
-              onChange={(e) => setFormData({ ...formData, lifecycle_phase: e.target.value })}
-              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-            >
-              <option value="">-- Keine Auswahl --</option>
-              {lifecyclePhases.map((p) => (
-                <option key={p.id} value={p.id}>{p.label_de}</option>
-              ))}
-            </select>
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Betroffene Personen</label>
-            <select
-              value={formData.affected_person}
-              onChange={(e) => setFormData({ ...formData, affected_person: e.target.value })}
-              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-            >
-              <option value="">-- Bitte waehlen --</option>
-              {roles.map((r) => (
-                <option key={r.id} value={r.id}>{r.label_de}</option>
-              ))}
-            </select>
-          </div>
-        </div>
-
-        {/* Extended fields toggle */}
-        <button
-          type="button"
-          onClick={() => setShowExtended(!showExtended)}
-          className="text-sm text-purple-600 hover:text-purple-700 font-medium"
-        >
-          {showExtended ? 'Weniger Felder anzeigen' : 'Weitere Felder anzeigen (Ausloeser, Gefahrenzone, Modul...)'}
-        </button>
-
-        {showExtended && (
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 bg-gray-50 dark:bg-gray-750 rounded-lg">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Ausloeseereignis</label>
-              <input
-                type="text"
-                value={formData.trigger_event}
-                onChange={(e) => setFormData({ ...formData, trigger_event: e.target.value })}
-                placeholder="z.B. Schutztuer offen bei Betrieb"
-                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Moeglicher Schaden</label>
-              <input
-                type="text"
-                value={formData.possible_harm}
-                onChange={(e) => setFormData({ ...formData, possible_harm: e.target.value })}
-                placeholder="z.B. Schwere Quetschverletzung"
-                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Gefahrenzone</label>
-              <input
-                type="text"
-                value={formData.hazardous_zone}
-                onChange={(e) => setFormData({ ...formData, hazardous_zone: e.target.value })}
-                placeholder="z.B. Roboter-Arbeitsbereich"
-                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Maschinenmodul</label>
-              <input
-                type="text"
-                value={formData.machine_module}
-                onChange={(e) => setFormData({ ...formData, machine_module: e.target.value })}
-                placeholder="z.B. Antriebseinheit"
-                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-              />
-            </div>
-          </div>
-        )}
-
-        {/* S/F/P/A Sliders */}
-        <div className="bg-gray-50 dark:bg-gray-750 rounded-lg p-4">
-          <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
-            Risikobewertung ({formulaLabel})
-          </h4>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            <div>
-              <label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">
-                Schwere (S): <span className="font-bold">{formData.severity}</span>
-              </label>
-              <input
-                type="range" min={1} max={5} value={formData.severity}
-                onChange={(e) => setFormData({ ...formData, severity: Number(e.target.value) })}
-                className="w-full accent-purple-600"
-              />
-              <div className="flex justify-between text-xs text-gray-400">
-                <span>Gering</span><span>Toedlich</span>
-              </div>
-            </div>
-            <div>
-              <label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">
-                Haeufigkeit (F): <span className="font-bold">{formData.exposure}</span>
-              </label>
-              <input
-                type="range" min={1} max={5} value={formData.exposure}
-                onChange={(e) => setFormData({ ...formData, exposure: Number(e.target.value) })}
-                className="w-full accent-purple-600"
-              />
-              <div className="flex justify-between text-xs text-gray-400">
-                <span>Selten</span><span>Staendig</span>
-              </div>
-            </div>
-            <div>
-              <label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">
-                Wahrscheinlichkeit (P): <span className="font-bold">{formData.probability}</span>
-              </label>
-              <input
-                type="range" min={1} max={5} value={formData.probability}
-                onChange={(e) => setFormData({ ...formData, probability: Number(e.target.value) })}
-                className="w-full accent-purple-600"
-              />
-              <div className="flex justify-between text-xs text-gray-400">
-                <span>Unwahrscheinlich</span><span>Sehr wahrscheinlich</span>
-              </div>
-            </div>
-            <div>
-              <label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">
-                Vermeidbarkeit (A): <span className="font-bold">{formData.avoidance}</span>
-              </label>
-              <input
-                type="range" min={1} max={5} value={formData.avoidance}
-                onChange={(e) => setFormData({ ...formData, avoidance: Number(e.target.value) })}
-                className="w-full accent-purple-600"
-              />
-              <div className="flex justify-between text-xs text-gray-400">
-                <span>Leicht</span><span>Unmoeglich</span>
-              </div>
-            </div>
-          </div>
-
-          <div className={`mt-4 p-3 rounded-lg border ${getRiskColor(riskLevel)}`}>
-            <div className="flex items-center justify-between">
-              <span className="text-sm font-medium">{formulaLabel}</span>
-              <div className="flex items-center gap-2">
-                <span className="text-lg font-bold">{rInherent}</span>
-                <RiskBadge level={riskLevel} />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="mt-4 flex items-center gap-3">
-        <button
-          onClick={() => onSubmit(formData)}
-          disabled={!formData.name}
-          className={`px-6 py-2 rounded-lg font-medium transition-colors ${
-            formData.name
-              ? 'bg-purple-600 text-white hover:bg-purple-700'
-              : 'bg-gray-200 text-gray-400 cursor-not-allowed'
-          }`}
-        >
-          Hinzufuegen
-        </button>
-        <button onClick={onCancel} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
-          Abbrechen
-        </button>
-      </div>
-    </div>
-  )
-}
-
-function LibraryModal({
-  library,
-  onAdd,
-  onClose,
-}: {
-  library: LibraryHazard[]
-  onAdd: (item: LibraryHazard) => void
-  onClose: () => void
-}) {
-  const [search, setSearch] = useState('')
-  const [filterCat, setFilterCat] = useState('')
-  const [expandedId, setExpandedId] = useState<string | null>(null)
-
-  const filtered = library.filter((h) => {
-    const matchSearch = !search || h.name.toLowerCase().includes(search.toLowerCase()) || h.description.toLowerCase().includes(search.toLowerCase())
-    const matchCat = !filterCat || h.category === filterCat
-    return matchSearch && matchCat
-  })
-
-  return (
-    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-white dark:bg-gray-800 rounded-xl w-full max-w-3xl max-h-[85vh] flex flex-col">
-        <div className="p-6 border-b border-gray-200 dark:border-gray-700">
-          <div className="flex items-center justify-between mb-4">
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Gefaehrdungsbibliothek ({filtered.length} Eintraege)</h3>
-            <button onClick={onClose} className="p-1 text-gray-400 hover:text-gray-600 rounded">
-              <svg className="w-5 h-5" 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>
-          <div className="flex gap-3">
-            <input
-              type="text"
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              placeholder="Suchen..."
-              className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-            />
-            <select
-              value={filterCat}
-              onChange={(e) => setFilterCat(e.target.value)}
-              className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
-            >
-              <option value="">Alle Kategorien</option>
-              {HAZARD_CATEGORIES.map((cat) => (
-                <option key={cat} value={cat}>{CATEGORY_LABELS[cat] || cat}</option>
-              ))}
-            </select>
-          </div>
-        </div>
-        <div className="flex-1 overflow-auto p-4 space-y-2">
-          {filtered.length > 0 ? (
-            filtered.map((item) => (
-              <div key={item.id} className="rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-750">
-                <div className="flex items-center justify-between p-3">
-                  <div
-                    className="flex-1 min-w-0 mr-3 cursor-pointer"
-                    onClick={() => setExpandedId(expandedId === item.id ? null : item.id)}
-                  >
-                    <div className="text-sm font-medium text-gray-900 dark:text-white">{item.name}</div>
-                    <div className="text-xs text-gray-500 truncate">{item.description}</div>
-                    <div className="flex items-center gap-2 mt-1">
-                      <span className="text-xs text-gray-400">{CATEGORY_LABELS[item.category] || item.category}</span>
-                      <span className="text-xs text-gray-400">
-                        S:{item.default_severity} F:{item.default_exposure || 3} P:{item.default_probability} A:{item.default_avoidance || 3}
-                      </span>
-                    </div>
-                  </div>
-                  <button
-                    onClick={() => onAdd(item)}
-                    className="flex-shrink-0 px-3 py-1.5 text-xs bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
-                  >
-                    Hinzufuegen
-                  </button>
-                </div>
-                {expandedId === item.id && (
-                  <div className="px-3 pb-3 space-y-2 text-xs">
-                    {item.typical_causes && item.typical_causes.length > 0 && (
-                      <div>
-                        <span className="font-medium text-gray-600">Typische Ursachen: </span>
-                        <span className="text-gray-500">{item.typical_causes.join(', ')}</span>
-                      </div>
-                    )}
-                    {item.typical_harm && (
-                      <div>
-                        <span className="font-medium text-gray-600">Typischer Schaden: </span>
-                        <span className="text-gray-500">{item.typical_harm}</span>
-                      </div>
-                    )}
-                    {item.recommended_measures_design && item.recommended_measures_design.length > 0 && (
-                      <div>
-                        <span className="font-medium text-blue-600">Konstruktiv: </span>
-                        <span className="text-gray-500">{item.recommended_measures_design.join(', ')}</span>
-                      </div>
-                    )}
-                    {item.recommended_measures_technical && item.recommended_measures_technical.length > 0 && (
-                      <div>
-                        <span className="font-medium text-green-600">Technisch: </span>
-                        <span className="text-gray-500">{item.recommended_measures_technical.join(', ')}</span>
-                      </div>
-                    )}
-                    {item.recommended_measures_information && item.recommended_measures_information.length > 0 && (
-                      <div>
-                        <span className="font-medium text-yellow-600">Information: </span>
-                        <span className="text-gray-500">{item.recommended_measures_information.join(', ')}</span>
-                      </div>
-                    )}
-                  </div>
-                )}
-              </div>
-            ))
-          ) : (
-            <div className="text-center py-8 text-gray-500">Keine Eintraege gefunden</div>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-// ============================================================================
-// Auto-Suggest Panel (Phase 5 — Pattern Matching)
-// ============================================================================
-
-function AutoSuggestPanel({
-  projectId,
-  matchResult,
-  applying,
-  onApply,
-  onClose,
-}: {
-  projectId: string
-  matchResult: MatchOutput
-  applying: boolean
-  onApply: (acceptedHazardCats: string[], acceptedMeasureIds: string[], acceptedEvidenceIds: string[], patternIds: string[]) => void
-  onClose: () => void
-}) {
-  const [selectedHazards, setSelectedHazards] = useState<Set<string>>(
-    new Set(matchResult.suggested_hazards.map(h => h.category))
-  )
-  const [selectedMeasures, setSelectedMeasures] = useState<Set<string>>(
-    new Set(matchResult.suggested_measures.map(m => m.measure_id))
-  )
-  const [selectedEvidence, setSelectedEvidence] = useState<Set<string>>(
-    new Set(matchResult.suggested_evidence.map(e => e.evidence_id))
-  )
-
-  function toggleHazard(cat: string) {
-    setSelectedHazards(prev => {
-      const next = new Set(prev)
-      if (next.has(cat)) next.delete(cat)
-      else next.add(cat)
-      return next
-    })
-  }
-
-  function toggleMeasure(id: string) {
-    setSelectedMeasures(prev => {
-      const next = new Set(prev)
-      if (next.has(id)) next.delete(id)
-      else next.add(id)
-      return next
-    })
-  }
-
-  function toggleEvidence(id: string) {
-    setSelectedEvidence(prev => {
-      const next = new Set(prev)
-      if (next.has(id)) next.delete(id)
-      else next.add(id)
-      return next
-    })
-  }
-
-  const totalSelected = selectedHazards.size + selectedMeasures.size + selectedEvidence.size
-
-  return (
-    <div className="bg-white dark:bg-gray-800 rounded-xl border-2 border-purple-300 p-6 space-y-4">
-      <div className="flex items-center justify-between">
-        <div>
-          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-            Pattern-Matching Ergebnisse
-          </h3>
-          <p className="text-sm text-gray-500">
-            {matchResult.matched_patterns.length} Patterns erkannt, {matchResult.resolved_tags.length} Tags aufgeloest
-          </p>
-        </div>
-        <button onClick={onClose} className="p-1 text-gray-400 hover:text-gray-600 rounded">
-          <svg className="w-5 h-5" 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>
-
-      {/* Matched Patterns */}
-      <div>
-        <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
-          Erkannte Patterns ({matchResult.matched_patterns.length})
-        </h4>
-        <div className="flex flex-wrap gap-2">
-          {matchResult.matched_patterns
-            .sort((a, b) => b.priority - a.priority)
-            .map(p => (
-              <span key={p.pattern_id} className="inline-flex items-center gap-1 px-2 py-1 rounded-lg text-xs bg-purple-50 text-purple-700 border border-purple-200">
-                <span className="font-mono">{p.pattern_id}</span>
-                <span>{p.pattern_name}</span>
-                <span className="text-purple-400">P:{p.priority}</span>
-              </span>
-            ))}
-        </div>
-      </div>
-
-      {/* 3-Column Review */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
-        {/* Hazards */}
-        <div className="border border-orange-200 rounded-lg p-3 bg-orange-50/50">
-          <h4 className="text-sm font-semibold text-orange-800 mb-2">
-            Gefaehrdungen ({matchResult.suggested_hazards.length})
-          </h4>
-          <div className="space-y-2 max-h-48 overflow-auto">
-            {matchResult.suggested_hazards.map(h => (
-              <label key={h.category} className="flex items-start gap-2 cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={selectedHazards.has(h.category)}
-                  onChange={() => toggleHazard(h.category)}
-                  className="mt-0.5 accent-purple-600"
-                />
-                <div>
-                  <div className="text-xs font-medium text-gray-900">
-                    {CATEGORY_LABELS[h.category] || h.category}
-                  </div>
-                  <div className="text-xs text-gray-500">
-                    Konfidenz: {Math.round(h.confidence * 100)}%
-                  </div>
-                </div>
-              </label>
-            ))}
-          </div>
-        </div>
-
-        {/* Measures */}
-        <div className="border border-green-200 rounded-lg p-3 bg-green-50/50">
-          <h4 className="text-sm font-semibold text-green-800 mb-2">
-            Massnahmen ({matchResult.suggested_measures.length})
-          </h4>
-          <div className="space-y-2 max-h-48 overflow-auto">
-            {matchResult.suggested_measures.map(m => (
-              <label key={m.measure_id} className="flex items-start gap-2 cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={selectedMeasures.has(m.measure_id)}
-                  onChange={() => toggleMeasure(m.measure_id)}
-                  className="mt-0.5 accent-purple-600"
-                />
-                <div>
-                  <div className="text-xs font-medium text-gray-900 font-mono">{m.measure_id}</div>
-                  <div className="text-xs text-gray-500">
-                    von {m.source_patterns.length} Pattern(s)
-                  </div>
-                </div>
-              </label>
-            ))}
-          </div>
-        </div>
-
-        {/* Evidence */}
-        <div className="border border-blue-200 rounded-lg p-3 bg-blue-50/50">
-          <h4 className="text-sm font-semibold text-blue-800 mb-2">
-            Nachweise ({matchResult.suggested_evidence.length})
-          </h4>
-          <div className="space-y-2 max-h-48 overflow-auto">
-            {matchResult.suggested_evidence.map(e => (
-              <label key={e.evidence_id} className="flex items-start gap-2 cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={selectedEvidence.has(e.evidence_id)}
-                  onChange={() => toggleEvidence(e.evidence_id)}
-                  className="mt-0.5 accent-purple-600"
-                />
-                <div>
-                  <div className="text-xs font-medium text-gray-900 font-mono">{e.evidence_id}</div>
-                  <div className="text-xs text-gray-500">
-                    von {e.source_patterns.length} Pattern(s)
-                  </div>
-                </div>
-              </label>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {/* Tags */}
-      {matchResult.resolved_tags.length > 0 && (
-        <div>
-          <h4 className="text-xs font-semibold text-gray-500 mb-1">Aufgeloeste Tags</h4>
-          <div className="flex flex-wrap gap-1">
-            {matchResult.resolved_tags.map(tag => (
-              <span key={tag} className="text-xs px-1.5 py-0.5 rounded bg-gray-100 text-gray-500">{tag}</span>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Actions */}
-      <div className="flex items-center justify-between pt-2 border-t border-gray-200">
-        <span className="text-sm text-gray-500">
-          {totalSelected} Elemente ausgewaehlt
-        </span>
-        <div className="flex gap-3">
-          <button onClick={onClose} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
-            Abbrechen
-          </button>
-          <button
-            onClick={() => onApply(
-              Array.from(selectedHazards),
-              Array.from(selectedMeasures),
-              Array.from(selectedEvidence),
-              matchResult.matched_patterns.map(p => p.pattern_id),
-            )}
-            disabled={totalSelected === 0 || applying}
-            className={`px-6 py-2 rounded-lg font-medium transition-colors ${
-              totalSelected > 0 && !applying
-                ? 'bg-purple-600 text-white hover:bg-purple-700'
-                : 'bg-gray-200 text-gray-400 cursor-not-allowed'
-            }`}
-          >
-            {applying ? (
-              <span className="flex items-center gap-2">
-                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white" />
-                Wird uebernommen...
-              </span>
-            ) : (
-              `${totalSelected} uebernehmen`
-            )}
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-// ============================================================================
-// Main Page
-// ============================================================================
+import { HazardForm } from './_components/HazardForm'
+import { HazardTable } from './_components/HazardTable'
+import { LibraryModal } from './_components/LibraryModal'
+import { AutoSuggestPanel } from './_components/AutoSuggestPanel'
+import { useHazards } from './_hooks/useHazards'
 
 export default function HazardsPage() {
   const params = useParams()
   const projectId = params.projectId as string
-  const [hazards, setHazards] = useState<Hazard[]>([])
-  const [library, setLibrary] = useState<LibraryHazard[]>([])
-  const [lifecyclePhases, setLifecyclePhases] = useState<LifecyclePhase[]>([])
-  const [roles, setRoles] = useState<RoleInfo[]>([])
-  const [loading, setLoading] = useState(true)
-  const [showForm, setShowForm] = useState(false)
-  const [showLibrary, setShowLibrary] = useState(false)
-  const [suggestingAI, setSuggestingAI] = useState(false)
-  // Pattern matching state (Phase 5)
-  const [matchingPatterns, setMatchingPatterns] = useState(false)
-  const [matchResult, setMatchResult] = useState<MatchOutput | null>(null)
-  const [applyingPatterns, setApplyingPatterns] = useState(false)
+  const h = useHazards(projectId)
 
-  useEffect(() => {
-    fetchHazards()
-    fetchLifecyclePhases()
-    fetchRoles()
-  }, [projectId])
-
-  async function fetchHazards() {
-    try {
-      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/hazards`)
-      if (res.ok) {
-        const json = await res.json()
-        setHazards(json.hazards || json || [])
-      }
-    } catch (err) {
-      console.error('Failed to fetch hazards:', err)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  async function fetchLifecyclePhases() {
-    try {
-      const res = await fetch('/api/sdk/v1/iace/lifecycle-phases')
-      if (res.ok) {
-        const json = await res.json()
-        setLifecyclePhases(json.lifecycle_phases || [])
-      }
-    } catch (err) {
-      console.error('Failed to fetch lifecycle phases:', err)
-    }
-  }
-
-  async function fetchRoles() {
-    try {
-      const res = await fetch('/api/sdk/v1/iace/roles')
-      if (res.ok) {
-        const json = await res.json()
-        setRoles(json.roles || [])
-      }
-    } catch (err) {
-      console.error('Failed to fetch roles:', err)
-    }
-  }
-
-  async function fetchLibrary() {
-    try {
-      const res = await fetch('/api/sdk/v1/iace/hazard-library')
-      if (res.ok) {
-        const json = await res.json()
-        setLibrary(json.hazard_library || json.hazards || json || [])
-      }
-    } catch (err) {
-      console.error('Failed to fetch hazard library:', err)
-    }
-    setShowLibrary(true)
-  }
-
-  async function handleAddFromLibrary(item: LibraryHazard) {
-    try {
-      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/hazards`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          name: item.name,
-          description: item.description,
-          category: item.category,
-          sub_category: item.sub_category || '',
-          severity: item.default_severity,
-          exposure: item.default_exposure || 3,
-          probability: item.default_probability,
-          avoidance: item.default_avoidance || 3,
-        }),
-      })
-      if (res.ok) await fetchHazards()
-    } catch (err) {
-      console.error('Failed to add from library:', err)
-    }
-  }
-
-  async function handleSubmit(data: HazardFormData) {
-    try {
-      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/hazards`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(data),
-      })
-      if (res.ok) {
-        setShowForm(false)
-        await fetchHazards()
-      }
-    } catch (err) {
-      console.error('Failed to add hazard:', err)
-    }
-  }
-
-  async function handleAISuggestions() {
-    setSuggestingAI(true)
-    try {
-      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/hazards/suggest`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-      })
-      if (res.ok) await fetchHazards()
-    } catch (err) {
-      console.error('Failed to get AI suggestions:', err)
-    } finally {
-      setSuggestingAI(false)
-    }
-  }
-
-  // Pattern matching (Phase 5)
-  async function handlePatternMatching() {
-    setMatchingPatterns(true)
-    setMatchResult(null)
-    try {
-      // First, fetch component library IDs and energy source IDs from project components
-      const compRes = await fetch(`/api/sdk/v1/iace/projects/${projectId}/components`)
-      let componentLibraryIds: string[] = []
-      let energySourceIds: string[] = []
-      if (compRes.ok) {
-        const compJson = await compRes.json()
-        const comps = compJson.components || compJson || []
-        componentLibraryIds = comps
-          .map((c: { library_component_id?: string }) => c.library_component_id)
-          .filter(Boolean) as string[]
-        const allEnergyIds = comps
-          .flatMap((c: { energy_source_ids?: string[] }) => c.energy_source_ids || [])
-        energySourceIds = [...new Set(allEnergyIds)] as string[]
-      }
-
-      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/match-patterns`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          component_library_ids: componentLibraryIds,
-          energy_source_ids: energySourceIds,
-          lifecycle_phases: [],
-          custom_tags: [],
-        }),
-      })
-      if (res.ok) {
-        const result: MatchOutput = await res.json()
-        setMatchResult(result)
-      }
-    } catch (err) {
-      console.error('Failed to match patterns:', err)
-    } finally {
-      setMatchingPatterns(false)
-    }
-  }
-
-  async function handleApplyPatterns(
-    acceptedHazardCats: string[],
-    acceptedMeasureIds: string[],
-    acceptedEvidenceIds: string[],
-    patternIds: string[],
-  ) {
-    setApplyingPatterns(true)
-    try {
-      // Build the accepted hazard requests from categories
-      const acceptedHazards = acceptedHazardCats.map(cat => ({
-        name: `Auto: ${CATEGORY_LABELS[cat] || cat}`,
-        description: `Automatisch erkannte Gefaehrdung aus Pattern-Matching (Kategorie: ${cat})`,
-        category: cat,
-        severity: 3,
-        exposure: 3,
-        probability: 3,
-        avoidance: 3,
-      }))
-
-      const acceptedMeasures = acceptedMeasureIds.map(id => ({
-        name: `Auto: Massnahme ${id}`,
-        description: `Automatisch vorgeschlagene Massnahme aus Pattern-Matching`,
-        reduction_type: 'design',
-      }))
-
-      const acceptedEvidence = acceptedEvidenceIds.map(id => ({
-        title: `Auto: Nachweis ${id}`,
-        description: `Automatisch vorgeschlagener Nachweis aus Pattern-Matching`,
-        method: 'test_report',
-      }))
-
-      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/apply-patterns`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          accepted_hazards: acceptedHazards,
-          accepted_measures: acceptedMeasures,
-          accepted_evidence: acceptedEvidence,
-          source_pattern_ids: patternIds,
-        }),
-      })
-      if (res.ok) {
-        setMatchResult(null)
-        await fetchHazards()
-      }
-    } catch (err) {
-      console.error('Failed to apply patterns:', err)
-    } finally {
-      setApplyingPatterns(false)
-    }
-  }
-
-  async function handleDelete(id: string) {
-    if (!confirm('Gefaehrdung wirklich loeschen?')) return
-    try {
-      const res = await fetch(`/api/sdk/v1/iace/projects/${projectId}/hazards/${id}`, { method: 'DELETE' })
-      if (res.ok) await fetchHazards()
-    } catch (err) {
-      console.error('Failed to delete hazard:', err)
-    }
-  }
-
-  if (loading) {
+  if (h.loading) {
     return (
       <div className="flex items-center justify-center h-64">
         <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
@@ -1070,7 +23,6 @@ export default function HazardsPage() {
 
   return (
     <div className="space-y-6">
-      {/* Header */}
       <div className="flex items-start justify-between">
         <div>
           <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Hazard Log</h1>
@@ -1079,12 +31,9 @@ export default function HazardsPage() {
           </p>
         </div>
         <div className="flex items-center gap-2">
-          <button
-            onClick={handlePatternMatching}
-            disabled={matchingPatterns}
-            className="flex items-center gap-2 px-3 py-2 border border-green-300 text-green-700 rounded-lg hover:bg-green-50 transition-colors disabled:opacity-50 text-sm"
-          >
-            {matchingPatterns ? (
+          <button onClick={h.handlePatternMatching} disabled={h.matchingPatterns}
+            className="flex items-center gap-2 px-3 py-2 border border-green-300 text-green-700 rounded-lg hover:bg-green-50 transition-colors disabled:opacity-50 text-sm">
+            {h.matchingPatterns ? (
               <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-green-600" />
             ) : (
               <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -1093,12 +42,9 @@ export default function HazardsPage() {
             )}
             Auto-Erkennung
           </button>
-          <button
-            onClick={handleAISuggestions}
-            disabled={suggestingAI}
-            className="flex items-center gap-2 px-3 py-2 border border-purple-300 text-purple-700 rounded-lg hover:bg-purple-50 transition-colors disabled:opacity-50 text-sm"
-          >
-            {suggestingAI ? (
+          <button onClick={h.handleAISuggestions} disabled={h.suggestingAI}
+            className="flex items-center gap-2 px-3 py-2 border border-purple-300 text-purple-700 rounded-lg hover:bg-purple-50 transition-colors disabled:opacity-50 text-sm">
+            {h.suggestingAI ? (
               <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-purple-600" />
             ) : (
               <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -1107,19 +53,15 @@ export default function HazardsPage() {
             )}
             KI-Vorschlaege
           </button>
-          <button
-            onClick={fetchLibrary}
-            className="flex items-center gap-2 px-3 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm"
-          >
+          <button onClick={h.fetchLibrary}
+            className="flex items-center gap-2 px-3 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm">
             <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
             </svg>
             Aus Bibliothek
           </button>
-          <button
-            onClick={() => setShowForm(true)}
-            className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-sm"
-          >
+          <button onClick={() => h.setShowForm(true)}
+            className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-sm">
             <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
             </svg>
@@ -1128,19 +70,12 @@ export default function HazardsPage() {
         </div>
       </div>
 
-      {/* Pattern Match Results (Phase 5) */}
-      {matchResult && matchResult.matched_patterns.length > 0 && (
-        <AutoSuggestPanel
-          projectId={projectId}
-          matchResult={matchResult}
-          applying={applyingPatterns}
-          onApply={handleApplyPatterns}
-          onClose={() => setMatchResult(null)}
-        />
+      {h.matchResult && h.matchResult.matched_patterns.length > 0 && (
+        <AutoSuggestPanel projectId={projectId} matchResult={h.matchResult} applying={h.applyingPatterns}
+          onApply={h.handleApplyPatterns} onClose={() => h.setMatchResult(null)} />
       )}
 
-      {/* No patterns matched info */}
-      {matchResult && matchResult.matched_patterns.length === 0 && (
+      {h.matchResult && h.matchResult.matched_patterns.length === 0 && (
         <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-4 flex items-start gap-3">
           <svg className="w-5 h-5 text-yellow-600 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <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" />
@@ -1150,135 +85,45 @@ export default function HazardsPage() {
               Keine Patterns erkannt. Fuegen Sie zuerst Komponenten aus der Bibliothek hinzu,
               damit die automatische Erkennung Gefaehrdungen ableiten kann.
             </p>
-            <button onClick={() => setMatchResult(null)} className="text-xs text-yellow-600 hover:text-yellow-700 mt-1">
+            <button onClick={() => h.setMatchResult(null)} className="text-xs text-yellow-600 hover:text-yellow-700 mt-1">
               Schliessen
             </button>
           </div>
         </div>
       )}
 
-      {/* Stats */}
-      {hazards.length > 0 && (
+      {h.hazards.length > 0 && (
         <div className="grid grid-cols-2 md:grid-cols-7 gap-3">
-          <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 text-center">
-            <div className="text-2xl font-bold text-gray-900 dark:text-white">{hazards.length}</div>
-            <div className="text-xs text-gray-500">Gesamt</div>
-          </div>
-          <div className="bg-white dark:bg-gray-800 rounded-lg border border-red-300 p-4 text-center">
-            <div className="text-2xl font-bold text-red-800">{hazards.filter((h) => h.risk_level === 'not_acceptable').length}</div>
-            <div className="text-xs text-red-800">Nicht akzeptabel</div>
-          </div>
-          <div className="bg-white dark:bg-gray-800 rounded-lg border border-red-200 p-4 text-center">
-            <div className="text-2xl font-bold text-red-600">{hazards.filter((h) => h.risk_level === 'very_high' || h.risk_level === 'critical').length}</div>
-            <div className="text-xs text-red-600">Sehr hoch/Kritisch</div>
-          </div>
-          <div className="bg-white dark:bg-gray-800 rounded-lg border border-orange-200 p-4 text-center">
-            <div className="text-2xl font-bold text-orange-600">{hazards.filter((h) => h.risk_level === 'high').length}</div>
-            <div className="text-xs text-orange-600">Hoch</div>
-          </div>
-          <div className="bg-white dark:bg-gray-800 rounded-lg border border-yellow-200 p-4 text-center">
-            <div className="text-2xl font-bold text-yellow-600">{hazards.filter((h) => h.risk_level === 'medium').length}</div>
-            <div className="text-xs text-yellow-600">Mittel</div>
-          </div>
-          <div className="bg-white dark:bg-gray-800 rounded-lg border border-green-200 p-4 text-center">
-            <div className="text-2xl font-bold text-green-600">{hazards.filter((h) => h.risk_level === 'low').length}</div>
-            <div className="text-xs text-green-600">Niedrig</div>
-          </div>
-          <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 p-4 text-center">
-            <div className="text-2xl font-bold text-gray-500">{hazards.filter((h) => h.risk_level === 'negligible').length}</div>
-            <div className="text-xs text-gray-500">Vernachlaessigbar</div>
-          </div>
+          {[
+            { label: 'Gesamt', count: h.hazards.length, color: 'border-gray-200', textColor: 'text-gray-900 dark:text-white', labelColor: 'text-gray-500' },
+            { label: 'Nicht akzeptabel', count: h.hazards.filter(x => x.risk_level === 'not_acceptable').length, color: 'border-red-300', textColor: 'text-red-800', labelColor: 'text-red-800' },
+            { label: 'Sehr hoch/Kritisch', count: h.hazards.filter(x => x.risk_level === 'very_high' || x.risk_level === 'critical').length, color: 'border-red-200', textColor: 'text-red-600', labelColor: 'text-red-600' },
+            { label: 'Hoch', count: h.hazards.filter(x => x.risk_level === 'high').length, color: 'border-orange-200', textColor: 'text-orange-600', labelColor: 'text-orange-600' },
+            { label: 'Mittel', count: h.hazards.filter(x => x.risk_level === 'medium').length, color: 'border-yellow-200', textColor: 'text-yellow-600', labelColor: 'text-yellow-600' },
+            { label: 'Niedrig', count: h.hazards.filter(x => x.risk_level === 'low').length, color: 'border-green-200', textColor: 'text-green-600', labelColor: 'text-green-600' },
+            { label: 'Vernachlaessigbar', count: h.hazards.filter(x => x.risk_level === 'negligible').length, color: 'border-gray-200', textColor: 'text-gray-500', labelColor: 'text-gray-500' },
+          ].map(({ label, count, color, textColor, labelColor }) => (
+            <div key={label} className={`bg-white dark:bg-gray-800 rounded-lg border ${color} p-4 text-center`}>
+              <div className={`text-2xl font-bold ${textColor}`}>{count}</div>
+              <div className={`text-xs ${labelColor}`}>{label}</div>
+            </div>
+          ))}
         </div>
       )}
 
-      {showForm && (
-        <HazardForm
-          onSubmit={handleSubmit}
-          onCancel={() => setShowForm(false)}
-          lifecyclePhases={lifecyclePhases}
-          roles={roles}
-        />
+      {h.showForm && (
+        <HazardForm onSubmit={h.handleSubmit} onCancel={() => h.setShowForm(false)}
+          lifecyclePhases={h.lifecyclePhases} roles={h.roles} />
       )}
 
-      {showLibrary && (
-        <LibraryModal
-          library={library}
-          onAdd={handleAddFromLibrary}
-          onClose={() => setShowLibrary(false)}
-        />
+      {h.showLibrary && (
+        <LibraryModal library={h.library} onAdd={h.handleAddFromLibrary} onClose={() => h.setShowLibrary(false)} />
       )}
 
-      {hazards.length > 0 ? (
-        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
-          <div className="overflow-x-auto">
-            <table className="w-full">
-              <thead>
-                <tr className="bg-gray-50 dark:bg-gray-750 border-b border-gray-200 dark:border-gray-700">
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bezeichnung</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Kategorie</th>
-                  <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">S</th>
-                  <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">F</th>
-                  <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">P</th>
-                  <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">A</th>
-                  <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">R</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Risiko</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Review</th>
-                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
-                  <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Aktionen</th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
-                {hazards
-                  .sort((a, b) => (b.r_inherent || 0) - (a.r_inherent || 0))
-                  .map((hazard) => (
-                    <tr key={hazard.id} className="hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors">
-                      <td className="px-4 py-3">
-                        <div className="flex items-center gap-2">
-                          <div className="text-sm font-medium text-gray-900 dark:text-white">{hazard.name}</div>
-                          {hazard.name.startsWith('Auto:') && (
-                            <span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-green-100 text-green-700">
-                              Auto
-                            </span>
-                          )}
-                        </div>
-                        {hazard.description && (
-                          <div className="text-xs text-gray-500 truncate max-w-[250px]">{hazard.description}</div>
-                        )}
-                        {hazard.lifecycle_phase && (
-                          <div className="text-xs text-purple-500 mt-0.5">
-                            {lifecyclePhases.find(p => p.id === hazard.lifecycle_phase)?.label_de || hazard.lifecycle_phase}
-                          </div>
-                        )}
-                      </td>
-                      <td className="px-4 py-3 text-sm text-gray-600">{CATEGORY_LABELS[hazard.category] || hazard.category}</td>
-                      <td className="px-4 py-3 text-sm text-gray-900 dark:text-white text-center font-medium">{hazard.severity}</td>
-                      <td className="px-4 py-3 text-sm text-gray-900 dark:text-white text-center font-medium">{hazard.exposure}</td>
-                      <td className="px-4 py-3 text-sm text-gray-900 dark:text-white text-center font-medium">{hazard.probability}</td>
-                      <td className="px-4 py-3 text-sm text-gray-900 dark:text-white text-center font-medium">{hazard.avoidance || '-'}</td>
-                      <td className="px-4 py-3 text-sm text-gray-900 dark:text-white text-center font-bold">{hazard.r_inherent}</td>
-                      <td className="px-4 py-3"><RiskBadge level={hazard.risk_level} /></td>
-                      <td className="px-4 py-3"><ReviewStatusBadge status={hazard.review_status || 'draft'} /></td>
-                      <td className="px-4 py-3">
-                        <span className="text-xs text-gray-500">{STATUS_LABELS[hazard.status] || hazard.status}</span>
-                      </td>
-                      <td className="px-4 py-3 text-right">
-                        <button
-                          onClick={() => handleDelete(hazard.id)}
-                          className="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
-                        >
-                          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                          </svg>
-                        </button>
-                      </td>
-                    </tr>
-                  ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
+      {h.hazards.length > 0 ? (
+        <HazardTable hazards={h.hazards} lifecyclePhases={h.lifecyclePhases} onDelete={h.handleDelete} />
       ) : (
-        !showForm && (
+        !h.showForm && (
           <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-12 text-center">
             <div className="w-16 h-16 mx-auto bg-orange-100 dark:bg-orange-900/30 rounded-full flex items-center justify-center mb-4">
               <svg className="w-8 h-8 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -1291,20 +136,16 @@ export default function HazardsPage() {
               KI-Vorschlaege oder die automatische Erkennung als Ausgangspunkt.
             </p>
             <div className="mt-6 flex items-center justify-center gap-3">
-              <button
-                onClick={handlePatternMatching}
-                disabled={matchingPatterns}
-                className="px-6 py-3 border border-green-300 text-green-700 rounded-lg hover:bg-green-50 transition-colors disabled:opacity-50"
-              >
-                {matchingPatterns ? 'Erkennung laeuft...' : 'Auto-Erkennung starten'}
+              <button onClick={h.handlePatternMatching} disabled={h.matchingPatterns}
+                className="px-6 py-3 border border-green-300 text-green-700 rounded-lg hover:bg-green-50 transition-colors disabled:opacity-50">
+                {h.matchingPatterns ? 'Erkennung laeuft...' : 'Auto-Erkennung starten'}
               </button>
-              <button
-                onClick={() => setShowForm(true)}
-                className="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
-              >
+              <button onClick={() => h.setShowForm(true)}
+                className="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
                 Manuell hinzufuegen
               </button>
-              <button onClick={fetchLibrary} className="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
+              <button onClick={h.fetchLibrary}
+                className="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors">
                 Bibliothek oeffnen
               </button>
             </div>
diff --git a/admin-compliance/app/sdk/process-tasks/_components/CalendarView.tsx b/admin-compliance/app/sdk/process-tasks/_components/CalendarView.tsx
new file mode 100644
index 0000000..bda635e
--- /dev/null
+++ b/admin-compliance/app/sdk/process-tasks/_components/CalendarView.tsx
@@ -0,0 +1,81 @@
+'use client'
+
+import { useState } from 'react'
+import { ProcessTask, daysUntil } from './types'
+
+export function CalendarView({ tasks }: { tasks: ProcessTask[] }) {
+  const [currentMonth, setCurrentMonth] = useState(() => {
+    const now = new Date()
+    return new Date(now.getFullYear(), now.getMonth(), 1)
+  })
+
+  const year = currentMonth.getFullYear()
+  const month = currentMonth.getMonth()
+  const daysInMonth = new Date(year, month + 1, 0).getDate()
+  const firstDayOfWeek = new Date(year, month, 1).getDay()
+  const startOffset = firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1
+
+  const monthLabel = currentMonth.toLocaleDateString('de-DE', { month: 'long', year: 'numeric' })
+
+  const tasksByDate: Record<string, ProcessTask[]> = {}
+  tasks.forEach(t => {
+    if (!t.next_due_date) return
+    const key = t.next_due_date.substring(0, 10)
+    if (!tasksByDate[key]) tasksByDate[key] = []
+    tasksByDate[key].push(t)
+  })
+
+  const prev = () => setCurrentMonth(new Date(year, month - 1, 1))
+  const next = () => setCurrentMonth(new Date(year, month + 1, 1))
+  const today = new Date().toISOString().substring(0, 10)
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-4">
+        <button onClick={prev} className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">&larr; Vorher</button>
+        <h3 className="text-lg font-semibold text-gray-900">{monthLabel}</h3>
+        <button onClick={next} className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">Weiter &rarr;</button>
+      </div>
+
+      <div className="grid grid-cols-7 gap-px bg-gray-200 rounded-xl overflow-hidden border border-gray-200">
+        {['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'].map(d => (
+          <div key={d} className="bg-gray-50 p-2 text-xs font-medium text-gray-500 text-center">{d}</div>
+        ))}
+        {Array.from({ length: startOffset }).map((_, i) => (
+          <div key={`empty-${i}`} className="bg-white p-2 min-h-[80px]"></div>
+        ))}
+        {Array.from({ length: daysInMonth }).map((_, i) => {
+          const day = i + 1
+          const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`
+          const dayTasks = tasksByDate[dateStr] || []
+          const isToday = dateStr === today
+
+          return (
+            <div key={day} className={`bg-white p-2 min-h-[80px] ${isToday ? 'ring-2 ring-purple-400 ring-inset' : ''}`}>
+              <span className={`text-xs font-medium ${isToday ? 'text-purple-600' : 'text-gray-500'}`}>{day}</span>
+              <div className="mt-1 space-y-0.5">
+                {dayTasks.slice(0, 3).map(t => {
+                  const days = daysUntil(t.next_due_date)
+                  let dotColor = 'bg-gray-400'
+                  if (t.status === 'completed') dotColor = 'bg-green-500'
+                  else if (days !== null && days < 0) dotColor = 'bg-red-500'
+                  else if (days !== null && days <= 7) dotColor = 'bg-orange-500'
+
+                  return (
+                    <div key={t.id} className="flex items-center gap-1" title={t.title}>
+                      <span className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${dotColor}`}></span>
+                      <span className="text-[10px] text-gray-600 truncate">{t.title}</span>
+                    </div>
+                  )
+                })}
+                {dayTasks.length > 3 && (
+                  <span className="text-[10px] text-gray-400">+{dayTasks.length - 3} mehr</span>
+                )}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/process-tasks/_components/CompleteModal.tsx b/admin-compliance/app/sdk/process-tasks/_components/CompleteModal.tsx
new file mode 100644
index 0000000..745a9d3
--- /dev/null
+++ b/admin-compliance/app/sdk/process-tasks/_components/CompleteModal.tsx
@@ -0,0 +1,70 @@
+'use client'
+
+import { useState } from 'react'
+import type { ProcessTask, CompleteFormData } from './types'
+import { EMPTY_COMPLETE } from './types'
+
+export function CompleteModal({
+  task,
+  onClose,
+  onComplete,
+}: {
+  task: ProcessTask
+  onClose: () => void
+  onComplete: (data: CompleteFormData) => Promise<void>
+}) {
+  const [form, setForm] = useState<CompleteFormData>({ ...EMPTY_COMPLETE })
+  const [saving, setSaving] = useState(false)
+
+  const handleSave = async () => {
+    setSaving(true)
+    try {
+      await onComplete(form)
+      onClose()
+    } catch {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onClick={e => e.target === e.currentTarget && onClose()}>
+      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md">
+        <div className="flex items-center justify-between p-6 border-b">
+          <h2 className="text-lg font-semibold text-gray-900">Aufgabe erledigen</h2>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-xl">{'\u2715'}</button>
+        </div>
+        <div className="p-6 space-y-4">
+          <p className="text-sm text-gray-600 font-medium">{task.title}</p>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Erledigt von</label>
+            <input type="text" value={form.completed_by}
+              onChange={e => setForm(prev => ({ ...prev, completed_by: e.target.value }))}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
+              placeholder="Name / Rolle" />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Ergebnis</label>
+            <textarea value={form.result} onChange={e => setForm(prev => ({ ...prev, result: e.target.value }))}
+              rows={3}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
+              placeholder="Ergebnis der Pruefung / Massnahme..." />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Notizen</label>
+            <textarea value={form.notes} onChange={e => setForm(prev => ({ ...prev, notes: e.target.value }))}
+              rows={2}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
+              placeholder="Zusaetzliche Hinweise..." />
+          </div>
+        </div>
+        <div className="flex justify-end gap-3 p-6 border-t">
+          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">Abbrechen</button>
+          <button onClick={handleSave} disabled={saving}
+            className="px-5 py-2 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50">
+            {saving ? 'Speichern...' : 'Als erledigt markieren'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/process-tasks/_components/SkipModal.tsx b/admin-compliance/app/sdk/process-tasks/_components/SkipModal.tsx
new file mode 100644
index 0000000..2e531db
--- /dev/null
+++ b/admin-compliance/app/sdk/process-tasks/_components/SkipModal.tsx
@@ -0,0 +1,55 @@
+'use client'
+
+import { useState } from 'react'
+import type { ProcessTask } from './types'
+
+export function SkipModal({
+  task,
+  onClose,
+  onSkip,
+}: {
+  task: ProcessTask
+  onClose: () => void
+  onSkip: (reason: string) => Promise<void>
+}) {
+  const [reason, setReason] = useState('')
+  const [saving, setSaving] = useState(false)
+
+  const handleSkip = async () => {
+    if (!reason.trim()) return
+    setSaving(true)
+    try {
+      await onSkip(reason)
+      onClose()
+    } catch {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onClick={e => e.target === e.currentTarget && onClose()}>
+      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md">
+        <div className="flex items-center justify-between p-6 border-b">
+          <h2 className="text-lg font-semibold text-gray-900">Aufgabe ueberspringen</h2>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-xl">{'\u2715'}</button>
+        </div>
+        <div className="p-6 space-y-4">
+          <p className="text-sm text-gray-600 font-medium">{task.title}</p>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Begruendung *</label>
+            <textarea value={reason} onChange={e => setReason(e.target.value)} rows={3}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
+              placeholder="Warum wird diese Aufgabe uebersprungen?" />
+          </div>
+        </div>
+        <div className="flex justify-end gap-3 p-6 border-t">
+          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">Abbrechen</button>
+          <button onClick={handleSkip} disabled={saving || !reason.trim()}
+            className="px-5 py-2 text-sm bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 disabled:opacity-50">
+            {saving ? 'Speichern...' : 'Ueberspringen'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/process-tasks/_components/TaskDetailModal.tsx b/admin-compliance/app/sdk/process-tasks/_components/TaskDetailModal.tsx
new file mode 100644
index 0000000..34218a9
--- /dev/null
+++ b/admin-compliance/app/sdk/process-tasks/_components/TaskDetailModal.tsx
@@ -0,0 +1,165 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import {
+  ProcessTask, HistoryEntry, API,
+  CATEGORY_LABELS, CATEGORY_COLORS, PRIORITY_LABELS, PRIORITY_COLORS,
+  STATUS_LABELS, STATUS_COLORS, FREQUENCY_LABELS,
+  formatDate, dueLabel, dueLabelColor,
+} from './types'
+
+export function TaskDetailModal({
+  task,
+  onClose,
+  onComplete,
+  onSkip,
+  onEdit,
+  onDelete,
+}: {
+  task: ProcessTask
+  onClose: () => void
+  onComplete: (task: ProcessTask) => void
+  onSkip: (task: ProcessTask) => void
+  onEdit: (task: ProcessTask) => void
+  onDelete: (id: string) => Promise<void>
+}) {
+  const [history, setHistory] = useState<HistoryEntry[]>([])
+  const [loadingHistory, setLoadingHistory] = useState(true)
+
+  useEffect(() => {
+    loadHistory()
+  }, [task.id]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const loadHistory = async () => {
+    try {
+      const res = await fetch(`${API}/${task.id}/history`)
+      if (res.ok) { const data = await res.json(); setHistory(data.history || []) }
+    } catch { /* ignore */ }
+    setLoadingHistory(false)
+  }
+
+  const handleDelete = async () => {
+    if (!confirm('Aufgabe wirklich loeschen?')) return
+    await onDelete(task.id)
+    onClose()
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onClick={e => e.target === e.currentTarget && onClose()}>
+      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[85vh] overflow-y-auto">
+        <div className="flex items-start justify-between p-6 border-b gap-4">
+          <div className="flex-1">
+            <div className="flex items-center gap-2 mb-2 flex-wrap">
+              <span className={`px-2 py-0.5 text-xs rounded-full ${CATEGORY_COLORS[task.category] || 'bg-gray-100 text-gray-600'}`}>
+                {CATEGORY_LABELS[task.category] || task.category}
+              </span>
+              <span className={`px-2 py-0.5 text-xs rounded-full ${PRIORITY_COLORS[task.priority]}`}>
+                {PRIORITY_LABELS[task.priority]}
+              </span>
+              <span className={`px-2 py-0.5 text-xs rounded-full ${STATUS_COLORS[task.status]}`}>
+                {STATUS_LABELS[task.status]}
+              </span>
+            </div>
+            <h2 className="text-base font-semibold text-gray-900">{task.title}</h2>
+            <p className="text-xs text-gray-400 mt-0.5">{task.task_code}</p>
+          </div>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 flex-shrink-0">{'\u2715'}</button>
+        </div>
+
+        <div className="p-6 space-y-4 text-sm">
+          {task.description && <p className="text-gray-700 whitespace-pre-wrap">{task.description}</p>}
+
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <span className="text-gray-500">Frequenz</span>
+              <p className="font-medium text-gray-900">{FREQUENCY_LABELS[task.frequency] || task.frequency}</p>
+            </div>
+            <div>
+              <span className="text-gray-500">Faellig</span>
+              <p className={`font-medium ${dueLabelColor(task.next_due_date)}`}>
+                {task.next_due_date ? `${formatDate(task.next_due_date)} (${dueLabel(task.next_due_date)})` : '\u2014'}
+              </p>
+            </div>
+            <div>
+              <span className="text-gray-500">Zustaendig</span>
+              <p className="font-medium text-gray-900">{task.assigned_to || '\u2014'}</p>
+            </div>
+            <div>
+              <span className="text-gray-500">Team</span>
+              <p className="font-medium text-gray-900">{task.responsible_team || '\u2014'}</p>
+            </div>
+            {task.linked_module && (
+              <div>
+                <span className="text-gray-500">Modul</span>
+                <p className="font-medium text-purple-700">{task.linked_module}</p>
+              </div>
+            )}
+            {task.last_completed_at && (
+              <div>
+                <span className="text-gray-500">Zuletzt erledigt</span>
+                <p className="font-medium text-gray-900">{formatDate(task.last_completed_at)}</p>
+              </div>
+            )}
+          </div>
+
+          {task.notes && (
+            <div className="bg-gray-50 rounded-lg p-3">
+              <span className="text-gray-500 text-xs">Notizen</span>
+              <p className="text-gray-700 mt-1">{task.notes}</p>
+            </div>
+          )}
+
+          <div className="border-t pt-4">
+            <h3 className="font-semibold text-gray-900 mb-2">Verlauf</h3>
+            {loadingHistory ? (
+              <div className="animate-pulse space-y-2">
+                <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+                <div className="h-4 bg-gray-200 rounded w-1/2"></div>
+              </div>
+            ) : history.length === 0 ? (
+              <p className="text-gray-400 text-sm">Noch keine Eintraege</p>
+            ) : (
+              <div className="space-y-2 max-h-48 overflow-y-auto">
+                {history.map(h => (
+                  <div key={h.id} className="flex items-start gap-2 text-xs bg-gray-50 rounded-lg p-2">
+                    <span className={`px-1.5 py-0.5 rounded ${h.status === 'completed' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'}`}>
+                      {h.status === 'completed' ? 'Erledigt' : 'Uebersprungen'}
+                    </span>
+                    <div className="flex-1">
+                      <p className="text-gray-600">{formatDate(h.completed_at)} {h.completed_by ? `von ${h.completed_by}` : ''}</p>
+                      {h.result && <p className="text-gray-700 mt-0.5">{h.result}</p>}
+                      {h.notes && <p className="text-gray-500 mt-0.5">{h.notes}</p>}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 p-6 border-t flex-wrap">
+          {task.status !== 'completed' && (
+            <>
+              <button onClick={() => { onClose(); onComplete(task) }}
+                className="px-3 py-1.5 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700">
+                Erledigen
+              </button>
+              <button onClick={() => { onClose(); onSkip(task) }}
+                className="px-3 py-1.5 text-sm bg-yellow-500 text-white rounded-lg hover:bg-yellow-600">
+                Ueberspringen
+              </button>
+            </>
+          )}
+          <button onClick={() => { onClose(); onEdit(task) }}
+            className="px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 rounded-lg border">
+            Bearbeiten
+          </button>
+          <button onClick={handleDelete}
+            className="px-3 py-1.5 text-sm text-red-600 hover:bg-red-50 rounded-lg border border-red-200 ml-auto">
+            Loeschen
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/process-tasks/_components/TaskFormModal.tsx b/admin-compliance/app/sdk/process-tasks/_components/TaskFormModal.tsx
new file mode 100644
index 0000000..222b4b4
--- /dev/null
+++ b/admin-compliance/app/sdk/process-tasks/_components/TaskFormModal.tsx
@@ -0,0 +1,146 @@
+'use client'
+
+import { useState } from 'react'
+import { EMPTY_FORM, CATEGORY_LABELS, PRIORITY_LABELS, FREQUENCY_LABELS } from './types'
+import type { TaskFormData } from './types'
+
+export function TaskFormModal({
+  initial,
+  onClose,
+  onSave,
+}: {
+  initial?: Partial<TaskFormData>
+  onClose: () => void
+  onSave: (data: TaskFormData) => Promise<void>
+}) {
+  const [form, setForm] = useState<TaskFormData>({ ...EMPTY_FORM, ...initial })
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const update = (field: keyof TaskFormData, value: string | number) =>
+    setForm(prev => ({ ...prev, [field]: value }))
+
+  const handleSave = async () => {
+    if (!form.title.trim()) { setError('Titel ist erforderlich'); return }
+    if (!form.task_code.trim()) { setError('Task-Code ist erforderlich'); return }
+    setSaving(true)
+    setError(null)
+    try {
+      await onSave(form)
+      onClose()
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Fehler beim Speichern')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onClick={e => e.target === e.currentTarget && onClose()}>
+      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-xl max-h-[90vh] overflow-y-auto">
+        <div className="flex items-center justify-between p-6 border-b">
+          <h2 className="text-lg font-semibold text-gray-900">
+            {initial?.title ? 'Aufgabe bearbeiten' : 'Neue Aufgabe erstellen'}
+          </h2>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-xl">{'\u2715'}</button>
+        </div>
+        <div className="p-6 space-y-4">
+          {error && <div className="text-red-600 text-sm bg-red-50 rounded-lg p-3">{error}</div>}
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Task-Code *</label>
+              <input type="text" value={form.task_code} onChange={e => update('task_code', e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
+                placeholder="z.B. DSGVO-VVT-REVIEW" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Kategorie</label>
+              <select value={form.category} onChange={e => update('category', e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
+                {Object.entries(CATEGORY_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
+              </select>
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Titel *</label>
+            <input type="text" value={form.title} onChange={e => update('title', e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
+              placeholder="z.B. VVT-Review und Aktualisierung" />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
+            <textarea value={form.description} onChange={e => update('description', e.target.value)} rows={3}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
+              placeholder="Detaillierte Beschreibung..." />
+          </div>
+
+          <div className="grid grid-cols-3 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Prioritaet</label>
+              <select value={form.priority} onChange={e => update('priority', e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
+                {Object.entries(PRIORITY_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Frequenz</label>
+              <select value={form.frequency} onChange={e => update('frequency', e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
+                {Object.entries(FREQUENCY_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Faellig am</label>
+              <input type="date" value={form.next_due_date} onChange={e => update('next_due_date', e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm" />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Zustaendig</label>
+              <input type="text" value={form.assigned_to} onChange={e => update('assigned_to', e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm" placeholder="z.B. DSB, CISO" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Team</label>
+              <input type="text" value={form.responsible_team} onChange={e => update('responsible_team', e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm" placeholder="z.B. IT-Sicherheit" />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Verknuepftes Modul</label>
+              <input type="text" value={form.linked_module} onChange={e => update('linked_module', e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm" placeholder="z.B. vvt, tom, dsfa" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Erinnerung (Tage vorher)</label>
+              <input type="number" value={form.due_reminder_days}
+                onChange={e => update('due_reminder_days', parseInt(e.target.value) || 14)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm" min={0} max={90} />
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Notizen</label>
+            <textarea value={form.notes} onChange={e => update('notes', e.target.value)} rows={2}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
+              placeholder="Interne Hinweise..." />
+          </div>
+        </div>
+        <div className="flex justify-end gap-3 p-6 border-t">
+          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">Abbrechen</button>
+          <button onClick={handleSave} disabled={saving}
+            className="px-5 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50">
+            {saving ? 'Speichern...' : 'Speichern'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/process-tasks/_components/Toast.tsx b/admin-compliance/app/sdk/process-tasks/_components/Toast.tsx
new file mode 100644
index 0000000..c927a16
--- /dev/null
+++ b/admin-compliance/app/sdk/process-tasks/_components/Toast.tsx
@@ -0,0 +1,16 @@
+'use client'
+
+import { useEffect } from 'react'
+
+export function Toast({ message, onClose }: { message: string; onClose: () => void }) {
+  useEffect(() => {
+    const t = setTimeout(onClose, 3000)
+    return () => clearTimeout(t)
+  }, [onClose])
+
+  return (
+    <div className="fixed bottom-6 right-6 z-[60] bg-gray-900 text-white px-5 py-3 rounded-xl shadow-xl text-sm animate-slide-up">
+      {message}
+    </div>
+  )
+}
diff --git a/admin-compliance/app/sdk/process-tasks/_components/types.ts b/admin-compliance/app/sdk/process-tasks/_components/types.ts
new file mode 100644
index 0000000..4db006d
--- /dev/null
+++ b/admin-compliance/app/sdk/process-tasks/_components/types.ts
@@ -0,0 +1,179 @@
+export interface ProcessTask {
+  id: string
+  tenant_id: string
+  project_id: string | null
+  task_code: string
+  title: string
+  description: string | null
+  category: string
+  priority: string
+  frequency: string
+  assigned_to: string | null
+  responsible_team: string | null
+  linked_control_ids: string[]
+  linked_module: string | null
+  last_completed_at: string | null
+  next_due_date: string | null
+  due_reminder_days: number
+  status: string
+  completion_date: string | null
+  completion_result: string | null
+  completion_evidence_id: string | null
+  follow_up_actions: string[]
+  is_seed: boolean
+  notes: string | null
+  tags: string[]
+  created_at: string
+  updated_at: string
+}
+
+export interface TaskStats {
+  total: number
+  by_status: Record<string, number>
+  by_category: Record<string, number>
+  overdue_count: number
+  due_7_days: number
+  due_14_days: number
+  due_30_days: number
+}
+
+export interface TaskFormData {
+  task_code: string
+  title: string
+  description: string
+  category: string
+  priority: string
+  frequency: string
+  assigned_to: string
+  responsible_team: string
+  linked_module: string
+  next_due_date: string
+  due_reminder_days: number
+  notes: string
+}
+
+export interface CompleteFormData {
+  completed_by: string
+  result: string
+  notes: string
+}
+
+export interface HistoryEntry {
+  id: string
+  task_id: string
+  completed_by: string | null
+  completed_at: string
+  result: string | null
+  evidence_id: string | null
+  notes: string | null
+  status: string
+}
+
+export const EMPTY_FORM: TaskFormData = {
+  task_code: '',
+  title: '',
+  description: '',
+  category: 'dsgvo',
+  priority: 'medium',
+  frequency: 'yearly',
+  assigned_to: '',
+  responsible_team: '',
+  linked_module: '',
+  next_due_date: '',
+  due_reminder_days: 14,
+  notes: '',
+}
+
+export const EMPTY_COMPLETE: CompleteFormData = {
+  completed_by: '',
+  result: '',
+  notes: '',
+}
+
+export const API = '/api/sdk/v1/compliance/process-tasks'
+
+export const CATEGORY_LABELS: Record<string, string> = {
+  dsgvo: 'DSGVO', nis2: 'NIS2', bsi: 'BSI',
+  iso27001: 'ISO 27001', ai_act: 'AI Act', internal: 'Intern',
+}
+
+export const CATEGORY_COLORS: Record<string, string> = {
+  dsgvo: 'bg-blue-100 text-blue-700',
+  nis2: 'bg-purple-100 text-purple-700',
+  bsi: 'bg-green-100 text-green-700',
+  iso27001: 'bg-indigo-100 text-indigo-700',
+  ai_act: 'bg-orange-100 text-orange-700',
+  internal: 'bg-gray-100 text-gray-600',
+}
+
+export const PRIORITY_LABELS: Record<string, string> = {
+  critical: 'Kritisch', high: 'Hoch', medium: 'Mittel', low: 'Niedrig',
+}
+
+export const PRIORITY_COLORS: Record<string, string> = {
+  critical: 'bg-red-100 text-red-700',
+  high: 'bg-orange-100 text-orange-700',
+  medium: 'bg-yellow-100 text-yellow-700',
+  low: 'bg-green-100 text-green-700',
+}
+
+export const STATUS_LABELS: Record<string, string> = {
+  pending: 'Ausstehend',
+  in_progress: 'In Bearbeitung',
+  completed: 'Erledigt',
+  overdue: 'Ueberfaellig',
+  skipped: 'Uebersprungen',
+}
+
+export const STATUS_COLORS: Record<string, string> = {
+  pending: 'bg-gray-100 text-gray-600',
+  in_progress: 'bg-blue-100 text-blue-700',
+  completed: 'bg-green-100 text-green-700',
+  overdue: 'bg-red-100 text-red-700',
+  skipped: 'bg-yellow-100 text-yellow-700',
+}
+
+export const STATUS_ICONS: Record<string, string> = {
+  pending: '\u25CB',
+  in_progress: '\u25D4',
+  completed: '\u2714',
+  overdue: '\u26A0',
+  skipped: '\u2192',
+}
+
+export const FREQUENCY_LABELS: Record<string, string> = {
+  weekly: 'Woechentlich',
+  monthly: 'Monatlich',
+  quarterly: 'Quartalsweise',
+  semi_annual: 'Halbjaehrlich',
+  yearly: 'Jaehrlich',
+  once: 'Einmalig',
+}
+
+export function formatDate(d: string | null): string {
+  if (!d) return '\u2014'
+  return new Date(d).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })
+}
+
+export function daysUntil(d: string | null): number | null {
+  if (!d) return null
+  return Math.ceil((new Date(d).getTime() - Date.now()) / 86400000)
+}
+
+export function dueLabel(d: string | null): string {
+  const days = daysUntil(d)
+  if (days === null) return '\u2014'
+  if (days < 0) return `${Math.abs(days)} Tage ueberfaellig`
+  if (days === 0) return 'Heute faellig'
+  if (days === 1) return 'Morgen faellig'
+  return `In ${days} Tagen`
+}
+
+export function dueLabelColor(d: string | null): string {
+  const days = daysUntil(d)
+  if (days === null) return 'text-gray-400'
+  if (days < 0) return 'text-red-600 font-semibold'
+  if (days <= 7) return 'text-orange-600'
+  if (days <= 30) return 'text-yellow-600'
+  return 'text-green-600'
+}
diff --git a/admin-compliance/app/sdk/process-tasks/_hooks/useProcessTasks.ts b/admin-compliance/app/sdk/process-tasks/_hooks/useProcessTasks.ts
new file mode 100644
index 0000000..937e831
--- /dev/null
+++ b/admin-compliance/app/sdk/process-tasks/_hooks/useProcessTasks.ts
@@ -0,0 +1,149 @@
+'use client'
+
+import { useState, useCallback, useEffect } from 'react'
+import { ProcessTask, TaskStats, TaskFormData, CompleteFormData, API } from '../_components/types'
+
+export function useProcessTasks() {
+  const [activeTab, setActiveTab] = useState<'overview' | 'all' | 'calendar'>('overview')
+  const [tasks, setTasks] = useState<ProcessTask[]>([])
+  const [totalTasks, setTotalTasks] = useState(0)
+  const [stats, setStats] = useState<TaskStats | null>(null)
+  const [upcomingTasks, setUpcomingTasks] = useState<ProcessTask[]>([])
+  const [filterStatus, setFilterStatus] = useState('')
+  const [filterCategory, setFilterCategory] = useState('')
+  const [filterFrequency, setFilterFrequency] = useState('')
+  const [page, setPage] = useState(0)
+  const PAGE_SIZE = 25
+  const [loading, setLoading] = useState(true)
+  const [toast, setToast] = useState<string | null>(null)
+  const [showForm, setShowForm] = useState(false)
+  const [editTask, setEditTask] = useState<ProcessTask | null>(null)
+  const [detailTask, setDetailTask] = useState<ProcessTask | null>(null)
+  const [completeTask, setCompleteTask] = useState<ProcessTask | null>(null)
+  const [skipTask, setSkipTask] = useState<ProcessTask | null>(null)
+
+  const loadStats = useCallback(async () => {
+    try {
+      const res = await fetch(`${API}/stats`)
+      if (res.ok) setStats(await res.json())
+    } catch { /* ignore */ }
+  }, [])
+
+  const loadUpcoming = useCallback(async () => {
+    try {
+      const res = await fetch(`${API}/upcoming?days=30`)
+      if (res.ok) { const data = await res.json(); setUpcomingTasks(data.tasks || []) }
+    } catch { /* ignore */ }
+  }, [])
+
+  const loadTasks = useCallback(async () => {
+    setLoading(true)
+    try {
+      const params = new URLSearchParams()
+      if (filterStatus) params.set('status', filterStatus)
+      if (filterCategory) params.set('category', filterCategory)
+      if (filterFrequency) params.set('frequency', filterFrequency)
+      params.set('limit', String(PAGE_SIZE))
+      params.set('offset', String(page * PAGE_SIZE))
+      const res = await fetch(`${API}?${params}`)
+      if (res.ok) { const data = await res.json(); setTasks(data.tasks || []); setTotalTasks(data.total || 0) }
+    } catch { /* ignore */ }
+    setLoading(false)
+  }, [filterStatus, filterCategory, filterFrequency, page])
+
+  useEffect(() => {
+    loadStats()
+    loadUpcoming()
+    loadTasks()
+  }, [loadStats, loadUpcoming, loadTasks])
+
+  const handleCreate = async (data: TaskFormData) => {
+    const res = await fetch(API, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    })
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}))
+      throw new Error(err.detail || 'Fehler beim Erstellen')
+    }
+    setToast('Aufgabe erstellt')
+    loadTasks(); loadStats(); loadUpcoming()
+  }
+
+  const handleUpdate = async (data: TaskFormData) => {
+    if (!editTask) return
+    const res = await fetch(`${API}/${editTask.id}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    })
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}))
+      throw new Error(err.detail || 'Fehler beim Speichern')
+    }
+    setEditTask(null)
+    setToast('Aufgabe aktualisiert')
+    loadTasks(); loadStats(); loadUpcoming()
+  }
+
+  const handleComplete = async (data: CompleteFormData) => {
+    if (!completeTask) return
+    const res = await fetch(`${API}/${completeTask.id}/complete`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    })
+    if (!res.ok) throw new Error('Fehler')
+    setCompleteTask(null)
+    setToast('Aufgabe als erledigt markiert')
+    loadTasks(); loadStats(); loadUpcoming()
+  }
+
+  const handleSkip = async (reason: string) => {
+    if (!skipTask) return
+    const res = await fetch(`${API}/${skipTask.id}/skip`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ reason }),
+    })
+    if (!res.ok) throw new Error('Fehler')
+    setSkipTask(null)
+    setToast('Aufgabe uebersprungen')
+    loadTasks(); loadStats(); loadUpcoming()
+  }
+
+  const handleDelete = async (id: string) => {
+    const res = await fetch(`${API}/${id}`, { method: 'DELETE' })
+    if (!res.ok) throw new Error('Fehler beim Loeschen')
+    setToast('Aufgabe geloescht')
+    loadTasks(); loadStats(); loadUpcoming()
+  }
+
+  const handleSeed = async () => {
+    const res = await fetch(`${API}/seed`, { method: 'POST' })
+    if (res.ok) {
+      const data = await res.json()
+      setToast(`${data.seeded} Standard-Aufgaben erstellt`)
+      loadTasks(); loadStats(); loadUpcoming()
+    }
+  }
+
+  const totalPages = Math.ceil(totalTasks / PAGE_SIZE)
+
+  return {
+    activeTab, setActiveTab,
+    tasks, totalTasks, stats, upcomingTasks,
+    filterStatus, setFilterStatus,
+    filterCategory, setFilterCategory,
+    filterFrequency, setFilterFrequency,
+    page, setPage, PAGE_SIZE, totalPages,
+    loading, toast, setToast,
+    showForm, setShowForm,
+    editTask, setEditTask,
+    detailTask, setDetailTask,
+    completeTask, setCompleteTask,
+    skipTask, setSkipTask,
+    handleCreate, handleUpdate, handleComplete, handleSkip, handleDelete, handleSeed,
+  }
+}
diff --git a/admin-compliance/app/sdk/process-tasks/page.tsx b/admin-compliance/app/sdk/process-tasks/page.tsx
index 32d2bf4..ae58bfe 100644
--- a/admin-compliance/app/sdk/process-tasks/page.tsx
+++ b/admin-compliance/app/sdk/process-tasks/page.tsx
@@ -1,1065 +1,72 @@
 'use client'
 
-import React, { useState, useEffect, useCallback } from 'react'
-import { useSDK } from '@/lib/sdk'
-
-// =============================================================================
-// Types
-// =============================================================================
-
-interface ProcessTask {
-  id: string
-  tenant_id: string
-  project_id: string | null
-  task_code: string
-  title: string
-  description: string | null
-  category: string
-  priority: string
-  frequency: string
-  assigned_to: string | null
-  responsible_team: string | null
-  linked_control_ids: string[]
-  linked_module: string | null
-  last_completed_at: string | null
-  next_due_date: string | null
-  due_reminder_days: number
-  status: string
-  completion_date: string | null
-  completion_result: string | null
-  completion_evidence_id: string | null
-  follow_up_actions: string[]
-  is_seed: boolean
-  notes: string | null
-  tags: string[]
-  created_at: string
-  updated_at: string
-}
-
-interface TaskStats {
-  total: number
-  by_status: Record<string, number>
-  by_category: Record<string, number>
-  overdue_count: number
-  due_7_days: number
-  due_14_days: number
-  due_30_days: number
-}
-
-interface TaskFormData {
-  task_code: string
-  title: string
-  description: string
-  category: string
-  priority: string
-  frequency: string
-  assigned_to: string
-  responsible_team: string
-  linked_module: string
-  next_due_date: string
-  due_reminder_days: number
-  notes: string
-}
-
-interface CompleteFormData {
-  completed_by: string
-  result: string
-  notes: string
-}
-
-interface HistoryEntry {
-  id: string
-  task_id: string
-  completed_by: string | null
-  completed_at: string
-  result: string | null
-  evidence_id: string | null
-  notes: string | null
-  status: string
-}
-
-const EMPTY_FORM: TaskFormData = {
-  task_code: '',
-  title: '',
-  description: '',
-  category: 'dsgvo',
-  priority: 'medium',
-  frequency: 'yearly',
-  assigned_to: '',
-  responsible_team: '',
-  linked_module: '',
-  next_due_date: '',
-  due_reminder_days: 14,
-  notes: '',
-}
-
-const EMPTY_COMPLETE: CompleteFormData = {
-  completed_by: '',
-  result: '',
-  notes: '',
-}
-
-const API = '/api/sdk/v1/compliance/process-tasks'
-
-// =============================================================================
-// Constants
-// =============================================================================
-
-const CATEGORY_LABELS: Record<string, string> = {
-  dsgvo: 'DSGVO',
-  nis2: 'NIS2',
-  bsi: 'BSI',
-  iso27001: 'ISO 27001',
-  ai_act: 'AI Act',
-  internal: 'Intern',
-}
-
-const CATEGORY_COLORS: Record<string, string> = {
-  dsgvo: 'bg-blue-100 text-blue-700',
-  nis2: 'bg-purple-100 text-purple-700',
-  bsi: 'bg-green-100 text-green-700',
-  iso27001: 'bg-indigo-100 text-indigo-700',
-  ai_act: 'bg-orange-100 text-orange-700',
-  internal: 'bg-gray-100 text-gray-600',
-}
-
-const PRIORITY_LABELS: Record<string, string> = {
-  critical: 'Kritisch',
-  high: 'Hoch',
-  medium: 'Mittel',
-  low: 'Niedrig',
-}
-
-const PRIORITY_COLORS: Record<string, string> = {
-  critical: 'bg-red-100 text-red-700',
-  high: 'bg-orange-100 text-orange-700',
-  medium: 'bg-yellow-100 text-yellow-700',
-  low: 'bg-green-100 text-green-700',
-}
-
-const STATUS_LABELS: Record<string, string> = {
-  pending: 'Ausstehend',
-  in_progress: 'In Bearbeitung',
-  completed: 'Erledigt',
-  overdue: 'Ueberfaellig',
-  skipped: 'Uebersprungen',
-}
-
-const STATUS_COLORS: Record<string, string> = {
-  pending: 'bg-gray-100 text-gray-600',
-  in_progress: 'bg-blue-100 text-blue-700',
-  completed: 'bg-green-100 text-green-700',
-  overdue: 'bg-red-100 text-red-700',
-  skipped: 'bg-yellow-100 text-yellow-700',
-}
-
-const STATUS_ICONS: Record<string, string> = {
-  pending: '\u25CB',
-  in_progress: '\u25D4',
-  completed: '\u2714',
-  overdue: '\u26A0',
-  skipped: '\u2192',
-}
-
-const FREQUENCY_LABELS: Record<string, string> = {
-  weekly: 'Woechentlich',
-  monthly: 'Monatlich',
-  quarterly: 'Quartalsweise',
-  semi_annual: 'Halbjaehrlich',
-  yearly: 'Jaehrlich',
-  once: 'Einmalig',
-}
-
-// =============================================================================
-// Helpers
-// =============================================================================
-
-function formatDate(d: string | null): string {
-  if (!d) return '\u2014'
-  const dt = new Date(d)
-  return dt.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })
-}
-
-function daysUntil(d: string | null): number | null {
-  if (!d) return null
-  return Math.ceil((new Date(d).getTime() - Date.now()) / 86400000)
-}
-
-function dueLabel(d: string | null): string {
-  const days = daysUntil(d)
-  if (days === null) return '\u2014'
-  if (days < 0) return `${Math.abs(days)} Tage ueberfaellig`
-  if (days === 0) return 'Heute faellig'
-  if (days === 1) return 'Morgen faellig'
-  return `In ${days} Tagen`
-}
-
-function dueLabelColor(d: string | null): string {
-  const days = daysUntil(d)
-  if (days === null) return 'text-gray-400'
-  if (days < 0) return 'text-red-600 font-semibold'
-  if (days <= 7) return 'text-orange-600'
-  if (days <= 30) return 'text-yellow-600'
-  return 'text-green-600'
-}
-
-// =============================================================================
-// Toast
-// =============================================================================
-
-function Toast({ message, onClose }: { message: string; onClose: () => void }) {
-  useEffect(() => {
-    const t = setTimeout(onClose, 3000)
-    return () => clearTimeout(t)
-  }, [onClose])
-
-  return (
-    <div className="fixed bottom-6 right-6 z-[60] bg-gray-900 text-white px-5 py-3 rounded-xl shadow-xl text-sm animate-slide-up">
-      {message}
-    </div>
-  )
-}
-
-// =============================================================================
-// Complete Modal
-// =============================================================================
-
-function CompleteModal({
-  task,
-  onClose,
-  onComplete,
-}: {
-  task: ProcessTask
-  onClose: () => void
-  onComplete: (data: CompleteFormData) => Promise<void>
-}) {
-  const [form, setForm] = useState<CompleteFormData>({ ...EMPTY_COMPLETE })
-  const [saving, setSaving] = useState(false)
-
-  const handleSave = async () => {
-    setSaving(true)
-    try {
-      await onComplete(form)
-      onClose()
-    } catch {
-      setSaving(false)
-    }
-  }
-
-  return (
-    <div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onClick={e => e.target === e.currentTarget && onClose()}>
-      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md">
-        <div className="flex items-center justify-between p-6 border-b">
-          <h2 className="text-lg font-semibold text-gray-900">Aufgabe erledigen</h2>
-          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-xl">{'\u2715'}</button>
-        </div>
-        <div className="p-6 space-y-4">
-          <p className="text-sm text-gray-600 font-medium">{task.title}</p>
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Erledigt von</label>
-            <input
-              type="text"
-              value={form.completed_by}
-              onChange={e => setForm(prev => ({ ...prev, completed_by: e.target.value }))}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
-              placeholder="Name / Rolle"
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Ergebnis</label>
-            <textarea
-              value={form.result}
-              onChange={e => setForm(prev => ({ ...prev, result: e.target.value }))}
-              rows={3}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
-              placeholder="Ergebnis der Pruefung / Massnahme..."
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Notizen</label>
-            <textarea
-              value={form.notes}
-              onChange={e => setForm(prev => ({ ...prev, notes: e.target.value }))}
-              rows={2}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
-              placeholder="Zusaetzliche Hinweise..."
-            />
-          </div>
-        </div>
-        <div className="flex justify-end gap-3 p-6 border-t">
-          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">Abbrechen</button>
-          <button
-            onClick={handleSave}
-            disabled={saving}
-            className="px-5 py-2 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50"
-          >
-            {saving ? 'Speichern...' : 'Als erledigt markieren'}
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-// =============================================================================
-// Skip Modal
-// =============================================================================
-
-function SkipModal({
-  task,
-  onClose,
-  onSkip,
-}: {
-  task: ProcessTask
-  onClose: () => void
-  onSkip: (reason: string) => Promise<void>
-}) {
-  const [reason, setReason] = useState('')
-  const [saving, setSaving] = useState(false)
-
-  const handleSkip = async () => {
-    if (!reason.trim()) return
-    setSaving(true)
-    try {
-      await onSkip(reason)
-      onClose()
-    } catch {
-      setSaving(false)
-    }
-  }
-
-  return (
-    <div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onClick={e => e.target === e.currentTarget && onClose()}>
-      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md">
-        <div className="flex items-center justify-between p-6 border-b">
-          <h2 className="text-lg font-semibold text-gray-900">Aufgabe ueberspringen</h2>
-          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-xl">{'\u2715'}</button>
-        </div>
-        <div className="p-6 space-y-4">
-          <p className="text-sm text-gray-600 font-medium">{task.title}</p>
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Begruendung *</label>
-            <textarea
-              value={reason}
-              onChange={e => setReason(e.target.value)}
-              rows={3}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
-              placeholder="Warum wird diese Aufgabe uebersprungen?"
-            />
-          </div>
-        </div>
-        <div className="flex justify-end gap-3 p-6 border-t">
-          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">Abbrechen</button>
-          <button
-            onClick={handleSkip}
-            disabled={saving || !reason.trim()}
-            className="px-5 py-2 text-sm bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 disabled:opacity-50"
-          >
-            {saving ? 'Speichern...' : 'Ueberspringen'}
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-// =============================================================================
-// Task Form Modal (Create / Edit)
-// =============================================================================
-
-function TaskFormModal({
-  initial,
-  onClose,
-  onSave,
-}: {
-  initial?: Partial<TaskFormData>
-  onClose: () => void
-  onSave: (data: TaskFormData) => Promise<void>
-}) {
-  const [form, setForm] = useState<TaskFormData>({ ...EMPTY_FORM, ...initial })
-  const [saving, setSaving] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
-  const update = (field: keyof TaskFormData, value: string | number) =>
-    setForm(prev => ({ ...prev, [field]: value }))
-
-  const handleSave = async () => {
-    if (!form.title.trim()) { setError('Titel ist erforderlich'); return }
-    if (!form.task_code.trim()) { setError('Task-Code ist erforderlich'); return }
-    setSaving(true)
-    setError(null)
-    try {
-      await onSave(form)
-      onClose()
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Fehler beim Speichern')
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  return (
-    <div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onClick={e => e.target === e.currentTarget && onClose()}>
-      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-xl max-h-[90vh] overflow-y-auto">
-        <div className="flex items-center justify-between p-6 border-b">
-          <h2 className="text-lg font-semibold text-gray-900">
-            {initial?.title ? 'Aufgabe bearbeiten' : 'Neue Aufgabe erstellen'}
-          </h2>
-          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-xl">{'\u2715'}</button>
-        </div>
-        <div className="p-6 space-y-4">
-          {error && <div className="text-red-600 text-sm bg-red-50 rounded-lg p-3">{error}</div>}
-
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Task-Code *</label>
-              <input
-                type="text"
-                value={form.task_code}
-                onChange={e => update('task_code', e.target.value)}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
-                placeholder="z.B. DSGVO-VVT-REVIEW"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Kategorie</label>
-              <select
-                value={form.category}
-                onChange={e => update('category', e.target.value)}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
-              >
-                {Object.entries(CATEGORY_LABELS).map(([k, v]) => (
-                  <option key={k} value={k}>{v}</option>
-                ))}
-              </select>
-            </div>
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Titel *</label>
-            <input
-              type="text"
-              value={form.title}
-              onChange={e => update('title', e.target.value)}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
-              placeholder="z.B. VVT-Review und Aktualisierung"
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
-            <textarea
-              value={form.description}
-              onChange={e => update('description', e.target.value)}
-              rows={3}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
-              placeholder="Detaillierte Beschreibung..."
-            />
-          </div>
-
-          <div className="grid grid-cols-3 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Prioritaet</label>
-              <select
-                value={form.priority}
-                onChange={e => update('priority', e.target.value)}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
-              >
-                {Object.entries(PRIORITY_LABELS).map(([k, v]) => (
-                  <option key={k} value={k}>{v}</option>
-                ))}
-              </select>
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Frequenz</label>
-              <select
-                value={form.frequency}
-                onChange={e => update('frequency', e.target.value)}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
-              >
-                {Object.entries(FREQUENCY_LABELS).map(([k, v]) => (
-                  <option key={k} value={k}>{v}</option>
-                ))}
-              </select>
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Faellig am</label>
-              <input
-                type="date"
-                value={form.next_due_date}
-                onChange={e => update('next_due_date', e.target.value)}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
-              />
-            </div>
-          </div>
-
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Zustaendig</label>
-              <input
-                type="text"
-                value={form.assigned_to}
-                onChange={e => update('assigned_to', e.target.value)}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
-                placeholder="z.B. DSB, CISO"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Team</label>
-              <input
-                type="text"
-                value={form.responsible_team}
-                onChange={e => update('responsible_team', e.target.value)}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
-                placeholder="z.B. IT-Sicherheit"
-              />
-            </div>
-          </div>
-
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Verknuepftes Modul</label>
-              <input
-                type="text"
-                value={form.linked_module}
-                onChange={e => update('linked_module', e.target.value)}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
-                placeholder="z.B. vvt, tom, dsfa"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">Erinnerung (Tage vorher)</label>
-              <input
-                type="number"
-                value={form.due_reminder_days}
-                onChange={e => update('due_reminder_days', parseInt(e.target.value) || 14)}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
-                min={0}
-                max={90}
-              />
-            </div>
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">Notizen</label>
-            <textarea
-              value={form.notes}
-              onChange={e => update('notes', e.target.value)}
-              rows={2}
-              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
-              placeholder="Interne Hinweise..."
-            />
-          </div>
-        </div>
-        <div className="flex justify-end gap-3 p-6 border-t">
-          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">Abbrechen</button>
-          <button
-            onClick={handleSave}
-            disabled={saving}
-            className="px-5 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
-          >
-            {saving ? 'Speichern...' : 'Speichern'}
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-// =============================================================================
-// Detail Modal (with History)
-// =============================================================================
-
-function TaskDetailModal({
-  task,
-  onClose,
-  onComplete,
-  onSkip,
-  onEdit,
-  onDelete,
-}: {
-  task: ProcessTask
-  onClose: () => void
-  onComplete: (task: ProcessTask) => void
-  onSkip: (task: ProcessTask) => void
-  onEdit: (task: ProcessTask) => void
-  onDelete: (id: string) => Promise<void>
-}) {
-  const [history, setHistory] = useState<HistoryEntry[]>([])
-  const [loadingHistory, setLoadingHistory] = useState(true)
-
-  useEffect(() => {
-    loadHistory()
-  }, [task.id])
-
-  const loadHistory = async () => {
-    try {
-      const res = await fetch(`${API}/${task.id}/history`)
-      if (res.ok) {
-        const data = await res.json()
-        setHistory(data.history || [])
-      }
-    } catch { /* ignore */ }
-    setLoadingHistory(false)
-  }
-
-  const handleDelete = async () => {
-    if (!confirm('Aufgabe wirklich loeschen?')) return
-    await onDelete(task.id)
-    onClose()
-  }
-
-  const days = daysUntil(task.next_due_date)
-
-  return (
-    <div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onClick={e => e.target === e.currentTarget && onClose()}>
-      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[85vh] overflow-y-auto">
-        <div className="flex items-start justify-between p-6 border-b gap-4">
-          <div className="flex-1">
-            <div className="flex items-center gap-2 mb-2 flex-wrap">
-              <span className={`px-2 py-0.5 text-xs rounded-full ${CATEGORY_COLORS[task.category] || 'bg-gray-100 text-gray-600'}`}>
-                {CATEGORY_LABELS[task.category] || task.category}
-              </span>
-              <span className={`px-2 py-0.5 text-xs rounded-full ${PRIORITY_COLORS[task.priority]}`}>
-                {PRIORITY_LABELS[task.priority]}
-              </span>
-              <span className={`px-2 py-0.5 text-xs rounded-full ${STATUS_COLORS[task.status]}`}>
-                {STATUS_LABELS[task.status]}
-              </span>
-            </div>
-            <h2 className="text-base font-semibold text-gray-900">{task.title}</h2>
-            <p className="text-xs text-gray-400 mt-0.5">{task.task_code}</p>
-          </div>
-          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 flex-shrink-0">{'\u2715'}</button>
-        </div>
-
-        <div className="p-6 space-y-4 text-sm">
-          {task.description && (
-            <p className="text-gray-700 whitespace-pre-wrap">{task.description}</p>
-          )}
-
-          <div className="grid grid-cols-2 gap-3">
-            <div>
-              <span className="text-gray-500">Frequenz</span>
-              <p className="font-medium text-gray-900">{FREQUENCY_LABELS[task.frequency] || task.frequency}</p>
-            </div>
-            <div>
-              <span className="text-gray-500">Faellig</span>
-              <p className={`font-medium ${dueLabelColor(task.next_due_date)}`}>
-                {task.next_due_date ? `${formatDate(task.next_due_date)} (${dueLabel(task.next_due_date)})` : '\u2014'}
-              </p>
-            </div>
-            <div>
-              <span className="text-gray-500">Zustaendig</span>
-              <p className="font-medium text-gray-900">{task.assigned_to || '\u2014'}</p>
-            </div>
-            <div>
-              <span className="text-gray-500">Team</span>
-              <p className="font-medium text-gray-900">{task.responsible_team || '\u2014'}</p>
-            </div>
-            {task.linked_module && (
-              <div>
-                <span className="text-gray-500">Modul</span>
-                <p className="font-medium text-purple-700">{task.linked_module}</p>
-              </div>
-            )}
-            {task.last_completed_at && (
-              <div>
-                <span className="text-gray-500">Zuletzt erledigt</span>
-                <p className="font-medium text-gray-900">{formatDate(task.last_completed_at)}</p>
-              </div>
-            )}
-          </div>
-
-          {task.notes && (
-            <div className="bg-gray-50 rounded-lg p-3">
-              <span className="text-gray-500 text-xs">Notizen</span>
-              <p className="text-gray-700 mt-1">{task.notes}</p>
-            </div>
-          )}
-
-          {/* History */}
-          <div className="border-t pt-4">
-            <h3 className="font-semibold text-gray-900 mb-2">Verlauf</h3>
-            {loadingHistory ? (
-              <div className="animate-pulse space-y-2">
-                <div className="h-4 bg-gray-200 rounded w-3/4"></div>
-                <div className="h-4 bg-gray-200 rounded w-1/2"></div>
-              </div>
-            ) : history.length === 0 ? (
-              <p className="text-gray-400 text-sm">Noch keine Eintraege</p>
-            ) : (
-              <div className="space-y-2 max-h-48 overflow-y-auto">
-                {history.map(h => (
-                  <div key={h.id} className="flex items-start gap-2 text-xs bg-gray-50 rounded-lg p-2">
-                    <span className={`px-1.5 py-0.5 rounded ${h.status === 'completed' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'}`}>
-                      {h.status === 'completed' ? 'Erledigt' : 'Uebersprungen'}
-                    </span>
-                    <div className="flex-1">
-                      <p className="text-gray-600">{formatDate(h.completed_at)} {h.completed_by ? `von ${h.completed_by}` : ''}</p>
-                      {h.result && <p className="text-gray-700 mt-0.5">{h.result}</p>}
-                      {h.notes && <p className="text-gray-500 mt-0.5">{h.notes}</p>}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
-
-        <div className="flex items-center gap-2 p-6 border-t flex-wrap">
-          {task.status !== 'completed' && (
-            <>
-              <button
-                onClick={() => { onClose(); onComplete(task) }}
-                className="px-3 py-1.5 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700"
-              >
-                Erledigen
-              </button>
-              <button
-                onClick={() => { onClose(); onSkip(task) }}
-                className="px-3 py-1.5 text-sm bg-yellow-500 text-white rounded-lg hover:bg-yellow-600"
-              >
-                Ueberspringen
-              </button>
-            </>
-          )}
-          <button
-            onClick={() => { onClose(); onEdit(task) }}
-            className="px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 rounded-lg border"
-          >
-            Bearbeiten
-          </button>
-          <button
-            onClick={handleDelete}
-            className="px-3 py-1.5 text-sm text-red-600 hover:bg-red-50 rounded-lg border border-red-200 ml-auto"
-          >
-            Loeschen
-          </button>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-// =============================================================================
-// Calendar View
-// =============================================================================
-
-function CalendarView({ tasks }: { tasks: ProcessTask[] }) {
-  const [currentMonth, setCurrentMonth] = useState(() => {
-    const now = new Date()
-    return new Date(now.getFullYear(), now.getMonth(), 1)
-  })
-
-  const year = currentMonth.getFullYear()
-  const month = currentMonth.getMonth()
-  const daysInMonth = new Date(year, month + 1, 0).getDate()
-  const firstDayOfWeek = new Date(year, month, 1).getDay()
-  const startOffset = firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1 // Monday start
-
-  const monthLabel = currentMonth.toLocaleDateString('de-DE', { month: 'long', year: 'numeric' })
-
-  // Group tasks by date
-  const tasksByDate: Record<string, ProcessTask[]> = {}
-  tasks.forEach(t => {
-    if (!t.next_due_date) return
-    const key = t.next_due_date.substring(0, 10)
-    if (!tasksByDate[key]) tasksByDate[key] = []
-    tasksByDate[key].push(t)
-  })
-
-  const prev = () => setCurrentMonth(new Date(year, month - 1, 1))
-  const next = () => setCurrentMonth(new Date(year, month + 1, 1))
-
-  const today = new Date().toISOString().substring(0, 10)
-
-  return (
-    <div>
-      <div className="flex items-center justify-between mb-4">
-        <button onClick={prev} className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">&larr; Vorher</button>
-        <h3 className="text-lg font-semibold text-gray-900">{monthLabel}</h3>
-        <button onClick={next} className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">Weiter &rarr;</button>
-      </div>
-
-      <div className="grid grid-cols-7 gap-px bg-gray-200 rounded-xl overflow-hidden border border-gray-200">
-        {['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'].map(d => (
-          <div key={d} className="bg-gray-50 p-2 text-xs font-medium text-gray-500 text-center">{d}</div>
-        ))}
-        {Array.from({ length: startOffset }).map((_, i) => (
-          <div key={`empty-${i}`} className="bg-white p-2 min-h-[80px]"></div>
-        ))}
-        {Array.from({ length: daysInMonth }).map((_, i) => {
-          const day = i + 1
-          const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`
-          const dayTasks = tasksByDate[dateStr] || []
-          const isToday = dateStr === today
-
-          return (
-            <div key={day} className={`bg-white p-2 min-h-[80px] ${isToday ? 'ring-2 ring-purple-400 ring-inset' : ''}`}>
-              <span className={`text-xs font-medium ${isToday ? 'text-purple-600' : 'text-gray-500'}`}>{day}</span>
-              <div className="mt-1 space-y-0.5">
-                {dayTasks.slice(0, 3).map(t => {
-                  const days = daysUntil(t.next_due_date)
-                  let dotColor = 'bg-gray-400'
-                  if (t.status === 'completed') dotColor = 'bg-green-500'
-                  else if (days !== null && days < 0) dotColor = 'bg-red-500'
-                  else if (days !== null && days <= 7) dotColor = 'bg-orange-500'
-
-                  return (
-                    <div key={t.id} className="flex items-center gap-1" title={t.title}>
-                      <span className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${dotColor}`}></span>
-                      <span className="text-[10px] text-gray-600 truncate">{t.title}</span>
-                    </div>
-                  )
-                })}
-                {dayTasks.length > 3 && (
-                  <span className="text-[10px] text-gray-400">+{dayTasks.length - 3} mehr</span>
-                )}
-              </div>
-            </div>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
-
-// =============================================================================
-// Main Page
-// =============================================================================
+import React from 'react'
+import { Toast } from './_components/Toast'
+import { CompleteModal } from './_components/CompleteModal'
+import { SkipModal } from './_components/SkipModal'
+import { TaskFormModal } from './_components/TaskFormModal'
+import { TaskDetailModal } from './_components/TaskDetailModal'
+import { CalendarView } from './_components/CalendarView'
+import {
+  CATEGORY_LABELS, CATEGORY_COLORS, STATUS_LABELS, STATUS_COLORS,
+  STATUS_ICONS, FREQUENCY_LABELS, formatDate, dueLabel, dueLabelColor,
+} from './_components/types'
+import { useProcessTasks } from './_hooks/useProcessTasks'
 
 export default function ProcessTasksPage() {
-  const sdk = useSDK()
-  const [activeTab, setActiveTab] = useState<'overview' | 'all' | 'calendar'>('overview')
-
-  // Data
-  const [tasks, setTasks] = useState<ProcessTask[]>([])
-  const [totalTasks, setTotalTasks] = useState(0)
-  const [stats, setStats] = useState<TaskStats | null>(null)
-  const [upcomingTasks, setUpcomingTasks] = useState<ProcessTask[]>([])
-
-  // Filters
-  const [filterStatus, setFilterStatus] = useState('')
-  const [filterCategory, setFilterCategory] = useState('')
-  const [filterFrequency, setFilterFrequency] = useState('')
-  const [page, setPage] = useState(0)
-  const PAGE_SIZE = 25
-
-  // UI State
-  const [loading, setLoading] = useState(true)
-  const [toast, setToast] = useState<string | null>(null)
-  const [showForm, setShowForm] = useState(false)
-  const [editTask, setEditTask] = useState<ProcessTask | null>(null)
-  const [detailTask, setDetailTask] = useState<ProcessTask | null>(null)
-  const [completeTask, setCompleteTask] = useState<ProcessTask | null>(null)
-  const [skipTask, setSkipTask] = useState<ProcessTask | null>(null)
-
-  // Load data
-  const loadStats = useCallback(async () => {
-    try {
-      const res = await fetch(`${API}/stats`)
-      if (res.ok) setStats(await res.json())
-    } catch { /* ignore */ }
-  }, [])
-
-  const loadUpcoming = useCallback(async () => {
-    try {
-      const res = await fetch(`${API}/upcoming?days=30`)
-      if (res.ok) {
-        const data = await res.json()
-        setUpcomingTasks(data.tasks || [])
-      }
-    } catch { /* ignore */ }
-  }, [])
-
-  const loadTasks = useCallback(async () => {
-    setLoading(true)
-    try {
-      const params = new URLSearchParams()
-      if (filterStatus) params.set('status', filterStatus)
-      if (filterCategory) params.set('category', filterCategory)
-      if (filterFrequency) params.set('frequency', filterFrequency)
-      params.set('limit', String(PAGE_SIZE))
-      params.set('offset', String(page * PAGE_SIZE))
-
-      const res = await fetch(`${API}?${params}`)
-      if (res.ok) {
-        const data = await res.json()
-        setTasks(data.tasks || [])
-        setTotalTasks(data.total || 0)
-      }
-    } catch { /* ignore */ }
-    setLoading(false)
-  }, [filterStatus, filterCategory, filterFrequency, page])
-
-  useEffect(() => {
-    loadStats()
-    loadUpcoming()
-    loadTasks()
-  }, [loadStats, loadUpcoming, loadTasks])
-
-  // Actions
-  const handleCreate = async (data: TaskFormData) => {
-    const res = await fetch(API, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(data),
-    })
-    if (!res.ok) {
-      const err = await res.json().catch(() => ({}))
-      throw new Error(err.detail || 'Fehler beim Erstellen')
-    }
-    setToast('Aufgabe erstellt')
-    loadTasks()
-    loadStats()
-    loadUpcoming()
-  }
-
-  const handleUpdate = async (data: TaskFormData) => {
-    if (!editTask) return
-    const res = await fetch(`${API}/${editTask.id}`, {
-      method: 'PUT',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(data),
-    })
-    if (!res.ok) {
-      const err = await res.json().catch(() => ({}))
-      throw new Error(err.detail || 'Fehler beim Speichern')
-    }
-    setEditTask(null)
-    setToast('Aufgabe aktualisiert')
-    loadTasks()
-    loadStats()
-    loadUpcoming()
-  }
-
-  const handleComplete = async (data: CompleteFormData) => {
-    if (!completeTask) return
-    const res = await fetch(`${API}/${completeTask.id}/complete`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(data),
-    })
-    if (!res.ok) throw new Error('Fehler')
-    setCompleteTask(null)
-    setToast('Aufgabe als erledigt markiert')
-    loadTasks()
-    loadStats()
-    loadUpcoming()
-  }
-
-  const handleSkip = async (reason: string) => {
-    if (!skipTask) return
-    const res = await fetch(`${API}/${skipTask.id}/skip`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ reason }),
-    })
-    if (!res.ok) throw new Error('Fehler')
-    setSkipTask(null)
-    setToast('Aufgabe uebersprungen')
-    loadTasks()
-    loadStats()
-    loadUpcoming()
-  }
-
-  const handleDelete = async (id: string) => {
-    const res = await fetch(`${API}/${id}`, { method: 'DELETE' })
-    if (!res.ok) throw new Error('Fehler beim Loeschen')
-    setToast('Aufgabe geloescht')
-    loadTasks()
-    loadStats()
-    loadUpcoming()
-  }
-
-  const handleSeed = async () => {
-    const res = await fetch(`${API}/seed`, { method: 'POST' })
-    if (res.ok) {
-      const data = await res.json()
-      setToast(`${data.seeded} Standard-Aufgaben erstellt`)
-      loadTasks()
-      loadStats()
-      loadUpcoming()
-    }
-  }
-
-  const totalPages = Math.ceil(totalTasks / PAGE_SIZE)
-
-  // =============================================================================
-  // Render
-  // =============================================================================
+  const p = useProcessTasks()
 
   return (
     <div className="max-w-7xl mx-auto p-6">
-      {/* Header */}
       <div className="flex items-center justify-between mb-6">
         <div>
           <h1 className="text-2xl font-bold text-gray-900">Compliance Process Manager</h1>
           <p className="text-sm text-gray-500 mt-1">Wiederkehrende Compliance-Aufgaben verwalten und nachverfolgen</p>
         </div>
         <div className="flex gap-2">
-          <button
-            onClick={handleSeed}
-            className="px-4 py-2 text-sm text-purple-600 border border-purple-200 rounded-lg hover:bg-purple-50"
-          >
+          <button onClick={p.handleSeed}
+            className="px-4 py-2 text-sm text-purple-600 border border-purple-200 rounded-lg hover:bg-purple-50">
             Standard-Aufgaben laden
           </button>
-          <button
-            onClick={() => setShowForm(true)}
-            className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700"
-          >
+          <button onClick={() => p.setShowForm(true)}
+            className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700">
             + Neue Aufgabe
           </button>
         </div>
       </div>
 
-      {/* Tabs */}
       <div className="flex gap-1 bg-gray-100 rounded-xl p-1 mb-6 w-fit">
-        {[
-          { key: 'overview' as const, label: 'Uebersicht' },
-          { key: 'all' as const, label: 'Alle Aufgaben' },
-          { key: 'calendar' as const, label: 'Kalender' },
-        ].map(tab => (
-          <button
-            key={tab.key}
-            onClick={() => setActiveTab(tab.key)}
-            className={`px-4 py-2 text-sm rounded-lg transition-colors ${
-              activeTab === tab.key
-                ? 'bg-white text-gray-900 shadow-sm font-medium'
-                : 'text-gray-500 hover:text-gray-700'
-            }`}
-          >
+        {[{ key: 'overview' as const, label: 'Uebersicht' }, { key: 'all' as const, label: 'Alle Aufgaben' }, { key: 'calendar' as const, label: 'Kalender' }].map(tab => (
+          <button key={tab.key} onClick={() => p.setActiveTab(tab.key)}
+            className={`px-4 py-2 text-sm rounded-lg transition-colors ${p.activeTab === tab.key ? 'bg-white text-gray-900 shadow-sm font-medium' : 'text-gray-500 hover:text-gray-700'}`}>
             {tab.label}
           </button>
         ))}
       </div>
 
-      {/* ===== OVERVIEW TAB ===== */}
-      {activeTab === 'overview' && (
+      {p.activeTab === 'overview' && (
         <div className="space-y-6">
-          {/* Stat Cards */}
-          {stats ? (
+          {p.stats ? (
             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
               <div className="bg-white rounded-xl border border-red-200 p-5">
                 <div className="text-sm text-red-600 font-medium">Ueberfaellig</div>
-                <div className="text-3xl font-bold text-red-700 mt-1">{stats.overdue_count}</div>
+                <div className="text-3xl font-bold text-red-700 mt-1">{p.stats.overdue_count}</div>
                 <div className="text-xs text-gray-500 mt-1">Sofortiger Handlungsbedarf</div>
               </div>
               <div className="bg-white rounded-xl border border-orange-200 p-5">
                 <div className="text-sm text-orange-600 font-medium">Diese Woche</div>
-                <div className="text-3xl font-bold text-orange-700 mt-1">{stats.due_7_days}</div>
+                <div className="text-3xl font-bold text-orange-700 mt-1">{p.stats.due_7_days}</div>
                 <div className="text-xs text-gray-500 mt-1">Naechste 7 Tage</div>
               </div>
               <div className="bg-white rounded-xl border border-yellow-200 p-5">
                 <div className="text-sm text-yellow-600 font-medium">Diesen Monat</div>
-                <div className="text-3xl font-bold text-yellow-700 mt-1">{stats.due_30_days}</div>
+                <div className="text-3xl font-bold text-yellow-700 mt-1">{p.stats.due_30_days}</div>
                 <div className="text-xs text-gray-500 mt-1">Naechste 30 Tage</div>
               </div>
               <div className="bg-white rounded-xl border border-green-200 p-5">
                 <div className="text-sm text-green-600 font-medium">Erledigt</div>
-                <div className="text-3xl font-bold text-green-700 mt-1">{stats.by_status.completed || 0}</div>
-                <div className="text-xs text-gray-500 mt-1">von {stats.total} Aufgaben</div>
+                <div className="text-3xl font-bold text-green-700 mt-1">{p.stats.by_status.completed || 0}</div>
+                <div className="text-xs text-gray-500 mt-1">von {p.stats.total} Aufgaben</div>
               </div>
             </div>
           ) : (
@@ -1074,12 +81,11 @@ export default function ProcessTasksPage() {
             </div>
           )}
 
-          {/* Category Breakdown */}
-          {stats && Object.keys(stats.by_category).length > 0 && (
+          {p.stats && Object.keys(p.stats.by_category).length > 0 && (
             <div className="bg-white rounded-xl border p-5">
               <h3 className="text-sm font-semibold text-gray-900 mb-3">Nach Kategorie</h3>
               <div className="flex flex-wrap gap-2">
-                {Object.entries(stats.by_category).map(([cat, count]) => (
+                {Object.entries(p.stats.by_category).map(([cat, count]) => (
                   <span key={cat} className={`px-3 py-1.5 text-sm rounded-lg ${CATEGORY_COLORS[cat] || 'bg-gray-100 text-gray-600'}`}>
                     {CATEGORY_LABELS[cat] || cat}: {count}
                   </span>
@@ -1088,40 +94,31 @@ export default function ProcessTasksPage() {
             </div>
           )}
 
-          {/* Upcoming Tasks */}
           <div className="bg-white rounded-xl border">
             <div className="p-5 border-b">
               <h3 className="text-sm font-semibold text-gray-900">Naechste faellige Aufgaben</h3>
             </div>
-            {upcomingTasks.length === 0 ? (
+            {p.upcomingTasks.length === 0 ? (
               <div className="p-8 text-center text-gray-400">
                 <p className="text-sm">Keine Aufgaben in den naechsten 30 Tagen faellig.</p>
-                {stats && stats.total === 0 && (
-                  <button
-                    onClick={handleSeed}
-                    className="mt-3 px-4 py-2 text-sm text-purple-600 border border-purple-200 rounded-lg hover:bg-purple-50"
-                  >
+                {p.stats && p.stats.total === 0 && (
+                  <button onClick={p.handleSeed}
+                    className="mt-3 px-4 py-2 text-sm text-purple-600 border border-purple-200 rounded-lg hover:bg-purple-50">
                     Standard-Aufgaben laden
                   </button>
                 )}
               </div>
             ) : (
               <div className="divide-y">
-                {upcomingTasks.slice(0, 5).map(t => (
-                  <div
-                    key={t.id}
-                    className="flex items-center gap-4 p-4 hover:bg-gray-50 cursor-pointer"
-                    onClick={() => setDetailTask(t)}
-                  >
+                {p.upcomingTasks.slice(0, 5).map(t => (
+                  <div key={t.id} className="flex items-center gap-4 p-4 hover:bg-gray-50 cursor-pointer" onClick={() => p.setDetailTask(t)}>
                     <span className={`w-8 h-8 flex items-center justify-center rounded-full text-sm ${STATUS_COLORS[t.status]}`}>
                       {STATUS_ICONS[t.status]}
                     </span>
                     <div className="flex-1 min-w-0">
                       <p className="text-sm font-medium text-gray-900 truncate">{t.title}</p>
                       <div className="flex items-center gap-2 mt-0.5">
-                        <span className={`text-xs rounded px-1.5 py-0.5 ${CATEGORY_COLORS[t.category]}`}>
-                          {CATEGORY_LABELS[t.category]}
-                        </span>
+                        <span className={`text-xs rounded px-1.5 py-0.5 ${CATEGORY_COLORS[t.category]}`}>{CATEGORY_LABELS[t.category]}</span>
                         <span className="text-xs text-gray-400">{FREQUENCY_LABELS[t.frequency]}</span>
                       </div>
                     </div>
@@ -1129,10 +126,8 @@ export default function ProcessTasksPage() {
                       <p className={`text-sm ${dueLabelColor(t.next_due_date)}`}>{dueLabel(t.next_due_date)}</p>
                       <p className="text-xs text-gray-400">{formatDate(t.next_due_date)}</p>
                     </div>
-                    <button
-                      onClick={e => { e.stopPropagation(); setCompleteTask(t) }}
-                      className="px-3 py-1 text-xs bg-green-600 text-white rounded-lg hover:bg-green-700 flex-shrink-0"
-                    >
+                    <button onClick={e => { e.stopPropagation(); p.setCompleteTask(t) }}
+                      className="px-3 py-1 text-xs bg-green-600 text-white rounded-lg hover:bg-green-700 flex-shrink-0">
                       Erledigen
                     </button>
                   </div>
@@ -1143,47 +138,29 @@ export default function ProcessTasksPage() {
         </div>
       )}
 
-      {/* ===== ALL TASKS TAB ===== */}
-      {activeTab === 'all' && (
+      {p.activeTab === 'all' && (
         <div className="space-y-4">
-          {/* Filters */}
           <div className="flex flex-wrap items-center gap-3">
-            <select
-              value={filterStatus}
-              onChange={e => { setFilterStatus(e.target.value); setPage(0) }}
-              className="px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white"
-            >
+            <select value={p.filterStatus} onChange={e => { p.setFilterStatus(e.target.value); p.setPage(0) }}
+              className="px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white">
               <option value="">Alle Status</option>
-              {Object.entries(STATUS_LABELS).map(([k, v]) => (
-                <option key={k} value={k}>{v}</option>
-              ))}
+              {Object.entries(STATUS_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
             </select>
-            <select
-              value={filterCategory}
-              onChange={e => { setFilterCategory(e.target.value); setPage(0) }}
-              className="px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white"
-            >
+            <select value={p.filterCategory} onChange={e => { p.setFilterCategory(e.target.value); p.setPage(0) }}
+              className="px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white">
               <option value="">Alle Kategorien</option>
-              {Object.entries(CATEGORY_LABELS).map(([k, v]) => (
-                <option key={k} value={k}>{v}</option>
-              ))}
+              {Object.entries(CATEGORY_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
             </select>
-            <select
-              value={filterFrequency}
-              onChange={e => { setFilterFrequency(e.target.value); setPage(0) }}
-              className="px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white"
-            >
+            <select value={p.filterFrequency} onChange={e => { p.setFilterFrequency(e.target.value); p.setPage(0) }}
+              className="px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white">
               <option value="">Alle Frequenzen</option>
-              {Object.entries(FREQUENCY_LABELS).map(([k, v]) => (
-                <option key={k} value={k}>{v}</option>
-              ))}
+              {Object.entries(FREQUENCY_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
             </select>
-            <span className="text-sm text-gray-400 ml-auto">{totalTasks} Aufgaben</span>
+            <span className="text-sm text-gray-400 ml-auto">{p.totalTasks} Aufgaben</span>
           </div>
 
-          {/* Table */}
           <div className="bg-white rounded-xl border overflow-hidden">
-            {loading ? (
+            {p.loading ? (
               <div className="p-6 space-y-3">
                 {[1, 2, 3, 4, 5].map(i => (
                   <div key={i} className="flex gap-4 animate-pulse">
@@ -1195,7 +172,7 @@ export default function ProcessTasksPage() {
                   </div>
                 ))}
               </div>
-            ) : tasks.length === 0 ? (
+            ) : p.tasks.length === 0 ? (
               <div className="p-12 text-center text-gray-400">
                 <p className="text-lg mb-1">Keine Aufgaben gefunden</p>
                 <p className="text-sm">Erstellen Sie eine neue Aufgabe oder laden Sie die Standard-Aufgaben.</p>
@@ -1214,12 +191,8 @@ export default function ProcessTasksPage() {
                   </tr>
                 </thead>
                 <tbody className="divide-y">
-                  {tasks.map(t => (
-                    <tr
-                      key={t.id}
-                      className="hover:bg-gray-50 cursor-pointer"
-                      onClick={() => setDetailTask(t)}
-                    >
+                  {p.tasks.map(t => (
+                    <tr key={t.id} className="hover:bg-gray-50 cursor-pointer" onClick={() => p.setDetailTask(t)}>
                       <td className="py-3 px-4">
                         <span className={`w-7 h-7 flex items-center justify-center rounded-full text-xs ${STATUS_COLORS[t.status]}`}>
                           {STATUS_ICONS[t.status]}
@@ -1234,9 +207,7 @@ export default function ProcessTasksPage() {
                           {CATEGORY_LABELS[t.category] || t.category}
                         </span>
                       </td>
-                      <td className="py-3 px-4 text-gray-600">
-                        {FREQUENCY_LABELS[t.frequency] || t.frequency}
-                      </td>
+                      <td className="py-3 px-4 text-gray-600">{FREQUENCY_LABELS[t.frequency] || t.frequency}</td>
                       <td className="py-3 px-4">
                         <span className={dueLabelColor(t.next_due_date)}>{formatDate(t.next_due_date)}</span>
                         <p className={`text-xs ${dueLabelColor(t.next_due_date)}`}>{dueLabel(t.next_due_date)}</p>
@@ -1245,39 +216,23 @@ export default function ProcessTasksPage() {
                       <td className="py-3 px-4 text-right" onClick={e => e.stopPropagation()}>
                         <div className="flex items-center justify-end gap-1">
                           {t.status !== 'completed' && (
-                            <button
-                              onClick={() => setCompleteTask(t)}
-                              className="px-2 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-700"
-                              title="Erledigen"
-                            >
+                            <button onClick={() => p.setCompleteTask(t)}
+                              className="px-2 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-700" title="Erledigen">
                               {'\u2714'}
                             </button>
                           )}
                           {t.status !== 'completed' && (
-                            <button
-                              onClick={() => setSkipTask(t)}
-                              className="px-2 py-1 text-xs bg-yellow-500 text-white rounded hover:bg-yellow-600"
-                              title="Ueberspringen"
-                            >
+                            <button onClick={() => p.setSkipTask(t)}
+                              className="px-2 py-1 text-xs bg-yellow-500 text-white rounded hover:bg-yellow-600" title="Ueberspringen">
                               {'\u2192'}
                             </button>
                           )}
-                          <button
-                            onClick={() => {
-                              setEditTask(t)
-                            }}
-                            className="px-2 py-1 text-xs text-gray-500 hover:bg-gray-100 rounded border"
-                            title="Bearbeiten"
-                          >
+                          <button onClick={() => p.setEditTask(t)}
+                            className="px-2 py-1 text-xs text-gray-500 hover:bg-gray-100 rounded border" title="Bearbeiten">
                             {'\u270E'}
                           </button>
-                          <button
-                            onClick={() => {
-                              if (confirm('Aufgabe wirklich loeschen?')) handleDelete(t.id)
-                            }}
-                            className="px-2 py-1 text-xs text-red-500 hover:bg-red-50 rounded border border-red-200"
-                            title="Loeschen"
-                          >
+                          <button onClick={() => { if (confirm('Aufgabe wirklich loeschen?')) p.handleDelete(t.id) }}
+                            className="px-2 py-1 text-xs text-red-500 hover:bg-red-50 rounded border border-red-200" title="Loeschen">
                             {'\u2716'}
                           </button>
                         </div>
@@ -1289,24 +244,15 @@ export default function ProcessTasksPage() {
             )}
           </div>
 
-          {/* Pagination */}
-          {totalPages > 1 && (
+          {p.totalPages > 1 && (
             <div className="flex items-center justify-between">
-              <button
-                onClick={() => setPage(p => Math.max(0, p - 1))}
-                disabled={page === 0}
-                className="px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 rounded-lg border disabled:opacity-40"
-              >
+              <button onClick={() => p.setPage(prev => Math.max(0, prev - 1))} disabled={p.page === 0}
+                className="px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 rounded-lg border disabled:opacity-40">
                 Zurueck
               </button>
-              <span className="text-sm text-gray-500">
-                Seite {page + 1} von {totalPages}
-              </span>
-              <button
-                onClick={() => setPage(p => Math.min(totalPages - 1, p + 1))}
-                disabled={page >= totalPages - 1}
-                className="px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 rounded-lg border disabled:opacity-40"
-              >
+              <span className="text-sm text-gray-500">Seite {p.page + 1} von {p.totalPages}</span>
+              <button onClick={() => p.setPage(prev => Math.min(p.totalPages - 1, prev + 1))} disabled={p.page >= p.totalPages - 1}
+                className="px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 rounded-lg border disabled:opacity-40">
                 Weiter
               </button>
             </div>
@@ -1314,70 +260,45 @@ export default function ProcessTasksPage() {
         </div>
       )}
 
-      {/* ===== CALENDAR TAB ===== */}
-      {activeTab === 'calendar' && (
+      {p.activeTab === 'calendar' && (
         <div className="bg-white rounded-xl border p-5">
-          <CalendarView tasks={[...tasks, ...upcomingTasks].filter((t, i, arr) => arr.findIndex(x => x.id === t.id) === i)} />
+          <CalendarView tasks={[...p.tasks, ...p.upcomingTasks].filter((t, i, arr) => arr.findIndex(x => x.id === t.id) === i)} />
         </div>
       )}
 
-      {/* ===== MODALS ===== */}
-      {showForm && (
-        <TaskFormModal
-          onClose={() => setShowForm(false)}
-          onSave={handleCreate}
-        />
-      )}
+      {p.showForm && <TaskFormModal onClose={() => p.setShowForm(false)} onSave={p.handleCreate} />}
 
-      {editTask && (
+      {p.editTask && (
         <TaskFormModal
           initial={{
-            task_code: editTask.task_code,
-            title: editTask.title,
-            description: editTask.description || '',
-            category: editTask.category,
-            priority: editTask.priority,
-            frequency: editTask.frequency,
-            assigned_to: editTask.assigned_to || '',
-            responsible_team: editTask.responsible_team || '',
-            linked_module: editTask.linked_module || '',
-            next_due_date: editTask.next_due_date ? editTask.next_due_date.substring(0, 10) : '',
-            due_reminder_days: editTask.due_reminder_days,
-            notes: editTask.notes || '',
+            task_code: p.editTask.task_code, title: p.editTask.title,
+            description: p.editTask.description || '', category: p.editTask.category,
+            priority: p.editTask.priority, frequency: p.editTask.frequency,
+            assigned_to: p.editTask.assigned_to || '', responsible_team: p.editTask.responsible_team || '',
+            linked_module: p.editTask.linked_module || '',
+            next_due_date: p.editTask.next_due_date ? p.editTask.next_due_date.substring(0, 10) : '',
+            due_reminder_days: p.editTask.due_reminder_days, notes: p.editTask.notes || '',
           }}
-          onClose={() => setEditTask(null)}
-          onSave={handleUpdate}
-        />
+          onClose={() => p.setEditTask(null)} onSave={p.handleUpdate} />
       )}
 
-      {detailTask && (
-        <TaskDetailModal
-          task={detailTask}
-          onClose={() => setDetailTask(null)}
-          onComplete={t => { setDetailTask(null); setCompleteTask(t) }}
-          onSkip={t => { setDetailTask(null); setSkipTask(t) }}
-          onEdit={t => { setDetailTask(null); setEditTask(t) }}
-          onDelete={handleDelete}
-        />
+      {p.detailTask && (
+        <TaskDetailModal task={p.detailTask} onClose={() => p.setDetailTask(null)}
+          onComplete={t => { p.setDetailTask(null); p.setCompleteTask(t) }}
+          onSkip={t => { p.setDetailTask(null); p.setSkipTask(t) }}
+          onEdit={t => { p.setDetailTask(null); p.setEditTask(t) }}
+          onDelete={p.handleDelete} />
       )}
 
-      {completeTask && (
-        <CompleteModal
-          task={completeTask}
-          onClose={() => setCompleteTask(null)}
-          onComplete={handleComplete}
-        />
+      {p.completeTask && (
+        <CompleteModal task={p.completeTask} onClose={() => p.setCompleteTask(null)} onComplete={p.handleComplete} />
       )}
 
-      {skipTask && (
-        <SkipModal
-          task={skipTask}
-          onClose={() => setSkipTask(null)}
-          onSkip={handleSkip}
-        />
+      {p.skipTask && (
+        <SkipModal task={p.skipTask} onClose={() => p.setSkipTask(null)} onSkip={p.handleSkip} />
       )}
 
-      {toast && <Toast message={toast} onClose={() => setToast(null)} />}
+      {p.toast && <Toast message={p.toast} onClose={() => p.setToast(null)} />}
     </div>
   )
 }