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

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

@@ -972,23 +972,23 @@ const PieChart = ({ data, dataKey }) => {
     )
   ] }) });
 };
-const columnHelper$1 = ui.createDataTableColumnHelper();
-const columns$1 = [
-  columnHelper$1.accessor("sku", {
+const columnHelper$3 = ui.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",
@@ -1000,10 +1000,10 @@ const columns$1 = [
     }
   })
 ];
-const PAGE_SIZE = 10;
+const PAGE_SIZE$1 = 10;
 const ProductsTable = ({ products }) => {
   const [pagination, setPagination] = React__namespace.useState({
-    pageSize: PAGE_SIZE,
+    pageSize: PAGE_SIZE$1,
     pageIndex: 0
   });
   const [search, setSearch] = React__namespace.useState("");
@@ -1034,7 +1034,7 @@ const ProductsTable = ({ products }) => {
     );
   }, [products, search, sorting, pagination]);
   const table = ui.useDataTable({
-    columns: columns$1,
+    columns: columns$2,
     data: shownProducts,
     getRowId: (product) => product.sku,
     rowCount: products.length,
@@ -1069,10 +1069,10 @@ const ProductsTable = ({ products }) => {
         }
       }
     ),
-    products.length > PAGE_SIZE && /* @__PURE__ */ jsxRuntime.jsx(ui.DataTable.Pagination, {})
+    products.length > PAGE_SIZE$1 && /* @__PURE__ */ jsxRuntime.jsx(ui.DataTable.Pagination, {})
   ] });
 };
-const BACKEND_URL$1 = __BACKEND_URL__ === "/" ? "" : __BACKEND_URL__;
+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;
@@ -1080,7 +1080,7 @@ async function retrieveProductAnalytics(date) {
   const dateFrom = dateFns.format(date.from, "yyyy-MM-dd");
   const dateTo = dateFns.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;
@@ -1095,11 +1095,11 @@ const useProductAnalytics = (query, options) => {
     ...options
   });
 };
-const BACKEND_URL = __BACKEND_URL__ === "/" ? "" : __BACKEND_URL__;
+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;
@@ -1107,7 +1107,7 @@ async function retrieveOrderAnalytics(preset, date) {
   const dateFrom = dateFns.format(date.from, "yyyy-MM-dd");
   const dateTo = dateFns.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;
@@ -1148,7 +1148,7 @@ const BarChartSkeleton = () => {
 const PieChartSkeleton = () => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full aspect-square max-h-[400px]", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "w-full h-full" }) });
 };
-const dummyData = [
+const dummyData$1 = [
   {
     a: "a",
     b: "b",
@@ -1180,27 +1180,209 @@ const dummyData = [
     c: 0
   }
 ];
-const columnHelper = ui.createDataTableColumnHelper();
-const columns = [
-  columnHelper.accessor("a", {
+const columnHelper$2 = ui.createDataTableColumnHelper();
+const columns$1 = [
+  columnHelper$2.accessor("a", {
     header: () => null,
     cell: () => /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "w-full h-5" })
   }),
-  columnHelper.accessor("b", {
+  columnHelper$2.accessor("b", {
     header: () => null,
     cell: () => /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "w-full h-5" })
   }),
-  columnHelper.accessor("c", {
+  columnHelper$2.accessor("c", {
     header: () => null,
     cell: () => /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "w-full h-5" })
   })
 ];
 const ProductsTableSkeleton = () => {
+  const [search, setSearch] = React__namespace.useState("");
+  const table = ui.useDataTable({
+    columns: columns$1,
+    data: dummyData$1,
+    getRowId: (product) => product.a,
+    rowCount: dummyData$1.length,
+    search: {
+      state: search,
+      onSearchChange: setSearch
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.DataTable, { instance: table, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.DataTable.Toolbar, { className: "px-0 pt-0", children: /* @__PURE__ */ jsxRuntime.jsx(ui.DataTable.Search, { placeholder: "Search..." }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.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 = dateFns.format(date.from, "yyyy-MM-dd");
+  const dateTo = dateFns.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 reactQuery.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__namespace.default.useMemo(() => {
+    if (!useStableColors || !data || !colorKeyField) {
+      return [];
+    }
+    return generateColorsForData(data, colorKeyField, 70, isDark ? 60 : 50);
+  }, [data, useStableColors, colorKeyField, isDark]);
+  return /* @__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: String(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"
+        }
+      }
+    ),
+    dataKeys == null ? void 0 : dataKeys.map((key, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.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 = ui.createDataTableColumnHelper();
+const columns = [
+  columnHelper$1.accessor("a", {
+    header: () => null,
+    cell: () => /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "w-full h-5" })
+  }),
+  columnHelper$1.accessor("b", {
+    header: () => null,
+    cell: () => /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "w-full h-5" })
+  }),
+  columnHelper$1.accessor("c", {
+    header: () => null,
+    cell: () => /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "w-full h-5" })
+  }),
+  columnHelper$1.accessor("d", {
+    header: () => null,
+    cell: () => /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "w-full h-5" })
+  }),
+  columnHelper$1.accessor("e", {
+    header: () => null,
+    cell: () => /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "w-full h-5" })
+  })
+];
+const CustomersTableSkeleton = () => {
   const [search, setSearch] = React__namespace.useState("");
   const table = ui.useDataTable({
     columns,
     data: dummyData,
-    getRowId: (product) => product.a,
+    getRowId: (customer) => customer.a,
     rowCount: dummyData.length,
     search: {
       state: search,
@@ -1212,6 +1394,140 @@ const ProductsTableSkeleton = () => {
     /* @__PURE__ */ jsxRuntime.jsx(ui.DataTable.Table, {})
   ] });
 };
+const columnHelper = ui.createDataTableColumnHelper();
+const PAGE_SIZE = 10;
+const CustomersTable = ({
+  customers,
+  currencyCode
+}) => {
+  const [pagination, setPagination] = React__namespace.useState({
+    pageSize: PAGE_SIZE,
+    pageIndex: 0
+  });
+  const [search, setSearch] = React__namespace.useState("");
+  const [sorting, setSorting] = React__namespace.useState(
+    null
+  );
+  const navigate = reactRouterDom.useNavigate();
+  const shownCustomers = React__namespace.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__namespace.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { children: date ? dateFns.format(new Date(date), "MMM dd, yyyy") : "No orders yet" });
+        }
+      })
+    ],
+    [currencyCode]
+  );
+  const table = ui.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__ */ jsxRuntime.jsxs(ui.DataTable, { instance: table, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.DataTable.Toolbar, { className: "px-0 pt-0", children: /* @__PURE__ */ jsxRuntime.jsx(ui.DataTable.Search, { placeholder: "Search..." }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.DataTable.Table,
+      {
+        emptyState: {
+          filtered: {
+            heading: "No customers found"
+          },
+          empty: {
+            heading: "No customers available"
+          }
+        }
+      }
+    ),
+    customers.length > PAGE_SIZE && /* @__PURE__ */ jsxRuntime.jsx(ui.DataTable.Pagination, {})
+  ] });
+};
 function dateToCalendarDate(date) {
   return new $35ea8db9cb2ccb90$export$99faa760c7908e4f(
     date.getFullYear(),
@@ -1270,6 +1586,7 @@ const AnalyticsPage = () => {
     return void 0;
   }, [rangeParam]);
   const { data: products, isLoading: isLoadingProducts } = useProductAnalytics(date);
+  const { data: customers, isLoading: isLoadingCustomers } = useCustomerAnalytics(date);
   const { data: orders, isLoading: isLoadingOrders } = useOrderAnalytics(
     ["this-month", "last-month", "last-3-months"].includes(rangeParam) ? rangeParam : "custom",
     date
@@ -1468,6 +1785,14 @@ const AnalyticsPage = () => {
                 disabled: isLoadingOrders || isLoadingProducts,
                 children: "Products"
               }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Tabs.Trigger,
+              {
+                value: "customers",
+                disabled: isLoadingOrders || isLoadingProducts,
+                children: "Customers"
+              }
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8", children: [
@@ -1635,6 +1960,100 @@ const AnalyticsPage = () => {
                   )
                 ] })
               ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs.Content, { value: "customers", 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.User, { className: "absolute right-6 top-4 text-ui-fg-muted" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", children: "Total Customers" }),
+                    isLoadingCustomers ? /* @__PURE__ */ jsxRuntime.jsx(SmallCardSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xlarge", weight: "plus", children: (customers == null ? void 0 : customers.total_customers) || 0 }) })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "relative", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(icons.User, { className: "absolute right-6 top-4 text-ui-fg-muted" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", children: "New Customers" }),
+                    isLoadingCustomers ? /* @__PURE__ */ jsxRuntime.jsx(SmallCardSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xlarge", weight: "plus", children: (customers == null ? void 0 : customers.new_customers) || 0 }) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 flex-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "relative", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(icons.User, { className: "absolute right-6 text-ui-fg-muted top-4 size-[15px]" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", children: "Returning Customers" }),
+                    isLoadingCustomers ? /* @__PURE__ */ jsxRuntime.jsx(SmallCardSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xlarge", weight: "plus", children: (customers == null ? void 0 : customers.returning_customers) || 0 }) })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "relative", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChartNoAxesCombined, { className: "absolute right-6 top-4 text-ui-fg-muted" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", children: "Average Sales per Customer" }),
+                    isLoadingCustomers || isLoadingOrders ? /* @__PURE__ */ jsxRuntime.jsx(SmallCardSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.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__ */ jsxRuntime.jsxs("div", { className: "flex max-md:flex-col gap-4 mb-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: "New vs. Returning Customers" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Distribution of new and returning customers in the selected period" }),
+                  isLoadingCustomers ? /* @__PURE__ */ jsxRuntime.jsx(BarChartSkeleton, {}) : (customers == null ? void 0 : customers.customer_count) && customers.customer_count.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", style: { aspectRatio: "16/9" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    StackedBarChart,
+                    {
+                      data: customers.customer_count,
+                      xAxisDataKey: "name",
+                      lineColor: "#82ca9d",
+                      useStableColors: true,
+                      colorKeyField: "returning_customers",
+                      dataKeys: ["new_customers", "returning_customers"]
+                    }
+                  ) }) : /* @__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: "Top Customer Groups by Sales" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Sales breakdown by customer group in the selected period" }),
+                  isLoadingCustomers ? /* @__PURE__ */ jsxRuntime.jsx(BarChartSkeleton, {}) : (customers == null ? void 0 : customers.customer_group) && customers.customer_group.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", style: { aspectRatio: "16/9" }, children: /* @__PURE__ */ jsxRuntime.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__ */ 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 gap-4 max-xl:flex-col", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xlarge", weight: "plus", children: "Top Customers by Sales" }),
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "small", className: "mb-8 text-ui-fg-muted", children: "Customers by sales in the selected period" }),
+                isLoadingCustomers ? /* @__PURE__ */ jsxRuntime.jsx(CustomersTableSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx(
+                  CustomersTable,
+                  {
+                    customers: (customers == null ? void 0 : customers.customer_sales) || [],
+                    currencyCode: (customers == null ? void 0 : customers.currency_code) || "EUR"
+                  }
+                )
+              ] }) })
             ] })
           ] })
         ]