@burdenoff/microfe-kadaikodi 2026.704.4 → 2026.704.5

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

@@ -1,374 +1,501 @@
 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 { EmptyState as r } from "../../components/EmptyState.js";
-import { useInvestmentOpportunities as i, useInvestments as a } from "../../hooks/useKadaikodiApi.js";
-import { formatCurrency as o, formatDate as s } from "../../utils/formatters.js";
-import { useMemo as c } from "react";
-import { ArrowLeft as l, BarChart3 as u, Building2 as d, Clock as f, IndianRupee as p, PieChart as m, Shield as h, Target as g, TrendingUp as _, Users as v } from "lucide-react";
-import { useParams as y } from "react-router-dom";
-import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
-import { EmphasisPanel as C, PagePurpose as w } from "@burdenoff/fe-libs/ui";
+import { EmptyState as ee } from "../../components/EmptyState.js";
+import { useInvest as r, useInvestmentOpportunities as i, useInvestments as a, useProvider as te } from "../../hooks/useKadaikodiApi.js";
+import { formatCurrency as o, formatDate as ne } from "../../utils/formatters.js";
+import { AreaChart as s } from "../../components/viz/AreaChart.js";
+import { ProgressRing as c } from "../../components/viz/ProgressRing.js";
+import { StatCard as l } from "../../components/viz/StatCard.js";
+import "../../components/viz/index.js";
+import { useCallback as u, useMemo as d, useState as f } from "react";
+import { ArrowLeft as re, CheckCircle2 as p, IndianRupee as m, Lock as ie, MessageSquare as h, Receipt as g, Shield as _, Star as v, Tag as y, Target as b, TrendingUp as x, Users as S } from "lucide-react";
+import { useParams as C } from "react-router-dom";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import { EmphasisPanel as ae, GlassCard as E, PagePurpose as oe } from "@burdenoff/fe-libs/ui";
 //#region src/kadaikodi/pages/investor/InvestmentDetailsPage.tsx
-function T(e) {
+function se(e) {
 	switch (e) {
 		case "low": return {
-			label: "Low Risk",
-			color: "text-status-success-text"
+			label: "Low risk",
+			color: "text-status-success-text",
+			badge: "border-status-success-border bg-status-success-bg-subtle text-status-success-text"
 		};
 		case "medium": return {
-			label: "Medium Risk",
-			color: "text-status-warning-text"
+			label: "Medium risk",
+			color: "text-status-warning-text",
+			badge: "border-status-warning-border bg-status-warning-bg-subtle text-status-warning-text"
 		};
 		case "high": return {
-			label: "High Risk",
-			color: "text-status-error-text"
+			label: "High risk",
+			color: "text-status-error-text",
+			badge: "border-status-error-border bg-status-error-bg-subtle text-status-error-text"
 		};
 		default: return {
 			label: e,
-			color: "text-text-secondary"
+			color: "text-text-secondary",
+			badge: "border-border-default"
 		};
 	}
 }
-function E() {
-	let { navigateTo: E, currentUser: D } = e(), { id: O } = y(), { data: k = [], isLoading: A } = i(), { data: j = [], isLoading: M } = a(D?.id || ""), N = A || M, P = c(() => j.find((e) => e.id === O), [j, O]), F = c(() => k.find((e) => e.id === O || e.id === P?.opportunityId) ?? null, [
+function ce(e) {
+	return o(e, {
+		minimumFractionDigits: 0,
+		notation: "compact"
+	});
+}
+function D() {
+	let { navigateTo: D, currentUser: O } = e(), { id: k } = C(), { data: A = [], isLoading: j } = i(), { data: M = [], isLoading: N } = a(O?.id || ""), P = j || N, F = d(() => M.find((e) => e.id === k), [M, k]), I = d(() => A.find((e) => e.id === k || e.id === F?.opportunityId) ?? null, [
+		A,
 		k,
-		O,
-		P
+		F
+	]), { data: L } = te(I?.cartId), R = r(), [z, B] = f(""), [V, H] = f("idle"), U = I?.minimumInvestment ?? 0, W = I ? Math.max(0, I.targetAmount - I.raisedAmount) : 0, G = Math.max(U, W), K = Number.parseInt(z, 10), q = !Number.isNaN(K) && K >= U && K <= G, le = u(() => {
+		if (!I || !q) {
+			H("error");
+			return;
+		}
+		R.mutate({
+			amount: K,
+			investorId: O?.id ?? "",
+			opportunityId: I.id
+		}, {
+			onSuccess: () => {
+				H("success"), window.setTimeout(() => D("/investor/portfolio"), 1400);
+			},
+			onError: () => H("error")
+		});
+	}, [
+		I,
+		q,
+		R,
+		K,
+		O?.id,
+		D
+	]), J = d(() => {
+		if (!I) return [];
+		let e = q ? K : U || I.targetAmount / 10, t = e * (1 + I.expectedReturns / 100), n = Math.min(Math.max(I.investmentPeriod, 3), 12);
+		return Array.from({ length: 7 }, (ee, r) => ({
+			label: r === 0 ? "Now" : r === 6 ? `${n}mo` : `M${Math.round(n * r / 6)}`,
+			value: e + (t - e) * (r / 6)
+		}));
+	}, [
+		I,
+		q,
+		K,
+		U
 	]);
-	if (N) return /* @__PURE__ */ x(n, {
+	if (P) return /* @__PURE__ */ w(n, {
 		title: "Investment Details",
 		description: "Loading...",
-		children: /* @__PURE__ */ x("div", {
-			className: "flex items-center justify-center py-20",
-			children: /* @__PURE__ */ S("div", {
-				className: "text-center",
-				children: [/* @__PURE__ */ x("div", { className: "mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-b-2 border-primary" }), /* @__PURE__ */ x("p", {
-					className: "text-sm text-text-secondary",
-					children: "Loading investment details..."
-				})]
-			})
+		children: /* @__PURE__ */ T("div", {
+			className: "space-y-4",
+			children: [/* @__PURE__ */ w("div", { className: "h-28 animate-pulse rounded-[var(--radius-card)] bg-bg-sunken" }), /* @__PURE__ */ T("div", {
+				className: "grid gap-6 lg:grid-cols-3",
+				children: [/* @__PURE__ */ w("div", { className: "h-96 animate-pulse rounded-[var(--radius-card)] bg-bg-sunken lg:col-span-2" }), /* @__PURE__ */ w("div", { className: "h-96 animate-pulse rounded-[var(--radius-card)] bg-bg-sunken" })]
+			})]
 		})
 	});
-	if (!F && !P) return /* @__PURE__ */ x(n, {
+	if (!I && !F) return /* @__PURE__ */ w(n, {
 		title: "Investment Not Found",
-		children: /* @__PURE__ */ x(r, {
+		children: /* @__PURE__ */ w(ee, {
 			illustration: "empty-generic",
 			title: "Investment not found",
 			description: "We couldn't find this investment. It may have been closed or the link is out of date.",
-			action: /* @__PURE__ */ x("button", {
+			action: /* @__PURE__ */ w("button", {
 				type: "button",
-				onClick: () => E("/investor/portfolio"),
+				onClick: () => D("/investor/portfolio"),
 				className: "rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
 				children: "Back to Portfolio"
 			})
 		})
 	});
-	let I = F?.cartName ?? P?.cartName ?? "Investment", L = F ? T(F.riskLevel) : null, R = F && F.targetAmount > 0 ? Math.min(F.raisedAmount / F.targetAmount * 100, 100) : 0, z = F?.expiresAt ? Math.max(0, Math.ceil((new Date(F.expiresAt).getTime() - Date.now()) / 864e5)) : null, B = P ? P.currentValue - P.investedAmount : 0, V = P && P.investedAmount > 0 ? B / P.investedAmount * 100 : 0;
-	return /* @__PURE__ */ S(n, {
-		title: I,
-		description: "Investment Details & Performance",
-		actions: /* @__PURE__ */ S("button", {
+	let ue = I?.cartName ?? F?.cartName ?? "Investment", Y = I ? se(I.riskLevel) : null, X = I && I.targetAmount > 0 ? Math.min(I.raisedAmount / I.targetAmount * 100, 100) : 0, Z = I?.expiresAt ? Math.max(0, Math.ceil((new Date(I.expiresAt).getTime() - Date.now()) / 864e5)) : null, de = F ? F.currentValue - F.investedAmount : 0, Q = F && F.investedAmount > 0 ? de / F.investedAmount * 100 : 0, $ = !!I && I?.status === "active";
+	return /* @__PURE__ */ T(n, {
+		title: ue,
+		description: "Investment details & performance",
+		actions: /* @__PURE__ */ T("button", {
 			type: "button",
-			onClick: () => E("/investor/portfolio"),
+			onClick: () => D("/investor/portfolio"),
 			className: "flex items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary hover:bg-accent transition-colors",
 			children: [
-				/* @__PURE__ */ x(l, { className: "h-4 w-4" }),
-				/* @__PURE__ */ x("span", {
+				/* @__PURE__ */ w(re, { className: "h-4 w-4" }),
+				/* @__PURE__ */ w("span", {
 					className: "hidden sm:inline",
 					children: "Back to Portfolio"
 				}),
-				/* @__PURE__ */ x("span", {
+				/* @__PURE__ */ w("span", {
 					className: "sm:hidden",
 					children: "Back"
 				})
 			]
 		}),
 		children: [
-			/* @__PURE__ */ x(w, {
+			/* @__PURE__ */ w(oe, {
 				className: "mb-6",
-				children: "A deep dive into this investment. Review the funding progress, expected returns and terms on offer, and — if you already hold a stake — exactly what you've put in and what it's worth today."
+				children: "A deep dive into this investment. Review the business behind it, funding progress, expected returns and terms on offer, and — if you already hold a stake — exactly what you've put in and what it's worth today."
 			}),
-			/* @__PURE__ */ x(C, { children: P ? /* @__PURE__ */ S("div", {
-				className: "grid grid-cols-2 gap-4 lg:grid-cols-4",
-				children: [
-					/* @__PURE__ */ S("div", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-4 text-center",
-						children: [
-							/* @__PURE__ */ x(p, { className: "mx-auto mb-2 h-6 w-6 text-primary sm:h-8 sm:w-8" }),
-							/* @__PURE__ */ x("div", {
-								className: "text-lg font-bold text-text-primary sm:text-2xl",
-								children: o(P.investedAmount, { minimumFractionDigits: 0 })
-							}),
-							/* @__PURE__ */ x("div", {
-								className: "text-xs text-text-secondary sm:text-sm",
-								children: "Your Investment"
-							})
-						]
-					}),
-					/* @__PURE__ */ S("div", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-4 text-center",
-						children: [
-							/* @__PURE__ */ x(_, { className: "mx-auto mb-2 h-6 w-6 text-status-success-text sm:h-8 sm:w-8" }),
-							/* @__PURE__ */ S("div", {
-								className: t("text-lg font-bold sm:text-2xl", B >= 0 ? "text-status-success-text" : "text-status-error-text"),
-								children: [
-									V >= 0 ? "+" : "",
-									V.toFixed(1),
-									"%"
-								]
-							}),
-							/* @__PURE__ */ x("div", {
-								className: "text-xs text-text-secondary sm:text-sm",
-								children: "Returns"
-							})
-						]
-					}),
-					/* @__PURE__ */ S("div", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-4 text-center",
-						children: [
-							/* @__PURE__ */ x(d, { className: "mx-auto mb-2 h-6 w-6 text-text-primary sm:h-8 sm:w-8" }),
-							/* @__PURE__ */ x("div", {
-								className: "text-lg font-bold text-text-primary sm:text-2xl",
-								children: o(P.currentValue, { minimumFractionDigits: 0 })
-							}),
-							/* @__PURE__ */ x("div", {
-								className: "text-xs text-text-secondary sm:text-sm",
-								children: "Current Value"
-							})
-						]
-					}),
-					/* @__PURE__ */ S("div", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-4 text-center",
-						children: [
-							/* @__PURE__ */ x(m, { className: "mx-auto mb-2 h-6 w-6 text-text-primary sm:h-8 sm:w-8" }),
-							/* @__PURE__ */ S("div", {
-								className: "text-lg font-bold text-text-primary sm:text-2xl",
-								children: [P.returnsPercentage, "%"]
-							}),
-							/* @__PURE__ */ x("div", {
-								className: "text-xs text-text-secondary sm:text-sm",
-								children: "Expected Return"
-							})
-						]
-					})
-				]
-			}) : F && /* @__PURE__ */ S("div", {
+			F && /* @__PURE__ */ T(ae, { children: [/* @__PURE__ */ w("h2", {
+				className: "mb-4 text-base font-semibold text-text-primary",
+				children: "Your Position"
+			}), /* @__PURE__ */ T("div", {
 				className: "grid grid-cols-2 gap-4 lg:grid-cols-4",
 				children: [
-					/* @__PURE__ */ S("div", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-4 text-center",
-						children: [
-							/* @__PURE__ */ x(g, { className: "mx-auto mb-2 h-6 w-6 text-primary sm:h-8 sm:w-8" }),
-							/* @__PURE__ */ x("div", {
-								className: "text-lg font-bold text-text-primary sm:text-2xl",
-								children: o(F.targetAmount, { minimumFractionDigits: 0 })
-							}),
-							/* @__PURE__ */ x("div", {
-								className: "text-xs text-text-secondary sm:text-sm",
-								children: "Target Amount"
-							})
-						]
+					/* @__PURE__ */ w(l, {
+						label: "Your Investment",
+						value: o(F.investedAmount, { minimumFractionDigits: 0 }),
+						icon: /* @__PURE__ */ w(m, { className: "h-4 w-4" })
 					}),
-					/* @__PURE__ */ S("div", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-4 text-center",
-						children: [
-							/* @__PURE__ */ x(p, { className: "mx-auto mb-2 h-6 w-6 text-status-success-text sm:h-8 sm:w-8" }),
-							/* @__PURE__ */ x("div", {
-								className: "text-lg font-bold text-text-primary sm:text-2xl",
-								children: o(F.raisedAmount, { minimumFractionDigits: 0 })
-							}),
-							/* @__PURE__ */ x("div", {
-								className: "text-xs text-text-secondary sm:text-sm",
-								children: "Raised So Far"
-							})
-						]
+					/* @__PURE__ */ w(l, {
+						label: "Current Value",
+						value: o(F.currentValue, { minimumFractionDigits: 0 }),
+						icon: /* @__PURE__ */ w(x, { className: "h-4 w-4" })
 					}),
-					/* @__PURE__ */ S("div", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-4 text-center",
-						children: [
-							/* @__PURE__ */ x(_, { className: "mx-auto mb-2 h-6 w-6 text-status-success-text sm:h-8 sm:w-8" }),
-							/* @__PURE__ */ S("div", {
-								className: "text-lg font-bold text-status-success-text sm:text-2xl",
-								children: [F.expectedReturns, "%"]
-							}),
-							/* @__PURE__ */ x("div", {
-								className: "text-xs text-text-secondary sm:text-sm",
-								children: "Expected Returns"
-							})
-						]
+					/* @__PURE__ */ w(l, {
+						label: "Returns",
+						value: `${Q >= 0 ? "+" : ""}${Q.toFixed(1)}%`,
+						delta: Number(Q.toFixed(1)),
+						deltaLabel: "on invested",
+						icon: /* @__PURE__ */ w(x, { className: "h-4 w-4" })
 					}),
-					/* @__PURE__ */ S("div", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-4 text-center",
-						children: [
-							/* @__PURE__ */ x(p, { className: "mx-auto mb-2 h-6 w-6 text-text-primary sm:h-8 sm:w-8" }),
-							/* @__PURE__ */ x("div", {
-								className: "text-lg font-bold text-text-primary sm:text-2xl",
-								children: o(F.minimumInvestment, { minimumFractionDigits: 0 })
-							}),
-							/* @__PURE__ */ x("div", {
-								className: "text-xs text-text-secondary sm:text-sm",
-								children: "Min Investment"
-							})
-						]
+					/* @__PURE__ */ w(l, {
+						label: "Realised Returns",
+						value: o(F.returns, { minimumFractionDigits: 0 }),
+						icon: /* @__PURE__ */ w(g, { className: "h-4 w-4" })
 					})
 				]
-			}) }),
-			/* @__PURE__ */ S("div", {
+			})] }),
+			/* @__PURE__ */ T("div", {
 				className: "mt-6 grid gap-6 lg:grid-cols-3",
-				children: [/* @__PURE__ */ S("div", {
+				children: [/* @__PURE__ */ T("div", {
 					className: "space-y-6 lg:col-span-2",
-					children: [F && /* @__PURE__ */ S(b, { children: [F.description && /* @__PURE__ */ S("div", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-4 sm:p-6",
-						children: [/* @__PURE__ */ x("h2", {
-							className: "mb-4 text-lg font-semibold text-text-primary",
-							children: "About This Cart"
-						}), /* @__PURE__ */ x("p", {
-							className: "text-sm leading-relaxed text-text-secondary",
-							children: F.description
-						})]
-					}), /* @__PURE__ */ S("div", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-4 sm:p-6",
-						children: [
-							/* @__PURE__ */ x("h2", {
-								className: "mb-4 text-lg font-semibold text-text-primary",
-								children: "Funding Progress"
-							}),
-							/* @__PURE__ */ S("div", {
-								className: "mb-2 flex justify-between text-sm",
-								children: [/* @__PURE__ */ S("span", {
-									className: "font-medium text-text-primary",
-									children: [o(F.raisedAmount, { minimumFractionDigits: 0 }), " raised"]
-								}), /* @__PURE__ */ S("span", {
-									className: "text-text-secondary",
-									children: ["of ", o(F.targetAmount, { minimumFractionDigits: 0 })]
+					children: [
+						I && /* @__PURE__ */ T(E, {
+							treatment: "glass",
+							className: "p-5 sm:p-6",
+							children: [/* @__PURE__ */ T("div", {
+								className: "flex flex-wrap items-start justify-between gap-3",
+								children: [/* @__PURE__ */ T("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ w("p", {
+										className: "text-sm text-text-secondary",
+										children: I.businessOwner
+									}), /* @__PURE__ */ w("h2", {
+										className: "mt-0.5 text-xl font-bold tracking-tight text-text-primary sm:text-2xl",
+										children: I.cartName
+									})]
+								}), Y && /* @__PURE__ */ T("span", {
+									className: t("inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-sm font-semibold", Y.badge),
+									children: [/* @__PURE__ */ w(_, { className: "h-4 w-4" }), Y.label]
 								})]
-							}),
-							/* @__PURE__ */ x("div", {
-								className: "h-2 w-full overflow-hidden rounded-full bg-bg-sunken",
-								children: /* @__PURE__ */ x("div", {
-									className: "h-full rounded-full bg-action-primary-bg transition-all duration-300",
-									style: { width: `${R}%` }
-								})
-							}),
-							/* @__PURE__ */ S("div", {
-								className: "mt-2 flex justify-between text-xs text-text-secondary",
-								children: [/* @__PURE__ */ S("span", { children: [R.toFixed(0), "% funded"] }), z !== null && /* @__PURE__ */ S("span", { children: [z, " days left"] })]
-							})
-						]
-					})] }), P && /* @__PURE__ */ S("div", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-4 sm:p-6",
-						children: [/* @__PURE__ */ x("h2", {
-							className: "mb-4 text-lg font-semibold text-text-primary",
-							children: "Your Holding"
-						}), /* @__PURE__ */ S("div", {
-							className: "grid gap-4 sm:grid-cols-2",
+							}), I.description && /* @__PURE__ */ w("p", {
+								className: "mt-4 text-sm leading-relaxed text-text-secondary",
+								children: I.description
+							})]
+						}),
+						L && /* @__PURE__ */ T("section", { children: [/* @__PURE__ */ w("h3", {
+							className: "mb-3 text-lg font-semibold text-text-primary",
+							children: "Business Metrics"
+						}), /* @__PURE__ */ T("div", {
+							className: "grid grid-cols-2 gap-3 sm:grid-cols-4 sm:gap-4",
 							children: [
-								/* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("p", {
-									className: "text-sm text-text-secondary",
-									children: "Invested Amount"
-								}), /* @__PURE__ */ x("p", {
-									className: "font-medium text-text-primary",
-									children: o(P.investedAmount, { minimumFractionDigits: 0 })
-								})] }),
-								/* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("p", {
-									className: "text-sm text-text-secondary",
-									children: "Current Value"
-								}), /* @__PURE__ */ x("p", {
-									className: "font-medium text-text-primary",
-									children: o(P.currentValue, { minimumFractionDigits: 0 })
-								})] }),
-								/* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("p", {
-									className: "text-sm text-text-secondary",
-									children: "Returns Realised"
-								}), /* @__PURE__ */ x("p", {
-									className: "font-medium text-text-primary",
-									children: o(P.returns, { minimumFractionDigits: 0 })
-								})] }),
-								/* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("p", {
-									className: "text-sm text-text-secondary",
-									children: "Invested On"
-								}), /* @__PURE__ */ x("p", {
-									className: "font-medium text-text-primary",
-									children: s(P.investmentDate, {
-										hour: void 0,
-										minute: void 0
-									})
-								})] })
+								/* @__PURE__ */ w(l, {
+									label: "Rating",
+									value: L.rating > 0 ? L.rating.toFixed(1) : "—",
+									icon: /* @__PURE__ */ w(v, { className: "h-4 w-4" })
+								}),
+								/* @__PURE__ */ w(l, {
+									label: "Reviews",
+									value: L.totalRatings.toLocaleString("en-IN"),
+									icon: /* @__PURE__ */ w(h, { className: "h-4 w-4" })
+								}),
+								/* @__PURE__ */ w(l, {
+									label: "Avg Order",
+									value: L.averageOrderValue ? o(L.averageOrderValue, { minimumFractionDigits: 0 }) : "—",
+									icon: /* @__PURE__ */ w(g, { className: "h-4 w-4" })
+								}),
+								/* @__PURE__ */ w(l, {
+									label: "Category",
+									value: /* @__PURE__ */ w("span", {
+										className: "text-lg font-semibold capitalize",
+										children: L.category || "—"
+									}),
+									icon: /* @__PURE__ */ w(y, { className: "h-4 w-4" })
+								})
 							]
-						})]
-					})]
-				}), /* @__PURE__ */ x("div", {
-					className: "space-y-6",
-					children: F && /* @__PURE__ */ S("div", {
-						className: "rounded-lg border border-border-subtle bg-bg-surface p-4 sm:p-6",
-						children: [
-							/* @__PURE__ */ x("h2", {
+						})] }),
+						I && /* @__PURE__ */ T(E, {
+							treatment: "plain",
+							className: "p-5 sm:p-6",
+							children: [/* @__PURE__ */ w("h3", {
 								className: "mb-4 text-lg font-semibold text-text-primary",
-								children: "Investment Terms"
-							}),
-							/* @__PURE__ */ S("div", {
-								className: "space-y-4",
-								children: [
-									/* @__PURE__ */ S("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ S("span", {
-											className: "flex items-center gap-2 text-sm text-text-secondary",
-											children: [/* @__PURE__ */ x(_, { className: "h-4 w-4" }), "Expected Returns"]
-										}), /* @__PURE__ */ S("span", {
-											className: "font-medium text-status-success-text",
-											children: [F.expectedReturns, "%"]
-										})]
-									}),
-									/* @__PURE__ */ S("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ S("span", {
-											className: "flex items-center gap-2 text-sm text-text-secondary",
-											children: [/* @__PURE__ */ x(f, { className: "h-4 w-4" }), "Lock-in Period"]
-										}), /* @__PURE__ */ S("span", {
-											className: "font-medium text-text-primary",
-											children: [F.investmentPeriod, " months"]
-										})]
-									}),
-									/* @__PURE__ */ S("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ S("span", {
-											className: "flex items-center gap-2 text-sm text-text-secondary",
-											children: [/* @__PURE__ */ x(p, { className: "h-4 w-4" }), "Minimum Investment"]
-										}), /* @__PURE__ */ x("span", {
-											className: "font-medium text-text-primary",
-											children: o(F.minimumInvestment, { minimumFractionDigits: 0 })
-										})]
-									}),
-									L && /* @__PURE__ */ S("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ S("span", {
-											className: "flex items-center gap-2 text-sm text-text-secondary",
-											children: [/* @__PURE__ */ x(h, { className: "h-4 w-4" }), "Risk Level"]
-										}), /* @__PURE__ */ x("span", {
-											className: t("font-medium", L.color),
-											children: L.label
-										})]
-									}),
-									F.investors.length > 0 && /* @__PURE__ */ S("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ S("span", {
-											className: "flex items-center gap-2 text-sm text-text-secondary",
-											children: [/* @__PURE__ */ x(v, { className: "h-4 w-4" }), "Investors"]
-										}), /* @__PURE__ */ x("span", {
-											className: "font-medium text-text-primary",
-											children: F.investors.length
+								children: "Funding Progress"
+							}), /* @__PURE__ */ T("div", {
+								className: "flex flex-col items-center gap-6 sm:flex-row sm:gap-8",
+								children: [/* @__PURE__ */ w(c, {
+									value: X,
+									size: 140,
+									label: `${X.toFixed(0)}%`,
+									caption: "funded"
+								}), /* @__PURE__ */ T("div", {
+									className: "w-full flex-1 space-y-4",
+									children: [/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("div", {
+										className: "flex items-baseline justify-between",
+										children: [/* @__PURE__ */ w("span", {
+											className: "text-2xl font-bold text-text-primary",
+											children: o(I.raisedAmount, { minimumFractionDigits: 0 })
+										}), /* @__PURE__ */ T("span", {
+											className: "text-sm text-text-secondary",
+											children: ["of ", o(I.targetAmount, { minimumFractionDigits: 0 })]
 										})]
-									})
+									}), /* @__PURE__ */ w("p", {
+										className: "mt-1 text-sm text-text-secondary",
+										children: "raised so far"
+									})] }), /* @__PURE__ */ T("div", {
+										className: "grid grid-cols-3 gap-3 border-t border-border-subtle pt-4 text-center",
+										children: [
+											/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
+												className: "text-base font-bold text-text-primary sm:text-lg",
+												children: I.investors.length
+											}), /* @__PURE__ */ w("p", {
+												className: "text-xs text-text-secondary",
+												children: "Investors"
+											})] }),
+											/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
+												className: "text-base font-bold text-text-primary sm:text-lg",
+												children: o(W, {
+													minimumFractionDigits: 0,
+													notation: "compact"
+												})
+											}), /* @__PURE__ */ w("p", {
+												className: "text-xs text-text-secondary",
+												children: "To Go"
+											})] }),
+											/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
+												className: "text-base font-bold text-text-primary sm:text-lg",
+												children: Z === null ? "—" : `${Z}`
+											}), /* @__PURE__ */ w("p", {
+												className: "text-xs text-text-secondary",
+												children: "Days Left"
+											})] })
+										]
+									})]
+								})]
+							})]
+						}),
+						F && /* @__PURE__ */ T(E, {
+							treatment: "plain",
+							className: "p-5 sm:p-6",
+							children: [/* @__PURE__ */ w("h3", {
+								className: "mb-4 text-lg font-semibold text-text-primary",
+								children: "Your Holding"
+							}), /* @__PURE__ */ T("div", {
+								className: "grid gap-4 sm:grid-cols-2",
+								children: [
+									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
+										className: "text-sm text-text-secondary",
+										children: "Invested Amount"
+									}), /* @__PURE__ */ w("p", {
+										className: "font-medium text-text-primary",
+										children: o(F.investedAmount, { minimumFractionDigits: 0 })
+									})] }),
+									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
+										className: "text-sm text-text-secondary",
+										children: "Current Value"
+									}), /* @__PURE__ */ w("p", {
+										className: "font-medium text-text-primary",
+										children: o(F.currentValue, { minimumFractionDigits: 0 })
+									})] }),
+									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
+										className: "text-sm text-text-secondary",
+										children: "Returns Realised"
+									}), /* @__PURE__ */ w("p", {
+										className: "font-medium text-text-primary",
+										children: o(F.returns, { minimumFractionDigits: 0 })
+									})] }),
+									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
+										className: "text-sm text-text-secondary",
+										children: "Invested On"
+									}), /* @__PURE__ */ w("p", {
+										className: "font-medium text-text-primary",
+										children: ne(F.investmentDate, {
+											hour: void 0,
+											minute: void 0
+										})
+									})] })
 								]
-							}),
-							F.status === "active" && !P && /* @__PURE__ */ S("button", {
-								type: "button",
-								onClick: () => E("/investor/opportunities"),
-								className: "mt-6 flex w-full items-center justify-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2.5 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 transition-colors",
-								children: [/* @__PURE__ */ x(u, { className: "h-4 w-4" }), "Invest in this Cart"]
-							})
-						]
+							})]
+						})
+					]
+				}), /* @__PURE__ */ w("div", {
+					className: "space-y-6",
+					children: /* @__PURE__ */ w("div", {
+						className: "lg:sticky lg:top-6",
+						children: /* @__PURE__ */ T(E, {
+							treatment: "glass",
+							glow: !0,
+							className: "p-5 sm:p-6",
+							children: [
+								/* @__PURE__ */ w("h3", {
+									className: "mb-4 text-lg font-semibold text-text-primary",
+									children: $ ? "Invest" : "Investment Terms"
+								}),
+								/* @__PURE__ */ T("div", {
+									className: "space-y-3",
+									children: [
+										/* @__PURE__ */ T("div", {
+											className: "flex items-center justify-between",
+											children: [/* @__PURE__ */ T("span", {
+												className: "flex items-center gap-2 text-sm text-text-secondary",
+												children: [/* @__PURE__ */ w(x, { className: "h-4 w-4" }), "Expected returns"]
+											}), /* @__PURE__ */ T("span", {
+												className: "font-semibold text-status-success-text",
+												children: [I?.expectedReturns ?? F?.returnsPercentage, "% p.a."]
+											})]
+										}),
+										/* @__PURE__ */ T("div", {
+											className: "flex items-center justify-between",
+											children: [/* @__PURE__ */ T("span", {
+												className: "flex items-center gap-2 text-sm text-text-secondary",
+												children: [/* @__PURE__ */ w(ie, { className: "h-4 w-4" }), "Lock-in"]
+											}), /* @__PURE__ */ T("span", {
+												className: "font-semibold text-text-primary",
+												children: [I?.investmentPeriod ?? "—", " months"]
+											})]
+										}),
+										I && /* @__PURE__ */ T("div", {
+											className: "flex items-center justify-between",
+											children: [/* @__PURE__ */ T("span", {
+												className: "flex items-center gap-2 text-sm text-text-secondary",
+												children: [/* @__PURE__ */ w(m, { className: "h-4 w-4" }), "Minimum"]
+											}), /* @__PURE__ */ w("span", {
+												className: "font-semibold text-text-primary",
+												children: o(I.minimumInvestment, { minimumFractionDigits: 0 })
+											})]
+										}),
+										I && I.investors.length > 0 && /* @__PURE__ */ T("div", {
+											className: "flex items-center justify-between",
+											children: [/* @__PURE__ */ T("span", {
+												className: "flex items-center gap-2 text-sm text-text-secondary",
+												children: [/* @__PURE__ */ w(S, { className: "h-4 w-4" }), "Investors"]
+											}), /* @__PURE__ */ w("span", {
+												className: "font-semibold text-text-primary",
+												children: I.investors.length
+											})]
+										})
+									]
+								}),
+								$ && V !== "success" && /* @__PURE__ */ T("div", {
+									className: "mt-5 space-y-4 border-t border-border-subtle pt-5",
+									children: [
+										/* @__PURE__ */ T("div", { children: [
+											/* @__PURE__ */ w("label", {
+												htmlFor: "invest-amount",
+												className: "mb-1.5 block text-sm font-medium text-text-primary",
+												children: "Amount"
+											}),
+											/* @__PURE__ */ T("div", {
+												className: "relative",
+												children: [/* @__PURE__ */ w(m, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ w("input", {
+													id: "invest-amount",
+													type: "number",
+													inputMode: "numeric",
+													value: z,
+													onChange: (e) => {
+														B(e.target.value), H("idle");
+													},
+													placeholder: String(U),
+													className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2.5 pl-9 pr-3 text-base font-semibold text-text-primary placeholder:font-normal placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
+												})]
+											}),
+											/* @__PURE__ */ T("p", {
+												className: "mt-1.5 text-xs text-text-secondary",
+												children: [
+													o(U, { minimumFractionDigits: 0 }),
+													" –",
+													" ",
+													o(G, { minimumFractionDigits: 0 })
+												]
+											}),
+											V === "error" && /* @__PURE__ */ T("p", {
+												className: "mt-1 text-xs text-status-error-text",
+												children: [
+													"Enter an amount between",
+													" ",
+													o(U, { minimumFractionDigits: 0 }),
+													" and",
+													" ",
+													o(G, { minimumFractionDigits: 0 }),
+													"."
+												]
+											})
+										] }),
+										/* @__PURE__ */ T("div", { children: [
+											/* @__PURE__ */ w("p", {
+												className: "mb-1 text-sm font-medium text-text-primary",
+												children: "Projected returns"
+											}),
+											/* @__PURE__ */ T("p", {
+												className: "mb-2 text-xs text-text-muted",
+												children: [
+													"Forecast at ",
+													I?.expectedReturns,
+													"% over ",
+													I?.investmentPeriod,
+													" ",
+													"months"
+												]
+											}),
+											/* @__PURE__ */ w(s, {
+												series: J,
+												height: 140,
+												valueFormatter: ce,
+												title: "Projected value over the lock-in period"
+											}),
+											q && /* @__PURE__ */ T("div", {
+												className: "mt-2 flex items-center justify-between rounded-lg bg-bg-sunken/60 px-3 py-2 text-sm",
+												children: [/* @__PURE__ */ w("span", {
+													className: "text-text-secondary",
+													children: "Projected value"
+												}), /* @__PURE__ */ w("span", {
+													className: "font-semibold text-status-success-text",
+													children: o(K * (1 + (I?.expectedReturns ?? 0) / 100), { minimumFractionDigits: 0 })
+												})]
+											})
+										] }),
+										/* @__PURE__ */ w("button", {
+											type: "button",
+											onClick: le,
+											disabled: !q || R.isPending,
+											className: t("flex w-full items-center justify-center gap-2 rounded-lg px-4 py-3 text-sm font-semibold transition-colors", q && !R.isPending ? "bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover" : "cursor-not-allowed bg-bg-sunken text-text-secondary"),
+											children: R.isPending ? "Processing…" : "Invest Now"
+										})
+									]
+								}),
+								V === "success" && /* @__PURE__ */ T("div", {
+									className: "mt-5 border-t border-border-subtle pt-5 text-center",
+									children: [
+										/* @__PURE__ */ w(p, { className: "mx-auto mb-2 h-10 w-10 text-status-success-text" }),
+										/* @__PURE__ */ w("p", {
+											className: "text-sm font-medium text-text-primary",
+											children: "Investment successful!"
+										}),
+										/* @__PURE__ */ w("p", {
+											className: "mt-1 text-xs text-text-secondary",
+											children: "Redirecting to your portfolio…"
+										})
+									]
+								}),
+								!$ && !F && I && /* @__PURE__ */ T("div", {
+									className: "mt-5 flex items-center gap-2 rounded-lg border border-border-subtle bg-bg-sunken/50 p-3 text-sm text-text-secondary",
+									children: [
+										/* @__PURE__ */ w(b, { className: "h-4 w-4 shrink-0" }),
+										"This opportunity is ",
+										I.status,
+										". It's no longer accepting investments."
+									]
+								})
+							]
+						})
 					})
 				})]
 			})
@@ -376,6 +503,6 @@ function E() {
 	});
 }
 //#endregion
-export { E as InvestmentDetailsPage };
+export { D as InvestmentDetailsPage };
 
 //# sourceMappingURL=InvestmentDetailsPage.js.map