@djb25/digit-ui-module-ekyc 1.0.24 → 1.0.26

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 = {
@@ -82,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 />;
   }
@@ -122,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 ? (
@@ -140,23 +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 () => {
-    await refetchDashboard();
     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>
@@ -171,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 */}
@@ -291,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={closeModal} />}
+      {
+        (!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/config/AadhaarVerificationConfig.js

@@ -0,0 +1,367 @@
+import React from "react";
+import { UploadFile, CheckBox, Dropdown } from "@djb25/digit-ui-react-components";
+
+const AadhaarVerificationConfig = (t, formData = {}, uploadFile, setDocumentId, documentId) => {
+  const consumerType = formData?.consumerType?.name || formData?.consumerType;
+  const occupantType = formData?.occupantType?.name || formData?.occupantType;
+  const informantIsConsumer = formData?.informantIsConsumer ?? true;
+
+  const fields = [
+    {
+      label: t("Consumer Type"),
+      isMandatory: true,
+      type: "custom",
+      key: "consumerType",
+      populators: {
+        name: "consumerType",
+        component: (props) => (
+          <Dropdown
+            option={[{ name: "Individual" }, { name: "Govt" }, { name: "Company_Society_Org" }]}
+            optionKey="name"
+            selected={props.value}
+            select={props.onChange}
+          />
+        ),
+      },
+    },
+    {
+      label: t("Occupant Type"),
+      isMandatory: true,
+      type: "custom",
+      key: "occupantType",
+      populators: {
+        name: "occupantType",
+        component: (props) => (
+          <Dropdown
+            option={[{ name: "Self" }, { name: "Tenanted" }]}
+            optionKey="name"
+            selected={props.value}
+            select={props.onChange}
+          />
+        ),
+      },
+    },
+    {
+      label: t("Category Type"),
+      isMandatory: true,
+      type: "custom",
+      key: "categoryType",
+      populators: {
+        name: "categoryType",
+        component: (props) => (
+          <Dropdown
+            option={[{ name: "Bulk" }, { name: "Non-Bulk" }]}
+            optionKey="name"
+            selected={props.value}
+            select={props.onChange}
+          />
+        ),
+      },
+    },
+    {
+      label: t("First Name"),
+      isMandatory: true,
+      type: "text",
+      populators: {
+        name: "firstName",
+        validation: { required: true },
+      },
+    },
+    {
+      label: t("Middle Name"),
+      isMandatory: false,
+      type: "text",
+      populators: {
+        name: "middleName",
+      },
+    },
+    {
+      label: t("Last Name"),
+      isMandatory: false,
+      type: "text",
+      populators: {
+        name: "lastName",
+      },
+    },
+    {
+      label: t("Gender"),
+      isMandatory: false,
+      type: "custom",
+      key: "gender",
+      populators: {
+        name: "gender",
+        component: (props) => (
+          <Dropdown
+            option={[{ name: "Male" }, { name: "Female" }, { name: "Others" }, { name: "Not prefer to say" }]}
+            optionKey="name"
+            selected={props.value}
+            select={props.onChange}
+          />
+        ),
+      },
+    },
+    {
+      label: t("Parent/Spouse Name"),
+      isMandatory: false,
+      type: "text",
+      populators: {
+        name: "parentSpouseName",
+      },
+    },
+    {
+      label: t("Mobile"),
+      isMandatory: true,
+      type: "text",
+      populators: {
+        name: "mobile",
+        validation: {
+          required: true,
+          pattern: /^[6-9]\d{9}$/,
+        },
+        error: t("Invalid mobile number"),
+      },
+    },
+    {
+      label: t("WhatsApp"),
+      isMandatory: false,
+      type: "text",
+      populators: {
+        name: "whatsapp",
+      },
+    },
+    {
+      label: t("Email"),
+      isMandatory: false,
+      type: "text",
+      populators: {
+        name: "email",
+        validation: {
+          pattern: /^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+\.[a-zA-Z0-9.-]+$/,
+        },
+        error: t("Invalid email address"),
+      },
+    },
+    {
+      label: t("No. of Residents"),
+      isMandatory: true,
+      type: "text",
+      populators: {
+        name: "residents",
+        validation: {
+          required: true,
+          min: 1,
+        },
+      },
+    },
+    {
+      label: t("Type of Identity"),
+      isMandatory: true,
+      type: "custom",
+      key: "identityType",
+      populators: {
+        name: "identityType",
+        component: (props) => (
+          <Dropdown
+            option={[{ name: "Aadhaar Card" }, { name: "Driving License" }, { name: "Passport" }, { name: "Voter ID" }]}
+            optionKey="name"
+            selected={props.value}
+            select={props.onChange}
+          />
+        ),
+      },
+    },
+    {
+      label: t("Proof of Identity"),
+      isMandatory: false,
+      type: "custom",
+      key: "idFile",
+      populators: {
+        name: "idFile",
+        component: (props) => (
+          <UploadFile
+            onUpload={(e) => uploadFile(e, props.onChange)}
+            onDelete={() => {
+              props.onChange(null);
+              setDocumentId(null);
+            }}
+            message={props.value ? t("Uploaded") : t("No file selected")}
+          />
+        ),
+      },
+    },
+    {
+      label: t("Document Number"),
+      isMandatory: false,
+      type: "text",
+      populators: {
+        name: "documentNumber",
+      },
+    },
+    {
+      label: t("Informant Is Consumer"),
+      isMandatory: false,
+      type: "custom",
+      key: "informantIsConsumer",
+      populators: {
+        name: "informantIsConsumer",
+        component: (props) => (
+          <CheckBox
+            label={t("Yes, the informant is the consumer")}
+            checked={props.value ?? true}
+            onChange={(e) => props.onChange(e.target.checked)}
+          />
+        ),
+      },
+    },
+  ];
+
+  // Informant conditional fields
+  if (!informantIsConsumer) {
+    fields.push(
+      {
+        label: t("Informant Name"),
+        isMandatory: false,
+        type: "text",
+        populators: {
+          name: "informantName",
+        },
+      },
+      {
+        label: t("Informant Relation"),
+        isMandatory: false,
+        type: "text",
+        populators: {
+          name: "informantRelation",
+        },
+      }
+    );
+  }
+
+  // Tenant conditional fields
+  if (occupantType === "Tenanted") {
+    fields.push({
+      label: t("Document Proof"),
+      isMandatory: false,
+      type: "custom",
+      key: "documentProof",
+      populators: {
+        name: "documentProof",
+        component: (props) => (
+          <UploadFile
+            onUpload={(e) => uploadFile(e, props.onChange)}
+            onDelete={() => {
+              props.onChange(null);
+              setDocumentId(null);
+            }}
+            message={props.value ? t("Uploaded") : t("No file selected")}
+          />
+        ),
+      },
+    });
+
+    if (!documentId) {
+      fields.push(
+        {
+          label: t("Owner Mobile"),
+          isMandatory: true,
+          type: "text",
+          populators: {
+            name: "ownerMobile",
+            validation: {
+              required: true,
+              pattern: /^[6-9]\d{9}$/,
+            },
+          },
+        },
+        {
+          label: t("Tenant Verification"),
+          isMandatory: false,
+          type: "text",
+          populators: {
+            name: "tenantVerification",
+          },
+        }
+      );
+    }
+  }
+
+  // Govt conditional fields
+  if (consumerType === "Govt") {
+    fields.push(
+      {
+        label: t("Designation"),
+        isMandatory: false,
+        type: "text",
+        populators: {
+          name: "designation",
+        },
+      },
+      {
+        label: t("Department"),
+        isMandatory: false,
+        type: "text",
+        populators: {
+          name: "department",
+        },
+      },
+      {
+        label: t("Employee ID"),
+        isMandatory: false,
+        type: "text",
+        populators: {
+          name: "employeeId",
+        },
+      }
+    );
+  }
+
+  // Company / Society / Org conditional fields
+  if (consumerType === "Company_Society_Org") {
+    fields.push(
+      {
+        label: t("Entity Name"),
+        isMandatory: false,
+        type: "text",
+        populators: {
+          name: "entityName",
+        },
+      },
+      {
+        label: t("Contact Person"),
+        isMandatory: false,
+        type: "text",
+        populators: {
+          name: "contactPerson",
+        },
+      }
+    );
+  }
+
+  // Consent checkbox field
+  fields.push({
+    label: t("Consent"),
+    isMandatory: true,
+    type: "custom",
+    key: "consent",
+    populators: {
+      name: "consent",
+      validation: { required: true },
+      component: (props) => (
+        <CheckBox
+          label={t("I hereby consent to verify my Aadhaar details.")}
+          checked={props.value ?? false}
+          onChange={(e) => props.onChange(e.target.checked)}
+        />
+      ),
+    },
+  });
+
+  return [
+    {
+      head: t("EKYC_CONSUMER_CONNECTION"),
+      body: fields,
+    },
+  ];
+};
+
+export default AadhaarVerificationConfig;