@m5kdev/web-ui 0.1.3 → 0.1.4

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

@@ -0,0 +1,24 @@
+import type { FilterMethods } from "@m5kdev/commons/modules/table/filter.types";
+import type { TableParams } from "@m5kdev/frontend/modules/table/hooks/useNuqsTable";
+import type { ColumnDef } from "@tanstack/react-table";
+import type { ColumnDataType } from "./table.types";
+export type NuqsTableColumn<T> = ColumnDef<T> & {
+    visible?: boolean;
+    type?: ColumnDataType;
+    options?: {
+        label: string;
+        value: string;
+    }[];
+    endColumnId?: string;
+};
+type NuqsTableParams<T> = {
+    data: T[];
+    total?: number;
+    columns: NuqsTableColumn<T>[];
+    tableProps: TableParams;
+    singleFilter?: boolean;
+    filterMethods?: Partial<FilterMethods>;
+};
+export declare const NuqsTable: <T>({ data, total, columns, tableProps, singleFilter, filterMethods, }: NuqsTableParams<T>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=NuqsTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NuqsTable.d.ts","sourceRoot":"","sources":["../../../../../src/modules/table/components/NuqsTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAChF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mDAAmD,CAAC;AACrF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAwBvD,OAAO,KAAK,EAAE,cAAc,EAAc,MAAM,eAAe,CAAC;AAoChE,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,GAAG;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,KAAK,eAAe,CAAC,CAAC,IAAI;IACxB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,UAAU,EAAE,WAAW,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CACxC,CAAC;AAiBF,eAAO,MAAM,SAAS,GAAI,CAAC,EAAG,oEAO3B,eAAe,CAAC,CAAC,CAAC,4CAqSpB,CAAC"}

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

@@ -0,0 +1,198 @@
+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 { 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 { TablePagination } from "./TablePagination";
+function getStorageKey(columnIds) {
+    const sortedIds = [...columnIds].sort().join(",");
+    return `table-column-layout-${sortedIds}`;
+}
+function loadLayoutFromStorage(columnIds) {
+    if (typeof window === "undefined")
+        return null;
+    try {
+        const key = getStorageKey(columnIds);
+        const stored = localStorage.getItem(key);
+        if (!stored)
+            return null;
+        const parsed = JSON.parse(stored);
+        return parsed;
+    }
+    catch {
+        return null;
+    }
+}
+function saveLayoutToStorage(columnIds, order, visibility) {
+    if (typeof window === "undefined")
+        return;
+    try {
+        const key = getStorageKey(columnIds);
+        localStorage.setItem(key, JSON.stringify({ order, visibility }));
+    }
+    catch {
+        // Ignore storage errors
+    }
+}
+function applyOrder(prev, nextOrder) {
+    const byId = new Map(prev.map((i) => [i.id, i]));
+    const ordered = nextOrder.map((id) => byId.get(id)).filter(Boolean);
+    // append any newly added columns (if any appear later)
+    for (const item of prev)
+        if (!nextOrder.includes(item.id))
+            ordered.push(item);
+    return ordered;
+}
+function applyVisibility(prev, visibility) {
+    return prev.map((column) => ({
+        ...column,
+        visibility: visibility[String(column.id)] ?? column.visibility,
+    }));
+}
+export const NuqsTable = ({ data, total, columns, tableProps, singleFilter = false, filterMethods, }) => {
+    const columnIds = useMemo(() => columns.map((col) => String(col.id)), [columns]);
+    console.log("data", data);
+    // const columnsWithId = useMemo(() => {
+    //   const idColumn: NuqsTableColumn<T> = {
+    //     id: "__row_id",
+    //     accessorKey: "id",
+    //     header: "",
+    //     enableSorting: false,
+    //     enableHiding: false,
+    //     visible: false,
+    //   };
+    //   return [idColumn, ...columns];
+    // }, [columns]);
+    const initialLayout = useMemo(() => {
+        const defaultLayout = columns.map((column) => ({
+            id: String(column.id),
+            label: column.header,
+            visibility: column.visible !== undefined ? column.visible : true,
+            options: column.options ?? [],
+            type: column.type ?? undefined,
+        }));
+        const saved = loadLayoutFromStorage(columnIds);
+        if (!saved)
+            return defaultLayout;
+        // Merge saved layout with default layout
+        const savedById = new Map();
+        saved.order.forEach((id, index) => {
+            savedById.set(id, { order: index, visibility: saved.visibility[id] ?? true });
+        });
+        const merged = [];
+        const processedIds = new Set();
+        // Add columns in saved order
+        saved.order.forEach((id) => {
+            const defaultCol = defaultLayout.find((col) => col.id === id);
+            if (defaultCol) {
+                merged.push({
+                    ...defaultCol,
+                    visibility: saved.visibility[id] ?? defaultCol.visibility,
+                });
+                processedIds.add(id);
+            }
+        });
+        // Add any new columns that weren't in saved layout
+        defaultLayout.forEach((col) => {
+            if (!processedIds.has(col.id)) {
+                merged.push(col);
+            }
+        });
+        return merged;
+    }, [columns, columnIds]);
+    const [layout, setLayout] = useState(initialLayout);
+    // Sync layout when columns change
+    useEffect(() => {
+        setLayout(initialLayout);
+    }, [initialLayout]);
+    // Save to localStorage whenever layout changes
+    useEffect(() => {
+        const order = layout.map((col) => col.id);
+        const visibility = Object.fromEntries(layout.map((col) => [col.id, col.visibility]));
+        saveLayoutToStorage(columnIds, order, visibility);
+    }, [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;
+    // Redirect back if we're on an empty page (past the last page)
+    useEffect(() => {
+        if (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
+        ? Math.ceil(total / limit) || 1
+        : data.length === limit
+            ? page + 1
+            : Math.max(page, Math.ceil(data.length / limit));
+    const table = useReactTable({
+        data,
+        columns,
+        getRowId: (row) => String(row.id),
+        manualSorting: true,
+        manualPagination: true,
+        state: { pagination, sorting, rowSelection, columnOrder, columnVisibility },
+        pageCount,
+        manualFiltering: true,
+        onSortingChange: setSorting,
+        onPaginationChange: setPagination,
+        onRowSelectionChange: setRowSelection,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        onColumnOrderChange: (updater) => {
+            setLayout((prev) => applyOrder(prev, typeof updater === "function" ? updater(prev.map((i) => i.id)) : updater));
+        },
+        onColumnVisibilityChange: (updater) => {
+            setLayout((prev) => applyVisibility(prev, typeof updater === "function"
+                ? updater(Object.fromEntries(prev.map((i) => [i.id, i.visibility])))
+                : updater));
+        },
+    });
+    const onChangeOrder = (order) => {
+        setLayout((prev) => applyOrder(prev, order));
+    };
+    const onChangeVisibility = (visibility) => {
+        setLayout((prev) => applyVisibility(prev, visibility));
+    };
+    const onFiltersChange = (filters) => {
+        setFilters?.(filters);
+    };
+    const filterableColumns = useMemo(() => {
+        const baseColumns = columns
+            .filter((column) => Boolean(column.type))
+            .map((column) => ({
+            id: String(column.id),
+            label: String(column.header),
+            type: column.type,
+            options: column.options ?? [],
+            endColumnId: column.endColumnId,
+            periodStartColumnId: null,
+            periodEndColumnId: null,
+        }));
+        // Add Period pseudo-columns for date columns with endColumnId
+        const periodColumns = columns
+            .filter((column) => column.type === "date" && column.endColumnId)
+            .map((column) => ({
+            id: `${String(column.id)}__period`,
+            label: "Period",
+            type: "date",
+            options: [],
+            endColumnId: null,
+            periodStartColumnId: String(column.id),
+            periodEndColumnId: column.endColumnId,
+        }));
+        return [...baseColumns, ...periodColumns];
+    }, [columns]);
+    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) => {
+                                            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 })] }));
+};

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

@@ -0,0 +1,24 @@
+import type { QueryFilters } from "@m5kdev/commons/modules/schemas/query.schema";
+import type { ColumnDataType, FilterMethods } from "@m5kdev/commons/modules/table/filter.types";
+type TableFilteringProps = {
+    columns: {
+        id: string;
+        label: string;
+        type?: ColumnDataType | null;
+        options?: {
+            label: string;
+            value: string;
+        }[] | null;
+        endColumnId?: string | null;
+        periodStartColumnId?: string | null;
+        periodEndColumnId?: string | null;
+    }[];
+    onFiltersChange: (filters: QueryFilters) => void;
+    filters: QueryFilters;
+    onClose?: () => void;
+    singleFilter?: boolean;
+    filterMethods?: Partial<FilterMethods>;
+};
+export declare const TableFiltering: ({ columns, onFiltersChange, filters: initialFilters, onClose, singleFilter, filterMethods, }: TableFilteringProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TableFiltering.d.ts.map

package/dist/src/modules/table/components/TableFiltering.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFiltering.d.ts","sourceRoot":"","sources":["../../../../../src/modules/table/components/TableFiltering.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAC;AACjF,OAAO,KAAK,EACV,cAAc,EAGd,aAAa,EACd,MAAM,4CAA4C,CAAC;AAuIpD,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE;QACP,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;QAC7B,OAAO,CAAC,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,EAAE,GAAG,IAAI,CAAC;QACpD,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAC5B,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACpC,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KACnC,EAAE,CAAC;IACJ,eAAe,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACjD,OAAO,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CACxC,CAAC;AAmBF,eAAO,MAAM,cAAc,GAAI,8FAO5B,mBAAmB,4CAoLrB,CAAC"}

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

@@ -0,0 +1,236 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DatePicker, DateRangePicker, Input, Select, SelectItem, } from "@heroui/react";
+import { getLocalTimeZone, today } from "@internationalized/date";
+import { PlusIcon, XIcon } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Button } from "#components/ui/button";
+import { transformFiltersFromHeroUI, transformFiltersToHeroUI, } from "../filterTransformers";
+const componentForFilterMethod = {
+    text: (value, onChange) => (_jsx(Input, { size: "sm", "aria-label": "Select Value", className: "flex-1 min-w-0 text-sm", value: value ?? "", onChange: (e) => onChange(e.target.value) })),
+    number: (value, onChange) => (_jsx(Input, { size: "sm", "aria-label": "Select Value", type: "number", className: "flex-1 min-w-0 text-sm", value: value?.toString() ?? "", onChange: (e) => onChange(Number.parseFloat(e.target.value) || 0) })),
+    date: (value, onChange) => (_jsx(DatePicker, { size: "sm", "aria-label": "Select Value", className: "flex-1 min-w-0 text-sm", value: value ?? undefined, onChange: (date) => date && onChange(date), maxValue: today(getLocalTimeZone()) })),
+    range: (value, onChange) => (_jsx(DateRangePicker, { size: "sm", "aria-label": "Select Value", className: "flex-1 min-w-0 text-sm", value: value ?? undefined, onChange: (range) => range && onChange(range), maxValue: today(getLocalTimeZone()) })),
+    radio: (value, onChange) => (_jsxs(Select, { size: "sm", "aria-label": "Select Value", className: "flex-1 min-w-0 text-sm", selectedKeys: value ? ["true"] : ["false"], onSelectionChange: (keys) => onChange(keys.currentKey === "true"), children: [_jsx(SelectItem, { className: "text-sm", children: "True" }, "true"), _jsx(SelectItem, { className: "text-sm", children: "False" }, "false")] })),
+    select: (value, onChange, options = []) => (_jsx(Select, { size: "sm", "aria-label": "Select Value", className: "flex-1 min-w-0 text-sm", selectedKeys: value ?? new Set(), onSelectionChange: (keys) => keys && onChange(keys), children: options.map((option) => (_jsx(SelectItem, { className: "text-sm", children: option.label }, option.value))) })),
+    multiSelect: (value, onChange, options = []) => (_jsx(Select, { size: "sm", "aria-label": "Select Value", selectionMode: "multiple", className: "flex-1 min-w-0 text-sm", selectedKeys: value ? new Set(value) : new Set(), onSelectionChange: (keys) => onChange(keys), children: options.map((option) => (_jsx(SelectItem, { className: "text-sm", children: option.label }, option.value))) })),
+};
+const defaultFilterMethods = {
+    string: [
+        { value: "contains", label: "Contains", component: "text" },
+        { value: "equals", label: "Equals", component: "text" },
+        { value: "starts_with", label: "Starts With", component: "text" },
+        { value: "ends_with", label: "Ends With", component: "text" },
+    ],
+    number: [
+        { value: "equals", label: "Equals", component: "number" },
+        { value: "greater_than", label: "Greater Than", component: "number" },
+        { value: "less_than", label: "Less Than", component: "number" },
+    ],
+    date: [
+        { value: "on", label: "On", component: "date" },
+        { value: "between", label: "Between", component: "range" },
+        { value: "before", label: "Before", component: "date" },
+        { value: "after", label: "After", component: "date" },
+        { value: "intersect", label: "During", component: "range" },
+    ],
+    boolean: [{ value: "equals", label: "Equals", component: "radio" }],
+    enum: [
+        { value: "oneOf", label: "One Of", component: "multiSelect" },
+        { value: "equals", label: "Equals", component: "select" },
+    ],
+};
+const SINGLE_FILTER_KEY = "single-filter";
+const mergeFilterMethods = (overrides) => ({
+    string: overrides?.string && overrides.string.length > 0
+        ? overrides.string
+        : defaultFilterMethods.string,
+    number: overrides?.number && overrides.number.length > 0
+        ? overrides.number
+        : defaultFilterMethods.number,
+    date: overrides?.date && overrides.date.length > 0 ? overrides.date : defaultFilterMethods.date,
+    boolean: overrides?.boolean && overrides.boolean.length > 0
+        ? overrides.boolean
+        : defaultFilterMethods.boolean,
+    enum: overrides?.enum && overrides.enum.length > 0 ? overrides.enum : defaultFilterMethods.enum,
+});
+export const TableFiltering = ({ columns, onFiltersChange, filters: initialFilters = [], onClose, singleFilter = false, filterMethods, }) => {
+    const [filters, setFilters] = useState({});
+    const effectiveFilterMethods = useMemo(() => mergeFilterMethods(filterMethods), [filterMethods]);
+    const createEmptyFilter = useCallback(() => ({
+        columnId: "",
+        type: null,
+        value: null,
+        method: null,
+        options: null,
+        endColumnId: null,
+        periodStartColumnId: null,
+        periodEndColumnId: null,
+    }), []);
+    const addFilter = useCallback(() => {
+        setFilters((prev) => {
+            if (!singleFilter) {
+                const filterId = crypto.randomUUID();
+                return {
+                    ...prev,
+                    [filterId]: createEmptyFilter(),
+                };
+            }
+            // single filter mode
+            return Object.keys(prev).length > 0 ? prev : { [SINGLE_FILTER_KEY]: createEmptyFilter() };
+        });
+    }, [createEmptyFilter, singleFilter]);
+    const removeFilter = useCallback((filterId) => {
+        setFilters((prev) => {
+            if (!singleFilter) {
+                const { [filterId]: _, ...rest } = prev;
+                return rest;
+            }
+            // single filter mode resets the lone filter
+            return { [SINGLE_FILTER_KEY]: createEmptyFilter() };
+        });
+    }, [createEmptyFilter, singleFilter]);
+    const columnsMap = useMemo(() => new Map(columns.map((column) => [column.id, column])), [columns]);
+    useEffect(() => {
+        // Transform initialFilters from FiltersToApply format to HeroUIFilter format
+        const transformedFilters = transformFiltersToHeroUI(initialFilters, columnsMap, effectiveFilterMethods);
+        if (!singleFilter) {
+            setFilters(Object.fromEntries(transformedFilters.map((filter) => [filter.columnId, filter])));
+            return;
+        }
+        const firstFilter = transformedFilters[0];
+        setFilters({
+            [SINGLE_FILTER_KEY]: firstFilter ?? createEmptyFilter(),
+        });
+    }, [createEmptyFilter, initialFilters, singleFilter, columnsMap, effectiveFilterMethods]);
+    const selectColumn = useCallback((filterId, columnId) => {
+        setFilters((prev) => {
+            const oldFilter = prev[filterId];
+            if (!oldFilter)
+                return prev;
+            const column = columnsMap.get(columnId);
+            if (!column)
+                return prev;
+            // If Period column, auto-set intersect method
+            const isPeriodColumn = columnId.endsWith("__period");
+            const intersectMethod = isPeriodColumn
+                ? (effectiveFilterMethods.date.find((m) => m.value === "intersect") ?? null)
+                : null;
+            return {
+                ...prev,
+                [filterId]: {
+                    ...oldFilter,
+                    columnId,
+                    type: column.type ?? null,
+                    options: column.options ?? null,
+                    endColumnId: column.endColumnId ?? null,
+                    periodStartColumnId: column.periodStartColumnId ?? null,
+                    periodEndColumnId: column.periodEndColumnId ?? null,
+                    method: intersectMethod,
+                    value: null,
+                },
+            };
+        });
+    }, [columnsMap, effectiveFilterMethods]);
+    const selectMethod = useCallback((filterId, method) => {
+        setFilters((prev) => {
+            const oldFilter = prev[filterId];
+            if (!oldFilter)
+                return prev;
+            return {
+                ...prev,
+                [filterId]: { ...oldFilter, method, value: null },
+            };
+        });
+    }, []);
+    const selectValue = useCallback((filterId, value) => {
+        setFilters((prev) => {
+            const oldFilter = prev[filterId];
+            if (!oldFilter)
+                return prev;
+            return {
+                ...prev,
+                [filterId]: { ...oldFilter, value },
+            };
+        });
+    }, []);
+    const filterEntries = useMemo(() => Object.entries(filters), [filters]);
+    const availableColumnsMap = useMemo(() => {
+        const map = new Map();
+        filterEntries.forEach(([filterId]) => {
+            const columnsUsedByOtherFilters = new Set(filterEntries
+                .filter(([id]) => id !== filterId)
+                .map(([_, f]) => f.columnId)
+                .filter((id) => id !== ""));
+            map.set(filterId, columns.filter((column) => !columnsUsedByOtherFilters.has(column.id)));
+        });
+        return map;
+    }, [filterEntries, columns]);
+    const applyFilters = useCallback(() => {
+        const heroUIFilters = Object.values(filters);
+        const filtersToApply = transformFiltersFromHeroUI(heroUIFilters);
+        onFiltersChange(filtersToApply);
+        onClose?.();
+    }, [filters, onFiltersChange, onClose]);
+    return (_jsxs("div", { className: "flex flex-col gap-2 p-1 min-w-[600px]", children: [filterEntries.map(([filterId, filter]) => {
+                const availableColumns = availableColumnsMap.get(filterId) ?? columns;
+                return (_jsx(TableFilteringItem, { id: filterId, filter: filter, columns: availableColumns, selectColumn: selectColumn, selectMethod: selectMethod, removeFilter: removeFilter, selectValue: selectValue, filterMethods: effectiveFilterMethods }, filterId));
+            }), !singleFilter && (_jsxs(Button, { variant: "outline", size: "sm", onClick: addFilter, children: [_jsx(PlusIcon, { className: "h-4 w-4" }), "Add Filter"] })), _jsx(Button, { onClick: applyFilters, children: singleFilter ? "Apply Filter" : "Apply Filters" })] }));
+};
+const TableFilteringItem = ({ id, filter, columns, selectColumn, selectMethod, selectValue, removeFilter, filterMethods, }) => {
+    const handleColumnChange = useCallback((keys) => {
+        const columnId = String(keys.currentKey);
+        selectColumn(id, columnId);
+    }, [id, selectColumn]);
+    const methodsForType = useMemo(() => {
+        if (!filter.type)
+            return [];
+        // Period columns only support intersect method
+        const isPeriodColumn = filter.columnId.endsWith("__period");
+        if (isPeriodColumn) {
+            const intersectMethod = filterMethods.date.find((m) => m.value === "intersect");
+            return intersectMethod ? [intersectMethod] : [];
+        }
+        const baseMethods = filterMethods[filter.type] ?? [];
+        const emptyMethods = [
+            { value: "isEmpty", label: "Is Empty", component: null },
+            { value: "isNotEmpty", label: "Is Not Empty", component: null },
+        ];
+        if (filter.type !== "boolean" && filter.type !== "date") {
+            return [...baseMethods, ...emptyMethods];
+        }
+        return baseMethods;
+    }, [filter.type, filter.columnId, filter.method?.value, filterMethods]);
+    const handleMethodChange = useCallback((keys) => {
+        if (!filter.type)
+            return;
+        // Use methodsForType instead of filterMethods to include dynamically added methods
+        const method = methodsForType.find((currentMethod) => currentMethod.value === String(keys.currentKey));
+        if (method) {
+            selectMethod(id, method);
+        }
+    }, [id, filter.type, selectMethod, methodsForType]);
+    const handleValueChange = useCallback((value) => {
+        selectValue(id, value);
+    }, [id, selectValue]);
+    const methodSelect = useMemo(() => {
+        if (!filter.type)
+            return null;
+        return (_jsx(Select, { size: "sm", "aria-label": "Select Method", className: "w-40 flex-shrink-0 text-sm", selectedKeys: filter.method?.value ? [filter.method.value] : [], onSelectionChange: handleMethodChange, popoverProps: {
+                className: "w-auto min-w-max",
+            }, children: methodsForType.map((method) => (_jsx(SelectItem, { className: "text-sm", children: method.label }, method.value))) }));
+    }, [filter.type, filter.method?.value, methodsForType, handleMethodChange]);
+    const filterValueComponent = useMemo(() => {
+        if (!filter.method?.component) {
+            return _jsx("div", { className: "flex-1 min-w-0" });
+        }
+        const component = filter.method.component;
+        const ComponentFn = componentForFilterMethod[component];
+        if (!ComponentFn)
+            return _jsx("div", { className: "flex-1 min-w-0" });
+        return ComponentFn(filter.value, handleValueChange, filter.options ?? []);
+    }, [filter.method?.component, filter.value, filter.options, handleValueChange]);
+    const columnSelectItems = useMemo(() => columns.map((column) => (_jsx(SelectItem, { className: "text-sm", children: String(column.label) }, column.id))), [columns]);
+    return (_jsxs("div", { className: "flex items-center gap-2 w-full", children: [_jsxs("div", { className: "flex flex-1 items-center gap-2 min-w-0", children: [_jsx(Select, { size: "sm", "aria-label": "Select Column", className: "w-40 flex-shrink-0 text-sm", selectedKeys: filter.columnId ? [filter.columnId] : [], onSelectionChange: handleColumnChange, popoverProps: {
+                            className: "w-auto min-w-max",
+                        }, children: columnSelectItems }), methodSelect, filterValueComponent] }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => removeFilter(id), children: _jsx(XIcon, { className: "h-4 w-4" }) })] }));
+};

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

@@ -0,0 +1,10 @@
+import type { TableProps } from "@m5kdev/frontend/modules/table/hooks/useNuqsTable";
+interface TablePaginationProps {
+    pageCount: number;
+    page: TableProps["page"];
+    limit: TableProps["limit"];
+    setPagination: TableProps["setPagination"];
+}
+export declare const TablePagination: ({ pageCount, page, limit, setPagination, }: TablePaginationProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TablePagination.d.ts.map

package/dist/src/modules/table/components/TablePagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TablePagination.d.ts","sourceRoot":"","sources":["../../../../../src/modules/table/components/TablePagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mDAAmD,CAAC;AASpF,UAAU,oBAAoB;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IACzB,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC3B,aAAa,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,eAAe,GAAI,4CAK7B,oBAAoB,4CAqCtB,CAAC"}

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 isFirstPage = page === 1;
+    const isLastPage = page >= pageCount;
+    return (_jsx(Pagination, { children: _jsxs(PaginationContent, { children: [_jsx(PaginationPrevious, { isActive: !isFirstPage, 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: () => {
+                        if (!isLastPage) {
+                            setPagination?.({ pageIndex: page, pageSize: limit });
+                        }
+                    } })] }) }));
+};

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

@@ -0,0 +1,13 @@
+import type { ColumnDataType as CommonColumnDataType } from "@m5kdev/commons/modules/table/filter.types";
+export type ColumnDataType = CommonColumnDataType;
+export type ColumnItem = {
+    id: string;
+    label: string;
+    visibility: boolean;
+    options?: {
+        label: string;
+        value: string;
+    }[];
+    type?: ColumnDataType;
+};
+//# sourceMappingURL=table.types.d.ts.map

package/dist/src/modules/table/components/table.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.types.d.ts","sourceRoot":"","sources":["../../../../../src/modules/table/components/table.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,IAAI,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AAEzG,MAAM,MAAM,cAAc,GAAG,oBAAoB,CAAC;AAElD,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC7C,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB,CAAC"}

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

@@ -0,0 +1 @@
+export {};

package/dist/src/modules/table/filterTransformers.d.ts

@@ -0,0 +1,54 @@
+import type { DateValue, RangeValue, SharedSelection } from "@heroui/react";
+import { CalendarDate } from "@internationalized/date";
+import type { QueryFilters } from "@m5kdev/commons/modules/schemas/query.schema";
+import type { ColumnDataType, FilterMethod } from "@m5kdev/commons/modules/table/filter.types";
+export type FilterValue = string | number | string[] | DateValue | RangeValue<DateValue> | boolean | SharedSelection | null;
+export interface HeroUIFilter {
+    columnId: string;
+    type: ColumnDataType | null;
+    value: FilterValue;
+    method: FilterMethod | null;
+    options?: {
+        label: string;
+        value: string;
+    }[] | null;
+    endColumnId?: string | null;
+    periodStartColumnId?: string | null;
+    periodEndColumnId?: string | null;
+}
+/**
+ * Convert CalendarDate to UTC ISO string at midnight UTC
+ */
+export declare const calendarDateToUTC: (date: CalendarDate) => string;
+/**
+ * Convert CalendarDate to end of day UTC ISO string
+ */
+export declare const calendarDateToEndOfDayUTC: (date: CalendarDate) => string;
+/**
+ * Convert any date filter method from URL to a RangeValue for DateRangePicker
+ * Handles: on, before, after, between, intersect
+ * Parses UTC ISO strings as UTC to avoid timezone shifts
+ */
+export declare const dateFilterToRangeValue: (filters: QueryFilters | undefined, columnId: string) => RangeValue<DateValue> | null;
+/**
+ * Transform filters from backend format (QueryFilter[]) to HeroUI format (HeroUIFilter[])
+ * Used when loading filters from URL/backend to populate HeroUI components
+ */
+export declare const transformFiltersToHeroUI: (filtersToTransform: QueryFilters, columnsMap: Map<string, {
+    id: string;
+    label: string;
+    type?: ColumnDataType | null;
+    options?: {
+        label: string;
+        value: string;
+    }[] | null;
+    endColumnId?: string | null;
+    periodStartColumnId?: string | null;
+    periodEndColumnId?: string | null;
+}>, filterMethods: Record<ColumnDataType, FilterMethod[]>) => HeroUIFilter[];
+/**
+ * Transform filters from HeroUI format (HeroUIFilter[]) to backend format (QueryFilter[])
+ * Used when applying filters to send to backend/URL
+ */
+export declare const transformFiltersFromHeroUI: (filters: HeroUIFilter[]) => QueryFilters;
+//# sourceMappingURL=filterTransformers.d.ts.map

package/dist/src/modules/table/filterTransformers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterTransformers.d.ts","sourceRoot":"","sources":["../../../../src/modules/table/filterTransformers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAE,YAAY,EAA2B,MAAM,yBAAyB,CAAC;AAChF,OAAO,KAAK,EAAe,YAAY,EAAE,MAAM,8CAA8C,CAAC;AAC9F,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAG/F,MAAM,MAAM,WAAW,GACnB,MAAM,GACN,MAAM,GACN,MAAM,EAAE,GACR,SAAS,GACT,UAAU,CAAC,SAAS,CAAC,GACrB,OAAO,GACP,eAAe,GACf,IAAI,CAAC;AAET,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,cAAc,GAAG,IAAI,CAAC;IAC5B,KAAK,EAAE,WAAW,CAAC;IACnB,MAAM,EAAE,YAAY,GAAG,IAAI,CAAC;IAC5B,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,GAAG,IAAI,CAAC;IACpD,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACnC;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,YAAY,KAAG,MAEtD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,yBAAyB,GAAI,MAAM,YAAY,KAAG,MAE9D,CAAC;AAeF;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,GACjC,SAAS,YAAY,GAAG,SAAS,EACjC,UAAU,MAAM,KACf,UAAU,CAAC,SAAS,CAAC,GAAG,IA2D1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,GACnC,oBAAoB,YAAY,EAChC,YAAY,GAAG,CACb,MAAM,EACN;IACE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAC7B,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,GAAG,IAAI,CAAC;IACpD,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACnC,CACF,EACD,eAAe,MAAM,CAAC,cAAc,EAAE,YAAY,EAAE,CAAC,KACpD,YAAY,EA4Fd,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,0BAA0B,GAAI,SAAS,YAAY,EAAE,KAAG,YAkFpE,CAAC"}