medusa-analytics 0.0.3 → 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",
@@ -36,9 +69,9 @@ const SUMMARY_PERIODS = [
   { value: "90", label: "Last 90 days" }
 ];
 const OVER_TIME_PERIODS = [
-  { value: "1d", label: "1 day" },
-  { value: "7d", label: "1 week" },
-  { value: "30d", label: "1 month" }
+  { value: "daily", label: "Daily" },
+  { value: "weekly", label: "Weekly" },
+  { value: "monthly", label: "Monthly" }
 ];
 function OrdersDashboard() {
   const [data, setData] = react.useState(null);
@@ -46,7 +79,7 @@ function OrdersDashboard() {
   const [error, setError] = react.useState(null);
   const [filter, setFilter] = react.useState("7");
   const [dailyOrders, setDailyOrders] = react.useState([]);
-  const [overTimePeriod, setOverTimePeriod] = react.useState("7d");
+  const [overTimePeriod, setOverTimePeriod] = react.useState("weekly");
   const [overTimeLoading, setOverTimeLoading] = react.useState(true);
   const [overTimeError, setOverTimeError] = react.useState(null);
   react.useEffect(() => {
@@ -212,27 +245,301 @@ 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, { 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({
+  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(
+          ui.Label,
+          {
+            htmlFor: "customers-count-period",
+            className: "text-ui-fg-muted text-sm",
+            children: "Period (counts)"
+          }
+        ),
+        /* @__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.Tooltip,
+              recharts.YAxis,
               {
-                labelFormatter: (v) => new Date(v).toLocaleDateString(),
-                formatter: (value) => [value ?? 0, "Orders"]
+                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: "orders_count",
-                name: "Orders",
-                stroke: "var(--medusa-color-ui-fg-interactive)",
+                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 }
               }
@@ -243,7 +550,10 @@ function OrdersDashboard() {
     ] })
   ] });
 }
-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");
@@ -289,7 +599,10 @@ const AnalyticsPage = () => {
         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.jsx("div", { className: "py-6 px-6", children: activeModule === "orders" && /* @__PURE__ */ jsxRuntime.jsx(OrdersDashboard, {}) }) }) })
+    /* @__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({