fix: correct page directory casing for case-sensitive filesystems

Rename admin/ → Admin/ and swagger/ → Swagger/ to match router imports. Windows is case-insensitive so the mismatch was invisible locally. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-19 17:43:42 +01:00
parent 9613bddc60
commit 045d9ea890
6 changed files with 0 additions and 0 deletions
--- a/ui/src/pages/Admin/RbacPage.tsx
+++ b/ui/src/pages/Admin/RbacPage.tsx
@@ -0,0 +1,178 @@
+import { useState, useMemo } from 'react';
+import {
+  Tabs, DataTable, Badge, Avatar, Button, Input, Modal, FormField,
+  Select, AlertDialog, StatCard, Spinner,
+} from '@cameleer/design-system';
+import type { Column } from '@cameleer/design-system';
+import {
+  useUsers, useUser, useGroups, useGroup, useRoles, useRole, useRbacStats,
+  useCreateUser, useUpdateUser, useDeleteUser,
+  useAssignRoleToUser, useRemoveRoleFromUser,
+  useAddUserToGroup, useRemoveUserFromGroup,
+  useCreateGroup, useUpdateGroup, useDeleteGroup,
+  useCreateRole, useUpdateRole, useDeleteRole,
+  useAssignRoleToGroup, useRemoveRoleFromGroup,
+} from '../../api/queries/admin/rbac';
+
+export default function RbacPage() {
+  const [tab, setTab] = useState('users');
+  const { data: stats } = useRbacStats();
+
+  return (
+    <div>
+      <h2 style={{ marginBottom: '1rem' }}>RBAC Management</h2>
+
+      <div style={{ display: 'flex', gap: '1rem', marginBottom: '1.5rem', flexWrap: 'wrap' }}>
+        <StatCard label="Users" value={stats?.userCount ?? 0} />
+        <StatCard label="Groups" value={stats?.groupCount ?? 0} />
+        <StatCard label="Roles" value={stats?.roleCount ?? 0} />
+      </div>
+
+      <Tabs
+        tabs={[
+          { label: 'Users', value: 'users', count: stats?.userCount },
+          { label: 'Groups', value: 'groups', count: stats?.groupCount },
+          { label: 'Roles', value: 'roles', count: stats?.roleCount },
+        ]}
+        active={tab}
+        onChange={setTab}
+      />
+
+      <div style={{ marginTop: '1rem' }}>
+        {tab === 'users' && <UsersTab />}
+        {tab === 'groups' && <GroupsTab />}
+        {tab === 'roles' && <RolesTab />}
+      </div>
+    </div>
+  );
+}
+
+function UsersTab() {
+  const { data: users, isLoading } = useUsers();
+  const [createOpen, setCreateOpen] = useState(false);
+  const [deleteId, setDeleteId] = useState<string | null>(null);
+  const [form, setForm] = useState({ username: '', displayName: '', email: '', password: '' });
+  const createUser = useCreateUser();
+  const deleteUser = useDeleteUser();
+
+  const columns: Column<any>[] = [
+    { key: 'userId', header: 'Username', render: (v) => <span style={{ fontWeight: 500 }}>{String(v)}</span> },
+    { key: 'displayName', header: 'Display Name' },
+    { key: 'email', header: 'Email' },
+    { key: 'provider', header: 'Provider', render: (v) => <Badge label={String(v)} /> },
+    {
+      key: 'effectiveRoles', header: 'Roles',
+      render: (v) => (
+        <div style={{ display: 'flex', gap: '0.25rem', flexWrap: 'wrap' }}>
+          {(v as any[] || []).map((r: any) => <Badge key={r.id || r.name} label={r.name} color="auto" />)}
+        </div>
+      ),
+    },
+  ];
+
+  if (isLoading) return <Spinner />;
+
+  const rows = (users || []).map((u: any) => ({ ...u, id: u.userId }));
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '1rem' }}>
+        <Button variant="primary" onClick={() => setCreateOpen(true)}>Create User</Button>
+      </div>
+      <DataTable columns={columns} data={rows} pageSize={20} />
+
+      <Modal open={createOpen} onClose={() => setCreateOpen(false)} title="Create User">
+        <div style={{ display: 'grid', gap: '1rem', padding: '1rem' }}>
+          <FormField label="Username" required><Input value={form.username} onChange={(e) => setForm({ ...form, username: e.target.value })} /></FormField>
+          <FormField label="Display Name"><Input value={form.displayName} onChange={(e) => setForm({ ...form, displayName: e.target.value })} /></FormField>
+          <FormField label="Email"><Input value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} /></FormField>
+          <FormField label="Password"><Input type="password" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} /></FormField>
+          <Button variant="primary" onClick={() => { createUser.mutate(form); setCreateOpen(false); setForm({ username: '', displayName: '', email: '', password: '' }); }}>Create</Button>
+        </div>
+      </Modal>
+
+      <AlertDialog
+        open={!!deleteId}
+        onClose={() => setDeleteId(null)}
+        onConfirm={() => { if (deleteId) deleteUser.mutate(deleteId); setDeleteId(null); }}
+        title="Delete User"
+        description={`Are you sure you want to delete user "${deleteId}"?`}
+        confirmLabel="Delete"
+        variant="danger"
+      />
+    </div>
+  );
+}
+
+function GroupsTab() {
+  const { data: groups, isLoading } = useGroups();
+  const [createOpen, setCreateOpen] = useState(false);
+  const [form, setForm] = useState({ name: '' });
+  const createGroup = useCreateGroup();
+
+  const columns: Column<any>[] = [
+    { key: 'name', header: 'Name', render: (v) => <span style={{ fontWeight: 500 }}>{String(v)}</span> },
+    { key: 'members', header: 'Members', render: (v) => String((v as any[])?.length ?? 0) },
+    {
+      key: 'effectiveRoles', header: 'Roles',
+      render: (v) => (
+        <div style={{ display: 'flex', gap: '0.25rem', flexWrap: 'wrap' }}>
+          {(v as any[] || []).map((r: any) => <Badge key={r.id || r.name} label={r.name} color="auto" />)}
+        </div>
+      ),
+    },
+  ];
+
+  if (isLoading) return <Spinner />;
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '1rem' }}>
+        <Button variant="primary" onClick={() => setCreateOpen(true)}>Create Group</Button>
+      </div>
+      <DataTable columns={columns} data={groups || []} pageSize={20} />
+
+      <Modal open={createOpen} onClose={() => setCreateOpen(false)} title="Create Group">
+        <div style={{ display: 'grid', gap: '1rem', padding: '1rem' }}>
+          <FormField label="Name" required><Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /></FormField>
+          <Button variant="primary" onClick={() => { createGroup.mutate(form); setCreateOpen(false); setForm({ name: '' }); }}>Create</Button>
+        </div>
+      </Modal>
+    </div>
+  );
+}
+
+function RolesTab() {
+  const { data: roles, isLoading } = useRoles();
+  const [createOpen, setCreateOpen] = useState(false);
+  const [form, setForm] = useState({ name: '', description: '', scope: '' });
+  const createRole = useCreateRole();
+
+  const columns: Column<any>[] = [
+    { key: 'name', header: 'Name', render: (v) => <span style={{ fontWeight: 500 }}>{String(v)}</span> },
+    { key: 'description', header: 'Description' },
+    { key: 'scope', header: 'Scope', render: (v) => v ? <Badge label={String(v)} /> : null },
+    { key: 'system', header: 'System', render: (v) => v ? <Badge label="System" color="warning" /> : null },
+    { key: 'effectivePrincipals', header: 'Users', render: (v) => String((v as any[])?.length ?? 0) },
+  ];
+
+  if (isLoading) return <Spinner />;
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '1rem' }}>
+        <Button variant="primary" onClick={() => setCreateOpen(true)}>Create Role</Button>
+      </div>
+      <DataTable columns={columns} data={roles || []} pageSize={20} />
+
+      <Modal open={createOpen} onClose={() => setCreateOpen(false)} title="Create Role">
+        <div style={{ display: 'grid', gap: '1rem', padding: '1rem' }}>
+          <FormField label="Name" required><Input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /></FormField>
+          <FormField label="Description"><Input value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} /></FormField>
+          <FormField label="Scope"><Input value={form.scope} onChange={(e) => setForm({ ...form, scope: e.target.value })} /></FormField>
+          <Button variant="primary" onClick={() => { createRole.mutate(form); setCreateOpen(false); setForm({ name: '', description: '', scope: '' }); }}>Create</Button>
+        </div>
+      </Modal>
+    </div>
+  );
+}