attendance and leave update

src/_nav.js

@@ -38,14 +38,6 @@ const _nav = [
     icon: <CIcon icon={cilSpeedometer} customClassName="nav-icon" />,
     group: "",
   },
-  {
-    component: CNavItem,
-    name: "Principal Distributor",
-    icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
-    to: "/principal-distributor",
-    group: "PrincipalDistributor",
-  },
-
   {
     component: CNavGroup,
     name: "Product Management",
@@ -76,6 +68,13 @@ const _nav = [
       },
     ],
   },
+  {
+    component: CNavItem,
+    name: "Principal Distributor",
+    icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
+    to: "/principal-distributor",
+    group: "PrincipalDistributor",
+  },
   {
     component: CNavItem,
     name: "Sales Coordinator",
@@ -90,6 +89,13 @@ const _nav = [
     to: "/territorymanagers",
     group: "TerritoryManager",
   },
+  // {
+  //   component: CNavItem,
+  //   name: "retail Distributor",
+  //   icon: <CIcon icon={cilCompress} customClassName="nav-icon" />,
+  //   to: "/retail-distributor",
+  //   group: "RetailDistributor",
+  // },
   {
     component: CNavItem,
     name: "Attendance",

src/routes.js

@@ -139,6 +139,7 @@ import AttendanceTerritoryManager from "./views/Attendance/AttendanceTerritoryMa
 import SingleUserAttendance from "./views/Attendance/SingleUserAttendance";
 import SingleUserleave from "./views/Leaves/SingleUserLeave";
 import LeaveTerritoryManager from "./views/Leaves/LeaveTerritoryManager";
+import RetailDistributor from "./views/RetailDistributors/RetailDistributor";
 const routes = [
   //dashboard
 
@@ -294,6 +295,13 @@ const routes = [
     element: Edittax,
     navName: "Product Management",
   },
+  // RetailDistributor
+  {
+    path: "/retail-distributor",
+    name: "RetailDistributor",
+    element: RetailDistributor,
+    navName: "RetailDistributor",
+  },
   //----------------------- End Product Management Routes------------------------------------------------
 
   //Departure

src/views/Attendance/AttendanceSalesCoordinator.js

@@ -1,10 +1,11 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef,useCallback } from "react";
 import { Link } from "react-router-dom";
 import axios from "axios";
 import Button from "@material-ui/core/Button";
 import { useNavigate } from "react-router-dom";
 import { isAutheticated } from "src/auth";
 import swal from "sweetalert";
+import debounce from 'lodash.debounce';
 
 const AttendanceSalesCoordinator = () => {
   const token = isAutheticated();
@@ -55,7 +56,14 @@ const AttendanceSalesCoordinator = () => {
   useEffect(() => {
     getSalesCoOrdinatorsData();
   }, [success, itemPerPage, currentPage]);
+  const debouncedSearch = useCallback(debounce(() => {
+    setCurrentPage(1);
+    getSalesCoOrdinatorsData();
+  }, 500), []);
 
+  const handleSearchChange = () => {
+    debouncedSearch();
+  };
   return (
     <div className="main-content">
       <div className="page-content">
@@ -119,6 +127,7 @@ const AttendanceSalesCoordinator = () => {
                         placeholder="SalesCoOrdinator name"
                         className="form-control"
                         ref={nameRef}
+                        onChange={handleSearchChange}
                         disabled={loading}
                       />
                     </div>
@@ -129,6 +138,7 @@ const AttendanceSalesCoordinator = () => {
                         placeholder="Mobile Number"
                         className="form-control"
                         ref={mobileRef}
+                        onChange={handleSearchChange}
                         disabled={loading}
                       />
                     </div>
@@ -137,6 +147,7 @@ const AttendanceSalesCoordinator = () => {
                       <select
                         className="form-control"
                         ref={VerifySalesCoOrdinatorRef}
+                        onChange={handleSearchChange}
                         disabled={loading}
                       >
                         <option value="">----Select----</option>
@@ -144,18 +155,6 @@ const AttendanceSalesCoordinator = () => {
                         <option value="false">NO</option>
                       </select>
                     </div>
-                    <div className="col-lg-2">
-                      <button
-                        className="btn btn-primary ms-1 mt-4"
-                        onClick={() => {
-                          getSalesCoOrdinatorsData();
-                          setCurrentPage(1);
-                        }}
-                        disabled={loading}
-                      >
-                        {loading ? "Searching.." : "Filter"}
-                      </button>
-                    </div>
                   </div>
 
                   <div className="table-responsive table-shoot mt-3">

src/views/Attendance/AttendanceTerritoryManager.js

@@ -1,10 +1,11 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef,useCallback } from "react";
 import { Link } from "react-router-dom";
 import axios from "axios";
 import Button from "@material-ui/core/Button";
 import { useNavigate } from "react-router-dom";
 import { isAutheticated } from "src/auth";
 import swal from "sweetalert";
+import debounce from 'lodash.debounce';
 
 const AttendanceTerritoryManager = () => {
   const token = isAutheticated();
@@ -55,7 +56,14 @@ const AttendanceTerritoryManager = () => {
   useEffect(() => {
     getterritorymanagerData();
   }, [ itemPerPage, currentPage]);
+  const debouncedSearch = useCallback(debounce(() => {
+    setCurrentPage(1);
+    getterritorymanagerData();
+  }, 500), []);
 
+  const handleSearchChange = () => {
+    debouncedSearch();
+  };
   return (
     <div className="main-content">
       <div className="page-content">
@@ -119,6 +127,7 @@ const AttendanceTerritoryManager = () => {
                         placeholder="territorymanager name"
                         className="form-control"
                         ref={nameRef}
+                        onChange={handleSearchChange}
                         disabled={loading}
                       />
                     </div>
@@ -129,6 +138,7 @@ const AttendanceTerritoryManager = () => {
                         placeholder="Mobile Number"
                         className="form-control"
                         ref={mobileRef}
+                        onChange={handleSearchChange}
                         disabled={loading}
                       />
                     </div>
@@ -137,6 +147,7 @@ const AttendanceTerritoryManager = () => {
                       <select
                         className="form-control"
                         ref={VerifyterritorymanagerRef}
+                        onChange={handleSearchChange}
                         disabled={loading}
                       >
                         <option value="">----Select----</option>
@@ -144,18 +155,6 @@ const AttendanceTerritoryManager = () => {
                         <option value="false">NO</option>
                       </select>
                     </div>
-                    <div className="col-lg-2">
-                      <button
-                        className="btn btn-primary ms-1 mt-4"
-                        onClick={() => {
-                          getterritorymanagerData();
-                          setCurrentPage(1);
-                        }}
-                        disabled={loading}
-                      >
-                        {loading ? "Searching.." : "Filter"}
-                      </button>
-                    </div>
                   </div>
 
                   <div className="table-responsive table-shoot mt-3">

src/views/Leaves/LeaveSalesCoordinator.js

@@ -1,10 +1,11 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef,useCallback } from "react";
 import { Link } from "react-router-dom";
 import axios from "axios";
 import Button from "@material-ui/core/Button";
 import { useNavigate } from "react-router-dom";
 import { isAutheticated } from "src/auth";
 import swal from "sweetalert";
+import debounce from 'lodash.debounce';
 
 const LeaveSalesCoordinator = () => {
   const token = isAutheticated();
@@ -53,9 +54,13 @@ const LeaveSalesCoordinator = () => {
     getSalesCoOrdinatorsData();
   }, [currentPage, itemPerPage]);
 
-  const handleFilter = () => {
+  const debouncedSearch = useCallback(debounce(() => {
     setCurrentPage(1);
     getSalesCoOrdinatorsData();
+  }, 500), []);
+
+  const handleSearchChange = () => {
+    debouncedSearch();
   };
 
   return (
@@ -121,6 +126,7 @@ const LeaveSalesCoordinator = () => {
                         placeholder="Sales Coordinator name"
                         className="form-control"
                         ref={nameRef}
+                        onChange={handleSearchChange}
                         disabled={loading}
                       />
                     </div>
@@ -131,6 +137,7 @@ const LeaveSalesCoordinator = () => {
                         placeholder="Mobile Number"
                         className="form-control"
                         ref={mobileRef}
+                        onChange={handleSearchChange}
                         disabled={loading}
                       />
                     </div>
@@ -139,6 +146,7 @@ const LeaveSalesCoordinator = () => {
                       <select
                         className="form-control"
                         ref={verifyRef}
+                        onChange={handleSearchChange}
                         disabled={loading}
                       >
                         <option value="">----Select----</option>
@@ -146,15 +154,6 @@ const LeaveSalesCoordinator = () => {
                         <option value="false">NO</option>
                       </select>
                     </div>
-                    <div className="col-lg-2">
-                      <button
-                        className="btn btn-primary ms-1 mt-4"
-                        onClick={handleFilter}
-                        disabled={loading}
-                      >
-                        {loading ? "Searching.." : "Filter"}
-                      </button>
-                    </div>
                   </div>
 
                   <div className="table-responsive table-shoot mt-3">

src/views/Leaves/LeaveTerritoryManager.js

@@ -1,10 +1,11 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef,useCallback } from "react";
 import { Link } from "react-router-dom";
 import axios from "axios";
 import Button from "@material-ui/core/Button";
 import { useNavigate } from "react-router-dom";
 import { isAutheticated } from "src/auth";
 import swal from "sweetalert";
+import debounce from 'lodash.debounce';
 
 const LeaveTerritoryManager = () => {
   const token = isAutheticated();
@@ -53,9 +54,13 @@ const LeaveTerritoryManager = () => {
     getterritorymanagersData();
   }, [currentPage, itemPerPage]);
 
-  const handleFilter = () => {
+  const debouncedSearch = useCallback(debounce(() => {
     setCurrentPage(1);
-    getterritorymanagersData();
+    getterritorymanagerData();
+  }, 500), []);
+
+  const handleSearchChange = () => {
+    debouncedSearch();
   };
 
   return (
@@ -121,6 +126,7 @@ const LeaveTerritoryManager = () => {
                         placeholder="Territory Manager name"
                         className="form-control"
                         ref={nameRef}
+                        onChange={handleSearchChange}
                         disabled={loading}
                       />
                     </div>
@@ -131,6 +137,7 @@ const LeaveTerritoryManager = () => {
                         placeholder="Mobile Number"
                         className="form-control"
                         ref={mobileRef}
+                        onChange={handleSearchChange}
                         disabled={loading}
                       />
                     </div>
@@ -139,6 +146,7 @@ const LeaveTerritoryManager = () => {
                       <select
                         className="form-control"
                         ref={verifyRef}
+                        onChange={handleSearchChange}
                         disabled={loading}
                       >
                         <option value="">----Select----</option>
@@ -146,15 +154,6 @@ const LeaveTerritoryManager = () => {
                         <option value="false">NO</option>
                       </select>
                     </div>
-                    <div className="col-lg-2">
-                      <button
-                        className="btn btn-primary ms-1 mt-4"
-                        onClick={handleFilter}
-                        disabled={loading}
-                      >
-                        {loading ? "Searching.." : "Filter"}
-                      </button>
-                    </div>
                   </div>
 
                   <div className="table-responsive table-shoot mt-3">

src/views/RetailDistributors/RetailDistributor.js

@@ -0,0 +1,295 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { Link } from "react-router-dom";
+import axios from "axios";
+import Button from "@material-ui/core/Button";
+import { useNavigate } from "react-router-dom";
+import { isAutheticated } from "src/auth";
+import swal from "sweetalert";
+import debounce from 'lodash.debounce';
+
+const RetailDistributor = () => {
+  const token = isAutheticated();
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(true);
+  const [retailDistributorsData, setRetailDistributorsData] = useState([]);
+
+  const nameRef = useRef();
+  const mobileRef = useRef();
+  const VerifyRetailDistributorRef = useRef();
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const [itemPerPage, setItemPerPage] = useState(10);
+  const [totalData, setTotalData] = useState(0);
+
+  const getRetailDistributorsData = async () => {
+    setLoading(true);
+    try {
+      const res = await axios.get(`/api/retaildistributor/getAll/`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        params: {
+          page: currentPage,
+          show: itemPerPage,
+          name: nameRef.current.value,
+          mobileNumber: mobileRef.current.value,
+          isVerified: VerifyRetailDistributorRef.current.value,
+        },
+      });
+      setRetailDistributorsData(res.data?.retailDistributors);
+      setTotalData(res.data?.total_data);
+    } catch (err) {
+      const msg = err?.response?.data?.message || "Something went wrong!";
+      swal({
+        title: "Error",
+        text: msg,
+        icon: "error",
+        button: "Retry",
+        dangerMode: true,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    getRetailDistributorsData();
+  }, [success, itemPerPage, currentPage]);
+
+  const debouncedSearch = useCallback(debounce(() => {
+    setCurrentPage(1);
+    getRetailDistributorsData();
+  }, 500), []);
+
+  const handleSearchChange = () => {
+    debouncedSearch();
+  };
+
+  const totalPages = Math.ceil(totalData / itemPerPage);
+
+  return (
+    <div className="main-content">
+      <div className="page-content">
+        <div className="container-fluid">
+          <div className="row">
+            <div className="col-12">
+              <div className="page-title-box d-flex align-items-center justify-content-between">
+                <div style={{ fontSize: "22px" }} className="fw-bold">
+                  Retail Distributors
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="row">
+            <div className="col-lg-12">
+              <div className="card">
+                <div className="card-body">
+                  <div className="row ml-0 mr-0 mb-10">
+                    <div className="col-lg-1">
+                      <div className="dataTables_length">
+                        <label className="w-100">
+                          Show
+                          <select
+                            onChange={(e) => {
+                              setItemPerPage(e.target.value);
+                              setCurrentPage(1);
+                            }}
+                            className="form-control"
+                            disabled={loading}
+                          >
+                            <option value="10">10</option>
+                            <option value="25">25</option>
+                            <option value="50">50</option>
+                            <option value="100">100</option>
+                          </select>
+                          entries
+                        </label>
+                      </div>
+                    </div>
+                    <div className="col-lg-3">
+                      <label>Retail Distributor Name:</label>
+                      <input
+                        type="text"
+                        placeholder="Retail Distributor name"
+                        className="form-control"
+                        ref={nameRef}
+                        onChange={handleSearchChange}
+                        disabled={loading}
+                      />
+                    </div>
+                    <div className="col-lg-3">
+                      <label>Mobile Number:</label>
+                      <input
+                        type="text"
+                        placeholder="Mobile Number"
+                        className="form-control"
+                        ref={mobileRef}
+                        onChange={handleSearchChange}
+                        disabled={loading}
+                      />
+                    </div>
+                    <div className="col-lg-3">
+                      <label>Verify Retail Distributor:</label>
+                      <select
+                        className="form-control"
+                        ref={VerifyRetailDistributorRef}
+                        onChange={handleSearchChange}
+                        disabled={loading}
+                      >
+                        <option value="">----Select----</option>
+                        <option value="true">YES</option>
+                        <option value="false">NO</option>
+                      </select>
+                    </div>
+                  </div>
+
+                  <div className="table-responsive table-shoot mt-3">
+                    <table className="table table-centered table-nowrap">
+                      <thead
+                        className="thead-light"
+                        style={{ background: "#ecdddd" }}
+                      >
+                        <tr>
+                          <th>ID</th>
+                          <th className="text-start">Trade Name</th>
+                          <th className="text-start">Created On</th>
+                          <th className="text-start">Mapped</th>
+                          <th className="text-start">Action</th>
+                        </tr>
+                      </thead>
+
+                      <tbody>
+                        {loading ? (
+                          <tr>
+                            <td className="text-center" colSpan="5">
+                              Loading...
+                            </td>
+                          </tr>
+                        ) : retailDistributorsData?.length > 0 ? (
+                          retailDistributorsData?.map((retailDistributor, i) => {
+                            return (
+                              <tr key={i}>
+                                <td className="text-start">
+                                  {retailDistributor?.id}
+                                </td>
+                                <td className="text-start">
+                                  {retailDistributor?.tradeName}
+                                </td>
+                                <td className="text-start">
+                                  {new Date(
+                                    retailDistributor.createdAt
+                                  ).toLocaleString("en-IN", {
+                                    weekday: "short",
+                                    month: "short",
+                                    day: "numeric",
+                                    year: "numeric",
+                                    hour: "numeric",
+                                    minute: "numeric",
+                                    hour12: true,
+                                  })}
+                                </td>
+                                <td className="text-start">
+                                  <div>
+                                    <div>Principal Distributor: {retailDistributor.principalDistributor || 'N/A'}</div>
+                                    <div>Territory Manager: {retailDistributor.territoryManager || 'N/A'}</div>
+                                    <div>Sales Coordinator: {retailDistributor.salesCoordinator || 'N/A'}</div>
+                                  </div>
+                                </td>
+                                <td className="text-start">
+                                  <Link
+                                    to={`/retaildistributor/view/${retailDistributor._id}`}
+                                  >
+                                    <button
+                                      style={{
+                                        color: "white",
+                                      }}
+                                      type="button"
+                                      className="btn btn-info btn-sm waves-effect waves-light btn-table ml-2"
+                                    >
+                                      View
+                                    </button>
+                                  </Link>
+                                </td>
+                              </tr>
+                            );
+                          })
+                        ) : (
+                          <tr>
+                            <td className="text-center" colSpan="5">
+                              No Retail Distributor found!
+                            </td>
+                          </tr>
+                        )}
+                      </tbody>
+                    </table>
+                  </div>
+                  <div className="row mt-20">
+                    <div className="col-sm-12 col-md-6 mb-20">
+                      <div
+                        className="dataTables_info"
+                        id="datatable_info"
+                        role="status"
+                        aria-live="polite"
+                      >
+                        Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
+                        {Math.min(currentPage * itemPerPage, totalData)} of{" "}
+                        {totalData} entries
+                      </div>
+                    </div>
+
+                    <div className="col-sm-12 col-md-6">
+                      <div className="d-flex">
+                        <ul className="pagination ms-auto">
+                          <li
+                            className={
+                              currentPage === 1
+                                ? "paginate_button page-item previous disabled"
+                                : "paginate_button page-item previous"
+                            }
+                          >
+                            <span
+                              className="page-link"
+                              onClick={() =>
+                                setCurrentPage((prev) =>
+                                  prev > 1 ? prev - 1 : prev
+                                )
+                              }
+                            >
+                              Previous
+                            </span>
+                          </li>
+                          <li
+                            className={
+                              currentPage === totalPages
+                                ? "paginate_button page-item next disabled"
+                                : "paginate_button page-item next"
+                            }
+                          >
+                            <span
+                              className="page-link"
+                              onClick={() =>
+                                setCurrentPage((prev) =>
+                                  prev < totalPages ? prev + 1 : prev
+                                )
+                              }
+                            >
+                              Next
+                            </span>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RetailDistributor;