feat: Betrieb-Module → 100% — Echte CRUD-Flows, kein Mock-Data

Alle 7 Betrieb-Module von 30–75% auf 100% gebracht:

**Gruppe 1 — UI-Ergänzungen (Backend bereits vorhanden):**
- incidents/page.tsx: IncidentCreateModal + IncidentDetailDrawer (Status-Transitions)
- whistleblower/page.tsx: WhistleblowerCreateModal + CaseDetailPanel (Kommentare, Zuweisung)
- dsr/page.tsx: DSRCreateModal + DSRDetailPanel (Workflow-Timeline, Status-Buttons)
- vendor-compliance/page.tsx: VendorCreateModal + "Neuer Vendor" Button

**Gruppe 2 — Escalations Full Stack:**
- Migration 011: compliance_escalations Tabelle
- Backend: escalation_routes.py (7 Endpoints: list/create/get/update/status/stats/delete)
- Proxy: /api/sdk/v1/escalations/[[...path]] → backend:8002
- Frontend: Mock-Array komplett ersetzt durch echte API + EscalationCreateModal + EscalationDetailDrawer

**Gruppe 2 — Consent Templates:**
- Migration 010: compliance_consent_email_templates + compliance_consent_gdpr_processes (7+7 Seed-Einträge)
- Backend: consent_template_routes.py (GET/POST/PUT/DELETE Templates + GET/PUT GDPR-Prozesse)
- Proxy: /api/sdk/v1/consent-templates/[[...path]]
- Frontend: consent-management/page.tsx lädt Templates + Prozesse aus DB (ApiTemplateEditor, ApiGdprProcessEditor)

**Gruppe 3 — Notfallplan:**
- Migration 012: 4 Tabellen (contacts, scenarios, checklists, exercises)
- Backend: notfallplan_routes.py (vollständiges CRUD + /stats)
- Proxy: /api/sdk/v1/notfallplan/[[...path]]
- Frontend: notfallplan/page.tsx — DB-backed Kontakte + Szenarien + Übungen, ContactCreateModal + ScenarioCreateModal

**Infrastruktur:**
- __init__.py: escalation_router + consent_template_router + notfallplan_router registriert
- Deploy-Skripte: apply_escalations_migration.sh, apply_consent_templates_migration.sh, apply_notfallplan_migration.sh
- Tests: 40 neue Tests (test_escalation_routes.py, test_consent_template_routes.py, test_notfallplan_routes.py)
- flow-data.ts: Completion aller 7 Module auf 100% gesetzt

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

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

@@ -1,7 +1,6 @@
 'use client'
 
-import React, { useState, useEffect, useMemo } from 'react'
-import Link from 'next/link'
+import React, { useState, useEffect, useMemo, useCallback } from 'react'
 import { useSDK } from '@/lib/sdk'
 import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
 import {
@@ -15,7 +14,7 @@ import {
   isOverdue,
   isUrgent
 } from '@/lib/sdk/dsr/types'
-import { fetchSDKDSRList } from '@/lib/sdk/dsr/api'
+import { fetchSDKDSRList, createSDKDSR, updateSDKDSRStatus } from '@/lib/sdk/dsr/api'
 import { DSRWorkflowStepperCompact } from '@/components/sdk/dsr'
 
 // =============================================================================
@@ -125,7 +124,7 @@ function StatCard({
   )
 }
 
-function RequestCard({ request }: { request: DSRRequest }) {
+function RequestCard({ request, onClick }: { request: DSRRequest; onClick?: () => void }) {
   const typeInfo = DSR_TYPE_INFO[request.type]
   const statusInfo = DSR_STATUS_INFO[request.status]
   const daysRemaining = getDaysRemaining(request.deadline.currentDeadline)
@@ -133,104 +132,105 @@ function RequestCard({ request }: { request: DSRRequest }) {
   const urgent = isUrgent(request)
 
   return (
-    <Link href={`/sdk/dsr/${request.id}`}>
-      <div className={`
+    <div
+      onClick={onClick}
+      className={`
         bg-white rounded-xl border-2 p-6 hover:shadow-md transition-all cursor-pointer
         ${overdue ? 'border-red-300 hover:border-red-400' :
           urgent ? 'border-orange-300 hover:border-orange-400' :
           request.status === 'completed' ? 'border-green-200 hover:border-green-300' :
           'border-gray-200 hover:border-purple-300'
         }
-      `}>
-        <div className="flex items-start justify-between">
-          <div className="flex-1 min-w-0">
-            {/* Header Badges */}
-            <div className="flex items-center gap-2 mb-2 flex-wrap">
-              <span className="text-xs text-gray-500 font-mono">
-                {request.referenceNumber}
+      `}
+    >
+      <div className="flex items-start justify-between">
+        <div className="flex-1 min-w-0">
+          {/* Header Badges */}
+          <div className="flex items-center gap-2 mb-2 flex-wrap">
+            <span className="text-xs text-gray-500 font-mono">
+              {request.referenceNumber}
+            </span>
+            <span className={`px-2 py-1 text-xs rounded-full ${typeInfo.bgColor} ${typeInfo.color}`}>
+              {typeInfo.article} {typeInfo.labelShort}
+            </span>
+            {!request.identityVerification.verified && request.status !== 'completed' && request.status !== 'rejected' && (
+              <span className="px-2 py-1 text-xs bg-yellow-100 text-yellow-700 rounded-full flex items-center gap-1">
+                <svg className="w-3 h-3" 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>
+                ID fehlt
               </span>
-              <span className={`px-2 py-1 text-xs rounded-full ${typeInfo.bgColor} ${typeInfo.color}`}>
-                {typeInfo.article} {typeInfo.labelShort}
-              </span>
-              {!request.identityVerification.verified && request.status !== 'completed' && request.status !== 'rejected' && (
-                <span className="px-2 py-1 text-xs bg-yellow-100 text-yellow-700 rounded-full flex items-center gap-1">
-                  <svg className="w-3 h-3" 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>
-                  ID fehlt
-                </span>
-              )}
-            </div>
-
-            {/* Requester Info */}
-            <h3 className="text-lg font-semibold text-gray-900 truncate">
-              {request.requester.name}
-            </h3>
-            <p className="text-sm text-gray-500 truncate">{request.requester.email}</p>
-
-            {/* Workflow Status */}
-            <div className="mt-3">
-              <DSRWorkflowStepperCompact currentStatus={request.status} />
-            </div>
+            )}
           </div>
 
-          {/* Right Side - Deadline */}
-          <div className={`text-right ml-4 ${
-            overdue ? 'text-red-600' :
-            urgent ? 'text-orange-600' :
-            'text-gray-500'
-          }`}>
-            <div className="text-sm font-medium">
-              {request.status === 'completed' || request.status === 'rejected' || request.status === 'cancelled'
-                ? statusInfo.label
-                : overdue
-                  ? `${Math.abs(daysRemaining)} Tage ueberfaellig`
-                  : `${daysRemaining} Tage`
-              }
-            </div>
-            <div className="text-xs mt-0.5">
-              {new Date(request.receivedAt).toLocaleDateString('de-DE')}
-            </div>
+          {/* Requester Info */}
+          <h3 className="text-lg font-semibold text-gray-900 truncate">
+            {request.requester.name}
+          </h3>
+          <p className="text-sm text-gray-500 truncate">{request.requester.email}</p>
+
+          {/* Workflow Status */}
+          <div className="mt-3">
+            <DSRWorkflowStepperCompact currentStatus={request.status} />
           </div>
         </div>
 
-        {/* Notes Preview */}
-        {request.notes && (
-          <div className="mt-3 p-3 bg-gray-50 rounded-lg text-sm text-gray-600 line-clamp-2">
-            {request.notes}
-          </div>
-        )}
-
-        {/* Footer */}
-        <div className="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between">
-          <div className="text-sm text-gray-500">
-            {request.assignment.assignedTo
-              ? `Zugewiesen: ${request.assignment.assignedTo}`
-              : 'Nicht zugewiesen'
+        {/* Right Side - Deadline */}
+        <div className={`text-right ml-4 ${
+          overdue ? 'text-red-600' :
+          urgent ? 'text-orange-600' :
+          'text-gray-500'
+        }`}>
+          <div className="text-sm font-medium">
+            {request.status === 'completed' || request.status === 'rejected' || request.status === 'cancelled'
+              ? statusInfo.label
+              : overdue
+                ? `${Math.abs(daysRemaining)} Tage ueberfaellig`
+                : `${daysRemaining} Tage`
             }
           </div>
-          <div className="flex items-center gap-2">
-            {request.status !== 'completed' && request.status !== 'rejected' && request.status !== 'cancelled' && (
-              <>
-                {!request.identityVerification.verified && (
-                  <span className="px-3 py-1 text-sm bg-yellow-50 text-yellow-700 rounded-lg">
-                    ID pruefen
-                  </span>
-                )}
-                <span className="px-3 py-1 text-sm text-purple-600 hover:bg-purple-50 rounded-lg transition-colors">
-                  Bearbeiten
-                </span>
-              </>
-            )}
-            {request.status === 'completed' && (
-              <span className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
-                Details
-              </span>
-            )}
+          <div className="text-xs mt-0.5">
+            {new Date(request.receivedAt).toLocaleDateString('de-DE')}
           </div>
         </div>
       </div>
-    </Link>
+
+      {/* Notes Preview */}
+      {request.notes && (
+        <div className="mt-3 p-3 bg-gray-50 rounded-lg text-sm text-gray-600 line-clamp-2">
+          {request.notes}
+        </div>
+      )}
+
+      {/* Footer */}
+      <div className="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between">
+        <div className="text-sm text-gray-500">
+          {request.assignment.assignedTo
+            ? `Zugewiesen: ${request.assignment.assignedTo}`
+            : 'Nicht zugewiesen'
+          }
+        </div>
+        <div className="flex items-center gap-2">
+          {request.status !== 'completed' && request.status !== 'rejected' && request.status !== 'cancelled' && (
+            <>
+              {!request.identityVerification.verified && (
+                <span className="px-3 py-1 text-sm bg-yellow-50 text-yellow-700 rounded-lg">
+                  ID pruefen
+                </span>
+              )}
+              <span className="px-3 py-1 text-sm text-purple-600 hover:bg-purple-50 rounded-lg transition-colors">
+                Bearbeiten
+              </span>
+            </>
+          )}
+          {request.status === 'completed' && (
+            <span className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
+              Details
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
   )
 }
 
@@ -307,6 +307,395 @@ function FilterBar({
   )
 }
 
+// =============================================================================
+// DSR CREATE MODAL
+// =============================================================================
+
+function DSRCreateModal({
+  onClose,
+  onSuccess
+}: {
+  onClose: () => void
+  onSuccess: () => void
+}) {
+  const [type, setType] = useState<string>('access')
+  const [subjectName, setSubjectName] = useState('')
+  const [subjectEmail, setSubjectEmail] = useState('')
+  const [description, setDescription] = useState('')
+  const [source, setSource] = useState<string>('web_form')
+  const [isSaving, setIsSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const deadline = new Date()
+  deadline.setDate(deadline.getDate() + 30)
+  const deadlineStr = deadline.toLocaleDateString('de-DE')
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!subjectName.trim() || !subjectEmail.trim()) return
+
+    setIsSaving(true)
+    setError(null)
+    try {
+      await createSDKDSR({
+        type,
+        requester: { name: subjectName.trim(), email: subjectEmail.trim() },
+        requestText: description.trim(),
+        source
+      })
+      onSuccess()
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/50"
+        onClick={onClose}
+      />
+
+      {/* Modal */}
+      <div className="relative bg-white rounded-2xl shadow-xl w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto">
+        <div className="p-6">
+          <div className="flex items-center justify-between mb-6">
+            <h2 className="text-xl font-semibold text-gray-900">Neue Anfrage anlegen</h2>
+            <button
+              onClick={onClose}
+              className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg 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="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          {error && (
+            <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
+              {error}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {/* Type */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Art der Anfrage
+              </label>
+              <select
+                value={type}
+                onChange={(e) => setType(e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm"
+              >
+                <option value="access">Art. 15 - Auskunft</option>
+                <option value="rectification">Art. 16 - Berichtigung</option>
+                <option value="erasure">Art. 17 - Loeschung</option>
+                <option value="restriction">Art. 18 - Einschraenkung</option>
+                <option value="portability">Art. 20 - Datenpортabilitaet</option>
+                <option value="objection">Art. 21 - Widerspruch</option>
+              </select>
+            </div>
+
+            {/* Subject Name */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Name der betroffenen Person <span className="text-red-500">*</span>
+              </label>
+              <input
+                type="text"
+                value={subjectName}
+                onChange={(e) => setSubjectName(e.target.value)}
+                required
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm"
+                placeholder="Vor- und Nachname"
+              />
+            </div>
+
+            {/* Subject Email */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                E-Mail der betroffenen Person <span className="text-red-500">*</span>
+              </label>
+              <input
+                type="email"
+                value={subjectEmail}
+                onChange={(e) => setSubjectEmail(e.target.value)}
+                required
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm"
+                placeholder="email@beispiel.de"
+              />
+            </div>
+
+            {/* Description */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Beschreibung
+              </label>
+              <textarea
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                rows={3}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm resize-none"
+                placeholder="Details zur Anfrage..."
+              />
+            </div>
+
+            {/* Source */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Eingangskanal
+              </label>
+              <select
+                value={source}
+                onChange={(e) => setSource(e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-sm"
+              >
+                <option value="web_form">Webformular</option>
+                <option value="email">E-Mail</option>
+                <option value="phone">Telefon</option>
+                <option value="letter">Brief</option>
+                <option value="other">Sonstiges</option>
+              </select>
+            </div>
+
+            {/* Deadline Info */}
+            <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg">
+              <p className="text-sm text-blue-700">
+                Gesetzliche Frist (Art. 12 DSGVO): Die Anfrage muss bis zum{' '}
+                <strong>{deadlineStr}</strong> beantwortet werden (30 Tage ab heute).
+              </p>
+            </div>
+
+            {/* Buttons */}
+            <div className="flex items-center justify-end gap-3 pt-2">
+              <button
+                type="button"
+                onClick={onClose}
+                className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+              >
+                Abbrechen
+              </button>
+              <button
+                type="submit"
+                disabled={isSaving || !subjectName.trim() || !subjectEmail.trim()}
+                className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              >
+                {isSaving ? 'Wird angelegt...' : 'Anfrage anlegen'}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// =============================================================================
+// DSR DETAIL PANEL
+// =============================================================================
+
+function DSRDetailPanel({
+  request,
+  onClose,
+  onUpdated
+}: {
+  request: DSRRequest
+  onClose: () => void
+  onUpdated: () => void
+}) {
+  const [isUpdatingStatus, setIsUpdatingStatus] = useState(false)
+  const [actionError, setActionError] = useState<string | null>(null)
+
+  const typeInfo = DSR_TYPE_INFO[request.type]
+  const statusInfo = DSR_STATUS_INFO[request.status]
+  const daysRemaining = getDaysRemaining(request.deadline.currentDeadline)
+  const overdue = isOverdue(request)
+
+  type StatusTransition = { label: string; next: DSRStatus; variant?: 'danger' }
+  const statusTransitions: Partial<Record<DSRStatus, StatusTransition[]>> = {
+    intake: [{ label: 'Identitaet pruefen', next: 'identity_verification' }],
+    identity_verification: [{ label: 'Bearbeitung starten', next: 'processing' }],
+    processing: [
+      { label: 'Anfrage abschliessen', next: 'completed' },
+      { label: 'Ablehnen', next: 'rejected', variant: 'danger' }
+    ]
+  }
+
+  const transitions = statusTransitions[request.status] || []
+
+  const handleStatusChange = async (newStatus: DSRStatus) => {
+    setIsUpdatingStatus(true)
+    setActionError(null)
+    try {
+      await updateSDKDSRStatus(request.id, newStatus)
+      onUpdated()
+    } catch (err: unknown) {
+      setActionError(err instanceof Error ? err.message : 'Unbekannter Fehler')
+    } finally {
+      setIsUpdatingStatus(false)
+    }
+  }
+
+  const handleExportPDF = () => {
+    window.open(`/api/sdk/v1/dsgvo/dsr/${request.id}/export`, '_blank')
+  }
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 z-40 bg-black/30"
+        onClick={onClose}
+      />
+
+      {/* Drawer */}
+      <div className="fixed right-0 top-0 bottom-0 z-50 w-[600px] bg-white shadow-2xl overflow-y-auto">
+        {/* Header */}
+        <div className="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between">
+          <div>
+            <p className="text-xs text-gray-500 font-mono">{request.referenceNumber}</p>
+            <h2 className="text-lg font-semibold text-gray-900 mt-0.5">
+              {typeInfo.article} {typeInfo.labelShort}
+            </h2>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handleExportPDF}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 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="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
+              PDF
+            </button>
+            <button
+              onClick={onClose}
+              className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg 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="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <div className="p-6 space-y-6">
+          {actionError && (
+            <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
+              {actionError}
+            </div>
+          )}
+
+          {/* Workflow Stepper */}
+          <div>
+            <h3 className="text-sm font-medium text-gray-700 mb-3">Bearbeitungsstand</h3>
+            <DSRWorkflowStepperCompact currentStatus={request.status} />
+          </div>
+
+          {/* Requester Info */}
+          <div>
+            <h3 className="text-sm font-medium text-gray-700 mb-3">Antragsteller</h3>
+            <div className="space-y-2">
+              <div className="flex items-center gap-3">
+                <div className="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 font-medium text-sm">
+                  {request.requester.name.charAt(0).toUpperCase()}
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-gray-900">{request.requester.name}</p>
+                  <p className="text-xs text-gray-500">{request.requester.email}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Deadline */}
+          <div className={`p-4 rounded-lg border ${
+            overdue ? 'bg-red-50 border-red-200' : 'bg-gray-50 border-gray-200'
+          }`}>
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-xs text-gray-500">Gesetzliche Frist</p>
+                <p className="text-sm font-medium text-gray-900">
+                  {new Date(request.deadline.currentDeadline).toLocaleDateString('de-DE')}
+                </p>
+              </div>
+              <div className={`text-right ${overdue ? 'text-red-600' : daysRemaining <= 7 ? 'text-orange-600' : 'text-gray-600'}`}>
+                <p className="text-lg font-bold">
+                  {overdue ? `${Math.abs(daysRemaining)}` : daysRemaining}
+                </p>
+                <p className="text-xs">
+                  {overdue ? 'Tage ueberfaellig' : 'Tage verbleibend'}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Details */}
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <p className="text-xs text-gray-500">Status</p>
+              <p className="text-sm font-medium text-gray-900">{statusInfo.label}</p>
+            </div>
+            <div>
+              <p className="text-xs text-gray-500">Zugewiesen an</p>
+              <p className="text-sm font-medium text-gray-900">
+                {request.assignment?.assignedTo || '—'}
+              </p>
+            </div>
+            <div>
+              <p className="text-xs text-gray-500">Eingegangen am</p>
+              <p className="text-sm font-medium text-gray-900">
+                {new Date(request.receivedAt).toLocaleDateString('de-DE')}
+              </p>
+            </div>
+            <div>
+              <p className="text-xs text-gray-500">Identitaet geprueft</p>
+              <p className={`text-sm font-medium ${request.identityVerification.verified ? 'text-green-600' : 'text-yellow-600'}`}>
+                {request.identityVerification.verified ? 'Ja' : 'Ausstehend'}
+              </p>
+            </div>
+          </div>
+
+          {/* Notes */}
+          {request.notes && (
+            <div>
+              <h3 className="text-sm font-medium text-gray-700 mb-2">Notizen</h3>
+              <p className="text-sm text-gray-600 whitespace-pre-wrap">{request.notes}</p>
+            </div>
+          )}
+
+          {/* Status Transitions */}
+          {transitions.length > 0 && (
+            <div>
+              <h3 className="text-sm font-medium text-gray-700 mb-3">Naechste Schritte</h3>
+              <div className="flex flex-wrap gap-2">
+                {transitions.map((t) => (
+                  <button
+                    key={t.next}
+                    onClick={() => handleStatusChange(t.next)}
+                    disabled={isUpdatingStatus}
+                    className={`px-4 py-2 text-sm rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-colors ${
+                      t.variant === 'danger'
+                        ? 'bg-red-600 text-white hover:bg-red-700'
+                        : 'bg-purple-600 text-white hover:bg-purple-700'
+                    }`}
+                  >
+                    {isUpdatingStatus ? 'Wird gespeichert...' : t.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  )
+}
+
 // =============================================================================
 // MAIN PAGE
 // =============================================================================
@@ -317,6 +706,8 @@ export default function DSRPage() {
   const [requests, setRequests] = useState<DSRRequest[]>([])
   const [statistics, setStatistics] = useState<DSRStatistics | null>(null)
   const [isLoading, setIsLoading] = useState(true)
+  const [showCreateModal, setShowCreateModal] = useState(false)
+  const [selectedRequest, setSelectedRequest] = useState<DSRRequest | null>(null)
 
   // Filters
   const [selectedType, setSelectedType] = useState<DSRType | 'all'>('all')
@@ -324,22 +715,23 @@ export default function DSRPage() {
   const [selectedPriority, setSelectedPriority] = useState<string>('all')
 
   // Load data from SDK backend
-  useEffect(() => {
-    const loadData = async () => {
-      setIsLoading(true)
-      try {
-        const { requests: dsrRequests, statistics: dsrStats } = await fetchSDKDSRList()
-        setRequests(dsrRequests)
-        setStatistics(dsrStats)
-      } catch (error) {
-        console.error('Failed to load DSR data:', error)
-      } finally {
-        setIsLoading(false)
-      }
+  const loadData = useCallback(async () => {
+    setIsLoading(true)
+    try {
+      const { requests: dsrRequests, statistics: dsrStats } = await fetchSDKDSRList()
+      setRequests(dsrRequests)
+      setStatistics(dsrStats)
+    } catch (error) {
+      console.error('Failed to load DSR data:', error)
+    } finally {
+      setIsLoading(false)
     }
-    loadData()
   }, [])
 
+  useEffect(() => {
+    loadData()
+  }, [loadData])
+
   // Calculate tab counts
   const tabCounts = useMemo(() => {
     return {
@@ -416,15 +808,15 @@ export default function DSRPage() {
         explanation={stepInfo.explanation}
         tips={stepInfo.tips}
       >
-        <Link
-          href="/sdk/dsr/new"
+        <button
+          onClick={() => setShowCreateModal(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>
           Anfrage erfassen
-        </Link>
+        </button>
       </StepHeader>
 
       {/* Tab Navigation */}
@@ -546,7 +938,11 @@ export default function DSRPage() {
           {/* Requests List */}
           <div className="space-y-4">
             {filteredRequests.map(request => (
-              <RequestCard key={request.id} request={request} />
+              <RequestCard
+                key={request.id}
+                request={request}
+                onClick={() => setSelectedRequest(request)}
+              />
             ))}
           </div>
 
@@ -573,20 +969,35 @@ export default function DSRPage() {
                   Filter zuruecksetzen
                 </button>
               ) : (
-                <Link
-                  href="/sdk/dsr/new"
+                <button
+                  onClick={() => setShowCreateModal(true)}
                   className="mt-4 inline-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>
                   Erste Anfrage erfassen
-                </Link>
+                </button>
               )}
             </div>
           )}
         </>
       )}
+
+      {/* Modals */}
+      {showCreateModal && (
+        <DSRCreateModal
+          onClose={() => setShowCreateModal(false)}
+          onSuccess={() => { setShowCreateModal(false); loadData() }}
+        />
+      )}
+      {selectedRequest && (
+        <DSRDetailPanel
+          request={selectedRequest}
+          onClose={() => setSelectedRequest(null)}
+          onUpdated={() => { setSelectedRequest(null); loadData() }}
+        />
+      )}
     </div>
   )
 }