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

package/src/components/StatusCards.js

@@ -1,173 +1,155 @@
 import React, { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { Chart, registerables } from "chart.js";
+import * as Chartjs from "chart.js/auto";
 
-Chart.register(...registerables);
+const getChartConstructor = () => {
+  const C = Chartjs.Chart || Chartjs.default || Chartjs;
+  return C;
+};
 
 const StatusCards = ({ countData }) => {
   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 active = countData?.completed || 0;
+  const completed = 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;
+  const healthPct = total > 0 ? Math.round((approved / total) * 100) : 0;
+
+  const formatNumber = (num) => new Intl.NumberFormat("en-IN").format(num || 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, {
+      const ChartConstructor = getChartConstructor();
+      chartInstance1.current = new ChartConstructor(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,
-          }],
+          labels: [t("EKYC_ACTIVE"), t("EKYC_PENDING"), t("EKYC_COMPLETED")],
+          datasets: [
+            {
+              data: [active, pending, completed],
+              backgroundColor: ["#0c2a52", "#77B6EA", "#c8ddf5"],
+              borderColor: ["#ffffff", "#ffffff", "#ffffff"],
+              borderWidth: 2,
+              hoverOffset: 4,
+            },
+          ],
         },
         options: {
           cutout: "75%",
           plugins: { legend: { display: false } },
-          maintainAspectRatio: true,
+          maintainAspectRatio: false,
           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 () => {
       if (chartInstance1.current) chartInstance1.current.destroy();
-      if (chartInstance2.current) chartInstance2.current.destroy();
     };
-  }, [pending, completed, active, applied, approved, t]);
+  }, [pending, completed, active, t]);
 
-  const formatNumber = (num) => {
-    return new Intl.NumberFormat("en-IN").format(num || 0);
-  };
+  const legendItems = [
+    { color: "#0c2a52", label: t("EKYC_ACTIVE"), value: active },
+    { color: "#77B6EA", label: t("EKYC_PENDING"), value: pending },
+    { color: "#c8ddf5", label: t("EKYC_COMPLETED"), value: completed },
+  ];
 
   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>
-
-            {/* 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>
-
-            {/* 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 className="ekyc-employee-container">
+      <div className="status-cards-wrapper">
+        {/* Header */}
+        <div className="status-cards-header">
+          <div>
+            <div className="eyebrow">
+              <span className="eyebrow-dot" />
+              {t("EKYC_INSTITUTIONAL_OVERVIEW") || "Institutional Performance Overview"}
             </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>
+            <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."}
+            </p>
+          </div>
+          <div className="total-applications-card">
+            <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>
         </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}%
+        {/* Panels */}
+        <div className="status-panels-grid">
+          {/* 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="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 }}
+                      />
+                      {item.label}
+                    </span>
+                    <span className="legend-value">{formatNumber(item.value)}</span>
+                  </div>
+                ))}
+              </div>
+              <div className="chart-wrapper">
+                <canvas ref={chartRef1} style={{ width: "100%", height: "100%" }} />
+                <div className="chart-center">
+                  <div className="chart-percentage">{efficiency}%</div>
+                  <div className="chart-label">{t("EKYC_COMPLETE") || "Complete"}</div>
                 </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>
+          {/* Panel 2: Submission Health */}
+          <div className="status-panel">
+            <div className="panel-title">
+              {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="health-metrics-row">
+              <div className="health-percentage">{healthPct}%</div>
+              <div className="health-trend">↗ +2.1%</div>
+            </div>
+            <div className="status-progress-bar">
+              <div className="progress-fill" style={{ width: `${healthPct}%` }} />
+            </div>
+            <div className="mini-metrics-grid">
+              <div className="metric-box">
+                <div className="metric-label">{t("EKYC_AVG_LATENCY") || "Avg Latency"}</div>
+                <div className="metric-value">1.2s</div>
+              </div>
+              <div className="metric-box">
+                <div className="metric-label">{t("EKYC_ERROR_RATE") || "Error Rate"}</div>
+                <div className="metric-value">0.04%</div>
               </div>
             </div>
-            <div style={{ marginTop: "8px", fontSize: "11px", fontWeight: "700", color: "#888", textTransform: "uppercase" }}>{t("EKYC_SUBMISSION_HEALTH")}</div>
           </div>
-
         </div>
       </div>
     </div>

package/src/config/config.js

@@ -0,0 +1,69 @@
+import AadhaarVerification from "../pages/employee/AadhaarVerification";
+
+export const ekycConfig = [
+  {
+    body: [
+      {
+        route: "consumer-details",
+        component: AadhaarVerification,
+        key: "aadhaarVerification",
+        texts: {
+          header: "EKYC_CONSUMER_CONNECTION",
+          submitBarLabel: "COMMON_SAVE_NEXT",
+        },
+        timeLine: [
+          {
+            currentStep: 1,
+            actions: "EKYC_CONSUMER_CONNECTION",
+          },
+        ],
+      },
+      {
+        route: "address-details",
+        component: "AddressDetails",
+        key: "addressDetails",
+        doorImage: true,
+        texts: {
+          header: "EKYC_ADDRESS_DETAILS",
+          submitBarLabel: "COMMON_SAVE_NEXT",
+        },
+        timeLine: [
+          {
+            currentStep: 2,
+            actions: "EKYC_ADDRESS_DETAILS",
+          },
+        ],
+      },
+      {
+        route: "property-info",
+        component: "PropertyInfo",
+        key: "propertyDetails",
+        texts: {
+          header: "EKYC_PROPERTY_INFO",
+          submitBarLabel: "COMMON_SAVE_NEXT",
+        },
+        timeLine: [
+          {
+            currentStep: 3,
+            actions: "EKYC_PROPERTY_INFO",
+          },
+        ],
+      },
+      {
+        route: "meter-details",
+        component: "MeterDetails",
+        key: "meterDetails",
+        texts: {
+          header: "EKYC_METER_DETAILS",
+          submitBarLabel: "COMMON_SAVE_NEXT",
+        },
+        timeLine: [
+          {
+            currentStep: 4,
+            actions: "EKYC_METER_DETAILS",
+          },
+        ],
+      },
+    ],
+  },
+];

package/src/hook/useInboxTableConfig.js

@@ -0,0 +1,134 @@
+import React, { useState } from "react";
+import { useHistory } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+const useInboxTableConfig = ({
+  parentRoute,
+  onPageSizeChange,
+  formState,
+  totalCount,
+  table,
+  dispatch,
+  checkPathName,
+  onSortingByData,
+  tenantId,
+  inboxStyles = {},
+  tableStyle = {},
+}) => {
+  const { t } = useTranslation();
+  const history = useHistory();
+  const [selectedKno, setSelectedKno] = useState("");
+  const { data: reviewData, getReview } = Digit.Hooks.ekyc.useEkycAPI("review", tenantId);
+  const handleReview = (kno) => {
+    setSelectedKno(kno);
+    getReview({ kno });
+  };
+
+  const limit = formState?.tableForm?.limit || 10;
+  const offset = formState?.tableForm?.offset || 0;
+
+  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 tableColumnConfig = [
+    {
+      Header: t("EKYC_APPLICATION_NO"),
+      accessor: "applicationNumber",
+      disableSortBy: true,
+      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)}
+          >
+            {kno}
+          </span>
+        );
+      },
+    },
+    {
+      Header: t("EKYC_CITIZEN_NAME"),
+      accessor: "citizenName",
+      Cell: ({ row }) => <span>{row.original?.citizenName || "NA"}</span>,
+    },
+    {
+      Header: t("EKYC_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>
+        );
+      },
+    },
+  ];
+
+  return {
+    getCellProps: (cellInfo) => {
+      return {
+        style: {
+          padding: "8px",
+          fontSize: "12px",
+        },
+      };
+    },
+    disableSort: false,
+    autoSort: false,
+    manualPagination: true,
+    initSortId: "applicationDate",
+    onPageSizeChange: onPageSizeChange,
+    currentPage: Math.floor(offset / limit),
+    onNextPage: () =>
+      dispatch({
+        action: "mutateTableForm",
+        data: { ...formState.tableForm, offset: parseInt(formState.tableForm?.offset) + parseInt(formState.tableForm?.limit) },
+        checkPathName,
+      }),
+    onPrevPage: () =>
+      dispatch({
+        action: "mutateTableForm",
+        data: { ...formState.tableForm, offset: parseInt(formState.tableForm?.offset) - parseInt(formState.tableForm?.limit) },
+        checkPathName,
+      }),
+    pageSizeLimit: limit,
+    onSort: onSortingByData,
+    // sortParams: [{id: getValues("sortBy"), desc: getValues("sortOrder") === "DESC" ? true : false}],
+    totalRecords: totalCount,
+    onSearch: formState?.searchForm?.message,
+    onLastPage: () =>
+      dispatch({
+        action: "mutateTableForm",
+        data: { ...formState.tableForm, offset: Math.ceil(totalCount / 10) * 10 - parseInt(formState.tableForm?.limit) },
+        checkPathName,
+      }),
+    onFirstPage: () => dispatch({ action: "mutateTableForm", data: { ...formState.tableForm, offset: 0 }, checkPathName }),
+    // globalSearch: {searchForItemsInTable},
+    // searchQueryForTable,
+    data: table,
+    columns: tableColumnConfig,
+    inboxStyles: { ...inboxStyles },
+    tableStyle: { ...tableStyle },
+  };
+};
+
+export default useInboxTableConfig;

package/src/pages/citizen/index.js

@@ -0,0 +1,90 @@
+import { AppContainer, PrivateRoute, ModuleHeader, ArrowLeft, HomeIcon } from "@djb25/digit-ui-react-components";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Switch, useLocation, useRouteMatch } from "react-router-dom";
+import Create from "../employee/Create";
+import AadhaarVerification from "../employee/AadhaarVerification";
+import AddressDetails from "../employee/AddressDetails";
+import PropertyInfo from "../employee/PropertyInfo";
+import MeterDetails from "../employee/MeterDetails";
+import Review from "../employee/Review";
+
+const CitizenApp = () => {
+    const { t } = useTranslation();
+    const location = useLocation();
+    const { path } = useRouteMatch();
+
+    sessionStorage.removeItem("revalidateddone");
+
+    const getBreadcrumbLabel = () => {
+        const pathname = location.pathname;
+        if (pathname.includes("/create-kyc")) return "EKYC_CREATE_KYC";
+        if (pathname.includes("/aadhaar-verification")) return "EKYC_AADHAAR_VERIFICATION";
+        if (pathname.includes("/address-details")) return "EKYC_ADDRESS_DETAILS";
+        if (pathname.includes("/property-info")) return "EKYC_PROPERTY_INFO";
+        if (pathname.includes("/meter-details")) return "EKYC_METER_DETAILS";
+        if (pathname.includes("/review")) return "EKYC_REVIEW";
+        return "EKYC_HOME";
+    };
+
+    const breadcrumbs = [
+        { icon: HomeIcon, path: "/digit-ui/citizen" },
+        { label: t(getBreadcrumbLabel()) }
+    ];
+
+    return (
+        <AppContainer>
+            <div className="ground-container employee-app-container form-container">
+                <ModuleHeader
+                    leftContent={
+                        <React.Fragment>
+                            <ArrowLeft className="icon" />
+                            {t("CS_COMMON_BACK")}
+                        </React.Fragment>
+                    }
+                    onLeftClick={() => window.history.back()}
+                    breadcrumbs={breadcrumbs}
+                />
+
+                <Switch>
+                    <PrivateRoute
+                        path={`${path}/create-kyc`}
+                        component={() => <Create />}
+                    />
+
+                    <PrivateRoute
+                        path={`${path}/aadhaar-verification`}
+                        component={() => <AadhaarVerification />}
+                    />
+
+                    <PrivateRoute
+                        path={`${path}/address-details`}
+                        component={() => <AddressDetails />}
+                    />
+
+                    <PrivateRoute
+                        path={`${path}/property-info`}
+                        component={() => <PropertyInfo />}
+                    />
+
+                    <PrivateRoute
+                        path={`${path}/meter-details`}
+                        component={() => <MeterDetails />}
+                    />
+
+                    <PrivateRoute
+                        path={`${path}/review`}
+                        component={() => <Review />}
+                    />
+
+                    <PrivateRoute
+                        path={`${path}/`}
+                        component={() => <Create />}
+                    />
+                </Switch>
+            </div>
+        </AppContainer>
+    );
+};
+
+export default CitizenApp;