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

package/src/components/CeoDashboard.jsx

@@ -0,0 +1,334 @@
+import React, { useMemo, useState } from "react";
+import { useHistory, useLocation } from "react-router-dom";
+import {
+  FaChartLine,
+  FaUsers,
+  FaCheckCircle,
+  FaClock,
+  FaExclamationTriangle,
+  FaUserTie,
+  FaMapMarkedAlt,
+  FaSearch,
+  FaArrowRight,
+} from "react-icons/fa";
+import { ekycMockData } from "./mockData";
+import ExecutiveLineChart from "./analytics/charts/ExecutiveLineChart";
+import ExecutiveBarChart from "./analytics/charts/ExecutiveBarChart";
+import ExecutivePieChart from "./analytics/charts/ExecutivePieChart";
+
+const CeoDashboard = () => {
+  const history = useHistory();
+  const location = useLocation();
+  const [query, setQuery] = useState("");
+  const [statusFilter, setStatusFilter] = useState("All");
+
+  const basePath = location.pathname.replace(/\/ceo-dashboard$/, "");
+  const filters = ["All", "High Priority", "Stable", "Watchlist"];
+
+  const vendors = useMemo(() => ekycMockData.vendors || [], []);
+  const topKpis = useMemo(() => ekycMockData.topKpis || {}, []);
+  const dailyTrend = useMemo(() => ekycMockData.dailyTrend || [], []);
+  const selfVsAgency = useMemo(() => ekycMockData.selfVsAgency || [], []);
+  const pendingVsCompleted = useMemo(() => ekycMockData.pendingVsCompleted || [], []);
+  // const rejectionAnalysis = ekycMockData.rejectionAnalysis || [];
+
+  const filteredVendors = useMemo(() => {
+    return vendors
+      .filter((vendor) => {
+        if (statusFilter === "High Priority") return vendor.successRate < 70;
+        if (statusFilter === "Watchlist") return vendor.pending > 35000;
+        if (statusFilter === "Stable") return vendor.successRate >= 70;
+        return true;
+      })
+      .filter((vendor) => {
+        if (!query) return true;
+        const keyword = query.toLowerCase();
+        return (
+          vendor.name.toLowerCase().includes(keyword) ||
+          vendor.jurisdictions.some((zone) => zone.toLowerCase().includes(keyword)) ||
+          vendor.zones.some((zone) => zone.location?.toLowerCase().includes(keyword))
+        );
+      });
+  }, [vendors, query, statusFilter]);
+
+  const zoneRows = useMemo(() => {
+    return vendors
+      .flatMap((vendor) => vendor.zones.map((zone) => ({ ...zone, agency: vendor.name })))
+      .filter((row) => row.location)
+      .sort((a, b) => (b.activeDemand || 0) - (a.activeDemand || 0));
+  }, [vendors]);
+
+  const alerts = [
+    "North East District has 22% more pending accounts than last week",
+    "Agency 2 has a 12% improvement opportunity in Self eKYC adoption",
+    "Urgent: 18 supervisor escalations raised for NWS Bhera Enclave",
+    "Risk alert: Rejection trends are rising in Outer North clusters",
+  ];
+
+  const routeToVendor = (vendorId) => {
+    history.push(`${basePath}/vendors/${vendorId}`);
+  };
+
+  return (
+    <div className="ekyc-dashboard-wrapper">
+      <div className="dashboard-shell">
+        <section className="kpi-grid">
+          {[
+            {
+              title: "Total Water Connections",
+              value: topKpis.totalWaterConnections,
+              icon: <FaUsers />,
+              variant: "primary",
+            },
+            {
+              title: "Total eKYC Completed",
+              value: topKpis.totalEkycCompleted,
+              icon: <FaCheckCircle />,
+              variant: "success",
+            },
+            {
+              title: "Total Pending",
+              value: topKpis.totalPending,
+              icon: <FaClock />,
+              variant: "warning",
+            },
+            {
+              title: "Total Rejected",
+              value: topKpis.totalRejected,
+              icon: <FaExclamationTriangle />,
+              variant: "danger",
+            },
+            {
+              title: "Agency eKYC Completed",
+              value: topKpis.agencyEkycCompleted,
+              icon: <FaUserTie />,
+              variant: "info",
+            },
+            {
+              title: "Citizen Self eKYC Completed",
+              value: topKpis.citizenSelfEkycCompleted,
+              icon: <FaUsers />,
+              variant: "secondary",
+            },
+            {
+              title: "Today's eKYC",
+              value: topKpis.todaysEkyc,
+              icon: <FaChartLine />,
+              variant: "muted",
+            },
+            {
+              title: "Success Rate",
+              value: `${topKpis.successRate}%`,
+              icon: <FaCheckCircle />,
+              variant: "success",
+            },
+            {
+              title: "Rejection Percentage",
+              value: `${topKpis.rejectionPercentage}%`,
+              icon: <FaExclamationTriangle />,
+              variant: "danger",
+            },
+          ].map((card) => (
+            <article key={card.title} className={`kpi-card card-${card.variant}`}>
+              <div className="kpi-icon">{card.icon}</div>
+              <div>
+                <p className="kpi-title">{card.title}</p>
+                <h2>{card.value?.toLocaleString?.() ?? card.value}</h2>
+              </div>
+            </article>
+          ))}
+        </section>
+
+        <section className="vendor-section">
+          <div className="section-top">
+            <div>
+              <h2>Agency Performance Snapshot</h2>
+              <p>Search, filter, and navigate into detailed analytics for every assigned vendor.</p>
+            </div>
+            <div className="vendor-filters">
+              <div className="search-box">
+                <FaSearch />
+                <input type="text" placeholder="Search agency, jurisdiction, location" value={query} onChange={(e) => setQuery(e.target.value)} />
+              </div>
+              <div className="status-pill-group">
+                {filters.map((status) => (
+                  <button key={status} className={`status-pill ${statusFilter === status ? "active" : ""}`} onClick={() => setStatusFilter(status)}>
+                    {status}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <div className="vendor-grid">
+            {filteredVendors.map((vendor) => (
+              <div key={vendor.id} className="vendor-card glass-card" onClick={() => routeToVendor(vendor.id)}>
+                <div className="vendor-card-top">
+                  <div>
+                    <p className="vendor-chip">{vendor.name}</p>
+                    <h3>{vendor.assignedConnections.toLocaleString()}</h3>
+                    <p className="vendor-subtitle">Assigned connections across {vendor.jurisdictions.length} jurisdiction(s)</p>
+                  </div>
+                  <div className="vendor-progress-value">{vendor.progress}%</div>
+                </div>
+                <div className="progress-bar">
+                  <div className="progress-fill" style={{ width: `${vendor.progress}%` }} />
+                </div>
+                <div className="vendor-stats-grid">
+                  <div>
+                    <strong>{vendor.completedEkyc.toLocaleString()}</strong>
+                    <span>Agency eKYC</span>
+                  </div>
+                  <div>
+                    <strong>{vendor.selfEkyc.toLocaleString()}</strong>
+                    <span>Self eKYC</span>
+                  </div>
+                  <div>
+                    <strong>{vendor.pending.toLocaleString()}</strong>
+                    <span>Pending</span>
+                  </div>
+                  <div>
+                    <strong>{vendor.rejected.toLocaleString()}</strong>
+                    <span>Rejected</span>
+                  </div>
+                </div>
+                <div className="vendor-card-footer">
+                  <span>{vendor.activeSurveyors} Surveyors</span>
+                  <span>{vendor.supervisors} Supervisors</span>
+                  <span>{vendor.jurisdictions.join(", ")}</span>
+                </div>
+                <div className="vendor-card-action">
+                  <span>Explore analytics</span>
+                  <FaArrowRight />
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section className="analytics-grid">
+          <div className="analytics-panel glass-card">
+            <div className="section-header">
+              <h2>Daily eKYC Trend</h2>
+              <span className="badge success">Live index</span>
+            </div>
+            <ExecutiveLineChart data={dailyTrend} dataKey="completed" name="Completed" />
+          </div>
+
+          <div className="analytics-panel glass-card">
+            <div className="section-header">
+              <h2>Self vs Agency eKYC</h2>
+              <span className="badge info">Adoption</span>
+            </div>
+            <ExecutiveBarChart
+              data={selfVsAgency}
+              categories={[
+                { key: "agency", name: "Agency" },
+                { key: "citizen", name: "Citizen" },
+              ]}
+            />
+          </div>
+
+          <div className="analytics-panel glass-card">
+            <div className="section-header">
+              <h2>Pending vs Completed</h2>
+              <span className="badge warning">Operational pulse</span>
+            </div>
+            <ExecutivePieChart data={pendingVsCompleted} dataKey="completed" labelKey="label" />
+          </div>
+        </section>
+
+        <section className="zone-section">
+          <div className="section-header">
+            <div>
+              <h2>
+                <FaMapMarkedAlt /> Jurisdiction Performance
+              </h2>
+              <p>Top zones evaluated from the full agency dataset.</p>
+            </div>
+            <button className="secondary-button">Export Zone Data</button>
+          </div>
+
+          <div className="table-wrapper glass-card">
+            <table>
+              <thead>
+                <tr>
+                  <th>Agency</th>
+                  <th>Location</th>
+                  <th>District</th>
+                  <th>Assigned</th>
+                  <th>Agency eKYC</th>
+                  <th>Pending</th>
+                  <th>Progress</th>
+                </tr>
+              </thead>
+              <tbody>
+                {zoneRows.slice(0, 10).map((zone, index) => (
+                  <tr key={`${zone.agency}-${zone.location}-${index}`}>
+                    <td>{zone.agency}</td>
+                    <td>{zone.location}</td>
+                    <td>{zone.district || zone.cluster}</td>
+                    <td>{zone.activeDemand?.toLocaleString() ?? "—"}</td>
+                    <td>{zone.pppZones?.toLocaleString() ?? "—"}</td>
+                    <td>{zone.inactiveDemand?.toLocaleString() ?? "—"}</td>
+                    <td>
+                      <span className="status-badge success">
+                        {Math.min(100, Math.round(((zone.pppZones || 0) / Math.max(zone.activeDemand || 1, 1)) * 100))}%
+                      </span>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        <section className="bottom-grid">
+          <div className="alerts-panel glass-card">
+            <div className="section-header">
+              <h2>
+                <FaExclamationTriangle /> Critical Alerts
+              </h2>
+            </div>
+            <div className="alerts-list">
+              {alerts.map((alert) => (
+                <div key={alert} className="alert-card">
+                  <FaExclamationTriangle />
+                  <p>{alert}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="efficiency-panel glass-card">
+            <div className="section-header">
+              <h2>
+                <FaUserTie /> Workforce & Efficiency
+              </h2>
+            </div>
+            <div className="efficiency-grid">
+              <div className="efficiency-box">
+                <h3>48</h3>
+                <p>Supervisors Online</p>
+              </div>
+              <div className="efficiency-box">
+                <h3>168</h3>
+                <p>Surveyors Active</p>
+              </div>
+              <div className="efficiency-box">
+                <h3>{topKpis.todayEkyc?.toLocaleString()}</h3>
+                <p>eKYC Completed Today</p>
+              </div>
+              <div className="efficiency-box">
+                <h3>{topKpis.successRate}%</h3>
+                <p>Operational Efficiency</p>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+};
+
+export default CeoDashboard;

package/src/components/DesktopInbox.js

@@ -76,6 +76,14 @@ const DesktopInbox = ({ tableConfig, filterComponent, ...props }) => {
           return <span className={`ekyc-status-tag ${status}`}>{t(`${status}`)}</span>;
         },
       },
+      {
+        Header: t("EKYC_EKYC_STATUS"),
+        accessor: "ekycStatus",
+        Cell: ({ row }) => {
+          const ekycStatus = row.original?.ekycstatus || "NA";
+          return <span className={`ekyc-status-tag ${ekycStatus}`}>{t(`${ekycStatus}`)}</span>
+        }
+      },
       {
         Header: t("EKYC_ACTION"),
         accessor: "status",

package/src/components/EKYCCard.js

@@ -34,12 +34,16 @@ const EKYCCard = () => {
       // },
       {
         label: t("CEO_M.F_DOR_FINANCE_VIEW"),
-        link: `/digit-ui/employee/ekyc/ceo-dashboard`
+        link: `/digit-ui/employee/ekyc/ceo-dashboard`,
       },
       {
         label: t("EKYC_MAPPING"),
         link: `/digit-ui/employee/ekyc/mapping`,
       },
+      {
+        label: t("EKYC_ASSIGN"),
+        link: `/digit-ui/employee/ekyc/assign`,
+      },
     ],
   };
 

package/src/components/VendorDetails.jsx

@@ -0,0 +1,214 @@
+import React, { useMemo } from "react";
+import { useHistory, useParams } from "react-router-dom";
+import { FaArrowLeft, FaUsers, FaCheckCircle, FaClock, FaExclamationTriangle, FaMapMarkedAlt } from "react-icons/fa";
+import { ekycMockData } from "./mockData";
+import ExecutiveLineChart from "./analytics/charts/ExecutiveLineChart";
+import ExecutiveBarChart from "./analytics/charts/ExecutiveBarChart";
+import ExecutivePieChart from "./analytics/charts/ExecutivePieChart";
+
+const VendorDetails = () => {
+  const history = useHistory();
+  const { vendorId } = useParams();
+  const vendor = useMemo(() => ekycMockData.vendors.find((item) => item.id === Number(vendorId)), [vendorId]);
+
+  if (!vendor) {
+    return (
+      <div className="ekyc-dashboard-wrapper">
+        <div className="dashboard-shell">
+          <div className="detail-header">
+            <button className="back-button" onClick={() => history.goBack()}>
+              <FaArrowLeft /> Back
+            </button>
+          </div>
+          <div className="empty-state">
+            <h2>Vendor analytics not found</h2>
+            <p>The selected vendor does not exist in the current report. Please return to the dashboard.</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const zoneRows = vendor.zones.slice(0, 8);
+
+  const performanceData = vendor.dailyPerformance.map((row) => ({
+    day: row.day,
+    completed: row.completed,
+    pending: row.pending,
+    rejected: row.rejected,
+  }));
+
+  return (
+    <div className="ekyc-dashboard-wrapper">
+      <div className="dashboard-shell detail-shell">
+        <section className="kpi-grid detail-kpi-grid">
+          {[
+            {
+              label: "Assigned Connections",
+              value: vendor.assignedConnections,
+              icon: <FaUsers />,
+              variant: "primary",
+            },
+            {
+              label: "Agency eKYC",
+              value: vendor.completedEkyc,
+              icon: <FaCheckCircle />,
+              variant: "success",
+            },
+            {
+              label: "Self eKYC",
+              value: vendor.selfEkyc,
+              icon: <FaUsers />,
+              variant: "info",
+            },
+            {
+              label: "Pending",
+              value: vendor.pending,
+              icon: <FaClock />,
+              variant: "warning",
+            },
+            {
+              label: "Rejected",
+              value: vendor.rejected,
+              icon: <FaExclamationTriangle />,
+              variant: "danger",
+            },
+            {
+              label: "Success Rate",
+              value: `${vendor.successRate}%`,
+              icon: <FaCheckCircle />,
+              variant: "success",
+            },
+          ].map((item) => (
+            <article key={item.label} className={`kpi-card card-${item.variant}`}>
+              <div className="kpi-icon">{item.icon}</div>
+              <div>
+                <p className="kpi-title">{item.label}</p>
+                <h2>{item.value?.toLocaleString?.() ?? item.value}</h2>
+              </div>
+            </article>
+          ))}
+        </section>
+
+        <section className="analytics-grid detail-analytics-grid">
+          <div className="analytics-panel glass-card">
+            <div className="section-header">
+              <h2>Daily Completion Trend</h2>
+              <span className="badge success">Performance</span>
+            </div>
+            <ExecutiveLineChart data={performanceData} dataKey="completed" name="Completed" />
+          </div>
+
+          <div className="analytics-panel glass-card">
+            <div className="section-header">
+              <h2>Pending vs Completed</h2>
+              <span className="badge warning">Workload</span>
+            </div>
+            <ExecutiveBarChart
+              data={performanceData}
+              categories={[
+                { key: "completed", name: "Completed" },
+                { key: "pending", name: "Pending" },
+              ]}
+              xKey="day"
+            />
+          </div>
+
+          <div className="analytics-panel glass-card">
+            <div className="section-header">
+              <h2>Self vs Agency Split</h2>
+              <span className="badge info">Adoption</span>
+            </div>
+            <ExecutivePieChart
+              data={[
+                { label: "Agency eKYC", value: vendor.completedEkyc },
+                { label: "Citizen Self eKYC", value: vendor.selfEkyc },
+              ]}
+              dataKey="value"
+              labelKey="label"
+            />
+          </div>
+        </section>
+
+        <section className="zone-section detail-zone-section">
+          <div className="section-header">
+            <div>
+              <h2>
+                <FaMapMarkedAlt /> Zone-wise Jurisdiction Analytics
+              </h2>
+              <p>Drill into the current operational load and heatmap intensity for this vendor.</p>
+            </div>
+          </div>
+          <div className="table-wrapper glass-card">
+            <table>
+              <thead>
+                <tr>
+                  <th>Zone</th>
+                  <th>Cluster</th>
+                  <th>Assigned</th>
+                  <th>Agency eKYC</th>
+                  <th>Pending</th>
+                  <th>Activity Score</th>
+                </tr>
+              </thead>
+              <tbody>
+                {zoneRows.map((row, index) => (
+                  <tr key={`${row.location}-${index}`}>
+                    <td>{row.location}</td>
+                    <td>{row.cluster || row.district}</td>
+                    <td>{row.activeDemand?.toLocaleString() ?? "—"}</td>
+                    <td>{row.pppZones?.toLocaleString() ?? "—"}</td>
+                    <td>{row.inactiveDemand?.toLocaleString() ?? "—"}</td>
+                    <td>
+                      <span className={`status-badge ${row.intensityScore > 65 ? "danger" : row.intensityScore > 45 ? "warning" : "success"}`}>
+                        {row.intensityScore}%
+                      </span>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        <section className="bottom-grid detail-bottom-grid">
+          <div className="cards-summary glass-card">
+            <h2>Operational Efficiency</h2>
+            <div className="efficiency-grid">
+              <div className="efficiency-box">
+                <h3>{vendor.activeSurveyors}</h3>
+                <p>Active Surveyors</p>
+              </div>
+              <div className="efficiency-box">
+                <h3>{vendor.supervisors}</h3>
+                <p>Supervisors</p>
+              </div>
+              <div className="efficiency-box">
+                <h3>{vendor.progress}%</h3>
+                <p>Execution Rate</p>
+              </div>
+              <div className="efficiency-box">
+                <h3>{vendor.dailyPerformance.slice(-1)[0]?.completed?.toLocaleString()}</h3>
+                <p>Latest Day Completed</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="cards-summary glass-card">
+            <h2>Supervisor Pulse</h2>
+            <div className="pulse-list">
+              {vendor.jurisdictions.map((zone) => (
+                <div key={zone} className="pulse-row">
+                  <span>{zone}</span>
+                  <span>{Math.max(12, Math.round(Math.random() * 38))} active</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+};
+
+export default VendorDetails;

package/src/components/analytics/charts/ExecutiveBarChart.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip, CartesianGrid, Legend } from "recharts";
+
+const ExecutiveBarChart = ({ data = [], categories = [], xKey = "label" }) => {
+  return (
+    <div className="chart-card" style={{ minHeight: 320 }}>
+      <ResponsiveContainer width="100%" height={320}>
+        <BarChart data={data} margin={{ top: 12, right: 16, left: 0, bottom: 0 }}>
+          <CartesianGrid stroke="rgba(148, 163, 184, 0.12)" strokeDasharray="4 4" />
+          <XAxis dataKey={xKey} axisLine={false} tickLine={false} tick={{ fill: "#cbd5e1" }} />
+          <YAxis axisLine={false} tickLine={false} tick={{ fill: "#cbd5e1" }} />
+          <Tooltip contentStyle={{ background: "#0f172a", border: "none", borderRadius: 14 }} itemStyle={{ color: "#f8fafc" }} />
+          <Legend verticalAlign="top" align="right" iconType="circle" wrapperStyle={{ color: "#cbd5e1" }} />
+          {categories.map((series, index) => (
+            <Bar
+              key={series.key}
+              dataKey={series.key}
+              name={series.name}
+              fill={index === 0 ? "#34d399" : "#60a5fa"}
+              radius={[12, 12, 0, 0]}
+              barSize={24}
+            />
+          ))}
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};
+
+export default ExecutiveBarChart;