@m5kdev/web-ui 0.8.2 → 0.8.3

package/dist/src/modules/table/components/NuqsTable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NuqsTable.mjs","names":["Button","Table","TableHeader","TableRow","TableBody","TableCell"],"sources":["../../../../../src/modules/table/components/NuqsTable.tsx"],"sourcesContent":["import { Checkbox, Popover, PopoverContent, PopoverTrigger } from \"@heroui/react\";\r\nimport type { QueryFilters } from \"@m5kdev/commons/modules/schemas/query.schema\";\r\nimport type { FilterMethods } from \"@m5kdev/commons/modules/table/filter.types\";\r\nimport type { TableParams } from \"@m5kdev/frontend/modules/table/hooks/useNuqsTable\";\r\nimport type { ColumnDef } from \"@tanstack/react-table\";\r\nimport {\r\n  type ColumnOrderState,\r\n  type ExpandedState,\r\n  flexRender,\r\n  getCoreRowModel,\r\n  getExpandedRowModel,\r\n  getGroupedRowModel,\r\n  getPaginationRowModel,\r\n  type Table as ReactTable,\r\n  useReactTable,\r\n  type VisibilityState,\r\n} from \"@tanstack/react-table\";\r\nimport { ChevronDown, ChevronRight, ChevronUp } from \"lucide-react\";\r\nimport { useEffect, useMemo, useState } from \"react\";\r\nimport { Button } from \"../../../components/ui/button\";\r\nimport {\r\n  Table,\r\n  TableBody,\r\n  TableCell,\r\n  TableHead,\r\n  TableHeader,\r\n  TableRow,\r\n} from \"../../../components/ui/table\";\r\nimport { ColumnOrderAndVisibility } from \"./ColumnOrderAndVisibility\";\r\nimport { TableFiltering } from \"./TableFiltering\";\r\nimport { TableGroupBy } from \"./TableGroupBy\";\r\nimport { TablePagination } from \"./TablePagination\";\r\nimport type { ColumnDataType, ColumnItem } from \"./table.types\";\r\n\r\nfunction getStorageKey(columnIds: string[]): string {\r\n  const sortedIds = [...columnIds].sort().join(\",\");\r\n  return `table-column-layout-${sortedIds}`;\r\n}\r\n\r\nfunction loadLayoutFromStorage(\r\n  columnIds: string[]\r\n): { order: string[]; visibility: Record<string, boolean> } | null {\r\n  if (typeof window === \"undefined\") return null;\r\n  try {\r\n    const key = getStorageKey(columnIds);\r\n    const stored = localStorage.getItem(key);\r\n    if (!stored) return null;\r\n    const parsed = JSON.parse(stored) as { order: string[]; visibility: Record<string, boolean> };\r\n    return parsed;\r\n  } catch {\r\n    return null;\r\n  }\r\n}\r\n\r\nfunction saveLayoutToStorage(\r\n  columnIds: string[],\r\n  order: string[],\r\n  visibility: Record<string, boolean>\r\n): void {\r\n  if (typeof window === \"undefined\") return;\r\n  try {\r\n    const key = getStorageKey(columnIds);\r\n    localStorage.setItem(key, JSON.stringify({ order, visibility }));\r\n  } catch {\r\n    // Ignore storage errors\r\n  }\r\n}\r\n\r\nexport type NuqsTableColumn<T> = ColumnDef<T> & {\r\n  visible?: boolean;\r\n  type?: ColumnDataType;\r\n  options?: { label: string; value: string }[];\r\n  endColumnId?: string;\r\n  groupable?: boolean;\r\n};\r\n\r\ntype NuqsTableParams<T> = {\r\n  data: T[];\r\n  total?: number;\r\n  columns: NuqsTableColumn<T>[];\r\n  tableProps: TableParams;\r\n  singleFilter?: boolean;\r\n  filterMethods?: Partial<FilterMethods>;\r\n};\r\n\r\nfunction applyOrder(prev: ColumnItem[], nextOrder: string[]): ColumnItem[] {\r\n  const byId = new Map(prev.map((i) => [i.id, i]));\r\n  const ordered = nextOrder.map((id) => byId.get(id)).filter(Boolean) as ColumnItem[];\r\n  // append any newly added columns (if any appear later)\r\n  for (const item of prev) if (!nextOrder.includes(item.id)) ordered.push(item);\r\n  return ordered;\r\n}\r\n\r\nfunction applyVisibility(prev: ColumnItem[], visibility: VisibilityState): ColumnItem[] {\r\n  return prev.map((column) => ({\r\n    ...column,\r\n    visibility: visibility[String(column.id)] ?? column.visibility,\r\n  }));\r\n}\r\n\r\nexport const NuqsTable = <T,>({\r\n  data,\r\n  total,\r\n  columns,\r\n  tableProps,\r\n  singleFilter = false,\r\n  filterMethods,\r\n}: NuqsTableParams<T>) => {\r\n  const columnIds = useMemo(() => columns.map((col) => String(col.id)), [columns]);\r\n  console.log(\"data\", data);\r\n  // const columnsWithId = useMemo(() => {\r\n  //   const idColumn: NuqsTableColumn<T> = {\r\n  //     id: \"__row_id\",\r\n  //     accessorKey: \"id\",\r\n  //     header: \"\",\r\n  //     enableSorting: false,\r\n  //     enableHiding: false,\r\n  //     visible: false,\r\n  //   };\r\n  //   return [idColumn, ...columns];\r\n  // }, [columns]);\r\n\r\n  const initialLayout = useMemo(() => {\r\n    const defaultLayout = columns.map((column) => ({\r\n      id: String(column.id),\r\n      label: column.header as string,\r\n      visibility: column.visible !== undefined ? column.visible : true,\r\n      options: column.options ?? [],\r\n      type: column.type ?? undefined,\r\n    }));\r\n\r\n    const saved = loadLayoutFromStorage(columnIds);\r\n    if (!saved) return defaultLayout;\r\n\r\n    // Merge saved layout with default layout\r\n    const savedById = new Map<string, { order: number; visibility: boolean }>();\r\n    saved.order.forEach((id, index) => {\r\n      savedById.set(id, { order: index, visibility: saved.visibility[id] ?? true });\r\n    });\r\n\r\n    const merged: ColumnItem[] = [];\r\n    const processedIds = new Set<string>();\r\n\r\n    // Add columns in saved order\r\n    saved.order.forEach((id) => {\r\n      const defaultCol = defaultLayout.find((col) => col.id === id);\r\n      if (defaultCol) {\r\n        merged.push({\r\n          ...defaultCol,\r\n          visibility: saved.visibility[id] ?? defaultCol.visibility,\r\n        });\r\n        processedIds.add(id);\r\n      }\r\n    });\r\n\r\n    // Add any new columns that weren't in saved layout\r\n    defaultLayout.forEach((col) => {\r\n      if (!processedIds.has(col.id)) {\r\n        merged.push(col);\r\n      }\r\n    });\r\n\r\n    return merged;\r\n  }, [columns, columnIds]);\r\n\r\n  const [layout, setLayout] = useState<ColumnItem[]>(initialLayout);\r\n\r\n  // Sync layout when columns change\r\n  useEffect(() => {\r\n    setLayout(initialLayout);\r\n  }, [initialLayout]);\r\n\r\n  // Save to localStorage whenever layout changes\r\n  useEffect(() => {\r\n    const order = layout.map((col) => col.id);\r\n    const visibility = Object.fromEntries(layout.map((col) => [col.id, col.visibility]));\r\n    saveLayoutToStorage(columnIds, order, visibility);\r\n  }, [layout, columnIds]);\r\n\r\n  const columnOrder = useMemo(() => layout.map((column) => column.id), [layout]);\r\n  const columnVisibility = useMemo(\r\n    () => Object.fromEntries(layout.map((column) => [column.id, column.visibility])),\r\n    [layout]\r\n  );\r\n\r\n  const {\r\n    limit = 10,\r\n    page = 1,\r\n    sorting,\r\n    setSorting,\r\n    setPagination,\r\n    pagination,\r\n    rowSelection,\r\n    setRowSelection,\r\n    setFilters,\r\n    filters,\r\n    grouping,\r\n    setGrouping,\r\n  } = tableProps;\r\n\r\n  const isGrouped = grouping.length > 0;\r\n  const [expanded, setExpanded] = useState<ExpandedState>({});\r\n\r\n  // Redirect back if we're on an empty page (past the last page)\r\n  useEffect(() => {\r\n    if (!isGrouped && data.length === 0 && page > 1 && total !== undefined) {\r\n      setPagination?.({ pageIndex: page - 2, pageSize: limit });\r\n    }\r\n  }, [data.length, page, limit, total, setPagination, isGrouped]);\r\n\r\n  // When grouped, TanStack handles pagination client-side; otherwise use server total\r\n  const serverPageCount =\r\n    total !== undefined\r\n      ? Math.ceil(total / limit) || 1\r\n      : data.length === limit\r\n        ? page + 1\r\n        : Math.max(page, Math.ceil(data.length / limit));\r\n\r\n  const table = useReactTable({\r\n    data,\r\n    columns,\r\n    getRowId: (row) => String((row as { id: string | number }).id),\r\n    manualSorting: true,\r\n    manualPagination: !isGrouped,\r\n    state: { pagination, sorting, rowSelection, columnOrder, columnVisibility, grouping, expanded },\r\n    ...(isGrouped ? {} : { pageCount: serverPageCount }),\r\n    manualFiltering: true,\r\n    enableGrouping: true,\r\n    groupedColumnMode: false,\r\n    autoResetExpanded: false,\r\n    onSortingChange: setSorting,\r\n    onPaginationChange: setPagination,\r\n    onRowSelectionChange: setRowSelection,\r\n    onGroupingChange: setGrouping,\r\n    onExpandedChange: setExpanded,\r\n    getCoreRowModel: getCoreRowModel(),\r\n    getGroupedRowModel: getGroupedRowModel(),\r\n    getExpandedRowModel: getExpandedRowModel(),\r\n    getPaginationRowModel: getPaginationRowModel(),\r\n    onColumnOrderChange: (updater) => {\r\n      setLayout((prev) =>\r\n        applyOrder(prev, typeof updater === \"function\" ? updater(prev.map((i) => i.id)) : updater)\r\n      );\r\n    },\r\n    onColumnVisibilityChange: (updater) => {\r\n      setLayout((prev) =>\r\n        applyVisibility(\r\n          prev,\r\n          typeof updater === \"function\"\r\n            ? updater(Object.fromEntries(prev.map((i) => [i.id, i.visibility])))\r\n            : updater\r\n        )\r\n      );\r\n    },\r\n  }) as ReactTable<T>;\r\n\r\n  const onChangeOrder = (order: ColumnOrderState) => {\r\n    setLayout((prev) => applyOrder(prev, order));\r\n  };\r\n  const onChangeVisibility = (visibility: VisibilityState) => {\r\n    setLayout((prev) => applyVisibility(prev, visibility));\r\n  };\r\n\r\n  const onFiltersChange = (filters: QueryFilters) => {\r\n    setFilters?.(filters);\r\n  };\r\n\r\n  const filterableColumns = useMemo(() => {\r\n    const baseColumns = columns\r\n      .filter((column) => Boolean(column.type))\r\n      .map((column) => ({\r\n        id: String(column.id),\r\n        label: String(column.header),\r\n        type: column.type,\r\n        options: column.options ?? [],\r\n        endColumnId: column.endColumnId,\r\n        periodStartColumnId: null,\r\n        periodEndColumnId: null,\r\n      }));\r\n\r\n    // Add Period pseudo-columns for date columns with endColumnId\r\n    const periodColumns = columns\r\n      .filter((column) => column.type === \"date\" && column.endColumnId)\r\n      .map((column) => ({\r\n        id: `${String(column.id)}__period`,\r\n        label: \"Period\",\r\n        type: \"date\" as ColumnDataType,\r\n        options: [],\r\n        endColumnId: null,\r\n        periodStartColumnId: String(column.id),\r\n        periodEndColumnId: column.endColumnId,\r\n      }));\r\n\r\n    return [...baseColumns, ...periodColumns];\r\n  }, [columns]);\r\n\r\n  const groupableColumns = useMemo(\r\n    () =>\r\n      columns\r\n        .filter((col) => col.groupable)\r\n        .map((col) => ({ id: String(col.id), label: String(col.header) })),\r\n    [columns]\r\n  );\r\n\r\n  const hasGrouping = grouping.length > 0;\r\n\r\n  const [isFiltersOpen, setIsFiltersOpen] = useState(false);\r\n  const [isColumnsOpen, setIsColumnsOpen] = useState(false);\r\n  const [isGroupByOpen, setIsGroupByOpen] = useState(false);\r\n\r\n  return (\r\n    <>\r\n      <div className=\"flex w-full items-center gap-2 justify-end\">\r\n        <Popover\r\n          placement=\"bottom\"\r\n          isOpen={isFiltersOpen}\r\n          onOpenChange={setIsFiltersOpen}\r\n          portalContainer={document.body}\r\n        >\r\n          <PopoverTrigger>\r\n            <Button variant=\"outline\" size=\"sm\">\r\n              <div className=\"flex items-center gap-2\">\r\n                Filters\r\n                <ChevronDown className=\"h-4 w-4\" />\r\n              </div>\r\n            </Button>\r\n          </PopoverTrigger>\r\n          <PopoverContent>\r\n            <TableFiltering\r\n              columns={filterableColumns}\r\n              onFiltersChange={onFiltersChange}\r\n              filters={filters ?? []}\r\n              onClose={() => setIsFiltersOpen(false)}\r\n              singleFilter={singleFilter}\r\n              filterMethods={filterMethods}\r\n            />\r\n          </PopoverContent>\r\n        </Popover>\r\n        {groupableColumns.length > 0 && (\r\n          <Popover\r\n            placement=\"bottom\"\r\n            isOpen={isGroupByOpen}\r\n            onOpenChange={setIsGroupByOpen}\r\n            portalContainer={document.body}\r\n          >\r\n            <PopoverTrigger>\r\n              <Button variant={hasGrouping ? \"secondary\" : \"outline\"} size=\"sm\">\r\n                <div className=\"flex items-center gap-2\">\r\n                  {hasGrouping\r\n                    ? `Grouped by: ${grouping.map((id) => groupableColumns.find((c) => c.id === id)?.label ?? id).join(\" → \")}`\r\n                    : \"Group by\"}\r\n                  <ChevronDown className=\"h-4 w-4\" />\r\n                </div>\r\n              </Button>\r\n            </PopoverTrigger>\r\n            <PopoverContent>\r\n              <TableGroupBy\r\n                columns={groupableColumns}\r\n                activeGrouping={grouping}\r\n                onGroupingChange={(columnIds) => {\r\n                  setGrouping(columnIds);\r\n                  setExpanded({});\r\n                  setPagination?.({ pageIndex: 0, pageSize: limit });\r\n                }}\r\n                onClose={() => setIsGroupByOpen(false)}\r\n              />\r\n            </PopoverContent>\r\n          </Popover>\r\n        )}\r\n        <Popover\r\n          placement=\"bottom\"\r\n          isOpen={isColumnsOpen}\r\n          onOpenChange={setIsColumnsOpen}\r\n          portalContainer={document.body}\r\n        >\r\n          <PopoverTrigger>\r\n            <Button variant=\"outline\" size=\"sm\">\r\n              <div className=\"flex items-center gap-2\">\r\n                Columns\r\n                <ChevronDown className=\"h-4 w-4\" />\r\n              </div>\r\n            </Button>\r\n          </PopoverTrigger>\r\n          <PopoverContent>\r\n            <ColumnOrderAndVisibility\r\n              layout={layout}\r\n              onChangeOrder={onChangeOrder}\r\n              onChangeVisibility={onChangeVisibility}\r\n              onClose={() => setIsColumnsOpen(false)}\r\n            />\r\n          </PopoverContent>\r\n        </Popover>\r\n      </div>\r\n      <Table>\r\n        <TableHeader>\r\n          <TableRow>\r\n            <TableHead>\r\n              <Checkbox\r\n                isSelected={table.getIsAllRowsSelected()}\r\n                onValueChange={(checked) => {\r\n                  table.toggleAllRowsSelected(checked);\r\n                }}\r\n              />\r\n            </TableHead>\r\n            {table.getHeaderGroups()[0].headers.map((header) => (\r\n              <TableHead\r\n                onClick={\r\n                  header.column.getCanSort() ? header.column.getToggleSortingHandler() : undefined\r\n                }\r\n                key={header.id}\r\n              >\r\n                {flexRender(header.column.columnDef.header, header.getContext())}\r\n                {header.column.getCanSort() && (\r\n                  <>\r\n                    {header.column.getIsSorted() === \"asc\" && (\r\n                      <ChevronUp className=\"h-4 w-4 inline ml-1\" />\r\n                    )}\r\n                    {header.column.getIsSorted() === \"desc\" && (\r\n                      <ChevronDown className=\"h-4 w-4 inline ml-1\" />\r\n                    )}\r\n                  </>\r\n                )}\r\n              </TableHead>\r\n            ))}\r\n          </TableRow>\r\n        </TableHeader>\r\n        <TableBody>\r\n          {table.getRowModel().rows.map((row) => {\r\n            if (row.getIsGrouped()) {\r\n              return (\r\n                <TableRow\r\n                  key={row.id}\r\n                  className=\"bg-muted/40 font-medium cursor-pointer hover:bg-muted/60\"\r\n                  onClick={() => row.toggleExpanded()}\r\n                >\r\n                  <TableCell />\r\n                  {row.getVisibleCells().map((cell) => {\r\n                    if (cell.getIsGrouped()) {\r\n                      return (\r\n                        <TableCell key={cell.id}>\r\n                          <span className=\"flex items-center gap-1.5\">\r\n                            {row.getIsExpanded() ? (\r\n                              <ChevronDown className=\"h-4 w-4 shrink-0\" />\r\n                            ) : (\r\n                              <ChevronRight className=\"h-4 w-4 shrink-0\" />\r\n                            )}\r\n                            {flexRender(cell.column.columnDef.cell, cell.getContext())}\r\n                            <span className=\"text-muted-foreground font-normal ml-1\">\r\n                              ({row.subRows.length})\r\n                            </span>\r\n                          </span>\r\n                        </TableCell>\r\n                      );\r\n                    }\r\n                    if (cell.getIsAggregated()) {\r\n                      return (\r\n                        <TableCell key={cell.id}>\r\n                          {flexRender(\r\n                            cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell,\r\n                            cell.getContext()\r\n                          )}\r\n                        </TableCell>\r\n                      );\r\n                    }\r\n                    return <TableCell key={cell.id} />;\r\n                  })}\r\n                </TableRow>\r\n              );\r\n            }\r\n\r\n            return (\r\n              <TableRow key={row.id}>\r\n                <TableCell>\r\n                  <Checkbox\r\n                    isSelected={row.getIsSelected()}\r\n                    onValueChange={(checked) => {\r\n                      row.toggleSelected(checked);\r\n                    }}\r\n                  />\r\n                </TableCell>\r\n                {row.getVisibleCells().map((cell) => (\r\n                  <TableCell key={cell.id}>\r\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\r\n                  </TableCell>\r\n                ))}\r\n              </TableRow>\r\n            );\r\n          })}\r\n        </TableBody>\r\n      </Table>\r\n      <TablePagination\r\n        pageCount={\r\n          isGrouped\r\n            ? Math.ceil(table.getPrePaginationRowModel().rows.length / limit) || 1\r\n            : serverPageCount\r\n        }\r\n        page={isGrouped ? table.getState().pagination.pageIndex + 1 : page}\r\n        limit={limit}\r\n        setPagination={setPagination}\r\n      />\r\n    </>\r\n  );\r\n};\r\n"],"mappings":";;;;;;;;;;;;AAkCA,SAAS,cAAc,WAA6B;AAElD,QAAO,uBADW,CAAC,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,IAAI;;AAInD,SAAS,sBACP,WACiE;AACjE,KAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,KAAI;EACF,MAAM,MAAM,cAAc,UAAU;EACpC,MAAM,SAAS,aAAa,QAAQ,IAAI;AACxC,MAAI,CAAC,OAAQ,QAAO;AAEpB,SADe,KAAK,MAAM,OAAO;SAE3B;AACN,SAAO;;;AAIX,SAAS,oBACP,WACA,OACA,YACM;AACN,KAAI,OAAO,WAAW,YAAa;AACnC,KAAI;EACF,MAAM,MAAM,cAAc,UAAU;AACpC,eAAa,QAAQ,KAAK,KAAK,UAAU;GAAE;GAAO;GAAY,CAAC,CAAC;SAC1D;;AAsBV,SAAS,WAAW,MAAoB,WAAmC;CACzE,MAAM,OAAO,IAAI,IAAI,KAAK,KAAK,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;CAChD,MAAM,UAAU,UAAU,KAAK,OAAO,KAAK,IAAI,GAAG,CAAC,CAAC,OAAO,QAAQ;AAEnE,MAAK,MAAM,QAAQ,KAAM,KAAI,CAAC,UAAU,SAAS,KAAK,GAAG,CAAE,SAAQ,KAAK,KAAK;AAC7E,QAAO;;AAGT,SAAS,gBAAgB,MAAoB,YAA2C;AACtF,QAAO,KAAK,KAAK,YAAY;EAC3B,GAAG;EACH,YAAY,WAAW,OAAO,OAAO,GAAG,KAAK,OAAO;EACrD,EAAE;;AAGL,MAAa,aAAiB,EAC5B,MACA,OACA,SACA,YACA,eAAe,OACf,oBACwB;CACxB,MAAM,YAAY,cAAc,QAAQ,KAAK,QAAQ,OAAO,IAAI,GAAG,CAAC,EAAE,CAAC,QAAQ,CAAC;AAChF,SAAQ,IAAI,QAAQ,KAAK;CAazB,MAAM,gBAAgB,cAAc;EAClC,MAAM,gBAAgB,QAAQ,KAAK,YAAY;GAC7C,IAAI,OAAO,OAAO,GAAG;GACrB,OAAO,OAAO;GACd,YAAY,OAAO,YAAY,KAAA,IAAY,OAAO,UAAU;GAC5D,SAAS,OAAO,WAAW,EAAE;GAC7B,MAAM,OAAO,QAAQ,KAAA;GACtB,EAAE;EAEH,MAAM,QAAQ,sBAAsB,UAAU;AAC9C,MAAI,CAAC,MAAO,QAAO;EAGnB,MAAM,4BAAY,IAAI,KAAqD;AAC3E,QAAM,MAAM,SAAS,IAAI,UAAU;AACjC,aAAU,IAAI,IAAI;IAAE,OAAO;IAAO,YAAY,MAAM,WAAW,OAAO;IAAM,CAAC;IAC7E;EAEF,MAAM,SAAuB,EAAE;EAC/B,MAAM,+BAAe,IAAI,KAAa;AAGtC,QAAM,MAAM,SAAS,OAAO;GAC1B,MAAM,aAAa,cAAc,MAAM,QAAQ,IAAI,OAAO,GAAG;AAC7D,OAAI,YAAY;AACd,WAAO,KAAK;KACV,GAAG;KACH,YAAY,MAAM,WAAW,OAAO,WAAW;KAChD,CAAC;AACF,iBAAa,IAAI,GAAG;;IAEtB;AAGF,gBAAc,SAAS,QAAQ;AAC7B,OAAI,CAAC,aAAa,IAAI,IAAI,GAAG,CAC3B,QAAO,KAAK,IAAI;IAElB;AAEF,SAAO;IACN,CAAC,SAAS,UAAU,CAAC;CAExB,MAAM,CAAC,QAAQ,aAAa,SAAuB,cAAc;AAGjE,iBAAgB;AACd,YAAU,cAAc;IACvB,CAAC,cAAc,CAAC;AAGnB,iBAAgB;AAGd,sBAAoB,WAFN,OAAO,KAAK,QAAQ,IAAI,GAAG,EACtB,OAAO,YAAY,OAAO,KAAK,QAAQ,CAAC,IAAI,IAAI,IAAI,WAAW,CAAC,CAAC,CACnC;IAChD,CAAC,QAAQ,UAAU,CAAC;CAEvB,MAAM,cAAc,cAAc,OAAO,KAAK,WAAW,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC;CAC9E,MAAM,mBAAmB,cACjB,OAAO,YAAY,OAAO,KAAK,WAAW,CAAC,OAAO,IAAI,OAAO,WAAW,CAAC,CAAC,EAChF,CAAC,OAAO,CACT;CAED,MAAM,EACJ,QAAQ,IACR,OAAO,GACP,SACA,YACA,eACA,YACA,cACA,iBACA,YACA,SACA,UACA,gBACE;CAEJ,MAAM,YAAY,SAAS,SAAS;CACpC,MAAM,CAAC,UAAU,eAAe,SAAwB,EAAE,CAAC;AAG3D,iBAAgB;AACd,MAAI,CAAC,aAAa,KAAK,WAAW,KAAK,OAAO,KAAK,UAAU,KAAA,EAC3D,iBAAgB;GAAE,WAAW,OAAO;GAAG,UAAU;GAAO,CAAC;IAE1D;EAAC,KAAK;EAAQ;EAAM;EAAO;EAAO;EAAe;EAAU,CAAC;CAG/D,MAAM,kBACJ,UAAU,KAAA,IACN,KAAK,KAAK,QAAQ,MAAM,IAAI,IAC5B,KAAK,WAAW,QACd,OAAO,IACP,KAAK,IAAI,MAAM,KAAK,KAAK,KAAK,SAAS,MAAM,CAAC;CAEtD,MAAM,QAAQ,cAAc;EAC1B;EACA;EACA,WAAW,QAAQ,OAAQ,IAAgC,GAAG;EAC9D,eAAe;EACf,kBAAkB,CAAC;EACnB,OAAO;GAAE;GAAY;GAAS;GAAc;GAAa;GAAkB;GAAU;GAAU;EAC/F,GAAI,YAAY,EAAE,GAAG,EAAE,WAAW,iBAAiB;EACnD,iBAAiB;EACjB,gBAAgB;EAChB,mBAAmB;EACnB,mBAAmB;EACnB,iBAAiB;EACjB,oBAAoB;EACpB,sBAAsB;EACtB,kBAAkB;EAClB,kBAAkB;EAClB,iBAAiB,iBAAiB;EAClC,oBAAoB,oBAAoB;EACxC,qBAAqB,qBAAqB;EAC1C,uBAAuB,uBAAuB;EAC9C,sBAAsB,YAAY;AAChC,cAAW,SACT,WAAW,MAAM,OAAO,YAAY,aAAa,QAAQ,KAAK,KAAK,MAAM,EAAE,GAAG,CAAC,GAAG,QAAQ,CAC3F;;EAEH,2BAA2B,YAAY;AACrC,cAAW,SACT,gBACE,MACA,OAAO,YAAY,aACf,QAAQ,OAAO,YAAY,KAAK,KAAK,MAAM,CAAC,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,GAClE,QACL,CACF;;EAEJ,CAAC;CAEF,MAAM,iBAAiB,UAA4B;AACjD,aAAW,SAAS,WAAW,MAAM,MAAM,CAAC;;CAE9C,MAAM,sBAAsB,eAAgC;AAC1D,aAAW,SAAS,gBAAgB,MAAM,WAAW,CAAC;;CAGxD,MAAM,mBAAmB,YAA0B;AACjD,eAAa,QAAQ;;CAGvB,MAAM,oBAAoB,cAAc;EACtC,MAAM,cAAc,QACjB,QAAQ,WAAW,QAAQ,OAAO,KAAK,CAAC,CACxC,KAAK,YAAY;GAChB,IAAI,OAAO,OAAO,GAAG;GACrB,OAAO,OAAO,OAAO,OAAO;GAC5B,MAAM,OAAO;GACb,SAAS,OAAO,WAAW,EAAE;GAC7B,aAAa,OAAO;GACpB,qBAAqB;GACrB,mBAAmB;GACpB,EAAE;EAGL,MAAM,gBAAgB,QACnB,QAAQ,WAAW,OAAO,SAAS,UAAU,OAAO,YAAY,CAChE,KAAK,YAAY;GAChB,IAAI,GAAG,OAAO,OAAO,GAAG,CAAC;GACzB,OAAO;GACP,MAAM;GACN,SAAS,EAAE;GACX,aAAa;GACb,qBAAqB,OAAO,OAAO,GAAG;GACtC,mBAAmB,OAAO;GAC3B,EAAE;AAEL,SAAO,CAAC,GAAG,aAAa,GAAG,cAAc;IACxC,CAAC,QAAQ,CAAC;CAEb,MAAM,mBAAmB,cAErB,QACG,QAAQ,QAAQ,IAAI,UAAU,CAC9B,KAAK,SAAS;EAAE,IAAI,OAAO,IAAI,GAAG;EAAE,OAAO,OAAO,IAAI,OAAO;EAAE,EAAE,EACtE,CAAC,QAAQ,CACV;CAED,MAAM,cAAc,SAAS,SAAS;CAEtC,MAAM,CAAC,eAAe,oBAAoB,SAAS,MAAM;CACzD,MAAM,CAAC,eAAe,oBAAoB,SAAS,MAAM;CACzD,MAAM,CAAC,eAAe,oBAAoB,SAAS,MAAM;AAEzD,QACE,qBAAA,YAAA,EAAA,UAAA;EACE,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,qBAAC,SAAD;KACE,WAAU;KACV,QAAQ;KACR,cAAc;KACd,iBAAiB,SAAS;eAJ5B,CAME,oBAAC,gBAAD,EAAA,UACE,oBAACA,UAAD;MAAQ,SAAQ;MAAU,MAAK;gBAC7B,qBAAC,OAAD;OAAK,WAAU;iBAAf,CAAyC,WAEvC,oBAAC,aAAD,EAAa,WAAU,WAAY,CAAA,CAC/B;;MACC,CAAA,EACM,CAAA,EACjB,oBAAC,gBAAD,EAAA,UACE,oBAAC,gBAAD;MACE,SAAS;MACQ;MACjB,SAAS,WAAW,EAAE;MACtB,eAAe,iBAAiB,MAAM;MACxB;MACC;MACf,CAAA,EACa,CAAA,CACT;;IACT,iBAAiB,SAAS,KACzB,qBAAC,SAAD;KACE,WAAU;KACV,QAAQ;KACR,cAAc;KACd,iBAAiB,SAAS;eAJ5B,CAME,oBAAC,gBAAD,EAAA,UACE,oBAACA,UAAD;MAAQ,SAAS,cAAc,cAAc;MAAW,MAAK;gBAC3D,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACG,cACG,eAAe,SAAS,KAAK,OAAO,iBAAiB,MAAM,MAAM,EAAE,OAAO,GAAG,EAAE,SAAS,GAAG,CAAC,KAAK,MAAM,KACvG,YACJ,oBAAC,aAAD,EAAa,WAAU,WAAY,CAAA,CAC/B;;MACC,CAAA,EACM,CAAA,EACjB,oBAAC,gBAAD,EAAA,UACE,oBAAC,cAAD;MACE,SAAS;MACT,gBAAgB;MAChB,mBAAmB,cAAc;AAC/B,mBAAY,UAAU;AACtB,mBAAY,EAAE,CAAC;AACf,uBAAgB;QAAE,WAAW;QAAG,UAAU;QAAO,CAAC;;MAEpD,eAAe,iBAAiB,MAAM;MACtC,CAAA,EACa,CAAA,CACT;;IAEZ,qBAAC,SAAD;KACE,WAAU;KACV,QAAQ;KACR,cAAc;KACd,iBAAiB,SAAS;eAJ5B,CAME,oBAAC,gBAAD,EAAA,UACE,oBAACA,UAAD;MAAQ,SAAQ;MAAU,MAAK;gBAC7B,qBAAC,OAAD;OAAK,WAAU;iBAAf,CAAyC,WAEvC,oBAAC,aAAD,EAAa,WAAU,WAAY,CAAA,CAC/B;;MACC,CAAA,EACM,CAAA,EACjB,oBAAC,gBAAD,EAAA,UACE,oBAAC,0BAAD;MACU;MACO;MACK;MACpB,eAAe,iBAAiB,MAAM;MACtC,CAAA,EACa,CAAA,CACT;;IACN;;EACN,qBAACC,SAAD,EAAA,UAAA,CACE,oBAACC,eAAD,EAAA,UACE,qBAACC,YAAD,EAAA,UAAA,CACE,oBAAC,WAAD,EAAA,UACE,oBAAC,UAAD;GACE,YAAY,MAAM,sBAAsB;GACxC,gBAAgB,YAAY;AAC1B,UAAM,sBAAsB,QAAQ;;GAEtC,CAAA,EACQ,CAAA,EACX,MAAM,iBAAiB,CAAC,GAAG,QAAQ,KAAK,WACvC,qBAAC,WAAD;GACE,SACE,OAAO,OAAO,YAAY,GAAG,OAAO,OAAO,yBAAyB,GAAG,KAAA;aAF3E,CAMG,WAAW,OAAO,OAAO,UAAU,QAAQ,OAAO,YAAY,CAAC,EAC/D,OAAO,OAAO,YAAY,IACzB,qBAAA,YAAA,EAAA,UAAA,CACG,OAAO,OAAO,aAAa,KAAK,SAC/B,oBAAC,WAAD,EAAW,WAAU,uBAAwB,CAAA,EAE9C,OAAO,OAAO,aAAa,KAAK,UAC/B,oBAAC,aAAD,EAAa,WAAU,uBAAwB,CAAA,CAEhD,EAAA,CAAA,CAEK;KAbL,OAAO,GAaF,CACZ,CACO,EAAA,CAAA,EACC,CAAA,EACd,oBAACC,aAAD,EAAA,UACG,MAAM,aAAa,CAAC,KAAK,KAAK,QAAQ;AACrC,OAAI,IAAI,cAAc,CACpB,QACE,qBAACD,YAAD;IAEE,WAAU;IACV,eAAe,IAAI,gBAAgB;cAHrC,CAKE,oBAACE,aAAD,EAAa,CAAA,EACZ,IAAI,iBAAiB,CAAC,KAAK,SAAS;AACnC,SAAI,KAAK,cAAc,CACrB,QACE,oBAACA,aAAD,EAAA,UACE,qBAAC,QAAD;MAAM,WAAU;gBAAhB;OACG,IAAI,eAAe,GAClB,oBAAC,aAAD,EAAa,WAAU,oBAAqB,CAAA,GAE5C,oBAAC,cAAD,EAAc,WAAU,oBAAqB,CAAA;OAE9C,WAAW,KAAK,OAAO,UAAU,MAAM,KAAK,YAAY,CAAC;OAC1D,qBAAC,QAAD;QAAM,WAAU;kBAAhB;SAAyD;SACrD,IAAI,QAAQ;SAAO;SAChB;;OACF;SACG,EAZI,KAAK,GAYT;AAGhB,SAAI,KAAK,iBAAiB,CACxB,QACE,oBAACA,aAAD,EAAA,UACG,WACC,KAAK,OAAO,UAAU,kBAAkB,KAAK,OAAO,UAAU,MAC9D,KAAK,YAAY,CAClB,EACS,EALI,KAAK,GAKT;AAGhB,YAAO,oBAACA,aAAD,EAA2B,EAAX,KAAK,GAAM;MAClC,CACO;MAnCJ,IAAI,GAmCA;AAIf,UACE,qBAACF,YAAD,EAAA,UAAA,CACE,oBAACE,aAAD,EAAA,UACE,oBAAC,UAAD;IACE,YAAY,IAAI,eAAe;IAC/B,gBAAgB,YAAY;AAC1B,SAAI,eAAe,QAAQ;;IAE7B,CAAA,EACQ,CAAA,EACX,IAAI,iBAAiB,CAAC,KAAK,SAC1B,oBAACA,aAAD,EAAA,UACG,WAAW,KAAK,OAAO,UAAU,MAAM,KAAK,YAAY,CAAC,EAChD,EAFI,KAAK,GAET,CACZ,CACO,EAAA,EAdI,IAAI,GAcR;IAEb,EACQ,CAAA,CACN,EAAA,CAAA;EACR,oBAAC,iBAAD;GACE,WACE,YACI,KAAK,KAAK,MAAM,0BAA0B,CAAC,KAAK,SAAS,MAAM,IAAI,IACnE;GAEN,MAAM,YAAY,MAAM,UAAU,CAAC,WAAW,YAAY,IAAI;GACvD;GACQ;GACf,CAAA;EACD,EAAA,CAAA"}

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

@@ -0,0 +1,35 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { QueryFilters } from "@m5kdev/commons/modules/schemas/query.schema";
+import { ColumnDataType, FilterMethods } from "@m5kdev/commons/modules/table/filter.types";
+
+//#region src/modules/table/components/TableFiltering.d.ts
+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>;
+};
+declare const TableFiltering: ({
+  columns,
+  onFiltersChange,
+  filters: initialFilters,
+  onClose,
+  singleFilter,
+  filterMethods
+}: TableFilteringProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TableFiltering };
+//# sourceMappingURL=TableFiltering.d.mts.map

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

@@ -0,0 +1,418 @@
+import { Button as Button$1 } from "../../../components/ui/button.mjs";
+import { transformFiltersFromHeroUI, transformFiltersToHeroUI } from "../filterTransformers.mjs";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { DatePicker, DateRangePicker, Input, Select, SelectItem } from "@heroui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PlusIcon, XIcon } from "lucide-react";
+import { getLocalTimeZone, today } from "@internationalized/date";
+//#region src/modules/table/components/TableFiltering.tsx
+const componentForFilterMethod = {
+	text: (value, onChange) => /* @__PURE__ */ 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) => /* @__PURE__ */ 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) => /* @__PURE__ */ jsx(DatePicker, {
+		size: "sm",
+		"aria-label": "Select Value",
+		className: "flex-1 min-w-0 text-sm",
+		value: value ?? void 0,
+		onChange: (date) => date && onChange(date),
+		maxValue: today(getLocalTimeZone())
+	}),
+	range: (value, onChange) => /* @__PURE__ */ jsx(DateRangePicker, {
+		size: "sm",
+		"aria-label": "Select Value",
+		className: "flex-1 min-w-0 text-sm",
+		value: value ?? void 0,
+		onChange: (range) => range && onChange(range),
+		maxValue: today(getLocalTimeZone())
+	}),
+	radio: (value, onChange) => /* @__PURE__ */ 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: [/* @__PURE__ */ jsx(SelectItem, {
+			className: "text-sm",
+			children: "True"
+		}, "true"), /* @__PURE__ */ jsx(SelectItem, {
+			className: "text-sm",
+			children: "False"
+		}, "false")]
+	}),
+	select: (value, onChange, options = []) => /* @__PURE__ */ jsx(Select, {
+		size: "sm",
+		"aria-label": "Select Value",
+		className: "flex-1 min-w-0 text-sm",
+		selectedKeys: value ?? /* @__PURE__ */ new Set(),
+		onSelectionChange: (keys) => keys && onChange(keys),
+		children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+			className: "text-sm",
+			children: option.label
+		}, option.value))
+	}),
+	multiSelect: (value, onChange, options = []) => /* @__PURE__ */ jsx(Select, {
+		size: "sm",
+		"aria-label": "Select Value",
+		selectionMode: "multiple",
+		className: "flex-1 min-w-0 text-sm",
+		selectedKeys: value ? new Set(value) : /* @__PURE__ */ new Set(),
+		onSelectionChange: (keys) => onChange(keys),
+		children: options.map((option) => /* @__PURE__ */ 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
+});
+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()
+				};
+			}
+			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;
+			}
+			return { [SINGLE_FILTER_KEY]: createEmptyFilter() };
+		});
+	}, [createEmptyFilter, singleFilter]);
+	const columnsMap = useMemo(() => new Map(columns.map((column) => [column.id, column])), [columns]);
+	useEffect(() => {
+		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;
+			const intersectMethod = columnId.endsWith("__period") ? 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 = /* @__PURE__ */ 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(() => {
+		onFiltersChange(transformFiltersFromHeroUI(Object.values(filters)));
+		onClose?.();
+	}, [
+		filters,
+		onFiltersChange,
+		onClose
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2 p-1 min-w-[600px]",
+		children: [
+			filterEntries.map(([filterId, filter]) => {
+				return /* @__PURE__ */ jsx(TableFilteringItem, {
+					id: filterId,
+					filter,
+					columns: availableColumnsMap.get(filterId) ?? columns,
+					selectColumn,
+					selectMethod,
+					removeFilter,
+					selectValue,
+					filterMethods: effectiveFilterMethods
+				}, filterId);
+			}),
+			!singleFilter && /* @__PURE__ */ jsxs(Button$1, {
+				variant: "outline",
+				size: "sm",
+				onClick: addFilter,
+				children: [/* @__PURE__ */ jsx(PlusIcon, { className: "h-4 w-4" }), "Add Filter"]
+			}),
+			/* @__PURE__ */ jsx(Button$1, {
+				onClick: applyFilters,
+				children: singleFilter ? "Apply Filter" : "Apply Filters"
+			})
+		]
+	});
+};
+const TableFilteringItem = ({ id, filter, columns, selectColumn, selectMethod, selectValue, removeFilter, filterMethods }) => {
+	const handleColumnChange = useCallback((keys) => {
+		selectColumn(id, String(keys.currentKey));
+	}, [id, selectColumn]);
+	const methodsForType = useMemo(() => {
+		if (!filter.type) return [];
+		if (filter.columnId.endsWith("__period")) {
+			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;
+		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 /* @__PURE__ */ 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) => /* @__PURE__ */ 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 /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0" });
+		const ComponentFn = componentForFilterMethod[filter.method.component];
+		if (!ComponentFn) return /* @__PURE__ */ 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) => /* @__PURE__ */ jsx(SelectItem, {
+		className: "text-sm",
+		children: String(column.label)
+	}, column.id)), [columns]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2 w-full",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-1 items-center gap-2 min-w-0",
+			children: [
+				/* @__PURE__ */ 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
+			]
+		}), /* @__PURE__ */ jsx(Button$1, {
+			variant: "outline",
+			size: "sm",
+			onClick: () => removeFilter(id),
+			children: /* @__PURE__ */ jsx(XIcon, { className: "h-4 w-4" })
+		})]
+	});
+};
+//#endregion
+export { TableFiltering };
+
+//# sourceMappingURL=TableFiltering.mjs.map

package/dist/src/modules/table/components/TableFiltering.mjs.map

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

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

@@ -0,0 +1,22 @@
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/modules/table/components/TableGroupBy.d.ts
+interface TableGroupByColumn {
+  id: string;
+  label: string;
+}
+interface TableGroupByProps {
+  columns: TableGroupByColumn[];
+  activeGrouping: string[];
+  onGroupingChange: (columnIds: string[]) => void;
+  onClose: () => void;
+}
+declare const TableGroupBy: ({
+  columns,
+  activeGrouping,
+  onGroupingChange,
+  onClose
+}: TableGroupByProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TableGroupBy };
+//# sourceMappingURL=TableGroupBy.d.mts.map

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

@@ -0,0 +1,58 @@
+import { cn } from "../../../lib/utils.mjs";
+import { Button } from "../../../components/ui/button.mjs";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/modules/table/components/TableGroupBy.tsx
+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 /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2 p-1 min-w-[180px]",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-0.5",
+			children: columns.map((col) => /* @__PURE__ */ 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: [
+					/* @__PURE__ */ 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 && /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground text-xs ml-auto",
+						children: selected.indexOf(col.id) + 1
+					})
+				]
+			}, col.id))
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-1.5",
+			children: [/* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				variant: "outline",
+				onClick: onClear,
+				className: "flex-1",
+				children: "Clear"
+			}), /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				onClick: onApply,
+				className: "flex-1",
+				children: "Apply"
+			})]
+		})]
+	});
+};
+//#endregion
+export { TableGroupBy };
+
+//# sourceMappingURL=TableGroupBy.mjs.map

package/dist/src/modules/table/components/TableGroupBy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableGroupBy.mjs","names":[],"sources":["../../../../../src/modules/table/components/TableGroupBy.tsx"],"sourcesContent":["import { useState } from \"react\";\r\nimport { Button } from \"../../../components/ui/button\";\r\nimport { cn } from \"../../../lib/utils\";\r\n\r\ninterface TableGroupByColumn {\r\n  id: string;\r\n  label: string;\r\n}\r\n\r\ninterface TableGroupByProps {\r\n  columns: TableGroupByColumn[];\r\n  activeGrouping: string[];\r\n  onGroupingChange: (columnIds: string[]) => void;\r\n  onClose: () => void;\r\n}\r\n\r\nexport const TableGroupBy = ({\r\n  columns,\r\n  activeGrouping,\r\n  onGroupingChange,\r\n  onClose,\r\n}: TableGroupByProps) => {\r\n  const [selected, setSelected] = useState<string[]>(activeGrouping);\r\n\r\n  const toggle = (id: string) => {\r\n    setSelected((prev) => (prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id]));\r\n  };\r\n\r\n  const onApply = () => {\r\n    onGroupingChange(selected);\r\n    onClose();\r\n  };\r\n\r\n  const onClear = () => {\r\n    setSelected([]);\r\n  };\r\n\r\n  return (\r\n    <div className=\"flex flex-col gap-2 p-1 min-w-[180px]\">\r\n      <div className=\"flex flex-col gap-0.5\">\r\n        {columns.map((col) => (\r\n          <button\r\n            key={col.id}\r\n            type=\"button\"\r\n            className={cn(\r\n              \"text-left px-2 py-1.5 rounded text-sm hover:bg-muted transition-colors flex items-center gap-2\",\r\n              selected.includes(col.id) && \"bg-muted font-medium\"\r\n            )}\r\n            onClick={() => toggle(col.id)}\r\n          >\r\n            <span\r\n              className={cn(\r\n                \"h-4 w-4 rounded border border-muted-foreground/40 flex items-center justify-center shrink-0 text-xs\",\r\n                selected.includes(col.id) && \"bg-primary border-primary text-primary-foreground\"\r\n              )}\r\n            >\r\n              {selected.includes(col.id) ? \"✓\" : \"\"}\r\n            </span>\r\n            {col.label}\r\n            {selected.includes(col.id) && selected.length > 1 && (\r\n              <span className=\"text-muted-foreground text-xs ml-auto\">\r\n                {selected.indexOf(col.id) + 1}\r\n              </span>\r\n            )}\r\n          </button>\r\n        ))}\r\n      </div>\r\n      <div className=\"flex gap-1.5\">\r\n        <Button size=\"sm\" variant=\"outline\" onClick={onClear} className=\"flex-1\">\r\n          Clear\r\n        </Button>\r\n        <Button size=\"sm\" onClick={onApply} className=\"flex-1\">\r\n          Apply\r\n        </Button>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n"],"mappings":";;;;;AAgBA,MAAa,gBAAgB,EAC3B,SACA,gBACA,kBACA,cACuB;CACvB,MAAM,CAAC,UAAU,eAAe,SAAmB,eAAe;CAElE,MAAM,UAAU,OAAe;AAC7B,eAAa,SAAU,KAAK,SAAS,GAAG,GAAG,KAAK,QAAQ,MAAM,MAAM,GAAG,GAAG,CAAC,GAAG,MAAM,GAAG,CAAE;;CAG3F,MAAM,gBAAgB;AACpB,mBAAiB,SAAS;AAC1B,WAAS;;CAGX,MAAM,gBAAgB;AACpB,cAAY,EAAE,CAAC;;AAGjB,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GAAK,WAAU;aACZ,QAAQ,KAAK,QACZ,qBAAC,UAAD;IAEE,MAAK;IACL,WAAW,GACT,kGACA,SAAS,SAAS,IAAI,GAAG,IAAI,uBAC9B;IACD,eAAe,OAAO,IAAI,GAAG;cAP/B;KASE,oBAAC,QAAD;MACE,WAAW,GACT,uGACA,SAAS,SAAS,IAAI,GAAG,IAAI,oDAC9B;gBAEA,SAAS,SAAS,IAAI,GAAG,GAAG,MAAM;MAC9B,CAAA;KACN,IAAI;KACJ,SAAS,SAAS,IAAI,GAAG,IAAI,SAAS,SAAS,KAC9C,oBAAC,QAAD;MAAM,WAAU;gBACb,SAAS,QAAQ,IAAI,GAAG,GAAG;MACvB,CAAA;KAEF;MAtBF,IAAI,GAsBF,CACT;GACE,CAAA,EACN,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IAAQ,MAAK;IAAK,SAAQ;IAAU,SAAS;IAAS,WAAU;cAAS;IAEhE,CAAA,EACT,oBAAC,QAAD;IAAQ,MAAK;IAAK,SAAS;IAAS,WAAU;cAAS;IAE9C,CAAA,CACL;KACF"}