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

@@ -0,0 +1,73 @@
+'use client'
+
+import React from 'react'
+import type { Tenant, Namespace } from '../_types'
+import { formatDate } from '../_api'
+
+interface Props {
+  tenants: Tenant[]
+  namespaces: Namespace[]
+  selectedTenantId: string | null
+  onSelectTenant: (id: string) => void
+  onOpenCreate: () => void
+  onLoadNamespaces: (tenantId: string) => void
+}
+
+export function NamespacesTab({ tenants, namespaces, selectedTenantId, onSelectTenant, onOpenCreate, onLoadNamespaces }: Props) {
+  return (
+    <div>
+      <div className="flex items-center gap-4 mb-4">
+        <select
+          value={selectedTenantId || ''}
+          onChange={e => { onSelectTenant(e.target.value); if (e.target.value) onLoadNamespaces(e.target.value) }}
+          className="border border-gray-300 rounded-lg px-3 py-2 text-sm"
+        >
+          <option value="">Mandant waehlen...</option>
+          {tenants.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
+        </select>
+        {selectedTenantId && (
+          <button
+            onClick={onOpenCreate}
+            className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700"
+          >
+            + Namespace
+          </button>
+        )}
+      </div>
+      {!selectedTenantId ? (
+        <div className="text-center py-12 text-gray-400">Bitte einen Mandanten waehlen</div>
+      ) : (
+        <div className="overflow-x-auto bg-white rounded-xl border border-gray-200">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-gray-200 bg-gray-50">
+                <th className="text-left px-4 py-3 font-medium text-gray-600">Name</th>
+                <th className="text-left px-4 py-3 font-medium text-gray-600">Slug</th>
+                <th className="text-left px-4 py-3 font-medium text-gray-600">Isolation</th>
+                <th className="text-left px-4 py-3 font-medium text-gray-600">Klassifikation</th>
+                <th className="text-left px-4 py-3 font-medium text-gray-600">Erstellt</th>
+              </tr>
+            </thead>
+            <tbody>
+              {namespaces.length === 0 ? (
+                <tr><td colSpan={5} className="text-center py-8 text-gray-400">Keine Namespaces</td></tr>
+              ) : namespaces.map(ns => (
+                <tr key={ns.id} className="border-b border-gray-100 hover:bg-gray-50">
+                  <td className="px-4 py-3 font-medium">{ns.name}</td>
+                  <td className="px-4 py-3 font-mono text-xs text-gray-500">{ns.slug}</td>
+                  <td className="px-4 py-3">
+                    <span className="px-2 py-0.5 bg-blue-50 text-blue-700 rounded text-xs">{ns.isolation_level}</span>
+                  </td>
+                  <td className="px-4 py-3">
+                    <span className="px-2 py-0.5 bg-gray-100 text-gray-700 rounded text-xs">{ns.classification}</span>
+                  </td>
+                  <td className="px-4 py-3 text-gray-500">{formatDate(ns.created_at)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}