Merge branch 'initailSetup' into 'master'

frontend changes

See merge request !96

src/assets/icons/downloadIcon.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 function DownloadIcon() {
     return (
-        <svg width="25px" height="25px" viewBox="0 0 24 24" fill="none" className='mr-2'>
+        <svg width="25px" height="25px" viewBox="0 0 24 24" fill="none" className='ml-2'>
         <path d="M12 7L12 14M12 14L15 11M12 14L9 11" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
         <path d="M16 17H12H8" stroke="white" strokeWidth="1.5" strokeLinecap="round"/>
         <path d="M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z" stroke="white" strokeWidth="1.5"/>

src/components/accordion/index.jsx

@@ -59,7 +59,7 @@ function Accordion({ title, data ,handleAddActivity,open,handleAccordian}) {
           className="flex items-center rounded-lg  w-full py-2 px-2 mt-4 font-medium rtl:text-right bg-white text-gray-500 border border-[#B7B7B7] focus:ring-4   hover:bg-gray-100 gap-3" data-accordion-target="#accordion-collapse-body-2" aria-expanded="false" aria-controls="accordion-collapse-body-2" >
           <span className="w-1/2 text-start ms-2">{title}</span>
           <span className="w-1/2 flex justify-between">
-            Score :  {title === "Duties" ? defaultAvgScore : initiativeAvgScore}
+            Score: {title === "Duties" ? defaultAvgScore : initiativeAvgScore}
           <ModalButton type={`${title === "Duties" ? "duties" : "initiative"}`} handleAddActivity={handleAddActivity}/>
           </span>
           <svg data-accordion-icon className="w-3 h-3 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">

src/components/leftSidebar/index.jsx

 import React, { useEffect, useState } from "react";
-import { fetchReportees, setViewReportee, setCurrPage, setPagesCount } from "../../redux/reducers/reporteesSlice";
+import { fetchReportees, setCurrPage, setPagesCount, setReporteeId } from "../../redux/reducers/reporteesSlice";
 import { Link } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
 import { useParams } from "react-router-dom";
@@ -67,8 +67,7 @@ function LeftSidebar() {
         (loading) ? <Loading /> :
           <div className="p-2 bg-[#E9EDEE] mt-4 max-h-[70vh] overflow-auto">
             {(reportees.length) ? reportees?.map(({ empName, score, empId }) => (
-              <button onClick={() => dispatch(setViewReportee(empId))}
-                // to={`/viewreportee`}
+              <button onClick={() => dispatch(setReporteeId(empId))}
                 className={`flex rounded-lg 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}

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, setCurrPage, setPagesCount } from "../../redux/reducers/reporteesSlice";
+import { fetchReportees, setViewReportee, setCurrPage, setPagesCount, setReporteeId } from "../../redux/reducers/reporteesSlice";
 import Table from '../../components/table';
 import RightArrowIcon from '../../assets/icons/rightArrowIcon';
 import { scoreColor } from '../../utils/commonFunctions';
@@ -117,7 +117,7 @@ function Dashboard() {
       title: "Action",
       id: "empId",
       render: (value) => <Link to={`/viewreportee`}>
-        <button className="bg-blue-400 text-white rounded-md px-2 py-1 flex items-center justify-center w-[40px]" onClick={()=>dispatch(setViewReportee(value))}>
+        <button className="bg-blue-400 text-white rounded-md px-2 py-1 flex items-center justify-center w-[40px]" onClick={()=>dispatch(setReporteeId(value))}>
           <RightArrowIcon />
           </button>
         </Link>

src/pages/reportexport/index.jsx

@@ -9,6 +9,7 @@ import { base_url } from "../../utils/constants";
 import DownloadIcon from '../../assets/icons/downloadIcon';
 import jsPDF from 'jspdf';
 import 'jspdf-autotable';
+import {styles} from './styles';
 
 function Exporttable() {
   const dispatch = useDispatch();
@@ -22,13 +23,19 @@ function Exporttable() {
   const [fromDate, setFromDate] = useState("");
   const [toDate, setToDate] = useState("");
   const [inputValue, setInputValue] = useState('');
-  const [pdfData, setPdfData] = useState([]);
   const [pdfLoading, setPdfLoading] = useState(false);
-  const [preState, setPreState] = useState({
-    preEmployee: 0,
-    preFromDate: '',
-    preToDate: ''
-  })
+  const [selectedDate, setSelectedDate] = useState(null)
+
+  useEffect(() => {
+    if(selectedEmployee && fromDate && toDate) {
+      let data = {
+        empId: Number(selectedEmployee),
+        fromDate: fromDate,
+        toDate: toDate,
+      };
+      dispatch(fetchReportesActivitiesData(data));
+    }
+  },[selectedEmployee, fromDate, toDate])
 
   const calculateDateRange = (monthsAgo) => {
     const toDate = new Date().toISOString().split("T")[0];
@@ -42,33 +49,20 @@ function Exporttable() {
     const selectedValue = event.target.value;
     let fromDate, toDate;
 
-    if (selectedValue === "pastMonth") {
+    if (selectedValue === "Past 1 month") {
       ({ fromDate, toDate } = calculateDateRange(1));
-    } else if (selectedValue === "pastthreeMonth") {
+    } else if (selectedValue === "Past 3 months") {
       ({ fromDate, toDate } = calculateDateRange(3));
-    } else if (selectedValue === "pastsixMonth") {
+    } else if (selectedValue === "Past 6 months") {
       ({ fromDate, toDate } = calculateDateRange(6));
-    } else if (selectedValue === "pasttwelvemonth") {
+    } else if (selectedValue === "Past 1 year") {
       ({ fromDate, toDate } = calculateDateRange(12));
     }
+    setSelectedDate(selectedValue)
     setFromDate(fromDate);
     setToDate(toDate);
   };
 
-  const handleView = (e) => {
-    e.preventDefault();
-    setPreState({
-      preEmployee: selectedEmployee,
-      preFromDate: fromDate,
-      preToDate: toDate
-    })
-    let data = {
-      empId: Number(selectedEmployee),
-      fromDate: fromDate,
-      toDate: toDate,
-    };
-    dispatch(fetchReportesActivitiesData(data));
-  };
 
   useEffect(() => {
     if (user) {
@@ -84,11 +78,6 @@ function Exporttable() {
     })
   }, [user]);
 
-  // useEffect(() => {
-  //   if(activitiesData.length > 0) {
-  //     dispatch(resetActivitiesData())
-  //   }
-  // }, [selectedEmployee, toDate, fromDate])
 
   const headers = [
     { title: "Activity Name", id: "aName" },
@@ -118,6 +107,8 @@ function Exporttable() {
     },
   ];
 
+  const periodOptions = ['Past 1 month', 'Past 3 months', 'Past 6 months', 'Past 1 year']
+
 
   // Function to convert table to PDF
   const convertTableToPDF = (data) => {
@@ -163,100 +154,76 @@ function Exporttable() {
       setPdfLoading(false);
     }
   }
-
-  const disableBtn = (type) => {
-    if(!selectedEmployee || !fromDate || !toDate) {
-      return true
-    } else {
-      const {preEmployee, preFromDate, preToDate} = preState;
-      if(type === 'view'){
-        if(preEmployee === selectedEmployee && fromDate === preFromDate && toDate === preToDate) {
-          return true;
-        }
-      } else {
-        if((preEmployee !== selectedEmployee || fromDate !== preFromDate || toDate !== preToDate) || activitiesData.length === 0) {
-          return true;
-        }
-      }
-    }
+  const getName = (id) => {
+    const user = reportees.find((item) => item?.empId === Number(id));
+    return user ? user.empName : '';
   }
 
     return (
       <div>
-        <div className={` overflow-auto sm:rounded-lg p-4 bg-[#E9EDEE]`}>
-          <div className="text-blue-800 py-3 pl-2 text-center">
-            {" "}
-            Genarate Report
+        <div className={styles.genarateReportContainer}>
+          <div className={styles.textBlueHeading}>
+            REPORTS
           </div>
 
           <div>
-            <form className=" p-2 text-[12px]">
-              <div className="flex items-center justify-evenly ">
-                <div className="flex items-center">
+            <form className={styles.formContainer}>
+              <div className={styles.flexContainer}>
+                <div className={styles.flexItemsCenter}>
+                  <div className={styles.flexItemsCenter}>
                   <label htmlFor="countries" className="font-semibold">
-                    Select Employee:{" "}
+                    SELECT EMPLOYEE:{" "}
                   </label>
-                  <select
+                  <select 
                     onChange={(e) => setSelectedEmployee(e.target.value)}
                     value={selectedEmployee}
-                    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"
+                    className={styles.selectEmployeeDropdown}
                   >
+                    
                     <option id="" value="">
                       Select
                     </option>
                     {reportees &&
                       reportees.map((reportee) => (
                         <option
-                          key={reportee.empId}
-                          id={reportee.empId}
-                          value={reportee.empId}
+                          className="text-pretty"
+                          key={reportee?.empId}
+                          id={reportee?.empId}
+                          value={reportee?.empId}
                         >
                           {reportee?.empName}
                         </option>
                       ))}
                   </select>
-                </div>
-                <div className="flex items-center">
-                  <label htmlFor="countries" className="font-semibold">
-                    Select Period:
+                  </div>
+                  <div className={styles.flexItemsCenter}>
+                  <label htmlFor="countries" className="font-semibold ml-4">
+                    SELECT PERIOD:
                   </label>
                   <select
                     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 "
+                    className={styles.selectEmployeeDropdown && styles.selectDropdown}  
                   >
-                    <option id="" value="">
+                    <option 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>
+                    {
+                      periodOptions.map((option) => (
+                        <option  value={option}>
+                          {option}
+                        </option>
+                      ))
+                    }
                   </select>
                 </div>
+                </div>
+                
                 <div className="flex">
-                  <button
-                    // disabled={!fromDate || !selectedEmployee  || !toDate}
-                    disabled={disableBtn('view')}
-                    className="px-8  py-2 ml-5 w-[100px]  h-[40px] bg-blue-500 text-white font-semibold rounded-md disabled:bg-gray-400"
-                    onClick={(e) => handleView(e)}
-                  >
-                    View
-                  </button>
-
                   <button
                     onClick={getPdfList}
-                    //disabled={pdfLoading || !fromDate || !selectedEmployee  || !toDate}
-                    disabled={disableBtn()}
+                    disabled={activitiesData?.length === 0}
                     type="button"
-                    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"  
+                    className={styles.downloadButton}
                   >
                     <span>{pdfLoading ? "Downloading... " : "Download "}  </span>
                     <DownloadIcon />
@@ -267,10 +234,10 @@ function Exporttable() {
               </div>
             </form>
           </div>
-         
-          {/* { activitiesData?.length > 0 && ( */}
+            <div className={`mb-4 ${activitiesData?.length === 0 && "hidden"}`}>
+              <p>Showing <span className="font-semibold">{getName(selectedEmployee)}</span> reports from <span className="font-semibold">{selectedDate}</span> </p>
+            </div>
             <Table headers={headers} loading={loading} data={activitiesData} />
-          {/* )} */}
         </div>
       </div>
     );

src/pages/reportexport/styles.js

+export const styles = {
+  genarateReportContainer: "overflow-auto sm:rounded-lg p-4 bg-[#E9EDEE] ",
+  textBlueHeading: "text-blue-800 py-3 pl-2 text-center fond-bold text-2xl",
+  formContainer: "p-2 text-[12px] mb-4",
+  flexContainer: "flex items-center justify-between",
+  flexItemsCenter: "flex items-center",
+  selectEmployeeDropdown:
+    "bg-gray-50 text-balance  rounded-lg rounded-md ml-2  border border-gray-300 text-gray-900 text-sm   focus:ring-blue-500 focus:border-blue-500 block p-2.5 ",
+  selectDropdown:"bg-gray-50 text-balance  rounded-lg ml-2  border border-gray-300 text-gray-900 text-sm   focus:ring-blue-500 focus:border-blue-500 block p-2.5 w-[235px]",
+    downloadButton:
+    "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",
+  Norecords: "text-center align-middle pt-14 pb-14 text-blue-500  font-bold",
+};

src/pages/viewReportee/index.jsx

@@ -4,7 +4,7 @@ import { useParams, useNavigate } from "react-router";
 import { base_url } from "../../utils/constants";
 import axios from 'axios';
 import { fetchReportees,setViewReportee } from "../../redux/reducers/reporteesSlice";
-import {fetchReporteeActivities, fetchActivitiesAvg} from '../../redux/reducers/viewreporteeSlice'
+import {fetchReporteeActivities, fetchActivitiesAvg, } from '../../redux/reducers/viewreporteeSlice'
 import Accordion from "../../components/accordion";
 import {scoreColor} from '../../utils/commonFunctions';
 
@@ -12,7 +12,7 @@ import {scoreColor} from '../../utils/commonFunctions';
 function Viewreportee() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const {reportees, viewReportee,currPage } = useSelector((state) => state.reportees);
+  const {reportees, viewReportee,currPage, reporteeId } = useSelector((state) => state.reportees);
   const user = useSelector((state) => state.userDetails.user)
   const { reports, loading, error, dutiesReports, initiativeReports } = useSelector((state) => state.reports);
   const [open, setOpen] = useState({ "accordianOne": false, "accordianTwo": false });
@@ -52,7 +52,12 @@ function Viewreportee() {
       };
       dispatch(fetchReportees(data))
     }
+  }
 
+  const fetchViewReporteeData=async(empId)=>{
+        const response= await axios.get(`${base_url}/employee/${empId}`)
+        const data=await response.data
+        dispatch(setViewReportee(data))
   }
 
   const handleAddActivity = async (activityData) => {
@@ -65,18 +70,21 @@ function Viewreportee() {
         .then(async (result) => {
           fetchLatestReporteesData();
           fetchActivities(activityData?.type)
+          fetchViewReporteeData(reporteeId)
+          dispatch(fetchActivitiesAvg({empId:reporteeId, types:["duties", "initiative"]}))
         })
     } else {
       alert("Please login")
     }
   }
 
-  useEffect(()=>{
-    if(reportees.length>0 && viewReportee !== null )
-     dispatch(fetchActivitiesAvg({empId:viewReportee?.empId, types:["duties", "initiative"]}))
-     dispatch(setViewReportee(viewReportee?.empId))
-  },[reportees,viewReportee])
 
+  useEffect(() => {
+    if(reporteeId) {
+      fetchViewReporteeData(reporteeId)
+      dispatch(fetchActivitiesAvg({empId:reporteeId, types:["duties", "initiative"]}))
+    }
+  }, [reporteeId])
 
 
   useEffect(() => {
@@ -93,21 +101,49 @@ function Viewreportee() {
       <div className="p-4" >
         <div className="bg-white p-3 rounded-md">
           <div className="flex justify-between">
-            <div className="my-1">
+            {/* <div className="my-1">
               <p>
-                <span className="font-medium">Employee Name : </span> {viewReportee?.empName}
+                <span className="font-medium">Employee Name: </span> {viewReportee?.empName}
               </p>
               <p>
-                <span className="font-medium">Designation : </span> {viewReportee?.designation}
+                <span className="font-medium">Designation: </span> {viewReportee?.designation}
               </p>
+            </div> */}
+            <div className="flex items-center">
+              <div>
+                <p className="font-medium mb-2">
+                  Employee Name 
+                </p>
+                <p className="font-medium">
+                  Employee Id 
+                </p>
+              </div>
+              <div>
+                <p className="mb-2"><span className="font-medium">:</span> {viewReportee?.empName}</p>
+                <p><span className="font-medium">:</span> {viewReportee?.empId}</p>
+              </div>
             </div>
-            <div className="my-1">
+            {/* <div className="my-1">
               <p>
-                <span className="font-medium">Role : </span> {viewReportee?.techStack}
+                <span className="font-medium">Role: </span> {viewReportee?.techStack}
               </p>
               <p>
-                <span className="font-medium">Employee Id :  </span> {viewReportee?.empId}
+                <span className="font-medium">Employee Id:  </span> {viewReportee?.empId}
               </p>
+            </div> */}
+            <div className="flex items-center">
+              <div>
+                <p className="font-medium mb-2">
+                  Designation 
+                </p>
+                <p className="font-medium">
+                  Role 
+                </p>
+              </div>
+              <div>
+                <p className="mb-2"><span className="font-medium">:</span> {viewReportee?.designation}</p>
+                <p><span className="font-medium">:</span> {viewReportee?.techStack}</p>
+              </div>
             </div>
             <div className="flex flex-col justify-center items-center">
               <div className={`w-[40px] h-[40px] rounded-full flex items-center text-white justify-center  ${scoreColor(viewReportee?.score)}`}>

src/redux/reducers/reporteesSlice.js

@@ -4,6 +4,7 @@ import axios from "axios";
 
 const initialState = {
   reportees: [],
+  reporteeId: null,
   viewReportee:null,
   totalCount:0,
   loading: false,
@@ -27,18 +28,13 @@ const reporteesSlice = createSlice({
       return initialState
     },
     setViewReportee:(state,action)=>{
-        const reportee=state.reportees.find((reportee)=>reportee.empId==action.payload)
-         if(!reportee){
           return {
             ...state,
-            viewReportee: state.viewReportee
+            viewReportee: action.payload
           }
-        } else {
-          return {
-            ...state,
-            viewReportee: reportee
-          }
-        }
+    },
+    setReporteeId: (state, action) => {
+      state.reporteeId = action.payload
     },
     setCurrPage: (state, action) => {
       state.currPage = action.payload
@@ -72,6 +68,6 @@ const reporteesSlice = createSlice({
   },
 });
 
-export const {resetReportees,setViewReportee, setCurrPage, setPagesCount, setSortKey, setSortOrder} = reporteesSlice.actions;
+export const {resetReportees,setViewReportee, setCurrPage, setPagesCount, setSortKey, setSortOrder, setReporteeId} = reporteesSlice.actions;
 
 export default reporteesSlice.reducer;