@burdenoff/microfe-atheletebridge 2026.625.1 → 2026.626.1

package/dist/atheletebridge/pages/investor/InvestmentDetailsPage.js

@@ -5,8 +5,9 @@ import { formatCurrency as r, formatDate as i } from "../../utils/formatters.js"
 import { useEffect as a, useState as o } from "react";
 import { Activity as s, AlertCircle as c, ArrowLeft as l, BarChart3 as u, Building2 as d, CheckCircle2 as f, Clock as p, Download as m, FileText as h, IndianRupee as g, Package as _, PieChart as v, Star as y, TrendingUp as b, Users as x, X as S } from "lucide-react";
 import { jsx as C, jsxs as w } from "react/jsx-runtime";
+import { EmphasisPanel as T, NextSteps as E, PagePurpose as D } from "@burdenoff/fe-libs/ui";
 //#region src/atheletebridge/pages/investor/InvestmentDetailsPage.tsx
-var T = {
+var O = {
 	id: "INV-001",
 	cartName: "Dosa Express - Koramangala",
 	cartOwner: "Suresh Rao",
@@ -77,7 +78,7 @@ var T = {
 		}
 	]
 };
-function E(e) {
+function k(e) {
 	switch (e) {
 		case "verified": return {
 			color: "text-green-600 dark:text-green-400",
@@ -101,15 +102,15 @@ function E(e) {
 		};
 	}
 }
-function D() {
-	let { navigateTo: f } = e(), [p, D] = o("overview"), [O, k] = o(!0), [A, j] = o(!1), [M, N] = o(null);
+function A() {
+	let { navigateTo: f } = e(), [p, A] = o("overview"), [j, M] = o(!0), [N, P] = o(!1), [F, I] = o(null);
 	a(() => {
 		let e = setTimeout(() => {
-			N(T), k(!1);
+			I(O), M(!1);
 		}, 600);
 		return () => clearTimeout(e);
 	}, []);
-	let P = [
+	let L = [
 		{
 			id: "overview",
 			label: "Overview",
@@ -131,7 +132,7 @@ function D() {
 			Icon: s
 		}
 	];
-	if (O) return /* @__PURE__ */ C(n, {
+	if (j) return /* @__PURE__ */ C(n, {
 		title: "Investment Details",
 		description: "Loading...",
 		children: /* @__PURE__ */ C("div", {
@@ -145,7 +146,7 @@ function D() {
 			})
 		})
 	});
-	if (!M) return /* @__PURE__ */ C(n, {
+	if (!F) return /* @__PURE__ */ C(n, {
 		title: "Investment Not Found",
 		children: /* @__PURE__ */ w("div", {
 			className: "flex flex-col items-center justify-center py-12",
@@ -155,9 +156,9 @@ function D() {
 			})]
 		})
 	});
-	let F = M.currentValuation * (M.equityPercentage / 100) - M.investmentAmount, I = F / M.investmentAmount * 100;
+	let R = F.currentValuation * (F.equityPercentage / 100) - F.investmentAmount, z = R / F.investmentAmount * 100;
 	return /* @__PURE__ */ w(n, {
-		title: M.cartName,
+		title: F.cartName,
 		description: "Investment Details & Performance",
 		actions: /* @__PURE__ */ w("div", {
 			className: "flex items-center gap-2",
@@ -196,7 +197,7 @@ function D() {
 				}),
 				/* @__PURE__ */ w("button", {
 					type: "button",
-					onClick: () => j(!0),
+					onClick: () => P(!0),
 					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: [/* @__PURE__ */ C("span", {
 						className: "hidden sm:inline",
@@ -209,7 +210,38 @@ function D() {
 			]
 		}),
 		children: [
-			/* @__PURE__ */ w("div", {
+			/* @__PURE__ */ C(D, {
+				className: "mb-6",
+				children: "A deep dive into one of your investments. Track your stake, returns and equity, follow the business's performance over time, export a report, or manage your position. Everything about this holding lives on this page."
+			}),
+			/* @__PURE__ */ C(E, {
+				className: "mb-6",
+				storageKey: "atheletebridge-investment-details",
+				steps: [
+					{
+						id: "manage",
+						label: "Manage this investment",
+						description: "Top up, withdraw or adjust your position.",
+						icon: /* @__PURE__ */ C(v, { className: "h-4 w-4" }),
+						onClick: () => P(!0)
+					},
+					{
+						id: "export",
+						label: "Export a performance report",
+						description: "Download the numbers for your records.",
+						icon: /* @__PURE__ */ C(m, { className: "h-4 w-4" }),
+						onClick: () => alert("Report export initiated")
+					},
+					{
+						id: "portfolio",
+						label: "Back to your portfolio",
+						description: "Compare this holding against the rest of your investments.",
+						icon: /* @__PURE__ */ C(l, { className: "h-4 w-4" }),
+						onClick: () => f("/investor/portfolio")
+					}
+				]
+			}),
+			/* @__PURE__ */ C(T, { children: /* @__PURE__ */ w("div", {
 				className: "grid grid-cols-2 gap-4 lg:grid-cols-4",
 				children: [
 					/* @__PURE__ */ w("div", {
@@ -218,7 +250,7 @@ function D() {
 							/* @__PURE__ */ C(g, { className: "mx-auto mb-2 h-6 w-6 text-primary sm:h-8 sm:w-8" }),
 							/* @__PURE__ */ C("div", {
 								className: "text-lg font-bold text-text-primary sm:text-2xl",
-								children: r(M.investmentAmount, { minimumFractionDigits: 0 })
+								children: r(F.investmentAmount, { minimumFractionDigits: 0 })
 							}),
 							/* @__PURE__ */ C("div", {
 								className: "text-xs text-text-secondary sm:text-sm",
@@ -233,8 +265,8 @@ function D() {
 							/* @__PURE__ */ w("div", {
 								className: "text-lg font-bold text-green-600 dark:text-green-400 sm:text-2xl",
 								children: [
-									I > 0 ? "+" : "",
-									I.toFixed(1),
+									z > 0 ? "+" : "",
+									z.toFixed(1),
 									"%"
 								]
 							}),
@@ -250,7 +282,7 @@ function D() {
 							/* @__PURE__ */ C(v, { className: "mx-auto mb-2 h-6 w-6 text-blue-600 sm:h-8 sm:w-8" }),
 							/* @__PURE__ */ w("div", {
 								className: "text-lg font-bold text-text-primary sm:text-2xl",
-								children: [M.equityPercentage, "%"]
+								children: [F.equityPercentage, "%"]
 							}),
 							/* @__PURE__ */ C("div", {
 								className: "text-xs text-text-secondary sm:text-sm",
@@ -264,7 +296,7 @@ function D() {
 							/* @__PURE__ */ C(d, { className: "mx-auto mb-2 h-6 w-6 text-purple-600 sm:h-8 sm:w-8" }),
 							/* @__PURE__ */ C("div", {
 								className: "text-lg font-bold text-text-primary sm:text-2xl",
-								children: r(M.currentValuation * (M.equityPercentage / 100), { minimumFractionDigits: 0 })
+								children: r(F.currentValuation * (F.equityPercentage / 100), { minimumFractionDigits: 0 })
 							}),
 							/* @__PURE__ */ C("div", {
 								className: "text-xs text-text-secondary sm:text-sm",
@@ -273,12 +305,12 @@ function D() {
 						]
 					})
 				]
-			}),
+			}) }),
 			/* @__PURE__ */ C("div", {
 				className: "mt-6 flex gap-2 overflow-x-auto pb-2",
-				children: P.map((e) => /* @__PURE__ */ w("button", {
+				children: L.map((e) => /* @__PURE__ */ w("button", {
 					type: "button",
-					onClick: () => D(e.id),
+					onClick: () => A(e.id),
 					className: t("flex items-center gap-2 whitespace-nowrap rounded-lg px-3 py-2 text-sm font-medium transition-colors sm:px-4 sm:py-3", p === e.id ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-surface text-text-primary hover:bg-bg-sunken"),
 					children: [
 						/* @__PURE__ */ C(e.Icon, { className: "h-4 w-4 flex-shrink-0" }),
@@ -313,28 +345,28 @@ function D() {
 											children: "Owner"
 										}), /* @__PURE__ */ C("p", {
 											className: "font-medium text-text-primary",
-											children: M.cartOwner
+											children: F.cartOwner
 										})] }),
 										/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
 											className: "text-sm text-text-secondary",
 											children: "Business Type"
 										}), /* @__PURE__ */ C("p", {
 											className: "font-medium text-text-primary",
-											children: M.businessType
+											children: F.businessType
 										})] }),
 										/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
 											className: "text-sm text-text-secondary",
 											children: "Location"
 										}), /* @__PURE__ */ C("p", {
 											className: "font-medium text-text-primary",
-											children: M.location
+											children: F.location
 										})] }),
 										/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
 											className: "text-sm text-text-secondary",
 											children: "Established"
 										}), /* @__PURE__ */ C("p", {
 											className: "font-medium text-text-primary",
-											children: i(M.establishedDate, {
+											children: i(F.establishedDate, {
 												hour: void 0,
 												minute: void 0
 											})
@@ -355,7 +387,7 @@ function D() {
 												/* @__PURE__ */ C(_, { className: "mx-auto mb-2 h-6 w-6 text-primary sm:h-8 sm:w-8" }),
 												/* @__PURE__ */ C("div", {
 													className: "text-xl font-bold text-text-primary sm:text-2xl",
-													children: M.monthlyOrders
+													children: F.monthlyOrders
 												}),
 												/* @__PURE__ */ C("div", {
 													className: "text-xs text-text-secondary sm:text-sm",
@@ -366,7 +398,7 @@ function D() {
 												/* @__PURE__ */ C(g, { className: "mx-auto mb-2 h-6 w-6 text-green-600 sm:h-8 sm:w-8" }),
 												/* @__PURE__ */ C("div", {
 													className: "text-xl font-bold text-text-primary sm:text-2xl",
-													children: r(M.monthlyRevenue, { minimumFractionDigits: 0 })
+													children: r(F.monthlyRevenue, { minimumFractionDigits: 0 })
 												}),
 												/* @__PURE__ */ C("div", {
 													className: "text-xs text-text-secondary sm:text-sm",
@@ -377,7 +409,7 @@ function D() {
 												/* @__PURE__ */ C(x, { className: "mx-auto mb-2 h-6 w-6 text-blue-600 sm:h-8 sm:w-8" }),
 												/* @__PURE__ */ C("div", {
 													className: "text-xl font-bold text-text-primary sm:text-2xl",
-													children: M.activeCustomers
+													children: F.activeCustomers
 												}),
 												/* @__PURE__ */ C("div", {
 													className: "text-xs text-text-secondary sm:text-sm",
@@ -393,9 +425,9 @@ function D() {
 											children: "Customer Rating"
 										}), /* @__PURE__ */ w("div", {
 											className: "mt-1 flex items-center gap-1",
-											children: [Array.from({ length: 5 }, (e, n) => /* @__PURE__ */ C(y, { className: t("h-4 w-4", n < Math.floor(M.customerRating) ? "fill-yellow-400 text-yellow-400" : "fill-none text-text-secondary/40") }, n)), /* @__PURE__ */ C("span", {
+											children: [Array.from({ length: 5 }, (e, n) => /* @__PURE__ */ C(y, { className: t("h-4 w-4", n < Math.floor(F.customerRating) ? "fill-yellow-400 text-yellow-400" : "fill-none text-text-secondary/40") }, n)), /* @__PURE__ */ C("span", {
 												className: "ml-1 text-sm font-medium text-text-primary",
-												children: M.customerRating
+												children: F.customerRating
 											})]
 										})] }), /* @__PURE__ */ w("div", {
 											className: "text-left sm:text-right",
@@ -404,7 +436,7 @@ function D() {
 												children: "Avg Order Value"
 											}), /* @__PURE__ */ C("p", {
 												className: "text-lg font-semibold text-text-primary",
-												children: r(M.averageOrderValue, { minimumFractionDigits: 0 })
+												children: r(F.averageOrderValue, { minimumFractionDigits: 0 })
 											})]
 										})]
 									})
@@ -425,7 +457,7 @@ function D() {
 											children: "Investment Date"
 										}), /* @__PURE__ */ C("p", {
 											className: "font-medium text-text-primary",
-											children: i(M.investmentDate, {
+											children: i(F.investmentDate, {
 												hour: void 0,
 												minute: void 0
 											})
@@ -435,21 +467,21 @@ function D() {
 											children: "Investment Type"
 										}), /* @__PURE__ */ C("p", {
 											className: "font-medium text-text-primary",
-											children: M.investmentType
+											children: F.investmentType
 										})] }),
 										/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
 											className: "text-sm text-text-secondary",
 											children: "Initial Valuation"
 										}), /* @__PURE__ */ C("p", {
 											className: "font-medium text-text-primary",
-											children: r(M.valuationAtInvestment, { minimumFractionDigits: 0 })
+											children: r(F.valuationAtInvestment, { minimumFractionDigits: 0 })
 										})] }),
 										/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
 											className: "text-sm text-text-secondary",
 											children: "Current Valuation"
 										}), /* @__PURE__ */ C("p", {
 											className: "text-lg font-medium text-text-primary",
-											children: r(M.currentValuation, { minimumFractionDigits: 0 })
+											children: r(F.currentValuation, { minimumFractionDigits: 0 })
 										})] }),
 										/* @__PURE__ */ C("div", {
 											className: "border-t border-border-subtle pt-4",
@@ -459,8 +491,8 @@ function D() {
 													className: "text-sm text-text-secondary",
 													children: "Your Returns"
 												}), /* @__PURE__ */ w("span", {
-													className: t("text-lg font-semibold", F > 0 ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400"),
-													children: [F > 0 ? "+" : "", r(F, { minimumFractionDigits: 0 })]
+													className: t("text-lg font-semibold", R > 0 ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400"),
+													children: [R > 0 ? "+" : "", r(R, { minimumFractionDigits: 0 })]
 												})]
 											})
 										})
@@ -483,7 +515,7 @@ function D() {
 												className: "text-sm font-medium text-green-600 dark:text-green-400",
 												children: [
 													"+",
-													M.revenueGrowth,
+													F.revenueGrowth,
 													"%"
 												]
 											})]
@@ -491,7 +523,7 @@ function D() {
 											className: "h-2 w-full overflow-hidden rounded-full bg-bg-sunken",
 											children: /* @__PURE__ */ C("div", {
 												className: "h-full rounded-full bg-green-600",
-												style: { width: `${Math.min(M.revenueGrowth, 100)}%` }
+												style: { width: `${Math.min(F.revenueGrowth, 100)}%` }
 											})
 										})] }),
 										/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ w("div", {
@@ -501,13 +533,13 @@ function D() {
 												children: "Profit Margin"
 											}), /* @__PURE__ */ w("span", {
 												className: "text-sm font-medium text-text-primary",
-												children: [M.profitMargin, "%"]
+												children: [F.profitMargin, "%"]
 											})]
 										}), /* @__PURE__ */ C("div", {
 											className: "h-2 w-full overflow-hidden rounded-full bg-bg-sunken",
 											children: /* @__PURE__ */ C("div", {
 												className: "h-full rounded-full bg-blue-600",
-												style: { width: `${M.profitMargin}%` }
+												style: { width: `${F.profitMargin}%` }
 											})
 										})] }),
 										/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ w("div", {
@@ -519,7 +551,7 @@ function D() {
 												className: "text-sm font-medium text-green-600 dark:text-green-400",
 												children: [
 													"+",
-													M.returnOnInvestment,
+													F.returnOnInvestment,
 													"%"
 												]
 											})]
@@ -527,7 +559,7 @@ function D() {
 											className: "h-2 w-full overflow-hidden rounded-full bg-bg-sunken",
 											children: /* @__PURE__ */ C("div", {
 												className: "h-full rounded-full bg-green-500",
-												style: { width: `${Math.min(M.returnOnInvestment, 100)}%` }
+												style: { width: `${Math.min(F.returnOnInvestment, 100)}%` }
 											})
 										})] }),
 										/* @__PURE__ */ w("div", { children: [/* @__PURE__ */ C("p", {
@@ -535,7 +567,7 @@ function D() {
 											children: "Expected Payback"
 										}), /* @__PURE__ */ C("p", {
 											className: "font-medium text-text-primary",
-											children: M.paybackPeriod
+											children: F.paybackPeriod
 										})] })
 									]
 								})]
@@ -559,7 +591,7 @@ function D() {
 											children: "Monthly Revenue"
 										}), /* @__PURE__ */ C("p", {
 											className: "mt-1 text-lg font-bold text-text-primary",
-											children: r(M.monthlyRevenue, { minimumFractionDigits: 0 })
+											children: r(F.monthlyRevenue, { minimumFractionDigits: 0 })
 										})]
 									}),
 									/* @__PURE__ */ w("div", {
@@ -571,7 +603,7 @@ function D() {
 											className: "mt-1 text-lg font-bold text-green-600 dark:text-green-400",
 											children: [
 												"+",
-												M.revenueGrowth,
+												F.revenueGrowth,
 												"%"
 											]
 										})]
@@ -583,7 +615,7 @@ function D() {
 											children: "Profit Margin"
 										}), /* @__PURE__ */ w("p", {
 											className: "mt-1 text-lg font-bold text-text-primary",
-											children: [M.profitMargin, "%"]
+											children: [F.profitMargin, "%"]
 										})]
 									}),
 									/* @__PURE__ */ w("div", {
@@ -593,7 +625,7 @@ function D() {
 											children: "Avg Order Value"
 										}), /* @__PURE__ */ C("p", {
 											className: "mt-1 text-lg font-bold text-text-primary",
-											children: r(M.averageOrderValue, { minimumFractionDigits: 0 })
+											children: r(F.averageOrderValue, { minimumFractionDigits: 0 })
 										})]
 									})
 								]
@@ -623,32 +655,32 @@ function D() {
 										children: [
 											{
 												metric: "Monthly Revenue",
-												value: r(M.monthlyRevenue, { minimumFractionDigits: 0 }),
+												value: r(F.monthlyRevenue, { minimumFractionDigits: 0 }),
 												trend: "+18.5%"
 											},
 											{
 												metric: "Monthly Orders",
-												value: String(M.monthlyOrders),
+												value: String(F.monthlyOrders),
 												trend: "+12%"
 											},
 											{
 												metric: "Average Order Value",
-												value: r(M.averageOrderValue, { minimumFractionDigits: 0 }),
+												value: r(F.averageOrderValue, { minimumFractionDigits: 0 }),
 												trend: "+5.8%"
 											},
 											{
 												metric: "Active Customers",
-												value: String(M.activeCustomers),
+												value: String(F.activeCustomers),
 												trend: "+22%"
 											},
 											{
 												metric: "Profit Margin",
-												value: `${M.profitMargin}%`,
+												value: `${F.profitMargin}%`,
 												trend: "+2.1%"
 											},
 											{
 												metric: "Return on Investment",
-												value: `${M.returnOnInvestment}%`,
+												value: `${F.returnOnInvestment}%`,
 												trend: "+8.5%"
 											}
 										].map((e) => /* @__PURE__ */ w("tr", {
@@ -680,8 +712,8 @@ function D() {
 							children: "Investment Documents"
 						}), /* @__PURE__ */ C("div", {
 							className: "space-y-4",
-							children: M.documents.map((e, n) => {
-								let r = E(e.status), a = r.Icon;
+							children: F.documents.map((e, n) => {
+								let r = k(e.status), a = r.Icon;
 								return /* @__PURE__ */ w("div", {
 									className: "flex flex-col gap-4 rounded-lg bg-bg-sunken/50 p-4 sm:flex-row sm:items-center sm:justify-between",
 									children: [/* @__PURE__ */ w("div", {
@@ -739,7 +771,7 @@ function D() {
 							children: "Recent Updates"
 						}), /* @__PURE__ */ C("div", {
 							className: "space-y-4",
-							children: M.recentUpdates.map((e, t) => /* @__PURE__ */ w("div", {
+							children: F.recentUpdates.map((e, t) => /* @__PURE__ */ w("div", {
 								className: "flex gap-3 rounded-lg bg-bg-sunken/50 p-4 sm:gap-4",
 								children: [/* @__PURE__ */ C("div", {
 									className: "flex-shrink-0",
@@ -768,7 +800,7 @@ function D() {
 					})
 				]
 			}),
-			A && /* @__PURE__ */ C("div", {
+			N && /* @__PURE__ */ C("div", {
 				className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
 				children: /* @__PURE__ */ w("div", {
 					className: "relative max-h-[90vh] w-full max-w-md overflow-y-auto rounded-lg border border-border-subtle bg-bg-surface",
@@ -777,7 +809,7 @@ function D() {
 							className: "border-b border-border-subtle p-4 sm:p-6",
 							children: [/* @__PURE__ */ C("button", {
 								type: "button",
-								onClick: () => j(!1),
+								onClick: () => P(!1),
 								className: "absolute right-3 top-3 rounded-lg p-1 text-text-secondary hover:bg-accent transition-colors",
 								children: /* @__PURE__ */ C(S, { className: "h-5 w-5" })
 							}), /* @__PURE__ */ C("h2", {
@@ -792,7 +824,7 @@ function D() {
 									className: "text-sm text-text-secondary sm:text-base",
 									children: [
 										"Choose an action for your investment in ",
-										M.cartName,
+										F.cartName,
 										":"
 									]
 								}),
@@ -832,7 +864,7 @@ function D() {
 							className: "flex justify-end gap-3 border-t border-border-subtle p-4 sm:p-6",
 							children: /* @__PURE__ */ C("button", {
 								type: "button",
-								onClick: () => j(!1),
+								onClick: () => P(!1),
 								className: "rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
 								children: "Cancel"
 							})
@@ -844,6 +876,6 @@ function D() {
 	});
 }
 //#endregion
-export { D as InvestmentDetailsPage };
+export { A as InvestmentDetailsPage };
 
 //# sourceMappingURL=InvestmentDetailsPage.js.map