@vendure/dashboard 3.4.3-master-202509260228 → 3.5.0-minor-202510012036

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

@@ -6,16 +6,20 @@ import {
 } from '@/vdb/components/shared/table-cell/order-table-cell-components.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { useLingui } from '@lingui/react/macro';
 import { Link } from '@tanstack/react-router';
 import { ColumnFiltersState, SortingState } from '@tanstack/react-table';
 import { formatRelative } from 'date-fns';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { DashboardBaseWidget } from '../base-widget.js';
+import { useWidgetFilters } from '../widget-filters-context.js';
 import { latestOrdersQuery } from './latest-orders-widget.graphql.js';
 
 export const WIDGET_ID = 'latest-orders-widget';
 
 export function LatestOrdersWidget() {
+    const { t } = useLingui();
+    const { dateRange } = useWidgetFilters();
     const [sorting, setSorting] = useState<SortingState>([
         {
             id: 'orderPlacedAt',
@@ -24,11 +28,36 @@ export function LatestOrdersWidget() {
     ]);
     const [page, setPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);
-    const [filters, setFilters] = useState<ColumnFiltersState>([]);
+    const [filters, setFilters] = useState<ColumnFiltersState>([
+        {
+            id: 'orderPlacedAt',
+            value: {
+                between: {
+                    start: dateRange.from.toISOString(),
+                    end: dateRange.to.toISOString(),
+                },
+            },
+        },
+    ]);
     const { formatCurrency } = useLocalFormat();
 
+    // Update filters when date range changes
+    useEffect(() => {
+        setFilters([
+            {
+                id: 'orderPlacedAt',
+                value: {
+                    between: {
+                        start: dateRange.from.toISOString(),
+                        end: dateRange.to.toISOString(),
+                    },
+                },
+            },
+        ]);
+    }, [dateRange]);
+
     return (
-        <DashboardBaseWidget id={WIDGET_ID} title="Latest Orders" description="Your latest orders">
+        <DashboardBaseWidget id={WIDGET_ID} title={t`Latest Orders`} description={t`Your latest orders`}>
             <PaginatedListDataTable
                 page={page}
                 transformVariables={variables => ({
@@ -48,7 +77,7 @@ export function LatestOrdersWidget() {
                 })}
                 customizeColumns={{
                     code: {
-                        header: 'Code',
+                        header: t`Code`,
                         cell: ({ row }) => {
                             return (
                                 <Button variant="ghost" asChild>
@@ -58,7 +87,7 @@ export function LatestOrdersWidget() {
                         },
                     },
                     orderPlacedAt: {
-                        header: 'Placed At',
+                        header: t`Placed At`,
                         cell: ({ row }) => {
                             return (
                                 <span className="capitalize">
@@ -68,7 +97,7 @@ export function LatestOrdersWidget() {
                         },
                     },
                     total: {
-                        header: 'Total',
+                        header: t`Total`,
                         cell: OrderMoneyCell,
                     },
                     totalWithTax: { cell: OrderMoneyCell },

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

@@ -3,10 +3,13 @@ import { Tabs, TabsList, TabsTrigger } from '@/vdb/components/ui/tabs.js';
 import { api } from '@/vdb/graphql/api.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { Trans } from '@lingui/react/macro';
+import { useLingui } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { RefreshCw } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { DashboardBaseWidget } from '../base-widget.js';
+import { useWidgetFilters } from '../widget-filters-context.js';
 import { MetricsChart } from './chart.js';
 import { orderChartDataQuery } from './metrics-widget.graphql.js';
 
@@ -17,53 +20,56 @@ enum DATA_TYPES {
 }
 
 export function MetricsWidget() {
+    const { t } = useLingui();
     const { formatDate, formatCurrency } = useLocalFormat();
     const { activeChannel } = useChannel();
+    const { dateRange } = useWidgetFilters();
     const [dataType, setDataType] = useState<DATA_TYPES>(DATA_TYPES.OrderTotal);
 
-    const { data, isRefetching, refetch } = useQuery({
-        queryKey: ['dashboard-order-metrics', dataType],
+    const { data, refetch, isRefetching } = useQuery({
+        queryKey: ['dashboard-order-metrics', dataType, dateRange],
         queryFn: () => {
             return api.query(orderChartDataQuery, {
                 types: [dataType],
                 refresh: true,
+                startDate: dateRange.from.toISOString(),
+                endDate: dateRange.to.toISOString(),
             });
         },
     });
 
     const chartData = useMemo(() => {
-        const entry = data?.metricSummary.at(0);
+        const entry = data?.dashboardMetricSummary.at(0);
         if (!entry) {
             return undefined;
         }
 
-        const { interval, type, entries } = entry;
+        const { type, entries } = entry;
 
-        const values = entries.map(({ label, value }) => ({
+        const values = entries.map(({ label, value }: { label: string; value: number }) => ({
             name: formatDate(label, { month: 'short', day: 'numeric' }),
             sales: value,
         }));
 
         return {
             values,
-            interval,
             type,
         };
-    }, [data]);
+    }, [data, formatDate]);
 
     return (
         <DashboardBaseWidget
             id="metrics-widget"
-            title="Metrics"
-            description="Order metrics"
+            title={t`Metrics`}
+            description={t`Order metrics`}
             actions={
                 <div className="flex gap-1">
                     <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.OrderCount}><Trans>Order Count</Trans></TabsTrigger>
+                            <TabsTrigger value={DATA_TYPES.OrderTotal}><Trans>Order Total</Trans></TabsTrigger>
                             <TabsTrigger value={DATA_TYPES.AverageOrderValue}>
-                                Average Order Value
+                                <Trans>Average Order Value</Trans>
                             </TabsTrigger>
                         </TabsList>
                     </Tabs>

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

@@ -1,9 +1,15 @@
 import { graphql } from '@/vdb/graphql/graphql.js';
 
 export const orderChartDataQuery = graphql(`
-    query GetOrderChartData($refresh: Boolean, $types: [MetricType!]!) {
-        metricSummary(input: { interval: Daily, types: $types, refresh: $refresh }) {
-            interval
+    query GetOrderChartData(
+        $refresh: Boolean
+        $types: [DashboardMetricType!]!
+        $startDate: DateTime!
+        $endDate: DateTime!
+    ) {
+        dashboardMetricSummary(
+            input: { types: $types, refresh: $refresh, startDate: $startDate, endDate: $endDate }
+        ) {
             type
             entries {
                 label

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

@@ -1,21 +1,16 @@
 import { AnimatedCurrency, AnimatedNumber } from '@/vdb/components/shared/animated-number.js';
-import { Tabs, TabsList, TabsTrigger } from '@/vdb/components/ui/tabs.js';
 import { api } from '@/vdb/graphql/api.js';
+import { Trans } from '@lingui/react/macro';
+import { useLingui } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
-import { endOfDay, endOfMonth, startOfDay, startOfMonth, subDays, subMonths } from 'date-fns';
-import { useMemo, useState } from 'react';
+import { differenceInDays, subDays } from 'date-fns';
+import { useMemo } from 'react';
 import { DashboardBaseWidget } from '../base-widget.js';
+import { useWidgetFilters } from '../widget-filters-context.js';
 import { orderSummaryQuery } from './order-summary-widget.graphql.js';
 
 const WIDGET_ID = 'orders-summary-widget';
 
-enum Range {
-    Today = 'today',
-    Yesterday = 'yesterday',
-    ThisWeek = 'thisWeek',
-    ThisMonth = 'thisMonth',
-}
-
 interface PercentageChangeProps {
     value: number;
 }
@@ -34,63 +29,25 @@ function PercentageChange({ value }: PercentageChangeProps) {
 }
 
 export function OrdersSummaryWidget() {
-    const [range, setRange] = useState<Range>(Range.Today);
+    const { t } = useLingui();
+    const { dateRange } = useWidgetFilters();
 
     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 rangeLength = differenceInDays(dateRange.to, dateRange.from) + 1;
+        // For the previous period, we go back by the same range length
+        const previousStart = subDays(dateRange.from, rangeLength);
+        const previousEnd = subDays(dateRange.to, rangeLength);
+
+        return {
+            start: dateRange.from.toISOString(),
+            end: dateRange.to.toISOString(),
+            previousStart: previousStart.toISOString(),
+            previousEnd: previousEnd.toISOString(),
+        };
+    }, [dateRange]);
 
     const { data } = useQuery({
-        queryKey: ['orders-summary', range],
+        queryKey: ['orders-summary', dateRange],
         queryFn: () =>
             api.query(orderSummaryQuery, {
                 start: variables.start,
@@ -99,7 +56,7 @@ export function OrdersSummaryWidget() {
     });
 
     const { data: previousData } = useQuery({
-        queryKey: ['orders-summary', 'previous', range],
+        queryKey: ['orders-summary', 'previous', dateRange],
         queryFn: () =>
             api.query(orderSummaryQuery, {
                 start: variables.previousStart,
@@ -124,23 +81,13 @@ export function OrdersSummaryWidget() {
     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>
-            }
+            title={t`Orders Summary`}
+            description={t`Your orders summary`}
         >
             <div className="@container h-full">
                 <div className="flex flex-col h-full @md:flex-row gap-8 items-center justify-center @md:justify-evenly text-center tabular-nums">
                     <div className="flex flex-col lg:gap-2">
-                        <p className="lg:text-lg text-muted-foreground">Total Orders</p>
+                        <p className="lg:text-lg text-muted-foreground"><Trans>Total Orders</Trans></p>
                         <p className="text-xl @md:text-3xl font-semibold">
                             <AnimatedNumber
                                 animationConfig={{ mass: 0.01, stiffness: 90, damping: 3 }}
@@ -150,7 +97,7 @@ export function OrdersSummaryWidget() {
                         <PercentageChange value={orderChange} />
                     </div>
                     <div className="flex flex-col lg:gap-2">
-                        <p className="lg:text-lg text-muted-foreground">Total Revenue</p>
+                        <p className="lg:text-lg text-muted-foreground"><Trans>Total Revenue</Trans></p>
                         <p className="text-xl @md:text-3xl font-semibold">
                             <AnimatedCurrency
                                 animationConfig={{ mass: 0.01, stiffness: 90, damping: 3 }}
@@ -163,4 +110,4 @@ export function OrdersSummaryWidget() {
             </div>
         </DashboardBaseWidget>
     );
-}
+}

package/src/lib/framework/dashboard-widget/widget-filters-context.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { useLingui } from '@lingui/react/macro';
+import { createContext, useContext, PropsWithChildren } from 'react';
+
+export interface DefinedDateRange {
+    from: Date;
+    to: Date;
+}
+
+export interface WidgetFilters {
+    dateRange: DefinedDateRange;
+}
+
+const WidgetFiltersContext = createContext<WidgetFilters | undefined>(undefined);
+
+export function WidgetFiltersProvider({
+    children,
+    filters
+}: PropsWithChildren<{ filters: WidgetFilters }>) {
+    return (
+        <WidgetFiltersContext.Provider value={filters}>
+            {children}
+        </WidgetFiltersContext.Provider>
+    );
+}
+
+export function useWidgetFilters() {
+    const { t } = useLingui();
+    const context = useContext(WidgetFiltersContext);
+    if (context === undefined) {
+        throw new Error(t`useWidgetFilters must be used within a WidgetFiltersProvider`);
+    }
+    return context;
+}