@vendure/dashboard 3.2.0

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

@@ -0,0 +1,172 @@
+import * as React from 'react';
+import { Column } from '@tanstack/react-table';
+import { Check, FilterIcon, PlusCircle } from 'lucide-react';
+
+import { cn } from '@/lib/utils.js';
+import { Badge } from '@/components/ui/badge.js';
+import { Button } from '@/components/ui/button.js';
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+    CommandSeparator,
+} from '@/components/ui/command.js';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover.js';
+import { Separator } from '@/components/ui/separator.js';
+
+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]);
+
+    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>
+                    <CommandInput placeholder={title} />
+                    <CommandList>
+                        <CommandEmpty>No results found.</CommandEmpty>
+                        <CommandGroup>
+                            {resolvedOptions.map(option => {
+                                const isSelected = selectedValues.has(option.value);
+                                return (
+                                    <CommandItem
+                                        key={option.value}
+                                        onSelect={() => {
+                                            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 rounded-sm border border-primary',
+                                                isSelected
+                                                    ? 'bg-primary text-primary-foreground'
+                                                    : 'opacity-50 [&_svg]:invisible',
+                                            )}
+                                        >
+                                            <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"
+                                    >
+                                        Clear filters
+                                    </CommandItem>
+                                </CommandGroup>
+                            </>
+                        )}
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}

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

@@ -0,0 +1,73 @@
+import { Button } from '@/components/ui/button.js';
+import {
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog.js';
+import { Input } from '@/components/ui/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
+import { Trans } from '@/lib/trans.js';
+import { Column } from '@tanstack/react-table';
+import React, { useState } from 'react';
+
+export interface DataTableFilterDialogProps {
+    column: Column<any>;
+}
+
+const STRING_OPERATORS = ['eq', 'notEq', 'contains', 'notContains', 'in', 'notIn', 'regex', 'isNull'];
+
+export function DataTableFilterDialog({ column }: DataTableFilterDialogProps) {
+    const columnFilter = column.getFilterValue() as Record<string, string> | undefined;
+    const [initialOperator, initialValue] = columnFilter ? Object.entries(columnFilter as any)[0] : [];
+    const [operator, setOperator] = useState<string>(initialOperator ?? 'contains');
+    const [value, setValue] = useState((initialValue as string) ?? '');
+    const columnId = column.id;
+    return (
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>
+                    <Trans>Filter by {columnId}</Trans>
+                </DialogTitle>
+                <DialogDescription></DialogDescription>
+            </DialogHeader>
+            <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}>
+                                <Trans context="filter-operator">{op}</Trans>
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+                <Input
+                    placeholder="Enter filter value..."
+                    value={value}
+                    onChange={e => setValue(e.target.value)}
+                />
+            </div>
+            <DialogFooter className="sm:justify-end">
+                {columnFilter && (
+                    <Button type="button" variant="secondary" onClick={e => column.setFilterValue(undefined)}>
+                        <Trans>Clear filter</Trans>
+                    </Button>
+                )}
+                <DialogClose asChild>
+                    <Button
+                        type="button"
+                        variant="secondary"
+                        onClick={e => column.setFilterValue({ [operator]: value })}
+                    >
+                        <Trans>Apply filter</Trans>
+                    </Button>
+                </DialogClose>
+            </DialogFooter>
+        </DialogContent>
+    );
+}

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

@@ -0,0 +1,87 @@
+import { Table } from '@tanstack/react-table';
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
+
+import { Button } from '@/components/ui/button.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
+
+interface DataTablePaginationProps<TData> {
+    table: Table<TData>;
+}
+
+export function DataTablePagination<TData>({ table }: DataTablePaginationProps<TData>) {
+    return (
+        <div className="flex items-center justify-between px-2">
+            <div className="flex-1 text-sm text-muted-foreground">
+                {table.getFilteredSelectedRowModel().rows.length} 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="text-sm font-medium">Rows per page</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 w-[100px] items-center justify-center text-sm font-medium">
+                    Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+                </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">Go to first page</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">Go to previous page</span>
+                        <ChevronLeft />
+                    </Button>
+                    <Button
+                        variant="outline"
+                        type="button"
+                        className="h-8 w-8 p-0"
+                        onClick={() => table.nextPage()}
+                        disabled={!table.getCanNextPage()}
+                    >
+                        <span className="sr-only">Go to next page</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">Go to last page</span>
+                        <ChevronsRight />
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/lib/components/data-table/data-table-view-options.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge.js';
+import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu';
+import { Table } from '@tanstack/react-table';
+import { CircleX, Cross, Filter, Settings2 } from 'lucide-react';
+
+import { Button } from '@/components/ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuCheckboxItem,
+    DropdownMenuContent,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu.js';
+
+interface DataTableViewOptionsProps<TData> {
+    table: Table<TData>;
+}
+
+export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>) {
+    return (
+        <div className="flex items-center gap-2">
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size="sm" className="ml-auto hidden h-8 lg:flex">
+                        <Settings2 />
+                        View
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-[150px]">
+                    <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+                    <DropdownMenuSeparator />
+                    {table
+                        .getAllColumns()
+                        .filter(column => typeof column.accessorFn !== 'undefined' && column.getCanHide())
+                        .map(column => {
+                            return (
+                                <DropdownMenuCheckboxItem
+                                    key={column.id}
+                                    className="capitalize"
+                                    checked={column.getIsVisible()}
+                                    onCheckedChange={value => column.toggleVisibility(!!value)}
+                                >
+                                    {column.id}
+                                </DropdownMenuCheckboxItem>
+                            );
+                        })}
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+    );
+}

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

@@ -0,0 +1,218 @@
+'use client';
+
+import { DataTablePagination } from '@/components/data-table/data-table-pagination.js';
+import { DataTableViewOptions } from '@/components/data-table/data-table-view-options.js';
+import { Badge } from '@/components/ui/badge.js';
+import { Input } from '@/components/ui/input.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table.js';
+import {
+    ColumnDef,
+    ColumnFilter,
+    ColumnFiltersState,
+    flexRender,
+    getCoreRowModel,
+    getPaginationRowModel,
+    PaginationState,
+    SortingState,
+    Table as TableType,
+    useReactTable,
+    VisibilityState,
+} from '@tanstack/react-table';
+import { TableOptions } from '@tanstack/table-core';
+import { CircleX, Filter } from 'lucide-react';
+import React, { Suspense, useEffect } from 'react';
+import { DataTableFacetedFilter, DataTableFacetedFilterOption } from './data-table-faceted-filter.js';
+
+export interface FacetedFilter {
+    title: string;
+    icon?: React.ComponentType<{ className?: string }>;
+    optionsFn?: () => Promise<DataTableFacetedFilterOption[]>;
+    options?: DataTableFacetedFilterOption[];
+}
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    totalItems: number;
+    page?: number;
+    itemsPerPage?: number;
+    sorting?: SortingState;
+    columnFilters?: ColumnFiltersState;
+    onPageChange?: (table: TableType<TData>, page: number, itemsPerPage: number) => void;
+    onSortChange?: (table: TableType<TData>, sorting: SortingState) => void;
+    onFilterChange?: (table: TableType<TData>, columnFilters: ColumnFilter[]) => void;
+    onSearchTermChange?: (searchTerm: string) => void;
+    defaultColumnVisibility?: VisibilityState;
+    facetedFilters?: { [key: string]: FacetedFilter | undefined };
+    disableViewOptions?: boolean;
+    /**
+     * This property allows full control over _all_ features of TanStack Table
+     * when needed.
+     */
+    setTableOptions?: (table: TableOptions<TData>) => TableOptions<TData>;
+}
+
+export function DataTable<TData, TValue>({
+    columns,
+    data,
+    totalItems,
+    page,
+    itemsPerPage,
+    sorting: sortingInitialState,
+    columnFilters: filtersInitialState,
+    onPageChange,
+    onSortChange,
+    onFilterChange,
+    onSearchTermChange,
+    defaultColumnVisibility,
+    facetedFilters,
+    disableViewOptions,
+    setTableOptions,
+}: DataTableProps<TData, TValue>) {
+    const [sorting, setSorting] = React.useState<SortingState>(sortingInitialState || []);
+    const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(filtersInitialState || []);
+    const [pagination, setPagination] = React.useState<PaginationState>({
+        pageIndex: (page ?? 1) - 1,
+        pageSize: itemsPerPage ?? 10,
+    });
+    const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>(
+        defaultColumnVisibility ?? {},
+    );
+
+    let tableOptions: TableOptions<TData> = {
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        manualPagination: true,
+        manualSorting: true,
+        manualFiltering: true,
+        rowCount: totalItems,
+        onPaginationChange: setPagination,
+        onSortingChange: setSorting,
+        onColumnVisibilityChange: setColumnVisibility,
+        onColumnFiltersChange: setColumnFilters,
+        state: {
+            pagination,
+            sorting,
+            columnVisibility,
+            columnFilters,
+        },
+    };
+
+    if (typeof setTableOptions === 'function') {
+        tableOptions = setTableOptions(tableOptions);
+    }
+
+    const table = useReactTable(tableOptions);
+
+    useEffect(() => {
+        onPageChange?.(table, pagination.pageIndex + 1, pagination.pageSize);
+    }, [pagination]);
+
+    useEffect(() => {
+        onSortChange?.(table, sorting);
+    }, [sorting]);
+
+    useEffect(() => {
+        onFilterChange?.(table, columnFilters);
+    }, [columnFilters]);
+    return (
+        <>
+            <div className="flex justify-between items-start">
+                <div className="flex flex-col space-y-2">
+                    <div className="flex items-center justify-start gap-2">
+                        {onSearchTermChange && (
+                            <div className="flex items-center">
+                                <Input
+                                    placeholder="Filter..."
+                                    onChange={event => onSearchTermChange(event.target.value)}
+                                    className="max-w-sm w-md"
+                                />
+                            </div>
+                        )}
+                        <Suspense>
+                            {Object.entries(facetedFilters ?? {}).map(([key, filter]) => (
+                                <DataTableFacetedFilter
+                                    key={key}
+                                    column={table.getColumn(key)}
+                                    title={filter?.title}
+                                    options={filter?.options}
+                                    optionsFn={filter?.optionsFn}
+                                />
+                            ))}
+                        </Suspense>
+                    </div>
+                    <div className="flex gap-1">
+                        {columnFilters
+                            .filter(f => !facetedFilters?.[f.id])
+                            .map(f => {
+                                const [operator, value] = Object.entries(
+                                    f.value as Record<string, string>,
+                                )[0];
+                                return (
+                                    <Badge key={f.id} className="flex gap-1 items-center" variant="secondary">
+                                        <Filter size="12" className="opacity-50" />
+                                        <div>{f.id}</div>
+                                        <div>{operator}</div>
+                                        <div>{value}</div>
+                                        <button
+                                            className="cursor-pointer"
+                                            onClick={() =>
+                                                setColumnFilters(old => old.filter(x => x.id !== f.id))
+                                            }
+                                        >
+                                            <CircleX size="14" />
+                                        </button>
+                                    </Badge>
+                                );
+                            })}
+                    </div>
+                </div>
+                {!disableViewOptions && <DataTableViewOptions table={table} />}
+            </div>
+            <div className="rounded-md border my-2">
+                <Table>
+                    <TableHeader>
+                        {table.getHeaderGroups().map(headerGroup => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map(header => {
+                                    return (
+                                        <TableHead key={header.id}>
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                      header.column.columnDef.header,
+                                                      header.getContext(),
+                                                  )}
+                                        </TableHead>
+                                    );
+                                })}
+                            </TableRow>
+                        ))}
+                    </TableHeader>
+                    <TableBody>
+                        {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map(row => (
+                                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                                    {row.getVisibleCells().map(cell => (
+                                        <TableCell key={cell.id}>
+                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell colSpan={columns.length} className="h-24 text-center">
+                                    No results.
+                                </TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            </div>
+            <DataTablePagination table={table} />
+        </>
+    );
+}

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

@@ -0,0 +1,42 @@
+import { AppSidebar } from '@/components/layout/app-sidebar.js';
+import { GeneratedBreadcrumbs } from '@/components/layout/generated-breadcrumbs.js';
+import { PrereleasePopup } from '@/components/layout/prerelease-popup.js';
+import { Badge } from '@/components/ui/badge.js';
+import { Separator } from '@/components/ui/separator.js';
+import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar.js';
+import { useUserSettings } from '@/hooks/use-user-settings.js';
+import { Trans } from '@/lib/trans.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 && (
+                                    <Badge variant="destructive">
+                                        <Trans>Dev Mode</Trans>
+                                    </Badge>
+                                )}
+                                <Alerts />
+                            </div>
+                        </div>
+                    </header>
+                    <Outlet />
+                </div>
+            </SidebarInset>
+            <PrereleasePopup />
+        </SidebarProvider>
+    );
+}