@ramesesinc/app-forms 0.1.0

package/dist/components/AppContactForm.d.ts

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

package/dist/components/AppContactForm.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@ramesesinc/client";
+import InputValidator from "./common/InputValidator";
+const AppContactForm = (props) => {
+    var _a;
+    const { wizard } = (_a = props.params) !== null && _a !== void 0 ? _a : {};
+    return (
+    // <div className="bg-gray-50 p-4">
+    _jsxs("div", { className: "mx-auto bg-white px-4", children: [_jsx("h1", { className: "text-lg font-bold text-green-600 mb-6", children: "Email Verification" }), _jsx("p", { className: "text-gray-700 mb-8 leading-relaxed", children: "A validation key will be sent to your email. Please make sure your email is valid and you have access to it." }), _jsxs("div", { className: "space-y-6 flex flex-col gap-2 my-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-gray-600 text-sm mb-2", children: "Full Name *" }), _jsx(InputValidator, { datatype: "string", value: wizard.getValue("fullname"), onChange: (val) => wizard.setValue("fullname", val), className: "w-full px-2 border-b-2 border-gray-300 transition-colors text-gray-600" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-gray-600 text-sm mb-2", children: "Address *" }), _jsx(InputValidator, { datatype: "string", value: wizard.getValue("address"), onChange: (val) => wizard.setValue("address", val), className: "w-full px-2 border-b-2 border-gray-300 transition-colors text-gray-600" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-gray-600 text-sm mb-2", children: "Email Address" }), _jsx(InputValidator, { datatype: "email", value: wizard.getValue("emailaddress"), onChange: (val) => wizard.setValue("emailaddress", val), className: "w-full px-2 border-b-2 border-gray-300 transition-colors text-gray-600" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-gray-600 text-sm mb-2", children: "Mobile No." }), _jsx(InputValidator, { datatype: "mobilenumber", value: wizard.getValue("mobileno"), onChange: (val) => wizard.setValue("mobileno", val), className: "w-full px-2 border-b-2 border-gray-300 transition-colors text-gray-600" })] })] }), _jsxs("div", { className: "flex flex-row justify-between gap-4 py-4 border-t border-slate-200", children: [_jsx("div", { className: "w-[120px]", children: wizard.hasPrev() && (_jsx(Button, { variant: "secondary", size: "lg", type: "button", onClick: wizard.prev, children: "Prev" })) }), _jsx("div", { className: "w-[120px] flex justify-end", children: wizard.hasNext() && (_jsx(Button, { variant: "primary", size: "lg", type: "button", onClick: wizard.next, children: "Next" })) })] })] })
+    // </div>
+    );
+};
+export default AppContactForm;

package/dist/components/AppContactForm.tsx

@@ -0,0 +1,80 @@
+import { Button } from "@ramesesinc/client";
+import InputValidator from "./common/InputValidator";
+
+const AppContactForm = (props: any) => {
+  const { wizard } = props.params ?? {};
+
+  return (
+    // <div className="bg-gray-50 p-4">
+    <div className="mx-auto bg-white px-4">
+      <h1 className="text-lg font-bold text-green-600 mb-6">Email Verification</h1>
+
+      <p className="text-gray-700 mb-8 leading-relaxed">
+        A validation key will be sent to your email. Please make sure your email is valid and you have access to it.
+      </p>
+
+      <div className="space-y-6 flex flex-col gap-2 my-4">
+        <div>
+          <label className="block text-gray-600 text-sm mb-2">Full Name *</label>
+          <InputValidator
+            datatype="string"
+            value={wizard.getValue("fullname")}
+            onChange={(val) => wizard.setValue("fullname", val)}
+            className="w-full px-2 border-b-2 border-gray-300 transition-colors text-gray-600"
+          />
+        </div>
+
+        <div>
+          <label className="block text-gray-600 text-sm mb-2">Address *</label>
+          <InputValidator
+            datatype="string"
+            value={wizard.getValue("address")}
+            onChange={(val) => wizard.setValue("address", val)}
+            className="w-full px-2 border-b-2 border-gray-300 transition-colors text-gray-600"
+          />
+        </div>
+
+        <div>
+          <label className="block text-gray-600 text-sm mb-2">Email Address</label>
+          <InputValidator
+            datatype="email"
+            value={wizard.getValue("emailaddress")}
+            onChange={(val) => wizard.setValue("emailaddress", val)}
+            className="w-full px-2 border-b-2 border-gray-300 transition-colors text-gray-600"
+          />
+        </div>
+
+        <div>
+          <label className="block text-gray-600 text-sm mb-2">Mobile No.</label>
+          <InputValidator
+            datatype="mobilenumber"
+            value={wizard.getValue("mobileno")}
+            onChange={(val) => wizard.setValue("mobileno", val)}
+            className="w-full px-2 border-b-2 border-gray-300 transition-colors text-gray-600"
+          />
+        </div>
+      </div>
+
+      <div className="flex flex-row justify-between gap-4 py-4 border-t border-slate-200">
+        <div className="w-[120px]">
+          {wizard.hasPrev() && (
+            <Button variant="secondary" size="lg" type="button" onClick={wizard.prev}>
+              Prev
+            </Button>
+          )}
+        </div>
+
+        <div className="w-[120px] flex justify-end">
+          {wizard.hasNext() && (
+            <Button variant="primary" size="lg" type="button" onClick={wizard.next}>
+              Next
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+    // </div>
+  );
+};
+
+export default AppContactForm;

package/dist/components/AppInitForm.js

@@ -0,0 +1,74 @@
+"use strict";
+// import { Button } from "@ramesesinc/client";
+// import { usePageContext } from "@ramesesinc/platform-core";
+// import { useState } from "react";
+// import InputValidator from "./common/InputValidator";
+// const AppInitForm = (props: any) => {
+//   const { tenant, module, data, wizard } = props.params ?? {};
+//   const [mode, setMode] = useState<"select" | "resume">("select");
+//   const showOverlay = mode === "resume";
+//   // const selectedAction = wizard.getValue("name");
+//   // const showOverlay = selectedAction === "Resume Pending Application";
+//   const pageContext = usePageContext();
+//   const partner = pageContext.data;
+//   // console.log(partner);
+//   return (
+//     <div className="px-4">
+//       <h1 className={`text-lg text-green-600 ${showOverlay ? "hidden" : ""}`}>Select an action</h1>
+//       <div>
+//         <div className={showOverlay ? "hidden" : ""}>
+//           <InputValidator
+//             datatype="radio"
+//             options={["Create New Application", "Resume Pending Application"]}
+//             value={wizard.getValue("name")}
+//             onChange={(val) => wizard.setValue("name", val)}
+//             className="gap-2 my-4"
+//           />
+//         </div>
+//         <div className={showOverlay ? "" : "hidden"}>
+//           <label className="block text-gray-600 text-sm mb-2">Tracking No.</label>
+//           <InputValidator
+//             datatype="string"
+//             value={wizard.getValue("trackingno")}
+//             onChange={(val) => wizard.setValue("trackno", val)}
+//             className="w-full px-2 border-b-2 border-gray-300 transition-colors text-gray-600"
+//           />
+//         </div>
+//       </div>
+//       <div className="flex flex-row justify-between gap-4 py-4 border-t border-slate-200">
+//         {!showOverlay ? (
+//           <>
+//             <div className="w-[120px]">
+//               {wizard.hasPrev() && (
+//                 <Button variant="secondary" size="lg" type="button" onClick={wizard.prev}>
+//                   Prev
+//                 </Button>
+//               )}
+//             </div>
+//             <div className="w-[120px] flex justify-end">
+//               {wizard.hasNext() && (
+//                 <Button variant="primary" size="lg" type="button" onClick={() => { if (wizard.getValue("name") === "Resume Pending Application") { setMode("resume"); } else { wizard.next(); } }}>
+//                   Next
+//                 </Button>
+//               )}
+//             </div>
+//           </>
+//         ) : (
+//           <>
+//             <div className="w-[120px]">
+//               <Button variant="secondary" size="lg" type="button" onClick={wizard.cancelWizard}>
+//                   Go Back
+//               </Button>
+//             </div>
+//             <div className="w-[120px] flex justify-end">
+//               <Button variant="primary" size="lg" type="button" onClick={() => wizard.redirect("url", `/partners/negor_tanjay/oscp/building_permit`)}>
+//                 Next
+//               </Button>
+//             </div>
+//           </>
+//         )}
+//       </div>
+//     </div>
+//   );
+// };
+// export default AppInitForm;

package/dist/components/AppInitForm.tsx

@@ -0,0 +1,80 @@
+// import { Button } from "@ramesesinc/client";
+// import { usePageContext } from "@ramesesinc/platform-core";
+// import { useState } from "react";
+// import InputValidator from "./common/InputValidator";
+
+// const AppInitForm = (props: any) => {
+//   const { tenant, module, data, wizard } = props.params ?? {};
+//   const [mode, setMode] = useState<"select" | "resume">("select");
+//   const showOverlay = mode === "resume";
+//   // const selectedAction = wizard.getValue("name");
+//   // const showOverlay = selectedAction === "Resume Pending Application";
+
+//   const pageContext = usePageContext();
+//   const partner = pageContext.data;
+//   // console.log(partner);
+
+//   return (
+//     <div className="px-4">
+//       <h1 className={`text-lg text-green-600 ${showOverlay ? "hidden" : ""}`}>Select an action</h1>
+
+//       <div>
+//         <div className={showOverlay ? "hidden" : ""}>
+//           <InputValidator
+//             datatype="radio"
+//             options={["Create New Application", "Resume Pending Application"]}
+//             value={wizard.getValue("name")}
+//             onChange={(val) => wizard.setValue("name", val)}
+//             className="gap-2 my-4"
+//           />
+//         </div>
+
+//         <div className={showOverlay ? "" : "hidden"}>
+//           <label className="block text-gray-600 text-sm mb-2">Tracking No.</label>
+//           <InputValidator
+//             datatype="string"
+//             value={wizard.getValue("trackingno")}
+//             onChange={(val) => wizard.setValue("trackno", val)}
+//             className="w-full px-2 border-b-2 border-gray-300 transition-colors text-gray-600"
+//           />
+//         </div>
+//       </div>
+
+//       <div className="flex flex-row justify-between gap-4 py-4 border-t border-slate-200">
+//         {!showOverlay ? (
+//           <>
+//             <div className="w-[120px]">
+//               {wizard.hasPrev() && (
+//                 <Button variant="secondary" size="lg" type="button" onClick={wizard.prev}>
+//                   Prev
+//                 </Button>
+//               )}
+//             </div>
+
+//             <div className="w-[120px] flex justify-end">
+//               {wizard.hasNext() && (
+//                 <Button variant="primary" size="lg" type="button" onClick={() => { if (wizard.getValue("name") === "Resume Pending Application") { setMode("resume"); } else { wizard.next(); } }}>
+//                   Next
+//                 </Button>
+//               )}
+//             </div>
+//           </>
+//         ) : (
+//           <>
+//             <div className="w-[120px]">
+//               <Button variant="secondary" size="lg" type="button" onClick={wizard.cancelWizard}>
+//                   Go Back
+//               </Button>
+//             </div>
+//             <div className="w-[120px] flex justify-end">
+//               <Button variant="primary" size="lg" type="button" onClick={() => wizard.redirect("url", `/partners/negor_tanjay/oscp/building_permit`)}>
+//                 Next
+//               </Button>
+//             </div>
+//           </>
+//         )}
+//       </div>
+//     </div>
+//   );
+// };
+// export default AppInitForm;

package/dist/components/AppOtpForm.d.ts

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

package/dist/components/AppOtpForm.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@ramesesinc/client";
+import { useState } from "react";
+import InputValidator from "./common/InputValidator";
+const AppOtpForm = (props) => {
+    var _a;
+    const { wizard } = (_a = props.params) !== null && _a !== void 0 ? _a : {};
+    const [emailCode, setEmailCode] = useState("");
+    const handleResendCode = () => {
+        console.log("Resend code clicked");
+        alert("Verification code has been resent to your email!");
+    };
+    const handleVerify = () => {
+        console.log("Email code:", emailCode);
+        if (emailCode.trim() === "") {
+            alert("Please enter the verification code");
+            return;
+        }
+        alert(`Verifying code: ${emailCode}`);
+    };
+    return (_jsxs("div", { className: "mx-auto bg-white px-4", children: [_jsx("h1", { className: "text-lg font-bold text-green-600 mb-6", children: "Email Verification" }), _jsx("p", { className: "text-gray-700 mb-8 leading-relaxed", children: "Please check your email inbox or spam for the sent 6-digit validation key. If you have not received any email, please click resend code." }), _jsxs("div", { className: "space-y-6 flex flex-col gap-2 my-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-gray-600 text-sm mb-2", children: "OTP Code" }), _jsx(InputValidator, { datatype: "string", value: wizard.getValue("otpcode"), onChange: (val) => wizard.setValue("otpcode", val), 
+                                // placeholder="Email Code"
+                                className: "w-full px-2 border-b-2 border-gray-300 focus:border-green-500 transition-colors text-gray-600" })] }), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { onClick: handleResendCode, className: "text-blue-600 hover:text-blue-800 underline font-medium transition-colors", children: "Resend Code" }) })] }), _jsxs("div", { className: "flex flex-row justify-between gap-4 py-4 border-t border-slate-200", children: [_jsx("div", { className: "w-[120px]", children: wizard.hasPrev() && (_jsx(Button, { variant: "secondary", size: "lg", type: "button", onClick: wizard.prev, children: "Prev" })) }), _jsx("div", { className: "w-[120px] flex justify-end", children: wizard.hasNext() && (_jsx(Button, { variant: "primary", size: "lg", type: "button", onClick: wizard.next, children: "Next" })) })] })] }));
+};
+export default AppOtpForm;

package/dist/components/AppOtpForm.tsx

@@ -0,0 +1,71 @@
+import { Button } from "@ramesesinc/client";
+import { useState } from "react";
+import InputValidator from "./common/InputValidator";
+
+const AppOtpForm = (props: any) => {
+  const { wizard } = props.params ?? {};
+  const [emailCode, setEmailCode] = useState("");
+
+  const handleResendCode = () => {
+    console.log("Resend code clicked");
+    alert("Verification code has been resent to your email!");
+  };
+
+  const handleVerify = () => {
+    console.log("Email code:", emailCode);
+    if (emailCode.trim() === "") {
+      alert("Please enter the verification code");
+      return;
+    }
+    alert(`Verifying code: ${emailCode}`);
+  };
+
+  return (
+    <div className="mx-auto bg-white px-4">
+      <h1 className="text-lg font-bold text-green-600 mb-6">Email Verification</h1>
+
+      <p className="text-gray-700 mb-8 leading-relaxed">
+        Please check your email inbox or spam for the sent 6-digit validation key. If you have not received any email, please click resend code.
+      </p>
+
+      <div className="space-y-6 flex flex-col gap-2 my-4">
+        <div>
+          <label className="block text-gray-600 text-sm mb-2">OTP Code</label>
+          <InputValidator
+            datatype="string"
+            value={wizard.getValue("otpcode")}
+            onChange={(val) => wizard.setValue("otpcode", val)}
+            // placeholder="Email Code"
+            className="w-full px-2 border-b-2 border-gray-300 focus:border-green-500 transition-colors text-gray-600"
+          />
+        </div>
+
+        <div className="flex justify-end">
+          <Button onClick={handleResendCode} className="text-blue-600 hover:text-blue-800 underline font-medium transition-colors">
+            Resend Code
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex flex-row justify-between gap-4 py-4 border-t border-slate-200">
+        <div className="w-[120px]">
+          {wizard.hasPrev() && (
+            <Button variant="secondary" size="lg" type="button" onClick={wizard.prev}>
+              Prev
+            </Button>
+          )}
+        </div>
+
+        <div className="w-[120px] flex justify-end">
+          {wizard.hasNext() && (
+            <Button variant="primary" size="lg" type="button" onClick={wizard.next}>
+              Next
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AppOtpForm;

package/dist/components/AppSaveForm.d.ts

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

package/dist/components/AppSaveForm.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@ramesesinc/client";
+const AppSaveForm = (props) => {
+    var _a;
+    const { wizard } = (_a = props.params) !== null && _a !== void 0 ? _a : {};
+    return (_jsxs("div", { children: ["AppSaveForm", _jsxs("div", { className: "flex flex-row justify-between gap-4 py-4 border-t border-slate-200", children: [_jsx("div", { className: "w-[120px]", children: wizard.hasPrev() && (_jsx(Button, { variant: "secondary", size: "lg", type: "button", onClick: wizard.prev, children: "Prev" })) }), _jsx("div", { className: "w-[120px] flex justify-end", children: wizard.hasNext() && (_jsx(Button, { variant: "primary", size: "lg", type: "button", onClick: wizard.next, children: "Next" })) })] })] }));
+};
+export default AppSaveForm;

package/dist/components/AppSaveForm.tsx

@@ -0,0 +1,29 @@
+import { Button } from "@ramesesinc/client";
+const AppSaveForm = (props: any) => {
+  const { wizard } = props.params ?? {};
+
+  return (
+    <div>
+      AppSaveForm
+      <div className="flex flex-row justify-between gap-4 py-4 border-t border-slate-200">
+        <div className="w-[120px]">
+          {wizard.hasPrev() && (
+            <Button variant="secondary" size="lg" type="button" onClick={wizard.prev}>
+              Prev
+            </Button>
+          )}
+        </div>
+
+        <div className="w-[120px] flex justify-end">
+          {wizard.hasNext() && (
+            <Button variant="primary" size="lg" type="button" onClick={wizard.next}>
+              Next
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AppSaveForm;

package/dist/components/ApplicantInfo.d.ts

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

package/dist/components/ApplicantInfo.js

@@ -0,0 +1,29 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import InputValidator from "./common/InputValidator";
+const ApplicantForm = (props) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { data, setData } = (_a = props.params) !== null && _a !== void 0 ? _a : {};
+    if (!data || !data.applicant)
+        return null;
+    const { applicant, trackingno } = data;
+    // update root-level fields
+    const setRoot = (field, value) => setData((prev) => (Object.assign(Object.assign({}, prev), { [field]: value })));
+    // update applicant fields
+    const setApplicant = (field, value) => setData((prev) => (Object.assign(Object.assign({}, prev), { applicant: Object.assign(Object.assign({}, prev.applicant), { [field]: value }) })));
+    return (_jsxs("div", { children: [_jsxs("p", { className: "text-sm text-gray-600 px-6 py-2", children: ["Tracking No: ", trackingno !== null && trackingno !== void 0 ? trackingno : "-"] }), _jsxs("div", { className: "px-6", children: [_jsx("h2", { className: "text-lg font-semibold text-green-600 mb-6", children: "Building Applicant Details" }), _jsx("label", { className: "block text-sm text-gray-600 mb-2", children: "Type of Applicant" }), _jsx(InputValidator, { datatype: "list", value: (_b = data.typeOfApplicant) !== null && _b !== void 0 ? _b : "Individual", options: ["Individual", "Corporation", "Partnership", "Cooperative"], onChange: (v) => setRoot("typeOfApplicant", v), className: "w-full border-b border-gray-300 focus:border-blue-500" }), _jsx("label", { className: "block text-sm text-gray-600 mb-2", children: "Name" }), _jsx(InputValidator, { datatype: "string", value: (_c = applicant.fullname) !== null && _c !== void 0 ? _c : "", onChange: (v) => setApplicant("fullname", v), className: "w-full border-b border-gray-300 focus:border-blue-500 mb-6" }), _jsx("h3", { className: "text-base font-semibold text-gray-900 mb-4", children: "Administrator / Contact Name" }), _jsx("div", { className: "grid grid-cols-1 gap-4 mb-6", children: [
+                            ["Last Name *", "lastname"],
+                            ["First Name *", "firstname"],
+                            ["Middle Name", "middlename"],
+                            ["TIN", "tin"],
+                            ["Email *", "email"],
+                            ["Mobile *", "mobileno"],
+                            ["Phone", "phoneno"],
+                        ].map(([label, field]) => {
+                            var _a;
+                            return (_jsxs("div", { children: [_jsx("label", { className: "block text-xs text-gray-500 mb-1", children: label }), _jsx(InputValidator, { datatype: "string", value: (_a = applicant[field]) !== null && _a !== void 0 ? _a : "", onChange: (v) => setApplicant(field, v), className: "w-full border-b border-gray-300 focus:border-blue-500" })] }, field));
+                        }) }), _jsx("h3", { className: "text-base font-semibold text-gray-900 mb-4", children: "Applicant Address" }), _jsx(InputValidator, { datatype: "boolean", label: "Resident", value: (_d = data.isResident) !== null && _d !== void 0 ? _d : false, onChange: (v) => setRoot("isResident", v), className: "mb-4" }), _jsx("label", { className: "block text-xs text-gray-500 mb-1", children: "Address" }), _jsx(InputValidator, { datatype: "string", value: (_e = applicant.address) !== null && _e !== void 0 ? _e : "", onChange: (v) => setApplicant("address", v), className: "w-full border-b border-gray-300 focus:border-blue-500 mb-6" }), _jsx("h3", { className: "text-base font-semibold text-gray-900 mb-4", children: "Proof of Identity" }), _jsx("label", { className: "block text-xs text-gray-500 mb-1", children: "ID Type *" }), _jsx(InputValidator, { datatype: "list", value: (_f = data.idType) !== null && _f !== void 0 ? _f : "", options: ["Driver's License", "Passport", "SSS ID", "UMID", "PhilHealth ID", "Voter's ID"], onChange: (v) => setRoot("idType", v), className: "w-full border-b border-gray-300 focus:border-blue-500 mb-4" }), ["idNo", "placeIssued"].map((field) => {
+                        var _a;
+                        return (_jsxs("div", { className: "mb-4", children: [_jsx("label", { className: "block text-xs text-gray-500 mb-1", children: field === "idNo" ? "ID No *" : "Place Issued *" }), _jsx(InputValidator, { datatype: "string", value: (_a = data[field]) !== null && _a !== void 0 ? _a : "", onChange: (v) => setRoot(field, v), className: "w-full border-b border-gray-300 focus:border-blue-500" })] }, field));
+                    })] })] }));
+};
+export default ApplicantForm;

package/dist/components/ApplicantInfo.tsx

@@ -0,0 +1,125 @@
+import InputValidator from "./common/InputValidator";
+
+const ApplicantForm = (props: any) => {
+  const { data, setData } = props.params ?? {};
+
+  if (!data || !data.applicant) return null;
+
+  const { applicant, trackingno } = data;
+
+  // update root-level fields
+  const setRoot = (field: string, value: any) =>
+    setData((prev: any) => ({
+      ...prev,
+      [field]: value,
+    }));
+
+  // update applicant fields
+  const setApplicant = (field: string, value: any) =>
+    setData((prev: any) => ({
+      ...prev,
+      applicant: {
+        ...prev.applicant,
+        [field]: value,
+      },
+    }));
+
+  return (
+    <div>
+      <p className="text-sm text-gray-600 px-6 py-2">Tracking No: {trackingno ?? "-"}</p>
+
+      <div className="px-6">
+        <h2 className="text-lg font-semibold text-green-600 mb-6">Building Applicant Details</h2>
+
+        {/* Type */}
+        <label className="block text-sm text-gray-600 mb-2">Type of Applicant</label>
+        <InputValidator
+          datatype="list"
+          value={data.typeOfApplicant ?? "Individual"}
+          options={["Individual", "Corporation", "Partnership", "Cooperative"]}
+          onChange={(v) => setRoot("typeOfApplicant", v)}
+          className="w-full border-b border-gray-300 focus:border-blue-500"
+        />
+
+        {/* Name */}
+        <label className="block text-sm text-gray-600 mb-2">Name</label>
+        <InputValidator
+          datatype="string"
+          value={applicant.fullname ?? ""}
+          onChange={(v) => setApplicant("fullname", v)}
+          className="w-full border-b border-gray-300 focus:border-blue-500 mb-6"
+        />
+
+        {/* Administrator */}
+        <h3 className="text-base font-semibold text-gray-900 mb-4">Administrator / Contact Name</h3>
+
+        <div className="grid grid-cols-1 gap-4 mb-6">
+          {[
+            ["Last Name *", "lastname"],
+            ["First Name *", "firstname"],
+            ["Middle Name", "middlename"],
+            ["TIN", "tin"],
+            ["Email *", "email"],
+            ["Mobile *", "mobileno"],
+            ["Phone", "phoneno"],
+          ].map(([label, field]) => (
+            <div key={field}>
+              <label className="block text-xs text-gray-500 mb-1">{label}</label>
+              <InputValidator
+                datatype="string"
+                value={applicant[field] ?? ""}
+                onChange={(v) => setApplicant(field, v)}
+                className="w-full border-b border-gray-300 focus:border-blue-500"
+              />
+            </div>
+          ))}
+        </div>
+
+        {/* Address */}
+        <h3 className="text-base font-semibold text-gray-900 mb-4">Applicant Address</h3>
+
+        <InputValidator
+          datatype="boolean"
+          label="Resident"
+          value={data.isResident ?? false}
+          onChange={(v) => setRoot("isResident", v)}
+          className="mb-4"
+        />
+
+        <label className="block text-xs text-gray-500 mb-1">Address</label>
+        <InputValidator
+          datatype="string"
+          value={applicant.address ?? ""}
+          onChange={(v) => setApplicant("address", v)}
+          className="w-full border-b border-gray-300 focus:border-blue-500 mb-6"
+        />
+
+        {/* ID */}
+        <h3 className="text-base font-semibold text-gray-900 mb-4">Proof of Identity</h3>
+
+        <label className="block text-xs text-gray-500 mb-1">ID Type *</label>
+        <InputValidator
+          datatype="list"
+          value={data.idType ?? ""}
+          options={["Driver's License", "Passport", "SSS ID", "UMID", "PhilHealth ID", "Voter's ID"]}
+          onChange={(v) => setRoot("idType", v)}
+          className="w-full border-b border-gray-300 focus:border-blue-500 mb-4"
+        />
+
+        {["idNo", "placeIssued"].map((field) => (
+          <div key={field} className="mb-4">
+            <label className="block text-xs text-gray-500 mb-1">{field === "idNo" ? "ID No *" : "Place Issued *"}</label>
+            <InputValidator
+              datatype="string"
+              value={data[field] ?? ""}
+              onChange={(v) => setRoot(field, v)}
+              className="w-full border-b border-gray-300 focus:border-blue-500"
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ApplicantForm;

package/dist/components/HtmlTemplate.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+type HtmlTemplateProps = {
+    id: string;
+    module: string;
+    tenant: string;
+};
+declare const HtmlTemplate: React.FC<HtmlTemplateProps>;
+export default HtmlTemplate;

package/dist/components/HtmlTemplate.js

@@ -0,0 +1,28 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { localAPI } from "@ramesesinc/lib/local-api";
+import { useEffect, useState } from "react";
+const HtmlTemplate = ({ id, module, tenant }) => {
+    const [html, setHtml] = useState("");
+    const [error, setError] = useState(null);
+    console.log("HtmlTemplate props:", { id, module, tenant });
+    useEffect(() => {
+        const fetchHtml = async () => {
+            var _a;
+            try {
+                const mgmt = localAPI.useMgmt(tenant, module);
+                const data = await mgmt.get("html_templates", id);
+                console.log("Fetched HTML Template:", data);
+                setHtml((_a = data === null || data === void 0 ? void 0 : data.htmlCode) !== null && _a !== void 0 ? _a : "");
+            }
+            catch (e) {
+                setHtml("");
+                setError(e.message || "Unknown error");
+            }
+        };
+        fetchHtml();
+    }, [id]);
+    if (error)
+        return (_jsxs("div", { id: id, style: { color: "red" }, children: ["Error: ", error] }));
+    return (_jsx("div", { id: id, children: _jsx("div", { dangerouslySetInnerHTML: { __html: html } }) }));
+};
+export default HtmlTemplate;