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

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

admin-compliance/app/sdk/rbac/_components/TenantsTab.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import React from 'react'
+import type { Tenant, TabId } from '../_types'
+import { formatDate } from '../_api'
+
+interface Props {
+  tenants: Tenant[]
+  onOpenCreate: () => void
+  onSelectTenant: (id: string) => void
+  setActiveTab: (tab: TabId) => void
+}
+
+export function TenantsTab({ tenants, onOpenCreate, onSelectTenant, setActiveTab }: Props) {
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-4">
+        <h2 className="text-lg font-semibold">{tenants.length} Mandanten</h2>
+        <button
+          onClick={onOpenCreate}
+          className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700"
+        >
+          + Mandant anlegen
+        </button>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {tenants.map(t => (
+          <div key={t.id} className="bg-white rounded-xl border border-gray-200 p-5">
+            <div className="flex items-start justify-between mb-3">
+              <div>
+                <h3 className="font-semibold text-gray-900">{t.name}</h3>
+                <span className="text-xs font-mono text-gray-400">{t.slug}</span>
+              </div>
+              <span className={`px-2 py-0.5 rounded text-xs font-medium ${
+                t.status === 'active' ? 'bg-green-50 text-green-700' : 'bg-gray-100 text-gray-500'
+              }`}>
+                {t.status}
+              </span>
+            </div>
+            <div className="space-y-1 text-sm text-gray-600">
+              <div className="flex justify-between">
+                <span>User-Limit</span>
+                <span className="font-mono">{t.user_limit || 'unbegrenzt'}</span>
+              </div>
+              <div className="flex justify-between">
+                <span>LLM-Quota</span>
+                <span className="font-mono">{t.llm_quota || 'unbegrenzt'}</span>
+              </div>
+              <div className="flex justify-between">
+                <span>Erstellt</span>
+                <span>{formatDate(t.created_at)}</span>
+              </div>
+            </div>
+            <button
+              onClick={() => { onSelectTenant(t.id); setActiveTab('namespaces') }}
+              className="mt-3 w-full text-center text-sm text-purple-600 hover:text-purple-700 py-1"
+            >
+              Namespaces anzeigen
+            </button>
+          </div>
+        ))}
+      </div>
+      {tenants.length === 0 && (
+        <div className="text-center py-12 text-gray-400">Keine Mandanten vorhanden</div>
+      )}
+    </div>
+  )
+}