@vendure/dashboard 3.4.3-master-202509250229 → 3.5.0-minor-202509261210

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

@@ -9,13 +9,15 @@ import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 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 { dateRange } = useWidgetFilters();
     const [sorting, setSorting] = useState<SortingState>([
         {
             id: 'orderPlacedAt',
@@ -24,9 +26,34 @@ 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">
             <PaginatedListDataTable

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

@@ -7,6 +7,7 @@ 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';
 
@@ -19,37 +20,39 @@ enum DATA_TYPES {
 export function MetricsWidget() {
     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

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,14 @@
 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 { 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 +27,24 @@ function PercentageChange({ value }: PercentageChangeProps) {
 }
 
 export function OrdersSummaryWidget() {
-    const [range, setRange] = useState<Range>(Range.Today);
+    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 +53,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,
@@ -126,16 +80,6 @@ export function OrdersSummaryWidget() {
             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="@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">
@@ -163,4 +107,4 @@ export function OrdersSummaryWidget() {
             </div>
         </DashboardBaseWidget>
     );
-}
+}

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

@@ -0,0 +1,33 @@
+'use client';
+
+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 context = useContext(WidgetFiltersContext);
+    if (context === undefined) {
+        throw new Error('useWidgetFilters must be used within a WidgetFiltersProvider');
+    }
+    return context;
+}

package/src/lib/framework/document-introspection/add-custom-fields.spec.ts

@@ -1,14 +1,7 @@
 import { CustomFieldConfig, CustomFields } from '@vendure/common/lib/generated-types';
 import { graphql } from 'gql.tada';
-import {
-    DocumentNode,
-    FieldNode,
-    FragmentDefinitionNode,
-    Kind,
-    OperationDefinitionNode,
-    print,
-} from 'graphql';
-import { describe, it, expect, beforeEach } from 'vitest';
+import { DocumentNode, FieldNode, FragmentDefinitionNode, Kind, print } from 'graphql';
+import { beforeEach, describe, expect, it } from 'vitest';
 
 import { addCustomFields } from './add-custom-fields.js';
 
@@ -239,4 +232,321 @@ describe('addCustomFields()', () => {
             addsCustomFieldsToType('Address', addressFragment);
         });
     });
+
+    describe('Nested entity handling', () => {
+        it('User example: Should not add custom fields to Asset fragment used in nested featuredAsset', () => {
+            const assetFragment = graphql(`
+                fragment Asset on Asset {
+                    id
+                    createdAt
+                    updatedAt
+                    name
+                    fileSize
+                    mimeType
+                    type
+                    preview
+                    source
+                    width
+                    height
+                    focalPoint {
+                        x
+                        y
+                    }
+                }
+            `);
+
+            const documentNode = graphql(
+                `
+                    query CollectionList($options: CollectionListOptions) {
+                        collections(options: $options) {
+                            items {
+                                id
+                                createdAt
+                                updatedAt
+                                featuredAsset {
+                                    ...Asset
+                                }
+                                name
+                                slug
+                                breadcrumbs {
+                                    id
+                                    name
+                                    slug
+                                }
+                                children {
+                                    id
+                                    name
+                                }
+                                position
+                                isPrivate
+                                parentId
+                                productVariants {
+                                    totalItems
+                                }
+                            }
+                            totalItems
+                        }
+                    }
+                `,
+                [assetFragment],
+            );
+
+            const customFieldsConfig = new Map<string, CustomFieldConfig[]>();
+            customFieldsConfig.set('Collection', [
+                { name: 'featuredProducts', type: 'relation', list: true, scalarFields: ['id', 'name'] },
+                { name: 'alternativeAsset', type: 'relation', list: false, scalarFields: ['id', 'name'] },
+            ]);
+            customFieldsConfig.set('Asset', [
+                { name: 'assetCustomField1', type: 'string', list: false },
+                { name: 'assetCustomField2', type: 'string', list: false },
+                { name: 'assetCustomField3', type: 'string', list: false },
+            ]);
+
+            const result = addCustomFields(documentNode, { customFieldsMap: customFieldsConfig });
+            const printed = print(result);
+
+            // Should add customFields ONLY to Collection items (top-level entity)
+            expect(printed).toContain('customFields {');
+            expect(printed).toContain('featuredProducts {');
+            expect(printed).toContain('alternativeAsset {');
+
+            // Should NOT add customFields to Asset fragment (only used in nested context)
+            const fragmentMatch = printed.match(/fragment Asset on Asset\s*\{[^}]*\}/s);
+            expect(fragmentMatch).toBeTruthy();
+            expect(fragmentMatch![0]).not.toContain('customFields');
+            expect(fragmentMatch![0]).not.toContain('assetCustomField1');
+
+            // Should NOT add customFields to children (nested Collection entities)
+            const childrenMatch = printed.match(/children\s*\{[^}]+\}/s);
+            expect(childrenMatch).toBeTruthy();
+            expect(childrenMatch![0]).not.toContain('customFields');
+
+            // Should NOT add customFields to breadcrumbs
+            const breadcrumbsMatch = printed.match(/breadcrumbs\s*\{[^}]+\}/s);
+            expect(breadcrumbsMatch).toBeTruthy();
+            expect(breadcrumbsMatch![0]).not.toContain('customFields');
+        });
+
+        it('Should only add custom fields to top-level entity, not nested related entities', () => {
+            const documentNode = graphql(`
+                query CollectionList($options: CollectionListOptions) {
+                    collections(options: $options) {
+                        items {
+                            id
+                            name
+                            slug
+                            featuredAsset {
+                                id
+                                preview
+                            }
+                            children {
+                                id
+                                name
+                                slug
+                            }
+                            breadcrumbs {
+                                id
+                                name
+                                slug
+                            }
+                        }
+                        totalItems
+                    }
+                }
+            `);
+
+            const customFieldsConfig = new Map<string, CustomFieldConfig[]>();
+            customFieldsConfig.set('Collection', [
+                { name: 'featuredProducts', type: 'relation', list: true, scalarFields: ['id', 'name'] },
+                { name: 'alternativeAsset', type: 'relation', list: false, scalarFields: ['id', 'name'] },
+            ]);
+            customFieldsConfig.set('Asset', [
+                { name: 'assetCustomField1', type: 'string', list: false },
+                { name: 'assetCustomField2', type: 'string', list: false },
+            ]);
+
+            const result = addCustomFields(documentNode, { customFieldsMap: customFieldsConfig });
+            const printed = print(result);
+
+            // Should add customFields to top-level Collection (items)
+            expect(printed).toContain('customFields {');
+            expect(printed).toContain('featuredProducts {');
+            expect(printed).toContain('alternativeAsset {');
+
+            // Should NOT add customFields to nested Collection entities (children, breadcrumbs)
+            const childrenMatch = printed.match(/children\s*\{[^}]+\}/s);
+            const breadcrumbsMatch = printed.match(/breadcrumbs\s*\{[^}]+\}/s);
+
+            expect(childrenMatch).toBeTruthy();
+            expect(breadcrumbsMatch).toBeTruthy();
+            expect(childrenMatch![0]).not.toContain('customFields');
+            expect(breadcrumbsMatch![0]).not.toContain('customFields');
+
+            // Should NOT add customFields to nested Asset entity (featuredAsset)
+            const featuredAssetMatch = printed.match(/featuredAsset\s*\{[^}]+\}/s);
+            expect(featuredAssetMatch).toBeTruthy();
+            expect(featuredAssetMatch![0]).not.toContain('customFields');
+            expect(featuredAssetMatch![0]).not.toContain('assetCustomField1');
+        });
+
+        it('Should NOT add custom fields to fragments that are only used in nested contexts', () => {
+            const assetFragment = graphql(`
+                fragment Asset on Asset {
+                    id
+                    name
+                    preview
+                }
+            `);
+
+            const documentNode = graphql(
+                `
+                    query ProductList($options: ProductListOptions) {
+                        products(options: $options) {
+                            items {
+                                id
+                                name
+                                featuredAsset {
+                                    ...Asset
+                                }
+                                variants {
+                                    id
+                                    name
+                                    assets {
+                                        ...Asset
+                                    }
+                                }
+                            }
+                            totalItems
+                        }
+                    }
+                `,
+                [assetFragment],
+            );
+
+            const customFieldsConfig = new Map<string, CustomFieldConfig[]>();
+            customFieldsConfig.set('Product', [{ name: 'productCustomField', type: 'string', list: false }]);
+            customFieldsConfig.set('Asset', [{ name: 'assetCustomField', type: 'string', list: false }]);
+            customFieldsConfig.set('ProductVariant', [
+                { name: 'variantCustomField', type: 'string', list: false },
+            ]);
+
+            const result = addCustomFields(documentNode, { customFieldsMap: customFieldsConfig });
+            const printed = print(result);
+
+            // Should add customFields to Product (top-level query entity)
+            expect(printed).toContain('customFields {');
+            expect(printed).toContain('productCustomField');
+
+            // Should NOT add customFields to Asset fragment (only used in nested contexts)
+            expect(printed).not.toMatch(/fragment Asset on Asset\s*\{[^}]*customFields/s);
+
+            // Should NOT add customFields to nested ProductVariant entities
+            const variantsMatch = printed.match(/variants\s*\{[^}]+\}/s);
+            expect(variantsMatch).toBeTruthy();
+            expect(variantsMatch![0]).not.toContain('customFields');
+            expect(variantsMatch![0]).not.toContain('variantCustomField');
+        });
+
+        it('Should add custom fields to fragments used at top level', () => {
+            const productFragment = graphql(`
+                fragment ProductDetails on Product {
+                    id
+                    name
+                    slug
+                }
+            `);
+
+            const documentNode = graphql(
+                `
+                    query ProductList($options: ProductListOptions) {
+                        products(options: $options) {
+                            items {
+                                ...ProductDetails
+                                featuredAsset {
+                                    id
+                                    preview
+                                }
+                            }
+                            totalItems
+                        }
+                    }
+                `,
+                [productFragment],
+            );
+
+            const customFieldsConfig = new Map<string, CustomFieldConfig[]>();
+            customFieldsConfig.set('Product', [{ name: 'productCustomField', type: 'string', list: false }]);
+            customFieldsConfig.set('Asset', [{ name: 'assetCustomField', type: 'string', list: false }]);
+
+            const result = addCustomFields(documentNode, { customFieldsMap: customFieldsConfig });
+            const printed = print(result);
+
+            // Should add customFields to ProductDetails fragment (used at top level in items)
+            expect(printed).toContain('fragment ProductDetails on Product');
+            expect(printed).toContain('productCustomField');
+
+            // Should NOT add customFields to featuredAsset (nested entity)
+            const featuredAssetMatch = printed.match(/featuredAsset\s*\{[^}]+\}/s);
+            expect(featuredAssetMatch).toBeTruthy();
+            expect(featuredAssetMatch![0]).not.toContain('customFields');
+        });
+
+        it('Should handle complex nested structure with multiple entity types', () => {
+            const documentNode = graphql(`
+                query ComplexQuery {
+                    orders {
+                        items {
+                            id
+                            code
+                            customer {
+                                id
+                                firstName
+                                addresses {
+                                    id
+                                    streetLine1
+                                    country {
+                                        id
+                                        name
+                                    }
+                                }
+                            }
+                            lines {
+                                id
+                                productVariant {
+                                    id
+                                    name
+                                    product {
+                                        id
+                                        name
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            `);
+
+            const customFieldsConfig = new Map<string, CustomFieldConfig[]>();
+            customFieldsConfig.set('Order', [{ name: 'orderCustomField', type: 'string', list: false }]);
+            customFieldsConfig.set('Customer', [
+                { name: 'customerCustomField', type: 'string', list: false },
+            ]);
+            customFieldsConfig.set('Address', [{ name: 'addressCustomField', type: 'string', list: false }]);
+            customFieldsConfig.set('Product', [{ name: 'productCustomField', type: 'string', list: false }]);
+
+            const result = addCustomFields(documentNode, { customFieldsMap: customFieldsConfig });
+            const printed = print(result);
+
+            // Should only add customFields to top-level Order entity
+            expect(printed).toContain('customFields {');
+            expect(printed).toContain('orderCustomField');
+
+            // Should NOT add customFields to any nested entities
+            expect(printed).not.toMatch(/customer\s*\{[^}]*customFields/s);
+            expect(printed).not.toMatch(/addresses\s*\{[^}]*customFields/s);
+            expect(printed).not.toMatch(/country\s*\{[^}]*customFields/s);
+            expect(printed).not.toMatch(/productVariant\s*\{[^}]*customFields/s);
+            expect(printed).not.toMatch(/product\s*\{[^}]*customFields/s);
+        });
+    });
 });