feat(web): add account detail screen with current balance

web/src/App.tsx

@@ -4,6 +4,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import { ThemeProvider } from '@/components/ThemeProvider'
+import { AccountDetail } from '@/routes/AccountDetail'
 import { Accounts } from '@/routes/Accounts'
 import { Overview } from '@/routes/Overview'
 
@@ -17,6 +18,7 @@ export function App() {
                     <Routes>
                         <Route path="/" element={<Overview />} />
                         <Route path="/accounts" element={<Accounts />} />
+                        <Route path="/accounts/:id" element={<AccountDetail />} />
                     </Routes>
                 </BrowserRouter>
             </ThemeProvider>

web/src/api/types.ts

@@ -29,3 +29,10 @@ export interface PageResponse<T> {
     totalElements: number
     totalPages: number
 }
+
+export interface BalanceResponse {
+    accountId: string
+    currency: string
+    amount: string
+    lastPostedAt: string | null
+}

web/src/components/StateMessage.tsx

@@ -0,0 +1,32 @@
+// SPDX-License-Identifier: BUSL-1.1
+// SPDX-FileCopyrightText: 2026 FinCore Engine Authors
+
+import type { ReactNode } from 'react'
+import { Icon, type IconName } from './Icon'
+
+interface StateMessageProps {
+    icon: IconName
+    text: string
+    children?: ReactNode
+}
+
+export function StateMessage({ icon, text, children }: StateMessageProps) {
+    return (
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 10,
+                padding: '64px 24px',
+                color: 'var(--text-3)',
+                fontSize: 13,
+            }}
+        >
+            <Icon name={icon} size={20} />
+            <span>{text}</span>
+            {children}
+        </div>
+    )
+}

web/src/features/accounts/AccountsTable.tsx

@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: BUSL-1.1
 // SPDX-FileCopyrightText: 2026 FinCore Engine Authors
 
+import { Link } from 'react-router-dom'
 import type { AccountResponse } from '@/api/types'
 import { StatusPill, TypePill } from './Pills'
 
@@ -20,13 +21,14 @@ export function AccountsTable({ accounts }: { accounts: AccountResponse[] }) {
                 {accounts.map((account) => (
                     <tr key={account.id}>
                         <td>
-                            <span
+                            <Link
+                                to={`/accounts/${account.id}`}
                                 className="mono"
                                 title={account.id}
-                                style={{ color: 'var(--text)' }}
+                                style={{ color: 'var(--text-accent)', textDecoration: 'none' }}
                             >
                                 {account.id}
-                            </span>
+                            </Link>
                         </td>
                         <td>{account.name}</td>
                         <td>

web/src/features/accounts/useAccount.ts

@@ -0,0 +1,20 @@
+// SPDX-License-Identifier: BUSL-1.1
+// SPDX-FileCopyrightText: 2026 FinCore Engine Authors
+
+import { useQuery } from '@tanstack/react-query'
+import { apiFetch } from '@/api/client'
+import type { AccountResponse, BalanceResponse } from '@/api/types'
+
+export function useAccount(id: string) {
+    return useQuery({
+        queryKey: ['account', id],
+        queryFn: () => apiFetch<AccountResponse>(`/v1/accounts/${id}`),
+    })
+}
+
+export function useBalance(id: string) {
+    return useQuery({
+        queryKey: ['account', id, 'balance'],
+        queryFn: () => apiFetch<BalanceResponse>(`/v1/accounts/${id}/balance`),
+    })
+}

web/src/lib/money.ts

@@ -0,0 +1,19 @@
+// SPDX-License-Identifier: BUSL-1.1
+// SPDX-FileCopyrightText: 2026 FinCore Engine Authors
+
+// Group the integer part with thousands separators while preserving the
+// fractional digits verbatim. Pure string work - never parse money to a number.
+export function formatAmount(amount: string): string {
+    const negative = amount.startsWith('-')
+    const unsigned = negative ? amount.slice(1) : amount
+    const [integer, fraction] = unsigned.split('.')
+    const grouped = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+    return (negative ? '-' : '') + grouped + (fraction ? `.${fraction}` : '')
+}
+
+export function formatInstant(iso: string): string {
+    return `${iso
+        .replace('T', ' ')
+        .replace(/\.\d+Z$/, 'Z')
+        .replace('Z', ' UTC')}`
+}

web/src/routes/AccountDetail.tsx

@@ -0,0 +1,155 @@
+// SPDX-License-Identifier: BUSL-1.1
+// SPDX-FileCopyrightText: 2026 FinCore Engine Authors
+
+import { Link, useParams } from 'react-router-dom'
+import { ApiError } from '@/api/client'
+import { Icon } from '@/components/Icon'
+import { Shell } from '@/components/Shell'
+import { StateMessage } from '@/components/StateMessage'
+import { StatusPill, TypePill } from '@/features/accounts/Pills'
+import { useAccount, useBalance } from '@/features/accounts/useAccount'
+import { formatAmount, formatInstant } from '@/lib/money'
+
+export function AccountDetail() {
+    const { id = '' } = useParams()
+    const { data: account, isPending, isError, error, refetch } = useAccount(id)
+
+    return (
+        <Shell activeNav="Accounts">
+            <div
+                style={{
+                    padding: '20px 24px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 16,
+                    flex: 1,
+                    minHeight: 0,
+                }}
+            >
+                <Link
+                    to="/accounts"
+                    style={{
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: 6,
+                        fontSize: 12,
+                        color: 'var(--text-2)',
+                        textDecoration: 'none',
+                    }}
+                >
+                    <Icon name="chevLeft" size={12} />
+                    Accounts
+                </Link>
+
+                {isPending ? (
+                    <StateMessage icon="activity" text="Loading account..." />
+                ) : isError ? (
+                    error instanceof ApiError && error.status === 404 ? (
+                        <StateMessage icon="inbox" text="Account not found." />
+                    ) : (
+                        <StateMessage icon="alert" text="Could not load account.">
+                            <button type="button" className="btn" onClick={() => refetch()}>
+                                Retry
+                            </button>
+                        </StateMessage>
+                    )
+                ) : (
+                    <>
+                        <div
+                            className="card"
+                            style={{
+                                padding: 18,
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 12,
+                                flexWrap: 'wrap',
+                            }}
+                        >
+                            <span
+                                style={{ fontSize: 19, fontWeight: 500, letterSpacing: '-0.01em' }}
+                            >
+                                {account.name}
+                            </span>
+                            <StatusPill status={account.status} />
+                            <TypePill type={account.type} />
+                            <span
+                                className="mono"
+                                style={{ fontSize: 11.5, color: 'var(--text-3)' }}
+                            >
+                                {account.id} · {account.currency}
+                            </span>
+                        </div>
+                        <BalanceCard id={id} />
+                    </>
+                )}
+            </div>
+        </Shell>
+    )
+}
+
+function BalanceCard({ id }: { id: string }) {
+    const { data: balance, isPending, isError, refetch } = useBalance(id)
+
+    return (
+        <div className="card" style={{ padding: 18, maxWidth: 360 }}>
+            <div
+                style={{
+                    fontSize: 11,
+                    color: 'var(--text-3)',
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.06em',
+                }}
+            >
+                Current balance
+            </div>
+            {isPending ? (
+                <div style={{ marginTop: 8, fontSize: 13, color: 'var(--text-3)' }}>
+                    Loading balance...
+                </div>
+            ) : isError ? (
+                <div
+                    style={{
+                        marginTop: 8,
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 10,
+                        fontSize: 13,
+                        color: 'var(--text-3)',
+                    }}
+                >
+                    <span>Could not load balance.</span>
+                    <button type="button" className="btn btn-sm" onClick={() => refetch()}>
+                        Retry
+                    </button>
+                </div>
+            ) : (
+                <>
+                    <div
+                        className="mono tnum"
+                        style={{
+                            fontSize: 32,
+                            fontWeight: 500,
+                            letterSpacing: '-0.02em',
+                            marginTop: 8,
+                        }}
+                    >
+                        <span>{formatAmount(balance.amount)}</span>{' '}
+                        <span style={{ fontSize: 14, color: 'var(--text-3)', fontWeight: 400 }}>
+                            {balance.currency}
+                        </span>
+                    </div>
+                    <div style={{ fontSize: 11.5, color: 'var(--text-2)', marginTop: 6 }}>
+                        {balance.lastPostedAt ? (
+                            <>
+                                last posted{' '}
+                                <span className="mono">{formatInstant(balance.lastPostedAt)}</span>
+                            </>
+                        ) : (
+                            'No postings yet.'
+                        )}
+                    </div>
+                </>
+            )}
+        </div>
+    )
+}

web/src/routes/Accounts.tsx

@@ -2,8 +2,8 @@
 // SPDX-FileCopyrightText: 2026 FinCore Engine Authors
 
 import { useState } from 'react'
-import { Icon } from '@/components/Icon'
 import { Shell } from '@/components/Shell'
+import { StateMessage } from '@/components/StateMessage'
 import { AccountsTable } from '@/features/accounts/AccountsTable'
 import { Pagination } from '@/features/accounts/Pagination'
 import { useAccounts } from '@/features/accounts/useAccounts'
@@ -65,32 +65,3 @@ export function Accounts() {
         </Shell>
     )
 }
-
-function StateMessage({
-    icon,
-    text,
-    children,
-}: {
-    icon: 'activity' | 'alert' | 'inbox'
-    text: string
-    children?: React.ReactNode
-}) {
-    return (
-        <div
-            style={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                gap: 10,
-                padding: '64px 24px',
-                color: 'var(--text-3)',
-                fontSize: 13,
-            }}
-        >
-            <Icon name={icon} size={20} />
-            <span>{text}</span>
-            {children}
-        </div>
-    )
-}