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>
   )
 }

packages/admin/src/routes/_authenticated/accounts/$accountId/payment-methods.tsx

@@ -3,14 +3,24 @@ import { createFileRoute, useParams } from '@tanstack/react-router'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { paymentMethodListOptions, paymentMethodMutations, paymentMethodKeys } from '@/api/payment-methods'
 import { PaymentMethodForm } from '@/components/accounts/payment-method-form'
+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 { Input } from '@/components/ui/input'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import { Plus, Trash2, Star } from 'lucide-react'
+import { Plus, Trash2, Star, Search } from 'lucide-react'
 import { toast } from 'sonner'
+import type { PaymentMethod } from '@/types/account'
 
 export const Route = createFileRoute('/_authenticated/accounts/$accountId/payment-methods')({
+  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: PaymentMethodsTab,
 })
 
@@ -18,8 +28,10 @@ function PaymentMethodsTab() {
   const { accountId } = useParams({ from: '/_authenticated/accounts/$accountId/payment-methods' })
   const queryClient = useQueryClient()
   const [dialogOpen, setDialogOpen] = useState(false)
+  const { params, setPage, setSearch, setSort } = usePagination()
+  const [searchInput, setSearchInput] = useState(params.q ?? '')
 
-  const { data, isLoading } = useQuery(paymentMethodListOptions(accountId))
+  const { data, isLoading } = useQuery(paymentMethodListOptions(accountId, params))
 
   const createMutation = useMutation({
     mutationFn: (data: Record<string, unknown>) => paymentMethodMutations.create(accountId, data),
@@ -49,7 +61,56 @@ function PaymentMethodsTab() {
     onError: (err) => toast.error(err.message),
   })
 
-  const methods = data?.data ?? []
+  function handleSearchSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setSearch(searchInput)
+  }
+
+  const columns: Column<PaymentMethod>[] = [
+    {
+      key: 'card_brand',
+      header: 'Card',
+      sortable: true,
+      render: (m) => <span className="font-medium">{m.cardBrand ?? 'Card'} {m.lastFour ? `****${m.lastFour}` : ''}</span>,
+    },
+    {
+      key: 'processor',
+      header: 'Processor',
+      sortable: true,
+      render: (m) => <Badge variant="outline">{m.processor}</Badge>,
+    },
+    {
+      key: 'expires',
+      header: 'Expires',
+      render: (m) => <>{m.expMonth && m.expYear ? `${m.expMonth}/${m.expYear}` : '-'}</>,
+    },
+    {
+      key: 'status',
+      header: 'Status',
+      render: (m) => (
+        <div className="flex gap-1">
+          {m.isDefault && <Badge>Default</Badge>}
+          {m.requiresUpdate && <Badge variant="destructive">Needs Update</Badge>}
+        </div>
+      ),
+    },
+    {
+      key: 'actions',
+      header: 'Actions',
+      render: (m) => (
+        <div className="flex gap-1">
+          {!m.isDefault && (
+            <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); setDefaultMutation.mutate(m.id) }}>
+              <Star className="h-4 w-4" />
+            </Button>
+          )}
+          <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); deleteMutation.mutate(m.id) }}>
+            <Trash2 className="h-4 w-4 text-destructive" />
+          </Button>
+        </div>
+      ),
+    },
+  ]
 
   return (
     <div className="space-y-4">
@@ -66,52 +127,31 @@ function PaymentMethodsTab() {
         </Dialog>
       </div>
 
-      {isLoading ? (
-        <p className="text-muted-foreground">Loading...</p>
-      ) : methods.length === 0 ? (
-        <p className="text-muted-foreground py-8 text-center">No payment methods</p>
-      ) : (
-        <div className="rounded-md border">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Card</TableHead>
-                <TableHead>Processor</TableHead>
-                <TableHead>Expires</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead className="w-32">Actions</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {methods.map((m) => (
-                <TableRow key={m.id}>
-                  <TableCell className="font-medium">
-                    {m.cardBrand ?? 'Card'} {m.lastFour ? `****${m.lastFour}` : ''}
-                  </TableCell>
-                  <TableCell><Badge variant="outline">{m.processor}</Badge></TableCell>
-                  <TableCell>{m.expMonth && m.expYear ? `${m.expMonth}/${m.expYear}` : '-'}</TableCell>
-                  <TableCell>
-                    {m.isDefault && <Badge>Default</Badge>}
-                    {m.requiresUpdate && <Badge variant="destructive">Needs Update</Badge>}
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex gap-1">
-                      {!m.isDefault && (
-                        <Button variant="ghost" size="sm" onClick={() => setDefaultMutation.mutate(m.id)}>
-                          <Star className="h-4 w-4" />
-                        </Button>
-                      )}
-                      <Button variant="ghost" size="sm" onClick={() => deleteMutation.mutate(m.id)}>
-                        <Trash2 className="h-4 w-4 text-destructive" />
-                      </Button>
-                    </div>
-                  </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 payment methods..."
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            className="pl-9"
+          />
         </div>
-      )}
+        <Button type="submit" variant="secondary">Search</Button>
+      </form>
+
+      <DataTable
+        columns={columns}
+        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/accounts/$accountId/processor-links.tsx

@@ -3,14 +3,24 @@ import { createFileRoute, useParams } from '@tanstack/react-router'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { processorLinkListOptions, processorLinkMutations, processorLinkKeys } from '@/api/processor-links'
 import { ProcessorLinkForm } from '@/components/accounts/processor-link-form'
+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 { Input } from '@/components/ui/input'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import { Plus, Trash2 } from 'lucide-react'
+import { Plus, Trash2, Search } from 'lucide-react'
 import { toast } from 'sonner'
+import type { ProcessorLink } from '@/types/account'
 
 export const Route = createFileRoute('/_authenticated/accounts/$accountId/processor-links')({
+  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: ProcessorLinksTab,
 })
 
@@ -18,8 +28,10 @@ function ProcessorLinksTab() {
   const { accountId } = useParams({ from: '/_authenticated/accounts/$accountId/processor-links' })
   const queryClient = useQueryClient()
   const [dialogOpen, setDialogOpen] = useState(false)
+  const { params, setPage, setSearch, setSort } = usePagination()
+  const [searchInput, setSearchInput] = useState(params.q ?? '')
 
-  const { data, isLoading } = useQuery(processorLinkListOptions(accountId))
+  const { data, isLoading } = useQuery(processorLinkListOptions(accountId, params))
 
   const createMutation = useMutation({
     mutationFn: (data: Record<string, unknown>) => processorLinkMutations.create(accountId, data),
@@ -40,7 +52,38 @@ function ProcessorLinksTab() {
     onError: (err) => toast.error(err.message),
   })
 
-  const links = data?.data ?? []
+  function handleSearchSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setSearch(searchInput)
+  }
+
+  const columns: Column<ProcessorLink>[] = [
+    {
+      key: 'processor',
+      header: 'Processor',
+      sortable: true,
+      render: (l) => <Badge variant="outline">{l.processor}</Badge>,
+    },
+    {
+      key: 'customer_id',
+      header: 'Customer ID',
+      render: (l) => <span className="font-mono text-sm">{l.processorCustomerId}</span>,
+    },
+    {
+      key: 'status',
+      header: 'Status',
+      render: (l) => l.isActive ? <Badge>Active</Badge> : <Badge variant="secondary">Inactive</Badge>,
+    },
+    {
+      key: 'actions',
+      header: 'Actions',
+      render: (l) => (
+        <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); deleteMutation.mutate(l.id) }}>
+          <Trash2 className="h-4 w-4 text-destructive" />
+        </Button>
+      ),
+    },
+  ]
 
   return (
     <div className="space-y-4">
@@ -57,40 +100,31 @@ function ProcessorLinksTab() {
         </Dialog>
       </div>
 
-      {isLoading ? (
-        <p className="text-muted-foreground">Loading...</p>
-      ) : links.length === 0 ? (
-        <p className="text-muted-foreground py-8 text-center">No processor links</p>
-      ) : (
-        <div className="rounded-md border">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Processor</TableHead>
-                <TableHead>Customer ID</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead className="w-24">Actions</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {links.map((l) => (
-                <TableRow key={l.id}>
-                  <TableCell><Badge variant="outline">{l.processor}</Badge></TableCell>
-                  <TableCell className="font-mono text-sm">{l.processorCustomerId}</TableCell>
-                  <TableCell>
-                    {l.isActive ? <Badge>Active</Badge> : <Badge variant="secondary">Inactive</Badge>}
-                  </TableCell>
-                  <TableCell>
-                    <Button variant="ghost" size="sm" onClick={() => deleteMutation.mutate(l.id)}>
-                      <Trash2 className="h-4 w-4 text-destructive" />
-                    </Button>
-                  </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 processor links..."
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            className="pl-9"
+          />
         </div>
-      )}
+        <Button type="submit" variant="secondary">Search</Button>
+      </form>
+
+      <DataTable
+        columns={columns}
+        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/accounts/$accountId/tax-exemptions.tsx

@@ -3,14 +3,24 @@ import { createFileRoute, useParams } from '@tanstack/react-router'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { taxExemptionListOptions, taxExemptionMutations, taxExemptionKeys } from '@/api/tax-exemptions'
 import { TaxExemptionForm } from '@/components/accounts/tax-exemption-form'
+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 { Input } from '@/components/ui/input'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
-import { Plus, Check, X } from 'lucide-react'
+import { Plus, Check, X, Search } from 'lucide-react'
 import { toast } from 'sonner'
+import type { TaxExemption } from '@/types/account'
 
 export const Route = createFileRoute('/_authenticated/accounts/$accountId/tax-exemptions')({
+  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: TaxExemptionsTab,
 })
 
@@ -26,8 +36,10 @@ function TaxExemptionsTab() {
   const { accountId } = useParams({ from: '/_authenticated/accounts/$accountId/tax-exemptions' })
   const queryClient = useQueryClient()
   const [dialogOpen, setDialogOpen] = useState(false)
+  const { params, setPage, setSearch, setSort } = usePagination()
+  const [searchInput, setSearchInput] = useState(params.q ?? '')
 
-  const { data, isLoading } = useQuery(taxExemptionListOptions(accountId))
+  const { data, isLoading } = useQuery(taxExemptionListOptions(accountId, params))
 
   const createMutation = useMutation({
     mutationFn: (data: Record<string, unknown>) => taxExemptionMutations.create(accountId, data),
@@ -61,7 +73,59 @@ function TaxExemptionsTab() {
     onError: (err) => toast.error(err.message),
   })
 
-  const exemptions = data?.data ?? []
+  function handleSearchSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setSearch(searchInput)
+  }
+
+  const columns: Column<TaxExemption>[] = [
+    {
+      key: 'certificate_number',
+      header: 'Certificate #',
+      sortable: true,
+      render: (e) => <span className="font-medium">{e.certificateNumber}</span>,
+    },
+    {
+      key: 'type',
+      header: 'Type',
+      render: (e) => <>{e.certificateType ?? '-'}</>,
+    },
+    {
+      key: 'state',
+      header: 'State',
+      render: (e) => <>{e.issuingState ?? '-'}</>,
+    },
+    {
+      key: 'expires_at',
+      header: 'Expires',
+      sortable: true,
+      render: (e) => <>{e.expiresAt ?? '-'}</>,
+    },
+    {
+      key: 'status',
+      header: 'Status',
+      sortable: true,
+      render: (e) => statusBadge(e.status),
+    },
+    {
+      key: 'actions',
+      header: 'Actions',
+      render: (e) => (
+        <div className="flex gap-1">
+          {e.status === 'pending' && (
+            <Button variant="ghost" size="sm" onClick={(ev) => { ev.stopPropagation(); approveMutation.mutate(e.id) }}>
+              <Check className="h-4 w-4 text-green-600" />
+            </Button>
+          )}
+          {e.status === 'approved' && (
+            <Button variant="ghost" size="sm" onClick={(ev) => { ev.stopPropagation(); revokeMutation.mutate(e.id) }}>
+              <X className="h-4 w-4 text-destructive" />
+            </Button>
+          )}
+        </div>
+      ),
+    },
+  ]
 
   return (
     <div className="space-y-4">
@@ -78,51 +142,31 @@ function TaxExemptionsTab() {
         </Dialog>
       </div>
 
-      {isLoading ? (
-        <p className="text-muted-foreground">Loading...</p>
-      ) : exemptions.length === 0 ? (
-        <p className="text-muted-foreground py-8 text-center">No tax exemptions</p>
-      ) : (
-        <div className="rounded-md border">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Certificate #</TableHead>
-                <TableHead>Type</TableHead>
-                <TableHead>State</TableHead>
-                <TableHead>Expires</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead className="w-32">Actions</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {exemptions.map((e) => (
-                <TableRow key={e.id}>
-                  <TableCell className="font-medium">{e.certificateNumber}</TableCell>
-                  <TableCell>{e.certificateType ?? '-'}</TableCell>
-                  <TableCell>{e.issuingState ?? '-'}</TableCell>
-                  <TableCell>{e.expiresAt ?? '-'}</TableCell>
-                  <TableCell>{statusBadge(e.status)}</TableCell>
-                  <TableCell>
-                    <div className="flex gap-1">
-                      {e.status === 'pending' && (
-                        <Button variant="ghost" size="sm" onClick={() => approveMutation.mutate(e.id)}>
-                          <Check className="h-4 w-4 text-green-600" />
-                        </Button>
-                      )}
-                      {e.status === 'approved' && (
-                        <Button variant="ghost" size="sm" onClick={() => revokeMutation.mutate(e.id)}>
-                          <X className="h-4 w-4 text-destructive" />
-                        </Button>
-                      )}
-                    </div>
-                  </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 tax exemptions..."
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            className="pl-9"
+          />
         </div>
-      )}
+        <Button type="submit" variant="secondary">Search</Button>
+      </form>
+
+      <DataTable
+        columns={columns}
+        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/accounts/index.tsx

@@ -8,6 +8,7 @@ import { accountColumns } from '@/components/accounts/account-table'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Plus, Search } from 'lucide-react'
+import { useAuthStore } from '@/stores/auth.store'
 import type { Account } from '@/types/account'
 
 export const Route = createFileRoute('/_authenticated/accounts/')({
@@ -23,6 +24,7 @@ export const Route = createFileRoute('/_authenticated/accounts/')({
 
 function AccountsListPage() {
   const navigate = useNavigate()
+  const hasPermission = useAuthStore((s) => s.hasPermission)
   const { params, setPage, setSearch, setSort } = usePagination()
   const [searchInput, setSearchInput] = useState(params.q ?? '')
 
@@ -41,10 +43,12 @@ function AccountsListPage() {
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold">Accounts</h1>
-        <Button onClick={() => navigate({ to: '/accounts/new' })}>
-          <Plus className="mr-2 h-4 w-4" />
-          New Account
-        </Button>
+        {hasPermission('accounts.edit') && (
+          <Button onClick={() => navigate({ to: '/accounts/new' })}>
+            <Plus className="mr-2 h-4 w-4" />
+            New Account
+          </Button>
+        )}
       </div>
 
       <form onSubmit={handleSearchSubmit} className="flex gap-2 max-w-sm">