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

package/src/components/SurveyorDetailsCard.js

@@ -0,0 +1,282 @@
+import React, { useMemo, useState } 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";
+
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+
+import AssignEkycModal from "./AssignEkycModal";
+
+const SurveyorDetailsDashboard = () => {
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+
+  const [showModal, setShowModal] = useState(false);
+  const [showOptions, setShowOptions] = useState(false);
+
+  const { id: surveyorId } = useParams();
+  const ownerIds = Digit.SessionStorage.get("User")?.info?.uuid;
+
+  const { t } = useTranslation();
+
+  const searchParams = surveyorId ? { ids: surveyorId } : { ownerIds };
+
+  const { data: surveyorSearchResponse, isLoading } = Digit.Hooks.fsm.useSurveyorSearch(tenantId, searchParams, { staleTime: Infinity });
+
+  const roles = Digit.SessionStorage.get("User")?.info?.roles.map((ele) => ele.code);
+
+  const surveyor = useMemo(() => {
+    return surveyorSearchResponse?.surveyors?.[0] || null;
+  }, [surveyorSearchResponse]);
+
+  const knoColumns = React.useMemo(
+    () => [
+      {
+        Header: t("KNO"),
+        accessor: "kno",
+      },
+      {
+        Header: t("CONSUMER_NAME"),
+        accessor: "consumerName",
+      },
+      {
+        Header: t("MOBILE_NO"),
+        accessor: "mobileNumber",
+      },
+      {
+        Header: t("STATUS"),
+        accessor: "status",
+        Cell: ({ value }) => <span className={`status-badge ${value?.toLowerCase() || ""}`}>{value}</span>,
+      },
+      {
+        Header: t("ASSIGNED_DATE"),
+        accessor: "assignedDate",
+      },
+      {
+        Header: t("COMPLETED_DATE"),
+        accessor: "completedDate",
+      },
+    ],
+    [t]
+  );
+
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  if (!surveyor) {
+    return (
+      <Card>
+        <div style={{ padding: "24px" }}>{t("NO_SURVEYOR_FOUND")}</div>
+      </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 },
+    { day: "Tue", completed: 6 },
+    { day: "Wed", completed: 3 },
+    { day: "Thu", completed: 8 },
+    { day: "Fri", completed: 5 },
+    { day: "Sat", completed: 7 },
+    { day: "Sun", completed: 2 },
+  ];
+
+  const statusData = [
+    {
+      name: "Completed",
+      value: surveyor?.completedCases || 0,
+      color: "#10B981",
+    },
+    {
+      name: "Pending",
+      value: surveyor?.pendingCases || 0,
+      color: "#F59E0B",
+    },
+    {
+      name: "Rejected",
+      value: surveyor?.rejectedCases || 0,
+      color: "#EF4444",
+    },
+  ];
+
+  const StatCard = ({ title, value, type }) => (
+    <div className={`stat-card ${type}`}>
+      <div className="stat-title">{title}</div>
+
+      <div className="stat-value">{value}</div>
+    </div>
+  );
+
+  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);
+  };
+
+  return (
+    <Card className="surveyor-dashboard">
+      {/* Header */}
+      <div className="ekyc-dashboard-section">
+        <div className="ekyc-dashboard-header">
+          <div className="avatar">{fullName?.charAt(0)?.toUpperCase()}</div>
+
+          <div className="header-content">
+            <h2 className="name">{fullName}</h2>
+
+            <div className="designation">{surveyor?.description || t("FIELD_SURVEYOR")}</div>
+
+            <div className="employee-id">
+              {t("EMPLOYEE_ID")}: {employeeId}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 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" />
+      </div>
+
+      {/* Charts */}
+      <div className="charts-wrapper">
+        {/* Weekly Chart */}
+        <div className="chart-card">
+          <h3 className="chart-title">{t("WEEKLY_SURVEY_PROGRESS")}</h3>
+
+          <ResponsiveContainer width="100%" height={300}>
+            <BarChart data={weeklyData}>
+              <CartesianGrid strokeDasharray="3 3" />
+
+              <XAxis dataKey="day" />
+
+              <YAxis />
+
+              <Tooltip />
+
+              <Bar dataKey="completed" fill="#0B2559" radius={[6, 6, 0, 0]} />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+
+        {/* Pie Chart */}
+        <div className="chart-card">
+          <h3 className="chart-title">{t("CASE_DISTRIBUTION")}</h3>
+
+          <ResponsiveContainer width="100%" height={300}>
+            <PieChart>
+              <Pie data={statusData} dataKey="value" nameKey="name" outerRadius={90} label>
+                {statusData.map((entry, index) => (
+                  <Cell key={index} fill={entry.color} />
+                ))}
+              </Pie>
+
+              <Tooltip />
+
+              <Legend />
+            </PieChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+
+      {/* Details */}
+      <div className="ekyc-dashboard-section">
+        <div className="details-grid">
+          <div className="detail-item">
+            <span className="label">{t("MOBILE")}:</span>
+            <span className="value">{surveyor?.owner?.mobileNumber || surveyor?.mobileNo || "N/A"}</span>
+          </div>
+
+          <div className="detail-item">
+            <span className="label">{t("EMAIL")}:</span>
+            <span className="value">{surveyor?.owner?.emailId || "N/A"}</span>
+          </div>
+
+          <div className="detail-item">
+            <span className="label">{t("GENDER")}:</span>
+            <span className="value">{surveyor?.owner?.gender || "N/A"}</span>
+          </div>
+
+          <div className="detail-item">
+            <span className="label">{t("STATUS")}:</span>
+            <span className="value">{surveyor?.status || "N/A"}</span>
+          </div>
+
+          <div className="detail-item">
+            <span className="label">{t("SERVICE_TYPE")}:</span>
+            <span className="value">{surveyor?.additionalDetails?.serviceType || "N/A"}</span>
+          </div>
+
+          <div className="detail-item">
+            <span className="label">{t("VENDOR_ID")}:</span>
+            <span className="value">{surveyor?.vendorId || "N/A"}</span>
+          </div>
+        </div>
+      </div>
+
+      <Table
+        t={t}
+        tableTitle={t("ASSIGNED_KNOS")}
+        data={assignedKnos}
+        columns={knoColumns}
+        totalRecords={assignedKnos?.length}
+        isPaginationRequired={true}
+        pageSizeLimit={10}
+        manualPagination={false}
+      />
+
+      {/* 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)} />}
+    </Card>
+  );
+};
+
+export default SurveyorDetailsDashboard;

package/src/components/VendorDetails.jsx

@@ -5,12 +5,26 @@ import { ekycMockData } from "./mockData";
 import ExecutiveLineChart from "./analytics/charts/ExecutiveLineChart";
 import ExecutiveBarChart from "./analytics/charts/ExecutiveBarChart";
 import ExecutivePieChart from "./analytics/charts/ExecutivePieChart";
+import { Loader } from "@djb25/digit-ui-react-components";
 
 const VendorDetails = () => {
   const history = useHistory();
-  const { vendorId } = useParams();
+  const { vendorId = 1 } = useParams();
   const vendor = useMemo(() => ekycMockData.vendors.find((item) => item.id === Number(vendorId)), [vendorId]);
 
+  const tenantId = Digit.ULBService.getCurrentTenantId();
+  const { isLoading, data: dashboardData } = Digit.Hooks.ekyc.useEkycSurveyorDashboard(
+    {},
+    {
+      tenantId,
+      offset: 0,
+      limit: 10,
+    },
+    {
+      enabled: !!tenantId,
+    }
+  );
+
   if (!vendor) {
     return (
       <div className="ekyc-dashboard-wrapper">
@@ -38,6 +52,9 @@ const VendorDetails = () => {
     rejected: row.rejected,
   }));
 
+  console.log(dashboardData);
+  if (isLoading) <Loader />;
+
   return (
     <div className="ekyc-dashboard-wrapper">
       <div className="dashboard-shell detail-shell">

package/src/hook/SupervisorInboxTableConfig.js

@@ -0,0 +1,138 @@
+import React from "react";
+import { useHistory } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+const SupervisorInboxTableConfig = ({
+  onPageSizeChange,
+  formState,
+  totalCount,
+  table,
+  dispatch,
+  checkPathName,
+  onSortingByData,
+  inboxStyles = {},
+  tableStyle = {},
+}) => {
+  const { t } = useTranslation();
+  const history = useHistory();
+
+  const userType = Digit.SessionStorage.get("User")?.info?.type?.toLowerCase() || "citizen";
+
+  const handleReview = (id) => {
+    history.push(`/digit-ui/${userType}/ekyc/assign/surveyor-details/${id}`);
+  };
+
+  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: {
+        padding: "8px",
+        fontSize: "12px",
+      },
+    }),
+
+    disableSort: false,
+    autoSort: false,
+    manualPagination: true,
+
+    currentPage: Math.floor(offset / limit),
+
+    onPageSizeChange,
+
+    onNextPage: () =>
+      dispatch({
+        action: "mutateTableForm",
+        data: {
+          ...formState.tableForm,
+          offset: Number(offset) + Number(limit),
+        },
+        checkPathName,
+      }),
+
+    onPrevPage: () =>
+      dispatch({
+        action: "mutateTableForm",
+        data: {
+          ...formState.tableForm,
+          offset: Number(offset) - Number(limit),
+        },
+        checkPathName,
+      }),
+
+    onLastPage: () =>
+      dispatch({
+        action: "mutateTableForm",
+        data: {
+          ...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,
+
+    inboxStyles: { ...inboxStyles },
+    tableStyle: { ...tableStyle },
+  };
+};
+
+export default SupervisorInboxTableConfig;

package/src/hook/useInboxTableConfig.js

@@ -26,10 +26,11 @@ const useInboxTableConfig = ({
 
   const limit = formState?.tableForm?.limit || 10;
   const offset = formState?.tableForm?.offset || 0;
+  const userType = Digit.SessionStorage.get("User")?.info?.type?.toLowerCase() || "citizen";
 
   React.useEffect(() => {
     if (reviewData) {
-      history.push("/digit-ui/employee/ekyc/review", { kNumber: selectedKno, aadhaarData: reviewData?.aadhaarData, reviewData });
+      history.push(`/digit-ui/${userType}/ekyc/review/${selectedKno}`, { aadhaarData: reviewData?.aadhaarData, reviewData });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [reviewData]);
@@ -70,8 +71,8 @@ const useInboxTableConfig = ({
       accessor: "ekycStatus",
       Cell: ({ row }) => {
         const ekycStatus = row.original?.ekycstatus || "NA";
-        return <span className={`ekyc-status-tag ${ekycStatus}`}>{t(`${ekycStatus}`)}</span>
-      }
+        return <span className={`ekyc-status-tag ${ekycStatus}`}>{t(`${ekycStatus}`)}</span>;
+      },
     },
     {
       Header: t("EKYC_REVIEW"),

package/src/pages/citizen/Home.js

@@ -12,7 +12,20 @@ const Home = () => {
         link: `/digit-ui/citizen/ekyc/dashboard`,
       },
     ],
-    links: [
+    links: [],
+  };
+  const citizenInfo = Digit.SessionStorage.get("User")?.info?.roles;
+  const roles = citizenInfo.map((ele) => ele.code);
+
+  if (roles.includes("EKYC_SURVEYOR")) {
+    propsForModuleCard.links.push({
+      label: t("SURVEYOR_DASHBOARD"),
+      link: `/digit-ui/citizen/ekyc/surveyor-dashboard`,
+    });
+  }
+
+  if (roles.includes("EKYC_SUPERVISOR") || roles.includes("EKYC_VENDOR")) {
+    propsForModuleCard.links.push(
       {
         label: t("EKYC_DASHBOARD"),
         link: `/digit-ui/citizen/ekyc/dashboard`,
@@ -21,20 +34,20 @@ const Home = () => {
         label: t("EKYC_INBOX"),
         link: `/digit-ui/citizen/ekyc/inbox`,
       },
-      // {
-      //     label: t("EKYC_CREATE_KYC"),
-      //     link: `/digit-ui/citizen/ekyc/create-kyc`
-      // },
-      // {
-      //     label: t("EKYC_UPDATE_KYC"),
-      //     link: `/digit-ui/citizen/ekyc/update-kyc`
-      // },
       {
-        label: t("EKYC_MAPPING"),
-        link: `/digit-ui/citizen/ekyc/mapping`,
-      },
-    ],
-  };
+        label: t("EKYC_ASSIGN"),
+        link: `/digit-ui/citizen/ekyc/assign`,
+      }
+    );
+  }
+
+  if (roles.length === 1 && roles.includes("CITIZEN")) {
+    propsForModuleCard.links.push({
+      label: t("EKYC_STATUS"),
+      link: `/digit-ui/citizen/ekyc/:id`,
+    });
+  }
+
   return <ModuleLinksView links={propsForModuleCard.links} />;
 };
 

package/src/pages/citizen/index.js

@@ -10,6 +10,9 @@ 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";
 
 const CitizenApp = () => {
   const { t } = useTranslation();
@@ -31,6 +34,8 @@ const CitizenApp = () => {
 
   const breadcrumbs = [{ icon: HomeIcon, path: "/digit-ui/citizen" }, { label: t(getBreadcrumbLabel()) }];
 
+  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">
@@ -59,7 +64,7 @@ const CitizenApp = () => {
             path={`${path}/dashboard`}
             component={() => (
               <LayoutWrapper layoutClass="normal">
-                <Dashboard />
+                <VendorDetails />
               </LayoutWrapper>
             )}
           />
@@ -116,6 +121,48 @@ const CitizenApp = () => {
               </LayoutWrapper>
             )}
           />
+          <PrivateRoute
+            path={`${path}/assign`}
+            exact
+            component={() => (
+              <LayoutWrapper layoutClass="normal">
+                <AssignEkyc />
+              </LayoutWrapper>
+            )}
+          />
+          <PrivateRoute
+            path={`${path}/assign/surveyor-details/:id`}
+            exact
+            component={() => (
+              <LayoutWrapper layoutClass="action">
+                <SurveyorDetailsCard />
+              </LayoutWrapper>
+            )}
+          />
+          <PrivateRoute
+            path={`${path}/surveyor-dashboard/:id`}
+            component={() => (
+              <LayoutWrapper layoutClass="normal">
+                <SurveyorDetailsCard />
+              </LayoutWrapper>
+            )}
+          />
+          <PrivateRoute
+            path={`${path}/surveyor-dashboard`}
+            component={() => (
+              <LayoutWrapper layoutClass="normal">
+                <SurveyorDetailsCard />
+              </LayoutWrapper>
+            )}
+          />
+          <PrivateRoute
+            path={`${path}/status/:applicationId`}
+            component={() => (
+              <LayoutWrapper layoutClass="normal">
+                <Review />
+              </LayoutWrapper>
+            )}
+          />
         </Switch>
       </div>
     </React.Fragment>