Implement admin users and roles management

- Add user CRUD: list, create (via Better Auth), update role/status, remove from port
- Add role CRUD: create, update permissions, delete with system role protection
- Full permissions matrix UI with accordion groups and per-action checkboxes
- Validators, services, API routes, and UI components following existing patterns

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

src/components/admin/roles/role-list.tsx

@@ -0,0 +1,176 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { type ColumnDef } from '@tanstack/react-table';
+import { Pencil, Trash2, Plus, Lock } from 'lucide-react';
+
+import { DataTable } from '@/components/shared/data-table';
+import { PageHeader } from '@/components/shared/page-header';
+import { ConfirmationDialog } from '@/components/shared/confirmation-dialog';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { apiFetch } from '@/lib/api/client';
+import { RoleForm } from './role-form';
+
+interface Role {
+  id: string;
+  name: string;
+  description: string | null;
+  isSystem: boolean;
+  isGlobal: boolean;
+  permissions: Record<string, Record<string, boolean>>;
+  createdAt: string;
+}
+
+export function RoleList() {
+  const [roles, setRoles] = useState<Role[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [formOpen, setFormOpen] = useState(false);
+  const [editingRole, setEditingRole] = useState<Role | null>(null);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+
+  const fetchRoles = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await apiFetch<{ data: Role[] }>('/api/v1/admin/roles');
+      setRoles(res.data);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void fetchRoles();
+  }, [fetchRoles]);
+
+  function handleNewRole() {
+    setEditingRole(null);
+    setFormOpen(true);
+  }
+
+  function handleEditRole(role: Role) {
+    setEditingRole(role);
+    setFormOpen(true);
+  }
+
+  async function handleDeleteRole(id: string) {
+    setDeletingId(id);
+    try {
+      await apiFetch(`/api/v1/admin/roles/${id}`, { method: 'DELETE' });
+      await fetchRoles();
+    } finally {
+      setDeletingId(null);
+    }
+  }
+
+  function countPermissions(perms: Record<string, Record<string, boolean>>): string {
+    let granted = 0;
+    let total = 0;
+    for (const group of Object.values(perms)) {
+      for (const val of Object.values(group)) {
+        total++;
+        if (val) granted++;
+      }
+    }
+    return `${granted}/${total}`;
+  }
+
+  const columns: ColumnDef<Role, unknown>[] = [
+    {
+      accessorKey: 'name',
+      header: 'Name',
+      cell: ({ row }) => (
+        <div className="flex items-center gap-2">
+          <span className="font-medium">{row.original.name}</span>
+          {row.original.isSystem && (
+            <Badge variant="outline" className="text-xs">
+              <Lock className="mr-1 h-3 w-3" />
+              System
+            </Badge>
+          )}
+        </div>
+      ),
+    },
+    {
+      accessorKey: 'description',
+      header: 'Description',
+      cell: ({ row }) => (
+        <span className="text-muted-foreground text-sm">{row.original.description ?? '—'}</span>
+      ),
+    },
+    {
+      id: 'permissions',
+      header: 'Permissions',
+      cell: ({ row }) => (
+        <Badge variant="secondary">{countPermissions(row.original.permissions)}</Badge>
+      ),
+    },
+    {
+      id: 'actions',
+      header: '',
+      cell: ({ row }) => (
+        <div className="flex items-center justify-end gap-1">
+          <Button variant="ghost" size="sm" onClick={() => handleEditRole(row.original)}>
+            <Pencil className="h-4 w-4" />
+            <span className="sr-only">Edit</span>
+          </Button>
+          {!row.original.isSystem && (
+            <ConfirmationDialog
+              trigger={
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-destructive hover:text-destructive"
+                >
+                  <Trash2 className="h-4 w-4" />
+                  <span className="sr-only">Delete</span>
+                </Button>
+              }
+              title="Delete Role"
+              description={`Delete "${row.original.name}"? Users assigned to this role must be reassigned first.`}
+              confirmLabel="Delete"
+              onConfirm={() => handleDeleteRole(row.original.id)}
+              loading={deletingId === row.original.id}
+            />
+          )}
+        </div>
+      ),
+      enableSorting: false,
+      size: 80,
+    },
+  ];
+
+  return (
+    <div>
+      <PageHeader
+        title="Role Management"
+        description="Manage roles and their permissions"
+        actions={
+          <Button onClick={handleNewRole}>
+            <Plus className="mr-1.5 h-4 w-4" />
+            New Role
+          </Button>
+        }
+      />
+
+      <DataTable
+        columns={columns}
+        data={roles}
+        isLoading={loading}
+        getRowId={(row) => row.id}
+        emptyState={
+          <div className="text-center py-8">
+            <p className="text-muted-foreground">No roles defined.</p>
+          </div>
+        }
+      />
+
+      <RoleForm
+        open={formOpen}
+        onOpenChange={setFormOpen}
+        role={editingRole}
+        onSuccess={fetchRoles}
+      />
+    </div>
+  );
+}