Add paginated users/roles, user status, frontend permissions, profile pictures, identifier file storage

- Users page: paginated, searchable, sortable with inline roles (no N+1)
- Roles page: paginated, searchable, sortable + /roles/all for dropdowns
- User is_active field with migration, PATCH toggle, auth check (disabled=401)
- Frontend permission checks: auth store loads permissions, sidebar/buttons conditional
- Profile pictures via file storage for users and members, avatar component
- Identifier images use file storage API instead of base64
- Fix TypeScript errors across admin UI
- 64 API tests passing (10 new)

packages/admin/src/routes/_authenticated/roles/$roleId.tsx

@@ -100,7 +100,7 @@ function RoleDetailPage() {
   return (
     <div className="space-y-6 max-w-2xl">
       <div className="flex items-center gap-3">
-        <Button variant="ghost" size="sm" onClick={() => navigate({ to: '/roles' })}>
+        <Button variant="ghost" size="sm" onClick={() => navigate({ to: '/roles', search: {} as any })}>
           <ArrowLeft className="h-4 w-4" />
         </Button>
         <div>
@@ -177,7 +177,7 @@ function RoleDetailPage() {
         <Button onClick={handleSave} disabled={updateMutation.isPending}>
           {updateMutation.isPending ? 'Saving...' : 'Save Changes'}
         </Button>
-        <Button variant="secondary" onClick={() => navigate({ to: '/roles' })}>
+        <Button variant="secondary" onClick={() => navigate({ to: '/roles', search: {} as any })}>
           Cancel
         </Button>
       </div>

packages/admin/src/routes/_authenticated/roles/index.tsx

@@ -1,9 +1,12 @@
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { roleListOptions, rbacKeys, rbacMutations } from '@/api/rbac'
+import { useState } from 'react'
+import { rolePageOptions, rbacKeys, rbacMutations } from '@/api/rbac'
+import { usePagination } from '@/hooks/use-pagination'
+import { DataTable, type Column } from '@/components/shared/data-table'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Input } from '@/components/ui/input'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -11,99 +14,142 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { Plus, MoreVertical, Pencil, Trash2, Shield } from 'lucide-react'
+import { Plus, MoreVertical, Pencil, Trash2, Shield, Search } from 'lucide-react'
 import { toast } from 'sonner'
+import { useAuthStore } from '@/stores/auth.store'
+import type { Role } from '@/types/rbac'
 
 export const Route = createFileRoute('/_authenticated/roles/')({
+  validateSearch: (search: Record<string, unknown>) => ({
+    page: Number(search.page) || 1,
+    limit: Number(search.limit) || 25,
+    q: (search.q as string) || undefined,
+    sort: (search.sort as string) || undefined,
+    order: (search.order as 'asc' | 'desc') || 'asc',
+  }),
   component: RolesListPage,
 })
 
 function RolesListPage() {
   const navigate = useNavigate()
   const queryClient = useQueryClient()
-  const { data, isLoading } = useQuery(roleListOptions())
+  const hasPermission = useAuthStore((s) => s.hasPermission)
+  const { params, setPage, setSearch, setSort } = usePagination()
+  const [searchInput, setSearchInput] = useState(params.q ?? '')
+
+  const { data, isLoading } = useQuery(rolePageOptions(params))
 
   const deleteMutation = useMutation({
     mutationFn: rbacMutations.deleteRole,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: rbacKeys.roles })
+      queryClient.invalidateQueries({ queryKey: ['roles', 'list'] })
       toast.success('Role deleted')
     },
     onError: (err) => toast.error(err.message),
   })
 
-  const roles = data?.data ?? []
+  function handleSearchSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setSearch(searchInput)
+  }
+
+  const roleColumns: Column<Role>[] = [
+    {
+      key: 'name',
+      header: 'Name',
+      sortable: true,
+      render: (row) => (
+        <div className="flex items-center gap-2">
+          <Shield className="h-4 w-4 text-muted-foreground" />
+          <span className="font-medium">{row.name}</span>
+        </div>
+      ),
+    },
+    {
+      key: 'slug',
+      header: 'Slug',
+      sortable: true,
+      render: (row) => <span className="font-mono text-sm text-muted-foreground">{row.slug}</span>,
+    },
+    {
+      key: 'description',
+      header: 'Description',
+      render: (row) => <span className="text-sm text-muted-foreground">{row.description ?? '-'}</span>,
+    },
+    {
+      key: 'type',
+      header: 'Type',
+      render: (row) =>
+        row.isSystem ? <Badge variant="secondary">System</Badge> : <Badge>Custom</Badge>,
+    },
+    {
+      key: 'actions',
+      header: '',
+      render: (row) => (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+              <MoreVertical className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => navigate({ to: '/roles/$roleId', params: { roleId: row.id } })}>
+              <Pencil className="mr-2 h-4 w-4" />
+              Edit Permissions
+            </DropdownMenuItem>
+            {!row.isSystem && hasPermission('users.admin') && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem className="text-destructive" onClick={() => deleteMutation.mutate(row.id)}>
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  Delete
+                </DropdownMenuItem>
+              </>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
+    },
+  ]
 
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold">Roles</h1>
-        <Button onClick={() => navigate({ to: '/roles/new' })}>
-          <Plus className="mr-2 h-4 w-4" />
-          New Role
-        </Button>
+        {hasPermission('users.admin') && (
+          <Button onClick={() => navigate({ to: '/roles/new' })}>
+            <Plus className="mr-2 h-4 w-4" />
+            New Role
+          </Button>
+        )}
       </div>
 
-      {isLoading ? (
-        <p className="text-muted-foreground">Loading...</p>
-      ) : roles.length === 0 ? (
-        <p className="text-muted-foreground py-8 text-center">No roles found</p>
-      ) : (
-        <div className="rounded-md border">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Name</TableHead>
-                <TableHead>Slug</TableHead>
-                <TableHead>Description</TableHead>
-                <TableHead>Type</TableHead>
-                <TableHead className="w-12"></TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {roles.map((role) => (
-                <TableRow key={role.id}>
-                  <TableCell className="font-medium">
-                    <div className="flex items-center gap-2">
-                      <Shield className="h-4 w-4 text-muted-foreground" />
-                      {role.name}
-                    </div>
-                  </TableCell>
-                  <TableCell className="font-mono text-sm text-muted-foreground">{role.slug}</TableCell>
-                  <TableCell className="text-sm text-muted-foreground">{role.description ?? '-'}</TableCell>
-                  <TableCell>
-                    {role.isSystem ? <Badge variant="secondary">System</Badge> : <Badge>Custom</Badge>}
-                  </TableCell>
-                  <TableCell>
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
-                          <MoreVertical className="h-4 w-4" />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem onClick={() => navigate({ to: '/roles/$roleId', params: { roleId: role.id } })}>
-                          <Pencil className="mr-2 h-4 w-4" />
-                          Edit Permissions
-                        </DropdownMenuItem>
-                        {!role.isSystem && (
-                          <>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem className="text-destructive" onClick={() => deleteMutation.mutate(role.id)}>
-                              <Trash2 className="mr-2 h-4 w-4" />
-                              Delete
-                            </DropdownMenuItem>
-                          </>
-                        )}
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
+      <form onSubmit={handleSearchSubmit} className="flex gap-2 max-w-sm">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Search roles..."
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            className="pl-9"
+          />
         </div>
-      )}
+        <Button type="submit" variant="secondary">Search</Button>
+      </form>
+
+      <DataTable
+        columns={roleColumns}
+        data={data?.data ?? []}
+        loading={isLoading}
+        page={params.page}
+        totalPages={data?.pagination?.totalPages ?? 1}
+        total={data?.pagination?.total ?? 0}
+        sort={params.sort}
+        order={params.order}
+        onPageChange={setPage}
+        onSort={setSort}
+      />
     </div>
   )
 }

packages/admin/src/routes/_authenticated/roles/new.tsx

@@ -29,7 +29,7 @@ function NewRolePage() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: rbacKeys.roles })
       toast.success('Role created')
-      navigate({ to: '/roles' })
+      navigate({ to: '/roles', search: {} as any })
     },
     onError: (err) => toast.error(err.message),
   })
@@ -153,7 +153,7 @@ function NewRolePage() {
         <Button onClick={handleSubmit} disabled={mutation.isPending}>
           {mutation.isPending ? 'Creating...' : 'Create Role'}
         </Button>
-        <Button variant="secondary" onClick={() => navigate({ to: '/roles' })}>
+        <Button variant="secondary" onClick={() => navigate({ to: '/roles', search: {} as any })}>
           Cancel
         </Button>
       </div>