Added pagination to my reportees

src/components/accordion/index.jsx

 import React, { useState } from "react";
 import Table from "../table";
-import moment from "moment";
 import ModalButton from "../modal/modalButton";
 import { useSelector ,useDispatch} from "react-redux";
 import { useEffect } from "react";
@@ -8,6 +7,7 @@ import {useParams} from 'react-router'
 import { fetchReportees } from "../../redux/reducers/reporteesSlice";
 import { calculateDefaultScore,calculateInitiativeScore } from "../../redux/reducers/viewreporteeSlice";
 import Loading from "../loading Component/Loading";
+import {convertUTCToLocal} from '../../utils/commonFunctions';
 
 
 function Accordion({ title, data ,handleAddActivity,open,handleAccordian}) {
@@ -41,7 +41,7 @@ function Accordion({ title, data ,handleAddActivity,open,handleAccordian}) {
   }
   const headers = [
     { title: "Activity Name", id: "aName"},
-    { title: "Date", id: "recorded_date",  render: (value) => moment(value).format('DD-MM-YYYY') },
+    { title: "Date", id: "recorded_date",  render: (value) => convertUTCToLocal(value) },
     {title: "Rated By", id: "ratedBy"},
     { title: "Score", id: "score", render: (value) => <div className="w-[35px] px-3 bg-blue-400 rounded-full text-white font-bold text-center p-[4px]">{value}</div> },
     { title: "Comments", id: "comments", render:(value)=><span className="listData" title={value}>{value}</span>},

src/components/header/index.jsx

@@ -42,7 +42,7 @@ function Header({ isOpen }) {
             <div className="flex items-center relative">
                 <button ref={logoutRef} className=" -mt-1 text-2xl flex" onClick={() => setOpen(!open)}>
                     <img src="/user.png" width="35px" height="35px" className="mt-2 pr-2" />
-                    <div className="flex flex-col">
+                    <div className="flex flex-col items-start">
                         <p className="text-lg font-semibold">{user?.empName}</p>
                         <p className="text-xs">{user?.designation}</p>
                     </div>

src/components/leftSidebar/index.jsx

@@ -5,12 +5,14 @@ import { useSelector, useDispatch } from "react-redux";
 import { useParams } from "react-router-dom";
 import { scoreColor } from '../../utils/commonFunctions';
 import Loading from "../loading Component/Loading";
+import PaginationComponent from "../Pagenation/Pagenation";
 
 function LeftSidebar() {
   const dispatch = useDispatch();
   const [currPage, setCurrPage] = useState(1);
+  const [pagesCount, setPagesCount] = useState(1);
   const [inputValue, setInputValue] = useState(null);
-  const { reportees, loading, viewReportee } = useSelector((state) => state.reportees);
+  const { reportees, loading, viewReportee, totalCount } = useSelector((state) => state.reportees);
   const userDetails = useSelector((state) => state.userDetails);
 
 
@@ -35,6 +37,20 @@ function LeftSidebar() {
     setInputValue(event.target.value);
   };
 
+  useEffect(() => {
+    setPagesCount(Math.ceil((totalCount) / (10)))
+  }, [totalCount])
+
+  const handlePageChange = (currPage) => {
+    let data = {
+      reportees: userDetails.user.reportees,
+      page: currPage,
+      perPage: 10
+    }
+    setCurrPage(currPage)
+    dispatch(fetchReportees(data))
+  }
+
   return (
 
     <div className="  w-[33%] flex flex-col px-[5px]">
@@ -56,7 +72,7 @@ function LeftSidebar() {
             {reportees?.map(({ empName, score, empId }) => (
               <button onClick={() => dispatch(setViewReportee(empId))}
                 // to={`/viewreportee`}
-                className={`flex items-center hover:bg-blue-400 hover:text-white  bg-${viewReportee.empId == empId ? "blue-400 text-white" : "white"
+                className={`flex items-center hover:bg-blue-400 hover:text-white  bg-${viewReportee?.empId == empId ? "blue-400 text-white" : "white"
                   } p-2 justify-between mb-1 w-full`}
                 key={empId}
               >
@@ -70,7 +86,13 @@ function LeftSidebar() {
             ))}
           </div>
       }
-
+      <div>
+        <PaginationComponent 
+          currentPage={currPage}
+          totalPages={pagesCount}
+          onPageChange={handlePageChange}
+        />
+      </div>
     </div>
   );
 }

src/pages/viewReportee/index.jsx

@@ -76,15 +76,15 @@ function Viewreportee() {
   }
 
   useEffect(()=>{
-    if(reportees.length>0 && viewReportee)
-     dispatch(fetchReporteeActivities({empId:viewReportee.empId}))
+    if(reportees.length>0 && viewReportee !== null)
+     dispatch(fetchReporteeActivities({empId:viewReportee?.empId}))
   },[reportees,viewReportee])
 
-  useEffect(()=>{
-    if(reportees.length){
-      dispatch(setViewReportee(viewReportee.empId))
-    }
-  },[reportees])
+  // useEffect(()=>{
+  //   if(reportees.length){
+  //     dispatch(setViewReportee(viewReportee?.empId))
+  //   }
+  // },[reportees])
 
 
 

src/utils/commonFunctions.js

+import moment from 'moment';
+
 export const scoreColor = (value) => {
     if (value < 1) {
       return 'bg-red-400';
@@ -18,7 +20,7 @@ export const scoreColor = (value) => {
 
 export const debounce = (func, delay) => {
   let timeoutId;
-  
+
   return function(...args) {
     clearTimeout(timeoutId);
     timeoutId = setTimeout(() => {
@@ -26,3 +28,10 @@ export const debounce = (func, delay) => {
     }, delay);
   };
 }
+
+export const convertUTCToLocal = (utcDate) => {
+  const utcDateObj = new Date(utcDate);
+  const localTimeMillis = utcDateObj.getTime() + utcDateObj.getTimezoneOffset() * 60 * 1000;
+  const localDateObj = new Date(localTimeMillis);
+  return moment(localDateObj).format('DD-MM-YYYY')
+}
\ No newline at end of file