@burdenoff/microfe-brainyrich 2026.525.1 → 2026.706.1

package/dist/brainyrich/pages/AnalyticsPage.js

@@ -1,316 +1,649 @@
-import { useBrainyRichStore as e } from "../store/brainyrichStore.js";
-import { KpiGrid as t, SectionShell as n, formatMoney as r } from "./_shared.js";
-import { BarChart3 as i, Download as a } from "lucide-react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { Button as c, Card as l, CardContent as u, CardDescription as d, CardHeader as f, CardTitle as p, Tabs as m, TabsContent as h, TabsList as g, TabsTrigger as _ } from "@burdenoff/fe-libs/ui";
+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";
 //#region src/brainyrich/pages/AnalyticsPage.tsx
-var v = [
-	{
-		month: "Jan",
-		portfolio: 91e4,
-		benchmark: 895e3
-	},
-	{
-		month: "Feb",
-		portfolio: 928e3,
-		benchmark: 91e4
-	},
-	{
-		month: "Mar",
-		portfolio: 922e3,
-		benchmark: 905e3
-	},
-	{
-		month: "Apr",
-		portfolio: 945e3,
-		benchmark: 92e4
-	},
-	{
-		month: "May",
-		portfolio: 948e3,
-		benchmark: 925e3
-	},
-	{
-		month: "Jun",
-		portfolio: 97e4,
-		benchmark: 94e4
+var I = (e) => e.toLowerCase().split("_").map((e) => e && e[0].toUpperCase() + e.slice(1)).join(" "), L = [
+	"DEPOSIT",
+	"DIVIDEND",
+	"INTEREST",
+	"SELL"
+], R = [
+	"WITHDRAWAL",
+	"FEE",
+	"BUY"
+], z = (e) => L.includes(e) ? "in" : R.includes(e) ? "out" : "neutral", xe = (e) => {
+	let t = new Date(e);
+	return Number.isNaN(t.getTime()) ? null : {
+		key: `${t.getFullYear()}-${String(t.getMonth() + 1).padStart(2, "0")}`,
+		label: new Intl.DateTimeFormat("en-US", {
+			month: "short",
+			year: "numeric"
+		}).format(t)
+	};
+}, Se = (e) => {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of e) {
+		let e = xe(n.tradeDate);
+		if (!e) continue;
+		let r = z(n.type);
+		if (r === "neutral") continue;
+		let i = Math.abs(n.amount), a = t.get(e.key) ?? {
+			key: e.key,
+			label: e.label,
+			inflow: 0,
+			outflow: 0
+		};
+		r === "in" ? a.inflow += i : a.outflow += i, t.set(e.key, a);
 	}
-], y = [
-	{
-		month: "Jan",
-		income: 185e3,
-		expenses: 92e3,
-		savings: 93e3
-	},
-	{
-		month: "Feb",
-		income: 185e3,
-		expenses: 98e3,
-		savings: 87e3
-	},
-	{
-		month: "Mar",
-		income: 195e3,
-		expenses: 88e3,
-		savings: 107e3
-	},
-	{
-		month: "Apr",
-		income: 185e3,
-		expenses: 95e3,
-		savings: 9e4
-	},
-	{
-		month: "May",
-		income: 185e3,
-		expenses: 91e3,
-		savings: 94e3
-	},
-	{
-		month: "Jun",
-		income: 2e5,
-		expenses: 99e3,
-		savings: 101e3
-	}
-], b = Math.max(...v.map((e) => e.portfolio)), x = Math.max(...y.map((e) => e.income));
-function S() {
-	let { portfolios: S, holdings: C } = e(), w = S.reduce((e, t) => e + t.value, 0);
-	return /* @__PURE__ */ s(n, {
+	return Array.from(t.values()).sort((e, t) => e.key.localeCompare(t.key));
+}, Ce = (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]) => ({
+		type: e,
+		total: t,
+		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}`,
+		children: [
+			/* @__PURE__ */ p(i, {
+				className: "size-3.5",
+				"aria-hidden": "true"
+			}),
+			o,
+			c(Math.abs(e), t)
+		]
+	});
+}
+var Te = {
+	accountId: "",
+	type: "DEPOSIT",
+	amount: "",
+	symbol: "",
+	tradeDate: "",
+	notes: ""
+}, Ee = [
+	"DEPOSIT",
+	"WITHDRAWAL",
+	"DIVIDEND",
+	"INTEREST",
+	"FEE",
+	"BUY",
+	"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) => ({
+		label: I(e.assetClass),
+		value: e.marketValue / K.totalMarketValue * 100,
+		caption: c(e.marketValue, q),
+		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(() => {
+		let e = 0, t = 0;
+		for (let n of Y) 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);
+		return {
+			rows: e,
+			totalUnrealized: e.reduce((e, t) => e + t.unrealized, 0),
+			totalCost: Me.reduce((e, t) => e + t.costBasis, 0)
+		};
+	}, [Me]);
+	if (d.isLoading) return /* @__PURE__ */ p(ne, {
+		title: "Wealth Analytics",
+		description: "Allocation, cash flow, and holdings performance derived from your real accounts.",
+		children: /* @__PURE__ */ p(s, { rows: 5 })
+	});
+	if (d.isError || !K) return /* @__PURE__ */ p(ne, {
+		title: "Wealth Analytics",
+		description: "Allocation, cash flow, and holdings performance derived from your real accounts.",
+		children: /* @__PURE__ */ p(ee, {
+			title: "Could not load analytics",
+			description: "We couldn't reach the wealth service. Please retry.",
+			onRetry: () => d.refetch()
+		})
+	});
+	let $ = Number(W.amount), Ne = !!W.accountId && !!W.tradeDate && W.amount.trim() !== "" && Number.isFinite($) && $ > 0 && !H.isPending, Pe = /* @__PURE__ */ m(de, {
+		open: Oe,
+		onOpenChange: (e) => {
+			U(e), e || G(Te);
+		},
+		children: [/* @__PURE__ */ p(_e, {
+			asChild: !0,
+			children: /* @__PURE__ */ m(h, {
+				size: "sm",
+				children: [/* @__PURE__ */ p(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, {
+					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", {
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ m("div", {
+						className: "space-y-1.5",
+						children: [/* @__PURE__ */ p(S, {
+							htmlFor: "tx-account",
+							children: "Account"
+						}), /* @__PURE__ */ m(C, {
+							value: W.accountId,
+							onValueChange: (e) => G((t) => ({
+								...t,
+								accountId: e
+							})),
+							children: [/* @__PURE__ */ p(E, {
+								id: "tx-account",
+								children: /* @__PURE__ */ p(D, { placeholder: "Select an account" })
+							}), /* @__PURE__ */ p(w, { children: B.map((e) => /* @__PURE__ */ p(T, {
+								value: e.id,
+								children: e.name
+							}, e.id)) })]
+						})]
+					}),
+					/* @__PURE__ */ m("div", {
+						className: "grid grid-cols-2 gap-4",
+						children: [/* @__PURE__ */ m("div", {
+							className: "space-y-1.5",
+							children: [/* @__PURE__ */ p(S, {
+								htmlFor: "tx-type",
+								children: "Type"
+							}), /* @__PURE__ */ m(C, {
+								value: W.type,
+								onValueChange: (e) => G((t) => ({
+									...t,
+									type: e
+								})),
+								children: [/* @__PURE__ */ p(E, {
+									id: "tx-type",
+									children: /* @__PURE__ */ p(D, {})
+								}), /* @__PURE__ */ p(w, { children: Ee.map((e) => /* @__PURE__ */ p(T, {
+									value: e,
+									children: I(e)
+								}, e)) })]
+							})]
+						}), /* @__PURE__ */ m("div", {
+							className: "space-y-1.5",
+							children: [/* @__PURE__ */ m(S, {
+								htmlFor: "tx-amount",
+								children: [
+									"Amount (",
+									q,
+									")"
+								]
+							}), /* @__PURE__ */ p(x, {
+								id: "tx-amount",
+								type: "number",
+								min: "0",
+								step: "0.01",
+								inputMode: "decimal",
+								placeholder: "0.00",
+								value: W.amount,
+								onChange: (e) => G((t) => ({
+									...t,
+									amount: e.target.value
+								}))
+							})]
+						})]
+					}),
+					/* @__PURE__ */ m("div", {
+						className: "grid grid-cols-2 gap-4",
+						children: [/* @__PURE__ */ m("div", {
+							className: "space-y-1.5",
+							children: [/* @__PURE__ */ p(S, {
+								htmlFor: "tx-date",
+								children: "Trade date"
+							}), /* @__PURE__ */ p(x, {
+								id: "tx-date",
+								type: "date",
+								value: W.tradeDate,
+								onChange: (e) => G((t) => ({
+									...t,
+									tradeDate: e.target.value
+								}))
+							})]
+						}), /* @__PURE__ */ m("div", {
+							className: "space-y-1.5",
+							children: [/* @__PURE__ */ p(S, {
+								htmlFor: "tx-symbol",
+								children: "Symbol (optional)"
+							}), /* @__PURE__ */ p(x, {
+								id: "tx-symbol",
+								placeholder: "e.g. AAPL",
+								value: W.symbol,
+								onChange: (e) => G((t) => ({
+									...t,
+									symbol: e.target.value
+								}))
+							})]
+						})]
+					}),
+					/* @__PURE__ */ m("div", {
+						className: "space-y-1.5",
+						children: [/* @__PURE__ */ p(S, {
+							htmlFor: "tx-notes",
+							children: "Notes (optional)"
+						}), /* @__PURE__ */ p(be, {
+							id: "tx-notes",
+							rows: 2,
+							placeholder: "Context for this transaction",
+							value: W.notes,
+							onChange: (e) => G((t) => ({
+								...t,
+								notes: e.target.value
+							}))
+						})]
+					}),
+					H.isError ? /* @__PURE__ */ p("p", {
+						className: "text-sm text-status-error-text",
+						children: H.error instanceof Error ? H.error.message : "Could not record transaction."
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ m(me, { children: [/* @__PURE__ */ p(h, {
+				variant: "outline",
+				onClick: () => U(!1),
+				children: B.length === 0 ? "Close" : "Cancel"
+			}), B.length > 0 ? /* @__PURE__ */ p(h, {
+				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
+					}, { onSuccess: () => {
+						U(!1), G(Te);
+					} });
+				},
+				disabled: !Ne,
+				children: H.isPending ? "Recording…" : "Record"
+			}) : null] })
+		] })]
+	});
+	return /* @__PURE__ */ m(ne, {
 		title: "Wealth Analytics",
-		description: "Comprehensive insights into your wealth performance and financial flows",
-		actionLabel: "Export PDF",
-		badges: ["Live Analytics"],
-		children: [/* @__PURE__ */ o(t, { items: [
+		description: "Allocation, cash flow, and holdings performance derived from your real accounts.",
+		badges: [`${K.accountCount} accounts`],
+		actions: Pe,
+		children: [/* @__PURE__ */ p(te, { items: [
 			{
-				label: "Total Returns",
-				value: "+12.4%",
-				trend: "+2.3% vs last month"
+				label: "Net Worth",
+				value: c(K.totalNetWorth, q)
 			},
 			{
-				label: "Portfolio Value",
-				value: r(w),
-				trend: "+$85K YTD"
+				label: "Invested Value",
+				value: c(K.totalMarketValue, q)
 			},
 			{
-				label: "Monthly Savings",
-				value: r(94e3),
-				trend: "51% savings rate"
+				label: "Cash",
+				value: c(K.totalCash, q)
 			},
 			{
-				label: "Goals Progress",
-				value: "68%",
-				trend: "+7.4% this quarter"
+				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__ */ s(m, {
-			defaultValue: "performance",
+		] }), /* @__PURE__ */ m(ve, {
+			defaultValue: "allocation",
 			className: "space-y-4",
 			children: [
-				/* @__PURE__ */ s(g, {
+				/* @__PURE__ */ m(ye, {
 					className: "grid w-full grid-cols-3",
 					children: [
-						/* @__PURE__ */ o(_, {
-							value: "performance",
-							children: "Performance"
-						}),
-						/* @__PURE__ */ o(_, {
+						/* @__PURE__ */ p(F, {
 							value: "allocation",
 							children: "Allocation"
 						}),
-						/* @__PURE__ */ o(_, {
+						/* @__PURE__ */ p(F, {
 							value: "cashflow",
 							children: "Cash Flow"
+						}),
+						/* @__PURE__ */ p(F, {
+							value: "performance",
+							children: "Performance"
 						})
 					]
 				}),
-				/* @__PURE__ */ s(h, {
-					value: "performance",
+				/* @__PURE__ */ m(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
+							}),
+							/* @__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 }) })] })]
+				}),
+				/* @__PURE__ */ m(P, {
+					value: "cashflow",
 					className: "space-y-4",
-					children: [/* @__PURE__ */ s(l, { children: [/* @__PURE__ */ s(f, {
-						className: "flex flex-row items-center justify-between",
-						children: [/* @__PURE__ */ s("div", { children: [/* @__PURE__ */ o(p, { children: "Portfolio vs Benchmark" }), /* @__PURE__ */ o(d, { children: "6-month performance comparison (CSS bar chart)" })] }), /* @__PURE__ */ s(c, {
-							variant: "outline",
+					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",
-							children: [/* @__PURE__ */ o(a, { className: "mr-1 h-4 w-4" }), "Export"]
-						})]
-					}), /* @__PURE__ */ s(u, {
-						className: "space-y-3",
-						children: [v.map((e) => /* @__PURE__ */ s("div", {
-							className: "space-y-1",
-							children: [/* @__PURE__ */ s("div", {
-								className: "flex items-center justify-between text-xs text-muted-foreground",
-								children: [/* @__PURE__ */ o("span", {
-									className: "w-8 font-medium",
-									children: e.month
-								}), /* @__PURE__ */ s("span", { children: [
-									"Portfolio: ",
-									r(e.portfolio),
-									" | Benchmark: ",
-									r(e.benchmark)
-								] })]
-							}), /* @__PURE__ */ s("div", {
-								className: "relative h-5 bg-muted rounded overflow-hidden",
-								children: [/* @__PURE__ */ o("div", {
-									className: "absolute h-5 bg-blue-400/60 rounded",
-									style: { width: `${e.benchmark / b * 100}%` }
-								}), /* @__PURE__ */ o("div", {
-									className: "absolute h-5 bg-blue-600 rounded",
-									style: {
-										width: `${e.portfolio / b * 100}%`,
-										opacity: .8
-									}
-								})]
-							})]
-						}, e.month)), /* @__PURE__ */ s("div", {
-							className: "flex gap-4 text-xs pt-2",
-							children: [/* @__PURE__ */ s("span", {
-								className: "flex items-center gap-1",
-								children: [/* @__PURE__ */ o("span", { className: "h-2 w-4 bg-blue-600 rounded inline-block" }), " Portfolio"]
-							}), /* @__PURE__ */ s("span", {
-								className: "flex items-center gap-1",
-								children: [/* @__PURE__ */ o("span", { className: "h-2 w-4 bg-blue-400/60 rounded inline-block" }), " Benchmark"]
-							})]
-						})]
-					})] }), /* @__PURE__ */ s(l, { children: [/* @__PURE__ */ s(f, { children: [/* @__PURE__ */ o(p, { children: "Net Worth Trend" }), /* @__PURE__ */ o(d, { children: "Growth trajectory over the past 6 months" })] }), /* @__PURE__ */ o(u, {
-						className: "space-y-2",
-						children: v.map((e) => /* @__PURE__ */ s("div", {
-							className: "flex items-center gap-3",
+							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__ */ o("span", {
-									className: "w-8 text-xs text-muted-foreground",
-									children: e.month
+								/* @__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)]
+										})]
+									})]
 								}),
-								/* @__PURE__ */ o("div", {
-									className: "flex-1 h-4 bg-muted rounded overflow-hidden",
-									children: /* @__PURE__ */ o("div", {
-										className: "h-4 bg-emerald-500 rounded",
-										style: { width: `${e.portfolio / b * 100}%` }
+								/* @__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__ */ o("span", {
-									className: "text-xs font-medium w-20 text-right",
-									children: r(e.portfolio)
+								/* @__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}%` }
+									})
 								})
 							]
-						}, e.month))
-					})] })]
-				}),
-				/* @__PURE__ */ s(h, {
-					value: "allocation",
-					className: "space-y-4",
-					children: [/* @__PURE__ */ s(l, { children: [/* @__PURE__ */ s(f, { children: [/* @__PURE__ */ o(p, { children: "Asset Allocation" }), /* @__PURE__ */ o(d, { children: "Current distribution by portfolio strategy" })] }), /* @__PURE__ */ o(u, {
-						className: "space-y-4",
-						children: S.map((e) => {
-							let t = Math.round(e.value / w * 100);
-							return /* @__PURE__ */ s("div", {
-								className: "space-y-1",
-								children: [/* @__PURE__ */ s("div", {
-									className: "flex justify-between text-sm",
-									children: [/* @__PURE__ */ o("span", {
-										className: "font-medium",
-										children: e.name
-									}), /* @__PURE__ */ s("span", { children: [
-										r(e.value),
-										" (",
-										t,
-										"%)"
-									] })]
-								}), /* @__PURE__ */ o("div", {
-									className: "h-4 rounded bg-muted overflow-hidden",
-									children: /* @__PURE__ */ o("div", {
-										className: "h-4 rounded bg-primary",
-										style: { width: `${t}%` }
-									})
-								})]
-							}, e.id);
-						})
-					})] }), /* @__PURE__ */ s(l, { children: [/* @__PURE__ */ s(f, { children: [/* @__PURE__ */ o(p, { children: "Sector Exposure" }), /* @__PURE__ */ o(d, { children: "Breakdown by sector from holdings" })] }), /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o("div", {
-						className: "grid gap-3 md:grid-cols-2",
-						children: C.map((e) => /* @__PURE__ */ s("div", {
-							className: "flex items-center justify-between rounded-lg border p-3",
-							children: [/* @__PURE__ */ s("div", { children: [/* @__PURE__ */ o("p", {
-								className: "text-sm font-medium",
-								children: e.symbol
-							}), /* @__PURE__ */ o("p", {
-								className: "text-xs text-muted-foreground",
-								children: e.sector
-							})] }), /* @__PURE__ */ o("span", {
-								className: "text-sm font-semibold",
-								children: r(e.marketValue)
+						}, 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"]
 							})]
-						}, e.symbol))
-					}) })] })]
+						})]
+					}) })] }), 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]
 				}),
-				/* @__PURE__ */ o(h, {
-					value: "cashflow",
+				/* @__PURE__ */ p(P, {
+					value: "performance",
 					className: "space-y-4",
-					children: /* @__PURE__ */ s(l, { children: [/* @__PURE__ */ s(f, { children: [/* @__PURE__ */ s(p, {
-						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ o(i, { className: "h-5 w-5" }), "Income vs Expenses"]
-					}), /* @__PURE__ */ o(d, { children: "Monthly financial flow analysis" })] }), /* @__PURE__ */ s(u, {
-						className: "space-y-4",
-						children: [y.map((e) => /* @__PURE__ */ s("div", {
-							className: "space-y-1",
-							children: [/* @__PURE__ */ s("div", {
-								className: "flex items-center justify-between text-xs",
-								children: [
-									/* @__PURE__ */ o("span", {
-										className: "font-medium w-8",
-										children: e.month
-									}),
-									/* @__PURE__ */ s("span", {
-										className: "text-emerald-600",
-										children: ["Income: ", r(e.income)]
-									}),
-									/* @__PURE__ */ s("span", {
-										className: "text-red-500",
-										children: ["Expenses: ", r(e.expenses)]
-									}),
-									/* @__PURE__ */ s("span", {
-										className: "text-blue-600",
-										children: ["Saved: ", r(e.savings)]
-									})
-								]
-							}), /* @__PURE__ */ s("div", {
-								className: "flex gap-1",
-								children: [
-									/* @__PURE__ */ o("div", {
-										className: "h-3 rounded bg-emerald-500",
-										style: { width: `${e.income / x * 50}%` }
-									}),
-									/* @__PURE__ */ o("div", {
-										className: "h-3 rounded bg-red-400",
-										style: { width: `${e.expenses / x * 50}%` }
-									}),
-									/* @__PURE__ */ o("div", {
-										className: "h-3 rounded bg-blue-500",
-										style: { width: `${e.savings / x * 50}%` }
-									})
-								]
+					children: /* @__PURE__ */ m(g, { children: [/* @__PURE__ */ m(y, {
+						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", {
+							className: "w-full md:w-56",
+							children: [/* @__PURE__ */ p(S, {
+								htmlFor: "perf-account",
+								className: "sr-only",
+								children: "Account"
+							}), /* @__PURE__ */ m(C, {
+								value: De ?? "",
+								onValueChange: (e) => xe(e),
+								children: [/* @__PURE__ */ p(E, {
+									id: "perf-account",
+									children: /* @__PURE__ */ p(D, { placeholder: "Select account" })
+								}), /* @__PURE__ */ p(w, { children: B.map((e) => /* @__PURE__ */ p(T, {
+									value: e.id,
+									children: e.name
+								}, e.id)) })]
 							})]
-						}, e.month)), /* @__PURE__ */ s("div", {
-							className: "flex gap-4 text-xs pt-2",
+						}) : null]
+					}), /* @__PURE__ */ p(_, { children: R.isLoading ? /* @__PURE__ */ p(s, { rows: 3 }) : B.length === 0 ? /* @__PURE__ */ p(o, {
+						icon: /* @__PURE__ */ p(f, {
+							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, {
+							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", {
+						className: "space-y-4",
+						children: [/* @__PURE__ */ m("div", {
+							className: "grid gap-4 sm:grid-cols-3",
 							children: [
-								/* @__PURE__ */ s("span", {
-									className: "flex items-center gap-1",
-									children: [/* @__PURE__ */ o("span", { className: "h-2 w-4 bg-emerald-500 rounded inline-block" }), " Income"]
+								/* @__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__ */ s("span", {
-									className: "flex items-center gap-1",
-									children: [/* @__PURE__ */ o("span", { className: "h-2 w-4 bg-red-400 rounded inline-block" }), " Expenses"]
+								/* @__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__ */ s("span", {
-									className: "flex items-center gap-1",
-									children: [/* @__PURE__ */ o("span", { className: "h-2 w-4 bg-blue-500 rounded inline-block" }), " Savings"]
+								/* @__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__ */ 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",
+								children: [
+									e.name ?? I(e.assetClass),
+									" · as of",
+									" ",
+									re(e.asOf)
+								]
+							})] }),
+							/* @__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)) })] })]
+					}) })] })
 				})
 			]
 		})]
 	});
 }
 //#endregion
-export { S as AnalyticsPage };
+export { B as AnalyticsPage };
 
 //# sourceMappingURL=AnalyticsPage.js.map