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

package/package.json

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

package/src/Module.js

@@ -3,54 +3,65 @@ import { useTranslation } from "react-i18next";
 import { useRouteMatch } from "react-router-dom";
 import { CitizenHomeCard, DocumentIcon } from "@djb25/digit-ui-react-components";
 import EKYCCard from "./components/EKYCCard";
-import Inbox from "./pages/employee/Inbox";
+import Inbox from "./pages/employee/Dashboard";
 import DesktopInbox from "./components/DesktopInbox";
 import MobileInbox from "./components/MobileInbox";
 import Filter from "./components/Filter";
 import EmployeeApp from "./pages/employee";
 import CitizenApp from "./pages/citizen";
-
+import AadhaarVerification from "./pages/employee/AadhaarVerification";
+import AddressDetails from "./pages/employee/AddressDetails";
+import PropertyInfo from "./pages/employee/PropertyInfo";
+import MeterDetails from "./pages/employee/MeterDetails";
 export const EkycModule = ({ stateCode, userType, tenants }) => {
-    const { path, url } = useRouteMatch();
-    const moduleCode = "EKYC";
-    const language = Digit.StoreData.getCurrentLanguage();
-    const { isLoading, data: store } = Digit.Services.useStore({ stateCode, moduleCode, language });
-    Digit.SessionStorage.set("EKYC_TENANTS", tenants);
+  const { path, url } = useRouteMatch();
+  const moduleCode = "EKYC";
+  const language = Digit.StoreData.getCurrentLanguage();
+  const { isLoading, data: store } = Digit.Services.useStore({ stateCode, moduleCode, language });
+  Digit.SessionStorage.set("EKYC_TENANTS", tenants);
 
-    if (isLoading) {
-        return null;
-    }
-    if (userType === "employee") {
-        return <EmployeeApp path={path} url={url} userType={userType} tenants={tenants} />;
-    } else return <CitizenApp />;
+  if (isLoading) {
+    return null;
+  }
+  if (userType === "employee") {
+    return <EmployeeApp path={path} url={url} userType={userType} tenants={tenants} />;
+  } else return <CitizenApp />;
 };
 
 export const EkycLinks = ({ matchPath, userType }) => {
-    const { t } = useTranslation();
-    const links = [
-        {
-            link: `${matchPath}/create-kyc`,
-            i18nKey: t("EKYC_CREATE_KYC"),
-        },
-    ];
+  const { t } = useTranslation();
+  const links = [
+    {
+      link: `${matchPath}/create-kyc`,
+      i18nKey: t("EKYC_CREATE_KYC"),
+    },
+    {
+      link: `${matchPath}/update-kyc`,
+      i18nKey: t("EKYC_UPDATE_KYC"),
+    },
+  ];
 
-    return <CitizenHomeCard header={t("EKYC_MODULE_NAME")} links={links} Icon={() => <DocumentIcon className="fill-path-primary-main" />} />;
+  return <CitizenHomeCard header={t("EKYC_MODULE_NAME")} links={links} Icon={() => <DocumentIcon className="fill-path-primary-main" />} />;
 };
 
 const componentsToRegister = {
-    EKYCModule: EkycModule,
-    EKYCCard,
-    EKYCInbox: Inbox,
-    EKYCDesktopInbox: DesktopInbox,
-    EKYCMobileInbox: MobileInbox,
-    EKYC_INBOX_FILTER: (props) => <Filter {...props} />,
-    EkycLinks,
+  EKYCModule: EkycModule,
+  EKYCCard,
+  EKYCInbox: Inbox,
+  EKYCDesktopInbox: DesktopInbox,
+  EKYCMobileInbox: MobileInbox,
+  EKYC_INBOX_FILTER: (props) => <Filter {...props} />,
+  EkycLinks,
+  AadhaarVerification,
+  AddressDetails,
+  PropertyInfo,
+  MeterDetails,
 };
 
 export const initEkycComponents = () => {
-    Object.entries(componentsToRegister).forEach(([key, value]) => {
-        Digit.ComponentRegistryService.setComponent(key, value);
-    });
+  Object.entries(componentsToRegister).forEach(([key, value]) => {
+    Digit.ComponentRegistryService.setComponent(key, value);
+  });
 };
 
 export default EkycModule;

package/src/components/ConnectionDetailsView.js

@@ -22,7 +22,7 @@ const ConnectionDetailsView = ({ kNumber, kName, connectionDetails, isLoading })
     const parentPath = path.includes("/create-kyc")
       ? path.replace("/create-kyc", "")
       : path.replace("/k-details", "");
-    history.push(`${parentPath}/aadhaar-verification`, { kNumber, selectedOption, connectionDetails });
+    history.push(`${parentPath}/consumer-details`, { kNumber, selectedOption, connectionDetails });
     setShowModal(false);
   };
 
@@ -189,12 +189,13 @@ const ConnectionDetailsView = ({ kNumber, kName, connectionDetails, isLoading })
             </div>
 
             {/* Action Buttons */}
-            <div className="action-btns-container">
+            <div className="action-btns-container" style={{ fontSize: "12px" }}>
               <button
                 onClick={handleStartVerification}
                 className="primary-action-btn"
+                style={{ fontSize: "12px" }}
               >
-                {t("EKYC_START_VERIFICATION") || "Start Verification"}
+                {t("EKYC_START_REVIEW") || "Start Review"}
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                   <line x1="5" y1="12" x2="19" y2="12" />
                   <polyline points="12 5 19 12 12 19" />
@@ -222,6 +223,7 @@ const ConnectionDetailsView = ({ kNumber, kName, connectionDetails, isLoading })
         >
           <div style={{ padding: "24px" }}>
             <RadioButtons
+              name="verificationType"
               options={options}
               optionsKey="name"
               selectedOption={selectedOption}

package/src/components/DesktopInbox.js

@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Table, SubmitBar, Header, Card, HomeIcon, PersonIcon, Modal, Loader } from "@djb25/digit-ui-react-components";
-import { Link } from "react-router-dom";
+import { Table, Card, Loader, InboxLinks } from "@djb25/digit-ui-react-components";
+import { useHistory } from "react-router-dom";
 import StatusCards from "./StatusCards";
 
 const DesktopInbox = ({ tableConfig, filterComponent, ...props }) => {
@@ -19,137 +19,27 @@ const DesktopInbox = ({ tableConfig, filterComponent, ...props }) => {
     sortParams,
     totalRecords,
     countData,
-    onSearch,
-    searchFields,
   } = props;
   const { t } = useTranslation();
+  const history = useHistory();
   const tenantId = Digit.ULBService.getCurrentTenantId();
-  const [FilterComponent, setComp] = React.useState(() => Digit.ComponentRegistryService?.getComponent(filterComponent));
+  const FilterComponent = Digit.ComponentRegistryService?.getComponent(filterComponent);
 
   // State for Review Modal
-  const [showReviewModal, setShowReviewModal] = useState(false);
-  const [reviewHtml, setReviewHtml] = useState("");
   const [selectedKno, setSelectedKno] = useState("");
-
-  const generateReviewHtml = (info) => {
-    if (!info) return "<h3>No data found</h3>";
-
-    // Helper to format labels
-    const formatLabel = (str) => str.replace(/([A-Z])/g, ' $1').replace(/^./, (s) => s.toUpperCase());
-
-    return `
-      <!DOCTYPE html>
-      <html>
-        <head>
-          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-          <style>
-            body { font-family: 'Inter', sans-serif; padding: 30px; color: #101828; line-height: 1.5; background: #fff; }
-            .header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #185FA5; padding-bottom: 20px; margin-bottom: 30px; }
-            .title { margin: 0; color: #185FA5; font-size: 24px; font-weight: 700; }
-            .subtitle { margin: 5px 0 0; color: #667085; font-size: 14px; }
-            .section { margin-bottom: 30px; border: 1px solid #EAECF0; border-radius: 12px; overflow: hidden; }
-            .section-header { background: #F9FAFB; padding: 12px 20px; border-bottom: 1px solid #EAECF0; font-weight: 700; font-size: 14px; color: #344054; text-transform: uppercase; letter-spacing: 0.05em; }
-            .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
-            .item { padding: 16px 20px; border-bottom: 1px solid #F2F4F7; }
-            .item:nth-last-child(-n+2) { border-bottom: none; }
-            .label { font-size: 11px; color: #667085; text-transform: uppercase; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 4px; }
-            .value { font-size: 14px; font-weight: 500; color: #1D2939; }
-            .badge { display: inline-block; padding: 4px 12px; border-radius: 16px; font-size: 12px; font-weight: 600; }
-            .badge-success { background: #ECFDF3; color: #027A48; }
-            .badge-warning { background: #FFFAEB; color: #B54708; }
-            .print-btn { background: #185FA5; color: #fff; padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px; display: block; margin: 20px auto; }
-            @media print { .print-btn { display: none; } body { padding: 0; } }
-          </style>
-        </head>
-        <body>
-          <div class="header">
-            <div>
-              <h1 class="title">Delhi Jal Board</h1>
-              <p class="subtitle">EKYC Application Review Summary</p>
-            </div>
-            <div style="text-align: right">
-              <span class="badge ${info.statusFlag === 'ACTIVE' ? 'badge-success' : 'badge-warning'}">${info.statusFlag || 'N/A'}</span>
-              <p class="subtitle" style="margin-top: 8px">Generated on: ${new Date().toLocaleDateString()}</p>
-            </div>
-          </div>
-
-          <div class="section">
-            <div class="section-header">Basic Details</div>
-            <div class="grid">
-              <div class="item"><div class="label">KNO Number</div><div class="value">${info.kno || 'N/A'}</div></div>
-              <div class="item"><div class="label">Consumer Name</div><div class="value">${info.consumerName || 'N/A'}</div></div>
-              <div class="item"><div class="label">Mobile Number</div><div class="value">${info.mobileNo || 'N/A'}</div></div>
-              <div class="item"><div class="label">Email Address</div><div class="value">${info.email || 'N/A'}</div></div>
-              <div class="item"><div class="label">Connection Type</div><div class="value">${info.typeOfConnection || 'N/A'}</div></div>
-              <div class="item"><div class="label">Category</div><div class="value">${info.connectionCategory || 'N/A'}</div></div>
-            </div>
-          </div>
-
-          <div class="section">
-            <div class="section-header">Location & Property Information</div>
-            <div class="grid">
-              <div class="item"><div class="label">Address</div><div class="value">${info.addressRaw || 'N/A'}</div></div>
-              <div class="item"><div class="label">Locality</div><div class="value">${info.locality || 'N/A'}</div></div>
-              <div class="item"><div class="label">City - Pincode</div><div class="value">${info.city || 'N/A'} - ${info.pincode || 'N/A'}</div></div>
-              <div class="item"><div class="label">PID Number</div><div class="value">${info.pidNumber || 'N/A'}</div></div>
-              <div class="item"><div class="label">No. of Floors</div><div class="value">${info.noOfFloor || 'N/A'}</div></div>
-              <div class="item"><div class="label">Verification Status</div><div class="value"><span class="badge ${info.verificationStatus === 'SUCCESSFUL' ? 'badge-success' : 'badge-warning'}">${info.verificationStatus || 'PENDING'}</span></div></div>
-            </div>
-          </div>
-
-          <div class="section">
-            <div class="section-header">Meter Information</div>
-            <div class="grid">
-              <div class="item"><div class="label">Meter Number</div><div class="value">${info.meterNumber || 'N/A'}</div></div>
-              <div class="item"><div class="label">Meter Make</div><div class="value">${info.meterMake || 'N/A'}</div></div>
-              <div class="item"><div class="label">Meter Location</div><div class="value">${info.meterLocationAddress || 'N/A'}</div></div>
-              <div class="item"><div class="label">Working Status</div><div class="value">${info.workingStatus ? 'Working' : 'Not Working'}</div></div>
-            </div>
-          </div>
-
-          <button class="print-btn" onclick="window.print()">Print This Review</button>
-        </body>
-      </html>
-    `;
-  };
-
-  // Use the library hook if available, otherwise fallback to local definition
-  // This is a safety measure to handle stale library builds in dev environment
-  const useReviewHook = Digit.Hooks.ekyc?.useEkycApplicationReview || ((p, config) => {
-    return Digit.Hooks.useMutation((data) => Digit.EkycService.application_review(data, p), config);
-  });
-
-  const { mutate: getReview, isLoading: isReviewLoading } = useReviewHook(
-    { tenantId },
-    {
-      onSuccess: (res) => {
-        if (res?.applicationReviewInfo) {
-          const html = generateReviewHtml(res.applicationReviewInfo);
-          setReviewHtml(html);
-          setShowReviewModal(true);
-        } else {
-          // Fallback to URL method if the API is updated later to return a URL
-          const url = res?.acknowledgementURL || res?.reviewUrl || res?.url;
-          if (url) {
-            setReviewHtml(""); // Clear HTML so iframe uses URL
-            setReviewUrl(url);
-            setShowReviewModal(true);
-          } else {
-            alert(t("EKYC_REVIEW_INFO_NOT_FOUND"));
-          }
-        }
-      },
-      onError: (err) => {
-        alert(err?.message || t("ERR_FAILED_TO_FETCH_REVIEW"));
-      }
-    }
-  );
-
+  const { data: reviewData, getReview } = Digit.Hooks.ekyc.useEkycAPI("review", tenantId);
   const handleReview = (kno) => {
     setSelectedKno(kno);
     getReview({ kno });
   };
 
+  React.useEffect(() => {
+    if (reviewData) {
+      history.push("/digit-ui/employee/ekyc/review", { kNumber: selectedKno, aadhaarData: reviewData?.aadhaarData, reviewData });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [reviewData]);
+
   const columns = useMemo(
     () => [
       {
@@ -180,13 +70,30 @@ const DesktopInbox = ({ tableConfig, filterComponent, ...props }) => {
       // },
       {
         Header: t("EKYC_STATUS"),
-        accessor: "status",
+        accessor: "actionStatus",
         Cell: ({ row }) => {
           const status = row.original?.status || "DEFAULT";
           return <span className={`ekyc-status-tag ${status}`}>{t(`${status}`)}</span>;
         },
       },
+      {
+        Header: t("EKYC_ACTION"),
+        accessor: "status",
+        Cell: ({ row }) => {
+          const kno = row.original?.kno || row.original?.applicationNumber || "NA";
+          return (
+            <span
+              className="ekyc-application-link"
+              style={{ color: "#add8f7", cursor: "pointer", fontWeight: "bold" }}
+              onClick={() => handleReview(kno)}
+            >
+              {t("EKYC_REVIEW")}
+            </span>
+          );
+        },
+      },
     ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [t, parentRoute]
   );
 
@@ -195,37 +102,14 @@ const DesktopInbox = ({ tableConfig, filterComponent, ...props }) => {
   }, [data]);
 
   return (
-    <div className="inbox-container">
-      {showReviewModal && (
-        <Modal
-          headerBarMain={t("EKYC_APPLICATION_REVIEW") + (selectedKno ? ` - ${selectedKno}` : "")}
-          headerBarEnd={<div style={{ cursor: "pointer", padding: "5px 10px", background: "#F2F4F7", borderRadius: "4px" }} onClick={() => setShowReviewModal(false)}>{t("CLOSE")}</div>}
-          hideSubmit={true}
-          popupStyles={{ width: "90%", height: "90%", maxWidth: "1000px" }}
-          popupModuleMianStyles={{ height: "calc(100% - 60px)", padding: 0 }}
-        >
-          <iframe
-            srcDoc={reviewHtml}
-            src={!reviewHtml ? reviewUrl : undefined}
-            title="Application Review"
-            style={{ width: "100%", height: "100%", border: "none" }}
-          />
-        </Modal>
-      )}
-      {(isLoading || isReviewLoading) && <Loader />}
-      <div className="filters-container">
-        {/* Sidebar Title Card */}
-        <Card
-          className="sidebar-title-card"
-          style={{ display: "flex", alignItems: "center", padding: "16px", marginBottom: "16px", borderRadius: "4px" }}
-        >
-          <div className="icon-container" style={{ color: "#3A8DCC", marginRight: "12px" }}>
-            <HomeIcon style={{ width: "24px", height: "24px" }} />
-          </div>
-          <div style={{ fontWeight: "700", fontSize: "18px", color: "#0B0C0C" }}>{t("ACTION_TEST_EKYC")}</div>
-        </Card>
+    <div className="app-container">
+      <div className="inbox-container">
+        {isLoading && <Loader />}
+        <div className="side-panel-item">
+          {/* Sidebar Title Card */}
+
+          <InboxLinks headerText={props.moduleCode} />
 
-        <div>
           {FilterComponent && (
             <FilterComponent
               defaultSearchParams={props.defaultSearchParams}
@@ -236,45 +120,45 @@ const DesktopInbox = ({ tableConfig, filterComponent, ...props }) => {
             />
           )}
         </div>
-      </div>
 
-      <div style={{ flex: 1, marginLeft: "16px" }}>
-        {/* Header Section (retaining for context/actions) */}
-        {/* <div className="ekyc-header-container module-header" style={{ marginBottom: "16px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+        <div className="employee-form-content" style={{ flex: 1 }}>
+          {/* Header Section (retaining for context/actions) */}
+          {/* <div className="ekyc-header-container module-header" style={{ marginBottom: "16px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                     <Header className="title" style={{ margin: 0 }}>{t("EKYC_INBOX_HEADER")}</Header>
                     <Link to={`${parentRoute}/create-kyc`}>
                         <SubmitBar label={t("EKYC_CREATE_KYC")} style={{ borderRadius: "8px" }} />
                     </Link>
                 </div> */}
 
-        {/* Metrics Section (The Card) */}
-        <Card className="ekyc-metrics-card" style={{ marginBottom: "16px", padding: "16px" }}>
-          <StatusCards countData={countData} />
-        </Card>
-
-        {/* Table Section */}
-        <div className="result" style={{ flex: 1 }}>
-          <Card className="ekyc-table-card" style={{ padding: 0 }}>
-            <Table
-              t={t}
-              data={tableData}
-              columns={columns}
-              isLoading={isLoading}
-              onSort={onSort}
-              sortParams={sortParams}
-              totalRecords={totalRecords}
-              onNextPage={onNextPage}
-              onPrevPage={onPrevPage}
-              currentPage={currentPage}
-              pageSizeLimit={pageSizeLimit}
-              onPageSizeChange={onPageSizeChange}
-              getCellProps={(cellInfo) => {
-                return {
-                  className: "ekyc-table-cell",
-                };
-              }}
-            />
+          {/* Metrics Section (The Card) */}
+          <Card className="ekyc-metrics-card">
+            <StatusCards countData={countData} />
           </Card>
+
+          {/* Table Section */}
+          <div className="result" style={{ flex: 1 }}>
+            <Card className="ekyc-table-card" style={{ padding: 0 }}>
+              <Table
+                t={t}
+                data={tableData}
+                columns={columns}
+                isLoading={isLoading}
+                onSort={onSort}
+                sortParams={sortParams}
+                totalRecords={totalRecords}
+                onNextPage={onNextPage}
+                onPrevPage={onPrevPage}
+                currentPage={currentPage}
+                pageSizeLimit={pageSizeLimit}
+                onPageSizeChange={onPageSizeChange}
+                getCellProps={(cellInfo) => {
+                  return {
+                    className: "ekyc-table-cell",
+                  };
+                }}
+              />
+            </Card>
+          </div>
         </div>
       </div>
     </div>

package/src/components/EKYCCard.js

@@ -3,35 +3,43 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 
 const EKYCCard = () => {
-    const { t } = useTranslation();
+  const { t } = useTranslation();
 
-    const propsForModuleCard = {
-        Icon: <PersonIcon />,
-        moduleName: t("ACTION_TEST_EKYC"),
-        kpis: [
-            {
-                count: "-",
-                label: t("TOTAL_EKYC"),
-                link: `/digit-ui/employee/ekyc/dashboard`
-            }
-        ],
-        links: [
-            {
-                label: t("EKYC_DASHBOARD"),
-                link: `/digit-ui/employee/ekyc/dashboard`
-            },
-            {
-                label: t("EKYC_CREATE_KYC"),
-                link: `/digit-ui/employee/ekyc/create-kyc`
-            },
-            // {
-            //     label: t("EKYC_MAPPING"),
-            //     link: `/digit-ui/employee/ekyc/mapping`
-            // }
-        ]
-    }
+  const propsForModuleCard = {
+    Icon: <PersonIcon />,
+    moduleName: t("ACTION_TEST_EKYC"),
+    kpis: [
+      {
+        count: "-",
+        label: t("TOTAL_EKYC"),
+        link: `/digit-ui/employee/ekyc/dashboard`,
+      },
+    ],
+    links: [
+      {
+        label: t("EKYC_DASHBOARD"),
+        link: `/digit-ui/employee/ekyc/dashboard`,
+      },
+      {
+        label: t("EKYC_INBOX"),
+        link: `/digit-ui/employee/ekyc/inbox`,
+      },
+      // {
+      //     label: t("EKYC_CREATE_KYC"),
+      //     link: `/digit-ui/employee/ekyc/create-kyc`
+      // },
+      // {
+      //     label: t("EKYC_UPDATE_KYC"),
+      //     link: `/digit-ui/employee/ekyc/update-kyc`
+      // },
+      {
+        label: t("EKYC_MAPPING"),
+        link: `/digit-ui/employee/ekyc/mapping`,
+      },
+    ],
+  };
 
-    return <EmployeeModuleCard {...propsForModuleCard} />
+  return <EmployeeModuleCard {...propsForModuleCard} />;
 };
 
 export default EKYCCard;

package/src/components/Filter.js

@@ -1,60 +1,55 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { Dropdown, FilterForm, FilterFormField } from "@djb25/digit-ui-react-components";
 import { useTranslation } from "react-i18next";
 
 const Filter = ({ searchParams, onFilterChange, defaultSearchParams, statusMap, moduleCode, ...props }) => {
-    const { t } = useTranslation();
-
-    const [_searchParams, setSearchParams] = useState(() => ({ ...searchParams }));
-
-    const localParamChange = (filterParam) => {
-        let keys_to_delete = filterParam.delete;
-        let _new = { ..._searchParams, ...filterParam };
-        if (keys_to_delete) keys_to_delete.forEach((key) => delete _new[key]);
-        delete filterParam.delete;
-        setSearchParams({ ..._new });
-    };
-
-    const applyLocalFilters = () => {
-        onFilterChange(_searchParams);
-    };
-
-    const clearAll = () => {
-        setSearchParams({ ...defaultSearchParams });
-        onFilterChange({ ...defaultSearchParams });
-    };
-
-    const onStatusChange = (value) => {
-        const newParams = { ..._searchParams, status: value };
-        setSearchParams(newParams);
-        onFilterChange(newParams);
-    };
-
-    return (
-        <FilterForm
-            onSubmit={applyLocalFilters}
-            handleSubmit={(fn) => (e) => { e && e.preventDefault(); fn(); }}
-            onResetFilterForm={clearAll}
-            id="ekyc-filter-form"
-            onMobileExclusiveFilterPopupFormClose={props.onClose}
-        >
-            <FilterFormField>
-                <div className="filter-label" style={{ fontWeight: "normal" }}>
-                    {t("EKYC_STATUS")}:
-                </div>
-                <Dropdown
-                    option={[
-                        { label: t("EKYC_STATUS_ALL"), value: "" },
-                        { label: t("EKYC_STATUS_ACTIVE"), value: "ACTIVE" },
-                        { label: t("EKYC_STATUS_PENDING"), value: "PENDING START" },
-                    ]}
-                    optionKey="label"
-                    select={onStatusChange}
-                    selected={_searchParams?.status || { label: t("EKYC_STATUS_ALL"), value: "" }}
-                />
-            </FilterFormField>
-        </FilterForm>
-    );
+  const { t } = useTranslation();
+
+  const [_searchParams, setSearchParams] = useState(() => ({ ...searchParams }));
+
+  const applyLocalFilters = () => {
+    onFilterChange(_searchParams);
+  };
+
+  const clearAll = () => {
+    setSearchParams({ ...defaultSearchParams });
+    onFilterChange({ ...defaultSearchParams });
+  };
+
+  const onStatusChange = (value) => {
+    const newParams = { ..._searchParams, status: value };
+    setSearchParams(newParams);
+    onFilterChange(newParams);
+  };
+
+  return (
+    <FilterForm
+      onSubmit={applyLocalFilters}
+      handleSubmit={(fn) => (e) => {
+        e && e.preventDefault();
+        fn();
+      }}
+      onResetFilterForm={clearAll}
+      id="ekyc-filter-form"
+      onMobileExclusiveFilterPopupFormClose={props.onClose}
+    >
+      <FilterFormField>
+        <div className="filter-label" style={{ fontWeight: "normal" }}>
+          {t("EKYC_STATUS")}:
+        </div>
+        <Dropdown
+          option={[
+            { label: t("EKYC_STATUS_ALL"), value: "" },
+            { label: t("EKYC_STATUS_ACTIVE"), value: "ACTIVE" },
+            { label: t("EKYC_STATUS_PENDING"), value: "PENDING START" },
+          ]}
+          optionKey="label"
+          select={onStatusChange}
+          selected={_searchParams?.status || { label: t("EKYC_STATUS_ALL"), value: "" }}
+        />
+      </FilterFormField>
+    </FilterForm>
+  );
 };
 
 export default Filter;