@wilshop/dashboard 3.5.2

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

@@ -0,0 +1,65 @@
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/vdb/components/ui/dropdown-menu.js';
+import { Separator } from '@/vdb/components/ui/separator.js';
+import { HistoryEntry, HistoryEntryProps } from '@/vdb/framework/history-entry/history-entry.js';
+import { Trans } from '@lingui/react/macro';
+import { MoreVerticalIcon, PencilIcon, TrashIcon } from 'lucide-react';
+
+interface HistoryNoteEntryProps extends Readonly<HistoryEntryProps> {
+    onEditNote?: (noteId: string, note: string, isPrivate: boolean) => void;
+    onDeleteNote?: (noteId: string) => void;
+}
+
+export function HistoryNoteEntry(props: HistoryNoteEntryProps) {
+    const { entry, isPrimary, onEditNote, onDeleteNote } = props;
+    return (
+        <HistoryEntry {...props}>
+            <div className={isPrimary ? 'space-y-2' : 'space-y-1'}>
+                <div className="space-y-1">
+                    <p className={`${isPrimary ? 'text-sm' : 'text-xs'} text-foreground`}>
+                        {entry.data.note}
+                    </p>
+                </div>
+                {onEditNote && onDeleteNote && (
+                    <div className="flex items-center gap-2">
+                        <Badge variant={entry.isPublic ? 'outline' : 'secondary'} className="text-xs">
+                            {entry.isPublic ? 'Public' : 'Private'}
+                        </Badge>
+                        <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>
+        </HistoryEntry>
+    );
+}

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

@@ -0,0 +1,39 @@
+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';
+
+interface HistoryNoteInputProps {
+    onAddNote: (note: string, isPrivate: boolean) => void;
+}
+
+export function HistoryNoteInput({ onAddNote }: Readonly<HistoryNoteInputProps>) {
+    const [note, setNote] = useState('');
+    const [noteIsPrivate, setNoteIsPrivate] = useState(true);
+
+    const handleAddNote = () => {
+        if (note.trim()) {
+            onAddNote(note, noteIsPrivate);
+            setNote('');
+        }
+    };
+
+    return (
+        <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-[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" className="h-7 px-3 text-xs">
+                        Add note
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,141 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import { HistoryEntryItem } from '@/vdb/framework/extension-api/types/history-entries.js';
+import { getCustomHistoryEntryForType } from '@/vdb/framework/history-entry/history-entry-extensions.js';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { ReactNode, useState } from 'react';
+import { CustomerHistoryCustomerDetail } from '../../../../app/routes/_authenticated/_customers/components/customer-history/customer-history-types.js';
+import { OrderHistoryOrderDetail } from '../../../../app/routes/_authenticated/_orders/components/order-history/order-history-types.js';
+import { HistoryTimeline } from './history-timeline.js';
+
+interface HistoryTimelineWithGroupingProps {
+    historyEntries: HistoryEntryItem[];
+    entity: OrderHistoryOrderDetail | CustomerHistoryCustomerDetail;
+    isPrimaryEvent: (entry: HistoryEntryItem) => boolean;
+    renderEntryContent: (entry: HistoryEntryItem) => ReactNode;
+    children?: ReactNode;
+}
+
+type EntryWithIndex = {
+    entry: HistoryEntryItem;
+    index: number;
+};
+
+export function HistoryTimelineWithGrouping({
+    historyEntries,
+    entity,
+    isPrimaryEvent,
+    renderEntryContent,
+    children,
+}: Readonly<HistoryTimelineWithGroupingProps>) {
+    const [expandedGroups, setExpandedGroups] = useState<Set<number>>(new Set());
+
+    // Group consecutive secondary events
+    const groupedEntries: Array<
+        | ({ type: 'primary' } & EntryWithIndex)
+        | {
+              type: 'secondary-group';
+              entries: Array<EntryWithIndex>;
+              startIndex: number;
+          }
+    > = [];
+    let currentGroup: Array<EntryWithIndex> = [];
+
+    for (let i = 0; i < historyEntries.length; i++) {
+        const entry = historyEntries[i];
+        const isSecondary = !isPrimaryEvent(entry);
+
+        if (isSecondary) {
+            currentGroup.push({ entry, index: i });
+        } else {
+            // If we have accumulated secondary events, add them as a group
+            if (currentGroup.length > 0) {
+                groupedEntries.push({
+                    type: 'secondary-group',
+                    entries: currentGroup,
+                    startIndex: currentGroup[0].index,
+                });
+                currentGroup = [];
+            }
+            // Add the primary event
+            groupedEntries.push({ type: 'primary', entry, index: i });
+        }
+    }
+
+    // Don't forget the last group if it exists
+    if (currentGroup.length > 0) {
+        groupedEntries.push({
+            type: 'secondary-group',
+            entries: currentGroup,
+            startIndex: currentGroup[0].index,
+        });
+    }
+
+    const renderEntry = (entry: HistoryEntryItem) => {
+        const CustomType = getCustomHistoryEntryForType(entry.type);
+        if (CustomType) {
+            return <CustomType entry={entry} entity={entity} />;
+        } else {
+            return renderEntryContent(entry);
+        }
+    };
+
+    const toggleGroup = (groupIndex: number) => {
+        const newExpanded = new Set(expandedGroups);
+        if (newExpanded.has(groupIndex)) {
+            newExpanded.delete(groupIndex);
+        } else {
+            newExpanded.add(groupIndex);
+        }
+        setExpandedGroups(newExpanded);
+    };
+
+    return (
+        <div className="">
+            {children && <div className="mb-4">{children}</div>}
+            <HistoryTimeline>
+                {groupedEntries.map((group, groupIndex) => {
+                    if (group.type === 'primary') {
+                        const entry = group.entry;
+                        return <div key={entry.id}>{renderEntry(entry)}</div>;
+                    } else {
+                        // Secondary group
+                        const shouldCollapse = group.entries.length > 2;
+                        const isExpanded = expandedGroups.has(groupIndex);
+                        const visibleEntries =
+                            shouldCollapse && !isExpanded ? group.entries.slice(0, 2) : group.entries;
+
+                        return (
+                            <div key={`group-${groupIndex}`}>
+                                {visibleEntries.map(({ entry }) => (
+                                    <div key={entry.id}>{renderEntry(entry)}</div>
+                                ))}
+                                {shouldCollapse && (
+                                    <div className="flex justify-center py-2">
+                                        <Button
+                                            variant="ghost"
+                                            size="sm"
+                                            onClick={() => toggleGroup(groupIndex)}
+                                            className="text-muted-foreground hover:text-foreground h-6 text-xs"
+                                        >
+                                            {isExpanded ? (
+                                                <>
+                                                    <ChevronUp className="w-3 h-3 mr-1" />
+                                                    Show less
+                                                </>
+                                            ) : (
+                                                <>
+                                                    <ChevronDown className="w-3 h-3 mr-1" />
+                                                    Show all ({group.entries.length - 2})
+                                                </>
+                                            )}
+                                        </Button>
+                                    </div>
+                                )}
+                            </div>
+                        );
+                    }
+                })}
+            </HistoryTimeline>
+        </div>
+    );
+}

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

@@ -0,0 +1,16 @@
+import { ScrollArea } from '@/vdb/components/ui/scroll-area.js';
+
+interface HistoryTimelineProps {
+    children: React.ReactNode;
+}
+
+export function HistoryTimeline({ children }: Readonly<HistoryTimelineProps>) {
+    return (
+        <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/history-timeline/use-history-note-editor.ts

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+
+export function useHistoryNoteEditor() {
+    const [noteEditorOpen, setNoteEditorOpen] = useState(false);
+    const [noteState, setNoteState] = useState<{
+        noteId: string;
+        note: string;
+        isPrivate: boolean;
+    }>({
+        noteId: '',
+        note: '',
+        isPrivate: true,
+    });
+
+    const handleEditNote = (noteId: string, note: string, isPrivate: boolean) => {
+        setNoteState({ noteId, note, isPrivate });
+        setNoteEditorOpen(true);
+    };
+
+    return {
+        noteEditorOpen,
+        setNoteEditorOpen,
+        noteState,
+        handleEditNote,
+    };
+}

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

@@ -0,0 +1,18 @@
+export function IconMark(props: React.ComponentProps<'svg'>) {
+    return (
+        <svg viewBox="0 0 40 28" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path
+                d="M10.7466 12.6853V21.9481C10.7466 22.1142 10.8389 22.2712 10.9836 22.3527L19.3904 27.1155C19.6921 27.2846 20.0615 27.2846 20.3632 27.1155L28.77 22.3527C28.9178 22.2682 29.007 22.1142 29.007 21.9481V12.6853C29.007 12.3259 28.6099 12.0994 28.2929 12.2806L20.3632 16.7716C20.0615 16.9407 19.6921 16.9407 19.3904 16.7716L11.4607 12.2806C11.1437 12.0994 10.7466 12.3259 10.7466 12.6853Z"
+                fill="currentColor"
+            />
+            <path
+                d="M8.8932 0.749702L0.486371 5.50943C0.184698 5.67856 0 5.99568 0 6.33393V15.8564C0 16.0225 0.0923489 16.1796 0.237029 16.2611L8.41299 20.894C8.73005 21.0752 9.12715 20.8487 9.12715 20.4893V11.5074C9.12715 11.1661 9.31185 10.852 9.61352 10.6829L17.5432 6.19199C17.8603 6.01078 17.8603 5.56077 17.5432 5.38258L9.36726 0.749702C9.2195 0.665138 9.03788 0.665138 8.89012 0.749702H8.8932Z"
+                fill="currentColor"
+            />
+            <path
+                d="M30.86 0.740669L39.2668 5.5004C39.5685 5.66953 39.7532 5.98664 39.7532 6.3249V15.8474C39.7532 16.0135 39.6608 16.1705 39.5162 16.2521L31.3402 20.885C31.0231 21.0662 30.626 20.8397 30.626 20.4803V11.4984C30.626 11.1571 30.4413 10.843 30.1397 10.6739L22.21 6.18295C21.8929 6.00174 21.8929 5.55174 22.21 5.37355L30.3859 0.740669C30.5337 0.656105 30.7153 0.656105 30.8631 0.740669H30.86Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+}

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

@@ -0,0 +1,56 @@
+import { api } from '@/vdb/graphql/api.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { useSortedLanguages } from '@/vdb/hooks/use-sorted-languages.js';
+import { useLingui } from '@lingui/react/macro';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { MultiSelect } from './multi-select.js';
+
+const availableGlobalLanguages = graphql(`
+    query AvailableGlobalLanguages {
+        globalSettings {
+            availableLanguages
+        }
+    }
+`);
+
+export interface LanguageSelectorProps<T extends boolean> {
+    value: T extends true ? string[] : string;
+    onChange: (value: T extends true ? string[] : string) => void;
+    multiple?: T;
+    availableLanguageCodes?: string[];
+}
+
+export function LanguageSelector<T extends boolean>(props: LanguageSelectorProps<T>) {
+    const { data } = useQuery({
+        queryKey: ['availableGlobalLanguages'],
+        queryFn: () => api.query(availableGlobalLanguages),
+        staleTime: 1000 * 60 * 5, // 5 minutes
+    });
+    const { value, onChange, multiple, availableLanguageCodes } = props;
+    const { t } = useLingui();
+
+    const sortedLanguages = useSortedLanguages(
+        availableLanguageCodes ?? data?.globalSettings.availableLanguages ?? undefined,
+    );
+
+    const items = useMemo(
+        () =>
+            sortedLanguages.map(language => ({
+                value: language.code,
+                label: language.label,
+            })),
+        [sortedLanguages],
+    );
+
+    return (
+        <MultiSelect
+            value={value}
+            onChange={onChange}
+            multiple={multiple}
+            items={items}
+            placeholder={t`Select a language`}
+            searchPlaceholder={t`Search languages...`}
+        />
+    );
+}

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

@@ -0,0 +1,24 @@
+export function LogoMark(props: React.ComponentProps<'svg'>) {
+    return (
+        <svg viewBox="0 0 177 33" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path
+                d="M65.192 9.73a.729.729 0 0 0-.593-.307h-2.503a.733.733 0 0 0-.685.487l-4.263 12.438-4.33-12.445a.721.721 0 0 0-.684-.486h-2.577a.73.73 0 0 0-.592.307.753.753 0 0 0-.092.662l6.139 17.077c.098.288.37.48.675.48h2.726a.708.708 0 0 0 .675-.48l6.174-17.076a.699.699 0 0 0-.092-.663l.016.01.006-.004ZM83.004 19.262c.026-.272.041-.646.041-1.133 0-1.719-.386-3.3-1.144-4.705a8.804 8.804 0 0 0-3.16-3.357c-1.34-.82-2.865-1.242-4.51-1.242-1.746 0-3.334.428-4.716 1.274-1.382.845-2.469 2.035-3.242 3.53-.767 1.479-1.154 3.175-1.154 5.035 0 1.86.396 3.556 1.17 5.044.782 1.498 1.885 2.689 3.277 3.53 1.391.846 2.995 1.275 4.767 1.275 1.901 0 3.581-.388 4.995-1.166a9.396 9.396 0 0 0 3.423-3.216.739.739 0 0 0-.206-.992l-1.959-1.316c-.165-.109-.361-.15-.561-.109a.728.728 0 0 0-.46.33 5.63 5.63 0 0 1-2.04 2.026c-.84.48-1.934.726-3.259.726-1.581 0-2.789-.521-3.695-1.603a6.478 6.478 0 0 1-1.465-3.3h13.185c.37 0 .685-.282.716-.653v.016l-.003.006Zm-13.647-2.836a6.03 6.03 0 0 1 1.505-2.58c.872-.876 1.968-1.305 3.36-1.305 1.391 0 2.545.371 3.36 1.133.665.627 1.144 1.555 1.407 2.746H69.35l.01.01-.003-.004ZM100.347 12.054a6.516 6.516 0 0 0-2.69-2.423 8.235 8.235 0 0 0-3.598-.803c-1.391 0-2.633.339-3.705 1.002-.437.272-.84.595-1.201.96v-.653a.726.726 0 0 0-.726-.727h-2.469a.728.728 0 0 0-.726.727v17.076c0 .397.32.727.726.727h2.47a.728.728 0 0 0 .725-.727V18.67c0-1.927.396-3.473 1.176-4.58.732-1.044 1.829-1.556 3.334-1.556 2.586 0 3.788 1.38 3.788 4.35v10.329c0 .397.32.727.725.727h2.469a.728.728 0 0 0 .726-.727v-11.42c0-1.421-.336-2.68-.995-3.739h-.029ZM121.243.003h-2.459a.729.729 0 0 0-.726.73v10.082a7.873 7.873 0 0 0-1.54-1.069c-1.125-.601-2.387-.9-3.727-.9-1.744 0-3.331.43-4.717 1.272-1.381.845-2.469 2.026-3.239 3.514-.767 1.473-1.153 3.16-1.153 5.028 0 1.87.393 3.595 1.169 5.077.783 1.495 1.886 2.689 3.277 3.534 1.389.841 2.98 1.27 4.735 1.27 1.325 0 2.568-.304 3.68-.912a7.922 7.922 0 0 0 1.515-1.056v.653c0 .397.323.726.726.726h2.469a.728.728 0 0 0 .726-.726V.73c0-.397-.32-.73-.726-.73l-.01.003Zm-3.185 18.674c0 1.2-.231 2.285-.691 3.226-.453.934-1.062 1.639-1.87 2.15-.798.513-1.686.763-2.713.763-1.027 0-1.876-.247-2.659-.762-.792-.512-1.401-1.226-1.854-2.157-.463-.945-.691-2.036-.691-3.262s.231-2.273.691-3.198c.453-.925 1.062-1.622 1.854-2.141.78-.512 1.655-.762 2.659-.762 1.005 0 1.918.247 2.713.762.789.503 1.417 1.23 1.87 2.15.463.942.691 2.027.691 3.227v.007-.003ZM140.761 9.414h-2.469a.728.728 0 0 0-.726.726v8.533c0 1.927-.396 3.473-1.176 4.58-.732 1.044-1.829 1.556-3.334 1.556-2.583 0-3.788-1.38-3.788-4.35V10.13a.726.726 0 0 0-.726-.726h-2.469a.727.727 0 0 0-.725.726v11.42c0 1.422.336 2.68.995 3.74a6.494 6.494 0 0 0 2.691 2.422 8.263 8.263 0 0 0 3.597.804c1.391 0 2.634-.34 3.705-1.002.437-.272.84-.586 1.211-.96v.653c0 .396.32.726.726.726h2.469a.727.727 0 0 0 .725-.726V10.14a.726.726 0 0 0-.725-.726h.019ZM155.578 9.125a6.292 6.292 0 0 0-1.886-.288c-1.407 0-2.685.397-3.81 1.191-.485.34-.938.746-1.359 1.216v-1.091a.726.726 0 0 0-.726-.727h-2.469a.728.728 0 0 0-.726.727v17.076c0 .397.32.727.726.727h2.469a.728.728 0 0 0 .726-.727v-8.171c0-1.39.247-2.596.741-3.605.485-.982 1.129-1.738 1.911-2.25a4.46 4.46 0 0 1 2.511-.761c.5 0 .947.099 1.359.297.222.109.485.09.691-.042a.731.731 0 0 0 .336-.61V9.82a.718.718 0 0 0-.501-.685l.01-.01h-.003ZM173.399 19.262c.026-.272.042-.637.042-1.133 0-1.719-.387-3.306-1.135-4.705a8.802 8.802 0 0 0-3.16-3.358c-1.341-.819-2.865-1.232-4.51-1.232-1.746 0-3.334.429-4.716 1.274-1.382.845-2.469 2.036-3.242 3.53-.764 1.48-1.154 3.176-1.154 5.035 0 1.86.396 3.556 1.169 5.045.783 1.498 1.886 2.688 3.284 3.53 1.391.845 2.995 1.274 4.767 1.274 1.901 0 3.581-.387 4.995-1.165a9.396 9.396 0 0 0 3.423-3.217.739.739 0 0 0-.206-.992l-1.959-1.316c-.165-.108-.361-.15-.561-.108a.743.743 0 0 0-.459.33 5.592 5.592 0 0 1-2.051 2.025c-.84.48-1.933.727-3.258.727-1.582 0-2.789-.522-3.696-1.604a6.48 6.48 0 0 1-1.464-3.3h13.188a.717.717 0 0 0 .716-.653l-.009.01-.004.003Zm-13.647-2.836a6.039 6.039 0 0 1 1.505-2.58c.872-.877 1.969-1.305 3.36-1.305 1.391 0 2.542.37 3.36 1.133.665.627 1.144 1.555 1.407 2.746h-9.638l.009.01-.003-.004Z"
+                fill="currentColor"
+            />
+            <path
+                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"
+            />
+            <path
+                d="M174.242 6.738c.146 0 .254-.03.321-.087.063-.054.098-.147.098-.275 0-.128-.035-.218-.098-.272-.064-.055-.172-.08-.321-.08h-.301v.717h.301v-.003Zm-.297.496V8.29h-.714V5.499h1.088c.364 0 .63.06.798.186.171.121.254.316.254.585a.76.76 0 0 1-.13.455.766.766 0 0 1-.399.26.59.59 0 0 1 .263.153c.079.08.155.198.234.361l.39.791h-.758l-.339-.695c-.066-.137-.136-.236-.206-.284a.463.463 0 0 0-.279-.08h-.199l-.003.003ZM11.065 17.572v9.817a.5.5 0 0 0 .244.429l8.655 5.047a1 1 0 0 0 1.002 0l8.655-5.047a.497.497 0 0 0 .245-.429v-9.817a.49.49 0 0 0-.736-.429l-8.164 4.76a1 1 0 0 1-1.002 0l-8.164-4.76a.49.49 0 0 0-.736.43Z"
+                fill="currentColor"
+            />
+            <path
+                d="M9.156 4.923.501 9.967c-.31.18-.501.516-.501.874v10.092a.5.5 0 0 0 .244.429l8.418 4.91a.49.49 0 0 0 .735-.429v-9.519c0-.362.19-.695.501-.874l8.165-4.76a.498.498 0 0 0 0-.857l-8.418-4.91a.482.482 0 0 0-.492 0h.003ZM31.773 4.913l8.656 5.045c.31.179.501.515.501.873v10.092a.5.5 0 0 1-.244.43l-8.418 4.91a.49.49 0 0 1-.735-.43v-9.519c0-.361-.19-.694-.501-.873l-8.165-4.76a.498.498 0 0 1 0-.858l8.418-4.91c.152-.09.34-.09.492 0h-.004Z"
+                fill="currentColor"
+            />
+        </svg>
+    );
+}

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

@@ -0,0 +1,159 @@
+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';
+
+export interface MultiSelectProps<T extends boolean> {
+    value: T extends true ? string[] : string;
+    onChange: (value: T extends true ? string[] : string) => void;
+    multiple?: T;
+    items: Array<{
+        value: string;
+        label: string;
+        /**
+         * The display value to use for the item.
+         * If not provided, the label will be used.
+         * This is useful for displaying a more complex value in
+         * a React component.
+         */
+        display?: string | React.ReactNode;
+    }>;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    showSearch?: boolean;
+    className?: string;
+}
+
+export function MultiSelect<T extends boolean>(props: MultiSelectProps<T>) {
+    const {
+        value,
+        onChange,
+        multiple,
+        items,
+        placeholder = 'Select items',
+        searchPlaceholder = 'Search...',
+        showSearch,
+        className,
+    } = props;
+    const [search, setSearch] = useState('');
+
+    const filteredItems = items.filter(item => item.label.toLowerCase().includes(search.toLowerCase()));
+
+    const handleSelect = (selectedValue: string) => {
+        if (multiple) {
+            const currentValue = value as string[];
+            const newValue = currentValue.includes(selectedValue)
+                ? currentValue.filter(v => v !== selectedValue)
+                : [...currentValue, selectedValue];
+            onChange(newValue as T extends true ? string[] : string);
+        } else {
+            onChange(selectedValue as T extends true ? string[] : string);
+        }
+    };
+
+    const handleRemove = (valueToRemove: string) => {
+        if (multiple) {
+            const currentValue = value as string[];
+            onChange(currentValue.filter(v => v !== valueToRemove) as T extends true ? string[] : string);
+        }
+    };
+
+    const renderTrigger = () => {
+        if (multiple) {
+            const selectedValues: string[] = typeof value === 'string' ? [value] : value;
+            return (
+                <Button
+                    variant="outline"
+                    role="combobox"
+                    className={cn(
+                        'w-full justify-between',
+                        'min-h-[2.5rem] h-auto',
+                        'flex flex-wrap gap-1 p-1 shadow-xs',
+                        className,
+                    )}
+                >
+                    <div className="flex flex-wrap gap-1">
+                        {selectedValues.length > 0 ? (
+                            selectedValues.map(selectedValue => {
+                                const item = items.find(i => i.value === selectedValue);
+                                return (
+                                    <Badge
+                                        key={selectedValue}
+                                        variant="secondary"
+                                        className="flex items-center gap-1"
+                                    >
+                                        {item?.display ?? item?.label ?? selectedValue}
+                                        <div
+                                            onClick={e => {
+                                                e.stopPropagation();
+                                                handleRemove(selectedValue);
+                                            }}
+                                            onKeyDown={e => {
+                                                if (e.key === 'Enter' || e.key === ' ') {
+                                                    e.preventDefault();
+                                                    handleRemove(selectedValue);
+                                                }
+                                            }}
+                                            role="button"
+                                            tabIndex={0}
+                                            className="ml-1 hover:text-destructive cursor-pointer"
+                                            aria-label={`Remove ${item?.label ?? selectedValue}`}
+                                        >
+                                            <X className="h-3 w-3" />
+                                        </div>
+                                    </Badge>
+                                );
+                            })
+                        ) : (
+                            <span className="text-muted-foreground">{placeholder}</span>
+                        )}
+                    </div>
+                    <ChevronDown className="h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+            );
+        }
+        const selectedItem = items.find(i => i.value === value);
+        return (
+            <Button variant="outline" role="combobox" className={cn('w-full justify-between', className)}>
+                {selectedItem ? (selectedItem.display ?? selectedItem.label) : placeholder}
+                <ChevronDown className="h-4 w-4 shrink-0 opacity-50" />
+            </Button>
+        );
+    };
+
+    return (
+        <Popover>
+            <PopoverTrigger asChild>{renderTrigger()}</PopoverTrigger>
+            <PopoverContent className="w-[200px] p-0" side="bottom" align="start" onWheel={(e) => e.stopPropagation()}>
+                {(showSearch === true || items.length > 10) && (
+                    <div className="p-2">
+                        <Input
+                            type="text"
+                            placeholder={searchPlaceholder}
+                            value={search}
+                            onChange={e => setSearch(e.target.value)}
+                            className="w-full px-2 py-1 text-sm border rounded"
+                        />
+                    </div>
+                )}
+                <div className="max-h-[300px] overflow-auto">
+                    {filteredItems.map(item => (
+                        <button
+                            key={item.value}
+                            onClick={() => handleSelect(item.value)}
+                            className={cn(
+                                'w-full px-2 py-1.5 text-sm text-left hover:bg-accent',
+                                multiple && (value as string[]).includes(item.value) && 'bg-accent',
+                            )}
+                        >
+                            {item.display ?? item.label}
+                        </button>
+                    ))}
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+}

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

@@ -0,0 +1,64 @@
+import { Trans } from '@lingui/react/macro';
+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';
+
+export interface NavigationConfirmationProps {
+    form: UseFormReturn<any>;
+}
+
+/**
+ * Navigation confirmation dialog that blocks navigation when the form is dirty.
+ */
+export function NavigationConfirmation(props: Readonly<NavigationConfirmationProps>) {
+    const { proceed, reset, status } = useBlocker({
+        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';
+            if (isNavigatingToNewlyCreatedEntity) {
+                return false;
+            }
+            return props.form.formState.isDirty;
+        },
+        withResolver: true,
+        enableBeforeUnload: () => props.form.formState.isDirty,
+    });
+    return (
+        <Dialog open={status === 'blocked'} onOpenChange={reset}>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <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>
+                    </DialogDescription>
+                </DialogHeader>
+                <DialogFooter>
+                    <Button variant="outline" onClick={reset}>
+                        <Trans>Cancel</Trans>
+                    </Button>
+                    <Button type="button" onClick={proceed}>
+                        <Trans>Confirm</Trans>
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}