@m5kdev/web-ui 0.3.1 → 0.3.2

package/dist/src/modules/auth/components/RangeNuqsDatePicker.js

@@ -4,7 +4,7 @@ import { CalendarDate, getLocalTimeZone, today } from "@internationalized/date";
 import { useNuqsQueryParams } from "@m5kdev/frontend/modules/table/hooks/useNuqsQueryParams";
 import { calendarDateToEndOfDayUTC, calendarDateToUTC, dateFilterToRangeValue, } from "@m5kdev/web-ui/modules/table/filterTransformers";
 import { DateTime } from "luxon";
-import { useEffect, useMemo, useState } from "react";
+import { startTransition, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 const toCalendarDate = (dt) => new CalendarDate(dt.year, dt.month, dt.day);
 const isSameCalendarDate = (a, b) => a.year === b.year && a.month === b.month && a.day === b.day;
@@ -17,6 +17,10 @@ export const RangeNuqsDatePicker = ({ columnId = "startedAt", endColumnId = "end
     const dateRange = useMemo(() => {
         return dateFilterToRangeValue(filters, columnId);
     }, [filters, columnId]);
+    const [localRange, setLocalRange] = useState(dateRange);
+    useEffect(() => {
+        setLocalRange(dateRange);
+    }, [dateRange]);
     const todayIso = DateTime.utc().toISODate();
     const quickRangeOptions = useMemo(() => {
         const now = DateTime.utc();
@@ -186,12 +190,15 @@ export const RangeNuqsDatePicker = ({ columnId = "startedAt", endColumnId = "end
     const handleDateRangeChange = (range) => {
         if (!setFilters)
             return;
-        if (!range?.start || !range?.end) {
-            // Remove date filters
+        if (range === null) {
+            // Explicit clear — remove date filters
             const newFilters = filters?.filter((f) => f.columnId !== columnId && f.columnId !== endColumnId) ?? [];
-            setFilters(newFilters);
+            startTransition(() => setFilters(newFilters));
             return;
         }
+        // Incomplete range (e.g. only start selected mid-calendar-selection) — keep current filters
+        if (!range.start || !range.end)
+            return;
         // Use intersect to find records where [startedAt, endedAt] overlaps with the selected range
         // This includes ongoing records (endedAt = NULL) and records that overlap the range
         const startDate = range.start;
@@ -207,7 +214,7 @@ export const RangeNuqsDatePicker = ({ columnId = "startedAt", endColumnId = "end
                 endColumnId,
             },
         ];
-        setFilters(newFilters);
+        startTransition(() => setFilters(newFilters));
     };
     const handleQuickRangeChange = (key) => {
         if (!key) {
@@ -224,7 +231,11 @@ export const RangeNuqsDatePicker = ({ columnId = "startedAt", endColumnId = "end
         });
     };
     return (_jsxs("div", { className: `flex gap-4 flex-row ${className ?? ""}`, children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: dateRangeLabel ??
-                            t(`${translationNamespace}:reports.dateRange`, { defaultValue: "Date range" }) }), _jsx(DateRangePicker, { value: dateRange ?? undefined, onChange: handleDateRangeChange, className: "w-[300px]", granularity: "day", showMonthAndYearPickers: true, maxValue: today(getLocalTimeZone()), popoverProps: {
+                            t(`${translationNamespace}:reports.dateRange`, { defaultValue: "Date range" }) }), _jsx(DateRangePicker, { "aria-label": "Date range", value: localRange ?? undefined, onChange: setLocalRange, onBlur: () => {
+                            if (localRange !== undefined) {
+                                handleDateRangeChange(localRange);
+                            }
+                        }, className: "w-[300px]", granularity: "day", showMonthAndYearPickers: true, maxValue: today(getLocalTimeZone()), popoverProps: {
                             portalContainer: document.body,
                             disableAnimation: true,
                         } })] }), showQuickRange && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: quickRangeLabel ??

package/dist/src/modules/table/components/NuqsTable.d.ts

@@ -10,6 +10,7 @@ export type NuqsTableColumn<T> = ColumnDef<T> & {
         value: string;
     }[];
     endColumnId?: string;
+    groupable?: boolean;
 };
 type NuqsTableParams<T> = {
     data: T[];

package/dist/src/modules/table/components/NuqsTable.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Checkbox, Popover, PopoverContent, PopoverTrigger } from "@heroui/react";
-import { flexRender, getCoreRowModel, getPaginationRowModel, useReactTable, } from "@tanstack/react-table";
-import { ChevronDown, ChevronUp } from "lucide-react";
+import { flexRender, getCoreRowModel, getExpandedRowModel, getGroupedRowModel, getPaginationRowModel, useReactTable, } from "@tanstack/react-table";
+import { ChevronDown, ChevronRight, ChevronUp } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import { Button } from "../../../components/ui/button";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "../../../components/ui/table";
 import { ColumnOrderAndVisibility } from "./ColumnOrderAndVisibility";
 import { TableFiltering } from "./TableFiltering";
+import { TableGroupBy } from "./TableGroupBy";
 import { TablePagination } from "./TablePagination";
 function getStorageKey(columnIds) {
     const sortedIds = [...columnIds].sort().join(",");
@@ -117,15 +118,17 @@ export const NuqsTable = ({ data, total, columns, tableProps, singleFilter = fal
     }, [layout, columnIds]);
     const columnOrder = useMemo(() => layout.map((column) => column.id), [layout]);
     const columnVisibility = useMemo(() => Object.fromEntries(layout.map((column) => [column.id, column.visibility])), [layout]);
-    const { limit = 10, page = 1, sorting, setSorting, setPagination, pagination, rowSelection, setRowSelection, setFilters, filters, } = tableProps;
+    const { limit = 10, page = 1, sorting, setSorting, setPagination, pagination, rowSelection, setRowSelection, setFilters, filters, grouping, setGrouping, } = tableProps;
+    const isGrouped = grouping.length > 0;
+    const [expanded, setExpanded] = useState({});
     // Redirect back if we're on an empty page (past the last page)
     useEffect(() => {
-        if (data.length === 0 && page > 1 && total !== undefined) {
+        if (!isGrouped && data.length === 0 && page > 1 && total !== undefined) {
             setPagination?.({ pageIndex: page - 2, pageSize: limit });
         }
-    }, [data.length, page, limit, total, setPagination]);
-    // Calculate pageCount from total if available, otherwise use heuristic
-    const pageCount = total !== undefined
+    }, [data.length, page, limit, total, setPagination, isGrouped]);
+    // When grouped, TanStack handles pagination client-side; otherwise use server total
+    const serverPageCount = total !== undefined
         ? Math.ceil(total / limit) || 1
         : data.length === limit
             ? page + 1
@@ -135,14 +138,21 @@ export const NuqsTable = ({ data, total, columns, tableProps, singleFilter = fal
         columns,
         getRowId: (row) => String(row.id),
         manualSorting: true,
-        manualPagination: true,
-        state: { pagination, sorting, rowSelection, columnOrder, columnVisibility },
-        pageCount,
+        manualPagination: !isGrouped,
+        state: { pagination, sorting, rowSelection, columnOrder, columnVisibility, grouping, expanded },
+        ...(isGrouped ? {} : { pageCount: serverPageCount }),
         manualFiltering: true,
+        enableGrouping: true,
+        groupedColumnMode: false,
+        autoResetExpanded: false,
         onSortingChange: setSorting,
         onPaginationChange: setPagination,
         onRowSelectionChange: setRowSelection,
+        onGroupingChange: setGrouping,
+        onExpandedChange: setExpanded,
         getCoreRowModel: getCoreRowModel(),
+        getGroupedRowModel: getGroupedRowModel(),
+        getExpandedRowModel: getExpandedRowModel(),
         getPaginationRowModel: getPaginationRowModel(),
         onColumnOrderChange: (updater) => {
             setLayout((prev) => applyOrder(prev, typeof updater === "function" ? updater(prev.map((i) => i.id)) : updater));
@@ -188,11 +198,37 @@ export const NuqsTable = ({ data, total, columns, tableProps, singleFilter = fal
         }));
         return [...baseColumns, ...periodColumns];
     }, [columns]);
+    const groupableColumns = useMemo(() => columns
+        .filter((col) => col.groupable)
+        .map((col) => ({ id: String(col.id), label: String(col.header) })), [columns]);
+    const hasGrouping = grouping.length > 0;
     const [isFiltersOpen, setIsFiltersOpen] = useState(false);
     const [isColumnsOpen, setIsColumnsOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full items-center gap-2 justify-end", children: [_jsxs(Popover, { placement: "bottom", isOpen: isFiltersOpen, onOpenChange: setIsFiltersOpen, portalContainer: document.body, children: [_jsx(PopoverTrigger, { children: _jsx(Button, { variant: "outline", size: "sm", children: _jsxs("div", { className: "flex items-center gap-2", children: ["Filters", _jsx(ChevronDown, { className: "h-4 w-4" })] }) }) }), _jsx(PopoverContent, { children: _jsx(TableFiltering, { columns: filterableColumns, onFiltersChange: onFiltersChange, filters: filters ?? [], onClose: () => setIsFiltersOpen(false), singleFilter: singleFilter, filterMethods: filterMethods }) })] }), _jsxs(Popover, { placement: "bottom", isOpen: isColumnsOpen, onOpenChange: setIsColumnsOpen, portalContainer: document.body, children: [_jsx(PopoverTrigger, { children: _jsx(Button, { variant: "outline", size: "sm", children: _jsxs("div", { className: "flex items-center gap-2", children: ["Columns", _jsx(ChevronDown, { className: "h-4 w-4" })] }) }) }), _jsx(PopoverContent, { children: _jsx(ColumnOrderAndVisibility, { layout: layout, onChangeOrder: onChangeOrder, onChangeVisibility: onChangeVisibility, onClose: () => setIsColumnsOpen(false) }) })] })] }), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: _jsx(Checkbox, { isSelected: table.getIsAllRowsSelected(), onValueChange: (checked) => {
+    const [isGroupByOpen, setIsGroupByOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full items-center gap-2 justify-end", children: [_jsxs(Popover, { placement: "bottom", isOpen: isFiltersOpen, onOpenChange: setIsFiltersOpen, portalContainer: document.body, children: [_jsx(PopoverTrigger, { children: _jsx(Button, { variant: "outline", size: "sm", children: _jsxs("div", { className: "flex items-center gap-2", children: ["Filters", _jsx(ChevronDown, { className: "h-4 w-4" })] }) }) }), _jsx(PopoverContent, { children: _jsx(TableFiltering, { columns: filterableColumns, onFiltersChange: onFiltersChange, filters: filters ?? [], onClose: () => setIsFiltersOpen(false), singleFilter: singleFilter, filterMethods: filterMethods }) })] }), groupableColumns.length > 0 && (_jsxs(Popover, { placement: "bottom", isOpen: isGroupByOpen, onOpenChange: setIsGroupByOpen, portalContainer: document.body, children: [_jsx(PopoverTrigger, { children: _jsx(Button, { variant: hasGrouping ? "secondary" : "outline", size: "sm", children: _jsxs("div", { className: "flex items-center gap-2", children: [hasGrouping
+                                                ? `Grouped by: ${grouping.map((id) => groupableColumns.find((c) => c.id === id)?.label ?? id).join(" → ")}`
+                                                : "Group by", _jsx(ChevronDown, { className: "h-4 w-4" })] }) }) }), _jsx(PopoverContent, { children: _jsx(TableGroupBy, { columns: groupableColumns, activeGrouping: grouping, onGroupingChange: (columnIds) => {
+                                        setGrouping(columnIds);
+                                        setExpanded({});
+                                        setPagination?.({ pageIndex: 0, pageSize: limit });
+                                    }, onClose: () => setIsGroupByOpen(false) }) })] })), _jsxs(Popover, { placement: "bottom", isOpen: isColumnsOpen, onOpenChange: setIsColumnsOpen, portalContainer: document.body, children: [_jsx(PopoverTrigger, { children: _jsx(Button, { variant: "outline", size: "sm", children: _jsxs("div", { className: "flex items-center gap-2", children: ["Columns", _jsx(ChevronDown, { className: "h-4 w-4" })] }) }) }), _jsx(PopoverContent, { children: _jsx(ColumnOrderAndVisibility, { layout: layout, onChangeOrder: onChangeOrder, onChangeVisibility: onChangeVisibility, onClose: () => setIsColumnsOpen(false) }) })] })] }), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: _jsx(Checkbox, { isSelected: table.getIsAllRowsSelected(), onValueChange: (checked) => {
                                             table.toggleAllRowsSelected(checked);
-                                        } }) }), table.getHeaderGroups()[0].headers.map((header) => (_jsxs(TableHead, { onClick: header.column.getCanSort() ? header.column.getToggleSortingHandler() : undefined, children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (_jsxs(_Fragment, { children: [header.column.getIsSorted() === "asc" && (_jsx(ChevronUp, { className: "h-4 w-4 inline ml-1" })), header.column.getIsSorted() === "desc" && (_jsx(ChevronDown, { className: "h-4 w-4 inline ml-1" }))] }))] }, header.id)))] }) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Checkbox, { isSelected: row.getIsSelected(), onValueChange: (checked) => {
-                                            row.toggleSelected(checked);
-                                        } }) }), row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)))] }, row.id))) })] }), _jsx(TablePagination, { pageCount: pageCount, page: page, limit: limit, setPagination: setPagination })] }));
+                                        } }) }), table.getHeaderGroups()[0].headers.map((header) => (_jsxs(TableHead, { onClick: header.column.getCanSort() ? header.column.getToggleSortingHandler() : undefined, children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (_jsxs(_Fragment, { children: [header.column.getIsSorted() === "asc" && (_jsx(ChevronUp, { className: "h-4 w-4 inline ml-1" })), header.column.getIsSorted() === "desc" && (_jsx(ChevronDown, { className: "h-4 w-4 inline ml-1" }))] }))] }, header.id)))] }) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row) => {
+                            if (row.getIsGrouped()) {
+                                return (_jsxs(TableRow, { className: "bg-muted/40 font-medium cursor-pointer hover:bg-muted/60", onClick: () => row.toggleExpanded(), children: [_jsx(TableCell, {}), row.getVisibleCells().map((cell) => {
+                                            if (cell.getIsGrouped()) {
+                                                return (_jsx(TableCell, { children: _jsxs("span", { className: "flex items-center gap-1.5", children: [row.getIsExpanded() ? (_jsx(ChevronDown, { className: "h-4 w-4 shrink-0" })) : (_jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })), flexRender(cell.column.columnDef.cell, cell.getContext()), _jsxs("span", { className: "text-muted-foreground font-normal ml-1", children: ["(", row.subRows.length, ")"] })] }) }, cell.id));
+                                            }
+                                            if (cell.getIsAggregated()) {
+                                                return (_jsx(TableCell, { children: flexRender(cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                                            }
+                                            return _jsx(TableCell, {}, cell.id);
+                                        })] }, row.id));
+                            }
+                            return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Checkbox, { isSelected: row.getIsSelected(), onValueChange: (checked) => {
+                                                row.toggleSelected(checked);
+                                            } }) }), row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)))] }, row.id));
+                        }) })] }), _jsx(TablePagination, { pageCount: isGrouped
+                    ? Math.ceil(table.getPrePaginationRowModel().rows.length / limit) || 1
+                    : serverPageCount, page: isGrouped ? table.getState().pagination.pageIndex + 1 : page, limit: limit, setPagination: setPagination })] }));
 };

package/dist/src/modules/table/components/TableGroupBy.d.ts

@@ -0,0 +1,12 @@
+interface TableGroupByColumn {
+    id: string;
+    label: string;
+}
+interface TableGroupByProps {
+    columns: TableGroupByColumn[];
+    activeGrouping: string[];
+    onGroupingChange: (columnIds: string[]) => void;
+    onClose: () => void;
+}
+export declare const TableGroupBy: ({ columns, activeGrouping, onGroupingChange, onClose, }: TableGroupByProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/modules/table/components/TableGroupBy.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button } from "../../../components/ui/button";
+import { cn } from "../../../lib/utils";
+export const TableGroupBy = ({ columns, activeGrouping, onGroupingChange, onClose, }) => {
+    const [selected, setSelected] = useState(activeGrouping);
+    const toggle = (id) => {
+        setSelected((prev) => (prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id]));
+    };
+    const onApply = () => {
+        onGroupingChange(selected);
+        onClose();
+    };
+    const onClear = () => {
+        setSelected([]);
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-2 p-1 min-w-[180px]", children: [_jsx("div", { className: "flex flex-col gap-0.5", children: columns.map((col) => (_jsxs("button", { type: "button", className: cn("text-left px-2 py-1.5 rounded text-sm hover:bg-muted transition-colors flex items-center gap-2", selected.includes(col.id) && "bg-muted font-medium"), onClick: () => toggle(col.id), children: [_jsx("span", { className: cn("h-4 w-4 rounded border border-muted-foreground/40 flex items-center justify-center shrink-0 text-xs", selected.includes(col.id) && "bg-primary border-primary text-primary-foreground"), children: selected.includes(col.id) ? "✓" : "" }), col.label, selected.includes(col.id) && selected.length > 1 && (_jsx("span", { className: "text-muted-foreground text-xs ml-auto", children: selected.indexOf(col.id) + 1 }))] }, col.id))) }), _jsxs("div", { className: "flex gap-1.5", children: [_jsx(Button, { size: "sm", variant: "outline", onClick: onClear, className: "flex-1", children: "Clear" }), _jsx(Button, { size: "sm", onClick: onApply, className: "flex-1", children: "Apply" })] })] }));
+};

package/dist/src/modules/table/components/TablePagination.js

@@ -1,19 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import { Input } from "../../../components/ui/input";
 import { Pagination, PaginationContent, PaginationNext, PaginationPrevious, } from "../../../components/ui/pagination";
 export const TablePagination = ({ pageCount, page = 1, limit = 10, setPagination, }) => {
+    const [inputValue, setInputValue] = useState(String(page));
+    useEffect(() => {
+        setInputValue(String(page));
+    }, [page]);
+    const commitPage = () => {
+        const newPage = Number(inputValue);
+        if (Number.isFinite(newPage) && newPage >= 1 && newPage <= pageCount) {
+            setPagination?.({ pageIndex: newPage - 1, pageSize: limit });
+        }
+        else {
+            setInputValue(String(page));
+        }
+    };
     const isFirstPage = page === 1;
     const isLastPage = page >= pageCount;
-    return (_jsx(Pagination, { children: _jsxs(PaginationContent, { children: [_jsx(PaginationPrevious, { isActive: !isFirstPage, onClick: () => {
+    return (_jsx(Pagination, { children: _jsxs(PaginationContent, { children: [_jsx(PaginationPrevious, { isActive: !isFirstPage, "aria-disabled": isFirstPage, className: isFirstPage ? "pointer-events-none opacity-50" : undefined, onClick: () => {
                         if (!isFirstPage) {
                             setPagination?.({ pageIndex: page - 2, pageSize: limit });
                         }
-                    } }), _jsx(Input, { type: "number", value: page, min: 1, max: pageCount, onChange: (e) => {
-                        const newPage = e.target.valueAsNumber;
-                        if (newPage >= 1 && newPage <= pageCount) {
-                            setPagination?.({ pageIndex: newPage - 1, pageSize: limit });
-                        }
-                    } }), _jsx(PaginationNext, { isActive: !isLastPage, onClick: () => {
+                    } }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Input, { type: "number", value: inputValue, min: 1, max: pageCount, onChange: (e) => setInputValue(e.target.value), onBlur: commitPage, onKeyDown: (e) => {
+                                if (e.key === "Enter") {
+                                    commitPage();
+                                }
+                            } }), _jsxs("span", { className: "text-sm text-muted-foreground whitespace-nowrap", children: ["/ ", pageCount] })] }), _jsx(PaginationNext, { isActive: !isLastPage, "aria-disabled": isLastPage, className: isLastPage ? "pointer-events-none opacity-50" : undefined, onClick: () => {
                         if (!isLastPage) {
                             setPagination?.({ pageIndex: page, pageSize: limit });
                         }