medusa-analytics 0.0.18 → 0.0.20

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

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useMemo } from "react";
 import { defineRouteConfig } from "@medusajs/admin-sdk";
-import { CurrencyDollar, ShoppingCart, TruckFast, Cash, ChartBar } from "@medusajs/icons";
-import { Container, Text, Heading, Label, Button, Table } from "@medusajs/ui";
+import { CurrencyDollar, ShoppingCart, TruckFast, Cash, UsersSolid, User, UserGroup, Trash, Tag, CubeSolid, ChartBar } from "@medusajs/icons";
+import { Container, Text, Heading, Label, Table } from "@medusajs/ui";
 import { ResponsiveContainer, LineChart, CartesianGrid, XAxis, YAxis, Tooltip, Line, ComposedChart, Legend, Area, ReferenceLine, BarChart, Bar, PieChart, Pie, Cell, ScatterChart, Scatter } from "recharts";
 const ACCENT_STYLES = {
   blue: {
@@ -39,8 +39,8 @@ const ACCENT_STYLES = {
 function getAccentStyle(accent) {
   return ACCENT_STYLES[accent];
 }
-function AnalyticsDashboardShell({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "space-y-2.5 md:space-y-3", children });
+function AnalyticsDashboardShell({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: ["space-y-2.5 md:space-y-3", className].filter(Boolean).join(" "), children });
 }
 function AnalyticsDashboardHeader({
   title,
@@ -48,20 +48,30 @@ function AnalyticsDashboardHeader({
   actions,
   variant = "default",
   actionsBare = false,
-  appearance = "card"
+  appearance = "card",
+  actionsClassName
 }) {
   const isPremium = variant === "premium";
   const isInset = appearance === "inset";
   const headerRow = /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `flex flex-col gap-2 px-4 py-2.5 lg:flex-row lg:items-center lg:justify-between ${isPremium ? "border-b border-ui-border-base/80" : "border-b border-ui-border-base"}`.trim(),
+      className: `flex flex-col gap-2 px-4 py-2.5 lg:flex-row lg:items-center lg:justify-between lg:gap-4 ${isPremium ? "border-b border-ui-border-base/80" : "border-b border-ui-border-base"}`.trim(),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-0.5", children: [
           /* @__PURE__ */ jsx(Heading, { level: "h2", className: isPremium ? "text-lg font-semibold tracking-tight" : "tracking-tight", children: title }),
           description ? /* @__PURE__ */ jsx(Text, { className: `text-ui-fg-muted ${isPremium ? "max-w-2xl text-xs leading-snug" : "text-sm"}`.trim(), children: description }) : null
         ] }),
-        actions ? actionsBare ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-3 self-start lg:self-auto", children: actions }) : /* @__PURE__ */ jsx(
+        actions ? actionsBare ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: [
+              "flex flex-wrap items-center gap-3 self-start lg:shrink-0 lg:self-auto",
+              actionsClassName ?? ""
+            ].join(" ").trim(),
+            children: actions
+          }
+        ) : /* @__PURE__ */ jsx(
           "div",
           {
             className: `flex self-start rounded-xl border px-2 py-1.5 lg:self-auto ${isPremium ? "border-ui-border-strong bg-ui-bg-subtle shadow-[inset_0_1px_0_rgba(255,255,255,0.35)]" : "border-ui-border-base bg-ui-bg-subtle"}`.trim(),
@@ -155,7 +165,7 @@ function AnalyticsSection({
 }) {
   const isAtlas = variant === "atlas";
   const isPremium = variant !== "default" && !isAtlas;
-  const shellClass = isAtlas ? "overflow-hidden rounded-lg border border-ui-border-base bg-ui-bg-base shadow-sm" : `overflow-hidden rounded-2xl border bg-ui-bg-base p-0 ${isPremium ? "border-ui-border-strong shadow-sm" : "border-ui-border-base shadow-sm"}`.trim();
+  const shellClass = isAtlas ? "min-w-0 overflow-x-clip overflow-y-visible rounded-lg border border-ui-border-base bg-ui-bg-base shadow-sm" : `overflow-hidden rounded-2xl border bg-ui-bg-base p-0 ${isPremium ? "border-ui-border-strong shadow-sm" : "border-ui-border-base shadow-sm"}`.trim();
   const headerClass = isAtlas ? "flex flex-col gap-1 border-b border-ui-border-base bg-ui-bg-subtle/40 px-3 py-2 lg:flex-row lg:items-center lg:justify-between" : `flex flex-col gap-2 px-4 py-2.5 lg:flex-row lg:items-center lg:justify-between ${isPremium ? "border-b border-ui-border-base/80" : "border-b border-ui-border-base"}`.trim();
   const titleClass = isAtlas ? "text-sm font-semibold tracking-tight text-ui-fg-base" : isPremium ? "text-base font-semibold tracking-tight" : "tracking-tight";
   const descClass = isAtlas ? "max-w-2xl text-[11px] leading-snug text-ui-fg-muted" : isPremium ? "max-w-2xl text-xs leading-snug" : "text-sm";
@@ -190,11 +200,55 @@ function AnalyticsTableSurface({ children, className }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: `overflow-hidden rounded-xl border border-ui-border-base bg-ui-bg-base ${className ?? ""}`.trim(),
+      className: [
+        "min-w-0 overflow-x-auto overflow-y-visible rounded-xl border border-ui-border-base bg-ui-bg-base",
+        "[scrollbar-width:thin]",
+        className ?? ""
+      ].join(" ").trim(),
       children
     }
   );
 }
+function AnalyticsTooltipCard({
+  title,
+  children,
+  variant = "default"
+}) {
+  const compact = variant === "compact";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        background: "linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.96) 100%)",
+        color: "#111827",
+        border: "1px solid rgba(148, 163, 184, 0.18)",
+        borderRadius: compact ? "8px" : "14px",
+        padding: compact ? "5px 8px" : "12px 14px",
+        boxShadow: compact ? "0 6px 16px rgba(15, 23, 42, 0.1)" : "0 16px 40px rgba(15, 23, 42, 0.12)",
+        fontSize: compact ? "11px" : "13px",
+        lineHeight: compact ? 1.35 : 1.5,
+        minWidth: compact ? 0 : 176,
+        maxWidth: compact ? "min(92vw, 200px)" : "min(96vw, 380px)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontWeight: 600,
+              marginBottom: compact ? "2px" : "6px",
+              fontSize: compact ? "10px" : "inherit",
+              lineHeight: compact ? 1.25 : 1.35,
+              wordBreak: "break-word"
+            },
+            children: title
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
 function isDailyOrderRow(value) {
   if (typeof value !== "object" || value === null) return false;
   const v = value;
@@ -224,7 +278,7 @@ function formatCurrency$1(value) {
     maximumFractionDigits: 0
   }).format(value);
 }
-function formatCompactCurrency(value) {
+function formatCompactCurrency$1(value) {
   return new Intl.NumberFormat("en-IN", {
     style: "currency",
     currency: "INR",
@@ -232,7 +286,7 @@ function formatCompactCurrency(value) {
     maximumFractionDigits: 1
   }).format(value);
 }
-function formatChartLabel(value) {
+function formatChartLabel$2(value) {
   if (!value) return "";
   const parsed = new Date(value);
   if (Number.isNaN(parsed.getTime())) return value;
@@ -247,37 +301,12 @@ function ordersCountFromPiePayload(payload) {
   const c = payload.orders_count;
   return Math.floor(Number(c) || 0);
 }
-function formatShortNumber(value) {
+function formatShortNumber$1(value) {
   return new Intl.NumberFormat("en-IN", {
     notation: "compact",
     maximumFractionDigits: value < 10 ? 1 : 0
   }).format(value);
 }
-function TooltipCard({
-  title,
-  children
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        background: "linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.96) 100%)",
-        color: "#111827",
-        border: "1px solid rgba(148, 163, 184, 0.18)",
-        borderRadius: "14px",
-        padding: "12px 14px",
-        boxShadow: "0 16px 40px rgba(15, 23, 42, 0.12)",
-        fontSize: "13px",
-        lineHeight: 1.5,
-        minWidth: "176px"
-      },
-      children: [
-        /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, marginBottom: "6px" }, children: title }),
-        children
-      ]
-    }
-  );
-}
 function OrdersTrendTooltip({
   active,
   payload,
@@ -289,7 +318,7 @@ function OrdersTrendTooltip({
   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__ */ jsxs(TooltipCard, { title: displayLabel, children: [
+  return /* @__PURE__ */ jsxs(AnalyticsTooltipCard, { title: displayLabel, children: [
     /* @__PURE__ */ jsxs("div", { children: [
       "Orders: ",
       /* @__PURE__ */ jsx("strong", { children: Math.floor(orders).toLocaleString() })
@@ -310,7 +339,7 @@ function OrdersTodayTooltip({
   const row = isOrdersTodayPoint((_a = payload[0]) == null ? void 0 : _a.payload) ? (_b = payload[0]) == null ? void 0 : _b.payload : void 0;
   const displayLabel = (row == null ? void 0 : row.label) ?? (label ? new Date(label).toLocaleDateString() : "");
   const orders = ((_c = payload[0]) == null ? void 0 : _c.value) ?? 0;
-  return /* @__PURE__ */ jsxs(TooltipCard, { title: displayLabel, children: [
+  return /* @__PURE__ */ jsxs(AnalyticsTooltipCard, { variant: "compact", title: displayLabel, children: [
     /* @__PURE__ */ jsxs("div", { children: [
       "Orders: ",
       /* @__PURE__ */ jsx("strong", { children: Math.floor(orders).toLocaleString() })
@@ -328,7 +357,7 @@ function OrdersSparklineTooltip({
   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__ */ jsx(TooltipCard, { title: displayLabel, children: /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsx(AnalyticsTooltipCard, { variant: "compact", title: displayLabel, children: /* @__PURE__ */ jsxs("div", { children: [
     "Orders: ",
     /* @__PURE__ */ jsx("strong", { children: Math.floor(orders).toLocaleString() })
   ] }) });
@@ -342,33 +371,28 @@ function OutcomesTrendTooltip({
   if (!active || !(payload == null ? void 0 : payload.length)) return null;
   const row = isDailyOrderRow((_a = payload[0]) == null ? void 0 : _a.payload) ? (_b = payload[0]) == null ? void 0 : _b.payload : void 0;
   const displayLabel = (row == null ? void 0 : row.label) ?? (label ? new Date(label).toLocaleDateString() : "");
-  return /* @__PURE__ */ jsx(TooltipCard, { title: displayLabel, children: payload.map((entry) => /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsx(AnalyticsTooltipCard, { variant: "compact", title: displayLabel, children: payload.map((entry) => /* @__PURE__ */ jsxs("div", { children: [
     entry.name,
     ":",
     " ",
     /* @__PURE__ */ jsx("strong", { children: Math.floor(Number(entry.value) || 0).toLocaleString() })
   ] }, String(entry.name))) });
 }
-const KPI_ICON_BG = {
+const KPI_ICON_BG$2 = {
   green: "bg-emerald-500/20",
   blue: "bg-sky-500/20",
   purple: "bg-violet-500/20",
   amber: "bg-amber-500/20"
 };
-const KPI_ICONS = {
+const KPI_ICONS$2 = {
   green: CurrencyDollar,
   blue: ShoppingCart,
   purple: TruckFast,
   amber: Cash
 };
 const PIE_PALETTE = ["#6366F1", "#94A3B8", "#10B981", "#F59E0B"];
-function TrafficRevenueDonut({
-  traffic,
-  compact = false
-}) {
-  const innerRadius = compact ? 28 : 34;
-  const outerRadius = compact ? 44 : 54;
-  return /* @__PURE__ */ jsx("div", { className: compact ? "h-[118px] w-full" : "h-[152px] w-full shrink-0", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart, { margin: { top: 2, right: 2, left: 2, bottom: 2 }, children: [
+function TrafficRevenueDonut({ traffic }) {
+  return /* @__PURE__ */ jsx("div", { className: "h-[152px] w-full shrink-0", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart, { margin: { top: 2, right: 2, left: 2, bottom: 2 }, children: [
     /* @__PURE__ */ jsx(
       Pie,
       {
@@ -377,8 +401,8 @@ function TrafficRevenueDonut({
         nameKey: "label",
         cx: "50%",
         cy: "48%",
-        innerRadius,
-        outerRadius,
+        innerRadius: 34,
+        outerRadius: 54,
         paddingAngle: 2,
         children: traffic.map((_, i) => /* @__PURE__ */ jsx(Cell, { fill: PIE_PALETTE[i % PIE_PALETTE.length] }, `traffic-slice-${i}`))
       }
@@ -388,7 +412,7 @@ function TrafficRevenueDonut({
       {
         content: ({ active, payload }) => {
           var _a, _b, _c;
-          return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxs(TooltipCard, { title: String(((_a = payload[0]) == null ? void 0 : _a.name) ?? ""), children: [
+          return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxs(AnalyticsTooltipCard, { variant: "compact", title: String(((_a = payload[0]) == null ? void 0 : _a.name) ?? ""), children: [
             /* @__PURE__ */ jsxs("div", { children: [
               "Revenue:",
               " ",
@@ -406,44 +430,28 @@ function TrafficRevenueDonut({
     /* @__PURE__ */ jsx(
       Legend,
       {
-        wrapperStyle: { fontSize: compact ? 8 : 9, paddingTop: 0 },
+        wrapperStyle: { fontSize: 9, paddingTop: 0 },
         verticalAlign: "bottom",
-        height: compact ? 18 : 22,
+        height: 22,
         iconType: "circle"
       }
     )
   ] }) }) });
 }
-function TrafficSourcesOverviewCard({
-  traffic,
-  loading,
-  error,
-  totalRevenue,
-  windowLabel
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-[132px] flex-col rounded-2xl border border-ui-border-base p-3 shadow-sm", children: [
-    /* @__PURE__ */ jsx(Text, { className: "text-xs font-medium text-ui-fg-base", children: "Traffic sources" }),
-    /* @__PURE__ */ jsxs(Text, { className: "mb-1 text-[10px] leading-snug text-ui-fg-muted", children: [
-      "Revenue share · ",
-      windowLabel
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: loading ? /* @__PURE__ */ jsx("div", { className: "flex h-[104px] items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) : error ? /* @__PURE__ */ jsx("div", { className: "flex h-[104px] items-center justify-center px-1", children: /* @__PURE__ */ jsx(Text, { className: "text-center text-[10px] text-ui-fg-danger", children: error }) }) : traffic.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-[104px] items-center justify-center px-1", children: /* @__PURE__ */ jsx(Text, { className: "text-center text-[10px] leading-snug text-ui-fg-muted", children: "No traffic breakdown for this window." }) }) : totalRevenue <= 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-[104px] items-center justify-center px-1", children: /* @__PURE__ */ jsx(Text, { className: "text-center text-[10px] leading-snug text-ui-fg-muted", children: "No recorded revenue in this window." }) }) : /* @__PURE__ */ jsx(TrafficRevenueDonut, { traffic, compact: true }) })
-  ] });
-}
-function AtlasKpiCard({
+function AtlasKpiCard$2({
   label,
   value,
   helper,
   accent
 }) {
-  const Icon = KPI_ICONS[accent];
+  const Icon = KPI_ICONS$2[accent];
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-[112px] min-w-0 flex-col rounded-xl border border-ui-border-base/80 bg-ui-bg-subtle/25 p-4 shadow-sm", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
       /* @__PURE__ */ jsx(Text, { className: "min-w-0 flex-1 text-left text-xs font-medium leading-snug text-ui-fg-base", children: label }),
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${KPI_ICON_BG[accent]}`,
+          className: `flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${KPI_ICON_BG$2[accent]}`,
           "aria-hidden": true,
           children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-ui-fg-base" })
         }
@@ -475,11 +483,11 @@ const STATUS_BAR_COLORS = {
   orders: "#38BDF8",
   revenue: "#D946EF"
 };
-const CHART_AXIS_TICK = { fontSize: 10, fill: "#e5e7eb" };
-const CHART_AXIS_TICK_SM = { fontSize: 9, fill: "#e5e7eb" };
-const CHART_AXIS_LINE = "#94a3b8";
-const SELECT_CLASS_NAME = "h-9 min-w-[132px] cursor-pointer appearance-none rounded-full border border-ui-border-base bg-ui-bg-base py-1.5 pl-3 pr-8 text-xs text-ui-fg-base outline-none transition focus:ring-2 focus:ring-ui-fg-interactive";
-function EmptyAnalyticsPanel({
+const CHART_AXIS_TICK$2 = { fontSize: 10, fill: "#e5e7eb" };
+const CHART_AXIS_TICK_SM$1 = { fontSize: 9, fill: "#e5e7eb" };
+const CHART_AXIS_LINE$2 = "#94a3b8";
+const SELECT_CLASS_NAME$2 = "h-9 min-w-[132px] cursor-pointer appearance-none rounded border border-ui-border-base bg-ui-bg-base py-1.5 pl-3 pr-8 text-xs text-ui-fg-base outline-none transition focus:ring-2 focus:ring-ui-fg-interactive";
+function EmptyAnalyticsPanel$1({
   title,
   description
 }) {
@@ -489,7 +497,7 @@ function EmptyAnalyticsPanel({
   ] });
 }
 function OrdersDashboard() {
-  var _a, _b, _c, _d;
+  var _a, _b, _c;
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -733,7 +741,7 @@ function OrdersDashboard() {
       const pctDeliveredOfShipped = shipped > 0 ? delivered / shipped * 100 : 0;
       return {
         date: d.date,
-        label: d.label ?? formatChartLabel(d.date),
+        label: d.label ?? formatChartLabel$2(d.date),
         placed,
         not_cancelled: notCancelled,
         shipped,
@@ -748,17 +756,16 @@ function OrdersDashboard() {
     () => (ordersInsights == null ? void 0 : ordersInsights.traffic.reduce((sum, t) => sum + (t.revenue || 0), 0)) ?? 0,
     [ordersInsights]
   );
-  const insightsRangeLabel = ((_b = OVER_TIME_PERIODS.find((p) => p.value === overTimePeriod)) == null ? void 0 : _b.label) ?? "One week";
   const quickPulseMetrics = [
     {
       label: "Range revenue",
-      value: formatCompactCurrency(trendRevenueTotal),
+      value: formatCompactCurrency$1(trendRevenueTotal),
       helper: selectedSummaryPeriod,
       accentClassName: "border-emerald-400/25 bg-emerald-500/5"
     },
     {
       label: "Range orders",
-      value: formatShortNumber(trendOrdersTotal),
+      value: formatShortNumber$1(trendOrdersTotal),
       helper: "Current trend window",
       accentClassName: "border-sky-400/25 bg-sky-500/5"
     },
@@ -770,8 +777,8 @@ function OrdersDashboard() {
     },
     {
       label: "Peak revenue day",
-      value: peakRevenuePoint ? formatCompactCurrency(peakRevenuePoint.total_revenue) : "—",
-      helper: (peakRevenuePoint == null ? void 0 : peakRevenuePoint.label) ?? formatChartLabel(peakRevenuePoint == null ? void 0 : peakRevenuePoint.date),
+      value: peakRevenuePoint ? formatCompactCurrency$1(peakRevenuePoint.total_revenue) : "—",
+      helper: (peakRevenuePoint == null ? void 0 : peakRevenuePoint.label) ?? formatChartLabel$2(peakRevenuePoint == null ? void 0 : peakRevenuePoint.date),
       accentClassName: "border-amber-400/25 bg-amber-500/5"
     }
   ];
@@ -814,7 +821,7 @@ function OrdersDashboard() {
                 id: "analytics-period",
                 value: filter,
                 onChange: (e) => setFilter(e.target.value),
-                className: SELECT_CLASS_NAME,
+                className: SELECT_CLASS_NAME$2,
                 children: SUMMARY_PERIODS$1.map((p) => /* @__PURE__ */ jsx("option", { value: p.value, children: p.label }, p.value))
               }
             )
@@ -835,28 +842,16 @@ function OrdersDashboard() {
     /* @__PURE__ */ jsxs("div", { className: "space-y-3 p-3 pt-0 md:p-4 md:pt-0", children: [
       /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
         /* @__PURE__ */ jsx("div", { className: "px-0.5", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.16em]", children: "Order overview" }) }),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsx(
-            TrafficSourcesOverviewCard,
-            {
-              traffic: (ordersInsights == null ? void 0 : ordersInsights.traffic) ?? [],
-              loading: insightsLoading,
-              error: insightsError,
-              totalRevenue: trafficTotalRevenue,
-              windowLabel: insightsRangeLabel
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 lg:grid-cols-4", children: primaryStats.map((stat) => /* @__PURE__ */ jsx(
-            AtlasKpiCard,
-            {
-              label: stat.label,
-              value: stat.value,
-              helper: stat.helper,
-              accent: stat.accent
-            },
-            stat.label
-          )) })
-        ] })
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 lg:grid-cols-4", children: primaryStats.map((stat) => /* @__PURE__ */ jsx(
+          AtlasKpiCard$2,
+          {
+            label: stat.label,
+            value: stat.value,
+            helper: stat.helper,
+            accent: stat.accent
+          },
+          stat.label
+        )) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "mt-3 grid grid-cols-12 gap-2 xl:items-start", children: [
         /* @__PURE__ */ jsx("div", { className: "col-span-12 xl:col-span-6", children: /* @__PURE__ */ jsx(
@@ -881,7 +876,7 @@ function OrdersDashboard() {
                   id: "over-time-period",
                   value: overTimePeriod,
                   onChange: (e) => setOverTimePeriod(e.target.value),
-                  className: SELECT_CLASS_NAME,
+                  className: SELECT_CLASS_NAME$2,
                   children: OVER_TIME_PERIODS.map((p) => /* @__PURE__ */ jsx("option", { value: p.value, children: p.label }, p.value))
                 }
               )
@@ -890,10 +885,10 @@ function OrdersDashboard() {
               /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-1.5 sm:grid-cols-3", children: [
                 /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
                   /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Window revenue" }),
-                  /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: formatCompactCurrency(trendRevenueTotal) }),
+                  /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: formatCompactCurrency$1(trendRevenueTotal) }),
                   /* @__PURE__ */ jsxs(Text, { className: "text-ui-fg-muted text-[10px]", children: [
                     "Avg/day ",
-                    formatCompactCurrency(trendAverageRevenue)
+                    formatCompactCurrency$1(trendAverageRevenue)
                   ] })
                 ] }) }),
                 /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
@@ -937,26 +932,27 @@ function OrdersDashboard() {
                             YAxis,
                             {
                               width: 36,
-                              tick: CHART_AXIS_TICK_SM,
-                              tickFormatter: (v) => formatCompactCurrency(Number(v))
+                              tick: CHART_AXIS_TICK_SM$1,
+                              tickFormatter: (v) => formatCompactCurrency$1(Number(v))
                             }
                           ),
                           /* @__PURE__ */ jsx(
                             Tooltip,
                             {
                               content: ({ active, payload, label }) => {
-                                var _a2, _b2, _c2, _d2;
+                                var _a2, _b2, _c2, _d;
                                 return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxs(
-                                  TooltipCard,
+                                  AnalyticsTooltipCard,
                                   {
+                                    variant: "compact",
                                     title: String(
-                                      isDailyOrderRow((_a2 = payload[0]) == null ? void 0 : _a2.payload) ? ((_b2 = payload[0]) == null ? void 0 : _b2.payload.label) ?? formatChartLabel(String(label)) : label
+                                      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__ */ jsxs("div", { children: [
                                         "This:",
                                         " ",
-                                        /* @__PURE__ */ jsx("strong", { children: formatCompactCurrency(
+                                        /* @__PURE__ */ jsx("strong", { children: formatCompactCurrency$1(
                                           Number(
                                             (_c2 = payload.find((p) => p.dataKey === "total_revenue")) == null ? void 0 : _c2.value
                                           ) || 0
@@ -965,9 +961,9 @@ function OrdersDashboard() {
                                       /* @__PURE__ */ jsxs("div", { children: [
                                         "Previous:",
                                         " ",
-                                        /* @__PURE__ */ jsx("strong", { children: formatCompactCurrency(
+                                        /* @__PURE__ */ jsx("strong", { children: formatCompactCurrency$1(
                                           Number(
-                                            (_d2 = payload.find((p) => p.dataKey === "prev_revenue")) == null ? void 0 : _d2.value
+                                            (_d = payload.find((p) => p.dataKey === "prev_revenue")) == null ? void 0 : _d.value
                                           ) || 0
                                         ) })
                                       ] })
@@ -1025,7 +1021,7 @@ function OrdersDashboard() {
                             YAxis,
                             {
                               width: 28,
-                              tick: CHART_AXIS_TICK_SM,
+                              tick: CHART_AXIS_TICK_SM$1,
                               allowDecimals: false
                             }
                           ),
@@ -1034,7 +1030,7 @@ function OrdersDashboard() {
                             {
                               content: ({ active, payload, label }) => {
                                 var _a2, _b2;
-                                return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxs(TooltipCard, { title: String(label), children: [
+                                return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxs(AnalyticsTooltipCard, { variant: "compact", title: String(label), children: [
                                   /* @__PURE__ */ jsxs("div", { children: [
                                     "This:",
                                     " ",
@@ -1105,8 +1101,8 @@ function OrdersDashboard() {
                             YAxis,
                             {
                               width: 36,
-                              tick: CHART_AXIS_TICK_SM,
-                              tickFormatter: (v) => formatCompactCurrency(Number(v))
+                              tick: CHART_AXIS_TICK_SM$1,
+                              tickFormatter: (v) => formatCompactCurrency$1(Number(v))
                             }
                           ),
                           /* @__PURE__ */ jsx(
@@ -1114,7 +1110,7 @@ function OrdersDashboard() {
                             {
                               content: ({ active, payload, label }) => {
                                 var _a2, _b2;
-                                return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxs(TooltipCard, { title: String(label), children: [
+                                return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxs(AnalyticsTooltipCard, { variant: "compact", title: String(label), children: [
                                   /* @__PURE__ */ jsxs("div", { children: [
                                     "This:",
                                     " ",
@@ -1185,26 +1181,26 @@ function OrdersDashboard() {
                           XAxis,
                           {
                             dataKey: "date",
-                            tick: CHART_AXIS_TICK,
+                            tick: CHART_AXIS_TICK$2,
                             tickLine: false,
                             axisLine: false,
                             tickFormatter: (value, index) => {
                               const row = dailyOrders[index];
-                              return (row == null ? void 0 : row.label) ?? formatChartLabel(value);
+                              return (row == null ? void 0 : row.label) ?? formatChartLabel$2(value);
                             }
                           }
                         ),
                         /* @__PURE__ */ jsx(
                           YAxis,
                           {
-                            tick: CHART_AXIS_TICK,
-                            tickFormatter: (v) => formatCompactCurrency(Number(v))
+                            tick: CHART_AXIS_TICK$2,
+                            tickFormatter: (v) => formatCompactCurrency$1(Number(v))
                           }
                         ),
                         /* @__PURE__ */ jsx(
                           Tooltip,
                           {
-                            content: ({ active, payload, label }) => active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsx(TooltipCard, { title: String(label), children: payload.map((p) => /* @__PURE__ */ jsxs("div", { children: [
+                            content: ({ active, payload, label }) => active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsx(AnalyticsTooltipCard, { variant: "compact", title: String(label), children: payload.map((p) => /* @__PURE__ */ jsxs("div", { children: [
                               p.name,
                               ":",
                               " ",
@@ -1260,7 +1256,7 @@ function OrdersDashboard() {
                   /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-1.5", children: [
                     /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
                       /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.16em]", children: "Trend overview" }),
-                      /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-sm font-semibold", children: ((_c = OVER_TIME_PERIODS.find((period) => period.value === overTimePeriod)) == null ? void 0 : _c.label) ?? "One week" })
+                      /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-sm font-semibold", children: ((_b = OVER_TIME_PERIODS.find((period) => period.value === overTimePeriod)) == null ? void 0 : _b.label) ?? "One week" })
                     ] }),
                     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-end gap-2 text-[10px] text-ui-fg-muted", children: [
                       /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
@@ -1317,12 +1313,12 @@ function OrdersDashboard() {
                           XAxis,
                           {
                             dataKey: "date",
-                            tick: CHART_AXIS_TICK,
+                            tick: CHART_AXIS_TICK$2,
                             tickLine: false,
                             axisLine: false,
                             tickFormatter: (value, index) => {
                               const row = dailyOrders[index];
-                              return (row == null ? void 0 : row.label) ?? formatChartLabel(value);
+                              return (row == null ? void 0 : row.label) ?? formatChartLabel$2(value);
                             }
                           }
                         ),
@@ -1331,7 +1327,7 @@ function OrdersDashboard() {
                           {
                             yAxisId: "orders",
                             width: 32,
-                            tick: CHART_AXIS_TICK,
+                            tick: CHART_AXIS_TICK$2,
                             tickLine: false,
                             axisLine: false,
                             allowDecimals: false,
@@ -1344,10 +1340,10 @@ function OrdersDashboard() {
                             yAxisId: "revenue",
                             orientation: "right",
                             width: 40,
-                            tick: CHART_AXIS_TICK,
+                            tick: CHART_AXIS_TICK$2,
                             tickLine: false,
                             axisLine: false,
-                            tickFormatter: (value) => formatCompactCurrency(Number(value) || 0)
+                            tickFormatter: (value) => formatCompactCurrency$1(Number(value) || 0)
                           }
                         ),
                         /* @__PURE__ */ jsx(
@@ -1486,7 +1482,7 @@ function OrdersDashboard() {
             {
               variant: "atlas",
               title: "Order → fulfillment funnel",
-              description: `Stages by order created date (UTC), same range as Revenue & orders (${((_d = OVER_TIME_PERIODS.find((p) => p.value === overTimePeriod)) == null ? void 0 : _d.label) ?? "period"}). Not storefront visitors.`,
+              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.`,
               children: overTimeLoading ? /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-[120px] items-center justify-center py-3", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) }) : overTimeError ? /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-[120px] items-center justify-center px-2 py-3", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger text-center text-xs", children: overTimeError }) }) }) : funnelTimeSeriesRows.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
                 /* @__PURE__ */ jsxs(AnalyticsChartSurface, { variant: "atlas", children: [
                   /* @__PURE__ */ jsx(Text, { className: "mb-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Stage counts (time series)" }),
@@ -1507,21 +1503,21 @@ function OrdersDashboard() {
                           XAxis,
                           {
                             dataKey: "date",
-                            tick: CHART_AXIS_TICK_SM,
-                            stroke: CHART_AXIS_LINE,
-                            tickLine: { stroke: CHART_AXIS_LINE },
+                            tick: CHART_AXIS_TICK_SM$1,
+                            stroke: CHART_AXIS_LINE$2,
+                            tickLine: { stroke: CHART_AXIS_LINE$2 },
                             tickFormatter: (value) => {
                               const row = dailyOrders.find((r) => r.date === value);
-                              return (row == null ? void 0 : row.label) ?? formatChartLabel(String(value));
+                              return (row == null ? void 0 : row.label) ?? formatChartLabel$2(String(value));
                             }
                           }
                         ),
                         /* @__PURE__ */ jsx(
                           YAxis,
                           {
-                            tick: CHART_AXIS_TICK_SM,
-                            stroke: CHART_AXIS_LINE,
-                            tickLine: { stroke: CHART_AXIS_LINE },
+                            tick: CHART_AXIS_TICK_SM$1,
+                            stroke: CHART_AXIS_LINE$2,
+                            tickLine: { stroke: CHART_AXIS_LINE$2 },
                             width: 28,
                             allowDecimals: false,
                             tickFormatter: (v) => Math.floor(Number(v) || 0).toLocaleString()
@@ -1533,9 +1529,10 @@ function OrdersDashboard() {
                             content: ({ active, payload, label }) => {
                               var _a2;
                               return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsx(
-                                TooltipCard,
+                                AnalyticsTooltipCard,
                                 {
-                                  title: typeof label === "string" ? ((_a2 = dailyOrders.find((r) => r.date === label)) == null ? void 0 : _a2.label) ?? formatChartLabel(label) : String(label),
+                                  variant: "compact",
+                                  title: typeof label === "string" ? ((_a2 = dailyOrders.find((r) => r.date === label)) == null ? void 0 : _a2.label) ?? formatChartLabel$2(label) : String(label),
                                   children: payload.map((p) => /* @__PURE__ */ jsxs("div", { children: [
                                     String(p.name),
                                     ":",
@@ -1622,12 +1619,12 @@ function OrdersDashboard() {
                           XAxis,
                           {
                             dataKey: "date",
-                            tick: CHART_AXIS_TICK_SM,
-                            stroke: CHART_AXIS_LINE,
-                            tickLine: { stroke: CHART_AXIS_LINE },
+                            tick: CHART_AXIS_TICK_SM$1,
+                            stroke: CHART_AXIS_LINE$2,
+                            tickLine: { stroke: CHART_AXIS_LINE$2 },
                             tickFormatter: (value) => {
                               const row = dailyOrders.find((r) => r.date === value);
-                              return (row == null ? void 0 : row.label) ?? formatChartLabel(String(value));
+                              return (row == null ? void 0 : row.label) ?? formatChartLabel$2(String(value));
                             }
                           }
                         ),
@@ -1635,9 +1632,9 @@ function OrdersDashboard() {
                           YAxis,
                           {
                             domain: [0, 100],
-                            tick: CHART_AXIS_TICK_SM,
-                            stroke: CHART_AXIS_LINE,
-                            tickLine: { stroke: CHART_AXIS_LINE },
+                            tick: CHART_AXIS_TICK_SM$1,
+                            stroke: CHART_AXIS_LINE$2,
+                            tickLine: { stroke: CHART_AXIS_LINE$2 },
                             width: 36,
                             tickFormatter: (v) => `${Math.round(Number(v) || 0)}%`
                           }
@@ -1648,9 +1645,10 @@ function OrdersDashboard() {
                             content: ({ active, payload, label }) => {
                               var _a2;
                               return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsx(
-                                TooltipCard,
+                                AnalyticsTooltipCard,
                                 {
-                                  title: typeof label === "string" ? ((_a2 = dailyOrders.find((r) => r.date === label)) == null ? void 0 : _a2.label) ?? formatChartLabel(label) : String(label),
+                                  variant: "compact",
+                                  title: typeof label === "string" ? ((_a2 = dailyOrders.find((r) => r.date === label)) == null ? void 0 : _a2.label) ?? formatChartLabel$2(label) : String(label),
                                   children: payload.map((p) => /* @__PURE__ */ jsxs("div", { children: [
                                     String(p.name),
                                     ":",
@@ -1708,7 +1706,7 @@ function OrdersDashboard() {
                   ) }) })
                 ] })
               ] }) : /* @__PURE__ */ jsx(
-                EmptyAnalyticsPanel,
+                EmptyAnalyticsPanel$1,
                 {
                   title: "No funnel data",
                   description: "No orders in this range to chart."
@@ -1723,7 +1721,7 @@ function OrdersDashboard() {
               title: "Order revenue (attribution)",
               description: "All revenue is from captured Medusa orders until storefront channel data exists.",
               children: insightsLoading ? /* @__PURE__ */ jsx("div", { className: "flex min-h-[100px] items-center justify-center py-3", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) : insightsError ? /* @__PURE__ */ jsx("div", { className: "flex min-h-[100px] items-center justify-center px-2 py-3", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger text-center text-xs", children: insightsError }) }) : ordersInsights && ordersInsights.traffic.length > 0 ? trafficTotalRevenue <= 0 ? /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted px-0.5 text-center text-[11px] leading-snug", children: "No recorded revenue in this window (totals may be zero until orders are paid or finalized)." }) : /* @__PURE__ */ jsx(TrafficRevenueDonut, { traffic: ordersInsights.traffic }) : /* @__PURE__ */ jsx(
-                EmptyAnalyticsPanel,
+                EmptyAnalyticsPanel$1,
                 {
                   title: "No order revenue",
                   description: "No orders in this window."
@@ -1772,13 +1770,13 @@ function OrdersDashboard() {
                     XAxis,
                     {
                       dataKey: "date",
-                      tick: CHART_AXIS_TICK,
+                      tick: CHART_AXIS_TICK$2,
                       tickLine: false,
                       axisLine: false,
                       tickFormatter: (value) => {
                         const dateStr = typeof value === "string" ? value : String(value);
                         const row = dailyOrders.find((d) => d.date === dateStr);
-                        return (row == null ? void 0 : row.label) ?? formatChartLabel(dateStr);
+                        return (row == null ? void 0 : row.label) ?? formatChartLabel$2(dateStr);
                       }
                     }
                   ),
@@ -1786,7 +1784,7 @@ function OrdersDashboard() {
                     YAxis,
                     {
                       width: 28,
-                      tick: CHART_AXIS_TICK,
+                      tick: CHART_AXIS_TICK$2,
                       tickLine: false,
                       axisLine: false,
                       allowDecimals: false,
@@ -1897,17 +1895,17 @@ function OrdersDashboard() {
                       XAxis,
                       {
                         dataKey: "date",
-                        tick: CHART_AXIS_TICK,
+                        tick: CHART_AXIS_TICK$2,
                         tickLine: false,
                         axisLine: false,
-                        tickFormatter: formatChartLabel
+                        tickFormatter: formatChartLabel$2
                       }
                     ),
                     /* @__PURE__ */ jsx(
                       YAxis,
                       {
                         width: 28,
-                        tick: CHART_AXIS_TICK,
+                        tick: CHART_AXIS_TICK$2,
                         tickLine: false,
                         axisLine: false,
                         allowDecimals: false,
@@ -1996,15 +1994,15 @@ function OrdersDashboard() {
                     XAxis,
                     {
                       dataKey: "label",
-                      tick: CHART_AXIS_TICK
+                      tick: CHART_AXIS_TICK$2
                     }
                   ),
                   /* @__PURE__ */ jsx(
                     YAxis,
                     {
                       width: 40,
-                      tick: CHART_AXIS_TICK_SM,
-                      tickFormatter: (v) => formatCompactCurrency(Number(v))
+                      tick: CHART_AXIS_TICK_SM$1,
+                      tickFormatter: (v) => formatCompactCurrency$1(Number(v))
                     }
                   ),
                   /* @__PURE__ */ jsx(
@@ -2012,7 +2010,7 @@ function OrdersDashboard() {
                     {
                       content: ({ active, payload, label }) => {
                         var _a2, _b2;
-                        return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxs(TooltipCard, { title: String(label), children: [
+                        return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxs(AnalyticsTooltipCard, { variant: "compact", title: String(label), children: [
                           /* @__PURE__ */ jsxs("div", { children: [
                             "Revenue:",
                             " ",
@@ -2039,7 +2037,7 @@ function OrdersDashboard() {
                 ]
               }
             ) }) }) }) : /* @__PURE__ */ jsx(
-              EmptyAnalyticsPanel,
+              EmptyAnalyticsPanel$1,
               {
                 title: "No weekday data",
                 description: "No orders in this window."
@@ -2080,7 +2078,7 @@ function OrdersDashboard() {
                   {
                     content: ({ active, payload }) => {
                       var _a2, _b2;
-                      return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsx(TooltipCard, { title: String(((_a2 = payload[0]) == null ? void 0 : _a2.name) ?? ""), children: /* @__PURE__ */ jsxs("div", { children: [
+                      return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsx(AnalyticsTooltipCard, { variant: "compact", title: String(((_a2 = payload[0]) == null ? void 0 : _a2.name) ?? ""), children: /* @__PURE__ */ jsxs("div", { children: [
                         "Count:",
                         " ",
                         /* @__PURE__ */ jsx("strong", { children: Math.floor(
@@ -2102,7 +2100,7 @@ function OrdersDashboard() {
               ] }) }) }),
               (ordersInsights == null ? void 0 : ordersInsights.drafts.available) === false ? /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted mt-0.5 px-0.5 text-[10px] leading-snug", children: "Draft totals need draft_order remote query access." }) : null
             ] }) : /* @__PURE__ */ jsx(
-              EmptyAnalyticsPanel,
+              EmptyAnalyticsPanel$1,
               {
                 title: "Nothing to compare",
                 description: "No placed orders and no draft rows in this snapshot."
@@ -2135,14 +2133,14 @@ function OrdersDashboard() {
                     {
                       dataKey: "label",
                       interval: 3,
-                      tick: CHART_AXIS_TICK_SM
+                      tick: CHART_AXIS_TICK_SM$1
                     }
                   ),
                   /* @__PURE__ */ jsx(
                     YAxis,
                     {
                       width: 28,
-                      tick: CHART_AXIS_TICK,
+                      tick: CHART_AXIS_TICK$2,
                       allowDecimals: false
                     }
                   ),
@@ -2151,7 +2149,7 @@ function OrdersDashboard() {
                     {
                       content: ({ active, payload, label }) => {
                         var _a2, _b2;
-                        return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxs(TooltipCard, { title: String(label), children: [
+                        return active && (payload == null ? void 0 : payload.length) ? /* @__PURE__ */ jsxs(AnalyticsTooltipCard, { variant: "compact", title: String(label), children: [
                           /* @__PURE__ */ jsxs("div", { children: [
                             "Orders:",
                             " ",
@@ -2178,7 +2176,7 @@ function OrdersDashboard() {
                 ]
               }
             ) }) }) }) : /* @__PURE__ */ jsx(
-              EmptyAnalyticsPanel,
+              EmptyAnalyticsPanel$1,
               {
                 title: "No hourly data",
                 description: "No orders in this window."
@@ -2190,6 +2188,41 @@ function OrdersDashboard() {
     ] })
   ] }) });
 }
+const KPI_ICON_BG$1 = {
+  green: "bg-emerald-500/20",
+  blue: "bg-sky-500/20",
+  purple: "bg-violet-500/20",
+  amber: "bg-amber-500/20"
+};
+const KPI_ICONS$1 = {
+  green: UsersSolid,
+  blue: User,
+  purple: UserGroup,
+  amber: Trash
+};
+function AtlasKpiCard$1({
+  label,
+  value,
+  helper,
+  accent
+}) {
+  const Icon = KPI_ICONS$1[accent];
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-[88px] min-w-0 flex-col rounded-xl border border-ui-border-base/80 bg-ui-bg-subtle/25 p-3 shadow-sm", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+      /* @__PURE__ */ jsx(Text, { className: "min-w-0 flex-1 text-left text-xs font-medium leading-snug text-ui-fg-base", children: label }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `flex h-7 w-7 shrink-0 items-center justify-center rounded-lg ${KPI_ICON_BG$1[accent]}`,
+          "aria-hidden": true,
+          children: /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 text-ui-fg-base" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-2 text-lg font-semibold tabular-nums tracking-tight text-ui-fg-base sm:text-xl", children: value }),
+    helper ? /* @__PURE__ */ jsx(Text, { className: "mt-2 text-[11px] leading-snug text-ui-fg-muted", children: helper }) : null
+  ] });
+}
 function CustomersOverTimeTooltip({
   active,
   payload,
@@ -2201,32 +2234,16 @@ function CustomersOverTimeTooltip({
   const displayLabel = (row == null ? void 0 : row.label) ?? (label ? new Date(label).toLocaleDateString() : label);
   const registered = Math.floor(((_b = payload.find((p) => p.name === "Registered")) == null ? void 0 : _b.value) ?? 0);
   const guest = Math.floor(((_c = payload.find((p) => p.name === "Guest")) == null ? void 0 : _c.value) ?? 0);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        backgroundColor: "rgb(254, 254, 254)",
-        color: "#111827",
-        border: "1px solid rgb(229, 231, 235)",
-        borderRadius: "8px",
-        padding: "12px 16px",
-        boxShadow: "0 4px 14px rgba(0, 0, 0, 0.08)",
-        fontSize: "14px",
-        lineHeight: 1.5
-      },
-      children: [
-        /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, marginBottom: "6px", color: "#111827" }, children: displayLabel }),
-        /* @__PURE__ */ jsxs("div", { style: { color: "#374151" }, children: [
-          "Registered: ",
-          /* @__PURE__ */ jsx("strong", { style: { color: "#1f2937" }, children: registered })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { style: { color: "#374151" }, children: [
-          "Guest: ",
-          /* @__PURE__ */ jsx("strong", { style: { color: "#1f2937" }, children: guest })
-        ] })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(AnalyticsTooltipCard, { title: String(displayLabel ?? ""), children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      "Registered: ",
+      /* @__PURE__ */ jsx("strong", { children: registered.toLocaleString() })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      "Guest: ",
+      /* @__PURE__ */ jsx("strong", { children: guest.toLocaleString() })
+    ] })
+  ] });
 }
 function MixPieTooltip({
   active,
@@ -2234,10 +2251,10 @@ function MixPieTooltip({
 }) {
   if (!active || !(payload == null ? void 0 : payload.length)) return null;
   const row = payload[0];
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-ui-border-base bg-ui-bg-base px-3 py-2 text-sm shadow-md", children: [
-    /* @__PURE__ */ jsx(Text, { className: "font-medium text-ui-fg-base", children: row.name }),
-    /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted", children: Math.floor(Number(row.value) || 0).toLocaleString() })
-  ] });
+  return /* @__PURE__ */ jsx(AnalyticsTooltipCard, { variant: "compact", title: String(row.name ?? ""), children: /* @__PURE__ */ jsxs("div", { children: [
+    "Count: ",
+    /* @__PURE__ */ jsx("strong", { children: Math.floor(Number(row.value) || 0).toLocaleString() })
+  ] }) });
 }
 const COUNT_DAY_PRESETS = [
   { value: "all", label: "All time" },
@@ -2253,7 +2270,17 @@ const GRAPH_PERIODS$1 = [
 ];
 const REGISTERED_COLOR = "var(--medusa-color-ui-fg-interactive)";
 const GUEST_COLOR = "#6B7280";
+const CHART_AXIS_TICK$1 = { fontSize: 10, fill: "#e5e7eb" };
+const CHART_AXIS_LINE$1 = "#94a3b8";
+const SELECT_CLASS_NAME$1 = "h-9 w-full min-w-[8rem] max-w-full cursor-pointer appearance-none rounded border border-ui-border-base bg-ui-bg-base py-1.5 pl-3 pr-8 text-xs text-ui-fg-base outline-none transition focus:ring-2 focus:ring-ui-fg-interactive sm:w-auto sm:min-w-[132px] sm:max-w-[220px]";
+function formatChartLabel$1(value) {
+  if (!value) return "";
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime())) return value;
+  return `${parsed.getUTCMonth() + 1}/${parsed.getUTCDate()}`;
+}
 function CustomersDashboard() {
+  var _a, _b;
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -2323,6 +2350,7 @@ function CustomersDashboard() {
       cancelled = true;
     };
   }, [countDays]);
+  const selectedCountPeriodLabel = ((_a = COUNT_DAY_PRESETS.find((p) => p.value === countDays)) == null ? void 0 : _a.label) ?? "All time";
   const guestRegisteredPieData = useMemo(() => {
     const g = Math.max(0, Math.floor((data == null ? void 0 : data.guestCount) ?? 0));
     const r = Math.max(0, Math.floor((data == null ? void 0 : data.registeredCount) ?? 0));
@@ -2331,11 +2359,50 @@ function CustomersDashboard() {
       { name: "Registered", value: r, key: "registered" }
     ].filter((s) => s.value > 0);
   }, [data]);
+  const seriesWindowTotals = useMemo(() => {
+    let registered = 0;
+    let guest = 0;
+    for (const row of series) {
+      registered += Math.max(0, Math.floor(row.registered_count));
+      guest += Math.max(0, Math.floor(row.guest_count));
+    }
+    return {
+      registered,
+      guest,
+      points: series.length
+    };
+  }, [series]);
+  const primaryStats = data ? [
+    {
+      label: "Guest customers",
+      value: Math.floor(data.guestCount).toLocaleString(),
+      helper: selectedCountPeriodLabel,
+      accent: "blue"
+    },
+    {
+      label: "Registered customers",
+      value: Math.floor(data.registeredCount).toLocaleString(),
+      helper: selectedCountPeriodLabel,
+      accent: "purple"
+    },
+    {
+      label: "Overall customers",
+      value: Math.floor(data.totalCount).toLocaleString(),
+      helper: "Guest + registered",
+      accent: "green"
+    },
+    {
+      label: "Deleted accounts",
+      value: (data.deletedAccountsCount ?? 0).toLocaleString(),
+      helper: "Removed profiles",
+      accent: "amber"
+    }
+  ] : [];
   if (loading) {
     return /* @__PURE__ */ jsx(
       "div",
       {
-        className: "flex items-center justify-center min-h-[320px]",
+        className: "flex min-h-[200px] items-center justify-center",
         role: "status",
         "aria-label": "Loading analytics",
         children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted", children: "Loading…" })
@@ -2345,19 +2412,22 @@ function CustomersDashboard() {
   if (error || !data) {
     return /* @__PURE__ */ jsx(Container, { className: "p-6", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger", children: error ?? "Failed to load analytics" }) });
   }
-  return /* @__PURE__ */ jsxs(AnalyticsDashboardShell, { children: [
+  return /* @__PURE__ */ jsx(AnalyticsDashboardShell, { className: "w-full min-w-0 max-w-full", children: /* @__PURE__ */ jsxs("div", { className: "w-full min-w-0 max-w-full overflow-hidden rounded-2xl border border-ui-border-base/80 bg-ui-bg-base shadow-sm", children: [
     /* @__PURE__ */ jsx(
       AnalyticsDashboardHeader,
       {
+        variant: "premium",
+        appearance: "inset",
+        actionsBare: true,
         title: "Customers",
-        description: "Keep customer acquisition and account mix compact, readable, and aligned with the rest of analytics.",
+        description: "Acquisition mix, repeat behavior, and signups over time — aligned with Orders and Products analytics.",
         actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
             /* @__PURE__ */ jsx(
               Label,
               {
                 htmlFor: "customers-count-period",
-                className: "text-ui-fg-muted text-sm",
+                className: "shrink-0 text-ui-fg-muted text-xs font-medium",
                 children: "Period"
               }
             ),
@@ -2367,214 +2437,245 @@ function CustomersDashboard() {
                 id: "customers-count-period",
                 value: countDays,
                 onChange: (e) => setCountDays(e.target.value),
-                className: "h-9 rounded-md border border-ui-border-base bg-transparent px-3 text-sm text-ui-fg-base outline-none transition focus:ring-2 focus:ring-ui-fg-interactive",
+                className: SELECT_CLASS_NAME$1,
                 children: COUNT_DAY_PRESETS.map((p) => /* @__PURE__ */ jsx("option", { value: p.value, children: p.label }, p.value))
               }
             )
           ] }),
-          countDays !== "all" && /* @__PURE__ */ jsx(
+          countDays !== "all" ? /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               onClick: () => setCountDays("all"),
-              className: "text-xs text-ui-fg-muted hover:text-ui-fg-base transition-colors",
+              className: "text-xs text-ui-fg-muted transition-colors hover:text-ui-fg-base",
               "aria-label": "Show all customers (clear filter)",
-              children: "Clear filter"
+              children: "Clear period"
             }
-          )
+          ) : null
         ] })
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4", children: [
-      /* @__PURE__ */ jsx(
-        AnalyticsStatCard,
-        {
-          label: "Guest customers",
-          value: Math.floor(data.guestCount).toLocaleString()
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        AnalyticsStatCard,
-        {
-          label: "Registered customers",
-          value: Math.floor(data.registeredCount).toLocaleString()
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        AnalyticsStatCard,
-        {
-          label: "Overall customers",
-          value: Math.floor(data.totalCount).toLocaleString()
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        AnalyticsStatCard,
-        {
-          label: "Deleted accounts",
-          value: (data.deletedAccountsCount ?? 0).toLocaleString()
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2 p-2 pt-0 sm:p-3 sm:pt-0 md:p-4 md:pt-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-0.5", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.16em]", children: "Customer overview" }) }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 lg:grid-cols-4", children: primaryStats.map((stat) => /* @__PURE__ */ jsx(
+          AtlasKpiCard$1,
+          {
+            label: stat.label,
+            value: stat.value,
+            helper: stat.helper,
+            accent: stat.accent
+          },
+          stat.label
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-2 grid grid-cols-12 gap-2 lg:items-stretch", children: [
+        /* @__PURE__ */ jsx("div", { className: "col-span-12 flex min-h-0 min-w-0 lg:col-span-5", children: /* @__PURE__ */ jsx(
+          AnalyticsSection,
+          {
+            variant: "atlas",
+            className: "flex min-h-0 w-full flex-col",
+            title: "Guest vs registered",
+            description: "Mix for the selected period (same filter as overview).",
+            children: /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx("div", { className: "h-[min(168px,22vh)] min-h-[140px] w-full sm:h-[min(176px,24vh)]", children: guestRegisteredPieData.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center px-2", children: /* @__PURE__ */ jsx(Text, { className: "text-center text-ui-fg-muted text-[11px] leading-snug", children: "No guest or registered customers in this range." }) }) : /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart, { margin: { top: 2, right: 2, left: 2, bottom: 2 }, children: [
+              /* @__PURE__ */ jsx(
+                Pie,
+                {
+                  data: guestRegisteredPieData,
+                  dataKey: "value",
+                  nameKey: "name",
+                  cx: "50%",
+                  cy: "48%",
+                  innerRadius: 34,
+                  outerRadius: 54,
+                  paddingAngle: 2,
+                  children: guestRegisteredPieData.map((entry) => /* @__PURE__ */ jsx(
+                    Cell,
+                    {
+                      fill: entry.key === "guest" ? GUEST_COLOR : REGISTERED_COLOR
+                    },
+                    entry.key
+                  ))
+                }
+              ),
+              /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(MixPieTooltip, {}) }),
+              /* @__PURE__ */ jsx(
+                Legend,
+                {
+                  wrapperStyle: { fontSize: 9, paddingTop: 0 },
+                  verticalAlign: "bottom",
+                  height: 22,
+                  iconType: "circle"
+                }
+              )
+            ] }) }) }) })
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "col-span-12 flex min-h-0 min-w-0 lg:col-span-7", children: /* @__PURE__ */ jsx(
+          AnalyticsSection,
+          {
+            variant: "atlas",
+            className: "flex min-h-0 w-full flex-col",
+            title: "Repeat purchases",
+            description: "Orders with a customer_id in the same window (guest checkouts excluded from rate).",
+            children: /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col gap-1.5", children: repeatLoading ? /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", className: "flex flex-1 items-center justify-center py-6", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) : repeatError ? /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", className: "flex flex-1 items-center justify-center px-2 py-6", children: /* @__PURE__ */ jsx(Text, { className: "text-center text-ui-fg-danger text-xs", children: repeatError }) }) : repeatStats ? /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-1.5 sm:grid-cols-3", children: [
+              /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Repeat rate" }),
+                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: `${repeatStats.repeat_rate_percent.toFixed(1)}%` }),
+                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] leading-snug", children: repeatStats.window_days >= 365 ? "Approx. 12-month window" : `Last ${repeatStats.window_days} days` })
+              ] }) }),
+              /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "With orders" }),
+                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: repeatStats.customers_with_orders.toLocaleString() }),
+                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] leading-snug", children: "Customers in window" })
+              ] }) }),
+              /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Repeat (2+ orders)" }),
+                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: repeatStats.repeat_customers.toLocaleString() }),
+                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] leading-snug", children: "Multi-order customers" })
+              ] }) })
+            ] }) : /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", className: "flex flex-1 items-center justify-center py-6", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "No data." }) }) })
+          }
+        ) })
+      ] }),
       /* @__PURE__ */ jsx(
         AnalyticsSection,
         {
-          title: "Guest vs registered",
-          description: "Customer mix for the selected count period (same filter as the summary cards).",
-          children: /* @__PURE__ */ jsx(AnalyticsChartSurface, { children: /* @__PURE__ */ jsx("div", { className: "h-72", children: guestRegisteredPieData.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-sm", children: "No guest or registered customers in this range." }) }) : /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(PieChart, { children: [
+          variant: "atlas",
+          actionsBare: true,
+          title: "Customers over time",
+          description: "New registered vs guest activity for the chart range below.",
+          actions: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
             /* @__PURE__ */ jsx(
-              Pie,
+              Label,
               {
-                data: guestRegisteredPieData,
-                dataKey: "value",
-                nameKey: "name",
-                cx: "50%",
-                cy: "50%",
-                innerRadius: 52,
-                outerRadius: 88,
-                paddingAngle: 2,
-                children: guestRegisteredPieData.map((entry) => /* @__PURE__ */ jsx(
-                  Cell,
-                  {
-                    fill: entry.key === "guest" ? GUEST_COLOR : REGISTERED_COLOR
-                  },
-                  entry.key
-                ))
+                htmlFor: "customers-graph-period",
+                className: "shrink-0 text-ui-fg-muted text-xs font-medium",
+                children: "Range"
               }
             ),
-            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(MixPieTooltip, {}) }),
-            /* @__PURE__ */ jsx(Legend, { wrapperStyle: { fontSize: 12 }, iconType: "circle" })
-          ] }) }) }) })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        AnalyticsSection,
-        {
-          title: "Repeat purchases",
-          description: "Orders with a customer_id in the same window as the period filter (guest checkouts excluded from rate).",
-          children: /* @__PURE__ */ jsx(AnalyticsChartSurface, { children: repeatLoading ? /* @__PURE__ */ jsx("div", { className: "flex min-h-[200px] items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-sm", children: "Loading…" }) }) : repeatError ? /* @__PURE__ */ jsx("div", { className: "flex min-h-[200px] items-center justify-center px-2", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger text-center text-sm", children: repeatError }) }) : repeatStats ? /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-3", children: [
             /* @__PURE__ */ jsx(
-              AnalyticsStatCard,
+              "select",
               {
-                label: "Repeat rate",
-                value: `${repeatStats.repeat_rate_percent.toFixed(1)}%`,
-                helper: repeatStats.window_days >= 365 ? "Approx. 12-month window" : `Last ${repeatStats.window_days} days`
+                id: "customers-graph-period",
+                value: graphPeriod,
+                onChange: (e) => setGraphPeriod(e.target.value),
+                className: SELECT_CLASS_NAME$1,
+                children: GRAPH_PERIODS$1.map((p) => /* @__PURE__ */ jsx("option", { value: p.value, children: p.label }, p.value))
               }
-            ),
-            /* @__PURE__ */ jsx(
-              AnalyticsStatCard,
+            )
+          ] }),
+          children: /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-1.5 sm:grid-cols-3", children: [
+              /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Window registered (sum)" }),
+                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: seriesWindowTotals.registered.toLocaleString() }),
+                /* @__PURE__ */ jsxs(Text, { className: "text-ui-fg-muted text-[10px]", children: [
+                  "Across ",
+                  seriesWindowTotals.points,
+                  " buckets"
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Window guest (sum)" }),
+                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: seriesWindowTotals.guest.toLocaleString() }),
+                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px]", children: "Same range as chart" })
+              ] }) }),
+              /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Chart period" }),
+                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: ((_b = GRAPH_PERIODS$1.find((p) => p.value === graphPeriod)) == null ? void 0 : _b.label) ?? graphPeriod }),
+                /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] leading-snug", children: "Independent of summary period filter" })
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsx("div", { className: "h-[212px] w-full sm:h-[228px]", children: graphLoading ? /* @__PURE__ */ jsx(
+              "div",
               {
-                label: "Customers with orders",
-                value: repeatStats.customers_with_orders.toLocaleString()
+                className: "flex h-full items-center justify-center",
+                role: "status",
+                "aria-label": "Loading customers over time",
+                children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "Loading chart…" })
               }
-            ),
-            /* @__PURE__ */ jsx(
-              AnalyticsStatCard,
+            ) : graphError ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center px-2", children: /* @__PURE__ */ jsx(Text, { className: "text-center text-ui-fg-danger text-xs", children: graphError }) }) : /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+              LineChart,
               {
-                label: "Repeat customers (2+)",
-                value: repeatStats.repeat_customers.toLocaleString()
-              }
-            )
-          ] }) : /* @__PURE__ */ jsx("div", { className: "flex min-h-[200px] items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-sm", children: "No data." }) }) })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(
-      AnalyticsSection,
-      {
-        title: "Customers over time",
-        actions: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(
-            Label,
-            {
-              htmlFor: "customers-graph-period",
-              className: "text-ui-fg-muted text-sm",
-              children: "Range"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "select",
-            {
-              id: "customers-graph-period",
-              value: graphPeriod,
-              onChange: (e) => setGraphPeriod(e.target.value),
-              className: "h-9 rounded-md border border-ui-border-base bg-transparent px-3 text-sm text-ui-fg-base outline-none transition focus:ring-2 focus:ring-ui-fg-interactive",
-              children: GRAPH_PERIODS$1.map((p) => /* @__PURE__ */ jsx("option", { value: p.value, children: p.label }, p.value))
-            }
-          )
-        ] }),
-        children: /* @__PURE__ */ jsx(AnalyticsChartSurface, { children: /* @__PURE__ */ jsx("div", { className: "h-72", children: graphLoading ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "flex items-center justify-center h-full",
-            role: "status",
-            "aria-label": "Loading customers over time",
-            children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted", children: "Loading chart…" })
-          }
-        ) : graphError ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger", children: graphError }) }) : /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
-          LineChart,
-          {
-            data: series,
-            margin: { top: 8, right: 8, left: 8, bottom: 8 },
-            children: [
-              /* @__PURE__ */ jsx(
-                CartesianGrid,
-                {
-                  strokeDasharray: "3 3",
-                  className: "stroke-ui-border-base"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                XAxis,
-                {
-                  dataKey: "date",
-                  tick: { fontSize: 12 },
-                  tickFormatter: (v, index) => {
-                    const row = series[index];
-                    if (row == null ? void 0 : row.label) return row.label;
-                    const d = new Date(v);
-                    return `${d.getUTCMonth() + 1}/${d.getUTCDate()}`;
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                YAxis,
-                {
-                  tick: { fontSize: 12 },
-                  tickFormatter: (v) => String(Math.floor(Number(v))),
-                  allowDecimals: false
-                }
-              ),
-              /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomersOverTimeTooltip, {}) }),
-              /* @__PURE__ */ jsx(Legend, {}),
-              /* @__PURE__ */ jsx(
-                Line,
-                {
-                  type: "monotone",
-                  dataKey: "registered_count",
-                  name: "Registered",
-                  stroke: REGISTERED_COLOR,
-                  strokeWidth: 2,
-                  dot: { r: 3 }
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Line,
-                {
-                  type: "monotone",
-                  dataKey: "guest_count",
-                  name: "Guest",
-                  stroke: GUEST_COLOR,
-                  strokeWidth: 2,
-                  dot: { r: 3 }
-                }
-              )
-            ]
-          }
-        ) }) }) })
-      }
-    )
-  ] });
+                data: series,
+                margin: { top: 6, right: 8, left: 0, bottom: 4 },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    CartesianGrid,
+                    {
+                      strokeDasharray: "3 3",
+                      vertical: false,
+                      stroke: "rgba(148,163,184,0.12)"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    XAxis,
+                    {
+                      dataKey: "date",
+                      tick: CHART_AXIS_TICK$1,
+                      stroke: CHART_AXIS_LINE$1,
+                      tickLine: false,
+                      axisLine: { stroke: CHART_AXIS_LINE$1 },
+                      tickFormatter: (_v, index) => {
+                        var _a2;
+                        const row = series[index];
+                        if (row == null ? void 0 : row.label) return row.label;
+                        const d = (_a2 = series[index]) == null ? void 0 : _a2.date;
+                        return formatChartLabel$1(d);
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    YAxis,
+                    {
+                      width: 36,
+                      tick: CHART_AXIS_TICK$1,
+                      stroke: CHART_AXIS_LINE$1,
+                      tickLine: false,
+                      axisLine: { stroke: CHART_AXIS_LINE$1 },
+                      tickFormatter: (v) => String(Math.floor(Number(v))),
+                      allowDecimals: false
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomersOverTimeTooltip, {}) }),
+                  /* @__PURE__ */ jsx(
+                    Legend,
+                    {
+                      wrapperStyle: { fontSize: 10, paddingTop: 4 },
+                      iconType: "circle"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Line,
+                    {
+                      type: "monotone",
+                      dataKey: "registered_count",
+                      name: "Registered",
+                      stroke: REGISTERED_COLOR,
+                      strokeWidth: 2,
+                      dot: { r: 2 }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Line,
+                    {
+                      type: "monotone",
+                      dataKey: "guest_count",
+                      name: "Guest",
+                      stroke: GUEST_COLOR,
+                      strokeWidth: 2,
+                      dot: { r: 2 }
+                    }
+                  )
+                ]
+              }
+            ) }) }) })
+          ] })
+        }
+      )
+    ] })
+  ] }) });
 }
 const SUMMARY_PERIODS = [
   { value: "all", label: "All time" },
@@ -2594,10 +2695,32 @@ const TOP_SELLER_PERIODS = [
   { value: "year", label: "Year" },
   { value: "all", label: "All time" }
 ];
-const SALES_COLOR = "var(--medusa-color-ui-fg-interactive)";
-const VIEWS_COLOR = "#8B5CF6";
-const REVENUE_COLOR = "#F59E0B";
-const REVENUE_MUTED_COLOR = "#FCD34D";
+const PRODUCT_CHART_COLORS = {
+  units: "#38BDF8",
+  views: "#C084FC",
+  revenue: "#D946EF",
+  revenueMuted: "#94A3B8",
+  scatter: "#A855F7"
+};
+const KPI_ICON_BG = {
+  green: "bg-emerald-500/20",
+  blue: "bg-sky-500/20",
+  purple: "bg-violet-500/20",
+  amber: "bg-amber-500/20"
+};
+const KPI_ICONS = {
+  green: CurrencyDollar,
+  blue: ShoppingCart,
+  purple: Tag,
+  amber: CubeSolid
+};
+const CHART_AXIS_TICK = { fontSize: 10, fill: "#e5e7eb" };
+const CHART_AXIS_TICK_SM = { fontSize: 9, fill: "#e5e7eb" };
+const CHART_AXIS_LINE = "#94a3b8";
+const SELECT_CLASS_NAME = "h-9 w-full min-w-[8rem] max-w-full cursor-pointer appearance-none rounded border border-ui-border-base bg-ui-bg-base py-1.5 pl-3 pr-8 text-xs text-ui-fg-base outline-none transition focus:ring-2 focus:ring-ui-fg-interactive sm:w-auto sm:min-w-[132px] sm:max-w-[220px]";
+const LEADERBOARD_TABLE_CLASS = "min-w-[32rem] sm:min-w-[36rem] max-w-none";
+const OPPORTUNITIES_TABLE_CLASS = "min-w-[30rem] sm:min-w-[34rem] max-w-none";
+const TABLE_HEAD_CELL_NOWRAP = "whitespace-nowrap";
 function formatCurrency(value) {
   return new Intl.NumberFormat("en-IN", {
     style: "currency",
@@ -2606,12 +2729,39 @@ function formatCurrency(value) {
     maximumFractionDigits: 0
   }).format(value);
 }
+function formatCompactCurrency(value) {
+  return new Intl.NumberFormat("en-IN", {
+    style: "currency",
+    currency: "INR",
+    notation: "compact",
+    maximumFractionDigits: 1
+  }).format(value);
+}
+function formatChartLabel(value) {
+  if (!value) return "";
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime())) return value;
+  return `${parsed.getUTCMonth() + 1}/${parsed.getUTCDate()}`;
+}
 function formatRatio(value) {
   if (value === null || Number.isNaN(value)) return "N/A";
   return `${value.toFixed(2)}x`;
 }
-function truncateLabel(value, maxLength = 22) {
-  return value.length > maxLength ? `${value.slice(0, maxLength - 1)}…` : value;
+function formatShortNumber(value) {
+  return new Intl.NumberFormat("en-IN", {
+    notation: "compact",
+    maximumFractionDigits: value < 10 ? 1 : 0
+  }).format(value);
+}
+function topSellerPeriodToGraphPeriod(period) {
+  if (period === "month") return "one_month";
+  if (period === "year" || period === "all") return "one_year";
+  return "one_week";
+}
+function summaryDaysToGraphPeriod(days) {
+  if (days === "30") return "one_month";
+  if (days === "all" || days === "90") return "one_year";
+  return "one_week";
 }
 function buildAnalyticsUrl(path, params) {
   const search = new URLSearchParams();
@@ -2623,48 +2773,71 @@ function buildAnalyticsUrl(path, params) {
   const query = search.toString();
   return query ? `${path}?${query}` : path;
 }
+function isProductOverTimePoint(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const v = value;
+  return typeof v.date === "string" && typeof v.units_sold === "number" && typeof v.revenue === "number" && typeof v.views === "number";
+}
 function TrendTooltip({
   active,
   payload,
   label
 }) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e;
   if (!active || !(payload == null ? void 0 : payload.length)) return null;
-  const row = (_a = payload[0]) == null ? void 0 : _a.payload;
+  const row = isProductOverTimePoint((_a = payload[0]) == null ? void 0 : _a.payload) ? (_b = payload[0]) == null ? void 0 : _b.payload : void 0;
   const displayLabel = (row == null ? void 0 : row.label) ?? (label ? new Date(label).toLocaleDateString() : "");
-  const unitsSold = ((_b = payload.find((entry) => entry.name === "Units sold")) == null ? void 0 : _b.value) ?? 0;
-  const views = ((_c = payload.find((entry) => entry.name === "Views")) == null ? void 0 : _c.value) ?? 0;
-  const revenue = ((_d = payload.find((entry) => entry.name === "Revenue")) == null ? void 0 : _d.value) ?? 0;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        backgroundColor: "rgb(255, 255, 255)",
-        color: "#111827",
-        border: "1px solid rgb(229, 231, 235)",
-        borderRadius: "8px",
-        padding: "12px 16px",
-        boxShadow: "0 4px 14px rgba(0, 0, 0, 0.08)",
-        fontSize: "14px",
-        lineHeight: 1.5
-      },
-      children: [
-        /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, marginBottom: "6px" }, children: displayLabel }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          "Units sold: ",
-          /* @__PURE__ */ jsx("strong", { children: Math.floor(unitsSold).toLocaleString() })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          "Views: ",
-          /* @__PURE__ */ jsx("strong", { children: Math.floor(views).toLocaleString() })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          "Revenue: ",
-          /* @__PURE__ */ jsx("strong", { children: formatCurrency(Number(revenue)) })
-        ] })
-      ]
-    }
-  );
+  const unitsSold = ((_c = payload.find((entry) => entry.name === "Units sold")) == null ? void 0 : _c.value) ?? 0;
+  const views = ((_d = payload.find((entry) => entry.name === "Views")) == null ? void 0 : _d.value) ?? 0;
+  const revenue = ((_e = payload.find((entry) => entry.name === "Revenue")) == null ? void 0 : _e.value) ?? 0;
+  return /* @__PURE__ */ jsxs(AnalyticsTooltipCard, { title: displayLabel, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      "Units sold: ",
+      /* @__PURE__ */ jsx("strong", { children: Math.floor(Number(unitsSold)).toLocaleString() })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      "Views: ",
+      /* @__PURE__ */ jsx("strong", { children: Math.floor(Number(views)).toLocaleString() })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      "Revenue: ",
+      /* @__PURE__ */ jsx("strong", { children: formatCurrency(Number(revenue)) })
+    ] })
+  ] });
+}
+function MiniTrendTooltip({
+  active,
+  payload,
+  label,
+  productHeadline,
+  hideViewsRow,
+  hideUnitsRow,
+  hideRevenueRow
+}) {
+  var _a, _b, _c, _d, _e;
+  if (!active || !(payload == null ? void 0 : payload.length)) return null;
+  const row = isProductOverTimePoint((_a = payload[0]) == null ? void 0 : _a.payload) ? (_b = payload[0]) == null ? void 0 : _b.payload : void 0;
+  const labelKey = label !== void 0 && label !== null ? String(label) : "";
+  const displayLabel = (row == null ? void 0 : row.label) ?? (labelKey ? new Date(labelKey).toLocaleDateString() : "");
+  const unitsSold = ((_c = payload.find((entry) => entry.name === "Units sold")) == null ? void 0 : _c.value) ?? 0;
+  const views = ((_d = payload.find((entry) => entry.name === "Views")) == null ? void 0 : _d.value) ?? 0;
+  const revenue = ((_e = payload.find((entry) => entry.name === "Revenue")) == null ? void 0 : _e.value) ?? 0;
+  const title = productHeadline ?? displayLabel;
+  return /* @__PURE__ */ jsxs(AnalyticsTooltipCard, { variant: "compact", title, children: [
+    productHeadline ? /* @__PURE__ */ jsx("div", { className: "mb-1 text-[10px] leading-tight opacity-80", children: displayLabel }) : null,
+    !hideUnitsRow ? /* @__PURE__ */ jsxs("div", { children: [
+      "Units sold: ",
+      /* @__PURE__ */ jsx("strong", { children: Math.floor(Number(unitsSold)).toLocaleString() })
+    ] }) : null,
+    !hideViewsRow ? /* @__PURE__ */ jsxs("div", { children: [
+      "Views: ",
+      /* @__PURE__ */ jsx("strong", { children: Math.floor(Number(views)).toLocaleString() })
+    ] }) : null,
+    !hideRevenueRow ? /* @__PURE__ */ jsxs("div", { children: [
+      "Revenue: ",
+      /* @__PURE__ */ jsx("strong", { children: formatCurrency(Number(revenue)) })
+    ] }) : null
+  ] });
 }
 function ProductBarTooltip({
   active,
@@ -2678,39 +2851,52 @@ function ProductBarTooltip({
   const unitsSold = "units_sold" in row ? row.units_sold : 0;
   const totalViews = "total_views" in row ? row.total_views : 0;
   const revenue = "revenue" in row ? row.revenue : 0;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        backgroundColor: "rgb(255, 255, 255)",
-        color: "#111827",
-        border: "1px solid rgb(229, 231, 235)",
-        borderRadius: "8px",
-        padding: "12px 16px",
-        boxShadow: "0 4px 14px rgba(0, 0, 0, 0.08)",
-        fontSize: "14px",
-        lineHeight: 1.5
-      },
-      children: [
-        /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, marginBottom: "6px" }, children: row.product_title }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          "Units sold: ",
-          /* @__PURE__ */ jsx("strong", { children: Math.floor(unitsSold).toLocaleString() })
-        ] }),
-        showViews ? /* @__PURE__ */ jsxs("div", { children: [
-          "Views: ",
-          /* @__PURE__ */ jsx("strong", { children: Math.floor(totalViews).toLocaleString() })
-        ] }) : null,
-        /* @__PURE__ */ jsxs("div", { children: [
-          "Revenue: ",
-          /* @__PURE__ */ jsx("strong", { children: formatCurrency(Number(revenue)) })
-        ] })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(AnalyticsTooltipCard, { variant: "compact", title: row.product_title, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      "Units sold: ",
+      /* @__PURE__ */ jsx("strong", { children: Math.floor(unitsSold).toLocaleString() })
+    ] }),
+    showViews ? /* @__PURE__ */ jsxs("div", { children: [
+      "Views: ",
+      /* @__PURE__ */ jsx("strong", { children: Math.floor(totalViews).toLocaleString() })
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { children: [
+      "Revenue: ",
+      /* @__PURE__ */ jsx("strong", { children: formatCurrency(Number(revenue)) })
+    ] })
+  ] });
+}
+function AtlasKpiCard({
+  label,
+  value,
+  helper,
+  accent
+}) {
+  const Icon = KPI_ICONS[accent];
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-[88px] min-w-0 flex-col rounded-xl border border-ui-border-base/80 bg-ui-bg-subtle/25 p-3 shadow-sm", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+      /* @__PURE__ */ jsx(Text, { className: "min-w-0 flex-1 text-left text-xs font-medium leading-snug text-ui-fg-base", children: label }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `flex h-7 w-7 shrink-0 items-center justify-center rounded-lg ${KPI_ICON_BG[accent]}`,
+          "aria-hidden": true,
+          children: /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 text-ui-fg-base" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-2 text-lg font-semibold tabular-nums tracking-tight text-ui-fg-base sm:text-xl", children: value }),
+    helper ? /* @__PURE__ */ jsx(Text, { className: "mt-2 text-[11px] leading-snug text-ui-fg-muted", children: helper }) : null
+  ] });
+}
+function EmptyAnalyticsPanel({ title, description }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-[88px] flex-col gap-1.5 rounded-lg border border-dashed border-ui-border-base px-3 py-3", children: [
+    /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-xs font-semibold", children: title }),
+    /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[11px] leading-snug", children: description })
+  ] });
 }
 function ProductsDashboard() {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const [summaryDays, setSummaryDays] = useState("all");
   const [graphPeriod, setGraphPeriod] = useState("one_week");
   const [topSellerPeriod, setTopSellerPeriod] = useState("week");
@@ -2730,11 +2916,17 @@ function ProductsDashboard() {
   const [performance, setPerformance] = useState(null);
   const [performanceLoading, setPerformanceLoading] = useState(true);
   const [performanceError, setPerformanceError] = useState(null);
+  const [bestSellersTrend, setBestSellersTrend] = useState(null);
+  const [bestSellersTrendLoading, setBestSellersTrendLoading] = useState(true);
+  const [bestSellersTrendError, setBestSellersTrendError] = useState(null);
+  const [mostViewedTrend, setMostViewedTrend] = useState(null);
+  const [mostViewedTrendLoading, setMostViewedTrendLoading] = useState(true);
+  const [mostViewedTrendError, setMostViewedTrendError] = useState(null);
   useEffect(() => {
     let cancelled = false;
     setFiltersLoading(true);
     setFiltersError(null);
-    fetch("/admin/analytics/products-filters").then((res) => {
+    fetch("/admin/analytics/products-filters", { credentials: "include" }).then((res) => {
       if (!res.ok) throw new Error(res.statusText);
       return res.json();
     }).then((body) => {
@@ -2760,7 +2952,8 @@ function ProductsDashboard() {
       buildAnalyticsUrl("/admin/analytics/products-summary", {
         days: summaryDays,
         sales_channel_id: salesChannelId !== "all" ? salesChannelId : null
-      })
+      }),
+      { credentials: "include" }
     ).then((res) => {
       if (!res.ok) throw new Error(res.statusText);
       return res.json();
@@ -2785,7 +2978,8 @@ function ProductsDashboard() {
       buildAnalyticsUrl("/admin/analytics/products-over-time", {
         period: graphPeriod,
         sales_channel_id: salesChannelId !== "all" ? salesChannelId : null
-      })
+      }),
+      { credentials: "include" }
     ).then((res) => {
       if (!res.ok) throw new Error(res.statusText);
       return res.json();
@@ -2810,7 +3004,8 @@ function ProductsDashboard() {
       buildAnalyticsUrl("/admin/analytics/products-top-sellers", {
         period: topSellerPeriod,
         sales_channel_id: salesChannelId !== "all" ? salesChannelId : null
-      })
+      }),
+      { credentials: "include" }
     ).then((res) => {
       if (!res.ok) throw new Error(res.statusText);
       return res.json();
@@ -2827,6 +3022,126 @@ function ProductsDashboard() {
       cancelled = true;
     };
   }, [salesChannelId, topSellerPeriod]);
+  useEffect(() => {
+    var _a2, _b2;
+    let cancelled = false;
+    if (topSellersLoading) {
+      setBestSellersTrendLoading(true);
+      return () => {
+        cancelled = true;
+      };
+    }
+    if (topSellersError) {
+      setBestSellersTrendLoading(false);
+      setBestSellersTrendError(topSellersError);
+      setBestSellersTrend(null);
+      return () => {
+        cancelled = true;
+      };
+    }
+    const topProductId = (_b2 = (_a2 = topSellers == null ? void 0 : topSellers.products) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.product_id;
+    if (!topProductId) {
+      setBestSellersTrendLoading(false);
+      setBestSellersTrendError(null);
+      setBestSellersTrend({
+        series: [],
+        productViewsConnected: (topSellers == null ? void 0 : topSellers.productViewsConnected) ?? false,
+        product: null
+      });
+      return () => {
+        cancelled = true;
+      };
+    }
+    setBestSellersTrendLoading(true);
+    setBestSellersTrendError(null);
+    const period = topSellerPeriodToGraphPeriod(topSellerPeriod);
+    fetch(
+      buildAnalyticsUrl("/admin/analytics/products-over-time", {
+        period,
+        sales_channel_id: salesChannelId !== "all" ? salesChannelId : null,
+        product_id: topProductId
+      }),
+      { credentials: "include" }
+    ).then((res) => {
+      if (!res.ok) throw new Error(res.statusText);
+      return res.json();
+    }).then((body) => {
+      if (!cancelled) setBestSellersTrend(body);
+    }).catch((error) => {
+      if (!cancelled) {
+        setBestSellersTrendError(error instanceof Error ? error.message : String(error));
+      }
+    }).finally(() => {
+      if (!cancelled) setBestSellersTrendLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [salesChannelId, topSellerPeriod, topSellersLoading, topSellersError, topSellers]);
+  useEffect(() => {
+    var _a2, _b2;
+    let cancelled = false;
+    if (performanceLoading) {
+      setMostViewedTrendLoading(true);
+      return () => {
+        cancelled = true;
+      };
+    }
+    if (performanceError) {
+      setMostViewedTrendLoading(false);
+      setMostViewedTrendError(performanceError);
+      setMostViewedTrend(null);
+      return () => {
+        cancelled = true;
+      };
+    }
+    if (!(performance == null ? void 0 : performance.productViewsConnected)) {
+      setMostViewedTrendLoading(false);
+      setMostViewedTrendError(null);
+      setMostViewedTrend(null);
+      return () => {
+        cancelled = true;
+      };
+    }
+    const topViewedId = (_b2 = (_a2 = performance.topViewedProducts) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.product_id;
+    if (!topViewedId) {
+      setMostViewedTrendLoading(false);
+      setMostViewedTrendError(null);
+      setMostViewedTrend({
+        series: [],
+        productViewsConnected: true,
+        product: null
+      });
+      return () => {
+        cancelled = true;
+      };
+    }
+    setMostViewedTrendLoading(true);
+    setMostViewedTrendError(null);
+    const period = summaryDaysToGraphPeriod(summaryDays);
+    fetch(
+      buildAnalyticsUrl("/admin/analytics/products-over-time", {
+        period,
+        sales_channel_id: salesChannelId !== "all" ? salesChannelId : null,
+        product_id: topViewedId
+      }),
+      { credentials: "include" }
+    ).then((res) => {
+      if (!res.ok) throw new Error(res.statusText);
+      return res.json();
+    }).then((body) => {
+      if (!cancelled) setMostViewedTrend(body);
+    }).catch((error) => {
+      if (!cancelled) {
+        setMostViewedTrendError(error instanceof Error ? error.message : String(error));
+      }
+    }).finally(() => {
+      if (!cancelled) setMostViewedTrendLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [salesChannelId, summaryDays, performanceLoading, performanceError, performance]);
   useEffect(() => {
     let cancelled = false;
     setPerformanceLoading(true);
@@ -2835,7 +3150,8 @@ function ProductsDashboard() {
       buildAnalyticsUrl("/admin/analytics/products-performance", {
         days: summaryDays,
         sales_channel_id: salesChannelId !== "all" ? salesChannelId : null
-      })
+      }),
+      { credentials: "include" }
     ).then((res) => {
       if (!res.ok) throw new Error(res.statusText);
       return res.json();
@@ -2852,33 +3168,64 @@ function ProductsDashboard() {
       cancelled = true;
     };
   }, [salesChannelId, summaryDays]);
-  const topSellerChartData = useMemo(
-    () => ((topSellers == null ? void 0 : topSellers.products) ?? []).slice(0, 7).map((row) => {
-      var _a2, _b2;
-      return {
-        ...row,
-        isBestSeller: row.product_id === (((_b2 = (_a2 = topSellers == null ? void 0 : topSellers.products) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.product_id) ?? null),
-        product_title: truncateLabel(row.product_title, 24)
-      };
-    }).reverse(),
-    [topSellers]
-  );
-  const topViewedChartData = useMemo(
-    () => ((performance == null ? void 0 : performance.topViewedProducts) ?? []).slice(0, 7).map((row) => ({
-      ...row,
-      product_title: truncateLabel(row.product_title, 24)
-    })).reverse(),
-    [performance]
-  );
+  const series = (overTime == null ? void 0 : overTime.series) ?? [];
+  const trendTotals = useMemo(() => {
+    const totalUnits = series.reduce((s, p) => s + p.units_sold, 0);
+    const totalRevenue = series.reduce((s, p) => s + p.revenue, 0);
+    const totalViews = series.reduce((s, p) => s + p.views, 0);
+    const n = series.length || 1;
+    return {
+      totalUnits,
+      totalRevenue,
+      totalViews,
+      avgUnitsPerDay: totalUnits / n,
+      avgRevenuePerDay: totalRevenue / n,
+      avgViewsPerDay: totalViews / n
+    };
+  }, [series]);
+  const peakRevenuePoint = series.length > 0 ? series.reduce((peak, point) => point.revenue > peak.revenue ? point : peak) : null;
+  const viewsConnectedForPulse = ((summary == null ? void 0 : summary.productViewsConnected) ?? false) || (overTime == null ? void 0 : overTime.productViewsConnected) === true || (topSellers == null ? void 0 : topSellers.productViewsConnected) === true || (performance == null ? void 0 : performance.productViewsConnected) === true;
+  const 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 viewsVsUnitsScatterData = 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 quickPulseMetrics = [
+    {
+      label: "Range units",
+      value: formatShortNumber(trendTotals.totalUnits),
+      helper: selectedGraphPeriodLabel,
+      accentClassName: "border-sky-400/25 bg-sky-500/5"
+    },
+    {
+      label: "Range revenue",
+      value: formatCompactCurrency(trendTotals.totalRevenue),
+      helper: "Current chart window",
+      accentClassName: "border-fuchsia-400/25 bg-fuchsia-500/5"
+    },
+    {
+      label: "Avg/day views",
+      value: trendTotals.avgViewsPerDay.toFixed(0),
+      helper: viewsConnectedForPulse ? "Across chart range" : "Views need tracking",
+      accentClassName: "border-violet-400/25 bg-violet-500/5"
+    },
+    {
+      label: "Peak revenue day",
+      value: peakRevenuePoint ? formatCompactCurrency(peakRevenuePoint.revenue) : "—",
+      helper: (peakRevenuePoint == null ? void 0 : peakRevenuePoint.label) ?? formatChartLabel(peakRevenuePoint == null ? void 0 : peakRevenuePoint.date),
+      accentClassName: "border-amber-400/25 bg-amber-500/5"
+    }
+  ];
   if (summaryLoading) {
     return /* @__PURE__ */ jsx(
       "div",
       {
-        className: "flex items-center justify-center min-h-[320px]",
+        className: "flex min-h-[200px] items-center justify-center",
         role: "status",
         "aria-label": "Loading product analytics",
         children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted", children: "Loading…" })
@@ -2889,16 +3236,65 @@ function ProductsDashboard() {
     return /* @__PURE__ */ jsx(Container, { className: "p-6", children: /* @__PURE__ */ jsx(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" : ((_a = salesChannels.find((channel) => channel.id === salesChannelId)) == null ? void 0 : _a.name) ?? "Selected channel";
-  return /* @__PURE__ */ jsxs(AnalyticsDashboardShell, { children: [
-    /* @__PURE__ */ jsx(
-      AnalyticsDashboardHeader,
-      {
+  const selectedChannelLabel = salesChannelId === "all" ? "All channels" : ((_i = salesChannels.find((channel) => channel.id === salesChannelId)) == null ? void 0 : _i.name) ?? "Selected channel";
+  const primaryStats = [
+    {
+      label: "Units sold",
+      value: summary.unitsSold.toLocaleString(),
+      helper: selectedSummaryPeriod,
+      accent: "amber"
+    },
+    {
+      label: "Product revenue",
+      value: formatCurrency(summary.productRevenue),
+      helper: selectedSummaryPeriod,
+      accent: "green"
+    },
+    {
+      label: "Orders with products",
+      value: summary.ordersWithProducts.toLocaleString(),
+      helper: "Distinct orders",
+      accent: "blue"
+    },
+    {
+      label: "Active products sold",
+      value: summary.activeProductsSold.toLocaleString(),
+      helper: "Unique SKUs with sales",
+      accent: "purple"
+    },
+    {
+      label: "Product views",
+      value: summary.totalProductViews.toLocaleString(),
+      helper: viewsConnected ? "Tracked views" : "Tracking unavailable",
+      accent: "green"
+    },
+    {
+      label: "View / order ratio",
+      value: formatRatio(summary.viewToOrderRatio),
+      helper: viewsConnected ? "Views per product order" : "N/A without views",
+      accent: "blue"
+    }
+  ];
+  return /* @__PURE__ */ jsx(AnalyticsDashboardShell, { className: "w-full min-w-0 max-w-full", children: /* @__PURE__ */ jsxs("div", { className: "w-full min-w-0 max-w-full overflow-hidden rounded-2xl border border-ui-border-base/80 bg-ui-bg-base shadow-sm", children: [
+    /* @__PURE__ */ jsx(
+      AnalyticsDashboardHeader,
+      {
+        variant: "premium",
+        appearance: "inset",
+        actionsBare: true,
+        actionsClassName: "w-full justify-start lg:w-auto lg:justify-end",
         title: "Products",
-        description: "Track units sold, revenue, best sellers, and product visit behavior in a denser, easier-to-scan layout.",
-        actions: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end gap-2.5", children: [
-          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "products-channel-filter", className: "text-ui-fg-muted text-xs font-medium", children: "Channel" }),
+        description: "Units, revenue, best sellers, and visit behavior in a compact layout aligned with Orders analytics.",
+        actions: /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 flex-wrap items-center gap-x-3 gap-y-2 sm:flex-nowrap lg:gap-x-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 sm:flex-initial sm:flex-none", children: [
+            /* @__PURE__ */ jsx(
+              Label,
+              {
+                htmlFor: "products-channel-filter",
+                className: "shrink-0 whitespace-nowrap text-ui-fg-muted text-xs font-medium",
+                children: "Channel"
+              }
+            ),
             /* @__PURE__ */ jsxs(
               "select",
               {
@@ -2906,7 +3302,8 @@ function ProductsDashboard() {
                 value: salesChannelId,
                 onChange: (event) => setSalesChannelId(event.target.value),
                 disabled: filtersLoading,
-                className: "h-8 min-w-[150px] rounded-md border border-ui-border-base bg-ui-bg-base px-2.5 text-sm text-ui-fg-base outline-none transition focus:ring-2 focus:ring-ui-fg-interactive",
+                className: SELECT_CLASS_NAME,
+                "aria-busy": filtersLoading,
                 children: [
                   /* @__PURE__ */ jsx("option", { value: "all", children: "All channels" }),
                   salesChannels.map((channel) => /* @__PURE__ */ jsx("option", { value: channel.id, children: channel.name }, channel.id))
@@ -2914,419 +3311,966 @@ function ProductsDashboard() {
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx(Label, { htmlFor: "products-summary-period", className: "text-ui-fg-muted text-xs font-medium", children: "Period" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 sm:flex-initial sm:flex-none", children: [
+            /* @__PURE__ */ jsx(
+              Label,
+              {
+                htmlFor: "products-summary-period",
+                className: "shrink-0 whitespace-nowrap text-ui-fg-muted text-xs font-medium",
+                children: "Period"
+              }
+            ),
             /* @__PURE__ */ jsx(
               "select",
               {
                 id: "products-summary-period",
                 value: summaryDays,
                 onChange: (event) => setSummaryDays(event.target.value),
-                className: "h-8 min-w-[132px] rounded-md border border-ui-border-base bg-ui-bg-base px-2.5 text-sm text-ui-fg-base outline-none transition focus:ring-2 focus:ring-ui-fg-interactive",
+                className: SELECT_CLASS_NAME,
                 children: SUMMARY_PERIODS.map((period) => /* @__PURE__ */ jsx("option", { value: period.value, children: period.label }, period.value))
               }
             )
           ] }),
-          (summaryDays !== "all" || salesChannelId !== "all") && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 self-end pb-1", children: [
-            summaryDays !== "all" && /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full shrink-0 flex-wrap items-center gap-x-3 gap-y-1 sm:w-auto sm:pl-1", children: [
+            summaryDays !== "all" ? /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
                 onClick: () => setSummaryDays("all"),
                 className: "text-xs text-ui-fg-muted transition-colors hover:text-ui-fg-base",
-                "aria-label": "Show all products analytics",
+                "aria-label": "Clear summary period filter",
                 children: "Clear period"
               }
-            ),
-            salesChannelId !== "all" && /* @__PURE__ */ jsx(
+            ) : null,
+            salesChannelId !== "all" ? /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
                 onClick: () => setSalesChannelId("all"),
                 className: "text-xs text-ui-fg-muted transition-colors hover:text-ui-fg-base",
-                "aria-label": "Show all sales channels",
+                "aria-label": "Clear sales channel filter",
                 children: "Clear channel"
               }
-            )
+            ) : null
           ] })
         ] })
       }
     ),
-    filtersError && /* @__PURE__ */ jsx(Container, { className: "rounded-2xl border border-ui-border-base bg-ui-bg-base p-4 shadow-sm", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger text-sm", children: filtersError }) }),
-    !viewsConnected && /* @__PURE__ */ jsx(Container, { className: "rounded-2xl border border-ui-border-base bg-ui-bg-base p-4 shadow-sm", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-sm", children: "Product views are unavailable until the `medusa-product-helper` tracking module is registered and storefront page views are being recorded." }) }),
-    salesChannelId !== "all" && viewsConnected && /* @__PURE__ */ jsx(Container, { className: "rounded-2xl border border-ui-border-base bg-ui-bg-base p-4 shadow-sm", children: /* @__PURE__ */ jsxs(Text, { className: "text-ui-fg-muted text-sm", children: [
-      "Showing product analytics for ",
-      /* @__PURE__ */ jsx("strong", { children: selectedChannelLabel }),
-      ". Product views are scoped to products assigned to this sales channel."
-    ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3", children: [
-      /* @__PURE__ */ jsx(
-        AnalyticsStatCard,
-        {
-          label: "Units sold",
-          value: summary.unitsSold.toLocaleString()
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        AnalyticsStatCard,
-        {
-          label: "Product revenue",
-          value: formatCurrency(summary.productRevenue)
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        AnalyticsStatCard,
-        {
-          label: "Orders with product sales",
-          value: summary.ordersWithProducts.toLocaleString()
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        AnalyticsStatCard,
-        {
-          label: "Active products sold",
-          value: summary.activeProductsSold.toLocaleString()
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        AnalyticsStatCard,
-        {
-          label: "Product views",
-          value: summary.totalProductViews.toLocaleString()
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        AnalyticsStatCard,
-        {
-          label: "View / order ratio",
-          value: formatRatio(summary.viewToOrderRatio)
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(
-      AnalyticsSection,
-      {
-        title: "Sales and views over time",
-        description: "Units sold and revenue are always shown. Product views appear when tracking data is available.",
-        actions: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "products-graph-period", className: "text-ui-fg-muted text-sm", children: "Range" }),
-          /* @__PURE__ */ jsx(
-            "select",
-            {
-              id: "products-graph-period",
-              value: graphPeriod,
-              onChange: (event) => setGraphPeriod(event.target.value),
-              className: "h-9 rounded-md border border-ui-border-base bg-transparent px-3 text-sm text-ui-fg-base outline-none transition focus:ring-2 focus:ring-ui-fg-interactive",
-              children: GRAPH_PERIODS.map((period) => /* @__PURE__ */ jsx("option", { value: period.value, children: period.label }, period.value))
-            }
-          )
-        ] }),
-        children: /* @__PURE__ */ jsx(AnalyticsChartSurface, { children: /* @__PURE__ */ jsx("div", { className: "h-80", children: overTimeLoading ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted", children: "Loading chart…" }) }) : overTimeError || !overTime ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger", children: overTimeError ?? "Failed to load product trend" }) }) : /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart, { data: overTime.series, children: [
-          /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
-          /* @__PURE__ */ jsx(XAxis, { dataKey: "label" }),
-          /* @__PURE__ */ jsx(
-            YAxis,
-            {
-              yAxisId: "counts",
-              allowDecimals: false,
-              tickFormatter: (value) => Math.floor(Number(value)).toLocaleString()
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            YAxis,
-            {
-              yAxisId: "revenue",
-              orientation: "right",
-              tickFormatter: (value) => formatCurrency(Number(value))
-            }
-          ),
-          /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(TrendTooltip, {}) }),
-          /* @__PURE__ */ jsx(Legend, {}),
-          /* @__PURE__ */ jsx(
-            Line,
-            {
-              yAxisId: "counts",
-              type: "monotone",
-              dataKey: "units_sold",
-              name: "Units sold",
-              stroke: SALES_COLOR,
-              strokeWidth: 2,
-              dot: false
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Line,
-            {
-              yAxisId: "counts",
-              type: "monotone",
-              dataKey: "views",
-              name: "Views",
-              stroke: VIEWS_COLOR,
-              strokeWidth: 2,
-              dot: false
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Line,
-            {
-              yAxisId: "revenue",
-              type: "monotone",
-              dataKey: "revenue",
-              name: "Revenue",
-              stroke: REVENUE_COLOR,
-              strokeWidth: 2,
-              dot: false
-            }
-          )
-        ] }) }) }) })
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 xl:grid-cols-2", children: [
-      /* @__PURE__ */ jsx(
-        AnalyticsSection,
-        {
-          title: "Best sellers",
-          description: "Top products by revenue.",
-          actions: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: TOP_SELLER_PERIODS.map((period) => /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: topSellerPeriod === period.value ? "secondary" : "transparent",
-              size: "small",
-              onClick: () => setTopSellerPeriod(period.value),
-              children: period.label
-            },
-            period.value
-          )) }),
-          children: /* @__PURE__ */ jsx(AnalyticsChartSurface, { children: /* @__PURE__ */ jsx("div", { className: "h-80", children: topSellersLoading ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted", children: "Loading best sellers…" }) }) : topSellersError || !topSellers ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger", children: topSellersError ?? "Failed to load best sellers" }) }) : topSellerChartData.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted", children: "No product sales found for this range." }) }) : /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart, { data: topSellerChartData, layout: "vertical", margin: { left: 8, right: 8 }, children: [
-            /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", horizontal: false }),
-            /* @__PURE__ */ jsx(
-              XAxis,
-              {
-                type: "number",
-                allowDecimals: false,
-                tickFormatter: (value) => formatCurrency(Number(value))
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              YAxis,
-              {
-                type: "category",
-                dataKey: "product_title",
-                width: 160,
-                tickLine: false
-              }
-            ),
-            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ProductBarTooltip, { showViews: false }) }),
-            /* @__PURE__ */ jsx(Bar, { dataKey: "revenue", radius: [0, 6, 6, 0], children: topSellerChartData.map((entry) => /* @__PURE__ */ jsx(
-              Cell,
-              {
-                fill: entry.isBestSeller ? REVENUE_COLOR : REVENUE_MUTED_COLOR
-              },
-              entry.product_id
-            )) })
-          ] }) }) }) })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        AnalyticsSection,
-        {
-          title: "Top seller breakdown",
-          description: "Products ranked by revenue.",
-          children: /* @__PURE__ */ jsx(AnalyticsTableSurface, { children: /* @__PURE__ */ jsxs(Table, { children: [
-            /* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [
-              /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Product" }),
-              /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Units" }),
-              /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Orders" }),
-              /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Revenue" })
-            ] }) }),
-            /* @__PURE__ */ jsxs(Table.Body, { children: [
-              ((topSellers == null ? void 0 : topSellers.products) ?? []).slice(0, 8).map((product) => {
-                var _a2, _b2;
-                return /* @__PURE__ */ jsxs(
-                  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-ui-bg-subtle" : void 0,
-                    children: [
-                      /* @__PURE__ */ jsx(Table.Cell, { children: product.product_title }),
-                      /* @__PURE__ */ jsx(Table.Cell, { children: product.units_sold.toLocaleString() }),
-                      /* @__PURE__ */ jsx(Table.Cell, { children: product.order_count.toLocaleString() }),
-                      /* @__PURE__ */ jsx(Table.Cell, { children: formatCurrency(product.revenue) })
-                    ]
-                  },
-                  product.product_id
-                );
-              }),
-              !topSellersLoading && (((_b = topSellers == null ? void 0 : topSellers.products) == null ? void 0 : _b.length) ?? 0) === 0 && /* @__PURE__ */ jsxs(Table.Row, { children: [
-                /* @__PURE__ */ jsx(Table.Cell, { children: "No best seller data yet." }),
-                /* @__PURE__ */ jsx(Table.Cell, {}),
-                /* @__PURE__ */ jsx(Table.Cell, {}),
-                /* @__PURE__ */ jsx(Table.Cell, {})
-              ] })
-            ] })
-          ] }) })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 xl:grid-cols-2", children: [
-      /* @__PURE__ */ jsx(
-        AnalyticsSection,
-        {
-          title: "Most viewed products",
-          description: "View activity is sourced from the existing product-helper tracking module.",
-          children: /* @__PURE__ */ jsx(AnalyticsChartSurface, { children: /* @__PURE__ */ jsx("div", { className: "h-80", children: performanceLoading ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted", children: "Loading product views…" }) }) : performanceError || !performance ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger", children: performanceError ?? "Failed to load product performance" }) }) : !performance.productViewsConnected ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted", children: "Product view tracking is not available in this environment." }) }) : topViewedChartData.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted", children: "No product views found for this range." }) }) : /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(BarChart, { data: topViewedChartData, layout: "vertical", margin: { left: 8, right: 8 }, children: [
-            /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", horizontal: false }),
-            /* @__PURE__ */ jsx(XAxis, { type: "number", allowDecimals: false }),
-            /* @__PURE__ */ jsx(
-              YAxis,
-              {
-                type: "category",
-                dataKey: "product_title",
-                width: 160,
-                tickLine: false
-              }
-            ),
-            /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ProductBarTooltip, {}) }),
-            /* @__PURE__ */ jsx(Bar, { dataKey: "total_views", fill: VIEWS_COLOR, radius: [0, 6, 6, 0] })
-          ] }) }) }) })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        AnalyticsSection,
-        {
-          title: "View-to-sales opportunities",
-          description: "Highlight products that attract attention but convert less efficiently.",
-          children: /* @__PURE__ */ jsx(AnalyticsTableSurface, { children: /* @__PURE__ */ jsxs(Table, { children: [
-            /* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [
-              /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Product" }),
-              /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Views" }),
-              /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Units" }),
-              /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Views / unit" })
-            ] }) }),
-            /* @__PURE__ */ jsxs(Table.Body, { children: [
-              ((performance == null ? void 0 : performance.viewOpportunities) ?? []).slice(0, 8).map((product) => /* @__PURE__ */ jsxs(Table.Row, { children: [
-                /* @__PURE__ */ jsx(Table.Cell, { children: product.product_title }),
-                /* @__PURE__ */ jsx(Table.Cell, { children: product.total_views.toLocaleString() }),
-                /* @__PURE__ */ jsx(Table.Cell, { children: product.units_sold.toLocaleString() }),
-                /* @__PURE__ */ jsx(Table.Cell, { children: formatRatio(product.views_per_unit) })
-              ] }, product.product_id)),
-              !performanceLoading && !performanceError && (((_c = performance == null ? void 0 : performance.viewOpportunities) == null ? void 0 : _c.length) ?? 0) === 0 && /* @__PURE__ */ jsxs(Table.Row, { children: [
-                /* @__PURE__ */ jsx(Table.Cell, { children: "No product view opportunities yet." }),
-                /* @__PURE__ */ jsx(Table.Cell, {}),
-                /* @__PURE__ */ jsx(Table.Cell, {}),
-                /* @__PURE__ */ jsx(Table.Cell, {})
-              ] })
-            ] })
-          ] }) })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(
-      AnalyticsSection,
-      {
-        title: "Views vs units sold",
-        description: "Each point is a product (top viewed in this period). Requires product view tracking.",
-        children: /* @__PURE__ */ jsx(AnalyticsChartSurface, { children: /* @__PURE__ */ jsx("div", { className: "h-80", children: performanceLoading ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted", children: "Loading scatter…" }) }) : performanceError || !performance ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger", children: performanceError ?? "Failed to load product performance" }) }) : !performance.productViewsConnected ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted", children: "Product view tracking is not available in this environment." }) }) : viewsVsUnitsScatterData.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted", children: "No products with views or sales in this range." }) }) : /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(ScatterChart, { margin: { top: 12, right: 16, bottom: 8, left: 8 }, children: [
-          /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "rgba(148,163,184,0.2)" }),
-          /* @__PURE__ */ jsx(
-            XAxis,
-            {
-              type: "number",
-              dataKey: "total_views",
-              name: "Views",
-              tick: { fontSize: 11 },
-              allowDecimals: false,
-              label: {
-                value: "Views",
-                position: "insideBottom",
-                offset: -4,
-                fontSize: 11,
-                fill: "#6b7280"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            YAxis,
-            {
-              type: "number",
-              dataKey: "units_sold",
-              name: "Units sold",
-              tick: { fontSize: 11 },
-              allowDecimals: false,
-              label: {
-                value: "Units sold",
-                angle: -90,
-                position: "insideLeft",
-                fontSize: 11,
-                fill: "#6b7280"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              cursor: { strokeDasharray: "4 4" },
-              content: /* @__PURE__ */ jsx(ProductBarTooltip, {})
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Scatter,
-            {
-              name: "Products",
-              data: viewsVsUnitsScatterData,
-              fill: VIEWS_COLOR
-            }
-          )
-        ] }) }) }) })
-      }
-    )
-  ] });
-}
-const ANALYTICS_MODULES = [
-  { id: "orders", label: "Orders" },
-  { id: "customers", label: "Customers" },
-  { id: "products", label: "Products" }
-];
-const AnalyticsPage = () => {
-  const [activeModule, setActiveModule] = useState("orders");
-  return /* @__PURE__ */ jsx("div", { className: "flex h-full bg-ui-bg-subtle", children: /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-[1600px] flex-col gap-4 p-4", children: [
-    /* @__PURE__ */ jsxs(Container, { className: "overflow-hidden rounded-2xl border border-ui-border-base bg-ui-bg-base p-0 shadow-sm", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 px-5 py-5 xl:flex-row xl:items-end xl:justify-between", children: [
-        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsx(Heading, { level: "h1", className: "tracking-tight", children: "Analytics" }),
-          /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-sm", children: "Review orders, customers, and products in one organized workspace." })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "div",
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2 p-2 pt-0 sm:p-3 sm:pt-0 md:p-4 md:pt-0", children: [
+      filtersError ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed border-ui-border-base bg-ui-bg-subtle/30 px-3 py-2", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger text-xs", children: filtersError }) }) : null,
+      !viewsConnected ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed border-ui-border-base bg-ui-bg-subtle/30 px-3 py-2", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[11px] leading-snug", children: "Product views are unavailable until the `medusa-product-helper` tracking module is registered and storefront page views are being recorded." }) }) : null,
+      salesChannelId !== "all" && viewsConnected ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-ui-border-base/80 bg-ui-bg-subtle/25 px-3 py-2 shadow-sm", children: /* @__PURE__ */ jsxs(Text, { className: "text-ui-fg-muted text-[11px] leading-snug", children: [
+        "Showing analytics for ",
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-ui-fg-base", children: selectedChannelLabel }),
+        ". Views are scoped to products assigned to this sales channel."
+      ] }) }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-0.5", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.16em]", children: "Product overview" }) }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-6", children: primaryStats.map((stat) => /* @__PURE__ */ jsx(
+          AtlasKpiCard,
           {
-            className: "flex flex-wrap items-center gap-1 rounded-2xl border border-ui-border-base bg-ui-bg-subtle p-1",
-            role: "tablist",
-            "aria-label": "Analytics modules",
-            children: ANALYTICS_MODULES.map((m) => {
-              const active = activeModule === m.id;
-              return /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  role: "tab",
-                  "aria-selected": active,
-                  onClick: () => setActiveModule(m.id),
-                  className: `rounded-xl px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-fg-interactive focus-visible:ring-offset-2 focus-visible:ring-offset-ui-bg-base ${active ? "bg-ui-bg-base text-ui-fg-base shadow-sm" : "text-ui-fg-muted hover:bg-ui-bg-base/60 hover:text-ui-fg-base"}`.trim(),
-                  children: m.label
-                },
-                m.id
-              );
-            })
-          }
-        )
+            label: stat.label,
+            value: stat.value,
+            helper: stat.helper,
+            accent: stat.accent
+          },
+          stat.label
+        )) })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "h-1 bg-ui-bg-subtle" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      activeModule === "orders" && /* @__PURE__ */ jsx(OrdersDashboard, {}),
-      activeModule === "customers" && /* @__PURE__ */ jsx(CustomersDashboard, {}),
-      activeModule === "products" && /* @__PURE__ */ jsx(ProductsDashboard, {})
-    ] })
-  ] }) }) });
+      /* @__PURE__ */ jsxs("div", { className: "mt-2 grid grid-cols-12 gap-2 lg:items-start", children: [
+        /* @__PURE__ */ jsx("div", { className: "col-span-12 lg:col-span-6", children: /* @__PURE__ */ jsx(
+          AnalyticsSection,
+          {
+            variant: "atlas",
+            actionsBare: true,
+            title: "Sales & views over time",
+            description: "Units and views share the left axis; revenue uses the right. Window totals match this range.",
+            actions: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Label,
+                {
+                  htmlFor: "products-graph-period",
+                  className: "shrink-0 text-ui-fg-muted text-xs font-medium",
+                  children: "Range"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "select",
+                {
+                  id: "products-graph-period",
+                  value: graphPeriod,
+                  onChange: (event) => setGraphPeriod(event.target.value),
+                  className: SELECT_CLASS_NAME,
+                  children: GRAPH_PERIODS.map((period) => /* @__PURE__ */ jsx("option", { value: period.value, children: period.label }, period.value))
+                }
+              )
+            ] }),
+            children: /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-1.5 sm:grid-cols-3", children: [
+                /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+                  /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Window units" }),
+                  /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: formatShortNumber(trendTotals.totalUnits) }),
+                  /* @__PURE__ */ jsxs(Text, { className: "text-ui-fg-muted text-[10px]", children: [
+                    "Avg/day ",
+                    trendTotals.avgUnitsPerDay.toFixed(1)
+                  ] })
+                ] }) }),
+                /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+                  /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Window revenue" }),
+                  /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: formatCompactCurrency(trendTotals.totalRevenue) }),
+                  /* @__PURE__ */ jsxs(Text, { className: "text-ui-fg-muted text-[10px]", children: [
+                    "Avg/day ",
+                    formatCompactCurrency(trendTotals.avgRevenuePerDay)
+                  ] })
+                ] }) }),
+                /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+                  /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Window views" }),
+                  /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: formatShortNumber(trendTotals.totalViews) }),
+                  /* @__PURE__ */ jsxs(Text, { className: "text-ui-fg-muted text-[10px]", children: [
+                    "Avg/day ",
+                    trendTotals.avgViewsPerDay.toFixed(0)
+                  ] })
+                ] }) })
+              ] }),
+              !overTimeLoading && !overTimeError && series.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-1.5 md:grid-cols-3", children: [
+                /* @__PURE__ */ jsxs(AnalyticsChartSurface, { variant: "atlas", children: [
+                  /* @__PURE__ */ jsx(Text, { className: "mb-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Units sold" }),
+                  /* @__PURE__ */ jsx("div", { className: "h-[96px] w-full", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+                    LineChart,
+                    {
+                      data: series,
+                      margin: { top: 4, right: 4, left: 0, bottom: 0 },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          CartesianGrid,
+                          {
+                            strokeDasharray: "3 3",
+                            vertical: false,
+                            stroke: "rgba(148,163,184,0.12)"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(XAxis, { dataKey: "date", hide: true }),
+                        /* @__PURE__ */ jsx(
+                          YAxis,
+                          {
+                            width: 28,
+                            tick: CHART_AXIS_TICK_SM,
+                            allowDecimals: false
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(MiniTrendTooltip, {}) }),
+                        /* @__PURE__ */ jsx(
+                          Line,
+                          {
+                            type: "natural",
+                            dataKey: "units_sold",
+                            name: "Units sold",
+                            stroke: PRODUCT_CHART_COLORS.units,
+                            strokeWidth: 2,
+                            dot: false
+                          }
+                        )
+                      ]
+                    }
+                  ) }) })
+                ] }),
+                /* @__PURE__ */ jsxs(AnalyticsChartSurface, { variant: "atlas", children: [
+                  /* @__PURE__ */ jsx(Text, { className: "mb-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Views" }),
+                  /* @__PURE__ */ jsx("div", { className: "h-[96px] w-full", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+                    LineChart,
+                    {
+                      data: series,
+                      margin: { top: 4, right: 4, left: 0, bottom: 0 },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          CartesianGrid,
+                          {
+                            strokeDasharray: "3 3",
+                            vertical: false,
+                            stroke: "rgba(148,163,184,0.12)"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(XAxis, { dataKey: "date", hide: true }),
+                        /* @__PURE__ */ jsx(
+                          YAxis,
+                          {
+                            width: 28,
+                            tick: CHART_AXIS_TICK_SM,
+                            allowDecimals: false
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(MiniTrendTooltip, {}) }),
+                        /* @__PURE__ */ jsx(
+                          Line,
+                          {
+                            type: "natural",
+                            dataKey: "views",
+                            name: "Views",
+                            stroke: PRODUCT_CHART_COLORS.views,
+                            strokeWidth: 2,
+                            dot: false
+                          }
+                        )
+                      ]
+                    }
+                  ) }) })
+                ] }),
+                /* @__PURE__ */ jsxs(AnalyticsChartSurface, { variant: "atlas", children: [
+                  /* @__PURE__ */ jsx(Text, { className: "mb-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Revenue" }),
+                  /* @__PURE__ */ jsx("div", { className: "h-[96px] w-full", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+                    LineChart,
+                    {
+                      data: series,
+                      margin: { top: 4, right: 4, left: 0, bottom: 0 },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          CartesianGrid,
+                          {
+                            strokeDasharray: "3 3",
+                            vertical: false,
+                            stroke: "rgba(148,163,184,0.12)"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(XAxis, { dataKey: "date", hide: true }),
+                        /* @__PURE__ */ jsx(
+                          YAxis,
+                          {
+                            width: 36,
+                            tick: CHART_AXIS_TICK_SM,
+                            tickFormatter: (v) => formatCompactCurrency(Number(v))
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(MiniTrendTooltip, {}) }),
+                        /* @__PURE__ */ jsx(
+                          Line,
+                          {
+                            type: "natural",
+                            dataKey: "revenue",
+                            name: "Revenue",
+                            stroke: PRODUCT_CHART_COLORS.revenue,
+                            strokeWidth: 2,
+                            dot: false
+                          }
+                        )
+                      ]
+                    }
+                  ) }) })
+                ] })
+              ] }) : null,
+              /* @__PURE__ */ jsxs(AnalyticsChartSurface, { variant: "atlas", className: "relative overflow-hidden", children: [
+                /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-6 top-0 h-12 rounded-b-full bg-gradient-to-r from-sky-400/10 via-fuchsia-400/10 to-transparent blur-xl" }),
+                /* @__PURE__ */ jsxs("div", { className: "relative space-y-1", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-1.5", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
+                      /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.16em]", children: "Trend overview" }),
+                      /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base text-sm font-semibold", children: selectedGraphPeriodLabel })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-end gap-2 text-[10px] text-ui-fg-muted", children: [
+                      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+                        /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-sky-400" }),
+                        "Units"
+                      ] }),
+                      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+                        /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-violet-400" }),
+                        "Views"
+                      ] }),
+                      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+                        /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-fuchsia-400" }),
+                        "Revenue"
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "h-[min(168px,24vh)] min-h-[140px] sm:h-[min(184px,26vh)]", children: overTimeLoading ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "flex h-full items-center justify-center",
+                      role: "status",
+                      "aria-label": "Loading product trend chart",
+                      children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "Loading chart…" })
+                    }
+                  ) : overTimeError ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center px-2", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger text-center text-xs", children: overTimeError }) }) : series.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "No data in this range." }) }) : /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+                    ComposedChart,
+                    {
+                      data: series,
+                      margin: { top: 4, right: 6, left: -6, bottom: 0 },
+                      children: [
+                        /* @__PURE__ */ jsxs("defs", { children: [
+                          /* @__PURE__ */ jsxs("linearGradient", { id: "productUnitsGradient", x1: "0", y1: "0", x2: "1", y2: "0", children: [
+                            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#67E8F9" }),
+                            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#3B82F6" })
+                          ] }),
+                          /* @__PURE__ */ jsxs("linearGradient", { id: "productRevenueGradient", x1: "0", y1: "0", x2: "1", y2: "0", children: [
+                            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#F472B6" }),
+                            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#C084FC" })
+                          ] }),
+                          /* @__PURE__ */ jsxs("linearGradient", { id: "productUnitsAreaFill", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#38BDF8", stopOpacity: 0.22 }),
+                            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#38BDF8", stopOpacity: 0 })
+                          ] }),
+                          /* @__PURE__ */ jsxs("linearGradient", { id: "productRevenueAreaFill", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#E879F9", stopOpacity: 0.2 }),
+                            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#E879F9", stopOpacity: 0 })
+                          ] }),
+                          /* @__PURE__ */ jsxs("linearGradient", { id: "productViewsAreaFill", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                            /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#C084FC", stopOpacity: 0.18 }),
+                            /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#C084FC", stopOpacity: 0 })
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsx(
+                          CartesianGrid,
+                          {
+                            stroke: "rgba(148,163,184,0.14)",
+                            strokeDasharray: "3 3",
+                            vertical: false
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          XAxis,
+                          {
+                            dataKey: "date",
+                            tick: CHART_AXIS_TICK,
+                            tickLine: false,
+                            axisLine: false,
+                            tickFormatter: (value, index) => {
+                              const row = series[index];
+                              return (row == null ? void 0 : row.label) ?? formatChartLabel(String(value));
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          YAxis,
+                          {
+                            yAxisId: "counts",
+                            width: 32,
+                            tick: CHART_AXIS_TICK,
+                            tickLine: false,
+                            axisLine: false,
+                            allowDecimals: false,
+                            tickFormatter: (value) => Math.floor(Number(value) || 0).toLocaleString()
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          YAxis,
+                          {
+                            yAxisId: "revenue",
+                            orientation: "right",
+                            width: 40,
+                            tick: CHART_AXIS_TICK,
+                            tickLine: false,
+                            axisLine: false,
+                            tickFormatter: (value) => formatCompactCurrency(Number(value) || 0)
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Tooltip,
+                          {
+                            content: /* @__PURE__ */ jsx(TrendTooltip, {}),
+                            cursor: {
+                              stroke: "rgba(248, 250, 252, 0.35)",
+                              strokeWidth: 1
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Area,
+                          {
+                            yAxisId: "counts",
+                            type: "natural",
+                            dataKey: "units_sold",
+                            stroke: "none",
+                            fill: "url(#productUnitsAreaFill)",
+                            isAnimationActive: false,
+                            legendType: "none"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Area,
+                          {
+                            yAxisId: "counts",
+                            type: "natural",
+                            dataKey: "views",
+                            stroke: "none",
+                            fill: "url(#productViewsAreaFill)",
+                            isAnimationActive: false,
+                            legendType: "none"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Area,
+                          {
+                            yAxisId: "revenue",
+                            type: "natural",
+                            dataKey: "revenue",
+                            stroke: "none",
+                            fill: "url(#productRevenueAreaFill)",
+                            isAnimationActive: false,
+                            legendType: "none"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Line,
+                          {
+                            yAxisId: "counts",
+                            type: "natural",
+                            dataKey: "units_sold",
+                            name: "Units sold",
+                            stroke: "url(#productUnitsGradient)",
+                            strokeWidth: 2,
+                            dot: false,
+                            activeDot: { r: 4, fill: PRODUCT_CHART_COLORS.units }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Line,
+                          {
+                            yAxisId: "counts",
+                            type: "natural",
+                            dataKey: "views",
+                            name: "Views",
+                            stroke: PRODUCT_CHART_COLORS.views,
+                            strokeWidth: 1.5,
+                            strokeDasharray: "4 3",
+                            dot: false,
+                            activeDot: { r: 4, fill: PRODUCT_CHART_COLORS.views }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Line,
+                          {
+                            yAxisId: "revenue",
+                            type: "natural",
+                            dataKey: "revenue",
+                            name: "Revenue",
+                            stroke: "url(#productRevenueGradient)",
+                            strokeWidth: 2,
+                            dot: false,
+                            activeDot: { r: 4, fill: PRODUCT_CHART_COLORS.revenue }
+                          }
+                        )
+                      ]
+                    }
+                  ) }) })
+                ] })
+              ] })
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "col-span-12 flex flex-col gap-2 lg:col-span-6", children: [
+          /* @__PURE__ */ jsx(
+            AnalyticsSection,
+            {
+              variant: "atlas",
+              title: "Pulse & range",
+              description: "Totals for the chart window above — independent of the summary period filter.",
+              children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: quickPulseMetrics.map((metric) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `rounded-lg border border-ui-border-base bg-ui-bg-base px-2 py-2 shadow-sm ${metric.accentClassName}`.trim(),
+                  children: [
+                    /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: metric.label }),
+                    /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-base mt-0.5 text-sm font-semibold tracking-tight", children: metric.value }),
+                    /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted mt-0.5 text-[9px] leading-snug", children: metric.helper })
+                  ]
+                },
+                metric.label
+              )) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AnalyticsSection,
+            {
+              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).",
+              actions: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  Label,
+                  {
+                    htmlFor: "products-top-seller-period",
+                    className: "shrink-0 text-ui-fg-muted text-xs font-medium",
+                    children: "Window"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "select",
+                  {
+                    id: "products-top-seller-period",
+                    value: topSellerPeriod,
+                    onChange: (event) => setTopSellerPeriod(event.target.value),
+                    className: SELECT_CLASS_NAME,
+                    children: TOP_SELLER_PERIODS.map((period) => /* @__PURE__ */ jsx("option", { value: period.value, children: period.label }, period.value))
+                  }
+                )
+              ] }),
+              children: /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", className: "min-w-0 overflow-x-auto", children: /* @__PURE__ */ jsx("div", { className: "h-[212px] min-w-[280px] w-full sm:h-[228px]", children: bestSellersTrendLoading ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) : bestSellersTrendError ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center px-2", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger text-center text-xs", children: bestSellersTrendError }) }) : bestSellersTrendSeries.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "No product sales for this range." }) }) : /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", minWidth: 0, children: /* @__PURE__ */ jsxs(
+                ComposedChart,
+                {
+                  data: bestSellersTrendSeries,
+                  margin: { left: 0, right: 8, top: 6, bottom: 2 },
+                  children: [
+                    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+                      "linearGradient",
+                      {
+                        id: "bestSellersRevenueArea",
+                        x1: "0",
+                        y1: "0",
+                        x2: "0",
+                        y2: "1",
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "stop",
+                            {
+                              offset: "0%",
+                              stopColor: PRODUCT_CHART_COLORS.revenue,
+                              stopOpacity: 0.22
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "stop",
+                            {
+                              offset: "100%",
+                              stopColor: PRODUCT_CHART_COLORS.revenue,
+                              stopOpacity: 0
+                            }
+                          )
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(
+                      CartesianGrid,
+                      {
+                        strokeDasharray: "3 3",
+                        vertical: false,
+                        stroke: "rgba(148,163,184,0.12)"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      XAxis,
+                      {
+                        dataKey: "date",
+                        tick: CHART_AXIS_TICK_SM,
+                        tickFormatter: (value) => formatChartLabel(String(value)),
+                        tickLine: false,
+                        axisLine: { stroke: CHART_AXIS_LINE }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      YAxis,
+                      {
+                        yAxisId: "units",
+                        tick: CHART_AXIS_TICK_SM,
+                        tickFormatter: (value) => formatShortNumber(Number(value)),
+                        width: 36,
+                        tickLine: false,
+                        axisLine: { stroke: CHART_AXIS_LINE },
+                        allowDecimals: false
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      YAxis,
+                      {
+                        yAxisId: "revenue",
+                        orientation: "right",
+                        tick: CHART_AXIS_TICK_SM,
+                        tickFormatter: (value) => formatCompactCurrency(Number(value)),
+                        width: 44,
+                        tickLine: false,
+                        axisLine: { stroke: CHART_AXIS_LINE }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Tooltip,
+                      {
+                        content: (tooltipProps) => /* @__PURE__ */ jsx(
+                          MiniTrendTooltip,
+                          {
+                            ...tooltipProps,
+                            productHeadline: bestSellerTrendProductTitle,
+                            hideViewsRow: true
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Area,
+                      {
+                        yAxisId: "revenue",
+                        type: "natural",
+                        dataKey: "revenue",
+                        name: "Revenue",
+                        stroke: "transparent",
+                        fill: "url(#bestSellersRevenueArea)",
+                        isAnimationActive: false
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Line,
+                      {
+                        yAxisId: "revenue",
+                        type: "natural",
+                        dataKey: "revenue",
+                        name: "Revenue",
+                        stroke: PRODUCT_CHART_COLORS.revenue,
+                        strokeWidth: 2,
+                        dot: false,
+                        activeDot: { r: 4, fill: PRODUCT_CHART_COLORS.revenue },
+                        isAnimationActive: false
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Line,
+                      {
+                        yAxisId: "units",
+                        type: "natural",
+                        dataKey: "units_sold",
+                        name: "Units sold",
+                        stroke: PRODUCT_CHART_COLORS.units,
+                        strokeWidth: 2,
+                        dot: false,
+                        activeDot: { r: 4, fill: PRODUCT_CHART_COLORS.units },
+                        isAnimationActive: false
+                      }
+                    )
+                  ]
+                }
+              ) }) }) })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 md:items-stretch xl:grid-cols-3 xl:gap-3", children: [
+        /* @__PURE__ */ jsx(
+          AnalyticsSection,
+          {
+            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.",
+            children: /* @__PURE__ */ jsx("div", { className: "min-h-[212px] min-w-0 sm:min-h-[228px]", children: /* @__PURE__ */ jsx(AnalyticsTableSurface, { className: "shadow-sm", children: /* @__PURE__ */ jsxs(Table, { className: LEADERBOARD_TABLE_CLASS, children: [
+              /* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [
+                /* @__PURE__ */ jsx(Table.HeaderCell, { className: TABLE_HEAD_CELL_NOWRAP, children: "Product" }),
+                /* @__PURE__ */ jsx(Table.HeaderCell, { className: TABLE_HEAD_CELL_NOWRAP, children: "Units" }),
+                /* @__PURE__ */ jsx(Table.HeaderCell, { className: TABLE_HEAD_CELL_NOWRAP, children: "Orders" }),
+                /* @__PURE__ */ jsx(Table.HeaderCell, { className: TABLE_HEAD_CELL_NOWRAP, children: "Revenue" })
+              ] }) }),
+              /* @__PURE__ */ jsxs(Table.Body, { children: [
+                topSellersError ? /* @__PURE__ */ jsxs(Table.Row, { children: [
+                  /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger text-xs", children: topSellersError }) }),
+                  /* @__PURE__ */ jsx(Table.Cell, {}),
+                  /* @__PURE__ */ jsx(Table.Cell, {}),
+                  /* @__PURE__ */ jsx(Table.Cell, {})
+                ] }) : null,
+                !topSellersError ? ((topSellers == null ? void 0 : topSellers.products) ?? []).slice(0, 8).map((product) => {
+                  var _a2, _b2;
+                  return /* @__PURE__ */ jsxs(
+                    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,
+                      children: [
+                        /* @__PURE__ */ jsx(Table.Cell, { children: product.product_title }),
+                        /* @__PURE__ */ jsx(Table.Cell, { children: product.units_sold.toLocaleString() }),
+                        /* @__PURE__ */ jsx(Table.Cell, { children: product.order_count.toLocaleString() }),
+                        /* @__PURE__ */ jsx(Table.Cell, { children: formatCurrency(product.revenue) })
+                      ]
+                    },
+                    product.product_id
+                  );
+                }) : null,
+                !topSellersLoading && !topSellersError && (((_j = topSellers == null ? void 0 : topSellers.products) == null ? void 0 : _j.length) ?? 0) === 0 ? /* @__PURE__ */ jsxs(Table.Row, { children: [
+                  /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "No best seller data yet." }) }),
+                  /* @__PURE__ */ jsx(Table.Cell, {}),
+                  /* @__PURE__ */ jsx(Table.Cell, {}),
+                  /* @__PURE__ */ jsx(Table.Cell, {})
+                ] }) : null
+              ] })
+            ] }) }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AnalyticsSection,
+          {
+            variant: "atlas",
+            className: "min-w-0 md:col-span-1 xl:col-span-1",
+            title: "Most viewed products",
+            description: mostViewedTrendProductTitle ? `Views over time for “${mostViewedTrendProductTitle}” (top of the list for your summary period; buckets follow period: today / 7d → week, 30d → month, 90d / all → year).` : "Views over time for the most-viewed product in your summary period (buckets: today / 7d → week, 30d → month, 90d / all → year).",
+            children: performanceLoading ? /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsx("div", { className: "flex h-[212px] items-center justify-center sm:h-[228px]", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) }) : performanceError ? /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsx("div", { className: "flex h-[212px] items-center justify-center px-2 sm:h-[228px]", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger text-center text-xs", children: performanceError }) }) }) : !(performance == null ? void 0 : performance.productViewsConnected) ? /* @__PURE__ */ jsx("div", { className: "min-h-[212px] sm:min-h-[228px]", children: /* @__PURE__ */ jsx(
+              EmptyAnalyticsPanel,
+              {
+                title: "Views unavailable",
+                description: "Product view tracking is not available in this environment."
+              }
+            ) }) : ((performance == null ? void 0 : performance.topViewedProducts) ?? []).length === 0 ? /* @__PURE__ */ jsx("div", { className: "min-h-[212px] sm:min-h-[228px]", children: /* @__PURE__ */ jsx(
+              EmptyAnalyticsPanel,
+              {
+                title: "No views",
+                description: "No product views found for this summary period."
+              }
+            ) }) : /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", className: "min-w-0 overflow-x-auto", children: /* @__PURE__ */ jsx("div", { className: "h-[212px] min-w-[280px] w-full sm:h-[228px]", children: mostViewedTrendLoading ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "Loading chart…" }) }) : mostViewedTrendError ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center px-2", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger text-center text-xs", children: mostViewedTrendError }) }) : mostViewedTrendSeries.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "No view data in this range." }) }) : /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", minWidth: 0, children: /* @__PURE__ */ jsxs(
+              ComposedChart,
+              {
+                data: mostViewedTrendSeries,
+                margin: { left: 0, right: 8, top: 6, bottom: 2 },
+                children: [
+                  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+                    "linearGradient",
+                    {
+                      id: "mostViewedViewsArea",
+                      x1: "0",
+                      y1: "0",
+                      x2: "0",
+                      y2: "1",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "stop",
+                          {
+                            offset: "0%",
+                            stopColor: PRODUCT_CHART_COLORS.views,
+                            stopOpacity: 0.22
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "stop",
+                          {
+                            offset: "100%",
+                            stopColor: PRODUCT_CHART_COLORS.views,
+                            stopOpacity: 0
+                          }
+                        )
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(
+                    CartesianGrid,
+                    {
+                      strokeDasharray: "3 3",
+                      vertical: false,
+                      stroke: "rgba(148,163,184,0.12)"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    XAxis,
+                    {
+                      dataKey: "date",
+                      tick: CHART_AXIS_TICK_SM,
+                      tickFormatter: (value) => formatChartLabel(String(value)),
+                      tickLine: false,
+                      axisLine: { stroke: CHART_AXIS_LINE }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    YAxis,
+                    {
+                      tick: CHART_AXIS_TICK_SM,
+                      tickFormatter: (value) => formatShortNumber(Number(value)),
+                      width: 36,
+                      tickLine: false,
+                      axisLine: { stroke: CHART_AXIS_LINE },
+                      allowDecimals: false
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Tooltip,
+                    {
+                      content: (tooltipProps) => /* @__PURE__ */ jsx(
+                        MiniTrendTooltip,
+                        {
+                          ...tooltipProps,
+                          productHeadline: mostViewedTrendProductTitle,
+                          hideUnitsRow: true,
+                          hideRevenueRow: true
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Area,
+                    {
+                      type: "natural",
+                      dataKey: "views",
+                      name: "Views",
+                      stroke: "transparent",
+                      fill: "url(#mostViewedViewsArea)",
+                      isAnimationActive: false
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Line,
+                    {
+                      type: "natural",
+                      dataKey: "views",
+                      name: "Views",
+                      stroke: PRODUCT_CHART_COLORS.views,
+                      strokeWidth: 2,
+                      dot: false,
+                      activeDot: { r: 4, fill: PRODUCT_CHART_COLORS.views },
+                      isAnimationActive: false
+                    }
+                  )
+                ]
+              }
+            ) }) }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AnalyticsSection,
+          {
+            variant: "atlas",
+            className: "min-w-0 md:col-span-2 xl:col-span-1",
+            title: "View-to-sales opportunities",
+            description: "Products with attention but weaker unit conversion.",
+            children: /* @__PURE__ */ jsx("div", { className: "min-h-[212px] min-w-0 sm:min-h-[228px]", children: /* @__PURE__ */ jsx(AnalyticsTableSurface, { className: "shadow-sm", children: /* @__PURE__ */ jsxs(Table, { className: OPPORTUNITIES_TABLE_CLASS, children: [
+              /* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [
+                /* @__PURE__ */ jsx(Table.HeaderCell, { className: TABLE_HEAD_CELL_NOWRAP, children: "Product" }),
+                /* @__PURE__ */ jsx(Table.HeaderCell, { className: TABLE_HEAD_CELL_NOWRAP, children: "Views" }),
+                /* @__PURE__ */ jsx(Table.HeaderCell, { className: TABLE_HEAD_CELL_NOWRAP, children: "Units" }),
+                /* @__PURE__ */ jsx(Table.HeaderCell, { className: TABLE_HEAD_CELL_NOWRAP, children: "Views / unit" })
+              ] }) }),
+              /* @__PURE__ */ jsxs(Table.Body, { children: [
+                ((performance == null ? void 0 : performance.viewOpportunities) ?? []).slice(0, 8).map((product) => /* @__PURE__ */ jsxs(Table.Row, { children: [
+                  /* @__PURE__ */ jsx(Table.Cell, { children: product.product_title }),
+                  /* @__PURE__ */ jsx(Table.Cell, { children: product.total_views.toLocaleString() }),
+                  /* @__PURE__ */ jsx(Table.Cell, { children: product.units_sold.toLocaleString() }),
+                  /* @__PURE__ */ jsx(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__ */ jsxs(Table.Row, { children: [
+                  /* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "No product view opportunities yet." }) }),
+                  /* @__PURE__ */ jsx(Table.Cell, {}),
+                  /* @__PURE__ */ jsx(Table.Cell, {}),
+                  /* @__PURE__ */ jsx(Table.Cell, {})
+                ] }) : null
+              ] })
+            ] }) }) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        AnalyticsSection,
+        {
+          variant: "atlas",
+          className: "mt-2",
+          title: "Views vs units sold",
+          description: "Each point is a product (top viewed in this period). Requires product view tracking.",
+          children: /* @__PURE__ */ jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsx("div", { className: "h-[220px] w-full sm:h-[248px]", children: performanceLoading ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "Loading scatter…" }) }) : performanceError || !performance ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center px-2", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-danger text-center text-xs", children: performanceError ?? "Failed to load product performance" }) }) : !performance.productViewsConnected ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "Product view tracking is not available in this environment." }) }) : viewsVsUnitsScatterData.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-xs", children: "No products with views or sales in this range." }) }) : /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(ScatterChart, { margin: { top: 12, right: 16, bottom: 8, left: 8 }, children: [
+            /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("radialGradient", { id: "productScatterGlow", cx: "50%", cy: "50%", r: "50%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#E879F9", stopOpacity: 0.95 }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#6366F1", stopOpacity: 0.65 })
+            ] }) }),
+            /* @__PURE__ */ jsx(
+              CartesianGrid,
+              {
+                strokeDasharray: "3 3",
+                stroke: "rgba(148,163,184,0.14)"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              XAxis,
+              {
+                type: "number",
+                dataKey: "total_views",
+                name: "Views",
+                tick: CHART_AXIS_TICK_SM,
+                stroke: CHART_AXIS_LINE,
+                tickLine: { stroke: CHART_AXIS_LINE },
+                allowDecimals: false,
+                label: {
+                  value: "Views",
+                  position: "insideBottom",
+                  offset: -4,
+                  fontSize: 10,
+                  fill: "#9ca3af"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              YAxis,
+              {
+                type: "number",
+                dataKey: "units_sold",
+                name: "Units sold",
+                tick: CHART_AXIS_TICK_SM,
+                stroke: CHART_AXIS_LINE,
+                tickLine: { stroke: CHART_AXIS_LINE },
+                allowDecimals: false,
+                label: {
+                  value: "Units sold",
+                  angle: -90,
+                  position: "insideLeft",
+                  fontSize: 10,
+                  fill: "#9ca3af"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                cursor: { strokeDasharray: "4 4", stroke: "rgba(148,163,184,0.45)" },
+                content: /* @__PURE__ */ jsx(ProductBarTooltip, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Scatter,
+              {
+                name: "Products",
+                data: viewsVsUnitsScatterData,
+                fill: "url(#productScatterGlow)"
+              }
+            )
+          ] }) }) }) })
+        }
+      )
+    ] })
+  ] }) });
+}
+const ANALYTICS_MODULES = [
+  { id: "orders", label: "Orders" },
+  { id: "customers", label: "Customers" },
+  { id: "products", label: "Products" }
+];
+const AnalyticsPage = () => {
+  const [activeModule, setActiveModule] = useState("orders");
+  return /* @__PURE__ */ jsx("div", { className: "flex h-full bg-ui-bg-subtle", children: /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `mx-auto flex w-full min-w-0 flex-col ${activeModule === "products" ? "max-w-full gap-2 px-3 py-3 sm:px-4 sm:py-3" : "max-w-[1600px] gap-4 p-4"}`.trim(),
+      children: [
+        /* @__PURE__ */ jsx(Container, { className: "overflow-hidden rounded-xl border border-ui-border-base bg-ui-bg-base p-0 shadow-sm", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 px-4 py-4 sm:gap-5 sm:px-5 sm:py-5 xl:flex-row xl:items-end xl:justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1.5", children: [
+            /* @__PURE__ */ jsx(Heading, { level: "h1", className: "tracking-tight", children: "Analytics" }),
+            /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted text-sm", children: "Review orders, customers, and products in one organized workspace." })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex shrink-0 flex-wrap items-center gap-1",
+              role: "tablist",
+              "aria-label": "Analytics modules",
+              children: ANALYTICS_MODULES.map((m) => {
+                const active = activeModule === m.id;
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    role: "tab",
+                    "aria-selected": active,
+                    onClick: () => setActiveModule(m.id),
+                    className: `rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-fg-interactive focus-visible:ring-offset-2 focus-visible:ring-offset-ui-bg-base ${active ? "bg-ui-bg-base text-ui-fg-base shadow-sm" : "text-ui-fg-muted hover:bg-ui-bg-base/60 hover:text-ui-fg-base"}`.trim(),
+                    children: m.label
+                  },
+                  m.id
+                );
+              })
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 w-full", children: [
+          activeModule === "orders" && /* @__PURE__ */ jsx(OrdersDashboard, {}),
+          activeModule === "customers" && /* @__PURE__ */ jsx(CustomersDashboard, {}),
+          activeModule === "products" && /* @__PURE__ */ jsx(ProductsDashboard, {})
+        ] })
+      ]
+    }
+  ) }) });
 };
 const config = defineRouteConfig({
   label: "Analytics",