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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djb25/digit-ui-module-ekyc",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "Digit UI Module for Ekyc",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",

package/src/components/AssignEkyc.js

@@ -0,0 +1,317 @@
+import React, { useMemo, useCallback, useReducer, useState } from "react";
+import { useLocation } from "react-router-dom";
+import { InboxComposer } from "@djb25/digit-ui-react-components";
+import SupervisorInboxTableConfig from "../hook/SupervisorInboxTableConfig";
+import SearchFormFieldsComponents from "./SearchFormFieldsComponent";
+
+// Mock data removed in favor of API integration
+
+const AssignEkyc = () => {
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+  const location = useLocation();
+  const [sortParams, setSortParams] = useState([{ id: "", desc: true }]);
+  const [pageOffset, setPageOffset] = useState(0);
+  const [pageSize, setPageSize] = useState(10);
+  let paginationParms = { limit: pageSize, offset: pageOffset, sortBy: sortParams?.[0]?.id, sortOrder: sortParams?.[0]?.desc ? "DESC" : "ASC" };
+
+  const formInitValue = {
+    filterForm: {},
+    searchForm: {},
+    tableForm: {
+      limit: 10,
+      offset: 0,
+      sortBy: "createdTime",
+      sortOrder: "DESC",
+    },
+  };
+
+  const [formState, dispatch] = useReducer(formReducer, formInitValue);
+
+  const { data: dashboardData, isLoading } = Digit.Hooks.fsm.useSurveyorSearch(
+    tenantId,
+    { ...paginationParms, status: "ACTIVE,DISABLED" },
+    { enabled: !!tenantId, keepPreviousData: true }
+  );
+
+  const handleSort = useCallback((args) => {
+    if (args?.length === 0) return;
+    setSortParams(args);
+  }, []);
+
+  const fetchNextPage = () => {
+    setPageOffset((prevState) => prevState + pageSize);
+  };
+
+  const fetchPrevPage = () => {
+    setPageOffset((prevState) => prevState - pageSize);
+  };
+
+  const handlePageSizeChange = (e) => {
+    setPageSize(Number(e.target.value));
+  };
+
+  const searchDetails = useMemo(
+    () => ({
+      kno: formState?.searchForm?.kNumber || "",
+      name: formState?.searchForm?.kName || "",
+    }),
+    [formState?.searchForm?.kNumber, formState?.searchForm?.kName]
+  );
+
+  const isSearchActive = !!(searchDetails.kno || searchDetails.name);
+
+  const { isLoading: isSearchLoading, data: searchData } = Digit.Hooks.ekyc.useSearchConnection(
+    {
+      tenantId,
+      details: searchDetails,
+    },
+    {
+      enabled: !!tenantId && !!searchDetails.kno, // 🔥 important
+      keepPreviousData: true,
+    }
+  );
+
+  const sourceData = useMemo(() => {
+    if (isSearchActive) {
+      if (!searchData) return [];
+      return [searchData];
+    }
+
+    return dashboardData?.surveyors || [];
+  }, [isSearchActive, searchData, dashboardData]);
+
+  const filteredData = useMemo(() => {
+    return (sourceData || []).map((item) => {
+      const owner = item?.owner || {};
+
+      const roleCodes = owner?.roles?.map((role) => role.code)?.join(", ") || "";
+
+      return {
+        ...item,
+
+        id: item?.id || "",
+
+        surveyorName: item?.name || owner?.name || "",
+
+        mobileNo: item?.mobileNo || owner?.mobileNumber || "",
+
+        email: owner?.emailId || "",
+
+        vendorId: item?.vendorId || "",
+
+        tenantId: item?.tenantId || "",
+
+        supervisorId: item?.supervisorId || "",
+
+        status: item?.status || "",
+
+        roleCodes,
+
+        userName: owner?.userName || "",
+
+        gender: owner?.gender || "",
+
+        serviceType: item?.additionalDetails?.serviceType || "",
+
+        createdTime: item?.auditDetails?.createdTime || 0,
+
+        lastModifiedTime: item?.auditDetails?.lastModifiedTime || 0,
+      };
+    });
+  }, [sourceData]);
+
+  const totalRecords = dashboardData?.dashboardInfo?.totalRecords || dashboardData?.totalCount || 0;
+
+  const checkPathName = location.pathname.includes("ekyc/inbox");
+  const PropsForInboxLinks = {
+    headerText: checkPathName ? "EKYC_MODULE" : "MODULE_SW",
+  };
+
+  const SearchFormFields = useCallback(
+    ({ registerRef, searchFormState, controlSearchForm }) => (
+      <SearchFormFieldsComponents {...{ registerRef, searchFormState, controlSearchForm }} className="search" />
+    ),
+    []
+  );
+
+  const tableOrderFormDefaultValues = {
+    sortBy: "createdTime",
+    limit: window.Digit.Utils.browser.isMobile() ? 50 : 10,
+    offset: 0,
+    sortOrder: "DESC",
+  };
+
+  const onSearchFormSubmit = (data) => {
+    data.hasOwnProperty("") && delete data?.[""];
+    dispatch({ action: "mutateTableForm", data: { ...tableOrderFormDefaultValues }, checkPathName });
+    dispatch({ action: "mutateSearchForm", data, checkPathName });
+  };
+
+  const searchFormDefaultValues = {
+    mobileNumber: "",
+    applicationNumber: "",
+    consumerNo: "",
+  };
+
+  const onSearchFormReset = (setSearchFormValue) => {
+    setSearchFormValue("mobileNumber", null);
+    setSearchFormValue("applicationNumber", null);
+    setSearchFormValue("consumerNo", null);
+    dispatch({ action: "mutateSearchForm", data: searchFormDefaultValues });
+  };
+
+  const propsForSearchForm = {
+    SearchFormFields,
+    onSearchFormSubmit,
+    searchFormDefaultValues: formState?.searchForm,
+    resetSearchFormDefaultValues: searchFormDefaultValues,
+    onSearchFormReset,
+    className: "search-form-wns-inbox",
+  };
+
+  const FilterFormFields = useCallback(
+    ({ registerRef, controlFilterForm, setFilterFormValue, getFilterFormValue }) => <React.Fragment></React.Fragment>,
+    []
+  );
+
+  const propsForFilterForm = {
+    FilterFormFields,
+    onFilterFormSubmit: () => {},
+    filterFormDefaultValues: "",
+    resetFilterFormDefaultValues: "",
+    onFilterFormReset: () => {},
+  };
+
+  function formReducer(state, payload) {
+    const storageKey = payload.checkPathName ? "EKYC.INBOX" : "EKYC.SW.INBOX";
+
+    // ✅ safety for SLA
+    switch (payload.action) {
+      case "mutateSearchForm":
+        Digit.SessionStorage.set(storageKey, { ...state, searchForm: payload.data });
+        return { ...state, searchForm: payload.data };
+
+      case "mutateFilterForm":
+        Digit.SessionStorage.set(storageKey, { ...state, filterForm: payload.data });
+        return { ...state, filterForm: payload.data };
+
+      case "mutateTableForm":
+        Digit.SessionStorage.set(storageKey, { ...state, tableForm: payload.data });
+        return { ...state, tableForm: payload.data };
+
+      default:
+        return state; // ✅ IMPORTANT
+    }
+  }
+
+  const onPageSizeChange = (e) => {
+    const newLimit = Number(e.target.value);
+
+    dispatch({
+      action: "mutateTableForm",
+      data: {
+        ...formState.tableForm,
+        limit: newLimit,
+        offset: 0, // reset page
+      },
+      checkPathName,
+    });
+  };
+
+  const onSortingByData = (e) => {
+    if (e.length > 0) {
+      const [{ id, desc }] = e;
+      const sortOrder = desc ? "DESC" : "ASC";
+      const sortBy = id;
+
+      if (!(formState.tableForm.sortBy === sortBy && formState.tableForm.sortOrder === sortOrder)) {
+        dispatch({
+          action: "mutateTableForm",
+          data: {
+            ...formState.tableForm,
+            sortBy: id,
+            sortOrder: desc ? "DESC" : "ASC",
+          },
+          checkPathName,
+        });
+      }
+    }
+  };
+
+  const propsForInboxTable = SupervisorInboxTableConfig({
+    ...{
+      onPageSizeChange,
+      formState,
+      totalCount: totalRecords,
+      table: filteredData,
+      dispatch,
+      onSortingByData,
+      tenantId,
+      checkPathName,
+      inboxStyles: { overflowX: "scroll", overflowY: "hidden" },
+      tableStyle: { width: "70%" },
+    },
+  });
+
+  const isInboxLoading = isLoading || isSearchLoading;
+
+  const cards = [
+    {
+      label: "TOTAL_EKYC_APPLICATIONS",
+      count: 364,
+      color: "#0B2559",
+      filter: null,
+      active: true,
+    },
+    {
+      label: "UNASSIGNED_APPLICATIONS",
+      count: 28,
+      color: "#F59E0B",
+      filter: ["UNASSIGNED"],
+    },
+    {
+      label: "ASSIGNED_TO_SURVEYOR",
+      count: 120,
+      color: "#3B82F6",
+      filter: ["ASSIGNED"],
+    },
+    {
+      label: "IN_PROGRESS",
+      count: 54,
+      color: "#A855F7",
+      filter: ["IN_PROGRESS"],
+    },
+    {
+      label: "EKYC_COMPLETED",
+      count: 140,
+      color: "#10B981",
+      filter: ["COMPLETED"],
+    },
+    {
+      label: "REJECTED_APPLICATIONS",
+      count: 22,
+      color: "#EF4444",
+      filter: ["REJECTED"],
+    },
+  ];
+  return (
+    <div className="app-container">
+      <InboxComposer
+        {...{
+          isInboxLoading,
+          PropsForInboxLinks,
+          ...propsForSearchForm,
+          ...propsForFilterForm,
+          // ...propsForMobileSortForm,
+          propsForInboxTable,
+          // propsForInboxMobileCards,
+          formState,
+          countData: dashboardData?.dashboardInfo,
+          cards,
+        }}
+      />
+    </div>
+  );
+};
+
+export default AssignEkyc;

package/src/components/AssignEkycModal.js

@@ -0,0 +1,362 @@
+import React, { useMemo, useState } from "react";
+import { Modal, Close } from "@djb25/digit-ui-react-components";
+
+const AssignEkycModal = ({ surveyor, closeModal }) => {
+  const [selectedKnos, setSelectedKnos] = useState([]);
+
+  const [filters, setFilters] = useState({
+    pincode: "",
+    locality: "",
+    status: "",
+    route: "",
+    search: "",
+  });
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const knoList = [
+    {
+      kno: "1029384756",
+      consumerName: "Rahul Sharma",
+      locality: "Rohini",
+      pincode: "110085",
+      status: "PENDING",
+      route: "R1",
+    },
+    {
+      kno: "9283746555",
+      consumerName: "Amit Kumar",
+      locality: "Pitampura",
+      pincode: "110034",
+      status: "VERIFIED",
+      route: "R2",
+    },
+    {
+      kno: "8473625147",
+      consumerName: "Neha Verma",
+      locality: "Dwarka",
+      pincode: "110075",
+      status: "PENDING",
+      route: "R3",
+    },
+    {
+      kno: "5647382910",
+      consumerName: "Sanjay Singh",
+      locality: "Janakpuri",
+      pincode: "110058",
+      status: "ASSIGNED",
+      route: "R1",
+    },
+    {
+      kno: "9182736450",
+      consumerName: "Priya Mehta",
+      locality: "Laxmi Nagar",
+      pincode: "110092",
+      status: "PENDING",
+      route: "R4",
+    },
+    {
+      kno: "7463829105",
+      consumerName: "Vikas Gupta",
+      locality: "Karol Bagh",
+      pincode: "110005",
+      status: "VERIFIED",
+      route: "R2",
+    },
+    {
+      kno: "1122334455",
+      consumerName: "Anjali Kapoor",
+      locality: "Saket",
+      pincode: "110017",
+      status: "PENDING",
+      route: "R5",
+    },
+    {
+      kno: "6677889900",
+      consumerName: "Rohit Yadav",
+      locality: "Uttam Nagar",
+      pincode: "110059",
+      status: "ASSIGNED",
+      route: "R3",
+    },
+    {
+      kno: "8899776655",
+      consumerName: "Deepak Chauhan",
+      locality: "Burari",
+      pincode: "110084",
+      status: "PENDING",
+      route: "R6",
+    },
+    {
+      kno: "5544332211",
+      consumerName: "Sneha Arora",
+      locality: "Shahdara",
+      pincode: "110032",
+      status: "VERIFIED",
+      route: "R4",
+    },
+    {
+      kno: "3344556677",
+      consumerName: "Karan Malhotra",
+      locality: "Mayur Vihar",
+      pincode: "110091",
+      status: "PENDING",
+      route: "R7",
+    },
+    {
+      kno: "9988776654",
+      consumerName: "Pooja Bansal",
+      locality: "Patel Nagar",
+      pincode: "110008",
+      status: "ASSIGNED",
+      route: "R5",
+    },
+    {
+      kno: "7766554433",
+      consumerName: "Harsh Jain",
+      locality: "Punjabi Bagh",
+      pincode: "110026",
+      status: "PENDING",
+      route: "R8",
+    },
+    {
+      kno: "2233445566",
+      consumerName: "Nitin Sharma",
+      locality: "Rajouri Garden",
+      pincode: "110027",
+      status: "VERIFIED",
+      route: "R1",
+    },
+    {
+      kno: "4433221100",
+      consumerName: "Megha Sethi",
+      locality: "Ashok Vihar",
+      pincode: "110052",
+      status: "PENDING",
+      route: "R9",
+    },
+    {
+      kno: "1010101010",
+      consumerName: "Aditya Rana",
+      locality: "Model Town",
+      pincode: "110009",
+      status: "ASSIGNED",
+      route: "R10",
+    },
+    {
+      kno: "2020202020",
+      consumerName: "Simran Kaur",
+      locality: "Tilak Nagar",
+      pincode: "110018",
+      status: "PENDING",
+      route: "R11",
+    },
+    {
+      kno: "3030303030",
+      consumerName: "Mohit Saini",
+      locality: "Narela",
+      pincode: "110040",
+      status: "VERIFIED",
+      route: "R6",
+    },
+    {
+      kno: "4040404040",
+      consumerName: "Ritika Sharma",
+      locality: "Bawana",
+      pincode: "110039",
+      status: "PENDING",
+      route: "R7",
+    },
+    {
+      kno: "5050505050",
+      consumerName: "Yash Aggarwal",
+      locality: "Okhla",
+      pincode: "110020",
+      status: "ASSIGNED",
+      route: "R8",
+    },
+  ];
+
+  const filteredKnos = useMemo(() => {
+    return knoList.filter((item) => {
+      const matchesPincode = filters.pincode ? item.pincode.includes(filters.pincode) : true;
+
+      const matchesLocality = filters.locality ? item.locality.toLowerCase().includes(filters.locality.toLowerCase()) : true;
+
+      const matchesStatus = filters.status ? item.status === filters.status : true;
+
+      const matchesRoute = filters.route ? item.route.toLowerCase().includes(filters.route.toLowerCase()) : true;
+
+      const matchesSearch = filters.search
+        ? item.kno.includes(filters.search) || item.consumerName.toLowerCase().includes(filters.search.toLowerCase())
+        : true;
+
+      return matchesPincode && matchesLocality && matchesStatus && matchesRoute && matchesSearch;
+    });
+  }, [filters, knoList]);
+
+  const handleSelect = (kno) => {
+    setSelectedKnos((prev) => (prev.includes(kno) ? prev.filter((item) => item !== kno) : [...prev, kno]));
+  };
+
+  const handleSelectAll = () => {
+    const visibleKnos = filteredKnos.map((item) => item.kno);
+
+    const allSelected = visibleKnos.every((kno) => selectedKnos.includes(kno));
+
+    if (allSelected) {
+      setSelectedKnos((prev) => prev.filter((kno) => !visibleKnos.includes(kno)));
+    } else {
+      setSelectedKnos((prev) => [...new Set([...prev, ...visibleKnos])]);
+    }
+  };
+
+  const handleAssign = () => {
+    const payload = {
+      surveyorId: surveyor?.uuid,
+      knos: selectedKnos,
+      filters,
+    };
+
+    console.log(payload);
+
+    closeModal();
+  };
+
+  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="Search by KNO / Consumer"
+            value={filters.search}
+            onChange={(e) =>
+              setFilters({
+                ...filters,
+                search: e.target.value,
+              })
+            }
+          />
+
+          <input
+            className="form-control"
+            placeholder="Pincode"
+            value={filters.pincode}
+            onChange={(e) =>
+              setFilters({
+                ...filters,
+                pincode: e.target.value,
+              })
+            }
+          />
+
+          <input
+            className="form-control"
+            placeholder="Locality"
+            value={filters.locality}
+            onChange={(e) =>
+              setFilters({
+                ...filters,
+                locality: e.target.value,
+              })
+            }
+          />
+
+          <input
+            className="form-control"
+            placeholder="Route"
+            value={filters.route}
+            onChange={(e) =>
+              setFilters({
+                ...filters,
+                route: e.target.value,
+              })
+            }
+          />
+
+          <select
+            className="form-control"
+            value={filters.status}
+            onChange={(e) =>
+              setFilters({
+                ...filters,
+                status: e.target.value,
+              })
+            }
+          >
+            <option value="">All Status</option>
+            <option value="PENDING">Pending</option>
+            <option value="VERIFIED">Verified</option>
+            <option value="ASSIGNED">Assigned</option>
+          </select>
+        </div>
+
+        {/* Summary */}
+        <div className="summary-bar">
+          <div>Total Records: {filteredKnos.length}</div>
+          <div>Selected KNOs: {selectedKnos.length}</div>
+        </div>
+
+        {/* Table */}
+        <div className="table-wrapper">
+          {/* Header */}
+          <div className="table-header">
+            <div>
+              <input
+                type="checkbox"
+                checked={filteredKnos.length > 0 && filteredKnos.every((item) => selectedKnos.includes(item.kno))}
+                onChange={handleSelectAll}
+              />
+            </div>
+
+            <div>KNO</div>
+            <div>Consumer Name</div>
+            <div>Locality</div>
+            <div>Pincode</div>
+            <div>Status</div>
+            <div>Route</div>
+          </div>
+
+          {/* Rows */}
+          <div className="table-body">
+            {filteredKnos.length > 0 ? (
+              filteredKnos.map((item, index) => (
+                <div key={item.kno} className={`table-row ${index % 2 === 0 ? "even" : "odd"}`}>
+                  <div>
+                    <input type="checkbox" checked={selectedKnos.includes(item.kno)} onChange={() => handleSelect(item.kno)} />
+                  </div>
+
+                  <div className="kno-value">{item.kno}</div>
+
+                  <div>{item.consumerName}</div>
+                  <div>{item.locality}</div>
+                  <div>{item.pincode}</div>
+
+                  <div>
+                    <span className={`status-badge ${item.status === "PENDING" ? "pending" : item.status === "VERIFIED" ? "verified" : "assigned"}`}>
+                      {item.status}
+                    </span>
+                  </div>
+
+                  <div>{item.route}</div>
+                </div>
+              ))
+            ) : (
+              <div className="empty-state">No KNO records found</div>
+            )}
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default AssignEkycModal;

package/src/components/EKYCCard.js

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