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

package/src/pages/employee/AddressDetails.js

@@ -16,9 +16,12 @@ import {
   CheckPoint,
   Dropdown,
   Loader,
+  UploadFile,
+  Toast,
 } from "@djb25/digit-ui-react-components";
 import { useTranslation } from "react-i18next";
 import { useHistory, useLocation } from "react-router-dom";
+import { getPayloadDiff, getSavedData } from "../../utils";
 
 // ─── Icons ────────────────────────────────────────────────────────────────────
 
@@ -151,18 +154,76 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
     kNumber: "EKYC-1234567890",
     selectedOption: { code: "SELF", name: "EKYC_SELF" },
     connectionDetails: null,
+    initialData: {},
   };
 
+  const initialData = flowState.initialData || {};
+
   const addrDetails = flowState.connectionDetails?.addressDetails || {};
 
-  const [addressType, setAddressType] = useState({ code: "AADHAAR", name: "EKYC_AADHAAR_ADDRESS" });
-  const [correctAddress, setCorrectAddress] = useState({ code: "NO", name: "CORE_COMMON_NO" });
-  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 [addressType, setAddressType] = useState(() => getSavedData("EKYC_ADDRESS_TYPE", { code: "AADHAAR", name: "EKYC_AADHAAR_ADDRESS" }));
+  const [correctAddress, setCorrectAddress] = useState(() => getSavedData("EKYC_ADDRESS_CORRECT", { code: "NO", name: "CORE_COMMON_NO" }));
+  const [fullAddress, setFullAddress] = useState(() => sessionStorage.getItem("EKYC_FULL_ADDRESS") || initialData.fullAddress || "");
+  const [flatNo, setFlatNo] = useState(() => sessionStorage.getItem("EKYC_FLAT_NO") || initialData.flatNo || "");
+  const [building, setBuilding] = useState(() => sessionStorage.getItem("EKYC_BUILDING") || initialData.building || "");
+  const [landmark, setLandmark] = useState(() => sessionStorage.getItem("EKYC_LANDMARK") || initialData.landmark || "");
+  const [pincode, setPincode] = useState(() => sessionStorage.getItem("EKYC_PINCODE") || initialData.pincode || "");
+  const [doorPhoto, setDoorPhoto] = useState(() => sessionStorage.getItem("EKYC_DOOR_PHOTO") || null);
+  const [doorPhotoFileStoreId, setDoorPhotoFileStoreId] = useState(() => sessionStorage.getItem("EKYC_DOOR_PHOTO_FILESTORE_ID") || null);
+  
+  const [filephoto, setFilephoto] = useState(null);
+  const [error, setError] = useState(null);
+  const [toast, setToast] = useState(null);
+
+  // Sync address state to sessionStorage
+  useEffect(() => {
+    sessionStorage.setItem("EKYC_ADDRESS_TYPE", JSON.stringify(addressType));
+    sessionStorage.setItem("EKYC_ADDRESS_CORRECT", JSON.stringify(correctAddress));
+    sessionStorage.setItem("EKYC_FULL_ADDRESS", fullAddress);
+    sessionStorage.setItem("EKYC_FLAT_NO", flatNo);
+    sessionStorage.setItem("EKYC_BUILDING", building);
+    sessionStorage.setItem("EKYC_LANDMARK", landmark);
+    sessionStorage.setItem("EKYC_PINCODE", pincode);
+    if (doorPhoto) sessionStorage.setItem("EKYC_DOOR_PHOTO", doorPhoto);
+    if (doorPhotoFileStoreId) sessionStorage.setItem("EKYC_DOOR_PHOTO_FILESTORE_ID", doorPhotoFileStoreId);
+    sessionStorage.setItem("EKYC_CURRENT_STEP", "ADDRESS");
+  }, [addressType, correctAddress, fullAddress, flatNo, building, landmark, pincode, doorPhoto, doorPhotoFileStoreId]);
+
+  const uploadFile = async (file, tenantId) => {
+    if (!file) return null;
+    const res = await Digit.UploadServices.Filestorage("EKYC", file, tenantId);
+    return res?.data?.files?.[0]?.fileStoreId || null;
+  };
+
+  useEffect(() => {
+    (async () => {
+      setError(null);
+      if (filephoto) {
+        if (filephoto.size >= 2000000) {
+          setError(t("EKYC_MAXIMUM_UPLOAD_SIZE_EXCEEDED"));
+          setToast({ type: "error", message: t("EKYC_MAXIMUM_UPLOAD_SIZE_EXCEEDED") });
+        } else {
+          try {
+            setToast({ type: "info", message: t("EKYC_UPLOADING") });
+            const fsId = await uploadFile(filephoto, tenantId);
+            if (fsId) {
+              setDoorPhotoFileStoreId(fsId);
+              const reader = new FileReader();
+              reader.onloadend = () => setDoorPhoto(reader.result);
+              reader.readAsDataURL(filephoto);
+              setToast({ type: "success", message: t("EKYC_UPLOAD_SUCCESS") });
+            } else {
+              setError(t("EKYC_FILE_UPLOAD_ERROR"));
+              setToast({ type: "error", message: t("EKYC_FILE_UPLOAD_ERROR") });
+            }
+          } catch (err) {
+            setError(t("EKYC_FILE_UPLOAD_ERROR"));
+            setToast({ type: "error", message: t("EKYC_FILE_UPLOAD_ERROR") });
+          }
+        }
+      }
+    })();
+  }, [filephoto]);
   const [isLocationFetching, setIsLocationFetching] = useState(false);
   const fileInputRef = useRef(null);
 
@@ -174,11 +235,11 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
   );
 
   const mdmsRes = mdmsData?.MdmsRes || mdmsData;
-  const adminHierarchy = mdmsRes?.["egov-location"]?.TenantBoundary?.find(h => h.hierarchyType.code === "ADMIN") 
+  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 = [];
@@ -213,8 +274,14 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
 
   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);
+  const [assembly, setAssembly] = useState(() => getSavedData("EKYC_ASSEMBLY_DATA", initialData.assembly ? { name: initialData.assembly } : null));
+  const [ward, setWard] = useState(() => getSavedData("EKYC_WARD_DATA", initialData.ward ? { name: initialData.ward } : null));
+
+  // Sync MDMS selection
+  useEffect(() => {
+    sessionStorage.setItem("EKYC_ASSEMBLY_DATA", JSON.stringify(assembly));
+    sessionStorage.setItem("EKYC_WARD_DATA", JSON.stringify(ward));
+  }, [assembly, ward]);
 
   useEffect(() => {
     if (mdmsRes && addrDetails.assembly && !assembly?.code) {
@@ -242,43 +309,42 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
   ];
 
   const handleCompleteVerification = () => {
-    const payload = { 
-      addressType, 
-      fullAddress, 
-      flatNo, 
-      building, 
-      landmark, 
-      pincode, 
+    const payload = {
+      addressType,
+      fullAddress,
+      flatNo,
+      building,
+      landmark,
+      pincode,
       doorPhoto,
+      doorPhotoFileStoreId,
       assembly: assembly?.name,
       ward: ward?.name
     };
     if (onComplete) {
       onComplete(payload);
     } else {
-      const { kNumber, selectedOption, connectionDetails } = flowState;
+      const { kNumber, selectedOption, connectionDetails, initialData } = flowState;
       history.push("/digit-ui/employee/ekyc/property-info", {
-        kNumber, selectedOption, connectionDetails, addressDetails: payload,
+        kNumber, selectedOption, connectionDetails, addressDetails: payload, initialData
       });
     }
   };
 
-  const handleCapture = (e) => {
-    const file = e.target.files[0];
-    if (!file) return;
-    const reader = new FileReader();
-    reader.onloadend = () => setDoorPhoto(reader.result);
-    reader.readAsDataURL(file);
-  };
+  function selectphoto(e) {
+    setDoorPhotoFileStoreId(null);
+    setFilephoto(e.target.files[0]);
+  }
 
   const removePhoto = () => {
     setDoorPhoto(null);
-    if (fileInputRef.current) fileInputRef.current.value = "";
+    setDoorPhotoFileStoreId(null);
+    setFilephoto(null);
   };
 
   const handleUseCurrentLocation = () => {
     if (!("geolocation" in navigator)) {
-      alert(t("GEOLOCATION_NOT_SUPPORTED") || "Geolocation is not supported by your browser");
+      alert(t("GEOLOCATION_NOT_SUPPORTED"));
       return;
     }
     setIsLocationFetching(true);
@@ -306,7 +372,7 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
       (err) => {
         console.error("Geolocation error:", err);
         setIsLocationFetching(false);
-        alert(t("LOCATION_FETCH_FAILED") || "Failed to fetch location. Please grant location permissions.");
+        alert(t("LOCATION_FETCH_FAILED"));
       },
       { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
     );
@@ -318,7 +384,7 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
       {/* ── Address Type Toggle ── */}
       <SectionHead
         icon={<LocationIcon className="icon" styles={{ fill: "#0B0C0C", width: "16px", height: "16px" }} />}
-        label={t("EKYC_ADDRESS_DETAILS_HEADER") || "Address Details"}
+        label={t("EKYC_ADDRESS_DETAILS_HEADER")}
       />
 
       <div style={{ marginBottom: "20px" }}>
@@ -350,7 +416,7 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
             <LocationIcon className="icon" styles={{ fill: "#085041", width: "16px", height: "16px" }} />
           </div>
           <div style={{ fontSize: "14px", lineHeight: "1.6", color: "#04342C", fontWeight: "500" }}>
-            {addrDetails.fullAddress || "H.No. 123, Sector 15, Rohini, Delhi – 110085"}
+            {addrDetails.fullAddress}
           </div>
         </div>
       )}
@@ -362,7 +428,7 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
           {/* Correction toggle */}
           <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "14px" }}>
             <CardLabel style={{ fontWeight: "500", marginBottom: 0, fontSize: "13px", color: "#505A5F" }}>
-              {t("EKYC_ADDRESS_CORRECTION_PROMPT") || "Correct the address?"}
+              {t("EKYC_ADDRESS_CORRECTION_PROMPT")}
             </CardLabel>
             <RadioButtons
               options={yesNoOptions}
@@ -408,8 +474,8 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
               </div>
               <span style={{ fontWeight: "500", fontSize: "14px", color: "#344054" }}>
                 {isLocationFetching
-                  ? t("EKYC_FETCHING_LOCATION") || "Fetching location..."
-                  : t("EKYC_USE_CURRENT_LOCATION") || "Use current location"}
+                  ? t("EKYC_FETCHING_LOCATION")
+                  : t("EKYC_USE_CURRENT_LOCATION")}
               </span>
             </div>
             {!isLocationFetching && (
@@ -420,14 +486,14 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
           {/* Full Address (textarea-style) */}
           <div style={{ marginBottom: "14px" }}>
             <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-              {t("EKYC_FULL_ADDRESS") || "Full address"}
+              {t("EKYC_FULL_ADDRESS")}
             </div>
             <IconInput
               icon={<PropertyHouse styles={{ fill: "#0068fa", width: "15px", height: "15px" }} />}
               topAligned
               value={fullAddress}
               onChange={(e) => setFullAddress(e.target.value)}
-              placeholder={t("EKYC_ENTER_FULL_ADDRESS") || "Enter full address"}
+              placeholder={t("EKYC_ENTER_FULL_ADDRESS")}
               inputStyle={{ minHeight: "72px" }}
             />
           </div>
@@ -436,24 +502,24 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
           <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px", marginBottom: "14px" }}>
             <div>
               <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-                {t("EKYC_FLAT_HOUSE_NUMBER") || "Flat / House no."}
+                {t("EKYC_FLAT_HOUSE_NUMBER")}
               </div>
               <IconInput
                 icon={<PropertyHouse styles={{ fill: "#0068fa", width: "15px", height: "15px" }} />}
                 value={flatNo}
                 onChange={(e) => setFlatNo(e.target.value)}
-                placeholder={t("EKYC_ENTER_FLAT_NO") || "e.g. 45-B"}
+                placeholder={t("EKYC_ENTER_FLAT_NO")}
               />
             </div>
             <div>
               <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-                {t("EKYC_BUILDING_TOWER") || "Building / Tower"}
+                {t("EKYC_BUILDING_TOWER")}
               </div>
               <IconInput
                 icon={<PropertyHouse styles={{ fill: "#0068fa", width: "15px", height: "15px" }} />}
                 value={building}
                 onChange={(e) => setBuilding(e.target.value)}
-                placeholder={t("EKYC_ENTER_BUILDING") || "e.g. Tower 4"}
+                placeholder={t("EKYC_ENTER_BUILDING")}
               />
             </div>
           </div>
@@ -462,24 +528,24 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
           <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px", marginBottom: "4px" }}>
             <div>
               <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-                {t("EKYC_LANDMARK") || "Landmark"}
+                {t("EKYC_LANDMARK")}
               </div>
               <IconInput
                 icon={<LocationIcon className="icon" styles={{ fill: "#0068fa", width: "15px", height: "15px" }} />}
                 value={landmark}
                 onChange={(e) => setLandmark(e.target.value)}
-                placeholder={t("EKYC_ENTER_LANDMARK") || "Near Central Park"}
+                placeholder={t("EKYC_ENTER_LANDMARK")}
               />
             </div>
             <div>
               <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-                {t("EKYC_PINCODE") || "Pincode"}
+                {t("EKYC_PINCODE")}
               </div>
               <IconInput
                 icon={<PincodeIcon size={15} />}
                 value={pincode}
                 onChange={(e) => { if (/^\d*$/.test(e.target.value)) setPincode(e.target.value); }}
-                placeholder={t("EKYC_ENTER_PINCODE") || "6-digit pincode"}
+                placeholder={t("EKYC_ENTER_PINCODE")}
                 maxLength={6}
               />
             </div>
@@ -492,14 +558,14 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
       {/* ── Administrative Division ── */}
       <SectionHead
         icon={<PropertyHouse styles={{ fill: "#0B0C0C", width: "16px", height: "16px" }} />}
-        label={t("EKYC_ADMINISTRATIVE_DIVISION") || "Administrative Division"}
+        label={t("EKYC_ADMINISTRATIVE_DIVISION")}
       />
 
       {isMdmsLoading ? <Loader /> : (
         <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px", marginBottom: "24px" }}>
           <div>
             <div style={{ fontSize: "11px", fontWeight: "600", color: "#667085", textTransform: "uppercase", letterSpacing: "0.04em", marginBottom: "6px" }}>
-              {t("EKYC_ASSEMBLY") || "Assembly Constituency"}
+              {t("EKYC_ASSEMBLY")}
             </div>
             <Dropdown
               option={assemblies}
@@ -530,14 +596,14 @@ const AddressDetails = ({ isSection = false, onComplete, parentState }) => {
       {/* ── Door Photo ── */}
       <SectionHead
         icon={<CameraIcon size={16} />}
-        label={t("EKYC_DOOR_PHOTO_HEADER") || "Door photo with GPS stamp"}
+        label={t("EKYC_CAPTURE_DOOR_IMAGE")}
       />
 
       <div style={{ fontSize: "12px", color: "#667085", marginBottom: "12px" }}>
-        {t("EKYC_REQUIRED_FOR_VERIFICATION") || "Required for verification"}
+        {t("EKYC_REQUIRED_FOR_VERIFICATION")}
       </div>
 
-      {/* Warning banner */}
+      {/* Warning banner
       <div style={{
         backgroundColor: "#FFFAEB",
         border: "0.5px solid #FEDF89",
@@ -553,93 +619,42 @@ 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>
-
-      {/* Drop zone */}
-      <input
-        type="file"
-        ref={fileInputRef}
-        onChange={handleCapture}
-        accept="image/*"
-        style={{ display: "none" }}
+      </div> */}
+
+      {/* Building Photo Upload */}
+      <UploadFile
+        id={"ekyc-door-photo"}
+        extraStyleName={"propertyCreate"}
+        accept=".jpg,.png,.jpeg"
+        onUpload={selectphoto}
+        onDelete={removePhoto}
+        message={doorPhotoFileStoreId ? `1 ${t(`EKYC_ACTION_FILEUPLOADED`)}` : t(`EKYC_ACTION_NO_FILEUPLOADED`)}
+        error={error}
       />
-      <div
-        onClick={!doorPhoto ? () => fileInputRef.current.click() : undefined}
-        onMouseOver={(e) => { if (!doorPhoto) e.currentTarget.style.borderColor = "#185FA5"; }}
-        onMouseOut={(e) => { if (!doorPhoto) e.currentTarget.style.borderColor = "#D0D5DD"; }}
-        style={{
-          border: "1.5px dashed #D0D5DD",
-          borderRadius: "10px",
-          minHeight: "160px",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          backgroundColor: "#F9FAFB",
-          cursor: doorPhoto ? "default" : "pointer",
-          overflow: "hidden",
-          transition: "border-color 0.15s",
-          position: "relative",
-          padding: doorPhoto ? "0" : "32px 24px",
-        }}
-      >
-        {!doorPhoto ? (
-          <>
-            <div style={{
-              width: "52px", height: "52px", borderRadius: "50%",
-              background: "#E6F1FB", display: "flex",
-              alignItems: "center", justifyContent: "center", marginBottom: "12px",
-            }}>
-              <CameraIcon size={26} />
-            </div>
-            <div style={{ fontWeight: "600", fontSize: "14px", color: "#101828", marginBottom: "4px" }}>
-              {t("EKYC_TAP_TO_CAPTURE") || "Tap to capture"}
-            </div>
-            <div style={{ fontSize: "12px", color: "#667085" }}>
-              {t("EKYC_CAPTURE_DOOR_IMAGE") || "Capture door image"}
-            </div>
-          </>
-        ) : (
-          <>
-            <img
-              src={doorPhoto}
-              alt="Door"
-              style={{ width: "100%", maxHeight: "280px", objectFit: "cover", display: "block" }}
-            />
-            <button
-              onClick={(e) => { e.stopPropagation(); removePhoto(); }}
-              style={{
-                position: "absolute", top: "10px", right: "10px",
-                background: "#fff", border: "0.5px solid #EAECF0",
-                borderRadius: "7px", padding: "6px 10px",
-                display: "flex", alignItems: "center", gap: "5px",
-                cursor: "pointer", fontSize: "12px", color: "#D92D20", fontWeight: "500",
-              }}
-            >
-              <TrashIcon size={13} /> {t("EKYC_REMOVE") || "Remove"}
-            </button>
-          </>
-        )}
-      </div>
+      {doorPhoto && (
+        <div style={{ marginTop: "10px", borderRadius: "8px", overflow: "hidden", border: "1px solid #EAECF0" }}>
+          <img src={doorPhoto} alt="Door Preview" style={{ width: "100%", maxHeight: "250px", objectFit: "cover" }} />
+        </div>
+      )}
 
       {/* Submit */}
       {isSection ? (
         <div style={{ marginTop: "24px" }}>
           <SubmitBar
-            label={t("EKYC_COMPLETE_VERIFICATION_AND_PROCEED") || "Complete & Proceed"}
+            label={t("ES_COMMON_SAVE_CONTINUE")}
             onSubmit={handleCompleteVerification}
           />
         </div>
       ) : (
         <ActionBar>
           <SubmitBar
-            label={t("EKYC_COMPLETE_VERIFICATION") || "Complete Verification"}
+            label={t("EKYC_COMPLETE_VERIFICATION")}
             onSubmit={handleCompleteVerification}
           />
         </ActionBar>
@@ -655,8 +670,17 @@ 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>
+      {toast && (
+        <Toast
+          label={toast.message}
+          error={toast.type === "error"}
+          info={toast.type === "info"}
+          success={toast.type === "success"}
+          onClose={() => setToast(null)}
+        />
+      )}
     </div>
   );
 

package/src/pages/employee/Create.js

@@ -45,8 +45,18 @@ const Create = () => {
         }
         setSearchParams(params);
         setSearchPerformed(true);
+
+        // Clear previous EKYC session data if K-number changes
+        const currentKno = sessionStorage.getItem("EKYC_K_NUMBER");
+        if (currentKno !== params.kNumber) {
+            Object.keys(sessionStorage).forEach(key => {
+                if (key.startsWith("EKYC_")) sessionStorage.removeItem(key);
+            });
+        }
+
         sessionStorage.setItem("EKYC_CREATE_SEARCH_PARAMS", JSON.stringify(params));
         sessionStorage.setItem("EKYC_CREATE_SEARCH_PERFORMED", "true");
+        sessionStorage.setItem("EKYC_K_NUMBER", params.kNumber);
     };
 
     const closeToast = () => {
@@ -54,26 +64,28 @@ const Create = () => {
     };
 
     return (
-        <SearchConsumer
-            onSearch={handleSearch}
-            searchParams={searchParams}
-        >
-            {searchPerformed && (
-                <ConnectionDetailsView
-                    kNumber={searchParams.kNumber}
-                    kName={searchParams.kName}
-                    connectionDetails={connectionDetails}
-                    isLoading={isSearching}
-                />
-            )}
+        <div class="ground-container employee-app-container form-container">
+            <SearchConsumer
+                onSearch={handleSearch}
+                searchParams={searchParams}
+            >
+                {searchPerformed && (
+                    <ConnectionDetailsView
+                        kNumber={searchParams.kNumber}
+                        kName={searchParams.kName}
+                        connectionDetails={connectionDetails}
+                        isLoading={isSearching}
+                    />
+                )}
 
-            {!searchPerformed && !isSearching && (
-                <Card style={{ textAlign: "center", padding: "40px" }}>
-                    <div style={{ color: "#667085" }}>{t("EKYC_SEARCH_TO_VIEW_DETAILS")}</div>
-                </Card>
-            )}
-            {showToast && <Toast error={showToast.error} label={showToast.label} onClose={closeToast} isDsc={true} />}
-        </SearchConsumer>
+                {!searchPerformed && !isSearching && (
+                    <Card style={{ textAlign: "center", padding: "40px" }}>
+                        <div style={{ color: "#667085" }}>{t("EKYC_SEARCH_TO_VIEW_DETAILS")}</div>
+                    </Card>
+                )}
+                {showToast && <Toast error={showToast.error} label={showToast.label} onClose={closeToast} isDsc={true} />}
+            </SearchConsumer>
+        </div>
     );
 };
 

package/src/pages/employee/Inbox.js

@@ -34,7 +34,6 @@ const Inbox = ({
             tenantId, 
             offset: pageOffset, 
             limit: pageSize,
-            status: searchParams.status?.value || ""
         },
         {
             enabled: !!tenantId,
@@ -42,13 +41,20 @@ const Inbox = ({
     );
 
     const filteredData = useMemo(() => {
-        const items = dashboardData?.dashboardInfo?.consumerList || [];
+        let items = dashboardData?.dashboardInfo?.consumerList || [];
+        
+        // Frontend filtering since we no longer send status to API
+        const selectedStatus = searchParams.status?.value;
+        if (selectedStatus && selectedStatus !== "") {
+            items = items.filter(item => item.status === selectedStatus);
+        }
+
         return items.map(item => ({
             ...item,
             applicationNumber: item.kno || item.applicationNumber,
             citizenName: item.consumerName || item.citizenName,
         }));
-    }, [dashboardData]);
+    }, [dashboardData, searchParams.status]);
 
     const countData = useMemo(() => {
         const info = dashboardData?.dashboardInfo || {};
@@ -56,7 +62,8 @@ const Inbox = ({
             total: info.total || 0,
             completed: info.completed || 0,
             pending: info.pending || 0,
-            rejected: info.rejected || 0
+            rejected: info.rejected || 0,
+            active: info.active || 0,
         };
     }, [dashboardData]);
 
@@ -90,10 +97,9 @@ const Inbox = ({
             name: "status",
             type: "dropdown",
             options: [
-                { label: t("CHOOSE_STATUS"), value: "" },
-                { label: t("EKYC_STATUS_COMPLETED"), value: "COMPLETED" },
-                { label: t("EKYC_STATUS_PENDING"), value: "PENDING" },
-                { label: t("EKYC_STATUS_REJECTED"), value: "REJECTED" },
+                { label: t("EKYC_STATUS_ALL"), value: "" },
+                { label: t("EKYC_STATUS_ACTIVE"), value: "ACTIVE" },
+                { label: t("EKYC_STATUS_PENDING"), value: "PENDING START" },
             ],
             optionsKey: "label"
         },