@burdenoff/microfe-proserviceworld 2026.624.1 → 2026.626.1

package/dist/proserviceworld/pages/AdminReportsPage.js

@@ -2,10 +2,10 @@ import { useProServiceWorldStore as e } from "../store/proserviceworldStore.js";
 import { useState as t } from "react";
 import { AlertTriangle as n, ArrowUpRight as r, BarChart3 as i, Calendar as a, DollarSign as o, Download as s, FileText as c, Minus as l, Shield as u, ShoppingCart as d, Star as f, TrendingDown as p, TrendingUp as m, Users as h } from "lucide-react";
 import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { Badge as v, Button as y, Card as b, CardContent as x, CardHeader as S, CardTitle as C } from "@burdenoff/fe-libs/ui";
+import { AuroraBackground as v, Badge as y, CTAOverflowMenu as b, Card as x, CardContent as S, CardHeader as C, CardTitle as w, GlassCard as T, GradientText as E, NextSteps as D, PagePurpose as O } from "@burdenoff/fe-libs/ui";
 //#region src/proserviceworld/pages/AdminReportsPage.tsx
-function w() {
-	let { adminReportMetrics: w, revenueData: T, servicePerformance: E, geographicData: D, adminUsers: O } = e(), [k, A] = t("overview"), [j, M] = t("30d"), N = [
+function k() {
+	let { adminReportMetrics: k, revenueData: A, servicePerformance: j, geographicData: M, adminUsers: N } = e(), [P, F] = t("overview"), [I, L] = t("30d"), R = [
 		{
 			key: "overview",
 			label: "Overview",
@@ -26,59 +26,104 @@ function w() {
 			label: "Bookings",
 			icon: d
 		}
-	], P = (e) => e === "positive" ? /* @__PURE__ */ g(m, { className: "h-4 w-4 text-green-500" }) : e === "negative" ? /* @__PURE__ */ g(p, { className: "h-4 w-4 text-red-500" }) : /* @__PURE__ */ g(l, { className: "h-4 w-4 text-gray-400" }), F = [
+	], z = (e) => e === "positive" ? /* @__PURE__ */ g(m, { className: "h-4 w-4 text-status-success-text" }) : e === "negative" ? /* @__PURE__ */ g(p, { className: "h-4 w-4 text-status-error-text" }) : /* @__PURE__ */ g(l, { className: "h-4 w-4 text-text-secondary" }), B = (e) => e === "positive" ? "text-status-success-text" : e === "negative" ? "text-status-error-text" : "text-text-secondary", V = [
 		h,
 		u,
 		d,
 		o,
 		f,
 		n
-	], I = Math.max(...T.map((e) => e.value)), L = Math.max(...E.map((e) => e.value)), R = O.reduce((e, t) => (e[t.role] = (e[t.role] ?? 0) + 1, e), {}), z = O.reduce((e, t) => (e[t.status] = (e[t.status] ?? 0) + 1, e), {});
+	], H = Math.max(...A.map((e) => e.value)), U = Math.max(...j.map((e) => e.value)), W = N.reduce((e, t) => (e[t.role] = (e[t.role] ?? 0) + 1, e), {}), G = N.reduce((e, t) => (e[t.status] = (e[t.status] ?? 0) + 1, e), {}), K = {
+		client: "bg-chart-1",
+		provider: "bg-chart-2",
+		admin: "bg-chart-3",
+		team_member: "bg-chart-4"
+	}, q = {
+		active: "bg-status-success-text",
+		suspended: "bg-status-warning-text",
+		pending: "bg-chart-5",
+		banned: "bg-status-error-text"
+	};
 	return /* @__PURE__ */ _("div", {
-		className: "space-y-6 p-6",
+		className: "space-y-6 p-6 bg-bg-canvas min-h-screen",
 		children: [
 			/* @__PURE__ */ _("div", {
-				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-				children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("h1", {
-					className: "text-2xl font-semibold",
-					children: "Admin Reports"
-				}), /* @__PURE__ */ g("p", {
-					className: "text-sm text-text-secondary",
-					children: "Platform analytics, performance metrics, and operational reports."
-				})] }), /* @__PURE__ */ _("div", {
-					className: "flex gap-2",
-					children: [/* @__PURE__ */ _(y, {
-						variant: "outline",
-						size: "sm",
-						children: [/* @__PURE__ */ g(c, { className: "mr-2 h-4 w-4" }), " Generate Report"]
-					}), /* @__PURE__ */ _(y, {
-						variant: "outline",
-						size: "sm",
-						children: [/* @__PURE__ */ g(s, { className: "mr-2 h-4 w-4" }), " Export CSV"]
+				className: "relative overflow-hidden rounded-card -mx-2 px-2 pt-1",
+				children: [/* @__PURE__ */ g(v, { intensity: "subtle" }), /* @__PURE__ */ _("div", {
+					className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
+					children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("h1", {
+						className: "text-2xl font-semibold tracking-tight",
+						children: /* @__PURE__ */ g(E, { children: "Admin Reports" })
+					}), /* @__PURE__ */ g("p", {
+						className: "text-sm text-text-secondary",
+						children: "Platform analytics, performance metrics, and operational reports."
+					})] }), /* @__PURE__ */ g(b, {
+						primary: {
+							label: "Generate Report",
+							onSelect: () => {},
+							icon: /* @__PURE__ */ g(c, { className: "h-4 w-4" })
+						},
+						actions: [{
+							label: "Export CSV",
+							onSelect: () => {},
+							icon: /* @__PURE__ */ g(s, { className: "h-4 w-4" })
+						}]
 					})]
 				})]
 			}),
+			/* @__PURE__ */ g(O, {
+				icon: /* @__PURE__ */ g(i, { className: "h-4 w-4" }),
+				children: "The operational pulse of the platform. Track headline KPIs, dig into revenue, user, and booking trends across time ranges, and export reports for stakeholders — use it to spot what is growing, what needs attention, and where to act next."
+			}),
+			/* @__PURE__ */ g(D, {
+				storageKey: "proserviceworld-admin-reports",
+				steps: [
+					{
+						id: "revenue",
+						label: "Review revenue trends",
+						description: "Open the Revenue tab to compare months and spot growth or dips.",
+						icon: /* @__PURE__ */ g(o, { className: "h-4 w-4" }),
+						onClick: () => F("revenue")
+					},
+					{
+						id: "users",
+						label: "Check user health",
+						description: "See role and status distribution plus your top spenders.",
+						icon: /* @__PURE__ */ g(h, { className: "h-4 w-4" }),
+						onClick: () => F("users")
+					},
+					{
+						id: "export",
+						label: "Export a report",
+						description: "Generate a shareable report or CSV for stakeholders.",
+						icon: /* @__PURE__ */ g(s, { className: "h-4 w-4" }),
+						onClick: () => {}
+					}
+				]
+			}),
 			/* @__PURE__ */ _("div", {
 				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
 				children: [/* @__PURE__ */ g("div", {
-					className: "flex gap-1 border-b",
-					children: N.map(({ key: e, label: t, icon: n }) => /* @__PURE__ */ _("button", {
-						onClick: () => A(e),
-						className: `flex items-center gap-2 border-b-2 px-4 py-2 text-sm font-medium transition-colors ${k === e ? "border-primary text-primary" : "border-transparent text-text-secondary hover:text-text-primary"}`,
+					className: "flex gap-1 border-b border-border-seam",
+					children: R.map(({ key: e, label: t, icon: n }) => /* @__PURE__ */ _("button", {
+						onClick: () => F(e),
+						"aria-pressed": P === 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 ${P === e ? "border-accent-blue text-accent-blue" : "border-transparent text-text-secondary hover:text-text-primary"}`,
 						children: [/* @__PURE__ */ g(n, { className: "h-4 w-4" }), t]
 					}, e))
 				}), /* @__PURE__ */ _("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ g(a, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ g("div", {
-						className: "flex rounded border",
+						className: "flex rounded border border-border-seam",
 						children: [
 							"7d",
 							"30d",
 							"90d",
 							"1y"
 						].map((e) => /* @__PURE__ */ g("button", {
-							onClick: () => M(e),
-							className: `px-3 py-1 text-xs font-medium ${j === e ? "bg-action-primary-bg text-action-primary-text" : "text-text-secondary hover:bg-bg-sunken/50"}`,
+							onClick: () => L(e),
+							"aria-pressed": I === e,
+							className: `px-3 py-1 text-xs font-medium tabular-nums focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${I === e ? "bg-accent-blue text-action-primary-text" : "text-text-secondary hover:bg-bg-sunken"}`,
 							children: e
 						}, e))
 					})]
@@ -86,116 +131,130 @@ function w() {
 			}),
 			/* @__PURE__ */ g("div", {
 				className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
-				children: w.map((e, t) => /* @__PURE__ */ g(b, { children: /* @__PURE__ */ _(x, {
-					className: "pt-4",
-					children: [
-						/* @__PURE__ */ _("div", {
-							className: "flex items-center justify-between",
-							children: [/* @__PURE__ */ _("div", {
-								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ g(F[t % F.length] ?? i, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ g("p", {
-									className: "text-sm font-medium text-text-secondary",
-									children: e.label
-								})]
-							}), P(e.changeType)]
-						}),
-						/* @__PURE__ */ g("p", {
-							className: "mt-2 text-3xl font-bold",
-							children: e.value
-						}),
-						/* @__PURE__ */ _("p", {
-							className: `mt-1 flex items-center gap-1 text-xs ${e.changeType === "positive" ? "text-green-600" : e.changeType === "negative" ? "text-red-600" : "text-gray-500"}`,
-							children: [
-								/* @__PURE__ */ g(r, { className: "h-3 w-3" }),
-								e.change,
-								" vs last period"
-							]
-						})
-					]
-				}) }, t))
-			}),
-			k === "overview" && /* @__PURE__ */ _("div", {
-				className: "grid gap-6 lg:grid-cols-2",
-				children: [
-					/* @__PURE__ */ _(b, { children: [/* @__PURE__ */ g(S, { children: /* @__PURE__ */ _("div", {
-						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ g(C, {
-							className: "text-base",
-							children: "Platform Revenue"
-						}), /* @__PURE__ */ g(v, {
-							variant: "secondary",
-							children: "Monthly"
-						})]
-					}) }), /* @__PURE__ */ g(x, {
-						className: "space-y-3",
-						children: T.map((e) => /* @__PURE__ */ _("div", {
-							className: "flex items-center gap-3",
+				children: k.map((e, t) => {
+					let n = V[t % V.length] ?? i;
+					return /* @__PURE__ */ g(T, {
+						treatment: t === 0 ? "glass" : "metric",
+						glow: t === 0,
+						className: "border-border-seam",
+						children: /* @__PURE__ */ _(S, {
+							className: "pt-4",
 							children: [
-								/* @__PURE__ */ g("span", {
-									className: "w-10 text-xs text-text-secondary",
-									children: e.name
+								/* @__PURE__ */ _("div", {
+									className: "flex items-center justify-between",
+									children: [/* @__PURE__ */ _("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ g(n, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ g("p", {
+											className: "text-sm font-medium text-text-secondary",
+											children: e.label
+										})]
+									}), z(e.changeType)]
 								}),
-								/* @__PURE__ */ g("div", {
-									className: "flex-1 h-5 bg-bg-sunken rounded overflow-hidden",
-									children: /* @__PURE__ */ g("div", {
-										className: "h-5 bg-action-primary-bg rounded",
-										style: { width: `${e.value / I * 100}%` }
-									})
+								/* @__PURE__ */ g("p", {
+									className: "mt-2 text-3xl font-bold tabular-nums",
+									children: e.value
 								}),
-								/* @__PURE__ */ _("span", {
-									className: "w-16 text-right text-xs font-medium",
+								/* @__PURE__ */ _("p", {
+									className: `mt-1 flex items-center gap-1 text-xs ${B(e.changeType)}`,
 									children: [
-										"$",
-										(e.value / 1e3).toFixed(1),
-										"k"
+										/* @__PURE__ */ g(r, { className: "h-3 w-3" }),
+										e.change,
+										" vs last period"
 									]
 								})
 							]
-						}, e.name))
-					})] }),
-					/* @__PURE__ */ _(b, { children: [/* @__PURE__ */ g(S, { children: /* @__PURE__ */ _("div", {
-						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ g(C, {
-							className: "text-base",
-							children: "Service Bookings"
-						}), /* @__PURE__ */ g(v, {
-							variant: "secondary",
-							children: "Total"
+						})
+					}, t);
+				})
+			}),
+			P === "overview" && /* @__PURE__ */ _("div", {
+				className: "grid gap-6 lg:grid-cols-2",
+				children: [
+					/* @__PURE__ */ _(x, {
+						className: "border-border-seam",
+						children: [/* @__PURE__ */ g(C, { children: /* @__PURE__ */ _("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ g(w, {
+								className: "text-base",
+								children: "Platform Revenue"
+							}), /* @__PURE__ */ g(y, {
+								variant: "secondary",
+								children: "Monthly"
+							})]
+						}) }), /* @__PURE__ */ g(S, {
+							className: "space-y-3",
+							children: A.map((e) => /* @__PURE__ */ _("div", {
+								className: "flex items-center gap-3",
+								children: [
+									/* @__PURE__ */ g("span", {
+										className: "w-10 text-xs text-text-secondary",
+										children: e.name
+									}),
+									/* @__PURE__ */ g("div", {
+										className: "flex-1 h-5 bg-bg-sunken rounded overflow-hidden",
+										children: /* @__PURE__ */ g("div", {
+											className: "h-5 bg-accent-blue rounded",
+											style: { width: `${e.value / H * 100}%` }
+										})
+									}),
+									/* @__PURE__ */ _("span", {
+										className: "w-16 text-right text-xs font-medium tabular-nums",
+										children: [
+											"$",
+											(e.value / 1e3).toFixed(1),
+											"k"
+										]
+									})
+								]
+							}, e.name))
 						})]
-					}) }), /* @__PURE__ */ g(x, {
-						className: "space-y-3",
-						children: [...E].sort((e, t) => t.value - e.value).map((e) => /* @__PURE__ */ _("div", {
-							className: "flex items-center gap-3",
-							children: [
-								/* @__PURE__ */ g("span", {
-									className: "w-32 truncate text-xs text-text-secondary",
-									children: e.name
-								}),
-								/* @__PURE__ */ g("div", {
-									className: "flex-1 h-5 bg-bg-sunken rounded overflow-hidden",
-									children: /* @__PURE__ */ g("div", {
-										className: "h-5 bg-blue-500 rounded",
-										style: { width: `${e.value / L * 100}%` }
+					}),
+					/* @__PURE__ */ _(x, {
+						className: "border-border-seam",
+						children: [/* @__PURE__ */ g(C, { children: /* @__PURE__ */ _("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ g(w, {
+								className: "text-base",
+								children: "Service Bookings"
+							}), /* @__PURE__ */ g(y, {
+								variant: "secondary",
+								children: "Total"
+							})]
+						}) }), /* @__PURE__ */ g(S, {
+							className: "space-y-3",
+							children: [...j].sort((e, t) => t.value - e.value).map((e) => /* @__PURE__ */ _("div", {
+								className: "flex items-center gap-3",
+								children: [
+									/* @__PURE__ */ g("span", {
+										className: "w-32 truncate text-xs text-text-secondary",
+										children: e.name
+									}),
+									/* @__PURE__ */ g("div", {
+										className: "flex-1 h-5 bg-bg-sunken rounded overflow-hidden",
+										children: /* @__PURE__ */ g("div", {
+											className: "h-5 bg-accent-purple rounded",
+											style: { width: `${e.value / U * 100}%` }
+										})
+									}),
+									/* @__PURE__ */ g("span", {
+										className: "w-12 text-right text-xs font-medium tabular-nums",
+										children: e.value
 									})
-								}),
-								/* @__PURE__ */ g("span", {
-									className: "w-12 text-right text-xs font-medium",
-									children: e.value
-								})
-							]
-						}, e.name))
-					})] }),
-					/* @__PURE__ */ _(b, {
-						className: "lg:col-span-2",
-						children: [/* @__PURE__ */ g(S, { children: /* @__PURE__ */ g(C, {
+								]
+							}, e.name))
+						})]
+					}),
+					/* @__PURE__ */ _(x, {
+						className: "lg:col-span-2 border-border-seam",
+						children: [/* @__PURE__ */ g(C, { children: /* @__PURE__ */ g(w, {
 							className: "text-base",
 							children: "Revenue by Region"
-						}) }), /* @__PURE__ */ g(x, { children: /* @__PURE__ */ g("div", {
+						}) }), /* @__PURE__ */ g(S, { children: /* @__PURE__ */ g("div", {
 							className: "overflow-x-auto",
 							children: /* @__PURE__ */ _("table", {
 								className: "w-full text-sm",
 								children: [/* @__PURE__ */ g("thead", { children: /* @__PURE__ */ _("tr", {
-									className: "border-b text-left text-text-secondary",
+									className: "border-b border-border-seam text-left text-text-secondary",
 									children: [
 										/* @__PURE__ */ g("th", {
 											className: "p-3",
@@ -218,21 +277,21 @@ function w() {
 											children: "Share"
 										})
 									]
-								}) }), /* @__PURE__ */ g("tbody", { children: D.map((e) => {
-									let t = D.reduce((e, t) => e + t.revenue, 0), n = Math.round(e.revenue / t * 100), r = Math.round(e.revenue / e.clients);
+								}) }), /* @__PURE__ */ g("tbody", { children: M.map((e) => {
+									let t = M.reduce((e, t) => e + t.revenue, 0), n = Math.round(e.revenue / t * 100), r = Math.round(e.revenue / e.clients);
 									return /* @__PURE__ */ _("tr", {
-										className: "border-b hover:bg-bg-sunken/50",
+										className: "border-b border-border-seam hover:bg-bg-sunken",
 										children: [
 											/* @__PURE__ */ g("td", {
 												className: "p-3 font-medium",
 												children: e.country
 											}),
 											/* @__PURE__ */ g("td", {
-												className: "p-3 text-right",
+												className: "p-3 text-right tabular-nums",
 												children: e.clients
 											}),
 											/* @__PURE__ */ _("td", {
-												className: "p-3 text-right font-medium",
+												className: "p-3 text-right font-medium tabular-nums",
 												children: [
 													"$",
 													(e.revenue / 1e3).toFixed(0),
@@ -240,7 +299,7 @@ function w() {
 												]
 											}),
 											/* @__PURE__ */ _("td", {
-												className: "p-3 text-right text-text-secondary",
+												className: "p-3 text-right text-text-secondary tabular-nums",
 												children: ["$", r.toLocaleString()]
 											}),
 											/* @__PURE__ */ g("td", {
@@ -250,11 +309,11 @@ function w() {
 													children: [/* @__PURE__ */ g("div", {
 														className: "h-2 flex-1 overflow-hidden rounded-full bg-bg-sunken",
 														children: /* @__PURE__ */ g("div", {
-															className: "h-2 rounded-full bg-action-primary-bg",
+															className: "h-2 rounded-full bg-accent-blue",
 															style: { width: `${n}%` }
 														})
 													}), /* @__PURE__ */ _("span", {
-														className: "w-10 text-right text-xs",
+														className: "w-10 text-right text-xs tabular-nums",
 														children: [n, "%"]
 													})]
 												})
@@ -267,100 +326,96 @@ function w() {
 					})
 				]
 			}),
-			k === "users" && /* @__PURE__ */ _("div", {
+			P === "users" && /* @__PURE__ */ _("div", {
 				className: "grid gap-6 lg:grid-cols-2",
 				children: [
-					/* @__PURE__ */ _(b, { children: [/* @__PURE__ */ g(S, { children: /* @__PURE__ */ g(C, {
-						className: "text-base",
-						children: "User Role Distribution"
-					}) }), /* @__PURE__ */ g(x, {
-						className: "space-y-3",
-						children: Object.entries(R).map(([e, t]) => {
-							let n = Math.round(t / O.length * 100);
-							return /* @__PURE__ */ _("div", {
-								className: "flex items-center gap-3",
-								children: [
-									/* @__PURE__ */ g("span", {
-										className: "w-24 text-sm font-medium capitalize",
-										children: e.replace("_", " ")
-									}),
-									/* @__PURE__ */ g("div", {
-										className: "flex-1 h-5 bg-bg-sunken rounded overflow-hidden",
-										children: /* @__PURE__ */ g("div", {
-											className: `h-5 rounded ${{
-												client: "bg-blue-500",
-												provider: "bg-green-500",
-												admin: "bg-red-500",
-												team_member: "bg-purple-500"
-											}[e] ?? "bg-gray-400"}`,
-											style: { width: `${n}%` }
+					/* @__PURE__ */ _(x, {
+						className: "border-border-seam",
+						children: [/* @__PURE__ */ g(C, { children: /* @__PURE__ */ g(w, {
+							className: "text-base",
+							children: "User Role Distribution"
+						}) }), /* @__PURE__ */ g(S, {
+							className: "space-y-3",
+							children: Object.entries(W).map(([e, t]) => {
+								let n = Math.round(t / N.length * 100);
+								return /* @__PURE__ */ _("div", {
+									className: "flex items-center gap-3",
+									children: [
+										/* @__PURE__ */ g("span", {
+											className: "w-24 text-sm font-medium capitalize",
+											children: e.replace("_", " ")
+										}),
+										/* @__PURE__ */ g("div", {
+											className: "flex-1 h-5 bg-bg-sunken rounded overflow-hidden",
+											children: /* @__PURE__ */ g("div", {
+												className: `h-5 rounded ${K[e] ?? "bg-chart-6"}`,
+												style: { width: `${n}%` }
+											})
+										}),
+										/* @__PURE__ */ _("span", {
+											className: "w-16 text-right text-sm tabular-nums",
+											children: [
+												t,
+												" (",
+												n,
+												"%)"
+											]
 										})
-									}),
-									/* @__PURE__ */ _("span", {
-										className: "w-16 text-right text-sm",
-										children: [
-											t,
-											" (",
-											n,
-											"%)"
-										]
-									})
-								]
-							}, e);
-						})
-					})] }),
-					/* @__PURE__ */ _(b, { children: [/* @__PURE__ */ g(S, { children: /* @__PURE__ */ g(C, {
-						className: "text-base",
-						children: "User Status Distribution"
-					}) }), /* @__PURE__ */ g(x, {
-						className: "space-y-3",
-						children: Object.entries(z).map(([e, t]) => {
-							let n = Math.round(t / O.length * 100);
-							return /* @__PURE__ */ _("div", {
-								className: "flex items-center gap-3",
-								children: [
-									/* @__PURE__ */ g("span", {
-										className: "w-24 text-sm font-medium capitalize",
-										children: e
-									}),
-									/* @__PURE__ */ g("div", {
-										className: "flex-1 h-5 bg-bg-sunken rounded overflow-hidden",
-										children: /* @__PURE__ */ g("div", {
-											className: `h-5 rounded ${{
-												active: "bg-green-500",
-												suspended: "bg-orange-500",
-												pending: "bg-yellow-500",
-												banned: "bg-red-500"
-											}[e] ?? "bg-gray-400"}`,
-											style: { width: `${n}%` }
+									]
+								}, e);
+							})
+						})]
+					}),
+					/* @__PURE__ */ _(x, {
+						className: "border-border-seam",
+						children: [/* @__PURE__ */ g(C, { children: /* @__PURE__ */ g(w, {
+							className: "text-base",
+							children: "User Status Distribution"
+						}) }), /* @__PURE__ */ g(S, {
+							className: "space-y-3",
+							children: Object.entries(G).map(([e, t]) => {
+								let n = Math.round(t / N.length * 100);
+								return /* @__PURE__ */ _("div", {
+									className: "flex items-center gap-3",
+									children: [
+										/* @__PURE__ */ g("span", {
+											className: "w-24 text-sm font-medium capitalize",
+											children: e
+										}),
+										/* @__PURE__ */ g("div", {
+											className: "flex-1 h-5 bg-bg-sunken rounded overflow-hidden",
+											children: /* @__PURE__ */ g("div", {
+												className: `h-5 rounded ${q[e] ?? "bg-chart-6"}`,
+												style: { width: `${n}%` }
+											})
+										}),
+										/* @__PURE__ */ _("span", {
+											className: "w-16 text-right text-sm tabular-nums",
+											children: [
+												t,
+												" (",
+												n,
+												"%)"
+											]
 										})
-									}),
-									/* @__PURE__ */ _("span", {
-										className: "w-16 text-right text-sm",
-										children: [
-											t,
-											" (",
-											n,
-											"%)"
-										]
-									})
-								]
-							}, e);
-						})
-					})] }),
-					/* @__PURE__ */ _(b, {
-						className: "lg:col-span-2",
-						children: [/* @__PURE__ */ g(S, { children: /* @__PURE__ */ g(C, {
+									]
+								}, e);
+							})
+						})]
+					}),
+					/* @__PURE__ */ _(x, {
+						className: "lg:col-span-2 border-border-seam",
+						children: [/* @__PURE__ */ g(C, { children: /* @__PURE__ */ g(w, {
 							className: "text-base",
 							children: "Top Users by Spending"
-						}) }), /* @__PURE__ */ g(x, { children: /* @__PURE__ */ g("div", {
+						}) }), /* @__PURE__ */ g(S, { children: /* @__PURE__ */ g("div", {
 							className: "space-y-2",
-							children: [...O].filter((e) => e.totalSpent > 0).sort((e, t) => t.totalSpent - e.totalSpent).slice(0, 5).map((e, t) => /* @__PURE__ */ _("div", {
-								className: "flex items-center justify-between rounded-lg border p-3",
+							children: [...N].filter((e) => e.totalSpent > 0).sort((e, t) => t.totalSpent - e.totalSpent).slice(0, 5).map((e, t) => /* @__PURE__ */ _("div", {
+								className: "flex items-center justify-between rounded-lg border border-border-seam p-3",
 								children: [/* @__PURE__ */ _("div", {
 									className: "flex items-center gap-3",
 									children: [/* @__PURE__ */ g("span", {
-										className: "flex h-8 w-8 items-center justify-center rounded-full bg-action-primary-bg/10 text-sm font-bold text-primary",
+										className: "flex h-8 w-8 items-center justify-center rounded-full bg-accent-soft text-sm font-bold text-text-primary tabular-nums",
 										children: t + 1
 									}), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
 										className: "font-medium",
@@ -372,10 +427,10 @@ function w() {
 								}), /* @__PURE__ */ _("div", {
 									className: "text-right",
 									children: [/* @__PURE__ */ _("p", {
-										className: "font-bold",
+										className: "font-bold tabular-nums",
 										children: ["$", e.totalSpent.toLocaleString()]
 									}), /* @__PURE__ */ _("p", {
-										className: "text-xs text-text-secondary",
+										className: "text-xs text-text-secondary tabular-nums",
 										children: [e.bookingsCount, " bookings"]
 									})]
 								})]
@@ -384,129 +439,141 @@ function w() {
 					})
 				]
 			}),
-			k === "revenue" && /* @__PURE__ */ g("div", {
+			P === "revenue" && /* @__PURE__ */ g("div", {
 				className: "space-y-6",
-				children: /* @__PURE__ */ _(b, { children: [/* @__PURE__ */ g(S, { children: /* @__PURE__ */ g(C, {
-					className: "text-base",
-					children: "Monthly Revenue Comparison"
-				}) }), /* @__PURE__ */ g(x, {
-					className: "space-y-4",
-					children: T.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__ */ _("div", {
-							className: "rounded-lg border p-4",
-							children: [/* @__PURE__ */ _("div", {
-								className: "flex items-center justify-between",
-								children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("p", {
-									className: "font-medium",
-									children: [e.name, " 2025"]
+				children: /* @__PURE__ */ _(x, {
+					className: "border-border-seam",
+					children: [/* @__PURE__ */ g(C, { children: /* @__PURE__ */ g(w, {
+						className: "text-base",
+						children: "Monthly Revenue Comparison"
+					}) }), /* @__PURE__ */ g(S, {
+						className: "space-y-4",
+						children: A.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__ */ _("div", {
+								className: "rounded-lg border border-border-seam p-4",
+								children: [/* @__PURE__ */ _("div", {
+									className: "flex items-center justify-between",
+									children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("p", {
+										className: "font-medium",
+										children: [e.name, " 2025"]
+									}), /* @__PURE__ */ _("div", {
+										className: "mt-1 flex items-center gap-4 text-sm text-text-secondary tabular-nums",
+										children: [/* @__PURE__ */ _("span", { children: [
+											"Current: $",
+											(e.value / 1e3).toFixed(1),
+											"k"
+										] }), /* @__PURE__ */ _("span", { children: [
+											"Previous: $",
+											((e.prev ?? 0) / 1e3).toFixed(1),
+											"k"
+										] })]
+									})] }), /* @__PURE__ */ _(y, {
+										variant: n ? "default" : "destructive",
+										children: [
+											n ? "+" : "",
+											t,
+											"%"
+										]
+									})]
 								}), /* @__PURE__ */ _("div", {
-									className: "mt-1 flex items-center gap-4 text-sm text-text-secondary",
-									children: [/* @__PURE__ */ _("span", { children: [
-										"Current: $",
-										(e.value / 1e3).toFixed(1),
-										"k"
-									] }), /* @__PURE__ */ _("span", { children: [
-										"Previous: $",
-										((e.prev ?? 0) / 1e3).toFixed(1),
-										"k"
-									] })]
-								})] }), /* @__PURE__ */ _(v, {
-									variant: n ? "default" : "destructive",
-									children: [
-										n ? "+" : "",
-										t,
-										"%"
-									]
+									className: "mt-3 flex gap-1 h-4",
+									children: [/* @__PURE__ */ g("div", {
+										className: "h-4 rounded bg-accent-blue-subtle",
+										style: { width: `${(e.prev ?? 0) / H * 100}%` }
+									}), /* @__PURE__ */ g("div", {
+										className: "h-4 rounded bg-accent-blue",
+										style: { width: `${Math.max(0, (e.value - (e.prev ?? 0)) / H * 100)}%` }
+									})]
 								})]
+							}, e.name);
+						})
+					})]
+				})
+			}),
+			P === "bookings" && /* @__PURE__ */ _("div", {
+				className: "grid gap-6 lg:grid-cols-2",
+				children: [/* @__PURE__ */ _(x, {
+					className: "border-border-seam",
+					children: [/* @__PURE__ */ g(C, { children: /* @__PURE__ */ g(w, {
+						className: "text-base",
+						children: "Bookings by Service Category"
+					}) }), /* @__PURE__ */ g(S, {
+						className: "space-y-3",
+						children: [...j].sort((e, t) => t.value - e.value).map((e, t) => /* @__PURE__ */ _("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ _("span", {
+								className: "w-6 text-sm font-bold text-text-secondary tabular-nums",
+								children: ["#", t + 1]
 							}), /* @__PURE__ */ _("div", {
-								className: "mt-3 flex gap-1 h-4",
-								children: [/* @__PURE__ */ g("div", {
-									className: "h-4 rounded bg-action-primary-bg/30",
-									style: { width: `${(e.prev ?? 0) / I * 100}%` }
+								className: "flex-1",
+								children: [/* @__PURE__ */ _("div", {
+									className: "flex items-center justify-between text-sm",
+									children: [/* @__PURE__ */ g("span", {
+										className: "font-medium",
+										children: e.name
+									}), /* @__PURE__ */ _("span", {
+										className: "tabular-nums",
+										children: [e.value, " bookings"]
+									})]
 								}), /* @__PURE__ */ g("div", {
-									className: "h-4 rounded bg-action-primary-bg",
-									style: { width: `${Math.max(0, (e.value - (e.prev ?? 0)) / I * 100)}%` }
+									className: "mt-1 h-2 overflow-hidden rounded-full bg-bg-sunken",
+									children: /* @__PURE__ */ g("div", {
+										className: "h-2 rounded-full bg-accent-blue",
+										style: { width: `${e.value / U * 100}%` }
+									})
 								})]
 							})]
-						}, e.name);
-					})
-				})] })
-			}),
-			k === "bookings" && /* @__PURE__ */ _("div", {
-				className: "grid gap-6 lg:grid-cols-2",
-				children: [/* @__PURE__ */ _(b, { children: [/* @__PURE__ */ g(S, { children: /* @__PURE__ */ g(C, {
-					className: "text-base",
-					children: "Bookings by Service Category"
-				}) }), /* @__PURE__ */ g(x, {
-					className: "space-y-3",
-					children: [...E].sort((e, t) => t.value - e.value).map((e, t) => /* @__PURE__ */ _("div", {
-						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ _("span", {
-							className: "w-6 text-sm font-bold text-text-secondary",
-							children: ["#", t + 1]
-						}), /* @__PURE__ */ _("div", {
-							className: "flex-1",
+						}, e.name))
+					})]
+				}), /* @__PURE__ */ _(x, {
+					className: "border-border-seam",
+					children: [/* @__PURE__ */ g(C, { children: /* @__PURE__ */ g(w, {
+						className: "text-base",
+						children: "Quick Stats"
+					}) }), /* @__PURE__ */ g(S, {
+						className: "space-y-4",
+						children: [
+							{
+								label: "Total Bookings",
+								value: j.reduce((e, t) => e + t.value, 0).toLocaleString(),
+								icon: d
+							},
+							{
+								label: "Avg. Booking Value",
+								value: "$3,804",
+								icon: o
+							},
+							{
+								label: "Completion Rate",
+								value: "96.5%",
+								icon: m
+							},
+							{
+								label: "Client Satisfaction",
+								value: "4.7/5.0",
+								icon: f
+							}
+						].map(({ label: e, value: t, icon: n }) => /* @__PURE__ */ _("div", {
+							className: "flex items-center justify-between rounded-lg border border-border-seam p-3",
 							children: [/* @__PURE__ */ _("div", {
-								className: "flex items-center justify-between text-sm",
-								children: [/* @__PURE__ */ g("span", {
-									className: "font-medium",
-									children: e.name
-								}), /* @__PURE__ */ _("span", { children: [e.value, " bookings"] })]
-							}), /* @__PURE__ */ g("div", {
-								className: "mt-1 h-2 overflow-hidden rounded-full bg-bg-sunken",
-								children: /* @__PURE__ */ g("div", {
-									className: "h-2 rounded-full bg-action-primary-bg",
-									style: { width: `${e.value / L * 100}%` }
-								})
-							})]
-						})]
-					}, e.name))
-				})] }), /* @__PURE__ */ _(b, { children: [/* @__PURE__ */ g(S, { children: /* @__PURE__ */ g(C, {
-					className: "text-base",
-					children: "Quick Stats"
-				}) }), /* @__PURE__ */ g(x, {
-					className: "space-y-4",
-					children: [
-						{
-							label: "Total Bookings",
-							value: E.reduce((e, t) => e + t.value, 0).toLocaleString(),
-							icon: d
-						},
-						{
-							label: "Avg. Booking Value",
-							value: "$3,804",
-							icon: o
-						},
-						{
-							label: "Completion Rate",
-							value: "96.5%",
-							icon: m
-						},
-						{
-							label: "Client Satisfaction",
-							value: "4.7/5.0",
-							icon: f
-						}
-					].map(({ label: e, value: t, icon: n }) => /* @__PURE__ */ _("div", {
-						className: "flex items-center justify-between rounded-lg border p-3",
-						children: [/* @__PURE__ */ _("div", {
-							className: "flex items-center gap-3",
-							children: [/* @__PURE__ */ g(n, { className: "h-5 w-5 text-text-secondary" }), /* @__PURE__ */ g("span", {
-								className: "text-sm font-medium",
-								children: e
+								className: "flex items-center gap-3",
+								children: [/* @__PURE__ */ g(n, { className: "h-5 w-5 text-text-secondary" }), /* @__PURE__ */ g("span", {
+									className: "text-sm font-medium",
+									children: e
+								})]
+							}), /* @__PURE__ */ g("span", {
+								className: "text-lg font-bold tabular-nums",
+								children: t
 							})]
-						}), /* @__PURE__ */ g("span", {
-							className: "text-lg font-bold",
-							children: t
-						})]
-					}, e))
-				})] })]
+						}, e))
+					})]
+				})]
 			})
 		]
 	});
 }
 //#endregion
-export { w as AdminReportsPage };
+export { k as AdminReportsPage };
 
 //# sourceMappingURL=AdminReportsPage.js.map