Skip to content

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

Merge branch 'initailSetup' into 'master' 

Added custom Activity changes

See merge request !53
parents 2f0df03e ef10b1d0
Hide whitespace changes
Inline Side-by-side
Showing with 125 additions and 133 deletions
src/App.css
View file @ e285453a
.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 @ e285453a
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 @ e285453a
...@@ -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 @ e285453a
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 @ e285453a
...@@ -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 @ e285453a
...@@ -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 @ e285453a
...@@ -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 @ e285453a
...@@ -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 @ e285453a
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