@ramesesinc/platform-core 0.1.3 → 0.1.5

package/dist/components/common/UIComponent.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { compile } from "expression-eval";
 import { useEffect, useState } from "react";
 import { usePageContext } from "../../core/PageContext";
 const UIComponent = (props) => {
@@ -20,7 +21,8 @@ const UIComponent = (props) => {
                 return JSON.stringify(val !== null && val !== void 0 ? val : null);
             });
             // eslint-disable-next-line no-new-func
-            return Boolean(new Function(`return (${jsExpr})`)());
+            // return Boolean(new Function(`return (${jsExpr})`)());
+            return Boolean(compile(jsExpr)(context));
         }
         catch (e) {
             console.warn("visibleWhen eval error:", e);

package/dist/components/common/UIComponent.tsx

@@ -1,3 +1,4 @@
+import { compile } from "expression-eval";
 import { useEffect, useState } from "react";
 import { usePageContext } from "../../core/PageContext";
 
@@ -28,7 +29,8 @@ const UIComponent = (props: UIComponentProps) => {
         return JSON.stringify(val ?? null);
       });
       // eslint-disable-next-line no-new-func
-      return Boolean(new Function(`return (${jsExpr})`)());
+      // return Boolean(new Function(`return (${jsExpr})`)());
+      return Boolean(compile(jsExpr)(context));
     } catch (e) {
       console.warn("visibleWhen eval error:", e);
       return true;

package/dist/components/output/Label.d.ts

@@ -1,5 +1,4 @@
 type LabelProps = {
-    label?: string;
     depends?: string;
     expr?: string;
     html?: boolean;

package/dist/components/output/Label.tsx

@@ -5,7 +5,6 @@ import { render } from "../../lib/utils/ExprUtil";
 import UIComponent from "../common/UIComponent";
 
 type LabelProps = {
-  label?: string;
   depends?: string;
   expr?: string;
   html?: boolean;

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

@@ -80,9 +80,13 @@ export interface DataListAttr {
     className?: string;
     rowClassName?: (row: any, rowIndex: number) => string;
     depends?: string;
+    handle?: InnerDataListHandle;
 }
 export interface DataListProps {
     attr: DataListAttr;
 }
+type InnerDataListHandle = {
+    init: (ref: any) => void;
+};
 export declare const DataList: React.FC<DataListProps>;
 export default DataList;

package/dist/components/table/DataList.js

@@ -11,8 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Columns, Eye, RefreshCcw, Search, Trash } from "lucide-react";
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { useApp } from "../../core/AppContext";
+import { useDataContext } from "../../core/DataContext";
 import { DynamicComponent } from "../../core/DynamicComponent";
 import { usePageContext } from "../../core/PageContext";
 import Panel from "../../core/Panel";
@@ -22,7 +23,7 @@ import { getUrlPageParams } from "../../lib/utils/PageUtils";
 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, }) => {
+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 { listHandler, columns, rows, setRows, loading: ctxLoading, setLoading } = useTableContext();
     // ============================================================================
     // STATE
@@ -37,6 +38,17 @@ const InnerDataList = ({ cols, emptyMessage = "No data available", errorMessage,
     const [hiddenColumns, setHiddenColumns] = useState([]);
     const isLoading = ctxLoading || internalLoading;
     const pageContext = usePageContext();
+    const handleRef = {
+        setFilter: async (filter) => {
+            if (filter == null || listHandler == null)
+                return;
+            await listHandler.setFilter(filter);
+            await loadData();
+        },
+    };
+    if (handle != null) {
+        handle.init(handleRef);
+    }
     const refreshHandler = async () => {
         // console.log("refresh via notify depends", pageContext?.uuid);
         await handleRefresh();
@@ -284,18 +296,12 @@ const InnerDataList = ({ cols, emptyMessage = "No data available", errorMessage,
     // ============================================================================
     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()] }));
 };
-// ============================================================================
-// PUBLIC DATALIST
-// - Only accepts attr
-// - All hooks (useApp, usePageContext) called here
-// - factory defined here
-// - resolves dynamic filter params before passing to TableProvider
-// ============================================================================
 export const DataList = ({ attr }) => {
-    const { cols, data, rowsPerPage, disableTotalCount, commonActions, rowActions, toolbarActions } = attr, rest = __rest(attr, ["cols", "data", "rowsPerPage", "disableTotalCount", "commonActions", "rowActions", "toolbarActions"]);
+    const { depends, cols, data, rowsPerPage, disableTotalCount, commonActions, rowActions, toolbarActions } = attr, rest = __rest(attr, ["depends", "cols", "data", "rowsPerPage", "disableTotalCount", "commonActions", "rowActions", "toolbarActions"]);
     // All hooks called here — this is a React component so hooks are valid
     const { tenant, module } = useApp();
     const pageContext = usePageContext();
+    const dataContext = useDataContext();
     // Factory defined here — ListHandler is a local import, no prop needed
     const listHandlerFactory = (config) => ListHandler(config);
     // Resolve dynamic placeholders in filter before ListHandler is constructed.
@@ -335,10 +341,22 @@ export const DataList = ({ attr }) => {
         newToolbarActions.push({
             label: "Filter",
             component: "LookupPage",
-            attr: Object.assign(Object.assign({}, commonActions.filterPage), { title: "Filter" }),
+            attr: Object.assign(Object.assign({}, commonActions.filterPage), { name: "customFilter", title: "Filter" }),
         });
     }
-    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, { cols: cols, rowActions: newRowActions, toolbarActions: newToolbarActions })) }));
+    const handleRef = useRef(null);
+    const onRefresh = () => {
+        var _a;
+        const filter = dataContext === null || dataContext === void 0 ? void 0 : dataContext.get("customFilter");
+        (_a = handleRef.current) === null || _a === void 0 ? void 0 : _a.setFilter(filter !== null && filter !== void 0 ? filter : {});
+    };
+    useDependHandler({ name: "customFilter", onRefresh });
+    const innerHandle = {
+        init: (ref) => {
+            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, { cols: cols, rowActions: newRowActions, toolbarActions: newToolbarActions, depends: depends, handle: innerHandle })) }));
 };
 export default DataList;
 const RefreshButton = ({ show, onClick, size = 18 }) => {

package/dist/components/table/DataList.tsx

@@ -1,6 +1,7 @@
 import { Columns, Eye, RefreshCcw, Search, Trash } from "lucide-react";
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useRef, useState } from "react";
 import { useApp } from "../../core/AppContext";
+import { useDataContext } from "../../core/DataContext";
 import { DynamicComponent } from "../../core/DynamicComponent";
 import { usePageContext } from "../../core/PageContext";
 import Panel from "../../core/Panel";
@@ -123,6 +124,7 @@ export interface DataListAttr {
   rowClassName?: (row: any, rowIndex: number) => string;
 
   depends?: string;
+  handle?: InnerDataListHandle;
 }
 
 // ============================================================================
@@ -191,6 +193,8 @@ const InnerDataList: React.FC<InnerProps> = ({
   className = "",
   rowClassName,
   depends,
+
+  handle,
 }) => {
   const { listHandler, columns, rows, setRows, loading: ctxLoading, setLoading } = useTableContext();
 
@@ -211,6 +215,19 @@ const InnerDataList: React.FC<InnerProps> = ({
 
   const pageContext = usePageContext();
 
+  const handleRef = {
+    setFilter: async (filter: Record<string, any>): Promise<void> => {
+      if (filter == null || listHandler == null) return;
+
+      await listHandler.setFilter(filter);
+      await loadData();
+    },
+  };
+
+  if (handle != null) {
+    handle.init(handleRef);
+  }
+
   const refreshHandler = async () => {
     // console.log("refresh via notify depends", pageContext?.uuid);
     await handleRefresh();
@@ -611,12 +628,17 @@ const InnerDataList: React.FC<InnerProps> = ({
 // - resolves dynamic filter params before passing to TableProvider
 // ============================================================================
 
+type InnerDataListHandle = {
+  init: (ref: any) => void;
+};
+
 export const DataList: React.FC<DataListProps> = ({ attr }) => {
-  const { cols, data, rowsPerPage, disableTotalCount, commonActions, rowActions, toolbarActions, ...rest } = attr;
+  const { depends, cols, data, rowsPerPage, disableTotalCount, commonActions, rowActions, toolbarActions, ...rest } = attr;
 
   // All hooks called here — this is a React component so hooks are valid
   const { tenant, module } = useApp();
   const pageContext = usePageContext();
+  const dataContext = useDataContext();
 
   // Factory defined here — ListHandler is a local import, no prop needed
   const listHandlerFactory = (config: ListHandlerConfig): ListActionHandler => ListHandler(config);
@@ -676,11 +698,27 @@ export const DataList: React.FC<DataListProps> = ({ attr }) => {
       component: "LookupPage",
       attr: {
         ...commonActions.filterPage,
+        name: "customFilter",
         title: "Filter",
       },
     });
   }
 
+  const handleRef = useRef<any>(null);
+
+  const onRefresh = () => {
+    const filter = dataContext?.get("customFilter");
+    handleRef.current?.setFilter(filter ?? {});
+  };
+
+  useDependHandler({ name: "customFilter", onRefresh });
+
+  const innerHandle = {
+    init: (ref: any) => {
+      handleRef.current = ref;
+    },
+  } as InnerDataListHandle;
+
   return (
     <TableProvider
       data={data}
@@ -692,7 +730,7 @@ export const DataList: React.FC<DataListProps> = ({ attr }) => {
       module={module ?? ""}
       resolvedParams={resolveParams()}
     >
-      <InnerDataList {...rest} cols={cols} rowActions={newRowActions} toolbarActions={newToolbarActions} />
+      <InnerDataList {...rest} cols={cols} rowActions={newRowActions} toolbarActions={newToolbarActions} depends={depends} handle={innerHandle} />
     </TableProvider>
   );
 };

package/dist/components/table/ListHandler.js

@@ -35,7 +35,7 @@ export const ListHandler = (config) => {
     let hasMorePages = false;
     const getData = () => dataResult;
     const load = async () => {
-        var _a, _b;
+        var _a, _b, _c, _d;
         const queryParams = {
             cols,
             start: (currentPage - 1) * rowsPerPage,
@@ -58,10 +58,10 @@ export const ListHandler = (config) => {
             // console.log("datalist pass 1", { api, query: { ...queryParams, ...rest } });
             const result = await localAPI.exec(`/services/exec/${config.tenant}/${config.module}/${api}`, Object.assign(Object.assign({}, queryParams), rest));
             // console.log("datalist pass 2", { result });
-            dataResult = result.data || [];
+            dataResult = (_b = (_a = result.data) !== null && _a !== void 0 ? _a : result) !== null && _b !== void 0 ? _b : [];
             if (useCursorPagination) {
-                lastCursor = (_a = result.nextCursor) !== null && _a !== void 0 ? _a : null;
-                hasMorePages = (_b = result.hasMore) !== null && _b !== void 0 ? _b : false;
+                lastCursor = (_c = result.nextCursor) !== null && _c !== void 0 ? _c : null;
+                hasMorePages = (_d = result.hasMore) !== null && _d !== void 0 ? _d : false;
             }
             if (!disableTotalCount) {
                 totalRecordCount = result.total || 0;

package/dist/components/table/ListHandler.ts

@@ -122,7 +122,7 @@ export const ListHandler = (config: ListHandlerConfig): ListActionHandler => {
       // console.log("datalist pass 1", { api, query: { ...queryParams, ...rest } });
       const result = await localAPI.exec(`/services/exec/${config.tenant}/${config.module}/${api}`, { ...queryParams, ...rest });
       // console.log("datalist pass 2", { result });
-      dataResult = result.data || [];
+      dataResult = result.data ?? result ?? [];
 
       if (useCursorPagination) {
         lastCursor = result.nextCursor ?? null;

package/dist/components/view/HtmlForm.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { DynamicComponent } from "../../core/DynamicComponent";
+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 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"}
@@ -19,7 +18,9 @@ function parseAttr(attrStr) {
     catch (_a) {
         try {
             // eslint-disable-next-line no-new-func
-            return new Function(`"use strict"; return (${attrStr})`)();
+            // 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);
         }
         catch (_b) {
             console.warn("HtmlForm: could not parse attr →", attrStr);
@@ -59,9 +60,7 @@ 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;
 }
@@ -95,16 +94,14 @@ 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/HtmlForm.tsx

@@ -1,10 +1,9 @@
-import { DynamicComponent } from "../../core/DynamicComponent";
+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 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";
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Types
@@ -33,7 +32,9 @@ function parseAttr(attrStr: string | null): any {
   } catch {
     try {
       // eslint-disable-next-line no-new-func
-      return new Function(`"use strict"; return (${attrStr})`)();
+      // 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);
     } catch {
       console.warn("HtmlForm: could not parse attr →", attrStr);
       return {};
@@ -74,9 +75,7 @@ function domAttrsToProps(el: Element): Record<string, any> {
   for (const attr of Array.from(el.attributes)) {
     if (["component", "attr"].includes(attr.name)) continue;
     const reactName = ATTR_MAP[attr.name] ?? attr.name;
-    props[reactName] = attr.name === "style"
-      ? styleStringToObject(attr.value)
-      : attr.value;
+    props[reactName] = attr.name === "style" ? styleStringToObject(attr.value) : attr.value;
   }
   return props;
 }
@@ -116,23 +115,16 @@ function walkNode(node: ChildNode, parentTag?: string): React.ReactNode {
     if (tag === "span" && componentName) {
       const attr: any = parseAttr(el.getAttribute("attr"));
       const config: SentinelConfig = { component: componentName, attr };
-      return (
-        <DynamicComponent
-          key={nextKey()}
-          config={config}
-        />
-      );
+      return <DynamicComponent key={nextKey()} config={config} />;
     }
 
     // ── Regular element → recurse ──────────────────────────────────────────
     const props = { ...domAttrsToProps(el), key: nextKey() };
     const children: React.ReactNode[] = Array.from(el.childNodes)
-      .map((child) => walkNode(child, tag))  // pass current tag as parentTag
+      .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;
@@ -176,11 +168,9 @@ const HtmlForm = (props: HtmlFormProps) => {
 
   return (
     <UIComponent {...(props ?? {})}>
-      <div className="h-[calc(100vh-80px)] overflow-y-auto overflow-x-auto">
-        {reactTree}
-      </div>
+      <div className="h-[calc(100vh-80px)] overflow-y-auto overflow-x-auto">{reactTree}</div>
     </UIComponent>
   );
 };
 
-export default HtmlForm;
+export default HtmlForm;

package/dist/components/view/HtmlView.js

@@ -8,37 +8,26 @@ import { render } from "../../lib/utils/ExprUtil";
 import UIComponent from "../common/UIComponent";
 const Html = (props) => {
     const { depends, expr, templateid } = props !== null && props !== void 0 ? props : {};
-    const [htmlTemplate, setHtmlTemplate] = useState(""); // Store the raw template
-    const [renderedHtml, setRenderedHtml] = useState(""); // Store the rendered HTML
-    const [resData, setResData] = useState({});
+    const [htmlTemplate, setHtmlTemplate] = useState(""); // raw template
+    const [renderedHtml, setRenderedHtml] = useState(""); // rendered output
     const pageContext = usePageContext();
     const binding = pageContext === null || pageContext === void 0 ? void 0 : pageContext.binding;
     const { tenant, module } = useApp();
-    const loadHtmlContent = async (tempid) => {
+    // ← single render function used everywhere
+    const renderTemplate = (template) => {
         var _a;
+        if (!template)
+            return "";
         try {
-            const htmlContent = await localAPI.useMgmt(tenant, module).get("html_templates", tempid);
-            if (htmlContent != null) {
-                // Store the raw template
-                setHtmlTemplate(htmlContent.htmlCode);
-                // Fetch data from API
-                const data = (_a = pageContext === null || pageContext === void 0 ? void 0 : pageContext.getAllData()) !== null && _a !== void 0 ? _a : {};
-                // Render the template with the data
-                const rendered = render(htmlContent.htmlCode, data);
-                setRenderedHtml(rendered);
-            }
-            else {
-                setHtmlTemplate("");
-                setRenderedHtml("");
-            }
+            const data = (_a = pageContext === null || pageContext === void 0 ? void 0 : pageContext.getAllData()) !== null && _a !== void 0 ? _a : {};
+            return render(template, data);
         }
         catch (error) {
-            console.error("Error loading HTML template:", error);
-            setHtmlTemplate("");
-            setRenderedHtml("");
+            console.error("Template render error:", error);
+            return template;
         }
     };
-    // Render the expression using ExprUtil
+    // ← single expression render
     const renderExpression = (expression) => {
         var _a;
         if (!expression)
@@ -52,34 +41,46 @@ const Html = (props) => {
             return expression;
         }
     };
-    const initialValue = renderExpression(expr !== null && expr !== void 0 ? expr : "");
-    const [value, setValue] = useState(initialValue);
-    const onRefresh = () => {
-        const newValue = renderExpression(expr !== null && expr !== void 0 ? expr : "");
-        setValue(newValue);
-        // Re-render the HTML template if data changes
-        if (htmlTemplate && resData) {
-            const rendered = render(htmlTemplate, resData);
-            setRenderedHtml(rendered);
-        }
-    };
-    useDependHandler({ name: depends, onRefresh });
+    // ← load template only once when templateid changes
     useEffect(() => {
-        if (templateid != null && templateid.trim() !== "") {
-            loadHtmlContent(templateid);
-        }
+        if (templateid == null || templateid.trim() === "")
+            return;
+        const loadHtmlContent = async () => {
+            try {
+                const htmlContent = await localAPI.useMgmt(tenant, module).get("html_templates", templateid);
+                if (htmlContent != null) {
+                    setHtmlTemplate(htmlContent.htmlCode); // ← just store raw template
+                }
+                else {
+                    setHtmlTemplate("");
+                }
+            }
+            catch (error) {
+                console.error("Error loading HTML template:", error);
+                setHtmlTemplate("");
+            }
+        };
+        loadHtmlContent();
     }, [templateid]);
+    // ← re-render whenever template OR binding data changes
     useEffect(() => {
-        const newValue = renderExpression(expr !== null && expr !== void 0 ? expr : "");
-        setValue(newValue);
-    }, [binding === null || binding === void 0 ? void 0 : binding.raw, expr]);
-    // Re-render template when data changes
-    useEffect(() => {
-        if (htmlTemplate && resData && Object.keys(resData).length > 0) {
-            const rendered = render(htmlTemplate, resData);
-            setRenderedHtml(rendered);
+        if (htmlTemplate) {
+            setRenderedHtml(renderTemplate(htmlTemplate));
         }
-    }, [resData, htmlTemplate]);
+        else if (expr) {
+            setRenderedHtml(renderExpression(expr));
+        }
+    }, [htmlTemplate, binding === null || binding === void 0 ? void 0 : binding.raw]); // ← binding.raw triggers when data changes
+    // ← onRefresh called when depends changes
+    const onRefresh = () => {
+        if (htmlTemplate) {
+            setRenderedHtml(renderTemplate(htmlTemplate));
+        }
+        else if (expr) {
+            setRenderedHtml(renderExpression(expr));
+        }
+    };
+    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 } }) })));
 };
 export default Html;

package/dist/components/view/HtmlView.tsx

@@ -16,39 +16,26 @@ type HtmlLabelProps = {
 
 const Html = (props: HtmlLabelProps) => {
   const { depends, expr, templateid } = props ?? {};
-  const [htmlTemplate, setHtmlTemplate] = useState(""); // Store the raw template
-  const [renderedHtml, setRenderedHtml] = useState(""); // Store the rendered HTML
-  const [resData, setResData] = useState<Record<string, any>>({});
+
+  const [htmlTemplate, setHtmlTemplate] = useState(""); // raw template
+  const [renderedHtml, setRenderedHtml] = useState(""); // rendered output
   const pageContext = usePageContext();
   const binding = pageContext?.binding;
   const { tenant, module } = useApp();
 
-  const loadHtmlContent = async (tempid: string) => {
+  // ← single render function used everywhere
+  const renderTemplate = (template: string) => {
+    if (!template) return "";
     try {
-      const htmlContent = await localAPI.useMgmt(tenant!, module!).get("html_templates", tempid);
-
-      if (htmlContent != null) {
-        // Store the raw template
-        setHtmlTemplate(htmlContent.htmlCode);
-
-        // Fetch data from API
-        const data = pageContext?.getAllData() ?? {};
-
-        // Render the template with the data
-        const rendered = render(htmlContent.htmlCode, data);
-        setRenderedHtml(rendered);
-      } else {
-        setHtmlTemplate("");
-        setRenderedHtml("");
-      }
+      const data = pageContext?.getAllData() ?? {};
+      return render(template, data);
     } catch (error) {
-      console.error("Error loading HTML template:", error);
-      setHtmlTemplate("");
-      setRenderedHtml("");
+      console.error("Template render error:", error);
+      return template;
     }
   };
 
-  // Render the expression using ExprUtil
+  // ← single expression render
   const renderExpression = (expression: string) => {
     if (!expression) return "";
     try {
@@ -60,52 +47,49 @@ const Html = (props: HtmlLabelProps) => {
     }
   };
 
-  const initialValue = renderExpression(expr ?? "");
-  const [value, setValue] = useState(initialValue);
-
-  const onRefresh = () => {
-    const newValue = renderExpression(expr ?? "");
-    setValue(newValue);
-
-    // Re-render the HTML template if data changes
-    if (htmlTemplate && resData) {
-      const rendered = render(htmlTemplate, resData);
-      setRenderedHtml(rendered);
-    }
-  };
-
-  useDependHandler({ name: depends, onRefresh });
-
+  // ← load template only once when templateid changes
   useEffect(() => {
-    if (templateid != null && templateid.trim() !== "") {
-      loadHtmlContent(templateid);
-    }
+    if (templateid == null || templateid.trim() === "") return;
+
+    const loadHtmlContent = async () => {
+      try {
+        const htmlContent = await localAPI.useMgmt(tenant!, module!).get("html_templates", templateid);
+        if (htmlContent != null) {
+          setHtmlTemplate(htmlContent.htmlCode); // ← just store raw template
+        } else {
+          setHtmlTemplate("");
+        }
+      } catch (error) {
+        console.error("Error loading HTML template:", error);
+        setHtmlTemplate("");
+      }
+    };
+
+    loadHtmlContent();
   }, [templateid]);
 
+  // ← re-render whenever template OR binding data changes
   useEffect(() => {
-    const newValue = renderExpression(expr ?? "");
-    setValue(newValue);
-  }, [binding?.raw, expr]);
+    if (htmlTemplate) {
+      setRenderedHtml(renderTemplate(htmlTemplate));
+    } else if (expr) {
+      setRenderedHtml(renderExpression(expr));
+    }
+  }, [htmlTemplate, binding?.raw]); // ← binding.raw triggers when data changes
 
-  // Re-render template when data changes
-  useEffect(() => {
-    if (htmlTemplate && resData && Object.keys(resData).length > 0) {
-      const rendered = render(htmlTemplate, resData);
-      setRenderedHtml(rendered);
+  // ← onRefresh called when depends changes
+  const onRefresh = () => {
+    if (htmlTemplate) {
+      setRenderedHtml(renderTemplate(htmlTemplate));
+    } else if (expr) {
+      setRenderedHtml(renderExpression(expr));
     }
-  }, [resData, htmlTemplate]);
+  };
+
+  useDependHandler({ name: depends, onRefresh });
 
   return (
     <UIComponent {...(props ?? {})}>
-      {/* Debug info - remove in production */}
-      {/* <details style={{ marginBottom: "20px" }}>
-        <summary>Debug Data</summary>
-        <pre style={{ fontSize: "10px", maxHeight: "200px", overflow: "auto" }}>
-          {JSON.stringify(resData, null, 2)}
-        </pre>
-      </details> */}
-
-      {/* Rendered HTML */}
       <div className="h-[calc(100vh-80px)] overflow-y-auto overflow-x-auto" dangerouslySetInnerHTML={{ __html: renderedHtml }} />
     </UIComponent>
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramesesinc/platform-core",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Platform Core Library",
   "author": "Rameses Systems Inc.",
   "license": "MIT",
@@ -28,12 +28,12 @@
     "copy-res": "node -e \"const fs=require('fs');const apps=['etracs','agos','filipizen'];apps.forEach(a=>{const d='../../apps/'+a+'/public/_res';fs.cpSync('src/public/_res',d,{recursive:true,force:true})})\""
   },
   "peerDependencies": {
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.553.0",
     "next": ">=13.5.6 <15.0.0",
     "nunjucks": "^3.2.4",
     "react": ">=18.2.0",
-    "react-dom": ">=18.2.0",
-    "lucide-react": "^0.553.0",
-    "clsx": "^2.1.1"
+    "react-dom": ">=18.2.0"
   },
   "devDependencies": {
     "@ramesesinc/app-forms": "0.1.0",
@@ -50,13 +50,14 @@
     "clsx": "^2.1.1",
     "eslint": "^8",
     "eslint-config-next": "14.2.9",
+    "next": ">=13.5.6 <15.0.0",
     "postcss": "^8",
     "postcss-cli": "^11.0.1",
     "supports-color": "^10.2.2",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5",
-    "next": ">=13.5.6 <15.0.0"
+    "expression-eval": "^5.0.1",
+    "typescript": "^5"
   },
   "keywords": [
     "ramesesinc-platform-core"