Skip to content

N
nisum-scorecard
Commit d874ee67 authored by Shiva Komirishetti's avatar Shiva Komirishetti
Browse files
Options

Reports page changes

parent 26c5bca3
Hide whitespace changes
Inline Side-by-side
Showing with 109 additions and 115 deletions
src/assets/icons/downloadIcon.js
View file @ d874ee67
......@@ -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
View file @ d874ee67
......@@ -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
View file @ d874ee67
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
View file @ d874ee67
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
View file @ d874ee67
......@@ -23,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];
......@@ -43,35 +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) => {
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(() => {
if (user) {
......@@ -87,11 +78,6 @@ function Exporttable() {
})
}, [user]);
// useEffect(() => {
// if(activitiesData.length > 0) {
// dispatch(resetActivitiesData())
// }
// }, [selectedEmployee, toDate, fromDate])
const headers = [
{ title: "Activity Name", id: "aName" },
......@@ -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
const convertTableToPDF = (data) => {
......@@ -166,36 +154,23 @@ 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={styles.genarateReportContainer}>
<div className={styles.textBlueHeading}>
GENARATE REPORT
REPORTS
</div>
<div>
<form className={styles.formContainer}>
<div className={styles.flexContainer}>
<div className={styles.flexItemsCenter}>
<div className={styles.flexItemsCenter}>
<label htmlFor="countries" className="font-semibold">
SELECT EMPLOYEE:{" "}
</label>
......@@ -210,55 +185,43 @@ function Exporttable() {
</option>
{reportees &&
reportees.map((reportee) => (
<option className="text-pretty"
key={reportee.empId}
id={reportee.empId}
value={reportee.empId}
<option
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">
</div>
<div className={styles.flexItemsCenter}>
<label htmlFor="countries" className="font-semibold ml-4">
SELECT PERIOD:
</label>
<select
onChange={handleDropdownChange}
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={styles.downloadButton}
onClick={(e) => handleView(e)}
>
View
</button>
<button
onClick={getPdfList}
//disabled={pdfLoading || !fromDate || !selectedEmployee || !toDate}
disabled={disableBtn()}
disabled={activitiesData?.length === 0}
type="button"
className={styles.downloadButton}
>
......@@ -271,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
View file @ d874ee67
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-10",
flexContainer: "flex items-center justify-evenly",
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 ",
......
src/pages/viewReportee/index.jsx
View file @ d874ee67
......@@ -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
View file @ d874ee67
......@@ -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;
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