medusa-analytics 0.0.24 → 0.0.25

package/.medusa/server/src/admin/index.js

@@ -5,726 +5,58 @@ const adminSdk = require("@medusajs/admin-sdk");
 const icons = require("@medusajs/icons");
 const ui = require("@medusajs/ui");
 const recharts = require("recharts");
-const AnalyticsCurrencyContext = react.createContext(
-  null
-);
-function formatMoney(value, currencyCode, compact) {
-  return new Intl.NumberFormat(void 0, {
-    style: "currency",
-    currency: currencyCode,
-    minimumFractionDigits: 0,
-    maximumFractionDigits: compact ? 1 : 0,
-    ...compact ? { notation: "compact" } : {}
-  }).format(value);
-}
-function AnalyticsCurrencyProvider({ children }) {
-  const [currencyCode, setCurrencyCode] = react.useState("USD");
-  react.useEffect(() => {
-    let cancelled = false;
-    fetch("/admin/analytics/store-context", { credentials: "include" }).then((res) => {
-      if (!res.ok) throw new Error(res.statusText);
-      return res.json();
-    }).then((body) => {
-      if (cancelled) return;
-      const code = typeof body.default_currency_code === "string" ? body.default_currency_code.trim().toUpperCase() : "";
-      if (code && /^[A-Z]{3}$/.test(code)) {
-        setCurrencyCode(code);
-      }
-    }).catch(() => {
-      if (!cancelled) setCurrencyCode("USD");
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-  const formatCurrency = react.useCallback(
-    (value2) => formatMoney(value2, currencyCode, false),
-    [currencyCode]
-  );
-  const formatCompactCurrency = react.useCallback(
-    (value2) => formatMoney(value2, currencyCode, true),
-    [currencyCode]
-  );
-  const value = react.useMemo(
-    () => ({
-      currencyCode,
-      formatCurrency,
-      formatCompactCurrency
-    }),
-    [currencyCode, formatCurrency, formatCompactCurrency]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsCurrencyContext.Provider, { value, children });
-}
-function useAnalyticsCurrency() {
-  const ctx = react.useContext(AnalyticsCurrencyContext);
-  if (!ctx) {
-    throw new Error("useAnalyticsCurrency must be used within AnalyticsCurrencyProvider");
-  }
-  return ctx;
-}
-const ORDERS_ANALYTICS_MAX_FETCH = 5e4;
-const ACCENT_STYLES = {
-  blue: {
-    border: "border-sky-400/30",
-    glow: "shadow-[0_0_0_1px_rgba(56,189,248,0.12),0_18px_40px_-28px_rgba(59,130,246,0.55)]",
-    band: "from-sky-400/70 via-blue-400/30 to-transparent"
-  },
-  purple: {
-    border: "border-fuchsia-400/25",
-    glow: "shadow-[0_0_0_1px_rgba(217,70,239,0.10),0_18px_40px_-28px_rgba(168,85,247,0.5)]",
-    band: "from-fuchsia-400/65 via-violet-400/25 to-transparent"
-  },
-  green: {
-    border: "border-emerald-400/25",
-    glow: "shadow-[0_0_0_1px_rgba(52,211,153,0.10),0_18px_40px_-28px_rgba(16,185,129,0.45)]",
-    band: "from-emerald-400/65 via-teal-400/25 to-transparent"
-  },
-  amber: {
-    border: "border-amber-400/25",
-    glow: "shadow-[0_0_0_1px_rgba(251,191,36,0.10),0_18px_40px_-28px_rgba(245,158,11,0.45)]",
-    band: "from-amber-400/65 via-orange-400/25 to-transparent"
-  },
-  rose: {
-    border: "border-rose-400/25",
-    glow: "shadow-[0_0_0_1px_rgba(251,113,133,0.10),0_18px_40px_-28px_rgba(244,63,94,0.45)]",
-    band: "from-rose-400/65 via-pink-400/25 to-transparent"
-  },
-  slate: {
-    border: "border-ui-border-strong",
-    glow: "shadow-[0_0_0_1px_rgba(15,23,42,0.05),0_18px_40px_-28px_rgba(15,23,42,0.22)]",
-    band: "from-ui-border-strong via-ui-border-base to-transparent"
-  }
-};
-function getAccentStyle(accent) {
-  return ACCENT_STYLES[accent];
-}
-function AnalyticsDashboardShell({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ["space-y-2.5 md:space-y-3", className].filter(Boolean).join(" "), children });
-}
-function AnalyticsDashboardHeader({
-  title,
-  description,
-  actions,
-  variant = "default",
-  actionsBare = false,
-  appearance = "card",
-  actionsClassName
-}) {
-  const isPremium = variant === "premium";
-  const isInset = appearance === "inset";
-  const headerRow = /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: `flex flex-col gap-2 px-4 py-2.5 lg:flex-row lg:items-center lg:justify-between lg:gap-4 ${isPremium ? "border-b border-ui-border-base/80" : "border-b border-ui-border-base"}`.trim(),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1 space-y-0.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", className: isPremium ? "text-lg font-semibold tracking-tight" : "tracking-tight", children: title }),
-          description ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: `text-ui-fg-muted ${isPremium ? "max-w-2xl text-xs leading-snug" : "text-sm"}`.trim(), children: description }) : null
-        ] }),
-        actions ? actionsBare ? /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: [
-              "flex flex-wrap items-center gap-3 self-start lg:shrink-0 lg:self-auto",
-              actionsClassName ?? ""
-            ].join(" ").trim(),
-            children: actions
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: `flex self-start rounded-xl border px-2 py-1.5 lg:self-auto ${isPremium ? "border-ui-border-strong bg-ui-bg-subtle shadow-[inset_0_1px_0_rgba(255,255,255,0.35)]" : "border-ui-border-base bg-ui-bg-subtle"}`.trim(),
-            children: actions
-          }
-        ) : null
-      ]
-    }
-  );
-  if (isInset) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-0 bg-transparent p-0 shadow-none", children: headerRow });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Container,
-    {
-      className: `overflow-hidden rounded-2xl border bg-ui-bg-base p-0 ${isPremium ? "border-ui-border-strong shadow-sm" : "border-ui-border-base shadow-sm"}`.trim(),
-      children: [
-        headerRow,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: `h-px w-full ${isPremium ? "bg-gradient-to-r from-transparent via-ui-border-strong to-transparent" : "bg-ui-bg-subtle"}`.trim()
-          }
-        )
-      ]
-    }
-  );
-}
-function AnalyticsStatCard({
-  label,
-  value,
-  helper,
-  className,
-  valueClassName,
-  variant = "default",
-  accent = "slate"
-}) {
-  const accentStyle = getAccentStyle(accent);
-  const isHero = variant === "hero";
-  const isCompact = variant === "compact";
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Container,
-    {
-      className: `relative h-full overflow-hidden rounded-2xl border bg-ui-bg-base transition-shadow ${isHero ? `p-3 ${accentStyle.border} ${accentStyle.glow} shadow-sm` : isCompact ? "border-ui-border-base bg-ui-bg-subtle/70 p-2.5 shadow-none" : "border-ui-border-base p-4 shadow-sm"} ${className ?? ""}`.trim(),
-      children: [
-        isHero ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: `pointer-events-none absolute inset-x-3 top-0 h-10 rounded-b-full bg-gradient-to-r ${accentStyle.band} blur-xl`
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-x-3 top-0 h-px bg-gradient-to-r from-transparent via-white/40 to-transparent" })
-        ] }) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: `relative flex flex-col justify-between gap-1 ${isCompact ? "min-h-[64px]" : isHero ? "min-h-[72px]" : "min-h-[92px]"}`.trim(),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Text,
-                {
-                  className: `text-ui-fg-muted font-medium ${isHero ? "text-[10px] uppercase tracking-[0.16em]" : "text-xs"}`.trim(),
-                  children: label
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Heading,
-                {
-                  level: "h2",
-                  className: `leading-tight tracking-tight ${isHero ? "text-xl sm:text-2xl" : isCompact ? "text-lg" : "text-2xl"} ${valueClassName ?? ""}`.trim(),
-                  children: value
-                }
-              ),
-              helper ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: `text-ui-fg-muted leading-snug ${isHero ? "text-[10px]" : "text-xs"}`.trim(), children: helper }) : null
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-function AnalyticsSection({
-  title,
-  description,
-  actions,
-  children,
-  className,
-  variant = "default",
-  actionsBare = false
-}) {
-  const isAtlas = variant === "atlas";
-  const isPremium = variant !== "default" && !isAtlas;
-  const shellClass = isAtlas ? "min-w-0 overflow-x-clip overflow-y-visible rounded-lg border border-ui-border-base bg-ui-bg-base shadow-sm" : `overflow-hidden rounded-2xl border bg-ui-bg-base p-0 ${isPremium ? "border-ui-border-strong shadow-sm" : "border-ui-border-base shadow-sm"}`.trim();
-  const headerClass = isAtlas ? "flex flex-col gap-1 border-b border-ui-border-base bg-ui-bg-subtle/40 px-3 py-2 lg:flex-row lg:items-center lg:justify-between" : `flex flex-col gap-2 px-4 py-2.5 lg:flex-row lg:items-center lg:justify-between ${isPremium ? "border-b border-ui-border-base/80" : "border-b border-ui-border-base"}`.trim();
-  const titleClass = isAtlas ? "text-sm font-semibold tracking-tight text-ui-fg-base" : isPremium ? "text-base font-semibold tracking-tight" : "tracking-tight";
-  const descClass = isAtlas ? "max-w-2xl text-[11px] leading-snug text-ui-fg-muted" : isPremium ? "max-w-2xl text-xs leading-snug" : "text-sm";
-  const actionsShellClass = isAtlas ? "flex shrink-0 flex-wrap items-center gap-1.5 rounded-md border border-ui-border-base bg-ui-bg-base px-2 py-1" : `flex shrink-0 flex-wrap items-center gap-1.5 rounded-xl border px-2 py-1.5 ${isPremium ? "border-ui-border-strong bg-ui-bg-subtle shadow-[inset_0_1px_0_rgba(255,255,255,0.32)]" : "border-ui-border-base bg-ui-bg-subtle"}`.trim();
-  const bodyClass = isAtlas ? "p-2" : variant === "hero" ? "px-4 py-3" : "px-4 py-3";
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: `${shellClass} ${className ?? ""}`.trim(), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: headerClass, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 space-y-0.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h3", className: titleClass, children: title }),
-        description ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: `text-ui-fg-muted ${descClass}`.trim(), children: description }) : null
-      ] }),
-      actions ? actionsBare ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsShellClass, children: actions }) : null
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: bodyClass, children })
-  ] });
-}
-function AnalyticsChartSurface({
-  children,
-  className,
-  variant = "default"
-}) {
-  const surfaceClassName = variant === "atlas" ? "rounded-lg border border-ui-border-base bg-ui-bg-subtle/50 p-2 shadow-sm" : variant === "glass" ? "rounded-xl border border-ui-border-strong bg-[linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.03))] p-2.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.22)]" : variant === "panel" ? "rounded-xl border border-ui-border-base/90 bg-ui-bg-base p-2.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.18)]" : "rounded-lg border border-ui-border-base bg-ui-bg-subtle p-2 shadow-inner";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: `${surfaceClassName} ${className ?? ""}`.trim(),
-      children
-    }
-  );
-}
-function AnalyticsTableSurface({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: [
-        "min-w-0 overflow-x-auto overflow-y-visible rounded-xl border border-ui-border-base bg-ui-bg-base",
-        "[scrollbar-width:thin]",
-        className ?? ""
-      ].join(" ").trim(),
-      children
-    }
-  );
-}
-function AnalyticsTooltipCard({
-  title,
-  children,
-  variant = "default"
+function OrdersOverTimeTooltip({
+  active,
+  payload,
+  label
 }) {
-  const compact = variant === "compact";
+  var _a, _b;
+  if (!active || !(payload == null ? void 0 : payload.length)) return null;
+  const row = (_a = payload[0]) == null ? void 0 : _a.payload;
+  const displayLabel = (row == null ? void 0 : row.label) ?? (label ? new Date(label).toLocaleDateString() : label);
+  const value = ((_b = payload[0]) == null ? void 0 : _b.value) ?? 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       style: {
-        background: "linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.96) 100%)",
+        backgroundColor: "rgb(250, 234, 234)",
         color: "#111827",
-        border: "1px solid rgba(148, 163, 184, 0.18)",
-        borderRadius: compact ? "8px" : "14px",
-        padding: compact ? "5px 8px" : "12px 14px",
-        boxShadow: compact ? "0 6px 16px rgba(15, 23, 42, 0.1)" : "0 16px 40px rgba(15, 23, 42, 0.12)",
-        fontSize: compact ? "11px" : "13px",
-        lineHeight: compact ? 1.35 : 1.5,
-        minWidth: compact ? 0 : 176,
-        maxWidth: compact ? "min(92vw, 200px)" : "min(96vw, 380px)"
+        border: "1px solid rgb(229, 231, 235)",
+        borderRadius: "8px",
+        padding: "12px 16px",
+        boxShadow: "0 4px 14px rgba(102, 102, 102, 0.99)",
+        fontSize: "14px",
+        lineHeight: 1.5
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            style: {
-              fontWeight: 600,
-              marginBottom: compact ? "2px" : "6px",
-              fontSize: compact ? "10px" : "inherit",
-              lineHeight: compact ? 1.25 : 1.35,
-              wordBreak: "break-word"
-            },
-            children: title
-          }
-        ),
-        children
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, marginBottom: "6px", color: "#111827" }, children: displayLabel }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: "#374151" }, children: [
+          "Orders: ",
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { color: "#1f2937" }, children: value })
+        ] })
       ]
     }
   );
 }
-function isDailyOrderRow(value) {
-  if (typeof value !== "object" || value === null) return false;
-  const v = value;
-  return typeof v.date === "string" && typeof v.orders_count === "number" && typeof v.total_revenue === "number";
-}
-function nonCancelledRevenue(d) {
-  const delivered = d.revenue_delivered ?? 0;
-  const open = d.revenue_open ?? 0;
-  if (delivered > 0 || open > 0 || (d.revenue_cancelled ?? 0) > 0) {
-    return delivered + open;
-  }
-  return Math.max(0, d.total_revenue - (d.revenue_cancelled ?? 0));
-}
-function isOrdersTodayPoint(value) {
-  return isDailyOrderRow(value) && "isToday" in value && typeof value.isToday === "boolean";
-}
-function formatChartLabel$2(value) {
-  if (!value) return "";
-  const parsed = new Date(value);
-  if (Number.isNaN(parsed.getTime())) return value;
-  return `${parsed.getUTCMonth() + 1}/${parsed.getUTCDate()}`;
-}
-function formatPercent(value) {
-  return `${value.toFixed(1)}%`;
-}
-function formatShortNumber$1(value) {
+const STATUS_COLORS = {
+  pending: "#F59E0B",
+  cancelled: "#EF4444",
+  delivered: "#10B981"
+};
+const ORDER_CHART_STATUSES = [
+  { key: "pending", label: "Pending", color: STATUS_COLORS.pending },
+  { key: "cancelled", label: "Cancelled", color: STATUS_COLORS.cancelled },
+  { key: "delivered", label: "Delivered", color: STATUS_COLORS.delivered }
+];
+function formatCurrency(value) {
   return new Intl.NumberFormat("en-IN", {
-    notation: "compact",
-    maximumFractionDigits: value < 10 ? 1 : 0
+    style: "currency",
+    currency: "INR",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
   }).format(value);
 }
-const SALES_GRANULARITY_TABS = [
-  { value: "hour", label: "Hour" },
-  { value: "day", label: "Day" },
-  { value: "week", label: "Week" },
-  { value: "month", label: "Month" }
-];
-function getSalesBreakdownOtPeriod(g) {
-  if (g === "day") return "one_week";
-  if (g === "week") return "two_months";
-  if (g === "month") return "one_year";
-  return null;
-}
-function monthKeyFromDateStr(dateStr) {
-  if (dateStr.length >= 7) return dateStr.slice(0, 7);
-  return dateStr;
-}
-function utcSundayWeekStartKeyFromDateStr(dateStr) {
-  const parsed = new Date(dateStr);
-  if (Number.isNaN(parsed.getTime())) return dateStr;
-  const y = parsed.getUTCFullYear();
-  const m = parsed.getUTCMonth();
-  const day = parsed.getUTCDate();
-  const dow = parsed.getUTCDay();
-  const start = new Date(Date.UTC(y, m, day - dow));
-  const ys = start.getUTCFullYear();
-  const ms = String(start.getUTCMonth() + 1).padStart(2, "0");
-  const ds = String(start.getUTCDate()).padStart(2, "0");
-  return `${ys}-${ms}-${ds}`;
-}
-function formatWeekStartDm(weekStartKey) {
-  const parsed = /* @__PURE__ */ new Date(`${weekStartKey}T00:00:00.000Z`);
-  if (Number.isNaN(parsed.getTime())) return weekStartKey;
-  return `${parsed.getUTCDate()}/${parsed.getUTCMonth() + 1}`;
-}
-function formatDayBreakdownDm(dateStr) {
-  const parsed = new Date(dateStr);
-  if (Number.isNaN(parsed.getTime())) return dateStr;
-  return `${parsed.getUTCDate()}/${parsed.getUTCMonth() + 1}`;
-}
-function toDateKeyUtcFromDate(d) {
-  const y = d.getUTCFullYear();
-  const m = String(d.getUTCMonth() + 1).padStart(2, "0");
-  const day = String(d.getUTCDate()).padStart(2, "0");
-  return `${y}-${m}-${day}`;
-}
-function lastNWeekStartKeysUtc(n) {
-  const now = /* @__PURE__ */ new Date();
-  const todayUtc = new Date(
-    Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate())
-  );
-  const dow = todayUtc.getUTCDay();
-  const currentWeekStart = new Date(todayUtc);
-  currentWeekStart.setUTCDate(currentWeekStart.getUTCDate() - dow);
-  const keys = [];
-  for (let i = n - 1; i >= 0; i -= 1) {
-    const d = new Date(currentWeekStart);
-    d.setUTCDate(d.getUTCDate() - 7 * i);
-    keys.push(toDateKeyUtcFromDate(d));
-  }
-  return keys;
-}
-function formatMonthBucketLabel(ymKey) {
-  const [ys, ms] = ymKey.split("-");
-  const y = Number(ys);
-  const m = Number(ms);
-  if (!Number.isFinite(y) || !Number.isFinite(m)) return ymKey;
-  return new Intl.DateTimeFormat("en-IN", {
-    month: "short",
-    timeZone: "UTC"
-  }).format(new Date(Date.UTC(y, m - 1, 1)));
-}
-function isSalesBreakdownBarRow(value) {
-  if (typeof value !== "object" || value === null) return false;
-  const v = value;
-  return typeof v.key === "string" && typeof v.label === "string" && typeof v.orders_count === "number" && typeof v.revenue === "number";
-}
-function SalesBreakdownTooltip({
-  active,
-  payload
-}) {
-  var _a, _b;
-  const { formatCurrency } = useAnalyticsCurrency();
-  if (!active || !(payload == null ? void 0 : payload.length)) return null;
-  const row = isSalesBreakdownBarRow((_a = payload[0]) == null ? void 0 : _a.payload) ? (_b = payload[0]) == null ? void 0 : _b.payload : void 0;
-  if (!row) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsTooltipCard, { variant: "compact", title: row.label, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      "Revenue: ",
-      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency(row.revenue) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      "Orders:",
-      " ",
-      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(row.orders_count).toLocaleString() })
-    ] })
-  ] });
-}
-function OrdersTodayTooltip({
-  active,
-  payload,
-  label
-}) {
-  var _a, _b, _c;
-  if (!active || !(payload == null ? void 0 : payload.length)) return null;
-  const row = isOrdersTodayPoint((_a = payload[0]) == null ? void 0 : _a.payload) ? (_b = payload[0]) == null ? void 0 : _b.payload : void 0;
-  const displayLabel = (row == null ? void 0 : row.label) ?? (label ? new Date(label).toLocaleDateString() : "");
-  const orders = ((_c = payload[0]) == null ? void 0 : _c.value) ?? 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsTooltipCard, { variant: "compact", title: displayLabel, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      "Orders: ",
-      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(orders).toLocaleString() })
-    ] }),
-    (row == null ? void 0 : row.isToday) ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#6B7280" }, children: "Current day" }) : null
-  ] });
-}
-function OutcomesTrendTooltip({
-  active,
-  payload,
-  label
-}) {
-  var _a, _b;
-  if (!active || !(payload == null ? void 0 : payload.length)) return null;
-  const row = isDailyOrderRow((_a = payload[0]) == null ? void 0 : _a.payload) ? (_b = payload[0]) == null ? void 0 : _b.payload : void 0;
-  const displayLabel = (row == null ? void 0 : row.label) ?? (label ? new Date(label).toLocaleDateString() : "");
-  return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsTooltipCard, { variant: "compact", title: displayLabel, children: payload.map((entry) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    entry.name,
-    ":",
-    " ",
-    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(Number(entry.value) || 0).toLocaleString() })
-  ] }, String(entry.name))) });
-}
-const TREND_MIX_PIE_COLORS = {
-  revenue: "#c084fc",
-  orders: "#7dd3fc",
-  aov: "#fdba74"
-};
-function buildTrendMixPieSlices(dailyOrders, trendRevenueTotal, trendOrdersTotal, formatCompactCurrencyFn, formatCurrencyFn) {
-  const ncRev = dailyOrders.reduce((s, d) => s + nonCancelledRevenue(d), 0);
-  const ncOrd = dailyOrders.reduce(
-    (s, d) => s + Math.max(0, d.orders_count - d.cancelled_count),
-    0
-  );
-  const windowAov = ncOrd > 0 ? ncRev / ncOrd : 0;
-  const lr = Math.log1p(Math.max(trendRevenueTotal, 0));
-  const lo = Math.log1p(Math.max(trendOrdersTotal, 0));
-  const la = Math.log1p(Math.max(windowAov, 0));
-  const sumW = lr + lo + la;
-  const share = (w) => sumW > 0 ? w / sumW * 100 : 100 / 3;
-  const sR = share(lr);
-  const sO = share(lo);
-  const sA = share(la);
-  return [
-    {
-      key: "revenue",
-      name: "Revenue",
-      value: sR,
-      fill: TREND_MIX_PIE_COLORS.revenue,
-      sharePercent: sR,
-      formattedPrimary: formatCompactCurrencyFn(trendRevenueTotal),
-      formattedDetail: "Total revenue for this range, all days summed."
-    },
-    {
-      key: "orders",
-      name: "Orders",
-      value: sO,
-      fill: TREND_MIX_PIE_COLORS.orders,
-      sharePercent: sO,
-      formattedPrimary: Math.floor(trendOrdersTotal).toLocaleString(),
-      formattedDetail: "Order count in this range from daily totals."
-    },
-    {
-      key: "aov",
-      name: "AOV",
-      value: sA,
-      fill: TREND_MIX_PIE_COLORS.aov,
-      sharePercent: sA,
-      formattedPrimary: formatCurrencyFn(windowAov),
-      formattedDetail: "Average per non-cancelled order for the window."
-    }
-  ];
-}
-const TREND_MIX_LEADER_STROKE = "#b8956a";
-function isTrendMixPayload(value) {
-  if (typeof value !== "object" || value === null) return false;
-  const k = value.key;
-  return k === "revenue" || k === "orders" || k === "aov";
-}
-function splitDetailTwoLines(s, firstLineMax) {
-  const t = s.trim();
-  if (t.length <= firstLineMax) return [t, ""];
-  const sliceEnd = t.lastIndexOf(" ", firstLineMax);
-  const cut = sliceEnd > firstLineMax * 0.45 ? sliceEnd : firstLineMax;
-  const a = t.slice(0, cut).trim();
-  const b = t.slice(cut).trim();
-  return b ? [a, b] : [a, ""];
-}
-function TrendMixExplodedSector(props) {
-  const {
-    cx,
-    cy,
-    innerRadius,
-    outerRadius,
-    startAngle,
-    endAngle,
-    fill,
-    stroke,
-    strokeWidth,
-    cornerRadius
-  } = props;
-  const midDeg = (Number(startAngle) + Number(endAngle)) / 2;
-  const rad = -midDeg * Math.PI / 180;
-  const offset = 19;
-  const ncx = (Number(cx) || 0) + offset * Math.cos(rad);
-  const ncy = (Number(cy) || 0) + offset * Math.sin(rad);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    recharts.Sector,
-    {
-      cx: ncx,
-      cy: ncy,
-      innerRadius,
-      outerRadius,
-      startAngle,
-      endAngle,
-      fill,
-      stroke,
-      strokeWidth,
-      cornerRadius,
-      style: {
-        filter: "drop-shadow(0 5px 6px rgba(0,0,0,0.5)) drop-shadow(0 2px 2px rgba(0,0,0,0.35))"
-      }
-    }
-  );
-}
-function createTrendMixInfographicLabel(slices) {
-  return function TrendMixInfographicLabel(props) {
-    const { cx, cy, midAngle, outerRadius, percent, payload, index } = props;
-    const slice = typeof index === "number" && slices[index] !== void 0 ? slices[index] : isTrendMixPayload(payload) ? payload : null;
-    if (slice === null || cx === void 0 || cy === void 0 || midAngle === void 0) {
-      return null;
-    }
-    const p = percent ?? 0;
-    const ang = midAngle;
-    const RAD = Math.PI / 180;
-    const cos = Math.cos(-RAD * ang);
-    const sin = Math.sin(-RAD * ang);
-    const or = Number(outerRadius);
-    if (!Number.isFinite(or)) return null;
-    const rimPad = 24;
-    const sx = Number(cx) + (or + rimPad) * cos;
-    const sy = Number(cy) + (or + rimPad) * sin;
-    const elbow = 30;
-    const mx = sx + elbow * cos;
-    const my = sy;
-    const extend = 58;
-    const rightSide = cos >= 0;
-    const hx = mx + (rightSide ? extend : -58);
-    const anchor = rightSide ? "start" : "end";
-    const tx = hx + (rightSide ? 4 : -4);
-    const yRule = my + 14;
-    const pctStr = `${(p * 100).toFixed(0)}%`;
-    const ruleHalfW = 52;
-    const xRuleA = rightSide ? tx - 2 : tx - ruleHalfW;
-    const xRuleB = rightSide ? tx + ruleHalfW : tx + 2;
-    const [detail1, detail2] = splitDetailTwoLines(slice.formattedDetail, 46);
-    return /* @__PURE__ */ jsxRuntime.jsxs("g", { "aria-hidden": true, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "polyline",
-        {
-          points: `${sx},${sy} ${mx},${my} ${hx},${yRule - 18}`,
-          fill: "none",
-          stroke: TREND_MIX_LEADER_STROKE,
-          strokeWidth: 1.15,
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "circle",
-        {
-          cx: sx,
-          cy: sy,
-          r: 3.5,
-          fill: "none",
-          stroke: TREND_MIX_LEADER_STROKE,
-          strokeWidth: 1.15
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "line",
-        {
-          x1: xRuleA,
-          y1: yRule,
-          x2: xRuleB,
-          y2: yRule,
-          stroke: TREND_MIX_LEADER_STROKE,
-          strokeWidth: 1.15,
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "text",
-        {
-          x: tx,
-          y: yRule - 8,
-          textAnchor: anchor,
-          fill: "#f8fafc",
-          className: "text-[13px] font-bold tabular-nums",
-          children: pctStr
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "text",
-        {
-          x: tx,
-          y: yRule + 16,
-          textAnchor: anchor,
-          fill: "#f1f5f9",
-          className: "text-[9px] font-semibold uppercase tracking-[0.16em]",
-          children: slice.name
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "text",
-        {
-          x: tx,
-          y: yRule + 32,
-          textAnchor: anchor,
-          fill: "#f8fafc",
-          className: "text-[11px] font-bold tabular-nums",
-          children: slice.formattedPrimary
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "text",
-        {
-          x: tx,
-          y: yRule + 46,
-          textAnchor: anchor,
-          fill: "#94a3b8",
-          className: "text-[8px] leading-snug",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("tspan", { x: tx, dy: 0, children: detail1 }),
-            detail2 ? /* @__PURE__ */ jsxRuntime.jsx("tspan", { x: tx, dy: 11, children: detail2 }) : null
-          ]
-        }
-      )
-    ] });
-  };
-}
-const KPI_ICON_BG$2 = {
-  green: "bg-emerald-500/20",
-  blue: "bg-sky-500/20",
-  purple: "bg-violet-500/20",
-  amber: "bg-amber-500/20"
-};
-const KPI_ICONS$2 = {
-  green: icons.CurrencyDollar,
-  blue: icons.ShoppingCart,
-  purple: icons.TruckFast,
-  amber: icons.Cash
-};
-const PIE_PALETTE = ["#6366F1", "#94A3B8", "#10B981", "#F59E0B"];
-function AtlasKpiCard$2({
-  label,
-  value,
-  helper,
-  accent
-}) {
-  const Icon = KPI_ICONS$2[accent];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-[112px] min-w-0 flex-col rounded-xl border border-ui-border-base/80 bg-ui-bg-subtle/25 p-4 shadow-sm", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "min-w-0 flex-1 text-left text-xs font-medium leading-snug text-ui-fg-base", children: label }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${KPI_ICON_BG$2[accent]}`,
-          "aria-hidden": true,
-          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4 text-ui-fg-base" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 text-xl font-semibold tabular-nums tracking-tight text-ui-fg-base sm:text-2xl", children: value }),
-    helper ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mt-2 text-[11px] leading-snug text-ui-fg-muted", children: helper }) : null
-  ] });
-}
-const SUMMARY_PERIODS$1 = [
+const SUMMARY_PERIODS = [
   { value: "all", label: "All time" },
   { value: "0", label: "Today's orders" },
   { value: "7", label: "Last 7 days" },
@@ -736,3472 +68,563 @@ const OVER_TIME_PERIODS = [
   { value: "one_month", label: "One month" },
   { value: "one_year", label: "One year" }
 ];
-const STATUS_BAR_COLORS = {
-  delivered: "#10B981",
-  cancelled: "#EF4444",
-  exchange: "#F59E0B",
-  return: "#8B5CF6",
-  today: "var(--medusa-color-ui-fg-interactive)",
-  todayMuted: "#BFDBFE",
-  orders: "#38BDF8",
-  revenue: "#D946EF"
-};
-const CHART_AXIS_TICK$2 = { fontSize: 10, fill: "#e5e7eb" };
-const CHART_AXIS_TICK_SM$1 = { fontSize: 9, fill: "#e5e7eb" };
-const CHART_AXIS_LINE$2 = "#94a3b8";
-const SELECT_CLASS_NAME$2 = "h-9 min-w-[132px] cursor-pointer appearance-none rounded border border-ui-border-base bg-ui-bg-base py-1.5 pl-3 pr-8 text-xs text-ui-fg-base outline-none transition focus:ring-2 focus:ring-ui-fg-interactive";
-function EmptyAnalyticsPanel$1({
-  title,
-  description
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-[88px] flex-col gap-1.5 rounded-lg border border-dashed border-ui-border-base px-3 py-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-xs font-semibold", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[11px] leading-snug", children: description })
-  ] });
-}
 function OrdersDashboard() {
-  var _a, _b, _c, _d, _e;
-  const { formatCurrency, formatCompactCurrency } = useAnalyticsCurrency();
   const [data, setData] = react.useState(null);
   const [loading, setLoading] = react.useState(true);
   const [error, setError] = react.useState(null);
   const [filter, setFilter] = react.useState("all");
   const [dailyOrders, setDailyOrders] = react.useState([]);
-  const [previousPeriodDailyOrders, setPreviousPeriodDailyOrders] = react.useState([]);
-  const [overTimePeriod, setOverTimePeriod] = react.useState("one_week");
-  const [overTimeLoading, setOverTimeLoading] = react.useState(true);
-  const [overTimeError, setOverTimeError] = react.useState(null);
-  const [overTimeOrdersMeta, setOverTimeOrdersMeta] = react.useState(null);
-  const [ordersInsights, setOrdersInsights] = react.useState(null);
-  const [insightsLoading, setInsightsLoading] = react.useState(true);
-  const [insightsError, setInsightsError] = react.useState(null);
-  const [todayContext, setTodayContext] = react.useState([]);
-  const [todayContextLoading, setTodayContextLoading] = react.useState(true);
-  const [todayContextError, setTodayContextError] = react.useState(null);
-  const [salesGranularity, setSalesGranularity] = react.useState("day");
-  const [salesBreakdownDaily, setSalesBreakdownDaily] = react.useState(
-    []
-  );
-  const [salesBreakdownOtLoading, setSalesBreakdownOtLoading] = react.useState(true);
-  const [salesBreakdownOtError, setSalesBreakdownOtError] = react.useState(null);
-  const [salesBreakdownHourlyRolling, setSalesBreakdownHourlyRolling] = react.useState([]);
-  const [salesBreakdownHourlyLoading, setSalesBreakdownHourlyLoading] = react.useState(false);
-  const [salesBreakdownHourlyError, setSalesBreakdownHourlyError] = react.useState(null);
-  const salesBreakdownOtPeriod = react.useMemo(
-    () => getSalesBreakdownOtPeriod(salesGranularity),
-    [salesGranularity]
-  );
-  react.useEffect(() => {
-    if (salesBreakdownOtPeriod === null) {
-      setSalesBreakdownDaily([]);
-      setSalesBreakdownOtLoading(false);
-      setSalesBreakdownOtError(null);
-      return;
-    }
-    let cancelled = false;
-    setSalesBreakdownOtLoading(true);
-    setSalesBreakdownOtError(null);
-    fetch(
-      `/admin/analytics/orders-over-time?period=${salesBreakdownOtPeriod}`,
-      { credentials: "include" }
-    ).then((res) => {
-      if (!res.ok) throw new Error(res.statusText);
-      return res.json();
-    }).then((body) => {
-      if (!cancelled) {
-        setSalesBreakdownDaily(body.dailyOrders ?? []);
-      }
-    }).catch((e) => {
-      if (!cancelled) {
-        setSalesBreakdownOtError(e instanceof Error ? e.message : String(e));
-      }
-    }).finally(() => {
-      if (!cancelled) setSalesBreakdownOtLoading(false);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [salesBreakdownOtPeriod]);
-  react.useEffect(() => {
-    if (salesGranularity !== "hour") {
-      setSalesBreakdownHourlyRolling([]);
-      setSalesBreakdownHourlyLoading(false);
-      setSalesBreakdownHourlyError(null);
-      return;
-    }
-    let cancelled = false;
-    setSalesBreakdownHourlyLoading(true);
-    setSalesBreakdownHourlyError(null);
-    fetch("/admin/analytics/orders-insights?last_hours=24", {
-      credentials: "include"
-    }).then((res) => {
-      if (!res.ok) throw new Error(res.statusText);
-      return res.json();
-    }).then((body) => {
-      if (!cancelled) {
-        setSalesBreakdownHourlyRolling(body.hourly_rolling ?? []);
-      }
-    }).catch((e) => {
-      if (!cancelled) {
-        setSalesBreakdownHourlyError(
-          e instanceof Error ? e.message : String(e)
-        );
-      }
-    }).finally(() => {
-      if (!cancelled) setSalesBreakdownHourlyLoading(false);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [salesGranularity]);
-  react.useEffect(() => {
-    let cancelled = false;
-    setLoading(true);
-    setError(null);
-    const url = `/admin/analytics/orders-summary?days=${filter}`;
-    fetch(url, { credentials: "include" }).then((res) => {
-      if (!res.ok) throw new Error(res.statusText);
-      return res.json();
-    }).then((body) => {
-      if (!cancelled) setData(body);
-    }).catch((e) => {
-      if (!cancelled) setError(e instanceof Error ? e.message : String(e));
-    }).finally(() => {
-      if (!cancelled) setLoading(false);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [filter]);
-  react.useEffect(() => {
-    let cancelled = false;
-    setOverTimeLoading(true);
-    setOverTimeError(null);
-    const url = `/admin/analytics/orders-over-time?period=${overTimePeriod}`;
-    fetch(url, { credentials: "include" }).then((res) => {
-      if (!res.ok) throw new Error(res.statusText);
-      return res.json();
-    }).then((body) => {
-      if (!cancelled) {
-        setDailyOrders(body.dailyOrders ?? []);
-        setPreviousPeriodDailyOrders(body.previousPeriodDailyOrders ?? []);
-        setOverTimeOrdersMeta(body.ordersAnalyticsMeta ?? null);
-      }
-    }).catch((e) => {
-      if (!cancelled) {
-        setOverTimeError(e instanceof Error ? e.message : String(e));
-        setOverTimeOrdersMeta(null);
-      }
-    }).finally(() => {
-      if (!cancelled) setOverTimeLoading(false);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [overTimePeriod]);
-  const insightsWindowDays = react.useMemo(() => {
-    if (overTimePeriod === "one_week") return 7;
-    if (overTimePeriod === "one_month") return 30;
-    return 365;
-  }, [overTimePeriod]);
-  react.useEffect(() => {
-    let cancelled = false;
-    setInsightsLoading(true);
-    setInsightsError(null);
-    fetch(`/admin/analytics/orders-insights?days=${insightsWindowDays}`, {
-      credentials: "include"
-    }).then((res) => {
-      if (!res.ok) throw new Error(res.statusText);
-      return res.json();
-    }).then((body) => {
-      if (!cancelled) setOrdersInsights(body);
-    }).catch((e) => {
-      if (!cancelled) setInsightsError(e instanceof Error ? e.message : String(e));
-    }).finally(() => {
-      if (!cancelled) setInsightsLoading(false);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [insightsWindowDays]);
-  react.useEffect(() => {
-    let cancelled = false;
-    setTodayContextLoading(true);
-    setTodayContextError(null);
-    fetch("/admin/analytics/orders-over-time?period=one_week", {
-      credentials: "include"
-    }).then((res) => {
-      if (!res.ok) throw new Error(res.statusText);
-      return res.json();
-    }).then((body) => {
-      if (!cancelled) setTodayContext(body.dailyOrders ?? []);
-    }).catch((e) => {
-      if (!cancelled) {
-        setTodayContextError(e instanceof Error ? e.message : String(e));
-      }
-    }).finally(() => {
-      if (!cancelled) setTodayContextLoading(false);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-  const selectedSummaryPeriod = ((_a = SUMMARY_PERIODS$1.find((period) => period.value === filter)) == null ? void 0 : _a.label) ?? "All time";
-  const operationsBreakdown = (data == null ? void 0 : data.operationalCounts) ?? {
-    cancelled: (data == null ? void 0 : data.cancelledOrders) ?? 0,
-    delivered: (data == null ? void 0 : data.deliveredOrders) ?? 0,
-    exchange: (data == null ? void 0 : data.exchangeOrders) ?? 0,
-    return: (data == null ? void 0 : data.returnOrders) ?? 0
-  };
-  const outcomesTimeSeriesHasPoints = react.useMemo(
-    () => dailyOrders.some(
-      (d) => d.delivered_count > 0 || d.cancelled_count > 0 || d.exchange_count > 0 || d.return_count > 0
-    ),
-    [dailyOrders]
-  );
-  const totalResolvedOrders = operationsBreakdown.delivered + operationsBreakdown.cancelled;
-  const deliveryRate = totalResolvedOrders > 0 ? operationsBreakdown.delivered / totalResolvedOrders * 100 : 0;
-  const primaryStats = data ? [
-    {
-      label: "Total revenue",
-      value: formatCurrency(data.totalRevenue),
-      helper: "Non-cancelled orders",
-      accent: "green"
-    },
-    {
-      label: "Total orders",
-      value: data.totalOrders.toLocaleString(),
-      helper: selectedSummaryPeriod,
-      accent: "blue"
-    },
-    {
-      label: "Delivery rate",
-      value: formatPercent(deliveryRate),
-      helper: "Delivered vs cancelled",
-      accent: "purple"
-    },
-    {
-      label: "Average order value",
-      value: formatCurrency(data.aov),
-      helper: "Per non-cancelled order",
-      accent: "amber"
-    }
-  ] : [];
-  const secondaryStats = data ? [
-    { label: "Orders today", value: data.ordersToday.toLocaleString() },
-    { label: "Pending orders", value: data.pendingOrders.toLocaleString() },
-    { label: "Delivered orders", value: data.deliveredOrders.toLocaleString() },
-    { label: "Cancelled orders", value: data.cancelledOrders.toLocaleString() },
-    { label: "Exchange orders", value: data.exchangeOrders.toLocaleString() },
-    {
-      label: "Avg. fulfillment time",
-      value: data.avgFulfillmentTimeHours != null ? `${data.avgFulfillmentTimeHours}h` : "—",
-      helper: "Measured in hours"
-    }
-  ] : [];
-  const todayChartData = react.useMemo(
-    () => todayContext.map((point, index) => ({
-      ...point,
-      isToday: index === todayContext.length - 1
-    })),
-    [todayContext]
-  );
-  const todayOrdersAverage = todayChartData.length > 0 ? todayChartData.reduce((sum, point) => sum + point.orders_count, 0) / todayChartData.length : 0;
-  const todayPoint = todayChartData[todayChartData.length - 1] ?? null;
-  const todayDelta = todayPoint && todayOrdersAverage > 0 ? todayPoint.orders_count - todayOrdersAverage : null;
-  const trendRevenueTotal = dailyOrders.reduce(
-    (sum, point) => sum + point.total_revenue,
-    0
-  );
-  const trendOrdersTotal = dailyOrders.reduce(
-    (sum, point) => sum + point.orders_count,
-    0
-  );
-  const trendAverageRevenue = dailyOrders.length > 0 ? trendRevenueTotal / dailyOrders.length : 0;
-  const trendAverageOrders = dailyOrders.length > 0 ? trendOrdersTotal / dailyOrders.length : 0;
-  const peakRevenuePoint = dailyOrders.length > 0 ? dailyOrders.reduce(
-    (peak, point) => point.total_revenue > peak.total_revenue ? point : peak
-  ) : null;
-  const previousPeriodRevenueTotal = react.useMemo(
-    () => previousPeriodDailyOrders.reduce((s, d) => s + d.total_revenue, 0),
-    [previousPeriodDailyOrders]
-  );
-  const previousPeriodOrdersTotal = react.useMemo(
-    () => previousPeriodDailyOrders.reduce((s, d) => s + d.orders_count, 0),
-    [previousPeriodDailyOrders]
-  );
-  const revenueVsPreviousPercent = previousPeriodRevenueTotal > 0 ? (trendRevenueTotal - previousPeriodRevenueTotal) / previousPeriodRevenueTotal * 100 : null;
-  const ordersVsPreviousPercent = previousPeriodOrdersTotal > 0 ? (trendOrdersTotal - previousPeriodOrdersTotal) / previousPeriodOrdersTotal * 100 : null;
-  const trendMixPieSlices = react.useMemo(
-    () => buildTrendMixPieSlices(
-      dailyOrders,
-      trendRevenueTotal,
-      trendOrdersTotal,
-      formatCompactCurrency,
-      formatCurrency
-    ),
-    [
-      dailyOrders,
-      trendRevenueTotal,
-      trendOrdersTotal,
-      formatCompactCurrency,
-      formatCurrency
-    ]
-  );
-  const trendMixPieLabelRenderer = react.useMemo(
-    () => createTrendMixInfographicLabel(trendMixPieSlices),
-    [trendMixPieSlices]
-  );
-  const trendMixRangeFootnote = react.useMemo(() => {
-    const ncRev = dailyOrders.reduce((s, d) => s + nonCancelledRevenue(d), 0);
-    const ncOrd = dailyOrders.reduce(
-      (s, d) => s + Math.max(0, d.orders_count - d.cancelled_count),
-      0
-    );
-    const windowAov = ncOrd > 0 ? ncRev / ncOrd : 0;
-    return {
-      revenue: formatCompactCurrency(trendRevenueTotal),
-      orders: Math.floor(trendOrdersTotal).toLocaleString(),
-      aov: formatCurrency(windowAov)
-    };
-  }, [
-    dailyOrders,
-    trendRevenueTotal,
-    trendOrdersTotal,
-    formatCompactCurrency,
-    formatCurrency
-  ]);
-  const salesBreakdownChartRows = react.useMemo(() => {
-    if (salesGranularity === "hour") {
-      return salesBreakdownHourlyRolling.map((b, i) => ({
-        key: `rolling-${i}`,
-        label: b.label,
-        orders_count: b.orders_count,
-        revenue: b.revenue
-      }));
-    }
-    if (salesGranularity === "week") {
-      const targetKeys = lastNWeekStartKeysUtc(7);
-      const agg = /* @__PURE__ */ new Map();
-      for (const d of salesBreakdownDaily) {
-        const wk = utcSundayWeekStartKeyFromDateStr(d.date);
-        const cur = agg.get(wk) ?? { orders: 0, revenue: 0 };
-        cur.orders += d.orders_count;
-        cur.revenue += d.total_revenue;
-        agg.set(wk, cur);
-      }
-      return targetKeys.map((key) => {
-        var _a2, _b2;
-        return {
-          key,
-          label: formatWeekStartDm(key),
-          orders_count: ((_a2 = agg.get(key)) == null ? void 0 : _a2.orders) ?? 0,
-          revenue: ((_b2 = agg.get(key)) == null ? void 0 : _b2.revenue) ?? 0
-        };
-      });
-    }
-    if (salesGranularity === "month") {
-      return salesBreakdownDaily.map((d) => ({
-        key: d.date,
-        label: d.label ?? formatMonthBucketLabel(monthKeyFromDateStr(d.date)),
-        orders_count: d.orders_count,
-        revenue: d.total_revenue
-      }));
-    }
-    return salesBreakdownDaily.map((d) => ({
-      key: d.date,
-      label: formatDayBreakdownDm(d.date),
-      orders_count: d.orders_count,
-      revenue: d.total_revenue
-    }));
-  }, [
-    salesGranularity,
-    salesBreakdownDaily,
-    salesBreakdownHourlyRolling
-  ]);
-  const salesBreakdownDescription = react.useMemo(() => {
-    switch (salesGranularity) {
-      case "hour":
-        return "Last 24 hours from now (UTC): one bar per clock hour in the rolling window.";
-      case "day":
-        return "Last 7 calendar days (UTC), one bar per day — axis day/month.";
-      case "week":
-        return "Last 7 weeks (UTC, weeks start Sunday); axis shows each week’s start as day/month.";
-      case "month":
-        return "Last 12 calendar months through the current month (UTC) — Jan, Feb, Mar, …";
-      default:
-        return "";
-    }
-  }, [salesGranularity]);
-  const salesBreakdownXAxisInterval = react.useMemo(() => {
-    const n = salesBreakdownChartRows.length;
-    if (salesGranularity === "hour") return 3;
-    if (salesGranularity === "day" && n > 24)
-      return Math.max(0, Math.ceil(n / 10) - 1);
-    return 0;
-  }, [salesGranularity, salesBreakdownChartRows.length]);
-  const ordersVsDraftsPie = react.useMemo(() => {
-    var _a2;
-    if (!ordersInsights) return [];
-    const placed = ((_a2 = ordersInsights.funnel[0]) == null ? void 0 : _a2.count) ?? 0;
-    const draftsCount = ordersInsights.drafts.available === true ? ordersInsights.drafts.count : 0;
-    return [
-      { name: "Orders placed (window)", value: placed, key: "placed" },
-      {
-        name: ordersInsights.drafts.available === true ? "Open draft orders (snapshot)" : "Draft orders (unavailable)",
-        value: draftsCount,
-        key: "drafts"
-      }
-    ];
-  }, [ordersInsights]);
-  const funnelTimeSeriesRows = react.useMemo(() => {
-    return dailyOrders.map((d) => {
-      const placed = d.orders_count;
-      const notCancelled = Math.max(0, d.orders_count - d.cancelled_count);
-      const shipped = d.shipped_count ?? 0;
-      const delivered = d.delivered_count;
-      const pctNotCancelled = placed > 0 ? notCancelled / placed * 100 : 0;
-      const pctShippedOfNc = notCancelled > 0 ? shipped / notCancelled * 100 : 0;
-      const pctDeliveredOfShipped = shipped > 0 ? delivered / shipped * 100 : 0;
-      return {
-        date: d.date,
-        label: d.label ?? formatChartLabel$2(d.date),
-        placed,
-        not_cancelled: notCancelled,
-        shipped,
-        delivered,
-        pct_not_cancelled: Math.round(pctNotCancelled * 10) / 10,
-        pct_shipped_of_active: Math.round(pctShippedOfNc * 10) / 10,
-        pct_delivered_of_shipped: Math.round(pctDeliveredOfShipped * 10) / 10
-      };
-    });
-  }, [dailyOrders]);
-  const selectedTrendPeriodLabel = ((_b = OVER_TIME_PERIODS.find((p) => p.value === overTimePeriod)) == null ? void 0 : _b.label) ?? "Selected range";
-  const orderSampleLikelyTruncated = (((_c = data == null ? void 0 : data.ordersAnalyticsMeta) == null ? void 0 : _c.likely_truncated) ?? false) || ((overTimeOrdersMeta == null ? void 0 : overTimeOrdersMeta.likely_truncated) ?? false) || (((_d = ordersInsights == null ? void 0 : ordersInsights.ordersAnalyticsMeta) == null ? void 0 : _d.likely_truncated) ?? false);
-  const quickPulseMetrics = [
-    {
-      label: "Range revenue",
-      value: formatCompactCurrency(trendRevenueTotal),
-      helper: selectedTrendPeriodLabel,
-      accentClassName: "border-emerald-400/25 bg-emerald-500/5"
-    },
-    {
-      label: "Range orders",
-      value: formatShortNumber$1(trendOrdersTotal),
-      helper: "Current trend window",
-      accentClassName: "border-sky-400/25 bg-sky-500/5"
-    },
-    {
-      label: "Avg/day orders",
-      value: trendAverageOrders.toFixed(1),
-      helper: "Across selected chart range",
-      accentClassName: "border-violet-400/25 bg-violet-500/5"
-    },
-    {
-      label: "Peak revenue day",
-      value: peakRevenuePoint ? formatCompactCurrency(peakRevenuePoint.total_revenue) : "—",
-      helper: (peakRevenuePoint == null ? void 0 : peakRevenuePoint.label) ?? formatChartLabel$2(peakRevenuePoint == null ? void 0 : peakRevenuePoint.date),
-      accentClassName: "border-amber-400/25 bg-amber-500/5"
-    }
-  ];
-  if (loading) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "flex min-h-[200px] items-center justify-center",
-        role: "status",
-        "aria-label": "Loading analytics",
-        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted", children: "Loading…" })
-      }
-    );
-  }
-  if (error || !data) {
-    return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger", children: error ?? "Failed to load analytics" }) });
-  }
-  const salesBreakdownWaiting = salesGranularity === "hour" ? salesBreakdownHourlyLoading : salesBreakdownOtLoading;
-  const salesBreakdownFetchError = salesGranularity === "hour" ? salesBreakdownHourlyError : salesBreakdownOtError;
-  const salesBreakdownBody = (() => {
-    if (salesBreakdownWaiting) {
-      return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[min(176px,28vh)] items-center justify-center py-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading chart…" }) }) });
-    }
-    if (salesBreakdownFetchError) {
-      return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[min(176px,28vh)] items-center justify-center px-2 py-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-center text-xs", children: salesBreakdownFetchError }) }) });
-    }
-    if (salesBreakdownChartRows.length === 0) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        EmptyAnalyticsPanel$1,
-        {
-          title: "No sales data",
-          description: "Nothing to show for this view and range."
-        }
-      );
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[min(200px,30vh)] min-h-[160px] w-full sm:h-[min(220px,32vh)]", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
-      recharts.BarChart,
-      {
-        data: salesBreakdownChartRows,
-        margin: { top: 4, right: 8, left: 4, bottom: 4 },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            recharts.CartesianGrid,
-            {
-              strokeDasharray: "3 3",
-              vertical: false,
-              stroke: "rgba(148,163,184,0.12)"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            recharts.XAxis,
-            {
-              dataKey: "label",
-              tick: CHART_AXIS_TICK_SM$1,
-              tickLine: false,
-              axisLine: false,
-              interval: salesBreakdownXAxisInterval
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            recharts.YAxis,
-            {
-              width: 44,
-              tick: CHART_AXIS_TICK_SM$1,
-              tickLine: false,
-              axisLine: false,
-              tickFormatter: (v) => formatCompactCurrency(Number(v))
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            recharts.Tooltip,
-            {
-              content: /* @__PURE__ */ jsxRuntime.jsx(SalesBreakdownTooltip, {}),
-              cursor: { fill: "rgba(148,163,184,0.08)" }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            recharts.Bar,
-            {
-              dataKey: "revenue",
-              name: "Revenue",
-              fill: "#D946EF",
-              radius: [6, 6, 0, 0]
-            }
-          )
-        ]
-      }
-    ) }) }) });
-  })();
-  return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsDashboardShell, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden rounded-2xl border border-ui-border-base/80 bg-ui-bg-base shadow-sm", children: [
-    orderSampleLikelyTruncated ? /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "border-b border-amber-400/30 bg-amber-500/10 px-4 py-2.5 sm:px-5",
-        role: "status",
-        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-ui-fg-base text-xs leading-snug", children: [
-          "Order analytics loaded up to ",
-          ORDERS_ANALYTICS_MAX_FETCH.toLocaleString(),
-          " ",
-          "orders per request. If you have more orders, KPIs and charts may under-count. Plan server-side aggregation or pagination for exact totals at very high volume."
-        ] })
-      }
-    ) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(
-      AnalyticsDashboardHeader,
-      {
-        variant: "premium",
-        appearance: "inset",
-        actionsBare: true,
-        title: "Orders",
-        description: "Revenue, volume, and outcomes in a compact overview sized for a single viewport.",
-        actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Label,
-              {
-                htmlFor: "analytics-period",
-                className: "shrink-0 text-ui-fg-muted text-xs font-medium",
-                children: "Period"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "select",
-              {
-                id: "analytics-period",
-                value: filter,
-                onChange: (e) => setFilter(e.target.value),
-                className: SELECT_CLASS_NAME$2,
-                children: SUMMARY_PERIODS$1.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.value, children: p.label }, p.value))
-              }
-            )
-          ] }),
-          filter !== "all" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => setFilter("all"),
-              className: "text-xs text-ui-fg-muted transition-colors hover:text-ui-fg-base",
-              "aria-label": "Show all orders (clear filter)",
-              children: "Clear period"
-            }
-          ) : null
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 p-3 pt-0 md:p-4 md:pt-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.16em]", children: "Order overview" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3 lg:grid-cols-4", children: primaryStats.map((stat) => /* @__PURE__ */ jsxRuntime.jsx(
-          AtlasKpiCard$2,
-          {
-            label: stat.label,
-            value: stat.value,
-            helper: stat.helper,
-            accent: stat.accent
-          },
-          stat.label
-        )) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 grid grid-cols-12 gap-2 xl:items-start", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12 xl:col-span-6", children: /* @__PURE__ */ jsxRuntime.jsx(
-          AnalyticsSection,
-          {
-            variant: "atlas",
-            actionsBare: true,
-            title: "Revenue & orders",
-            description: "Time series for the selected range. Window totals below match this chart.",
-            actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Label,
-                {
-                  htmlFor: "over-time-period",
-                  className: "shrink-0 text-ui-fg-muted text-xs font-medium",
-                  children: "Range"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "select",
-                {
-                  id: "over-time-period",
-                  value: overTimePeriod,
-                  onChange: (e) => setOverTimePeriod(e.target.value),
-                  className: SELECT_CLASS_NAME$2,
-                  children: OVER_TIME_PERIODS.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.value, children: p.label }, p.value))
-                }
-              )
-            ] }),
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-1.5 sm:grid-cols-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Window revenue" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: formatCompactCurrency(trendRevenueTotal) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-ui-fg-muted text-[10px]", children: [
-                    "Avg/day ",
-                    formatCompactCurrency(trendAverageRevenue)
-                  ] })
-                ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Window orders" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: trendOrdersTotal.toLocaleString() }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-ui-fg-muted text-[10px]", children: [
-                    "Avg/day ",
-                    trendAverageOrders.toFixed(1)
-                  ] })
-                ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "vs previous period" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: revenueVsPreviousPercent === null ? "—" : `${revenueVsPreviousPercent >= 0 ? "+" : ""}${revenueVsPreviousPercent.toFixed(1)}% rev` }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-ui-fg-muted text-[10px] leading-snug", children: [
-                    "Orders",
-                    " ",
-                    ordersVsPreviousPercent === null ? "—" : `${ordersVsPreviousPercent >= 0 ? "+" : ""}${ordersVsPreviousPercent.toFixed(1)}%`
-                  ] })
-                ] }) })
-              ] }),
-              !overTimeLoading && !overTimeError && dailyOrders.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsChartSurface, { variant: "atlas", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 min-w-0", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Revenue, orders & AOV" }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-ui-fg-muted text-[9px] leading-snug", children: [
-                      "Floating wedges with open center · leader labels only (no hover). Window:",
-                      " ",
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-fg-subtle", children: selectedTrendPeriodLabel }),
-                      "."
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    "div",
-                    {
-                      className: "w-full rounded-2xl bg-[radial-gradient(ellipse_at_50%_42%,rgba(148,163,184,0.14)_0%,transparent_58%)] py-1",
-                      role: "img",
-                      "aria-label": `Revenue, orders, and AOV for ${selectedTrendPeriodLabel}. Values are shown on leader labels.`,
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[min(340px,48vh)] min-h-[288px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.PieChart,
-                          {
-                            margin: { top: 20, right: 132, bottom: 28, left: 132 },
-                            children: /* @__PURE__ */ jsxRuntime.jsx(
-                              recharts.Pie,
-                              {
-                                data: trendMixPieSlices,
-                                dataKey: "value",
-                                nameKey: "name",
-                                cx: "50%",
-                                cy: "50%",
-                                startAngle: 90,
-                                endAngle: -270,
-                                innerRadius: "26%",
-                                outerRadius: "46%",
-                                paddingAngle: 9,
-                                cornerRadius: 8,
-                                stroke: "rgba(15,23,42,0.55)",
-                                strokeWidth: 2,
-                                shape: TrendMixExplodedSector,
-                                label: trendMixPieLabelRenderer,
-                                labelLine: false,
-                                isAnimationActive: false,
-                                children: trendMixPieSlices.map((slice) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: slice.fill }, slice.key))
-                              }
-                            )
-                          }
-                        ) }) }),
-                        /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "mt-2 px-1 text-center text-[9px] leading-snug text-ui-fg-muted", children: [
-                          "Range snapshot — Revenue ",
-                          trendMixRangeFootnote.revenue,
-                          " · Orders",
-                          " ",
-                          trendMixRangeFootnote.orders,
-                          " · AOV ",
-                          trendMixRangeFootnote.aov
-                        ] })
-                      ]
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsChartSurface, { variant: "atlas", className: "mt-1.5", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mb-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Revenue breakdown (stacked — by order status)" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[min(168px,26vh)] min-h-[140px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                    recharts.ComposedChart,
-                    {
-                      data: dailyOrders,
-                      margin: { top: 4, right: 8, left: -4, bottom: 0 },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.CartesianGrid,
-                          {
-                            stroke: "rgba(148,163,184,0.14)",
-                            strokeDasharray: "3 3",
-                            vertical: false
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.XAxis,
-                          {
-                            dataKey: "date",
-                            tick: CHART_AXIS_TICK$2,
-                            tickLine: false,
-                            axisLine: false,
-                            tickFormatter: (value) => {
-                              const row = dailyOrders.find(
-                                (d) => d.date === String(value)
-                              );
-                              return (row == null ? void 0 : row.label) ?? formatChartLabel$2(String(value));
-                            }
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.YAxis,
-                          {
-                            tick: CHART_AXIS_TICK$2,
-                            tickFormatter: (v) => formatCompactCurrency(Number(v))
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Tooltip,
-                          {
-                            content: ({ active, payload, label }) => active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsTooltipCard, { variant: "compact", title: String(label), children: payload.map((p) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                              p.name,
-                              ":",
-                              " ",
-                              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency(Number(p.value) || 0) })
-                            ] }, String(p.name))) }) : null
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { wrapperStyle: { fontSize: 10 }, iconType: "circle" }),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Area,
-                          {
-                            type: "natural",
-                            dataKey: "revenue_delivered",
-                            name: "Delivered",
-                            stackId: "r",
-                            fill: "#10B981",
-                            stroke: "#059669",
-                            fillOpacity: 0.85
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Area,
-                          {
-                            type: "natural",
-                            dataKey: "revenue_open",
-                            name: "Open / pending",
-                            stackId: "r",
-                            fill: "#3B82F6",
-                            stroke: "#2563eb",
-                            fillOpacity: 0.85
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Area,
-                          {
-                            type: "natural",
-                            dataKey: "revenue_cancelled",
-                            name: "Cancelled",
-                            stackId: "r",
-                            fill: "#F87171",
-                            stroke: "#EF4444",
-                            fillOpacity: 0.75
-                          }
-                        )
-                      ]
-                    }
-                  ) }) })
-                ] })
-              ] }) : null
-            ] })
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 flex flex-col gap-2 xl:col-span-6", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            AnalyticsSection,
-            {
-              variant: "atlas",
-              title: "Pulse & range",
-              description: "Window totals for the selected range.",
-              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-2", children: quickPulseMetrics.map((metric) => /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: `rounded-lg border border-ui-border-base bg-ui-bg-base px-2 py-2 shadow-sm ${metric.accentClassName}`.trim(),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: metric.label }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base mt-0.5 text-sm font-semibold tracking-tight", children: metric.value }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted mt-0.5 text-[9px] leading-snug", children: metric.helper })
-                  ]
-                },
-                metric.label
-              )) })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            AnalyticsSection,
-            {
-              variant: "atlas",
-              title: "Order → fulfillment funnel",
-              description: `Stages by order created date (UTC), same range as Revenue & orders (${((_e = OVER_TIME_PERIODS.find((p) => p.value === overTimePeriod)) == null ? void 0 : _e.label) ?? "period"}). Not storefront visitors.`,
-              children: overTimeLoading ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[120px] items-center justify-center py-3", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) }) : overTimeError ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[120px] items-center justify-center px-2 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-center text-xs", children: overTimeError }) }) }) : funnelTimeSeriesRows.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsChartSurface, { variant: "atlas", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mb-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Stage counts (time series)" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[min(200px,30vh)] min-h-[168px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                    recharts.LineChart,
-                    {
-                      data: funnelTimeSeriesRows,
-                      margin: { top: 4, right: 8, left: 0, bottom: 4 },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.CartesianGrid,
-                          {
-                            strokeDasharray: "3 3",
-                            stroke: "rgba(148,163,184,0.2)"
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.XAxis,
-                          {
-                            dataKey: "date",
-                            tick: CHART_AXIS_TICK_SM$1,
-                            stroke: CHART_AXIS_LINE$2,
-                            tickLine: { stroke: CHART_AXIS_LINE$2 },
-                            tickFormatter: (value) => {
-                              const row = dailyOrders.find((r) => r.date === value);
-                              return (row == null ? void 0 : row.label) ?? formatChartLabel$2(String(value));
-                            }
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.YAxis,
-                          {
-                            tick: CHART_AXIS_TICK_SM$1,
-                            stroke: CHART_AXIS_LINE$2,
-                            tickLine: { stroke: CHART_AXIS_LINE$2 },
-                            width: 28,
-                            allowDecimals: false,
-                            tickFormatter: (v) => Math.floor(Number(v) || 0).toLocaleString()
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Tooltip,
-                          {
-                            content: ({ active, payload, label }) => {
-                              var _a2;
-                              return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxRuntime.jsx(
-                                AnalyticsTooltipCard,
-                                {
-                                  variant: "compact",
-                                  title: typeof label === "string" ? ((_a2 = dailyOrders.find((r) => r.date === label)) == null ? void 0 : _a2.label) ?? formatChartLabel$2(label) : String(label),
-                                  children: payload.map((p) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                                    String(p.name),
-                                    ":",
-                                    " ",
-                                    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(Number(p.value) || 0).toLocaleString() })
-                                  ] }, String(p.dataKey)))
-                                }
-                              ) : null;
-                            }
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Legend,
-                          {
-                            wrapperStyle: { fontSize: 9, color: "#e5e7eb", paddingTop: 4 },
-                            iconType: "circle",
-                            iconSize: 6
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Line,
-                          {
-                            type: "natural",
-                            dataKey: "placed",
-                            name: "Placed",
-                            stroke: "#6366F1",
-                            strokeWidth: 2,
-                            dot: false
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Line,
-                          {
-                            type: "natural",
-                            dataKey: "not_cancelled",
-                            name: "Not cancelled",
-                            stroke: "#22d3ee",
-                            strokeWidth: 2,
-                            dot: false
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Line,
-                          {
-                            type: "natural",
-                            dataKey: "shipped",
-                            name: "Shipped",
-                            stroke: "#F59E0B",
-                            strokeWidth: 2,
-                            dot: false
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Line,
-                          {
-                            type: "natural",
-                            dataKey: "delivered",
-                            name: "Delivered",
-                            stroke: "#10B981",
-                            strokeWidth: 2,
-                            dot: false
-                          }
-                        )
-                      ]
-                    }
-                  ) }) })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsChartSurface, { variant: "atlas", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mb-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Stage conversion (% of prior stage, same buckets)" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[min(168px,26vh)] min-h-[140px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                    recharts.LineChart,
-                    {
-                      data: funnelTimeSeriesRows,
-                      margin: { top: 4, right: 8, left: 0, bottom: 4 },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.CartesianGrid,
-                          {
-                            strokeDasharray: "3 3",
-                            stroke: "rgba(148,163,184,0.2)"
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.XAxis,
-                          {
-                            dataKey: "date",
-                            tick: CHART_AXIS_TICK_SM$1,
-                            stroke: CHART_AXIS_LINE$2,
-                            tickLine: { stroke: CHART_AXIS_LINE$2 },
-                            tickFormatter: (value) => {
-                              const row = dailyOrders.find((r) => r.date === value);
-                              return (row == null ? void 0 : row.label) ?? formatChartLabel$2(String(value));
-                            }
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.YAxis,
-                          {
-                            domain: [0, 100],
-                            tick: CHART_AXIS_TICK_SM$1,
-                            stroke: CHART_AXIS_LINE$2,
-                            tickLine: { stroke: CHART_AXIS_LINE$2 },
-                            width: 36,
-                            tickFormatter: (v) => `${Math.round(Number(v) || 0)}%`
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Tooltip,
-                          {
-                            content: ({ active, payload, label }) => {
-                              var _a2;
-                              return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxRuntime.jsx(
-                                AnalyticsTooltipCard,
-                                {
-                                  variant: "compact",
-                                  title: typeof label === "string" ? ((_a2 = dailyOrders.find((r) => r.date === label)) == null ? void 0 : _a2.label) ?? formatChartLabel$2(label) : String(label),
-                                  children: payload.map((p) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                                    String(p.name),
-                                    ":",
-                                    " ",
-                                    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatPercent(Number(p.value) || 0) })
-                                  ] }, String(p.dataKey)))
-                                }
-                              ) : null;
-                            }
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Legend,
-                          {
-                            wrapperStyle: { fontSize: 9, color: "#e5e7eb", paddingTop: 4 },
-                            iconType: "circle",
-                            iconSize: 6
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Line,
-                          {
-                            type: "natural",
-                            dataKey: "pct_not_cancelled",
-                            name: "Not cancelled / placed",
-                            stroke: "#6366F1",
-                            strokeWidth: 2,
-                            dot: false
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Line,
-                          {
-                            type: "natural",
-                            dataKey: "pct_shipped_of_active",
-                            name: "Shipped / not cancelled",
-                            stroke: "#F59E0B",
-                            strokeWidth: 2,
-                            dot: false
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Line,
-                          {
-                            type: "natural",
-                            dataKey: "pct_delivered_of_shipped",
-                            name: "Delivered / shipped",
-                            stroke: "#10B981",
-                            strokeWidth: 2,
-                            dot: false
-                          }
-                        )
-                      ]
-                    }
-                  ) }) })
-                ] })
-              ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-                EmptyAnalyticsPanel$1,
-                {
-                  title: "No funnel data",
-                  description: "No orders in this range to chart."
-                }
-              )
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 space-y-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.16em]", children: "Operational signals" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-2 lg:grid-cols-3 xl:grid-cols-6", children: secondaryStats.map((stat) => /* @__PURE__ */ jsxRuntime.jsx(
-          AnalyticsStatCard,
-          {
-            label: stat.label,
-            value: stat.value,
-            helper: stat.helper,
-            variant: "compact"
-          },
-          stat.label
-        )) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 grid grid-cols-1 items-start gap-2 xl:grid-cols-12", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AnalyticsSection,
-          {
-            variant: "atlas",
-            className: "xl:col-span-7",
-            title: "Order outcomes",
-            description: "Delivered, cancelled, exchanges, and returns per bucket — same window as Revenue & orders.",
-            children: /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[176px] sm:h-[196px]", children: overTimeLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) : overTimeError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-xs", children: overTimeError }) }) : !outcomesTimeSeriesHasPoints ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "No outcome events in this range." }) }) : /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
-              recharts.LineChart,
-              {
-                data: dailyOrders,
-                margin: { top: 4, right: 8, left: 0, bottom: 0 },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.CartesianGrid,
-                    {
-                      stroke: "rgba(148,163,184,0.14)",
-                      strokeDasharray: "3 3",
-                      vertical: false
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.XAxis,
-                    {
-                      dataKey: "date",
-                      tick: CHART_AXIS_TICK$2,
-                      tickLine: false,
-                      axisLine: false,
-                      tickFormatter: (value) => {
-                        const dateStr = typeof value === "string" ? value : String(value);
-                        const row = dailyOrders.find((d) => d.date === dateStr);
-                        return (row == null ? void 0 : row.label) ?? formatChartLabel$2(dateStr);
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.YAxis,
-                    {
-                      width: 28,
-                      tick: CHART_AXIS_TICK$2,
-                      tickLine: false,
-                      axisLine: false,
-                      allowDecimals: false,
-                      tickFormatter: (value) => Math.floor(Number(value) || 0).toLocaleString()
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.Tooltip,
-                    {
-                      content: /* @__PURE__ */ jsxRuntime.jsx(OutcomesTrendTooltip, {}),
-                      cursor: { stroke: "rgba(148,163,184,0.35)", strokeWidth: 1 }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.Legend,
-                    {
-                      wrapperStyle: { fontSize: 9, paddingTop: 0 },
-                      iconType: "circle",
-                      iconSize: 6
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.Line,
-                    {
-                      type: "natural",
-                      dataKey: "delivered_count",
-                      name: "Delivered",
-                      stroke: STATUS_BAR_COLORS.delivered,
-                      strokeWidth: 2,
-                      dot: false
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.Line,
-                    {
-                      type: "natural",
-                      dataKey: "cancelled_count",
-                      name: "Cancelled",
-                      stroke: STATUS_BAR_COLORS.cancelled,
-                      strokeWidth: 2,
-                      dot: false
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.Line,
-                    {
-                      type: "natural",
-                      dataKey: "exchange_count",
-                      name: "Exchanges",
-                      stroke: STATUS_BAR_COLORS.exchange,
-                      strokeWidth: 2,
-                      dot: false
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.Line,
-                    {
-                      type: "natural",
-                      dataKey: "return_count",
-                      name: "Returns",
-                      stroke: STATUS_BAR_COLORS.return,
-                      strokeWidth: 2,
-                      dot: false
-                    }
-                  )
-                ]
-              }
-            ) }) }) })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AnalyticsSection,
-          {
-            variant: "atlas",
-            className: "xl:col-span-5",
-            title: "Recent orders (7 days)",
-            description: "Daily order count vs 7-day average — time series.",
-            children: /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-1.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-ui-border-base bg-ui-bg-subtle/50 px-2 py-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Today" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-base font-semibold tracking-tight", children: (todayPoint == null ? void 0 : todayPoint.orders_count.toLocaleString()) ?? "0" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-ui-border-base bg-ui-bg-subtle/50 px-2 py-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "7-day avg" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-base font-semibold tracking-tight", children: todayOrdersAverage.toFixed(1) })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[140px] sm:h-[156px]", children: todayContextLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) : todayContextError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-xs", children: todayContextError }) }) : todayChartData.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "No recent activity." }) }) : /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                recharts.ComposedChart,
-                {
-                  data: todayChartData,
-                  margin: { top: 4, right: 4, left: -4, bottom: 0 },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "todayOrdersFill", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#3b82f6", stopOpacity: 0.2 }),
-                      /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#3b82f6", stopOpacity: 0 })
-                    ] }) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      recharts.CartesianGrid,
-                      {
-                        stroke: "rgba(148,163,184,0.14)",
-                        strokeDasharray: "3 3",
-                        vertical: false
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      recharts.XAxis,
-                      {
-                        dataKey: "date",
-                        tick: CHART_AXIS_TICK$2,
-                        tickLine: false,
-                        axisLine: false,
-                        tickFormatter: formatChartLabel$2
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      recharts.YAxis,
-                      {
-                        width: 28,
-                        tick: CHART_AXIS_TICK$2,
-                        tickLine: false,
-                        axisLine: false,
-                        allowDecimals: false,
-                        tickFormatter: (value) => Math.floor(Number(value) || 0).toLocaleString()
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(OrdersTodayTooltip, {}), cursor: { stroke: "rgba(148,163,184,0.35)", strokeWidth: 1 } }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      recharts.ReferenceLine,
-                      {
-                        y: todayOrdersAverage,
-                        stroke: "rgba(148,163,184,0.65)",
-                        strokeDasharray: "4 4"
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      recharts.Area,
-                      {
-                        type: "natural",
-                        dataKey: "orders_count",
-                        stroke: "none",
-                        fill: "url(#todayOrdersFill)",
-                        isAnimationActive: false
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      recharts.Line,
-                      {
-                        type: "natural",
-                        dataKey: "orders_count",
-                        name: "Orders",
-                        stroke: "#3b82f6",
-                        strokeWidth: 2,
-                        dot: (props) => {
-                          const { cx, cy, payload } = props;
-                          if (payload && typeof payload === "object" && "isToday" in payload && payload.isToday) {
-                            return /* @__PURE__ */ jsxRuntime.jsx(
-                              "circle",
-                              {
-                                cx,
-                                cy,
-                                r: 4,
-                                fill: STATUS_BAR_COLORS.today,
-                                stroke: "var(--medusa-color-ui-bg-base)",
-                                strokeWidth: 1
-                              }
-                            );
-                          }
-                          return /* @__PURE__ */ jsxRuntime.jsx("circle", { cx, cy, r: 0, fill: "transparent" });
-                        }
-                      }
-                    )
-                  ]
-                }
-              ) }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "rounded-lg border border-ui-border-base bg-ui-bg-subtle/40 px-2 py-1.5 shadow-sm", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Note" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-[11px] leading-snug", children: todayDelta === null ? "Compares the latest day to the 7-day mean." : todayDelta >= 0 ? `Latest day is ${todayDelta.toFixed(1)} above the 7-day average.` : `Latest day is ${Math.abs(todayDelta).toFixed(1)} below the 7-day average.` })
-              ] })
-            ] }) })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 grid grid-cols-1 items-start gap-3 xl:grid-cols-12", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AnalyticsSection,
-          {
-            variant: "atlas",
-            className: "xl:col-span-8",
-            title: "Sales breakdown",
-            description: salesBreakdownDescription,
-            actionsBare: true,
-            actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-stretch gap-1 sm:flex-row sm:items-center sm:gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Label,
-                {
-                  htmlFor: "sales-breakdown-granularity",
-                  className: "shrink-0 text-ui-fg-muted text-xs font-medium",
-                  children: "Breakdown"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "select",
-                {
-                  id: "sales-breakdown-granularity",
-                  value: salesGranularity,
-                  onChange: (e) => {
-                    const v = e.target.value;
-                    if (v === "hour" || v === "day" || v === "week" || v === "month") {
-                      setSalesGranularity(v);
-                    }
-                  },
-                  className: SELECT_CLASS_NAME$2,
-                  "aria-label": "Sales breakdown time bucket",
-                  children: SALES_GRANULARITY_TABS.map((tab) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: tab.value, children: tab.value === "hour" ? "Hour (last 24h)" : tab.value === "day" ? "Day (last 7 days)" : tab.value === "week" ? "Week (last 7 weeks)" : "Month (last 12 months)" }, tab.value))
-                }
-              )
-            ] }),
-            children: salesBreakdownBody
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AnalyticsSection,
-          {
-            variant: "atlas",
-            className: "xl:col-span-4",
-            title: "Placed orders vs drafts",
-            description: "Window order count vs current open draft orders (admin). Not storefront cart abandonment.",
-            children: insightsLoading ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[100px] items-center justify-center py-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) }) : insightsError ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[100px] items-center justify-center px-2 py-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-center text-xs", children: insightsError }) }) }) : ordersVsDraftsPie.some((s) => s.value > 0) ? /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsChartSurface, { variant: "atlas", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[min(176px,28vh)] min-h-[148px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { margin: { top: 2, bottom: 2, left: 2, right: 2 }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  recharts.Pie,
-                  {
-                    data: ordersVsDraftsPie,
-                    dataKey: "value",
-                    nameKey: "name",
-                    cx: "50%",
-                    cy: "46%",
-                    innerRadius: 40,
-                    outerRadius: 58,
-                    paddingAngle: 2,
-                    children: ordersVsDraftsPie.map((slice, i) => /* @__PURE__ */ jsxRuntime.jsx(
-                      recharts.Cell,
-                      {
-                        fill: PIE_PALETTE[i % PIE_PALETTE.length]
-                      },
-                      slice.key
-                    ))
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  recharts.Tooltip,
-                  {
-                    content: ({ active, payload }) => {
-                      var _a2, _b2;
-                      return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsTooltipCard, { variant: "compact", title: String(((_a2 = payload[0]) == null ? void 0 : _a2.name) ?? ""), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                        "Count:",
-                        " ",
-                        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(
-                          Number((_b2 = payload[0]) == null ? void 0 : _b2.value) || 0
-                        ).toLocaleString() })
-                      ] }) }) : null;
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  recharts.Legend,
-                  {
-                    wrapperStyle: { fontSize: 9, paddingTop: 0 },
-                    verticalAlign: "bottom",
-                    height: 22,
-                    iconType: "circle"
-                  }
-                )
-              ] }) }) }),
-              (ordersInsights == null ? void 0 : ordersInsights.drafts.available) === false ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted mt-0.5 px-0.5 text-[10px] leading-snug", children: "Draft totals need draft_order remote query access." }) : null
-            ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-              EmptyAnalyticsPanel$1,
-              {
-                title: "Nothing to compare",
-                description: "No placed orders and no draft rows in this snapshot."
-              }
-            )
-          }
-        )
-      ] })
-    ] })
-  ] }) });
-}
-const KPI_ICON_BG$1 = {
-  green: "bg-emerald-500/20",
-  blue: "bg-sky-500/20",
-  purple: "bg-violet-500/20",
-  amber: "bg-amber-500/20"
-};
-const KPI_ICONS$1 = {
-  green: icons.UsersSolid,
-  blue: icons.User,
-  purple: icons.UserGroup,
-  amber: icons.Trash
-};
-function AtlasKpiCard$1({
-  label,
-  value,
-  helper,
-  accent
-}) {
-  const Icon = KPI_ICONS$1[accent];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-[88px] min-w-0 flex-col rounded-xl border border-ui-border-base/80 bg-ui-bg-subtle/25 p-3 shadow-sm", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "min-w-0 flex-1 text-left text-xs font-medium leading-snug text-ui-fg-base", children: label }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: `flex h-7 w-7 shrink-0 items-center justify-center rounded-lg ${KPI_ICON_BG$1[accent]}`,
-          "aria-hidden": true,
-          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-3.5 w-3.5 text-ui-fg-base" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-lg font-semibold tabular-nums tracking-tight text-ui-fg-base sm:text-xl", children: value }),
-    helper ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mt-2 text-[11px] leading-snug text-ui-fg-muted", children: helper }) : null
-  ] });
-}
-function CustomersOverTimeTooltip({
-  active,
-  payload,
-  label
-}) {
-  var _a, _b, _c;
-  if (!active || !(payload == null ? void 0 : payload.length)) return null;
-  const row = (_a = payload[0]) == null ? void 0 : _a.payload;
-  const displayLabel = (row == null ? void 0 : row.label) ?? (label ? new Date(label).toLocaleDateString() : label);
-  const registered = Math.floor(((_b = payload.find((p) => p.name === "Registered")) == null ? void 0 : _b.value) ?? 0);
-  const guest = Math.floor(((_c = payload.find((p) => p.name === "Guest")) == null ? void 0 : _c.value) ?? 0);
-  return /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsTooltipCard, { title: String(displayLabel ?? ""), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      "Registered: ",
-      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: registered.toLocaleString() })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      "Guest: ",
-      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: guest.toLocaleString() })
-    ] })
-  ] });
-}
-function MixPieTooltip({
-  active,
-  payload
-}) {
-  if (!active || !(payload == null ? void 0 : payload.length)) return null;
-  const row = payload[0];
-  return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsTooltipCard, { variant: "compact", title: String(row.name ?? ""), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    "Count: ",
-    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(Number(row.value) || 0).toLocaleString() })
-  ] }) });
-}
-const COUNT_DAY_PRESETS = [
-  { value: "all", label: "All time" },
-  { value: "0", label: "Today" },
-  { value: "7", label: "Last 7 days" },
-  { value: "30", label: "Last 30 days" },
-  { value: "90", label: "Last 90 days" }
-];
-const GRAPH_PERIODS$1 = [
-  { value: "one_week", label: "One week" },
-  { value: "one_month", label: "One month" },
-  { value: "one_year", label: "One year" }
-];
-const REGISTERED_COLOR = "var(--medusa-color-ui-fg-interactive)";
-const GUEST_COLOR = "#6B7280";
-const CHART_AXIS_TICK$1 = { fontSize: 10, fill: "#e5e7eb" };
-const CHART_AXIS_LINE$1 = "#94a3b8";
-const SELECT_CLASS_NAME$1 = "h-9 w-full min-w-[8rem] max-w-full cursor-pointer appearance-none rounded border border-ui-border-base bg-ui-bg-base py-1.5 pl-3 pr-8 text-xs text-ui-fg-base outline-none transition focus:ring-2 focus:ring-ui-fg-interactive sm:w-auto sm:min-w-[132px] sm:max-w-[220px]";
-function formatChartLabel$1(value) {
-  if (!value) return "";
-  const parsed = new Date(value);
-  if (Number.isNaN(parsed.getTime())) return value;
-  return `${parsed.getUTCMonth() + 1}/${parsed.getUTCDate()}`;
-}
-function CustomersDashboard() {
-  var _a, _b, _c;
-  const [data, setData] = react.useState(null);
-  const [loading, setLoading] = react.useState(true);
-  const [error, setError] = react.useState(null);
-  const [countDays, setCountDays] = react.useState("all");
-  const [series, setSeries] = react.useState([]);
-  const [graphPeriod, setGraphPeriod] = react.useState("one_week");
-  const [graphLoading, setGraphLoading] = react.useState(true);
-  const [graphError, setGraphError] = react.useState(null);
-  const [repeatStats, setRepeatStats] = react.useState(null);
-  const [repeatLoading, setRepeatLoading] = react.useState(true);
-  const [repeatError, setRepeatError] = react.useState(null);
-  react.useEffect(() => {
-    let cancelled = false;
-    setLoading(true);
-    setError(null);
-    const url = `/admin/analytics/customers-summary?days=${countDays}`;
-    fetch(url, { credentials: "include" }).then((res) => {
-      if (!res.ok) throw new Error(res.statusText);
-      return res.json();
-    }).then((body) => {
-      if (!cancelled) setData(body);
-    }).catch((e) => {
-      if (!cancelled) setError(e instanceof Error ? e.message : String(e));
-    }).finally(() => {
-      if (!cancelled) setLoading(false);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [countDays]);
-  react.useEffect(() => {
-    let cancelled = false;
-    setGraphLoading(true);
-    setGraphError(null);
-    const url = `/admin/analytics/customers-over-time?period=${graphPeriod}`;
-    fetch(url, { credentials: "include" }).then((res) => {
-      if (!res.ok) throw new Error(res.statusText);
-      return res.json();
-    }).then((body) => {
-      if (!cancelled) setSeries(body.series ?? []);
-    }).catch((e) => {
-      if (!cancelled) setGraphError(e instanceof Error ? e.message : String(e));
-    }).finally(() => {
-      if (!cancelled) setGraphLoading(false);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [graphPeriod]);
-  react.useEffect(() => {
-    let cancelled = false;
-    setRepeatLoading(true);
-    setRepeatError(null);
-    fetch(`/admin/analytics/repeat-customers?days=${countDays}`, {
-      credentials: "include"
-    }).then((res) => {
-      if (!res.ok) throw new Error(res.statusText);
-      return res.json();
-    }).then((body) => {
-      if (!cancelled) setRepeatStats(body);
-    }).catch((e) => {
-      if (!cancelled) setRepeatError(e instanceof Error ? e.message : String(e));
-    }).finally(() => {
-      if (!cancelled) setRepeatLoading(false);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [countDays]);
-  const selectedCountPeriodLabel = ((_a = COUNT_DAY_PRESETS.find((p) => p.value === countDays)) == null ? void 0 : _a.label) ?? "All time";
-  const guestRegisteredPieData = react.useMemo(() => {
-    const g = Math.max(0, Math.floor((data == null ? void 0 : data.guestCount) ?? 0));
-    const r = Math.max(0, Math.floor((data == null ? void 0 : data.registeredCount) ?? 0));
-    return [
-      { name: "Guest checkout", value: g, key: "guest" },
-      { name: "Registered", value: r, key: "registered" }
-    ].filter((s) => s.value > 0);
-  }, [data]);
-  const seriesWindowTotals = react.useMemo(() => {
-    let registered = 0;
-    let guest = 0;
-    for (const row of series) {
-      registered += Math.max(0, Math.floor(row.registered_count));
-      guest += Math.max(0, Math.floor(row.guest_count));
-    }
-    return {
-      registered,
-      guest,
-      points: series.length
-    };
-  }, [series]);
-  const primaryStats = data ? [
-    {
-      label: "Guest customers",
-      value: Math.floor(data.guestCount).toLocaleString(),
-      helper: selectedCountPeriodLabel,
-      accent: "blue"
-    },
-    {
-      label: "Registered customers",
-      value: Math.floor(data.registeredCount).toLocaleString(),
-      helper: selectedCountPeriodLabel,
-      accent: "purple"
-    },
-    {
-      label: "Overall customers",
-      value: Math.floor(data.totalCount).toLocaleString(),
-      helper: "Guest + registered",
-      accent: "green"
-    },
-    {
-      label: "Deleted accounts",
-      value: (data.deletedAccountsCount ?? 0).toLocaleString(),
-      helper: "Removed profiles",
-      accent: "amber"
-    }
-  ] : [];
-  if (loading) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "flex min-h-[200px] items-center justify-center",
-        role: "status",
-        "aria-label": "Loading analytics",
-        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted", children: "Loading…" })
-      }
-    );
-  }
-  if (error || !data) {
-    return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger", children: error ?? "Failed to load analytics" }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsDashboardShell, { className: "w-full min-w-0 max-w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full min-w-0 max-w-full overflow-hidden rounded-2xl border border-ui-border-base/80 bg-ui-bg-base shadow-sm", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      AnalyticsDashboardHeader,
-      {
-        variant: "premium",
-        appearance: "inset",
-        actionsBare: true,
-        title: "Customers",
-        description: "Acquisition mix, repeat behavior, and signups over time — aligned with Orders and Products analytics.",
-        actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Label,
-              {
-                htmlFor: "customers-count-period",
-                className: "shrink-0 text-ui-fg-muted text-xs font-medium",
-                children: "Period"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "select",
-              {
-                id: "customers-count-period",
-                value: countDays,
-                onChange: (e) => setCountDays(e.target.value),
-                className: SELECT_CLASS_NAME$1,
-                children: COUNT_DAY_PRESETS.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.value, children: p.label }, p.value))
-              }
-            )
-          ] }),
-          countDays !== "all" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => setCountDays("all"),
-              className: "text-xs text-ui-fg-muted transition-colors hover:text-ui-fg-base",
-              "aria-label": "Show all customers (clear filter)",
-              children: "Clear period"
-            }
-          ) : null
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 p-2 pt-0 sm:p-3 sm:pt-0 md:p-4 md:pt-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.16em]", children: "Customer overview" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-2 lg:grid-cols-4", children: primaryStats.map((stat) => /* @__PURE__ */ jsxRuntime.jsx(
-          AtlasKpiCard$1,
-          {
-            label: stat.label,
-            value: stat.value,
-            helper: stat.helper,
-            accent: stat.accent
-          },
-          stat.label
-        )) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 grid grid-cols-12 gap-2 lg:items-stretch", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12 flex min-h-0 min-w-0 lg:col-span-5", children: /* @__PURE__ */ jsxRuntime.jsx(
-          AnalyticsSection,
-          {
-            variant: "atlas",
-            className: "flex min-h-0 w-full flex-col",
-            title: "Guest vs registered",
-            description: "Mix for the selected period (same filter as overview).",
-            children: /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", className: "min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[min(168px,22vh)] min-h-[140px] w-full sm:h-[min(176px,24vh)]", children: guestRegisteredPieData.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-2", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-center text-ui-fg-muted text-[11px] leading-snug", children: "No guest or registered customers in this range." }) }) : /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { margin: { top: 2, right: 2, left: 2, bottom: 2 }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                recharts.Pie,
-                {
-                  data: guestRegisteredPieData,
-                  dataKey: "value",
-                  nameKey: "name",
-                  cx: "50%",
-                  cy: "48%",
-                  innerRadius: 34,
-                  outerRadius: 54,
-                  paddingAngle: 2,
-                  children: guestRegisteredPieData.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.Cell,
-                    {
-                      fill: entry.key === "guest" ? GUEST_COLOR : REGISTERED_COLOR
-                    },
-                    entry.key
-                  ))
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(MixPieTooltip, {}) }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                recharts.Legend,
-                {
-                  wrapperStyle: { fontSize: 9, paddingTop: 0 },
-                  verticalAlign: "bottom",
-                  height: 22,
-                  iconType: "circle"
-                }
-              )
-            ] }) }) }) })
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12 flex min-h-0 min-w-0 lg:col-span-7", children: /* @__PURE__ */ jsxRuntime.jsx(
-          AnalyticsSection,
-          {
-            variant: "atlas",
-            className: "flex min-h-0 w-full flex-col",
-            title: "Repeat purchases",
-            description: "Orders with a customer_id in the same window (guest checkouts excluded from rate).",
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 flex-1 flex-col gap-1.5", children: repeatLoading ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", className: "flex flex-1 items-center justify-center py-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) : repeatError ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", className: "flex flex-1 items-center justify-center px-2 py-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-center text-ui-fg-danger text-xs", children: repeatError }) }) : repeatStats ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-1.5 sm:grid-cols-3", children: [
-              ((_b = repeatStats.ordersAnalyticsMeta) == null ? void 0 : _b.likely_truncated) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-full rounded-md border border-amber-400/25 bg-amber-500/10 px-2 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-ui-fg-base text-[10px] leading-snug", children: [
-                "Repeat stats are computed from a sample of up to",
-                " ",
-                repeatStats.ordersAnalyticsMeta.max_fetch.toLocaleString(),
-                " ",
-                "orders; your true repeat rate may differ if you exceed that sample."
-              ] }) }) : null,
-              /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Repeat rate" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: `${repeatStats.repeat_rate_percent.toFixed(1)}%` }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] leading-snug", children: repeatStats.window_days >= 365 ? "Approx. 12-month window" : `Last ${repeatStats.window_days} days` })
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "With orders" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: repeatStats.customers_with_orders.toLocaleString() }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] leading-snug", children: "Customers in window" })
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Repeat (2+ orders)" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: repeatStats.repeat_customers.toLocaleString() }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] leading-snug", children: "Multi-order customers" })
-              ] }) })
-            ] }) : /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", className: "flex flex-1 items-center justify-center py-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "No data." }) }) })
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        AnalyticsSection,
-        {
-          variant: "atlas",
-          actionsBare: true,
-          title: "Customers over time",
-          description: "New registered vs guest activity for the chart range below.",
-          actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Label,
-              {
-                htmlFor: "customers-graph-period",
-                className: "shrink-0 text-ui-fg-muted text-xs font-medium",
-                children: "Range"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "select",
-              {
-                id: "customers-graph-period",
-                value: graphPeriod,
-                onChange: (e) => setGraphPeriod(e.target.value),
-                className: SELECT_CLASS_NAME$1,
-                children: GRAPH_PERIODS$1.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.value, children: p.label }, p.value))
-              }
-            )
-          ] }),
-          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-1.5 sm:grid-cols-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Window registered (sum)" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: seriesWindowTotals.registered.toLocaleString() }),
-                /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-ui-fg-muted text-[10px]", children: [
-                  "Across ",
-                  seriesWindowTotals.points,
-                  " buckets"
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Window guest (sum)" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: seriesWindowTotals.guest.toLocaleString() }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px]", children: "Same range as chart" })
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Chart period" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: ((_c = GRAPH_PERIODS$1.find((p) => p.value === graphPeriod)) == null ? void 0 : _c.label) ?? graphPeriod }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] leading-snug", children: "Independent of summary period filter" })
-              ] }) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[212px] w-full sm:h-[228px]", children: graphLoading ? /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: "flex h-full items-center justify-center",
-                role: "status",
-                "aria-label": "Loading customers over time",
-                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading chart…" })
-              }
-            ) : graphError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-2", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-center text-ui-fg-danger text-xs", children: graphError }) }) : /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
-              recharts.LineChart,
-              {
-                data: series,
-                margin: { top: 6, right: 8, left: 0, bottom: 4 },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.CartesianGrid,
-                    {
-                      strokeDasharray: "3 3",
-                      vertical: false,
-                      stroke: "rgba(148,163,184,0.12)"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.XAxis,
-                    {
-                      dataKey: "date",
-                      tick: CHART_AXIS_TICK$1,
-                      stroke: CHART_AXIS_LINE$1,
-                      tickLine: false,
-                      axisLine: { stroke: CHART_AXIS_LINE$1 },
-                      tickFormatter: (value) => {
-                        const row = series.find((p) => p.date === String(value));
-                        if (row == null ? void 0 : row.label) return row.label;
-                        return formatChartLabel$1(
-                          (row == null ? void 0 : row.date) ?? (typeof value === "string" ? value : String(value))
-                        );
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.YAxis,
-                    {
-                      width: 36,
-                      tick: CHART_AXIS_TICK$1,
-                      stroke: CHART_AXIS_LINE$1,
-                      tickLine: false,
-                      axisLine: { stroke: CHART_AXIS_LINE$1 },
-                      tickFormatter: (v) => String(Math.floor(Number(v))),
-                      allowDecimals: false
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomersOverTimeTooltip, {}) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.Legend,
-                    {
-                      wrapperStyle: { fontSize: 10, paddingTop: 4 },
-                      iconType: "circle"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.Line,
-                    {
-                      type: "monotone",
-                      dataKey: "registered_count",
-                      name: "Registered",
-                      stroke: REGISTERED_COLOR,
-                      strokeWidth: 2,
-                      dot: { r: 2 }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.Line,
-                    {
-                      type: "monotone",
-                      dataKey: "guest_count",
-                      name: "Guest",
-                      stroke: GUEST_COLOR,
-                      strokeWidth: 2,
-                      dot: { r: 2 }
-                    }
-                  )
-                ]
-              }
-            ) }) }) })
-          ] })
-        }
-      )
-    ] })
-  ] }) });
-}
-function buildAnalyticsUrl(path, params) {
-  const search = new URLSearchParams();
-  for (const [key, value] of Object.entries(params)) {
-    if (value !== void 0 && value !== null) {
-      search.set(key, String(value));
-    }
-  }
-  const query = search.toString();
-  return query ? `${path}?${query}` : path;
-}
-const SUMMARY_PERIODS = [
-  { value: "all", label: "All time" },
-  { value: "0", label: "Today" },
-  { value: "7", label: "Last 7 days" },
-  { value: "30", label: "Last 30 days" },
-  { value: "90", label: "Last 90 days" }
-];
-const GRAPH_PERIODS = [
-  { value: "one_week", label: "One week" },
-  { value: "one_month", label: "One month" },
-  { value: "one_year", label: "One year" }
-];
-const TOP_SELLER_PERIODS = [
-  { value: "week", label: "Week" },
-  { value: "month", label: "Month" },
-  { value: "year", label: "Year" },
-  { value: "all", label: "All time" }
-];
-const PRODUCT_CHART_COLORS = {
-  units: "#38BDF8",
-  views: "#C084FC",
-  revenue: "#D946EF",
-  revenueMuted: "#94A3B8",
-  scatter: "#A855F7"
-};
-const KPI_ICON_BG = {
-  green: "bg-emerald-500/20",
-  blue: "bg-sky-500/20",
-  purple: "bg-violet-500/20",
-  amber: "bg-amber-500/20"
-};
-const KPI_ICONS = {
-  green: icons.CurrencyDollar,
-  blue: icons.ShoppingCart,
-  purple: icons.Tag,
-  amber: icons.CubeSolid
-};
-const CHART_AXIS_TICK = { fontSize: 10, fill: "#e5e7eb" };
-const CHART_AXIS_TICK_SM = { fontSize: 9, fill: "#e5e7eb" };
-const CHART_AXIS_LINE = "#94a3b8";
-const SELECT_CLASS_NAME = "h-9 w-full min-w-[8rem] max-w-full cursor-pointer appearance-none rounded border border-ui-border-base bg-ui-bg-base py-1.5 pl-3 pr-8 text-xs text-ui-fg-base outline-none transition focus:ring-2 focus:ring-ui-fg-interactive sm:w-auto sm:min-w-[132px] sm:max-w-[220px]";
-const LEADERBOARD_TABLE_CLASS = "min-w-[32rem] sm:min-w-[36rem] max-w-none";
-const OPPORTUNITIES_TABLE_CLASS = "min-w-[30rem] sm:min-w-[34rem] max-w-none";
-const TABLE_HEAD_CELL_NOWRAP = "whitespace-nowrap";
-function formatChartLabel(value) {
-  if (!value) return "";
-  const parsed = new Date(value);
-  if (Number.isNaN(parsed.getTime())) return value;
-  return `${parsed.getUTCMonth() + 1}/${parsed.getUTCDate()}`;
-}
-function formatRatio(value) {
-  if (value === null || Number.isNaN(value)) return "N/A";
-  return `${value.toFixed(2)}x`;
-}
-function formatShortNumber(value) {
-  return new Intl.NumberFormat("en-IN", {
-    notation: "compact",
-    maximumFractionDigits: value < 10 ? 1 : 0
-  }).format(value);
-}
-function topSellerPeriodToGraphPeriod(period) {
-  if (period === "month") return "one_month";
-  if (period === "year" || period === "all") return "one_year";
-  return "one_week";
-}
-function summaryDaysToGraphPeriod(days) {
-  if (days === "30") return "one_month";
-  if (days === "all" || days === "90") return "one_year";
-  return "one_week";
-}
-function isProductOverTimePoint(value) {
-  if (typeof value !== "object" || value === null) return false;
-  const v = value;
-  return typeof v.date === "string" && typeof v.units_sold === "number" && typeof v.revenue === "number" && typeof v.views === "number";
-}
-function TrendTooltip({
-  active,
-  payload,
-  label
-}) {
-  var _a, _b, _c, _d, _e;
-  const { formatCurrency } = useAnalyticsCurrency();
-  if (!active || !(payload == null ? void 0 : payload.length)) return null;
-  const row = isProductOverTimePoint((_a = payload[0]) == null ? void 0 : _a.payload) ? (_b = payload[0]) == null ? void 0 : _b.payload : void 0;
-  const displayLabel = (row == null ? void 0 : row.label) ?? (label ? new Date(label).toLocaleDateString() : "");
-  const unitsSold = ((_c = payload.find((entry) => entry.name === "Units sold")) == null ? void 0 : _c.value) ?? 0;
-  const views = ((_d = payload.find((entry) => entry.name === "Views")) == null ? void 0 : _d.value) ?? 0;
-  const revenue = ((_e = payload.find((entry) => entry.name === "Revenue")) == null ? void 0 : _e.value) ?? 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsTooltipCard, { title: displayLabel, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      "Units sold: ",
-      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(Number(unitsSold)).toLocaleString() })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      "Views: ",
-      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(Number(views)).toLocaleString() })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      "Revenue: ",
-      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency(Number(revenue)) })
-    ] })
-  ] });
-}
-function MiniTrendTooltip({
-  active,
-  payload,
-  label,
-  productHeadline,
-  hideViewsRow,
-  hideUnitsRow,
-  hideRevenueRow
-}) {
-  var _a, _b, _c, _d, _e;
-  const { formatCurrency } = useAnalyticsCurrency();
-  if (!active || !(payload == null ? void 0 : payload.length)) return null;
-  const row = isProductOverTimePoint((_a = payload[0]) == null ? void 0 : _a.payload) ? (_b = payload[0]) == null ? void 0 : _b.payload : void 0;
-  const labelKey = label !== void 0 && label !== null ? String(label) : "";
-  const displayLabel = (row == null ? void 0 : row.label) ?? (labelKey ? new Date(labelKey).toLocaleDateString() : "");
-  const unitsSold = ((_c = payload.find((entry) => entry.name === "Units sold")) == null ? void 0 : _c.value) ?? 0;
-  const views = ((_d = payload.find((entry) => entry.name === "Views")) == null ? void 0 : _d.value) ?? 0;
-  const revenue = ((_e = payload.find((entry) => entry.name === "Revenue")) == null ? void 0 : _e.value) ?? 0;
-  const title = productHeadline ?? displayLabel;
-  return /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsTooltipCard, { variant: "compact", title, children: [
-    productHeadline ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1 text-[10px] leading-tight opacity-80", children: displayLabel }) : null,
-    !hideUnitsRow ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      "Units sold: ",
-      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(Number(unitsSold)).toLocaleString() })
-    ] }) : null,
-    !hideViewsRow ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      "Views: ",
-      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(Number(views)).toLocaleString() })
-    ] }) : null,
-    !hideRevenueRow ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      "Revenue: ",
-      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency(Number(revenue)) })
-    ] }) : null
-  ] });
-}
-function ProductBarTooltip({
-  active,
-  payload,
-  showViews = true
-}) {
-  var _a;
-  const { formatCurrency } = useAnalyticsCurrency();
-  if (!active || !(payload == null ? void 0 : payload.length)) return null;
-  const row = (_a = payload[0]) == null ? void 0 : _a.payload;
-  if (!row) return null;
-  const unitsSold = "units_sold" in row ? row.units_sold : 0;
-  const totalViews = "total_views" in row ? row.total_views : 0;
-  const revenue = "revenue" in row ? row.revenue : 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsTooltipCard, { variant: "compact", title: row.product_title, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      "Units sold: ",
-      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(unitsSold).toLocaleString() })
-    ] }),
-    showViews ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      "Views: ",
-      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(totalViews).toLocaleString() })
-    ] }) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      "Revenue: ",
-      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency(Number(revenue)) })
-    ] })
-  ] });
-}
-function AtlasKpiCard({
-  label,
-  value,
-  helper,
-  accent
-}) {
-  const Icon = KPI_ICONS[accent];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-[88px] min-w-0 flex-col rounded-xl border border-ui-border-base/80 bg-ui-bg-subtle/25 p-3 shadow-sm", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "min-w-0 flex-1 text-left text-xs font-medium leading-snug text-ui-fg-base", children: label }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: `flex h-7 w-7 shrink-0 items-center justify-center rounded-lg ${KPI_ICON_BG[accent]}`,
-          "aria-hidden": true,
-          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-3.5 w-3.5 text-ui-fg-base" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-lg font-semibold tabular-nums tracking-tight text-ui-fg-base sm:text-xl", children: value }),
-    helper ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mt-2 text-[11px] leading-snug text-ui-fg-muted", children: helper }) : null
-  ] });
-}
-function EmptyAnalyticsPanel({ title, description }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-[88px] flex-col gap-1.5 rounded-lg border border-dashed border-ui-border-base px-3 py-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-xs font-semibold", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[11px] leading-snug", children: description })
-  ] });
-}
-function ProductsDashboard() {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  const { formatCurrency, formatCompactCurrency } = useAnalyticsCurrency();
-  const chartGradientPrefix = react.useId().replace(/:/g, "");
-  const gid = (suffix) => `${chartGradientPrefix}-${suffix}`;
-  const [summaryDays, setSummaryDays] = react.useState("all");
-  const [graphPeriod, setGraphPeriod] = react.useState("one_week");
-  const [topSellerPeriod, setTopSellerPeriod] = react.useState("week");
-  const [salesChannelId, setSalesChannelId] = react.useState("all");
-  const [salesChannels, setSalesChannels] = react.useState([]);
-  const [filtersLoading, setFiltersLoading] = react.useState(true);
-  const [filtersError, setFiltersError] = react.useState(null);
-  const [summary, setSummary] = react.useState(null);
-  const [summaryLoading, setSummaryLoading] = react.useState(true);
-  const [summaryError, setSummaryError] = react.useState(null);
-  const [overTime, setOverTime] = react.useState(null);
-  const [overTimeLoading, setOverTimeLoading] = react.useState(true);
-  const [overTimeError, setOverTimeError] = react.useState(null);
-  const [topSellers, setTopSellers] = react.useState(null);
-  const [topSellersLoading, setTopSellersLoading] = react.useState(true);
-  const [topSellersError, setTopSellersError] = react.useState(null);
-  const [performance, setPerformance] = react.useState(null);
-  const [performanceLoading, setPerformanceLoading] = react.useState(true);
-  const [performanceError, setPerformanceError] = react.useState(null);
-  const [bestSellersTrend, setBestSellersTrend] = react.useState(null);
-  const [bestSellersTrendLoading, setBestSellersTrendLoading] = react.useState(true);
-  const [bestSellersTrendError, setBestSellersTrendError] = react.useState(null);
-  const [mostViewedTrend, setMostViewedTrend] = react.useState(null);
-  const [mostViewedTrendLoading, setMostViewedTrendLoading] = react.useState(true);
-  const [mostViewedTrendError, setMostViewedTrendError] = react.useState(null);
-  react.useEffect(() => {
-    let cancelled = false;
-    setFiltersLoading(true);
-    setFiltersError(null);
-    fetch("/admin/analytics/products-filters", { credentials: "include" }).then((res) => {
-      if (!res.ok) throw new Error(res.statusText);
-      return res.json();
-    }).then((body) => {
-      if (!cancelled) {
-        setSalesChannels(body.salesChannels ?? []);
-      }
-    }).catch((error) => {
-      if (!cancelled) {
-        setFiltersError(error instanceof Error ? error.message : String(error));
-      }
-    }).finally(() => {
-      if (!cancelled) setFiltersLoading(false);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-  react.useEffect(() => {
-    let cancelled = false;
-    setSummaryLoading(true);
-    setSummaryError(null);
-    fetch(
-      buildAnalyticsUrl("/admin/analytics/products-summary", {
-        days: summaryDays,
-        sales_channel_id: salesChannelId !== "all" ? salesChannelId : null
-      }),
-      { credentials: "include" }
-    ).then((res) => {
-      if (!res.ok) throw new Error(res.statusText);
-      return res.json();
-    }).then((body) => {
-      if (!cancelled) setSummary(body);
-    }).catch((error) => {
-      if (!cancelled) {
-        setSummaryError(error instanceof Error ? error.message : String(error));
-      }
-    }).finally(() => {
-      if (!cancelled) setSummaryLoading(false);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [salesChannelId, summaryDays]);
-  react.useEffect(() => {
-    let cancelled = false;
-    setOverTimeLoading(true);
-    setOverTimeError(null);
-    fetch(
-      buildAnalyticsUrl("/admin/analytics/products-over-time", {
-        period: graphPeriod,
-        sales_channel_id: salesChannelId !== "all" ? salesChannelId : null
-      }),
-      { credentials: "include" }
-    ).then((res) => {
-      if (!res.ok) throw new Error(res.statusText);
-      return res.json();
-    }).then((body) => {
-      if (!cancelled) setOverTime(body);
-    }).catch((error) => {
-      if (!cancelled) {
-        setOverTimeError(error instanceof Error ? error.message : String(error));
-      }
-    }).finally(() => {
-      if (!cancelled) setOverTimeLoading(false);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [graphPeriod, salesChannelId]);
-  react.useEffect(() => {
-    let cancelled = false;
-    setTopSellersLoading(true);
-    setTopSellersError(null);
-    fetch(
-      buildAnalyticsUrl("/admin/analytics/products-top-sellers", {
-        period: topSellerPeriod,
-        sales_channel_id: salesChannelId !== "all" ? salesChannelId : null
-      }),
-      { credentials: "include" }
-    ).then((res) => {
-      if (!res.ok) throw new Error(res.statusText);
-      return res.json();
-    }).then((body) => {
-      if (!cancelled) setTopSellers(body);
-    }).catch((error) => {
-      if (!cancelled) {
-        setTopSellersError(error instanceof Error ? error.message : String(error));
-      }
-    }).finally(() => {
-      if (!cancelled) setTopSellersLoading(false);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [salesChannelId, topSellerPeriod]);
-  react.useEffect(() => {
-    var _a2;
-    let cancelled = false;
-    if (topSellersLoading) {
-      setBestSellersTrendLoading(true);
-      return () => {
-        cancelled = true;
-      };
-    }
-    if (topSellersError) {
-      setBestSellersTrendLoading(false);
-      setBestSellersTrendError(topSellersError);
-      setBestSellersTrend(null);
-      return () => {
-        cancelled = true;
-      };
-    }
-    const topSellersByUnits2 = [...(topSellers == null ? void 0 : topSellers.products) ?? []].sort((a, b) => {
-      if (b.units_sold !== a.units_sold) return b.units_sold - a.units_sold;
-      if (b.order_count !== a.order_count) return b.order_count - a.order_count;
-      return b.revenue - a.revenue;
-    });
-    const topProductId = (_a2 = topSellersByUnits2[0]) == null ? void 0 : _a2.product_id;
-    if (!topProductId) {
-      setBestSellersTrendLoading(false);
-      setBestSellersTrendError(null);
-      setBestSellersTrend({
-        series: [],
-        productViewsConnected: (topSellers == null ? void 0 : topSellers.productViewsConnected) ?? false,
-        product: null
-      });
-      return () => {
-        cancelled = true;
-      };
-    }
-    setBestSellersTrendLoading(true);
-    setBestSellersTrendError(null);
-    const period = topSellerPeriodToGraphPeriod(topSellerPeriod);
-    fetch(
-      buildAnalyticsUrl("/admin/analytics/products-over-time", {
-        period,
-        sales_channel_id: salesChannelId !== "all" ? salesChannelId : null,
-        product_id: topProductId
-      }),
-      { credentials: "include" }
-    ).then((res) => {
-      if (!res.ok) throw new Error(res.statusText);
-      return res.json();
-    }).then((body) => {
-      if (!cancelled) setBestSellersTrend(body);
-    }).catch((error) => {
-      if (!cancelled) {
-        setBestSellersTrendError(error instanceof Error ? error.message : String(error));
-      }
-    }).finally(() => {
-      if (!cancelled) setBestSellersTrendLoading(false);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [salesChannelId, topSellerPeriod, topSellersLoading, topSellersError, topSellers]);
+  const [overTimePeriod, setOverTimePeriod] = react.useState("one_week");
+  const [overTimeLoading, setOverTimeLoading] = react.useState(true);
+  const [overTimeError, setOverTimeError] = react.useState(null);
   react.useEffect(() => {
-    var _a2, _b2;
     let cancelled = false;
-    if (performanceLoading) {
-      setMostViewedTrendLoading(true);
-      return () => {
-        cancelled = true;
-      };
-    }
-    if (performanceError) {
-      setMostViewedTrendLoading(false);
-      setMostViewedTrendError(performanceError);
-      setMostViewedTrend(null);
-      return () => {
-        cancelled = true;
-      };
-    }
-    if (!(performance == null ? void 0 : performance.productViewsConnected)) {
-      setMostViewedTrendLoading(false);
-      setMostViewedTrendError(null);
-      setMostViewedTrend(null);
-      return () => {
-        cancelled = true;
-      };
-    }
-    const topViewedId = (_b2 = (_a2 = performance.topViewedProducts) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.product_id;
-    if (!topViewedId) {
-      setMostViewedTrendLoading(false);
-      setMostViewedTrendError(null);
-      setMostViewedTrend({
-        series: [],
-        productViewsConnected: true,
-        product: null
-      });
-      return () => {
-        cancelled = true;
-      };
-    }
-    setMostViewedTrendLoading(true);
-    setMostViewedTrendError(null);
-    const period = summaryDaysToGraphPeriod(summaryDays);
-    fetch(
-      buildAnalyticsUrl("/admin/analytics/products-over-time", {
-        period,
-        sales_channel_id: salesChannelId !== "all" ? salesChannelId : null,
-        product_id: topViewedId
-      }),
-      { credentials: "include" }
-    ).then((res) => {
+    setLoading(true);
+    setError(null);
+    const url = `/admin/analytics/orders-summary?days=${filter}`;
+    fetch(url).then((res) => {
       if (!res.ok) throw new Error(res.statusText);
       return res.json();
     }).then((body) => {
-      if (!cancelled) setMostViewedTrend(body);
-    }).catch((error) => {
-      if (!cancelled) {
-        setMostViewedTrendError(error instanceof Error ? error.message : String(error));
-      }
+      if (!cancelled) setData(body);
+    }).catch((e) => {
+      if (!cancelled) setError(e instanceof Error ? e.message : String(e));
     }).finally(() => {
-      if (!cancelled) setMostViewedTrendLoading(false);
+      if (!cancelled) setLoading(false);
     });
     return () => {
       cancelled = true;
     };
-  }, [salesChannelId, summaryDays, performanceLoading, performanceError, performance]);
+  }, [filter]);
   react.useEffect(() => {
     let cancelled = false;
-    setPerformanceLoading(true);
-    setPerformanceError(null);
-    fetch(
-      buildAnalyticsUrl("/admin/analytics/products-performance", {
-        days: summaryDays,
-        sales_channel_id: salesChannelId !== "all" ? salesChannelId : null
-      }),
-      { credentials: "include" }
-    ).then((res) => {
+    setOverTimeLoading(true);
+    setOverTimeError(null);
+    const url = `/admin/analytics/orders-over-time?period=${overTimePeriod}`;
+    fetch(url).then((res) => {
       if (!res.ok) throw new Error(res.statusText);
       return res.json();
     }).then((body) => {
-      if (!cancelled) setPerformance(body);
-    }).catch((error) => {
-      if (!cancelled) {
-        setPerformanceError(error instanceof Error ? error.message : String(error));
-      }
+      if (!cancelled) setDailyOrders(body.dailyOrders ?? []);
+    }).catch((e) => {
+      if (!cancelled) setOverTimeError(e instanceof Error ? e.message : String(e));
     }).finally(() => {
-      if (!cancelled) setPerformanceLoading(false);
+      if (!cancelled) setOverTimeLoading(false);
     });
     return () => {
       cancelled = true;
     };
-  }, [salesChannelId, summaryDays]);
-  const series = (overTime == null ? void 0 : overTime.series) ?? [];
-  const trendTotals = react.useMemo(() => {
-    const totalUnits = series.reduce((s, p) => s + p.units_sold, 0);
-    const totalRevenue = series.reduce((s, p) => s + p.revenue, 0);
-    const totalViews = series.reduce((s, p) => s + p.views, 0);
-    const n = series.length || 1;
-    return {
-      totalUnits,
-      totalRevenue,
-      totalViews,
-      avgUnitsPerDay: totalUnits / n,
-      avgRevenuePerDay: totalRevenue / n,
-      avgViewsPerDay: totalViews / n
-    };
-  }, [series]);
-  const peakRevenuePoint = series.length > 0 ? series.reduce((peak, point) => point.revenue > peak.revenue ? point : peak) : null;
-  const viewsConnectedForPulse = ((summary == null ? void 0 : summary.productViewsConnected) ?? false) || (overTime == null ? void 0 : overTime.productViewsConnected) === true || (topSellers == null ? void 0 : topSellers.productViewsConnected) === true || (performance == null ? void 0 : performance.productViewsConnected) === true;
-  const topSellersByUnits = react.useMemo(
-    () => [...(topSellers == null ? void 0 : topSellers.products) ?? []].sort((a, b) => {
-      if (b.units_sold !== a.units_sold) return b.units_sold - a.units_sold;
-      if (b.order_count !== a.order_count) return b.order_count - a.order_count;
-      return b.revenue - a.revenue;
-    }),
-    [topSellers]
-  );
-  const bestSellersTrendSeries = (bestSellersTrend == null ? void 0 : bestSellersTrend.series) ?? [];
-  const mostViewedTrendSeries = (mostViewedTrend == null ? void 0 : mostViewedTrend.series) ?? [];
-  const bestSellerTrendProductTitle = ((_a = bestSellersTrend == null ? void 0 : bestSellersTrend.product) == null ? void 0 : _a.product_title) ?? ((_b = topSellersByUnits[0]) == null ? void 0 : _b.product_title) ?? null;
-  const mostViewedTrendProductTitle = ((_c = mostViewedTrend == null ? void 0 : mostViewedTrend.product) == null ? void 0 : _c.product_title) ?? ((_e = (_d = performance == null ? void 0 : performance.topViewedProducts) == null ? void 0 : _d[0]) == null ? void 0 : _e.product_title) ?? null;
-  const viewsVsUnitsScatterData = react.useMemo(
-    () => ((performance == null ? void 0 : performance.topViewedProducts) ?? []).slice(0, 48).filter((row) => row.total_views > 0 || row.units_sold > 0),
-    [performance]
-  );
-  const selectedSummaryPeriod = ((_f = SUMMARY_PERIODS.find((p) => p.value === summaryDays)) == null ? void 0 : _f.label) ?? "All time";
-  const selectedGraphPeriodLabel = ((_g = GRAPH_PERIODS.find((p) => p.value === graphPeriod)) == null ? void 0 : _g.label) ?? "One week";
-  const quickPulseMetrics = [
-    {
-      label: "Range units",
-      value: formatShortNumber(trendTotals.totalUnits),
-      helper: selectedGraphPeriodLabel,
-      accentClassName: "border-sky-400/25 bg-sky-500/5"
-    },
-    {
-      label: "Range revenue",
-      value: formatCompactCurrency(trendTotals.totalRevenue),
-      helper: "Current chart window",
-      accentClassName: "border-fuchsia-400/25 bg-fuchsia-500/5"
-    },
-    {
-      label: "Avg/day views",
-      value: trendTotals.avgViewsPerDay.toFixed(0),
-      helper: viewsConnectedForPulse ? "Across chart range" : "Views need tracking",
-      accentClassName: "border-violet-400/25 bg-violet-500/5"
-    },
-    {
-      label: "Peak revenue day",
-      value: peakRevenuePoint ? formatCompactCurrency(peakRevenuePoint.revenue) : "—",
-      helper: (peakRevenuePoint == null ? void 0 : peakRevenuePoint.label) ?? formatChartLabel(peakRevenuePoint == null ? void 0 : peakRevenuePoint.date),
-      accentClassName: "border-amber-400/25 bg-amber-500/5"
-    }
-  ];
-  if (summaryLoading) {
+  }, [overTimePeriod]);
+  if (loading) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "flex min-h-[200px] items-center justify-center",
+        className: "flex items-center justify-center min-h-[320px]",
         role: "status",
-        "aria-label": "Loading product analytics",
+        "aria-label": "Loading analytics",
         children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted", children: "Loading…" })
       }
     );
   }
-  if (summaryError || !summary) {
-    return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger", children: summaryError ?? "Failed to load product analytics" }) });
+  if (error || !data) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger", children: error ?? "Failed to load analytics" }) });
   }
-  const viewsConnected = summary.productViewsConnected || (overTime == null ? void 0 : overTime.productViewsConnected) === true || (topSellers == null ? void 0 : topSellers.productViewsConnected) === true || (performance == null ? void 0 : performance.productViewsConnected) === true;
-  const selectedChannelLabel = salesChannelId === "all" ? "All channels" : ((_h = salesChannels.find((channel) => channel.id === salesChannelId)) == null ? void 0 : _h.name) ?? "Selected channel";
-  const primaryStats = [
-    {
-      label: "Units sold",
-      value: summary.unitsSold.toLocaleString(),
-      helper: selectedSummaryPeriod,
-      accent: "amber"
-    },
-    {
-      label: "Product revenue",
-      value: formatCurrency(summary.productRevenue),
-      helper: selectedSummaryPeriod,
-      accent: "green"
-    },
-    {
-      label: "Orders with products",
-      value: summary.ordersWithProducts.toLocaleString(),
-      helper: "Distinct orders",
-      accent: "blue"
-    },
-    {
-      label: "Active products sold",
-      value: summary.activeProductsSold.toLocaleString(),
-      helper: "Unique SKUs with sales",
-      accent: "purple"
-    },
-    {
-      label: "Product views",
-      value: summary.totalProductViews.toLocaleString(),
-      helper: viewsConnected ? "Tracked views" : "Tracking unavailable",
-      accent: "green"
-    },
-    {
-      label: "View / order ratio",
-      value: formatRatio(summary.viewToOrderRatio),
-      helper: viewsConnected ? "Views per product order" : "N/A without views",
-      accent: "blue"
-    }
-  ];
-  return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsDashboardShell, { className: "w-full min-w-0 max-w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full min-w-0 max-w-full overflow-hidden rounded-2xl border border-ui-border-base/80 bg-ui-bg-base shadow-sm", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      AnalyticsDashboardHeader,
-      {
-        variant: "premium",
-        appearance: "inset",
-        actionsBare: true,
-        actionsClassName: "w-full justify-start lg:w-auto lg:justify-end",
-        title: "Products",
-        description: "Units, revenue, best sellers, and visit behavior in a compact layout aligned with Orders analytics.",
-        actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full min-w-0 flex-wrap items-center gap-x-3 gap-y-2 sm:flex-nowrap lg:gap-x-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 sm:flex-initial sm:flex-none", children: [
+  const pieData = ORDER_CHART_STATUSES.map(({ key, label, color }) => {
+    const value = key === "delivered" ? data.statusCounts.delivered ?? data.deliveredOrders ?? 0 : key === "cancelled" ? data.statusCounts.cancelled ?? data.cancelledOrders ?? 0 : data.statusCounts.pending ?? data.pendingOrders ?? 0;
+    return { name: label, value, color };
+  }).filter((d) => d.value > 0);
+  const returnsExchangesData = [
+    { name: "Return orders", value: data.returnOrders, color: "#EF4444" },
+    { name: "Exchange orders", value: data.exchangeOrders, color: "#F59E0B" }
+  ].filter((d) => d.value > 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Orders" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "analytics-period", className: "text-ui-fg-muted text-sm", children: "Period" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              id: "analytics-period",
+              value: filter,
+              onChange: (e) => setFilter(e.target.value),
+              className: "h-9 rounded-md border border-ui-border-base bg-transparent px-3 text-sm text-ui-fg-base outline-none transition focus:ring-2 focus:ring-ui-fg-interactive",
+              children: SUMMARY_PERIODS.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.value, children: p.label }, p.value))
+            }
+          )
+        ] }),
+        filter !== "all" && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setFilter("all"),
+            className: "text-xs text-ui-fg-muted hover:text-ui-fg-base transition-colors",
+            "aria-label": "Show all orders (clear filter)",
+            children: "Clear filter"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Total orders" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: data.totalOrders.toLocaleString() })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Total revenue" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: formatCurrency(data.totalRevenue) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Average order value" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: formatCurrency(data.aov) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Orders today" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: data.ordersToday.toLocaleString() })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm mb-2", children: "Pending orders" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: data.pendingOrders.toLocaleString() })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm mb-2", children: "Avg. fulfillment time (hours)" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: data.avgFulfillmentTimeHours != null ? `${data.avgFulfillmentTimeHours}h` : "—" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Cancelled orders" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: data.cancelledOrders.toLocaleString() })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Delivered orders" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: data.deliveredOrders.toLocaleString() })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Exchange orders" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: data.exchangeOrders.toLocaleString() })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Return orders" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: data.returnOrders.toLocaleString() })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row flex-wrap gap-6 items-stretch", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex flex-col", style: { minWidth: "280px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h3", className: "mb-3", children: "Orders by status" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[280px] flex items-center justify-center", children: pieData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 280, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { margin: { top: 8, right: 8, bottom: 8, left: 8 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Pie,
+            {
+              data: pieData,
+              cx: "50%",
+              cy: "50%",
+              innerRadius: 52,
+              outerRadius: 78,
+              paddingAngle: 2,
+              dataKey: "value",
+              nameKey: "name",
+              isAnimationActive: true,
+              children: pieData.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: entry.color }, `cell-${index}`))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { formatter: (value) => [value ?? 0, "Orders"] }),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { verticalAlign: "bottom", height: 36 })
+        ] }) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "No orders in this period" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex flex-col", style: { minWidth: "280px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h3", className: "mb-3", children: "Returns & exchanges" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[280px] flex items-center justify-center", children: returnsExchangesData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 280, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { margin: { top: 8, right: 8, bottom: 8, left: 8 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Pie,
+            {
+              data: returnsExchangesData,
+              cx: "50%",
+              cy: "50%",
+              innerRadius: 52,
+              outerRadius: 78,
+              paddingAngle: 2,
+              dataKey: "value",
+              nameKey: "name",
+              isAnimationActive: true,
+              children: returnsExchangesData.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: entry.color }, `cell-re-${index}`))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { formatter: (value) => [value ?? 0, "Count"] }),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { verticalAlign: "bottom", height: 36 })
+        ] }) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "No returns or exchanges in this period" }) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4 mb-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h3", children: "Orders over time" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "over-time-period", className: "text-ui-fg-muted text-sm", children: "Range" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              id: "over-time-period",
+              value: overTimePeriod,
+              onChange: (e) => setOverTimePeriod(e.target.value),
+              className: "h-9 rounded-md border border-ui-border-base bg-transparent px-3 text-sm text-ui-fg-base outline-none transition focus:ring-2 focus:ring-ui-fg-interactive",
+              children: OVER_TIME_PERIODS.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.value, children: p.label }, p.value))
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-72", children: overTimeLoading ? /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "flex items-center justify-center h-full",
+          role: "status",
+          "aria-label": "Loading orders over time",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted", children: "Loading chart…" })
+        }
+      ) : overTimeError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger", children: overTimeError }) }) : /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        recharts.LineChart,
+        {
+          data: dailyOrders,
+          margin: { top: 8, right: 8, left: 8, bottom: 8 },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", className: "stroke-ui-border-base" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Label,
+              recharts.XAxis,
               {
-                htmlFor: "products-channel-filter",
-                className: "shrink-0 whitespace-nowrap text-ui-fg-muted text-xs font-medium",
-                children: "Channel"
+                dataKey: "date",
+                tick: { fontSize: 12 },
+                tickFormatter: (v, index) => {
+                  const row = dailyOrders[index];
+                  if (row == null ? void 0 : row.label) return row.label;
+                  const d = new Date(v);
+                  return `${d.getUTCMonth() + 1}/${d.getUTCDate()}`;
+                }
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "select",
-              {
-                id: "products-channel-filter",
-                value: salesChannelId,
-                onChange: (event) => setSalesChannelId(event.target.value),
-                disabled: filtersLoading,
-                className: SELECT_CLASS_NAME,
-                "aria-busy": filtersLoading,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "all", children: "All channels" }),
-                  salesChannels.map((channel) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: channel.id, children: channel.name }, channel.id))
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 sm:flex-initial sm:flex-none", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Label,
+              recharts.YAxis,
               {
-                htmlFor: "products-summary-period",
-                className: "shrink-0 whitespace-nowrap text-ui-fg-muted text-xs font-medium",
-                children: "Period"
+                tick: { fontSize: 12 },
+                allowDecimals: false,
+                domain: [0, "auto"],
+                ticks: (() => {
+                  const max = Math.max(
+                    1,
+                    ...dailyOrders.map((d) => d.orders_count ?? 0)
+                  );
+                  const step = max <= 10 ? 1 : Math.ceil(max / 6);
+                  const arr = [];
+                  for (let i = 0; i <= max; i += step) arr.push(i);
+                  if (arr[arr.length - 1] !== max) arr.push(max);
+                  return arr;
+                })(),
+                tickFormatter: (v) => String(Math.floor(Number(v) || 0))
               }
             ),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(OrdersOverTimeTooltip, {}) }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              "select",
+              recharts.Line,
               {
-                id: "products-summary-period",
-                value: summaryDays,
-                onChange: (event) => setSummaryDays(event.target.value),
-                className: SELECT_CLASS_NAME,
-                children: SUMMARY_PERIODS.map((period) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: period.value, children: period.label }, period.value))
+                type: "monotone",
+                dataKey: "orders_count",
+                name: "Orders",
+                stroke: "var(--medusa-color-ui-fg-interactive)",
+                strokeWidth: 2,
+                dot: { r: 3 }
               }
             )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full shrink-0 flex-wrap items-center gap-x-3 gap-y-1 sm:w-auto sm:pl-1", children: [
-            summaryDays !== "all" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => setSummaryDays("all"),
-                className: "text-xs text-ui-fg-muted transition-colors hover:text-ui-fg-base",
-                "aria-label": "Clear summary period filter",
-                children: "Clear period"
-              }
-            ) : null,
-            salesChannelId !== "all" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => setSalesChannelId("all"),
-                className: "text-xs text-ui-fg-muted transition-colors hover:text-ui-fg-base",
-                "aria-label": "Clear sales channel filter",
-                children: "Clear channel"
-              }
-            ) : null
-          ] })
+          ]
+        }
+      ) }) })
+    ] })
+  ] });
+}
+function CustomersOverTimeTooltip({
+  active,
+  payload,
+  label
+}) {
+  var _a, _b, _c;
+  if (!active || !(payload == null ? void 0 : payload.length)) return null;
+  const row = (_a = payload[0]) == null ? void 0 : _a.payload;
+  const displayLabel = (row == null ? void 0 : row.label) ?? (label ? new Date(label).toLocaleDateString() : label);
+  const registered = Math.floor(((_b = payload.find((p) => p.name === "Registered")) == null ? void 0 : _b.value) ?? 0);
+  const guest = Math.floor(((_c = payload.find((p) => p.name === "Guest")) == null ? void 0 : _c.value) ?? 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        backgroundColor: "rgb(254, 254, 254)",
+        color: "#111827",
+        border: "1px solid rgb(229, 231, 235)",
+        borderRadius: "8px",
+        padding: "12px 16px",
+        boxShadow: "0 4px 14px rgba(0, 0, 0, 0.08)",
+        fontSize: "14px",
+        lineHeight: 1.5
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, marginBottom: "6px", color: "#111827" }, children: displayLabel }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: "#374151" }, children: [
+          "Registered: ",
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { color: "#1f2937" }, children: registered })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: "#374151" }, children: [
+          "Guest: ",
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { color: "#1f2937" }, children: guest })
         ] })
+      ]
+    }
+  );
+}
+const COUNT_DAY_PRESETS = [
+  { value: "all", label: "All time" },
+  { value: "0", label: "Today" },
+  { value: "7", label: "Last 7 days" },
+  { value: "30", label: "Last 30 days" },
+  { value: "90", label: "Last 90 days" }
+];
+const GRAPH_PERIODS = [
+  { value: "one_week", label: "One week" },
+  { value: "one_month", label: "One month" },
+  { value: "one_year", label: "One year" }
+];
+const REGISTERED_COLOR = "var(--medusa-color-ui-fg-interactive)";
+const GUEST_COLOR = "#6B7280";
+function CustomersDashboard() {
+  const [data, setData] = react.useState(null);
+  const [loading, setLoading] = react.useState(true);
+  const [error, setError] = react.useState(null);
+  const [countDays, setCountDays] = react.useState("all");
+  const [series, setSeries] = react.useState([]);
+  const [graphPeriod, setGraphPeriod] = react.useState("one_week");
+  const [graphLoading, setGraphLoading] = react.useState(true);
+  const [graphError, setGraphError] = react.useState(null);
+  react.useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    const url = `/admin/analytics/customers-summary?days=${countDays}`;
+    fetch(url).then((res) => {
+      if (!res.ok) throw new Error(res.statusText);
+      return res.json();
+    }).then((body) => {
+      if (!cancelled) setData(body);
+    }).catch((e) => {
+      if (!cancelled) setError(e instanceof Error ? e.message : String(e));
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [countDays]);
+  react.useEffect(() => {
+    let cancelled = false;
+    setGraphLoading(true);
+    setGraphError(null);
+    const url = `/admin/analytics/customers-over-time?period=${graphPeriod}`;
+    fetch(url).then((res) => {
+      if (!res.ok) throw new Error(res.statusText);
+      return res.json();
+    }).then((body) => {
+      if (!cancelled) setSeries(body.series ?? []);
+    }).catch((e) => {
+      if (!cancelled) setGraphError(e instanceof Error ? e.message : String(e));
+    }).finally(() => {
+      if (!cancelled) setGraphLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [graphPeriod]);
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "flex items-center justify-center min-h-[320px]",
+        role: "status",
+        "aria-label": "Loading analytics",
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted", children: "Loading…" })
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 p-2 pt-0 sm:p-3 sm:pt-0 md:p-4 md:pt-0", children: [
-      filtersError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-dashed border-ui-border-base bg-ui-bg-subtle/30 px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-xs", children: filtersError }) }) : null,
-      !viewsConnected ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-dashed border-ui-border-base bg-ui-bg-subtle/30 px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[11px] leading-snug", children: "Product views are unavailable until the `medusa-product-helper` tracking module is registered and storefront page views are being recorded." }) }) : null,
-      salesChannelId !== "all" && viewsConnected ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-ui-border-base/80 bg-ui-bg-subtle/25 px-3 py-2 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-ui-fg-muted text-[11px] leading-snug", children: [
-        "Showing analytics for ",
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-ui-fg-base", children: selectedChannelLabel }),
-        ". Views are scoped to products assigned to this sales channel."
-      ] }) }) : null,
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.16em]", children: "Product overview" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-6", children: primaryStats.map((stat) => /* @__PURE__ */ jsxRuntime.jsx(
-          AtlasKpiCard,
-          {
-            label: stat.label,
-            value: stat.value,
-            helper: stat.helper,
-            accent: stat.accent
-          },
-          stat.label
-        )) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 grid grid-cols-12 gap-2 lg:items-start", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12 lg:col-span-6", children: /* @__PURE__ */ jsxRuntime.jsx(
-          AnalyticsSection,
-          {
-            variant: "atlas",
-            actionsBare: true,
-            title: "Sales & views over time",
-            description: "Units and views share the left axis; revenue uses the right. Window totals match this range.",
-            actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Label,
-                {
-                  htmlFor: "products-graph-period",
-                  className: "shrink-0 text-ui-fg-muted text-xs font-medium",
-                  children: "Range"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "select",
-                {
-                  id: "products-graph-period",
-                  value: graphPeriod,
-                  onChange: (event) => setGraphPeriod(event.target.value),
-                  className: SELECT_CLASS_NAME,
-                  children: GRAPH_PERIODS.map((period) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: period.value, children: period.label }, period.value))
-                }
-              )
-            ] }),
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-3 sm:gap-1.5", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", className: "min-h-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Window units" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: formatShortNumber(trendTotals.totalUnits) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-ui-fg-muted text-[10px]", children: [
-                    "Avg/day ",
-                    trendTotals.avgUnitsPerDay.toFixed(1)
-                  ] })
-                ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", className: "min-h-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Window revenue" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: formatCompactCurrency(trendTotals.totalRevenue) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-ui-fg-muted text-[10px]", children: [
-                    "Avg/day ",
-                    formatCompactCurrency(trendTotals.avgRevenuePerDay)
-                  ] })
-                ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", className: "min-h-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Window views" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: formatShortNumber(trendTotals.totalViews) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-ui-fg-muted text-[10px]", children: [
-                    "Avg/day ",
-                    trendTotals.avgViewsPerDay.toFixed(0)
-                  ] })
-                ] }) })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsChartSurface, { variant: "atlas", className: "relative overflow-hidden", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-x-6 top-0 h-12 rounded-b-full bg-gradient-to-r from-sky-400/10 via-fuchsia-400/10 to-transparent blur-xl" }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative space-y-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-1.5", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.16em]", children: "Trend overview" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-sm font-semibold", children: selectedGraphPeriodLabel })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap justify-end gap-2 text-[10px] text-ui-fg-muted", children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-sky-400" }),
-                        "Units"
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-violet-400" }),
-                        "Views"
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-fuchsia-400" }),
-                        "Revenue"
-                      ] })
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[min(168px,24vh)] min-h-[140px] sm:h-[min(184px,26vh)]", children: overTimeLoading ? /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: "flex h-full items-center justify-center",
-                      role: "status",
-                      "aria-label": "Loading product trend chart",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading chart…" })
-                    }
-                  ) : overTimeError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-2", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-center text-xs", children: overTimeError }) }) : series.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "No data in this range." }) }) : /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                    recharts.ComposedChart,
-                    {
-                      data: series,
-                      margin: { top: 4, right: 6, left: -6, bottom: 0 },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
-                          /* @__PURE__ */ jsxRuntime.jsxs(
-                            "linearGradient",
-                            {
-                              id: gid("trend-units-line"),
-                              x1: "0",
-                              y1: "0",
-                              x2: "1",
-                              y2: "0",
-                              children: [
-                                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#67E8F9" }),
-                                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#3B82F6" })
-                              ]
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsxs(
-                            "linearGradient",
-                            {
-                              id: gid("trend-revenue-line"),
-                              x1: "0",
-                              y1: "0",
-                              x2: "1",
-                              y2: "0",
-                              children: [
-                                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#F472B6" }),
-                                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#C084FC" })
-                              ]
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsxs(
-                            "linearGradient",
-                            {
-                              id: gid("trend-units-area"),
-                              x1: "0",
-                              y1: "0",
-                              x2: "0",
-                              y2: "1",
-                              children: [
-                                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#38BDF8", stopOpacity: 0.22 }),
-                                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#38BDF8", stopOpacity: 0 })
-                              ]
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsxs(
-                            "linearGradient",
-                            {
-                              id: gid("trend-revenue-area"),
-                              x1: "0",
-                              y1: "0",
-                              x2: "0",
-                              y2: "1",
-                              children: [
-                                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#E879F9", stopOpacity: 0.2 }),
-                                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#E879F9", stopOpacity: 0 })
-                              ]
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsxs(
-                            "linearGradient",
-                            {
-                              id: gid("trend-views-area"),
-                              x1: "0",
-                              y1: "0",
-                              x2: "0",
-                              y2: "1",
-                              children: [
-                                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#C084FC", stopOpacity: 0.18 }),
-                                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#C084FC", stopOpacity: 0 })
-                              ]
-                            }
-                          )
-                        ] }),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.CartesianGrid,
-                          {
-                            stroke: "rgba(148,163,184,0.14)",
-                            strokeDasharray: "3 3",
-                            vertical: false
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.XAxis,
-                          {
-                            dataKey: "date",
-                            tick: CHART_AXIS_TICK,
-                            tickLine: false,
-                            axisLine: false,
-                            tickFormatter: (value) => {
-                              const row = series.find((p) => p.date === String(value));
-                              return (row == null ? void 0 : row.label) ?? formatChartLabel(String(value));
-                            }
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.YAxis,
-                          {
-                            yAxisId: "counts",
-                            width: 32,
-                            tick: CHART_AXIS_TICK,
-                            tickLine: false,
-                            axisLine: false,
-                            allowDecimals: false,
-                            tickFormatter: (value) => Math.floor(Number(value) || 0).toLocaleString()
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.YAxis,
-                          {
-                            yAxisId: "revenue",
-                            orientation: "right",
-                            width: 40,
-                            tick: CHART_AXIS_TICK,
-                            tickLine: false,
-                            axisLine: false,
-                            tickFormatter: (value) => formatCompactCurrency(Number(value) || 0)
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Tooltip,
-                          {
-                            content: /* @__PURE__ */ jsxRuntime.jsx(TrendTooltip, {}),
-                            cursor: {
-                              stroke: "rgba(248, 250, 252, 0.35)",
-                              strokeWidth: 1
-                            }
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Area,
-                          {
-                            yAxisId: "counts",
-                            type: "natural",
-                            dataKey: "units_sold",
-                            stroke: "none",
-                            fill: `url(#${gid("trend-units-area")})`,
-                            isAnimationActive: false,
-                            legendType: "none"
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Area,
-                          {
-                            yAxisId: "counts",
-                            type: "natural",
-                            dataKey: "views",
-                            stroke: "none",
-                            fill: `url(#${gid("trend-views-area")})`,
-                            isAnimationActive: false,
-                            legendType: "none"
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Area,
-                          {
-                            yAxisId: "revenue",
-                            type: "natural",
-                            dataKey: "revenue",
-                            stroke: "none",
-                            fill: `url(#${gid("trend-revenue-area")})`,
-                            isAnimationActive: false,
-                            legendType: "none"
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Line,
-                          {
-                            yAxisId: "counts",
-                            type: "natural",
-                            dataKey: "units_sold",
-                            name: "Units sold",
-                            stroke: `url(#${gid("trend-units-line")})`,
-                            strokeWidth: 2,
-                            dot: false,
-                            activeDot: { r: 4, fill: PRODUCT_CHART_COLORS.units }
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Line,
-                          {
-                            yAxisId: "counts",
-                            type: "natural",
-                            dataKey: "views",
-                            name: "Views",
-                            stroke: PRODUCT_CHART_COLORS.views,
-                            strokeWidth: 1.5,
-                            strokeDasharray: "4 3",
-                            dot: false,
-                            activeDot: { r: 4, fill: PRODUCT_CHART_COLORS.views }
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Line,
-                          {
-                            yAxisId: "revenue",
-                            type: "natural",
-                            dataKey: "revenue",
-                            name: "Revenue",
-                            stroke: `url(#${gid("trend-revenue-line")})`,
-                            strokeWidth: 2,
-                            dot: false,
-                            activeDot: { r: 4, fill: PRODUCT_CHART_COLORS.revenue }
-                          }
-                        )
-                      ]
-                    }
-                  ) }) })
-                ] })
-              ] })
-            ] })
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 flex flex-col gap-2 lg:col-span-6", children: [
+    );
+  }
+  if (error || !data) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger", children: error ?? "Failed to load analytics" }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Customers" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            AnalyticsSection,
+            ui.Label,
             {
-              variant: "atlas",
-              title: "Pulse & range",
-              description: "Totals for the chart window above — independent of the summary period filter.",
-              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-2", children: quickPulseMetrics.map((metric) => /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: `rounded-lg border border-ui-border-base bg-ui-bg-base px-2 py-2 shadow-sm ${metric.accentClassName}`.trim(),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: metric.label }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base mt-0.5 text-sm font-semibold tracking-tight", children: metric.value }),
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted mt-0.5 text-[9px] leading-snug", children: metric.helper })
-                  ]
-                },
-                metric.label
-              )) })
+              htmlFor: "customers-count-period",
+              className: "text-ui-fg-muted text-sm",
+              children: "Period (counts)"
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            AnalyticsSection,
+            "select",
             {
-              variant: "atlas",
-              actionsBare: true,
-              title: "Best sellers",
-              description: bestSellerTrendProductTitle ? `Revenue and units over time for “${bestSellerTrendProductTitle}” (#1 by units sold in this window; all-time uses a 12‑month chart).` : "Revenue and units over time for the top product by units sold in this window (all-time leaderboard uses a 12‑month chart).",
-              actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  ui.Label,
-                  {
-                    htmlFor: "products-top-seller-period",
-                    className: "shrink-0 text-ui-fg-muted text-xs font-medium",
-                    children: "Window"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "select",
-                  {
-                    id: "products-top-seller-period",
-                    value: topSellerPeriod,
-                    onChange: (event) => setTopSellerPeriod(event.target.value),
-                    className: SELECT_CLASS_NAME,
-                    children: TOP_SELLER_PERIODS.map((period) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: period.value, children: period.label }, period.value))
-                  }
-                )
-              ] }),
-              children: /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", className: "min-w-0 overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[212px] min-w-[280px] w-full sm:h-[228px]", children: bestSellersTrendLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) : bestSellersTrendError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-2", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-center text-xs", children: bestSellersTrendError }) }) : bestSellersTrendSeries.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "No product sales for this range." }) }) : /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", minWidth: 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
-                recharts.ComposedChart,
-                {
-                  data: bestSellersTrendSeries,
-                  margin: { left: 0, right: 8, top: 6, bottom: 2 },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
-                      "linearGradient",
-                      {
-                        id: gid("best-revenue-area"),
-                        x1: "0",
-                        y1: "0",
-                        x2: "0",
-                        y2: "1",
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            "stop",
-                            {
-                              offset: "0%",
-                              stopColor: PRODUCT_CHART_COLORS.revenue,
-                              stopOpacity: 0.22
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            "stop",
-                            {
-                              offset: "100%",
-                              stopColor: PRODUCT_CHART_COLORS.revenue,
-                              stopOpacity: 0
-                            }
-                          )
-                        ]
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      recharts.CartesianGrid,
-                      {
-                        strokeDasharray: "3 3",
-                        vertical: false,
-                        stroke: "rgba(148,163,184,0.12)"
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      recharts.XAxis,
-                      {
-                        dataKey: "date",
-                        tick: CHART_AXIS_TICK_SM,
-                        tickFormatter: (value) => {
-                          const row = bestSellersTrendSeries.find(
-                            (p) => p.date === String(value)
-                          );
-                          return (row == null ? void 0 : row.label) ?? formatChartLabel(String(value));
-                        },
-                        tickLine: false,
-                        axisLine: { stroke: CHART_AXIS_LINE }
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      recharts.YAxis,
-                      {
-                        yAxisId: "units",
-                        tick: CHART_AXIS_TICK_SM,
-                        tickFormatter: (value) => formatShortNumber(Number(value)),
-                        width: 36,
-                        tickLine: false,
-                        axisLine: { stroke: CHART_AXIS_LINE },
-                        allowDecimals: false
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      recharts.YAxis,
-                      {
-                        yAxisId: "revenue",
-                        orientation: "right",
-                        tick: CHART_AXIS_TICK_SM,
-                        tickFormatter: (value) => formatCompactCurrency(Number(value)),
-                        width: 44,
-                        tickLine: false,
-                        axisLine: { stroke: CHART_AXIS_LINE }
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      recharts.Tooltip,
-                      {
-                        content: (tooltipProps) => /* @__PURE__ */ jsxRuntime.jsx(
-                          MiniTrendTooltip,
-                          {
-                            ...tooltipProps,
-                            productHeadline: bestSellerTrendProductTitle,
-                            hideViewsRow: true
-                          }
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      recharts.Area,
-                      {
-                        yAxisId: "revenue",
-                        type: "natural",
-                        dataKey: "revenue",
-                        name: "Revenue",
-                        stroke: "transparent",
-                        fill: `url(#${gid("best-revenue-area")})`,
-                        isAnimationActive: false
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      recharts.Line,
-                      {
-                        yAxisId: "revenue",
-                        type: "natural",
-                        dataKey: "revenue",
-                        name: "Revenue",
-                        stroke: PRODUCT_CHART_COLORS.revenue,
-                        strokeWidth: 2,
-                        dot: false,
-                        activeDot: { r: 4, fill: PRODUCT_CHART_COLORS.revenue },
-                        isAnimationActive: false
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      recharts.Line,
-                      {
-                        yAxisId: "units",
-                        type: "natural",
-                        dataKey: "units_sold",
-                        name: "Units sold",
-                        stroke: PRODUCT_CHART_COLORS.units,
-                        strokeWidth: 2,
-                        dot: false,
-                        activeDot: { r: 4, fill: PRODUCT_CHART_COLORS.units },
-                        isAnimationActive: false
-                      }
-                    )
-                  ]
-                }
-              ) }) }) })
+              id: "customers-count-period",
+              value: countDays,
+              onChange: (e) => setCountDays(e.target.value),
+              className: "h-9 rounded-md border border-ui-border-base bg-transparent px-3 text-sm text-ui-fg-base outline-none transition focus:ring-2 focus:ring-ui-fg-interactive",
+              children: COUNT_DAY_PRESETS.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.value, children: p.label }, p.value))
             }
           )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 md:items-stretch xl:grid-cols-3 xl:gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AnalyticsSection,
-          {
-            variant: "atlas",
-            className: "min-w-0 md:col-span-1 xl:col-span-1",
-            title: "Leaderboard table",
-            description: "Products ranked by units sold — same window as Best sellers.",
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-[212px] min-w-0 sm:min-h-[228px]", children: /* @__PURE__ */ jsxRuntime.jsx(AnalyticsTableSurface, { className: "shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Table, { className: LEADERBOARD_TABLE_CLASS, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { className: TABLE_HEAD_CELL_NOWRAP, children: "Product" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { className: TABLE_HEAD_CELL_NOWRAP, children: "Units" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { className: TABLE_HEAD_CELL_NOWRAP, children: "Orders" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { className: TABLE_HEAD_CELL_NOWRAP, children: "Revenue" })
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Body, { children: [
-                topSellersError ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-xs", children: topSellersError }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, {}),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, {}),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, {})
-                ] }) : null,
-                !topSellersError ? topSellersByUnits.slice(0, 8).map((product) => {
-                  var _a2;
-                  return /* @__PURE__ */ jsxRuntime.jsxs(
-                    ui.Table.Row,
-                    {
-                      className: product.product_id === ((_a2 = topSellersByUnits[0]) == null ? void 0 : _a2.product_id) ? "bg-emerald-500/5" : void 0,
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: product.product_title }),
-                        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: product.units_sold.toLocaleString() }),
-                        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: product.order_count.toLocaleString() }),
-                        /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: formatCurrency(product.revenue) })
-                      ]
-                    },
-                    product.product_id
-                  );
-                }) : null,
-                !topSellersLoading && !topSellersError && (((_i = topSellers == null ? void 0 : topSellers.products) == null ? void 0 : _i.length) ?? 0) === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "No best seller data yet." }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, {}),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, {}),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, {})
-                ] }) : null
-              ] })
-            ] }) }) })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AnalyticsSection,
-          {
-            variant: "atlas",
-            className: "min-w-0 md:col-span-1 xl:col-span-1",
-            title: "Most viewed products",
-            description: mostViewedTrendProductTitle ? `Views over time for “${mostViewedTrendProductTitle}” (top of the list for your summary period; buckets follow period: today / 7d → week, 30d → month, 90d / all → year).` : "Views over time for the most-viewed product in your summary period (buckets: today / 7d → week, 30d → month, 90d / all → year).",
-            children: performanceLoading ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[212px] items-center justify-center sm:h-[228px]", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) }) : performanceError ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[212px] items-center justify-center px-2 sm:h-[228px]", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-center text-xs", children: performanceError }) }) }) : !(performance == null ? void 0 : performance.productViewsConnected) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-[212px] sm:min-h-[228px]", children: /* @__PURE__ */ jsxRuntime.jsx(
-              EmptyAnalyticsPanel,
-              {
-                title: "Views unavailable",
-                description: "Product view tracking is not available in this environment."
-              }
-            ) }) : ((performance == null ? void 0 : performance.topViewedProducts) ?? []).length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-[212px] sm:min-h-[228px]", children: /* @__PURE__ */ jsxRuntime.jsx(
-              EmptyAnalyticsPanel,
-              {
-                title: "No views",
-                description: "No product views found for this summary period."
-              }
-            ) }) : /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", className: "min-w-0 overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[212px] min-w-[280px] w-full sm:h-[228px]", children: mostViewedTrendLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading chart…" }) }) : mostViewedTrendError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-2", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-center text-xs", children: mostViewedTrendError }) }) : mostViewedTrendSeries.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "No view data in this range." }) }) : /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", minWidth: 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
-              recharts.ComposedChart,
-              {
-                data: mostViewedTrendSeries,
-                margin: { left: 0, right: 8, top: 6, bottom: 2 },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
-                    "linearGradient",
-                    {
-                      id: gid("viewed-views-area"),
-                      x1: "0",
-                      y1: "0",
-                      x2: "0",
-                      y2: "1",
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "stop",
-                          {
-                            offset: "0%",
-                            stopColor: PRODUCT_CHART_COLORS.views,
-                            stopOpacity: 0.22
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "stop",
-                          {
-                            offset: "100%",
-                            stopColor: PRODUCT_CHART_COLORS.views,
-                            stopOpacity: 0
-                          }
-                        )
-                      ]
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.CartesianGrid,
-                    {
-                      strokeDasharray: "3 3",
-                      vertical: false,
-                      stroke: "rgba(148,163,184,0.12)"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.XAxis,
-                    {
-                      dataKey: "date",
-                      tick: CHART_AXIS_TICK_SM,
-                      tickFormatter: (value) => {
-                        const row = mostViewedTrendSeries.find(
-                          (p) => p.date === String(value)
-                        );
-                        return (row == null ? void 0 : row.label) ?? formatChartLabel(String(value));
-                      },
-                      tickLine: false,
-                      axisLine: { stroke: CHART_AXIS_LINE }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.YAxis,
-                    {
-                      tick: CHART_AXIS_TICK_SM,
-                      tickFormatter: (value) => formatShortNumber(Number(value)),
-                      width: 36,
-                      tickLine: false,
-                      axisLine: { stroke: CHART_AXIS_LINE },
-                      allowDecimals: false
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.Tooltip,
-                    {
-                      content: (tooltipProps) => /* @__PURE__ */ jsxRuntime.jsx(
-                        MiniTrendTooltip,
-                        {
-                          ...tooltipProps,
-                          productHeadline: mostViewedTrendProductTitle,
-                          hideUnitsRow: true,
-                          hideRevenueRow: true
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.Area,
-                    {
-                      type: "natural",
-                      dataKey: "views",
-                      name: "Views",
-                      stroke: "transparent",
-                      fill: `url(#${gid("viewed-views-area")})`,
-                      isAnimationActive: false
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.Line,
-                    {
-                      type: "natural",
-                      dataKey: "views",
-                      name: "Views",
-                      stroke: PRODUCT_CHART_COLORS.views,
-                      strokeWidth: 2,
-                      dot: false,
-                      activeDot: { r: 4, fill: PRODUCT_CHART_COLORS.views },
-                      isAnimationActive: false
-                    }
-                  )
-                ]
-              }
-            ) }) }) })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AnalyticsSection,
+        ] }),
+        countDays !== "all" && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
           {
-            variant: "atlas",
-            className: "min-w-0 md:col-span-2 xl:col-span-1",
-            title: "View-to-sales opportunities",
-            description: "Products with attention but weaker unit conversion.",
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-[212px] min-w-0 sm:min-h-[228px]", children: /* @__PURE__ */ jsxRuntime.jsx(AnalyticsTableSurface, { className: "shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Table, { className: OPPORTUNITIES_TABLE_CLASS, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { className: TABLE_HEAD_CELL_NOWRAP, children: "Product" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { className: TABLE_HEAD_CELL_NOWRAP, children: "Views" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { className: TABLE_HEAD_CELL_NOWRAP, children: "Units" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { className: TABLE_HEAD_CELL_NOWRAP, children: "Views / unit" })
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Body, { children: [
-                ((performance == null ? void 0 : performance.viewOpportunities) ?? []).slice(0, 8).map((product) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: product.product_title }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: product.total_views.toLocaleString() }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: product.units_sold.toLocaleString() }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: formatRatio(product.views_per_unit) })
-                ] }, product.product_id)),
-                !performanceLoading && !performanceError && (((_j = performance == null ? void 0 : performance.viewOpportunities) == null ? void 0 : _j.length) ?? 0) === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "No product view opportunities yet." }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, {}),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, {}),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, {})
-                ] }) : null
-              ] })
-            ] }) }) })
+            type: "button",
+            onClick: () => setCountDays("all"),
+            className: "text-xs text-ui-fg-muted hover:text-ui-fg-base transition-colors",
+            "aria-label": "Show all customers (clear filter)",
+            children: "Clear filter"
           }
         )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Guest customers" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: Math.floor(data.guestCount).toLocaleString() })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Registered customers" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: Math.floor(data.registeredCount).toLocaleString() })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Overall customers" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: Math.floor(data.totalCount).toLocaleString() })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Deleted accounts" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: (data.deletedAccountsCount ?? 0).toLocaleString() })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4 mb-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h3", children: "Customers over time" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Label,
+            {
+              htmlFor: "customers-graph-period",
+              className: "text-ui-fg-muted text-sm",
+              children: "Range"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              id: "customers-graph-period",
+              value: graphPeriod,
+              onChange: (e) => setGraphPeriod(e.target.value),
+              className: "h-9 rounded-md border border-ui-border-base bg-transparent px-3 text-sm text-ui-fg-base outline-none transition focus:ring-2 focus:ring-ui-fg-interactive",
+              children: GRAPH_PERIODS.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.value, children: p.label }, p.value))
+            }
+          )
+        ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        AnalyticsSection,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-72", children: graphLoading ? /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
         {
-          variant: "atlas",
-          className: "mt-2",
-          title: "Views vs units sold",
-          description: "Each point is a product (top viewed in this period). Requires product view tracking.",
-          children: /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[220px] w-full sm:h-[248px]", children: performanceLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading scatter…" }) }) : performanceError || !performance ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-2", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-center text-xs", children: performanceError ?? "Failed to load product performance" }) }) : !performance.productViewsConnected ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Product view tracking is not available in this environment." }) }) : viewsVsUnitsScatterData.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "No products with views or sales in this range." }) }) : /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ScatterChart, { margin: { top: 12, right: 16, bottom: 8, left: 8 }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("radialGradient", { id: gid("scatter-glow"), cx: "50%", cy: "50%", r: "50%", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#E879F9", stopOpacity: 0.95 }),
-              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#6366F1", stopOpacity: 0.65 })
-            ] }) }),
+          className: "flex items-center justify-center h-full",
+          role: "status",
+          "aria-label": "Loading customers over time",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted", children: "Loading chart…" })
+        }
+      ) : graphError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger", children: graphError }) }) : /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        recharts.LineChart,
+        {
+          data: series,
+          margin: { top: 8, right: 8, left: 8, bottom: 8 },
+          children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               recharts.CartesianGrid,
               {
                 strokeDasharray: "3 3",
-                stroke: "rgba(148,163,184,0.14)"
+                className: "stroke-ui-border-base"
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
               recharts.XAxis,
               {
-                type: "number",
-                dataKey: "total_views",
-                name: "Views",
-                tick: CHART_AXIS_TICK_SM,
-                stroke: CHART_AXIS_LINE,
-                tickLine: { stroke: CHART_AXIS_LINE },
-                allowDecimals: false,
-                label: {
-                  value: "Views",
-                  position: "insideBottom",
-                  offset: -4,
-                  fontSize: 10,
-                  fill: "#9ca3af"
+                dataKey: "date",
+                tick: { fontSize: 12 },
+                tickFormatter: (v, index) => {
+                  const row = series[index];
+                  if (row == null ? void 0 : row.label) return row.label;
+                  const d = new Date(v);
+                  return `${d.getUTCMonth() + 1}/${d.getUTCDate()}`;
                 }
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
               recharts.YAxis,
               {
-                type: "number",
-                dataKey: "units_sold",
-                name: "Units sold",
-                tick: CHART_AXIS_TICK_SM,
-                stroke: CHART_AXIS_LINE,
-                tickLine: { stroke: CHART_AXIS_LINE },
-                allowDecimals: false,
-                label: {
-                  value: "Units sold",
-                  angle: -90,
-                  position: "insideLeft",
-                  fontSize: 10,
-                  fill: "#9ca3af"
-                }
+                tick: { fontSize: 12 },
+                tickFormatter: (v) => String(Math.floor(Number(v))),
+                allowDecimals: false
               }
             ),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomersOverTimeTooltip, {}) }),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
             /* @__PURE__ */ jsxRuntime.jsx(
-              recharts.Tooltip,
+              recharts.Line,
               {
-                cursor: { strokeDasharray: "4 4", stroke: "rgba(148,163,184,0.45)" },
-                content: /* @__PURE__ */ jsxRuntime.jsx(ProductBarTooltip, {})
+                type: "monotone",
+                dataKey: "registered_count",
+                name: "Registered",
+                stroke: REGISTERED_COLOR,
+                strokeWidth: 2,
+                dot: { r: 3 }
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              recharts.Scatter,
+              recharts.Line,
               {
-                name: "Products",
-                data: viewsVsUnitsScatterData,
-                fill: `url(#${gid("scatter-glow")})`
+                type: "monotone",
+                dataKey: "guest_count",
+                name: "Guest",
+                stroke: GUEST_COLOR,
+                strokeWidth: 2,
+                dot: { r: 3 }
               }
             )
-          ] }) }) }) })
+          ]
         }
-      )
+      ) }) })
     ] })
-  ] }) });
+  ] });
 }
 const ANALYTICS_MODULES = [
   { id: "orders", label: "Orders" },
-  { id: "customers", label: "Customers" },
-  { id: "products", label: "Products" }
+  { id: "customers", label: "Customers" }
 ];
 const AnalyticsPage = () => {
   const [activeModule, setActiveModule] = react.useState("orders");
-  return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsCurrencyProvider, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full bg-ui-bg-subtle", children: /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: `mx-auto flex w-full min-w-0 flex-col ${activeModule === "products" ? "max-w-full gap-2 px-3 py-3 sm:px-4 sm:py-3" : "max-w-[1600px] gap-4 p-4"}`.trim(),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "overflow-hidden rounded-xl border border-ui-border-base bg-ui-bg-base p-0 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 px-4 py-4 sm:gap-5 sm:px-5 sm:py-5 xl:flex-row xl:items-end xl:justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 space-y-1.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h1", className: "tracking-tight", children: "Analytics" }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Review orders, customers, and products in one organized workspace." })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "flex shrink-0 flex-wrap items-center gap-1",
-              role: "tablist",
-              "aria-label": "Analytics modules",
-              children: ANALYTICS_MODULES.map((m) => {
-                const active = activeModule === m.id;
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    role: "tab",
-                    "aria-selected": active,
-                    onClick: () => setActiveModule(m.id),
-                    className: `rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-fg-interactive focus-visible:ring-offset-2 focus-visible:ring-offset-ui-bg-base ${active ? "bg-ui-bg-base text-ui-fg-base shadow-sm" : "text-ui-fg-muted hover:bg-ui-bg-base/60 hover:text-ui-fg-base"}`.trim(),
-                    children: m.label
-                  },
-                  m.id
-                );
-              })
-            }
-          )
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 w-full", children: [
-          activeModule === "orders" && /* @__PURE__ */ jsxRuntime.jsx(OrdersDashboard, {}),
-          activeModule === "customers" && /* @__PURE__ */ jsxRuntime.jsx(CustomersDashboard, {}),
-          activeModule === "products" && /* @__PURE__ */ jsxRuntime.jsx(ProductsDashboard, {})
-        ] })
-      ]
-    }
-  ) }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full bg-ui-bg-base", children: /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "divide-y p-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-6 px-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h1", className: "mb-4", children: "Analytics" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 mb-6", children: ANALYTICS_MODULES.map((m) => /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        variant: activeModule === m.id ? "secondary" : "transparent",
+        size: "small",
+        onClick: () => setActiveModule(m.id),
+        children: m.label
+      },
+      m.id
+    )) }),
+    activeModule === "orders" && /* @__PURE__ */ jsxRuntime.jsx(OrdersDashboard, {}),
+    activeModule === "customers" && /* @__PURE__ */ jsxRuntime.jsx(CustomersDashboard, {})
+  ] }) }) }) });
 };
 const config = adminSdk.defineRouteConfig({
   label: "Analytics",