refactor(admin): split audit-checklist, cookie-banner, escalations pages

Each page.tsx was 750-780 LOC. Extracted React components to _components/
and custom hooks to _hooks/ next to each page.tsx. All three pages are now
under 215 LOC (well within the 500 LOC hard cap). Zero behavior changes.

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

admin-compliance/app/sdk/escalations/_components/EscalationCard.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { Escalation, priorityColors, priorityLabels, statusColors, statusLabels, categoryLabels, formatDate } from './types'
+
+interface CardProps {
+  escalation: Escalation
+  onClick: () => void
+}
+
+export function EscalationCard({ escalation, onClick }: CardProps) {
+  return (
+    <div
+      onClick={onClick}
+      className={`bg-white rounded-xl border-2 p-6 cursor-pointer hover:shadow-md transition-shadow ${
+        escalation.priority === 'critical' ? 'border-red-300' :
+        escalation.priority === 'high' ? 'border-orange-300' :
+        escalation.status === 'resolved' || escalation.status === 'closed' ? 'border-green-200' : 'border-gray-200'
+      }`}
+    >
+      <div className="flex items-start justify-between">
+        <div className="flex-1">
+          <div className="flex items-center gap-2 mb-2 flex-wrap">
+            <span className={`px-2 py-1 text-xs rounded-full ${priorityColors[escalation.priority]}`}>
+              {priorityLabels[escalation.priority]}
+            </span>
+            {escalation.category && (
+              <span className="px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-700">
+                {categoryLabels[escalation.category] || escalation.category}
+              </span>
+            )}
+            <span className={`px-2 py-1 text-xs rounded-full ${statusColors[escalation.status]}`}>
+              {statusLabels[escalation.status]}
+            </span>
+          </div>
+          <h3 className="text-lg font-semibold text-gray-900">{escalation.title}</h3>
+          {escalation.description && (
+            <p className="text-sm text-gray-500 mt-1 line-clamp-2">{escalation.description}</p>
+          )}
+        </div>
+        <svg className="w-5 h-5 text-gray-400 ml-3 flex-shrink-0 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+        </svg>
+      </div>
+
+      <div className="mt-4 grid grid-cols-2 gap-4 text-sm">
+        {escalation.assignee && (
+          <div>
+            <span className="text-gray-500">Zugewiesen: </span>
+            <span className="font-medium text-gray-700">{escalation.assignee}</span>
+          </div>
+        )}
+        {escalation.due_date && (
+          <div>
+            <span className="text-gray-500">Frist: </span>
+            <span className="font-medium text-gray-700">{formatDate(escalation.due_date)}</span>
+          </div>
+        )}
+        <div>
+          <span className="text-gray-500">Erstellt: </span>
+          <span className="font-medium text-gray-700">{formatDate(escalation.created_at)}</span>
+        </div>
+      </div>
+
+      <div className="mt-4 pt-4 border-t border-gray-100">
+        <span className="text-xs text-gray-400 font-mono">{escalation.id}</span>
+      </div>
+    </div>
+  )
+}

admin-compliance/app/sdk/escalations/_components/EscalationCreateModal.tsx

@@ -0,0 +1,155 @@
+'use client'
+
+import { useState } from 'react'
+
+interface CreateModalProps {
+  onClose: () => void
+  onCreated: () => void
+}
+
+export function EscalationCreateModal({ onClose, onCreated }: CreateModalProps) {
+  const [title, setTitle] = useState('')
+  const [description, setDescription] = useState('')
+  const [priority, setPriority] = useState('medium')
+  const [category, setCategory] = useState('')
+  const [assignee, setAssignee] = useState('')
+  const [dueDate, setDueDate] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleSave() {
+    if (!title.trim()) {
+      setError('Titel ist erforderlich.')
+      return
+    }
+    setSaving(true)
+    setError(null)
+    try {
+      const res = await fetch('/api/sdk/v1/escalations', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title: title.trim(),
+          description: description.trim() || null,
+          priority,
+          category: category || null,
+          assignee: assignee.trim() || null,
+          due_date: dueDate || null,
+        }),
+      })
+      if (!res.ok) {
+        const err = await res.json()
+        throw new Error(err.detail || err.error || 'Fehler beim Erstellen')
+      }
+      onCreated()
+      onClose()
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg">
+        <div className="p-6 border-b border-gray-100">
+          <h2 className="text-xl font-bold text-gray-900">Neue Eskalation erstellen</h2>
+        </div>
+        <div className="p-6 space-y-4">
+          {error && (
+            <div className="bg-red-50 text-red-700 text-sm px-4 py-2 rounded-lg">{error}</div>
+          )}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Titel <span className="text-red-500">*</span>
+            </label>
+            <input
+              type="text"
+              value={title}
+              onChange={e => setTitle(e.target.value)}
+              className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
+              placeholder="Kurze Beschreibung der Eskalation"
+            />
+          </div>
+          <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 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
+              placeholder="Detaillierte Beschreibung…"
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Prioritaet</label>
+              <select
+                value={priority}
+                onChange={e => setPriority(e.target.value)}
+                className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
+              >
+                <option value="low">Niedrig</option>
+                <option value="medium">Mittel</option>
+                <option value="high">Hoch</option>
+                <option value="critical">Kritisch</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Kategorie</label>
+              <select
+                value={category}
+                onChange={e => setCategory(e.target.value)}
+                className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
+              >
+                <option value="">— Keine —</option>
+                <option value="dsgvo_breach">DSGVO-Verletzung</option>
+                <option value="ai_act">AI Act</option>
+                <option value="vendor">Vendor</option>
+                <option value="internal">Intern</option>
+                <option value="other">Sonstiges</option>
+              </select>
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Zugewiesen an</label>
+              <input
+                type="text"
+                value={assignee}
+                onChange={e => setAssignee(e.target.value)}
+                className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
+                placeholder="Name oder Team"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Faelligkeitsdatum</label>
+              <input
+                type="date"
+                value={dueDate}
+                onChange={e => setDueDate(e.target.value)}
+                className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
+              />
+            </div>
+          </div>
+        </div>
+        <div className="p-6 border-t border-gray-100 flex items-center justify-end gap-3">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+          >
+            Abbrechen
+          </button>
+          <button
+            onClick={handleSave}
+            disabled={saving}
+            className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
+          >
+            {saving ? 'Speichern…' : 'Eskalation erstellen'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

admin-compliance/app/sdk/escalations/_components/EscalationDetailDrawer.tsx

@@ -0,0 +1,238 @@
+'use client'
+
+import { useState } from 'react'
+import { Escalation, priorityColors, priorityLabels, statusColors, statusLabels, categoryLabels, formatDate } from './types'
+
+interface DrawerProps {
+  escalation: Escalation
+  onClose: () => void
+  onUpdated: () => void
+}
+
+export function EscalationDetailDrawer({ escalation, onClose, onUpdated }: DrawerProps) {
+  const [editAssignee, setEditAssignee] = useState(escalation.assignee || '')
+  const [editPriority, setEditPriority] = useState(escalation.priority)
+  const [editDueDate, setEditDueDate] = useState(
+    escalation.due_date ? escalation.due_date.slice(0, 10) : ''
+  )
+  const [saving, setSaving] = useState(false)
+  const [statusSaving, setStatusSaving] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+
+  async function handleDeleteEscalation() {
+    if (!window.confirm(`Eskalation "${escalation.title}" wirklich löschen?`)) return
+    setIsDeleting(true)
+    try {
+      const res = await fetch(`/api/sdk/v1/escalations/${escalation.id}`, { method: 'DELETE' })
+      if (!res.ok) throw new Error(`Fehler: ${res.status}`)
+      onUpdated()
+      onClose()
+    } catch (err) {
+      console.error('Löschen fehlgeschlagen:', err)
+      alert('Löschen fehlgeschlagen.')
+    } finally {
+      setIsDeleting(false)
+    }
+  }
+
+  async function handleSaveEdit() {
+    setSaving(true)
+    try {
+      await fetch(`/api/sdk/v1/escalations/${escalation.id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          assignee: editAssignee || null,
+          priority: editPriority,
+          due_date: editDueDate || null,
+        }),
+      })
+      onUpdated()
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function handleStatusChange(newStatus: string) {
+    setStatusSaving(true)
+    try {
+      await fetch(`/api/sdk/v1/escalations/${escalation.id}/status`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ status: newStatus }),
+      })
+      onUpdated()
+      onClose()
+    } finally {
+      setStatusSaving(false)
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-40 flex justify-end">
+      <div className="absolute inset-0 bg-black/30" onClick={onClose} />
+      <div className="relative w-full max-w-md bg-white shadow-2xl flex flex-col h-full overflow-y-auto">
+        <div className="p-6 border-b border-gray-100 flex items-start justify-between">
+          <div className="flex-1 pr-4">
+            <div className="flex items-center gap-2 mb-2">
+              <span className={`px-2 py-0.5 text-xs rounded-full ${priorityColors[escalation.priority]}`}>
+                {priorityLabels[escalation.priority]}
+              </span>
+              <span className={`px-2 py-0.5 text-xs rounded-full ${statusColors[escalation.status]}`}>
+                {statusLabels[escalation.status]}
+              </span>
+              {escalation.category && (
+                <span className="px-2 py-0.5 text-xs rounded-full bg-purple-100 text-purple-700">
+                  {categoryLabels[escalation.category] || escalation.category}
+                </span>
+              )}
+            </div>
+            <h2 className="text-lg font-bold text-gray-900">{escalation.title}</h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 hover:bg-gray-100 rounded-lg transition-colors text-gray-500"
+          >
+            <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-6 flex-1">
+          {escalation.description && (
+            <div>
+              <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Beschreibung</h3>
+              <p className="text-sm text-gray-700">{escalation.description}</p>
+            </div>
+          )}
+
+          <div className="grid grid-cols-2 gap-4 text-sm">
+            <div>
+              <span className="text-gray-500 text-xs">Erstellt</span>
+              <p className="font-medium text-gray-800">{formatDate(escalation.created_at)}</p>
+            </div>
+            {escalation.reporter && (
+              <div>
+                <span className="text-gray-500 text-xs">Gemeldet von</span>
+                <p className="font-medium text-gray-800">{escalation.reporter}</p>
+              </div>
+            )}
+            {escalation.source_module && (
+              <div>
+                <span className="text-gray-500 text-xs">Quell-Modul</span>
+                <p className="font-medium text-gray-800">{escalation.source_module}</p>
+              </div>
+            )}
+            {escalation.resolved_at && (
+              <div>
+                <span className="text-gray-500 text-xs">Geloest am</span>
+                <p className="font-medium text-green-700">{formatDate(escalation.resolved_at)}</p>
+              </div>
+            )}
+          </div>
+
+          <div className="border border-gray-200 rounded-xl p-4 space-y-4">
+            <h3 className="text-sm font-semibold text-gray-700">Bearbeiten</h3>
+            <div>
+              <label className="block text-xs font-medium text-gray-500 mb-1">Zugewiesen an</label>
+              <input
+                type="text"
+                value={editAssignee}
+                onChange={e => setEditAssignee(e.target.value)}
+                className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
+                placeholder="Name oder Team"
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs font-medium text-gray-500 mb-1">Prioritaet</label>
+                <select
+                  value={editPriority}
+                  onChange={e => setEditPriority(e.target.value as Escalation['priority'])}
+                  className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
+                >
+                  <option value="low">Niedrig</option>
+                  <option value="medium">Mittel</option>
+                  <option value="high">Hoch</option>
+                  <option value="critical">Kritisch</option>
+                </select>
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-gray-500 mb-1">Faelligkeit</label>
+                <input
+                  type="date"
+                  value={editDueDate}
+                  onChange={e => setEditDueDate(e.target.value)}
+                  className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
+                />
+              </div>
+            </div>
+            <button
+              onClick={handleSaveEdit}
+              disabled={saving}
+              className="w-full py-2 text-sm bg-gray-800 text-white rounded-lg hover:bg-gray-900 transition-colors disabled:opacity-50"
+            >
+              {saving ? 'Speichern…' : 'Aenderungen speichern'}
+            </button>
+          </div>
+
+          <div>
+            <h3 className="text-sm font-semibold text-gray-700 mb-3">Status-Aktionen</h3>
+            <div className="flex flex-col gap-2">
+              {escalation.status === 'open' && (
+                <button
+                  onClick={() => handleStatusChange('in_progress')}
+                  disabled={statusSaving}
+                  className="w-full py-2 text-sm bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors disabled:opacity-50"
+                >
+                  In Bearbeitung nehmen
+                </button>
+              )}
+              {escalation.status === 'in_progress' && (
+                <button
+                  onClick={() => handleStatusChange('escalated')}
+                  disabled={statusSaving}
+                  className="w-full py-2 text-sm bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors disabled:opacity-50"
+                >
+                  Eskalieren
+                </button>
+              )}
+              {(escalation.status === 'escalated' || escalation.status === 'in_progress') && (
+                <button
+                  onClick={() => handleStatusChange('resolved')}
+                  disabled={statusSaving}
+                  className="w-full py-2 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors disabled:opacity-50"
+                >
+                  Loesen
+                </button>
+              )}
+              {escalation.status === 'resolved' && (
+                <button
+                  onClick={() => handleStatusChange('closed')}
+                  disabled={statusSaving}
+                  className="w-full py-2 text-sm bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors disabled:opacity-50"
+                >
+                  Schliessen
+                </button>
+              )}
+              {escalation.status === 'closed' && (
+                <p className="text-sm text-gray-400 text-center py-2">Eskalation ist geschlossen.</p>
+              )}
+            </div>
+          </div>
+
+          <div className="pt-2 border-t border-gray-100">
+            <button
+              onClick={handleDeleteEscalation}
+              disabled={isDeleting}
+              className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm transition-colors disabled:opacity-50"
+            >
+              {isDeleting ? 'Löschen...' : 'Löschen'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

admin-compliance/app/sdk/escalations/_components/types.ts

@@ -0,0 +1,73 @@
+// =============================================================================
+// TYPES
+// =============================================================================
+
+export interface Escalation {
+  id: string
+  title: string
+  description: string | null
+  priority: 'low' | 'medium' | 'high' | 'critical'
+  status: 'open' | 'in_progress' | 'escalated' | 'resolved' | 'closed'
+  category: string | null
+  assignee: string | null
+  reporter: string | null
+  source_module: string | null
+  due_date: string | null
+  resolved_at: string | null
+  created_at: string
+  updated_at: string
+}
+
+export interface EscalationStats {
+  by_status: Record<string, number>
+  by_priority: Record<string, number>
+  total: number
+  active: number
+}
+
+// =============================================================================
+// HELPERS
+// =============================================================================
+
+export const priorityColors: Record<string, string> = {
+  critical: 'bg-red-500 text-white',
+  high: 'bg-orange-500 text-white',
+  medium: 'bg-yellow-500 text-white',
+  low: 'bg-green-500 text-white',
+}
+
+export const priorityLabels: Record<string, string> = {
+  critical: 'Kritisch',
+  high: 'Hoch',
+  medium: 'Mittel',
+  low: 'Niedrig',
+}
+
+export const statusColors: Record<string, string> = {
+  open: 'bg-blue-100 text-blue-700',
+  in_progress: 'bg-yellow-100 text-yellow-700',
+  escalated: 'bg-red-100 text-red-700',
+  resolved: 'bg-green-100 text-green-700',
+  closed: 'bg-gray-100 text-gray-600',
+}
+
+export const statusLabels: Record<string, string> = {
+  open: 'Offen',
+  in_progress: 'In Bearbeitung',
+  escalated: 'Eskaliert',
+  resolved: 'Geloest',
+  closed: 'Geschlossen',
+}
+
+export const categoryLabels: Record<string, string> = {
+  dsgvo_breach: 'DSGVO-Verletzung',
+  ai_act: 'AI Act',
+  vendor: 'Vendor',
+  internal: 'Intern',
+  other: 'Sonstiges',
+}
+
+export function formatDate(iso: string | null): string {
+  if (!iso) return '—'
+  return new Date(iso).toLocaleDateString('de-DE')
+}