medusa-analytics 0.0.16 → 0.0.18

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

@@ -5,61 +5,184 @@ const adminSdk = require("@medusajs/admin-sdk");
 const icons = require("@medusajs/icons");
 const ui = require("@medusajs/ui");
 const recharts = require("recharts");
+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 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2.5 md:space-y-3", children });
 }
 function AnalyticsDashboardHeader({
   title,
   description,
-  actions
+  actions,
+  variant = "default",
+  actionsBare = false,
+  appearance = "card"
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "overflow-hidden rounded-2xl border border-ui-border-base bg-ui-bg-base p-0 shadow-sm", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 border-b border-ui-border-base px-5 py-4 lg:flex-row lg:items-end lg:justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", className: "tracking-tight", children: title }),
-        description ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: description }) : null
-      ] }),
-      actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex self-start rounded-xl border border-ui-border-base bg-ui-bg-subtle p-2 lg:self-auto", children: actions }) : null
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 bg-ui-bg-subtle" })
-  ] });
-}
-function AnalyticsStatCard({ label, value, helper }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "h-full rounded-2xl border border-ui-border-base bg-ui-bg-base p-3 shadow-sm transition-shadow", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-[76px] flex-col justify-between gap-1.5", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs font-medium", children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", className: "text-2xl leading-none tracking-tight", children: value }),
-    helper ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs leading-4", children: helper }) : null
-  ] }) });
+  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 ${isPremium ? "border-b border-ui-border-base/80" : "border-b border-ui-border-base"}`.trim(),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "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:self-auto", 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 AnalyticsSection({
-  title,
-  description,
-  actions,
-  children,
-  className
+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: `overflow-hidden rounded-2xl border border-ui-border-base bg-ui-bg-base p-0 shadow-sm ${className ?? ""}`.trim(),
+      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: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 border-b border-ui-border-base px-5 py-4 lg:flex-row lg:items-start lg:justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h3", className: "tracking-tight", children: title }),
-            description ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: description }) : null
-          ] }),
-          actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-2 rounded-xl border border-ui-border-base bg-ui-bg-subtle px-3 py-2", children: actions }) : null
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 py-4", 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 AnalyticsChartSurface({ children, className }) {
+function AnalyticsSection({
+  title,
+  description,
+  actions,
+  children,
+  className,
+  variant = "default",
+  actionsBare = false
+}) {
+  const isAtlas = variant === "atlas";
+  const isPremium = variant !== "default" && !isAtlas;
+  const shellClass = isAtlas ? "overflow-hidden 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: `rounded-xl border border-ui-border-base bg-ui-bg-subtle p-3 shadow-inner ${className ?? ""}`.trim(),
+      className: `${surfaceClassName} ${className ?? ""}`.trim(),
       children
     }
   );
@@ -73,56 +196,263 @@ function AnalyticsTableSurface({ children, className }) {
     }
   );
 }
-function OrdersOverTimeTooltip({
-  active,
-  payload,
-  label
+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 bucketAov(d) {
+  const ordNc = d.orders_count - d.cancelled_count;
+  if (ordNc <= 0) return 0;
+  return nonCancelledRevenue(d) / ordNc;
+}
+function isOrdersTodayPoint(value) {
+  return isDailyOrderRow(value) && "isToday" in value && typeof value.isToday === "boolean";
+}
+function formatCurrency$1(value) {
+  return new Intl.NumberFormat("en-IN", {
+    style: "currency",
+    currency: "INR",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(value);
+}
+function formatCompactCurrency(value) {
+  return new Intl.NumberFormat("en-IN", {
+    style: "currency",
+    currency: "INR",
+    notation: "compact",
+    maximumFractionDigits: 1
+  }).format(value);
+}
+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 formatPercent(value) {
+  return `${value.toFixed(1)}%`;
+}
+function ordersCountFromPiePayload(payload) {
+  if (typeof payload !== "object" || payload === null) return 0;
+  if (!("orders_count" in payload)) return 0;
+  const c = payload.orders_count;
+  return Math.floor(Number(c) || 0);
+}
+function formatShortNumber(value) {
+  return new Intl.NumberFormat("en-IN", {
+    notation: "compact",
+    maximumFractionDigits: value < 10 ? 1 : 0
+  }).format(value);
+}
+function TooltipCard({
+  title,
+  children
 }) {
-  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: {
-        backgroundColor: "rgb(250, 234, 234)",
+        background: "linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.96) 100%)",
         color: "#111827",
-        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
+        border: "1px solid rgba(148, 163, 184, 0.18)",
+        borderRadius: "14px",
+        padding: "12px 14px",
+        boxShadow: "0 16px 40px rgba(15, 23, 42, 0.12)",
+        fontSize: "13px",
+        lineHeight: 1.5,
+        minWidth: "176px"
       },
       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 })
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, marginBottom: "6px" }, children: title }),
+        children
       ]
     }
   );
 }
-const STATUS_COLORS = {
-  pending: "#F59E0B",
-  cancelled: "#EF4444",
-  delivered: "#10B981"
+function OrdersTrendTooltip({
+  active,
+  payload,
+  label
+}) {
+  var _a, _b, _c, _d;
+  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() : "");
+  const orders = ((_c = payload.find((entry) => entry.name === "Orders")) == null ? void 0 : _c.value) ?? 0;
+  const revenue = ((_d = payload.find((entry) => entry.name === "Revenue")) == null ? void 0 : _d.value) ?? 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(TooltipCard, { title: displayLabel, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      "Orders: ",
+      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(orders).toLocaleString() })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      "Revenue: ",
+      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency$1(Number(revenue)) })
+    ] })
+  ] });
+}
+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(TooltipCard, { 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 OrdersSparklineTooltip({
+  active,
+  payload,
+  label
+}) {
+  var _a, _b, _c;
+  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() : "");
+  const orders = Number((_c = payload[0]) == null ? void 0 : _c.value) || 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipCard, { title: displayLabel, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    "Orders: ",
+    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(orders).toLocaleString() })
+  ] }) });
+}
+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(TooltipCard, { 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 KPI_ICON_BG = {
+  green: "bg-emerald-500/20",
+  blue: "bg-sky-500/20",
+  purple: "bg-violet-500/20",
+  amber: "bg-amber-500/20"
 };
-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$1(value) {
-  return new Intl.NumberFormat("en-IN", {
-    style: "currency",
-    currency: "INR",
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 0
-  }).format(value);
+const KPI_ICONS = {
+  green: icons.CurrencyDollar,
+  blue: icons.ShoppingCart,
+  purple: icons.TruckFast,
+  amber: icons.Cash
+};
+const PIE_PALETTE = ["#6366F1", "#94A3B8", "#10B981", "#F59E0B"];
+function TrafficRevenueDonut({
+  traffic,
+  compact = false
+}) {
+  const innerRadius = compact ? 28 : 34;
+  const outerRadius = compact ? 44 : 54;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: compact ? "h-[118px] w-full" : "h-[152px] w-full shrink-0", children: /* @__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: traffic,
+        dataKey: "revenue",
+        nameKey: "label",
+        cx: "50%",
+        cy: "48%",
+        innerRadius,
+        outerRadius,
+        paddingAngle: 2,
+        children: traffic.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: PIE_PALETTE[i % PIE_PALETTE.length] }, `traffic-slice-${i}`))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.Tooltip,
+      {
+        content: ({ active, payload }) => {
+          var _a, _b, _c;
+          return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxRuntime.jsxs(TooltipCard, { title: String(((_a = payload[0]) == null ? void 0 : _a.name) ?? ""), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              "Revenue:",
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency$1(Number((_b = payload[0]) == null ? void 0 : _b.value) || 0) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              "Orders:",
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: ordersCountFromPiePayload((_c = payload[0]) == null ? void 0 : _c.payload).toLocaleString() })
+            ] })
+          ] }) : null;
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.Legend,
+      {
+        wrapperStyle: { fontSize: compact ? 8 : 9, paddingTop: 0 },
+        verticalAlign: "bottom",
+        height: compact ? 18 : 22,
+        iconType: "circle"
+      }
+    )
+  ] }) }) });
+}
+function TrafficSourcesOverviewCard({
+  traffic,
+  loading,
+  error,
+  totalRevenue,
+  windowLabel
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-[132px] flex-col rounded-2xl border border-ui-border-base p-3 shadow-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-xs font-medium text-ui-fg-base", children: "Traffic sources" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "mb-1 text-[10px] leading-snug text-ui-fg-muted", children: [
+      "Revenue share · ",
+      windowLabel
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1", children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[104px] items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) : error ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[104px] items-center justify-center px-1", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-center text-[10px] text-ui-fg-danger", children: error }) }) : traffic.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[104px] items-center justify-center px-1", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-center text-[10px] leading-snug text-ui-fg-muted", children: "No traffic breakdown for this window." }) }) : totalRevenue <= 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-[104px] items-center justify-center px-1", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-center text-[10px] leading-snug text-ui-fg-muted", children: "No recorded revenue in this window." }) }) : /* @__PURE__ */ jsxRuntime.jsx(TrafficRevenueDonut, { traffic, compact: true }) })
+  ] });
+}
+function AtlasKpiCard({
+  label,
+  value,
+  helper,
+  accent
+}) {
+  const Icon = KPI_ICONS[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[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 = [
   { value: "all", label: "All time" },
@@ -136,21 +466,52 @@ 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 = { fontSize: 10, fill: "#e5e7eb" };
+const CHART_AXIS_TICK_SM = { fontSize: 9, fill: "#e5e7eb" };
+const CHART_AXIS_LINE = "#94a3b8";
+const SELECT_CLASS_NAME = "h-9 min-w-[132px] cursor-pointer appearance-none rounded-full 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({
+  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;
   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 [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);
   react.useEffect(() => {
     let cancelled = false;
     setLoading(true);
     setError(null);
     const url = `/admin/analytics/orders-summary?days=${filter}`;
-    fetch(url).then((res) => {
+    fetch(url, { credentials: "include" }).then((res) => {
       if (!res.ok) throw new Error(res.statusText);
       return res.json();
     }).then((body) => {
@@ -169,11 +530,14 @@ function OrdersDashboard() {
     setOverTimeLoading(true);
     setOverTimeError(null);
     const url = `/admin/analytics/orders-over-time?period=${overTimePeriod}`;
-    fetch(url).then((res) => {
+    fetch(url, { credentials: "include" }).then((res) => {
       if (!res.ok) throw new Error(res.statusText);
       return res.json();
     }).then((body) => {
-      if (!cancelled) setDailyOrders(body.dailyOrders ?? []);
+      if (!cancelled) {
+        setDailyOrders(body.dailyOrders ?? []);
+        setPreviousPeriodDailyOrders(body.previousPeriodDailyOrders ?? []);
+      }
     }).catch((e) => {
       if (!cancelled) setOverTimeError(e instanceof Error ? e.message : String(e));
     }).finally(() => {
@@ -183,11 +547,240 @@ function OrdersDashboard() {
       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$1(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$1(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 trendRowsDetailed = react.useMemo(() => {
+    return dailyOrders.map((d, i) => {
+      const prev = previousPeriodDailyOrders[i];
+      return {
+        ...d,
+        aov: bucketAov(d),
+        prev_revenue: (prev == null ? void 0 : prev.total_revenue) ?? 0,
+        prev_orders: (prev == null ? void 0 : prev.orders_count) ?? 0,
+        prev_aov: prev ? bucketAov(prev) : 0
+      };
+    });
+  }, [dailyOrders, previousPeriodDailyOrders]);
+  const hourlyChartRows = react.useMemo(() => {
+    if (!ordersInsights) return [];
+    return ordersInsights.byHour.map((h) => ({
+      label: `${String(h.hour).padStart(2, "0")}:00`,
+      hour: h.hour,
+      orders_count: h.orders_count,
+      revenue: h.revenue
+    }));
+  }, [ordersInsights]);
+  const weekdayChartRows = react.useMemo(() => {
+    if (!ordersInsights) return [];
+    return ordersInsights.byWeekday.map((w) => ({
+      label: w.label,
+      orders_count: w.orders_count,
+      revenue: w.revenue
+    }));
+  }, [ordersInsights]);
+  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(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 trafficTotalRevenue = react.useMemo(
+    () => (ordersInsights == null ? void 0 : ordersInsights.traffic.reduce((sum, t) => sum + (t.revenue || 0), 0)) ?? 0,
+    [ordersInsights]
+  );
+  const insightsRangeLabel = ((_b = OVER_TIME_PERIODS.find((p) => p.value === overTimePeriod)) == null ? void 0 : _b.label) ?? "One week";
+  const quickPulseMetrics = [
+    {
+      label: "Range revenue",
+      value: formatCompactCurrency(trendRevenueTotal),
+      helper: selectedSummaryPeriod,
+      accentClassName: "border-emerald-400/25 bg-emerald-500/5"
+    },
+    {
+      label: "Range orders",
+      value: formatShortNumber(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(peakRevenuePoint == null ? void 0 : peakRevenuePoint.date),
+      accentClassName: "border-amber-400/25 bg-amber-500/5"
+    }
+  ];
   if (loading) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "flex items-center justify-center min-h-[320px]",
+        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…" })
@@ -197,253 +790,1406 @@ function OrdersDashboard() {
   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 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(AnalyticsDashboardShell, { children: [
+  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: [
     /* @__PURE__ */ jsxRuntime.jsx(
       AnalyticsDashboardHeader,
       {
+        variant: "premium",
+        appearance: "inset",
+        actionsBare: true,
         title: "Orders",
-        description: "Monitor revenue, operational health, and status distribution without leaving the analytics workspace.",
+        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 items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "analytics-period", className: "text-ui-fg-muted text-sm", children: "Period" }),
+          /* @__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: "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",
+                className: SELECT_CLASS_NAME,
                 children: SUMMARY_PERIODS$1.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.value, children: p.label }, p.value))
               }
             )
           ] }),
-          filter !== "all" && /* @__PURE__ */ jsxRuntime.jsx(
+          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"
+              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.jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TrafficSourcesOverviewCard,
+            {
+              traffic: (ordersInsights == null ? void 0 : ordersInsights.traffic) ?? [],
+              loading: insightsLoading,
+              error: insightsError,
+              totalRevenue: trafficTotalRevenue,
+              windowLabel: insightsRangeLabel
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3 lg:grid-cols-4", 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-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,
+                  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("div", { className: "grid grid-cols-1 gap-1.5 lg:grid-cols-3", 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: "Revenue over time" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[118px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      recharts.LineChart,
+                      {
+                        data: trendRowsDetailed,
+                        margin: { top: 4, right: 4, left: 0, bottom: 0 },
+                        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", hide: true }),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            recharts.YAxis,
+                            {
+                              width: 36,
+                              tick: CHART_AXIS_TICK_SM,
+                              tickFormatter: (v) => formatCompactCurrency(Number(v))
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            recharts.Tooltip,
+                            {
+                              content: ({ active, payload, label }) => {
+                                var _a2, _b2, _c2, _d2;
+                                return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxRuntime.jsxs(
+                                  TooltipCard,
+                                  {
+                                    title: String(
+                                      isDailyOrderRow((_a2 = payload[0]) == null ? void 0 : _a2.payload) ? ((_b2 = payload[0]) == null ? void 0 : _b2.payload.label) ?? formatChartLabel(String(label)) : label
+                                    ),
+                                    children: [
+                                      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                                        "This:",
+                                        " ",
+                                        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCompactCurrency(
+                                          Number(
+                                            (_c2 = payload.find((p) => p.dataKey === "total_revenue")) == null ? void 0 : _c2.value
+                                          ) || 0
+                                        ) })
+                                      ] }),
+                                      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                                        "Previous:",
+                                        " ",
+                                        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCompactCurrency(
+                                          Number(
+                                            (_d2 = payload.find((p) => p.dataKey === "prev_revenue")) == null ? void 0 : _d2.value
+                                          ) || 0
+                                        ) })
+                                      ] })
+                                    ]
+                                  }
+                                ) : null;
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            recharts.Line,
+                            {
+                              type: "natural",
+                              dataKey: "total_revenue",
+                              name: "This period",
+                              stroke: "#D946EF",
+                              strokeWidth: 2,
+                              dot: false
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            recharts.Line,
+                            {
+                              type: "natural",
+                              dataKey: "prev_revenue",
+                              name: "Previous",
+                              stroke: "#94a3b8",
+                              strokeWidth: 1.5,
+                              strokeDasharray: "5 4",
+                              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: "Orders count" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[118px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      recharts.LineChart,
+                      {
+                        data: trendRowsDetailed,
+                        margin: { top: 4, right: 4, left: 0, bottom: 0 },
+                        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", hide: true }),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            recharts.YAxis,
+                            {
+                              width: 28,
+                              tick: CHART_AXIS_TICK_SM,
+                              allowDecimals: false
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            recharts.Tooltip,
+                            {
+                              content: ({ active, payload, label }) => {
+                                var _a2, _b2;
+                                return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxRuntime.jsxs(TooltipCard, { title: String(label), children: [
+                                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                                    "This:",
+                                    " ",
+                                    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(
+                                      Number(
+                                        (_a2 = payload.find((p) => p.dataKey === "orders_count")) == null ? void 0 : _a2.value
+                                      ) || 0
+                                    ).toLocaleString() })
+                                  ] }),
+                                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                                    "Previous:",
+                                    " ",
+                                    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(
+                                      Number(
+                                        (_b2 = payload.find((p) => p.dataKey === "prev_orders")) == null ? void 0 : _b2.value
+                                      ) || 0
+                                    ).toLocaleString() })
+                                  ] })
+                                ] }) : null;
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            recharts.Line,
+                            {
+                              type: "natural",
+                              dataKey: "orders_count",
+                              name: "This period",
+                              stroke: "#38BDF8",
+                              strokeWidth: 2,
+                              dot: false
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            recharts.Line,
+                            {
+                              type: "natural",
+                              dataKey: "prev_orders",
+                              name: "Previous",
+                              stroke: "#94a3b8",
+                              strokeWidth: 1.5,
+                              strokeDasharray: "5 4",
+                              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: "AOV (non-cancelled)" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[118px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      recharts.LineChart,
+                      {
+                        data: trendRowsDetailed,
+                        margin: { top: 4, right: 4, left: 0, bottom: 0 },
+                        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", hide: true }),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            recharts.YAxis,
+                            {
+                              width: 36,
+                              tick: CHART_AXIS_TICK_SM,
+                              tickFormatter: (v) => formatCompactCurrency(Number(v))
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            recharts.Tooltip,
+                            {
+                              content: ({ active, payload, label }) => {
+                                var _a2, _b2;
+                                return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxRuntime.jsxs(TooltipCard, { title: String(label), children: [
+                                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                                    "This:",
+                                    " ",
+                                    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency$1(
+                                      Number(
+                                        (_a2 = payload.find((p) => p.dataKey === "aov")) == null ? void 0 : _a2.value
+                                      ) || 0
+                                    ) })
+                                  ] }),
+                                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                                    "Previous:",
+                                    " ",
+                                    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency$1(
+                                      Number(
+                                        (_b2 = payload.find((p) => p.dataKey === "prev_aov")) == null ? void 0 : _b2.value
+                                      ) || 0
+                                    ) })
+                                  ] })
+                                ] }) : null;
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            recharts.Line,
+                            {
+                              type: "natural",
+                              dataKey: "aov",
+                              name: "This period",
+                              stroke: "#D97706",
+                              strokeWidth: 2,
+                              dot: false
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            recharts.Line,
+                            {
+                              type: "natural",
+                              dataKey: "prev_aov",
+                              name: "Previous",
+                              stroke: "#94a3b8",
+                              strokeWidth: 1.5,
+                              strokeDasharray: "5 4",
+                              dot: false
+                            }
+                          )
+                        ]
+                      }
+                    ) }) })
+                  ] })
+                ] }),
+                /* @__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,
+                            tickLine: false,
+                            axisLine: false,
+                            tickFormatter: (value, index) => {
+                              const row = dailyOrders[index];
+                              return (row == null ? void 0 : row.label) ?? formatChartLabel(value);
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.YAxis,
+                          {
+                            tick: CHART_AXIS_TICK,
+                            tickFormatter: (v) => formatCompactCurrency(Number(v))
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.Tooltip,
+                          {
+                            content: ({ active, payload, label }) => active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxRuntime.jsx(TooltipCard, { title: String(label), children: payload.map((p) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                              p.name,
+                              ":",
+                              " ",
+                              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency$1(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(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: ((_c = OVER_TIME_PERIODS.find((period) => period.value === overTimePeriod)) == null ? void 0 : _c.label) ?? "One week" })
+                    ] }),
+                    /* @__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" }),
+                        "Orders"
+                      ] }),
+                      /* @__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(200px,30vh)] min-h-[160px] sm:h-[min(216px,32vh)]", children: overTimeLoading ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: "flex h-full items-center justify-center",
+                      role: "status",
+                      "aria-label": "Loading orders over time",
+                      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", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-xs", children: overTimeError }) }) : /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    recharts.ComposedChart,
+                    {
+                      data: dailyOrders,
+                      margin: { top: 4, right: 6, left: -6, bottom: 0 },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "ordersGradient", 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: "revenueGradient", 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: "ordersAreaFill", 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: "revenueAreaFill", 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.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, index) => {
+                              const row = dailyOrders[index];
+                              return (row == null ? void 0 : row.label) ?? formatChartLabel(value);
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.YAxis,
+                          {
+                            yAxisId: "orders",
+                            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(OrdersTrendTooltip, {}),
+                            cursor: {
+                              stroke: "rgba(248, 250, 252, 0.35)",
+                              strokeWidth: 1
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.Area,
+                          {
+                            yAxisId: "orders",
+                            type: "natural",
+                            dataKey: "orders_count",
+                            stroke: "none",
+                            fill: "url(#ordersAreaFill)",
+                            isAnimationActive: false,
+                            legendType: "none"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.Area,
+                          {
+                            yAxisId: "revenue",
+                            type: "natural",
+                            dataKey: "total_revenue",
+                            stroke: "none",
+                            fill: "url(#revenueAreaFill)",
+                            isAnimationActive: false,
+                            legendType: "none"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.Line,
+                          {
+                            yAxisId: "orders",
+                            type: "natural",
+                            dataKey: "orders_count",
+                            name: "Orders",
+                            stroke: "url(#ordersGradient)",
+                            strokeWidth: 2,
+                            dot: false,
+                            activeDot: { r: 4, fill: STATUS_BAR_COLORS.orders }
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.Line,
+                          {
+                            yAxisId: "revenue",
+                            type: "natural",
+                            dataKey: "total_revenue",
+                            name: "Revenue",
+                            stroke: "url(#revenueGradient)",
+                            strokeWidth: 2,
+                            dot: false,
+                            activeDot: { r: 4, fill: STATUS_BAR_COLORS.revenue }
+                          }
+                        )
+                      ]
+                    }
+                  ) }) })
+                ] })
+              ] })
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 flex flex-col gap-2 xl:col-span-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            AnalyticsSection,
+            {
+              variant: "atlas",
+              title: "Pulse & range",
+              description: "Window totals and an orders time series 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
+                )) }),
+                !overTimeLoading && !overTimeError && dailyOrders.length > 0 ? /* @__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: "Orders (time series)" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[76px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    recharts.LineChart,
+                    {
+                      data: dailyOrders,
+                      margin: { top: 2, right: 4, left: -18, bottom: 2 },
+                      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", hide: true }),
+                        /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { hide: true, domain: ["auto", "auto"] }),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.Tooltip,
+                          {
+                            content: /* @__PURE__ */ jsxRuntime.jsx(OrdersSparklineTooltip, {}),
+                            cursor: { stroke: "rgba(148,163,184,0.35)", strokeWidth: 1 }
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.Line,
+                          {
+                            type: "natural",
+                            dataKey: "orders_count",
+                            stroke: "#3b82f6",
+                            strokeWidth: 2,
+                            dot: { r: 2, fill: "#3b82f6" },
+                            activeDot: { r: 3 }
+                          }
+                        )
+                      ]
+                    }
+                  ) }) })
+                ] }) : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            AnalyticsSection,
+            {
+              variant: "atlas",
+              title: "Order → fulfillment funnel",
+              description: `Stages by order created date (UTC), same range as Revenue & orders (${((_d = OVER_TIME_PERIODS.find((p) => p.value === overTimePeriod)) == null ? void 0 : _d.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,
+                            stroke: CHART_AXIS_LINE,
+                            tickLine: { stroke: CHART_AXIS_LINE },
+                            tickFormatter: (value) => {
+                              const row = dailyOrders.find((r) => r.date === value);
+                              return (row == null ? void 0 : row.label) ?? formatChartLabel(String(value));
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.YAxis,
+                          {
+                            tick: CHART_AXIS_TICK_SM,
+                            stroke: CHART_AXIS_LINE,
+                            tickLine: { stroke: CHART_AXIS_LINE },
+                            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(
+                                TooltipCard,
+                                {
+                                  title: typeof label === "string" ? ((_a2 = dailyOrders.find((r) => r.date === label)) == null ? void 0 : _a2.label) ?? formatChartLabel(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,
+                            stroke: CHART_AXIS_LINE,
+                            tickLine: { stroke: CHART_AXIS_LINE },
+                            tickFormatter: (value) => {
+                              const row = dailyOrders.find((r) => r.date === value);
+                              return (row == null ? void 0 : row.label) ?? formatChartLabel(String(value));
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.YAxis,
+                          {
+                            domain: [0, 100],
+                            tick: CHART_AXIS_TICK_SM,
+                            stroke: CHART_AXIS_LINE,
+                            tickLine: { stroke: CHART_AXIS_LINE },
+                            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(
+                                TooltipCard,
+                                {
+                                  title: typeof label === "string" ? ((_a2 = dailyOrders.find((r) => r.date === label)) == null ? void 0 : _a2.label) ?? formatChartLabel(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,
+                {
+                  title: "No funnel data",
+                  description: "No orders in this range to chart."
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            AnalyticsSection,
+            {
+              variant: "atlas",
+              title: "Order revenue (attribution)",
+              description: "All revenue is from captured Medusa orders until storefront channel data exists.",
+              children: insightsLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[100px] items-center justify-center py-3", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) : insightsError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[100px] items-center justify-center px-2 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-center text-xs", children: insightsError }) }) : ordersInsights && ordersInsights.traffic.length > 0 ? trafficTotalRevenue <= 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted px-0.5 text-center text-[11px] leading-snug", children: "No recorded revenue in this window (totals may be zero until orders are paid or finalized)." }) : /* @__PURE__ */ jsxRuntime.jsx(TrafficRevenueDonut, { traffic: ordersInsights.traffic }) : /* @__PURE__ */ jsxRuntime.jsx(
+                EmptyAnalyticsPanel,
+                {
+                  title: "No order revenue",
+                  description: "No orders in this window."
+                }
+              )
             }
           )
         ] })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        AnalyticsStatCard,
-        {
-          label: "Total orders",
-          value: data.totalOrders.toLocaleString()
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        AnalyticsStatCard,
-        {
-          label: "Total revenue",
-          value: formatCurrency$1(data.totalRevenue)
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        AnalyticsStatCard,
-        {
-          label: "Average order value",
-          value: formatCurrency$1(data.aov)
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        AnalyticsStatCard,
-        {
-          label: "Orders today",
-          value: data.ordersToday.toLocaleString()
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        AnalyticsStatCard,
-        {
-          label: "Pending orders",
-          value: data.pendingOrders.toLocaleString()
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        AnalyticsStatCard,
-        {
-          label: "Avg. fulfillment time",
-          value: data.avgFulfillmentTimeHours != null ? `${data.avgFulfillmentTimeHours}h` : "—",
-          helper: "Measured in hours"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        AnalyticsStatCard,
-        {
-          label: "Cancelled orders",
-          value: data.cancelledOrders.toLocaleString()
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        AnalyticsStatCard,
-        {
-          label: "Delivered orders",
-          value: data.deliveredOrders.toLocaleString()
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        AnalyticsStatCard,
-        {
-          label: "Exchange orders",
-          value: data.exchangeOrders.toLocaleString()
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        AnalyticsStatCard,
-        {
-          label: "Return orders",
-          value: data.returnOrders.toLocaleString()
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4 xl:grid-cols-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(AnalyticsSection, { title: "Orders by status", children: /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[300px] 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.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(
-          recharts.Pie,
+          AnalyticsSection,
           {
-            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}`))
+            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,
+                      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(dateStr);
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    recharts.YAxis,
+                    {
+                      width: 28,
+                      tick: CHART_AXIS_TICK,
+                      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(
-          recharts.Tooltip,
+          AnalyticsSection,
           {
-            formatter: (value) => [value ?? 0, "Orders"]
+            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,
+                        tickLine: false,
+                        axisLine: false,
+                        tickFormatter: formatChartLabel
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      recharts.YAxis,
+                      {
+                        width: 28,
+                        tick: CHART_AXIS_TICK,
+                        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.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.jsx(AnalyticsSection, { title: "Returns & exchanges", children: /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[300px] 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.jsxs("div", { className: "mt-3 grid grid-cols-1 items-start gap-2 md:grid-cols-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          recharts.Pie,
+          AnalyticsSection,
           {
-            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}`))
+            variant: "atlas",
+            title: "Sales by weekday",
+            description: `Order revenue by UTC weekday — last ${insightsWindowDays} days.`,
+            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 }) }) }) : weekdayChartRows.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(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.BarChart,
+              {
+                data: weekdayChartRows,
+                margin: { top: 2, right: 4, left: -8, bottom: 2 },
+                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
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    recharts.YAxis,
+                    {
+                      width: 40,
+                      tick: CHART_AXIS_TICK_SM,
+                      tickFormatter: (v) => formatCompactCurrency(Number(v))
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    recharts.Tooltip,
+                    {
+                      content: ({ active, payload, label }) => {
+                        var _a2, _b2;
+                        return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxRuntime.jsxs(TooltipCard, { title: String(label), children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                            "Revenue:",
+                            " ",
+                            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency$1(
+                              Number(
+                                (_a2 = payload.find((p) => p.dataKey === "revenue")) == null ? void 0 : _a2.value
+                              ) || 0
+                            ) })
+                          ] }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                            "Orders:",
+                            " ",
+                            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(
+                              Number(
+                                (_b2 = payload.find((p) => p.dataKey === "orders_count")) == null ? void 0 : _b2.value
+                              ) || 0
+                            ).toLocaleString() })
+                          ] })
+                        ] }) : null;
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(recharts.Bar, { dataKey: "revenue", name: "Revenue", fill: "#D946EF", radius: [4, 4, 0, 0] })
+                ]
+              }
+            ) }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+              EmptyAnalyticsPanel,
+              {
+                title: "No weekday data",
+                description: "No orders in this window."
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          recharts.Tooltip,
+          AnalyticsSection,
           {
-            formatter: (value) => [value ?? 0, "Count"]
+            variant: "atlas",
+            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(TooltipCard, { 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,
+              {
+                title: "Nothing to compare",
+                description: "No placed orders and no draft rows in this snapshot."
+              }
+            )
           }
         ),
-        /* @__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.jsx(
-      AnalyticsSection,
-      {
-        title: "Orders over time",
-        actions: /* @__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))
-            }
-          )
-        ] }),
-        children: /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { children: /* @__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,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AnalyticsSection,
           {
-            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(
-                recharts.XAxis,
-                {
-                  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.jsx(
-                recharts.YAxis,
-                {
-                  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(
-                recharts.Line,
-                {
-                  type: "monotone",
-                  dataKey: "orders_count",
-                  name: "Orders",
-                  stroke: "var(--medusa-color-ui-fg-interactive)",
-                  strokeWidth: 2,
-                  dot: { r: 3 }
-                }
-              )
-            ]
+            variant: "atlas",
+            title: "Sales by hour (UTC)",
+            description: `Orders created by hour — last ${insightsWindowDays} days.`,
+            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 }) }) }) : hourlyChartRows.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(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.BarChart,
+              {
+                data: hourlyChartRows,
+                margin: { top: 2, right: 4, left: -8, bottom: 2 },
+                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",
+                      interval: 3,
+                      tick: CHART_AXIS_TICK_SM
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    recharts.YAxis,
+                    {
+                      width: 28,
+                      tick: CHART_AXIS_TICK,
+                      allowDecimals: false
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    recharts.Tooltip,
+                    {
+                      content: ({ active, payload, label }) => {
+                        var _a2, _b2;
+                        return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxRuntime.jsxs(TooltipCard, { title: String(label), children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                            "Orders:",
+                            " ",
+                            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(
+                              Number(
+                                (_a2 = payload.find((p) => p.dataKey === "orders_count")) == null ? void 0 : _a2.value
+                              ) || 0
+                            ).toLocaleString() })
+                          ] }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                            "Revenue:",
+                            " ",
+                            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency$1(
+                              Number(
+                                (_b2 = payload.find((p) => p.dataKey === "revenue")) == null ? void 0 : _b2.value
+                              ) || 0
+                            ) })
+                          ] })
+                        ] }) : null;
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(recharts.Bar, { dataKey: "orders_count", name: "Orders", fill: "#38BDF8", radius: [4, 4, 0, 0] })
+                ]
+              }
+            ) }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+              EmptyAnalyticsPanel,
+              {
+                title: "No hourly data",
+                description: "No orders in this window."
+              }
+            )
           }
-        ) }) }) })
-      }
-    )
-  ] });
+        )
+      ] })
+    ] })
+  ] }) });
 }
 function CustomersOverTimeTooltip({
   active,
@@ -483,6 +2229,17 @@ function CustomersOverTimeTooltip({
     }
   );
 }
+function MixPieTooltip({
+  active,
+  payload
+}) {
+  if (!active || !(payload == null ? void 0 : payload.length)) return null;
+  const row = payload[0];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm shadow-md", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "font-medium text-ui-fg-base", children: row.name }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted", children: Math.floor(Number(row.value) || 0).toLocaleString() })
+  ] });
+}
 const COUNT_DAY_PRESETS = [
   { value: "all", label: "All time" },
   { value: "0", label: "Today" },
@@ -506,12 +2263,15 @@ function CustomersDashboard() {
   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).then((res) => {
+    fetch(url, { credentials: "include" }).then((res) => {
       if (!res.ok) throw new Error(res.statusText);
       return res.json();
     }).then((body) => {
@@ -530,7 +2290,7 @@ function CustomersDashboard() {
     setGraphLoading(true);
     setGraphError(null);
     const url = `/admin/analytics/customers-over-time?period=${graphPeriod}`;
-    fetch(url).then((res) => {
+    fetch(url, { credentials: "include" }).then((res) => {
       if (!res.ok) throw new Error(res.statusText);
       return res.json();
     }).then((body) => {
@@ -544,6 +2304,34 @@ function CustomersDashboard() {
       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 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]);
   if (loading) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -628,6 +2416,70 @@ function CustomersDashboard() {
         }
       )
     ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AnalyticsSection,
+        {
+          title: "Guest vs registered",
+          description: "Customer mix for the selected count period (same filter as the summary cards).",
+          children: /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-72", children: guestRegisteredPieData.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-sm", children: "No guest or registered customers in this range." }) }) : /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.Pie,
+              {
+                data: guestRegisteredPieData,
+                dataKey: "value",
+                nameKey: "name",
+                cx: "50%",
+                cy: "50%",
+                innerRadius: 52,
+                outerRadius: 88,
+                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: 12 }, iconType: "circle" })
+          ] }) }) }) })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AnalyticsSection,
+        {
+          title: "Repeat purchases",
+          description: "Orders with a customer_id in the same window as the period filter (guest checkouts excluded from rate).",
+          children: /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { children: repeatLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[200px] items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Loading…" }) }) : repeatError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[200px] items-center justify-center px-2", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-center text-sm", children: repeatError }) }) : repeatStats ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              AnalyticsStatCard,
+              {
+                label: "Repeat rate",
+                value: `${repeatStats.repeat_rate_percent.toFixed(1)}%`,
+                helper: repeatStats.window_days >= 365 ? "Approx. 12-month window" : `Last ${repeatStats.window_days} days`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              AnalyticsStatCard,
+              {
+                label: "Customers with orders",
+                value: repeatStats.customers_with_orders.toLocaleString()
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              AnalyticsStatCard,
+              {
+                label: "Repeat customers (2+)",
+                value: repeatStats.repeat_customers.toLocaleString()
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[200px] items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "No data." }) }) })
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       AnalyticsSection,
       {
@@ -1019,6 +2871,10 @@ function ProductsDashboard() {
     })).reverse(),
     [performance]
   );
+  const viewsVsUnitsScatterData = react.useMemo(
+    () => ((performance == null ? void 0 : performance.topViewedProducts) ?? []).slice(0, 48).filter((row) => row.total_views > 0 || row.units_sold > 0),
+    [performance]
+  );
   if (summaryLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -1364,7 +3220,66 @@ function ProductsDashboard() {
           ] }) })
         }
       )
-    ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AnalyticsSection,
+      {
+        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, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-80", 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", children: "Loading scatter…" }) }) : performanceError || !performance ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger", 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", 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", 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(recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: "rgba(148,163,184,0.2)" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.XAxis,
+            {
+              type: "number",
+              dataKey: "total_views",
+              name: "Views",
+              tick: { fontSize: 11 },
+              allowDecimals: false,
+              label: {
+                value: "Views",
+                position: "insideBottom",
+                offset: -4,
+                fontSize: 11,
+                fill: "#6b7280"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.YAxis,
+            {
+              type: "number",
+              dataKey: "units_sold",
+              name: "Units sold",
+              tick: { fontSize: 11 },
+              allowDecimals: false,
+              label: {
+                value: "Units sold",
+                angle: -90,
+                position: "insideLeft",
+                fontSize: 11,
+                fill: "#6b7280"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Tooltip,
+            {
+              cursor: { strokeDasharray: "4 4" },
+              content: /* @__PURE__ */ jsxRuntime.jsx(ProductBarTooltip, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Scatter,
+            {
+              name: "Products",
+              data: viewsVsUnitsScatterData,
+              fill: VIEWS_COLOR
+            }
+          )
+        ] }) }) }) })
+      }
+    )
   ] });
 }
 const ANALYTICS_MODULES = [
@@ -1381,16 +3296,29 @@ const AnalyticsPage = () => {
           /* @__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 flex-wrap items-center gap-2 rounded-2xl border border-ui-border-base bg-ui-bg-subtle p-1.5", children: ANALYTICS_MODULES.map((m) => /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Button,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            variant: activeModule === m.id ? "secondary" : "transparent",
-            size: "small",
-            onClick: () => setActiveModule(m.id),
-            children: m.label
-          },
-          m.id
-        )) })
+            className: "flex flex-wrap items-center gap-1 rounded-2xl border border-ui-border-base bg-ui-bg-subtle p-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-xl 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.jsx("div", { className: "h-1 bg-ui-bg-subtle" })
     ] }),