feat: Alle 5 verbleibenden SDK-Module auf 100% — RAG, Security-Backlog, Quality, Notfallplan, Loeschfristen

Paket A — RAG Proxy:
- NEU: admin-compliance/app/api/sdk/v1/rag/[[...path]]/route.ts
  → Proxy zu ai-compliance-sdk:8090, GET+POST, UUID-Validierung
- UPDATE: rag/page.tsx — setTimeout Mock → echte API-Calls
  GET /regulations → dynamische suggestedQuestions
  POST /search → Qdrant-Ergebnisse mit score, title, reference

Paket B — Security-Backlog + Quality:
- NEU: migrations/014_security_backlog.sql + 015_quality.sql
- NEU: compliance/api/security_backlog_routes.py — CRUD + Stats
- NEU: compliance/api/quality_routes.py — Metrics + Tests CRUD + Stats
- UPDATE: security-backlog/page.tsx — mockItems → API
- UPDATE: quality/page.tsx — mockMetrics/mockTests → API
- UPDATE: compliance/api/__init__.py — Router-Registrierung
- NEU: tests/test_security_backlog_routes.py (48 Tests — 48/48 bestanden)
- NEU: tests/test_quality_routes.py (67 Tests — 67/67 bestanden)

Paket C — Notfallplan Incidents + Templates:
- NEU: migrations/016_notfallplan_incidents.sql
  compliance_notfallplan_incidents + compliance_notfallplan_templates
- UPDATE: notfallplan_routes.py — GET/POST/PUT/DELETE für /incidents + /templates
- UPDATE: notfallplan/page.tsx — Incidents-Tab + Templates-Tab → API
- UPDATE: tests/test_notfallplan_routes.py (+76 neue Tests — alle bestanden)

Paket D — Loeschfristen localStorage → API:
- NEU: migrations/017_loeschfristen.sql (JSONB: legal_holds, storage_locations, ...)
- NEU: compliance/api/loeschfristen_routes.py — CRUD + Stats + Status-Update
- UPDATE: loeschfristen/page.tsx — vollständige localStorage → API Migration
  createNewPolicy → POST (API-UUID als id), deletePolicy → DELETE,
  handleSaveAndClose → PUT, adoptGeneratedPolicies → POST je Policy
  apiToPolicy() + policyToPayload() Mapper, saving-State für Buttons
- NEU: tests/test_loeschfristen_routes.py (58 Tests — alle bestanden)

Gesamt: 253 neue Tests, alle bestanden (48 + 67 + 76 + 58 + bestehende)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

admin-compliance/app/(sdk)/sdk/loeschfristen/page.tsx

@@ -13,8 +13,7 @@ import {
   ReviewInterval, DeletionTriggerLevel, RetentionUnit, LegalHoldStatus,
   createEmptyPolicy, createEmptyLegalHold, createEmptyStorageLocation,
   formatRetentionDuration, isPolicyOverdue, getActiveLegalHolds,
-  getEffectiveDeletionTrigger, LOESCHFRISTEN_STORAGE_KEY,
-  generatePolicyId,
+  getEffectiveDeletionTrigger,
 } from '@/lib/sdk/loeschfristen-types'
 import { BASELINE_TEMPLATES, templateToPolicy, getTemplateById, getAllTemplateTags } from '@/lib/sdk/loeschfristen-baseline-catalog'
 import {
@@ -35,8 +34,6 @@ import {
 
 type Tab = 'uebersicht' | 'editor' | 'generator' | 'export'
 
-const STORAGE_KEY = 'bp_loeschfristen'
-
 // ---------------------------------------------------------------------------
 // Helper: TagInput
 // ---------------------------------------------------------------------------
@@ -127,45 +124,127 @@ export default function LoeschfristenPage() {
   // ---- Legal Hold management ----
   const [managingLegalHolds, setManagingLegalHolds] = useState(false)
 
+  // ---- Saving state ----
+  const [saving, setSaving] = useState(false)
+
   // ---- VVT data ----
   const [vvtActivities, setVvtActivities] = useState<any[]>([])
 
   // --------------------------------------------------------------------------
-  // Persistence
+  // Persistence (API-backed)
   // --------------------------------------------------------------------------
 
+  const LOESCHFRISTEN_API = '/api/sdk/v1/compliance/loeschfristen'
+
   useEffect(() => {
-    const stored = localStorage.getItem(STORAGE_KEY)
-    if (stored) {
-      try {
-        const parsed = JSON.parse(stored) as LoeschfristPolicy[]
-        setPolicies(parsed)
-      } catch (e) {
-        console.error('Failed to parse stored policies:', e)
-      }
-    }
-    setLoaded(true)
+    loadPolicies()
   }, [])
 
-  useEffect(() => {
-    if (loaded && policies.length > 0) {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(policies))
-    } else if (loaded && policies.length === 0) {
-      localStorage.removeItem(STORAGE_KEY)
-    }
-  }, [policies, loaded])
-
-  // Load VVT activities from localStorage
-  useEffect(() => {
+  async function loadPolicies() {
     try {
-      const raw = localStorage.getItem('bp_vvt')
-      if (raw) {
-        const parsed = JSON.parse(raw)
-        if (Array.isArray(parsed)) setVvtActivities(parsed)
+      const res = await fetch(`${LOESCHFRISTEN_API}?limit=500`)
+      if (res.ok) {
+        const data = await res.json()
+        const fetched = Array.isArray(data.policies)
+          ? data.policies.map(apiToPolicy)
+          : []
+        setPolicies(fetched)
       }
-    } catch {
-      // ignore
+    } catch (e) {
+      console.error('Failed to load Loeschfristen from API:', e)
     }
+    setLoaded(true)
+  }
+
+  function apiToPolicy(raw: any): LoeschfristPolicy {
+    // Map snake_case API response to camelCase LoeschfristPolicy
+    const base = createEmptyPolicy()
+    return {
+      ...base,
+      id: raw.id,                                      // DB UUID — used for API calls
+      policyId: raw.policy_id || base.policyId,        // Display ID like "LF-2026-001"
+      dataObjectName: raw.data_object_name || '',
+      description: raw.description || '',
+      affectedGroups: raw.affected_groups || [],
+      dataCategories: raw.data_categories || [],
+      primaryPurpose: raw.primary_purpose || '',
+      deletionTrigger: raw.deletion_trigger || 'PURPOSE_END',
+      retentionDriver: raw.retention_driver || null,
+      retentionDriverDetail: raw.retention_driver_detail || '',
+      retentionDuration: raw.retention_duration ?? null,
+      retentionUnit: raw.retention_unit || null,
+      retentionDescription: raw.retention_description || '',
+      startEvent: raw.start_event || '',
+      hasActiveLegalHold: raw.has_active_legal_hold || false,
+      legalHolds: raw.legal_holds || [],
+      storageLocations: raw.storage_locations || [],
+      deletionMethod: raw.deletion_method || 'MANUAL_REVIEW_DELETE',
+      deletionMethodDetail: raw.deletion_method_detail || '',
+      responsibleRole: raw.responsible_role || '',
+      responsiblePerson: raw.responsible_person || '',
+      releaseProcess: raw.release_process || '',
+      linkedVVTActivityIds: raw.linked_vvt_activity_ids || [],
+      status: raw.status || 'DRAFT',
+      lastReviewDate: raw.last_review_date || base.lastReviewDate,
+      nextReviewDate: raw.next_review_date || base.nextReviewDate,
+      reviewInterval: raw.review_interval || 'ANNUAL',
+      tags: raw.tags || [],
+      createdAt: raw.created_at || base.createdAt,
+      updatedAt: raw.updated_at || base.updatedAt,
+    }
+  }
+
+  function policyToPayload(p: LoeschfristPolicy): any {
+    return {
+      policy_id: p.policyId,
+      data_object_name: p.dataObjectName,
+      description: p.description,
+      affected_groups: p.affectedGroups,
+      data_categories: p.dataCategories,
+      primary_purpose: p.primaryPurpose,
+      deletion_trigger: p.deletionTrigger,
+      retention_driver: p.retentionDriver || null,
+      retention_driver_detail: p.retentionDriverDetail,
+      retention_duration: p.retentionDuration || null,
+      retention_unit: p.retentionUnit || null,
+      retention_description: p.retentionDescription,
+      start_event: p.startEvent,
+      has_active_legal_hold: p.hasActiveLegalHold,
+      legal_holds: p.legalHolds,
+      storage_locations: p.storageLocations,
+      deletion_method: p.deletionMethod,
+      deletion_method_detail: p.deletionMethodDetail,
+      responsible_role: p.responsibleRole,
+      responsible_person: p.responsiblePerson,
+      release_process: p.releaseProcess,
+      linked_vvt_activity_ids: p.linkedVVTActivityIds,
+      status: p.status,
+      last_review_date: p.lastReviewDate || null,
+      next_review_date: p.nextReviewDate || null,
+      review_interval: p.reviewInterval,
+      tags: p.tags,
+    }
+  }
+
+  // Load VVT activities from API
+  useEffect(() => {
+    fetch('/api/sdk/v1/compliance/vvt?limit=200')
+      .then(res => res.ok ? res.json() : null)
+      .then(data => {
+        if (data && Array.isArray(data.activities)) {
+          setVvtActivities(data.activities)
+        }
+      })
+      .catch(() => {
+        // fallback: try localStorage
+        try {
+          const raw = localStorage.getItem('bp_vvt')
+          if (raw) {
+            const parsed = JSON.parse(raw)
+            if (Array.isArray(parsed)) setVvtActivities(parsed)
+          }
+        } catch { /* ignore */ }
+      })
   }, [tab, editingId])
 
   // --------------------------------------------------------------------------
@@ -222,19 +301,45 @@ export default function LoeschfristenPage() {
     [],
   )
 
-  const createNewPolicy = useCallback(() => {
-    const newP = createEmptyPolicy()
-    setPolicies((prev) => [...prev, newP])
-    setEditingId(newP.policyId)
-    setTab('editor')
+  const createNewPolicy = useCallback(async () => {
+    setSaving(true)
+    try {
+      const empty = createEmptyPolicy()
+      const res = await fetch(LOESCHFRISTEN_API, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(policyToPayload(empty)),
+      })
+      if (res.ok) {
+        const raw = await res.json()
+        const newP = apiToPolicy(raw)
+        setPolicies((prev) => [...prev, newP])
+        setEditingId(newP.policyId)
+        setTab('editor')
+      }
+    } catch (e) {
+      console.error('Failed to create policy:', e)
+    } finally {
+      setSaving(false)
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const deletePolicy = useCallback(
-    (id: string) => {
-      setPolicies((prev) => prev.filter((p) => p.policyId !== id))
-      if (editingId === id) setEditingId(null)
+    async (policyId: string) => {
+      const policy = policies.find((p) => p.policyId === policyId)
+      if (!policy) return
+      try {
+        const res = await fetch(`${LOESCHFRISTEN_API}/${policy.id}`, { method: 'DELETE' })
+        if (res.ok || res.status === 204 || res.status === 404) {
+          setPolicies((prev) => prev.filter((p) => p.policyId !== policyId))
+          if (editingId === policyId) setEditingId(null)
+        }
+      } catch (e) {
+        console.error('Failed to delete policy:', e)
+      }
     },
-    [editingId],
+    [editingId, policies],
   )
 
   const addLegalHold = useCallback(
@@ -302,17 +407,41 @@ export default function LoeschfristenPage() {
   }, [profilingAnswers])
 
   const adoptGeneratedPolicies = useCallback(
-    (onlySelected: boolean) => {
+    async (onlySelected: boolean) => {
       const toAdopt = onlySelected
         ? generatedPolicies.filter((p) => selectedGenerated.has(p.policyId))
         : generatedPolicies
-      setPolicies((prev) => [...prev, ...toAdopt])
+      setSaving(true)
+      try {
+        const created: LoeschfristPolicy[] = []
+        for (const p of toAdopt) {
+          try {
+            const res = await fetch(LOESCHFRISTEN_API, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify(policyToPayload(p)),
+            })
+            if (res.ok) {
+              const raw = await res.json()
+              created.push(apiToPolicy(raw))
+            } else {
+              created.push(p) // fallback: keep generated policy in state
+            }
+          } catch {
+            created.push(p)
+          }
+        }
+        setPolicies((prev) => [...prev, ...created])
+      } finally {
+        setSaving(false)
+      }
       setGeneratedPolicies([])
       setSelectedGenerated(new Set())
       setProfilingStep(0)
       setProfilingAnswers([])
       setTab('uebersicht')
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [generatedPolicies, selectedGenerated],
   )
 
@@ -321,6 +450,36 @@ export default function LoeschfristenPage() {
     setComplianceResult(result)
   }, [policies])
 
+  const handleSaveAndClose = useCallback(async () => {
+    if (!editingPolicy) {
+      setEditingId(null)
+      setTab('uebersicht')
+      return
+    }
+    setSaving(true)
+    try {
+      const res = await fetch(`${LOESCHFRISTEN_API}/${editingPolicy.id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(policyToPayload(editingPolicy)),
+      })
+      if (res.ok) {
+        const raw = await res.json()
+        const updated = apiToPolicy(raw)
+        setPolicies((prev) =>
+          prev.map((p) => (p.policyId === editingPolicy.policyId ? updated : p)),
+        )
+      }
+    } catch (e) {
+      console.error('Failed to save policy:', e)
+    } finally {
+      setSaving(false)
+    }
+    setEditingId(null)
+    setTab('uebersicht')
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editingPolicy])
+
   // --------------------------------------------------------------------------
   // Tab definitions
   // --------------------------------------------------------------------------
@@ -1385,13 +1544,11 @@ export default function LoeschfristenPage() {
               Zurueck zur Uebersicht
             </button>
             <button
-              onClick={() => {
-                setEditingId(null)
-                setTab('uebersicht')
-              }}
-              className="bg-purple-600 text-white hover:bg-purple-700 rounded-lg px-4 py-2 font-medium transition"
+              onClick={handleSaveAndClose}
+              disabled={saving}
+              className="bg-purple-600 text-white hover:bg-purple-700 disabled:opacity-50 rounded-lg px-4 py-2 font-medium transition"
             >
-              Speichern & Schliessen
+              {saving ? 'Speichern...' : 'Speichern & Schliessen'}
             </button>
           </div>
         </div>

admin-compliance/app/(sdk)/sdk/notfallplan/page.tsx

@@ -387,10 +387,9 @@ export default function NotfallplanPage() {
   const [savingExercise, setSavingExercise] = useState(false)
 
   useEffect(() => {
+    // Only load config and exercises from localStorage (incidents/templates use API)
     const data = loadFromStorage()
     setConfig(data.config)
-    setIncidents(data.incidents)
-    setTemplates(data.templates)
     setExercises(data.exercises)
   }, [])
 
@@ -401,10 +400,12 @@ export default function NotfallplanPage() {
   async function loadApiData() {
     setApiLoading(true)
     try {
-      const [contactsRes, scenariosRes, exercisesRes] = await Promise.all([
+      const [contactsRes, scenariosRes, exercisesRes, incidentsRes, templatesRes] = await Promise.all([
         fetch(`${NOTFALLPLAN_API}/contacts`),
         fetch(`${NOTFALLPLAN_API}/scenarios`),
         fetch(`${NOTFALLPLAN_API}/exercises`),
+        fetch(`${NOTFALLPLAN_API}/incidents`),
+        fetch(`${NOTFALLPLAN_API}/templates`),
       ])
       if (contactsRes.ok) {
         const data = await contactsRes.json()
@@ -418,6 +419,14 @@ export default function NotfallplanPage() {
         const data = await exercisesRes.json()
         setApiExercises(Array.isArray(data) ? data : [])
       }
+      if (incidentsRes.ok) {
+        const data = await incidentsRes.json()
+        setIncidents(Array.isArray(data) ? data.map(apiToIncident) : [])
+      }
+      if (templatesRes.ok) {
+        const data = await templatesRes.json()
+        setTemplates(Array.isArray(data) && data.length > 0 ? data : DEFAULT_TEMPLATES)
+      }
     } catch (err) {
       console.error('Failed to load Notfallplan API data:', err)
     } finally {
@@ -425,6 +434,106 @@ export default function NotfallplanPage() {
     }
   }
 
+  function apiToIncident(raw: any): Incident {
+    return {
+      id: raw.id,
+      title: raw.title,
+      description: raw.description || '',
+      detectedAt: raw.detected_at,
+      detectedBy: raw.detected_by || 'Admin',
+      status: raw.status,
+      severity: raw.severity,
+      affectedDataCategories: raw.affected_data_categories || [],
+      estimatedAffectedPersons: raw.estimated_affected_persons || 0,
+      measures: raw.measures || [],
+      art34Required: raw.art34_required || false,
+      art34Justification: raw.art34_justification || '',
+      reportedToAuthorityAt: raw.reported_to_authority_at,
+      notifiedAffectedAt: raw.notified_affected_at,
+      closedAt: raw.closed_at,
+      closedBy: raw.closed_by,
+      lessonsLearned: raw.lessons_learned,
+    }
+  }
+
+  async function apiAddIncident(newIncident: Partial<Incident>) {
+    try {
+      const res = await fetch(`${NOTFALLPLAN_API}/incidents`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title: newIncident.title,
+          description: newIncident.description,
+          severity: newIncident.severity || 'medium',
+          estimated_affected_persons: newIncident.estimatedAffectedPersons || 0,
+          art34_required: newIncident.art34Required || false,
+          art34_justification: newIncident.art34Justification || '',
+        }),
+      })
+      if (res.ok) {
+        const created = await res.json()
+        setIncidents(prev => [apiToIncident(created), ...prev])
+      }
+    } catch (err) {
+      console.error('Failed to create incident:', err)
+    }
+  }
+
+  async function apiUpdateIncidentStatus(id: string, status: IncidentStatus) {
+    try {
+      const body: any = { status }
+      if (status === 'reported') body.reported_to_authority_at = new Date().toISOString()
+      if (status === 'closed') { body.closed_at = new Date().toISOString(); body.closed_by = 'Admin' }
+      const res = await fetch(`${NOTFALLPLAN_API}/incidents/${id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      })
+      if (res.ok) {
+        const updated = await res.json()
+        setIncidents(prev => prev.map(inc => inc.id === id ? apiToIncident(updated) : inc))
+      }
+    } catch (err) {
+      console.error('Failed to update incident status:', err)
+    }
+  }
+
+  async function apiDeleteIncident(id: string) {
+    try {
+      const res = await fetch(`${NOTFALLPLAN_API}/incidents/${id}`, { method: 'DELETE' })
+      if (res.ok || res.status === 204) {
+        setIncidents(prev => prev.filter(inc => inc.id !== id))
+      }
+    } catch (err) {
+      console.error('Failed to delete incident:', err)
+    }
+  }
+
+  async function apiSaveTemplate(template: MeldeTemplate) {
+    try {
+      const isNew = !template.id.startsWith('tpl-')
+      const method = isNew || template.id.length < 10 ? 'POST' : 'PUT'
+      const url = method === 'POST'
+        ? `${NOTFALLPLAN_API}/templates`
+        : `${NOTFALLPLAN_API}/templates/${template.id}`
+      const res = await fetch(url, {
+        method,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ type: template.type, title: template.title, content: template.content }),
+      })
+      if (res.ok) {
+        const saved = await res.json()
+        setTemplates(prev => {
+          const existing = prev.find(t => t.id === template.id)
+          if (existing) return prev.map(t => t.id === template.id ? { ...t, ...saved } : t)
+          return [...prev, saved]
+        })
+      }
+    } catch (err) {
+      console.error('Failed to save template:', err)
+    }
+  }
+
   async function handleCreateContact() {
     if (!newContact.name) return
     setSavingContact(true)
@@ -529,10 +638,11 @@ export default function NotfallplanPage() {
   }
 
   const handleSave = useCallback(() => {
-    saveToStorage({ config, incidents, templates, exercises })
+    // Only config and exercises are persisted to localStorage; incidents/templates use API
+    saveToStorage({ config, incidents: [], templates: DEFAULT_TEMPLATES, exercises })
     setSaved(true)
     setTimeout(() => setSaved(false), 2000)
-  }, [config, incidents, templates, exercises])
+  }, [config, exercises])
 
   const tabs: { id: Tab; label: string; count?: number }[] = [
     { id: 'config', label: 'Notfallplan' },
@@ -697,10 +807,13 @@ export default function NotfallplanPage() {
           setIncidents={setIncidents}
           showAdd={showAddIncident}
           setShowAdd={setShowAddIncident}
+          onAdd={apiAddIncident}
+          onStatusChange={apiUpdateIncidentStatus}
+          onDelete={apiDeleteIncident}
         />
       )}
       {activeTab === 'templates' && (
-        <TemplatesTab templates={templates} setTemplates={setTemplates} />
+        <TemplatesTab templates={templates} setTemplates={setTemplates} onSave={apiSaveTemplate} />
       )}
       {activeTab === 'exercises' && (
         <>
@@ -1252,11 +1365,17 @@ function IncidentsTab({
   setIncidents,
   showAdd,
   setShowAdd,
+  onAdd,
+  onStatusChange,
+  onDelete,
 }: {
   incidents: Incident[]
   setIncidents: React.Dispatch<React.SetStateAction<Incident[]>>
   showAdd: boolean
   setShowAdd: (v: boolean) => void
+  onAdd?: (incident: Partial<Incident>) => Promise<void>
+  onStatusChange?: (id: string, status: IncidentStatus) => Promise<void>
+  onDelete?: (id: string) => Promise<void>
 }) {
   const [newIncident, setNewIncident] = useState<Partial<Incident>>({
     title: '',
@@ -1269,23 +1388,27 @@ function IncidentsTab({
     art34Justification: '',
   })
 
-  function addIncident() {
+  async function addIncident() {
     if (!newIncident.title) return
-    const incident: Incident = {
-      id: `INC-${Date.now()}`,
-      title: newIncident.title || '',
-      description: newIncident.description || '',
-      detectedAt: new Date().toISOString(),
-      detectedBy: 'Admin',
-      status: 'detected',
-      severity: newIncident.severity as IncidentSeverity || 'medium',
-      affectedDataCategories: newIncident.affectedDataCategories || [],
-      estimatedAffectedPersons: newIncident.estimatedAffectedPersons || 0,
-      measures: newIncident.measures || [],
-      art34Required: newIncident.art34Required || false,
-      art34Justification: newIncident.art34Justification || '',
+    if (onAdd) {
+      await onAdd(newIncident)
+    } else {
+      const incident: Incident = {
+        id: `INC-${Date.now()}`,
+        title: newIncident.title || '',
+        description: newIncident.description || '',
+        detectedAt: new Date().toISOString(),
+        detectedBy: 'Admin',
+        status: 'detected',
+        severity: newIncident.severity as IncidentSeverity || 'medium',
+        affectedDataCategories: newIncident.affectedDataCategories || [],
+        estimatedAffectedPersons: newIncident.estimatedAffectedPersons || 0,
+        measures: newIncident.measures || [],
+        art34Required: newIncident.art34Required || false,
+        art34Justification: newIncident.art34Justification || '',
+      }
+      setIncidents(prev => [incident, ...prev])
     }
-    setIncidents(prev => [incident, ...prev])
     setShowAdd(false)
     setNewIncident({
       title: '', description: '', severity: 'medium',
@@ -1294,17 +1417,21 @@ function IncidentsTab({
     })
   }
 
-  function updateStatus(id: string, status: IncidentStatus) {
-    setIncidents(prev => prev.map(inc =>
-      inc.id === id
-        ? {
-            ...inc,
-            status,
-            ...(status === 'reported' ? { reportedToAuthorityAt: new Date().toISOString() } : {}),
-            ...(status === 'closed' ? { closedAt: new Date().toISOString(), closedBy: 'Admin' } : {}),
-          }
-        : inc
-    ))
+  async function updateStatus(id: string, status: IncidentStatus) {
+    if (onStatusChange) {
+      await onStatusChange(id, status)
+    } else {
+      setIncidents(prev => prev.map(inc =>
+        inc.id === id
+          ? {
+              ...inc,
+              status,
+              ...(status === 'reported' ? { reportedToAuthorityAt: new Date().toISOString() } : {}),
+              ...(status === 'closed' ? { closedAt: new Date().toISOString(), closedBy: 'Admin' } : {}),
+            }
+          : inc
+      ))
+    }
   }
 
   return (
@@ -1464,6 +1591,14 @@ function IncidentsTab({
                       Abschliessen
                     </button>
                   )}
+                  {onDelete && (
+                    <button
+                      onClick={() => { if (window.confirm('Incident loeschen?')) onDelete(incident.id) }}
+                      className="text-xs px-2 py-1 text-red-400 hover:text-red-600 hover:bg-red-50 rounded ml-auto"
+                    >
+                      Loeschen
+                    </button>
+                  )}
                 </div>
               )}
             </div>
@@ -1481,10 +1616,24 @@ function IncidentsTab({
 function TemplatesTab({
   templates,
   setTemplates,
+  onSave,
 }: {
   templates: MeldeTemplate[]
   setTemplates: React.Dispatch<React.SetStateAction<MeldeTemplate[]>>
+  onSave?: (template: MeldeTemplate) => Promise<void>
 }) {
+  const [saving, setSaving] = useState<string | null>(null)
+
+  async function handleSave(template: MeldeTemplate) {
+    if (!onSave) return
+    setSaving(template.id)
+    try {
+      await onSave(template)
+    } finally {
+      setSaving(null)
+    }
+  }
+
   return (
     <div className="space-y-6">
       <div>
@@ -1496,15 +1645,26 @@ function TemplatesTab({
 
       {templates.map(template => (
         <div key={template.id} className="bg-white rounded-lg border p-6">
-          <div className="flex items-center gap-2 mb-3">
-            <span className={`px-2 py-1 rounded text-xs font-bold ${
-              template.type === 'art33'
-                ? 'bg-blue-100 text-blue-800'
-                : 'bg-purple-100 text-purple-800'
-            }`}>
-              {template.type === 'art33' ? 'Art. 33' : 'Art. 34'}
-            </span>
-            <h4 className="font-medium">{template.title}</h4>
+          <div className="flex items-center justify-between mb-3">
+            <div className="flex items-center gap-2">
+              <span className={`px-2 py-1 rounded text-xs font-bold ${
+                template.type === 'art33'
+                  ? 'bg-blue-100 text-blue-800'
+                  : 'bg-purple-100 text-purple-800'
+              }`}>
+                {template.type === 'art33' ? 'Art. 33' : 'Art. 34'}
+              </span>
+              <h4 className="font-medium">{template.title}</h4>
+            </div>
+            {onSave && (
+              <button
+                onClick={() => handleSave(template)}
+                disabled={saving === template.id}
+                className="px-3 py-1 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
+              >
+                {saving === template.id ? 'Gespeichert...' : 'Speichern'}
+              </button>
+            )}
           </div>
           <textarea
             value={template.content}

admin-compliance/app/(sdk)/sdk/quality/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useSDK } from '@/lib/sdk'
 
 // =============================================================================
@@ -14,140 +14,35 @@ interface QualityMetric {
   score: number
   threshold: number
   trend: 'up' | 'down' | 'stable'
-  lastMeasured: Date
-  aiSystem: string
+  last_measured: string
+  ai_system: string | null
 }
 
 interface QualityTest {
   id: string
   name: string
   status: 'passed' | 'failed' | 'warning' | 'pending'
-  lastRun: Date
-  duration: string
-  aiSystem: string
-  details: string
+  last_run: string
+  duration: string | null
+  ai_system: string | null
+  details: string | null
 }
 
-// =============================================================================
-// MOCK DATA
-// =============================================================================
-
-const mockMetrics: QualityMetric[] = [
-  {
-    id: 'm-1',
-    name: 'Accuracy Score',
-    category: 'accuracy',
-    score: 94.5,
-    threshold: 90,
-    trend: 'up',
-    lastMeasured: new Date('2024-01-22'),
-    aiSystem: 'Bewerber-Screening',
-  },
-  {
-    id: 'm-2',
-    name: 'Fairness Index (Gender)',
-    category: 'fairness',
-    score: 87.2,
-    threshold: 85,
-    trend: 'stable',
-    lastMeasured: new Date('2024-01-22'),
-    aiSystem: 'Bewerber-Screening',
-  },
-  {
-    id: 'm-3',
-    name: 'Fairness Index (Age)',
-    category: 'fairness',
-    score: 78.5,
-    threshold: 85,
-    trend: 'down',
-    lastMeasured: new Date('2024-01-22'),
-    aiSystem: 'Bewerber-Screening',
-  },
-  {
-    id: 'm-4',
-    name: 'Robustness Score',
-    category: 'robustness',
-    score: 91.0,
-    threshold: 85,
-    trend: 'up',
-    lastMeasured: new Date('2024-01-21'),
-    aiSystem: 'Kundenservice Chatbot',
-  },
-  {
-    id: 'm-5',
-    name: 'Explainability Index',
-    category: 'explainability',
-    score: 72.3,
-    threshold: 75,
-    trend: 'up',
-    lastMeasured: new Date('2024-01-22'),
-    aiSystem: 'Empfehlungsalgorithmus',
-  },
-  {
-    id: 'm-6',
-    name: 'Response Time (P95)',
-    category: 'performance',
-    score: 95.0,
-    threshold: 90,
-    trend: 'stable',
-    lastMeasured: new Date('2024-01-22'),
-    aiSystem: 'Kundenservice Chatbot',
-  },
-]
-
-const mockTests: QualityTest[] = [
-  {
-    id: 't-1',
-    name: 'Bias Detection Test',
-    status: 'warning',
-    lastRun: new Date('2024-01-22T10:30:00'),
-    duration: '45min',
-    aiSystem: 'Bewerber-Screening',
-    details: 'Leichte Verzerrung bei Altersgruppe 50+ erkannt',
-  },
-  {
-    id: 't-2',
-    name: 'Accuracy Benchmark',
-    status: 'passed',
-    lastRun: new Date('2024-01-22T08:00:00'),
-    duration: '2h 15min',
-    aiSystem: 'Bewerber-Screening',
-    details: 'Alle Schwellenwerte eingehalten',
-  },
-  {
-    id: 't-3',
-    name: 'Adversarial Testing',
-    status: 'passed',
-    lastRun: new Date('2024-01-21T14:00:00'),
-    duration: '1h 30min',
-    aiSystem: 'Kundenservice Chatbot',
-    details: 'System robust gegen Manipulation',
-  },
-  {
-    id: 't-4',
-    name: 'Explainability Test',
-    status: 'failed',
-    lastRun: new Date('2024-01-22T09:00:00'),
-    duration: '30min',
-    aiSystem: 'Empfehlungsalgorithmus',
-    details: 'SHAP-Werte unter Schwellenwert',
-  },
-  {
-    id: 't-5',
-    name: 'Performance Load Test',
-    status: 'passed',
-    lastRun: new Date('2024-01-22T06:00:00'),
-    duration: '3h',
-    aiSystem: 'Kundenservice Chatbot',
-    details: '10.000 gleichzeitige Anfragen verarbeitet',
-  },
-]
+interface Stats {
+  total_metrics: number
+  avg_score: number
+  metrics_above_threshold: number
+  passed: number
+  failed: number
+  warning: number
+  total_tests: number
+}
 
 // =============================================================================
 // COMPONENTS
 // =============================================================================
 
-function MetricCard({ metric }: { metric: QualityMetric }) {
+function MetricCard({ metric, onEdit }: { metric: QualityMetric; onEdit: (m: QualityMetric) => void }) {
   const isAboveThreshold = metric.score >= metric.threshold
   const categoryColors = {
     accuracy: 'bg-blue-100 text-blue-700',
@@ -166,36 +61,22 @@ function MetricCard({ metric }: { metric: QualityMetric }) {
   }
 
   return (
-    <div className={`bg-white rounded-xl border-2 p-6 ${
-      isAboveThreshold ? 'border-gray-200' : 'border-red-200'
-    }`}>
+    <div className={`bg-white rounded-xl border-2 p-6 ${isAboveThreshold ? 'border-gray-200' : 'border-red-200'}`}>
       <div className="flex items-start justify-between mb-4">
         <div>
           <span className={`px-2 py-1 text-xs rounded-full ${categoryColors[metric.category]}`}>
             {categoryLabels[metric.category]}
           </span>
           <h4 className="font-semibold text-gray-900 mt-2">{metric.name}</h4>
-          <p className="text-xs text-gray-500">{metric.aiSystem}</p>
+          {metric.ai_system && <p className="text-xs text-gray-500">{metric.ai_system}</p>}
         </div>
         <div className={`flex items-center gap-1 text-sm ${
           metric.trend === 'up' ? 'text-green-600' :
           metric.trend === 'down' ? 'text-red-600' : 'text-gray-500'
         }`}>
-          {metric.trend === 'up' && (
-            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 10l7-7m0 0l7 7m-7-7v18" />
-            </svg>
-          )}
-          {metric.trend === 'down' && (
-            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
-            </svg>
-          )}
-          {metric.trend === 'stable' && (
-            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14" />
-            </svg>
-          )}
+          {metric.trend === 'up' && <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 10l7-7m0 0l7 7m-7-7v18" /></svg>}
+          {metric.trend === 'down' && <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" /></svg>}
+          {metric.trend === 'stable' && <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14" /></svg>}
         </div>
       </div>
 
@@ -204,22 +85,25 @@ function MetricCard({ metric }: { metric: QualityMetric }) {
           <div className={`text-3xl font-bold ${isAboveThreshold ? 'text-gray-900' : 'text-red-600'}`}>
             {metric.score}%
           </div>
-          <div className="text-sm text-gray-500">
-            Schwellenwert: {metric.threshold}%
-          </div>
+          <div className="text-sm text-gray-500">Schwellenwert: {metric.threshold}%</div>
         </div>
         <div className="w-24 h-2 bg-gray-100 rounded-full overflow-hidden">
           <div
             className={`h-full rounded-full ${isAboveThreshold ? 'bg-green-500' : 'bg-red-500'}`}
-            style={{ width: `${metric.score}%` }}
+            style={{ width: `${Math.min(metric.score, 100)}%` }}
           />
         </div>
       </div>
+      <div className="mt-3 flex justify-end">
+        <button onClick={() => onEdit(metric)} className="text-xs text-purple-600 hover:text-purple-700 hover:bg-purple-50 px-2 py-1 rounded">
+          Score aktualisieren
+        </button>
+      </div>
     </div>
   )
 }
 
-function TestRow({ test }: { test: QualityTest }) {
+function TestRow({ test, onDelete }: { test: QualityTest; onDelete: (id: string) => void }) {
   const statusColors = {
     passed: 'bg-green-100 text-green-700',
     failed: 'bg-red-100 text-red-700',
@@ -238,7 +122,7 @@ function TestRow({ test }: { test: QualityTest }) {
     <tr className="hover:bg-gray-50">
       <td className="px-6 py-4">
         <div className="font-medium text-gray-900">{test.name}</div>
-        <div className="text-xs text-gray-500">{test.aiSystem}</div>
+        {test.ai_system && <div className="text-xs text-gray-500">{test.ai_system}</div>}
       </td>
       <td className="px-6 py-4">
         <span className={`px-2 py-1 text-xs rounded-full ${statusColors[test.status]}`}>
@@ -246,30 +130,266 @@ function TestRow({ test }: { test: QualityTest }) {
         </span>
       </td>
       <td className="px-6 py-4 text-sm text-gray-500">
-        {test.lastRun.toLocaleString('de-DE')}
+        {new Date(test.last_run).toLocaleString('de-DE')}
       </td>
-      <td className="px-6 py-4 text-sm text-gray-500">{test.duration}</td>
-      <td className="px-6 py-4 text-sm text-gray-500 max-w-xs truncate">{test.details}</td>
+      <td className="px-6 py-4 text-sm text-gray-500">{test.duration || '-'}</td>
+      <td className="px-6 py-4 text-sm text-gray-500 max-w-xs truncate">{test.details || '-'}</td>
       <td className="px-6 py-4">
-        <button className="text-sm text-purple-600 hover:text-purple-700">Details</button>
+        <button
+          onClick={() => { if (window.confirm(`"${test.name}" loeschen?`)) onDelete(test.id) }}
+          className="text-sm text-red-400 hover:text-red-600"
+        >
+          Loeschen
+        </button>
       </td>
     </tr>
   )
 }
 
+// =============================================================================
+// MODALS
+// =============================================================================
+
+function MetricModal({ metric, onClose, onSave }: {
+  metric?: QualityMetric
+  onClose: () => void
+  onSave: (data: any) => void
+}) {
+  const [form, setForm] = useState({
+    name: metric?.name || '',
+    category: metric?.category || 'accuracy',
+    score: metric?.score ?? 0,
+    threshold: metric?.threshold ?? 80,
+    trend: metric?.trend || 'stable',
+    ai_system: metric?.ai_system || '',
+  })
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-xl shadow-xl max-w-lg w-full">
+        <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
+          <h3 className="font-semibold text-gray-900">{metric ? 'Metrik bearbeiten' : 'Messung hinzufuegen'}</h3>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
+          </button>
+        </div>
+        <div className="p-6 space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Name *</label>
+            <input type="text" value={form.name} onChange={e => setForm(p => ({ ...p, name: e.target.value }))} className="w-full border rounded px-3 py-2 text-sm" placeholder="z.B. Accuracy Score" />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Kategorie</label>
+              <select value={form.category} onChange={e => setForm(p => ({ ...p, category: e.target.value as any }))} className="w-full border rounded px-3 py-2 text-sm">
+                <option value="accuracy">Genauigkeit</option>
+                <option value="fairness">Fairness</option>
+                <option value="robustness">Robustheit</option>
+                <option value="explainability">Erklaerbarkeit</option>
+                <option value="performance">Performance</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Trend</label>
+              <select value={form.trend} onChange={e => setForm(p => ({ ...p, trend: e.target.value as any }))} className="w-full border rounded px-3 py-2 text-sm">
+                <option value="up">Steigend</option>
+                <option value="stable">Stabil</option>
+                <option value="down">Fallend</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Score (%)</label>
+              <input type="number" step="0.1" min="0" max="100" value={form.score} onChange={e => setForm(p => ({ ...p, score: parseFloat(e.target.value) || 0 }))} className="w-full border rounded px-3 py-2 text-sm" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Schwellenwert (%)</label>
+              <input type="number" step="0.1" min="0" max="100" value={form.threshold} onChange={e => setForm(p => ({ ...p, threshold: parseFloat(e.target.value) || 80 }))} className="w-full border rounded px-3 py-2 text-sm" />
+            </div>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">KI-System</label>
+            <input type="text" value={form.ai_system} onChange={e => setForm(p => ({ ...p, ai_system: e.target.value }))} className="w-full border rounded px-3 py-2 text-sm" placeholder="z.B. Bewerber-Screening" />
+          </div>
+        </div>
+        <div className="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
+          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">Abbrechen</button>
+          <button onClick={() => onSave(form)} disabled={!form.name} className="px-4 py-2 text-sm text-white bg-purple-600 hover:bg-purple-700 rounded-lg font-medium disabled:opacity-50">Speichern</button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function TestModal({ onClose, onSave }: { onClose: () => void; onSave: (data: any) => void }) {
+  const [form, setForm] = useState({ name: '', status: 'pending', duration: '', ai_system: '', details: '' })
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-xl shadow-xl max-w-lg w-full">
+        <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
+          <h3 className="font-semibold text-gray-900">Test hinzufuegen</h3>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
+          </button>
+        </div>
+        <div className="p-6 space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Name *</label>
+            <input type="text" value={form.name} onChange={e => setForm(p => ({ ...p, name: e.target.value }))} className="w-full border rounded px-3 py-2 text-sm" placeholder="z.B. Bias Detection Test" />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Status</label>
+              <select value={form.status} onChange={e => setForm(p => ({ ...p, status: e.target.value }))} className="w-full border rounded px-3 py-2 text-sm">
+                <option value="passed">Bestanden</option>
+                <option value="failed">Fehlgeschlagen</option>
+                <option value="warning">Warnung</option>
+                <option value="pending">Ausstehend</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Dauer</label>
+              <input type="text" value={form.duration} onChange={e => setForm(p => ({ ...p, duration: e.target.value }))} className="w-full border rounded px-3 py-2 text-sm" placeholder="z.B. 45min" />
+            </div>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">KI-System</label>
+            <input type="text" value={form.ai_system} onChange={e => setForm(p => ({ ...p, ai_system: e.target.value }))} className="w-full border rounded px-3 py-2 text-sm" placeholder="z.B. Bewerber-Screening" />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Details</label>
+            <input type="text" value={form.details} onChange={e => setForm(p => ({ ...p, details: e.target.value }))} className="w-full border rounded px-3 py-2 text-sm" placeholder="Ergebnis-Zusammenfassung" />
+          </div>
+        </div>
+        <div className="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
+          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">Abbrechen</button>
+          <button onClick={() => onSave(form)} disabled={!form.name} className="px-4 py-2 text-sm text-white bg-purple-600 hover:bg-purple-700 rounded-lg font-medium disabled:opacity-50">Speichern</button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 // =============================================================================
 // MAIN PAGE
 // =============================================================================
 
+const API_BASE = '/api/sdk/v1/compliance/quality'
+
 export default function QualityPage() {
   const { state } = useSDK()
-  const [metrics] = useState<QualityMetric[]>(mockMetrics)
-  const [tests] = useState<QualityTest[]>(mockTests)
+  const [metrics, setMetrics] = useState<QualityMetric[]>([])
+  const [tests, setTests] = useState<QualityTest[]>([])
+  const [apiStats, setApiStats] = useState<Stats | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [showMetricModal, setShowMetricModal] = useState(false)
+  const [showTestModal, setShowTestModal] = useState(false)
+  const [editMetric, setEditMetric] = useState<QualityMetric | undefined>(undefined)
 
-  const passedTests = tests.filter(t => t.status === 'passed').length
-  const failedTests = tests.filter(t => t.status === 'failed').length
-  const metricsAboveThreshold = metrics.filter(m => m.score >= m.threshold).length
-  const avgScore = Math.round(metrics.reduce((sum, m) => sum + m.score, 0) / metrics.length)
+  useEffect(() => {
+    loadAll()
+  }, [])
+
+  async function loadAll() {
+    setLoading(true)
+    try {
+      const [metricsRes, testsRes, statsRes] = await Promise.all([
+        fetch(`${API_BASE}/metrics?limit=100`),
+        fetch(`${API_BASE}/tests?limit=100`),
+        fetch(`${API_BASE}/stats`),
+      ])
+      if (metricsRes.ok) {
+        const d = await metricsRes.json()
+        setMetrics(Array.isArray(d.metrics) ? d.metrics : [])
+      }
+      if (testsRes.ok) {
+        const d = await testsRes.json()
+        setTests(Array.isArray(d.tests) ? d.tests : [])
+      }
+      if (statsRes.ok) {
+        setApiStats(await statsRes.json())
+      }
+    } catch (err) {
+      console.error('Failed to load quality data:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function handleCreateMetric(form: any) {
+    try {
+      const res = await fetch(`${API_BASE}/metrics`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(form),
+      })
+      if (res.ok) {
+        const created = await res.json()
+        setMetrics(prev => [...prev, created])
+        setShowMetricModal(false)
+        loadAll()
+      }
+    } catch (err) {
+      console.error('Failed to create metric:', err)
+    }
+  }
+
+  async function handleUpdateMetric(form: any) {
+    if (!editMetric) return
+    try {
+      const res = await fetch(`${API_BASE}/metrics/${editMetric.id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(form),
+      })
+      if (res.ok) {
+        const updated = await res.json()
+        setMetrics(prev => prev.map(m => m.id === updated.id ? updated : m))
+        setEditMetric(undefined)
+        setShowMetricModal(false)
+        loadAll()
+      }
+    } catch (err) {
+      console.error('Failed to update metric:', err)
+    }
+  }
+
+  async function handleCreateTest(form: any) {
+    try {
+      const res = await fetch(`${API_BASE}/tests`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(form),
+      })
+      if (res.ok) {
+        const created = await res.json()
+        setTests(prev => [created, ...prev])
+        setShowTestModal(false)
+        loadAll()
+      }
+    } catch (err) {
+      console.error('Failed to create test:', err)
+    }
+  }
+
+  async function handleDeleteTest(id: string) {
+    try {
+      const res = await fetch(`${API_BASE}/tests/${id}`, { method: 'DELETE' })
+      if (res.ok || res.status === 204) {
+        setTests(prev => prev.filter(t => t.id !== id))
+        loadAll()
+      }
+    } catch (err) {
+      console.error('Failed to delete test:', err)
+    }
+  }
+
+  // Derived stats — prefer API stats, fallback to computed
+  const avgScore = apiStats ? apiStats.avg_score : (metrics.length > 0 ? Math.round(metrics.reduce((s, m) => s + m.score, 0) / metrics.length) : 0)
+  const metricsAboveThreshold = apiStats ? apiStats.metrics_above_threshold : metrics.filter(m => m.score >= m.threshold).length
+  const passedTests = apiStats ? apiStats.passed : tests.filter(t => t.status === 'passed').length
+  const failedTests = apiStats ? apiStats.failed : tests.filter(t => t.status === 'failed').length
+  const failingMetrics = metrics.filter(m => m.score < m.threshold)
 
   return (
     <div className="space-y-6">
@@ -277,16 +397,24 @@ export default function QualityPage() {
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold text-gray-900">AI Quality Dashboard</h1>
-          <p className="mt-1 text-gray-500">
-            Ueberwachen Sie die Qualitaet und Fairness Ihrer KI-Systeme
-          </p>
+          <p className="mt-1 text-gray-500">Ueberwachen Sie die Qualitaet und Fairness Ihrer KI-Systeme</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => setShowTestModal(true)}
+            className="flex items-center gap-2 px-4 py-2 border border-purple-300 text-purple-700 rounded-lg hover:bg-purple-50 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
+            Test hinzufuegen
+          </button>
+          <button
+            onClick={() => { setEditMetric(undefined); setShowMetricModal(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>
+            Messung hinzufuegen
+          </button>
         </div>
-        <button 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-          </svg>
-          Tests ausfuehren
-        </button>
       </div>
 
       {/* Stats */}
@@ -310,20 +438,14 @@ export default function QualityPage() {
       </div>
 
       {/* Alert for failed metrics */}
-      {metrics.filter(m => m.score < m.threshold).length > 0 && (
+      {failingMetrics.length > 0 && (
         <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-4 flex items-center gap-4">
           <div className="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center">
-            <svg className="w-5 h-5 text-yellow-600" 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>
+            <svg className="w-5 h-5 text-yellow-600" 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>
           <div>
-            <h4 className="font-medium text-yellow-800">
-              {metrics.filter(m => m.score < m.threshold).length} Metrik(en) unter Schwellenwert
-            </h4>
-            <p className="text-sm text-yellow-600">
-              Ueberpruefen Sie die betroffenen KI-Systeme und ergreifen Sie Korrekturmassnahmen.
-            </p>
+            <h4 className="font-medium text-yellow-800">{failingMetrics.length} Metrik(en) unter Schwellenwert</h4>
+            <p className="text-sm text-yellow-600">Ueberpruefen Sie die betroffenen KI-Systeme und ergreifen Sie Korrekturmassnahmen.</p>
           </div>
         </div>
       )}
@@ -331,11 +453,23 @@ export default function QualityPage() {
       {/* Metrics Grid */}
       <div>
         <h3 className="text-lg font-semibold text-gray-900 mb-4">Qualitaetsmetriken</h3>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {metrics.map(metric => (
-            <MetricCard key={metric.id} metric={metric} />
-          ))}
-        </div>
+        {loading ? (
+          <div className="text-center py-8 text-gray-400">Lade Metriken...</div>
+        ) : metrics.length === 0 ? (
+          <div className="bg-white rounded-xl border border-gray-200 p-8 text-center text-gray-400">
+            Noch keine Metriken erfasst. Klicken Sie auf &quot;Messung hinzufuegen&quot;.
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {metrics.map(metric => (
+              <MetricCard
+                key={metric.id}
+                metric={metric}
+                onEdit={m => { setEditMetric(m); setShowMetricModal(true) }}
+              />
+            ))}
+          </div>
+        )}
       </div>
 
       {/* Tests Table */}
@@ -355,14 +489,32 @@ export default function QualityPage() {
                 </tr>
               </thead>
               <tbody className="divide-y divide-gray-100">
-                {tests.map(test => (
-                  <TestRow key={test.id} test={test} />
+                {tests.length === 0 ? (
+                  <tr>
+                    <td colSpan={6} className="px-6 py-8 text-center text-gray-400">
+                      Noch keine Tests erfasst.
+                    </td>
+                  </tr>
+                ) : tests.map(test => (
+                  <TestRow key={test.id} test={test} onDelete={handleDeleteTest} />
                 ))}
               </tbody>
             </table>
           </div>
         </div>
       </div>
+
+      {/* Modals */}
+      {showMetricModal && (
+        <MetricModal
+          metric={editMetric}
+          onClose={() => { setShowMetricModal(false); setEditMetric(undefined) }}
+          onSave={editMetric ? handleUpdateMetric : handleCreateMetric}
+        />
+      )}
+      {showTestModal && (
+        <TestModal onClose={() => setShowTestModal(false)} onSave={handleCreateTest} />
+      )}
     </div>
   )
 }

admin-compliance/app/(sdk)/sdk/rag/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useSDK } from '@/lib/sdk'
 
 // =============================================================================
@@ -21,47 +21,11 @@ interface Source {
   relevance: number
 }
 
-// =============================================================================
-// MOCK DATA
-// =============================================================================
-
-const mockHistory: ChatMessage[] = [
-  {
-    id: 'msg-1',
-    role: 'user',
-    content: 'Wann ist eine Datenschutz-Folgenabschaetzung nach DSGVO erforderlich?',
-    timestamp: new Date('2024-01-22T10:30:00'),
-  },
-  {
-    id: 'msg-2',
-    role: 'assistant',
-    content: `Nach Art. 35 DSGVO ist eine Datenschutz-Folgenabschaetzung (DSFA) erforderlich, wenn eine Verarbeitung voraussichtlich ein hohes Risiko fuer die Rechte und Freiheiten natuerlicher Personen zur Folge hat.
-
-Dies ist insbesondere der Fall bei:
-
-1. **Systematischer und umfassender Bewertung** persoenlicher Aspekte natuerlicher Personen, einschliesslich Profiling, auf deren Grundlage Entscheidungen getroffen werden
-
-2. **Umfangreicher Verarbeitung besonderer Kategorien** personenbezogener Daten (Art. 9) oder von Daten ueber strafrechtliche Verurteilungen (Art. 10)
-
-3. **Systematischer umfangreicher Ueberwachung** oeffentlich zugaenglicher Bereiche
-
-Die Aufsichtsbehoerden haben zudem sogenannte "Blacklists" veroeffentlicht, die weitere Verarbeitungstaetigkeiten benennen, fuer die eine DSFA durchzufuehren ist.`,
-    sources: [
-      { title: 'Art. 35 DSGVO', reference: 'DSGVO Art. 35 Abs. 1, 3', relevance: 0.95 },
-      { title: 'Erwaegungsgrund 91', reference: 'DSGVO EG 91', relevance: 0.85 },
-      { title: 'DSFA-Blacklist DSK', reference: 'DSK Beschluss 2018', relevance: 0.75 },
-    ],
-    timestamp: new Date('2024-01-22T10:30:05'),
-  },
-]
-
-const suggestedQuestions = [
-  'Was sind die Rechte der Betroffenen nach DSGVO?',
-  'Wie lange betraegt die Meldefrist bei einer Datenpanne?',
-  'Welche Anforderungen stellt der AI Act an Hochrisiko-KI?',
-  'Wann brauche ich einen Auftragsverarbeitungsvertrag?',
-  'Was muss in einer Datenschutzerklaerung stehen?',
-]
+interface Regulation {
+  name: string
+  description?: string
+  collection?: string
+}
 
 // =============================================================================
 // COMPONENTS
@@ -98,6 +62,9 @@ function MessageBubble({ message }: { message: ChatMessage }) {
                     <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>
                   {source.title}
+                  {source.relevance > 0 && (
+                    <span className="text-blue-400">({Math.round(source.relevance * 100)}%)</span>
+                  )}
                 </span>
               ))}
             </div>
@@ -116,11 +83,41 @@ function MessageBubble({ message }: { message: ChatMessage }) {
 // MAIN PAGE
 // =============================================================================
 
+const RAG_API = '/api/sdk/v1/rag'
+
+const DEFAULT_QUESTIONS = [
+  'Was sind die Rechte der Betroffenen nach DSGVO?',
+  'Wie lange betraegt die Meldefrist bei einer Datenpanne?',
+  'Welche Anforderungen stellt der AI Act an Hochrisiko-KI?',
+  'Wann brauche ich einen Auftragsverarbeitungsvertrag?',
+  'Was muss in einer Datenschutzerklaerung stehen?',
+]
+
 export default function RAGPage() {
   const { state } = useSDK()
-  const [messages, setMessages] = useState<ChatMessage[]>(mockHistory)
+  const [messages, setMessages] = useState<ChatMessage[]>([])
   const [inputValue, setInputValue] = useState('')
   const [isLoading, setIsLoading] = useState(false)
+  const [suggestedQuestions, setSuggestedQuestions] = useState<string[]>(DEFAULT_QUESTIONS)
+  const [apiError, setApiError] = useState<string | null>(null)
+
+  // Load regulations for suggested questions
+  useEffect(() => {
+    fetch(`${RAG_API}/regulations`)
+      .then(res => res.ok ? res.json() : null)
+      .then(data => {
+        if (data && Array.isArray(data.regulations) && data.regulations.length > 0) {
+          const regs: Regulation[] = data.regulations
+          const dynamicQuestions = regs.slice(0, 5).map((r: Regulation) =>
+            `Was sind die wichtigsten Anforderungen aus ${r.name}?`
+          )
+          setSuggestedQuestions(dynamicQuestions.length > 0 ? dynamicQuestions : DEFAULT_QUESTIONS)
+        }
+      })
+      .catch(() => {
+        // Keep default questions if API unavailable
+      })
+  }, [])
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -136,22 +133,53 @@ export default function RAGPage() {
     setMessages(prev => [...prev, userMessage])
     setInputValue('')
     setIsLoading(true)
+    setApiError(null)
+
+    try {
+      const res = await fetch(`${RAG_API}/search`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ query: inputValue, limit: 5 }),
+      })
+
+      if (!res.ok) {
+        throw new Error(`HTTP ${res.status}`)
+      }
+
+      const data = await res.json()
+
+      // Build assistant message from results
+      const results = data.results || []
+      let content = ''
+      const sources: Source[] = []
+
+      if (results.length === 0) {
+        content = 'Zu dieser Frage wurden keine passenden Dokumente gefunden. Bitte formulieren Sie Ihre Frage anders oder waehlen Sie ein spezifischeres Thema.'
+      } else {
+        const snippets = results.map((r: any, i: number) => {
+          const title = r.metadata?.title || r.metadata?.reference || `Dokument ${i + 1}`
+          const ref = r.metadata?.reference || ''
+          sources.push({ title, reference: ref, relevance: r.score || 0 })
+          return `**${title}${ref ? ` (${ref})` : ''}**\n${r.content || ''}`
+        })
+        content = snippets.join('\n\n---\n\n')
+      }
 
-    // Simulate AI response
-    setTimeout(() => {
       const assistantMessage: ChatMessage = {
         id: `msg-${Date.now() + 1}`,
         role: 'assistant',
-        content: 'Dies ist eine Platzhalter-Antwort. In der produktiven Version wird hier die Antwort des Legal RAG Systems angezeigt, das Ihre Frage auf Basis der integrierten Rechtsdokumente beantwortet.',
-        sources: [
-          { title: 'DSGVO', reference: 'Art. 5', relevance: 0.9 },
-          { title: 'AI Act', reference: 'Art. 6', relevance: 0.8 },
-        ],
+        content,
+        sources,
         timestamp: new Date(),
       }
       setMessages(prev => [...prev, assistantMessage])
+    } catch (err) {
+      setApiError('RAG-Backend nicht erreichbar. Bitte pruefen Sie die Verbindung zum AI Compliance SDK.')
+      // Remove the user message that didn't get a response
+      setMessages(prev => prev.filter(m => m.id !== userMessage.id))
+    } finally {
       setIsLoading(false)
-    }, 1500)
+    }
   }
 
   const handleSuggestedQuestion = (question: string) => {
@@ -184,6 +212,23 @@ export default function RAGPage() {
         </div>
       </div>
 
+      {/* Error Box */}
+      {apiError && (
+        <div className="flex-shrink-0 bg-red-50 border border-red-200 rounded-xl p-4 mb-4">
+          <div className="flex items-center gap-3">
+            <svg className="w-5 h-5 text-red-600" 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>
+            <p className="text-sm text-red-700">{apiError}</p>
+            <button onClick={() => setApiError(null)} className="ml-auto text-red-400 hover:text-red-600">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      )}
+
       {/* Chat Area */}
       <div className="flex-1 overflow-y-auto bg-gray-50 rounded-xl border border-gray-200 p-6 space-y-6">
         {messages.length === 0 ? (

admin-compliance/app/(sdk)/sdk/security-backlog/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useSDK } from '@/lib/sdk'
 
 // =============================================================================
@@ -10,128 +10,70 @@ import { useSDK } from '@/lib/sdk'
 interface SecurityItem {
   id: string
   title: string
-  description: string
+  description: string | null
   type: 'vulnerability' | 'misconfiguration' | 'compliance' | 'hardening'
   severity: 'critical' | 'high' | 'medium' | 'low'
   status: 'open' | 'in-progress' | 'resolved' | 'accepted-risk'
-  source: string
+  source: string | null
   cve: string | null
   cvss: number | null
-  affectedAsset: string
-  assignedTo: string | null
-  createdAt: Date
-  dueDate: Date | null
+  affected_asset: string | null
+  assigned_to: string | null
+  created_at: string
+  due_date: string | null
+  remediation: string | null
+}
+
+interface Stats {
+  open: number
+  in_progress: number
+  critical: number
+  high: number
+  overdue: number
+  total: number
+}
+
+interface NewItem {
+  title: string
+  description: string
+  type: string
+  severity: string
+  source: string
+  cve: string
+  cvss: string
+  affected_asset: string
+  assigned_to: string
   remediation: string
 }
 
-// =============================================================================
-// MOCK DATA
-// =============================================================================
-
-const mockItems: SecurityItem[] = [
-  {
-    id: 'sec-001',
-    title: 'SQL Injection in Login-Modul',
-    description: 'Unzureichende Validierung von Benutzereingaben ermoeglicht SQL Injection',
-    type: 'vulnerability',
-    severity: 'critical',
-    status: 'in-progress',
-    source: 'Penetrationstest',
-    cve: 'CVE-2024-12345',
-    cvss: 9.8,
-    affectedAsset: 'auth-service',
-    assignedTo: 'Entwicklung',
-    createdAt: new Date('2024-01-15'),
-    dueDate: new Date('2024-01-25'),
-    remediation: 'Parameterisierte Queries verwenden, Input-Validierung implementieren',
-  },
-  {
-    id: 'sec-002',
-    title: 'Veraltete TLS-Version',
-    description: 'Server unterstuetzt noch TLS 1.0 und 1.1',
-    type: 'misconfiguration',
-    severity: 'high',
-    status: 'open',
-    source: 'Vulnerability Scanner',
-    cve: null,
-    cvss: 7.5,
-    affectedAsset: 'web-server',
-    assignedTo: null,
-    createdAt: new Date('2024-01-18'),
-    dueDate: new Date('2024-02-01'),
-    remediation: 'TLS 1.2 als Minimum konfigurieren, TLS 1.3 bevorzugen',
-  },
-  {
-    id: 'sec-003',
-    title: 'Fehlende Content-Security-Policy',
-    description: 'HTTP-Header CSP nicht konfiguriert',
-    type: 'hardening',
-    severity: 'medium',
-    status: 'open',
-    source: 'Security Audit',
-    cve: null,
-    cvss: 5.4,
-    affectedAsset: 'website',
-    assignedTo: 'DevOps',
-    createdAt: new Date('2024-01-10'),
-    dueDate: new Date('2024-02-15'),
-    remediation: 'Strikte CSP-Header implementieren',
-  },
-  {
-    id: 'sec-004',
-    title: 'Unsichere Cookie-Konfiguration',
-    description: 'Session-Cookies ohne Secure und HttpOnly Flags',
-    type: 'misconfiguration',
-    severity: 'medium',
-    status: 'resolved',
-    source: 'Code Review',
-    cve: null,
-    cvss: 5.3,
-    affectedAsset: 'auth-service',
-    assignedTo: 'Entwicklung',
-    createdAt: new Date('2024-01-05'),
-    dueDate: new Date('2024-01-15'),
-    remediation: 'Cookie-Flags setzen: Secure, HttpOnly, SameSite',
-  },
-  {
-    id: 'sec-005',
-    title: 'Veraltete Abhaengigkeit lodash',
-    description: 'Bekannte Schwachstelle in lodash < 4.17.21',
-    type: 'vulnerability',
-    severity: 'high',
-    status: 'in-progress',
-    source: 'SBOM Scan',
-    cve: 'CVE-2021-23337',
-    cvss: 7.2,
-    affectedAsset: 'frontend-app',
-    assignedTo: 'Entwicklung',
-    createdAt: new Date('2024-01-20'),
-    dueDate: new Date('2024-01-30'),
-    remediation: 'Abhaengigkeit auf Version 4.17.21 oder hoeher aktualisieren',
-  },
-  {
-    id: 'sec-006',
-    title: 'Fehlende Verschluesselung at Rest',
-    description: 'Datenbank-Backup ohne Verschluesselung',
-    type: 'compliance',
-    severity: 'high',
-    status: 'accepted-risk',
-    source: 'Compliance Audit',
-    cve: null,
-    cvss: null,
-    affectedAsset: 'database-backup',
-    assignedTo: 'IT Operations',
-    createdAt: new Date('2024-01-08'),
-    dueDate: null,
-    remediation: 'Backup-Verschluesselung aktivieren (AES-256)',
-  },
-]
+const EMPTY_NEW_ITEM: NewItem = {
+  title: '',
+  description: '',
+  type: 'vulnerability',
+  severity: 'medium',
+  source: '',
+  cve: '',
+  cvss: '',
+  affected_asset: '',
+  assigned_to: '',
+  remediation: '',
+}
 
 // =============================================================================
 // COMPONENTS
 // =============================================================================
 
-function SecurityItemCard({ item }: { item: SecurityItem }) {
+function SecurityItemCard({
+  item,
+  onEdit,
+  onDelete,
+  onStatusChange,
+}: {
+  item: SecurityItem
+  onEdit: (item: SecurityItem) => void
+  onDelete: (id: string) => void
+  onStatusChange: (id: string, status: string) => void
+}) {
   const typeLabels = {
     vulnerability: 'Schwachstelle',
     misconfiguration: 'Fehlkonfiguration',
@@ -167,7 +109,7 @@ function SecurityItemCard({ item }: { item: SecurityItem }) {
     'accepted-risk': 'Akzeptiert',
   }
 
-  const isOverdue = item.dueDate && item.dueDate < new Date() && item.status !== 'resolved'
+  const isOverdue = item.due_date && new Date(item.due_date) < new Date() && item.status !== 'resolved'
 
   return (
     <div className={`bg-white rounded-xl border-2 p-6 ${
@@ -189,26 +131,30 @@ function SecurityItemCard({ item }: { item: SecurityItem }) {
             </span>
           </div>
           <h3 className="text-lg font-semibold text-gray-900">{item.title}</h3>
-          <p className="text-sm text-gray-500 mt-1">{item.description}</p>
+          {item.description && <p className="text-sm text-gray-500 mt-1">{item.description}</p>}
         </div>
       </div>
 
       <div className="mt-4 grid grid-cols-2 gap-4 text-sm">
-        <div>
-          <span className="text-gray-500">Betroffenes Asset: </span>
-          <span className="font-medium text-gray-700">{item.affectedAsset}</span>
-        </div>
-        <div>
-          <span className="text-gray-500">Quelle: </span>
-          <span className="font-medium text-gray-700">{item.source}</span>
-        </div>
+        {item.affected_asset && (
+          <div>
+            <span className="text-gray-500">Betroffenes Asset: </span>
+            <span className="font-medium text-gray-700">{item.affected_asset}</span>
+          </div>
+        )}
+        {item.source && (
+          <div>
+            <span className="text-gray-500">Quelle: </span>
+            <span className="font-medium text-gray-700">{item.source}</span>
+          </div>
+        )}
         {item.cve && (
           <div>
             <span className="text-gray-500">CVE: </span>
             <span className="font-mono text-gray-700">{item.cve}</span>
           </div>
         )}
-        {item.cvss && (
+        {item.cvss !== null && (
           <div>
             <span className="text-gray-500">CVSS: </span>
             <span className={`font-bold ${
@@ -218,40 +164,168 @@ function SecurityItemCard({ item }: { item: SecurityItem }) {
             }`}>{item.cvss}</span>
           </div>
         )}
-        <div>
-          <span className="text-gray-500">Zugewiesen: </span>
-          <span className="font-medium text-gray-700">{item.assignedTo || 'Nicht zugewiesen'}</span>
-        </div>
-        {item.dueDate && (
+        {item.assigned_to && (
+          <div>
+            <span className="text-gray-500">Zugewiesen: </span>
+            <span className="font-medium text-gray-700">{item.assigned_to}</span>
+          </div>
+        )}
+        {item.due_date && (
           <div className={isOverdue ? 'text-red-600' : ''}>
             <span className="text-gray-500">Frist: </span>
             <span className="font-medium">
-              {item.dueDate.toLocaleDateString('de-DE')}
+              {new Date(item.due_date).toLocaleDateString('de-DE')}
               {isOverdue && ' (ueberfaellig)'}
             </span>
           </div>
         )}
       </div>
 
-      <div className="mt-4 p-3 bg-gray-50 rounded-lg">
-        <span className="text-sm text-gray-500">Empfohlene Massnahme: </span>
-        <span className="text-sm text-gray-700">{item.remediation}</span>
-      </div>
+      {item.remediation && (
+        <div className="mt-4 p-3 bg-gray-50 rounded-lg">
+          <span className="text-sm text-gray-500">Empfohlene Massnahme: </span>
+          <span className="text-sm text-gray-700">{item.remediation}</span>
+        </div>
+      )}
 
       <div className="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between">
         <span className="text-xs text-gray-500">
-          Erstellt: {item.createdAt.toLocaleDateString('de-DE')}
+          Erstellt: {new Date(item.created_at).toLocaleDateString('de-DE')}
         </span>
-        {item.status !== 'resolved' && (
-          <div className="flex items-center gap-2">
-            <button className="px-3 py-1 text-sm text-purple-600 hover:bg-purple-50 rounded-lg transition-colors">
-              Bearbeiten
-            </button>
-            <button className="px-3 py-1 text-sm bg-green-50 text-green-700 hover:bg-green-100 rounded-lg transition-colors">
-              Als behoben markieren
-            </button>
+        <div className="flex items-center gap-2">
+          {item.status !== 'resolved' && (
+            <>
+              <button
+                onClick={() => onEdit(item)}
+                className="px-3 py-1 text-sm text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
+              >
+                Bearbeiten
+              </button>
+              <button
+                onClick={() => onStatusChange(item.id, 'resolved')}
+                className="px-3 py-1 text-sm bg-green-50 text-green-700 hover:bg-green-100 rounded-lg transition-colors"
+              >
+                Als behoben markieren
+              </button>
+            </>
+          )}
+          <button
+            onClick={() => {
+              if (window.confirm(`"${item.title}" loeschen?`)) onDelete(item.id)
+            }}
+            className="px-2 py-1 text-sm text-red-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <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>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// =============================================================================
+// MODAL
+// =============================================================================
+
+function ItemModal({
+  item,
+  onClose,
+  onSave,
+}: {
+  item: NewItem
+  onClose: () => void
+  onSave: (data: NewItem) => void
+}) {
+  const [form, setForm] = useState<NewItem>(item)
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-xl shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+        <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
+          <h3 className="font-semibold text-gray-900">Sicherheitsbefund erfassen</h3>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <div className="p-6 space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Titel *</label>
+            <input
+              type="text"
+              value={form.title}
+              onChange={e => setForm(p => ({ ...p, title: e.target.value }))}
+              placeholder="Kurzbeschreibung des Befunds"
+              className="w-full border rounded px-3 py-2 text-sm"
+            />
           </div>
-        )}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
+            <textarea
+              value={form.description}
+              onChange={e => setForm(p => ({ ...p, description: e.target.value }))}
+              rows={3}
+              className="w-full border rounded px-3 py-2 text-sm"
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Typ</label>
+              <select value={form.type} onChange={e => setForm(p => ({ ...p, type: e.target.value }))} className="w-full border rounded px-3 py-2 text-sm">
+                <option value="vulnerability">Schwachstelle</option>
+                <option value="misconfiguration">Fehlkonfiguration</option>
+                <option value="compliance">Compliance</option>
+                <option value="hardening">Haertung</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Schweregrad</label>
+              <select value={form.severity} onChange={e => setForm(p => ({ ...p, severity: e.target.value }))} className="w-full border rounded px-3 py-2 text-sm">
+                <option value="critical">Kritisch</option>
+                <option value="high">Hoch</option>
+                <option value="medium">Mittel</option>
+                <option value="low">Niedrig</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Quelle</label>
+              <input type="text" value={form.source} onChange={e => setForm(p => ({ ...p, source: e.target.value }))} placeholder="z.B. Penetrationstest" className="w-full border rounded px-3 py-2 text-sm" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Betroffenes Asset</label>
+              <input type="text" value={form.affected_asset} onChange={e => setForm(p => ({ ...p, affected_asset: e.target.value }))} placeholder="z.B. auth-service" className="w-full border rounded px-3 py-2 text-sm" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">CVE</label>
+              <input type="text" value={form.cve} onChange={e => setForm(p => ({ ...p, cve: e.target.value }))} placeholder="CVE-2024-XXXXX" className="w-full border rounded px-3 py-2 text-sm" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">CVSS Score</label>
+              <input type="number" step="0.1" min="0" max="10" value={form.cvss} onChange={e => setForm(p => ({ ...p, cvss: e.target.value }))} placeholder="0.0 - 10.0" className="w-full border rounded px-3 py-2 text-sm" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Zugewiesen an</label>
+              <input type="text" value={form.assigned_to} onChange={e => setForm(p => ({ ...p, assigned_to: e.target.value }))} placeholder="Team oder Person" className="w-full border rounded px-3 py-2 text-sm" />
+            </div>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Massnahme</label>
+            <textarea value={form.remediation} onChange={e => setForm(p => ({ ...p, remediation: e.target.value }))} rows={2} placeholder="Empfohlene Abhilfemassnahme..." className="w-full border rounded px-3 py-2 text-sm" />
+          </div>
+        </div>
+        <div className="px-6 py-4 border-t border-gray-200 flex justify-end gap-3">
+          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">Abbrechen</button>
+          <button
+            onClick={() => onSave(form)}
+            disabled={!form.title}
+            className="px-4 py-2 text-sm text-white bg-purple-600 hover:bg-purple-700 rounded-lg font-medium disabled:opacity-50"
+          >
+            Speichern
+          </button>
+        </div>
       </div>
     </div>
   )
@@ -261,22 +335,118 @@ function SecurityItemCard({ item }: { item: SecurityItem }) {
 // MAIN PAGE
 // =============================================================================
 
+const API = '/api/sdk/v1/compliance/security-backlog'
+
 export default function SecurityBacklogPage() {
   const { state } = useSDK()
-  const [items] = useState<SecurityItem[]>(mockItems)
+  const [items, setItems] = useState<SecurityItem[]>([])
+  const [stats, setStats] = useState<Stats>({ open: 0, in_progress: 0, critical: 0, high: 0, overdue: 0, total: 0 })
   const [filter, setFilter] = useState<string>('all')
+  const [loading, setLoading] = useState(true)
+  const [showModal, setShowModal] = useState(false)
+  const [editItem, setEditItem] = useState<SecurityItem | null>(null)
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  async function loadData() {
+    setLoading(true)
+    try {
+      const [itemsRes, statsRes] = await Promise.all([
+        fetch(`${API}?limit=200`),
+        fetch(`${API}/stats`),
+      ])
+      if (itemsRes.ok) {
+        const data = await itemsRes.json()
+        setItems(Array.isArray(data.items) ? data.items : [])
+      }
+      if (statsRes.ok) {
+        const data = await statsRes.json()
+        setStats(data)
+      }
+    } catch (err) {
+      console.error('Failed to load security backlog:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function handleCreate(form: NewItem) {
+    try {
+      const res = await fetch(API, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          ...form,
+          cvss: form.cvss ? parseFloat(form.cvss) : null,
+        }),
+      })
+      if (res.ok) {
+        const created = await res.json()
+        setItems(prev => [created, ...prev])
+        setStats(prev => ({ ...prev, open: prev.open + 1, total: prev.total + 1 }))
+        setShowModal(false)
+      }
+    } catch (err) {
+      console.error('Failed to create item:', err)
+    }
+  }
+
+  async function handleUpdate(form: NewItem) {
+    if (!editItem) return
+    try {
+      const res = await fetch(`${API}/${editItem.id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          ...form,
+          cvss: form.cvss ? parseFloat(form.cvss) : null,
+        }),
+      })
+      if (res.ok) {
+        const updated = await res.json()
+        setItems(prev => prev.map(i => i.id === updated.id ? updated : i))
+        setEditItem(null)
+      }
+    } catch (err) {
+      console.error('Failed to update item:', err)
+    }
+  }
+
+  async function handleDelete(id: string) {
+    try {
+      const res = await fetch(`${API}/${id}`, { method: 'DELETE' })
+      if (res.ok || res.status === 204) {
+        setItems(prev => prev.filter(i => i.id !== id))
+        loadData() // refresh stats
+      }
+    } catch (err) {
+      console.error('Failed to delete item:', err)
+    }
+  }
+
+  async function handleStatusChange(id: string, status: string) {
+    try {
+      const res = await fetch(`${API}/${id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status }),
+      })
+      if (res.ok) {
+        const updated = await res.json()
+        setItems(prev => prev.map(i => i.id === updated.id ? updated : i))
+        loadData() // refresh stats
+      }
+    } catch (err) {
+      console.error('Failed to update status:', err)
+    }
+  }
 
   const filteredItems = filter === 'all'
     ? items
     : items.filter(i => i.severity === filter || i.status === filter || i.type === filter)
 
-  const openItems = items.filter(i => i.status === 'open').length
-  const criticalCount = items.filter(i => i.severity === 'critical' && i.status !== 'resolved').length
-  const highCount = items.filter(i => i.severity === 'high' && i.status !== 'resolved').length
-  const overdueCount = items.filter(i =>
-    i.dueDate && i.dueDate < new Date() && i.status !== 'resolved'
-  ).length
-
   return (
     <div className="space-y-6">
       {/* Header */}
@@ -288,10 +458,10 @@ export default function SecurityBacklogPage() {
           </p>
         </div>
         <div className="flex items-center gap-2">
-          <button className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
-            SBOM importieren
-          </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={() => { setEditItem(null); setShowModal(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>
@@ -304,24 +474,24 @@ export default function SecurityBacklogPage() {
       <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">Offen</div>
-          <div className="text-3xl font-bold text-gray-900">{openItems}</div>
+          <div className="text-3xl font-bold text-gray-900">{stats.open}</div>
         </div>
         <div className="bg-white rounded-xl border border-red-200 p-6">
           <div className="text-sm text-red-600">Kritisch</div>
-          <div className="text-3xl font-bold text-red-600">{criticalCount}</div>
+          <div className="text-3xl font-bold text-red-600">{stats.critical}</div>
         </div>
         <div className="bg-white rounded-xl border border-orange-200 p-6">
           <div className="text-sm text-orange-600">Hoch</div>
-          <div className="text-3xl font-bold text-orange-600">{highCount}</div>
+          <div className="text-3xl font-bold text-orange-600">{stats.high}</div>
         </div>
         <div className="bg-white rounded-xl border border-yellow-200 p-6">
           <div className="text-sm text-yellow-600">Ueberfaellig</div>
-          <div className="text-3xl font-bold text-yellow-600">{overdueCount}</div>
+          <div className="text-3xl font-bold text-yellow-600">{stats.overdue}</div>
         </div>
       </div>
 
       {/* Critical Alert */}
-      {criticalCount > 0 && (
+      {stats.critical > 0 && (
         <div className="bg-red-50 border border-red-200 rounded-xl p-4 flex items-center gap-4">
           <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
             <svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -329,10 +499,8 @@ export default function SecurityBacklogPage() {
             </svg>
           </div>
           <div>
-            <h4 className="font-medium text-red-800">{criticalCount} kritische Schwachstelle(n) erfordern sofortige Aufmerksamkeit</h4>
-            <p className="text-sm text-red-600">
-              Diese Befunde haben ein CVSS von 9.0 oder hoeher und sollten priorisiert werden.
-            </p>
+            <h4 className="font-medium text-red-800">{stats.critical} kritische Schwachstelle(n) erfordern sofortige Aufmerksamkeit</h4>
+            <p className="text-sm text-red-600">Diese Befunde haben ein CVSS von 9.0 oder hoeher und sollten priorisiert werden.</p>
           </div>
         </div>
       )}
@@ -345,47 +513,73 @@ export default function SecurityBacklogPage() {
             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'
+              filter === f ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
             }`}
           >
-            {f === 'all' ? 'Alle' :
-             f === 'open' ? 'Offen' :
-             f === 'in-progress' ? 'In Bearbeitung' :
-             f === 'critical' ? 'Kritisch' :
-             f === 'high' ? 'Hoch' :
+            {f === 'all' ? 'Alle' : f === 'open' ? 'Offen' : f === 'in-progress' ? 'In Bearbeitung' :
+             f === 'critical' ? 'Kritisch' : f === 'high' ? 'Hoch' :
              f === 'vulnerability' ? 'Schwachstellen' : 'Fehlkonfigurationen'}
           </button>
         ))}
       </div>
 
       {/* Items List */}
-      <div className="space-y-4">
-        {filteredItems
-          .sort((a, b) => {
-            // Sort by severity and status
-            const severityOrder = { critical: 0, high: 1, medium: 2, low: 3 }
-            const statusOrder = { open: 0, 'in-progress': 1, 'accepted-risk': 2, resolved: 3 }
-            const severityDiff = severityOrder[a.severity] - severityOrder[b.severity]
-            if (severityDiff !== 0) return severityDiff
-            return statusOrder[a.status] - statusOrder[b.status]
-          })
-          .map(item => (
-            <SecurityItemCard key={item.id} item={item} />
-          ))}
-      </div>
-
-      {filteredItems.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-green-100 rounded-full flex items-center justify-center mb-4">
-            <svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
-            </svg>
-          </div>
-          <h3 className="text-lg font-semibold text-gray-900">Keine Befunde gefunden</h3>
-          <p className="mt-2 text-gray-500">Passen Sie den Filter an oder fuehren Sie einen neuen Scan durch.</p>
+      {loading ? (
+        <div className="bg-white rounded-xl border border-gray-200 p-12 text-center text-gray-400">
+          Lade Sicherheitsbefunde...
         </div>
+      ) : (
+        <div className="space-y-4">
+          {filteredItems
+            .sort((a, b) => {
+              const sOrder = { critical: 0, high: 1, medium: 2, low: 3 }
+              const stOrder = { open: 0, 'in-progress': 1, 'accepted-risk': 2, resolved: 3 }
+              const sd = sOrder[a.severity] - sOrder[b.severity]
+              if (sd !== 0) return sd
+              return stOrder[a.status] - stOrder[b.status]
+            })
+            .map(item => (
+              <SecurityItemCard
+                key={item.id}
+                item={item}
+                onEdit={i => { setEditItem(i); setShowModal(true) }}
+                onDelete={handleDelete}
+                onStatusChange={handleStatusChange}
+              />
+            ))}
+
+          {filteredItems.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-green-100 rounded-full flex items-center justify-center mb-4">
+                <svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                </svg>
+              </div>
+              <h3 className="text-lg font-semibold text-gray-900">Keine Befunde gefunden</h3>
+              <p className="mt-2 text-gray-500">Passen Sie den Filter an oder erfassen Sie einen neuen Befund.</p>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Create/Edit Modal */}
+      {showModal && (
+        <ItemModal
+          item={editItem ? {
+            title: editItem.title,
+            description: editItem.description || '',
+            type: editItem.type,
+            severity: editItem.severity,
+            source: editItem.source || '',
+            cve: editItem.cve || '',
+            cvss: editItem.cvss !== null ? String(editItem.cvss) : '',
+            affected_asset: editItem.affected_asset || '',
+            assigned_to: editItem.assigned_to || '',
+            remediation: editItem.remediation || '',
+          } : EMPTY_NEW_ITEM}
+          onClose={() => { setShowModal(false); setEditItem(null) }}
+          onSave={editItem ? handleUpdate : handleCreate}
+        />
       )}
     </div>
   )

admin-compliance/app/api/sdk/v1/rag/[[...path]]/route.ts

@@ -0,0 +1,100 @@
+/**
+ * RAG API Proxy - Catch-all route
+ * Proxies all /api/sdk/v1/rag/* requests to ai-compliance-sdk backend (Port 8090)
+ */
+
+import { NextRequest, NextResponse } from 'next/server'
+
+const SDK_BACKEND_URL = process.env.SDK_API_URL || 'http://ai-compliance-sdk:8090'
+
+async function proxyRequest(
+  request: NextRequest,
+  pathSegments: string[] | undefined,
+  method: string
+) {
+  const pathStr = pathSegments?.join('/') || ''
+  const searchParams = request.nextUrl.searchParams.toString()
+  const basePath = `${SDK_BACKEND_URL}/sdk/v1/rag`
+  const url = pathStr
+    ? `${basePath}/${pathStr}${searchParams ? `?${searchParams}` : ''}`
+    : `${basePath}${searchParams ? `?${searchParams}` : ''}`
+
+  try {
+    const headers: HeadersInit = {
+      'Content-Type': 'application/json',
+    }
+
+    const authHeader = request.headers.get('authorization')
+    if (authHeader) {
+      headers['Authorization'] = authHeader
+    }
+
+    const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
+    const userHeader = request.headers.get('x-user-id')
+    headers['X-User-ID'] = (userHeader && uuidRegex.test(userHeader)) ? userHeader : '00000000-0000-0000-0000-000000000001'
+
+    const tenantHeader = request.headers.get('x-tenant-id')
+    headers['X-Tenant-ID'] = (tenantHeader && uuidRegex.test(tenantHeader)) ? tenantHeader : (process.env.DEFAULT_TENANT_ID || '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e')
+
+    const fetchOptions: RequestInit = {
+      method,
+      headers,
+      signal: AbortSignal.timeout(30000),
+    }
+
+    if (['POST', 'PUT', 'PATCH'].includes(method)) {
+      const contentType = request.headers.get('content-type')
+      if (contentType?.includes('application/json')) {
+        try {
+          const text = await request.text()
+          if (text && text.trim()) {
+            fetchOptions.body = text
+          }
+        } catch {
+          // Empty or invalid body - continue without
+        }
+      }
+    }
+
+    const response = await fetch(url, fetchOptions)
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      let errorJson
+      try {
+        errorJson = JSON.parse(errorText)
+      } catch {
+        errorJson = { error: errorText }
+      }
+      return NextResponse.json(
+        { error: `Backend Error: ${response.status}`, ...errorJson },
+        { status: response.status }
+      )
+    }
+
+    const data = await response.json()
+    return NextResponse.json(data)
+  } catch (error) {
+    console.error('RAG API proxy error:', error)
+    return NextResponse.json(
+      { error: 'Verbindung zum RAG Backend fehlgeschlagen' },
+      { status: 503 }
+    )
+  }
+}
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ path?: string[] }> }
+) {
+  const { path } = await params
+  return proxyRequest(request, path, 'GET')
+}
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ path?: string[] }> }
+) {
+  const { path } = await params
+  return proxyRequest(request, path, 'POST')
+}