refactor(admin): split einwilligungen page.tsx into colocated components

Extract nav tabs, detail modal, table row, stats grid, search/filter,
records table, pagination, and data-loading hook into _components/ and
_hooks/. page.tsx reduced from 833 to 114 LOC.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

admin-compliance/app/sdk/einwilligungen/_components/EinwilligungenNavTabs.tsx

@@ -0,0 +1,84 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import {
+  Database,
+  FileText,
+  Cookie,
+  Clock,
+  LayoutGrid,
+} from 'lucide-react'
+
+const EINWILLIGUNGEN_TABS = [
+  {
+    id: 'overview',
+    label: 'Übersicht',
+    href: '/sdk/einwilligungen',
+    icon: LayoutGrid,
+    description: 'Consent-Tracking Dashboard',
+  },
+  {
+    id: 'catalog',
+    label: 'Datenpunktkatalog',
+    href: '/sdk/einwilligungen/catalog',
+    icon: Database,
+    description: '18 Kategorien, 128 Datenpunkte',
+  },
+  {
+    id: 'privacy-policy',
+    label: 'DSI Generator',
+    href: '/sdk/einwilligungen/privacy-policy',
+    icon: FileText,
+    description: 'Datenschutzinformation erstellen',
+  },
+  {
+    id: 'cookie-banner',
+    label: 'Cookie-Banner',
+    href: '/sdk/einwilligungen/cookie-banner',
+    icon: Cookie,
+    description: 'Cookie-Consent konfigurieren',
+  },
+  {
+    id: 'retention',
+    label: 'Löschmatrix',
+    href: '/sdk/einwilligungen/retention',
+    icon: Clock,
+    description: 'Aufbewahrungsfristen verwalten',
+  },
+]
+
+export function EinwilligungenNavTabs() {
+  const pathname = usePathname()
+
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 p-2 mb-6">
+      <div className="flex flex-wrap gap-2">
+        {EINWILLIGUNGEN_TABS.map((tab) => {
+          const Icon = tab.icon
+          const isActive = pathname === tab.href
+
+          return (
+            <Link
+              key={tab.id}
+              href={tab.href}
+              className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-all ${
+                isActive
+                  ? 'bg-purple-100 text-purple-900 shadow-sm'
+                  : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
+              }`}
+            >
+              <Icon className={`w-5 h-5 ${isActive ? 'text-purple-600' : 'text-gray-400'}`} />
+              <div>
+                <div className={`font-medium text-sm ${isActive ? 'text-purple-900' : ''}`}>
+                  {tab.label}
+                </div>
+                <div className="text-xs text-gray-500">{tab.description}</div>
+              </div>
+            </Link>
+          )
+        })}
+      </div>
+    </div>
+  )
+}