medusa-plugin-statistics 0.1.0

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

@@ -0,0 +1,789 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback, useMemo } from "react";
+import { defineRouteConfig } from "@medusajs/admin-sdk";
+import { XCircle, ExclamationCircle, ChatBubbleLeftRight, ChartBar } from "@medusajs/icons";
+import { Container, Heading, Text, Badge, Drawer, Button, Select, Input, CodeBlock, toast } from "@medusajs/ui";
+import { useContainerWidth, ResponsiveGridLayout, verticalCompactor } from "react-grid-layout";
+import "react-grid-layout/css/styles.css";
+import { useQuery, useQueryClient, useMutation } from "@tanstack/react-query";
+import Medusa from "@medusajs/js-sdk";
+import { ResponsiveContainer, AreaChart, XAxis, YAxis, Tooltip, Area, BarChart, Bar, LineChart, Line, PieChart, Pie, Cell } from "recharts";
+import { Link } from "react-router-dom";
+const sdk = new Medusa({
+  baseUrl: "/",
+  debug: false,
+  auth: {
+    type: "session"
+  }
+});
+const useStatistics = (period) => {
+  return useQuery({
+    queryFn: () => sdk.client.fetch("/admin/statistics", { query: { period } }),
+    queryKey: ["statistics", period]
+  });
+};
+const useRecentOrders = (limit = 10) => {
+  return useQuery({
+    queryFn: () => sdk.client.fetch("/admin/statistics/recent-orders", { query: { limit } }),
+    queryKey: ["statistics-recent-orders", limit]
+  });
+};
+const useLowStock = (threshold = 10) => {
+  return useQuery({
+    queryFn: () => sdk.client.fetch("/admin/statistics/low-stock", { query: { threshold } }),
+    queryKey: ["statistics-low-stock", threshold]
+  });
+};
+const useStatisticsLayout = () => {
+  return useQuery({
+    queryFn: () => sdk.client.fetch("/admin/statistics/layout"),
+    queryKey: ["statistics-layout"]
+  });
+};
+const useSaveStatisticsLayout = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (layout) => sdk.client.fetch("/admin/statistics/layout", { method: "POST", body: { layout } }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["statistics-layout"] });
+    }
+  });
+};
+const useRecalculateStatistics = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: () => sdk.client.fetch("/admin/statistics/recalculate", { method: "POST", body: {} }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["statistics"] });
+    }
+  });
+};
+const RevenueWidget = ({ statistics, totals }) => {
+  var _a;
+  const chartData = statistics.map((s) => ({
+    date: new Date(s.date).toLocaleDateString("en-US", { month: "short", day: "numeric" }),
+    revenue: s.revenue_total
+  }));
+  return /* @__PURE__ */ jsxs(Container, { className: "h-full p-4 flex flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsx(Heading, { level: "h3", children: "Revenue" }),
+      /* @__PURE__ */ jsxs(Text, { size: "xlarge", weight: "plus", className: "text-ui-fg-base", children: [
+        "$",
+        ((_a = totals.revenue_total) == null ? void 0 : _a.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })) ?? "0.00"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: chartData.length > 0 ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", minWidth: 0, minHeight: 0, children: /* @__PURE__ */ jsxs(AreaChart, { data: chartData, children: [
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "revGrad", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: "#6366f1", stopOpacity: 0.3 }),
+        /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: "#6366f1", stopOpacity: 0 })
+      ] }) }),
+      /* @__PURE__ */ jsx(XAxis, { dataKey: "date", tick: { fontSize: 11 } }),
+      /* @__PURE__ */ jsx(YAxis, { tick: { fontSize: 11 }, width: 60 }),
+      /* @__PURE__ */ jsx(Tooltip, { formatter: (v) => [`$${v.toFixed(2)}`, "Revenue"] }),
+      /* @__PURE__ */ jsx(Area, { type: "monotone", dataKey: "revenue", stroke: "#6366f1", fill: "url(#revGrad)" })
+    ] }) }) : /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-muted", children: "No data for this period." }) })
+  ] });
+};
+const OrdersCountWidget = ({ statistics, totals }) => {
+  var _a;
+  const chartData = statistics.map((s) => ({
+    date: new Date(s.date).toLocaleDateString("en-US", { month: "short", day: "numeric" }),
+    orders: s.order_count
+  }));
+  return /* @__PURE__ */ jsxs(Container, { className: "h-full p-4 flex flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+      /* @__PURE__ */ jsx(Heading, { level: "h3", children: "Orders" }),
+      /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", className: "text-ui-fg-base", children: ((_a = totals.order_count) == null ? void 0 : _a.toLocaleString()) ?? 0 })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: chartData.length > 0 ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", minWidth: 0, minHeight: 0, children: /* @__PURE__ */ jsxs(BarChart, { data: chartData, children: [
+      /* @__PURE__ */ jsx(XAxis, { dataKey: "date", tick: { fontSize: 11 } }),
+      /* @__PURE__ */ jsx(YAxis, { tick: { fontSize: 11 }, width: 40, allowDecimals: false }),
+      /* @__PURE__ */ jsx(Tooltip, {}),
+      /* @__PURE__ */ jsx(Bar, { dataKey: "orders", fill: "#10b981", radius: [4, 4, 0, 0] })
+    ] }) }) : /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-muted", children: "No data for this period." }) })
+  ] });
+};
+const PERIOD_LABELS$1 = {
+  today: "Today",
+  week: "Last 7 days",
+  month: "Last 30 days"
+};
+const AovWidget = ({ statistics, totals, period }) => {
+  var _a;
+  const chartData = statistics.map((s) => ({
+    date: new Date(s.date).toLocaleDateString("en-US", { month: "short", day: "numeric" }),
+    aov: s.average_order_value
+  }));
+  return /* @__PURE__ */ jsxs(Container, { className: "h-full p-4 flex flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1", children: [
+      /* @__PURE__ */ jsx(Heading, { level: "h3", children: "Avg Order Value" }),
+      /* @__PURE__ */ jsx(Text, { size: "xsmall", className: "text-ui-fg-muted", children: PERIOD_LABELS$1[period] ?? period })
+    ] }),
+    /* @__PURE__ */ jsxs(Text, { size: "xlarge", weight: "plus", className: "text-ui-fg-base", children: [
+      "$",
+      ((_a = totals.average_order_value) == null ? void 0 : _a.toFixed(2)) ?? "0.00"
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 mt-2", children: chartData.length > 1 ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", minWidth: 0, minHeight: 0, children: /* @__PURE__ */ jsxs(LineChart, { data: chartData, children: [
+      /* @__PURE__ */ jsx(XAxis, { dataKey: "date", tick: { fontSize: 11 } }),
+      /* @__PURE__ */ jsx(YAxis, { tick: { fontSize: 11 }, width: 50, tickFormatter: (v) => `$${v}` }),
+      /* @__PURE__ */ jsx(Tooltip, { formatter: (v) => [`$${v.toFixed(2)}`, "AOV"] }),
+      /* @__PURE__ */ jsx(
+        Line,
+        {
+          type: "monotone",
+          dataKey: "aov",
+          stroke: "#f59e0b",
+          strokeWidth: 2,
+          dot: false
+        }
+      )
+    ] }) }) : /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-muted", children: "Not enough data to chart." }) })
+  ] });
+};
+const TopProductsWidget = ({ statistics }) => {
+  const aggregated = {};
+  for (const stat of statistics) {
+    for (const p of (stat == null ? void 0 : stat.top_products) ?? []) {
+      if (!(p == null ? void 0 : p.product_id)) continue;
+      const existing = aggregated[p.product_id];
+      if (existing) {
+        existing.quantity_sold += p.quantity_sold;
+      } else {
+        aggregated[p.product_id] = { title: p.title, quantity_sold: p.quantity_sold };
+      }
+    }
+  }
+  const products = Object.values(aggregated).sort((a, b) => b.quantity_sold - a.quantity_sold).slice(0, 8);
+  const chartData = products.map((p) => ({
+    name: p.title.length > 20 ? p.title.slice(0, 20) + "..." : p.title,
+    sold: p.quantity_sold
+  }));
+  return /* @__PURE__ */ jsxs(Container, { className: "h-full p-4 flex flex-col", children: [
+    /* @__PURE__ */ jsx(Heading, { level: "h3", className: "mb-2", children: "Top Products" }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: chartData.length > 0 ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", minWidth: 0, minHeight: 0, children: /* @__PURE__ */ jsxs(BarChart, { data: chartData, layout: "vertical", children: [
+      /* @__PURE__ */ jsx(XAxis, { type: "number", tick: { fontSize: 11 }, allowDecimals: false }),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          type: "category",
+          dataKey: "name",
+          tick: { fontSize: 11 },
+          width: 120
+        }
+      ),
+      /* @__PURE__ */ jsx(Tooltip, {}),
+      /* @__PURE__ */ jsx(Bar, { dataKey: "sold", fill: "#8b5cf6", radius: [0, 4, 4, 0] })
+    ] }) }) : /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-muted", children: "No data yet." }) })
+  ] });
+};
+const STATUS_COLORS = {
+  completed: "green",
+  pending: "orange",
+  canceled: "red",
+  archived: "grey",
+  requires_action: "blue"
+};
+const RecentOrdersWidget = (_props) => {
+  const { data, isLoading } = useRecentOrders(8);
+  const orders = (data == null ? void 0 : data.orders) ?? [];
+  return /* @__PURE__ */ jsxs(Container, { className: "h-full p-0 flex flex-col", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-4 pt-4 pb-2", children: /* @__PURE__ */ jsx(Heading, { level: "h3", children: "Recent Orders" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+      isLoading && /* @__PURE__ */ jsx(Text, { size: "small", className: "px-4 text-ui-fg-muted", children: "Loading..." }),
+      !isLoading && orders.length === 0 && /* @__PURE__ */ jsx(Text, { size: "small", className: "px-4 text-ui-fg-muted", children: "No orders yet." }),
+      orders.map((order) => {
+        var _a;
+        return /* @__PURE__ */ jsxs(
+          Link,
+          {
+            to: `/orders/${order.id}`,
+            className: "flex items-center justify-between px-4 py-2 border-b border-ui-border-base last:border-b-0 hover:bg-ui-bg-base-hover transition-colors no-underline",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                /* @__PURE__ */ jsxs(Text, { size: "small", weight: "plus", children: [
+                  "#",
+                  order.display_id
+                ] }),
+                /* @__PURE__ */ jsx(Text, { size: "xsmall", className: "text-ui-fg-subtle", children: ((_a = order.customer) == null ? void 0 : _a.first_name) ? `${order.customer.first_name} ${order.customer.last_name ?? ""}` : order.email })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxs(Text, { size: "small", className: "font-mono", children: [
+                  "$",
+                  (order.total ?? 0).toFixed(2)
+                ] }),
+                /* @__PURE__ */ jsx(Badge, { size: "xsmall", color: STATUS_COLORS[order.status] ?? "grey", children: order.status })
+              ] })
+            ]
+          },
+          order.id
+        );
+      })
+    ] })
+  ] });
+};
+const COLORS = ["#6366f1", "#a5b4fc"];
+const CustomerCountWidget = ({ totals }) => {
+  const newCount = totals.new_customer_count ?? 0;
+  const returningCount = totals.returning_customer_count ?? 0;
+  const total = newCount + returningCount;
+  const chartData = [
+    { name: "New", value: newCount },
+    { name: "Returning", value: returningCount }
+  ];
+  return /* @__PURE__ */ jsxs(Container, { className: "h-full p-4 flex flex-col", children: [
+    /* @__PURE__ */ jsx(Heading, { level: "h3", children: "Customers" }),
+    /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", className: "text-ui-fg-base mt-1", children: total }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 mt-1", children: total > 0 ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", minWidth: 0, minHeight: 0, children: /* @__PURE__ */ jsxs(PieChart, { children: [
+      /* @__PURE__ */ jsx(
+        Pie,
+        {
+          data: chartData,
+          dataKey: "value",
+          innerRadius: "50%",
+          outerRadius: "80%",
+          paddingAngle: 2,
+          children: chartData.map((_, i) => /* @__PURE__ */ jsx(Cell, { fill: COLORS[i] }, i))
+        }
+      ),
+      /* @__PURE__ */ jsx(Tooltip, {})
+    ] }) }) : /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-muted", children: "No data yet." }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-4 text-xs text-ui-fg-subtle", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("span", { className: "inline-block w-2 h-2 rounded-full mr-1", style: { backgroundColor: COLORS[0] } }),
+        "New: ",
+        newCount
+      ] }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("span", { className: "inline-block w-2 h-2 rounded-full mr-1", style: { backgroundColor: COLORS[1] } }),
+        "Returning: ",
+        returningCount
+      ] })
+    ] })
+  ] });
+};
+const FulfillmentWidget = ({ totals }) => {
+  const count = totals.pending_fulfillment_count ?? 0;
+  const color = count === 0 ? "green" : count <= 5 ? "orange" : "red";
+  return /* @__PURE__ */ jsxs(Container, { className: "h-full p-4 flex flex-col", children: [
+    /* @__PURE__ */ jsx(Heading, { level: "h3", children: "Pending Fulfillment" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center justify-center", children: [
+      /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", className: "text-ui-fg-base text-4xl", children: count }),
+      /* @__PURE__ */ jsx(Badge, { size: "small", color, className: "mt-2", children: count === 0 ? "All fulfilled" : `${count} awaiting` })
+    ] })
+  ] });
+};
+const LowStockWidget = (_props) => {
+  const { data, isLoading } = useLowStock(50);
+  const warnings = (data == null ? void 0 : data.warnings) ?? [];
+  return /* @__PURE__ */ jsxs(Container, { className: "h-full p-0 flex flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-4 pt-4 pb-2 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(Heading, { level: "h3", children: "Inventory Warnings" }),
+      warnings.length > 0 && /* @__PURE__ */ jsx(Badge, { size: "xsmall", color: "red", children: warnings.length })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+      isLoading && /* @__PURE__ */ jsx(Text, { size: "small", className: "px-4 text-ui-fg-muted", children: "Loading..." }),
+      !isLoading && warnings.length === 0 && /* @__PURE__ */ jsx(Text, { size: "small", className: "px-4 text-ui-fg-muted", children: "All inventory levels OK." }),
+      warnings.map((w, i) => /* @__PURE__ */ jsxs(
+        Link,
+        {
+          to: `/inventory/${w.inventory_item_id}`,
+          className: "flex items-start gap-2 px-4 py-2 border-b border-ui-border-base last:border-b-0 hover:bg-ui-bg-base-hover transition-colors no-underline",
+          children: [
+            w.reason === "no_lots" ? /* @__PURE__ */ jsx(XCircle, { className: "text-ui-fg-error mt-0.5 shrink-0" }) : /* @__PURE__ */ jsx(ExclamationCircle, { className: "text-ui-tag-orange-icon mt-0.5 shrink-0" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", className: "truncate", children: w.title || w.sku }),
+              /* @__PURE__ */ jsxs(Text, { size: "xsmall", className: "text-ui-fg-subtle", children: [
+                w.location_name,
+                w.reason === "no_lots" ? " — No stock lots" : ` — ${w.available_quantity} available`
+              ] })
+            ] })
+          ]
+        },
+        `${w.inventory_item_id}-${w.location_id}`
+      ))
+    ] })
+  ] });
+};
+const WIDGETS = [
+  {
+    id: "revenue",
+    title: "Revenue",
+    layouts: {
+      lg: { x: 0, y: 0, w: 4, h: 3, minW: 3, minH: 2 },
+      md: { x: 0, y: 0, w: 4, h: 3, minW: 3, minH: 2 },
+      sm: { x: 0, y: 0, w: 4, h: 3, minW: 2, minH: 2 }
+    },
+    component: RevenueWidget
+  },
+  {
+    id: "orders",
+    title: "Orders",
+    layouts: {
+      lg: { x: 4, y: 0, w: 4, h: 3, minW: 3, minH: 2 },
+      md: { x: 4, y: 0, w: 4, h: 3, minW: 3, minH: 2 },
+      sm: { x: 0, y: 3, w: 4, h: 3, minW: 2, minH: 2 }
+    },
+    component: OrdersCountWidget
+  },
+  {
+    id: "aov",
+    title: "Avg Order Value",
+    layouts: {
+      lg: { x: 8, y: 0, w: 4, h: 3, minW: 2, minH: 2 },
+      md: { x: 0, y: 3, w: 4, h: 3, minW: 2, minH: 2 },
+      sm: { x: 0, y: 6, w: 4, h: 3, minW: 2, minH: 2 }
+    },
+    component: AovWidget
+  },
+  {
+    id: "top-products",
+    title: "Top Products",
+    layouts: {
+      lg: { x: 0, y: 3, w: 4, h: 4, minW: 3, minH: 3 },
+      md: { x: 4, y: 3, w: 4, h: 3, minW: 3, minH: 3 },
+      sm: { x: 0, y: 9, w: 4, h: 4, minW: 2, minH: 3 }
+    },
+    component: TopProductsWidget
+  },
+  {
+    id: "recent-orders",
+    title: "Recent Orders",
+    layouts: {
+      lg: { x: 4, y: 3, w: 8, h: 4, minW: 4, minH: 3 },
+      md: { x: 0, y: 6, w: 8, h: 4, minW: 4, minH: 3 },
+      sm: { x: 0, y: 13, w: 4, h: 4, minW: 2, minH: 3 }
+    },
+    component: RecentOrdersWidget
+  },
+  {
+    id: "customers",
+    title: "Customers",
+    layouts: {
+      lg: { x: 0, y: 7, w: 3, h: 3, minW: 2, minH: 2 },
+      md: { x: 0, y: 10, w: 4, h: 3, minW: 2, minH: 2 },
+      sm: { x: 0, y: 17, w: 4, h: 3, minW: 2, minH: 2 }
+    },
+    component: CustomerCountWidget
+  },
+  {
+    id: "fulfillment",
+    title: "Pending Fulfillment",
+    layouts: {
+      lg: { x: 3, y: 7, w: 3, h: 3, minW: 2, minH: 2 },
+      md: { x: 4, y: 10, w: 4, h: 3, minW: 2, minH: 2 },
+      sm: { x: 0, y: 20, w: 4, h: 3, minW: 2, minH: 2 }
+    },
+    component: FulfillmentWidget
+  },
+  {
+    id: "low-stock",
+    title: "Low Stock",
+    layouts: {
+      lg: { x: 6, y: 7, w: 6, h: 3, minW: 4, minH: 2 },
+      md: { x: 0, y: 13, w: 8, h: 3, minW: 4, minH: 2 },
+      sm: { x: 0, y: 23, w: 4, h: 3, minW: 2, minH: 2 }
+    },
+    component: LowStockWidget
+  }
+];
+const baseUrl = "";
+let rpcId = 1;
+let mcpSessionId = null;
+async function mcpRequest(method, params) {
+  const headers = {
+    "Content-Type": "application/json",
+    Accept: "application/json, text/event-stream"
+  };
+  if (mcpSessionId) {
+    headers["mcp-session-id"] = mcpSessionId;
+  }
+  const res = await fetch(`${baseUrl}/admin/mcp`, {
+    method: "POST",
+    credentials: "include",
+    headers,
+    body: JSON.stringify({
+      jsonrpc: "2.0",
+      id: rpcId++,
+      method,
+      params
+    })
+  });
+  const newSessionId = res.headers.get("mcp-session-id");
+  if (newSessionId) {
+    mcpSessionId = newSessionId;
+  }
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(`MCP error ${res.status}: ${text}`);
+  }
+  return res.json();
+}
+async function mcpInitialize() {
+  mcpSessionId = null;
+  return mcpRequest("initialize", {
+    protocolVersion: "2025-03-26",
+    capabilities: {},
+    clientInfo: { name: "medusa-admin-chat", version: "1.0.0" }
+  });
+}
+async function mcpListTools() {
+  var _a;
+  const res = await mcpRequest("tools/list", {});
+  return ((_a = res == null ? void 0 : res.result) == null ? void 0 : _a.tools) ?? (res == null ? void 0 : res.tools) ?? [];
+}
+async function mcpCallTool(name, args) {
+  var _a;
+  const res = await mcpRequest("tools/call", { name, arguments: args });
+  const content = ((_a = res == null ? void 0 : res.result) == null ? void 0 : _a.content) ?? (res == null ? void 0 : res.content) ?? [];
+  return content.map((c) => c.text ?? JSON.stringify(c)).join("\n");
+}
+const McpQuery = () => {
+  var _a, _b;
+  const [open, setOpen] = useState(false);
+  const [tools, setTools] = useState([]);
+  const [selectedToolName, setSelectedToolName] = useState("");
+  const [paramValues, setParamValues] = useState({});
+  const [messages, setMessages] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [initialized, setInitialized] = useState(false);
+  const messagesEndRef = useRef(null);
+  const selectedTool = tools.find((t) => t.name === selectedToolName) ?? null;
+  useEffect(() => {
+    var _a2;
+    (_a2 = messagesEndRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  const handleOpen = async (isOpen) => {
+    setOpen(isOpen);
+    if (isOpen && !initialized) {
+      try {
+        await mcpInitialize();
+        const toolList = await mcpListTools();
+        setTools(toolList);
+        setInitialized(true);
+      } catch (err) {
+        console.error("[MCP] Connection error:", err);
+        setMessages([{ role: "assistant", content: "Failed to connect to MCP server." }]);
+      }
+    }
+  };
+  const handleSelectTool = (value) => {
+    setSelectedToolName(value);
+    setParamValues({});
+  };
+  const handleExecute = async () => {
+    var _a2;
+    if (!selectedTool) return;
+    setLoading(true);
+    const args = {};
+    const props = ((_a2 = selectedTool.inputSchema) == null ? void 0 : _a2.properties) ?? {};
+    for (const [key, schema] of Object.entries(props)) {
+      const raw = paramValues[key];
+      if (raw === void 0 || raw === "") continue;
+      if (schema.type === "number" || schema.type === "integer") {
+        args[key] = Number(raw);
+      } else if (schema.type === "array") {
+        try {
+          args[key] = JSON.parse(raw);
+        } catch {
+          args[key] = raw.split(",").map((s) => s.trim());
+        }
+      } else if (schema.type === "object") {
+        try {
+          args[key] = JSON.parse(raw);
+        } catch {
+          args[key] = raw;
+        }
+      } else {
+        args[key] = raw;
+      }
+    }
+    setMessages((prev) => [
+      ...prev,
+      { role: "user", content: `${selectedTool.name}(${JSON.stringify(args)})` }
+    ]);
+    try {
+      const result = await mcpCallTool(selectedTool.name, args);
+      setMessages((prev) => [...prev, { role: "assistant", content: result }]);
+    } catch (err) {
+      setMessages((prev) => [
+        ...prev,
+        { role: "assistant", content: `Error: ${err.message ?? "Unknown error"}` }
+      ]);
+    }
+    setLoading(false);
+    setSelectedToolName("");
+    setParamValues({});
+  };
+  const allParams = selectedTool ? [
+    ...Object.entries(((_a = selectedTool.inputSchema) == null ? void 0 : _a.properties) ?? {}).filter(
+      ([key]) => {
+        var _a2;
+        return (((_a2 = selectedTool.inputSchema) == null ? void 0 : _a2.required) ?? []).includes(key);
+      }
+    ),
+    ...Object.entries(((_b = selectedTool.inputSchema) == null ? void 0 : _b.properties) ?? {}).filter(
+      ([key]) => {
+        var _a2;
+        return !(((_a2 = selectedTool.inputSchema) == null ? void 0 : _a2.required) ?? []).includes(key);
+      }
+    )
+  ] : [];
+  return /* @__PURE__ */ jsxs(Drawer, { open, onOpenChange: handleOpen, children: [
+    /* @__PURE__ */ jsx(Drawer.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { size: "small", children: [
+      /* @__PURE__ */ jsx(ChatBubbleLeftRight, { className: "mr-1" }),
+      "Query Data"
+    ] }) }),
+    /* @__PURE__ */ jsxs(Drawer.Content, { children: [
+      /* @__PURE__ */ jsxs(Drawer.Header, { children: [
+        /* @__PURE__ */ jsx(Drawer.Title, { children: "Query Data" }),
+        /* @__PURE__ */ jsx(Drawer.Description, { children: "Run queries against your store data using MCP tools." })
+      ] }),
+      /* @__PURE__ */ jsxs(Drawer.Body, { className: "flex flex-col gap-4 overflow-hidden", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxs(Select, { value: selectedToolName, onValueChange: handleSelectTool, children: [
+            /* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Select a tool..." }) }),
+            /* @__PURE__ */ jsx(Select.Content, { children: tools.map((tool) => /* @__PURE__ */ jsx(Select.Item, { value: tool.name, children: tool.name }, tool.name)) })
+          ] }),
+          selectedTool && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Text, { size: "xsmall", className: "text-ui-fg-subtle", children: selectedTool.description }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2 items-end", children: [
+              allParams.map(([key, schema]) => {
+                var _a2;
+                return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+                  /* @__PURE__ */ jsxs(Text, { size: "xsmall", className: "text-ui-fg-subtle", children: [
+                    key,
+                    (((_a2 = selectedTool.inputSchema) == null ? void 0 : _a2.required) ?? []).includes(key) ? " *" : ""
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      size: "small",
+                      placeholder: schema.description ?? key,
+                      value: paramValues[key] ?? "",
+                      onChange: (e) => setParamValues((prev) => ({ ...prev, [key]: e.target.value }))
+                    }
+                  )
+                ] }, key);
+              }),
+              /* @__PURE__ */ jsx(Button, { size: "small", onClick: handleExecute, disabled: loading, children: "Run" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto flex flex-col gap-2 min-h-0", children: [
+          messages.map(
+            (msg, i) => msg.role === "user" ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "max-w-[90%] self-end rounded-lg px-3 py-2 text-xs bg-ui-bg-subtle text-ui-fg-base",
+                children: /* @__PURE__ */ jsx("pre", { className: "whitespace-pre-wrap font-mono break-all", children: msg.content })
+              },
+              i
+            ) : /* @__PURE__ */ jsx("div", { className: "self-start w-full", children: /* @__PURE__ */ jsx(
+              CodeBlock,
+              {
+                snippets: [
+                  {
+                    label: "Result",
+                    language: "json",
+                    code: msg.content,
+                    hideLineNumbers: true
+                  }
+                ],
+                children: /* @__PURE__ */ jsx(CodeBlock.Body, { className: "text-xs [&_code]:text-xs" })
+              }
+            ) }, i)
+          ),
+          loading && /* @__PURE__ */ jsx(Text, { size: "xsmall", className: "text-ui-fg-muted", children: "Running..." }),
+          /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+const config = defineRouteConfig({
+  label: "Statistics",
+  icon: ChartBar,
+  rank: 0
+});
+const handle = { breadcrumb: () => "Statistics" };
+const PERIOD_LABELS = {
+  today: "Today",
+  week: "This Week",
+  month: "This Month"
+};
+function buildDefaultLayouts() {
+  return {
+    lg: WIDGETS.map((w) => ({ i: w.id, ...w.layouts.lg })),
+    md: WIDGETS.map((w) => ({ i: w.id, ...w.layouts.md })),
+    sm: WIDGETS.map((w) => ({ i: w.id, ...w.layouts.sm }))
+  };
+}
+function mergeLayouts(saved, widgets) {
+  const defaults = buildDefaultLayouts();
+  if (!saved || saved.length === 0) return defaults;
+  const savedMap = new Map(saved.map((s) => [s.widget_id, s]));
+  return {
+    ...defaults,
+    lg: widgets.map((w) => {
+      const s = savedMap.get(w.id);
+      if (s) return { i: w.id, ...w.layouts.lg, x: s.x, y: s.y, w: s.w, h: s.h };
+      return { i: w.id, ...w.layouts.lg };
+    })
+  };
+}
+const StatisticsPage = () => {
+  const [period, setPeriod] = useState("week");
+  const [editMode, setEditMode] = useState(false);
+  const [layouts, setLayouts] = useState(buildDefaultLayouts);
+  const { width: gridWidth, containerRef: gridRef, mounted: gridMounted } = useContainerWidth({
+    measureBeforeMount: true
+  });
+  const { data: statsData, isLoading } = useStatistics(period);
+  const { data: layoutData } = useStatisticsLayout();
+  const { mutate: saveLayout } = useSaveStatisticsLayout();
+  const { mutate: recalculate, isPending: recalculating } = useRecalculateStatistics();
+  useEffect(() => {
+    if (layoutData == null ? void 0 : layoutData.layout) {
+      setLayouts(mergeLayouts(layoutData.layout, WIDGETS));
+    }
+  }, [layoutData]);
+  const handleLayoutChange = useCallback(
+    (_layout, allLayouts) => {
+      if (!editMode) return;
+      setLayouts((prev) => ({
+        ...prev,
+        ...Object.fromEntries(
+          Object.entries(allLayouts).map(([bp, l]) => [bp, [...l]])
+        )
+      }));
+    },
+    [editMode]
+  );
+  const handleSaveLayout = () => {
+    const payload = layouts.lg.map((l) => ({
+      widget_id: l.i,
+      x: l.x,
+      y: l.y,
+      w: l.w,
+      h: l.h,
+      visible: true
+    }));
+    saveLayout(payload, {
+      onSuccess: () => {
+        toast.success("Layout saved");
+        setEditMode(false);
+      },
+      onError: () => toast.error("Failed to save layout")
+    });
+  };
+  const widgetMap = useMemo(
+    () => new Map(WIDGETS.map((w) => [w.id, w])),
+    []
+  );
+  const statistics = (statsData == null ? void 0 : statsData.statistics) ?? [];
+  const totals = (statsData == null ? void 0 : statsData.totals) ?? {
+    revenue_total: 0,
+    order_count: 0,
+    average_order_value: 0,
+    new_customer_count: 0,
+    returning_customer_count: 0,
+    pending_fulfillment_count: 0,
+    low_stock_count: 0
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4", children: [
+    /* @__PURE__ */ jsx(Container, { className: "p-0", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 px-6 py-4 md:flex-row md:items-center md:justify-between", children: [
+      /* @__PURE__ */ jsx(Heading, { level: "h1", children: "Statistics" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex rounded-lg border border-ui-border-base overflow-hidden", children: Object.keys(PERIOD_LABELS).map((p) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setPeriod(p),
+            className: `px-3 py-1.5 text-xs font-medium transition-colors ${period === p ? "bg-ui-bg-base-pressed text-ui-fg-base" : "text-ui-fg-subtle hover:bg-ui-bg-base-hover"}`,
+            children: PERIOD_LABELS[p]
+          },
+          p
+        )) }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "small",
+            variant: "secondary",
+            onClick: () => recalculate(void 0, {
+              onSuccess: () => toast.success("Statistics recalculated"),
+              onError: () => toast.error("Recalculation failed")
+            }),
+            isLoading: recalculating,
+            children: "Recalculate"
+          }
+        ),
+        editMode ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", onClick: () => setEditMode(false), children: "Cancel" }),
+          /* @__PURE__ */ jsx(Button, { size: "small", onClick: handleSaveLayout, children: "Save Layout" })
+        ] }) : /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", onClick: () => setEditMode(true), children: "Customize" }),
+        /* @__PURE__ */ jsx(McpQuery, {})
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { ref: gridRef, className: editMode ? "ring-2 ring-ui-border-interactive ring-offset-2 rounded-lg" : "", children: isLoading ? /* @__PURE__ */ jsx(Container, { className: "p-6", children: /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-muted", children: "Loading statistics..." }) }) : gridMounted && /* @__PURE__ */ jsx(
+      ResponsiveGridLayout,
+      {
+        width: gridWidth,
+        layouts,
+        breakpoints: { lg: 1200, md: 768, sm: 480 },
+        cols: { lg: 12, md: 8, sm: 4 },
+        rowHeight: 80,
+        dragConfig: { enabled: editMode, handle: ".drag-handle" },
+        resizeConfig: { enabled: editMode },
+        onLayoutChange: handleLayoutChange,
+        containerPadding: [0, 0],
+        compactor: verticalCompactor,
+        children: layouts.lg.map((l) => {
+          const widget = widgetMap.get(l.i);
+          if (!widget) return null;
+          const Component = widget.component;
+          return /* @__PURE__ */ jsxs("div", { className: "relative h-full", children: [
+            editMode && /* @__PURE__ */ jsx("div", { className: "drag-handle absolute top-0 left-0 right-0 h-6 bg-ui-bg-subtle-hover cursor-move rounded-t-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(Text, { size: "xsmall", className: "text-ui-fg-muted", children: "Drag to move" }) }),
+            /* @__PURE__ */ jsx(Component, { statistics, totals, period })
+          ] }, l.i);
+        })
+      }
+    ) })
+  ] });
+};
+const widgetModule = { widgets: [] };
+const routeModule = {
+  routes: [
+    {
+      Component: StatisticsPage,
+      path: "/statistics",
+      handle
+    }
+  ]
+};
+const menuItemModule = {
+  menuItems: [
+    {
+      label: config.label,
+      icon: config.icon,
+      path: "/statistics",
+      nested: void 0,
+      rank: 0,
+      translationNs: void 0
+    }
+  ]
+};
+const formModule = { customFields: {} };
+const displayModule = {
+  displays: {}
+};
+const i18nModule = { resources: {} };
+const plugin = {
+  widgetModule,
+  routeModule,
+  menuItemModule,
+  formModule,
+  displayModule,
+  i18nModule
+};
+export {
+  plugin as default
+};