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/accounts/$accountId/members.tsx

@@ -5,8 +5,11 @@ import { memberListOptions, memberMutations, memberKeys } from '@/api/members'
 import { identifierListOptions, identifierMutations, identifierKeys } from '@/api/identifiers'
 import { MemberForm } from '@/components/accounts/member-form'
 import { IdentifierForm } from '@/components/accounts/identifier-form'
+import { usePagination } from '@/hooks/use-pagination'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
+import { Input } from '@/components/ui/input'
+import { Skeleton } from '@/components/ui/skeleton'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
 import {
   DropdownMenu,
@@ -16,11 +19,17 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import { Plus, Trash2, CreditCard, ChevronDown, ChevronRight, MoreVertical, Pencil } from 'lucide-react'
+import { Plus, Trash2, CreditCard, ChevronDown, ChevronRight, ChevronLeft, MoreVertical, Pencil, Search, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react'
 import { toast } from 'sonner'
-import type { Member } from '@/types/account'
 
 export const Route = createFileRoute('/_authenticated/accounts/$accountId/members')({
+  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: MembersTab,
 })
 
@@ -66,7 +75,7 @@ function MemberIdentifiers({ memberId }: { memberId: string }) {
           </DialogTrigger>
           <DialogContent>
             <DialogHeader><DialogTitle>Add Identity Document</DialogTitle></DialogHeader>
-            <IdentifierForm memberId={memberId} onSubmit={createMutation.mutate} loading={createMutation.isPending} />
+            <IdentifierForm memberId={memberId} onSubmit={(data) => createMutation.mutate(data)} loading={createMutation.isPending} />
           </DialogContent>
         </Dialog>
       </div>
@@ -96,7 +105,7 @@ function MemberIdentifiers({ memberId }: { memberId: string }) {
                 </div>
               </div>
               <div className="flex items-center gap-1">
-                {(id.imageFront || id.imageBack) && (
+                {(id.imageFrontFileId || id.imageBackFileId) && (
                   <Badge variant="outline" className="text-xs">Has images</Badge>
                 )}
                 <Button variant="ghost" size="sm" onClick={() => deleteMutation.mutate(id.id)}>
@@ -111,14 +120,44 @@ function MemberIdentifiers({ memberId }: { memberId: string }) {
   )
 }
 
+function SortableHeader({ label, sortKey, currentSort, currentOrder, onSort }: {
+  label: string
+  sortKey: string
+  currentSort?: string
+  currentOrder?: 'asc' | 'desc'
+  onSort: (sort: string, order: 'asc' | 'desc') => void
+}) {
+  function handleClick() {
+    if (currentSort === sortKey) {
+      onSort(sortKey, currentOrder === 'asc' ? 'desc' : 'asc')
+    } else {
+      onSort(sortKey, 'asc')
+    }
+  }
+
+  const Icon = currentSort !== sortKey ? ArrowUpDown
+    : currentOrder === 'asc' ? ArrowUp : ArrowDown
+
+  return (
+    <TableHead className="cursor-pointer select-none" onClick={handleClick}>
+      <span className="flex items-center">
+        {label}
+        <Icon className={`ml-1 h-3 w-3 ${currentSort !== sortKey ? 'opacity-40' : ''}`} />
+      </span>
+    </TableHead>
+  )
+}
+
 function MembersTab() {
   const { accountId } = useParams({ from: '/_authenticated/accounts/$accountId/members' })
   const navigate = useNavigate()
   const queryClient = useQueryClient()
   const [dialogOpen, setDialogOpen] = useState(false)
   const [expandedMember, setExpandedMember] = useState<string | null>(null)
+  const { params, setPage, setSearch, setSort } = usePagination()
+  const [searchInput, setSearchInput] = useState(params.q ?? '')
 
-  const { data, isLoading } = useQuery(memberListOptions(accountId, { page: 1, limit: 100, order: 'asc' }))
+  const { data, isLoading } = useQuery(memberListOptions(accountId, params))
 
   const createMutation = useMutation({
     mutationFn: (data: Record<string, unknown>) => memberMutations.create(accountId, data),
@@ -139,7 +178,24 @@ function MembersTab() {
     onError: (err) => toast.error(err.message),
   })
 
+  function handleSearchSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setSearch(searchInput)
+  }
+
   const members = data?.data ?? []
+  const totalPages = data?.pagination.totalPages ?? 1
+  const total = data?.pagination.total ?? 0
+
+  if (isLoading) {
+    return (
+      <div className="space-y-3">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <Skeleton key={i} className="h-12 w-full" />
+        ))}
+      </div>
+    )
+  }
 
   return (
     <div className="space-y-4">
@@ -156,89 +212,131 @@ function MembersTab() {
         </Dialog>
       </div>
 
-      {isLoading ? (
-        <p className="text-muted-foreground">Loading...</p>
-      ) : members.length === 0 ? (
-        <p className="text-muted-foreground py-8 text-center">No members yet</p>
-      ) : (
+      <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 members..."
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            className="pl-9"
+          />
+        </div>
+        <Button type="submit" variant="secondary">Search</Button>
+      </form>
+
+      <div className="space-y-4">
         <div className="rounded-md border">
           <Table>
             <TableHeader>
               <TableRow>
                 <TableHead className="w-8"></TableHead>
                 <TableHead>#</TableHead>
-                <TableHead>Name</TableHead>
-                <TableHead>Email</TableHead>
+                <SortableHeader label="Name" sortKey="last_name" currentSort={params.sort} currentOrder={params.order} onSort={setSort} />
+                <SortableHeader label="Email" sortKey="email" currentSort={params.sort} currentOrder={params.order} onSort={setSort} />
                 <TableHead>Phone</TableHead>
                 <TableHead>Status</TableHead>
                 <TableHead className="w-12"></TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
-              {members.map((m) => (
-                <>
-                  <TableRow key={m.id}>
-                    <TableCell>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        className="h-6 w-6 p-0"
-                        onClick={() => setExpandedMember(expandedMember === m.id ? null : m.id)}
-                        title="Show IDs"
-                      >
-                        {expandedMember === m.id
-                          ? <ChevronDown className="h-3 w-3" />
-                          : <ChevronRight className="h-3 w-3" />}
-                      </Button>
-                    </TableCell>
-                    <TableCell className="font-mono text-sm text-muted-foreground">{m.memberNumber ?? '-'}</TableCell>
-                    <TableCell className="font-medium">{m.firstName} {m.lastName}</TableCell>
-                    <TableCell>{m.email ?? '-'}</TableCell>
-                    <TableCell>{m.phone ?? '-'}</TableCell>
-                    <TableCell>
-                      {m.isMinor ? <Badge variant="secondary">Minor</Badge> : <Badge>Adult</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: '/members/$memberId',
-                            params: { memberId: m.id },
-                          })}>
-                            <Pencil className="mr-2 h-4 w-4" />
-                            Edit
-                          </DropdownMenuItem>
-                          <DropdownMenuItem onClick={() => setExpandedMember(expandedMember === m.id ? null : m.id)}>
-                            <CreditCard className="mr-2 h-4 w-4" />
-                            {expandedMember === m.id ? 'Hide IDs' : 'View IDs'}
-                          </DropdownMenuItem>
-                          <DropdownMenuSeparator />
-                          <DropdownMenuItem className="text-destructive" onClick={() => deleteMutation.mutate(m.id)}>
-                            <Trash2 className="mr-2 h-4 w-4" />
-                            Delete
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    </TableCell>
-                  </TableRow>
-                  {expandedMember === m.id && (
-                    <TableRow key={`${m.id}-ids`}>
-                      <TableCell colSpan={7} className="p-0">
-                        <MemberIdentifiers memberId={m.id} />
+              {members.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
+                    No members found
+                  </TableCell>
+                </TableRow>
+              ) : (
+                members.map((m) => (
+                  <>
+                    <TableRow key={m.id}>
+                      <TableCell>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-6 w-6 p-0"
+                          onClick={() => setExpandedMember(expandedMember === m.id ? null : m.id)}
+                          title="Show IDs"
+                        >
+                          {expandedMember === m.id
+                            ? <ChevronDown className="h-3 w-3" />
+                            : <ChevronRight className="h-3 w-3" />}
+                        </Button>
+                      </TableCell>
+                      <TableCell className="font-mono text-sm text-muted-foreground">{m.memberNumber ?? '-'}</TableCell>
+                      <TableCell className="font-medium">{m.firstName} {m.lastName}</TableCell>
+                      <TableCell>{m.email ?? '-'}</TableCell>
+                      <TableCell>{m.phone ?? '-'}</TableCell>
+                      <TableCell>
+                        {m.isMinor ? <Badge variant="secondary">Minor</Badge> : <Badge>Adult</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: '/members/$memberId',
+                              params: { memberId: m.id },
+                            })}>
+                              <Pencil className="mr-2 h-4 w-4" />
+                              Edit
+                            </DropdownMenuItem>
+                            <DropdownMenuItem onClick={() => setExpandedMember(expandedMember === m.id ? null : m.id)}>
+                              <CreditCard className="mr-2 h-4 w-4" />
+                              {expandedMember === m.id ? 'Hide IDs' : 'View IDs'}
+                            </DropdownMenuItem>
+                            <DropdownMenuSeparator />
+                            <DropdownMenuItem className="text-destructive" onClick={() => deleteMutation.mutate(m.id)}>
+                              <Trash2 className="mr-2 h-4 w-4" />
+                              Delete
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
                       </TableCell>
                     </TableRow>
-                  )}
-                </>
-              ))}
+                    {expandedMember === m.id && (
+                      <TableRow key={`${m.id}-ids`}>
+                        <TableCell colSpan={7} className="p-0">
+                          <MemberIdentifiers memberId={m.id} />
+                        </TableCell>
+                      </TableRow>
+                    )}
+                  </>
+                ))
+              )}
             </TableBody>
           </Table>
         </div>
-      )}
+
+        <div className="flex items-center justify-between text-sm text-muted-foreground">
+          <span>{total} total</span>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={params.page <= 1}
+              onClick={() => setPage(params.page - 1)}
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <span>
+              Page {params.page} of {totalPages}
+            </span>
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={params.page >= totalPages}
+              onClick={() => setPage(params.page + 1)}
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </div>
     </div>
   )
 }