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

package/src/components/SurveyorDetailsCard.js

@@ -0,0 +1,282 @@
+import React, { useMemo, useState } from "react";
+import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip, CartesianGrid, PieChart, Pie, Cell, Legend } from "recharts";
+
+import { Card, SubmitBar, ActionBar, Menu, Loader, Table } from "@djb25/digit-ui-react-components";
+
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+
+import AssignEkycModal from "./AssignEkycModal";
+
+const SurveyorDetailsDashboard = () => {
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+
+  const [showModal, setShowModal] = useState(false);
+  const [showOptions, setShowOptions] = useState(false);
+
+  const { id: surveyorId } = useParams();
+  const ownerIds = Digit.SessionStorage.get("User")?.info?.uuid;
+
+  const { t } = useTranslation();
+
+  const searchParams = surveyorId ? { ids: surveyorId } : { ownerIds };
+
+  const { data: surveyorSearchResponse, isLoading } = Digit.Hooks.fsm.useSurveyorSearch(tenantId, searchParams, { staleTime: Infinity });
+
+  const roles = Digit.SessionStorage.get("User")?.info?.roles.map((ele) => ele.code);
+
+  const surveyor = useMemo(() => {
+    return surveyorSearchResponse?.surveyors?.[0] || null;
+  }, [surveyorSearchResponse]);
+
+  const knoColumns = React.useMemo(
+    () => [
+      {
+        Header: t("KNO"),
+        accessor: "kno",
+      },
+      {
+        Header: t("CONSUMER_NAME"),
+        accessor: "consumerName",
+      },
+      {
+        Header: t("MOBILE_NO"),
+        accessor: "mobileNumber",
+      },
+      {
+        Header: t("STATUS"),
+        accessor: "status",
+        Cell: ({ value }) => <span className={`status-badge ${value?.toLowerCase() || ""}`}>{value}</span>,
+      },
+      {
+        Header: t("ASSIGNED_DATE"),
+        accessor: "assignedDate",
+      },
+      {
+        Header: t("COMPLETED_DATE"),
+        accessor: "completedDate",
+      },
+    ],
+    [t]
+  );
+
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  if (!surveyor) {
+    return (
+      <Card>
+        <div style={{ padding: "24px" }}>{t("NO_SURVEYOR_FOUND")}</div>
+      </Card>
+    );
+  }
+  const assignedKnos = [
+    {
+      kno: "123456789",
+      consumerName: "Rahul Sharma",
+      mobileNumber: "9876543210",
+      status: "Completed",
+      assignedDate: "01-06-2026",
+      completedDate: "02-06-2026",
+    },
+    {
+      kno: "123456790",
+      consumerName: "Amit Kumar",
+      mobileNumber: "9876543211",
+      status: "Pending",
+      assignedDate: "03-06-2026",
+      completedDate: "-",
+    },
+  ];
+
+  const weeklyData = [
+    { day: "Mon", completed: 4 },
+    { day: "Tue", completed: 6 },
+    { day: "Wed", completed: 3 },
+    { day: "Thu", completed: 8 },
+    { day: "Fri", completed: 5 },
+    { day: "Sat", completed: 7 },
+    { day: "Sun", completed: 2 },
+  ];
+
+  const statusData = [
+    {
+      name: "Completed",
+      value: surveyor?.completedCases || 0,
+      color: "#10B981",
+    },
+    {
+      name: "Pending",
+      value: surveyor?.pendingCases || 0,
+      color: "#F59E0B",
+    },
+    {
+      name: "Rejected",
+      value: surveyor?.rejectedCases || 0,
+      color: "#EF4444",
+    },
+  ];
+
+  const StatCard = ({ title, value, type }) => (
+    <div className={`stat-card ${type}`}>
+      <div className="stat-title">{title}</div>
+
+      <div className="stat-value">{value}</div>
+    </div>
+  );
+
+  const options = [{ action: "Assign" }];
+
+  const fullName = surveyor?.owner?.name || surveyor?.name || "N/A";
+
+  const employeeId = surveyor?.employeeId || surveyor?.owner?.uuid || surveyor?.id;
+
+  const handleMenuSelect = (option) => {
+    setShowOptions(false); // close menu
+    setShowModal(true);
+  };
+
+  return (
+    <Card className="surveyor-dashboard">
+      {/* Header */}
+      <div className="ekyc-dashboard-section">
+        <div className="ekyc-dashboard-header">
+          <div className="avatar">{fullName?.charAt(0)?.toUpperCase()}</div>
+
+          <div className="header-content">
+            <h2 className="name">{fullName}</h2>
+
+            <div className="designation">{surveyor?.description || t("FIELD_SURVEYOR")}</div>
+
+            <div className="employee-id">
+              {t("EMPLOYEE_ID")}: {employeeId}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Stats */}
+      <div className="stats-wrapper">
+        <StatCard title={t("TODAYS_EKYC")} value={surveyor?.todayCompleted || 0} type="today" />
+
+        <StatCard title={t("THIS_WEEK")} value={surveyor?.weekCompleted || 0} type="week" />
+
+        <StatCard title={t("THIS_MONTH")} value={surveyor?.monthCompleted || 0} type="month" />
+
+        <StatCard title={t("PENDING_CASES")} value={surveyor?.pendingCases || 0} type="pending" />
+      </div>
+
+      {/* Charts */}
+      <div className="charts-wrapper">
+        {/* Weekly Chart */}
+        <div className="chart-card">
+          <h3 className="chart-title">{t("WEEKLY_SURVEY_PROGRESS")}</h3>
+
+          <ResponsiveContainer width="100%" height={300}>
+            <BarChart data={weeklyData}>
+              <CartesianGrid strokeDasharray="3 3" />
+
+              <XAxis dataKey="day" />
+
+              <YAxis />
+
+              <Tooltip />
+
+              <Bar dataKey="completed" fill="#0B2559" radius={[6, 6, 0, 0]} />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+
+        {/* Pie Chart */}
+        <div className="chart-card">
+          <h3 className="chart-title">{t("CASE_DISTRIBUTION")}</h3>
+
+          <ResponsiveContainer width="100%" height={300}>
+            <PieChart>
+              <Pie data={statusData} dataKey="value" nameKey="name" outerRadius={90} label>
+                {statusData.map((entry, index) => (
+                  <Cell key={index} fill={entry.color} />
+                ))}
+              </Pie>
+
+              <Tooltip />
+
+              <Legend />
+            </PieChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+
+      {/* Details */}
+      <div className="ekyc-dashboard-section">
+        <div className="details-grid">
+          <div className="detail-item">
+            <span className="label">{t("MOBILE")}:</span>
+            <span className="value">{surveyor?.owner?.mobileNumber || surveyor?.mobileNo || "N/A"}</span>
+          </div>
+
+          <div className="detail-item">
+            <span className="label">{t("EMAIL")}:</span>
+            <span className="value">{surveyor?.owner?.emailId || "N/A"}</span>
+          </div>
+
+          <div className="detail-item">
+            <span className="label">{t("GENDER")}:</span>
+            <span className="value">{surveyor?.owner?.gender || "N/A"}</span>
+          </div>
+
+          <div className="detail-item">
+            <span className="label">{t("STATUS")}:</span>
+            <span className="value">{surveyor?.status || "N/A"}</span>
+          </div>
+
+          <div className="detail-item">
+            <span className="label">{t("SERVICE_TYPE")}:</span>
+            <span className="value">{surveyor?.additionalDetails?.serviceType || "N/A"}</span>
+          </div>
+
+          <div className="detail-item">
+            <span className="label">{t("VENDOR_ID")}:</span>
+            <span className="value">{surveyor?.vendorId || "N/A"}</span>
+          </div>
+        </div>
+      </div>
+
+      <Table
+        t={t}
+        tableTitle={t("ASSIGNED_KNOS")}
+        data={assignedKnos}
+        columns={knoColumns}
+        totalRecords={assignedKnos?.length}
+        isPaginationRequired={true}
+        pageSizeLimit={10}
+        manualPagination={false}
+      />
+
+      {/* Actions */}
+      {(!roles.includes("EKYC_SURVEYOR") || roles.includes("EMPLOYEE")) && (
+        <ActionBar>
+          <SubmitBar label={t("EKYC_ASSIGN_KNOS")} onSubmit={() => setShowOptions((prev) => !prev)} />
+
+          {showOptions && (
+            <Menu
+              options={options}
+              optionKey={"action"}
+              t={t}
+              onSelect={handleMenuSelect}
+              style={{
+                color: "#FFFFFF",
+                fontSize: "18px",
+              }}
+            />
+          )}
+        </ActionBar>
+      )}
+
+      {showModal && <AssignEkycModal surveyor={surveyor} closeModal={() => setShowModal(false)} />}
+    </Card>
+  );
+};
+
+export default SurveyorDetailsDashboard;

package/src/components/VendorDetails.jsx

@@ -0,0 +1,231 @@
+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";
+import { Loader } from "@djb25/digit-ui-react-components";
+
+const VendorDetails = () => {
+  const history = useHistory();
+  const { vendorId = 1 } = useParams();
+  const vendor = useMemo(() => ekycMockData.vendors.find((item) => item.id === Number(vendorId)), [vendorId]);
+
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+  const { isLoading, data: dashboardData } = Digit.Hooks.ekyc.useEkycSurveyorDashboard(
+    {},
+    {
+      tenantId,
+      offset: 0,
+      limit: 10,
+    },
+    {
+      enabled: !!tenantId,
+    }
+  );
+
+  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,
+  }));
+
+  console.log(dashboardData);
+  if (isLoading) <Loader />;
+
+  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;

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

@@ -0,0 +1,159 @@
+// import React from "react";
+// import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid, Legend } from "recharts";
+
+// const ExecutiveLineChart = ({ data = [], dataKey = "completed", name = "Value" }) => {
+//   return (
+//     <div className="chart-card" style={{ minHeight: 320 }}>
+//       <ResponsiveContainer width="100%" height={320}>
+//         <LineChart data={data} margin={{ top: 12, right: 16, left: 0, bottom: 0 }}>
+//           <CartesianGrid stroke="rgba(148, 163, 184, 0.12)" strokeDasharray="4 4" />
+//           <XAxis dataKey="label" axisLine={false} tickLine={false} tick={{ fill: "#cbd5e1" }} />
+//           <YAxis axisLine={false} tickLine={false} tick={{ fill: "#cbd5e1" }} />
+//           <Tooltip contentStyle={{ background: "#0f172a", border: "none", borderRadius: 14, color: "#f8fafc" }} itemStyle={{ color: "#f8fafc" }} />
+//           <Legend verticalAlign="top" align="right" iconType="circle" wrapperStyle={{ color: "#cbd5e1" }} />
+//           <Line
+//             type="monotone"
+//             dataKey={dataKey}
+//             name={name}
+//             stroke="#38bdf8"
+//             strokeWidth={3}
+//             dot={{ r: 4 }}
+//             activeDot={{ r: 6, strokeWidth: 2, fill: "#60a5fa" }}
+//           />
+//         </LineChart>
+//       </ResponsiveContainer>
+//     </div>
+//   );
+// };
+
+// export default ExecutiveLineChart;
+
+import React from "react";
+import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid, Legend } from "recharts";
+
+const ExecutiveLineChart = ({ data = [] }) => {
+  const formattedData = data.map((item) => ({
+    ...item,
+
+    agencyKyc: item.completed || 0,
+
+    selfKyc: Math.round((item.completed || 0) * 0.42),
+
+    totalKyc: (item.completed || 0) + Math.round((item.completed || 0) * 0.42),
+  }));
+
+  return (
+    <div className="chart-card executive-line-chart">
+      <ResponsiveContainer width="100%" height={340}>
+        <LineChart
+          data={formattedData}
+          margin={{
+            top: 20,
+            right: 12,
+            left: 0,
+            bottom: 0,
+          }}
+        >
+          <CartesianGrid stroke="#e2e8f0" strokeDasharray="3 3" vertical={false} />
+
+          <XAxis
+            dataKey="label"
+            axisLine={false}
+            tickLine={false}
+            tick={{
+              fill: "#64748b",
+              fontSize: 12,
+              fontWeight: 600,
+            }}
+          />
+
+          <YAxis
+            axisLine={false}
+            tickLine={false}
+            tick={{
+              fill: "#64748b",
+              fontSize: 12,
+            }}
+          />
+
+          <Tooltip
+            cursor={{
+              stroke: "#cbd5e1",
+              strokeWidth: 1,
+            }}
+            contentStyle={{
+              background: "#ffffff",
+              border: "1px solid #e2e8f0",
+              borderRadius: 18,
+              boxShadow: "0 10px 30px rgba(15,23,42,0.08)",
+            }}
+            labelStyle={{
+              color: "#0f172a",
+              fontWeight: 700,
+              marginBottom: 10,
+            }}
+          />
+
+          <Legend
+            verticalAlign="top"
+            align="right"
+            iconType="circle"
+            wrapperStyle={{
+              paddingBottom: 18,
+              color: "#475569",
+              fontWeight: 600,
+            }}
+          />
+
+          {/* TOTAL */}
+
+          <Line
+            type="monotone"
+            dataKey="totalKyc"
+            name="Total eKYC"
+            stroke="#0f172a"
+            strokeWidth={4}
+            dot={false}
+            activeDot={{
+              r: 6,
+            }}
+          />
+
+          {/* AGENCY */}
+
+          <Line
+            type="monotone"
+            dataKey="agencyKyc"
+            name="Agency eKYC"
+            stroke="#3b82f6"
+            strokeWidth={3}
+            dot={{
+              r: 3,
+            }}
+            activeDot={{
+              r: 6,
+            }}
+          />
+
+          {/* SELF */}
+
+          <Line
+            type="monotone"
+            dataKey="selfKyc"
+            name="Self eKYC"
+            stroke="#10b981"
+            strokeWidth={3}
+            dot={{
+              r: 3,
+            }}
+            activeDot={{
+              r: 6,
+            }}
+          />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};
+
+export default ExecutiveLineChart;