@burdenoff/microfe-proserviceworld 2026.624.1 → 2026.626.1

package/dist/proserviceworld/pages/AnalyticsPage.js

@@ -2,10 +2,10 @@ 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 { Badge as g, Button as _, Card as v, CardContent as y, CardHeader as b, CardTitle as x } from "@burdenoff/fe-libs/ui";
+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";
 //#region src/proserviceworld/pages/AnalyticsPage.tsx
-function S() {
-	let { analyticsMetrics: S, revenueData: C, clientData: w, servicePerformance: T, geographicData: E } = e(), [D, O] = t("overview"), [k, A] = t("6m"), j = [
+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",
@@ -31,84 +31,121 @@ function S() {
 			label: "Performance",
 			icon: f
 		}
-	], M = (e) => e === "positive" ? /* @__PURE__ */ m(f, { className: "h-4 w-4 text-green-500" }) : e === "negative" ? /* @__PURE__ */ m(d, { className: "h-4 w-4 text-red-500" }) : /* @__PURE__ */ m(u, { className: "h-4 w-4 text-gray-400" }), N = Math.max(...C.map((e) => e.value)), P = Math.max(...w.map((e) => e.value)), F = Math.max(...T.map((e) => e.value));
+	], 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",
+		className: "space-y-6 p-6 bg-bg-canvas min-h-screen",
 		children: [
 			/* @__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",
-					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",
-						children: [
-							"1m",
-							"3m",
-							"6m",
-							"1y"
-						].map((e) => /* @__PURE__ */ m("button", {
-							onClick: () => A(e),
-							className: `px-3 py-1 text-xs font-medium ${k === e ? "bg-action-primary-bg text-action-primary-text" : "text-text-secondary hover:bg-bg-sunken/50"}`,
-							children: e.toUpperCase()
-						}, e))
-					}), /* @__PURE__ */ h(_, {
-						variant: "outline",
-						size: "sm",
-						children: [/* @__PURE__ */ m(c, { className: "mr-2 h-4 w-4" }), " Export"]
+				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__ */ 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: "flex gap-1 border-b",
-				children: j.map(({ key: e, label: t, icon: n }) => /* @__PURE__ */ h("button", {
-					onClick: () => O(e),
-					className: `flex items-center gap-2 border-b-2 px-4 py-2 text-sm font-medium transition-colors ${D === e ? "border-primary text-primary" : "border-transparent text-text-secondary hover:text-text-primary"}`,
+				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__ */ m("div", {
 				className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-5",
-				children: S.map((e, t) => /* @__PURE__ */ m(v, { children: /* @__PURE__ */ h(y, {
-					className: "pt-4",
+				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
-							}), M(e.changeType)]
+							}), R(e.changeType)]
 						}),
 						/* @__PURE__ */ m("p", {
-							className: "mt-1 text-2xl font-bold",
+							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-green-600" : e.changeType === "negative" ? "text-red-600" : "text-gray-500"}`,
+							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))
+				}, t))
 			}),
-			D === "overview" && /* @__PURE__ */ h("div", {
+			N === "overview" && /* @__PURE__ */ h("div", {
 				className: "grid gap-6 lg:grid-cols-2",
-				children: [/* @__PURE__ */ h(v, { children: [/* @__PURE__ */ m(b, { children: /* @__PURE__ */ h("div", {
-					className: "flex items-center justify-between",
-					children: [/* @__PURE__ */ m(x, {
-						className: "text-base",
+				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(g, {
+					}), /* @__PURE__ */ m(_, {
 						variant: "secondary",
 						children: "Last 6 months"
 					})]
-				}) }), /* @__PURE__ */ m(y, {
+				}), /* @__PURE__ */ m("div", {
 					className: "space-y-3",
-					children: C.map((e) => /* @__PURE__ */ h("div", {
+					children: k.map((e) => /* @__PURE__ */ h("div", {
 						className: "flex items-center gap-3",
 						children: [
 							/* @__PURE__ */ m("span", {
@@ -118,15 +155,15 @@ function S() {
 							/* @__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-muted-foreground/10 rounded",
-									style: { width: `${e.prev / N * 100}%` }
+									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",
-									style: { width: `${e.value / N * 100}%` }
+									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",
+								className: "w-20 text-right text-xs font-medium tabular-nums",
 								children: [
 									"$",
 									(e.value / 1e3).toFixed(1),
@@ -135,299 +172,320 @@ function S() {
 							})
 						]
 					}, e.name))
-				})] }), /* @__PURE__ */ h(v, { children: [/* @__PURE__ */ m(b, { children: /* @__PURE__ */ h("div", {
-					className: "flex items-center justify-between",
-					children: [/* @__PURE__ */ m(x, {
-						className: "text-base",
-						children: "Client Growth"
-					}), /* @__PURE__ */ m(g, {
-						variant: "secondary",
-						children: "Monthly"
-					})]
-				}) }), /* @__PURE__ */ m(y, {
-					className: "space-y-3",
-					children: w.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-blue-500 rounded",
-									style: { width: `${e.value / P * 100}%` }
+				})] }), /* @__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
 								})
-							}),
-							/* @__PURE__ */ m("span", {
-								className: "w-12 text-right text-xs font-medium",
-								children: e.value
-							})
-						]
-					}, e.name))
-				})] })]
+							]
+						}, e.name))
+					})]
+				})]
 			}),
-			D === "revenue" && /* @__PURE__ */ m("div", {
+			N === "revenue" && /* @__PURE__ */ m("div", {
 				className: "space-y-6",
-				children: /* @__PURE__ */ h(v, { children: [/* @__PURE__ */ m(b, { children: /* @__PURE__ */ m(x, {
-					className: "text-base",
-					children: "Revenue Breakdown"
-				}) }), /* @__PURE__ */ m(y, { children: /* @__PURE__ */ m("div", {
-					className: "space-y-4",
-					children: C.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 p-4",
-							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-action-primary-bg/10",
-									children: /* @__PURE__ */ m(o, { className: "h-5 w-5 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",
-									children: [
-										"Previous: $",
-										((e.prev ?? 0) / 1e3).toFixed(1),
-										"k"
-									]
-								})] })]
-							}), /* @__PURE__ */ h("div", {
-								className: "text-right",
-								children: [/* @__PURE__ */ h("p", {
-									className: "text-lg font-bold",
-									children: [
-										"$",
-										(e.value / 1e3).toFixed(1),
-										"k"
-									]
-								}), /* @__PURE__ */ h("p", {
-									className: `flex items-center gap-1 text-xs ${n ? "text-green-600" : "text-red-600"}`,
-									children: [
-										m(n ? i : r, { className: "h-3 w-3" }),
-										t,
-										"%"
-									]
+				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);
-					})
-				}) })] })
+							}, e.name);
+						})
+					}) })]
+				})
 			}),
-			D === "clients" && /* @__PURE__ */ h("div", {
+			N === "clients" && /* @__PURE__ */ h("div", {
 				className: "space-y-6",
-				children: [/* @__PURE__ */ h(v, { children: [/* @__PURE__ */ m(b, { children: /* @__PURE__ */ m(x, {
-					className: "text-base",
-					children: "Client Acquisition"
-				}) }), /* @__PURE__ */ m(y, {
-					className: "space-y-3",
-					children: w.map((e, t) => {
-						let n = t > 0 ? w[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 p-3",
-							children: [/* @__PURE__ */ h("div", {
-								className: "flex-1",
+				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 items-center justify-between",
-									children: [/* @__PURE__ */ m("span", {
-										className: "font-medium",
-										children: e.name
-									}), /* @__PURE__ */ h("span", {
-										className: "text-lg font-bold",
-										children: [e.value, " clients"]
+									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("div", {
-									className: "mt-2 h-2 overflow-hidden rounded-full bg-bg-sunken",
-									children: /* @__PURE__ */ m("div", {
-										className: "h-2 rounded-full bg-blue-500",
-										style: { width: `${e.value / P * 100}%` }
-									})
+								}), /* @__PURE__ */ m(_, {
+									variant: "secondary",
+									className: "text-xs tabular-nums",
+									children: typeof r == "string" ? r : `+${r}%`
 								})]
-							}), /* @__PURE__ */ m(g, {
-								variant: "secondary",
-								className: "text-xs",
-								children: typeof r == "string" ? r : `+${r}%`
-							})]
-						}, e.name);
-					})
-				})] }), /* @__PURE__ */ h(v, { children: [/* @__PURE__ */ m(b, { children: /* @__PURE__ */ h("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ m(l, { className: "h-5 w-5 text-text-secondary" }), /* @__PURE__ */ m(x, {
-						className: "text-base",
-						children: "Geographic Distribution"
+							}, e.name);
+						})
 					})]
-				}) }), /* @__PURE__ */ m(y, { 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 text-left text-text-secondary",
-							children: [
-								/* @__PURE__ */ m("th", {
-									className: "p-3",
-									children: "Country"
-								}),
-								/* @__PURE__ */ m("th", {
-									className: "p-3 text-right",
-									children: "Clients"
-								}),
-								/* @__PURE__ */ m("th", {
-									className: "p-3 text-right",
-									children: "Revenue"
-								}),
-								/* @__PURE__ */ m("th", {
-									className: "p-3",
-									children: "Distribution"
-								})
-							]
-						}) }), /* @__PURE__ */ m("tbody", { children: E.map((e) => {
-							let t = E.reduce((e, t) => e + t.clients, 0), n = Math.round(e.clients / t * 100);
-							return /* @__PURE__ */ h("tr", {
-								className: "border-b hover:bg-bg-sunken/50",
+				}), /* @__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("td", {
+									/* @__PURE__ */ m("th", {
 										className: "p-3 font-medium",
-										children: e.country
+										children: "Country"
 									}),
-									/* @__PURE__ */ m("td", {
-										className: "p-3 text-right",
-										children: e.clients
+									/* @__PURE__ */ m("th", {
+										className: "p-3 text-right font-medium",
+										children: "Clients"
 									}),
-									/* @__PURE__ */ h("td", {
-										className: "p-3 text-right",
-										children: [
-											"$",
-											(e.revenue / 1e3).toFixed(0),
-											"k"
-										]
+									/* @__PURE__ */ m("th", {
+										className: "p-3 text-right font-medium",
+										children: "Revenue"
 									}),
-									/* @__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",
-												children: [n, "%"]
-											})]
-										})
+									/* @__PURE__ */ m("th", {
+										className: "p-3 font-medium",
+										children: "Distribution"
 									})
 								]
-							}, e.country);
-						}) })]
-					})
-				}) })] })]
+							}) }), /* @__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);
+							}) })]
+						})
+					}) })]
+				})]
 			}),
-			D === "services" && /* @__PURE__ */ h(v, { children: [/* @__PURE__ */ m(b, { children: /* @__PURE__ */ m(x, {
-				className: "text-base",
-				children: "Service Performance (Total Bookings)"
-			}) }), /* @__PURE__ */ m(y, {
-				className: "space-y-3",
-				children: [...T].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",
-						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",
-								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 / F * 100}%` }
-							})
-						})]
-					})]
-				}, e.name))
-			})] }),
-			D === "performance" && /* @__PURE__ */ h("div", {
-				className: "grid gap-6 lg:grid-cols-2",
-				children: [/* @__PURE__ */ h(v, { children: [/* @__PURE__ */ m(b, { children: /* @__PURE__ */ m(x, {
+			N === "services" && /* @__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(y, {
+					children: "Service Performance (Total Bookings)"
+				}) }), /* @__PURE__ */ m(b, {
 					className: "space-y-3",
-					children: [C.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",
-								children: [
-									"$",
-									(e.value / 1e3).toFixed(1),
-									"k vs $",
-									((e.prev ?? 0) / 1e3).toFixed(1),
-									"k"
-								]
-							})]
+					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 gap-1",
-							children: [/* @__PURE__ */ m("div", {
-								className: "h-4 rounded bg-action-primary-bg/30",
-								style: { width: `${(e.prev ?? 0) / N * 100}%` }
+							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: "h-4 rounded bg-action-primary-bg",
-								style: { width: `${e.value / N * 100 - (e.prev ?? 0) / N * 100}%` }
+								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)), /* @__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"]
+					}, 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(v, { children: [/* @__PURE__ */ m(b, { children: /* @__PURE__ */ m(x, {
-					className: "text-base",
-					children: "Top Performing Services"
-				}) }), /* @__PURE__ */ m(y, { children: /* @__PURE__ */ m("div", {
-					className: "space-y-3",
-					children: [...T].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 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 ${t === 0 ? "bg-yellow-100 text-yellow-700" : t === 1 ? "bg-gray-100 text-gray-600" : t === 2 ? "bg-orange-100 text-orange-600" : "bg-bg-sunken text-text-secondary"} text-sm font-bold`,
-								children: t + 1
-							}), /* @__PURE__ */ m("span", {
-								className: "font-medium text-sm",
-								children: e.name
+				}), /* @__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"]
 							})]
-						}), /* @__PURE__ */ h(g, {
-							variant: "secondary",
-							children: [e.value, " bookings"]
-						})]
-					}, e.name))
-				}) })] })]
+						}, e.name))
+					}) })]
+				})]
 			})
 		]
 	});
 }
 //#endregion
-export { S as AnalyticsPage };
+export { O as AnalyticsPage };
 
 //# sourceMappingURL=AnalyticsPage.js.map