medusa-analytics 0.0.23 → 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);
@@ -383,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:",
@@ -432,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",
@@ -551,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);
@@ -561,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);
@@ -674,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);
     });
@@ -749,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"
     },
@@ -767,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"
     }
@@ -817,18 +1032,45 @@ 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 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 salesBreakdownHourlyRolling.map((b, i) => ({
@@ -934,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"
     },
     {
@@ -955,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"
     }
@@ -1023,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(
@@ -1047,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,
       {
@@ -1135,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: [
@@ -1161,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,
+                        /* @__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,
                           {
-                            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,
-                          {
-                            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)" }),
@@ -1366,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));
                             }
                           }
                         ),
@@ -1376,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(
@@ -1386,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
                           }
                         ),
@@ -1461,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)" }),
@@ -2131,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);
@@ -2370,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)}%` }),
@@ -2434,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" })
               ] }) })
             ] }),
@@ -2468,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))
+                        );
                       }
                     }
                   ),
@@ -2528,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" },
@@ -2572,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);
@@ -2614,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;
@@ -2635,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() : "");
@@ -2666,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) : "";
@@ -2696,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;
@@ -2748,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");
@@ -3334,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,
@@ -3370,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));
                             }
                           }
@@ -3417,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"
                           }
@@ -3429,7 +3611,7 @@ function ProductsDashboard() {
                             type: "natural",
                             dataKey: "views",
                             stroke: "none",
-                            fill: "url(#productViewsAreaFill)",
+                            fill: `url(#${gid("trend-views-area")})`,
                             isAnimationActive: false,
                             legendType: "none"
                           }
@@ -3441,7 +3623,7 @@ function ProductsDashboard() {
                             type: "natural",
                             dataKey: "revenue",
                             stroke: "none",
-                            fill: "url(#productRevenueAreaFill)",
+                            fill: `url(#${gid("trend-revenue-area")})`,
                             isAnimationActive: false,
                             legendType: "none"
                           }
@@ -3453,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 }
@@ -3480,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 }
@@ -3551,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",
@@ -3589,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 }
                       }
@@ -3639,7 +3826,7 @@ function ProductsDashboard() {
                         dataKey: "revenue",
                         name: "Revenue",
                         stroke: "transparent",
-                        fill: "url(#bestSellersRevenueArea)",
+                        fill: `url(#${gid("best-revenue-area")})`,
                         isAnimationActive: false
                       }
                     ),
@@ -3754,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",
@@ -3792,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 }
                     }
@@ -3829,7 +4021,7 @@ function ProductsDashboard() {
                       dataKey: "views",
                       name: "Views",
                       stroke: "transparent",
-                      fill: "url(#mostViewedViewsArea)",
+                      fill: `url(#${gid("viewed-views-area")})`,
                       isAnimationActive: false
                     }
                   ),
@@ -3891,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 })
             ] }) }),
@@ -3952,7 +4144,7 @@ function ProductsDashboard() {
               {
                 name: "Products",
                 data: viewsVsUnitsScatterData,
-                fill: "url(#productScatterGlow)"
+                fill: `url(#${gid("scatter-glow")})`
               }
             )
           ] }) }) }) })
@@ -3968,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(),
@@ -4009,7 +4201,7 @@ const AnalyticsPage = () => {
         ] })
       ]
     }
-  ) }) });
+  ) }) }) });
 };
 const config = adminSdk.defineRouteConfig({
   label: "Analytics",