@vendure/dashboard 3.3.8 → 3.4.0

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

@@ -2,6 +2,48 @@ import { Link } from '@tanstack/react-router';
 import { ChevronRight } from 'lucide-react';
 import { Button } from '../ui/button.js';
 
+/**
+ * DetailPageButton is a reusable navigation component designed to provide consistent UX
+ * across list views when linking to detail pages. It renders as a ghost button with
+ * a chevron indicator, making it easy for users to identify clickable links that
+ * navigate to detail views.
+ *
+ * @component
+ * @example
+ * // Basic usage with ID (relative navigation)
+ * <DetailPageButton id="123" label="Product Name" />
+ *
+ * @example
+ * // Custom href with search params
+ * <DetailPageButton
+ *   href="/products/detail/456"
+ *   label="Custom Product"
+ *   search={{ tab: 'variants' }}
+ * />
+ *
+ * @example
+ * // Disabled state
+ * <DetailPageButton
+ *   id="789"
+ *   label="Unavailable Item"
+ *   disabled={true}
+ * />
+ *
+ * @param {Object} props - Component props
+ * @param {string|React.ReactNode} props.label - The text or content to display in the button
+ * @param {string} [props.id] - The ID for relative navigation (creates href as `./${id}`)
+ * @param {string} [props.href] - Custom href for navigation (takes precedence over id)
+ * @param {boolean} [props.disabled=false] - Whether the button is disabled (prevents navigation)
+ * @param {Record<string, string>} [props.search] - Search parameters to include in the navigation
+ *
+ * @returns {React.ReactElement} A styled button component that navigates to detail pages
+ *
+ * @remarks
+ * - Uses TanStack Router's Link component for client-side navigation
+ * - Includes a chevron icon (hidden when disabled) to indicate navigation
+ * - Preloading is disabled by default for performance optimization
+ * - Styled as a ghost button variant for subtle, consistent appearance
+ */
 export function DetailPageButton({
     id,
     href,

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

@@ -0,0 +1,37 @@
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/vdb/components/ui/tooltip.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+
+interface HistoryEntryDateProps {
+    date: string;
+    className?: string;
+}
+
+export function HistoryEntryDate({ date, className }: Readonly<HistoryEntryDateProps>) {
+    const { formatRelativeDate, formatDate } = useLocalFormat();
+
+    const formatFullDateTime = (dateString: string) => {
+        return formatDate(dateString, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            hour: 'numeric',
+            minute: 'numeric',
+            second: 'numeric',
+        });
+    };
+
+    return (
+        <TooltipProvider>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <div className={className}>
+                        {formatRelativeDate(date)}
+                    </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <p>{formatFullDateTime(date)}</p>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+    );
+}

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

@@ -1,3 +1,4 @@
+import { Badge } from '@/vdb/components/ui/badge.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import {
     DropdownMenu,
@@ -6,11 +7,10 @@ import {
     DropdownMenuTrigger,
 } from '@/vdb/components/ui/dropdown-menu.js';
 import { Separator } from '@/vdb/components/ui/separator.js';
-import { useLocalFormat } from '@/vdb/hooks/use-local-format.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,12 +25,21 @@ 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({
@@ -39,80 +48,141 @@ export function HistoryEntry({
     timelineIcon,
     title,
     children,
+    isPrimary = true,
+    customer,
+    onEditNote,
+    onDeleteNote,
 }: Readonly<HistoryEntryProps>) {
-    const { formatDate } = useLocalFormat();
-    const { editNote, deleteNote } = useHistoryTimeline();
+    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-input.tsx

@@ -19,17 +19,17 @@ export function HistoryNoteInput({ onAddNote }: Readonly<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,63 +1,16 @@
 import { ScrollArea } from '@/vdb/components/ui/scroll-area.js';
-import { createContext, useContext, useState } from 'react';
-import { HistoryNoteEditor } from './history-note-editor.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 }: Readonly<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/translatable-form-field.tsx

@@ -1,6 +1,8 @@
 import { OverriddenFormComponent } from '@/vdb/framework/form-engine/overridden-form-component.js';
 import { LocationWrapper } from '@/vdb/framework/layout-engine/location-wrapper.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { Trans } from '@/vdb/lib/trans.js';
 import { Controller, ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
 import { FormControl, FormDescription, FormItem, FormLabel, FormMessage } from '../ui/form.js';
 import { FormFieldWrapper } from './form-field-wrapper.js';
@@ -13,6 +15,7 @@ export type TranslatableFormFieldProps<TFieldValues extends TranslatableEntity |
     ControllerProps<TFieldValues>,
     'name'
 > & {
+    label?: React.ReactNode;
     name: TFieldValues extends TranslatableEntity
         ? keyof Omit<NonNullable<TFieldValues['translations']>[number], 'languageCode'>
         : TFieldValues extends TranslatableEntity[]
@@ -24,16 +27,26 @@ export const TranslatableFormField = <
     TFieldValues extends TranslatableEntity | TranslatableEntity[] = TranslatableEntity,
 >({
     name,
+    label,
     ...props
 }: TranslatableFormFieldProps<TFieldValues>) => {
+    const { formatLanguageName } = useLocalFormat();
     const { contentLanguage } = useUserSettings().settings;
     const formValues = props.control?._formValues;
     const translations = Array.isArray(formValues) ? formValues?.[0].translations : formValues?.translations;
-    const index = translations?.findIndex(
+    const existingIndex = translations?.findIndex(
         (translation: any) => translation?.languageCode === contentLanguage,
     );
+    const index = existingIndex === -1 ? translations?.length : existingIndex;
     if (index === undefined || index === -1) {
-        return null;
+        return (
+            <FormItem>
+                {label && <FormLabel>{label}</FormLabel>}
+                <div className="text-sm text-muted-foreground">
+                    <Trans>No translation found for {formatLanguageName(contentLanguage)}</Trans>
+                </div>
+            </FormItem>
+        );
     }
     const translationName = `translations.${index}.${String(name)}` as FieldPath<TFieldValues>;
     return <Controller {...props} name={translationName} key={translationName} />;
@@ -57,6 +70,7 @@ export const TranslatableFormFieldWrapper = <
     return (
         <LocationWrapper identifier={name as string}>
             <TranslatableFormField
+                label={label}
                 control={props.control}
                 name={name}
                 render={renderArgs => (

package/src/lib/framework/defaults.ts

@@ -18,8 +18,8 @@ export function registerDefaults() {
     setNavMenuConfig({
         sections: [
             {
-                id: 'dashboard',
-                title: 'Dashboard',
+                id: 'insights',
+                title: 'Insights',
                 placement: 'top',
                 icon: LayoutDashboardIcon,
                 url: '/',
@@ -29,7 +29,6 @@ export function registerDefaults() {
                 id: 'catalog',
                 title: 'Catalog',
                 icon: SquareTerminal,
-                defaultOpen: true,
                 placement: 'top',
                 order: 200,
                 items: [
@@ -69,7 +68,6 @@ export function registerDefaults() {
                 id: 'sales',
                 title: 'Sales',
                 icon: ShoppingCart,
-                defaultOpen: true,
                 placement: 'top',
                 order: 300,
                 items: [
@@ -85,7 +83,6 @@ export function registerDefaults() {
                 id: 'customers',
                 title: 'Customers',
                 icon: Users,
-                defaultOpen: false,
                 placement: 'top',
                 order: 400,
                 items: [
@@ -107,7 +104,6 @@ export function registerDefaults() {
                 id: 'marketing',
                 title: 'Marketing',
                 icon: Mail,
-                defaultOpen: false,
                 placement: 'top',
                 order: 500,
                 items: [
@@ -123,9 +119,8 @@ export function registerDefaults() {
                 id: 'system',
                 title: 'System',
                 icon: Terminal,
-                defaultOpen: false,
                 placement: 'bottom',
-                order: 100,
+                order: 200,
                 items: [
                     {
                         id: 'job-queue',
@@ -151,9 +146,8 @@ export function registerDefaults() {
                 id: 'settings',
                 title: 'Settings',
                 icon: Settings2,
-                defaultOpen: false,
                 placement: 'bottom',
-                order: 200,
+                order: 100,
                 items: [
                     {
                         id: 'sellers',

package/src/lib/framework/extension-api/define-dashboard-extension.ts

@@ -7,6 +7,7 @@ import {
     registerDetailFormExtensions,
     registerFormComponentExtensions,
     registerLayoutExtensions,
+    registerLoginExtensions,
     registerNavigationExtensions,
     registerWidgetExtensions,
 } from './logic/index.js';
@@ -57,6 +58,9 @@ export function defineDashboardExtension(extension: DashboardExtension) {
         // Register alert extensions
         registerAlertExtensions(extension.alerts);
 
+        // Register login extensions
+        registerLoginExtensions(extension.login);
+
         // Execute extension source change callbacks
         const callbacks = globalRegistry.get('extensionSourceChangeCallbacks');
         if (callbacks.size) {

package/src/lib/framework/extension-api/extension-api-types.ts

@@ -5,6 +5,7 @@ import {
     DashboardCustomFormComponents,
     DashboardDataTableExtensionDefinition,
     DashboardDetailFormExtensionDefinition,
+    DashboardLoginExtensions,
     DashboardNavSectionDefinition,
     DashboardPageBlockDefinition,
     DashboardRouteDefinition,
@@ -54,8 +55,7 @@ export interface DashboardExtension {
     widgets?: DashboardWidgetDefinition[];
     /**
      * @description
-     * Unified registration for custom form components including custom field components,
-     * input components, and display components.
+     * Unified registration for custom form custom field components.
      */
     customFormComponents?: DashboardCustomFormComponents;
     /**
@@ -63,5 +63,14 @@ export interface DashboardExtension {
      * Allows you to customize aspects of existing data tables in the dashboard.
      */
     dataTables?: DashboardDataTableExtensionDefinition[];
+    /**
+     * @description
+     * Allows you to customize the detail form for any page in the dashboard.
+     */
     detailForms?: DashboardDetailFormExtensionDefinition[];
+    /**
+     * @description
+     * Allows you to customize the login page with custom components.
+     */
+    login?: DashboardLoginExtensions;
 }

package/src/lib/framework/extension-api/logic/index.ts

@@ -4,5 +4,6 @@ export * from './data-table.js';
 export * from './detail-forms.js';
 export * from './form-components.js';
 export * from './layout.js';
+export * from './login.js';
 export * from './navigation.js';
 export * from './widgets.js';

package/src/lib/framework/extension-api/logic/login.ts

@@ -0,0 +1,17 @@
+import { globalRegistry } from '../../registry/global-registry.js';
+import { DashboardLoginExtensions } from '../types/login.js';
+
+export function registerLoginExtensions(loginExtensions?: DashboardLoginExtensions) {
+    if (!loginExtensions) {
+        return;
+    }
+
+    const registryKey = 'loginExtensions';
+
+    globalRegistry.set(registryKey, (oldValue: DashboardLoginExtensions) => {
+        return {
+            ...oldValue,
+            ...loginExtensions,
+        };
+    });
+}

package/src/lib/framework/extension-api/logic/navigation.ts

@@ -25,6 +25,7 @@ export function registerNavigationExtensions(
                     url: route.navMenuItem.url ?? route.path,
                     id: route.navMenuItem.id ?? route.path,
                     title: route.navMenuItem.title ?? route.path,
+                    order: route.navMenuItem.order,
                 };
                 addNavMenuItem(item, route.navMenuItem.sectionId);
             }