@ramesesinc/app-forms 0.1.0

package/dist/components/HtmlTemplate.tsx

@@ -0,0 +1,46 @@
+import { localAPI } from "@ramesesinc/lib/local-api";
+import React, { useEffect, useState } from "react";
+
+type HtmlTemplateProps = {
+  id: string;
+  module: string;
+  tenant: string;
+};
+
+const HtmlTemplate: React.FC<HtmlTemplateProps> = ({ id, module, tenant }) => {
+  const [html, setHtml] = useState<string>("");
+  const [error, setError] = useState<string | null>(null);
+
+  console.log("HtmlTemplate props:", { id, module, tenant });
+  useEffect(() => {
+    const fetchHtml = async () => {
+      try {
+        const mgmt = localAPI.useMgmt(tenant, module);
+        const data = await mgmt.get("html_templates", id);
+
+        console.log("Fetched HTML Template:", data);
+        setHtml(data?.htmlCode ?? "");
+      } catch (e: any) {
+        setHtml("");
+        setError(e.message || "Unknown error");
+      }
+    };
+    fetchHtml();
+  }, [id]);
+
+  if (error)
+    return (
+      <div id={id} style={{ color: "red" }}>
+        Error: {error}
+      </div>
+    );
+
+  return (
+    <div id={id}>
+      {/* Render fetched HTML content safely */}
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+};
+
+export default HtmlTemplate;

package/dist/components/NewPermitAppCodeForm.d.ts

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

package/dist/components/NewPermitAppCodeForm.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const NewPermitAppCodeForm = (props) => {
+    const { trackingNumber = "154-30TWQLEP" } = props !== null && props !== void 0 ? props : {};
+    return (_jsxs("div", { className: "px-4", children: [_jsx("h2", { className: "text-2xl font-bold text-green-600 mb-12", children: "New Permit Application" }), _jsxs("div", { className: "mb-12", children: [_jsx("h3", { className: "text-xl font-bold text-gray-900 mb-6", children: "Application created" }), _jsx("p", { className: "text-gray-700 leading-relaxed mb-6", children: "Please take note of the tracking number for this application. This will be your tracking reference for completing and follow up for this application." }), _jsx("h4", { className: "text-xl font-bold text-gray-900 mb-8", children: trackingNumber })] })] }));
+};
+export default NewPermitAppCodeForm;

package/dist/components/NewPermitAppCodeForm.tsx

@@ -0,0 +1,22 @@
+const NewPermitAppCodeForm = (props: any) => {
+  const { trackingNumber = "154-30TWQLEP" } = props ?? {};
+
+  return (
+    <div className="px-4">
+      <h2 className="text-2xl font-bold text-green-600 mb-12">New Permit Application</h2>
+
+      <div className="mb-12">
+        <h3 className="text-xl font-bold text-gray-900 mb-6">Application created</h3>
+
+        <p className="text-gray-700 leading-relaxed mb-6">
+          Please take note of the tracking number for this application. This will be your tracking reference for completing and follow up for this
+          application.
+        </p>
+
+        <h4 className="text-xl font-bold text-gray-900 mb-8">{trackingNumber}</h4>
+      </div>
+    </div>
+  );
+};
+
+export default NewPermitAppCodeForm;

package/dist/components/NewPermitAppForm.d.ts

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

package/dist/components/NewPermitAppForm.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import InputValidator from "./common/InputValidator";
+const NewPermitAppForm = () => {
+    const [radioValue, setRadioValue] = useState("");
+    return (_jsxs("div", { className: "px-4", children: [_jsx("h1", { className: "text-lg font-bold text-green-600 mb-8", children: "Select Application Type" }), _jsx("div", { className: "space-y-6 mb-12", children: _jsx("label", { className: "flex items-center space-x-4 cursor-pointer group", children: _jsx(InputValidator, { datatype: "radio", options: ["New Construction", "Renovation", "Amendment"], value: radioValue, onChange: setRadioValue, className: "gap-2 my-4" }) }) })] }));
+};
+export default NewPermitAppForm;

package/dist/components/NewPermitAppForm.tsx

@@ -0,0 +1,26 @@
+import { useState } from "react";
+import InputValidator from "./common/InputValidator";
+
+const NewPermitAppForm = () => {
+  const [radioValue, setRadioValue] = useState("");
+
+  return (
+    <div className="px-4">
+      <h1 className="text-lg font-bold text-green-600 mb-8">Select Application Type</h1>
+
+      <div className="space-y-6 mb-12">
+        <label className="flex items-center space-x-4 cursor-pointer group">
+          <InputValidator
+            datatype="radio"
+            options={["New Construction", "Renovation", "Amendment"]}
+            value={radioValue}
+            onChange={setRadioValue}
+            className="gap-2 my-4"
+          />
+        </label>
+      </div>
+    </div>
+  );
+};
+
+export default NewPermitAppForm;

package/dist/components/NewPermitAppTermForm.d.ts

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

package/dist/components/NewPermitAppTermForm.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import InputValidator from "./common/InputValidator";
+const NewPermitTermForm = () => {
+    const [agreed, setAgreed] = useState(false);
+    return (_jsxs("div", { className: "px-4", children: [_jsx("h2", { className: "text-2xl font-bold text-green-600 mb-12", children: "New Permit Application" }), _jsxs("div", { className: "mb-8", children: [_jsx("h3", { className: "text-xl font-bold text-gray-900 mb-6", children: "Please read thoroughly before proceeding" }), _jsx("p", { className: "text-gray-700 leading-relaxed mb-4", children: "This online service will require personal information from the applicant, lot owner(s) and professionals involved in this transaction. In compliance with the Data Privacy Act, we are securing your consent that you have been authorized by the aforementioned parties to act on their behalf. The data collected will be stored, processed and used for effectively carrying out legitimate transactions with the local government of Tagbilaran City. If you do not agree to these terms, you can cancel out by click on the Cancel button. If you agree to these terms, tick on the checkbox and click Continue." }), _jsx(InputValidator, { datatype: "boolean", value: agreed, onChange: (val) => setAgreed(val), label: "Yes, I have read and agree to the terms and conditions" })] })] }));
+};
+export default NewPermitTermForm;

package/dist/components/NewPermitAppTermForm.tsx

@@ -0,0 +1,33 @@
+import { useState } from "react";
+import InputValidator from "./common/InputValidator";
+
+const NewPermitTermForm = () => {
+  const [agreed, setAgreed] = useState(false);
+
+  return (
+    <div className="px-4">
+      <h2 className="text-2xl font-bold text-green-600 mb-12">New Permit Application</h2>
+
+      <div className="mb-8">
+        <h3 className="text-xl font-bold text-gray-900 mb-6">Please read thoroughly before proceeding</h3>
+
+        <p className="text-gray-700 leading-relaxed mb-4">
+          This online service will require personal information from the applicant, lot owner(s) and professionals involved in this transaction. In
+          compliance with the Data Privacy Act, we are securing your consent that you have been authorized by the aforementioned parties to act on
+          their behalf. The data collected will be stored, processed and used for effectively carrying out legitimate transactions with the local
+          government of Tagbilaran City. If you do not agree to these terms, you can cancel out by click on the Cancel button. If you agree to these
+          terms, tick on the checkbox and click Continue.
+        </p>
+
+        <InputValidator
+          datatype="boolean"
+          value={agreed}
+          onChange={(val) => setAgreed(val)}
+          label="Yes, I have read and agree to the terms and conditions"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default NewPermitTermForm;

package/dist/components/NewPermitAppTypeForm.d.ts

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

package/dist/components/NewPermitAppTypeForm.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import InputValidator from "./common/InputValidator";
+const ApplicationTypeForm = () => {
+    const [projectName, setProjectName] = useState("");
+    return (_jsxs("div", { className: "px-4", children: [_jsx("h2", { className: "text-lg font-bold text-green-600 mb-12", children: "New Building Permit Application" }), _jsxs("div", { className: "mb-12", children: [_jsx("h3", { className: "text-xl font-bold text-gray-900 mb-6", children: "Project Information" }), _jsxs("div", { children: [_jsx("label", { className: "block text-gray-600 text-sm mb-3", children: "Project Name *" }), _jsx(InputValidator, { datatype: "string", value: projectName, onChange: (val) => setProjectName(val), className: "w-full border-b-2 border-gray-800 text-gray-900" })] })] })] }));
+};
+export default ApplicationTypeForm;

package/dist/components/NewPermitAppTypeForm.tsx

@@ -0,0 +1,28 @@
+import { useState } from "react";
+import InputValidator from "./common/InputValidator";
+
+const ApplicationTypeForm = () => {
+  const [projectName, setProjectName] = useState("");
+
+  return (
+    <div className="px-4">
+      <h2 className="text-lg font-bold text-green-600 mb-12">New Building Permit Application</h2>
+
+      <div className="mb-12">
+        <h3 className="text-xl font-bold text-gray-900 mb-6">Project Information</h3>
+
+        <div>
+          <label className="block text-gray-600 text-sm mb-3">Project Name *</label>
+          <InputValidator
+            datatype="string"
+            value={projectName}
+            onChange={(val) => setProjectName(val)}
+            className="w-full border-b-2 border-gray-800 text-gray-900"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ApplicationTypeForm;

package/dist/components/PrivacyStatementForm.js

@@ -0,0 +1,49 @@
+"use strict";
+// import { Button } from "@ramesesinc/client";
+// import { usePageContext } from "@ramesesinc/platform-core";
+// import HtmlTemplate from "./HtmlTemplate";
+// type PrivacyStatementFormProps = {
+//   attr?: {
+//     html_template_id?: string;
+//     module?: string;
+//     tenant?: string;
+//     [key: string]: any;
+//   };
+//   html_template_id?: string;
+//   module?: string;
+//   tenant?: string;
+//   params?: any;
+// };
+// const PrivacyStatementForm = (props: PrivacyStatementFormProps) => {
+//   const pageContext = usePageContext();
+//   const attr = props.attr || {};
+//   const { wizard } = props.params ?? {};
+//   console.log("PageContext in PrivacyStatementForm:", pageContext);
+//   console.log("PrivacyStatementForm props:", {
+//     html_template_id: props.html_template_id ?? attr.html_template_id,
+//     module: props.module ?? attr.module ?? pageContext.module ?? "",
+//     tenant: props.tenant ?? attr.tenant ?? pageContext.tenant ?? "",
+//   });
+//   return (
+//     <div className="mx-auto px-4 bg-white">
+//       <HtmlTemplate
+//         id={props.html_template_id ?? attr.html_template_id ?? ""}
+//         module={props.module ?? pageContext.module ?? ""}
+//         tenant={props.tenant ?? pageContext.tenant ?? ""}
+//       />
+//       <div className="flex flex-row justify-between gap-4 py-4 border-t border-slate-200">
+//         <div className="w-[120px]">
+//           <Button variant="text" size="lg" type="button" onClick={wizard.onBack}>
+//             Prev
+//           </Button>
+//         </div>
+//         <div className="w-[120px] flex justify-end">
+//           <Button variant="text" size="lg" type="button" onClick={wizard.onNext}>
+//             Next
+//           </Button>
+//         </div>
+//       </div>
+//     </div>
+//   );
+// };
+// export default PrivacyStatementForm;

package/dist/components/PrivacyStatementForm.tsx

@@ -0,0 +1,55 @@
+// import { Button } from "@ramesesinc/client";
+// import { usePageContext } from "@ramesesinc/platform-core";
+// import HtmlTemplate from "./HtmlTemplate";
+
+// type PrivacyStatementFormProps = {
+//   attr?: {
+//     html_template_id?: string;
+//     module?: string;
+//     tenant?: string;
+//     [key: string]: any;
+//   };
+//   html_template_id?: string;
+//   module?: string;
+//   tenant?: string;
+//   params?: any;
+// };
+
+// const PrivacyStatementForm = (props: PrivacyStatementFormProps) => {
+//   const pageContext = usePageContext();
+//   const attr = props.attr || {};
+//   const { wizard } = props.params ?? {};
+
+//   console.log("PageContext in PrivacyStatementForm:", pageContext);
+//   console.log("PrivacyStatementForm props:", {
+//     html_template_id: props.html_template_id ?? attr.html_template_id,
+//     module: props.module ?? attr.module ?? pageContext.module ?? "",
+//     tenant: props.tenant ?? attr.tenant ?? pageContext.tenant ?? "",
+//   });
+
+//   return (
+//     <div className="mx-auto px-4 bg-white">
+//       <HtmlTemplate
+//         id={props.html_template_id ?? attr.html_template_id ?? ""}
+//         module={props.module ?? pageContext.module ?? ""}
+//         tenant={props.tenant ?? pageContext.tenant ?? ""}
+//       />
+
+//       <div className="flex flex-row justify-between gap-4 py-4 border-t border-slate-200">
+//         <div className="w-[120px]">
+//           <Button variant="text" size="lg" type="button" onClick={wizard.onBack}>
+//             Prev
+//           </Button>
+//         </div>
+
+//         <div className="w-[120px] flex justify-end">
+//           <Button variant="text" size="lg" type="button" onClick={wizard.onNext}>
+//             Next
+//           </Button>
+//         </div>
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default PrivacyStatementForm;

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

@@ -0,0 +1,13 @@
+import React from "react";
+type InputValidatorProps = {
+    datatype: "number" | "decimal" | "string" | "boolean" | "list" | "complexlist" | any;
+    value?: any;
+    onChange?: (value: any) => void;
+    options?: string[];
+    className?: string;
+    label?: string;
+    placeholder?: string;
+    activeFirst?: boolean;
+};
+declare const InputValidator: React.FC<InputValidatorProps>;
+export default InputValidator;

package/dist/components/common/InputValidator.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+const InputValidator = ({ datatype, value, onChange, options = [], className = "", label = "", placeholder = "", activeFirst = true }) => {
+    const [inputValue, setInputValue] = useState(value !== null && value !== void 0 ? value : "");
+    useEffect(() => {
+        setInputValue(value !== null && value !== void 0 ? value : "");
+    }, [value]);
+    const handleChange = (val) => {
+        setInputValue(val);
+        onChange === null || onChange === void 0 ? void 0 : onChange(val);
+    };
+    switch (datatype) {
+        case "number":
+            return (_jsx("input", { type: "text", value: inputValue, placeholder: placeholder, className: `outline-none ${className}`, onChange: (e) => {
+                    const val = e.target.value;
+                    if (/^-?\d*$/.test(val)) {
+                        handleChange(val);
+                    }
+                } }));
+        case "decimal":
+            return (_jsx("input", { type: "text", value: inputValue, placeholder: placeholder, className: `outline-none ${className}`, onChange: (e) => {
+                    const val = e.target.value;
+                    if (/^-?\d*\.?\d*$/.test(val)) {
+                        handleChange(val);
+                    }
+                } }));
+        case "string":
+            return (_jsx("input", { type: "text", value: inputValue, placeholder: placeholder, className: `
+    focus:ring-0
+    focus:border-transparent
+    bg-transparent
+    focus:bg-transparent
+    shadow-none
+    focus:shadow-none
+    appearance-none ${className}`, onChange: (e) => {
+                    const val = e.target.value;
+                    // allow empty value
+                    if (val === "") {
+                        handleChange(val);
+                        return;
+                    }
+                    // allow alphanumeric + space
+                    if (/^[a-zA-Z0-9 ]+$/.test(val)) {
+                        handleChange(val);
+                    }
+                } }));
+        case "mobilenumber":
+            return (_jsx("input", { type: "text", value: inputValue, placeholder: placeholder, className: `focus:ring-0
+    focus:border-transparent
+    bg-transparent
+    focus:bg-transparent
+    shadow-none
+    focus:shadow-none
+    appearance-none ${className}`, onChange: (e) => {
+                    const val = e.target.value;
+                    // allow empty, digits, or + at start
+                    if (/^\+?\d*$/.test(val)) {
+                        handleChange(val);
+                    }
+                } }));
+        case "email":
+            return (_jsx("input", { type: "text", value: inputValue, placeholder: placeholder, className: `focus:ring-0
+    focus:border-transparent
+    bg-transparent
+    focus:bg-transparent
+    shadow-none
+    focus:shadow-none
+    appearance-none ${className}`, onChange: (e) => {
+                    const val = e.target.value;
+                    // allow empty value
+                    if (val === "") {
+                        handleChange(val);
+                        return;
+                    }
+                    // allow email-safe characters while typing
+                    if (/^[a-zA-Z0-9@._-]*$/.test(val)) {
+                        handleChange(val);
+                    }
+                } }));
+        case "boolean":
+            if (options.length > 0) {
+                // Multiple checkboxes
+                return (_jsx("div", { className: `flex flex-col space-y-1 ${className}`, children: options.map((opt, i) => (_jsxs("label", { className: "inline-flex items-center space-x-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", value: opt, checked: Array.isArray(inputValue) ? inputValue.includes(opt) : false, className: "w-4 h-4 accent-blue-500", onChange: (e) => {
+                                    let newValue = Array.isArray(inputValue) ? [...inputValue] : [];
+                                    if (e.target.checked) {
+                                        newValue.push(opt);
+                                    }
+                                    else {
+                                        newValue = newValue.filter((v) => v !== opt);
+                                    }
+                                    handleChange(newValue);
+                                } }), _jsx("span", { children: opt })] }, i))) }));
+            }
+            // Single checkbox (default)
+            return (_jsxs("label", { className: `inline-flex items-center space-x-2 cursor-pointer ${className}`, children: [_jsx("input", { type: "checkbox", checked: !!inputValue, className: "w-4 h-4 accent-blue-500", onChange: (e) => handleChange(e.target.checked) }), label && _jsx("span", { children: label })] }));
+        case "radio":
+            if (options.length === 0) {
+                return _jsx("span", { className: className, children: "No options provided" });
+            }
+            // Initialize first option as active if inputValue is empty and activeFirst is true
+            useEffect(() => {
+                if ((inputValue === "" || inputValue === undefined) && activeFirst) {
+                    handleChange(options[0]);
+                }
+            }, [options, activeFirst]);
+            return (_jsx("div", { className: `flex flex-col space-y-1 ${className}`, children: options.map((opt, i) => (_jsxs("label", { className: "inline-flex items-center space-x-2 cursor-pointer", children: [_jsx("input", { type: "radio", name: `radio-${label || Math.random()}`, value: opt, checked: inputValue === opt, className: "w-4 h-4 accent-blue-500", onChange: () => handleChange(opt) }), _jsx("span", { children: opt })] }, i))) }));
+        case "list":
+            return (_jsxs("select", { value: inputValue, className: `bg-transparent ${className}`, onChange: (e) => handleChange(e.target.value), children: [_jsx("option", { value: "", children: "Select an option" }), options.map((opt, i) => (_jsx("option", { value: opt, children: opt }, i)))] }));
+        case "complexlist":
+            return (_jsx("select", { multiple: true, value: inputValue || [], className: `${className}`, onChange: (e) => {
+                    const selected = Array.from(e.target.selectedOptions).map((opt) => opt.value);
+                    handleChange(selected);
+                }, children: options.map((opt, i) => (_jsxs("option", { value: opt, children: [" ", opt, " "] }, i))) }));
+        default:
+            return _jsx("span", { className: className, children: "Unsupported datatype" });
+    }
+};
+export default InputValidator;