@djb25/digit-ui-module-ekyc 1.0.20 → 1.0.22

package/package.json

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

package/src/components/AssignEkyc.js

@@ -9,11 +9,6 @@ import SearchFormFieldsComponents from "./SearchFormFieldsComponent";
 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: {},
@@ -26,10 +21,18 @@ const AssignEkyc = () => {
   };
 
   const [formState, dispatch] = useReducer(formReducer, formInitValue);
+  const userDetails = Digit.SessionStorage.get("User");
+
+  let paginationParms = {
+    limit: formState?.tableForm?.limit || 10,
+    offset: formState?.tableForm?.offset || 0,
+    sortBy: formState?.tableForm?.sortBy || "createdTime",
+    sortOrder: formState?.tableForm?.sortOrder || "DESC",
+  };
 
   const { data: dashboardData, isLoading } = Digit.Hooks.fsm.useSurveyorSearch(
     tenantId,
-    { ...paginationParms, status: "ACTIVE,DISABLED" },
+    { ...paginationParms, status: "ACTIVE,DISABLED", vendorId: userDetails?.info?.uuid },
     { enabled: !!tenantId, keepPreviousData: true }
   );
 
@@ -53,6 +56,13 @@ const AssignEkyc = () => {
       keepPreviousData: true,
     }
   );
+  const { isLoading: isDataSearchLoading, data } = Digit.Hooks.ekyc.useEkycAssignmentProgress(
+    {},
+    {
+      enabled: !!tenantId && !!searchDetails.kno, // 🔥 important
+      keepPreviousData: true,
+    }
+  );
 
   const sourceData = useMemo(() => {
     if (isSearchActive) {
@@ -241,42 +251,37 @@ const AssignEkyc = () => {
   const cards = [
     {
       label: "TOTAL_EKYC_APPLICATIONS",
-      count: 364,
+      count: data?.totalKnos || 0,
       color: "#0B2559",
       filter: null,
       active: true,
     },
     {
-      label: "UNASSIGNED_APPLICATIONS",
-      count: 28,
-      color: "#F59E0B",
-      filter: ["UNASSIGNED"],
-    },
-    {
-      label: "ASSIGNED_TO_SURVEYOR",
-      count: 120,
+      label: "TOTAL_ASSIGNMENTS",
+      count: data?.totalAssignments || 0,
       color: "#3B82F6",
       filter: ["ASSIGNED"],
     },
-    {
-      label: "IN_PROGRESS",
-      count: 54,
-      color: "#A855F7",
-      filter: ["IN_PROGRESS"],
-    },
     {
       label: "EKYC_COMPLETED",
-      count: 140,
+      count: data?.completedKnos || 0,
       color: "#10B981",
       filter: ["COMPLETED"],
     },
     {
-      label: "REJECTED_APPLICATIONS",
-      count: 22,
-      color: "#EF4444",
-      filter: ["REJECTED"],
+      label: "PENDING_APPLICATIONS",
+      count: (data?.totalKnos || 0) - (data?.completedKnos || 0),
+      color: "#F59E0B",
+      filter: ["PENDING"],
+    },
+    {
+      label: "OVERALL_PROGRESS",
+      count: `${data?.overallProgressPercent || 0}%`,
+      color: "#A855F7",
+      filter: ["IN_PROGRESS"],
     },
   ];
+
   return (
     <div className="app-container">
       <InboxComposer
@@ -291,6 +296,7 @@ const AssignEkyc = () => {
           formState,
           countData: dashboardData?.dashboardInfo,
           cards,
+          isCardLoading: isDataSearchLoading,
         }}
       />
     </div>

package/src/components/AssignEkycModal.js

@@ -1,38 +1,26 @@
 import React, { useMemo, useState, useEffect } from "react";
-import { Modal, Close, Table } from "@djb25/digit-ui-react-components";
+import { Modal, Close, Table, Toast } from "@djb25/digit-ui-react-components";
 
 const AssignEkycModal = ({ surveyor, closeModal }) => {
   const [selectedKnos, setSelectedKnos] = useState([]);
-  const [assignmentType, setAssignmentType] = useState("KNO");
+  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
-    ekycStatus: "",
+    pincode: "",
     zoneName: "",
-    assembly: "",
     ward: "",
+    assembly: "",
     mrkey: "",
-    pincode: "",
+    ekycStatus: "",
   });
 
-  const getAssignmentValue = () => {
-    switch (assignmentType) {
-      case "MRKEY":
-        return filters.mrkey;
-
-      case "ASSEMBLY":
-        return filters.assembly;
-
-      case "WARD":
-        return filters.ward;
-
-      case "KNO":
-      default:
-        return selectedKnos.join(",");
-    }
-  };
-
   const [debouncedFilters, setDebouncedFilters] = useState(filters);
 
   useEffect(() => {
@@ -47,7 +35,7 @@ const AssignEkycModal = ({ surveyor, closeModal }) => {
     setCurrentPage(0);
   }, [debouncedFilters]);
 
-  const { data: applicationData, isLoading } = Digit.Hooks.ekyc.useEkycApplicationList(
+  const { data: applicationData, isFetching: isLoading } = Digit.Hooks.ekyc.useEkycApplicationList(
     {
       ...(debouncedFilters.kno && {
         kno: debouncedFilters.kno,
@@ -89,27 +77,87 @@ const AssignEkycModal = ({ surveyor, closeModal }) => {
 
   const assignmentMutation = Digit.Hooks.ekyc.useEkycAssignmentCreate({
     onSuccess: (response) => {
-      console.log("Assignment successful", response);
-      closeModal();
+      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(() => {
+        closeModal();
+      }, 1000);
     },
+
     onError: (error) => {
-      console.error("Assignment failed", error);
-      // show toast here
+      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],
+        };
+      }
+    }
+
+    console.log("=-=-==-=-=-=-", {
+      assignmentType: "KNO",
+      assignmentValues: selectedKnos,
+    });
+
+    return {
+      assignmentType: "KNO",
+      assignmentValues: selectedKnos,
+    };
+  };
   const handleAssign = () => {
+    const { assignmentType, assignmentValue, assignmentValues } = getAssignmentPayload();
+
     assignmentMutation.mutate({
       tenantId: "dl.djb",
-      surveyorId: surveyor?.uuid,
-      assignmentType: "KNO",
-      assignmentValue: getAssignmentValue(),
+      surveyorId: surveyor?.owner?.uuid,
+      assignmentType,
+      assignmentValue,
+      assignmentValues,
     });
   };
 
   const handleSelectAll = () => {
+    setIsBulkSelection(true);
+
     const pageKnos = tableData.map((item) => item.kno);
 
     const allSelected = pageKnos.length > 0 && pageKnos.every((kno) => selectedKnos.includes(kno));
@@ -224,13 +272,6 @@ const AssignEkycModal = ({ surveyor, closeModal }) => {
             <option value="APPROVED">Approved</option>
             <option value="REJECTED">Rejected</option>
           </select>
-
-          <select className="form-control" value={assignmentType} onChange={(e) => setAssignmentType(e.target.value)}>
-            <option value="KNO">KNO</option>
-            <option value="MRKEY">MR Key</option>
-            <option value="WARD">Ward</option>
-            <option value="ASSEMBLY">Assembly</option>
-          </select>
         </div>
 
         {/* Table */}
@@ -267,6 +308,7 @@ const AssignEkycModal = ({ surveyor, closeModal }) => {
           }}
         />
       </div>
+      {showToast && <Toast error={toastData.error} label={toastData.label} onClose={() => setShowToast(false)} />}
     </Modal>
   );
 };

package/src/components/SearchFormFieldsComponent.js

@@ -12,8 +12,8 @@ const SearchFormFieldsComponents = ({ searchFormState, controlSearchForm }) => {
       {/* K NUMBER */}
       <span className="mobile-input">
         <Label className="flex-roww flex-gap-2">
-          {t("EKYC_K_NUMBER") || "K Number"}
-          <CustomTooltip message={t("EKYC_K_NUMBER_MESSAGE")} />
+          {t("EKYC_MOBILE_NUMBER") || "Mobile Number"}
+          <CustomTooltip message={t("EKYC_MOBILE_NUMBER_MESSAGE")} />
         </Label>
 
         <Controller

package/src/components/SurveyorDetailsCard.js

@@ -29,35 +29,53 @@ const SurveyorDetailsDashboard = () => {
     return surveyorSearchResponse?.surveyors?.[0] || null;
   }, [surveyorSearchResponse]);
 
-  const knoColumns = React.useMemo(
+  const [currentPage, setCurrentPage] = useState(0);
+  const [pageSize, setPageSize] = useState(20);
+  const queryParams = {
+    tenantId: "dl.djb",
+    offset: currentPage * pageSize,
+    limit: pageSize,
+    surveyorId: surveyor?.owner?.uuid,
+  };
+
+  const { isFetching: isDashboardLoading, data: dashboardData = {} } = Digit.Hooks.ekyc.useEkycSurveyorDashboard({}, queryParams, {
+    enabled: !!queryParams.tenantId && !!queryParams.surveyorId,
+    keepPreviousData: true,
+  });
+
+  const knoColumns = useMemo(
     () => [
       {
-        Header: t("KNO"),
+        Header: "KNO",
         accessor: "kno",
       },
       {
-        Header: t("CONSUMER_NAME"),
-        accessor: "consumerName",
+        Header: "Consumer Name",
+        accessor: (row) => `${row.firstName || ""} ${row.middleName || ""} ${row.lastName || ""}`.trim(),
+        id: "consumerName",
       },
       {
-        Header: t("MOBILE_NO"),
-        accessor: "mobileNumber",
+        Header: "Zone",
+        accessor: "zoneName",
       },
       {
-        Header: t("STATUS"),
-        accessor: "status",
-        Cell: ({ value }) => <span className={`status-badge ${value?.toLowerCase() || ""}`}>{value}</span>,
+        Header: "Pincode",
+        accessor: "pincode",
       },
       {
-        Header: t("ASSIGNED_DATE"),
-        accessor: "assignedDate",
+        Header: "Status",
+        accessor: "status",
+        Cell: ({ value }) => (
+          <span className={`status-badge ${value === "ACTIVE" ? "verified" : value === "PENDING" ? "pending" : "assigned"}`}>{value}</span>
+        ),
       },
       {
-        Header: t("COMPLETED_DATE"),
-        accessor: "completedDate",
+        Header: "eKYC Status",
+        accessor: "ekycStatus",
+        Cell: ({ value }) => value || "-",
       },
     ],
-    [t]
+    []
   );
 
   if (isLoading) {
@@ -71,24 +89,6 @@ const SurveyorDetailsDashboard = () => {
       </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 },
@@ -118,11 +118,19 @@ const SurveyorDetailsDashboard = () => {
     },
   ];
 
-  const StatCard = ({ title, value, type }) => (
+  const StatCard = ({ title, value, type, isLoading }) => (
     <div className={`stat-card ${type}`}>
-      <div className="stat-title">{title}</div>
-
-      <div className="stat-value">{value}</div>
+      {isLoading ? (
+        <React.Fragment>
+          <div className="stat-title skeleton skeleton-text"></div>
+          <div className="stat-value skeleton skeleton-number"></div>
+        </React.Fragment>
+      ) : (
+        <React.Fragment>
+          <div className="stat-title">{title}</div>
+          <div className="stat-value">{value}</div>
+        </React.Fragment>
+      )}
     </div>
   );
 
@@ -158,13 +166,10 @@ const SurveyorDetailsDashboard = () => {
 
       {/* 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" />
+        <StatCard title={t("TOTAL_ASSIGNED")} value={dashboardData?.dashboardInfo?.total || 0} type="today" isLoading={isDashboardLoading} />
+        <StatCard title={t("COMPLETED")} value={dashboardData?.dashboardInfo?.completed || 0} type="week" isLoading={isDashboardLoading} />
+        <StatCard title={t("PENDING")} value={dashboardData?.dashboardInfo?.pending || 0} type="pending" isLoading={isDashboardLoading} />
+        <StatCard title={t("SUBMITTED")} value={dashboardData?.dashboardInfo?.submittedCount || 0} type="month" isLoading={isDashboardLoading} />
       </div>
 
       {/* Charts */}
@@ -242,18 +247,40 @@ const SurveyorDetailsDashboard = () => {
           </div>
         </div>
       </div>
-
-      <Table
-        t={t}
-        tableTitle={t("ASSIGNED_KNOS")}
-        data={assignedKnos}
-        columns={knoColumns}
-        totalRecords={assignedKnos?.length}
-        isPaginationRequired={true}
-        pageSizeLimit={10}
-        manualPagination={false}
-      />
-
+      <Card className="dashboard-card">
+        <Table
+          t={t}
+          tableTitle={t("ASSIGNED_KNOS")}
+          tableClass="ekycTable"
+          data={dashboardData?.dashboardInfo?.consumerList || []}
+          columns={knoColumns}
+          isLoading={isDashboardLoading}
+          totalRecords={dashboardData?.dashboardInfo?.total}
+          currentPage={currentPage}
+          pageSizeLimit={pageSize}
+          isPaginationRequired={true}
+          onNextPage={() => {
+            if (currentPage < (dashboardData?.dashboardInfo?.totalPages || 1) - 1) {
+              setCurrentPage((prev) => prev + 1);
+            }
+          }}
+          onPrevPage={() => {
+            if (currentPage > 0) {
+              setCurrentPage((prev) => prev - 1);
+            }
+          }}
+          onFirstPage={() => {
+            setCurrentPage(0);
+          }}
+          onLastPage={() => {
+            setCurrentPage(Math.max((dashboardData?.dashboardInfo?.totalPages || 1) - 1, 0));
+          }}
+          onPageSizeChange={(e) => {
+            setPageSize(Number(e.target.value));
+            setCurrentPage(0);
+          }}
+        />
+      </Card>
       {/* Actions */}
       {(!roles.includes("EKYC_SURVEYOR") || roles.includes("EMPLOYEE")) && (
         <ActionBar>

package/src/components/VendorDetails.jsx

@@ -52,7 +52,6 @@ const VendorDetails = () => {
     rejected: row.rejected,
   }));
 
-  console.log(dashboardData);
   if (isLoading) <Loader />;
 
   return (