Skip to content

N
nisum-scorecard
Commit 4df1b3a3 authored by Venkaiah Naidu Singamchetty's avatar Venkaiah Naidu Singamchetty
Browse files
Options

pagination added

parent dc7f4018
Hide whitespace changes
Inline Side-by-side
Showing with 244 additions and 138 deletions
src/components/Pagenation/Pagenation.jsx 0 → 100644
View file @ 4df1b3a3
import React from 'react';
const PaginationComponent = ({ currentPage, totalPages, onPageChange }) => {
const pageNumbers = [];
for (let i = 1; i <= totalPages; i++) {
pageNumbers.push(i);
}
return (
<nav className="flex justify-center ">
<ul className="pagination flex">
{pageNumbers.map(number => (
<li key={number} className={`page-item ${number === currentPage ? 'active' : ''}` }>
<button onClick={() => onPageChange(number)} className=" w-[22px] font-bold h-[22px] ">
{number}
</button>
</li>
))}
</ul>
</nav>
);
};
export default PaginationComponent;
src/components/accordion/accordionTable.jsx
View file @ 4df1b3a3
...@@ -26,9 +26,9 @@ function AccordionTable({ headers, data }) { ...@@ -26,9 +26,9 @@ function AccordionTable({ headers, data }) {
<td <td
className={`border-2 p-2 border-[#B7B7B7] bg-${ className={`border-2 p-2 border-[#B7B7B7] bg-${
header.id === "aName" ? "[#D9D9D9]" : "white" header.id === "aName" ? "[#D9D9D9]" : "white"
}`} }`}
> >
{header?.id === 'recorded_date' ? <span>{getDate(item[header?.id])}</span> : <span>{item[header?.id]}</span>} {header?.id === 'recorded_date' ? <span>{getDate(item[header?.id])}</span> : <span className="truncate overflow-hidden whitespace-nowrap overflow-ellipsis">{item[header?.id]}</span>}
</td> </td>
))} ))}
</tr> </tr>
......
src/components/accordion/index.jsx
View file @ 4df1b3a3
...@@ -42,7 +42,7 @@ function Accordion({ title, data ,handleAddActivity,open,handleAccordian}) { ...@@ -42,7 +42,7 @@ function Accordion({ title, data ,handleAddActivity,open,handleAccordian}) {
const headers = [ const headers = [
{ title: "Activity Name", id: "aName", width: "30%" }, { title: "Activity Name", id: "aName", width: "30%" },
{ title: "Date", id: "recorded_date", width: "20%", render: (value) => moment(value).format('DD-MM-YYYY') }, { title: "Date", id: "recorded_date", width: "20%", render: (value) => moment(value).format('DD-MM-YYYY') },
{ title: "Score", id: "score", width: "10%", render: (value) => <div className="w-[35px] bg-blue-200 rounded-md text-center p-[4px]">{value}</div> }, { title: "Score", id: "score", width: "10%", render: (value) => <div className="w-[35px] bg-blue-400 rounded-full text-white font-bold text-center p-[4px]">{value}</div> },
{ title: "Comments", id: "comments", width: "40%" }, { title: "Comments", id: "comments", width: "40%" },
]; ];
......
src/components/dateRangePicker/DateRangePicker.jsx
View file @ 4df1b3a3
...@@ -24,9 +24,9 @@ const DateRangePicker = ({getReports}) => { ...@@ -24,9 +24,9 @@ const DateRangePicker = ({getReports}) => {
return ( return (
<div> <div>
<label htmlFor="start" className="font-bold ps-2">From:</label> <label htmlFor="start" className="font-bold ps-2">From:</label>
<input type="date" id="start" name="start" placeholder="MM-DD-YYYY" className="rounded-md font-semibold ms-1 ps-2 text-[#555]" onChange={(e)=>handleStartChange(e.target.value)} /> <input type="date" id="start" name="start" placeholder="MM-DD-YYYY" className="rounded-md font-semibold text-sm ms-1 ps-2 text-[#555]" onChange={(e)=>handleStartChange(e.target.value)} />
<label htmlFor="end" className="font-bold ps-2">To:</label> <label htmlFor="end" className="font-bold ps-2">To:</label>
<input type="date" id="end" name="end" placeholder="MM-DD-YYYY" className="rounded-md font-semibold ms-1 ps-2 text-[#555]" onChange={(e)=>handleEndChange(e.target.value)}/> <input type="date" id="end" name="end" placeholder="MM-DD-YYYY" className="rounded-md font-semibold text-sm ms-1 ps-2 text-[#555]" onChange={(e)=>handleEndChange(e.target.value)}/>
</div> </div>
) )
......
src/components/leftSidebar/index.jsx
View file @ 4df1b3a3
import React,{useEffect,useState} from "react"; import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import Loading from "../loading Component/Loading"; import Loading from "../loading Component/Loading";
function LeftSidebar() { function LeftSidebar() {
const {reportees,loading} = useSelector((state) => state.reportees); const { reportees, loading } = useSelector((state) => state.reportees);
const {id} = useParams() const { id } = useParams()
return ( return (
<div className="mt-2 w-[30%] flex flex-col px-[5px]"> <div className=" w-[33%] flex flex-col px-[5px]">
<p className="text-xl text-blue-400 font-semibold pl-4 mt-3"> <p className="text-xl text-blue-400 font-semibold pl-4 mt-3">
My Reportees My Reportees
</p> </p>
{ {
(loading)? <Loading/>: (loading) ? <Loading /> :
<div className="p-2 bg-[#E9EDEE] mt-4 max-h-[80vh] overflow-auto"> <div className="p-2 bg-[#E9EDEE] mt-4 max-h-[80vh] overflow-auto">
{reportees?.map(({ empName, score, empId }) => ( {reportees?.map(({ empName, score, empId }) => (
<Link <Link
to={`/viewreportee/${empId}`} to={`/viewreportee/${empId}`}
className={`flex items-center bg-${ className={`flex items-center bg-${Number(id) === empId ? "blue-200" : "white"
Number(id) === empId ? "blue-200" : "white" } p-2 justify-between mb-1 w-full`}
} p-2 justify-between mb-1 w-full`} key={empId}
key={empId} >
> <img src="/man.png" width="18px" height="18px" />
<img src="/man.png" width="18px" height="18px" /> <p className="w-[80%] text-left">{empName}</p>
<p className="w-[80%] text-left">{empName}</p> <p className={`w-[30px] h-[30px] rounded-full flex items-center text-white justify-center
<p className="w-[10%] bg-blue-200 rounded-sm text-center"> ${score === 0 ? 'bg-red-500 ' : ''}
{score} ${score >= 1 && score < 2 ? 'bg-red-500' : ''}
</p> ${score >= 2 && score < 3 ? 'bg-yellow-500' : ''}
</Link> ${score >= 3 && score < 4 ? 'bg-green-500 ' : ''}
))} ${score >= 4 && score < 5 ? 'bg-green-600 ' : ''}
</div> ${score >= 5 ? 'bg-green-600 ' : ''}`}>
} {score}
</p>
</div> </Link>
))}
</div>
}
</div>
); );
} }
......
src/components/modal/index.jsx
View file @ 4df1b3a3
...@@ -66,30 +66,30 @@ export default function MyModal({ visible, onClose ,type,handleAddActivity}) { ...@@ -66,30 +66,30 @@ export default function MyModal({ visible, onClose ,type,handleAddActivity}) {
return ( return (
<div className="absolute w-full h-full inset-0 bg-black bg-opacity-25 backdrop-blur-sm flex items-center justify-center" onClick={(e) => e.stopPropagation()}> <div className="absolute w-full h-full inset-0 bg-black bg-opacity-25 backdrop-blur-sm flex items-center justify-center" onClick={(e) => e.stopPropagation()}>
<div className="bg-white rounded lg:w-4/12 sm:w-100"> <div className="bg-white rounded-md lg:w-4/12 sm:w-100">
<div className=" text-white py-3 pl-2 bg-blue-500 ">{activityType} Activity</div> <div className=" text-white py-3 pl-2 bg-blue-500 rounded-md">{activityType} Activity</div>
<div> <div>
<div> <div>
<form className=" p-2 max-w-sm mx-auto" onClick={(e) => e.stopPropagation()}> <form className=" p-2 max-w-sm mx-auto text-[12px]" onClick={(e) => e.stopPropagation()}>
<div className="flex items-center my-5"> <div className="flex items-center my-5">
<label htmlFor="countries">Select Activity: </label> <label htmlFor="countries">SELECT ACTIVITY: </label>
<select className="bg-gray-50 ml-2 w-7/12 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 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" onChange={(e)=>handleActivityName(e)}> <select className="bg-gray-50 ml-2 w-7/12 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 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" onChange={(e)=>handleActivityName(e)}>
<option id="" value="" className="text-[16px]">Select</option> <option id="" value="">Select</option>
{ {
activitiesList && activitiesList.map((activity)=><option className="text-[16px] w-7/12" key={activity.aId} id={activity.aId} value={activity.aName}>{activity.aName}</option>) activitiesList && activitiesList.map((activity)=><option className=" w-7/12" key={activity.aId} id={activity.aId} value={activity.aName}>{activity.aName}</option>)
} }
</select> </select>
</div> </div>
<div className="flex items-center mb-4 "> <div className="flex items-center mb-4 ">
<label htmlFor="appreciate" className=" text-sm font-medium text-gray-900 dark:text-gray-300">Appreciation:</label> <label htmlFor="appreciate" className=" font-medium dark:text-gray-300">APPRECIATION:</label>
<input id="appreciate" type="radio" value="appreciate" name="performance" className="w-4 h-4 m-3 text-blue-600 bg-gray-100 border-gray-300 dark:bg-gray-700 dark:border-gray-600" onChange={()=>handlePerformance(1)}/> <input id="appreciate" type="radio" value="appreciate" name="performance" className="w-4 h-4 m-3 text-blue-600 bg-gray-100 border-gray-300 dark:bg-gray-700 dark:border-gray-600" onChange={()=>handlePerformance(1)}/>
<label htmlFor="depreciate" className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Depreciation:</label> <label htmlFor="depreciate" className="ms-2 font-medium dark:text-gray-300">DEPRECIATION:</label>
<input id="depreciate" type="radio" value="depreciate" name="performance" className="w-4 h-4 m-3 text-blue-600 bg-gray-100 border-gray-300 dark:bg-gray-700 dark:border-gray-600" onChange={()=>handlePerformance(-1)} /> <input id="depreciate" type="radio" value="depreciate" name="performance" className="w-4 h-4 m-3 text-blue-600 bg-gray-100 border-gray-300 dark:bg-gray-700 dark:border-gray-600" onChange={()=>handlePerformance(-1)} />
</div> </div>
<div className="flex "> <div className="flex ">
<span>Score</span> <span>SCORE: </span>
<select className="border w-1/5" onChange={(e)=>handleScoreChange(e.target.value)}> <select className="border w-1/5 ms-1" onChange={(e)=>handleScoreChange(e.target.value)}>
<option value={0}>Select</option> <option value={0}>Select</option>
<option value={1}>1</option> <option value={1}>1</option>
<option value={2}>2</option> <option value={2}>2</option>
...@@ -100,8 +100,8 @@ export default function MyModal({ visible, onClose ,type,handleAddActivity}) { ...@@ -100,8 +100,8 @@ export default function MyModal({ visible, onClose ,type,handleAddActivity}) {
</div> </div>
<div className="flex items-center my-5"> <div className="flex items-center my-5">
<label htmlFor="comments" className="block w-3/12 mb-20 text-sm font-medium text-gray-900 dark:text-white">Comments :</label> <label htmlFor="comments" className="block w-3/12 mb-20 text-start font-medium dark:text-white">COMMENTS :</label>
<textarea id="comments" rows="4" className="block ml-2 p-2.5 w-9/12 text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 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="activity comments" onChange={(e)=>handleComments(e)} <textarea id="comments" style={{resize:"none"}} rows="4" className="block ml-2 p-2.5 w-9/12 bg-gray-50 rounded-lg border border-gray-300 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="Activity comments (optional)" onChange={(e)=>handleComments(e)}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
onKeyDown={(e) => { onKeyDown={(e) => {
// Prevent propagation of space key press // Prevent propagation of space key press
...@@ -119,9 +119,9 @@ export default function MyModal({ visible, onClose ,type,handleAddActivity}) { ...@@ -119,9 +119,9 @@ export default function MyModal({ visible, onClose ,type,handleAddActivity}) {
}}></textarea> }}></textarea>
</div> </div>
<div className="flex items-center justify-end mb-3"> <div className="flex items-center justify-end mb-3">
<button onClick={onClose} className="px-3 py-2 bg-gray-700 text-white rounded">Cancel</button> <button onClick={onClose} className="px-3 py-2 rounded-md bg-gray-700 text-white ">Cancel</button>
{ {
enableSubmit?<button type="button" className="px-3 py-2 ml-5 bg-green-700 text-white rounded" onClick={handleSubmit}>Submit</button>: enableSubmit?<button type="button" className="px-3 py-2 ml-5 bg-blue-500 text-white rounded-md" onClick={handleSubmit}>Submit</button>:
<button type="button" className="px-3 py-2 ml-5 bg-gray-400 text-white rounded" disabled={!enableSubmit} title="Please fill all fileds to submit">Submit</button> <button type="button" className="px-3 py-2 ml-5 bg-gray-400 text-white rounded" disabled={!enableSubmit} title="Please fill all fileds to submit">Submit</button>
} }
......
src/components/modal/modalButton.jsx
View file @ 4df1b3a3
...@@ -10,7 +10,7 @@ export default function ModalButton({type,handleAddActivity}) { ...@@ -10,7 +10,7 @@ export default function ModalButton({type,handleAddActivity}) {
<button <button
onClick={() => setShowMyModal(true)} onClick={() => setShowMyModal(true)}
className="bg-blue-400 text-white px-2 py-1 rounded hover:scale-95 transition text-sm"> className="bg-blue-400 text-white px-2 py-1 rounded hover:scale-95 transition text-sm">
Add Activity Add Score
</button> </button>
<MyModal onClose={handleOnClose} visible={showMyModal} handleAddActivity={handleAddActivity} type={type}/> <MyModal onClose={handleOnClose} visible={showMyModal} handleAddActivity={handleAddActivity} type={type}/>
</div> </div>
......
src/components/table/index.jsx
View file @ 4df1b3a3
...@@ -5,7 +5,7 @@ function Table({headers, data,loading, maxHeight}) { ...@@ -5,7 +5,7 @@ function Table({headers, data,loading, maxHeight}) {
if(loading) return <Loading/> if(loading) return <Loading/>
if(data?.length) if(data?.length)
return ( return (
<div className={` overflow-x-auto sm:rounded-lg p-4 max-h-[${maxHeight}vh] bg-gray-100`}> <div className={` overflow-auto sm:rounded-lg p-4 max-h-[${maxHeight}vh] bg-gray-100`}>
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 bg-transparent justify-center border-separate border-spacing-y-2"> <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 bg-transparent justify-center border-separate border-spacing-y-2">
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-white"> <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-white">
<tr className="mb-2"> <tr className="mb-2">
......
src/index.css
View file @ 4df1b3a3
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
...@@ -17,4 +17,9 @@ code { ...@@ -17,4 +17,9 @@ code {
} }
/* .listData:nth-child(4) { /* .listData:nth-child(4) {
padding-left: 35px; padding-left: 35px;
} */ } */
\ No newline at end of file .active{
background: rgb(96 165 250);
color:white;
border-radius:50%
}
src/pages/dashboard/index.jsx
View file @ 4df1b3a3
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 } from "../../redux/reducers/reporteesSlice"; import { fetchReportees } from "../../redux/reducers/reporteesSlice";
import Table from '../../components/table'; import Table from '../../components/table';
import PaginationComponent from "../../components/Pagenation/Pagenation";
function Dashboard() { function Dashboard() {
const dispatch = useDispatch(); const dispatch = useDispatch();
const navigate=useNavigate(); const navigate = useNavigate();
const {reportees,loading} = useSelector((state) => state.reportees); const { reportees, loading, totalCount } = useSelector((state) => state.reportees);
const userDetails = useSelector((state) => state.userDetails); const userDetails = useSelector((state) => state.userDetails);
const [reporteIds,setReporteIds] =useState([]); const [reporteIds, setReporteIds] = useState([]);
const [currPage, setCurrPage] = useState(1)
const [pagesCount, setPagesCount] = useState(1)
// userDetails.user.reportees || []; // userDetails.user.reportees || [];
const handlePageChange = (currPage) => {
let data = {
reportees: userDetails.user.reportees,
page: currPage,
perPage: 10
}
setCurrPage(currPage)
dispatch(fetchReportees(data))
}
// useEffect(() => {
// let data={
// reportees:reportees,
// ["page"]:page,
// }
// dispatch(fetchReportees(data))
// } ,[page]);
useEffect(() => {
setPagesCount(Math.ceil((totalCount) / (10)))
}, [totalCount])
useEffect(() => { useEffect(() => {
if (reporteIds.length > 0) { if (reporteIds.length > 0) {
const data = { const data = {
reportees: userDetails.user.reportees, reportees: userDetails.user.reportees,
sort: { type: "empId", order: 1 }, // sort: { type: "empId", order: 1 },
page: 1, page: currPage,
perPage: 10, perPage: 10
}; };
dispatch(fetchReportees(data)); dispatch(fetchReportees(data));
} }
}, [reporteIds]); }, [reporteIds]);
useEffect(() => { useEffect(() => {
if(userDetails.user){ if (userDetails.user) {
setReporteIds(userDetails.user.reportees) setReporteIds(userDetails.user.reportees)
navigate("/dashboard") navigate("/dashboard")
}else{ } else {
navigate("/") navigate("/")
} }
}, [userDetails]); }, [userDetails]);
const headers = [ const headers = [
{ {
title: "Employee Name", title: "Employee Name",
id:"empName", id: "empName",
render: (value) => <span className="flex items-center"><img className="pr-2" src="/man.png" width="30px" height="30px"/>{value}</span> render: (value) => <span className="flex items-center"><img className="pr-2" src="/man.png" width="30px" height="30px" />{value}</span>
}, },
{ {
title: "Emp.Id", title: "Emp.Id",
id: "empId" id: "empId"
}, },
{ {
title: "Designation", title: "Designation",
id: 'designation' id: 'designation'
}, },
{ {
title: "score", title: "score",
id:"score", id: "score",
render: (value) => <div className="bg-blue-200 rounded-md text-center p-[4px]">{value}</div> render: (value) => <span className={`w-[30px] h-[30px] rounded-full flex items-center text-white justify-center
${value === 0 ? 'bg-red-500 ' : ''}
${value >= 1 && value < 2 ? 'bg-red-500' : ''}
${value >= 2 && value < 3 ? 'bg-yellow-500' : ''}
${value >= 3 && value < 4 ? 'bg-green-400 ' : ''}
${value >= 4 && value < 5 ? 'bg-green-600 ' : ''}
${value >= 5 ? 'bg-green-600 ' : ''}
`}>{value}</span>
}, },
{ {
title: "Email", title: "Email",
id: 'empEmail' id: 'empEmail'
}, },
{ {
title: "Action", title: "Action",
id:"empId", id: "empId",
render: (value) => <Link to={`/viewreportee/${value}`}><button className="bg-blue-400 text-white rounded-md px-3 py-1">View</button></Link> render: (value) => <Link to={`/viewreportee/${value}`}><button className="bg-blue-400 text-white rounded-md px-3 py-1">View</button></Link>
}, },
] ]
return ( return (
<div className="max-h-[87vh] "> <div className="">
<Table headers={headers} data={reportees} loading={loading} maxHeight={88}/> <div className="mb-2">
</div> <Table headers={headers} data={reportees} loading={loading} maxHeight={88} />
<div className="">
{reportees && (
<div className="flex justify-end mt-2">
{/* <div className="text-blue-500">Total Results: {pagesCount}</div> */}
{pagesCount > 1 && (
<PaginationComponent
currentPage={currPage}
totalPages={pagesCount}
onPageChange={handlePageChange}
/>
)}
</div>
)}
</div>
</div>
</div>
) )
} }
......
src/pages/layout/index.jsx
View file @ 4df1b3a3
...@@ -6,7 +6,7 @@ import LeftSidebar from '../../components/leftSidebar'; ...@@ -6,7 +6,7 @@ import LeftSidebar from '../../components/leftSidebar';
function Layout({children}) { function Layout({children}) {
const url = window.location.href; const url = window.location.href;
return ( return (
<div> <div className='max-h-[84vh]'>
<Header/> <Header/>
<div className="flex"> <div className="flex">
<Sidebar/> <Sidebar/>
......
src/pages/reports/index.jsx
View file @ 4df1b3a3
import React, { useState, useEffect, useMemo } from "react"; import React, { useState, useEffect, useMemo } from "react";
import { useSelector, useDispatch } from "react-redux"; import { useSelector, useDispatch } from "react-redux";
import { useParams,useNavigate } from "react-router"; 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 { fetchReports } from "../../redux/reducers/reportSlice"; import { fetchReports } from "../../redux/reducers/reportSlice";
...@@ -10,14 +10,14 @@ import DateRangePicker from "../../components/dateRangePicker/DateRangePicker"; ...@@ -10,14 +10,14 @@ import DateRangePicker from "../../components/dateRangePicker/DateRangePicker";
function Reports() { function Reports() {
const dispatch = useDispatch(); const dispatch = useDispatch();
const navigate=useNavigate(); const navigate = useNavigate();
const { id } = useParams(); const { id } = useParams();
const empId = Number(id) const empId = Number(id)
const reportees = useSelector((state) => state.reportees.reportees); const reportees = useSelector((state) => state.reportees.reportees);
const user=useSelector((state)=>state.userDetails.user) const user = useSelector((state) => state.userDetails.user)
const [empDetails, setEmpDetails] = useState(null); const [empDetails, setEmpDetails] = useState(null);
const { reports ,loading,error} = useSelector((state) => state.reports); const { reports, loading, error } = useSelector((state) => state.reports);
const [open, setOpen] = useState({"accordianOne":false,"accordianTwo":false}); const [open, setOpen] = useState({ "accordianOne": false, "accordianTwo": false });
...@@ -33,7 +33,7 @@ function Reports() { ...@@ -33,7 +33,7 @@ function Reports() {
const filtered = Object.groupBy(reports, ({ type }) => type); const filtered = Object.groupBy(reports, ({ type }) => type);
return filtered; return filtered;
} }
}, [reports,id]); }, [reports, id]);
const handleAccordian = (value) => { const handleAccordian = (value) => {
switch (value) { switch (value) {
...@@ -52,8 +52,8 @@ function Reports() { ...@@ -52,8 +52,8 @@ function Reports() {
const data = { "empId": empId, "fromDate": startDate, "toDate": endDate } const data = { "empId": empId, "fromDate": startDate, "toDate": endDate }
dispatch(fetchReports(data)) dispatch(fetchReports(data))
} }
const fetchLatestReporteesData=()=>{ const fetchLatestReporteesData = () => {
if(user){ if (user) {
const data = { const data = {
reportees: user.reportees, reportees: user.reportees,
sort: { type: "empId", order: 1 }, sort: { type: "empId", order: 1 },
...@@ -62,10 +62,10 @@ function Reports() { ...@@ -62,10 +62,10 @@ function Reports() {
}; };
dispatch(fetchReportees(data)); dispatch(fetchReportees(data));
} }
}
const handleAddActivity = async(activityData) => { }
const handleAddActivity = async (activityData) => {
if (id) { if (id) {
let newData = { let newData = {
"empId": empId, "empId": empId,
...@@ -74,8 +74,8 @@ function Reports() { ...@@ -74,8 +74,8 @@ function Reports() {
await axios.post(`${base_url}/createActivity`, newData) await axios.post(`${base_url}/createActivity`, newData)
.then(async (result) => { .then(async (result) => {
fetchLatestReporteesData() fetchLatestReporteesData()
getReports() getReports()
}) })
} else { } else {
alert("Please login") alert("Please login")
...@@ -83,7 +83,7 @@ function Reports() { ...@@ -83,7 +83,7 @@ function Reports() {
} }
useEffect(() => { useEffect(() => {
if (id !== undefined || null && reportees.length>0) { if (id !== undefined || null && reportees.length > 0) {
const emp = reportees?.filter((item) => item.empId === Number(id)); const emp = reportees?.filter((item) => item.empId === Number(id));
setEmpDetails(emp[0]); setEmpDetails(emp[0]);
const data = { const data = {
...@@ -96,64 +96,83 @@ function Reports() { ...@@ -96,64 +96,83 @@ function Reports() {
return (() => { return (() => {
setEmpDetails(null) setEmpDetails(null)
}) })
}, [id,reportees]); }, [id, reportees]);
useEffect(() => { useEffect(() => {
if(user){ if (user) {
navigate(`/viewreportee/${id}`) navigate(`/viewreportee/${id}`)
}else{ } else {
navigate("/") navigate("/")
} }
}, [id]); }, [id]);
if( empDetails && reportees.length) if (empDetails && reportees.length)
return ( return (
<div className="p-4" > <div className="p-4" >
<div className="bg-white p-3"> <div className="bg-white p-3 rounded-md">
<div className="flex"> <div className="flex justify-between">
{/* <img src="/generic-male-avatar-rectangular.jpg" width="100px" height="100px" /> */} {/* <img src="/generic-male-avatar-rectangular.jpg" width="100px" height="100px" /> */}
<div className="w-1/2"> <div className="my-1">
<p> <p>
<span className="font-medium">Employee Name : </span> {empDetails?.empName} <span className="font-medium">Employee Name : </span> {empDetails?.empName}
</p> </p>
<p> <p>
<span className="font-medium">Designation : </span> {empDetails?.designation} <span className="font-medium">Designation : </span> {empDetails?.designation}
</p> </p>
<p> {/* <p>
<span className="font-medium">Email Id: </span> {empDetails?.empEmail} <span className="font-medium">Email Id: </span> {empDetails?.empEmail}
</p> </p> */}
</div> </div>
<div className="w-1/2"> <div className="my-1">
<p> <p>
<span className="font-medium">Employee Id: </span> {empDetails?.empId} <span className="font-medium">Email : </span> {empDetails?.empEmail}
</p> </p>
<p> <p>
<span className="font-medium">Average Score : </span> {empDetails?.score} <span className="font-medium">Employee Id: </span> {empDetails?.empId}
</p> </p>
<p> {/* <p>
<span className="font-medium">Total Score : </span> {empDetails?.score}
</p> */}
{/* <p>
<span className="font-medium">Allocated To : </span> {empDetails?.project} <span className="font-medium">Allocated To : </span> {empDetails?.project}
</p> </p> */}
</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
${empDetails?.score === 0 ? 'bg-red-500 ' : ''}
${empDetails?.score >= 1 && empDetails?.score < 2 ? 'bg-red-500' : ''}
${empDetails?.score >= 2 && empDetails?.score < 3 ? 'bg-yellow-500' : ''}
${empDetails?.score >= 3 && empDetails?.score < 4 ? 'bg-green-500 ' : ''}
${empDetails?.score >= 4 && empDetails?.score < 5 ? 'bg-green-600 ' : ''}
${empDetails?.score >= 5 ? 'bg-green-600 ' : ''}
`}>
<span className="text-lg font-bold">{empDetails?.score}</span>
</div>
<div className="">
<span className="text-blue-400 font-semibold">Total Score</span>
</div>
</div>
</div>
</div>
<div className="max-h-[70vh] overflow-auto">
<div className="container mx-auto mt-4 flex justify-end pe-4">
<DateRangePicker getReports={getReports} />
</div>
<div className="max-h-[50vh] overflow-auto">
<Accordion title="Default" open={open.accordianOne} handleAccordian={handleAccordian} data={activities?.default} handleAddActivity={handleAddActivity} />
</div>
<div className="max-h-[50vh] overflow-auto">
<Accordion title="Initiative" open={open.accordianTwo} handleAccordian={handleAccordian} data={activities?.initiative} handleAddActivity={handleAddActivity} />
</div>
</div> </div>
</div> </div>
);
else
return <div className="w-full h-full">
<p className="text-center align-middle pt-14 pb-14 text-blue-500 font-bold">Employee Details Not Found</p>
</div> </div>
<div className="max-h-[70vh] overflow-auto">
<div className="container mx-auto mt-4 flex justify-end pe-4">
<DateRangePicker getReports={getReports} />
</div>
<div className="max-h-[50vh] overflow-auto">
<Accordion title="Default" open={open.accordianOne} handleAccordian={handleAccordian} data={activities?.default} handleAddActivity={handleAddActivity} />
</div>
<div className="max-h-[50vh] overflow-auto">
<Accordion title="Initiative" open={open.accordianTwo} handleAccordian={handleAccordian} data={activities?.initiative} handleAddActivity={handleAddActivity} />
</div>
</div>
</div>
);
else
return <div className="w-full h-full">
<p className="text-center align-middle pt-14 pb-14 text-blue-500 font-bold">Employee Details Not Found</p>
</div>
} }
......
src/redux/reducers/reporteesSlice.js
View file @ 4df1b3a3
...@@ -4,6 +4,7 @@ import axios from "axios"; ...@@ -4,6 +4,7 @@ import axios from "axios";
const initialState = { const initialState = {
reportees: [], reportees: [],
totalCount:0,
loading: false, loading: false,
error: null, error: null,
}; };
...@@ -29,6 +30,7 @@ const reporteesSlice = createSlice({ ...@@ -29,6 +30,7 @@ const reporteesSlice = createSlice({
builder.addCase(fetchReportees.fulfilled, (state, action) => { builder.addCase(fetchReportees.fulfilled, (state, action) => {
state.loading = false; state.loading = false;
state.reportees = action.payload.data; state.reportees = action.payload.data;
state.totalCount = action.payload.totalCount.count;
state.error = ""; state.error = "";
}); });
builder.addCase(fetchReportees.rejected, (state, action) => { builder.addCase(fetchReportees.rejected, (state, action) => {
......
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