@burdenoff/microfe-proserviceworld 2026.525.1 → 2026.625.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 } 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 E() {
+	let { analyticsMetrics: E, revenueData: D, clientData: O, servicePerformance: k, geographicData: A } = e(), [j, M] = t("overview"), [N, P] = t("6m"), F = [
 		{
 			key: "overview",
 			label: "Overview",
@@ -31,102 +31,109 @@ 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));
+	], I = (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" }), L = Math.max(...D.map((e) => e.value)), R = Math.max(...O.map((e) => e.value)), z = Math.max(...k.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-muted-foreground",
-					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-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted/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: () => P(e),
+								"aria-pressed": N === 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 ${N === 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("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-muted-foreground hover:text-foreground"}`,
+				className: "flex flex-wrap gap-1 border-b border-border-seam",
+				children: F.map(({ key: e, label: t, icon: n }) => /* @__PURE__ */ h("button", {
+					onClick: () => M(e),
+					"aria-pressed": j === 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 ${j === 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: E.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-muted-foreground",
+								className: "text-xs font-medium text-text-secondary",
 								children: e.label
-							}), M(e.changeType)]
+							}), I(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", {
+			j === "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: D.map((e) => /* @__PURE__ */ h("div", {
 						className: "flex items-center gap-3",
 						children: [
 							/* @__PURE__ */ m("span", {
-								className: "w-10 text-xs text-muted-foreground",
+								className: "w-10 text-xs text-text-secondary",
 								children: e.name
 							}),
 							/* @__PURE__ */ h("div", {
-								className: "relative flex-1 h-6 bg-muted rounded overflow-hidden",
+								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 / L * 100}%` }
 								}), /* @__PURE__ */ m("div", {
-									className: "relative h-6 bg-primary rounded",
-									style: { width: `${e.value / N * 100}%` }
+									className: "relative h-6 bg-action-primary-bg rounded shadow-[var(--shadow-glow)]",
+									style: { width: `${e.value / L * 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 +142,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-muted-foreground",
-								children: e.name
-							}),
-							/* @__PURE__ */ m("div", {
-								className: "flex-1 h-6 bg-muted 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: O.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 / R * 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", {
+			j === "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-primary/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-muted-foreground",
-									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: D.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", {
+			j === "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: O.map((e, t) => {
+							let n = t > 0 ? O[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 / R * 100}%` }
+										})
 									})]
-								}), /* @__PURE__ */ m("div", {
-									className: "mt-2 h-2 overflow-hidden rounded-full bg-muted",
-									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-muted-foreground" }), /* @__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-muted-foreground",
-							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-muted/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-muted",
-												children: /* @__PURE__ */ m("div", {
-													className: "h-2 rounded-full bg-primary",
-													style: { width: `${n}%` }
-												})
-											}), /* @__PURE__ */ h("span", {
-												className: "w-10 text-right text-xs text-muted-foreground",
-												children: [n, "%"]
-											})]
-										})
+									/* @__PURE__ */ m("th", {
+										className: "p-3 font-medium",
+										children: "Distribution"
 									})
 								]
-							}, e.country);
-						}) })]
-					})
-				}) })] })]
+							}) }), /* @__PURE__ */ m("tbody", { children: A.map((e) => {
+								let t = A.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-muted-foreground",
-						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-muted",
-							children: /* @__PURE__ */ m("div", {
-								className: "h-3 rounded-full bg-primary 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, {
+			j === "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-muted-foreground",
-								children: [
-									"$",
-									(e.value / 1e3).toFixed(1),
-									"k vs $",
-									((e.prev ?? 0) / 1e3).toFixed(1),
-									"k"
-								]
-							})]
+					children: [...k].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-primary/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-primary",
-								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 / 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-primary/30" }), " Previous"]
-						}), /* @__PURE__ */ h("span", {
-							className: "flex items-center gap-1",
-							children: [/* @__PURE__ */ m("div", { className: "h-3 w-3 rounded bg-primary" }), " Current"]
+					}, e.name))
+				})]
+			}),
+			j === "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: [D.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) / L * 100}%` }
+								}), /* @__PURE__ */ m("div", {
+									className: "h-4 rounded bg-action-primary-bg",
+									style: { width: `${e.value / L * 100 - (e.prev ?? 0) / L * 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-muted text-muted-foreground"} 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: [...k].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 { E as AnalyticsPage };
 
 //# sourceMappingURL=AnalyticsPage.js.map