medusa-analytics 0.0.22 → 0.0.24

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

@@ -5,6 +5,64 @@ const adminSdk = require("@medusajs/admin-sdk");
 const icons = require("@medusajs/icons");
 const ui = require("@medusajs/ui");
 const recharts = require("recharts");
+const AnalyticsCurrencyContext = react.createContext(
+  null
+);
+function formatMoney(value, currencyCode, compact) {
+  return new Intl.NumberFormat(void 0, {
+    style: "currency",
+    currency: currencyCode,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: compact ? 1 : 0,
+    ...compact ? { notation: "compact" } : {}
+  }).format(value);
+}
+function AnalyticsCurrencyProvider({ children }) {
+  const [currencyCode, setCurrencyCode] = react.useState("USD");
+  react.useEffect(() => {
+    let cancelled = false;
+    fetch("/admin/analytics/store-context", { credentials: "include" }).then((res) => {
+      if (!res.ok) throw new Error(res.statusText);
+      return res.json();
+    }).then((body) => {
+      if (cancelled) return;
+      const code = typeof body.default_currency_code === "string" ? body.default_currency_code.trim().toUpperCase() : "";
+      if (code && /^[A-Z]{3}$/.test(code)) {
+        setCurrencyCode(code);
+      }
+    }).catch(() => {
+      if (!cancelled) setCurrencyCode("USD");
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  const formatCurrency = react.useCallback(
+    (value2) => formatMoney(value2, currencyCode, false),
+    [currencyCode]
+  );
+  const formatCompactCurrency = react.useCallback(
+    (value2) => formatMoney(value2, currencyCode, true),
+    [currencyCode]
+  );
+  const value = react.useMemo(
+    () => ({
+      currencyCode,
+      formatCurrency,
+      formatCompactCurrency
+    }),
+    [currencyCode, formatCurrency, formatCompactCurrency]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsCurrencyContext.Provider, { value, children });
+}
+function useAnalyticsCurrency() {
+  const ctx = react.useContext(AnalyticsCurrencyContext);
+  if (!ctx) {
+    throw new Error("useAnalyticsCurrency must be used within AnalyticsCurrencyProvider");
+  }
+  return ctx;
+}
+const ORDERS_ANALYTICS_MAX_FETCH = 5e4;
 const ACCENT_STYLES = {
   blue: {
     border: "border-sky-400/30",
@@ -263,30 +321,9 @@ function nonCancelledRevenue(d) {
   }
   return Math.max(0, d.total_revenue - (d.revenue_cancelled ?? 0));
 }
-function bucketAov(d) {
-  const ordNc = d.orders_count - d.cancelled_count;
-  if (ordNc <= 0) return 0;
-  return nonCancelledRevenue(d) / ordNc;
-}
 function isOrdersTodayPoint(value) {
   return isDailyOrderRow(value) && "isToday" in value && typeof value.isToday === "boolean";
 }
-function formatCurrency$1(value) {
-  return new Intl.NumberFormat("en-IN", {
-    style: "currency",
-    currency: "INR",
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 0
-  }).format(value);
-}
-function formatCompactCurrency$1(value) {
-  return new Intl.NumberFormat("en-IN", {
-    style: "currency",
-    currency: "INR",
-    notation: "compact",
-    maximumFractionDigits: 1
-  }).format(value);
-}
 function formatChartLabel$2(value) {
   if (!value) return "";
   const parsed = new Date(value);
@@ -303,15 +340,66 @@ function formatShortNumber$1(value) {
   }).format(value);
 }
 const SALES_GRANULARITY_TABS = [
-  { value: "day", label: "Day" },
   { value: "hour", label: "Hour" },
+  { value: "day", label: "Day" },
   { value: "week", label: "Week" },
   { value: "month", label: "Month" }
 ];
+function getSalesBreakdownOtPeriod(g) {
+  if (g === "day") return "one_week";
+  if (g === "week") return "two_months";
+  if (g === "month") return "one_year";
+  return null;
+}
 function monthKeyFromDateStr(dateStr) {
   if (dateStr.length >= 7) return dateStr.slice(0, 7);
   return dateStr;
 }
+function utcSundayWeekStartKeyFromDateStr(dateStr) {
+  const parsed = new Date(dateStr);
+  if (Number.isNaN(parsed.getTime())) return dateStr;
+  const y = parsed.getUTCFullYear();
+  const m = parsed.getUTCMonth();
+  const day = parsed.getUTCDate();
+  const dow = parsed.getUTCDay();
+  const start = new Date(Date.UTC(y, m, day - dow));
+  const ys = start.getUTCFullYear();
+  const ms = String(start.getUTCMonth() + 1).padStart(2, "0");
+  const ds = String(start.getUTCDate()).padStart(2, "0");
+  return `${ys}-${ms}-${ds}`;
+}
+function formatWeekStartDm(weekStartKey) {
+  const parsed = /* @__PURE__ */ new Date(`${weekStartKey}T00:00:00.000Z`);
+  if (Number.isNaN(parsed.getTime())) return weekStartKey;
+  return `${parsed.getUTCDate()}/${parsed.getUTCMonth() + 1}`;
+}
+function formatDayBreakdownDm(dateStr) {
+  const parsed = new Date(dateStr);
+  if (Number.isNaN(parsed.getTime())) return dateStr;
+  return `${parsed.getUTCDate()}/${parsed.getUTCMonth() + 1}`;
+}
+function toDateKeyUtcFromDate(d) {
+  const y = d.getUTCFullYear();
+  const m = String(d.getUTCMonth() + 1).padStart(2, "0");
+  const day = String(d.getUTCDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+function lastNWeekStartKeysUtc(n) {
+  const now = /* @__PURE__ */ new Date();
+  const todayUtc = new Date(
+    Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate())
+  );
+  const dow = todayUtc.getUTCDay();
+  const currentWeekStart = new Date(todayUtc);
+  currentWeekStart.setUTCDate(currentWeekStart.getUTCDate() - dow);
+  const keys = [];
+  for (let i = n - 1; i >= 0; i -= 1) {
+    const d = new Date(currentWeekStart);
+    d.setUTCDate(d.getUTCDate() - 7 * i);
+    keys.push(toDateKeyUtcFromDate(d));
+  }
+  return keys;
+}
 function formatMonthBucketLabel(ymKey) {
   const [ys, ms] = ymKey.split("-");
   const y = Number(ys);
@@ -319,27 +407,9 @@ function formatMonthBucketLabel(ymKey) {
   if (!Number.isFinite(y) || !Number.isFinite(m)) return ymKey;
   return new Intl.DateTimeFormat("en-IN", {
     month: "short",
-    year: "numeric",
     timeZone: "UTC"
   }).format(new Date(Date.UTC(y, m - 1, 1)));
 }
-function aggregateDailyOrdersForBreakdown(rows, keyFn, labelFn) {
-  const map = /* @__PURE__ */ new Map();
-  for (const d of rows) {
-    const key = keyFn(d);
-    const cur = map.get(key) ?? { orders: 0, revenue: 0, bucketRows: [] };
-    cur.orders += d.orders_count;
-    cur.revenue += d.total_revenue;
-    cur.bucketRows.push(d);
-    map.set(key, cur);
-  }
-  return Array.from(map.entries()).sort(([a], [b]) => a.localeCompare(b)).map(([key, v]) => ({
-    key,
-    label: labelFn(key, v.bucketRows),
-    orders_count: v.orders,
-    revenue: v.revenue
-  }));
-}
 function isSalesBreakdownBarRow(value) {
   if (typeof value !== "object" || value === null) return false;
   const v = value;
@@ -350,13 +420,14 @@ function SalesBreakdownTooltip({
   payload
 }) {
   var _a, _b;
+  const { formatCurrency } = useAnalyticsCurrency();
   if (!active || !(payload == null ? void 0 : payload.length)) return null;
   const row = isSalesBreakdownBarRow((_a = payload[0]) == null ? void 0 : _a.payload) ? (_b = payload[0]) == null ? void 0 : _b.payload : void 0;
   if (!row) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsTooltipCard, { variant: "compact", title: row.label, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       "Revenue: ",
-      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency$1(row.revenue) })
+      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency(row.revenue) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       "Orders:",
@@ -399,52 +470,223 @@ function OutcomesTrendTooltip({
     /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(Number(entry.value) || 0).toLocaleString() })
   ] }, String(entry.name))) });
 }
-function isTrendRowDetailed(value) {
-  if (!isDailyOrderRow(value)) return false;
-  const v = value;
-  return typeof v.aov === "number" && typeof v.prev_revenue === "number" && typeof v.prev_orders === "number" && typeof v.prev_aov === "number";
+const TREND_MIX_PIE_COLORS = {
+  revenue: "#c084fc",
+  orders: "#7dd3fc",
+  aov: "#fdba74"
+};
+function buildTrendMixPieSlices(dailyOrders, trendRevenueTotal, trendOrdersTotal, formatCompactCurrencyFn, formatCurrencyFn) {
+  const ncRev = dailyOrders.reduce((s, d) => s + nonCancelledRevenue(d), 0);
+  const ncOrd = dailyOrders.reduce(
+    (s, d) => s + Math.max(0, d.orders_count - d.cancelled_count),
+    0
+  );
+  const windowAov = ncOrd > 0 ? ncRev / ncOrd : 0;
+  const lr = Math.log1p(Math.max(trendRevenueTotal, 0));
+  const lo = Math.log1p(Math.max(trendOrdersTotal, 0));
+  const la = Math.log1p(Math.max(windowAov, 0));
+  const sumW = lr + lo + la;
+  const share = (w) => sumW > 0 ? w / sumW * 100 : 100 / 3;
+  const sR = share(lr);
+  const sO = share(lo);
+  const sA = share(la);
+  return [
+    {
+      key: "revenue",
+      name: "Revenue",
+      value: sR,
+      fill: TREND_MIX_PIE_COLORS.revenue,
+      sharePercent: sR,
+      formattedPrimary: formatCompactCurrencyFn(trendRevenueTotal),
+      formattedDetail: "Total revenue for this range, all days summed."
+    },
+    {
+      key: "orders",
+      name: "Orders",
+      value: sO,
+      fill: TREND_MIX_PIE_COLORS.orders,
+      sharePercent: sO,
+      formattedPrimary: Math.floor(trendOrdersTotal).toLocaleString(),
+      formattedDetail: "Order count in this range from daily totals."
+    },
+    {
+      key: "aov",
+      name: "AOV",
+      value: sA,
+      fill: TREND_MIX_PIE_COLORS.aov,
+      sharePercent: sA,
+      formattedPrimary: formatCurrencyFn(windowAov),
+      formattedDetail: "Average per non-cancelled order for the window."
+    }
+  ];
 }
-function CombinedMetricsTooltip({
-  active,
-  payload
-}) {
-  var _a, _b;
-  if (!active || !(payload == null ? void 0 : payload.length)) return null;
-  const row = isTrendRowDetailed((_a = payload[0]) == null ? void 0 : _a.payload) ? (_b = payload[0]) == null ? void 0 : _b.payload : void 0;
-  if (!row) return null;
-  const title = row.label ?? formatChartLabel$2(row.date);
-  return /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsTooltipCard, { variant: "compact", title, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      "Revenue:",
-      " ",
-      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCompactCurrency$1(row.total_revenue) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-ui-fg-muted", children: [
-        " ",
-        "· prev ",
-        formatCompactCurrency$1(row.prev_revenue)
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      "Orders:",
-      " ",
-      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(row.orders_count).toLocaleString() }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-ui-fg-muted", children: [
-        " ",
-        "· prev ",
-        Math.floor(row.prev_orders).toLocaleString()
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      "AOV (non-canc.):",
-      " ",
-      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency$1(row.aov) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-ui-fg-muted", children: [
-        " ",
-        "· prev ",
-        formatCurrency$1(row.prev_aov)
-      ] })
-    ] })
-  ] });
+const TREND_MIX_LEADER_STROKE = "#b8956a";
+function isTrendMixPayload(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const k = value.key;
+  return k === "revenue" || k === "orders" || k === "aov";
+}
+function splitDetailTwoLines(s, firstLineMax) {
+  const t = s.trim();
+  if (t.length <= firstLineMax) return [t, ""];
+  const sliceEnd = t.lastIndexOf(" ", firstLineMax);
+  const cut = sliceEnd > firstLineMax * 0.45 ? sliceEnd : firstLineMax;
+  const a = t.slice(0, cut).trim();
+  const b = t.slice(cut).trim();
+  return b ? [a, b] : [a, ""];
+}
+function TrendMixExplodedSector(props) {
+  const {
+    cx,
+    cy,
+    innerRadius,
+    outerRadius,
+    startAngle,
+    endAngle,
+    fill,
+    stroke,
+    strokeWidth,
+    cornerRadius
+  } = props;
+  const midDeg = (Number(startAngle) + Number(endAngle)) / 2;
+  const rad = -midDeg * Math.PI / 180;
+  const offset = 19;
+  const ncx = (Number(cx) || 0) + offset * Math.cos(rad);
+  const ncy = (Number(cy) || 0) + offset * Math.sin(rad);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    recharts.Sector,
+    {
+      cx: ncx,
+      cy: ncy,
+      innerRadius,
+      outerRadius,
+      startAngle,
+      endAngle,
+      fill,
+      stroke,
+      strokeWidth,
+      cornerRadius,
+      style: {
+        filter: "drop-shadow(0 5px 6px rgba(0,0,0,0.5)) drop-shadow(0 2px 2px rgba(0,0,0,0.35))"
+      }
+    }
+  );
+}
+function createTrendMixInfographicLabel(slices) {
+  return function TrendMixInfographicLabel(props) {
+    const { cx, cy, midAngle, outerRadius, percent, payload, index } = props;
+    const slice = typeof index === "number" && slices[index] !== void 0 ? slices[index] : isTrendMixPayload(payload) ? payload : null;
+    if (slice === null || cx === void 0 || cy === void 0 || midAngle === void 0) {
+      return null;
+    }
+    const p = percent ?? 0;
+    const ang = midAngle;
+    const RAD = Math.PI / 180;
+    const cos = Math.cos(-RAD * ang);
+    const sin = Math.sin(-RAD * ang);
+    const or = Number(outerRadius);
+    if (!Number.isFinite(or)) return null;
+    const rimPad = 24;
+    const sx = Number(cx) + (or + rimPad) * cos;
+    const sy = Number(cy) + (or + rimPad) * sin;
+    const elbow = 30;
+    const mx = sx + elbow * cos;
+    const my = sy;
+    const extend = 58;
+    const rightSide = cos >= 0;
+    const hx = mx + (rightSide ? extend : -58);
+    const anchor = rightSide ? "start" : "end";
+    const tx = hx + (rightSide ? 4 : -4);
+    const yRule = my + 14;
+    const pctStr = `${(p * 100).toFixed(0)}%`;
+    const ruleHalfW = 52;
+    const xRuleA = rightSide ? tx - 2 : tx - ruleHalfW;
+    const xRuleB = rightSide ? tx + ruleHalfW : tx + 2;
+    const [detail1, detail2] = splitDetailTwoLines(slice.formattedDetail, 46);
+    return /* @__PURE__ */ jsxRuntime.jsxs("g", { "aria-hidden": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "polyline",
+        {
+          points: `${sx},${sy} ${mx},${my} ${hx},${yRule - 18}`,
+          fill: "none",
+          stroke: TREND_MIX_LEADER_STROKE,
+          strokeWidth: 1.15,
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "circle",
+        {
+          cx: sx,
+          cy: sy,
+          r: 3.5,
+          fill: "none",
+          stroke: TREND_MIX_LEADER_STROKE,
+          strokeWidth: 1.15
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "line",
+        {
+          x1: xRuleA,
+          y1: yRule,
+          x2: xRuleB,
+          y2: yRule,
+          stroke: TREND_MIX_LEADER_STROKE,
+          strokeWidth: 1.15,
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "text",
+        {
+          x: tx,
+          y: yRule - 8,
+          textAnchor: anchor,
+          fill: "#f8fafc",
+          className: "text-[13px] font-bold tabular-nums",
+          children: pctStr
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "text",
+        {
+          x: tx,
+          y: yRule + 16,
+          textAnchor: anchor,
+          fill: "#f1f5f9",
+          className: "text-[9px] font-semibold uppercase tracking-[0.16em]",
+          children: slice.name
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "text",
+        {
+          x: tx,
+          y: yRule + 32,
+          textAnchor: anchor,
+          fill: "#f8fafc",
+          className: "text-[11px] font-bold tabular-nums",
+          children: slice.formattedPrimary
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "text",
+        {
+          x: tx,
+          y: yRule + 46,
+          textAnchor: anchor,
+          fill: "#94a3b8",
+          className: "text-[8px] leading-snug",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("tspan", { x: tx, dy: 0, children: detail1 }),
+            detail2 ? /* @__PURE__ */ jsxRuntime.jsx("tspan", { x: tx, dy: 11, children: detail2 }) : null
+          ]
+        }
+      )
+    ] });
+  };
 }
 const KPI_ICON_BG$2 = {
   green: "bg-emerald-500/20",
@@ -518,7 +760,8 @@ function EmptyAnalyticsPanel$1({
   ] });
 }
 function OrdersDashboard() {
-  var _a, _b;
+  var _a, _b, _c, _d, _e;
+  const { formatCurrency, formatCompactCurrency } = useAnalyticsCurrency();
   const [data, setData] = react.useState(null);
   const [loading, setLoading] = react.useState(true);
   const [error, setError] = react.useState(null);
@@ -528,6 +771,7 @@ function OrdersDashboard() {
   const [overTimePeriod, setOverTimePeriod] = react.useState("one_week");
   const [overTimeLoading, setOverTimeLoading] = react.useState(true);
   const [overTimeError, setOverTimeError] = react.useState(null);
+  const [overTimeOrdersMeta, setOverTimeOrdersMeta] = react.useState(null);
   const [ordersInsights, setOrdersInsights] = react.useState(null);
   const [insightsLoading, setInsightsLoading] = react.useState(true);
   const [insightsError, setInsightsError] = react.useState(null);
@@ -535,6 +779,81 @@ function OrdersDashboard() {
   const [todayContextLoading, setTodayContextLoading] = react.useState(true);
   const [todayContextError, setTodayContextError] = react.useState(null);
   const [salesGranularity, setSalesGranularity] = react.useState("day");
+  const [salesBreakdownDaily, setSalesBreakdownDaily] = react.useState(
+    []
+  );
+  const [salesBreakdownOtLoading, setSalesBreakdownOtLoading] = react.useState(true);
+  const [salesBreakdownOtError, setSalesBreakdownOtError] = react.useState(null);
+  const [salesBreakdownHourlyRolling, setSalesBreakdownHourlyRolling] = react.useState([]);
+  const [salesBreakdownHourlyLoading, setSalesBreakdownHourlyLoading] = react.useState(false);
+  const [salesBreakdownHourlyError, setSalesBreakdownHourlyError] = react.useState(null);
+  const salesBreakdownOtPeriod = react.useMemo(
+    () => getSalesBreakdownOtPeriod(salesGranularity),
+    [salesGranularity]
+  );
+  react.useEffect(() => {
+    if (salesBreakdownOtPeriod === null) {
+      setSalesBreakdownDaily([]);
+      setSalesBreakdownOtLoading(false);
+      setSalesBreakdownOtError(null);
+      return;
+    }
+    let cancelled = false;
+    setSalesBreakdownOtLoading(true);
+    setSalesBreakdownOtError(null);
+    fetch(
+      `/admin/analytics/orders-over-time?period=${salesBreakdownOtPeriod}`,
+      { credentials: "include" }
+    ).then((res) => {
+      if (!res.ok) throw new Error(res.statusText);
+      return res.json();
+    }).then((body) => {
+      if (!cancelled) {
+        setSalesBreakdownDaily(body.dailyOrders ?? []);
+      }
+    }).catch((e) => {
+      if (!cancelled) {
+        setSalesBreakdownOtError(e instanceof Error ? e.message : String(e));
+      }
+    }).finally(() => {
+      if (!cancelled) setSalesBreakdownOtLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [salesBreakdownOtPeriod]);
+  react.useEffect(() => {
+    if (salesGranularity !== "hour") {
+      setSalesBreakdownHourlyRolling([]);
+      setSalesBreakdownHourlyLoading(false);
+      setSalesBreakdownHourlyError(null);
+      return;
+    }
+    let cancelled = false;
+    setSalesBreakdownHourlyLoading(true);
+    setSalesBreakdownHourlyError(null);
+    fetch("/admin/analytics/orders-insights?last_hours=24", {
+      credentials: "include"
+    }).then((res) => {
+      if (!res.ok) throw new Error(res.statusText);
+      return res.json();
+    }).then((body) => {
+      if (!cancelled) {
+        setSalesBreakdownHourlyRolling(body.hourly_rolling ?? []);
+      }
+    }).catch((e) => {
+      if (!cancelled) {
+        setSalesBreakdownHourlyError(
+          e instanceof Error ? e.message : String(e)
+        );
+      }
+    }).finally(() => {
+      if (!cancelled) setSalesBreakdownHourlyLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [salesGranularity]);
   react.useEffect(() => {
     let cancelled = false;
     setLoading(true);
@@ -566,9 +885,13 @@ function OrdersDashboard() {
       if (!cancelled) {
         setDailyOrders(body.dailyOrders ?? []);
         setPreviousPeriodDailyOrders(body.previousPeriodDailyOrders ?? []);
+        setOverTimeOrdersMeta(body.ordersAnalyticsMeta ?? null);
       }
     }).catch((e) => {
-      if (!cancelled) setOverTimeError(e instanceof Error ? e.message : String(e));
+      if (!cancelled) {
+        setOverTimeError(e instanceof Error ? e.message : String(e));
+        setOverTimeOrdersMeta(null);
+      }
     }).finally(() => {
       if (!cancelled) setOverTimeLoading(false);
     });
@@ -641,7 +964,7 @@ function OrdersDashboard() {
   const primaryStats = data ? [
     {
       label: "Total revenue",
-      value: formatCurrency$1(data.totalRevenue),
+      value: formatCurrency(data.totalRevenue),
       helper: "Non-cancelled orders",
       accent: "green"
     },
@@ -659,7 +982,7 @@ function OrdersDashboard() {
     },
     {
       label: "Average order value",
-      value: formatCurrency$1(data.aov),
+      value: formatCurrency(data.aov),
       helper: "Per non-cancelled order",
       accent: "amber"
     }
@@ -709,80 +1032,112 @@ function OrdersDashboard() {
   );
   const revenueVsPreviousPercent = previousPeriodRevenueTotal > 0 ? (trendRevenueTotal - previousPeriodRevenueTotal) / previousPeriodRevenueTotal * 100 : null;
   const ordersVsPreviousPercent = previousPeriodOrdersTotal > 0 ? (trendOrdersTotal - previousPeriodOrdersTotal) / previousPeriodOrdersTotal * 100 : null;
-  const trendRowsDetailed = react.useMemo(() => {
-    return dailyOrders.map((d, i) => {
-      const prev = previousPeriodDailyOrders[i];
-      return {
-        ...d,
-        aov: bucketAov(d),
-        prev_revenue: (prev == null ? void 0 : prev.total_revenue) ?? 0,
-        prev_orders: (prev == null ? void 0 : prev.orders_count) ?? 0,
-        prev_aov: prev ? bucketAov(prev) : 0
-      };
-    });
-  }, [dailyOrders, previousPeriodDailyOrders]);
-  const hourlyChartRows = react.useMemo(() => {
-    if (!ordersInsights) return [];
-    return ordersInsights.byHour.map((h) => ({
-      label: `${String(h.hour).padStart(2, "0")}:00`,
-      hour: h.hour,
-      orders_count: h.orders_count,
-      revenue: h.revenue
-    }));
-  }, [ordersInsights]);
+  const trendMixPieSlices = react.useMemo(
+    () => buildTrendMixPieSlices(
+      dailyOrders,
+      trendRevenueTotal,
+      trendOrdersTotal,
+      formatCompactCurrency,
+      formatCurrency
+    ),
+    [
+      dailyOrders,
+      trendRevenueTotal,
+      trendOrdersTotal,
+      formatCompactCurrency,
+      formatCurrency
+    ]
+  );
+  const trendMixPieLabelRenderer = react.useMemo(
+    () => createTrendMixInfographicLabel(trendMixPieSlices),
+    [trendMixPieSlices]
+  );
+  const trendMixRangeFootnote = react.useMemo(() => {
+    const ncRev = dailyOrders.reduce((s, d) => s + nonCancelledRevenue(d), 0);
+    const ncOrd = dailyOrders.reduce(
+      (s, d) => s + Math.max(0, d.orders_count - d.cancelled_count),
+      0
+    );
+    const windowAov = ncOrd > 0 ? ncRev / ncOrd : 0;
+    return {
+      revenue: formatCompactCurrency(trendRevenueTotal),
+      orders: Math.floor(trendOrdersTotal).toLocaleString(),
+      aov: formatCurrency(windowAov)
+    };
+  }, [
+    dailyOrders,
+    trendRevenueTotal,
+    trendOrdersTotal,
+    formatCompactCurrency,
+    formatCurrency
+  ]);
   const salesBreakdownChartRows = react.useMemo(() => {
     if (salesGranularity === "hour") {
-      return hourlyChartRows.map((h) => ({
-        key: `hour-${h.hour}`,
-        label: h.label,
-        orders_count: h.orders_count,
-        revenue: h.revenue
+      return salesBreakdownHourlyRolling.map((b, i) => ({
+        key: `rolling-${i}`,
+        label: b.label,
+        orders_count: b.orders_count,
+        revenue: b.revenue
       }));
     }
     if (salesGranularity === "week") {
-      if (!ordersInsights) return [];
-      return ordersInsights.byWeekday.map((w) => ({
-        key: `weekday-${w.weekday}`,
-        label: w.label,
-        orders_count: w.orders_count,
-        revenue: w.revenue
-      }));
+      const targetKeys = lastNWeekStartKeysUtc(7);
+      const agg = /* @__PURE__ */ new Map();
+      for (const d of salesBreakdownDaily) {
+        const wk = utcSundayWeekStartKeyFromDateStr(d.date);
+        const cur = agg.get(wk) ?? { orders: 0, revenue: 0 };
+        cur.orders += d.orders_count;
+        cur.revenue += d.total_revenue;
+        agg.set(wk, cur);
+      }
+      return targetKeys.map((key) => {
+        var _a2, _b2;
+        return {
+          key,
+          label: formatWeekStartDm(key),
+          orders_count: ((_a2 = agg.get(key)) == null ? void 0 : _a2.orders) ?? 0,
+          revenue: ((_b2 = agg.get(key)) == null ? void 0 : _b2.revenue) ?? 0
+        };
+      });
     }
     if (salesGranularity === "month") {
-      return aggregateDailyOrdersForBreakdown(
-        dailyOrders,
-        (d) => monthKeyFromDateStr(d.date),
-        (ymKey) => formatMonthBucketLabel(ymKey)
-      );
+      return salesBreakdownDaily.map((d) => ({
+        key: d.date,
+        label: d.label ?? formatMonthBucketLabel(monthKeyFromDateStr(d.date)),
+        orders_count: d.orders_count,
+        revenue: d.total_revenue
+      }));
     }
-    return dailyOrders.map((d) => ({
+    return salesBreakdownDaily.map((d) => ({
       key: d.date,
-      label: d.label ?? formatChartLabel$2(d.date),
+      label: formatDayBreakdownDm(d.date),
       orders_count: d.orders_count,
       revenue: d.total_revenue
     }));
-  }, [salesGranularity, dailyOrders, hourlyChartRows, ordersInsights]);
+  }, [
+    salesGranularity,
+    salesBreakdownDaily,
+    salesBreakdownHourlyRolling
+  ]);
   const salesBreakdownDescription = react.useMemo(() => {
-    var _a2;
-    const rangeLabel = ((_a2 = OVER_TIME_PERIODS.find((p) => p.value === overTimePeriod)) == null ? void 0 : _a2.label) ?? "selected range";
-    const insightsHint = `Order-time breakdown uses last ${insightsWindowDays} days (UTC).`;
     switch (salesGranularity) {
-      case "day":
-        return `Revenue by calendar day for ${rangeLabel} (aligned with Revenue & orders).`;
       case "hour":
-        return `${insightsHint} Bars show revenue by hour of day.`;
+        return "Last 24 hours from now (UTC): one bar per clock hour in the rolling window.";
+      case "day":
+        return "Last 7 calendar days (UTC), one bar per day — axis day/month.";
       case "week":
-        return `Revenue by UTC weekday — last ${insightsWindowDays} days.`;
+        return "Last 7 weeks (UTC, weeks start Sunday); axis shows each week’s start as day/month.";
       case "month":
-        return `Revenue summed by calendar month (UTC) across ${rangeLabel}.`;
+        return "Last 12 calendar months through the current month (UTC) — Jan, Feb, Mar, …";
       default:
         return "";
     }
-  }, [salesGranularity, overTimePeriod, insightsWindowDays]);
+  }, [salesGranularity]);
   const salesBreakdownXAxisInterval = react.useMemo(() => {
     const n = salesBreakdownChartRows.length;
     if (salesGranularity === "hour") return 3;
-    if (salesGranularity === "day" && n > 24) return Math.max(0, Math.ceil(n / 10) - 1);
+    if (salesGranularity === "day" && n > 24)
+      return Math.max(0, Math.ceil(n / 10) - 1);
     return 0;
   }, [salesGranularity, salesBreakdownChartRows.length]);
   const ordersVsDraftsPie = react.useMemo(() => {
@@ -821,11 +1176,13 @@ function OrdersDashboard() {
       };
     });
   }, [dailyOrders]);
+  const selectedTrendPeriodLabel = ((_b = OVER_TIME_PERIODS.find((p) => p.value === overTimePeriod)) == null ? void 0 : _b.label) ?? "Selected range";
+  const orderSampleLikelyTruncated = (((_c = data == null ? void 0 : data.ordersAnalyticsMeta) == null ? void 0 : _c.likely_truncated) ?? false) || ((overTimeOrdersMeta == null ? void 0 : overTimeOrdersMeta.likely_truncated) ?? false) || (((_d = ordersInsights == null ? void 0 : ordersInsights.ordersAnalyticsMeta) == null ? void 0 : _d.likely_truncated) ?? false);
   const quickPulseMetrics = [
     {
       label: "Range revenue",
-      value: formatCompactCurrency$1(trendRevenueTotal),
-      helper: selectedSummaryPeriod,
+      value: formatCompactCurrency(trendRevenueTotal),
+      helper: selectedTrendPeriodLabel,
       accentClassName: "border-emerald-400/25 bg-emerald-500/5"
     },
     {
@@ -842,7 +1199,7 @@ function OrdersDashboard() {
     },
     {
       label: "Peak revenue day",
-      value: peakRevenuePoint ? formatCompactCurrency$1(peakRevenuePoint.total_revenue) : "—",
+      value: peakRevenuePoint ? formatCompactCurrency(peakRevenuePoint.total_revenue) : "—",
       helper: (peakRevenuePoint == null ? void 0 : peakRevenuePoint.label) ?? formatChartLabel$2(peakRevenuePoint == null ? void 0 : peakRevenuePoint.date),
       accentClassName: "border-amber-400/25 bg-amber-500/5"
     }
@@ -861,20 +1218,14 @@ function OrdersDashboard() {
   if (error || !data) {
     return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger", children: error ?? "Failed to load analytics" }) });
   }
-  const needsSalesOverTime = salesGranularity === "day" || salesGranularity === "month";
-  const needsSalesInsights = salesGranularity === "hour" || salesGranularity === "week";
+  const salesBreakdownWaiting = salesGranularity === "hour" ? salesBreakdownHourlyLoading : salesBreakdownOtLoading;
+  const salesBreakdownFetchError = salesGranularity === "hour" ? salesBreakdownHourlyError : salesBreakdownOtError;
   const salesBreakdownBody = (() => {
-    if (needsSalesOverTime && overTimeLoading) {
-      return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[min(176px,28vh)] items-center justify-center py-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading chart…" }) }) });
-    }
-    if (needsSalesOverTime && overTimeError) {
-      return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[min(176px,28vh)] items-center justify-center px-2 py-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-center text-xs", children: overTimeError }) }) });
-    }
-    if (needsSalesInsights && insightsLoading) {
+    if (salesBreakdownWaiting) {
       return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[min(176px,28vh)] items-center justify-center py-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading chart…" }) }) });
     }
-    if (needsSalesInsights && insightsError) {
-      return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[min(176px,28vh)] items-center justify-center px-2 py-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-center text-xs", children: insightsError }) }) });
+    if (salesBreakdownFetchError) {
+      return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[min(176px,28vh)] items-center justify-center px-2 py-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-center text-xs", children: salesBreakdownFetchError }) }) });
     }
     if (salesBreakdownChartRows.length === 0) {
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -916,7 +1267,7 @@ function OrdersDashboard() {
               tick: CHART_AXIS_TICK_SM$1,
               tickLine: false,
               axisLine: false,
-              tickFormatter: (v) => formatCompactCurrency$1(Number(v))
+              tickFormatter: (v) => formatCompactCurrency(Number(v))
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -940,6 +1291,19 @@ function OrdersDashboard() {
     ) }) }) });
   })();
   return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsDashboardShell, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden rounded-2xl border border-ui-border-base/80 bg-ui-bg-base shadow-sm", children: [
+    orderSampleLikelyTruncated ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "border-b border-amber-400/30 bg-amber-500/10 px-4 py-2.5 sm:px-5",
+        role: "status",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-ui-fg-base text-xs leading-snug", children: [
+          "Order analytics loaded up to ",
+          ORDERS_ANALYTICS_MAX_FETCH.toLocaleString(),
+          " ",
+          "orders per request. If you have more orders, KPIs and charts may under-count. Plan server-side aggregation or pagination for exact totals at very high volume."
+        ] })
+      }
+    ) : null,
     /* @__PURE__ */ jsxRuntime.jsx(
       AnalyticsDashboardHeader,
       {
@@ -1028,10 +1392,10 @@ function OrdersDashboard() {
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-1.5 sm:grid-cols-3", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Window revenue" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: formatCompactCurrency$1(trendRevenueTotal) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: formatCompactCurrency(trendRevenueTotal) }),
                   /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-ui-fg-muted text-[10px]", children: [
                     "Avg/day ",
-                    formatCompactCurrency$1(trendAverageRevenue)
+                    formatCompactCurrency(trendAverageRevenue)
                   ] })
                 ] }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
@@ -1054,187 +1418,63 @@ function OrdersDashboard() {
               ] }),
               !overTimeLoading && !overTimeError && dailyOrders.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsChartSurface, { variant: "atlas", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1 flex flex-col gap-0.5 sm:flex-row sm:items-start sm:justify-between", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Revenue, orders & AOV" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[9px] leading-snug", children: "One timeline · solid = this range, dashed = previous period (same length)" })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-x-3 gap-y-0.5 text-[9px] text-ui-fg-muted sm:justify-end", children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2 w-2 shrink-0 rounded-full bg-fuchsia-500" }),
-                        "Revenue"
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2 w-2 shrink-0 rounded-full bg-sky-400" }),
-                        "Orders"
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2 w-2 shrink-0 rounded-full bg-amber-500" }),
-                        "AOV"
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "span",
-                          {
-                            className: "h-0 w-4 shrink-0 border-t border-dashed border-slate-400",
-                            "aria-hidden": true
-                          }
-                        ),
-                        "Previous"
-                      ] })
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 min-w-0", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Revenue, orders & AOV" }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-ui-fg-muted text-[9px] leading-snug", children: [
+                      "Floating wedges with open center · leader labels only (no hover). Window:",
+                      " ",
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui-fg-subtle", children: selectedTrendPeriodLabel }),
+                      "."
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[min(220px,32vh)] min-h-[156px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                    recharts.ComposedChart,
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
                     {
-                      data: trendRowsDetailed,
-                      margin: { top: 6, right: 8, left: 2, bottom: 4 },
+                      className: "w-full rounded-2xl bg-[radial-gradient(ellipse_at_50%_42%,rgba(148,163,184,0.14)_0%,transparent_58%)] py-1",
+                      role: "img",
+                      "aria-label": `Revenue, orders, and AOV for ${selectedTrendPeriodLabel}. Values are shown on leader labels.`,
                       children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.CartesianGrid,
-                          {
-                            strokeDasharray: "3 3",
-                            vertical: false,
-                            stroke: "rgba(148,163,184,0.12)"
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.XAxis,
-                          {
-                            dataKey: "date",
-                            tick: CHART_AXIS_TICK_SM$1,
-                            tickLine: false,
-                            axisLine: false,
-                            tickFormatter: (value, index) => {
-                              const row = trendRowsDetailed[index];
-                              return (row == null ? void 0 : row.label) ?? formatChartLabel$2(String(value));
-                            }
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.YAxis,
-                          {
-                            yAxisId: "orders",
-                            width: 30,
-                            tick: CHART_AXIS_TICK_SM$1,
-                            tickLine: false,
-                            axisLine: false,
-                            allowDecimals: false,
-                            tickFormatter: (v) => Math.floor(Number(v) || 0).toLocaleString()
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.YAxis,
-                          {
-                            yAxisId: "revenue",
-                            orientation: "right",
-                            width: 42,
-                            tick: CHART_AXIS_TICK_SM$1,
-                            tickLine: false,
-                            axisLine: false,
-                            tickFormatter: (v) => formatCompactCurrency$1(Number(v))
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.YAxis,
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[min(340px,48vh)] min-h-[288px] w-full", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.PieChart,
                           {
-                            yAxisId: "aov",
-                            orientation: "right",
-                            width: 40,
-                            tick: CHART_AXIS_TICK_SM$1,
-                            tickLine: false,
-                            axisLine: false,
-                            tickFormatter: (v) => formatCompactCurrency$1(Number(v))
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Tooltip,
-                          {
-                            content: /* @__PURE__ */ jsxRuntime.jsx(CombinedMetricsTooltip, {}),
-                            cursor: {
-                              stroke: "rgba(248, 250, 252, 0.35)",
-                              strokeWidth: 1
-                            }
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Line,
-                          {
-                            yAxisId: "orders",
-                            type: "natural",
-                            dataKey: "orders_count",
-                            name: "Orders",
-                            stroke: "#38BDF8",
-                            strokeWidth: 2,
-                            dot: false
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Line,
-                          {
-                            yAxisId: "orders",
-                            type: "natural",
-                            dataKey: "prev_orders",
-                            name: "Orders (prev)",
-                            stroke: "#64748b",
-                            strokeWidth: 1.5,
-                            strokeDasharray: "5 4",
-                            dot: false
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Line,
-                          {
-                            yAxisId: "revenue",
-                            type: "natural",
-                            dataKey: "total_revenue",
-                            name: "Revenue",
-                            stroke: "#D946EF",
-                            strokeWidth: 2,
-                            dot: false
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Line,
-                          {
-                            yAxisId: "revenue",
-                            type: "natural",
-                            dataKey: "prev_revenue",
-                            name: "Revenue (prev)",
-                            stroke: "#64748b",
-                            strokeWidth: 1.5,
-                            strokeDasharray: "5 4",
-                            dot: false
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Line,
-                          {
-                            yAxisId: "aov",
-                            type: "natural",
-                            dataKey: "aov",
-                            name: "AOV",
-                            stroke: "#D97706",
-                            strokeWidth: 2,
-                            dot: false
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          recharts.Line,
-                          {
-                            yAxisId: "aov",
-                            type: "natural",
-                            dataKey: "prev_aov",
-                            name: "AOV (prev)",
-                            stroke: "#64748b",
-                            strokeWidth: 1.5,
-                            strokeDasharray: "5 4",
-                            dot: false
+                            margin: { top: 20, right: 132, bottom: 28, left: 132 },
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              recharts.Pie,
+                              {
+                                data: trendMixPieSlices,
+                                dataKey: "value",
+                                nameKey: "name",
+                                cx: "50%",
+                                cy: "50%",
+                                startAngle: 90,
+                                endAngle: -270,
+                                innerRadius: "26%",
+                                outerRadius: "46%",
+                                paddingAngle: 9,
+                                cornerRadius: 8,
+                                stroke: "rgba(15,23,42,0.55)",
+                                strokeWidth: 2,
+                                shape: TrendMixExplodedSector,
+                                label: trendMixPieLabelRenderer,
+                                labelLine: false,
+                                isAnimationActive: false,
+                                children: trendMixPieSlices.map((slice) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: slice.fill }, slice.key))
+                              }
+                            )
                           }
-                        )
+                        ) }) }),
+                        /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "mt-2 px-1 text-center text-[9px] leading-snug text-ui-fg-muted", children: [
+                          "Range snapshot — Revenue ",
+                          trendMixRangeFootnote.revenue,
+                          " · Orders",
+                          " ",
+                          trendMixRangeFootnote.orders,
+                          " · AOV ",
+                          trendMixRangeFootnote.aov
+                        ] })
                       ]
                     }
-                  ) }) })
+                  )
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsChartSurface, { variant: "atlas", className: "mt-1.5", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mb-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Revenue breakdown (stacked — by order status)" }),
@@ -1259,9 +1499,11 @@ function OrdersDashboard() {
                             tick: CHART_AXIS_TICK$2,
                             tickLine: false,
                             axisLine: false,
-                            tickFormatter: (value, index) => {
-                              const row = dailyOrders[index];
-                              return (row == null ? void 0 : row.label) ?? formatChartLabel$2(value);
+                            tickFormatter: (value) => {
+                              const row = dailyOrders.find(
+                                (d) => d.date === String(value)
+                              );
+                              return (row == null ? void 0 : row.label) ?? formatChartLabel$2(String(value));
                             }
                           }
                         ),
@@ -1269,7 +1511,7 @@ function OrdersDashboard() {
                           recharts.YAxis,
                           {
                             tick: CHART_AXIS_TICK$2,
-                            tickFormatter: (v) => formatCompactCurrency$1(Number(v))
+                            tickFormatter: (v) => formatCompactCurrency(Number(v))
                           }
                         ),
                         /* @__PURE__ */ jsxRuntime.jsx(
@@ -1279,7 +1521,7 @@ function OrdersDashboard() {
                               p.name,
                               ":",
                               " ",
-                              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency$1(Number(p.value) || 0) })
+                              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency(Number(p.value) || 0) })
                             ] }, String(p.name))) }) : null
                           }
                         ),
@@ -1354,7 +1596,7 @@ function OrdersDashboard() {
             {
               variant: "atlas",
               title: "Order → fulfillment funnel",
-              description: `Stages by order created date (UTC), same range as Revenue & orders (${((_b = OVER_TIME_PERIODS.find((p) => p.value === overTimePeriod)) == null ? void 0 : _b.label) ?? "period"}). Not storefront visitors.`,
+              description: `Stages by order created date (UTC), same range as Revenue & orders (${((_e = OVER_TIME_PERIODS.find((p) => p.value === overTimePeriod)) == null ? void 0 : _e.label) ?? "period"}). Not storefront visitors.`,
               children: overTimeLoading ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[120px] items-center justify-center py-3", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) }) : overTimeError ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[120px] items-center justify-center px-2 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-center text-xs", children: overTimeError }) }) }) : funnelTimeSeriesRows.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsChartSurface, { variant: "atlas", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mb-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-ui-fg-muted", children: "Stage counts (time series)" }),
@@ -1835,29 +2077,32 @@ function OrdersDashboard() {
             title: "Sales breakdown",
             description: salesBreakdownDescription,
             actionsBare: true,
-            actions: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: "flex flex-wrap items-center gap-1 rounded-lg border border-ui-border-base bg-ui-bg-subtle/40 p-0.5",
-                role: "tablist",
-                "aria-label": "Sales breakdown granularity",
-                children: SALES_GRANULARITY_TABS.map((tab) => {
-                  const selected = salesGranularity === tab.value;
-                  return /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      role: "tab",
-                      "aria-selected": selected,
-                      onClick: () => setSalesGranularity(tab.value),
-                      className: `rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-fg-interactive ${selected ? "bg-ui-bg-base text-ui-fg-base shadow-sm" : "text-ui-fg-muted hover:text-ui-fg-base"}`,
-                      children: tab.label
-                    },
-                    tab.value
-                  );
-                })
-              }
-            ),
+            actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-stretch gap-1 sm:flex-row sm:items-center sm:gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Label,
+                {
+                  htmlFor: "sales-breakdown-granularity",
+                  className: "shrink-0 text-ui-fg-muted text-xs font-medium",
+                  children: "Breakdown"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "select",
+                {
+                  id: "sales-breakdown-granularity",
+                  value: salesGranularity,
+                  onChange: (e) => {
+                    const v = e.target.value;
+                    if (v === "hour" || v === "day" || v === "week" || v === "month") {
+                      setSalesGranularity(v);
+                    }
+                  },
+                  className: SELECT_CLASS_NAME$2,
+                  "aria-label": "Sales breakdown time bucket",
+                  children: SALES_GRANULARITY_TABS.map((tab) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: tab.value, children: tab.value === "hour" ? "Hour (last 24h)" : tab.value === "day" ? "Day (last 7 days)" : tab.value === "week" ? "Week (last 7 weeks)" : "Month (last 12 months)" }, tab.value))
+                }
+              )
+            ] }),
             children: salesBreakdownBody
           }
         ),
@@ -2021,7 +2266,7 @@ function formatChartLabel$1(value) {
   return `${parsed.getUTCMonth() + 1}/${parsed.getUTCDate()}`;
 }
 function CustomersDashboard() {
-  var _a, _b;
+  var _a, _b, _c;
   const [data, setData] = react.useState(null);
   const [loading, setLoading] = react.useState(true);
   const [error, setError] = react.useState(null);
@@ -2260,6 +2505,13 @@ function CustomersDashboard() {
             title: "Repeat purchases",
             description: "Orders with a customer_id in the same window (guest checkouts excluded from rate).",
             children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 flex-1 flex-col gap-1.5", children: repeatLoading ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", className: "flex flex-1 items-center justify-center py-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading…" }) }) : repeatError ? /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", className: "flex flex-1 items-center justify-center px-2 py-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-center text-ui-fg-danger text-xs", children: repeatError }) }) : repeatStats ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-1.5 sm:grid-cols-3", children: [
+              ((_b = repeatStats.ordersAnalyticsMeta) == null ? void 0 : _b.likely_truncated) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-full rounded-md border border-amber-400/25 bg-amber-500/10 px-2 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-ui-fg-base text-[10px] leading-snug", children: [
+                "Repeat stats are computed from a sample of up to",
+                " ",
+                repeatStats.ordersAnalyticsMeta.max_fetch.toLocaleString(),
+                " ",
+                "orders; your true repeat rate may differ if you exceed that sample."
+              ] }) }) : null,
               /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Repeat rate" }),
                 /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: `${repeatStats.repeat_rate_percent.toFixed(1)}%` }),
@@ -2324,7 +2576,7 @@ function CustomersDashboard() {
               ] }) }),
               /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] font-medium uppercase tracking-[0.14em]", children: "Chart period" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: ((_b = GRAPH_PERIODS$1.find((p) => p.value === graphPeriod)) == null ? void 0 : _b.label) ?? graphPeriod }),
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-base text-lg font-semibold tracking-tight", children: ((_c = GRAPH_PERIODS$1.find((p) => p.value === graphPeriod)) == null ? void 0 : _c.label) ?? graphPeriod }),
                 /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-[10px] leading-snug", children: "Independent of summary period filter" })
               ] }) })
             ] }),
@@ -2358,12 +2610,12 @@ function CustomersDashboard() {
                       stroke: CHART_AXIS_LINE$1,
                       tickLine: false,
                       axisLine: { stroke: CHART_AXIS_LINE$1 },
-                      tickFormatter: (_v, index) => {
-                        var _a2;
-                        const row = series[index];
+                      tickFormatter: (value) => {
+                        const row = series.find((p) => p.date === String(value));
                         if (row == null ? void 0 : row.label) return row.label;
-                        const d = (_a2 = series[index]) == null ? void 0 : _a2.date;
-                        return formatChartLabel$1(d);
+                        return formatChartLabel$1(
+                          (row == null ? void 0 : row.date) ?? (typeof value === "string" ? value : String(value))
+                        );
                       }
                     }
                   ),
@@ -2418,6 +2670,16 @@ function CustomersDashboard() {
     ] })
   ] }) });
 }
+function buildAnalyticsUrl(path, params) {
+  const search = new URLSearchParams();
+  for (const [key, value] of Object.entries(params)) {
+    if (value !== void 0 && value !== null) {
+      search.set(key, String(value));
+    }
+  }
+  const query = search.toString();
+  return query ? `${path}?${query}` : path;
+}
 const SUMMARY_PERIODS = [
   { value: "all", label: "All time" },
   { value: "0", label: "Today" },
@@ -2462,22 +2724,6 @@ const SELECT_CLASS_NAME = "h-9 w-full min-w-[8rem] max-w-full cursor-pointer app
 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",
-    currency: "INR",
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 0
-  }).format(value);
-}
-function formatCompactCurrency(value) {
-  return new Intl.NumberFormat("en-IN", {
-    style: "currency",
-    currency: "INR",
-    notation: "compact",
-    maximumFractionDigits: 1
-  }).format(value);
-}
 function formatChartLabel(value) {
   if (!value) return "";
   const parsed = new Date(value);
@@ -2504,16 +2750,6 @@ function summaryDaysToGraphPeriod(days) {
   if (days === "all" || days === "90") return "one_year";
   return "one_week";
 }
-function buildAnalyticsUrl(path, params) {
-  const search = new URLSearchParams();
-  for (const [key, value] of Object.entries(params)) {
-    if (value) {
-      search.set(key, value);
-    }
-  }
-  const query = search.toString();
-  return query ? `${path}?${query}` : path;
-}
 function isProductOverTimePoint(value) {
   if (typeof value !== "object" || value === null) return false;
   const v = value;
@@ -2525,6 +2761,7 @@ function TrendTooltip({
   label
 }) {
   var _a, _b, _c, _d, _e;
+  const { formatCurrency } = useAnalyticsCurrency();
   if (!active || !(payload == null ? void 0 : payload.length)) return null;
   const row = isProductOverTimePoint((_a = payload[0]) == null ? void 0 : _a.payload) ? (_b = payload[0]) == null ? void 0 : _b.payload : void 0;
   const displayLabel = (row == null ? void 0 : row.label) ?? (label ? new Date(label).toLocaleDateString() : "");
@@ -2556,6 +2793,7 @@ function MiniTrendTooltip({
   hideRevenueRow
 }) {
   var _a, _b, _c, _d, _e;
+  const { formatCurrency } = useAnalyticsCurrency();
   if (!active || !(payload == null ? void 0 : payload.length)) return null;
   const row = isProductOverTimePoint((_a = payload[0]) == null ? void 0 : _a.payload) ? (_b = payload[0]) == null ? void 0 : _b.payload : void 0;
   const labelKey = label !== void 0 && label !== null ? String(label) : "";
@@ -2586,6 +2824,7 @@ function ProductBarTooltip({
   showViews = true
 }) {
   var _a;
+  const { formatCurrency } = useAnalyticsCurrency();
   if (!active || !(payload == null ? void 0 : payload.length)) return null;
   const row = (_a = payload[0]) == null ? void 0 : _a.payload;
   if (!row) return null;
@@ -2638,6 +2877,9 @@ function EmptyAnalyticsPanel({ title, description }) {
 }
 function ProductsDashboard() {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const { formatCurrency, formatCompactCurrency } = useAnalyticsCurrency();
+  const chartGradientPrefix = react.useId().replace(/:/g, "");
+  const gid = (suffix) => `${chartGradientPrefix}-${suffix}`;
   const [summaryDays, setSummaryDays] = react.useState("all");
   const [graphPeriod, setGraphPeriod] = react.useState("one_week");
   const [topSellerPeriod, setTopSellerPeriod] = react.useState("week");
@@ -3224,26 +3466,76 @@ function ProductsDashboard() {
                       margin: { top: 4, right: 6, left: -6, bottom: 0 },
                       children: [
                         /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
-                          /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "productUnitsGradient", x1: "0", y1: "0", x2: "1", y2: "0", children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#67E8F9" }),
-                            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#3B82F6" })
-                          ] }),
-                          /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "productRevenueGradient", x1: "0", y1: "0", x2: "1", y2: "0", children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#F472B6" }),
-                            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#C084FC" })
-                          ] }),
-                          /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "productUnitsAreaFill", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#38BDF8", stopOpacity: 0.22 }),
-                            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#38BDF8", stopOpacity: 0 })
-                          ] }),
-                          /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "productRevenueAreaFill", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#E879F9", stopOpacity: 0.2 }),
-                            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#E879F9", stopOpacity: 0 })
-                          ] }),
-                          /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "productViewsAreaFill", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#C084FC", stopOpacity: 0.18 }),
-                            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#C084FC", stopOpacity: 0 })
-                          ] })
+                          /* @__PURE__ */ jsxRuntime.jsxs(
+                            "linearGradient",
+                            {
+                              id: gid("trend-units-line"),
+                              x1: "0",
+                              y1: "0",
+                              x2: "1",
+                              y2: "0",
+                              children: [
+                                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#67E8F9" }),
+                                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#3B82F6" })
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsxs(
+                            "linearGradient",
+                            {
+                              id: gid("trend-revenue-line"),
+                              x1: "0",
+                              y1: "0",
+                              x2: "1",
+                              y2: "0",
+                              children: [
+                                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#F472B6" }),
+                                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#C084FC" })
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsxs(
+                            "linearGradient",
+                            {
+                              id: gid("trend-units-area"),
+                              x1: "0",
+                              y1: "0",
+                              x2: "0",
+                              y2: "1",
+                              children: [
+                                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#38BDF8", stopOpacity: 0.22 }),
+                                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#38BDF8", stopOpacity: 0 })
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsxs(
+                            "linearGradient",
+                            {
+                              id: gid("trend-revenue-area"),
+                              x1: "0",
+                              y1: "0",
+                              x2: "0",
+                              y2: "1",
+                              children: [
+                                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#E879F9", stopOpacity: 0.2 }),
+                                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#E879F9", stopOpacity: 0 })
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsxs(
+                            "linearGradient",
+                            {
+                              id: gid("trend-views-area"),
+                              x1: "0",
+                              y1: "0",
+                              x2: "0",
+                              y2: "1",
+                              children: [
+                                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#C084FC", stopOpacity: 0.18 }),
+                                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#C084FC", stopOpacity: 0 })
+                              ]
+                            }
+                          )
                         ] }),
                         /* @__PURE__ */ jsxRuntime.jsx(
                           recharts.CartesianGrid,
@@ -3260,8 +3552,8 @@ function ProductsDashboard() {
                             tick: CHART_AXIS_TICK,
                             tickLine: false,
                             axisLine: false,
-                            tickFormatter: (value, index) => {
-                              const row = series[index];
+                            tickFormatter: (value) => {
+                              const row = series.find((p) => p.date === String(value));
                               return (row == null ? void 0 : row.label) ?? formatChartLabel(String(value));
                             }
                           }
@@ -3307,7 +3599,7 @@ function ProductsDashboard() {
                             type: "natural",
                             dataKey: "units_sold",
                             stroke: "none",
-                            fill: "url(#productUnitsAreaFill)",
+                            fill: `url(#${gid("trend-units-area")})`,
                             isAnimationActive: false,
                             legendType: "none"
                           }
@@ -3319,7 +3611,7 @@ function ProductsDashboard() {
                             type: "natural",
                             dataKey: "views",
                             stroke: "none",
-                            fill: "url(#productViewsAreaFill)",
+                            fill: `url(#${gid("trend-views-area")})`,
                             isAnimationActive: false,
                             legendType: "none"
                           }
@@ -3331,7 +3623,7 @@ function ProductsDashboard() {
                             type: "natural",
                             dataKey: "revenue",
                             stroke: "none",
-                            fill: "url(#productRevenueAreaFill)",
+                            fill: `url(#${gid("trend-revenue-area")})`,
                             isAnimationActive: false,
                             legendType: "none"
                           }
@@ -3343,7 +3635,7 @@ function ProductsDashboard() {
                             type: "natural",
                             dataKey: "units_sold",
                             name: "Units sold",
-                            stroke: "url(#productUnitsGradient)",
+                            stroke: `url(#${gid("trend-units-line")})`,
                             strokeWidth: 2,
                             dot: false,
                             activeDot: { r: 4, fill: PRODUCT_CHART_COLORS.units }
@@ -3370,7 +3662,7 @@ function ProductsDashboard() {
                             type: "natural",
                             dataKey: "revenue",
                             name: "Revenue",
-                            stroke: "url(#productRevenueGradient)",
+                            stroke: `url(#${gid("trend-revenue-line")})`,
                             strokeWidth: 2,
                             dot: false,
                             activeDot: { r: 4, fill: PRODUCT_CHART_COLORS.revenue }
@@ -3441,7 +3733,7 @@ function ProductsDashboard() {
                     /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
                       "linearGradient",
                       {
-                        id: "bestSellersRevenueArea",
+                        id: gid("best-revenue-area"),
                         x1: "0",
                         y1: "0",
                         x2: "0",
@@ -3479,7 +3771,12 @@ function ProductsDashboard() {
                       {
                         dataKey: "date",
                         tick: CHART_AXIS_TICK_SM,
-                        tickFormatter: (value) => formatChartLabel(String(value)),
+                        tickFormatter: (value) => {
+                          const row = bestSellersTrendSeries.find(
+                            (p) => p.date === String(value)
+                          );
+                          return (row == null ? void 0 : row.label) ?? formatChartLabel(String(value));
+                        },
                         tickLine: false,
                         axisLine: { stroke: CHART_AXIS_LINE }
                       }
@@ -3529,7 +3826,7 @@ function ProductsDashboard() {
                         dataKey: "revenue",
                         name: "Revenue",
                         stroke: "transparent",
-                        fill: "url(#bestSellersRevenueArea)",
+                        fill: `url(#${gid("best-revenue-area")})`,
                         isAnimationActive: false
                       }
                     ),
@@ -3644,7 +3941,7 @@ function ProductsDashboard() {
                   /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
                     "linearGradient",
                     {
-                      id: "mostViewedViewsArea",
+                      id: gid("viewed-views-area"),
                       x1: "0",
                       y1: "0",
                       x2: "0",
@@ -3682,7 +3979,12 @@ function ProductsDashboard() {
                     {
                       dataKey: "date",
                       tick: CHART_AXIS_TICK_SM,
-                      tickFormatter: (value) => formatChartLabel(String(value)),
+                      tickFormatter: (value) => {
+                        const row = mostViewedTrendSeries.find(
+                          (p) => p.date === String(value)
+                        );
+                        return (row == null ? void 0 : row.label) ?? formatChartLabel(String(value));
+                      },
                       tickLine: false,
                       axisLine: { stroke: CHART_AXIS_LINE }
                     }
@@ -3719,7 +4021,7 @@ function ProductsDashboard() {
                       dataKey: "views",
                       name: "Views",
                       stroke: "transparent",
-                      fill: "url(#mostViewedViewsArea)",
+                      fill: `url(#${gid("viewed-views-area")})`,
                       isAnimationActive: false
                     }
                   ),
@@ -3781,7 +4083,7 @@ function ProductsDashboard() {
           title: "Views vs units sold",
           description: "Each point is a product (top viewed in this period). Requires product view tracking.",
           children: /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { variant: "atlas", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[220px] w-full sm:h-[248px]", children: performanceLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Loading scatter…" }) }) : performanceError || !performance ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-2", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-center text-xs", children: performanceError ?? "Failed to load product performance" }) }) : !performance.productViewsConnected ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "Product view tracking is not available in this environment." }) }) : viewsVsUnitsScatterData.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: "No products with views or sales in this range." }) }) : /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ScatterChart, { margin: { top: 12, right: 16, bottom: 8, left: 8 }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("radialGradient", { id: "productScatterGlow", cx: "50%", cy: "50%", r: "50%", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("radialGradient", { id: gid("scatter-glow"), cx: "50%", cy: "50%", r: "50%", children: [
               /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#E879F9", stopOpacity: 0.95 }),
               /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#6366F1", stopOpacity: 0.65 })
             ] }) }),
@@ -3842,7 +4144,7 @@ function ProductsDashboard() {
               {
                 name: "Products",
                 data: viewsVsUnitsScatterData,
-                fill: "url(#productScatterGlow)"
+                fill: `url(#${gid("scatter-glow")})`
               }
             )
           ] }) }) }) })
@@ -3858,7 +4160,7 @@ const ANALYTICS_MODULES = [
 ];
 const AnalyticsPage = () => {
   const [activeModule, setActiveModule] = react.useState("orders");
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full bg-ui-bg-subtle", children: /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(AnalyticsCurrencyProvider, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full bg-ui-bg-subtle", children: /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: `mx-auto flex w-full min-w-0 flex-col ${activeModule === "products" ? "max-w-full gap-2 px-3 py-3 sm:px-4 sm:py-3" : "max-w-[1600px] gap-4 p-4"}`.trim(),
@@ -3899,7 +4201,7 @@ const AnalyticsPage = () => {
         ] })
       ]
     }
-  ) }) });
+  ) }) }) });
 };
 const config = adminSdk.defineRouteConfig({
   label: "Analytics",