@leandrosk/dashboard 3.5.5

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,105 @@
+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">
+                <Trans>
+                    {selectedRowCount} of {table.getFilteredRowModel().rows.length} row(s) selected.
+                </Trans>
+            </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>
+    );
+}

package/src/lib/components/data-table/data-table-utils.ts

@@ -0,0 +1,313 @@
+import { AccessorFnColumnDef, ExpandedState } from '@tanstack/react-table';
+import { AccessorKeyColumnDef } from '@tanstack/table-core';
+
+/**
+ * Returns the default column visibility configuration.
+ *
+ * @example
+ * ```ts
+ * const columnVisibility = getColumnVisibility(fields, {
+ *     id: false,
+ *     createdAt: false,
+ *     updatedAt: false,
+ * });
+ * ```
+ */
+export function getColumnVisibility(
+    columns: Array<AccessorKeyColumnDef<any> | AccessorFnColumnDef<any>>,
+    defaultVisibility?: Record<string, boolean | undefined>,
+    customFieldColumnNames?: string[],
+): Record<string, boolean> {
+    const allDefaultsTrue = defaultVisibility && Object.values(defaultVisibility).every(v => v === true);
+    const allDefaultsFalse = defaultVisibility && Object.values(defaultVisibility).every(v => v === false);
+    return {
+        id: false,
+        createdAt: false,
+        updatedAt: false,
+        ...(allDefaultsTrue ? { ...Object.fromEntries(columns.map(f => [f.id, false])) } : {}),
+        ...(allDefaultsFalse ? { ...Object.fromEntries(columns.map(f => [f.id, true])) } : {}),
+        // Make custom fields hidden by default unless overridden
+        ...(customFieldColumnNames
+            ? { ...Object.fromEntries(customFieldColumnNames.map(f => [f, false])) }
+            : {}),
+        ...defaultVisibility,
+        selection: true,
+        actions: true,
+    };
+}
+
+/**
+ * Ensures that the default column order always starts with `id`, `createdAt`, `deletedAt`
+ */
+export function getStandardizedDefaultColumnOrder<T extends string | number | symbol>(
+    defaultColumnOrder?: T[],
+): T[] {
+    const standardFirstColumns = new Set(['id', 'createdAt', 'updatedAt']);
+    if (!defaultColumnOrder) {
+        return [...standardFirstColumns] as T[];
+    }
+    const rest = defaultColumnOrder.filter(c => !standardFirstColumns.has(c as string));
+    return [...standardFirstColumns, ...rest] as T[];
+}
+
+/**
+ * Hierarchical item type with parent-child relationships
+ */
+export interface HierarchicalItem {
+    id: string;
+    parentId?: string | null;
+    breadcrumbs?: Array<{ id: string }>;
+    children?: Array<{ id: string }> | null;
+}
+
+/**
+ * Gets the parent ID of a hierarchical item
+ */
+export function getItemParentId<T extends HierarchicalItem>(
+    item: T | null | undefined,
+): string | null | undefined {
+    return item?.parentId || item?.breadcrumbs?.[0]?.id;
+}
+
+/**
+ * Gets all siblings (items with the same parent) for a given parent ID
+ */
+export function getItemSiblings<T extends HierarchicalItem>(
+    items: T[],
+    parentId: string | null | undefined,
+): T[] {
+    return items.filter(item => getItemParentId(item) === parentId);
+}
+
+/**
+ * Checks if moving an item to a new parent would create a circular reference
+ */
+export function isCircularReference<T extends HierarchicalItem>(
+    item: T,
+    targetParentId: string,
+    items: T[],
+): boolean {
+    const targetParentItem = items.find(i => i.id === targetParentId);
+    return (
+        item.children?.some(child => {
+            if (child.id === targetParentId) return true;
+            const targetBreadcrumbIds = targetParentItem?.breadcrumbs?.map(b => b.id) || [];
+            return targetBreadcrumbIds.includes(item.id);
+        }) ?? false
+    );
+}
+
+/**
+ * Result of calculating the target position for a drag and drop operation
+ */
+export interface TargetPosition {
+    targetParentId: string;
+    adjustedIndex: number;
+}
+
+/**
+ * Context for drag and drop position calculation
+ */
+interface DragContext<T extends HierarchicalItem> {
+    item: T;
+    targetItem: T | undefined;
+    previousItem: T | null;
+    isDraggingDown: boolean;
+    isTargetExpanded: boolean;
+    isPreviousExpanded: boolean;
+    sourceParentId: string;
+    items: T[];
+}
+
+/**
+ * Checks if dragging down directly onto an expanded item
+ */
+function isDroppingIntoExpandedTarget<T extends HierarchicalItem>(context: DragContext<T>): boolean {
+    const { isDraggingDown, targetItem, item, isTargetExpanded } = context;
+    return isDraggingDown && targetItem?.id !== item.id && isTargetExpanded;
+}
+
+/**
+ * Checks if dragging down into an expanded item's children area
+ */
+function isDroppingIntoExpandedPreviousChildren<T extends HierarchicalItem>(
+    context: DragContext<T>,
+): boolean {
+    const { isDraggingDown, targetItem, previousItem, item, isPreviousExpanded } = context;
+    return (
+        isDraggingDown &&
+        previousItem !== null &&
+        targetItem?.id !== item.id &&
+        isPreviousExpanded &&
+        targetItem?.parentId === previousItem.id
+    );
+}
+
+/**
+ * Checks if dragging up into an expanded item's children area
+ */
+function isDroppingIntoExpandedPreviousWhenDraggingUp<T extends HierarchicalItem>(
+    context: DragContext<T>,
+): boolean {
+    const { isDraggingDown, previousItem, isPreviousExpanded } = context;
+    return !isDraggingDown && previousItem !== null && isPreviousExpanded;
+}
+
+/**
+ * Checks if an item is in an expanded state
+ */
+function isItemExpanded(itemId: string | undefined, expanded: ExpandedState): boolean {
+    if (!itemId) return false;
+    return expanded === true || (typeof expanded === 'object' && !!expanded[itemId]);
+}
+
+/**
+ * Handles dropping into expanded items (first child position)
+ */
+function handleExpandedItemDrop<T extends HierarchicalItem>(context: DragContext<T>): TargetPosition | null {
+    const { targetItem, previousItem } = context;
+
+    if (isDroppingIntoExpandedTarget(context) && targetItem) {
+        return createFirstChildPosition(targetItem.id);
+    }
+
+    if (previousItem && isDroppingIntoExpandedPreviousChildren(context)) {
+        return createFirstChildPosition(previousItem.id);
+    }
+
+    if (previousItem && isDroppingIntoExpandedPreviousWhenDraggingUp(context)) {
+        return createFirstChildPosition(previousItem.id);
+    }
+
+    return null;
+}
+
+/**
+ * Creates a position for dropping into an expanded item as first child
+ */
+function createFirstChildPosition(parentId: string): TargetPosition {
+    return { targetParentId: parentId, adjustedIndex: 0 };
+}
+
+/**
+ * Calculates position for cross-parent drag operations
+ */
+function calculateCrossParentPosition<T extends HierarchicalItem>(
+    targetItem: T,
+    sourceParentId: string,
+    items: T[],
+): TargetPosition | null {
+    const targetItemParentId = getItemParentId(targetItem);
+
+    if (!targetItemParentId || targetItemParentId === sourceParentId) {
+        return null;
+    }
+
+    const targetSiblings = getItemSiblings(items, targetItemParentId);
+    const adjustedIndex = targetSiblings.findIndex(i => i.id === targetItem.id);
+
+    return { targetParentId: targetItemParentId, adjustedIndex };
+}
+
+/**
+ * Calculates position when dropping at the end of the list
+ */
+function calculateDropAtEndPosition<T extends HierarchicalItem>(
+    previousItem: T | null,
+    sourceParentId: string,
+    items: T[],
+): TargetPosition | null {
+    if (!previousItem) {
+        return null;
+    }
+
+    const previousItemParentId = getItemParentId(previousItem);
+
+    if (!previousItemParentId || previousItemParentId === sourceParentId) {
+        return null;
+    }
+
+    const targetSiblings = getItemSiblings(items, previousItemParentId);
+    return { targetParentId: previousItemParentId, adjustedIndex: targetSiblings.length };
+}
+
+/**
+ * Determines the target parent and index for a hierarchical drag and drop operation
+ */
+export function calculateDragTargetPosition<T extends HierarchicalItem>(params: {
+    item: T;
+    oldIndex: number;
+    newIndex: number;
+    items: T[];
+    sourceParentId: string;
+    expanded: ExpandedState;
+}): TargetPosition {
+    const { item, oldIndex, newIndex, items, sourceParentId, expanded } = params;
+
+    const targetItem = items[newIndex];
+    const previousItem = newIndex > 0 ? items[newIndex - 1] : null;
+
+    const context: DragContext<T> = {
+        item,
+        targetItem,
+        previousItem,
+        isDraggingDown: oldIndex < newIndex,
+        isTargetExpanded: isItemExpanded(targetItem?.id, expanded),
+        isPreviousExpanded: isItemExpanded(previousItem?.id, expanded),
+        sourceParentId,
+        items,
+    };
+
+    // Handle dropping into expanded items (becomes first child)
+    const expandedDropPosition = handleExpandedItemDrop(context);
+    if (expandedDropPosition) {
+        return expandedDropPosition;
+    }
+
+    // Handle cross-parent drag operations
+    if (targetItem?.id !== item.id) {
+        const crossParentPosition = calculateCrossParentPosition(targetItem, sourceParentId, items);
+        if (crossParentPosition) {
+            return crossParentPosition;
+        }
+    }
+
+    // Handle dropping at the end of the list
+    if (!targetItem && previousItem) {
+        const dropAtEndPosition = calculateDropAtEndPosition(previousItem, sourceParentId, items);
+        if (dropAtEndPosition) {
+            return dropAtEndPosition;
+        }
+    }
+
+    // Default: stay in the same parent at the beginning
+    return { targetParentId: sourceParentId, adjustedIndex: 0 };
+}
+
+/**
+ * Calculates the adjusted sibling index when reordering within the same parent
+ */
+export function calculateSiblingIndex<T extends HierarchicalItem>(params: {
+    item: T;
+    oldIndex: number;
+    newIndex: number;
+    items: T[];
+    parentId: string;
+}): number {
+    const { item, oldIndex, newIndex, items, parentId } = params;
+
+    const siblings = getItemSiblings(items, parentId);
+    const oldSiblingIndex = siblings.findIndex(i => i.id === item.id);
+    const isDraggingDown = oldIndex < newIndex;
+
+    let newSiblingIndex = oldSiblingIndex;
+    const [start, end] = isDraggingDown ? [oldIndex + 1, newIndex] : [newIndex, oldIndex - 1];
+
+    for (let i = start; i <= end; i++) {
+        if (getItemParentId(items[i]) === parentId) {
+            newSiblingIndex += isDraggingDown ? 1 : -1;
+        }
+    }
+
+    return newSiblingIndex;
+}

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

@@ -0,0 +1,132 @@
+'use client';
+
+import { closestCenter, DndContext } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Table } from '@tanstack/react-table';
+import { GripVertical, Settings2 } from 'lucide-react';
+
+import { Button } from '@/vdb/components/ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuCheckboxItem,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from '@/vdb/components/ui/dropdown-menu.js';
+// Note: we intentionally don't use Radix ScrollArea here because its viewport
+// doesn't properly resolve height:100% from a flex-computed parent height,
+// preventing scrolling. A plain overflow-y-auto div works correctly in a flex layout.
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/vdb/components/ui/tooltip.js';
+import { useDynamicTranslations } from '@/vdb/hooks/use-dynamic-translations.js';
+import { usePage } from '@/vdb/hooks/use-page.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
+import { Trans } from '@lingui/react/macro';
+
+interface DataTableViewOptionsProps<TData> {
+    table: Table<TData>;
+}
+
+function SortableItem({ id, children }: { id: string; children: React.ReactNode }) {
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
+
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+
+    return (
+        <div ref={setNodeRef} style={style} className="flex items-center gap-.5">
+            <div {...attributes} {...listeners} className="cursor-grab">
+                <GripVertical className="h-4 w-4 text-muted-foreground" />
+            </div>
+            {children}
+        </div>
+    );
+}
+
+export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>) {
+    const { setTableSettings } = useUserSettings();
+    const { getTranslatedFieldName } = useDynamicTranslations();
+    const page = usePage();
+    const columns = table
+        .getAllColumns()
+        .filter(column => typeof column.accessorFn !== 'undefined' && column.getCanHide());
+
+    const handleDragEnd = (event: any) => {
+        const { active, over } = event;
+        if (active.id !== over.id) {
+            const activeIndex = columns.findIndex(col => col.id === active.id);
+            const overIndex = columns.findIndex(col => col.id === over.id);
+            // update the column order in the `columns` array
+            const newColumns = [...columns];
+            newColumns.splice(overIndex, 0, newColumns.splice(activeIndex, 1)[0]);
+            if (page?.pageId) {
+                setTableSettings(
+                    page.pageId,
+                    'columnOrder',
+                    newColumns.map(col => col.id),
+                );
+            }
+        }
+    };
+
+    const handleReset = () => {
+        if (page?.pageId) {
+            setTableSettings(page.pageId, 'columnOrder', undefined);
+            setTableSettings(page.pageId, 'columnVisibility', undefined);
+        }
+    };
+
+    return (
+        <div className="flex items-center gap-2">
+            <DropdownMenu modal={false}>
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="outline" size="sm" className="ml-auto hidden h-8 lg:flex">
+                                <Settings2 />
+                            </Button>
+                        </DropdownMenuTrigger>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                        <Trans>Column settings</Trans>
+                    </TooltipContent>
+                </Tooltip>
+                <DropdownMenuContent align="end" className="flex max-h-[70vh] w-max max-w-80 flex-col">
+                    <div className="min-h-0 flex-1 overflow-y-auto">
+                        <DndContext
+                            collisionDetection={closestCenter}
+                            onDragEnd={handleDragEnd}
+                            modifiers={[restrictToVerticalAxis]}
+                        >
+                            <SortableContext
+                                items={columns.map(col => col.id)}
+                                strategy={verticalListSortingStrategy}
+                            >
+                                {columns.map(column => (
+                                    <SortableItem key={column.id} id={column.id}>
+                                        <DropdownMenuCheckboxItem
+                                            className="capitalize"
+                                            checked={column.getIsVisible()}
+                                            onCheckedChange={value => column.toggleVisibility(value)}
+                                            onSelect={e => e.preventDefault()}
+                                        >
+                                            {getTranslatedFieldName(column.id)}
+                                        </DropdownMenuCheckboxItem>
+                                    </SortableItem>
+                                ))}
+                            </SortableContext>
+                        </DndContext>
+                    </div>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem onClick={handleReset}>
+                        <Trans>Reset</Trans>
+                    </DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+    );
+}