@djb25/digit-ui-module-ekyc 1.0.30 → 1.0.32

package/src/components/CeoDashboard.jsx

@@ -1,334 +0,0 @@
-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/ConnectionDetailsView.js

@@ -1,241 +0,0 @@
-import React, { useState } from "react";
-import { Loader, Modal, RadioButtons } from "@djb25/digit-ui-react-components";
-import { useTranslation } from "react-i18next";
-import { useHistory, useRouteMatch } from "react-router-dom";
-
-const ConnectionDetailsView = ({ kNumber, kName, connectionDetails, isLoading }) => {
-  const { t } = useTranslation();
-  const history = useHistory();
-  const { path } = useRouteMatch();
-
-  const [showModal, setShowModal] = useState(false);
-  const [selectedOption, setSelectedOption] = useState({ code: "SELF", name: "EKYC_SELF" });
-
-  const options = [
-    { code: "SELF", name: "EKYC_SELF" },
-    { code: "OTHER", name: "EKYC_OTHER" },
-  ];
-
-  const handleStartVerification = () => setShowModal(true);
-
-  const onModalConfirm = () => {
-    const parentPath = path.includes("/create-kyc")
-      ? path.replace("/create-kyc", "")
-      : path.replace("/k-details", "");
-    history.push(`${parentPath}/consumer-details`, { kNumber, selectedOption, connectionDetails });
-    setShowModal(false);
-  };
-
-  if (isLoading) return <Loader />;
-  if (!connectionDetails) return null;
-
-  const details = connectionDetails?.connectionDetails || {};
-  const statusFlag = details.statusflag || "";
-  const isActive = statusFlag?.toLowerCase() === "active" || statusFlag === "A";
-
-  return (
-    <React.Fragment>
-      <div className="ekyc-employee-container">
-        {/* Main Card */}
-        <div className="connection-details-card">
-          {/* Card Header */}
-          <div className="details-card-header">
-            <div className="header-title-wrapper">
-              <div className="header-icon-bg">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#3A7BD5" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-                  <circle cx="12" cy="7" r="4" />
-                </svg>
-              </div>
-              <span className="header-title-text">
-                {t("EKYC_K_NUMBER_DETAILS") || "Consumer Identity Details"}
-              </span>
-            </div>
-
-            {/* Status Badge */}
-            <span className={`status-badge ${isActive ? "active" : "inactive"}`}>
-              {isActive ? (t("EKYC_ACTIVE_CONNECTION") || "Active Connection") : (statusFlag || t("CS_NA"))}
-            </span>
-          </div>
-
-          {/* Card Body */}
-          <div className="details-card-body">
-            <div className="body-content-row">
-              {/* Left: Verification Parameters */}
-              <div className="detail-section">
-                <div className="section-title">
-                  {t("EKYC_VERIFICATION_PARAMETERS") || "Verification Parameters"}
-                </div>
-
-                <div className="data-grid">
-                  {/* Consumer Name */}
-                  <div className="data-item">
-                    <div className="data-label">
-                      {t("EKYC_CONSUMER_NAME") || "Consumer Name"}
-                    </div>
-                    <div className="data-value">
-                      {details.consumerName || kName || t("CS_NA")}
-                    </div>
-                  </div>
-
-                  {/* K Number */}
-                  <div className="data-item">
-                    <div className="data-label">
-                      {t("EKYC_K_NUMBER") || "K Number"}
-                    </div>
-                    <div className="data-value blue">
-                      {kNumber || t("CS_NA")}
-                    </div>
-                  </div>
-
-                  {/* Meter Serial No */}
-                  <div className="data-item">
-                    <div className="data-label">
-                      {t("EKYC_METER_NO") || "Meter Serial No."}
-                    </div>
-                    <div className="data-value">
-                      {details.meterNumber || t("CS_NA")}
-                    </div>
-                  </div>
-
-                  {/* Connection Type */}
-                  <div className="data-item">
-                    <div className="data-label">
-                      {t("EKYC_CONNECTION_TYPE") || "Connection Type"}
-                    </div>
-                    <div className="data-value">
-                      {details.connectionType || t("CS_NA")}
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Divider */}
-              <div className="vertical-divider" />
-
-              {/* Right: Address & Contact */}
-              <div className="detail-section">
-                <div className="section-title">
-                  {t("EKYC_ADDRESS_AND_CONTACT") || "Address & Contact"}
-                </div>
-
-                {/* Service Address */}
-                <div className="address-block">
-                  <div className="icon-wrapper-small">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6B7B8E" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                      <path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z" />
-                      <circle cx="12" cy="10" r="3" />
-                    </svg>
-                  </div>
-                  <div>
-                    <div className="data-label">
-                      {t("EKYC_ADDRESS") || "Service Address"}
-                    </div>
-                    <div className="address-text">
-                      {details.address || t("CS_NA")}
-                    </div>
-                  </div>
-                </div>
-
-                {/* Contact + Email row */}
-                <div className="contact-row">
-                  {/* Contact */}
-                  <div className="contact-item">
-                    <div className="icon-wrapper-small">
-                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6B7B8E" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                        <rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
-                        <line x1="12" y1="18" x2="12.01" y2="18" />
-                      </svg>
-                    </div>
-                    <div>
-                      <div className="data-label">
-                        {t("EKYC_PHONE_NO") || "Contact"}
-                      </div>
-                      <div className="address-text">
-                        {details.phoneNumber || t("CS_NA")}
-                      </div>
-                    </div>
-                  </div>
-
-                  {/* Email */}
-                  <div className="contact-item">
-                    <div className="icon-wrapper-small">
-                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6B7B8E" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                        <circle cx="12" cy="12" r="4" />
-                        <path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94" />
-                      </svg>
-                    </div>
-                    <div>
-                      <div className="data-label">
-                        {t("EKYC_EMAIL") || "Email Address"}
-                      </div>
-                      <div className="address-text">
-                        {details.email || t("CS_NA")}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Card Footer */}
-          <div className="details-card-footer">
-            {/* Last Verified */}
-            <div className="footer-meta-text">
-              {connectionDetails?.lastVerified
-                ? `${t("EKYC_LAST_VERIFIED") || "Last verified:"} ${connectionDetails.lastVerified}`
-                : ""}
-            </div>
-
-            {/* Action Buttons */}
-            <div className="action-btns-container" style={{ fontSize: "12px" }}>
-              <button
-                onClick={handleStartVerification}
-                className="primary-action-btn"
-                style={{ fontSize: "12px" }}
-              >
-                {t("EKYC_START_REVIEW") || "Start Review"}
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                  <line x1="5" y1="12" x2="19" y2="12" />
-                  <polyline points="12 5 19 12 12 19" />
-                </svg>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Modal */}
-      {showModal && (
-        <Modal
-          headerBarMain={t("EKYC_SELECT_VERIFICATION_TYPE")}
-          headerBarEnd={
-            <span onClick={() => setShowModal(false)} style={{ cursor: "pointer", padding: "8px" }}>
-              X
-            </span>
-          }
-          actionSaveLabel={t("ES_COMMON_CONFIRM")}
-          actionSaveOnSubmit={onModalConfirm}
-          actionCancelLabel={t("ES_COMMON_CANCEL")}
-          actionCancelOnSubmit={() => setShowModal(false)}
-          style={{ borderRadius: "12px" }}
-        >
-          <div style={{ padding: "24px" }}>
-            <RadioButtons
-              name="verificationType"
-              options={options}
-              optionsKey="name"
-              selectedOption={selectedOption}
-              onSelect={setSelectedOption}
-              style={{ display: "flex", flexDirection: "column", gap: "12px", buttonStyle: { borderRadius: "5px" } }}
-              t={t}
-            />
-          </div>
-        </Modal>
-      )}
-    </React.Fragment>
-  );
-};
-
-export default ConnectionDetailsView;

package/src/components/Dashboard.js

@@ -1,43 +0,0 @@
-import React, { useMemo } from "react";
-import StatusCards from "./StatusCards";
-import { Card, Loader } from "@djb25/digit-ui-react-components";
-
-// Mock data removed in favor of API integration
-
-const Dashboard = () => {
-  const tenantId = Digit.ULBService.getCurrentTenantId();
-
-  // 2. API Data Fetching
-  const { isLoading, data: dashboardData } = Digit.Hooks.ekyc.useEkycSurveyorDashboard(
-    {},
-    {
-      tenantId,
-      offset: 0,
-      limit: 10,
-    },
-    {
-      enabled: !!tenantId,
-    }
-  );
-
-  const countData = useMemo(() => {
-    const info = dashboardData?.dashboardInfo || {};
-    return {
-      total: info.total || 0,
-      completed: info.completed || 0,
-      pending: info.pending || 0,
-      rejected: info.rejected || 0,
-      active: info.active || 0,
-    };
-  }, [dashboardData]);
-
-  return isLoading ? (
-    <Loader />
-  ) : (
-    <Card className="min-width-full">
-      <StatusCards countData={countData} />
-    </Card>
-  );
-};
-
-export default Dashboard;