@wilshop/dashboard 3.5.2

package/src/lib/components/data-table/views-sheet.tsx

@@ -0,0 +1,305 @@
+import { Trans, useLingui } from '@lingui/react/macro';
+import { Copy, Edit, Globe, MoreHorizontal, Trash2 } from 'lucide-react';
+import React, { useState } from 'react';
+import { toast } from 'sonner';
+import { useSavedViews } from '../../hooks/use-saved-views.js';
+import { SavedView } from '../../types/saved-views.js';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from '../ui/alert-dialog.js';
+import { Button } from '../ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '../ui/dropdown-menu.js';
+import { Input } from '../ui/input.js';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '../ui/sheet.js';
+import { useDataTableContext } from './data-table-context.js';
+
+interface ViewsSheetProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    type: 'user' | 'global';
+}
+
+export const ViewsSheet: React.FC<ViewsSheetProps> = ({ open, onOpenChange, type }) => {
+    const { userViews, globalViews, deleteView, updateView, duplicateView, canManageGlobalViews } =
+        useSavedViews();
+    const { handleApplyView } = useDataTableContext();
+    const { t } = useLingui();
+    const [editingId, setEditingId] = useState<string | null>(null);
+    const [editingName, setEditingName] = useState('');
+    const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+
+    const views = type === 'global' ? globalViews : userViews;
+    const isGlobal = type === 'global';
+
+    const handleViewApply = (view: SavedView) => {
+        handleApplyView(view.filters,view.columnConfig, view.searchTerm);
+        const viewName = view.name;
+        const message = isGlobal ? t`Applied global view "${viewName}"` : t`Applied view "${viewName}"`;
+        toast.success(message);
+    };
+
+    const handleStartEdit = (view: SavedView) => {
+        setEditingId(view.id);
+        setEditingName(view.name);
+    };
+
+    const handleSaveEdit = async () => {
+        if (!editingId || !editingName.trim()) return;
+
+        try {
+            await updateView({ id: editingId, name: editingName.trim() });
+            const message = isGlobal ? t`Global view renamed successfully` : t`View renamed successfully`;
+            toast.success(message);
+            setEditingId(null);
+            setEditingName('');
+        } catch (error) {
+            const message = isGlobal ? t`Failed to rename global view` : t`Failed to rename view`;
+            toast.error(message);
+        }
+    };
+
+    const handleCancelEdit = () => {
+        setEditingId(null);
+        setEditingName('');
+    };
+
+    const handleDelete = async () => {
+        if (!deleteConfirmId) return;
+
+        try {
+            await deleteView(deleteConfirmId);
+            const message = isGlobal ? t`Global view deleted successfully` : t`View deleted successfully`;
+            toast.success(message);
+            setDeleteConfirmId(null);
+        } catch (error) {
+            const message = isGlobal ? t`Failed to delete global view` : t`Failed to delete view`;
+            toast.error(message);
+        }
+    };
+
+    const handleDuplicate = async (view: SavedView) => {
+        try {
+            await duplicateView(view.id, type);
+            const message = isGlobal
+                ? t`Global view duplicated successfully`
+                : t`View duplicated successfully`;
+            toast.success(message);
+        } catch (error) {
+            const message = isGlobal ? t`Failed to duplicate global view` : t`Failed to duplicate view`;
+            toast.error(message);
+        }
+    };
+
+    const handleConvertToUser = async (view: SavedView) => {
+        try {
+            await duplicateView(view.id, 'user');
+            toast.success(t`Global view converted to personal view successfully`);
+        } catch (error) {
+            toast.error(t`Failed to convert global view to personal view`);
+        }
+    };
+
+    const handleConvertToGlobal = async (view: SavedView) => {
+        try {
+            await duplicateView(view.id, 'global');
+            await deleteView(view.id);
+            toast.success(t`View converted to global successfully`);
+        } catch (error) {
+            toast.error(t`Failed to convert view to global`);
+        }
+    };
+
+    const getTitle = () => {
+        return isGlobal ? <Trans>Manage Global Views</Trans> : <Trans>My Saved Views</Trans>;
+    };
+
+    const getDescription = () => {
+        return isGlobal ? (
+            <Trans>Manage global saved views that are visible to all users</Trans>
+        ) : (
+            <Trans>Manage your personal saved views for this table</Trans>
+        );
+    };
+
+    const getEmptyStateMessage = () => {
+        if (isGlobal) {
+            return (
+                <>
+                    <p>
+                        <Trans>No global views have been created yet.</Trans>
+                    </p>
+                    <p className="text-sm mt-2">
+                        <Trans>Save a view as "Global" to make it available to all users.</Trans>
+                    </p>
+                </>
+            );
+        } else {
+            return (
+                <>
+                    <p>
+                        <Trans>You haven't saved any views yet.</Trans>
+                    </p>
+                    <p className="text-sm mt-2">
+                        <Trans>Apply filters to the table and click "Save View" to get started.</Trans>
+                    </p>
+                </>
+            );
+        }
+    };
+
+    const getDeleteDialogTitle = () => {
+        return isGlobal ? <Trans>Delete Global View</Trans> : <Trans>Delete View</Trans>;
+    };
+
+    const getDeleteDialogDescription = () => {
+        return isGlobal ? (
+            <Trans>
+                Are you sure you want to delete this global view? This action cannot be undone and will affect
+                all users.
+            </Trans>
+        ) : (
+            <Trans>Are you sure you want to delete this view? This action cannot be undone.</Trans>
+        );
+    };
+
+    return (
+        <>
+            <Sheet open={open} onOpenChange={onOpenChange}>
+                <SheetContent className="w-[400px] sm:w-[540px]">
+                    <SheetHeader>
+                        <SheetTitle>{getTitle()}</SheetTitle>
+                        <SheetDescription>{getDescription()}</SheetDescription>
+                    </SheetHeader>
+                    <div className="mt-4">
+                        {views.length === 0 ? (
+                            <div className="text-center py-8 text-muted-foreground">
+                                {getEmptyStateMessage()}
+                            </div>
+                        ) : (
+                            <div className="divide-y">
+                                {views.map(view => (
+                                    <div
+                                        key={view.id}
+                                        className="flex items-center justify-between py-3 first:pt-0 last:pb-0 hover:bg-accent/50 transition-colors rounded-md px-2"
+                                    >
+                                        {editingId === view.id ? (
+                                            <div className="flex items-center gap-2 flex-1">
+                                                <Input
+                                                    value={editingName}
+                                                    onChange={e => setEditingName(e.target.value)}
+                                                    onKeyDown={e => {
+                                                        if (e.key === 'Enter') handleSaveEdit();
+                                                        if (e.key === 'Escape') handleCancelEdit();
+                                                    }}
+                                                    autoFocus
+                                                    className="flex-1"
+                                                />
+                                                <Button size="sm" onClick={handleSaveEdit}>
+                                                    <Trans>Save</Trans>
+                                                </Button>
+                                                <Button
+                                                    size="sm"
+                                                    variant="outline"
+                                                    onClick={handleCancelEdit}
+                                                >
+                                                    <Trans>Cancel</Trans>
+                                                </Button>
+                                            </div>
+                                        ) : (
+                                            <>
+                                                <span className="font-medium text-sm truncate flex-1">
+                                                    {view.name}
+                                                </span>
+                                                <div className="flex items-center gap-1">
+                                                    <Button size="sm" onClick={() => handleViewApply(view)}>
+                                                        <Trans>Apply</Trans>
+                                                    </Button>
+                                                    <DropdownMenu>
+                                                        <DropdownMenuTrigger asChild>
+                                                            <Button variant="ghost" size="sm">
+                                                                <MoreHorizontal className="h-4 w-4" />
+                                                            </Button>
+                                                        </DropdownMenuTrigger>
+                                                        <DropdownMenuContent align="end">
+                                                            <DropdownMenuItem
+                                                                onClick={() => handleStartEdit(view)}
+                                                            >
+                                                                <Edit className="h-4 w-4 mr-2" />
+                                                                <Trans>Rename</Trans>
+                                                            </DropdownMenuItem>
+                                                            <DropdownMenuItem
+                                                                onClick={() => handleDuplicate(view)}
+                                                            >
+                                                                <Copy className="h-4 w-4 mr-2" />
+                                                                <Trans>Duplicate</Trans>
+                                                            </DropdownMenuItem>
+                                                            {isGlobal ? (
+                                                                <DropdownMenuItem
+                                                                    onClick={() => handleConvertToUser(view)}
+                                                                >
+                                                                    <Copy className="h-4 w-4 mr-2" />
+                                                                    <Trans>Copy to Personal</Trans>
+                                                                </DropdownMenuItem>
+                                                            ) : (
+                                                                canManageGlobalViews && (
+                                                                    <DropdownMenuItem
+                                                                        onClick={() =>
+                                                                            handleConvertToGlobal(view)
+                                                                        }
+                                                                    >
+                                                                        <Globe className="h-4 w-4 mr-2" />
+                                                                        <Trans>Make Global</Trans>
+                                                                    </DropdownMenuItem>
+                                                                )
+                                                            )}
+                                                            <DropdownMenuItem
+                                                                onClick={() => setDeleteConfirmId(view.id)}
+                                                                className="text-destructive"
+                                                            >
+                                                                <Trash2 className="h-4 w-4 mr-2" />
+                                                                <Trans>Delete</Trans>
+                                                            </DropdownMenuItem>
+                                                        </DropdownMenuContent>
+                                                    </DropdownMenu>
+                                                </div>
+                                            </>
+                                        )}
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                </SheetContent>
+            </Sheet>
+
+            <AlertDialog open={!!deleteConfirmId} onOpenChange={() => setDeleteConfirmId(null)}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>{getDeleteDialogTitle()}</AlertDialogTitle>
+                        <AlertDialogDescription>{getDeleteDialogDescription()}</AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel>
+                            <Trans>Cancel</Trans>
+                        </AlertDialogCancel>
+                        <AlertDialogAction onClick={handleDelete}>
+                            <Trans>Delete</Trans>
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        </>
+    );
+};

package/src/lib/components/date-range-picker.tsx

@@ -0,0 +1,186 @@
+'use client';
+
+import { useDayPickerLocale } from '@/vdb/components/data-input/index.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { Calendar } from '@/vdb/components/ui/calendar.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { DefinedDateRange } from '@/vdb/framework/dashboard-widget/widget-filters-context.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { endOfDay, endOfMonth, endOfWeek, startOfDay, startOfMonth, startOfWeek, subDays } from 'date-fns';
+import { CalendarIcon } from 'lucide-react';
+import * as React from 'react';
+import { DateRange } from 'react-day-picker';
+
+interface DateRangePickerProps {
+    className?: string;
+    dateRange: DefinedDateRange;
+    onDateRangeChange: (range: DefinedDateRange) => void;
+}
+
+const presets = [
+    {
+        id: 'today',
+        label: <Trans context="date-range">Today</Trans>,
+        getValue: () => ({
+            from: startOfDay(new Date()),
+            to: endOfDay(new Date()),
+        }),
+    },
+    {
+        id: 'yesterday',
+        label: <Trans context="date-range">Yesterday</Trans>,
+        getValue: () => ({
+            from: startOfDay(subDays(new Date(), 1)),
+            to: endOfDay(subDays(new Date(), 1)),
+        }),
+    },
+    {
+        id: 'last-7-days',
+        label: <Trans context="date-range">Last 7 days</Trans>,
+        getValue: () => ({
+            from: startOfDay(subDays(new Date(), 6)),
+            to: endOfDay(new Date()),
+        }),
+    },
+    {
+        id: 'this-week',
+        label: <Trans context="date-range">This week</Trans>,
+        getValue: () => ({
+            from: startOfWeek(new Date(), { weekStartsOn: 1 }),
+            to: endOfWeek(new Date(), { weekStartsOn: 1 }),
+        }),
+    },
+    {
+        id: 'last-30-days',
+        label: <Trans context="date-range">Last 30 days</Trans>,
+        getValue: () => ({
+            from: startOfDay(subDays(new Date(), 29)),
+            to: endOfDay(new Date()),
+        }),
+    },
+    {
+        id: 'month-to-date',
+        label: <Trans context="date-range">Month to date</Trans>,
+        getValue: () => ({
+            from: startOfMonth(new Date()),
+            to: endOfDay(new Date()),
+        }),
+    },
+    {
+        id: 'this-month',
+        label: <Trans context="date-range">This month</Trans>,
+        getValue: () => ({
+            from: startOfMonth(new Date()),
+            to: endOfMonth(new Date()),
+        }),
+    },
+    {
+        id: 'last-month',
+        label: <Trans context="date-range">Last month</Trans>,
+        getValue: () => ({
+            from: startOfMonth(subDays(new Date(), 30)),
+            to: endOfMonth(subDays(new Date(), 30)),
+        }),
+    },
+];
+
+export function DateRangePicker({ className, dateRange, onDateRangeChange }: DateRangePickerProps) {
+    const [open, setOpen] = React.useState(false);
+    const { t } = useLingui();
+    const { formatDate } = useLocalFormat();
+    const locale = useDayPickerLocale();
+    // Internal state uses react-day-picker's DateRange type for Calendar compatibility
+    const [selectedRange, setSelectedRange] = React.useState<DateRange>({
+        from: dateRange.from,
+        to: dateRange.to,
+    });
+
+    React.useEffect(() => {
+        setSelectedRange({
+            from: dateRange.from,
+            to: dateRange.to,
+        });
+    }, [dateRange]);
+
+    const handleSelect = (range: DateRange | undefined) => {
+        if (range?.from) {
+            // If no end date is selected, use the from date as the end date
+            const to = range.to || range.from;
+            const finalRange: DefinedDateRange = {
+                from: range.from,
+                to: to,
+            };
+            setSelectedRange({ from: range.from, to });
+            onDateRangeChange(finalRange);
+        }
+    };
+
+    const handlePresetClick = (preset: (typeof presets)[number]) => {
+        const range = preset.getValue();
+        handleSelect(range);
+        setOpen(false);
+    };
+
+    const formatDateRange = () => {
+        if (!selectedRange.from) {
+            return t`Select date range`;
+        }
+        if (!selectedRange.to || selectedRange.from === selectedRange.to) {
+            return formatDate(selectedRange.from, { dateStyle: 'medium' });
+        }
+        return `${formatDate(selectedRange.from, { dateStyle: 'medium' })} - ${formatDate(selectedRange.to, { dateStyle: 'medium' })}`;
+    };
+
+    const isPresetActive = (preset: (typeof presets)[number]) => {
+        if (!selectedRange.from || !selectedRange.to) return false;
+        const presetRange = preset.getValue();
+        return (
+            selectedRange.from.getTime() === presetRange.from.getTime() &&
+            selectedRange.to.getTime() === presetRange.to.getTime()
+        );
+    };
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    variant="outline"
+                    className={cn('w-[280px] justify-start text-left font-normal', className)}
+                >
+                    <CalendarIcon className="mr-2 h-4 w-4" />
+                    {formatDateRange()}
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0" align="start">
+                <div className="flex">
+                    <div className="border-r p-2 space-y-0.5 min-w-0 w-32">
+                        {presets.map(preset => (
+                            <Button
+                                key={preset.id}
+                                variant={isPresetActive(preset) ? 'default' : 'ghost'}
+                                size="sm"
+                                className="w-full justify-start font-normal text-xs h-7 px-2"
+                                onClick={() => handlePresetClick(preset)}
+                            >
+                                {preset.label}
+                            </Button>
+                        ))}
+                    </div>
+                    <div className="p-3">
+                        <Calendar
+                            mode="range"
+                            defaultMonth={selectedRange?.from}
+                            selected={selectedRange}
+                            onSelect={handleSelect}
+                            numberOfMonths={2}
+                            showOutsideDays={false}
+                            locale={locale}
+                        />
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
+    );
+}

package/src/lib/components/labeled-data.tsx

@@ -0,0 +1,21 @@
+type LabeledDataProps = {
+    label: string | React.ReactNode;
+    value: React.ReactNode;
+    className?: string;
+};
+
+/**
+ * @description
+ * Used to display a value with a label, like
+ *
+ * Order Code
+ * QWERTY
+ */
+export function LabeledData({ label, value, className }: Readonly<LabeledDataProps>) {
+    return (
+        <div className="">
+            <span className="font-medium text-muted-foreground text-xs">{label}</span>
+            <div className={`col-span-2 text-sm ${className}`}>{value}</div>
+        </div>
+    );
+}

package/src/lib/components/layout/app-layout.tsx

@@ -0,0 +1,35 @@
+import { AppSidebar } from '@/vdb/components/layout/app-sidebar.js';
+import { DevModeIndicator } from '@/vdb/components/layout/dev-mode-indicator.js';
+import { GeneratedBreadcrumbs } from '@/vdb/components/layout/generated-breadcrumbs.js';
+import { Separator } from '@/vdb/components/ui/separator.js';
+import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/vdb/components/ui/sidebar.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { Outlet } from '@tanstack/react-router';
+import { Alerts } from '../shared/alerts.js';
+
+export function AppLayout() {
+    const { settings } = useUserSettings();
+    return (
+        <SidebarProvider>
+            <AppSidebar />
+            <SidebarInset>
+                <div className="container mx-auto">
+                    <header className="border-b border-border flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+                        <div className="flex items-center justify-between gap-2 px-4 w-full">
+                            <div className="flex items-center justify-start gap-2">
+                                <SidebarTrigger className="-ml-1" />
+                                <Separator orientation="vertical" className="mr-2 h-4" />
+                                <GeneratedBreadcrumbs />
+                            </div>
+                            <div className="flex items-center justify-end gap-2">
+                                {settings.devMode && <DevModeIndicator />}
+                                <Alerts />
+                            </div>
+                        </div>
+                    </header>
+                    <Outlet />
+                </div>
+            </SidebarInset>
+        </SidebarProvider>
+    );
+}

package/src/lib/components/layout/app-sidebar.tsx

@@ -0,0 +1,37 @@
+import { NavMain } from '@/vdb/components/layout/nav-main.js';
+import { NavUser } from '@/vdb/components/layout/nav-user.js';
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarFooter,
+    SidebarHeader,
+    SidebarRail,
+} from '@/vdb/components/ui/sidebar.js';
+import { useDashboardExtensions } from '@/vdb/framework/extension-api/use-dashboard-extensions.js';
+import { getNavMenuConfig } from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
+import { useDisplayLocale } from '@/vdb/hooks/use-display-locale.js';
+import * as React from 'react';
+import { ChannelSwitcher } from './channel-switcher.js';
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+    const { extensionsLoaded } = useDashboardExtensions();
+    const { isRTL } = useDisplayLocale();
+    const { sections } = getNavMenuConfig();
+
+    return (
+        extensionsLoaded && (
+            <Sidebar collapsible="icon" {...props} side={isRTL ? 'right' : 'left'}>
+                <SidebarHeader>
+                    <ChannelSwitcher />
+                </SidebarHeader>
+                <SidebarContent className="flex flex-col h-full overflow-y-auto">
+                    <NavMain items={sections} />
+                </SidebarContent>
+                <SidebarFooter>
+                    <NavUser />
+                </SidebarFooter>
+                <SidebarRail />
+            </Sidebar>
+        )
+    );
+}