@burdenoff/microfe-kadaikodi 2026.704.4 → 2026.710.1

package/dist/kadaikodi/pages/cart-owner/AnalyticsDashboard.js

@@ -4,8 +4,13 @@ import { PageLayout as n } from "../../components/PageLayout.js";
 import { EmptyState as r } from "../../components/EmptyState.js";
 import { useOfferings as i, useOrders as a, useProviders as o, useReviews as s } from "../../hooks/useKadaikodiApi.js";
 import { formatCurrency as c } from "../../utils/formatters.js";
-import { useMemo as l } from "react";
-import { ArrowDownRight as u, ArrowUpRight as d, BarChart3 as f, CalendarDays as p, Clock as m, Download as h, IndianRupee as g, Percent as _, ShoppingCart as v, Star as y, Target as b, ThumbsUp as x, TrendingUp as S } from "lucide-react";
+import { AreaChart as l } from "../../components/viz/AreaChart.js";
+import { HBarFunnel as u } from "../../components/viz/HBarFunnel.js";
+import { DonutChart as d } from "../../components/viz/DonutChart.js";
+import { StatCard as ee } from "../../components/viz/StatCard.js";
+import "../../components/viz/index.js";
+import { useMemo as f } from "react";
+import { BarChart3 as p, CalendarDays as m, Clock as h, Download as g, IndianRupee as _, Percent as v, ShoppingCart as y, Star as b, Target as x, ThumbsUp as te, TrendingUp as S } from "lucide-react";
 import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
 import { EmphasisPanel as E, NextSteps as D, PagePurpose as O } from "@burdenoff/fe-libs/ui";
 //#region src/kadaikodi/pages/cart-owner/AnalyticsDashboard.tsx
@@ -29,7 +34,7 @@ var k = 864e5, A = {
 	let n = t.map((e) => e.map(M).join(",")).join("\n"), r = new Blob([n], { type: "text/csv;charset=utf-8;" }), i = URL.createObjectURL(r), a = document.createElement("a");
 	a.href = i, a.download = e, document.body.appendChild(a), a.click(), document.body.removeChild(a), URL.revokeObjectURL(i);
 }, P = () => {
-	let { navigateTo: M, currentUser: P } = e(), { data: F = [], isLoading: I } = o(), L = l(() => F.find((e) => e.ownerId === P?.id) ?? F[0], [F, P?.id]), R = L?.id, { data: z = [] } = a({ providerId: R }), { data: B = [] } = i(R), { data: V = [] } = s(R ?? ""), H = l(() => new Map(B.map((e) => [e.name, A[e.category] ?? e.category])), [B]), U = l(() => {
+	let { navigateTo: M, currentUser: P } = e(), { data: F = [], isLoading: I } = o(), L = f(() => F.find((e) => e.ownerId === P?.id) ?? F[0], [F, P?.id]), R = L?.id, { data: z = [] } = a({ providerId: R }), { data: B = [] } = i(R), { data: V = [] } = s(R ?? ""), H = f(() => new Map(B.map((e) => [e.name, A[e.category] ?? e.category])), [B]), U = f(() => {
 		let e = z.filter((e) => e.status === "delivered"), t = j().getTime(), n = (t, n) => e.filter((e) => {
 			let r = new Date(e.orderDate).getTime();
 			return r >= t && r < n;
@@ -43,7 +48,7 @@ var k = 864e5, A = {
 			weeklyGrowth: u(a, o),
 			monthlyGrowth: u(s, c)
 		};
-	}, [z]), W = l(() => {
+	}, [z]), W = f(() => {
 		let e = z.length, t = z.filter((e) => e.status === "delivered"), n = z.filter((e) => e.status === "cancelled"), r = t.length > 0 ? Math.round(t.reduce((e, t) => e + t.total, 0) / t.length) : 0;
 		return {
 			total: e,
@@ -54,7 +59,7 @@ var k = 864e5, A = {
 			cancellationRate: e > 0 ? Math.round(n.length / e * 100) : 0,
 			completionRate: e > 0 ? Math.round(t.length / e * 100) : 0
 		};
-	}, [z]), { popularTimes: G, peakHours: K, peakDays: q } = l(() => {
+	}, [z]), { popularTimes: G, peakHours: K, peakDays: q } = f(() => {
 		let e = Array(24).fill(0), t = /* @__PURE__ */ new Map();
 		z.forEach((n) => {
 			let r = new Date(n.orderDate);
@@ -74,7 +79,7 @@ var k = 864e5, A = {
 				orders: t
 			})).sort((e, t) => t.orders - e.orders).slice(0, 3)
 		};
-	}, [z]), { topSelling: J, leastSelling: Y, categories: X } = l(() => {
+	}, [z]), { topSelling: J, leastSelling: Y, categories: X } = f(() => {
 		let e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map();
 		z.forEach((n) => n.items.forEach((n) => {
 			let r = H.get(n.name) ?? "Other", i = e.get(n.name) ?? {
@@ -101,7 +106,7 @@ var k = 864e5, A = {
 				...t
 			})).sort((e, t) => t.revenue - e.revenue)
 		};
-	}, [z, H]), Z = l(() => {
+	}, [z, H]), Z = f(() => {
 		let e = V.length;
 		return {
 			count: e,
@@ -119,7 +124,7 @@ var k = 864e5, A = {
 			})),
 			recent: [...V].sort((e, t) => new Date(t.createdAt).getTime() - new Date(e.createdAt).getTime()).slice(0, 4)
 		};
-	}, [V]), Q = l(() => {
+	}, [V]), Q = f(() => {
 		let e = j().getTime(), t = [];
 		for (let n = 13; n >= 0; n--) {
 			let r = e - n * k, i = r + k, a = z.filter((e) => {
@@ -133,7 +138,28 @@ var k = 864e5, A = {
 			});
 		}
 		return t;
-	}, [z]), $ = Math.max(...G.map((e) => e.orders), 1), ee = Math.max(...X.map((e) => e.revenue), 1), te = Math.max(...K.map((e) => e.orders), 1), ne = Math.max(...q.map((e) => e.orders), 1), re = Math.max(...Z.distribution.map((e) => e.count), 1), ie = (e) => `${e > 0 ? "+" : ""}${e}%`;
+	}, [z]), $ = f(() => ({
+		categorySegments: X.slice(0, 6).map((e) => ({
+			label: e.category,
+			value: e.revenue
+		})),
+		trendSeries: Q.map((e) => ({
+			label: new Date(e.date).toLocaleDateString("en-IN", {
+				day: "2-digit",
+				month: "short"
+			}),
+			value: e.orders
+		})),
+		topItemStages: J.map((e) => ({
+			label: e.name,
+			value: e.quantity
+		})),
+		totalCategoryRevenue: X.reduce((e, t) => e + t.revenue, 0)
+	}), [
+		X,
+		Q,
+		J
+	]), ne = Math.max(...G.map((e) => e.orders), 1), re = Math.max(...X.map((e) => e.revenue), 1), ie = Math.max(...K.map((e) => e.orders), 1), ae = Math.max(...q.map((e) => e.orders), 1), oe = Math.max(...Z.distribution.map((e) => e.count), 1);
 	if (I) return /* @__PURE__ */ w(n, {
 		title: "Analytics Dashboard",
 		description: "Business performance insights and data",
@@ -157,26 +183,30 @@ var k = 864e5, A = {
 			})
 		})
 	});
-	let ae = [
+	let se = [
 		{
 			label: "Today's Revenue",
 			value: U.today,
-			growth: U.dailyGrowth
+			growth: U.dailyGrowth,
+			deltaLabel: "vs yesterday"
 		},
 		{
 			label: "This Week",
 			value: U.week,
-			growth: U.weeklyGrowth
+			growth: U.weeklyGrowth,
+			deltaLabel: "vs last week"
 		},
 		{
 			label: "This Month",
 			value: U.month,
-			growth: U.monthlyGrowth
+			growth: U.monthlyGrowth,
+			deltaLabel: "vs last month"
 		},
 		{
 			label: "This Year",
 			value: U.year,
-			growth: null
+			growth: null,
+			deltaLabel: void 0
 		}
 	];
 	return /* @__PURE__ */ T(n, {
@@ -199,7 +229,7 @@ var k = 864e5, A = {
 				])]);
 			},
 			className: "inline-flex items-center gap-1.5 rounded-md border border-border-subtle px-3 py-2 text-sm text-text-primary hover:bg-bg-sunken transition-colors",
-			children: [/* @__PURE__ */ w(h, { className: "h-4 w-4" }), "Export CSV"]
+			children: [/* @__PURE__ */ w(g, { className: "h-4 w-4" }), "Export CSV"]
 		}),
 		children: [
 			/* @__PURE__ */ w(O, {
@@ -238,30 +268,87 @@ var k = 864e5, A = {
 						children: "Revenue Overview"
 					}), /* @__PURE__ */ w("div", {
 						className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4",
-						children: ae.map((e) => /* @__PURE__ */ T("div", {
-							className: "rounded-lg border border-border-subtle bg-bg-surface p-5 shadow-sm",
-							children: [
-								/* @__PURE__ */ T("div", {
-									className: "flex items-center justify-between",
-									children: [/* @__PURE__ */ w("div", {
-										className: "rounded-md bg-accent p-2",
-										children: /* @__PURE__ */ w(g, { className: "h-5 w-5 text-text-secondary" })
-									}), e.growth !== null && /* @__PURE__ */ T("div", {
-										className: t("flex items-center gap-1 text-xs font-medium", e.growth >= 0 ? "text-status-success-text" : "text-status-error-text"),
-										children: [e.growth >= 0 ? /* @__PURE__ */ w(d, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ w(u, { className: "h-3.5 w-3.5" }), ie(e.growth)]
-									})]
-								}),
-								/* @__PURE__ */ w("p", {
-									className: "mt-3 text-2xl font-bold text-text-primary",
-									children: c(e.value, { minimumFractionDigits: 0 })
-								}),
-								/* @__PURE__ */ w("p", {
-									className: "mt-1 text-sm text-text-secondary",
-									children: e.label
-								})
-							]
+						children: se.map((e) => /* @__PURE__ */ w(ee, {
+							label: e.label,
+							value: c(e.value, { minimumFractionDigits: 0 }),
+							delta: e.growth ?? void 0,
+							deltaLabel: e.deltaLabel,
+							icon: /* @__PURE__ */ w(_, { className: "h-4 w-4" })
 						}, e.label))
 					})] }),
+					/* @__PURE__ */ T("div", {
+						className: "grid grid-cols-1 gap-6 lg:grid-cols-3",
+						children: [
+							/* @__PURE__ */ T("div", {
+								className: "rounded-lg border border-border-subtle bg-bg-surface shadow-sm",
+								children: [/* @__PURE__ */ w("div", {
+									className: "border-b border-border-subtle px-5 py-4",
+									children: /* @__PURE__ */ w("h2", {
+										className: "text-base font-semibold text-text-primary",
+										children: "Revenue by Category"
+									})
+								}), /* @__PURE__ */ w("div", {
+									className: "p-5",
+									children: $.categorySegments.length === 0 ? /* @__PURE__ */ w("p", {
+										className: "py-8 text-center text-sm text-text-secondary",
+										children: "No category revenue yet. Sales will break down here by category."
+									}) : /* @__PURE__ */ w(d, {
+										segments: $.categorySegments,
+										centerLabel: c($.totalCategoryRevenue, {
+											minimumFractionDigits: 0,
+											notation: "compact"
+										}),
+										centerCaption: "total",
+										valueFormatter: (e) => c(e, { minimumFractionDigits: 0 })
+									})
+								})]
+							}),
+							/* @__PURE__ */ T("div", {
+								className: "rounded-lg border border-border-subtle bg-bg-surface shadow-sm",
+								children: [/* @__PURE__ */ T("div", {
+									className: "border-b border-border-subtle px-5 py-4",
+									children: [/* @__PURE__ */ w("h2", {
+										className: "text-base font-semibold text-text-primary",
+										children: "Order Trends"
+									}), /* @__PURE__ */ w("p", {
+										className: "mt-0.5 text-xs text-text-secondary",
+										children: "Orders per day · last 14 days"
+									})]
+								}), /* @__PURE__ */ w("div", {
+									className: "p-5",
+									children: z.length === 0 ? /* @__PURE__ */ w("p", {
+										className: "py-8 text-center text-sm text-text-secondary",
+										children: "No orders yet. Your daily order trend will chart here."
+									}) : /* @__PURE__ */ w(l, {
+										series: $.trendSeries,
+										height: 200,
+										title: "Orders per day over the last 14 days",
+										valueFormatter: (e) => `${Math.round(e)}`
+									})
+								})]
+							}),
+							/* @__PURE__ */ T("div", {
+								className: "rounded-lg border border-border-subtle bg-bg-surface shadow-sm",
+								children: [/* @__PURE__ */ w("div", {
+									className: "border-b border-border-subtle px-5 py-4",
+									children: /* @__PURE__ */ w("h2", {
+										className: "text-base font-semibold text-text-primary",
+										children: "Top Selling Items"
+									})
+								}), /* @__PURE__ */ w("div", {
+									className: "p-5",
+									children: $.topItemStages.length === 0 ? /* @__PURE__ */ w("p", {
+										className: "py-8 text-center text-sm text-text-secondary",
+										children: "No sales yet. Your best sellers will rank here."
+									}) : /* @__PURE__ */ w(u, {
+										stages: $.topItemStages,
+										showConversion: !1,
+										valueFormatter: (e) => `${Math.round(e)} sold`
+									})
+								})]
+							})
+						]
+					}),
 					/* @__PURE__ */ T("div", {
 						className: "grid grid-cols-1 lg:grid-cols-2 gap-6",
 						children: [/* @__PURE__ */ T("div", {
@@ -270,7 +357,7 @@ var k = 864e5, A = {
 								className: "border-b border-border-subtle px-5 py-4",
 								children: /* @__PURE__ */ T("h2", {
 									className: "text-base font-semibold text-text-primary flex items-center gap-2",
-									children: [/* @__PURE__ */ w(v, { className: "h-4 w-4 text-text-secondary" }), "Order Statistics"]
+									children: [/* @__PURE__ */ w(y, { className: "h-4 w-4 text-text-secondary" }), "Order Statistics"]
 								})
 							}), /* @__PURE__ */ w("div", {
 								className: "p-5",
@@ -314,7 +401,7 @@ var k = 864e5, A = {
 								className: "border-b border-border-subtle px-5 py-4",
 								children: /* @__PURE__ */ T("h2", {
 									className: "text-base font-semibold text-text-primary flex items-center gap-2",
-									children: [/* @__PURE__ */ w(m, { className: "h-4 w-4 text-text-secondary" }), "Popular Times"]
+									children: [/* @__PURE__ */ w(h, { className: "h-4 w-4 text-text-secondary" }), "Popular Times"]
 								})
 							}), /* @__PURE__ */ w("div", {
 								className: "p-5 space-y-2",
@@ -322,7 +409,7 @@ var k = 864e5, A = {
 									className: "text-sm text-text-secondary py-4 text-center",
 									children: "No order activity yet. Busy hours will appear here once orders come in."
 								}) : G.map((e) => {
-									let t = e.orders / $ * 100;
+									let t = e.orders / ne * 100;
 									return /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("div", {
 										className: "flex items-center justify-between text-xs mb-0.5",
 										children: [/* @__PURE__ */ w("span", {
@@ -352,13 +439,13 @@ var k = 864e5, A = {
 							{
 								label: "Acceptance Rate",
 								value: `${W.acceptanceRate}%`,
-								icon: b,
+								icon: x,
 								color: "text-status-success-text"
 							},
 							{
 								label: "Cancellation Rate",
 								value: `${W.cancellationRate}%`,
-								icon: _,
+								icon: v,
 								color: "text-status-error-text"
 							},
 							{
@@ -370,7 +457,7 @@ var k = 864e5, A = {
 							{
 								label: "Average Rating",
 								value: (L.rating ?? 0).toFixed(1),
-								icon: y,
+								icon: b,
 								color: "text-status-warning-text"
 							}
 						].map((e) => {
@@ -456,7 +543,7 @@ var k = 864e5, A = {
 								className: "border-b border-border-subtle px-5 py-4",
 								children: /* @__PURE__ */ T("h2", {
 									className: "text-base font-semibold text-text-primary flex items-center gap-2",
-									children: [/* @__PURE__ */ w(f, { className: "h-4 w-4 text-text-secondary" }), "Category Performance"]
+									children: [/* @__PURE__ */ w(p, { className: "h-4 w-4 text-text-secondary" }), "Category Performance"]
 								})
 							}), /* @__PURE__ */ w("div", {
 								className: "p-5 space-y-4",
@@ -464,7 +551,7 @@ var k = 864e5, A = {
 									className: "text-sm text-text-secondary py-4 text-center",
 									children: "No category data yet."
 								}) : X.map((e) => {
-									let t = e.revenue / ee * 100;
+									let t = e.revenue / re * 100;
 									return /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("div", {
 										className: "flex items-center justify-between text-sm mb-1",
 										children: [/* @__PURE__ */ w("span", {
@@ -499,7 +586,7 @@ var k = 864e5, A = {
 								className: "border-b border-border-subtle px-5 py-4",
 								children: /* @__PURE__ */ T("h2", {
 									className: "text-base font-semibold text-text-primary flex items-center gap-2",
-									children: [/* @__PURE__ */ w(y, { className: "h-4 w-4 text-text-secondary" }), "Reviews & Ratings"]
+									children: [/* @__PURE__ */ w(b, { className: "h-4 w-4 text-text-secondary" }), "Reviews & Ratings"]
 								})
 							}), /* @__PURE__ */ T("div", {
 								className: "p-5",
@@ -518,7 +605,7 @@ var k = 864e5, A = {
 											children: "Average Rating"
 										}), /* @__PURE__ */ T("p", {
 											className: "text-xl font-bold text-status-warning-text flex items-center gap-1",
-											children: [/* @__PURE__ */ w(y, { className: "h-4 w-4 fill-status-warning-text text-status-warning-text" }), Z.count > 0 ? Z.average.toFixed(1) : "—"]
+											children: [/* @__PURE__ */ w(b, { className: "h-4 w-4 fill-status-warning-text text-status-warning-text" }), Z.count > 0 ? Z.average.toFixed(1) : "—"]
 										})] }),
 										/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
 											className: "text-xs text-text-secondary",
@@ -539,13 +626,13 @@ var k = 864e5, A = {
 											children: [
 												/* @__PURE__ */ T("span", {
 													className: "w-8 text-text-secondary flex items-center gap-0.5",
-													children: [e.star, /* @__PURE__ */ w(y, { className: "h-3 w-3 fill-status-warning-text text-status-warning-text" })]
+													children: [e.star, /* @__PURE__ */ w(b, { className: "h-3 w-3 fill-status-warning-text text-status-warning-text" })]
 												}),
 												/* @__PURE__ */ w("div", {
 													className: "flex-1 h-2 rounded-full bg-bg-sunken overflow-hidden",
 													children: /* @__PURE__ */ w("div", {
 														className: "h-full rounded-full bg-[var(--color-accent-soft)]",
-														style: { width: `${e.count / re * 100}%` }
+														style: { width: `${e.count / oe * 100}%` }
 													})
 												}),
 												/* @__PURE__ */ w("span", {
@@ -567,7 +654,7 @@ var k = 864e5, A = {
 												className: "flex items-center justify-between mb-1",
 												children: [/* @__PURE__ */ T("span", {
 													className: "flex items-center gap-0.5 text-status-warning-text text-xs font-medium",
-													children: [/* @__PURE__ */ w(y, { className: "h-3 w-3 fill-status-warning-text text-status-warning-text" }), (e.rating ?? 0).toFixed(1)]
+													children: [/* @__PURE__ */ w(b, { className: "h-3 w-3 fill-status-warning-text text-status-warning-text" }), (e.rating ?? 0).toFixed(1)]
 												}), /* @__PURE__ */ w("span", {
 													className: "text-xs text-text-secondary",
 													children: new Date(e.createdAt).toLocaleDateString("en-IN", {
@@ -593,7 +680,7 @@ var k = 864e5, A = {
 										className: "border-b border-border-subtle px-5 py-4",
 										children: /* @__PURE__ */ T("h2", {
 											className: "text-base font-semibold text-text-primary flex items-center gap-2",
-											children: [/* @__PURE__ */ w(m, { className: "h-4 w-4 text-text-secondary" }), "Peak Hours"]
+											children: [/* @__PURE__ */ w(h, { className: "h-4 w-4 text-text-secondary" }), "Peak Hours"]
 										})
 									}), /* @__PURE__ */ w("div", {
 										className: "p-5 space-y-3",
@@ -601,7 +688,7 @@ var k = 864e5, A = {
 											className: "text-sm text-text-secondary py-2 text-center",
 											children: "No data yet."
 										}) : K.map((e) => {
-											let t = e.orders / te * 100;
+											let t = e.orders / ie * 100;
 											return /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("div", {
 												className: "flex items-center justify-between text-xs mb-1",
 												children: [/* @__PURE__ */ w("span", {
@@ -627,7 +714,7 @@ var k = 864e5, A = {
 										className: "border-b border-border-subtle px-5 py-4",
 										children: /* @__PURE__ */ T("h2", {
 											className: "text-base font-semibold text-text-primary flex items-center gap-2",
-											children: [/* @__PURE__ */ w(p, { className: "h-4 w-4 text-text-secondary" }), "Peak Days"]
+											children: [/* @__PURE__ */ w(m, { className: "h-4 w-4 text-text-secondary" }), "Peak Days"]
 										})
 									}), /* @__PURE__ */ w("div", {
 										className: "p-5 space-y-3",
@@ -635,7 +722,7 @@ var k = 864e5, A = {
 											className: "text-sm text-text-secondary py-2 text-center",
 											children: "No data yet."
 										}) : q.map((e) => {
-											let t = e.orders / ne * 100;
+											let t = e.orders / ae * 100;
 											return /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("div", {
 												className: "flex items-center justify-between text-xs mb-1",
 												children: [/* @__PURE__ */ w("span", {
@@ -659,7 +746,7 @@ var k = 864e5, A = {
 									className: "rounded-lg border border-border-subtle bg-bg-surface p-5 shadow-sm",
 									children: /* @__PURE__ */ T("div", {
 										className: "flex items-center gap-1.5 text-sm",
-										children: [/* @__PURE__ */ w(x, { className: "h-4 w-4 text-status-success-text" }), /* @__PURE__ */ T("span", {
+										children: [/* @__PURE__ */ w(te, { className: "h-4 w-4 text-status-success-text" }), /* @__PURE__ */ T("span", {
 											className: "text-text-secondary",
 											children: [
 												Z.positive,