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

package/src/components/AssignEkycModal.js

@@ -1,446 +0,0 @@
-import React, { useMemo, useState, useEffect } from "react";
-import { Modal, Close, Table, Toast } from "@djb25/digit-ui-react-components";
-import { useTranslation } from "react-i18next";
-
-const AssignEkycModal = ({ surveyor, closeModal, refetchDashboard }) => {
-  const { t } = useTranslation();
-  const [selectedKnos, setSelectedKnos] = useState([]);
-  const [isBulkSelection, setIsBulkSelection] = useState(false);
-  const [currentPage, setCurrentPage] = useState(0);
-  const [pageSize, setPageSize] = useState(10);
-  const [showToast, setShowToast] = useState(false);
-  const [toastData, setToastData] = useState({
-    error: false,
-    label: "",
-  });
-  const [filters, setFilters] = useState({
-    kno: "", // search value
-    pincode: "",
-    zoneCode: "",
-    zoneName: "",
-    ward: "",
-    assembly: "",
-    mrkey: "",
-    ekycStatus: "",
-  });
-
-  const [debouncedFilters, setDebouncedFilters] = useState(filters);
-
-  const { data: zroLocationsData, isLoading: isZroLoading } = Digit.Hooks.ws.useWSConfigMDMS.ZROLocation("dl.djb");
-  const mappedZROLocation = useMemo(() => {
-    return (zroLocationsData || []).map((item) => ({
-      code: item.code,
-      name: item.name,
-    }));
-  }, [zroLocationsData]);
-
-  const { data: egovLocationData } = Digit.Hooks.useCommonMDMS("dl.djb", "egov-location", ["TenantBoundary"]);
-
-  const boundaryData = useMemo(() => {
-    const tenantBoundary = egovLocationData?.["egov-location"]?.TenantBoundary || [];
-    const revenueData = tenantBoundary.find((item) => item?.hierarchyType?.code === "REVENUE");
-    const boundary = revenueData?.boundary || [];
-    return Array.isArray(boundary) ? boundary : [boundary];
-  }, [egovLocationData]);
-
-  const { assemblyOptions, wardOptions } = useMemo(() => {
-    const assemblies = new Map();
-    const wards = new Map();
-
-    const boundaries = Array.isArray(boundaryData) ? boundaryData : boundaryData ? [boundaryData] : [];
-
-    const traverse = (node) => {
-      if (!node) return;
-      if (node.label === "Ward" || node.label === "WARD" || node.label === "Block" || node.label === "BLOCK") {
-        const code = node.code || node.localname || node.name;
-        const name = node.name || node.localname || code;
-        if (code) wards.set(code, { code, name: name });
-      }
-      if (node.label === "Assembly Constituency" || node.label === "ASSEMBLY_CONSTITUENCY") {
-        const code = node.code || node.localname || node.name;
-        const name = node.name || node.localname || code;
-        if (code) assemblies.set(code, { code, name: name });
-      }
-      if (node.children && node.children.length > 0) {
-        node.children.forEach(traverse);
-      }
-    };
-
-    boundaries.forEach(traverse);
-
-    return {
-      assemblyOptions: Array.from(assemblies.values()).sort((a, b) => a.name.localeCompare(b.name)),
-      wardOptions: Array.from(wards.values()).sort((a, b) => a.name.localeCompare(b.name)),
-    };
-  }, [boundaryData]);
-
-  const structuredLocalityData = useMemo(() => {
-    let localities = [];
-    const boundaries = Array.isArray(boundaryData) ? boundaryData : boundaryData ? [boundaryData] : [];
-
-    const extractLocalities = (node) => {
-      if (!node) return;
-
-      if (node.label === "Locality" || node.label === "LOCALITY") {
-        localities.push({
-          ...node,
-          name: node.localname || node.name || node.code,
-        });
-      }
-      if (node.children && node.children.length > 0) {
-        node.children.forEach((child) => extractLocalities(child));
-      }
-    };
-
-    boundaries.forEach((rootNode) => extractLocalities(rootNode));
-
-    return localities;
-  }, [boundaryData]);
-
-  const fetchedPincodes = useMemo(() => {
-    const pinSet = new Set();
-
-    structuredLocalityData.forEach((loc) => {
-      if (loc.pincode) {
-        const pins = Array.isArray(loc.pincode) ? loc.pincode : [loc.pincode];
-        pins.forEach((p) => {
-          if (p) {
-            const sanitizedPin = p.toString().split(".")[0];
-            pinSet.add(sanitizedPin);
-          }
-        });
-      }
-    });
-
-    return Array.from(pinSet).sort();
-  }, [structuredLocalityData]);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setDebouncedFilters(filters);
-    }, 500);
-
-    return () => clearTimeout(timer);
-  }, [filters]);
-
-  useEffect(() => {
-    setCurrentPage(0);
-  }, [debouncedFilters, filters.kno]);
-
-  const { data: applicationData, isFetching: isLoading } = Digit.Hooks.ekyc.useEkycApplicationList(
-    {
-      /*
-      ...(debouncedFilters.kno && {
-        kno: debouncedFilters.kno,
-      }),
-      */
-      ...(filters.kno && {
-        kno: filters.kno,
-      }),
-
-      ...(debouncedFilters.ekycStatus && {
-        ekycStatus: debouncedFilters.ekycStatus,
-      }),
-
-      ...(debouncedFilters.zoneName && {
-        zoneName: debouncedFilters.zoneName,
-      }),
-
-      ...(debouncedFilters.assembly && {
-        assembly: debouncedFilters.assembly,
-      }),
-
-      ...(debouncedFilters.ward && {
-        ward: debouncedFilters.ward,
-      }),
-
-      ...(debouncedFilters.mrkey && {
-        mrkey: debouncedFilters.mrkey,
-      }),
-
-      ...(debouncedFilters.pincode && {
-        pincode: debouncedFilters.pincode,
-      }),
-    },
-    {
-      tenantId: "dl.djb",
-      offset: currentPage * pageSize,
-      limit: pageSize,
-    },
-    {
-      keepPreviousData: true,
-    }
-  );
-
-  const assignmentMutation = Digit.Hooks.ekyc.useEkycAssignmentCreate({
-    onSuccess: (response) => {
-      if (response?.error) {
-        setToastData({
-          error: true,
-          label: response?.data?.message || "Something went wrong",
-        });
-
-        setShowToast(true);
-        return;
-      }
-
-      setToastData({
-        error: false,
-        label: "Assignment successful",
-      });
-
-      setShowToast(true);
-
-      // optional delay so user can see the success toast
-      setTimeout(async () => {
-        await refetchDashboard();
-        closeModal();
-      }, 1000);
-    },
-
-    onError: (error) => {
-      setToastData({
-        error: true,
-        label: error?.data?.message || error?.response?.data?.message || "Something went wrong",
-      });
-
-      setShowToast(true);
-    },
-  });
-
-  const tableData = applicationData?.consumerList || [];
-
-  const getAssignmentPayload = () => {
-    if (isBulkSelection) {
-      const filterMappings = [
-        { key: "ekycStatus", type: "EKYCSTATUS" },
-        { key: "zoneName", type: "ZONENAME" },
-        { key: "assembly", type: "ASSEMBLY" },
-        { key: "ward", type: "WARD" },
-        { key: "mrkey", type: "MRKEY" },
-        { key: "pincode", type: "PINCODE" },
-      ];
-
-      const appliedFilter = filterMappings.find(({ key }) => debouncedFilters[key]);
-
-      if (appliedFilter) {
-        return {
-          assignmentType: appliedFilter.type,
-          assignmentValue: debouncedFilters[appliedFilter.key],
-        };
-      }
-    }
-
-    return {
-      assignmentType: "KNO",
-      assignmentValue: selectedKnos,
-    };
-  };
-
-  const handleAssign = () => {
-    const { assignmentType, assignmentValue } = getAssignmentPayload();
-
-    assignmentMutation.mutate({
-      tenantId: "dl.djb",
-      surveyorId: surveyor?.owner?.uuid,
-      assignmentType,
-      assignmentValue,
-    });
-  };
-
-  const handleSelectAll = () => {
-    setIsBulkSelection(true);
-
-    const pageKnos = tableData.map((item) => item.kno);
-
-    const allSelected = pageKnos.length > 0 && pageKnos.every((kno) => selectedKnos.includes(kno));
-
-    setSelectedKnos((prev) => (allSelected ? prev.filter((kno) => !pageKnos.includes(kno)) : [...new Set([...prev, ...pageKnos])]));
-  };
-
-  const handleFilterChange = (key, value) => {
-    setFilters((prev) => ({
-      ...prev,
-      [key]: value,
-    }));
-  };
-
-  const columns = useMemo(
-    () => [
-      {
-        Header: () => (
-          <input
-            type="checkbox"
-            checked={tableData.length > 0 && tableData.every((item) => selectedKnos.includes(item.kno))}
-            onChange={handleSelectAll}
-          />
-        ),
-        id: "selection",
-        Cell: ({ row }) => {
-          const kno = row.original.kno;
-
-          return <input type="checkbox" checked={selectedKnos.includes(kno)} onChange={() => handleSelect(kno)} />;
-        },
-      },
-      {
-        Header: "KNO",
-        accessor: "kno",
-      },
-      {
-        Header: "Consumer Name",
-        accessor: (row) => `${row.firstName || ""} ${row.middleName || ""} ${row.lastName || ""}`.trim(),
-        id: "consumerName",
-      },
-      {
-        Header: "Zone",
-        accessor: "zoneName",
-      },
-      {
-        Header: "Pincode",
-        accessor: "pincode",
-      },
-      {
-        Header: "Status",
-        accessor: "status",
-        Cell: ({ value }) => (
-          <span className={`status-badge ${value === "ACTIVE" ? "verified" : value === "PENDING" ? "pending" : "assigned"}`}>{value}</span>
-        ),
-      },
-      {
-        Header: "eKYC Status",
-        accessor: "ekycStatus",
-        Cell: ({ value }) => value || "-",
-      },
-    ],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [selectedKnos, tableData]
-  );
-
-  const handleSelect = (kno) => {
-    setSelectedKnos((prev) => (prev.includes(kno) ? prev.filter((item) => item !== kno) : [...prev, kno]));
-  };
-
-  return (
-    <Modal
-      headerBarMain={`Assign KNOs to ${surveyor?.name}`}
-      headerBarEnd={<Close onClick={closeModal} />}
-      actionCancelLabel="Cancel"
-      actionCancelOnSubmit={closeModal}
-      actionSaveLabel={`Assign ${selectedKnos.length} KNOs`}
-      actionSaveOnSubmit={handleAssign}
-    >
-      <div className="assign-knos-modal">
-        {/* Filters */}
-        <div className="filters-grid">
-          <input className="form-control" placeholder="KNO" value={filters.kno} onChange={(e) => handleFilterChange("kno", e.target.value)} />
-
-          <select
-            className="form-control"
-            value={filters.pincode}
-            onChange={(e) => handleFilterChange("pincode", e.target.value)}
-          >
-            <option value="">Select Pincode</option>
-            {fetchedPincodes.map((pin) => (
-              <option key={pin} value={pin}>
-                {pin}
-              </option>
-            ))}
-          </select>
-
-          <select
-            className="form-control"
-            value={filters.zoneName}
-            onChange={(e) => {
-              const val = e.target.value;
-              setFilters((prev) => ({
-                ...prev,
-                zoneCode: val,
-                zoneName: val,
-              }));
-            }}
-            disabled={isZroLoading}
-          >
-            <option value="">{isZroLoading ? "Loading ZRO Locations..." : "Select ZRO Location"}</option>
-            {mappedZROLocation.map((loc) => (
-              <option key={loc.code} value={loc.name}>
-                {loc.name}
-              </option>
-            ))}http://localhost:3000/digit-ui/employee/ekyc/assign
-          </select>
-
-          <select
-            className="form-control"
-            value={filters.ward}
-            onChange={(e) => handleFilterChange("ward", e.target.value)}
-          >
-            <option value="">Select Ward</option>
-            {wardOptions.map((ward) => (
-              <option key={ward.code} value={ward.name}>
-                {ward.name}
-              </option>
-            ))}
-          </select>
-
-          <select
-            className="form-control"
-            value={filters.assembly}
-            onChange={(e) => handleFilterChange("assembly", e.target.value)}
-          >
-            <option value="">Select Assembly</option>
-            {assemblyOptions.map((assembly) => (
-              <option key={assembly.code} value={assembly.name}>
-                {assembly.name}
-              </option>
-            ))}
-          </select>
-
-          <input className="form-control" placeholder="MR Key" value={filters.mrkey} onChange={(e) => handleFilterChange("mrkey", e.target.value)} />
-
-          <select className="form-control" value={filters.ekycStatus} onChange={(e) => handleFilterChange("ekycStatus", e.target.value)}>
-            <option value="">All eKYC Status</option>
-            <option value="PENDING">Pending</option>
-            <option value="APPROVED">Approved</option>
-            <option value="REJECTED">Rejected</option>
-          </select>
-        </div>
-
-        {/* Table */}
-        <Table
-          tableTitle="eKYC Applications"
-          tableClass="ekycTable"
-          data={tableData}
-          columns={columns}
-          isLoading={isLoading}
-          totalRecords={applicationData?.totalCount || 0}
-          currentPage={currentPage}
-          pageSizeLimit={pageSize}
-          manualPagination={true}
-          isPaginationRequired={true}
-          onNextPage={() => {
-            if (currentPage < (applicationData?.totalPages || 1) - 1) {
-              setCurrentPage((prev) => prev + 1);
-            }
-          }}
-          onPrevPage={() => {
-            if (currentPage > 0) {
-              setCurrentPage((prev) => prev - 1);
-            }
-          }}
-          onFirstPage={() => {
-            setCurrentPage(0);
-          }}
-          onLastPage={() => {
-            setCurrentPage(Math.max((applicationData?.totalPages || 1) - 1, 0));
-          }}
-          onPageSizeChange={(e) => {
-            setPageSize(Number(e.target.value));
-            setCurrentPage(0);
-          }}
-        />
-      </div>
-      {showToast && <Toast error={toastData.error} label={toastData.label} onClose={() => setShowToast(false)} />}
-    </Modal>
-  );
-};
-
-export default AssignEkycModal;

package/src/components/CeoDashboard.js

@@ -1,264 +0,0 @@
-import React from "react";
-import { FaUsers, FaUserTie, FaMapMarkedAlt, FaCheckCircle, FaClock, FaExclamationTriangle, FaChartLine } from "react-icons/fa";
-
-const vendors = [
-  {
-    id: 1,
-    name: "Vendor Alpha",
-    progress: 78,
-    supervisors: 12,
-    surveyors: 148,
-    completed: 154200,
-    pending: 43200,
-    rejected: 3200,
-  },
-  {
-    id: 2,
-    name: "Vendor Beta",
-    progress: 64,
-    supervisors: 10,
-    surveyors: 122,
-    completed: 121000,
-    pending: 68500,
-    rejected: 2800,
-  },
-  {
-    id: 3,
-    name: "Vendor Gamma",
-    progress: 91,
-    supervisors: 15,
-    surveyors: 182,
-    completed: 201500,
-    pending: 19800,
-    rejected: 1800,
-  },
-];
-
-const zones = [
-  {
-    zone: "North Delhi",
-    totalConnections: 220000,
-    ekycDone: 172000,
-    liveSurveyors: 58,
-    todayCompleted: 2800,
-  },
-  {
-    zone: "South Delhi",
-    totalConnections: 198000,
-    ekycDone: 154500,
-    liveSurveyors: 42,
-    todayCompleted: 2100,
-  },
-  {
-    zone: "East Delhi",
-    totalConnections: 175000,
-    ekycDone: 132800,
-    liveSurveyors: 37,
-    todayCompleted: 1740,
-  },
-  {
-    zone: "West Delhi",
-    totalConnections: 212000,
-    ekycDone: 188300,
-    liveSurveyors: 48,
-    todayCompleted: 2560,
-  },
-];
-
-const alerts = [
-  "15 Surveyors inactive for more than 2 hours",
-  "Vendor Beta completion dropped by 12% this week",
-  "North Delhi has highest pending backlog",
-  "2,843 eKYC applications rejected today",
-];
-
-const CeoDashboard = () => {
-  return (
-    <div className="ekyc-dashboard-wrapper">
-      <div className="ceo-dashboard">
-        <main className="main-content">
-          <div className="kpi-grid">
-            <div className="kpi-card primary">
-              <div className="icon-box">
-                <FaUsers />
-              </div>
-              <div>
-                <h3>7,85,000</h3>
-                <p>Total Water Connections</p>
-              </div>
-            </div>
-
-            <div className="kpi-card success">
-              <div className="icon-box">
-                <FaCheckCircle />
-              </div>
-              <div>
-                <h3>6,47,300</h3>
-                <p>eKYC Completed</p>
-              </div>
-            </div>
-
-            <div className="kpi-card warning">
-              <div className="icon-box">
-                <FaClock />
-              </div>
-              <div>
-                <h3>1,31,500</h3>
-                <p>Pending eKYC</p>
-              </div>
-            </div>
-
-            <div className="kpi-card danger">
-              <div className="icon-box">
-                <FaExclamationTriangle />
-              </div>
-              <div>
-                <h3>7,200</h3>
-                <p>Rejected Applications</p>
-              </div>
-            </div>
-          </div>
-          <section className="dashboard-section">
-            <div className="section-header">
-              <h2>
-                <FaChartLine /> Vendor Performance Overview
-              </h2>
-              <button>View All</button>
-            </div>
-
-            <div className="vendor-grid">
-              {vendors.map((vendor) => (
-                <div className="vendor-card" key={vendor.id}>
-                  <div className="vendor-top">
-                    <div>
-                      <h3>{vendor.name}</h3>
-                      <p>Jurisdiction Assigned Vendor</p>
-                    </div>
-
-                    <span>{vendor.progress}%</span>
-                  </div>
-
-                  <div className="progress-bar">
-                    <div className="progress-fill" style={{ width: `${vendor.progress}%` }}></div>
-                  </div>
-
-                  <div className="vendor-stats">
-                    <div>
-                      <h4>{vendor.supervisors}</h4>
-                      <p>Supervisors</p>
-                    </div>
-
-                    <div>
-                      <h4>{vendor.surveyors}</h4>
-                      <p>Surveyors</p>
-                    </div>
-
-                    <div>
-                      <h4>{vendor.completed}</h4>
-                      <p>Completed</p>
-                    </div>
-                  </div>
-
-                  <div className="vendor-footer">
-                    <span>Pending: {vendor.pending}</span>
-                    <span>Rejected: {vendor.rejected}</span>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </section>
-
-          <section className="dashboard-section">
-            <div className="section-header">
-              <h2>
-                <FaMapMarkedAlt /> Jurisdiction Monitoring
-              </h2>
-              <button>Export Data</button>
-            </div>
-
-            <div className="table-wrapper">
-              <table>
-                <thead>
-                  <tr>
-                    <th>Zone</th>
-                    <th>Total Connections</th>
-                    <th>eKYC Done</th>
-                    <th>Live Surveyors</th>
-                    <th>Today's Completion</th>
-                    <th>Status</th>
-                  </tr>
-                </thead>
-
-                <tbody>
-                  {zones.map((item, index) => (
-                    <tr key={index}>
-                      <td>{item.zone}</td>
-                      <td>{item.totalConnections}</td>
-                      <td>{item.ekycDone}</td>
-                      <td>{item.liveSurveyors}</td>
-                      <td>{item.todayCompleted}</td>
-                      <td>
-                        <span className="status-badge success">Active</span>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </section>
-
-          <div className="bottom-grid">
-            <section className="dashboard-section alerts-section">
-              <div className="section-header">
-                <h2>
-                  <FaExclamationTriangle /> Critical Alerts
-                </h2>
-              </div>
-
-              <div className="alerts-list">
-                {alerts.map((alert, index) => (
-                  <div className="alert-card" key={index}>
-                    <FaExclamationTriangle />
-                    <p>{alert}</p>
-                  </div>
-                ))}
-              </div>
-            </section>
-
-            <section className="dashboard-section team-section">
-              <div className="section-header">
-                <h2>
-                  <FaUserTie /> Workforce Monitoring
-                </h2>
-              </div>
-
-              <div className="team-stats-grid">
-                <div className="team-box">
-                  <h3>37</h3>
-                  <p>Total Supervisors Online</p>
-                </div>
-
-                <div className="team-box">
-                  <h3>154</h3>
-                  <p>Surveyors Active</p>
-                </div>
-
-                <div className="team-box">
-                  <h3>12,430</h3>
-                  <p>Today's eKYC Completed</p>
-                </div>
-
-                <div className="team-box">
-                  <h3>92%</h3>
-                  <p>Operational Efficiency</p>
-                </div>
-              </div>
-            </section>
-          </div>
-        </main>
-      </div>
-    </div>
-  );
-};
-
-export default CeoDashboard;