@vendure/dashboard 3.2.0

package/src/lib/framework/component-registry/dynamic-component.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { COMPONENT_REGISTRY, useComponentRegistry } from "./component-registry.js";
+
+export type DisplayComponentProps<
+    T extends keyof (typeof COMPONENT_REGISTRY)['dataDisplay'] | string,
+> = {
+    id: T;
+    value: any;
+    // rest of the props are passed to the component
+    [key: string]: any;
+}
+
+
+export type InputComponentProps<
+    T extends keyof (typeof COMPONENT_REGISTRY)['dataInput'] | string,
+> = {
+    id: T;
+    value: any;
+    // rest of the props are passed to the component
+    [key: string]: any;
+}
+
+/**
+ * @description
+ * This component is used to delegate the rendering of a component to the component registry.
+ * 
+ * @example
+ * ```ts
+ * <Delegate component="money.display.default" value={100} />
+ * ```
+ * 
+ * @returns 
+ */
+export function DisplayComponent<
+    T extends keyof (typeof COMPONENT_REGISTRY)['dataDisplay'] | string,
+>(props: DisplayComponentProps<T>): React.ReactNode {   
+    const { getDisplayComponent } = useComponentRegistry();
+    const Component = getDisplayComponent(props.id);
+    if (!Component) {
+        throw new Error(`Component with id ${props.id} not found`);
+    }
+    const { value, ...rest } = props;
+    return <Component value={value} {...rest} />;
+}
+
+export function InputComponent<
+    T extends keyof (typeof COMPONENT_REGISTRY)['dataInput'] | string,
+>(props: InputComponentProps<T>): React.ReactNode {
+    const { getInputComponent } = useComponentRegistry();
+    const Component = getInputComponent(props.id);
+    if (!Component) {
+        throw new Error(`Component with id ${props.id} not found`);
+    }
+    const { value, onChange, ...rest } = props;
+    return <Component value={value} onChange={onChange} {...rest} />;
+}       
+
+

package/src/lib/framework/dashboard-widget/base-widget.tsx

@@ -0,0 +1,97 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card.js';
+import { cn } from '@/lib/utils.js';
+import { Trans } from '@/lib/trans.js';
+import { PropsWithChildren, useRef, useEffect, useState, createContext, useContext } from 'react';
+
+type WidgetDimensions = {
+    width: number;
+    height: number;
+};
+
+export const WidgetContentContext = createContext<WidgetDimensions>({ width: 0, height: 0 });
+
+export const useWidgetDimensions = () => {
+    const context = useContext(WidgetContentContext);
+    if (!context) {
+        throw new Error('useWidgetDimensions must be used within a DashboardBaseWidget');
+    }
+    return context;
+};
+
+export type DashboardBaseWidgetProps = PropsWithChildren<{
+    id: string;
+    title?: string;
+    description?: string;
+    config?: Record<string, unknown>;
+    actions?: React.ReactNode;
+}>;
+
+export function DashboardBaseWidget({
+    id,
+    config,
+    children,
+    title,
+    description,
+    actions,
+}: DashboardBaseWidgetProps) {
+    const headerRef = useRef<HTMLDivElement>(null);
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const contentRef = useRef<HTMLDivElement>(null);
+    const [dimensions, setDimensions] = useState<WidgetDimensions>({ width: 0, height: 0 });
+
+    useEffect(() => {
+        const updateDimensions = () => {
+            if (wrapperRef.current && contentRef.current) {
+                const contentStyles = window.getComputedStyle(contentRef.current);
+                const paddingTop = parseFloat(contentStyles.paddingTop);
+                const paddingBottom = parseFloat(contentStyles.paddingBottom);
+                const paddingLeft = parseFloat(contentStyles.paddingLeft);
+                const paddingRight = parseFloat(contentStyles.paddingRight);
+
+                const headerHeight = headerRef.current?.offsetHeight ?? 0;
+
+                setDimensions({
+                    width: wrapperRef.current.offsetWidth - paddingLeft - paddingRight,
+                    height: wrapperRef.current.offsetHeight - paddingTop - paddingBottom - headerHeight,
+                });
+            }
+        };
+
+        updateDimensions();
+        const observer = new ResizeObserver(updateDimensions);
+        if (wrapperRef.current) {
+            observer.observe(wrapperRef.current);
+        }
+
+        return () => observer.disconnect();
+    }, []);
+
+    return (
+        <Card
+            ref={wrapperRef}
+            key={`dashboard-widget-${id}`}
+            className={cn('h-full w-full flex flex-col rounded-md', !title && 'pt-6')}
+        >
+            {title && (
+                <CardHeader
+                    ref={headerRef}
+                    className={cn(
+                        'flex flex-row items-center',
+                        actions ? 'justify-between' : 'justify-start',
+                    )}
+                >
+                    <div>
+                        <CardTitle>
+                            <Trans>{title}</Trans>
+                        </CardTitle>
+                        {description && <CardDescription>{description}</CardDescription>}
+                    </div>
+                    {actions && <div className="flex items-center gap-2">{actions}</div>}
+                </CardHeader>
+            )}
+            <CardContent ref={contentRef} className="grow">
+                <WidgetContentContext.Provider value={dimensions}>{children}</WidgetContentContext.Provider>
+            </CardContent>
+        </Card>
+    );
+}

package/src/lib/framework/dashboard-widget/latest-orders-widget/index.tsx

@@ -0,0 +1,96 @@
+import { useQuery } from '@tanstack/react-query';
+import { latestOrdersQuery } from './latest-orders-widget.graphql.js';
+import { DashboardBaseWidget } from '../base-widget.js';
+import { PaginatedListDataTable, addCustomFields, useLocalFormat } from '@/index.js';
+import { ColumnFiltersState } from '@tanstack/react-table';
+import { useState } from 'react';
+import { SortingState } from '@tanstack/react-table';
+import { Link } from '@tanstack/react-router';
+import { formatRelative } from 'date-fns';
+import { Button } from '@/components/ui/button.js';
+export const WIDGET_ID = 'latest-orders-widget';
+
+export function LatestOrdersWidget() {
+    const [sorting, setSorting] = useState<SortingState>([
+        {
+            id: 'orderPlacedAt',
+            desc: true,
+        },
+    ]);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const [filters, setFilters] = useState<ColumnFiltersState>([]);
+    const { formatCurrency } = useLocalFormat();
+
+    return (
+        <DashboardBaseWidget id={WIDGET_ID} title="Latest Orders" description="Your latest orders">
+            <PaginatedListDataTable
+                disableViewOptions
+                page={page}
+                transformVariables={variables => ({
+                    ...variables,
+                    options: {
+                        ...variables.options,
+                        filter: {
+                            active: {
+                                eq: false,
+                            },
+                            state: {
+                                notIn: ['Cancelled', 'Draft'],
+                            },
+                        },
+                    },
+                })}
+                customizeColumns={{
+                    code: {
+                        header: 'Code',
+                        cell: ({ row }) => {
+                            return (
+                                <Button variant="ghost" asChild>
+                                    <Link to={`/orders/${row.original.id}`}>{row.original.code}</Link>
+                                </Button>
+                            );
+                        },
+                    },
+                    orderPlacedAt: {
+                        header: 'Placed At',
+                        cell: ({ row }) => {
+                            return (
+                                <span>
+                                    {formatRelative(row.original.orderPlacedAt ?? new Date(), new Date())}
+                                </span>
+                            );
+                        },
+                    },
+                    total: {
+                        header: 'Total',
+                        cell: ({ row }) => {
+                            return (
+                                <span>{formatCurrency(row.original.total, row.original.currencyCode)}</span>
+                            );
+                        },
+                    },
+                }}
+                itemsPerPage={pageSize}
+                sorting={sorting}
+                columnFilters={filters}
+                listQuery={latestOrdersQuery}
+                onPageChange={(_, page, pageSize) => {
+                    setPage(page);
+                    setPageSize(pageSize);
+                }}
+                onSortChange={(_, sorting) => {
+                    setSorting(sorting);
+                }}
+                onFilterChange={(_, filters) => {
+                    setFilters(filters);
+                }}
+                defaultVisibility={{
+                    code: true,
+                    total: true,
+                    orderPlacedAt: true,
+                }}
+            />
+        </DashboardBaseWidget>
+    );
+}

package/src/lib/framework/dashboard-widget/latest-orders-widget/latest-orders-widget.graphql.ts

@@ -0,0 +1,35 @@
+import { graphql } from '@/graphql/graphql.js';
+
+export const latestOrderItemFragment = graphql(`
+    fragment LatestOrderItem on Order {
+        id
+        createdAt
+        updatedAt
+        type
+        orderPlacedAt
+        code
+        state
+        total
+        totalWithTax
+        currencyCode
+        customer {
+            id
+            firstName
+            lastName
+        }
+    }
+`);
+
+export const latestOrdersQuery = graphql(
+    `
+        query GetLatestOrders($options: OrderListOptions) {
+            orders(options: $options) {
+                items {
+                    ...LatestOrderItem
+                }
+                totalItems
+            }
+        }
+    `,
+    [latestOrderItemFragment],
+);

package/src/lib/framework/dashboard-widget/metrics-widget/chart.tsx

@@ -0,0 +1,24 @@
+import { Area, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
+
+import { AreaChart } from 'recharts';
+import { useWidgetDimensions } from '../base-widget.js';
+
+export function MetricsChart({
+    chartData,
+    formatValue,
+}: {
+    chartData: any[];
+    formatValue: (value: any) => string;
+}) {
+    const { width, height } = useWidgetDimensions();
+
+    return (
+        <AreaChart width={width} height={height} data={chartData}>
+            <CartesianGrid strokeDasharray="4 4" stroke="var(--color-border)" />
+            <XAxis className="text-xs" color="var(--color-foreground)" dataKey="name" interval={2} />
+            <YAxis className="text-xs" color="var(--color-foreground)" tickFormatter={formatValue} />
+            <Tooltip formatter={formatValue} />
+            <Area type="monotone" dataKey="sales" stroke="var(--color-brand)" strokeWidth={2} />
+        </AreaChart>
+    );
+}

package/src/lib/framework/dashboard-widget/metrics-widget/index.tsx

@@ -0,0 +1,82 @@
+import { api } from '@/graphql/api.js';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+import { Area, AreaChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
+import { DashboardBaseWidget, useWidgetDimensions } from '../base-widget.js';
+import { orderChartDataQuery } from './metrics-widget.graphql.js';
+import { MetricsChart } from './chart.js';
+import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { useChannel } from '@/hooks/use-channel.js';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs.js';
+
+enum DATA_TYPES {
+    OrderCount = 'OrderCount',
+    OrderTotal = 'OrderTotal',
+    AverageOrderValue = 'AverageOrderValue',
+}
+
+export function MetricsWidget() {
+    const { formatDate, formatCurrency } = useLocalFormat();
+    const { activeChannel } = useChannel();
+    const [dataType, setDataType] = useState<DATA_TYPES>(DATA_TYPES.OrderTotal);
+
+    const { data, error } = useQuery({
+        queryKey: ['dashboard-order-metrics', dataType],
+        queryFn: () => {
+            return api.query(orderChartDataQuery, {
+                types: [dataType],
+                refresh: true,
+            });
+        },
+    });
+
+    const chartData = useMemo(() => {
+        const entry = data?.metricSummary.at(0);
+        if (!entry) {
+            return undefined;
+        }
+
+        const { interval, type, entries } = entry;
+
+        const values = entries.map(({ label, value }) => ({
+            name: formatDate(label, { month: 'short', day: 'numeric' }),
+            sales: value,
+        }));
+
+        return {
+            values,
+            interval,
+            type,
+        };
+    }, [data]);
+
+    return (
+        <DashboardBaseWidget
+            id="metrics-widget"
+            title="Metrics"
+            description="Metrics widget"
+            actions={
+                <Tabs defaultValue={dataType} onValueChange={value => setDataType(value as DATA_TYPES)}>
+                    <TabsList>
+                        <TabsTrigger value={DATA_TYPES.OrderCount}>Order Count</TabsTrigger>
+                        <TabsTrigger value={DATA_TYPES.OrderTotal}>Order Total</TabsTrigger>
+                        <TabsTrigger value={DATA_TYPES.AverageOrderValue}>Average Order Value</TabsTrigger>
+                    </TabsList>
+                </Tabs>
+            }
+        >
+            {chartData && (
+                <MetricsChart
+                    formatValue={value => {
+                        if (dataType === DATA_TYPES.OrderCount) {
+                            return value;
+                        }
+
+                        return formatCurrency(value, activeChannel?.defaultCurrencyCode ?? 'USD', 0);
+                    }}
+                    chartData={chartData.values}
+                />
+            )}
+        </DashboardBaseWidget>
+    );
+}

package/src/lib/framework/dashboard-widget/metrics-widget/metrics-widget.graphql.ts

@@ -0,0 +1,14 @@
+import { graphql } from '@/graphql/graphql.js';
+
+export const orderChartDataQuery = graphql(`
+    query GetOrderChartData($refresh: Boolean, $types: [MetricType!]!) {
+        metricSummary(input: { interval: Daily, types: $types, refresh: $refresh }) {
+            interval
+            type
+            entries {
+                label
+                value
+            }
+        }
+    }
+`);

package/src/lib/framework/dashboard-widget/orders-summary/index.tsx

@@ -0,0 +1,167 @@
+import { useQuery } from '@tanstack/react-query';
+import { DashboardBaseWidget } from '../base-widget.js';
+import { orderSummaryQuery } from './order-summary-widget.graphql.js';
+import { api } from '@/graphql/api.js';
+import { useMemo, useState } from 'react';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs.js';
+import { useChannel, useLocalFormat } from '@/index.js';
+import { startOfDay, endOfDay, subDays, subMonths, startOfMonth, endOfMonth } from 'date-fns';
+import { AnimatedCurrency, AnimatedNumber } from '@/components/shared/animated-number.js';
+
+const WIDGET_ID = 'orders-summary-widget';
+
+enum Range {
+    Today = 'today',
+    Yesterday = 'yesterday',
+    ThisWeek = 'thisWeek',
+    ThisMonth = 'thisMonth',
+}
+
+interface PercentageChangeProps {
+    value: number;
+}
+
+function PercentageChange({ value }: PercentageChangeProps) {
+    const isZero = value === 0;
+    const isPositive = value > 0;
+    const colorClass = isZero ? 'text-muted-foreground' : isPositive ? 'text-success' : 'text-destructive';
+    const arrow = isZero ? null : isPositive ? '↑' : '↓';
+
+    return (
+        <p className={`text-sm ${colorClass}`}>
+            {arrow} <AnimatedNumber value={Math.abs(value)} />%
+        </p>
+    );
+}
+
+export function OrdersSummaryWidget() {
+    const [range, setRange] = useState<Range>(Range.Today);
+    const { formatCurrency } = useLocalFormat();
+    const { activeChannel } = useChannel();
+
+    const variables = useMemo(() => {
+        const now = new Date();
+
+        switch (range) {
+            case Range.Today: {
+                const today = now;
+                const yesterday = subDays(now, 1);
+
+                return {
+                    start: startOfDay(today).toISOString(),
+                    end: endOfDay(today).toISOString(),
+                    previousStart: startOfDay(yesterday).toISOString(),
+                    previousEnd: endOfDay(yesterday).toISOString(),
+                };
+            }
+            case Range.Yesterday: {
+                const yesterday = subDays(now, 1);
+                const dayBeforeYesterday = subDays(now, 2);
+
+                return {
+                    start: startOfDay(yesterday).toISOString(),
+                    end: endOfDay(yesterday).toISOString(),
+                    previousStart: startOfDay(dayBeforeYesterday).toISOString(),
+                    previousEnd: endOfDay(dayBeforeYesterday).toISOString(),
+                };
+            }
+            case Range.ThisWeek: {
+                const today = now;
+                const sixDaysAgo = subDays(now, 6);
+                const sevenDaysAgo = subDays(now, 7);
+                const thirteenDaysAgo = subDays(now, 13);
+
+                return {
+                    start: startOfDay(sixDaysAgo).toISOString(),
+                    end: endOfDay(today).toISOString(),
+                    previousStart: startOfDay(thirteenDaysAgo).toISOString(),
+                    previousEnd: endOfDay(sevenDaysAgo).toISOString(),
+                };
+            }
+            case Range.ThisMonth: {
+                const lastMonth = subMonths(now, 1);
+                const twoMonthsAgo = subMonths(now, 2);
+
+                return {
+                    start: startOfMonth(lastMonth).toISOString(),
+                    end: endOfMonth(lastMonth).toISOString(),
+                    previousStart: startOfMonth(twoMonthsAgo).toISOString(),
+                    previousEnd: endOfMonth(twoMonthsAgo).toISOString(),
+                };
+            }
+        }
+    }, [range]);
+
+    const { data } = useQuery({
+        queryKey: ['orders-summary', range],
+        queryFn: () =>
+            api.query(orderSummaryQuery, {
+                start: variables.start,
+                end: variables.end,
+            }),
+    });
+
+    const { data: previousData } = useQuery({
+        queryKey: ['orders-summary', 'previous', range],
+        queryFn: () =>
+            api.query(orderSummaryQuery, {
+                start: variables.previousStart,
+                end: variables.previousEnd,
+            }),
+    });
+
+    const calculatePercentChange = (current: number, previous: number) => {
+        if (previous === 0) return 0;
+        return ((current - previous) / previous) * 100;
+    };
+
+    const currentTotalOrders = data?.orders.totalItems ?? 0;
+    const previousTotalOrders = previousData?.orders.totalItems ?? 0;
+    const currentRevenue = data?.orders.items.reduce((acc, order) => acc + order.totalWithTax, 0) ?? 0;
+    const previousRevenue =
+        previousData?.orders.items.reduce((acc, order) => acc + order.totalWithTax, 0) ?? 0;
+
+    const orderChange = calculatePercentChange(currentTotalOrders, previousTotalOrders);
+    const revenueChange = calculatePercentChange(currentRevenue, previousRevenue);
+
+    return (
+        <DashboardBaseWidget
+            id={WIDGET_ID}
+            title="Orders Summary"
+            description="Your orders summary"
+            actions={
+                <Tabs defaultValue={range} onValueChange={value => setRange(value as Range)}>
+                    <TabsList>
+                        <TabsTrigger value={Range.Today}>Today</TabsTrigger>
+                        <TabsTrigger value={Range.Yesterday}>Yesterday</TabsTrigger>
+                        <TabsTrigger value={Range.ThisWeek}>This Week</TabsTrigger>
+                        <TabsTrigger value={Range.ThisMonth}>This Month</TabsTrigger>
+                    </TabsList>
+                </Tabs>
+            }
+        >
+            <div className="flex flex-col gap-4 items-center justify-center text-center">
+                <div className="flex flex-col gap-2">
+                    <p className="text-lg text-muted-foreground">Total Orders</p>
+                    <p className="text-3xl font-semibold">
+                        <AnimatedNumber
+                            animationConfig={{ mass: 0.5, stiffness: 90, damping: 10 }}
+                            value={currentTotalOrders}
+                        />
+                    </p>
+                    <PercentageChange value={orderChange} />
+                </div>
+                <div className="flex flex-col gap-2">
+                    <p className="text-lg text-muted-foreground">Total Revenue</p>
+                    <p className="text-3xl font-semibold">
+                        <AnimatedCurrency
+                            animationConfig={{ mass: 0.2, stiffness: 90, damping: 10 }}
+                            value={currentRevenue}
+                        />
+                    </p>
+                    <PercentageChange value={revenueChange} />
+                </div>
+            </div>
+        </DashboardBaseWidget>
+    );
+}

package/src/lib/framework/dashboard-widget/orders-summary/order-summary-widget.graphql.ts

@@ -0,0 +1,14 @@
+import { graphql } from '@/graphql/graphql.js';
+
+export const orderSummaryQuery = graphql(`
+    query GetOrderSummary($start: DateTime!, $end: DateTime!) {
+        orders(options: { filter: { orderPlacedAt: { between: { start: $start, end: $end } } } }) {
+            totalItems
+            items {
+                id
+                totalWithTax
+                currencyCode
+            }
+        }
+    }
+`);

package/src/lib/framework/dashboard-widget/types.ts

@@ -0,0 +1,22 @@
+import { DashboardBaseWidgetProps } from './base-widget.js';
+
+export type DashboardWidgetInstance = {
+    id: string;
+    widgetId: string;
+    layout: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    };
+    config?: Record<string, unknown>;
+};
+
+export type DashboardWidgetDefinition = {
+    id: string;
+    name: string;
+    component: React.ComponentType<DashboardBaseWidgetProps>;
+    defaultSize: { w: number; h: number; x?: number; y?: number };
+    minSize?: { w: number; h: number };
+    maxSize?: { w: number; h: number };
+};

package/src/lib/framework/dashboard-widget/widget-extensions.tsx

@@ -0,0 +1,19 @@
+import { DashboardWidgetDefinition } from './types.js';
+import { globalRegistry } from '../registry/global-registry.js';
+
+globalRegistry.register('dashboardWidgetRegistry', new Map<string, DashboardWidgetDefinition>());
+
+export function registerDashboardWidget(widget: DashboardWidgetDefinition) {
+    globalRegistry.set('dashboardWidgetRegistry', map => {
+        map.set(widget.id, widget);
+        return map;
+    });
+}
+
+export function getDashboardWidgetRegistry() {
+    return globalRegistry.get('dashboardWidgetRegistry');
+}
+
+export function getDashboardWidget(id: string) {
+    return globalRegistry.get('dashboardWidgetRegistry').get(id);
+}