Skip to content

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

Merge branch 'initailSetup' into 'master' 

frontend changes

See merge request !96
parents 7f6cebb4 d874ee67
Hide whitespace changes
Inline Side-by-side
Showing with 132 additions and 121 deletions
src/assets/icons/downloadIcon.js
View file @ 60298025
......@@ -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 @ 60298025
......@@ -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 @ 60298025
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 @ 60298025
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 @ 60298025
......@@ -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 0 → 100644
View file @ 60298025
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
View file @ 60298025
......@@ -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 @ 60298025
......@@ -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