fix: align party detail and account transaction UI with proto definitions (#1277)

* fix: align party detail components and account transactions with proto definitions

Party detail tabs were calling non-existent RPC methods (getParticipant,
updateParticipant, getReferences, etc.) and using wrong field names.
Updated all 7 tabs to use correct proto-generated methods (retrieveParty,
retrieveDemographics, retrieveReference, etc.) and field mappings.

Account detail transactions tab was rendering raw enum integers for
direction and status, and accessing nested amount fields incorrectly.
Added enum-to-label helpers and fixed field access paths.

* fix: remove unused PaymentMethod interface

* fix: scope E2E references tab assertion to tabpanel

The getByText('References') was matching both the tab label and the
heading inside the empty state, causing a strict mode violation.

* fix: address review feedback from CodeRabbit

- Reset demographics form to loaded values on cancel (not empty)
- Rename getPostingStatusName to getTransactionStatusName for accuracy

* fix: address CodeRabbit review feedback

- Add .first() to E2E references tab or-locator to prevent strict mode violation
- Add htmlFor/id to demographics form labels for accessibility

---------

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

Author: bjcoombs

frontend/e2e/specs/parties.spec.ts

@@ -195,8 +195,11 @@ test.describe('Tab switching', () => {
     await switchToTab(page, 'References')
     await expect(page.getByRole('tab', { name: 'References', selected: true })).toBeVisible()
     // ReferencesTab always renders EmptyState when not loading (references-tab.tsx:30)
+    // Scope to tabpanel to avoid matching the tab label itself
     await expect(
-      page.getByText('References').or(page.getByText('No references information available'))
+      page.getByRole('tabpanel').getByRole('heading', { name: 'References' })
+        .or(page.getByRole('tabpanel').getByText('No references information available'))
+        .first()
     ).toBeVisible()
   })
 

frontend/src/pages/accounts/[accountId].tsx

@@ -204,6 +204,28 @@ function DetailField({ label, children }: { label: string; children: React.React
   )
 }
 
+// ---------------------------------------------------------------------------
+// Enum helpers
+// ---------------------------------------------------------------------------
+
+function getDirectionName(direction: unknown): string {
+  if (typeof direction === 'string') return direction
+  if (typeof direction === 'number') {
+    const dirMap: Record<number, string> = { 0: 'UNSPECIFIED', 1: 'DEBIT', 2: 'CREDIT' }
+    return dirMap[direction] ?? String(direction)
+  }
+  return String(direction ?? '')
+}
+
+function getTransactionStatusName(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 ?? '')
+}
+
 // ---------------------------------------------------------------------------
 // Transactions (ledger postings for this account)
 // ---------------------------------------------------------------------------
@@ -258,16 +280,16 @@ function AccountTransactions({ accountId, instrumentCode }: { accountId: string;
                 {postings.map((p) => (
                   <tr key={p.id} className="border-b last:border-0">
                     <td className="py-2 pr-4">
-                      <StatusBadge status={String(p.postingDirection ?? '')} />
+                      <StatusBadge status={getDirectionName(p.postingDirection)} />
                     </td>
                     <td className="py-2 pr-4 tabular-nums">
                       <MoneyDisplay
-                        amount={p.postingAmount?.amount?.units}
-                        currency={p.postingAmount?.amount?.currencyCode ?? instrumentCode}
+                        amount={p.postingAmount?.units}
+                        currency={p.postingAmount?.currencyCode ?? instrumentCode}
                       />
                     </td>
                     <td className="py-2 pr-4">
-                      <StatusBadge status={String(p.status ?? '')} />
+                      <StatusBadge status={getTransactionStatusName(p.status)} />
                     </td>
                     <td className="py-2">
                       <TimeDisplay timestamp={p.createdAt} format="relative" />

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

@@ -7,16 +7,19 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom'
 vi.mock('@/api/context', () => ({
   useClients: vi.fn(() => ({
     party: {
-      getParticipant: vi.fn().mockResolvedValue({
-        partyId: 'test-party-1',
-        name: 'Test Party',
-        partyType: 'ORGANIZATION',
-        status: 'ACTIVE',
+      retrieveParty: vi.fn().mockResolvedValue({
+        party: {
+          partyId: 'test-party-1',
+          legalName: 'Test Party',
+          partyType: 'PARTY_TYPE_ORGANIZATION',
+          status: 'PARTY_STATUS_ACTIVE',
+        },
       }),
-      getPaymentMethods: vi.fn().mockResolvedValue({ paymentMethods: [] }),
-      getReferences: vi.fn().mockResolvedValue({}),
-      getAssociations: vi.fn().mockResolvedValue({}),
-      getBankRelations: vi.fn().mockResolvedValue({}),
+      listPaymentMethods: vi.fn().mockResolvedValue({ paymentMethods: [] }),
+      retrieveReference: vi.fn().mockResolvedValue({}),
+      retrieveAssociations: vi.fn().mockResolvedValue({}),
+      retrieveBankRelations: vi.fn().mockResolvedValue({}),
+      retrieveDemographics: vi.fn().mockResolvedValue(null),
     },
   })),
 }))

frontend/src/pages/parties/components/party-header.test.tsx

@@ -3,12 +3,12 @@ import { render, screen, waitFor } from '@testing-library/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { PartyHeader } from './party-header'
 
-const mockGetParticipant = vi.fn()
+const mockRetrieveParty = vi.fn()
 
 vi.mock('@/api/context', () => ({
   useClients: vi.fn(() => ({
     party: {
-      getParticipant: mockGetParticipant,
+      retrieveParty: mockRetrieveParty,
     },
   })),
 }))
@@ -33,12 +33,11 @@ function renderPartyHeader(partyId = 'test-party-1') {
 describe('PartyHeader - loading state', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockGetParticipant.mockReturnValue(new Promise(() => {})) // never resolves
+    mockRetrieveParty.mockReturnValue(new Promise(() => {})) // never resolves
   })
 
   it('renders skeleton placeholders while loading', () => {
     renderPartyHeader()
-    // Skeletons are rendered during loading - check for loading container
     const container = document.querySelector('.space-y-4')
     expect(container).toBeInTheDocument()
   })
@@ -52,183 +51,77 @@ describe('PartyHeader - loading state', () => {
 describe('PartyHeader - error/not found state', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockGetParticipant.mockResolvedValue(undefined)
+    mockRetrieveParty.mockResolvedValue({ party: undefined })
   })
 
   it('shows "Party not found" when party data is undefined', async () => {
     renderPartyHeader()
-
     await waitFor(() => {
       expect(screen.getByText('Party not found')).toBeInTheDocument()
     })
   })
 })
 
-describe('PartyHeader - INDIVIDUAL party type', () => {
+describe('PartyHeader - PARTY_TYPE_PERSON', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockGetParticipant.mockResolvedValue({
-      partyId: 'indv-001',
-      name: 'Jane Smith',
-      partyType: 'INDIVIDUAL',
-      status: 'ACTIVE',
+    mockRetrieveParty.mockResolvedValue({
+      party: {
+        partyId: 'indv-001',
+        legalName: 'Jane Smith',
+        partyType: 'PARTY_TYPE_PERSON',
+        status: 'PARTY_STATUS_ACTIVE',
+      },
     })
   })
 
-  it('renders party name', async () => {
+  it('renders party legal name', async () => {
     renderPartyHeader('indv-001')
     await waitFor(() => {
       expect(screen.getByText('Jane Smith')).toBeInTheDocument()
     })
   })
 
-  it('renders INDIVIDUAL party type label', async () => {
+  it('renders party type label', async () => {
     renderPartyHeader('indv-001')
     await waitFor(() => {
-      expect(screen.getByText('INDIVIDUAL')).toBeInTheDocument()
+      expect(screen.getByText('PARTY_TYPE_PERSON')).toBeInTheDocument()
     })
   })
 
-  it('renders ACTIVE status badge', async () => {
+  it('renders status badge', async () => {
     renderPartyHeader('indv-001')
     await waitFor(() => {
-      expect(screen.getByText('ACTIVE')).toBeInTheDocument()
+      expect(screen.getByText(/ACTIVE/)).toBeInTheDocument()
     })
   })
 })
 
-describe('PartyHeader - ORGANIZATION party type', () => {
+describe('PartyHeader - PARTY_TYPE_ORGANIZATION', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockGetParticipant.mockResolvedValue({
-      partyId: 'org-001',
-      name: 'Acme Corp',
-      partyType: 'ORGANIZATION',
-      status: 'INACTIVE',
+    mockRetrieveParty.mockResolvedValue({
+      party: {
+        partyId: 'org-001',
+        legalName: 'Acme Corp',
+        partyType: 'PARTY_TYPE_ORGANIZATION',
+        status: 'PARTY_STATUS_RESTRICTED',
+      },
     })
   })
 
-  it('renders party name', async () => {
+  it('renders party legal name', async () => {
     renderPartyHeader('org-001')
     await waitFor(() => {
       expect(screen.getByText('Acme Corp')).toBeInTheDocument()
     })
   })
 
-  it('renders ORGANIZATION party type label', async () => {
+  it('renders party type label', async () => {
     renderPartyHeader('org-001')
     await waitFor(() => {
-      expect(screen.getByText('ORGANIZATION')).toBeInTheDocument()
-    })
-  })
-
-  it('renders INACTIVE status badge', async () => {
-    renderPartyHeader('org-001')
-    await waitFor(() => {
-      expect(screen.getByText('INACTIVE')).toBeInTheDocument()
-    })
-  })
-})
-
-describe('PartyHeader - GOVERNMENT party type', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockGetParticipant.mockResolvedValue({
-      partyId: 'gov-001',
-      name: 'HM Treasury',
-      partyType: 'GOVERNMENT',
-      status: 'SUSPENDED',
-    })
-  })
-
-  it('renders party name', async () => {
-    renderPartyHeader('gov-001')
-    await waitFor(() => {
-      expect(screen.getByText('HM Treasury')).toBeInTheDocument()
-    })
-  })
-
-  it('renders GOVERNMENT party type label', async () => {
-    renderPartyHeader('gov-001')
-    await waitFor(() => {
-      expect(screen.getByText('GOVERNMENT')).toBeInTheDocument()
-    })
-  })
-
-  it('renders SUSPENDED status badge', async () => {
-    renderPartyHeader('gov-001')
-    await waitFor(() => {
-      expect(screen.getByText('SUSPENDED')).toBeInTheDocument()
-    })
-  })
-})
-
-describe('PartyHeader - status badge variants', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('renders PENDING_VERIFICATION status', async () => {
-    mockGetParticipant.mockResolvedValue({
-      partyId: 'party-pv',
-      name: 'Pending Party',
-      partyType: 'INDIVIDUAL',
-      status: 'PENDING_VERIFICATION',
-    })
-    renderPartyHeader('party-pv')
-    await waitFor(() => {
-      // StatusBadge renders the status, which may format underscores as spaces
-      expect(screen.getByText(/pending.?verification/i)).toBeInTheDocument()
-    })
-  })
-})
-
-describe('PartyHeader - verification status', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('shows verification status when provided', async () => {
-    mockGetParticipant.mockResolvedValue({
-      partyId: 'party-v',
-      name: 'Verified Party',
-      partyType: 'ORGANIZATION',
-      status: 'ACTIVE',
-      verificationStatus: 'KYC_COMPLETE',
-    })
-    renderPartyHeader('party-v')
-    await waitFor(() => {
-      expect(screen.getByText('Verification: KYC_COMPLETE')).toBeInTheDocument()
-    })
-  })
-
-  it('does not show verification section when verificationStatus is absent', async () => {
-    mockGetParticipant.mockResolvedValue({
-      partyId: 'party-nv',
-      name: 'Unverified Party',
-      partyType: 'INDIVIDUAL',
-      status: 'ACTIVE',
-    })
-    renderPartyHeader('party-nv')
-    await waitFor(() => {
-      expect(screen.getByText('Unverified Party')).toBeInTheDocument()
-    })
-    expect(screen.queryByText(/verification:/i)).not.toBeInTheDocument()
-  })
-
-  it('does not show verification section when verificationStatus is empty string', async () => {
-    mockGetParticipant.mockResolvedValue({
-      partyId: 'party-ev',
-      name: 'Empty Verification',
-      partyType: 'INDIVIDUAL',
-      status: 'ACTIVE',
-      verificationStatus: '',
-    })
-    renderPartyHeader('party-ev')
-    await waitFor(() => {
-      expect(screen.getByText('Empty Verification')).toBeInTheDocument()
+      expect(screen.getByText('PARTY_TYPE_ORGANIZATION')).toBeInTheDocument()
     })
-    expect(screen.queryByText(/verification:/i)).not.toBeInTheDocument()
   })
 })
 
@@ -238,11 +131,13 @@ describe('PartyHeader - party name display', () => {
   })
 
   it('renders party name as heading level 2', async () => {
-    mockGetParticipant.mockResolvedValue({
-      partyId: 'party-h2',
-      name: 'Test Corporation',
-      partyType: 'ORGANIZATION',
-      status: 'ACTIVE',
+    mockRetrieveParty.mockResolvedValue({
+      party: {
+        partyId: 'party-h2',
+        legalName: 'Test Corporation',
+        partyType: 'PARTY_TYPE_ORGANIZATION',
+        status: 'PARTY_STATUS_ACTIVE',
+      },
     })
     renderPartyHeader('party-h2')
     await waitFor(() => {
@@ -251,16 +146,18 @@ describe('PartyHeader - party name display', () => {
     })
   })
 
-  it('calls getParticipant with the correct partyId', async () => {
-    mockGetParticipant.mockResolvedValue({
-      partyId: 'specific-id',
-      name: 'Specific Party',
-      partyType: 'INDIVIDUAL',
-      status: 'ACTIVE',
+  it('calls retrieveParty with the correct partyId', async () => {
+    mockRetrieveParty.mockResolvedValue({
+      party: {
+        partyId: 'specific-id',
+        legalName: 'Specific Party',
+        partyType: 'PARTY_TYPE_PERSON',
+        status: 'PARTY_STATUS_ACTIVE',
+      },
     })
     renderPartyHeader('specific-id')
     await waitFor(() => {
-      expect(mockGetParticipant).toHaveBeenCalledWith({ partyId: 'specific-id' })
+      expect(mockRetrieveParty).toHaveBeenCalledWith({ partyId: 'specific-id' })
     })
   })
 })