ikoncomponents 1.7.7 → 1.8.0

package/dist/ikoncomponents/page-wrapper/index.d.ts

@@ -1,9 +1,9 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 interface Props {
     title?: string | ReactNode;
     subtitle?: string | ReactNode;
     tools?: ReactNode;
     children: ReactNode;
 }
-export declare function PageWrapper({ title, subtitle, tools, children }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function PageWrapper({ title, subtitle, tools, children }: Props): React.JSX.Element;
 export {};

package/dist/ikoncomponents/password-strength-meter/index.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 export declare const PasswordStrengthMeter: ({ value }: {
     value: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;

package/dist/ikoncomponents/phone-input/index.d.ts

@@ -1 +1,2 @@
-export declare function PhoneInput({ className, ...props }: any): import("react/jsx-runtime").JSX.Element;
+import * as React from "react";
+export declare function PhoneInput({ className, ...props }: any): React.JSX.Element;

package/dist/ikoncomponents/provider-wrapper/index.d.ts

@@ -3,4 +3,4 @@ export declare function ProviderWrapper({ children, baseUrl, platformUrl }: {
     children: React.ReactNode;
     baseUrl: string;
     platformUrl: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/ikoncomponents/reload-component/index.d.ts

@@ -3,4 +3,4 @@ export interface ReloadProps {
     onReload?: () => void;
     errorMessage?: string;
 }
-export declare function Reload({ isLoading, onReload, errorMessage, }: ReloadProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Reload({ isLoading, onReload, errorMessage, }: ReloadProps): import("react").JSX.Element | null;

package/dist/ikoncomponents/search-input/index.d.ts

@@ -1 +1,2 @@
-export declare function SearchInput({ className, ...props }: any): import("react/jsx-runtime").JSX.Element;
+import * as React from "react";
+export declare function SearchInput({ className, ...props }: any): React.JSX.Element;

package/dist/ikoncomponents/sheet/index.d.ts

@@ -7,4 +7,4 @@ export declare function SheetComponent({ buttonText, buttonIcon, buttonStyle, sh
     sheetDescription?: React.ReactNode;
     sheetContent?: React.ReactNode;
     closeButton?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/ikoncomponents/simple-widget/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 interface Props {
     title: string;
     iconName?: string;
@@ -10,5 +10,5 @@ interface Props {
     loading?: boolean;
     loadingMessage?: string;
 }
-export declare function SimpleWidget({ title, iconName, iconSize, iconClass, primaryText, secondaryText, mainClassName, loading, loadingMessage }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function SimpleWidget({ title, iconName, iconSize, iconClass, primaryText, secondaryText, mainClassName, loading, loadingMessage }: Props): React.JSX.Element;
 export {};

package/dist/ikoncomponents/skeleton-loader/skeleton-table.d.ts

@@ -2,4 +2,4 @@ export interface GradeTableLoaderProps {
     rowCount?: number;
     showToolbar?: boolean;
 }
-export declare function GradeTableLoader({ rowCount, showToolbar, }: GradeTableLoaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function GradeTableLoader({ rowCount, showToolbar, }: GradeTableLoaderProps): import("react").JSX.Element;

package/dist/ikoncomponents/skeleton-loader/skeleton-widget.d.ts

@@ -1,3 +1,3 @@
 export declare function SkeletonWidget({ count }: {
     count: number;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/ikoncomponents/table/DataTable/index.d.ts

@@ -1,2 +1,3 @@
-import { DataTableProps } from "../type";
-export declare function DataTable<T>({ data, columns, keyExtractor, onRowClick, groupedColumns, onToggleGroup }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+import React from "react";
+import type { DataTableLayoutProps } from "../type";
+export declare function DataTable<T>({ data, columns, extraTools }: DataTableLayoutProps<T>): React.JSX.Element;

package/dist/ikoncomponents/table/DataTable/index.js

@@ -1,68 +1,304 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "../../../shadcn/table";
-import React, { useState } from "react";
-import { ChevronRight, ChevronDown, GripVertical } from "lucide-react";
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect } from "react";
+import { useReactTable, getCoreRowModel, getPaginationRowModel, getFilteredRowModel, getSortedRowModel, getGroupedRowModel, getExpandedRowModel, flexRender, } from "@tanstack/react-table";
+import * as XLSX from "xlsx";
+import { useSearchParams, useRouter, usePathname } from "next/navigation";
+import { ChevronDown, ChevronRight, ChevronUp, Download, GripVertical, LayoutGrid, List, X } from "lucide-react";
+import { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, } from "../../../shadcn/table";
 import { Badge } from "../../../shadcn/badge";
-export function DataTable({ data, columns, keyExtractor, onRowClick, groupedColumns = [], onToggleGroup }) {
-    const [expandedGroups, setExpandedGroups] = useState(new Set());
-    const toggleGroup = (groupId) => {
-        const next = new Set(expandedGroups);
-        if (next.has(groupId)) {
-            next.delete(groupId);
+import { Reload } from "../../reload-component";
+import { DataTableSearch } from "../DataTableSearch";
+import { DataTablePageSize } from "../DataTablePageSize";
+import { DataTablePagination } from "../DataTablePagination";
+import { DataTableFilter, FilterTagSpacer } from "../DataTableFilter";
+import { DataTableColumns } from "../DataTableColumn";
+import { Button } from "../../../shadcn/button";
+import { ActionMenu } from "../../../ikoncomponents/action-menu";
+// Assuming your converted components are in the same dire
+/** Aggregate a single column's numeric values across the given rows. */
+function aggregateRows(rows, key, type) {
+    if (type === "count")
+        return rows.length;
+    const values = rows.map((r) => { var _a; return Number((_a = r.original) === null || _a === void 0 ? void 0 : _a[key]) || 0; });
+    if (!values.length)
+        return 0;
+    switch (type) {
+        case "sum":
+            return values.reduce((a, b) => a + b, 0);
+        case "avg":
+            return values.reduce((a, b) => a + b, 0) / values.length;
+        case "min":
+            return Math.min(...values);
+        case "max":
+            return Math.max(...values);
+        default:
+            return 0;
+    }
+}
+/** Combine the sums of several columns left-to-right with an arithmetic operation. */
+function combineColumns(rows, keys, op) {
+    const sums = keys.map((k) => aggregateRows(rows, k, "sum"));
+    return sums.reduce((acc, val, i) => {
+        if (i === 0)
+            return val;
+        switch (op) {
+            case "add":
+                return acc + val;
+            case "subtract":
+                return acc - val;
+            case "multiply":
+                return acc * val;
+            case "divide":
+                return val !== 0 ? acc / val : 0;
+            default:
+                return acc;
+        }
+    }, 0);
+}
+/** Resolve a footer cell definition to renderable content for the given column. */
+function renderFooterCell(cell, rows, columnId) {
+    var _a, _b, _c, _d;
+    if (cell == null)
+        return null;
+    if (typeof cell === "string")
+        return cell;
+    if (cell.render)
+        return cell.render(rows.map((r) => r.original));
+    let value = null;
+    if (cell.operation && ((_a = cell.columns) === null || _a === void 0 ? void 0 : _a.length)) {
+        value = combineColumns(rows, cell.columns, cell.operation);
+    }
+    else if (cell.aggregate) {
+        value = aggregateRows(rows, (_b = cell.column) !== null && _b !== void 0 ? _b : columnId, cell.aggregate);
+    }
+    if (value == null)
+        return null;
+    const formatted = cell.decimals != null ? value.toFixed(cell.decimals) : value.toLocaleString();
+    return `${(_c = cell.prefix) !== null && _c !== void 0 ? _c : ""}${formatted}${(_d = cell.suffix) !== null && _d !== void 0 ? _d : ""}`;
+}
+export function DataTable({ data, columns, extraTools }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const [viewMode, setViewMode] = useState("list");
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    // 1. Sync State from URL
+    const pageIndex = Number(searchParams.get("page") || "1") - 1;
+    const [pagination, setPagination] = React.useState({
+        pageIndex: (_a = extraTools === null || extraTools === void 0 ? void 0 : extraTools.pageIndex) !== null && _a !== void 0 ? _a : 0,
+        pageSize: (_b = extraTools === null || extraTools === void 0 ? void 0 : extraTools.pageSize) !== null && _b !== void 0 ? _b : 10,
+    });
+    const [globalFilter, setGlobalFilter] = React.useState("");
+    // 2. Internal UI States (Sorting, Grouping, Expanded)
+    const [sorting, setSorting] = useState([]);
+    const [grouping, setGrouping] = useState((extraTools === null || extraTools === void 0 ? void 0 : extraTools.grouping) ? (_c = extraTools === null || extraTools === void 0 ? void 0 : extraTools.groupedValue) !== null && _c !== void 0 ? _c : [] : []);
+    const [expanded, setExpanded] = useState({});
+    const [rowSelection, setRowSelection] = useState({});
+    const [columnVisibility, setColumnVisibility] = useState({});
+    const [columnFilters, setColumnFilters] = useState([]);
+    const hiddenColumns = (extraTools === null || extraTools === void 0 ? void 0 : extraTools.hiddenColumns) || [];
+    for (const col of columns) {
+        if (col.filterFn === undefined) {
+            col.filterFn = "multiSelect"; // Set default filter function to "multiSelect" if not provided
+            // Make columns draggable by default
         }
-        else {
-            next.add(groupId);
+        if (col.draggable === undefined) {
+            col["draggable"] = true;
         }
-        setExpandedGroups(next);
-    };
-    // Helper to get accessor key from column header string
-    const getAccessor = (headerStr) => {
-        const col = columns.find(c => (typeof c.header === 'string' ? c.header : '') === headerStr);
-        return col === null || col === void 0 ? void 0 : col.accessorKey;
-    };
-    // Group data recursively
-    const getGroupedData = (items, groupIndices) => {
-        if (groupIndices.length === 0)
-            return items;
-        const [currentGroupHeader, ...remainingGroups] = groupIndices;
-        const accessor = getAccessor(currentGroupHeader);
-        if (!accessor)
-            return items;
-        const groups = new Map();
-        items.forEach(item => {
-            var _a;
-            const val = (_a = item[accessor]) !== null && _a !== void 0 ? _a : "None";
-            if (!groups.has(val))
-                groups.set(val, []);
-            groups.get(val).push(item);
+    }
+    if ((extraTools === null || extraTools === void 0 ? void 0 : extraTools.actionMenu) || (extraTools === null || extraTools === void 0 ? void 0 : extraTools.groupActionMenu)) {
+        columns.push({
+            id: "DTActions",
+            accessorKey: "Actions",
+            header: () => _jsx("div", { className: "text-center", children: "Action" }),
+            size: 20,
+            headerClassName: "text-center",
+            cell: ({ row }) => {
+                if (row.getIsGrouped()) {
+                    return (extraTools === null || extraTools === void 0 ? void 0 : extraTools.groupActionMenu) ? (_jsx("div", { className: "text-end", children: _jsx(ActionMenu, { actionMenus: extraTools.groupActionMenu.items, extraActionParams: {
+                                arguments: [
+                                    row.original,
+                                    ...(extraTools.groupActionMenu.extraArguments || []),
+                                ],
+                            } }) })) : null;
+                }
+                else if (extraTools === null || extraTools === void 0 ? void 0 : extraTools.actionMenu) {
+                    return (_jsx("div", { className: "text-center", children: _jsx(ActionMenu, { actionMenus: extraTools.actionMenu.items, extraActionParams: {
+                                arguments: [
+                                    row.original,
+                                    ...(extraTools.actionMenu.extraArguments || []),
+                                ],
+                            } }) }));
+                }
+                else {
+                    return null;
+                }
+            },
+            enableSorting: false,
+            enableHiding: false,
         });
-        return Array.from(groups.entries()).map(([value, groupItems]) => ({
-            isGroup: true,
-            header: currentGroupHeader,
-            value,
-            id: `${currentGroupHeader}:${value}`,
-            children: getGroupedData(groupItems, remainingGroups),
-            count: groupItems.length
-        }));
-    };
-    const groupedData = getGroupedData(data, groupedColumns);
-    const renderRows = (items, level = 0) => {
-        return items.map((item, index) => {
-            if (item.isGroup) {
-                const isExpanded = expandedGroups.has(item.id);
-                return (_jsxs(React.Fragment, { children: [_jsx(TableRow, { className: "bg-muted/40 hover:bg-muted/60 cursor-pointer border-l-4 border-l-primary/50", onClick: () => toggleGroup(item.id), children: _jsx(TableCell, { colSpan: columns.length, className: "py-2", style: { paddingLeft: `${level * 24 + 12}px` }, children: _jsxs("div", { className: "flex items-center gap-2", children: [isExpanded ? _jsx(ChevronDown, { className: "w-4 h-4" }) : _jsx(ChevronRight, { className: "w-4 h-4" }), _jsxs("span", { className: "text-xs font-bold uppercase tracking-wider text-muted-foreground", children: [item.header, ":"] }), _jsx("span", { className: "font-semibold", children: String(item.value) }), _jsxs(Badge, { variant: "outline", className: "ml-2 text-[10px] py-0 h-4", children: [item.count, " items"] })] }) }) }), isExpanded && renderRows(item.children, level + 1)] }, item.id));
+    }
+    // 3. Configure Table
+    const table = useReactTable({
+        data,
+        columns,
+        pageCount: extraTools === null || extraTools === void 0 ? void 0 : extraTools.totalPages,
+        meta: {
+            footerLabel: extraTools === null || extraTools === void 0 ? void 0 : extraTools.footerLabel,
+        },
+        state: {
+            pagination: pagination,
+            globalFilter,
+            sorting,
+            grouping,
+            expanded,
+            rowSelection,
+            columnVisibility,
+            columnFilters
+        },
+        onSortingChange: setSorting,
+        onGroupingChange: setGrouping,
+        onExpandedChange: setExpanded,
+        onRowSelectionChange: setRowSelection,
+        onGlobalFilterChange: setGlobalFilter,
+        onPaginationChange: setPagination,
+        onColumnVisibilityChange: setColumnVisibility,
+        onColumnFiltersChange: setColumnFilters,
+        // Manual Mode for Server-Side Logic (URL-Driven)
+        // When true, the parent supplies already-paged `data` + `totalPages` and the
+        // table won't slice; when false/undefined it paginates the full data client-side.
+        manualPagination: (_d = extraTools === null || extraTools === void 0 ? void 0 : extraTools.manualPagination) !== null && _d !== void 0 ? _d : false,
+        manualFiltering: false,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getGroupedRowModel: getGroupedRowModel(),
+        getExpandedRowModel: getExpandedRowModel(),
+        filterFns: {
+            // Custom filter to check if row value exists in selected array
+            multiSelect: (row, columnId, filterValue) => {
+                if (!filterValue.length)
+                    return true;
+                return filterValue.includes(String(row.getValue(columnId)));
+            },
+        },
+    });
+    useEffect(() => {
+        table.getAllLeafColumns().map((column) => {
+            if (hiddenColumns === null || hiddenColumns === void 0 ? void 0 : hiddenColumns.includes(column.id)) {
+                column.toggleVisibility(false);
             }
-            return (_jsx(TableRow, { onClick: () => onRowClick && onRowClick(item), className: `hover:bg-muted/50 transition-colors border-b border-border ${onRowClick ? "cursor-pointer" : ""}`, children: columns.map((col, colIndex) => (_jsx(TableCell, { className: colIndex === 0 ? "font-medium" : "", style: { paddingLeft: colIndex === 0 ? `${level * 24 + 16}px` : undefined }, children: col.cell
-                        ? col.cell(item)
-                        : col.accessorKey
-                            ? String(item[col.accessorKey] || "N/A")
-                            : null }, colIndex))) }, keyExtractor(item)));
         });
+    }, [hiddenColumns, table]);
+    // 4. Drag & Drop Logic for Grouping (from your code)
+    const handleDragStart = (e, headerId) => {
+        e.dataTransfer.setData("headerId", headerId);
+    };
+    const handleDrop = (e) => {
+        var _a, _b;
+        e.preventDefault();
+        const headerId = e.dataTransfer.getData("headerId");
+        if (headerId && !grouping.includes(headerId) && ((_a = table.getColumn(headerId)) === null || _a === void 0 ? void 0 : _a.getCanGroup())) {
+            (_b = table.getColumn(headerId)) === null || _b === void 0 ? void 0 : _b.toggleGrouping();
+        }
+    };
+    useEffect(() => {
+        // Sync globalFilter to URL when it changes
+        table.setGlobalFilter(searchParams.get("search") || "");
+    }, [searchParams, router, pathname]);
+    useEffect(() => {
+        var _a;
+        table.setPageSize(Number(searchParams.get("size") || (extraTools === null || extraTools === void 0 ? void 0 : extraTools.pageSize) || 10));
+        table.setPageIndex(Number(searchParams.get("page") || ((_a = extraTools === null || extraTools === void 0 ? void 0 : extraTools.pageIndex) !== null && _a !== void 0 ? _a : 0) + 1) - 1);
+    }, [searchParams, router, pathname]);
+    // Notify the parent on page / page-size change so it can fetch from its API
+    // (server-side / pageable mode). Harmless in client-side "all data" mode.
+    useEffect(() => {
+        var _a;
+        (_a = extraTools === null || extraTools === void 0 ? void 0 : extraTools.onPaginationChange) === null || _a === void 0 ? void 0 : _a.call(extraTools, pagination);
+    }, [pagination.pageIndex, pagination.pageSize]);
+    const handleExport = () => {
+        // 1. Get only the columns that are currently visible in the UI
+        const visibleColumns = table.getVisibleLeafColumns()
+            .filter(col => col.id !== "select" && col.id !== "actions");
+        // --- RECURSIVE FUNCTION ---
+        const processRows = (rows, level = 0) => {
+            return rows.flatMap((row) => {
+                if (row.getIsGrouped()) {
+                    // 1. This is a Group Header Row
+                    const groupValue = String(row.id.replaceAll(`${visibleColumns[0].id}:`, "")).trim() === "" || row.id.replaceAll(`${row.parentId ? `${row.parentId}>` : ``}`, "").replaceAll(`${row.groupingColumnId}>`, "").replaceAll(`${visibleColumns[0].id}:`, "").trim() === undefined ? "N/A" : row.id.replaceAll(`${row.parentId ? `${row.parentId}>` : ``}`, "").replaceAll(`${visibleColumns[0].id}:`, "").trim();
+                    // Create the header row. We indent the text based on level for visual clarity in Excel.
+                    const headerRow = {
+                        [visibleColumns[0].id]: `${"  ".repeat(level)} ${groupValue} (${row.subRows.length})`
+                    };
+                    // 2. Recursively process the subRows (could be more groups or final data)
+                    return [headerRow, ...processRows(row.subRows, level + 1)];
+                }
+                else {
+                    // 3. This is an actual Data Row (Leaf)
+                    const rowData = {};
+                    visibleColumns.forEach((col) => {
+                        // Add indentation to the first column to show it belongs to the group above
+                        const value = row.getValue(col.id);
+                        rowData[col.id] = (col.id === visibleColumns[0].id) || (value === "Actions" || value === "actions")
+                            ? "    " // + (value ?? "")
+                            : value === undefined ? "N/A" : value; // Handle empty/undefined values
+                    });
+                    return [rowData];
+                }
+            });
+        };
+        // Decide which model to use based on your checkGrouping state
+        const finalData = table.getState().grouping.length > 0
+            ? processRows(table.getGroupedRowModel().rows)
+            : table.getFilteredRowModel().rows.map(row => {
+                const rowData = {};
+                visibleColumns.forEach(col => rowData[col.id] = row.getValue(col.id));
+                return rowData;
+            });
+        // 3. Create and download
+        const worksheet = XLSX.utils.json_to_sheet(finalData);
+        // 4. --- AUTO-SIZE COLUMN WIDTH LOGIC ---
+        const colWidths = visibleColumns.map((col) => {
+            const header = typeof col.columnDef.header === "string" ? col.columnDef.header : col.id;
+            // Find the longest string in this column (header vs all row values)
+            const maxCharLength = Math.max(header.length, ...finalData.map((row) => String(row[header]).length));
+            // Set width (adding 2 or 3 for extra padding/breathing room)
+            return { wch: maxCharLength + 3 };
+        });
+        worksheet["!cols"] = colWidths;
+        const workbook = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(workbook, worksheet, "Data");
+        XLSX.writeFile(workbook, `${extraTools === null || extraTools === void 0 ? void 0 : extraTools.fileName}.xlsx`);
     };
-    return (_jsx("div", { className: "rounded-md border bg-background shadow-sm overflow-hidden", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsx(TableRow, { className: "bg-muted border-b border-border", children: columns.map((col, index) => {
-                            const headerText = typeof col.header === "string" ? col.header : "";
-                            return (_jsx(TableHead, { className: "font-semibold text-muted-foreground group relative", children: _jsxs("div", { className: "flex items-center gap-2", children: [headerText && (_jsx("div", { className: "cursor-grab active:cursor-grabbing p-1 hover:bg-background/50 rounded transition-colors", draggable: true, onDragStart: (e) => {
-                                                e.dataTransfer.setData("columnHeader", headerText);
-                                            }, children: _jsx(GripVertical, { className: "w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" }) })), typeof col.header === "function" ? col.header() : col.header] }) }, index));
-                        }) }) }), _jsx(TableBody, { children: data && data.length > 0 ? (renderRows(groupedData)) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center text-muted-foreground", children: "No records found." }) })) })] }) }));
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4 w-full", children: [_jsx("div", { className: "flex items-center gap-2 w-full sm:w-auto sm:max-w-[200px] shrink-0", children: _jsx(DataTableSearch, {}) }), _jsxs("div", { className: "flex items-center gap-3 flex-wrap shrink-0", children: [(extraTools === null || extraTools === void 0 ? void 0 : extraTools.actionNode) && (extraTools === null || extraTools === void 0 ? void 0 : extraTools.actionNode), (viewMode === "list") &&
+                                (_jsxs(_Fragment, { children: [_jsx(DataTableFilter, { table: table }), _jsx(DataTableColumns, { table: table }), _jsx(Button, { variant: "outline", size: "sm", className: "h-9 gap-2 border-border bg-background", onClick: () => handleExport(), children: _jsx(Download, { className: "w-4 h-4" }) })] })), (extraTools === null || extraTools === void 0 ? void 0 : extraTools.toggleViewMode) && (_jsxs("div", { className: "flex items-center border border-border rounded-md bg-background overflow-hidden h-9", children: [_jsx("button", { onClick: () => setViewMode("list"), className: `px-2.5 h-full flex items-center justify-center transition-colors ${viewMode === "list" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`, title: "List View", children: _jsx(List, { className: "w-4 h-4" }) }), _jsx("button", { onClick: () => setViewMode("grid"), className: `px-2.5 h-full flex items-center justify-center transition-colors ${viewMode === "grid" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`, title: "Grid View", children: _jsx(LayoutGrid, { className: "w-4 h-4" }) })] }))] })] }), _jsx(FilterTagSpacer, { activeFilters: table.getState().columnFilters, table: table }), (viewMode === "list" && ((extraTools === null || extraTools === void 0 ? void 0 : extraTools.grouping) || (extraTools === null || extraTools === void 0 ? void 0 : extraTools.grouping) === undefined)) &&
+                (_jsx(_Fragment, { children: _jsxs("div", { className: "w-full flex items-center gap-2 p-2 border border-dashed border-border rounded-lg bg-muted/20 min-h-[48px] transition-all hover:bg-muted/40 group shadow-sm", onDragOver: (e) => e.preventDefault(), onDrop: handleDrop, children: [_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground text-xs px-2 select-none border-r pr-4 mr-2 border-border/50", children: [_jsx(GripVertical, { className: "w-4 h-4 opacity-40" }), _jsx("span", { className: "font-semibold uppercase tracking-wider opacity-70", children: "Grouping" })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: grouping.length === 0 ? (_jsx("div", { className: "flex items-center gap-2 text-muted-foreground/60 text-sm italic py-1", children: _jsx("span", { children: "Drag column headers here to group your data..." }) })) : (grouping.map((gid) => {
+                                    var _a;
+                                    const headerDef = (_a = table.getColumn(gid)) === null || _a === void 0 ? void 0 : _a.columnDef.header;
+                                    const label = typeof headerDef === "string" ? headerDef : gid;
+                                    return (_jsxs(Badge, { variant: "secondary", className: "gap-2 pl-3 pr-1.5 h-8 text-xs font-semibold bg-background border shadow-sm animate-in fade-in zoom-in duration-200", children: [label, _jsx("button", { onClick: () => { var _a; return (_a = table.getColumn(gid)) === null || _a === void 0 ? void 0 : _a.toggleGrouping(); }, className: "hover:bg-muted rounded-full p-0.5 transition-colors", children: _jsx(X, { className: "w-3.5 h-3.5" }) })] }, gid));
+                                })) })] }) })), _jsxs("div", { className: "relative min-h-[300px] mt-2", children: [_jsx(Reload, { isLoading: (_e = extraTools === null || extraTools === void 0 ? void 0 : extraTools.isLoading) !== null && _e !== void 0 ? _e : false, onReload: (extraTools === null || extraTools === void 0 ? void 0 : extraTools.onReload) || (() => window.location.reload()) }), _jsx("div", { className: `transition-all duration-300 ${(extraTools === null || extraTools === void 0 ? void 0 : extraTools.isLoading) ? "opacity-50 pointer-events-none" : ""}`, children: viewMode === "list" ? (_jsx("div", { className: "rounded-md border bg-background shadow-sm overflow-hidden", children: _jsx("div", { className: "overflow-auto", style: { maxHeight: (_f = extraTools === null || extraTools === void 0 ? void 0 : extraTools.tableHeight) !== null && _f !== void 0 ? _f : "500px" }, children: _jsxs(Table, { children: [_jsx(TableHeader, { className: "sticky top-0 z-10", children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { className: "bg-muted border-b border-border", children: headerGroup.headers.map((header) => {
+                                                    var _a, _b;
+                                                    return (_jsx(TableHead, { className: `font-semibold text-muted-foreground group relative ${(_a = header.column.columnDef.headerClassName) !== null && _a !== void 0 ? _a : ""}`, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "cursor-grab active:cursor-grabbing p-1 hover:bg-background/50 rounded transition-colors", draggable: true, onDragStart: (e) => handleDragStart(e, header.id), children: _jsx(GripVertical, { className: "w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" }) }), _jsxs("div", { className: "flex items-center gap-2 cursor-pointer select-none", onClick: header.column.getToggleSortingHandler(), children: [flexRender(header.column.columnDef.header, header.getContext()), (_b = {
+                                                                            asc: _jsx(ChevronUp, { size: 14 }),
+                                                                            desc: _jsx(ChevronDown, { size: 14 }),
+                                                                        }[header.column.getIsSorted()]) !== null && _b !== void 0 ? _b : null] })] }) }, header.id));
+                                                }) }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.length > 0 ? (table.getRowModel().rows.map((row) => (_jsx(TableRow, { className: `hover:bg-muted/50 transition-colors border-b border-border ${row.getIsGrouped() ? "bg-muted/40 hover:bg-muted/60 cursor-pointer border-l-4 border-l-primary/50" : ""} ${row.getIsSelected() ? "bg-accent/20" : ""}`, children: row.getVisibleCells().map((cell) => {
+                                                    var _a;
+                                                    return (_jsx(TableCell, { children: cell.getIsGrouped() ? (_jsxs("button", { onClick: row.getToggleExpandedHandler(), className: "flex items-center gap-2 font-semibold", children: [row.getIsExpanded() ? _jsx(ChevronDown, { size: 16 }) : _jsx(ChevronRight, { size: 16 }), flexRender(cell.column.columnDef.cell, cell.getContext()), _jsxs(Badge, { variant: "outline", className: "ml-2 text-[10px] py-0 h-4", children: [row.subRows.length, " items"] })] })) : cell.getIsAggregated() ? (flexRender((_a = cell.column.columnDef.aggregatedCell) !== null && _a !== void 0 ? _a : cell.column.columnDef.cell, cell.getContext())) : cell.getIsPlaceholder() ? null : (flexRender(cell.column.columnDef.cell, cell.getContext())) }, cell.id));
+                                                }) }, row.id)))) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: table.getVisibleLeafColumns().length, className: "h-24 text-center text-muted-foreground", children: "No records found." }) })) }), (extraTools === null || extraTools === void 0 ? void 0 : extraTools.footerRows) && extraTools.footerRows.length > 0 ? (
+                                        // Dynamic footer: one row per config entry, cells keyed by column id.
+                                        _jsx(TableFooter, { className: "sticky bottom-0 z-10 bg-muted/30 border-t-2 border-border font-bold", children: extraTools.footerRows.map((footerRow, rowIndex) => (_jsx(TableRow, { className: footerRow.className, children: table.getVisibleLeafColumns().map((column) => {
+                                                    var _a;
+                                                    const cellConfig = (_a = footerRow.cells) === null || _a === void 0 ? void 0 : _a[column.id];
+                                                    const cellClassName = cellConfig && typeof cellConfig === "object"
+                                                        ? cellConfig.className
+                                                        : undefined;
+                                                    return (_jsx(TableCell, { className: `text-left ${cellClassName !== null && cellClassName !== void 0 ? cellClassName : ""}`, children: renderFooterCell(cellConfig, table.getFilteredRowModel().rows, column.id) }, column.id));
+                                                }) }, rowIndex))) })) : ((extraTools === null || extraTools === void 0 ? void 0 : extraTools.showFooter) && (_jsx(TableFooter, { className: "bg-muted/30 border-t-2 border-border font-bold", children: table.getFooterGroups().map((footerGroup) => (_jsx(TableRow, { children: footerGroup.headers.map((header) => (_jsx(TableCell, { className: "text-left", children: header.isPlaceholder
+                                                        ? null
+                                                        : flexRender(header.column.columnDef.footer, header.getContext()) }, header.id))) }, footerGroup.id))) })))] }) }) })) : (extraTools === null || extraTools === void 0 ? void 0 : extraTools.gridComponent) ? (_jsx("div", { className: "overflow-auto", style: { maxHeight: (_g = extraTools === null || extraTools === void 0 ? void 0 : extraTools.tableHeight) !== null && _g !== void 0 ? _g : "500px" }, children: extraTools.gridComponent(table.getFilteredRowModel().rows.map((row) => row.original)) })) : (_jsx("div", { className: "p-12 text-center text-muted-foreground border border-border border-dashed rounded-md bg-muted/20", children: "Grid view not implemented for this component yet." })) })] }), viewMode === "list" && (_jsxs("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4 pt-4 border-t border-border mt-4", children: [_jsx(DataTablePageSize, {}), _jsx(DataTablePagination, { totalPages: (_h = extraTools === null || extraTools === void 0 ? void 0 : extraTools.totalPages) !== null && _h !== void 0 ? _h : Math.ceil(data.length / (pagination.pageSize || 10)), currentPage: pageIndex + 1 })] }))] }));
 }

package/dist/ikoncomponents/table/DataTableColumn/index.d.ts

@@ -0,0 +1,3 @@
+export declare function DataTableColumns({ table }: {
+    table: any;
+}): import("react").JSX.Element;

package/dist/ikoncomponents/table/DataTableColumn/index.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Settings2, Check } from "lucide-react";
+import { Button } from "../../../shadcn/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "../../../shadcn/dropdown-menu";
+export function DataTableColumns({ table }) {
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "h-9 gap-2 border-border bg-background", children: [_jsx(Settings2, { className: "w-4 h-4" }), "Columns"] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-48 p-2", children: [_jsx("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Toggle Columns" }), table.getAllLeafColumns().map((column) => {
+                        // Skip columns that don't have an ID or are special (like selection)
+                        if (!column.getCanHide())
+                            return null;
+                        const headerText = typeof column.columnDef.header === "string"
+                            ? column.columnDef.header
+                            : column.id;
+                        const isVisible = column.getIsVisible();
+                        return (_jsxs("button", { onClick: () => column.toggleVisibility(!isVisible), className: "flex w-full items-center gap-2 px-2 py-1.5 text-sm rounded-sm hover:bg-muted transition-colors capitalize", children: [_jsx("div", { className: `flex h-4 w-4 items-center justify-center rounded-sm border border-primary ${isVisible ? "bg-primary text-primary-foreground" : "bg-transparent"}`, children: isVisible && _jsx(Check, { className: "h-3 w-3" }) }), _jsx("span", { className: "truncate", children: headerText })] }, column.id));
+                    })] })] }));
+}

package/dist/ikoncomponents/table/DataTableFilter/index.d.ts

@@ -0,0 +1,7 @@
+export declare function DataTableFilter({ table }: {
+    table: any;
+}): import("react").JSX.Element;
+export declare function FilterTagSpacer({ activeFilters, table }: {
+    activeFilters: any;
+    table: any;
+}): import("react").JSX.Element | null;

package/dist/ikoncomponents/table/DataTableFilter/index.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { X, ChevronDown, Check, RotateCcw, Search, ListFilter } from "lucide-react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from "../../../shadcn/dropdown-menu";
+import { Button } from "../../../shadcn/button";
+export function DataTableFilter({ table }) {
+    const [open, setOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [pendingColumns, setPendingColumns] = useState([]);
+    // Syncing with Table State: Which columns currently have a filter active?
+    const activeFilters = table.getState().columnFilters;
+    const activeIds = activeFilters.map((f) => f.id);
+    const columns = table.getAllLeafColumns().filter((col) => col.getCanFilter());
+    const filteredColumns = columns.filter((col) => {
+        if (col.id === "DTActions")
+            return false; // Exclude action column from filter list
+        const label = (typeof col.columnDef.header === "string") ? col.columnDef.header : col.id;
+        return label.toLowerCase().includes(searchQuery.toLowerCase());
+    });
+    const togglePendingColumn = (id) => {
+        setPendingColumns((prev) => prev.includes(id) ? prev.filter((c) => c !== id) : [...prev, id]);
+    };
+    return (_jsxs(DropdownMenu, { open: open, onOpenChange: (o) => {
+            setOpen(o);
+            if (o)
+                setPendingColumns(activeIds);
+        }, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "h-9 gap-2 border-border bg-background relative", children: [_jsx(ListFilter, { className: "w-4 h-4" }), "Filter", activeIds.length > 0 && (_jsx("span", { className: "absolute -top-1 -right-1 w-4 h-4 bg-foreground text-background text-[10px] rounded-full flex items-center justify-center font-bold", children: activeIds.length }))] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56 p-2 space-y-2", children: [_jsx("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Filter" }), _jsxs("div", { className: "px-2 relative", children: [_jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" }), _jsx("input", { type: "text", placeholder: "Search columns...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "w-full h-8 pl-8 pr-2 text-xs rounded-md border border-border bg-muted/20 focus:outline-none focus:ring-1 focus:ring-foreground/30" })] }), _jsx("div", { className: "space-y-1 max-h-[300px] overflow-y-auto pr-1", children: filteredColumns.map((col) => {
+                            const label = typeof col.columnDef.header === "string"
+                                ? col.columnDef.header
+                                : col.id;
+                            const isSelected = pendingColumns.includes(col.id);
+                            return (_jsxs("button", { onClick: () => togglePendingColumn(col.id), className: "flex w-full items-center gap-2 px-2 py-1.5 text-sm rounded-sm hover:bg-muted transition-colors", children: [_jsx("div", { className: "flex h-4 w-4 items-center justify-center rounded-sm border", style: isSelected
+                                            ? { backgroundColor: "hsl(var(--foreground))", borderColor: "hsl(var(--foreground))", color: "hsl(var(--background))" }
+                                            : { borderColor: "hsl(var(--border))" }, children: isSelected && _jsx(Check, { className: "h-3 w-3" }) }), _jsx("span", { className: "truncate", children: label })] }, col.id));
+                        }) }), _jsxs("div", { className: "px-2 pt-2 mt-1 flex gap-2", children: [_jsx(Button, { variant: "default", size: "sm", className: "flex-1 text-xs font-medium bg-foreground text-background hover:bg-foreground/90", onClick: () => {
+                                    columns.forEach((col) => {
+                                        const wasActive = activeIds.includes(col.id);
+                                        const willActive = pendingColumns.includes(col.id);
+                                        if (willActive && !wasActive)
+                                            col.setFilterValue([]);
+                                        if (!willActive && wasActive)
+                                            col.setFilterValue(undefined);
+                                    });
+                                    setOpen(false);
+                                }, children: "Apply" }), _jsxs(Button, { variant: "secondary", size: "sm", className: "flex-1 text-xs font-medium bg-secondary hover:bg-secondary/80 text-secondary-foreground", onClick: () => {
+                                    setPendingColumns([]);
+                                    table.resetColumnFilters();
+                                    setOpen(false);
+                                }, children: [_jsx(RotateCcw, { className: "w-3.5 h-3.5 mr-2 inline" }), " Reset"] })] })] })] }));
+}
+export function FilterTagSpacer({ activeFilters, table }) {
+    if (!activeFilters || activeFilters.length === 0)
+        return null;
+    return (
+    // {/* --- ACTIVE FILTER TAGS --- */}
+    _jsx("div", { className: "flex items-center gap-2 flex-1 min-w-0 overflow-x-auto", style: { scrollbarWidth: "none", msOverflowStyle: "none" }, children: activeFilters.map((filter) => (_jsx(FilterTag, { filter: filter, table: table }, filter.id))) }));
+}
+// --- INDIVIDUAL TAG COMPONENT WITH VALUE DROPDOWN ---
+function FilterTag({ filter, table }) {
+    const [searchQuery, setSearchQuery] = useState("");
+    const column = table.getColumn(filter.id);
+    const colHeader = typeof (column === null || column === void 0 ? void 0 : column.columnDef.header) === "string" ? column.columnDef.header : filter.id;
+    const selectedValues = filter.value || [];
+    // Extract unique values from data
+    const uniqueValues = useMemo(() => {
+        const set = new Set();
+        table.getPreFilteredRowModel().flatRows.forEach((row) => {
+            const val = row.getValue(filter.id);
+            if (val !== null && val !== undefined)
+                set.add(val);
+        });
+        return Array.from(set).sort();
+    }, [table.getPreFilteredRowModel().flatRows, filter.id]);
+    const filteredValues = uniqueValues.filter((v) => String(v).toLowerCase().includes(searchQuery.toLowerCase()));
+    const toggleValue = (val) => {
+        const next = selectedValues.includes(val)
+            ? selectedValues.filter((v) => v !== val)
+            : [...selectedValues, val];
+        column.setFilterValue(next);
+    };
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("div", { className: "flex items-center gap-1.5 px-3 py-1.5 h-9 bg-muted/50 border border-border rounded-full text-xs font-medium cursor-pointer hover:bg-muted/80 transition-colors flex-1 shrink min-w-[140px] max-w-fit", title: `${colHeader}: ${selectedValues.length} Selected`, children: [_jsxs("span", { className: "uppercase truncate shrink font-semibold", children: [colHeader, ":"] }), _jsxs("span", { className: "text-muted-foreground whitespace-nowrap shrink-0", children: [selectedValues.length, " Selected"] }), _jsx(ChevronDown, { className: "w-3.5 h-3.5 ml-1 opacity-50 shrink-0" }), _jsx("div", { className: "p-0.5 ml-1 rounded-full hover:bg-background/80 shrink-0", onClick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                column.setFilterValue(undefined);
+                            }, onPointerDown: (e) => {
+                                e.stopPropagation();
+                            }, children: _jsx(X, { className: "w-3.5 h-3.5" }) })] }) }), _jsxs(DropdownMenuContent, { align: "start", className: "w-56 p-2 space-y-2", children: [_jsxs("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: ["Filter ", colHeader] }), _jsxs("div", { className: "px-2 relative", children: [_jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" }), _jsx("input", { type: "text", placeholder: "Search items...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "w-full h-8 pl-8 pr-2 text-xs rounded-md border border-border bg-muted/20 focus:outline-none focus:ring-1 focus:ring-foreground/30" })] }), _jsxs("div", { className: "space-y-1 max-h-[200px] overflow-y-auto pr-1", children: [filteredValues.map((val) => {
+                                const isSelected = selectedValues.includes(val);
+                                const label = String(val).trim() === "" ? "N/A" : String(val);
+                                return (_jsxs("button", { onClick: () => toggleValue(val), className: "flex w-full items-center gap-2 px-2 py-1.5 text-sm rounded-sm hover:bg-muted transition-colors", children: [_jsx("div", { className: "flex h-4 w-4 items-center justify-center rounded-sm border", style: isSelected
+                                                ? { backgroundColor: "hsl(var(--foreground))", borderColor: "hsl(var(--foreground))", color: "hsl(var(--background))" }
+                                                : { borderColor: "hsl(var(--border))" }, children: isSelected && _jsx(Check, { className: "h-3 w-3" }) }), _jsx("span", { className: "truncate text-left", children: label })] }, String(val)));
+                            }), filteredValues.length === 0 && (_jsx("div", { className: "px-2 py-2 text-xs text-muted-foreground text-center", children: "No items found." }))] }), selectedValues.length > 0 && (_jsx("div", { className: "px-2 pt-1 border-t", children: _jsx(Button, { variant: "ghost", size: "sm", className: "w-full text-xs", onClick: () => column.setFilterValue([]), children: "Clear Selections" }) }))] })] }));
+}

package/dist/ikoncomponents/table/DataTablePageSize/index.d.ts

@@ -1 +1 @@
-export declare function DataTablePageSize(): import("react/jsx-runtime").JSX.Element;
+export declare function DataTablePageSize(): import("react").JSX.Element;