@vendure/dashboard 3.4.2-master-202509030226 → 3.4.2-master-202509040226

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vendure/dashboard",
     "private": false,
-    "version": "3.4.2-master-202509030226",
+    "version": "3.4.2-master-202509040226",
     "type": "module",
     "repository": {
         "type": "git",
@@ -100,8 +100,8 @@
         "@types/react": "^19.0.10",
         "@types/react-dom": "^19.0.4",
         "@uidotdev/usehooks": "^2.4.1",
-        "@vendure/common": "^3.4.2-master-202509030226",
-        "@vendure/core": "^3.4.2-master-202509030226",
+        "@vendure/common": "^3.4.2-master-202509040226",
+        "@vendure/core": "^3.4.2-master-202509040226",
         "@vitejs/plugin-react": "^4.3.4",
         "acorn": "^8.11.3",
         "acorn-walk": "^8.3.2",
@@ -152,5 +152,5 @@
         "lightningcss-linux-arm64-musl": "^1.29.3",
         "lightningcss-linux-x64-musl": "^1.29.1"
     },
-    "gitHead": "ea17999f2c068b9d5c96d81f4646393acb5baedf"
+    "gitHead": "1c3baa9187d1e7b08aa6f1b798aad54770bbed53"
 }

package/src/app/routes/_authenticated/_facets/facets.graphql.ts

@@ -31,7 +31,6 @@ export const facetWithValuesFragment = graphql(
             updatedAt
             name
             code
-            languageCode
             isPrivate
             valueList(options: $facetValueListOptions) {
                 totalItems

package/src/app/routes/_authenticated/_facets/facets.tsx

@@ -1,6 +1,7 @@
 import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
 import { FacetValueChip } from '@/vdb/components/shared/facet-value-chip.js';
 import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/vdb/framework/page/list-page.js';
@@ -16,12 +17,49 @@ import {
 } from './components/facet-bulk-actions.js';
 import { FacetValuesSheet } from './components/facet-values-sheet.js';
 import { deleteFacetDocument, facetListDocument } from './facets.graphql.js';
+import { DataTableCellComponent } from '@/vdb/components/shared/table-cell/table-cell-types.js';
 
 export const Route = createFileRoute('/_authenticated/_facets/facets')({
     component: FacetListPage,
     loader: () => ({ breadcrumb: () => <Trans>Facets</Trans> }),
 });
 
+const FacetValuesCell: DataTableCellComponent<ResultOf<
+    typeof facetListDocument
+>['facets']['items'][0]> = ({ row }) => {
+    const value = row.original.valueList;
+    if (!value) {
+        return null;
+    }
+    const list = value;
+    return (
+        <div className="flex flex-wrap gap-2 items-center">
+            {list.items.map(item => {
+                return (
+                    <FacetValueChip
+                        key={item.id}
+                        facetValue={item}
+                        removable={false}
+                        displayFacetName={false}
+                    />
+                );
+            })}
+            <FacetValuesSheet
+                facetId={row.original.id}
+                facetName={row.original.name}
+            >
+                {list.totalItems > 3 ? (
+                    <div>
+                        <Trans>+ {list.totalItems - 3} more</Trans>
+                    </div>
+                ) : (
+                    <Trans>View values</Trans>
+                )}
+            </FacetValuesSheet>
+        </div>
+    );
+};
+
 function FacetListPage() {
     return (
         <ListPage
@@ -29,49 +67,31 @@ function FacetListPage() {
             title="Facets"
             listQuery={facetListDocument}
             deleteMutation={deleteFacetDocument}
+            defaultVisibility={{
+                name: true,
+                isPrivate: true,
+                valueList: true,
+            }}
             customizeColumns={{
                 name: {
-                    header: 'Facet Name',
+                    header: () => <Trans>Facet Name</Trans>,
                     cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
-                valueList: {
-                    header: () => <Trans>Values</Trans>,
-                    cell: ({ cell }) => {
-                        const value = cell.getValue();
-                        if (!value) {
-                            return null;
-                        }
-                        const list = value as any as ResultOf<
-                            typeof facetListDocument
-                        >['facets']['items'][0]['valueList'];
+                isPrivate: {
+                    header: () => <Trans>Visibility</Trans>,
+                    cell: ({ row }) => {
+                        const isPrivate = row.original.isPrivate;
                         return (
-                            <div className="flex flex-wrap gap-2 items-center">
-                                {list.items.map(item => {
-                                    return (
-                                        <FacetValueChip
-                                            key={item.id}
-                                            facetValue={item}
-                                            removable={false}
-                                            displayFacetName={false}
-                                        />
-                                    );
-                                })}
-                                <FacetValuesSheet
-                                    facetId={cell.row.original.id}
-                                    facetName={cell.row.original.name}
-                                >
-                                    {list.totalItems > 3 ? (
-                                        <div>
-                                            <Trans>+ {list.totalItems - 3} more</Trans>
-                                        </div>
-                                    ) : (
-                                        <Trans>View values</Trans>
-                                    )}
-                                </FacetValuesSheet>
-                            </div>
+                            <Badge variant={isPrivate ? 'destructive' : 'success'}>
+                                {isPrivate ? <Trans>private</Trans> : <Trans>public</Trans>}
+                            </Badge>
                         );
                     },
                 },
+                valueList: {
+                    header: () => <Trans>Values</Trans>,
+                    cell: FacetValuesCell,
+                },
             }}
             onSearchTermChange={searchTerm => {
                 return {

package/src/app/routes/_authenticated/_orders/orders.tsx

@@ -1,6 +1,9 @@
-import { Money } from '@/vdb/components/data-display/money.js';
 import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
-import { Badge } from '@/vdb/components/ui/badge.js';
+import {
+    CustomerCell,
+    OrderMoneyCell,
+    OrderStateCell,
+} from '@/vdb/components/shared/table-cell/order-table-cell-components.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/vdb/framework/page/list-page.js';
@@ -9,7 +12,7 @@ import { ResultOf } from '@/vdb/graphql/graphql.js';
 import { useServerConfig } from '@/vdb/hooks/use-server-config.js';
 import { Trans } from '@/vdb/lib/trans.js';
 import { useMutation } from '@tanstack/react-query';
-import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
+import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import { createDraftOrderDocument, orderListDocument } from './orders.graphql.js';
 
@@ -58,26 +61,15 @@ function OrderListPage() {
             customizeColumns={{
                 total: {
                     header: 'Total',
-                    cell: ({ cell, row }) => {
-                        const value = cell.getValue();
-                        const currencyCode = row.original.currencyCode;
-                        return <Money value={value} currency={currencyCode} />;
-                    },
+                    cell: OrderMoneyCell,
                 },
                 totalWithTax: {
                     header: 'Total with Tax',
-                    cell: ({ cell, row }) => {
-                        const value = cell.getValue();
-                        const currencyCode = row.original.currencyCode;
-                        return <Money value={value} currency={currencyCode} />;
-                    },
+                    cell: OrderMoneyCell,
                 },
                 state: {
                     header: 'State',
-                    cell: ({ cell }) => {
-                        const value = cell.getValue() as string;
-                        return <Badge variant="outline">{value}</Badge>;
-                    },
+                    cell: OrderStateCell,
                 },
                 code: {
                     header: 'Code',
@@ -89,24 +81,12 @@ function OrderListPage() {
                 },
                 customer: {
                     header: 'Customer',
-                    cell: ({ cell }) => {
-                        const value = cell.getValue();
-                        if (!value) {
-                            return null;
-                        }
-                        return (
-                            <Button asChild variant="ghost">
-                                <Link to={`/customers/${value.id}`}>
-                                    {value.firstName} {value.lastName}
-                                </Link>
-                            </Button>
-                        );
-                    },
+                    cell: CustomerCell,
                 },
                 shippingLines: {
                     header: 'Shipping',
-                    cell: ({ cell }) => {
-                        const value = cell.getValue();
+                    cell: ({ row }) => {
+                        const value = row.original.shippingLines;
                         return <div>{value.map(line => line.shippingMethod.name).join(', ')}</div>;
                     },
                 },

package/src/app/routes/_authenticated/_products/components/create-product-variants-dialog.tsx

@@ -135,6 +135,7 @@ export function CreateProductVariantsDialog({
         ({ data }: { data: VariantConfiguration }) => setVariantData(data),
         [],
     );
+    const createCount = Object.values(variantData?.variants ?? {}).filter(v => v.enabled).length;
 
     return (
         <>
@@ -168,7 +169,8 @@ export function CreateProductVariantsDialog({
                                 !variantData ||
                                 createOptionGroupMutation.isPending ||
                                 addOptionGroupToProductMutation.isPending ||
-                                createProductVariantsMutation.isPending
+                                createProductVariantsMutation.isPending ||
+                                createCount === 0
                             }
                         >
                             {createOptionGroupMutation.isPending ||
@@ -176,13 +178,7 @@ export function CreateProductVariantsDialog({
                             createProductVariantsMutation.isPending ? (
                                 <Trans>Creating...</Trans>
                             ) : (
-                                <Trans>
-                                    Create{' '}
-                                    {variantData
-                                        ? Object.values(variantData.variants).filter(v => v.enabled).length
-                                        : 0}{' '}
-                                    variants
-                                </Trans>
+                                <Trans>Create {createCount} variants</Trans>
                             )}
                         </Button>
                     </DialogFooter>

package/src/app/routes/_authenticated/_products/components/create-product-variants.tsx

@@ -225,6 +225,7 @@ export function CreateProductVariants({
                                                         <FormItem className="flex items-center space-x-2">
                                                             <FormControl>
                                                                 <Checkbox
+                                                                    defaultChecked={true}
                                                                     checked={field.value}
                                                                     onCheckedChange={field.onChange}
                                                                 />

package/src/lib/components/data-table/filters/data-table-datetime-filter.tsx

@@ -53,6 +53,24 @@ export function DataTableDateTimeFilter({
         }
     }, [operator, value, startDate, endDate]);
 
+    const parseToDate = (input: unknown): Date | undefined => {
+        if (input instanceof Date) {
+            return input;
+        }
+        if (typeof input === 'string' && input !== '') {
+            return new Date(input);
+        }
+        return;
+    };
+
+    const dashboardComponentProps = {
+        name: 'date',
+        onBlur: () => {
+            /* */
+        },
+        ref: () => null,
+    };
+
     return (
         <div className="flex flex-col gap-2">
             <div className="flex flex-col md:flex-row gap-2">
@@ -71,11 +89,23 @@ export function DataTableDateTimeFilter({
                 {operator !== 'isNull' &&
                     (operator === 'between' ? (
                         <div className="space-y-2">
-                            <DateTimeInput value={startDate} onChange={setStartDate} />
-                            <DateTimeInput value={endDate} onChange={setEndDate} />
+                            <DateTimeInput
+                                {...dashboardComponentProps}
+                                value={startDate}
+                                onChange={val => setStartDate(parseToDate(val))}
+                            />
+                            <DateTimeInput
+                                {...dashboardComponentProps}
+                                value={endDate}
+                                onChange={val => setEndDate(parseToDate(val))}
+                            />
                         </div>
                     ) : (
-                        <DateTimeInput value={value} onChange={setValue} />
+                        <DateTimeInput
+                            {...dashboardComponentProps}
+                            value={value}
+                            onChange={val => setValue(parseToDate(val))}
+                        />
                     ))}
             </div>
             {error && <p className="text-sm text-red-500">{error}</p>}

package/src/lib/components/shared/asset/asset-gallery.tsx

@@ -360,7 +360,10 @@ export function AssetGallery({
                                                 {formatFileSize(asset.fileSize)}
                                             </p>
                                         )}
-                                        <DetailPageButton id={asset.id} label={<Trans>Edit</Trans>} />
+                                        <DetailPageButton
+                                            href={`/assets/${asset.id}`}
+                                            label={<Trans>Edit</Trans>}
+                                        />
                                     </div>
                                 </CardContent>
                             </Card>

package/src/lib/components/shared/table-cell/order-table-cell-components.tsx

@@ -0,0 +1,38 @@
+import { Money } from '@/vdb/components/data-display/money.js';
+import { DataTableCellComponent } from '@/vdb/components/shared/table-cell/table-cell-types.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Link } from '@tanstack/react-router';
+
+type CustomerCellData = {
+    customer: {
+        id: string;
+        firstName: string;
+        lastName: string;
+    } | null;
+};
+
+export const CustomerCell: DataTableCellComponent<CustomerCellData> = ({ row }) => {
+    const value = row.original.customer;
+    if (!value) {
+        return null;
+    }
+    return (
+        <Button asChild variant="ghost">
+            <Link to={`/customers/${value.id}`}>
+                {value.firstName} {value.lastName}
+            </Link>
+        </Button>
+    );
+};
+
+export const OrderStateCell: DataTableCellComponent<{ state: string }> = ({ row }) => {
+    const value = row.original.state;
+    return <Badge variant="outline">{value}</Badge>;
+};
+
+export const OrderMoneyCell: DataTableCellComponent<{ currencyCode: string }> = ({ cell, row }) => {
+    const value = cell.getValue();
+    const currencyCode = row.original.currencyCode;
+    return <Money value={value} currency={currencyCode} />;
+};

package/src/lib/components/shared/table-cell/table-cell-types.ts

@@ -0,0 +1,33 @@
+import { CellContext } from '@tanstack/table-core';
+
+/**
+ * @description
+ * This type is used to define re-usable components that can render a table cell in a
+ * DataTable.
+ *
+ * @example
+ * ```ts
+ * type CustomerCellData = {
+ *     customer: {
+ *         id: string;
+ *         firstName: string;
+ *         lastName: string;
+ *     } | null;
+ * };
+ *
+ * export const CustomerCell: DataTableCellComponent<CustomerCellData> = ({ row }) => {
+ *     const value = row.original.customer;
+ *     if (!value) {
+ *         return null;
+ *     }
+ *     return (
+ *         <Button asChild variant="ghost">
+ *             <Link to={`/customers/${value.id}`}>
+ *                 {value.firstName} {value.lastName}
+ *             </Link>
+ *         </Button>
+ *     );
+ * };
+ * ```
+ */
+export type DataTableCellComponent<T> = <Data extends T>(context: CellContext<Data, any>) => any;

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

@@ -1,4 +1,9 @@
 import { PaginatedListDataTable } from '@/vdb/components/shared/paginated-list-data-table.js';
+import {
+    CustomerCell,
+    OrderMoneyCell,
+    OrderStateCell,
+} 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 { Link } from '@tanstack/react-router';
@@ -25,7 +30,6 @@ export function LatestOrdersWidget() {
     return (
         <DashboardBaseWidget id={WIDGET_ID} title="Latest Orders" description="Your latest orders">
             <PaginatedListDataTable
-                disableViewOptions
                 page={page}
                 transformVariables={variables => ({
                     ...variables,
@@ -38,6 +42,7 @@ export function LatestOrdersWidget() {
                             state: {
                                 notIn: ['Cancelled', 'Draft'],
                             },
+                            ...(variables.options?.filter ?? {}),
                         },
                     },
                 })}
@@ -56,7 +61,7 @@ export function LatestOrdersWidget() {
                         header: 'Placed At',
                         cell: ({ row }) => {
                             return (
-                                <span>
+                                <span className="capitalize">
                                     {formatRelative(row.original.orderPlacedAt ?? new Date(), new Date())}
                                 </span>
                             );
@@ -64,12 +69,11 @@ export function LatestOrdersWidget() {
                     },
                     total: {
                         header: 'Total',
-                        cell: ({ row }) => {
-                            return (
-                                <span>{formatCurrency(row.original.total, row.original.currencyCode)}</span>
-                            );
-                        },
+                        cell: OrderMoneyCell,
                     },
+                    totalWithTax: { cell: OrderMoneyCell },
+                    state: { cell: OrderStateCell },
+                    customer: { cell: CustomerCell },
                 }}
                 itemsPerPage={pageSize}
                 sorting={sorting}

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

@@ -1,6 +1,4 @@
-import { Area, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
-
-import { AreaChart } from 'recharts';
+import { Area, AreaChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
 import { useWidgetDimensions } from '../base-widget.js';
 
 export function MetricsChart({
@@ -14,11 +12,29 @@ export function MetricsChart({
 
     return (
         <AreaChart width={width} height={height} data={chartData}>
+            <defs>
+                <linearGradient id="gradientFill" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%" stopColor="var(--color-brand)" stopOpacity={0.9} />
+                    <stop offset="100%" stopColor="var(--color-brand)" stopOpacity={0.05} />
+                </linearGradient>
+            </defs>
             <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} />
+            <Tooltip
+                formatter={formatValue}
+                contentStyle={{ borderRadius: 4, padding: 4, paddingLeft: 8, paddingRight: 8 }}
+                labelStyle={{ fontSize: 12 }}
+                itemStyle={{ fontSize: 14 }}
+            />
+            <Area
+                type="monotone"
+                dataKey="sales"
+                stroke="var(--color-brand)"
+                strokeWidth={2}
+                strokeOpacity={0.8}
+                fill={'url(#gradientFill)'}
+            />
         </AreaChart>
     );
 }

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

@@ -1,8 +1,10 @@
+import { Button } from '@/vdb/components/ui/button.js';
 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 { useQuery } from '@tanstack/react-query';
+import { RefreshCw } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { DashboardBaseWidget } from '../base-widget.js';
 import { MetricsChart } from './chart.js';
@@ -19,7 +21,7 @@ export function MetricsWidget() {
     const { activeChannel } = useChannel();
     const [dataType, setDataType] = useState<DATA_TYPES>(DATA_TYPES.OrderTotal);
 
-    const { data } = useQuery({
+    const { data, isRefetching, refetch } = useQuery({
         queryKey: ['dashboard-order-metrics', dataType],
         queryFn: () => {
             return api.query(orderChartDataQuery, {
@@ -53,15 +55,22 @@ export function MetricsWidget() {
         <DashboardBaseWidget
             id="metrics-widget"
             title="Metrics"
-            description="Metrics widget"
+            description="Order metrics"
             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>
+                <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.AverageOrderValue}>
+                                Average Order Value
+                            </TabsTrigger>
+                        </TabsList>
+                    </Tabs>
+                    <Button variant={'ghost'} onClick={() => refetch()}>
+                        <RefreshCw className={isRefetching ? 'animate-rotate' : ''} />
+                    </Button>
+                </div>
             }
         >
             {chartData && (

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

@@ -137,26 +137,28 @@ export function OrdersSummaryWidget() {
                 </Tabs>
             }
         >
-            <div className="flex flex-col lg:gap-4 items-center justify-center text-center">
-                <div className="flex flex-col lg:gap-2">
-                    <p className="lg: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 lg:gap-2">
-                    <p className="lg: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 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="text-xl @md:text-3xl font-semibold">
+                            <AnimatedNumber
+                                animationConfig={{ mass: 0.01, stiffness: 90, damping: 3 }}
+                                value={currentTotalOrders}
+                            />
+                        </p>
+                        <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="text-xl @md:text-3xl font-semibold">
+                            <AnimatedCurrency
+                                animationConfig={{ mass: 0.01, stiffness: 90, damping: 3 }}
+                                value={currentRevenue}
+                            />
+                        </p>
+                        <PercentageChange value={revenueChange} />
+                    </div>
                 </div>
             </div>
         </DashboardBaseWidget>