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

package/package.json

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

package/src/components/DesktopInbox.js

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

package/src/components/Filter.js

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

package/src/components/SearchConsumer.js

@@ -88,7 +88,8 @@ const SearchConsumer = ({ onSearch, searchParams, FilterComponent, children, ...
                   />
                 </div>
               </div>
-
+            </div>
+            <div style={{ display: "flex", justifyContent: "flex-end", marginTop: "20px" }}>
               <div style={{ display: "flex", gap: "12px", alignItems: "center" }}>
                 <button
                   type="button"
@@ -105,10 +106,18 @@ const SearchConsumer = ({ onSearch, searchParams, FilterComponent, children, ...
                 >
                   {t("ES_COMMON_CLEAR")}
                 </button>
+
                 <SubmitBar
                   label={t("ES_COMMON_SEARCH")}
                   onSubmit={onSubmit}
-                  style={{ margin: 0, borderRadius: "8px", height: "44px", padding: "0 32px", marginTop: "-55px" }}
+                  style={{
+                    margin: 0,
+                    borderRadius: "8px",
+                    height: "44px",
+                    padding: "0 32px",
+                    // ❌ remove this (it breaks alignment)
+                    // marginTop: "-55px"
+                  }}
                 />
               </div>
             </div>

package/src/pages/employee/AadhaarVerification.js

@@ -129,8 +129,8 @@ const RadioToggleRow = ({ label, selected, onSelect, t, options }) => (
       selectedOption={selected}
       onSelect={onSelect}
       t={t}
-      innerStyles={{ display: "flex", gap: "20px" }}
-      style={{ marginBottom: 0 }}
+      innerStyles={{ display: "flex", gap: "20px", alignItems: "center" }}
+      style={{ display: "flex", gap: "20px", marginBottom: 0 }}
     />
   </div>
 );
@@ -165,6 +165,9 @@ const AadhaarVerification = () => {
   const [aadhaarLastFour, setAadhaarLastFour] = useState("");
   const [isAadhaarVerified, setIsAadhaarVerified] = useState(false);
   const [isVerifying, setIsVerifying] = useState(false);
+  const [showOtpField, setShowOtpField] = useState(false);
+  const [otp, setOtp] = useState("");
+  const [otpError, setOtpError] = useState(false);
   const [nameCorrect, setNameCorrect] = useState({ code: "NO", name: "CORE_COMMON_NO" });
   const [userName, setUserName] = useState(details.consumerName || "");
 
@@ -186,17 +189,27 @@ const AadhaarVerification = () => {
 
   // ── Handlers ──
   const handleVerifyAadhaar = () => {
-    if (aadhaarLastFour.length !== 4 || isVerifying) return;
+    if (aadhaarLastFour.length !== 12 || isVerifying) return;
     setIsVerifying(true);
     setTimeout(() => {
       setIsVerifying(false);
+      setShowOtpField(true);
+    }, 1200);
+  };
+
+  const handleVerifyOtp = () => {
+    if (otp === "123456") {
       setIsAadhaarVerified(true);
+      setShowOtpField(false);
+      setOtpError(false);
       // Auto-expand address section upon verification
       setShowAddressSection(true);
       setTimeout(() => {
         addressSectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
       }, 100);
-    }, 1200);
+    } else {
+      setOtpError(true);
+    }
   };
 
   const handleSaveAndContinue = () => {
@@ -257,7 +270,7 @@ const AadhaarVerification = () => {
       display: "grid",
       gridTemplateColumns: "1fr 1fr",
       gap: "14px",
-      marginBottom: "4px",
+      marginBottom: "20px",
     },
     optionalTag: {
       display: "inline-block",
@@ -364,24 +377,60 @@ const AadhaarVerification = () => {
                   if (val.length <= 12 && /^\d*$/.test(val)) setAadhaarLastFour(val);
                 }}
                 placeholder={t("EKYC_ENTER_LAST_4_DIGIT") || "Enter 12 digits"}
-                maxLength={4}
+                maxLength={12}
                 disabled={isAadhaarVerified}
                 inputStyle={isAadhaarVerified ? styles.verifiedInput : {}}
               />
             </div>
           </LabelFieldPair>
 
-          {!isAadhaarVerified && (
+          {!isAadhaarVerified && !showOtpField && (
             <SubmitBar
               label={isVerifying
                 ? t("EKYC_VERIFYING") || "Verifying..."
                 : t("EKYC_VERIFY_AADHAAR_BTN") || "Verify Aadhaar"}
               onSubmit={handleVerifyAadhaar}
-              disabled={aadhaarLastFour.length !== 4 || isVerifying}
+              disabled={aadhaarLastFour.length !== 12 || isVerifying}
               style={{ marginTop: "12px" }}
             />
           )}
 
+          {!isAadhaarVerified && showOtpField && (
+            <Fragment>
+              <div className="ekyc-field-label" style={{ marginTop: "16px" }}>
+                {t("EKYC_ENTER_OTP") || "Enter OTP"}
+              </div>
+              <LabelFieldPair>
+                <div className="field">
+                  <IconInput
+                    icon={<LockIcon size={15} />}
+                    value={otp}
+                    onChange={(e) => {
+                      const val = e.target.value;
+                      if (/^\d*$/.test(val)) {
+                        setOtp(val);
+                        if (otpError) setOtpError(false);
+                      }
+                    }}
+                    placeholder={t("EKYC_ENTER_OTP_PLACEHOLDER") || "Enter 123456"}
+                    maxLength={6}
+                  />
+                </div>
+              </LabelFieldPair>
+              {otpError && (
+                <div style={{ color: "#D4351C", fontSize: "12px", marginTop: "4px" }}>
+                  {t("EKYC_INVALID_OTP") || "Invalid OTP. Please enter 123456."}
+                </div>
+              )}
+              <SubmitBar
+                label={t("EKYC_VERIFY_OTP_BTN") || "Verify OTP"}
+                onSubmit={handleVerifyOtp}
+                disabled={otp.length !== 6}
+                style={{ marginTop: "12px" }}
+              />
+            </Fragment>
+          )}
+
           {isAadhaarVerified && (
             <div style={styles.verifiedCard}>
               <div style={{ display: "flex", alignItems: "center", gap: "8px", marginBottom: "14px" }}>
@@ -404,7 +453,7 @@ const AadhaarVerification = () => {
                 </div>
                 <div>
                   <div style={styles.infoLabel}>{t("EKYC_AADHAAR") || "Aadhaar"}</div>
-                  <div style={styles.infoValue}>XXXX XXXX {aadhaarLastFour}</div>
+                  <div style={styles.infoValue}>{aadhaarLastFour}</div>
                 </div>
                 <div style={{ gridColumn: "span 2" }}>
                   <div style={styles.infoLabel}>{t("EKYC_ADDRESS") || "Address"}</div>
@@ -428,12 +477,14 @@ const AadhaarVerification = () => {
             selected={nameCorrect}
             onSelect={setNameCorrect}
             options={yesNoOptions}
+            sty
             t={t}
           />
           <LabelFieldPair>
             <div className="field">
               <IconInput
                 icon={<UserIcon size={15} color={nameCorrect.code === "YES" ? "#64748b" : "#94a3b8"} />}
+                style={{ marginBottom: "12px" }}
                 value={userName}
                 onChange={(e) => setUserName(e.target.value)}
                 placeholder={t("EKYC_ENTER_NAME_PLACEHOLDER") || "Enter full name"}
@@ -454,6 +505,7 @@ const AadhaarVerification = () => {
             <div className="field">
               <IconInput
                 icon={<PhoneIcon size={15} color={mobileChange.code === "YES" ? "#64748b" : "#94a3b8"} />}
+                style={{ marginBottom: "12px" }}
                 value={mobileNumber}
                 onChange={(e) => setMobileNumber(e.target.value)}
                 placeholder="+91 XXXXX XXXXX"

package/src/pages/employee/AddressDetails.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, Fragment } from "react";
+import React, { useState, useRef, Fragment, useEffect } from "react";
 import {
   Card,
   LabelFieldPair,
@@ -14,6 +14,8 @@ import {
   HomeIcon,
   ConnectingCheckPoints,
   CheckPoint,
+  Dropdown,
+  Loader,
 } from "@djb25/digit-ui-react-components";
 import { useTranslation } from "react-i18next";
 import { useHistory, useLocation } from "react-router-dom";
@@ -164,6 +166,71 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
   const [isLocationFetching, setIsLocationFetching] = useState(false);
   const fileInputRef = useRef(null);
 
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+  const { data: mdmsData, isLoading: isMdmsLoading } = Digit.Hooks.useCommonMDMS(
+    tenantId,
+    "egov-location",
+    ["TenantBoundary"]
+  );
+
+  const mdmsRes = mdmsData?.MdmsRes || mdmsData;
+  const adminHierarchy = mdmsRes?.["egov-location"]?.TenantBoundary?.find(h => h.hierarchyType.code === "ADMIN") 
+    || mdmsRes?.["egov-location"]?.TenantBoundary?.[0];
+  
+  const rootBoundary = adminHierarchy?.boundary;
+  
+  const getAssemblies = (boundaries) => {
+    if (!boundaries) return [];
+    let assemblies = [];
+    const targetLabel = "assembly constituency";
+    for (const boundary of boundaries) {
+      const label = (boundary.label || boundary.name || "").toLowerCase().replace(/_/g, " ");
+      if (label === targetLabel || label === "assemblyconstituency") {
+        assemblies.push({ code: boundary.code, name: boundary.name, children: boundary.children });
+      }
+      if (boundary.children?.length) {
+        assemblies.push(...getAssemblies(boundary.children));
+      }
+    }
+    return assemblies;
+  };
+
+  const getBlocks = (children) => {
+    if (!children) return [];
+    let blocks = [];
+    const targetLabel = "block";
+    for (const child of children) {
+      const label = (child.label || child.name || "").toLowerCase().replace(/_/g, " ");
+      if (label === targetLabel) {
+        blocks.push({ code: child.code, name: child.name });
+      }
+      if (child.children?.length) {
+        blocks.push(...getBlocks(child.children));
+      }
+    }
+    return blocks;
+  };
+
+  const assemblies = getAssemblies(Array.isArray(rootBoundary) ? rootBoundary : rootBoundary ? [rootBoundary] : []);
+
+  const [assembly, setAssembly] = useState(addrDetails.assembly ? { name: addrDetails.assembly } : null);
+  const [ward, setWard] = useState(addrDetails.ward ? { name: addrDetails.ward } : null);
+
+  useEffect(() => {
+    if (mdmsRes && addrDetails.assembly && !assembly?.code) {
+      const foundAssembly = assemblies.find((a) => a.name === addrDetails.assembly || a.code === addrDetails.assembly);
+      if (foundAssembly) setAssembly(foundAssembly);
+    }
+  }, [mdmsRes, assemblies]);
+
+  const blocks = assembly ? getBlocks(assembly.children) : [];
+
+  useEffect(() => {
+    if (assembly && ward && !blocks.find((b) => b.name === ward.name)) {
+      setWard(null);
+    }
+  }, [assembly]);
+
   const addressOptions = [
     { code: "AADHAAR", name: "EKYC_AADHAAR_ADDRESS" },
     { code: "OLD", name: "EKYC_OLD_ADDRESS" },
@@ -175,7 +242,17 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
   ];
 
   const handleCompleteVerification = () => {
-    const payload = { addressType, fullAddress, flatNo, building, landmark, pincode, doorPhoto };
+    const payload = { 
+      addressType, 
+      fullAddress, 
+      flatNo, 
+      building, 
+      landmark, 
+      pincode, 
+      doorPhoto,
+      assembly: assembly?.name,
+      ward: ward?.name
+    };
     if (onComplete) {
       onComplete(payload);
     } else {
@@ -201,7 +278,7 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
 
   const handleUseCurrentLocation = () => {
     if (!("geolocation" in navigator)) {
-      alert(t("GEOLOCATION_NOT_SUPPORTED") || "Geolocation is not supported by your browser");
+      alert(t("GEOLOCATION_NOT_SUPPORTED"));
       return;
     }
     setIsLocationFetching(true);
@@ -229,7 +306,7 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
       (err) => {
         console.error("Geolocation error:", err);
         setIsLocationFetching(false);
-        alert(t("LOCATION_FETCH_FAILED") || "Failed to fetch location. Please grant location permissions.");
+        alert(t("LOCATION_FETCH_FAILED"));
       },
       { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
     );
@@ -241,7 +318,7 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
       {/* ── Address Type Toggle ── */}
       <SectionHead
         icon={<LocationIcon className="icon" styles={{ fill: "#0B0C0C", width: "16px", height: "16px" }} />}
-        label={t("EKYC_ADDRESS_DETAILS_HEADER") || "Address Details"}
+        label={t("EKYC_ADDRESS_DETAILS_HEADER")}
       />
 
       <div style={{ marginBottom: "20px" }}>
@@ -273,7 +350,7 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
             <LocationIcon className="icon" styles={{ fill: "#085041", width: "16px", height: "16px" }} />
           </div>
           <div style={{ fontSize: "14px", lineHeight: "1.6", color: "#04342C", fontWeight: "500" }}>
-            {addrDetails.fullAddress || "H.No. 123, Sector 15, Rohini, Delhi – 110085"}
+            {addrDetails.fullAddress}
           </div>
         </div>
       )}
@@ -285,7 +362,7 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
           {/* Correction toggle */}
           <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "14px" }}>
             <CardLabel style={{ fontWeight: "500", marginBottom: 0, fontSize: "13px", color: "#505A5F" }}>
-              {t("EKYC_ADDRESS_CORRECTION_PROMPT") || "Correct the address?"}
+              {t("EKYC_ADDRESS_CORRECTION_PROMPT")}
             </CardLabel>
             <RadioButtons
               options={yesNoOptions}
@@ -331,8 +408,8 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
               </div>
               <span style={{ fontWeight: "500", fontSize: "14px", color: "#344054" }}>
                 {isLocationFetching
-                  ? t("EKYC_FETCHING_LOCATION") || "Fetching location..."
-                  : t("EKYC_USE_CURRENT_LOCATION") || "Use current location"}
+                  ? t("EKYC_FETCHING_LOCATION")
+                  : t("EKYC_USE_CURRENT_LOCATION")}
               </span>
             </div>
             {!isLocationFetching && (
@@ -343,14 +420,14 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
           {/* Full Address (textarea-style) */}
           <div style={{ marginBottom: "14px" }}>
             <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-              {t("EKYC_FULL_ADDRESS") || "Full address"}
+              {t("EKYC_FULL_ADDRESS")}
             </div>
             <IconInput
               icon={<PropertyHouse styles={{ fill: "#0068fa", width: "15px", height: "15px" }} />}
               topAligned
               value={fullAddress}
               onChange={(e) => setFullAddress(e.target.value)}
-              placeholder={t("EKYC_ENTER_FULL_ADDRESS") || "Enter full address"}
+              placeholder={t("EKYC_ENTER_FULL_ADDRESS")}
               inputStyle={{ minHeight: "72px" }}
             />
           </div>
@@ -359,24 +436,24 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
           <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px", marginBottom: "14px" }}>
             <div>
               <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-                {t("EKYC_FLAT_HOUSE_NUMBER") || "Flat / House no."}
+                {t("EKYC_FLAT_HOUSE_NUMBER")}
               </div>
               <IconInput
                 icon={<PropertyHouse styles={{ fill: "#0068fa", width: "15px", height: "15px" }} />}
                 value={flatNo}
                 onChange={(e) => setFlatNo(e.target.value)}
-                placeholder={t("EKYC_ENTER_FLAT_NO") || "e.g. 45-B"}
+                placeholder={t("EKYC_ENTER_FLAT_NO")}
               />
             </div>
             <div>
               <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-                {t("EKYC_BUILDING_TOWER") || "Building / Tower"}
+                {t("EKYC_BUILDING_TOWER")}
               </div>
               <IconInput
                 icon={<PropertyHouse styles={{ fill: "#0068fa", width: "15px", height: "15px" }} />}
                 value={building}
                 onChange={(e) => setBuilding(e.target.value)}
-                placeholder={t("EKYC_ENTER_BUILDING") || "e.g. Tower 4"}
+                placeholder={t("EKYC_ENTER_BUILDING")}
               />
             </div>
           </div>
@@ -385,24 +462,24 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
           <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px", marginBottom: "4px" }}>
             <div>
               <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-                {t("EKYC_LANDMARK") || "Landmark"}
+                {t("EKYC_LANDMARK")}
               </div>
               <IconInput
                 icon={<LocationIcon className="icon" styles={{ fill: "#0068fa", width: "15px", height: "15px" }} />}
                 value={landmark}
                 onChange={(e) => setLandmark(e.target.value)}
-                placeholder={t("EKYC_ENTER_LANDMARK") || "Near Central Park"}
+                placeholder={t("EKYC_ENTER_LANDMARK")}
               />
             </div>
             <div>
               <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-                {t("EKYC_PINCODE") || "Pincode"}
+                {t("EKYC_PINCODE")}
               </div>
               <IconInput
                 icon={<PincodeIcon size={15} />}
                 value={pincode}
                 onChange={(e) => { if (/^\d*$/.test(e.target.value)) setPincode(e.target.value); }}
-                placeholder={t("EKYC_ENTER_PINCODE") || "6-digit pincode"}
+                placeholder={t("EKYC_ENTER_PINCODE")}
                 maxLength={6}
               />
             </div>
@@ -415,38 +492,49 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
       {/* ── Administrative Division ── */}
       <SectionHead
         icon={<PropertyHouse styles={{ fill: "#0B0C0C", width: "16px", height: "16px" }} />}
-        label={t("EKYC_ADMINISTRATIVE_DIVISION") || "Administrative Division"}
+        label={t("EKYC_ADMINISTRATIVE_DIVISION")}
       />
 
-      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px", marginBottom: "24px" }}>
-        <AdminCard
-          bgColor="#E1F5EE"
-          iconBg="#9FE1CB"
-          icon={<FlagIcon size={18} />}
-          labelColor="#0F6E56"
-          label={t("EKYC_ASSEMBLY") || "Assembly"}
-          value={addrDetails.assembly || "AC-12 Chandni Chowk"}
-        />
-        <AdminCard
-          bgColor="#E6F1FB"
-          iconBg="#B5D4F4"
-          icon={<IdCardIcon size={18} />}
-          labelColor="#185FA5"
-          label={t("EKYC_WARD") || "Ward"}
-          value={addrDetails.ward || "WARD-45 Civil Lines"}
-        />
-      </div>
+      {isMdmsLoading ? <Loader /> : (
+        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px", marginBottom: "24px" }}>
+          <div>
+            <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
+              {t("EKYC_ASSEMBLY")}
+            </div>
+            <Dropdown
+              option={assemblies}
+              optionKey="name"
+              selected={assembly}
+              select={(val) => { setAssembly(val); setWard(null); }}
+              t={t}
+            />
+          </div>
+          <div>
+            <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
+              {t("EKYC_WARD") || "Block"}
+            </div>
+            <Dropdown
+              option={blocks}
+              optionKey="name"
+              selected={ward}
+              select={setWard}
+              disabled={!assembly}
+              t={t}
+            />
+          </div>
+        </div>
+      )}
 
       <hr style={{ margin: "24px 0", border: 0, borderTop: "1px solid #EAECF0" }} />
 
       {/* ── Door Photo ── */}
       <SectionHead
         icon={<CameraIcon size={16} />}
-        label={t("EKYC_DOOR_PHOTO_HEADER") || "Door photo with GPS stamp"}
+        label={t("EKYC_DOOR_PHOTO_HEADER")}
       />
 
       <div style={{ fontSize: "12px", color: "#667085", marginBottom: "12px" }}>
-        {t("EKYC_REQUIRED_FOR_VERIFICATION") || "Required for verification"}
+        {t("EKYC_REQUIRED_FOR_VERIFICATION")}
       </div>
 
       {/* Warning banner */}
@@ -465,10 +553,10 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
         </div>
         <div>
           <div style={{ fontWeight: "600", color: "#B54708", fontSize: "13px", marginBottom: "2px" }}>
-            {t("EKYC_IMPORTANT") || "Important"}
+            {t("EKYC_IMPORTANT")}
           </div>
           <div style={{ fontSize: "12px", color: "#92400E" }}>
-            {t("EKYC_CAPTURE_LIVE_CAMERA") || "Capture with live camera for GPS metadata"}
+            {t("EKYC_CAPTURE_LIVE_CAMERA")}
           </div>
         </div>
       </div>
@@ -514,7 +602,7 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
               {t("EKYC_TAP_TO_CAPTURE") || "Tap to capture"}
             </div>
             <div style={{ fontSize: "12px", color: "#667085" }}>
-              {t("EKYC_CAPTURE_DOOR_IMAGE") || "Capture door image"}
+              {t("EKYC_CAPTURE_DOOR_IMAGE")}
             </div>
           </>
         ) : (
@@ -534,7 +622,7 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
                 cursor: "pointer", fontSize: "12px", color: "#D92D20", fontWeight: "500",
               }}
             >
-              <TrashIcon size={13} /> {t("EKYC_REMOVE") || "Remove"}
+              <TrashIcon size={13} /> {t("EKYC_REMOVE")}
             </button>
           </>
         )}
@@ -544,14 +632,14 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
       {isSection ? (
         <div style={{ marginTop: "24px" }}>
           <SubmitBar
-            label={t("EKYC_COMPLETE_VERIFICATION_AND_PROCEED") || "Complete & Proceed"}
+            label={t("EKYC_COMPLETE_VERIFICATION_AND_PROCEED")}
             onSubmit={handleCompleteVerification}
           />
         </div>
       ) : (
         <ActionBar>
           <SubmitBar
-            label={t("EKYC_COMPLETE_VERIFICATION") || "Complete Verification"}
+            label={t("EKYC_COMPLETE_VERIFICATION")}
             onSubmit={handleCompleteVerification}
           />
         </ActionBar>
@@ -567,7 +655,7 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
           <rect x="3" y="11" width="18" height="11" rx="2" />
           <path d="M7 11V7a5 5 0 0 1 10 0v4" />
         </svg>
-        {t("EKYC_SECURE_DATA_NOTICE") || "Your data is encrypted and secure"}
+        {t("EKYC_SECURE_DATA_NOTICE")}
       </div>
     </div>
   );