@djb25/digit-ui-module-ekyc 1.0.23 → 1.0.25

package/src/components/SurveyorDetailsCard.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo, useState, useRef, useEffect } 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";
@@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
 
 import AssignEkycModal from "./AssignEkycModal";
+import { downloadSurveyorPDF } from "../utils/reportDownloader";
 
 const SurveyorDetailsDashboard = () => {
   const tenantId = Digit.ULBService.getCurrentTenantId();
@@ -29,6 +30,25 @@ const SurveyorDetailsDashboard = () => {
     return surveyorSearchResponse?.surveyors?.[0] || null;
   }, [surveyorSearchResponse]);
 
+  const { data: vendorData } = Digit.Hooks.fsm.useDsoSearch(tenantId, { status: "ACTIVE" }, { enabled: !!tenantId });
+  const { data: supervisorSearchResponse } = Digit.Hooks.fsm.useSupervisorSearch(tenantId, { status: "ACTIVE" }, { enabled: !!tenantId });
+
+  const vendorName = useMemo(() => {
+    if (!vendorData || !surveyor?.vendorId) return "N/A";
+    const mappedVendor = vendorData.find((v) => v.dsoDetails?.id === surveyor.vendorId || v.dsoDetails?.vendorId === surveyor.vendorId);
+    return mappedVendor?.dsoDetails?.name || surveyor.vendorId || "N/A";
+  }, [vendorData, surveyor?.vendorId]);
+
+  const supervisorName = useMemo(() => {
+    if (!supervisorSearchResponse?.supervisors || !surveyor?.supervisorId) return "N/A";
+    const mappedSupervisor = supervisorSearchResponse.supervisors.find((s) => s.id === surveyor.supervisorId || s.owner?.uuid === surveyor.supervisorId);
+    return mappedSupervisor?.name || mappedSupervisor?.owner?.name || surveyor.supervisorId || "N/A";
+  }, [supervisorSearchResponse, surveyor?.supervisorId]);
+
+  const fullName = surveyor?.owner?.name || surveyor?.name || "N/A";
+  const employeeId = surveyor?.employeeId || surveyor?.owner?.uuid || surveyor?.id;
+  const mobileNumber = surveyor?.owner?.mobileNumber || surveyor?.mobileNo || "N/A";
+
   const [currentPage, setCurrentPage] = useState(0);
   const [pageSize, setPageSize] = useState(20);
   const queryParams = {
@@ -38,10 +58,14 @@ const SurveyorDetailsDashboard = () => {
     surveyorId: surveyor?.owner?.uuid,
   };
 
-  const { isFetching: isDashboardLoading, data: dashboardData = {} } = Digit.Hooks.ekyc.useEkycSurveyorDashboard({}, queryParams, {
-    enabled: !!queryParams.tenantId && !!queryParams.surveyorId,
-    keepPreviousData: true,
-  });
+  const { isFetching: isDashboardLoading, data: dashboardData = {}, refetch: refetchDashboard } = Digit.Hooks.ekyc.useEkycSurveyorDashboard(
+    {},
+    queryParams,
+    {
+      enabled: !!queryParams.tenantId && !!queryParams.surveyorId,
+      keepPreviousData: true,
+    }
+  );
 
   const knoColumns = useMemo(
     () => [
@@ -78,6 +102,24 @@ const SurveyorDetailsDashboard = () => {
     []
   );
 
+  // ─── Download Report hooks (must be before any early returns) ───────
+
+  const [showReportMenu, setShowReportMenu] = useState(false);
+  const [customDate, setCustomDate] = useState({ from: "", to: "" });
+  const [showCustomPicker, setShowCustomPicker] = useState(false);
+  const reportMenuRef = useRef(null);
+
+  useEffect(() => {
+    const handler = (e) => {
+      if (reportMenuRef.current && !reportMenuRef.current.contains(e.target)) {
+        setShowReportMenu(false);
+        setShowCustomPicker(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+
   if (isLoading) {
     return <Loader />;
   }
@@ -118,6 +160,85 @@ const SurveyorDetailsDashboard = () => {
     },
   ];
 
+  const getDateRange = (filter) => {
+    const now = new Date();
+    const start = new Date(now);
+    if (filter === "today") {
+      start.setHours(0, 0, 0, 0);
+      return { from: start, to: now };
+    }
+    if (filter === "week") {
+      start.setDate(now.getDate() - now.getDay());
+      start.setHours(0, 0, 0, 0);
+      return { from: start, to: now };
+    }
+    if (filter === "month") {
+      start.setDate(1);
+      start.setHours(0, 0, 0, 0);
+      return { from: start, to: now };
+    }
+    return null;
+  };
+
+  const handlePresetDownload = (filter) => {
+    const allRows = dashboardData?.dashboardInfo?.consumerList || [];
+
+    const range = getDateRange(filter);
+
+    if (!range) return;
+
+    const filtered = allRows.filter((r) => {
+      const ts =
+        r.submittedAt ||
+        r.createdTime ||
+        r.lastModifiedTime ||
+        0;
+
+      return ts >= range.from.getTime() && ts <= range.to.getTime();
+    });
+
+    downloadSurveyorPDF({
+      rows: filtered.length ? filtered : allRows,
+      surveyorName: fullName,
+      vendorName,
+      supervisorName,
+      employeeId,
+      mobileNumber,
+      dashboardInfo: dashboardData?.dashboardInfo,
+      t,
+    });
+
+    setShowReportMenu(false);
+    setShowCustomPicker(false);
+  };
+
+  const handleCustomDownload = () => {
+    if (!customDate.from || !customDate.to) {
+      alert(t("SELECT_DATE_RANGE") || "Please select both From and To dates.");
+      return;
+    }
+    const from = new Date(customDate.from);
+    const to = new Date(customDate.to);
+    to.setHours(23, 59, 59, 999);
+    const allRows = dashboardData?.dashboardInfo?.consumerList || [];
+    const filtered = allRows.filter((r) => {
+      const ts = r.createdTime || r.lastModifiedTime || 0;
+      return ts >= from.getTime() && ts <= to.getTime();
+    });
+    downloadSurveyorPDF({
+      rows: filtered.length ? filtered : allRows,
+      surveyorName: fullName,
+      vendorName,
+      supervisorName,
+      employeeId,
+      mobileNumber,
+      dashboardInfo: dashboardData?.dashboardInfo,
+      t,
+    });
+    setShowReportMenu(false);
+    setShowCustomPicker(false);
+  };
+
   const StatCard = ({ title, value, type, isLoading }) => (
     <div className={`stat-card ${type}`}>
       {isLoading ? (
@@ -136,18 +257,18 @@ const SurveyorDetailsDashboard = () => {
 
   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);
   };
 
+  const closeModal = async () => {
+    setShowModal(false);
+  };
+
   return (
     <Card className="surveyor-dashboard">
-      {/* Header */}
+      {/* Header + Download Report */}
       <div className="ekyc-dashboard-section">
         <div className="ekyc-dashboard-header">
           <div className="avatar">{fullName?.charAt(0)?.toUpperCase()}</div>
@@ -162,6 +283,83 @@ const SurveyorDetailsDashboard = () => {
             </div>
           </div>
         </div>
+
+        {/* Download Report — far right */}
+        <div className="report-download" ref={reportMenuRef}>
+          <button
+            className="download-btn"
+            onClick={() => {
+              setShowReportMenu((p) => !p);
+              setShowCustomPicker(false);
+            }}
+          >
+            {t("DOWNLOAD_REPORT") || "Download Report"}
+          </button>
+
+          {showReportMenu && (
+            <div className="report-menu">
+              {[
+                { label: t("TODAY") || "Today", key: "today" },
+                { label: t("THIS_WEEK") || "This Week", key: "week" },
+                { label: t("THIS_MONTH") || "This Month", key: "month" },
+              ].map(({ label, key }) => (
+                <div
+                  key={key}
+                  className="menu-item"
+                  onClick={() => handlePresetDownload(key)}
+                >
+                  {label}
+                </div>
+              ))}
+
+              <div
+                className="custom-date-trigger"
+                onClick={() => setShowCustomPicker((p) => !p)}
+              >
+                {t("CUSTOM_DATE") || "Custom Date"}
+              </div>
+
+              {showCustomPicker && (
+                <div className="custom-picker">
+                  <div className="date-field">
+                    <label className="date-label">
+                      {t("FROM_DATE") || "From"}
+                    </label>
+                    <input
+                      type="date"
+                      className="date-input"
+                      value={customDate.from}
+                      onChange={(e) =>
+                        setCustomDate((d) => ({ ...d, from: e.target.value }))
+                      }
+                    />
+                  </div>
+
+                  <div className="date-field">
+                    <label className="date-label">
+                      {t("TO_DATE") || "To"}
+                    </label>
+                    <input
+                      type="date"
+                      className="date-input"
+                      value={customDate.to}
+                      onChange={(e) =>
+                        setCustomDate((d) => ({ ...d, to: e.target.value }))
+                      }
+                    />
+                  </div>
+
+                  <button
+                    className="download-action-btn"
+                    onClick={handleCustomDownload}
+                  >
+                    {t("DOWNLOAD") || "Download"}
+                  </button>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
       </div>
 
       {/* Stats */}
@@ -282,27 +480,31 @@ const SurveyorDetailsDashboard = () => {
         />
       </Card>
       {/* 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)} />}
+      {
+        (!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={closeModal} refetchDashboard={refetchDashboard} />}
     </Card>
+
   );
 };
 

package/src/hook/SupervisorInboxTableConfig.js

@@ -1,6 +1,6 @@
-import React from "react";
 import { useHistory } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import { tableColumnConfig } from "../../../vendor/src/config/tableConfig";
 
 const SupervisorInboxTableConfig = ({
   onPageSizeChange,
@@ -8,7 +8,6 @@ const SupervisorInboxTableConfig = ({
   totalCount,
   table,
   dispatch,
-  checkPathName,
   onSortingByData,
   inboxStyles = {},
   tableStyle = {},
@@ -25,52 +24,6 @@ const SupervisorInboxTableConfig = ({
   const limit = formState?.tableForm?.limit || 10;
   const offset = formState?.tableForm?.offset || 0;
 
-  const tableColumnConfig = [
-    {
-      Header: t("SURVEYOR_ID"),
-      accessor: "id",
-      Cell: ({ row }) => {
-        const id = row.original?.id;
-        return (
-          <span
-            className="ekyc-application-link"
-            style={{ color: "#add8f7", cursor: "pointer", fontWeight: "bold" }}
-            onClick={() => handleReview(id)}
-          >
-            {id || "NA"}
-          </span>
-        );
-      },
-    },
-
-    {
-      Header: t("SURVEYOR_NAME"),
-      accessor: "surveyorName",
-      Cell: ({ row }) => <span>{row.original?.surveyorName || row.original?.name || "NA"}</span>,
-    },
-
-    {
-      Header: t("MOBILE_NUMBER"),
-      accessor: "mobileNo",
-      Cell: ({ row }) => <span>{row.original?.mobileNo || row.original?.owner?.mobileNumber || "NA"}</span>,
-    },
-
-    {
-      Header: t("STATUS"),
-      accessor: "status",
-      Cell: ({ row }) => {
-        const status = row.original?.status || "DEFAULT";
-        return <span className={`ekyc-status-tag ${status}`}>{t(status)}</span>;
-      },
-    },
-
-    {
-      Header: t("SERVICE_TYPE"),
-      accessor: "serviceType",
-      Cell: ({ row }) => <span>{row.original?.serviceType || "NA"}</span>,
-    },
-  ];
-
   return {
     getCellProps: () => ({
       style: {
@@ -94,7 +47,6 @@ const SupervisorInboxTableConfig = ({
           ...formState.tableForm,
           offset: Number(offset) + Number(limit),
         },
-        checkPathName,
       }),
 
     onPrevPage: () =>
@@ -104,7 +56,6 @@ const SupervisorInboxTableConfig = ({
           ...formState.tableForm,
           offset: Number(offset) - Number(limit),
         },
-        checkPathName,
       }),
 
     onLastPage: () =>
@@ -114,21 +65,19 @@ const SupervisorInboxTableConfig = ({
           ...formState.tableForm,
           offset: Math.ceil(totalCount / limit) * limit - Number(limit),
         },
-        checkPathName,
       }),
 
     onFirstPage: () =>
       dispatch({
         action: "mutateTableForm",
         data: { ...formState.tableForm, offset: 0 },
-        checkPathName,
       }),
 
     totalRecords: totalCount,
     onSort: onSortingByData,
 
     data: table,
-    columns: tableColumnConfig,
+    columns: tableColumnConfig(t, handleReview),
 
     inboxStyles: { ...inboxStyles },
     tableStyle: { ...tableStyle },

package/src/hook/useInboxTableConfig.js

@@ -106,17 +106,17 @@ const useInboxTableConfig = ({
     manualPagination: true,
     initSortId: "applicationDate",
     onPageSizeChange: onPageSizeChange,
-    currentPage: Math.floor(offset / limit),
+    currentPage: offset,
     onNextPage: () =>
       dispatch({
         action: "mutateTableForm",
-        data: { ...formState.tableForm, offset: parseInt(formState.tableForm?.offset) + parseInt(formState.tableForm?.limit) },
+        data: { ...formState.tableForm, offset: parseInt(formState.tableForm?.offset) + 10 },
         checkPathName,
       }),
     onPrevPage: () =>
       dispatch({
         action: "mutateTableForm",
-        data: { ...formState.tableForm, offset: parseInt(formState.tableForm?.offset) - parseInt(formState.tableForm?.limit) },
+        data: { ...formState.tableForm, offset: parseInt(formState.tableForm?.offset) - 10 },
         checkPathName,
       }),
     pageSizeLimit: limit,
@@ -127,7 +127,7 @@ const useInboxTableConfig = ({
     onLastPage: () =>
       dispatch({
         action: "mutateTableForm",
-        data: { ...formState.tableForm, offset: Math.ceil(totalCount / 10) * 10 - parseInt(formState.tableForm?.limit) },
+        data: { ...formState.tableForm, offset: Math.max(0, Math.ceil(totalCount / limit) - 10) },
         checkPathName,
       }),
     onFirstPage: () => dispatch({ action: "mutateTableForm", data: { ...formState.tableForm, offset: 0 }, checkPathName }),

package/src/pages/citizen/Inbox.js

@@ -102,7 +102,7 @@ const Inbox = ({ parentRoute }) => {
 
   const checkPathName = location.pathname.includes("ekyc/inbox");
   const PropsForInboxLinks = {
-    headerText: checkPathName ? "MODULE_WATER" : "MODULE_SW",
+    headerText: "EKYC_MODULE",
   };
 
   const SearchFormFields = useCallback(
@@ -154,10 +154,10 @@ const Inbox = ({ parentRoute }) => {
 
   const propsForFilterForm = {
     FilterFormFields,
-    onFilterFormSubmit: () => {},
+    onFilterFormSubmit: () => { },
     filterFormDefaultValues: "",
     resetFilterFormDefaultValues: "",
-    onFilterFormReset: () => {},
+    onFilterFormReset: () => { },
   };
 
   function formReducer(state, payload) {
@@ -239,9 +239,9 @@ const Inbox = ({ parentRoute }) => {
       <InboxComposer
         {...{
           isInboxLoading,
-          PropsForInboxLinks,
+          // PropsForInboxLinks,
           ...propsForSearchForm,
-          ...propsForFilterForm,
+          // ...propsForFilterForm,
           // ...propsForMobileSortForm,
           propsForInboxTable,
           // propsForInboxMobileCards,

package/src/pages/citizen/index.js

@@ -7,9 +7,7 @@ import PropertyInfo from "../../components/PropertyInfo";
 import MeterDetails from "../../components/MeterDetails";
 import Review from "../../components/Review";
 import Home from "./Home";
-import Dashboard from "../../components/Dashboard";
 import Inbox from "./Inbox";
-import AddressDetails from "../../components/AddressDetails";
 import AssignEkyc from "../../components/AssignEkyc";
 import SurveyorDetailsCard from "../../components/SurveyorDetailsCard";
 import VendorDetails from "../../components/VendorDetails";
@@ -21,21 +19,50 @@ const CitizenApp = () => {
 
   sessionStorage.removeItem("revalidateddone");
 
-  const getBreadcrumbLabel = () => {
+  const getDynamicBreadcrumbs = () => {
     const pathname = location.pathname;
-    if (pathname.includes("/create-kyc")) return "EKYC_CREATE_KYC";
-    if (pathname.includes("/aadhaar-verification")) return "EKYC_AADHAAR_VERIFICATION";
-    if (pathname.includes("/address-details")) return "EKYC_ADDRESS_DETAILS";
-    if (pathname.includes("/property-info")) return "EKYC_PROPERTY_INFO";
-    if (pathname.includes("/meter-details")) return "EKYC_METER_DETAILS";
-    if (pathname.includes("/review")) return "EKYC_REVIEW";
-    return "EKYC_HOME";
-  };
 
-  const breadcrumbs = [{ icon: HomeIcon, path: "/digit-ui/citizen" }, { label: t(getBreadcrumbLabel()) }];
+    // Parent crumb — always present and clickable → redirects to eKYC citizen home
+    const crumbs = [
+      { icon: HomeIcon, path: "/digit-ui/citizen" },
+      { label: t("EKYC_MODULE_NAME"), path: `/digit-ui/citizen/ekyc` },
+    ];
+
+    // Child crumb — only appended when on a sub-page
+    if (pathname.includes("/create-kyc")) {
+      crumbs.push({ label: t("EKYC_CREATE_KYC") });
+    } else if (pathname.includes("/aadhaar-verification")) {
+      crumbs.push({ label: t("EKYC_AADHAAR_VERIFICATION") });
+    } else if (pathname.includes("/address-details")) {
+      crumbs.push({ label: t("EKYC_ADDRESS_DETAILS") });
+    } else if (pathname.includes("/property-info")) {
+      crumbs.push({ label: t("EKYC_PROPERTY_INFO") });
+    } else if (pathname.includes("/meter-details")) {
+      crumbs.push({ label: t("EKYC_METER_DETAILS") });
+    } else if (pathname.includes("/review")) {
+      crumbs.push({ label: t("EKYC_INBOX"), path: `/digit-ui/citizen/ekyc/inbox` });
+      crumbs.push({ label: t("EKYC_REVIEW") });
+    } else if (pathname.includes("/assign/surveyor-details")) {
+      crumbs.push({ label: t("EKYC_ASSIGN"), path: `/digit-ui/citizen/ekyc/assign` });
+      crumbs.push({ label: t("EKYC_SURVEYOR_DETAILS") });
+    } else if (pathname.includes("/assign")) {
+      crumbs.push({ label: t("EKYC_ASSIGN") });
+    } else if (pathname.includes("/surveyor-dashboard")) {
+      crumbs.push({ label: t("EKYC_SURVEYOR_DASHBOARD") });
+    } else if (pathname.includes("/dashboard")) {
+      crumbs.push({ label: t("EKYC_DASHBOARD") });
+    } else if (pathname.includes("/inbox")) {
+      crumbs.push({ label: t("EKYC_INBOX") });
+    } else if (pathname.includes("/status/")) {
+      crumbs.push({ label: t("EKYC_STATUS") });
+    }
+    // home (exact path) → no child crumb
+
+    return crumbs;
+  };
 
-  const roles = Digit.SessionStorage.get("User")?.info?.roles.map((ele) => ele.code);
-  const isEkyAction = (!roles?.includes("EKYC_SURVEYOR") || roles?.includes("EMPLOYEE"))
+  // const roles = Digit.SessionStorage.get("User")?.info?.roles.map((ele) => ele.code);
+  // const isEkyAction = (!roles?.includes("EKYC_SURVEYOR") || roles?.includes("EMPLOYEE"))
   return (
     <React.Fragment>
       <div className="ground-container form-container">
@@ -47,7 +74,7 @@ const CitizenApp = () => {
             </React.Fragment>
           }
           onLeftClick={() => window.history.back()}
-          breadcrumbs={breadcrumbs}
+          breadcrumbs={getDynamicBreadcrumbs()}
         />
 
         <Switch>
@@ -86,14 +113,14 @@ const CitizenApp = () => {
             )}
           />
 
-          <PrivateRoute
+          {/* <PrivateRoute
             path={`${path}/address-details`}
             component={() => (
               <LayoutWrapper layoutClass="normal">
                 <AddressDetails />
               </LayoutWrapper>
             )}
-          />
+          /> */}
 
           <PrivateRoute
             path={`${path}/property-info`}