@wilshop/dashboard 3.5.2

package/src/lib/components/data-table/data-table-faceted-filter.tsx

@@ -0,0 +1,195 @@
+import { Column } from '@tanstack/react-table';
+import { Check, FilterIcon } from 'lucide-react';
+import * as React from 'react';
+
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+    CommandSeparator,
+} from '@/vdb/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
+import { Separator } from '@/vdb/components/ui/separator.js';
+import { cn } from '@/vdb/lib/utils.js';
+import { Trans } from '@lingui/react/macro';
+
+export interface DataTableFacetedFilterOption {
+    label: string;
+    value: any;
+    icon?: React.ComponentType<{ className?: string }>;
+}
+
+export interface DataTableFacetedFilterProps<TData, TValue> {
+    column?: Column<TData, TValue>;
+    title?: string;
+    icon?: React.ComponentType<{ className?: string }>;
+    options?: DataTableFacetedFilterOption[];
+    optionsFn?: () => Promise<DataTableFacetedFilterOption[]>;
+}
+
+export function DataTableFacetedFilter<TData, TValue>({
+    column,
+    title,
+    icon,
+    options,
+    optionsFn,
+}: DataTableFacetedFilterProps<TData, TValue>) {
+    const facets = column?.getFacetedUniqueValues();
+    const filterValue = column?.getFilterValue();
+
+    const selectedValues = filterValue
+        ? new Set(Object.values(filterValue as Record<string, string>))
+        : new Set();
+
+    const [resolvedOptions, setResolvedOptions] = React.useState<DataTableFacetedFilterOption[]>(
+        options || [],
+    );
+    const [isLoading, setIsLoading] = React.useState(false);
+    const Icon = icon;
+
+    React.useEffect(() => {
+        if (optionsFn) {
+            setIsLoading(true);
+            optionsFn()
+                .then(result => {
+                    setResolvedOptions(result);
+                })
+                .catch(error => {
+                    console.error('Failed to load filter options:', error);
+                })
+                .finally(() => {
+                    setIsLoading(false);
+                });
+        } else if (options) {
+            setResolvedOptions(options);
+        }
+    }, [optionsFn]);
+    const isBoolean = (column?.columnDef?.meta as any)?.fieldInfo.type === 'Boolean';
+
+    return (
+        <Popover>
+            <PopoverTrigger asChild>
+                <Button variant="outline" size="sm" className="h-8 border-dashed">
+                    {Icon && <Icon />}
+                    {!Icon && <FilterIcon />}
+                    {title}
+                    {selectedValues?.size > 0 && (
+                        <>
+                            <Separator orientation="vertical" className="mx-2 h-4" />
+                            <Badge variant="secondary" className="rounded-sm px-1 font-normal lg:hidden">
+                                {selectedValues.size}
+                            </Badge>
+                            <div className="hidden space-x-1 lg:flex">
+                                {selectedValues.size > 2 ? (
+                                    <Badge variant="secondary" className="rounded-sm px-1 font-normal">
+                                        {selectedValues.size} selected
+                                    </Badge>
+                                ) : (
+                                    resolvedOptions
+                                        .filter(option => selectedValues.has(option.value))
+                                        .map(option => (
+                                            <Badge
+                                                variant="secondary"
+                                                key={option.value}
+                                                className="rounded-sm px-1 font-normal"
+                                            >
+                                                {option.label}
+                                            </Badge>
+                                        ))
+                                )}
+                            </div>
+                        </>
+                    )}
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-[200px] p-0" align="start">
+                <Command>
+                    {resolvedOptions.length > 2 ? <CommandInput placeholder={title} /> : null}
+                    <CommandList>
+                        <CommandEmpty>No results found.</CommandEmpty>
+                        <CommandGroup>
+                            {resolvedOptions.map(option => {
+                                const isSelected = selectedValues.has(option.value);
+                                return (
+                                    <CommandItem
+                                        key={option.value}
+                                        onSelect={() => {
+                                            if (isBoolean) {
+                                                // Radio button behavior: single selection only
+                                                if (isSelected) {
+                                                    // Deselect if clicking the same option
+                                                    column?.setFilterValue(undefined);
+                                                } else {
+                                                    // Select only this option
+                                                    column?.setFilterValue({ eq: option.value });
+                                                }
+                                            } else {
+                                                // Checkbox behavior: multi-selection
+                                                if (isSelected) {
+                                                    selectedValues.delete(option.value);
+                                                } else {
+                                                    selectedValues.add(option.value);
+                                                }
+                                                const filterValues = Array.from(selectedValues);
+                                                column?.setFilterValue(
+                                                    filterValues.length ? filterValues : undefined,
+                                                );
+                                            }
+                                        }}
+                                    >
+                                        <div
+                                            className={cn(
+                                                'mr-2 flex h-4 w-4 items-center justify-center border border-primary',
+                                                isBoolean ? 'rounded-full' : 'rounded-sm',
+                                                isSelected
+                                                    ? 'bg-primary text-primary-foreground'
+                                                    : isBoolean
+                                                      ? '' // Empty circle for unselected radio buttons
+                                                      : 'opacity-50 [&_svg]:invisible', // Grey checkbox for unselected checkboxes
+                                            )}
+                                        >
+                                            {isBoolean ? (
+                                                isSelected && (
+                                                    <div className="h-2 w-2 rounded-full bg-primary-foreground" />
+                                                )
+                                            ) : (
+                                                <Check />
+                                            )}
+                                        </div>
+                                        {option.icon && (
+                                            <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+                                        )}
+                                        <span>{option.label}</span>
+                                        {facets?.get(option.value) && (
+                                            <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
+                                                {facets.get(option.value)}
+                                            </span>
+                                        )}
+                                    </CommandItem>
+                                );
+                            })}
+                        </CommandGroup>
+                        {selectedValues.size > 0 && (
+                            <>
+                                <CommandSeparator />
+                                <CommandGroup>
+                                    <CommandItem
+                                        onSelect={() => column?.setFilterValue(undefined)}
+                                        className="justify-center text-center"
+                                    >
+                                        <Trans>Clear filters</Trans>
+                                    </CommandItem>
+                                </CommandGroup>
+                            </>
+                        )}
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}

package/src/lib/components/data-table/data-table-filter-badge-editable.tsx

@@ -0,0 +1,35 @@
+import { Dialog } from '@/vdb/components/ui/dialog.js';
+import { Column } from '@tanstack/react-table';
+import { useState } from 'react';
+import { DataTableFilterBadge } from './data-table-filter-badge.js';
+import { DataTableFilterDialog } from './data-table-filter-dialog.js';
+import { ColumnDataType } from './types.js';
+
+export function DataTableFilterBadgeEditable({
+    filter,
+    column,
+    onRemove,
+    dataType,
+    currencyCode,
+}: {
+    filter: any;
+    column: Column<any> | undefined;
+    onRemove: (filter: any) => void;
+    dataType: ColumnDataType;
+    currencyCode: string;
+}) {
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+    return (
+        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+            <DataTableFilterBadge
+                filter={filter}
+                onRemove={onRemove}
+                onClick={() => setIsDialogOpen(true)}
+                dataType={dataType}
+                currencyCode={currencyCode}
+            />
+            {column && <DataTableFilterDialog column={column} onEnter={() => setIsDialogOpen(false)} />}
+        </Dialog>
+    );
+}

package/src/lib/components/data-table/data-table-filter-badge.tsx

@@ -0,0 +1,101 @@
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { Filter, XIcon } from 'lucide-react';
+import { Badge } from '../ui/badge.js';
+import { HumanReadableOperator, Operator } from './human-readable-operator.js';
+import { ColumnDataType } from './types.js';
+
+export function DataTableFilterBadge({
+    filter,
+    onRemove,
+    onClick,
+    dataType,
+    currencyCode,
+}: {
+    filter: any;
+    onRemove: (filter: any) => void;
+    onClick?: (filter: any) => void;
+    dataType: ColumnDataType;
+    currencyCode: string;
+}) {
+    const [operator, value] = Object.entries(filter.value as Record<string, unknown>)[0];
+    return (
+        <Badge key={filter.id} className="flex gap-2 flex-wrap items-center" variant="outline">
+            <button
+                className="flex gap-1 flex-wrap items-center cursor-pointer flex-1"
+                onClick={() => onClick?.(filter)}
+            >
+                <Filter size="12" className="opacity-50 flex-shrink-0" />
+                <div
+                    className="@xs:overflow-hidden @xs:text-ellipsis @xs:whitespace-nowrap"
+                    title={filter.id}
+                >
+                    {filter.id}
+                </div>
+                <div className="text-muted-foreground flex-shrink-0">
+                    <HumanReadableOperator operator={operator as Operator} mode="short" />
+                </div>
+                <div className="@xs:overflow-hidden @xs:text-ellipsis @xs:whitespace-nowrap flex flex-col @xl:flex-row @2xl:gap-1">
+                    <FilterValue value={value} dataType={dataType} currencyCode={currencyCode} />
+                </div>
+            </button>
+            <button className="border-l -mr-2" onClick={() => onRemove(filter)}>
+                <XIcon className="h-4 flex-shrink-0 cursor-pointer" />
+            </button>
+        </Badge>
+    );
+}
+
+function FilterValue({
+    value,
+    dataType,
+    currencyCode,
+}: {
+    value: unknown;
+    dataType: ColumnDataType;
+    currencyCode: string;
+}) {
+    const { formatDate, formatCurrency } = useLocalFormat();
+    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+        return Object.entries(value as Record<string, unknown>).map(([key, value]) => (
+            <div key={key} className="flex gap-1 items-center">
+                <span className="text-muted-foreground">{key}: </span>
+                <FilterValue value={value} dataType={dataType} currencyCode={currencyCode} />
+            </div>
+        ));
+    }
+    if (Array.isArray(value)) {
+        return (
+            <div className="flex gap-1 items-center">
+                [
+                {value.map(v => (
+                    <FilterValue value={v} dataType={dataType} currencyCode={currencyCode} key={v} />
+                ))}
+                ]
+            </div>
+        );
+    }
+    if (typeof value === 'string' && isDateIsoString(value)) {
+        return (
+            <div title={formatDate(value, { dateStyle: 'short', timeStyle: 'long' })}>
+                {formatDate(value, { dateStyle: 'short' })}
+            </div>
+        );
+    }
+    if (typeof value === 'boolean') {
+        return <div>{value ? 'true' : 'false'}</div>;
+    }
+    if (typeof value === 'number' && dataType === 'Money') {
+        return <div>{formatCurrency(value, currencyCode)}</div>;
+    }
+    if (typeof value === 'number') {
+        return <div>{value}</div>;
+    }
+    if (typeof value === 'string') {
+        return <div>{value}</div>;
+    }
+    return <div>{value as string}</div>;
+}
+
+function isDateIsoString(value: string) {
+    return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/.test(value);
+}

package/src/lib/components/data-table/data-table-filter-dialog.tsx

@@ -0,0 +1,92 @@
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    DialogClose,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/vdb/components/ui/dialog.js';
+import { Trans } from '@lingui/react/macro';
+import { Column } from '@tanstack/react-table';
+import { useEffect, useState } from 'react';
+import { DataTableBooleanFilter } from './filters/data-table-boolean-filter.js';
+import { DataTableDateTimeFilter } from './filters/data-table-datetime-filter.js';
+import { DataTableIdFilter } from './filters/data-table-id-filter.js';
+import { DataTableNumberFilter } from './filters/data-table-number-filter.js';
+import { DataTableStringFilter } from './filters/data-table-string-filter.js';
+import { ColumnDataType } from './types.js';
+
+export interface DataTableFilterDialogProps {
+    column: Column<any>;
+    onEnter?: () => void;
+}
+
+export function DataTableFilterDialog({ column, onEnter }: Readonly<DataTableFilterDialogProps>) {
+    const columnFilter = column.getFilterValue() as Record<string, string> | undefined;
+    const [filter, setFilter] = useState(columnFilter);
+
+    useEffect(() => {
+        setFilter(columnFilter);
+    }, [columnFilter]);
+
+    const columnDataType = (column.columnDef.meta as any)?.fieldInfo?.type as ColumnDataType;
+    const columnId = column.id;
+    const isEmpty = !filter || Object.keys(filter).length === 0;
+    const setFilterOnColumn = () => {
+        column.setFilterValue(filter);
+        setFilter(undefined);
+    };
+    const handleEnter = (e: React.KeyboardEvent<any>) => {
+        if (e.key === 'Enter') {
+            if (!isEmpty) {
+                setFilterOnColumn();
+                onEnter?.();
+            }
+        }
+    };
+    return (
+        <DialogContent onKeyDown={handleEnter}>
+            <DialogHeader>
+                <DialogTitle>
+                    <Trans>Filter by {columnId}</Trans>
+                </DialogTitle>
+            </DialogHeader>
+            {columnDataType === 'String' ? (
+                <DataTableStringFilter value={filter} onChange={e => setFilter(e)} />
+            ) : columnDataType === 'Int' || columnDataType === 'Float' ? (
+                <DataTableNumberFilter value={filter} onChange={e => setFilter(e)} mode="number" />
+            ) : columnDataType === 'DateTime' ? (
+                <DataTableDateTimeFilter value={filter} onChange={e => setFilter(e)} />
+            ) : columnDataType === 'Boolean' ? (
+                <DataTableBooleanFilter value={filter} onChange={e => setFilter(e)} />
+            ) : columnDataType === 'ID' ? (
+                <DataTableIdFilter value={filter} onChange={e => setFilter(e)} />
+            ) : columnDataType === 'Money' ? (
+                <DataTableNumberFilter value={filter} onChange={e => setFilter(e)} mode="money" />
+            ) : null}
+            <DialogFooter className="sm:justify-end">
+                {columnFilter && (
+                    <Button
+                        type="button"
+                        variant="secondary"
+                        onClick={() => column.setFilterValue(undefined)}
+                    >
+                        <Trans>Clear filter</Trans>
+                    </Button>
+                )}
+                <DialogClose asChild>
+                    <Button
+                        type="button"
+                        variant="secondary"
+                        disabled={isEmpty}
+                        onClick={() => {
+                            setFilterOnColumn();
+                        }}
+                    >
+                        <Trans>Apply filter</Trans>
+                    </Button>
+                </DialogClose>
+            </DialogFooter>
+        </DialogContent>
+    );
+}

package/src/lib/components/data-table/data-table-pagination.tsx

@@ -0,0 +1,103 @@
+import { Trans } from '@lingui/react/macro';
+import { Table } from '@tanstack/react-table';
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
+
+import { Button } from '@/vdb/components/ui/button.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/vdb/components/ui/select.js';
+
+interface DataTablePaginationProps<TData> {
+    table: Table<TData>;
+}
+
+export function DataTablePagination<TData>({ table }: DataTablePaginationProps<TData>) {
+    const selectedRowCount = Object.keys(table.getState().rowSelection).length;
+    return (
+        <div className="flex items-center justify-between px-2">
+            <div className="flex-1 text-sm text-muted-foreground">
+                {selectedRowCount} of {table.getFilteredRowModel().rows.length} row(s) selected.
+            </div>
+            <div className="flex items-center space-x-6 lg:space-x-8">
+                <div className="flex items-center space-x-2">
+                    <p className="hidden @xl/table:block text-sm font-medium">
+                        <Trans>Rows per page</Trans>
+                    </p>
+                    <Select
+                        value={`${table.getState().pagination.pageSize}`}
+                        onValueChange={value => {
+                            table.setPageSize(Number(value));
+                        }}
+                    >
+                        <SelectTrigger className="h-8 w-[70px]">
+                            <SelectValue placeholder={table.getState().pagination.pageSize} />
+                        </SelectTrigger>
+                        <SelectContent side="top">
+                            {[10, 20, 30, 40, 50].map(pageSize => (
+                                <SelectItem key={pageSize} value={`${pageSize}`}>
+                                    {pageSize}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                </div>
+                <div className=" flex items-center justify-center text-sm font-medium">
+                    <span className="hidden @sm/table:block w-[100px] ">
+                        <Trans>
+                            Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount() || 1}
+                        </Trans>
+                    </span>
+                </div>
+                <div className="flex items-center space-x-2">
+                    <Button
+                        variant="outline"
+                        type="button"
+                        className="hidden h-8 w-8 p-0 @lg:flex"
+                        onClick={() => table.setPageIndex(0)}
+                        disabled={!table.getCanPreviousPage()}
+                    >
+                        <span className="sr-only">
+                            <Trans>Go to first page</Trans>
+                        </span>
+                        <ChevronsLeft />
+                    </Button>
+                    <Button
+                        variant="outline"
+                        type="button"
+                        className="h-8 w-8 p-0"
+                        onClick={() => table.previousPage()}
+                        disabled={!table.getCanPreviousPage()}
+                    >
+                        <span className="sr-only">
+                            <Trans>Go to previous page</Trans>
+                        </span>
+                        <ChevronLeft />
+                    </Button>
+                    <span className="@md/table:hidden">{table.getState().pagination.pageIndex + 1}</span>
+                    <Button
+                        variant="outline"
+                        type="button"
+                        className="h-8 w-8 p-0"
+                        onClick={() => table.nextPage()}
+                        disabled={!table.getCanNextPage()}
+                    >
+                        <span className="sr-only">
+                            <Trans>Go to next page</Trans>
+                        </span>
+                        <ChevronRight />
+                    </Button>
+                    <Button
+                        variant="outline"
+                        type="button"
+                        className="hidden h-8 w-8 p-0 lg:flex"
+                        onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+                        disabled={!table.getCanNextPage()}
+                    >
+                        <span className="sr-only">
+                            <Trans>Go to last page</Trans>
+                        </span>
+                        <ChevronsRight />
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}