@burdenoff/microfe-proserviceworld 2026.626.2 → 2026.706.1

package/dist/proserviceworld/pages/AnalyticsPage.js

@@ -1,491 +1,179 @@
-import { useProServiceWorldStore as e } from "../store/proserviceworldStore.js";
-import { useState as t } from "react";
-import { Activity as n, ArrowDownRight as r, ArrowUpRight as i, BarChart3 as a, Calendar as o, DollarSign as s, Download as c, Globe as l, Minus as u, TrendingDown as d, TrendingUp as f, Users as p } from "lucide-react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import { AuroraBackground as g, Badge as _, Button as v, Card as y, CardContent as b, CardHeader as x, CardTitle as S, EmphasisPanel as C, GlassCard as w, GradientText as T, NextSteps as E, PagePurpose as D } from "@burdenoff/fe-libs/ui";
+import { useDashboardStats as e } from "../hooks/useProServiceWorldApi.js";
+import { ErrorState as t, LoadingBlock as n, MetricCard as r, PageHeader as i, SectionCard as a, StatusPill as o, fmtHours as s, fmtMoney as c } from "../components/ui.js";
+import { BarChart3 as l, Clock as u, TrendingUp as d, Wallet as f } from "lucide-react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/proserviceworld/pages/AnalyticsPage.tsx
-function O() {
-	let { analyticsMetrics: O, revenueData: k, clientData: A, servicePerformance: j, geographicData: M } = e(), [N, P] = t("overview"), [F, I] = t("6m"), L = [
-		{
-			key: "overview",
-			label: "Overview",
-			icon: a
-		},
-		{
-			key: "revenue",
-			label: "Revenue",
-			icon: s
-		},
-		{
-			key: "clients",
-			label: "Clients",
-			icon: p
-		},
-		{
-			key: "services",
-			label: "Services",
-			icon: n
-		},
-		{
-			key: "performance",
-			label: "Performance",
-			icon: f
-		}
-	], R = (e) => e === "positive" ? /* @__PURE__ */ m(f, { className: "h-4 w-4 text-status-success-text" }) : e === "negative" ? /* @__PURE__ */ m(d, { className: "h-4 w-4 text-status-error-text" }) : /* @__PURE__ */ m(u, { className: "h-4 w-4 text-text-muted" }), z = Math.max(...k.map((e) => e.value)), B = Math.max(...A.map((e) => e.value)), V = Math.max(...j.map((e) => e.value));
-	return /* @__PURE__ */ h("div", {
-		className: "space-y-6 p-6 bg-bg-canvas min-h-screen",
+var h = () => {
+	let { data: o, isLoading: h, error: y, refetch: b } = e();
+	if (h) return /* @__PURE__ */ p(n, { label: "Crunching numbers…" });
+	if (y) return /* @__PURE__ */ p(t, {
+		error: y,
+		onRetry: () => void b()
+	});
+	if (!o) return null;
+	let x = o.unbilledHours + o.billedHours, S = x > 0 ? Math.round(o.billedHours / x * 100) : 0, C = o.paidInvoiceTotal + o.outstandingInvoiceTotal > 0 ? Math.round(o.paidInvoiceTotal / (o.paidInvoiceTotal + o.outstandingInvoiceTotal) * 100) : 0;
+	return /* @__PURE__ */ m("div", {
+		className: "space-y-6",
 		children: [
-			/* @__PURE__ */ h("div", {
-				className: "relative overflow-hidden rounded-card -mx-2 px-2 pt-1",
-				children: [/* @__PURE__ */ m(g, { intensity: "subtle" }), /* @__PURE__ */ h("div", {
-					className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-					children: [/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("h1", {
-						className: "text-2xl font-semibold tracking-tight",
-						children: /* @__PURE__ */ m(T, { children: "Analytics" })
-					}), /* @__PURE__ */ m("p", {
-						className: "text-sm text-text-secondary",
-						children: "Insights and performance metrics for your professional services."
-					})] }), /* @__PURE__ */ h("div", {
-						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ m("div", {
-							className: "flex rounded border border-border-seam overflow-hidden",
-							children: [
-								"1m",
-								"3m",
-								"6m",
-								"1y"
-							].map((e) => /* @__PURE__ */ m("button", {
-								onClick: () => I(e),
-								"aria-pressed": F === e,
-								className: `px-3 py-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${F === e ? "bg-action-primary-bg text-action-primary-text" : "text-text-secondary hover:bg-bg-sunken/50"}`,
-								children: e.toUpperCase()
-							}, e))
-						}), /* @__PURE__ */ h(v, {
-							variant: "outline",
-							size: "sm",
-							children: [/* @__PURE__ */ m(c, { className: "mr-2 h-4 w-4" }), " Export"]
-						})]
-					})]
-				})]
-			}),
-			/* @__PURE__ */ m(D, {
-				icon: /* @__PURE__ */ m(a, { className: "h-4 w-4" }),
-				children: "Understand how your professional services are performing. Track revenue and client growth over time, see which services and regions drive the most demand, and export the numbers — so you can double down on what works and plan where to grow next."
+			/* @__PURE__ */ p(i, {
+				title: "Analytics",
+				subtitle: "Real, live metrics across the practice — no estimates, straight from your records.",
+				icon: /* @__PURE__ */ p(l, { className: "h-6 w-6" })
 			}),
-			/* @__PURE__ */ m(E, {
-				storageKey: "proserviceworld-analytics",
-				steps: [
-					{
-						id: "revenue",
-						label: "Inspect revenue performance",
-						description: "Open the Revenue tab to see month-over-month growth.",
-						icon: /* @__PURE__ */ m(s, { className: "h-4 w-4" }),
-						onClick: () => P("revenue")
-					},
-					{
-						id: "services",
-						label: "Find your top services",
-						description: "See which services attract the most bookings.",
-						icon: /* @__PURE__ */ m(n, { className: "h-4 w-4" }),
-						onClick: () => P("services")
-					},
-					{
-						id: "clients",
-						label: "Track client acquisition",
-						description: "Review client growth and geographic reach.",
-						icon: /* @__PURE__ */ m(p, { className: "h-4 w-4" }),
-						onClick: () => P("clients")
-					}
+			/* @__PURE__ */ m("div", {
+				className: "grid grid-cols-2 gap-3 lg:grid-cols-4",
+				children: [
+					/* @__PURE__ */ p(r, {
+						label: "Collected revenue",
+						value: c(o.paidInvoiceTotal),
+						icon: /* @__PURE__ */ p(f, { className: "h-4 w-4" }),
+						tone: "success"
+					}),
+					/* @__PURE__ */ p(r, {
+						label: "Collection rate",
+						value: `${C}%`,
+						hint: `${c(o.outstandingInvoiceTotal)} outstanding`,
+						icon: /* @__PURE__ */ p(d, { className: "h-4 w-4" }),
+						tone: "accent"
+					}),
+					/* @__PURE__ */ p(r, {
+						label: "Utilization",
+						value: `${S}%`,
+						hint: `${s(o.billedHours)} of ${s(x)}`,
+						icon: /* @__PURE__ */ p(u, { className: "h-4 w-4" }),
+						tone: "info"
+					}),
+					/* @__PURE__ */ p(r, {
+						label: "Active engagements",
+						value: o.activeEngagements,
+						icon: /* @__PURE__ */ p(l, { className: "h-4 w-4" })
+					})
 				]
 			}),
-			/* @__PURE__ */ m("div", {
-				className: "flex flex-wrap gap-1 border-b border-border-seam",
-				children: L.map(({ key: e, label: t, icon: n }) => /* @__PURE__ */ h("button", {
-					onClick: () => P(e),
-					"aria-pressed": N === e,
-					className: `flex items-center gap-2 border-b-2 px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${N === e ? "border-action-primary-bg text-text-primary" : "border-transparent text-text-secondary hover:text-text-primary"}`,
-					children: [/* @__PURE__ */ m(n, { className: "h-4 w-4" }), t]
-				}, e))
+			/* @__PURE__ */ p(a, {
+				title: "Revenue by month",
+				description: "Invoiced totals across recent months.",
+				children: /* @__PURE__ */ p(g, { data: o.revenueByMonth })
 			}),
 			/* @__PURE__ */ m("div", {
-				className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-5",
-				children: O.map((e, t) => /* @__PURE__ */ h(w, {
-					treatment: t === 0 ? "glass" : "metric",
-					glow: t === 0,
-					className: "border-border-seam",
-					children: [
-						/* @__PURE__ */ h("div", {
-							className: "flex items-center justify-between",
-							children: [/* @__PURE__ */ m("p", {
-								className: "text-xs font-medium text-text-secondary",
-								children: e.label
-							}), R(e.changeType)]
-						}),
-						/* @__PURE__ */ m("p", {
-							className: "mt-1 text-2xl font-bold tabular-nums",
-							children: e.value
-						}),
-						/* @__PURE__ */ h("p", {
-							className: `mt-0.5 text-xs ${e.changeType === "positive" ? "text-status-success-text" : e.changeType === "negative" ? "text-status-error-text" : "text-text-muted"}`,
-							children: [e.change, " from last period"]
-						})
-					]
-				}, t))
+				className: "grid grid-cols-1 gap-4 lg:grid-cols-3",
+				children: [
+					/* @__PURE__ */ p(a, {
+						title: "Engagements",
+						children: /* @__PURE__ */ p(_, { items: o.engagementsByStatus })
+					}),
+					/* @__PURE__ */ p(a, {
+						title: "Matters",
+						children: /* @__PURE__ */ p(_, { items: o.mattersByStatus })
+					}),
+					/* @__PURE__ */ p(a, {
+						title: "Invoices",
+						children: /* @__PURE__ */ p(_, { items: o.invoicesByStatus })
+					})
+				]
 			}),
-			N === "overview" && /* @__PURE__ */ h("div", {
-				className: "grid gap-6 lg:grid-cols-2",
-				children: [/* @__PURE__ */ h(C, { children: [/* @__PURE__ */ h("div", {
-					className: "flex items-center justify-between mb-4",
-					children: [/* @__PURE__ */ m("h2", {
-						className: "text-base font-semibold tracking-tight",
-						children: "Revenue Trend"
-					}), /* @__PURE__ */ m(_, {
-						variant: "secondary",
-						children: "Last 6 months"
-					})]
-				}), /* @__PURE__ */ m("div", {
-					className: "space-y-3",
-					children: k.map((e) => /* @__PURE__ */ h("div", {
-						className: "flex items-center gap-3",
-						children: [
-							/* @__PURE__ */ m("span", {
-								className: "w-10 text-xs text-text-secondary",
-								children: e.name
-							}),
-							/* @__PURE__ */ h("div", {
-								className: "relative flex-1 h-6 bg-bg-sunken rounded overflow-hidden",
-								children: [e.prev !== void 0 && /* @__PURE__ */ m("div", {
-									className: "absolute h-6 bg-text-muted/15 rounded",
-									style: { width: `${e.prev / z * 100}%` }
-								}), /* @__PURE__ */ m("div", {
-									className: "relative h-6 bg-action-primary-bg rounded shadow-[var(--shadow-glow)]",
-									style: { width: `${e.value / z * 100}%` }
-								})]
-							}),
-							/* @__PURE__ */ h("span", {
-								className: "w-20 text-right text-xs font-medium tabular-nums",
-								children: [
-									"$",
-									(e.value / 1e3).toFixed(1),
-									"k"
-								]
-							})
-						]
-					}, e.name))
-				})] }), /* @__PURE__ */ h(y, {
-					className: "border-border-seam",
-					children: [/* @__PURE__ */ m(x, { children: /* @__PURE__ */ h("div", {
-						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ m(S, {
-							className: "text-base",
-							children: "Client Growth"
-						}), /* @__PURE__ */ m(_, {
-							variant: "secondary",
-							children: "Monthly"
-						})]
-					}) }), /* @__PURE__ */ m(b, {
-						className: "space-y-3",
-						children: A.map((e) => /* @__PURE__ */ h("div", {
-							className: "flex items-center gap-3",
-							children: [
-								/* @__PURE__ */ m("span", {
-									className: "w-10 text-xs text-text-secondary",
-									children: e.name
-								}),
-								/* @__PURE__ */ m("div", {
-									className: "flex-1 h-6 bg-bg-sunken rounded overflow-hidden",
-									children: /* @__PURE__ */ m("div", {
-										className: "h-6 bg-accent-blue rounded",
-										style: { width: `${e.value / B * 100}%` }
-									})
-								}),
-								/* @__PURE__ */ m("span", {
-									className: "w-12 text-right text-xs font-medium tabular-nums",
-									children: e.value
-								})
-							]
-						}, e.name))
+			/* @__PURE__ */ p(a, {
+				title: "Time & billing",
+				children: /* @__PURE__ */ m("div", {
+					className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+					children: [/* @__PURE__ */ p(v, {
+						label: "Billed hours",
+						value: o.billedHours,
+						total: x,
+						tone: "accent"
+					}), /* @__PURE__ */ p(v, {
+						label: "Unbilled hours",
+						value: o.unbilledHours,
+						total: x,
+						tone: "warning"
 					})]
-				})]
-			}),
-			N === "revenue" && /* @__PURE__ */ m("div", {
-				className: "space-y-6",
-				children: /* @__PURE__ */ h(y, {
-					className: "border-border-seam",
-					children: [/* @__PURE__ */ m(x, { children: /* @__PURE__ */ m(S, {
-						className: "text-base",
-						children: "Revenue Breakdown"
-					}) }), /* @__PURE__ */ m(b, { children: /* @__PURE__ */ m("div", {
-						className: "space-y-4",
-						children: k.map((e) => {
-							let t = e.prev ? ((e.value - e.prev) / e.prev * 100).toFixed(1) : "0", n = e.prev ? e.value >= e.prev : !0;
-							return /* @__PURE__ */ h("div", {
-								className: "flex items-center justify-between rounded-lg border border-border-seam p-4 transition-shadow hover:shadow-pop",
-								children: [/* @__PURE__ */ h("div", {
-									className: "flex items-center gap-4",
-									children: [/* @__PURE__ */ m("div", {
-										className: "flex h-10 w-10 items-center justify-center rounded-lg bg-accent-soft",
-										children: /* @__PURE__ */ m(o, { className: "h-5 w-5 text-text-primary" })
-									}), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ h("p", {
-										className: "font-medium",
-										children: [e.name, " 2025"]
-									}), /* @__PURE__ */ h("p", {
-										className: "text-sm text-text-secondary tabular-nums",
-										children: [
-											"Previous: $",
-											((e.prev ?? 0) / 1e3).toFixed(1),
-											"k"
-										]
-									})] })]
-								}), /* @__PURE__ */ h("div", {
-									className: "text-right",
-									children: [/* @__PURE__ */ h("p", {
-										className: "text-lg font-bold tabular-nums",
-										children: [
-											"$",
-											(e.value / 1e3).toFixed(1),
-											"k"
-										]
-									}), /* @__PURE__ */ h("p", {
-										className: `flex items-center justify-end gap-1 text-xs tabular-nums ${n ? "text-status-success-text" : "text-status-error-text"}`,
-										children: [
-											m(n ? i : r, { className: "h-3 w-3" }),
-											t,
-											"%"
-										]
-									})]
-								})]
-							}, e.name);
-						})
-					}) })]
 				})
-			}),
-			N === "clients" && /* @__PURE__ */ h("div", {
-				className: "space-y-6",
-				children: [/* @__PURE__ */ h(y, {
-					className: "border-border-seam",
-					children: [/* @__PURE__ */ m(x, { children: /* @__PURE__ */ m(S, {
-						className: "text-base",
-						children: "Client Acquisition"
-					}) }), /* @__PURE__ */ m(b, {
-						className: "space-y-3",
-						children: A.map((e, t) => {
-							let n = t > 0 ? A[t - 1]?.value ?? 0 : 0, r = n > 0 ? ((e.value - n) / n * 100).toFixed(0) : "N/A";
-							return /* @__PURE__ */ h("div", {
-								className: "flex items-center gap-4 rounded-lg border border-border-seam p-3",
-								children: [/* @__PURE__ */ h("div", {
-									className: "flex-1",
-									children: [/* @__PURE__ */ h("div", {
-										className: "flex items-center justify-between",
-										children: [/* @__PURE__ */ m("span", {
-											className: "font-medium",
-											children: e.name
-										}), /* @__PURE__ */ h("span", {
-											className: "text-lg font-bold tabular-nums",
-											children: [e.value, " clients"]
-										})]
-									}), /* @__PURE__ */ m("div", {
-										className: "mt-2 h-2 overflow-hidden rounded-full bg-bg-sunken",
-										children: /* @__PURE__ */ m("div", {
-											className: "h-2 rounded-full bg-accent-blue",
-											style: { width: `${e.value / B * 100}%` }
-										})
-									})]
-								}), /* @__PURE__ */ m(_, {
-									variant: "secondary",
-									className: "text-xs tabular-nums",
-									children: typeof r == "string" ? r : `+${r}%`
-								})]
-							}, e.name);
-						})
-					})]
-				}), /* @__PURE__ */ h(y, {
-					className: "border-border-seam",
-					children: [/* @__PURE__ */ m(x, { children: /* @__PURE__ */ h("div", {
-						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ m(l, { className: "h-5 w-5 text-text-secondary" }), /* @__PURE__ */ m(S, {
-							className: "text-base",
-							children: "Geographic Distribution"
-						})]
-					}) }), /* @__PURE__ */ m(b, { children: /* @__PURE__ */ m("div", {
-						className: "overflow-x-auto",
-						children: /* @__PURE__ */ h("table", {
-							className: "w-full text-sm",
-							children: [/* @__PURE__ */ m("thead", { children: /* @__PURE__ */ h("tr", {
-								className: "border-b border-border-seam text-left text-text-secondary",
-								children: [
-									/* @__PURE__ */ m("th", {
-										className: "p-3 font-medium",
-										children: "Country"
-									}),
-									/* @__PURE__ */ m("th", {
-										className: "p-3 text-right font-medium",
-										children: "Clients"
-									}),
-									/* @__PURE__ */ m("th", {
-										className: "p-3 text-right font-medium",
-										children: "Revenue"
-									}),
-									/* @__PURE__ */ m("th", {
-										className: "p-3 font-medium",
-										children: "Distribution"
-									})
-								]
-							}) }), /* @__PURE__ */ m("tbody", { children: M.map((e) => {
-								let t = M.reduce((e, t) => e + t.clients, 0), n = Math.round(e.clients / t * 100);
-								return /* @__PURE__ */ h("tr", {
-									className: "border-b border-border-seam transition-colors hover:bg-bg-sunken/50",
-									children: [
-										/* @__PURE__ */ m("td", {
-											className: "p-3 font-medium",
-											children: e.country
-										}),
-										/* @__PURE__ */ m("td", {
-											className: "p-3 text-right tabular-nums",
-											children: e.clients
-										}),
-										/* @__PURE__ */ h("td", {
-											className: "p-3 text-right tabular-nums",
-											children: [
-												"$",
-												(e.revenue / 1e3).toFixed(0),
-												"k"
-											]
-										}),
-										/* @__PURE__ */ m("td", {
-											className: "p-3",
-											children: /* @__PURE__ */ h("div", {
-												className: "flex items-center gap-2",
-												children: [/* @__PURE__ */ m("div", {
-													className: "h-2 flex-1 overflow-hidden rounded-full bg-bg-sunken",
-													children: /* @__PURE__ */ m("div", {
-														className: "h-2 rounded-full bg-action-primary-bg",
-														style: { width: `${n}%` }
-													})
-												}), /* @__PURE__ */ h("span", {
-													className: "w-10 text-right text-xs text-text-secondary tabular-nums",
-													children: [n, "%"]
-												})]
-											})
-										})
-									]
-								}, e.country);
-							}) })]
-						})
-					}) })]
-				})]
-			}),
-			N === "services" && /* @__PURE__ */ h(y, {
-				className: "border-border-seam",
-				children: [/* @__PURE__ */ m(x, { children: /* @__PURE__ */ m(S, {
-					className: "text-base",
-					children: "Service Performance (Total Bookings)"
-				}) }), /* @__PURE__ */ m(b, {
-					className: "space-y-3",
-					children: [...j].sort((e, t) => t.value - e.value).map((e, t) => /* @__PURE__ */ h("div", {
-						className: "flex items-center gap-4",
-						children: [/* @__PURE__ */ h("span", {
-							className: "w-6 text-sm font-medium text-text-secondary tabular-nums",
-							children: ["#", t + 1]
-						}), /* @__PURE__ */ h("div", {
-							className: "flex-1",
-							children: [/* @__PURE__ */ h("div", {
-								className: "flex items-center justify-between",
-								children: [/* @__PURE__ */ m("span", {
-									className: "text-sm font-medium",
-									children: e.name
-								}), /* @__PURE__ */ m("span", {
-									className: "text-sm font-bold tabular-nums",
-									children: e.value
-								})]
-							}), /* @__PURE__ */ m("div", {
-								className: "mt-1 h-3 overflow-hidden rounded-full bg-bg-sunken",
-								children: /* @__PURE__ */ m("div", {
-									className: "h-3 rounded-full bg-action-primary-bg transition-all",
-									style: { width: `${e.value / V * 100}%` }
-								})
-							})]
-						})]
-					}, e.name))
-				})]
-			}),
-			N === "performance" && /* @__PURE__ */ h("div", {
-				className: "grid gap-6 lg:grid-cols-2",
-				children: [/* @__PURE__ */ h(y, {
-					className: "border-border-seam",
-					children: [/* @__PURE__ */ m(x, { children: /* @__PURE__ */ m(S, {
-						className: "text-base",
-						children: "Monthly Revenue vs Previous"
-					}) }), /* @__PURE__ */ h(b, {
-						className: "space-y-3",
-						children: [k.map((e) => /* @__PURE__ */ h("div", {
-							className: "space-y-1",
-							children: [/* @__PURE__ */ h("div", {
-								className: "flex items-center justify-between text-xs",
-								children: [/* @__PURE__ */ m("span", {
-									className: "font-medium",
-									children: e.name
-								}), /* @__PURE__ */ h("span", {
-									className: "text-text-secondary tabular-nums",
-									children: [
-										"$",
-										(e.value / 1e3).toFixed(1),
-										"k vs $",
-										((e.prev ?? 0) / 1e3).toFixed(1),
-										"k"
-									]
-								})]
-							}), /* @__PURE__ */ h("div", {
-								className: "flex gap-1",
-								children: [/* @__PURE__ */ m("div", {
-									className: "h-4 rounded bg-action-primary-bg/30",
-									style: { width: `${(e.prev ?? 0) / z * 100}%` }
-								}), /* @__PURE__ */ m("div", {
-									className: "h-4 rounded bg-action-primary-bg",
-									style: { width: `${e.value / z * 100 - (e.prev ?? 0) / z * 100}%` }
-								})]
-							})]
-						}, e.name)), /* @__PURE__ */ h("div", {
-							className: "mt-4 flex items-center gap-4 text-xs",
-							children: [/* @__PURE__ */ h("span", {
-								className: "flex items-center gap-1",
-								children: [/* @__PURE__ */ m("div", { className: "h-3 w-3 rounded bg-action-primary-bg/30" }), " Previous"]
-							}), /* @__PURE__ */ h("span", {
-								className: "flex items-center gap-1",
-								children: [/* @__PURE__ */ m("div", { className: "h-3 w-3 rounded bg-action-primary-bg" }), " Current"]
-							})]
-						})]
-					})]
-				}), /* @__PURE__ */ h(y, {
-					className: "border-border-seam",
-					children: [/* @__PURE__ */ m(x, { children: /* @__PURE__ */ m(S, {
-						className: "text-base",
-						children: "Top Performing Services"
-					}) }), /* @__PURE__ */ m(b, { children: /* @__PURE__ */ m("div", {
-						className: "space-y-3",
-						children: [...j].sort((e, t) => t.value - e.value).slice(0, 5).map((e, t) => /* @__PURE__ */ h("div", {
-							className: "flex items-center justify-between rounded-lg border border-border-seam p-3",
-							children: [/* @__PURE__ */ h("div", {
-								className: "flex items-center gap-3",
-								children: [/* @__PURE__ */ m("div", {
-									className: `flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold tabular-nums ${t === 0 ? "bg-status-warning-bg-subtle text-status-warning-text" : t === 1 ? "bg-bg-sunken text-text-secondary" : t === 2 ? "bg-accent-soft text-text-primary" : "bg-bg-sunken text-text-secondary"}`,
-									children: t + 1
-								}), /* @__PURE__ */ m("span", {
-									className: "font-medium text-sm",
-									children: e.name
-								})]
-							}), /* @__PURE__ */ h(_, {
-								variant: "secondary",
-								children: [e.value, " bookings"]
-							})]
-						}, e.name))
-					}) })]
-				})]
 			})
 		]
 	});
-}
+}, g = ({ data: e }) => {
+	if (!e.length) return /* @__PURE__ */ p("p", {
+		className: "text-sm text-text-tertiary",
+		children: "No invoiced revenue yet."
+	});
+	let t = Math.max(...e.map((e) => e.amount), 1);
+	return /* @__PURE__ */ p("div", {
+		className: "flex h-52 items-end gap-2",
+		children: e.map((e) => /* @__PURE__ */ m("div", {
+			className: "flex flex-1 flex-col items-center gap-2",
+			children: [
+				/* @__PURE__ */ p("span", {
+					className: "text-[10px] text-text-tertiary",
+					children: c(e.amount)
+				}),
+				/* @__PURE__ */ p("div", {
+					className: "flex w-full flex-1 items-end",
+					children: /* @__PURE__ */ p("div", {
+						className: "w-full rounded-t bg-accent",
+						style: { height: `${Math.max(e.amount / t * 100, 2)}%` }
+					})
+				}),
+				/* @__PURE__ */ p("span", {
+					className: "text-[10px] text-text-tertiary",
+					children: e.month
+				})
+			]
+		}, e.month))
+	});
+}, _ = ({ items: e }) => {
+	if (!e.length) return /* @__PURE__ */ p("p", {
+		className: "text-sm text-text-tertiary",
+		children: "No records yet."
+	});
+	let t = e.reduce((e, t) => e + t.count, 0) || 1;
+	return /* @__PURE__ */ p("ul", {
+		className: "space-y-2.5",
+		children: e.map((e) => /* @__PURE__ */ m("li", {
+			className: "flex items-center gap-3",
+			children: [
+				/* @__PURE__ */ p("div", {
+					className: "w-28 shrink-0",
+					children: /* @__PURE__ */ p(o, { status: e.status })
+				}),
+				/* @__PURE__ */ p("div", {
+					className: "h-2 flex-1 overflow-hidden rounded-full bg-bg-sunken",
+					children: /* @__PURE__ */ p("div", {
+						className: "h-full rounded-full bg-accent",
+						style: { width: `${e.count / t * 100}%` }
+					})
+				}),
+				/* @__PURE__ */ p("span", {
+					className: "w-8 text-right text-sm font-medium text-text-primary",
+					children: e.count
+				})
+			]
+		}, e.status))
+	});
+}, v = ({ label: e, value: t, total: n, tone: r }) => {
+	let i = n > 0 ? Math.round(t / n * 100) : 0;
+	return /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ m("div", {
+		className: "mb-1 flex items-center justify-between text-sm",
+		children: [/* @__PURE__ */ p("span", {
+			className: "text-text-secondary",
+			children: e
+		}), /* @__PURE__ */ m("span", {
+			className: "font-medium text-text-primary",
+			children: [
+				s(t),
+				" · ",
+				i,
+				"%"
+			]
+		})]
+	}), /* @__PURE__ */ p("div", {
+		className: "h-2.5 overflow-hidden rounded-full bg-bg-sunken",
+		children: /* @__PURE__ */ p("div", {
+			className: r === "accent" ? "h-full rounded-full bg-accent" : "h-full rounded-full bg-status-warning-text",
+			style: { width: `${i}%` }
+		})
+	})] });
+};
 //#endregion
-export { O as AnalyticsPage };
+export { h as AnalyticsPage };
 
 //# sourceMappingURL=AnalyticsPage.js.map