@ramesesinc/platform-core 0.1.10 → 0.1.11

package/dist/components/action/DeleteData.d.ts

@@ -8,6 +8,7 @@ interface DeleteDataProps extends AbstractComponent {
     opt?: Record<string, any>;
     iconOnly?: boolean;
     params: Record<string, any>;
+    confirmMessage?: string;
 }
 declare const DeleteData: (props: DeleteDataProps) => import("react/jsx-runtime").JSX.Element;
 export default DeleteData;

package/dist/components/action/DeleteData.js

@@ -1,20 +1,23 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AlertCircle } from "lucide-react";
+import { useState } from "react";
 import { usePageContext } from "../../core/PageContext";
 import { usePageViewContext } from "../../core/PageViewContext";
 import { useRowContext } from "../../core/RowContext";
 import { getValue } from "../../lib/utils/BeanUtils";
 import { getUrlPageParams } from "../../lib/utils/PageUtils";
+const ConfirmDialog = ({ message, onConfirm, onCancel }) => (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40", children: _jsxs("div", { className: "bg-white rounded-xl shadow-xl w-full max-w-sm p-6", children: [_jsxs("div", { className: "flex items-center gap-3 mb-3", children: [_jsx(AlertCircle, { className: "text-red-500 shrink-0", size: 24 }), _jsx("p", { className: "text-base font-semibold text-gray-800", children: "Confirm Deletion" })] }), _jsxs("p", { className: "text-sm mb-6", children: [message, " This cannot be undone."] }), _jsxs("div", { className: "flex justify-end gap-3", children: [_jsx("button", { onClick: onCancel, className: "px-4 py-2 text-sm rounded-md border border-gray-300 text-gray-700 hover:bg-gray-100 transition-colors", children: "Cancel" }), _jsx("button", { onClick: onConfirm, className: "px-4 py-2 text-sm rounded-md bg-red-500 text-white hover:bg-red-600 transition-colors", children: "Delete" })] })] }) }));
 /* ------------------------------------------------------------------ */
 /* Component */
 const DeleteData = (props) => {
-    const { api, className = "", title, icon, opt = {}, params, iconOnly = false } = props !== null && props !== void 0 ? props : {};
+    const { api, className = "", title, icon, opt = {}, params, iconOnly = false, confirmMessage } = props !== null && props !== void 0 ? props : {};
     const { data = {} } = opt;
     const rowContext = useRowContext();
     const pageView = usePageViewContext();
     const pageContext = usePageContext();
-    /* ---------------------- Events ---------------------- */
-    const handleClick = async () => {
+    const [showConfirm, setShowConfirm] = useState(false);
+    const doDelete = async () => {
         var _a, _b;
         try {
             if (!api)
@@ -31,13 +34,21 @@ const DeleteData = (props) => {
                 const d = getValue(params, Object.assign(Object.assign({}, urlParams === null || urlParams === void 0 ? void 0 : urlParams.params), vdata));
                 await (pageContext === null || pageContext === void 0 ? void 0 : pageContext.execService(api, vdata));
             }
-            // pageContext?.refresh();
+            pageContext === null || pageContext === void 0 ? void 0 : pageContext.notifyDepends("datalist");
         }
         catch (err) {
             alert(err.message);
         }
     };
+    const handleClick = () => setShowConfirm(true);
+    const handleConfirm = async () => {
+        setShowConfirm(false);
+        await doDelete();
+    };
+    const handleCancel = () => setShowConfirm(false);
+    const itemLabel = (data === null || data === void 0 ? void 0 : data._id) ? `Delete item ${data._id}?` : "Delete this item?";
+    const message = confirmMessage !== null && confirmMessage !== void 0 ? confirmMessage : itemLabel;
     /* ---------------------- Render ---------------------- */
-    return (_jsx(_Fragment, { children: iconOnly ? (_jsx("span", { onClick: handleClick, className: `cursor-pointer ${className}`, children: icon })) : (_jsxs("button", { onClick: handleClick, className: `px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors ${className}`, children: [icon && _jsx("span", { className: "dl-action-icon", children: icon }), title || "Remove"] })) }));
+    return (_jsxs(_Fragment, { children: [showConfirm && _jsx(ConfirmDialog, { message: message, onConfirm: handleConfirm, onCancel: handleCancel }), iconOnly ? (_jsx("span", { onClick: handleClick, className: `cursor-pointer ${className}`, children: icon })) : (_jsxs("button", { onClick: handleClick, className: `px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors ${className}`, children: [icon && _jsx("span", { className: "dl-action-icon", children: icon }), title || "Remove"] }))] }));
 };
 export default DeleteData;

package/dist/components/action/ViewPage.d.ts

@@ -12,6 +12,7 @@ interface ViewPageProps extends AbstractComponent {
     popupClassName?: string;
     variant?: "primary" | "secondary" | "danger" | "text" | "contained" | "outlined";
     popupOptions?: PopupOptions;
+    action?: "read" | "create" | "edit";
 }
 declare const ViewPage: (props: ViewPageProps) => import("react/jsx-runtime").JSX.Element;
 export default ViewPage;

package/dist/components/action/ViewPage.js

@@ -11,7 +11,7 @@ import { usePopupView } from "../view/PopupView";
 /* ------------------------------------------------------------------ */
 /* Component */
 const ViewPage = (props) => {
-    const { url, mode, className = "", title, icon, iconOnly = false, opt = {}, popupClassName = "", popupOptions = {}, variant } = props !== null && props !== void 0 ? props : {};
+    const { url, mode, className = "", title, icon, iconOnly = false, opt = {}, popupClassName = "", popupOptions = {}, variant, action } = props !== null && props !== void 0 ? props : {};
     const { data = {} } = opt;
     const dataContext = useDataContext();
     const pageView = usePageViewContext();
@@ -65,7 +65,9 @@ const ViewPage = (props) => {
             if (popupClassName != null && popupClassName.trim() !== "") {
                 showPopupOptions.className = popupClassName;
             }
-            const showPopupRef = popupView.create({ url: surl, onClose: onClose, eventHandler: handler }).show(showPopupOptions);
+            const showPopupRef = popupView
+                .create({ url: surl, onClose: onClose, eventHandler: handler, options: { action: "create" } })
+                .show(showPopupOptions);
             popupShowRef.current = showPopupRef;
         }
         else if (preferredMode === "window") {

package/dist/components/common/UIMenu.d.ts

@@ -7,6 +7,7 @@ export type MenuItem = {
 export type MenuGroup = {
     title: string;
     icon?: React.ReactNode | string;
+    hidden?: boolean;
     items: MenuItem[];
 };
 export type UIMenuProps = {

package/dist/components/common/UIMenu.js

@@ -43,6 +43,7 @@ const useUIMenu = (props) => {
                     const mappedItems = categories.map((cat) => ({
                         title: cat.title,
                         icon: cat.icon,
+                        hidden: cat.hidden,
                         items: sorted.filter((m) => m.category === cat.id),
                     }));
                     setMenus(mappedItems);

package/dist/components/input/Combo.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { usePageContext } from "@/core/PageContext";
 import { ChevronDown } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
+import { usePageContext } from "../../core/PageContext";
 import UIComponent from "../common/UIComponent";
 import useUIInput from "../common/UIInput";
 const RADIUS_STYLES = {
@@ -23,7 +23,7 @@ const variantStyles = {
 };
 const Combo = (props) => {
     var _a, _b, _c, _d, _e, _f;
-    const { name, immediate = true, items = [], data = {}, placeholder, variant = "outlined", radius = "md", className = "" } = props !== null && props !== void 0 ? props : {};
+    const { name, immediate = true, items = [], data = {}, placeholder, variant = "outlined", radius = "md", className = "", } = props !== null && props !== void 0 ? props : {};
     const { params } = data !== null && data !== void 0 ? data : {};
     const { projection } = params !== null && params !== void 0 ? params : {};
     const selectRef = useRef(null);

package/dist/components/input/YearPicker.js

@@ -18,9 +18,10 @@ const YearPicker = (props) => {
     valueRef.current = initialValue !== null && initialValue !== void 0 ? initialValue : "";
     const [inputValue, setInputValue] = useState(valueRef.current);
     const handleChange = (e) => {
-        const year = e.target.value;
+        const raw = e.target.value;
+        const year = raw !== "" ? parseInt(raw, 10) : "";
         if (year !== inputValue) {
-            valueRef.current = year;
+            valueRef.current = String(year);
             setInputValue(valueRef.current);
         }
         if (immediate) {

package/dist/components/list/EditableMenu.js

@@ -1,12 +1,12 @@
 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 { 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 ViewPage from "../action/ViewPage";
 import useUIMenu from "../common/UIMenu";
 const EditableMenu = (props) => {

package/dist/components/list/TreeMenu.js

@@ -13,9 +13,26 @@ const buildItems = (raw) => {
     const mapped = [];
     for (const entry of raw) {
         if (Array.isArray(entry.items)) {
-            mapped.push(Object.assign(Object.assign({}, entry), { isDropdown: (_a = entry.isDropdown) !== null && _a !== void 0 ? _a : true, items: buildItems(entry.items) }));
+            const visibleItems = entry.items.filter((it) => !it.hidden);
+            // category hidden + multiple items → skip entirely
+            if (entry.hidden && visibleItems.length !== 1)
+                continue;
+            // category hidden + only one visible item → show item flat without category header
+            if (entry.hidden && visibleItems.length === 1) {
+                const lastGroup = mapped[mapped.length - 1];
+                if (lastGroup && lastGroup.title === "" && !lastGroup.isDropdown) {
+                    lastGroup.items.push(visibleItems[0]);
+                }
+                else {
+                    mapped.push({ title: "", icon: undefined, isDropdown: false, items: [visibleItems[0]] });
+                }
+                continue;
+            }
+            mapped.push(Object.assign(Object.assign({}, entry), { isDropdown: (_a = entry.isDropdown) !== null && _a !== void 0 ? _a : true, items: buildItems(visibleItems) }));
         }
         else {
+            if (entry.hidden)
+                continue;
             const lastGroup = mapped[mapped.length - 1];
             if (lastGroup && lastGroup.title === "" && !lastGroup.isDropdown) {
                 lastGroup.items.push(entry);

package/dist/components/table/DataList.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tooltip } from "@ramesesinc/client";
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Columns, Eye, Funnel, RefreshCcw, Search, Trash } from "lucide-react";
+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";
@@ -195,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);
             }
         }
@@ -244,7 +246,7 @@ 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
@@ -331,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 || [])];
@@ -345,7 +347,7 @@ export const DataList = ({ attr }) => {
         newToolbarActions.unshift({
             label: "New",
             component: "ViewPage",
-            attr: Object.assign(Object.assign({}, commonActions.newPage), { title: "New" }),
+            attr: Object.assign(Object.assign({}, commonActions.newPage), { title: "New", action: "create" }),
         });
     }
     // if (commonActions?.filterPage) {

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

@@ -12,7 +12,7 @@ const StableShell = memo((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 slotRef = useRef(null);
@@ -81,7 +81,7 @@ 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: () => {

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;

package/dist/components/view/RootView.js

@@ -4,7 +4,7 @@ import { forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useR
 import Page from "../../core/Page";
 import { PageViewProvider } from "../../core/PageViewContext";
 const RootView = (props) => {
-    const { url, eventHandler, standalone = true } = props !== null && props !== void 0 ? props : {};
+    const { url, eventHandler, standalone = true, options = {} } = props !== null && props !== void 0 ? props : {};
     const [paths, setPaths] = useState([]);
     const mainPath = useRef("");
     const [newRootPath, setNewRootPath] = useState(null);
@@ -17,7 +17,7 @@ const RootView = (props) => {
             // console.log("RootView loadPage", path); // main#tasklist
             const pageUUID = "page-" + Math.random().toString(36).slice(2);
             const newUrl = url.split("#");
-            comp = _jsx(Page, { url: path }, pageUUID);
+            comp = _jsx(Page, { url: path, options: options }, pageUUID);
         }
         catch (error) {
             const e = getError(error);

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

@@ -1,5 +1,5 @@
 type WizardViewProps = {
-    name: string;
+    title?: string;
     items: Record<string, any>[];
 };
 declare const WizardView: (props: WizardViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/view/WizardView.js

@@ -1,34 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import { useRef, useState } from "react";
 import { usePageContext } from "../../core/PageContext";
 import { StepHandler } from "../../core/StepHandler";
-import ComponentView from "./ComponentView";
+import WizardTemplate from "../../templates/WizardTemplate";
 const WizardView = (props) => {
-    const { name = "wizard", items = [] } = props !== null && props !== void 0 ? props : {};
-    const pageContext = usePageContext();
+    const { title, items = [] } = props !== null && props !== void 0 ? props : {};
+    const [currentItem, setCurrentItem] = useState(items[0]);
     const handlerRef = useRef(null);
+    const pageContext = usePageContext();
     if (handlerRef.current == null) {
-        const callback = (item) => {
-            var _a;
-            const onInit = (_a = item.events) === null || _a === void 0 ? void 0 : _a.onInit;
-            if (onInit != null && typeof onInit === "function") {
-                onInit();
-            }
-            pageContext === null || pageContext === void 0 ? void 0 : pageContext.set(name, item);
-        };
-        const handler = StepHandler(items, callback);
-        for (const it of items) {
-            const item = it;
-            if (item.attr == null)
-                item.attr = {};
-            item.attr.stepHandler = handler;
-            item.attr.events = {};
-        }
-        handlerRef.current = handler;
+        handlerRef.current = StepHandler(items, (item) => setCurrentItem(item), () => pageContext.getData());
     }
-    useEffect(() => {
-        pageContext === null || pageContext === void 0 ? void 0 : pageContext.set(name, items[0]);
-    }, []);
-    return (_jsx("div", { children: _jsx(ComponentView, { name: name, depends: name }) }));
+    return (_jsx(WizardTemplate, { title: (currentItem === null || currentItem === void 0 ? void 0 : currentItem.title) || title, component: currentItem === null || currentItem === void 0 ? void 0 : currentItem.component, componentid: currentItem === null || currentItem === void 0 ? void 0 : currentItem.componentid, attr: currentItem === null || currentItem === void 0 ? void 0 : currentItem.attr, stepHandler: handlerRef.current }));
 };
 export default WizardView;

package/dist/core/DynamicComponent.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 export interface DynamicComponentConfig {
-    component: string;
+    component?: string;
+    componentid?: string;
     attr?: Record<string, any>;
 }
 interface DynamicComponentProps {

package/dist/core/DynamicComponent.js

@@ -11,11 +11,33 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useState } from "react";
 import { ResourceLoader } from "../lib/utils/ResourceLoader";
-import React from "react";
+import { DynamicTemplate } from "./DynamicTemplate";
+import { usePageContext } from "./PageContext";
 export const DynamicComponent = ({ config, fallback = _jsx("div", { style: { color: "red" }, children: "Component not found" }), onError, }) => {
-    const { component, attr = {} } = config !== null && config !== void 0 ? config : {};
+    const { component, componentid, attr = {} } = config !== null && config !== void 0 ? config : {};
     const _a = attr !== null && attr !== void 0 ? attr : {}, { key } = _a, restAttr = __rest(_a, ["key"]);
+    const pageContext = usePageContext();
+    const [resolvedNode, setResolvedNode] = useState(null);
+    useEffect(() => {
+        if (!componentid)
+            return;
+        pageContext.getMgmt("components", componentid).then((res) => {
+            if (!res)
+                return;
+            const { template, attr: resAttr } = res;
+            const mergedAttr = Object.assign(Object.assign({}, resAttr), restAttr);
+            setResolvedNode(_jsx(DynamicTemplate, { template: template, attr: mergedAttr }));
+        });
+    }, [componentid]);
+    // componentid path — wait for async resolution
+    if (componentid) {
+        return resolvedNode ? _jsx(_Fragment, { children: resolvedNode }) : null;
+    }
+    // component path — sync resolution via ResourceLoader
+    if (!component)
+        return _jsx(_Fragment, { children: fallback });
     let Comp;
     try {
         Comp = ResourceLoader.getComponent(component);

package/dist/core/Page.d.ts

@@ -1,6 +1,7 @@
 type PageProps = {
     url?: string | null;
     fallback?: React.ReactNode;
+    options?: Record<string, any>;
 };
 declare const Page: (props: PageProps) => import("react/jsx-runtime").JSX.Element;
 export default Page;

package/dist/core/Page.js

@@ -11,7 +11,7 @@ import { PageProvider } from "./PageContext";
 import { usePageViewContext } from "./PageViewContext";
 import { usePopupContext } from "./PopupContext";
 const Page = (props) => {
-    const { url: finalUrl, fallback = _jsx("div", { children: "Loading page..." }) } = props !== null && props !== void 0 ? props : {};
+    const { url: finalUrl, fallback = _jsx("div", { children: "Loading page..." }), options = {} } = props !== null && props !== void 0 ? props : {};
     const [uuid] = useState(() => Math.random().toString(36).slice(2));
     const [value, setValue] = useState(null);
     const [cache, setCache] = useState({});
@@ -122,6 +122,9 @@ const Page = (props) => {
         getSelectedPath: () => {
             return originalData.selectedPath;
         },
+        getOptions: () => {
+            return options;
+        },
     };
     return (_jsx(PageProvider, { handle: pageHandle, children: _jsx(ChildrenSlot, { ref: slotRef }) }));
 };

package/dist/core/PageContext.d.ts

@@ -34,6 +34,7 @@ export type PageContextValue = {
 export type PageHandle = {
     init: (ref: PageContextValue) => void;
     getSelectedPath: () => string | null;
+    getOptions: () => Record<string, any>;
 };
 export type PageProviderRef = {
     set: (name: string, value: any) => void;

package/dist/core/PageContext.js

@@ -37,7 +37,8 @@ export const PageProvider = ({ handle, children }) => {
     // console.log("PageContext paths", uuid, paths);
     const parentContext = useContext(PageContext);
     const pageView = usePageViewContext();
-    const binding = useBinding();
+    const { action = "read" } = (handle === null || handle === void 0 ? void 0 : handle.getOptions()) || {};
+    const binding = useBinding({}, action);
     useLayoutEffect(() => {
         var _a;
         if (handle == null)
@@ -124,7 +125,8 @@ export const PageProvider = ({ handle, children }) => {
     };
     const setData = (value, mode) => {
         if (binding && typeof binding.setData === "function") {
-            binding.setData(value, mode !== null && mode !== void 0 ? mode : "read");
+            const oldMode = binding.getMode();
+            binding.setData(value, mode !== null && mode !== void 0 ? mode : oldMode);
         }
         else {
             console.warn("binding.setData is not available, skipping data set");

package/dist/core/PageViewContext.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
 /* ------------------ Global Stack ------------------ */
 const contextStack = [];
 /* ------------------ Context ------------------ */
@@ -161,7 +161,7 @@ export const PageViewProvider = ({ paths, handle, children, prefix = "page", eve
         var _a;
         const [, selectedPath] = paths;
         const standalone = isStandalone();
-        const chainInfo = { path: "", base: "", page: "", options: {} };
+        const chainInfo = { path: "", base: "", page: "", options: {}, params: {} };
         const result = { current: chainInfo, previous: null };
         if (standalone) {
             chainInfo.path = selectedPath !== null && selectedPath !== void 0 ? selectedPath : "";
@@ -182,19 +182,19 @@ export const PageViewProvider = ({ paths, handle, children, prefix = "page", eve
     useLayoutEffect(() => {
         handleRef.current = handle;
     }, [handle]);
-    useEffect(() => {
-        const standalone = isStandalone();
-        // console.log("pageChain changed", uuid, standalone, pageChain);
-    }, [pageChain]);
+    // useEffect(() => {
+    //   const standalone = isStandalone();
+    //   console.log("pageChain changed", uuid, standalone, pageChain);
+    // }, [pageChain]);
     const setPage = (page, options = {}) => {
-        var _a;
+        var _a, _b;
         if (page == null || page.trim() === "") {
             return;
         }
         const standalone = isStandalone();
         const pageOptions = options !== null && options !== void 0 ? options : {};
         const { mode = "self" } = pageOptions;
-        const { current: currentChain, previous: previousChain } = pageChain;
+        const { previous: previousChain } = pageChain;
         const newChainInfo = { path: "", base: "", page: "", options: pageOptions, params: {} };
         const newPageChain = { current: newChainInfo, previous: null };
         if (mode != null && mode === "window") {
@@ -206,7 +206,16 @@ export const PageViewProvider = ({ paths, handle, children, prefix = "page", eve
             newChainInfo.page = page;
             newChainInfo.base = locInfo.root;
             newChainInfo.path = locInfo.root + "/" + page;
-            newPageChain.previous = { current: currentChain, previous: previousChain };
+            const currentFullPath = window.location.pathname + window.location.search + window.location.hash;
+            const currentPageName = (_a = window.location.pathname.split("/").at(-1)) !== null && _a !== void 0 ? _a : "";
+            const previousChainInfo = {
+                path: currentFullPath,
+                base: locInfo.root,
+                page: currentPageName,
+                options: {},
+                params: {},
+            };
+            newPageChain.previous = { current: previousChainInfo, previous: previousChain };
         }
         else {
             const currentUrl = getUrl();
@@ -215,11 +224,17 @@ export const PageViewProvider = ({ paths, handle, children, prefix = "page", eve
             newChainInfo.path = [currentUrl, page].filter(Boolean).join("#");
         }
         setPageChain((prev) => (Object.assign({}, newPageChain)));
-        if (!standalone) {
-            // console.log("setPage push state => ", { newChainInfo });
+        if (mode === "window") {
             history.pushState(null, "", newChainInfo.path);
         }
-        (_a = handleRef.current) === null || _a === void 0 ? void 0 : _a.renderPage(page);
+        else if (!standalone) {
+            const currentPathname = window.location.pathname;
+            const expectedPathname = newChainInfo.path.split("#")[0].split("?")[0];
+            if (currentPathname === expectedPathname) {
+                history.pushState(null, "", newChainInfo.path);
+            }
+        }
+        (_b = handleRef.current) === null || _b === void 0 ? void 0 : _b.renderPage(page);
     };
     const pushPage = (page) => {
         var _a;
@@ -319,9 +334,9 @@ export const PageViewProvider = ({ paths, handle, children, prefix = "page", eve
             return loc.root + "/" + paths[0];
         }
         else {
-            const parentPath = (_b = (_a = parentContext === null || parentContext === void 0 ? void 0 : parentContext.paths) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : "";
+            const parentUrl = (_b = (_a = parentContext === null || parentContext === void 0 ? void 0 : parentContext.getUrl) === null || _a === void 0 ? void 0 : _a.call(parentContext)) !== null && _b !== void 0 ? _b : "";
             const [currentPath] = paths;
-            return [parentPath, currentPath].filter(Boolean).join("#");
+            return [parentUrl, currentPath].filter(Boolean).join("#");
         }
     };
     const getSubPaths = () => {

package/dist/core/Panel.js

@@ -46,10 +46,10 @@ const renderContent = (content, orientation = "vertical") => {
                 return (_jsx("div", { style: { width: "100%" }, children: renderContent(item, "vertical") }, i));
             }) }));
     }
-    // ── 4. Object with `component` → DynamicComponent ──────────────────────
-    if (content && typeof content === "object" && content.component) {
-        const { component, attr } = content;
-        return _jsx(DynamicComponent, { config: { component, attr } });
+    // ── 4. Object with `component` or `componentid` → DynamicComponent ──────────────────────
+    if (content && typeof content === "object" && (content.component || content.componentid)) {
+        const { component, componentid, attr } = content;
+        return _jsx(DynamicComponent, { config: { component, componentid, attr } });
     }
     // ── 5. Object without `component` → nested Panel ───────────────────────
     if (content && typeof content === "object") {

package/dist/core/StepHandler.d.ts

@@ -6,4 +6,4 @@ export type StepActionHandler = {
     next: () => void;
     back: () => void;
 };
-export declare const StepHandler: (items: Record<string, any>[], callback: (item: Record<string, any>) => void) => StepActionHandler;
+export declare const StepHandler: (items: Record<string, any>[], callback: (item: Record<string, any>) => void, getData?: () => Record<string, any>) => StepActionHandler;

package/dist/core/StepHandler.js

@@ -1,32 +1,69 @@
-export const StepHandler = (items, callback) => {
+const evaluateWhen = (expr, data) => {
+    try {
+        const filled = expr.replace(/\{\{([\s\S]+?)\}\}/g, (_, path) => {
+            const val = path.trim().split(".").reduce((obj, key) => obj === null || obj === void 0 ? void 0 : obj[key], data);
+            return JSON.stringify(val !== null && val !== void 0 ? val : null);
+        });
+        // eslint-disable-next-line no-new-func
+        return Boolean(new Function(`return (${filled})`)());
+    }
+    catch (_a) {
+        return false;
+    }
+};
+const resolveNext = (current, items, currentIndex, getData) => {
+    const { next } = current;
+    // no next defined — linear
+    if (next == null)
+        return currentIndex + 1;
+    // next is a string id — jump directly
+    if (typeof next === "string") {
+        const idx = items.findIndex((it) => it.id === next);
+        return idx >= 0 ? idx : currentIndex + 1;
+    }
+    // next is a conditions array
+    if (Array.isArray(next)) {
+        const data = getData();
+        for (const condition of next) {
+            const c = condition;
+            if (c.when != null && evaluateWhen(c.when, data)) {
+                const idx = items.findIndex((it) => it.id === c.goto);
+                return idx >= 0 ? idx : currentIndex + 1;
+            }
+            if (c.default != null) {
+                const idx = items.findIndex((it) => it.id === c.default);
+                return idx >= 0 ? idx : currentIndex + 1;
+            }
+        }
+    }
+    return currentIndex + 1;
+};
+export const StepHandler = (items, callback, getData = () => ({})) => {
     let currentIndex = 0;
-    let lastIndex = 0; // max index visited
-    const hasPrev = () => {
-        if (items.length == 0)
-            return false;
-        if (currentIndex - 1 < 0)
-            return false;
-        return true;
-    };
+    let lastIndex = 0;
+    const history = []; // track visited indices for back navigation
+    const hasPrev = () => history.length > 0;
     const hasNext = () => {
-        if (items.length == 0)
+        if (items.length === 0)
             return false;
-        if (currentIndex + 1 >= items.length)
-            return false;
-        return true;
+        const nextIndex = resolveNext(items[currentIndex], items, currentIndex, getData);
+        return nextIndex < items.length;
     };
     const next = () => {
-        currentIndex++;
-        if (currentIndex > lastIndex) {
+        const nextIndex = resolveNext(items[currentIndex], items, currentIndex, getData);
+        if (nextIndex >= items.length)
+            return;
+        history.push(currentIndex);
+        currentIndex = nextIndex;
+        if (currentIndex > lastIndex)
             lastIndex = currentIndex;
-        }
-        const selected = items[currentIndex];
-        callback(selected);
+        callback(items[currentIndex]);
     };
     const back = () => {
-        currentIndex--;
-        const selected = items[currentIndex];
-        callback(selected);
+        if (history.length === 0)
+            return;
+        currentIndex = history.pop();
+        callback(items[currentIndex]);
     };
     return {
         getCurrentIndex: () => currentIndex,

package/dist/index.css

@@ -700,9 +700,15 @@ video {
 .mb-2 {
   margin-bottom: 0.5rem;
 }
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
 .mb-4 {
   margin-bottom: 1rem;
 }
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -922,12 +928,18 @@ video {
 .max-w-\[90vw\] {
   max-width: 90vw;
 }
+.max-w-sm {
+  max-width: 24rem;
+}
 .flex-1 {
   flex: 1 1 0%;
 }
 .flex-shrink-0 {
   flex-shrink: 0;
 }
+.shrink-0 {
+  flex-shrink: 0;
+}
 .-translate-y-1\/2 {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1248,6 +1260,9 @@ video {
 .p-4 {
   padding: 1rem;
 }
+.p-6 {
+  padding: 1.5rem;
+}
 .\!px-3 {
   padding-left: 0.75rem !important;
   padding-right: 0.75rem !important;
@@ -1631,6 +1646,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
 }
+.hover\:bg-red-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
+}
 .hover\:bg-red-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));

package/dist/templates/WizardTemplate.d.ts

@@ -1,6 +1,9 @@
+import React from "react";
 import { StepActionHandler } from "../core/StepHandler";
 type WizardTemplateProps = {
+    title?: string;
     component?: string;
+    componentid?: string;
     attr?: Record<string, any>;
     stepHandler: StepActionHandler;
     children?: React.ReactNode;

package/dist/templates/WizardTemplate.js

@@ -1,22 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from "@ramesesinc/client";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useApp } from "../core/AppContext";
 import BorderLayout from "../layouts/BorderLayout";
+import { ResourceLoader } from "../lib/utils/ResourceLoader";
 const WizardTemplate = (props) => {
-    console.log(props);
-    const { component, attr = {}, stepHandler, children } = props !== null && props !== void 0 ? props : {};
+    const { title, component, componentid, stepHandler, children } = props !== null && props !== void 0 ? props : {};
     const [view, setView] = useState(null);
     const { getComponentCache } = useApp();
     const loadComponent = async () => {
-        if (component == null || component.trim() === "") {
-            setView(null);
+        var _a;
+        if (componentid === null || componentid === void 0 ? void 0 : componentid.trim()) {
+            const comp = await getComponentCache(componentid);
+            setView(comp.template);
             return;
         }
-        const comp = await getComponentCache(component);
-        const Tmpl = comp.template;
-        const el = _jsx(Tmpl, Object.assign({}, (attr !== null && attr !== void 0 ? attr : {})));
-        setView(el);
+        if (component === null || component === void 0 ? void 0 : component.trim()) {
+            const Comp = ResourceLoader.getComponent(component);
+            setView(_jsx(React.Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(Comp, Object.assign({}, ((_a = props.attr) !== null && _a !== void 0 ? _a : {}))) }));
+            return;
+        }
+        setView(null);
     };
     const render = () => {
         if (view != null) {
@@ -25,8 +29,9 @@ const WizardTemplate = (props) => {
         return children;
     };
     useEffect(() => {
+        setView(null);
         loadComponent();
-    }, []);
+    }, [component, componentid]);
     const handleNext = () => {
         stepHandler === null || stepHandler === void 0 ? void 0 : stepHandler.next();
     };
@@ -34,6 +39,6 @@ const WizardTemplate = (props) => {
         stepHandler === null || stepHandler === void 0 ? void 0 : stepHandler.back();
     };
     const south = (_jsxs("div", { className: "flex justify-between gap-2 p-4 font-proxima-600", children: [_jsx("div", { className: "flex gap-2", children: (stepHandler === null || stepHandler === void 0 ? void 0 : stepHandler.hasPrev()) && (_jsx(Button, { onClick: handleBack, className: "bg-transparent text-gray-500 border-none shadow-none hover:bg-gray-100", children: "Back" })) }), _jsx("div", { className: "flex gap-2", children: (stepHandler === null || stepHandler === void 0 ? void 0 : stepHandler.hasNext()) && (_jsx(Button, { onClick: handleNext, className: "bg-primary-500 text-white hover:bg-primary-600", children: "Next" })) })] }));
-    return _jsx(BorderLayout, { south: south, children: render() });
+    return (_jsx(BorderLayout, { north: _jsx("div", { className: "mb-2 font-semibold text-lg", children: title }), south: south, children: render() }));
 };
 export default WizardTemplate;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramesesinc/platform-core",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "Platform Core Library",
   "author": "Rameses Systems Inc.",
   "license": "MIT",