npm - @djb25/digit-ui-module-ekyc - Versions diffs - 1.0.5 → 1.0.7 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/dist/index.js +1 -1
package/dist/index.js.map +1 -1
package/dist/index.modern.js +1142 -497
package/dist/index.modern.js.map +1 -1
package/package.json +4 -2
package/src/components/DesktopInbox.js +208 -60
package/src/components/Filter.js +5 -4
package/src/components/StatusCards.js +167 -16
package/src/pages/employee/AadhaarVerification.js +341 -249
package/src/pages/employee/AddressDetails.js +148 -124
package/src/pages/employee/Create.js +31 -19
package/src/pages/employee/Inbox.js +14 -8
package/src/pages/employee/PropertyInfo.js +382 -302
package/src/pages/employee/Review.js +365 -179
package/src/utils/index.js +46 -0

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@djb25/digit-ui-module-ekyc",
-    "version": "1.0.5",
+    "version": "1.0.7",
     "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/components/DesktopInbox.js CHANGED Viewed

@@ -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>
           );
         },
       },
@@ -54,7 +183,7 @@ const DesktopInbox = ({ tableConfig, filterComponent, ...props }) => {
         accessor: "status",
         Cell: ({ row }) => {
           const status = row.original?.status || "DEFAULT";
-          return <span className={`ekyc-status-tag ${status}`}>{t(`EKYC_STATUS_${status}`)}</span>;
+          return <span className={`ekyc-status-tag ${status}`}>{t(`${status}`)}</span>;
         },
       },
     ],
@@ -66,69 +195,88 @@ const DesktopInbox = ({ tableConfig, filterComponent, ...props }) => {
   }, [data]);
   return (
-    <div className="inbox-container">
-      <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>
-          {FilterComponent && (
-            <FilterComponent
-              defaultSearchParams={props.defaultSearchParams}
-              onFilterChange={props.onSearch}
-              searchParams={searchParams}
-              type="desktop"
-              moduleCode="EKYC"
+    <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">
+          {/* 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>
         </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 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" }}>
                     <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" 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",
+                  };
+                }}
+              />
+            </Card>
+          </div>
         </div>
       </div>
     </div>

package/src/components/Filter.js CHANGED Viewed

@@ -25,7 +25,9 @@ const Filter = ({ searchParams, onFilterChange, defaultSearchParams, statusMap,
     };
     const onStatusChange = (value) => {
-        localParamChange({ status: value });
+        const newParams = { ..._searchParams, status: value };
+        setSearchParams(newParams);
+        onFilterChange(newParams);
     };
     return (
@@ -43,9 +45,8 @@ const Filter = ({ searchParams, onFilterChange, defaultSearchParams, statusMap,
                 <Dropdown
                     option={[
                         { label: t("EKYC_STATUS_ALL"), value: "" },
-                        { label: t("EKYC_STATUS_COMPLETED"), value: "COMPLETED" },
-                        { label: t("EKYC_STATUS_PENDING"), value: "PENDING" },
-                        { label: t("EKYC_STATUS_REJECTED"), value: "REJECTED" },
+                        { label: t("EKYC_STATUS_ACTIVE"), value: "ACTIVE" },
+                        { label: t("EKYC_STATUS_PENDING"), value: "PENDING START" },
                     ]}
                     optionKey="label"
                     select={onStatusChange}

package/src/components/StatusCards.js CHANGED Viewed

@@ -1,26 +1,177 @@
-import React from "react";
-import { Card } from "@djb25/digit-ui-react-components";
+import React, { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
+import { Chart, registerables } from "chart.js";
+Chart.register(...registerables);
 const StatusCards = ({ countData }) => {
-    const { t } = useTranslation();
+  const { t } = useTranslation();
+  const chartRef1 = useRef(null);
+  const chartInstance1 = useRef(null);
+  const chartRef2 = useRef(null);
+  const chartInstance2 = useRef(null);
+  const total = countData?.total || 0;
+  const pending = countData?.pending || 0;
+  const active = countData?.completed || 0; // Showing completed data as active
+  const completed = 0; // Forced to 0
+  const rejected = countData?.rejected || 0;
+  const actualCompleted = countData?.completed || 0;
+  const applied = total;
+  const approved = actualCompleted;
+  const efficiency = total > 0 ? Math.round((actualCompleted / total) * 100) : 0;
+  useEffect(() => {
+    // Chart 1: Status Breakdown
+    if (chartRef1.current) {
+      if (chartInstance1.current) chartInstance1.current.destroy();
+      const ctx1 = chartRef1.current.getContext("2d");
+      chartInstance1.current = new Chart(ctx1, {
+        type: "doughnut",
+        data: {
+          labels: [t("EKYC_ACTIVE"), t("EKYC_COMPLETED"), t("EKYC_PENDING")],
+          datasets: [{
+            data: [active, completed, pending],
+            backgroundColor: ["#1a3a6b", "#77B6EA", "#3d84ed"],
+            borderColor: ["#ffffff", "#ffffff", "#ffffff"],
+            borderWidth: 2,
+            hoverOffset: 4,
+          }],
+        },
+        options: {
+          cutout: "75%",
+          plugins: { legend: { display: false } },
+          maintainAspectRatio: true,
+          responsive: true,
+          aspectRatio: 1,
+        },
+      });
+    }
+    // Chart 2: Applied vs Approved
+    if (chartRef2.current) {
+      if (chartInstance2.current) chartInstance2.current.destroy();
+      const ctx2 = chartRef2.current.getContext("2d");
+      chartInstance2.current = new Chart(ctx2, {
+        type: "doughnut",
+        data: {
+          labels: [t("EKYC_APPROVED"), t("EKYC_OTHERS")],
+          datasets: [{
+            data: [approved, Math.max(0, applied - approved)],
+            backgroundColor: ["#219653", "#E0E0E0"],
+            borderColor: ["#ffffff", "#ffffff"],
+            borderWidth: 2,
+            hoverOffset: 4,
+          }],
+        },
+        options: {
+          cutout: "75%",
+          plugins: { legend: { display: false } },
+          maintainAspectRatio: true,
+          responsive: true,
+          aspectRatio: 1,
+        },
+      });
+    }
-    return (
-        <div className="ekyc-status-container">
-            <div className="ekyc-status-card">
-                <div className="count">{countData?.total || 0}</div>
-                <div className="label">{t("EKYC_TOTAL")}</div>
+    return () => {
+      if (chartInstance1.current) chartInstance1.current.destroy();
+      if (chartInstance2.current) chartInstance2.current.destroy();
+    };
+  }, [pending, completed, active, applied, approved, t]);
+  const formatNumber = (num) => {
+    return new Intl.NumberFormat("en-IN").format(num || 0);
+  };
+  return (
+    <div style={{ fontFamily: "'Segoe UI', sans-serif", width: "100%" }}>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", flexWrap: "wrap", gap: "24px" }}>
+        {/* Statistics Section */}
+        <div style={{ flex: "1", minWidth: "250px" }}>
+          <div style={{ fontSize: "11px", fontWeight: "700", color: "#888", letterSpacing: "1px", marginBottom: "16px", textTransform: "uppercase" }}>
+            {t("EKYC_DASHBOARD_METRICS") || "DASHBOARD METRICS"}
+          </div>
+          <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+            {/* Active */}
+            <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
+              <span style={{ width: "12px", height: "12px", borderRadius: "50%", backgroundColor: "#1a3a6b", flexShrink: 0 }} />
+              <span style={{ fontSize: "14px", color: "#333" }}>
+                {t("EKYC_ACTIVE")}: <strong style={{ color: "#1a3a6b" }}>{formatNumber(active)}</strong>
+              </span>
             </div>
-            <div className="ekyc-status-card">
-                <div className="count pending">{countData?.pending || 0}</div>
-                <div className="label">{t("EKYC_PENDING")}</div>
+            {/* Pending */}
+            <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
+              <span style={{ width: "12px", height: "12px", borderRadius: "50%", backgroundColor: "#3d84ed", flexShrink: 0 }} />
+              <span style={{ fontSize: "14px", color: "#333" }}>
+                {t("EKYC_PENDING")}: <strong style={{ color: "#1a3a6b" }}>{formatNumber(pending)}</strong>
+              </span>
             </div>
-            <div className="ekyc-status-card">
-                <div className="count completed">{countData?.completed || 0}</div>
-                <div className="label">{t("EKYC_COMPLETED")}</div>
+            {/* Completed */}
+            <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
+              <span style={{ width: "12px", height: "12px", borderRadius: "50%", backgroundColor: "#77B6EA", flexShrink: 0 }} />
+              <span style={{ fontSize: "14px", color: "#333" }}>
+                {t("EKYC_COMPLETED")}: <strong style={{ color: "#1a3a6b" }}>{formatNumber(completed)}</strong>
+              </span>
+            </div>
+            {/* Total Section */}
+            <div style={{ marginTop: "20px", padding: "16px", background: "#f8faff", borderRadius: "8px", border: "1px solid #eef2f6" }}>
+              <div style={{ fontSize: "32px", fontWeight: "800", color: "#1a3a6b", lineHeight: 1 }}>
+                {formatNumber(total)}
+              </div>
+              <div style={{ fontSize: "12px", color: "#667085", marginTop: "4px", fontWeight: "600" }}>
+                {t("EKYC_TOTAL_APPLICATIONS") || "Total Applications Applied"}
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* Visualizations Section */}
+        <div style={{ display: "flex", gap: "32px", alignItems: "center", justifyContent: "flex-end", flexWrap: "wrap" }}>
+          {/* Chart 1: Status Breakdown */}
+          <div style={{ textAlign: "center" }}>
+            <div style={{ width: "140px", height: "140px", position: "relative" }}>
+              <canvas ref={chartRef1} />
+              <div style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", textAlign: "center", pointerEvents: "none", width: "100%" }}>
+                {/* <div style={{ fontSize: "16px", fontWeight: "800", color: "#1a3a6b", lineHeight: 1.2 }}>
+                  {formatNumber(active)} / {formatNumber(total)}
+                </div> */}
+                <div style={{ fontSize: "9px", color: "#667085", fontWeight: "700", marginTop: "4px" }}>
+                  {efficiency}%
+                </div>
+              </div>
             </div>
+            <div style={{ marginTop: "8px", fontSize: "11px", fontWeight: "700", color: "#888", textTransform: "uppercase" }}>{t("EKYC_STATUS_BREAKDOWN")}</div>
+          </div>
+          {/* Chart 2: Applied vs Approved */}
+          <div style={{ textAlign: "center" }}>
+            <div style={{ width: "140px", height: "140px", position: "relative" }}>
+              <canvas ref={chartRef2} />
+              <div style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", textAlign: "center", pointerEvents: "none", width: "100%" }}>
+                {/* <div style={{ fontSize: "16px", fontWeight: "800", color: "#219653", lineHeight: 1.2 }}>
+                  {formatNumber(approved)} / {formatNumber(applied)}
+                </div> */}
+                <div style={{ fontSize: "9px", color: "#667085", fontWeight: "700", marginTop: "4px" }}>
+                  {total > 0 ? Math.round((approved / total) * 100) : 0}%
+                </div>
+              </div>
+            </div>
+            <div style={{ marginTop: "8px", fontSize: "11px", fontWeight: "700", color: "#888", textTransform: "uppercase" }}>{t("EKYC_SUBMISSION_HEALTH")}</div>
+          </div>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
-export default StatusCards;
+export default StatusCards;