@vendure/dashboard 3.2.0

package/src/lib/components/shared/customer-group-selector.tsx

@@ -0,0 +1,62 @@
+import { Button } from '@/components/ui/button.js';
+import { Command, CommandItem, CommandList } from '@/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
+import { Trans } from '@/lib/trans.js';
+import { useQuery } from '@tanstack/react-query';
+import { Plus } from 'lucide-react';
+import { useState } from 'react';
+
+const customerGroupsDocument = graphql(`
+    query GetCustomerGroups($options: CustomerGroupListOptions) {
+        customerGroups(options: $options) {
+            items {
+                id
+                name
+            }
+        }
+    }
+`);
+
+export interface CustomerGroupSelectorProps {
+    onSelect: (value: { id: string; name: string }) => void;
+    readOnly?: boolean;
+}
+
+export function CustomerGroupSelector(props: CustomerGroupSelectorProps) {
+    const [open, setOpen] = useState(false);
+
+    const { data: groups } = useQuery({
+        queryKey: ['customerGroups'],
+        queryFn: () =>
+            api.query(customerGroupsDocument, {
+                options: {
+                    sort: { name: 'ASC' },
+                },
+            }),
+        staleTime: 1000 * 60 * 5,
+    });
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button variant="outline" size="sm" type="button" disabled={props.readOnly} className="gap-2">
+                    <Plus className="h-4 w-4" />
+                    <Trans>Add customer groups</Trans>
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0" align="start">
+                <Command shouldFilter={false}>
+                    <CommandList>
+                        {groups?.customerGroups.items.map(group => (
+                            <CommandItem key={group.id} onSelect={() => props.onSelect(group)}>
+                                {group.name}
+                            </CommandItem>
+                        ))}
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}

package/src/lib/components/shared/customer-selector.tsx

@@ -0,0 +1,107 @@
+import { Button } from '@/components/ui/button.js';
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '@/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
+import { Trans } from '@/lib/trans.js';
+import { useQuery } from '@tanstack/react-query';
+import { Plus, Search } from 'lucide-react';
+import { useState } from 'react';
+
+const customersDocument = graphql(`
+    query GetCustomers($options: CustomerListOptions) {
+        customers(options: $options) {
+            items {
+                id
+                firstName
+                lastName
+                emailAddress
+            }
+            totalItems
+        }
+    }
+`);
+
+export interface Customer {
+    id: string;
+    firstName: string;
+    lastName: string;
+    emailAddress: string;
+}
+
+export interface CustomerSelectorProps {
+    onSelect: (value: Customer) => void;
+    label?: string | React.ReactNode;
+    readOnly?: boolean;
+}
+
+export function CustomerSelector(props: CustomerSelectorProps) {
+    const [open, setOpen] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+
+    const { data, isLoading } = useQuery({
+        queryKey: ['customers', searchTerm],
+        queryFn: () =>
+            api.query(customersDocument, {
+                options: {
+                    sort: { lastName: 'ASC' },
+                    filter: searchTerm ? {
+                        firstName: { contains: searchTerm },
+                        lastName: { contains: searchTerm },
+                        emailAddress: { contains: searchTerm },
+                    } : undefined,
+                    filterOperator: searchTerm ? 'OR' : undefined,
+                },
+            }),
+        staleTime: 1000 * 60, // 1 minute
+    });
+
+    const handleSearch = (value: string) => {
+        setSearchTerm(value);
+    };
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button variant="outline" size="sm" type="button" disabled={props.readOnly} className="gap-2">
+                    <Plus className="h-4 w-4" />
+                    {props.label ?? <Trans>Select customer</Trans>}
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0 w-[350px]" align="start">
+                <Command shouldFilter={false}>
+                    <div className="flex items-center border-b px-3">
+                        <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+                        <CommandInput 
+                            placeholder="Search customers..." 
+                            onValueChange={handleSearch}
+                            className="h-10 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
+                        />
+                    </div>
+                    <CommandList>
+                        <CommandEmpty>
+                            {isLoading ? (
+                                <Trans>Loading...</Trans>
+                            ) : (
+                                <Trans>No customers found</Trans>
+                            )}
+                        </CommandEmpty>
+                        {data?.customers.items.map(customer => (
+                            <CommandItem
+                                key={customer.id}
+                                onSelect={() => {
+                                    props.onSelect(customer);
+                                    setOpen(false);
+                                }}
+                                className="flex flex-col items-start"
+                            >
+                                <div className="font-medium">{customer.firstName} {customer.lastName}</div>
+                                <div className="text-sm text-muted-foreground">{customer.emailAddress}</div>
+                            </CommandItem>
+                        ))}
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}

package/src/lib/components/shared/detail-page-button.tsx

@@ -0,0 +1,22 @@
+import { Link } from '@tanstack/react-router';
+import { Button } from '../ui/button.js';
+import { SquareArrowOutUpRightIcon } from 'lucide-react';
+
+export function DetailPageButton({
+    id,
+    label,
+    disabled,
+}: {
+    id: string;
+    label: string | React.ReactNode;
+    disabled?: boolean;
+}) {
+    return (
+        <Button asChild variant="ghost" disabled={disabled}>
+            <Link to={`./${id}`}>
+                {label}
+                {!disabled && <SquareArrowOutUpRightIcon className="h-3 w-3 text-muted-foreground" />}
+            </Link>
+        </Button>
+    );
+}

package/src/lib/components/shared/entity-assets.tsx

@@ -0,0 +1,340 @@
+import { Button } from '@/components/ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.js';
+import { AssetFragment } from '@/graphql/fragments.js';
+import {
+    closestCenter,
+    DndContext,
+    DragEndEvent,
+    KeyboardSensor,
+    PointerSensor,
+    useSensor,
+    useSensors,
+} from '@dnd-kit/core';
+import {
+    arrayMove,
+    horizontalListSortingStrategy,
+    SortableContext,
+    sortableKeyboardCoordinates,
+    useSortable,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { EllipsisIcon, ImageIcon, PaperclipIcon } from 'lucide-react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { AssetPickerDialog } from './asset-picker-dialog.js';
+import { AssetPreviewDialog } from './asset-preview-dialog.js';
+import { VendureImage } from './vendure-image.js';
+
+type Asset = AssetFragment;
+
+export interface EntityAssetValue {
+    assetIds?: string[] | null;
+    featuredAssetId?: string | null;
+}
+
+interface EntityAssetsProps {
+    assets?: Asset[];
+    featuredAsset?: Asset | null;
+    compact?: boolean;
+    updatePermissions?: boolean;
+    multiSelect?: boolean;
+    value?: EntityAssetValue;
+    onBlur?: () => void;
+    onChange?: (change: EntityAssetValue) => void;
+}
+
+// Sortable asset item component
+function SortableAsset({
+    asset,
+    compact,
+    isFeatured,
+    updatePermissions,
+    onPreview,
+    onSetAsFeatured,
+    onRemove,
+}: {
+    asset: Asset;
+    compact: boolean;
+    isFeatured: boolean;
+    updatePermissions: boolean;
+    onPreview: (asset: Asset) => void;
+    onSetAsFeatured: (asset: Asset) => void;
+    onRemove: (asset: Asset) => void;
+}) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+        id: asset.id,
+        disabled: !updatePermissions,
+    });
+
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+
+    return (
+        <div ref={setNodeRef} style={style} className="relative group" {...attributes}>
+            {/* Draggable Image Area */}
+            <div
+                {...listeners}
+                className={`
+                    flex items-center justify-center
+                    ${compact ? 'w-12 h-12' : 'w-16 h-16'}
+                    border rounded-md overflow-hidden cursor-grab
+                    ${isFeatured ? 'border-primary ring-1 ring-primary/30' : 'border-border'}
+                    ${updatePermissions ? 'hover:border-muted-foreground' : ''}
+                    ${isDragging ? 'opacity-50 cursor-grabbing' : ''}
+                `}
+            >
+                <VendureImage asset={asset} mode="crop" preset="tiny" />
+            </div>
+
+            {/* Menu Trigger */}
+            {updatePermissions && (
+                <div className="absolute -top-2 -right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button
+                                variant="secondary"
+                                size="icon"
+                                className="h-6 w-6 rounded-full shadow-md"
+                            >
+                                <EllipsisIcon className="h-4 w-4" />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                            <DropdownMenuItem onClick={() => onPreview(asset)}>Preview</DropdownMenuItem>
+                            <DropdownMenuItem disabled={isFeatured} onClick={() => onSetAsFeatured(asset)}>
+                                Set as featured asset
+                            </DropdownMenuItem>
+                            <DropdownMenuItem className="text-destructive" onClick={() => onRemove(asset)}>
+                                Remove asset
+                            </DropdownMenuItem>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                </div>
+            )}
+        </div>
+    );
+}
+
+export function EntityAssets({
+    assets: initialAssets = [],
+    featuredAsset: initialFeaturedAsset,
+    compact = false,
+    updatePermissions = true,
+    multiSelect = true,
+    onChange,
+}: EntityAssetsProps) {
+    const [assets, setAssets] = useState<Asset[]>([...initialAssets]);
+    const [featuredAsset, setFeaturedAsset] = useState<Asset | undefined | null>(initialFeaturedAsset);
+    const [isPickerOpen, setIsPickerOpen] = useState(false);
+    const [previewAsset, setPreviewAsset] = useState<Asset | null>(null);
+
+    // Setup sensors for drag and drop
+    const sensors = useSensors(
+        useSensor(PointerSensor),
+        useSensor(KeyboardSensor, {
+            coordinateGetter: sortableKeyboardCoordinates,
+        }),
+    );
+
+    // Update internal state when props change
+    useEffect(() => {
+        if (initialAssets.length) {
+            setAssets([...initialAssets]);
+        }
+    }, [initialAssets]);
+
+    useEffect(() => {
+        setFeaturedAsset(initialFeaturedAsset);
+    }, [initialFeaturedAsset]);
+
+    const emitChange = useCallback(
+        (newAssets: Asset[], newFeaturedAsset: Asset | undefined | null) => {
+            onChange?.({
+                assetIds: newAssets.map(a => a.id),
+                featuredAssetId: newFeaturedAsset?.id ?? undefined,
+            });
+        },
+        [onChange],
+    );
+
+    const handleSelectAssets = useCallback(() => {
+        setIsPickerOpen(true);
+    }, []);
+
+    const handleAssetsPicked = useCallback(
+        (selectedAssets: Asset[]) => {
+            if (selectedAssets.length) {
+                // Remove duplicates
+                const uniqueAssets = multiSelect
+                    ? [...new Map([...assets, ...selectedAssets].map(item => [item.id, item])).values()]
+                    : selectedAssets;
+
+                const newFeaturedAsset = !featuredAsset || !multiSelect ? selectedAssets[0] : featuredAsset;
+
+                setAssets(uniqueAssets);
+                setFeaturedAsset(newFeaturedAsset);
+                emitChange(uniqueAssets, newFeaturedAsset);
+            }
+            setIsPickerOpen(false);
+        },
+        [assets, featuredAsset, multiSelect, emitChange],
+    );
+
+    const handleSetAsFeatured = useCallback(
+        (asset: Asset) => {
+            setFeaturedAsset(asset);
+            emitChange(assets, asset);
+        },
+        [assets, emitChange],
+    );
+
+    const handleRemoveAsset = useCallback(
+        (asset: Asset) => {
+            const newAssets = assets.filter(a => a.id !== asset.id);
+            let newFeaturedAsset = featuredAsset;
+
+            if (featuredAsset && featuredAsset.id === asset.id) {
+                newFeaturedAsset = newAssets.length > 0 ? newAssets[0] : undefined;
+            }
+
+            setAssets(newAssets);
+            setFeaturedAsset(newFeaturedAsset);
+            emitChange(newAssets, newFeaturedAsset);
+        },
+        [assets, featuredAsset, emitChange],
+    );
+
+    const handleDragEnd = useCallback(
+        (event: DragEndEvent) => {
+            const { active, over } = event;
+
+            if (over && active.id !== over.id) {
+                setAssets(items => {
+                    const oldIndex = items.findIndex(item => item.id === active.id);
+                    const newIndex = items.findIndex(item => item.id === over.id);
+
+                    const newAssets = arrayMove(items, oldIndex, newIndex);
+                    emitChange(newAssets, featuredAsset);
+                    return newAssets;
+                });
+            }
+        },
+        [emitChange, featuredAsset],
+    );
+
+    const isFeatured = useCallback(
+        (asset: Asset) => {
+            return !!featuredAsset && featuredAsset.id === asset.id;
+        },
+        [featuredAsset],
+    );
+
+    const renderAssetList = () => (
+        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+            <div className={`${compact ? 'max-h-32' : ''} overflow-auto p-1`}>
+                <SortableContext
+                    items={assets.map(asset => asset.id)}
+                    strategy={horizontalListSortingStrategy}
+                >
+                    <div className="flex flex-wrap gap-2">
+                        {assets.map(asset => (
+                            <SortableAsset
+                                key={asset.id}
+                                asset={asset}
+                                compact={compact}
+                                isFeatured={isFeatured(asset)}
+                                updatePermissions={updatePermissions}
+                                onPreview={setPreviewAsset}
+                                onSetAsFeatured={handleSetAsFeatured}
+                                onRemove={handleRemoveAsset}
+                            />
+                        ))}
+                    </div>
+                </SortableContext>
+            </div>
+        </DndContext>
+    );
+
+    const FeaturedAsset = () => (
+        <div
+            className={`flex items-center justify-center ${compact ? 'h-40' : 'h-64'} border border-dashed rounded-md`}
+        >
+            {featuredAsset ? (
+                <VendureImage
+                    asset={featuredAsset}
+                    mode="crop"
+                    preset="small"
+                    onClick={() => setPreviewAsset(featuredAsset)}
+                    className="max-w-full max-h-full object-contain cursor-pointer"
+                />
+            ) : (
+                <div
+                    className="flex flex-col items-center justify-center text-muted-foreground cursor-pointer"
+                    onClick={handleSelectAssets}
+                >
+                    <ImageIcon className={compact ? 'h-10 w-10' : 'h-16 w-16'} />
+                    {!compact && <div className="mt-2">No featured asset</div>}
+                </div>
+            )}
+        </div>
+    );
+
+    // AddAssetButton component
+    const AddAssetButton = () =>
+        updatePermissions && (
+            <Button
+                variant="outline"
+                size={compact ? 'sm' : 'default'}
+                className={compact ? 'w-full' : ''}
+                onClick={handleSelectAssets}
+            >
+                <PaperclipIcon className="mr-2 h-4 w-4" />
+                Add asset
+            </Button>
+        );
+
+    return (
+        <>
+            {compact ? (
+                <div className="flex flex-col gap-3">
+                    <FeaturedAsset />
+                    {renderAssetList()}
+                    <AddAssetButton />
+                </div>
+            ) : (
+                <div className="grid grid-cols-1 md:grid-cols-[256px_1fr] gap-4">
+                    <FeaturedAsset />
+                    <div className="flex flex-col gap-4">
+                        {renderAssetList()}
+                        <AddAssetButton />
+                    </div>
+                </div>
+            )}
+
+            {/* Dialogs - moved outside conditional rendering */}
+            {isPickerOpen && (
+                <AssetPickerDialog
+                    multiSelect={multiSelect}
+                    onSelect={handleAssetsPicked}
+                    onClose={() => setIsPickerOpen(false)}
+                    open={isPickerOpen}
+                />
+            )}
+
+            {previewAsset && (
+                <AssetPreviewDialog
+                    asset={previewAsset}
+                    assets={assets}
+                    onOpenChange={() => setPreviewAsset(null)}
+                    open={!!previewAsset}
+                />
+            )}
+        </>
+    );
+}

package/src/lib/components/shared/error-page.tsx

@@ -0,0 +1,31 @@
+import { Page, PageBlock, PageLayout, PageTitle } from '@/framework/layout-engine/page-layout.js';
+import { Trans } from '@/lib/trans.js';
+import { AlertCircle } from 'lucide-react';
+import { Alert, AlertTitle, AlertDescription } from '../ui/alert.js';
+
+export interface ErrorPageProps {
+    message: string;
+}
+
+/**
+ * @description
+ * A generic error page that displays an error message.
+ */
+export function ErrorPage({ message }: ErrorPageProps) {
+    return (
+        <Page>
+            <PageTitle>
+                <Trans>Error</Trans>
+            </PageTitle>
+            <PageLayout>
+                <PageBlock column="main">
+                    <Alert variant="destructive">
+                        <AlertCircle className="h-4 w-4" />
+                        <AlertTitle>Error</AlertTitle>
+                        <AlertDescription>{message}</AlertDescription>
+                    </Alert>
+                </PageBlock>
+            </PageLayout>
+        </Page>
+    );
+}

package/src/lib/components/shared/facet-value-chip.tsx

@@ -0,0 +1,45 @@
+import { Badge } from '@/components/ui/badge.js';
+import { X } from 'lucide-react';
+
+// Interface for facet value type
+interface FacetValue {
+    id: string;
+    name: string;
+    code: string;
+    facet: {
+        id: string;
+        name: string;
+        code: string;
+    };
+}
+
+interface FacetValueChipProps {
+    facetValue: FacetValue;
+    removable?: boolean;
+    displayFacetName?: boolean;
+    onRemove?: (id: string) => void;
+}
+
+export function FacetValueChip({ facetValue, removable = true, onRemove, displayFacetName = true }: FacetValueChipProps) {
+    return (
+        <Badge 
+            variant="secondary"
+            className="flex items-center gap-2 py-0.5 pl-2 pr-1 h-6 hover:bg-secondary/80"
+        >
+            <div className="flex items-center gap-1.5">
+                <span className="font-medium">{facetValue.name}</span>
+                {displayFacetName && <span className="text-muted-foreground text-xs">in {facetValue.facet.name}</span>}
+            </div>
+            {removable && (
+                <button
+                    type="button"
+                    className="ml-0.5 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-muted/30"
+                    onClick={() => onRemove?.(facetValue.id)}
+                    aria-label={`Remove ${facetValue.name} from ${facetValue.facet.name}`}
+                >
+                    <X className="h-3 w-3" />
+                </button>
+            )}
+        </Badge>
+    );
+}