medusa-analytics 0.0.20 → 0.0.22

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

@@ -296,37 +296,72 @@ function formatChartLabel$2(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$1(value) {
   return new Intl.NumberFormat("en-IN", {
     notation: "compact",
     maximumFractionDigits: value < 10 ? 1 : 0
   }).format(value);
 }
-function OrdersTrendTooltip({
+const SALES_GRANULARITY_TABS = [
+  { value: "day", label: "Day" },
+  { value: "hour", label: "Hour" },
+  { value: "week", label: "Week" },
+  { value: "month", label: "Month" }
+];
+function monthKeyFromDateStr(dateStr) {
+  if (dateStr.length >= 7) return dateStr.slice(0, 7);
+  return dateStr;
+}
+function formatMonthBucketLabel(ymKey) {
+  const [ys, ms] = ymKey.split("-");
+  const y = Number(ys);
+  const m = Number(ms);
+  if (!Number.isFinite(y) || !Number.isFinite(m)) return ymKey;
+  return new Intl.DateTimeFormat("en-IN", {
+    month: "short",
+    year: "numeric",
+    timeZone: "UTC"
+  }).format(new Date(Date.UTC(y, m - 1, 1)));
+}
+function aggregateDailyOrdersForBreakdown(rows, keyFn, labelFn) {
+  const map = /* @__PURE__ */ new Map();
+  for (const d of rows) {
+    const key = keyFn(d);
+    const cur = map.get(key) ?? { orders: 0, revenue: 0, bucketRows: [] };
+    cur.orders += d.orders_count;
+    cur.revenue += d.total_revenue;
+    cur.bucketRows.push(d);
+    map.set(key, cur);
+  }
+  return Array.from(map.entries()).sort(([a], [b]) => a.localeCompare(b)).map(([key, v]) => ({
+    key,
+    label: labelFn(key, v.bucketRows),
+    orders_count: v.orders,
+    revenue: v.revenue
+  }));
+}
+function isSalesBreakdownBarRow(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const v = value;
+  return typeof v.key === "string" && typeof v.label === "string" && typeof v.orders_count === "number" && typeof v.revenue === "number";
+}
+function SalesBreakdownTooltip({
   active,
-  payload,
-  label
+  payload
 }) {
-  var _a, _b, _c, _d;
+  var _a, _b;
   if (!active || !(payload == null ? void 0 : payload.length)) return null;
-  const row = isDailyOrderRow((_a = payload[0]) == null ? void 0 : _a.payload) ? (_b = payload[0]) == null ? void 0 : _b.payload : void 0;
-  const displayLabel = (row == null ? void 0 : row.label) ?? (label ? new Date(label).toLocaleDateString() : "");
-  const orders = ((_c = payload.find((entry) => entry.name === "Orders")) == null ? void 0 : _c.value) ?? 0;
-  const revenue = ((_d = payload.find((entry) => entry.name === "Revenue")) == null ? void 0 : _d.value) ?? 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsTooltipCard, { title: displayLabel, children: [
+  const row = isSalesBreakdownBarRow((_a = payload[0]) == null ? void 0 : _a.payload) ? (_b = payload[0]) == null ? void 0 : _b.payload : void 0;
+  if (!row) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsTooltipCard, { variant: "compact", title: row.label, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      "Orders: ",
-      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(orders).toLocaleString() })
+      "Revenue: ",
+      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency$1(row.revenue) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      "Revenue: ",
-      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency$1(Number(revenue)) })
+      "Orders:",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(row.orders_count).toLocaleString() })
     ] })
   ] });
 }
@@ -348,21 +383,6 @@ function OrdersTodayTooltip({
     (row == null ? void 0 : row.isToday) ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#6B7280" }, children: "Current day" }) : null
   ] });
 }
-function OrdersSparklineTooltip({
-  active,
-  payload,
-  label
-}) {
-  var _a, _b, _c;
-  if (!active || !(payload == null ? void 0 : payload.length)) return null;
-  const row = isDailyOrderRow((_a = payload[0]) == null ? void 0 : _a.payload) ? (_b = payload[0]) == null ? void 0 : _b.payload : void 0;
-  const displayLabel = (row == null ? void 0 : row.label) ?? (label ? new Date(label).toLocaleDateString() : "");
-  const orders = Number((_c = payload[0]) == null ? void 0 : _c.value) || 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsTooltipCard, { variant: "compact", title: displayLabel, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    "Orders: ",
-    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(orders).toLocaleString() })
-  ] }) });
-}
 function OutcomesTrendTooltip({
   active,
   payload,
@@ -379,6 +399,53 @@ function OutcomesTrendTooltip({
     /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(Number(entry.value) || 0).toLocaleString() })
   ] }, String(entry.name))) });
 }
+function isTrendRowDetailed(value) {
+  if (!isDailyOrderRow(value)) return false;
+  const v = value;
+  return typeof v.aov === "number" && typeof v.prev_revenue === "number" && typeof v.prev_orders === "number" && typeof v.prev_aov === "number";
+}
+function CombinedMetricsTooltip({
+  active,
+  payload
+}) {
+  var _a, _b;
+  if (!active || !(payload == null ? void 0 : payload.length)) return null;
+  const row = isTrendRowDetailed((_a = payload[0]) == null ? void 0 : _a.payload) ? (_b = payload[0]) == null ? void 0 : _b.payload : void 0;
+  if (!row) return null;
+  const title = row.label ?? formatChartLabel$2(row.date);
+  return /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsTooltipCard, { variant: "compact", title, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      "Revenue:",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCompactCurrency$1(row.total_revenue) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-ui-fg-muted", children: [
+        " ",
+        "· prev ",
+        formatCompactCurrency$1(row.prev_revenue)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      "Orders:",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(row.orders_count).toLocaleString() }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-ui-fg-muted", children: [
+        " ",
+        "· prev ",
+        Math.floor(row.prev_orders).toLocaleString()
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      "AOV (non-canc.):",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency$1(row.aov) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-ui-fg-muted", children: [
+        " ",
+        "· prev ",
+        formatCurrency$1(row.prev_aov)
+      ] })
+    ] })
+  ] });
+}
 const KPI_ICON_BG$2 = {
   green: "bg-emerald-500/20",
   blue: "bg-sky-500/20",
@@ -392,53 +459,6 @@ const KPI_ICONS$2 = {
   amber: icons.Cash
 };
 const PIE_PALETTE = ["#6366F1", "#94A3B8", "#10B981", "#F59E0B"];
-function TrafficRevenueDonut({ traffic }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[152px] w-full shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { margin: { top: 2, right: 2, left: 2, bottom: 2 }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      recharts.Pie,
-      {
-        data: traffic,
-        dataKey: "revenue",
-        nameKey: "label",
-        cx: "50%",
-        cy: "48%",
-        innerRadius: 34,
-        outerRadius: 54,
-        paddingAngle: 2,
-        children: traffic.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: PIE_PALETTE[i % PIE_PALETTE.length] }, `traffic-slice-${i}`))
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      recharts.Tooltip,
-      {
-        content: ({ active, payload }) => {
-          var _a, _b, _c;
-          return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsTooltipCard, { variant: "compact", title: String(((_a = payload[0]) == null ? void 0 : _a.name) ?? ""), children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              "Revenue:",
-              " ",
-              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency$1(Number((_b = payload[0]) == null ? void 0 : _b.value) || 0) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              "Orders:",
-              " ",
-              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: ordersCountFromPiePayload((_c = payload[0]) == null ? void 0 : _c.payload).toLocaleString() })
-            ] })
-          ] }) : null;
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      recharts.Legend,
-      {
-        wrapperStyle: { fontSize: 9, paddingTop: 0 },
-        verticalAlign: "bottom",
-        height: 22,
-        iconType: "circle"
-      }
-    )
-  ] }) }) });
-}
 function AtlasKpiCard$2({
   label,
   value,
@@ -498,7 +518,7 @@ function EmptyAnalyticsPanel$1({
   ] });
 }
 function OrdersDashboard() {
-  var _a, _b, _c;
+  var _a, _b;
   const [data, setData] = react.useState(null);
   const [loading, setLoading] = react.useState(true);
   const [error, setError] = react.useState(null);
@@ -514,6 +534,7 @@ function OrdersDashboard() {
   const [todayContext, setTodayContext] = react.useState([]);
   const [todayContextLoading, setTodayContextLoading] = react.useState(true);
   const [todayContextError, setTodayContextError] = react.useState(null);
+  const [salesGranularity, setSalesGranularity] = react.useState("day");
   react.useEffect(() => {
     let cancelled = false;
     setLoading(true);
@@ -709,14 +730,61 @@ function OrdersDashboard() {
       revenue: h.revenue
     }));
   }, [ordersInsights]);
-  const weekdayChartRows = react.useMemo(() => {
-    if (!ordersInsights) return [];
-    return ordersInsights.byWeekday.map((w) => ({
-      label: w.label,
-      orders_count: w.orders_count,
-      revenue: w.revenue
+  const salesBreakdownChartRows = react.useMemo(() => {
+    if (salesGranularity === "hour") {
+      return hourlyChartRows.map((h) => ({
+        key: `hour-${h.hour}`,
+        label: h.label,
+        orders_count: h.orders_count,
+        revenue: h.revenue
+      }));
+    }
+    if (salesGranularity === "week") {
+      if (!ordersInsights) return [];
+      return ordersInsights.byWeekday.map((w) => ({
+        key: `weekday-${w.weekday}`,
+        label: w.label,
+        orders_count: w.orders_count,
+        revenue: w.revenue
+      }));
+    }
+    if (salesGranularity === "month") {
+      return aggregateDailyOrdersForBreakdown(
+        dailyOrders,
+        (d) => monthKeyFromDateStr(d.date),
+        (ymKey) => formatMonthBucketLabel(ymKey)
+      );
+    }
+    return dailyOrders.map((d) => ({
+      key: d.date,
+      label: d.label ?? formatChartLabel$2(d.date),
+      orders_count: d.orders_count,
+      revenue: d.total_revenue
     }));
-  }, [ordersInsights]);
+  }, [salesGranularity, dailyOrders, hourlyChartRows, ordersInsights]);
+  const salesBreakdownDescription = react.useMemo(() => {
+    var _a2;
+    const rangeLabel = ((_a2 = OVER_TIME_PERIODS.find((p) => p.value === overTimePeriod)) == null ? void 0 : _a2.label) ?? "selected range";
+    const insightsHint = `Order-time breakdown uses last ${insightsWindowDays} days (UTC).`;
+    switch (salesGranularity) {
+      case "day":
+        return `Revenue by calendar day for ${rangeLabel} (aligned with Revenue & orders).`;
+      case "hour":
+        return `${insightsHint} Bars show revenue by hour of day.`;
+      case "week":
+        return `Revenue by UTC weekday — last ${insightsWindowDays} days.`;
+      case "month":
+        return `Revenue summed by calendar month (UTC) across ${rangeLabel}.`;
+      default:
+        return "";
+    }
+  }, [salesGranularity, overTimePeriod, insightsWindowDays]);
+  const salesBreakdownXAxisInterval = react.useMemo(() => {
+    const n = salesBreakdownChartRows.length;
+    if (salesGranularity === "hour") return 3;
+    if (salesGranularity === "day" && n > 24) return Math.max(0, Math.ceil(n / 10) - 1);
+    return 0;
+  }, [salesGranularity, salesBreakdownChartRows.length]);
   const ordersVsDraftsPie = react.useMemo(() => {
     var _a2;
     if (!ordersInsights) return [];
@@ -753,10 +821,6 @@ function OrdersDashboard() {
       };
     });
   }, [dailyOrders]);
-  const trafficTotalRevenue = react.useMemo(
-    () => (ordersInsights == null ? void 0 : ordersInsights.traffic.reduce((sum, t) => sum + (t.revenue || 0), 0)) ?? 0,
-    [ordersInsights]
-  );
   const quickPulseMetrics = [
     {
       label: "Range revenue",
@@ -797,6 +861,84 @@ function OrdersDashboard() {
   if (error || !data) {
     return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger", children: error ?? "Failed to load analytics" }) });
   }
+  const needsSalesOverTime = salesGranularity === "day" || salesGranularity === "month";
+  const needsSalesInsights = salesGranularity === "hour" || salesGranularity === "week";
+  const salesBreakdownBody = (() => {
+    if (needsSalesOverTime && overTimeLoading) {
+      return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[min(176px,28vh)] items-center justify-center py-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading chart…" }) }) });
+    }
+    if (needsSalesOverTime && overTimeError) {
+      return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[min(176px,28vh)] items-center justify-center px-2 py-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-center text-xs", children: overTimeError }) }) });
+    }
+    if (needsSalesInsights && insightsLoading) {
+      return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[min(176px,28vh)] items-center justify-center py-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading chart…" }) }) });
+    }
+    if (needsSalesInsights && insightsError) {
+      return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[min(176px,28vh)] items-center justify-center px-2 py-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-center text-xs", children: insightsError }) }) });
+    }
+    if (salesBreakdownChartRows.length === 0) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        EmptyAnalyticsPanel$1,
+        {
+          title: "No sales data",
+          description: "Nothing to show for this view and range."
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[min(200px,30vh)] min-h-[160px] w-full sm:h-[min(220px,32vh)]", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      recharts.BarChart,
+      {
+        data: salesBreakdownChartRows,
+        margin: { top: 4, right: 8, left: 4, bottom: 4 },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.CartesianGrid,
+            {
+              strokeDasharray: "3 3",
+              vertical: false,
+              stroke: "rgba(148,163,184,0.12)"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.XAxis,
+            {
+              dataKey: "label",
+              tick: CHART_AXIS_TICK_SM$1,
+              tickLine: false,
+              axisLine: false,
+              interval: salesBreakdownXAxisInterval
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.YAxis,
+            {
+              width: 44,
+              tick: CHART_AXIS_TICK_SM$1,
+              tickLine: false,
+              axisLine: false,
+              tickFormatter: (v) => formatCompactCurrency$1(Number(v))
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Tooltip,
+            {
+              content: /* @__PURE__ */ jsxRuntime.jsx(SalesBreakdownTooltip, {}),
+              cursor: { fill: "rgba(148,163,184,0.08)" }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.Bar,
+            {
+              dataKey: "revenue",
+              name: "Revenue",
+              fill: "#D946EF",
+              radius: [6, 6, 0, 0]
+            }
+          )
+        ]
+      }
+    ) }) }) });
+  })();
   return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsDashboardShell, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden rounded-2xl border border-ui-border-base/80 bg-ui-bg-base shadow-sm", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       AnalyticsDashboardHeader,
@@ -911,397 +1053,197 @@ function OrdersDashboard() {
                 ] }) })
               ] }),
               !overTimeLoading && !overTimeError && dailyOrders.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-1.5 lg:grid-cols-3", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsChartSurface, { variant: "atlas", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mb-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Revenue over time" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[118px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                      recharts.LineChart,
-                      {
-                        data: trendRowsDetailed,
-                        margin: { top: 4, right: 4, left: 0, bottom: 0 },
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            recharts.CartesianGrid,
-                            {
-                              strokeDasharray: "3 3",
-                              vertical: false,
-                              stroke: "rgba(148,163,184,0.12)"
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: "date", hide: true }),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            recharts.YAxis,
-                            {
-                              width: 36,
-                              tick: CHART_AXIS_TICK_SM$1,
-                              tickFormatter: (v) => formatCompactCurrency$1(Number(v))
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            recharts.Tooltip,
-                            {
-                              content: ({ active, payload, label }) => {
-                                var _a2, _b2, _c2, _d;
-                                return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxRuntime.jsxs(
-                                  AnalyticsTooltipCard,
-                                  {
-                                    variant: "compact",
-                                    title: String(
-                                      isDailyOrderRow((_a2 = payload[0]) == null ? void 0 : _a2.payload) ? ((_b2 = payload[0]) == null ? void 0 : _b2.payload.label) ?? formatChartLabel$2(String(label)) : label
-                                    ),
-                                    children: [
-                                      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                                        "This:",
-                                        " ",
-                                        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCompactCurrency$1(
-                                          Number(
-                                            (_c2 = payload.find((p) => p.dataKey === "total_revenue")) == null ? void 0 : _c2.value
-                                          ) || 0
-                                        ) })
-                                      ] }),
-                                      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                                        "Previous:",
-                                        " ",
-                                        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCompactCurrency$1(
-                                          Number(
-                                            (_d = payload.find((p) => p.dataKey === "prev_revenue")) == null ? void 0 : _d.value
-                                          ) || 0
-                                        ) })
-                                      ] })
-                                    ]
-                                  }
-                                ) : null;
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            recharts.Line,
-                            {
-                              type: "natural",
-                              dataKey: "total_revenue",
-                              name: "This period",
-                              stroke: "#D946EF",
-                              strokeWidth: 2,
-                              dot: false
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            recharts.Line,
-                            {
-                              type: "natural",
-                              dataKey: "prev_revenue",
-                              name: "Previous",
-                              stroke: "#94a3b8",
-                              strokeWidth: 1.5,
-                              strokeDasharray: "5 4",
-                              dot: false
-                            }
-                          )
-                        ]
-                      }
-                    ) }) })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsChartSurface, { variant: "atlas", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mb-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Orders count" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[118px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                      recharts.LineChart,
-                      {
-                        data: trendRowsDetailed,
-                        margin: { top: 4, right: 4, left: 0, bottom: 0 },
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            recharts.CartesianGrid,
-                            {
-                              strokeDasharray: "3 3",
-                              vertical: false,
-                              stroke: "rgba(148,163,184,0.12)"
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: "date", hide: true }),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            recharts.YAxis,
-                            {
-                              width: 28,
-                              tick: CHART_AXIS_TICK_SM$1,
-                              allowDecimals: false
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            recharts.Tooltip,
-                            {
-                              content: ({ active, payload, label }) => {
-                                var _a2, _b2;
-                                return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsTooltipCard, { variant: "compact", title: String(label), children: [
-                                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                                    "This:",
-                                    " ",
-                                    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(
-                                      Number(
-                                        (_a2 = payload.find((p) => p.dataKey === "orders_count")) == null ? void 0 : _a2.value
-                                      ) || 0
-                                    ).toLocaleString() })
-                                  ] }),
-                                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                                    "Previous:",
-                                    " ",
-                                    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(
-                                      Number(
-                                        (_b2 = payload.find((p) => p.dataKey === "prev_orders")) == null ? void 0 : _b2.value
-                                      ) || 0
-                                    ).toLocaleString() })
-                                  ] })
-                                ] }) : null;
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            recharts.Line,
-                            {
-                              type: "natural",
-                              dataKey: "orders_count",
-                              name: "This period",
-                              stroke: "#38BDF8",
-                              strokeWidth: 2,
-                              dot: false
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            recharts.Line,
-                            {
-                              type: "natural",
-                              dataKey: "prev_orders",
-                              name: "Previous",
-                              stroke: "#94a3b8",
-                              strokeWidth: 1.5,
-                              strokeDasharray: "5 4",
-                              dot: false
-                            }
-                          )
-                        ]
-                      }
-                    ) }) })
+                /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsChartSurface, { variant: "atlas", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex flex-col gap-0.5 sm:flex-row sm:items-start sm:justify-between", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Revenue, orders & AOV" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[9px] leading-snug", children: "One timeline · solid = this range, dashed = previous period (same length)" })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-x-3 gap-y-0.5 text-[9px] text-ui-fg-muted sm:justify-end", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2 w-2 shrink-0 rounded-full bg-fuchsia-500" }),
+                        "Revenue"
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2 w-2 shrink-0 rounded-full bg-sky-400" }),
+                        "Orders"
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2 w-2 shrink-0 rounded-full bg-amber-500" }),
+                        "AOV"
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "span",
+                          {
+                            className: "h-0 w-4 shrink-0 border-t border-dashed border-slate-400",
+                            "aria-hidden": true
+                          }
+                        ),
+                        "Previous"
+                      ] })
+                    ] })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsChartSurface, { variant: "atlas", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mb-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "AOV (non-cancelled)" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[118px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                      recharts.LineChart,
-                      {
-                        data: trendRowsDetailed,
-                        margin: { top: 4, right: 4, left: 0, bottom: 0 },
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            recharts.CartesianGrid,
-                            {
-                              strokeDasharray: "3 3",
-                              vertical: false,
-                              stroke: "rgba(148,163,184,0.12)"
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: "date", hide: true }),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            recharts.YAxis,
-                            {
-                              width: 36,
-                              tick: CHART_AXIS_TICK_SM$1,
-                              tickFormatter: (v) => formatCompactCurrency$1(Number(v))
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            recharts.Tooltip,
-                            {
-                              content: ({ active, payload, label }) => {
-                                var _a2, _b2;
-                                return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsTooltipCard, { variant: "compact", title: String(label), children: [
-                                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                                    "This:",
-                                    " ",
-                                    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency$1(
-                                      Number(
-                                        (_a2 = payload.find((p) => p.dataKey === "aov")) == null ? void 0 : _a2.value
-                                      ) || 0
-                                    ) })
-                                  ] }),
-                                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                                    "Previous:",
-                                    " ",
-                                    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency$1(
-                                      Number(
-                                        (_b2 = payload.find((p) => p.dataKey === "prev_aov")) == null ? void 0 : _b2.value
-                                      ) || 0
-                                    ) })
-                                  ] })
-                                ] }) : null;
-                              }
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            recharts.Line,
-                            {
-                              type: "natural",
-                              dataKey: "aov",
-                              name: "This period",
-                              stroke: "#D97706",
-                              strokeWidth: 2,
-                              dot: false
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            recharts.Line,
-                            {
-                              type: "natural",
-                              dataKey: "prev_aov",
-                              name: "Previous",
-                              stroke: "#94a3b8",
-                              strokeWidth: 1.5,
-                              strokeDasharray: "5 4",
-                              dot: false
-                            }
-                          )
-                        ]
-                      }
-                    ) }) })
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsChartSurface, { variant: "atlas", className: "mt-1.5", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mb-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Revenue breakdown (stacked — by order status)" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[min(168px,26vh)] min-h-[140px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[min(220px,32vh)] min-h-[156px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
                     recharts.ComposedChart,
                     {
-                      data: dailyOrders,
-                      margin: { top: 4, right: 8, left: -4, bottom: 0 },
+                      data: trendRowsDetailed,
+                      margin: { top: 6, right: 8, left: 2, bottom: 4 },
                       children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
                           recharts.CartesianGrid,
                           {
-                            stroke: "rgba(148,163,184,0.14)",
                             strokeDasharray: "3 3",
-                            vertical: false
+                            vertical: false,
+                            stroke: "rgba(148,163,184,0.12)"
                           }
                         ),
                         /* @__PURE__ */ jsxRuntime.jsx(
                           recharts.XAxis,
                           {
                             dataKey: "date",
-                            tick: CHART_AXIS_TICK$2,
+                            tick: CHART_AXIS_TICK_SM$1,
                             tickLine: false,
                             axisLine: false,
                             tickFormatter: (value, index) => {
-                              const row = dailyOrders[index];
-                              return (row == null ? void 0 : row.label) ?? formatChartLabel$2(value);
+                              const row = trendRowsDetailed[index];
+                              return (row == null ? void 0 : row.label) ?? formatChartLabel$2(String(value));
                             }
                           }
                         ),
                         /* @__PURE__ */ jsxRuntime.jsx(
                           recharts.YAxis,
                           {
-                            tick: CHART_AXIS_TICK$2,
+                            yAxisId: "orders",
+                            width: 30,
+                            tick: CHART_AXIS_TICK_SM$1,
+                            tickLine: false,
+                            axisLine: false,
+                            allowDecimals: false,
+                            tickFormatter: (v) => Math.floor(Number(v) || 0).toLocaleString()
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.YAxis,
+                          {
+                            yAxisId: "revenue",
+                            orientation: "right",
+                            width: 42,
+                            tick: CHART_AXIS_TICK_SM$1,
+                            tickLine: false,
+                            axisLine: false,
+                            tickFormatter: (v) => formatCompactCurrency$1(Number(v))
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.YAxis,
+                          {
+                            yAxisId: "aov",
+                            orientation: "right",
+                            width: 40,
+                            tick: CHART_AXIS_TICK_SM$1,
+                            tickLine: false,
+                            axisLine: false,
                             tickFormatter: (v) => formatCompactCurrency$1(Number(v))
                           }
                         ),
                         /* @__PURE__ */ jsxRuntime.jsx(
                           recharts.Tooltip,
                           {
-                            content: ({ active, payload, label }) => active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsTooltipCard, { variant: "compact", title: String(label), children: payload.map((p) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                              p.name,
-                              ":",
-                              " ",
-                              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency$1(Number(p.value) || 0) })
-                            ] }, String(p.name))) }) : null
+                            content: /* @__PURE__ */ jsxRuntime.jsx(CombinedMetricsTooltip, {}),
+                            cursor: {
+                              stroke: "rgba(248, 250, 252, 0.35)",
+                              strokeWidth: 1
+                            }
                           }
                         ),
-                        /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { wrapperStyle: { fontSize: 10 }, iconType: "circle" }),
                         /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Area,
+                          recharts.Line,
                           {
+                            yAxisId: "orders",
                             type: "natural",
-                            dataKey: "revenue_delivered",
-                            name: "Delivered",
-                            stackId: "r",
-                            fill: "#10B981",
-                            stroke: "#059669",
-                            fillOpacity: 0.85
+                            dataKey: "orders_count",
+                            name: "Orders",
+                            stroke: "#38BDF8",
+                            strokeWidth: 2,
+                            dot: false
                           }
                         ),
                         /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Area,
+                          recharts.Line,
                           {
+                            yAxisId: "orders",
                             type: "natural",
-                            dataKey: "revenue_open",
-                            name: "Open / pending",
-                            stackId: "r",
-                            fill: "#3B82F6",
-                            stroke: "#2563eb",
-                            fillOpacity: 0.85
+                            dataKey: "prev_orders",
+                            name: "Orders (prev)",
+                            stroke: "#64748b",
+                            strokeWidth: 1.5,
+                            strokeDasharray: "5 4",
+                            dot: false
                           }
                         ),
                         /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Area,
+                          recharts.Line,
                           {
+                            yAxisId: "revenue",
                             type: "natural",
-                            dataKey: "revenue_cancelled",
-                            name: "Cancelled",
-                            stackId: "r",
-                            fill: "#F87171",
-                            stroke: "#EF4444",
-                            fillOpacity: 0.75
+                            dataKey: "total_revenue",
+                            name: "Revenue",
+                            stroke: "#D946EF",
+                            strokeWidth: 2,
+                            dot: false
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.Line,
+                          {
+                            yAxisId: "revenue",
+                            type: "natural",
+                            dataKey: "prev_revenue",
+                            name: "Revenue (prev)",
+                            stroke: "#64748b",
+                            strokeWidth: 1.5,
+                            strokeDasharray: "5 4",
+                            dot: false
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.Line,
+                          {
+                            yAxisId: "aov",
+                            type: "natural",
+                            dataKey: "aov",
+                            name: "AOV",
+                            stroke: "#D97706",
+                            strokeWidth: 2,
+                            dot: false
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.Line,
+                          {
+                            yAxisId: "aov",
+                            type: "natural",
+                            dataKey: "prev_aov",
+                            name: "AOV (prev)",
+                            stroke: "#64748b",
+                            strokeWidth: 1.5,
+                            strokeDasharray: "5 4",
+                            dot: false
                           }
                         )
                       ]
                     }
                   ) }) })
-                ] })
-              ] }) : null,
-              /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsChartSurface, { variant: "atlas", className: "relative overflow-hidden", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-x-6 top-0 h-12 rounded-b-full bg-gradient-to-r from-sky-400/10 via-fuchsia-400/10 to-transparent blur-xl" }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative space-y-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-1.5", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.16em]", children: "Trend overview" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-sm font-semibold", children: ((_b = OVER_TIME_PERIODS.find((period) => period.value === overTimePeriod)) == null ? void 0 : _b.label) ?? "One week" })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap justify-end gap-2 text-[10px] text-ui-fg-muted", children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-sky-400" }),
-                        "Orders"
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-fuchsia-400" }),
-                        "Revenue"
-                      ] })
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[min(200px,30vh)] min-h-[160px] sm:h-[min(216px,32vh)]", children: overTimeLoading ? /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: "flex h-full items-center justify-center",
-                      role: "status",
-                      "aria-label": "Loading orders over time",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading chart…" })
-                    }
-                  ) : overTimeError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-xs", children: overTimeError }) }) : /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsChartSurface, { variant: "atlas", className: "mt-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mb-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Revenue breakdown (stacked — by order status)" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[min(168px,26vh)] min-h-[140px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
                     recharts.ComposedChart,
                     {
                       data: dailyOrders,
-                      margin: { top: 4, right: 6, left: -6, bottom: 0 },
+                      margin: { top: 4, right: 8, left: -4, bottom: 0 },
                       children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
-                          /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "ordersGradient", x1: "0", y1: "0", x2: "1", y2: "0", children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#67E8F9" }),
-                            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#3B82F6" })
-                          ] }),
-                          /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "revenueGradient", x1: "0", y1: "0", x2: "1", y2: "0", children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#F472B6" }),
-                            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#C084FC" })
-                          ] }),
-                          /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "ordersAreaFill", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#38BDF8", stopOpacity: 0.22 }),
-                            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#38BDF8", stopOpacity: 0 })
-                          ] }),
-                          /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "revenueAreaFill", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#E879F9", stopOpacity: 0.2 }),
-                            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#E879F9", stopOpacity: 0 })
-                          ] })
-                        ] }),
                         /* @__PURE__ */ jsxRuntime.jsx(
                           recharts.CartesianGrid,
                           {
@@ -1326,156 +1268,85 @@ function OrdersDashboard() {
                         /* @__PURE__ */ jsxRuntime.jsx(
                           recharts.YAxis,
                           {
-                            yAxisId: "orders",
-                            width: 32,
-                            tick: CHART_AXIS_TICK$2,
-                            tickLine: false,
-                            axisLine: false,
-                            allowDecimals: false,
-                            tickFormatter: (value) => Math.floor(Number(value) || 0).toLocaleString()
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.YAxis,
-                          {
-                            yAxisId: "revenue",
-                            orientation: "right",
-                            width: 40,
                             tick: CHART_AXIS_TICK$2,
-                            tickLine: false,
-                            axisLine: false,
-                            tickFormatter: (value) => formatCompactCurrency$1(Number(value) || 0)
+                            tickFormatter: (v) => formatCompactCurrency$1(Number(v))
                           }
                         ),
                         /* @__PURE__ */ jsxRuntime.jsx(
                           recharts.Tooltip,
                           {
-                            content: /* @__PURE__ */ jsxRuntime.jsx(OrdersTrendTooltip, {}),
-                            cursor: {
-                              stroke: "rgba(248, 250, 252, 0.35)",
-                              strokeWidth: 1
-                            }
+                            content: ({ active, payload, label }) => active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsTooltipCard, { variant: "compact", title: String(label), children: payload.map((p) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                              p.name,
+                              ":",
+                              " ",
+                              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency$1(Number(p.value) || 0) })
+                            ] }, String(p.name))) }) : null
                           }
                         ),
+                        /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { wrapperStyle: { fontSize: 10 }, iconType: "circle" }),
                         /* @__PURE__ */ jsxRuntime.jsx(
                           recharts.Area,
                           {
-                            yAxisId: "orders",
                             type: "natural",
-                            dataKey: "orders_count",
-                            stroke: "none",
-                            fill: "url(#ordersAreaFill)",
-                            isAnimationActive: false,
-                            legendType: "none"
+                            dataKey: "revenue_delivered",
+                            name: "Delivered",
+                            stackId: "r",
+                            fill: "#10B981",
+                            stroke: "#059669",
+                            fillOpacity: 0.85
                           }
                         ),
                         /* @__PURE__ */ jsxRuntime.jsx(
                           recharts.Area,
                           {
-                            yAxisId: "revenue",
-                            type: "natural",
-                            dataKey: "total_revenue",
-                            stroke: "none",
-                            fill: "url(#revenueAreaFill)",
-                            isAnimationActive: false,
-                            legendType: "none"
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Line,
-                          {
-                            yAxisId: "orders",
                             type: "natural",
-                            dataKey: "orders_count",
-                            name: "Orders",
-                            stroke: "url(#ordersGradient)",
-                            strokeWidth: 2,
-                            dot: false,
-                            activeDot: { r: 4, fill: STATUS_BAR_COLORS.orders }
+                            dataKey: "revenue_open",
+                            name: "Open / pending",
+                            stackId: "r",
+                            fill: "#3B82F6",
+                            stroke: "#2563eb",
+                            fillOpacity: 0.85
                           }
                         ),
                         /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Line,
+                          recharts.Area,
                           {
-                            yAxisId: "revenue",
                             type: "natural",
-                            dataKey: "total_revenue",
-                            name: "Revenue",
-                            stroke: "url(#revenueGradient)",
-                            strokeWidth: 2,
-                            dot: false,
-                            activeDot: { r: 4, fill: STATUS_BAR_COLORS.revenue }
+                            dataKey: "revenue_cancelled",
+                            name: "Cancelled",
+                            stackId: "r",
+                            fill: "#F87171",
+                            stroke: "#EF4444",
+                            fillOpacity: 0.75
                           }
                         )
                       ]
                     }
                   ) }) })
                 ] })
-              ] })
+              ] }) : null
             ] })
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12 flex flex-col gap-2 xl:col-span-6", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(
             AnalyticsSection,
             {
               variant: "atlas",
               title: "Pulse & range",
-              description: "Window totals and an orders time series for the selected range.",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-2", children: quickPulseMetrics.map((metric) => /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    className: `rounded-lg border border-ui-border-base bg-ui-bg-base px-2 py-2 shadow-sm ${metric.accentClassName}`.trim(),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: metric.label }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base mt-0.5 text-sm font-semibold tracking-tight", children: metric.value }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted mt-0.5 text-[9px] leading-snug", children: metric.helper })
-                    ]
-                  },
-                  metric.label
-                )) }),
-                !overTimeLoading && !overTimeError && dailyOrders.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsChartSurface, { variant: "atlas", className: "mt-1.5", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mb-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Orders (time series)" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[76px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                    recharts.LineChart,
-                    {
-                      data: dailyOrders,
-                      margin: { top: 2, right: 4, left: -18, bottom: 2 },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.CartesianGrid,
-                          {
-                            strokeDasharray: "3 3",
-                            vertical: false,
-                            stroke: "rgba(148,163,184,0.12)"
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: "date", hide: true }),
-                        /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { hide: true, domain: ["auto", "auto"] }),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Tooltip,
-                          {
-                            content: /* @__PURE__ */ jsxRuntime.jsx(OrdersSparklineTooltip, {}),
-                            cursor: { stroke: "rgba(148,163,184,0.35)", strokeWidth: 1 }
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Line,
-                          {
-                            type: "natural",
-                            dataKey: "orders_count",
-                            stroke: "#3b82f6",
-                            strokeWidth: 2,
-                            dot: { r: 2, fill: "#3b82f6" },
-                            activeDot: { r: 3 }
-                          }
-                        )
-                      ]
-                    }
-                  ) }) })
-                ] }) : null
-              ]
+              description: "Window totals for the selected range.",
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-2", children: quickPulseMetrics.map((metric) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: `rounded-lg border border-ui-border-base bg-ui-bg-base px-2 py-2 shadow-sm ${metric.accentClassName}`.trim(),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: metric.label }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base mt-0.5 text-sm font-semibold tracking-tight", children: metric.value }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted mt-0.5 text-[9px] leading-snug", children: metric.helper })
+                  ]
+                },
+                metric.label
+              )) })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -1483,7 +1354,7 @@ function OrdersDashboard() {
             {
               variant: "atlas",
               title: "Order → fulfillment funnel",
-              description: `Stages by order created date (UTC), same range as Revenue & orders (${((_c = OVER_TIME_PERIODS.find((p) => p.value === overTimePeriod)) == null ? void 0 : _c.label) ?? "period"}). Not storefront visitors.`,
+              description: `Stages by order created date (UTC), same range as Revenue & orders (${((_b = OVER_TIME_PERIODS.find((p) => p.value === overTimePeriod)) == null ? void 0 : _b.label) ?? "period"}). Not storefront visitors.`,
               children: overTimeLoading ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[120px] items-center justify-center py-3", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) }) : overTimeError ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[120px] items-center justify-center px-2 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-center text-xs", children: overTimeError }) }) }) : funnelTimeSeriesRows.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsChartSurface, { variant: "atlas", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mb-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Stage counts (time series)" }),
@@ -1714,21 +1585,6 @@ function OrdersDashboard() {
                 }
               )
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            AnalyticsSection,
-            {
-              variant: "atlas",
-              title: "Order revenue (attribution)",
-              description: "All revenue is from captured Medusa orders until storefront channel data exists.",
-              children: insightsLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[100px] items-center justify-center py-3", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) : insightsError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[100px] items-center justify-center px-2 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-center text-xs", children: insightsError }) }) : ordersInsights && ordersInsights.traffic.length > 0 ? trafficTotalRevenue <= 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted px-0.5 text-center text-[11px] leading-snug", children: "No recorded revenue in this window (totals may be zero until orders are paid or finalized)." }) : /* @__PURE__ */ jsxRuntime.jsx(TrafficRevenueDonut, { traffic: ordersInsights.traffic }) : /* @__PURE__ */ jsxRuntime.jsx(
-                EmptyAnalyticsPanel$1,
-                {
-                  title: "No order revenue",
-                  description: "No orders in this window."
-                }
-              )
-            }
           )
         ] })
       ] }),
@@ -1970,86 +1826,46 @@ function OrdersDashboard() {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 grid grid-cols-1 items-start gap-2 md:grid-cols-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 grid grid-cols-1 items-start gap-3 xl:grid-cols-12", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           AnalyticsSection,
           {
             variant: "atlas",
-            title: "Sales by weekday",
-            description: `Order revenue by UTC weekday — last ${insightsWindowDays} days.`,
-            children: insightsLoading ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[100px] items-center justify-center py-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) }) : insightsError ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[100px] items-center justify-center px-2 py-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-center text-xs", children: insightsError }) }) }) : weekdayChartRows.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[min(176px,28vh)] min-h-[148px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
-              recharts.BarChart,
+            className: "xl:col-span-8",
+            title: "Sales breakdown",
+            description: salesBreakdownDescription,
+            actionsBare: true,
+            actions: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
               {
-                data: weekdayChartRows,
-                margin: { top: 2, right: 4, left: -8, bottom: 2 },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.CartesianGrid,
-                    {
-                      strokeDasharray: "3 3",
-                      vertical: false,
-                      stroke: "rgba(148,163,184,0.12)"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.XAxis,
-                    {
-                      dataKey: "label",
-                      tick: CHART_AXIS_TICK$2
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.YAxis,
-                    {
-                      width: 40,
-                      tick: CHART_AXIS_TICK_SM$1,
-                      tickFormatter: (v) => formatCompactCurrency$1(Number(v))
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.Tooltip,
+                className: "flex flex-wrap items-center gap-1 rounded-lg border border-ui-border-base bg-ui-bg-subtle/40 p-0.5",
+                role: "tablist",
+                "aria-label": "Sales breakdown granularity",
+                children: SALES_GRANULARITY_TABS.map((tab) => {
+                  const selected = salesGranularity === tab.value;
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
                     {
-                      content: ({ active, payload, label }) => {
-                        var _a2, _b2;
-                        return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsTooltipCard, { variant: "compact", title: String(label), children: [
-                          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                            "Revenue:",
-                            " ",
-                            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency$1(
-                              Number(
-                                (_a2 = payload.find((p) => p.dataKey === "revenue")) == null ? void 0 : _a2.value
-                              ) || 0
-                            ) })
-                          ] }),
-                          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                            "Orders:",
-                            " ",
-                            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(
-                              Number(
-                                (_b2 = payload.find((p) => p.dataKey === "orders_count")) == null ? void 0 : _b2.value
-                              ) || 0
-                            ).toLocaleString() })
-                          ] })
-                        ] }) : null;
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(recharts.Bar, { dataKey: "revenue", name: "Revenue", fill: "#D946EF", radius: [4, 4, 0, 0] })
-                ]
-              }
-            ) }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(
-              EmptyAnalyticsPanel$1,
-              {
-                title: "No weekday data",
-                description: "No orders in this window."
+                      type: "button",
+                      role: "tab",
+                      "aria-selected": selected,
+                      onClick: () => setSalesGranularity(tab.value),
+                      className: `rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-fg-interactive ${selected ? "bg-ui-bg-base text-ui-fg-base shadow-sm" : "text-ui-fg-muted hover:text-ui-fg-base"}`,
+                      children: tab.label
+                    },
+                    tab.value
+                  );
+                })
               }
-            )
+            ),
+            children: salesBreakdownBody
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           AnalyticsSection,
           {
             variant: "atlas",
+            className: "xl:col-span-4",
             title: "Placed orders vs drafts",
             description: "Window order count vs current open draft orders (admin). Not storefront cart abandonment.",
             children: insightsLoading ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[100px] items-center justify-center py-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) }) : insightsError ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[100px] items-center justify-center px-2 py-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-center text-xs", children: insightsError }) }) }) : ordersVsDraftsPie.some((s) => s.value > 0) ? /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsChartSurface, { variant: "atlas", children: [
@@ -2108,82 +1924,6 @@ function OrdersDashboard() {
               }
             )
           }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          AnalyticsSection,
-          {
-            variant: "atlas",
-            title: "Sales by hour (UTC)",
-            description: `Orders created by hour — last ${insightsWindowDays} days.`,
-            children: insightsLoading ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[100px] items-center justify-center py-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) }) : insightsError ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[100px] items-center justify-center px-2 py-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-center text-xs", children: insightsError }) }) }) : hourlyChartRows.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[min(176px,28vh)] min-h-[148px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
-              recharts.BarChart,
-              {
-                data: hourlyChartRows,
-                margin: { top: 2, right: 4, left: -8, bottom: 2 },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.CartesianGrid,
-                    {
-                      strokeDasharray: "3 3",
-                      vertical: false,
-                      stroke: "rgba(148,163,184,0.12)"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.XAxis,
-                    {
-                      dataKey: "label",
-                      interval: 3,
-                      tick: CHART_AXIS_TICK_SM$1
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.YAxis,
-                    {
-                      width: 28,
-                      tick: CHART_AXIS_TICK$2,
-                      allowDecimals: false
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.Tooltip,
-                    {
-                      content: ({ active, payload, label }) => {
-                        var _a2, _b2;
-                        return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsTooltipCard, { variant: "compact", title: String(label), children: [
-                          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                            "Orders:",
-                            " ",
-                            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(
-                              Number(
-                                (_a2 = payload.find((p) => p.dataKey === "orders_count")) == null ? void 0 : _a2.value
-                              ) || 0
-                            ).toLocaleString() })
-                          ] }),
-                          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                            "Revenue:",
-                            " ",
-                            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency$1(
-                              Number(
-                                (_b2 = payload.find((p) => p.dataKey === "revenue")) == null ? void 0 : _b2.value
-                              ) || 0
-                            ) })
-                          ] })
-                        ] }) : null;
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(recharts.Bar, { dataKey: "orders_count", name: "Orders", fill: "#38BDF8", radius: [4, 4, 0, 0] })
-                ]
-              }
-            ) }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(
-              EmptyAnalyticsPanel$1,
-              {
-                title: "No hourly data",
-                description: "No orders in this window."
-              }
-            )
-          }
         )
       ] })
     ] })
@@ -2897,7 +2637,7 @@ function EmptyAnalyticsPanel({ title, description }) {
   ] });
 }
 function ProductsDashboard() {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const [summaryDays, setSummaryDays] = react.useState("all");
   const [graphPeriod, setGraphPeriod] = react.useState("one_week");
   const [topSellerPeriod, setTopSellerPeriod] = react.useState("week");
@@ -3024,7 +2764,7 @@ function ProductsDashboard() {
     };
   }, [salesChannelId, topSellerPeriod]);
   react.useEffect(() => {
-    var _a2, _b2;
+    var _a2;
     let cancelled = false;
     if (topSellersLoading) {
       setBestSellersTrendLoading(true);
@@ -3040,7 +2780,12 @@ function ProductsDashboard() {
         cancelled = true;
       };
     }
-    const topProductId = (_b2 = (_a2 = topSellers == null ? void 0 : topSellers.products) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.product_id;
+    const topSellersByUnits2 = [...(topSellers == null ? void 0 : topSellers.products) ?? []].sort((a, b) => {
+      if (b.units_sold !== a.units_sold) return b.units_sold - a.units_sold;
+      if (b.order_count !== a.order_count) return b.order_count - a.order_count;
+      return b.revenue - a.revenue;
+    });
+    const topProductId = (_a2 = topSellersByUnits2[0]) == null ? void 0 : _a2.product_id;
     if (!topProductId) {
       setBestSellersTrendLoading(false);
       setBestSellersTrendError(null);
@@ -3186,16 +2931,24 @@ function ProductsDashboard() {
   }, [series]);
   const peakRevenuePoint = series.length > 0 ? series.reduce((peak, point) => point.revenue > peak.revenue ? point : peak) : null;
   const viewsConnectedForPulse = ((summary == null ? void 0 : summary.productViewsConnected) ?? false) || (overTime == null ? void 0 : overTime.productViewsConnected) === true || (topSellers == null ? void 0 : topSellers.productViewsConnected) === true || (performance == null ? void 0 : performance.productViewsConnected) === true;
+  const topSellersByUnits = react.useMemo(
+    () => [...(topSellers == null ? void 0 : topSellers.products) ?? []].sort((a, b) => {
+      if (b.units_sold !== a.units_sold) return b.units_sold - a.units_sold;
+      if (b.order_count !== a.order_count) return b.order_count - a.order_count;
+      return b.revenue - a.revenue;
+    }),
+    [topSellers]
+  );
   const bestSellersTrendSeries = (bestSellersTrend == null ? void 0 : bestSellersTrend.series) ?? [];
   const mostViewedTrendSeries = (mostViewedTrend == null ? void 0 : mostViewedTrend.series) ?? [];
-  const bestSellerTrendProductTitle = ((_a = bestSellersTrend == null ? void 0 : bestSellersTrend.product) == null ? void 0 : _a.product_title) ?? ((_c = (_b = topSellers == null ? void 0 : topSellers.products) == null ? void 0 : _b[0]) == null ? void 0 : _c.product_title) ?? null;
-  const mostViewedTrendProductTitle = ((_d = mostViewedTrend == null ? void 0 : mostViewedTrend.product) == null ? void 0 : _d.product_title) ?? ((_f = (_e = performance == null ? void 0 : performance.topViewedProducts) == null ? void 0 : _e[0]) == null ? void 0 : _f.product_title) ?? null;
+  const bestSellerTrendProductTitle = ((_a = bestSellersTrend == null ? void 0 : bestSellersTrend.product) == null ? void 0 : _a.product_title) ?? ((_b = topSellersByUnits[0]) == null ? void 0 : _b.product_title) ?? null;
+  const mostViewedTrendProductTitle = ((_c = mostViewedTrend == null ? void 0 : mostViewedTrend.product) == null ? void 0 : _c.product_title) ?? ((_e = (_d = performance == null ? void 0 : performance.topViewedProducts) == null ? void 0 : _d[0]) == null ? void 0 : _e.product_title) ?? null;
   const viewsVsUnitsScatterData = react.useMemo(
     () => ((performance == null ? void 0 : performance.topViewedProducts) ?? []).slice(0, 48).filter((row) => row.total_views > 0 || row.units_sold > 0),
     [performance]
   );
-  const selectedSummaryPeriod = ((_g = SUMMARY_PERIODS.find((p) => p.value === summaryDays)) == null ? void 0 : _g.label) ?? "All time";
-  const selectedGraphPeriodLabel = ((_h = GRAPH_PERIODS.find((p) => p.value === graphPeriod)) == null ? void 0 : _h.label) ?? "One week";
+  const selectedSummaryPeriod = ((_f = SUMMARY_PERIODS.find((p) => p.value === summaryDays)) == null ? void 0 : _f.label) ?? "All time";
+  const selectedGraphPeriodLabel = ((_g = GRAPH_PERIODS.find((p) => p.value === graphPeriod)) == null ? void 0 : _g.label) ?? "One week";
   const quickPulseMetrics = [
     {
       label: "Range units",
@@ -3237,7 +2990,7 @@ function ProductsDashboard() {
     return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger", children: summaryError ?? "Failed to load product analytics" }) });
   }
   const viewsConnected = summary.productViewsConnected || (overTime == null ? void 0 : overTime.productViewsConnected) === true || (topSellers == null ? void 0 : topSellers.productViewsConnected) === true || (performance == null ? void 0 : performance.productViewsConnected) === true;
-  const selectedChannelLabel = salesChannelId === "all" ? "All channels" : ((_i = salesChannels.find((channel) => channel.id === salesChannelId)) == null ? void 0 : _i.name) ?? "Selected channel";
+  const selectedChannelLabel = salesChannelId === "all" ? "All channels" : ((_h = salesChannels.find((channel) => channel.id === salesChannelId)) == null ? void 0 : _h.name) ?? "Selected channel";
   const primaryStats = [
     {
       label: "Units sold",
@@ -3406,9 +3159,9 @@ function ProductsDashboard() {
                 }
               )
             ] }),
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-1.5 sm:grid-cols-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-3 sm:gap-1.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", className: "min-h-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Window units" }),
                   /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: formatShortNumber(trendTotals.totalUnits) }),
                   /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-ui-fg-muted text-[10px]", children: [
@@ -3416,7 +3169,7 @@ function ProductsDashboard() {
                     trendTotals.avgUnitsPerDay.toFixed(1)
                   ] })
                 ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", className: "min-h-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Window revenue" }),
                   /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: formatCompactCurrency(trendTotals.totalRevenue) }),
                   /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-ui-fg-muted text-[10px]", children: [
@@ -3424,7 +3177,7 @@ function ProductsDashboard() {
                     formatCompactCurrency(trendTotals.avgRevenuePerDay)
                   ] })
                 ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", className: "min-h-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Window views" }),
                   /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: formatShortNumber(trendTotals.totalViews) }),
                   /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-ui-fg-muted text-[10px]", children: [
@@ -3433,131 +3186,6 @@ function ProductsDashboard() {
                   ] })
                 ] }) })
               ] }),
-              !overTimeLoading && !overTimeError && series.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-1.5 md:grid-cols-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsChartSurface, { variant: "atlas", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mb-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Units sold" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[96px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                    recharts.LineChart,
-                    {
-                      data: series,
-                      margin: { top: 4, right: 4, left: 0, bottom: 0 },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.CartesianGrid,
-                          {
-                            strokeDasharray: "3 3",
-                            vertical: false,
-                            stroke: "rgba(148,163,184,0.12)"
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: "date", hide: true }),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.YAxis,
-                          {
-                            width: 28,
-                            tick: CHART_AXIS_TICK_SM,
-                            allowDecimals: false
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(MiniTrendTooltip, {}) }),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Line,
-                          {
-                            type: "natural",
-                            dataKey: "units_sold",
-                            name: "Units sold",
-                            stroke: PRODUCT_CHART_COLORS.units,
-                            strokeWidth: 2,
-                            dot: false
-                          }
-                        )
-                      ]
-                    }
-                  ) }) })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsChartSurface, { variant: "atlas", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mb-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Views" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[96px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                    recharts.LineChart,
-                    {
-                      data: series,
-                      margin: { top: 4, right: 4, left: 0, bottom: 0 },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.CartesianGrid,
-                          {
-                            strokeDasharray: "3 3",
-                            vertical: false,
-                            stroke: "rgba(148,163,184,0.12)"
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: "date", hide: true }),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.YAxis,
-                          {
-                            width: 28,
-                            tick: CHART_AXIS_TICK_SM,
-                            allowDecimals: false
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(MiniTrendTooltip, {}) }),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Line,
-                          {
-                            type: "natural",
-                            dataKey: "views",
-                            name: "Views",
-                            stroke: PRODUCT_CHART_COLORS.views,
-                            strokeWidth: 2,
-                            dot: false
-                          }
-                        )
-                      ]
-                    }
-                  ) }) })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsChartSurface, { variant: "atlas", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mb-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Revenue" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[96px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                    recharts.LineChart,
-                    {
-                      data: series,
-                      margin: { top: 4, right: 4, left: 0, bottom: 0 },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.CartesianGrid,
-                          {
-                            strokeDasharray: "3 3",
-                            vertical: false,
-                            stroke: "rgba(148,163,184,0.12)"
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: "date", hide: true }),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.YAxis,
-                          {
-                            width: 36,
-                            tick: CHART_AXIS_TICK_SM,
-                            tickFormatter: (v) => formatCompactCurrency(Number(v))
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(MiniTrendTooltip, {}) }),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Line,
-                          {
-                            type: "natural",
-                            dataKey: "revenue",
-                            name: "Revenue",
-                            stroke: PRODUCT_CHART_COLORS.revenue,
-                            strokeWidth: 2,
-                            dot: false
-                          }
-                        )
-                      ]
-                    }
-                  ) }) })
-                ] })
-              ] }) : null,
               /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsChartSurface, { variant: "atlas", className: "relative overflow-hidden", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-x-6 top-0 h-12 rounded-b-full bg-gradient-to-r from-sky-400/10 via-fuchsia-400/10 to-transparent blur-xl" }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative space-y-1", children: [
@@ -3783,7 +3411,7 @@ function ProductsDashboard() {
               variant: "atlas",
               actionsBare: true,
               title: "Best sellers",
-              description: bestSellerTrendProductTitle ? `Revenue and units over time for “${bestSellerTrendProductTitle}” (#1 by revenue in this window; all-time uses a 12‑month chart).` : "Revenue and units over time for the top product by revenue in this window (all-time leaderboard uses a 12‑month chart).",
+              description: bestSellerTrendProductTitle ? `Revenue and units over time for “${bestSellerTrendProductTitle}” (#1 by units sold in this window; all-time uses a 12‑month chart).` : "Revenue and units over time for the top product by units sold in this window (all-time leaderboard uses a 12‑month chart).",
               actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   ui.Label,
@@ -3947,7 +3575,7 @@ function ProductsDashboard() {
             variant: "atlas",
             className: "min-w-0 md:col-span-1 xl:col-span-1",
             title: "Leaderboard table",
-            description: "Products ranked by revenue — same window as Best sellers.",
+            description: "Products ranked by units sold — same window as Best sellers.",
             children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-[212px] min-w-0 sm:min-h-[228px]", children: /* @__PURE__ */ jsxRuntime.jsx(AnalyticsTableSurface, { className: "shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Table, { className: LEADERBOARD_TABLE_CLASS, children: [
               /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { className: TABLE_HEAD_CELL_NOWRAP, children: "Product" }),
@@ -3962,12 +3590,12 @@ function ProductsDashboard() {
                   /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, {}),
                   /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, {})
                 ] }) : null,
-                !topSellersError ? ((topSellers == null ? void 0 : topSellers.products) ?? []).slice(0, 8).map((product) => {
-                  var _a2, _b2;
+                !topSellersError ? topSellersByUnits.slice(0, 8).map((product) => {
+                  var _a2;
                   return /* @__PURE__ */ jsxRuntime.jsxs(
                     ui.Table.Row,
                     {
-                      className: product.product_id === ((_b2 = (_a2 = topSellers == null ? void 0 : topSellers.products) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.product_id) ? "bg-emerald-500/5" : void 0,
+                      className: product.product_id === ((_a2 = topSellersByUnits[0]) == null ? void 0 : _a2.product_id) ? "bg-emerald-500/5" : void 0,
                       children: [
                         /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: product.product_title }),
                         /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: product.units_sold.toLocaleString() }),
@@ -3978,7 +3606,7 @@ function ProductsDashboard() {
                     product.product_id
                   );
                 }) : null,
-                !topSellersLoading && !topSellersError && (((_j = topSellers == null ? void 0 : topSellers.products) == null ? void 0 : _j.length) ?? 0) === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
+                !topSellersLoading && !topSellersError && (((_i = topSellers == null ? void 0 : topSellers.products) == null ? void 0 : _i.length) ?? 0) === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "No best seller data yet." }) }),
                   /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, {}),
                   /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, {}),
@@ -4134,7 +3762,7 @@ function ProductsDashboard() {
                   /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: product.units_sold.toLocaleString() }),
                   /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: formatRatio(product.views_per_unit) })
                 ] }, product.product_id)),
-                !performanceLoading && !performanceError && (((_k = performance == null ? void 0 : performance.viewOpportunities) == null ? void 0 : _k.length) ?? 0) === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
+                !performanceLoading && !performanceError && (((_j = performance == null ? void 0 : performance.viewOpportunities) == null ? void 0 : _j.length) ?? 0) === 0 ? /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
                   /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "No product view opportunities yet." }) }),
                   /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, {}),
                   /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, {}),