@djb25/digit-ui-module-ekyc 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@djb25/digit-ui-module-ekyc",
-    "version": "1.0.5",
+    "version": "1.0.6",
     "description": "Digit UI Module for Ekyc",
     "main": "dist/index.js",
     "module": "dist/index.modern.js",

package/src/components/DesktopInbox.js

@@ -54,7 +54,7 @@ const DesktopInbox = ({ tableConfig, filterComponent, ...props }) => {
         accessor: "status",
         Cell: ({ row }) => {
           const status = row.original?.status || "DEFAULT";
-          return <span className={`ekyc-status-tag ${status}`}>{t(`EKYC_STATUS_${status}`)}</span>;
+          return <span className={`ekyc-status-tag ${status}`}>{t(`${status}`)}</span>;
         },
       },
     ],
@@ -66,7 +66,7 @@ const DesktopInbox = ({ tableConfig, filterComponent, ...props }) => {
   }, [data]);
 
   return (
-    <div className="inbox-container">
+    <div className="inbox-container" style={{ paddingBottom: "16px" }}>
       <div className="filters-container">
         {/* Sidebar Title Card */}
         <Card

package/src/components/Filter.js

@@ -25,7 +25,9 @@ const Filter = ({ searchParams, onFilterChange, defaultSearchParams, statusMap,
     };
 
     const onStatusChange = (value) => {
-        localParamChange({ status: value });
+        const newParams = { ..._searchParams, status: value };
+        setSearchParams(newParams);
+        onFilterChange(newParams);
     };
 
     return (
@@ -43,9 +45,8 @@ const Filter = ({ searchParams, onFilterChange, defaultSearchParams, statusMap,
                 <Dropdown
                     option={[
                         { label: t("EKYC_STATUS_ALL"), value: "" },
-                        { label: t("EKYC_STATUS_COMPLETED"), value: "COMPLETED" },
-                        { label: t("EKYC_STATUS_PENDING"), value: "PENDING" },
-                        { label: t("EKYC_STATUS_REJECTED"), value: "REJECTED" },
+                        { label: t("EKYC_STATUS_ACTIVE"), value: "ACTIVE" },
+                        { label: t("EKYC_STATUS_PENDING"), value: "PENDING START" },
                     ]}
                     optionKey="label"
                     select={onStatusChange}

package/src/pages/employee/AadhaarVerification.js

@@ -165,6 +165,9 @@ const AadhaarVerification = () => {
   const [aadhaarLastFour, setAadhaarLastFour] = useState("");
   const [isAadhaarVerified, setIsAadhaarVerified] = useState(false);
   const [isVerifying, setIsVerifying] = useState(false);
+  const [showOtpField, setShowOtpField] = useState(false);
+  const [otp, setOtp] = useState("");
+  const [otpError, setOtpError] = useState(false);
   const [nameCorrect, setNameCorrect] = useState({ code: "NO", name: "CORE_COMMON_NO" });
   const [userName, setUserName] = useState(details.consumerName || "");
 
@@ -186,17 +189,27 @@ const AadhaarVerification = () => {
 
   // ── Handlers ──
   const handleVerifyAadhaar = () => {
-    if (aadhaarLastFour.length !== 4 || isVerifying) return;
+    if (aadhaarLastFour.length !== 12 || isVerifying) return;
     setIsVerifying(true);
     setTimeout(() => {
       setIsVerifying(false);
+      setShowOtpField(true);
+    }, 1200);
+  };
+
+  const handleVerifyOtp = () => {
+    if (otp === "123456") {
       setIsAadhaarVerified(true);
+      setShowOtpField(false);
+      setOtpError(false);
       // Auto-expand address section upon verification
       setShowAddressSection(true);
       setTimeout(() => {
         addressSectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
       }, 100);
-    }, 1200);
+    } else {
+      setOtpError(true);
+    }
   };
 
   const handleSaveAndContinue = () => {
@@ -371,17 +384,53 @@ const AadhaarVerification = () => {
             </div>
           </LabelFieldPair>
 
-          {!isAadhaarVerified && (
+          {!isAadhaarVerified && !showOtpField && (
             <SubmitBar
               label={isVerifying
                 ? t("EKYC_VERIFYING") || "Verifying..."
                 : t("EKYC_VERIFY_AADHAAR_BTN") || "Verify Aadhaar"}
               onSubmit={handleVerifyAadhaar}
-              disabled={aadhaarLastFour.length !== 4 || isVerifying}
+              disabled={aadhaarLastFour.length !== 12 || isVerifying}
               style={{ marginTop: "12px" }}
             />
           )}
 
+          {!isAadhaarVerified && showOtpField && (
+            <Fragment>
+              <div className="ekyc-field-label" style={{ marginTop: "16px" }}>
+                {t("EKYC_ENTER_OTP") || "Enter OTP"}
+              </div>
+              <LabelFieldPair>
+                <div className="field">
+                  <IconInput
+                    icon={<LockIcon size={15} />}
+                    value={otp}
+                    onChange={(e) => {
+                      const val = e.target.value;
+                      if (/^\d*$/.test(val)) {
+                        setOtp(val);
+                        if (otpError) setOtpError(false);
+                      }
+                    }}
+                    placeholder={t("EKYC_ENTER_OTP_PLACEHOLDER") || "Enter 123456"}
+                    maxLength={6}
+                  />
+                </div>
+              </LabelFieldPair>
+              {otpError && (
+                <div style={{ color: "#D4351C", fontSize: "12px", marginTop: "4px" }}>
+                  {t("EKYC_INVALID_OTP") || "Invalid OTP. Please enter 123456."}
+                </div>
+              )}
+              <SubmitBar
+                label={t("EKYC_VERIFY_OTP_BTN") || "Verify OTP"}
+                onSubmit={handleVerifyOtp}
+                disabled={otp.length !== 6}
+                style={{ marginTop: "12px" }}
+              />
+            </Fragment>
+          )}
+
           {isAadhaarVerified && (
             <div style={styles.verifiedCard}>
               <div style={{ display: "flex", alignItems: "center", gap: "8px", marginBottom: "14px" }}>
@@ -404,7 +453,7 @@ const AadhaarVerification = () => {
                 </div>
                 <div>
                   <div style={styles.infoLabel}>{t("EKYC_AADHAAR") || "Aadhaar"}</div>
-                  <div style={styles.infoValue}>XXXX XXXX {aadhaarLastFour}</div>
+                  <div style={styles.infoValue}>{aadhaarLastFour}</div>
                 </div>
                 <div style={{ gridColumn: "span 2" }}>
                   <div style={styles.infoLabel}>{t("EKYC_ADDRESS") || "Address"}</div>

package/src/pages/employee/AddressDetails.js

@@ -278,7 +278,7 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
 
   const handleUseCurrentLocation = () => {
     if (!("geolocation" in navigator)) {
-      alert(t("GEOLOCATION_NOT_SUPPORTED") || "Geolocation is not supported by your browser");
+      alert(t("GEOLOCATION_NOT_SUPPORTED"));
       return;
     }
     setIsLocationFetching(true);
@@ -306,7 +306,7 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
       (err) => {
         console.error("Geolocation error:", err);
         setIsLocationFetching(false);
-        alert(t("LOCATION_FETCH_FAILED") || "Failed to fetch location. Please grant location permissions.");
+        alert(t("LOCATION_FETCH_FAILED"));
       },
       { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
     );
@@ -318,7 +318,7 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
       {/* ── Address Type Toggle ── */}
       <SectionHead
         icon={<LocationIcon className="icon" styles={{ fill: "#0B0C0C", width: "16px", height: "16px" }} />}
-        label={t("EKYC_ADDRESS_DETAILS_HEADER") || "Address Details"}
+        label={t("EKYC_ADDRESS_DETAILS_HEADER")}
       />
 
       <div style={{ marginBottom: "20px" }}>
@@ -350,7 +350,7 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
             <LocationIcon className="icon" styles={{ fill: "#085041", width: "16px", height: "16px" }} />
           </div>
           <div style={{ fontSize: "14px", lineHeight: "1.6", color: "#04342C", fontWeight: "500" }}>
-            {addrDetails.fullAddress || "H.No. 123, Sector 15, Rohini, Delhi – 110085"}
+            {addrDetails.fullAddress}
           </div>
         </div>
       )}
@@ -362,7 +362,7 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
           {/* Correction toggle */}
           <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "14px" }}>
             <CardLabel style={{ fontWeight: "500", marginBottom: 0, fontSize: "13px", color: "#505A5F" }}>
-              {t("EKYC_ADDRESS_CORRECTION_PROMPT") || "Correct the address?"}
+              {t("EKYC_ADDRESS_CORRECTION_PROMPT")}
             </CardLabel>
             <RadioButtons
               options={yesNoOptions}
@@ -408,8 +408,8 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
               </div>
               <span style={{ fontWeight: "500", fontSize: "14px", color: "#344054" }}>
                 {isLocationFetching
-                  ? t("EKYC_FETCHING_LOCATION") || "Fetching location..."
-                  : t("EKYC_USE_CURRENT_LOCATION") || "Use current location"}
+                  ? t("EKYC_FETCHING_LOCATION")
+                  : t("EKYC_USE_CURRENT_LOCATION")}
               </span>
             </div>
             {!isLocationFetching && (
@@ -420,14 +420,14 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
           {/* Full Address (textarea-style) */}
           <div style={{ marginBottom: "14px" }}>
             <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-              {t("EKYC_FULL_ADDRESS") || "Full address"}
+              {t("EKYC_FULL_ADDRESS")}
             </div>
             <IconInput
               icon={<PropertyHouse styles={{ fill: "#0068fa", width: "15px", height: "15px" }} />}
               topAligned
               value={fullAddress}
               onChange={(e) => setFullAddress(e.target.value)}
-              placeholder={t("EKYC_ENTER_FULL_ADDRESS") || "Enter full address"}
+              placeholder={t("EKYC_ENTER_FULL_ADDRESS")}
               inputStyle={{ minHeight: "72px" }}
             />
           </div>
@@ -436,24 +436,24 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
           <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px", marginBottom: "14px" }}>
             <div>
               <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-                {t("EKYC_FLAT_HOUSE_NUMBER") || "Flat / House no."}
+                {t("EKYC_FLAT_HOUSE_NUMBER")}
               </div>
               <IconInput
                 icon={<PropertyHouse styles={{ fill: "#0068fa", width: "15px", height: "15px" }} />}
                 value={flatNo}
                 onChange={(e) => setFlatNo(e.target.value)}
-                placeholder={t("EKYC_ENTER_FLAT_NO") || "e.g. 45-B"}
+                placeholder={t("EKYC_ENTER_FLAT_NO")}
               />
             </div>
             <div>
               <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-                {t("EKYC_BUILDING_TOWER") || "Building / Tower"}
+                {t("EKYC_BUILDING_TOWER")}
               </div>
               <IconInput
                 icon={<PropertyHouse styles={{ fill: "#0068fa", width: "15px", height: "15px" }} />}
                 value={building}
                 onChange={(e) => setBuilding(e.target.value)}
-                placeholder={t("EKYC_ENTER_BUILDING") || "e.g. Tower 4"}
+                placeholder={t("EKYC_ENTER_BUILDING")}
               />
             </div>
           </div>
@@ -462,24 +462,24 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
           <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px", marginBottom: "4px" }}>
             <div>
               <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-                {t("EKYC_LANDMARK") || "Landmark"}
+                {t("EKYC_LANDMARK")}
               </div>
               <IconInput
                 icon={<LocationIcon className="icon" styles={{ fill: "#0068fa", width: "15px", height: "15px" }} />}
                 value={landmark}
                 onChange={(e) => setLandmark(e.target.value)}
-                placeholder={t("EKYC_ENTER_LANDMARK") || "Near Central Park"}
+                placeholder={t("EKYC_ENTER_LANDMARK")}
               />
             </div>
             <div>
               <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-                {t("EKYC_PINCODE") || "Pincode"}
+                {t("EKYC_PINCODE")}
               </div>
               <IconInput
                 icon={<PincodeIcon size={15} />}
                 value={pincode}
                 onChange={(e) => { if (/^\d*$/.test(e.target.value)) setPincode(e.target.value); }}
-                placeholder={t("EKYC_ENTER_PINCODE") || "6-digit pincode"}
+                placeholder={t("EKYC_ENTER_PINCODE")}
                 maxLength={6}
               />
             </div>
@@ -492,14 +492,14 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
       {/* ── Administrative Division ── */}
       <SectionHead
         icon={<PropertyHouse styles={{ fill: "#0B0C0C", width: "16px", height: "16px" }} />}
-        label={t("EKYC_ADMINISTRATIVE_DIVISION") || "Administrative Division"}
+        label={t("EKYC_ADMINISTRATIVE_DIVISION")}
       />
 
       {isMdmsLoading ? <Loader /> : (
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px", marginBottom: "24px" }}>
           <div>
             <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-              {t("EKYC_ASSEMBLY") || "Assembly Constituency"}
+              {t("EKYC_ASSEMBLY")}
             </div>
             <Dropdown
               option={assemblies}
@@ -530,11 +530,11 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
       {/* ── Door Photo ── */}
       <SectionHead
         icon={<CameraIcon size={16} />}
-        label={t("EKYC_DOOR_PHOTO_HEADER") || "Door photo with GPS stamp"}
+        label={t("EKYC_DOOR_PHOTO_HEADER")}
       />
 
       <div style={{ fontSize: "12px", color: "#667085", marginBottom: "12px" }}>
-        {t("EKYC_REQUIRED_FOR_VERIFICATION") || "Required for verification"}
+        {t("EKYC_REQUIRED_FOR_VERIFICATION")}
       </div>
 
       {/* Warning banner */}
@@ -553,10 +553,10 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
         </div>
         <div>
           <div style={{ fontWeight: "600", color: "#B54708", fontSize: "13px", marginBottom: "2px" }}>
-            {t("EKYC_IMPORTANT") || "Important"}
+            {t("EKYC_IMPORTANT")}
           </div>
           <div style={{ fontSize: "12px", color: "#92400E" }}>
-            {t("EKYC_CAPTURE_LIVE_CAMERA") || "Capture with live camera for GPS metadata"}
+            {t("EKYC_CAPTURE_LIVE_CAMERA")}
           </div>
         </div>
       </div>
@@ -602,7 +602,7 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
               {t("EKYC_TAP_TO_CAPTURE") || "Tap to capture"}
             </div>
             <div style={{ fontSize: "12px", color: "#667085" }}>
-              {t("EKYC_CAPTURE_DOOR_IMAGE") || "Capture door image"}
+              {t("EKYC_CAPTURE_DOOR_IMAGE")}
             </div>
           </>
         ) : (
@@ -622,7 +622,7 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
                 cursor: "pointer", fontSize: "12px", color: "#D92D20", fontWeight: "500",
               }}
             >
-              <TrashIcon size={13} /> {t("EKYC_REMOVE") || "Remove"}
+              <TrashIcon size={13} /> {t("EKYC_REMOVE")}
             </button>
           </>
         )}
@@ -632,14 +632,14 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
       {isSection ? (
         <div style={{ marginTop: "24px" }}>
           <SubmitBar
-            label={t("EKYC_COMPLETE_VERIFICATION_AND_PROCEED") || "Complete & Proceed"}
+            label={t("EKYC_COMPLETE_VERIFICATION_AND_PROCEED")}
             onSubmit={handleCompleteVerification}
           />
         </div>
       ) : (
         <ActionBar>
           <SubmitBar
-            label={t("EKYC_COMPLETE_VERIFICATION") || "Complete Verification"}
+            label={t("EKYC_COMPLETE_VERIFICATION")}
             onSubmit={handleCompleteVerification}
           />
         </ActionBar>
@@ -655,7 +655,7 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
           <rect x="3" y="11" width="18" height="11" rx="2" />
           <path d="M7 11V7a5 5 0 0 1 10 0v4" />
         </svg>
-        {t("EKYC_SECURE_DATA_NOTICE") || "Your data is encrypted and secure"}
+        {t("EKYC_SECURE_DATA_NOTICE")}
       </div>
     </div>
   );

package/src/pages/employee/Inbox.js

@@ -90,10 +90,9 @@ const Inbox = ({
             name: "status",
             type: "dropdown",
             options: [
-                { label: t("CHOOSE_STATUS"), value: "" },
-                { label: t("EKYC_STATUS_COMPLETED"), value: "COMPLETED" },
-                { label: t("EKYC_STATUS_PENDING"), value: "PENDING" },
-                { label: t("EKYC_STATUS_REJECTED"), value: "REJECTED" },
+                { label: t("EKYC_STATUS_ALL"), value: "" },
+                { label: t("EKYC_STATUS_ACTIVE"), value: "ACTIVE" },
+                { label: t("EKYC_STATUS_PENDING"), value: "PENDING START" },
             ],
             optionsKey: "label"
         },

package/src/pages/employee/PropertyInfo.js

@@ -366,20 +366,34 @@ const PropertyInfo = () => {
                                 </div>
                                 <input type="file" ref={fileRef} accept=".pdf" style={{ display: "none" }} onChange={handleFileUpload} />
                                 <div
-                                    onClick={() => fileRef.current.click()}
-                                    onMouseOver={(e) => e.currentTarget.style.borderColor = "#185FA5"}
-                                    onMouseOut={(e) => e.currentTarget.style.borderColor = "#B5D4F4"}
+                                    onClick={() => pidNumber && fileRef.current.click()}
+                                    onMouseOver={(e) => { if (pidNumber) e.currentTarget.style.borderColor = "#185FA5"; }}
+                                    onMouseOut={(e) => { if (pidNumber) e.currentTarget.style.borderColor = "#B5D4F4"; }}
                                     style={{
-                                        border: "1.5px dashed #B5D4F4", borderRadius: "10px",
-                                        padding: "28px 20px", textAlign: "center", cursor: "pointer",
-                                        backgroundColor: "#E6F1FB", minHeight: "160px",
-                                        display: "flex", flexDirection: "column",
-                                        alignItems: "center", justifyContent: "center", gap: "10px",
-                                        transition: "border-color 0.15s",
+                                        border: pidNumber ? "1.5px dashed #B5D4F4" : "1.5px dashed #D0D5DD",
+                                        borderRadius: "10px",
+                                        padding: "28px 20px",
+                                        textAlign: "center",
+                                        cursor: pidNumber ? "pointer" : "not-allowed",
+                                        backgroundColor: pidNumber ? "#E6F1FB" : "#F9FAFB",
+                                        minHeight: "160px",
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        gap: "10px",
+                                        transition: "all 0.15s",
+                                        opacity: pidNumber ? 1 : 0.6,
                                     }}
                                 >
-                                    <div style={{ background: "#fff", padding: "10px", borderRadius: "10px", display: "flex" }}>
-                                        <svg width="32" height="32" viewBox="0 0 24 24" fill="#185FA5">
+                                    <div style={{
+                                        background: pidNumber ? "#fff" : "#EAECF0",
+                                        padding: "10px",
+                                        borderRadius: "10px",
+                                        display: "flex",
+                                        filter: pidNumber ? "none" : "grayscale(100%)"
+                                    }}>
+                                        <svg width="32" height="32" viewBox="0 0 24 24" fill={pidNumber ? "#185FA5" : "#98A2B3"}>
                                             <path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13z" />
                                             <path d="M12 18v-4M12 14l-2 2M12 14l2 2" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" />
                                         </svg>
@@ -390,10 +404,10 @@ const PropertyInfo = () => {
                                         </div>
                                     ) : (
                                         <>
-                                            <div style={{ fontSize: "13px", fontWeight: "600", color: "#185FA5" }}>
-                                                {t("EKYC_UPLOAD_PROPERTY_DOC_CTA") || "Tap to upload"}
+                                            <div style={{ fontSize: "13px", fontWeight: "600", color: pidNumber ? "#185FA5" : "#98A2B3" }}>
+                                                {pidNumber ? (t("EKYC_UPLOAD_PROPERTY_DOC_CTA") || "Tap to upload") : (t("EKYC_ENTER_PID_FIRST_CTA") || "Enter PID to upload")}
                                             </div>
-                                            <div style={{ fontSize: "12px", color: "#378ADD" }}>PDF only</div>
+                                            <div style={{ fontSize: "12px", color: pidNumber ? "#378ADD" : "#98A2B3" }}>{pidNumber ? "PDF | Max 5MB" : "Requires PID"}</div>
                                         </>
                                     )}
                                 </div>
@@ -431,6 +445,9 @@ const PropertyInfo = () => {
                                             <div style={{ fontSize: "12px", color: "#667085", marginTop: "2px" }}>
                                                 {t("EKYC_BUILDING_PHOTO") || "Building photo with GPS"}
                                             </div>
+                                            <div style={{ fontSize: "11px", color: "#98A2B3", marginTop: "2px" }}>
+                                                JPG, PNG | Max 2MB
+                                            </div>
                                         </>
                                     ) : (
                                         <>

package/src/pages/employee/Review.js

@@ -1,10 +1,11 @@
-import React, { Fragment } from "react";
+import React, { Fragment, useState } from "react";
 import {
   Card,
   CardHeader,
   SubmitBar,
   HomeIcon,
   ActionBar,
+  Toast,
 } from "@djb25/digit-ui-react-components";
 import { useTranslation } from "react-i18next";
 import { useHistory, useLocation } from "react-router-dom";
@@ -133,8 +134,89 @@ const Review = () => {
     propertyDetails = {},
   } = location.state || {};
 
-  const handleSubmit = () => {
-    history.push("/digit-ui/employee/ekyc/dashboard");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [toast, setToast] = useState(null);
+
+  // ── Helper: upload a File object to Filestore ──────────────────────────────
+  const uploadFile = async (file, tenantId) => {
+    if (!file) return null;
+    const res = await Digit.UploadServices.Filestorage("EKYC", file, tenantId);
+    return res?.data?.files?.[0]?.fileStoreId || null;
+  };
+
+  // ── Helper: convert a data-URL (base64 string) to a File blob ─────────────
+  const dataUrlToFile = (dataUrl, filename) => {
+    const arr = dataUrl.split(",");
+    const mime = arr[0].match(/:(.*?);/)[1];
+    const bstr = atob(arr[1]);
+    let n = bstr.length;
+    const u8arr = new Uint8Array(n);
+    while (n--) u8arr[n] = bstr.charCodeAt(n);
+    return new File([u8arr], filename, { type: mime });
+  };
+
+  const handleSubmit = async () => {
+    setIsSubmitting(true);
+    setToast(null);
+    try {
+      const tenantId = Digit.ULBService.getCurrentTenantId() || "dl.djb";
+      const userInfo = Digit.UserService.getUser()?.info || {};
+
+      // ── 1. Upload property document (PDF File object) ──────────────────────
+      const propertyDocFile = propertyDetails.propertyDocument || null; // File object from <input>
+      const propertyDocFileStoreId = await uploadFile(propertyDocFile, tenantId);
+
+      // ── 2. Upload building photo (data-URL string from camera capture) ─────
+      let buildingImageFileStoreId = null;
+      if (propertyDetails.buildingPhoto) {
+        const photoFile = dataUrlToFile(propertyDetails.buildingPhoto, "building_photo.jpg");
+        buildingImageFileStoreId = await uploadFile(photoFile, tenantId);
+      }
+
+      // ── 3. Build request payload ───────────────────────────────────────────
+      const requestBody = {
+        RequestInfo: {
+          apiId: "Rainmaker",
+          ver: "1.0",
+          msgId: `${Date.now()}|${navigator.language || "en_IN"}`,
+          tenantId,
+          authToken: userInfo.access_token || Digit.UserService.getUser()?.access_token || "",
+        },
+        updateType: "PROPERTY",
+        kno: kNumber,
+        pidNumber: propertyDetails.pidNumber || null,
+        propertyDocumentFileStoreId: propertyDocFileStoreId,
+        buildingImageFileStoreId: buildingImageFileStoreId,
+        userType: propertyDetails.userType?.value || null,
+        noOfFloor: propertyDetails.noOfFloors?.value ? parseInt(propertyDetails.noOfFloors.value, 10) : null,
+        typeOfConnection: propertyDetails.connectionCategory?.value || null,
+        connectionCategory: propertyDetails.connectionType?.value || null,
+        modifiedBy: userInfo.name || userInfo.userName || null,
+      };
+
+      // ── 4. Call the update API ─────────────────────────────────────────────
+      await Digit.CustomService.getResponse({
+        url: "/ekyc-service/user/application/_update",
+        params: { tenantId },
+        body: requestBody,
+        useCache: false,
+        method: "POST",
+      });
+
+      setToast({ type: "success", message: t("EKYC_SUBMIT_SUCCESS") || "Application submitted successfully!" });
+      setTimeout(() => {
+        history.push("/digit-ui/employee/ekyc/dashboard");
+      }, 1800);
+    } catch (err) {
+      console.error("eKYC Submit Error:", err);
+      setToast({
+        type: "error",
+        message: err?.response?.data?.Errors?.[0]?.message ||
+          t("EKYC_SUBMIT_ERROR") || "Submission failed. Please try again.",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   const handleEditAadhaar = () => {
@@ -150,6 +232,7 @@ const Review = () => {
   };
 
   return (
+    <Fragment>
     <div className="inbox-container">
       <style>{`
         @keyframes fadeSlideIn {
@@ -259,7 +342,7 @@ const Review = () => {
               editLabel={t("CS_COMMON_EDIT") || "Edit"}
               rows={[
                 { label: t("EKYC_NAME") || "Name", value: aadhaarDetails.userName || "Rajesh Kumar Singh" },
-                { label: t("EKYC_AADHAAR") || "Aadhaar no.", value: aadhaarDetails.aadhaarLastFour ? `XXXX XXXX ${aadhaarDetails.aadhaarLastFour}` : "XXXX XXXX 1234" },
+                { label: t("EKYC_AADHAAR") || "Aadhaar no.", value: aadhaarDetails.aadhaarLastFour ? `${aadhaarDetails.aadhaarLastFour}` : "XXXX XXXX 1234" },
                 { label: t("EKYC_MOBILE_NO") || "Mobile no.", value: aadhaarDetails.mobileNumber || "XXXXXXXXXX" },
                 { label: t("EKYC_EMAIL_ADDRESS") || "Email", value: aadhaarDetails.email || null },
               ]}
@@ -317,8 +400,12 @@ const Review = () => {
           {/* Submit (Non-sticky, at form end) */}
           <div style={{ marginTop: "24px" }}>
             <SubmitBar
-              label={t("ES_COMMON_SUBMIT") || "Submit"}
+              label={isSubmitting
+                ? (t("EKYC_SUBMITTING") || "Submitting...")
+                : (t("ES_COMMON_SUBMIT") || "Submit")
+              }
               onSubmit={handleSubmit}
+              disabled={isSubmitting}
             />
           </div>
 
@@ -338,6 +425,17 @@ const Review = () => {
         </Card>
       </div>
     </div>
+
+    {/* Toast notification */}
+    {toast && (
+      <Toast
+        label={toast.message}
+        error={toast.type === "error"}
+        success={toast.type === "success"}
+        onClose={() => setToast(null)}
+      />
+    )}
+    </Fragment>
   );
 };