@deenruv/dashboard-widgets-plugin 1.0.0

package/dist/plugin-server/zeus/typedDocumentNode.d.ts

@@ -0,0 +1,3 @@
+import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { ValueTypes, GenericOperation, OperationOptions, GraphQLTypes, InputType, ScalarDefinition, ThunderGraphQLOptions, ExtractVariables } from './';
+export declare const typedGql: <O extends "query" | "mutation", SCLR extends ScalarDefinition, R extends keyof ValueTypes = GenericOperation<O>>(operation: O, graphqlOptions?: ThunderGraphQLOptions<SCLR> | undefined) => <Z extends ValueTypes[R]>(o: Z & { [P in keyof Z]: P extends keyof ValueTypes[R] ? Z[P] : never; }, ops?: OperationOptions) => TypedDocumentNode<InputType<GraphQLTypes[R], Z, SCLR>, ExtractVariables<Z>>;

package/dist/plugin-server/zeus/typedDocumentNode.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.typedGql = void 0;
+const graphql_tag_1 = __importDefault(require("graphql-tag"));
+const _1 = require("./");
+const typedGql = (operation, graphqlOptions) => (o, ops) => {
+    const str = (0, _1.Zeus)(operation, o, {
+        operationOptions: ops,
+        scalars: graphqlOptions === null || graphqlOptions === void 0 ? void 0 : graphqlOptions.scalars,
+    });
+    return (0, graphql_tag_1.default)(str);
+};
+exports.typedGql = typedGql;

package/dist/plugin-ui/components/CategoriesChartWidget/dashCaseToSpaces.d.ts

@@ -0,0 +1 @@
+export declare function dashCaseToSpaces(input: string | undefined): string;

package/dist/plugin-ui/components/CategoriesChartWidget/dashCaseToSpaces.js

@@ -0,0 +1,6 @@
+export function dashCaseToSpaces(input) {
+    if (!input)
+        return "";
+    const spaced = input.replace(/-/g, " ");
+    return spaced.charAt(0).toUpperCase() + spaced.slice(1).toLowerCase();
+}

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

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

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

@@ -0,0 +1,100 @@
+import React from "react";
+import { Cell, Pie, PieChart } from "recharts";
+import { Card, CardContent, CardHeader, CardTitle, ChartContainer, ChartTooltip, ChartTooltipContent, Separator, useLazyQuery, useSettings, useTranslation, } from "@deenruv/react-ui-devkit";
+import { useCallback, useEffect, useState } from "react";
+import { ChartMetricType, MetricIntervalType } from "../../zeus";
+import { endOfToday, startOfToday } from "date-fns";
+import { PeriodSelect, Periods } from "../shared";
+import { dashCaseToSpaces } from "./dashCaseToSpaces";
+import { colors, EmptyData } from "../shared";
+import { CategoriesMetricQuery, ProductCollectionsQuery } from "../../graphql";
+export const CategoriesChartWidget = () => {
+    const { t } = useTranslation("dashboard-widgets-plugin");
+    const [chartData, setChartData] = useState([]);
+    const channel = useSettings((state) => state.selectedChannel);
+    const [fetchBetterMetrics] = useLazyQuery(CategoriesMetricQuery);
+    const [fetchProductCollections] = useLazyQuery(ProductCollectionsQuery);
+    const [selectedPeriod, setSelectedPeriod] = useState({
+        period: Periods.Today,
+        text: t("today"),
+        start: startOfToday(),
+        end: endOfToday(),
+    });
+    const fetchData = useCallback(async () => {
+        fetchBetterMetrics({
+            input: {
+                orderStates: [],
+                interval: MetricIntervalType.Day,
+                range: {
+                    start: selectedPeriod.start,
+                    end: selectedPeriod.end,
+                },
+                types: [ChartMetricType.OrderTotalProductsCount],
+            },
+        }).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,
+                        };
+                    }
+                });
+            });
+            fetchProductCollections({ in: Object.keys(salesTotals) }).then(({ products }) => {
+                const categoryCounts = {};
+                products?.items.forEach(({ collections }) => {
+                    collections
+                        .filter((c) => c.slug !== "wszystkie")
+                        .forEach((category) => {
+                        const categoryName = dashCaseToSpaces(category.slug.trim());
+                        if (categoryCounts[categoryName]) {
+                            categoryCounts[categoryName] += 1;
+                        }
+                        else {
+                            categoryCounts[categoryName] = 1;
+                        }
+                    });
+                });
+                const _chartData = Object.entries(categoryCounts)
+                    .map(([category, count]) => ({
+                    category,
+                    value: count,
+                }))
+                    .sort((a, b) => b.value - a.value)
+                    .slice(0, 5);
+                setChartData(_chartData);
+            });
+        });
+    }, [selectedPeriod]);
+    useEffect(() => {
+        fetchData();
+    }, [channel, selectedPeriod]);
+    const chartConfig = chartData.reduce((config, item, index) => {
+        config[item.category] = {
+            label: item.category,
+            color: colors[index],
+        };
+        return config;
+    }, {});
+    const handlePeriodChange = useCallback((periodData) => {
+        setSelectedPeriod(periodData);
+    }, []);
+    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: "-mb-px flex items-center gap-8" },
+                React.createElement(CardTitle, { className: "text-lg" }, t("categories")),
+                React.createElement(PeriodSelect, { selectedPeriod: selectedPeriod.period, onPeriodChange: handlePeriodChange }))),
+        React.createElement(Separator, { className: "mb-3" }),
+        React.createElement(CardContent, { className: "flex flex-1 items-center justify-center pb-0" }, !chartData.length ? (React.createElement("div", { className: "flex flex-col items-center text-center" },
+            React.createElement(EmptyData, { text: t("emptyData") }))) : (React.createElement(ChartContainer, { config: chartConfig, className: "[&_.recharts-pie-label-text]:fill-foreground mx-auto aspect-square max-h-[400px] pb-0", style: { height: `300px`, width: "100%" } },
+            React.createElement(PieChart, null,
+                React.createElement(ChartTooltip, { content: React.createElement(ChartTooltipContent, { hideLabel: true }) }),
+                React.createElement(Pie, { data: chartData, dataKey: "value", label: true, nameKey: "category" }, chartData.map((entry, index) => (React.createElement(Cell, { key: `cell-${index}`, fill: chartConfig[entry.category].color }))))))))));
+};

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

@@ -0,0 +1,4 @@
+import React from "react";
+type LatestOrdersProps = object;
+export declare const LatestOrdersWidget: React.FC<LatestOrdersProps>;
+export {};

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

@@ -0,0 +1,96 @@
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, EmptyState, PaymentMethodImage, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tooltip, TooltipContent, TooltipTrigger, Separator, OrderStateBadge, useQuery, useTranslation, Routes, priceFormatter, useWidgetsStore, useSettings, TableLabel, } from "@deenruv/react-ui-devkit";
+import { LatestOrdersQuery } from "../../graphql";
+import { flexRender, getCoreRowModel, useReactTable, } from "@tanstack/react-table";
+import { formatDistanceToNow } from "date-fns";
+import { pl } from "date-fns/locale/pl";
+import { ArrowRight, Hash, RefreshCw } from "lucide-react";
+import React, { useEffect, useState } from "react";
+import { NavLink, useNavigate } from "react-router-dom";
+export const LatestOrdersWidget = () => {
+    const { t } = useTranslation("dashboard-widgets-plugin");
+    const navigate = useNavigate();
+    const channel = useSettings((state) => state.selectedChannel);
+    const [isLoading, setIsLoading] = useState(false);
+    const language = useWidgetsStore((p) => p.context?.language);
+    const { data: latestOrdersData, runQuery: getOrders } = useQuery(LatestOrdersQuery);
+    const orders = latestOrdersData?.orders?.items || [];
+    useEffect(() => {
+        setIsLoading(true);
+        getOrders({
+            input: { channelId: channel?.id, first: 5, after: null },
+        }).finally(() => {
+            setIsLoading(false);
+        });
+    }, [channel]);
+    const columns = [
+        {
+            accessorKey: "id",
+            header: () => React.createElement(TableLabel, null, t("orders:table.id")),
+            cell: ({ row }) => React.createElement("span", null, row.original.id),
+        },
+        {
+            accessorKey: "payments",
+            header: () => React.createElement(TableLabel, null, t("dashboard:payment")),
+            cell: ({ row }) => {
+                const type = row.original.payments?.[0]?.method;
+                if (!type)
+                    return React.createElement(React.Fragment, null);
+                return React.createElement(PaymentMethodImage, { paymentType: type });
+            },
+        },
+        {
+            accessorKey: "code",
+            header: () => React.createElement(TableLabel, null, t("orders:table.code")),
+            cell: ({ row }) => (React.createElement(Tooltip, null,
+                React.createElement(TooltipTrigger, null,
+                    React.createElement(Badge, { variant: "outline", className: "flex w-full items-center justify-center", onClick: () => navigate(Routes.orders.to(row.original.id)) },
+                        React.createElement(Hash, { size: 16 }),
+                        React.createElement(ArrowRight, { className: "pl-1", size: 16 }))),
+                React.createElement(TooltipContent, null, row.original.code))),
+        },
+        {
+            accessorKey: "state",
+            header: () => React.createElement(TableLabel, null, t("orders:table.state")),
+            cell: ({ row }) => React.createElement(OrderStateBadge, { state: row.original.state }),
+        },
+        {
+            accessorKey: "totalWithTax",
+            header: () => React.createElement(TableLabel, null, t("orders:table.totalWithTax")),
+            cell: ({ row }) => (React.createElement("span", null, priceFormatter(row.original.totalWithTax, row.original.currencyCode))),
+        },
+        {
+            accessorKey: "createdAt",
+            header: () => React.createElement(TableLabel, null, t("orders:table.createdAt")),
+            cell: ({ row }) => (React.createElement("span", null, formatDistanceToNow(new Date(row.original.createdAt), {
+                locale: language === "pl" ? pl : undefined,
+                addSuffix: true,
+            }))),
+        },
+    ];
+    const table = useReactTable({
+        data: orders || [],
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+    });
+    return (React.createElement(Card, null,
+        React.createElement(CardHeader, null,
+            React.createElement("div", { className: "flex justify-between" },
+                React.createElement("div", { className: "flex gap-3" },
+                    React.createElement(CardTitle, { className: "text-lg" }, t("dashboard:latestOrders")),
+                    React.createElement(Button, { size: "icon", variant: "outline", className: "mb-px size-7", onClick: () => {
+                            setIsLoading(true);
+                            getOrders();
+                        } },
+                        React.createElement(RefreshCw, { size: 16, className: `transition-transform duration-500 ${isLoading ? "animate-spin" : ""}` }))),
+                React.createElement(NavLink, { to: Routes.orders.list },
+                    React.createElement(Button, { className: "relative top-2 -mt-3", variant: "ghost" }, t("dashboard:showAll"))))),
+        React.createElement(Separator, { className: "mb-3" }),
+        React.createElement(CardContent, null,
+            React.createElement(Table, null,
+                React.createElement(TableHeader, null, table.getHeaderGroups().map((headerGroup) => (React.createElement(TableRow, { key: headerGroup.id }, headerGroup.headers.map((header) => {
+                    return (React.createElement(TableHead, { key: header.id }, header.isPlaceholder
+                        ? null
+                        : flexRender(header.column.columnDef.header, header.getContext())));
+                }))))),
+                React.createElement(TableBody, null, table.getRowModel().rows?.length ? (table.getRowModel().rows.map((row) => (React.createElement(TableRow, { key: row.id, "data-state": row.getIsSelected() && "selected" }, row.getAllCells().map((cell) => (React.createElement(TableCell, { className: "py-4", key: cell.id }, flexRender(cell.column.columnDef.cell, cell.getContext())))))))) : (React.createElement(EmptyState, { columnsLength: columns.length, title: t("emptyDataTitle"), description: t("emptyData") })))))));
+};

package/dist/plugin-ui/components/LatestOrdersWidget/paymentMethod.d.ts

@@ -0,0 +1,6 @@
+export declare enum PaymentMethod {
+    Przelewy24 = "przelewy24",
+    Standard = "standard-payment",
+    Transfer = "przelew-bankowy",
+    OnDelivery = "gotowka-za-pobraniem"
+}

package/dist/plugin-ui/components/LatestOrdersWidget/paymentMethod.js

@@ -0,0 +1,7 @@
+export var PaymentMethod;
+(function (PaymentMethod) {
+    PaymentMethod["Przelewy24"] = "przelewy24";
+    PaymentMethod["Standard"] = "standard-payment";
+    PaymentMethod["Transfer"] = "przelew-bankowy";
+    PaymentMethod["OnDelivery"] = "gotowka-za-pobraniem";
+})(PaymentMethod || (PaymentMethod = {}));

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

@@ -0,0 +1,18 @@
+import { TooltipProps } from "recharts";
+import { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent";
+import React from "react";
+import { CurrencyCode } from "@deenruv/admin-types";
+interface CustomTooltipProps {
+    chartProps: TooltipProps<ValueType, NameType>;
+    language: string;
+    selectedAvailableProducts: {
+        id: string;
+        color: string;
+    }[];
+    shouldShowCompare: boolean;
+    valueStroke: string;
+    prevValueStroke: string;
+    currencyCode?: CurrencyCode;
+}
+export declare const CustomTooltip: React.FC<CustomTooltipProps>;
+export {};

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

@@ -0,0 +1,92 @@
+import { Card, CardContent, CardDescription, CardHeader, cn, useTranslation, } from "@deenruv/react-ui-devkit";
+import { ChartMetricType } from "../../zeus";
+import React from "react";
+import { CurrencyCode } from "@deenruv/admin-types";
+import { RatioBadge } from "./RatioBadge";
+import { calculatePercentage } from "../../utils";
+const metricTypeLabels = {
+    [ChartMetricType.AverageOrderValue]: "averageOrderValue",
+    [ChartMetricType.OrderCount]: "orderCount",
+    [ChartMetricType.OrderTotal]: "orderTotal",
+    [ChartMetricType.OrderTotalProductsCount]: "orderTotalProductsCount",
+};
+export const CustomTooltip = ({ chartProps, language, selectedAvailableProducts, shouldShowCompare, prevValueStroke, valueStroke, currencyCode, }) => {
+    const { t } = useTranslation("dashboard-widgets-plugin");
+    const payload = chartProps.payload?.[0]?.payload;
+    const value = payload?.value;
+    const prevValue = payload?.prevValue;
+    const additionalData = payload?.additionalData;
+    const metricType = payload?.type;
+    const labelKey = metricTypeLabels[metricType];
+    const currencyFormatter = new Intl.NumberFormat(language === "pl" ? "pl-PL" : "en-GB", {
+        style: "currency",
+        currency: currencyCode ?? CurrencyCode.PLN,
+    });
+    const formattedValue = metricType === ChartMetricType.AverageOrderValue ||
+        metricType === ChartMetricType.OrderTotal
+        ? currencyFormatter.format(value)
+        : value;
+    const formattedPrevValue = metricType === ChartMetricType.AverageOrderValue ||
+        metricType === ChartMetricType.OrderTotal
+        ? currencyFormatter.format(prevValue)
+        : prevValue;
+    return (React.createElement(Card, { className: "bg-muted flex flex-col" },
+        React.createElement(CardHeader, { className: "pb-2" },
+            React.createElement(CardDescription, { className: "border-muted-foreground flex items-center justify-between border-b pb-2" },
+                payload?.name,
+                shouldShowCompare ? (React.createElement(RatioBadge, { ratio: +calculatePercentage(value, prevValue).toFixed(2) })) : null),
+            React.createElement("div", { className: "flex flex-col gap-2" },
+                React.createElement("div", { className: "flex items-center gap-2  !text-xl" },
+                    shouldShowCompare ? (React.createElement("div", { className: "flex items-center pr-1" },
+                        React.createElement("span", { style: {
+                                background: valueStroke,
+                                display: "block",
+                                width: 14,
+                                height: 14,
+                                borderRadius: "100%",
+                            } }))) : null,
+                    React.createElement("span", null,
+                        t(labelKey),
+                        ": ",
+                        formattedValue)),
+                shouldShowCompare ? (React.createElement("div", { className: "!text-md flex items-center gap-2" },
+                    React.createElement("div", { className: "flex items-center pr-1" },
+                        React.createElement("span", { style: {
+                                background: prevValueStroke,
+                                display: "block",
+                                width: 14,
+                                height: 14,
+                                borderRadius: "100%",
+                            } })),
+                    React.createElement("span", null,
+                        t("previous"),
+                        ": ",
+                        formattedPrevValue))) : null)),
+        React.createElement(CardContent, null, additionalData
+            ?.filter((d) => selectedAvailableProducts?.length
+            ? selectedAvailableProducts?.some((sap) => sap.id === d.id)
+            : true)
+            ?.sort((a, b) => b.quantity - a.quantity)
+            ?.map((d) => {
+            const isSelected = selectedAvailableProducts.some((p) => p.id === d.id);
+            const color = selectedAvailableProducts.find((p) => p.id === d.id)?.color;
+            return (React.createElement("div", { key: d.id, className: "flex justify-between gap-4" },
+                React.createElement("div", { style: {
+                        color,
+                    }, className: cn("flex items-center gap-1 ", !isSelected && "text-muted-foreground") },
+                    isSelected ? (React.createElement("div", { className: "flex items-center pr-1" },
+                        React.createElement("span", { style: {
+                                background: color,
+                                display: "block",
+                                width: 14,
+                                height: 2,
+                            } }))) : null,
+                    React.createElement("span", null, d.name),
+                    React.createElement("span", { className: "opacity-70" },
+                        `( ${t("variantID")}: ${d.id} ) `,
+                        ":")),
+                React.createElement("span", { style: {
+                        color,
+                    } }, d.quantity)));
+        }))));
+};

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { GroupBy } from "../../types";
+interface GroupBySelectProps {
+    value?: GroupBy;
+    changeGroupBy: (groupBy: GroupBy) => void;
+}
+export declare const GroupBySelect: React.FC<GroupBySelectProps>;
+export {};

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

@@ -0,0 +1,17 @@
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, } from "@deenruv/react-ui-devkit";
+import React from "react";
+import { useTranslation } from "react-i18next";
+export const GroupBySelect = ({ changeGroupBy, value, }) => {
+    const { t } = useTranslation("dashboard-widgets-plugin", {
+        i18n: window.__DEENRUV_SETTINGS__.i18n,
+    });
+    return (React.createElement(Select, { value: value, onValueChange: (value) => changeGroupBy(value), defaultValue: "day" },
+        React.createElement(SelectTrigger, { className: "h-[30px] w-full  text-[13px]" },
+            React.createElement(SelectValue, { placeholder: t("groupBy") })),
+        React.createElement(SelectContent, { className: "max-h-none w-full" },
+            React.createElement(SelectGroup, null,
+                React.createElement(SelectItem, { value: "day" }, t("byDay")),
+                React.createElement(SelectItem, { value: "week" }, t("byWeek")),
+                React.createElement(SelectItem, { value: "quarter" }, t("byQuarter")),
+                React.createElement(SelectItem, { value: "month" }, t("byMonth"))))));
+};

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

@@ -0,0 +1,9 @@
+import React from "react";
+interface MetricsCustomDatesProps {
+    startDate: Date | undefined;
+    endDate: Date | undefined;
+    setDate: (date: Date | undefined, key: "start" | "end") => void;
+    isVisible: boolean;
+}
+export declare const MetricsCustomDates: React.FC<MetricsCustomDatesProps>;
+export {};

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

@@ -0,0 +1,27 @@
+import { Button, Calendar, cn, Popover, PopoverContent, PopoverTrigger, } from "@deenruv/react-ui-devkit";
+import { endOfDay, format, startOfDay } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import React from "react";
+import { useTranslation } from "react-i18next";
+export const MetricsCustomDates = ({ endDate, startDate, setDate, isVisible, }) => {
+    const { t } = useTranslation("dashboard-widgets-plugin", {
+        i18n: window.__DEENRUV_SETTINGS__.i18n,
+    });
+    if (!isVisible)
+        return null;
+    return (React.createElement("div", { className: "!mt-0 flex gap-2" },
+        React.createElement(Popover, null,
+            React.createElement(PopoverTrigger, { asChild: true },
+                React.createElement(Button, { variant: "outline", className: cn("h-[30px] w-full max-w-[240px] justify-start text-left text-[13px] font-normal", !startDate && "text-muted-foreground") },
+                    React.createElement(CalendarIcon, { className: "mr-2 size-4" }),
+                    startDate ? (format(startDate, "PPP")) : (React.createElement("span", null, t("chooseStartDate"))))),
+            React.createElement(PopoverContent, { className: "w-auto p-0" },
+                React.createElement(Calendar, { mode: "single", selected: startDate, onSelect: (e) => setDate(e ? startOfDay(e) : e, "start"), initialFocus: true }))),
+        React.createElement(Popover, null,
+            React.createElement(PopoverTrigger, { asChild: true },
+                React.createElement(Button, { variant: "outline", className: cn("h-[30px] w-full max-w-[240px] justify-start text-left text-[13px] font-normal", !endDate && "text-muted-foreground") },
+                    React.createElement(CalendarIcon, { className: "mr-2 size-4" }),
+                    endDate ? (format(endDate, "PPP")) : (React.createElement("span", null, t("chooseEndDate"))))),
+            React.createElement(PopoverContent, { className: "w-auto p-0" },
+                React.createElement(Calendar, { mode: "single", selected: endDate, onSelect: (e) => setDate(e ? endOfDay(e) : e, "end"), initialFocus: true })))));
+};

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { ChartMetricType } from "../../zeus";
+interface MetricTypeSelectProps {
+    changeMetricType: (type: ChartMetricType) => void;
+    metricType: ChartMetricType;
+    loading: boolean;
+}
+export declare const MetricTypeSelect: React.FC<MetricTypeSelectProps>;
+export {};

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { ChartMetricType } from "../../zeus";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Skeleton, useTranslation, } from "@deenruv/react-ui-devkit";
+export const MetricTypeSelect = ({ changeMetricType, metricType, loading, }) => {
+    const { t } = useTranslation("dashboard-widgets-plugin");
+    return (React.createElement("div", { className: "relative w-full max-w-[240px]" },
+        loading ? (React.createElement(Skeleton, { className: "absolute left-0 top-0 size-full" })) : null,
+        React.createElement(Select, { value: metricType, onValueChange: (value) => changeMetricType(value), defaultValue: ChartMetricType.OrderTotal },
+            React.createElement(SelectTrigger, { className: "text-[13px]" },
+                React.createElement(SelectValue, { placeholder: t("selectDataType") })),
+            React.createElement(SelectContent, { className: "w-full" },
+                React.createElement(SelectGroup, null,
+                    React.createElement(SelectItem, { value: ChartMetricType.AverageOrderValue }, t("averageOrderValue")),
+                    React.createElement(SelectItem, { value: ChartMetricType.OrderCount }, t("orderCount")),
+                    React.createElement(SelectItem, { value: ChartMetricType.OrderTotal }, t("orderTotal")),
+                    React.createElement(SelectItem, { value: ChartMetricType.OrderTotalProductsCount }, t("orderTotalProductsCount")))))));
+};

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { ChartMetricType } from "../../zeus";
+interface ChartProps {
+    data: {
+        [key: string]: any;
+        name: string;
+        value?: number;
+        type: ChartMetricType;
+    }[];
+    language: string;
+    options?: {
+        colorFrom?: string;
+        colorTo?: string;
+        stroke?: string;
+    };
+    selectedAvailableProducts: {
+        id: string;
+        color: string;
+    }[];
+    metricType: ChartMetricType;
+    shouldShowCompare: boolean;
+}
+export declare const OrdersChart: React.FC<ChartProps>;
+export {};

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

@@ -0,0 +1,46 @@
+import { Area, CartesianGrid, ComposedChart, Line, XAxis, YAxis, } from "recharts";
+import React, { useMemo } from "react";
+import { ChartMetricType } from "../../zeus";
+import { camelCaseToSpaces, priceFormatter, useSettings, useWidgetItem, } from "@deenruv/react-ui-devkit";
+import { CustomTooltip } from "./CustomTooltip";
+import { ChartContainer, ChartTooltip, } from "@deenruv/react-ui-devkit";
+import { CurrencyCode } from "@deenruv/admin-types";
+const HEIGHT = 300;
+export const OrdersChart = ({ data, language, selectedAvailableProducts, metricType, options: _options, shouldShowCompare, }) => {
+    const chartConfig = useMemo(() => {
+        return { value: { label: camelCaseToSpaces(data[0]?.type) } };
+    }, [data]);
+    const currencyCode = useSettings((p) => p.selectedChannel?.currencyCode);
+    const { plugin } = useWidgetItem();
+    // @ts-expect-error: for now we dont have types, we now that this is working
+    const options = plugin?.config.options
+        ?.horizontalChartColors || {
+        colorFrom: `#4338ca`,
+        colorTo: `#6366f1`,
+        stroke: `#6366f1`,
+    };
+    return (React.createElement(ChartContainer, { config: chartConfig, style: { height: `${HEIGHT}px`, width: "100%" } },
+        React.createElement(ComposedChart, { height: HEIGHT, accessibilityLayer: true, data: data, margin: {
+                left: 62,
+            } },
+            React.createElement(CartesianGrid, { vertical: false }),
+            React.createElement(XAxis, { dataKey: "name", tickLine: false, axisLine: false, tickMargin: 12 }),
+            React.createElement(YAxis, { tickLine: false, axisLine: false, tickMargin: 4, tickFormatter: (value) => metricType === ChartMetricType.OrderCount ||
+                    metricType === ChartMetricType.OrderTotalProductsCount
+                    ? value
+                    : priceFormatter((value ?? 0) * 100, currencyCode ?? CurrencyCode.PLN) }),
+            React.createElement(ChartTooltip, { wrapperStyle: { zIndex: 1000 }, cursor: false, content: (p) => (React.createElement(CustomTooltip, { currencyCode: currencyCode, valueStroke: options.stroke, prevValueStroke: "#82FF9E", shouldShowCompare: shouldShowCompare, selectedAvailableProducts: selectedAvailableProducts, chartProps: p, language: language })) }),
+            React.createElement("defs", null,
+                React.createElement("linearGradient", { id: "fill", x1: "0", y1: "0", x2: "0", y2: "1" },
+                    React.createElement("stop", { offset: "0%", stopColor: options.colorFrom, stopOpacity: 0.9 }),
+                    React.createElement("stop", { offset: "100%", stopColor: options.colorTo, stopOpacity: 0.2 })),
+                React.createElement("linearGradient", { id: "fillPrev", x1: "0", y1: "0", x2: "0", y2: "1" },
+                    React.createElement("stop", { offset: "5%", stopColor: "#82FF9E", stopOpacity: 0.5 }),
+                    React.createElement("stop", { offset: "95%", stopColor: "#82FF9E", stopOpacity: 0 }))),
+            " ",
+            shouldShowCompare ? (React.createElement(Area, { dataKey: selectedAvailableProducts.length ? "no-value" : "prevValue", strokeWidth: 0.1, type: "monotone", fill: "url(#fillPrev)", fillOpacity: 0.4, stroke: "#82FF9E", stackId: "a" })) : null,
+            React.createElement(Area, { dataKey: selectedAvailableProducts.length ? "no-value" : "value", type: "monotone", fill: "url(#fill)", fillOpacity: shouldShowCompare ? 0.6 : 0.4, stroke: options.stroke, stackId: "b" }),
+            selectedAvailableProducts.length
+                ? selectedAvailableProducts.map((selectedProduct) => (React.createElement(Line, { type: "monotone", dot: false, stroke: selectedProduct.color, key: selectedProduct.id, dataKey: selectedProduct.id })))
+                : null)));
+};

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { DateRangeType } from "../../types";
+interface OrdersSummaryTileProps {
+    net?: boolean;
+    setNet: (net: boolean) => void;
+    dateRange: {
+        range: DateRangeType;
+        prevRange: DateRangeType;
+    };
+    orderStates: string[];
+}
+export declare const OrdersSummaryTile: React.FC<OrdersSummaryTileProps>;
+export {};