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

@@ -0,0 +1,64 @@
+'use client'
+
+import React from 'react'
+import type { Role } from '../_types'
+
+interface Props {
+  roles: Role[]
+  onOpenCreate: () => void
+}
+
+export function RolesTab({ roles, onOpenCreate }: Props) {
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-4">
+        <h2 className="text-lg font-semibold">{roles.length} Rollen</h2>
+        <button
+          onClick={onOpenCreate}
+          className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700"
+        >
+          + Rolle erstellen
+        </button>
+      </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">Beschreibung</th>
+              <th className="text-center px-4 py-3 font-medium text-gray-600">Typ</th>
+              <th className="text-left px-4 py-3 font-medium text-gray-600">Berechtigungen</th>
+            </tr>
+          </thead>
+          <tbody>
+            {roles.length === 0 ? (
+              <tr><td colSpan={4} className="text-center py-8 text-gray-400">Keine Rollen</td></tr>
+            ) : roles.map(role => (
+              <tr key={role.id} className="border-b border-gray-100 hover:bg-gray-50">
+                <td className="px-4 py-3 font-medium">{role.name}</td>
+                <td className="px-4 py-3 text-gray-500 max-w-xs truncate">{role.description}</td>
+                <td className="px-4 py-3 text-center">
+                  <span className={`px-2 py-0.5 rounded text-xs font-medium ${
+                    role.is_system ? 'bg-purple-50 text-purple-700' : 'bg-gray-100 text-gray-600'
+                  }`}>
+                    {role.is_system ? 'System' : 'Custom'}
+                  </span>
+                </td>
+                <td className="px-4 py-3">
+                  <div className="flex flex-wrap gap-1">
+                    {(role.permissions || []).slice(0, 4).map(p => (
+                      <span key={p} className="px-1.5 py-0.5 bg-gray-100 text-gray-600 rounded text-xs">{p}</span>
+                    ))}
+                    {(role.permissions || []).length > 4 && (
+                      <span className="text-xs text-gray-400">+{role.permissions.length - 4}</span>
+                    )}
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}