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.
2026-03-28 07:45:52 -05:00
parent e734ef4606
commit 9abdf6c050
23 changed files with 1688 additions and 6 deletions
--- a/packages/admin/src/components/shared/data-table.tsx
+++ b/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>
+  )
+}