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

package/package.json

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

package/src/Module.js

@@ -1,40 +1,67 @@
 import React from "react";
+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 />;
+};
+
+export const EkycLinks = ({ matchPath, userType }) => {
+  const { t } = useTranslation();
+  const links = [
+    {
+      link: `${matchPath}/create-kyc`,
+      i18nKey: t("EKYC_CREATE_KYC"),
+    },
+    {
+      link: `${matchPath}/update-kyc`,
+      i18nKey: t("EKYC_UPDATE_KYC"),
+    },
+  ];
 
-    if (isLoading) {
-        return null;
-    }
-    if (userType === "employee") {
-        return <EmployeeApp path={path} url={url} userType={userType} tenants={tenants} />;
-    } else return null;
+  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} />,
+  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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Card, CardHeader, StatusTable, Row, ActionBar, Modal, RadioButtons, Loader, CardLabel, SubmitBar } from "@djb25/digit-ui-react-components";
+import { Loader, Modal, RadioButtons } from "@djb25/digit-ui-react-components";
 import { useTranslation } from "react-i18next";
 import { useHistory, useRouteMatch } from "react-router-dom";
 
@@ -16,75 +16,197 @@ const ConnectionDetailsView = ({ kNumber, kName, connectionDetails, isLoading })
     { code: "OTHER", name: "EKYC_OTHER" },
   ];
 
-  const handleStartVerification = () => {
-    setShowModal(true);
-  };
+  const handleStartVerification = () => setShowModal(true);
 
   const onModalConfirm = () => {
-    // Correctly handle redirection from create-kyc or dashboard
-    const parentPath = path.includes("/create-kyc") ? path.replace("/create-kyc", "") : path.replace("/k-details", "");
-    history.push(`${parentPath}/aadhaar-verification`, { kNumber, selectedOption, connectionDetails });
+    const parentPath = path.includes("/create-kyc")
+      ? path.replace("/create-kyc", "")
+      : path.replace("/k-details", "");
+    history.push(`${parentPath}/consumer-details`, { kNumber, selectedOption, connectionDetails });
     setShowModal(false);
   };
 
-  const handleRaiseCorrection = () => {
-    console.log("Raise Correction clicked");
-  };
-
-  if (isLoading) {
-    return <Loader />;
-  }
+  if (isLoading) return <Loader />;
+  if (!connectionDetails) return null;
 
-  if (!connectionDetails) {
-    return null;
-  }
+  const details = connectionDetails?.connectionDetails || {};
+  const statusFlag = details.statusflag || "";
+  const isActive = statusFlag?.toLowerCase() === "active" || statusFlag === "A";
 
   return (
     <React.Fragment>
-      <Card className="ekyc-create-card" style={{ padding: "24px" }}>
-        <CardHeader>{t("EKYC_K_NUMBER_DETAILS")}</CardHeader>
-        <StatusTable>
-          <Row label={t("EKYC_K_NUMBER")} text={kNumber || t("CS_NA")} />
-          <Row label={t("EKYC_K_NAME")} text={kName || t("CS_NA")} />
-        </StatusTable>
-
-        <CardHeader style={{ marginTop: "24px" }}>{t("EKYC_CONNECTION_DETAILS")}</CardHeader>
-        {connectionDetails?.connectionDetails ? (
-          <StatusTable>
-            <Row label={t("EKYC_CONSUMER_NAME")} text={connectionDetails.connectionDetails.consumerName || t("CS_NA")} />
-            <Row label={t("EKYC_ADDRESS")} text={connectionDetails.connectionDetails.address || t("CS_NA")} />
-            <Row label={t("EKYC_CONNECTION_TYPE")} text={connectionDetails.connectionDetails.connectionType || t("CS_NA")} />
-            <Row label={t("EKYC_METER_NO")} text={connectionDetails.connectionDetails.meterNumber || t("CS_NA")} />
-            <Row label={t("EKYC_PHONE_NO")} text={connectionDetails.connectionDetails.phoneNumber || t("CS_NA")} />
-            <Row label={t("EKYC_EMAIL")} text={connectionDetails.connectionDetails.email || t("CS_NA")} />
-            <Row label={t("EKYC_STATUS")} text={connectionDetails.connectionDetails.statusflag || t("CS_NA")} />
-          </StatusTable>
-        ) : (
-          <CardLabel>{t("EKYC_NO_CONNECTION_DETAILS_FOUND")}</CardLabel>
-        )}
-
-        <div style={{ display: "flex", justifyContent: "flex-end", marginTop: "16px" }}>
-          <SubmitBar label={t("EKYC_START_VERIFICATION")} onSubmit={handleStartVerification} style={{ borderRadius: "12px", margin: 0 }} />
+      <div className="ekyc-employee-container">
+        {/* Main Card */}
+        <div className="connection-details-card">
+          {/* Card Header */}
+          <div className="details-card-header">
+            <div className="header-title-wrapper">
+              <div className="header-icon-bg">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#3A7BD5" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                  <circle cx="12" cy="7" r="4" />
+                </svg>
+              </div>
+              <span className="header-title-text">
+                {t("EKYC_K_NUMBER_DETAILS") || "Consumer Identity Details"}
+              </span>
+            </div>
+
+            {/* Status Badge */}
+            <span className={`status-badge ${isActive ? "active" : "inactive"}`}>
+              {isActive ? (t("EKYC_ACTIVE_CONNECTION") || "Active Connection") : (statusFlag || t("CS_NA"))}
+            </span>
+          </div>
+
+          {/* Card Body */}
+          <div className="details-card-body">
+            <div className="body-content-row">
+              {/* Left: Verification Parameters */}
+              <div className="detail-section">
+                <div className="section-title">
+                  {t("EKYC_VERIFICATION_PARAMETERS") || "Verification Parameters"}
+                </div>
+
+                <div className="data-grid">
+                  {/* Consumer Name */}
+                  <div className="data-item">
+                    <div className="data-label">
+                      {t("EKYC_CONSUMER_NAME") || "Consumer Name"}
+                    </div>
+                    <div className="data-value">
+                      {details.consumerName || kName || t("CS_NA")}
+                    </div>
+                  </div>
+
+                  {/* K Number */}
+                  <div className="data-item">
+                    <div className="data-label">
+                      {t("EKYC_K_NUMBER") || "K Number"}
+                    </div>
+                    <div className="data-value blue">
+                      {kNumber || t("CS_NA")}
+                    </div>
+                  </div>
+
+                  {/* Meter Serial No */}
+                  <div className="data-item">
+                    <div className="data-label">
+                      {t("EKYC_METER_NO") || "Meter Serial No."}
+                    </div>
+                    <div className="data-value">
+                      {details.meterNumber || t("CS_NA")}
+                    </div>
+                  </div>
+
+                  {/* Connection Type */}
+                  <div className="data-item">
+                    <div className="data-label">
+                      {t("EKYC_CONNECTION_TYPE") || "Connection Type"}
+                    </div>
+                    <div className="data-value">
+                      {details.connectionType || t("CS_NA")}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Divider */}
+              <div className="vertical-divider" />
+
+              {/* Right: Address & Contact */}
+              <div className="detail-section">
+                <div className="section-title">
+                  {t("EKYC_ADDRESS_AND_CONTACT") || "Address & Contact"}
+                </div>
+
+                {/* Service Address */}
+                <div className="address-block">
+                  <div className="icon-wrapper-small">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6B7B8E" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                      <path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z" />
+                      <circle cx="12" cy="10" r="3" />
+                    </svg>
+                  </div>
+                  <div>
+                    <div className="data-label">
+                      {t("EKYC_ADDRESS") || "Service Address"}
+                    </div>
+                    <div className="address-text">
+                      {details.address || t("CS_NA")}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Contact + Email row */}
+                <div className="contact-row">
+                  {/* Contact */}
+                  <div className="contact-item">
+                    <div className="icon-wrapper-small">
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6B7B8E" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                        <rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
+                        <line x1="12" y1="18" x2="12.01" y2="18" />
+                      </svg>
+                    </div>
+                    <div>
+                      <div className="data-label">
+                        {t("EKYC_PHONE_NO") || "Contact"}
+                      </div>
+                      <div className="address-text">
+                        {details.phoneNumber || t("CS_NA")}
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Email */}
+                  <div className="contact-item">
+                    <div className="icon-wrapper-small">
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6B7B8E" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                        <circle cx="12" cy="12" r="4" />
+                        <path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94" />
+                      </svg>
+                    </div>
+                    <div>
+                      <div className="data-label">
+                        {t("EKYC_EMAIL") || "Email Address"}
+                      </div>
+                      <div className="address-text">
+                        {details.email || t("CS_NA")}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Card Footer */}
+          <div className="details-card-footer">
+            {/* Last Verified */}
+            <div className="footer-meta-text">
+              {connectionDetails?.lastVerified
+                ? `${t("EKYC_LAST_VERIFIED") || "Last verified:"} ${connectionDetails.lastVerified}`
+                : ""}
+            </div>
+
+            {/* Action Buttons */}
+            <div className="action-btns-container" style={{ fontSize: "12px" }}>
+              <button
+                onClick={handleStartVerification}
+                className="primary-action-btn"
+                style={{ fontSize: "12px" }}
+              >
+                {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" />
+                </svg>
+              </button>
+            </div>
+          </div>
         </div>
-        {/* <button
-                    className="submit-bar"
-                    style={{
-                        marginLeft: "10px",
-                        background: "#3A8DCC",
-                        border: "none",
-                        color: "#fff",
-                        padding: "10px 24px",
-                        borderRadius: "12px",
-                        fontWeight: "600",
-                        cursor: "pointer",
-                        boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
-                    }}
-                    onClick={handleRaiseCorrection}
-                >
-                    {t("EKYC_RAISE_CORRECTION")}
-                </button> */}
-      </Card>
+      </div>
 
+      {/* Modal */}
       {showModal && (
         <Modal
           headerBarMain={t("EKYC_SELECT_VERIFICATION_TYPE")}
@@ -101,6 +223,7 @@ const ConnectionDetailsView = ({ kNumber, kName, connectionDetails, isLoading })
         >
           <div style={{ padding: "24px" }}>
             <RadioButtons
+              name="verificationType"
               options={options}
               optionsKey="name"
               selectedOption={selectedOption}
@@ -115,4 +238,4 @@ const ConnectionDetailsView = ({ kNumber, kName, connectionDetails, isLoading })
   );
 };
 
-export default ConnectionDetailsView;
+export default ConnectionDetailsView;

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,51 +102,26 @@ const DesktopInbox = ({ tableConfig, filterComponent, ...props }) => {
   }, [data]);
 
   return (
-    <div className="ground-container employee-app-container form-container">
-      <div className="inbox-container" style={{ paddingBottom: "16px" }}>
-        {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">
+    <div className="app-container">
+      <div className="inbox-container">
+        {isLoading && <Loader />}
+        <div className="side-panel-item">
           {/* 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>
-            {FilterComponent && (
-              <FilterComponent
-                defaultSearchParams={props.defaultSearchParams}
-                onFilterChange={props.onSearch}
-                searchParams={searchParams}
-                type="desktop"
-                moduleCode="EKYC"
-              />
-            )}
-          </div>
+          <InboxLinks headerText={props.moduleCode} />
+
+          {FilterComponent && (
+            <FilterComponent
+              defaultSearchParams={props.defaultSearchParams}
+              onFilterChange={props.onSearch}
+              searchParams={searchParams}
+              type="desktop"
+              moduleCode="EKYC"
+            />
+          )}
         </div>
 
-        <div style={{ flex: 1, marginLeft: "16px" }}>
+        <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>
@@ -249,7 +131,7 @@ const DesktopInbox = ({ tableConfig, filterComponent, ...props }) => {
                 </div> */}
 
           {/* Metrics Section (The Card) */}
-          <Card className="ekyc-metrics-card" style={{ marginBottom: "16px", padding: "16px" }}>
+          <Card className="ekyc-metrics-card">
             <StatusCards countData={countData} />
           </Card>