@burdenoff/microfe-movethewheels 2026.704.1 → 2026.710.1

package/dist/pages/ReportsPage.js

@@ -0,0 +1,317 @@
+import { Calendar as e } from "../node_modules/lucide-react/dist/esm/icons/calendar.js";
+import { ChevronLeft as t } from "../node_modules/lucide-react/dist/esm/icons/chevron-left.js";
+import { ChevronRight as n } from "../node_modules/lucide-react/dist/esm/icons/chevron-right.js";
+import { Clock as r } from "../node_modules/lucide-react/dist/esm/icons/clock.js";
+import { Download as ee } from "../node_modules/lucide-react/dist/esm/icons/download.js";
+import { FileChartColumnIncreasing as i } from "../node_modules/lucide-react/dist/esm/icons/file-chart-column-increasing.js";
+import { Filter as te } from "../node_modules/lucide-react/dist/esm/icons/filter.js";
+import { Plus as a } from "../node_modules/lucide-react/dist/esm/icons/plus.js";
+import { useAnalytics as o } from "../hooks/useAnalytics.js";
+import { useReports as s } from "../hooks/useReports.js";
+import { Badge as c, Button as l, Card as u, CardContent as d, CardHeader as f, CardTitle as p, Select as m, SelectContent as h, SelectItem as g, SelectTrigger as _, SelectValue as v, Skeleton as y } from "../components/ui.js";
+import { PageLayout as b } from "../components/PageLayout.js";
+import { VolumeBar as x } from "../components/charts/VolumeBar.js";
+import "../components/charts/index.js";
+import { formatDate as S } from "../utils/formatters.js";
+import { downloadFile as C, downloadJson as ne, recordToCsv as re, slugifyForFilename as ie } from "../utils/download.js";
+import { useState as w } from "react";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
+import { EmphasisPanel as D, IllustratedEmptyState as O, PagePurpose as k } from "@burdenoff/fe-libs/ui";
+//#region src/movethewheels/pages/ReportsPage.tsx
+var A = [
+	{
+		value: "operations",
+		label: "Operations Summary"
+	},
+	{
+		value: "finance",
+		label: "Financial Report"
+	},
+	{
+		value: "fleet",
+		label: "Fleet Utilization"
+	},
+	{
+		value: "customers",
+		label: "Customer Analytics"
+	},
+	{
+		value: "inventory",
+		label: "Inventory Status"
+	}
+], j = 10;
+function M() {
+	let [M, N] = w(0), { reports: P, hasMore: F, isLoading: I, error: L, refetch: R, createReport: z, generateReport: B } = s({
+		limit: j,
+		offset: M * j
+	}), { analytics: V } = o(), H = V.trends.dailyOrders.slice(-7), [U, W] = w("operations"), [G, K] = w(null), [q, J] = w(!1), [Y, X] = w(null), Z = (e) => A.find((t) => t.value === e)?.label ?? e, Q = async (e) => {
+		J(!0), X(null);
+		let t = {
+			name: `${Z(U)}${e ? " (Scheduled)" : ""}`,
+			type: U,
+			description: `${Z(U)} generated from live operational data`,
+			...e ? { schedule: e } : {}
+		};
+		try {
+			await z(t), X({
+				tone: "success",
+				text: e ? "Scheduled report created." : "Report created."
+			});
+		} catch (e) {
+			X({
+				tone: "error",
+				text: e instanceof Error ? e.message : "Could not create report."
+			});
+		} finally {
+			J(!1);
+		}
+	}, ae = async (e) => {
+		K(e), X(null);
+		try {
+			let t = await B(e), n = `${ie(t.report.name)}-${t.generatedAt.slice(0, 10)}`, r = re(t.result ?? null);
+			r ? C(`${n}.csv`, r, "text/csv") : ne(`${n}.json`, t), X({
+				tone: "success",
+				text: "Report generated and downloaded."
+			});
+		} catch (e) {
+			X({
+				tone: "error",
+				text: e instanceof Error ? e.message : "Could not generate report."
+			});
+		} finally {
+			K(null);
+		}
+	}, $ = P.filter((e) => e.schedule);
+	return /* @__PURE__ */ E(b, {
+		title: "Reports",
+		subtitle: "Generate and schedule reports",
+		icon: /* @__PURE__ */ T(i, { size: 24 }),
+		headerActions: /* @__PURE__ */ E("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ E(m, {
+				value: U,
+				onValueChange: W,
+				children: [/* @__PURE__ */ T(_, {
+					className: "w-[190px]",
+					children: /* @__PURE__ */ T(v, {})
+				}), /* @__PURE__ */ T(h, { children: A.map((e) => /* @__PURE__ */ T(g, {
+					value: e.value,
+					children: e.label
+				}, e.value)) })]
+			}), /* @__PURE__ */ E(l, {
+				onClick: () => void Q(),
+				disabled: q,
+				children: [/* @__PURE__ */ T(a, { size: 16 }), " Create Report"]
+			})]
+		}),
+		children: [
+			/* @__PURE__ */ T(k, {
+				icon: /* @__PURE__ */ T(i, { size: 18 }),
+				children: "Turn your operational data into shareable summaries. Generate one-off reports on orders, finance, fleet, customers or inventory, or schedule them to land in inboxes automatically — so stakeholders always have the latest numbers without logging in."
+			}),
+			Y && /* @__PURE__ */ T("div", {
+				role: "status",
+				className: `rounded-lg p-3 text-sm ${Y.tone === "success" ? "bg-status-success-bg-subtle text-status-success-text" : "bg-status-error-bg-subtle text-status-error-text"}`,
+				children: Y.text
+			}),
+			/* @__PURE__ */ E("div", {
+				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
+				children: [/* @__PURE__ */ E("div", {
+					className: "lg:col-span-2 space-y-4",
+					children: [
+						/* @__PURE__ */ T("h3", {
+							className: "font-semibold",
+							children: "Available Reports"
+						}),
+						I ? /* @__PURE__ */ T("div", {
+							className: "space-y-3",
+							children: Array.from({ length: 3 }).map((e, t) => /* @__PURE__ */ T(y, { className: "h-20 w-full rounded-lg" }, t))
+						}) : L ? /* @__PURE__ */ T(u, {
+							className: "border-status-error-border",
+							children: /* @__PURE__ */ E(d, {
+								className: "p-6 text-center space-y-3",
+								children: [
+									/* @__PURE__ */ T("p", {
+										className: "text-status-error-text font-medium",
+										children: "Couldn't load reports"
+									}),
+									/* @__PURE__ */ T("p", {
+										className: "text-sm text-text-secondary",
+										children: L.message
+									}),
+									/* @__PURE__ */ T(l, {
+										variant: "outline",
+										onClick: R,
+										children: "Retry"
+									})
+								]
+							})
+						}) : P.length === 0 ? /* @__PURE__ */ T(u, { children: /* @__PURE__ */ T(d, {
+							className: "p-0",
+							children: /* @__PURE__ */ T(O, {
+								illustration: "empty-data",
+								title: "No reports yet",
+								description: "Create your first report to turn live operational data into a shareable summary.",
+								action: /* @__PURE__ */ E(l, {
+									onClick: () => void Q(),
+									disabled: q,
+									children: [/* @__PURE__ */ T(a, {
+										size: 16,
+										className: "mr-1.5"
+									}), " Create Report"]
+								})
+							})
+						}) }) : P.map((e) => /* @__PURE__ */ T(u, { children: /* @__PURE__ */ T(d, {
+							className: "p-4",
+							children: /* @__PURE__ */ E("div", {
+								className: "flex items-center justify-between",
+								children: [/* @__PURE__ */ E("div", {
+									className: "flex items-center gap-3",
+									children: [/* @__PURE__ */ T("div", {
+										className: "w-10 h-10 rounded-lg bg-action-primary-bg/10 flex items-center justify-center",
+										children: /* @__PURE__ */ T(i, {
+											size: 20,
+											className: "text-primary"
+										})
+									}), /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("p", {
+										className: "font-medium",
+										children: e.name
+									}), /* @__PURE__ */ T("p", {
+										className: "text-sm text-text-secondary",
+										children: e.description ?? Z(e.type)
+									})] })]
+								}), /* @__PURE__ */ E("div", {
+									className: "flex items-center gap-3",
+									children: [/* @__PURE__ */ E("div", {
+										className: "text-right",
+										children: [/* @__PURE__ */ T(c, {
+											variant: "outline",
+											children: e.schedule ?? "On demand"
+										}), e.lastGenerated && /* @__PURE__ */ E("p", {
+											className: "text-xs text-text-secondary mt-1",
+											children: ["Last: ", S(new Date(e.lastGenerated), "short")]
+										})]
+									}), /* @__PURE__ */ T(l, {
+										variant: "outline",
+										size: "sm",
+										"aria-label": `Generate ${e.name}`,
+										disabled: G === e.id,
+										onClick: () => void ae(e.id),
+										children: /* @__PURE__ */ T(ee, { size: 14 })
+									})]
+								})]
+							})
+						}) }, e.id)),
+						!I && !L && (P.length > 0 || M > 0) && /* @__PURE__ */ E("div", {
+							className: "flex flex-wrap items-center justify-between gap-3 pt-1",
+							children: [/* @__PURE__ */ E("span", {
+								className: "text-sm text-text-secondary",
+								children: [
+									"Showing ",
+									P.length === 0 ? 0 : M * j + 1,
+									" to",
+									" ",
+									M * j + P.length
+								]
+							}), /* @__PURE__ */ E("div", {
+								className: "flex items-center gap-1",
+								children: [
+									/* @__PURE__ */ T(l, {
+										variant: "outline",
+										size: "icon",
+										className: "h-8 w-8",
+										"aria-label": "Previous page",
+										onClick: () => N((e) => Math.max(0, e - 1)),
+										disabled: M === 0,
+										children: /* @__PURE__ */ T(t, { className: "h-4 w-4" })
+									}),
+									/* @__PURE__ */ E("span", {
+										className: "px-3 text-sm",
+										children: ["Page ", M + 1]
+									}),
+									/* @__PURE__ */ T(l, {
+										variant: "outline",
+										size: "icon",
+										className: "h-8 w-8",
+										"aria-label": "Next page",
+										onClick: () => N((e) => e + 1),
+										disabled: !F,
+										children: /* @__PURE__ */ T(n, { className: "h-4 w-4" })
+									})
+								]
+							})]
+						})
+					]
+				}), /* @__PURE__ */ E("div", {
+					className: "space-y-6",
+					children: [
+						/* @__PURE__ */ E(u, { children: [/* @__PURE__ */ T(f, { children: /* @__PURE__ */ T(p, {
+							className: "text-base",
+							children: "Data preview"
+						}) }), /* @__PURE__ */ E(d, { children: [/* @__PURE__ */ T("p", {
+							className: "mb-2 text-xs text-text-secondary",
+							children: "Order volume · last 7 days"
+						}), /* @__PURE__ */ T(x, {
+							xKey: "date",
+							height: 160,
+							showLegend: !1,
+							data: H,
+							series: [{
+								dataKey: "orders",
+								name: "Orders"
+							}],
+							emptyMessage: "No order data to preview yet"
+						})] })] }),
+						/* @__PURE__ */ E(D, {
+							className: "space-y-3",
+							children: [
+								/* @__PURE__ */ E("h2", {
+									className: "flex items-center gap-2 text-base font-semibold text-text-primary",
+									children: [/* @__PURE__ */ T(r, { size: 18 }), " Scheduled Reports"]
+								}),
+								$.length === 0 ? /* @__PURE__ */ T("p", {
+									className: "text-sm text-text-secondary",
+									children: "No scheduled reports yet. Schedule one to have it generated automatically."
+								}) : $.map((e) => /* @__PURE__ */ E("div", {
+									className: "p-3 border border-border-seam rounded-lg",
+									children: [/* @__PURE__ */ T("p", {
+										className: "font-medium",
+										children: e.name
+									}), /* @__PURE__ */ E("p", {
+										className: "text-sm text-text-secondary",
+										children: ["Schedule: ", e.schedule]
+									})]
+								}, e.id)),
+								/* @__PURE__ */ T(l, {
+									variant: "outline",
+									className: "w-full",
+									disabled: q,
+									onClick: () => void Q("daily"),
+									children: "Schedule New Report"
+								})
+							]
+						}),
+						/* @__PURE__ */ E(u, { children: [/* @__PURE__ */ T(f, { children: /* @__PURE__ */ T(p, { children: "Quick Actions" }) }), /* @__PURE__ */ E(d, {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ E(l, {
+								variant: "outline",
+								className: "w-full justify-start",
+								disabled: q,
+								onClick: () => void Q("weekly"),
+								children: [/* @__PURE__ */ T(e, { size: 16 }), " Schedule Report"]
+							}), /* @__PURE__ */ E(l, {
+								variant: "outline",
+								className: "w-full justify-start",
+								disabled: q,
+								onClick: () => void Q(),
+								children: [/* @__PURE__ */ T(te, { size: 16 }), " Custom Report"]
+							})]
+						})] })
+					]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { M as default };