@wilshop/dashboard 3.5.2

package/src/lib/components/data-table/filters/data-table-datetime-filter.tsx

@@ -0,0 +1,159 @@
+import { DateTimeInput } from '@/vdb/components/data-input/datetime-input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { useEffect, useState } from 'react';
+import { HumanReadableOperator } from '../human-readable-operator.js';
+
+export interface DataTableDateTimeFilterProps {
+    value: Record<string, any> | undefined;
+    onChange: (filter: Record<string, any>) => void;
+}
+
+export const DATETIME_OPERATORS = ['eq', 'before', 'after', 'between', 'isNull'] as const;
+
+export interface DateTimeFilterResult {
+    filter: Record<string, any>;
+    error?: string;
+}
+
+export interface ParsedDateTimeFilter {
+    operator: string;
+    value?: Date;
+    startDate?: Date;
+    endDate?: Date;
+}
+
+export function parseDateTimeFilter(incomingValue: Record<string, any> | undefined): ParsedDateTimeFilter {
+    if (!incomingValue || Object.keys(incomingValue).length === 0) {
+        return { operator: 'eq' };
+    }
+
+    const operator = Object.keys(incomingValue)[0];
+    const value = Object.values(incomingValue)[0];
+
+    if (operator === 'isNull') {
+        return { operator };
+    }
+
+    if (operator === 'between' && typeof value === 'object' && value !== null) {
+        return {
+            operator,
+            startDate: value.start ? new Date(value.start) : undefined,
+            endDate: value.end ? new Date(value.end) : undefined,
+        };
+    }
+
+    // For eq, before, after operators
+    return {
+        operator,
+        value: typeof value === 'string' ? new Date(value) : undefined,
+    };
+}
+
+export function buildDateTimeFilter(
+    operator: string,
+    value?: Date,
+    startDate?: Date,
+    endDate?: Date,
+): DateTimeFilterResult {
+    if (operator === 'isNull') {
+        return { filter: { [operator]: true } };
+    }
+
+    if (operator === 'between') {
+        if (!startDate && !endDate) {
+            return { filter: {} };
+        }
+        if (!startDate || !endDate) {
+            return { filter: {}, error: 'Please enter both start and end dates' };
+        }
+        if (startDate > endDate) {
+            return { filter: {}, error: 'Start date must be before end date' };
+        }
+        return {
+            filter: { [operator]: { start: startDate.toISOString(), end: endDate.toISOString() } },
+        };
+    } else {
+        if (!value) {
+            return { filter: {} };
+        }
+        return { filter: { [operator]: value.toISOString() } };
+    }
+}
+
+export function DataTableDateTimeFilter({
+    value: incomingValue,
+    onChange,
+}: Readonly<DataTableDateTimeFilterProps>) {
+    const parsed = parseDateTimeFilter(incomingValue);
+    const [operator, setOperator] = useState<string>(parsed.operator);
+    const [value, setValue] = useState<Date | undefined>(parsed.value);
+    const [startDate, setStartDate] = useState<Date | undefined>(parsed.startDate);
+    const [endDate, setEndDate] = useState<Date | undefined>(parsed.endDate);
+    const [error, setError] = useState<string>('');
+
+
+    useEffect(() => {
+        const result = buildDateTimeFilter(operator, value, startDate, endDate);
+        onChange(result.filter);
+        setError(result.error ?? '');
+    }, [operator, value, startDate, endDate]);
+
+    const parseToDate = (input: unknown): Date | undefined => {
+        if (input instanceof Date) {
+            return input;
+        }
+        if (typeof input === 'string' && input !== '') {
+            return new Date(input);
+        }
+        return;
+    };
+
+    const dashboardComponentProps = {
+        name: 'date',
+        onBlur: () => {
+            /* */
+        },
+        ref: () => null,
+    };
+
+    return (
+        <div className="flex flex-col gap-2">
+            <div className="flex flex-col md:flex-row gap-2">
+                <Select value={operator} onValueChange={value => setOperator(value)}>
+                    <SelectTrigger>
+                        <SelectValue placeholder="Select operator" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {DATETIME_OPERATORS.map(op => (
+                            <SelectItem key={op} value={op}>
+                                <HumanReadableOperator operator={op} />
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+                {operator !== 'isNull' &&
+                    (operator === 'between' ? (
+                        <div className="space-y-2">
+                            <DateTimeInput
+                                {...dashboardComponentProps}
+                                value={startDate}
+                                onChange={val => setStartDate(parseToDate(val))}
+                            />
+                            <DateTimeInput
+                                {...dashboardComponentProps}
+                                value={endDate}
+                                onChange={val => setEndDate(parseToDate(val))}
+                            />
+                        </div>
+                    ) : (
+                        <DateTimeInput
+                            {...dashboardComponentProps}
+                            value={value}
+                            onChange={val => setValue(parseToDate(val))}
+                        />
+                    ))}
+            </div>
+            {error && <p className="text-sm text-red-500">{error}</p>}
+        </div>
+    );
+}

package/src/lib/components/data-table/filters/data-table-id-filter.tsx

@@ -0,0 +1,63 @@
+import { Select, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+
+import { Input } from '@/vdb/components/ui/input.js';
+import { SelectContent } from '@/vdb/components/ui/select.js';
+import { useEffect, useState } from 'react';
+import { HumanReadableOperator } from '../human-readable-operator.js';
+
+export interface DataTableIdFilterProps {
+    value: Record<string, any> | undefined;
+    onChange: (filter: Record<string, any>) => void;
+}
+
+export const ID_OPERATORS = ['eq', 'notEq', 'in', 'notIn', 'isNull'] as const;
+
+export function DataTableIdFilter({ value: incomingValue, onChange }: Readonly<DataTableIdFilterProps>) {
+    const initialOperator = incomingValue ? Object.keys(incomingValue)[0] : 'eq';
+    const initialValue = incomingValue ? Object.values(incomingValue)[0] : '';
+    const [operator, setOperator] = useState<string>(initialOperator ?? 'eq');
+    const [value, setValue] = useState<string>(initialValue ?? '');
+
+    useEffect(() => {
+        if (operator === 'isNull') {
+            onChange({ [operator]: true });
+        } else if (operator === 'in' || operator === 'notIn') {
+            // Split by comma and trim whitespace
+            const values = value
+                .split(',')
+                .map(v => v.trim())
+                .filter(v => v);
+            onChange({ [operator]: values });
+        } else {
+            onChange({ [operator]: value });
+        }
+    }, [operator, value]);
+
+    return (
+        <div className="flex flex-col md:flex-row gap-2">
+            <Select value={operator} onValueChange={value => setOperator(value)}>
+                <SelectTrigger>
+                    <SelectValue placeholder="Select operator" />
+                </SelectTrigger>
+                <SelectContent>
+                    {ID_OPERATORS.map(op => (
+                        <SelectItem key={op} value={op}>
+                            <HumanReadableOperator operator={op} />
+                        </SelectItem>
+                    ))}
+                </SelectContent>
+            </Select>
+            {operator !== 'isNull' && (
+                <Input
+                    placeholder={
+                        operator === 'in' || operator === 'notIn'
+                            ? 'Enter comma-separated IDs...'
+                            : 'Enter ID...'
+                    }
+                    value={value}
+                    onChange={e => setValue(e.target.value)}
+                />
+            )}
+        </div>
+    );
+}

package/src/lib/components/data-table/filters/data-table-number-filter.tsx

@@ -0,0 +1,123 @@
+import { MoneyInput } from '@/vdb/components/data-input/money-input.js';
+import { Input } from '@/vdb/components/ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+import { useChannel } from '@/vdb/hooks/use-channel.js';
+import { useEffect, useState } from 'react';
+import { HumanReadableOperator } from '../human-readable-operator.js';
+
+export interface DataTableNumberFilterProps {
+    mode: 'number' | 'money';
+    value: Record<string, any> | undefined;
+    onChange: (filter: Record<string, any>) => void;
+}
+
+export const NUMBER_OPERATORS = ['eq', 'gt', 'gte', 'lt', 'lte', 'isNull', 'between'] as const;
+
+export function DataTableNumberFilter({
+    mode,
+    value: incomingValue,
+    onChange,
+}: Readonly<DataTableNumberFilterProps>) {
+    const { activeChannel } = useChannel();
+    const initialOperator = incomingValue ? Object.keys(incomingValue)[0] : 'eq';
+    const initialValue = incomingValue ? Object.values(incomingValue)[0] : 0;
+    const [operator, setOperator] = useState<string>(initialOperator ?? 'eq');
+    const [value, setValue] = useState<string>(initialValue?.toString() ?? '');
+    const [minValue, setMinValue] = useState<string>('');
+    const [maxValue, setMaxValue] = useState<string>('');
+    const [error, setError] = useState<string>('');
+
+    useEffect(() => {
+        if (operator === 'isNull') {
+            onChange({ [operator]: true });
+            return;
+        }
+
+        if (operator === 'between') {
+            if (!minValue && !maxValue) {
+                onChange({});
+                return;
+            }
+            if (!minValue || !maxValue) {
+                setError('Please enter both min and max values');
+                return;
+            }
+            const minNum = parseFloat(minValue);
+            const maxNum = parseFloat(maxValue);
+            if (isNaN(minNum) || isNaN(maxNum)) {
+                setError('Please enter valid numbers');
+                return;
+            }
+            if (minNum > maxNum) {
+                setError('Min value must be less than max value');
+                return;
+            }
+            setError('');
+            onChange({ [operator]: { start: minNum, end: maxNum } });
+        } else {
+            if (!value) {
+                onChange({});
+                return;
+            }
+            const numValue = parseFloat(value);
+            if (isNaN(numValue)) {
+                setError('Please enter a valid number');
+                return;
+            }
+            setError('');
+            onChange({ [operator]: numValue });
+        }
+    }, [operator, value, minValue, maxValue]);
+
+    const renderInput = (value: string, onChange: (value: string) => void, placeholder: string) => {
+        if (mode === 'money') {
+            return (
+                <MoneyInput
+                    ref={() => {}}
+                    onBlur={() => {}}
+                    name="amount"
+                    value={parseFloat(value) || 0}
+                    onChange={newValue => onChange(newValue.toString())}
+                    currency={activeChannel?.defaultCurrencyCode ?? 'USD'}
+                />
+            );
+        }
+        return (
+            <Input
+                type="number"
+                placeholder={placeholder}
+                value={value}
+                onChange={e => onChange(e.target.value)}
+            />
+        );
+    };
+
+    return (
+        <div className="flex flex-col gap-2">
+            <div className="flex flex-col md:flex-row gap-2">
+                <Select value={operator} onValueChange={value => setOperator(value)}>
+                    <SelectTrigger>
+                        <SelectValue placeholder="Select operator" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {NUMBER_OPERATORS.map(op => (
+                            <SelectItem key={op} value={op}>
+                                <HumanReadableOperator operator={op} />
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+                {operator !== 'isNull' &&
+                    (operator === 'between' ? (
+                        <div className="flex gap-2">
+                            {renderInput(minValue, setMinValue, 'Min')}
+                            {renderInput(maxValue, setMaxValue, 'Max')}
+                        </div>
+                    ) : (
+                        renderInput(value, setValue, 'Enter value...')
+                    ))}
+            </div>
+            {error && <p className="text-sm text-red-500">{error}</p>}
+        </div>
+    );
+}

package/src/lib/components/data-table/filters/data-table-string-filter.tsx

@@ -0,0 +1,79 @@
+import { Select, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+
+import { Input } from '@/vdb/components/ui/input.js';
+import { SelectContent } from '@/vdb/components/ui/select.js';
+import { useEffect, useState } from 'react';
+import { HumanReadableOperator } from '../human-readable-operator.js';
+
+export interface DataTableStringFilterProps {
+    value: Record<string, any> | undefined;
+    onChange: (filter: Record<string, any>) => void;
+}
+
+export const STRING_OPERATORS = [
+    'eq',
+    'notEq',
+    'contains',
+    'notContains',
+    'in',
+    'notIn',
+    'regex',
+    'isNull',
+] as const;
+
+export function DataTableStringFilter({
+    value: incomingValue,
+    onChange,
+}: Readonly<DataTableStringFilterProps>) {
+    const initialOperator = incomingValue ? Object.keys(incomingValue)[0] : 'contains';
+    const initialValue = incomingValue ? Object.values(incomingValue)[0] : '';
+    const [operator, setOperator] = useState<string>(initialOperator ?? 'contains');
+    const [value, setValue] = useState((initialValue as string) ?? '');
+
+    useEffect(() => {
+        if (operator === 'isNull') {
+            onChange({ [operator]: true });
+        } else if (operator === 'in' || operator === 'notIn') {
+            // Split by comma and trim whitespace
+            if (typeof value === 'string') {
+                const values = value
+                    .split(',')
+                    .map(v => v.trim())
+                    .filter(v => v);
+                onChange({ [operator]: values });
+            } else {
+                onChange({ [operator]: [] });
+            }
+        } else {
+            onChange({ [operator]: value });
+        }
+    }, [operator, value]);
+
+    return (
+        <div className="flex flex-col md:flex-row gap-2">
+            <Select value={operator} onValueChange={value => setOperator(value)}>
+                <SelectTrigger>
+                    <SelectValue placeholder="Select operator" />
+                </SelectTrigger>
+                <SelectContent>
+                    {STRING_OPERATORS.map(op => (
+                        <SelectItem key={op} value={op}>
+                            <HumanReadableOperator operator={op} />
+                        </SelectItem>
+                    ))}
+                </SelectContent>
+            </Select>
+            {operator !== 'isNull' && (
+                <Input
+                    placeholder={
+                        operator === 'in' || operator === 'notIn'
+                            ? 'Enter comma-separated values...'
+                            : 'Enter filter value...'
+                    }
+                    value={value}
+                    onChange={e => setValue(e.target.value)}
+                />
+            )}
+        </div>
+    );
+}

package/src/lib/components/data-table/global-views-bar.tsx

@@ -0,0 +1,97 @@
+import { Trans } from '@lingui/react/macro';
+import { ChevronDown } from 'lucide-react';
+import React from 'react';
+import { useSavedViews } from '../../hooks/use-saved-views.js';
+import { SavedView } from '../../types/saved-views.js';
+import { findMatchingSavedView } from '../../utils/saved-views-utils.js';
+import { PermissionGuard } from '../shared/permission-guard.js';
+import { Button } from '../ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '../ui/dropdown-menu.js';
+import { useDataTableContext } from './data-table-context.js';
+import { ManageGlobalViewsButton } from './manage-global-views-button.js';
+
+export const GlobalViewsBar: React.FC = () => {
+    const { globalViews, canManageGlobalViews } = useSavedViews();
+    const { columnFilters, searchTerm, handleApplyView } = useDataTableContext();
+
+    if (globalViews.length === 0) {
+        return null;
+    }
+
+    const sortedViews = [...globalViews].sort(
+        (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(),
+    );
+
+    const handleViewClick = (view: SavedView) => {
+        handleApplyView(view.filters, view.columnConfig, view.searchTerm);
+    };
+
+    const isViewActive = (view: SavedView) => {
+        return findMatchingSavedView(columnFilters, searchTerm, [view]) !== undefined;
+    };
+
+    if (sortedViews.length <= 3) {
+        // Show all views as buttons
+        return (
+            <div className="flex items-center gap-1">
+                {sortedViews.map(view => (
+                    <Button
+                        key={view.id}
+                        variant={isViewActive(view) ? 'default' : 'outline'}
+                        size="sm"
+                        onClick={() => handleViewClick(view)}
+                    >
+                        {view.name}
+                    </Button>
+                ))}
+                {canManageGlobalViews && <ManageGlobalViewsButton />}
+            </div>
+        );
+    }
+
+    // Show first 3 as buttons, rest in dropdown
+    const visibleViews = sortedViews.slice(0, 3);
+    const dropdownViews = sortedViews.slice(3);
+
+    return (
+        <div className="flex items-center gap-1">
+            {visibleViews.map(view => (
+                <Button
+                    key={view.id}
+                    variant={isViewActive(view) ? 'default' : 'outline'}
+                    size="sm"
+                    onClick={() => handleViewClick(view)}
+                >
+                    {view.name}
+                </Button>
+            ))}
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size="sm">
+                        <Trans>More views</Trans>
+                        <ChevronDown className="h-3 w-3" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                    {dropdownViews.map(view => (
+                        <DropdownMenuItem
+                            key={view.id}
+                            onClick={() => handleViewClick(view)}
+                            className={isViewActive(view) ? 'bg-primary' : ''}
+                        >
+                            {view.name}
+                        </DropdownMenuItem>
+                    ))}
+                </DropdownMenuContent>
+            </DropdownMenu>
+            <PermissionGuard requires={['WriteDashboardGlobalViews']}>
+                {canManageGlobalViews && <ManageGlobalViewsButton />}
+            </PermissionGuard>
+        </div>
+    );
+};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ViewsSheet } from './views-sheet.js';
+
+interface GlobalViewsSheetProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+
+export const GlobalViewsSheet: React.FC<GlobalViewsSheetProps> = ({ open, onOpenChange }) => {
+    return <ViewsSheet open={open} onOpenChange={onOpenChange} type="global" />;
+};

package/src/lib/components/data-table/human-readable-operator.tsx

@@ -0,0 +1,65 @@
+import { Trans } from '@lingui/react/macro';
+import { BOOLEAN_OPERATORS } from './filters/data-table-boolean-filter.js';
+import { DATETIME_OPERATORS } from './filters/data-table-datetime-filter.js';
+import { ID_OPERATORS } from './filters/data-table-id-filter.js';
+import { NUMBER_OPERATORS } from './filters/data-table-number-filter.js';
+import { STRING_OPERATORS } from './filters/data-table-string-filter.js';
+
+export type Operator =
+    | (typeof DATETIME_OPERATORS)[number]
+    | (typeof BOOLEAN_OPERATORS)[number]
+    | (typeof ID_OPERATORS)[number]
+    | (typeof NUMBER_OPERATORS)[number]
+    | (typeof STRING_OPERATORS)[number];
+
+export function HumanReadableOperator({
+    operator,
+    mode = 'long',
+}: {
+    operator: Operator;
+    mode?: 'short' | 'long';
+}) {
+    switch (operator) {
+        case 'eq':
+            return mode === 'short' ? <Trans>=</Trans> : <Trans>is equal to</Trans>;
+        case 'notEq':
+            return mode === 'short' ? <Trans>!=</Trans> : <Trans>is not equal to</Trans>;
+        case 'before':
+            return mode === 'short' ? <Trans>before</Trans> : <Trans>is before</Trans>;
+        case 'after':
+            return mode === 'short' ? <Trans>after</Trans> : <Trans>is after</Trans>;
+        case 'between':
+            return mode === 'short' ? <Trans>between</Trans> : <Trans>is between</Trans>;
+        case 'isNull':
+            return <Trans>is null</Trans>;
+        case 'in':
+            return mode === 'short' ? <Trans>in</Trans> : <Trans>is in</Trans>;
+        case 'notIn':
+            return mode === 'short' ? <Trans>not in</Trans> : <Trans>is not in</Trans>;
+        case 'gt':
+            return mode === 'short' ? <Trans>greater than</Trans> : <Trans>is greater than</Trans>;
+        case 'gte':
+            return mode === 'short' ? (
+                <Trans>greater than or equal</Trans>
+            ) : (
+                <Trans>is greater than or equal to</Trans>
+            );
+        case 'lt':
+            return mode === 'short' ? <Trans>less than</Trans> : <Trans>is less than</Trans>;
+        case 'lte':
+            return mode === 'short' ? (
+                <Trans>less than or equal</Trans>
+            ) : (
+                <Trans>is less than or equal to</Trans>
+            );
+        case 'contains':
+            return <Trans>contains</Trans>;
+        case 'notContains':
+            return <Trans>does not contain</Trans>;
+        case 'regex':
+            return <Trans>matches regex</Trans>;
+        default:
+            operator satisfies never;
+            return <Trans>{operator}</Trans>;
+    }
+}

package/src/lib/components/data-table/manage-global-views-button.tsx

@@ -0,0 +1,26 @@
+import { Settings } from 'lucide-react';
+import React, { useState } from 'react';
+import { Button } from '../ui/button.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip.js';
+import { Trans } from '@lingui/react/macro';
+import { GlobalViewsSheet } from './global-views-sheet.js';
+
+export const ManageGlobalViewsButton: React.FC = () => {
+    const [sheetOpen, setSheetOpen] = useState(false);
+
+    return (
+        <>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Button variant="outline" size="icon-sm" onClick={() => setSheetOpen(true)}>
+                        <Settings />
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <Trans>Manage global views</Trans>
+                </TooltipContent>
+            </Tooltip>
+            <GlobalViewsSheet open={sheetOpen} onOpenChange={setSheetOpen} />
+        </>
+    );
+};

package/src/lib/components/data-table/my-views-button.tsx

@@ -0,0 +1,47 @@
+import { Trans } from '@lingui/react/macro';
+import { Bookmark } from 'lucide-react';
+import React, { useMemo, useState } from 'react';
+import { useSavedViews } from '../../hooks/use-saved-views.js';
+import { findMatchingSavedView } from '../../utils/saved-views-utils.js';
+import { Button } from '../ui/button.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip.js';
+import { useDataTableContext } from './data-table-context.js';
+import { UserViewsSheet } from './user-views-sheet.js';
+
+export const MyViewsButton: React.FC = () => {
+    const [sheetOpen, setSheetOpen] = useState(false);
+    const { userViews, savedViewsAreAvailable } = useSavedViews();
+    const { columnFilters, searchTerm } = useDataTableContext();
+
+    // Find the active view using centralized utility
+    const activeView = useMemo(() => {
+        return findMatchingSavedView(columnFilters, searchTerm, userViews);
+    }, [userViews, columnFilters, searchTerm]);
+
+    if (!savedViewsAreAvailable) {
+        return null;
+    }
+
+    return (
+        <>
+            <div className="flex items-center gap-2">
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <Button
+                            variant={activeView ? 'default' : 'outline'}
+                            size="icon"
+                            onClick={() => setSheetOpen(true)}
+                        >
+                            <Bookmark />
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                        <Trans>My saved views</Trans>
+                    </TooltipContent>
+                </Tooltip>
+                {activeView && <span className="text-sm text-muted-foreground">{activeView.name}</span>}
+            </div>
+            <UserViewsSheet open={sheetOpen} onOpenChange={setSheetOpen} />
+        </>
+    );
+};