report download of retailer and pd and task

src/_nav.js

@@ -118,13 +118,13 @@ const _nav = [
     to: "/leaves/today",
     group: "Leaves",
   },
-  // {
+  {
-  //   component: CNavItem,
+    component: CNavItem,
-  //   name: "Tasks",
+    name: "Tasks",
-  //   icon: <CIcon icon={cilAlarm} customClassName="nav-icon" />,
+    icon: <CIcon icon={cilAlarm} customClassName="nav-icon" />,
-  //   to: "/task/today",
+    to: "/tasks",
-  //   group: "Tasks",
+    group: "Tasks",
-  // },
+  },
   {
     component: CNavItem,
     name: "Inventory Data",

src/routes.js

@@ -171,6 +171,10 @@ import OpeningInventoryReports from "./views/Reports/OpeningInventoryReports";
 import StockReports from "./views/Reports/StockReports ";
 import Transporter from "./views/Transporter/Transporter";
 import EditRetailDistributor from "./views/RetailDistributors/EditRetailDistributor";
+import TaskSalesCoordinator from "./views/Tasks/TaskSalesCoordinator";
+import TaskTerritoryManager from "./views/Tasks/TaskTerritoryManager";
+import SingleUserTask from "./views/Tasks/SingleUserTask";
+import Tasks from "./views/Tasks/Task";
 const routes = [
   //dashboard
 
@@ -374,12 +378,36 @@ const routes = [
     navName: "Leaves",
   },
   //Tasks
+  {
+    path: "/tasks",
+    name: "Tasks",
+    element: Tasks,
+    navName: "Tasks",
+  },
   {
     path: "/task/today",
     name: "Today's Tasks",
     element: TodayTask,
     navName: "Tasks",
   },
+  {
+    path: "/salescoordinator/task",
+    name: "Tasks SalesCoOrdinator",
+    element: TaskSalesCoordinator,
+    navName: "Tasks",
+  },
+  {
+    path: "/territorymanager/task",
+    name: "Tasks TerritoryManager",
+    element: TaskTerritoryManager,
+    navName: "Tasks",
+  },
+  {
+    path: "/task/view/:id",
+    name: "Single Task",
+    element: SingleUserTask,
+    navName: "Tasks",
+  },
   // RetailDistributor
   {
     path: "/retail-distributor",

src/views/PrincipalDistributors/principalDistributor.js

@@ -7,6 +7,8 @@ import { isAutheticated } from "src/auth";
 import swal from "sweetalert";
 import OrderDetails from "./orderDetails";
 import debounce from "lodash.debounce";
+import { toast } from "react-hot-toast";
+
 const principalDistributor = () => {
   const token = isAutheticated();
   const navigate = useNavigate();
@@ -106,7 +108,56 @@ const principalDistributor = () => {
   //     }
   //   });
   // };
+  const handleDownloadReport = async () => {
+    try {
+      const response = await axios.get(
+        `/api/v1/principaldistributor/download-report`,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+          responseType: "arraybuffer",
+        }
+      );
 
+      // Check if the request was successful
+      if (response.status === 200) {
+        // Convert response data into a Blob for download
+        const url = window.URL.createObjectURL(
+          new Blob([response.data], {
+            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+          })
+        );
+
+        // Create a temporary download link and trigger the download
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = "Principal_Distributor_Report.xlsx";
+        document.body.appendChild(link);
+        link.click();
+
+        // Cleanup
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url); // Release Blob URL memory
+
+        // Show success message
+        toast.success("Report downloaded successfully!");
+      } else {
+        // If the response status is not 200, display an error message
+        throw new Error("Failed to download report");
+      }
+    } catch (err) {
+      // Display a user-friendly error message
+      const msg = err?.response?.data?.message || "Something went wrong!";
+      swal({
+        title: "Error",
+        text: msg,
+        icon: "error",
+        button: "Retry",
+        dangerMode: true,
+      });
+    }
+  };
   return (
     <div className="main-content">
       <div className="page-content">
@@ -158,7 +209,7 @@ const principalDistributor = () => {
               <div className="card">
                 <div className="card-body">
                   <div className="row ml-0 mr-0 mb-10 ">
-                    <div className="col-lg-1">
+                    <div className="col-lg-2 col-md-2">
                       <div className="dataTables_length">
                         <label className="w-100">
                           Show
@@ -179,7 +230,7 @@ const principalDistributor = () => {
                         </label>
                       </div>
                     </div>
-                    <div className="col-lg-3">
+                    <div className="col-lg-3 col-md-4">
                       <label>Name:</label>
                       <input
                         type="text"
@@ -191,7 +242,7 @@ const principalDistributor = () => {
                         disabled={loading}
                       />
                     </div>
-                    <div className="col-lg-3">
+                    <div className="col-lg-3 col-md-3">
                       <label>SBU:</label>
                       <input
                         type="text"
@@ -203,10 +254,21 @@ const principalDistributor = () => {
                         disabled={loading}
                       />
                     </div>
+                    <div className="col-lg-3 col-md-3 d-flex justify-content-start mt-lg-0 mb-lg-0 mt-1 mb-1 align-items-center">
+                      <Button
+                        variant="contained"
+                        color="primary"
+                        size="small"
+                        onClick={handleDownloadReport}
+                        disabled={loading}
+                      >
+                        Download Report
+                      </Button>
+                    </div>
                   </div>
 
                   <div
-                    className="table-responsive table-shoot mt-3"
+                    className="table-responsive table-shoot"
                     style={{ overflowX: "auto" }}
                   >
                     <table
@@ -320,7 +382,7 @@ const principalDistributor = () => {
                                   </button>
                                 </Link>
                               </td>
-                              <td className="text-end">
+                              {/* <td className="text-end"> */}
                               {/* <Link
                                     to={`/users-address/view/${userAddress._id}`}
                                   >
@@ -385,48 +447,45 @@ const principalDistributor = () => {
                                       Delete
                                     </button>
                                   </Link> */}
+                              <td className="text-start">
+                                <div className="d-flex flex-column flex-md-row">
+                                  {/* View Button */}
                                   <Link
                                     to={`/principal-distributor/${user?._id}`}
                                   >
                                     <button
                                       type="button"
-                                    className=" btn btn-info btn-sm  waves-effect waves-light btn-table"
+                                      className="btn btn-info btn-sm waves-effect waves-light btn-table mb-1 mb-md-0"
                                     >
                                       View
                                     </button>
                                   </Link>
+
+                                  {/* Stock Button */}
                                   <Link
                                     to={`/principaldistributor/stocks/${user?._id}`}
                                   >
                                     <button
-                                    style={{
+                                      style={{ color: "white" }}
-                                      color: "white",
-                                    }}
                                       type="button"
-                                    className="
+                                      className="btn btn-info btn-sm waves-effect waves-light btn-table ml-0 ml-md-1 mb-1 mb-md-0 mt-md-0"
-                                      btn btn-info btn-sm
-                                    waves-effect waves-light
-                                    btn-table
-                                    ml-1
-                                    md-mt-1
-                                    md-ml-0
-                                  "
                                     >
                                       Stock
                                     </button>
                                   </Link>
+
+                                  {/* OI Button */}
                                   <Link
                                     to={`/principaldistributor/opening-inventory/${user?._id}`}
                                   >
                                     <button
                                       type="button"
-                                    className=" btn btn-info btn-sm  waves-effect waves-light btn-table ml-1
+                                      className="btn btn-info btn-sm waves-effect waves-light btn-table ml-0 ml-md-1 mb-1 mb-md-0 mt-md-0"
-                                    md-mt-1
-                                    md-ml-0"
                                     >
                                       OI
                                     </button>
                                   </Link>
+                                </div>
                               </td>
                             </tr>
                           ))

src/views/Products/Products.js

@@ -237,7 +237,7 @@ const Products = () => {
               <div className="card">
                 <div className="card-body">
                   <div className="row ml-0 mr-0 mb-10">
-                    <div className="col-lg-1">
+                  <div className="col-lg-2">
                       <div className="dataTables_length">
                         <label className="w-100">
                           Show
@@ -258,7 +258,7 @@ const Products = () => {
                         </label>
                       </div>
                     </div>
-                    <div className="col-lg-3">
+                    <div className="col-lg-4">
                       <label>Product Name:</label>
                       <input
                         type="text"
@@ -303,7 +303,7 @@ const Products = () => {
                     </div>
                   </div>
 
-                  <div className="table-responsive table-shoot mt-3">
+                  <div className="table-responsive table-shoot mt-2">
                     <table
                       className="table table-centered table-nowrap"
                       style={{ border: "1px solid" }}

src/views/Reports/OpeningInventoryReports.js

@@ -171,7 +171,7 @@ const OpeningInventoryReports = () => {
               <div className="card">
                 <div className="card-body">
                   <div className="row ml-0 mr-0 mb-10">
-                    <div className="col-lg-1">
+                  <div className="col-lg-1 col-md-2">
                       <div className="dataTables_length">
                         <label className="w-100">
                           Show
@@ -192,7 +192,7 @@ const OpeningInventoryReports = () => {
                         </label>
                       </div>
                     </div>
-                    <div className="col-lg-3">
+                    <div className="col-lg-3 col-md-5">
                       <label>Product Name:</label>
                       <input
                         type="text"
@@ -203,7 +203,7 @@ const OpeningInventoryReports = () => {
                         disabled={loading}
                       />
                     </div>
-                    <div className="col-lg-3">
+                    <div className="col-lg-3 col-md-5">
                       <label>Filter by Category:</label>
                       <select
                         className="form-control"
@@ -219,7 +219,7 @@ const OpeningInventoryReports = () => {
                         ))}
                       </select>
                     </div>
-                    <div className="col-lg-3">
+                    <div className="col-lg-3 col-md-5 mb-lg-0 mb-1">
                       <label>Filter by Brand:</label>
                       <select
                         className="form-control"
@@ -235,9 +235,8 @@ const OpeningInventoryReports = () => {
                         ))}
                       </select>
                     </div>
-                    <div className="col-lg-2">
+                    <div className="col-lg-2 col-md-5 d-flex justify-content-start mt-lg-0 mb-lg-0 mt-1 mb-1 align-items-center">
                       <Button
-                        className="mt-4"
                         variant="contained"
                         color="primary"
                         size="small"
@@ -249,7 +248,7 @@ const OpeningInventoryReports = () => {
                     </div>
                   </div>
 
-                  <div className="table-responsive table-shoot mt-3">
+                  <div className="table-responsive table-shoot">
                     <table
                       className="table table-centered table-nowrap"
                       style={{ border: "1px solid" }}

src/views/Reports/StockReports .js

@@ -166,7 +166,7 @@ const StockReports = () => {
               <div className="card">
                 <div className="card-body">
                   <div className="row ml-0 mr-0 mb-10">
-                    <div className="col-lg-1">
+                  <div className="col-lg-1 col-md-2">
                       <div className="dataTables_length">
                         <label className="w-100">
                           Show
@@ -187,7 +187,7 @@ const StockReports = () => {
                         </label>
                       </div>
                     </div>
-                    <div className="col-lg-3">
+                    <div className="col-lg-3 col-md-5">
                       <label>Product Name:</label>
                       <input
                         type="text"
@@ -198,7 +198,7 @@ const StockReports = () => {
                         disabled={loading}
                       />
                     </div>
-                    <div className="col-lg-3">
+                    <div className="col-lg-3 col-md-5">
                       <label>Filter by Category:</label>
                       <select
                         className="form-control"
@@ -214,7 +214,7 @@ const StockReports = () => {
                         ))}
                       </select>
                     </div>
-                    <div className="col-lg-3">
+                    <div className="col-lg-3 col-md-5 mb-lg-0 mb-1">
                       <label>Filter by Brand:</label>
                       <select
                         className="form-control"
@@ -230,9 +230,8 @@ const StockReports = () => {
                         ))}
                       </select>
                     </div>
-                    <div className="col-lg-2">
+                    <div className="col-lg-2 col-md-5 d-flex justify-content-start mt-lg-0 mb-lg-0 mt-1 mb-1 align-items-center">
                       <Button
-                        className="mt-4"
                         variant="contained"
                         color="primary"
                         size="small"
@@ -244,7 +243,7 @@ const StockReports = () => {
                     </div>
                   </div>
 
-                  <div className="table-responsive table-shoot mt-3">
+                  <div className="table-responsive table-shoot">
                     <table
                       className="table table-centered table-nowrap"
                       style={{ border: "1px solid" }}

src/views/RetailDistributors/RetailDistributor.js

@@ -6,6 +6,7 @@ import Button from "@material-ui/core/Button";
 import { isAutheticated } from "src/auth";
 import swal from "sweetalert";
 import debounce from "lodash.debounce";
+import { toast } from "react-hot-toast";
 
 const RetailDistributor = () => {
   const token = isAutheticated();
@@ -68,6 +69,56 @@ const RetailDistributor = () => {
   const handleSearchChange = () => {
     debouncedSearch();
   };
+  const handleDownloadReport = async () => {
+    try {
+      const response = await axios.get(
+        `/api/retaildistributor/download-report`,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+          responseType: "arraybuffer",
+        }
+      );
+      // console.log(response);
+      // Check if the request was successful
+      if (response.status === 200) {
+        // Convert response data into a Blob for download
+        const url = window.URL.createObjectURL(
+          new Blob([response.data], {
+            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+          })
+        );
+
+        // Create a temporary download link and trigger the download
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = "RetailerReport.xlsx";
+        document.body.appendChild(link);
+        link.click();
+
+        // Cleanup
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url); // Release Blob URL memory
+
+        // Show success message
+        toast.success("Report downloaded successfully!");
+      } else {
+        // If the response status is not 200, display an error message
+        throw new Error("Failed to download report");
+      }
+    } catch (err) {
+      // Display a user-friendly error message
+      const msg = err?.response?.data?.message || "Something went wrong!";
+      swal({
+        title: "Error",
+        text: msg,
+        icon: "error",
+        button: "Retry",
+        dangerMode: true,
+      });
+    }
+  };
 
   return (
     <div className="main-content">
@@ -112,7 +163,7 @@ const RetailDistributor = () => {
               <div className="card">
                 <div className="card-body">
                   <div className="row ml-0 mr-0 mb-10">
-                    <div className="col-lg-1">
+                    <div className="col-lg-2 col-md-2">
                       <div className="dataTables_length">
                         <label className="w-100">
                           Show
@@ -133,7 +184,7 @@ const RetailDistributor = () => {
                         </label>
                       </div>
                     </div>
-                    <div className="col-lg-3">
+                    <div className="col-lg-3 col-md-4">
                       <label>Trade Name:</label>
                       <input
                         type="text"
@@ -145,7 +196,7 @@ const RetailDistributor = () => {
                         disabled={loading}
                       />
                     </div>
-                    <div className="col-lg-3">
+                    <div className="col-lg-3 col-md-6">
                       <label>Principal Distributor Name:</label>
                       <input
                         type="text"
@@ -157,9 +208,21 @@ const RetailDistributor = () => {
                         ref={principalDistributorRef}
                       />
                     </div>
+                    <div className="col-lg-3 d-flex justify-content-start mt-lg-0 mb-lg-0 mt-1 mb-1 align-items-center">
+                      <Button
+                        variant="contained"
+                        color="primary"
+                        size="small"
+                        onClick={handleDownloadReport}
+                        disabled={loading}
+                        
+                      >
+                        Download Report
+                      </Button>
+                    </div>
                   </div>
 
-                  <div className="table-responsive table-shoot mt-3">
+                  <div className="table-responsive table-shoot">
                     <table className="table table-centered table-nowrap">
                       <thead
                         className="thead-light"
@@ -169,7 +232,9 @@ const RetailDistributor = () => {
                           <th style={{ width: "10%" }}>ID</th>
                           <th style={{ width: "12%" }}>Trade Name</th>
                           <th style={{ width: "10%" }}>Created On</th>
-                          <th style={{ width: "14%" }}>Principal Distributor</th>
+                          <th style={{ width: "14%" }}>
+                            Principal Distributor
+                          </th>
                           <th style={{ width: "14%" }}>Territory Manager</th>
                           <th style={{ width: "14%" }}>Sales Coordinator</th>
                           <th style={{ width: "6%" }}>Orders</th>
@@ -253,12 +318,14 @@ const RetailDistributor = () => {
                               </td>
 
                               <td className="text-start">
+                                {/* On large screens: View and Stock buttons in one row */}
+                                <div className="d-flex flex-lg-row flex-column align-items-start">
                                   <Link
                                     to={`/retaildistributor/view/${retailDistributor._id}`}
                                   >
                                     <button
                                       type="button"
-                                    className=" btn btn-info btn-sm  waves-effect waves-light btn-table"
+                                      className="btn btn-info btn-sm waves-effect waves-light btn-table"
                                     >
                                       View
                                     </button>
@@ -267,27 +334,23 @@ const RetailDistributor = () => {
                                     to={`/retailerdistributor/stocks/${retailDistributor?._id}`}
                                   >
                                     <button
-                                    style={{
+                                      style={{ color: "white" }}
-                                      color: "white",
-                                      marginRight: "1rem",
-                                    }}
                                       type="button"
-                                    className="
+                                      className="btn btn-info btn-sm waves-effect waves-light btn-table ml-lg-1 ml-0 mt-1 mt-lg-0"
-                                      btn btn-info btn-sm
-                                    waves-effect waves-light
-                                    btn-table
-                                    mx-1
-                                  "
                                     >
                                       Stock
                                     </button>
                                   </Link>
+                                </div>
+
+                                {/* On large screens: OI and Edit buttons in one row */}
+                                <div className="d-flex flex-lg-row flex-column align-items-start">
                                   <Link
                                     to={`/retaildistributor/opening-inventory/${retailDistributor?._id}`}
                                   >
                                     <button
                                       type="button"
-                                    className=" btn btn-info btn-sm  waves-effect waves-light btn-table mt-1"
+                                      className="btn btn-info btn-sm waves-effect waves-light btn-table mt-1"
                                     >
                                       OI
                                     </button>
@@ -297,11 +360,12 @@ const RetailDistributor = () => {
                                   >
                                     <button
                                       type="button"
-                                    className=" btn btn-info btn-sm  waves-effect waves-light btn-table mt-1 ml-1"
+                                      className="btn btn-info btn-sm waves-effect waves-light btn-table mt-1 ml-0 ml-lg-2"
                                     >
                                       Edit
                                     </button>
                                   </Link>
+                                </div>
                               </td>
                             </tr>
                           ))

src/views/SalesCoOrdinators/SalesCoOrdinator.js

@@ -154,7 +154,7 @@ const SalesCoOrdinator = () => {
               <div className="card">
                 <div className="card-body">
                   <div className="row ml-0 mr-0 mb-10">
-                    <div className="col-lg-1">
+                    <div className="col-lg-2">
                       <div className="dataTables_length">
                         <label className="w-100">
                           Show
@@ -175,7 +175,7 @@ const SalesCoOrdinator = () => {
                         </label>
                       </div>
                     </div>
-                    <div className="col-lg-3">
+                    <div className="col-lg-4">
                       <label>Sales Coordinator Name:</label>
                       <input
                         type="text"
@@ -212,7 +212,7 @@ const SalesCoOrdinator = () => {
                     </div>
                   </div>
 
-                  <div className="table-responsive table-shoot mt-3">
+                  <div className="table-responsive table-shoot mt-2">
                     <table className="table table-centered table-nowrap">
                       <thead
                         className="thead-light"
@@ -222,13 +222,13 @@ const SalesCoOrdinator = () => {
                           <th style={{ width: "9%" }}>Unique Id </th>
                           <th style={{ width: "18%" }}>Name</th>
                           <th style={{ width: "12%" }}>Mobile No.</th>
-                          <th style={{ width: "18%" }}>Email</th>
+                          <th style={{ width: "16%" }}>Email</th>
                           <th style={{ width: "7%" }}>Verify</th>
                           <th style={{ width: "10%" }}>Register On</th>
-                          <th className="text-center" style={{ width: "13%" }}>
+                          <th className="text-center" style={{ width: "14%" }}>
                             Mapping
                           </th>
-                          <th className="text-center" style={{ width: "13%" }}>
+                          <th className="text-center" style={{ width: "14%" }}>
                             Action
                           </th>
                         </tr>
@@ -289,7 +289,7 @@ const SalesCoOrdinator = () => {
                                     // hour12: true,
                                   })}
                                 </td>
-                                <td className="text-start">
+                                <td className="text-center">
                                   <Link
                                     to={`/view/SCprincipaldistributor/${salescoordinator._id}`}
                                   >
@@ -305,13 +305,13 @@ const SalesCoOrdinator = () => {
                                   >
                                     <button
                                       type="button"
-                                      className="btn btn-primary btn-sm  waves-effect waves-light btn-table ml-1 md-mt-1 md-ml-0"
+                                      className="btn btn-primary btn-sm  waves-effect waves-light btn-table ml-1"
                                     >
                                       Retailer
                                     </button>
                                   </Link>
                                 </td>
-                                <td className="text-start">
+                                <td className="text-center">
                                   <Link
                                     to={`/salescoordinator/edit/${salescoordinator._id}`}
                                   >
@@ -326,7 +326,7 @@ const SalesCoOrdinator = () => {
                                   <button
                                     type="button"
                                     style={{ color: "white" }}
-                                    className="btn btn-danger btn-sm  waves-effect waves-light btn-table ml-1 md-mt-1 md-ml-0"
+                                    className="btn btn-danger btn-sm  waves-effect waves-light btn-table ml-1"
                                     onClick={() =>
                                       handleDelete(salescoordinator._id)
                                     }

src/views/Tasks/SingleUserTask.js

@@ -5,7 +5,7 @@ import Button from "@material-ui/core/Button";
 import { isAutheticated } from "src/auth";
 import swal from "sweetalert";
 
-const SingleUserleave = () => {
+const SingleUserTask = () => {
   const { id } = useParams();
   const token = isAutheticated();
   const navigate = useNavigate();
@@ -74,7 +74,7 @@ const [userType, setUserType] = useState("");
                       textTransform: "capitalize",
                     }}
                     onClick={() => {
-                      navigate("/leaves/today", {
+                      navigate("/task/today", {
                         replace: true,
                       });
                     }}
@@ -253,4 +253,4 @@ const [userType, setUserType] = useState("");
   );
 };
 
-export default SingleUserleave;
+export default SingleUserTask;

src/views/Tasks/Task.js

@@ -0,0 +1,440 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { Link } from "react-router-dom";
+import axios from "axios";
+import { isAutheticated } from "src/auth";
+import swal from "sweetalert";
+import debounce from "lodash.debounce";
+
+const Tasks = () => {
+  const token = isAutheticated();
+  const [loading, setLoading] = useState(false);
+  const [taskData, settaskData] = useState([]);
+
+  const tmnameRef = useRef();
+  const scnameRef = useRef();
+  const statusnameRef = useRef();
+  const startDateRef = useRef();
+  const endDateRef = useRef();
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const [itemPerPage, setItemPerPage] = useState(10);
+  const [totalData, setTotalData] = useState(0);
+
+  const gettaskData = async () => {
+    setLoading(true);
+    try {
+      const response = await axios.get(`/api/task/tasks`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        params: {
+          page: currentPage,
+          show: itemPerPage,
+          startDate: startDateRef.current?.value || "",
+          endDate: endDateRef.current?.value || "",
+          TMname: tmnameRef.current?.value || "",
+          SCname: scnameRef.current?.value || "",
+          status: statusnameRef.current?.value || "",
+        },
+      });
+      // console.log("response", response);
+
+      settaskData(response.data?.data || []);
+      setTotalData(response.data?.pagination?.total || 0);
+    } catch (err) {
+      const msg = err?.response?.data?.msg || "Something went wrong!";
+      swal({
+        title: "Error",
+        text: msg,
+        icon: "error",
+        button: "Retry",
+        dangerMode: true,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const debouncedSearch = useCallback(
+    debounce(() => {
+      setCurrentPage(1);
+      gettaskData();
+    }, 500),
+    []
+  );
+
+  const handleSearchChange = () => {
+    debouncedSearch();
+  };
+
+  useEffect(() => {
+    gettaskData();
+  }, [itemPerPage, currentPage]);
+
+  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">
+                  Task List
+                </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 col-md-2 col-6">
+    <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 col-md-5 col-12">
+    <label>TM Name:</label>
+    <input
+      type="text"
+      placeholder="Trade name"
+      className="form-control"
+      ref={tmnameRef}
+      onChange={handleSearchChange}
+      disabled={loading}
+    />
+  </div>
+  <div className="col-lg-3 col-md-5 col-12">
+    <label>SC Name:</label>
+    <input
+      type="text"
+      placeholder="Trade name"
+      className="form-control"
+      ref={scnameRef}
+      onChange={handleSearchChange}
+      disabled={loading}
+    />
+  </div>
+  <div className="col-lg-2 col-md-4 col-4">
+    <label>Start Date:</label>
+    <input
+      type="date"
+      className="form-control"
+      ref={startDateRef}
+      onChange={handleSearchChange}
+      disabled={loading}
+    />
+  </div>
+  <div className="col-lg-2 col-md-4 col-4">
+    <label>End Date:</label>
+    <input
+      type="date"
+      className="form-control"
+      ref={endDateRef}
+      onChange={handleSearchChange}
+      disabled={loading}
+    />
+  </div>
+  <div className="col-lg-1 col-md-4 col-4">
+    <label>Status:</label>
+    <select
+      className="form-control"
+      ref={statusnameRef}
+      onChange={handleSearchChange}
+      disabled={loading}
+    >
+      <option value="">All</option>
+      <option value="New">New</option>
+      <option value="Pending">Pending</option>
+      <option value="Completed">Completed</option>
+    </select>
+  </div>
+</div>
+
+<style jsx>{`
+  @media (max-width: 1200px) {
+    .col-lg-1 {
+      flex: 0 0 20%;
+      max-width: 20%;
+    }
+    .col-lg-2 {
+      flex: 0 0 37%;
+      max-width: 37%;
+    }
+    .col-lg-3 {
+      flex: 0 0 40%;
+      max-width: 40%;
+    }
+  }
+  @media (max-width: 768px) {
+    .col-lg-1,
+    .col-lg-2,
+    .col-lg-3,
+    .col-md-2,
+    .col-md-4,
+    .col-md-5,
+    .col-4,
+    .col-6,
+    .col-12 {
+      flex: 0 0 100%;
+      max-width: 100%;
+    }
+  }
+`}</style>
+
+                  <div className="table-responsive table-shoot mt-3">
+                    <table
+                      className="table table-centered table-nowrap"
+                      style={{
+                        border: "1px solid",
+                        borderCollapse: "collapse",
+                      }} // Ensure borders collapse for clean lines
+                    >
+                      <thead
+                        className="thead-light"
+                        style={{ background: "#ecdddd" }}
+                      >
+                        <tr>
+                          <th
+                            className="text-start"
+                            style={{ border: "1px solid" }}
+                          >
+                            Task ID
+                          </th>
+                          <th
+                            className="text-start"
+                            style={{ border: "1px solid" }}
+                          >
+                            Due Date
+                          </th>
+                          <th
+                            className="text-start"
+                            style={{ border: "1px solid" }}
+                          >
+                            Assigned TM
+                          </th>
+                          <th
+                            className="text-start"
+                            style={{ border: "1px solid" }}
+                          >
+                            Task Type
+                          </th>
+                          <th
+                            className="text-start"
+                            style={{ border: "1px solid" }}
+                          >
+                            Sales Coordinator
+                          </th>
+                          <th
+                            className="text-start"
+                            style={{ border: "1px solid" }}
+                          >
+                            Task Status
+                          </th>
+                        </tr>
+                      </thead>
+
+                      <tbody>
+                        {loading ? (
+                          <tr>
+                            <td
+                              className="text-center"
+                              colSpan="6"
+                              style={{ border: "1px solid" }}
+                            >
+                              Loading...
+                            </td>
+                          </tr>
+                        ) : taskData.length > 0 ? (
+                          taskData.map((task, index) => (
+                            <tr key={index}>
+                              <td
+                                className="text-start"
+                                style={{ border: "1px solid" }}
+                              >
+                                {task.taskId}
+                              </td>
+                              <td
+                                className="text-start"
+                                style={{ border: "1px solid" }}
+                              >
+                                {new Date(task.taskDueDate).toLocaleString(
+                                  "en-IN",
+                                  {
+                                    month: "short",
+                                    day: "numeric",
+                                    year: "numeric",
+                                  }
+                                )}
+                              </td>
+                              <td
+                                className="text-start"
+                                style={{ border: "1px solid" }}
+                              >
+                                {task.taskAssignedBy.name}
+                              </td>
+                              <td
+                                className="text-start"
+                                style={{ border: "1px solid" }}
+                              >
+                                {task.task}
+                              </td>
+                              <td
+                                className="text-start"
+                                style={{ border: "1px solid" }}
+                              >
+                                {task.taskAssignedTo.name}
+                              </td>
+                              <td
+                                className="text-start"
+                                style={{ border: "1px solid" }}
+                              >
+                                {task.taskStatus}
+                              </td>
+                            </tr>
+                          ))
+                        ) : (
+                          <tr className="text-center">
+                            <td colSpan="6" style={{ border: "1px solid" }}>
+                              <h5>No Data Available...</h5>
+                            </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"
+                              style={{ cursor: "pointer" }}
+                              onClick={() => setCurrentPage((prev) => prev - 1)}
+                              disabled={loading}
+                            >
+                              Previous
+                            </span>
+                          </li>
+
+                          {!(currentPage - 1 < 1) && (
+                            <li className="paginate_button page-item">
+                              <span
+                                className="page-link"
+                                style={{ cursor: "pointer" }}
+                                onClick={(e) =>
+                                  setCurrentPage((prev) => prev - 1)
+                                }
+                                disabled={loading}
+                              >
+                                {currentPage - 1}
+                              </span>
+                            </li>
+                          )}
+
+                          <li className="paginate_button page-item active">
+                            <span
+                              className="page-link"
+                              style={{ cursor: "pointer" }}
+                            >
+                              {currentPage}
+                            </span>
+                          </li>
+
+                          {!(
+                            (currentPage + 1) * itemPerPage - itemPerPage >
+                            totalData - 1
+                          ) && (
+                            <li className="paginate_button page-item ">
+                              <span
+                                className="page-link"
+                                style={{ cursor: "pointer" }}
+                                onClick={() => {
+                                  setCurrentPage((prev) => prev + 1);
+                                }}
+                                disabled={loading}
+                              >
+                                {currentPage + 1}
+                              </span>
+                            </li>
+                          )}
+
+                          <li
+                            className={
+                              !(
+                                (currentPage + 1) * itemPerPage - itemPerPage >
+                                totalData - 1
+                              )
+                                ? "paginate_button page-item next"
+                                : "paginate_button page-item next disabled"
+                            }
+                          >
+                            <span
+                              className="page-link"
+                              style={{ cursor: "pointer" }}
+                              onClick={() => setCurrentPage((prev) => prev + 1)}
+                              disabled={loading}
+                            >
+                              Next
+                            </span>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Tasks;

src/views/Tasks/TaskSalesCoordinator.js

@@ -7,7 +7,7 @@ import { isAutheticated } from "src/auth";
 import swal from "sweetalert";
 import debounce from 'lodash.debounce';
 
-const LeaveSalesCoordinator = () => {
+const TaskSalesCoordinator = () => {
   const token = isAutheticated();
   const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
@@ -71,7 +71,7 @@ const LeaveSalesCoordinator = () => {
             <div className="col-12">
               <div className="page-title-box d-flex align-items-center justify-content-between">
                 <div style={{ fontSize: "22px" }} className="fw-bold">
-                  Sales Coordinators Leaves
+                  Sales Coordinators List
                 </div>
                 <div className="page-title-right">
                   <Button
@@ -83,7 +83,7 @@ const LeaveSalesCoordinator = () => {
                       textTransform: "capitalize",
                     }}
                     onClick={() => {
-                      navigate("/leaves/today", { replace: true });
+                      navigate("/task/today", { replace: true });
                     }}
                   >
                     Cancel
@@ -220,7 +220,7 @@ const LeaveSalesCoordinator = () => {
                                 })}
                               </td>
                               <td className="text-start">
-                                <Link to={`/leave/view/${salescoordinator._id}`}>
+                                <Link to={`/task/view/${salescoordinator._id}`}>
                                   <button
                                     style={{
                                       color: "white",
@@ -229,7 +229,7 @@ const LeaveSalesCoordinator = () => {
                                     type="button"
                                     className="btn btn-primary btn-sm waves-effect waves-light btn-table mt-1 mx-1"
                                   >
-                                    View Leaves
+                                    View Tasks
                                   </button>
                                 </Link>
                               </td>
@@ -315,4 +315,4 @@ const LeaveSalesCoordinator = () => {
   );
 };
 
-export default LeaveSalesCoordinator;
+export default TaskSalesCoordinator;

src/views/Tasks/TaskTerritoryManager.js

@@ -7,7 +7,7 @@ import { isAutheticated } from "src/auth";
 import swal from "sweetalert";
 import debounce from 'lodash.debounce';
 
-const LeaveTerritoryManager = () => {
+const TaskTerritoryManager = () => {
   const token = isAutheticated();
   const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
@@ -71,7 +71,7 @@ const LeaveTerritoryManager = () => {
             <div className="col-12">
               <div className="page-title-box d-flex align-items-center justify-content-between">
                 <div style={{ fontSize: "22px" }} className="fw-bold">
-                Territory Managers Leaves
+                Territory Managers List
                 </div>
                 <div className="page-title-right">
                   <Button
@@ -83,7 +83,7 @@ const LeaveTerritoryManager = () => {
                       textTransform: "capitalize",
                     }}
                     onClick={() => {
-                      navigate("/leaves/today", { replace: true });
+                      navigate("/task/today", { replace: true });
                     }}
                   >
                     Cancel
@@ -220,7 +220,7 @@ const LeaveTerritoryManager = () => {
                                 })}
                               </td>
                               <td className="text-start">
-                                <Link to={`/leave/view/${territorymanager._id}`}>
+                                <Link to={`/task/view/${territorymanager._id}`}>
                                   <button
                                     style={{
                                       color: "white",
@@ -229,7 +229,7 @@ const LeaveTerritoryManager = () => {
                                     type="button"
                                     className="btn btn-primary btn-sm waves-effect waves-light btn-table mt-1 mx-1"
                                   >
-                                    View Leaves
+                                    View Tasks
                                   </button>
                                 </Link>
                               </td>
@@ -315,4 +315,4 @@ const LeaveTerritoryManager = () => {
   );
 };
 
-export default LeaveTerritoryManager;
+export default TaskTerritoryManager;

src/views/Tasks/TodayTasks.js

@@ -83,11 +83,11 @@ const TodayTask = () => {
                       marginRight: "1rem",
                       textTransform: "capitalize",
                     }}
-                    // onClick={() => {
+                    onClick={() => {
-                    //   navigate("/salescoordinator/task", {
+                      navigate("/salescoordinator/task", {
-                    //     replace: true,
+                        replace: true,
-                    //   });
+                      });
-                    // }}
+                    }}
                   >
                     Show Sales Coordinator Task
                   </Button>
@@ -98,11 +98,11 @@ const TodayTask = () => {
                       fontWeight: "bold",
                       textTransform: "capitalize",
                     }}
-                    // onClick={() => {
+                    onClick={() => {
-                    //   navigate("/territorymanager/task", {
+                      navigate("/territorymanager/task", {
-                    //     replace: true,
+                        replace: true,
-                    //   });
+                      });
-                    // }}
+                    }}
                   >
                     Show Territory Manager Task
                   </Button>

src/views/TerritoryManager/TerritoryManager.js

@@ -154,7 +154,7 @@ const TerritoryManager = () => {
               <div className="card">
                 <div className="card-body">
                   <div className="row ml-0 mr-0 mb-10">
-                    <div className="col-lg-1">
+                    <div className="col-lg-2">
                       <div className="dataTables_length">
                         <label className="w-100">
                           Show
@@ -175,7 +175,7 @@ const TerritoryManager = () => {
                         </label>
                       </div>
                     </div>
-                    <div className="col-lg-3">
+                    <div className="col-lg-4">
                       <label>Territory Manager Name:</label>
                       <input
                         type="text"
@@ -212,7 +212,7 @@ const TerritoryManager = () => {
                     </div>
                   </div>
 
-                  <div className="table-responsive table-shoot mt-3">
+                  <div className="table-responsive table-shoot mt-2">
                     <table className="table table-centered table-nowrap">
                       <thead
                         className="thead-light"
@@ -287,7 +287,7 @@ const TerritoryManager = () => {
                                     // hour12: true,
                                   })}
                                 </td>
-                                <td className="text-start">
+                                <td className="text-center">
                                   <Link
                                     to={`/view/salescoordinator/${territorymanager._id}`}
                                   >
@@ -334,7 +334,7 @@ const TerritoryManager = () => {
                                   <button
                                     type="button"
                                     style={{ color: "white" }}
-                                    className="btn btn-danger btn-sm  waves-effect waves-light btn-table ml-1 md-mt-1 md-ml-0"
+                                    className="btn btn-danger btn-sm  waves-effect waves-light btn-table ml-1"
                                     onClick={() =>
                                       handleDelete(territorymanager._id)
                                     }