@burdenoff/microfe-brainyrich 2026.706.1 → 2026.706.3

package/dist/brainyrich/pages/AnalyticsPage.js

@@ -1,11 +1,21 @@
 import { useAccounts as e, useAllTransactions as t, useHoldings as n, useNetWorthSummary as r, useRecordTransaction as i } from "../hooks/useBrainyRichApi.js";
-import { AllocationBars as a, EmptyState as o, ErrorState as ee, KpiGrid as te, LoadingState as s, SectionShell as ne, formatDate as re, formatMoney as c, formatPct as ie } from "./_shared.js";
-import { useMemo as l, useState as ae } from "react";
-import { ArrowDownRight as oe, ArrowUpRight as se, BarChart3 as u, Minus as d, PieChart as ce, Plus as le, Wallet as f } from "lucide-react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import { Badge as ue, Button as h, Card as g, CardContent as _, CardDescription as v, CardHeader as y, CardTitle as b, Dialog as de, DialogContent as fe, DialogDescription as pe, DialogFooter as me, DialogHeader as he, DialogTitle as ge, DialogTrigger as _e, Input as x, Label as S, Select as C, SelectContent as w, SelectItem as T, SelectTrigger as E, SelectValue as D, Table as O, TableBody as k, TableCell as A, TableHead as j, TableHeader as M, TableRow as N, Tabs as ve, TabsContent as P, TabsList as ye, TabsTrigger as F, Textarea as be } from "@burdenoff/fe-libs/ui";
+import { DonutChart as a, FadeIn as o, GlassCard as s, ProgressRing as ee, StatTile as c, TrendBars as te } from "../components/viz.js";
+import "../components/index.js";
+import { EmptyState as l, ErrorState as u, LoadingState as d, SectionShell as f, formatCompact as ne, formatDate as re, formatMoney as p, formatPct as ie } from "./_shared.js";
+import { useMemo as m, useState as ae } from "react";
+import { ArrowDownRight as oe, ArrowUpRight as h, BarChart3 as g, Coins as se, Minus as _, PieChart as ce, Plus as le, TrendingDown as ue, TrendingUp as de, Wallet as v } from "lucide-react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { Badge as fe, Button as x, Card as S, CardContent as C, CardDescription as w, CardHeader as T, CardTitle as pe, Dialog as me, DialogContent as he, DialogDescription as ge, DialogFooter as _e, DialogHeader as ve, DialogTitle as ye, DialogTrigger as be, Input as xe, Label as E, Select as Se, SelectContent as Ce, SelectItem as we, SelectTrigger as Te, SelectValue as D, Table as O, TableBody as k, TableCell as A, TableHead as j, TableHeader as M, TableRow as N, Tabs as Ee, TabsContent as P, TabsList as De, TabsTrigger as F, Textarea as Oe } from "@burdenoff/fe-libs/ui";
 //#region src/brainyrich/pages/AnalyticsPage.tsx
-var I = (e) => e.toLowerCase().split("_").map((e) => e && e[0].toUpperCase() + e.slice(1)).join(" "), L = [
+var ke = {
+	EQUITY: "brand",
+	FIXED_INCOME: "blue",
+	CASH: "teal",
+	REAL_ESTATE: "purple",
+	COMMODITY: "warning",
+	CRYPTO: "indigo",
+	ALTERNATIVE: "info"
+}, I = (e) => e.toLowerCase().split("_").map((e) => e && e[0].toUpperCase() + e.slice(1)).join(" "), L = [
 	"DEPOSIT",
 	"DIVIDEND",
 	"INTEREST",
@@ -14,7 +24,7 @@ var I = (e) => e.toLowerCase().split("_").map((e) => e && e[0].toUpperCase() + e
 	"WITHDRAWAL",
 	"FEE",
 	"BUY"
-], z = (e) => L.includes(e) ? "in" : R.includes(e) ? "out" : "neutral", xe = (e) => {
+], z = (e) => L.includes(e) ? "in" : R.includes(e) ? "out" : "neutral", Ae = (e) => {
 	let t = new Date(e);
 	return Number.isNaN(t.getTime()) ? null : {
 		key: `${t.getFullYear()}-${String(t.getMonth() + 1).padStart(2, "0")}`,
@@ -23,10 +33,10 @@ var I = (e) => e.toLowerCase().split("_").map((e) => e && e[0].toUpperCase() + e
 			year: "numeric"
 		}).format(t)
 	};
-}, Se = (e) => {
+}, je = (e) => {
 	let t = /* @__PURE__ */ new Map();
 	for (let n of e) {
-		let e = xe(n.tradeDate);
+		let e = Ae(n.tradeDate);
 		if (!e) continue;
 		let r = z(n.type);
 		if (r === "neutral") continue;
@@ -39,7 +49,7 @@ var I = (e) => e.toLowerCase().split("_").map((e) => e && e[0].toUpperCase() + e
 		r === "in" ? a.inflow += i : a.outflow += i, t.set(e.key, a);
 	}
 	return Array.from(t.values()).sort((e, t) => e.key.localeCompare(t.key));
-}, Ce = (e) => {
+}, Me = (e) => {
 	let t = /* @__PURE__ */ new Map();
 	for (let n of e) t.set(n.type, (t.get(n.type) ?? 0) + Math.abs(n.amount));
 	return Array.from(t.entries()).map(([e, t]) => ({
@@ -48,28 +58,37 @@ var I = (e) => e.toLowerCase().split("_").map((e) => e && e[0].toUpperCase() + e
 		dir: z(e)
 	})).sort((e, t) => t.total - e.total);
 };
-function we({ value: e, currency: t }) {
-	let n = e > 0, r = e < 0, i = n ? se : r ? oe : d, a = n ? "text-status-success-text" : r ? "text-status-error-text" : "text-text-secondary", o = n ? "+" : r ? "-" : "";
-	return /* @__PURE__ */ m("span", {
-		className: `inline-flex items-center justify-end gap-1 font-medium ${a}`,
+function B({ value: e, currency: t, pct: n }) {
+	let r = e > 0, i = e < 0, a = r ? h : i ? oe : _, o = r ? "text-status-success-text" : i ? "text-status-error-text" : "text-text-secondary", s = r ? "+" : i ? "-" : "", ee = n != null && Number.isFinite(n);
+	return /* @__PURE__ */ b("span", {
+		className: `inline-flex items-center justify-end gap-1 font-medium tabular-nums ${o}`,
 		children: [
-			/* @__PURE__ */ p(i, {
-				className: "size-3.5",
+			/* @__PURE__ */ y(a, {
+				className: "size-3.5 shrink-0",
 				"aria-hidden": "true"
 			}),
-			o,
-			c(Math.abs(e), t)
+			s,
+			p(Math.abs(e), t),
+			ee ? /* @__PURE__ */ b("span", {
+				className: "text-xs opacity-80",
+				children: [
+					"(",
+					n > 0 ? "+" : "",
+					n.toFixed(1),
+					"%)"
+				]
+			}) : null
 		]
 	});
 }
-var Te = {
+var V = {
 	accountId: "",
 	type: "DEPOSIT",
 	amount: "",
 	symbol: "",
 	tradeDate: "",
 	notes: ""
-}, Ee = [
+}, Ne = [
 	"DEPOSIT",
 	"WITHDRAWAL",
 	"DIVIDEND",
@@ -79,571 +98,715 @@ var Te = {
 	"SELL",
 	"TRANSFER"
 ];
-function B() {
-	let d = r(), L = t(), R = e(), [z, xe] = ae(void 0), B = R.data, De = z ?? B[0]?.id, V = n({ accountId: De }), H = i(), [Oe, U] = ae(!1), [W, G] = ae(Te), K = d.data, q = K?.currency ?? "USD", J = L.data, ke = l(() => !K || K.totalMarketValue <= 0 ? [] : K.byAssetClass.filter((e) => e.marketValue !== 0).map((e) => ({
+function H() {
+	let _ = r(), L = t(), R = e(), [z, Ae] = ae(void 0), H = R.data, Pe = z ?? H[0]?.id, U = n({ accountId: Pe }), W = i(), [Fe, G] = ae(!1), [K, q] = ae(V), J = _.data, Y = J?.currency ?? "USD", X = L.data, Ie = m(() => !J || J.totalMarketValue <= 0 ? [] : J.byAssetClass.filter((e) => e.marketValue !== 0).map((e) => ({
 		label: I(e.assetClass),
-		value: e.marketValue / K.totalMarketValue * 100,
-		caption: c(e.marketValue, q),
+		value: e.marketValue / J.totalMarketValue * 100,
+		caption: p(e.marketValue, Y),
 		tone: "accent"
-	})).sort((e, t) => t.value - e.value), [K, q]), Ae = l(() => {
-		if (!K) return [];
-		let e = K.totalMarketValue + K.totalCash;
-		return e <= 0 ? [] : [{
-			label: "Invested (Market Value)",
-			value: K.totalMarketValue / e * 100,
-			caption: c(K.totalMarketValue, q),
-			tone: "default"
-		}, {
-			label: "Cash",
-			value: K.totalCash / e * 100,
-			caption: c(K.totalCash, q),
-			tone: "warning"
-		}];
-	}, [K, q]), Y = l(() => Se(J), [J]), je = l(() => Ce(J), [J]), X = l(() => {
+	})).sort((e, t) => t.value - e.value), [J, Y]), Le = m(() => !J || J.totalMarketValue <= 0 ? [] : J.byAssetClass.filter((e) => e.marketValue > 0).map((e) => ({
+		label: I(e.assetClass),
+		value: e.marketValue,
+		tone: ke[e.assetClass]
+	})).sort((e, t) => t.value - e.value), [J]), Re = m(() => !J || J.totalMarketValue + J.totalCash <= 0 ? [] : [{
+		label: "Invested",
+		value: J.totalMarketValue,
+		tone: "brand"
+	}, {
+		label: "Cash",
+		value: J.totalCash,
+		tone: "teal"
+	}].filter((e) => e.value > 0), [J]), ze = m(() => {
+		if (!J) return 0;
+		let e = J.totalMarketValue + J.totalCash;
+		return e > 0 ? J.totalMarketValue / e * 100 : 0;
+	}, [J]), Z = m(() => je(X), [X]), Be = m(() => Me(X), [X]), Q = m(() => {
 		let e = 0, t = 0;
-		for (let n of Y) e += n.inflow, t += n.outflow;
+		for (let n of Z) e += n.inflow, t += n.outflow;
 		return {
 			inflow: e,
 			outflow: t,
 			net: e - t
 		};
-	}, [Y]), Z = l(() => Math.max(1, ...Y.map((e) => Math.max(e.inflow, e.outflow))), [Y]), Me = V.data, Q = l(() => {
-		let e = Me.map((e) => ({
-			holding: e,
-			unrealized: e.marketValue - e.costBasis
-		})).sort((e, t) => t.unrealized - e.unrealized);
+	}, [Z]), Ve = m(() => Z.map((e) => e.inflow - e.outflow), [Z]), He = U.data, $ = m(() => {
+		let e = He.map((e) => {
+			let t = e.marketValue - e.costBasis;
+			return {
+				holding: e,
+				unrealized: t,
+				pct: e.costBasis > 0 ? t / e.costBasis * 100 : null
+			};
+		}).sort((e, t) => t.unrealized - e.unrealized);
 		return {
 			rows: e,
 			totalUnrealized: e.reduce((e, t) => e + t.unrealized, 0),
-			totalCost: Me.reduce((e, t) => e + t.costBasis, 0)
+			totalCost: He.reduce((e, t) => e + t.costBasis, 0),
+			gainers: e.filter((e) => e.unrealized > 0).slice(0, 4),
+			losers: e.filter((e) => e.unrealized < 0).sort((e, t) => e.unrealized - t.unrealized).slice(0, 4)
 		};
-	}, [Me]);
-	if (d.isLoading) return /* @__PURE__ */ p(ne, {
+	}, [He]);
+	if (_.isLoading) return /* @__PURE__ */ y(f, {
 		title: "Wealth Analytics",
 		description: "Allocation, cash flow, and holdings performance derived from your real accounts.",
-		children: /* @__PURE__ */ p(s, { rows: 5 })
+		children: /* @__PURE__ */ y(d, { rows: 5 })
 	});
-	if (d.isError || !K) return /* @__PURE__ */ p(ne, {
+	if (_.isError || !J) return /* @__PURE__ */ y(f, {
 		title: "Wealth Analytics",
 		description: "Allocation, cash flow, and holdings performance derived from your real accounts.",
-		children: /* @__PURE__ */ p(ee, {
+		children: /* @__PURE__ */ y(u, {
 			title: "Could not load analytics",
 			description: "We couldn't reach the wealth service. Please retry.",
-			onRetry: () => d.refetch()
+			onRetry: () => _.refetch()
 		})
 	});
-	let $ = Number(W.amount), Ne = !!W.accountId && !!W.tradeDate && W.amount.trim() !== "" && Number.isFinite($) && $ > 0 && !H.isPending, Pe = /* @__PURE__ */ m(de, {
-		open: Oe,
+	let Ue = Number(K.amount), We = !!K.accountId && !!K.tradeDate && K.amount.trim() !== "" && Number.isFinite(Ue) && Ue > 0 && !W.isPending, Ge = /* @__PURE__ */ b(me, {
+		open: Fe,
 		onOpenChange: (e) => {
-			U(e), e || G(Te);
+			G(e), e || q(V);
 		},
-		children: [/* @__PURE__ */ p(_e, {
+		children: [/* @__PURE__ */ y(be, {
 			asChild: !0,
-			children: /* @__PURE__ */ m(h, {
+			children: /* @__PURE__ */ b(x, {
 				size: "sm",
-				children: [/* @__PURE__ */ p(le, {
+				children: [/* @__PURE__ */ y(le, {
 					className: "mr-1 size-4",
 					"aria-hidden": "true"
 				}), "Record Transaction"]
 			})
-		}), /* @__PURE__ */ m(fe, { children: [
-			/* @__PURE__ */ m(he, { children: [/* @__PURE__ */ p(ge, { children: "Record Transaction" }), /* @__PURE__ */ p(pe, { children: "Log a real cash flow or trade. It updates your cash-flow analytics immediately." })] }),
-			B.length === 0 ? /* @__PURE__ */ p(o, {
-				icon: /* @__PURE__ */ p(f, {
+		}), /* @__PURE__ */ b(he, { children: [
+			/* @__PURE__ */ b(ve, { children: [/* @__PURE__ */ y(ye, { children: "Record Transaction" }), /* @__PURE__ */ y(ge, { children: "Log a real cash flow or trade. It updates your cash-flow analytics immediately." })] }),
+			H.length === 0 ? /* @__PURE__ */ y(l, {
+				icon: /* @__PURE__ */ y(v, {
 					className: "size-6",
 					"aria-hidden": "true"
 				}),
 				title: "Create an account first",
 				description: "You need at least one account before you can record a transaction. Open the Accounts page to add one, then come back here."
-			}) : /* @__PURE__ */ m("div", {
+			}) : /* @__PURE__ */ b("div", {
 				className: "space-y-4",
 				children: [
-					/* @__PURE__ */ m("div", {
+					/* @__PURE__ */ b("div", {
 						className: "space-y-1.5",
-						children: [/* @__PURE__ */ p(S, {
+						children: [/* @__PURE__ */ y(E, {
 							htmlFor: "tx-account",
 							children: "Account"
-						}), /* @__PURE__ */ m(C, {
-							value: W.accountId,
-							onValueChange: (e) => G((t) => ({
+						}), /* @__PURE__ */ b(Se, {
+							value: K.accountId,
+							onValueChange: (e) => q((t) => ({
 								...t,
 								accountId: e
 							})),
-							children: [/* @__PURE__ */ p(E, {
+							children: [/* @__PURE__ */ y(Te, {
 								id: "tx-account",
-								children: /* @__PURE__ */ p(D, { placeholder: "Select an account" })
-							}), /* @__PURE__ */ p(w, { children: B.map((e) => /* @__PURE__ */ p(T, {
+								children: /* @__PURE__ */ y(D, { placeholder: "Select an account" })
+							}), /* @__PURE__ */ y(Ce, { children: H.map((e) => /* @__PURE__ */ y(we, {
 								value: e.id,
 								children: e.name
 							}, e.id)) })]
 						})]
 					}),
-					/* @__PURE__ */ m("div", {
+					/* @__PURE__ */ b("div", {
 						className: "grid grid-cols-2 gap-4",
-						children: [/* @__PURE__ */ m("div", {
+						children: [/* @__PURE__ */ b("div", {
 							className: "space-y-1.5",
-							children: [/* @__PURE__ */ p(S, {
+							children: [/* @__PURE__ */ y(E, {
 								htmlFor: "tx-type",
 								children: "Type"
-							}), /* @__PURE__ */ m(C, {
-								value: W.type,
-								onValueChange: (e) => G((t) => ({
+							}), /* @__PURE__ */ b(Se, {
+								value: K.type,
+								onValueChange: (e) => q((t) => ({
 									...t,
 									type: e
 								})),
-								children: [/* @__PURE__ */ p(E, {
+								children: [/* @__PURE__ */ y(Te, {
 									id: "tx-type",
-									children: /* @__PURE__ */ p(D, {})
-								}), /* @__PURE__ */ p(w, { children: Ee.map((e) => /* @__PURE__ */ p(T, {
+									children: /* @__PURE__ */ y(D, {})
+								}), /* @__PURE__ */ y(Ce, { children: Ne.map((e) => /* @__PURE__ */ y(we, {
 									value: e,
 									children: I(e)
 								}, e)) })]
 							})]
-						}), /* @__PURE__ */ m("div", {
+						}), /* @__PURE__ */ b("div", {
 							className: "space-y-1.5",
-							children: [/* @__PURE__ */ m(S, {
+							children: [/* @__PURE__ */ b(E, {
 								htmlFor: "tx-amount",
 								children: [
 									"Amount (",
-									q,
+									Y,
 									")"
 								]
-							}), /* @__PURE__ */ p(x, {
+							}), /* @__PURE__ */ y(xe, {
 								id: "tx-amount",
 								type: "number",
 								min: "0",
 								step: "0.01",
 								inputMode: "decimal",
 								placeholder: "0.00",
-								value: W.amount,
-								onChange: (e) => G((t) => ({
+								value: K.amount,
+								onChange: (e) => q((t) => ({
 									...t,
 									amount: e.target.value
 								}))
 							})]
 						})]
 					}),
-					/* @__PURE__ */ m("div", {
+					/* @__PURE__ */ b("div", {
 						className: "grid grid-cols-2 gap-4",
-						children: [/* @__PURE__ */ m("div", {
+						children: [/* @__PURE__ */ b("div", {
 							className: "space-y-1.5",
-							children: [/* @__PURE__ */ p(S, {
+							children: [/* @__PURE__ */ y(E, {
 								htmlFor: "tx-date",
 								children: "Trade date"
-							}), /* @__PURE__ */ p(x, {
+							}), /* @__PURE__ */ y(xe, {
 								id: "tx-date",
 								type: "date",
-								value: W.tradeDate,
-								onChange: (e) => G((t) => ({
+								value: K.tradeDate,
+								onChange: (e) => q((t) => ({
 									...t,
 									tradeDate: e.target.value
 								}))
 							})]
-						}), /* @__PURE__ */ m("div", {
+						}), /* @__PURE__ */ b("div", {
 							className: "space-y-1.5",
-							children: [/* @__PURE__ */ p(S, {
+							children: [/* @__PURE__ */ y(E, {
 								htmlFor: "tx-symbol",
 								children: "Symbol (optional)"
-							}), /* @__PURE__ */ p(x, {
+							}), /* @__PURE__ */ y(xe, {
 								id: "tx-symbol",
 								placeholder: "e.g. AAPL",
-								value: W.symbol,
-								onChange: (e) => G((t) => ({
+								value: K.symbol,
+								onChange: (e) => q((t) => ({
 									...t,
 									symbol: e.target.value
 								}))
 							})]
 						})]
 					}),
-					/* @__PURE__ */ m("div", {
+					/* @__PURE__ */ b("div", {
 						className: "space-y-1.5",
-						children: [/* @__PURE__ */ p(S, {
+						children: [/* @__PURE__ */ y(E, {
 							htmlFor: "tx-notes",
 							children: "Notes (optional)"
-						}), /* @__PURE__ */ p(be, {
+						}), /* @__PURE__ */ y(Oe, {
 							id: "tx-notes",
 							rows: 2,
 							placeholder: "Context for this transaction",
-							value: W.notes,
-							onChange: (e) => G((t) => ({
+							value: K.notes,
+							onChange: (e) => q((t) => ({
 								...t,
 								notes: e.target.value
 							}))
 						})]
 					}),
-					H.isError ? /* @__PURE__ */ p("p", {
+					W.isError ? /* @__PURE__ */ y("p", {
 						className: "text-sm text-status-error-text",
-						children: H.error instanceof Error ? H.error.message : "Could not record transaction."
+						children: W.error instanceof Error ? W.error.message : "Could not record transaction."
 					}) : null
 				]
 			}),
-			/* @__PURE__ */ m(me, { children: [/* @__PURE__ */ p(h, {
+			/* @__PURE__ */ b(_e, { children: [/* @__PURE__ */ y(x, {
 				variant: "outline",
-				onClick: () => U(!1),
-				children: B.length === 0 ? "Close" : "Cancel"
-			}), B.length > 0 ? /* @__PURE__ */ p(h, {
+				onClick: () => G(!1),
+				children: H.length === 0 ? "Close" : "Cancel"
+			}), H.length > 0 ? /* @__PURE__ */ y(x, {
 				onClick: () => {
-					Ne && H.mutate({
-						accountId: W.accountId,
-						type: W.type,
-						amount: $,
-						symbol: W.symbol.trim() ? W.symbol.trim() : void 0,
-						tradeDate: new Date(W.tradeDate).toISOString(),
-						notes: W.notes.trim() ? W.notes.trim() : void 0
+					We && W.mutate({
+						accountId: K.accountId,
+						type: K.type,
+						amount: Ue,
+						symbol: K.symbol.trim() ? K.symbol.trim() : void 0,
+						tradeDate: new Date(K.tradeDate).toISOString(),
+						notes: K.notes.trim() ? K.notes.trim() : void 0
 					}, { onSuccess: () => {
-						U(!1), G(Te);
+						G(!1), q(V);
 					} });
 				},
-				disabled: !Ne,
-				children: H.isPending ? "Recording…" : "Record"
+				disabled: !We,
+				children: W.isPending ? "Recording…" : "Record"
 			}) : null] })
 		] })]
 	});
-	return /* @__PURE__ */ m(ne, {
+	return /* @__PURE__ */ b(f, {
 		title: "Wealth Analytics",
 		description: "Allocation, cash flow, and holdings performance derived from your real accounts.",
-		badges: [`${K.accountCount} accounts`],
-		actions: Pe,
-		children: [/* @__PURE__ */ p(te, { items: [
-			{
-				label: "Net Worth",
-				value: c(K.totalNetWorth, q)
-			},
-			{
-				label: "Invested Value",
-				value: c(K.totalMarketValue, q)
-			},
-			{
-				label: "Cash",
-				value: c(K.totalCash, q)
-			},
-			{
-				label: "Net Cash Flow",
-				value: c(X.net, q),
-				deltaTone: X.net > 0 ? "positive" : X.net < 0 ? "negative" : "neutral",
-				trend: J.length > 0 ? `${c(X.inflow, q)} in · ${c(X.outflow, q)} out` : "No transactions yet"
-			}
-		] }), /* @__PURE__ */ m(ve, {
+		badges: [`${J.accountCount} accounts`],
+		actions: Ge,
+		children: [/* @__PURE__ */ b("div", {
+			className: "grid gap-4 md:grid-cols-2 xl:grid-cols-4",
+			children: [
+				/* @__PURE__ */ y(o, {
+					index: 0,
+					children: /* @__PURE__ */ y(c, {
+						label: "Net Worth",
+						value: p(J.totalNetWorth, Y),
+						icon: /* @__PURE__ */ y(v, {
+							className: "size-4",
+							"aria-hidden": "true"
+						}),
+						glow: !0
+					})
+				}),
+				/* @__PURE__ */ y(o, {
+					index: 1,
+					children: /* @__PURE__ */ y(c, {
+						label: "Invested Value",
+						value: p(J.totalMarketValue, Y),
+						icon: /* @__PURE__ */ y(de, {
+							className: "size-4",
+							"aria-hidden": "true"
+						})
+					})
+				}),
+				/* @__PURE__ */ y(o, {
+					index: 2,
+					children: /* @__PURE__ */ y(c, {
+						label: "Cash",
+						value: p(J.totalCash, Y),
+						icon: /* @__PURE__ */ y(se, {
+							className: "size-4",
+							"aria-hidden": "true"
+						})
+					})
+				}),
+				/* @__PURE__ */ y(o, {
+					index: 3,
+					children: /* @__PURE__ */ y(c, {
+						label: "Net Cash Flow",
+						value: p(Q.net, Y),
+						deltaTone: Q.net > 0 ? "positive" : Q.net < 0 ? "negative" : "neutral",
+						delta: Q.inflow > 0 ? Q.net / Q.inflow * 100 : void 0,
+						deltaSuffix: "% of inflows",
+						spark: Ve.length > 1 ? Ve : void 0,
+						sparkTone: Q.net >= 0 ? "positive" : "negative",
+						icon: /* @__PURE__ */ y(g, {
+							className: "size-4",
+							"aria-hidden": "true"
+						})
+					})
+				})
+			]
+		}), /* @__PURE__ */ b(Ee, {
 			defaultValue: "allocation",
 			className: "space-y-4",
 			children: [
-				/* @__PURE__ */ m(ye, {
+				/* @__PURE__ */ b(De, {
 					className: "grid w-full grid-cols-3",
 					children: [
-						/* @__PURE__ */ p(F, {
+						/* @__PURE__ */ y(F, {
 							value: "allocation",
 							children: "Allocation"
 						}),
-						/* @__PURE__ */ p(F, {
+						/* @__PURE__ */ y(F, {
 							value: "cashflow",
 							children: "Cash Flow"
 						}),
-						/* @__PURE__ */ p(F, {
+						/* @__PURE__ */ y(F, {
 							value: "performance",
 							children: "Performance"
 						})
 					]
 				}),
-				/* @__PURE__ */ m(P, {
+				/* @__PURE__ */ b(P, {
 					value: "allocation",
 					className: "space-y-4",
-					children: [/* @__PURE__ */ m(g, { children: [/* @__PURE__ */ m(y, { children: [/* @__PURE__ */ m(b, {
-						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ p(ce, {
-							className: "size-5",
-							"aria-hidden": "true"
-						}), "Asset Allocation"]
-					}), /* @__PURE__ */ p(v, { children: "Share of invested value by asset class, from your holdings." })] }), /* @__PURE__ */ p(_, { children: ke.length === 0 ? /* @__PURE__ */ p(o, {
-						icon: /* @__PURE__ */ p(ce, {
-							className: "size-6",
-							"aria-hidden": "true"
-						}),
-						title: "No invested holdings yet",
-						description: "Add holdings to your accounts to see an asset-class breakdown here."
-					}) : /* @__PURE__ */ m("div", {
-						className: "space-y-4",
-						children: [/* @__PURE__ */ p(a, { data: ke }), /* @__PURE__ */ m(O, { children: [/* @__PURE__ */ p(M, { children: /* @__PURE__ */ m(N, { children: [
-							/* @__PURE__ */ p(j, { children: "Asset class" }),
-							/* @__PURE__ */ p(j, {
-								className: "text-right",
-								children: "Market value"
-							}),
-							/* @__PURE__ */ p(j, {
-								className: "text-right",
-								children: "Weight"
-							})
-						] }) }), /* @__PURE__ */ p(k, { children: ke.map((e) => /* @__PURE__ */ m(N, { children: [
-							/* @__PURE__ */ p(A, {
-								className: "font-medium text-text-primary",
-								children: e.label
-							}),
-							/* @__PURE__ */ p(A, {
-								className: "text-right",
-								children: e.caption
+					children: [/* @__PURE__ */ y(o, { children: /* @__PURE__ */ b(s, {
+						glow: !0,
+						className: "space-y-5",
+						children: [/* @__PURE__ */ b("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ y(ce, {
+								className: "size-5 text-text-secondary",
+								"aria-hidden": "true"
+							}), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("h2", {
+								className: "text-base font-semibold text-text-primary",
+								children: "Asset Allocation"
+							}), /* @__PURE__ */ y("p", {
+								className: "text-sm text-text-secondary",
+								children: "Share of invested value by asset class, from your holdings."
+							})] })]
+						}), Ie.length === 0 ? /* @__PURE__ */ y(l, {
+							icon: /* @__PURE__ */ y(ce, {
+								className: "size-6",
+								"aria-hidden": "true"
 							}),
-							/* @__PURE__ */ p(A, {
-								className: "text-right text-text-secondary",
-								children: ie(e.value)
-							})
-						] }, e.label)) })] })]
-					}) })] }), /* @__PURE__ */ m(g, { children: [/* @__PURE__ */ m(y, { children: [/* @__PURE__ */ m(b, {
-						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ p(f, {
-							className: "size-5",
-							"aria-hidden": "true"
-						}), "Net Worth Composition"]
-					}), /* @__PURE__ */ p(v, { children: "Invested value versus liquid cash." })] }), /* @__PURE__ */ p(_, { children: Ae.length === 0 ? /* @__PURE__ */ p(o, {
-						icon: /* @__PURE__ */ p(f, {
-							className: "size-6",
-							"aria-hidden": "true"
-						}),
-						title: "No balances yet",
-						description: "Add accounts with balances or holdings to see your composition."
-					}) : /* @__PURE__ */ p(a, { data: Ae }) })] })]
+							title: "No invested holdings yet",
+							description: "Add holdings to your accounts to see an asset-class breakdown here."
+						}) : /* @__PURE__ */ b("div", {
+							className: "grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)] lg:items-center",
+							children: [/* @__PURE__ */ y(a, {
+								data: Le,
+								height: 240,
+								centerValue: ne(J.totalMarketValue, Y),
+								centerLabel: "Invested",
+								valueFormatter: (e) => p(e, Y)
+							}), /* @__PURE__ */ y("div", {
+								className: "overflow-x-auto",
+								children: /* @__PURE__ */ b(O, { children: [/* @__PURE__ */ y(M, { children: /* @__PURE__ */ b(N, { children: [
+									/* @__PURE__ */ y(j, { children: "Asset class" }),
+									/* @__PURE__ */ y(j, {
+										className: "text-right",
+										children: "Weight"
+									}),
+									/* @__PURE__ */ y(j, {
+										className: "text-right",
+										children: "Market value"
+									})
+								] }) }), /* @__PURE__ */ y(k, { children: Ie.map((e) => /* @__PURE__ */ b(N, { children: [
+									/* @__PURE__ */ y(A, {
+										className: "font-medium text-text-primary",
+										children: e.label
+									}),
+									/* @__PURE__ */ y(A, {
+										className: "text-right tabular-nums text-text-secondary",
+										children: ie(e.value)
+									}),
+									/* @__PURE__ */ y(A, {
+										className: "text-right tabular-nums font-medium text-text-primary",
+										children: e.caption
+									})
+								] }, e.label)) })] })
+							})]
+						})]
+					}) }), /* @__PURE__ */ y(o, {
+						index: 1,
+						children: /* @__PURE__ */ b(S, {
+							className: "transition-shadow motion-safe:hover:shadow-[var(--shadow-pop-hover,var(--shadow-elevation-2))]",
+							children: [/* @__PURE__ */ b(T, { children: [/* @__PURE__ */ b(pe, {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ y(v, {
+									className: "size-5",
+									"aria-hidden": "true"
+								}), "Net Worth Composition"]
+							}), /* @__PURE__ */ y(w, { children: "Invested value versus liquid cash." })] }), /* @__PURE__ */ y(C, { children: Re.length === 0 ? /* @__PURE__ */ y(l, {
+								icon: /* @__PURE__ */ y(v, {
+									className: "size-6",
+									"aria-hidden": "true"
+								}),
+								title: "No balances yet",
+								description: "Add accounts with balances or holdings to see your composition."
+							}) : /* @__PURE__ */ b("div", {
+								className: "flex flex-col items-center gap-6 sm:flex-row sm:justify-around",
+								children: [/* @__PURE__ */ y(ee, {
+									value: ze,
+									label: "Invested",
+									tone: "brand",
+									size: 140
+								}), /* @__PURE__ */ y("div", {
+									className: "min-w-0 flex-1",
+									children: /* @__PURE__ */ y(a, {
+										data: Re,
+										height: 180,
+										centerValue: ne(J.totalNetWorth, Y),
+										centerLabel: "Net worth",
+										valueFormatter: (e) => p(e, Y)
+									})
+								})]
+							}) })]
+						})
+					})]
 				}),
-				/* @__PURE__ */ m(P, {
+				/* @__PURE__ */ b(P, {
 					value: "cashflow",
 					className: "space-y-4",
-					children: [/* @__PURE__ */ m(g, { children: [/* @__PURE__ */ m(y, { children: [/* @__PURE__ */ m(b, {
-						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ p(u, {
-							className: "size-5",
-							"aria-hidden": "true"
-						}), "Inflows vs Outflows"]
-					}), /* @__PURE__ */ m(v, { children: ["Monthly cash flow aggregated from your recorded transactions.", J.length > 0 ? /* @__PURE__ */ m("span", {
-						className: "mt-0.5 block text-xs text-text-secondary",
-						children: [
-							"Based on ",
-							J.length.toLocaleString(),
-							" ",
-							J.length === 1 ? "transaction" : "transactions",
-							"."
-						]
-					}) : null] })] }), /* @__PURE__ */ p(_, { children: L.isLoading ? /* @__PURE__ */ p(s, { rows: 4 }) : L.isError ? /* @__PURE__ */ p(ee, { onRetry: () => L.refetch() }) : Y.length === 0 ? /* @__PURE__ */ p(o, {
-						icon: /* @__PURE__ */ p(u, {
-							className: "size-6",
-							"aria-hidden": "true"
-						}),
-						title: "No cash flow to analyze yet",
-						description: "Record deposits, withdrawals, or trades to build a cash-flow history.",
-						action: /* @__PURE__ */ m(h, {
-							size: "sm",
-							onClick: () => U(!0),
-							children: [/* @__PURE__ */ p(le, {
-								className: "mr-1 size-4",
-								"aria-hidden": "true"
-							}), "Record Transaction"]
-						})
-					}) : /* @__PURE__ */ m("div", {
-						className: "space-y-4",
-						children: [Y.map((e) => /* @__PURE__ */ m("div", {
-							className: "space-y-1.5",
-							children: [
-								/* @__PURE__ */ m("div", {
-									className: "flex items-center justify-between text-xs",
-									children: [/* @__PURE__ */ p("span", {
-										className: "font-medium text-text-primary",
-										children: e.label
-									}), /* @__PURE__ */ m("span", {
-										className: "flex gap-3",
-										children: [/* @__PURE__ */ m("span", {
-											className: "text-status-success-text",
-											children: [/* @__PURE__ */ p(se, {
-												className: "mr-0.5 inline size-3",
-												"aria-hidden": "true"
-											}), c(e.inflow, q)]
-										}), /* @__PURE__ */ m("span", {
-											className: "text-status-error-text",
-											children: [/* @__PURE__ */ p(oe, {
-												className: "mr-0.5 inline size-3",
-												"aria-hidden": "true"
-											}), c(e.outflow, q)]
-										})]
+					children: [
+						/* @__PURE__ */ y(o, { children: /* @__PURE__ */ b(s, {
+							className: "space-y-5",
+							children: [/* @__PURE__ */ b("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ y(g, {
+									className: "size-5 text-text-secondary",
+									"aria-hidden": "true"
+								}), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("h2", {
+									className: "text-base font-semibold text-text-primary",
+									children: "Inflows vs Outflows by month"
+								}), /* @__PURE__ */ b("p", {
+									className: "text-sm text-text-secondary",
+									children: ["Monthly cash flow aggregated from your recorded transactions.", X.length > 0 ? ` Based on ${X.length.toLocaleString()} ${X.length === 1 ? "transaction" : "transactions"}.` : ""]
+								})] })]
+							}), L.isLoading ? /* @__PURE__ */ y(d, { rows: 4 }) : L.isError ? /* @__PURE__ */ y(u, { onRetry: () => L.refetch() }) : Z.length === 0 ? /* @__PURE__ */ y(l, {
+								icon: /* @__PURE__ */ y(g, {
+									className: "size-6",
+									"aria-hidden": "true"
+								}),
+								title: "No cash flow to analyze yet",
+								description: "Record deposits, withdrawals, or trades to build a cash-flow history.",
+								action: /* @__PURE__ */ b(x, {
+									size: "sm",
+									onClick: () => G(!0),
+									children: [/* @__PURE__ */ y(le, {
+										className: "mr-1 size-4",
+										"aria-hidden": "true"
+									}), "Record Transaction"]
+								})
+							}) : /* @__PURE__ */ b("div", {
+								className: "space-y-4",
+								children: [/* @__PURE__ */ y(te, {
+									data: Z,
+									height: 280,
+									valueFormatter: (e) => ne(e, Y)
+								}), /* @__PURE__ */ b("div", {
+									className: "flex flex-wrap gap-4 text-xs text-text-secondary",
+									children: [/* @__PURE__ */ b("span", {
+										className: "inline-flex items-center gap-1.5",
+										children: [/* @__PURE__ */ y(h, {
+											className: "size-3.5 text-status-success-text",
+											"aria-hidden": "true"
+										}), "Inflow"]
+									}), /* @__PURE__ */ b("span", {
+										className: "inline-flex items-center gap-1.5",
+										children: [/* @__PURE__ */ y(oe, {
+											className: "size-3.5 text-status-error-text",
+											"aria-hidden": "true"
+										}), "Outflow"]
 									})]
+								})]
+							})]
+						}) }),
+						Z.length > 0 ? /* @__PURE__ */ b("div", {
+							className: "grid gap-4 sm:grid-cols-3",
+							children: [
+								/* @__PURE__ */ y(o, {
+									index: 0,
+									children: /* @__PURE__ */ y(c, {
+										label: "Total inflows",
+										value: p(Q.inflow, Y),
+										icon: /* @__PURE__ */ y(h, {
+											className: "size-4",
+											"aria-hidden": "true"
+										}),
+										sparkTone: "positive"
+									})
 								}),
-								/* @__PURE__ */ p("div", {
-									className: "h-2 w-full overflow-hidden rounded-full bg-bg-sunken",
-									role: "progressbar",
-									"aria-label": `${e.label} inflow`,
-									"aria-valuenow": Math.round(e.inflow / Z * 100),
-									"aria-valuemin": 0,
-									"aria-valuemax": 100,
-									children: /* @__PURE__ */ p("div", {
-										className: "h-full rounded-full bg-status-success-bg motion-safe:transition-[width] motion-safe:duration-200",
-										style: { width: `${e.inflow / Z * 100}%` }
+								/* @__PURE__ */ y(o, {
+									index: 1,
+									children: /* @__PURE__ */ y(c, {
+										label: "Total outflows",
+										value: p(Q.outflow, Y),
+										icon: /* @__PURE__ */ y(oe, {
+											className: "size-4",
+											"aria-hidden": "true"
+										})
 									})
 								}),
-								/* @__PURE__ */ p("div", {
-									className: "h-2 w-full overflow-hidden rounded-full bg-bg-sunken",
-									role: "progressbar",
-									"aria-label": `${e.label} outflow`,
-									"aria-valuenow": Math.round(e.outflow / Z * 100),
-									"aria-valuemin": 0,
-									"aria-valuemax": 100,
-									children: /* @__PURE__ */ p("div", {
-										className: "h-full rounded-full bg-status-error-bg motion-safe:transition-[width] motion-safe:duration-200",
-										style: { width: `${e.outflow / Z * 100}%` }
+								/* @__PURE__ */ y(o, {
+									index: 2,
+									children: /* @__PURE__ */ y(c, {
+										label: "Net",
+										value: p(Q.net, Y),
+										deltaTone: Q.net > 0 ? "positive" : Q.net < 0 ? "negative" : "neutral",
+										delta: Q.inflow > 0 ? Q.net / Q.inflow * 100 : void 0,
+										deltaSuffix: "% of inflows",
+										glow: !0
 									})
 								})
 							]
-						}, e.key)), /* @__PURE__ */ m("div", {
-							className: "flex flex-wrap gap-4 pt-1 text-xs text-text-secondary",
-							children: [/* @__PURE__ */ m("span", {
-								className: "inline-flex items-center gap-1.5",
-								children: [/* @__PURE__ */ p("span", { className: "inline-block size-2.5 rounded-full bg-status-success-bg" }), "Inflow"]
-							}), /* @__PURE__ */ m("span", {
-								className: "inline-flex items-center gap-1.5",
-								children: [/* @__PURE__ */ p("span", { className: "inline-block size-2.5 rounded-full bg-status-error-bg" }), "Outflow"]
+						}) : null,
+						Be.length > 0 ? /* @__PURE__ */ y(o, { children: /* @__PURE__ */ b(S, {
+							className: "transition-shadow motion-safe:hover:shadow-[var(--shadow-pop-hover,var(--shadow-elevation-2))]",
+							children: [/* @__PURE__ */ b(T, { children: [/* @__PURE__ */ y(pe, { children: "By Transaction Type" }), /* @__PURE__ */ y(w, { children: "Total value moved per transaction type." })] }), /* @__PURE__ */ y(C, {
+								className: "overflow-x-auto",
+								children: /* @__PURE__ */ b(O, { children: [/* @__PURE__ */ y(M, { children: /* @__PURE__ */ b(N, { children: [
+									/* @__PURE__ */ y(j, { children: "Type" }),
+									/* @__PURE__ */ y(j, { children: "Direction" }),
+									/* @__PURE__ */ y(j, {
+										className: "text-right",
+										children: "Total"
+									})
+								] }) }), /* @__PURE__ */ y(k, { children: Be.map((e) => /* @__PURE__ */ b(N, {
+									className: "transition-colors hover:bg-bg-elevated",
+									children: [
+										/* @__PURE__ */ y(A, {
+											className: "font-medium text-text-primary",
+											children: I(e.type)
+										}),
+										/* @__PURE__ */ y(A, { children: /* @__PURE__ */ y(fe, {
+											variant: e.dir === "in" ? "default" : e.dir === "out" ? "destructive" : "secondary",
+											children: e.dir === "in" ? "Inflow" : e.dir === "out" ? "Outflow" : "Neutral"
+										}) }),
+										/* @__PURE__ */ y(A, {
+											className: "text-right font-medium tabular-nums",
+											children: p(e.total, Y)
+										})
+									]
+								}, e.type)) })] })
 							})]
-						})]
-					}) })] }), je.length > 0 ? /* @__PURE__ */ m(g, { children: [/* @__PURE__ */ m(y, { children: [/* @__PURE__ */ p(b, { children: "By Transaction Type" }), /* @__PURE__ */ p(v, { children: "Total value moved per transaction type." })] }), /* @__PURE__ */ p(_, { children: /* @__PURE__ */ m(O, { children: [/* @__PURE__ */ p(M, { children: /* @__PURE__ */ m(N, { children: [
-						/* @__PURE__ */ p(j, { children: "Type" }),
-						/* @__PURE__ */ p(j, { children: "Direction" }),
-						/* @__PURE__ */ p(j, {
-							className: "text-right",
-							children: "Total"
-						})
-					] }) }), /* @__PURE__ */ p(k, { children: je.map((e) => /* @__PURE__ */ m(N, { children: [
-						/* @__PURE__ */ p(A, {
-							className: "font-medium text-text-primary",
-							children: I(e.type)
-						}),
-						/* @__PURE__ */ p(A, { children: /* @__PURE__ */ p(ue, {
-							variant: e.dir === "in" ? "default" : e.dir === "out" ? "destructive" : "secondary",
-							children: e.dir === "in" ? "Inflow" : e.dir === "out" ? "Outflow" : "Neutral"
-						}) }),
-						/* @__PURE__ */ p(A, {
-							className: "text-right font-medium",
-							children: c(e.total, q)
-						})
-					] }, e.type)) })] }) })] }) : null]
+						}) }) : null
+					]
 				}),
-				/* @__PURE__ */ p(P, {
+				/* @__PURE__ */ b(P, {
 					value: "performance",
 					className: "space-y-4",
-					children: /* @__PURE__ */ m(g, { children: [/* @__PURE__ */ m(y, {
+					children: [/* @__PURE__ */ b(S, { children: [/* @__PURE__ */ b(T, {
 						className: "flex flex-col gap-3 md:flex-row md:items-start md:justify-between",
-						children: [/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p(b, { children: "Holdings Performance" }), /* @__PURE__ */ p(v, { children: "Unrealized gain or loss — market value versus cost basis." })] }), B.length > 0 ? /* @__PURE__ */ m("div", {
+						children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y(pe, { children: "Holdings Performance" }), /* @__PURE__ */ y(w, { children: "Unrealized gain or loss — market value versus cost basis." })] }), H.length > 0 ? /* @__PURE__ */ b("div", {
 							className: "w-full md:w-56",
-							children: [/* @__PURE__ */ p(S, {
+							children: [/* @__PURE__ */ y(E, {
 								htmlFor: "perf-account",
 								className: "sr-only",
 								children: "Account"
-							}), /* @__PURE__ */ m(C, {
-								value: De ?? "",
-								onValueChange: (e) => xe(e),
-								children: [/* @__PURE__ */ p(E, {
+							}), /* @__PURE__ */ b(Se, {
+								value: Pe ?? "",
+								onValueChange: (e) => Ae(e),
+								children: [/* @__PURE__ */ y(Te, {
 									id: "perf-account",
-									children: /* @__PURE__ */ p(D, { placeholder: "Select account" })
-								}), /* @__PURE__ */ p(w, { children: B.map((e) => /* @__PURE__ */ p(T, {
+									children: /* @__PURE__ */ y(D, { placeholder: "Select account" })
+								}), /* @__PURE__ */ y(Ce, { children: H.map((e) => /* @__PURE__ */ y(we, {
 									value: e.id,
 									children: e.name
 								}, e.id)) })]
 							})]
 						}) : null]
-					}), /* @__PURE__ */ p(_, { children: R.isLoading ? /* @__PURE__ */ p(s, { rows: 3 }) : B.length === 0 ? /* @__PURE__ */ p(o, {
-						icon: /* @__PURE__ */ p(f, {
+					}), /* @__PURE__ */ y(C, { children: R.isLoading ? /* @__PURE__ */ y(d, { rows: 3 }) : H.length === 0 ? /* @__PURE__ */ y(l, {
+						icon: /* @__PURE__ */ y(v, {
 							className: "size-6",
 							"aria-hidden": "true"
 						}),
 						title: "No accounts yet",
 						description: "Create an account and add holdings to analyze performance."
-					}) : V.isLoading ? /* @__PURE__ */ p(s, { rows: 3 }) : V.isError ? /* @__PURE__ */ p(ee, { onRetry: () => V.refetch() }) : Q.rows.length === 0 ? /* @__PURE__ */ p(o, {
-						icon: /* @__PURE__ */ p(u, {
+					}) : U.isLoading ? /* @__PURE__ */ y(d, { rows: 3 }) : U.isError ? /* @__PURE__ */ y(u, { onRetry: () => U.refetch() }) : $.rows.length === 0 ? /* @__PURE__ */ y(l, {
+						icon: /* @__PURE__ */ y(g, {
 							className: "size-6",
 							"aria-hidden": "true"
 						}),
 						title: "No holdings in this account",
 						description: "Add holdings to this account to see unrealized gains and losses."
-					}) : /* @__PURE__ */ m("div", {
+					}) : /* @__PURE__ */ b("div", {
 						className: "space-y-4",
-						children: [/* @__PURE__ */ m("div", {
+						children: [/* @__PURE__ */ b("div", {
 							className: "grid gap-4 sm:grid-cols-3",
 							children: [
-								/* @__PURE__ */ m("div", {
-									className: "rounded-lg border border-border-subtle bg-bg-surface p-4",
-									children: [/* @__PURE__ */ p("p", {
-										className: "text-xs text-text-secondary",
-										children: "Total unrealized"
-									}), /* @__PURE__ */ p("p", {
-										className: "mt-1 text-xl font-semibold",
-										children: /* @__PURE__ */ p(we, {
-											value: Q.totalUnrealized,
-											currency: q
-										})
-									})]
+								/* @__PURE__ */ y(c, {
+									label: "Total unrealized",
+									value: `${$.totalUnrealized >= 0 ? "+" : "-"}${p(Math.abs($.totalUnrealized), Y)}`,
+									deltaTone: $.totalUnrealized > 0 ? "positive" : $.totalUnrealized < 0 ? "negative" : "neutral",
+									delta: $.totalCost > 0 ? $.totalUnrealized / $.totalCost * 100 : void 0,
+									glow: $.totalUnrealized >= 0
 								}),
-								/* @__PURE__ */ m("div", {
-									className: "rounded-lg border border-border-subtle bg-bg-surface p-4",
-									children: [/* @__PURE__ */ p("p", {
-										className: "text-xs text-text-secondary",
-										children: "Cost basis"
-									}), /* @__PURE__ */ p("p", {
-										className: "mt-1 text-xl font-semibold text-text-primary",
-										children: c(Q.totalCost, q)
-									})]
+								/* @__PURE__ */ y(c, {
+									label: "Cost basis",
+									value: p($.totalCost, Y)
 								}),
-								/* @__PURE__ */ m("div", {
-									className: "rounded-lg border border-border-subtle bg-bg-surface p-4",
-									children: [/* @__PURE__ */ p("p", {
-										className: "text-xs text-text-secondary",
-										children: "Return on cost"
-									}), /* @__PURE__ */ p("p", {
-										className: "mt-1 text-xl font-semibold text-text-primary",
-										children: ie(Q.totalCost > 0 ? Q.totalUnrealized / Q.totalCost * 100 : null)
-									})]
+								/* @__PURE__ */ y(c, {
+									label: "Return on cost",
+									value: ie($.totalCost > 0 ? $.totalUnrealized / $.totalCost * 100 : null)
 								})
 							]
-						}), /* @__PURE__ */ m(O, { children: [/* @__PURE__ */ p(M, { children: /* @__PURE__ */ m(N, { children: [
-							/* @__PURE__ */ p(j, { children: "Holding" }),
-							/* @__PURE__ */ p(j, {
-								className: "text-right",
-								children: "Market value"
-							}),
-							/* @__PURE__ */ p(j, {
-								className: "text-right",
-								children: "Cost basis"
-							}),
-							/* @__PURE__ */ p(j, {
-								className: "text-right",
-								children: "Unrealized"
-							})
-						] }) }), /* @__PURE__ */ p(k, { children: Q.rows.map(({ holding: e, unrealized: t }) => /* @__PURE__ */ m(N, { children: [
-							/* @__PURE__ */ m(A, { children: [/* @__PURE__ */ p("div", {
-								className: "font-medium text-text-primary",
-								children: e.symbol
-							}), /* @__PURE__ */ m("div", {
-								className: "text-xs text-text-secondary",
+						}), /* @__PURE__ */ y("div", {
+							className: "overflow-x-auto",
+							children: /* @__PURE__ */ b(O, { children: [/* @__PURE__ */ y(M, { children: /* @__PURE__ */ b(N, { children: [
+								/* @__PURE__ */ y(j, { children: "Holding" }),
+								/* @__PURE__ */ y(j, {
+									className: "text-right",
+									children: "Market value"
+								}),
+								/* @__PURE__ */ y(j, {
+									className: "text-right",
+									children: "Cost basis"
+								}),
+								/* @__PURE__ */ y(j, {
+									className: "text-right",
+									children: "Unrealized gain/loss"
+								})
+							] }) }), /* @__PURE__ */ y(k, { children: $.rows.map(({ holding: e, unrealized: t, pct: n }) => /* @__PURE__ */ b(N, {
+								className: "transition-colors hover:bg-bg-elevated",
 								children: [
-									e.name ?? I(e.assetClass),
-									" · as of",
-									" ",
-									re(e.asOf)
+									/* @__PURE__ */ b(A, { children: [/* @__PURE__ */ y("div", {
+										className: "font-medium text-text-primary",
+										children: e.symbol
+									}), /* @__PURE__ */ b("div", {
+										className: "text-xs text-text-secondary",
+										children: [
+											e.name ?? I(e.assetClass),
+											" · as of",
+											" ",
+											re(e.asOf)
+										]
+									})] }),
+									/* @__PURE__ */ y(A, {
+										className: "text-right tabular-nums",
+										children: p(e.marketValue, e.currency)
+									}),
+									/* @__PURE__ */ y(A, {
+										className: "text-right tabular-nums text-text-secondary",
+										children: p(e.costBasis, e.currency)
+									}),
+									/* @__PURE__ */ y(A, {
+										className: "text-right",
+										children: /* @__PURE__ */ y(B, {
+											value: t,
+											currency: e.currency,
+											pct: n
+										})
+									})
 								]
-							})] }),
-							/* @__PURE__ */ p(A, {
-								className: "text-right",
-								children: c(e.marketValue, e.currency)
-							}),
-							/* @__PURE__ */ p(A, {
-								className: "text-right text-text-secondary",
-								children: c(e.costBasis, e.currency)
-							}),
-							/* @__PURE__ */ p(A, {
-								className: "text-right",
-								children: /* @__PURE__ */ p(we, {
-									value: t,
-									currency: e.currency
-								})
+							}, e.id)) })] })
+						})]
+					}) })] }), $.rows.length > 0 && ($.gainers.length > 0 || $.losers.length > 0) ? /* @__PURE__ */ b("div", {
+						className: "grid gap-4 md:grid-cols-2",
+						children: [$.gainers.length > 0 ? /* @__PURE__ */ y(o, {
+							index: 0,
+							children: /* @__PURE__ */ b(s, {
+								className: "space-y-3",
+								children: [/* @__PURE__ */ b("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ y(de, {
+										className: "size-4 text-status-success-text",
+										"aria-hidden": "true"
+									}), /* @__PURE__ */ y("h3", {
+										className: "text-sm font-semibold text-text-primary",
+										children: "Top gainers"
+									})]
+								}), /* @__PURE__ */ y("ul", {
+									className: "space-y-2",
+									children: $.gainers.map(({ holding: e, unrealized: t, pct: n }) => /* @__PURE__ */ b("li", {
+										className: "flex items-center justify-between gap-3 text-sm",
+										children: [/* @__PURE__ */ y("span", {
+											className: "font-medium text-text-primary",
+											children: e.symbol
+										}), /* @__PURE__ */ y(B, {
+											value: t,
+											currency: e.currency,
+											pct: n
+										})]
+									}, e.id))
+								})]
+							})
+						}) : null, $.losers.length > 0 ? /* @__PURE__ */ y(o, {
+							index: 1,
+							children: /* @__PURE__ */ b(s, {
+								className: "space-y-3",
+								children: [/* @__PURE__ */ b("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ y(ue, {
+										className: "size-4 text-status-error-text",
+										"aria-hidden": "true"
+									}), /* @__PURE__ */ y("h3", {
+										className: "text-sm font-semibold text-text-primary",
+										children: "Top losers"
+									})]
+								}), /* @__PURE__ */ y("ul", {
+									className: "space-y-2",
+									children: $.losers.map(({ holding: e, unrealized: t, pct: n }) => /* @__PURE__ */ b("li", {
+										className: "flex items-center justify-between gap-3 text-sm",
+										children: [/* @__PURE__ */ y("span", {
+											className: "font-medium text-text-primary",
+											children: e.symbol
+										}), /* @__PURE__ */ y(B, {
+											value: t,
+											currency: e.currency,
+											pct: n
+										})]
+									}, e.id))
+								})]
 							})
-						] }, e.id)) })] })]
-					}) })] })
+						}) : null]
+					}) : null]
 				})
 			]
 		})]
 	});
 }
 //#endregion
-export { B as AnalyticsPage };
+export { H as AnalyticsPage };
 
 //# sourceMappingURL=AnalyticsPage.js.map