Added custom Activity changes

src/App.css

-.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

+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

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
+import scoreColor from '../../utils/scoreColor';
 import Loading from "../loading Component/Loading";
 
 function LeftSidebar() {
@@ -20,19 +21,13 @@ function LeftSidebar() {
             {reportees?.map(({ empName, score, empId }) => (
               <Link
                 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`}
                 key={empId}
               >
                 <img src="/man.png" width="18px" height="18px" />
                 <p className="w-[80%] text-left">{empName}</p>
-                <p className={`w-[30px] h-[30px] rounded-full flex items-center text-white justify-center 
-      ${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 ' : ''}`}>
+                <p className={`w-[30px] h-[30px] rounded-full flex items-center text-white justify-center ${scoreColor(score)}`}>
                   {score}
                 </p>
               </Link>

src/components/modal/index.jsx

 import axios from "axios";
 import React, { useMemo, useEffect, useState, useCallback } from "react";
 import { base_url } from "../../utils/constants";
+import Loading from "../loading Component/Loading";
 
 
 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 [activityData,setActivityData]=useState({aName:"",aId:"",type:type,score:0,comments:""})
   const [activityType,setActivtyType]=useState("")
+  const [showCustActivity, setShowActivity] = useState(false);
+  const [custActivity, setCustActivity] = useState('')
+  const [modalLoading, setModalLoading] = useState(true)
 
   const  getActivitysList= async(type)=>{
     const activities=await axios.get(`${base_url}/activities`)
     const response= await activities.data.filter((item)=>item.type==type)
     setActivitiesList(response)
+    setModalLoading(false)
   }
 
   const handleActivityName = (e) => {
@@ -35,6 +40,7 @@ export default function MyModal({ visible, onClose ,type,handleAddActivity}) {
 
   const handleSubmit=(e)=>{
   onClose()
+  setShowActivity(false)
   handleAddActivity(activityData)
   }
 
@@ -53,33 +59,42 @@ export default function MyModal({ visible, onClose ,type,handleAddActivity}) {
     setActivtyType(str.charAt(0).toUpperCase() + str.slice(1).toLowerCase())
   }
   useEffect(()=>{
+   
     SentenceCase(type)
     if (visible===false){
       setActivityData({aName:"",aId:"",type:type,score:0,comments:""})
     }else{
       getActivitysList(type);
+      setModalLoading(true)
     }
-  },[visible,type])
+  },[visible,type]);
+
 
 
   if (!visible) return null;
   
   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="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>
           <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()}>
+            <div className="flex items-center justify-between  my-5">
             <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 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>)
               }
             </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>
@@ -119,7 +134,7 @@ export default function MyModal({ visible, onClose ,type,handleAddActivity}) {
               }}></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>
+          <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>
@@ -127,10 +142,13 @@ export default function MyModal({ visible, onClose ,type,handleAddActivity}) {
           
         </div>
 
-            </form>
+          </form>:null
+          }
           </div>      
         </div>
       </div>
     </div>
-  );
+    </>
+  )
+  
 }
\ No newline at end of file

src/components/table/index.jsx

@@ -5,7 +5,7 @@ function Table({headers, data,loading, maxHeight}) {
   if(loading) return <Loading/>
 
   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">
         <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700  dark:text-white">
           <tr className="mb-2">

src/index.css

@@ -2,15 +2,6 @@
 @tailwind components;
 @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 {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;

src/pages/dashboard/index.jsx

@@ -3,6 +3,8 @@ import { Link, useNavigate } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 import { fetchReportees } from "../../redux/reducers/reporteesSlice";
 import Table from '../../components/table';
+import RightIcon from '../../assets/icons/rightIcon';
+import scoreColor from '../../utils/scoreColor';
 import PaginationComponent from "../../components/Pagenation/Pagenation";
 
 function Dashboard() {
@@ -76,14 +78,7 @@ function Dashboard() {
     {
       title: "score",
       id: "score",
-      render: (value) => <span className={`w-[30px] h-[30px] rounded-full flex items-center text-white justify-center 
-      ${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>
+      render: (value) => <span className={`w-[30px] h-[30px] rounded-full flex items-center text-white justify-center ${scoreColor(value)}`}>{value}</span>
     },
     {
       title: "Email",
@@ -92,12 +87,16 @@ function Dashboard() {
     {
       title: "Action",
       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 (
-    <div className="">
+    <div>
       <div className="mb-2">
          <Table headers={headers} data={reportees} loading={loading} maxHeight={88} />
          

src/pages/reports/index.jsx

@@ -6,6 +6,7 @@ import axios from 'axios';
 import { fetchReports } from "../../redux/reducers/reportSlice";
 import { fetchReportees } from "../../redux/reducers/reporteesSlice";
 import Accordion from "../../components/accordion";
+import scoreColor from '../../utils/scoreColor';
 import DateRangePicker from "../../components/dateRangePicker/DateRangePicker";
 
 function Reports() {
@@ -139,14 +140,7 @@ function Reports() {
 
             </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 || 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 ' : ''}
-  `}>
+              <div className={`w-[40px] h-[40px] rounded-full flex items-center text-white justify-center  ${scoreColor(empDetails?.score)}`}>
                 <span className="text-lg font-bold">{empDetails?.score}</span>
               </div>
               <div className="">

src/utils/scoreColor.js

+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