@agilo/medusa-analytics-plugin 1.0.0 → 1.1.0

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

@@ -7,10 +7,10 @@ const icons = require("@medusajs/icons");
 const lucideReact = require("lucide-react");
 const dateFns = require("date-fns");
 const reactAriaComponents = require("react-aria-components");
+const reactRouterDom = require("react-router-dom");
 const recharts = require("recharts");
 const clsx = require("clsx");
 const tailwindMerge = require("tailwind-merge");
-const reactRouterDom = require("react-router-dom");
 const reactQuery = require("@tanstack/react-query");
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -675,68 +675,65 @@ const LineChart = ({
   const isDark = useDarkMode();
   const isSingleDataPoint = data && data.length === 1;
   if (isSingleDataPoint) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-ui-fg-muted mb-2", children: "Single day selected - showing as bar chart for better visibility" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { aspect: 16 / 9, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data, margin: { left: 20 }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          recharts.CartesianGrid,
-          {
-            strokeDasharray: "3 3",
-            stroke: isDark ? "#374151" : "#E5E7EB"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          recharts.XAxis,
-          {
-            dataKey: xAxisDataKey,
-            tick: { fill: isDark ? "#D1D5DB" : "#6B7280" },
-            axisLine: { stroke: isDark ? "#4B5563" : "#D1D5DB" },
-            tickLine: { stroke: isDark ? "#4B5563" : "#D1D5DB" },
-            tickMargin: 10
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          recharts.YAxis,
-          {
-            tickFormatter: yAxisTickFormatter,
-            allowDecimals: false,
-            tick: { fill: isDark ? "#D1D5DB" : "#6B7280" },
-            axisLine: { stroke: isDark ? "#4B5563" : "#D1D5DB" },
-            tickLine: { stroke: isDark ? "#4B5563" : "#D1D5DB" }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          recharts.Tooltip,
-          {
-            cursor: {
-              fill: isDark ? "rgba(55, 65, 81, 0.2)" : "rgba(243, 244, 246, 0.5)"
-            },
-            formatter: (value) => yAxisTickFormatter ? yAxisTickFormatter(value) : value,
-            contentStyle: {
-              backgroundColor: isDark ? "#1F2937" : "#FFFFFF",
-              border: `1px solid ${isDark ? "#374151" : "#E5E7EB"}`,
-              borderRadius: "0.5rem",
-              color: isDark ? "#F9FAFB" : "#111827",
-              boxShadow: isDark ? "0 4px 6px -1px rgba(0, 0, 0, 0.3)" : "0 4px 6px -1px rgba(0, 0, 0, 0.1)"
-            },
-            labelStyle: {
-              color: isDark ? "#F9FAFB" : "#111827",
-              fontWeight: "500",
-              marginBottom: "4px"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          recharts.Bar,
-          {
-            dataKey: yAxisDataKey,
-            fill: lineColor,
-            radius: [4, 4, 0, 0],
-            maxBarSize: 60
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { aspect: 16 / 9, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data, margin: { left: 20 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.CartesianGrid,
+        {
+          strokeDasharray: "3 3",
+          stroke: isDark ? "#374151" : "#E5E7EB"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.XAxis,
+        {
+          dataKey: xAxisDataKey,
+          tick: { fill: isDark ? "#D1D5DB" : "#6B7280" },
+          axisLine: { stroke: isDark ? "#4B5563" : "#D1D5DB" },
+          tickLine: { stroke: isDark ? "#4B5563" : "#D1D5DB" },
+          tickMargin: 10
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.YAxis,
+        {
+          tickFormatter: yAxisTickFormatter,
+          allowDecimals: false,
+          tick: { fill: isDark ? "#D1D5DB" : "#6B7280" },
+          axisLine: { stroke: isDark ? "#4B5563" : "#D1D5DB" },
+          tickLine: { stroke: isDark ? "#4B5563" : "#D1D5DB" }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.Tooltip,
+        {
+          cursor: {
+            fill: isDark ? "rgba(55, 65, 81, 0.2)" : "rgba(243, 244, 246, 0.5)"
+          },
+          formatter: (value) => yAxisTickFormatter ? yAxisTickFormatter(value) : value,
+          contentStyle: {
+            backgroundColor: isDark ? "#1F2937" : "#FFFFFF",
+            border: `1px solid ${isDark ? "#374151" : "#E5E7EB"}`,
+            borderRadius: "0.5rem",
+            color: isDark ? "#F9FAFB" : "#111827",
+            boxShadow: isDark ? "0 4px 6px -1px rgba(0, 0, 0, 0.3)" : "0 4px 6px -1px rgba(0, 0, 0, 0.1)"
+          },
+          labelStyle: {
+            color: isDark ? "#F9FAFB" : "#111827",
+            fontWeight: "500",
+            marginBottom: "4px"
           }
-        )
-      ] }) })
-    ] });
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.Bar,
+        {
+          dataKey: yAxisDataKey,
+          fill: lineColor,
+          radius: [4, 4, 0, 0],
+          maxBarSize: 60
+        }
+      )
+    ] }) }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { aspect: 16 / 9, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data, margin: { left: 20 }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -1075,7 +1072,7 @@ const ProductsTable = ({ products }) => {
     products.length > PAGE_SIZE && /* @__PURE__ */ jsxRuntime.jsx(ui.DataTable.Pagination, {})
   ] });
 };
-const BACKEND_URL$1 = window.location.origin;
+const BACKEND_URL$1 = __BACKEND_URL__ === "/" ? "" : __BACKEND_URL__;
 async function retrieveProductAnalytics(date) {
   if (!date || !date.from || !(date == null ? void 0 : date.to)) {
     return void 0;
@@ -1098,7 +1095,7 @@ const useProductAnalytics = (query, options) => {
     ...options
   });
 };
-const BACKEND_URL = window.location.origin;
+const BACKEND_URL = __BACKEND_URL__ === "/" ? "" : __BACKEND_URL__;
 async function retrieveOrderAnalytics(preset, date) {
   if (!date || !date.from || !(date == null ? void 0 : date.to)) {
     const data2 = await fetch(
@@ -1242,16 +1239,39 @@ function rangeValueToDateRange(rangeValue) {
     to: rangeValue.end ? calendarDateToDate(rangeValue.end) : void 0
   };
 }
+function presetToDateRange(preset) {
+  const today = /* @__PURE__ */ new Date();
+  if (preset === "this-month") return { from: dateFns.startOfMonth(today), to: today };
+  if (preset === "last-month")
+    return {
+      from: dateFns.startOfMonth(dateFns.subMonths(today, 1)),
+      to: dateFns.endOfMonth(dateFns.subMonths(today, 1))
+    };
+  return {
+    from: dateFns.startOfMonth(dateFns.subMonths(today, 3)),
+    to: dateFns.endOfMonth(dateFns.subMonths(today, 1))
+  };
+}
+const DATE_RANGE_REGEX = /^(\d{4}-\d{2}-\d{2})-(\d{4}-\d{2}-\d{2})$/;
 const AnalyticsPage = () => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-  const [date, setDate] = React__namespace.useState({
-    from: dateFns.startOfMonth(/* @__PURE__ */ new Date()),
-    to: dateFns.endOfMonth(/* @__PURE__ */ new Date())
-  });
-  const [selectValue, setSelectValue] = React__namespace.useState("this-month");
+  const [searchParams, setSearchParams] = reactRouterDom.useSearchParams();
+  const rangeParam = searchParams.get("range") || "this-month";
+  const date = React__namespace.useMemo(() => {
+    if (rangeParam === "this-month" || rangeParam === "last-month" || rangeParam === "last-3-months") {
+      return presetToDateRange(rangeParam);
+    }
+    const dates = rangeParam.match(DATE_RANGE_REGEX);
+    if (dates) {
+      const from = dateFns.parse(dates[1], "yyyy-MM-dd", /* @__PURE__ */ new Date());
+      const to = dateFns.parse(dates[2], "yyyy-MM-dd", /* @__PURE__ */ new Date());
+      return { from, to };
+    }
+    return void 0;
+  }, [rangeParam]);
   const { data: products, isLoading: isLoadingProducts } = useProductAnalytics(date);
   const { data: orders, isLoading: isLoadingOrders } = useOrderAnalytics(
-    selectValue,
+    ["this-month", "last-month", "last-3-months"].includes(rangeParam) ? rangeParam : "custom",
     date
   );
   const someOrderCountsGreaterThanZero = (_a = orders == null ? void 0 : orders.order_count) == null ? void 0 : _a.some(
@@ -1261,45 +1281,59 @@ const AnalyticsPage = () => {
     (item) => item.sales > 0
   );
   const someTopSellingProductsGreaterThanZero = (_c = products == null ? void 0 : products.variantQuantitySold) == null ? void 0 : _c.some((item) => item.quantity > 0);
-  const updateDatePreset = React__namespace.useCallback((preset) => {
-    const today = /* @__PURE__ */ new Date();
-    switch (preset) {
-      case "this-month":
-        setDate({
-          from: dateFns.startOfMonth(today),
-          to: today
-        });
-        setSelectValue("this-month");
-        break;
-      case "last-month":
-        setDate({
-          from: dateFns.startOfMonth(dateFns.subMonths(today, 1)),
-          to: dateFns.endOfMonth(dateFns.subMonths(today, 1))
-        });
-        setSelectValue("last-month");
-        break;
-      case "last-3-months":
-        setDate({
-          from: dateFns.startOfMonth(dateFns.subMonths(today, 3)),
-          to: dateFns.endOfMonth(dateFns.subMonths(today, 1))
-        });
-        setSelectValue("last-3-months");
-        break;
-      case "custom":
-      default:
-        setSelectValue("custom");
-        break;
-    }
-  }, []);
+  const updateDatePreset = React__namespace.useCallback(
+    (preset) => {
+      const params = new URLSearchParams(searchParams.toString());
+      switch (preset) {
+        case "this-month":
+          params.set("range", "this-month");
+          break;
+        case "last-month":
+          params.set("range", "last-month");
+          break;
+        case "last-3-months":
+          params.set("range", "last-3-months");
+          break;
+        case "custom":
+        default:
+          if (rangeParam === "this-month" || rangeParam === "last-month" || rangeParam === "last-3-months") {
+            const currentDate = presetToDateRange(rangeParam);
+            params.set(
+              "range",
+              `${dateFns.format(currentDate.from || /* @__PURE__ */ new Date(), "yyyy-MM-dd")}-${dateFns.format(
+                currentDate.to || /* @__PURE__ */ new Date(),
+                "yyyy-MM-dd"
+              )}`
+            );
+          }
+          break;
+      }
+      setSearchParams(params);
+    },
+    [searchParams, rangeParam, setSearchParams]
+  );
+  const updateUrlParams = React__namespace.useCallback(
+    (value) => {
+      const params = new URLSearchParams(searchParams.toString());
+      if ((value == null ? void 0 : value.from) && (value == null ? void 0 : value.to)) {
+        params.set(
+          "range",
+          `${dateFns.format(value.from, "yyyy-MM-dd")}-${dateFns.format(
+            value.to,
+            "yyyy-MM-dd"
+          )}`
+        );
+      }
+      setSearchParams(params);
+    },
+    [searchParams, setSearchParams]
+  );
   const handleDateRangeChange = React__namespace.useCallback(
     (value) => {
       const newDateRange = rangeValueToDateRange(value);
-      setDate(newDateRange);
-      if (selectValue !== "custom") {
-        setSelectValue("custom");
-      }
+      updateUrlParams(newDateRange);
     },
-    []
+    [updateUrlParams]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "divide-y p-0", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-x-2 gap-y-4 items-center justify-between px-6 py-4", children: [
@@ -1310,7 +1344,9 @@ const AnalyticsPage = () => {
           {
             disabled: isLoadingOrders || isLoadingProducts,
             defaultValue: "this-month",
-            value: selectValue,
+            value: ["this-month", "last-month", "last-3-months"].includes(
+              rangeParam
+            ) ? rangeParam : "custom",
             onValueChange: updateDatePreset,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Select.Value, {}) }),
@@ -1406,193 +1442,204 @@ const AnalyticsPage = () => {
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs, { defaultValue: "orders", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs.List, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Tabs.Trigger,
-          {
-            value: "orders",
-            disabled: isLoadingOrders || isLoadingProducts,
-            children: "Orders"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Tabs.Trigger,
-          {
-            value: "products",
-            disabled: isLoadingOrders || isLoadingProducts,
-            children: "Products"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs.Content, { value: "orders", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-md:flex-col gap-4 mb-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 flex-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "relative", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(icons.ShoppingCart, { className: "absolute right-6 top-4 text-ui-fg-muted" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", children: "Total Orders" }),
-                isLoadingOrders ? /* @__PURE__ */ jsxRuntime.jsx(SmallCardSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xlarge", weight: "plus", children: (orders == null ? void 0 : orders.total_orders) || 0 }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "xsmall", className: "text-ui-fg-muted", children: [
-                    ((orders == null ? void 0 : orders.prev_orders_percent) || 0) > 0 && "+",
-                    (orders == null ? void 0 : orders.prev_orders_percent) || 0,
-                    "% from previous period"
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Tabs,
+      {
+        value: searchParams.get("tab") || "orders",
+        onValueChange: (value) => {
+          const params = new URLSearchParams(searchParams.toString());
+          params.set("tab", value);
+          setSearchParams(params);
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs.List, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Tabs.Trigger,
+              {
+                value: "orders",
+                disabled: isLoadingOrders || isLoadingProducts,
+                children: "Orders"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Tabs.Trigger,
+              {
+                value: "products",
+                disabled: isLoadingOrders || isLoadingProducts,
+                children: "Products"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs.Content, { value: "orders", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-md:flex-col gap-4 mb-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 flex-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "relative", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(icons.ShoppingCart, { className: "absolute right-6 top-4 text-ui-fg-muted" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", children: "Total Orders" }),
+                    isLoadingOrders ? /* @__PURE__ */ jsxRuntime.jsx(SmallCardSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xlarge", weight: "plus", children: (orders == null ? void 0 : orders.total_orders) || 0 }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "xsmall", className: "text-ui-fg-muted", children: [
+                        ((orders == null ? void 0 : orders.prev_orders_percent) || 0) > 0 && "+",
+                        (orders == null ? void 0 : orders.prev_orders_percent) || 0,
+                        "% from previous period"
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "min-h-[9.375rem]", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xlarge", weight: "plus", children: "Orders Over Time" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Total number of orders in the selected period" }),
+                    isLoadingOrders ? /* @__PURE__ */ jsxRuntime.jsx(LineChartSkeleton, {}) : (orders == null ? void 0 : orders.order_count) && ((_d = orders == null ? void 0 : orders.order_count) == null ? void 0 : _d.length) > 0 && someOrderCountsGreaterThanZero ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", style: { aspectRatio: "16/9" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      LineChart,
+                      {
+                        data: orders == null ? void 0 : orders.order_count,
+                        xAxisDataKey: "name",
+                        yAxisDataKey: "count"
+                      }
+                    ) }) : /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.Text,
+                      {
+                        size: "small",
+                        className: "text-ui-fg-muted text-center",
+                        children: "No data available for the selected period."
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 flex-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "relative", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChartNoAxesCombined, { className: "absolute right-6 text-ui-fg-muted top-4 size-[15px]" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", children: "Total Sales" }),
+                    isLoadingOrders ? /* @__PURE__ */ jsxRuntime.jsx(SmallCardSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xlarge", weight: "plus", children: new Intl.NumberFormat("en-US", {
+                        style: "currency",
+                        currency: (orders == null ? void 0 : orders.currency_code) || "EUR"
+                      }).format((orders == null ? void 0 : orders.total_sales) || 0) }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "xsmall", className: "text-ui-fg-muted", children: [
+                        ((orders == null ? void 0 : orders.prev_sales_percent) || 0) > 0 && "+",
+                        (orders == null ? void 0 : orders.prev_sales_percent) || 0,
+                        "% from previous period"
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "min-h-[9.375rem]", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xlarge", weight: "plus", children: "Sales Over Time" }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: [
+                      "Total sales in the selected period (",
+                      orders == null ? void 0 : orders.currency_code,
+                      ")"
+                    ] }),
+                    isLoadingOrders ? /* @__PURE__ */ jsxRuntime.jsx(LineChartSkeleton, {}) : (orders == null ? void 0 : orders.order_sales) && ((_e = orders == null ? void 0 : orders.order_sales) == null ? void 0 : _e.length) > 0 && someOrderSalesGreaterThanZero ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", style: { aspectRatio: "16/9" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      LineChart,
+                      {
+                        data: orders.order_sales,
+                        xAxisDataKey: "name",
+                        yAxisDataKey: "sales",
+                        lineColor: "#82ca9d",
+                        yAxisTickFormatter: (value) => new Intl.NumberFormat("en-US", {
+                          currency: orders.currency_code,
+                          maximumFractionDigits: 0
+                        }).format(value)
+                      }
+                    ) }) : /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.Text,
+                      {
+                        size: "small",
+                        className: "text-ui-fg-muted text-center",
+                        children: "No data available for the selected period."
+                      }
+                    )
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "min-h-[9.375rem]", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xlarge", weight: "plus", children: "Orders Over Time" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Total number of orders in the selected period" }),
-                isLoadingOrders ? /* @__PURE__ */ jsxRuntime.jsx(LineChartSkeleton, {}) : (orders == null ? void 0 : orders.order_count) && ((_d = orders == null ? void 0 : orders.order_count) == null ? void 0 : _d.length) > 0 && someOrderCountsGreaterThanZero ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", style: { aspectRatio: "16/9" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  LineChart,
-                  {
-                    data: orders == null ? void 0 : orders.order_count,
-                    xAxisDataKey: "name",
-                    yAxisDataKey: "count"
-                  }
-                ) }) : /* @__PURE__ */ jsxRuntime.jsx(
-                  ui.Text,
-                  {
-                    size: "small",
-                    className: "text-ui-fg-muted text-center",
-                    children: "No data available for the selected period."
-                  }
-                )
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-md:flex-col gap-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "min-h-[9.375rem]", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xlarge", weight: "plus", children: "Top Regions by Sales" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Sales breakdown by region in the selected period" }),
+                  isLoadingOrders ? /* @__PURE__ */ jsxRuntime.jsx(BarChartSkeleton, {}) : (orders == null ? void 0 : orders.regions) && ((_f = orders == null ? void 0 : orders.regions) == null ? void 0 : _f.length) > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", style: { aspectRatio: "16/9" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    BarChart,
+                    {
+                      data: orders.regions,
+                      xAxisDataKey: "name",
+                      yAxisDataKey: "sales",
+                      lineColor: "#82ca9d",
+                      useStableColors: true,
+                      colorKeyField: "name",
+                      yAxisTickFormatter: (value) => new Intl.NumberFormat("en-US", {
+                        currency: orders.currency_code,
+                        maximumFractionDigits: 0
+                      }).format(value)
+                    }
+                  ) }) : /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.Text,
+                    {
+                      size: "small",
+                      className: "text-ui-fg-muted text-center",
+                      children: "No data available for the selected period."
+                    }
+                  )
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "min-h-[9.375rem]", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xlarge", weight: "plus", children: "Order Status Breakdown" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Distribution of orders by status in the selected period" }),
+                  isLoadingOrders ? /* @__PURE__ */ jsxRuntime.jsx(PieChartSkeleton, {}) : (orders == null ? void 0 : orders.statuses) && ((_g = orders == null ? void 0 : orders.statuses) == null ? void 0 : _g.length) > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", style: { aspectRatio: "16/9" }, children: /* @__PURE__ */ jsxRuntime.jsx(PieChart, { data: orders == null ? void 0 : orders.statuses, dataKey: "count" }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.Text,
+                    {
+                      size: "small",
+                      className: "text-ui-fg-muted text-center",
+                      children: "No data available for the selected period."
+                    }
+                  )
+                ] }) })
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 flex-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "relative", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChartNoAxesCombined, { className: "absolute right-6 text-ui-fg-muted top-4 size-[15px]" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", children: "Total Sales" }),
-                isLoadingOrders ? /* @__PURE__ */ jsxRuntime.jsx(SmallCardSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xlarge", weight: "plus", children: new Intl.NumberFormat("en-US", {
-                    style: "currency",
-                    currency: (orders == null ? void 0 : orders.currency_code) || "EUR"
-                  }).format((orders == null ? void 0 : orders.total_sales) || 0) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "xsmall", className: "text-ui-fg-muted", children: [
-                    ((orders == null ? void 0 : orders.prev_sales_percent) || 0) > 0 && "+",
-                    (orders == null ? void 0 : orders.prev_sales_percent) || 0,
-                    "% from previous period"
-                  ] })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "min-h-[9.375rem]", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xlarge", weight: "plus", children: "Sales Over Time" }),
-                /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: [
-                  "Total sales in the selected period (",
-                  orders == null ? void 0 : orders.currency_code,
-                  ")"
-                ] }),
-                isLoadingOrders ? /* @__PURE__ */ jsxRuntime.jsx(LineChartSkeleton, {}) : (orders == null ? void 0 : orders.order_sales) && ((_e = orders == null ? void 0 : orders.order_sales) == null ? void 0 : _e.length) > 0 && someOrderSalesGreaterThanZero ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", style: { aspectRatio: "16/9" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  LineChart,
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs.Content, { value: "products", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "mb-4 min-h-[9.375rem]", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xlarge", weight: "plus", children: "Top-Selling Products" }),
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Products by quantity sold in selected period" }),
+                isLoadingProducts ? /* @__PURE__ */ jsxRuntime.jsx(BarChartSkeleton, {}) : (products == null ? void 0 : products.variantQuantitySold) && someTopSellingProductsGreaterThanZero ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", style: { aspectRatio: "16/9" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  BarChart,
                   {
-                    data: orders.order_sales,
-                    xAxisDataKey: "name",
-                    yAxisDataKey: "sales",
+                    data: products.variantQuantitySold,
+                    xAxisDataKey: "title",
+                    yAxisDataKey: "quantity",
                     lineColor: "#82ca9d",
-                    yAxisTickFormatter: (value) => new Intl.NumberFormat("en-US", {
-                      currency: orders.currency_code,
-                      maximumFractionDigits: 0
-                    }).format(value)
+                    useStableColors: true,
+                    colorKeyField: "title"
                   }
-                ) }) : /* @__PURE__ */ jsxRuntime.jsx(
-                  ui.Text,
-                  {
-                    size: "small",
-                    className: "text-ui-fg-muted text-center",
-                    children: "No data available for the selected period."
-                  }
-                )
+                ) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-muted text-center", children: "No data available for the selected period." })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 max-xl:flex-col", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xlarge", weight: "plus", children: "Out-of-Stock Variants" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Products with zero inventory" }),
+                  isLoadingProducts ? /* @__PURE__ */ jsxRuntime.jsx(ProductsTableSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(
+                    ProductsTable,
+                    {
+                      products: ((_h = products == null ? void 0 : products.lowStockVariants) == null ? void 0 : _h.filter(
+                        (product) => product.inventoryQuantity === 0
+                      )) || []
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xlarge", weight: "plus", children: "Low Stock Variants" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Products with inventory below threshold" }),
+                  isLoadingProducts ? /* @__PURE__ */ jsxRuntime.jsx(ProductsTableSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(
+                    ProductsTable,
+                    {
+                      products: ((_i = products == null ? void 0 : products.lowStockVariants) == null ? void 0 : _i.filter(
+                        (product) => product.inventoryQuantity > 0
+                      )) || []
+                    }
+                  )
+                ] })
               ] })
             ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-md:flex-col gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "min-h-[9.375rem]", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xlarge", weight: "plus", children: "Top Regions by Sales" }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Sales breakdown by region in the selected period" }),
-              isLoadingOrders ? /* @__PURE__ */ jsxRuntime.jsx(BarChartSkeleton, {}) : (orders == null ? void 0 : orders.regions) && ((_f = orders == null ? void 0 : orders.regions) == null ? void 0 : _f.length) > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", style: { aspectRatio: "16/9" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-                BarChart,
-                {
-                  data: orders.regions,
-                  xAxisDataKey: "name",
-                  yAxisDataKey: "sales",
-                  lineColor: "#82ca9d",
-                  useStableColors: true,
-                  colorKeyField: "name",
-                  yAxisTickFormatter: (value) => new Intl.NumberFormat("en-US", {
-                    currency: orders.currency_code,
-                    maximumFractionDigits: 0
-                  }).format(value)
-                }
-              ) }) : /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Text,
-                {
-                  size: "small",
-                  className: "text-ui-fg-muted text-center",
-                  children: "No data available for the selected period."
-                }
-              )
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "min-h-[9.375rem]", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xlarge", weight: "plus", children: "Order Status Breakdown" }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Distribution of orders by status in the selected period" }),
-              isLoadingOrders ? /* @__PURE__ */ jsxRuntime.jsx(PieChartSkeleton, {}) : (orders == null ? void 0 : orders.statuses) && ((_g = orders == null ? void 0 : orders.statuses) == null ? void 0 : _g.length) > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", style: { aspectRatio: "16/9" }, children: /* @__PURE__ */ jsxRuntime.jsx(PieChart, { data: orders == null ? void 0 : orders.statuses, dataKey: "count" }) }) : /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Text,
-                {
-                  size: "small",
-                  className: "text-ui-fg-muted text-center",
-                  children: "No data available for the selected period."
-                }
-              )
-            ] }) })
           ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs.Content, { value: "products", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "mb-4 min-h-[9.375rem]", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xlarge", weight: "plus", children: "Top-Selling Products" }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Products by quantity sold in selected period" }),
-            isLoadingProducts ? /* @__PURE__ */ jsxRuntime.jsx(BarChartSkeleton, {}) : (products == null ? void 0 : products.variantQuantitySold) && someTopSellingProductsGreaterThanZero ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", style: { aspectRatio: "16/9" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-              BarChart,
-              {
-                data: products.variantQuantitySold,
-                xAxisDataKey: "title",
-                yAxisDataKey: "quantity",
-                lineColor: "#82ca9d",
-                useStableColors: true,
-                colorKeyField: "title"
-              }
-            ) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "text-ui-fg-muted text-center", children: "No data available for the selected period." })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 max-xl:flex-col", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xlarge", weight: "plus", children: "Out-of-Stock Variants" }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Products with zero inventory" }),
-              isLoadingProducts ? /* @__PURE__ */ jsxRuntime.jsx(ProductsTableSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(
-                ProductsTable,
-                {
-                  products: ((_h = products == null ? void 0 : products.lowStockVariants) == null ? void 0 : _h.filter(
-                    (product) => product.inventoryQuantity === 0
-                  )) || []
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xlarge", weight: "plus", children: "Low Stock Variants" }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Products with inventory below threshold" }),
-              isLoadingProducts ? /* @__PURE__ */ jsxRuntime.jsx(ProductsTableSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(
-                ProductsTable,
-                {
-                  products: ((_i = products == null ? void 0 : products.lowStockVariants) == null ? void 0 : _i.filter(
-                    (product) => product.inventoryQuantity > 0
-                  )) || []
-                }
-              )
-            ] })
-          ] })
-        ] })
-      ] })
-    ] }) })
+        ]
+      }
+    ) })
   ] });
 };
 const config = adminSdk.defineRouteConfig({