@ramesesinc/platform-core 0.1.9 → 0.1.10

package/dist/components/input/Text.js

@@ -2,20 +2,38 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import UIComponent from "../common/UIComponent";
 import useUIInput from "../common/UIInput";
+class TextCaseFormatter {
+    apply(value, mode) {
+        switch (mode) {
+            case "upper":
+                return value.toUpperCase();
+            case "lower":
+                return value.toLowerCase();
+            case "capitalize":
+                return value.replace(/\b\w/g, (char) => char.toUpperCase());
+            case "none":
+            default:
+                return value;
+        }
+    }
+}
+export const applyTextCase = (value, mode) => {
+    return new TextCaseFormatter().apply(value, mode);
+};
 const TextField = (props) => {
-    const { name, immediate = true } = props !== null && props !== void 0 ? props : {};
-    const [focused, setFocused] = useState(false);
+    var _a, _b;
+    const { immediate = true, align = "left", noSpace = false, required = false, placeholder } = props !== null && props !== void 0 ? props : {};
+    // const [focused, setFocused] = useState(false);
     const inputRef = useRef(null);
     const valueRef = useRef("");
-    const className = "border rounded px-2 py-1 w-full";
     const handleFocus = () => {
-        setFocused(true);
+        // setFocused(true);
     };
     const handleBlur = () => {
         if (!immediate) {
             setValue(inputValue);
         }
-        setFocused(false);
+        // setFocused(false);
     };
     const onRefresh = () => {
         setInputValue(getValue());
@@ -25,7 +43,10 @@ const TextField = (props) => {
     const [inputValue, setInputValue] = useState(valueRef.current);
     const onChange = (e) => {
         var _a;
-        const text = (_a = e.target.value) !== null && _a !== void 0 ? _a : "";
+        let text = (_a = e.target.value) !== null && _a !== void 0 ? _a : "";
+        if (noSpace) {
+            text = text.replace(/\s+/g, "");
+        }
         if (text !== inputValue) {
             valueRef.current = text;
             setInputValue(valueRef.current);
@@ -34,6 +55,20 @@ const TextField = (props) => {
             setValue(text);
         }
     };
-    return (_jsx(UIComponent, Object.assign({}, (props !== null && props !== void 0 ? props : {}), { children: _jsx("input", { type: "text", ref: inputRef, onChange: onChange, value: inputValue, onFocus: handleFocus, onBlur: handleBlur, className: className }) })));
+    const handleKeyDown = (e) => {
+        if (noSpace && e.key === " ") {
+            e.preventDefault();
+        }
+    };
+    const alignClass = {
+        left: "text-left",
+        center: "text-center",
+        right: "text-right",
+    }[align];
+    const inReadMode = (_b = (_a = binding === null || binding === void 0 ? void 0 : binding.isReadMode) === null || _a === void 0 ? void 0 : _a.call(binding)) !== null && _b !== void 0 ? _b : false;
+    const defaultStyleClass = "text-sm px-2 py-2 border rounded-md shadow-sm transition-colors duration-150 ease-in-out w-full";
+    const focusStyleClass = `focus:outline-none ${inReadMode ? "bg-gray-50" : "focus:bg-yellow-50"} focus:ring-1 focus:ring-blue-400`;
+    const borderClass = "border-gray-300";
+    return (_jsx(UIComponent, Object.assign({}, (props !== null && props !== void 0 ? props : {}), { children: _jsx("input", { type: "text", ref: inputRef, onChange: onChange, onKeyDown: handleKeyDown, value: inputValue, onFocus: handleFocus, onBlur: handleBlur, required: required, disabled: inReadMode, placeholder: inReadMode ? "" : placeholder, className: `${defaultStyleClass} ${focusStyleClass} ${alignClass} ${borderClass}` }) })));
 };
 export default TextField;

package/dist/components/list/EditableMenu.d.ts

@@ -0,0 +1,2 @@
+declare const EditableMenu: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default EditableMenu;

package/dist/components/list/EditableMenu.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DataBindingProvider } from "@/core/DataContext";
+import DynamicIcon from "@/core/DynamicIcon";
+import { usePageContext } from "@/core/PageContext";
+import { usePageViewContext } from "@/core/PageViewContext";
+import useDependHandler from "@/core/UIDependHandler";
+import { replaceValues } from "@/lib/utils/BeanUtils";
+import { Eye } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import ViewPage from "../action/ViewPage";
+import useUIMenu from "../common/UIMenu";
+const EditableMenu = (props) => {
+    const { name, depends, title, menugroup, items: itemsProp, data, addPage, viewPage } = props !== null && props !== void 0 ? props : {};
+    const [activeItem, setActiveItem] = useState(null);
+    const [resolvedData, setResolvedData] = useState(data);
+    const [sortedItems, setSortedItems] = useState([]);
+    const pageContext = usePageContext();
+    const pageView = usePageViewContext();
+    const uuid = Math.random().toString(36).slice(2);
+    const dragHandler = useDragHandler({
+        items: sortedItems,
+        onSort: setSortedItems,
+        onDrop: async (draggedItem, updatedItems) => {
+            const reordered = updatedItems.map((item, idx) => ({
+                id: item.id,
+                sortorder: idx + 1, // ← 1-based sortorder
+            }));
+            console.log("resolvedData", JSON.stringify(resolvedData, null, 2));
+            console.log("reordered", JSON.stringify(reordered, null, 2));
+            // const status = await pageContext?.postMgmt("menus", "reorder", {
+            //   type: resolvedData?.params?.type,
+            //   groupid: resolvedData?.params?.groupid,
+            //   items: reordered,
+            // });
+            // console.log("status", status);
+        },
+    });
+    const { items } = useUIMenu({ menugroup, items: itemsProp, data: resolvedData });
+    const handleItemClick = (item) => {
+        // console.log("Item clicked:", item);
+        pageContext === null || pageContext === void 0 ? void 0 : pageContext.set(name, item);
+        setActiveItem(item);
+    };
+    const handleAdd = () => {
+        console.log("Add clicked", addPage);
+        const { url, mode } = addPage !== null && addPage !== void 0 ? addPage : {};
+        const idx = ["window", "popup"].indexOf(String(mode).toLowerCase());
+        console.log(idx);
+        if (idx >= 0) {
+            // pageView.setPage(url, { mode });
+        }
+        else {
+            // pageView.setSelectedPage(url);
+            pageContext.set(name, url);
+        }
+    };
+    const handleView = (item) => {
+        const { url, mode } = viewPage !== null && viewPage !== void 0 ? viewPage : {};
+        console.log("View clicked", url, mode, item);
+    };
+    const handleDelete = (item) => console.log("Delete clicked", item);
+    useEffect(() => {
+        if (items.length === 0)
+            return;
+        const firstItem = items[0];
+        setActiveItem(firstItem);
+        setSortedItems(items);
+        pageContext === null || pageContext === void 0 ? void 0 : pageContext.set(name, items[0]);
+    }, [items]);
+    const resolveData = () => {
+        var _a;
+        if (!(data === null || data === void 0 ? void 0 : data.params))
+            return data;
+        const dependsValue = (_a = pageContext === null || pageContext === void 0 ? void 0 : pageContext.get(depends)) !== null && _a !== void 0 ? _a : {};
+        const resolvedParams = replaceValues(data.params, dependsValue);
+        return Object.assign(Object.assign({}, data), { params: resolvedParams });
+    };
+    const onRefresh = () => {
+        // when depends changes → re-resolve params
+        setResolvedData(resolveData());
+        // setActiveItem(null); // reset active item
+    };
+    useDependHandler({ name: depends, onRefresh });
+    return (_jsxs("div", { className: "p-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-lg font-semibold", children: title }), _jsx(ViewPage, { url: addPage === null || addPage === void 0 ? void 0 : addPage.url, mode: addPage === null || addPage === void 0 ? void 0 : addPage.mode, iconOnly: true, icon: _jsx(DynamicIcon, { icon: "Plus", size: 18 }), title: title })] }), _jsx("div", { className: "border-b border-gray-200 my-2" }), _jsx("div", { className: "flex flex-col gap-2", children: sortedItems.map((item, index) => {
+                    var _a;
+                    const isActive = (activeItem === null || activeItem === void 0 ? void 0 : activeItem.id) === item.id; // ← use activeItem
+                    return (_jsx(DataBindingProvider, { data: { data: item }, children: _jsxs("div", { draggable: true, onDragStart: () => dragHandler.handleDragStart(index), onDragOver: (e) => dragHandler.handleDragOver(e, index), onDrop: dragHandler.handleDrop, onDragEnd: dragHandler.handleDragEnd, className: `flex items-center justify-between border-b p-2 cursor-pointer transition-colors
+                ${isActive ? "bg-gray-200" : "bg-gray-50 border-gray-200 hover:bg-gray-200"}`, onClick: () => handleItemClick(item), children: [_jsx("span", { className: "text-gray-400 cursor-grab mr-2", children: _jsx(DynamicIcon, { icon: "GripVertical", size: 16 }) }), _jsx("span", { className: `text-base flex-1 ${isActive ? "font-medium" : ""}`, children: item.title }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ViewPage, { url: viewPage === null || viewPage === void 0 ? void 0 : viewPage.url, mode: viewPage === null || viewPage === void 0 ? void 0 : viewPage.mode, popupClassName: viewPage === null || viewPage === void 0 ? void 0 : viewPage.popupClassName, iconOnly: true, icon: _jsx(Eye, { size: 16, color: "blue" }) }), renderButton((_a = item.deleteIcon) !== null && _a !== void 0 ? _a : "Trash", () => handleDelete(item), "text-red-500")] })] }) }, `${uuid}-${index}`));
+                }) })] }));
+};
+export default EditableMenu;
+/* ------------------------------------------------------------------ */
+/* Render Button */
+/* ------------------------------------------------------------------ */
+const renderButton = (icon, onClick, color = "text-gray-500") => (_jsx("span", { className: `${color} cursor-pointer hover:opacity-70 transition-opacity`, onClick: (e) => {
+        e.stopPropagation();
+        onClick();
+    }, children: _jsx(DynamicIcon, { icon: icon, size: 18 }) }));
+const useDragHandler = ({ items, onSort, onDrop }) => {
+    const dragIndexRef = useRef(null);
+    const dragOverIndexRef = useRef(null);
+    const handleDragStart = (index) => {
+        dragIndexRef.current = index;
+    };
+    const handleDragOver = (e, index) => {
+        e.preventDefault();
+        dragOverIndexRef.current = index;
+    };
+    const handleDrop = () => {
+        const from = dragIndexRef.current;
+        const to = dragOverIndexRef.current;
+        if (from == null || to == null || from === to)
+            return;
+        const draggedItem = items[from];
+        const updated = [...items];
+        const [moved] = updated.splice(from, 1);
+        updated.splice(to, 0, moved);
+        onSort(updated);
+        onDrop === null || onDrop === void 0 ? void 0 : onDrop(draggedItem, updated);
+        dragIndexRef.current = null;
+        dragOverIndexRef.current = null;
+    };
+    const handleDragEnd = () => {
+        dragIndexRef.current = null;
+        dragOverIndexRef.current = null;
+    };
+    return { handleDragStart, handleDragOver, handleDrop, handleDragEnd };
+};

package/dist/components/list/TabMenu.js

@@ -4,8 +4,8 @@ import { useEffect, useState } from "react";
 import { usePageContext } from "../../core/PageContext";
 import { usePageViewContext } from "../../core/PageViewContext";
 import useDependHandler from "../../core/UIDependHandler";
-import HPanel from "../../layouts/HPanel";
-import VPanel from "../../layouts/VPanel";
+import { HPanel } from "../../layouts/HPanel";
+import { VPanel } from "../../layouts/VPanel";
 const TabMenu = (props) => {
     var _a;
     const { name, depends, items = [], data, menugroup, orientation = "horizontal" } = props !== null && props !== void 0 ? props : {};

package/dist/components/list/TreeMenu.js

@@ -84,6 +84,7 @@ const TreeMenu = (props) => {
     const [openGroups, setOpenGroups] = useState([]);
     const [activeItem, setActiveItem] = useState({});
     const [items, setItems] = useState([]);
+    const [hashPage, setHashPage] = useState(null);
     const initializedRef = useRef(false);
     const { items: rawItems } = useUIMenu({
         items: itemsProp,
@@ -95,7 +96,9 @@ const TreeMenu = (props) => {
         const { path = "" } = (_a = pageView.getOriginalLocationInfo()) !== null && _a !== void 0 ? _a : {};
         const [, ...anchors] = path.split("#");
         const [selectedPath] = anchors;
-        pageContext.set(contextKey, selectedPath);
+        if (selectedPath) {
+            pageContext.set(contextKey, selectedPath);
+        }
     }, []);
     /* ---------------------- Sync active item from page view ---------------------- */
     useLayoutEffect(() => {
@@ -115,23 +118,27 @@ const TreeMenu = (props) => {
     }, [rawItems]);
     /* ---------------------- Auto-select first item on init ---------------------- */
     useEffect(() => {
+        var _a;
         if (initializedRef.current || items.length === 0)
             return;
         const firstItem = findFirstItem(items);
         if (!(firstItem === null || firstItem === void 0 ? void 0 : firstItem.page))
             return;
         let selectedPage = pageContext.get(contextKey);
-        // console.log("treemenu selected page from context", contextKey, selectedPage);
-        if (selectedPage == null && contextKey === "selectedPage") {
-            selectedPage = pageView.getSelectedPage();
-            // console.log("treemenu selected page fallback from context", contextKey, selectedPage);
+        if (selectedPage == null) {
+            // fallback to window.location.hash
+            const hash = (_a = window.location.hash) !== null && _a !== void 0 ? _a : "";
+            const [, firstAnchor] = hash.split("#");
+            if (firstAnchor) {
+                selectedPage = firstAnchor; // strip query params
+                setHashPage(selectedPage);
+            }
         }
-        // console.log("treemenu selected page final", contextKey, selectedPage);
         if (selectedPage != null) {
             const selectedItem = findItemByPage(items, selectedPage);
-            // console.log("treemenu findItemByPage", selectedPage, selectedItem);
             if (selectedItem) {
-                setOpenGroups(findGroupPath(items, selectedPage));
+                const groupPath = findGroupPath(items, selectedPage);
+                setOpenGroups(groupPath);
                 setActiveItem(selectedItem);
             }
             else {
@@ -144,7 +151,7 @@ const TreeMenu = (props) => {
             setActiveItem(firstItem);
         }
         initializedRef.current = true;
-    }, [items, contextKey]);
+    }, [items, contextKey, hashPage]);
     /* ---------------------- Sync page context on active item change ---------------------- */
     useEffect(() => {
         const { mode, page } = (activeItem !== null && activeItem !== void 0 ? activeItem : {});
@@ -155,7 +162,6 @@ const TreeMenu = (props) => {
             pageView.setPage(page, { mode });
         }
         else {
-            pageView.setSelectedPage(page);
             pageContext.set(contextKey, page);
         }
     }, [activeItem]);
@@ -182,8 +188,7 @@ const TreeMenu = (props) => {
     };
     /* ---------------------- Events ---------------------- */
     const handleSubItemClick = (item) => {
-        if (!item.page || item.page === activeItem.page)
-            return;
+        // if (!item.page || item.page === activeItem.page) return;
         setActiveItem(item);
     };
     /* ---------------------- Recursive render ---------------------- */

package/dist/components/table/DataList.d.ts

@@ -50,7 +50,7 @@ export interface DataListAttr {
     searchDebounce?: number;
     onSearchChange?: (text: string) => void;
     filters?: FilterDefinition[] | FilterDefinition[][];
-    showFilterPanel?: boolean;
+    filterPage?: Record<string, any>;
     onFilterChange?: (filters: Record<string, any>) => void;
     sortable?: boolean;
     defaultSort?: {

package/dist/components/table/DataList.js

@@ -10,8 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Columns, Eye, RefreshCcw, Search, Trash } from "lucide-react";
-import { useCallback, useRef, useState } from "react";
+import { Tooltip } from "@ramesesinc/client";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Columns, Eye, Funnel, RefreshCcw, Search, Trash } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useApp } from "../../core/AppContext";
 import { useDataContext } from "../../core/DataContext";
 import { DynamicComponent } from "../../core/DynamicComponent";
@@ -20,10 +21,12 @@ import Panel from "../../core/Panel";
 import useDependHandler from "../../core/UIDependHandler";
 import { replaceValues } from "../../lib/utils/BeanUtils";
 import { getUrlPageParams } from "../../lib/utils/PageUtils";
+import LookupPage from "../action/LookupPage";
 import { DataTable } from "./DataTable";
 import ListHandler from "./ListHandler";
 import { TableProvider, useTableContext } from "./TableContext";
-const InnerDataList = ({ cols, emptyMessage = "No data available", errorMessage, striped = false, bordered = false, hover = true, dense = false, showPagination = true, paginationPosition = "bottom", showPageInfo = true, showTotalCount = true, showRowsPerPage = true, rowsPerPageOptions = [5, 10, 20, 50, 100], searchable = false, searchPlaceholder = "Search...", searchDebounce = 300, onSearchChange, filters = [], showFilterPanel = false, onFilterChange, sortable = true, showSortIndicator = true, selectable = false, selectionMode = "multiple", onSelectionChange, selectOnRowClick = false, onRowClick, rowActions = [], bulkActions = [], showBulkActions = true, toolbarActions = [], showToolbar = true, toolbarTitle, showRefreshButton = true, showExportButton = false, onLoad, onError, onRefresh, onExport, className = "", rowClassName, depends, handle, }) => {
+const InnerDataList = ({ cols, emptyMessage = "No data available", errorMessage, striped = false, bordered = false, hover = true, dense = false, showPagination = true, paginationPosition = "bottom", showPageInfo = true, showTotalCount = true, showRowsPerPage = true, rowsPerPageOptions = [5, 10, 20, 50, 100], searchable = false, searchPlaceholder = "Search...", searchDebounce = 300, onSearchChange, filters = [], filterPage, onFilterChange, sortable = true, showSortIndicator = true, selectable = false, selectionMode = "multiple", onSelectionChange, selectOnRowClick = false, onRowClick, rowActions = [], bulkActions = [], showBulkActions = true, toolbarActions = [], showToolbar = true, toolbarTitle, showRefreshButton = true, showExportButton = false, onLoad, onError, onRefresh, onExport, className = "", rowClassName, depends, handle, }) => {
+    var _a;
     const { listHandler, columns, rows, setRows, loading: ctxLoading, setLoading } = useTableContext();
     // ============================================================================
     // STATE
@@ -215,15 +218,15 @@ const InnerDataList = ({ cols, emptyMessage = "No data available", errorMessage,
     // ============================================================================
     // DISPLAY COLUMNS — actions + sort indicators
     // ============================================================================
+    const actionUuid = useRef(Math.random().toString(36).slice(2));
     const renderActionCell = (row, rowIndex) => {
         const visible = rowActions.filter((a) => !a.show || a.show(row));
         if (visible.length === 0)
             return null;
-        const uuid = Math.random().toString(36).slice(2);
         return (_jsx("div", { className: "dl-actions flex justify-center items-center", children: visible.map((action, i) => (_jsx("div", { children: _jsx(DynamicComponent, { config: {
                         component: action.component,
                         attr: Object.assign(Object.assign({}, action.attr), { opt: { data: row } }),
-                    } }) }, `${uuid}-${i}`))) }));
+                    } }) }, `${actionUuid.current}-${i}`))) }));
     };
     const displayColumns = rowActions.length > 0 && visibleUserColumns.length > 0
         ? [
@@ -246,17 +249,24 @@ const InnerDataList = ({ cols, emptyMessage = "No data available", errorMessage,
     // ============================================================================
     // RENDER TOOLBAR
     // ============================================================================
+    const toolbarUuid = useRef(Math.random().toString(36).slice(2));
     const renderToolbar = () => {
         if (!showToolbar)
             return null;
-        const uuid = Math.random().toString(36).slice(2);
         return (_jsxs("div", { className: "dl-toolbar", children: [_jsxs("div", { className: "dl-toolbar-left", children: [toolbarTitle && _jsx("h3", { className: "dl-toolbar-title", children: toolbarTitle }), _jsxs("div", { className: "dl-toolbar-right", children: [showBulkActions &&
                                     selectedRows.length > 0 &&
                                     bulkActions.map((action, i) => (_jsxs("button", { className: `dl-btn dl-btn-${action.variant || "default"}`, onClick: () => {
                                             const selectedData = rows.filter((row) => selectedRows.includes(row.id || JSON.stringify(row)));
                                             action.onClick(selectedData);
-                                        }, children: [action.icon && _jsx("span", { children: action.icon }), action.label] }, action.label || i))), toolbarActions.map((action, i) => (_jsx("div", { children: _jsx(DynamicComponent, { config: { component: action.component, attr: action.attr || {} } }) }, `${uuid}-${i}`))), showExportButton && (_jsxs("button", { className: "dl-btn", onClick: onExport, children: [_jsx("span", { children: "\uD83D\uDCE5" }), " Export"] }))] })] }), _jsxs("div", { className: "flex items-center", children: [_jsx(RefreshButton, { show: showRefreshButton, onClick: handleRefresh }), _jsx(ColumnToggle, { columns: columns, hiddenColumns: hiddenColumns, setHiddenColumns: setHiddenColumns }), _jsx(SearchBox, { searchable: searchable, searchPlaceholder: searchPlaceholder, searchText: searchText, onSearch: handleSearch })] })] }));
+                                        }, children: [action.icon && _jsx("span", { children: action.icon }), action.label] }, action.label || i))), _jsx(SearchBox, { searchable: searchable, searchPlaceholder: searchPlaceholder, searchText: searchText, onSearch: handleSearch })] })] }), MemoizedToolbar] }));
     };
+    const handleRefreshRef = useRef(handleRefresh);
+    useEffect(() => {
+        handleRefreshRef.current = handleRefresh;
+    }, [handleRefresh]);
+    const MemoizedToolbar = useMemo(() => {
+        return (_jsxs("div", { className: "flex items-center gap-1", children: [toolbarActions.map((action, i) => (_jsx("div", { children: _jsx(DynamicComponent, { config: { component: action.component, attr: action.attr || {} } }) }, `${toolbarUuid.current}-${i}`))), _jsx(FilterButton, { filterPage: filterPage }), _jsx(RefreshButton, { show: showRefreshButton, onClick: handleRefresh }), _jsx(ColumnToggle, { columns: columns, hiddenColumns: hiddenColumns, setHiddenColumns: setHiddenColumns })] }));
+    }, [toolbarActions, filterPage, showRefreshButton, hiddenColumns, columns]);
     // ============================================================================
     // RENDER FILTER PANEL
     // ============================================================================
@@ -279,11 +289,11 @@ const InnerDataList = ({ cols, emptyMessage = "No data available", errorMessage,
         const hasPrev = listHandler.hasPrevPage();
         const startRecord = (currentPage - 1) * rowsPerPage + 1;
         const endRecord = Math.min(currentPage * rowsPerPage, totalRecords);
-        return (_jsxs("div", { className: "dl-pagination", children: [_jsxs("div", { className: "dl-pagination-info", children: [showPageInfo && showTotalCount && (_jsxs("span", { children: ["Showing ", startRecord, "-", endRecord, " of ", totalRecords, " records"] })), showPageInfo && !showTotalCount && _jsxs("span", { children: ["Page ", currentPage] })] }), _jsxs("div", { className: "dl-pagination-controls", children: [showRowsPerPage && (_jsxs("div", { className: "dl-rows-per-page", children: [_jsx("span", { children: "Rows per page:" }), _jsx("select", { value: rowsPerPage, onChange: (e) => handleRowsPerPage(Number(e.target.value)), children: rowsPerPageOptions.map((o) => (_jsx("option", { value: o, children: o }, o))) })] })), _jsx("button", { className: "dl-page-btn", disabled: !hasPrev, onClick: handleFirstPage, children: "First" }), _jsx("button", { className: "dl-page-btn", disabled: !hasPrev, onClick: handlePrevPage, children: "\u2190 Prev" }), totalPages > 0 &&
-                            [...Array(Math.min(totalPages, 5))].map((_, i) => {
-                                const page = i + 1;
-                                return (_jsx("button", { className: `dl-page-btn ${currentPage === page ? "active" : ""}`, onClick: () => handlePageChange(page), children: page }, page));
-                            }), _jsx("button", { className: "dl-page-btn", disabled: !hasNext, onClick: handleNextPage, children: "Next \u2192" }), _jsx("button", { className: "dl-page-btn", disabled: !hasNext, onClick: handleLastPage, children: "Last" })] })] }));
+        return (_jsxs("div", { className: "dl-pagination", children: [_jsx("div", { className: "dl-pagination-info", children: showPageInfo && !showTotalCount && _jsxs("span", { children: ["Page ", currentPage] }) }), _jsxs("div", { className: "dl-pagination-controls", children: [showRowsPerPage && (_jsxs("div", { className: "dl-rows-per-page", children: [_jsx("span", { children: "Rows per page" }), _jsx("select", { value: rowsPerPage, onChange: (e) => handleRowsPerPage(Number(e.target.value)), children: rowsPerPageOptions.map((o) => (_jsx("option", { value: o, children: o }, o))) })] })), showPageInfo && showTotalCount && (_jsxs("span", { className: "text-sm", children: ["Page ", startRecord, " of ", endRecord] })), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { className: "dl-page-btn", disabled: !hasPrev, onClick: handleFirstPage, children: _jsx(ChevronLeft, { size: 16 }) }), _jsx("button", { className: "dl-page-btn", disabled: !hasPrev, onClick: handlePrevPage, children: _jsx(ChevronsLeft, { size: 16 }) }), totalPages > 0 &&
+                                    [...Array(Math.min(totalPages, 5))].map((_, i) => {
+                                        const page = i + 1;
+                                        return (_jsx("button", { className: `dl-page-btn ${currentPage === page ? "active" : ""}`, onClick: () => handlePageChange(page), children: page }, page));
+                                    }), _jsx("button", { className: "dl-page-btn", disabled: !hasNext, onClick: handleNextPage, children: _jsx(ChevronRight, { size: 16 }) }), _jsx("button", { className: "dl-page-btn", disabled: !hasNext, onClick: handleLastPage, children: _jsx(ChevronsRight, { size: 16 }) })] })] })] }));
     };
     // ============================================================================
     // ERROR STATE
@@ -294,7 +304,8 @@ const InnerDataList = ({ cols, emptyMessage = "No data available", errorMessage,
     // ============================================================================
     // MAIN RENDER
     // ============================================================================
-    return (_jsxs("div", { className: `data-list ${className}`, children: [renderToolbar(), renderFilterPanel(), (paginationPosition === "both" || paginationPosition === "top") && renderPagination(), _jsx(DataTable, { data: rows, columns: sortableColumns, loading: isLoading, emptyMessage: emptyMessage, striped: striped, bordered: bordered, hover: hover, dense: dense, rowKey: "id", onRowClick: handleRowClick, selectedRows: selectedRows, onSelectionChange: handleSelectionChange, selectable: selectable, rowClassName: rowClassName }), (paginationPosition === "both" || paginationPosition === "bottom") && rows.length > 0 && renderPagination()] }));
+    const rowsPerPage = (_a = listHandler === null || listHandler === void 0 ? void 0 : listHandler.getRowsPerPage()) !== null && _a !== void 0 ? _a : 10;
+    return (_jsxs("div", { className: `data-list ${className}`, children: [renderToolbar(), renderFilterPanel(), (paginationPosition === "both" || paginationPosition === "top") && renderPagination(), _jsx(DataTable, { data: rows, columns: sortableColumns, loading: isLoading, emptyMessage: emptyMessage, striped: striped, bordered: bordered, hover: hover, dense: dense, rowKey: "id", onRowClick: handleRowClick, selectedRows: selectedRows, onSelectionChange: handleSelectionChange, selectable: selectable, rowClassName: rowClassName, rowsPerPage: rowsPerPage }), (paginationPosition === "both" || paginationPosition === "bottom") && rows.length > 0 && renderPagination()] }));
 };
 export const DataList = ({ attr }) => {
     const { title, depends, cols, data, rowsPerPage, disableTotalCount, commonActions, rowActions, toolbarActions } = attr, rest = __rest(attr, ["title", "depends", "cols", "data", "rowsPerPage", "disableTotalCount", "commonActions", "rowActions", "toolbarActions"]);
@@ -337,13 +348,17 @@ export const DataList = ({ attr }) => {
             attr: Object.assign(Object.assign({}, commonActions.newPage), { title: "New" }),
         });
     }
-    if (commonActions === null || commonActions === void 0 ? void 0 : commonActions.filterPage) {
-        newToolbarActions.push({
-            label: "Filter",
-            component: "LookupPage",
-            attr: Object.assign(Object.assign({}, commonActions.filterPage), { name: "customFilter", title: "Filter" }),
-        });
-    }
+    // if (commonActions?.filterPage) {
+    //   newToolbarActions.push({
+    //     label: "Filter",
+    //     component: "LookupPage",
+    //     attr: {
+    //       ...commonActions.filterPage,
+    //       name: "customFilter",
+    //       title: "Filter",
+    //     },
+    //   });
+    // }
     const handleRef = useRef(null);
     const onRefresh = () => {
         var _a;
@@ -356,17 +371,21 @@ export const DataList = ({ attr }) => {
             handleRef.current = ref;
         },
     };
-    return (_jsx(TableProvider, { data: data, columns: cols, rowsPerPage: rowsPerPage, disableTotalCount: disableTotalCount, listHandlerFactory: listHandlerFactory, tenant: tenant !== null && tenant !== void 0 ? tenant : "", module: module !== null && module !== void 0 ? module : "", resolvedParams: resolveParams(), children: _jsx(InnerDataList, Object.assign({}, rest, { toolbarTitle: title, cols: cols, rowActions: newRowActions, toolbarActions: newToolbarActions, depends: depends, handle: innerHandle })) }));
+    return (_jsx(TableProvider, { data: data, columns: cols, rowsPerPage: rowsPerPage, disableTotalCount: disableTotalCount, listHandlerFactory: listHandlerFactory, tenant: tenant !== null && tenant !== void 0 ? tenant : "", module: module !== null && module !== void 0 ? module : "", resolvedParams: resolveParams(), children: _jsx(InnerDataList, Object.assign({}, rest, { toolbarTitle: title, cols: cols, rowActions: newRowActions, toolbarActions: newToolbarActions, depends: depends, handle: innerHandle, filterPage: commonActions === null || commonActions === void 0 ? void 0 : commonActions.filterPage })) }));
 };
 export default DataList;
 const RefreshButton = ({ show, onClick, size = 18 }) => {
     if (!show)
         return null;
-    return (_jsx("span", { className: "text-gray-600 hover:bg-gray-200 rounded p-2", children: _jsx(RefreshCcw, { size: size, onClick: onClick, className: "cursor-pointer" }) }));
+    return (_jsx(Tooltip, { content: "Refresh", children: _jsx("span", { className: "text-gray-600 hover:bg-gray-200 rounded p-2 cursor-pointer flex items-center", onClick: onClick, children: _jsx(RefreshCcw, { size: size }) }) })
+    // <Button onClick={onClick} variant="outlined" icon={<RefreshCcw size={size} />} className="text-black border-gray-300 hover:bg-gray-100">
+    //   Refresh
+    // </Button>
+    );
 };
 const ColumnToggle = ({ columns, hiddenColumns, setHiddenColumns }) => {
     const [showColumnToggle, setShowColumnToggle] = useState(false);
-    return (_jsxs("div", { className: "relative", children: [_jsx("span", { className: "text-gray-600 hover:bg-gray-200 rounded p-2 cursor-pointer flex items-center", onClick: () => setShowColumnToggle(!showColumnToggle), children: _jsx(Columns, { size: 18 }) }), showColumnToggle && (_jsxs("div", { className: "absolute right-0 top-8 z-50 bg-white border border-gray-200 rounded-lg shadow-lg p-3 min-w-[180px]", children: [_jsx("p", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2", children: "Columns" }), columns.map((col) => {
+    return (_jsxs("div", { className: "relative", children: [_jsx(Tooltip, { content: "Columns", children: _jsx("span", { className: "text-gray-600 hover:bg-gray-200 rounded p-2 cursor-pointer flex items-center", onClick: () => setShowColumnToggle(!showColumnToggle), children: _jsx(Columns, { size: 18 }) }) }), showColumnToggle && (_jsxs("div", { className: "absolute right-0 top-8 z-50 bg-white border rounded-lg shadow-lg p-3 min-w-[180px]", children: [_jsx("p", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2", children: "Columns" }), columns.map((col) => {
                         const colId = col.id || String(col.title);
                         const isHidden = hiddenColumns.includes(colId);
                         return (_jsxs("label", { className: "flex items-center gap-2 py-1 cursor-pointer hover:bg-gray-50 px-1 rounded", children: [_jsx("input", { type: "checkbox", checked: !isHidden, onChange: () => setHiddenColumns((prev) => (isHidden ? prev.filter((id) => id !== colId) : [...prev, colId])) }), _jsx("span", { className: "text-sm text-gray-700", children: String(col.title || col.id) })] }, colId));
@@ -375,5 +394,11 @@ const ColumnToggle = ({ columns, hiddenColumns, setHiddenColumns }) => {
 const SearchBox = ({ searchable, searchPlaceholder, searchText, onSearch }) => {
     if (!searchable)
         return null;
-    return (_jsxs("div", { className: "dl-search-box ml-2", children: [_jsx("span", { children: _jsx(Search, { size: 16 }) }), _jsx("input", { type: "text", placeholder: searchPlaceholder, value: searchText, onChange: (e) => onSearch(e.target.value), className: "focus:outline-none focus:ring-0 focus:shadow-none focus:bg-white" })] }));
+    return (_jsxs("div", { className: "dl-search-box", children: [_jsx("span", { children: _jsx(Search, { size: 16 }) }), _jsx("input", { type: "text", placeholder: searchPlaceholder, value: searchText, onChange: (e) => onSearch(e.target.value), className: "focus:outline-none focus:ring-0 focus:shadow-none focus:bg-white" })] }));
+};
+const FilterButton = ({ filterPage }) => {
+    const { url, name, icon } = filterPage || {};
+    if (!filterPage)
+        return null;
+    return (_jsx(Tooltip, { content: "Filter", children: _jsx(LookupPage, { url: url, name: name, title: "Filter", icon: icon || _jsx(Funnel, { size: 18, className: "cursor-pointer text-black " }), iconOnly: true, variant: "outlined", className: "text-gray-600 hover:bg-gray-200 rounded p-2 flex items-center" }) }));
 };

package/dist/components/table/DataTable.d.ts

@@ -16,6 +16,7 @@ export interface ColumnDefinition {
     expr?: string;
     primary?: boolean;
     component?: string | null;
+    attr?: Record<string, any>;
 }
 export interface DataTableProps {
     data?: any[];
@@ -41,6 +42,7 @@ export interface DataTableProps {
     multiRowHeader?: ColumnDefinition[][];
     rowActions?: (row: any, rowIndex: number) => React.ReactNode;
     rowsPerItem?: number;
+    rowsPerPage?: number;
 }
 export declare const DataTable: React.FC<DataTableProps>;
 export default DataTable;

package/dist/components/table/DataTable.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { memo, useMemo } from "react";
+import { DynamicComponent } from "../../core/DynamicComponent";
 import { RowProvider } from "../../core/RowContext";
 import { render } from "../../lib/utils/ExprUtil";
 import { useTableContext } from "./TableContext";
@@ -53,7 +54,7 @@ const TableHeader = memo(({ visibleColumns, selectable, rowActions, data, select
                 return (_jsx("th", { style: { width: column.width, textAlign: column.align || "left" }, className: column.sortable ? "sortable" : "", children: renderHeader(column) }, getColumnKey(column, index)));
             }), rowActions && _jsx("th", { className: "dt-actions-cell", children: "Actions" })] }));
 });
-const TableBody = memo(({ sortedData, visibleColumns, emptyMessage, selectable, rowActions, selectedRows, handleSelectRow, handleRowClick, handleCellClick, rowClassName, rowKey, rowsPerItem, cellRenderer, }) => {
+const TableBody = memo(({ sortedData, visibleColumns, emptyMessage, selectable, rowActions, selectedRows, handleSelectRow, handleRowClick, handleCellClick, rowClassName, rowKey, rowsPerItem, cellRenderer, rowsPerPage, }) => {
     const generateKey = () => `RP-${Math.random().toString(36).slice(2)}`;
     const getNestedValue = (obj, path) => {
         if (!path)
@@ -63,6 +64,8 @@ const TableBody = memo(({ sortedData, visibleColumns, emptyMessage, selectable,
     const getRowKey = (row) => row[rowKey] || JSON.stringify(row);
     const isRowSelected = (row) => selectedRows.includes(getRowKey(row));
     const getColumnKey = (column, index) => column.id || column.expr || `col-${index}`;
+    const colCount = visibleColumns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0);
+    const fillerCount = rowsPerPage ? Math.max(0, rowsPerPage - sortedData.length) : 0;
     /*
     const renderExpression = (expr: string, row: any): string => {
       try {
@@ -92,6 +95,12 @@ const TableBody = memo(({ sortedData, visibleColumns, emptyMessage, selectable,
         }
     };
     const renderCellContent = (row, column, rowIndex) => {
+        if (column.component) {
+            return (_jsx(DynamicComponent, { config: {
+                    component: column.component,
+                    attr: Object.assign(Object.assign({}, column.attr), { opt: { data: row } }),
+                } }));
+        }
         if (column.expr) {
             const rendered = render(column.expr, row);
             if (column.render)
@@ -110,35 +119,35 @@ const TableBody = memo(({ sortedData, visibleColumns, emptyMessage, selectable,
     if (!sortedData || sortedData.length === 0) {
         return (_jsx("tr", { children: _jsx("td", { colSpan: visibleColumns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0), style: { textAlign: "center", padding: "24px" }, children: emptyMessage }) }));
     }
-    return (_jsx(_Fragment, { children: sortedData.map((row, itemIndex) => {
-            const isSelected = isRowSelected(row);
-            const customRowClass = rowClassName ? rowClassName(row, itemIndex) : "";
-            const rows = [];
-            for (let subrowIndex = 0; subrowIndex < rowsPerItem; subrowIndex++) {
-                const rowClasses = [isSelected && "dt-selected", customRowClass].filter(Boolean).join(" ");
-                rows.push(_jsx(RowProvider, { data: row, children: _jsxs("tr", { className: rowClasses, onClick: () => handleRowClick(row, itemIndex), children: [selectable && subrowIndex === 0 && (_jsx("td", { className: "dt-checkbox-cell", rowSpan: rowsPerItem, children: _jsx("input", { type: "checkbox", checked: isSelected, onChange: () => handleSelectRow(row), onClick: (e) => e.stopPropagation() }) })), visibleColumns.map((column, colIndex) => {
-                                if (!column.id && !column.expr)
-                                    return null;
-                                if ((column.subrow || 0) !== subrowIndex)
-                                    return null;
-                                if (column.subrow && column.subrow > 0 && subrowIndex > 0)
-                                    return null;
-                                const value = column.id ? getNestedValue(row, column.id) : null;
-                                return (_jsx("td", { style: { textAlign: column.align || "left" }, className: `
+    return (_jsxs(_Fragment, { children: [sortedData.map((row, itemIndex) => {
+                const isSelected = isRowSelected(row);
+                const customRowClass = rowClassName ? rowClassName(row, itemIndex) : "";
+                const rows = [];
+                for (let subrowIndex = 0; subrowIndex < rowsPerItem; subrowIndex++) {
+                    const rowClasses = [isSelected && "dt-selected", customRowClass].filter(Boolean).join(" ");
+                    rows.push(_jsx(RowProvider, { data: row, children: _jsxs("tr", { className: rowClasses, onClick: () => handleRowClick(row, itemIndex), children: [selectable && subrowIndex === 0 && (_jsx("td", { className: "dt-checkbox-cell", rowSpan: rowsPerItem, children: _jsx("input", { type: "checkbox", checked: isSelected, onChange: () => handleSelectRow(row), onClick: (e) => e.stopPropagation() }) })), visibleColumns.map((column, colIndex) => {
+                                    if (!column.id && !column.expr && !column.component)
+                                        return null;
+                                    if ((column.subrow || 0) !== subrowIndex)
+                                        return null;
+                                    if (column.subrow && column.subrow > 0 && subrowIndex > 0)
+                                        return null;
+                                    const value = column.id ? getNestedValue(row, column.id) : null;
+                                    return (_jsx("td", { style: { textAlign: column.align || "left" }, className: `
                         ${column.datatype === "number" || column.datatype === "currency" ? "dt-numeric" : ""}
                         ${column.datatype === "boolean" ? "dt-boolean" : ""}
                       `.trim(), onClick: (e) => handleCellClick(e, value, row, column, itemIndex, colIndex), children: renderCellContent(row, column, itemIndex) }, getColumnKey(column, colIndex)));
-                            }), rowActions && subrowIndex === 0 && (_jsx("td", { className: "dt-actions-cell", rowSpan: rowsPerItem, children: rowActions(row, itemIndex) }))] }, `${getRowKey(row)}-subrow-${subrowIndex}`) }, generateKey()));
-            }
-            return rows;
-        }) }));
+                                }), rowActions && subrowIndex === 0 && (_jsx("td", { className: "dt-actions-cell", rowSpan: rowsPerItem, children: rowActions(row, itemIndex) }))] }, `${getRowKey(row)}-subrow-${subrowIndex}`) }, generateKey()));
+                }
+                return rows;
+            }), [...Array(fillerCount)].map((_, i) => (_jsx("tr", { className: "filler-row", children: [...Array(colCount)].map((_, j) => (_jsx("td", { children: "\u00A0" }, j))) }, `filler-${i}`)))] }));
 });
 // ============================================================================
 // DATATABLE COMPONENT
 // ============================================================================
 export const DataTable = ({ 
 // Direct props (fallback when used outside TableProvider)
-data: propData, columns: propColumns, loading: propLoading = false, emptyMessage = "No data available", striped = false, bordered = false, hover = true, dense = false, stickyHeader = false, maxHeight, rowKey = "id", onRowClick, onCellClick, selectedRows = [], onSelectionChange, selectable = false, className = "", rowClassName, cellRenderer, headerRenderer, multiRowHeader, rowActions, rowsPerItem = 1, }) => {
+data: propData, columns: propColumns, loading: propLoading = false, emptyMessage = "No data available", striped = false, bordered = false, hover = true, dense = false, stickyHeader = false, maxHeight, rowKey = "id", onRowClick, onCellClick, selectedRows = [], onSelectionChange, selectable = false, className = "", rowClassName, cellRenderer, headerRenderer, multiRowHeader, rowActions, rowsPerItem = 1, rowsPerPage = 10, }) => {
     var _a, _b;
     // Try to consume context; if not inside a provider, ctx will be null.
     let ctxColumns;
@@ -248,6 +257,6 @@ data: propData, columns: propColumns, loading: propLoading = false, emptyMessage
     if (loading) {
         return (_jsxs("div", { className: "dt-loading", children: [_jsx("div", { className: "dt-spinner" }), _jsx("p", { children: "Loading..." })] }));
     }
-    return (_jsx("div", { className: "dt-container", style: containerStyle, children: _jsxs("table", { className: tableClasses, children: [_jsx("thead", { children: _jsx(TableHeader, { visibleColumns: visibleColumns, selectable: selectable, rowActions: rowActions, data: data, selectedRows: selectedRows, handleSelectAll: handleSelectAll, sortConfig: sortConfig, handleSort: handleSort, headerRenderer: headerRenderer, multiRowHeader: multiRowHeader }) }), _jsx("tbody", { children: _jsx(TableBody, { sortedData: sortedData, visibleColumns: visibleColumns, emptyMessage: emptyMessage, selectable: selectable, rowActions: rowActions, selectedRows: selectedRows, handleSelectRow: handleSelectRow, handleRowClick: handleRowClick, handleCellClick: handleCellClick, rowClassName: rowClassName, rowKey: rowKey, rowsPerItem: rowsPerItem, cellRenderer: cellRenderer }) })] }) }));
+    return (_jsx("div", { className: "dt-container", style: containerStyle, children: _jsxs("table", { className: tableClasses, children: [_jsx("thead", { children: _jsx(TableHeader, { visibleColumns: visibleColumns, selectable: selectable, rowActions: rowActions, data: data, selectedRows: selectedRows, handleSelectAll: handleSelectAll, sortConfig: sortConfig, handleSort: handleSort, headerRenderer: headerRenderer, multiRowHeader: multiRowHeader }) }), _jsx("tbody", { children: _jsx(TableBody, { sortedData: sortedData, visibleColumns: visibleColumns, emptyMessage: emptyMessage, selectable: selectable, rowActions: rowActions, selectedRows: selectedRows, handleSelectRow: handleSelectRow, handleRowClick: handleRowClick, handleCellClick: handleCellClick, rowClassName: rowClassName, rowKey: rowKey, rowsPerItem: rowsPerItem, cellRenderer: cellRenderer, rowsPerPage: rowsPerPage }) })] }) }));
 };
 export default DataTable;

package/dist/components/view/FilterView.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import VPanel from "../../layouts/VPanel";
+import { VPanel } from "../../layouts/VPanel";
 import { renderListDef } from "../../lib/utils/SectionProvider";
 const FilterView = (props) => {
     const { items = [] } = props !== null && props !== void 0 ? props : {};