@ramesesinc/platform-core 0.1.0

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

@@ -0,0 +1,8 @@
+import { AbstractComponent } from "../../types/component";
+interface AlertMessageProps extends AbstractComponent {
+    expr: string;
+    className?: string;
+    title?: string;
+}
+declare const AlertMessage: (props: AlertMessageProps) => import("react/jsx-runtime").JSX.Element;
+export default AlertMessage;

package/dist/components/action/AlertMessage.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePageContext } from "../../core/PageContext";
+import { render } from "../../lib/utils/ExprUtil";
+/* ------------------------------------------------------------------ */
+/* Component */
+const AlertMessage = (props) => {
+    const { expr, className = "", title } = props !== null && props !== void 0 ? props : {};
+    const pageContext = usePageContext();
+    /* ---------------------- Events ---------------------- */
+    const handleClick = () => {
+        if (expr) {
+            alert(render(expr, pageContext === null || pageContext === void 0 ? void 0 : pageContext.getAllData()));
+        }
+    };
+    /* ---------------------- Render ---------------------- */
+    return (_jsx("button", { onClick: handleClick, className: `px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors ${className}`, children: title || "Alert" }));
+};
+export default AlertMessage;

package/dist/components/action/AlertMessage.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { usePageContext } from "../../core/PageContext";
+import { render } from "../../lib/utils/ExprUtil";
+import { AbstractComponent } from "../../types/component";
+
+/* ------------------------------------------------------------------ */
+/* Types */
+
+interface AlertMessageProps extends AbstractComponent {
+  expr: string;
+  className?: string;
+  title?: string;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component */
+
+const AlertMessage = (props: AlertMessageProps) => {
+  const { expr, className = "", title } = props ?? {};
+  const pageContext = usePageContext();
+
+  /* ---------------------- Events ---------------------- */
+  const handleClick = () => {
+    if (expr) {
+      alert(render(expr, pageContext?.getAllData()));
+    }
+  };
+
+  /* ---------------------- Render ---------------------- */
+  return (
+    <button onClick={handleClick} className={`px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors ${className}`}>
+      {title || "Alert"}
+    </button>
+  );
+};
+
+export default AlertMessage;

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

@@ -0,0 +1,21 @@
+import { UIButtonControl } from "@ramesesinc/client";
+import { ReactNode } from "react";
+interface BaseButtonProps extends UIButtonControl {
+    children?: ReactNode;
+    title?: string;
+    icon?: ReactNode;
+    iconOrientation?: "left" | "right" | "top" | "bottom";
+    loader?: ReactNode | (() => ReactNode);
+    loaderLabel?: string;
+    variant?: "primary" | "secondary" | "danger" | "text" | "contained" | "outlined";
+    radius?: "none" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full";
+    size?: "sm" | "md" | "lg";
+    type?: "button" | "submit";
+    isLoading?: boolean;
+    actionid?: string;
+    actionParams?: Record<string, any>;
+}
+declare const Button: (props: BaseButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Submit: (props: BaseButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default Button;
+export { Button, Submit };

package/dist/components/action/Button.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getError, mergeCN } from "@ramesesinc/client";
+import { useState } from "react";
+import { useApp } from "../../core/AppContext";
+import { usePageContext } from "../../core/PageContext";
+const RADIUS_STYLES = {
+    none: "rounded-none",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    xl: "rounded-xl",
+    "2xl": "rounded-2xl",
+    "3xl": "rounded-3xl",
+    full: "rounded-full",
+};
+const BaseButton = ({ binding, className = "", title, disabled = false, immediate = false, onClick, children, icon, iconOrientation = "left", loader, loaderLabel, variant = "text", radius = "md", size = "md", isLoading = false, actionid, actionParams, }) => {
+    const pageContext = usePageContext();
+    binding = pageContext.binding;
+    const { tenant, module } = useApp();
+    // --- Style Calculation ---
+    const baseStyles = "inline-flex items-center justify-center px-4 py-[4px] text-md font-medium shadow-sm transition-all duration-150 ease-in-out space-x-2";
+    const focusStyles = "focus:outline-none focus:ring-2 focus:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2";
+    const variantStyles = {
+        primary: "border border-transparent bg-blue-500 text-blue-50 hover:bg-blue-600 focus:ring-blue-500",
+        secondary: "border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:ring-indigo-300",
+        danger: "border border-transparent bg-red-600 text-white hover:bg-red-700 focus:ring-red-400",
+        text: "border border-transparent bg-transparent text-blue-600 hover:bg-blue-50 focus:ring-indigo-300",
+        contained: "border border-transparent bg-blue-500 text-blue-50 hover:bg-blue-600 focus:ring-blue-500",
+        outlined: "border bg-transparent border-blue-500 text-blue-600 hover:bg-blue-50 focus:ring-indigo-300",
+    };
+    const disabledStyles = "opacity-70 cursor-not-allowed";
+    const isVertical = iconOrientation === "top" || iconOrientation === "bottom";
+    const flexDirectionClass = isVertical ? "flex-col" : "flex-row";
+    // Gap is needed if an icon is present OR if no custom loader is provided (fallback uses a spinner).
+    const gapClass = icon || (isLoading && !loader) ? (isVertical ? "gap-1" : "gap-2") : "";
+    let roundingStyle = RADIUS_STYLES[radius || "md"];
+    if (roundingStyle == null) {
+        roundingStyle = RADIUS_STYLES["md"];
+    }
+    const finalClassNames = mergeCN(baseStyles, focusStyles, variantStyles[variant], flexDirectionClass, gapClass, roundingStyle, `${disabled || isLoading ? disabledStyles : ""}`, className !== null && className !== void 0 ? className : "");
+    const [internalLoading, setInternalLoading] = useState(false);
+    const loading = isLoading || internalLoading;
+    // --- Content Calculation ---
+    // This is the main logic block that determines what to display.
+    let content;
+    if (loading) {
+        // LOADING STATE
+        if (loader) {
+            // If a custom loader is provided, use it.
+            content = typeof loader === "function" ? loader() : loader;
+        }
+        else {
+            // Fallback loader: Spinner + original title
+            content = (_jsxs(_Fragment, { children: [_jsxs("svg", { className: "animate-spin h-5 w-5", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), _jsx("span", { children: loaderLabel !== null && loaderLabel !== void 0 ? loaderLabel : children })] }));
+        }
+    }
+    else {
+        // NORMAL STATE
+        content = (_jsxs(_Fragment, { children: [icon && (iconOrientation === "left" || iconOrientation === "top") && icon, _jsx("span", { children: title || children }), icon && (iconOrientation === "right" || iconOrientation === "bottom") && icon] }));
+    }
+    const handleClick = (event) => {
+        if (loading || disabled)
+            return;
+        try {
+            setInternalLoading(true);
+            if (!immediate && binding) {
+                const validationResult = binding.validate();
+                if (validationResult != null && validationResult !== "") {
+                    return;
+                }
+            }
+            if (onClick != null) {
+                const result = onClick === null || onClick === void 0 ? void 0 : onClick(event);
+                if (result != null && typeof result.then === "function") {
+                    result
+                        .then(() => {
+                        // successful execution
+                    })
+                        .catch((err) => {
+                        const e = getError(err);
+                        binding === null || binding === void 0 ? void 0 : binding.setError(e.message);
+                    });
+                }
+            }
+            else if (actionid != null && actionid.trim() !== "") {
+                Promise.resolve()
+                    .then(async () => {
+                    // const actionFunc = await ResourceLoader.getAction(actionid || "");
+                    // const opt = { tenant, module };
+                    // const params = { ...actionParams, opt };
+                    // resolveParams(params ?? {});
+                    // const result = await actionFunc(params);
+                    // console.log("result", result);
+                })
+                    .catch((err) => {
+                    console.log("action error", err);
+                    const e = getError(err);
+                    binding === null || binding === void 0 ? void 0 : binding.setError(e.message);
+                });
+            }
+        }
+        catch (err) {
+            console.log("err", err);
+            const e = getError(err);
+            binding === null || binding === void 0 ? void 0 : binding.setError(e.message);
+        }
+        finally {
+            setInternalLoading(false);
+        }
+    };
+    const resolveParams = (source) => {
+        Object.entries(source || {}).forEach(([key, value]) => {
+            if (value != null && typeof value === "string" && value.startsWith("{") && value.endsWith("}")) {
+                const name = value.slice(1, -1);
+                if (name === "data") {
+                    source[key] = binding === null || binding === void 0 ? void 0 : binding.getData();
+                }
+                else {
+                    source[key] = binding === null || binding === void 0 ? void 0 : binding.get(name);
+                }
+            }
+            else if (value != null && typeof value === "object") {
+                resolveParams(value);
+            }
+        });
+    };
+    return (_jsx("button", { type: "submit", onClick: handleClick, className: finalClassNames, disabled: disabled || loading, children: content }));
+};
+// Button
+const Button = (props) => {
+    const { variant = "text" } = props !== null && props !== void 0 ? props : {};
+    return _jsx(BaseButton, Object.assign({}, props, { variant: variant, type: "button" }));
+};
+// Submit
+const Submit = (props) => {
+    const { variant = "primary" } = props !== null && props !== void 0 ? props : {};
+    return _jsx(BaseButton, Object.assign({}, props, { variant: variant, type: "submit" }));
+};
+export default Button;
+export { Button, Submit };

package/dist/components/action/Button.tsx

@@ -0,0 +1,230 @@
+import { getError, mergeCN, UIButtonControl } from "@ramesesinc/client";
+import React, { ReactNode, useState } from "react";
+import { useApp } from "../../core/AppContext";
+import { usePageContext } from "../../core/PageContext";
+
+const RADIUS_STYLES = {
+  none: "rounded-none",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-2xl",
+  "3xl": "rounded-3xl",
+  full: "rounded-full",
+};
+
+interface BaseButtonProps extends UIButtonControl {
+  children?: ReactNode;
+  title?: string;
+  icon?: ReactNode;
+  iconOrientation?: "left" | "right" | "top" | "bottom";
+
+  loader?: ReactNode | (() => ReactNode);
+  loaderLabel?: string;
+
+  variant?: "primary" | "secondary" | "danger" | "text" | "contained" | "outlined";
+
+  radius?: "none" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full";
+
+  size?: "sm" | "md" | "lg";
+
+  type?: "button" | "submit";
+
+  isLoading?: boolean;
+
+  actionid?: string;
+  actionParams?: Record<string, any>;
+}
+
+const BaseButton = ({
+  binding,
+  className = "",
+  title,
+  disabled = false,
+  immediate = false,
+  onClick,
+
+  children,
+
+  icon,
+  iconOrientation = "left",
+  loader,
+  loaderLabel,
+
+  variant = "text",
+  radius = "md",
+  size = "md",
+
+  isLoading = false,
+  actionid,
+  actionParams,
+}: BaseButtonProps) => {
+  const pageContext = usePageContext();
+  binding = pageContext.binding;
+  const { tenant, module } = useApp();
+
+  // --- Style Calculation ---
+  const baseStyles =
+    "inline-flex items-center justify-center px-4 py-[4px] text-md font-medium shadow-sm transition-all duration-150 ease-in-out space-x-2";
+  const focusStyles =
+    "focus:outline-none focus:ring-2 focus:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2";
+
+  const variantStyles = {
+    primary: "border border-transparent bg-blue-500 text-blue-50 hover:bg-blue-600 focus:ring-blue-500",
+    secondary: "border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:ring-indigo-300",
+    danger: "border border-transparent bg-red-600 text-white hover:bg-red-700 focus:ring-red-400",
+
+    text: "border border-transparent bg-transparent text-blue-600 hover:bg-blue-50 focus:ring-indigo-300",
+    contained: "border border-transparent bg-blue-500 text-blue-50 hover:bg-blue-600 focus:ring-blue-500",
+    outlined: "border bg-transparent border-blue-500 text-blue-600 hover:bg-blue-50 focus:ring-indigo-300",
+  };
+
+  const disabledStyles = "opacity-70 cursor-not-allowed";
+  const isVertical = iconOrientation === "top" || iconOrientation === "bottom";
+  const flexDirectionClass = isVertical ? "flex-col" : "flex-row";
+
+  // Gap is needed if an icon is present OR if no custom loader is provided (fallback uses a spinner).
+  const gapClass = icon || (isLoading && !loader) ? (isVertical ? "gap-1" : "gap-2") : "";
+
+  let roundingStyle = RADIUS_STYLES[radius || "md"];
+  if (roundingStyle == null) {
+    roundingStyle = RADIUS_STYLES["md"];
+  }
+
+  const finalClassNames = mergeCN(
+    baseStyles,
+    focusStyles,
+    variantStyles[variant],
+    flexDirectionClass,
+    gapClass,
+    roundingStyle,
+    `${disabled || isLoading ? disabledStyles : ""}`,
+    className ?? "",
+  );
+
+  const [internalLoading, setInternalLoading] = useState(false);
+
+  const loading = isLoading || internalLoading;
+
+  // --- Content Calculation ---
+  // This is the main logic block that determines what to display.
+  let content: ReactNode;
+
+  if (loading) {
+    // LOADING STATE
+    if (loader) {
+      // If a custom loader is provided, use it.
+      content = typeof loader === "function" ? loader() : loader;
+    } else {
+      // Fallback loader: Spinner + original title
+      content = (
+        <>
+          <svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            ></path>
+          </svg>
+          <span>{loaderLabel ?? children}</span>
+        </>
+      );
+    }
+  } else {
+    // NORMAL STATE
+    content = (
+      <>
+        {icon && (iconOrientation === "left" || iconOrientation === "top") && icon}
+        <span>{title || children}</span>
+        {icon && (iconOrientation === "right" || iconOrientation === "bottom") && icon}
+      </>
+    );
+  }
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    if (loading || disabled) return;
+
+    try {
+      setInternalLoading(true);
+
+      if (!immediate && binding) {
+        const validationResult = binding.validate();
+        if (validationResult != null && validationResult !== "") {
+          return;
+        }
+      }
+
+      if (onClick != null) {
+        const result = onClick?.(event);
+        if (result != null && typeof result.then === "function") {
+          result
+            .then(() => {
+              // successful execution
+            })
+            .catch((err: any) => {
+              const e = getError(err);
+              binding?.setError(e.message);
+            });
+        }
+      } else if (actionid != null && actionid.trim() !== "") {
+        Promise.resolve()
+          .then(async () => {
+            // const actionFunc = await ResourceLoader.getAction(actionid || "");
+            // const opt = { tenant, module };
+            // const params = { ...actionParams, opt };
+            // resolveParams(params ?? {});
+            // const result = await actionFunc(params);
+            // console.log("result", result);
+          })
+          .catch((err: any) => {
+            console.log("action error", err);
+            const e = getError(err);
+            binding?.setError(e.message);
+          });
+      }
+    } catch (err) {
+      console.log("err", err);
+      const e = getError(err);
+      binding?.setError(e.message);
+    } finally {
+      setInternalLoading(false);
+    }
+  };
+
+  const resolveParams = (source: Record<string, any>) => {
+    Object.entries(source || {}).forEach(([key, value]) => {
+      if (value != null && typeof value === "string" && value.startsWith("{") && value.endsWith("}")) {
+        const name = value.slice(1, -1);
+        if (name === "data") {
+          source[key] = binding?.getData();
+        } else {
+          source[key] = binding?.get(name);
+        }
+      } else if (value != null && typeof value === "object") {
+        resolveParams(value);
+      }
+    });
+  };
+
+  return (
+    <button type="submit" onClick={handleClick} className={finalClassNames} disabled={disabled || loading}>
+      {content}
+    </button>
+  );
+};
+
+// Button
+const Button = (props: BaseButtonProps) => {
+  const { variant = "text" } = props ?? {};
+  return <BaseButton {...props} variant={variant} type="button" />;
+};
+
+// Submit
+const Submit = (props: BaseButtonProps) => {
+  const { variant = "primary" } = props ?? {};
+  return <BaseButton {...props} variant={variant} type="submit" />;
+};
+
+export default Button;
+export { Button, Submit };

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { AbstractComponent } from "../../types/component";
+interface CancelEditProps extends AbstractComponent {
+    children?: React.ReactNode;
+    className?: string;
+    title?: string;
+}
+declare const CancelEdit: (props: CancelEditProps) => import("react/jsx-runtime").JSX.Element;
+export default CancelEdit;

package/dist/components/action/CancelEdit.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePageContext } from "../../core/PageContext";
+/* ------------------------------------------------------------------ */
+/* Component */
+const CancelEdit = (props) => {
+    const { children, className = "", title } = props !== null && props !== void 0 ? props : {};
+    const pageContext = usePageContext();
+    /* ---------------------- Events ---------------------- */
+    const handleClick = async () => {
+        try {
+            await (pageContext === null || pageContext === void 0 ? void 0 : pageContext.set("mode", "read"));
+        }
+        catch (err) {
+            alert(err.message);
+        }
+    };
+    /* ---------------------- Render ---------------------- */
+    return (_jsx("button", { onClick: handleClick, className: `px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors ${className}`, children: children || title || "Cancel Edit" }));
+};
+export default CancelEdit;

package/dist/components/action/CancelEdit.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import React from "react";
+import { usePageContext } from "../../core/PageContext";
+import { AbstractComponent } from "../../types/component";
+
+/* ------------------------------------------------------------------ */
+/* Types */
+
+interface CancelEditProps extends AbstractComponent {
+  children?: React.ReactNode;
+  className?: string;
+  title?: string;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component */
+
+const CancelEdit = (props: CancelEditProps) => {
+  const { children, className = "", title } = props ?? {};
+  const pageContext = usePageContext();
+
+  /* ---------------------- Events ---------------------- */
+  const handleClick = async () => {
+    try {
+      await pageContext?.set("mode", "read");
+    } catch (err: any) {
+      alert(err.message);
+    }
+  };
+
+  /* ---------------------- Render ---------------------- */
+  return (
+    <button onClick={handleClick} className={`px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors ${className}`}>
+      {children || title || "Cancel Edit"}
+    </button>
+  );
+};
+
+export default CancelEdit;

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { AbstractComponent } from "../../types/component";
+interface DeleteDataProps extends AbstractComponent {
+    api: string;
+    className?: string;
+    title?: string;
+    icon?: string | React.ReactNode;
+    opt?: Record<string, any>;
+    iconOnly?: boolean;
+    params: Record<string, any>;
+}
+declare const DeleteData: (props: DeleteDataProps) => import("react/jsx-runtime").JSX.Element;
+export default DeleteData;

package/dist/components/action/DeleteData.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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";
+/* ------------------------------------------------------------------ */
+/* Component */
+const DeleteData = (props) => {
+    const { api, className = "", title, icon, opt = {}, params, iconOnly = false } = props !== null && props !== void 0 ? props : {};
+    const { data = {} } = opt;
+    const rowContext = useRowContext();
+    const pageView = usePageViewContext();
+    const pageContext = usePageContext();
+    /* ---------------------- Events ---------------------- */
+    const handleClick = async () => {
+        var _a, _b;
+        try {
+            if (!api)
+                throw new Error("api not defined");
+            if (data) {
+                const allData = (_a = pageContext === null || pageContext === void 0 ? void 0 : pageContext.getAllData()) !== null && _a !== void 0 ? _a : {};
+                const urlParams = getUrlPageParams();
+                const d = getValue(params, Object.assign(Object.assign(Object.assign({}, allData), urlParams === null || urlParams === void 0 ? void 0 : urlParams.params), data));
+                await (pageContext === null || pageContext === void 0 ? void 0 : pageContext.execService(api, d));
+            }
+            else {
+                const vdata = (_b = pageContext === null || pageContext === void 0 ? void 0 : pageContext.getData()) !== null && _b !== void 0 ? _b : {};
+                const urlParams = getUrlPageParams();
+                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();
+        }
+        catch (err) {
+            alert(err.message);
+        }
+    };
+    /* ---------------------- 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"] })) }));
+};
+export default DeleteData;

package/dist/components/action/DeleteData.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import React 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";
+import { AbstractComponent } from "../../types/component";
+
+/* ------------------------------------------------------------------ */
+/* Types */
+
+interface DeleteDataProps extends AbstractComponent {
+  api: string;
+  className?: string;
+  title?: string;
+  icon?: string | React.ReactNode;
+  opt?: Record<string, any>;
+  iconOnly?: boolean;
+  params: Record<string, any>;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component */
+
+const DeleteData = (props: DeleteDataProps) => {
+  const { api, className = "", title, icon, opt = {}, params, iconOnly = false } = props ?? {};
+  const { data = {} } = opt;
+
+  const rowContext = useRowContext();
+  const pageView = usePageViewContext();
+  const pageContext = usePageContext();
+
+  /* ---------------------- Events ---------------------- */
+  const handleClick = async () => {
+    try {
+      if (!api) throw new Error("api not defined");
+      if (data) {
+        const allData = pageContext?.getAllData() ?? {};
+        const urlParams = getUrlPageParams();
+        const d = getValue(params, { ...allData, ...urlParams?.params, ...data });
+        await pageContext?.execService(api, d);
+      } else {
+        const vdata = pageContext?.getData() ?? {};
+        const urlParams = getUrlPageParams();
+        const d = getValue(params, { ...urlParams?.params, ...vdata });
+        await pageContext?.execService(api, vdata);
+      }
+      // pageContext?.refresh();
+    } catch (err: any) {
+      alert(err.message);
+    }
+  };
+
+  /* ---------------------- Render ---------------------- */
+  return (
+    <>
+      {iconOnly ? (
+        <span onClick={handleClick} className={`cursor-pointer ${className}`}>
+          {icon}
+        </span>
+      ) : (
+        <button onClick={handleClick} className={`px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors ${className}`}>
+          {icon && <span className="dl-action-icon">{icon}</span>}
+          {title || "Remove"}
+        </button>
+      )}
+    </>
+  );
+};
+
+export default DeleteData;