medusa-analytics 0.0.17 → 0.0.18

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

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useMemo } from "react";
 import { defineRouteConfig } from "@medusajs/admin-sdk";
-import { ChartBar } from "@medusajs/icons";
-import { Container, Heading, Text, Label, Button, Table } from "@medusajs/ui";
-import { ResponsiveContainer, ComposedChart, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Area, Line, LineChart, ReferenceLine, BarChart, Bar, Cell } from "recharts";
+import { CurrencyDollar, ShoppingCart, TruckFast, Cash, ChartBar } from "@medusajs/icons";
+import { Container, Text, Heading, Label, Button, Table } from "@medusajs/ui";
+import { ResponsiveContainer, LineChart, CartesianGrid, XAxis, YAxis, Tooltip, Line, ComposedChart, Legend, Area, ReferenceLine, BarChart, Bar, PieChart, Pie, Cell, ScatterChart, Scatter } from "recharts";
 const ACCENT_STYLES = {
   blue: {
     border: "border-sky-400/30",
@@ -46,33 +46,40 @@ function AnalyticsDashboardHeader({
   title,
   description,
   actions,
-  variant = "default"
+  variant = "default",
+  actionsBare = false,
+  appearance = "card"
 }) {
   const isPremium = variant === "premium";
-  return /* @__PURE__ */ jsxs(
-    Container,
+  const isInset = appearance === "inset";
+  const headerRow = /* @__PURE__ */ jsxs(
+    "div",
     {
-      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(),
+      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__ */ jsxs(
+        /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+          /* @__PURE__ */ jsx(Heading, { level: "h2", className: isPremium ? "text-lg font-semibold tracking-tight" : "tracking-tight", children: title }),
+          description ? /* @__PURE__ */ jsx(Text, { className: `text-ui-fg-muted ${isPremium ? "max-w-2xl text-xs leading-snug" : "text-sm"}`.trim(), children: description }) : null
+        ] }),
+        actions ? actionsBare ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-3 self-start lg:self-auto", children: actions }) : /* @__PURE__ */ jsx(
           "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__ */ jsxs("div", { className: "space-y-0.5", children: [
-                /* @__PURE__ */ jsx(Heading, { level: "h2", className: isPremium ? "text-lg font-semibold tracking-tight" : "tracking-tight", children: title }),
-                description ? /* @__PURE__ */ jsx(Text, { className: `text-ui-fg-muted ${isPremium ? "max-w-2xl text-xs leading-snug" : "text-sm"}`.trim(), children: description }) : null
-              ] }),
-              actions ? /* @__PURE__ */ 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
-            ]
+            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__ */ jsx("div", { className: "border-0 bg-transparent p-0 shadow-none", children: headerRow });
+  }
+  return /* @__PURE__ */ jsxs(
+    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__ */ jsx(
           "div",
           {
@@ -143,23 +150,24 @@ function AnalyticsSection({
   actions,
   children,
   className,
-  variant = "default"
+  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.5 border-b border-ui-border-base bg-ui-bg-subtle/40 px-4 py-2.5 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 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-3" : variant === "hero" ? "px-4 py-3" : "px-4 py-3";
+  const bodyClass = isAtlas ? "p-2" : variant === "hero" ? "px-4 py-3" : "px-4 py-3";
   return /* @__PURE__ */ jsxs(Container, { className: `${shellClass} ${className ?? ""}`.trim(), children: [
     /* @__PURE__ */ jsxs("div", { className: headerClass, children: [
       /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-0.5", children: [
         /* @__PURE__ */ jsx(Heading, { level: "h3", className: titleClass, children: title }),
         description ? /* @__PURE__ */ jsx(Text, { className: `text-ui-fg-muted ${descClass}`.trim(), children: description }) : null
       ] }),
-      actions ? /* @__PURE__ */ jsx("div", { className: actionsShellClass, children: actions }) : null
+      actions ? actionsBare ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions }) : /* @__PURE__ */ jsx("div", { className: actionsShellClass, children: actions }) : null
     ] }),
     /* @__PURE__ */ jsx("div", { className: bodyClass, children })
   ] });
@@ -169,7 +177,7 @@ function AnalyticsChartSurface({
   className,
   variant = "default"
 }) {
-  const surfaceClassName = variant === "atlas" ? "rounded-lg border border-ui-border-base bg-ui-bg-subtle/50 p-2.5 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";
+  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__ */ jsx(
     "div",
     {
@@ -189,7 +197,21 @@ function AnalyticsTableSurface({ children, className }) {
 }
 function isDailyOrderRow(value) {
   if (typeof value !== "object" || value === null) return false;
-  return "date" in value && "orders_count" in value && "total_revenue" in value && typeof value.date === "string" && typeof value.orders_count === "number" && typeof value.total_revenue === "number";
+  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";
@@ -219,6 +241,12 @@ function formatChartLabel(value) {
 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",
@@ -327,33 +355,102 @@ const KPI_ICON_BG = {
   purple: "bg-violet-500/20",
   amber: "bg-amber-500/20"
 };
+const KPI_ICONS = {
+  green: CurrencyDollar,
+  blue: ShoppingCart,
+  purple: TruckFast,
+  amber: 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__ */ jsx("div", { className: compact ? "h-[118px] w-full" : "h-[152px] w-full shrink-0", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart, { margin: { top: 2, right: 2, left: 2, bottom: 2 }, children: [
+    /* @__PURE__ */ jsx(
+      Pie,
+      {
+        data: traffic,
+        dataKey: "revenue",
+        nameKey: "label",
+        cx: "50%",
+        cy: "48%",
+        innerRadius,
+        outerRadius,
+        paddingAngle: 2,
+        children: traffic.map((_, i) => /* @__PURE__ */ jsx(Cell, { fill: PIE_PALETTE[i % PIE_PALETTE.length] }, `traffic-slice-${i}`))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        content: ({ active, payload }) => {
+          var _a, _b, _c;
+          return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxs(TooltipCard, { title: String(((_a = payload[0]) == null ? void 0 : _a.name) ?? ""), children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              "Revenue:",
+              " ",
+              /* @__PURE__ */ jsx("strong", { children: formatCurrency$1(Number((_b = payload[0]) == null ? void 0 : _b.value) || 0) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              "Orders:",
+              " ",
+              /* @__PURE__ */ jsx("strong", { children: ordersCountFromPiePayload((_c = payload[0]) == null ? void 0 : _c.payload).toLocaleString() })
+            ] })
+          ] }) : null;
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      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__ */ jsxs("div", { className: "flex min-h-[132px] flex-col rounded-2xl border border-ui-border-base p-3 shadow-sm", children: [
+    /* @__PURE__ */ jsx(Text, { className: "text-xs font-medium text-ui-fg-base", children: "Traffic sources" }),
+    /* @__PURE__ */ jsxs(Text, { className: "mb-1 text-[10px] leading-snug text-ui-fg-muted", children: [
+      "Revenue share · ",
+      windowLabel
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: loading ? /* @__PURE__ */ jsx("div", { className: "flex h-[104px] items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) : error ? /* @__PURE__ */ jsx("div", { className: "flex h-[104px] items-center justify-center px-1", children: /* @__PURE__ */ jsx(Text, { className: "text-center text-[10px] text-ui-fg-danger", children: error }) }) : traffic.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-[104px] items-center justify-center px-1", children: /* @__PURE__ */ jsx(Text, { className: "text-center text-[10px] leading-snug text-ui-fg-muted", children: "No traffic breakdown for this window." }) }) : totalRevenue <= 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-[104px] items-center justify-center px-1", children: /* @__PURE__ */ jsx(Text, { className: "text-center text-[10px] leading-snug text-ui-fg-muted", children: "No recorded revenue in this window." }) }) : /* @__PURE__ */ jsx(TrafficRevenueDonut, { traffic, compact: true }) })
+  ] });
+}
 function AtlasKpiCard({
-  index,
   label,
   value,
   helper,
   accent
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-ui-border-base bg-ui-bg-base p-3 shadow-sm", children: [
+  const Icon = KPI_ICONS[accent];
+  return /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-      /* @__PURE__ */ jsxs(Text, { className: "text-left text-[11px] leading-tight text-ui-fg-muted", children: [
-        /* @__PURE__ */ jsxs("span", { className: "font-semibold text-ui-fg-base", children: [
-          index,
-          "."
-        ] }),
-        " ",
-        label
-      ] }),
+      /* @__PURE__ */ jsx(Text, { className: "min-w-0 flex-1 text-left text-xs font-medium leading-snug text-ui-fg-base", children: label }),
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: `h-7 w-7 shrink-0 rounded-full ${KPI_ICON_BG[accent]}`,
-          "aria-hidden": true
+          className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${KPI_ICON_BG[accent]}`,
+          "aria-hidden": true,
+          children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-ui-fg-base" })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "mt-2 text-base font-semibold tabular-nums tracking-tight text-ui-fg-base sm:text-lg", children: value }),
-    helper ? /* @__PURE__ */ jsx(Text, { className: "mt-1 text-[10px] leading-snug text-ui-fg-muted", children: helper }) : null
+    /* @__PURE__ */ jsx("div", { className: "mt-3 text-xl font-semibold tabular-nums tracking-tight text-ui-fg-base sm:text-2xl", children: value }),
+    helper ? /* @__PURE__ */ jsx(Text, { className: "mt-2 text-[11px] leading-snug text-ui-fg-muted", children: helper }) : null
   ] });
 }
 const SUMMARY_PERIODS$1 = [
@@ -378,32 +475,33 @@ const STATUS_BAR_COLORS = {
   orders: "#38BDF8",
   revenue: "#D946EF"
 };
-const SELECT_CLASS_NAME = "h-8 min-w-[120px] rounded-lg border border-ui-border-strong bg-ui-bg-base px-2 text-xs text-ui-fg-base outline-none transition focus:ring-2 focus:ring-ui-fg-interactive";
+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__ */ jsx(AnalyticsChartSurface, { variant: "atlas", className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-[120px] flex-col justify-between gap-2 rounded-lg border border-dashed border-ui-border-base bg-ui-bg-subtle/40 p-3", children: [
-    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-xs font-semibold", children: title }),
-      /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[11px] leading-snug", children: description })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-ui-border-base bg-ui-bg-base/80 px-2.5 py-2", children: [
-      /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Empty for now" }),
-      /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base mt-0.5 text-[11px] leading-snug", children: "Reserved for live analytics when data is available." })
-    ] })
-  ] }) });
+  return /* @__PURE__ */ 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__ */ jsx(Text, { className: "text-ui-fg-base text-xs font-semibold", children: title }),
+    /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[11px] leading-snug", children: description })
+  ] });
 }
 function OrdersDashboard() {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [filter, setFilter] = useState("all");
   const [dailyOrders, setDailyOrders] = useState([]);
+  const [previousPeriodDailyOrders, setPreviousPeriodDailyOrders] = useState([]);
   const [overTimePeriod, setOverTimePeriod] = useState("one_week");
   const [overTimeLoading, setOverTimeLoading] = useState(true);
   const [overTimeError, setOverTimeError] = useState(null);
+  const [ordersInsights, setOrdersInsights] = useState(null);
+  const [insightsLoading, setInsightsLoading] = useState(true);
+  const [insightsError, setInsightsError] = useState(null);
   const [todayContext, setTodayContext] = useState([]);
   const [todayContextLoading, setTodayContextLoading] = useState(true);
   const [todayContextError, setTodayContextError] = useState(null);
@@ -435,7 +533,10 @@ function OrdersDashboard() {
       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(() => {
@@ -445,6 +546,31 @@ function OrdersDashboard() {
       cancelled = true;
     };
   }, [overTimePeriod]);
+  const insightsWindowDays = useMemo(() => {
+    if (overTimePeriod === "one_week") return 7;
+    if (overTimePeriod === "one_month") return 30;
+    return 365;
+  }, [overTimePeriod]);
+  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]);
   useEffect(() => {
     let cancelled = false;
     setTodayContextLoading(true);
@@ -543,6 +669,86 @@ function OrdersDashboard() {
   const peakRevenuePoint = dailyOrders.length > 0 ? dailyOrders.reduce(
     (peak, point) => point.total_revenue > peak.total_revenue ? point : peak
   ) : null;
+  const previousPeriodRevenueTotal = useMemo(
+    () => previousPeriodDailyOrders.reduce((s, d) => s + d.total_revenue, 0),
+    [previousPeriodDailyOrders]
+  );
+  const previousPeriodOrdersTotal = 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 = 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 = 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 = useMemo(() => {
+    if (!ordersInsights) return [];
+    return ordersInsights.byWeekday.map((w) => ({
+      label: w.label,
+      orders_count: w.orders_count,
+      revenue: w.revenue
+    }));
+  }, [ordersInsights]);
+  const ordersVsDraftsPie = 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 = 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 = 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",
@@ -583,20 +789,22 @@ function OrdersDashboard() {
   if (error || !data) {
     return /* @__PURE__ */ jsx(Container, { className: "p-6", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger", children: error ?? "Failed to load analytics" }) });
   }
-  return /* @__PURE__ */ jsx(AnalyticsDashboardShell, { children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-ui-border-base/70 bg-ui-bg-subtle/35 p-2 md:p-3", children: [
+  return /* @__PURE__ */ jsx(AnalyticsDashboardShell, { children: /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-2xl border border-ui-border-base/80 bg-ui-bg-base shadow-sm", children: [
     /* @__PURE__ */ jsx(
       AnalyticsDashboardHeader,
       {
         variant: "premium",
+        appearance: "inset",
+        actionsBare: true,
         title: "Orders",
         description: "Revenue, volume, and outcomes in a compact overview sized for a single viewport.",
-        actions: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end gap-2.5", children: [
-          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
             /* @__PURE__ */ jsx(
               Label,
               {
                 htmlFor: "analytics-period",
-                className: "text-ui-fg-muted text-xs font-medium",
+                className: "shrink-0 text-ui-fg-muted text-xs font-medium",
                 children: "Period"
               }
             ),
@@ -611,7 +819,7 @@ function OrdersDashboard() {
               }
             )
           ] }),
-          filter !== "all" && /* @__PURE__ */ jsx("div", { className: "flex items-center self-end pb-1", children: /* @__PURE__ */ jsx(
+          filter !== "all" ? /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -620,280 +828,1109 @@ function OrdersDashboard() {
               "aria-label": "Show all orders (clear filter)",
               children: "Clear period"
             }
-          ) })
+          ) : null
         ] })
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ jsx("div", { className: "px-0.5", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.16em]", children: "Order overview" }) }),
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 lg:grid-cols-4", children: primaryStats.map((stat, index) => /* @__PURE__ */ jsx(
-        AtlasKpiCard,
-        {
-          index: index + 1,
-          label: stat.label,
-          value: stat.value,
-          helper: stat.helper,
-          accent: stat.accent
-        },
-        stat.label
-      )) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-3 grid grid-cols-12 gap-3", children: [
-      /* @__PURE__ */ jsx("div", { className: "col-span-12 xl:col-span-6", children: /* @__PURE__ */ jsx(
-        AnalyticsSection,
-        {
-          variant: "atlas",
-          title: "Revenue & orders",
-          description: "Time series for the selected range. Window totals below match this chart.",
-          actions: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "over-time-period", className: "text-ui-fg-muted text-xs", children: "Range" }),
-            /* @__PURE__ */ 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__ */ jsx("option", { value: p.value, children: p.label }, p.value))
-              }
-            )
-          ] }),
-          children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-3", children: [
-              /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
-                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Window revenue" }),
-                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: formatCompactCurrency(trendRevenueTotal) }),
-                /* @__PURE__ */ jsxs(Text, { className: "text-ui-fg-muted text-[10px]", children: [
-                  "Avg/day ",
-                  formatCompactCurrency(trendAverageRevenue)
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
-                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Window orders" }),
-                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: trendOrdersTotal.toLocaleString() }),
-                /* @__PURE__ */ jsxs(Text, { className: "text-ui-fg-muted text-[10px]", children: [
-                  "Avg/day ",
-                  trendAverageOrders.toFixed(1)
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
-                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Comparison" }),
-                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-sm font-semibold tracking-tight", children: "Last period" }),
-                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] leading-snug", children: "Reserved — API unchanged." })
-              ] }) })
+    /* @__PURE__ */ jsxs("div", { className: "space-y-3 p-3 pt-0 md:p-4 md:pt-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-0.5", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.16em]", children: "Order overview" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx(
+            TrafficSourcesOverviewCard,
+            {
+              traffic: (ordersInsights == null ? void 0 : ordersInsights.traffic) ?? [],
+              loading: insightsLoading,
+              error: insightsError,
+              totalRevenue: trafficTotalRevenue,
+              windowLabel: insightsRangeLabel
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 lg:grid-cols-4", children: primaryStats.map((stat) => /* @__PURE__ */ jsx(
+            AtlasKpiCard,
+            {
+              label: stat.label,
+              value: stat.value,
+              helper: stat.helper,
+              accent: stat.accent
+            },
+            stat.label
+          )) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-3 grid grid-cols-12 gap-2 xl:items-start", children: [
+        /* @__PURE__ */ jsx("div", { className: "col-span-12 xl:col-span-6", children: /* @__PURE__ */ jsx(
+          AnalyticsSection,
+          {
+            variant: "atlas",
+            actionsBare: true,
+            title: "Revenue & orders",
+            description: "Time series for the selected range. Window totals below match this chart.",
+            actions: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Label,
+                {
+                  htmlFor: "over-time-period",
+                  className: "shrink-0 text-ui-fg-muted text-xs font-medium",
+                  children: "Range"
+                }
+              ),
+              /* @__PURE__ */ 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__ */ jsx("option", { value: p.value, children: p.label }, p.value))
+                }
+              )
             ] }),
-            /* @__PURE__ */ jsxs(AnalyticsChartSurface, { variant: "atlas", className: "relative overflow-hidden", children: [
-              /* @__PURE__ */ 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__ */ jsxs("div", { className: "relative space-y-2", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
-                    /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.16em]", children: "Trend overview" }),
-                    /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-sm font-semibold", children: ((_b = OVER_TIME_PERIODS.find((period) => period.value === overTimePeriod)) == null ? void 0 : _b.label) ?? "One week" })
+            children: /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-1.5 sm:grid-cols-3", children: [
+                /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+                  /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Window revenue" }),
+                  /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: formatCompactCurrency(trendRevenueTotal) }),
+                  /* @__PURE__ */ jsxs(Text, { className: "text-ui-fg-muted text-[10px]", children: [
+                    "Avg/day ",
+                    formatCompactCurrency(trendAverageRevenue)
+                  ] })
+                ] }) }),
+                /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+                  /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Window orders" }),
+                  /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: trendOrdersTotal.toLocaleString() }),
+                  /* @__PURE__ */ jsxs(Text, { className: "text-ui-fg-muted text-[10px]", children: [
+                    "Avg/day ",
+                    trendAverageOrders.toFixed(1)
+                  ] })
+                ] }) }),
+                /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+                  /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "vs previous period" }),
+                  /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: revenueVsPreviousPercent === null ? "—" : `${revenueVsPreviousPercent >= 0 ? "+" : ""}${revenueVsPreviousPercent.toFixed(1)}% rev` }),
+                  /* @__PURE__ */ jsxs(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__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-1.5 lg:grid-cols-3", children: [
+                  /* @__PURE__ */ jsxs(AnalyticsChartSurface, { variant: "atlas", children: [
+                    /* @__PURE__ */ jsx(Text, { className: "mb-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Revenue over time" }),
+                    /* @__PURE__ */ jsx("div", { className: "h-[118px] w-full", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+                      LineChart,
+                      {
+                        data: trendRowsDetailed,
+                        margin: { top: 4, right: 4, left: 0, bottom: 0 },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            CartesianGrid,
+                            {
+                              strokeDasharray: "3 3",
+                              vertical: false,
+                              stroke: "rgba(148,163,184,0.12)"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(XAxis, { dataKey: "date", hide: true }),
+                          /* @__PURE__ */ jsx(
+                            YAxis,
+                            {
+                              width: 36,
+                              tick: CHART_AXIS_TICK_SM,
+                              tickFormatter: (v) => formatCompactCurrency(Number(v))
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Tooltip,
+                            {
+                              content: ({ active, payload, label }) => {
+                                var _a2, _b2, _c2, _d2;
+                                return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ 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__ */ jsxs("div", { children: [
+                                        "This:",
+                                        " ",
+                                        /* @__PURE__ */ jsx("strong", { children: formatCompactCurrency(
+                                          Number(
+                                            (_c2 = payload.find((p) => p.dataKey === "total_revenue")) == null ? void 0 : _c2.value
+                                          ) || 0
+                                        ) })
+                                      ] }),
+                                      /* @__PURE__ */ jsxs("div", { children: [
+                                        "Previous:",
+                                        " ",
+                                        /* @__PURE__ */ jsx("strong", { children: formatCompactCurrency(
+                                          Number(
+                                            (_d2 = payload.find((p) => p.dataKey === "prev_revenue")) == null ? void 0 : _d2.value
+                                          ) || 0
+                                        ) })
+                                      ] })
+                                    ]
+                                  }
+                                ) : null;
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Line,
+                            {
+                              type: "natural",
+                              dataKey: "total_revenue",
+                              name: "This period",
+                              stroke: "#D946EF",
+                              strokeWidth: 2,
+                              dot: false
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Line,
+                            {
+                              type: "natural",
+                              dataKey: "prev_revenue",
+                              name: "Previous",
+                              stroke: "#94a3b8",
+                              strokeWidth: 1.5,
+                              strokeDasharray: "5 4",
+                              dot: false
+                            }
+                          )
+                        ]
+                      }
+                    ) }) })
                   ] }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-end gap-2 text-[10px] text-ui-fg-muted", children: [
-                    /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
-                      /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-sky-400" }),
-                      "Orders"
-                    ] }),
-                    /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
-                      /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-fuchsia-400" }),
-                      "Revenue"
-                    ] })
+                  /* @__PURE__ */ jsxs(AnalyticsChartSurface, { variant: "atlas", children: [
+                    /* @__PURE__ */ jsx(Text, { className: "mb-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Orders count" }),
+                    /* @__PURE__ */ jsx("div", { className: "h-[118px] w-full", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+                      LineChart,
+                      {
+                        data: trendRowsDetailed,
+                        margin: { top: 4, right: 4, left: 0, bottom: 0 },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            CartesianGrid,
+                            {
+                              strokeDasharray: "3 3",
+                              vertical: false,
+                              stroke: "rgba(148,163,184,0.12)"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(XAxis, { dataKey: "date", hide: true }),
+                          /* @__PURE__ */ jsx(
+                            YAxis,
+                            {
+                              width: 28,
+                              tick: CHART_AXIS_TICK_SM,
+                              allowDecimals: false
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Tooltip,
+                            {
+                              content: ({ active, payload, label }) => {
+                                var _a2, _b2;
+                                return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxs(TooltipCard, { title: String(label), children: [
+                                  /* @__PURE__ */ jsxs("div", { children: [
+                                    "This:",
+                                    " ",
+                                    /* @__PURE__ */ jsx("strong", { children: Math.floor(
+                                      Number(
+                                        (_a2 = payload.find((p) => p.dataKey === "orders_count")) == null ? void 0 : _a2.value
+                                      ) || 0
+                                    ).toLocaleString() })
+                                  ] }),
+                                  /* @__PURE__ */ jsxs("div", { children: [
+                                    "Previous:",
+                                    " ",
+                                    /* @__PURE__ */ jsx("strong", { children: Math.floor(
+                                      Number(
+                                        (_b2 = payload.find((p) => p.dataKey === "prev_orders")) == null ? void 0 : _b2.value
+                                      ) || 0
+                                    ).toLocaleString() })
+                                  ] })
+                                ] }) : null;
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Line,
+                            {
+                              type: "natural",
+                              dataKey: "orders_count",
+                              name: "This period",
+                              stroke: "#38BDF8",
+                              strokeWidth: 2,
+                              dot: false
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Line,
+                            {
+                              type: "natural",
+                              dataKey: "prev_orders",
+                              name: "Previous",
+                              stroke: "#94a3b8",
+                              strokeWidth: 1.5,
+                              strokeDasharray: "5 4",
+                              dot: false
+                            }
+                          )
+                        ]
+                      }
+                    ) }) })
+                  ] }),
+                  /* @__PURE__ */ jsxs(AnalyticsChartSurface, { variant: "atlas", children: [
+                    /* @__PURE__ */ jsx(Text, { className: "mb-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "AOV (non-cancelled)" }),
+                    /* @__PURE__ */ jsx("div", { className: "h-[118px] w-full", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+                      LineChart,
+                      {
+                        data: trendRowsDetailed,
+                        margin: { top: 4, right: 4, left: 0, bottom: 0 },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            CartesianGrid,
+                            {
+                              strokeDasharray: "3 3",
+                              vertical: false,
+                              stroke: "rgba(148,163,184,0.12)"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(XAxis, { dataKey: "date", hide: true }),
+                          /* @__PURE__ */ jsx(
+                            YAxis,
+                            {
+                              width: 36,
+                              tick: CHART_AXIS_TICK_SM,
+                              tickFormatter: (v) => formatCompactCurrency(Number(v))
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Tooltip,
+                            {
+                              content: ({ active, payload, label }) => {
+                                var _a2, _b2;
+                                return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxs(TooltipCard, { title: String(label), children: [
+                                  /* @__PURE__ */ jsxs("div", { children: [
+                                    "This:",
+                                    " ",
+                                    /* @__PURE__ */ jsx("strong", { children: formatCurrency$1(
+                                      Number(
+                                        (_a2 = payload.find((p) => p.dataKey === "aov")) == null ? void 0 : _a2.value
+                                      ) || 0
+                                    ) })
+                                  ] }),
+                                  /* @__PURE__ */ jsxs("div", { children: [
+                                    "Previous:",
+                                    " ",
+                                    /* @__PURE__ */ jsx("strong", { children: formatCurrency$1(
+                                      Number(
+                                        (_b2 = payload.find((p) => p.dataKey === "prev_aov")) == null ? void 0 : _b2.value
+                                      ) || 0
+                                    ) })
+                                  ] })
+                                ] }) : null;
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Line,
+                            {
+                              type: "natural",
+                              dataKey: "aov",
+                              name: "This period",
+                              stroke: "#D97706",
+                              strokeWidth: 2,
+                              dot: false
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Line,
+                            {
+                              type: "natural",
+                              dataKey: "prev_aov",
+                              name: "Previous",
+                              stroke: "#94a3b8",
+                              strokeWidth: 1.5,
+                              strokeDasharray: "5 4",
+                              dot: false
+                            }
+                          )
+                        ]
+                      }
+                    ) }) })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx("div", { className: "h-[min(220px,32vh)] min-h-[180px] sm:h-[min(240px,34vh)]", children: overTimeLoading ? /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "flex h-full items-center justify-center",
-                    role: "status",
-                    "aria-label": "Loading orders over time",
-                    children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "Loading chart…" })
-                  }
-                ) : overTimeError ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger text-xs", children: overTimeError }) }) : /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
-                  ComposedChart,
-                  {
-                    data: dailyOrders,
-                    margin: { top: 4, right: 6, left: -6, bottom: 0 },
-                    children: [
-                      /* @__PURE__ */ jsxs("defs", { children: [
-                        /* @__PURE__ */ jsxs("linearGradient", { id: "ordersGradient", x1: "0", y1: "0", x2: "1", y2: "0", children: [
-                          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#67E8F9" }),
-                          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#3B82F6" })
-                        ] }),
-                        /* @__PURE__ */ jsxs("linearGradient", { id: "revenueGradient", x1: "0", y1: "0", x2: "1", y2: "0", children: [
-                          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#F472B6" }),
-                          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#C084FC" })
-                        ] }),
-                        /* @__PURE__ */ jsxs("linearGradient", { id: "ordersAreaFill", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-                          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#38BDF8", stopOpacity: 0.22 }),
-                          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#38BDF8", stopOpacity: 0 })
-                        ] }),
-                        /* @__PURE__ */ jsxs("linearGradient", { id: "revenueAreaFill", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-                          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#E879F9", stopOpacity: 0.2 }),
-                          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#E879F9", stopOpacity: 0 })
-                        ] })
+                /* @__PURE__ */ jsxs(AnalyticsChartSurface, { variant: "atlas", className: "mt-1.5", children: [
+                  /* @__PURE__ */ jsx(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__ */ jsx("div", { className: "h-[min(168px,26vh)] min-h-[140px] w-full", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+                    ComposedChart,
+                    {
+                      data: dailyOrders,
+                      margin: { top: 4, right: 8, left: -4, bottom: 0 },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          CartesianGrid,
+                          {
+                            stroke: "rgba(148,163,184,0.14)",
+                            strokeDasharray: "3 3",
+                            vertical: false
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          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__ */ jsx(
+                          YAxis,
+                          {
+                            tick: CHART_AXIS_TICK,
+                            tickFormatter: (v) => formatCompactCurrency(Number(v))
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Tooltip,
+                          {
+                            content: ({ active, payload, label }) => active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsx(TooltipCard, { title: String(label), children: payload.map((p) => /* @__PURE__ */ jsxs("div", { children: [
+                              p.name,
+                              ":",
+                              " ",
+                              /* @__PURE__ */ jsx("strong", { children: formatCurrency$1(Number(p.value) || 0) })
+                            ] }, String(p.name))) }) : null
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(Legend, { wrapperStyle: { fontSize: 10 }, iconType: "circle" }),
+                        /* @__PURE__ */ jsx(
+                          Area,
+                          {
+                            type: "natural",
+                            dataKey: "revenue_delivered",
+                            name: "Delivered",
+                            stackId: "r",
+                            fill: "#10B981",
+                            stroke: "#059669",
+                            fillOpacity: 0.85
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Area,
+                          {
+                            type: "natural",
+                            dataKey: "revenue_open",
+                            name: "Open / pending",
+                            stackId: "r",
+                            fill: "#3B82F6",
+                            stroke: "#2563eb",
+                            fillOpacity: 0.85
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Area,
+                          {
+                            type: "natural",
+                            dataKey: "revenue_cancelled",
+                            name: "Cancelled",
+                            stackId: "r",
+                            fill: "#F87171",
+                            stroke: "#EF4444",
+                            fillOpacity: 0.75
+                          }
+                        )
+                      ]
+                    }
+                  ) }) })
+                ] })
+              ] }) : null,
+              /* @__PURE__ */ jsxs(AnalyticsChartSurface, { variant: "atlas", className: "relative overflow-hidden", children: [
+                /* @__PURE__ */ 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__ */ jsxs("div", { className: "relative space-y-1", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-1.5", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
+                      /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.16em]", children: "Trend overview" }),
+                      /* @__PURE__ */ jsx(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__ */ jsxs("div", { className: "flex flex-wrap justify-end gap-2 text-[10px] text-ui-fg-muted", children: [
+                      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+                        /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-sky-400" }),
+                        "Orders"
                       ] }),
-                      /* @__PURE__ */ jsx(
-                        CartesianGrid,
-                        {
-                          stroke: "rgba(148,163,184,0.14)",
-                          strokeDasharray: "3 3",
-                          vertical: false
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        XAxis,
-                        {
-                          dataKey: "date",
-                          tick: { fontSize: 10, fill: "var(--medusa-color-ui-fg-muted)" },
-                          tickLine: false,
-                          axisLine: false,
-                          tickFormatter: (value, index) => {
-                            const row = dailyOrders[index];
-                            return (row == null ? void 0 : row.label) ?? formatChartLabel(value);
+                      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+                        /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-fuchsia-400" }),
+                        "Revenue"
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "h-[min(200px,30vh)] min-h-[160px] sm:h-[min(216px,32vh)]", children: overTimeLoading ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "flex h-full items-center justify-center",
+                      role: "status",
+                      "aria-label": "Loading orders over time",
+                      children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "Loading chart…" })
+                    }
+                  ) : overTimeError ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger text-xs", children: overTimeError }) }) : /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+                    ComposedChart,
+                    {
+                      data: dailyOrders,
+                      margin: { top: 4, right: 6, left: -6, bottom: 0 },
+                      children: [
+                        /* @__PURE__ */ jsxs("defs", { children: [
+                          /* @__PURE__ */ jsxs("linearGradient", { id: "ordersGradient", x1: "0", y1: "0", x2: "1", y2: "0", children: [
+                            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#67E8F9" }),
+                            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#3B82F6" })
+                          ] }),
+                          /* @__PURE__ */ jsxs("linearGradient", { id: "revenueGradient", x1: "0", y1: "0", x2: "1", y2: "0", children: [
+                            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#F472B6" }),
+                            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#C084FC" })
+                          ] }),
+                          /* @__PURE__ */ jsxs("linearGradient", { id: "ordersAreaFill", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#38BDF8", stopOpacity: 0.22 }),
+                            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#38BDF8", stopOpacity: 0 })
+                          ] }),
+                          /* @__PURE__ */ jsxs("linearGradient", { id: "revenueAreaFill", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#E879F9", stopOpacity: 0.2 }),
+                            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#E879F9", stopOpacity: 0 })
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsx(
+                          CartesianGrid,
+                          {
+                            stroke: "rgba(148,163,184,0.14)",
+                            strokeDasharray: "3 3",
+                            vertical: false
                           }
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        YAxis,
-                        {
-                          yAxisId: "orders",
-                          width: 32,
-                          tick: { fontSize: 10, fill: "var(--medusa-color-ui-fg-muted)" },
-                          tickLine: false,
-                          axisLine: false,
-                          allowDecimals: false,
-                          tickFormatter: (value) => Math.floor(Number(value) || 0).toLocaleString()
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        YAxis,
-                        {
-                          yAxisId: "revenue",
-                          orientation: "right",
-                          width: 40,
-                          tick: { fontSize: 10, fill: "var(--medusa-color-ui-fg-muted)" },
-                          tickLine: false,
-                          axisLine: false,
-                          tickFormatter: (value) => formatCompactCurrency(Number(value) || 0)
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Tooltip,
-                        {
-                          content: /* @__PURE__ */ jsx(OrdersTrendTooltip, {}),
-                          cursor: {
-                            stroke: "rgba(248, 250, 252, 0.35)",
-                            strokeWidth: 1
+                        ),
+                        /* @__PURE__ */ jsx(
+                          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__ */ jsx(
-                        Legend,
-                        {
-                          wrapperStyle: { fontSize: 10, paddingTop: 2 },
-                          iconType: "circle",
-                          iconSize: 8
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Area,
-                        {
-                          yAxisId: "orders",
-                          type: "natural",
-                          dataKey: "orders_count",
-                          stroke: "none",
-                          fill: "url(#ordersAreaFill)",
-                          isAnimationActive: false
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Area,
-                        {
-                          yAxisId: "revenue",
-                          type: "natural",
-                          dataKey: "total_revenue",
-                          stroke: "none",
-                          fill: "url(#revenueAreaFill)",
-                          isAnimationActive: false
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        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__ */ jsx(
-                        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__ */ jsx(
+                          YAxis,
+                          {
+                            yAxisId: "orders",
+                            width: 32,
+                            tick: CHART_AXIS_TICK,
+                            tickLine: false,
+                            axisLine: false,
+                            allowDecimals: false,
+                            tickFormatter: (value) => Math.floor(Number(value) || 0).toLocaleString()
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          YAxis,
+                          {
+                            yAxisId: "revenue",
+                            orientation: "right",
+                            width: 40,
+                            tick: CHART_AXIS_TICK,
+                            tickLine: false,
+                            axisLine: false,
+                            tickFormatter: (value) => formatCompactCurrency(Number(value) || 0)
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Tooltip,
+                          {
+                            content: /* @__PURE__ */ jsx(OrdersTrendTooltip, {}),
+                            cursor: {
+                              stroke: "rgba(248, 250, 252, 0.35)",
+                              strokeWidth: 1
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Area,
+                          {
+                            yAxisId: "orders",
+                            type: "natural",
+                            dataKey: "orders_count",
+                            stroke: "none",
+                            fill: "url(#ordersAreaFill)",
+                            isAnimationActive: false,
+                            legendType: "none"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Area,
+                          {
+                            yAxisId: "revenue",
+                            type: "natural",
+                            dataKey: "total_revenue",
+                            stroke: "none",
+                            fill: "url(#revenueAreaFill)",
+                            isAnimationActive: false,
+                            legendType: "none"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          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__ */ jsx(
+                          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__ */ jsx("div", { className: "col-span-12 flex flex-col gap-3 xl:col-span-3", children: /* @__PURE__ */ jsxs(
-        AnalyticsSection,
-        {
-          variant: "atlas",
-          title: "Pulse & range",
-          description: "Window totals and an orders time series for the selected range.",
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: quickPulseMetrics.map((metric) => /* @__PURE__ */ jsxs(
-              "div",
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "col-span-12 flex flex-col gap-2 xl:col-span-6", children: [
+          /* @__PURE__ */ jsxs(
+            AnalyticsSection,
+            {
+              variant: "atlas",
+              title: "Pulse & range",
+              description: "Window totals and an orders time series for the selected range.",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: quickPulseMetrics.map((metric) => /* @__PURE__ */ 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__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: metric.label }),
+                      /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base mt-0.5 text-sm font-semibold tracking-tight", children: metric.value }),
+                      /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted mt-0.5 text-[9px] leading-snug", children: metric.helper })
+                    ]
+                  },
+                  metric.label
+                )) }),
+                !overTimeLoading && !overTimeError && dailyOrders.length > 0 ? /* @__PURE__ */ jsxs(AnalyticsChartSurface, { variant: "atlas", className: "mt-1.5", children: [
+                  /* @__PURE__ */ jsx(Text, { className: "mb-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Orders (time series)" }),
+                  /* @__PURE__ */ jsx("div", { className: "h-[76px] w-full", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+                    LineChart,
+                    {
+                      data: dailyOrders,
+                      margin: { top: 2, right: 4, left: -18, bottom: 2 },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          CartesianGrid,
+                          {
+                            strokeDasharray: "3 3",
+                            vertical: false,
+                            stroke: "rgba(148,163,184,0.12)"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(XAxis, { dataKey: "date", hide: true }),
+                        /* @__PURE__ */ jsx(YAxis, { hide: true, domain: ["auto", "auto"] }),
+                        /* @__PURE__ */ jsx(
+                          Tooltip,
+                          {
+                            content: /* @__PURE__ */ jsx(OrdersSparklineTooltip, {}),
+                            cursor: { stroke: "rgba(148,163,184,0.35)", strokeWidth: 1 }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Line,
+                          {
+                            type: "natural",
+                            dataKey: "orders_count",
+                            stroke: "#3b82f6",
+                            strokeWidth: 2,
+                            dot: { r: 2, fill: "#3b82f6" },
+                            activeDot: { r: 3 }
+                          }
+                        )
+                      ]
+                    }
+                  ) }) })
+                ] }) : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ 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__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-[120px] items-center justify-center py-3", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) }) : overTimeError ? /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-[120px] items-center justify-center px-2 py-3", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger text-center text-xs", children: overTimeError }) }) }) : funnelTimeSeriesRows.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                /* @__PURE__ */ jsxs(AnalyticsChartSurface, { variant: "atlas", children: [
+                  /* @__PURE__ */ jsx(Text, { className: "mb-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Stage counts (time series)" }),
+                  /* @__PURE__ */ jsx("div", { className: "h-[min(200px,30vh)] min-h-[168px] w-full", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+                    LineChart,
+                    {
+                      data: funnelTimeSeriesRows,
+                      margin: { top: 4, right: 8, left: 0, bottom: 4 },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          CartesianGrid,
+                          {
+                            strokeDasharray: "3 3",
+                            stroke: "rgba(148,163,184,0.2)"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          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__ */ jsx(
+                          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__ */ jsx(
+                          Tooltip,
+                          {
+                            content: ({ active, payload, label }) => {
+                              var _a2;
+                              return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ 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__ */ jsxs("div", { children: [
+                                    String(p.name),
+                                    ":",
+                                    " ",
+                                    /* @__PURE__ */ jsx("strong", { children: Math.floor(Number(p.value) || 0).toLocaleString() })
+                                  ] }, String(p.dataKey)))
+                                }
+                              ) : null;
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Legend,
+                          {
+                            wrapperStyle: { fontSize: 9, color: "#e5e7eb", paddingTop: 4 },
+                            iconType: "circle",
+                            iconSize: 6
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Line,
+                          {
+                            type: "natural",
+                            dataKey: "placed",
+                            name: "Placed",
+                            stroke: "#6366F1",
+                            strokeWidth: 2,
+                            dot: false
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Line,
+                          {
+                            type: "natural",
+                            dataKey: "not_cancelled",
+                            name: "Not cancelled",
+                            stroke: "#22d3ee",
+                            strokeWidth: 2,
+                            dot: false
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Line,
+                          {
+                            type: "natural",
+                            dataKey: "shipped",
+                            name: "Shipped",
+                            stroke: "#F59E0B",
+                            strokeWidth: 2,
+                            dot: false
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Line,
+                          {
+                            type: "natural",
+                            dataKey: "delivered",
+                            name: "Delivered",
+                            stroke: "#10B981",
+                            strokeWidth: 2,
+                            dot: false
+                          }
+                        )
+                      ]
+                    }
+                  ) }) })
+                ] }),
+                /* @__PURE__ */ jsxs(AnalyticsChartSurface, { variant: "atlas", children: [
+                  /* @__PURE__ */ jsx(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__ */ jsx("div", { className: "h-[min(168px,26vh)] min-h-[140px] w-full", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+                    LineChart,
+                    {
+                      data: funnelTimeSeriesRows,
+                      margin: { top: 4, right: 8, left: 0, bottom: 4 },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          CartesianGrid,
+                          {
+                            strokeDasharray: "3 3",
+                            stroke: "rgba(148,163,184,0.2)"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          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__ */ jsx(
+                          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__ */ jsx(
+                          Tooltip,
+                          {
+                            content: ({ active, payload, label }) => {
+                              var _a2;
+                              return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ 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__ */ jsxs("div", { children: [
+                                    String(p.name),
+                                    ":",
+                                    " ",
+                                    /* @__PURE__ */ jsx("strong", { children: formatPercent(Number(p.value) || 0) })
+                                  ] }, String(p.dataKey)))
+                                }
+                              ) : null;
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Legend,
+                          {
+                            wrapperStyle: { fontSize: 9, color: "#e5e7eb", paddingTop: 4 },
+                            iconType: "circle",
+                            iconSize: 6
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Line,
+                          {
+                            type: "natural",
+                            dataKey: "pct_not_cancelled",
+                            name: "Not cancelled / placed",
+                            stroke: "#6366F1",
+                            strokeWidth: 2,
+                            dot: false
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Line,
+                          {
+                            type: "natural",
+                            dataKey: "pct_shipped_of_active",
+                            name: "Shipped / not cancelled",
+                            stroke: "#F59E0B",
+                            strokeWidth: 2,
+                            dot: false
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Line,
+                          {
+                            type: "natural",
+                            dataKey: "pct_delivered_of_shipped",
+                            name: "Delivered / shipped",
+                            stroke: "#10B981",
+                            strokeWidth: 2,
+                            dot: false
+                          }
+                        )
+                      ]
+                    }
+                  ) }) })
+                ] })
+              ] }) : /* @__PURE__ */ jsx(
+                EmptyAnalyticsPanel,
+                {
+                  title: "No funnel data",
+                  description: "No orders in this range to chart."
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AnalyticsSection,
+            {
+              variant: "atlas",
+              title: "Order revenue (attribution)",
+              description: "All revenue is from captured Medusa orders until storefront channel data exists.",
+              children: insightsLoading ? /* @__PURE__ */ jsx("div", { className: "flex min-h-[100px] items-center justify-center py-3", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) : insightsError ? /* @__PURE__ */ jsx("div", { className: "flex min-h-[100px] items-center justify-center px-2 py-3", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger text-center text-xs", children: insightsError }) }) : ordersInsights && ordersInsights.traffic.length > 0 ? trafficTotalRevenue <= 0 ? /* @__PURE__ */ jsx(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__ */ jsx(TrafficRevenueDonut, { traffic: ordersInsights.traffic }) : /* @__PURE__ */ jsx(
+                EmptyAnalyticsPanel,
+                {
+                  title: "No order revenue",
+                  description: "No orders in this window."
+                }
+              )
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-0.5", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.16em]", children: "Operational signals" }) }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 lg:grid-cols-3 xl:grid-cols-6", children: secondaryStats.map((stat) => /* @__PURE__ */ jsx(
+          AnalyticsStatCard,
+          {
+            label: stat.label,
+            value: stat.value,
+            helper: stat.helper,
+            variant: "compact"
+          },
+          stat.label
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-3 grid grid-cols-1 items-start gap-2 xl:grid-cols-12", children: [
+        /* @__PURE__ */ jsx(
+          AnalyticsSection,
+          {
+            variant: "atlas",
+            className: "xl:col-span-7",
+            title: "Order outcomes",
+            description: "Delivered, cancelled, exchanges, and returns per bucket — same window as Revenue & orders.",
+            children: /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsx("div", { className: "h-[176px] sm:h-[196px]", children: overTimeLoading ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) : overTimeError ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger text-xs", children: overTimeError }) }) : !outcomesTimeSeriesHasPoints ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "No outcome events in this range." }) }) : /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+              LineChart,
               {
-                className: `rounded-lg border border-ui-border-base bg-ui-bg-base px-2 py-2 shadow-sm ${metric.accentClassName}`.trim(),
+                data: dailyOrders,
+                margin: { top: 4, right: 8, left: 0, bottom: 0 },
                 children: [
-                  /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: metric.label }),
-                  /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base mt-0.5 text-sm font-semibold tracking-tight", children: metric.value }),
-                  /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted mt-0.5 text-[9px] leading-snug", children: metric.helper })
+                  /* @__PURE__ */ jsx(
+                    CartesianGrid,
+                    {
+                      stroke: "rgba(148,163,184,0.14)",
+                      strokeDasharray: "3 3",
+                      vertical: false
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    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__ */ jsx(
+                    YAxis,
+                    {
+                      width: 28,
+                      tick: CHART_AXIS_TICK,
+                      tickLine: false,
+                      axisLine: false,
+                      allowDecimals: false,
+                      tickFormatter: (value) => Math.floor(Number(value) || 0).toLocaleString()
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Tooltip,
+                    {
+                      content: /* @__PURE__ */ jsx(OutcomesTrendTooltip, {}),
+                      cursor: { stroke: "rgba(148,163,184,0.35)", strokeWidth: 1 }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Legend,
+                    {
+                      wrapperStyle: { fontSize: 9, paddingTop: 0 },
+                      iconType: "circle",
+                      iconSize: 6
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Line,
+                    {
+                      type: "natural",
+                      dataKey: "delivered_count",
+                      name: "Delivered",
+                      stroke: STATUS_BAR_COLORS.delivered,
+                      strokeWidth: 2,
+                      dot: false
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Line,
+                    {
+                      type: "natural",
+                      dataKey: "cancelled_count",
+                      name: "Cancelled",
+                      stroke: STATUS_BAR_COLORS.cancelled,
+                      strokeWidth: 2,
+                      dot: false
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Line,
+                    {
+                      type: "natural",
+                      dataKey: "exchange_count",
+                      name: "Exchanges",
+                      stroke: STATUS_BAR_COLORS.exchange,
+                      strokeWidth: 2,
+                      dot: false
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Line,
+                    {
+                      type: "natural",
+                      dataKey: "return_count",
+                      name: "Returns",
+                      stroke: STATUS_BAR_COLORS.return,
+                      strokeWidth: 2,
+                      dot: false
+                    }
+                  )
                 ]
-              },
-              metric.label
-            )) }),
-            !overTimeLoading && !overTimeError && dailyOrders.length > 0 ? /* @__PURE__ */ jsxs(AnalyticsChartSurface, { variant: "atlas", className: "mt-2", children: [
-              /* @__PURE__ */ jsx(Text, { className: "mb-1 text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Orders (time series)" }),
-              /* @__PURE__ */ jsx("div", { className: "h-[88px] w-full", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
-                LineChart,
+              }
+            ) }) }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AnalyticsSection,
+          {
+            variant: "atlas",
+            className: "xl:col-span-5",
+            title: "Recent orders (7 days)",
+            description: "Daily order count vs 7-day average — time series.",
+            children: /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-1.5", children: [
+                /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-ui-border-base bg-ui-bg-subtle/50 px-2 py-2", children: [
+                  /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Today" }),
+                  /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-base font-semibold tracking-tight", children: (todayPoint == null ? void 0 : todayPoint.orders_count.toLocaleString()) ?? "0" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-ui-border-base bg-ui-bg-subtle/50 px-2 py-2", children: [
+                  /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "7-day avg" }),
+                  /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-base font-semibold tracking-tight", children: todayOrdersAverage.toFixed(1) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "h-[140px] sm:h-[156px]", children: todayContextLoading ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) : todayContextError ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger text-xs", children: todayContextError }) }) : todayChartData.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "No recent activity." }) }) : /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+                ComposedChart,
                 {
-                  data: dailyOrders,
-                  margin: { top: 2, right: 4, left: -18, bottom: 2 },
+                  data: todayChartData,
+                  margin: { top: 4, right: 4, left: -4, bottom: 0 },
                   children: [
+                    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "todayOrdersFill", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                      /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#3b82f6", stopOpacity: 0.2 }),
+                      /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#3b82f6", stopOpacity: 0 })
+                    ] }) }),
+                    /* @__PURE__ */ jsx(
+                      CartesianGrid,
+                      {
+                        stroke: "rgba(148,163,184,0.14)",
+                        strokeDasharray: "3 3",
+                        vertical: false
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      XAxis,
+                      {
+                        dataKey: "date",
+                        tick: CHART_AXIS_TICK,
+                        tickLine: false,
+                        axisLine: false,
+                        tickFormatter: formatChartLabel
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      YAxis,
+                      {
+                        width: 28,
+                        tick: CHART_AXIS_TICK,
+                        tickLine: false,
+                        axisLine: false,
+                        allowDecimals: false,
+                        tickFormatter: (value) => Math.floor(Number(value) || 0).toLocaleString()
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(OrdersTodayTooltip, {}), cursor: { stroke: "rgba(148,163,184,0.35)", strokeWidth: 1 } }),
                     /* @__PURE__ */ jsx(
-                      CartesianGrid,
+                      ReferenceLine,
                       {
-                        strokeDasharray: "3 3",
-                        vertical: false,
-                        stroke: "rgba(148,163,184,0.12)"
+                        y: todayOrdersAverage,
+                        stroke: "rgba(148,163,184,0.65)",
+                        strokeDasharray: "4 4"
                       }
                     ),
-                    /* @__PURE__ */ jsx(XAxis, { dataKey: "date", hide: true }),
-                    /* @__PURE__ */ jsx(YAxis, { hide: true, domain: ["auto", "auto"] }),
                     /* @__PURE__ */ jsx(
-                      Tooltip,
+                      Area,
                       {
-                        content: /* @__PURE__ */ jsx(OrdersSparklineTooltip, {}),
-                        cursor: { stroke: "rgba(148,163,184,0.35)", strokeWidth: 1 }
+                        type: "natural",
+                        dataKey: "orders_count",
+                        stroke: "none",
+                        fill: "url(#todayOrdersFill)",
+                        isAnimationActive: false
                       }
                     ),
                     /* @__PURE__ */ jsx(
@@ -901,31 +1938,111 @@ function OrdersDashboard() {
                       {
                         type: "natural",
                         dataKey: "orders_count",
+                        name: "Orders",
                         stroke: "#3b82f6",
                         strokeWidth: 2,
-                        dot: { r: 2, fill: "#3b82f6" },
-                        activeDot: { r: 3 }
+                        dot: (props) => {
+                          const { cx, cy, payload } = props;
+                          if (payload && typeof payload === "object" && "isToday" in payload && payload.isToday) {
+                            return /* @__PURE__ */ jsx(
+                              "circle",
+                              {
+                                cx,
+                                cy,
+                                r: 4,
+                                fill: STATUS_BAR_COLORS.today,
+                                stroke: "var(--medusa-color-ui-bg-base)",
+                                strokeWidth: 1
+                              }
+                            );
+                          }
+                          return /* @__PURE__ */ jsx("circle", { cx, cy, r: 0, fill: "transparent" });
+                        }
                       }
                     )
                   ]
                 }
-              ) }) })
-            ] }) : null
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsxs("div", { className: "col-span-12 flex flex-col gap-3 xl:col-span-3", children: [
+              ) }) }),
+              /* @__PURE__ */ jsxs(Container, { className: "rounded-lg border border-ui-border-base bg-ui-bg-subtle/40 px-2 py-1.5 shadow-sm", children: [
+                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Note" }),
+                /* @__PURE__ */ jsx(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__ */ jsxs("div", { className: "mt-3 grid grid-cols-1 items-start gap-2 md:grid-cols-3", children: [
         /* @__PURE__ */ jsx(
           AnalyticsSection,
           {
             variant: "atlas",
-            title: "Conversion funnel",
-            description: "Storefront funnel — connect events to enable this chart.",
-            children: /* @__PURE__ */ jsx(
+            title: "Sales by weekday",
+            description: `Order revenue by UTC weekday — last ${insightsWindowDays} days.`,
+            children: insightsLoading ? /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-[100px] items-center justify-center py-4", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) }) : insightsError ? /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-[100px] items-center justify-center px-2 py-4", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger text-center text-xs", children: insightsError }) }) }) : weekdayChartRows.length > 0 ? /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsx("div", { className: "h-[min(176px,28vh)] min-h-[148px] w-full", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+              BarChart,
+              {
+                data: weekdayChartRows,
+                margin: { top: 2, right: 4, left: -8, bottom: 2 },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    CartesianGrid,
+                    {
+                      strokeDasharray: "3 3",
+                      vertical: false,
+                      stroke: "rgba(148,163,184,0.12)"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    XAxis,
+                    {
+                      dataKey: "label",
+                      tick: CHART_AXIS_TICK
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    YAxis,
+                    {
+                      width: 40,
+                      tick: CHART_AXIS_TICK_SM,
+                      tickFormatter: (v) => formatCompactCurrency(Number(v))
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Tooltip,
+                    {
+                      content: ({ active, payload, label }) => {
+                        var _a2, _b2;
+                        return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxs(TooltipCard, { title: String(label), children: [
+                          /* @__PURE__ */ jsxs("div", { children: [
+                            "Revenue:",
+                            " ",
+                            /* @__PURE__ */ jsx("strong", { children: formatCurrency$1(
+                              Number(
+                                (_a2 = payload.find((p) => p.dataKey === "revenue")) == null ? void 0 : _a2.value
+                              ) || 0
+                            ) })
+                          ] }),
+                          /* @__PURE__ */ jsxs("div", { children: [
+                            "Orders:",
+                            " ",
+                            /* @__PURE__ */ jsx("strong", { children: Math.floor(
+                              Number(
+                                (_b2 = payload.find((p) => p.dataKey === "orders_count")) == null ? void 0 : _b2.value
+                              ) || 0
+                            ).toLocaleString() })
+                          ] })
+                        ] }) : null;
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Bar, { dataKey: "revenue", name: "Revenue", fill: "#D946EF", radius: [4, 4, 0, 0] })
+                ]
+              }
+            ) }) }) }) : /* @__PURE__ */ jsx(
               EmptyAnalyticsPanel,
               {
-                title: "Visitors to purchase funnel",
-                description: "Visitor, product view, cart, checkout, and purchase steps require storefront analytics."
+                title: "No weekday data",
+                description: "No orders in this window."
               }
             )
           }
@@ -934,303 +2051,142 @@ function OrdersDashboard() {
           AnalyticsSection,
           {
             variant: "atlas",
-            title: "Traffic sources",
-            description: "Attribution mix when marketing data is available.",
-            children: /* @__PURE__ */ jsx(
-              EmptyAnalyticsPanel,
-              {
-                title: "Source mix",
-                description: "Channel breakdown (direct, search, social, email) will appear here once connected."
-              }
-            )
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-1.5", children: [
-      /* @__PURE__ */ jsx("div", { className: "px-0.5", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.16em]", children: "Operational signals" }) }),
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 lg:grid-cols-3 xl:grid-cols-6", children: secondaryStats.map((stat) => /* @__PURE__ */ jsx(
-        AnalyticsStatCard,
-        {
-          label: stat.label,
-          value: stat.value,
-          helper: stat.helper,
-          variant: "compact"
-        },
-        stat.label
-      )) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-3 grid grid-cols-1 items-start gap-3 xl:grid-cols-12", children: [
-      /* @__PURE__ */ jsx(
-        AnalyticsSection,
-        {
-          variant: "atlas",
-          className: "xl:col-span-7",
-          title: "Order outcomes",
-          description: "Delivered, cancelled, exchanges, and returns per bucket — same window as Revenue & orders.",
-          children: /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsx("div", { className: "h-[200px] sm:h-[220px]", children: overTimeLoading ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) : overTimeError ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger text-xs", children: overTimeError }) }) : !outcomesTimeSeriesHasPoints ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "No outcome events in this range." }) }) : /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
-            LineChart,
-            {
-              data: dailyOrders,
-              margin: { top: 4, right: 8, left: 0, bottom: 0 },
-              children: [
-                /* @__PURE__ */ jsx(
-                  CartesianGrid,
-                  {
-                    stroke: "rgba(148,163,184,0.14)",
-                    strokeDasharray: "3 3",
-                    vertical: false
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  XAxis,
-                  {
-                    dataKey: "date",
-                    tick: { fontSize: 10, fill: "var(--medusa-color-ui-fg-muted)" },
-                    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);
-                    }
-                  }
-                ),
+            title: "Placed orders vs drafts",
+            description: "Window order count vs current open draft orders (admin). Not storefront cart abandonment.",
+            children: insightsLoading ? /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-[100px] items-center justify-center py-4", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) }) : insightsError ? /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-[100px] items-center justify-center px-2 py-4", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger text-center text-xs", children: insightsError }) }) }) : ordersVsDraftsPie.some((s) => s.value > 0) ? /* @__PURE__ */ jsxs(AnalyticsChartSurface, { variant: "atlas", children: [
+              /* @__PURE__ */ jsx("div", { className: "h-[min(176px,28vh)] min-h-[148px] w-full", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart, { margin: { top: 2, bottom: 2, left: 2, right: 2 }, children: [
                 /* @__PURE__ */ jsx(
-                  YAxis,
+                  Pie,
                   {
-                    width: 28,
-                    tick: { fontSize: 10, fill: "var(--medusa-color-ui-fg-muted)" },
-                    tickLine: false,
-                    axisLine: false,
-                    allowDecimals: false,
-                    tickFormatter: (value) => Math.floor(Number(value) || 0).toLocaleString()
+                    data: ordersVsDraftsPie,
+                    dataKey: "value",
+                    nameKey: "name",
+                    cx: "50%",
+                    cy: "46%",
+                    innerRadius: 40,
+                    outerRadius: 58,
+                    paddingAngle: 2,
+                    children: ordersVsDraftsPie.map((slice, i) => /* @__PURE__ */ jsx(
+                      Cell,
+                      {
+                        fill: PIE_PALETTE[i % PIE_PALETTE.length]
+                      },
+                      slice.key
+                    ))
                   }
                 ),
                 /* @__PURE__ */ jsx(
                   Tooltip,
                   {
-                    content: /* @__PURE__ */ jsx(OutcomesTrendTooltip, {}),
-                    cursor: { stroke: "rgba(148,163,184,0.35)", strokeWidth: 1 }
+                    content: ({ active, payload }) => {
+                      var _a2, _b2;
+                      return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsx(TooltipCard, { title: String(((_a2 = payload[0]) == null ? void 0 : _a2.name) ?? ""), children: /* @__PURE__ */ jsxs("div", { children: [
+                        "Count:",
+                        " ",
+                        /* @__PURE__ */ jsx("strong", { children: Math.floor(
+                          Number((_b2 = payload[0]) == null ? void 0 : _b2.value) || 0
+                        ).toLocaleString() })
+                      ] }) }) : null;
+                    }
                   }
                 ),
                 /* @__PURE__ */ jsx(
                   Legend,
                   {
                     wrapperStyle: { fontSize: 9, paddingTop: 0 },
-                    iconType: "circle",
-                    iconSize: 6
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Line,
-                  {
-                    type: "natural",
-                    dataKey: "delivered_count",
-                    name: "Delivered",
-                    stroke: STATUS_BAR_COLORS.delivered,
-                    strokeWidth: 2,
-                    dot: false
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Line,
-                  {
-                    type: "natural",
-                    dataKey: "cancelled_count",
-                    name: "Cancelled",
-                    stroke: STATUS_BAR_COLORS.cancelled,
-                    strokeWidth: 2,
-                    dot: false
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Line,
-                  {
-                    type: "natural",
-                    dataKey: "exchange_count",
-                    name: "Exchanges",
-                    stroke: STATUS_BAR_COLORS.exchange,
-                    strokeWidth: 2,
-                    dot: false
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Line,
-                  {
-                    type: "natural",
-                    dataKey: "return_count",
-                    name: "Returns",
-                    stroke: STATUS_BAR_COLORS.return,
-                    strokeWidth: 2,
-                    dot: false
+                    verticalAlign: "bottom",
+                    height: 22,
+                    iconType: "circle"
                   }
                 )
-              ]
-            }
-          ) }) }) })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        AnalyticsSection,
-        {
-          variant: "atlas",
-          className: "xl:col-span-5",
-          title: "Recent orders (7 days)",
-          description: "Daily order count vs 7-day average — time series.",
-          children: /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
-              /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-ui-border-base bg-ui-bg-subtle/50 px-2 py-2", children: [
-                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Today" }),
-                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-base font-semibold tracking-tight", children: (todayPoint == null ? void 0 : todayPoint.orders_count.toLocaleString()) ?? "0" })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-ui-border-base bg-ui-bg-subtle/50 px-2 py-2", children: [
-                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "7-day avg" }),
-                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-base font-semibold tracking-tight", children: todayOrdersAverage.toFixed(1) })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "h-[160px] sm:h-[180px]", children: todayContextLoading ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) : todayContextError ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger text-xs", children: todayContextError }) }) : todayChartData.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "No recent activity." }) }) : /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
-              ComposedChart,
+              ] }) }) }),
+              (ordersInsights == null ? void 0 : ordersInsights.drafts.available) === false ? /* @__PURE__ */ jsx(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__ */ jsx(
+              EmptyAnalyticsPanel,
+              {
+                title: "Nothing to compare",
+                description: "No placed orders and no draft rows in this snapshot."
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AnalyticsSection,
+          {
+            variant: "atlas",
+            title: "Sales by hour (UTC)",
+            description: `Orders created by hour — last ${insightsWindowDays} days.`,
+            children: insightsLoading ? /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-[100px] items-center justify-center py-4", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) }) : insightsError ? /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-[100px] items-center justify-center px-2 py-4", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger text-center text-xs", children: insightsError }) }) }) : hourlyChartRows.length > 0 ? /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsx("div", { className: "h-[min(176px,28vh)] min-h-[148px] w-full", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+              BarChart,
               {
-                data: todayChartData,
-                margin: { top: 4, right: 4, left: -4, bottom: 0 },
+                data: hourlyChartRows,
+                margin: { top: 2, right: 4, left: -8, bottom: 2 },
                 children: [
-                  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "todayOrdersFill", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-                    /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#3b82f6", stopOpacity: 0.2 }),
-                    /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#3b82f6", stopOpacity: 0 })
-                  ] }) }),
                   /* @__PURE__ */ jsx(
                     CartesianGrid,
                     {
-                      stroke: "rgba(148,163,184,0.14)",
                       strokeDasharray: "3 3",
-                      vertical: false
+                      vertical: false,
+                      stroke: "rgba(148,163,184,0.12)"
                     }
                   ),
                   /* @__PURE__ */ jsx(
                     XAxis,
                     {
-                      dataKey: "date",
-                      tick: { fontSize: 10, fill: "var(--medusa-color-ui-fg-muted)" },
-                      tickLine: false,
-                      axisLine: false,
-                      tickFormatter: formatChartLabel
+                      dataKey: "label",
+                      interval: 3,
+                      tick: CHART_AXIS_TICK_SM
                     }
                   ),
                   /* @__PURE__ */ jsx(
                     YAxis,
                     {
                       width: 28,
-                      tick: { fontSize: 10, fill: "var(--medusa-color-ui-fg-muted)" },
-                      tickLine: false,
-                      axisLine: false,
-                      allowDecimals: false,
-                      tickFormatter: (value) => Math.floor(Number(value) || 0).toLocaleString()
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(OrdersTodayTooltip, {}), cursor: { stroke: "rgba(148,163,184,0.35)", strokeWidth: 1 } }),
-                  /* @__PURE__ */ jsx(
-                    ReferenceLine,
-                    {
-                      y: todayOrdersAverage,
-                      stroke: "rgba(148,163,184,0.65)",
-                      strokeDasharray: "4 4"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Area,
-                    {
-                      type: "natural",
-                      dataKey: "orders_count",
-                      stroke: "none",
-                      fill: "url(#todayOrdersFill)",
-                      isAnimationActive: false
+                      tick: CHART_AXIS_TICK,
+                      allowDecimals: false
                     }
                   ),
                   /* @__PURE__ */ jsx(
-                    Line,
+                    Tooltip,
                     {
-                      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__ */ jsx(
-                            "circle",
-                            {
-                              cx,
-                              cy,
-                              r: 4,
-                              fill: STATUS_BAR_COLORS.today,
-                              stroke: "var(--medusa-color-ui-bg-base)",
-                              strokeWidth: 1
-                            }
-                          );
-                        }
-                        return /* @__PURE__ */ jsx("circle", { cx, cy, r: 0, fill: "transparent" });
+                      content: ({ active, payload, label }) => {
+                        var _a2, _b2;
+                        return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxs(TooltipCard, { title: String(label), children: [
+                          /* @__PURE__ */ jsxs("div", { children: [
+                            "Orders:",
+                            " ",
+                            /* @__PURE__ */ jsx("strong", { children: Math.floor(
+                              Number(
+                                (_a2 = payload.find((p) => p.dataKey === "orders_count")) == null ? void 0 : _a2.value
+                              ) || 0
+                            ).toLocaleString() })
+                          ] }),
+                          /* @__PURE__ */ jsxs("div", { children: [
+                            "Revenue:",
+                            " ",
+                            /* @__PURE__ */ jsx("strong", { children: formatCurrency$1(
+                              Number(
+                                (_b2 = payload.find((p) => p.dataKey === "revenue")) == null ? void 0 : _b2.value
+                              ) || 0
+                            ) })
+                          ] })
+                        ] }) : null;
                       }
                     }
-                  )
+                  ),
+                  /* @__PURE__ */ jsx(Bar, { dataKey: "orders_count", name: "Orders", fill: "#38BDF8", radius: [4, 4, 0, 0] })
                 ]
               }
-            ) }) }),
-            /* @__PURE__ */ jsxs(Container, { className: "rounded-lg border border-ui-border-base bg-ui-bg-subtle/40 px-2.5 py-2 shadow-sm", children: [
-              /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Note" }),
-              /* @__PURE__ */ jsx(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__ */ jsxs("div", { className: "mt-3 grid grid-cols-1 items-start gap-3 md:grid-cols-3", children: [
-      /* @__PURE__ */ jsx(
-        AnalyticsSection,
-        {
-          variant: "atlas",
-          title: "Revenue breakdown",
-          description: "Category or source contribution — time series when connected.",
-          children: /* @__PURE__ */ jsx(
-            EmptyAnalyticsPanel,
-            {
-              title: "Stacked breakdown",
-              description: "Connect product or attribution dimensions to show stacked area over time."
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        AnalyticsSection,
-        {
-          variant: "atlas",
-          title: "Cart abandonment",
-          description: "Converted vs abandoned — time series when cart analytics exist.",
-          children: /* @__PURE__ */ jsx(
-            EmptyAnalyticsPanel,
-            {
-              title: "Checkout leakage",
-              description: "Donut and trend charts will use cart lifecycle data once available."
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        AnalyticsSection,
-        {
-          variant: "atlas",
-          title: "Sales by time",
-          description: "Hourly or intraday patterns — bar time series when connected.",
-          children: /* @__PURE__ */ jsx(
-            EmptyAnalyticsPanel,
-            {
-              title: "Sales by hour",
-              description: "Order timestamps by hour-of-day will render as a compact bar time series."
-            }
-          )
-        }
-      )
+            ) }) }) }) : /* @__PURE__ */ jsx(
+              EmptyAnalyticsPanel,
+              {
+                title: "No hourly data",
+                description: "No orders in this window."
+              }
+            )
+          }
+        )
+      ] })
     ] })
   ] }) });
 }
@@ -1272,6 +2228,17 @@ function CustomersOverTimeTooltip({
     }
   );
 }
+function MixPieTooltip({
+  active,
+  payload
+}) {
+  if (!active || !(payload == null ? void 0 : payload.length)) return null;
+  const row = payload[0];
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm shadow-md", children: [
+    /* @__PURE__ */ jsx(Text, { className: "font-medium text-ui-fg-base", children: row.name }),
+    /* @__PURE__ */ jsx(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" },
@@ -1295,12 +2262,15 @@ function CustomersDashboard() {
   const [graphPeriod, setGraphPeriod] = useState("one_week");
   const [graphLoading, setGraphLoading] = useState(true);
   const [graphError, setGraphError] = useState(null);
+  const [repeatStats, setRepeatStats] = useState(null);
+  const [repeatLoading, setRepeatLoading] = useState(true);
+  const [repeatError, setRepeatError] = useState(null);
   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) => {
@@ -1319,7 +2289,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) => {
@@ -1333,6 +2303,34 @@ function CustomersDashboard() {
       cancelled = true;
     };
   }, [graphPeriod]);
+  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 = 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__ */ jsx(
       "div",
@@ -1417,6 +2415,70 @@ function CustomersDashboard() {
         }
       )
     ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-2", children: [
+      /* @__PURE__ */ jsx(
+        AnalyticsSection,
+        {
+          title: "Guest vs registered",
+          description: "Customer mix for the selected count period (same filter as the summary cards).",
+          children: /* @__PURE__ */ jsx(AnalyticsChartSurface, { children: /* @__PURE__ */ jsx("div", { className: "h-72", children: guestRegisteredPieData.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-sm", children: "No guest or registered customers in this range." }) }) : /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart, { children: [
+            /* @__PURE__ */ jsx(
+              Pie,
+              {
+                data: guestRegisteredPieData,
+                dataKey: "value",
+                nameKey: "name",
+                cx: "50%",
+                cy: "50%",
+                innerRadius: 52,
+                outerRadius: 88,
+                paddingAngle: 2,
+                children: guestRegisteredPieData.map((entry) => /* @__PURE__ */ jsx(
+                  Cell,
+                  {
+                    fill: entry.key === "guest" ? GUEST_COLOR : REGISTERED_COLOR
+                  },
+                  entry.key
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(MixPieTooltip, {}) }),
+            /* @__PURE__ */ jsx(Legend, { wrapperStyle: { fontSize: 12 }, iconType: "circle" })
+          ] }) }) }) })
+        }
+      ),
+      /* @__PURE__ */ 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__ */ jsx(AnalyticsChartSurface, { children: repeatLoading ? /* @__PURE__ */ jsx("div", { className: "flex min-h-[200px] items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-sm", children: "Loading…" }) }) : repeatError ? /* @__PURE__ */ jsx("div", { className: "flex min-h-[200px] items-center justify-center px-2", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger text-center text-sm", children: repeatError }) }) : repeatStats ? /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-3", children: [
+            /* @__PURE__ */ 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__ */ jsx(
+              AnalyticsStatCard,
+              {
+                label: "Customers with orders",
+                value: repeatStats.customers_with_orders.toLocaleString()
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              AnalyticsStatCard,
+              {
+                label: "Repeat customers (2+)",
+                value: repeatStats.repeat_customers.toLocaleString()
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx("div", { className: "flex min-h-[200px] items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-sm", children: "No data." }) }) })
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx(
       AnalyticsSection,
       {
@@ -1808,6 +2870,10 @@ function ProductsDashboard() {
     })).reverse(),
     [performance]
   );
+  const viewsVsUnitsScatterData = 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__ */ jsx(
       "div",
@@ -2153,7 +3219,66 @@ function ProductsDashboard() {
           ] }) })
         }
       )
-    ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      AnalyticsSection,
+      {
+        title: "Views vs units sold",
+        description: "Each point is a product (top viewed in this period). Requires product view tracking.",
+        children: /* @__PURE__ */ jsx(AnalyticsChartSurface, { children: /* @__PURE__ */ jsx("div", { className: "h-80", children: performanceLoading ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted", children: "Loading scatter…" }) }) : performanceError || !performance ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger", children: performanceError ?? "Failed to load product performance" }) }) : !performance.productViewsConnected ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted", children: "Product view tracking is not available in this environment." }) }) : viewsVsUnitsScatterData.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted", children: "No products with views or sales in this range." }) }) : /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(ScatterChart, { margin: { top: 12, right: 16, bottom: 8, left: 8 }, children: [
+          /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "rgba(148,163,184,0.2)" }),
+          /* @__PURE__ */ jsx(
+            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__ */ jsx(
+            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__ */ jsx(
+            Tooltip,
+            {
+              cursor: { strokeDasharray: "4 4" },
+              content: /* @__PURE__ */ jsx(ProductBarTooltip, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Scatter,
+            {
+              name: "Products",
+              data: viewsVsUnitsScatterData,
+              fill: VIEWS_COLOR
+            }
+          )
+        ] }) }) }) })
+      }
+    )
   ] });
 }
 const ANALYTICS_MODULES = [
@@ -2170,16 +3295,29 @@ const AnalyticsPage = () => {
           /* @__PURE__ */ jsx(Heading, { level: "h1", className: "tracking-tight", children: "Analytics" }),
           /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-sm", children: "Review orders, customers, and products in one organized workspace." })
         ] }),
-        /* @__PURE__ */ 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__ */ jsx(
-          Button,
+        /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "h-1 bg-ui-bg-subtle" })
     ] }),