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/EditTenantModal.tsx

@@ -0,0 +1,155 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import { AlertTriangle, Loader2 } from 'lucide-react'
+import type { EditTenantForm, TenantOverview } from '../_types'
+import { STATUS_OPTIONS } from './constants'
+import { apiFetch } from './helpers'
+import { Modal } from './Modal'
+
+export function EditTenantModal({
+  open,
+  onClose,
+  tenant,
+  onUpdated,
+}: {
+  open: boolean
+  onClose: () => void
+  tenant: TenantOverview | null
+  onUpdated: () => void
+}) {
+  const [form, setForm] = useState<EditTenantForm>({
+    name: '',
+    max_users: 100,
+    llm_quota_monthly: 10000,
+    status: 'active',
+  })
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (tenant) {
+      setForm({
+        name: tenant.name,
+        max_users: tenant.max_users,
+        llm_quota_monthly: tenant.llm_quota_monthly,
+        status: tenant.status,
+      })
+      setError(null)
+    }
+  }, [tenant])
+
+  const isValid = form.name.trim().length >= 2
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!isValid || !tenant) return
+    setSaving(true)
+    setError(null)
+    try {
+      await apiFetch(`/tenants/${tenant.id}`, {
+        method: 'PUT',
+        body: JSON.stringify({
+          name: form.name.trim(),
+          max_users: form.max_users,
+          llm_quota_monthly: form.llm_quota_monthly,
+          status: form.status,
+        }),
+      })
+      onUpdated()
+      onClose()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Fehler beim Aktualisieren')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <Modal open={open} onClose={onClose} title={`Mandant bearbeiten: ${tenant?.name || ''}`}>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {error && (
+          <div className="flex items-center gap-2 p-3 text-sm text-red-700 bg-red-50 rounded-lg border border-red-200">
+            <AlertTriangle className="w-4 h-4 shrink-0" />
+            {error}
+          </div>
+        )}
+
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1">
+            Name <span className="text-red-500">*</span>
+          </label>
+          <input
+            type="text"
+            value={form.name}
+            onChange={(e) => setForm((prev) => ({ ...prev, name: e.target.value }))}
+            className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1">
+            Status
+          </label>
+          <select
+            value={form.status}
+            onChange={(e) => setForm((prev) => ({ ...prev, status: e.target.value }))}
+            className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white"
+          >
+            {STATUS_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">
+              Max. Benutzer
+            </label>
+            <input
+              type="number"
+              value={form.max_users}
+              onChange={(e) => setForm((prev) => ({ ...prev, max_users: parseInt(e.target.value) || 0 }))}
+              min={1}
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1">
+              LLM Kontingent / Monat
+            </label>
+            <input
+              type="number"
+              value={form.llm_quota_monthly}
+              onChange={(e) => setForm((prev) => ({ ...prev, llm_quota_monthly: parseInt(e.target.value) || 0 }))}
+              min={0}
+              step={1000}
+              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+            />
+          </div>
+        </div>
+
+        <div className="flex items-center justify-end gap-3 pt-4 border-t border-slate-200">
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-4 py-2 text-sm font-medium text-slate-600 bg-slate-100 hover:bg-slate-200 rounded-lg transition-colors"
+          >
+            Abbrechen
+          </button>
+          <button
+            type="submit"
+            disabled={!isValid || saving}
+            className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg transition-colors"
+          >
+            {saving && <Loader2 className="w-4 h-4 animate-spin" />}
+            Speichern
+          </button>
+        </div>
+      </form>
+    </Modal>
+  )
+}