@rsc-labs/medusa-store-analytics-v2
Version:
Get analytics data about your store
94 lines (93 loc) • 5.64 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import { useState, useMemo } from "react";
import { defineRouteConfig } from "@medusajs/admin-sdk";
import { Tabs } from "@medusajs/ui";
import { LightBulb } from "@medusajs/icons";
import { Grid, Box } from "@mui/material";
import OverviewTab from "../../../../ui-components/tabs/overview.js";
import OrdersTab from "../../../../ui-components/tabs/orders.js";
import ProductsTab from "../../../../ui-components/tabs/products.js";
import SalesTab from "../../../../ui-components/tabs/sales.js";
import CustomersTab from "../../../../ui-components/tabs/customers.js";
import { DropdownOrderStatus, SelectDateLasts, GenerateReportButton, SwitchComparison, ComparedDate } from "../../../../ui-components/common/overview-components.js";
import "recharts";
import { convertDateLastsToDateRange, convertDateLastsToComparedDateRange } from "../../../../ui-components/utils/helpers.js";
import "react-router-dom";
import { DateLasts, OrderStatus } from "../../../../ui-components/utils/types.js";
import ProTab from "../../../../ui-components/tabs/pro.js";
const AnalyticsPage = () => {
const [dateLast, setDateLasts] = useState(DateLasts.LastWeek);
const [compareEnabled, setCompare] = useState(true);
const [orderStatuses, setOrderStatuses] = useState([OrderStatus.COMPLETED, OrderStatus.PENDING]);
const dateRange = useMemo(() => convertDateLastsToDateRange(dateLast), [dateLast]);
const dateRangeComparedTo = useMemo(() => convertDateLastsToComparedDateRange(dateLast), [dateLast]);
function setDateLastsString(select) {
switch (select) {
case DateLasts.LastWeek:
setDateLasts(DateLasts.LastWeek);
break;
case DateLasts.LastMonth:
setDateLasts(DateLasts.LastMonth);
break;
case DateLasts.LastYear:
setDateLasts(DateLasts.LastYear);
break;
case DateLasts.All:
setDateLasts(DateLasts.All);
break;
}
}
return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
/* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 12, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
/* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(DropdownOrderStatus, { onOrderStatusChange: setOrderStatuses, appliedStatuses: orderStatuses }) }),
/* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(SelectDateLasts, { dateLast, onSelectChange: setDateLastsString }) }),
/* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(GenerateReportButton, { orderStatuses, dateRange, dateRangeCompareTo: dateRangeComparedTo, compareEnabled }) })
] }) }),
/* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 12, xl: 12, children: /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", columnSpacing: 6, children: [
/* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(SwitchComparison, { compareEnabled, onCheckChange: setCompare, allTime: dateLast == DateLasts.All }) }),
/* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(ComparedDate, { compare: compareEnabled, comparedToDateRange: dateRangeComparedTo }) })
] }) }),
/* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 12, children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "overview", children: [
/* @__PURE__ */ jsxs(Tabs.List, { style: { justifyContent: "center" }, children: [
/* @__PURE__ */ jsx(Tabs.Trigger, { value: "overview", children: "Overview" }),
/* @__PURE__ */ jsx(Tabs.Trigger, { value: "sales", children: "Sales" }),
/* @__PURE__ */ jsx(Tabs.Trigger, { value: "orders", children: "Orders" }),
/* @__PURE__ */ jsx(Tabs.Trigger, { value: "customers", children: "Customers" }),
/* @__PURE__ */ jsx(Tabs.Trigger, { value: "products", children: "Products" }),
/* @__PURE__ */ jsx(Tabs.Trigger, { value: "pro", style: { color: "purple" }, children: "Pro version" })
] }),
/* @__PURE__ */ jsxs(Tabs.Content, { value: "overview", children: [
/* @__PURE__ */ jsx(Box, { height: 20 }),
/* @__PURE__ */ jsx(OverviewTab, { orderStatuses, dateRange, dateRangeCompareTo: dateRangeComparedTo, compareEnabled })
] }),
/* @__PURE__ */ jsxs(Tabs.Content, { value: "sales", children: [
/* @__PURE__ */ jsx(Box, { height: 20 }),
/* @__PURE__ */ jsx(SalesTab, { orderStatuses, dateRange, dateRangeCompareTo: dateRangeComparedTo, compareEnabled })
] }),
/* @__PURE__ */ jsxs(Tabs.Content, { value: "orders", children: [
/* @__PURE__ */ jsx(Box, { height: 20 }),
/* @__PURE__ */ jsx(OrdersTab, { orderStatuses, dateRange, dateRangeCompareTo: dateRangeComparedTo, compareEnabled })
] }),
/* @__PURE__ */ jsxs(Tabs.Content, { value: "customers", children: [
/* @__PURE__ */ jsx(Box, { height: 20 }),
/* @__PURE__ */ jsx(CustomersTab, { orderStatuses, dateRange, dateRangeCompareTo: dateRangeComparedTo, compareEnabled })
] }),
/* @__PURE__ */ jsxs(Tabs.Content, { value: "products", children: [
/* @__PURE__ */ jsx(Box, { height: 20 }),
/* @__PURE__ */ jsx(ProductsTab, { orderStatuses, dateRange, dateRangeCompareTo: dateRangeComparedTo, compareEnabled })
] }),
/* @__PURE__ */ jsxs(Tabs.Content, { value: "pro", children: [
/* @__PURE__ */ jsx(Box, { height: 20 }),
/* @__PURE__ */ jsx(ProTab, {})
] })
] }) })
] });
};
const config = defineRouteConfig({
label: "Analytics",
icon: LightBulb
});
export {
config,
AnalyticsPage as default
};