@burdenoff/microfe-brainyrich 2026.706.1 → 2026.706.3

package/dist/brainyrich/pages/AccountsPage.js

@@ -1,17 +1,18 @@
 import { useAccount as e, useAllAccounts as t, useArchiveAccount as n, useCreateAccount as r, usePagedAccounts as i, usePagedTransactions as a, useRecordTransaction as ee, useUpdateAccount as te } from "../hooks/useBrainyRichApi.js";
-import { LoadMore as o } from "../components/LoadMore.js";
-import { ConfirmDialog as ne } from "../components/ConfirmDialog.js";
-import { ActorName as s } from "../components/ActorName.js";
-import { HouseholdPicker as c } from "../components/pickers.js";
+import { LoadMore as ne } from "../components/LoadMore.js";
+import { ConfirmDialog as re } from "../components/ConfirmDialog.js";
+import { ActorName as o } from "../components/ActorName.js";
+import { DonutChart as ie, FadeIn as s, GlassCard as ae, StatTile as c } from "../components/viz.js";
+import { HouseholdPicker as l } from "../components/pickers.js";
 import "../components/index.js";
-import { EmptyState as l, ErrorState as u, KpiGrid as d, LoadingState as f, SectionShell as re, formatDate as p, formatMoney as m, statusBadgeVariant as ie } from "./_shared.js";
+import { EmptyState as u, ErrorState as d, LoadingState as f, SectionShell as p, formatCompact as oe, formatDate as se, formatMoney as m, statusBadgeVariant as ce } from "./_shared.js";
 import { DocumentsPanel as h } from "../components/reuse/DocumentsPanel.js";
-import { useState as g } from "react";
-import { Archive as ae, ArrowDownRight as _, ArrowUpRight as v, Landmark as oe, MoreHorizontal as se, Pencil as ce, Plus as y, Receipt as b } from "lucide-react";
+import { useMemo as le, useState as g } from "react";
+import { Archive as ue, ArrowDownRight as _, ArrowUpRight as v, Building2 as de, CheckCircle2 as fe, ChevronRight as pe, Landmark as y, Layers as me, MoreHorizontal as he, Pencil as ge, Plus as _e, Receipt as b, Wallet as ve } from "lucide-react";
 import { jsx as x, jsxs as S } from "react/jsx-runtime";
-import { Badge as C, Button as w, Card as le, CardContent as ue, CardDescription as de, CardHeader as fe, CardTitle as pe, Dialog as T, DialogClose as me, DialogContent as E, DialogDescription as D, DialogFooter as O, DialogHeader as k, DialogTitle as A, DropdownMenu as he, DropdownMenuContent as ge, DropdownMenuItem as j, DropdownMenuTrigger as _e, Input as M, Label as N, Select as P, SelectContent as F, SelectItem as I, SelectTrigger as ve, SelectValue as ye, Sheet as L, SheetContent as R, SheetDescription as z, SheetHeader as B, SheetTitle as V, Table as be, TableBody as xe, TableCell as H, TableHead as U, TableHeader as Se, TableRow as Ce, Textarea as we } from "@burdenoff/fe-libs/ui";
+import { Badge as C, Button as w, Card as ye, CardContent as be, CardDescription as xe, CardHeader as Se, CardTitle as Ce, Dialog as T, DialogClose as we, DialogContent as E, DialogDescription as D, DialogFooter as O, DialogHeader as k, DialogTitle as A, DropdownMenu as Te, DropdownMenuContent as Ee, DropdownMenuItem as De, DropdownMenuTrigger as Oe, Input as j, Label as M, Select as ke, SelectContent as Ae, SelectItem as je, SelectTrigger as Me, SelectValue as Ne, Sheet as N, SheetContent as P, SheetDescription as F, SheetHeader as I, SheetTitle as L, Table as Pe, TableBody as Fe, TableCell as R, TableHead as z, TableHeader as Ie, TableRow as B, Tabs as Le, TabsContent as V, TabsList as H, TabsTrigger as U, Textarea as Re } from "@burdenoff/fe-libs/ui";
 //#region src/brainyrich/pages/AccountsPage.tsx
-var Te = [
+var W = [
 	"BANK",
 	"BROKERAGE",
 	"RETIREMENT",
@@ -20,7 +21,7 @@ var Te = [
 	"REAL_ESTATE",
 	"ALTERNATIVE",
 	"LIABILITY"
-], Ee = [
+], ze = [
 	"BUY",
 	"SELL",
 	"DIVIDEND",
@@ -29,16 +30,25 @@ var Te = [
 	"WITHDRAWAL",
 	"FEE",
 	"TRANSFER"
-];
-function W(e) {
+], Be = {
+	BANK: "teal",
+	BROKERAGE: "brand",
+	RETIREMENT: "blue",
+	CASH: "success",
+	CRYPTO: "warning",
+	REAL_ESTATE: "purple",
+	ALTERNATIVE: "indigo",
+	LIABILITY: "error"
+};
+function G(e) {
 	return e === "DEPOSIT" || e === "DIVIDEND" || e === "INTEREST" || e === "SELL" || e === "TRANSFER";
 }
-function G(e) {
+function K(e) {
 	if (e.trim() === "") return;
 	let t = Number(e);
 	return Number.isFinite(t) ? t : void 0;
 }
-var K = {
+var q = {
 	name: "",
 	type: "BANK",
 	institution: "",
@@ -46,7 +56,7 @@ var K = {
 	cashBalance: "",
 	accountMask: "",
 	householdId: null
-}, De = {
+}, Ve = {
 	type: "DEPOSIT",
 	tradeDate: "",
 	symbol: "",
@@ -56,24 +66,35 @@ var K = {
 	fee: "",
 	notes: ""
 };
-function q() {
-	let e = t().data, a = i(), [s, c] = g(void 0), [p, h] = g(!1), [_, v] = g(K), [b, L] = g(null), [R, z] = g(K), [B, V] = g(null), [Te, W] = g(!1), [q, J] = g(De), Y = r(), X = te(), Ae = n(), Z = ee(), je = e.reduce((e, t) => e + (t.cashBalance ?? 0), 0), Me = e.filter((e) => e.status === "ACTIVE").length, Ne = new Set(e.map((e) => e.institution).filter((e) => !!e)).size, Pe = e[0]?.currency ?? "USD";
-	function Fe() {
-		v(K), h(!0);
+function J() {
+	let e = t().data, a = i(), [o, l] = g(void 0), [se, h] = g(!1), [_, v] = g(q), [b, N] = g(null), [P, F] = g(q), [I, L] = g(null), [Le, V] = g(!1), [H, U] = g(Ve), W = r(), G = te(), J = n(), X = ee(), Ue = e.reduce((e, t) => e + (t.cashBalance ?? 0), 0), We = e.filter((e) => e.status === "ACTIVE").length, Ge = new Set(e.map((e) => e.institution).filter((e) => !!e)).size, Z = e[0]?.currency ?? "USD", Ke = le(() => {
+		let t = /* @__PURE__ */ new Map();
+		for (let n of e) {
+			let e = n.cashBalance ?? 0;
+			e <= 0 || t.set(n.type, (t.get(n.type) ?? 0) + e);
+		}
+		return [...t.entries()].map(([e, t]) => ({
+			label: e.replace(/_/g, " "),
+			value: t,
+			tone: Be[e]
+		})).sort((e, t) => t.value - e.value);
+	}, [e]);
+	function qe() {
+		v(q), h(!0);
 	}
-	function Ie() {
-		_.name.trim() && Y.mutate({
+	function Je() {
+		_.name.trim() && W.mutate({
 			name: _.name.trim(),
 			type: _.type,
 			institution: _.institution.trim() || null,
 			currency: _.currency.trim() || "USD",
-			cashBalance: G(_.cashBalance) ?? 0,
+			cashBalance: K(_.cashBalance) ?? 0,
 			accountMask: _.accountMask.trim() || null,
 			householdId: _.householdId
 		}, { onSuccess: () => h(!1) });
 	}
-	function Le(e) {
-		L(e), z({
+	function Ye(e) {
+		N(e), F({
 			name: e.name,
 			type: e.type,
 			institution: e.institution ?? "",
@@ -83,416 +104,501 @@ function q() {
 			householdId: e.householdId
 		});
 	}
-	function Re() {
-		!b || !R.name.trim() || X.mutate({
+	function Xe() {
+		!b || !P.name.trim() || G.mutate({
 			id: b.id,
 			input: {
-				name: R.name.trim(),
-				type: R.type,
-				institution: R.institution.trim() || null,
-				currency: R.currency.trim() || "USD",
-				cashBalance: G(R.cashBalance) ?? 0,
-				accountMask: R.accountMask.trim() || null,
-				householdId: R.householdId
+				name: P.name.trim(),
+				type: P.type,
+				institution: P.institution.trim() || null,
+				currency: P.currency.trim() || "USD",
+				cashBalance: K(P.cashBalance) ?? 0,
+				accountMask: P.accountMask.trim() || null,
+				householdId: P.householdId
 			}
-		}, { onSuccess: () => L(null) });
+		}, { onSuccess: () => N(null) });
 	}
-	function ze() {
-		if (!B) return;
-		let e = B.id;
-		Ae.mutate(e, { onSuccess: () => {
-			V(null), s === e && c(void 0);
+	function Ze() {
+		if (!I) return;
+		let e = I.id;
+		J.mutate(e, { onSuccess: () => {
+			L(null), o === e && l(void 0);
 		} });
 	}
-	function Be() {
-		J(De), W(!0);
+	function Qe() {
+		U(Ve), V(!0);
 	}
-	let Q = G(q.amount), $ = Q !== void 0 && Q > 0, Ve = !!(s && q.tradeDate) && $;
-	function He() {
-		if (!s || !q.tradeDate || !$) return;
-		let e = new Date(q.tradeDate);
-		Number.isNaN(e.getTime()) || Z.mutate({
-			accountId: s,
-			type: q.type,
+	let Q = K(H.amount), $ = Q !== void 0 && Q > 0, $e = !!(o && H.tradeDate) && $;
+	function et() {
+		if (!o || !H.tradeDate || !$) return;
+		let e = new Date(H.tradeDate);
+		Number.isNaN(e.getTime()) || X.mutate({
+			accountId: o,
+			type: H.type,
 			tradeDate: e.toISOString(),
-			symbol: q.symbol.trim() || null,
-			quantity: G(q.quantity),
-			price: G(q.price),
+			symbol: H.symbol.trim() || null,
+			quantity: K(H.quantity),
+			price: K(H.price),
 			amount: Q,
-			fee: G(q.fee),
-			notes: q.notes.trim() || null
-		}, { onSuccess: () => W(!1) });
+			fee: K(H.fee),
+			notes: H.notes.trim() || null
+		}, { onSuccess: () => V(!1) });
 	}
-	return /* @__PURE__ */ S(re, {
+	return /* @__PURE__ */ S(p, {
 		title: "Accounts",
 		description: "Linked bank, brokerage and retirement accounts with recent activity.",
 		badges: [`${e.length} account${e.length === 1 ? "" : "s"}`],
 		actionLabel: "New account",
-		onAction: Fe,
+		onAction: qe,
 		children: [
-			/* @__PURE__ */ x(d, { items: [
-				{
-					label: "Total accounts",
-					value: String(e.length)
-				},
-				{
-					label: "Total cash",
-					value: m(je, Pe)
-				},
-				{
-					label: "Active",
-					value: `${Me}/${e.length}`
-				},
-				{
-					label: "Institutions",
-					value: String(Ne)
-				}
-			] }),
-			/* @__PURE__ */ S(le, { children: [/* @__PURE__ */ S(fe, { children: [/* @__PURE__ */ S(pe, {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ x(oe, {
-					className: "h-5 w-5",
-					"aria-hidden": "true"
-				}), "Linked accounts"]
-			}), /* @__PURE__ */ x(de, { children: "Select an account to view holdings and transactions." })] }), /* @__PURE__ */ x(ue, { children: a.isLoading ? /* @__PURE__ */ x(f, {}) : a.isError ? /* @__PURE__ */ x(u, { onRetry: () => a.refetch() }) : a.items.length === 0 ? /* @__PURE__ */ x(l, {
-				icon: /* @__PURE__ */ x(oe, {
-					className: "size-6",
-					"aria-hidden": "true"
-				}),
-				title: "No accounts yet",
-				description: "Add your first bank, brokerage or retirement account to start tracking net worth.",
-				action: /* @__PURE__ */ S(w, {
-					size: "sm",
-					onClick: Fe,
-					children: [/* @__PURE__ */ x(y, {
-						className: "size-4",
-						"aria-hidden": "true"
-					}), "New account"]
-				})
-			}) : /* @__PURE__ */ S("div", {
-				className: "overflow-x-auto",
-				children: [/* @__PURE__ */ S(be, { children: [/* @__PURE__ */ x(Se, { children: /* @__PURE__ */ S(Ce, { children: [
-					/* @__PURE__ */ x(U, { children: "Account" }),
-					/* @__PURE__ */ x(U, { children: "Type" }),
-					/* @__PURE__ */ x(U, {
-						className: "text-right",
-						children: "Cash balance"
-					}),
-					/* @__PURE__ */ x(U, { children: "Status" }),
-					/* @__PURE__ */ x(U, {
-						className: "w-12 text-right",
-						children: "Actions"
-					})
-				] }) }), /* @__PURE__ */ x(xe, { children: a.items.map((e) => /* @__PURE__ */ S(Ce, {
-					className: "cursor-pointer",
-					onClick: () => c(e.id),
+			/* @__PURE__ */ S("div", {
+				className: "grid gap-4 lg:grid-cols-3",
+				children: [/* @__PURE__ */ S("div", {
+					className: "grid gap-4 sm:grid-cols-2 lg:col-span-2",
 					children: [
-						/* @__PURE__ */ x(H, { children: /* @__PURE__ */ S("div", {
-							className: "flex items-center gap-3",
-							children: [/* @__PURE__ */ x("div", {
-								className: "flex h-9 w-9 items-center justify-center rounded-full bg-muted text-xs font-semibold text-muted-foreground",
-								children: (e.institution ?? e.name).slice(0, 2).toUpperCase()
-							}), /* @__PURE__ */ S("div", {
-								className: "min-w-0",
-								children: [/* @__PURE__ */ x("p", {
-									className: "truncate font-medium text-text-primary",
-									children: e.name
-								}), /* @__PURE__ */ S("p", {
-									className: "truncate text-xs text-text-secondary",
-									children: [e.institution ?? "Manual account", e.accountMask ? ` · ••${e.accountMask}` : ""]
-								})]
-							})]
-						}) }),
-						/* @__PURE__ */ x(H, { children: /* @__PURE__ */ x(C, {
-							variant: "outline",
-							children: e.type.replace(/_/g, " ")
-						}) }),
-						/* @__PURE__ */ x(H, {
-							className: "text-right font-semibold text-text-primary",
-							children: m(e.cashBalance, e.currency)
+						/* @__PURE__ */ x(s, {
+							index: 0,
+							children: /* @__PURE__ */ x(c, {
+								label: "Total cash",
+								value: m(Ue, Z),
+								glow: !0,
+								icon: /* @__PURE__ */ x(ve, {
+									className: "size-4",
+									"aria-hidden": "true"
+								})
+							})
 						}),
-						/* @__PURE__ */ x(H, { children: /* @__PURE__ */ x(C, {
-							variant: ie(e.status),
-							children: e.status
-						}) }),
-						/* @__PURE__ */ x(H, {
-							className: "text-right",
-							onClick: (e) => e.stopPropagation(),
-							children: /* @__PURE__ */ S(he, { children: [/* @__PURE__ */ x(_e, {
-								asChild: !0,
-								children: /* @__PURE__ */ x(w, {
-									variant: "ghost",
-									size: "sm",
-									"aria-label": `Actions for ${e.name}`,
-									children: /* @__PURE__ */ x(se, {
-										className: "size-4",
-										"aria-hidden": "true"
-									})
+						/* @__PURE__ */ x(s, {
+							index: 1,
+							children: /* @__PURE__ */ x(c, {
+								label: "Total accounts",
+								value: String(e.length),
+								icon: /* @__PURE__ */ x(y, {
+									className: "size-4",
+									"aria-hidden": "true"
 								})
-							}), /* @__PURE__ */ S(ge, {
-								align: "end",
-								children: [/* @__PURE__ */ S(j, {
-									onClick: () => Le(e),
-									children: [/* @__PURE__ */ x(ce, {
-										className: "size-4",
-										"aria-hidden": "true"
-									}), "Edit"]
-								}), /* @__PURE__ */ S(j, {
-									className: "text-status-error-text",
-									onClick: () => V(e),
-									children: [/* @__PURE__ */ x(ae, {
-										className: "size-4",
-										"aria-hidden": "true"
-									}), "Archive"]
-								})]
-							})] })
+							})
+						}),
+						/* @__PURE__ */ x(s, {
+							index: 2,
+							children: /* @__PURE__ */ x(c, {
+								label: "Active",
+								value: `${We}/${e.length}`,
+								icon: /* @__PURE__ */ x(fe, {
+									className: "size-4",
+									"aria-hidden": "true"
+								})
+							})
+						}),
+						/* @__PURE__ */ x(s, {
+							index: 3,
+							children: /* @__PURE__ */ x(c, {
+								label: "Institutions",
+								value: String(Ge),
+								icon: /* @__PURE__ */ x(de, {
+									className: "size-4",
+									"aria-hidden": "true"
+								})
+							})
 						})
 					]
-				}, e.id)) })] }), /* @__PURE__ */ x(o, {
-					hasMore: a.hasMore,
-					onClick: a.loadMore,
-					loading: a.isFetchingNextPage,
-					className: "mt-4"
+				}), /* @__PURE__ */ x(s, {
+					index: 4,
+					children: /* @__PURE__ */ S(ae, {
+						className: "h-full",
+						glow: !0,
+						children: [/* @__PURE__ */ S("div", {
+							className: "mb-2 flex items-center gap-2",
+							children: [/* @__PURE__ */ x(me, {
+								className: "size-4 text-text-secondary",
+								"aria-hidden": "true"
+							}), /* @__PURE__ */ x("h2", {
+								className: "text-sm font-semibold text-text-primary",
+								children: "Cash by account type"
+							})]
+						}), Ke.length === 0 ? /* @__PURE__ */ x("p", {
+							className: "py-8 text-center text-sm text-text-secondary",
+							children: "No cash balances recorded yet."
+						}) : /* @__PURE__ */ x(ie, {
+							data: Ke,
+							centerValue: oe(Ue, Z),
+							centerLabel: "Total cash",
+							height: 200,
+							valueFormatter: (e) => m(e, Z)
+						})]
+					})
 				})]
-			}) })] }),
+			}),
+			/* @__PURE__ */ x(s, {
+				index: 5,
+				as: "section",
+				children: /* @__PURE__ */ S(ye, {
+					className: "transition-shadow motion-safe:hover:shadow-[var(--shadow-pop-hover,var(--shadow-elevation-2))]",
+					children: [/* @__PURE__ */ S(Se, { children: [/* @__PURE__ */ S(Ce, {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ x(y, {
+							className: "h-5 w-5",
+							"aria-hidden": "true"
+						}), "Linked accounts"]
+					}), /* @__PURE__ */ x(xe, { children: "Select an account to view holdings and transactions." })] }), /* @__PURE__ */ x(be, { children: a.isLoading ? /* @__PURE__ */ x(f, {}) : a.isError ? /* @__PURE__ */ x(d, { onRetry: () => a.refetch() }) : a.items.length === 0 ? /* @__PURE__ */ x(u, {
+						icon: /* @__PURE__ */ x(y, {
+							className: "size-6",
+							"aria-hidden": "true"
+						}),
+						title: "No accounts yet",
+						description: "Add your first bank, brokerage or retirement account to start tracking net worth.",
+						action: /* @__PURE__ */ S(w, {
+							size: "sm",
+							onClick: qe,
+							children: [/* @__PURE__ */ x(_e, {
+								className: "size-4",
+								"aria-hidden": "true"
+							}), "New account"]
+						})
+					}) : /* @__PURE__ */ S("div", {
+						className: "overflow-x-auto",
+						children: [/* @__PURE__ */ S(Pe, { children: [/* @__PURE__ */ x(Ie, { children: /* @__PURE__ */ S(B, { children: [
+							/* @__PURE__ */ x(z, { children: "Account" }),
+							/* @__PURE__ */ x(z, { children: "Type" }),
+							/* @__PURE__ */ x(z, { children: "Institution" }),
+							/* @__PURE__ */ x(z, {
+								className: "text-right",
+								children: "Cash balance"
+							}),
+							/* @__PURE__ */ x(z, { children: "Status" }),
+							/* @__PURE__ */ x(z, {
+								className: "w-12 text-right",
+								children: "Actions"
+							})
+						] }) }), /* @__PURE__ */ x(Fe, { children: a.items.map((e) => /* @__PURE__ */ S(B, {
+							className: "group cursor-pointer transition-colors hover:bg-bg-elevated",
+							onClick: () => l(e.id),
+							children: [
+								/* @__PURE__ */ x(R, { children: /* @__PURE__ */ S("div", {
+									className: "flex items-center gap-3",
+									children: [/* @__PURE__ */ x("div", {
+										className: "flex h-9 w-9 items-center justify-center rounded-lg border border-border-subtle bg-bg-sunken text-xs font-semibold text-text-secondary transition-colors group-hover:border-[var(--color-action-primary-border)] group-hover:text-text-primary",
+										"aria-hidden": "true",
+										children: (e.institution ?? e.name).slice(0, 2).toUpperCase()
+									}), /* @__PURE__ */ S("div", {
+										className: "min-w-0",
+										children: [/* @__PURE__ */ S("p", {
+											className: "flex items-center gap-1 truncate font-medium text-text-primary",
+											children: [e.name, /* @__PURE__ */ x(pe, {
+												className: "size-3.5 shrink-0 text-text-secondary opacity-0 transition-opacity group-hover:opacity-100",
+												"aria-hidden": "true"
+											})]
+										}), /* @__PURE__ */ S("p", {
+											className: "truncate text-xs text-text-secondary",
+											children: [e.institution ?? "Manual account", e.accountMask ? ` · ••${e.accountMask}` : ""]
+										})]
+									})]
+								}) }),
+								/* @__PURE__ */ x(R, { children: /* @__PURE__ */ x(C, {
+									variant: "outline",
+									children: e.type.replace(/_/g, " ")
+								}) }),
+								/* @__PURE__ */ x(R, {
+									className: "text-sm text-text-secondary",
+									children: e.institution ?? "—"
+								}),
+								/* @__PURE__ */ x(R, {
+									className: "text-right font-semibold tabular-nums text-text-primary",
+									children: m(e.cashBalance, e.currency)
+								}),
+								/* @__PURE__ */ x(R, { children: /* @__PURE__ */ x(C, {
+									variant: ce(e.status),
+									children: e.status
+								}) }),
+								/* @__PURE__ */ x(R, {
+									className: "text-right",
+									onClick: (e) => e.stopPropagation(),
+									children: /* @__PURE__ */ S(Te, { children: [/* @__PURE__ */ x(Oe, {
+										asChild: !0,
+										children: /* @__PURE__ */ x(w, {
+											variant: "ghost",
+											size: "sm",
+											"aria-label": `Actions for ${e.name}`,
+											children: /* @__PURE__ */ x(he, {
+												className: "size-4",
+												"aria-hidden": "true"
+											})
+										})
+									}), /* @__PURE__ */ S(Ee, {
+										align: "end",
+										children: [/* @__PURE__ */ S(De, {
+											onClick: () => Ye(e),
+											children: [/* @__PURE__ */ x(ge, {
+												className: "size-4",
+												"aria-hidden": "true"
+											}), "Edit"]
+										}), /* @__PURE__ */ S(De, {
+											className: "text-status-error-text",
+											onClick: () => L(e),
+											children: [/* @__PURE__ */ x(ue, {
+												className: "size-4",
+												"aria-hidden": "true"
+											}), "Archive"]
+										})]
+									})] })
+								})
+							]
+						}, e.id)) })] }), /* @__PURE__ */ x(ne, {
+							hasMore: a.hasMore,
+							onClick: a.loadMore,
+							loading: a.isFetchingNextPage,
+							className: "mt-4"
+						})]
+					}) })]
+				})
+			}),
 			/* @__PURE__ */ x(T, {
-				open: p,
+				open: se,
 				onOpenChange: h,
-				children: /* @__PURE__ */ S(E, { children: [
-					/* @__PURE__ */ S(k, { children: [/* @__PURE__ */ x(A, { children: "New account" }), /* @__PURE__ */ x(D, { children: "Add a bank, brokerage or retirement account." })] }),
-					/* @__PURE__ */ x(Oe, {
-						form: _,
-						onChange: v
-					}),
-					/* @__PURE__ */ S(O, { children: [/* @__PURE__ */ x(me, {
-						asChild: !0,
-						children: /* @__PURE__ */ x(w, {
-							variant: "outline",
-							children: "Cancel"
-						})
-					}), /* @__PURE__ */ x(w, {
-						onClick: Ie,
-						disabled: !_.name.trim() || Y.isPending,
-						children: Y.isPending ? "Creating…" : "Create account"
-					})] })
-				] })
+				children: /* @__PURE__ */ S(E, {
+					className: "max-h-[90vh] overflow-y-auto",
+					children: [
+						/* @__PURE__ */ S(k, { children: [/* @__PURE__ */ x(A, { children: "New account" }), /* @__PURE__ */ x(D, { children: "Add a bank, brokerage or retirement account." })] }),
+						/* @__PURE__ */ x(Y, {
+							form: _,
+							onChange: v
+						}),
+						/* @__PURE__ */ S(O, { children: [/* @__PURE__ */ x(we, {
+							asChild: !0,
+							children: /* @__PURE__ */ x(w, {
+								variant: "outline",
+								children: "Cancel"
+							})
+						}), /* @__PURE__ */ x(w, {
+							onClick: Je,
+							disabled: !_.name.trim() || W.isPending,
+							children: W.isPending ? "Creating…" : "Create account"
+						})] })
+					]
+				})
 			}),
 			/* @__PURE__ */ x(T, {
 				open: !!b,
-				onOpenChange: (e) => !e && L(null),
-				children: /* @__PURE__ */ S(E, { children: [
-					/* @__PURE__ */ S(k, { children: [/* @__PURE__ */ x(A, { children: "Edit account" }), /* @__PURE__ */ x(D, { children: "Update account details." })] }),
-					/* @__PURE__ */ x(Oe, {
-						form: R,
-						onChange: z
-					}),
-					/* @__PURE__ */ S(O, { children: [/* @__PURE__ */ x(w, {
-						variant: "outline",
-						onClick: () => L(null),
-						children: "Cancel"
-					}), /* @__PURE__ */ x(w, {
-						onClick: Re,
-						disabled: !R.name.trim() || X.isPending,
-						children: X.isPending ? "Saving…" : "Save changes"
-					})] })
-				] })
+				onOpenChange: (e) => !e && N(null),
+				children: /* @__PURE__ */ S(E, {
+					className: "max-h-[90vh] overflow-y-auto",
+					children: [
+						/* @__PURE__ */ S(k, { children: [/* @__PURE__ */ x(A, { children: "Edit account" }), /* @__PURE__ */ x(D, { children: "Update account details." })] }),
+						/* @__PURE__ */ x(Y, {
+							form: P,
+							onChange: F
+						}),
+						/* @__PURE__ */ S(O, { children: [/* @__PURE__ */ x(w, {
+							variant: "outline",
+							onClick: () => N(null),
+							children: "Cancel"
+						}), /* @__PURE__ */ x(w, {
+							onClick: Xe,
+							disabled: !P.name.trim() || G.isPending,
+							children: G.isPending ? "Saving…" : "Save changes"
+						})] })
+					]
+				})
 			}),
-			/* @__PURE__ */ x(ne, {
-				open: !!B,
-				onOpenChange: (e) => !e && V(null),
+			/* @__PURE__ */ x(re, {
+				open: !!I,
+				onOpenChange: (e) => !e && L(null),
 				title: "Archive account?",
-				description: B ? `“${B.name}” will be archived and hidden from active lists. This does not delete its history.` : void 0,
+				description: I ? `“${I.name}” will be archived and hidden from active lists. This does not delete its history.` : void 0,
 				confirmLabel: "Archive account",
 				pendingLabel: "Archiving…",
 				destructive: !0,
-				pending: Ae.isPending,
-				onConfirm: ze
+				pending: J.isPending,
+				onConfirm: Ze
 			}),
-			/* @__PURE__ */ x(ke, {
-				accountId: s,
-				onClose: () => c(void 0),
-				onRecordTransaction: Be
+			/* @__PURE__ */ x(He, {
+				accountId: o,
+				onClose: () => l(void 0),
+				onRecordTransaction: Qe
 			}),
 			/* @__PURE__ */ x(T, {
-				open: Te,
-				onOpenChange: W,
-				children: /* @__PURE__ */ S(E, { children: [
-					/* @__PURE__ */ S(k, { children: [/* @__PURE__ */ x(A, { children: "Record transaction" }), /* @__PURE__ */ x(D, { children: "Log activity against the selected account." })] }),
-					/* @__PURE__ */ S("div", {
-						className: "grid gap-4",
-						children: [
-							/* @__PURE__ */ S("div", {
-								className: "grid grid-cols-2 gap-4",
-								children: [/* @__PURE__ */ S("div", {
-									className: "space-y-2",
-									children: [/* @__PURE__ */ x(N, {
-										htmlFor: "tx-type",
-										children: "Type"
-									}), /* @__PURE__ */ S(P, {
-										value: q.type,
-										onValueChange: (e) => J((t) => ({
-											...t,
-											type: e
-										})),
-										children: [/* @__PURE__ */ x(ve, {
-											id: "tx-type",
-											children: /* @__PURE__ */ x(ye, {})
-										}), /* @__PURE__ */ x(F, { children: Ee.map((e) => /* @__PURE__ */ x(I, {
-											value: e,
-											children: e.replace(/_/g, " ")
-										}, e)) })]
-									})]
-								}), /* @__PURE__ */ S("div", {
-									className: "space-y-2",
-									children: [/* @__PURE__ */ x(N, {
-										htmlFor: "tx-date",
-										children: "Trade date"
-									}), /* @__PURE__ */ x(M, {
-										id: "tx-date",
-										type: "date",
-										value: q.tradeDate,
-										onChange: (e) => J((t) => ({
-											...t,
-											tradeDate: e.target.value
-										}))
-									})]
-								})]
-							}),
-							/* @__PURE__ */ S("div", {
-								className: "grid grid-cols-2 gap-4",
-								children: [/* @__PURE__ */ S("div", {
-									className: "space-y-2",
-									children: [/* @__PURE__ */ x(N, {
-										htmlFor: "tx-symbol",
-										children: "Symbol"
-									}), /* @__PURE__ */ x(M, {
-										id: "tx-symbol",
-										value: q.symbol,
-										onChange: (e) => J((t) => ({
-											...t,
-											symbol: e.target.value
-										})),
-										placeholder: "e.g. VOO"
-									})]
-								}), /* @__PURE__ */ S("div", {
-									className: "space-y-2",
-									children: [
-										/* @__PURE__ */ x(N, {
-											htmlFor: "tx-amount",
-											children: "Amount"
-										}),
-										/* @__PURE__ */ x(M, {
-											id: "tx-amount",
-											type: "number",
-											min: "0",
-											step: "any",
-											value: q.amount,
-											onChange: (e) => J((t) => ({
-												...t,
-												amount: e.target.value
-											})),
-											"aria-invalid": q.amount.trim() !== "" && !$,
-											"aria-describedby": "tx-amount-hint"
-										}),
-										/* @__PURE__ */ x("p", {
-											id: "tx-amount-hint",
-											className: "text-xs text-text-secondary",
-											children: q.amount.trim() !== "" && !$ ? "Enter an amount greater than 0." : "Positive amount; direction is set by the type."
-										})
-									]
-								})]
-							}),
-							/* @__PURE__ */ S("div", {
-								className: "grid grid-cols-3 gap-4",
-								children: [
-									/* @__PURE__ */ S("div", {
+				open: Le,
+				onOpenChange: V,
+				children: /* @__PURE__ */ S(E, {
+					className: "max-h-[90vh] overflow-y-auto",
+					children: [
+						/* @__PURE__ */ S(k, { children: [/* @__PURE__ */ x(A, { children: "Record transaction" }), /* @__PURE__ */ x(D, { children: "Log activity against the selected account." })] }),
+						/* @__PURE__ */ S("div", {
+							className: "grid gap-4",
+							children: [
+								/* @__PURE__ */ S("div", {
+									className: "grid grid-cols-2 gap-4",
+									children: [/* @__PURE__ */ S("div", {
 										className: "space-y-2",
-										children: [/* @__PURE__ */ x(N, {
-											htmlFor: "tx-qty",
-											children: "Quantity"
-										}), /* @__PURE__ */ x(M, {
-											id: "tx-qty",
-											type: "number",
-											value: q.quantity,
-											onChange: (e) => J((t) => ({
+										children: [/* @__PURE__ */ x(M, {
+											htmlFor: "tx-type",
+											children: "Type"
+										}), /* @__PURE__ */ S(ke, {
+											value: H.type,
+											onValueChange: (e) => U((t) => ({
 												...t,
-												quantity: e.target.value
-											}))
+												type: e
+											})),
+											children: [/* @__PURE__ */ x(Me, {
+												id: "tx-type",
+												children: /* @__PURE__ */ x(Ne, {})
+											}), /* @__PURE__ */ x(Ae, { children: ze.map((e) => /* @__PURE__ */ x(je, {
+												value: e,
+												children: e.replace(/_/g, " ")
+											}, e)) })]
 										})]
-									}),
-									/* @__PURE__ */ S("div", {
+									}), /* @__PURE__ */ S("div", {
 										className: "space-y-2",
-										children: [/* @__PURE__ */ x(N, {
-											htmlFor: "tx-price",
-											children: "Price"
-										}), /* @__PURE__ */ x(M, {
-											id: "tx-price",
-											type: "number",
-											value: q.price,
-											onChange: (e) => J((t) => ({
+										children: [/* @__PURE__ */ x(M, {
+											htmlFor: "tx-date",
+											children: "Trade date"
+										}), /* @__PURE__ */ x(j, {
+											id: "tx-date",
+											type: "date",
+											value: H.tradeDate,
+											onChange: (e) => U((t) => ({
 												...t,
-												price: e.target.value
+												tradeDate: e.target.value
 											}))
 										})]
-									}),
-									/* @__PURE__ */ S("div", {
+									})]
+								}),
+								/* @__PURE__ */ S("div", {
+									className: "grid grid-cols-2 gap-4",
+									children: [/* @__PURE__ */ S("div", {
 										className: "space-y-2",
-										children: [/* @__PURE__ */ x(N, {
-											htmlFor: "tx-fee",
-											children: "Fee"
-										}), /* @__PURE__ */ x(M, {
-											id: "tx-fee",
-											type: "number",
-											value: q.fee,
-											onChange: (e) => J((t) => ({
+										children: [/* @__PURE__ */ x(M, {
+											htmlFor: "tx-symbol",
+											children: "Symbol"
+										}), /* @__PURE__ */ x(j, {
+											id: "tx-symbol",
+											value: H.symbol,
+											onChange: (e) => U((t) => ({
 												...t,
-												fee: e.target.value
-											}))
+												symbol: e.target.value
+											})),
+											placeholder: "e.g. VOO"
 										})]
-									})
-								]
-							}),
-							/* @__PURE__ */ S("div", {
-								className: "space-y-2",
-								children: [/* @__PURE__ */ x(N, {
-									htmlFor: "tx-notes",
-									children: "Notes"
-								}), /* @__PURE__ */ x(we, {
-									id: "tx-notes",
-									value: q.notes,
-									onChange: (e) => J((t) => ({
-										...t,
-										notes: e.target.value
-									})),
-									placeholder: "Optional note"
-								})]
-							})
-						]
-					}),
-					/* @__PURE__ */ S(O, { children: [/* @__PURE__ */ x(w, {
-						variant: "outline",
-						onClick: () => W(!1),
-						children: "Cancel"
-					}), /* @__PURE__ */ x(w, {
-						onClick: He,
-						disabled: !Ve || Z.isPending,
-						children: Z.isPending ? "Saving…" : "Record transaction"
-					})] })
-				] })
+									}), /* @__PURE__ */ S("div", {
+										className: "space-y-2",
+										children: [
+											/* @__PURE__ */ x(M, {
+												htmlFor: "tx-amount",
+												children: "Amount"
+											}),
+											/* @__PURE__ */ x(j, {
+												id: "tx-amount",
+												type: "number",
+												min: "0",
+												step: "any",
+												value: H.amount,
+												onChange: (e) => U((t) => ({
+													...t,
+													amount: e.target.value
+												})),
+												"aria-invalid": H.amount.trim() !== "" && !$,
+												"aria-describedby": "tx-amount-hint"
+											}),
+											/* @__PURE__ */ x("p", {
+												id: "tx-amount-hint",
+												className: "text-xs text-text-secondary",
+												children: H.amount.trim() !== "" && !$ ? "Enter an amount greater than 0." : "Positive amount; direction is set by the type."
+											})
+										]
+									})]
+								}),
+								/* @__PURE__ */ S("div", {
+									className: "grid grid-cols-3 gap-4",
+									children: [
+										/* @__PURE__ */ S("div", {
+											className: "space-y-2",
+											children: [/* @__PURE__ */ x(M, {
+												htmlFor: "tx-qty",
+												children: "Quantity"
+											}), /* @__PURE__ */ x(j, {
+												id: "tx-qty",
+												type: "number",
+												value: H.quantity,
+												onChange: (e) => U((t) => ({
+													...t,
+													quantity: e.target.value
+												}))
+											})]
+										}),
+										/* @__PURE__ */ S("div", {
+											className: "space-y-2",
+											children: [/* @__PURE__ */ x(M, {
+												htmlFor: "tx-price",
+												children: "Price"
+											}), /* @__PURE__ */ x(j, {
+												id: "tx-price",
+												type: "number",
+												value: H.price,
+												onChange: (e) => U((t) => ({
+													...t,
+													price: e.target.value
+												}))
+											})]
+										}),
+										/* @__PURE__ */ S("div", {
+											className: "space-y-2",
+											children: [/* @__PURE__ */ x(M, {
+												htmlFor: "tx-fee",
+												children: "Fee"
+											}), /* @__PURE__ */ x(j, {
+												id: "tx-fee",
+												type: "number",
+												value: H.fee,
+												onChange: (e) => U((t) => ({
+													...t,
+													fee: e.target.value
+												}))
+											})]
+										})
+									]
+								}),
+								/* @__PURE__ */ S("div", {
+									className: "space-y-2",
+									children: [/* @__PURE__ */ x(M, {
+										htmlFor: "tx-notes",
+										children: "Notes"
+									}), /* @__PURE__ */ x(Re, {
+										id: "tx-notes",
+										value: H.notes,
+										onChange: (e) => U((t) => ({
+											...t,
+											notes: e.target.value
+										})),
+										placeholder: "Optional note"
+									})]
+								})
+							]
+						}),
+						/* @__PURE__ */ S(O, { children: [/* @__PURE__ */ x(w, {
+							variant: "outline",
+							onClick: () => V(!1),
+							children: "Cancel"
+						}), /* @__PURE__ */ x(w, {
+							onClick: et,
+							disabled: !$e || X.isPending,
+							children: X.isPending ? "Saving…" : "Record transaction"
+						})] })
+					]
+				})
 			})
 		]
 	});
 }
-function Oe({ form: e, onChange: t }) {
+function Y({ form: e, onChange: t }) {
 	return /* @__PURE__ */ S("div", {
 		className: "grid gap-4",
 		children: [
 			/* @__PURE__ */ S("div", {
 				className: "space-y-2",
-				children: [/* @__PURE__ */ x(N, {
+				children: [/* @__PURE__ */ x(M, {
 					htmlFor: "acct-name",
 					children: "Name"
-				}), /* @__PURE__ */ x(M, {
+				}), /* @__PURE__ */ x(j, {
 					id: "acct-name",
 					value: e.name,
 					onChange: (e) => t((t) => ({
@@ -506,29 +612,29 @@ function Oe({ form: e, onChange: t }) {
 				className: "grid grid-cols-2 gap-4",
 				children: [/* @__PURE__ */ S("div", {
 					className: "space-y-2",
-					children: [/* @__PURE__ */ x(N, {
+					children: [/* @__PURE__ */ x(M, {
 						htmlFor: "acct-type",
 						children: "Type"
-					}), /* @__PURE__ */ S(P, {
+					}), /* @__PURE__ */ S(ke, {
 						value: e.type,
 						onValueChange: (e) => t((t) => ({
 							...t,
 							type: e
 						})),
-						children: [/* @__PURE__ */ x(ve, {
+						children: [/* @__PURE__ */ x(Me, {
 							id: "acct-type",
-							children: /* @__PURE__ */ x(ye, {})
-						}), /* @__PURE__ */ x(F, { children: Te.map((e) => /* @__PURE__ */ x(I, {
+							children: /* @__PURE__ */ x(Ne, {})
+						}), /* @__PURE__ */ x(Ae, { children: W.map((e) => /* @__PURE__ */ x(je, {
 							value: e,
 							children: e.replace(/_/g, " ")
 						}, e)) })]
 					})]
 				}), /* @__PURE__ */ S("div", {
 					className: "space-y-2",
-					children: [/* @__PURE__ */ x(N, {
+					children: [/* @__PURE__ */ x(M, {
 						htmlFor: "acct-currency",
 						children: "Currency"
-					}), /* @__PURE__ */ x(M, {
+					}), /* @__PURE__ */ x(j, {
 						id: "acct-currency",
 						value: e.currency,
 						onChange: (e) => t((t) => ({
@@ -541,10 +647,10 @@ function Oe({ form: e, onChange: t }) {
 			}),
 			/* @__PURE__ */ S("div", {
 				className: "space-y-2",
-				children: [/* @__PURE__ */ x(N, {
+				children: [/* @__PURE__ */ x(M, {
 					htmlFor: "acct-institution",
 					children: "Institution"
-				}), /* @__PURE__ */ x(M, {
+				}), /* @__PURE__ */ x(j, {
 					id: "acct-institution",
 					value: e.institution,
 					onChange: (e) => t((t) => ({
@@ -558,10 +664,10 @@ function Oe({ form: e, onChange: t }) {
 				className: "grid grid-cols-2 gap-4",
 				children: [/* @__PURE__ */ S("div", {
 					className: "space-y-2",
-					children: [/* @__PURE__ */ x(N, {
+					children: [/* @__PURE__ */ x(M, {
 						htmlFor: "acct-balance",
 						children: "Cash balance"
-					}), /* @__PURE__ */ x(M, {
+					}), /* @__PURE__ */ x(j, {
 						id: "acct-balance",
 						type: "number",
 						value: e.cashBalance,
@@ -572,10 +678,10 @@ function Oe({ form: e, onChange: t }) {
 					})]
 				}), /* @__PURE__ */ S("div", {
 					className: "space-y-2",
-					children: [/* @__PURE__ */ x(N, {
+					children: [/* @__PURE__ */ x(M, {
 						htmlFor: "acct-mask",
 						children: "Account mask"
-					}), /* @__PURE__ */ x(M, {
+					}), /* @__PURE__ */ x(j, {
 						id: "acct-mask",
 						value: e.accountMask,
 						onChange: (e) => t((t) => ({
@@ -586,7 +692,7 @@ function Oe({ form: e, onChange: t }) {
 					})]
 				})]
 			}),
-			/* @__PURE__ */ x(c, {
+			/* @__PURE__ */ x(l, {
 				value: e.householdId,
 				onChange: (e) => t((t) => ({
 					...t,
@@ -596,164 +702,260 @@ function Oe({ form: e, onChange: t }) {
 		]
 	});
 }
-function ke({ accountId: t, onClose: n, onRecordTransaction: r }) {
-	let { data: i, isLoading: ee, isError: te, refetch: ne } = e(t), c = a(t ? { accountId: t } : {}), d = t ? c.items : [];
-	return /* @__PURE__ */ x(L, {
+function He({ accountId: t, onClose: n, onRecordTransaction: r }) {
+	let { data: i, isLoading: ee, isError: te, refetch: re } = e(t), s = a(t ? { accountId: t } : {}), c = t ? s.items : [], l = le(() => i ? i.holdings.filter((e) => Number.isFinite(e.marketValue) && e.marketValue > 0).map((e) => ({
+		label: e.symbol,
+		value: e.marketValue
+	})).sort((e, t) => t.value - e.value) : [], [i]), p = l.reduce((e, t) => e + t.value, 0);
+	return /* @__PURE__ */ x(N, {
 		open: !!t,
 		onOpenChange: (e) => !e && n(),
-		children: /* @__PURE__ */ S(R, {
-			className: "w-full overflow-y-auto sm:max-w-lg",
-			children: [/* @__PURE__ */ S(B, { children: [/* @__PURE__ */ x(V, { children: i?.name ?? "Account" }), /* @__PURE__ */ x(z, { children: i ? `${i.institution ?? "Manual account"} · ${i.type.replace(/_/g, " ")}` : "Loading account details…" })] }), ee ? /* @__PURE__ */ x("div", {
-				className: "mt-6",
+		children: /* @__PURE__ */ S(P, {
+			className: "flex w-full flex-col overflow-y-auto p-0 sm:max-w-xl",
+			children: [/* @__PURE__ */ S(I, {
+				className: "border-b border-border-subtle px-6 pb-4 pt-6",
+				children: [/* @__PURE__ */ x(L, {
+					className: "text-lg",
+					children: i?.name ?? "Account"
+				}), /* @__PURE__ */ x(F, { children: i ? `${i.institution ?? "Manual account"} · ${i.type.replace(/_/g, " ")}` : "Loading account details…" })]
+			}), ee ? /* @__PURE__ */ x("div", {
+				className: "p-6",
 				children: /* @__PURE__ */ x(f, { rows: 3 })
 			}) : te ? /* @__PURE__ */ x("div", {
-				className: "mt-6",
-				children: /* @__PURE__ */ x(u, { onRetry: () => ne() })
+				className: "p-6",
+				children: /* @__PURE__ */ x(d, { onRetry: () => re() })
 			}) : i ? /* @__PURE__ */ S("div", {
-				className: "mt-6 space-y-6",
+				className: "space-y-6 p-6",
 				children: [
-					/* @__PURE__ */ S("div", {
-						className: "grid grid-cols-2 gap-4",
+					/* @__PURE__ */ S(ae, {
+						glow: !0,
+						className: "space-y-4",
 						children: [/* @__PURE__ */ S("div", {
-							className: "rounded-lg border border-border-subtle bg-bg-surface p-4",
-							children: [/* @__PURE__ */ x("p", {
-								className: "text-xs text-text-secondary",
-								children: "Cash balance"
-							}), /* @__PURE__ */ x("p", {
-								className: "text-xl font-semibold text-text-primary",
-								children: m(i.cashBalance, i.currency)
-							})]
-						}), /* @__PURE__ */ S("div", {
-							className: "rounded-lg border border-border-subtle bg-bg-surface p-4",
-							children: [/* @__PURE__ */ x("p", {
-								className: "text-xs text-text-secondary",
-								children: "Status"
+							className: "flex items-start justify-between gap-3",
+							children: [/* @__PURE__ */ S("div", {
+								className: "min-w-0",
+								children: [/* @__PURE__ */ x("p", {
+									className: "text-xs uppercase tracking-wide text-text-secondary",
+									children: "Cash balance"
+								}), /* @__PURE__ */ x("p", {
+									className: "mt-1 text-3xl font-semibold tracking-tight text-text-primary",
+									children: m(i.cashBalance, i.currency)
+								})]
 							}), /* @__PURE__ */ x(C, {
-								variant: ie(i.status),
+								variant: ce(i.status),
 								children: i.status
 							})]
+						}), /* @__PURE__ */ S("div", {
+							className: "flex flex-wrap items-center gap-x-6 gap-y-2 border-t border-border-subtle pt-3 text-xs",
+							children: [
+								/* @__PURE__ */ S("div", {
+									className: "flex items-center gap-1.5",
+									children: [/* @__PURE__ */ x("span", {
+										className: "text-text-secondary",
+										children: "Owner"
+									}), /* @__PURE__ */ x(o, {
+										id: i.ownerId,
+										className: "font-medium text-text-primary"
+									})]
+								}),
+								/* @__PURE__ */ S("div", {
+									className: "flex items-center gap-1.5",
+									children: [/* @__PURE__ */ x("span", {
+										className: "text-text-secondary",
+										children: "Holdings value"
+									}), /* @__PURE__ */ x("span", {
+										className: "font-medium text-text-primary",
+										children: p > 0 ? m(p, i.currency) : "—"
+									})]
+								}),
+								/* @__PURE__ */ S("div", {
+									className: "flex items-center gap-1.5",
+									children: [/* @__PURE__ */ x("span", {
+										className: "text-text-secondary",
+										children: "Positions"
+									}), /* @__PURE__ */ x("span", {
+										className: "font-medium text-text-primary",
+										children: i.holdings.length
+									})]
+								})
+							]
 						})]
 					}),
-					/* @__PURE__ */ S("div", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-4",
-						children: [/* @__PURE__ */ x("p", {
-							className: "text-xs text-text-secondary",
-							children: "Owner"
-						}), /* @__PURE__ */ x(s, {
-							id: i.ownerId,
-							className: "text-sm font-medium text-text-primary"
-						})]
-					}),
-					/* @__PURE__ */ S("div", {
-						className: "space-y-3",
+					l.length > 0 ? /* @__PURE__ */ S("div", {
+						className: "rounded-xl border border-border-subtle bg-bg-surface p-4",
 						children: [/* @__PURE__ */ x("h3", {
-							className: "text-sm font-semibold text-text-primary",
-							children: "Holdings"
-						}), i.holdings.length === 0 ? /* @__PURE__ */ x(l, {
-							title: "No holdings",
-							description: "This account has no positions recorded yet."
-						}) : /* @__PURE__ */ x("div", {
-							className: "space-y-2",
-							children: i.holdings.map((e) => /* @__PURE__ */ S("div", {
-								className: "flex items-center justify-between rounded-lg border border-border-subtle bg-bg-surface p-3",
-								children: [/* @__PURE__ */ S("div", {
-									className: "min-w-0",
-									children: [/* @__PURE__ */ x("p", {
-										className: "truncate text-sm font-medium text-text-primary",
-										children: e.symbol
-									}), e.name ? /* @__PURE__ */ x("p", {
-										className: "truncate text-xs text-text-secondary",
-										children: e.name
-									}) : null]
-								}), /* @__PURE__ */ x("span", {
-									className: "text-sm font-semibold text-text-primary",
-									children: m(e.marketValue, e.currency)
-								})]
-							}, e.id))
+							className: "mb-2 text-sm font-semibold text-text-primary",
+							children: "Holdings allocation"
+						}), /* @__PURE__ */ x(ie, {
+							data: l,
+							centerValue: oe(p, i.currency),
+							centerLabel: "Market value",
+							height: 180,
+							valueFormatter: (e) => m(e, i.currency)
 						})]
-					}),
-					/* @__PURE__ */ S("div", {
-						className: "space-y-3",
-						children: [/* @__PURE__ */ S("div", {
-							className: "flex items-center justify-between",
-							children: [/* @__PURE__ */ x("h3", {
-								className: "text-sm font-semibold text-text-primary",
-								children: "Recent transactions"
-							}), /* @__PURE__ */ S(w, {
-								size: "sm",
-								variant: "outline",
-								onClick: r,
-								children: [/* @__PURE__ */ x(b, {
-									className: "size-4",
-									"aria-hidden": "true"
-								}), "Record"]
-							})]
-						}), c.isLoading ? /* @__PURE__ */ x(f, { rows: 2 }) : c.isError ? /* @__PURE__ */ x(u, { onRetry: () => c.refetch() }) : d.length === 0 ? /* @__PURE__ */ x(l, {
-							icon: /* @__PURE__ */ x(b, {
-								className: "size-6",
-								"aria-hidden": "true"
+					}) : null,
+					/* @__PURE__ */ S(Le, {
+						defaultValue: "holdings",
+						className: "w-full",
+						children: [
+							/* @__PURE__ */ S(H, {
+								className: "w-full",
+								children: [
+									/* @__PURE__ */ x(U, {
+										value: "holdings",
+										className: "flex-1",
+										children: "Holdings"
+									}),
+									/* @__PURE__ */ x(U, {
+										value: "transactions",
+										className: "flex-1",
+										children: "Transactions"
+									}),
+									/* @__PURE__ */ x(U, {
+										value: "documents",
+										className: "flex-1",
+										children: "Documents"
+									})
+								]
 							}),
-							title: "No transactions",
-							description: "Record a transaction to see activity here.",
-							action: /* @__PURE__ */ S(w, {
-								size: "sm",
-								onClick: r,
-								children: [/* @__PURE__ */ x(y, {
-									className: "size-4",
-									"aria-hidden": "true"
-								}), "Record transaction"]
-							})
-						}) : /* @__PURE__ */ S("div", {
-							className: "space-y-2",
-							children: [d.map((e) => {
-								let t = W(e.type), n = t ? v : _, r = t ? "text-status-success-text" : "text-status-error-text";
-								return /* @__PURE__ */ S("div", {
-									className: "flex items-center justify-between rounded-lg border border-border-subtle bg-bg-surface p-3",
-									children: [/* @__PURE__ */ S("div", {
-										className: "min-w-0",
-										children: [/* @__PURE__ */ S("div", {
-											className: "flex items-center gap-2",
-											children: [/* @__PURE__ */ x(C, {
-												variant: "outline",
-												children: e.type.replace(/_/g, " ")
-											}), e.symbol ? /* @__PURE__ */ x("span", {
-												className: "truncate text-xs text-text-secondary",
-												children: e.symbol
-											}) : null]
-										}), /* @__PURE__ */ x("p", {
-											className: "mt-1 text-xs text-text-secondary",
-											children: p(e.tradeDate)
-										})]
-									}), /* @__PURE__ */ S("span", {
-										className: `inline-flex items-center gap-1 text-sm font-semibold ${r}`,
+							/* @__PURE__ */ x(V, {
+								value: "holdings",
+								className: "mt-4",
+								children: i.holdings.length === 0 ? /* @__PURE__ */ x(u, {
+									icon: /* @__PURE__ */ x(me, {
+										className: "size-6",
+										"aria-hidden": "true"
+									}),
+									title: "No holdings",
+									description: "This account has no positions recorded yet."
+								}) : /* @__PURE__ */ x("div", {
+									className: "overflow-x-auto rounded-lg border border-border-subtle",
+									children: /* @__PURE__ */ S(Pe, { children: [/* @__PURE__ */ x(Ie, { children: /* @__PURE__ */ S(B, { children: [
+										/* @__PURE__ */ x(z, { children: "Holding" }),
+										/* @__PURE__ */ x(z, {
+											className: "text-right",
+											children: "Qty"
+										}),
+										/* @__PURE__ */ x(z, {
+											className: "text-right",
+											children: "Price"
+										}),
+										/* @__PURE__ */ x(z, {
+											className: "text-right",
+											children: "Market value"
+										})
+									] }) }), /* @__PURE__ */ x(Fe, { children: i.holdings.map((e) => /* @__PURE__ */ S(B, {
+										className: "transition-colors hover:bg-bg-elevated",
 										children: [
-											/* @__PURE__ */ x(n, {
-												className: "size-4",
-												"aria-hidden": "true"
+											/* @__PURE__ */ S(R, { children: [/* @__PURE__ */ x("p", {
+												className: "font-medium text-text-primary",
+												children: e.symbol
+											}), e.name ? /* @__PURE__ */ x("p", {
+												className: "truncate text-xs text-text-secondary",
+												children: e.name
+											}) : null] }),
+											/* @__PURE__ */ x(R, {
+												className: "text-right tabular-nums text-text-secondary",
+												children: e.quantity
+											}),
+											/* @__PURE__ */ x(R, {
+												className: "text-right tabular-nums text-text-secondary",
+												children: m(e.lastPrice, e.currency)
 											}),
-											t ? "+" : "−",
-											m(Math.abs(e.amount), e.currency)
+											/* @__PURE__ */ x(R, {
+												className: "text-right font-semibold tabular-nums text-text-primary",
+												children: m(e.marketValue, e.currency)
+											})
 										]
+									}, e.id)) })] })
+								})
+							}),
+							/* @__PURE__ */ S(V, {
+								value: "transactions",
+								className: "mt-4 space-y-3",
+								children: [/* @__PURE__ */ S("div", {
+									className: "flex items-center justify-between",
+									children: [/* @__PURE__ */ x("h3", {
+										className: "text-sm font-semibold text-text-primary",
+										children: "Recent activity"
+									}), /* @__PURE__ */ S(w, {
+										size: "sm",
+										onClick: r,
+										children: [/* @__PURE__ */ x(b, {
+											className: "size-4",
+											"aria-hidden": "true"
+										}), "Record"]
 									})]
-								}, e.id);
-							}), /* @__PURE__ */ x(o, {
-								hasMore: c.hasMore,
-								onClick: c.loadMore,
-								loading: c.isFetchingNextPage
-							})]
-						})]
-					}),
-					/* @__PURE__ */ x("div", {
-						className: "space-y-3",
-						children: /* @__PURE__ */ x(h, {
-							entityType: "brainyrich-account",
-							entityId: i.id
-						})
+								}), s.isLoading ? /* @__PURE__ */ x(f, { rows: 2 }) : s.isError ? /* @__PURE__ */ x(d, { onRetry: () => s.refetch() }) : c.length === 0 ? /* @__PURE__ */ x(u, {
+									icon: /* @__PURE__ */ x(b, {
+										className: "size-6",
+										"aria-hidden": "true"
+									}),
+									title: "No transactions",
+									description: "Record a transaction to see activity here.",
+									action: /* @__PURE__ */ S(w, {
+										size: "sm",
+										onClick: r,
+										children: [/* @__PURE__ */ x(_e, {
+											className: "size-4",
+											"aria-hidden": "true"
+										}), "Record transaction"]
+									})
+								}) : /* @__PURE__ */ S("div", {
+									className: "space-y-2",
+									children: [c.map((e) => {
+										let t = G(e.type), n = t ? v : _, r = t ? "text-status-success-text" : "text-status-error-text";
+										return /* @__PURE__ */ S("div", {
+											className: "flex items-center justify-between gap-3 rounded-lg border border-border-subtle bg-bg-surface p-3 transition-colors hover:bg-bg-elevated",
+											children: [/* @__PURE__ */ S("div", {
+												className: "flex min-w-0 items-center gap-3",
+												children: [/* @__PURE__ */ x("span", {
+													className: `flex size-8 shrink-0 items-center justify-center rounded-full ${t ? "bg-status-success-bg" : "bg-status-error-bg"} ${r}`,
+													"aria-hidden": "true",
+													children: /* @__PURE__ */ x(n, { className: "size-4" })
+												}), /* @__PURE__ */ S("div", {
+													className: "min-w-0",
+													children: [/* @__PURE__ */ S("div", {
+														className: "flex items-center gap-2",
+														children: [/* @__PURE__ */ x("span", {
+															className: "truncate text-sm font-medium text-text-primary",
+															children: e.type.replace(/_/g, " ")
+														}), e.symbol ? /* @__PURE__ */ x(C, {
+															variant: "outline",
+															className: "shrink-0",
+															children: e.symbol
+														}) : null]
+													}), /* @__PURE__ */ x("p", {
+														className: "mt-0.5 text-xs text-text-secondary",
+														children: se(e.tradeDate)
+													})]
+												})]
+											}), /* @__PURE__ */ S("span", {
+												className: `shrink-0 text-sm font-semibold tabular-nums ${r}`,
+												children: [t ? "+" : "−", m(Math.abs(e.amount), e.currency)]
+											})]
+										}, e.id);
+									}), /* @__PURE__ */ x(ne, {
+										hasMore: s.hasMore,
+										onClick: s.loadMore,
+										loading: s.isFetchingNextPage
+									})]
+								})]
+							}),
+							/* @__PURE__ */ x(V, {
+								value: "documents",
+								className: "mt-4",
+								children: /* @__PURE__ */ x(h, {
+									entityType: "brainyrich-account",
+									entityId: i.id
+								})
+							})
+						]
 					})
 				]
 			}) : /* @__PURE__ */ x("div", {
-				className: "mt-6",
-				children: /* @__PURE__ */ x(l, {
+				className: "p-6",
+				children: /* @__PURE__ */ x(u, {
 					title: "Account not found",
 					description: "This account is no longer available."
 				})
@@ -762,6 +964,6 @@ function ke({ accountId: t, onClose: n, onRecordTransaction: r }) {
 	});
 }
 //#endregion
-export { q as AccountsPage };
+export { J as AccountsPage };
 
 //# sourceMappingURL=AccountsPage.js.map