medusa-analytics 0.0.13 → 0.0.14

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

@@ -48,7 +48,7 @@ const ORDER_CHART_STATUSES = [
   { key: "cancelled", label: "Cancelled", color: STATUS_COLORS.cancelled },
   { key: "delivered", label: "Delivered", color: STATUS_COLORS.delivered }
 ];
-function formatCurrency(value) {
+function formatCurrency$1(value) {
   return new Intl.NumberFormat("en-IN", {
     style: "currency",
     currency: "INR",
@@ -56,7 +56,7 @@ function formatCurrency(value) {
     maximumFractionDigits: 0
   }).format(value);
 }
-const SUMMARY_PERIODS = [
+const SUMMARY_PERIODS$1 = [
   { value: "all", label: "All time" },
   { value: "0", label: "Today's orders" },
   { value: "7", label: "Last 7 days" },
@@ -150,7 +150,7 @@ function OrdersDashboard() {
               value: filter,
               onChange: (e) => setFilter(e.target.value),
               className: "h-9 rounded-md border border-ui-border-base bg-transparent px-3 text-sm text-ui-fg-base outline-none transition focus:ring-2 focus:ring-ui-fg-interactive",
-              children: SUMMARY_PERIODS.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.value, children: p.label }, p.value))
+              children: SUMMARY_PERIODS$1.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.value, children: p.label }, p.value))
             }
           )
         ] }),
@@ -173,11 +173,11 @@ function OrdersDashboard() {
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Total revenue" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: formatCurrency(data.totalRevenue) })
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: formatCurrency$1(data.totalRevenue) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Average order value" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: formatCurrency(data.aov) })
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: formatCurrency$1(data.aov) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Orders today" }),
@@ -386,7 +386,7 @@ const COUNT_DAY_PRESETS = [
   { value: "30", label: "Last 30 days" },
   { value: "90", label: "Last 90 days" }
 ];
-const GRAPH_PERIODS = [
+const GRAPH_PERIODS$1 = [
   { value: "one_week", label: "One week" },
   { value: "one_month", label: "One month" },
   { value: "one_year", label: "One year" }
@@ -527,7 +527,7 @@ function CustomersDashboard() {
               value: graphPeriod,
               onChange: (e) => setGraphPeriod(e.target.value),
               className: "h-9 rounded-md border border-ui-border-base bg-transparent px-3 text-sm text-ui-fg-base outline-none transition focus:ring-2 focus:ring-ui-fg-interactive",
-              children: GRAPH_PERIODS.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.value, children: p.label }, p.value))
+              children: GRAPH_PERIODS$1.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.value, children: p.label }, p.value))
             }
           )
         ] })
@@ -604,9 +604,593 @@ function CustomersDashboard() {
     ] })
   ] });
 }
+const SUMMARY_PERIODS = [
+  { value: "all", label: "All time" },
+  { value: "0", label: "Today" },
+  { value: "7", label: "Last 7 days" },
+  { value: "30", label: "Last 30 days" },
+  { value: "90", label: "Last 90 days" }
+];
+const GRAPH_PERIODS = [
+  { value: "one_week", label: "One week" },
+  { value: "one_month", label: "One month" },
+  { value: "one_year", label: "One year" }
+];
+const TOP_SELLER_PERIODS = [
+  { value: "week", label: "Week" },
+  { value: "month", label: "Month" },
+  { value: "year", label: "Year" },
+  { value: "all", label: "All time" }
+];
+const SALES_COLOR = "var(--medusa-color-ui-fg-interactive)";
+const VIEWS_COLOR = "#8B5CF6";
+const REVENUE_COLOR = "#F59E0B";
+function formatCurrency(value) {
+  return new Intl.NumberFormat("en-IN", {
+    style: "currency",
+    currency: "INR",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(value);
+}
+function formatRatio(value) {
+  if (value === null || Number.isNaN(value)) return "N/A";
+  return `${value.toFixed(2)}x`;
+}
+function truncateLabel(value, maxLength = 22) {
+  return value.length > maxLength ? `${value.slice(0, maxLength - 1)}…` : value;
+}
+function 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 TrendTooltip({
+  active,
+  payload,
+  label
+}) {
+  var _a, _b, _c, _d;
+  if (!active || !(payload == null ? void 0 : payload.length)) return null;
+  const row = (_a = payload[0]) == null ? void 0 : _a.payload;
+  const displayLabel = (row == null ? void 0 : row.label) ?? (label ? new Date(label).toLocaleDateString() : "");
+  const unitsSold = ((_b = payload.find((entry) => entry.name === "Units sold")) == null ? void 0 : _b.value) ?? 0;
+  const views = ((_c = payload.find((entry) => entry.name === "Views")) == null ? void 0 : _c.value) ?? 0;
+  const revenue = ((_d = payload.find((entry) => entry.name === "Revenue")) == null ? void 0 : _d.value) ?? 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        backgroundColor: "rgb(255, 255, 255)",
+        color: "#111827",
+        border: "1px solid rgb(229, 231, 235)",
+        borderRadius: "8px",
+        padding: "12px 16px",
+        boxShadow: "0 4px 14px rgba(0, 0, 0, 0.08)",
+        fontSize: "14px",
+        lineHeight: 1.5
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, marginBottom: "6px" }, children: displayLabel }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          "Units sold: ",
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(unitsSold).toLocaleString() })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          "Views: ",
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(views).toLocaleString() })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          "Revenue: ",
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency(Number(revenue)) })
+        ] })
+      ]
+    }
+  );
+}
+function ProductBarTooltip({
+  active,
+  payload
+}) {
+  var _a;
+  if (!active || !(payload == null ? void 0 : payload.length)) return null;
+  const row = (_a = payload[0]) == null ? void 0 : _a.payload;
+  if (!row) return null;
+  const unitsSold = "units_sold" in row ? row.units_sold : 0;
+  const totalViews = "total_views" in row ? row.total_views : 0;
+  const revenue = "revenue" in row ? row.revenue : 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        backgroundColor: "rgb(255, 255, 255)",
+        color: "#111827",
+        border: "1px solid rgb(229, 231, 235)",
+        borderRadius: "8px",
+        padding: "12px 16px",
+        boxShadow: "0 4px 14px rgba(0, 0, 0, 0.08)",
+        fontSize: "14px",
+        lineHeight: 1.5
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, marginBottom: "6px" }, children: row.product_title }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          "Units sold: ",
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(unitsSold).toLocaleString() })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          "Views: ",
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: Math.floor(totalViews).toLocaleString() })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          "Revenue: ",
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatCurrency(Number(revenue)) })
+        ] })
+      ]
+    }
+  );
+}
+function ProductsDashboard() {
+  var _a, _b, _c;
+  const [summaryDays, setSummaryDays] = react.useState("all");
+  const [graphPeriod, setGraphPeriod] = react.useState("one_week");
+  const [topSellerPeriod, setTopSellerPeriod] = react.useState("week");
+  const [salesChannelId, setSalesChannelId] = react.useState("all");
+  const [salesChannels, setSalesChannels] = react.useState([]);
+  const [filtersLoading, setFiltersLoading] = react.useState(true);
+  const [filtersError, setFiltersError] = react.useState(null);
+  const [summary, setSummary] = react.useState(null);
+  const [summaryLoading, setSummaryLoading] = react.useState(true);
+  const [summaryError, setSummaryError] = react.useState(null);
+  const [overTime, setOverTime] = react.useState(null);
+  const [overTimeLoading, setOverTimeLoading] = react.useState(true);
+  const [overTimeError, setOverTimeError] = react.useState(null);
+  const [topSellers, setTopSellers] = react.useState(null);
+  const [topSellersLoading, setTopSellersLoading] = react.useState(true);
+  const [topSellersError, setTopSellersError] = react.useState(null);
+  const [performance, setPerformance] = react.useState(null);
+  const [performanceLoading, setPerformanceLoading] = react.useState(true);
+  const [performanceError, setPerformanceError] = react.useState(null);
+  react.useEffect(() => {
+    let cancelled = false;
+    setFiltersLoading(true);
+    setFiltersError(null);
+    fetch("/admin/analytics/products-filters").then((res) => {
+      if (!res.ok) throw new Error(res.statusText);
+      return res.json();
+    }).then((body) => {
+      if (!cancelled) {
+        setSalesChannels(body.salesChannels ?? []);
+      }
+    }).catch((error) => {
+      if (!cancelled) {
+        setFiltersError(error instanceof Error ? error.message : String(error));
+      }
+    }).finally(() => {
+      if (!cancelled) setFiltersLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  react.useEffect(() => {
+    let cancelled = false;
+    setSummaryLoading(true);
+    setSummaryError(null);
+    fetch(
+      buildAnalyticsUrl("/admin/analytics/products-summary", {
+        days: summaryDays,
+        sales_channel_id: salesChannelId !== "all" ? salesChannelId : null
+      })
+    ).then((res) => {
+      if (!res.ok) throw new Error(res.statusText);
+      return res.json();
+    }).then((body) => {
+      if (!cancelled) setSummary(body);
+    }).catch((error) => {
+      if (!cancelled) {
+        setSummaryError(error instanceof Error ? error.message : String(error));
+      }
+    }).finally(() => {
+      if (!cancelled) setSummaryLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [salesChannelId, summaryDays]);
+  react.useEffect(() => {
+    let cancelled = false;
+    setOverTimeLoading(true);
+    setOverTimeError(null);
+    fetch(
+      buildAnalyticsUrl("/admin/analytics/products-over-time", {
+        period: graphPeriod,
+        sales_channel_id: salesChannelId !== "all" ? salesChannelId : null
+      })
+    ).then((res) => {
+      if (!res.ok) throw new Error(res.statusText);
+      return res.json();
+    }).then((body) => {
+      if (!cancelled) setOverTime(body);
+    }).catch((error) => {
+      if (!cancelled) {
+        setOverTimeError(error instanceof Error ? error.message : String(error));
+      }
+    }).finally(() => {
+      if (!cancelled) setOverTimeLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [graphPeriod, salesChannelId]);
+  react.useEffect(() => {
+    let cancelled = false;
+    setTopSellersLoading(true);
+    setTopSellersError(null);
+    fetch(
+      buildAnalyticsUrl("/admin/analytics/products-top-sellers", {
+        period: topSellerPeriod,
+        sales_channel_id: salesChannelId !== "all" ? salesChannelId : null
+      })
+    ).then((res) => {
+      if (!res.ok) throw new Error(res.statusText);
+      return res.json();
+    }).then((body) => {
+      if (!cancelled) setTopSellers(body);
+    }).catch((error) => {
+      if (!cancelled) {
+        setTopSellersError(error instanceof Error ? error.message : String(error));
+      }
+    }).finally(() => {
+      if (!cancelled) setTopSellersLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [salesChannelId, topSellerPeriod]);
+  react.useEffect(() => {
+    let cancelled = false;
+    setPerformanceLoading(true);
+    setPerformanceError(null);
+    fetch(
+      buildAnalyticsUrl("/admin/analytics/products-performance", {
+        days: summaryDays,
+        sales_channel_id: salesChannelId !== "all" ? salesChannelId : null
+      })
+    ).then((res) => {
+      if (!res.ok) throw new Error(res.statusText);
+      return res.json();
+    }).then((body) => {
+      if (!cancelled) setPerformance(body);
+    }).catch((error) => {
+      if (!cancelled) {
+        setPerformanceError(error instanceof Error ? error.message : String(error));
+      }
+    }).finally(() => {
+      if (!cancelled) setPerformanceLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [salesChannelId, summaryDays]);
+  const topSellerChartData = react.useMemo(
+    () => ((topSellers == null ? void 0 : topSellers.products) ?? []).slice(0, 7).map((row) => ({
+      ...row,
+      product_title: truncateLabel(row.product_title, 24)
+    })).reverse(),
+    [topSellers]
+  );
+  const topViewedChartData = react.useMemo(
+    () => ((performance == null ? void 0 : performance.topViewedProducts) ?? []).slice(0, 7).map((row) => ({
+      ...row,
+      product_title: truncateLabel(row.product_title, 24)
+    })).reverse(),
+    [performance]
+  );
+  if (summaryLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "flex items-center justify-center min-h-[320px]",
+        role: "status",
+        "aria-label": "Loading product analytics",
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted", children: "Loading…" })
+      }
+    );
+  }
+  if (summaryError || !summary) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger", children: summaryError ?? "Failed to load product analytics" }) });
+  }
+  const viewsConnected = summary.productViewsConnected || (overTime == null ? void 0 : overTime.productViewsConnected) === true || (topSellers == null ? void 0 : topSellers.productViewsConnected) === true || (performance == null ? void 0 : performance.productViewsConnected) === true;
+  const selectedChannelLabel = salesChannelId === "all" ? "All channels" : ((_a = salesChannels.find((channel) => channel.id === salesChannelId)) == null ? void 0 : _a.name) ?? "Selected channel";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-8", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Products" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm mt-1", children: "Track units sold, revenue, best sellers, and product visit behavior." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "products-channel-filter", className: "text-ui-fg-muted text-sm", children: "Channel" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "select",
+            {
+              id: "products-channel-filter",
+              value: salesChannelId,
+              onChange: (event) => setSalesChannelId(event.target.value),
+              disabled: filtersLoading,
+              className: "h-9 rounded-md border border-ui-border-base bg-transparent px-3 text-sm text-ui-fg-base outline-none transition focus:ring-2 focus:ring-ui-fg-interactive",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "all", children: "All channels" }),
+                salesChannels.map((channel) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: channel.id, children: channel.name }, channel.id))
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "products-summary-period", className: "text-ui-fg-muted text-sm", children: "Period" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              id: "products-summary-period",
+              value: summaryDays,
+              onChange: (event) => setSummaryDays(event.target.value),
+              className: "h-9 rounded-md border border-ui-border-base bg-transparent px-3 text-sm text-ui-fg-base outline-none transition focus:ring-2 focus:ring-ui-fg-interactive",
+              children: SUMMARY_PERIODS.map((period) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: period.value, children: period.label }, period.value))
+            }
+          )
+        ] }),
+        summaryDays !== "all" && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setSummaryDays("all"),
+            className: "text-xs text-ui-fg-muted hover:text-ui-fg-base transition-colors",
+            "aria-label": "Show all products analytics",
+            children: "Clear filter"
+          }
+        ),
+        salesChannelId !== "all" && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setSalesChannelId("all"),
+            className: "text-xs text-ui-fg-muted hover:text-ui-fg-base transition-colors",
+            "aria-label": "Show all sales channels",
+            children: "Clear channel"
+          }
+        )
+      ] })
+    ] }),
+    filtersError && /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-sm", children: filtersError }) }),
+    !viewsConnected && /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Product views are unavailable until the `medusa-product-helper` tracking module is registered and storefront page views are being recorded." }) }),
+    salesChannelId !== "all" && viewsConnected && /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "text-ui-fg-muted text-sm", children: [
+      "Showing product analytics for ",
+      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: selectedChannelLabel }),
+      ". Product views are scoped to products assigned to this sales channel."
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Units sold" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: summary.unitsSold.toLocaleString() })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Product revenue" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: formatCurrency(summary.productRevenue) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Orders with product sales" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: summary.ordersWithProducts.toLocaleString() })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Active products sold" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: summary.activeProductsSold.toLocaleString() })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Product views" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: summary.totalProductViews.toLocaleString() })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "View / order ratio" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: formatRatio(summary.viewToOrderRatio) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4 mb-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h3", children: "Sales and views over time" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm mt-1", children: "Units sold and revenue are always shown. Product views appear when tracking data is available." })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "products-graph-period", className: "text-ui-fg-muted text-sm", children: "Range" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              id: "products-graph-period",
+              value: graphPeriod,
+              onChange: (event) => setGraphPeriod(event.target.value),
+              className: "h-9 rounded-md border border-ui-border-base bg-transparent px-3 text-sm text-ui-fg-base outline-none transition focus:ring-2 focus:ring-ui-fg-interactive",
+              children: GRAPH_PERIODS.map((period) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: period.value, children: period.label }, period.value))
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-80", children: overTimeLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted", children: "Loading chart…" }) }) : overTimeError || !overTime ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger", children: overTimeError ?? "Failed to load product trend" }) }) : /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data: overTime.series, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: "label" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.YAxis,
+          {
+            yAxisId: "counts",
+            allowDecimals: false,
+            tickFormatter: (value) => Math.floor(Number(value)).toLocaleString()
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.YAxis,
+          {
+            yAxisId: "revenue",
+            orientation: "right",
+            tickFormatter: (value) => formatCurrency(Number(value))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(TrendTooltip, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Line,
+          {
+            yAxisId: "counts",
+            type: "monotone",
+            dataKey: "units_sold",
+            name: "Units sold",
+            stroke: SALES_COLOR,
+            strokeWidth: 2,
+            dot: false
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Line,
+          {
+            yAxisId: "counts",
+            type: "monotone",
+            dataKey: "views",
+            name: "Views",
+            stroke: VIEWS_COLOR,
+            strokeWidth: 2,
+            dot: false
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Line,
+          {
+            yAxisId: "revenue",
+            type: "monotone",
+            dataKey: "revenue",
+            name: "Revenue",
+            stroke: REVENUE_COLOR,
+            strokeWidth: 2,
+            dot: false
+          }
+        )
+      ] }) }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 xl:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4 mb-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h3", children: "Best sellers" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm mt-1", children: "Ranked by units sold." })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-2", children: TOP_SELLER_PERIODS.map((period) => /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              variant: topSellerPeriod === period.value ? "secondary" : "transparent",
+              size: "small",
+              onClick: () => setTopSellerPeriod(period.value),
+              children: period.label
+            },
+            period.value
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-80", children: topSellersLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted", children: "Loading best sellers…" }) }) : topSellersError || !topSellers ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger", children: topSellersError ?? "Failed to load best sellers" }) }) : topSellerChartData.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", children: "No product sales found for this range." }) }) : /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data: topSellerChartData, layout: "vertical", margin: { left: 8, right: 8 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", horizontal: false }),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { type: "number", allowDecimals: false }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.YAxis,
+            {
+              type: "category",
+              dataKey: "product_title",
+              width: 160,
+              tickLine: false
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(ProductBarTooltip, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.Bar, { dataKey: "units_sold", fill: SALES_COLOR, radius: [0, 6, 6, 0] })
+        ] }) }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h3", className: "mb-4", children: "Top seller breakdown" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Table, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Product" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Units" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Orders" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Revenue" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Body, { children: [
+            ((topSellers == null ? void 0 : topSellers.products) ?? []).slice(0, 8).map((product) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: product.product_title }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: product.units_sold.toLocaleString() }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: product.order_count.toLocaleString() }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: formatCurrency(product.revenue) })
+            ] }, product.product_id)),
+            !topSellersLoading && (((_b = topSellers == null ? void 0 : topSellers.products) == null ? void 0 : _b.length) ?? 0) === 0 && /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: "No best seller data yet." }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, {})
+            ] })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 xl:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h3", className: "mb-1", children: "Most viewed products" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm mb-4", children: "View activity is sourced from the existing product-helper tracking module." }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-80", 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", children: "Loading product views…" }) }) : performanceError || !performance ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger", 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", children: "Product view tracking is not available in this environment." }) }) : topViewedChartData.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", children: "No product views found for this range." }) }) : /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data: topViewedChartData, layout: "vertical", margin: { left: 8, right: 8 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", horizontal: false }),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { type: "number", allowDecimals: false }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.YAxis,
+            {
+              type: "category",
+              dataKey: "product_title",
+              width: 160,
+              tickLine: false
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(ProductBarTooltip, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.Bar, { dataKey: "total_views", fill: VIEWS_COLOR, radius: [0, 6, 6, 0] })
+        ] }) }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h3", className: "mb-4", children: "View-to-sales opportunities" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Table, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Product" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Views" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Units" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Table.HeaderCell, { children: "Views / unit" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Body, { children: [
+            ((performance == null ? void 0 : performance.viewOpportunities) ?? []).slice(0, 8).map((product) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: product.product_title }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: product.total_views.toLocaleString() }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: product.units_sold.toLocaleString() }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: formatRatio(product.views_per_unit) })
+            ] }, product.product_id)),
+            !performanceLoading && !performanceError && (((_c = performance == null ? void 0 : performance.viewOpportunities) == null ? void 0 : _c.length) ?? 0) === 0 && /* @__PURE__ */ jsxRuntime.jsxs(ui.Table.Row, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, { children: "No product view opportunities yet." }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Table.Cell, {})
+            ] })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
 const ANALYTICS_MODULES = [
   { id: "orders", label: "Orders" },
-  { id: "customers", label: "Customers" }
+  { id: "customers", label: "Customers" },
+  { id: "products", label: "Products" }
 ];
 const AnalyticsPage = () => {
   const [activeModule, setActiveModule] = react.useState("orders");
@@ -623,7 +1207,8 @@ const AnalyticsPage = () => {
       m.id
     )) }),
     activeModule === "orders" && /* @__PURE__ */ jsxRuntime.jsx(OrdersDashboard, {}),
-    activeModule === "customers" && /* @__PURE__ */ jsxRuntime.jsx(CustomersDashboard, {})
+    activeModule === "customers" && /* @__PURE__ */ jsxRuntime.jsx(CustomersDashboard, {}),
+    activeModule === "products" && /* @__PURE__ */ jsxRuntime.jsx(ProductsDashboard, {})
   ] }) }) }) });
 };
 const config = adminSdk.defineRouteConfig({