✨ [feat][frontend] LinkTransactionsTable component

Author: tomy0000000

frontend/package.json

@@ -42,6 +42,7 @@
     "@tailwindcss/vite": "^4.3.0",
     "@tanstack/react-query": "^5.100.10",
     "@tanstack/react-router": "^1.170.4",
+    "@tanstack/react-table": "^8.21.3",
     "axios": "^1.16.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

frontend/pnpm-lock.yaml

@@ -0,0 +1,290 @@
+import { useQuery } from '@tanstack/react-query'
+import {
+  type ColumnDef,
+  type ColumnFiltersState,
+  type Table as TanstackTable,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  useReactTable
+} from '@tanstack/react-table'
+import { ListFilter } from 'lucide-react'
+import { useMemo, useState } from 'react'
+
+import { AccountSelect } from '@/components/account-select'
+import { Amount } from '@/components/amount'
+import { TransactionStatusBadge } from '@/components/transaction-status-badge'
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@/components/ui/table'
+import {
+  type AccountRead,
+  type TransactionRead,
+  type TransactionStatus,
+  readTransactions
+} from '@/lib/client'
+import type { Client } from '@/lib/client/client'
+import { cn, formatDateTime } from '@/lib/utils'
+
+type StatusFilter = TransactionStatus | 'ALL'
+
+export interface SelectedTransaction {
+  transaction: TransactionRead
+  account: AccountRead
+}
+
+const STATUS_FILTERS: { value: StatusFilter; label: string }[] = [
+  { value: 'ALL', label: 'All' },
+  { value: 'PENDING', label: 'Pending' },
+  { value: 'POSTED', label: 'Posted' },
+  { value: 'CLEARED', label: 'Cleared' }
+]
+
+// Stable reference for the empty state. A fresh `[]` per render makes
+// react-table treat `data` as changed every render and loops forever.
+const EMPTY_TRANSACTIONS: TransactionRead[] = []
+
+// The active filter is read from the controlled `columnFilters` React state
+// (via meta), not from `column.getFilterValue()`, which lags a render behind
+// when read inside a flexRender'd header.
+interface TransactionsTableMeta {
+  statusFilter: StatusFilter
+  setStatusFilter: (value: StatusFilter) => void
+  selectedIds: Set<number>
+  toggleTransaction: (transaction: TransactionRead) => void
+}
+
+interface StatusFilterHeaderProps {
+  table: TanstackTable<TransactionRead>
+}
+
+interface LinkTransactionsTableProps {
+  client: Client
+  selection: SelectedTransaction[]
+  onSelectionChange: (selection: SelectedTransaction[]) => void
+}
+
+function StatusFilterHeader({ table }: StatusFilterHeaderProps) {
+  const { statusFilter, setStatusFilter } = table.options
+    .meta as TransactionsTableMeta
+
+  return (
+    <div className="flex items-center gap-1">
+      Status
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon-sm" className="-my-2 size-6">
+            <ListFilter
+              className={cn(
+                'size-3.5',
+                statusFilter !== 'ALL' && 'text-primary'
+              )}
+            />
+            <span className="sr-only">Filter status</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuRadioGroup
+            value={statusFilter}
+            onValueChange={(value) => setStatusFilter(value as StatusFilter)}
+          >
+            {STATUS_FILTERS.map(({ value, label }) => (
+              <DropdownMenuRadioItem key={value} value={value}>
+                {label}
+              </DropdownMenuRadioItem>
+            ))}
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}
+
+export function LinkTransactionsTable({
+  client,
+  selection,
+  onSelectionChange
+}: LinkTransactionsTableProps) {
+  const [selectedAccount, setSelectedAccount] = useState<AccountRead | null>(
+    null
+  )
+
+  const currencyCode = selectedAccount?.currency_code
+
+  const columns = useMemo<ColumnDef<TransactionRead>[]>(
+    () => [
+      {
+        id: 'select',
+        header: () => null,
+        cell: ({ row, table }) => {
+          const meta = table.options.meta as TransactionsTableMeta
+          return (
+            <Checkbox
+              checked={meta.selectedIds.has(row.original.id)}
+              onCheckedChange={() => meta.toggleTransaction(row.original)}
+              onClick={(e) => e.stopPropagation()}
+              aria-label="Select transaction"
+            />
+          )
+        }
+      },
+      {
+        accessorKey: 'created_at',
+        header: 'Created',
+        cell: ({ row }) => formatDateTime(row.original.created_at)
+      },
+      {
+        accessorKey: 'amount',
+        header: 'Amount',
+        cell: ({ row }) => (
+          <Amount
+            amount={parseFloat(row.original.amount)}
+            currencyCode={currencyCode}
+          />
+        )
+      },
+      {
+        accessorKey: 'status',
+        header: ({ table }) => <StatusFilterHeader table={table} />,
+        filterFn: 'equals',
+        cell: ({ row }) => (
+          <TransactionStatusBadge status={row.original.status} />
+        )
+      }
+    ],
+    [currencyCode]
+  )
+
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+
+  const statusFilter =
+    (columnFilters.find((filter) => filter.id === 'status')?.value as
+      | TransactionStatus
+      | undefined) ?? 'ALL'
+
+  const setStatusFilter = (value: StatusFilter) =>
+    setColumnFilters((prev) => {
+      const rest = prev.filter((filter) => filter.id !== 'status')
+      return value === 'ALL' ? rest : [...rest, { id: 'status', value }]
+    })
+
+  const selectedIds = useMemo(
+    () => new Set(selection.map((item) => item.transaction.id)),
+    [selection]
+  )
+
+  const toggleTransaction = (transaction: TransactionRead) => {
+    if (!selectedAccount) return
+    onSelectionChange(
+      selectedIds.has(transaction.id)
+        ? selection.filter((item) => item.transaction.id !== transaction.id)
+        : [...selection, { transaction, account: selectedAccount }]
+    )
+  }
+
+  const { data } = useQuery({
+    queryKey: ['transactions', selectedAccount?.id, 'unlinked'],
+    enabled: selectedAccount !== null,
+    queryFn: async () => {
+      const response = await readTransactions({
+        client,
+        query: { account_id: selectedAccount?.id, event_id: 'empty' }
+      })
+      if (response.error) throw new Error('Failed to fetch transactions')
+      if (!response.data) throw new Error('No data returned')
+      return response.data
+    }
+  })
+
+  const table = useReactTable({
+    data: data ?? EMPTY_TRANSACTIONS,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    state: { columnFilters },
+    meta: {
+      statusFilter,
+      setStatusFilter,
+      selectedIds,
+      toggleTransaction
+    } satisfies TransactionsTableMeta
+  })
+
+  return (
+    <div className="space-y-3">
+      <AccountSelect
+        client={client}
+        value={selectedAccount}
+        onValueChange={setSelectedAccount}
+      />
+
+      <div className="min-h-66 rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={
+                    selectedIds.has(row.original.id) ? 'selected' : undefined
+                  }
+                  onClick={() => toggleTransaction(row.original)}
+                  className="cursor-pointer"
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-66 text-center text-muted-foreground"
+                >
+                  No transactions.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  )
+}

frontend/src/components/link-transactions-table.tsx

@@ -23,6 +23,13 @@ export function endExclusive(date: Date | undefined): string | null {
   return next.toISOString()
 }
 
+export function formatDateTime(value: string | Date): string {
+  return new Date(value).toLocaleString(browserLocale, {
+    dateStyle: 'medium',
+    timeStyle: 'short'
+  })
+}
+
 export function toLocalDateTimeInputValue(date: Date) {
   const offsetMs = date.getTimezoneOffset() * 60_000
   return new Date(date.getTime() - offsetMs).toISOString().slice(0, 19)