@djb25/digit-ui-module-ekyc 1.0.8 → 1.0.9

package/src/pages/employee/AddressDetails.js

@@ -1,773 +1,548 @@
-import React, { useState, useRef, Fragment, useEffect } from "react";
-import {
-  Card,
-  LabelFieldPair,
-  CardLabel,
-  TextInput,
-  SubmitBar,
-  CardHeader,
-  RadioButtons,
-  ActionBar,
-  InfoBannerIcon,
-  PropertyHouse,
-  LocationIcon,
-  HomeIcon,
-  ConnectingCheckPoints,
-  CheckPoint,
-  Dropdown,
-  Loader,
-  UploadFile,
-  Toast,
-} from "@djb25/digit-ui-react-components";
+// import React, { useState, useRef, Fragment, useEffect } from "react";
+// import {
+//   Card,
+//   CardLabel,
+//   TextInput,
+//   SubmitBar,
+//   CardHeader,
+//   RadioButtons,
+//   ActionBar,
+//   Dropdown,
+//   Loader,
+//   UploadFile,
+//   Toast,
+//   FormStep,
+// } from "@djb25/digit-ui-react-components";
+// import { useTranslation } from "react-i18next";
+// import { useHistory, useLocation } from "react-router-dom";
+// import { getSavedData } from "../../utils";
+
+// const AddressDetails = ({ config, onSelect, formData, t: tProps }) => {
+//   const { t } = useTranslation();
+//   const history = useHistory();
+//   const location = useLocation();
+
+//   const flowState = location.state || {};
+//   const { isEditing, kNumber } = flowState;
+
+//   // Robust data extraction from formData (which includes reviewData and edits from EKYCForm)
+//   const activeEdits = formData || {};
+//   const rawReviewData = formData?.reviewData || formData?.connectionDetails || {};
+//   const reviewWrapper = rawReviewData?.applicationReview || rawReviewData;
+//   const applicationData = (Array.isArray(reviewWrapper) ? reviewWrapper[0] : reviewWrapper) || {};
+//   const apiData = applicationData?.newData || applicationData;
+//   const apiAddr = apiData?.addressDetails || apiData || {};
+
+//   const addrData = activeEdits?.addressDetails || {};
+
+//   const [addressType, setAddressType] = useState(addrData.addressType || { code: "AADHAAR", name: "EKYC_AADHAAR_ADDRESS" });
+//   const [correctAddress, setCorrectAddress] = useState(addrData.correctAddress || { code: "NO", name: "CORE_COMMON_NO" });
+//   const [fullAddress, setFullAddress] = useState(addrData.fullAddress || apiAddr.addressRaw || apiAddr.fullAddress || "");
+//   const [flatHouseNumber, setFlatHouseNumber] = useState(addrData.flatHouseNumber || addrData.flatNo || apiAddr.flatHouseNumber || apiAddr.flatNo || "");
+//   const [buildingTower, setBuildingTower] = useState(addrData.buildingTower || addrData.building || apiAddr.buildingTower || apiAddr.building || "");
+//   const [landmark, setLandmark] = useState(addrData.landmark || apiAddr.landmark || "");
+//   const [pinCode, setPinCode] = useState(addrData.pinCode || addrData.pincode || apiAddr.pinCode || apiAddr.pincode || "");
+//   const [doorPhoto, setDoorPhoto] = useState(addrData.doorPhoto || null);
+//   const [doorPhotoFileStoreId, setDoorPhotoFileStoreId] = useState(addrData.doorPhotoFilestoreId || addrData.doorPhotoFileStoreId || apiAddr.doorPhotoFilestoreId || null);
+
+//   const [gpsValid, setGpsValid] = useState(addrData.gpsValid !== undefined ? addrData.gpsValid : (apiAddr.gpsValid !== undefined ? apiAddr.gpsValid : true));
+//   const [latitude, setLatitude] = useState(addrData.latitude || apiAddr.latitude || "");
+//   const [longitude, setLongitude] = useState(addrData.longitude || apiAddr.longitude || "");
+//   const [mobileNo, setMobileNo] = useState(addrData.mobileNo || apiAddr.mobileNo || "");
+//   const [whatsappNo, setWhatsappNo] = useState(addrData.whatsappNo || apiAddr.whatsappNo || "");
+//   const [email, setEmail] = useState(addrData.email || apiAddr.email || "");
+//   const [noOfPerson, setNoOfPerson] = useState(addrData.noOfPerson || apiAddr.noOfPerson || apiAddr.noOfPersons || "");
+//   const [knumber, setKnumber] = useState(addrData.knumber || apiAddr.knumber || apiAddr.kno || kNumber || "");
+
+//   const [toast, setToast] = useState(null);
+
+//   const tenantId = Digit.ULBService.getCurrentTenantId();
+//   const { data: mdmsData, isLoading: isMdmsLoading } = Digit.Hooks.useCommonMDMS(tenantId, "egov-location", ["TenantBoundary"]);
+//   const assemblies = mdmsData?.MdmsRes?.["egov-location"]?.TenantBoundary?.[0]?.boundary?.children || [];
+//   const [assembly, setAssembly] = useState(addrData.assemblyData || (apiAddr.assembly ? { name: apiAddr.assembly } : null));
+//   const [ward, setWard] = useState(addrData.wardData || (apiAddr.ward ? { name: apiAddr.ward } : null));
+
+//   const getUpdatedData = () => ({
+//     addressType,
+//     correctAddress,
+//     fullAddress,
+//     flatHouseNumber,
+//     buildingTower,
+//     landmark,
+//     pinCode,
+//     doorPhoto,
+//     doorPhotoFilestoreId: doorPhotoFileStoreId,
+//     assembly: assembly?.name,
+//     ward: ward?.name,
+//     assemblyData: assembly,
+//     wardData: ward,
+//     gpsValid,
+//     latitude,
+//     longitude,
+//     mobileNo,
+//     whatsappNo,
+//     email,
+//     noOfPerson,
+//     knumber
+//   });
+
+//   const selectphoto = async (e) => {
+//     const file = e.target.files[0];
+//     if (file) {
+//       if (file.size >= 2000000) {
+//         setToast({ type: "error", message: t("EKYC_MAXIMUM_UPLOAD_SIZE_EXCEEDED") });
+//         return;
+//       }
+//       try {
+//         const res = await Digit.UploadServices.Filestorage("EKYC", file, tenantId);
+//         if (res?.data?.files?.[0]?.fileStoreId) {
+//           const fileStoreId = res.data.files[0].fileStoreId;
+//           setDoorPhotoFileStoreId(fileStoreId);
+//           const reader = new FileReader();
+//           reader.onloadend = () => {
+//             setDoorPhoto(reader.result);
+//             if (onSelect) {
+//               onSelect(config.key, { ...getUpdatedData(), doorPhoto: reader.result, doorPhotoFilestoreId: fileStoreId });
+//             }
+//           };
+//           reader.readAsDataURL(file);
+//           setToast({ type: "success", message: t("EKYC_UPLOAD_SUCCESS") });
+//         }
+//       } catch (err) {
+//         setToast({ type: "error", message: t("EKYC_FILE_UPLOAD_ERROR") });
+//       }
+//     }
+//   };
+
+//   const removePhoto = () => {
+//     setDoorPhoto(null);
+//     setDoorPhotoFileStoreId(null);
+//     if (onSelect) {
+//       onSelect(config.key, { ...getUpdatedData(), doorPhoto: null, doorPhotoFilestoreId: null });
+//     }
+//   };
+
+//   const onStepSelect = () => {
+//     const updatedData = getUpdatedData();
+//     if (onSelect) {
+//       onSelect(config.key, updatedData);
+//     } else {
+//       if (isEditing) {
+//         history.push("/digit-ui/employee/ekyc/review", { ...location.state, edits: { ...edits, addressDetails: updatedData } });
+//       } else {
+//         history.push("/digit-ui/employee/ekyc/property-info", {
+//           ...location.state,
+//           edits: { ...edits, addressDetails: updatedData }
+//         });
+//       }
+//     }
+//   };
+
+//   const handleUpdateAndReturn = () => {
+//     history.push("/digit-ui/employee/ekyc/review", { ...location.state, edits: { ...edits, addressDetails: getUpdatedData() } });
+//   };
+
+//   const addressOptions = [
+//     { code: "AADHAAR", name: "EKYC_AADHAAR_ADDRESS" },
+//     { code: "CURRENT", name: "EKYC_CURRENT_ADDRESS" },
+//   ];
+
+//   const yesNoOptions = [
+//     { code: "YES", name: "CORE_COMMON_YES" },
+//     { code: "NO", name: "CORE_COMMON_NO" },
+//   ];
+
+//   if (isMdmsLoading) return <Loader />;
+
+//   return (
+//     <Fragment>
+//       <FormStep t={t} onSelect={onStepSelect} config={config || {}} label={t(config?.texts?.submitBarLabel) || (isEditing ? t("EKYC_UPDATE_AND_RETURN") : t("ES_COMMON_CONTINUE"))}>
+//         <CardLabel>{t("EKYC_ADDRESS_TYPE")}</CardLabel>
+//         <RadioButtons
+//           options={addressOptions}
+//           optionsKey="name"
+//           selectedOption={addressType}
+//           onSelect={setAddressType}
+//         />
+
+//         <CardLabel>{t("EKYC_IS_ADDRESS_CORRECT")}</CardLabel>
+//         <RadioButtons
+//           options={yesNoOptions}
+//           optionsKey="name"
+//           selectedOption={correctAddress}
+//           onSelect={setCorrectAddress}
+//         />
+
+//         {correctAddress?.code === "NO" && (
+//           <Fragment>
+//             <CardLabel>{t("EKYC_FULL_ADDRESS")}</CardLabel>
+//             <TextInput
+//               id="fullAddress"
+//               name="fullAddress"
+//               value={fullAddress}
+//               onChange={(e) => setFullAddress(e.target.value)}
+//               placeholder={t("EKYC_ENTER_FULL_ADDRESS")}
+//             />
+
+//             <CardLabel>{t("EKYC_FLAT_HOUSE_NO")}</CardLabel>
+//             <TextInput
+//               id="flatHouseNumber"
+//               name="flatHouseNumber"
+//               value={flatHouseNumber}
+//               onChange={(e) => setFlatHouseNumber(e.target.value)}
+//               placeholder={t("EKYC_ENTER_FLAT_HOUSE_NO")}
+//             />
+
+//             <CardLabel>{t("EKYC_BUILDING_TOWER")}</CardLabel>
+//             <TextInput
+//               id="buildingTower"
+//               name="buildingTower"
+//               value={buildingTower}
+//               onChange={(e) => setBuildingTower(e.target.value)}
+//               placeholder={t("EKYC_ENTER_BUILDING_TOWER")}
+//             />
+
+//             <CardLabel>{t("EKYC_LANDMARK")}</CardLabel>
+//             <TextInput
+//               id="landmark"
+//               name="landmark"
+//               value={landmark}
+//               onChange={(e) => setLandmark(e.target.value)}
+//               placeholder={t("EKYC_ENTER_LANDMARK")}
+//             />
+
+//             <CardLabel>{t("EKYC_PINCODE")}</CardLabel>
+//             <TextInput
+//               id="pinCode"
+//               name="pinCode"
+//               value={pinCode}
+//               onChange={(e) => setPinCode(e.target.value)}
+//               placeholder={t("EKYC_ENTER_PINCODE")}
+//             />
+//           </Fragment>
+//         )}
+
+//         <CardLabel>{t("EKYC_ASSEMBLY_WARD")}</CardLabel>
+//         <Dropdown
+//           option={assemblies}
+//           optionKey="name"
+//           selected={assembly}
+//           select={setAssembly}
+//           t={t}
+//         />
+
+//         {assembly && (
+//           <Fragment>
+//             <CardLabel>{t("EKYC_WARD")}</CardLabel>
+//             <Dropdown
+//               option={assembly.children || []}
+//               optionKey="name"
+//               selected={ward}
+//               select={setWard}
+//               t={t}
+//             />
+//           </Fragment>
+//         )}
+
+//         <CardLabel>{t("EKYC_GPS_VALID")}</CardLabel>
+//         <RadioButtons
+//           options={[
+//             { code: true, name: "CORE_COMMON_YES" },
+//             { code: false, name: "CORE_COMMON_NO" },
+//           ]}
+//           optionsKey="name"
+//           selectedOption={gpsValid ? { code: true, name: "CORE_COMMON_YES" } : { code: false, name: "CORE_COMMON_NO" }}
+//           onSelect={(val) => setGpsValid(val.code)}
+//         />
+
+//         <CardLabel>{t("EKYC_LATITUDE")}</CardLabel>
+//         <TextInput
+//           id="latitude"
+//           name="latitude"
+//           value={latitude}
+//           onChange={(e) => setLatitude(e.target.value)}
+//           placeholder={t("EKYC_ENTER_LATITUDE")}
+//         />
+
+//         <CardLabel>{t("EKYC_LONGITUDE")}</CardLabel>
+//         <TextInput
+//           id="longitude"
+//           name="longitude"
+//           value={longitude}
+//           onChange={(e) => setLongitude(e.target.value)}
+//           placeholder={t("EKYC_ENTER_LONGITUDE")}
+//         />
+
+//         <CardLabel>{t("EKYC_MOBILE_NO")}</CardLabel>
+//         <TextInput
+//           id="mobileNo"
+//           name="mobileNo"
+//           value={mobileNo}
+//           onChange={(e) => setMobileNo(e.target.value)}
+//           placeholder={t("EKYC_ENTER_MOBILE_NO")}
+//         />
+
+//         <CardLabel>{t("EKYC_WHATSAPP_NO")}</CardLabel>
+//         <TextInput
+//           id="whatsappNo"
+//           name="whatsappNo"
+//           value={whatsappNo}
+//           onChange={(e) => setWhatsappNo(e.target.value)}
+//           placeholder={t("EKYC_ENTER_WHATSAPP_NO")}
+//         />
+
+//         <CardLabel>{t("EKYC_EMAIL")}</CardLabel>
+//         <TextInput
+//           id="email"
+//           name="email"
+//           value={email}
+//           onChange={(e) => setEmail(e.target.value)}
+//           placeholder={t("EKYC_ENTER_EMAIL")}
+//         />
+
+//         <CardLabel>{t("EKYC_NO_OF_PERSONS")}</CardLabel>
+//         <TextInput
+//           id="noOfPerson"
+//           name="noOfPerson"
+//           value={noOfPerson}
+//           onChange={(e) => setNoOfPerson(e.target.value)}
+//           placeholder={t("EKYC_ENTER_NO_OF_PERSONS")}
+//         />
+
+//         <CardLabel>{t("EKYC_K_NUMBER")}</CardLabel>
+//         <TextInput
+//           id="knumber"
+//           name="knumber"
+//           value={knumber}
+//           onChange={(e) => setKnumber(e.target.value)}
+//           placeholder={t("EKYC_ENTER_K_NUMBER")}
+//         />
+
+//         <CardLabel>{t("EKYC_DOOR_PHOTO")}</CardLabel>
+//         <UploadFile
+//           onUpload={selectphoto}
+//           onDelete={removePhoto}
+//           message={doorPhotoFileStoreId ? t("EKYC_FILE_UPLOADED") : t("EKYC_NO_FILE_SELECTED")}
+//         />
+//         {doorPhoto && <img src={doorPhoto} style={{ width: "100%", marginTop: "10px", borderRadius: "8px" }} />}
+
+//         {toast && <Toast label={toast.message} error={toast.type === "error"} onClose={() => setToast(null)} />}
+//       </FormStep>
+//       {isEditing && !onSelect && (
+//         // <ActionBar style={{ position: "static", marginTop: "20px" }}>
+//         <SubmitBar label={t("EKYC_UPDATE_AND_RETURN")} onSubmit={handleUpdateAndReturn} />
+//         // </ActionBar>
+//       )}
+//     </Fragment>
+//   );
+// };
+
+// export default AddressDetails;
+
+import React, { useState, useEffect, Fragment } from "react";
+import { CardLabel, TextInput, Dropdown, UploadFile, Toast, FormStep, Loader } from "@djb25/digit-ui-react-components";
 import { useTranslation } from "react-i18next";
-import { useHistory, useLocation } from "react-router-dom";
-import { getPayloadDiff, getSavedData } from "../../utils";
-
-// ─── Icons ────────────────────────────────────────────────────────────────────
-
-const FlagIcon = ({ size = 20 }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <path d="M14.4 6L13.6 4H5V21H7V14H12.6L13.4 16H20V6H14.4Z" fill="#0F6E56" />
-  </svg>
-);
-
-const IdCardIcon = ({ size = 20 }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <path
-      d="M2 7V17C2 18.1 2.9 19 4 19H20C21.1 19 22 18.1 22 17V7C22 5.9 21.1 5 20 5H4C2.9 5 2 5.9 2 7ZM12 11H14V13H12V11ZM12 7H14V9H12V7ZM16 11H20V13H16V11ZM16 7H20V9H16V7ZM4 7H10V15H4V7ZM20 17H4V16H20V17Z"
-      fill="#185FA5"
-    />
-  </svg>
-);
-
-const CameraIcon = ({ size = 28 }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <path
-      d="M9 2L7.17 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4H16.83L15 2H9ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17ZM12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z"
-      fill="#185FA5"
-    />
-  </svg>
-);
-
-const TargetIcon = ({ size = 20 }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <path
-      d="M12 8C9.79 8 8 9.79 8 12C8 14.21 9.79 16 12 16C14.21 16 16 14.21 16 12C16 9.79 14.21 8 12 8ZM20.94 11C20.48 6.83 17.17 3.52 13 3.06V1H11V3.06C6.83 3.52 3.52 6.83 3.06 11H1V13H3.06C3.52 17.17 6.83 20.48 11 20.94V23H13V20.94C17.17 20.48 20.48 17.17 20.94 13H23V11H20.94ZM12 19C8.13 19 5 15.87 5 12C5 8.13 8.13 5 12 5C15.87 5 19 8.13 19 12C19 15.87 15.87 19 12 19Z"
-      fill="#185FA5"
-    />
-  </svg>
-);
-
-const PincodeIcon = ({ size = 18 }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <path
-      d="M13 13V11H15V13H13ZM13 9V7H15V9H13ZM17 13V11H19V13H17ZM17 9V7H19V9H17ZM11 13V11H9V13H11ZM11 9V7H9V9H11ZM7 13V11H5V13H7ZM7 9V7H5V9H7ZM21 3H3C1.9 3 1 3.9 1 5V19C1 20.1 1.9 21 3 21H21C22.1 21 23 20.1 23 19V5C23 3.9 22.1 3 21 3ZM21 19H3V5H21V19Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-const TrashIcon = ({ size = 16 }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="#D92D20" strokeWidth="2" strokeLinecap="round">
-    <polyline points="3 6 5 6 21 6" />
-    <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
-    <path d="M10 11v6M14 11v6" />
-    <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
-  </svg>
-);
-
-const CheckIcon = ({ size = 11, color = "#fff" }) => (
-  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="3" strokeLinecap="round">
-    <polyline points="20 6 9 17 4 12" />
-  </svg>
-);
-
-// ─── Reusable: Icon-prefixed input ────────────────────────────────────────────
-
-const IconInput = ({ icon, topAligned = false, inputStyle = {}, ...props }) => (
-  <div style={{ position: "relative", width: "100%" }}>
-    <div style={{
-      position: "absolute",
-      left: "10px",
-      ...(topAligned ? { top: "14px" } : { top: "50%", transform: "translateY(-50%)" }),
-      zIndex: 1,
-      opacity: 0.45,
-      display: "flex",
-      pointerEvents: "none",
-    }}>
-      {icon}
-    </div>
-    <TextInput
-      textInputStyle={{ paddingLeft: "36px", paddingRight: "12px", ...inputStyle }}
-      {...props}
-    />
-  </div>
-);
-
-// ─── Reusable: Section heading with inline rule ───────────────────────────────
-
-const SectionHead = ({ icon, label }) => (
-  <div style={{
-    display: "flex", alignItems: "center", gap: "8px",
-    marginBottom: "16px", marginTop: "4px",
-  }}>
-    <div style={{ opacity: 0.5, display: "flex" }}>{icon}</div>
-    <span style={{ fontSize: "15px", fontWeight: "600", color: "#0B0C0C", whiteSpace: "nowrap" }}>
-      {label}
-    </span>
-    <div style={{ flex: 1, height: "1px", background: "#EAECF0" }} />
-  </div>
-);
-
-// ─── Reusable: Admin info card ────────────────────────────────────────────────
-
-const AdminCard = ({ bgColor, iconBg, icon, labelColor, label, value }) => (
-  <div style={{
-    backgroundColor: bgColor,
-    padding: "14px 16px",
-    borderRadius: "8px",
-    display: "flex",
-    alignItems: "center",
-    gap: "14px",
-    border: "0.5px solid #EAECF0",
-  }}>
-    <div style={{ backgroundColor: iconBg, padding: "8px", borderRadius: "8px", display: "flex", flexShrink: 0 }}>
-      {icon}
-    </div>
-    <div>
-      <div style={{ color: labelColor, fontSize: "10px", fontWeight: "600", textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: "3px" }}>
-        {label}
-      </div>
-      <div style={{ fontSize: "14px", fontWeight: "600", color: "#101828" }}>{value}</div>
-    </div>
-  </div>
-);
-
-// ─── Main Component ───────────────────────────────────────────────────────────
-
-const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
+
+const AddressDetails = ({ config, onSelect }) => {
   const { t } = useTranslation();
-  const history = useHistory();
-  const location = useLocation();
-
-  const flowState = parentState || location.state || {
-    kNumber: "EKYC-1234567890",
-    selectedOption: { code: "SELF", name: "EKYC_SELF" },
-    connectionDetails: null,
-    initialData: {},
-  };
 
-  const initialData = flowState.initialData || {};
-
-  const addrDetails = flowState.connectionDetails?.addressDetails || {};
-
-  const [addressType, setAddressType] = useState(() => getSavedData("EKYC_ADDRESS_TYPE", { code: "AADHAAR", name: "EKYC_AADHAAR_ADDRESS" }));
-  const [correctAddress, setCorrectAddress] = useState(() => getSavedData("EKYC_ADDRESS_CORRECT", { code: "NO", name: "CORE_COMMON_NO" }));
-  const [fullAddress, setFullAddress] = useState(() => sessionStorage.getItem("EKYC_FULL_ADDRESS") || initialData.fullAddress || "");
-  const [flatNo, setFlatNo] = useState(() => sessionStorage.getItem("EKYC_FLAT_NO") || initialData.flatNo || "");
-  const [building, setBuilding] = useState(() => sessionStorage.getItem("EKYC_BUILDING") || initialData.building || "");
-  const [landmark, setLandmark] = useState(() => sessionStorage.getItem("EKYC_LANDMARK") || initialData.landmark || "");
-  const [pincode, setPincode] = useState(() => sessionStorage.getItem("EKYC_PINCODE") || initialData.pincode || "");
-  const [doorPhoto, setDoorPhoto] = useState(() => sessionStorage.getItem("EKYC_DOOR_PHOTO") || null);
-  const [doorPhotoFileStoreId, setDoorPhotoFileStoreId] = useState(() => sessionStorage.getItem("EKYC_DOOR_PHOTO_FILESTORE_ID") || null);
-  
-  const [filephoto, setFilephoto] = useState(null);
-  const [error, setError] = useState(null);
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+
+  // 🔹 STATES
+  const [houseNo, setHouseNo] = useState("");
+  const [street, setStreet] = useState("");
+  const [locality, setLocality] = useState("");
+  const [landmark, setLandmark] = useState("");
+  const [subLocality, setSubLocality] = useState(null);
+
+  const [pinCode, setPinCode] = useState("");
+  const [assembly, setAssembly] = useState(null);
+  const [ward, setWard] = useState(null);
+  const [zone, setZone] = useState(null);
+
+  const [latitude, setLatitude] = useState("");
+  const [longitude, setLongitude] = useState("");
+
+  const [addressType, setAddressType] = useState(null);
+
+  const [doorPhoto, setDoorPhoto] = useState(null);
+  const [doorPhotoFileStoreId, setDoorPhotoFileStoreId] = useState(null);
+
   const [toast, setToast] = useState(null);
 
-  // Sync address state to sessionStorage
-  useEffect(() => {
-    sessionStorage.setItem("EKYC_ADDRESS_TYPE", JSON.stringify(addressType));
-    sessionStorage.setItem("EKYC_ADDRESS_CORRECT", JSON.stringify(correctAddress));
-    sessionStorage.setItem("EKYC_FULL_ADDRESS", fullAddress);
-    sessionStorage.setItem("EKYC_FLAT_NO", flatNo);
-    sessionStorage.setItem("EKYC_BUILDING", building);
-    sessionStorage.setItem("EKYC_LANDMARK", landmark);
-    sessionStorage.setItem("EKYC_PINCODE", pincode);
-    if (doorPhoto) sessionStorage.setItem("EKYC_DOOR_PHOTO", doorPhoto);
-    if (doorPhotoFileStoreId) sessionStorage.setItem("EKYC_DOOR_PHOTO_FILESTORE_ID", doorPhotoFileStoreId);
-    sessionStorage.setItem("EKYC_CURRENT_STEP", "ADDRESS");
-  }, [addressType, correctAddress, fullAddress, flatNo, building, landmark, pincode, doorPhoto, doorPhotoFileStoreId]);
-
-  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;
-  };
+  // 🔹 MDMS DATA
+  const { data: mdmsData, isLoading } = Digit.Hooks.useCommonMDMS(tenantId, "egov-location", ["TenantBoundary"]);
+
+  const assemblies = mdmsData?.MdmsRes?.["egov-location"]?.TenantBoundary?.[0]?.boundary?.children || [];
 
+  // 🔹 AUTO GPS
   useEffect(() => {
-    (async () => {
-      setError(null);
-      if (filephoto) {
-        if (filephoto.size >= 2000000) {
-          setError(t("EKYC_MAXIMUM_UPLOAD_SIZE_EXCEEDED"));
-          setToast({ type: "error", message: t("EKYC_MAXIMUM_UPLOAD_SIZE_EXCEEDED") });
-        } else {
-          try {
-            setToast({ type: "info", message: t("EKYC_UPLOADING") });
-            const fsId = await uploadFile(filephoto, tenantId);
-            if (fsId) {
-              setDoorPhotoFileStoreId(fsId);
-              const reader = new FileReader();
-              reader.onloadend = () => setDoorPhoto(reader.result);
-              reader.readAsDataURL(filephoto);
-              setToast({ type: "success", message: t("EKYC_UPLOAD_SUCCESS") });
-            } else {
-              setError(t("EKYC_FILE_UPLOAD_ERROR"));
-              setToast({ type: "error", message: t("EKYC_FILE_UPLOAD_ERROR") });
-            }
-          } catch (err) {
-            setError(t("EKYC_FILE_UPLOAD_ERROR"));
-            setToast({ type: "error", message: t("EKYC_FILE_UPLOAD_ERROR") });
-          }
+    let isMounted = true;
+
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        (pos) => {
+          if (!isMounted) return;
+          setLatitude(pos.coords.latitude);
+          setLongitude(pos.coords.longitude);
+        },
+        () => {
+          if (!isMounted) return;
+          setToast({ type: "error", message: "GPS access denied" });
         }
-      }
-    })();
-  }, [filephoto]);
-  const [isLocationFetching, setIsLocationFetching] = useState(false);
-  const fileInputRef = useRef(null);
-
-  const tenantId = Digit.ULBService.getCurrentTenantId();
-  const { data: mdmsData, isLoading: isMdmsLoading } = Digit.Hooks.useCommonMDMS(
-    tenantId,
-    "egov-location",
-    ["TenantBoundary"]
-  );
+      );
+    }
 
-  const mdmsRes = mdmsData?.MdmsRes || mdmsData;
-  const adminHierarchy = mdmsRes?.["egov-location"]?.TenantBoundary?.find(h => h.hierarchyType.code === "ADMIN")
-    || mdmsRes?.["egov-location"]?.TenantBoundary?.[0];
+    return () => {
+      isMounted = false;
+    };
+  }, []);
 
-  const rootBoundary = adminHierarchy?.boundary;
+  // 🔹 PIN CODE HANDLER
+  const handlePincodeChange = (e) => {
+    const value = e.target.value;
+    if (/^\d{0,6}$/.test(value)) {
+      setPinCode(value);
 
-  const getAssemblies = (boundaries) => {
-    if (!boundaries) return [];
-    let assemblies = [];
-    const targetLabel = "assembly constituency";
-    for (const boundary of boundaries) {
-      const label = (boundary.label || boundary.name || "").toLowerCase().replace(/_/g, " ");
-      if (label === targetLabel || label === "assemblyconstituency") {
-        assemblies.push({ code: boundary.code, name: boundary.name, children: boundary.children });
-      }
-      if (boundary.children?.length) {
-        assemblies.push(...getAssemblies(boundary.children));
+      if (value.length === 6) {
+        fetchLocationByPincode(value);
       }
     }
-    return assemblies;
   };
 
-  const getBlocks = (children) => {
-    if (!children) return [];
-    let blocks = [];
-    const targetLabel = "block";
-    for (const child of children) {
-      const label = (child.label || child.name || "").toLowerCase().replace(/_/g, " ");
-      if (label === targetLabel) {
-        blocks.push({ code: child.code, name: child.name });
-      }
-      if (child.children?.length) {
-        blocks.push(...getBlocks(child.children));
-      }
-    }
-    return blocks;
+  // 🔹 MOCK PIN API (Replace with real API)
+  const fetchLocationByPincode = (pin) => {
+    // 🔥 Replace this with backend API
+    console.log("Fetching location for PIN:", pin);
   };
 
-  const assemblies = getAssemblies(Array.isArray(rootBoundary) ? rootBoundary : rootBoundary ? [rootBoundary] : []);
+  // 🔹 FILE UPLOAD
+  const selectphoto = async (e) => {
+    let isMounted = true;
 
-  const [assembly, setAssembly] = useState(() => getSavedData("EKYC_ASSEMBLY_DATA", initialData.assembly ? { name: initialData.assembly } : null));
-  const [ward, setWard] = useState(() => getSavedData("EKYC_WARD_DATA", initialData.ward ? { name: initialData.ward } : null));
-
-  // Sync MDMS selection
-  useEffect(() => {
-    sessionStorage.setItem("EKYC_ASSEMBLY_DATA", JSON.stringify(assembly));
-    sessionStorage.setItem("EKYC_WARD_DATA", JSON.stringify(ward));
-  }, [assembly, ward]);
+    const file = e.target.files[0];
+    if (!file) return;
 
-  useEffect(() => {
-    if (mdmsRes && addrDetails.assembly && !assembly?.code) {
-      const foundAssembly = assemblies.find((a) => a.name === addrDetails.assembly || a.code === addrDetails.assembly);
-      if (foundAssembly) setAssembly(foundAssembly);
+    if (file.size >= 2000000) {
+      setToast({ type: "error", message: "Max size 2MB exceeded" });
+      return;
     }
-  }, [mdmsRes, assemblies]);
 
-  const blocks = assembly ? getBlocks(assembly.children) : [];
+    try {
+      const res = await Digit.UploadServices.Filestorage("EKYC", file, tenantId);
 
-  useEffect(() => {
-    if (assembly && ward && !blocks.find((b) => b.name === ward.name)) {
-      setWard(null);
+      if (!isMounted) return;
+
+      const fileStoreId = res?.data?.files?.[0]?.fileStoreId;
+
+      if (fileStoreId) {
+        setDoorPhotoFileStoreId(fileStoreId);
+
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          if (!isMounted) return;
+          setDoorPhoto(reader.result);
+        };
+        reader.readAsDataURL(file);
+
+        setToast({ type: "success", message: "Upload successful" });
+      }
+    } catch {
+      if (!isMounted) return;
+      setToast({ type: "error", message: "Upload failed" });
     }
-  }, [assembly]);
-
-  const addressOptions = [
-    { code: "AADHAAR", name: "EKYC_AADHAAR_ADDRESS" },
-    { code: "OLD", name: "EKYC_OLD_ADDRESS" },
-  ];
-
-  const yesNoOptions = [
-    { code: "YES", name: "CORE_COMMON_YES" },
-    { code: "NO", name: "CORE_COMMON_NO" },
-  ];
-
-  const handleCompleteVerification = () => {
-    const payload = {
-      addressType,
-      fullAddress,
-      flatNo,
-      building,
-      landmark,
-      pincode,
-      doorPhoto,
-      doorPhotoFileStoreId,
-      assembly: assembly?.name,
-      ward: ward?.name
+
+    return () => {
+      isMounted = false;
     };
-    if (onComplete) {
-      onComplete(payload);
-    } else {
-      const { kNumber, selectedOption, connectionDetails, initialData } = flowState;
-      history.push("/digit-ui/employee/ekyc/property-info", {
-        kNumber, selectedOption, connectionDetails, addressDetails: payload, initialData
-      });
-    }
   };
 
-  function selectphoto(e) {
-    setDoorPhotoFileStoreId(null);
-    setFilephoto(e.target.files[0]);
-  }
-
   const removePhoto = () => {
     setDoorPhoto(null);
     setDoorPhotoFileStoreId(null);
-    setFilephoto(null);
   };
 
-  const handleUseCurrentLocation = () => {
-    if (!("geolocation" in navigator)) {
-      alert(t("GEOLOCATION_NOT_SUPPORTED"));
+  // 🔹 VALIDATION
+  const isValid = () => {
+    return houseNo && street && pinCode.length === 6 && assembly && ward && zone && latitude && longitude && doorPhotoFileStoreId;
+  };
+
+  // 🔹 SUBMIT
+  const onStepSelect = () => {
+    if (!isValid()) {
+      setToast({ type: "error", message: "Please fill all mandatory fields" });
       return;
     }
-    setIsLocationFetching(true);
-    navigator.geolocation.getCurrentPosition(
-      async ({ coords: { latitude, longitude } }) => {
-        try {
-          const res = await fetch(
-            `https://nominatim.openstreetmap.org/reverse?format=json&lat=${latitude}&lon=${longitude}&zoom=18&addressdetails=1`
-          );
-          if (!res.ok) throw new Error("Geocode failed");
-          const data = await res.json();
-          if (data?.address) {
-            const a = data.address;
-            setFullAddress([a.amenity, a.road, a.neighbourhood, a.suburb, a.city, a.state, a.postcode].filter(Boolean).join(", "));
-            setPincode(a.postcode || "");
-            setLandmark(a.suburb || a.neighbourhood || "");
-            setFlatNo(a.amenity || "");
-          }
-        } catch (err) {
-          console.error("Reverse geocode error:", err);
-        } finally {
-          setIsLocationFetching(false);
-        }
-      },
-      (err) => {
-        console.error("Geolocation error:", err);
-        setIsLocationFetching(false);
-        alert(t("LOCATION_FETCH_FAILED"));
-      },
-      { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
-    );
+
+    const data = {
+      houseNo,
+      street,
+      locality,
+      landmark,
+      subLocality,
+      pinCode,
+      assembly: assembly?.name,
+      ward: ward?.name,
+      zone: zone?.name,
+      latitude,
+      longitude,
+      addressType: addressType?.name,
+      doorPhotoFilestoreId: doorPhotoFileStoreId,
+    };
+
+    onSelect(config.key, data);
   };
 
-  const renderContent = () => (
-    <div style={{ animation: "fadeSlideIn 0.3s ease" }}>
-
-      {/* ── Address Type Toggle ── */}
-      <SectionHead
-        icon={<LocationIcon className="icon" styles={{ fill: "#0B0C0C", width: "16px", height: "16px" }} />}
-        label={t("EKYC_ADDRESS_DETAILS_HEADER")}
-      />
-
-      <div style={{ marginBottom: "20px" }}>
-        <RadioButtons
-          options={addressOptions}
-          optionsKey="name"
-          selectedOption={addressType}
-          onSelect={setAddressType}
-          t={t}
-          innerStyles={{ display: "flex", alignItems: "center" }}
-          style={{ display: "flex", gap: "40px" }}
-        />
-      </div>
-
-      {/* ── Aadhaar Address display ── */}
-      {addressType.code === "AADHAAR" && (
-        <div style={{
-          backgroundColor: "#E1F5EE",
-          border: "0.5px solid #5DCAA5",
-          borderRadius: "8px",
-          padding: "14px 16px",
-          display: "flex",
-          alignItems: "flex-start",
-          gap: "12px",
-          marginBottom: "20px",
-          animation: "fadeSlideIn 0.3s ease",
-        }}>
-          <div style={{ backgroundColor: "#9FE1CB", padding: "6px", borderRadius: "6px", display: "flex", flexShrink: 0 }}>
-            <LocationIcon className="icon" styles={{ fill: "#085041", width: "16px", height: "16px" }} />
-          </div>
-          <div style={{ fontSize: "14px", lineHeight: "1.6", color: "#04342C", fontWeight: "500" }}>
-            {addrDetails.fullAddress}
-          </div>
-        </div>
-      )}
-
-      {/* ── Old / Custom Address ── */}
-      {addressType.code === "OLD" && (
-        <div style={{ animation: "fadeSlideIn 0.3s ease" }}>
-
-          {/* 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")}
-            </CardLabel>
-            <RadioButtons
-              options={yesNoOptions}
-              optionsKey="name"
-              selectedOption={correctAddress}
-              onSelect={setCorrectAddress}
-              t={t}
-              innerStyles={{ display: "flex", gap: "20px" }}
-              style={{ marginBottom: 0 }}
-            />
-          </div>
-
-          {/* Use Current Location */}
-          <div
-            onClick={!isLocationFetching ? handleUseCurrentLocation : undefined}
-            style={{
-              border: "0.5px solid #D0D5DD",
-              borderRadius: "8px",
-              padding: "12px 16px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              marginBottom: "20px",
-              cursor: isLocationFetching ? "not-allowed" : "pointer",
-              backgroundColor: isLocationFetching ? "#F9FAFB" : "#fff",
-              transition: "background 0.15s",
-              opacity: isLocationFetching ? 0.7 : 1,
-            }}
-            onMouseOver={(e) => { if (!isLocationFetching) e.currentTarget.style.background = "#F9FAFB"; }}
-            onMouseOut={(e) => { if (!isLocationFetching) e.currentTarget.style.background = "#fff"; }}
-          >
-            <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
-              <div style={{ backgroundColor: "#E6F1FB", padding: "7px", borderRadius: "7px", display: "flex" }}>
-                {isLocationFetching ? (
-                  <div style={{
-                    width: "18px", height: "18px", border: "2px solid #185FA5",
-                    borderTopColor: "transparent", borderRadius: "50%",
-                    animation: "spin 1s linear infinite",
-                  }} />
-                ) : (
-                  <TargetIcon size={18} />
-                )}
-              </div>
-              <span style={{ fontWeight: "500", fontSize: "14px", color: "#344054" }}>
-                {isLocationFetching
-                  ? t("EKYC_FETCHING_LOCATION")
-                  : t("EKYC_USE_CURRENT_LOCATION")}
-              </span>
-            </div>
-            {!isLocationFetching && (
-              <span style={{ fontSize: "18px", color: "#98A2B3", lineHeight: 1 }}>›</span>
-            )}
-          </div>
-
-          {/* 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")}
-            </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")}
-              inputStyle={{ minHeight: "72px" }}
-            />
-          </div>
-
-          {/* Flat + Building */}
-          <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")}
-              </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")}
-              />
-            </div>
-            <div>
-              <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-                {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")}
-              />
-            </div>
-          </div>
-
-          {/* Landmark + Pincode */}
-          <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")}
-              </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")}
-              />
-            </div>
-            <div>
-              <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-                {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")}
-                maxLength={6}
-              />
-            </div>
-          </div>
-        </div>
-      )}
-
-      <hr style={{ margin: "24px 0", border: 0, borderTop: "1px solid #EAECF0" }} />
-
-      {/* ── Administrative Division ── */}
-      <SectionHead
-        icon={<PropertyHouse styles={{ fill: "#0B0C0C", width: "16px", height: "16px" }} />}
-        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")}
-            </div>
-            <Dropdown
-              option={assemblies}
-              optionKey="name"
-              selected={assembly}
-              select={(val) => { setAssembly(val); setWard(null); }}
-              t={t}
-            />
-          </div>
-          <div>
-            <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-              {t("EKYC_WARD") || "Block"}
-            </div>
-            <Dropdown
-              option={blocks}
-              optionKey="name"
-              selected={ward}
-              select={setWard}
-              disabled={!assembly}
-              t={t}
-            />
-          </div>
-        </div>
-      )}
-
-      <hr style={{ margin: "24px 0", border: 0, borderTop: "1px solid #EAECF0" }} />
-
-      {/* ── Door Photo ── */}
-      <SectionHead
-        icon={<CameraIcon size={16} />}
-        label={t("EKYC_CAPTURE_DOOR_IMAGE")}
-      />
-
-      <div style={{ fontSize: "12px", color: "#667085", marginBottom: "12px" }}>
-        {t("EKYC_REQUIRED_FOR_VERIFICATION")}
-      </div>
-
-      {/* Warning banner
-      <div style={{
-        backgroundColor: "#FFFAEB",
-        border: "0.5px solid #FEDF89",
-        borderRadius: "8px",
-        padding: "12px 14px",
-        display: "flex",
-        alignItems: "flex-start",
-        gap: "10px",
-        marginBottom: "16px",
-      }}>
-        <div style={{ flexShrink: 0, marginTop: "1px" }}>
-          <InfoBannerIcon fill="#B54708" />
-        </div>
-        <div>
-          <div style={{ fontWeight: "600", color: "#B54708", fontSize: "13px", marginBottom: "2px" }}>
-            {t("EKYC_IMPORTANT")}
-          </div>
-          <div style={{ fontSize: "12px", color: "#92400E" }}>
-            {t("EKYC_CAPTURE_LIVE_CAMERA")}
-          </div>
-        </div>
-      </div> */}
-
-      {/* Building Photo Upload */}
-      <UploadFile
-        id={"ekyc-door-photo"}
-        extraStyleName={"propertyCreate"}
-        accept=".jpg,.png,.jpeg"
-        onUpload={selectphoto}
-        onDelete={removePhoto}
-        message={doorPhotoFileStoreId ? `1 ${t(`EKYC_ACTION_FILEUPLOADED`)}` : t(`EKYC_ACTION_NO_FILEUPLOADED`)}
-        error={error}
-      />
-      {doorPhoto && (
-        <div style={{ marginTop: "10px", borderRadius: "8px", overflow: "hidden", border: "1px solid #EAECF0" }}>
-          <img src={doorPhoto} alt="Door Preview" style={{ width: "100%", maxHeight: "250px", objectFit: "cover" }} />
-        </div>
-      )}
-
-      {/* Submit */}
-      {isSection ? (
-        <div style={{ marginTop: "24px" }}>
-          <SubmitBar
-            label={t("ES_COMMON_SAVE_CONTINUE")}
-            onSubmit={handleCompleteVerification}
-          />
-        </div>
-      ) : (
-        <ActionBar>
-          <SubmitBar
-            label={t("EKYC_COMPLETE_VERIFICATION")}
-            onSubmit={handleCompleteVerification}
-          />
-        </ActionBar>
-      )}
-
-      {/* Secure notice */}
-      <div style={{
-        display: "flex", alignItems: "center", justifyContent: "center",
-        gap: "5px", marginTop: "16px",
-        fontSize: "11px", color: "#98A2B3",
-      }}>
-        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-          <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")}
-      </div>
-      {toast && (
-        <Toast
-          label={toast.message}
-          error={toast.type === "error"}
-          info={toast.type === "info"}
-          success={toast.type === "success"}
-          onClose={() => setToast(null)}
-        />
-      )}
-    </div>
-  );
+  if (isLoading) return <Loader />;
 
-  // ── When rendered as inline section inside AadhaarVerification ──
-  if (isSection) {
-    return (
-      <Fragment>
-        <hr style={{ margin: "32px 0", border: 0, borderTop: "2px solid #EAECF0" }} />
-        {renderContent()}
-      </Fragment>
-    );
-  }
-
-  // ── When rendered as a standalone page ──
   return (
-    <div className="inbox-container">
-      <style>{`
-        @keyframes spin { to { transform: rotate(360deg); } }
-        @keyframes fadeSlideIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
-      `}</style>
-
-      {/* Sidebar */}
-      <div className="filters-container">
-        <Card style={{ display: "flex", alignItems: "center", padding: "12px 16px", marginBottom: "12px", borderRadius: "8px" }}>
-          <div style={{ color: "#185FA5", marginRight: "10px", display: "flex" }}>
-            <HomeIcon style={{ width: "20px", height: "20px" }} />
-          </div>
-          <div style={{ fontWeight: "600", fontSize: "15px", color: "#0B0C0C" }}>
-            {t("EKYC_PROCESS") || "eKYC Process"}
-          </div>
-        </Card>
-
-        <div style={{ background: "#fff", padding: "16px 14px", borderRadius: "8px", border: "1px solid #EAECF0" }}>
-          {[
-            { label: t("EKYC_STEP_AADHAAR") || "Aadhaar", done: true, active: false },
-            { label: t("EKYC_STEP_ADDRESS") || "Address", done: false, active: true },
-            { label: t("EKYC_STEP_PROPERTY") || "Property", done: false, active: false },
-            { label: t("EKYC_STEP_METER") || "Meter", done: false, active: false },
-            { label: t("EKYC_STEP_REVIEW") || "Review", done: false, active: false },
-          ].map((step, i) => (
-            <div key={i} style={{ display: "flex", gap: "10px", alignItems: "flex-start", position: "relative", paddingBottom: i < 4 ? "18px" : 0 }}>
-              {i < 4 && (
-                <div style={{ position: "absolute", left: "10px", top: "22px", width: "1px", height: "calc(100% - 10px)", background: "#EAECF0" }} />
-              )}
-              <div style={{
-                width: "20px", height: "20px", borderRadius: "50%", flexShrink: 0, marginTop: "1px",
-                border: step.done ? "none" : step.active ? "1.5px solid #185FA5" : "1.5px solid #D0D5DD",
-                background: step.done ? "#0F6E56" : step.active ? "#E6F1FB" : "#fff",
-                display: "flex", alignItems: "center", justifyContent: "center",
-                fontSize: "10px", fontWeight: "500",
-                color: step.done ? "#fff" : step.active ? "#185FA5" : "#98A2B3",
-              }}>
-                {step.done ? <CheckIcon size={11} color="#fff" /> : i + 1}
-              </div>
-              <div style={{
-                fontSize: "12px", paddingTop: "2px",
-                color: step.done ? "#0F6E56" : step.active ? "#0B0C0C" : "#667085",
-                fontWeight: step.done || step.active ? "600" : "400",
-              }}>
-                {step.label}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Main */}
-      <div style={{ flex: 1, marginLeft: "16px" }}>
-        <Card>
-          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "20px" }}>
-            <CardHeader style={{ margin: 0, fontSize: "18px" }}>
-              {t("EKYC_ADDRESS_DETAILS_HEADER") || "Address Details"}
-            </CardHeader>
-            <div style={{
-              background: "#F9FAFB", border: "0.5px solid #EAECF0",
-              borderRadius: "20px", padding: "4px 14px",
-              fontSize: "12px", color: "#667085",
-            }}>
-              {t("EKYC_K_NUMBER") || "K Number"}:{" "}
-              <span style={{ color: "#0B0C0C", fontWeight: "600" }}>{flowState?.kNumber}</span>
-            </div>
-          </div>
-          {renderContent()}
-        </Card>
-      </div>
-    </div>
+    <Fragment>
+      <FormStep t={t} onSelect={onStepSelect} config={config} label={t("ES_COMMON_CONTINUE")}>
+        <CardLabel>House No / Flat No *</CardLabel>
+        <TextInput value={houseNo} onChange={(e) => setHouseNo(e.target.value)} />
+
+        <CardLabel>Street / Address Line *</CardLabel>
+        <TextInput value={street} onChange={(e) => setStreet(e.target.value)} />
+
+        <CardLabel>Locality</CardLabel>
+        <TextInput value={locality} onChange={(e) => setLocality(e.target.value)} />
+
+        <CardLabel>Landmark</CardLabel>
+        <TextInput value={landmark} onChange={(e) => setLandmark(e.target.value)} />
+
+        <CardLabel>Sub Locality</CardLabel>
+        <Dropdown option={[]} selected={subLocality} select={setSubLocality} />
+
+        <CardLabel>PIN Code *</CardLabel>
+        <TextInput value={pinCode} onChange={handlePincodeChange} maxLength={6} />
+
+        <CardLabel>Assembly *</CardLabel>
+        <Dropdown option={assemblies} selected={assembly} select={setAssembly} />
+
+        <CardLabel>Ward *</CardLabel>
+        <Dropdown option={assembly?.children || []} selected={ward} select={setWard} />
+
+        <CardLabel>Zone *</CardLabel>
+        <Dropdown option={ward?.children || []} selected={zone} select={setZone} />
+
+        <CardLabel>Latitude</CardLabel>
+        <TextInput value={latitude} disabled />
+
+        <CardLabel>Longitude</CardLabel>
+        <TextInput value={longitude} disabled />
+
+        <CardLabel>Address Type</CardLabel>
+        <Dropdown option={[{ name: "Permanent" }, { name: "Correspondence" }, { name: "Other" }]} selected={addressType} select={setAddressType} />
+
+        <CardLabel>Door Image *</CardLabel>
+        <UploadFile onUpload={selectphoto} onDelete={removePhoto} message={doorPhotoFileStoreId ? "Uploaded" : "No file selected"} />
+
+        {doorPhoto && <img src={doorPhoto} alt="preview" style={{ width: "100%", marginTop: "10px" }} />}
+
+        {toast && <Toast label={toast.message} error={toast.type === "error"} onClose={() => setToast(null)} />}
+      </FormStep>
+    </Fragment>
   );
 };
 
-export default AddressDetails;
+export default AddressDetails;