create-astram-app 0.1.3 → 0.3.0

package/template/frontend/src/pages/access/AccessForm.jsx

@@ -0,0 +1,416 @@
+/**
+ * AccessForm — the routed Assign / Edit / Duplicate access form (the two-pane guided UI:
+ * preset rail + paginated role select + searchable grouped CRUD matrix). Rendered as a
+ * routed-modal overlay by /access/add and /access/edit/:uuid under AccessPage's layout —
+ * the same routed-modal pattern as RoleForm/UserForm.
+ *
+ * Mode (from the URL):
+ *   /access/edit/:uuid        → edit    (role fixed = :uuid, matrix seeded from its grants)
+ *   /access/add?from=<uuid>   → duplicate (matrix seeded from the source, role empty → pick a target)
+ *   /access/add               → assign  (empty role, empty matrix)
+ *
+ * Save diffs the working matrix vs. the role's loaded grants → grant/revokePermission per
+ * key. decide()/grant model unchanged. ⛔ No raw UUIDs: roles shown by name; a uuid is a
+ * route param / select value / API arg only.
+ */
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useNavigate, useOutletContext, useParams, useSearchParams } from 'react-router-dom';
+import { toast } from 'sonner';
+import { useAuth } from '@/auth/AuthContext';
+import EntityFormModal from '@/components/EntityFormModal';
+import { Input } from '@/components/ui/input';
+import { Checkbox } from '@/components/ui/checkbox';
+import { SearchableSelect } from '@/components/ui/searchable-select';
+import CollapsibleGroup from '@/components/access/CollapsibleGroup';
+
+const ACTIONS = ['read', 'create', 'update', 'delete'];
+
+// Object → group mapping. An unmapped typeKey falls into "Other" (fail-safe).
+const GROUPS = [
+  { label: 'Organization', types: ['company', 'company_branch', 'company_department', 'department', 'branch'] },
+  { label: 'People & Access', types: ['user', 'role', 'company_membership', 'membership_posting'] },
+];
+
+export default function AccessForm() {
+  const { tokens, identity } = useAuth();
+  const token = tokens?.accessToken;
+  const navigate = useNavigate();
+  const { uuid } = useParams();
+  const [searchParams] = useSearchParams();
+  const { onRefresh } = useOutletContext() ?? {};
+
+  const fromUuid = searchParams.get('from');
+  const mode = uuid ? 'edit' : fromUuid ? 'duplicate' : 'assign';
+  const sourceUuid = uuid || fromUuid || null;
+
+  const [catalog, setCatalog] = useState([]);
+  const [bundles, setBundles] = useState([]);
+  const [roleUuid, setRoleUuid] = useState('');
+  const [roleLabel, setRoleLabel] = useState(null);
+  const [loaded, setLoaded] = useState(new Set()); // diff baseline
+  const [working, setWorking] = useState(new Set()); // being edited
+  const [objectSearch, setObjectSearch] = useState('');
+  const [openGroups, setOpenGroups] = useState(() =>
+    Object.fromEntries(GROUPS.map((g) => [g.label, true])),
+  );
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+
+  const moduleName = catalog[0]?.module || 'identity';
+
+  const typeKeys = useMemo(() => {
+    const seen = [];
+    for (const c of catalog) if (!seen.includes(c.typeKey)) seen.push(c.typeKey);
+    return seen;
+  }, [catalog]);
+  const groups = useMemo(() => {
+    const mapped = new Set(GROUPS.flatMap((g) => g.types));
+    const out = GROUPS.map((g) => ({ label: g.label, types: g.types.filter((t) => typeKeys.includes(t)) }));
+    const other = typeKeys.filter((t) => !mapped.has(t));
+    if (other.length) out.push({ label: 'Other', types: other });
+    return out.filter((g) => g.types.length > 0);
+  }, [typeKeys]);
+
+  const labelOf = useMemo(() => {
+    const m = {};
+    for (const c of catalog) m[c.key] = c.label;
+    return m;
+  }, [catalog]);
+  const keyExists = useCallback((key) => Boolean(labelOf[key]), [labelOf]);
+  const cellKey = useCallback((t, a) => `${moduleName}:${t}:${a}`, [moduleName]);
+
+  const keyHeld = useCallback((key, set) => {
+    if (set.has(key)) return true;
+    const [mod, type] = key.split(':');
+    if (!mod || !type) return false;
+    return set.has(`${mod}:*`) || set.has(`${mod}:${type}:*`);
+  }, []);
+
+  // Paginated + searchable role fetcher for the SearchableSelect.
+  const fetchRoles = useCallback(
+    async ({ search, page, limit }) => {
+      const r = await identity.listRoles(token, { page, limit, search, sortBy: 'name', sortOrder: 'asc' });
+      if (!r.ok) return { options: [], total: 0, page };
+      const options = (r.rows || []).map((row) => ({ value: row.id, label: row.fields?.name || '(unnamed)' }));
+      return { options, total: r.total ?? options.length, page: r.page ?? page };
+    },
+    [identity, token],
+  );
+
+  // Load catalog + bundles + (for edit/duplicate) the source role's grants, on mount.
+  useEffect(() => {
+    if (!token) return undefined;
+    let active = true;
+    (async () => {
+      setLoading(true);
+      const [catRes, bundlesRes, grantsRes, roleRes] = await Promise.all([
+        identity.listPermissionCatalog(token),
+        identity.listAccessBundles(token),
+        sourceUuid ? identity.listRolePermissions(token, sourceUuid) : Promise.resolve({ ok: true, grants: [] }),
+        // In EDIT mode the role is fixed — resolve its NAME so the (disabled) role select
+        // shows it on the trigger (a uuid is never displayed).
+        mode === 'edit' && sourceUuid
+          ? identity.getRole(token, sourceUuid)
+          : Promise.resolve({ ok: false }),
+      ]);
+      if (!active) return;
+      if (catRes.ok) setCatalog(catRes.catalog || []);
+      else setError(catRes.error || 'Could not load the permission catalog.');
+      const bundleList = bundlesRes.ok ? bundlesRes.bundles || [] : [];
+      if (bundlesRes.ok) setBundles(bundleList);
+
+      const seedKeys = new Set(grantsRes.ok ? grantsRes.grants || [] : []);
+      if (mode === 'edit') {
+        setRoleUuid(sourceUuid);
+        setRoleLabel(roleRes.ok ? roleRes.record?.fields?.name || null : null);
+        setLoaded(new Set(seedKeys)); // edit diffs against the role's own grants
+      } else {
+        // assign/duplicate: role empty, baseline empty (all keys are new to the target).
+        setLoaded(new Set());
+      }
+      setWorking(new Set(seedKeys));
+      // (No preset state to set — a preset's "Applied" badge is DERIVED from whether its
+      // keys are all held in `working`, so any preset the seeded grants cover shows
+      // Applied automatically. That's what makes Edit reflect the role's existing preset.)
+      setLoading(false);
+    })();
+    return () => {
+      active = false;
+    };
+  }, [identity, token, sourceUuid, mode]);
+
+  const onPickRole = async (picked) => {
+    setRoleUuid(picked || '');
+    if (!picked) {
+      setLoaded(new Set());
+      return;
+    }
+    if (mode !== 'edit') {
+      const r = await identity.listRolePermissions(token, picked);
+      setLoaded(new Set(r.ok ? r.grants : []));
+    }
+  };
+
+  const toggle = (key) => {
+    setWorking((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
+
+  const toggleGroupAll = (group) => {
+    const groupKeys = group.types.flatMap((t) => ACTIONS.map((a) => cellKey(t, a))).filter(keyExists);
+    const allHeld = groupKeys.every((k) => keyHeld(k, working));
+    setWorking((prev) => {
+      const next = new Set(prev);
+      for (const k of groupKeys) {
+        if (allHeld) next.delete(k);
+        else next.add(k);
+      }
+      return next;
+    });
+  };
+
+  // A preset is APPLIED iff every one of its keys is currently held — CHECKBOX-like +
+  // derived from the working set, so multiple presets can be applied at once (they may
+  // overlap) and toggling matrix cells keeps each preset's applied state in sync.
+  const isBundleApplied = useCallback(
+    (bundle) =>
+      bundle.permissionKeys.length > 0 && bundle.permissionKeys.every((k) => keyHeld(k, working)),
+    [keyHeld, working],
+  );
+
+  // Toggle a preset: not fully applied → ADD its keys (union); fully applied → REMOVE its
+  // keys. Independent per preset (no radio semantics).
+  const togglePreset = (bundle) => {
+    const applied = isBundleApplied(bundle);
+    setWorking((prev) => {
+      const next = new Set(prev);
+      for (const k of bundle.permissionKeys) {
+        if (applied) next.delete(k);
+        else next.add(k);
+      }
+      return next;
+    });
+  };
+
+  const { permCount, objectCount } = useMemo(() => {
+    const held = new Set();
+    for (const t of typeKeys) {
+      for (const a of ACTIONS) {
+        const k = cellKey(t, a);
+        if (keyExists(k) && keyHeld(k, working)) held.add(k);
+      }
+    }
+    const types = new Set([...held].map((k) => k.split(':')[1]));
+    return { permCount: held.size, objectCount: types.size };
+  }, [working, typeKeys, cellKey, keyExists, keyHeld]);
+
+  // The applied presets (derived) — shown in the footer. Multiple can be applied.
+  const appliedPresetLabels = bundles.filter(isBundleApplied).map((b) => b.label);
+
+  const close = () => navigate(-1);
+
+  const save = async () => {
+    if (!roleUuid) {
+      setError('Select a role first.');
+      return;
+    }
+    setError('');
+    setSaving(true);
+    const toGrant = [...working].filter((k) => !keyHeld(k, loaded));
+    const toRevoke = [...loaded].filter((k) => !working.has(k));
+    let failed = 0;
+    for (const key of toGrant) {
+      const r = await identity.grantPermission(token, roleUuid, key);
+      if (!r.ok) failed += 1;
+    }
+    for (const key of toRevoke) {
+      const r = await identity.revokePermission(token, roleUuid, key);
+      if (!r.ok) failed += 1;
+    }
+    setSaving(false);
+    if (failed === 0) {
+      toast.success('Access saved');
+      onRefresh?.();
+      close();
+    } else {
+      setError('Some permissions could not be saved.');
+    }
+  };
+
+  const matchesSearch = (t) =>
+    !objectSearch.trim() || t.toLowerCase().includes(objectSearch.trim().toLowerCase());
+
+  const title = mode === 'edit' ? 'Edit permissions' : mode === 'duplicate' ? 'Duplicate access' : 'Assign access';
+  const description =
+    mode === 'edit'
+      ? 'Adjust the permissions granted to this role.'
+      : mode === 'duplicate'
+        ? 'Copy this permission set to another role.'
+        : 'Pick a role, apply a preset, then fine-tune the permissions.';
+
+  return (
+    <EntityFormModal
+      title={title}
+      description={description}
+      open
+      onClose={close}
+      onSubmit={save}
+      submitLabel="Save access"
+      busy={saving || loading}
+      error={error}
+      contentClassName="sm:max-w-4xl"
+    >
+      <div className="grid gap-4 md:grid-cols-[240px_1fr]">
+        {/* Left rail — presets */}
+        <div className="flex flex-col gap-2 md:border-r md:border-border md:pr-4">
+          <div className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Presets</div>
+          {bundles.length === 0 && <p className="text-xs text-muted-foreground">No presets available.</p>}
+          {bundles.map((b) => {
+            const isApplied = isBundleApplied(b);
+            return (
+              <button
+                key={b.key}
+                type="button"
+                onClick={() => togglePreset(b)}
+                className={`flex items-start gap-2.5 rounded-lg border p-3 text-left transition-colors ${
+                  isApplied ? 'border-primary bg-primary/5' : 'border-border hover:bg-muted/50'
+                }`}
+              >
+                {/* Checkbox-like: presets stack (multiple can be applied); this reflects +
+                    toggles whether ALL of the preset's keys are held. Non-interactive
+                    itself (the whole card is the button) — pointer-events-none. */}
+                <Checkbox checked={isApplied} className="pointer-events-none mt-0.5" tabIndex={-1} />
+                <div className="min-w-0">
+                  <span className="text-sm font-medium text-foreground">{b.label}</span>
+                  {b.description && (
+                    <p className="mt-0.5 text-xs text-muted-foreground">{b.description}</p>
+                  )}
+                </div>
+              </button>
+            );
+          })}
+          <p className="mt-1 text-xs text-muted-foreground">
+            Presets add their permissions. Tick more than one, then fine-tune below.
+          </p>
+        </div>
+
+        {/* Right pane — role + matrix */}
+        <div className="flex min-w-0 flex-col gap-3">
+          <div className="flex flex-col gap-1">
+            <label className="text-xs font-medium text-muted-foreground">Role</label>
+            <SearchableSelect
+              value={roleUuid || null}
+              selectedLabel={roleLabel}
+              onChange={onPickRole}
+              onLabelChange={(label) => setRoleLabel(label)}
+              fetchPage={fetchRoles}
+              placeholder="Select a role"
+              searchPlaceholder="Search roles"
+              disabled={mode === 'edit'}
+            />
+          </div>
+
+          <Input
+            value={objectSearch}
+            onChange={(e) => setObjectSearch(e.target.value)}
+            placeholder="Search objects"
+          />
+
+          <div className="flex max-h-[46vh] flex-col gap-2 overflow-y-auto pr-1">
+            {groups.map((group) => {
+              const visibleTypes = group.types.filter(matchesSearch);
+              if (visibleTypes.length === 0) return null;
+              const groupCells = group.types.flatMap((t) => ACTIONS.map((a) => cellKey(t, a))).filter(keyExists);
+              const heldCount = groupCells.filter((k) => keyHeld(k, working)).length;
+              return (
+                <CollapsibleGroup
+                  key={group.label}
+                  title={group.label}
+                  count={heldCount}
+                  total={groupCells.length}
+                  open={openGroups[group.label] ?? true}
+                  onToggle={() => setOpenGroups((p) => ({ ...p, [group.label]: !(p[group.label] ?? true) }))}
+                  right={
+                    <span
+                      role="button"
+                      tabIndex={0}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        toggleGroupAll(group);
+                      }}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          e.stopPropagation();
+                          toggleGroupAll(group);
+                        }
+                      }}
+                      className="text-xs text-primary hover:underline"
+                    >
+                      Toggle all
+                    </span>
+                  }
+                >
+                  <div className="overflow-x-auto">
+                    <table className="w-full text-sm">
+                      <thead>
+                        <tr className="text-left text-xs uppercase tracking-wide text-muted-foreground">
+                          <th className="py-1 pr-3 font-medium">Object</th>
+                          {ACTIONS.map((a) => (
+                            <th key={a} className="px-2 py-1 text-center font-medium capitalize">
+                              {a}
+                            </th>
+                          ))}
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {visibleTypes.map((t) => (
+                          <tr key={t} className="border-t border-border">
+                            <td className="py-1.5 pr-3 text-foreground">{t}</td>
+                            {ACTIONS.map((a) => {
+                              const key = cellKey(t, a);
+                              const exists = keyExists(key);
+                              const covered = keyHeld(key, working) && !working.has(key);
+                              return (
+                                <td key={a} className="px-2 py-1.5 text-center">
+                                  {exists ? (
+                                    <Checkbox
+                                      checked={keyHeld(key, working)}
+                                      disabled={covered}
+                                      title={covered ? 'granted via a wildcard' : labelOf[key]}
+                                      onCheckedChange={() => toggle(key)}
+                                    />
+                                  ) : (
+                                    <span className="text-muted-foreground/50">—</span>
+                                  )}
+                                </td>
+                              );
+                            })}
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                </CollapsibleGroup>
+              );
+            })}
+          </div>
+
+          <div className="text-sm text-muted-foreground">
+            <span className="font-medium text-foreground">
+              {permCount} permission{permCount === 1 ? '' : 's'}
+            </span>{' '}
+            across {objectCount} object{objectCount === 1 ? '' : 's'}
+            {appliedPresetLabels.length > 0 && (
+              <span> · {appliedPresetLabels.join(', ')}</span>
+            )}
+          </div>
+        </div>
+      </div>
+    </EntityFormModal>
+  );
+}

package/template/frontend/src/pages/access/AccessPage.jsx

@@ -0,0 +1,282 @@
+/**
+ * AccessPage — Roles & permissions. The listing of roles that have been granted access,
+ * on the shared server-driven `EntityList` datatable (URL-param paging / sort / debounced
+ * search / mobile reflow). Rich cells (avatar + sub-line, access chips, preset pill, ⋯
+ * actions) are supplied via column `render` fns — the shared component is untouched.
+ *
+ * Assign / Edit / Duplicate happen in routed child forms (/access/add, /access/edit/:uuid)
+ * rendered through the <Outlet/> — the routed-modal pattern used by /roles & /users.
+ *
+ * ⛔ No raw UUIDs: role shown by name (+ initial), grantor by name; roleUuid is a route
+ * param / API arg only.
+ */
+import { useCallback, useEffect, useState } from 'react';
+import { Outlet, useNavigate, useSearchParams } from 'react-router-dom';
+import { KeyRound } from 'lucide-react';
+import { toast } from 'sonner';
+import { useAuth } from '@/auth/AuthContext';
+import AppShell from '@/shell/AppShell';
+import PageHeader from '@/components/PageHeader';
+import EntityList, { EntityListControls, EntityListPager } from '@/components/EntityList';
+import ConfirmDialog from '@/components/ConfirmDialog';
+import { Badge } from '@/components/ui/badge';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import RoleActionsMenu from './RoleActionsMenu';
+
+const MAX_CHIPS = 4;
+const DEFAULT_LIMIT = 25;
+
+function initialOf(name) {
+  return (name || '?').trim().charAt(0).toUpperCase() || '?';
+}
+function shortDate(iso) {
+  if (!iso) return null;
+  const d = new Date(iso);
+  return Number.isNaN(d.getTime()) ? null : d.toLocaleDateString(undefined, {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+  });
+}
+
+/** Seed the datatable query from the URL so a reload / shared link restores the view. */
+function readQueryFromParams(sp) {
+  const page = Number.parseInt(sp.get('page') ?? '', 10);
+  const limit = Number.parseInt(sp.get('limit') ?? '', 10);
+  const sortOrder = (sp.get('sortOrder') || '').toLowerCase();
+  return {
+    page: Number.isFinite(page) && page >= 1 ? page : 1,
+    limit: Number.isFinite(limit) && limit >= 1 && limit <= 200 ? limit : DEFAULT_LIMIT,
+    search: sp.get('search') || '',
+    sortBy: sp.get('sortBy') || 'name',
+    sortOrder: sortOrder === 'asc' || sortOrder === 'desc' ? sortOrder : 'asc',
+  };
+}
+
+export default function AccessPage() {
+  const { tokens, identity } = useAuth();
+  const token = tokens?.accessToken;
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const [rows, setRows] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  const [query, setQuery] = useState(() => readQueryFromParams(searchParams));
+
+  // query → URL (replace, no history spam).
+  useEffect(() => {
+    const p = new URLSearchParams();
+    if (query.page > 1) p.set('page', String(query.page));
+    if (query.limit !== DEFAULT_LIMIT) p.set('limit', String(query.limit));
+    if (query.search) p.set('search', query.search);
+    if (query.sortBy) p.set('sortBy', query.sortBy);
+    if (query.sortOrder) p.set('sortOrder', query.sortOrder);
+    setSearchParams(p, { replace: true });
+  }, [query, setSearchParams]);
+
+  const [revokeTarget, setRevokeTarget] = useState(null);
+  const [revokeBusy, setRevokeBusy] = useState(false);
+
+  const load = useCallback(async () => {
+    if (!token) return;
+    setLoading(true);
+    const r = await identity.listGrantsSummary(token, query);
+    if (r.ok) {
+      setRows(r.rows || []);
+      setTotal(r.total || 0);
+      setError('');
+    } else {
+      setRows([]);
+      setTotal(0);
+      setError(r.error || 'Could not load the access listing.');
+    }
+    setLoading(false);
+  }, [identity, token, query]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const onSearchChange = useCallback((search) => setQuery((q) => ({ ...q, search, page: 1 })), []);
+  const onSortChange = useCallback(
+    (sortBy, sortOrder) => setQuery((q) => ({ ...q, sortBy, sortOrder })),
+    [],
+  );
+  const onPageChange = useCallback((page) => setQuery((q) => ({ ...q, page })), []);
+  const onLimitChange = useCallback((limit) => setQuery((q) => ({ ...q, limit, page: 1 })), []);
+
+  // Row menu actions.
+  const onEdit = useCallback((row) => navigate(`/access/edit/${row.roleUuid}`), [navigate]);
+  const onDuplicate = useCallback(
+    (row) => navigate(`/access/add?from=${row.roleUuid}`),
+    [navigate],
+  );
+
+  const onConfirmRevoke = async () => {
+    if (!revokeTarget) return;
+    setRevokeBusy(true);
+    const g = await identity.listRolePermissions(token, revokeTarget.roleUuid);
+    let failed = 0;
+    if (g.ok) {
+      for (const key of g.grants) {
+        const r = await identity.revokePermission(token, revokeTarget.roleUuid, key);
+        if (!r.ok) failed += 1;
+      }
+    } else {
+      failed += 1;
+    }
+    setRevokeBusy(false);
+    const name = revokeTarget.roleName;
+    setRevokeTarget(null);
+    if (failed === 0) toast.success(`All access revoked from ${name}`);
+    else toast.error(`Could not fully revoke access from ${name}`);
+    await load();
+  };
+
+  const columns = [
+    {
+      key: 'role',
+      label: 'Role',
+      sortable: true,
+      sortKey: 'name',
+      render: (row) => (
+        <div className="flex items-center gap-3">
+          <Avatar className="size-8 rounded-lg">
+            <AvatarFallback className="rounded-lg bg-primary/10 text-primary">
+              {initialOf(row.roleName)}
+            </AvatarFallback>
+          </Avatar>
+          <div className="min-w-0">
+            <div className="truncate text-sm font-medium text-foreground">{row.roleName}</div>
+            <div className="text-xs text-muted-foreground">
+              {row.permCount} permission{row.permCount === 1 ? '' : 's'} · {row.objectCount} object
+              {row.objectCount === 1 ? '' : 's'}
+            </div>
+          </div>
+        </div>
+      ),
+    },
+    {
+      key: 'access',
+      label: 'Access',
+      render: (row) => {
+        const extra = (row.chips?.length || 0) - MAX_CHIPS;
+        return (
+          <div className="flex flex-wrap gap-1">
+            {(row.chips || []).slice(0, MAX_CHIPS).map((c) => (
+              <Badge key={c} variant="secondary" className="font-normal">
+                {c}
+              </Badge>
+            ))}
+            {extra > 0 && <span className="text-xs text-muted-foreground">+{extra}</span>}
+          </div>
+        );
+      },
+    },
+    {
+      key: 'preset',
+      label: 'Preset',
+      render: (row) =>
+        row.preset ? (
+          <Badge variant="info" className="font-normal">
+            {row.preset}
+          </Badge>
+        ) : (
+          <span className="text-xs text-muted-foreground">Custom</span>
+        ),
+    },
+    {
+      key: 'modified',
+      label: 'Last modified',
+      sortable: true,
+      sortKey: 'grantedAt',
+      render: (row) => {
+        const d = shortDate(row.grantedAt);
+        if (!d) return <span className="text-xs text-muted-foreground">—</span>;
+        return (
+          <div className="text-sm text-foreground">
+            {d}
+            {row.grantedByName && (
+              <div className="text-xs text-muted-foreground">by {row.grantedByName}</div>
+            )}
+          </div>
+        );
+      },
+    },
+    {
+      // Actions as a normal column (not EntityList's built-in Edit/Delete slot), so we can
+      // render the ⋯ menu (Edit / Duplicate / Revoke all). onEdit/onDelete stay UNSET.
+      key: 'actions',
+      label: '',
+      render: (row) => (
+        <div className="flex justify-end">
+          <RoleActionsMenu
+            role={row}
+            onEdit={onEdit}
+            onDuplicate={onDuplicate}
+            onRevokeAll={setRevokeTarget}
+          />
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <AppShell section="Identity" title="Access">
+      <div className="p-4">
+        <PageHeader
+          section="Identity"
+          title="Roles & permissions"
+          icon={KeyRound}
+          actions={
+            <EntityListControls
+              search={query.search}
+              onSearchChange={onSearchChange}
+              searchPlaceholder="Search roles…"
+              addLabel="Assign access"
+              onAdd={() => navigate('/access/add')}
+            />
+          }
+        />
+
+        <EntityList
+          columns={columns}
+          rows={rows}
+          search={query.search}
+          sortBy={query.sortBy}
+          sortOrder={query.sortOrder}
+          loading={loading}
+          error={error}
+          emptyLabel="No roles have access yet. Assign access to get started."
+          onSortChange={onSortChange}
+        />
+
+        <EntityListPager
+          total={total}
+          page={query.page}
+          limit={query.limit}
+          loading={loading}
+          error={error}
+          onPageChange={onPageChange}
+          onLimitChange={onLimitChange}
+        />
+      </div>
+
+      <Outlet context={{ onRefresh: load }} />
+
+      <ConfirmDialog
+        open={!!revokeTarget}
+        title={revokeTarget ? `Revoke all access from “${revokeTarget.roleName}”?` : 'Revoke all access?'}
+        message="This removes every permission granted to the role. It will no longer appear in this list. This cannot be undone."
+        confirmLabel="Revoke all"
+        destructive
+        busy={revokeBusy}
+        onConfirm={onConfirmRevoke}
+        onCancel={() => setRevokeTarget(null)}
+      />
+    </AppShell>
+  );
+}