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

@@ -0,0 +1,84 @@
+'use client'
+
+import React from 'react'
+import type { UserRole } from '../_types'
+import { formatDate, apiFetch } from '../_api'
+import { UserRoleLookup } from './UserRoleLookup'
+
+interface Props {
+  userRoles: UserRole[]
+  onOpenAssign: () => void
+  onRevoke: (userId: string, roleId: string) => void
+  setUserRoles: (rows: UserRole[]) => void
+  setLoading: (v: boolean) => void
+  setError: (msg: string | null) => void
+}
+
+export function UsersTab({ userRoles, onOpenAssign, onRevoke, setUserRoles, setLoading, setError }: Props) {
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-4">
+        <h2 className="text-lg font-semibold">Benutzer-Rollen</h2>
+        <button
+          onClick={onOpenAssign}
+          className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700"
+        >
+          + Rolle zuweisen
+        </button>
+      </div>
+
+      {/* User ID lookup */}
+      <div className="mb-4">
+        <UserRoleLookup onLoad={(userId) => {
+          setLoading(true)
+          apiFetch<UserRole[] | { roles: UserRole[] }>(`user-roles/${userId}`)
+            .then(data => setUserRoles(Array.isArray(data) ? data : data.roles || []))
+            .catch(e => setError(e instanceof Error ? e.message : 'Fehler'))
+            .finally(() => setLoading(false))
+        }} />
+      </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">User-ID</th>
+              <th className="text-left px-4 py-3 font-medium text-gray-600">Rolle</th>
+              <th className="text-left px-4 py-3 font-medium text-gray-600">Namespace</th>
+              <th className="text-left px-4 py-3 font-medium text-gray-600">Ablauf</th>
+              <th className="text-center px-4 py-3 font-medium text-gray-600">Aktionen</th>
+            </tr>
+          </thead>
+          <tbody>
+            {userRoles.length === 0 ? (
+              <tr><td colSpan={5} className="text-center py-8 text-gray-400">Keine Rollen zugewiesen</td></tr>
+            ) : userRoles.map(ur => (
+              <tr key={ur.id} className="border-b border-gray-100 hover:bg-gray-50">
+                <td className="px-4 py-3 font-mono text-xs">{ur.user_id}</td>
+                <td className="px-4 py-3">
+                  <span className="px-2 py-0.5 bg-purple-50 text-purple-700 rounded text-xs font-medium">
+                    {ur.role_name || ur.role_id}
+                  </span>
+                </td>
+                <td className="px-4 py-3 font-mono text-xs text-gray-500">
+                  {ur.namespace_id || 'Global'}
+                </td>
+                <td className="px-4 py-3 text-gray-500">
+                  {ur.expires_at ? formatDate(ur.expires_at) : 'Unbegrenzt'}
+                </td>
+                <td className="px-4 py-3 text-center">
+                  <button
+                    onClick={() => onRevoke(ur.user_id, ur.role_id)}
+                    className="text-red-600 hover:text-red-700 text-xs"
+                  >
+                    Entziehen
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}