@burdenoff/microfe-kadaikodi 2026.704.3 → 2026.704.5

package/dist/kadaikodi/pages/investor/InvestorPortfolioPage.js

@@ -1,252 +1,326 @@
 import { useKadaikodi as e } from "../../context/KadaikodiContext.js";
 import { cn as t } from "../../utils/cn.js";
 import { PageLayout as n } from "../../components/PageLayout.js";
-import { MetricsCard as r } from "../../components/MetricsCard.js";
-import { EmptyState as i } from "../../components/EmptyState.js";
-import { useInvestments as a } from "../../hooks/useKadaikodiApi.js";
-import { formatCurrency as o, formatDate as s } from "../../utils/formatters.js";
-import { useMemo as c, useState as l } from "react";
-import { BarChart3 as u, Briefcase as d, CreditCard as f, Eye as p, IndianRupee as m, TrendingUp as h, Wallet as g } from "lucide-react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { EmphasisPanel as y, PagePurpose as b } from "@burdenoff/fe-libs/ui";
+import { EmptyState as r } from "../../components/EmptyState.js";
+import { useInvestments as i } from "../../hooks/useKadaikodiApi.js";
+import { formatCurrency as a, formatDate as o } from "../../utils/formatters.js";
+import { MetricsCard as s } from "../../components/MetricsCard.js";
+import { AreaChart as c } from "../../components/viz/AreaChart.js";
+import { DonutChart as l } from "../../components/viz/DonutChart.js";
+import "../../components/viz/index.js";
+import { useMemo as u } from "react";
+import { Briefcase as d, CheckCircle2 as f, Download as p, Eye as m, IndianRupee as h, TrendingUp as g, Wallet as _ } from "lucide-react";
+import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { EmphasisPanel as x, GlassCard as S, PagePurpose as C } from "@burdenoff/fe-libs/ui";
 //#region src/kadaikodi/pages/investor/InvestorPortfolioPage.tsx
-function x(e) {
+function w(e) {
 	return `${e > 0 ? "+" : ""}${e.toFixed(1)}%`;
 }
-function S() {
-	let { navigateTo: S, currentUser: C } = e(), { data: w = [], isLoading: T } = a(C?.id || ""), [E, D] = l("overview"), O = w.reduce((e, t) => e + t.investedAmount, 0), k = w.reduce((e, t) => e + t.currentValue, 0), A = k - O, j = O > 0 ? A / O * 100 : 0, M = w.filter((e) => e.status === "active").length, N = c(() => w.reduce((e, t) => (e[t.cartName] = (e[t.cartName] || 0) + t.currentValue, e), {}), [w]);
-	return T ? /* @__PURE__ */ _(n, {
+function T(e) {
+	return a(e, {
+		minimumFractionDigits: 0,
+		notation: "compact"
+	});
+}
+function E() {
+	let { navigateTo: E, currentUser: D } = e(), { data: O = [], isLoading: k } = i(D?.id || ""), A = O.reduce((e, t) => e + t.investedAmount, 0), j = O.reduce((e, t) => e + t.currentValue, 0), M = j - A, N = A > 0 ? M / A * 100 : 0, P = O.filter((e) => e.status === "active").length, F = u(() => {
+		let e = O.reduce((e, t) => (e[t.cartName] = (e[t.cartName] || 0) + t.currentValue, e), {});
+		return Object.entries(e).map(([e, t]) => ({
+			label: e,
+			value: t
+		})).sort((e, t) => t.value - e.value);
+	}, [O]), I = u(() => {
+		let e = [...O].sort((e, t) => new Date(e.investmentDate).getTime() - new Date(t.investmentDate).getTime()), t = 0, n = e.map((e) => (t += e.currentValue, {
+			label: o(e.investmentDate, {
+				day: void 0,
+				hour: void 0,
+				minute: void 0
+			}),
+			value: t
+		}));
+		return n.length === 1 ? [{
+			label: "Start",
+			value: 0
+		}, ...n] : n;
+	}, [O]), L = u(() => [...O].sort((e, t) => new Date(t.investmentDate).getTime() - new Date(e.investmentDate).getTime()).slice(0, 6), [O]);
+	if (k) return /* @__PURE__ */ y(n, {
 		title: "My Portfolio",
 		description: "Loading your portfolio...",
-		children: /* @__PURE__ */ _("div", {
-			className: "flex items-center justify-center py-20",
-			children: /* @__PURE__ */ v("div", {
-				className: "text-center",
-				children: [/* @__PURE__ */ _("div", { className: "mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-b-2 border-primary" }), /* @__PURE__ */ _("p", {
-					className: "text-sm text-text-secondary",
-					children: "Loading your portfolio..."
-				})]
-			})
+		children: /* @__PURE__ */ b("div", {
+			className: "space-y-4",
+			children: [/* @__PURE__ */ y("div", {
+				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
+				children: Array.from({ length: 4 }).map((e, t) => /* @__PURE__ */ y("div", { className: "h-28 animate-pulse rounded-[var(--radius-card)] bg-bg-sunken" }, t))
+			}), /* @__PURE__ */ y("div", { className: "h-72 animate-pulse rounded-[var(--radius-card)] bg-bg-sunken" })]
 		})
-	}) : /* @__PURE__ */ v(n, {
+	});
+	let R = O.length === 0;
+	return /* @__PURE__ */ b(n, {
 		title: "My Portfolio",
-		description: "Track your investment performance and holdings",
+		description: "View and manage your investments",
+		actions: /* @__PURE__ */ y("button", {
+			type: "button",
+			onClick: () => E("/investor/opportunities"),
+			className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-semibold text-action-primary-text hover:bg-action-primary-bg-hover transition-colors",
+			children: "Add Funds"
+		}),
 		children: [
-			/* @__PURE__ */ _(b, {
+			/* @__PURE__ */ y(C, {
 				className: "mb-6",
-				children: "The complete picture of your money on Kadaikodi. Use this page to see how your portfolio is performing overall, how it's split across the carts you've backed, and the details of each holding. Switch tabs to drill into your holdings, and open any holding to review it."
+				children: "The complete picture of your money on Kadaikodi. See how your portfolio is performing overall, how its value has grown as you've backed more carts, how it's split across holdings, and the detail of every position."
 			}),
-			/* @__PURE__ */ v(y, { children: [/* @__PURE__ */ _("h2", {
+			/* @__PURE__ */ b(x, { children: [/* @__PURE__ */ y("h2", {
 				className: "mb-4 text-base font-semibold text-text-primary",
 				children: "Portfolio at a Glance"
-			}), /* @__PURE__ */ v("div", {
+			}), /* @__PURE__ */ b("div", {
 				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
 				children: [
-					/* @__PURE__ */ _(r, {
-						icon: /* @__PURE__ */ _(g, { className: "h-5 w-5" }),
-						value: o(O, { minimumFractionDigits: 0 }),
+					/* @__PURE__ */ y(s, {
+						featured: !0,
+						icon: /* @__PURE__ */ y(_, { className: "h-5 w-5" }),
+						value: a(A, { minimumFractionDigits: 0 }),
 						label: "Total Invested",
 						trend: "neutral",
-						trendValue: `${M} active`
+						trendValue: `${P} active`
 					}),
-					/* @__PURE__ */ _(r, {
-						icon: /* @__PURE__ */ _(m, { className: "h-5 w-5" }),
-						value: o(k, { minimumFractionDigits: 0 }),
+					/* @__PURE__ */ y(s, {
+						icon: /* @__PURE__ */ y(h, { className: "h-5 w-5" }),
+						value: a(j, { minimumFractionDigits: 0 }),
 						label: "Current Value",
-						trend: j >= 0 ? "up" : "down",
-						trendValue: x(j)
+						trend: N >= 0 ? "up" : "down",
+						trendValue: w(N)
 					}),
-					/* @__PURE__ */ _(r, {
-						icon: /* @__PURE__ */ _(h, { className: "h-5 w-5" }),
-						value: o(Math.abs(A), { minimumFractionDigits: 0 }),
-						label: "Total Returns",
-						trend: A >= 0 ? "up" : "down",
-						trendValue: x(j)
+					/* @__PURE__ */ y(s, {
+						icon: /* @__PURE__ */ y(g, { className: "h-5 w-5" }),
+						value: w(N),
+						label: "Overall Returns",
+						trend: M >= 0 ? "up" : "down",
+						trendValue: a(Math.abs(M), { minimumFractionDigits: 0 })
 					}),
-					/* @__PURE__ */ _(r, {
-						icon: /* @__PURE__ */ _(d, { className: "h-5 w-5" }),
-						value: String(w.length),
-						label: "Holdings"
+					/* @__PURE__ */ y(s, {
+						icon: /* @__PURE__ */ y(d, { className: "h-5 w-5" }),
+						value: String(P),
+						label: "Active Investments"
 					})
 				]
 			})] }),
-			/* @__PURE__ */ v("div", {
-				className: "mt-6 rounded-lg border border-border-subtle bg-bg-surface shadow-sm",
-				children: [/* @__PURE__ */ _("div", {
-					className: "flex border-b border-border-subtle overflow-x-auto",
-					children: [
-						{
-							key: "overview",
-							label: "Overview",
-							Icon: u
-						},
-						{
-							key: "investments",
-							label: `Investments (${w.length})`,
-							Icon: d
-						},
-						{
-							key: "transactions",
-							label: "Transactions",
-							Icon: f
-						}
-					].map(({ key: e, label: n, Icon: r }) => /* @__PURE__ */ v("button", {
+			R ? /* @__PURE__ */ y("div", {
+				className: "mt-6",
+				children: /* @__PURE__ */ y(r, {
+					illustration: "empty-data",
+					title: "No holdings yet",
+					description: "Once you back a cart, your portfolio value, allocation and holdings will appear here.",
+					action: /* @__PURE__ */ y("button", {
 						type: "button",
-						onClick: () => D(e),
-						className: t("flex items-center gap-2 whitespace-nowrap px-4 py-3 text-sm font-medium transition-colors", E === e ? "border-b-2 border-primary text-text-primary" : "text-text-secondary hover:text-text-primary"),
-						children: [/* @__PURE__ */ _(r, { className: "h-4 w-4" }), n]
-					}, e))
-				}), /* @__PURE__ */ v("div", {
-					className: "p-4",
+						onClick: () => E("/investor/opportunities"),
+						className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg-hover transition-colors",
+						children: "Browse Opportunities"
+					})
+				})
+			}) : /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ b("div", {
+				className: "mt-6 grid gap-6 lg:grid-cols-3",
+				children: [/* @__PURE__ */ b(S, {
+					treatment: "plain",
+					className: "p-5 sm:p-6 lg:col-span-2",
+					children: [/* @__PURE__ */ b("div", {
+						className: "mb-4 flex items-center justify-between",
+						children: [/* @__PURE__ */ y("h2", {
+							className: "text-lg font-semibold text-text-primary",
+							children: "Portfolio Value Trend"
+						}), /* @__PURE__ */ y("span", {
+							className: "text-xs text-text-secondary",
+							children: "by holding date"
+						})]
+					}), /* @__PURE__ */ y(c, {
+						series: I,
+						height: 240,
+						valueFormatter: T,
+						title: "Cumulative portfolio value by holding date"
+					})]
+				}), /* @__PURE__ */ b(S, {
+					treatment: "plain",
+					className: "p-5 sm:p-6",
+					children: [/* @__PURE__ */ y("h2", {
+						className: "mb-4 text-lg font-semibold text-text-primary",
+						children: "Allocation"
+					}), /* @__PURE__ */ y("div", {
+						className: "flex flex-col items-center gap-4",
+						children: /* @__PURE__ */ y(l, {
+							segments: F,
+							size: 180,
+							centerLabel: T(j),
+							centerCaption: "total value",
+							valueFormatter: T
+						})
+					})]
+				})]
+			}), /* @__PURE__ */ b("div", {
+				className: "mt-6 grid gap-6 lg:grid-cols-3",
+				children: [/* @__PURE__ */ b(S, {
+					treatment: "plain",
+					className: "p-5 sm:p-6 lg:col-span-2",
 					children: [
-						E === "overview" && /* @__PURE__ */ _("div", {
-							className: "space-y-6",
-							children: w.length === 0 ? /* @__PURE__ */ _(i, {
-								illustration: "empty-data",
-								title: "No holdings yet",
-								description: "Once you back a cart, your portfolio allocation will appear here.",
-								action: /* @__PURE__ */ _("button", {
-									type: "button",
-									onClick: () => S("/investor/opportunities"),
-									className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors",
-									children: "Browse Opportunities"
-								})
-							}) : /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("h3", {
-								className: "mb-4 text-base font-semibold text-text-primary",
-								children: "Allocation by Cart"
-							}), /* @__PURE__ */ _("div", {
-								className: "space-y-3",
-								children: Object.entries(N).map(([e, t]) => /* @__PURE__ */ v("div", {
-									className: "flex items-center",
+						/* @__PURE__ */ y("h2", {
+							className: "mb-4 text-lg font-semibold text-text-primary",
+							children: "Your Holdings"
+						}),
+						/* @__PURE__ */ y("div", {
+							className: "hidden overflow-x-auto md:block",
+							children: /* @__PURE__ */ b("table", {
+								className: "w-full text-sm",
+								children: [/* @__PURE__ */ y("thead", { children: /* @__PURE__ */ b("tr", {
+									className: "border-b border-border-subtle text-left text-xs text-text-secondary",
 									children: [
-										/* @__PURE__ */ _("span", {
-											className: "w-40 truncate text-sm text-text-primary",
-											children: e
+										/* @__PURE__ */ y("th", {
+											className: "pb-3 pr-4 font-medium",
+											children: "Merchant"
 										}),
-										/* @__PURE__ */ _("div", {
-											className: "mx-3 h-6 flex-1 rounded-full bg-bg-sunken overflow-hidden",
-											children: /* @__PURE__ */ _("div", {
-												className: "flex h-6 items-center justify-end rounded-full bg-action-primary-bg pr-2",
-												style: { width: `${k > 0 ? t / k * 100 : 0}%` },
-												children: /* @__PURE__ */ v("span", {
-													className: "text-xs font-medium text-action-primary-text",
-													children: [k > 0 ? (t / k * 100).toFixed(1) : 0, "%"]
-												})
-											})
+										/* @__PURE__ */ y("th", {
+											className: "pb-3 pr-4 text-right font-medium",
+											children: "Invested"
 										}),
-										/* @__PURE__ */ _("span", {
-											className: "ml-2 text-sm font-medium text-text-primary",
-											children: o(t, { minimumFractionDigits: 0 })
-										})
-									]
-								}, e))
-							})] })
-						}),
-						E === "investments" && /* @__PURE__ */ _("div", { children: w.length === 0 ? /* @__PURE__ */ _(i, {
-							illustration: "empty-data",
-							title: "No holdings to show",
-							description: "You don't hold any investments yet. Explore opportunities to start building your portfolio.",
-							action: /* @__PURE__ */ _("button", {
-								type: "button",
-								onClick: () => S("/investor/opportunities"),
-								className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors",
-								children: "Browse Opportunities"
-							})
-						}) : /* @__PURE__ */ _("div", {
-							className: "space-y-4",
-							children: w.map((e) => {
-								let n = e.currentValue - e.investedAmount, r = e.investedAmount > 0 ? n / e.investedAmount * 100 : 0;
-								return /* @__PURE__ */ v("div", {
-									className: "rounded-lg border border-border-subtle p-4 hover:bg-accent/50 transition-colors",
-									children: [
-										/* @__PURE__ */ v("div", {
-											className: "mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between",
-											children: [/* @__PURE__ */ v("div", {
-												className: "flex-1",
-												children: [/* @__PURE__ */ _("h4", {
-													className: "text-base font-semibold text-text-primary",
-													children: e.cartName
-												}), /* @__PURE__ */ _("p", {
-													className: "mt-1 text-sm capitalize text-text-secondary",
-													children: e.status
-												})]
-											}), /* @__PURE__ */ v("div", {
-												className: "text-left sm:text-right",
-												children: [/* @__PURE__ */ _("p", {
-													className: "text-xl font-bold text-text-primary",
-													children: o(e.currentValue, { minimumFractionDigits: 0 })
-												}), /* @__PURE__ */ v("p", {
-													className: t("text-sm", n >= 0 ? "text-status-success-text" : "text-status-error-text"),
-													children: [
-														o(Math.abs(n), { minimumFractionDigits: 0 }),
-														" (",
-														x(r),
-														")"
-													]
-												})]
-											})]
+										/* @__PURE__ */ y("th", {
+											className: "pb-3 pr-4 text-right font-medium",
+											children: "Current Value"
 										}),
-										/* @__PURE__ */ v("div", {
-											className: "mb-4 grid grid-cols-2 gap-3 lg:grid-cols-4",
-											children: [
-												/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
-													className: "text-xs text-text-secondary",
-													children: "Invested"
-												}), /* @__PURE__ */ _("p", {
-													className: "text-sm font-medium text-text-primary",
-													children: o(e.investedAmount, { minimumFractionDigits: 0 })
-												})] }),
-												/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
-													className: "text-xs text-text-secondary",
-													children: "Returns"
-												}), /* @__PURE__ */ _("p", {
-													className: "text-sm font-medium text-text-primary",
-													children: o(e.returns, { minimumFractionDigits: 0 })
-												})] }),
-												/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
-													className: "text-xs text-text-secondary",
-													children: "Expected Return"
-												}), /* @__PURE__ */ v("p", {
-													className: "text-sm font-medium text-text-primary",
-													children: [e.returnsPercentage, "%"]
-												})] }),
-												/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("p", {
-													className: "text-xs text-text-secondary",
-													children: "Investment Date"
-												}), /* @__PURE__ */ _("p", {
-													className: "text-sm font-medium text-text-primary",
-													children: s(e.investmentDate, {
-														hour: void 0,
-														minute: void 0
-													})
-												})] })
-											]
+										/* @__PURE__ */ y("th", {
+											className: "pb-3 pr-4 text-right font-medium",
+											children: "Returns"
 										}),
-										/* @__PURE__ */ _("div", {
-											className: "flex flex-wrap gap-2",
-											children: /* @__PURE__ */ v("button", {
-												type: "button",
-												onClick: () => S(`/investor/investments/${e.id}`),
-												className: "flex items-center gap-2 rounded-lg border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
-												children: [/* @__PURE__ */ _(p, { className: "h-4 w-4" }), "View Details"]
-											})
+										/* @__PURE__ */ y("th", {
+											className: "pb-3 pr-4 font-medium",
+											children: "Status"
+										}),
+										/* @__PURE__ */ y("th", {
+											className: "pb-3 font-medium",
+											"aria-label": "actions"
 										})
 									]
+								}) }), /* @__PURE__ */ y("tbody", { children: O.map((e) => {
+									let n = e.currentValue - e.investedAmount, r = e.investedAmount > 0 ? n / e.investedAmount * 100 : 0;
+									return /* @__PURE__ */ b("tr", {
+										className: "border-b border-border-subtle/60 last:border-0",
+										children: [
+											/* @__PURE__ */ y("td", {
+												className: "py-3 pr-4 font-medium text-text-primary",
+												children: e.cartName
+											}),
+											/* @__PURE__ */ y("td", {
+												className: "py-3 pr-4 text-right tabular-nums text-text-primary",
+												children: a(e.investedAmount, { minimumFractionDigits: 0 })
+											}),
+											/* @__PURE__ */ y("td", {
+												className: "py-3 pr-4 text-right tabular-nums text-text-primary",
+												children: a(e.currentValue, { minimumFractionDigits: 0 })
+											}),
+											/* @__PURE__ */ y("td", {
+												className: t("py-3 pr-4 text-right font-medium tabular-nums", n >= 0 ? "text-status-success-text" : "text-status-error-text"),
+												children: w(r)
+											}),
+											/* @__PURE__ */ y("td", {
+												className: "py-3 pr-4",
+												children: /* @__PURE__ */ b("span", {
+													className: "inline-flex items-center gap-1.5 rounded-full bg-status-success-bg-subtle px-2 py-0.5 text-xs font-medium capitalize text-status-success-text",
+													children: [/* @__PURE__ */ y("span", { className: "h-1.5 w-1.5 rounded-full bg-status-success-text" }), e.status]
+												})
+											}),
+											/* @__PURE__ */ y("td", {
+												className: "py-3 text-right",
+												children: /* @__PURE__ */ b("button", {
+													type: "button",
+													onClick: () => E(`/investor/investments/${e.id}`),
+													className: "inline-flex items-center gap-1.5 rounded-lg border border-border-subtle px-2.5 py-1.5 text-xs font-medium text-text-primary hover:bg-accent transition-colors",
+													children: [/* @__PURE__ */ y(m, { className: "h-3.5 w-3.5" }), "View"]
+												})
+											})
+										]
+									}, e.id);
+								}) })]
+							})
+						}),
+						/* @__PURE__ */ y("div", {
+							className: "space-y-3 md:hidden",
+							children: O.map((e) => {
+								let n = e.currentValue - e.investedAmount, r = e.investedAmount > 0 ? n / e.investedAmount * 100 : 0;
+								return /* @__PURE__ */ b("button", {
+									type: "button",
+									onClick: () => E(`/investor/investments/${e.id}`),
+									className: "w-full rounded-lg border border-border-subtle p-4 text-left transition-colors hover:bg-accent/50",
+									children: [/* @__PURE__ */ b("div", {
+										className: "flex items-start justify-between gap-3",
+										children: [/* @__PURE__ */ y("span", {
+											className: "font-medium text-text-primary",
+											children: e.cartName
+										}), /* @__PURE__ */ y("span", {
+											className: t("text-sm font-semibold tabular-nums", n >= 0 ? "text-status-success-text" : "text-status-error-text"),
+											children: w(r)
+										})]
+									}), /* @__PURE__ */ b("div", {
+										className: "mt-3 grid grid-cols-2 gap-3 text-sm",
+										children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+											className: "text-xs text-text-secondary",
+											children: "Invested"
+										}), /* @__PURE__ */ y("p", {
+											className: "font-medium text-text-primary",
+											children: a(e.investedAmount, { minimumFractionDigits: 0 })
+										})] }), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("p", {
+											className: "text-xs text-text-secondary",
+											children: "Current Value"
+										}), /* @__PURE__ */ y("p", {
+											className: "font-medium text-text-primary",
+											children: a(e.currentValue, { minimumFractionDigits: 0 })
+										})] })]
+									})]
 								}, e.id);
 							})
-						}) }),
-						E === "transactions" && /* @__PURE__ */ _(i, {
-							illustration: "empty-data",
-							title: "No transaction history yet",
-							description: "A detailed ledger of your investments, dividends and withdrawals will appear here as your activity builds up."
 						})
 					]
+				}), /* @__PURE__ */ b(S, {
+					treatment: "plain",
+					className: "p-5 sm:p-6",
+					children: [/* @__PURE__ */ y("h2", {
+						className: "mb-4 text-lg font-semibold text-text-primary",
+						children: "Recent Activity"
+					}), /* @__PURE__ */ y("ul", {
+						className: "space-y-4",
+						children: L.map((e) => /* @__PURE__ */ b("li", {
+							className: "flex items-start gap-3",
+							children: [/* @__PURE__ */ y("span", {
+								className: "mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[var(--color-accent-soft)]",
+								children: /* @__PURE__ */ y(p, { className: "h-4 w-4 text-text-primary" })
+							}), /* @__PURE__ */ b("div", {
+								className: "min-w-0 flex-1",
+								children: [/* @__PURE__ */ b("div", {
+									className: "flex items-baseline justify-between gap-2",
+									children: [/* @__PURE__ */ b("p", {
+										className: "truncate text-sm font-medium text-text-primary",
+										children: ["Invested · ", e.cartName]
+									}), /* @__PURE__ */ y("span", {
+										className: "shrink-0 text-sm font-semibold tabular-nums text-text-primary",
+										children: a(e.investedAmount, {
+											minimumFractionDigits: 0,
+											notation: "compact"
+										})
+									})]
+								}), /* @__PURE__ */ b("div", {
+									className: "mt-0.5 flex items-center gap-2 text-xs text-text-secondary",
+									children: [/* @__PURE__ */ y("span", { children: o(e.investmentDate, {
+										hour: void 0,
+										minute: void 0
+									}) }), /* @__PURE__ */ b("span", {
+										className: "inline-flex items-center gap-1 capitalize text-status-success-text",
+										children: [/* @__PURE__ */ y(f, { className: "h-3 w-3" }), e.status]
+									})]
+								})]
+							})]
+						}, e.id))
+					})]
 				})]
-			})
+			})] })
 		]
 	});
 }
 //#endregion
-export { S as InvestorPortfolioPage };
+export { E as InvestorPortfolioPage };
 
 //# sourceMappingURL=InvestorPortfolioPage.js.map