@leandrosk/dashboard 3.5.5-fork.2

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

@@ -0,0 +1,274 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from '@/vdb/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { useFacetValueBrowser } from '@/vdb/hooks/use-facet-value-browser.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { ChevronRight, Loader2, Plus } from 'lucide-react';
+import { useState } from 'react';
+
+// Re-export types for backward compatibility — these are part of the public API
+export type { FacetValue, Facet } from '@/vdb/hooks/use-facet-value-browser.js';
+
+/**
+ * @description
+ * A component for selecting facet values.
+ *
+ * @docsCategory components
+ * @docsPage FacetValueSelector
+ * @since 3.4.0
+ */
+interface FacetValueSelectorProps {
+    /**
+     * @description
+     * The function to call when a facet value is selected.
+     *
+     * The `value` will have the following structure:
+     *
+     * ```ts
+     * {
+     *     id: string;
+     *     name: string;
+     *     code: string;
+     *     facet: {
+     *         id: string;
+     *         name: string;
+     *         code: string;
+     *     };
+     * }
+     * ```
+     */
+    onValueSelect: (value: { id: string; name: string; code: string; facet: { id: string; name: string; code: string } }) => void;
+    /**
+     * @description
+     * Whether the selector is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * @description
+     * The placeholder text for the selector.
+     */
+    placeholder?: string;
+    /**
+     * @description
+     * The number of facet values to display per page.
+     *
+     * @default 10
+     */
+    pageSize?: number;
+}
+
+/**
+ * @description
+ * A component for selecting facet values.
+ *
+ * @example
+ * ```tsx
+ * <FacetValueSelector onValueSelect={onValueSelectHandler} disabled={disabled} />
+ * ```
+ *
+ * @docsCategory components
+ * @docsPage FacetValueSelector
+ * @docsWeight 0
+ * @since 3.4.0
+ */
+export function FacetValueSelector({
+    onValueSelect,
+    disabled,
+    placeholder,
+    pageSize = 10,
+}: FacetValueSelectorProps) {
+    const [open, setOpen] = useState(false);
+    const { t } = useLingui();
+
+    const {
+        searchTerm,
+        setSearchTerm,
+        debouncedSearch,
+        minSearchLength,
+        browseMode,
+        setBrowseMode,
+        expandedFacetId,
+        setExpandedFacetId,
+        facetValues,
+        facets,
+        expandedFacetValues,
+        expandedFacetName,
+        facetGroups,
+        isLoading,
+        isFetchingNextPage,
+        isFetchingNextFacetsPage,
+        isLoadingExpandedFacet,
+        hasNextPage,
+        hasNextFacetsPage,
+        handleScroll,
+        reset,
+    } = useFacetValueBrowser({ pageSize, initialBrowseMode: false });
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button variant="outline" size="sm" type="button" disabled={disabled} className="gap-2">
+                    <Plus className="h-4 w-4" />
+                    <Trans>Add facet values</Trans>
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0 w-[400px]" align="start">
+                <Command shouldFilter={false}>
+                    <CommandInput
+                        placeholder={placeholder ?? t`Search facet values...`}
+                        value={searchTerm}
+                        onValueChange={value => {
+                            setSearchTerm(value);
+                            setExpandedFacetId(null);
+                            setBrowseMode(false);
+                        }}
+                        onKeyDown={e => {
+                            if (
+                                e.key === 'ArrowDown' &&
+                                !browseMode &&
+                                debouncedSearch.length < minSearchLength
+                            ) {
+                                e.preventDefault();
+                                setBrowseMode(true);
+                            }
+                        }}
+                        disabled={disabled}
+                    />
+                    <CommandList className="h-[200px] overflow-y-auto" onScroll={handleScroll}>
+                        <CommandEmpty>
+                            {debouncedSearch.length < 2 && !browseMode ? (
+                                <div className="flex flex-col items-center gap-2 py-4">
+                                    <div className="text-sm text-muted-foreground">
+                                        <Trans>Type at least 2 characters to search...</Trans>
+                                    </div>
+                                    <Button
+                                        variant="outline"
+                                        size="sm"
+                                        onClick={() => setBrowseMode(true)}
+                                        type="button"
+                                    >
+                                        <Trans>Browse facets</Trans>
+                                    </Button>
+                                </div>
+                            ) : isLoading ? (
+                                <Trans>Loading...</Trans>
+                            ) : (
+                                <div className="flex flex-col items-center gap-2 py-4">
+                                    <div className="text-sm text-muted-foreground">
+                                        <Trans>No results found</Trans>
+                                    </div>
+                                    {!browseMode && (
+                                        <Button
+                                            variant="outline"
+                                            size="sm"
+                                            onClick={() => setBrowseMode(true)}
+                                            type="button"
+                                        >
+                                            <Trans>Browse facets</Trans>
+                                        </Button>
+                                    )}
+                                </div>
+                            )}
+                        </CommandEmpty>
+
+                        {expandedFacetId ? (
+                            <>
+                                <CommandGroup>
+                                    <CommandItem
+                                        onSelect={() => {
+                                            setExpandedFacetId(null);
+                                            setBrowseMode(false);
+                                        }}
+                                        className="cursor-pointer"
+                                    >
+                                        ← <Trans>Back to search</Trans>
+                                    </CommandItem>
+                                </CommandGroup>
+                                <CommandGroup heading={expandedFacetName}>
+                                    {expandedFacetValues.map(facetValue => (
+                                        <CommandItem
+                                            key={facetValue.id}
+                                            value={facetValue.id}
+                                            onSelect={() => {
+                                                onValueSelect(facetValue);
+                                                reset();
+                                                setOpen(false);
+                                            }}
+                                        >
+                                            {facetValue.name}
+                                        </CommandItem>
+                                    ))}
+                                </CommandGroup>
+                                {(isFetchingNextPage || isLoadingExpandedFacet) && (
+                                    <div className="flex items-center justify-center py-2">
+                                        <Loader2 className="h-4 w-4 animate-spin" />
+                                    </div>
+                                )}
+                                {!hasNextPage && expandedFacetValues.length > 0 && (
+                                    <div className="text-center py-2 text-sm text-muted-foreground">
+                                        <Trans>No more items</Trans>
+                                    </div>
+                                )}
+                            </>
+                        ) : (
+                            <>
+                                {facets.length > 0 && (
+                                    <>
+                                        <CommandGroup heading={<Trans>Facets</Trans>}>
+                                            {facets.map(facet => (
+                                                <CommandItem
+                                                    key={facet.id}
+                                                    value={`facet-${facet.id}`}
+                                                    onSelect={() => setExpandedFacetId(facet.id)}
+                                                    className="cursor-pointer"
+                                                >
+                                                    <span className="flex-1">{facet.name}</span>
+                                                    <ChevronRight className="h-4 w-4" />
+                                                </CommandItem>
+                                            ))}
+                                        </CommandGroup>
+                                        {browseMode && isFetchingNextFacetsPage && (
+                                            <div className="flex items-center justify-center py-2">
+                                                <Loader2 className="h-4 w-4 animate-spin" />
+                                            </div>
+                                        )}
+                                        {browseMode && !hasNextFacetsPage && facets.length > 0 && (
+                                            <div className="text-center py-2 text-sm text-muted-foreground">
+                                                <Trans>No more facets</Trans>
+                                            </div>
+                                        )}
+                                    </>
+                                )}
+
+                                {Object.entries(facetGroups).map(([facetId, values]) => (
+                                    <CommandGroup key={facetId} heading={values[0]?.facet.name}>
+                                        {values.map(facetValue => (
+                                            <CommandItem
+                                                key={facetValue.id}
+                                                value={facetValue.id}
+                                                onSelect={() => {
+                                                    onValueSelect(facetValue);
+                                                    reset();
+                                                    setOpen(false);
+                                                }}
+                                            >
+                                                {facetValue.name}
+                                            </CommandItem>
+                                        ))}
+                                    </CommandGroup>
+                                ))}
+                            </>
+                        )}
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}

package/src/lib/components/shared/form-field-wrapper.tsx

@@ -0,0 +1,111 @@
+import { OverriddenFormComponent } from '@/vdb/framework/form-engine/overridden-form-component.js';
+import { LocationWrapper } from '@/vdb/framework/layout-engine/location-wrapper.js';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../ui/form.js';
+
+/**
+ * @description
+ * The props for the FormFieldWrapper component.
+ *
+ * @docsCategory form-components
+ * @docsPage FormFieldWrapper
+ * @since 3.4.0
+ */
+export type FormFieldWrapperProps<
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = React.ComponentProps<typeof FormField<TFieldValues, TName>> & {
+    /**
+     * @description
+     * The label for the form field.
+     */
+    label?: React.ReactNode;
+    /**
+     * @description
+     * The description for the form field.
+     */
+    description?: React.ReactNode;
+    /**
+     * @description
+     * Whether to render the form control.
+     * If false, the form control will not be rendered.
+     * This is useful when you want to render the form control in a custom way, e.g. for <Select/> components,
+     * where the FormControl needs to nested in the root component.
+     *
+     * @default true
+     */
+    renderFormControl?: boolean;
+};
+
+/**
+ * @description
+ * This is a wrapper that can be used in all forms to wrap the actual form control, and provide a label, description and error message.
+ * 
+ * Use this instead of the default Shadcn FormField (etc.) components, as it also supports
+ * overridden form components.
+ * 
+ * @example
+ * ```tsx
+ * <PageBlock column="main" blockId="main-form">
+ *     <DetailFormGrid>
+ *         <FormFieldWrapper
+ *             control={form.control}
+ *             name="description"
+ *             label={<Trans>Description</Trans>}
+ *             render={({ field }) => <Input {...field} />}
+ *         />
+ *         <FormFieldWrapper
+ *             control={form.control}
+ *             name="code"
+ *             label={<Trans>Code</Trans>}
+ *             render={({ field }) => <Input {...field} />}
+ *         />
+ *     </DetailFormGrid>
+ * </PageBlock>
+ * ```
+ * 
+ * If you are dealing with translatable fields, use the {@link TranslatableFormFieldWrapper} component instead.
+ *
+ * @docsCategory form-components
+ * @docsPage FormFieldWrapper
+ * @docsWeight 0
+ * @since 3.4.0
+ */
+export function FormFieldWrapper<
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+    control,
+    name,
+    render,
+    label,
+    description,
+    renderFormControl = true,
+}: FormFieldWrapperProps<TFieldValues, TName>) {
+    return (
+        <LocationWrapper identifier={name}>
+            <FormField
+                control={control}
+                name={name}
+                render={renderArgs => (
+                    <FormItem>
+                        {label && <FormLabel>{label}</FormLabel>}
+                        {renderFormControl ? (
+                            <FormControl>
+                                <OverriddenFormComponent field={renderArgs.field} fieldName={name}>
+                                    {render(renderArgs)}
+                                </OverriddenFormComponent>
+                            </FormControl>
+                        ) : (
+                            <OverriddenFormComponent field={renderArgs.field} fieldName={name}>
+                                {render(renderArgs)}
+                            </OverriddenFormComponent>
+                        )}
+                        {description && <FormDescription>{description}</FormDescription>}
+                        <FormMessage />
+                    </FormItem>
+                )}
+            />
+        </LocationWrapper>
+    );
+}

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-note-checkbox.tsx

@@ -0,0 +1,28 @@
+import { Checkbox } from '@/vdb/components/ui/checkbox.js';
+import { Trans } from '@lingui/react/macro';
+
+interface HistoryNoteCheckboxProps {
+    value: boolean;
+    onChange: (value: boolean) => void;
+}
+
+export function HistoryNoteCheckbox({ value, onChange }: Readonly<HistoryNoteCheckboxProps>) {
+    return (
+        <div className="flex items-center space-x-2">
+            <Checkbox
+                id="note-private"
+                checked={value}
+                onCheckedChange={checked => onChange(checked as boolean)}
+            />
+            <label
+                htmlFor="note-private"
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+                <Trans>Note is private</Trans>
+            </label>
+            <span className={value ? 'text-gray-500 text-xs' : 'text-green-600 text-xs'}>
+                {value ? <Trans>Visible to admins only</Trans> : <Trans>Visible to customer</Trans>}
+            </span>
+        </div>
+    );
+}

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

@@ -0,0 +1,60 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/vdb/components/ui/dialog.js';
+import { Textarea } from '@/vdb/components/ui/textarea.js';
+import { Trans } from '@lingui/react/macro';
+import { useState } from 'react';
+import { HistoryNoteCheckbox } from './history-note-checkbox.js';
+
+interface NoteEditorProps {
+    note: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onNoteChange: (noteId: string, note: string, isPrivate: boolean) => void;
+    noteId: string;
+    isPrivate: boolean;
+}
+
+export function HistoryNoteEditor({
+    open,
+    onOpenChange,
+    note,
+    onNoteChange,
+    noteId,
+    isPrivate,
+}: NoteEditorProps) {
+    const [value, setValue] = useState(note);
+    const [noteIsPrivate, setNoteIsPrivate] = useState(isPrivate);
+    const handleSave = () => {
+        onNoteChange(noteId, value, noteIsPrivate);
+        onOpenChange(false);
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>
+                        <Trans>Edit Note</Trans>
+                    </DialogTitle>
+                    <DialogDescription>
+                        <Trans>Update the note content or visibility</Trans>
+                    </DialogDescription>
+                </DialogHeader>
+                <Textarea value={value} onChange={e => setValue(e.target.value)} />
+                <HistoryNoteCheckbox value={noteIsPrivate} onChange={setNoteIsPrivate} />
+                <DialogFooter>
+                    <Button onClick={() => handleSave()}>
+                        <Trans>Save</Trans>
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}

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>
+    );
+}