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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@djb25/digit-ui-module-ekyc",
-    "version": "1.0.6",
+    "version": "1.0.8",
     "description": "Digit UI Module for Ekyc",
     "main": "dist/index.js",
     "module": "dist/index.modern.js",
@@ -23,6 +23,8 @@
         "react": "17.0.2",
         "react-dom": "17.0.2",
         "react-i18next": "11.16.2",
-        "react-router-dom": "5.3.0"
+        "react-icons": "^5.6.0",
+        "react-router-dom": "5.3.0",
+        "chart.js": "^4.4.1"
     }
 }

package/src/Module.js

@@ -1,11 +1,14 @@
 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 DesktopInbox from "./components/DesktopInbox";
 import MobileInbox from "./components/MobileInbox";
 import Filter from "./components/Filter";
 import EmployeeApp from "./pages/employee";
+import CitizenApp from "./pages/citizen";
 
 export const EkycModule = ({ stateCode, userType, tenants }) => {
     const { path, url } = useRouteMatch();
@@ -19,7 +22,19 @@ export const EkycModule = ({ stateCode, userType, tenants }) => {
     }
     if (userType === "employee") {
         return <EmployeeApp path={path} url={url} userType={userType} tenants={tenants} />;
-    } else return null;
+    } else return <CitizenApp />;
+};
+
+export const EkycLinks = ({ matchPath, userType }) => {
+    const { t } = useTranslation();
+    const links = [
+        {
+            link: `${matchPath}/create-kyc`,
+            i18nKey: t("EKYC_CREATE_KYC"),
+        },
+    ];
+
+    return <CitizenHomeCard header={t("EKYC_MODULE_NAME")} links={links} Icon={() => <DocumentIcon className="fill-path-primary-main" />} />;
 };
 
 const componentsToRegister = {
@@ -29,6 +44,7 @@ const componentsToRegister = {
     EKYCDesktopInbox: DesktopInbox,
     EKYCMobileInbox: MobileInbox,
     EKYC_INBOX_FILTER: (props) => <Filter {...props} />,
+    EkycLinks,
 };
 
 export const initEkycComponents = () => {

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,196 @@ 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", "");
+    const parentPath = path.includes("/create-kyc")
+      ? path.replace("/create-kyc", "")
+      : path.replace("/k-details", "");
     history.push(`${parentPath}/aadhaar-verification`, { 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">
+              <button
+                onClick={handleStartVerification}
+                className="primary-action-btn"
+              >
+                {t("EKYC_START_VERIFICATION") || "Start Verification"}
+                <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")}
@@ -115,4 +236,4 @@ const ConnectionDetailsView = ({ kNumber, kName, connectionDetails, isLoading })
   );
 };
 
-export default ConnectionDetailsView;
+export default ConnectionDetailsView;

package/src/components/DesktopInbox.js

@@ -1,6 +1,6 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Table, SubmitBar, Header, Card, HomeIcon, PersonIcon } from "@djb25/digit-ui-react-components";
+import { Table, SubmitBar, Header, Card, HomeIcon, PersonIcon, Modal, Loader } from "@djb25/digit-ui-react-components";
 import { Link } from "react-router-dom";
 import StatusCards from "./StatusCards";
 
@@ -23,19 +23,148 @@ const DesktopInbox = ({ tableConfig, filterComponent, ...props }) => {
     searchFields,
   } = props;
   const { t } = useTranslation();
+  const tenantId = Digit.ULBService.getCurrentTenantId();
   const [FilterComponent, setComp] = React.useState(() => 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 handleReview = (kno) => {
+    setSelectedKno(kno);
+    getReview({ kno });
+  };
+
   const columns = useMemo(
     () => [
       {
         Header: t("EKYC_APPLICATION_NO"),
         accessor: "applicationNumber",
         Cell: ({ row }) => {
-          const applicationNumber = row.original?.applicationNumber || "NA";
+          const kno = row.original?.kno || row.original?.applicationNumber || "NA";
           return (
-            <Link to={`${parentRoute}/application-details/${applicationNumber}`}>
-              <span className="ekyc-application-link">{applicationNumber}</span>
-            </Link>
+            <span
+              className="ekyc-application-link"
+              style={{ color: "#add8f7", cursor: "pointer", fontWeight: "bold" }}
+              onClick={() => handleReview(kno)}
+            >
+              {kno}
+            </span>
           );
         },
       },
@@ -66,7 +195,24 @@ const DesktopInbox = ({ tableConfig, filterComponent, ...props }) => {
   }, [data]);
 
   return (
-    <div className="inbox-container" style={{ paddingBottom: "16px" }}>
+    <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

package/src/components/EKYCCard.js

@@ -24,6 +24,10 @@ const EKYCCard = () => {
                 label: t("EKYC_CREATE_KYC"),
                 link: `/digit-ui/employee/ekyc/create-kyc`
             },
+            // {
+            //     label: t("EKYC_MAPPING"),
+            //     link: `/digit-ui/employee/ekyc/mapping`
+            // }
         ]
     }