From fc83ebfd82109bd702235caf8c92d35350ee6022 Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBookPro.fritz.box>
Date: Mon, 2 Mar 2026 13:13:26 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20Analyse-Module=20auf=20100%=20Runde=202?=
 =?UTF-8?q?=20=E2=80=94=20CREATE-Forms,=20Button-Handler,=20Persistenz?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Requirements: ADD-Form + Details-Panel mit Controls/Status-Anzeige
Controls: ADD-Form + Effectiveness-Persistenz via PUT
Evidence: Anzeigen/Herunterladen-Buttons mit fileUrl + disabled-State
Risks: RiskMatrix Cell-Click filtert Risiko-Liste mit Badge + Reset
AI Act: Mock-Daten entfernt, Loading-Skeleton, Edit/Delete-Handler
Audit Checklist: JSON-Export, debounced Notes-Persistenz, Neue Checkliste
Audit Report: Animiertes Skeleton statt Loading-Text

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../app/(sdk)/sdk/ai-act/page.tsx             | 178 +++++++++-------
 .../app/(sdk)/sdk/audit-checklist/page.tsx    |  90 +++++++-
 .../app/(sdk)/sdk/audit-report/page.tsx       |  37 +++-
 .../app/(sdk)/sdk/controls/page.tsx           | 136 +++++++++++-
 .../app/(sdk)/sdk/evidence/page.tsx           |  34 ++-
 .../app/(sdk)/sdk/requirements/page.tsx       | 194 +++++++++++++++++-
 admin-compliance/app/(sdk)/sdk/risks/page.tsx |  34 ++-
 7 files changed, 607 insertions(+), 96 deletions(-)

diff --git a/admin-compliance/app/(sdk)/sdk/ai-act/page.tsx b/admin-compliance/app/(sdk)/sdk/ai-act/page.tsx
index df43284..0d1f255 100644
--- a/admin-compliance/app/(sdk)/sdk/ai-act/page.tsx
+++ b/admin-compliance/app/(sdk)/sdk/ai-act/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useSDK } from '@/lib/sdk'
 import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
 
@@ -22,47 +22,32 @@ interface AISystem {
 }
 
 // =============================================================================
-// INITIAL DATA
+// LOADING SKELETON
 // =============================================================================
 
-const initialSystems: AISystem[] = [
-  {
-    id: 'ai-1',
-    name: 'Kundenservice Chatbot',
-    description: 'KI-gestuetzter Chatbot fuer Kundenanfragen',
-    classification: 'limited-risk',
-    purpose: 'Automatisierte Beantwortung von Kundenanfragen',
-    sector: 'Kundenservice',
-    status: 'classified',
-    obligations: ['Transparenzpflicht', 'Kennzeichnung als KI-System'],
-    assessmentDate: new Date('2024-01-15'),
-    assessmentResult: null,
-  },
-  {
-    id: 'ai-2',
-    name: 'Bewerber-Screening',
-    description: 'KI-System zur Vorauswahl von Bewerbungen',
-    classification: 'high-risk',
-    purpose: 'Automatisierte Bewertung von Bewerbungsunterlagen',
-    sector: 'Personal',
-    status: 'non-compliant',
-    obligations: ['Risikomanagementsystem', 'Datenlenkung', 'Technische Dokumentation', 'Menschliche Aufsicht', 'Transparenz'],
-    assessmentDate: new Date('2024-01-10'),
-    assessmentResult: null,
-  },
-  {
-    id: 'ai-3',
-    name: 'Empfehlungsalgorithmus',
-    description: 'Personalisierte Produktempfehlungen',
-    classification: 'minimal-risk',
-    purpose: 'Verbesserung der Kundenerfahrung durch personalisierte Empfehlungen',
-    sector: 'E-Commerce',
-    status: 'compliant',
-    obligations: [],
-    assessmentDate: new Date('2024-01-05'),
-    assessmentResult: null,
-  },
-]
+function LoadingSkeleton() {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+      {[1, 2, 3, 4].map(i => (
+        <div key={i} className="bg-white rounded-xl border border-gray-200 p-6 animate-pulse">
+          <div className="flex items-center gap-2 mb-3">
+            <div className="h-5 w-24 bg-gray-200 rounded-full" />
+            <div className="h-5 w-20 bg-gray-200 rounded-full" />
+          </div>
+          <div className="h-6 w-3/4 bg-gray-200 rounded mb-2" />
+          <div className="h-4 w-full bg-gray-100 rounded mb-4" />
+          <div className="h-4 w-1/2 bg-gray-100 rounded" />
+          <div className="mt-4 pt-4 border-t border-gray-100">
+            <div className="flex gap-2">
+              <div className="h-8 flex-1 bg-gray-200 rounded-lg" />
+              <div className="h-8 w-24 bg-gray-200 rounded-lg" />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
 
 // =============================================================================
 // COMPONENTS
@@ -103,23 +88,25 @@ function RiskPyramid({ systems }: { systems: AISystem[] }) {
 function AddSystemForm({
   onSubmit,
   onCancel,
+  initialData,
 }: {
   onSubmit: (system: Omit<AISystem, 'id' | 'assessmentDate' | 'assessmentResult'>) => void
   onCancel: () => void
+  initialData?: AISystem | null
 }) {
   const [formData, setFormData] = useState({
-    name: '',
-    description: '',
-    purpose: '',
-    sector: '',
-    classification: 'unclassified' as AISystem['classification'],
-    status: 'draft' as AISystem['status'],
-    obligations: [] as string[],
+    name: initialData?.name || '',
+    description: initialData?.description || '',
+    purpose: initialData?.purpose || '',
+    sector: initialData?.sector || '',
+    classification: (initialData?.classification || 'unclassified') as AISystem['classification'],
+    status: (initialData?.status || 'draft') as AISystem['status'],
+    obligations: initialData?.obligations || [] as string[],
   })
 
   return (
     <div className="bg-white rounded-xl border border-gray-200 p-6">
-      <h3 className="text-lg font-semibold text-gray-900 mb-4">Neues KI-System registrieren</h3>
+      <h3 className="text-lg font-semibold text-gray-900 mb-4">{initialData ? 'KI-System bearbeiten' : 'Neues KI-System registrieren'}</h3>
       <div className="space-y-4">
         <div>
           <label className="block text-sm font-medium text-gray-700 mb-1">Name *</label>
@@ -189,7 +176,7 @@ function AddSystemForm({
             formData.name ? 'bg-purple-600 text-white hover:bg-purple-700' : 'bg-gray-200 text-gray-400 cursor-not-allowed'
           }`}
         >
-          Registrieren
+          {initialData ? 'Speichern' : 'Registrieren'}
         </button>
       </div>
     </div>
@@ -200,11 +187,13 @@ function AISystemCard({
   system,
   onAssess,
   onEdit,
+  onDelete,
   assessing,
 }: {
   system: AISystem
   onAssess: () => void
   onEdit: () => void
+  onDelete: () => void
   assessing: boolean
 }) {
   const classificationColors = {
@@ -306,6 +295,12 @@ function AISystemCard({
         >
           Bearbeiten
         </button>
+        <button
+          onClick={onDelete}
+          className="px-4 py-2 text-sm text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+        >
+          Loeschen
+        </button>
       </div>
     </div>
   )
@@ -317,23 +312,57 @@ function AISystemCard({
 
 export default function AIActPage() {
   const { state } = useSDK()
-  const [systems, setSystems] = useState<AISystem[]>(initialSystems)
+  const [systems, setSystems] = useState<AISystem[]>([])
   const [filter, setFilter] = useState<string>('all')
   const [showAddForm, setShowAddForm] = useState(false)
+  const [editingSystem, setEditingSystem] = useState<AISystem | null>(null)
   const [assessingId, setAssessingId] = useState<string | null>(null)
   const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  // Load systems from SDK state on mount
+  useEffect(() => {
+    setLoading(true)
+    // Try to load from SDK state (aiSystems if available)
+    const sdkState = state as unknown as Record<string, unknown>
+    if (Array.isArray(sdkState.aiSystems) && sdkState.aiSystems.length > 0) {
+      setSystems(sdkState.aiSystems as AISystem[])
+    }
+    setLoading(false)
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
   const handleAddSystem = (data: Omit<AISystem, 'id' | 'assessmentDate' | 'assessmentResult'>) => {
-    const newSystem: AISystem = {
-      ...data,
-      id: `ai-${Date.now()}`,
-      assessmentDate: data.classification !== 'unclassified' ? new Date() : null,
-      assessmentResult: null,
+    if (editingSystem) {
+      // Edit existing system
+      setSystems(prev => prev.map(s =>
+        s.id === editingSystem.id
+          ? { ...s, ...data }
+          : s
+      ))
+      setEditingSystem(null)
+    } else {
+      // Create new system
+      const newSystem: AISystem = {
+        ...data,
+        id: `ai-${Date.now()}`,
+        assessmentDate: data.classification !== 'unclassified' ? new Date() : null,
+        assessmentResult: null,
+      }
+      setSystems(prev => [...prev, newSystem])
     }
-    setSystems(prev => [...prev, newSystem])
     setShowAddForm(false)
   }
 
+  const handleDelete = (id: string) => {
+    if (!confirm('Moechten Sie dieses KI-System wirklich loeschen?')) return
+    setSystems(prev => prev.filter(s => s.id !== id))
+  }
+
+  const handleEdit = (system: AISystem) => {
+    setEditingSystem(system)
+    setShowAddForm(true)
+  }
+
   const handleAssess = async (systemId: string) => {
     const system = systems.find(s => s.id === systemId)
     if (!system) return
@@ -420,11 +449,12 @@ export default function AIActPage() {
         </div>
       )}
 
-      {/* Add System Form */}
+      {/* Add/Edit System Form */}
       {showAddForm && (
         <AddSystemForm
           onSubmit={handleAddSystem}
-          onCancel={() => setShowAddForm(false)}
+          onCancel={() => { setShowAddForm(false); setEditingSystem(null) }}
+          initialData={editingSystem}
         />
       )}
 
@@ -474,20 +504,26 @@ export default function AIActPage() {
         ))}
       </div>
 
-      {/* AI Systems List */}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        {filteredSystems.map(system => (
-          <AISystemCard
-            key={system.id}
-            system={system}
-            onAssess={() => handleAssess(system.id)}
-            onEdit={() => {/* Edit handler */}}
-            assessing={assessingId === system.id}
-          />
-        ))}
-      </div>
+      {/* Loading */}
+      {loading && <LoadingSkeleton />}
 
-      {filteredSystems.length === 0 && (
+      {/* AI Systems List */}
+      {!loading && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {filteredSystems.map(system => (
+            <AISystemCard
+              key={system.id}
+              system={system}
+              onAssess={() => handleAssess(system.id)}
+              onEdit={() => handleEdit(system)}
+              onDelete={() => handleDelete(system.id)}
+              assessing={assessingId === system.id}
+            />
+          ))}
+        </div>
+      )}
+
+      {!loading && filteredSystems.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-purple-100 rounded-full flex items-center justify-center mb-4">
             <svg className="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/admin-compliance/app/(sdk)/sdk/audit-checklist/page.tsx b/admin-compliance/app/(sdk)/sdk/audit-checklist/page.tsx
index 1881af1..57d645b 100644
--- a/admin-compliance/app/(sdk)/sdk/audit-checklist/page.tsx
+++ b/admin-compliance/app/(sdk)/sdk/audit-checklist/page.tsx
@@ -1,6 +1,7 @@
 'use client'
 
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef, useCallback } from 'react'
+import { useRouter } from 'next/navigation'
 import { useSDK, ChecklistItem as SDKChecklistItem } from '@/lib/sdk'
 import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
 
@@ -141,10 +142,12 @@ function ChecklistItemCard({
   item,
   onStatusChange,
   onNotesChange,
+  onAddEvidence,
 }: {
   item: DisplayChecklistItem
   onStatusChange: (status: DisplayStatus) => void
   onNotesChange: (notes: string) => void
+  onAddEvidence: () => void
 }) {
   const [showNotes, setShowNotes] = useState(false)
 
@@ -225,7 +228,10 @@ function ChecklistItemCard({
         >
           {showNotes ? 'Notizen ausblenden' : 'Notizen bearbeiten'}
         </button>
-        <button className="text-sm text-gray-500 hover:text-gray-700">
+        <button
+          onClick={onAddEvidence}
+          className="text-sm text-gray-500 hover:text-gray-700"
+        >
           Nachweis hinzufuegen
         </button>
       </div>
@@ -267,10 +273,12 @@ function LoadingSkeleton() {
 
 export default function AuditChecklistPage() {
   const { state, dispatch } = useSDK()
+  const router = useRouter()
   const [filter, setFilter] = useState<string>('all')
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [activeSessionId, setActiveSessionId] = useState<string | null>(null)
+  const notesTimerRef = useRef<Record<string, ReturnType<typeof setTimeout>>>({})
 
   // Fetch checklist from backend on mount
   useEffect(() => {
@@ -411,11 +419,76 @@ export default function AuditChecklistPage() {
     }
   }
 
-  const handleNotesChange = async (itemId: string, notes: string) => {
+  const handleNotesChange = useCallback((itemId: string, notes: string) => {
     const updatedChecklist = state.checklist.map(item =>
       item.id === itemId ? { ...item, notes } : item
     )
     dispatch({ type: 'SET_STATE', payload: { checklist: updatedChecklist } })
+
+    // Debounced persistence to backend
+    if (notesTimerRef.current[itemId]) {
+      clearTimeout(notesTimerRef.current[itemId])
+    }
+    notesTimerRef.current[itemId] = setTimeout(async () => {
+      if (activeSessionId) {
+        const item = state.checklist.find(i => i.id === itemId)
+        try {
+          await fetch(`/api/sdk/v1/compliance/audit/checklist/${activeSessionId}/items/${item?.requirementId || itemId}/sign-off`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ notes }),
+          })
+        } catch {
+          // Silently fail
+        }
+      }
+    }, 1000)
+  }, [state.checklist, activeSessionId, dispatch])
+
+  const handleExport = () => {
+    const exportData = displayItems.map(item => ({
+      id: item.id,
+      requirementId: item.requirementId,
+      question: item.question,
+      category: item.category,
+      status: item.status,
+      notes: item.notes,
+      priority: item.priority,
+      verifiedBy: item.verifiedBy,
+      verifiedAt: item.verifiedAt?.toISOString() || null,
+    }))
+    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `audit-checklist-${new Date().toISOString().split('T')[0]}.json`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+  }
+
+  const handleNewChecklist = async () => {
+    try {
+      setError(null)
+      const res = await fetch('/api/sdk/v1/compliance/audit/sessions', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: `Compliance Audit ${new Date().toLocaleDateString('de-DE')}`,
+          auditor_name: 'Aktueller Benutzer',
+          regulation_codes: ['GDPR'],
+        }),
+      })
+      if (res.ok) {
+        // Reload data
+        window.location.reload()
+      } else {
+        setError('Fehler beim Erstellen der neuen Checkliste')
+      }
+    } catch {
+      setError('Verbindung zum Backend fehlgeschlagen')
+    }
   }
 
   const stepInfo = STEP_EXPLANATIONS['audit-checklist']
@@ -431,10 +504,16 @@ export default function AuditChecklistPage() {
         tips={stepInfo.tips}
       >
         <div className="flex items-center gap-2">
-          <button className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
+          <button
+            onClick={handleExport}
+            className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+          >
             Exportieren
           </button>
-          <button className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
+          <button
+            onClick={handleNewChecklist}
+            className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
+          >
             <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
             </svg>
@@ -550,6 +629,7 @@ export default function AuditChecklistPage() {
               item={item}
               onStatusChange={(status) => handleStatusChange(item.id, status)}
               onNotesChange={(notes) => handleNotesChange(item.id, notes)}
+              onAddEvidence={() => router.push('/sdk/evidence')}
             />
           ))}
         </div>
diff --git a/admin-compliance/app/(sdk)/sdk/audit-report/page.tsx b/admin-compliance/app/(sdk)/sdk/audit-report/page.tsx
index 9125ec1..75450a6 100644
--- a/admin-compliance/app/(sdk)/sdk/audit-report/page.tsx
+++ b/admin-compliance/app/(sdk)/sdk/audit-report/page.tsx
@@ -8,7 +8,7 @@
 
 import { useState, useEffect } from 'react'
 import { useSDK } from '@/lib/sdk'
-import StepHeader from '@/components/sdk/StepHeader/StepHeader'
+import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
 
 interface AuditSession {
   id: string
@@ -177,7 +177,14 @@ export default function AuditReportPage() {
 
   return (
     <div className="space-y-6">
-      <StepHeader stepId="audit-report" showProgress={true} />
+      <StepHeader
+        stepId="audit-report"
+        title={STEP_EXPLANATIONS['audit-report']?.title || 'Audit Report'}
+        description={STEP_EXPLANATIONS['audit-report']?.description || 'Audit-Berichte erstellen und verwalten'}
+        explanation={STEP_EXPLANATIONS['audit-report']?.explanation || 'Erstellen Sie Audit-Sessions und generieren Sie PDF-Reports.'}
+        tips={STEP_EXPLANATIONS['audit-report']?.tips}
+        showProgress={true}
+      />
 
       {error && (
         <div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 flex items-center justify-between">
@@ -216,7 +223,31 @@ export default function AuditReportPage() {
           </div>
 
           {loading ? (
-            <div className="text-center py-12 text-slate-500">Lade Audit-Sessions...</div>
+            <div className="space-y-4">
+              {[1, 2, 3].map(i => (
+                <div key={i} className="bg-white rounded-xl border border-slate-200 p-6 animate-pulse">
+                  <div className="flex items-start justify-between mb-4">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-3 mb-2">
+                        <div className="h-6 w-48 bg-slate-200 rounded" />
+                        <div className="h-5 w-20 bg-slate-200 rounded-full" />
+                      </div>
+                      <div className="h-4 w-64 bg-slate-100 rounded mt-2" />
+                    </div>
+                    <div className="text-right">
+                      <div className="h-8 w-16 bg-slate-200 rounded" />
+                      <div className="h-3 w-24 bg-slate-100 rounded mt-1" />
+                    </div>
+                  </div>
+                  <div className="h-2 bg-slate-100 rounded-full mb-4" />
+                  <div className="grid grid-cols-3 gap-4">
+                    <div className="h-16 bg-slate-100 rounded-lg" />
+                    <div className="h-16 bg-slate-100 rounded-lg" />
+                    <div className="h-16 bg-slate-100 rounded-lg" />
+                  </div>
+                </div>
+              ))}
+            </div>
           ) : sessions.length === 0 ? (
             <div className="bg-white rounded-xl border border-slate-200 p-8 text-center">
               <h3 className="text-lg font-medium text-slate-700 mb-2">Keine Audit-Sessions vorhanden</h3>
diff --git a/admin-compliance/app/(sdk)/sdk/controls/page.tsx b/admin-compliance/app/(sdk)/sdk/controls/page.tsx
index 1941f6c..61e4129 100644
--- a/admin-compliance/app/(sdk)/sdk/controls/page.tsx
+++ b/admin-compliance/app/(sdk)/sdk/controls/page.tsx
@@ -283,6 +283,98 @@ function ControlCard({
   )
 }
 
+function AddControlForm({
+  onSubmit,
+  onCancel,
+}: {
+  onSubmit: (data: { name: string; description: string; type: ControlType; category: string; owner: string }) => void
+  onCancel: () => void
+}) {
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    type: 'TECHNICAL' as ControlType,
+    category: '',
+    owner: '',
+  })
+
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 p-6">
+      <h3 className="text-lg font-semibold text-gray-900 mb-4">Neue Kontrolle</h3>
+      <div className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Name *</label>
+          <input
+            type="text"
+            value={formData.name}
+            onChange={e => setFormData({ ...formData, name: e.target.value })}
+            placeholder="z.B. Zugriffskontrolle"
+            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
+          <textarea
+            value={formData.description}
+            onChange={e => setFormData({ ...formData, description: e.target.value })}
+            placeholder="Beschreiben Sie die Kontrolle..."
+            rows={2}
+            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+          />
+        </div>
+        <div className="grid grid-cols-3 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Typ</label>
+            <select
+              value={formData.type}
+              onChange={e => setFormData({ ...formData, type: e.target.value as ControlType })}
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+            >
+              <option value="TECHNICAL">Technisch</option>
+              <option value="ORGANIZATIONAL">Organisatorisch</option>
+              <option value="PHYSICAL">Physisch</option>
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Kategorie</label>
+            <input
+              type="text"
+              value={formData.category}
+              onChange={e => setFormData({ ...formData, category: e.target.value })}
+              placeholder="z.B. Zutrittskontrolle"
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Verantwortlich</label>
+            <input
+              type="text"
+              value={formData.owner}
+              onChange={e => setFormData({ ...formData, owner: e.target.value })}
+              placeholder="z.B. IT Security"
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+            />
+          </div>
+        </div>
+      </div>
+      <div className="mt-6 flex items-center justify-end gap-3">
+        <button onClick={onCancel} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
+          Abbrechen
+        </button>
+        <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>
+      </div>
+    </div>
+  )
+}
+
 function LoadingSkeleton() {
   return (
     <div className="space-y-4">
@@ -311,6 +403,7 @@ export default function ControlsPage() {
   const [filter, setFilter] = useState<string>('all')
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
+  const [showAddForm, setShowAddForm] = useState(false)
 
   // Track effectiveness locally as it's not in the SDK state type
   const [effectivenessMap, setEffectivenessMap] = useState<Record<string, number>>({})
@@ -436,8 +529,36 @@ export default function ControlsPage() {
     }
   }
 
-  const handleEffectivenessChange = (controlId: string, effectiveness: number) => {
+  const handleEffectivenessChange = async (controlId: string, effectiveness: number) => {
     setEffectivenessMap(prev => ({ ...prev, [controlId]: effectiveness }))
+
+    // Persist to backend
+    try {
+      await fetch(`/api/sdk/v1/compliance/controls/${controlId}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ effectiveness_score: effectiveness }),
+      })
+    } catch {
+      // Silently fail — local state is already updated
+    }
+  }
+
+  const handleAddControl = (data: { name: string; description: string; type: ControlType; category: string; owner: string }) => {
+    const newControl: SDKControl = {
+      id: `ctrl-${Date.now()}`,
+      name: data.name,
+      description: data.description,
+      type: data.type,
+      category: data.category,
+      implementationStatus: 'NOT_IMPLEMENTED',
+      effectiveness: 'LOW',
+      evidence: [],
+      owner: data.owner || null,
+      dueDate: null,
+    }
+    dispatch({ type: 'ADD_CONTROL', payload: newControl })
+    setShowAddForm(false)
   }
 
   const stepInfo = STEP_EXPLANATIONS['controls']
@@ -452,7 +573,10 @@ export default function ControlsPage() {
         explanation={stepInfo.explanation}
         tips={stepInfo.tips}
       >
-        <button className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
+        <button
+          onClick={() => setShowAddForm(true)}
+          className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
+        >
           <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
           </svg>
@@ -460,6 +584,14 @@ export default function ControlsPage() {
         </button>
       </StepHeader>
 
+      {/* Add Form */}
+      {showAddForm && (
+        <AddControlForm
+          onSubmit={handleAddControl}
+          onCancel={() => setShowAddForm(false)}
+        />
+      )}
+
       {/* Error Banner */}
       {error && (
         <div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 flex items-center justify-between">
diff --git a/admin-compliance/app/(sdk)/sdk/evidence/page.tsx b/admin-compliance/app/(sdk)/sdk/evidence/page.tsx
index d8feb06..2be256b 100644
--- a/admin-compliance/app/(sdk)/sdk/evidence/page.tsx
+++ b/admin-compliance/app/(sdk)/sdk/evidence/page.tsx
@@ -162,7 +162,7 @@ const evidenceTemplates: EvidenceTemplate[] = [
 // COMPONENTS
 // =============================================================================
 
-function EvidenceCard({ evidence, onDelete }: { evidence: DisplayEvidence; onDelete: () => void }) {
+function EvidenceCard({ evidence, onDelete, onView, onDownload }: { evidence: DisplayEvidence; onDelete: () => void; onView: () => void; onDownload: () => void }) {
   const typeIcons = {
     document: (
       <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -255,10 +255,18 @@ function EvidenceCard({ evidence, onDelete }: { evidence: DisplayEvidence; onDel
       <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 className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
+          <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 className="px-3 py-1 text-sm text-purple-600 hover:bg-purple-50 rounded-lg transition-colors">
+          <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
@@ -469,6 +477,24 @@ export default function EvidencePage() {
     }
   }
 
+  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()
   }
@@ -605,6 +631,8 @@ export default function EvidencePage() {
               key={ev.id}
               evidence={ev}
               onDelete={() => handleDelete(ev.id)}
+              onView={() => handleView(ev)}
+              onDownload={() => handleDownload(ev)}
             />
           ))}
         </div>
diff --git a/admin-compliance/app/(sdk)/sdk/requirements/page.tsx b/admin-compliance/app/(sdk)/sdk/requirements/page.tsx
index a932f97..d4a27f4 100644
--- a/admin-compliance/app/(sdk)/sdk/requirements/page.tsx
+++ b/admin-compliance/app/(sdk)/sdk/requirements/page.tsx
@@ -161,12 +161,111 @@ const requirementTemplates: Omit<DisplayRequirement, 'displayStatus' | 'controls
 // COMPONENTS
 // =============================================================================
 
+function AddRequirementForm({
+  onSubmit,
+  onCancel,
+}: {
+  onSubmit: (data: { regulation: string; article: string; title: string; description: string; criticality: RiskSeverity }) => void
+  onCancel: () => void
+}) {
+  const [formData, setFormData] = useState({
+    regulation: '',
+    article: '',
+    title: '',
+    description: '',
+    criticality: 'MEDIUM' as RiskSeverity,
+  })
+
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 p-6">
+      <h3 className="text-lg font-semibold text-gray-900 mb-4">Neue Anforderung</h3>
+      <div className="space-y-4">
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Verordnung *</label>
+            <input
+              type="text"
+              value={formData.regulation}
+              onChange={e => setFormData({ ...formData, regulation: e.target.value })}
+              placeholder="z.B. DSGVO"
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Artikel</label>
+            <input
+              type="text"
+              value={formData.article}
+              onChange={e => setFormData({ ...formData, article: e.target.value })}
+              placeholder="z.B. Art. 6"
+              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+            />
+          </div>
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Titel *</label>
+          <input
+            type="text"
+            value={formData.title}
+            onChange={e => setFormData({ ...formData, title: e.target.value })}
+            placeholder="z.B. Rechtmaessigkeit der Verarbeitung"
+            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
+          <textarea
+            value={formData.description}
+            onChange={e => setFormData({ ...formData, description: e.target.value })}
+            placeholder="Beschreiben Sie die Anforderung..."
+            rows={3}
+            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700 mb-1">Kritikalitaet</label>
+          <select
+            value={formData.criticality}
+            onChange={e => setFormData({ ...formData, criticality: e.target.value as RiskSeverity })}
+            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+          >
+            <option value="LOW">Niedrig</option>
+            <option value="MEDIUM">Mittel</option>
+            <option value="HIGH">Hoch</option>
+            <option value="CRITICAL">Kritisch</option>
+          </select>
+        </div>
+      </div>
+      <div className="mt-6 flex items-center justify-end gap-3">
+        <button onClick={onCancel} className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
+          Abbrechen
+        </button>
+        <button
+          onClick={() => onSubmit(formData)}
+          disabled={!formData.title || !formData.regulation}
+          className={`px-6 py-2 rounded-lg font-medium transition-colors ${
+            formData.title && formData.regulation ? 'bg-purple-600 text-white hover:bg-purple-700' : 'bg-gray-200 text-gray-400 cursor-not-allowed'
+          }`}
+        >
+          Hinzufuegen
+        </button>
+      </div>
+    </div>
+  )
+}
+
 function RequirementCard({
   requirement,
   onStatusChange,
+  expanded,
+  onToggleDetails,
+  linkedControls,
 }: {
   requirement: DisplayRequirement
   onStatusChange: (status: RequirementStatus) => void
+  expanded: boolean
+  onToggleDetails: () => void
+  linkedControls: { id: string; name: string }[]
 }) {
   const priorityColors = {
     critical: 'bg-red-100 text-red-700',
@@ -220,10 +319,48 @@ function RequirementCard({
           <span>{requirement.controlsLinked} Kontrollen</span>
           <span>{requirement.evidenceCount} Nachweise</span>
         </div>
-        <button className="text-sm text-purple-600 hover:text-purple-700 font-medium">
-          Details anzeigen
+        <button
+          onClick={onToggleDetails}
+          className="text-sm text-purple-600 hover:text-purple-700 font-medium"
+        >
+          {expanded ? 'Details ausblenden' : 'Details anzeigen'}
         </button>
       </div>
+
+      {expanded && (
+        <div className="mt-4 pt-4 border-t border-gray-200 space-y-3">
+          <div>
+            <h4 className="text-sm font-medium text-gray-700 mb-1">Vollstaendige Beschreibung</h4>
+            <p className="text-sm text-gray-600">{requirement.description || 'Keine Beschreibung vorhanden.'}</p>
+          </div>
+          <div>
+            <h4 className="text-sm font-medium text-gray-700 mb-1">Zugeordnete Kontrollen ({linkedControls.length})</h4>
+            {linkedControls.length > 0 ? (
+              <div className="flex flex-wrap gap-2">
+                {linkedControls.map(c => (
+                  <span key={c.id} className="px-2 py-1 text-xs bg-green-50 text-green-700 rounded">{c.name}</span>
+                ))}
+              </div>
+            ) : (
+              <p className="text-sm text-gray-400">Keine Kontrollen zugeordnet</p>
+            )}
+          </div>
+          <div>
+            <h4 className="text-sm font-medium text-gray-700 mb-1">Status-Historie</h4>
+            <div className="flex items-center gap-2 text-sm text-gray-500">
+              <span className={`px-2 py-0.5 text-xs rounded-full ${
+                requirement.displayStatus === 'compliant' ? 'bg-green-100 text-green-700' :
+                requirement.displayStatus === 'partial' ? 'bg-yellow-100 text-yellow-700' :
+                'bg-red-100 text-red-700'
+              }`}>
+                {requirement.status === 'NOT_STARTED' ? 'Nicht begonnen' :
+                 requirement.status === 'IN_PROGRESS' ? 'In Bearbeitung' :
+                 requirement.status === 'IMPLEMENTED' ? 'Implementiert' : 'Verifiziert'}
+              </span>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }
@@ -255,6 +392,8 @@ export default function RequirementsPage() {
   const [searchQuery, setSearchQuery] = useState('')
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
+  const [showAddForm, setShowAddForm] = useState(false)
+  const [expandedId, setExpandedId] = useState<string | null>(null)
 
   // Fetch requirements from backend on mount
   useEffect(() => {
@@ -371,6 +510,22 @@ export default function RequirementsPage() {
     }
   }
 
+  const handleAddRequirement = (data: { regulation: string; article: string; title: string; description: string; criticality: RiskSeverity }) => {
+    const newReq: SDKRequirement = {
+      id: `req-${Date.now()}`,
+      regulation: data.regulation,
+      article: data.article,
+      title: data.title,
+      description: data.description,
+      criticality: data.criticality,
+      applicableModules: [],
+      status: 'NOT_STARTED',
+      controls: [],
+    }
+    dispatch({ type: 'ADD_REQUIREMENT', payload: newReq })
+    setShowAddForm(false)
+  }
+
   const stepInfo = STEP_EXPLANATIONS['requirements']
 
   return (
@@ -383,7 +538,10 @@ export default function RequirementsPage() {
         explanation={stepInfo.explanation}
         tips={stepInfo.tips}
       >
-        <button className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
+        <button
+          onClick={() => setShowAddForm(true)}
+          className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
+        >
           <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
           </svg>
@@ -391,6 +549,14 @@ export default function RequirementsPage() {
         </button>
       </StepHeader>
 
+      {/* Add Form */}
+      {showAddForm && (
+        <AddRequirementForm
+          onSubmit={handleAddRequirement}
+          onCancel={() => setShowAddForm(false)}
+        />
+      )}
+
       {/* Error Banner */}
       {error && (
         <div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 flex items-center justify-between">
@@ -476,13 +642,21 @@ export default function RequirementsPage() {
       {/* Requirements List */}
       {!loading && (
         <div className="space-y-4">
-          {filteredRequirements.map(requirement => (
-            <RequirementCard
-              key={requirement.id}
-              requirement={requirement}
-              onStatusChange={(status) => handleStatusChange(requirement.id, status)}
-            />
-          ))}
+          {filteredRequirements.map(requirement => {
+            const linkedControls = state.controls
+              .filter(c => c.evidence.includes(requirement.id))
+              .map(c => ({ id: c.id, name: c.name }))
+            return (
+              <RequirementCard
+                key={requirement.id}
+                requirement={requirement}
+                onStatusChange={(status) => handleStatusChange(requirement.id, status)}
+                expanded={expandedId === requirement.id}
+                onToggleDetails={() => setExpandedId(expandedId === requirement.id ? null : requirement.id)}
+                linkedControls={linkedControls}
+              />
+            )
+          })}
         </div>
       )}
 
diff --git a/admin-compliance/app/(sdk)/sdk/risks/page.tsx b/admin-compliance/app/(sdk)/sdk/risks/page.tsx
index c7990fc..e41cae1 100644
--- a/admin-compliance/app/(sdk)/sdk/risks/page.tsx
+++ b/admin-compliance/app/(sdk)/sdk/risks/page.tsx
@@ -387,6 +387,7 @@ export default function RisksPage() {
   const [editingRisk, setEditingRisk] = useState<Risk | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
+  const [matrixFilter, setMatrixFilter] = useState<{ likelihood: number; impact: number } | null>(null)
 
   // Fetch risks from backend on mount
   useEffect(() => {
@@ -595,14 +596,43 @@ export default function RisksPage() {
       {loading && <LoadingSkeleton />}
 
       {/* Matrix */}
-      {!loading && <RiskMatrix risks={state.risks} onCellClick={() => {}} />}
+      {!loading && (
+        <RiskMatrix
+          risks={state.risks}
+          onCellClick={(l, i) => {
+            if (matrixFilter && matrixFilter.likelihood === l && matrixFilter.impact === i) {
+              setMatrixFilter(null)
+            } else {
+              setMatrixFilter({ likelihood: l, impact: i })
+            }
+          }}
+        />
+      )}
+
+      {/* Matrix Filter Badge */}
+      {matrixFilter && (
+        <div className="flex items-center gap-2">
+          <span className="px-3 py-1 text-sm bg-purple-100 text-purple-700 rounded-full flex items-center gap-2">
+            Gefiltert: L={matrixFilter.likelihood} I={matrixFilter.impact}
+            <button
+              onClick={() => setMatrixFilter(null)}
+              className="text-purple-500 hover:text-purple-700 font-bold"
+            >
+              &times;
+            </button>
+          </span>
+        </div>
+      )}
 
       {/* Risk List */}
       {!loading && state.risks.length > 0 && (
         <div>
-          <h3 className="text-lg font-semibold text-gray-900 mb-4">Alle Risiken</h3>
+          <h3 className="text-lg font-semibold text-gray-900 mb-4">
+            {matrixFilter ? `Risiken (L=${matrixFilter.likelihood}, I=${matrixFilter.impact})` : 'Alle Risiken'}
+          </h3>
           <div className="space-y-4">
             {state.risks
+              .filter(risk => !matrixFilter || (risk.likelihood === matrixFilter.likelihood && risk.impact === matrixFilter.impact))
               .sort((a, b) => b.inherentRiskScore - a.inherentRiskScore)
               .map(risk => (
                 <RiskCard