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

package/src/components/VendorDetails.jsx

@@ -1,230 +0,0 @@
-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,
-  }));
-
-  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/ClusterHeatmap.js

@@ -1,88 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-
-/**
- * Custom SVG-based Heatmap component for Cluster Workload monitoring.
- */
-const ClusterHeatmap = ({ data, title, onDrillDown }) => {
-  const { t } = useTranslation();
-
-  if (!data || data.length === 0) return null;
-
-  const getIntensityColor = (score) => {
-    if (score > 80) return "#EF4444"; // High - Red
-    if (score > 50) return "#F59E0B"; // Medium - Amber
-    return "#10B981"; // Low - Emerald
-  };
-
-  return (
-    <div className="cluster-heatmap-container glass-card" style={{ padding: "28px" }}>
-      {title && <h3 className="chart-title" style={{ marginBottom: "28px", fontSize: "18px", fontWeight: "800", color: "#111827", letterSpacing: "-0.025em" }}>{t(title)}</h3>}
-      <div className="heatmap-grid" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))", gap: "20px" }}>
-        {data.map((cluster) => (
-          <div 
-            key={cluster.clusterId} 
-            className="heatmap-card glass-card" 
-            onClick={() => onDrillDown?.(cluster)}
-            style={{
-              padding: "20px",
-              background: "#FFFFFF",
-              border: `1px solid ${getIntensityColor(cluster.intensityScore)}40`,
-              cursor: "pointer",
-              position: "relative",
-              overflow: "hidden"
-            }}
-          >
-            <div className="intensity-bar" style={{ 
-              position: "absolute", 
-              top: 0, 
-              left: 0, 
-              height: "4px", 
-              width: "100%", 
-              background: getIntensityColor(cluster.intensityScore) 
-            }} />
-            
-            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "12px" }}>
-              <span style={{ fontWeight: "600", fontSize: "14px", color: "#374151" }}>{cluster.clusterName}</span>
-              <span style={{ 
-                fontSize: "12px", 
-                fontWeight: "700", 
-                padding: "2px 8px", 
-                borderRadius: "12px", 
-                background: `${getIntensityColor(cluster.intensityScore)}20`, 
-                color: getIntensityColor(cluster.intensityScore) 
-              }}>
-                {cluster.intensityScore}%
-              </span>
-            </div>
-
-            <div className="cluster-stats" style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
-              <div style={{ display: "flex", justifyContent: "space-between", fontSize: "12px" }}>
-                <span style={{ color: "#6B7280" }}>{t("EKYC_PENDING_WORKLOAD")}</span>
-                <span style={{ fontWeight: "600", color: "#1F2937" }}>{cluster.pendingWorkload}</span>
-              </div>
-              <div style={{ display: "flex", justifyContent: "space-between", fontSize: "12px" }}>
-                <span style={{ color: "#6B7280" }}>{t("EKYC_ACTIVE_AGENCIES")}</span>
-                <span style={{ fontWeight: "600", color: "#1F2937" }}>{cluster.activeAgencies}</span>
-              </div>
-            </div>
-
-            <div className="mini-spark" style={{ marginTop: "12px", display: "flex", gap: "2px", alignItems: "flex-end", height: "20px" }}>
-              {cluster.wards.map((ward, idx) => (
-                <div key={idx} style={{ 
-                  flex: 1, 
-                  height: `${Math.min(100, (ward.pendingCount / cluster.pendingWorkload) * 100)}%`, 
-                  background: getIntensityColor(cluster.intensityScore),
-                  opacity: 0.6,
-                  borderRadius: "1px"
-                }} />
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default ClusterHeatmap;

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

@@ -1,30 +0,0 @@
-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

@@ -1,159 +0,0 @@
-// 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;

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

@@ -1,24 +0,0 @@
-import React from "react";
-import { ResponsiveContainer, PieChart, Pie, Cell, Tooltip, Legend } from "recharts";
-
-const colors = ["#22c55e", "#38bdf8", "#f97316", "#facc15", "#f43f5e"];
-
-const ExecutivePieChart = ({ data = [], dataKey = "value", labelKey = "label" }) => {
-  return (
-    <div className="chart-card" style={{ minHeight: 320 }}>
-      <ResponsiveContainer width="100%" height={320}>
-        <PieChart>
-          <Pie data={data} dataKey={dataKey} nameKey={labelKey} cx="50%" cy="50%" outerRadius={110} innerRadius={60} paddingAngle={3} label={{ fill: "#f8fafc", fontSize: 12 }}>
-            {data.map((entry, index) => (
-              <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
-            ))}
-          </Pie>
-          <Tooltip contentStyle={{ background: "#0f172a", border: "none", borderRadius: 14, color: "#f8fafc" }} />
-          <Legend verticalAlign="bottom" align="center" iconType="circle" wrapperStyle={{ color: "#cbd5e1", marginTop: 10 }} />
-        </PieChart>
-      </ResponsiveContainer>
-    </div>
-  );
-};
-
-export default ExecutivePieChart;

package/src/components/analytics/charts/TaskStatusChart.js

@@ -1,90 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import { useTranslation } from "react-i18next";
-import Chart from "chart.js/auto";
-
-const TaskStatusChart = ({ data, title }) => {
-  const { t } = useTranslation();
-  const chartRef = useRef(null);
-  const chartInstance = useRef(null);
-
-  useEffect(() => {
-    if (chartRef.current && data) {
-      if (chartInstance.current) chartInstance.current.destroy();
-      const ctx = chartRef.current.getContext("2d");
-      
-      // Create vibrant gradients
-      const gradientBlue = ctx.createLinearGradient(0, 0, 0, 400);
-      gradientBlue.addColorStop(0, '#3B82F6');
-      gradientBlue.addColorStop(1, '#2563EB');
-
-      const gradientAmber = ctx.createLinearGradient(0, 0, 0, 400);
-      gradientAmber.addColorStop(0, '#F59E0B');
-      gradientAmber.addColorStop(1, '#D97706');
-
-      const gradientIndigo = ctx.createLinearGradient(0, 0, 0, 400);
-      gradientIndigo.addColorStop(0, '#6366F1');
-      gradientIndigo.addColorStop(1, '#4F46E5');
-
-      const gradientEmerald = ctx.createLinearGradient(0, 0, 0, 400);
-      gradientEmerald.addColorStop(0, '#10B981');
-      gradientEmerald.addColorStop(1, '#059669');
-
-      const colors = [gradientBlue, gradientAmber, gradientIndigo, gradientEmerald, '#EC4899', '#EF4444'];
-
-      const labels = data.map(item => t(item.stageName));
-      const values = data.map(item => item.count);
-
-      const ChartConstructor = Chart.Chart || Chart;
-      chartInstance.current = new ChartConstructor(ctx, {
-        type: "doughnut",
-        data: {
-          labels,
-          datasets: [
-            {
-              data: values,
-              backgroundColor: colors.slice(0, labels.length),
-              borderWidth: 2,
-              borderColor: "#ffffff",
-              hoverOffset: 10
-            }
-          ]
-        },
-        options: {
-          responsive: true,
-          maintainAspectRatio: false,
-          cutout: '70%',
-          plugins: {
-            legend: {
-              position: 'right',
-              labels: {
-                usePointStyle: true,
-                padding: 15,
-                font: { size: 12 }
-              }
-            },
-            tooltip: {
-              backgroundColor: '#1F2937',
-              padding: 10,
-              bodyFont: { size: 13 }
-            }
-          }
-        }
-      });
-    }
-
-    return () => {
-      if (chartInstance.current) chartInstance.current.destroy();
-    };
-  }, [data, t]);
-
-  return (
-    <div className="task-status-chart-container glass-card" style={{ height: "320px", width: "100%", padding: "24px" }}>
-      {title && <h3 className="chart-title" style={{ marginBottom: "24px", fontSize: "18px", fontWeight: "700", color: "#111827" }}>{t(title)}</h3>}
-      <div style={{ height: "220px" }}>
-        <canvas ref={chartRef} />
-      </div>
-    </div>
-  );
-};
-
-export default TaskStatusChart;