medusa-analytics 0.0.2 → 0.0.4

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

@@ -5,6 +5,39 @@ const adminSdk = require("@medusajs/admin-sdk");
 const icons = require("@medusajs/icons");
 const ui = require("@medusajs/ui");
 const recharts = require("recharts");
+function OrdersOverTimeTooltip({
+  active,
+  payload,
+  label
+}) {
+  var _a, _b;
+  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() : label);
+  const value = ((_b = payload[0]) == null ? void 0 : _b.value) ?? 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        backgroundColor: "rgb(254, 233, 233)",
+        color: "rgba(5, 0, 0, 0)",
+        border: "1px solidrgb(0, 0, 0)",
+        borderRadius: "8px",
+        padding: "12px 16px",
+        boxShadow: "0 4px 14px rgba(102, 102, 102, 0.99)",
+        fontSize: "14px",
+        lineHeight: 1.5
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, marginBottom: "6px", color: "#111827" }, children: displayLabel }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: "#374151" }, children: [
+          "Orders: ",
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { color: "#1f2937" }, children: value })
+        ] })
+      ]
+    }
+  );
+}
 const STATUS_COLORS = {
   pending: "#F59E0B",
   confirmed: "#3B82F6",
@@ -29,25 +62,32 @@ function formatCurrency(value) {
     maximumFractionDigits: 0
   }).format(value);
 }
+const SUMMARY_PERIODS = [
+  { value: "0", label: "Today's orders" },
+  { value: "7", label: "Last 7 days" },
+  { value: "30", label: "Last 30 days" },
+  { value: "90", label: "Last 90 days" }
+];
+const OVER_TIME_PERIODS = [
+  { value: "daily", label: "Daily" },
+  { value: "weekly", label: "Weekly" },
+  { value: "monthly", label: "Monthly" }
+];
 function OrdersDashboard() {
   const [data, setData] = react.useState(null);
   const [loading, setLoading] = react.useState(true);
   const [error, setError] = react.useState(null);
   const [filter, setFilter] = react.useState("7");
+  const [dailyOrders, setDailyOrders] = react.useState([]);
+  const [overTimePeriod, setOverTimePeriod] = react.useState("weekly");
+  const [overTimeLoading, setOverTimeLoading] = react.useState(true);
+  const [overTimeError, setOverTimeError] = react.useState(null);
   react.useEffect(() => {
     let cancelled = false;
     setLoading(true);
     setError(null);
     const url = `/admin/analytics/orders-summary?days=${filter}`;
-    if (typeof fetch !== "undefined") {
-      fetch("http://127.0.0.1:7242/ingest/47f434f8-0643-48e5-bd1a-edfe05973288", { method: "POST", headers: { "Content-Type": "application/json", "X-Debug-Session-Id": "21bff8" }, body: JSON.stringify({ sessionId: "21bff8", location: "OrdersDashboard.tsx:useEffect", message: "OrdersDashboard fetch", data: { filter, url }, timestamp: Date.now(), hypothesisId: "C" }) }).catch(() => {
-      });
-    }
     fetch(url).then((res) => {
-      if (typeof fetch !== "undefined") {
-        fetch("http://127.0.0.1:7242/ingest/47f434f8-0643-48e5-bd1a-edfe05973288", { method: "POST", headers: { "Content-Type": "application/json", "X-Debug-Session-Id": "21bff8" }, body: JSON.stringify({ sessionId: "21bff8", location: "OrdersDashboard.tsx:fetch.then", message: "API response", data: { status: res.status, statusText: res.statusText, url: res.url }, timestamp: Date.now(), hypothesisId: "C" }) }).catch(() => {
-        });
-      }
       if (!res.ok) throw new Error(res.statusText);
       return res.json();
     }).then((body) => {
@@ -61,6 +101,25 @@ function OrdersDashboard() {
       cancelled = true;
     };
   }, [filter]);
+  react.useEffect(() => {
+    let cancelled = false;
+    setOverTimeLoading(true);
+    setOverTimeError(null);
+    const url = `/admin/analytics/orders-over-time?period=${overTimePeriod}`;
+    fetch(url).then((res) => {
+      if (!res.ok) throw new Error(res.statusText);
+      return res.json();
+    }).then((body) => {
+      if (!cancelled) setDailyOrders(body.dailyOrders ?? []);
+    }).catch((e) => {
+      if (!cancelled) setOverTimeError(e instanceof Error ? e.message : String(e));
+    }).finally(() => {
+      if (!cancelled) setOverTimeLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [overTimePeriod]);
   if (loading) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -85,24 +144,19 @@ function OrdersDashboard() {
   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: "h1", children: "Orders Analytics" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4", 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.jsxs(
+        /* @__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: [
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "0", children: "Today's orders" }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "7", children: "Last 7 days" }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "30", children: "Last 30 days" }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "90", children: "Last 90 days" })
-            ]
+            children: SUMMARY_PERIODS.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.value, children: p.label }, p.value))
           }
         )
-      ] })
+      ] }) })
     ] }),
     /* @__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: [
@@ -133,11 +187,56 @@ function OrdersDashboard() {
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h3", className: "mb-4", children: "Orders over time" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-72", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h3", className: "mb-4", children: "Orders by status" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-72", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Pie,
+          {
+            data: pieData,
+            cx: "50%",
+            cy: "50%",
+            innerRadius: 60,
+            outerRadius: 100,
+            paddingAngle: 2,
+            dataKey: "value",
+            nameKey: "name",
+            label: ({ name, value }) => `${name}: ${value}`,
+            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, {})
+      ] }) }) })
+    ] }),
+    /* @__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(ui.Label, { htmlFor: "over-time-period", className: "text-ui-fg-muted text-sm", children: "Range" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              id: "over-time-period",
+              value: overTimePeriod,
+              onChange: (e) => setOverTimePeriod(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: 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: data.dailyOrders,
+          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" }),
@@ -146,20 +245,16 @@ function OrdersDashboard() {
               {
                 dataKey: "date",
                 tick: { fontSize: 12 },
-                tickFormatter: (v) => {
+                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 } }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              recharts.Tooltip,
-              {
-                labelFormatter: (v) => new Date(v).toLocaleDateString(),
-                formatter: (value) => [value ?? 0, "Orders"]
-              }
-            ),
+            /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(OrdersOverTimeTooltip, {}) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               recharts.Line,
               {
@@ -174,42 +269,311 @@ function OrdersDashboard() {
           ]
         }
       ) }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h3", className: "mb-4", children: "Orders by status" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-72", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { children: [
+    ] })
+  ] });
+}
+function CustomersOverTimeTooltip({
+  active,
+  payload,
+  label
+}) {
+  var _a, _b, _c;
+  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() : label);
+  const registered = Math.floor(((_b = payload.find((p) => p.name === "Registered")) == null ? void 0 : _b.value) ?? 0);
+  const guest = Math.floor(((_c = payload.find((p) => p.name === "Guest")) == null ? void 0 : _c.value) ?? 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        backgroundColor: "rgb(254, 254, 254)",
+        color: "#111827",
+        border: "1px solid rgb(229, 231, 235)",
+        borderRadius: "8px",
+        padding: "12px 16px",
+        boxShadow: "0 4px 14px rgba(0, 0, 0, 0.08)",
+        fontSize: "14px",
+        lineHeight: 1.5
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, marginBottom: "6px", color: "#111827" }, children: displayLabel }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: "#374151" }, children: [
+          "Registered: ",
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { color: "#1f2937" }, children: registered })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: "#374151" }, children: [
+          "Guest: ",
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { color: "#1f2937" }, children: guest })
+        ] })
+      ]
+    }
+  );
+}
+const COUNT_DAY_PRESETS = [
+  { value: "3", label: "Last 3 days" },
+  { value: "5", label: "Last 5 days" },
+  { value: "7", label: "Last 7 days" },
+  { value: "9", label: "Last 9 days" },
+  { value: "14", label: "Last 14 days" },
+  { value: "30", label: "Last 30 days" },
+  { value: "90", label: "Last 90 days" }
+];
+const GRAPH_PERIODS = [
+  { value: "daily", label: "Daily" },
+  { value: "weekly", label: "Weekly" },
+  { value: "monthly", label: "Monthly" },
+  { value: "yearly", label: "Yearly" }
+];
+const REGISTERED_COLOR = "var(--medusa-color-ui-fg-interactive)";
+const GUEST_COLOR = "#6B7280";
+function CustomersDashboard() {
+  const [data, setData] = react.useState(null);
+  const [loading, setLoading] = react.useState(true);
+  const [error, setError] = react.useState(null);
+  const [countDays, setCountDays] = react.useState("7");
+  const [series, setSeries] = react.useState([]);
+  const [graphPeriod, setGraphPeriod] = react.useState("weekly");
+  const [graphLoading, setGraphLoading] = react.useState(true);
+  const [graphError, setGraphError] = react.useState(null);
+  react.useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    const url = `/admin/analytics/customers-summary?days=${countDays}`;
+    fetch(url).then((res) => {
+      if (!res.ok) throw new Error(res.statusText);
+      return res.json();
+    }).then((body) => {
+      if (!cancelled) setData(body);
+    }).catch((e) => {
+      if (!cancelled) setError(e instanceof Error ? e.message : String(e));
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [countDays]);
+  react.useEffect(() => {
+    let cancelled = false;
+    setGraphLoading(true);
+    setGraphError(null);
+    const url = `/admin/analytics/customers-over-time?period=${graphPeriod}`;
+    fetch("http://127.0.0.1:7242/ingest/47f434f8-0643-48e5-bd1a-edfe05973288", {
+      method: "POST",
+      headers: { "Content-Type": "application/json", "X-Debug-Session-Id": "4a7f37" },
+      body: JSON.stringify({
+        sessionId: "4a7f37",
+        location: "CustomersDashboard.tsx:fetch",
+        message: "customers-over-time fetch start",
+        data: { graphPeriod, url },
+        timestamp: Date.now(),
+        hypothesisId: "H1-H2"
+      })
+    }).catch(() => {
+    });
+    fetch(url).then((res) => {
+      if (!res.ok) throw new Error(res.statusText);
+      return res.json();
+    }).then((body) => {
+      var _a, _b;
+      const received = body.series ?? [];
+      fetch("http://127.0.0.1:7242/ingest/47f434f8-0643-48e5-bd1a-edfe05973288", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", "X-Debug-Session-Id": "4a7f37" },
+        body: JSON.stringify({
+          sessionId: "4a7f37",
+          location: "CustomersDashboard.tsx:response",
+          message: "customers-over-time response",
+          data: { graphPeriod, seriesLength: received.length, firstDate: (_a = received[0]) == null ? void 0 : _a.date, lastDate: (_b = received[received.length - 1]) == null ? void 0 : _b.date, cancelled },
+          timestamp: Date.now(),
+          hypothesisId: "H2-H5"
+        })
+      }).catch(() => {
+      });
+      if (!cancelled) setSeries(received);
+    }).catch((e) => {
+      if (!cancelled) setGraphError(e instanceof Error ? e.message : String(e));
+    }).finally(() => {
+      if (!cancelled) setGraphLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [graphPeriod]);
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "flex items-center justify-center min-h-[320px]",
+        role: "status",
+        "aria-label": "Loading analytics",
+        children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted", children: "Loading…" })
+      }
+    );
+  }
+  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: "h1", children: "Customers Analytics" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          recharts.Pie,
+          ui.Label,
           {
-            data: pieData,
-            cx: "50%",
-            cy: "50%",
-            innerRadius: 60,
-            outerRadius: 100,
-            paddingAngle: 2,
-            dataKey: "value",
-            nameKey: "name",
-            label: ({ name, value }) => `${name}: ${value}`,
-            children: pieData.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: entry.color }, `cell-${index}`))
+            htmlFor: "customers-count-period",
+            className: "text-ui-fg-muted text-sm",
+            children: "Period (counts)"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { formatter: (value) => [value ?? 0, "Orders"] }),
-        /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {})
-      ] }) }) })
+        /* @__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))
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm: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: "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-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(
+            ui.Label,
+            {
+              htmlFor: "customers-graph-period",
+              className: "text-ui-fg-muted text-sm",
+              children: "Range"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              id: "customers-graph-period",
+              value: graphPeriod,
+              onChange: (e) => setGraphPeriod(e.target.value),
+              className: "h-9 rounded-md border border-ui-border-base bg-transparent px-3 text-sm text-ui-fg-base outline-none transition focus:ring-2 focus:ring-ui-fg-interactive",
+              children: GRAPH_PERIODS.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.value, children: p.label }, p.value))
+            }
+          )
+        ] })
+      ] }),
+      /* @__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 ANALYTICS_MODULES = [{ id: "orders", label: "Orders" }];
+const ANALYTICS_MODULES = [
+  { id: "orders", label: "Orders" },
+  { id: "customers", label: "Customers" }
+];
 const PLUGIN_VERSION = "0.2";
 const AnalyticsPage = () => {
   const [activeModule, setActiveModule] = react.useState("orders");
-  if (typeof fetch !== "undefined") {
-    fetch("http://127.0.0.1:7242/ingest/47f434f8-0643-48e5-bd1a-edfe05973288", { method: "POST", headers: { "Content-Type": "application/json", "X-Debug-Session-Id": "21bff8" }, body: JSON.stringify({ sessionId: "21bff8", location: "page.tsx:AnalyticsPage", message: "Analytics page mounted", data: { pluginVersion: PLUGIN_VERSION, activeModule }, timestamp: Date.now(), hypothesisId: "A" }) }).catch(() => {
-    });
-  }
+  const [sidebarOpen, setSidebarOpen] = react.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full bg-ui-bg-base", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "w-56 shrink-0 border-r border-ui-border-base bg-ui-bg-subtle p-4 flex flex-col", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h3", className: "mb-3 text-ui-fg-subtle", children: "Analysis" }),
+    sidebarOpen && /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "w-56 shrink-0 border-r border-ui-border-base bg-ui-bg-subtle p-4 flex flex-col relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h3", className: "text-ui-fg-subtle", children: "Analysis" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            variant: "transparent",
+            size: "small",
+            className: "shrink-0",
+            onClick: () => setSidebarOpen(false),
+            "aria-label": "Close sidebar",
+            children: "×"
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex flex-col gap-1 flex-1", children: ANALYTICS_MODULES.map((m) => /* @__PURE__ */ jsxRuntime.jsx(
         ui.Button,
         {
@@ -225,7 +589,20 @@ const AnalyticsPage = () => {
         PLUGIN_VERSION
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "divide-y p-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-6 px-6", children: activeModule === "orders" && /* @__PURE__ */ jsxRuntime.jsx(OrdersDashboard, {}) }) }) })
+    !sidebarOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-r border-ui-border-base p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Button,
+      {
+        variant: "secondary",
+        size: "small",
+        onClick: () => setSidebarOpen(true),
+        "aria-label": "Show sidebar",
+        children: "Analysis"
+      }
+    ) }),
+    /* @__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: [
+      activeModule === "orders" && /* @__PURE__ */ jsxRuntime.jsx(OrdersDashboard, {}),
+      activeModule === "customers" && /* @__PURE__ */ jsxRuntime.jsx(CustomersDashboard, {})
+    ] }) }) })
   ] });
 };
 const config = adminSdk.defineRouteConfig({