Added pdf download changes

package.json

@@ -10,6 +10,8 @@
     "axios": "^1.6.7",
     "cors": "^2.8.5",
     "express": "^4.18.3",
+    "jspdf": "^2.5.1",
+    "jspdf-autotable": "^3.8.2",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "mongodb": "^6.5.0",

src/components/sidebar/index.jsx

@@ -5,13 +5,14 @@ import DashboardIcon from '../../assets/icons/dashboardIcon';
 import ReportsIcon from '../../assets/icons/reportsIcon';
 
 const menus = [
-  {title: "Dashboard", path: '/dashboard', icon: <DashboardIcon/>},
-  {title: "Reports", path: '/reportees', icon: <ReportsIcon />}
+  {title: "Dashboard", path: '/dashboard', selectPaths: ['dashboard', 'viewreportee'], icon: <DashboardIcon/> },
+  {title: "Reports", path: '/reportees', selectPaths:['reportees'], icon: <ReportsIcon />}
 ]
 
 function Sidebar() {
   const url = window.location.href;
   const  [windowWidth, windowHeight] = SetWindowSize();
+  const selected = url.split('/').at(-1)
 
   return (
     <div className="w-[20%] flex items-center flex-col overflow-auto" style={{ height: `calc(${windowHeight}px - 87px)` }}>
@@ -24,7 +25,7 @@ function Sidebar() {
             menus.map((menu) => (
               <li key={menu.path}>
               <Link
-                className={`flex items-center ${url.includes(menu.path) && 'bg-gray-100'} gap-x-3.5 py-2 px-2.5  text-sm text-slate-700 rounded-lg hover:bg-gray-100 `}
+                className={`flex items-center ${menu.selectPaths.includes(selected) && 'bg-gray-100'} gap-x-3.5 py-2 px-2.5  text-sm text-slate-700 rounded-lg hover:bg-gray-100 `}
                 to={menu.path}
               >
                 <span>{menu.icon}</span>
@@ -33,7 +34,7 @@ function Sidebar() {
             </li>
             ))
           }
-         
+          
         </ul>
       </nav>
     </div>

src/index.css

@@ -23,3 +23,23 @@ code {
   display: inline-block;
 }
 
+
+.loading {
+  width: 100%;
+  height: 100%;
+  content: '';
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  border: 3px solid #fff;
+  border-radius: 50%;
+  border-top-color: transparent;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
\ No newline at end of file

src/pages/reportexport/index.jsx

 import React, { useEffect, useState } from "react";
+import axios from "axios";
 import { useDispatch, useSelector } from "react-redux";
-import {
-  fetchReportstableData,
-  fetchReportesActivitiesData,
-} from "../../redux/reducers/exporttableslice";
+import { fetchReportesActivitiesData, resetReporteesTableData, resetActivitiesData } from "../../redux/reducers/exporttableslice";
 import { fetchReportees } from "../../redux/reducers/reporteesSlice";
 import { convertUTCToLocal } from "../../utils/commonFunctions";
 import Table from "../../components/table";
+import { base_url } from "../../utils/constants";
+import jsPDF from 'jspdf';
+import 'jspdf-autotable';
 
 function Exporttable() {
   const dispatch = useDispatch();
@@ -20,6 +21,8 @@ function Exporttable() {
   const [fromDate, setFromDate] = useState("");
   const [toDate, setToDate] = useState("");
   const [inputValue, setInputValue] = useState('');
+  const [pdfData, setPdfData] = useState([]);
+  const [pdfLoading, setPdfLoading] = useState(false);
 
   const calculateDateRange = (monthsAgo) => {
     const toDate = new Date().toISOString().split("T")[0];
@@ -65,8 +68,17 @@ function Exporttable() {
       };
       dispatch(fetchReportees(data));
     }
+    return(() => {
+      dispatch(resetReporteesTableData())
+    })
   }, [user]);
 
+  useEffect(() => {
+    if(activitiesData.length > 0) {
+      dispatch(resetActivitiesData())
+    }
+  }, [selectedEmployee, toDate, fromDate])
+
   const headers = [
     { title: "Activity Name", id: "aName" },
     {
@@ -96,6 +108,52 @@ function Exporttable() {
   ];
 
 
+  // Function to convert table to PDF
+  const convertTableToPDF = (data) => {
+    const doc = new jsPDF({
+      orientation: 'portrait',
+      format: 'a4'
+    });
+    const headerParams = {
+      align: 'justify',
+      fillStyle: 'FD'
+    }
+  
+    const tableData = data.map(item => [item.aName, item.ratedBy, item.score, item.comments]);
+    // Add header to the PDF
+    doc.text('Score card reports', 15, 10, headerParams);
+  
+    doc.autoTable({
+      head: [['Activity Name', 'Rated By', 'Score', 'Comments']], // Extract header row
+      body: tableData, // Extract data rows
+      startY: 20, // Start y-position of the table
+      theme: 'striped', // Table theme: 'plain', 'grid', 'striped', 'striped' (default is 'striped')
+      styles: { overflow: 'linebreak' }, // Styles for table cells
+      columnStyles: { 2: { fontStyle: 'bold' } }, // Styles for specific columns
+    });
+  
+    // Save PDF
+    doc.save('ActivitiesList.pdf');
+  };
+
+  const getPdfList = async (type) => {
+    try{
+      setPdfLoading(true);
+      let data = {
+        empId: Number(selectedEmployee),
+        fromDate: fromDate,
+        toDate: toDate,
+      };
+      const response = await axios.post(`${base_url}/getActivities`, data).then((res) =>  res.data.activities);
+      if(response.length > 0) convertTableToPDF(response);
+    } catch {
+      setPdfLoading(false);
+    } finally {
+      setPdfLoading(false);
+    }
+  }
+
+
   if (reportees?.length > 0) {
     return (
       <div>
@@ -166,11 +224,13 @@ function Exporttable() {
                   </button>
 
                   <button
-                  disabled={true}
+                    onClick={getPdfList}
+                    disabled={pdfLoading}
                     type="button"
-                    className="px-3  py-2 ml-5   w-[100px]  h-[40px] bg-gray-500 font-semibold text-white rounded-md"  
+                    className="px-3  py-2 ml-5 min-w-[100px] disabled:bg-gray-400  h-[40px] bg-blue-500 font-semibold text-white rounded-md flex items-center justify-center"  
                   >
-                    Download
+                    <span>Download</span>
+                    { pdfLoading && <div className="loading ml-2 "></div>}
                   </button>
                 </div>
               </div>

src/redux/reducers/exporttableslice.js

@@ -21,6 +21,9 @@ const exporttableSlice = createSlice({
   name: "totalReportees",
   initialState,
   reducers: {
+    resetActivitiesData: (state) => {
+      state.activitiesData = []
+    },
     resetReporteesTableData:() => {
       return initialState
     },
@@ -46,6 +49,6 @@ const exporttableSlice = createSlice({
   },
 });
  
-export const {resetReporteesTableData} = exporttableSlice.actions;
+export const {resetReporteesTableData, resetActivitiesData} = exporttableSlice.actions;
  
 export default exporttableSlice.reducer;