refactor: update pages to consume new data hooks

Replace inline useQuery calls and raw fetch patterns in page components
with the reusable hooks created in the previous commit. This removes
duplicated data-fetching logic from page files and centralizes it in
the hooks layer.

Pages updated:
- payments: list + detail
- ledger: list + booking log detail
- positions: list + detail
- parties: list + detail + associations tab
- reconciliation: list
- sagas: list + detail
- market-data: list + dataset detail
- internal-accounts: list + detail

Author: bjcoombs

frontend/src/features/internal-accounts/pages/[accountId].tsx

@@ -8,30 +8,18 @@ import { StatusBadge } from '@/shared/status-badge'
 import { TimeDisplay } from '@/shared/time-display'
 import { MoneyDisplay } from '@/shared/money-display'
 import { AuditTrail, Breadcrumbs } from '@/shared'
-import { ConnectError, Code } from '@connectrpc/connect'
 import { useApiClients } from '@/api/context'
 import { useTenantContext } from '@/contexts/tenant-context'
 import { tenantKeys } from '@/lib/query-keys'
 import { ControlAction } from '@/api/gen/meridian/internal_account/v1/internal_account_pb'
+import { useInternalAccountDetail } from '../hooks'
 
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
 
 type InternalAccountStatusLabel = 'ACTIVE' | 'SUSPENDED' | 'CLOSED' | 'UNKNOWN'
 
-interface InternalAccount {
-  accountId: string
-  accountCode: string
-  name: string
-  behaviorClass: string
-  instrumentCode: string
-  accountStatus: number
-  description: string
-  createdAt?: { seconds: bigint | number; nanos?: number } | null
-  updatedAt?: { seconds: bigint | number; nanos?: number } | null
-}
-
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
@@ -276,35 +264,10 @@ function InternalAccountTransactions({ accountId, instrumentCode }: { accountId:
 export function InternalAccountDetailPage() {
   const { accountId } = useParams<{ accountId: string }>()
   const { tenantSlug } = useTenantContext()
-  const clients = useApiClients()
 
   const queryKey = tenantKeys.internalAccount(tenantSlug ?? '', accountId ?? '')
 
-  const { data: account, isLoading, isError } = useQuery({
-    queryKey,
-    queryFn: async (): Promise<InternalAccount | null> => {
-      try {
-        const response = await clients.internalAccount.retrieveInternalAccount({ accountId: accountId ?? '' })
-        const f = response.facility
-        if (!f) return null
-        return {
-          accountId: f.accountId,
-          accountCode: f.accountCode,
-          name: f.name,
-          behaviorClass: f.behaviorClass,
-          instrumentCode: f.instrumentCode,
-          accountStatus: f.accountStatus,
-          description: f.description,
-          createdAt: f.createdAt ?? null,
-          updatedAt: f.updatedAt ?? null,
-        }
-      } catch (err: unknown) {
-        if (ConnectError.from(err).code === Code.NotFound) return null
-        throw err
-      }
-    },
-    enabled: !!accountId,
-  })
+  const { data: account, isLoading, isError } = useInternalAccountDetail(accountId)
 
   if (isLoading) {
     return <InternalAccountDetailSkeleton />

frontend/src/features/internal-accounts/pages/index.tsx

@@ -4,10 +4,8 @@ import { useNavigate } from 'react-router-dom'
 import { DataTable } from '@/shared/data-table'
 import { StatusBadge } from '@/shared/status-badge'
 import { TimeDisplay } from '@/shared'
-import { useApiClients } from '@/api/context'
-import { useTenantContext } from '@/contexts/tenant-context'
-import { tenantKeys } from '@/lib/query-keys'
 import { Button } from '@/components/ui/button'
+import { useInternalAccountsTable } from '../hooks'
 import { CreateInternalAccountDialog } from './create-internal-account-dialog'
 
 interface InternalAccountRow {
@@ -90,8 +88,7 @@ const columns: ColumnDef<InternalAccountRow>[] = [
 ]
 
 export function InternalAccountsPage() {
-  const { tenantSlug } = useTenantContext()
-  const clients = useApiClients()
+  const { queryKey, queryFn, tenantSlug } = useInternalAccountsTable()
   const navigate = useNavigate()
   const [createDialogOpen, setCreateDialogOpen] = React.useState(false)
 
@@ -121,27 +118,8 @@ export function InternalAccountsPage() {
       />
 
       <DataTable<InternalAccountRow>
-        queryKey={tenantKeys.internalAccounts(tenantSlug)}
-        queryFn={async ({ pageToken, pageSize, filters }) => {
-          const statusFilter = filters?.status ? parseInt(filters.status, 10) : 0
-          const res = await clients.internalAccount.listInternalAccounts({
-            behaviorClassFilter: filters?.behaviorClass ?? '',
-            statusFilter,
-            pagination: { pageToken: pageToken ?? '', pageSize },
-          })
-          return {
-            items: res.facilities.map((f) => ({
-              accountId: f.accountId,
-              accountCode: f.accountCode,
-              name: f.name,
-              behaviorClass: f.behaviorClass,
-              accountStatus: f.accountStatus,
-              instrumentCode: f.instrumentCode,
-              createdAt: f.createdAt ?? null,
-            })),
-            nextPageToken: res.pagination?.nextPageToken || undefined,
-          }
-        }}
+        queryKey={queryKey}
+        queryFn={queryFn}
         columns={columns}
         pageSize={25}
         filters={[

frontend/src/features/ledger/pages/booking-log-detail.tsx

@@ -1,14 +1,10 @@
 import { useParams } from 'react-router-dom'
-import { useQuery } from '@tanstack/react-query'
 import type { ColumnDef } from '@tanstack/react-table'
 import {
   flexRender,
   getCoreRowModel,
   useReactTable,
 } from '@tanstack/react-table'
-import { useApiClients } from '@/api/context'
-import { useTenantContext } from '@/contexts/tenant-context'
-import { tenantKeys } from '@/lib/query-keys'
 import { StatusBadge } from '@/shared/status-badge'
 import { TimeDisplay, EntityLink, Breadcrumbs } from '@/shared'
 import { MoneyDisplay } from '@/shared/money-display'
@@ -21,26 +17,11 @@ import {
   TableRow,
 } from '@/components/ui/table'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { useBookingLogDetail } from '../hooks'
 import { BalanceIndicator } from './balance-indicator'
 import { DirectionBadge } from './direction-badge'
 import { BookingLogHeader } from './booking-log-header'
-import type { LedgerPosting, FinancialBookingLog } from './types'
-
-function getStatusName(status: unknown): string {
-  if (typeof status === 'string') return status
-  if (typeof status === 'number') {
-    const statusMap: Record<number, string> = {
-      0: 'UNSPECIFIED',
-      1: 'PENDING',
-      2: 'POSTED',
-      3: 'FAILED',
-      4: 'CANCELLED',
-      5: 'REVERSED',
-    }
-    return statusMap[status] ?? String(status)
-  }
-  return String(status ?? '')
-}
+import type { LedgerPosting } from './types'
 
 function getDirectionName(direction: unknown): string {
   if (typeof direction === 'string') return direction
@@ -55,28 +36,6 @@ function getDirectionName(direction: unknown): string {
   return String(direction ?? '')
 }
 
-function getCurrencyName(currency: unknown): string {
-  if (typeof currency === 'string') return currency
-  if (typeof currency === 'number') {
-    const currencyMap: Record<number, string> = {
-      0: 'UNSPECIFIED',
-      1: 'GBP',
-      2: 'USD',
-      3: 'EUR',
-      4: 'JPY',
-      5: 'AUD',
-      6: 'CAD',
-      7: 'CHF',
-      8: 'CNY',
-      9: 'INR',
-      10: 'SGD',
-      11: 'HKD',
-    }
-    return currencyMap[currency] ?? String(currency)
-  }
-  return String(currency ?? '')
-}
-
 function computeTotals(postings: LedgerPosting[], _currency: string): { debitTotal: bigint; creditTotal: bigint } {
   let debitTotal = 0n
   let creditTotal = 0n
@@ -140,7 +99,7 @@ const postingColumns: ColumnDef<LedgerPosting>[] = [
     accessorKey: 'status',
     header: 'Status',
     cell: ({ row }) => (
-      <StatusBadge status={getStatusName(row.original.status)} />
+      <StatusBadge status={row.original.status} />
     ),
   },
 ]
@@ -192,60 +151,11 @@ function PostingsTable({ postings }: { postings: LedgerPosting[] }) {
 
 export function BookingLogDetailPage() {
   const { bookingLogId } = useParams<{ bookingLogId: string }>()
-  const { tenantSlug } = useTenantContext()
-  const clients = useApiClients()
-
-  const { data, isLoading, isError } = useQuery({
-    queryKey: [...tenantKeys.all(tenantSlug ?? ''), 'ledger', 'bookingLog', bookingLogId],
-    queryFn: async () => {
-      const response = await clients.financialAccounting.retrieveFinancialBookingLog({
-        id: bookingLogId ?? '',
-      })
-
-      const log = response.financialBookingLog
-      if (!log) return null
 
-      const postings: LedgerPosting[] = (log.postings ?? []).map((p) => ({
-        id: p.id,
-        financialBookingLogId: p.financialBookingLogId,
-        postingDirection: getDirectionName(p.postingDirection),
-        postingAmount: {
-          currencyCode: typeof p.postingAmount?.currencyCode === 'string'
-            ? p.postingAmount.currencyCode
-            : '',
-          units: (() => {
-            const u = p.postingAmount?.units
-            return typeof u === 'bigint' ? u : typeof u === 'number' && Number.isSafeInteger(u) ? BigInt(u) : 0n
-          })(),
-          nanos: p.postingAmount?.nanos ?? 0,
-        },
-        accountId: p.accountId,
-        valueDate: p.valueDate ?? null,
-        postingResult: p.postingResult ?? '',
-        createdAt: p.createdAt ?? null,
-        status: getStatusName(p.status),
-      }))
-
-      const bookingLog: FinancialBookingLog = {
-        id: log.id,
-        financialAccountType: String(log.financialAccountType ?? ''),
-        productServiceReference: String(log.productServiceReference ?? ''),
-        businessUnitReference: String(log.businessUnitReference ?? ''),
-        chartOfAccountsRules: String(log.chartOfAccountsRules ?? ''),
-        baseCurrency: getCurrencyName(log.baseCurrency),
-        status: getStatusName(log.status),
-        createdAt: log.createdAt ?? null,
-        updatedAt: log.updatedAt ?? null,
-        postings,
-      }
-
-      return bookingLog
-    },
-    enabled: !!tenantSlug && !!bookingLogId,
-  })
+  const { data, isLoading, isError } = useBookingLogDetail(bookingLogId)
 
   const postings = data?.postings ?? []
-  const currency = data?.baseCurrency ?? 'GBP'
+  const currency = data?.instrumentCode ?? 'GBP'
   const { debitTotal, creditTotal } = computeTotals(postings, currency)
 
   if (isLoading) {

frontend/src/features/ledger/pages/booking-log-header.tsx

@@ -36,7 +36,7 @@ export function BookingLogHeader({ bookingLog }: BookingLogHeaderProps) {
       <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
         <MetaField label="Account Type" value={bookingLog.financialAccountType} />
         <MetaField label="Business Unit" value={bookingLog.businessUnitReference} />
-        <MetaField label="Currency" value={bookingLog.baseCurrency} />
+        <MetaField label="Currency" value={bookingLog.instrumentCode} />
         <MetaField
           label="Postings"
           value={

frontend/src/features/ledger/pages/index.tsx

@@ -1,34 +1,11 @@
 import { useNavigate } from 'react-router-dom'
 import type { ColumnDef } from '@tanstack/react-table'
-import { useApiClients } from '@/api/context'
-import { useTenantContext } from '@/contexts/tenant-context'
-import { tenantKeys } from '@/lib/query-keys'
-import { DataTable, type DataTableQueryParams, type DataTableResult } from '@/shared/data-table'
+import { DataTable } from '@/shared/data-table'
 import { StatusBadge } from '@/shared/status-badge'
 import { TimeDisplay } from '@/shared'
+import { useBookingLogsTable } from '../hooks'
 import type { FinancialBookingLog } from './types'
 
-function getStatusName(status: unknown): string {
-  if (typeof status === 'string') return status
-  if (typeof status === 'number') {
-    const statusMap: Record<number, string> = {
-      0: 'UNSPECIFIED',
-      1: 'PENDING',
-      2: 'POSTED',
-      3: 'FAILED',
-      4: 'CANCELLED',
-      5: 'REVERSED',
-    }
-    return statusMap[status] ?? String(status)
-  }
-  return String(status ?? '')
-}
-
-function getInstrumentCode(value: unknown): string {
-  if (typeof value === 'string' && value) return value
-  return ''
-}
-
 const columns: ColumnDef<FinancialBookingLog>[] = [
   {
     accessorKey: 'id',
@@ -64,46 +41,9 @@ const columns: ColumnDef<FinancialBookingLog>[] = [
 ]
 
 export function LedgerPage() {
-  const { tenantSlug } = useTenantContext()
-  const clients = useApiClients()
+  const { queryKey, queryFn } = useBookingLogsTable()
   const navigate = useNavigate()
 
-  async function fetchBookingLogs(
-    params: DataTableQueryParams,
-  ): Promise<DataTableResult<FinancialBookingLog>> {
-    if (!tenantSlug) return { items: [] }
-
-    const statusFilter = params.filters?.status
-
-    const response = await clients.financialAccounting.listFinancialBookingLogs({
-      pagination: { pageSize: params.pageSize, pageToken: params.pageToken ?? '' },
-      ...(statusFilter !== undefined && { status: statusFilter as never }),
-    })
-
-    const items = (response.financialBookingLogs ?? []).map((log) => ({
-      id: log.id,
-      financialAccountType: String(log.financialAccountType ?? ''),
-      productServiceReference: String(log.productServiceReference ?? ''),
-      businessUnitReference: String(log.businessUnitReference ?? ''),
-      chartOfAccountsRules: String(log.chartOfAccountsRules ?? ''),
-      instrumentCode: getInstrumentCode(log.baseInstrumentCode),
-      status: getStatusName(log.status),
-      createdAt: log.createdAt ?? null,
-      updatedAt: log.updatedAt ?? null,
-      postings: (log.postings ?? []) as FinancialBookingLog['postings'],
-    })) as FinancialBookingLog[]
-
-    const nextPageToken =
-      typeof response.pagination?.nextPageToken === 'string'
-        ? response.pagination.nextPageToken
-        : undefined
-
-    return {
-      items,
-      nextPageToken: nextPageToken || undefined,
-    }
-  }
-
   function handleRowClick(row: FinancialBookingLog) {
     void navigate(`/ledger/${row.id}`)
   }
@@ -118,8 +58,8 @@ export function LedgerPage() {
       </div>
 
       <DataTable<FinancialBookingLog>
-        queryKey={[...(tenantSlug ? tenantKeys.all(tenantSlug) : ['no-tenant']), 'ledger', 'bookingLogs']}
-        queryFn={fetchBookingLogs}
+        queryKey={queryKey}
+        queryFn={queryFn}
         columns={columns}
         pageSize={25}
         filters={[