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

package/dist/index.modern.js

@@ -1,6 +1,6 @@
-import React, { useMemo, useState, useCallback, useRef, Fragment } from 'react';
+import React, { useMemo, useState, useCallback, useRef, useEffect, Fragment } from 'react';
 import { Link, useHistory, useRouteMatch, useLocation, Switch } from 'react-router-dom';
-import { PersonIcon, EmployeeModuleCard, Card, HomeIcon, Table, Header, TextInput, SubmitBar, Loader, DetailsCard, FilterForm, FilterFormField, Dropdown, CardHeader, StatusTable, Row, CardLabel, Modal, RadioButtons, Toast, LocationIcon, LabelFieldPair, PropertyHouse, InfoBannerIcon, RemoveableTag, ActionBar, ConnectingCheckPoints, CheckPoint, TickMark, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute } from '@djb25/digit-ui-react-components';
+import { PersonIcon as PersonIcon$1, EmployeeModuleCard, Card, HomeIcon, Table, Header, TextInput, SubmitBar, Loader, DetailsCard, FilterForm, FilterFormField, Dropdown, CardHeader, StatusTable, Row, CardLabel, Modal, RadioButtons, Toast, LocationIcon, PropertyHouse, InfoBannerIcon, ActionBar, LabelFieldPair, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute } from '@djb25/digit-ui-react-components';
 import { useTranslation } from 'react-i18next';
 
 const EKYCCard = () => {
@@ -8,7 +8,7 @@ const EKYCCard = () => {
     t
   } = useTranslation();
   const propsForModuleCard = {
-    Icon: /*#__PURE__*/React.createElement(PersonIcon, null),
+    Icon: /*#__PURE__*/React.createElement(PersonIcon$1, null),
     moduleName: t("ACTION_TEST_EKYC"),
     kpis: [{
       count: "-",
@@ -107,23 +107,14 @@ const DesktopInbox = ({
       var _row$original2;
       return /*#__PURE__*/React.createElement("span", null, ((_row$original2 = row.original) === null || _row$original2 === void 0 ? void 0 : _row$original2.citizenName) || "NA");
     }
-  }, {
-    Header: t("EKYC_MOBILE_NO"),
-    accessor: "mobileNumber",
-    Cell: ({
-      row
-    }) => {
-      var _row$original3;
-      return /*#__PURE__*/React.createElement("span", null, ((_row$original3 = row.original) === null || _row$original3 === void 0 ? void 0 : _row$original3.mobileNumber) || "NA");
-    }
   }, {
     Header: t("EKYC_STATUS"),
     accessor: "status",
     Cell: ({
       row
     }) => {
-      var _row$original4;
-      const status = ((_row$original4 = row.original) === null || _row$original4 === void 0 ? void 0 : _row$original4.status) || "DEFAULT";
+      var _row$original3;
+      const status = ((_row$original3 = row.original) === null || _row$original3 === void 0 ? void 0 : _row$original3.status) || "DEFAULT";
       return /*#__PURE__*/React.createElement("span", {
         className: `ekyc-status-tag ${status}`
       }, t(`EKYC_STATUS_${status}`));
@@ -360,7 +351,13 @@ const SearchConsumer = ({
       paddingLeft: "12px",
       height: "44px"
     }
-  }))), /*#__PURE__*/React.createElement("div", {
+  })))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "flex-end",
+      marginTop: "20px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
       gap: "12px",
@@ -385,8 +382,7 @@ const SearchConsumer = ({
       margin: 0,
       borderRadius: "8px",
       height: "44px",
-      padding: "0 32px",
-      marginTop: "-55px"
+      padding: "0 32px"
     }
   }))))), children));
 };
@@ -522,32 +518,6 @@ const Filter = ({
   })));
 };
 
-const MOCK_DATA_ITEMS = [{
-  applicationNumber: "EKYC-2024-001",
-  citizenName: "Rahul Sharma",
-  mobileNumber: "9876543210",
-  status: "COMPLETED"
-}, {
-  applicationNumber: "EKYC-2024-002",
-  citizenName: "Anjali Devi",
-  mobileNumber: "9123456789",
-  status: "PENDING"
-}, {
-  applicationNumber: "EKYC-2024-003",
-  citizenName: "Amit Kumar",
-  mobileNumber: "8888888888",
-  status: "REJECTED"
-}, {
-  applicationNumber: "EKYC-2024-004",
-  citizenName: "Priya Singh",
-  mobileNumber: "7777777777",
-  status: "COMPLETED"
-}, {
-  applicationNumber: "EKYC-2024-005",
-  citizenName: "Suresh Gupta",
-  mobileNumber: "6666666666",
-  status: "PENDING"
-}];
 const Inbox = ({
   parentRoute,
   businessService: _businessService = "EKYC",
@@ -555,6 +525,7 @@ const Inbox = ({
   filterComponent,
   isInbox
 }) => {
+  var _searchParams$status, _dashboardData$dashbo2;
   const tenantId = Digit.ULBService.getCurrentTenantId();
   const {
     t
@@ -572,25 +543,37 @@ const Inbox = ({
   const [searchParams, setSearchParams] = useState(_initialStates.searchParams || {
     status: defaultStatusOption
   });
-  const filteredStaticData = useMemo(() => {
-    return MOCK_DATA_ITEMS.filter(item => {
-      var _searchParams$status;
-      let match = true;
-      const currentStatus = ((_searchParams$status = searchParams.status) === null || _searchParams$status === void 0 ? void 0 : _searchParams$status.value) !== undefined ? searchParams.status.value : searchParams.status;
-      if (currentStatus && item.status !== currentStatus) {
-        match = false;
-      }
-      return match;
-    });
-  }, [searchParams]);
-  const staticCountData = useMemo(() => {
+  const {
+    isLoading,
+    data: dashboardData,
+    isFetching
+  } = Digit.Hooks.ekyc.useEkycSurveyorDashboard({}, {
+    tenantId,
+    offset: pageOffset,
+    limit: pageSize,
+    status: ((_searchParams$status = searchParams.status) === null || _searchParams$status === void 0 ? void 0 : _searchParams$status.value) || ""
+  }, {
+    enabled: !!tenantId
+  });
+  const filteredData = useMemo(() => {
+    var _dashboardData$dashbo;
+    const items = (dashboardData === null || dashboardData === void 0 ? void 0 : (_dashboardData$dashbo = dashboardData.dashboardInfo) === null || _dashboardData$dashbo === void 0 ? void 0 : _dashboardData$dashbo.consumerList) || [];
+    return items.map(item => ({
+      ...item,
+      applicationNumber: item.kno || item.applicationNumber,
+      citizenName: item.consumerName || item.citizenName
+    }));
+  }, [dashboardData]);
+  const countData = useMemo(() => {
+    const info = (dashboardData === null || dashboardData === void 0 ? void 0 : dashboardData.dashboardInfo) || {};
     return {
-      total: MOCK_DATA_ITEMS.length,
-      completed: MOCK_DATA_ITEMS.filter(i => i.status === "COMPLETED").length,
-      pending: MOCK_DATA_ITEMS.filter(i => i.status === "PENDING").length,
-      rejected: MOCK_DATA_ITEMS.filter(i => i.status === "REJECTED").length
+      total: info.total || 0,
+      completed: info.completed || 0,
+      pending: info.pending || 0,
+      rejected: info.rejected || 0
     };
-  }, []);
+  }, [dashboardData]);
+  const totalRecords = (dashboardData === null || dashboardData === void 0 ? void 0 : (_dashboardData$dashbo2 = dashboardData.dashboardInfo) === null || _dashboardData$dashbo2 === void 0 ? void 0 : _dashboardData$dashbo2.totalRecords) || (dashboardData === null || dashboardData === void 0 ? void 0 : dashboardData.totalCount) || 0;
   const handleSearch = useCallback(filterParam => {
     setSearchParams(prev => ({
       ...prev,
@@ -633,22 +616,22 @@ const Inbox = ({
     className: "inbox-main-container"
   }, Digit.Utils.browser.isMobile() ? /*#__PURE__*/React.createElement(MobileInbox, {
     data: {
-      items: filteredStaticData,
-      totalCount: filteredStaticData.length
+      items: filteredData,
+      totalCount: totalRecords
     },
-    isLoading: false,
+    isLoading: isLoading || isFetching,
     onSearch: handleSearch,
     searchFields: searchFields,
     searchParams: searchParams,
     parentRoute: parentRoute,
-    countData: staticCountData
+    countData: countData
   }) : /*#__PURE__*/React.createElement(DesktopInbox, {
     businessService: _businessService,
     data: {
-      items: filteredStaticData,
-      totalCount: filteredStaticData.length
+      items: filteredData,
+      totalCount: totalRecords
     },
-    isLoading: false,
+    isLoading: isLoading || isFetching,
     searchFields: searchFields,
     onSearch: handleSearch,
     onSort: handleSort,
@@ -660,8 +643,8 @@ const Inbox = ({
     parentRoute: parentRoute,
     searchParams: searchParams,
     sortParams: sortParams,
-    totalRecords: filteredStaticData.length,
-    countData: staticCountData,
+    totalRecords: totalRecords,
+    countData: countData,
     filterComponent: "EKYC_INBOX_FILTER"
   })));
 };
@@ -724,27 +707,27 @@ const ConnectionDetailsView = ({
     style: {
       marginTop: "24px"
     }
-  }, t("EKYC_CONNECTION_DETAILS")), connectionDetails !== null && connectionDetails !== void 0 && connectionDetails.connectionDetailsInfo ? /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
+  }, t("EKYC_CONNECTION_DETAILS")), connectionDetails !== null && connectionDetails !== void 0 && connectionDetails.connectionDetails ? /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
     label: t("EKYC_CONSUMER_NAME"),
-    text: connectionDetails.connectionDetailsInfo.consumerName || t("CS_NA")
+    text: connectionDetails.connectionDetails.consumerName || t("CS_NA")
   }), /*#__PURE__*/React.createElement(Row, {
     label: t("EKYC_ADDRESS"),
-    text: connectionDetails.connectionDetailsInfo.address || t("CS_NA")
+    text: connectionDetails.connectionDetails.address || t("CS_NA")
   }), /*#__PURE__*/React.createElement(Row, {
     label: t("EKYC_CONNECTION_TYPE"),
-    text: connectionDetails.connectionDetailsInfo.connectionType || t("CS_NA")
+    text: connectionDetails.connectionDetails.connectionType || t("CS_NA")
   }), /*#__PURE__*/React.createElement(Row, {
     label: t("EKYC_METER_NO"),
-    text: connectionDetails.connectionDetailsInfo.meterNumber || t("CS_NA")
+    text: connectionDetails.connectionDetails.meterNumber || t("CS_NA")
   }), /*#__PURE__*/React.createElement(Row, {
     label: t("EKYC_PHONE_NO"),
-    text: connectionDetails.connectionDetailsInfo.phoneNumber || t("CS_NA")
+    text: connectionDetails.connectionDetails.phoneNumber || t("CS_NA")
   }), /*#__PURE__*/React.createElement(Row, {
     label: t("EKYC_EMAIL"),
-    text: connectionDetails.connectionDetailsInfo.email || t("CS_NA")
+    text: connectionDetails.connectionDetails.email || t("CS_NA")
   }), /*#__PURE__*/React.createElement(Row, {
     label: t("EKYC_STATUS"),
-    text: connectionDetails.connectionDetailsInfo.statusflag || t("CS_NA")
+    text: connectionDetails.connectionDetails.statusflag || t("CS_NA")
   })) : /*#__PURE__*/React.createElement(CardLabel, null, t("EKYC_NO_CONNECTION_DETAILS_FOUND")), /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
@@ -816,34 +799,19 @@ const Create = () => {
     data: connectionDetails,
     error,
     revalidate
-  } = Digit.Hooks.ekyc.useGetConnection({
+  } = Digit.Hooks.ekyc.useSearchConnection({
     tenantId,
     details: {
-      kno: searchParams.kNumber
+      kno: searchParams.kNumber,
+      name: searchParams.kName
     }
   }, {
-    enabled: searchPerformed && !!searchParams.kNumber
-  });
-  const {
-    mutate: validateUser,
-    isLoading: isValidating
-  } = Digit.Hooks.ekyc.useValidateUser(tenantId, {
-    onSuccess: data => {
-      var _data$responseInfo;
-      if ((data === null || data === void 0 ? void 0 : (_data$responseInfo = data.responseInfo) === null || _data$responseInfo === void 0 ? void 0 : _data$responseInfo.status) === "successful") ; else {
-        setShowToast({
-          error: true,
-          label: (data === null || data === void 0 ? void 0 : data.message) || t("EKYC_VALIDATION_FAILED")
-        });
-        setSearchPerformed(false);
-        sessionStorage.removeItem("EKYC_CREATE_SEARCH_PERFORMED");
-      }
-    },
+    enabled: searchPerformed && !!searchParams.kNumber && !!searchParams.kName,
     onError: error => {
       var _error$response, _error$response$data, _error$response$data$, _error$response$data$2;
       setShowToast({
         error: true,
-        label: (error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$data = _error$response.data) === null || _error$response$data === void 0 ? void 0 : (_error$response$data$ = _error$response$data.Errors) === null || _error$response$data$ === void 0 ? void 0 : (_error$response$data$2 = _error$response$data$[0]) === null || _error$response$data$2 === void 0 ? void 0 : _error$response$data$2.message) || t("EKYC_VALIDATION_ERROR_PLEASE_ENTER_THE_CORRECT_CREDENTIALS")
+        label: (error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : (_error$response$data = _error$response.data) === null || _error$response$data === void 0 ? void 0 : (_error$response$data$ = _error$response$data.Errors) === null || _error$response$data$ === void 0 ? void 0 : (_error$response$data$2 = _error$response$data$[0]) === null || _error$response$data$2 === void 0 ? void 0 : _error$response$data$2.message) || t("EKYC_SEARCH_ERROR_PLEASE_ENTER_THE_CORRECT_CREDENTIALS")
       });
       setSearchPerformed(false);
       sessionStorage.removeItem("EKYC_CREATE_SEARCH_PERFORMED");
@@ -871,10 +839,6 @@ const Create = () => {
     setSearchPerformed(true);
     sessionStorage.setItem("EKYC_CREATE_SEARCH_PARAMS", JSON.stringify(params));
     sessionStorage.setItem("EKYC_CREATE_SEARCH_PERFORMED", "true");
-    validateUser({
-      kno: params.kNumber,
-      name: params.kName
-    });
   };
   const closeToast = () => {
     setShowToast(null);
@@ -886,7 +850,7 @@ const Create = () => {
     kNumber: searchParams.kNumber,
     kName: searchParams.kName,
     connectionDetails: connectionDetails,
-    isLoading: isSearching || isValidating
+    isLoading: isSearching
   }), !searchPerformed && !isSearching && /*#__PURE__*/React.createElement(Card, {
     style: {
       textAlign: "center",
@@ -904,11 +868,140 @@ const Create = () => {
   }));
 };
 
+const CameraIcon = ({
+  size: _size3 = 28
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: _size3,
+  height: _size3,
+  viewBox: "0 0 24 24",
+  fill: "none"
+}, /*#__PURE__*/React.createElement("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"
+}));
+const TargetIcon = ({
+  size: _size4 = 20
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: _size4,
+  height: _size4,
+  viewBox: "0 0 24 24",
+  fill: "none"
+}, /*#__PURE__*/React.createElement("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"
+}));
+const PincodeIcon = ({
+  size: _size5 = 18
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: _size5,
+  height: _size5,
+  viewBox: "0 0 24 24",
+  fill: "none"
+}, /*#__PURE__*/React.createElement("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"
+}));
+const TrashIcon = ({
+  size: _size6 = 16
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: _size6,
+  height: _size6,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "#D92D20",
+  strokeWidth: "2",
+  strokeLinecap: "round"
+}, /*#__PURE__*/React.createElement("polyline", {
+  points: "3 6 5 6 21 6"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M10 11v6M14 11v6"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"
+}));
+const CheckIcon = ({
+  size: _size7 = 11,
+  color: _color = "#fff"
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: _size7,
+  height: _size7,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: _color,
+  strokeWidth: "3",
+  strokeLinecap: "round"
+}, /*#__PURE__*/React.createElement("polyline", {
+  points: "20 6 9 17 4 12"
+}));
+const IconInput = ({
+  icon,
+  topAligned: _topAligned = false,
+  inputStyle: _inputStyle = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("div", {
+  style: {
+    position: "relative",
+    width: "100%"
+  }
+}, /*#__PURE__*/React.createElement("div", {
+  style: {
+    position: "absolute",
+    left: "10px",
+    ...(_topAligned ? {
+      top: "14px"
+    } : {
+      top: "50%",
+      transform: "translateY(-50%)"
+    }),
+    zIndex: 1,
+    opacity: 0.45,
+    display: "flex",
+    pointerEvents: "none"
+  }
+}, icon), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+  textInputStyle: {
+    paddingLeft: "36px",
+    paddingRight: "12px",
+    ..._inputStyle
+  }
+}, props)));
+const SectionHead = ({
+  icon,
+  label
+}) => /*#__PURE__*/React.createElement("div", {
+  style: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    marginBottom: "16px",
+    marginTop: "4px"
+  }
+}, /*#__PURE__*/React.createElement("div", {
+  style: {
+    opacity: 0.5,
+    display: "flex"
+  }
+}, icon), /*#__PURE__*/React.createElement("span", {
+  style: {
+    fontSize: "15px",
+    fontWeight: "600",
+    color: "#0B0C0C",
+    whiteSpace: "nowrap"
+  }
+}, label), /*#__PURE__*/React.createElement("div", {
+  style: {
+    flex: 1,
+    height: "1px",
+    background: "#EAECF0"
+  }
+}));
 const AddressDetails = ({
   isSection: _isSection = false,
   onComplete,
   parentState
 }) => {
+  var _flowState$connection, _mdmsRes$egovLocatio, _mdmsRes$egovLocatio$, _mdmsRes$egovLocatio2, _mdmsRes$egovLocatio3;
   const {
     t
   } = useTranslation();
@@ -922,6 +1015,7 @@ const AddressDetails = ({
     },
     connectionDetails: null
   };
+  const addrDetails = ((_flowState$connection = flowState.connectionDetails) === null || _flowState$connection === void 0 ? void 0 : _flowState$connection.addressDetails) || {};
   const [addressType, setAddressType] = useState({
     code: "AADHAAR",
     name: "EKYC_AADHAAR_ADDRESS"
@@ -930,14 +1024,80 @@ const AddressDetails = ({
     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 === null || mdmsData === void 0 ? void 0 : mdmsData.MdmsRes) || mdmsData;
+  const adminHierarchy = (mdmsRes === null || mdmsRes === void 0 ? void 0 : (_mdmsRes$egovLocatio = mdmsRes["egov-location"]) === null || _mdmsRes$egovLocatio === void 0 ? void 0 : (_mdmsRes$egovLocatio$ = _mdmsRes$egovLocatio.TenantBoundary) === null || _mdmsRes$egovLocatio$ === void 0 ? void 0 : _mdmsRes$egovLocatio$.find(h => h.hierarchyType.code === "ADMIN")) || (mdmsRes === null || mdmsRes === void 0 ? void 0 : (_mdmsRes$egovLocatio2 = mdmsRes["egov-location"]) === null || _mdmsRes$egovLocatio2 === void 0 ? void 0 : (_mdmsRes$egovLocatio3 = _mdmsRes$egovLocatio2.TenantBoundary) === null || _mdmsRes$egovLocatio3 === void 0 ? void 0 : _mdmsRes$egovLocatio3[0]);
+  const rootBoundary = adminHierarchy === null || adminHierarchy === void 0 ? void 0 : adminHierarchy.boundary;
+  const getAssemblies = boundaries => {
+    if (!boundaries) return [];
+    let assemblies = [];
+    const targetLabel = "assembly constituency";
+    for (const boundary of boundaries) {
+      var _boundary$children;
+      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 = boundary.children) !== null && _boundary$children !== void 0 && _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) {
+      var _child$children;
+      const label = (child.label || child.name || "").toLowerCase().replace(/_/g, " ");
+      if (label === targetLabel) {
+        blocks.push({
+          code: child.code,
+          name: child.name
+        });
+      }
+      if ((_child$children = child.children) !== null && _child$children !== void 0 && _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 !== null && assembly !== void 0 && 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"
@@ -953,16 +1113,19 @@ const AddressDetails = ({
     name: "CORE_COMMON_NO"
   }];
   const handleCompleteVerification = () => {
+    const payload = {
+      addressType,
+      fullAddress,
+      flatNo,
+      building,
+      landmark,
+      pincode,
+      doorPhoto,
+      assembly: assembly === null || assembly === void 0 ? void 0 : assembly.name,
+      ward: ward === null || ward === void 0 ? void 0 : ward.name
+    };
     if (onComplete) {
-      onComplete({
-        addressType,
-        fullAddress,
-        flatNo,
-        building,
-        landmark,
-        pincode,
-        doorPhoto
-      });
+      onComplete(payload);
     } else {
       const {
         kNumber,
@@ -973,30 +1136,16 @@ const AddressDetails = ({
         kNumber,
         selectedOption,
         connectionDetails,
-        addressDetails: {
-          addressType,
-          fullAddress,
-          flatNo,
-          building,
-          landmark,
-          pincode,
-          doorPhoto
-        }
+        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 = () => {
     setDoorPhoto(null);
@@ -1008,105 +1157,55 @@ const AddressDetails = ({
       return;
     }
     setIsLocationFetching(true);
-    navigator.geolocation.getCurrentPosition(async position => {
-      const {
+    navigator.geolocation.getCurrentPosition(async ({
+      coords: {
         latitude,
         longitude
-      } = position.coords;
+      }
+    }) => {
       try {
-        const response = 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) {
-          var _data$address, _data$address2, _data$address3, _data$address4, _data$address5, _data$address6, _data$address7, _data$address8, _data$address9, _data$address0, _data$address1;
-          const addr = [(_data$address = data.address) === null || _data$address === void 0 ? void 0 : _data$address.amenity, (_data$address2 = data.address) === null || _data$address2 === void 0 ? void 0 : _data$address2.road, (_data$address3 = data.address) === null || _data$address3 === void 0 ? void 0 : _data$address3.neighbourhood, (_data$address4 = data.address) === null || _data$address4 === void 0 ? void 0 : _data$address4.suburb, (_data$address5 = data.address) === null || _data$address5 === void 0 ? void 0 : _data$address5.city, (_data$address6 = data.address) === null || _data$address6 === void 0 ? void 0 : _data$address6.state, (_data$address7 = data.address) === null || _data$address7 === void 0 ? void 0 : _data$address7.postcode].filter(Boolean).join(", ");
-          setFullAddress(addr || "");
-          setPincode(((_data$address8 = data.address) === null || _data$address8 === void 0 ? void 0 : _data$address8.postcode) || "");
-          setLandmark(((_data$address9 = data.address) === null || _data$address9 === void 0 ? void 0 : _data$address9.suburb) || ((_data$address0 = data.address) === null || _data$address0 === void 0 ? void 0 : _data$address0.neighbourhood) || "");
-          setFlatNo(((_data$address1 = data.address) === null || _data$address1 === void 0 ? void 0 : _data$address1.amenity) || "");
+        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 !== null && data !== void 0 && 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 = () => /*#__PURE__*/React.createElement("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M14.4 6L13.6 4H5V21H7V14H12.6L13.4 16H20V6H14.4Z",
-    fill: "#2E9E8F"
-  }));
-  const IdCardIcon = () => /*#__PURE__*/React.createElement("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("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"
-  }));
-  const CameraIcon = () => /*#__PURE__*/React.createElement("svg", {
-    width: "32",
-    height: "32",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("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"
-  }));
-  const TargetIcon = () => /*#__PURE__*/React.createElement("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("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"
-  }));
-  const PincodeIcon = () => /*#__PURE__*/React.createElement("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("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"
-  }));
   const renderContent = () => /*#__PURE__*/React.createElement("div", {
     style: {
       animation: "fadeSlideIn 0.3s ease"
     }
-  }, _isSection && /*#__PURE__*/React.createElement("hr", {
-    style: {
-      margin: "40px 0",
-      border: "0",
-      borderTop: "2px solid #EAECF0"
-    }
-  }), /*#__PURE__*/React.createElement(Header, {
-    style: {
-      marginBottom: "24px"
-    }
-  }, t("EKYC_ADDRESS_DETAILS_HEADER") || "Address Details"), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(SectionHead, {
+    icon: /*#__PURE__*/React.createElement(LocationIcon, {
+      className: "icon",
+      styles: {
+        fill: "#0B0C0C",
+        width: "16px",
+        height: "16px"
+      }
+    }),
+    label: t("EKYC_ADDRESS_DETAILS_HEADER") || "Address Details"
+  }), /*#__PURE__*/React.createElement("div", {
     style: {
-      marginBottom: "32px"
+      marginBottom: "20px"
     }
   }, /*#__PURE__*/React.createElement(RadioButtons, {
     options: addressOptions,
@@ -1120,56 +1219,61 @@ const AddressDetails = ({
     },
     style: {
       display: "flex",
-      gap: "50px",
-      justifyContent: "flex-start"
+      gap: "40px"
     }
   })), addressType.code === "AADHAAR" && /*#__PURE__*/React.createElement("div", {
     style: {
-      backgroundColor: "#F9FAFB",
-      padding: "16px",
-      borderRadius: "12px",
-      marginBottom: "24px",
-      border: "1px solid #EAECF0",
+      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"
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      backgroundColor: "#E7F4EE",
-      padding: "8px",
-      borderRadius: "8px"
+      backgroundColor: "#9FE1CB",
+      padding: "6px",
+      borderRadius: "6px",
+      display: "flex",
+      flexShrink: 0
     }
   }, /*#__PURE__*/React.createElement(LocationIcon, {
     className: "icon",
     styles: {
-      fill: "#2E9E8F",
-      width: "20px",
-      height: "20px"
+      fill: "#085041",
+      width: "16px",
+      height: "16px"
     }
   })), /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: "16px",
+      fontSize: "14px",
       lineHeight: "1.6",
-      color: "#344054",
+      color: "#04342C",
       fontWeight: "500"
     }
-  }, "H.No. 123, Sector 15, Rohini", /*#__PURE__*/React.createElement("br", null), "Delhi - 110085")), addressType.code === "OLD" && /*#__PURE__*/React.createElement("div", {
+  }, addrDetails.fullAddress || "H.No. 123, Sector 15, Rohini, Delhi – 110085")), addressType.code === "OLD" && /*#__PURE__*/React.createElement("div", {
     style: {
       animation: "fadeSlideIn 0.3s ease"
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      marginBottom: "24px"
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginBottom: "14px"
     }
   }, /*#__PURE__*/React.createElement(CardLabel, {
     style: {
-      marginBottom: "12px",
-      fontWeight: "600",
-      color: "#344054"
+      fontWeight: "500",
+      marginBottom: 0,
+      fontSize: "13px",
+      color: "#505A5F"
     }
-  }, t("EKYC_ADDRESS_CORRECTION_PROMPT") || "Do you want to correct the address?"), /*#__PURE__*/React.createElement(RadioButtons, {
+  }, t("EKYC_ADDRESS_CORRECTION_PROMPT") || "Correct the address?"), /*#__PURE__*/React.createElement(RadioButtons, {
     options: yesNoOptions,
     optionsKey: "name",
     selectedOption: correctAddress,
@@ -1177,31 +1281,32 @@ const AddressDetails = ({
     t: t,
     innerStyles: {
       display: "flex",
-      alignItems: "center"
+      gap: "20px"
     },
     style: {
-      display: "flex",
-      gap: "50px",
-      justifyContent: "flex-start"
+      marginBottom: 0
     }
   })), /*#__PURE__*/React.createElement("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",
-      opacity: isLocationFetching ? 0.7 : 1,
-      boxShadow: "0px 1px 2px rgba(16, 24, 40, 0.05)"
+      backgroundColor: isLocationFetching ? "#F9FAFB" : "#fff",
+      transition: "background 0.15s",
+      opacity: isLocationFetching ? 0.7 : 1
     },
-    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";
+    }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
@@ -1210,347 +1315,260 @@ const AddressDetails = ({
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      backgroundColor: "#EEF4FF",
-      padding: "8px",
-      borderRadius: "8px"
+      backgroundColor: "#E6F1FB",
+      padding: "7px",
+      borderRadius: "7px",
+      display: "flex"
     }
   }, isLocationFetching ? /*#__PURE__*/React.createElement("div", {
-    className: "location-loader",
     style: {
-      width: "20px",
-      height: "20px",
-      border: "2px solid #0068faff",
+      width: "18px",
+      height: "18px",
+      border: "2px solid #185FA5",
       borderTopColor: "transparent",
       borderRadius: "50%",
       animation: "spin 1s linear infinite"
     }
-  }) : /*#__PURE__*/React.createElement(TargetIcon, null)), /*#__PURE__*/React.createElement("span", {
+  }) : /*#__PURE__*/React.createElement(TargetIcon, {
+    size: 18
+  })), /*#__PURE__*/React.createElement("span", {
     style: {
-      fontWeight: "600",
+      fontWeight: "500",
+      fontSize: "14px",
       color: "#344054"
     }
-  }, isLocationFetching ? t("EKYC_FETCHING_LOCATION") || "Fetching Location..." : t("EKYC_USE_CURRENT_LOCATION") || "Use Current Location")), !isLocationFetching && /*#__PURE__*/React.createElement("span", {
+  }, isLocationFetching ? t("EKYC_FETCHING_LOCATION") || "Fetching location..." : t("EKYC_USE_CURRENT_LOCATION") || "Use current location")), !isLocationFetching && /*#__PURE__*/React.createElement("span", {
     style: {
-      fontSize: "20px",
-      color: "#98A2B3"
-    }
-  }, "\u203A")), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
-    style: {
-      fontWeight: "600"
+      fontSize: "18px",
+      color: "#98A2B3",
+      lineHeight: 1
     }
-  }, t("EKYC_FULL_ADDRESS") || "Full Address"), /*#__PURE__*/React.createElement("div", {
-    className: "field",
+  }, "\u203A")), /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "relative"
+      marginBottom: "14px"
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "absolute",
-      left: "12px",
-      top: "16px",
-      zIndex: 1,
-      opacity: 0.6
-    }
-  }, /*#__PURE__*/React.createElement(PropertyHouse, {
-    styles: {
-      fill: "#0068faff",
-      width: "20px",
-      height: "20px"
-    }
-  })), /*#__PURE__*/React.createElement(TextInput, {
+      fontSize: "11px",
+      fontWeight: "600",
+      color: "#667085",
+      textTransform: "uppercase",
+      letterSpacing: "0.04em",
+      marginBottom: "6px"
+    }
+  }, t("EKYC_FULL_ADDRESS") || "Full address"), /*#__PURE__*/React.createElement(IconInput, {
+    icon: /*#__PURE__*/React.createElement(PropertyHouse, {
+      styles: {
+        fill: "#0068fa",
+        width: "15px",
+        height: "15px"
+      }
+    }),
+    topAligned: true,
     value: fullAddress,
     onChange: e => setFullAddress(e.target.value),
-    placeholder: t("EKYC_ENTER_FULL_ADDRESS") || "Enter Full Address",
-    textInputStyle: {
-      paddingLeft: "40px",
-      minHeight: "80px"
+    placeholder: t("EKYC_ENTER_FULL_ADDRESS") || "Enter full address",
+    inputStyle: {
+      minHeight: "72px"
     }
-  }))), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     style: {
       display: "grid",
       gridTemplateColumns: "1fr 1fr",
-      gap: "24px"
-    }
-  }, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
-    style: {
-      fontWeight: "600"
-    }
-  }, t("EKYC_FLAT_HOUSE_NUMBER") || "Flat/House Number"), /*#__PURE__*/React.createElement("div", {
-    className: "field",
-    style: {
-      position: "relative"
+      gap: "14px",
+      marginBottom: "14px"
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "absolute",
-      left: "12px",
-      top: "50%",
-      transform: "translateY(-50%)",
-      zIndex: 1,
-      opacity: 0.6
-    }
-  }, /*#__PURE__*/React.createElement(PropertyHouse, {
-    styles: {
-      fill: "#0068faff",
-      width: "20px",
-      height: "20px"
-    }
-  })), /*#__PURE__*/React.createElement(TextInput, {
+      fontSize: "11px",
+      fontWeight: "600",
+      color: "#667085",
+      textTransform: "uppercase",
+      letterSpacing: "0.04em",
+      marginBottom: "6px"
+    }
+  }, t("EKYC_FLAT_HOUSE_NUMBER") || "Flat / House no."), /*#__PURE__*/React.createElement(IconInput, {
+    icon: /*#__PURE__*/React.createElement(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",
-    textInputStyle: {
-      paddingLeft: "40px"
-    }
-  }))), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
-    style: {
-      fontWeight: "600"
-    }
-  }, t("EKYC_BUILDING_TOWER") || "Building/Tower"), /*#__PURE__*/React.createElement("div", {
-    className: "field",
-    style: {
-      position: "relative"
-    }
-  }, /*#__PURE__*/React.createElement("div", {
+    placeholder: t("EKYC_ENTER_FLAT_NO") || "e.g. 45-B"
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "absolute",
-      left: "12px",
-      top: "50%",
-      transform: "translateY(-50%)",
-      zIndex: 1,
-      opacity: 0.6
-    }
-  }, /*#__PURE__*/React.createElement(PropertyHouse, {
-    styles: {
-      fill: "#0068faff",
-      width: "20px",
-      height: "20px"
-    }
-  })), /*#__PURE__*/React.createElement(TextInput, {
+      fontSize: "11px",
+      fontWeight: "600",
+      color: "#667085",
+      textTransform: "uppercase",
+      letterSpacing: "0.04em",
+      marginBottom: "6px"
+    }
+  }, t("EKYC_BUILDING_TOWER") || "Building / Tower"), /*#__PURE__*/React.createElement(IconInput, {
+    icon: /*#__PURE__*/React.createElement(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",
-    textInputStyle: {
-      paddingLeft: "40px"
-    }
-  })))), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
-    style: {
-      fontWeight: "600"
-    }
-  }, t("EKYC_LANDMARK") || "Landmark"), /*#__PURE__*/React.createElement("div", {
-    className: "field",
+    placeholder: t("EKYC_ENTER_BUILDING") || "e.g. Tower 4"
+  }))), /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "relative"
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr",
+      gap: "14px",
+      marginBottom: "4px"
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "absolute",
-      left: "12px",
-      top: "50%",
-      transform: "translateY(-50%)",
-      zIndex: 1,
-      opacity: 0.6
-    }
-  }, /*#__PURE__*/React.createElement(LocationIcon, {
-    className: "icon",
-    styles: {
-      fill: "#0068faff",
-      width: "20px",
-      height: "20px"
-    }
-  })), /*#__PURE__*/React.createElement(TextInput, {
+      fontSize: "11px",
+      fontWeight: "600",
+      color: "#667085",
+      textTransform: "uppercase",
+      letterSpacing: "0.04em",
+      marginBottom: "6px"
+    }
+  }, t("EKYC_LANDMARK") || "Landmark"), /*#__PURE__*/React.createElement(IconInput, {
+    icon: /*#__PURE__*/React.createElement(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"
-    }
-  }))), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
+    placeholder: t("EKYC_ENTER_LANDMARK") || "Near Central Park"
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     style: {
-      fontWeight: "600"
+      fontSize: "11px",
+      fontWeight: "600",
+      color: "#667085",
+      textTransform: "uppercase",
+      letterSpacing: "0.04em",
+      marginBottom: "6px"
     }
-  }, t("EKYC_PINCODE") || "Pincode"), /*#__PURE__*/React.createElement("div", {
-    className: "field",
-    style: {
-      position: "relative"
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: "absolute",
-      left: "12px",
-      top: "50%",
-      transform: "translateY(-50%)",
-      zIndex: 1,
-      opacity: 0.6
-    }
-  }, /*#__PURE__*/React.createElement(PincodeIcon, null)), /*#__PURE__*/React.createElement(TextInput, {
+  }, t("EKYC_PINCODE") || "Pincode"), /*#__PURE__*/React.createElement(IconInput, {
+    icon: /*#__PURE__*/React.createElement(PincodeIcon, {
+      size: 15
+    }),
     value: pincode,
-    onChange: e => setPincode(e.target.value),
-    placeholder: t("EKYC_ENTER_PINCODE") || "6-digit pincode",
-    textInputStyle: {
-      paddingLeft: "40px"
+    onChange: e => {
+      if (/^\d*$/.test(e.target.value)) setPincode(e.target.value);
     },
+    placeholder: t("EKYC_ENTER_PINCODE") || "6-digit pincode",
     maxLength: 6
   })))), /*#__PURE__*/React.createElement("hr", {
     style: {
-      margin: "32px 0",
-      border: "0",
+      margin: "24px 0",
+      border: 0,
       borderTop: "1px solid #EAECF0"
     }
-  }), /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      alignItems: "center",
-      gap: "10px",
-      marginBottom: "20px"
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      backgroundColor: "#EEF4FF",
-      padding: "8px",
-      borderRadius: "8px"
-    }
-  }, /*#__PURE__*/React.createElement(PropertyHouse, {
-    styles: {
-      fill: "#0068faff",
-      width: "24px",
-      height: "24px"
-    }
-  })), /*#__PURE__*/React.createElement(CardHeader, {
-    style: {
-      margin: 0,
-      fontSize: "20px"
-    }
-  }, t("EKYC_ADMINISTRATIVE_DIVISION") || "Administrative Division")), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement(SectionHead, {
+    icon: /*#__PURE__*/React.createElement(PropertyHouse, {
+      styles: {
+        fill: "#0B0C0C",
+        width: "16px",
+        height: "16px"
+      }
+    }),
+    label: t("EKYC_ADMINISTRATIVE_DIVISION") || "Administrative Division"
+  }), isMdmsLoading ? /*#__PURE__*/React.createElement(Loader, null) : /*#__PURE__*/React.createElement("div", {
     style: {
       display: "grid",
       gridTemplateColumns: "1fr 1fr",
-      gap: "24px",
-      marginBottom: "32px"
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      backgroundColor: "#F9FAFB",
-      padding: "16px",
-      borderRadius: "12px",
-      display: "flex",
-      alignItems: "center",
-      gap: "16px",
-      border: "1px solid #EAECF0"
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      backgroundColor: "#E7F4EE",
-      padding: "10px",
-      borderRadius: "10px",
-      display: "flex"
+      gap: "14px",
+      marginBottom: "24px"
     }
-  }, /*#__PURE__*/React.createElement(FlagIcon, null)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     style: {
-      color: "#2E9E8F",
-      fontSize: "12px",
-      fontWeight: "700",
+      fontSize: "11px",
+      fontWeight: "600",
+      color: "#667085",
       textTransform: "uppercase",
-      letterSpacing: "0.5px"
-    }
-  }, t("EKYC_ASSEMBLY") || "ASSEMBLY"), /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: "15px",
-      fontWeight: "700",
-      color: "#101828",
-      marginTop: "2px"
-    }
-  }, "AC-12 Chandni Chowk"))), /*#__PURE__*/React.createElement("div", {
-    style: {
-      backgroundColor: "#F9FAFB",
-      padding: "16px",
-      borderRadius: "12px",
-      display: "flex",
-      alignItems: "center",
-      gap: "16px",
-      border: "1px solid #EAECF0"
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      backgroundColor: "#EEF4FF",
-      padding: "10px",
-      borderRadius: "10px",
-      display: "flex"
-    }
-  }, /*#__PURE__*/React.createElement(IdCardIcon, null)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      letterSpacing: "0.04em",
+      marginBottom: "6px"
+    }
+  }, t("EKYC_ASSEMBLY") || "Assembly Constituency"), /*#__PURE__*/React.createElement(Dropdown, {
+    option: assemblies,
+    optionKey: "name",
+    selected: assembly,
+    select: val => {
+      setAssembly(val);
+      setWard(null);
+    },
+    t: t
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     style: {
-      color: "#0068faff",
-      fontSize: "12px",
-      fontWeight: "700",
+      fontSize: "11px",
+      fontWeight: "600",
+      color: "#667085",
       textTransform: "uppercase",
-      letterSpacing: "0.5px"
-    }
-  }, t("EKYC_WARD") || "WARD"), /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: "15px",
-      fontWeight: "700",
-      color: "#101828",
-      marginTop: "2px"
-    }
-  }, "WARD-45 Civil Lines")))), /*#__PURE__*/React.createElement(CardHeader, {
+      letterSpacing: "0.04em",
+      marginBottom: "6px"
+    }
+  }, t("EKYC_WARD") || "Block"), /*#__PURE__*/React.createElement(Dropdown, {
+    option: blocks,
+    optionKey: "name",
+    selected: ward,
+    select: setWard,
+    disabled: !assembly,
+    t: t
+  }))), /*#__PURE__*/React.createElement("hr", {
     style: {
-      fontSize: "18px",
-      color: "#101828",
-      marginBottom: "4px"
+      margin: "24px 0",
+      border: 0,
+      borderTop: "1px solid #EAECF0"
     }
-  }, t("EKYC_DOOR_PHOTO_HEADER") || "Door Photo with GPS Stamp"), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement(SectionHead, {
+    icon: /*#__PURE__*/React.createElement(CameraIcon, {
+      size: 16
+    }),
+    label: t("EKYC_DOOR_PHOTO_HEADER") || "Door photo with GPS stamp"
+  }), /*#__PURE__*/React.createElement("div", {
     style: {
+      fontSize: "12px",
       color: "#667085",
-      fontSize: "14px",
-      marginBottom: "16px"
+      marginBottom: "12px"
     }
   }, t("EKYC_REQUIRED_FOR_VERIFICATION") || "Required for verification"), /*#__PURE__*/React.createElement("div", {
     style: {
       backgroundColor: "#FFFAEB",
-      padding: "14px",
-      borderRadius: "12px",
+      border: "0.5px solid #FEDF89",
+      borderRadius: "8px",
+      padding: "12px 14px",
       display: "flex",
-      alignItems: "center",
-      gap: "12px",
-      marginBottom: "20px",
-      border: "1px solid #FEDF89"
+      alignItems: "flex-start",
+      gap: "10px",
+      marginBottom: "16px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flexShrink: 0,
+      marginTop: "1px"
     }
   }, /*#__PURE__*/React.createElement(InfoBannerIcon, {
     fill: "#B54708"
-  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     style: {
-      fontWeight: "700",
+      fontWeight: "600",
       color: "#B54708",
-      fontSize: "14px"
+      fontSize: "13px",
+      marginBottom: "2px"
     }
   }, t("EKYC_IMPORTANT") || "Important"), /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: "13px",
-      color: "#B54708",
-      marginTop: "2px"
+      fontSize: "12px",
+      color: "#92400E"
     }
-  }, t("EKYC_CAPTURE_LIVE_CAMERA") || "Capture with live camera for GPS metadata"))), /*#__PURE__*/React.createElement("div", {
-    style: {
-      border: "2px dashed #D0D5DD",
-      borderRadius: "16px",
-      padding: doorPhoto ? "12px" : "40px 24px",
-      textAlign: "center",
-      cursor: "pointer",
-      position: "relative",
-      overflow: "hidden",
-      minHeight: "180px",
-      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)"
-    },
-    onClick: !doorPhoto ? openGallery : undefined,
-    onMouseOver: e => !doorPhoto ? e.currentTarget.style.borderColor = "#0068faff" : null,
-    onMouseOut: e => !doorPhoto ? e.currentTarget.style.borderColor = "#D0D5DD" : null
-  }, /*#__PURE__*/React.createElement("input", {
+  }, t("EKYC_CAPTURE_LIVE_CAMERA") || "Capture with live camera for GPS metadata"))), /*#__PURE__*/React.createElement("input", {
     type: "file",
     ref: fileInputRef,
     onChange: handleCapture,
@@ -1558,135 +1576,232 @@ const AddressDetails = ({
     style: {
       display: "none"
     }
-  }), !doorPhoto ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("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: {
-      backgroundColor: "#FFFFFF",
-      width: "64px",
-      height: "64px",
-      borderRadius: "50%",
+      border: "1.5px dashed #D0D5DD",
+      borderRadius: "10px",
+      minHeight: "160px",
       display: "flex",
+      flexDirection: "column",
       alignItems: "center",
       justifyContent: "center",
-      margin: "0 auto 16px",
-      boxShadow: "0px 1px 3px rgba(16, 24, 40, 0.1)"
+      backgroundColor: "#F9FAFB",
+      cursor: doorPhoto ? "default" : "pointer",
+      overflow: "hidden",
+      transition: "border-color 0.15s",
+      position: "relative",
+      padding: doorPhoto ? "0" : "32px 24px"
     }
-  }, /*#__PURE__*/React.createElement(CameraIcon, null)), /*#__PURE__*/React.createElement("div", {
+  }, !doorPhoto ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: {
-      fontWeight: "700",
-      fontSize: "16px",
-      marginBottom: "4px",
-      color: "#101828"
+      width: "52px",
+      height: "52px",
+      borderRadius: "50%",
+      background: "#E6F1FB",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      marginBottom: "12px"
     }
-  }, t("EKYC_TAP_TO_CAPTURE") || "Tap to Capture"), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(CameraIcon, {
+    size: 26
+  })), /*#__PURE__*/React.createElement("div", {
     style: {
-      color: "#667085",
-      fontSize: "14px"
+      fontWeight: "600",
+      fontSize: "14px",
+      color: "#101828",
+      marginBottom: "4px"
     }
-  }, t("EKYC_CAPTURE_DOOR_IMAGE") || "Capture Door Image")) : /*#__PURE__*/React.createElement("div", {
+  }, t("EKYC_TAP_TO_CAPTURE") || "Tap to capture"), /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "relative",
-      width: "100%",
-      height: "100%",
-      display: "flex",
-      justifyContent: "center"
+      fontSize: "12px",
+      color: "#667085"
     }
-  }, /*#__PURE__*/React.createElement("img", {
+  }, t("EKYC_CAPTURE_DOOR_IMAGE") || "Capture door image")) : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("img", {
     src: doorPhoto,
     alt: "Door",
     style: {
       width: "100%",
-      maxHeight: "300px",
+      maxHeight: "280px",
       objectFit: "cover",
-      borderRadius: "12px",
       display: "block"
     }
-  }), /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: "absolute",
-      top: "12px",
-      right: "12px"
-    }
-  }, /*#__PURE__*/React.createElement("button", {
+  }), /*#__PURE__*/React.createElement("button", {
     onClick: e => {
       e.stopPropagation();
       removePhoto();
     },
     style: {
-      background: "#FFFFFF",
-      border: "1px solid #EAECF0",
-      borderRadius: "8px",
-      padding: "8px",
+      position: "absolute",
+      top: "10px",
+      right: "10px",
+      background: "#fff",
+      border: "0.5px solid #EAECF0",
+      borderRadius: "7px",
+      padding: "6px 10px",
       display: "flex",
-      boxShadow: "0px 1px 2px rgba(16, 24, 40, 0.05)",
-      cursor: "pointer"
-    }
-  }, /*#__PURE__*/React.createElement(RemoveableTag, {
-    text: "",
-    onClick: () => {},
-    extraStyles: {
-      tagStyles: {
-        margin: 0,
-        padding: 0
-      }
+      alignItems: "center",
+      gap: "5px",
+      cursor: "pointer",
+      fontSize: "12px",
+      color: "#D92D20",
+      fontWeight: "500"
+    }
+  }, /*#__PURE__*/React.createElement(TrashIcon, {
+    size: 13
+  }), " ", t("EKYC_REMOVE") || "Remove"))), _isSection ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: "24px"
     }
-  }))))), /*#__PURE__*/React.createElement(ActionBar, null, /*#__PURE__*/React.createElement(SubmitBar, {
-    label: _isSection ? t("EKYC_COMPLETE_VERIFICATION_AND_PROCEED") || "Complete & Proceed" : t("EKYC_COMPLETE_VERIFICATION") || "Complete Verification",
+  }, /*#__PURE__*/React.createElement(SubmitBar, {
+    label: t("EKYC_COMPLETE_VERIFICATION_AND_PROCEED") || "Complete & Proceed",
     onSubmit: handleCompleteVerification
-  })));
-  if (_isSection) return renderContent();
+  })) : /*#__PURE__*/React.createElement(ActionBar, null, /*#__PURE__*/React.createElement(SubmitBar, {
+    label: t("EKYC_COMPLETE_VERIFICATION") || "Complete Verification",
+    onSubmit: handleCompleteVerification
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "5px",
+      marginTop: "16px",
+      fontSize: "11px",
+      color: "#98A2B3"
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "11",
+    height: "11",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "3",
+    y: "11",
+    width: "18",
+    height: "11",
+    rx: "2"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M7 11V7a5 5 0 0 1 10 0v4"
+  })), t("EKYC_SECURE_DATA_NOTICE") || "Your data is encrypted and secure"));
+  if (_isSection) {
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("hr", {
+      style: {
+        margin: "32px 0",
+        border: 0,
+        borderTop: "2px solid #EAECF0"
+      }
+    }), renderContent());
+  }
   return /*#__PURE__*/React.createElement("div", {
     className: "inbox-container"
   }, /*#__PURE__*/React.createElement("style", null, `
-                @keyframes spin { to { transform: rotate(360deg); } }
-                @keyframes fadeSlideIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
-            `), /*#__PURE__*/React.createElement("div", {
+        @keyframes spin { to { transform: rotate(360deg); } }
+        @keyframes fadeSlideIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
+      `), /*#__PURE__*/React.createElement("div", {
     className: "filters-container"
   }, /*#__PURE__*/React.createElement(Card, {
-    className: "sidebar-title-card",
     style: {
       display: "flex",
       alignItems: "center",
-      padding: "16px",
-      marginBottom: "16px",
-      borderRadius: "4px"
+      padding: "12px 16px",
+      marginBottom: "12px",
+      borderRadius: "8px"
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: "icon-container",
     style: {
-      color: "#0068faff",
-      marginRight: "12px"
+      color: "#185FA5",
+      marginRight: "10px",
+      display: "flex"
     }
   }, /*#__PURE__*/React.createElement(HomeIcon, {
     style: {
-      width: "24px",
-      height: "24px"
+      width: "20px",
+      height: "20px"
     }
   })), /*#__PURE__*/React.createElement("div", {
     style: {
-      fontWeight: "700",
-      fontSize: "18px",
+      fontWeight: "600",
+      fontSize: "15px",
       color: "#0B0C0C"
     }
-  }, t("EKYC_PROCESS"))), /*#__PURE__*/React.createElement("div", {
+  }, t("EKYC_PROCESS") || "eKYC Process")), /*#__PURE__*/React.createElement("div", {
     style: {
-      backgroundColor: "#FFFFFF",
-      padding: "16px",
+      background: "#fff",
+      padding: "16px 14px",
       borderRadius: "8px",
-      border: "1px solid #EAECF0",
-      boxShadow: "0 2px 4px rgba(0,0,0,0.02)"
+      border: "1px solid #EAECF0"
     }
-  }, /*#__PURE__*/React.createElement(ConnectingCheckPoints, null, /*#__PURE__*/React.createElement(CheckPoint, {
+  }, [{
     label: t("EKYC_STEP_AADHAAR") || "Aadhaar",
-    isCompleted: true
-  }), /*#__PURE__*/React.createElement(CheckPoint, {
+    done: true,
+    active: false
+  }, {
     label: t("EKYC_STEP_ADDRESS") || "Address",
-    isCompleted: true
-  }), /*#__PURE__*/React.createElement(CheckPoint, {
+    done: false,
+    active: true
+  }, {
     label: t("EKYC_STEP_PROPERTY") || "Property",
-    isCompleted: false
-  }), /*#__PURE__*/React.createElement(CheckPoint, {
-    label: t("EKYC_STEP_REVIEW") || "Review"
-  })))), /*#__PURE__*/React.createElement("div", {
+    done: false,
+    active: false
+  }, {
+    label: t("EKYC_STEP_REVIEW") || "Review",
+    done: false,
+    active: false
+  }].map((step, i) => /*#__PURE__*/React.createElement("div", {
+    key: i,
+    style: {
+      display: "flex",
+      gap: "10px",
+      alignItems: "flex-start",
+      position: "relative",
+      paddingBottom: i < 3 ? "18px" : 0
+    }
+  }, i < 3 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      left: "10px",
+      top: "22px",
+      width: "1px",
+      height: "calc(100% - 10px)",
+      background: "#EAECF0"
+    }
+  }), /*#__PURE__*/React.createElement("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 ? /*#__PURE__*/React.createElement(CheckIcon, {
+    size: 11,
+    color: "#fff"
+  }) : i + 1), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "12px",
+      paddingTop: "2px",
+      color: step.done ? "#0F6E56" : step.active ? "#0B0C0C" : "#667085",
+      fontWeight: step.done || step.active ? "600" : "400"
+    }
+  }, step.label))))), /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
       marginLeft: "16px"
@@ -1696,69 +1811,80 @@ const AddressDetails = ({
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
-      marginBottom: "24px"
+      marginBottom: "20px"
     }
-  }, /*#__PURE__*/React.createElement(Header, null, t("EKYC_ADDRESS_DETAILS_HEADER") || "Address Details"), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(CardHeader, {
     style: {
-      fontSize: "14px",
-      fontWeight: "700",
-      color: "#505A5F"
+      margin: 0,
+      fontSize: "18px"
     }
-  }, t("EKYC_K_NUMBER"), ": ", /*#__PURE__*/React.createElement("span", {
+  }, t("EKYC_ADDRESS_DETAILS_HEADER") || "Address Details"), /*#__PURE__*/React.createElement("div", {
     style: {
-      color: "#0B0C0C"
+      background: "#F9FAFB",
+      border: "0.5px solid #EAECF0",
+      borderRadius: "20px",
+      padding: "4px 14px",
+      fontSize: "12px",
+      color: "#667085"
+    }
+  }, t("EKYC_K_NUMBER") || "K Number", ":", " ", /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: "#0B0C0C",
+      fontWeight: "600"
     }
   }, flowState === null || flowState === void 0 ? void 0 : flowState.kNumber))), renderContent())));
 };
 
-const FingerprintIcon = ({
-  size: _size = 22,
-  color: _color = "#6366f1"
+const LockIcon = ({
+  size: _size = 16
 }) => /*#__PURE__*/React.createElement("svg", {
   width: _size,
   height: _size,
   viewBox: "0 0 24 24",
-  fill: "none"
-}, /*#__PURE__*/React.createElement("path", {
-  d: "M17.81 4.47c-.08 0-.16-.02-.23-.06C15.66 3.42 14 3 12.01 3c-1.98 0-3.86.47-5.57 1.41-.24.13-.54.04-.67-.2-.13-.24-.04-.55.2-.68C7.82 2.52 9.86 2 12.01 2c2.13 0 3.96.46 5.57 1.41.24.13.33.43.2.67-.09.13-.24.39-.39.39zM12 21c-.28 0-.5-.22-.5-.5v-4.42c-2.33-.21-4.44-1.35-5.94-3.21-1.5-1.86-2.22-4.18-2.02-6.52.05-.59.55-1.03 1.14-.98s1.03.55.98 1.14c-.15 1.76.39 3.51 1.52 4.91 1.12 1.4 2.7 2.26 4.45 2.42.21.02.37.19.37.4v6.26c0 .28-.22.5-.5.5z",
-  fill: _color
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "1.8",
+  strokeLinecap: "round"
+}, /*#__PURE__*/React.createElement("rect", {
+  x: "3",
+  y: "11",
+  width: "18",
+  height: "11",
+  rx: "2"
 }), /*#__PURE__*/React.createElement("path", {
-  d: "M12 11c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z",
-  fill: _color
+  d: "M7 11V7a5 5 0 0 1 10 0v4"
 }));
 const UserIcon = ({
   size: _size2 = 16,
-  color: _color2 = "#64748b"
+  color: _color = "currentColor"
 }) => /*#__PURE__*/React.createElement("svg", {
   width: _size2,
   height: _size2,
   viewBox: "0 0 24 24",
-  fill: "none"
-}, /*#__PURE__*/React.createElement("path", {
-  d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2",
-  stroke: _color2,
-  strokeWidth: "2",
+  fill: "none",
+  stroke: _color,
+  strokeWidth: "1.8",
   strokeLinecap: "round"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
 }), /*#__PURE__*/React.createElement("circle", {
   cx: "12",
   cy: "7",
-  r: "4",
-  stroke: _color2,
-  strokeWidth: "2"
+  r: "4"
 }));
 const PhoneIcon = ({
   size: _size3 = 16,
-  color: _color3 = "#64748b"
+  color: _color2 = "currentColor"
 }) => /*#__PURE__*/React.createElement("svg", {
   width: _size3,
   height: _size3,
   viewBox: "0 0 24 24",
-  fill: "none"
-}, /*#__PURE__*/React.createElement("path", {
-  d: "M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.6 19.79 19.79 0 0 0 3 1.82C3 .72 3.72 0 4.82 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.91 7.91a16 16 0 006.16 6.16l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z",
-  stroke: _color3,
-  strokeWidth: "2",
+  fill: "none",
+  stroke: _color2,
+  strokeWidth: "1.8",
   strokeLinecap: "round"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-5.37-5.37 19.79 19.79 0 01-3.07-8.63A2 2 0 014.82 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.91 7.91a16 16 0 006.16 6.16l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"
 }));
 const WhatsappIcon = ({
   size: _size4 = 16
@@ -1768,65 +1894,169 @@ const WhatsappIcon = ({
   viewBox: "0 0 24 24",
   fill: "none"
 }, /*#__PURE__*/React.createElement("path", {
-  d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z",
+  d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z",
   fill: "#25D366"
 }), /*#__PURE__*/React.createElement("path", {
   d: "M12 2C6.477 2 2 6.477 2 12c0 1.89.525 3.66 1.438 5.168L2 22l4.832-1.438A9.96 9.96 0 0012 22c5.523 0 10-4.477 10-10S17.523 2 12 2z",
   stroke: "#25D366",
-  strokeWidth: "2",
+  strokeWidth: "1.8",
   strokeLinecap: "round"
 }));
 const MailIcon = ({
   size: _size5 = 16,
-  color: _color4 = "#64748b"
+  color: _color3 = "currentColor"
 }) => /*#__PURE__*/React.createElement("svg", {
   width: _size5,
   height: _size5,
   viewBox: "0 0 24 24",
-  fill: "none"
-}, /*#__PURE__*/React.createElement("path", {
-  d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z",
-  stroke: _color4,
-  strokeWidth: "2",
+  fill: "none",
+  stroke: _color3,
+  strokeWidth: "1.8",
   strokeLinecap: "round"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
 }), /*#__PURE__*/React.createElement("path", {
-  d: "M22 6l-10 7L2 6",
-  stroke: _color4,
-  strokeWidth: "2",
-  strokeLinecap: "round"
+  d: "M22 6l-10 7L2 6"
 }));
 const UsersIcon = ({
   size: _size6 = 16,
-  color: _color5 = "#64748b"
+  color: _color4 = "currentColor"
 }) => /*#__PURE__*/React.createElement("svg", {
   width: _size6,
   height: _size6,
   viewBox: "0 0 24 24",
-  fill: "none"
-}, /*#__PURE__*/React.createElement("path", {
-  d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2",
-  stroke: _color5,
-  strokeWidth: "2",
+  fill: "none",
+  stroke: _color4,
+  strokeWidth: "1.8",
   strokeLinecap: "round"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"
 }), /*#__PURE__*/React.createElement("circle", {
   cx: "9",
   cy: "7",
-  r: "4",
-  stroke: _color5,
-  strokeWidth: "2"
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M23 21v-2a4 4 0 0 0-3-3.87",
-  stroke: _color5,
-  strokeWidth: "2",
-  strokeLinecap: "round"
+  r: "4"
 }), /*#__PURE__*/React.createElement("path", {
-  d: "M16 3.13a4 4 0 0 1 0 7.75",
+  d: "M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"
+}));
+const CheckIcon$1 = ({
+  size: _size7 = 15,
+  color: _color5 = "#1D9E75"
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: _size7,
+  height: _size7,
+  viewBox: "0 0 24 24",
+  fill: "none",
   stroke: _color5,
-  strokeWidth: "2",
+  strokeWidth: "2.8",
   strokeLinecap: "round"
+}, /*#__PURE__*/React.createElement("polyline", {
+  points: "20 6 9 17 4 12"
+}));
+const IconInput$1 = ({
+  icon,
+  rightIcon,
+  inputStyle: _inputStyle = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("div", {
+  style: {
+    position: "relative",
+    width: "100%"
+  }
+}, /*#__PURE__*/React.createElement("div", {
+  style: {
+    position: "absolute",
+    left: "10px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    zIndex: 1,
+    opacity: 0.45,
+    display: "flex",
+    pointerEvents: "none"
+  }
+}, icon), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+  textInputStyle: {
+    paddingLeft: "36px",
+    paddingRight: rightIcon ? "36px" : "12px",
+    ..._inputStyle
+  }
+}, props)), rightIcon && /*#__PURE__*/React.createElement("div", {
+  style: {
+    position: "absolute",
+    right: "10px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    display: "flex"
+  }
+}, rightIcon));
+const SectionHead$1 = ({
+  icon,
+  label
+}) => /*#__PURE__*/React.createElement("div", {
+  style: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    marginBottom: "16px",
+    marginTop: "4px"
+  }
+}, /*#__PURE__*/React.createElement("div", {
+  style: {
+    opacity: 0.5,
+    display: "flex"
+  }
+}, icon), /*#__PURE__*/React.createElement("span", {
+  style: {
+    fontSize: "15px",
+    fontWeight: "600",
+    color: "#0B0C0C",
+    whiteSpace: "nowrap"
+  }
+}, label), /*#__PURE__*/React.createElement("div", {
+  style: {
+    flex: 1,
+    height: "1px",
+    background: "#EAECF0"
+  }
+}));
+const RadioToggleRow = ({
+  label,
+  selected,
+  onSelect,
+  t,
+  options
+}) => /*#__PURE__*/React.createElement("div", {
+  style: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: "8px"
+  }
+}, /*#__PURE__*/React.createElement(CardLabel, {
+  style: {
+    fontWeight: "500",
+    marginBottom: 0,
+    fontSize: "13px",
+    color: "#505A5F"
+  }
+}, label), /*#__PURE__*/React.createElement(RadioButtons, {
+  options: options,
+  optionsKey: "name",
+  selectedOption: selected,
+  onSelect: onSelect,
+  t: t,
+  innerStyles: {
+    display: "flex",
+    gap: "20px",
+    alignItems: "center"
+  },
+  style: {
+    display: "flex",
+    gap: "20px",
+    marginBottom: 0
+  }
 }));
 const AadhaarVerification = () => {
-  var _connectionDetails$co, _connectionDetails$co2, _connectionDetails$co3, _connectionDetails$co4;
+  var _connectionDetails$ad;
   const {
     t
   } = useTranslation();
@@ -1852,6 +2082,7 @@ const AadhaarVerification = () => {
       }
     }
   };
+  const details = (connectionDetails === null || connectionDetails === void 0 ? void 0 : connectionDetails.connectionDetails) || (connectionDetails === null || connectionDetails === void 0 ? void 0 : connectionDetails.connectionDetailsInfo) || {};
   const [aadhaarLastFour, setAadhaarLastFour] = useState("");
   const [isAadhaarVerified, setIsAadhaarVerified] = useState(false);
   const [isVerifying, setIsVerifying] = useState(false);
@@ -1859,15 +2090,15 @@ const AadhaarVerification = () => {
     code: "NO",
     name: "CORE_COMMON_NO"
   });
-  const [userName, setUserName] = useState((connectionDetails === null || connectionDetails === void 0 ? void 0 : (_connectionDetails$co = connectionDetails.connectionDetailsInfo) === null || _connectionDetails$co === void 0 ? void 0 : _connectionDetails$co.consumerName) || "");
+  const [userName, setUserName] = useState(details.consumerName || "");
   const [mobileChange, setMobileChange] = useState({
     code: "NO",
     name: "CORE_COMMON_NO"
   });
-  const [mobileNumber, setMobileNumber] = useState((connectionDetails === null || connectionDetails === void 0 ? void 0 : (_connectionDetails$co2 = connectionDetails.connectionDetailsInfo) === null || _connectionDetails$co2 === void 0 ? void 0 : _connectionDetails$co2.phoneNumber) || "");
-  const [whatsappNumber, setWhatsappNumber] = useState((connectionDetails === null || connectionDetails === void 0 ? void 0 : (_connectionDetails$co3 = connectionDetails.connectionDetailsInfo) === null || _connectionDetails$co3 === void 0 ? void 0 : _connectionDetails$co3.phoneNumber) || "");
-  const [email, setEmail] = useState((connectionDetails === null || connectionDetails === void 0 ? void 0 : (_connectionDetails$co4 = connectionDetails.connectionDetailsInfo) === null || _connectionDetails$co4 === void 0 ? void 0 : _connectionDetails$co4.email) || "");
-  const [noOfPersons, setNoOfPersons] = useState("");
+  const [mobileNumber, setMobileNumber] = useState(details.phoneNumber || "");
+  const [whatsappNumber, setWhatsappNumber] = useState(details.phoneNumber || "");
+  const [email, setEmail] = useState(details.email || "");
+  const [noOfPersons, setNoOfPersons] = useState((connectionDetails === null || connectionDetails === void 0 ? void 0 : (_connectionDetails$ad = connectionDetails.addressDetails) === null || _connectionDetails$ad === void 0 ? void 0 : _connectionDetails$ad.noOfPerson) || "");
   const [showAddressSection, setShowAddressSection] = useState(false);
   const [addressData, setAddressData] = useState(null);
   const yesNoOptions = [{
@@ -1878,19 +2109,26 @@ const AadhaarVerification = () => {
     name: "CORE_COMMON_NO"
   }];
   const handleVerifyAadhaar = () => {
-    if (aadhaarLastFour.length === 4) {
-      setIsVerifying(true);
+    if (aadhaarLastFour.length !== 4 || isVerifying) return;
+    setIsVerifying(true);
+    setTimeout(() => {
+      setIsVerifying(false);
+      setIsAadhaarVerified(true);
+      setShowAddressSection(true);
       setTimeout(() => {
-        setIsVerifying(false);
-        setIsAadhaarVerified(true);
-      }, 1200);
-    }
+        var _addressSectionRef$cu;
+        (_addressSectionRef$cu = addressSectionRef.current) === null || _addressSectionRef$cu === void 0 ? void 0 : _addressSectionRef$cu.scrollIntoView({
+          behavior: "smooth",
+          block: "start"
+        });
+      }, 100);
+    }, 1200);
   };
-  const handleSaveAndContinueAadhaar = () => {
+  const handleSaveAndContinue = () => {
     setShowAddressSection(true);
     setTimeout(() => {
-      var _addressSectionRef$cu;
-      (_addressSectionRef$cu = addressSectionRef.current) === null || _addressSectionRef$cu === void 0 ? void 0 : _addressSectionRef$cu.scrollIntoView({
+      var _addressSectionRef$cu2;
+      (_addressSectionRef$cu2 = addressSectionRef.current) === null || _addressSectionRef$cu2 === void 0 ? void 0 : _addressSectionRef$cu2.scrollIntoView({
         behavior: "smooth",
         block: "start"
       });
@@ -1914,60 +2152,135 @@ const AadhaarVerification = () => {
       addressDetails
     });
   };
+  const styles = {
+    verifiedInput: {
+      borderColor: "#1D9E75",
+      backgroundColor: "#E1F5EE"
+    },
+    verifiedCard: {
+      backgroundColor: "#E1F5EE",
+      border: "0.5px solid #5DCAA5",
+      borderRadius: "8px",
+      padding: "16px",
+      marginTop: "14px",
+      marginBottom: "4px",
+      animation: "fadeSlideIn 0.35s ease"
+    },
+    infoLabel: {
+      fontSize: "11px",
+      fontWeight: "600",
+      color: "#1D9E75",
+      textTransform: "uppercase",
+      letterSpacing: "0.05em",
+      marginBottom: "3px"
+    },
+    infoValue: {
+      fontSize: "14px",
+      fontWeight: "500",
+      color: "#04342C"
+    },
+    twoCol: {
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr",
+      gap: "14px",
+      marginBottom: "20px"
+    },
+    optionalTag: {
+      display: "inline-block",
+      fontSize: "10px",
+      background: "#F1EFE8",
+      color: "#5F5E5A",
+      border: "0.5px solid #D3D1C7",
+      borderRadius: "10px",
+      padding: "1px 7px",
+      marginLeft: "6px",
+      fontWeight: "400"
+    }
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: "inbox-container"
   }, /*#__PURE__*/React.createElement("style", null, `
-                @keyframes spin { to { transform: rotate(360deg); } }
-                @keyframes fadeSlideIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
-                @keyframes pulseGreen { 0%,100% { box-shadow:0 0 0 0 rgba(22,163,74,0.4); } 50% { box-shadow:0 0 0 8px rgba(22,163,74,0); } }
-            `), /*#__PURE__*/React.createElement("div", {
+        @keyframes fadeSlideIn {
+          from { opacity: 0; transform: translateY(6px); }
+          to   { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes pulseGreen {
+          0%, 100% { box-shadow: 0 0 0 0 rgba(29,158,117,0.35); }
+          50%       { box-shadow: 0 0 0 6px rgba(29,158,117,0); }
+        }
+        .ekyc-sidebar-step { display: flex; gap: 10px; align-items: flex-start; position: relative; padding-bottom: 18px; }
+        .ekyc-sidebar-step:last-child { padding-bottom: 0; }
+        .ekyc-step-line { position: absolute; left: 10px; top: 22px; width: 1px; height: calc(100% - 10px); background: #EAECF0; }
+        .ekyc-step-dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #D0D5DD; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 500; color: #98A2B3; background: #fff; flex-shrink: 0; margin-top: 1px; }
+        .ekyc-step-dot.active { border-color: #185FA5; color: #185FA5; background: #E6F1FB; }
+        .ekyc-step-dot.done { border-color: #0F6E56; background: #0F6E56; color: #fff; }
+        .ekyc-step-label { font-size: 12px; color: #667085; padding-top: 2px; }
+        .ekyc-step-label.active { color: #0B0C0C; font-weight: 600; }
+        .ekyc-step-label.done { color: #0F6E56; }
+        .ekyc-field-label { font-size: 11px; font-weight: 600; color: #667085; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
+      `), /*#__PURE__*/React.createElement("div", {
     className: "filters-container"
   }, /*#__PURE__*/React.createElement(Card, {
-    className: "sidebar-title-card",
     style: {
       display: "flex",
       alignItems: "center",
-      padding: "16px",
-      marginBottom: "16px",
-      borderRadius: "4px"
+      padding: "12px 16px",
+      marginBottom: "12px",
+      borderRadius: "8px"
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: "icon-container",
     style: {
-      color: "#0068faff",
-      marginRight: "12px"
+      color: "#185FA5",
+      marginRight: "10px",
+      display: "flex"
     }
   }, /*#__PURE__*/React.createElement(HomeIcon, {
     style: {
-      width: "24px",
-      height: "24px"
+      width: "20px",
+      height: "20px"
     }
   })), /*#__PURE__*/React.createElement("div", {
     style: {
-      fontWeight: "700",
-      fontSize: "18px",
+      fontWeight: "600",
+      fontSize: "15px",
       color: "#0B0C0C"
     }
-  }, t("EKYC_PROCESS"))), /*#__PURE__*/React.createElement("div", {
+  }, t("EKYC_PROCESS") || "eKYC Process")), /*#__PURE__*/React.createElement("div", {
     style: {
-      backgroundColor: "#FFFFFF",
-      padding: "16px",
+      background: "#fff",
+      padding: "16px 14px",
       borderRadius: "8px",
-      border: "1px solid #EAECF0",
-      boxShadow: "0 2px 4px rgba(0,0,0,0.02)"
+      border: "1px solid #EAECF0"
     }
-  }, /*#__PURE__*/React.createElement(ConnectingCheckPoints, null, /*#__PURE__*/React.createElement(CheckPoint, {
+  }, [{
     label: t("EKYC_STEP_AADHAAR") || "Aadhaar",
-    isCompleted: showAddressSection
-  }), /*#__PURE__*/React.createElement(CheckPoint, {
+    done: showAddressSection,
+    active: !showAddressSection
+  }, {
     label: t("EKYC_STEP_ADDRESS") || "Address",
-    isCompleted: addressData !== null
-  }), /*#__PURE__*/React.createElement(CheckPoint, {
+    done: addressData !== null,
+    active: showAddressSection && addressData === null
+  }, {
     label: t("EKYC_STEP_PROPERTY") || "Property",
-    isCompleted: false
-  }), /*#__PURE__*/React.createElement(CheckPoint, {
-    label: t("EKYC_STEP_REVIEW") || "Review"
-  })))), /*#__PURE__*/React.createElement("div", {
+    done: false,
+    active: false
+  }, {
+    label: t("EKYC_STEP_REVIEW") || "Review",
+    done: false,
+    active: false
+  }].map((step, i) => /*#__PURE__*/React.createElement("div", {
+    className: "ekyc-sidebar-step",
+    key: i
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `ekyc-step-dot${step.done ? " done" : step.active ? " active" : ""}`
+  }, step.done ? /*#__PURE__*/React.createElement(CheckIcon$1, {
+    size: 11,
+    color: "#fff"
+  }) : i + 1), i < 3 && /*#__PURE__*/React.createElement("div", {
+    className: "ekyc-step-line"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: `ekyc-step-label${step.done ? " done" : step.active ? " active" : ""}`
+  }, step.label))))), /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
       marginLeft: "16px"
@@ -1975,394 +2288,215 @@ const AadhaarVerification = () => {
   }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      marginBottom: "24px"
-    }
-  }, /*#__PURE__*/React.createElement(Header, null, t("EKYC_AADHAAR_VERIFICATION_HEADER") || "Aadhaar Verification"), /*#__PURE__*/React.createElement("div", {
-    style: {
-      fontSize: "14px",
-      fontWeight: "700",
-      color: "#505A5F"
-    }
-  }, t("EKYC_K_NUMBER"), ": ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "#0B0C0C"
+      justifyContent: "flex-end",
+      marginBottom: "20px"
     }
-  }, kNumber))), /*#__PURE__*/React.createElement(CardHeader, {
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: "20px",
-      marginBottom: "16px"
+      background: "#F9FAFB",
+      border: "0.5px solid #EAECF0",
+      borderRadius: "20px",
+      padding: "4px 14px",
+      fontSize: "12px",
+      color: "#667085"
     }
-  }, t("EKYC_AADHAAR_NUMBER_HEADER") || "Aadhaar Number"), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
+  }, t("EKYC_K_NUMBER") || "K Number", ":", " ", /*#__PURE__*/React.createElement("span", {
     style: {
+      color: "#0B0C0C",
       fontWeight: "600"
     }
-  }, t("EKYC_LAST_4_DIGIT_AADHAAR") || "Last 4-digit Aadhaar Number"), /*#__PURE__*/React.createElement("div", {
-    className: "field",
-    style: {
-      position: "relative"
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: "absolute",
-      left: "12px",
-      top: "50%",
-      transform: "translateY(-50%)",
-      zIndex: 1,
-      opacity: 0.6
-    }
-  }, /*#__PURE__*/React.createElement(FingerprintIcon, {
-    size: 20
-  })), /*#__PURE__*/React.createElement(TextInput, {
+  }, kNumber))), /*#__PURE__*/React.createElement(SectionHead$1, {
+    icon: /*#__PURE__*/React.createElement(LockIcon, {
+      size: 16
+    }),
+    label: t("EKYC_AADHAAR_NUMBER_HEADER") || "Aadhaar Number"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ekyc-field-label"
+  }, t("EKYC_LAST_4_DIGIT_AADHAAR") || "Enter 12 digits of Aadhaar"), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, /*#__PURE__*/React.createElement(IconInput$1, {
+    icon: /*#__PURE__*/React.createElement(LockIcon, {
+      size: 15
+    }),
+    rightIcon: isAadhaarVerified ? /*#__PURE__*/React.createElement(CheckIcon$1, {
+      size: 15
+    }) : null,
     value: aadhaarLastFour,
     onChange: e => {
       const val = e.target.value;
-      if (val.length <= 4 && /^\d*$/.test(val)) setAadhaarLastFour(val);
+      if (val.length <= 12 && /^\d*$/.test(val)) setAadhaarLastFour(val);
     },
-    placeholder: t("EKYC_ENTER_LAST_4_DIGIT") || "Enter last 4 digits",
-    textInputStyle: {
-      paddingLeft: "40px"
-    },
-    maxLength: 4
-  }), isAadhaarVerified && /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: "absolute",
-      right: "12px",
-      top: "50%",
-      transform: "translateY(-50%)"
-    }
-  }, /*#__PURE__*/React.createElement(TickMark, {
-    fillColor: "#2E9E8F"
-  })))), !isAadhaarVerified && /*#__PURE__*/React.createElement(SubmitBar, {
+    placeholder: t("EKYC_ENTER_LAST_4_DIGIT") || "Enter 12 digits",
+    maxLength: 12,
+    disabled: isAadhaarVerified,
+    inputStyle: isAadhaarVerified ? styles.verifiedInput : {}
+  }))), !isAadhaarVerified && /*#__PURE__*/React.createElement(SubmitBar, {
     label: isVerifying ? t("EKYC_VERIFYING") || "Verifying..." : t("EKYC_VERIFY_AADHAAR_BTN") || "Verify Aadhaar",
     onSubmit: handleVerifyAadhaar,
     disabled: aadhaarLastFour.length !== 4 || isVerifying,
     style: {
-      marginTop: "16px",
-      opacity: aadhaarLastFour.length !== 4 ? 0.6 : 1
+      marginTop: "12px"
     }
   }), isAadhaarVerified && /*#__PURE__*/React.createElement("div", {
-    style: {
-      backgroundColor: "#E7F4EE",
-      padding: "20px",
-      borderRadius: "8px",
-      marginTop: "24px",
-      marginBottom: "24px",
-      border: "1px solid #D1E9DB",
-      animation: "fadeSlideIn 0.4s ease"
-    }
+    style: styles.verifiedCard
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
       alignItems: "center",
-      gap: "10px",
-      marginBottom: "16px"
+      gap: "8px",
+      marginBottom: "14px"
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      backgroundColor: "#D1E9DB",
-      padding: "4px",
+      width: "24px",
+      height: "24px",
       borderRadius: "50%",
+      background: "#9FE1CB",
       display: "flex",
-      animation: "pulseGreen 2s ease infinite"
+      alignItems: "center",
+      justifyContent: "center",
+      animation: "pulseGreen 2s ease infinite",
+      flexShrink: 0
     }
-  }, /*#__PURE__*/React.createElement(TickMark, {
-    fillColor: "#2E9E8F"
+  }, /*#__PURE__*/React.createElement(CheckIcon$1, {
+    size: 13,
+    color: "#085041"
   })), /*#__PURE__*/React.createElement("span", {
     style: {
-      fontWeight: "700",
-      color: "#2E9E8F",
-      fontSize: "18px"
+      fontWeight: "600",
+      color: "#085041",
+      fontSize: "14px"
     }
   }, t("EKYC_AADHAAR_VERIFIED_SUCCESS") || "Aadhaar Verified Successfully")), /*#__PURE__*/React.createElement("div", {
     style: {
       display: "grid",
       gridTemplateColumns: "1fr 1fr",
-      gap: "16px"
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      flexDirection: "column"
-    }
-  }, /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "#667085",
-      fontSize: "12px",
-      fontWeight: "700",
-      textTransform: "uppercase"
-    }
-  }, t("EKYC_NAME")), /*#__PURE__*/React.createElement("span", {
-    style: {
-      fontWeight: "700",
-      fontSize: "16px",
-      color: "#101828"
-    }
-  }, "Rajesh Kumar Singh")), /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      flexDirection: "column"
-    }
-  }, /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "#667085",
-      fontSize: "12px",
-      fontWeight: "700",
-      textTransform: "uppercase"
-    }
-  }, t("EKYC_AADHAAR")), /*#__PURE__*/React.createElement("span", {
-    style: {
-      fontWeight: "700",
-      fontSize: "16px",
-      color: "#101828"
+      gap: "12px"
     }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: styles.infoLabel
+  }, t("EKYC_NAME") || "Name"), /*#__PURE__*/React.createElement("div", {
+    style: styles.infoValue
+  }, details.consumerName)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: styles.infoLabel
+  }, t("EKYC_AADHAAR") || "Aadhaar"), /*#__PURE__*/React.createElement("div", {
+    style: styles.infoValue
   }, "XXXX XXXX ", aadhaarLastFour)), /*#__PURE__*/React.createElement("div", {
     style: {
-      display: "flex",
-      flexDirection: "column",
       gridColumn: "span 2"
     }
-  }, /*#__PURE__*/React.createElement("span", {
-    style: {
-      color: "#667085",
-      fontSize: "12px",
-      fontWeight: "700",
-      textTransform: "uppercase"
-    }
-  }, t("EKYC_ADDRESS")), /*#__PURE__*/React.createElement("span", {
-    style: {
-      fontWeight: "500",
-      fontSize: "15px",
-      color: "#344054"
-    }
-  }, "House No. 45, Sector 12, New Delhi - 110001")))), /*#__PURE__*/React.createElement("hr", {
-    style: {
-      margin: "32px 0",
-      border: "0",
-      borderTop: "1px solid #EAECF0"
-    }
-  }), /*#__PURE__*/React.createElement(CardHeader, {
-    style: {
-      fontSize: "20px",
-      marginBottom: "16px"
-    }
-  }, t("EKYC_CONTACT_DETAILS_HEADER") || "Contact Details"), /*#__PURE__*/React.createElement(LabelFieldPair, {
-    style: {
-      animation: "fadeSlideIn 0.3s ease"
-    }
   }, /*#__PURE__*/React.createElement("div", {
+    style: styles.infoLabel
+  }, t("EKYC_ADDRESS") || "Address"), /*#__PURE__*/React.createElement("div", {
     style: {
-      display: "flex",
-      alignItems: "center",
-      gap: "20px"
+      ...styles.infoValue,
+      fontSize: "13px"
     }
-  }, /*#__PURE__*/React.createElement(CardLabel, {
+  }, details.address)))), /*#__PURE__*/React.createElement("hr", {
     style: {
-      fontWeight: "600",
-      marginBottom: "0"
+      margin: "24px 0",
+      border: 0,
+      borderTop: "1px solid #EAECF0"
     }
-  }, t("EKYC_USER_NAME") || "Corrected Name"), /*#__PURE__*/React.createElement(RadioButtons, {
-    options: yesNoOptions,
-    optionsKey: "name",
-    selectedOption: nameCorrect,
+  }), /*#__PURE__*/React.createElement(SectionHead$1, {
+    icon: /*#__PURE__*/React.createElement(UserIcon, {
+      size: 16
+    }),
+    label: t("EKYC_CONTACT_DETAILS_HEADER") || "Contact Details"
+  }), /*#__PURE__*/React.createElement(RadioToggleRow, {
+    label: `${t("EKYC_USER_NAME")} (${t("EKYC_NAME_CORRECT_HINT")})`,
+    selected: nameCorrect,
     onSelect: setNameCorrect,
-    t: t,
-    innerStyles: {
-      display: "flex",
-      gap: "24px"
-    },
-    style: {
-      display: "flex",
-      gap: "50px",
-      marginBottom: "0"
-    }
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "field",
-    style: {
-      position: "relative"
-    }
-  }, /*#__PURE__*/React.createElement("div", {
+    options: yesNoOptions,
+    sty: true,
+    t: t
+  }), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, /*#__PURE__*/React.createElement(IconInput$1, {
+    icon: /*#__PURE__*/React.createElement(UserIcon, {
+      size: 15,
+      color: nameCorrect.code === "YES" ? "#64748b" : "#94a3b8"
+    }),
     style: {
-      position: "absolute",
-      left: "12px",
-      top: "50%",
-      transform: "translateY(-50%)",
-      zIndex: 1,
-      opacity: nameCorrect.code === "YES" ? 0.6 : 0.3
-    }
-  }, /*#__PURE__*/React.createElement(UserIcon, {
-    size: 18,
-    color: nameCorrect.code === "YES" ? "#64748b" : "#94a3b8"
-  })), /*#__PURE__*/React.createElement(TextInput, {
+      marginBottom: "12px"
+    },
     value: userName,
     onChange: e => setUserName(e.target.value),
     placeholder: t("EKYC_ENTER_NAME_PLACEHOLDER") || "Enter full name",
-    textInputStyle: {
-      paddingLeft: "40px"
-    },
     disabled: nameCorrect.code !== "YES"
-  }))), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      alignItems: "center",
-      gap: "20px",
-      padding: "10px"
-    }
-  }, /*#__PURE__*/React.createElement(CardLabel, {
-    style: {
-      fontWeight: "600",
-      marginBottom: "0"
-    }
-  }, t("EKYC_USER_MOBILE_NUMBER") || "User Mobile Number"), /*#__PURE__*/React.createElement(RadioButtons, {
-    options: yesNoOptions,
-    optionsKey: "name",
-    selectedOption: mobileChange,
+  }))), /*#__PURE__*/React.createElement(RadioToggleRow, {
+    label: `${t("EKYC_USER_MOBILE_NUMBER")} (${t("EKYC_UPDATE_MOBILE_HINT")})`,
+    selected: mobileChange,
     onSelect: setMobileChange,
-    t: t,
-    innerStyles: {
-      display: "flex",
-      gap: "24px"
-    },
-    style: {
-      display: "flex",
-      gap: "50px",
-      marginBottom: "0"
-    }
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "field",
-    style: {
-      position: "relative"
-    }
-  }, /*#__PURE__*/React.createElement("div", {
+    options: yesNoOptions,
+    t: t
+  }), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, /*#__PURE__*/React.createElement(IconInput$1, {
+    icon: /*#__PURE__*/React.createElement(PhoneIcon, {
+      size: 15,
+      color: mobileChange.code === "YES" ? "#64748b" : "#94a3b8"
+    }),
     style: {
-      position: "absolute",
-      left: "12px",
-      top: "50%",
-      transform: "translateY(-50%)",
-      zIndex: 1,
-      opacity: mobileChange.code === "YES" ? 0.6 : 0.3
-    }
-  }, /*#__PURE__*/React.createElement(PhoneIcon, {
-    size: 18,
-    color: mobileChange.code === "YES" ? "#64748b" : "#94a3b8"
-  })), /*#__PURE__*/React.createElement(TextInput, {
+      marginBottom: "12px"
+    },
     value: mobileNumber,
     onChange: e => setMobileNumber(e.target.value),
     placeholder: "+91 XXXXX XXXXX",
-    textInputStyle: {
-      paddingLeft: "40px"
-    },
     disabled: mobileChange.code !== "YES"
   }))), /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "grid",
-      gridTemplateColumns: "1fr 1fr",
-      gap: "24px",
-      marginTop: "24px"
-    }
-  }, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
-    style: {
-      fontWeight: "600"
-    }
-  }, t("EKYC_WHATSAPP_NUMBER") || "WhatsApp Number"), /*#__PURE__*/React.createElement("div", {
-    className: "field",
-    style: {
-      position: "relative"
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: "absolute",
-      left: "12px",
-      top: "50%",
-      transform: "translateY(-50%)",
-      zIndex: 1,
-      opacity: 0.6
-    }
-  }, /*#__PURE__*/React.createElement(WhatsappIcon, {
-    size: 18
-  })), /*#__PURE__*/React.createElement(TextInput, {
+    style: styles.twoCol
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "ekyc-field-label"
+  }, t("EKYC_WHATSAPP_NUMBER") || "WhatsApp Number"), /*#__PURE__*/React.createElement(IconInput$1, {
+    icon: /*#__PURE__*/React.createElement(WhatsappIcon, {
+      size: 15
+    }),
     value: whatsappNumber,
     onChange: e => setWhatsappNumber(e.target.value),
-    placeholder: "+91 XXXXX XXXXX",
-    textInputStyle: {
-      paddingLeft: "40px"
-    }
-  }))), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
-    style: {
-      fontWeight: "600"
-    }
-  }, t("EKYC_EMAIL_ADDRESS") || "Email Address", " ", /*#__PURE__*/React.createElement("span", {
-    style: {
-      fontWeight: "400",
-      color: "#667085"
-    }
-  }, "(", t("EKYC_OPTIONAL") || "Optional", ")")), /*#__PURE__*/React.createElement("div", {
-    className: "field",
-    style: {
-      position: "relative"
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: "absolute",
-      left: "12px",
-      top: "50%",
-      transform: "translateY(-50%)",
-      zIndex: 1,
-      opacity: 0.6
-    }
-  }, /*#__PURE__*/React.createElement(MailIcon, {
-    size: 18
-  })), /*#__PURE__*/React.createElement(TextInput, {
+    placeholder: "+91 XXXXX XXXXX"
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "ekyc-field-label"
+  }, t("EKYC_EMAIL_ADDRESS") || "Email Address", /*#__PURE__*/React.createElement("span", {
+    style: styles.optionalTag
+  }, t("EKYC_OPTIONAL") || "Optional")), /*#__PURE__*/React.createElement(IconInput$1, {
+    icon: /*#__PURE__*/React.createElement(MailIcon, {
+      size: 15
+    }),
     value: email,
     onChange: e => setEmail(e.target.value),
-    placeholder: t("EKYC_EMAIL_ADDRESS_PLACEHOLDER") || "example@email.com",
-    textInputStyle: {
-      paddingLeft: "40px"
-    }
-  })))), /*#__PURE__*/React.createElement("hr", {
+    placeholder: t("EKYC_EMAIL_ADDRESS_PLACEHOLDER") || "example@email.com"
+  }))), /*#__PURE__*/React.createElement("hr", {
     style: {
-      margin: "32px 0",
-      border: "0",
+      margin: "24px 0",
+      border: 0,
       borderTop: "1px solid #EAECF0"
     }
-  }), /*#__PURE__*/React.createElement(CardHeader, {
-    style: {
-      fontSize: "20px",
-      marginBottom: "16px"
-    }
-  }, t("EKYC_FAMILY_DETAILS_HEADER") || "Family Details"), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
-    style: {
-      fontWeight: "600"
-    }
-  }, t("EKYC_NO_OF_PERSONS") || "Number of Family Members"), /*#__PURE__*/React.createElement("div", {
-    className: "field",
-    style: {
-      position: "relative"
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: "absolute",
-      left: "12px",
-      top: "50%",
-      transform: "translateY(-50%)",
-      zIndex: 1,
-      opacity: 0.6
-    }
-  }, /*#__PURE__*/React.createElement(UsersIcon, {
-    size: 18
-  })), /*#__PURE__*/React.createElement(TextInput, {
+  }), /*#__PURE__*/React.createElement(SectionHead$1, {
+    icon: /*#__PURE__*/React.createElement(UsersIcon, {
+      size: 16
+    }),
+    label: t("EKYC_FAMILY_DETAILS_HEADER") || "Family Details"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ekyc-field-label"
+  }, t("EKYC_NO_OF_PERSONS") || "Number of Family Members"), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, /*#__PURE__*/React.createElement(IconInput$1, {
+    icon: /*#__PURE__*/React.createElement(UsersIcon, {
+      size: 15
+    }),
     value: noOfPersons,
     onChange: e => {
       if (/^\d*$/.test(e.target.value)) setNoOfPersons(e.target.value);
     },
-    placeholder: t("EKYC_ENTER_NO_OF_PERSONS") || "Enter total number of persons",
-    textInputStyle: {
-      paddingLeft: "40px"
+    placeholder: t("EKYC_ENTER_NO_OF_PERSONS") || "Enter total number of persons"
+  }))), !showAddressSection && /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: "24px"
     }
-  }))), !showAddressSection && /*#__PURE__*/React.createElement(ActionBar, null, /*#__PURE__*/React.createElement(SubmitBar, {
+  }, /*#__PURE__*/React.createElement(SubmitBar, {
     label: t("ES_COMMON_SAVE_CONTINUE") || "Save & Continue",
-    onSubmit: handleSaveAndContinueAadhaar
+    onSubmit: handleSaveAndContinue
   })), showAddressSection && /*#__PURE__*/React.createElement("div", {
     ref: addressSectionRef
   }, /*#__PURE__*/React.createElement(AddressDetails, {
@@ -2375,66 +2509,196 @@ const AadhaarVerification = () => {
     }
   })), /*#__PURE__*/React.createElement("div", {
     style: {
-      textAlign: "center",
-      marginTop: "24px"
-    }
-  }, /*#__PURE__*/React.createElement("p", {
-    style: {
-      fontSize: "12px",
-      color: "#667085",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      gap: "4px"
+      gap: "5px",
+      marginTop: "20px",
+      fontSize: "11px",
+      color: "#98A2B3"
     }
-  }, /*#__PURE__*/React.createElement("svg", {
-    width: "12",
-    height: "12",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M12 11V17M12 7H12.01",
-    strokeLinecap: "round"
-  })), t("EKYC_SECURE_DATA_NOTICE") || "Your data is encrypted and secure")))));
+  }, /*#__PURE__*/React.createElement(LockIcon, {
+    size: 11
+  }), t("EKYC_SECURE_DATA_NOTICE") || "Your data is encrypted and secure"))));
 };
 
+const CheckIcon$2 = ({
+  size: _size = 11,
+  color: _color = "#fff"
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: _size,
+  height: _size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: _color,
+  strokeWidth: "3",
+  strokeLinecap: "round"
+}, /*#__PURE__*/React.createElement("polyline", {
+  points: "20 6 9 17 4 12"
+}));
+const BuildingIcon = ({
+  size: _size2 = 16
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: _size2,
+  height: _size2,
+  viewBox: "0 0 24 24",
+  fill: "currentColor"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8V9h8v10zm-2-8h-4v2h4v-2zm0 4h-4v2h4v-2z"
+}));
+const BriefcaseIcon = ({
+  size: _size3 = 16
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: _size3,
+  height: _size3,
+  viewBox: "0 0 24 24",
+  fill: "currentColor"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M20 6H16V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-2 .89-2 2v13c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6-2v2h-4V4h4z"
+}));
+const DocumentIcon = ({
+  size: _size4 = 16
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: _size4,
+  height: _size4,
+  viewBox: "0 0 24 24",
+  fill: "currentColor"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13z"
+}));
+const CameraIcon$1 = ({
+  size: _size5 = 24
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: _size5,
+  height: _size5,
+  viewBox: "0 0 24 24",
+  fill: "currentColor"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M9 2L7.17 4H4C2.9 4 2 4.9 2 6v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L13 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+}));
+const TrashIcon$1 = ({
+  size: _size6 = 14
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: _size6,
+  height: _size6,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "#D92D20",
+  strokeWidth: "2",
+  strokeLinecap: "round"
+}, /*#__PURE__*/React.createElement("polyline", {
+  points: "3 6 5 6 21 6"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M10 11v6M14 11v6"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"
+}));
+const PidIcon = ({
+  size: _size7 = 16
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: _size7,
+  height: _size7,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round"
+}, /*#__PURE__*/React.createElement("rect", {
+  x: "3",
+  y: "4",
+  width: "18",
+  height: "16",
+  rx: "2"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M7 8h5M7 12h8M7 16h4"
+}));
+const SectionHead$2 = ({
+  icon,
+  label
+}) => /*#__PURE__*/React.createElement("div", {
+  style: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    marginBottom: "16px",
+    marginTop: "4px"
+  }
+}, /*#__PURE__*/React.createElement("div", {
+  style: {
+    opacity: 0.5,
+    display: "flex"
+  }
+}, icon), /*#__PURE__*/React.createElement("span", {
+  style: {
+    fontSize: "15px",
+    fontWeight: "600",
+    color: "#0B0C0C",
+    whiteSpace: "nowrap"
+  }
+}, label), /*#__PURE__*/React.createElement("div", {
+  style: {
+    flex: 1,
+    height: "1px",
+    background: "#EAECF0"
+  }
+}));
+const IconInput$2 = ({
+  icon,
+  ...props
+}) => /*#__PURE__*/React.createElement("div", {
+  style: {
+    position: "relative",
+    width: "100%"
+  }
+}, /*#__PURE__*/React.createElement("div", {
+  style: {
+    position: "absolute",
+    left: "10px",
+    top: "50%",
+    transform: "translateY(-50%)",
+    zIndex: 1,
+    opacity: 0.45,
+    display: "flex",
+    pointerEvents: "none"
+  }
+}, icon), /*#__PURE__*/React.createElement(TextInput, Object.assign({
+  textInputStyle: {
+    paddingLeft: "36px",
+    paddingRight: "12px"
+  }
+}, props)));
 const PropertyInfo = () => {
-  var _dataV0$wsServicesC, _dataV0$wsServicesC$p, _data$wsServicesCal, _data$wsServicesCal$c, _dataV1$wsServicesC, _dataV1$wsServicesC$u, _dataV2$wsServicesC, _dataV2$wsServicesC$f;
+  var _dataV0$wsServicesC, _dataV0$wsServicesC$p, _dataConn$wsServices, _dataConn$wsServices$, _dataV1$wsServicesC, _dataV1$wsServicesC$u, _dataV2$wsServicesC, _dataV2$wsServicesC$f;
   const {
     t
   } = useTranslation();
   const history = useHistory();
   const location = useLocation();
-  const {
-    kNumber
-  } = location.state || {
+  const flowState = location.state || {
     kNumber: "EKYC-1234567890"
   };
+  const {
+    kNumber
+  } = flowState;
   const tenantId = Digit.ULBService.getCurrentTenantId();
   const {
-    data: dataV0,
-    isLoading: isLoadingV0
+    data: dataV0
   } = Digit.Hooks.ekyc.useGetPropertyType(tenantId);
   const {
-    data,
-    isLoading
+    data: dataConn
   } = Digit.Hooks.ekyc.useGetConnectionTypeV2(tenantId);
   const {
-    data: dataV1,
-    isLoading: isLoadingV1
+    data: dataV1
   } = Digit.Hooks.ekyc.useGetUserType(tenantId);
   const {
-    data: dataV2,
-    isLoading: isLoadingV2
+    data: dataV2
   } = Digit.Hooks.ekyc.useGetFloorCount(tenantId);
   const [ownerType, setOwnerType] = useState("OWNER");
   const [pidNumber, setPidNumber] = useState("");
-  const [connectionType, setConnectionType] = useState(null);
   const [connectionCategory, setConnectionCategory] = useState(null);
+  const [connectionType, setConnectionType] = useState(null);
   const [userType, setUserType] = useState(null);
   const [noOfFloors, setNoOfFloors] = useState(null);
   const [propertyDocument, setPropertyDocument] = useState(null);
@@ -2443,7 +2707,7 @@ const PropertyInfo = () => {
   const cameraRef = useRef(null);
   const handleSaveAndContinue = () => {
     history.push("/digit-ui/employee/ekyc/review", {
-      ...location.state,
+      ...flowState,
       propertyDetails: {
         ownerType,
         pidNumber,
@@ -2456,514 +2720,762 @@ const PropertyInfo = () => {
       }
     });
   };
-  const SuitcaseIcon = () => /*#__PURE__*/React.createElement("div", {
-    style: {
-      backgroundColor: "#E8EAF6",
-      padding: "8px",
-      borderRadius: "8px",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center"
-    }
-  }, /*#__PURE__*/React.createElement("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M20 6H16V4C16 2.89 15.11 2 14 2H10C8.89 2 8 2.89 8 4V6H4C2.89 6 2 6.89 2 8V19C2 20.11 2.89 21 4 21H20C21.11 21 22 20.11 22 19V8C22 6.89 21.11 6 20 6ZM10 4H14V6H10V4ZM20 19H4V8H20V19ZM13 13V10H11V13H8L12 17L16 13H13Z",
-    fill: "#3D51B0"
-  })));
-  const BuildingIcon = () => /*#__PURE__*/React.createElement("div", {
-    style: {
-      backgroundColor: "#E8EAF6",
-      padding: "8px",
-      borderRadius: "8px",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center"
-    }
-  }, /*#__PURE__*/React.createElement("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M12 7V3H2V21H22V7H12ZM6 19H4V17H6V19ZM6 15H4V13H6V15ZM6 11H4V9H6V11ZM6 7H4V5H6V7ZM10 19H8V17H10V19ZM10 15H8V13H10V15ZM10 11H8V9H10V11ZM10 7H8V5H10V7ZM20 19H12V9H20V19ZM18 11H14V13H18V11ZM18 15H14V17H18V15Z",
-    fill: "#3D51B0"
-  })));
-  const PdfIcon = () => /*#__PURE__*/React.createElement("svg", {
-    width: "48",
-    height: "48",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM13 9V3.5L18.5 9H13Z",
-    fill: "#1976D2"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M11 14H13V18H11V14ZM11 12H13V13H11V12Z",
-    fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M8 16H9V17H8V16Z",
-    fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M15 16H16V17H15V16Z",
-    fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M12 15.5L14 13.5H10L12 15.5Z",
-    fill: "white"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M12 18V14M12 14L10 16M12 14L14 16",
-    stroke: "white",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }));
-  const CameraIcon = () => /*#__PURE__*/React.createElement("svg", {
-    width: "32",
-    height: "32",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("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: "#3D51B0"
-  }));
+  const handleFileUpload = e => {
+    const file = e.target.files[0];
+    if (!file) return;
+    setPropertyDocument(file);
+  };
+  const handlePhotoCapture = e => {
+    const file = e.target.files[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onloadend = () => setBuildingPhoto(reader.result);
+    reader.readAsDataURL(file);
+  };
+  const connectionCategoryOptions = (dataV0 === null || dataV0 === void 0 ? void 0 : (_dataV0$wsServicesC = dataV0["ws-services-calculation"]) === null || _dataV0$wsServicesC === void 0 ? void 0 : (_dataV0$wsServicesC$p = _dataV0$wsServicesC.propertyTypeV2) === null || _dataV0$wsServicesC$p === void 0 ? void 0 : _dataV0$wsServicesC$p.map(item => ({
+    label: t(item.code),
+    value: item.code
+  }))) || [];
+  const connectionTypeOptions = (dataConn === null || dataConn === void 0 ? void 0 : (_dataConn$wsServices = dataConn["ws-services-calculation"]) === null || _dataConn$wsServices === void 0 ? void 0 : (_dataConn$wsServices$ = _dataConn$wsServices.connectionTypeV2) === null || _dataConn$wsServices$ === void 0 ? void 0 : _dataConn$wsServices$.map(item => ({
+    label: t(item.code),
+    value: item.code
+  }))) || [];
+  const userTypeOptions = (dataV1 === null || dataV1 === void 0 ? void 0 : (_dataV1$wsServicesC = dataV1["ws-services-calculation"]) === null || _dataV1$wsServicesC === void 0 ? void 0 : (_dataV1$wsServicesC$u = _dataV1$wsServicesC.userTypeV2) === null || _dataV1$wsServicesC$u === void 0 ? void 0 : _dataV1$wsServicesC$u.map(item => ({
+    label: t(item.code),
+    value: item.code
+  }))) || [];
+  const floorOptions = (dataV2 === null || dataV2 === void 0 ? void 0 : (_dataV2$wsServicesC = dataV2["ws-services-calculation"]) === null || _dataV2$wsServicesC === void 0 ? void 0 : (_dataV2$wsServicesC$f = _dataV2$wsServicesC.floorCount) === null || _dataV2$wsServicesC$f === void 0 ? void 0 : _dataV2$wsServicesC$f.map(item => ({
+    label: t(item.code),
+    value: item.code
+  }))) || [];
   return /*#__PURE__*/React.createElement("div", {
     className: "inbox-container"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("style", null, `
+        @keyframes fadeSlideIn {
+          from { opacity: 0; transform: translateY(8px); }
+          to   { opacity: 1; transform: translateY(0); }
+        }
+      `), /*#__PURE__*/React.createElement("div", {
     className: "filters-container"
   }, /*#__PURE__*/React.createElement(Card, {
-    className: "sidebar-title-card",
     style: {
       display: "flex",
       alignItems: "center",
-      padding: "16px",
-      marginBottom: "16px",
-      borderRadius: "4px"
+      padding: "12px 16px",
+      marginBottom: "12px",
+      borderRadius: "8px"
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: "icon-container",
     style: {
-      color: "#0068faff",
-      marginRight: "12px"
+      color: "#185FA5",
+      marginRight: "10px",
+      display: "flex"
     }
   }, /*#__PURE__*/React.createElement(HomeIcon, {
     style: {
-      width: "24px",
-      height: "24px"
+      width: "20px",
+      height: "20px"
     }
   })), /*#__PURE__*/React.createElement("div", {
     style: {
-      fontWeight: "700",
-      fontSize: "18px",
+      fontWeight: "600",
+      fontSize: "15px",
       color: "#0B0C0C"
     }
-  }, t("EKYC_PROCESS"))), /*#__PURE__*/React.createElement("div", {
+  }, t("EKYC_PROCESS") || "eKYC Process")), /*#__PURE__*/React.createElement("div", {
     style: {
-      backgroundColor: "#FFFFFF",
-      padding: "16px",
+      background: "#fff",
+      padding: "16px 14px",
       borderRadius: "8px",
-      border: "1px solid #EAECF0",
-      boxShadow: "0 2px 4px rgba(0,0,0,0.02)"
+      border: "1px solid #EAECF0"
     }
-  }, /*#__PURE__*/React.createElement(ConnectingCheckPoints, null, /*#__PURE__*/React.createElement(CheckPoint, {
+  }, [{
     label: t("EKYC_STEP_AADHAAR") || "Aadhaar",
-    isCompleted: true
-  }), /*#__PURE__*/React.createElement(CheckPoint, {
+    done: true,
+    active: false
+  }, {
     label: t("EKYC_STEP_ADDRESS") || "Address",
-    isCompleted: true
-  }), /*#__PURE__*/React.createElement(CheckPoint, {
+    done: true,
+    active: false
+  }, {
     label: t("EKYC_STEP_PROPERTY") || "Property",
-    isCompleted: false
-  }), /*#__PURE__*/React.createElement(CheckPoint, {
-    label: t("EKYC_STEP_REVIEW") || "Review"
-  })))), /*#__PURE__*/React.createElement("div", {
+    done: false,
+    active: true
+  }, {
+    label: t("EKYC_STEP_REVIEW") || "Review",
+    done: false,
+    active: false
+  }].map((step, i) => /*#__PURE__*/React.createElement("div", {
+    key: i,
     style: {
-      flex: 1,
-      marginLeft: "16px"
+      display: "flex",
+      gap: "10px",
+      alignItems: "flex-start",
+      position: "relative",
+      paddingBottom: i < 3 ? "18px" : 0
     }
-  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
+  }, i < 3 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: "absolute",
+      left: "10px",
+      top: "22px",
+      width: "1px",
+      height: "calc(100% - 10px)",
+      background: "#EAECF0"
+    }
+  }), /*#__PURE__*/React.createElement("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",
-      justifyContent: "space-between",
       alignItems: "center",
-      marginBottom: "24px"
+      justifyContent: "center",
+      fontSize: "10px",
+      fontWeight: "500",
+      color: step.done ? "#fff" : step.active ? "#185FA5" : "#98A2B3"
     }
-  }, /*#__PURE__*/React.createElement(Header, null, t("Property Details")), /*#__PURE__*/React.createElement("div", {
+  }, step.done ? /*#__PURE__*/React.createElement(CheckIcon$2, {
+    size: 11,
+    color: "#fff"
+  }) : i + 1), /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: "14px",
-      fontWeight: "700",
-      color: "#505A5F"
+      fontSize: "12px",
+      paddingTop: "2px",
+      color: step.done ? "#0F6E56" : step.active ? "#0B0C0C" : "#667085",
+      fontWeight: step.done || step.active ? "600" : "400"
     }
-  }, t("EKYC_K_NUMBER"), ": ", /*#__PURE__*/React.createElement("span", {
+  }, step.label))))), /*#__PURE__*/React.createElement("div", {
     style: {
-      color: "#0B0C0C"
+      flex: 1,
+      marginLeft: "16px"
     }
-  }, kNumber))), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
+      justifyContent: "space-between",
       alignItems: "center",
-      gap: "12px",
-      marginBottom: "24px"
+      marginBottom: "20px"
     }
-  }, /*#__PURE__*/React.createElement(SuitcaseIcon, null), /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement(CardHeader, {
     style: {
-      fontSize: "20px",
-      fontWeight: "700",
-      color: "#101828"
+      margin: 0,
+      fontSize: "18px"
     }
-  }, t("Property Details"))), /*#__PURE__*/React.createElement(Card, {
+  }, t("EKYC_PROPERTY_DETAILS_HEADER") || "Property Details"), /*#__PURE__*/React.createElement("div", {
     style: {
-      padding: "20px",
-      borderRadius: "16px",
-      border: "1px solid #EAECF0",
-      marginBottom: "24px"
+      background: "#F9FAFB",
+      border: "0.5px solid #EAECF0",
+      borderRadius: "20px",
+      padding: "4px 14px",
+      fontSize: "12px",
+      color: "#667085"
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, t("EKYC_K_NUMBER") || "K Number", ":", " ", /*#__PURE__*/React.createElement("span", {
     style: {
-      marginBottom: "24px"
+      color: "#0B0C0C",
+      fontWeight: "600"
     }
-  }, /*#__PURE__*/React.createElement(CardLabel, {
+  }, kNumber))), /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: "14px",
-      fontWeight: "600",
-      color: "#667085",
-      marginBottom: "12px"
+      animation: "fadeSlideIn 0.3s ease"
     }
-  }, t("Property_Owner")), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(SectionHead$2, {
+    icon: /*#__PURE__*/React.createElement(BriefcaseIcon, {
+      size: 16
+    }),
+    label: t("EKYC_PROPERTY_DETAILS") || "Property details"
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: "20px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "11px",
+      fontWeight: "600",
+      color: "#667085",
+      textTransform: "uppercase",
+      letterSpacing: "0.04em",
+      marginBottom: "8px"
+    }
+  }, t("EKYC_PROPERTY_OWNER") || "Property owner"), /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
       backgroundColor: "#F2F4F7",
       padding: "4px",
-      borderRadius: "12px"
-    }
-  }, /*#__PURE__*/React.createElement("button", {
-    onClick: () => setOwnerType("OWNER"),
-    style: {
-      flex: 1,
-      padding: "10px",
       borderRadius: "10px",
-      border: "none",
-      backgroundColor: ownerType === "OWNER" ? "#3D51B0" : "transparent",
-      color: ownerType === "OWNER" ? "#FFFFFF" : "#667085",
-      fontWeight: "600",
-      cursor: "pointer",
-      transition: "all 0.2s"
+      gap: "4px"
     }
-  }, t("Owner")), /*#__PURE__*/React.createElement("button", {
-    onClick: () => setOwnerType("TENANT"),
+  }, ["OWNER", "TENANT"].map(type => /*#__PURE__*/React.createElement("button", {
+    key: type,
+    onClick: () => setOwnerType(type),
     style: {
       flex: 1,
-      padding: "10px",
-      borderRadius: "10px",
+      padding: "9px 12px",
+      borderRadius: "7px",
       border: "none",
-      backgroundColor: ownerType === "TENANT" ? "#3D51B0" : "transparent",
-      color: ownerType === "TENANT" ? "#FFFFFF" : "#667085",
-      fontWeight: "600",
       cursor: "pointer",
-      transition: "all 0.2s"
+      fontSize: "13px",
+      fontWeight: "600",
+      transition: "all 0.15s",
+      background: ownerType === type ? "#185FA5" : "transparent",
+      color: ownerType === type ? "#fff" : "#667085"
     }
-  }, t("Tenant")))), /*#__PURE__*/React.createElement("div", {
+  }, t(`EKYC_${type}`) || (type === "OWNER" ? "Owner" : "Tenant"))))), /*#__PURE__*/React.createElement("div", {
     style: {
-      marginBottom: "8px"
+      marginBottom: "20px"
     }
-  }, /*#__PURE__*/React.createElement(CardLabel, {
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: "14px",
+      fontSize: "11px",
       fontWeight: "600",
       color: "#667085",
-      marginBottom: "12px"
+      textTransform: "uppercase",
+      letterSpacing: "0.04em",
+      marginBottom: "6px"
     }
-  }, t("PID_Number"), " ", /*#__PURE__*/React.createElement("span", {
+  }, t("EKYC_PID_NUMBER") || "PID number", " ", /*#__PURE__*/React.createElement("span", {
     style: {
       fontStyle: "italic",
       fontWeight: "400",
+      textTransform: "none",
       color: "#98A2B3"
     }
-  }, t("Optional"))), /*#__PURE__*/React.createElement("div", {
-    className: "field",
-    style: {
-      position: "relative"
-    }
-  }, /*#__PURE__*/React.createElement(TextInput, {
+  }, "\u2014 ", t("EKYC_OPTIONAL") || "optional")), /*#__PURE__*/React.createElement(IconInput$2, {
+    icon: /*#__PURE__*/React.createElement(PidIcon, {
+      size: 15
+    }),
     value: pidNumber,
     onChange: e => setPidNumber(e.target.value),
-    placeholder: t("Enter_PID_Number"),
-    textInputStyle: {
-      paddingLeft: "44px",
-      borderRadius: "12px",
-      border: "1px solid #D0D5DD",
-      height: "56px"
+    placeholder: t("EKYC_ENTER_PID_NUMBER") || "Enter PID number"
+  })), /*#__PURE__*/React.createElement("hr", {
+    style: {
+      margin: "24px 0",
+      border: 0,
+      borderTop: "1px solid #EAECF0"
     }
+  }), /*#__PURE__*/React.createElement(SectionHead$2, {
+    icon: /*#__PURE__*/React.createElement(BuildingIcon, {
+      size: 16
+    }),
+    label: t("EKYC_BUILDING_INFO") || "Building info"
   }), /*#__PURE__*/React.createElement("div", {
     style: {
-      position: "absolute",
-      left: "16px",
-      top: "50%",
-      transform: "translateY(-50%)",
-      color: "#3D51B0",
-      fontSize: "20px",
-      fontWeight: "600"
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr",
+      gap: "14px",
+      marginBottom: "14px"
     }
-  }, "#")))), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     style: {
-      display: "flex",
-      alignItems: "center",
-      gap: "12px",
-      marginBottom: "24px"
+      fontSize: "11px",
+      fontWeight: "600",
+      color: "#667085",
+      textTransform: "uppercase",
+      letterSpacing: "0.04em",
+      marginBottom: "6px"
     }
-  }, /*#__PURE__*/React.createElement(BuildingIcon, null), /*#__PURE__*/React.createElement("span", {
+  }, t("EKYC_TYPE_OF_CONNECTION") || "Type of connection"), /*#__PURE__*/React.createElement(Dropdown, {
+    selected: connectionCategory,
+    select: setConnectionCategory,
+    option: connectionCategoryOptions,
+    optionKey: "label",
+    t: t,
+    placeholder: t("EKYC_SELECT") || "Select"
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: "20px",
-      fontWeight: "700",
-      color: "#101828"
+      fontSize: "11px",
+      fontWeight: "600",
+      color: "#667085",
+      textTransform: "uppercase",
+      letterSpacing: "0.04em",
+      marginBottom: "6px"
     }
-  }, t("Building_Info"))), /*#__PURE__*/React.createElement(Card, {
+  }, t("EKYC_CONNECTION_CATEGORY") || "Connection category"), /*#__PURE__*/React.createElement(Dropdown, {
+    selected: connectionType,
+    select: setConnectionType,
+    option: connectionTypeOptions,
+    optionKey: "label",
+    t: t,
+    placeholder: t("EKYC_SELECT") || "Select"
+  }))), /*#__PURE__*/React.createElement("div", {
     style: {
-      padding: "20px",
-      borderRadius: "16px",
-      border: "1px solid #EAECF0",
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr",
+      gap: "14px",
       marginBottom: "24px"
     }
-  }, [{
-    label: "Type_of_Connection",
-    state: connectionCategory,
-    setState: setConnectionCategory,
-    options: (dataV0 === null || dataV0 === void 0 ? void 0 : (_dataV0$wsServicesC = dataV0["ws-services-calculation"]) === null || _dataV0$wsServicesC === void 0 ? void 0 : (_dataV0$wsServicesC$p = _dataV0$wsServicesC.propertyTypeV2) === null || _dataV0$wsServicesC$p === void 0 ? void 0 : _dataV0$wsServicesC$p.map(item => ({
-      label: t(item.code),
-      value: item.code
-    }))) || []
-  }, {
-    label: "Connection_Category",
-    state: connectionType,
-    setState: setConnectionType,
-    options: (data === null || data === void 0 ? void 0 : (_data$wsServicesCal = data["ws-services-calculation"]) === null || _data$wsServicesCal === void 0 ? void 0 : (_data$wsServicesCal$c = _data$wsServicesCal.connectionTypeV2) === null || _data$wsServicesCal$c === void 0 ? void 0 : _data$wsServicesCal$c.map(item => ({
-      label: t(item.code),
-      value: item.code
-    }))) || []
-  }, {
-    label: "User_Type",
-    state: userType,
-    setState: setUserType,
-    options: (dataV1 === null || dataV1 === void 0 ? void 0 : (_dataV1$wsServicesC = dataV1["ws-services-calculation"]) === null || _dataV1$wsServicesC === void 0 ? void 0 : (_dataV1$wsServicesC$u = _dataV1$wsServicesC.userTypeV2) === null || _dataV1$wsServicesC$u === void 0 ? void 0 : _dataV1$wsServicesC$u.map(item => ({
-      label: t(item.code),
-      value: item.code
-    }))) || []
-  }, {
-    label: "No_of_Floor",
-    state: noOfFloors,
-    setState: setNoOfFloors,
-    options: (dataV2 === null || dataV2 === void 0 ? void 0 : (_dataV2$wsServicesC = dataV2["ws-services-calculation"]) === null || _dataV2$wsServicesC === void 0 ? void 0 : (_dataV2$wsServicesC$f = _dataV2$wsServicesC.floorCount) === null || _dataV2$wsServicesC$f === void 0 ? void 0 : _dataV2$wsServicesC$f.map(item => ({
-      label: t(item.code),
-      value: item.code
-    }))) || []
-  }].map((item, idx) => /*#__PURE__*/React.createElement("div", {
-    key: idx,
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     style: {
-      marginBottom: "20px"
-    }
-  }, /*#__PURE__*/React.createElement(CardLabel, {
-    style: {
-      fontSize: "14px",
+      fontSize: "11px",
       fontWeight: "600",
-      color: "#344054",
-      marginBottom: "8px"
+      color: "#667085",
+      textTransform: "uppercase",
+      letterSpacing: "0.04em",
+      marginBottom: "6px"
     }
-  }, t(item.label)), /*#__PURE__*/React.createElement(Dropdown, {
-    selected: item.state,
-    select: item.setState,
-    option: item.options || [{
-      label: `Select ${item.label}`,
-      value: ""
-    }],
+  }, t("EKYC_USER_TYPE") || "User type"), /*#__PURE__*/React.createElement(Dropdown, {
+    selected: userType,
+    select: setUserType,
+    option: userTypeOptions,
     optionKey: "label",
     t: t,
+    placeholder: t("EKYC_SELECT") || "Select"
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     style: {
-      borderRadius: "12px",
-      border: "1px solid #D0D5DD",
-      height: "48px"
+      fontSize: "11px",
+      fontWeight: "600",
+      color: "#667085",
+      textTransform: "uppercase",
+      letterSpacing: "0.04em",
+      marginBottom: "6px"
     }
-  }))), /*#__PURE__*/React.createElement("div", {
+  }, t("EKYC_NO_OF_FLOORS") || "No. of floors"), /*#__PURE__*/React.createElement(Dropdown, {
+    selected: noOfFloors,
+    select: setNoOfFloors,
+    option: floorOptions,
+    optionKey: "label",
+    t: t,
+    placeholder: t("EKYC_SELECT") || "Select"
+  }))), /*#__PURE__*/React.createElement("hr", {
     style: {
-      display: "flex",
-      gap: "24px",
-      alignItems: "stretch",
-      flexWrap: "wrap"
+      margin: "24px 0",
+      border: 0,
+      borderTop: "1px solid #EAECF0"
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement(SectionHead$2, {
+    icon: /*#__PURE__*/React.createElement(DocumentIcon, {
+      size: 16
+    }),
+    label: t("EKYC_DOCUMENTS_PHOTO") || "Documents & photo"
+  }), /*#__PURE__*/React.createElement("div", {
     style: {
-      flex: 1,
-      minWidth: "300px",
-      display: "flex",
-      flexDirection: "column"
+      display: "grid",
+      gridTemplateColumns: "1fr 1fr",
+      gap: "14px",
+      marginBottom: "20px"
     }
-  }, /*#__PURE__*/React.createElement(CardLabel, {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: "14px",
+      fontSize: "11px",
       fontWeight: "600",
-      color: "#344054",
+      color: "#667085",
+      textTransform: "uppercase",
+      letterSpacing: "0.04em",
       marginBottom: "8px"
     }
-  }, t("Upload_Property_Document")), /*#__PURE__*/React.createElement("div", {
-    style: {
-      flex: 1,
-      backgroundColor: "#EBF5FF",
-      border: "1px solid #B2DDFF",
-      borderRadius: "16px",
-      padding: "32px 24px",
-      textAlign: "center",
-      cursor: "pointer",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center"
-    },
-    onClick: () => fileRef.current.click()
-  }, /*#__PURE__*/React.createElement("input", {
+  }, t("EKYC_UPLOAD_PROPERTY_DOC") || "Upload property document"), /*#__PURE__*/React.createElement("input", {
     type: "file",
     ref: fileRef,
+    accept: ".pdf",
     style: {
       display: "none"
     },
-    accept: ".pdf"
+    onChange: handleFileUpload
   }), /*#__PURE__*/React.createElement("div", {
+    onClick: () => fileRef.current.click(),
+    onMouseOver: e => e.currentTarget.style.borderColor = "#185FA5",
+    onMouseOut: e => e.currentTarget.style.borderColor = "#B5D4F4",
     style: {
-      color: "#1570EF",
-      fontWeight: "600",
-      fontSize: "16px",
-      marginBottom: "20px",
-      lineHeight: "1.5"
-    }
-  }, t("Upload_your_property_document_in_PDF_Only")), /*#__PURE__*/React.createElement("div", {
-    style: {
+      border: "1.5px dashed #B5D4F4",
+      borderRadius: "10px",
+      padding: "28px 20px",
+      textAlign: "center",
+      cursor: "pointer",
+      backgroundColor: "#E6F1FB",
+      minHeight: "160px",
       display: "flex",
-      justifyContent: "center"
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "10px",
+      transition: "border-color 0.15s"
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      backgroundColor: "#FFFFFF",
-      padding: "12px",
-      borderRadius: "12px",
-      boxShadow: "0px 1px 2px rgba(16, 24, 40, 0.05)"
+      background: "#fff",
+      padding: "10px",
+      borderRadius: "10px",
+      display: "flex"
     }
-  }, /*#__PURE__*/React.createElement(PdfIcon, null))))), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "32",
+    height: "32",
+    viewBox: "0 0 24 24",
+    fill: "#185FA5"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12 18v-4M12 14l-2 2M12 14l2 2",
+    stroke: "#fff",
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }))), propertyDocument ? /*#__PURE__*/React.createElement("div", {
     style: {
-      flex: 1,
-      minWidth: "300px",
-      display: "flex",
-      flexDirection: "column"
+      fontSize: "13px",
+      fontWeight: "600",
+      color: "#0F6E56"
     }
-  }, /*#__PURE__*/React.createElement(CardLabel, {
+  }, "\u2713 ", propertyDocument.name) : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: "14px",
+      fontSize: "13px",
       fontWeight: "600",
-      color: "#344054",
-      marginBottom: "8px"
+      color: "#185FA5"
     }
-  }, t("Capture_Building_Image")), /*#__PURE__*/React.createElement("div", {
+  }, t("EKYC_UPLOAD_PROPERTY_DOC_CTA") || "Tap to upload"), /*#__PURE__*/React.createElement("div", {
     style: {
-      flex: 1,
-      border: "1px solid #D0D5DD",
-      borderRadius: "16px",
-      padding: "40px 24px",
-      textAlign: "center",
-      cursor: "pointer",
-      backgroundColor: "#FFFFFF",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center"
-    },
-    onClick: () => cameraRef.current.click()
-  }, /*#__PURE__*/React.createElement("input", {
+      fontSize: "12px",
+      color: "#378ADD"
+    }
+  }, "PDF only")))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: "11px",
+      fontWeight: "600",
+      color: "#667085",
+      textTransform: "uppercase",
+      letterSpacing: "0.04em",
+      marginBottom: "8px"
+    }
+  }, t("EKYC_CAPTURE_BUILDING_IMAGE") || "Capture building image"), /*#__PURE__*/React.createElement("input", {
     type: "file",
     ref: cameraRef,
+    accept: "image/*",
+    capture: "environment",
     style: {
       display: "none"
     },
-    accept: "image/*",
-    capture: "environment"
+    onChange: handlePhotoCapture
   }), /*#__PURE__*/React.createElement("div", {
+    onClick: !buildingPhoto ? () => cameraRef.current.click() : undefined,
+    onMouseOver: e => {
+      if (!buildingPhoto) e.currentTarget.style.borderColor = "#185FA5";
+    },
+    onMouseOut: e => {
+      if (!buildingPhoto) e.currentTarget.style.borderColor = "#D0D5DD";
+    },
+    style: {
+      border: "1.5px dashed #D0D5DD",
+      borderRadius: "10px",
+      minHeight: "160px",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "#F9FAFB",
+      cursor: buildingPhoto ? "default" : "pointer",
+      overflow: "hidden",
+      transition: "border-color 0.15s",
+      position: "relative",
+      padding: buildingPhoto ? "0" : "28px 20px"
+    }
+  }, !buildingPhoto ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
     style: {
-      backgroundColor: "#EEF4FF",
-      width: "56px",
-      height: "56px",
+      background: "#E6F1FB",
+      width: "52px",
+      height: "52px",
       borderRadius: "50%",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      margin: "0 auto 16px"
+      marginBottom: "10px"
     }
-  }, /*#__PURE__*/React.createElement(CameraIcon, null)), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(CameraIcon$1, {
+    size: 26
+  })), /*#__PURE__*/React.createElement("div", {
     style: {
+      fontSize: "13px",
       fontWeight: "600",
-      color: "#101828",
-      fontSize: "16px",
-      marginBottom: "4px"
+      color: "#101828"
     }
-  }, t("Tap_to_Capture")), /*#__PURE__*/React.createElement("div", {
+  }, t("EKYC_TAP_TO_CAPTURE") || "Tap to capture"), /*#__PURE__*/React.createElement("div", {
     style: {
+      fontSize: "12px",
       color: "#667085",
-      fontSize: "14px"
+      marginTop: "2px"
     }
-  }, t("Building_Photo"))))), /*#__PURE__*/React.createElement("div", {
+  }, t("EKYC_BUILDING_PHOTO") || "Building photo with GPS")) : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("img", {
+    src: buildingPhoto,
+    alt: "Building",
     style: {
-      marginTop: "24px",
-      backgroundColor: "#EFF8FF",
-      padding: "16px",
-      borderRadius: "12px",
+      width: "100%",
+      maxHeight: "200px",
+      objectFit: "cover",
+      display: "block"
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    onClick: e => {
+      e.stopPropagation();
+      setBuildingPhoto(null);
+      if (cameraRef.current) cameraRef.current.value = "";
+    },
+    style: {
+      position: "absolute",
+      top: "8px",
+      right: "8px",
+      background: "#fff",
+      border: "0.5px solid #EAECF0",
+      borderRadius: "7px",
+      padding: "5px 10px",
       display: "flex",
-      gap: "12px",
-      border: "1px solid #B2DDFF"
+      alignItems: "center",
+      gap: "5px",
+      cursor: "pointer",
+      fontSize: "12px",
+      color: "#D92D20",
+      fontWeight: "500"
+    }
+  }, /*#__PURE__*/React.createElement(TrashIcon$1, {
+    size: 13
+  }), " ", t("EKYC_REMOVE") || "Remove"))))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: "#E6F1FB",
+      border: "0.5px solid #B5D4F4",
+      borderRadius: "8px",
+      padding: "12px 14px",
+      display: "flex",
+      alignItems: "flex-start",
+      gap: "10px",
+      marginBottom: "4px"
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      color: "#1570EF"
+      flexShrink: 0,
+      marginTop: "1px"
     }
-  }, /*#__PURE__*/React.createElement("svg", {
-    width: "20",
-    height: "20",
-    viewBox: "0 0 20 20",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V9H11V15ZM11 7H9V5H11V7Z",
-    fill: "currentColor"
-  }))), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(InfoBannerIcon, {
+    fill: "#185FA5"
+  })), /*#__PURE__*/React.createElement("div", {
     style: {
-      color: "#175CD3",
-      fontSize: "14px",
-      fontWeight: "500",
-      lineHeight: "1.4"
+      fontSize: "13px",
+      color: "#185FA5",
+      lineHeight: "1.5"
     }
-  }, t("This_section_is_enabled_only_if_user_is_not_the_owner."))), /*#__PURE__*/React.createElement("div", {
+  }, t("EKYC_TENANT_INFO_NOTICE") || "This section is enabled only if the user is not the owner. Tenant details will be required if tenant is selected."))), /*#__PURE__*/React.createElement("div", {
     style: {
-      display: "flex",
-      justifyContent: "flex-start",
       marginTop: "24px"
     }
   }, /*#__PURE__*/React.createElement(SubmitBar, {
-    label: t("Save_&_Continue"),
-    onSubmit: handleSaveAndContinue,
+    label: t("EKYC_SAVE_AND_CONTINUE") || "Save & Continue",
+    onSubmit: handleSaveAndContinue
+  })), /*#__PURE__*/React.createElement("div", {
     style: {
-      borderRadius: "8px",
-      height: "48px",
-      margin: 0
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "5px",
+      marginTop: "16px",
+      fontSize: "11px",
+      color: "#98A2B3"
     }
-  }))))));
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "11",
+    height: "11",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "3",
+    y: "11",
+    width: "18",
+    height: "11",
+    rx: "2"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M7 11V7a5 5 0 0 1 10 0v4"
+  })), t("EKYC_SECURE_DATA_NOTICE") || "Your data is encrypted and secure"))));
 };
 
+const CheckIcon$3 = ({
+  size: _size = 11,
+  color: _color = "#fff"
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: _size,
+  height: _size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: _color,
+  strokeWidth: "3",
+  strokeLinecap: "round"
+}, /*#__PURE__*/React.createElement("polyline", {
+  points: "20 6 9 17 4 12"
+}));
+const PersonIcon = ({
+  size: _size2 = 16
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: _size2,
+  height: _size2,
+  viewBox: "0 0 24 24",
+  fill: "currentColor"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"
+}));
+const LocationIcon2 = ({
+  size: _size3 = 16
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: _size3,
+  height: _size3,
+  viewBox: "0 0 24 24",
+  fill: "currentColor"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"
+}));
+const BuildingIcon$1 = ({
+  size: _size4 = 16
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: _size4,
+  height: _size4,
+  viewBox: "0 0 24 24",
+  fill: "currentColor"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8V9h8v10zm-2-8h-4v2h4v-2zm0 4h-4v2h4v-2z"
+}));
+const EditIcon = ({
+  size: _size5 = 14
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: _size5,
+  height: _size5,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
+}));
+const SectionHead$3 = ({
+  icon,
+  label
+}) => /*#__PURE__*/React.createElement("div", {
+  style: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    marginBottom: "16px",
+    marginTop: "4px"
+  }
+}, /*#__PURE__*/React.createElement("div", {
+  style: {
+    opacity: 0.5,
+    display: "flex"
+  }
+}, icon), /*#__PURE__*/React.createElement("span", {
+  style: {
+    fontSize: "15px",
+    fontWeight: "600",
+    color: "#0B0C0C",
+    whiteSpace: "nowrap"
+  }
+}, label), /*#__PURE__*/React.createElement("div", {
+  style: {
+    flex: 1,
+    height: "1px",
+    background: "#EAECF0"
+  }
+}));
+const ReviewCard = ({
+  icon,
+  title,
+  onEdit,
+  editLabel,
+  rows
+}) => /*#__PURE__*/React.createElement("div", {
+  style: {
+    border: "0.5px solid #EAECF0",
+    borderRadius: "10px",
+    overflow: "hidden",
+    marginBottom: "16px",
+    animation: "fadeSlideIn 0.3s ease"
+  }
+}, /*#__PURE__*/React.createElement("div", {
+  style: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "14px 16px",
+    background: "#F9FAFB",
+    borderBottom: "0.5px solid #EAECF0"
+  }
+}, /*#__PURE__*/React.createElement("div", {
+  style: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
+  }
+}, /*#__PURE__*/React.createElement("div", {
+  style: {
+    opacity: 0.5,
+    display: "flex"
+  }
+}, icon), /*#__PURE__*/React.createElement("span", {
+  style: {
+    fontSize: "14px",
+    fontWeight: "600",
+    color: "#0B0C0C"
+  }
+}, title)), /*#__PURE__*/React.createElement("button", {
+  onClick: onEdit,
+  style: {
+    display: "flex",
+    alignItems: "center",
+    gap: "5px",
+    background: "none",
+    border: "0.5px solid #D0D5DD",
+    borderRadius: "6px",
+    padding: "5px 12px",
+    fontSize: "12px",
+    fontWeight: "600",
+    color: "#185FA5",
+    cursor: "pointer"
+  }
+}, /*#__PURE__*/React.createElement(EditIcon, {
+  size: 12
+}), editLabel)), /*#__PURE__*/React.createElement("div", {
+  style: {
+    padding: "4px 0"
+  }
+}, rows.map((row, i) => row.value ? /*#__PURE__*/React.createElement("div", {
+  key: i,
+  style: {
+    display: "flex",
+    alignItems: "flex-start",
+    padding: "10px 16px",
+    borderBottom: i < rows.length - 1 ? "0.5px solid #F2F4F7" : "none"
+  }
+}, /*#__PURE__*/React.createElement("div", {
+  style: {
+    flex: "0 0 180px",
+    fontSize: "12px",
+    fontWeight: "600",
+    color: "#667085",
+    textTransform: "uppercase",
+    letterSpacing: "0.04em",
+    paddingTop: "1px"
+  }
+}, row.label), /*#__PURE__*/React.createElement("div", {
+  style: {
+    flex: 1,
+    fontSize: "14px",
+    color: "#101828",
+    fontWeight: "500",
+    wordBreak: "break-word"
+  }
+}, row.value)) : null)));
 const Review = () => {
-  var _propertyDetails$conn, _propertyDetails$conn2;
+  var _propertyDetails$conn, _propertyDetails$conn2, _propertyDetails$user, _propertyDetails$noOf;
   const {
     t
   } = useTranslation();
   const history = useHistory();
   const location = useLocation();
   const {
-    kNumber = "NA",
+    kNumber = "EKYC-1234567890",
     aadhaarDetails = {},
     addressDetails = {},
     propertyDetails = {}
@@ -2982,194 +3494,311 @@ const Review = () => {
   };
   return /*#__PURE__*/React.createElement("div", {
     className: "inbox-container"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("style", null, `
+        @keyframes fadeSlideIn {
+          from { opacity: 0; transform: translateY(8px); }
+          to   { opacity: 1; transform: translateY(0); }
+        }
+      `), /*#__PURE__*/React.createElement("div", {
     className: "filters-container"
   }, /*#__PURE__*/React.createElement(Card, {
-    className: "sidebar-title-card",
     style: {
       display: "flex",
       alignItems: "center",
-      padding: "16px",
-      marginBottom: "16px",
-      borderRadius: "4px"
+      padding: "12px 16px",
+      marginBottom: "12px",
+      borderRadius: "8px"
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: "icon-container",
     style: {
-      color: "#0068faff",
-      marginRight: "12px"
+      color: "#185FA5",
+      marginRight: "10px",
+      display: "flex"
     }
   }, /*#__PURE__*/React.createElement(HomeIcon, {
     style: {
-      width: "24px",
-      height: "24px"
+      width: "20px",
+      height: "20px"
     }
   })), /*#__PURE__*/React.createElement("div", {
     style: {
-      fontWeight: "700",
-      fontSize: "18px",
+      fontWeight: "600",
+      fontSize: "15px",
       color: "#0B0C0C"
     }
-  }, t("EKYC_PROCESS"))), /*#__PURE__*/React.createElement("div", {
+  }, t("EKYC_PROCESS") || "eKYC Process")), /*#__PURE__*/React.createElement("div", {
     style: {
-      backgroundColor: "#FFFFFF",
-      padding: "16px",
+      background: "#fff",
+      padding: "16px 14px",
       borderRadius: "8px",
-      border: "1px solid #EAECF0",
-      boxShadow: "0 2px 4px rgba(0,0,0,0.02)"
+      border: "1px solid #EAECF0"
     }
-  }, /*#__PURE__*/React.createElement(ConnectingCheckPoints, null, /*#__PURE__*/React.createElement(CheckPoint, {
+  }, [{
     label: t("EKYC_STEP_AADHAAR") || "Aadhaar",
-    isCompleted: true
-  }), /*#__PURE__*/React.createElement(CheckPoint, {
+    done: true,
+    active: false
+  }, {
     label: t("EKYC_STEP_ADDRESS") || "Address",
-    isCompleted: true
-  }), /*#__PURE__*/React.createElement(CheckPoint, {
+    done: true,
+    active: false
+  }, {
     label: t("EKYC_STEP_PROPERTY") || "Property",
-    isCompleted: true
-  }), /*#__PURE__*/React.createElement(CheckPoint, {
+    done: true,
+    active: false
+  }, {
     label: t("EKYC_STEP_REVIEW") || "Review",
-    isCompleted: false
-  })))), /*#__PURE__*/React.createElement("div", {
+    done: false,
+    active: true
+  }].map((step, i) => /*#__PURE__*/React.createElement("div", {
+    key: i,
     style: {
-      flex: 1,
-      marginLeft: "16px"
+      display: "flex",
+      gap: "10px",
+      alignItems: "flex-start",
+      position: "relative",
+      paddingBottom: i < 3 ? "18px" : 0
     }
-  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
+  }, i < 3 && /*#__PURE__*/React.createElement("div", {
     style: {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      marginBottom: "24px"
+      position: "absolute",
+      left: "10px",
+      top: "22px",
+      width: "1px",
+      height: "calc(100% - 10px)",
+      background: "#EAECF0"
     }
-  }, /*#__PURE__*/React.createElement(Header, null, t("EKYC_REVIEW_DETAILS") || "Review Details"), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     style: {
-      fontSize: "14px",
-      fontWeight: "700",
-      color: "#505A5F"
+      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"
     }
-  }, t("EKYC_K_NUMBER"), ": ", /*#__PURE__*/React.createElement("span", {
+  }, step.done ? /*#__PURE__*/React.createElement(CheckIcon$3, {
+    size: 11,
+    color: "#fff"
+  }) : i + 1), /*#__PURE__*/React.createElement("div", {
     style: {
-      color: "#0B0C0C"
+      fontSize: "12px",
+      paddingTop: "2px",
+      color: step.done ? "#0F6E56" : step.active ? "#0B0C0C" : "#667085",
+      fontWeight: step.done || step.active ? "600" : "400"
     }
-  }, kNumber))), /*#__PURE__*/React.createElement(Card, {
+  }, step.label))))), /*#__PURE__*/React.createElement("div", {
     style: {
-      padding: "24px",
-      marginBottom: "24px",
-      borderRadius: "12px",
-      border: "1px solid #EAECF0"
+      flex: 1,
+      marginLeft: "16px"
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
     style: {
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
-      marginBottom: "16px"
+      marginBottom: "20px"
     }
   }, /*#__PURE__*/React.createElement(CardHeader, {
     style: {
       margin: 0,
-      fontSize: "18px",
-      color: "#0B0C0C"
+      fontSize: "18px"
     }
-  }, t("EKYC_AADHAAR_VERIFICATION_HEADER") || "Aadhaar Details"), /*#__PURE__*/React.createElement("span", {
-    onClick: handleEditAadhaar,
+  }, t("EKYC_REVIEW_DETAILS") || "Review Details"), /*#__PURE__*/React.createElement("div", {
     style: {
-      color: "#3A8DCC",
-      fontWeight: "600",
-      cursor: "pointer",
-      fontSize: "14px"
+      background: "#F9FAFB",
+      border: "0.5px solid #EAECF0",
+      borderRadius: "20px",
+      padding: "4px 14px",
+      fontSize: "12px",
+      color: "#667085"
     }
-  }, t("CS_COMMON_EDIT"))), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
-    label: t("EKYC_NAME"),
-    text: aadhaarDetails.userName || "Rajesh Kumar Singh"
-  }), /*#__PURE__*/React.createElement(Row, {
-    label: t("EKYC_AADHAAR"),
-    text: aadhaarDetails.aadhaarLastFour ? `XXXX XXXX ${aadhaarDetails.aadhaarLastFour}` : t("CS_NA")
-  }), /*#__PURE__*/React.createElement(Row, {
-    label: t("EKYC_MOBILE_NO"),
-    text: aadhaarDetails.mobileNumber || t("CS_NA")
-  }), /*#__PURE__*/React.createElement(Row, {
-    label: t("EKYC_EMAIL_ADDRESS"),
-    text: aadhaarDetails.email || t("CS_NA")
-  }))), /*#__PURE__*/React.createElement(Card, {
+  }, t("EKYC_K_NUMBER") || "K Number", ":", " ", /*#__PURE__*/React.createElement("span", {
     style: {
-      padding: "24px",
-      marginBottom: "24px",
-      borderRadius: "12px",
-      border: "1px solid #EAECF0"
+      color: "#0B0C0C",
+      fontWeight: "600"
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, kNumber))), /*#__PURE__*/React.createElement("div", {
     style: {
+      backgroundColor: "#E1F5EE",
+      border: "0.5px solid #5DCAA5",
+      borderRadius: "8px",
+      padding: "12px 16px",
       display: "flex",
-      justifyContent: "space-between",
       alignItems: "center",
-      marginBottom: "16px"
+      gap: "10px",
+      marginBottom: "24px"
     }
-  }, /*#__PURE__*/React.createElement(CardHeader, {
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
-      margin: 0,
-      fontSize: "18px",
-      color: "#0B0C0C"
+      backgroundColor: "#9FE1CB",
+      padding: "5px",
+      borderRadius: "6px",
+      display: "flex",
+      flexShrink: 0
     }
-  }, t("EKYC_ADDRESS_DETAILS_HEADER") || "Address Details"), /*#__PURE__*/React.createElement("span", {
-    onClick: handleEditAddress,
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "#085041",
+    strokeWidth: "3",
+    strokeLinecap: "round"
+  }, /*#__PURE__*/React.createElement("polyline", {
+    points: "20 6 9 17 4 12"
+  }))), /*#__PURE__*/React.createElement("div", {
     style: {
-      color: "#3A8DCC",
-      fontWeight: "600",
-      cursor: "pointer",
-      fontSize: "14px"
+      fontSize: "13px",
+      color: "#04342C",
+      fontWeight: "500"
     }
-  }, t("CS_COMMON_EDIT"))), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
-    label: t("EKYC_FULL_ADDRESS"),
-    text: addressDetails.fullAddress || "H.No. 123, Sector 15, Rohini"
-  }), /*#__PURE__*/React.createElement(Row, {
-    label: t("EKYC_PINCODE"),
-    text: addressDetails.pincode || "110085"
-  }))), /*#__PURE__*/React.createElement(Card, {
+  }, t("EKYC_REVIEW_NOTICE") || "Please review all details carefully before submitting. You can edit any section by clicking Edit.")), /*#__PURE__*/React.createElement("div", {
     style: {
-      padding: "24px",
-      marginBottom: "24px",
-      borderRadius: "12px",
-      border: "1px solid #EAECF0"
+      animation: "fadeSlideIn 0.3s ease"
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(SectionHead$3, {
+    icon: /*#__PURE__*/React.createElement(PersonIcon, {
+      size: 16
+    }),
+    label: t("EKYC_AADHAAR_VERIFICATION_HEADER") || "Aadhaar details"
+  }), /*#__PURE__*/React.createElement(ReviewCard, {
+    icon: /*#__PURE__*/React.createElement(PersonIcon, {
+      size: 16
+    }),
+    title: t("EKYC_AADHAAR_VERIFICATION_HEADER") || "Aadhaar details",
+    onEdit: handleEditAadhaar,
+    editLabel: t("CS_COMMON_EDIT") || "Edit",
+    rows: [{
+      label: t("EKYC_NAME") || "Name",
+      value: aadhaarDetails.userName || "Rajesh Kumar Singh"
+    }, {
+      label: t("EKYC_AADHAAR") || "Aadhaar no.",
+      value: aadhaarDetails.aadhaarLastFour ? `XXXX XXXX ${aadhaarDetails.aadhaarLastFour}` : "XXXX XXXX 1234"
+    }, {
+      label: t("EKYC_MOBILE_NO") || "Mobile no.",
+      value: aadhaarDetails.mobileNumber || "XXXXXXXXXX"
+    }, {
+      label: t("EKYC_EMAIL_ADDRESS") || "Email",
+      value: aadhaarDetails.email || null
+    }]
+  }), /*#__PURE__*/React.createElement("hr", {
     style: {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      marginBottom: "16px"
+      margin: "20px 0",
+      border: 0,
+      borderTop: "1px solid #EAECF0"
     }
-  }, /*#__PURE__*/React.createElement(CardHeader, {
+  }), /*#__PURE__*/React.createElement(SectionHead$3, {
+    icon: /*#__PURE__*/React.createElement(LocationIcon2, {
+      size: 16
+    }),
+    label: t("EKYC_ADDRESS_DETAILS_HEADER") || "Address details"
+  }), /*#__PURE__*/React.createElement(ReviewCard, {
+    icon: /*#__PURE__*/React.createElement(LocationIcon2, {
+      size: 16
+    }),
+    title: t("EKYC_ADDRESS_DETAILS_HEADER") || "Address details",
+    onEdit: handleEditAddress,
+    editLabel: t("CS_COMMON_EDIT") || "Edit",
+    rows: [{
+      label: t("EKYC_FULL_ADDRESS") || "Full address",
+      value: addressDetails.fullAddress || "H.No. 123, Sector 15, Rohini, Delhi – 110085"
+    }, {
+      label: t("EKYC_FLAT_HOUSE_NUMBER") || "Flat / House no.",
+      value: addressDetails.flatNo || null
+    }, {
+      label: t("EKYC_BUILDING_TOWER") || "Building",
+      value: addressDetails.building || null
+    }, {
+      label: t("EKYC_LANDMARK") || "Landmark",
+      value: addressDetails.landmark || null
+    }, {
+      label: t("EKYC_PINCODE") || "Pincode",
+      value: addressDetails.pincode || "110085"
+    }, {
+      label: t("EKYC_ASSEMBLY") || "Assembly",
+      value: addressDetails.assembly || "AC-12 Chandni Chowk"
+    }, {
+      label: t("EKYC_WARD") || "Ward",
+      value: addressDetails.ward || "WARD-45 Civil Lines"
+    }]
+  }), /*#__PURE__*/React.createElement("hr", {
     style: {
-      margin: 0,
-      fontSize: "18px",
-      color: "#0B0C0C"
+      margin: "20px 0",
+      border: 0,
+      borderTop: "1px solid #EAECF0"
     }
-  }, t("EKYC_PROPERTY_INFO") || "Property Information"), /*#__PURE__*/React.createElement("span", {
-    onClick: handleEditProperty,
+  }), /*#__PURE__*/React.createElement(SectionHead$3, {
+    icon: /*#__PURE__*/React.createElement(BuildingIcon$1, {
+      size: 16
+    }),
+    label: t("EKYC_PROPERTY_INFO") || "Property details"
+  }), /*#__PURE__*/React.createElement(ReviewCard, {
+    icon: /*#__PURE__*/React.createElement(BuildingIcon$1, {
+      size: 16
+    }),
+    title: t("EKYC_PROPERTY_INFO") || "Property details",
+    onEdit: handleEditProperty,
+    editLabel: t("CS_COMMON_EDIT") || "Edit",
+    rows: [{
+      label: t("EKYC_PROPERTY_OWNER") || "Property owner",
+      value: propertyDetails.ownerType || "Owner"
+    }, {
+      label: t("EKYC_PID_NUMBER") || "PID number",
+      value: propertyDetails.pidNumber || null
+    }, {
+      label: t("EKYC_TYPE_OF_CONNECTION") || "Type of connection",
+      value: ((_propertyDetails$conn = propertyDetails.connectionCategory) === null || _propertyDetails$conn === void 0 ? void 0 : _propertyDetails$conn.label) || null
+    }, {
+      label: t("EKYC_CONNECTION_CATEGORY") || "Connection category",
+      value: ((_propertyDetails$conn2 = propertyDetails.connectionType) === null || _propertyDetails$conn2 === void 0 ? void 0 : _propertyDetails$conn2.label) || null
+    }, {
+      label: t("EKYC_USER_TYPE") || "User type",
+      value: ((_propertyDetails$user = propertyDetails.userType) === null || _propertyDetails$user === void 0 ? void 0 : _propertyDetails$user.label) || null
+    }, {
+      label: t("EKYC_NO_OF_FLOORS") || "No. of floors",
+      value: ((_propertyDetails$noOf = propertyDetails.noOfFloors) === null || _propertyDetails$noOf === void 0 ? void 0 : _propertyDetails$noOf.label) || null
+    }]
+  })), /*#__PURE__*/React.createElement("div", {
     style: {
-      color: "#3A8DCC",
-      fontWeight: "600",
-      cursor: "pointer",
-      fontSize: "14px"
+      marginTop: "24px"
     }
-  }, t("CS_COMMON_EDIT"))), /*#__PURE__*/React.createElement(StatusTable, null, /*#__PURE__*/React.createElement(Row, {
-    label: t("Property_Owner"),
-    text: propertyDetails.ownerType || "OWNER"
-  }), /*#__PURE__*/React.createElement(Row, {
-    label: t("PID_Number"),
-    text: propertyDetails.pidNumber || t("CS_NA")
-  }), /*#__PURE__*/React.createElement(Row, {
-    label: t("Type_of_Connection"),
-    text: ((_propertyDetails$conn = propertyDetails.connectionType) === null || _propertyDetails$conn === void 0 ? void 0 : _propertyDetails$conn.label) || t("CS_NA")
-  }), /*#__PURE__*/React.createElement(Row, {
-    label: t("Connection_Category"),
-    text: ((_propertyDetails$conn2 = propertyDetails.connectionCategory) === null || _propertyDetails$conn2 === void 0 ? void 0 : _propertyDetails$conn2.label) || t("CS_NA")
-  }))), /*#__PURE__*/React.createElement(ActionBar, null, /*#__PURE__*/React.createElement(SubmitBar, {
+  }, /*#__PURE__*/React.createElement(SubmitBar, {
     label: t("ES_COMMON_SUBMIT") || "Submit",
     onSubmit: handleSubmit
-  })))));
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "5px",
+      marginTop: "16px",
+      fontSize: "11px",
+      color: "#98A2B3"
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "11",
+    height: "11",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "3",
+    y: "11",
+    width: "18",
+    height: "11",
+    rx: "2"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M7 11V7a5 5 0 0 1 10 0v4"
+  })), t("EKYC_SECURE_DATA_NOTICE") || "Your data is encrypted and secure"))));
 };
 
 const EmployeeApp = ({