@m5kdev/web-ui 0.1.3 → 0.1.5

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

@@ -0,0 +1,23 @@
+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 {};

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,9 @@
+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 {};

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/{src/modules/table/components/table.types.ts → dist/src/modules/table/components/table.types.d.ts}

@@ -1,11 +1,12 @@
-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;
-};
+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;
+};

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

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

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

@@ -0,0 +1,53 @@
+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;

package/dist/src/modules/table/filterTransformers.js

@@ -0,0 +1,276 @@
+import { CalendarDate, getLocalTimeZone, today } from "@internationalized/date";
+import { DateTime } from "luxon";
+/**
+ * Convert CalendarDate to UTC ISO string at midnight UTC
+ */
+export const calendarDateToUTC = (date) => {
+    return DateTime.utc(date.year, date.month, date.day).toISO() ?? "";
+};
+/**
+ * Convert CalendarDate to end of day UTC ISO string
+ */
+export const calendarDateToEndOfDayUTC = (date) => {
+    return DateTime.utc(date.year, date.month, date.day).endOf("day").toISO() ?? "";
+};
+/**
+ * Parse UTC ISO string to CalendarDate (preserves UTC date, no timezone shift)
+ */
+const parseUTCToCalendarDate = (isoString) => {
+    try {
+        const dt = DateTime.fromISO(isoString, { zone: "utc" });
+        if (!dt.isValid)
+            return null;
+        return new CalendarDate(dt.year, dt.month, dt.day);
+    }
+    catch {
+        return null;
+    }
+};
+/**
+ * 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 const dateFilterToRangeValue = (filters, columnId) => {
+    if (!filters)
+        return null;
+    const filter = filters.find((f) => f.columnId === columnId);
+    if (!filter || filter.type !== "date")
+        return null;
+    const todayDate = today(getLocalTimeZone());
+    const epochStart = new CalendarDate(1970, 1, 1);
+    try {
+        switch (filter.method) {
+            case "on": {
+                // Same day range
+                if (typeof filter.value !== "string" || !filter.value)
+                    return null;
+                const day = parseUTCToCalendarDate(filter.value);
+                if (!day)
+                    return null;
+                return {
+                    start: day,
+                    end: day,
+                };
+            }
+            case "before": {
+                // [epochStart, selectedDay]
+                if (typeof filter.value !== "string" || !filter.value)
+                    return null;
+                const day = parseUTCToCalendarDate(filter.value);
+                if (!day)
+                    return null;
+                return {
+                    start: epochStart,
+                    end: day,
+                };
+            }
+            case "after": {
+                // [selectedDay, today]
+                if (typeof filter.value !== "string" || !filter.value)
+                    return null;
+                const day = parseUTCToCalendarDate(filter.value);
+                if (!day)
+                    return null;
+                return {
+                    start: day,
+                    end: todayDate,
+                };
+            }
+            case "between":
+            case "intersect": {
+                // [value, valueTo]
+                if (typeof filter.value !== "string" || !filter.value || !filter.valueTo)
+                    return null;
+                const startDate = parseUTCToCalendarDate(filter.value);
+                const endDate = parseUTCToCalendarDate(filter.valueTo);
+                if (!startDate || !endDate)
+                    return null;
+                return {
+                    start: startDate,
+                    end: endDate,
+                };
+            }
+            default:
+                return null;
+        }
+    }
+    catch {
+        return null;
+    }
+};
+/**
+ * Transform filters from backend format (QueryFilter[]) to HeroUI format (HeroUIFilter[])
+ * Used when loading filters from URL/backend to populate HeroUI components
+ */
+export const transformFiltersToHeroUI = (filtersToTransform, columnsMap, filterMethods) => {
+    return filtersToTransform.map((filter) => {
+        let value = null;
+        let method = null;
+        let columnId = filter.columnId;
+        // Check if this intersect filter should map to Period pseudo-column
+        if (filter.type === "date" && filter.method === "intersect" && filter.endColumnId) {
+            const periodColumnId = `${filter.columnId}__period`;
+            const periodColumn = columnsMap.get(periodColumnId);
+            if (periodColumn) {
+                // Map to Period pseudo-column
+                columnId = periodColumnId;
+            }
+        }
+        // Find the method object from the methods configuration
+        if (filter.type) {
+            const availableMethods = filterMethods[filter.type];
+            const methodObj = availableMethods?.find((m) => m.value === filter.method);
+            if (methodObj) {
+                method = methodObj;
+            }
+            else if (filter.method === "isEmpty" || filter.method === "isNotEmpty") {
+                // Handle isEmpty/isNotEmpty even if not in the provided method list
+                method = {
+                    value: filter.method,
+                    label: filter.method === "isEmpty" ? "Is Empty" : "Is Not Empty",
+                    component: null,
+                };
+            }
+        }
+        // Transform value based on type
+        switch (filter.type) {
+            case "string":
+                value = filter.value;
+                break;
+            case "number":
+                value = filter.value;
+                break;
+            case "date":
+                // Use the shared helper for range conversion, or parse single dates as UTC
+                if (filter.method === "between" || filter.method === "intersect") {
+                    // For range methods, use the helper function
+                    const range = dateFilterToRangeValue([filter], filter.columnId);
+                    value = range;
+                }
+                else {
+                    // Single date value: parse UTC ISO string and extract UTC calendar date
+                    if (typeof filter.value === "string" && filter.value) {
+                        const day = parseUTCToCalendarDate(filter.value);
+                        value = day ? day : null;
+                    }
+                    else {
+                        value = null;
+                    }
+                }
+                break;
+            case "boolean":
+                value = filter.value;
+                break;
+            case "enum":
+                if (filter.method === "oneOf" && Array.isArray(filter.value)) {
+                    // Multi-select: array of strings to SharedSelection (Set)
+                    value = new Set(filter.value);
+                }
+                else {
+                    // Single select: string to SharedSelection with currentKey
+                    const selection = new Set([filter.value]);
+                    // Set currentKey property
+                    Object.defineProperty(selection, "currentKey", {
+                        value: filter.value,
+                        writable: true,
+                        enumerable: false,
+                        configurable: true,
+                    });
+                    value = selection;
+                }
+                break;
+            default:
+                value = filter.value;
+        }
+        const column = columnsMap.get(columnId);
+        return {
+            columnId,
+            type: filter.type,
+            value,
+            method,
+            options: column?.options ?? null,
+            endColumnId: column?.endColumnId ?? null,
+            periodStartColumnId: column?.periodStartColumnId ?? null,
+            periodEndColumnId: column?.periodEndColumnId ?? null,
+        };
+    });
+};
+/**
+ * Transform filters from HeroUI format (HeroUIFilter[]) to backend format (QueryFilter[])
+ * Used when applying filters to send to backend/URL
+ */
+export const transformFiltersFromHeroUI = (filters) => {
+    const filtersToApply = [];
+    for (const filter of filters) {
+        let value;
+        let valueTo;
+        // Handle isEmpty/isNotEmpty methods - they don't need a value
+        if (filter.method?.value === "isEmpty" || filter.method?.value === "isNotEmpty") {
+            if (filter.columnId === "")
+                continue;
+            const result = {
+                columnId: filter.columnId,
+                type: filter.type,
+                method: filter.method.value,
+                value: "",
+            };
+            filtersToApply.push(result);
+            continue;
+        }
+        // Handle Period pseudo-column: map to intersect on real columns
+        const isPeriodColumn = filter.columnId.endsWith("__period");
+        const actualColumnId = isPeriodColumn && filter.periodStartColumnId ? filter.periodStartColumnId : filter.columnId;
+        const actualEndColumnId = isPeriodColumn && filter.periodEndColumnId ? filter.periodEndColumnId : filter.endColumnId;
+        switch (filter.type) {
+            case "date":
+                if (filter.method?.value === "between" ||
+                    filter.method?.value === "intersect" ||
+                    isPeriodColumn) {
+                    const range = filter.value;
+                    if (range?.start && range?.end) {
+                        value = calendarDateToUTC(range.start);
+                        valueTo = calendarDateToUTC(range.end);
+                    }
+                }
+                else {
+                    const dateValue = filter.value;
+                    if (dateValue?.year) {
+                        value = calendarDateToUTC(dateValue);
+                    }
+                }
+                break;
+            case "enum": {
+                const selection = filter.value;
+                if (selection) {
+                    value =
+                        filter.method?.value === "oneOf"
+                            ? Array.from(selection).map(String)
+                            : String(selection.currentKey);
+                }
+                break;
+            }
+            default:
+                value = filter.value;
+        }
+        // Skip filters without valid values
+        if (!value || value === "" || filter.columnId === "")
+            continue;
+        if (filter.type === "enum" && Array.isArray(value) && value.length === 0)
+            continue;
+        // For Period columns, always use intersect method
+        const actualMethod = isPeriodColumn ? "intersect" : filter.method.value;
+        const result = {
+            columnId: actualColumnId,
+            type: filter.type,
+            method: actualMethod,
+            value: value,
+            ...(valueTo && { valueTo: valueTo }),
+            ...(actualMethod === "intersect" && actualEndColumnId
+                ? { endColumnId: actualEndColumnId }
+                : {}),
+        };
+        filtersToApply.push(result);
+    }
+    return filtersToApply;
+};

package/{src/types.ts → dist/src/types.d.ts}

@@ -1,4 +1,3 @@
-import type { BackendTRPCRouter } from "@m5kdev/backend/types";
-import type { createTRPCContext } from "@trpc/tanstack-react-query";
-
-export type UseBackendTRPC = ReturnType<typeof createTRPCContext<BackendTRPCRouter>>["useTRPC"];
+import type { BackendTRPCRouter } from "@m5kdev/backend/types";
+import type { createTRPCContext } from "@trpc/tanstack-react-query";
+export type UseBackendTRPC = ReturnType<typeof createTRPCContext<BackendTRPCRouter>>["useTRPC"];

package/dist/src/types.js

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