Skip to content

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

Added custom Activity changes

parent 2f0df03e
Hide whitespace changes
Inline Side-by-side
Showing with 125 additions and 133 deletions
src/App.css
View file @ ef10b1d0
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
src/assets/icons/rightIcon.js 0 → 100644
View file @ ef10b1d0
import React from "react";
function RightIcon() {
return (
<svg fill="#000000" height="20px" width="20px" version="1.1" id="Layer_1"
viewBox="0 0 330 330">
<path id="XMLID_27_" style={{fill: 'white'}} d="M15,180h263.787l-49.394,49.394c-5.858,5.857-5.858,15.355,0,21.213C232.322,253.535,236.161,255,240,255
s7.678-1.465,10.606-4.394l75-75c5.858-5.857,5.858-15.355,0-21.213l-75-75c-5.857-5.857-15.355-5.857-21.213,0
c-5.858,5.857-5.858,15.355,0,21.213L278.787,150H15c-8.284,0-15,6.716-15,15S6.716,180,15,180z"/>
</svg>
);
}
export default RightIcon;
src/components/leftSidebar/index.jsx
View file @ ef10b1d0
...@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react"; ...@@ -2,6 +2,7 @@ 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 scoreColor from '../../utils/scoreColor';
import Loading from "../loading Component/Loading"; import Loading from "../loading Component/Loading";
function LeftSidebar() { function LeftSidebar() {
...@@ -20,19 +21,13 @@ function LeftSidebar() { ...@@ -20,19 +21,13 @@ function LeftSidebar() {
{reportees?.map(({ empName, score, empId }) => ( {reportees?.map(({ empName, score, empId }) => (
<Link <Link
to={`/viewreportee/${empId}`} to={`/viewreportee/${empId}`}
className={`flex items-center bg-${Number(id) === empId ? "blue-200" : "white" className={`flex items-center hover:bg-indigo-500 hover:text bg-${Number(id) == empId ? "indigo-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-[30px] h-[30px] rounded-full flex items-center text-white justify-center ${scoreColor(score)}`}>
${score === 0 || score<1 ? 'bg-red-400 ' : ''}
${score >= 1 && score < 2 ? 'bg-red-300' : ''}
${score >= 2 && score < 3 ? 'bg-green-400' : ''}
${score >= 3 && score < 4 ? 'bg-green-500 ' : ''}
${score >= 4 && score < 5 ? 'bg-green-600 ' : ''}
${score >= 5 ? 'bg-green-600 ' : ''}`}>
{score} {score}
</p> </p>
</Link> </Link>
......
src/components/modal/index.jsx
View file @ ef10b1d0
import axios from "axios"; import axios from "axios";
import React, { useMemo, useEffect, useState, useCallback } from "react"; import React, { useMemo, useEffect, useState, useCallback } from "react";
import { base_url } from "../../utils/constants"; import { base_url } from "../../utils/constants";
import Loading from "../loading Component/Loading";
export default function MyModal({ visible, onClose ,type,handleAddActivity}) { export default function MyModal({ visible, onClose ,type,handleAddActivity}) {
...@@ -9,11 +10,15 @@ export default function MyModal({ visible, onClose ,type,handleAddActivity}) { ...@@ -9,11 +10,15 @@ export default function MyModal({ visible, onClose ,type,handleAddActivity}) {
const [scoreType,setScoreType]=useState(1) const [scoreType,setScoreType]=useState(1)
const [activityData,setActivityData]=useState({aName:"",aId:"",type:type,score:0,comments:""}) const [activityData,setActivityData]=useState({aName:"",aId:"",type:type,score:0,comments:""})
const [activityType,setActivtyType]=useState("") const [activityType,setActivtyType]=useState("")
const [showCustActivity, setShowActivity] = useState(false);
const [custActivity, setCustActivity] = useState('')
const [modalLoading, setModalLoading] = useState(true)
const getActivitysList= async(type)=>{ const getActivitysList= async(type)=>{
const activities=await axios.get(`${base_url}/activities`) const activities=await axios.get(`${base_url}/activities`)
const response= await activities.data.filter((item)=>item.type==type) const response= await activities.data.filter((item)=>item.type==type)
setActivitiesList(response) setActivitiesList(response)
setModalLoading(false)
} }
const handleActivityName = (e) => { const handleActivityName = (e) => {
...@@ -35,6 +40,7 @@ export default function MyModal({ visible, onClose ,type,handleAddActivity}) { ...@@ -35,6 +40,7 @@ export default function MyModal({ visible, onClose ,type,handleAddActivity}) {
const handleSubmit=(e)=>{ const handleSubmit=(e)=>{
onClose() onClose()
setShowActivity(false)
handleAddActivity(activityData) handleAddActivity(activityData)
} }
...@@ -53,84 +59,96 @@ export default function MyModal({ visible, onClose ,type,handleAddActivity}) { ...@@ -53,84 +59,96 @@ export default function MyModal({ visible, onClose ,type,handleAddActivity}) {
setActivtyType(str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()) setActivtyType(str.charAt(0).toUpperCase() + str.slice(1).toLowerCase())
} }
useEffect(()=>{ useEffect(()=>{
SentenceCase(type) SentenceCase(type)
if (visible===false){ if (visible===false){
setActivityData({aName:"",aId:"",type:type,score:0,comments:""}) setActivityData({aName:"",aId:"",type:type,score:0,comments:""})
}else{ }else{
getActivitysList(type); getActivitysList(type);
setModalLoading(true)
} }
},[visible,type]) },[visible,type]);
if (!visible) return null;
if (!visible) return null;
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-md 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 rounded-md">{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 text-[12px]" onClick={(e) => e.stopPropagation()}> {
<div className="flex items-center my-5"> (!modalLoading) ? <form className=" p-2 max-w-sm mx-auto text-[12px]" onClick={(e) => e.stopPropagation()}>
<label htmlFor="countries">SELECT ACTIVITY: </label> <div className="flex items-center justify-between my-5">
<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)}> <label htmlFor="countries">SELECT ACTIVITY: </label>
<option id="" value="">Select</option> <select disabled={showCustActivity} 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="">Select</option>
activitiesList && activitiesList.map((activity)=><option className=" 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>
<button onClick={(e) => {e.preventDefault(); setShowActivity(!showCustActivity)}} className="bg-blue-400 ml-2 w-5/12 text-white px-2 py-1 rounded hover:scale-95 transition text-sm">Custom Activity</button>
</div>
<div className={`flex items-center ${!showCustActivity && 'hidden'}`}>
<label className={`font-medium dark:text-gray-300 mr-2`}>Custom Activity:</label>
<input type="text" value={custActivity} placeholder="Enter Activity name" name="performance" className={`border border-gray-300 rounded p-2 `} onChange={(e)=>setCustActivity(e.target.value)}/>
</div>
<div className="flex items-center mb-4 ">
<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)}/>
<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)} />
</div>
<div className="flex ">
<span>SCORE: </span>
<select className="border w-1/5 ms-1" onChange={(e)=>handleScoreChange(e.target.value)}>
<option value={0}>Select</option>
<option value={1}>1</option>
<option value={2}>2</option>
<option value={3}>3</option>
<option value={4}>4</option>
<option value={5}>5</option>
</select> </select>
</div>
<div className="flex items-center my-5">
<label htmlFor="comments" className="block w-3/12 mb-20 text-start font-medium dark:text-white">COMMENTS :</label>
<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()}
onKeyDown={(e) => {
// Prevent propagation of space key press
if (e.key === " ") {
// e.preventDefault()
e.stopPropagation();
}
}}
onKeyUp={(e) => {
// Prevent propagation of space key release
if (e.key === " ") {
e.preventDefault()
e.stopPropagation();
}
}}></textarea>
</div>
<div className="flex items-center justify-end mb-3">
<button onClick={() => {setShowActivity(false); 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-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>
}
</div>
</div> </form>:null
<div className="flex items-center mb-4 "> }
<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)}/>
<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)} />
</div>
<div className="flex ">
<span>SCORE: </span>
<select className="border w-1/5 ms-1" onChange={(e)=>handleScoreChange(e.target.value)}>
<option value={0}>Select</option>
<option value={1}>1</option>
<option value={2}>2</option>
<option value={3}>3</option>
<option value={4}>4</option>
<option value={5}>5</option>
</select>
</div>
<div className="flex items-center my-5">
<label htmlFor="comments" className="block w-3/12 mb-20 text-start font-medium dark:text-white">COMMENTS :</label>
<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()}
onKeyDown={(e) => {
// Prevent propagation of space key press
if (e.key === " ") {
// e.preventDefault()
e.stopPropagation();
}
}}
onKeyUp={(e) => {
// Prevent propagation of space key release
if (e.key === " ") {
e.preventDefault()
e.stopPropagation();
}
}}></textarea>
</div>
<div className="flex items-center justify-end mb-3">
<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-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>
}
</div>
</form>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
); </>
)
} }
\ No newline at end of file
src/components/table/index.jsx
View file @ ef10b1d0
...@@ -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/>
return ( return (
<div className={` overflow-auto sm:rounded-lg p-4 max-h-[${maxHeight}vh] bg-gray-100`}> <div className={` overflow-auto sm:rounded-lg p-4 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 @ ef10b1d0
...@@ -2,15 +2,6 @@ ...@@ -2,15 +2,6 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace; monospace;
......
src/pages/dashboard/index.jsx
View file @ ef10b1d0
...@@ -3,6 +3,8 @@ import { Link, useNavigate } from "react-router-dom"; ...@@ -3,6 +3,8 @@ 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 RightIcon from '../../assets/icons/rightIcon';
import scoreColor from '../../utils/scoreColor';
import PaginationComponent from "../../components/Pagenation/Pagenation"; import PaginationComponent from "../../components/Pagenation/Pagenation";
function Dashboard() { function Dashboard() {
...@@ -76,14 +78,7 @@ function Dashboard() { ...@@ -76,14 +78,7 @@ function Dashboard() {
{ {
title: "score", title: "score",
id: "score", id: "score",
render: (value) => <span className={`w-[30px] h-[30px] rounded-full flex items-center text-white justify-center render: (value) => <span className={`w-[30px] h-[30px] rounded-full flex items-center text-white justify-center ${scoreColor(value)}`}>{value}</span>
${value === 0 || value<1 ? 'bg-red-400 ' : ''}
${value >= 1 && value < 2 ? 'bg-red-300' : ''}
${value >= 2 && value < 3 ? 'bg-green-400' : ''}
${value >= 3 && value < 4 ? 'bg-green-500 ' : ''}
${value >= 4 && value < 5 ? 'bg-green-600 ' : ''}
${value >= 5 ? 'bg-green-600 ' : ''}
`}>{value}</span>
}, },
{ {
title: "Email", title: "Email",
...@@ -92,12 +87,16 @@ function Dashboard() { ...@@ -92,12 +87,16 @@ function Dashboard() {
{ {
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-2 py-1 flex items-center justify-center w-[40px]">
<RightIcon />
</button>
</Link>
}, },
] ]
return ( return (
<div className=""> <div>
<div className="mb-2"> <div className="mb-2">
<Table headers={headers} data={reportees} loading={loading} maxHeight={88} /> <Table headers={headers} data={reportees} loading={loading} maxHeight={88} />
......
src/pages/reports/index.jsx
View file @ ef10b1d0
...@@ -6,6 +6,7 @@ import axios from 'axios'; ...@@ -6,6 +6,7 @@ import axios from 'axios';
import { fetchReports } from "../../redux/reducers/reportSlice"; import { fetchReports } from "../../redux/reducers/reportSlice";
import { fetchReportees } from "../../redux/reducers/reporteesSlice"; import { fetchReportees } from "../../redux/reducers/reporteesSlice";
import Accordion from "../../components/accordion"; import Accordion from "../../components/accordion";
import scoreColor from '../../utils/scoreColor';
import DateRangePicker from "../../components/dateRangePicker/DateRangePicker"; import DateRangePicker from "../../components/dateRangePicker/DateRangePicker";
function Reports() { function Reports() {
...@@ -139,14 +140,7 @@ function Reports() { ...@@ -139,14 +140,7 @@ function Reports() {
</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 <div className={`w-[40px] h-[40px] rounded-full flex items-center text-white justify-center ${scoreColor(empDetails?.score)}`}>
${empDetails?.score === 0 || empDetails?.score<1 ? 'bg-red-400 ' : ''}
${empDetails?.score >= 1 && empDetails?.score < 2 ? 'bg-red-300' : ''}
${empDetails?.score >= 2 && empDetails?.score < 3 ? 'bg-green-400' : ''}
${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> <span className="text-lg font-bold">{empDetails?.score}</span>
</div> </div>
<div className=""> <div className="">
......
src/utils/scoreColor.js 0 → 100644
View file @ ef10b1d0
const scoreColor = (value) => {
if (value >= 0 && value < 1) {
return 'bg-red-400';
} else if (value >= 1 && value < 2) {
return 'bg-red-300';
} else if (value >= 2 && value < 3) {
return 'bg-green-400';
} else if (value >= 3 && value < 4) {
return 'bg-green-500';
} else if (value >= 4 && value < 5) {
return 'bg-green-600';
} else if (value >= 5) {
return 'bg-green-600';
} else {
return '';
}
};
export default scoreColor;
\ No newline at end of file
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