@burdenoff/microfe-brainyrich 2026.705.1 → 2026.706.2

package/dist/brainyrich/pages/AccountsPage.js

@@ -1,11 +1,18 @@
-import { useAccount as e, useAccounts as t, useArchiveAccount as n, useCreateAccount as r, useRecordTransaction as i, useTransactions as ee, useUpdateAccount as te } from "../hooks/useBrainyRichApi.js";
-import { EmptyState as a, ErrorState as o, KpiGrid as s, LoadingState as c, SectionShell as ne, formatDate as re, formatMoney as l, statusBadgeVariant as u } from "./_shared.js";
-import { useState as d } from "react";
-import { Archive as f, ArrowDownRight as p, ArrowUpRight as m, Landmark as ie, MoreHorizontal as ae, Pencil as oe, Plus as h, Receipt as g } from "lucide-react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { Badge as y, Button as b, Card as se, CardContent as ce, CardDescription as le, CardHeader as ue, CardTitle as de, Dialog as x, DialogClose as fe, DialogContent as S, DialogDescription as C, DialogFooter as w, DialogHeader as T, DialogTitle as E, DropdownMenu as pe, DropdownMenuContent as me, DropdownMenuItem as he, DropdownMenuTrigger as ge, Input as D, Label as O, Select as _e, SelectContent as k, SelectItem as A, SelectTrigger as j, SelectValue as M, Sheet as N, SheetContent as P, SheetDescription as F, SheetHeader as I, SheetTitle as L, Table as ve, TableBody as ye, TableCell as R, TableHead as z, TableHeader as be, TableRow as xe, Textarea as Se } from "@burdenoff/fe-libs/ui";
+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 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 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 { 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 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 B = [
+var W = [
 	"BANK",
 	"BROKERAGE",
 	"RETIREMENT",
@@ -14,7 +21,7 @@ var B = [
 	"REAL_ESTATE",
 	"ALTERNATIVE",
 	"LIABILITY"
-], Ce = [
+], ze = [
 	"BUY",
 	"SELL",
 	"DIVIDEND",
@@ -23,23 +30,33 @@ var B = [
 	"WITHDRAWAL",
 	"FEE",
 	"TRANSFER"
-];
-function V(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 H(e) {
+function K(e) {
 	if (e.trim() === "") return;
 	let t = Number(e);
 	return Number.isFinite(t) ? t : void 0;
 }
-var U = {
+var q = {
 	name: "",
 	type: "BANK",
 	institution: "",
 	currency: "USD",
 	cashBalance: "",
-	accountMask: ""
-}, we = {
+	accountMask: "",
+	householdId: null
+}, Ve = {
 	type: "DEPOSIT",
 	tradeDate: "",
 	symbol: "",
@@ -49,425 +66,539 @@ var U = {
 	fee: "",
 	notes: ""
 };
-function W() {
-	let { data: e, isLoading: ee, isError: re, refetch: p } = t(), [m, g] = d(void 0), [N, P] = d(!1), [F, I] = d(U), [L, B] = d(null), [V, W] = d(U), [G, K] = d(null), [De, q] = d(!1), [J, Y] = d(we), X = r(), Z = te(), Q = n(), $ = i(), Oe = e.reduce((e, t) => e + (t.cashBalance ?? 0), 0), ke = e.filter((e) => e.status === "ACTIVE").length, Ae = new Set(e.map((e) => e.institution).filter((e) => !!e)).size, je = e[0]?.currency ?? "USD";
-	function Me() {
-		I(U), P(!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 Ne() {
-		F.name.trim() && X.mutate({
-			name: F.name.trim(),
-			type: F.type,
-			institution: F.institution.trim() || null,
-			currency: F.currency.trim() || "USD",
-			cashBalance: H(F.cashBalance) ?? 0,
-			accountMask: F.accountMask.trim() || null
-		}, { onSuccess: () => P(!1) });
+	function Je() {
+		_.name.trim() && W.mutate({
+			name: _.name.trim(),
+			type: _.type,
+			institution: _.institution.trim() || null,
+			currency: _.currency.trim() || "USD",
+			cashBalance: K(_.cashBalance) ?? 0,
+			accountMask: _.accountMask.trim() || null,
+			householdId: _.householdId
+		}, { onSuccess: () => h(!1) });
 	}
-	function Pe(e) {
-		B(e), W({
+	function Ye(e) {
+		N(e), F({
 			name: e.name,
 			type: e.type,
 			institution: e.institution ?? "",
 			currency: e.currency,
 			cashBalance: String(e.cashBalance ?? ""),
-			accountMask: e.accountMask ?? ""
+			accountMask: e.accountMask ?? "",
+			householdId: e.householdId
 		});
 	}
-	function Fe() {
-		!L || !V.name.trim() || Z.mutate({
-			id: L.id,
+	function Xe() {
+		!b || !P.name.trim() || G.mutate({
+			id: b.id,
 			input: {
-				name: V.name.trim(),
-				type: V.type,
-				institution: V.institution.trim() || null,
-				currency: V.currency.trim() || "USD",
-				cashBalance: H(V.cashBalance) ?? 0,
-				accountMask: V.accountMask.trim() || null
+				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: () => B(null) });
+		}, { onSuccess: () => N(null) });
 	}
-	function Ie() {
-		if (!G) return;
-		let e = G.id;
-		Q.mutate(e, { onSuccess: () => {
-			K(null), m === e && g(void 0);
+	function Ze() {
+		if (!I) return;
+		let e = I.id;
+		J.mutate(e, { onSuccess: () => {
+			L(null), o === e && l(void 0);
 		} });
 	}
-	function Le() {
-		Y(we), q(!0);
+	function Qe() {
+		U(Ve), V(!0);
 	}
-	function Re() {
-		if (!m || !J.tradeDate) return;
-		let e = new Date(J.tradeDate);
-		Number.isNaN(e.getTime()) || $.mutate({
-			accountId: m,
-			type: J.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: J.symbol.trim() || null,
-			quantity: H(J.quantity),
-			price: H(J.price),
-			amount: H(J.amount),
-			fee: H(J.fee),
-			notes: J.notes.trim() || null
-		}, { onSuccess: () => q(!1) });
+			symbol: H.symbol.trim() || null,
+			quantity: K(H.quantity),
+			price: K(H.price),
+			amount: Q,
+			fee: K(H.fee),
+			notes: H.notes.trim() || null
+		}, { onSuccess: () => V(!1) });
 	}
-	return /* @__PURE__ */ v(ne, {
+	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: Me,
+		onAction: qe,
 		children: [
-			/* @__PURE__ */ _(s, { items: [
-				{
-					label: "Total accounts",
-					value: String(e.length)
-				},
-				{
-					label: "Total cash",
-					value: l(Oe, je)
-				},
-				{
-					label: "Active",
-					value: `${ke}/${e.length}`
-				},
-				{
-					label: "Institutions",
-					value: String(Ae)
-				}
-			] }),
-			/* @__PURE__ */ v(se, { children: [/* @__PURE__ */ v(ue, { children: [/* @__PURE__ */ v(de, {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ _(ie, {
-					className: "h-5 w-5",
-					"aria-hidden": "true"
-				}), "Linked accounts"]
-			}), /* @__PURE__ */ _(le, { children: "Select an account to view holdings and transactions." })] }), /* @__PURE__ */ _(ce, { children: ee ? /* @__PURE__ */ _(c, {}) : re ? /* @__PURE__ */ _(o, { onRetry: () => p() }) : e.length === 0 ? /* @__PURE__ */ _(a, {
-				icon: /* @__PURE__ */ _(ie, {
-					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__ */ v(b, {
-					size: "sm",
-					onClick: Me,
-					children: [/* @__PURE__ */ _(h, {
-						className: "size-4",
-						"aria-hidden": "true"
-					}), "New account"]
-				})
-			}) : /* @__PURE__ */ _("div", {
-				className: "overflow-x-auto",
-				children: /* @__PURE__ */ v(ve, { children: [/* @__PURE__ */ _(be, { children: /* @__PURE__ */ v(xe, { children: [
-					/* @__PURE__ */ _(z, { children: "Account" }),
-					/* @__PURE__ */ _(z, { children: "Type" }),
-					/* @__PURE__ */ _(z, {
-						className: "text-right",
-						children: "Cash balance"
-					}),
-					/* @__PURE__ */ _(z, { children: "Status" }),
-					/* @__PURE__ */ _(z, {
-						className: "w-12 text-right",
-						children: "Actions"
-					})
-				] }) }), /* @__PURE__ */ _(ye, { children: e.map((e) => /* @__PURE__ */ v(xe, {
-					className: "cursor-pointer",
-					onClick: () => g(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__ */ _(R, { children: /* @__PURE__ */ v("div", {
-							className: "flex items-center gap-3",
-							children: [/* @__PURE__ */ _("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__ */ v("div", {
-								className: "min-w-0",
-								children: [/* @__PURE__ */ _("p", {
-									className: "truncate font-medium text-text-primary",
-									children: e.name
-								}), /* @__PURE__ */ v("p", {
-									className: "truncate text-xs text-text-secondary",
-									children: [e.institution ?? "Manual account", e.accountMask ? ` · ••${e.accountMask}` : ""]
-								})]
-							})]
-						}) }),
-						/* @__PURE__ */ _(R, { children: /* @__PURE__ */ _(y, {
-							variant: "outline",
-							children: e.type.replace(/_/g, " ")
-						}) }),
-						/* @__PURE__ */ _(R, {
-							className: "text-right font-semibold text-text-primary",
-							children: l(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__ */ _(R, { children: /* @__PURE__ */ _(y, {
-							variant: u(e.status),
-							children: e.status
-						}) }),
-						/* @__PURE__ */ _(R, {
-							className: "text-right",
-							onClick: (e) => e.stopPropagation(),
-							children: /* @__PURE__ */ v(pe, { children: [/* @__PURE__ */ _(ge, {
-								asChild: !0,
-								children: /* @__PURE__ */ _(b, {
-									variant: "ghost",
-									size: "sm",
-									"aria-label": `Actions for ${e.name}`,
-									children: /* @__PURE__ */ _(ae, {
-										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__ */ v(me, {
-								align: "end",
-								children: [/* @__PURE__ */ v(he, {
-									onClick: () => Pe(e),
-									children: [/* @__PURE__ */ _(oe, {
-										className: "size-4",
-										"aria-hidden": "true"
-									}), "Edit"]
-								}), /* @__PURE__ */ v(he, {
-									className: "text-status-error-text",
-									onClick: () => K(e),
-									children: [/* @__PURE__ */ _(f, {
-										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, {
-				open: N,
-				onOpenChange: P,
-				children: /* @__PURE__ */ v(S, { children: [
-					/* @__PURE__ */ v(T, { children: [/* @__PURE__ */ _(E, { children: "New account" }), /* @__PURE__ */ _(C, { children: "Add a bank, brokerage or retirement account." })] }),
-					/* @__PURE__ */ _(Te, {
-						form: F,
-						onChange: I
-					}),
-					/* @__PURE__ */ v(w, { children: [/* @__PURE__ */ _(fe, {
-						asChild: !0,
-						children: /* @__PURE__ */ _(b, {
-							variant: "outline",
-							children: "Cancel"
+				}), /* @__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__ */ _(b, {
-						onClick: Ne,
-						disabled: !F.name.trim() || X.isPending,
-						children: X.isPending ? "Creating…" : "Create 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, {
-				open: !!L,
-				onOpenChange: (e) => !e && B(null),
-				children: /* @__PURE__ */ v(S, { children: [
-					/* @__PURE__ */ v(T, { children: [/* @__PURE__ */ _(E, { children: "Edit account" }), /* @__PURE__ */ _(C, { children: "Update account details." })] }),
-					/* @__PURE__ */ _(Te, {
-						form: V,
-						onChange: W
-					}),
-					/* @__PURE__ */ v(w, { children: [/* @__PURE__ */ _(b, {
-						variant: "outline",
-						onClick: () => B(null),
-						children: "Cancel"
-					}), /* @__PURE__ */ _(b, {
-						onClick: Fe,
-						disabled: !V.name.trim() || Z.isPending,
-						children: Z.isPending ? "Saving…" : "Save changes"
-					})] })
-				] })
+			/* @__PURE__ */ x(T, {
+				open: se,
+				onOpenChange: h,
+				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, {
-				open: !!G,
-				onOpenChange: (e) => !e && K(null),
-				children: /* @__PURE__ */ v(S, { children: [/* @__PURE__ */ v(T, { children: [/* @__PURE__ */ _(E, { children: "Archive account?" }), /* @__PURE__ */ _(C, { children: G ? `“${G.name}” will be archived and hidden from active lists. This does not delete its history.` : "" })] }), /* @__PURE__ */ v(w, { children: [/* @__PURE__ */ _(b, {
-					variant: "outline",
-					onClick: () => K(null),
-					children: "Cancel"
-				}), /* @__PURE__ */ _(b, {
-					variant: "destructive",
-					onClick: Ie,
-					disabled: Q.isPending,
-					children: Q.isPending ? "Archiving…" : "Archive account"
-				})] })] })
+			/* @__PURE__ */ x(T, {
+				open: !!b,
+				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__ */ _(Ee, {
-				accountId: m,
-				onClose: () => g(void 0),
-				onRecordTransaction: Le
+			/* @__PURE__ */ x(re, {
+				open: !!I,
+				onOpenChange: (e) => !e && L(null),
+				title: "Archive account?",
+				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: J.isPending,
+				onConfirm: Ze
 			}),
-			/* @__PURE__ */ _(x, {
-				open: De,
-				onOpenChange: q,
-				children: /* @__PURE__ */ v(S, { children: [
-					/* @__PURE__ */ v(T, { children: [/* @__PURE__ */ _(E, { children: "Record transaction" }), /* @__PURE__ */ _(C, { children: "Log activity against the selected account." })] }),
-					/* @__PURE__ */ v("div", {
-						className: "grid gap-4",
-						children: [
-							/* @__PURE__ */ v("div", {
-								className: "grid grid-cols-2 gap-4",
-								children: [/* @__PURE__ */ v("div", {
-									className: "space-y-2",
-									children: [/* @__PURE__ */ _(O, {
-										htmlFor: "tx-type",
-										children: "Type"
-									}), /* @__PURE__ */ v(_e, {
-										value: J.type,
-										onValueChange: (e) => Y((t) => ({
-											...t,
-											type: e
-										})),
-										children: [/* @__PURE__ */ _(j, {
-											id: "tx-type",
-											children: /* @__PURE__ */ _(M, {})
-										}), /* @__PURE__ */ _(k, { children: Ce.map((e) => /* @__PURE__ */ _(A, {
-											value: e,
-											children: e.replace(/_/g, " ")
-										}, e)) })]
-									})]
-								}), /* @__PURE__ */ v("div", {
-									className: "space-y-2",
-									children: [/* @__PURE__ */ _(O, {
-										htmlFor: "tx-date",
-										children: "Trade date"
-									}), /* @__PURE__ */ _(D, {
-										id: "tx-date",
-										type: "date",
-										value: J.tradeDate,
-										onChange: (e) => Y((t) => ({
-											...t,
-											tradeDate: e.target.value
-										}))
-									})]
-								})]
-							}),
-							/* @__PURE__ */ v("div", {
-								className: "grid grid-cols-2 gap-4",
-								children: [/* @__PURE__ */ v("div", {
-									className: "space-y-2",
-									children: [/* @__PURE__ */ _(O, {
-										htmlFor: "tx-symbol",
-										children: "Symbol"
-									}), /* @__PURE__ */ _(D, {
-										id: "tx-symbol",
-										value: J.symbol,
-										onChange: (e) => Y((t) => ({
-											...t,
-											symbol: e.target.value
-										})),
-										placeholder: "e.g. VOO"
-									})]
-								}), /* @__PURE__ */ v("div", {
-									className: "space-y-2",
-									children: [/* @__PURE__ */ _(O, {
-										htmlFor: "tx-amount",
-										children: "Amount"
-									}), /* @__PURE__ */ _(D, {
-										id: "tx-amount",
-										type: "number",
-										value: J.amount,
-										onChange: (e) => Y((t) => ({
-											...t,
-											amount: e.target.value
-										}))
-									})]
-								})]
-							}),
-							/* @__PURE__ */ v("div", {
-								className: "grid grid-cols-3 gap-4",
-								children: [
-									/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ x(He, {
+				accountId: o,
+				onClose: () => l(void 0),
+				onRecordTransaction: Qe
+			}),
+			/* @__PURE__ */ x(T, {
+				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__ */ _(O, {
-											htmlFor: "tx-qty",
-											children: "Quantity"
-										}), /* @__PURE__ */ _(D, {
-											id: "tx-qty",
-											type: "number",
-											value: J.quantity,
-											onChange: (e) => Y((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__ */ v("div", {
+									}), /* @__PURE__ */ S("div", {
 										className: "space-y-2",
-										children: [/* @__PURE__ */ _(O, {
-											htmlFor: "tx-price",
-											children: "Price"
-										}), /* @__PURE__ */ _(D, {
-											id: "tx-price",
-											type: "number",
-											value: J.price,
-											onChange: (e) => Y((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__ */ v("div", {
+									})]
+								}),
+								/* @__PURE__ */ S("div", {
+									className: "grid grid-cols-2 gap-4",
+									children: [/* @__PURE__ */ S("div", {
 										className: "space-y-2",
-										children: [/* @__PURE__ */ _(O, {
-											htmlFor: "tx-fee",
-											children: "Fee"
-										}), /* @__PURE__ */ _(D, {
-											id: "tx-fee",
-											type: "number",
-											value: J.fee,
-											onChange: (e) => Y((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__ */ v("div", {
-								className: "space-y-2",
-								children: [/* @__PURE__ */ _(O, {
-									htmlFor: "tx-notes",
-									children: "Notes"
-								}), /* @__PURE__ */ _(Se, {
-									id: "tx-notes",
-									value: J.notes,
-									onChange: (e) => Y((t) => ({
-										...t,
-										notes: e.target.value
-									})),
-									placeholder: "Optional note"
-								})]
-							})
-						]
-					}),
-					/* @__PURE__ */ v(w, { children: [/* @__PURE__ */ _(b, {
-						variant: "outline",
-						onClick: () => q(!1),
-						children: "Cancel"
-					}), /* @__PURE__ */ _(b, {
-						onClick: Re,
-						disabled: !J.tradeDate || $.isPending,
-						children: $.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 Te({ form: e, onChange: t }) {
-	return /* @__PURE__ */ v("div", {
+function Y({ form: e, onChange: t }) {
+	return /* @__PURE__ */ S("div", {
 		className: "grid gap-4",
 		children: [
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ S("div", {
 				className: "space-y-2",
-				children: [/* @__PURE__ */ _(O, {
+				children: [/* @__PURE__ */ x(M, {
 					htmlFor: "acct-name",
 					children: "Name"
-				}), /* @__PURE__ */ _(D, {
+				}), /* @__PURE__ */ x(j, {
 					id: "acct-name",
 					value: e.name,
 					onChange: (e) => t((t) => ({
@@ -477,33 +608,33 @@ function Te({ form: e, onChange: t }) {
 					placeholder: "e.g. Everyday Checking"
 				})]
 			}),
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ S("div", {
 				className: "grid grid-cols-2 gap-4",
-				children: [/* @__PURE__ */ v("div", {
+				children: [/* @__PURE__ */ S("div", {
 					className: "space-y-2",
-					children: [/* @__PURE__ */ _(O, {
+					children: [/* @__PURE__ */ x(M, {
 						htmlFor: "acct-type",
 						children: "Type"
-					}), /* @__PURE__ */ v(_e, {
+					}), /* @__PURE__ */ S(ke, {
 						value: e.type,
 						onValueChange: (e) => t((t) => ({
 							...t,
 							type: e
 						})),
-						children: [/* @__PURE__ */ _(j, {
+						children: [/* @__PURE__ */ x(Me, {
 							id: "acct-type",
-							children: /* @__PURE__ */ _(M, {})
-						}), /* @__PURE__ */ _(k, { children: B.map((e) => /* @__PURE__ */ _(A, {
+							children: /* @__PURE__ */ x(Ne, {})
+						}), /* @__PURE__ */ x(Ae, { children: W.map((e) => /* @__PURE__ */ x(je, {
 							value: e,
 							children: e.replace(/_/g, " ")
 						}, e)) })]
 					})]
-				}), /* @__PURE__ */ v("div", {
+				}), /* @__PURE__ */ S("div", {
 					className: "space-y-2",
-					children: [/* @__PURE__ */ _(O, {
+					children: [/* @__PURE__ */ x(M, {
 						htmlFor: "acct-currency",
 						children: "Currency"
-					}), /* @__PURE__ */ _(D, {
+					}), /* @__PURE__ */ x(j, {
 						id: "acct-currency",
 						value: e.currency,
 						onChange: (e) => t((t) => ({
@@ -514,12 +645,12 @@ function Te({ form: e, onChange: t }) {
 					})]
 				})]
 			}),
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ S("div", {
 				className: "space-y-2",
-				children: [/* @__PURE__ */ _(O, {
+				children: [/* @__PURE__ */ x(M, {
 					htmlFor: "acct-institution",
 					children: "Institution"
-				}), /* @__PURE__ */ _(D, {
+				}), /* @__PURE__ */ x(j, {
 					id: "acct-institution",
 					value: e.institution,
 					onChange: (e) => t((t) => ({
@@ -529,14 +660,14 @@ function Te({ form: e, onChange: t }) {
 					placeholder: "e.g. Chase"
 				})]
 			}),
-			/* @__PURE__ */ v("div", {
+			/* @__PURE__ */ S("div", {
 				className: "grid grid-cols-2 gap-4",
-				children: [/* @__PURE__ */ v("div", {
+				children: [/* @__PURE__ */ S("div", {
 					className: "space-y-2",
-					children: [/* @__PURE__ */ _(O, {
+					children: [/* @__PURE__ */ x(M, {
 						htmlFor: "acct-balance",
 						children: "Cash balance"
-					}), /* @__PURE__ */ _(D, {
+					}), /* @__PURE__ */ x(j, {
 						id: "acct-balance",
 						type: "number",
 						value: e.cashBalance,
@@ -545,12 +676,12 @@ function Te({ form: e, onChange: t }) {
 							cashBalance: e.target.value
 						}))
 					})]
-				}), /* @__PURE__ */ v("div", {
+				}), /* @__PURE__ */ S("div", {
 					className: "space-y-2",
-					children: [/* @__PURE__ */ _(O, {
+					children: [/* @__PURE__ */ x(M, {
 						htmlFor: "acct-mask",
 						children: "Account mask"
-					}), /* @__PURE__ */ _(D, {
+					}), /* @__PURE__ */ x(j, {
 						id: "acct-mask",
 						value: e.accountMask,
 						onChange: (e) => t((t) => ({
@@ -560,147 +691,271 @@ function Te({ form: e, onChange: t }) {
 						placeholder: "Last 4 digits"
 					})]
 				})]
+			}),
+			/* @__PURE__ */ x(l, {
+				value: e.householdId,
+				onChange: (e) => t((t) => ({
+					...t,
+					householdId: e
+				}))
 			})
 		]
 	});
 }
-function Ee({ accountId: t, onClose: n, onRecordTransaction: r }) {
-	let { data: i, isLoading: te, isError: s, refetch: ne } = e(t), d = ee(t ? { accountId: t } : {}), f = t ? d.data : [];
-	return /* @__PURE__ */ _(N, {
+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__ */ v(P, {
-			className: "w-full overflow-y-auto sm:max-w-lg",
-			children: [/* @__PURE__ */ v(I, { children: [/* @__PURE__ */ _(L, { children: i?.name ?? "Account" }), /* @__PURE__ */ _(F, { children: i ? `${i.institution ?? "Manual account"} · ${i.type.replace(/_/g, " ")}` : "Loading account details…" })] }), te ? /* @__PURE__ */ _("div", {
-				className: "mt-6",
-				children: /* @__PURE__ */ _(c, { rows: 3 })
-			}) : s ? /* @__PURE__ */ _("div", {
-				className: "mt-6",
-				children: /* @__PURE__ */ _(o, { onRetry: () => ne() })
-			}) : i ? /* @__PURE__ */ v("div", {
-				className: "mt-6 space-y-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: "p-6",
+				children: /* @__PURE__ */ x(d, { onRetry: () => re() })
+			}) : i ? /* @__PURE__ */ S("div", {
+				className: "space-y-6 p-6",
 				children: [
-					/* @__PURE__ */ v("div", {
-						className: "grid grid-cols-2 gap-4",
-						children: [/* @__PURE__ */ v("div", {
-							className: "rounded-lg border border-border-subtle bg-bg-surface p-4",
-							children: [/* @__PURE__ */ _("p", {
-								className: "text-xs text-text-secondary",
-								children: "Cash balance"
-							}), /* @__PURE__ */ _("p", {
-								className: "text-xl font-semibold text-text-primary",
-								children: l(i.cashBalance, i.currency)
-							})]
-						}), /* @__PURE__ */ v("div", {
-							className: "rounded-lg border border-border-subtle bg-bg-surface p-4",
-							children: [/* @__PURE__ */ _("p", {
-								className: "text-xs text-text-secondary",
-								children: "Status"
-							}), /* @__PURE__ */ _(y, {
-								variant: u(i.status),
+					/* @__PURE__ */ S(ae, {
+						glow: !0,
+						className: "space-y-4",
+						children: [/* @__PURE__ */ S("div", {
+							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: 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__ */ v("div", {
-						className: "space-y-3",
-						children: [/* @__PURE__ */ _("h3", {
-							className: "text-sm font-semibold text-text-primary",
-							children: "Holdings"
-						}), i.holdings.length === 0 ? /* @__PURE__ */ _(a, {
-							title: "No holdings",
-							description: "This account has no positions recorded yet."
-						}) : /* @__PURE__ */ _("div", {
-							className: "space-y-2",
-							children: i.holdings.map((e) => /* @__PURE__ */ v("div", {
-								className: "flex items-center justify-between rounded-lg border border-border-subtle bg-bg-surface p-3",
-								children: [/* @__PURE__ */ v("div", {
-									className: "min-w-0",
-									children: [/* @__PURE__ */ _("p", {
-										className: "truncate text-sm font-medium text-text-primary",
-										children: e.symbol
-									}), e.name ? /* @__PURE__ */ _("p", {
-										className: "truncate text-xs text-text-secondary",
-										children: e.name
-									}) : null]
-								}), /* @__PURE__ */ _("span", {
-									className: "text-sm font-semibold text-text-primary",
-									children: l(e.marketValue, e.currency)
-								})]
-							}, e.id))
+					l.length > 0 ? /* @__PURE__ */ S("div", {
+						className: "rounded-xl border border-border-subtle bg-bg-surface p-4",
+						children: [/* @__PURE__ */ x("h3", {
+							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__ */ v("div", {
-						className: "space-y-3",
-						children: [/* @__PURE__ */ v("div", {
-							className: "flex items-center justify-between",
-							children: [/* @__PURE__ */ _("h3", {
-								className: "text-sm font-semibold text-text-primary",
-								children: "Recent transactions"
-							}), /* @__PURE__ */ v(b, {
-								size: "sm",
-								variant: "outline",
-								onClick: r,
-								children: [/* @__PURE__ */ _(g, {
-									className: "size-4",
-									"aria-hidden": "true"
-								}), "Record"]
-							})]
-						}), d.isLoading ? /* @__PURE__ */ _(c, { rows: 2 }) : d.isError ? /* @__PURE__ */ _(o, { onRetry: () => d.refetch() }) : f.length === 0 ? /* @__PURE__ */ _(a, {
-							icon: /* @__PURE__ */ _(g, {
-								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__ */ v(b, {
-								size: "sm",
-								onClick: r,
-								children: [/* @__PURE__ */ _(h, {
-									className: "size-4",
-									"aria-hidden": "true"
-								}), "Record transaction"]
-							})
-						}) : /* @__PURE__ */ _("div", {
-							className: "space-y-2",
-							children: f.map((e) => {
-								let t = V(e.type), n = t ? m : p, r = t ? "text-status-success-text" : "text-status-error-text";
-								return /* @__PURE__ */ v("div", {
-									className: "flex items-center justify-between rounded-lg border border-border-subtle bg-bg-surface p-3",
-									children: [/* @__PURE__ */ v("div", {
-										className: "min-w-0",
-										children: [/* @__PURE__ */ v("div", {
-											className: "flex items-center gap-2",
-											children: [/* @__PURE__ */ _(y, {
-												variant: "outline",
-												children: e.type.replace(/_/g, " ")
-											}), e.symbol ? /* @__PURE__ */ _("span", {
-												className: "truncate text-xs text-text-secondary",
-												children: e.symbol
-											}) : null]
-										}), /* @__PURE__ */ _("p", {
-											className: "mt-1 text-xs text-text-secondary",
-											children: re(e.tradeDate)
-										})]
-									}), /* @__PURE__ */ v("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__ */ _(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 ? "+" : "−",
-											l(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);
+								}), 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__ */ _("div", {
-				className: "mt-6",
-				children: /* @__PURE__ */ _(a, {
+			}) : /* @__PURE__ */ x("div", {
+				className: "p-6",
+				children: /* @__PURE__ */ x(u, {
 					title: "Account not found",
 					description: "This account is no longer available."
 				})
@@ -709,6 +964,6 @@ function Ee({ accountId: t, onClose: n, onRecordTransaction: r }) {
 	});
 }
 //#endregion
-export { W as AccountsPage };
+export { J as AccountsPage };
 
 //# sourceMappingURL=AccountsPage.js.map