Commit d874ee67 authored by Shiva Komirishetti's avatar Shiva Komirishetti

Reports page changes

parent 26c5bca3
...@@ -2,7 +2,7 @@ import React from 'react' ...@@ -2,7 +2,7 @@ import React from 'react'
function DownloadIcon() { function DownloadIcon() {
return ( 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="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="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"/> <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"/>
......
...@@ -59,7 +59,7 @@ function Accordion({ title, data ,handleAddActivity,open,handleAccordian}) { ...@@ -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" > 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 text-start ms-2">{title}</span>
<span className="w-1/2 flex justify-between"> <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}/> <ModalButton type={`${title === "Duties" ? "duties" : "initiative"}`} handleAddActivity={handleAddActivity}/>
</span> </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"> <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">
......
import React, { useEffect, useState } from "react"; 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 { Link } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux"; import { useSelector, useDispatch } from "react-redux";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
...@@ -67,8 +67,7 @@ function LeftSidebar() { ...@@ -67,8 +67,7 @@ function LeftSidebar() {
(loading) ? <Loading /> : (loading) ? <Loading /> :
<div className="p-2 bg-[#E9EDEE] mt-4 max-h-[70vh] overflow-auto"> <div className="p-2 bg-[#E9EDEE] mt-4 max-h-[70vh] overflow-auto">
{(reportees.length) ? reportees?.map(({ empName, score, empId }) => ( {(reportees.length) ? reportees?.map(({ empName, score, empId }) => (
<button onClick={() => dispatch(setViewReportee(empId))} <button onClick={() => dispatch(setReporteeId(empId))}
// to={`/viewreportee`}
className={`flex rounded-lg items-center hover:bg-blue-400 hover:text-white bg-${viewReportee?.empId == empId ? "blue-400 text-white" : "white" 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`} } p-2 justify-between mb-1 w-full`}
key={empId} key={empId}
......
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux"; 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 Table from '../../components/table';
import RightArrowIcon from '../../assets/icons/rightArrowIcon'; import RightArrowIcon from '../../assets/icons/rightArrowIcon';
import { scoreColor } from '../../utils/commonFunctions'; import { scoreColor } from '../../utils/commonFunctions';
...@@ -117,7 +117,7 @@ function Dashboard() { ...@@ -117,7 +117,7 @@ function Dashboard() {
title: "Action", title: "Action",
id: "empId", id: "empId",
render: (value) => <Link to={`/viewreportee`}> 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 /> <RightArrowIcon />
</button> </button>
</Link> </Link>
......
...@@ -23,13 +23,19 @@ function Exporttable() { ...@@ -23,13 +23,19 @@ function Exporttable() {
const [fromDate, setFromDate] = useState(""); const [fromDate, setFromDate] = useState("");
const [toDate, setToDate] = useState(""); const [toDate, setToDate] = useState("");
const [inputValue, setInputValue] = useState(''); const [inputValue, setInputValue] = useState('');
const [pdfData, setPdfData] = useState([]);
const [pdfLoading, setPdfLoading] = useState(false); const [pdfLoading, setPdfLoading] = useState(false);
const [preState, setPreState] = useState({ const [selectedDate, setSelectedDate] = useState(null)
preEmployee: 0,
preFromDate: '', useEffect(() => {
preToDate: '' if(selectedEmployee && fromDate && toDate) {
}) let data = {
empId: Number(selectedEmployee),
fromDate: fromDate,
toDate: toDate,
};
dispatch(fetchReportesActivitiesData(data));
}
},[selectedEmployee, fromDate, toDate])
const calculateDateRange = (monthsAgo) => { const calculateDateRange = (monthsAgo) => {
const toDate = new Date().toISOString().split("T")[0]; const toDate = new Date().toISOString().split("T")[0];
...@@ -43,35 +49,20 @@ function Exporttable() { ...@@ -43,35 +49,20 @@ function Exporttable() {
const selectedValue = event.target.value; const selectedValue = event.target.value;
let fromDate, toDate; let fromDate, toDate;
if (selectedValue === "pastMonth") { if (selectedValue === "Past 1 month") {
({ fromDate, toDate } = calculateDateRange(1)); ({ fromDate, toDate } = calculateDateRange(1));
} else if (selectedValue === "pastthreeMonth") { } else if (selectedValue === "Past 3 months") {
({ fromDate, toDate } = calculateDateRange(3)); ({ fromDate, toDate } = calculateDateRange(3));
} else if (selectedValue === "pastsixMonth") { } else if (selectedValue === "Past 6 months") {
({ fromDate, toDate } = calculateDateRange(6)); ({ fromDate, toDate } = calculateDateRange(6));
} else if (selectedValue === "pasttwelvemonth") { } else if (selectedValue === "Past 1 year") {
({ fromDate, toDate } = calculateDateRange(12)); ({ fromDate, toDate } = calculateDateRange(12));
} }
setSelectedDate(selectedValue)
setFromDate(fromDate); setFromDate(fromDate);
setToDate(toDate); setToDate(toDate);
}; };
const handleView = (e) => {
if (selectedEmployee && fromDate && toDate) {
e.preventDefault();
setPreState({
preEmployee: selectedEmployee,
preFromDate: fromDate,
preToDate: toDate
})
let data = {
empId: Number(selectedEmployee),
fromDate: fromDate,
toDate: toDate,
};
dispatch(fetchReportesActivitiesData(data));
}
};
useEffect(() => { useEffect(() => {
if (user) { if (user) {
...@@ -87,11 +78,6 @@ function Exporttable() { ...@@ -87,11 +78,6 @@ function Exporttable() {
}) })
}, [user]); }, [user]);
// useEffect(() => {
// if(activitiesData.length > 0) {
// dispatch(resetActivitiesData())
// }
// }, [selectedEmployee, toDate, fromDate])
const headers = [ const headers = [
{ title: "Activity Name", id: "aName" }, { title: "Activity Name", id: "aName" },
...@@ -121,6 +107,8 @@ function Exporttable() { ...@@ -121,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 // Function to convert table to PDF
const convertTableToPDF = (data) => { const convertTableToPDF = (data) => {
...@@ -166,35 +154,22 @@ function Exporttable() { ...@@ -166,35 +154,22 @@ function Exporttable() {
setPdfLoading(false); setPdfLoading(false);
} }
} }
const getName = (id) => {
const disableBtn = (type) => { const user = reportees.find((item) => item?.empId === Number(id));
if(!selectedEmployee || !fromDate || !toDate) { return user ? user.empName : '';
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;
}
}
}
} }
return ( return (
<div> <div>
<div className={styles.genarateReportContainer}> <div className={styles.genarateReportContainer}>
<div className={styles.textBlueHeading}> <div className={styles.textBlueHeading}>
REPORTS
GENARATE REPORT
</div> </div>
<div> <div>
<form className={styles.formContainer}> <form className={styles.formContainer}>
<div className={styles.flexContainer}> <div className={styles.flexContainer}>
<div className={styles.flexItemsCenter}>
<div className={styles.flexItemsCenter}> <div className={styles.flexItemsCenter}>
<label htmlFor="countries" className="font-semibold"> <label htmlFor="countries" className="font-semibold">
SELECT EMPLOYEE:{" "} SELECT EMPLOYEE:{" "}
...@@ -210,55 +185,43 @@ function Exporttable() { ...@@ -210,55 +185,43 @@ function Exporttable() {
</option> </option>
{reportees && {reportees &&
reportees.map((reportee) => ( reportees.map((reportee) => (
<option className="text-pretty" <option
key={reportee.empId} className="text-pretty"
id={reportee.empId} key={reportee?.empId}
value={reportee.empId} id={reportee?.empId}
value={reportee?.empId}
> >
{reportee?.empName} {reportee?.empName}
</option> </option>
))} ))}
</select> </select>
</div> </div>
<div className="flex items-center"> <div className={styles.flexItemsCenter}>
<label htmlFor="countries" className="font-semibold"> <label htmlFor="countries" className="font-semibold ml-4">
SELECT PERIOD: SELECT PERIOD:
</label> </label>
<select <select
onChange={handleDropdownChange} onChange={handleDropdownChange}
className={styles.selectEmployeeDropdown && styles.selectDropdown} className={styles.selectEmployeeDropdown && styles.selectDropdown}
> >
<option id="" value=""> <option value="">
Select Select
</option> </option>
<option id="" value="pastMonth"> {
Past 1 Months periodOptions.map((option) => (
</option> <option value={option}>
<option id="" value="pastthreeMonth"> {option}
Past 3 Months
</option>
<option id="" value="pastsixMonth">
Past 6 Months
</option>
<option id="" value="pasttwelvemonth">
Past Year
</option> </option>
))
}
</select> </select>
</div> </div>
<div className="flex"> </div>
<button
// disabled={!fromDate || !selectedEmployee || !toDate}
disabled={disableBtn('view')}
className={styles.downloadButton}
onClick={(e) => handleView(e)}
>
View
</button>
<div className="flex">
<button <button
onClick={getPdfList} onClick={getPdfList}
//disabled={pdfLoading || !fromDate || !selectedEmployee || !toDate} disabled={activitiesData?.length === 0}
disabled={disableBtn()}
type="button" type="button"
className={styles.downloadButton} className={styles.downloadButton}
> >
...@@ -271,10 +234,10 @@ function Exporttable() { ...@@ -271,10 +234,10 @@ function Exporttable() {
</div> </div>
</form> </form>
</div> </div>
<div className={`mb-4 ${activitiesData?.length === 0 && "hidden"}`}>
{/* { activitiesData?.length > 0 && ( */} <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} /> <Table headers={headers} loading={loading} data={activitiesData} />
{/* )} */}
</div> </div>
</div> </div>
); );
......
export const styles = { export const styles = {
genarateReportContainer: "overflow-auto sm:rounded-lg p-4 bg-[#E9EDEE] ", genarateReportContainer: "overflow-auto sm:rounded-lg p-4 bg-[#E9EDEE] ",
textBlueHeading: "text-blue-800 py-3 pl-2 text-center fond-bold text-2xl", textBlueHeading: "text-blue-800 py-3 pl-2 text-center fond-bold text-2xl",
formContainer: "p-2 text-[12px] mb-10", formContainer: "p-2 text-[12px] mb-4",
flexContainer: "flex items-center justify-evenly", flexContainer: "flex items-center justify-between",
flexItemsCenter: "flex items-center", flexItemsCenter: "flex items-center",
selectEmployeeDropdown: 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 ", "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 ",
......
...@@ -4,7 +4,7 @@ import { useParams, useNavigate } from "react-router"; ...@@ -4,7 +4,7 @@ import { useParams, useNavigate } from "react-router";
import { base_url } from "../../utils/constants"; import { base_url } from "../../utils/constants";
import axios from 'axios'; import axios from 'axios';
import { fetchReportees,setViewReportee } from "../../redux/reducers/reporteesSlice"; 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 Accordion from "../../components/accordion";
import {scoreColor} from '../../utils/commonFunctions'; import {scoreColor} from '../../utils/commonFunctions';
...@@ -12,7 +12,7 @@ import {scoreColor} from '../../utils/commonFunctions'; ...@@ -12,7 +12,7 @@ import {scoreColor} from '../../utils/commonFunctions';
function Viewreportee() { function Viewreportee() {
const dispatch = useDispatch(); const dispatch = useDispatch();
const navigate = useNavigate(); 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 user = useSelector((state) => state.userDetails.user)
const { reports, loading, error, dutiesReports, initiativeReports } = useSelector((state) => state.reports); const { reports, loading, error, dutiesReports, initiativeReports } = useSelector((state) => state.reports);
const [open, setOpen] = useState({ "accordianOne": false, "accordianTwo": false }); const [open, setOpen] = useState({ "accordianOne": false, "accordianTwo": false });
...@@ -52,7 +52,12 @@ function Viewreportee() { ...@@ -52,7 +52,12 @@ function Viewreportee() {
}; };
dispatch(fetchReportees(data)) 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) => { const handleAddActivity = async (activityData) => {
...@@ -65,18 +70,21 @@ function Viewreportee() { ...@@ -65,18 +70,21 @@ function Viewreportee() {
.then(async (result) => { .then(async (result) => {
fetchLatestReporteesData(); fetchLatestReporteesData();
fetchActivities(activityData?.type) fetchActivities(activityData?.type)
fetchViewReporteeData(reporteeId)
dispatch(fetchActivitiesAvg({empId:reporteeId, types:["duties", "initiative"]}))
}) })
} else { } else {
alert("Please login") 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(() => { useEffect(() => {
...@@ -93,22 +101,50 @@ function Viewreportee() { ...@@ -93,22 +101,50 @@ function Viewreportee() {
<div className="p-4" > <div className="p-4" >
<div className="bg-white p-3 rounded-md"> <div className="bg-white p-3 rounded-md">
<div className="flex justify-between"> <div className="flex justify-between">
<div className="my-1"> {/* <div className="my-1">
<p> <p>
<span className="font-medium">Employee Name : </span> {viewReportee?.empName} <span className="font-medium">Employee Name: </span> {viewReportee?.empName}
</p> </p>
<p> <p>
<span className="font-medium">Designation : </span> {viewReportee?.designation} <span className="font-medium">Designation: </span> {viewReportee?.designation}
</p> </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>
{/* <div className="my-1">
<p> <p>
<span className="font-medium">Role : </span> {viewReportee?.techStack} <span className="font-medium">Role: </span> {viewReportee?.techStack}
</p> </p>
<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> </p>
</div> </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="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)}`}> <div className={`w-[40px] h-[40px] rounded-full flex items-center text-white justify-center ${scoreColor(viewReportee?.score)}`}>
<span className="text-lg font-bold">{viewReportee?.score}</span> <span className="text-lg font-bold">{viewReportee?.score}</span>
......
...@@ -4,6 +4,7 @@ import axios from "axios"; ...@@ -4,6 +4,7 @@ import axios from "axios";
const initialState = { const initialState = {
reportees: [], reportees: [],
reporteeId: null,
viewReportee:null, viewReportee:null,
totalCount:0, totalCount:0,
loading: false, loading: false,
...@@ -27,19 +28,14 @@ const reporteesSlice = createSlice({ ...@@ -27,19 +28,14 @@ const reporteesSlice = createSlice({
return initialState return initialState
}, },
setViewReportee:(state,action)=>{ setViewReportee:(state,action)=>{
const reportee=state.reportees.find((reportee)=>reportee.empId==action.payload)
if(!reportee){
return { return {
...state, ...state,
viewReportee: state.viewReportee viewReportee: action.payload
}
} else {
return {
...state,
viewReportee: reportee
}
} }
}, },
setReporteeId: (state, action) => {
state.reporteeId = action.payload
},
setCurrPage: (state, action) => { setCurrPage: (state, action) => {
state.currPage = action.payload state.currPage = action.payload
}, },
...@@ -72,6 +68,6 @@ const reporteesSlice = createSlice({ ...@@ -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; export default reporteesSlice.reducer;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment