Add accounts UI with list, create, edit, detail tabs for all sub-entities

Accounts list with paginated table, search, sort. Account detail page with
tabs for members, payment methods, tax exemptions, and processor links.
All sub-entities have create/edit dialogs and delete actions. Forms use
shared Zod schemas via react-hook-form.

packages/admin/src/api/accounts.ts

@@ -0,0 +1,37 @@
+import { queryOptions } from '@tanstack/react-query'
+import { api } from '@/lib/api-client'
+import type { Account } from '@/types/account'
+import type { PaginatedResponse, PaginationInput } from '@forte/shared/schemas'
+
+export const accountKeys = {
+  all: ['accounts'] as const,
+  lists: () => [...accountKeys.all, 'list'] as const,
+  list: (params: PaginationInput) => [...accountKeys.all, 'list', params] as const,
+  details: () => [...accountKeys.all, 'detail'] as const,
+  detail: (id: string) => [...accountKeys.all, 'detail', id] as const,
+}
+
+export function accountListOptions(params: PaginationInput) {
+  return queryOptions({
+    queryKey: accountKeys.list(params),
+    queryFn: () => api.get<PaginatedResponse<Account>>('/v1/accounts', params),
+  })
+}
+
+export function accountDetailOptions(id: string) {
+  return queryOptions({
+    queryKey: accountKeys.detail(id),
+    queryFn: () => api.get<Account>(`/v1/accounts/${id}`),
+  })
+}
+
+export const accountMutations = {
+  create: (data: Record<string, unknown>) =>
+    api.post<Account>('/v1/accounts', data),
+
+  update: (id: string, data: Record<string, unknown>) =>
+    api.patch<Account>(`/v1/accounts/${id}`, data),
+
+  delete: (id: string) =>
+    api.del<Account>(`/v1/accounts/${id}`),
+}

packages/admin/src/api/members.ts

@@ -0,0 +1,27 @@
+import { queryOptions } from '@tanstack/react-query'
+import { api } from '@/lib/api-client'
+import type { Member } from '@/types/account'
+import type { PaginatedResponse, PaginationInput } from '@forte/shared/schemas'
+
+export const memberKeys = {
+  all: (accountId: string) => ['accounts', accountId, 'members'] as const,
+  list: (accountId: string, params: PaginationInput) => [...memberKeys.all(accountId), params] as const,
+}
+
+export function memberListOptions(accountId: string, params: PaginationInput) {
+  return queryOptions({
+    queryKey: memberKeys.list(accountId, params),
+    queryFn: () => api.get<PaginatedResponse<Member>>(`/v1/accounts/${accountId}/members`, params),
+  })
+}
+
+export const memberMutations = {
+  create: (accountId: string, data: Record<string, unknown>) =>
+    api.post<Member>(`/v1/accounts/${accountId}/members`, data),
+
+  update: (id: string, data: Record<string, unknown>) =>
+    api.patch<Member>(`/v1/members/${id}`, data),
+
+  delete: (id: string) =>
+    api.del<Member>(`/v1/members/${id}`),
+}

packages/admin/src/api/payment-methods.ts

@@ -0,0 +1,25 @@
+import { queryOptions } from '@tanstack/react-query'
+import { api } from '@/lib/api-client'
+import type { PaymentMethod } from '@/types/account'
+
+export const paymentMethodKeys = {
+  all: (accountId: string) => ['accounts', accountId, 'payment-methods'] as const,
+}
+
+export function paymentMethodListOptions(accountId: string) {
+  return queryOptions({
+    queryKey: paymentMethodKeys.all(accountId),
+    queryFn: () => api.get<{ data: PaymentMethod[] }>(`/v1/accounts/${accountId}/payment-methods`),
+  })
+}
+
+export const paymentMethodMutations = {
+  create: (accountId: string, data: Record<string, unknown>) =>
+    api.post<PaymentMethod>(`/v1/accounts/${accountId}/payment-methods`, data),
+
+  update: (id: string, data: Record<string, unknown>) =>
+    api.patch<PaymentMethod>(`/v1/payment-methods/${id}`, data),
+
+  delete: (id: string) =>
+    api.del<PaymentMethod>(`/v1/payment-methods/${id}`),
+}

packages/admin/src/api/processor-links.ts

@@ -0,0 +1,25 @@
+import { queryOptions } from '@tanstack/react-query'
+import { api } from '@/lib/api-client'
+import type { ProcessorLink } from '@/types/account'
+
+export const processorLinkKeys = {
+  all: (accountId: string) => ['accounts', accountId, 'processor-links'] as const,
+}
+
+export function processorLinkListOptions(accountId: string) {
+  return queryOptions({
+    queryKey: processorLinkKeys.all(accountId),
+    queryFn: () => api.get<{ data: ProcessorLink[] }>(`/v1/accounts/${accountId}/processor-links`),
+  })
+}
+
+export const processorLinkMutations = {
+  create: (accountId: string, data: Record<string, unknown>) =>
+    api.post<ProcessorLink>(`/v1/accounts/${accountId}/processor-links`, data),
+
+  update: (id: string, data: Record<string, unknown>) =>
+    api.patch<ProcessorLink>(`/v1/processor-links/${id}`, data),
+
+  delete: (id: string) =>
+    api.del<ProcessorLink>(`/v1/processor-links/${id}`),
+}

packages/admin/src/api/tax-exemptions.ts

@@ -0,0 +1,28 @@
+import { queryOptions } from '@tanstack/react-query'
+import { api } from '@/lib/api-client'
+import type { TaxExemption } from '@/types/account'
+
+export const taxExemptionKeys = {
+  all: (accountId: string) => ['accounts', accountId, 'tax-exemptions'] as const,
+}
+
+export function taxExemptionListOptions(accountId: string) {
+  return queryOptions({
+    queryKey: taxExemptionKeys.all(accountId),
+    queryFn: () => api.get<{ data: TaxExemption[] }>(`/v1/accounts/${accountId}/tax-exemptions`),
+  })
+}
+
+export const taxExemptionMutations = {
+  create: (accountId: string, data: Record<string, unknown>) =>
+    api.post<TaxExemption>(`/v1/accounts/${accountId}/tax-exemptions`, data),
+
+  update: (id: string, data: Record<string, unknown>) =>
+    api.patch<TaxExemption>(`/v1/tax-exemptions/${id}`, data),
+
+  approve: (id: string) =>
+    api.post<TaxExemption>(`/v1/tax-exemptions/${id}/approve`, {}),
+
+  revoke: (id: string, reason: string) =>
+    api.post<TaxExemption>(`/v1/tax-exemptions/${id}/revoke`, { reason }),
+}

packages/admin/src/components/accounts/account-form.tsx

@@ -0,0 +1,96 @@
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { AccountCreateSchema } from '@forte/shared/schemas'
+import type { AccountCreateInput } from '@forte/shared/schemas'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import type { Account } from '@/types/account'
+
+interface AccountFormProps {
+  defaultValues?: Partial<Account>
+  onSubmit: (data: AccountCreateInput) => void
+  loading?: boolean
+}
+
+export function AccountForm({ defaultValues, onSubmit, loading }: AccountFormProps) {
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    formState: { errors },
+  } = useForm<AccountCreateInput>({
+    resolver: zodResolver(AccountCreateSchema),
+    defaultValues: {
+      name: defaultValues?.name ?? '',
+      email: defaultValues?.email ?? undefined,
+      phone: defaultValues?.phone ?? undefined,
+      billingMode: defaultValues?.billingMode ?? 'consolidated',
+      notes: defaultValues?.notes ?? undefined,
+      address: defaultValues?.address ?? undefined,
+    },
+  })
+
+  const billingMode = watch('billingMode')
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 max-w-lg">
+      <div className="space-y-2">
+        <Label htmlFor="name">Name *</Label>
+        <Input id="name" {...register('name')} />
+        {errors.name && <p className="text-sm text-destructive">{errors.name.message}</p>}
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" type="email" {...register('email')} />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="phone">Phone</Label>
+          <Input id="phone" {...register('phone')} />
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <Label>Billing Mode</Label>
+        <Select
+          value={billingMode}
+          onValueChange={(v) => setValue('billingMode', v as 'consolidated' | 'split')}
+        >
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="consolidated">Consolidated</SelectItem>
+            <SelectItem value="split">Split</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="space-y-2">
+        <Label>Address</Label>
+        <div className="grid grid-cols-2 gap-2">
+          <Input placeholder="Street" {...register('address.street')} className="col-span-2" />
+          <Input placeholder="City" {...register('address.city')} />
+          <div className="grid grid-cols-2 gap-2">
+            <Input placeholder="State" {...register('address.state')} />
+            <Input placeholder="ZIP" {...register('address.zip')} />
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="notes">Notes</Label>
+        <Textarea id="notes" {...register('notes')} />
+      </div>
+
+      <Button type="submit" disabled={loading}>
+        {loading ? 'Saving...' : defaultValues ? 'Update Account' : 'Create Account'}
+      </Button>
+    </form>
+  )
+}

packages/admin/src/components/accounts/account-table.tsx

@@ -0,0 +1,42 @@
+import type { Column } from '@/components/shared/data-table'
+import type { Account } from '@/types/account'
+import { Badge } from '@/components/ui/badge'
+
+export const accountColumns: Column<Account>[] = [
+  {
+    key: 'name',
+    header: 'Name',
+    sortable: true,
+    render: (row) => <span className="font-medium">{row.name}</span>,
+  },
+  {
+    key: 'email',
+    header: 'Email',
+    sortable: true,
+    render: (row) => row.email ?? <span className="text-muted-foreground">-</span>,
+  },
+  {
+    key: 'phone',
+    header: 'Phone',
+    render: (row) => row.phone ?? <span className="text-muted-foreground">-</span>,
+  },
+  {
+    key: 'account_number',
+    header: 'Account #',
+    sortable: true,
+    render: (row) => row.accountNumber ?? <span className="text-muted-foreground">-</span>,
+  },
+  {
+    key: 'billingMode',
+    header: 'Billing',
+    render: (row) => (
+      <Badge variant="secondary">{row.billingMode}</Badge>
+    ),
+  },
+  {
+    key: 'created_at',
+    header: 'Created',
+    sortable: true,
+    render: (row) => new Date(row.createdAt).toLocaleDateString(),
+  },
+]

packages/admin/src/components/accounts/member-form.tsx

@@ -0,0 +1,74 @@
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { MemberCreateSchema } from '@forte/shared/schemas'
+import type { MemberCreateInput } from '@forte/shared/schemas'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+import type { Member } from '@/types/account'
+
+interface MemberFormProps {
+  accountId: string
+  defaultValues?: Partial<Member>
+  onSubmit: (data: Record<string, unknown>) => void
+  loading?: boolean
+}
+
+export function MemberForm({ accountId, defaultValues, onSubmit, loading }: MemberFormProps) {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<MemberCreateInput>({
+    resolver: zodResolver(MemberCreateSchema),
+    defaultValues: {
+      accountId,
+      firstName: defaultValues?.firstName ?? '',
+      lastName: defaultValues?.lastName ?? '',
+      dateOfBirth: defaultValues?.dateOfBirth ?? undefined,
+      email: defaultValues?.email ?? undefined,
+      phone: defaultValues?.phone ?? undefined,
+      notes: defaultValues?.notes ?? undefined,
+    },
+  })
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <input type="hidden" {...register('accountId')} />
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="firstName">First Name *</Label>
+          <Input id="firstName" {...register('firstName')} />
+          {errors.firstName && <p className="text-sm text-destructive">{errors.firstName.message}</p>}
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="lastName">Last Name *</Label>
+          <Input id="lastName" {...register('lastName')} />
+          {errors.lastName && <p className="text-sm text-destructive">{errors.lastName.message}</p>}
+        </div>
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="dateOfBirth">Date of Birth</Label>
+          <Input id="dateOfBirth" type="date" {...register('dateOfBirth')} />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="memberEmail">Email</Label>
+          <Input id="memberEmail" type="email" {...register('email')} />
+        </div>
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="memberPhone">Phone</Label>
+        <Input id="memberPhone" {...register('phone')} />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="memberNotes">Notes</Label>
+        <Textarea id="memberNotes" {...register('notes')} />
+      </div>
+      <Button type="submit" disabled={loading}>
+        {loading ? 'Saving...' : defaultValues ? 'Update Member' : 'Add Member'}
+      </Button>
+    </form>
+  )
+}

packages/admin/src/components/accounts/payment-method-form.tsx

@@ -0,0 +1,84 @@
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { PaymentMethodCreateSchema } from '@forte/shared/schemas'
+import type { PaymentMethodCreateInput } from '@forte/shared/schemas'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+
+interface PaymentMethodFormProps {
+  accountId: string
+  onSubmit: (data: Record<string, unknown>) => void
+  loading?: boolean
+}
+
+export function PaymentMethodForm({ accountId, onSubmit, loading }: PaymentMethodFormProps) {
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    formState: { errors },
+  } = useForm<PaymentMethodCreateInput>({
+    resolver: zodResolver(PaymentMethodCreateSchema),
+    defaultValues: {
+      accountId,
+      processor: 'stripe',
+      processorPaymentMethodId: '',
+      isDefault: false,
+    },
+  })
+
+  const processor = watch('processor')
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <div className="space-y-2">
+        <Label>Processor</Label>
+        <Select
+          value={processor}
+          onValueChange={(v) => setValue('processor', v as 'stripe' | 'global_payments')}
+        >
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="stripe">Stripe</SelectItem>
+            <SelectItem value="global_payments">Global Payments</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="pmId">Payment Method ID *</Label>
+        <Input id="pmId" {...register('processorPaymentMethodId')} placeholder="pm_..." />
+        {errors.processorPaymentMethodId && (
+          <p className="text-sm text-destructive">{errors.processorPaymentMethodId.message}</p>
+        )}
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="cardBrand">Card Brand</Label>
+          <Input id="cardBrand" {...register('cardBrand')} placeholder="visa" />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="lastFour">Last Four</Label>
+          <Input id="lastFour" {...register('lastFour')} placeholder="4242" maxLength={4} />
+        </div>
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="expMonth">Exp Month</Label>
+          <Input id="expMonth" type="number" {...register('expMonth', { valueAsNumber: true })} min={1} max={12} />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="expYear">Exp Year</Label>
+          <Input id="expYear" type="number" {...register('expYear', { valueAsNumber: true })} min={2024} max={2100} />
+        </div>
+      </div>
+      <Button type="submit" disabled={loading}>
+        {loading ? 'Saving...' : 'Add Payment Method'}
+      </Button>
+    </form>
+  )
+}

packages/admin/src/components/accounts/processor-link-form.tsx

@@ -0,0 +1,63 @@
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { ProcessorLinkCreateSchema } from '@forte/shared/schemas'
+import type { ProcessorLinkCreateInput } from '@forte/shared/schemas'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+
+interface ProcessorLinkFormProps {
+  accountId: string
+  onSubmit: (data: Record<string, unknown>) => void
+  loading?: boolean
+}
+
+export function ProcessorLinkForm({ accountId, onSubmit, loading }: ProcessorLinkFormProps) {
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    formState: { errors },
+  } = useForm<ProcessorLinkCreateInput>({
+    resolver: zodResolver(ProcessorLinkCreateSchema),
+    defaultValues: {
+      accountId,
+      processor: 'stripe',
+      processorCustomerId: '',
+    },
+  })
+
+  const processor = watch('processor')
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <div className="space-y-2">
+        <Label>Processor</Label>
+        <Select
+          value={processor}
+          onValueChange={(v) => setValue('processor', v as 'stripe' | 'global_payments')}
+        >
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="stripe">Stripe</SelectItem>
+            <SelectItem value="global_payments">Global Payments</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="customerId">Customer ID *</Label>
+        <Input id="customerId" {...register('processorCustomerId')} placeholder="cus_..." />
+        {errors.processorCustomerId && (
+          <p className="text-sm text-destructive">{errors.processorCustomerId.message}</p>
+        )}
+      </div>
+      <Button type="submit" disabled={loading}>
+        {loading ? 'Saving...' : 'Add Processor Link'}
+      </Button>
+    </form>
+  )
+}

packages/admin/src/components/accounts/tax-exemption-form.tsx

@@ -0,0 +1,61 @@
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { TaxExemptionCreateSchema } from '@forte/shared/schemas'
+import type { TaxExemptionCreateInput } from '@forte/shared/schemas'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+
+interface TaxExemptionFormProps {
+  accountId: string
+  onSubmit: (data: Record<string, unknown>) => void
+  loading?: boolean
+}
+
+export function TaxExemptionForm({ accountId, onSubmit, loading }: TaxExemptionFormProps) {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<TaxExemptionCreateInput>({
+    resolver: zodResolver(TaxExemptionCreateSchema),
+    defaultValues: {
+      accountId,
+      certificateNumber: '',
+    },
+  })
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="certNumber">Certificate Number *</Label>
+        <Input id="certNumber" {...register('certificateNumber')} />
+        {errors.certificateNumber && (
+          <p className="text-sm text-destructive">{errors.certificateNumber.message}</p>
+        )}
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="certType">Certificate Type</Label>
+          <Input id="certType" {...register('certificateType')} placeholder="resale" />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="issuingState">Issuing State</Label>
+          <Input id="issuingState" {...register('issuingState')} placeholder="TX" maxLength={2} />
+        </div>
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="expiresAt">Expires</Label>
+        <Input id="expiresAt" type="date" {...register('expiresAt')} />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="exemptNotes">Notes</Label>
+        <Textarea id="exemptNotes" {...register('notes')} />
+      </div>
+      <Button type="submit" disabled={loading}>
+        {loading ? 'Saving...' : 'Add Tax Exemption'}
+      </Button>
+    </form>
+  )
+}

packages/admin/src/components/shared/data-table.tsx

@@ -0,0 +1,143 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
+import { ChevronLeft, ChevronRight, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react'
+
+export interface Column<T> {
+  key: string
+  header: string
+  sortable?: boolean
+  render: (row: T) => React.ReactNode
+}
+
+interface DataTableProps<T> {
+  columns: Column<T>[]
+  data: T[]
+  loading?: boolean
+  page: number
+  totalPages: number
+  total: number
+  sort?: string
+  order?: 'asc' | 'desc'
+  onPageChange: (page: number) => void
+  onSort?: (sort: string, order: 'asc' | 'desc') => void
+  onRowClick?: (row: T) => void
+}
+
+export function DataTable<T>({
+  columns,
+  data,
+  loading,
+  page,
+  totalPages,
+  total,
+  sort,
+  order,
+  onPageChange,
+  onSort,
+  onRowClick,
+}: DataTableProps<T>) {
+  function handleSort(key: string) {
+    if (!onSort) return
+    if (sort === key) {
+      onSort(key, order === 'asc' ? 'desc' : 'asc')
+    } else {
+      onSort(key, 'asc')
+    }
+  }
+
+  function SortIcon({ columnKey }: { columnKey: string }) {
+    if (sort !== columnKey) return <ArrowUpDown className="ml-1 h-3 w-3 opacity-40" />
+    return order === 'asc'
+      ? <ArrowUp className="ml-1 h-3 w-3" />
+      : <ArrowDown className="ml-1 h-3 w-3" />
+  }
+
+  if (loading) {
+    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">
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {columns.map((col) => (
+                <TableHead
+                  key={col.key}
+                  className={col.sortable ? 'cursor-pointer select-none' : ''}
+                  onClick={() => col.sortable && handleSort(col.key)}
+                >
+                  <span className="flex items-center">
+                    {col.header}
+                    {col.sortable && <SortIcon columnKey={col.key} />}
+                  </span>
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {data.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="text-center py-8 text-muted-foreground">
+                  No results found
+                </TableCell>
+              </TableRow>
+            ) : (
+              data.map((row, i) => (
+                <TableRow
+                  key={i}
+                  className={onRowClick ? 'cursor-pointer' : ''}
+                  onClick={() => onRowClick?.(row)}
+                >
+                  {columns.map((col) => (
+                    <TableCell key={col.key}>{col.render(row)}</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={page <= 1}
+            onClick={() => onPageChange(page - 1)}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <span>
+            Page {page} of {totalPages}
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={page >= totalPages}
+            onClick={() => onPageChange(page + 1)}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

packages/admin/src/hooks/use-pagination.ts

@@ -0,0 +1,43 @@
+import { useNavigate, useSearch } from '@tanstack/react-router'
+import type { PaginationInput } from '@forte/shared/schemas'
+
+interface PaginationSearch {
+  page?: number
+  limit?: number
+  q?: string
+  sort?: string
+  order?: 'asc' | 'desc'
+}
+
+export function usePagination() {
+  const search = useSearch({ strict: false }) as PaginationSearch
+  const navigate = useNavigate()
+
+  const params: PaginationInput = {
+    page: search.page ?? 1,
+    limit: search.limit ?? 25,
+    q: search.q,
+    sort: search.sort,
+    order: search.order ?? 'asc',
+  }
+
+  function setParams(updates: Partial<PaginationSearch>) {
+    navigate({
+      search: (prev: PaginationSearch) => ({
+        ...prev,
+        ...updates,
+        // Reset to page 1 when search or sort changes
+        page: updates.q !== undefined || updates.sort !== undefined ? 1 : (updates.page ?? prev.page),
+      }),
+      replace: true,
+    })
+  }
+
+  return {
+    ...params,
+    setPage: (page: number) => setParams({ page }),
+    setSearch: (q: string) => setParams({ q: q || undefined }),
+    setSort: (sort: string, order: 'asc' | 'desc') => setParams({ sort, order }),
+    params,
+  }
+}

packages/admin/src/routeTree.gen.ts

@@ -13,6 +13,13 @@ import { Route as LoginRouteImport } from './routes/login'
 import { Route as AuthenticatedRouteImport } from './routes/_authenticated'
 import { Route as AuthenticatedIndexRouteImport } from './routes/_authenticated/index'
 import { Route as AuthenticatedAccountsIndexRouteImport } from './routes/_authenticated/accounts/index'
+import { Route as AuthenticatedAccountsNewRouteImport } from './routes/_authenticated/accounts/new'
+import { Route as AuthenticatedAccountsAccountIdRouteImport } from './routes/_authenticated/accounts/$accountId'
+import { Route as AuthenticatedAccountsAccountIdIndexRouteImport } from './routes/_authenticated/accounts/$accountId/index'
+import { Route as AuthenticatedAccountsAccountIdTaxExemptionsRouteImport } from './routes/_authenticated/accounts/$accountId/tax-exemptions'
+import { Route as AuthenticatedAccountsAccountIdProcessorLinksRouteImport } from './routes/_authenticated/accounts/$accountId/processor-links'
+import { Route as AuthenticatedAccountsAccountIdPaymentMethodsRouteImport } from './routes/_authenticated/accounts/$accountId/payment-methods'
+import { Route as AuthenticatedAccountsAccountIdMembersRouteImport } from './routes/_authenticated/accounts/$accountId/members'
 
 const LoginRoute = LoginRouteImport.update({
   id: '/login',
@@ -34,35 +41,123 @@ const AuthenticatedAccountsIndexRoute =
     path: '/accounts/',
     getParentRoute: () => AuthenticatedRoute,
   } as any)
+const AuthenticatedAccountsNewRoute =
+  AuthenticatedAccountsNewRouteImport.update({
+    id: '/accounts/new',
+    path: '/accounts/new',
+    getParentRoute: () => AuthenticatedRoute,
+  } as any)
+const AuthenticatedAccountsAccountIdRoute =
+  AuthenticatedAccountsAccountIdRouteImport.update({
+    id: '/accounts/$accountId',
+    path: '/accounts/$accountId',
+    getParentRoute: () => AuthenticatedRoute,
+  } as any)
+const AuthenticatedAccountsAccountIdIndexRoute =
+  AuthenticatedAccountsAccountIdIndexRouteImport.update({
+    id: '/',
+    path: '/',
+    getParentRoute: () => AuthenticatedAccountsAccountIdRoute,
+  } as any)
+const AuthenticatedAccountsAccountIdTaxExemptionsRoute =
+  AuthenticatedAccountsAccountIdTaxExemptionsRouteImport.update({
+    id: '/tax-exemptions',
+    path: '/tax-exemptions',
+    getParentRoute: () => AuthenticatedAccountsAccountIdRoute,
+  } as any)
+const AuthenticatedAccountsAccountIdProcessorLinksRoute =
+  AuthenticatedAccountsAccountIdProcessorLinksRouteImport.update({
+    id: '/processor-links',
+    path: '/processor-links',
+    getParentRoute: () => AuthenticatedAccountsAccountIdRoute,
+  } as any)
+const AuthenticatedAccountsAccountIdPaymentMethodsRoute =
+  AuthenticatedAccountsAccountIdPaymentMethodsRouteImport.update({
+    id: '/payment-methods',
+    path: '/payment-methods',
+    getParentRoute: () => AuthenticatedAccountsAccountIdRoute,
+  } as any)
+const AuthenticatedAccountsAccountIdMembersRoute =
+  AuthenticatedAccountsAccountIdMembersRouteImport.update({
+    id: '/members',
+    path: '/members',
+    getParentRoute: () => AuthenticatedAccountsAccountIdRoute,
+  } as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof AuthenticatedIndexRoute
   '/login': typeof LoginRoute
+  '/accounts/$accountId': typeof AuthenticatedAccountsAccountIdRouteWithChildren
+  '/accounts/new': typeof AuthenticatedAccountsNewRoute
   '/accounts/': typeof AuthenticatedAccountsIndexRoute
+  '/accounts/$accountId/members': typeof AuthenticatedAccountsAccountIdMembersRoute
+  '/accounts/$accountId/payment-methods': typeof AuthenticatedAccountsAccountIdPaymentMethodsRoute
+  '/accounts/$accountId/processor-links': typeof AuthenticatedAccountsAccountIdProcessorLinksRoute
+  '/accounts/$accountId/tax-exemptions': typeof AuthenticatedAccountsAccountIdTaxExemptionsRoute
+  '/accounts/$accountId/': typeof AuthenticatedAccountsAccountIdIndexRoute
 }
 export interface FileRoutesByTo {
   '/login': typeof LoginRoute
   '/': typeof AuthenticatedIndexRoute
+  '/accounts/new': typeof AuthenticatedAccountsNewRoute
   '/accounts': typeof AuthenticatedAccountsIndexRoute
+  '/accounts/$accountId/members': typeof AuthenticatedAccountsAccountIdMembersRoute
+  '/accounts/$accountId/payment-methods': typeof AuthenticatedAccountsAccountIdPaymentMethodsRoute
+  '/accounts/$accountId/processor-links': typeof AuthenticatedAccountsAccountIdProcessorLinksRoute
+  '/accounts/$accountId/tax-exemptions': typeof AuthenticatedAccountsAccountIdTaxExemptionsRoute
+  '/accounts/$accountId': typeof AuthenticatedAccountsAccountIdIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/_authenticated': typeof AuthenticatedRouteWithChildren
   '/login': typeof LoginRoute
   '/_authenticated/': typeof AuthenticatedIndexRoute
+  '/_authenticated/accounts/$accountId': typeof AuthenticatedAccountsAccountIdRouteWithChildren
+  '/_authenticated/accounts/new': typeof AuthenticatedAccountsNewRoute
   '/_authenticated/accounts/': typeof AuthenticatedAccountsIndexRoute
+  '/_authenticated/accounts/$accountId/members': typeof AuthenticatedAccountsAccountIdMembersRoute
+  '/_authenticated/accounts/$accountId/payment-methods': typeof AuthenticatedAccountsAccountIdPaymentMethodsRoute
+  '/_authenticated/accounts/$accountId/processor-links': typeof AuthenticatedAccountsAccountIdProcessorLinksRoute
+  '/_authenticated/accounts/$accountId/tax-exemptions': typeof AuthenticatedAccountsAccountIdTaxExemptionsRoute
+  '/_authenticated/accounts/$accountId/': typeof AuthenticatedAccountsAccountIdIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/login' | '/accounts/'
+  fullPaths:
+    | '/'
+    | '/login'
+    | '/accounts/$accountId'
+    | '/accounts/new'
+    | '/accounts/'
+    | '/accounts/$accountId/members'
+    | '/accounts/$accountId/payment-methods'
+    | '/accounts/$accountId/processor-links'
+    | '/accounts/$accountId/tax-exemptions'
+    | '/accounts/$accountId/'
   fileRoutesByTo: FileRoutesByTo
-  to: '/login' | '/' | '/accounts'
+  to:
+    | '/login'
+    | '/'
+    | '/accounts/new'
+    | '/accounts'
+    | '/accounts/$accountId/members'
+    | '/accounts/$accountId/payment-methods'
+    | '/accounts/$accountId/processor-links'
+    | '/accounts/$accountId/tax-exemptions'
+    | '/accounts/$accountId'
   id:
     | '__root__'
     | '/_authenticated'
     | '/login'
     | '/_authenticated/'
+    | '/_authenticated/accounts/$accountId'
+    | '/_authenticated/accounts/new'
     | '/_authenticated/accounts/'
+    | '/_authenticated/accounts/$accountId/members'
+    | '/_authenticated/accounts/$accountId/payment-methods'
+    | '/_authenticated/accounts/$accountId/processor-links'
+    | '/_authenticated/accounts/$accountId/tax-exemptions'
+    | '/_authenticated/accounts/$accountId/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -100,16 +195,97 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthenticatedAccountsIndexRouteImport
       parentRoute: typeof AuthenticatedRoute
     }
+    '/_authenticated/accounts/new': {
+      id: '/_authenticated/accounts/new'
+      path: '/accounts/new'
+      fullPath: '/accounts/new'
+      preLoaderRoute: typeof AuthenticatedAccountsNewRouteImport
+      parentRoute: typeof AuthenticatedRoute
+    }
+    '/_authenticated/accounts/$accountId': {
+      id: '/_authenticated/accounts/$accountId'
+      path: '/accounts/$accountId'
+      fullPath: '/accounts/$accountId'
+      preLoaderRoute: typeof AuthenticatedAccountsAccountIdRouteImport
+      parentRoute: typeof AuthenticatedRoute
+    }
+    '/_authenticated/accounts/$accountId/': {
+      id: '/_authenticated/accounts/$accountId/'
+      path: '/'
+      fullPath: '/accounts/$accountId/'
+      preLoaderRoute: typeof AuthenticatedAccountsAccountIdIndexRouteImport
+      parentRoute: typeof AuthenticatedAccountsAccountIdRoute
+    }
+    '/_authenticated/accounts/$accountId/tax-exemptions': {
+      id: '/_authenticated/accounts/$accountId/tax-exemptions'
+      path: '/tax-exemptions'
+      fullPath: '/accounts/$accountId/tax-exemptions'
+      preLoaderRoute: typeof AuthenticatedAccountsAccountIdTaxExemptionsRouteImport
+      parentRoute: typeof AuthenticatedAccountsAccountIdRoute
+    }
+    '/_authenticated/accounts/$accountId/processor-links': {
+      id: '/_authenticated/accounts/$accountId/processor-links'
+      path: '/processor-links'
+      fullPath: '/accounts/$accountId/processor-links'
+      preLoaderRoute: typeof AuthenticatedAccountsAccountIdProcessorLinksRouteImport
+      parentRoute: typeof AuthenticatedAccountsAccountIdRoute
+    }
+    '/_authenticated/accounts/$accountId/payment-methods': {
+      id: '/_authenticated/accounts/$accountId/payment-methods'
+      path: '/payment-methods'
+      fullPath: '/accounts/$accountId/payment-methods'
+      preLoaderRoute: typeof AuthenticatedAccountsAccountIdPaymentMethodsRouteImport
+      parentRoute: typeof AuthenticatedAccountsAccountIdRoute
+    }
+    '/_authenticated/accounts/$accountId/members': {
+      id: '/_authenticated/accounts/$accountId/members'
+      path: '/members'
+      fullPath: '/accounts/$accountId/members'
+      preLoaderRoute: typeof AuthenticatedAccountsAccountIdMembersRouteImport
+      parentRoute: typeof AuthenticatedAccountsAccountIdRoute
+    }
   }
 }
 
+interface AuthenticatedAccountsAccountIdRouteChildren {
+  AuthenticatedAccountsAccountIdMembersRoute: typeof AuthenticatedAccountsAccountIdMembersRoute
+  AuthenticatedAccountsAccountIdPaymentMethodsRoute: typeof AuthenticatedAccountsAccountIdPaymentMethodsRoute
+  AuthenticatedAccountsAccountIdProcessorLinksRoute: typeof AuthenticatedAccountsAccountIdProcessorLinksRoute
+  AuthenticatedAccountsAccountIdTaxExemptionsRoute: typeof AuthenticatedAccountsAccountIdTaxExemptionsRoute
+  AuthenticatedAccountsAccountIdIndexRoute: typeof AuthenticatedAccountsAccountIdIndexRoute
+}
+
+const AuthenticatedAccountsAccountIdRouteChildren: AuthenticatedAccountsAccountIdRouteChildren =
+  {
+    AuthenticatedAccountsAccountIdMembersRoute:
+      AuthenticatedAccountsAccountIdMembersRoute,
+    AuthenticatedAccountsAccountIdPaymentMethodsRoute:
+      AuthenticatedAccountsAccountIdPaymentMethodsRoute,
+    AuthenticatedAccountsAccountIdProcessorLinksRoute:
+      AuthenticatedAccountsAccountIdProcessorLinksRoute,
+    AuthenticatedAccountsAccountIdTaxExemptionsRoute:
+      AuthenticatedAccountsAccountIdTaxExemptionsRoute,
+    AuthenticatedAccountsAccountIdIndexRoute:
+      AuthenticatedAccountsAccountIdIndexRoute,
+  }
+
+const AuthenticatedAccountsAccountIdRouteWithChildren =
+  AuthenticatedAccountsAccountIdRoute._addFileChildren(
+    AuthenticatedAccountsAccountIdRouteChildren,
+  )
+
 interface AuthenticatedRouteChildren {
   AuthenticatedIndexRoute: typeof AuthenticatedIndexRoute
+  AuthenticatedAccountsAccountIdRoute: typeof AuthenticatedAccountsAccountIdRouteWithChildren
+  AuthenticatedAccountsNewRoute: typeof AuthenticatedAccountsNewRoute
   AuthenticatedAccountsIndexRoute: typeof AuthenticatedAccountsIndexRoute
 }
 
 const AuthenticatedRouteChildren: AuthenticatedRouteChildren = {
   AuthenticatedIndexRoute: AuthenticatedIndexRoute,
+  AuthenticatedAccountsAccountIdRoute:
+    AuthenticatedAccountsAccountIdRouteWithChildren,
+  AuthenticatedAccountsNewRoute: AuthenticatedAccountsNewRoute,
   AuthenticatedAccountsIndexRoute: AuthenticatedAccountsIndexRoute,
 }
 

packages/admin/src/routes/_authenticated/accounts/$accountId.tsx

@@ -0,0 +1,71 @@
+import { createFileRoute, Outlet, Link, useParams } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+import { accountDetailOptions } from '@/api/accounts'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Badge } from '@/components/ui/badge'
+import { cn } from '@/lib/utils'
+
+export const Route = createFileRoute('/_authenticated/accounts/$accountId')({
+  component: AccountDetailLayout,
+})
+
+const tabs = [
+  { label: 'Overview', to: '/accounts/$accountId' },
+  { label: 'Members', to: '/accounts/$accountId/members' },
+  { label: 'Payment Methods', to: '/accounts/$accountId/payment-methods' },
+  { label: 'Tax Exemptions', to: '/accounts/$accountId/tax-exemptions' },
+  { label: 'Processor Links', to: '/accounts/$accountId/processor-links' },
+] as const
+
+function AccountDetailLayout() {
+  const { accountId } = useParams({ from: '/_authenticated/accounts/$accountId' })
+  const { data: account, isLoading } = useQuery(accountDetailOptions(accountId))
+
+  if (isLoading) {
+    return (
+      <div className="space-y-4">
+        <Skeleton className="h-8 w-64" />
+        <Skeleton className="h-4 w-96" />
+        <Skeleton className="h-10 w-full" />
+      </div>
+    )
+  }
+
+  if (!account) {
+    return <p className="text-muted-foreground">Account not found</p>
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <div className="flex items-center gap-3">
+          <h1 className="text-2xl font-bold">{account.name}</h1>
+          <Badge variant="secondary">{account.billingMode}</Badge>
+        </div>
+        {account.email && <p className="text-muted-foreground">{account.email}</p>}
+      </div>
+
+      <nav className="flex gap-1 border-b">
+        {tabs.map((tab) => (
+          <Link
+            key={tab.to}
+            to={tab.to}
+            params={{ accountId }}
+            activeOptions={{ exact: tab.to === '/accounts/$accountId' }}
+            className={cn(
+              'px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors',
+              'text-muted-foreground border-transparent hover:text-foreground hover:border-border',
+            )}
+            activeProps={{
+              className: 'text-foreground border-primary',
+            }}
+          >
+            {tab.label}
+          </Link>
+        ))}
+      </nav>
+
+      <Outlet />
+    </div>
+  )
+}

packages/admin/src/routes/_authenticated/accounts/$accountId/index.tsx

@@ -0,0 +1,39 @@
+import { createFileRoute, useParams } from '@tanstack/react-router'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { accountDetailOptions, accountMutations, accountKeys } from '@/api/accounts'
+import { AccountForm } from '@/components/accounts/account-form'
+import { toast } from 'sonner'
+
+export const Route = createFileRoute('/_authenticated/accounts/$accountId/')({
+  component: AccountOverviewPage,
+})
+
+function AccountOverviewPage() {
+  const { accountId } = useParams({ from: '/_authenticated/accounts/$accountId/' })
+  const queryClient = useQueryClient()
+  const { data: account } = useQuery(accountDetailOptions(accountId))
+
+  const mutation = useMutation({
+    mutationFn: (data: Record<string, unknown>) => accountMutations.update(accountId, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: accountKeys.detail(accountId) })
+      toast.success('Account updated')
+    },
+    onError: (err) => {
+      toast.error(err.message)
+    },
+  })
+
+  if (!account) return null
+
+  return (
+    <div className="space-y-4">
+      <h2 className="text-lg font-semibold">Edit Account</h2>
+      <AccountForm
+        defaultValues={account}
+        onSubmit={mutation.mutate}
+        loading={mutation.isPending}
+      />
+    </div>
+  )
+}

packages/admin/src/routes/_authenticated/accounts/$accountId/members.tsx

@@ -0,0 +1,128 @@
+import { useState } from 'react'
+import { createFileRoute, useParams } from '@tanstack/react-router'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { memberListOptions, memberMutations, memberKeys } from '@/api/members'
+import { MemberForm } from '@/components/accounts/member-form'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+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 { toast } from 'sonner'
+import type { Member } from '@/types/account'
+
+export const Route = createFileRoute('/_authenticated/accounts/$accountId/members')({
+  component: MembersTab,
+})
+
+function MembersTab() {
+  const { accountId } = useParams({ from: '/_authenticated/accounts/$accountId/members' })
+  const queryClient = useQueryClient()
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const [editingMember, setEditingMember] = useState<Member | null>(null)
+
+  const { data, isLoading } = useQuery(memberListOptions(accountId, { page: 1, limit: 100, order: 'asc' }))
+
+  const createMutation = useMutation({
+    mutationFn: (data: Record<string, unknown>) => memberMutations.create(accountId, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: memberKeys.all(accountId) })
+      toast.success('Member added')
+      setDialogOpen(false)
+    },
+    onError: (err) => toast.error(err.message),
+  })
+
+  const updateMutation = useMutation({
+    mutationFn: (data: Record<string, unknown>) => memberMutations.update(editingMember!.id, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: memberKeys.all(accountId) })
+      toast.success('Member updated')
+      setEditingMember(null)
+    },
+    onError: (err) => toast.error(err.message),
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: memberMutations.delete,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: memberKeys.all(accountId) })
+      toast.success('Member removed')
+    },
+    onError: (err) => toast.error(err.message),
+  })
+
+  const members = data?.data ?? []
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold">Members</h2>
+        <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+          <DialogTrigger asChild>
+            <Button size="sm"><Plus className="mr-2 h-4 w-4" />Add Member</Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader><DialogTitle>Add Member</DialogTitle></DialogHeader>
+            <MemberForm accountId={accountId} onSubmit={createMutation.mutate} loading={createMutation.isPending} />
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      {/* Edit dialog */}
+      <Dialog open={!!editingMember} onOpenChange={(open) => !open && setEditingMember(null)}>
+        <DialogContent>
+          <DialogHeader><DialogTitle>Edit Member</DialogTitle></DialogHeader>
+          {editingMember && (
+            <MemberForm
+              accountId={accountId}
+              defaultValues={editingMember}
+              onSubmit={updateMutation.mutate}
+              loading={updateMutation.isPending}
+            />
+          )}
+        </DialogContent>
+      </Dialog>
+
+      {isLoading ? (
+        <p className="text-muted-foreground">Loading...</p>
+      ) : members.length === 0 ? (
+        <p className="text-muted-foreground py-8 text-center">No members yet</p>
+      ) : (
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Name</TableHead>
+                <TableHead>Email</TableHead>
+                <TableHead>Date of Birth</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead className="w-24">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {members.map((m) => (
+                <TableRow key={m.id}>
+                  <TableCell className="font-medium">{m.firstName} {m.lastName}</TableCell>
+                  <TableCell>{m.email ?? '-'}</TableCell>
+                  <TableCell>{m.dateOfBirth ?? '-'}</TableCell>
+                  <TableCell>
+                    {m.isMinor ? <Badge variant="secondary">Minor</Badge> : <Badge>Adult</Badge>}
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex gap-1">
+                      <Button variant="ghost" size="sm" onClick={() => setEditingMember(m)}>Edit</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>
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,117 @@
+import { useState } from 'react'
+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 { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+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 { toast } from 'sonner'
+
+export const Route = createFileRoute('/_authenticated/accounts/$accountId/payment-methods')({
+  component: PaymentMethodsTab,
+})
+
+function PaymentMethodsTab() {
+  const { accountId } = useParams({ from: '/_authenticated/accounts/$accountId/payment-methods' })
+  const queryClient = useQueryClient()
+  const [dialogOpen, setDialogOpen] = useState(false)
+
+  const { data, isLoading } = useQuery(paymentMethodListOptions(accountId))
+
+  const createMutation = useMutation({
+    mutationFn: (data: Record<string, unknown>) => paymentMethodMutations.create(accountId, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: paymentMethodKeys.all(accountId) })
+      toast.success('Payment method added')
+      setDialogOpen(false)
+    },
+    onError: (err) => toast.error(err.message),
+  })
+
+  const setDefaultMutation = useMutation({
+    mutationFn: (id: string) => paymentMethodMutations.update(id, { isDefault: true }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: paymentMethodKeys.all(accountId) })
+      toast.success('Default payment method updated')
+    },
+    onError: (err) => toast.error(err.message),
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: paymentMethodMutations.delete,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: paymentMethodKeys.all(accountId) })
+      toast.success('Payment method removed')
+    },
+    onError: (err) => toast.error(err.message),
+  })
+
+  const methods = data?.data ?? []
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold">Payment Methods</h2>
+        <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+          <DialogTrigger asChild>
+            <Button size="sm"><Plus className="mr-2 h-4 w-4" />Add Method</Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader><DialogTitle>Add Payment Method</DialogTitle></DialogHeader>
+            <PaymentMethodForm accountId={accountId} onSubmit={createMutation.mutate} loading={createMutation.isPending} />
+          </DialogContent>
+        </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>
+        </div>
+      )}
+    </div>
+  )
+}

packages/admin/src/routes/_authenticated/accounts/$accountId/processor-links.tsx

@@ -0,0 +1,96 @@
+import { useState } from 'react'
+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 { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+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 { toast } from 'sonner'
+
+export const Route = createFileRoute('/_authenticated/accounts/$accountId/processor-links')({
+  component: ProcessorLinksTab,
+})
+
+function ProcessorLinksTab() {
+  const { accountId } = useParams({ from: '/_authenticated/accounts/$accountId/processor-links' })
+  const queryClient = useQueryClient()
+  const [dialogOpen, setDialogOpen] = useState(false)
+
+  const { data, isLoading } = useQuery(processorLinkListOptions(accountId))
+
+  const createMutation = useMutation({
+    mutationFn: (data: Record<string, unknown>) => processorLinkMutations.create(accountId, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: processorLinkKeys.all(accountId) })
+      toast.success('Processor link added')
+      setDialogOpen(false)
+    },
+    onError: (err) => toast.error(err.message),
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: processorLinkMutations.delete,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: processorLinkKeys.all(accountId) })
+      toast.success('Processor link removed')
+    },
+    onError: (err) => toast.error(err.message),
+  })
+
+  const links = data?.data ?? []
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold">Processor Links</h2>
+        <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+          <DialogTrigger asChild>
+            <Button size="sm"><Plus className="mr-2 h-4 w-4" />Add Link</Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader><DialogTitle>Add Processor Link</DialogTitle></DialogHeader>
+            <ProcessorLinkForm accountId={accountId} onSubmit={createMutation.mutate} loading={createMutation.isPending} />
+          </DialogContent>
+        </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>
+        </div>
+      )}
+    </div>
+  )
+}

packages/admin/src/routes/_authenticated/accounts/$accountId/tax-exemptions.tsx

@@ -0,0 +1,128 @@
+import { useState } from 'react'
+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 { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+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 { toast } from 'sonner'
+
+export const Route = createFileRoute('/_authenticated/accounts/$accountId/tax-exemptions')({
+  component: TaxExemptionsTab,
+})
+
+function statusBadge(status: string) {
+  switch (status) {
+    case 'approved': return <Badge className="bg-green-600">Approved</Badge>
+    case 'pending': return <Badge variant="secondary">Pending</Badge>
+    default: return <Badge variant="outline">None</Badge>
+  }
+}
+
+function TaxExemptionsTab() {
+  const { accountId } = useParams({ from: '/_authenticated/accounts/$accountId/tax-exemptions' })
+  const queryClient = useQueryClient()
+  const [dialogOpen, setDialogOpen] = useState(false)
+
+  const { data, isLoading } = useQuery(taxExemptionListOptions(accountId))
+
+  const createMutation = useMutation({
+    mutationFn: (data: Record<string, unknown>) => taxExemptionMutations.create(accountId, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: taxExemptionKeys.all(accountId) })
+      toast.success('Tax exemption added')
+      setDialogOpen(false)
+    },
+    onError: (err) => toast.error(err.message),
+  })
+
+  const approveMutation = useMutation({
+    mutationFn: taxExemptionMutations.approve,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: taxExemptionKeys.all(accountId) })
+      toast.success('Tax exemption approved')
+    },
+    onError: (err) => toast.error(err.message),
+  })
+
+  const revokeMutation = useMutation({
+    mutationFn: (id: string) => {
+      const reason = window.prompt('Reason for revoking this exemption:')
+      if (!reason) throw new Error('Reason is required')
+      return taxExemptionMutations.revoke(id, reason)
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: taxExemptionKeys.all(accountId) })
+      toast.success('Tax exemption revoked')
+    },
+    onError: (err) => toast.error(err.message),
+  })
+
+  const exemptions = data?.data ?? []
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold">Tax Exemptions</h2>
+        <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+          <DialogTrigger asChild>
+            <Button size="sm"><Plus className="mr-2 h-4 w-4" />Add Exemption</Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader><DialogTitle>Add Tax Exemption</DialogTitle></DialogHeader>
+            <TaxExemptionForm accountId={accountId} onSubmit={createMutation.mutate} loading={createMutation.isPending} />
+          </DialogContent>
+        </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>
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -1,14 +1,78 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+import { useState } from 'react'
+import { accountListOptions } from '@/api/accounts'
+import { usePagination } from '@/hooks/use-pagination'
+import { DataTable } from '@/components/shared/data-table'
+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 type { Account } from '@/types/account'
 
 export const Route = createFileRoute('/_authenticated/accounts/')({
+  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: AccountsListPage,
 })
 
 function AccountsListPage() {
+  const navigate = useNavigate()
+  const { params, setPage, setSearch, setSort } = usePagination()
+  const [searchInput, setSearchInput] = useState(params.q ?? '')
+
+  const { data, isLoading } = useQuery(accountListOptions(params))
+
+  function handleSearchSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setSearch(searchInput)
+  }
+
+  function handleRowClick(account: Account) {
+    navigate({ to: '/accounts/$accountId', params: { accountId: account.id } })
+  }
+
   return (
-    <div>
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold">Accounts</h1>
-      <p className="text-muted-foreground mt-2">Account list — coming next phase</p>
+        <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">
+        <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 accounts..."
+            value={searchInput}
+            onChange={(e) => setSearchInput(e.target.value)}
+            className="pl-9"
+          />
+        </div>
+        <Button type="submit" variant="secondary">Search</Button>
+      </form>
+
+      <DataTable
+        columns={accountColumns}
+        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}
+        onRowClick={handleRowClick}
+      />
     </div>
   )
 }

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

@@ -0,0 +1,33 @@
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { accountMutations, accountKeys } from '@/api/accounts'
+import { AccountForm } from '@/components/accounts/account-form'
+import { toast } from 'sonner'
+
+export const Route = createFileRoute('/_authenticated/accounts/new')({
+  component: NewAccountPage,
+})
+
+function NewAccountPage() {
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+
+  const mutation = useMutation({
+    mutationFn: accountMutations.create,
+    onSuccess: (account) => {
+      queryClient.invalidateQueries({ queryKey: accountKeys.lists() })
+      toast.success('Account created')
+      navigate({ to: '/accounts/$accountId', params: { accountId: account.id } })
+    },
+    onError: (err) => {
+      toast.error(err.message)
+    },
+  })
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-2xl font-bold">New Account</h1>
+      <AccountForm onSubmit={mutation.mutate} loading={mutation.isPending} />
+    </div>
+  )
+}

packages/admin/src/types/account.ts

@@ -0,0 +1,82 @@
+export interface Account {
+  id: string
+  companyId: string
+  accountNumber: string | null
+  name: string
+  email: string | null
+  phone: string | null
+  address: {
+    street?: string
+    city?: string
+    state?: string
+    zip?: string
+  } | null
+  billingMode: 'consolidated' | 'split'
+  notes: string | null
+  isActive: boolean
+  legacyId: string | null
+  legacySource: string | null
+  migratedAt: string | null
+  createdAt: string
+  updatedAt: string
+}
+
+export interface Member {
+  id: string
+  accountId: string
+  companyId: string
+  firstName: string
+  lastName: string
+  dateOfBirth: string | null
+  isMinor: boolean
+  email: string | null
+  phone: string | null
+  notes: string | null
+  legacyId: string | null
+  createdAt: string
+  updatedAt: string
+}
+
+export interface ProcessorLink {
+  id: string
+  accountId: string
+  companyId: string
+  processor: 'stripe' | 'global_payments'
+  processorCustomerId: string
+  isActive: boolean
+  createdAt: string
+}
+
+export interface PaymentMethod {
+  id: string
+  accountId: string
+  companyId: string
+  processor: 'stripe' | 'global_payments'
+  processorPaymentMethodId: string
+  cardBrand: string | null
+  lastFour: string | null
+  expMonth: number | null
+  expYear: number | null
+  isDefault: boolean
+  requiresUpdate: boolean
+  createdAt: string
+}
+
+export interface TaxExemption {
+  id: string
+  accountId: string
+  companyId: string
+  status: 'none' | 'pending' | 'approved'
+  certificateNumber: string
+  certificateType: string | null
+  issuingState: string | null
+  expiresAt: string | null
+  approvedBy: string | null
+  approvedAt: string | null
+  revokedBy: string | null
+  revokedAt: string | null
+  revokedReason: string | null
+  notes: string | null
+  createdAt: string
+  updatedAt: string
+}