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

package/src/pages/employee/AddressDetails.js

@@ -1,6 +1,5 @@
-import React, { useState, useRef, Fragment } from "react";
+import React, { useState, useRef, Fragment, useEffect } from "react";
 import {
-  Header,
   Card,
   LabelFieldPair,
   CardLabel,
@@ -12,38 +11,226 @@ import {
   InfoBannerIcon,
   PropertyHouse,
   LocationIcon,
-  RemoveableTag,
   HomeIcon,
   ConnectingCheckPoints,
   CheckPoint,
+  Dropdown,
+  Loader,
 } from "@djb25/digit-ui-react-components";
 import { useTranslation } from "react-i18next";
 import { useHistory, useLocation } from "react-router-dom";
 
+// ─── 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 { t } = useTranslation();
   const history = useHistory();
   const location = useLocation();
 
-  // Use parent state if provided, otherwise fallback to location state or defaults
-  const flowState = parentState ||
-    location.state || {
-      kNumber: "EKYC-1234567890",
-      selectedOption: { code: "SELF", name: "EKYC_SELF" },
-      connectionDetails: null,
-    };
+  const flowState = parentState || location.state || {
+    kNumber: "EKYC-1234567890",
+    selectedOption: { code: "SELF", name: "EKYC_SELF" },
+    connectionDetails: null,
+  };
+
+  const addrDetails = flowState.connectionDetails?.addressDetails || {};
 
   const [addressType, setAddressType] = useState({ code: "AADHAAR", name: "EKYC_AADHAAR_ADDRESS" });
   const [correctAddress, setCorrectAddress] = useState({ code: "NO", name: "CORE_COMMON_NO" });
-  const [fullAddress, setFullAddress] = useState("");
-  const [flatNo, setFlatNo] = useState("");
-  const [building, setBuilding] = useState("");
-  const [landmark, setLandmark] = useState("");
-  const [pincode, setPincode] = useState("");
+  const [fullAddress, setFullAddress] = useState(addrDetails.fullAddress || "");
+  const [flatNo, setFlatNo] = useState(addrDetails.flatHouseNumber || "");
+  const [building, setBuilding] = useState(addrDetails.buildingTower || "");
+  const [landmark, setLandmark] = useState(addrDetails.landmark || "");
+  const [pincode, setPincode] = useState(addrDetails.pinCode || "");
   const [doorPhoto, setDoorPhoto] = useState(null);
   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];
+  
+  const rootBoundary = adminHierarchy?.boundary;
+  
+  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));
+      }
+    }
+    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;
+  };
+
+  const assemblies = getAssemblies(Array.isArray(rootBoundary) ? rootBoundary : rootBoundary ? [rootBoundary] : []);
+
+  const [assembly, setAssembly] = useState(addrDetails.assembly ? { name: addrDetails.assembly } : null);
+  const [ward, setWard] = useState(addrDetails.ward ? { name: addrDetails.ward } : null);
+
+  useEffect(() => {
+    if (mdmsRes && addrDetails.assembly && !assembly?.code) {
+      const foundAssembly = assemblies.find((a) => a.name === addrDetails.assembly || a.code === addrDetails.assembly);
+      if (foundAssembly) setAssembly(foundAssembly);
+    }
+  }, [mdmsRes, assemblies]);
+
+  const blocks = assembly ? getBlocks(assembly.children) : [];
+
+  useEffect(() => {
+    if (assembly && ward && !blocks.find((b) => b.name === ward.name)) {
+      setWard(null);
+    }
+  }, [assembly]);
+
   const addressOptions = [
     { code: "AADHAAR", name: "EKYC_AADHAAR_ADDRESS" },
     { code: "OLD", name: "EKYC_OLD_ADDRESS" },
@@ -55,32 +242,33 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
   ];
 
   const handleCompleteVerification = () => {
+    const payload = { 
+      addressType, 
+      fullAddress, 
+      flatNo, 
+      building, 
+      landmark, 
+      pincode, 
+      doorPhoto,
+      assembly: assembly?.name,
+      ward: ward?.name
+    };
     if (onComplete) {
-      onComplete({ addressType, fullAddress, flatNo, building, landmark, pincode, doorPhoto });
+      onComplete(payload);
     } else {
       const { kNumber, selectedOption, connectionDetails } = flowState;
       history.push("/digit-ui/employee/ekyc/property-info", {
-        kNumber,
-        selectedOption,
-        connectionDetails,
-        addressDetails: { addressType, fullAddress, flatNo, building, landmark, pincode, doorPhoto },
+        kNumber, selectedOption, connectionDetails, addressDetails: payload,
       });
     }
   };
 
   const handleCapture = (e) => {
     const file = e.target.files[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setDoorPhoto(reader.result);
-      };
-      reader.readAsDataURL(file);
-    }
-  };
-
-  const openGallery = () => {
-    fileInputRef.current.click();
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onloadend = () => setDoorPhoto(reader.result);
+    reader.readAsDataURL(file);
   };
 
   const removePhoto = () => {
@@ -93,98 +281,47 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
       alert(t("GEOLOCATION_NOT_SUPPORTED") || "Geolocation is not supported by your browser");
       return;
     }
-
     setIsLocationFetching(true);
     navigator.geolocation.getCurrentPosition(
-      async (position) => {
-        const { latitude, longitude } = position.coords;
+      async ({ coords: { latitude, longitude } }) => {
         try {
-          const response = await fetch(
+          const res = await fetch(
             `https://nominatim.openstreetmap.org/reverse?format=json&lat=${latitude}&lon=${longitude}&zoom=18&addressdetails=1`
           );
-          if (!response.ok) throw new Error("Failed to fetch address");
-          const data = await response.json();
-
-          if (data && data.address) {
-            const addr = [
-              data.address?.amenity,
-              data.address?.road,
-              data.address?.neighbourhood,
-              data.address?.suburb,
-              data.address?.city,
-              data.address?.state,
-              data.address?.postcode,
-            ]
-              .filter(Boolean)
-              .join(", ");
-
-            setFullAddress(addr || "");
-            setPincode(data.address?.postcode || "");
-            setLandmark(data.address?.suburb || data.address?.neighbourhood || "");
-            setFlatNo(data.address?.amenity || "");
+          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 (error) {
-          console.error("Error reverse geocoding:", error);
+        } catch (err) {
+          console.error("Reverse geocode error:", err);
         } finally {
           setIsLocationFetching(false);
         }
       },
-      (error) => {
-        console.error("Error getting location:", error);
+      (err) => {
+        console.error("Geolocation error:", err);
         setIsLocationFetching(false);
-        alert(t("LOCATION_FETCH_FAILED") || "Failed to fetch your current location. Please ensure location permissions are granted.");
+        alert(t("LOCATION_FETCH_FAILED") || "Failed to fetch location. Please grant location permissions.");
       },
       { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
     );
   };
 
-  const FlagIcon = () => (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M14.4 6L13.6 4H5V21H7V14H12.6L13.4 16H20V6H14.4Z" fill="#2E9E8F" />
-    </svg>
-  );
-
-  const IdCardIcon = () => (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <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="#3D51B0"
-      />
-    </svg>
-  );
-
-  const CameraIcon = () => (
-    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <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="#0068faff"
-      />
-    </svg>
-  );
-
-  const TargetIcon = () => (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <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="#0068faff"
-      />
-    </svg>
-  );
+  const renderContent = () => (
+    <div style={{ animation: "fadeSlideIn 0.3s ease" }}>
 
-  const PincodeIcon = () => (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <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="#0068faff"
+      {/* ── Address Type Toggle ── */}
+      <SectionHead
+        icon={<LocationIcon className="icon" styles={{ fill: "#0B0C0C", width: "16px", height: "16px" }} />}
+        label={t("EKYC_ADDRESS_DETAILS_HEADER") || "Address Details"}
       />
-    </svg>
-  );
 
-  const renderContent = () => (
-    <div style={{ animation: "fadeSlideIn 0.3s ease" }}>
-      {isSection && <hr style={{ margin: "40px 0", border: "0", borderTop: "2px solid #EAECF0" }} />}
-      <Header style={{ marginBottom: "24px" }}>{t("EKYC_ADDRESS_DETAILS_HEADER") || "Address Details"}</Header>
-      <div style={{ marginBottom: "32px" }}>
+      <div style={{ marginBottom: "20px" }}>
         <RadioButtons
           options={addressOptions}
           optionsKey="name"
@@ -192,40 +329,40 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
           onSelect={setAddressType}
           t={t}
           innerStyles={{ display: "flex", alignItems: "center" }}
-          style={{ display: "flex", gap: "50px", justifyContent: "flex-start" }}
+          style={{ display: "flex", gap: "40px" }}
         />
       </div>
 
+      {/* ── Aadhaar Address display ── */}
       {addressType.code === "AADHAAR" && (
-        <div
-          style={{
-            backgroundColor: "#F9FAFB",
-            padding: "16px",
-            borderRadius: "12px",
-            marginBottom: "24px",
-            border: "1px solid #EAECF0",
-            display: "flex",
-            alignItems: "flex-start",
-            gap: "12px",
-            animation: "fadeSlideIn 0.3s ease",
-          }}
-        >
-          <div style={{ backgroundColor: "#E7F4EE", padding: "8px", borderRadius: "8px" }}>
-            <LocationIcon className="icon" styles={{ fill: "#2E9E8F", width: "20px", height: "20px" }} />
+        <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: "16px", lineHeight: "1.6", color: "#344054", fontWeight: "500" }}>
-            H.No. 123, Sector 15, Rohini
-            <br />
-            Delhi - 110085
+          <div style={{ fontSize: "14px", lineHeight: "1.6", color: "#04342C", fontWeight: "500" }}>
+            {addrDetails.fullAddress || "H.No. 123, Sector 15, Rohini, Delhi – 110085"}
           </div>
         </div>
       )}
 
+      {/* ── Old / Custom Address ── */}
       {addressType.code === "OLD" && (
         <div style={{ animation: "fadeSlideIn 0.3s ease" }}>
-          <div style={{ marginBottom: "24px" }}>
-            <CardLabel style={{ marginBottom: "12px", fontWeight: "600", color: "#344054" }}>
-              {t("EKYC_ADDRESS_CORRECTION_PROMPT") || "Do you want to correct the address?"}
+
+          {/* 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?"}
             </CardLabel>
             <RadioButtons
               options={yesNoOptions}
@@ -233,352 +370,372 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
               selectedOption={correctAddress}
               onSelect={setCorrectAddress}
               t={t}
-              innerStyles={{ display: "flex", alignItems: "center" }}
-              style={{ display: "flex", gap: "50px", justifyContent: "flex-start" }}
+              innerStyles={{ display: "flex", gap: "20px" }}
+              style={{ marginBottom: 0 }}
             />
           </div>
 
+          {/* Use Current Location */}
           <div
+            onClick={!isLocationFetching ? handleUseCurrentLocation : undefined}
             style={{
-              border: "1px solid #D0D5DD",
-              borderRadius: "12px",
-              padding: "14px 16px",
+              border: "0.5px solid #D0D5DD",
+              borderRadius: "8px",
+              padding: "12px 16px",
               display: "flex",
               alignItems: "center",
               justifyContent: "space-between",
-              marginBottom: "24px",
+              marginBottom: "20px",
               cursor: isLocationFetching ? "not-allowed" : "pointer",
-              backgroundColor: isLocationFetching ? "#F2F4F7" : "#FFFFFF",
-              transition: "all 0.2s ease",
+              backgroundColor: isLocationFetching ? "#F9FAFB" : "#fff",
+              transition: "background 0.15s",
               opacity: isLocationFetching ? 0.7 : 1,
-              boxShadow: "0px 1px 2px rgba(16, 24, 40, 0.05)",
             }}
-            onClick={!isLocationFetching ? handleUseCurrentLocation : undefined}
-            onMouseOver={(e) => (!isLocationFetching ? (e.currentTarget.style.backgroundColor = "#F9FAFB") : null)}
-            onMouseOut={(e) => (!isLocationFetching ? (e.currentTarget.style.backgroundColor = "#FFFFFF") : null)}
+            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: "#EEF4FF", padding: "8px", borderRadius: "8px" }}>
+              <div style={{ backgroundColor: "#E6F1FB", padding: "7px", borderRadius: "7px", display: "flex" }}>
                 {isLocationFetching ? (
-                  <div
-                    className="location-loader"
-                    style={{
-                      width: "20px",
-                      height: "20px",
-                      border: "2px solid #0068faff",
-                      borderTopColor: "transparent",
-                      borderRadius: "50%",
-                      animation: "spin 1s linear infinite",
-                    }}
-                  ></div>
+                  <div style={{
+                    width: "18px", height: "18px", border: "2px solid #185FA5",
+                    borderTopColor: "transparent", borderRadius: "50%",
+                    animation: "spin 1s linear infinite",
+                  }} />
                 ) : (
-                  <TargetIcon />
+                  <TargetIcon size={18} />
                 )}
               </div>
-              <span style={{ fontWeight: "600", color: "#344054" }}>
+              <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") || "Fetching location..."
+                  : t("EKYC_USE_CURRENT_LOCATION") || "Use current location"}
               </span>
             </div>
-            {!isLocationFetching && <span style={{ fontSize: "20px", color: "#98A2B3" }}>›</span>}
+            {!isLocationFetching && (
+              <span style={{ fontSize: "18px", color: "#98A2B3", lineHeight: 1 }}>›</span>
+            )}
           </div>
 
-          <LabelFieldPair>
-            <CardLabel style={{ fontWeight: "600" }}>{t("EKYC_FULL_ADDRESS") || "Full Address"}</CardLabel>
-            <div className="field" style={{ position: "relative" }}>
-              <div style={{ position: "absolute", left: "12px", top: "16px", zIndex: 1, opacity: 0.6 }}>
-                <PropertyHouse styles={{ fill: "#0068faff", width: "20px", height: "20px" }} />
+          {/* 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"}
+            </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"}
+              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") || "Flat / House no."}
               </div>
-              <TextInput
-                value={fullAddress}
-                onChange={(e) => setFullAddress(e.target.value)}
-                placeholder={t("EKYC_ENTER_FULL_ADDRESS") || "Enter Full Address"}
-                textInputStyle={{ paddingLeft: "40px", minHeight: "80px" }}
+              <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"}
               />
             </div>
-          </LabelFieldPair>
-
-          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "24px" }}>
-            <LabelFieldPair>
-              <CardLabel style={{ fontWeight: "600" }}>{t("EKYC_FLAT_HOUSE_NUMBER") || "Flat/House Number"}</CardLabel>
-              <div className="field" style={{ position: "relative" }}>
-                <div style={{ position: "absolute", left: "12px", top: "50%", transform: "translateY(-50%)", zIndex: 1, opacity: 0.6 }}>
-                  <PropertyHouse styles={{ fill: "#0068faff", width: "20px", height: "20px" }} />
-                </div>
-                <TextInput
-                  value={flatNo}
-                  onChange={(e) => setFlatNo(e.target.value)}
-                  placeholder={t("EKYC_ENTER_FLAT_NO") || "e.g. 45-B"}
-                  textInputStyle={{ paddingLeft: "40px" }}
-                />
-              </div>
-            </LabelFieldPair>
-            <LabelFieldPair>
-              <CardLabel style={{ fontWeight: "600" }}>{t("EKYC_BUILDING_TOWER") || "Building/Tower"}</CardLabel>
-              <div className="field" style={{ position: "relative" }}>
-                <div style={{ position: "absolute", left: "12px", top: "50%", transform: "translateY(-50%)", zIndex: 1, opacity: 0.6 }}>
-                  <PropertyHouse styles={{ fill: "#0068faff", width: "20px", height: "20px" }} />
-                </div>
-                <TextInput
-                  value={building}
-                  onChange={(e) => setBuilding(e.target.value)}
-                  placeholder={t("EKYC_ENTER_BUILDING") || "e.g. Tower 4"}
-                  textInputStyle={{ paddingLeft: "40px" }}
-                />
+            <div>
+              <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
+                {t("EKYC_BUILDING_TOWER") || "Building / Tower"}
               </div>
-            </LabelFieldPair>
+              <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"}
+              />
+            </div>
           </div>
 
-          <LabelFieldPair>
-            <CardLabel style={{ fontWeight: "600" }}>{t("EKYC_LANDMARK") || "Landmark"}</CardLabel>
-            <div className="field" style={{ position: "relative" }}>
-              <div style={{ position: "absolute", left: "12px", top: "50%", transform: "translateY(-50%)", zIndex: 1, opacity: 0.6 }}>
-                <LocationIcon className="icon" styles={{ fill: "#0068faff", width: "20px", height: "20px" }} />
+          {/* 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") || "Landmark"}
               </div>
-              <TextInput
+              <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"}
-                textInputStyle={{ paddingLeft: "40px" }}
               />
             </div>
-          </LabelFieldPair>
-
-          <LabelFieldPair>
-            <CardLabel style={{ fontWeight: "600" }}>{t("EKYC_PINCODE") || "Pincode"}</CardLabel>
-            <div className="field" style={{ position: "relative" }}>
-              <div style={{ position: "absolute", left: "12px", top: "50%", transform: "translateY(-50%)", zIndex: 1, opacity: 0.6 }}>
-                <PincodeIcon />
+            <div>
+              <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
+                {t("EKYC_PINCODE") || "Pincode"}
               </div>
-              <TextInput
+              <IconInput
+                icon={<PincodeIcon size={15} />}
                 value={pincode}
-                onChange={(e) => setPincode(e.target.value)}
+                onChange={(e) => { if (/^\d*$/.test(e.target.value)) setPincode(e.target.value); }}
                 placeholder={t("EKYC_ENTER_PINCODE") || "6-digit pincode"}
-                textInputStyle={{ paddingLeft: "40px" }}
                 maxLength={6}
               />
             </div>
-          </LabelFieldPair>
+          </div>
         </div>
       )}
 
-      <hr style={{ margin: "32px 0", border: "0", borderTop: "1px solid #EAECF0" }} />
+      <hr style={{ margin: "24px 0", border: 0, borderTop: "1px solid #EAECF0" }} />
 
-      <div style={{ display: "flex", alignItems: "center", gap: "10px", marginBottom: "20px" }}>
-        <div style={{ backgroundColor: "#EEF4FF", padding: "8px", borderRadius: "8px" }}>
-          <PropertyHouse styles={{ fill: "#0068faff", width: "24px", height: "24px" }} />
-        </div>
-        <CardHeader style={{ margin: 0, fontSize: "20px" }}>{t("EKYC_ADMINISTRATIVE_DIVISION") || "Administrative Division"}</CardHeader>
-      </div>
+      {/* ── Administrative Division ── */}
+      <SectionHead
+        icon={<PropertyHouse styles={{ fill: "#0B0C0C", width: "16px", height: "16px" }} />}
+        label={t("EKYC_ADMINISTRATIVE_DIVISION") || "Administrative Division"}
+      />
 
-      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "24px", marginBottom: "32px" }}>
-        <div
-          style={{
-            backgroundColor: "#F9FAFB",
-            padding: "16px",
-            borderRadius: "12px",
-            display: "flex",
-            alignItems: "center",
-            gap: "16px",
-            border: "1px solid #EAECF0",
-          }}
-        >
-          <div style={{ backgroundColor: "#E7F4EE", padding: "10px", borderRadius: "10px", display: "flex" }}>
-            <FlagIcon />
-          </div>
+      {isMdmsLoading ? <Loader /> : (
+        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px", marginBottom: "24px" }}>
           <div>
-            <div style={{ color: "#2E9E8F", fontSize: "12px", fontWeight: "700", textTransform: "uppercase", letterSpacing: "0.5px" }}>
-              {t("EKYC_ASSEMBLY") || "ASSEMBLY"}
+            <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
+              {t("EKYC_ASSEMBLY") || "Assembly Constituency"}
             </div>
-            <div style={{ fontSize: "15px", fontWeight: "700", color: "#101828", marginTop: "2px" }}>AC-12 Chandni Chowk</div>
-          </div>
-        </div>
-        <div
-          style={{
-            backgroundColor: "#F9FAFB",
-            padding: "16px",
-            borderRadius: "12px",
-            display: "flex",
-            alignItems: "center",
-            gap: "16px",
-            border: "1px solid #EAECF0",
-          }}
-        >
-          <div style={{ backgroundColor: "#EEF4FF", padding: "10px", borderRadius: "10px", display: "flex" }}>
-            <IdCardIcon />
+            <Dropdown
+              option={assemblies}
+              optionKey="name"
+              selected={assembly}
+              select={(val) => { setAssembly(val); setWard(null); }}
+              t={t}
+            />
           </div>
           <div>
-            <div style={{ color: "#0068faff", fontSize: "12px", fontWeight: "700", textTransform: "uppercase", letterSpacing: "0.5px" }}>
-              {t("EKYC_WARD") || "WARD"}
+            <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
+              {t("EKYC_WARD") || "Block"}
             </div>
-            <div style={{ fontSize: "15px", fontWeight: "700", color: "#101828", marginTop: "2px" }}>WARD-45 Civil Lines</div>
+            <Dropdown
+              option={blocks}
+              optionKey="name"
+              selected={ward}
+              select={setWard}
+              disabled={!assembly}
+              t={t}
+            />
           </div>
         </div>
-      </div>
+      )}
+
+      <hr style={{ margin: "24px 0", border: 0, borderTop: "1px solid #EAECF0" }} />
+
+      {/* ── Door Photo ── */}
+      <SectionHead
+        icon={<CameraIcon size={16} />}
+        label={t("EKYC_DOOR_PHOTO_HEADER") || "Door photo with GPS stamp"}
+      />
 
-      <CardHeader style={{ fontSize: "18px", color: "#101828", marginBottom: "4px" }}>
-        {t("EKYC_DOOR_PHOTO_HEADER") || "Door Photo with GPS Stamp"}
-      </CardHeader>
-      <div style={{ color: "#667085", fontSize: "14px", marginBottom: "16px" }}>
+      <div style={{ fontSize: "12px", color: "#667085", marginBottom: "12px" }}>
         {t("EKYC_REQUIRED_FOR_VERIFICATION") || "Required for verification"}
       </div>
 
-      <div
-        style={{
-          backgroundColor: "#FFFAEB",
-          padding: "14px",
-          borderRadius: "12px",
-          display: "flex",
-          alignItems: "center",
-          gap: "12px",
-          marginBottom: "20px",
-          border: "1px solid #FEDF89",
-        }}
-      >
-        <InfoBannerIcon fill="#B54708" />
+      {/* 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: "700", color: "#B54708", fontSize: "14px" }}>{t("EKYC_IMPORTANT") || "Important"}</div>
-          <div style={{ fontSize: "13px", color: "#B54708", marginTop: "2px" }}>
+          <div style={{ fontWeight: "600", color: "#B54708", fontSize: "13px", marginBottom: "2px" }}>
+            {t("EKYC_IMPORTANT") || "Important"}
+          </div>
+          <div style={{ fontSize: "12px", color: "#92400E" }}>
             {t("EKYC_CAPTURE_LIVE_CAMERA") || "Capture with live camera for GPS metadata"}
           </div>
         </div>
       </div>
 
+      {/* Drop zone */}
+      <input
+        type="file"
+        ref={fileInputRef}
+        onChange={handleCapture}
+        accept="image/*"
+        style={{ display: "none" }}
+      />
       <div
+        onClick={!doorPhoto ? () => fileInputRef.current.click() : undefined}
+        onMouseOver={(e) => { if (!doorPhoto) e.currentTarget.style.borderColor = "#185FA5"; }}
+        onMouseOut={(e) => { if (!doorPhoto) e.currentTarget.style.borderColor = "#D0D5DD"; }}
         style={{
-          border: "2px dashed #D0D5DD",
-          borderRadius: "16px",
-          padding: doorPhoto ? "12px" : "40px 24px",
-          textAlign: "center",
-          cursor: "pointer",
-          position: "relative",
-          overflow: "hidden",
-          minHeight: "180px",
+          border: "1.5px dashed #D0D5DD",
+          borderRadius: "10px",
+          minHeight: "160px",
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
           justifyContent: "center",
           backgroundColor: "#F9FAFB",
-          transition: "all 0.2s ease",
-          boxShadow: "inset 0px 2px 4px rgba(0, 0, 0, 0.02)",
+          cursor: doorPhoto ? "default" : "pointer",
+          overflow: "hidden",
+          transition: "border-color 0.15s",
+          position: "relative",
+          padding: doorPhoto ? "0" : "32px 24px",
         }}
-        onClick={!doorPhoto ? openGallery : undefined}
-        onMouseOver={(e) => (!doorPhoto ? (e.currentTarget.style.borderColor = "#0068faff") : null)}
-        onMouseOut={(e) => (!doorPhoto ? (e.currentTarget.style.borderColor = "#D0D5DD") : null)}
       >
-        <input type="file" ref={fileInputRef} onChange={handleCapture} accept="image/*" style={{ display: "none" }} />
         {!doorPhoto ? (
           <>
-            <div
-              style={{
-                backgroundColor: "#FFFFFF",
-                width: "64px",
-                height: "64px",
-                borderRadius: "50%",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                margin: "0 auto 16px",
-                boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1)",
-              }}
-            >
-              <CameraIcon />
+            <div style={{
+              width: "52px", height: "52px", borderRadius: "50%",
+              background: "#E6F1FB", display: "flex",
+              alignItems: "center", justifyContent: "center", marginBottom: "12px",
+            }}>
+              <CameraIcon size={26} />
+            </div>
+            <div style={{ fontWeight: "600", fontSize: "14px", color: "#101828", marginBottom: "4px" }}>
+              {t("EKYC_TAP_TO_CAPTURE") || "Tap to capture"}
             </div>
-            <div style={{ fontWeight: "700", fontSize: "16px", marginBottom: "4px", color: "#101828" }}>
-              {t("EKYC_TAP_TO_CAPTURE") || "Tap to Capture"}
+            <div style={{ fontSize: "12px", color: "#667085" }}>
+              {t("EKYC_CAPTURE_DOOR_IMAGE") || "Capture door image"}
             </div>
-            <div style={{ color: "#667085", fontSize: "14px" }}>{t("EKYC_CAPTURE_DOOR_IMAGE") || "Capture Door Image"}</div>
           </>
         ) : (
-          <div style={{ position: "relative", width: "100%", height: "100%", display: "flex", justifyContent: "center" }}>
+          <>
             <img
               src={doorPhoto}
               alt="Door"
-              style={{ width: "100%", maxHeight: "300px", objectFit: "cover", borderRadius: "12px", display: "block" }}
+              style={{ width: "100%", maxHeight: "280px", objectFit: "cover", display: "block" }}
             />
-            <div style={{ position: "absolute", top: "12px", right: "12px" }}>
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  removePhoto();
-                }}
-                style={{
-                  background: "#FFFFFF",
-                  border: "1px solid #EAECF0",
-                  borderRadius: "8px",
-                  padding: "8px",
-                  display: "flex",
-                  boxShadow: "0px 1px 2px rgba(16, 24, 40, 0.05)",
-                  cursor: "pointer",
-                }}
-              >
-                <RemoveableTag text="" onClick={() => {}} extraStyles={{ tagStyles: { margin: 0, padding: 0 } }} />
-              </button>
-            </div>
-          </div>
+            <button
+              onClick={(e) => { e.stopPropagation(); removePhoto(); }}
+              style={{
+                position: "absolute", top: "10px", right: "10px",
+                background: "#fff", border: "0.5px solid #EAECF0",
+                borderRadius: "7px", padding: "6px 10px",
+                display: "flex", alignItems: "center", gap: "5px",
+                cursor: "pointer", fontSize: "12px", color: "#D92D20", fontWeight: "500",
+              }}
+            >
+              <TrashIcon size={13} /> {t("EKYC_REMOVE") || "Remove"}
+            </button>
+          </>
         )}
       </div>
 
-      <ActionBar>
-        <SubmitBar
-          label={
-            isSection
-              ? t("EKYC_COMPLETE_VERIFICATION_AND_PROCEED") || "Complete & Proceed"
-              : t("EKYC_COMPLETE_VERIFICATION") || "Complete Verification"
-          }
-          onSubmit={handleCompleteVerification}
-        />
-      </ActionBar>
+      {/* Submit */}
+      {isSection ? (
+        <div style={{ marginTop: "24px" }}>
+          <SubmitBar
+            label={t("EKYC_COMPLETE_VERIFICATION_AND_PROCEED") || "Complete & Proceed"}
+            onSubmit={handleCompleteVerification}
+          />
+        </div>
+      ) : (
+        <ActionBar>
+          <SubmitBar
+            label={t("EKYC_COMPLETE_VERIFICATION") || "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") || "Your data is encrypted and secure"}
+      </div>
     </div>
   );
 
-  if (isSection) return renderContent();
+  // ── 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(10px); } to { opacity:1; transform:translateY(0); } }
-            `}</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">
-        {/* Sidebar Title Card */}
-        <Card
-          className="sidebar-title-card"
-          style={{ display: "flex", alignItems: "center", padding: "16px", marginBottom: "16px", borderRadius: "4px" }}
-        >
-          <div className="icon-container" style={{ color: "#0068faff", marginRight: "12px" }}>
-            <HomeIcon style={{ width: "24px", height: "24px" }} />
+        <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>
-          <div style={{ fontWeight: "700", fontSize: "18px", color: "#0B0C0C" }}>{t("EKYC_PROCESS")}</div>
         </Card>
 
-        {/* Progress Steps Sidebar */}
-        <div
-          style={{
-            backgroundColor: "#FFFFFF",
-            padding: "16px",
-            borderRadius: "8px",
-            border: "1px solid #EAECF0",
-            boxShadow: "0 2px 4px rgba(0,0,0,0.02)",
-          }}
-        >
-          <ConnectingCheckPoints>
-            <CheckPoint label={t("EKYC_STEP_AADHAAR") || "Aadhaar"} isCompleted={true} />
-            <CheckPoint label={t("EKYC_STEP_ADDRESS") || "Address"} isCompleted={true} />
-            <CheckPoint label={t("EKYC_STEP_PROPERTY") || "Property"} isCompleted={false} />
-            <CheckPoint label={t("EKYC_STEP_REVIEW") || "Review"} />
-          </ConnectingCheckPoints>
+        <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_REVIEW") || "Review", done: false, active: false },
+          ].map((step, i) => (
+            <div key={i} style={{ display: "flex", gap: "10px", alignItems: "flex-start", position: "relative", paddingBottom: i < 3 ? "18px" : 0 }}>
+              {i < 3 && (
+                <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: "24px" }}>
-            <Header>{t("EKYC_ADDRESS_DETAILS_HEADER") || "Address Details"}</Header>
-            <div style={{ fontSize: "14px", fontWeight: "700", color: "#505A5F" }}>
-              {t("EKYC_K_NUMBER")}: <span style={{ color: "#0B0C0C" }}>{flowState?.kNumber}</span>
+          <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()}
@@ -588,4 +745,4 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
   );
 };
 
-export default AddressDetails;
+export default AddressDetails;