@agilo/medusa-analytics-plugin 1.0.0 → 1.2.0-0

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

@@ -1,16 +1,16 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { useState, useEffect } from "react";
 import { defineRouteConfig } from "@medusajs/admin-sdk";
 import { createDataTableColumnHelper, useDataTable, DataTable, Container, Heading, Select, Tabs, Text } from "@medusajs/ui";
-import { ChartBar, Calendar, ChevronDown, ChevronLeft, ChevronRight, ShoppingCart } from "@medusajs/icons";
+import { ChartBar, Calendar, ChevronDown, ChevronLeft, ChevronRight, ShoppingCart, User } from "@medusajs/icons";
 import { ChartNoAxesCombined } from "lucide-react";
-import { format, endOfMonth, startOfMonth, subMonths } from "date-fns";
+import { format, parse, startOfMonth, endOfMonth, subMonths } from "date-fns";
 import { DateRangePicker, Group, DateInput, DateSegment, Button, Popover, Dialog, RangeCalendar, Heading as Heading$1, CalendarGrid, CalendarCell } from "react-aria-components";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { ResponsiveContainer, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Bar, LineChart as LineChart$1, Line, Cell, PieChart as PieChart$1, Pie } from "recharts";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-import { useNavigate } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 function $2b4dce13dd5a17fa$export$842a2cf37af977e1(amount, numerator) {
   return amount - numerator * Math.floor(amount / numerator);
@@ -657,68 +657,65 @@ const LineChart = ({
   const isDark = useDarkMode();
   const isSingleDataPoint = data && data.length === 1;
   if (isSingleDataPoint) {
-    return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-ui-fg-muted mb-2", children: "Single day selected - showing as bar chart for better visibility" }) }),
-      /* @__PURE__ */ jsx(ResponsiveContainer, { aspect: 16 / 9, children: /* @__PURE__ */ jsxs(BarChart$1, { data, margin: { left: 20 }, children: [
-        /* @__PURE__ */ jsx(
-          CartesianGrid,
-          {
-            strokeDasharray: "3 3",
-            stroke: isDark ? "#374151" : "#E5E7EB"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          XAxis,
-          {
-            dataKey: xAxisDataKey,
-            tick: { fill: isDark ? "#D1D5DB" : "#6B7280" },
-            axisLine: { stroke: isDark ? "#4B5563" : "#D1D5DB" },
-            tickLine: { stroke: isDark ? "#4B5563" : "#D1D5DB" },
-            tickMargin: 10
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          YAxis,
-          {
-            tickFormatter: yAxisTickFormatter,
-            allowDecimals: false,
-            tick: { fill: isDark ? "#D1D5DB" : "#6B7280" },
-            axisLine: { stroke: isDark ? "#4B5563" : "#D1D5DB" },
-            tickLine: { stroke: isDark ? "#4B5563" : "#D1D5DB" }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          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__ */ jsx(
-          Bar,
-          {
-            dataKey: yAxisDataKey,
-            fill: lineColor,
-            radius: [4, 4, 0, 0],
-            maxBarSize: 60
+    return /* @__PURE__ */ jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsx(ResponsiveContainer, { aspect: 16 / 9, children: /* @__PURE__ */ jsxs(BarChart$1, { data, margin: { left: 20 }, children: [
+      /* @__PURE__ */ jsx(
+        CartesianGrid,
+        {
+          strokeDasharray: "3 3",
+          stroke: isDark ? "#374151" : "#E5E7EB"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          dataKey: xAxisDataKey,
+          tick: { fill: isDark ? "#D1D5DB" : "#6B7280" },
+          axisLine: { stroke: isDark ? "#4B5563" : "#D1D5DB" },
+          tickLine: { stroke: isDark ? "#4B5563" : "#D1D5DB" },
+          tickMargin: 10
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          tickFormatter: yAxisTickFormatter,
+          allowDecimals: false,
+          tick: { fill: isDark ? "#D1D5DB" : "#6B7280" },
+          axisLine: { stroke: isDark ? "#4B5563" : "#D1D5DB" },
+          tickLine: { stroke: isDark ? "#4B5563" : "#D1D5DB" }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        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__ */ jsx(
+        Bar,
+        {
+          dataKey: yAxisDataKey,
+          fill: lineColor,
+          radius: [4, 4, 0, 0],
+          maxBarSize: 60
+        }
+      )
+    ] }) }) });
   }
   return /* @__PURE__ */ jsx(ResponsiveContainer, { aspect: 16 / 9, children: /* @__PURE__ */ jsxs(LineChart$1, { data, margin: { left: 20 }, children: [
     /* @__PURE__ */ jsx(
@@ -957,23 +954,23 @@ const PieChart = ({ data, dataKey }) => {
     )
   ] }) });
 };
-const columnHelper$1 = createDataTableColumnHelper();
-const columns$1 = [
-  columnHelper$1.accessor("sku", {
+const columnHelper$3 = createDataTableColumnHelper();
+const columns$2 = [
+  columnHelper$3.accessor("sku", {
     header: "SKU",
     enableSorting: true,
     sortLabel: "SKU",
     sortAscLabel: "A-Z",
     sortDescLabel: "Z-A"
   }),
-  columnHelper$1.accessor("variantName", {
+  columnHelper$3.accessor("variantName", {
     header: "Variant Name",
     enableSorting: true,
     sortLabel: "Variant Name",
     sortAscLabel: "A-Z",
     sortDescLabel: "Z-A"
   }),
-  columnHelper$1.accessor("inventoryQuantity", {
+  columnHelper$3.accessor("inventoryQuantity", {
     header: "Inventory",
     enableSorting: true,
     sortLabel: "Inventory",
@@ -985,10 +982,10 @@ const columns$1 = [
     }
   })
 ];
-const PAGE_SIZE = 10;
+const PAGE_SIZE$1 = 10;
 const ProductsTable = ({ products }) => {
   const [pagination, setPagination] = React.useState({
-    pageSize: PAGE_SIZE,
+    pageSize: PAGE_SIZE$1,
     pageIndex: 0
   });
   const [search, setSearch] = React.useState("");
@@ -1019,7 +1016,7 @@ const ProductsTable = ({ products }) => {
     );
   }, [products, search, sorting, pagination]);
   const table = useDataTable({
-    columns: columns$1,
+    columns: columns$2,
     data: shownProducts,
     getRowId: (product) => product.sku,
     rowCount: products.length,
@@ -1054,10 +1051,10 @@ const ProductsTable = ({ products }) => {
         }
       }
     ),
-    products.length > PAGE_SIZE && /* @__PURE__ */ jsx(DataTable.Pagination, {})
+    products.length > PAGE_SIZE$1 && /* @__PURE__ */ jsx(DataTable.Pagination, {})
   ] });
 };
-const BACKEND_URL$1 = window.location.origin;
+const BACKEND_URL$2 = __BACKEND_URL__ === "/" ? "" : __BACKEND_URL__;
 async function retrieveProductAnalytics(date) {
   if (!date || !date.from || !(date == null ? void 0 : date.to)) {
     return void 0;
@@ -1065,7 +1062,7 @@ async function retrieveProductAnalytics(date) {
   const dateFrom = format(date.from, "yyyy-MM-dd");
   const dateTo = format(date.to, "yyyy-MM-dd");
   const data = await fetch(
-    `${BACKEND_URL$1}/admin/agilo-analytics/products?date_from=${dateFrom}&date_to=${dateTo}`
+    `${BACKEND_URL$2}/admin/agilo-analytics/products?date_from=${dateFrom}&date_to=${dateTo}`
   );
   const productAnalytics = await data.json();
   return productAnalytics;
@@ -1080,11 +1077,11 @@ const useProductAnalytics = (query, options) => {
     ...options
   });
 };
-const BACKEND_URL = window.location.origin;
+const BACKEND_URL$1 = __BACKEND_URL__ === "/" ? "" : __BACKEND_URL__;
 async function retrieveOrderAnalytics(preset, date) {
   if (!date || !date.from || !(date == null ? void 0 : date.to)) {
     const data2 = await fetch(
-      `${BACKEND_URL}/admin/agilo-analytics/orders?preset=${preset}`
+      `${BACKEND_URL$1}/admin/agilo-analytics/orders?preset=${preset}`
     );
     const orderAnalytics2 = await data2.json();
     return orderAnalytics2;
@@ -1092,7 +1089,7 @@ async function retrieveOrderAnalytics(preset, date) {
   const dateFrom = format(date.from, "yyyy-MM-dd");
   const dateTo = format(date.to, "yyyy-MM-dd");
   const data = await fetch(
-    `${BACKEND_URL}/admin/agilo-analytics/orders?date_from=${dateFrom}&date_to=${dateTo}&preset=${preset}`
+    `${BACKEND_URL$1}/admin/agilo-analytics/orders?date_from=${dateFrom}&date_to=${dateTo}&preset=${preset}`
   );
   const orderAnalytics = await data.json();
   return orderAnalytics;
@@ -1133,7 +1130,7 @@ const BarChartSkeleton = () => {
 const PieChartSkeleton = () => {
   return /* @__PURE__ */ jsx("div", { className: "w-full aspect-square max-h-[400px]", children: /* @__PURE__ */ jsx(Skeleton, { className: "w-full h-full" }) });
 };
-const dummyData = [
+const dummyData$1 = [
   {
     a: "a",
     b: "b",
@@ -1165,27 +1162,209 @@ const dummyData = [
     c: 0
   }
 ];
-const columnHelper = createDataTableColumnHelper();
-const columns = [
-  columnHelper.accessor("a", {
+const columnHelper$2 = createDataTableColumnHelper();
+const columns$1 = [
+  columnHelper$2.accessor("a", {
     header: () => null,
     cell: () => /* @__PURE__ */ jsx(Skeleton, { className: "w-full h-5" })
   }),
-  columnHelper.accessor("b", {
+  columnHelper$2.accessor("b", {
     header: () => null,
     cell: () => /* @__PURE__ */ jsx(Skeleton, { className: "w-full h-5" })
   }),
-  columnHelper.accessor("c", {
+  columnHelper$2.accessor("c", {
     header: () => null,
     cell: () => /* @__PURE__ */ jsx(Skeleton, { className: "w-full h-5" })
   })
 ];
 const ProductsTableSkeleton = () => {
+  const [search, setSearch] = React.useState("");
+  const table = useDataTable({
+    columns: columns$1,
+    data: dummyData$1,
+    getRowId: (product) => product.a,
+    rowCount: dummyData$1.length,
+    search: {
+      state: search,
+      onSearchChange: setSearch
+    }
+  });
+  return /* @__PURE__ */ jsxs(DataTable, { instance: table, children: [
+    /* @__PURE__ */ jsx(DataTable.Toolbar, { className: "px-0 pt-0", children: /* @__PURE__ */ jsx(DataTable.Search, { placeholder: "Search..." }) }),
+    /* @__PURE__ */ jsx(DataTable.Table, {})
+  ] });
+};
+const BACKEND_URL = __BACKEND_URL__ === "/" ? "" : __BACKEND_URL__;
+async function retrieveCustomersAnalytics(date) {
+  if (!date || !date.from || !(date == null ? void 0 : date.to)) {
+    return void 0;
+  }
+  const dateFrom = format(date.from, "yyyy-MM-dd");
+  const dateTo = format(date.to, "yyyy-MM-dd");
+  const data = await fetch(
+    `${BACKEND_URL}/admin/agilo-analytics/customers?date_from=${dateFrom}&date_to=${dateTo}`
+  );
+  const customersAnalytics = await data.json();
+  return customersAnalytics;
+}
+const useCustomerAnalytics = (query, options) => {
+  return useQuery({
+    queryKey: ["customer-analytics", query == null ? void 0 : query.from, query == null ? void 0 : query.to],
+    queryFn: async () => {
+      const data = await retrieveCustomersAnalytics(query);
+      return data;
+    },
+    ...options
+  });
+};
+const StackedBarChart = ({
+  data,
+  xAxisDataKey,
+  yAxisTickFormatter,
+  useStableColors = false,
+  colorKeyField,
+  dataKeys
+}) => {
+  const isDark = useDarkMode();
+  const colors = React__default.useMemo(() => {
+    if (!useStableColors || !data || !colorKeyField) {
+      return [];
+    }
+    return generateColorsForData(data, colorKeyField, 70, isDark ? 60 : 50);
+  }, [data, useStableColors, colorKeyField, isDark]);
+  return /* @__PURE__ */ jsx(ResponsiveContainer, { aspect: 16 / 9, children: /* @__PURE__ */ jsxs(BarChart$1, { data, margin: { left: 20 }, children: [
+    /* @__PURE__ */ jsx(
+      CartesianGrid,
+      {
+        strokeDasharray: "3 3",
+        stroke: isDark ? "#374151" : "#E5E7EB"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        dataKey: String(xAxisDataKey),
+        tick: { fill: isDark ? "#D1D5DB" : "#6B7280" },
+        axisLine: { stroke: isDark ? "#4B5563" : "#D1D5DB" },
+        tickLine: { stroke: isDark ? "#4B5563" : "#D1D5DB" },
+        tickMargin: 10
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        tickFormatter: yAxisTickFormatter,
+        allowDecimals: false,
+        tick: { fill: isDark ? "#D1D5DB" : "#6B7280" },
+        axisLine: { stroke: isDark ? "#4B5563" : "#D1D5DB" },
+        tickLine: { stroke: isDark ? "#4B5563" : "#D1D5DB" }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      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"
+        }
+      }
+    ),
+    dataKeys == null ? void 0 : dataKeys.map((key, index) => /* @__PURE__ */ jsx(
+      Bar,
+      {
+        dataKey: String(key),
+        stackId: "a",
+        fill: useStableColors && colors.length > 0 ? colors[index] : "#3B82F6"
+      },
+      String(key)
+    ))
+  ] }) });
+};
+const dummyData = [
+  {
+    a: "a",
+    b: "b",
+    c: 0,
+    d: 0,
+    e: /* @__PURE__ */ new Date()
+  },
+  {
+    a: "a",
+    b: "b",
+    c: 0,
+    d: 0,
+    e: /* @__PURE__ */ new Date()
+  },
+  {
+    a: "a",
+    b: "b",
+    c: 0,
+    d: 0,
+    e: /* @__PURE__ */ new Date()
+  },
+  {
+    a: "a",
+    b: "b",
+    c: 0,
+    d: 0,
+    e: /* @__PURE__ */ new Date()
+  },
+  {
+    a: "a",
+    b: "b",
+    c: 0,
+    d: 0,
+    e: /* @__PURE__ */ new Date()
+  },
+  {
+    a: "a",
+    b: "b",
+    c: 0,
+    d: 0,
+    e: /* @__PURE__ */ new Date()
+  }
+];
+const columnHelper$1 = createDataTableColumnHelper();
+const columns = [
+  columnHelper$1.accessor("a", {
+    header: () => null,
+    cell: () => /* @__PURE__ */ jsx(Skeleton, { className: "w-full h-5" })
+  }),
+  columnHelper$1.accessor("b", {
+    header: () => null,
+    cell: () => /* @__PURE__ */ jsx(Skeleton, { className: "w-full h-5" })
+  }),
+  columnHelper$1.accessor("c", {
+    header: () => null,
+    cell: () => /* @__PURE__ */ jsx(Skeleton, { className: "w-full h-5" })
+  }),
+  columnHelper$1.accessor("d", {
+    header: () => null,
+    cell: () => /* @__PURE__ */ jsx(Skeleton, { className: "w-full h-5" })
+  }),
+  columnHelper$1.accessor("e", {
+    header: () => null,
+    cell: () => /* @__PURE__ */ jsx(Skeleton, { className: "w-full h-5" })
+  })
+];
+const CustomersTableSkeleton = () => {
   const [search, setSearch] = React.useState("");
   const table = useDataTable({
     columns,
     data: dummyData,
-    getRowId: (product) => product.a,
+    getRowId: (customer) => customer.a,
     rowCount: dummyData.length,
     search: {
       state: search,
@@ -1197,6 +1376,140 @@ const ProductsTableSkeleton = () => {
     /* @__PURE__ */ jsx(DataTable.Table, {})
   ] });
 };
+const columnHelper = createDataTableColumnHelper();
+const PAGE_SIZE = 10;
+const CustomersTable = ({
+  customers,
+  currencyCode
+}) => {
+  const [pagination, setPagination] = React.useState({
+    pageSize: PAGE_SIZE,
+    pageIndex: 0
+  });
+  const [search, setSearch] = React.useState("");
+  const [sorting, setSorting] = React.useState(
+    null
+  );
+  const navigate = useNavigate();
+  const shownCustomers = React.useMemo(() => {
+    let filtered = customers.filter(
+      (customer) => customer.name.toLowerCase().includes(search.toLowerCase()) || customer.email.toLowerCase().includes(search.toLowerCase())
+    );
+    if (sorting && sorting.id) {
+      filtered = filtered.slice().sort((a, b) => {
+        const aVal = a[sorting.id];
+        const bVal = b[sorting.id];
+        if (aVal < bVal) {
+          return sorting.desc ? 1 : -1;
+        }
+        if (aVal > bVal) {
+          return sorting.desc ? -1 : 1;
+        }
+        return 0;
+      });
+    }
+    return filtered.slice(
+      pagination.pageIndex * pagination.pageSize,
+      (pagination.pageIndex + 1) * pagination.pageSize
+    );
+  }, [customers, search, sorting, pagination]);
+  const columns2 = React.useMemo(
+    () => [
+      columnHelper.accessor("name", {
+        header: "Name",
+        enableSorting: true,
+        sortLabel: "Name",
+        sortAscLabel: "A-Z",
+        sortDescLabel: "Z-A"
+      }),
+      columnHelper.accessor("email", {
+        header: "Email",
+        enableSorting: true,
+        sortLabel: "Email",
+        sortAscLabel: "A-Z",
+        sortDescLabel: "Z-A"
+      }),
+      columnHelper.accessor("order_count", {
+        header: "Order Count",
+        enableSorting: true,
+        sortLabel: "Order Count",
+        sortAscLabel: "Low to High",
+        sortDescLabel: "High to Low"
+      }),
+      columnHelper.accessor("sales", {
+        header: "Total Sales",
+        enableSorting: true,
+        sortLabel: "Total Sales",
+        sortAscLabel: "Low to High",
+        sortDescLabel: "High to Low",
+        cell: ({ getValue }) => {
+          const sales = getValue();
+          return /* @__PURE__ */ jsx("p", { children: new Intl.NumberFormat("en-US", {
+            style: "currency",
+            currency: currencyCode || "EUR"
+          }).format(sales || 0) });
+        }
+      }),
+      columnHelper.accessor("groups", {
+        header: "Groups",
+        cell: ({ getValue }) => {
+          const groups = getValue();
+          return /* @__PURE__ */ jsx("p", { children: groups.length ? groups.join(", ") : "No Group" });
+        }
+      }),
+      columnHelper.accessor("last_order", {
+        header: "Last Order",
+        enableSorting: true,
+        sortLabel: "Last Order",
+        sortAscLabel: "Oldest to Newest",
+        sortDescLabel: "Newest to Oldest",
+        cell: ({ getValue }) => {
+          const date = getValue();
+          return /* @__PURE__ */ jsx("p", { children: date ? format(new Date(date), "MMM dd, yyyy") : "No orders yet" });
+        }
+      })
+    ],
+    [currencyCode]
+  );
+  const table = useDataTable({
+    columns: columns2,
+    data: shownCustomers,
+    getRowId: (customer) => customer.customer_id,
+    rowCount: customers.length,
+    search: {
+      state: search,
+      onSearchChange: setSearch
+    },
+    pagination: {
+      state: pagination,
+      onPaginationChange: setPagination
+    },
+    sorting: {
+      state: sorting,
+      onSortingChange: setSorting
+    },
+    onRowClick: (_, row) => {
+      navigate(`/customers/${row.original.customer_id}`);
+    }
+  });
+  return /* @__PURE__ */ jsxs(DataTable, { instance: table, children: [
+    /* @__PURE__ */ jsx(DataTable.Toolbar, { className: "px-0 pt-0", children: /* @__PURE__ */ jsx(DataTable.Search, { placeholder: "Search..." }) }),
+    /* @__PURE__ */ jsx(
+      DataTable.Table,
+      {
+        emptyState: {
+          filtered: {
+            heading: "No customers found"
+          },
+          empty: {
+            heading: "No customers available"
+          }
+        }
+      }
+    ),
+    customers.length > PAGE_SIZE && /* @__PURE__ */ jsx(DataTable.Pagination, {})
+  ] });
+};
 function dateToCalendarDate(date) {
   return new $35ea8db9cb2ccb90$export$99faa760c7908e4f(
     date.getFullYear(),
@@ -1224,16 +1537,40 @@ 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: startOfMonth(today), to: today };
+  if (preset === "last-month")
+    return {
+      from: startOfMonth(subMonths(today, 1)),
+      to: endOfMonth(subMonths(today, 1))
+    };
+  return {
+    from: startOfMonth(subMonths(today, 3)),
+    to: endOfMonth(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.useState({
-    from: startOfMonth(/* @__PURE__ */ new Date()),
-    to: endOfMonth(/* @__PURE__ */ new Date())
-  });
-  const [selectValue, setSelectValue] = React.useState("this-month");
+  const [searchParams, setSearchParams] = useSearchParams();
+  const rangeParam = searchParams.get("range") || "this-month";
+  const date = React.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 = parse(dates[1], "yyyy-MM-dd", /* @__PURE__ */ new Date());
+      const to = 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: customers, isLoading: isLoadingCustomers } = useCustomerAnalytics(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(
@@ -1243,45 +1580,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.useCallback((preset) => {
-    const today = /* @__PURE__ */ new Date();
-    switch (preset) {
-      case "this-month":
-        setDate({
-          from: startOfMonth(today),
-          to: today
-        });
-        setSelectValue("this-month");
-        break;
-      case "last-month":
-        setDate({
-          from: startOfMonth(subMonths(today, 1)),
-          to: endOfMonth(subMonths(today, 1))
-        });
-        setSelectValue("last-month");
-        break;
-      case "last-3-months":
-        setDate({
-          from: startOfMonth(subMonths(today, 3)),
-          to: endOfMonth(subMonths(today, 1))
-        });
-        setSelectValue("last-3-months");
-        break;
-      case "custom":
-      default:
-        setSelectValue("custom");
-        break;
-    }
-  }, []);
+  const updateDatePreset = React.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",
+              `${format(currentDate.from || /* @__PURE__ */ new Date(), "yyyy-MM-dd")}-${format(
+                currentDate.to || /* @__PURE__ */ new Date(),
+                "yyyy-MM-dd"
+              )}`
+            );
+          }
+          break;
+      }
+      setSearchParams(params);
+    },
+    [searchParams, rangeParam, setSearchParams]
+  );
+  const updateUrlParams = React.useCallback(
+    (value) => {
+      const params = new URLSearchParams(searchParams.toString());
+      if ((value == null ? void 0 : value.from) && (value == null ? void 0 : value.to)) {
+        params.set(
+          "range",
+          `${format(value.from, "yyyy-MM-dd")}-${format(
+            value.to,
+            "yyyy-MM-dd"
+          )}`
+        );
+      }
+      setSearchParams(params);
+    },
+    [searchParams, setSearchParams]
+  );
   const handleDateRangeChange = React.useCallback(
     (value) => {
       const newDateRange = rangeValueToDateRange(value);
-      setDate(newDateRange);
-      if (selectValue !== "custom") {
-        setSelectValue("custom");
-      }
+      updateUrlParams(newDateRange);
     },
-    []
+    [updateUrlParams]
   );
   return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-2 gap-y-4 items-center justify-between px-6 py-4", children: [
@@ -1292,7 +1643,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__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.Value, {}) }),
@@ -1388,193 +1741,306 @@ const AnalyticsPage = () => {
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "orders", children: [
-      /* @__PURE__ */ jsxs(Tabs.List, { children: [
-        /* @__PURE__ */ jsx(
-          Tabs.Trigger,
-          {
-            value: "orders",
-            disabled: isLoadingOrders || isLoadingProducts,
-            children: "Orders"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Tabs.Trigger,
-          {
-            value: "products",
-            disabled: isLoadingOrders || isLoadingProducts,
-            children: "Products"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-8", children: [
-        /* @__PURE__ */ jsxs(Tabs.Content, { value: "orders", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex max-md:flex-col gap-4 mb-4", children: [
-            /* @__PURE__ */ jsxs("div", { className: "space-y-4 flex-1", children: [
-              /* @__PURE__ */ jsxs(Container, { className: "relative", children: [
-                /* @__PURE__ */ jsx(ShoppingCart, { className: "absolute right-6 top-4 text-ui-fg-muted" }),
-                /* @__PURE__ */ jsx(Text, { size: "small", children: "Total Orders" }),
-                isLoadingOrders ? /* @__PURE__ */ jsx(SmallCardSkeleton, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", children: (orders == null ? void 0 : orders.total_orders) || 0 }),
-                  /* @__PURE__ */ jsxs(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__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxs(
+      Tabs,
+      {
+        value: searchParams.get("tab") || "orders",
+        onValueChange: (value) => {
+          const params = new URLSearchParams(searchParams.toString());
+          params.set("tab", value);
+          setSearchParams(params);
+        },
+        children: [
+          /* @__PURE__ */ jsxs(Tabs.List, { children: [
+            /* @__PURE__ */ jsx(
+              Tabs.Trigger,
+              {
+                value: "orders",
+                disabled: isLoadingOrders || isLoadingProducts,
+                children: "Orders"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Tabs.Trigger,
+              {
+                value: "products",
+                disabled: isLoadingOrders || isLoadingProducts,
+                children: "Products"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Tabs.Trigger,
+              {
+                value: "customers",
+                disabled: isLoadingOrders || isLoadingProducts,
+                children: "Customers"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-8", children: [
+            /* @__PURE__ */ jsxs(Tabs.Content, { value: "orders", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex max-md:flex-col gap-4 mb-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "space-y-4 flex-1", children: [
+                  /* @__PURE__ */ jsxs(Container, { className: "relative", children: [
+                    /* @__PURE__ */ jsx(ShoppingCart, { className: "absolute right-6 top-4 text-ui-fg-muted" }),
+                    /* @__PURE__ */ jsx(Text, { size: "small", children: "Total Orders" }),
+                    isLoadingOrders ? /* @__PURE__ */ jsx(SmallCardSkeleton, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", children: (orders == null ? void 0 : orders.total_orders) || 0 }),
+                      /* @__PURE__ */ jsxs(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__ */ jsxs(Container, { className: "min-h-[9.375rem]", children: [
+                    /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", children: "Orders Over Time" }),
+                    /* @__PURE__ */ jsx(Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Total number of orders in the selected period" }),
+                    isLoadingOrders ? /* @__PURE__ */ 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__ */ jsx("div", { className: "w-full", style: { aspectRatio: "16/9" }, children: /* @__PURE__ */ jsx(
+                      LineChart,
+                      {
+                        data: orders == null ? void 0 : orders.order_count,
+                        xAxisDataKey: "name",
+                        yAxisDataKey: "count"
+                      }
+                    ) }) : /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        size: "small",
+                        className: "text-ui-fg-muted text-center",
+                        children: "No data available for the selected period."
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-4 flex-1", children: [
+                  /* @__PURE__ */ jsxs(Container, { className: "relative", children: [
+                    /* @__PURE__ */ jsx(ChartNoAxesCombined, { className: "absolute right-6 text-ui-fg-muted top-4 size-[15px]" }),
+                    /* @__PURE__ */ jsx(Text, { size: "small", children: "Total Sales" }),
+                    isLoadingOrders ? /* @__PURE__ */ jsx(SmallCardSkeleton, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(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__ */ jsxs(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__ */ jsxs(Container, { className: "min-h-[9.375rem]", children: [
+                    /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", children: "Sales Over Time" }),
+                    /* @__PURE__ */ jsxs(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__ */ 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__ */ jsx("div", { className: "w-full", style: { aspectRatio: "16/9" }, children: /* @__PURE__ */ 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__ */ jsx(
+                      Text,
+                      {
+                        size: "small",
+                        className: "text-ui-fg-muted text-center",
+                        children: "No data available for the selected period."
+                      }
+                    )
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs(Container, { className: "min-h-[9.375rem]", children: [
-                /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", children: "Orders Over Time" }),
-                /* @__PURE__ */ jsx(Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Total number of orders in the selected period" }),
-                isLoadingOrders ? /* @__PURE__ */ 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__ */ jsx("div", { className: "w-full", style: { aspectRatio: "16/9" }, children: /* @__PURE__ */ jsx(
-                  LineChart,
-                  {
-                    data: orders == null ? void 0 : orders.order_count,
-                    xAxisDataKey: "name",
-                    yAxisDataKey: "count"
-                  }
-                ) }) : /* @__PURE__ */ jsx(
-                  Text,
+              /* @__PURE__ */ jsxs("div", { className: "flex max-md:flex-col gap-4", children: [
+                /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxs(Container, { className: "min-h-[9.375rem]", children: [
+                  /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", children: "Top Regions by Sales" }),
+                  /* @__PURE__ */ jsx(Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Sales breakdown by region in the selected period" }),
+                  isLoadingOrders ? /* @__PURE__ */ jsx(BarChartSkeleton, {}) : (orders == null ? void 0 : orders.regions) && ((_f = orders == null ? void 0 : orders.regions) == null ? void 0 : _f.length) > 0 ? /* @__PURE__ */ jsx("div", { className: "w-full", style: { aspectRatio: "16/9" }, children: /* @__PURE__ */ 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__ */ jsx(
+                    Text,
+                    {
+                      size: "small",
+                      className: "text-ui-fg-muted text-center",
+                      children: "No data available for the selected period."
+                    }
+                  )
+                ] }) }),
+                /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxs(Container, { className: "min-h-[9.375rem]", children: [
+                  /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", children: "Order Status Breakdown" }),
+                  /* @__PURE__ */ jsx(Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Distribution of orders by status in the selected period" }),
+                  isLoadingOrders ? /* @__PURE__ */ jsx(PieChartSkeleton, {}) : (orders == null ? void 0 : orders.statuses) && ((_g = orders == null ? void 0 : orders.statuses) == null ? void 0 : _g.length) > 0 ? /* @__PURE__ */ jsx("div", { className: "w-full", style: { aspectRatio: "16/9" }, children: /* @__PURE__ */ jsx(PieChart, { data: orders == null ? void 0 : orders.statuses, dataKey: "count" }) }) : /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      size: "small",
+                      className: "text-ui-fg-muted text-center",
+                      children: "No data available for the selected period."
+                    }
+                  )
+                ] }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(Tabs.Content, { value: "products", children: [
+              /* @__PURE__ */ jsxs(Container, { className: "mb-4 min-h-[9.375rem]", children: [
+                /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", children: "Top-Selling Products" }),
+                /* @__PURE__ */ jsx(Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Products by quantity sold in selected period" }),
+                isLoadingProducts ? /* @__PURE__ */ jsx(BarChartSkeleton, {}) : (products == null ? void 0 : products.variantQuantitySold) && someTopSellingProductsGreaterThanZero ? /* @__PURE__ */ jsx("div", { className: "w-full", style: { aspectRatio: "16/9" }, children: /* @__PURE__ */ jsx(
+                  BarChart,
                   {
-                    size: "small",
-                    className: "text-ui-fg-muted text-center",
-                    children: "No data available for the selected period."
+                    data: products.variantQuantitySold,
+                    xAxisDataKey: "title",
+                    yAxisDataKey: "quantity",
+                    lineColor: "#82ca9d",
+                    useStableColors: true,
+                    colorKeyField: "title"
                   }
-                )
+                ) }) : /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-muted text-center", children: "No data available for the selected period." })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-4 max-xl:flex-col", children: [
+                /* @__PURE__ */ jsxs(Container, { children: [
+                  /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", children: "Out-of-Stock Variants" }),
+                  /* @__PURE__ */ jsx(Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Products with zero inventory" }),
+                  isLoadingProducts ? /* @__PURE__ */ jsx(ProductsTableSkeleton, {}) : /* @__PURE__ */ jsx(
+                    ProductsTable,
+                    {
+                      products: ((_h = products == null ? void 0 : products.lowStockVariants) == null ? void 0 : _h.filter(
+                        (product) => product.inventoryQuantity === 0
+                      )) || []
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Container, { children: [
+                  /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", children: "Low Stock Variants" }),
+                  /* @__PURE__ */ jsx(Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Products with inventory below threshold" }),
+                  isLoadingProducts ? /* @__PURE__ */ jsx(ProductsTableSkeleton, {}) : /* @__PURE__ */ jsx(
+                    ProductsTable,
+                    {
+                      products: ((_i = products == null ? void 0 : products.lowStockVariants) == null ? void 0 : _i.filter(
+                        (product) => product.inventoryQuantity > 0
+                      )) || []
+                    }
+                  )
+                ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-4 flex-1", children: [
-              /* @__PURE__ */ jsxs(Container, { className: "relative", children: [
-                /* @__PURE__ */ jsx(ChartNoAxesCombined, { className: "absolute right-6 text-ui-fg-muted top-4 size-[15px]" }),
-                /* @__PURE__ */ jsx(Text, { size: "small", children: "Total Sales" }),
-                isLoadingOrders ? /* @__PURE__ */ jsx(SmallCardSkeleton, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(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__ */ jsxs(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__ */ jsxs(Tabs.Content, { value: "customers", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex max-md:flex-col gap-4 mb-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "space-y-4 flex-1", children: [
+                  /* @__PURE__ */ jsxs(Container, { className: "relative", children: [
+                    /* @__PURE__ */ jsx(User, { className: "absolute right-6 top-4 text-ui-fg-muted" }),
+                    /* @__PURE__ */ jsx(Text, { size: "small", children: "Total Customers" }),
+                    isLoadingCustomers ? /* @__PURE__ */ jsx(SmallCardSkeleton, {}) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", children: (customers == null ? void 0 : customers.total_customers) || 0 }) })
+                  ] }),
+                  /* @__PURE__ */ jsxs(Container, { className: "relative", children: [
+                    /* @__PURE__ */ jsx(User, { className: "absolute right-6 top-4 text-ui-fg-muted" }),
+                    /* @__PURE__ */ jsx(Text, { size: "small", children: "New Customers" }),
+                    isLoadingCustomers ? /* @__PURE__ */ jsx(SmallCardSkeleton, {}) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", children: (customers == null ? void 0 : customers.new_customers) || 0 }) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-4 flex-1", children: [
+                  /* @__PURE__ */ jsxs(Container, { className: "relative", children: [
+                    /* @__PURE__ */ jsx(User, { className: "absolute right-6 text-ui-fg-muted top-4 size-[15px]" }),
+                    /* @__PURE__ */ jsx(Text, { size: "small", children: "Returning Customers" }),
+                    isLoadingCustomers ? /* @__PURE__ */ jsx(SmallCardSkeleton, {}) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", children: (customers == null ? void 0 : customers.returning_customers) || 0 }) })
+                  ] }),
+                  /* @__PURE__ */ jsxs(Container, { className: "relative", children: [
+                    /* @__PURE__ */ jsx(ChartNoAxesCombined, { className: "absolute right-6 top-4 text-ui-fg-muted" }),
+                    /* @__PURE__ */ jsx(Text, { size: "small", children: "Average Sales per Customer" }),
+                    isLoadingCustomers || isLoadingOrders ? /* @__PURE__ */ jsx(SmallCardSkeleton, {}) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", children: new Intl.NumberFormat("en-US", {
+                      currency: (customers == null ? void 0 : customers.currency_code) || "EUR",
+                      style: "currency"
+                    }).format(
+                      ((orders == null ? void 0 : orders.total_sales) || 0) / ((customers == null ? void 0 : customers.total_customers) || 0)
+                    ) }) })
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs(Container, { className: "min-h-[9.375rem]", children: [
-                /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", children: "Sales Over Time" }),
-                /* @__PURE__ */ jsxs(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__ */ 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__ */ jsx("div", { className: "w-full", style: { aspectRatio: "16/9" }, children: /* @__PURE__ */ 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__ */ jsx(
-                  Text,
+              /* @__PURE__ */ jsxs("div", { className: "flex max-md:flex-col gap-4 mb-4", children: [
+                /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxs(Container, { className: "min-h-[9.375rem]", children: [
+                  /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", children: "New vs. Returning Customers" }),
+                  /* @__PURE__ */ jsx(Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Distribution of new and returning customers in the selected period" }),
+                  isLoadingCustomers ? /* @__PURE__ */ jsx(BarChartSkeleton, {}) : (customers == null ? void 0 : customers.customer_count) && customers.customer_count.length > 0 ? /* @__PURE__ */ jsx("div", { className: "w-full", style: { aspectRatio: "16/9" }, children: /* @__PURE__ */ jsx(
+                    StackedBarChart,
+                    {
+                      data: customers.customer_count,
+                      xAxisDataKey: "name",
+                      lineColor: "#82ca9d",
+                      useStableColors: true,
+                      colorKeyField: "returning_customers",
+                      dataKeys: ["new_customers", "returning_customers"]
+                    }
+                  ) }) : /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      size: "small",
+                      className: "text-ui-fg-muted text-center",
+                      children: "No data available for the selected period."
+                    }
+                  )
+                ] }) }),
+                /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxs(Container, { className: "min-h-[9.375rem]", children: [
+                  /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", children: "Top Customer Groups by Sales" }),
+                  /* @__PURE__ */ jsx(Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Sales breakdown by customer group in the selected period" }),
+                  isLoadingCustomers ? /* @__PURE__ */ jsx(BarChartSkeleton, {}) : (customers == null ? void 0 : customers.customer_group) && customers.customer_group.length > 0 ? /* @__PURE__ */ jsx("div", { className: "w-full", style: { aspectRatio: "16/9" }, children: /* @__PURE__ */ jsx(
+                    BarChart,
+                    {
+                      data: customers.customer_group,
+                      xAxisDataKey: "name",
+                      lineColor: "#82ca9d",
+                      useStableColors: true,
+                      colorKeyField: "name",
+                      yAxisDataKey: "total",
+                      yAxisTickFormatter: (value) => new Intl.NumberFormat("en-US", {
+                        currency: customers.currency_code || "EUR",
+                        maximumFractionDigits: 0
+                      }).format(value)
+                    }
+                  ) }) : /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      size: "small",
+                      className: "text-ui-fg-muted text-center",
+                      children: "No data available for the selected period."
+                    }
+                  )
+                ] }) })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex gap-4 max-xl:flex-col", children: /* @__PURE__ */ jsxs(Container, { children: [
+                /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", children: "Top Customers by Sales" }),
+                /* @__PURE__ */ jsx(Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Customers by sales in the selected period" }),
+                isLoadingCustomers ? /* @__PURE__ */ jsx(CustomersTableSkeleton, {}) : /* @__PURE__ */ jsx(
+                  CustomersTable,
                   {
-                    size: "small",
-                    className: "text-ui-fg-muted text-center",
-                    children: "No data available for the selected period."
+                    customers: (customers == null ? void 0 : customers.customer_sales) || [],
+                    currencyCode: (customers == null ? void 0 : customers.currency_code) || "EUR"
                   }
                 )
-              ] })
+              ] }) })
             ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex max-md:flex-col gap-4", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxs(Container, { className: "min-h-[9.375rem]", children: [
-              /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", children: "Top Regions by Sales" }),
-              /* @__PURE__ */ jsx(Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Sales breakdown by region in the selected period" }),
-              isLoadingOrders ? /* @__PURE__ */ jsx(BarChartSkeleton, {}) : (orders == null ? void 0 : orders.regions) && ((_f = orders == null ? void 0 : orders.regions) == null ? void 0 : _f.length) > 0 ? /* @__PURE__ */ jsx("div", { className: "w-full", style: { aspectRatio: "16/9" }, children: /* @__PURE__ */ 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__ */ jsx(
-                Text,
-                {
-                  size: "small",
-                  className: "text-ui-fg-muted text-center",
-                  children: "No data available for the selected period."
-                }
-              )
-            ] }) }),
-            /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxs(Container, { className: "min-h-[9.375rem]", children: [
-              /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", children: "Order Status Breakdown" }),
-              /* @__PURE__ */ jsx(Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Distribution of orders by status in the selected period" }),
-              isLoadingOrders ? /* @__PURE__ */ jsx(PieChartSkeleton, {}) : (orders == null ? void 0 : orders.statuses) && ((_g = orders == null ? void 0 : orders.statuses) == null ? void 0 : _g.length) > 0 ? /* @__PURE__ */ jsx("div", { className: "w-full", style: { aspectRatio: "16/9" }, children: /* @__PURE__ */ jsx(PieChart, { data: orders == null ? void 0 : orders.statuses, dataKey: "count" }) }) : /* @__PURE__ */ jsx(
-                Text,
-                {
-                  size: "small",
-                  className: "text-ui-fg-muted text-center",
-                  children: "No data available for the selected period."
-                }
-              )
-            ] }) })
           ] })
-        ] }),
-        /* @__PURE__ */ jsxs(Tabs.Content, { value: "products", children: [
-          /* @__PURE__ */ jsxs(Container, { className: "mb-4 min-h-[9.375rem]", children: [
-            /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", children: "Top-Selling Products" }),
-            /* @__PURE__ */ jsx(Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Products by quantity sold in selected period" }),
-            isLoadingProducts ? /* @__PURE__ */ jsx(BarChartSkeleton, {}) : (products == null ? void 0 : products.variantQuantitySold) && someTopSellingProductsGreaterThanZero ? /* @__PURE__ */ jsx("div", { className: "w-full", style: { aspectRatio: "16/9" }, children: /* @__PURE__ */ jsx(
-              BarChart,
-              {
-                data: products.variantQuantitySold,
-                xAxisDataKey: "title",
-                yAxisDataKey: "quantity",
-                lineColor: "#82ca9d",
-                useStableColors: true,
-                colorKeyField: "title"
-              }
-            ) }) : /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-muted text-center", children: "No data available for the selected period." })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex gap-4 max-xl:flex-col", children: [
-            /* @__PURE__ */ jsxs(Container, { children: [
-              /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", children: "Out-of-Stock Variants" }),
-              /* @__PURE__ */ jsx(Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Products with zero inventory" }),
-              isLoadingProducts ? /* @__PURE__ */ jsx(ProductsTableSkeleton, {}) : /* @__PURE__ */ jsx(
-                ProductsTable,
-                {
-                  products: ((_h = products == null ? void 0 : products.lowStockVariants) == null ? void 0 : _h.filter(
-                    (product) => product.inventoryQuantity === 0
-                  )) || []
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs(Container, { children: [
-              /* @__PURE__ */ jsx(Text, { size: "xlarge", weight: "plus", children: "Low Stock Variants" }),
-              /* @__PURE__ */ jsx(Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Products with inventory below threshold" }),
-              isLoadingProducts ? /* @__PURE__ */ jsx(ProductsTableSkeleton, {}) : /* @__PURE__ */ jsx(
-                ProductsTable,
-                {
-                  products: ((_i = products == null ? void 0 : products.lowStockVariants) == null ? void 0 : _i.filter(
-                    (product) => product.inventoryQuantity > 0
-                  )) || []
-                }
-              )
-            ] })
-          ] })
-        ] })
-      ] })
-    ] }) })
+        ]
+      }
+    ) })
   ] });
 };
 const config = defineRouteConfig({