Merge branch 'master' of https://gitlab.mynisum.com/vsingamchetty/nisum-scorecard into apiserver

src/App.js

@@ -5,7 +5,7 @@ import Layout from './pages/layout';
 import Viewreportee from './pages/viewReportee';
 import './App.css';
 import PageNotFound from './pages/pagenotfound/PageNotFound';
-
+import Exporttable from './pages/reportexport'
 function App() {
   return (
     <BrowserRouter>
@@ -13,6 +13,7 @@ function App() {
         <Route path='/' element={<Home />}/>
         <Route path="/dashboard" element={<Layout><Dashboard/></Layout>}/>
         <Route path="/viewreportee" element={<Layout><Viewreportee/></Layout>}/>
+        <Route path="/reportees" element={<Layout><Exporttable/></Layout>}/>
         <Route path="/*" element={<PageNotFound/>}/>
       </Routes>
     </BrowserRouter>

src/components/leftSidebar/index.jsx

 import React, { useEffect, useState } from "react";
-import { fetchReportees, setViewReportee } from "../../redux/reducers/reporteesSlice";
+import { fetchReportees, setViewReportee, setCurrPage, setPagesCount } from "../../redux/reducers/reporteesSlice";
 import { Link } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
 import { useParams } from "react-router-dom";
@@ -9,10 +9,8 @@ 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, totalCount } = useSelector((state) => state.reportees);
+  const { reportees, loading, viewReportee, totalCount, currPage, pagesCount } = useSelector((state) => state.reportees);
   const userDetails = useSelector((state) => state.userDetails);
 
 
@@ -38,7 +36,7 @@ function LeftSidebar() {
   };
 
   useEffect(() => {
-    setPagesCount(Math.ceil((totalCount) / (10)))
+    dispatch(setPagesCount(Math.ceil((totalCount) / (10))))
   }, [totalCount])
 
   const handlePageChange = (currPage) => {
@@ -47,7 +45,7 @@ function LeftSidebar() {
       page: currPage,
       perPage: 10
     }
-    setCurrPage(currPage)
+    dispatch(setCurrPage(currPage))
     dispatch(fetchReportees(data))
   }
 

src/components/sidebar/index.jsx

@@ -37,7 +37,7 @@ function Sidebar() {
           </li>
           <li>
             <Link
-              className={`flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-lg hover:bg-gray-100 `}
+              className={`flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-lg hover:bg-gray-100 `}  to={`/reportees`}
             >
               <svg
                 className="size-4"

src/pages/dashboard/index.jsx

 import React, { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
-import { fetchReportees, setViewReportee } from "../../redux/reducers/reporteesSlice";
+import { fetchReportees, setViewReportee, setCurrPage, setPagesCount } from "../../redux/reducers/reporteesSlice";
 import Table from '../../components/table';
 import RightArrowIcon from '../../assets/icons/rightArrowIcon';
 import { scoreColor } from '../../utils/commonFunctions';
@@ -10,11 +10,9 @@ import PaginationComponent from "../../components/Pagenation/Pagenation";
 function Dashboard() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const { reportees, loading, totalCount } = useSelector((state) => state.reportees);
+  const { reportees, loading, totalCount, currPage,  pagesCount} = useSelector((state) => state.reportees);
   const userDetails = useSelector((state) => state.userDetails);
   const [reporteIds, setReporteIds] = useState([]);
-  const [currPage, setCurrPage] = useState(1)
-  const [pagesCount, setPagesCount] = useState(1);
   const [inputValue, setInputValue] = useState('');
 
   //  userDetails.user.reportees || [];
@@ -24,13 +22,13 @@ function Dashboard() {
       page: currPage,
       perPage: 10
     }
-    setCurrPage(currPage)
+    dispatch(setCurrPage(currPage))
     dispatch(fetchReportees(data))
   }
 
 
   useEffect(() => {
-    setPagesCount(Math.ceil((totalCount) / (10)))
+    dispatch(setPagesCount(Math.ceil((totalCount) / (10))))
   }, [totalCount])
 
   useEffect(() => {

src/pages/reportexport/index.jsx

+import React, { useEffect ,useState} from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { fetchReportstableData } from '../../redux/reducers/exporttableslice';
+import { setPastMonth,setPastTwoMonths,setPastsixMonths,setPasttwelvemonths } from '../../redux/reducers/exporttableslice';
+function Exporttable() {
+    const dispatch = useDispatch()
+    const { user } = useSelector((state) => state.userDetails);
+    const { totalReporteesData } = useSelector((state) => state.totalreportees);
+    const [selectedOption, setSelectedOption] = useState('');
+ 
+  const handleDropdownChange = (event) => {
+    const selectedValue = event.target.value;
+    setSelectedOption(selectedValue);
+    if (selectedValue === 'pastMonth') {
+      dispatch(setPastMonth());
+    } else if (selectedValue === 'pastthreeMonth') {
+      dispatch(setPastTwoMonths());
+    } else if (selectedValue === 'pastsixMonth'){
+        dispatch(setPastsixMonths());
+    } else if (selectedValue === 'pasttwelvemonth')
+      dispatch(setPasttwelvemonths());
+  
+  };
+    useEffect(() => {
+        dispatch(fetchReportstableData({
+            reportees: user.reportees,
+            page: 1,
+            perPage: user.reportees.length
+
+        }))
+    }, [user]);
+
+
+    if (totalReporteesData?.length > 0)
+        return (
+
+            <div>
+                <div className="" >
+                    <div className="text-blue-800 py-3 pl-2 text-center"> Genarate Report</div>
+
+                    <div>
+                        <form className=" p-2 text-[12px]" >
+                            <div className="flex items-center justify-evenly ">
+                                <div className='flex items-center'>
+                                    <label htmlFor="countries" className='font-semibold'>Select Employee: </label>
+                                    <select className="bg-gray-50  ml-2 w-[200px] border border-gray-300 text-gray-900 text-sm   rounded-sm focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700" >
+                                        <option id="" value="">Select</option>
+                                        {
+                                            totalReporteesData && totalReporteesData.map((reportee) => <option>{reportee?.empName}</option>)
+                                        }
+                                    </select>
+                                </div>
+                                <div className='flex items-center'>
+                                    <label htmlFor="countries" className='font-semibold'>Select Period:</label>
+                                    <select  value={selectedOption} onChange={handleDropdownChange} className="bg-gray-50 ml-2 w-[200px] border border-gray-300 text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 " >
+                                        <option id="" value="">Select</option>
+                                        <option id=""  value="pastMonth">Past 1 months</option>
+                                        <option id="" value="pastthreeMonth">Past 3 months</option>
+                                        <option id="" value="pastsixMonth">Past 6 months</option>
+                                        <option id="" value="pasttwelvemonth">Past year</option>
+                                    </select>
+                                </div>
+                                <div className='flex'>
+                                    <button className="px-8  py-2 ml-5 w-[100px]  h-[40px] bg-green-500 text-white font-semibold rounded-md">View</button>
+                                    <button type="button" className="px-3  py-2 ml-5   w-[100px]  h-[40px] bg-red-500 font-semibold text-white rounded-md">Download</button>
+                                </div>
+                            </div>
+
+                        </form>
+                    </div>
+                </div>
+                <div className='mx-20 items-center justify-center '>
+                    <div className='mt-5'>
+                        <div className='max-w-sm ml-4'>
+                            <div className="relative">
+                                <div className="absolute mt-3 flex items-center ps-3 pointer-events-none">
+                                    <svg className="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+                                        <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
+                                    </svg>
+                                </div>
+                                <input type="search" id="default-search" className="block p-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Search " />
+                            </div>
+                        </div>
+                    </div>
+                    <div className="p-4">
+                        <table className="border-2 border-collapse w-full border-[#B7B7B7]">
+                            <thead>
+                                <tr >
+
+                                    <th className="border-2 p-2 border-[#B7B7B7] text-start font-medium bg-[#D9D9D9] w-4/12">
+                                        ACTIVITY NAME
+                                    </th>
+                                    <th className="border-2 p-2 border-[#B7B7B7] text-start font-medium bg-[#D9D9D9] w-4/12  ">
+                                        DATE
+                                    </th>
+                                    <th className="border-2 p-2 border-[#B7B7B7] text-start font-medium bg-[#D9D9D9] w-4/12 " >
+                                        SCORE
+                                    </th>
+                                    <th className="border-2 p-2 border-[#B7B7B7] text-start font-medium bg-[#D9D9D9] w-4/12  " >
+                                        COMMENTS
+                                    </th>
+
+                                </tr>
+                            </thead>
+                            <tbody>
+
+                                <tr>
+
+                                    <td className="border-2 p-2 border-[#B7B7B7] bg-white">
+                                        ABC
+                                    </td>
+                                    <td className="border-2 p-2 border-[#B7B7B7] bg-white">
+                                        01/01/2024
+                                    </td>
+                                    <td className="border-2 p-2 border-[#B7B7B7] bg-white">
+                                        5
+                                    </td>
+                                    <td className="border-2 p-2 border-[#B7B7B7] bg-white">
+                                        VERY GOOD
+                                    </td>
+
+                                </tr>
+                                <tr>
+
+                                    <td className="border-2 p-2 border-[#B7B7B7] bg-white">
+                                        XYZ
+                                    </td>
+                                    <td className="border-2 p-2 border-[#B7B7B7] bg-white">
+                                        01/01/2024
+                                    </td>
+                                    <td className="border-2 p-2 border-[#B7B7B7] bg-white">
+                                        4
+                                    </td>
+                                    <td className="border-2 p-2 border-[#B7B7B7] bg-white">
+                                        GOOD
+                                    </td>
+
+                                </tr>
+                            </tbody>
+                        </table>
+
+                    </div>
+
+                </div>
+
+
+
+            </div>
+        )
+    else
+        return <div classNameName="w-full h-full">
+            <p className="text-center align-middle pt-14 pb-14 text-blue-500  font-bold">No records to display</p>
+        </div>
+}
+
+export default Exporttable
\ No newline at end of file

src/redux/reducers/exporttableslice.js

+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import { base_url } from "../../utils/constants";
+import axios from "axios";
+
+const initialState = {
+    totalReporteesData: [],
+    activitiesData:null,
+    loading: false,
+    error: null,
+    fromDate: null,
+    toDate: null,
+};
+
+export const fetchReportstableData = createAsyncThunk("getreportees", async (data) => {
+  return await axios.post(`${base_url}/getreportees`,  data)
+    .then((response) => response.data);
+});
+
+const exporttableSlice = createSlice({
+  name: "totalReportees",
+  initialState,
+  reducers: {
+    resetReporteesTableData:() => {
+      return initialState
+    },
+    setPastMonth: (state) => {
+        const toDate = new Date();
+        const fromDate = new Date();
+        fromDate.setMonth(fromDate.getMonth() - 1);
+        state.fromDate = fromDate;
+        state.toDate = toDate;
+        console.log(fromDate,toDate)
+      },
+      setPastTwoMonths: (state) => {
+        const toDate = new Date();
+        const fromDate = new Date();
+        fromDate.setMonth(fromDate.getMonth() - 3);
+        state.fromDate = fromDate;
+        state.toDate = toDate;
+        console.log(fromDate,toDate)
+      },
+      setPastsixMonths: (state) => {
+        const toDate = new Date();
+        const fromDate = new Date();
+        fromDate.setMonth(fromDate.getMonth() - 6);
+        state.fromDate = fromDate;
+        state.toDate = toDate;
+        console.log(fromDate,toDate)
+      },
+      setPasttwelvemonths: (state) => {
+        const toDate = new Date();
+        const fromDate = new Date();
+        fromDate.setMonth(fromDate.getMonth() - 12);
+        state.fromDate = fromDate;
+        state.toDate = toDate;
+        console.log(fromDate,toDate)
+      },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchReportstableData.pending, (state) => {
+      state.loading = true;
+      state.error = "pending";
+    });
+    builder.addCase(fetchReportstableData.fulfilled, (state, action) => {
+      state.loading = false;
+      state.totalReporteesData = action.payload.data;
+      state.error = "";
+    });
+    builder.addCase(fetchReportstableData.rejected, (state, action) => {
+      state.loading = false;
+      state.totalReporteesData = null;
+      state.error = action.error || "Something went wrong!";
+    });
+  },
+});
+
+export const {resetReporteesTableData,setPastMonth,setPastTwoMonths,setPastsixMonths,setPasttwelvemonths} = exporttableSlice.actions;
+
+export default exporttableSlice.reducer;

src/redux/reducers/reporteesSlice.js

@@ -8,6 +8,8 @@ const initialState = {
   totalCount:0,
   loading: false,
   error: null,
+  currPage:1,
+  pagesCount:1
 };
 
 export const fetchReportees = createAsyncThunk("getreportees", async (data) => {
@@ -35,6 +37,12 @@ const reporteesSlice = createSlice({
             viewReportee: reportee
           }
         }
+    },
+    setCurrPage: (state, action) => {
+      state.currPage = action.payload
+    },
+    setPagesCount: (state, action) => {
+      state.pagesCount = action.payload
     }
   },
   extraReducers: (builder) => {
@@ -56,6 +64,6 @@ const reporteesSlice = createSlice({
   },
 });
 
-export const {resetReportees,setViewReportee} = reporteesSlice.actions;
+export const {resetReportees,setViewReportee, setCurrPage, setPagesCount} = reporteesSlice.actions;
 
 export default reporteesSlice.reducer;

src/redux/reducers/rootReducer.js

@@ -2,12 +2,13 @@ import { combineReducers } from 'redux';
 import reporteesReducer from './reporteesSlice';
 import userReducer from './userSlice';
 import reportReducer from './viewreporteeSlice';
-
+import  exporttableReducer from './exporttableslice';
 
 const rootReducer = combineReducers({
     userDetails: userReducer,
     reportees: reporteesReducer,
-    reports: reportReducer
+    reports: reportReducer,
+    totalreportees: exporttableReducer
 });
 
 export default rootReducer;
\ No newline at end of file

src/utils/clearStore.js

 import {resetUser} from '../redux/reducers/userSlice';
 import {resetReportees} from '../redux/reducers/reporteesSlice';
 import { resetReports } from '../redux/reducers/viewreporteeSlice';
-
+import {resetReporteesTableData} from '../redux/reducers/exporttableslice';
 const clearStore = (dispatch) => {
     dispatch(resetUser());
     dispatch(resetReportees());
     dispatch(resetReports())
+    dispatch(resetReporteesTableData())
 };
 
 export default clearStore;
\ No newline at end of file