feat: add accounts tab to party detail page (#1291)

* feat: add accounts tab to party detail page

Adds a new Accounts tab to the party detail page listing all accounts
owned by the party (filtered by orgPartyId) with links to account details.

* fix: fetch multiple pages to avoid sparse results from client-side party filter

The ListCurrentAccounts API has no partyId filter, requiring client-side
filtering by orgPartyId. To avoid returning sparse pages (which misrepresent
pagination state), the loader now fetches API pages in a loop until it has
collected pageSize matching accounts or all pages are exhausted.

* fix: cap sequential API page fetches with MAX_PAGES guard

Prevents unbounded API calls when a party owns few accounts in a large
dataset. Limits to 10 pages (1000 accounts scanned) per pagination request.

* fix: use remaining slots as API batch size to prevent dropping overflow matches

When fetching 100 accounts per batch but returning only pageSize, same-page
matches exceeding pageSize were silently dropped. Now requests at most
(pageSize - collected) accounts per batch so all matches on a single API
page fit within the UI page and are never skipped.

* test: update E2E party tab layout tests for 8-tab layout

Add 'Accounts' to expected tab list and update grid-cols assertion
from 7 to 8 to match the new accounts tab.

---------

Co-authored-by: Ben Coombs <bjcoombs@users.noreply.github.com>

Author: bjcoombs

frontend/e2e/specs/parties.spec.ts

@@ -90,7 +90,7 @@ test.describe('Party detail navigation', () => {
   })
 })
 
-test.describe('Party detail — 7-tab layout', () => {
+test.describe('Party detail — 8-tab layout', () => {
   test.beforeEach(async ({ authenticatedPage: page }) => {
     await navigateTo(page, '/parties')
     const rowCount = await page.locator('table tbody tr').count()
@@ -103,14 +103,15 @@ test.describe('Party detail — 7-tab layout', () => {
     await expect(page.getByRole('heading', { name: 'Party Details' })).toBeVisible()
   })
 
-  test('renders all 7 tab triggers', async ({ authenticatedPage: page }) => {
+  test('renders all 8 tab triggers', async ({ authenticatedPage: page }) => {
     const expectedTabs = [
       'Overview',
       'Demographics',
       'References',
       'Associations',
       'Bank Relations',
       'Payment Methods',
+      'Accounts',
       'Audit Trail',
     ] as const
 
@@ -119,11 +120,11 @@ test.describe('Party detail — 7-tab layout', () => {
     }
   })
 
-  test('tab list has 7-column grid layout', async ({ authenticatedPage: page }) => {
+  test('tab list has 8-column grid layout', async ({ authenticatedPage: page }) => {
     const tabList = page.getByRole('tablist')
     await expect(tabList).toBeVisible()
-    // Verify the CSS grid class from [partyId].tsx:33
-    await expect(tabList).toHaveClass(/grid-cols-7/)
+    // Verify the CSS grid class from [partyId].tsx:34
+    await expect(tabList).toHaveClass(/grid-cols-8/)
   })
 
   test('Overview tab is selected by default', async ({ authenticatedPage: page }) => {

frontend/src/pages/parties/[partyId].tsx

@@ -10,6 +10,7 @@ import { AssociationsTab } from './tabs/associations-tab'
 import { BankRelationsTab } from './tabs/bank-relations-tab'
 import { PaymentMethodsTab } from './tabs/payment-methods-tab'
 import { AuditTrailTab } from './tabs/audit-trail-tab'
+import { AccountsTab } from './tabs/accounts-tab'
 
 export function PartyDetailPage() {
   const { partyId } = useParams<{ partyId: string }>()
@@ -30,13 +31,14 @@ export function PartyDetailPage() {
 
       <Card>
         <Tabs defaultValue="overview" className="w-full">
-          <TabsList className="grid w-full grid-cols-7 border-b rounded-none">
+          <TabsList className="grid w-full grid-cols-8 border-b rounded-none">
             <TabsTrigger value="overview">Overview</TabsTrigger>
             <TabsTrigger value="demographics">Demographics</TabsTrigger>
             <TabsTrigger value="references">References</TabsTrigger>
             <TabsTrigger value="associations">Associations</TabsTrigger>
             <TabsTrigger value="bank-relations">Bank Relations</TabsTrigger>
             <TabsTrigger value="payment-methods">Payment Methods</TabsTrigger>
+            <TabsTrigger value="accounts">Accounts</TabsTrigger>
             <TabsTrigger value="audit-trail">Audit Trail</TabsTrigger>
           </TabsList>
 
@@ -65,6 +67,10 @@ export function PartyDetailPage() {
               <PaymentMethodsTab partyId={partyId} />
             </TabsContent>
 
+            <TabsContent value="accounts" className="mt-0">
+              <AccountsTab partyId={partyId} />
+            </TabsContent>
+
             <TabsContent value="audit-trail" className="mt-0">
               <AuditTrailTab partyId={partyId} />
             </TabsContent>

frontend/src/pages/parties/tabs/accounts-tab.tsx

@@ -0,0 +1,132 @@
+import * as React from 'react'
+import { useNavigate } from 'react-router-dom'
+import type { ColumnDef } from '@tanstack/react-table'
+import { DataTable } from '@/components/shared/data-table'
+import type { DataTableQueryParams, DataTableResult } from '@/components/shared/data-table'
+import { EntityLink } from '@/components/shared/entity-link'
+import { StatusBadge } from '@/components/shared/status-badge'
+import { TimeDisplay } from '@/components/shared/time-display'
+import { useClients } from '@/api/context'
+import { useTenantSlug } from '@/hooks/use-tenant-context'
+import { tenantKeys } from '@/lib/query-keys'
+import { AccountStatus } from '@/api/gen/meridian/current_account/v1/current_account_pb'
+
+interface AccountsTabProps {
+  partyId: string
+}
+
+interface AccountRow {
+  accountId: string
+  externalReference: string
+  status: string
+  instrumentCode: string
+  createdAt?: { seconds: number | bigint; nanos?: number }
+}
+
+const ACCOUNT_STATUS_NAMES: Record<number, string> = {
+  [AccountStatus.ACTIVE]: 'ACTIVE',
+  [AccountStatus.FROZEN]: 'FROZEN',
+  [AccountStatus.CLOSED]: 'CLOSED',
+}
+
+const columns: ColumnDef<AccountRow>[] = [
+  {
+    accessorKey: 'accountId',
+    header: 'Account ID',
+    cell: ({ row }) => (
+      <EntityLink type="account" id={row.original.accountId} />
+    ),
+  },
+  {
+    accessorKey: 'externalReference',
+    header: 'External Ref',
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    cell: ({ row }) => <StatusBadge status={row.original.status} />,
+  },
+  {
+    accessorKey: 'instrumentCode',
+    header: 'Instrument',
+  },
+  {
+    accessorKey: 'createdAt',
+    header: 'Created',
+    cell: ({ row }) => <TimeDisplay timestamp={row.original.createdAt} format="relative" />,
+  },
+]
+
+export function AccountsTab({ partyId }: AccountsTabProps) {
+  const clients = useClients()
+  const tenantSlug = useTenantSlug()
+  const navigate = useNavigate()
+
+  const queryKey = React.useMemo(
+    () => [...tenantKeys.party(tenantSlug ?? '', partyId), 'accounts'],
+    [tenantSlug, partyId],
+  )
+
+  const queryFn = React.useCallback(
+    async (params: DataTableQueryParams): Promise<DataTableResult<AccountRow>> => {
+      if (!tenantSlug) return { items: [] }
+
+      // The API does not support filtering by partyId, so we fetch pages and filter
+      // client-side. We continue fetching until we have enough matching rows to fill
+      // pageSize, or the API is exhausted. MAX_PAGES caps sequential API calls to
+      // prevent unbounded fetching when the party owns few accounts in a large dataset.
+      const MAX_PAGES = 10
+      const collected: AccountRow[] = []
+      let cursor = params.pageToken ?? ''
+      let nextPageToken: string | undefined
+      let pagesScanned = 0
+
+      while (collected.length < params.pageSize && pagesScanned < MAX_PAGES) {
+        pagesScanned++
+        // Use remaining slots as batch size to avoid dropping same-page overflow:
+        // if the batch were larger than remaining slots, we might get more matches
+        // than pageSize in one batch but nextPageToken would advance past them.
+        const remaining = Math.max(params.pageSize - collected.length, 1)
+        const response = await clients.currentAccount.listCurrentAccounts({
+          pageSize: remaining,
+          pageToken: cursor,
+        })
+
+        for (const a of response.accounts ?? []) {
+          if (a.orgPartyId === partyId) {
+            collected.push({
+              accountId: a.accountId,
+              externalReference: a.externalIdentifier ?? '',
+              status: ACCOUNT_STATUS_NAMES[a.accountStatus] ?? String(a.accountStatus),
+              instrumentCode: a.instrumentCode || '',
+              createdAt: a.createdAt ?? undefined,
+            })
+          }
+        }
+
+        if (!response.nextPageToken) {
+          nextPageToken = undefined
+          break
+        }
+
+        cursor = response.nextPageToken
+        nextPageToken = response.nextPageToken
+      }
+
+      return {
+        items: collected.slice(0, params.pageSize),
+        nextPageToken,
+      }
+    },
+    [tenantSlug, partyId, clients],
+  )
+
+  return (
+    <DataTable
+      queryKey={queryKey}
+      queryFn={queryFn}
+      columns={columns}
+      onRowClick={(row) => navigate(`/accounts/${row.accountId}`)}
+    />
+  )
+}