refactor(admin): split multi-tenant page.tsx into colocated components

Extract types, constants, helpers, and UI pieces (LoadingSkeleton,
EmptyState, StatCard, ComplianceRing, Modal, TenantCard,
CreateTenantModal, EditTenantModal, TenantDetailModal) into
_components/ and _types.ts to bring page.tsx from 1663 LOC to
432 LOC (under the 500 hard cap). Behavior preserved.

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

admin-compliance/app/sdk/multi-tenant/_components/helpers.tsx

@@ -0,0 +1,123 @@
+import React from 'react'
+import { AlertTriangle, CheckCircle2, XCircle } from 'lucide-react'
+import { API_BASE, FALLBACK_TENANT_ID, FALLBACK_USER_ID } from './constants'
+
+export function getTenantId(): string {
+  if (typeof window !== 'undefined') {
+    return localStorage.getItem('sdk-tenant-id') || FALLBACK_TENANT_ID
+  }
+  return FALLBACK_TENANT_ID
+}
+
+export function getUserId(): string {
+  if (typeof window !== 'undefined') {
+    return localStorage.getItem('sdk-user-id') || FALLBACK_USER_ID
+  }
+  return FALLBACK_USER_ID
+}
+
+export function formatDate(dateStr: string | null): string {
+  if (!dateStr) return '-'
+  return new Date(dateStr).toLocaleDateString('de-DE', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+  })
+}
+
+export function formatDateTime(dateStr: string | null): string {
+  if (!dateStr) return '-'
+  return new Date(dateStr).toLocaleString('de-DE', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+export function slugify(text: string): string {
+  return text
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+}
+
+export function getScoreColor(score: number): string {
+  if (score >= 80) return '#22c55e'
+  if (score >= 60) return '#eab308'
+  if (score >= 40) return '#f97316'
+  return '#ef4444'
+}
+
+export function getScoreBgClasses(score: number): string {
+  if (score >= 80) return 'bg-green-50 text-green-700 border-green-200'
+  if (score >= 60) return 'bg-amber-50 text-amber-700 border-amber-200'
+  if (score >= 40) return 'bg-orange-50 text-orange-700 border-orange-200'
+  return 'bg-red-50 text-red-700 border-red-200'
+}
+
+export function getRiskBadgeClasses(level: string): string {
+  switch (level.toUpperCase()) {
+    case 'LOW':
+      return 'bg-green-100 text-green-800'
+    case 'MEDIUM':
+      return 'bg-yellow-100 text-yellow-800'
+    case 'HIGH':
+      return 'bg-orange-100 text-orange-800'
+    case 'CRITICAL':
+      return 'bg-red-100 text-red-800'
+    default:
+      return 'bg-gray-100 text-gray-800'
+  }
+}
+
+export function getStatusBadge(status: string): { bg: string; text: string; label: string; icon: React.ReactNode } {
+  switch (status) {
+    case 'active':
+      return {
+        bg: 'bg-green-100',
+        text: 'text-green-700',
+        label: 'Aktiv',
+        icon: <CheckCircle2 className="w-3 h-3" />,
+      }
+    case 'suspended':
+      return {
+        bg: 'bg-yellow-100',
+        text: 'text-yellow-700',
+        label: 'Suspendiert',
+        icon: <AlertTriangle className="w-3 h-3" />,
+      }
+    case 'inactive':
+      return {
+        bg: 'bg-red-100',
+        text: 'text-red-700',
+        label: 'Inaktiv',
+        icon: <XCircle className="w-3 h-3" />,
+      }
+    default:
+      return {
+        bg: 'bg-gray-100',
+        text: 'text-gray-700',
+        label: status,
+        icon: null,
+      }
+  }
+}
+
+export async function apiFetch<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
+  const res = await fetch(`${API_BASE}${endpoint}`, {
+    ...options,
+    headers: {
+      'Content-Type': 'application/json',
+      'X-Tenant-ID': getTenantId(),
+      'X-User-ID': getUserId(),
+      ...options.headers,
+    },
+  })
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}))
+    throw new Error(body.error || body.message || `HTTP ${res.status}`)
+  }
+  return res.json()
+}