medusa-analytics 0.0.13 → 0.0.15

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

@@ -5,6 +5,74 @@ const adminSdk = require("@medusajs/admin-sdk");
 const icons = require("@medusajs/icons");
 const ui = require("@medusajs/ui");
 const recharts = require("recharts");
+function AnalyticsDashboardShell({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children });
+}
+function AnalyticsDashboardHeader({
+  title,
+  description,
+  actions
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "overflow-hidden rounded-2xl border border-ui-border-base bg-ui-bg-base p-0 shadow-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 border-b border-ui-border-base px-5 py-4 xl:flex-row xl:items-start xl:justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", className: "tracking-tight", children: title }),
+        description ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: description }) : null
+      ] }),
+      actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-2 rounded-xl border border-ui-border-base bg-ui-bg-subtle p-2", children: actions }) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 bg-ui-bg-subtle" })
+  ] });
+}
+function AnalyticsStatCard({ label, value, helper }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "h-full rounded-2xl border border-ui-border-base bg-ui-bg-base p-4 shadow-sm transition-shadow", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-[104px] flex-col justify-between gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", className: "tracking-tight", children: value }),
+    helper ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-xs", children: helper }) : null
+  ] }) });
+}
+function AnalyticsSection({
+  title,
+  description,
+  actions,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Container,
+    {
+      className: `overflow-hidden rounded-2xl border border-ui-border-base bg-ui-bg-base p-0 shadow-sm ${className ?? ""}`.trim(),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 border-b border-ui-border-base px-5 py-4 lg:flex-row lg:items-start lg:justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h3", className: "tracking-tight", children: title }),
+            description ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: description }) : null
+          ] }),
+          actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-2 rounded-xl border border-ui-border-base bg-ui-bg-subtle p-2", children: actions }) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 py-4", children })
+      ]
+    }
+  );
+}
+function AnalyticsChartSurface({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `rounded-xl border border-ui-border-base bg-ui-bg-subtle p-3 shadow-inner ${className ?? ""}`.trim(),
+      children
+    }
+  );
+}
+function AnalyticsTableSurface({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `overflow-hidden rounded-xl border border-ui-border-base bg-ui-bg-base ${className ?? ""}`.trim(),
+      children
+    }
+  );
+}
 function OrdersOverTimeTooltip({
   active,
   payload,
@@ -48,7 +116,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 +124,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" },
@@ -137,131 +205,167 @@ function OrdersDashboard() {
     { name: "Return orders", value: data.returnOrders, color: "#EF4444" },
     { name: "Exchange orders", value: data.exchangeOrders, color: "#F59E0B" }
   ].filter((d) => d.value > 0);
-  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.jsx(ui.Heading, { level: "h2", children: "Orders" }),
-      /* @__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: "analytics-period", className: "text-ui-fg-muted text-sm", children: "Period" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "select",
+  return /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsDashboardShell, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AnalyticsDashboardHeader,
+      {
+        title: "Orders",
+        description: "Monitor revenue, operational health, and status distribution without leaving the analytics workspace.",
+        actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "analytics-period", className: "text-ui-fg-muted text-sm", children: "Period" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "select",
+              {
+                id: "analytics-period",
+                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$1.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.value, children: p.label }, p.value))
+              }
+            )
+          ] }),
+          filter !== "all" && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
             {
-              id: "analytics-period",
-              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))
+              type: "button",
+              onClick: () => setFilter("all"),
+              className: "text-xs text-ui-fg-muted hover:text-ui-fg-base transition-colors",
+              "aria-label": "Show all orders (clear filter)",
+              children: "Clear filter"
             }
           )
-        ] }),
-        filter !== "all" && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AnalyticsStatCard,
+        {
+          label: "Total orders",
+          value: data.totalOrders.toLocaleString()
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AnalyticsStatCard,
+        {
+          label: "Total revenue",
+          value: formatCurrency$1(data.totalRevenue)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AnalyticsStatCard,
+        {
+          label: "Average order value",
+          value: formatCurrency$1(data.aov)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AnalyticsStatCard,
+        {
+          label: "Orders today",
+          value: data.ordersToday.toLocaleString()
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AnalyticsStatCard,
+        {
+          label: "Pending orders",
+          value: data.pendingOrders.toLocaleString()
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AnalyticsStatCard,
+        {
+          label: "Avg. fulfillment time",
+          value: data.avgFulfillmentTimeHours != null ? `${data.avgFulfillmentTimeHours}h` : "—",
+          helper: "Measured in hours"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AnalyticsStatCard,
+        {
+          label: "Cancelled orders",
+          value: data.cancelledOrders.toLocaleString()
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AnalyticsStatCard,
+        {
+          label: "Delivered orders",
+          value: data.deliveredOrders.toLocaleString()
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AnalyticsStatCard,
+        {
+          label: "Exchange orders",
+          value: data.exchangeOrders.toLocaleString()
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AnalyticsStatCard,
+        {
+          label: "Return orders",
+          value: data.returnOrders.toLocaleString()
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4 xl:grid-cols-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AnalyticsSection, { title: "Orders by status", children: /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[300px] items-center justify-center", children: pieData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 280, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { margin: { top: 8, right: 8, bottom: 8, left: 8 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Pie,
           {
-            type: "button",
-            onClick: () => setFilter("all"),
-            className: "text-xs text-ui-fg-muted hover:text-ui-fg-base transition-colors",
-            "aria-label": "Show all orders (clear filter)",
-            children: "Clear filter"
+            data: pieData,
+            cx: "50%",
+            cy: "50%",
+            innerRadius: 52,
+            outerRadius: 78,
+            paddingAngle: 2,
+            dataKey: "value",
+            nameKey: "name",
+            isAnimationActive: true,
+            children: pieData.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: entry.color }, `cell-${index}`))
           }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 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: "Total orders" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: data.totalOrders.toLocaleString() })
-      ] }),
-      /* @__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.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.jsxs(ui.Container, { className: "p-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Orders today" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: data.ordersToday.toLocaleString() })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm mb-2", children: "Pending orders" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: data.pendingOrders.toLocaleString() })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm mb-2", children: "Avg. fulfillment time (hours)" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: data.avgFulfillmentTimeHours != null ? `${data.avgFulfillmentTimeHours}h` : "—" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 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: "Cancelled orders" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: data.cancelledOrders.toLocaleString() })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Delivered orders" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: data.deliveredOrders.toLocaleString() })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Exchange orders" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: data.exchangeOrders.toLocaleString() })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Return orders" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: data.returnOrders.toLocaleString() })
-      ] })
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Tooltip,
+          {
+            formatter: (value) => [value ?? 0, "Orders"]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { verticalAlign: "bottom", height: 36 })
+      ] }) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "No orders in this period" }) }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(AnalyticsSection, { title: "Returns & exchanges", children: /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-[300px] items-center justify-center", children: returnsExchangesData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 280, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { margin: { top: 8, right: 8, bottom: 8, left: 8 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Pie,
+          {
+            data: returnsExchangesData,
+            cx: "50%",
+            cy: "50%",
+            innerRadius: 52,
+            outerRadius: 78,
+            paddingAngle: 2,
+            dataKey: "value",
+            nameKey: "name",
+            isAnimationActive: true,
+            children: returnsExchangesData.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: entry.color }, `cell-re-${index}`))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Tooltip,
+          {
+            formatter: (value) => [value ?? 0, "Count"]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { verticalAlign: "bottom", height: 36 })
+      ] }) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "No returns or exchanges in this period" }) }) }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row flex-wrap gap-6 items-stretch", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex flex-col", style: { minWidth: "280px" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h3", className: "mb-3", children: "Orders by status" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[280px] flex items-center justify-center", children: pieData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 280, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { margin: { top: 8, right: 8, bottom: 8, left: 8 }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            recharts.Pie,
-            {
-              data: pieData,
-              cx: "50%",
-              cy: "50%",
-              innerRadius: 52,
-              outerRadius: 78,
-              paddingAngle: 2,
-              dataKey: "value",
-              nameKey: "name",
-              isAnimationActive: true,
-              children: pieData.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: entry.color }, `cell-${index}`))
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { formatter: (value) => [value ?? 0, "Orders"] }),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { verticalAlign: "bottom", height: 36 })
-        ] }) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "No orders in this period" }) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex flex-col", style: { minWidth: "280px" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h3", className: "mb-3", children: "Returns & exchanges" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[280px] flex items-center justify-center", children: returnsExchangesData.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: 280, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { margin: { top: 8, right: 8, bottom: 8, left: 8 }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            recharts.Pie,
-            {
-              data: returnsExchangesData,
-              cx: "50%",
-              cy: "50%",
-              innerRadius: 52,
-              outerRadius: 78,
-              paddingAngle: 2,
-              dataKey: "value",
-              nameKey: "name",
-              isAnimationActive: true,
-              children: returnsExchangesData.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: entry.color }, `cell-re-${index}`))
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { formatter: (value) => [value ?? 0, "Count"] }),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { verticalAlign: "bottom", height: 36 })
-        ] }) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "No returns or exchanges in this period" }) })
-      ] })
-    ] }) }),
-    /* @__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.jsx(ui.Heading, { level: "h3", children: "Orders over time" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AnalyticsSection,
+      {
+        title: "Orders over time",
+        actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { htmlFor: "over-time-period", className: "text-ui-fg-muted text-sm", children: "Range" }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "select",
@@ -273,72 +377,72 @@ function OrdersDashboard() {
               children: OVER_TIME_PERIODS.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.value, children: p.label }, p.value))
             }
           )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-72", children: overTimeLoading ? /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "flex items-center justify-center h-full",
-          role: "status",
-          "aria-label": "Loading orders over time",
-          children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted", children: "Loading chart…" })
-        }
-      ) : overTimeError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger", children: overTimeError }) }) : /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
-        recharts.LineChart,
-        {
-          data: dailyOrders,
-          margin: { top: 8, right: 8, left: 8, bottom: 8 },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", className: "stroke-ui-border-base" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              recharts.XAxis,
-              {
-                dataKey: "date",
-                tick: { fontSize: 12 },
-                tickFormatter: (v, index) => {
-                  const row = dailyOrders[index];
-                  if (row == null ? void 0 : row.label) return row.label;
-                  const d = new Date(v);
-                  return `${d.getUTCMonth() + 1}/${d.getUTCDate()}`;
+        ] }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-72", children: overTimeLoading ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "flex items-center justify-center h-full",
+            role: "status",
+            "aria-label": "Loading orders over time",
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted", children: "Loading chart…" })
+          }
+        ) : overTimeError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger", children: overTimeError }) }) : /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          recharts.LineChart,
+          {
+            data: dailyOrders,
+            margin: { top: 8, right: 8, left: 8, bottom: 8 },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", className: "stroke-ui-border-base" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.XAxis,
+                {
+                  dataKey: "date",
+                  tick: { fontSize: 12 },
+                  tickFormatter: (v, index) => {
+                    const row = dailyOrders[index];
+                    if (row == null ? void 0 : row.label) return row.label;
+                    const d = new Date(v);
+                    return `${d.getUTCMonth() + 1}/${d.getUTCDate()}`;
+                  }
                 }
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              recharts.YAxis,
-              {
-                tick: { fontSize: 12 },
-                allowDecimals: false,
-                domain: [0, "auto"],
-                ticks: (() => {
-                  const max = Math.max(
-                    1,
-                    ...dailyOrders.map((d) => d.orders_count ?? 0)
-                  );
-                  const step = max <= 10 ? 1 : Math.ceil(max / 6);
-                  const arr = [];
-                  for (let i = 0; i <= max; i += step) arr.push(i);
-                  if (arr[arr.length - 1] !== max) arr.push(max);
-                  return arr;
-                })(),
-                tickFormatter: (v) => String(Math.floor(Number(v) || 0))
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(OrdersOverTimeTooltip, {}) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              recharts.Line,
-              {
-                type: "monotone",
-                dataKey: "orders_count",
-                name: "Orders",
-                stroke: "var(--medusa-color-ui-fg-interactive)",
-                strokeWidth: 2,
-                dot: { r: 3 }
-              }
-            )
-          ]
-        }
-      ) }) })
-    ] })
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.YAxis,
+                {
+                  tick: { fontSize: 12 },
+                  allowDecimals: false,
+                  domain: [0, "auto"],
+                  ticks: (() => {
+                    const max = Math.max(
+                      1,
+                      ...dailyOrders.map((d) => d.orders_count ?? 0)
+                    );
+                    const step = max <= 10 ? 1 : Math.ceil(max / 6);
+                    const arr = [];
+                    for (let i = 0; i <= max; i += step) arr.push(i);
+                    if (arr[arr.length - 1] !== max) arr.push(max);
+                    return arr;
+                  })(),
+                  tickFormatter: (v) => String(Math.floor(Number(v) || 0))
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(OrdersOverTimeTooltip, {}) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.Line,
+                {
+                  type: "monotone",
+                  dataKey: "orders_count",
+                  name: "Orders",
+                  stroke: "var(--medusa-color-ui-fg-interactive)",
+                  strokeWidth: 2,
+                  dot: { r: 3 }
+                }
+              )
+            ]
+          }
+        ) }) }) })
+      }
+    )
   ] });
 }
 function CustomersOverTimeTooltip({
@@ -386,7 +490,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" }
@@ -454,64 +558,81 @@ function CustomersDashboard() {
   if (error || !data) {
     return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger", children: error ?? "Failed to load analytics" }) });
   }
-  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.jsx(ui.Heading, { level: "h2", children: "Customers" }),
-      /* @__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: "customers-count-period",
-              className: "text-ui-fg-muted text-sm",
-              children: "Period (counts)"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "select",
+  return /* @__PURE__ */ jsxRuntime.jsxs(AnalyticsDashboardShell, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AnalyticsDashboardHeader,
+      {
+        title: "Customers",
+        description: "Keep customer acquisition and account mix compact, readable, and aligned with the rest of analytics.",
+        actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Label,
+              {
+                htmlFor: "customers-count-period",
+                className: "text-ui-fg-muted text-sm",
+                children: "Period"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "select",
+              {
+                id: "customers-count-period",
+                value: countDays,
+                onChange: (e) => setCountDays(e.target.value),
+                className: "h-9 rounded-md border border-ui-border-base bg-transparent px-3 text-sm text-ui-fg-base outline-none transition focus:ring-2 focus:ring-ui-fg-interactive",
+                children: COUNT_DAY_PRESETS.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.value, children: p.label }, p.value))
+              }
+            )
+          ] }),
+          countDays !== "all" && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
             {
-              id: "customers-count-period",
-              value: countDays,
-              onChange: (e) => setCountDays(e.target.value),
-              className: "h-9 rounded-md border border-ui-border-base bg-transparent px-3 text-sm text-ui-fg-base outline-none transition focus:ring-2 focus:ring-ui-fg-interactive",
-              children: COUNT_DAY_PRESETS.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.value, children: p.label }, p.value))
+              type: "button",
+              onClick: () => setCountDays("all"),
+              className: "text-xs text-ui-fg-muted hover:text-ui-fg-base transition-colors",
+              "aria-label": "Show all customers (clear filter)",
+              children: "Clear filter"
             }
           )
-        ] }),
-        countDays !== "all" && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => setCountDays("all"),
-            className: "text-xs text-ui-fg-muted hover:text-ui-fg-base transition-colors",
-            "aria-label": "Show all customers (clear filter)",
-            children: "Clear filter"
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 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: "Guest customers" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: Math.floor(data.guestCount).toLocaleString() })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Registered customers" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: Math.floor(data.registeredCount).toLocaleString() })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Overall customers" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: Math.floor(data.totalCount).toLocaleString() })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Deleted accounts" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: (data.deletedAccountsCount ?? 0).toLocaleString() })
-      ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AnalyticsStatCard,
+        {
+          label: "Guest customers",
+          value: Math.floor(data.guestCount).toLocaleString()
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AnalyticsStatCard,
+        {
+          label: "Registered customers",
+          value: Math.floor(data.registeredCount).toLocaleString()
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AnalyticsStatCard,
+        {
+          label: "Overall customers",
+          value: Math.floor(data.totalCount).toLocaleString()
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AnalyticsStatCard,
+        {
+          label: "Deleted accounts",
+          value: (data.deletedAccountsCount ?? 0).toLocaleString()
+        }
+      )
     ] }),
-    /* @__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.jsx(ui.Heading, { level: "h3", children: "Customers over time" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AnalyticsSection,
+      {
+        title: "Customers over time",
+        actions: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             ui.Label,
             {
@@ -527,104 +648,727 @@ 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))
             }
           )
+        ] }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-72", children: graphLoading ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "flex items-center justify-center h-full",
+            role: "status",
+            "aria-label": "Loading customers over time",
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted", children: "Loading chart…" })
+          }
+        ) : graphError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger", children: graphError }) }) : /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          recharts.LineChart,
+          {
+            data: series,
+            margin: { top: 8, right: 8, left: 8, bottom: 8 },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.CartesianGrid,
+                {
+                  strokeDasharray: "3 3",
+                  className: "stroke-ui-border-base"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.XAxis,
+                {
+                  dataKey: "date",
+                  tick: { fontSize: 12 },
+                  tickFormatter: (v, index) => {
+                    const row = series[index];
+                    if (row == null ? void 0 : row.label) return row.label;
+                    const d = new Date(v);
+                    return `${d.getUTCMonth() + 1}/${d.getUTCDate()}`;
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.YAxis,
+                {
+                  tick: { fontSize: 12 },
+                  tickFormatter: (v) => String(Math.floor(Number(v))),
+                  allowDecimals: false
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomersOverTimeTooltip, {}) }),
+              /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.Line,
+                {
+                  type: "monotone",
+                  dataKey: "registered_count",
+                  name: "Registered",
+                  stroke: REGISTERED_COLOR,
+                  strokeWidth: 2,
+                  dot: { r: 3 }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                recharts.Line,
+                {
+                  type: "monotone",
+                  dataKey: "guest_count",
+                  name: "Guest",
+                  stroke: GUEST_COLOR,
+                  strokeWidth: 2,
+                  dot: { r: 3 }
+                }
+              )
+            ]
+          }
+        ) }) }) })
+      }
+    )
+  ] });
+}
+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)) })
         ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-72", children: graphLoading ? /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "flex items-center justify-center h-full",
-          role: "status",
-          "aria-label": "Loading customers over time",
-          children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted", children: "Loading chart…" })
-        }
-      ) : graphError ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger", children: graphError }) }) : /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
-        recharts.LineChart,
-        {
-          data: series,
-          margin: { top: 8, right: 8, left: 8, bottom: 8 },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              recharts.CartesianGrid,
+      ]
+    }
+  );
+}
+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(AnalyticsDashboardShell, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AnalyticsDashboardHeader,
+      {
+        title: "Products",
+        description: "Track units sold, revenue, best sellers, and product visit behavior in a denser, easier-to-scan layout.",
+        actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { 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",
               {
-                strokeDasharray: "3 3",
-                className: "stroke-ui-border-base"
+                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(
-              recharts.XAxis,
+              "select",
               {
-                dataKey: "date",
-                tick: { fontSize: 12 },
-                tickFormatter: (v, index) => {
-                  const row = series[index];
-                  if (row == null ? void 0 : row.label) return row.label;
-                  const d = new Date(v);
-                  return `${d.getUTCMonth() + 1}/${d.getUTCDate()}`;
-                }
+                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: "rounded-2xl border border-ui-border-base bg-ui-bg-base p-4 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-danger text-sm", children: filtersError }) }),
+    !viewsConnected && /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "rounded-2xl border border-ui-border-base bg-ui-bg-base p-4 shadow-sm", 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: "rounded-2xl border border-ui-border-base bg-ui-bg-base p-4 shadow-sm", 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 gap-4 sm:grid-cols-2 xl:grid-cols-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AnalyticsStatCard,
+        {
+          label: "Units sold",
+          value: summary.unitsSold.toLocaleString()
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AnalyticsStatCard,
+        {
+          label: "Product revenue",
+          value: formatCurrency(summary.productRevenue)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AnalyticsStatCard,
+        {
+          label: "Orders with product sales",
+          value: summary.ordersWithProducts.toLocaleString()
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AnalyticsStatCard,
+        {
+          label: "Active products sold",
+          value: summary.activeProductsSold.toLocaleString()
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AnalyticsStatCard,
+        {
+          label: "Product views",
+          value: summary.totalProductViews.toLocaleString()
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AnalyticsStatCard,
+        {
+          label: "View / order ratio",
+          value: formatRatio(summary.viewToOrderRatio)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AnalyticsSection,
+      {
+        title: "Sales and views over time",
+        description: "Units sold and revenue are always shown. Product views appear when tracking data is available.",
+        actions: /* @__PURE__ */ 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))
+            }
+          )
+        ] }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { children: /* @__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 gap-4 xl:grid-cols-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AnalyticsSection,
+        {
+          title: "Best sellers",
+          description: "Ranked by units sold.",
+          actions: /* @__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
+          )) }),
+          children: /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { children: /* @__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,
               {
-                tick: { fontSize: 12 },
-                tickFormatter: (v) => String(Math.floor(Number(v))),
-                allowDecimals: false
+                type: "category",
+                dataKey: "product_title",
+                width: 160,
+                tickLine: false
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomersOverTimeTooltip, {}) }),
-            /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
+            /* @__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.jsx(
+        AnalyticsSection,
+        {
+          title: "Top seller breakdown",
+          description: "Compact leaderboard for the leading products in the selected period.",
+          children: /* @__PURE__ */ jsxRuntime.jsx(AnalyticsTableSurface, { children: /* @__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 gap-4 xl:grid-cols-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AnalyticsSection,
+        {
+          title: "Most viewed products",
+          description: "View activity is sourced from the existing product-helper tracking module.",
+          children: /* @__PURE__ */ jsxRuntime.jsx(AnalyticsChartSurface, { children: /* @__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.Line,
+              recharts.YAxis,
               {
-                type: "monotone",
-                dataKey: "registered_count",
-                name: "Registered",
-                stroke: REGISTERED_COLOR,
-                strokeWidth: 2,
-                dot: { r: 3 }
+                type: "category",
+                dataKey: "product_title",
+                width: 160,
+                tickLine: false
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              recharts.Line,
-              {
-                type: "monotone",
-                dataKey: "guest_count",
-                name: "Guest",
-                stroke: GUEST_COLOR,
-                strokeWidth: 2,
-                dot: { r: 3 }
-              }
-            )
-          ]
+            /* @__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.jsx(
+        AnalyticsSection,
+        {
+          title: "View-to-sales opportunities",
+          description: "Highlight products that attract attention but convert less efficiently.",
+          children: /* @__PURE__ */ jsxRuntime.jsx(AnalyticsTableSurface, { children: /* @__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");
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full bg-ui-bg-base", children: /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "divide-y p-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-6 px-6", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h1", className: "mb-4", children: "Analytics" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 mb-6", children: ANALYTICS_MODULES.map((m) => /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Button,
-      {
-        variant: activeModule === m.id ? "secondary" : "transparent",
-        size: "small",
-        onClick: () => setActiveModule(m.id),
-        children: m.label
-      },
-      m.id
-    )) }),
-    activeModule === "orders" && /* @__PURE__ */ jsxRuntime.jsx(OrdersDashboard, {}),
-    activeModule === "customers" && /* @__PURE__ */ jsxRuntime.jsx(CustomersDashboard, {})
-  ] }) }) }) });
+  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("div", { className: "mx-auto flex w-full max-w-[1600px] flex-col gap-4 p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "overflow-hidden rounded-2xl border border-ui-border-base bg-ui-bg-base p-0 shadow-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5 px-5 py-5 xl:flex-row xl:items-end xl:justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h1", className: "tracking-tight", children: "Analytics" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted text-sm", children: "Review orders, customers, and products in one organized workspace." })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-2 rounded-2xl border border-ui-border-base bg-ui-bg-subtle p-1.5", children: ANALYTICS_MODULES.map((m) => /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            variant: activeModule === m.id ? "secondary" : "transparent",
+            size: "small",
+            onClick: () => setActiveModule(m.id),
+            children: m.label
+          },
+          m.id
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 bg-ui-bg-subtle" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      activeModule === "orders" && /* @__PURE__ */ jsxRuntime.jsx(OrdersDashboard, {}),
+      activeModule === "customers" && /* @__PURE__ */ jsxRuntime.jsx(CustomersDashboard, {}),
+      activeModule === "products" && /* @__PURE__ */ jsxRuntime.jsx(ProductsDashboard, {})
+    ] })
+  ] }) }) });
 };
 const config = adminSdk.defineRouteConfig({
   label: "Analytics",