@djb25/digit-ui-module-ekyc 1.0.14 → 1.0.15

package/src/components/Review.js

@@ -1,7 +1,6 @@
-import React, { useState } from "react";
+import React, { Fragment, useState } from "react";
 import {
   Card,
-  CardHeader,
   CardSubHeader,
   StatusTable,
   Row,
@@ -14,8 +13,7 @@ import {
   GenericFileIcon,
 } from "@djb25/digit-ui-react-components";
 import { useTranslation } from "react-i18next";
-import { useHistory, useLocation } from "react-router-dom";
-
+import { useHistory, useLocation, useParams } from "react-router-dom";
 
 // ─── Constants ───────────────────────────────────────────────────────────────
 
@@ -25,11 +23,7 @@ const ActionButton = ({ jumpTo, state }) => {
     history.push(jumpTo, { ...state, isEditing: true });
   }
   return (
-    <LinkButton
-      label={<EditIcon style={{ width: "20px", height: "20px", fill: "#F47738" }} />}
-      style={{ margin: 0, padding: 0 }}
-      onClick={routeTo}
-    />
+    <LinkButton label={<EditIcon style={{ width: "20px", height: "20px", fill: "#F47738" }} />} style={{ margin: 0, padding: 0 }} onClick={routeTo} />
   );
 };
 
@@ -56,14 +50,26 @@ const extractReviewData = (searchData, flowState) => {
 
   return {
     newData: applicationData?.newData || applicationData,
-    oldData: applicationData?.oldData || null
+    oldData: applicationData?.oldData || null,
   };
 };
 
 const ReviewSection = ({ title, fields, newData, oldData, t, jumpTo, state }) => {
   return (
-    <div className="review-section-wrapper" style={{ marginBottom: "48px", background: "#fff", borderRadius: "12px", border: "1px solid #EAECF0", overflow: "hidden" }}>
-      <div style={{ padding: "20px 24px", background: "#F9FAFB", borderBottom: "1px solid #EAECF0", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+    <div
+      className="review-section-wrapper"
+      style={{ marginBottom: "48px", background: "#fff", borderRadius: "12px", border: "1px solid #EAECF0", overflow: "hidden" }}
+    >
+      <div
+        style={{
+          padding: "20px 24px",
+          background: "#F9FAFB",
+          borderBottom: "1px solid #EAECF0",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
         <CardSubHeader style={{ margin: 0, fontSize: "18px", color: "#101828", fontWeight: "700" }}>{title}</CardSubHeader>
         {jumpTo && <ActionButton jumpTo={jumpTo} state={state} />}
       </div>
@@ -72,9 +78,45 @@ const ReviewSection = ({ title, fields, newData, oldData, t, jumpTo, state }) =>
         <table style={{ width: "100%", borderCollapse: "collapse", tableLayout: "fixed" }}>
           <thead>
             <tr>
-              <th style={{ padding: "16px 0", textAlign: "left", color: "#667085", fontSize: "12px", fontWeight: "600", textTransform: "uppercase", width: "30%" }}>{t("EKYC_FIELD_NAME")}</th>
-              <th style={{ padding: "16px 0", textAlign: "left", color: "#667085", fontSize: "12px", fontWeight: "600", textTransform: "uppercase", width: "35%" }}>{t("EKYC_EXISTING_INFORMATION")}</th>
-              <th style={{ padding: "16px 0", textAlign: "left", color: "#667085", fontSize: "12px", fontWeight: "600", textTransform: "uppercase", width: "35%" }}>{t("EKYC_PROPOSED_UPDATES")}</th>
+              <th
+                style={{
+                  padding: "16px 0",
+                  textAlign: "left",
+                  color: "#667085",
+                  fontSize: "12px",
+                  fontWeight: "600",
+                  textTransform: "uppercase",
+                  width: "30%",
+                }}
+              >
+                {t("EKYC_FIELD_NAME")}
+              </th>
+              <th
+                style={{
+                  padding: "16px 0",
+                  textAlign: "left",
+                  color: "#667085",
+                  fontSize: "12px",
+                  fontWeight: "600",
+                  textTransform: "uppercase",
+                  width: "35%",
+                }}
+              >
+                {t("EKYC_EXISTING_INFORMATION")}
+              </th>
+              <th
+                style={{
+                  padding: "16px 0",
+                  textAlign: "left",
+                  color: "#667085",
+                  fontSize: "12px",
+                  fontWeight: "600",
+                  textTransform: "uppercase",
+                  width: "35%",
+                }}
+              >
+                {t("EKYC_PROPOSED_UPDATES")}
+              </th>
             </tr>
           </thead>
           <tbody>
@@ -85,17 +127,26 @@ const ReviewSection = ({ title, fields, newData, oldData, t, jumpTo, state }) =>
 
               return (
                 <tr key={idx} style={{ borderTop: "1px solid #F2F4F7" }}>
-                  <td style={{ padding: "16px 0", fontSize: "14px", color: "#344054", fontWeight: "500" }}>
-                    {t(field.label)}
-                  </td>
+                  <td style={{ padding: "16px 0", fontSize: "14px", color: "#344054", fontWeight: "500" }}>{t(field.label)}</td>
                   <td style={{ padding: "16px 0", fontSize: "14px", color: "#667085" }}>
                     {field.isBool ? boolToYesNo(valOld, t) : checkForNA(valOld)}
                   </td>
-                  <td style={{ padding: "16px 0", fontSize: "14px", color: isChanged ? "#1B8B32" : "#101828", fontWeight: isChanged ? "700" : "400" }}>
+                  <td
+                    style={{ padding: "16px 0", fontSize: "14px", color: isChanged ? "#1B8B32" : "#101828", fontWeight: isChanged ? "700" : "400" }}
+                  >
                     <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                       {field.isBool ? boolToYesNo(valNew, t) : checkForNA(valNew)}
                       {isChanged && (
-                        <span style={{ background: "#ECFDF3", color: "#067647", padding: "2px 8px", borderRadius: "12px", fontSize: "10px", fontWeight: "600" }}>
+                        <span
+                          style={{
+                            background: "#ECFDF3",
+                            color: "#067647",
+                            padding: "2px 8px",
+                            borderRadius: "12px",
+                            fontSize: "10px",
+                            fontWeight: "600",
+                          }}
+                        >
                           {t("EKYC_CHANGED")}
                         </span>
                       )}
@@ -112,10 +163,10 @@ const ReviewSection = ({ title, fields, newData, oldData, t, jumpTo, state }) =>
 };
 
 const Review = () => {
-
   const { t } = useTranslation();
   const history = useHistory();
   const location = useLocation();
+  let { kno } = useParams();
 
   const [agree, setAgree] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -123,8 +174,8 @@ const Review = () => {
   const [previewUrl, setPreviewUrl] = useState("");
 
   const flowState = location.state || {};
-  const { kNumber, kno, edits = {} } = flowState;
-  const activeKno = kNumber || kno;
+  const { edits = {} } = flowState;
+  const activeKno = kno;
 
   const { aadhaarData = {}, addressDetails: editedAddress = {}, propertyDetails: editedProperty = {}, meterDetails: editedMeter = {} } = edits;
 
@@ -148,7 +199,8 @@ const Review = () => {
 
     return {
       connection: {
-        consumerName: apiConn?.consumerName || (apiConn?.firstName ? [apiConn.firstName, apiConn.middleName, apiConn.lastName].filter(Boolean).join(" ") : null),
+        consumerName:
+          apiConn?.consumerName || (apiConn?.firstName ? [apiConn.firstName, apiConn.middleName, apiConn.lastName].filter(Boolean).join(" ") : null),
         address: apiConn?.address || apiConn?.addressRaw,
         connectionType: apiConn?.connectionType || apiConn?.connectionCategory,
         meterNumber: apiConn?.meterNumber || apiConn?.meterNo,
@@ -201,7 +253,7 @@ const Review = () => {
         lastBillRaised: apiMeter?.lastBillRaised,
         systemMeterId: apiMeter?.systemMeterId,
         meterPhotoFileStoreId: apiMeter?.meterPhotoFileStoreId,
-      }
+      },
     };
   };
 
@@ -400,20 +452,8 @@ const Review = () => {
   const baseUrl = "/digit-ui/employee/ekyc";
 
   return (
-    <div className="employeeCard overflow-y-scroll">
-      <Card style={{ padding: "32px" }}>
-        {/* ── Header ───────────────────────────────────────────────────── */}
-        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "40px", borderBottom: "1px solid #EAECF0", paddingBottom: "20px" }}>
-          <CardHeader style={{ margin: 0, fontSize: "28px" }}>{t("EKYC_REVIEW_APPLICATION")}</CardHeader>
-          <div style={{
-            background: "#F9FAFB", border: "1px solid #EAECF0",
-            borderRadius: "24px", padding: "8px 20px",
-            fontSize: "14px", color: "#475467", fontWeight: "500"
-          }}>
-            {t("EKYC_K_NUMBER")}: <span style={{ color: "#101828", fontWeight: "700" }}>{activeKno}</span>
-          </div>
-        </div>
-
+    <Fragment>
+      <Card className="overflow-y-scroll">
         {/* ── 1. Connection Details ────────────────────────────────────── */}
         <ReviewSection
           title={t("EKYC_CONNECTION_DETAILS")}
@@ -465,38 +505,46 @@ const Review = () => {
             <Row
               label={t("EKYC_DOOR_PHOTO")}
               text={addressData.doorPhotoFilestoreId ? t("EKYC_PHOTO_AVAILABLE") : t("CS_NA")}
-              actionButton={addressData.doorPhotoFilestoreId && (
-                <div onClick={() => handleViewDocument(addressData.doorPhotoFilestoreId)}>
-                  <GenericFileIcon style={{ cursor: "pointer", fill: "#F47738" }} />
-                </div>
-              )}
+              actionButton={
+                addressData.doorPhotoFilestoreId && (
+                  <div onClick={() => handleViewDocument(addressData.doorPhotoFilestoreId)}>
+                    <GenericFileIcon style={{ cursor: "pointer", fill: "#F47738" }} />
+                  </div>
+                )
+              }
             />
             <Row
               label={t("EKYC_METER_PHOTO")}
               text={meterData.meterPhotoFileStoreId ? t("EKYC_PHOTO_AVAILABLE") : t("CS_NA")}
-              actionButton={meterData.meterPhotoFileStoreId && (
-                <div onClick={() => handleViewDocument(meterData.meterPhotoFileStoreId)}>
-                  <GenericFileIcon style={{ cursor: "pointer", fill: "#F47738" }} />
-                </div>
-              )}
+              actionButton={
+                meterData.meterPhotoFileStoreId && (
+                  <div onClick={() => handleViewDocument(meterData.meterPhotoFileStoreId)}>
+                    <GenericFileIcon style={{ cursor: "pointer", fill: "#F47738" }} />
+                  </div>
+                )
+              }
             />
             <Row
               label={t("EKYC_BUILDING_IMAGE")}
               text={propertyData.buildingImageFileStoreId ? t("EKYC_PHOTO_AVAILABLE") : t("CS_NA")}
-              actionButton={propertyData.buildingImageFileStoreId && (
-                <div onClick={() => handleViewDocument(propertyData.buildingImageFileStoreId)}>
-                  <GenericFileIcon style={{ cursor: "pointer", fill: "#F47738" }} />
-                </div>
-              )}
+              actionButton={
+                propertyData.buildingImageFileStoreId && (
+                  <div onClick={() => handleViewDocument(propertyData.buildingImageFileStoreId)}>
+                    <GenericFileIcon style={{ cursor: "pointer", fill: "#F47738" }} />
+                  </div>
+                )
+              }
             />
             <Row
               label={t("EKYC_PROPERTY_DOCUMENTS")}
               text={propertyData.propertyDocumentFileStoreId ? t("EKYC_DOCS_AVAILABLE") : t("CS_NA")}
-              actionButton={propertyData.propertyDocumentFileStoreId && (
-                <div onClick={() => handleViewDocument(propertyData.propertyDocumentFileStoreId)}>
-                  <GenericFileIcon style={{ cursor: "pointer", fill: "#F47738" }} />
-                </div>
-              )}
+              actionButton={
+                propertyData.propertyDocumentFileStoreId && (
+                  <div onClick={() => handleViewDocument(propertyData.propertyDocumentFileStoreId)}>
+                    <GenericFileIcon style={{ cursor: "pointer", fill: "#F47738" }} />
+                  </div>
+                )
+              }
             />
           </StatusTable>
         </div>
@@ -510,41 +558,60 @@ const Review = () => {
             checked={agree}
           />
         </div>
-      </Card>
 
-      <ActionBar style={{ position: "static", marginTop: "32px", display: "flex", justifyContent: "flex-end" }}>
-        <SubmitBar
-          label={t("EKYC_REJECT")}
-          onSubmit={handleReject}
-          disabled={!agree}
-        />
-        <SubmitBar
-          label={t("EKYC_APPROVE")}
-          onSubmit={handleApprove}
-          disabled={!agree}
-        />
-        <SubmitBar label={t("EKYC_SUBMIT_APPLICATION")} onSubmit={handleFinalSubmit} disabled={!agree} />
-      </ActionBar>
+        <ActionBar>
+          <SubmitBar label={t("EKYC_REJECT")} onSubmit={handleReject} disabled={!agree} />
+          <SubmitBar label={t("EKYC_APPROVE")} onSubmit={handleApprove} disabled={!agree} />
+          {/* <SubmitBar label={t("EKYC_SUBMIT_APPLICATION")} onSubmit={handleFinalSubmit} disabled={!agree} /> */}
+        </ActionBar>
+      </Card>
 
       {/* ── Document Preview Modal ────────────────────────────────────── */}
       {showPreview && (
-        <div style={{
-          position: "fixed", top: 0, left: 0, width: "100%", height: "100%",
-          backgroundColor: "rgba(0,0,0,0.7)", display: "flex", justifyContent: "center",
-          alignItems: "center", zIndex: 10000
-        }}>
-          <div style={{
-            position: "relative", backgroundColor: "#fff", padding: "30px",
-            borderRadius: "12px", maxWidth: "600px", width: "100%", maxHeight: "70vh", overflow: "auto",
-            boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"
-          }}>
+        <div
+          style={{
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            backgroundColor: "rgba(0,0,0,0.7)",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            zIndex: 10000,
+          }}
+        >
+          <div
+            style={{
+              position: "relative",
+              backgroundColor: "#fff",
+              padding: "30px",
+              borderRadius: "12px",
+              maxWidth: "600px",
+              width: "100%",
+              maxHeight: "70vh",
+              overflow: "auto",
+              boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+            }}
+          >
             <div
               onClick={() => setShowPreview(false)}
               style={{
-                position: "absolute", top: "10px", right: "10px", cursor: "pointer",
-                fontWeight: "bold", fontSize: "20px", color: "#333", background: "#eee",
-                width: "30px", height: "30px", display: "flex", justifyContent: "center",
-                alignItems: "center", borderRadius: "50%"
+                position: "absolute",
+                top: "10px",
+                right: "10px",
+                cursor: "pointer",
+                fontWeight: "bold",
+                fontSize: "20px",
+                color: "#333",
+                background: "#eee",
+                width: "30px",
+                height: "30px",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                borderRadius: "50%",
               }}
             >
               ×
@@ -565,7 +632,7 @@ const Review = () => {
           </div>
         </div>
       )}
-    </div>
+    </Fragment>
   );
 };
 

package/src/components/StatusCards.js

@@ -16,7 +16,6 @@ const StatusCards = ({ countData }) => {
   const pending = countData?.pending || 0;
   const active = countData?.completed || 0;
   const completed = 0;
-  const rejected = countData?.rejected || 0;
 
   const actualCompleted = countData?.completed || 0;
   const approved = actualCompleted;
@@ -77,14 +76,11 @@ const StatusCards = ({ countData }) => {
             </div>
             <h1 className="status-cards-h1">{t("EKYC_DASHBOARD_TITLE") || "eKYC Verification Dashboard"}</h1>
             <p className="status-cards-subtitle">
-              {t("EKYC_DASHBOARD_SUBTITLE") ||
-                "Real-time monitoring of consumer verification workflows across all administrative zones."}
+              {t("EKYC_DASHBOARD_SUBTITLE") || "Real-time monitoring of consumer verification workflows across all administrative zones."}
             </p>
           </div>
           <div className="total-applications-card">
-            <div className="total-label">
-              {t("EKYC_TOTAL_APPLICATIONS") || "Total Applications Processed"}
-            </div>
+            <div className="total-label">{t("EKYC_TOTAL_APPLICATIONS") || "Total Applications Processed"}</div>
             <div className="total-number">{formatNumber(total)}</div>
             <div className="total-badge">↗ +12.4% {t("EKYC_FROM_LAST_QUARTER") || "from last quarter"}</div>
           </div>
@@ -95,18 +91,13 @@ const StatusCards = ({ countData }) => {
           {/* Panel 1: Status Breakdown */}
           <div className="status-panel">
             <div className="panel-title">{t("EKYC_STATUS_BREAKDOWN") || "Status Breakdown"}</div>
-            <div className="panel-subtitle">
-              {t("EKYC_VERIFICATION_LIFECYCLE") || "Verification lifecycle distribution"}
-            </div>
+            <div className="panel-subtitle">{t("EKYC_VERIFICATION_LIFECYCLE") || "Verification lifecycle distribution"}</div>
             <div className="breakdown-body">
               <div className="status-legend">
                 {legendItems.map((item) => (
                   <div key={item.label} className="legend-row">
                     <span className="legend-label">
-                      <span
-                        className="indicator-dot"
-                        style={{ background: item.color }}
-                      />
+                      <span className="indicator-dot" style={{ background: item.color }} />
                       {item.label}
                     </span>
                     <span className="legend-value">{formatNumber(item.value)}</span>
@@ -129,9 +120,7 @@ const StatusCards = ({ countData }) => {
               {t("EKYC_SUBMISSION_HEALTH") || "Submission Health"}
               <span className="optimal-badge">{t("EKYC_OPTIMAL") || "Optimal"}</span>
             </div>
-            <div className="panel-subtitle">
-              {t("EKYC_PLATFORM_EFFICIENCY") || "Platform operational efficiency"}
-            </div>
+            <div className="panel-subtitle">{t("EKYC_PLATFORM_EFFICIENCY") || "Platform operational efficiency"}</div>
             <div className="health-metrics-row">
               <div className="health-percentage">{healthPct}%</div>
               <div className="health-trend">↗ +2.1%</div>
@@ -156,4 +145,4 @@ const StatusCards = ({ countData }) => {
   );
 };
 
-export default StatusCards;
+export default StatusCards;