Added pagination

src/assets/icons/leftIcon.js

+import React from "react";
+
+function LeftIcon() {
+  return (
+    <svg
+      fill="#000000"
+      height="15px"
+      width="20px"
+      version="1.1"
+      id="Layer_1"
+      viewBox="0 0 330 330"
+    >
+      <path
+        id="XMLID_92_"
+        d="M111.213,165.004L250.607,25.607c5.858-5.858,5.858-15.355,0-21.213c-5.858-5.858-15.355-5.858-21.213,0.001
+	l-150,150.004C76.58,157.211,75,161.026,75,165.004c0,3.979,1.581,7.794,4.394,10.607l150,149.996
+	C232.322,328.536,236.161,330,240,330s7.678-1.464,10.607-4.394c5.858-5.858,5.858-15.355,0-21.213L111.213,165.004z"
+      />
+    </svg>
+  );
+}
+
+export default LeftIcon;

src/assets/icons/rightArrowIcon.js

+import React from "react";
+
+function RightArrowIcon() {
+  return (
+    <svg fill="#000000" height="20px" width="20px" version="1.1" id="Layer_1"
+         viewBox="0 0 330 330">
+    <path id="XMLID_27_" style={{fill: 'white'}} d="M15,180h263.787l-49.394,49.394c-5.858,5.857-5.858,15.355,0,21.213C232.322,253.535,236.161,255,240,255
+        s7.678-1.465,10.606-4.394l75-75c5.858-5.857,5.858-15.355,0-21.213l-75-75c-5.857-5.857-15.355-5.857-21.213,0
+        c-5.858,5.857-5.858,15.355,0,21.213L278.787,150H15c-8.284,0-15,6.716-15,15S6.716,180,15,180z"/>
+    </svg>
+  );
+}
+
+export default RightArrowIcon;

src/assets/icons/rightIcon.js

@@ -2,11 +2,21 @@ import React from "react";
 
 function RightIcon() {
   return (
-    <svg fill="#000000" height="20px" width="20px" version="1.1" id="Layer_1"
-         viewBox="0 0 330 330">
-    <path id="XMLID_27_" style={{fill: 'white'}} d="M15,180h263.787l-49.394,49.394c-5.858,5.857-5.858,15.355,0,21.213C232.322,253.535,236.161,255,240,255
-        s7.678-1.465,10.606-4.394l75-75c5.858-5.857,5.858-15.355,0-21.213l-75-75c-5.857-5.857-15.355-5.857-21.213,0
-        c-5.858,5.857-5.858,15.355,0,21.213L278.787,150H15c-8.284,0-15,6.716-15,15S6.716,180,15,180z"/>
+    <svg
+      fill="#000000"
+      height="15px"
+      width="20px"
+      version="1.1"
+      id="Layer_1"
+      viewBox="0 0 330 330"
+    >
+      <path
+        id="XMLID_222_"
+        d="M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001
+	c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213
+	C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606
+	C255,161.018,253.42,157.202,250.606,154.389z"
+      />
     </svg>
   );
 }

src/components/Pagenation/Pagenation.jsx

 import React from 'react';
+import LeftIcon from '../../assets/icons/leftIcon';
+import RightIcon from '../../assets/icons/rightIcon';
 
 const PaginationComponent = ({ currentPage, totalPages, onPageChange }) => {
   const pageNumbers = [];
@@ -8,8 +10,9 @@ const PaginationComponent = ({ currentPage, totalPages, onPageChange }) => {
   }
 
   return (
-    <nav className="flex justify-center ">
+    <nav className="flex justify-center my-2">
       <ul className="pagination flex">
+        <button disabled={currentPage === 1} onClick={() => onPageChange(currentPage-1)} className='mr-2 hover:bg-blue-400 border rounded disabled:bg-gray-200'><LeftIcon /></button>
         {pageNumbers.map(number => (
           <li key={number} className={`page-item ${number === currentPage ? 'active' : ''}` }>
             <button onClick={() => onPageChange(number)} className=" w-[22px]  font-bold h-[22px] ">
@@ -17,6 +20,7 @@ const PaginationComponent = ({ currentPage, totalPages, onPageChange }) => {
             </button>
           </li>
         ))}
+        <button disabled={currentPage === totalPages} onClick={() => onPageChange(currentPage+1)} className='ml-2 hover:bg-blue-400 border rounded disabled:bg-gray-200'><RightIcon/></button>
       </ul>
     </nav>
   );

src/components/leftSidebar/index.jsx

 import React, { useEffect, useState } from "react";
+import { fetchReportees } from "../../redux/reducers/reporteesSlice";
 import { Link } from "react-router-dom";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import { useParams } from "react-router-dom";
-import scoreColor from '../../utils/scoreColor';
+import { scoreColor } from '../../utils/commonFunctions';
 import Loading from "../loading Component/Loading";
 
 function LeftSidebar() {
+  const dispatch = useDispatch();
+  const [currPage, setCurrPage] = useState(1);
+  const [inputValue, setInputValue] = useState('');
   const { reportees, loading } = useSelector((state) => state.reportees);
-  const { id } = useParams()
+  const userDetails = useSelector((state) => state.userDetails);
+  const { id } = useParams();
+
+  useEffect(() => {
+    const debounceTimeout = setTimeout(() => {
+      const data = {
+        reportees: userDetails.user.reportees,
+        page: currPage,
+        perPage: 10,
+        searchText:inputValue
+      };
+      dispatch(fetchReportees(data));
+    }, 1000);
+
+    return () => clearTimeout(debounceTimeout);
+  }, [inputValue]);
+
+  const handleChange = (event) => {
+    setInputValue(event.target.value);
+  };
 
   return (
 
     <div className="  w-[33%] flex flex-col px-[5px]">
-      <p className="text-xl text-blue-400 font-semibold">
-        My Reportees
-      </p>
+      <div className="flex mt-3 items-center justify-between">
+        <p className="text-xl text-blue-400 font-semibold pl-4">
+          My Reportees
+        </p>
+        <input 
+          placeholder="Search Reportees"
+          type="text" 
+          className="p-2 mi-2 border rounded w-[160px]"
+          value={inputValue} 
+          onChange={handleChange} 
+        />
+      </div>
       {
         (loading) ? <Loading /> :
           <div className="p-2 bg-[#E9EDEE] mt-4 max-h-[80vh] overflow-auto">

src/components/table/index.jsx

@@ -11,7 +11,7 @@ function Table({headers, data,loading, maxHeight}) {
           <tr className="mb-2">
             {headers?.map((item,index) => (
               <th key={index} scope="col" className={`px-6 py-4 w-[${item.width}]`} > 
-                {item.title}
+                { item.renderHeader ? item.renderHeader(item.title) : item.title}
               </th>
             ))}
           </tr>

src/index.css

@@ -23,5 +23,6 @@ code {
   display: inline-block;
 }
 
-
-
+.childDiv {
+  max-height: calc(100vh - 85px);
+}

src/pages/dashboard/index.jsx

@@ -3,8 +3,8 @@ import { Link, useNavigate } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 import { fetchReportees } from "../../redux/reducers/reporteesSlice";
 import Table from '../../components/table';
-import RightIcon from '../../assets/icons/rightIcon';
-import scoreColor from '../../utils/scoreColor';
+import RightArrowIcon from '../../assets/icons/rightArrowIcon';
+import { scoreColor } from '../../utils/commonFunctions';
 import PaginationComponent from "../../components/Pagenation/Pagenation";
 
 function Dashboard() {
@@ -14,7 +14,8 @@ function Dashboard() {
   const userDetails = useSelector((state) => state.userDetails);
   const [reporteIds, setReporteIds] = useState([]);
   const [currPage, setCurrPage] = useState(1)
-  const [pagesCount, setPagesCount] = useState(1)
+  const [pagesCount, setPagesCount] = useState(1);
+  const [inputValue, setInputValue] = useState('');
 
   //  userDetails.user.reportees || [];
   const handlePageChange = (currPage) => {
@@ -59,10 +60,29 @@ function Dashboard() {
     }
   }, [userDetails]);
 
+  useEffect(() => {
+    const debounceTimeout = setTimeout(() => {
+      const data = {
+        reportees: userDetails.user.reportees,
+        page: currPage,
+        perPage: 10,
+        searchText:inputValue
+      };
+      dispatch(fetchReportees(data));
+    }, 1000);
+
+    return () => clearTimeout(debounceTimeout);
+  }, [inputValue]);
+
+  const handleChange = (event) => {
+    setInputValue(event.target.value);
+  };
+
   const headers = [
     {
       title: "Employee Name",
       id: "empName",
+      renderHeader: (value) => <div><span>{value}</span> <input placeholder="Search Employee" value={inputValue} onChange={handleChange} type="text" className="p-2 mi-2 border rounded"/></div>,
       render: (value) => <span className="flex items-center">
         {/* <img className="pr-2" src="/man.png" width="30px" height="30px" /> */}
         {value}</span>
@@ -89,12 +109,13 @@ function Dashboard() {
       id: "empId",
       render: (value) => <Link to={`/viewreportee/${value}`}>
         <button className="bg-blue-400 text-white rounded-md px-2 py-1 flex items-center justify-center w-[40px]">
-          <RightIcon />
+          <RightArrowIcon />
           </button>
         </Link>
     },
   ]
 
+
   return (
     <div>
       <div className="mb-2">
@@ -102,7 +123,7 @@ function Dashboard() {
          
       <div className="">
         {reportees && (
-          <div className="flex justify-end mt-2">
+          <div className="flex justify-center mt-2">
             {/* <div className="text-blue-500">Total Results: {pagesCount}</div> */}
             {pagesCount > 1 && (
               <PaginationComponent

src/pages/reports/index.jsx

@@ -6,7 +6,7 @@ import axios from 'axios';
 import { fetchReports } from "../../redux/reducers/reportSlice";
 import { fetchReportees } from "../../redux/reducers/reporteesSlice";
 import Accordion from "../../components/accordion";
-import scoreColor from '../../utils/scoreColor';
+import {scoreColor} from '../../utils/commonFunctions';
 import DateRangePicker from "../../components/dateRangePicker/DateRangePicker";
 
 function Reports() {

src/utils/scoreColor.js → src/utils/commonFunctions.js

-const scoreColor = (value) => {
+export const scoreColor = (value) => {
     if (value < 1) {
       return 'bg-red-400';
     } else if (value >= 1 && value < 2) {
@@ -16,4 +16,13 @@ const scoreColor = (value) => {
     }
 };
 
-export default scoreColor;
+export const debounce = (func, delay) => {
\ No newline at end of file
+  let timeoutId;
+  
+  return function(...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      func.apply(this, args);
+    }, delay);
+  };
+}