@vendure/dashboard 3.4.0-minor-202506250934 → 3.4.0

package/src/lib/components/shared/history-timeline/history-entry.tsx

@@ -1,16 +1,16 @@
-import { Button } from '@/components/ui/button.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu.js';
-import { Separator } from '@/components/ui/separator.js';
-import { useLocalFormat } from '@/hooks/use-local-format.js';
-import { Trans } from '@/lib/trans.js';
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { Separator } from '@/vdb/components/ui/separator.js';
+import { Trans } from '@/vdb/lib/trans.js';
+import { cn } from '@/vdb/lib/utils.js';
 import { MoreVerticalIcon, PencilIcon, TrashIcon } from 'lucide-react';
-import { useCallback } from 'react';
-import { useHistoryTimeline } from './history-timeline.js';
+import { HistoryEntryDate } from './history-entry-date.js';
 
 export interface HistoryEntryItem {
     id: string;
@@ -25,88 +25,164 @@ export interface HistoryEntryItem {
     data: any;
 }
 
+interface OrderCustomer {
+    firstName: string;
+    lastName: string;
+}
+
 interface HistoryEntryProps {
     entry: HistoryEntryItem;
     isNoteEntry: boolean;
     timelineIcon: React.ReactNode;
     title: string | React.ReactNode;
     children: React.ReactNode;
+    isPrimary?: boolean;
+    customer?: OrderCustomer | null;
+    onEditNote?: (noteId: string, note: string, isPrivate: boolean) => void;
+    onDeleteNote?: (noteId: string) => void;
 }
 
-export function HistoryEntry({ entry, isNoteEntry, timelineIcon, title, children }: HistoryEntryProps) {
-    const { formatDate } = useLocalFormat();
-    const { editNote, deleteNote } = useHistoryTimeline();
+export function HistoryEntry({
+    entry,
+    isNoteEntry,
+    timelineIcon,
+    title,
+    children,
+    isPrimary = true,
+    customer,
+    onEditNote,
+    onDeleteNote,
+}: Readonly<HistoryEntryProps>) {
+    const getIconColor = (type: string) => {
+        // Check for success states (payment settled, order delivered)
+        if (type === 'ORDER_PAYMENT_TRANSITION' && entry.data.to === 'Settled') {
+            return 'bg-success text-success-foreground';
+        }
+        if (type === 'ORDER_STATE_TRANSITION' && entry.data.to === 'Delivered') {
+            return 'bg-success text-success-foreground';
+        }
+        if (type === 'ORDER_FULFILLMENT_TRANSITION' && entry.data.to === 'Delivered') {
+            return 'bg-success text-success-foreground';
+        }
+        
+        // Check for destructive states (cancellations)
+        if (type === 'ORDER_CANCELLATION') {
+            return 'bg-destructive text-destructive-foreground';
+        }
+        if (type === 'ORDER_STATE_TRANSITION' && entry.data.to === 'Cancelled') {
+            return 'bg-destructive text-destructive-foreground';
+        }
+        if (type === 'ORDER_PAYMENT_TRANSITION' && (entry.data.to === 'Declined' || entry.data.to === 'Cancelled')) {
+            return 'bg-destructive text-destructive-foreground';
+        }
+        
+        // All other entries use neutral colors
+        return 'bg-muted text-muted-foreground';
+    };
 
-    const formatDateTime = useCallback(
-        (date: string) => {
-            return formatDate(date, {
-                year: 'numeric',
-                month: 'long',
-                day: 'numeric',
-                hour: 'numeric',
-                minute: 'numeric',
-                second: 'numeric',
-            });
-        },
-        [formatDate],
-    );
+    const getActorName = () => {
+        if (entry.administrator) {
+            return `${entry.administrator.firstName} ${entry.administrator.lastName}`;
+        } else if (customer) {
+            return `${customer.firstName} ${customer.lastName}`;
+        }
+        return '';
+    };
 
     return (
-        <div key={entry.id} className="relative mb-4 pl-11">
-            <div className="absolute left-0 w-10 flex items-center justify-center">
-                <div className={`rounded-full flex items-center justify-center h-6 w-6`}>
+        <div key={entry.id} className="relative group">
+            <div
+                className={`flex gap-3 p-3 rounded-lg hover:bg-muted/30 transition-colors ${!isPrimary ? 'opacity-75' : ''}`}
+            >
+                <div className={cn(`relative z-10 flex-shrink-0 ${isNoteEntry ? 'ml-2' : ''}`, isPrimary ? '-ml-1' : '')}>
                     <div
-                        className={`rounded-full bg-muted text-muted-foreground flex items-center justify-center h-6 w-6`}
+                        className={`rounded-full flex items-center justify-center ${isPrimary ? 'h-8 w-8' : 'h-6 w-6'} ${getIconColor(entry.type)} border-2 border-background ${isPrimary ? 'shadow-sm' : 'shadow-none'}`}
                     >
-                        {timelineIcon}
+                        <div className={isPrimary ? 'text-current' : 'text-current scale-75'}>
+                            {timelineIcon}
+                        </div>
                     </div>
                 </div>
-            </div>
 
-            <div className="px-4 rounded-md">
-                <div className="mt-2 text-sm text-muted-foreground flex items-center">
-                    <span>{formatDateTime(entry.createdAt)}</span>
-                    {entry.administrator && (
-                        <span className="ml-2">
-                            {entry.administrator.firstName} {entry.administrator.lastName}
-                        </span>
-                    )}
-                </div>
-                <div className="flex items-start justify-between">
-                    <div>
-                        <div className="font-medium text-sm">{title}</div>
-                        {children}
-                    </div>
+                <div className="flex-1 min-w-0">
+                    <div className="flex items-start justify-between">
+                        <div className="flex-1 min-w-0">
+                            <h4
+                                className={`text-sm ${isPrimary ? 'font-medium text-foreground' : 'font-normal text-muted-foreground'}`}
+                            >
+                                {title}
+                            </h4>
+                            <div className="mt-1">
+                                {entry.type === 'ORDER_NOTE' ? (
+                                    <div className={`space-y-${isPrimary ? '2' : '1'}`}>
+                                        <p className={`${isPrimary ? 'text-sm' : 'text-xs'} text-foreground`}>
+                                            {entry.data.note}
+                                        </p>
+                                        <div className="flex items-center gap-2">
+                                            <Badge
+                                                variant={entry.isPublic ? 'outline' : 'secondary'}
+                                                className="text-xs"
+                                            >
+                                                {entry.isPublic ? 'Public' : 'Private'}
+                                            </Badge>
+                                            {isPrimary && onEditNote && onDeleteNote && (
+                                                <DropdownMenu>
+                                                    <DropdownMenuTrigger asChild>
+                                                        <Button variant="ghost" size="sm" className="h-6 w-6 p-0">
+                                                            <MoreVerticalIcon className="h-3 w-3" />
+                                                        </Button>
+                                                    </DropdownMenuTrigger>
+                                                    <DropdownMenuContent align="end">
+                                                        <DropdownMenuItem
+                                                            onClick={() => {
+                                                                onEditNote(
+                                                                    entry.id,
+                                                                    entry.data.note,
+                                                                    !entry.isPublic,
+                                                                );
+                                                            }}
+                                                            className="cursor-pointer"
+                                                        >
+                                                            <PencilIcon className="mr-2 h-4 w-4" />
+                                                            <Trans>Edit</Trans>
+                                                        </DropdownMenuItem>
+                                                        <Separator className="my-1" />
+                                                        <DropdownMenuItem
+                                                            onClick={() => onDeleteNote(entry.id)}
+                                                            className="cursor-pointer text-red-600 focus:text-red-600"
+                                                        >
+                                                            <TrashIcon className="mr-2 h-4 w-4" />
+                                                            <span>Delete</span>
+                                                        </DropdownMenuItem>
+                                                    </DropdownMenuContent>
+                                                </DropdownMenu>
+                                            )}
+                                        </div>
+                                    </div>
+                                ) : (
+                                    children
+                                )}
+                            </div>
+                        </div>
 
-                    {isNoteEntry && (
-                        <DropdownMenu>
-                            <DropdownMenuTrigger asChild>
-                                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
-                                    <MoreVerticalIcon className="h-4 w-4" />
-                                </Button>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent align="end">
-                                <DropdownMenuItem
-                                    onClick={() => editNote(entry.id, entry.data.note, !entry.isPublic)}
-                                    className="cursor-pointer"
-                                >
-                                    <PencilIcon className="mr-2 h-4 w-4" />
-                                    <Trans>Edit</Trans>
-                                </DropdownMenuItem>
-                                <Separator className="my-1" />
-                                <DropdownMenuItem
-                                    onClick={() => deleteNote(entry.id)}
-                                    className="cursor-pointer text-red-600 focus:text-red-600"
-                                >
-                                    <TrashIcon className="mr-2 h-4 w-4" />
-                                    <span>Delete</span>
-                                </DropdownMenuItem>
-                            </DropdownMenuContent>
-                        </DropdownMenu>
-                    )}
+                        <div className="flex items-center gap-2 ml-4 flex-shrink-0">
+                            <div className="text-right">
+                                <HistoryEntryDate
+                                    date={entry.createdAt}
+                                    className={`text-xs cursor-help ${isPrimary ? 'text-muted-foreground' : 'text-muted-foreground/70'}`}
+                                />
+                                {getActorName() && (
+                                    <div
+                                        className={`text-xs ${isPrimary ? 'text-muted-foreground' : 'text-muted-foreground/70'}`}
+                                    >
+                                        {getActorName()}
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
-            <div className="border-b border-muted my-4 mx-4"></div>
         </div>
     );
 }

package/src/lib/components/shared/history-timeline/history-note-checkbox.tsx

@@ -1,12 +1,12 @@
-import { Checkbox } from '@/components/ui/checkbox.js';
-import { Trans } from '@/lib/trans.js';
+import { Checkbox } from '@/vdb/components/ui/checkbox.js';
+import { Trans } from '@/vdb/lib/trans.js';
 
 interface HistoryNoteCheckboxProps {
     value: boolean;
     onChange: (value: boolean) => void;
 }
 
-export function HistoryNoteCheckbox({ value, onChange }: HistoryNoteCheckboxProps) {
+export function HistoryNoteCheckbox({ value, onChange }: Readonly<HistoryNoteCheckboxProps>) {
     return (
         <div className="flex items-center space-x-2">
             <Checkbox

package/src/lib/components/shared/history-timeline/history-note-editor.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@/components/ui/button.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import {
     Dialog,
     DialogContent,
@@ -6,9 +6,9 @@ import {
     DialogFooter,
     DialogHeader,
     DialogTitle,
-} from '@/components/ui/dialog.js';
-import { Textarea } from '@/components/ui/textarea.js';
-import { Trans } from '@/lib/trans.js';
+} from '@/vdb/components/ui/dialog.js';
+import { Textarea } from '@/vdb/components/ui/textarea.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useState } from 'react';
 import { HistoryNoteCheckbox } from './history-note-checkbox.js';
 

package/src/lib/components/shared/history-timeline/history-note-input.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@/components/ui/button.js';
-import { Textarea } from '@/components/ui/textarea.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Textarea } from '@/vdb/components/ui/textarea.js';
 import { useState } from 'react';
 import { HistoryNoteCheckbox } from './history-note-checkbox.js';
 
@@ -7,7 +7,7 @@ interface HistoryNoteInputProps {
     onAddNote: (note: string, isPrivate: boolean) => void;
 }
 
-export function HistoryNoteInput({ onAddNote }: HistoryNoteInputProps) {
+export function HistoryNoteInput({ onAddNote }: Readonly<HistoryNoteInputProps>) {
     const [note, setNote] = useState('');
     const [noteIsPrivate, setNoteIsPrivate] = useState(true);
 
@@ -19,17 +19,17 @@ export function HistoryNoteInput({ onAddNote }: HistoryNoteInputProps) {
     };
 
     return (
-        <div className="border rounded-md p-4">
-            <div className="flex flex-col space-y-4">
+        <div className="bg-muted/20 rounded-lg p-3 mb-4">
+            <div className="flex flex-col space-y-2">
                 <Textarea
                     placeholder="Add a note..."
                     value={note}
                     onChange={e => setNote(e.target.value)}
-                    className="min-h-[80px] resize-none"
+                    className="min-h-[50px] resize-none bg-background/50 focus:bg-background transition-colors text-sm"
                 />
                 <div className="flex items-center justify-between">
                     <HistoryNoteCheckbox value={noteIsPrivate} onChange={setNoteIsPrivate} />
-                    <Button onClick={handleAddNote} disabled={!note.trim()} size="sm">
+                    <Button onClick={handleAddNote} disabled={!note.trim()} size="sm" className="h-7 px-3 text-xs">
                         Add note
                     </Button>
                 </div>

package/src/lib/components/shared/history-timeline/history-timeline.tsx

@@ -1,56 +1,16 @@
-import { ScrollArea } from '@/components/ui/scroll-area.js';
-import { useState, createContext, useContext } from 'react';
-import { HistoryNoteEditor } from './history-note-editor.js';
+import { ScrollArea } from '@/vdb/components/ui/scroll-area.js';
 
 interface HistoryTimelineProps {
     children: React.ReactNode;
-    onEditNote?: (entryId: string, note: string, isPublic: boolean) => void;
-    onDeleteNote?: (entryId: string) => void;
 }
 
-// Use context to make the note editing functions available to the child
-// HistoryEntry component
-const HistoryTimelineContext = createContext<{
-    editNote: (noteId: string, note: string, isPrivate: boolean) => void;
-    deleteNote: (noteId: string) => void;
-}>({ editNote: () => {}, deleteNote: () => {} });
-
-type NoteEditorNote = { noteId: string; note: string; isPrivate: boolean };
-
-export function useHistoryTimeline() {
-    return useContext(HistoryTimelineContext);
-}
-
-export function HistoryTimeline({ children, onEditNote, onDeleteNote }: HistoryTimelineProps) {
-    const [noteEditorOpen, setNoteEditorOpen] = useState(false);
-    const [noteEditorNote, setNoteEditorNote] = useState<NoteEditorNote>({ noteId: '', note: '', isPrivate: true });
-
-    const editNote = (noteId: string, note: string, isPrivate: boolean) => {
-        setNoteEditorNote({ noteId, note, isPrivate });
-        setNoteEditorOpen(true);
-    }
-
-    const deleteNote = (noteId: string) => {
-        setNoteEditorNote({ noteId, note: '', isPrivate: true });
-    }
-
+export function HistoryTimeline({ children }: Readonly<HistoryTimelineProps>) {
     return (
-        <HistoryTimelineContext.Provider value={{ editNote, deleteNote }}>
-            <ScrollArea className=" pr-4">
-                <div className="relative">
-                    <div className="absolute left-5 top-0 bottom-[44px] w-0.5 bg-gray-200" />
-                {children}
-                </div>
-            </ScrollArea>
-            <HistoryNoteEditor
-                key={noteEditorNote.noteId}
-                note={noteEditorNote.note}
-                onNoteChange={(...args) => onEditNote?.(...args)}
-                open={noteEditorOpen}
-                onOpenChange={setNoteEditorOpen}
-                noteId={noteEditorNote.noteId}
-                isPrivate={noteEditorNote.isPrivate}
-            />
-        </HistoryTimelineContext.Provider>
+        <ScrollArea className="pr-2">
+            <div className="relative">
+                <div className="absolute left-6 top-6 bottom-0 w-px bg-gradient-to-b from-border via-border/50 to-transparent" />
+                <div className="space-y-0.5">{children}</div>
+            </div>
+        </ScrollArea>
     );
 }

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

@@ -1,9 +1,9 @@
-import { api } from '@/graphql/api.js';
-import { graphql } from '@/graphql/graphql.js';
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { useLingui } from '@/vdb/lib/trans.js';
 import { useQuery } from '@tanstack/react-query';
-import { useLocalFormat } from '@/hooks/use-local-format.js';
 import { MultiSelect } from './multi-select.js';
-import { useLingui } from '@/lib/trans.js';
 
 const availableGlobalLanguages = graphql(`
     query AvailableGlobalLanguages {
@@ -32,7 +32,7 @@ export function LanguageSelector<T extends boolean>(props: LanguageSelectorProps
 
     const items = (availableLanguageCodes ?? data?.globalSettings.availableLanguages ?? []).map(language => ({
         value: language,
-        label: formatLanguageName(language)
+        label: formatLanguageName(language),
     }));
 
     return (

package/src/lib/components/shared/logo-mark.tsx

@@ -6,8 +6,8 @@ export function LogoMark(props: React.ComponentProps<'svg'>) {
                 fill="currentColor"
             />
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M174.388 4.798a2.148 2.148 0 0 0-2.136 2.157c0 1.191.957 2.158 2.136 2.158a2.149 2.149 0 0 0 2.137-2.158c0-1.19-.958-2.157-2.137-2.157Zm-2.611 2.157c0-1.456 1.169-2.637 2.611-2.637 1.443 0 2.612 1.181 2.612 2.637 0 1.457-1.169 2.638-2.612 2.638-1.442 0-2.611-1.181-2.611-2.638Z"
                 fill="currentColor"
             />

package/src/lib/components/shared/multi-select.tsx

@@ -1,8 +1,8 @@
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
-import { Badge } from '@/components/ui/badge.js';
-import { X, ChevronDown } from 'lucide-react';
-import { cn } from '@/lib/utils.js';
-import { Button } from '@/components/ui/button.js';
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { ChevronDown, X } from 'lucide-react';
 import { useState } from 'react';
 import { Input } from '../ui/input.js';
 
@@ -71,7 +71,7 @@ export function MultiSelect<T extends boolean>(props: MultiSelectProps<T>) {
                     className={cn(
                         'w-full justify-between',
                         'min-h-[2.5rem] h-auto',
-                        'flex flex-wrap gap-1 p-1',
+                        'flex flex-wrap gap-1 p-1 shadow-xs',
                         className,
                     )}
                 >

package/src/lib/components/shared/navigation-confirmation.tsx

@@ -1,9 +1,16 @@
-import { Trans } from '@/lib/trans.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { useBlocker } from '@tanstack/react-router';
 import { UseFormReturn } from 'react-hook-form';
 
 import { Button } from '../ui/button.js';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '../ui/dialog.js';
 
 export interface NavigationConfirmationProps {
     form: UseFormReturn<any>;
@@ -14,11 +21,13 @@ export interface NavigationConfirmationProps {
  */
 export function NavigationConfirmation(props: Readonly<NavigationConfirmationProps>) {
     const { proceed, reset, status } = useBlocker({
-        shouldBlockFn: (args) => {
+        shouldBlockFn: args => {
             // When a new entity is being created, we don't want to block navigation
             // to the newly-created entity page.
-            const isNavigatingToNewlyCreatedEntity = args.current.fullPath === args.next.fullPath
-                && args.current.params.id === 'new' && args.next.params.id !== 'new'
+            const isNavigatingToNewlyCreatedEntity =
+                args.current.fullPath === args.next.fullPath &&
+                args.current.params.id === 'new' &&
+                args.next.params.id !== 'new';
             if (isNavigatingToNewlyCreatedEntity) {
                 return false;
             }
@@ -31,14 +40,20 @@ export function NavigationConfirmation(props: Readonly<NavigationConfirmationPro
         <Dialog open={status === 'blocked'} onOpenChange={reset}>
             <DialogContent className="sm:max-w-[425px]">
                 <DialogHeader>
-                    <DialogTitle><Trans>Confirm navigation</Trans></DialogTitle>
+                    <DialogTitle>
+                        <Trans>Confirm navigation</Trans>
+                    </DialogTitle>
                     <DialogDescription>
-                        <Trans>Are you sure you want to navigate away from this page? Any unsaved changes will be
-                            lost.</Trans>
+                        <Trans>
+                            Are you sure you want to navigate away from this page? Any unsaved changes will be
+                            lost.
+                        </Trans>
                     </DialogDescription>
                 </DialogHeader>
                 <DialogFooter>
-                    <Button variant="outline" onClick={reset}><Trans>Cancel</Trans></Button>
+                    <Button variant="outline" onClick={reset}>
+                        <Trans>Cancel</Trans>
+                    </Button>
                     <Button type="button" onClick={proceed}>
                         <Trans>Confirm</Trans>
                     </Button>

package/src/lib/components/shared/option-value-input.tsx

@@ -1,10 +1,9 @@
-import { useFieldArray } from "react-hook-form";
-import { useFormContext } from "react-hook-form";
-import { useState } from "react";
-import { Input } from "@/components/ui/input.js";
-import { Button } from "@/components/ui/button.js";
-import { Badge } from "@/components/ui/badge.js";
-import { Plus, X } from "lucide-react";
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Plus, X } from 'lucide-react';
+import { useState } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
 
 interface OptionValue {
     value: string;
@@ -16,12 +15,15 @@ interface FormValues {
         name: string;
         values: OptionValue[];
     }[];
-    variants: Record<string, {
-        enabled: boolean;
-        sku: string;
-        price: string;
-        stock: string;
-    }>;
+    variants: Record<
+        string,
+        {
+            enabled: boolean;
+            sku: string;
+            price: string;
+            stock: string;
+        }
+    >;
 }
 
 interface OptionValueInputProps {
@@ -29,8 +31,8 @@ interface OptionValueInputProps {
     disabled?: boolean;
 }
 
-export function OptionValueInput({ groupIndex, disabled = false }: OptionValueInputProps) {
-    const { control, watch } = useFormContext<FormValues>();
+export function OptionValueInput({ groupIndex, disabled = false }: Readonly<OptionValueInputProps>) {
+    const { control } = useFormContext<FormValues>();
     const { fields, append, remove } = useFieldArray({
         control,
         name: `optionGroups.${groupIndex}.values`,
@@ -92,4 +94,4 @@ export function OptionValueInput({ groupIndex, disabled = false }: OptionValueIn
             </div>
         </div>
     );
-}
+}