@deenruv/dashboard-widgets-plugin 1.0.0

package/dist/plugin-ui/components/OrdersWidget/OrdersSummaryTile.js

@@ -0,0 +1,115 @@
+import { Label, priceFormatter, Switch, useLazyQuery, useTranslation, } from "@deenruv/react-ui-devkit";
+import React, { useEffect, useMemo, useState } from "react";
+import { OrderSummaryMetricsQuery } from "../../graphql";
+import { CurrencyCode } from "../../zeus";
+import { giveSummaryMetricsRatio } from "../../utils";
+import { RatioBadge } from "./RatioBadge";
+export const OrdersSummaryTile = ({ dateRange, orderStates, net, setNet, }) => {
+    const { t } = useTranslation("dashboard-widgets-plugin");
+    const [getOrdersSummaryMetric] = useLazyQuery(OrderSummaryMetricsQuery);
+    const [metricLoading, setMetricLoading] = useState(false);
+    const [ordersSummaryMetric, setOrdersSummaryMetrics] = useState();
+    const getOrders = async ({ prevRange, range, refresh = false, _orderStates, }) => {
+        try {
+            setMetricLoading(true);
+            const response = await getOrdersSummaryMetric({
+                prevInput: {
+                    range: prevRange,
+                    orderStates: _orderStates,
+                },
+                input: {
+                    range,
+                    orderStates: _orderStates,
+                },
+            });
+            const metric = response.orderSummaryMetric.data;
+            const prevMetric = response.prevOrderSummaryMetric.data;
+            const prevRatio = giveSummaryMetricsRatio(metric, prevMetric);
+            setOrdersSummaryMetrics({
+                metric,
+                prevRatio,
+            });
+        }
+        catch (e) {
+            console.log(e);
+        }
+        finally {
+            setMetricLoading(false);
+        }
+    };
+    useEffect(() => {
+        getOrders({ ...dateRange, _orderStates: orderStates });
+    }, [dateRange, orderStates]);
+    const total = useMemo(() => {
+        if (ordersSummaryMetric && net) {
+            return ordersSummaryMetric.metric.total;
+        }
+        else if (ordersSummaryMetric) {
+            return ordersSummaryMetric.metric.totalWithTax;
+        }
+        return 0;
+    }, [net, ordersSummaryMetric]);
+    const totalRatio = useMemo(() => {
+        if (ordersSummaryMetric && net) {
+            return ordersSummaryMetric.prevRatio.total;
+        }
+        else if (ordersSummaryMetric) {
+            return ordersSummaryMetric.prevRatio.totalWithTax;
+        }
+        return 0;
+    }, [net, ordersSummaryMetric]);
+    const average = useMemo(() => {
+        if (ordersSummaryMetric && net) {
+            return ordersSummaryMetric.metric.averageOrderValue;
+        }
+        else if (ordersSummaryMetric) {
+            return ordersSummaryMetric.metric.averageOrderValueWithTax;
+        }
+        return 0;
+    }, [net, ordersSummaryMetric]);
+    const averageRatio = useMemo(() => {
+        if (ordersSummaryMetric && net) {
+            return ordersSummaryMetric.prevRatio.averageOrderValue;
+        }
+        else if (ordersSummaryMetric) {
+            return ordersSummaryMetric.prevRatio.averageOrderValueWithTax;
+        }
+        return 0;
+    }, [net, ordersSummaryMetric]);
+    return (React.createElement("div", { className: "px-6" },
+        React.createElement("div", { className: "flex items-center justify-between py-4" },
+            React.createElement("h2", null, t("summary")),
+            React.createElement("div", { className: "flex items-center gap-2" },
+                React.createElement(Label, { htmlFor: "net" }, net ? t("netSold") : t("grossSold")),
+                React.createElement(Switch, { id: "net", checked: net, onCheckedChange: (checked) => {
+                        setNet(checked);
+                        getOrders({
+                            ...dateRange,
+                            refresh: true,
+                            _orderStates: orderStates,
+                            prevRange: dateRange.prevRange,
+                        });
+                    } }))),
+        React.createElement("div", { className: "bg-muted/20 grid grid-cols-2 rounded-md border lg:grid-cols-4" },
+            React.createElement("div", null,
+                React.createElement("div", { className: "border-r p-6 pb-1" },
+                    React.createElement("div", { className: "flex flex-col-reverse justify-between gap-1 2xl:flex-row 2xl:items-center" },
+                        React.createElement("h4", { className: "text-foreground/70 text-sm" }, net ? t("netSold") : t("grossSold")),
+                        React.createElement(RatioBadge, { ratio: totalRatio })),
+                    React.createElement("h3", { className: "flex items-end" }, priceFormatter(total || 0, ordersSummaryMetric?.metric?.currencyCode || CurrencyCode.PLN)))),
+            React.createElement("div", { className: "border-r p-6 " },
+                React.createElement("div", { className: "flex flex-col-reverse justify-between gap-1 2xl:flex-row 2xl:items-center" },
+                    React.createElement("h4", { className: "text-foreground/70 text-sm" }, net ? t("averageNetSold") : t("averageGrossSold")),
+                    React.createElement(RatioBadge, { ratio: averageRatio })),
+                React.createElement("h3", { className: "flex items-end" }, priceFormatter(average || 0, ordersSummaryMetric?.metric?.currencyCode || CurrencyCode.PLN))),
+            React.createElement("div", { className: "border-r border-t  p-6 xl:border-t-0" },
+                React.createElement("div", { className: "flex flex-col-reverse justify-between gap-1 2xl:flex-row 2xl:items-center" },
+                    React.createElement("h4", { className: "text-foreground/70 text-sm" }, t("orders")),
+                    React.createElement(RatioBadge, { ratio: ordersSummaryMetric?.prevRatio.orderCount })),
+                React.createElement("h3", null, ordersSummaryMetric?.metric?.orderCount || 0)),
+            React.createElement("div", { className: "border-t  p-6 xl:border-t-0" },
+                React.createElement("div", { className: "flex flex-col-reverse justify-between gap-1 2xl:flex-row 2xl:items-center" },
+                    React.createElement("h4", { className: "text-foreground/70 text-sm" }, t("soldProducts")),
+                    React.createElement(RatioBadge, { ratio: ordersSummaryMetric?.prevRatio.productCount })),
+                React.createElement("h3", null, ordersSummaryMetric?.metric?.productCount || 0)))));
+};

package/dist/plugin-ui/components/OrdersWidget/ProductSelector.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { ChartMetricType } from "../../zeus";
+interface ProductSelectProps {
+    metricType: ChartMetricType;
+    selectedAvailableProducts: {
+        id: string;
+        color: string;
+    }[];
+    allAvailableProducts: {
+        id: string;
+        name: string;
+    }[];
+    onSelectedAvailableProductsChange: (id: string) => void;
+    clearSelectedProducts: () => void;
+}
+export declare const ProductSelector: React.FC<ProductSelectProps>;
+export {};

package/dist/plugin-ui/components/OrdersWidget/ProductSelector.js

@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+import { Button, cn, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Popover, PopoverContent, PopoverTrigger, useTranslation, } from "@deenruv/react-ui-devkit";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { sortBySelected } from "../../utils";
+export const ProductSelector = ({ metricType, allAvailableProducts, selectedAvailableProducts, onSelectedAvailableProductsChange, clearSelectedProducts, }) => {
+    const [popoverOpen, setPopoverOpen] = useState(false);
+    const { t } = useTranslation("dashboard-widgets-plugin");
+    return (React.createElement(Popover, { open: popoverOpen, onOpenChange: setPopoverOpen },
+        React.createElement(PopoverTrigger, { asChild: true },
+            React.createElement(Button, { variant: "outline", role: "combobox", className: "h-[30px] w-full max-w-[240px] justify-between py-0" },
+                selectedAvailableProducts.length
+                    ? `${t("selectedProducts")} (${selectedAvailableProducts.length})`
+                    : t("selectProducts"),
+                React.createElement(ChevronsUpDown, { size: 16, className: "opacity-50" }))),
+        React.createElement(PopoverContent, { className: "w-max p-0" },
+            React.createElement(Command, null,
+                React.createElement("div", { className: "relative" },
+                    React.createElement(CommandInput, { className: "border-none", placeholder: t("searchProducts") }),
+                    selectedAvailableProducts.length ? (React.createElement(Button, { onClick: clearSelectedProducts, variant: "ghost", size: "sm", className: "text-primary absolute right-1 top-1/2 -translate-y-1/2" }, t("clearSelected"))) : null),
+                React.createElement(CommandList, null,
+                    React.createElement(CommandEmpty, null,
+                        " ",
+                        t("noProductsFound")),
+                    React.createElement(CommandGroup, null, allAvailableProducts
+                        .sort(sortBySelected(selectedAvailableProducts.map((p) => p.id)))
+                        .map((product) => (React.createElement(CommandItem, { key: product.id, value: `${product.name} ${product.id}`, onSelect: () => onSelectedAvailableProductsChange(product.id) },
+                        React.createElement("div", { className: "flex w-full cursor-pointer justify-between gap-2" },
+                            React.createElement("span", { className: "shrink-0" }, product.name),
+                            React.createElement("div", { className: "flex" },
+                                React.createElement("span", { className: "shrink-0 pr-1 opacity-50" }, `(variant ID: ${product.id})`),
+                                " ",
+                                React.createElement(Check, { style: {
+                                        color: selectedAvailableProducts.find((p) => p.id === product.id)?.color ?? "",
+                                    }, className: cn("ml-auto", selectedAvailableProducts.some((p) => p.id === product.id)
+                                        ? "opacity-100"
+                                        : "opacity-0") }))))))))))));
+};

package/dist/plugin-ui/components/OrdersWidget/RatioBadge.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface RatioBadgeProps {
+    ratio: number | undefined | null;
+}
+export declare const RatioBadge: React.FC<RatioBadgeProps>;
+export {};

package/dist/plugin-ui/components/OrdersWidget/RatioBadge.js

@@ -0,0 +1,12 @@
+import { cn } from "@deenruv/react-ui-devkit";
+import { TrendingDown, TrendingUp } from "lucide-react";
+import React from "react";
+export const RatioBadge = ({ ratio: _ratio }) => {
+    const ratio = _ratio && _ratio > 0 ? _ratio : 0;
+    return (React.createElement("div", { className: cn("text-[0.75rem] w-max flex gap-1 items-center p-1 rounded-sm text-white dark:text-foreground", {
+            "bg-[#006600] dark:bg-[#032513]": ratio > 0,
+            "bg-[#990000] dark:bg-[#250303]": ratio < 0,
+        }) },
+        React.createElement("span", null, `${ratio}%`),
+        ratio > 0 ? React.createElement(TrendingUp, { size: 16 }) : React.createElement(TrendingDown, { size: 16 })));
+};

package/dist/plugin-ui/components/OrdersWidget/index.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const OrdersWidget: () => React.JSX.Element;

package/dist/plugin-ui/components/OrdersWidget/index.js

@@ -0,0 +1,229 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { differenceInDays, endOfWeek, startOfWeek, subWeeks } from "date-fns";
+import { Card, CardHeader, CardContent, usePluginStore, useLazyQuery, ORDER_STATE, Checkbox, cn, useTranslation, useSettings, useQuery, useLocalStorage, DraggableSelect, Button, } from "@deenruv/react-ui-devkit";
+import { MetricsCustomDates } from "./MetricCustomDates";
+import { MetricTypeSelect } from "./MetricTypeSelect";
+import { OrdersChart } from "./OrdersChart";
+import { MetricRangeType, ChartMetricType, MetricIntervalType, } from "../../zeus";
+import { AdditionalOrderStatesQuery, ChartMetricQuery } from "../../graphql";
+import { convertBackedDataToChartData, generateBrightRandomColor, getCustomIntervalDates, groupByPeriods, parseNameToCurrentLanguage, } from "../../utils";
+import { MetricsRangeSelect } from "../shared/MetricsRangeSelect";
+import { OrdersSummaryTile } from "./OrdersSummaryTile";
+import { ProductSelector } from "./ProductSelector";
+import { GroupBySelect } from "./GroupBySelect";
+import { PanelsTopLeft } from "lucide-react";
+export const OrdersWidget = () => {
+    const { t } = useTranslation("dashboard-widgets-plugin");
+    const [net, setNet] = useState(false);
+    const { data } = useQuery(AdditionalOrderStatesQuery);
+    const [fetchChartMetrics] = useLazyQuery(ChartMetricQuery);
+    const { language } = usePluginStore();
+    const channel = useSettings((state) => state.selectedChannel);
+    const [metricLoading, setMetricLoading] = useState(false);
+    const [shouldShowCompare, setShouldShowCompare] = useState(false);
+    const [groupBy, setGroupBy] = useState("day");
+    const [dateRange, setDateRange] = useState({
+        range: {
+            start: startOfWeek(new Date(), { weekStartsOn: 1 }),
+            end: endOfWeek(new Date(), { weekStartsOn: 1 }),
+        },
+        prevRange: {
+            start: startOfWeek(subWeeks(new Date(), 1), { weekStartsOn: 1 }),
+            end: endOfWeek(subWeeks(new Date(), 1), { weekStartsOn: 1 }),
+        },
+    });
+    const [metricRangeTypeSelectValue, setMetricRangeTypeSelectValue] = useLocalStorage("orders-metric-range", MetricRangeType.Today);
+    const [metricType, setMetricType] = useState(ChartMetricType.OrderTotal);
+    const [betterMetrics, setBetterMetrics] = useState({ data: [] });
+    const [allAvailableProducts, setAllAvailableProducts] = useState([]);
+    const [selectedAvailableProducts, setSelectedAvailableProducts] = useState([]);
+    const [selectedOrderStates, setSelectedOrderStates] = useState([
+        "PaymentSettled",
+        "PartiallyShipped",
+        "Shipped",
+        "PartiallyDelivered",
+        "Delivered",
+    ]);
+    useEffect(() => {
+        if (!data)
+            return;
+        const selectedAdditionalOrderStates = data.additionalOrderStates.filter((state) => state.selectedByDefault);
+        setSelectedOrderStates((prev) => [
+            ...prev,
+            ...selectedAdditionalOrderStates
+                .map((state) => state.state)
+                .filter((state) => !prev.includes(state)),
+        ]);
+    }, [data]);
+    const fetchData = useCallback(async () => {
+        try {
+            setMetricLoading(true);
+            let interval = MetricIntervalType.Day;
+            const { range, prevRange } = dateRange;
+            if (range.end) {
+                const diffrenceInDays = differenceInDays(range.end, range.start);
+                interval =
+                    diffrenceInDays > 0
+                        ? MetricIntervalType.Day
+                        : MetricIntervalType.Hour;
+            }
+            const { chartMetric, prevChartMetric } = await fetchChartMetrics({
+                prevInput: {
+                    types: [metricType],
+                    range: { ...prevRange },
+                    orderStates: selectedOrderStates,
+                    interval,
+                    net,
+                },
+                input: {
+                    types: [metricType],
+                    range,
+                    orderStates: selectedOrderStates,
+                    interval,
+                    net,
+                },
+            });
+            if (chartMetric?.data?.length) {
+                const dataWithMappedEntries = chartMetric.data.map((data, i) => {
+                    const prevEntries = prevChartMetric.data[i]?.entries ?? [];
+                    return {
+                        ...data,
+                        entries: convertBackedDataToChartData({
+                            type: data.type,
+                            entries: data.entries,
+                            prevEntries,
+                            interval,
+                            language,
+                            start: range.start,
+                            end: range.end,
+                        }),
+                    };
+                });
+                if (metricType === ChartMetricType.OrderTotalProductsCount) {
+                    const flatted = dataWithMappedEntries.map((d) => d.entries).flat();
+                    const allAvailableProducts = flatted.reduce((acc, curr) => {
+                        curr.additionalData?.forEach((product) => {
+                            if (!acc.some((p) => p.id === product.id)) {
+                                acc.push({ id: product.id, name: product.name });
+                            }
+                        });
+                        return acc;
+                    }, []);
+                    setAllAvailableProducts(allAvailableProducts);
+                }
+                setBetterMetrics({
+                    data: dataWithMappedEntries,
+                });
+            }
+        }
+        catch (e) {
+            console.log(e);
+        }
+        finally {
+            setMetricLoading(false);
+        }
+    }, [dateRange, metricType, selectedOrderStates, net]);
+    useEffect(() => {
+        if (metricRangeTypeSelectValue !== MetricRangeType.Custom)
+            setDateRange(getCustomIntervalDates(metricRangeTypeSelectValue));
+        if (metricType === ChartMetricType.OrderTotalProductsCount ||
+            metricRangeTypeSelectValue === MetricRangeType.Custom)
+            setShouldShowCompare(false);
+        if (metricType === ChartMetricType.OrderTotalProductsCount)
+            return;
+        setSelectedAvailableProducts([]);
+    }, [metricRangeTypeSelectValue, metricType]);
+    useEffect(() => {
+        fetchData();
+    }, [
+        net,
+        channel,
+        dateRange,
+        metricType,
+        selectedOrderStates,
+        data?.additionalOrderStates,
+    ]);
+    const changeCustomMetricRange = (date, key) => {
+        if (!date)
+            return;
+        setDateRange((p) => ({
+            ...p,
+            range: { ...p.range, [key]: date },
+        }));
+    };
+    const betterData = useMemo(() => {
+        const allData = betterMetrics.data
+            .map((metric) => metric.entries.map((entry) => {
+            const name = parseNameToCurrentLanguage(entry.name, language);
+            const reduced = selectedAvailableProducts.reduce((acc, selectedProduct) => {
+                const product = entry.additionalData?.find((data) => data.id === selectedProduct.id);
+                acc[selectedProduct.id] = product?.quantity ?? 0;
+                return acc;
+            }, {});
+            return { ...entry, name, ...reduced };
+        }))
+            .flat();
+        return { allData };
+    }, [betterMetrics, net, language, selectedAvailableProducts]);
+    const onSelectedAvailableProductsChange = (id) => {
+        setSelectedAvailableProducts((prev) => prev.some((product) => product.id === id)
+            ? prev.filter((p) => p.id !== id)
+            : [
+                ...prev,
+                {
+                    id,
+                    color: generateBrightRandomColor(),
+                },
+            ]);
+    };
+    const shouldShowGroupBy = useMemo(() => {
+        const { start, end } = dateRange.range;
+        return end && differenceInDays(end, start) > 28;
+    }, [dateRange.range.start, dateRange.range.end]);
+    const groupedData = useMemo(() => {
+        const { start, end } = dateRange.range;
+        const shouldShowGroupBy = end && differenceInDays(end, start) > 28;
+        if (!shouldShowGroupBy)
+            return betterData.allData;
+        return Object.values(groupByPeriods({ data: betterData.allData, language, groupBy }));
+    }, [betterData.allData, groupBy, dateRange.range.start, dateRange.range.end]);
+    const options = useMemo(() => [
+        ...Object.values(ORDER_STATE),
+        ...(data?.additionalOrderStates.map(({ state }) => state) || []),
+    ]
+        .filter((i, index, arr) => arr.indexOf(i) === index)
+        .sort((a, b) => a.localeCompare(b))
+        .map((state) => ({
+        value: state,
+        label: parseNameToCurrentLanguage(state, language),
+    })), [data?.additionalOrderStates]);
+    return (React.createElement(Card, { className: "border-0 py-6 pr-6 shadow-none " },
+        React.createElement(CardHeader, { className: "flex-col items-start justify-between gap-2 pt-0 xl:flex-row" },
+            React.createElement("div", { className: "flex flex-col gap-2" },
+                React.createElement("div", { className: "flex flex-col gap-2 xl:flex-row" },
+                    React.createElement("div", { className: "flex gap-2" },
+                        React.createElement(MetricsRangeSelect, { value: metricRangeTypeSelectValue, changeMetricInterval: setMetricRangeTypeSelectValue, loading: metricLoading }),
+                        shouldShowGroupBy ? (React.createElement(GroupBySelect, { value: groupBy, changeGroupBy: (value) => setGroupBy(value) })) : null),
+                    React.createElement(MetricsCustomDates, { isVisible: metricRangeTypeSelectValue === MetricRangeType.Custom, endDate: dateRange.range.end, startDate: dateRange.range.start, setDate: changeCustomMetricRange })),
+                React.createElement("div", { className: cn("flex cursor-pointer  items-center gap-2 text-sm opacity-0 select-none", metricRangeTypeSelectValue !== MetricRangeType.Custom &&
+                        metricType !== ChartMetricType.OrderTotalProductsCount &&
+                        "opacity-100 select-auto") },
+                    React.createElement(Checkbox, { id: "compare", checked: shouldShowCompare, onCheckedChange: (e) => setShouldShowCompare(e) }),
+                    React.createElement("label", { htmlFor: "compare", className: "text-foreground/70 shrink-0 cursor-pointer select-none text-[0.75rem] font-medium leading-none" }, t("compare")))),
+            React.createElement("div", { className: "!mt-0 flex items-center gap-2" },
+                React.createElement(DraggableSelect, { localStorageKey: "orders-widget-order-states", align: "end", title: t("selectOrderStates"), button: React.createElement(Button, { variant: "outline", size: "sm", className: "h-8 gap-2 py-0" },
+                        selectedOrderStates.length
+                            ? `${t("selectedOrderStates")} (${selectedOrderStates.length})`
+                            : t("selectOrderStates"),
+                        React.createElement(PanelsTopLeft, { className: "size-4", "aria-hidden": "true" })), value: selectedOrderStates, onChange: setSelectedOrderStates, options: options }),
+                React.createElement(MetricTypeSelect, { metricType: metricType, changeMetricType: setMetricType, loading: metricLoading }))),
+        React.createElement(OrdersSummaryTile, { net: net, setNet: setNet, orderStates: selectedOrderStates, dateRange: dateRange }),
+        React.createElement("div", { className: "mb-6" }),
+        React.createElement(CardContent, { className: "mb-6 mr-6 p-0" },
+            React.createElement("div", { className: cn("pl-6 flex justify-start pb-6 opacity-0 select-none", metricType === ChartMetricType.OrderTotalProductsCount &&
+                    "opacity-100 select-auto") },
+                React.createElement(ProductSelector, { onSelectedAvailableProductsChange: onSelectedAvailableProductsChange, clearSelectedProducts: () => setSelectedAvailableProducts([]), metricType: metricType, allAvailableProducts: allAvailableProducts, selectedAvailableProducts: selectedAvailableProducts })),
+            React.createElement(OrdersChart, { shouldShowCompare: metricRangeTypeSelectValue === MetricRangeType.Custom
+                    ? false
+                    : shouldShowCompare, selectedAvailableProducts: selectedAvailableProducts, data: groupedData, language: language, metricType: metricType }))));
+};

package/dist/plugin-ui/components/ProductsChartWidget/CustomBarChartTooltip.d.ts

@@ -0,0 +1,9 @@
+import { TooltipProps } from "recharts";
+import { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent";
+import React from "react";
+interface CustomBarChartTooltipProps {
+    chartProps: TooltipProps<ValueType, NameType>;
+    currencyCode: string;
+}
+export declare const CustomBarChartTooltip: React.FC<CustomBarChartTooltipProps>;
+export {};

package/dist/plugin-ui/components/ProductsChartWidget/CustomBarChartTooltip.js

@@ -0,0 +1,14 @@
+import { Card, CardContent } from "@deenruv/react-ui-devkit";
+import { useTranslation } from "react-i18next";
+import React from "react";
+export const CustomBarChartTooltip = ({ chartProps, currencyCode, }) => {
+    const { t } = useTranslation("dashboard-widgets-plugin", {
+        i18n: window.__DEENRUV_SETTINGS__.i18n,
+    });
+    const payload = chartProps.payload?.[0]?.payload;
+    return (React.createElement(Card, { className: "bg-muted flex p-2" },
+        React.createElement(CardContent, { className: "flex flex-col gap-1 p-0" },
+            React.createElement("span", null,
+                t("sold"),
+                payload?.value))));
+};

package/dist/plugin-ui/components/ProductsChartWidget/index.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const ProductsChartWidget: () => React.JSX.Element;

package/dist/plugin-ui/components/ProductsChartWidget/index.js

@@ -0,0 +1,116 @@
+import { Bar, BarChart, Cell, ResponsiveContainer, XAxis, YAxis, } from "recharts";
+import { Card, CardContent, CardHeader, CardTitle, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, useLazyQuery, useSettings, useWidgetItem, useTranslation, } from "@deenruv/react-ui-devkit";
+import { ChartTooltip, Separator } from "@deenruv/react-ui-devkit";
+import React, { useCallback, useEffect, useState } from "react";
+import { MetricRangeType, ChartMetricType, MetricIntervalType, } from "../../zeus";
+import { endOfWeek, startOfWeek } from "date-fns";
+import { colors, EmptyData } from "../shared";
+import { BarChartMetricQuery } from "../../graphql";
+import { CurrencyCode } from "@deenruv/admin-types";
+import { CustomBarChartTooltip } from "./CustomBarChartTooltip";
+import { getCustomIntervalDates, getRandomColor } from "../../utils";
+import { MetricsRangeSelect } from "../shared/MetricsRangeSelect";
+export const ProductsChartWidget = () => {
+    const { t } = useTranslation("dashboard-widgets-plugin");
+    const [fetchChartMetrics] = useLazyQuery(BarChartMetricQuery);
+    const channel = useSettings((state) => state.selectedChannel);
+    const currencyCode = useSettings((p) => p.selectedChannel?.currencyCode);
+    const [showData, setShowData] = useState("FIRST_FIVE");
+    const [dateRange, setDateRange] = useState({
+        start: startOfWeek(new Date(), { weekStartsOn: 1 }),
+        end: endOfWeek(new Date(), { weekStartsOn: 1 }),
+    });
+    const [metricLoading, setMetricLoading] = useState(false);
+    const [metricRangeTypeSelectValue, setMetricRangeTypeSelectValue] = useState(MetricRangeType.ThisWeek);
+    const [chartData, setChartData] = useState([]);
+    const [selectedOrderStates, setSelectedOrderStates] = useState([
+        "PaymentSettled",
+        "PartiallyShipped",
+        "Shipped",
+        "PartiallyDelivered",
+        "Delivered",
+    ]);
+    const { plugin } = useWidgetItem();
+    const barColors = 
+    // @ts-expect-error: for now we dont have information about these types, but we know that this exists
+    plugin?.config?.options?.barChartColors || colors;
+    const fetchData = useCallback(async (refresh = false) => {
+        try {
+            setMetricLoading(true);
+            fetchChartMetrics({
+                input: {
+                    orderStates: selectedOrderStates,
+                    range: dateRange,
+                    types: [ChartMetricType.OrderTotalProductsCount],
+                    interval: MetricIntervalType.Day,
+                },
+            }).then(({ chartMetric }) => {
+                const entries = chartMetric.data[0].entries;
+                const salesTotals = {};
+                entries.forEach((entry) => {
+                    entry.additionalData?.forEach((product) => {
+                        if (salesTotals[product.id]) {
+                            salesTotals[product.id].quantity += product.quantity;
+                        }
+                        else {
+                            salesTotals[product.id] = {
+                                name: product.name,
+                                quantity: product.quantity,
+                            };
+                        }
+                    });
+                });
+                const _chartData = Object.values(salesTotals)
+                    .map((product) => ({
+                    product: product.name,
+                    value: product.quantity,
+                }))
+                    .sort((a, b) => b.value - a.value);
+                setChartData(_chartData);
+            });
+        }
+        catch (e) {
+            console.log(e);
+        }
+        finally {
+            setMetricLoading(false);
+        }
+    }, [dateRange]);
+    const chartConfig = chartData.reduce((config, item, index) => {
+        config[item.product] = {
+            label: item.product,
+            color: getRandomColor(barColors),
+        };
+        return config;
+    }, {});
+    useEffect(() => {
+        setDateRange(getCustomIntervalDates(metricRangeTypeSelectValue).range);
+    }, [metricRangeTypeSelectValue]);
+    useEffect(() => {
+        fetchData();
+    }, [channel, dateRange, selectedOrderStates]);
+    return (React.createElement(Card, { className: "flex h-full flex-col border-0 shadow-none" },
+        React.createElement(CardHeader, { className: "flex justify-between" },
+            React.createElement("div", { className: "flex flex-wrap items-start justify-between gap-2" },
+                React.createElement(CardTitle, { className: "text-lg" }, t("bestsellers")),
+                " ",
+                React.createElement("div", { className: "flex w-[240px] flex-col gap-2" },
+                    React.createElement(MetricsRangeSelect, { value: metricRangeTypeSelectValue, changeMetricInterval: setMetricRangeTypeSelectValue, loading: metricLoading, withoutCustom: true }),
+                    React.createElement(Select, { onValueChange: (value) => setShowData(value), value: showData, defaultValue: "BY_COUNT" },
+                        React.createElement(SelectTrigger, { className: "h-[30px] w-[240px] text-[13px]" },
+                            React.createElement(SelectValue, { placeholder: t("sortBy") })),
+                        React.createElement(SelectContent, null,
+                            React.createElement(SelectGroup, null,
+                                React.createElement(SelectItem, { value: "FIRST_FIVE" }, t("showFirstFive")),
+                                React.createElement(SelectItem, { value: "ALL" }, t("showAll")))))))),
+        React.createElement(Separator, { className: "mb-3" }),
+        React.createElement(CardContent, { className: "flex flex-1 items-center justify-center text-xs  " }, !chartData.length ? (React.createElement("div", { className: "flex flex-col items-center text-center" },
+            React.createElement(EmptyData, { text: t("emptyData") }))) : (React.createElement(ResponsiveContainer, { className: "transition-all", width: "100%", height: (showData === "FIRST_FIVE"
+                ? chartData.slice(0, 5).length
+                : chartData.length) * 50 },
+            React.createElement(BarChart, { data: showData === "FIRST_FIVE" ? chartData.slice(0, 5) : chartData, layout: "vertical" },
+                React.createElement(YAxis, { dataKey: "product", type: "category", tickLine: false, tickMargin: 10, axisLine: false, width: 180, tick: { fontSize: 12, fontSizeAdjust: 0.5 } }),
+                React.createElement(XAxis, { type: "number", hide: true }),
+                React.createElement(ChartTooltip, { wrapperStyle: { zIndex: 1000 }, cursor: false, content: (p) => (React.createElement(CustomBarChartTooltip, { currencyCode: currencyCode ?? CurrencyCode.PLN, chartProps: p })) }),
+                React.createElement(Bar, { minPointSize: 5, dataKey: "value", radius: 5, barSize: 40 }, chartData.map((entry, index) => (React.createElement(Cell, { key: `cell-${index}`, fill: chartConfig[entry.product].color }))))))))));
+};

package/dist/plugin-ui/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./OrdersWidget";
+export * from "./ProductsChartWidget";
+export * from "./CategoriesChartWidget";
+export * from "./LatestOrdersWidget";

package/dist/plugin-ui/components/index.js

@@ -0,0 +1,4 @@
+export * from "./OrdersWidget";
+export * from "./ProductsChartWidget";
+export * from "./CategoriesChartWidget";
+export * from "./LatestOrdersWidget";

package/dist/plugin-ui/components/shared/EmptyData.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface Props {
+    text?: string;
+}
+export declare const EmptyData: React.FC<Props>;
+export {};

package/dist/plugin-ui/components/shared/EmptyData.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { BarChart3 } from "lucide-react";
+export const EmptyData = ({ text }) => {
+    return (React.createElement("div", { className: "flex h-full flex-col items-center justify-center p-6" },
+        React.createElement("div", { className: "flex flex-col items-center" },
+            React.createElement(BarChart3, { size: 48, className: "mb-4" })),
+        React.createElement("div", { className: "text-lg" }, text)));
+};

package/dist/plugin-ui/components/shared/MetricsRangeSelect.d.ts

@@ -0,0 +1,10 @@
+import { MetricRangeType } from "../../zeus";
+import React from "react";
+interface MetricTypeSelectProps {
+    value?: MetricRangeType;
+    changeMetricInterval: (interval: MetricRangeType) => void;
+    loading: boolean;
+    withoutCustom?: boolean;
+}
+export declare const MetricsRangeSelect: React.FC<MetricTypeSelectProps>;
+export {};

package/dist/plugin-ui/components/shared/MetricsRangeSelect.js

@@ -0,0 +1,26 @@
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Skeleton, useTranslation, } from "@deenruv/react-ui-devkit";
+import { MetricRangeType } from "../../zeus";
+import React from "react";
+export const MetricsRangeSelect = ({ changeMetricInterval, value, loading, withoutCustom = false, }) => {
+    const { t } = useTranslation("dashboard-widgets-plugin");
+    return (React.createElement("div", { className: "relative w-full max-w-[240px] xl:w-[240px]" },
+        loading ? (React.createElement(Skeleton, { className: "absolute left-0 top-0 size-full" })) : null,
+        React.createElement(Select, { value: value, onValueChange: (value) => changeMetricInterval(value), defaultValue: MetricRangeType.ThisWeek },
+            React.createElement(SelectTrigger, { className: "h-[30px] w-full  text-[13px]" },
+                React.createElement(SelectValue, { placeholder: t("selectDataType") })),
+            React.createElement(SelectContent, { className: "max-h-none w-full" },
+                React.createElement(SelectGroup, null,
+                    React.createElement(SelectItem, { value: MetricRangeType.Today }, t("today")),
+                    React.createElement(SelectItem, { value: MetricRangeType.Yesterday }, t("yesterday")),
+                    React.createElement(SelectItem, { value: MetricRangeType.ThisWeek }, t("thisWeek")),
+                    React.createElement(SelectItem, { value: MetricRangeType.LastWeek }, t("lastWeek")),
+                    React.createElement(SelectItem, { value: MetricRangeType.ThisMonth }, t("thisMonth")),
+                    React.createElement(SelectItem, { value: MetricRangeType.LastMonth }, t("lastMonth")),
+                    React.createElement(SelectItem, { value: MetricRangeType.ThisYear }, t("thisYear")),
+                    React.createElement(SelectItem, { value: MetricRangeType.LastYear }, t("lastYear")),
+                    React.createElement(SelectItem, { value: MetricRangeType.FirstQuarter }, t("firstYearQuarterInterval")),
+                    React.createElement(SelectItem, { value: MetricRangeType.SecondQuarter }, t("secondYearQuarterInterval")),
+                    React.createElement(SelectItem, { value: MetricRangeType.ThirdQuarter }, t("thirdYearQuarterInterval")),
+                    React.createElement(SelectItem, { value: MetricRangeType.FourthQuarter }, t("fourthYearQuarterInterval")),
+                    !withoutCustom ? (React.createElement(SelectItem, { value: MetricRangeType.Custom }, t("customInterval"))) : null)))));
+};