@burdenoff/microfe-brainyrich 2026.706.1 → 2026.706.2

package/dist/brainyrich/pages/PortfoliosPage.js

@@ -1,17 +1,18 @@
 import { useArchivePortfolio as e, useCreateHolding as t, useCreatePortfolio as n, useDeleteHolding as r, useHouseholds as i, useModelPortfolios as a, usePagedPortfolios as o, usePortfolio as s, useUpdateHolding as c, useUpdatePortfolio as l } from "../hooks/useBrainyRichApi.js";
 import { LoadMore as u } from "../components/LoadMore.js";
 import { ConfirmDialog as d } from "../components/ConfirmDialog.js";
-import { AccountPicker as f } from "../components/pickers.js";
+import { DonutChart as f, FadeIn as p, GlassCard as m, StatTile as h } from "../components/viz.js";
+import { AccountPicker as g } from "../components/pickers.js";
 import "../components/index.js";
-import { AllocationBars as p, EmptyState as m, ErrorState as h, KpiGrid as g, LoadingState as _, SectionShell as v, formatMoney as y, formatPct as b, statusBadgeVariant as ee } from "./_shared.js";
-import { TagField as te } from "../components/reuse/TagField.js";
-import { CommentThread as ne } from "../components/reuse/CommentThread.js";
-import { useMemo as x, useState as S } from "react";
-import { ArrowDownRight as C, ArrowUpRight as w, Briefcase as T, MoreHorizontal as re, Pencil as ie, Plus as E, Trash2 as ae } from "lucide-react";
-import { Fragment as oe, jsx as D, jsxs as O } from "react/jsx-runtime";
-import { Badge as k, Button as A, Card as j, CardContent as M, CardDescription as N, CardHeader as P, CardTitle as F, Dialog as I, DialogContent as L, DialogDescription as R, DialogFooter as z, DialogHeader as B, DialogTitle as se, DropdownMenu as ce, DropdownMenuContent as le, DropdownMenuItem as V, DropdownMenuLabel as ue, DropdownMenuSeparator as de, DropdownMenuTrigger as fe, Input as H, Label as U, Select as W, SelectContent as G, SelectItem as K, SelectTrigger as q, SelectValue as J, Sheet as pe, SheetContent as me, SheetDescription as he, SheetHeader as ge, SheetTitle as _e, Table as ve, TableBody as ye, TableCell as Y, TableHead as X, TableHeader as be, TableRow as xe, Textarea as Se } from "@burdenoff/fe-libs/ui";
+import { AllocationBars as _, EmptyState as ee, ErrorState as te, LoadingState as ne, SectionShell as v, formatCompact as re, formatMoney as y, formatPct as b, statusBadgeVariant as x } from "./_shared.js";
+import { TagField as S } from "../components/reuse/TagField.js";
+import { CommentThread as ie } from "../components/reuse/CommentThread.js";
+import { useMemo as C, useState as w } from "react";
+import { ArrowDownRight as T, ArrowUpRight as E, Briefcase as D, MoreHorizontal as ae, Pencil as oe, Plus as O, Trash2 as se } from "lucide-react";
+import { Fragment as ce, jsx as k, jsxs as A } from "react/jsx-runtime";
+import { Badge as j, Button as M, Card as N, CardContent as P, CardDescription as F, CardHeader as le, CardTitle as ue, Dialog as I, DialogContent as L, DialogDescription as R, DialogFooter as z, DialogHeader as B, DialogTitle as de, DropdownMenu as fe, DropdownMenuContent as pe, DropdownMenuItem as V, DropdownMenuLabel as me, DropdownMenuSeparator as he, DropdownMenuTrigger as ge, Input as H, Label as U, Select as W, SelectContent as G, SelectItem as K, SelectTrigger as q, SelectValue as J, Sheet as _e, SheetContent as ve, SheetDescription as ye, SheetHeader as be, SheetTitle as xe, Table as Se, TableBody as Ce, TableCell as Y, TableHead as X, TableHeader as we, TableRow as Te, Textarea as Ee } from "@burdenoff/fe-libs/ui";
 //#region src/brainyrich/pages/PortfoliosPage.tsx
-var Ce = [
+var De = [
 	"EQUITY",
 	"FIXED_INCOME",
 	"CASH",
@@ -19,7 +20,7 @@ var Ce = [
 	"COMMODITY",
 	"CRYPTO",
 	"ALTERNATIVE"
-], we = [
+], Oe = [
 	"DRAFT",
 	"ACTIVE",
 	"ARCHIVED"
@@ -27,8 +28,16 @@ var Ce = [
 	if (e.trim() === "") return;
 	let t = Number(e);
 	return Number.isFinite(t) ? t : void 0;
-};
-function Te(e) {
+}, ke = {
+	EQUITY: "brand",
+	FIXED_INCOME: "blue",
+	CASH: "teal",
+	REAL_ESTATE: "purple",
+	COMMODITY: "warning",
+	CRYPTO: "indigo",
+	ALTERNATIVE: "info"
+}, Ae = (e) => ke[e.toUpperCase()] ?? "neutral";
+function je(e) {
 	return !e || typeof e != "object" ? [] : Object.entries(e).map(([e, t]) => ({
 		label: e,
 		value: Number(t)
@@ -38,12 +47,22 @@ function Te(e) {
 		tone: "accent"
 	}));
 }
-function Ee({ value: e, currency: t }) {
-	let n = e > 0, r = e < 0, i = n ? "text-status-success-text" : r ? "text-status-error-text" : "text-text-secondary", a = n ? w : r ? C : null;
-	return /* @__PURE__ */ O("span", {
+function Me(e) {
+	return !e || typeof e != "object" ? [] : Object.entries(e).map(([e, t]) => ({
+		key: e,
+		value: Number(t)
+	})).filter((e) => Number.isFinite(e.value) && e.value > 0).sort((e, t) => t.value - e.value).map((e) => ({
+		label: Q(e.key),
+		value: e.value,
+		tone: Ae(e.key)
+	}));
+}
+function Ne({ value: e, currency: t }) {
+	let n = e > 0, r = e < 0, i = n ? "text-status-success-text" : r ? "text-status-error-text" : "text-text-secondary", a = n ? E : r ? T : null;
+	return /* @__PURE__ */ A("span", {
 		className: `inline-flex items-center justify-end gap-1 font-medium ${i}`,
 		children: [
-			a ? /* @__PURE__ */ D(a, {
+			a ? /* @__PURE__ */ k(a, {
 				className: "size-3.5",
 				"aria-hidden": "true"
 			}) : null,
@@ -52,7 +71,7 @@ function Ee({ value: e, currency: t }) {
 		]
 	});
 }
-function De() {
+function Pe() {
 	return {
 		name: "",
 		baseCurrency: "USD",
@@ -63,8 +82,8 @@ function De() {
 		householdId: Z
 	};
 }
-function Oe({ open: e, onOpenChange: t, editing: r }) {
-	let { data: o } = a(), { data: s } = i(), c = n(), u = l(), [d, f] = S(De), [p, m] = S(null), h = r?.id ?? "new";
+function Fe({ open: e, onOpenChange: t, editing: r }) {
+	let { data: o } = a(), { data: s } = i(), c = n(), u = l(), [d, f] = w(Pe), [p, m] = w(null), h = r?.id ?? "new";
 	e && p !== h && (m(h), f(r ? {
 		name: r.name,
 		baseCurrency: r.baseCurrency,
@@ -73,24 +92,24 @@ function Oe({ open: e, onOpenChange: t, editing: r }) {
 		status: r.status,
 		modelPortfolioId: r.modelPortfolioId ?? Z,
 		householdId: r.householdId ?? Z
-	} : De())), !e && p !== null && m(null);
+	} : Pe())), !e && p !== null && m(null);
 	let g = c.isPending || u.isPending, _ = d.name.trim().length > 0;
-	return /* @__PURE__ */ D(I, {
+	return /* @__PURE__ */ k(I, {
 		open: e,
 		onOpenChange: t,
-		children: /* @__PURE__ */ O(L, {
+		children: /* @__PURE__ */ A(L, {
 			className: "max-h-[90vh] overflow-y-auto sm:max-w-lg",
 			children: [
-				/* @__PURE__ */ O(B, { children: [/* @__PURE__ */ D(se, { children: r ? "Edit portfolio" : "New portfolio" }), /* @__PURE__ */ D(R, { children: r ? "Update this portfolio’s strategy settings." : "Create an investment portfolio to organize and rebalance holdings." })] }),
-				/* @__PURE__ */ O("div", {
+				/* @__PURE__ */ A(B, { children: [/* @__PURE__ */ k(de, { children: r ? "Edit portfolio" : "New portfolio" }), /* @__PURE__ */ k(R, { children: r ? "Update this portfolio’s strategy settings." : "Create an investment portfolio to organize and rebalance holdings." })] }),
+				/* @__PURE__ */ A("div", {
 					className: "space-y-4 py-2",
 					children: [
-						/* @__PURE__ */ O("div", {
+						/* @__PURE__ */ A("div", {
 							className: "space-y-1.5",
-							children: [/* @__PURE__ */ D(U, {
+							children: [/* @__PURE__ */ k(U, {
 								htmlFor: "pf-name",
 								children: "Name"
-							}), /* @__PURE__ */ D(H, {
+							}), /* @__PURE__ */ k(H, {
 								id: "pf-name",
 								value: d.name,
 								onChange: (e) => f((t) => ({
@@ -101,14 +120,14 @@ function Oe({ open: e, onOpenChange: t, editing: r }) {
 								"aria-invalid": !_
 							})]
 						}),
-						/* @__PURE__ */ O("div", {
+						/* @__PURE__ */ A("div", {
 							className: "grid grid-cols-2 gap-4",
-							children: [/* @__PURE__ */ O("div", {
+							children: [/* @__PURE__ */ A("div", {
 								className: "space-y-1.5",
-								children: [/* @__PURE__ */ D(U, {
+								children: [/* @__PURE__ */ k(U, {
 									htmlFor: "pf-currency",
 									children: "Base currency"
-								}), /* @__PURE__ */ D(H, {
+								}), /* @__PURE__ */ k(H, {
 									id: "pf-currency",
 									value: d.baseCurrency,
 									onChange: (e) => f((t) => ({
@@ -118,12 +137,12 @@ function Oe({ open: e, onOpenChange: t, editing: r }) {
 									placeholder: "USD",
 									maxLength: 3
 								})]
-							}), /* @__PURE__ */ O("div", {
+							}), /* @__PURE__ */ A("div", {
 								className: "space-y-1.5",
-								children: [/* @__PURE__ */ D(U, {
+								children: [/* @__PURE__ */ k(U, {
 									htmlFor: "pf-drift",
 									children: "Drift threshold %"
-								}), /* @__PURE__ */ D(H, {
+								}), /* @__PURE__ */ k(H, {
 									id: "pf-drift",
 									type: "number",
 									min: 0,
@@ -136,78 +155,78 @@ function Oe({ open: e, onOpenChange: t, editing: r }) {
 								})]
 							})]
 						}),
-						r ? /* @__PURE__ */ O("div", {
+						r ? /* @__PURE__ */ A("div", {
 							className: "space-y-1.5",
-							children: [/* @__PURE__ */ D(U, {
+							children: [/* @__PURE__ */ k(U, {
 								htmlFor: "pf-status",
 								children: "Status"
-							}), /* @__PURE__ */ O(W, {
+							}), /* @__PURE__ */ A(W, {
 								value: d.status,
 								onValueChange: (e) => f((t) => ({
 									...t,
 									status: e
 								})),
-								children: [/* @__PURE__ */ D(q, {
+								children: [/* @__PURE__ */ k(q, {
 									id: "pf-status",
-									children: /* @__PURE__ */ D(J, {})
-								}), /* @__PURE__ */ D(G, { children: we.map((e) => /* @__PURE__ */ D(K, {
+									children: /* @__PURE__ */ k(J, {})
+								}), /* @__PURE__ */ k(G, { children: Oe.map((e) => /* @__PURE__ */ k(K, {
 									value: e,
 									children: Q(e)
 								}, e)) })]
 							})]
 						}) : null,
-						/* @__PURE__ */ O("div", {
+						/* @__PURE__ */ A("div", {
 							className: "space-y-1.5",
-							children: [/* @__PURE__ */ D(U, {
+							children: [/* @__PURE__ */ k(U, {
 								htmlFor: "pf-model",
 								children: "Model portfolio"
-							}), /* @__PURE__ */ O(W, {
+							}), /* @__PURE__ */ A(W, {
 								value: d.modelPortfolioId,
 								onValueChange: (e) => f((t) => ({
 									...t,
 									modelPortfolioId: e
 								})),
-								children: [/* @__PURE__ */ D(q, {
+								children: [/* @__PURE__ */ k(q, {
 									id: "pf-model",
-									children: /* @__PURE__ */ D(J, { placeholder: "None" })
-								}), /* @__PURE__ */ O(G, { children: [/* @__PURE__ */ D(K, {
+									children: /* @__PURE__ */ k(J, { placeholder: "None" })
+								}), /* @__PURE__ */ A(G, { children: [/* @__PURE__ */ k(K, {
 									value: Z,
 									children: "None"
-								}), o.map((e) => /* @__PURE__ */ D(K, {
+								}), o.map((e) => /* @__PURE__ */ k(K, {
 									value: e.id,
 									children: e.name
 								}, e.id))] })]
 							})]
 						}),
-						r ? null : /* @__PURE__ */ O("div", {
+						r ? null : /* @__PURE__ */ A("div", {
 							className: "space-y-1.5",
-							children: [/* @__PURE__ */ D(U, {
+							children: [/* @__PURE__ */ k(U, {
 								htmlFor: "pf-household",
 								children: "Household"
-							}), /* @__PURE__ */ O(W, {
+							}), /* @__PURE__ */ A(W, {
 								value: d.householdId,
 								onValueChange: (e) => f((t) => ({
 									...t,
 									householdId: e
 								})),
-								children: [/* @__PURE__ */ D(q, {
+								children: [/* @__PURE__ */ k(q, {
 									id: "pf-household",
-									children: /* @__PURE__ */ D(J, { placeholder: "None" })
-								}), /* @__PURE__ */ O(G, { children: [/* @__PURE__ */ D(K, {
+									children: /* @__PURE__ */ k(J, { placeholder: "None" })
+								}), /* @__PURE__ */ A(G, { children: [/* @__PURE__ */ k(K, {
 									value: Z,
 									children: "None"
-								}), s.map((e) => /* @__PURE__ */ D(K, {
+								}), s.map((e) => /* @__PURE__ */ k(K, {
 									value: e.id,
 									children: e.name
 								}, e.id))] })]
 							})]
 						}),
-						/* @__PURE__ */ O("div", {
+						/* @__PURE__ */ A("div", {
 							className: "space-y-1.5",
-							children: [/* @__PURE__ */ D(U, {
+							children: [/* @__PURE__ */ k(U, {
 								htmlFor: "pf-desc",
 								children: "Description"
-							}), /* @__PURE__ */ D(Se, {
+							}), /* @__PURE__ */ k(Ee, {
 								id: "pf-desc",
 								value: d.description,
 								onChange: (e) => f((t) => ({
@@ -220,12 +239,12 @@ function Oe({ open: e, onOpenChange: t, editing: r }) {
 						})
 					]
 				}),
-				/* @__PURE__ */ O(z, { children: [/* @__PURE__ */ D(A, {
+				/* @__PURE__ */ A(z, { children: [/* @__PURE__ */ k(M, {
 					variant: "outline",
 					onClick: () => t(!1),
 					disabled: g,
 					children: "Cancel"
-				}), /* @__PURE__ */ D(A, {
+				}), /* @__PURE__ */ k(M, {
 					onClick: () => {
 						if (!_) return;
 						let e = $(d.driftThresholdPct), n = d.modelPortfolioId === Z ? null : d.modelPortfolioId, i = d.householdId === Z ? null : d.householdId;
@@ -255,7 +274,7 @@ function Oe({ open: e, onOpenChange: t, editing: r }) {
 		})
 	});
 }
-function ke() {
+function Ie() {
 	return {
 		accountId: "",
 		symbol: "",
@@ -266,9 +285,9 @@ function ke() {
 		costBasis: "0"
 	};
 }
-function Ae({ open: e, onOpenChange: n, portfolioId: r, editing: i }) {
-	let a = t(), o = c(), [s, l] = S(ke), [u, d] = S(null), p = i?.id ?? "new";
-	e && u !== p && (d(p), l(i ? {
+function Le({ open: e, onOpenChange: n, portfolioId: r, editing: i }) {
+	let a = t(), o = c(), [s, l] = w(Ie), [u, d] = w(null), f = i?.id ?? "new";
+	e && u !== f && (d(f), l(i ? {
 		accountId: i.accountId,
 		symbol: i.symbol,
 		name: i.name ?? "",
@@ -276,19 +295,19 @@ function Ae({ open: e, onOpenChange: n, portfolioId: r, editing: i }) {
 		quantity: String(i.quantity),
 		lastPrice: String(i.lastPrice),
 		costBasis: String(i.costBasis)
-	} : ke())), !e && u !== null && d(null);
-	let m = a.isPending || o.isPending, h = s.symbol.trim().length > 0, g = i ? !0 : s.accountId.trim().length > 0, _ = h && g && !m;
-	return /* @__PURE__ */ D(I, {
+	} : Ie())), !e && u !== null && d(null);
+	let p = a.isPending || o.isPending, m = s.symbol.trim().length > 0, h = i ? !0 : s.accountId.trim().length > 0, _ = m && h && !p;
+	return /* @__PURE__ */ k(I, {
 		open: e,
 		onOpenChange: n,
-		children: /* @__PURE__ */ O(L, {
+		children: /* @__PURE__ */ A(L, {
 			className: "max-h-[90vh] overflow-y-auto sm:max-w-lg",
 			children: [
-				/* @__PURE__ */ O(B, { children: [/* @__PURE__ */ D(se, { children: i ? "Edit holding" : "Add holding" }), /* @__PURE__ */ D(R, { children: i ? "Update the position details for this holding." : "Add a position to this portfolio from one of your accounts." })] }),
-				/* @__PURE__ */ O("div", {
+				/* @__PURE__ */ A(B, { children: [/* @__PURE__ */ k(de, { children: i ? "Edit holding" : "Add holding" }), /* @__PURE__ */ k(R, { children: i ? "Update the position details for this holding." : "Add a position to this portfolio from one of your accounts." })] }),
+				/* @__PURE__ */ A("div", {
 					className: "space-y-4 py-2",
 					children: [
-						i ? null : /* @__PURE__ */ D(f, {
+						i ? null : /* @__PURE__ */ k(g, {
 							id: "h-account",
 							value: s.accountId,
 							onChange: (e) => l((t) => ({
@@ -297,14 +316,14 @@ function Ae({ open: e, onOpenChange: n, portfolioId: r, editing: i }) {
 							})),
 							placeholder: "Select account"
 						}),
-						/* @__PURE__ */ O("div", {
+						/* @__PURE__ */ A("div", {
 							className: "grid grid-cols-2 gap-4",
-							children: [/* @__PURE__ */ O("div", {
+							children: [/* @__PURE__ */ A("div", {
 								className: "space-y-1.5",
-								children: [/* @__PURE__ */ D(U, {
+								children: [/* @__PURE__ */ k(U, {
 									htmlFor: "h-symbol",
 									children: "Symbol"
-								}), /* @__PURE__ */ D(H, {
+								}), /* @__PURE__ */ k(H, {
 									id: "h-symbol",
 									value: s.symbol,
 									onChange: (e) => l((t) => ({
@@ -313,35 +332,35 @@ function Ae({ open: e, onOpenChange: n, portfolioId: r, editing: i }) {
 									})),
 									placeholder: "AAPL",
 									disabled: !!i,
-									"aria-invalid": !h
+									"aria-invalid": !m
 								})]
-							}), /* @__PURE__ */ O("div", {
+							}), /* @__PURE__ */ A("div", {
 								className: "space-y-1.5",
-								children: [/* @__PURE__ */ D(U, {
+								children: [/* @__PURE__ */ k(U, {
 									htmlFor: "h-class",
 									children: "Asset class"
-								}), /* @__PURE__ */ O(W, {
+								}), /* @__PURE__ */ A(W, {
 									value: s.assetClass,
 									onValueChange: (e) => l((t) => ({
 										...t,
 										assetClass: e
 									})),
-									children: [/* @__PURE__ */ D(q, {
+									children: [/* @__PURE__ */ k(q, {
 										id: "h-class",
-										children: /* @__PURE__ */ D(J, {})
-									}), /* @__PURE__ */ D(G, { children: Ce.map((e) => /* @__PURE__ */ D(K, {
+										children: /* @__PURE__ */ k(J, {})
+									}), /* @__PURE__ */ k(G, { children: De.map((e) => /* @__PURE__ */ k(K, {
 										value: e,
 										children: Q(e)
 									}, e)) })]
 								})]
 							})]
 						}),
-						/* @__PURE__ */ O("div", {
+						/* @__PURE__ */ A("div", {
 							className: "space-y-1.5",
-							children: [/* @__PURE__ */ D(U, {
+							children: [/* @__PURE__ */ k(U, {
 								htmlFor: "h-name",
 								children: "Name"
-							}), /* @__PURE__ */ D(H, {
+							}), /* @__PURE__ */ k(H, {
 								id: "h-name",
 								value: s.name,
 								onChange: (e) => l((t) => ({
@@ -351,15 +370,15 @@ function Ae({ open: e, onOpenChange: n, portfolioId: r, editing: i }) {
 								placeholder: "Apple Inc."
 							})]
 						}),
-						/* @__PURE__ */ O("div", {
+						/* @__PURE__ */ A("div", {
 							className: "grid grid-cols-3 gap-4",
 							children: [
-								/* @__PURE__ */ O("div", {
+								/* @__PURE__ */ A("div", {
 									className: "space-y-1.5",
-									children: [/* @__PURE__ */ D(U, {
+									children: [/* @__PURE__ */ k(U, {
 										htmlFor: "h-qty",
 										children: "Quantity"
-									}), /* @__PURE__ */ D(H, {
+									}), /* @__PURE__ */ k(H, {
 										id: "h-qty",
 										type: "number",
 										step: "any",
@@ -370,12 +389,12 @@ function Ae({ open: e, onOpenChange: n, portfolioId: r, editing: i }) {
 										}))
 									})]
 								}),
-								/* @__PURE__ */ O("div", {
+								/* @__PURE__ */ A("div", {
 									className: "space-y-1.5",
-									children: [/* @__PURE__ */ D(U, {
+									children: [/* @__PURE__ */ k(U, {
 										htmlFor: "h-price",
 										children: "Last price"
-									}), /* @__PURE__ */ D(H, {
+									}), /* @__PURE__ */ k(H, {
 										id: "h-price",
 										type: "number",
 										step: "any",
@@ -386,12 +405,12 @@ function Ae({ open: e, onOpenChange: n, portfolioId: r, editing: i }) {
 										}))
 									})]
 								}),
-								/* @__PURE__ */ O("div", {
+								/* @__PURE__ */ A("div", {
 									className: "space-y-1.5",
-									children: [/* @__PURE__ */ D(U, {
+									children: [/* @__PURE__ */ k(U, {
 										htmlFor: "h-cost",
 										children: "Cost basis"
-									}), /* @__PURE__ */ D(H, {
+									}), /* @__PURE__ */ k(H, {
 										id: "h-cost",
 										type: "number",
 										step: "any",
@@ -406,14 +425,14 @@ function Ae({ open: e, onOpenChange: n, portfolioId: r, editing: i }) {
 						})
 					]
 				}),
-				/* @__PURE__ */ O(z, { children: [/* @__PURE__ */ D(A, {
+				/* @__PURE__ */ A(z, { children: [/* @__PURE__ */ k(M, {
 					variant: "outline",
 					onClick: () => n(!1),
-					disabled: m,
+					disabled: p,
 					children: "Cancel"
-				}), /* @__PURE__ */ D(A, {
+				}), /* @__PURE__ */ k(M, {
 					onClick: () => {
-						!h || !g || (i ? o.mutate({
+						!m || !h || (i ? o.mutate({
 							id: i.id,
 							input: {
 								name: s.name.trim() || null,
@@ -434,272 +453,307 @@ function Ae({ open: e, onOpenChange: n, portfolioId: r, editing: i }) {
 						}, { onSuccess: () => n(!1) }));
 					},
 					disabled: !_,
-					children: m ? "Saving…" : i ? "Save changes" : "Add holding"
+					children: p ? "Saving…" : i ? "Save changes" : "Add holding"
 				})] })
 			]
 		})
 	});
 }
-function je({ portfolioId: e, onOpenChange: t }) {
-	let { data: n, isLoading: i, isError: a, refetch: o } = s(e ?? void 0), c = r(), [l, u] = S(!1), [f, g] = S(null), [v, C] = S(null), w = n?.holdings ?? [], I = n?.baseCurrency ?? "USD", L = w.reduce((e, t) => e + t.marketValue, 0), R = x(() => {
-		if (w.length === 0 || L <= 0) return [];
+function Re({ portfolioId: e, onOpenChange: t }) {
+	let { data: n, isLoading: i, isError: a, refetch: o } = s(e ?? void 0), c = r(), [l, u] = w(!1), [g, v] = w(null), [T, E] = w(null), I = n?.holdings ?? [], L = n?.baseCurrency ?? "USD", R = I.reduce((e, t) => e + t.marketValue, 0), z = I.reduce((e, t) => e + t.costBasis, 0), B = R - z, de = z > 0 ? B / z * 100 : 0, H = C(() => {
+		if (I.length === 0 || R <= 0) return [];
 		let e = /* @__PURE__ */ new Map();
-		return w.forEach((t) => e.set(t.assetClass, (e.get(t.assetClass) ?? 0) + t.marketValue)), Array.from(e.entries()).map(([e, t]) => ({
+		return I.forEach((t) => e.set(t.assetClass, (e.get(t.assetClass) ?? 0) + t.marketValue)), Array.from(e.entries()).map(([e, t]) => ({
 			label: Q(e),
-			value: t / L * 100,
-			caption: y(t, I),
-			tone: "default"
+			value: t,
+			tone: Ae(e)
 		})).sort((e, t) => t.value - e.value);
-	}, [
-		w,
-		L,
-		I
-	]), z = x(() => Te(n?.targetAllocation), [n?.targetAllocation]), B = () => {
-		g(null), u(!0);
-	}, se = (e) => {
-		g(e), u(!0);
+	}, [I, R]), U = C(() => {
+		let e = /* @__PURE__ */ new Map();
+		return R <= 0 || I.forEach((t) => e.set(Q(t.assetClass), (e.get(Q(t.assetClass)) ?? 0) + t.marketValue / R * 100)), e;
+	}, [I, R]), W = C(() => je(n?.targetAllocation).map((e) => {
+		let t = U.get(e.label) ?? 0;
+		return {
+			label: e.label,
+			value: e.value,
+			tone: "accent",
+			caption: `${b(e.value, 0)} target · ${b(t, 0)} actual`
+		};
+	}), [n?.targetAllocation, U]), G = () => {
+		v(null), u(!0);
+	}, K = (e) => {
+		v(e), u(!0);
 	};
-	return /* @__PURE__ */ D(pe, {
+	return /* @__PURE__ */ k(_e, {
 		open: e !== null,
 		onOpenChange: t,
-		children: /* @__PURE__ */ D(me, {
+		children: /* @__PURE__ */ k(ve, {
 			className: "flex w-full flex-col gap-0 overflow-y-auto p-0 sm:max-w-2xl",
-			children: i ? /* @__PURE__ */ D("div", {
+			children: i ? /* @__PURE__ */ k("div", {
 				className: "p-6",
-				children: /* @__PURE__ */ D(_, { rows: 5 })
-			}) : a ? /* @__PURE__ */ D("div", {
+				children: /* @__PURE__ */ k(ne, { rows: 5 })
+			}) : a ? /* @__PURE__ */ k("div", {
 				className: "p-6",
-				children: /* @__PURE__ */ D(h, { onRetry: () => o() })
-			}) : n ? /* @__PURE__ */ O(oe, { children: [
-				/* @__PURE__ */ O(ge, {
+				children: /* @__PURE__ */ k(te, { onRetry: () => o() })
+			}) : n ? /* @__PURE__ */ A(ce, { children: [
+				/* @__PURE__ */ A(be, {
 					className: "border-b border-border-subtle p-6",
-					children: [/* @__PURE__ */ O("div", {
+					children: [/* @__PURE__ */ A("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ D(_e, {
+						children: [/* @__PURE__ */ k(xe, {
 							className: "text-xl",
 							children: n.name
-						}), /* @__PURE__ */ D(k, {
-							variant: ee(n.status),
+						}), /* @__PURE__ */ k(j, {
+							variant: x(n.status),
 							children: Q(n.status)
 						})]
-					}), /* @__PURE__ */ D(he, { children: n.description?.trim() ? n.description : `${n.baseCurrency} · Drift threshold ${b(n.driftThresholdPct)}` })]
+					}), /* @__PURE__ */ k(ye, { children: n.description?.trim() ? n.description : `${n.baseCurrency} · Drift threshold ${b(n.driftThresholdPct)}` })]
 				}),
-				/* @__PURE__ */ O("div", {
+				/* @__PURE__ */ A("div", {
 					className: "space-y-6 p-6",
 					children: [
-						/* @__PURE__ */ O("div", {
-							className: "grid grid-cols-2 gap-4",
-							children: [/* @__PURE__ */ D(j, { children: /* @__PURE__ */ O(M, {
-								className: "space-y-1 p-4",
-								children: [/* @__PURE__ */ D("p", {
-									className: "text-xs text-text-secondary",
-									children: "Market value"
-								}), /* @__PURE__ */ D("p", {
-									className: "text-2xl font-semibold text-text-primary",
-									children: y(L, I)
-								})]
-							}) }), /* @__PURE__ */ D(j, { children: /* @__PURE__ */ O(M, {
-								className: "space-y-1 p-4",
-								children: [/* @__PURE__ */ D("p", {
-									className: "text-xs text-text-secondary",
-									children: "Holdings"
-								}), /* @__PURE__ */ D("p", {
-									className: "text-2xl font-semibold text-text-primary",
-									children: w.length
-								})]
-							}) })]
-						}),
-						/* @__PURE__ */ O("div", {
-							className: "grid gap-4 md:grid-cols-2",
-							children: [/* @__PURE__ */ O(j, { children: [/* @__PURE__ */ D(P, {
-								className: "pb-3",
-								children: /* @__PURE__ */ D(F, {
-									className: "text-sm",
-									children: "Target allocation"
-								})
-							}), /* @__PURE__ */ D(M, { children: z.length > 0 ? /* @__PURE__ */ D(p, { data: z }) : /* @__PURE__ */ D("p", {
-								className: "text-sm text-text-secondary",
-								children: "No target allocation set for this portfolio."
-							}) })] }), /* @__PURE__ */ O(j, { children: [/* @__PURE__ */ D(P, {
-								className: "pb-3",
-								children: /* @__PURE__ */ D(F, {
-									className: "text-sm",
-									children: "Actual allocation"
+						/* @__PURE__ */ A(p, {
+							className: "grid grid-cols-2 gap-3 lg:grid-cols-4",
+							children: [
+								/* @__PURE__ */ k(h, {
+									label: "Market value",
+									value: y(R, L),
+									glow: !0
+								}),
+								/* @__PURE__ */ k(h, {
+									label: "Unrealized gain",
+									value: y(B, L),
+									delta: z > 0 ? de : void 0,
+									deltaTone: B > 0 ? "positive" : B < 0 ? "negative" : "neutral"
+								}),
+								/* @__PURE__ */ k(h, {
+									label: "Holdings",
+									value: String(I.length)
+								}),
+								/* @__PURE__ */ k(h, {
+									label: "Drift threshold",
+									value: b(n.driftThresholdPct)
 								})
-							}), /* @__PURE__ */ D(M, { children: R.length > 0 ? /* @__PURE__ */ D(p, { data: R }) : /* @__PURE__ */ D("p", {
-								className: "text-sm text-text-secondary",
-								children: "Add holdings to see the live allocation."
-							}) })] })]
+							]
+						}),
+						/* @__PURE__ */ k(p, {
+							index: 1,
+							children: /* @__PURE__ */ A(m, {
+								glow: !0,
+								className: "space-y-5",
+								children: [/* @__PURE__ */ A("div", {
+									className: "flex items-center justify-between gap-2",
+									children: [/* @__PURE__ */ k("h3", {
+										className: "text-sm font-semibold text-text-primary",
+										children: "Target vs actual allocation"
+									}), /* @__PURE__ */ k(j, {
+										variant: "outline",
+										children: L
+									})]
+								}), /* @__PURE__ */ A("div", {
+									className: "grid gap-6 md:grid-cols-2",
+									children: [/* @__PURE__ */ A("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ k("p", {
+											className: "text-xs font-medium uppercase tracking-wide text-text-secondary",
+											children: "Actual — by market value"
+										}), H.length > 0 ? /* @__PURE__ */ k(f, {
+											data: H,
+											centerValue: re(R, L),
+											centerLabel: "Market value",
+											valueFormatter: (e) => y(e, L)
+										}) : /* @__PURE__ */ k("p", {
+											className: "py-8 text-center text-sm text-text-secondary",
+											children: "Add holdings to see the live allocation."
+										})]
+									}), /* @__PURE__ */ A("div", {
+										className: "space-y-2",
+										children: [/* @__PURE__ */ k("p", {
+											className: "text-xs font-medium uppercase tracking-wide text-text-secondary",
+											children: "Target — vs live actual"
+										}), W.length > 0 ? /* @__PURE__ */ k(_, { data: W }) : /* @__PURE__ */ k("p", {
+											className: "py-8 text-center text-sm text-text-secondary",
+											children: "No target allocation set for this portfolio."
+										})]
+									})]
+								})]
+							})
 						}),
-						/* @__PURE__ */ O(j, { children: [/* @__PURE__ */ O(P, {
+						/* @__PURE__ */ A(N, { children: [/* @__PURE__ */ A(le, {
 							className: "flex flex-row items-center justify-between",
-							children: [/* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D(F, {
+							children: [/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k(ue, {
 								className: "text-base",
 								children: "Holdings"
-							}), /* @__PURE__ */ D(N, { children: "Positions held in this portfolio" })] }), /* @__PURE__ */ O(A, {
+							}), /* @__PURE__ */ k(F, { children: "Positions held in this portfolio" })] }), /* @__PURE__ */ A(M, {
 								size: "sm",
-								onClick: B,
-								children: [/* @__PURE__ */ D(E, {
+								onClick: G,
+								children: [/* @__PURE__ */ k(O, {
 									className: "size-4",
 									"aria-hidden": "true"
 								}), "Add holding"]
 							})]
-						}), /* @__PURE__ */ D(M, { children: w.length === 0 ? /* @__PURE__ */ D(m, {
-							icon: /* @__PURE__ */ D(T, {
+						}), /* @__PURE__ */ k(P, { children: I.length === 0 ? /* @__PURE__ */ k(ee, {
+							icon: /* @__PURE__ */ k(D, {
 								className: "size-6",
 								"aria-hidden": "true"
 							}),
 							title: "No holdings yet",
 							description: "Add positions to start tracking this portfolio.",
-							action: /* @__PURE__ */ O(A, {
+							action: /* @__PURE__ */ A(M, {
 								size: "sm",
-								onClick: B,
-								children: [/* @__PURE__ */ D(E, {
+								onClick: G,
+								children: [/* @__PURE__ */ k(O, {
 									className: "size-4",
 									"aria-hidden": "true"
 								}), "Add holding"]
 							})
-						}) : /* @__PURE__ */ D("div", {
+						}) : /* @__PURE__ */ k("div", {
 							className: "overflow-x-auto",
-							children: /* @__PURE__ */ O(ve, { children: [/* @__PURE__ */ D(be, { children: /* @__PURE__ */ O(xe, { children: [
-								/* @__PURE__ */ D(X, { children: "Symbol" }),
-								/* @__PURE__ */ D(X, { children: "Class" }),
-								/* @__PURE__ */ D(X, {
+							children: /* @__PURE__ */ A(Se, { children: [/* @__PURE__ */ k(we, { children: /* @__PURE__ */ A(Te, { children: [
+								/* @__PURE__ */ k(X, { children: "Symbol" }),
+								/* @__PURE__ */ k(X, { children: "Class" }),
+								/* @__PURE__ */ k(X, {
 									className: "text-right",
 									children: "Qty"
 								}),
-								/* @__PURE__ */ D(X, {
+								/* @__PURE__ */ k(X, {
 									className: "text-right",
 									children: "Price"
 								}),
-								/* @__PURE__ */ D(X, {
+								/* @__PURE__ */ k(X, {
 									className: "text-right",
 									children: "Market value"
 								}),
-								/* @__PURE__ */ D(X, {
+								/* @__PURE__ */ k(X, {
 									className: "text-right",
 									children: "Gain"
 								}),
-								/* @__PURE__ */ D(X, { className: "w-10" })
-							] }) }), /* @__PURE__ */ D(ye, { children: w.map((e) => {
-								let t = e.marketValue - e.costBasis;
-								return /* @__PURE__ */ O(xe, { children: [
-									/* @__PURE__ */ O(Y, { children: [/* @__PURE__ */ D("div", {
-										className: "font-semibold text-text-primary",
-										children: e.symbol
-									}), e.name ? /* @__PURE__ */ D("div", {
-										className: "text-xs text-text-secondary",
-										children: e.name
-									}) : null] }),
-									/* @__PURE__ */ D(Y, { children: /* @__PURE__ */ D(k, {
-										variant: "outline",
-										children: Q(e.assetClass)
-									}) }),
-									/* @__PURE__ */ D(Y, {
-										className: "text-right tabular-nums",
-										children: e.quantity
-									}),
-									/* @__PURE__ */ D(Y, {
-										className: "text-right tabular-nums",
-										children: y(e.lastPrice, e.currency)
-									}),
-									/* @__PURE__ */ D(Y, {
-										className: "text-right font-medium tabular-nums",
-										children: y(e.marketValue, e.currency)
-									}),
-									/* @__PURE__ */ D(Y, {
-										className: "text-right tabular-nums",
-										children: /* @__PURE__ */ D(Ee, {
-											value: t,
-											currency: e.currency
-										})
-									}),
-									/* @__PURE__ */ D(Y, {
-										className: "text-right",
-										children: /* @__PURE__ */ O(ce, { children: [/* @__PURE__ */ D(fe, {
-											asChild: !0,
-											children: /* @__PURE__ */ D(A, {
-												variant: "ghost",
-												size: "icon",
-												className: "size-10",
-												"aria-label": `Actions for ${e.symbol}`,
-												children: /* @__PURE__ */ D(re, {
-													className: "size-4",
-													"aria-hidden": "true"
-												})
-											})
-										}), /* @__PURE__ */ O(le, {
-											align: "end",
-											children: [
-												/* @__PURE__ */ D(ue, { children: e.symbol }),
-												/* @__PURE__ */ D(de, {}),
-												/* @__PURE__ */ O(V, {
-													className: "gap-2",
-													onClick: () => se(e),
-													children: [/* @__PURE__ */ D(ie, {
-														className: "size-4",
-														"aria-hidden": "true"
-													}), "Edit"]
-												}),
-												/* @__PURE__ */ O(V, {
-													className: "gap-2 text-status-error-text focus:text-status-error-text",
-													onClick: () => C(e),
-													children: [/* @__PURE__ */ D(ae, {
+								/* @__PURE__ */ k(X, { className: "w-10" })
+							] }) }), /* @__PURE__ */ k(Ce, { children: I.map((e) => {
+								let t = e.marketValue - e.costBasis, n = e.costBasis > 0 ? t / e.costBasis * 100 : 0;
+								return /* @__PURE__ */ A(Te, {
+									className: "transition-colors motion-safe:hover:bg-bg-sunken/60",
+									children: [
+										/* @__PURE__ */ A(Y, { children: [/* @__PURE__ */ k("div", {
+											className: "font-semibold text-text-primary",
+											children: e.symbol
+										}), e.name ? /* @__PURE__ */ k("div", {
+											className: "text-xs text-text-secondary",
+											children: e.name
+										}) : null] }),
+										/* @__PURE__ */ k(Y, { children: /* @__PURE__ */ k(j, {
+											variant: "outline",
+											children: Q(e.assetClass)
+										}) }),
+										/* @__PURE__ */ k(Y, {
+											className: "text-right tabular-nums",
+											children: e.quantity
+										}),
+										/* @__PURE__ */ k(Y, {
+											className: "text-right tabular-nums",
+											children: y(e.lastPrice, e.currency)
+										}),
+										/* @__PURE__ */ k(Y, {
+											className: "text-right font-medium tabular-nums",
+											children: y(e.marketValue, e.currency)
+										}),
+										/* @__PURE__ */ A(Y, {
+											className: "text-right tabular-nums",
+											children: [/* @__PURE__ */ k(Ne, {
+												value: t,
+												currency: e.currency
+											}), e.costBasis > 0 ? /* @__PURE__ */ A("div", {
+												className: "text-xs text-text-secondary",
+												children: [t > 0 ? "+" : "", b(n)]
+											}) : null]
+										}),
+										/* @__PURE__ */ k(Y, {
+											className: "text-right",
+											children: /* @__PURE__ */ A(fe, { children: [/* @__PURE__ */ k(ge, {
+												asChild: !0,
+												children: /* @__PURE__ */ k(M, {
+													variant: "ghost",
+													size: "icon",
+													className: "size-10",
+													"aria-label": `Actions for ${e.symbol}`,
+													children: /* @__PURE__ */ k(ae, {
 														className: "size-4",
 														"aria-hidden": "true"
-													}), "Delete"]
+													})
 												})
-											]
-										})] })
-									})
-								] }, e.id);
+											}), /* @__PURE__ */ A(pe, {
+												align: "end",
+												children: [
+													/* @__PURE__ */ k(me, { children: e.symbol }),
+													/* @__PURE__ */ k(he, {}),
+													/* @__PURE__ */ A(V, {
+														className: "gap-2",
+														onClick: () => K(e),
+														children: [/* @__PURE__ */ k(oe, {
+															className: "size-4",
+															"aria-hidden": "true"
+														}), "Edit"]
+													}),
+													/* @__PURE__ */ A(V, {
+														className: "gap-2 text-status-error-text focus:text-status-error-text",
+														onClick: () => E(e),
+														children: [/* @__PURE__ */ k(se, {
+															className: "size-4",
+															"aria-hidden": "true"
+														}), "Delete"]
+													})
+												]
+											})] })
+										})
+									]
+								}, e.id);
 							}) })] })
 						}) })] }),
-						/* @__PURE__ */ O(j, { children: [/* @__PURE__ */ O(P, {
+						/* @__PURE__ */ A(N, { children: [/* @__PURE__ */ A(le, {
 							className: "pb-3",
-							children: [/* @__PURE__ */ D(F, {
+							children: [/* @__PURE__ */ k(ue, {
 								className: "text-sm",
 								children: "Tags"
-							}), /* @__PURE__ */ D(N, { children: "Organize and filter this portfolio." })]
-						}), /* @__PURE__ */ D(M, { children: /* @__PURE__ */ D(te, {
+							}), /* @__PURE__ */ k(F, { children: "Organize and filter this portfolio." })]
+						}), /* @__PURE__ */ k(P, { children: /* @__PURE__ */ k(S, {
 							entityType: "brainyrich-portfolio",
 							entityId: n.id,
 							hideLabel: !0
 						}) })] }),
-						/* @__PURE__ */ D(j, { children: /* @__PURE__ */ D(M, {
+						/* @__PURE__ */ k(N, { children: /* @__PURE__ */ k(P, {
 							className: "pt-6",
-							children: /* @__PURE__ */ D(ne, {
+							children: /* @__PURE__ */ k(ie, {
 								entityType: "brainyrich-portfolio",
 								entityId: n.id
 							})
 						}) })
 					]
 				}),
-				/* @__PURE__ */ D(Ae, {
+				/* @__PURE__ */ k(Le, {
 					open: l,
 					onOpenChange: u,
 					portfolioId: n.id,
-					editing: f
+					editing: g
 				}),
-				/* @__PURE__ */ D(d, {
-					open: v !== null,
+				/* @__PURE__ */ k(d, {
+					open: T !== null,
 					onOpenChange: (e) => {
-						e || C(null);
+						e || E(null);
 					},
 					title: "Delete holding?",
-					description: v ? `Remove ${v.symbol} from this portfolio. This cannot be undone.` : void 0,
+					description: T ? `Remove ${T.symbol} from this portfolio. This cannot be undone.` : void 0,
 					confirmLabel: "Delete",
 					pendingLabel: "Deleting…",
 					destructive: !0,
 					pending: c.isPending,
 					onConfirm: () => {
-						v && c.mutate(v.id, { onSuccess: () => C(null) });
+						T && c.mutate(T.id, { onSuccess: () => E(null) });
 					}
 				})
-			] }) : /* @__PURE__ */ D("div", {
+			] }) : /* @__PURE__ */ k("div", {
 				className: "p-6",
-				children: /* @__PURE__ */ D(m, {
-					icon: /* @__PURE__ */ D(T, {
+				children: /* @__PURE__ */ k(ee, {
+					icon: /* @__PURE__ */ k(D, {
 						className: "size-6",
 						"aria-hidden": "true"
 					}),
@@ -710,177 +764,249 @@ function je({ portfolioId: e, onOpenChange: t }) {
 		})
 	});
 }
-function Me() {
-	let { items: t, hasMore: n, loadMore: r, isLoading: i, isFetchingNextPage: a, isError: s, refetch: c } = o(), l = e(), [f, p] = S(!1), [y, te] = S(null), [ne, x] = S(null), [C, w] = S(null), I = t.filter((e) => e.status === "ACTIVE").length, L = t.filter((e) => e.status === "DRAFT").length, R = t.length > 0 ? t.reduce((e, t) => e + t.driftThresholdPct, 0) / t.length : 0, z = () => {
-		te(null), p(!0);
-	}, B = (e) => {
-		te(e), p(!0);
+function ze({ portfolio: e, index: t, onView: n, onEdit: r, onArchive: i }) {
+	let a = C(() => Me(e.targetAllocation), [e.targetAllocation]), o = a[0], s = e.tags ?? [];
+	return /* @__PURE__ */ k(p, {
+		index: t,
+		as: "div",
+		className: "h-full",
+		children: /* @__PURE__ */ A(N, {
+			className: "flex h-full flex-col transition-shadow motion-safe:hover:shadow-[var(--shadow-pop-hover,var(--shadow-elevation-2))]",
+			children: [/* @__PURE__ */ A(le, {
+				className: "pb-3",
+				children: [/* @__PURE__ */ A("div", {
+					className: "flex items-start justify-between gap-2",
+					children: [/* @__PURE__ */ A("div", {
+						className: "flex min-w-0 items-center gap-2",
+						children: [
+							/* @__PURE__ */ k("span", {
+								className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-[var(--color-action-primary-bg)]/12 text-[var(--color-action-primary-text)]",
+								children: /* @__PURE__ */ k(D, {
+									className: "size-4",
+									"aria-hidden": "true"
+								})
+							}),
+							/* @__PURE__ */ k(ue, {
+								className: "truncate text-base",
+								children: e.name
+							}),
+							/* @__PURE__ */ k(j, {
+								variant: x(e.status),
+								children: Q(e.status)
+							})
+						]
+					}), /* @__PURE__ */ A(fe, { children: [/* @__PURE__ */ k(ge, {
+						asChild: !0,
+						children: /* @__PURE__ */ k(M, {
+							variant: "ghost",
+							size: "icon",
+							className: "size-9 shrink-0",
+							"aria-label": `Actions for ${e.name}`,
+							children: /* @__PURE__ */ k(ae, {
+								className: "size-4",
+								"aria-hidden": "true"
+							})
+						})
+					}), /* @__PURE__ */ A(pe, {
+						align: "end",
+						children: [
+							/* @__PURE__ */ k(me, { children: e.name }),
+							/* @__PURE__ */ k(he, {}),
+							/* @__PURE__ */ A(V, {
+								className: "gap-2",
+								onClick: r,
+								children: [/* @__PURE__ */ k(oe, {
+									className: "size-4",
+									"aria-hidden": "true"
+								}), "Edit"]
+							}),
+							/* @__PURE__ */ A(V, {
+								className: "gap-2 text-status-error-text focus:text-status-error-text",
+								disabled: e.status === "ARCHIVED",
+								onClick: i,
+								children: [/* @__PURE__ */ k(se, {
+									className: "size-4",
+									"aria-hidden": "true"
+								}), "Archive"]
+							})
+						]
+					})] })]
+				}), e.description?.trim() ? /* @__PURE__ */ k(F, {
+					className: "line-clamp-2",
+					children: e.description
+				}) : null]
+			}), /* @__PURE__ */ A(P, {
+				className: "flex flex-1 flex-col justify-between gap-4",
+				children: [/* @__PURE__ */ A("div", {
+					className: "grid grid-cols-[auto_1fr] items-center gap-4",
+					children: [a.length > 0 ? /* @__PURE__ */ k("div", {
+						className: "w-28 shrink-0",
+						children: /* @__PURE__ */ k(f, {
+							data: a,
+							legend: !1,
+							height: 112,
+							centerValue: o ? b(o.value, 0) : void 0,
+							centerLabel: o?.label,
+							valueFormatter: (e) => b(e, 0)
+						})
+					}) : /* @__PURE__ */ A("div", {
+						className: "flex size-28 shrink-0 items-center justify-center rounded-full border border-dashed border-border-subtle text-center text-[10px] leading-tight text-text-secondary",
+						children: [
+							"No target",
+							/* @__PURE__ */ k("br", {}),
+							"allocation"
+						]
+					}), /* @__PURE__ */ A("div", {
+						className: "min-w-0 space-y-2",
+						children: [
+							/* @__PURE__ */ A("div", {
+								className: "flex flex-wrap items-center gap-1.5",
+								children: [/* @__PURE__ */ k(j, {
+									variant: "outline",
+									children: e.baseCurrency
+								}), /* @__PURE__ */ A(j, {
+									variant: "secondary",
+									children: ["Drift ≤ ", b(e.driftThresholdPct)]
+								})]
+							}),
+							a.length > 0 ? /* @__PURE__ */ k("ul", {
+								className: "space-y-1",
+								"aria-label": "Target allocation",
+								children: a.slice(0, 3).map((e) => /* @__PURE__ */ A("li", {
+									className: "flex items-center gap-1.5 text-xs",
+									children: [/* @__PURE__ */ k("span", {
+										className: "truncate text-text-secondary",
+										children: e.label
+									}), /* @__PURE__ */ k("span", {
+										className: "ml-auto font-medium tabular-nums text-text-primary",
+										children: b(e.value, 0)
+									})]
+								}, e.label))
+							}) : null,
+							s.length > 0 ? /* @__PURE__ */ k("div", {
+								className: "flex flex-wrap gap-1",
+								children: s.slice(0, 3).map((e) => /* @__PURE__ */ k(j, {
+									variant: "outline",
+									className: "text-[10px]",
+									children: e
+								}, e))
+							}) : null
+						]
+					})]
+				}), /* @__PURE__ */ k(M, {
+					variant: "outline",
+					size: "sm",
+					className: "w-full",
+					onClick: n,
+					children: "View holdings"
+				})]
+			})]
+		})
+	});
+}
+function Be() {
+	let { items: t, hasMore: n, loadMore: r, isLoading: i, isFetchingNextPage: a, isError: s, refetch: c } = o(), l = e(), [f, m] = w(!1), [g, _] = w(null), [re, y] = w(null), [x, S] = w(null), ie = t.filter((e) => e.status === "ACTIVE").length, C = t.filter((e) => e.status === "DRAFT").length, T = t.length > 0 ? t.reduce((e, t) => e + t.driftThresholdPct, 0) / t.length : 0, E = () => {
+		_(null), m(!0);
+	}, ae = (e) => {
+		_(e), m(!0);
 	};
-	return /* @__PURE__ */ O(v, {
+	return /* @__PURE__ */ A(v, {
 		title: "Portfolios",
 		description: "Organize holdings into strategies and keep allocations on target.",
 		badges: t.length > 0 ? [`${t.length} total`] : [],
-		actions: /* @__PURE__ */ O(A, {
+		actions: /* @__PURE__ */ A(M, {
 			size: "sm",
-			onClick: z,
-			children: [/* @__PURE__ */ D(E, {
+			onClick: E,
+			children: [/* @__PURE__ */ k(O, {
 				className: "size-4",
 				"aria-hidden": "true"
 			}), "New portfolio"]
 		}),
 		children: [
-			i ? /* @__PURE__ */ D(_, { rows: 4 }) : s ? /* @__PURE__ */ D(h, { onRetry: () => c() }) : t.length === 0 ? /* @__PURE__ */ D(m, {
-				icon: /* @__PURE__ */ D(T, {
+			i ? /* @__PURE__ */ k(ne, { rows: 4 }) : s ? /* @__PURE__ */ k(te, { onRetry: () => c() }) : t.length === 0 ? /* @__PURE__ */ k(ee, {
+				icon: /* @__PURE__ */ k(D, {
 					className: "size-6",
 					"aria-hidden": "true"
 				}),
 				title: "No portfolios yet",
 				description: "Create your first portfolio to start organizing holdings and tracking drift.",
-				action: /* @__PURE__ */ O(A, {
+				action: /* @__PURE__ */ A(M, {
 					size: "sm",
-					onClick: z,
-					children: [/* @__PURE__ */ D(E, {
+					onClick: E,
+					children: [/* @__PURE__ */ k(O, {
 						className: "size-4",
 						"aria-hidden": "true"
 					}), "New portfolio"]
 				})
-			}) : /* @__PURE__ */ O(oe, { children: [
-				/* @__PURE__ */ D(g, { items: [
-					{
-						label: "Portfolios",
-						value: String(t.length)
-					},
-					{
-						label: "Active",
-						value: String(I)
-					},
-					{
-						label: "Drafts",
-						value: String(L)
-					},
-					{
-						label: "Avg drift threshold",
-						value: b(R)
-					}
-				] }),
-				/* @__PURE__ */ D("div", {
+			}) : /* @__PURE__ */ A(ce, { children: [
+				/* @__PURE__ */ A(p, {
+					className: "grid grid-cols-2 gap-3 lg:grid-cols-4",
+					children: [
+						/* @__PURE__ */ k(h, {
+							label: "Portfolios",
+							value: String(t.length),
+							glow: !0
+						}),
+						/* @__PURE__ */ k(h, {
+							label: "Active",
+							value: String(ie)
+						}),
+						/* @__PURE__ */ k(h, {
+							label: "Drafts",
+							value: String(C)
+						}),
+						/* @__PURE__ */ k(h, {
+							label: "Avg drift threshold",
+							value: b(T)
+						})
+					]
+				}),
+				/* @__PURE__ */ k("div", {
 					className: "grid gap-4 md:grid-cols-2 xl:grid-cols-3",
-					children: t.map((e) => /* @__PURE__ */ O(j, {
-						className: "flex flex-col",
-						children: [/* @__PURE__ */ O(P, {
-							className: "pb-3",
-							children: [/* @__PURE__ */ O("div", {
-								className: "flex items-start justify-between gap-2",
-								children: [/* @__PURE__ */ O(F, {
-									className: "flex items-center gap-2 text-base",
-									children: [/* @__PURE__ */ D(T, {
-										className: "size-4 text-text-secondary",
-										"aria-hidden": "true"
-									}), e.name]
-								}), /* @__PURE__ */ O(ce, { children: [/* @__PURE__ */ D(fe, {
-									asChild: !0,
-									children: /* @__PURE__ */ D(A, {
-										variant: "ghost",
-										size: "icon",
-										className: "size-10",
-										"aria-label": `Actions for ${e.name}`,
-										children: /* @__PURE__ */ D(re, {
-											className: "size-4",
-											"aria-hidden": "true"
-										})
-									})
-								}), /* @__PURE__ */ O(le, {
-									align: "end",
-									children: [
-										/* @__PURE__ */ D(ue, { children: e.name }),
-										/* @__PURE__ */ D(de, {}),
-										/* @__PURE__ */ O(V, {
-											className: "gap-2",
-											onClick: () => B(e),
-											children: [/* @__PURE__ */ D(ie, {
-												className: "size-4",
-												"aria-hidden": "true"
-											}), "Edit"]
-										}),
-										/* @__PURE__ */ O(V, {
-											className: "gap-2 text-status-error-text focus:text-status-error-text",
-											disabled: e.status === "ARCHIVED",
-											onClick: () => w(e),
-											children: [/* @__PURE__ */ D(ae, {
-												className: "size-4",
-												"aria-hidden": "true"
-											}), "Archive"]
-										})
-									]
-								})] })]
-							}), e.description?.trim() ? /* @__PURE__ */ D(N, {
-								className: "line-clamp-2",
-								children: e.description
-							}) : null]
-						}), /* @__PURE__ */ O(M, {
-							className: "flex flex-1 flex-col justify-between gap-4",
-							children: [/* @__PURE__ */ O("div", {
-								className: "flex flex-wrap items-center gap-2",
-								children: [
-									/* @__PURE__ */ D(k, {
-										variant: ee(e.status),
-										children: Q(e.status)
-									}),
-									/* @__PURE__ */ D(k, {
-										variant: "outline",
-										children: e.baseCurrency
-									}),
-									/* @__PURE__ */ O(k, {
-										variant: "secondary",
-										children: ["Drift ", b(e.driftThresholdPct)]
-									})
-								]
-							}), /* @__PURE__ */ D(A, {
-								variant: "outline",
-								size: "sm",
-								className: "w-full",
-								onClick: () => x(e.id),
-								children: "View holdings"
-							})]
-						})]
+					children: t.map((e, t) => /* @__PURE__ */ k(ze, {
+						portfolio: e,
+						index: t,
+						onView: () => y(e.id),
+						onEdit: () => ae(e),
+						onArchive: () => S(e)
 					}, e.id))
 				}),
-				/* @__PURE__ */ D(u, {
+				/* @__PURE__ */ k(u, {
 					hasMore: n,
 					onClick: r,
 					loading: a
 				})
 			] }),
-			/* @__PURE__ */ D(Oe, {
+			/* @__PURE__ */ k(Fe, {
 				open: f,
-				onOpenChange: p,
-				editing: y
+				onOpenChange: m,
+				editing: g
 			}),
-			/* @__PURE__ */ D(je, {
-				portfolioId: ne,
+			/* @__PURE__ */ k(Re, {
+				portfolioId: re,
 				onOpenChange: (e) => {
-					e || x(null);
+					e || y(null);
 				}
 			}),
-			/* @__PURE__ */ D(d, {
-				open: C !== null,
+			/* @__PURE__ */ k(d, {
+				open: x !== null,
 				onOpenChange: (e) => {
-					e || w(null);
+					e || S(null);
 				},
 				title: "Archive portfolio?",
-				description: C ? `Archive “${C.name}”. It will move to archived status and stop appearing in active views.` : void 0,
+				description: x ? `Archive “${x.name}”. It will move to archived status and stop appearing in active views.` : void 0,
 				confirmLabel: "Archive",
 				pendingLabel: "Archiving…",
 				destructive: !0,
 				pending: l.isPending,
 				onConfirm: () => {
-					C && l.mutate(C.id, { onSuccess: () => w(null) });
+					x && l.mutate(x.id, { onSuccess: () => S(null) });
 				}
 			})
 		]
 	});
 }
 //#endregion
-export { Me as PortfoliosPage };
+export { Be as PortfoliosPage };
 
 //# sourceMappingURL=PortfoliosPage.js.map