@ramesesinc/platform-core 0.1.9 → 0.1.11

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
@@ -192,7 +195,9 @@ const InnerDataList = ({ cols, emptyMessage = "No data available", errorMessage,
                 handleSelectionChange([key]);
             }
             else {
-                const newSelection = selectedRows.includes(key) ? selectedRows.filter((k) => k !== key) : [...selectedRows, key];
+                const newSelection = selectedRows.includes(key)
+                    ? selectedRows.filter((k) => k !== key)
+                    : [...selectedRows, key];
                 handleSelectionChange(newSelection);
             }
         }
@@ -215,15 +220,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
         ? [
@@ -241,22 +246,29 @@ const InnerDataList = ({ cols, emptyMessage = "No data available", errorMessage,
             return col;
         const currentSort = listHandler.getCurrentSortedColumn();
         const currentDirection = listHandler.getCurrentSortDirection();
-        return Object.assign(Object.assign({}, col), { title: (_jsxs("div", { className: "dl-sortable-header", onClick: () => col.id && col.id !== "_actions" && handleSort(col.id), style: { cursor: col.id !== "_actions" ? "pointer" : "default" }, children: [col.title, currentSort === col.id && _jsx("span", { className: `dl-sort-icon dl-sort-${currentDirection}`, children: currentDirection === "asc" ? "▲" : "▼" })] })) });
+        return Object.assign(Object.assign({}, col), { title: (_jsxs("div", { className: "dl-sortable-header", onClick: () => col.id && col.id !== "_actions" && handleSort(col.id), style: { cursor: col.id !== "_actions" ? "pointer" : "default" }, children: [col.title, currentSort === col.id && (_jsx("span", { className: `dl-sort-icon dl-sort-${currentDirection}`, children: currentDirection === "asc" ? "▲" : "▼" }))] })) });
     });
     // ============================================================================
     // 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 +291,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 +306,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"]);
@@ -320,13 +333,13 @@ export const DataList = ({ attr }) => {
     if (commonActions === null || commonActions === void 0 ? void 0 : commonActions.viewPage) {
         newRowActions.unshift({
             component: "ViewPage",
-            attr: Object.assign(Object.assign({}, commonActions.viewPage), { title: "View", icon: _jsx(Eye, { size: 20 }), iconOnly: true }),
+            attr: Object.assign(Object.assign({}, commonActions.viewPage), { title: "View", icon: _jsx(Eye, { size: 20, color: "blue" }), iconOnly: true }),
         });
     }
     if (commonActions === null || commonActions === void 0 ? void 0 : commonActions.deleteData) {
         newRowActions.push({
             component: "DeleteData",
-            attr: Object.assign(Object.assign({}, commonActions.deleteData), { title: "Delete", icon: _jsx(Trash, { size: 20 }), iconOnly: true }),
+            attr: Object.assign(Object.assign({}, commonActions.deleteData), { title: "Delete", icon: _jsx(Trash, { size: 20, color: "red" }), iconOnly: true }),
         });
     }
     const newToolbarActions = [...(toolbarActions || [])];
@@ -334,16 +347,20 @@ export const DataList = ({ attr }) => {
         newToolbarActions.unshift({
             label: "New",
             component: "ViewPage",
-            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" }),
+            attr: Object.assign(Object.assign({}, commonActions.newPage), { title: "New", action: "create" }),
         });
     }
+    // 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 +373,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 +396,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 : {};

package/dist/components/view/HtmlForm.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { localAPI } from "@ramesesinc/lib/local-api";
-import React, { useEffect, useMemo, useState } from "react";
-import { useApp } from "../../core/AppContext";
 import { DynamicComponent } from "../../core/DynamicComponent";
+import { useApp } from "../../core/AppContext";
 import useDependHandler from "../../core/UIDependHandler";
+import { localAPI } from "@ramesesinc/lib/local-api";
+import { useEffect, useMemo, useState } from "react";
 import UIComponent from "../common/UIComponent";
+import React from "react";
 // ─────────────────────────────────────────────────────────────────────────────
 // Attr Parser
 // Handles both strict JSON {"key":"value"} and JS object literals {key: "value"}
@@ -18,9 +19,7 @@ function parseAttr(attrStr) {
     catch (_a) {
         try {
             // eslint-disable-next-line no-new-func
-            // return new Function(`"use strict"; return (${attrStr})`)();
-            const normalized = attrStr.replace(/([{,]\s*)([a-zA-Z_$][a-zA-Z0-9_$]*)(\s*:)/g, '$1"$2"$3').replace(/'([^'\\]*(\\.[^'\\]*)*)'/g, '"$1"');
-            return JSON.parse(normalized);
+            return new Function(`"use strict"; return (${attrStr})`)();
         }
         catch (_b) {
             console.warn("HtmlForm: could not parse attr →", attrStr);
@@ -60,7 +59,9 @@ function domAttrsToProps(el) {
         if (["component", "attr"].includes(attr.name))
             continue;
         const reactName = (_a = ATTR_MAP[attr.name]) !== null && _a !== void 0 ? _a : attr.name;
-        props[reactName] = attr.name === "style" ? styleStringToObject(attr.value) : attr.value;
+        props[reactName] = attr.name === "style"
+            ? styleStringToObject(attr.value)
+            : attr.value;
     }
     return props;
 }
@@ -94,14 +95,16 @@ function walkNode(node, parentTag) {
         if (tag === "span" && componentName) {
             const attr = parseAttr(el.getAttribute("attr"));
             const config = { component: componentName, attr };
-            return _jsx(DynamicComponent, { config: config }, nextKey());
+            return (_jsx(DynamicComponent, { config: config }, nextKey()));
         }
         // ── Regular element → recurse ──────────────────────────────────────────
         const props = Object.assign(Object.assign({}, domAttrsToProps(el)), { key: nextKey() });
         const children = Array.from(el.childNodes)
             .map((child) => walkNode(child, tag)) // pass current tag as parentTag
             .filter((n) => n !== null && n !== undefined);
-        return children.length > 0 ? React.createElement(tag, props, ...children) : React.createElement(tag, props);
+        return children.length > 0
+            ? React.createElement(tag, props, ...children)
+            : React.createElement(tag, props);
     }
     return null;
 }

package/dist/components/view/HtmlView.js

@@ -81,6 +81,6 @@ const Html = (props) => {
         }
     };
     useDependHandler({ name: depends, onRefresh });
-    return (_jsx(UIComponent, Object.assign({}, (props !== null && props !== void 0 ? props : {}), { children: _jsx("div", { className: "h-[calc(100vh-80px)] overflow-y-auto overflow-x-auto", dangerouslySetInnerHTML: { __html: renderedHtml } }) })));
+    return (_jsx(UIComponent, Object.assign({}, (props !== null && props !== void 0 ? props : {}), { children: _jsx("div", { className: "", dangerouslySetInnerHTML: { __html: renderedHtml } }) })));
 };
 export default Html;

package/dist/components/view/PageView.d.ts

@@ -4,6 +4,7 @@ interface PageViewProps extends UIComponentProps {
     depends?: string;
     url?: string;
     fallback?: React.ReactNode;
+    options?: Record<string, any>;
 }
 declare const PageView: React.MemoExoticComponent<(props: PageViewProps) => import("react/jsx-runtime").JSX.Element>;
 export default PageView;

package/dist/components/view/PageView.js

@@ -1,30 +1,30 @@
 "use client";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import Page from "../../core/Page";
 import { usePageContext } from "../../core/PageContext";
 import { PageViewProvider, usePageViewContext } from "../../core/PageViewContext";
 import useDependHandler from "../../core/UIDependHandler";
-import { useUrlParams } from "../../hooks/useUrlParams";
 import UIComponent from "../common/UIComponent";
 const StableShell = memo((props) => {
     const { uiProps, slotRef, handle, paths } = props !== null && props !== void 0 ? props : {};
     return (_jsx(UIComponent, Object.assign({}, uiProps, { children: _jsx(PageViewProvider, { handle: handle, paths: paths !== null && paths !== void 0 ? paths : [], children: _jsx(PageSlot, { ref: slotRef }) }) })));
 });
 const PageView = memo((props) => {
-    const { name = "selectedPage", depends, url } = props !== null && props !== void 0 ? props : {};
+    const { name = "selectedPage", depends, url, options = {} } = props !== null && props !== void 0 ? props : {};
     const [forceUpdate, setForceUpdate] = useState({});
     const providerRef = useRef({});
-    const { setAnchorPath } = useUrlParams();
     const slotRef = useRef(null);
     const pageContext = usePageContext();
-    const [ownPaths, setOwnPaths] = useState([]);
     const isEmpty = (value) => value == null || value.trim() === "";
     const pageView = usePageViewContext();
+    const [ownPaths, setOwnPaths] = useState([]);
+    const pathsRef = useRef([]);
     let preferredName = isEmpty(name) ? depends : name;
     let preferredDepends = isEmpty(depends) ? preferredName : depends;
-    const newProps = Object.assign(Object.assign({}, props), { name: preferredName, depends: preferredDepends });
+    // const newProps = { ...props, name: preferredName, depends: preferredDepends };
+    const newProps = useMemo(() => (Object.assign(Object.assign({}, props), { name: preferredName, depends: preferredDepends })), [props, preferredName, preferredDepends]);
     const propsRef = useRef(newProps);
     useEffect(() => {
         propsRef.current = newProps;
@@ -40,6 +40,32 @@ const PageView = memo((props) => {
     useEffect(() => {
         getUrlRef.current = getUrl;
     });
+    useEffect(() => {
+        var _a;
+        let paths = [];
+        let firstPath = null;
+        if (url == null) {
+            const value = pageContext.get(preferredName !== null && preferredName !== void 0 ? preferredName : "");
+            if (value == null) {
+                // only use subPaths if this pageView is directly under root
+                if (pageView.isRootView()) {
+                    paths = (_a = pageView.getSubPaths()) !== null && _a !== void 0 ? _a : [];
+                }
+            }
+            else {
+                paths = String(value).split("#");
+            }
+        }
+        else {
+            paths = String(url).split("#");
+        }
+        [firstPath] = paths;
+        if (firstPath == null || firstPath.trim() === "")
+            return;
+        pathsRef.current = paths;
+        setOwnPaths([firstPath]); // ← track own paths
+        pageViewHandleRef.current.renderPage(firstPath);
+    }, []);
     // Stable handle — never recreated
     const pageViewHandleRef = useRef({
         displayName: "PageView#pageViewHandle",
@@ -55,15 +81,15 @@ const PageView = memo((props) => {
             }
             setOwnPaths([page]); // ← track own paths
             const key = "page-" + Math.random().toString(36).slice(2);
-            const comp = _createElement(Page, Object.assign({}, propsRef.current, { url: page, key: key }));
+            const comp = _createElement(Page, Object.assign({}, propsRef.current, { url: page, key: key, options: options }));
             (_b = slotRef.current) === null || _b === void 0 ? void 0 : _b.update(comp, page);
         },
         isStandalone: () => {
             return pageView == null ? true : pageView.isStandalone();
         },
     });
-    const onRefresh = (val) => {
-        setForceUpdate({ val }); // ← carry the value
+    const onRefresh = () => {
+        setForceUpdate({});
     };
     useDependHandler({ name: newProps.depends, onRefresh });
     useEffect(() => {
@@ -71,10 +97,11 @@ const PageView = memo((props) => {
         if (prov == null || typeof prov.setPage !== "function")
             return;
         const url = getUrlRef.current();
-        // console.log("pageView forceUpdate", url, providerRef.current);
         providerRef.current.setPage(url);
     }, [forceUpdate]);
-    return _jsx(StableShell, { uiProps: newProps, handle: pageViewHandleRef.current, slotRef: slotRef, paths: ownPaths });
+    return (_jsx(StableShell, { uiProps: newProps, handle: pageViewHandleRef.current, slotRef: slotRef, 
+        // paths={pathsRef.current}
+        paths: ownPaths }));
 });
 const PageSlot = memo(forwardRef((_, ref) => {
     const [content, setContent] = useState(null);

package/dist/components/view/PopupView.d.ts

@@ -6,6 +6,7 @@ type PopupViewProps = {
     onClose?: () => void;
     eventHandler?: EventHandler | null;
     title?: string;
+    options?: Record<string, any>;
 };
 declare const PopupView: (props: PopupViewProps) => import("react/jsx-runtime").JSX.Element;
 export default PopupView;

package/dist/components/view/PopupView.js

@@ -7,7 +7,7 @@ import Page from "../../core/Page";
 import { PageViewProvider } from "../../core/PageViewContext";
 import { usePopupManager } from "../../core/PopupContext";
 const PopupView = (props) => {
-    const { url, popupClassName, onClose = () => { }, eventHandler, title } = props !== null && props !== void 0 ? props : {};
+    const { url, popupClassName, onClose = () => { }, eventHandler, title, options = {} } = props !== null && props !== void 0 ? props : {};
     const [paths, setPaths] = useState([]);
     const providerRef = useRef({});
     const slotRef = useRef(null);
@@ -22,7 +22,7 @@ const PopupView = (props) => {
         let comp = null;
         try {
             const key = "page-" + Math.random().toString(36).slice(2);
-            comp = _jsx(Page, { url: path }, key);
+            comp = _jsx(Page, { url: path, options: options }, key);
         }
         catch (error) {
             const e = getError(error);
@@ -79,9 +79,9 @@ const ChildrenSlot = memo(forwardRef((_, ref) => {
 export const usePopupView = () => {
     const popupManager = usePopupManager();
     const create = (props) => {
-        const { url, onClose, eventHandler, title } = props !== null && props !== void 0 ? props : {};
+        const { url, onClose, eventHandler, title, options: optionProps = {} } = props !== null && props !== void 0 ? props : {};
         const show = (options) => {
-            const content = _jsx(PopupView, { url: url, onClose: onClose, eventHandler: eventHandler });
+            const content = _jsx(PopupView, { url: url, onClose: onClose, eventHandler: eventHandler, options: optionProps });
             const popup = popupManager.create(options);
             popup.setContent(content);
             popup.show();

package/dist/components/view/RootView.d.ts

@@ -3,6 +3,7 @@ type RootViewProps = {
     url: string;
     eventHandler?: EventHandler | null;
     standalone?: boolean;
+    options?: Record<string, any>;
 };
 declare const RootView: (props: RootViewProps) => import("react/jsx-runtime").JSX.Element;
 export default RootView;