all-error-handled

server.js

@@ -43,6 +43,26 @@ app.get("/employee/:id", (req, res) => {
     .catch((error) => res.status(401).send(error));
 });
 
+//login Check
+app.post('/login', async (req, res) => {
+  const { empId} = req.body;
+  try {
+    const user = await db.collection('employees').findOne({empId:empId},{ projection: { _id: false } })
+    if (!user) {
+      return res.status(401).json({ error: 'Authentication failed', message: 'User not found' });
+    }
+    if (empId === user.empId) { 
+      res.json({ message: 'Login successful', user });
+    } else {
+      res.status(401).json({ error: 'Authentication failed', message: 'Email and password do not match' });
+    }
+  }
+  catch (error) {
+    res.status(500).json({ error: 'Internal server error', details: error.message });
+  }
+});
+
+
 //to get activities to display
 app.get("/activities", (req, res) => {
   db.collection("activities_master")
@@ -186,7 +206,7 @@ const calculateAverage = (query) => {
           : (averageScore = score / activitiesLength);
 
           if (averageScore % 1 !== 0) {
-            averageScore = averageScore.toFixed(1);
+            averageScore = Number(averageScore).toFixed(1);
           }
           
         db.collection("employees")

src/App.js

@@ -10,8 +10,8 @@ function App() {
     <BrowserRouter>
       <Routes>
         <Route path='/' element={<Home />}/>
-        <Route path=":id/dashboard" element={<Layout><Dashboard/></Layout>}/>
-        <Route path=":id/reports" element={<Layout><Reports/></Layout>}/>
+        <Route path="/dashboard" element={<Layout><Dashboard/></Layout>}/>
+        <Route path="/viewreportee/:id" element={<Layout><Reports/></Layout>}/>
       </Routes>
     </BrowserRouter>
   );

src/components/accordion/index.jsx

@@ -4,16 +4,18 @@ import moment from "moment";
 import ModalButton from "../modal/modalButton";
 import { useSelector ,useDispatch} from "react-redux";
 import { useEffect } from "react";
+import {useParams} from 'react-router'
 import { fetchReportees } from "../../redux/reducers/reporteesSlice";
 import { calculateDefaultScore,calculateInitiativeScore } from "../../redux/reducers/reportSlice";
 
 
 function Accordion({ title, data ,handleAddActivity,open,handleAccordian}) {
   const dispatch=useDispatch()
-  // const [open, setOpen] = useState(false);
+  const {id}=useParams()
   const { reports,defaultAvgScore,initiativeAvgScore } = useSelector((state) => state.reports);
   const userDetails = useSelector((state) => state.userDetails);
 
+
   useEffect(()=>{
     const data = {
       reportees: userDetails.user.reportees,
@@ -21,17 +23,21 @@ function Accordion({ title, data ,handleAddActivity,open,handleAccordian}) {
       page: 1,
       perPage: 10,
     }
-    dispatch(fetchReportees(data));
-   dispatch(calculateDefaultScore(reports))
-   dispatch(calculateInitiativeScore(reports))
-    
-  },[reports])
+    dispatch(fetchReportees(data)) 
+  },[userDetails,id])
+
+  useEffect(()=>{
+    if(reports !=[]){
+    dispatch(calculateDefaultScore(reports))
+    dispatch(calculateInitiativeScore(reports))
+    }
+  },[reports,id])
   
   function  handleClick(){
     handleAccordian(title)
   }
   const headers = [
-    { title: "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: "Score", id: "score", width: "10%", render: (value) => <div className="w-[35px] bg-blue-200 rounded-md text-center p-[4px]">{value}</div> },
     { title: "Comments", id: "comments", width: "40%" },
@@ -39,20 +45,21 @@ function Accordion({ title, data ,handleAddActivity,open,handleAccordian}) {
   return (
     <div className="px-4">
      
-      <button
+      <button           
         onClick={handleClick}
         type="button"
         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 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3" data-accordion-target="#accordion-collapse-body-2" aria-expanded="false" aria-controls="accordion-collapse-body-2" >
         <div className="w-1/2 text-start ms-2">{title}</div>
-        <div className="w-1/2 flex justify-between">Average Score :{title === "Default Activities:" ? defaultAvgScore : initiativeAvgScore}
+        <div className="w-1/2 flex justify-between">
+          Average Score :{title === "Default" ? defaultAvgScore : initiativeAvgScore}
         <ModalButton type={`${title === "Default" ? "default" : "initiative"}`} handleAddActivity={handleAddActivity}/>
         </div>
         <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">
           <path
             stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
             d="M9 5 5 1 1 5"
           />
         </svg>

src/components/leftSidebar/index.jsx

-import React from "react";
+import React,{useEffect,useState} from "react";
 import { Link } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
@@ -6,6 +6,9 @@ import { useParams } from "react-router-dom";
 function LeftSidebar() {
     const reportees = useSelector((state) => state.reportees.reportees);
     const {id} = useParams()
+    // const [refresh,setRefresh]=useState(false)
+
+    // useEffect(()=>{   setRefresh(!refresh)},[reportees])
   return (
 
       <div className="mt-2  w-[30%] flex flex-col px-[5px]">
@@ -15,9 +18,9 @@ function LeftSidebar() {
         <div className="p-2 bg-[#E9EDEE] mt-4 max-h-[80vh] overflow-auto">
           {reportees?.map(({ empName, score, empId }) => (
             <Link
-              to={`/${empId}/reports`}
+              to={`/viewreportee/${empId}`}
               className={`flex items-center bg-${
-                Number(id) === empId ? "indigo-400" : "white"
+                Number(id) === empId ? "blue-200" : "white"
               } p-2 justify-between mb-1 w-full`}
               key={empId}
             >

src/components/sidebar/index.jsx

@@ -8,26 +8,26 @@ function Sidebar() {
   return (
     <div className="w-[20%] flex items-center flex-col">
       <nav
-        class="hs-accordion-group p-6 w-full flex flex-col flex-wrap"
+        className="hs-accordion-group p-6 w-full flex flex-col flex-wrap"
         data-hs-accordion-always-open
       >
-        <ul class="space-y-1.5">
+        <ul className="space-y-1.5">
           <li>
             <Link
-              class={`flex items-center gap-x-3.5 py-2 px-2.5 bg-gray-100 text-sm text-slate-700 rounded-lg hover:bg-gray-100 dark:bg-gray-900 dark:text-white dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600`}
+              className={`flex items-center gap-x-3.5 py-2 px-2.5 bg-gray-100 text-sm text-slate-700 rounded-lg hover:bg-gray-100 dark:bg-gray-900 dark:text-white dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600`}
               to={`/${user?.empId}/dashboard`}
             >
               <svg
-                class="size-4"
+                className="size-4"
                 xmlns="http://www.w3.org/2000/svg"
                 width="24"
                 height="24"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
               >
                 <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
                 <polyline points="9 22 9 12 15 12 15 22" />
@@ -37,19 +37,19 @@ function Sidebar() {
           </li>
           <li>
             <Link
-              class={`flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-900 dark:text-slate-400 dark:hover:text-slate-300 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600`}
+              className={`flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-900 dark:text-slate-400 dark:hover:text-slate-300 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600`}
             >
               <svg
-                class="size-4"
+                className="size-4"
                 xmlns="http://www.w3.org/2000/svg"
                 width="24"
                 height="24"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
               >
                 <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
                 <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />

src/components/table/index.jsx

 import React from "react";
 
 function Table({headers, data, maxHeight}) {
+  
   return (
     <div className={` overflow-x-auto sm:rounded-lg p-4 max-h-[${maxHeight}vh]`}>
       <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-gray-400 ">
           <tr className="mb-2">
-            {headers.map((item) => (
-              <th scope="col" className={`px-6 py-4 w-[${item.width}]`} > 
+            {headers.map((item,index) => (
+              <th key={index} scope="col" className={`px-6 py-4 w-[${item.width}]`} > 
                 {item.title}
               </th>
             ))}
@@ -19,7 +20,7 @@ function Table({headers, data, maxHeight}) {
                   <tr className="bg-white dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                       {
                         headers?.map(({render, id}) => (
-                          <td className="px-6 py-4 listData" >{render ? render(item[id]) : item[id] === "" ? "NA" : item[id] }</td>
+                          <td   className="px-6 py-4 listData" >{render ? render(item[id]) : item[id] === "" ? "NA" : item[id] }</td>
                         ))
                       }
                   </tr>

src/pages/dashboard/index.jsx

 import React, { useEffect } from "react";
-import { useParams, Link } from "react-router-dom";
+import { Link ,useNavigate} from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 import { fetchReportees } from "../../redux/reducers/reporteesSlice";
-import { fetchUser } from "../../redux/reducers/userSlice";
 import Table from '../../components/table';
 
 function Dashboard() {
   const dispatch = useDispatch();
+  const navigate=useNavigate();
   const reportees = useSelector((state) => state.reportees.reportees);
   const userDetails = useSelector((state) => state.userDetails);
-  const { id } = useParams();
   const reporteIds = userDetails.user.reportees || [];
 
   useEffect(() => {
@@ -25,9 +24,12 @@ function Dashboard() {
   }, [reporteIds]);
 
   useEffect(() => {
-    if(id !== undefined ||null)
-    dispatch(fetchUser(id));
-  }, [id]);
+    if(userDetails.user !== null){
+       navigate("/dashboard")
+    }else{
+      navigate("/")
+    }
+  }, [userDetails]);
 
   const headers = [
     {
@@ -55,7 +57,7 @@ function Dashboard() {
     {
       title: "Action", 
       id:"empId",
-      render: (value) => <Link to={`/${value}/reports`}><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>
     },
   ]
 

src/pages/home/index.jsx

 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import axios from 'axios';
+import { base_url } from "../../utils/constants";
+import { loginUser } from "../../redux/reducers/userSlice";
+import {useDispatch} from 'react-redux'
 
 function Home() {
   const navigate = useNavigate();
+  const dispatch=useDispatch()
   const [id, setId] = useState(null);
+  const [errorMsg,setErrorMsg]=useState("")
+ 
 
   const handleNavigate = () => {
-    navigate(`${id}/dashboard`);
+    if(id!==null){
+      axios.post(`${base_url}/login`,{empId:Number(id)})
+      .then((res) => {
+        dispatch(loginUser(res.data.user))
+         navigate(`/dashboard`);
+      })
+      .catch((error)=>{  
+        setErrorMsg("Not Authorized");
+      })
+    }else{
+      navigate(`/`);
+    }
+
   };
 
   return (
     <div className="container py-10 px-10 mx-0 min-w-full h-screen flex items-center justify-center bg-blue-100 ">
-      <div class="">
-      <h1 class="text-4xl font-extrabold leading-none tracking-tight   md:text-5xl lg:text-6xl text-purple-900 mb-10 ">SCORE  CARD</h1>
+      <div className="">
+      <h1 className="text-4xl font-extrabold leading-none tracking-tight   md:text-5xl lg:text-6xl text-purple-900 mb-10 ">SCORE  CARD</h1>
       <div className="max-w-sm p-10 bg-white border border-gray-400 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 ">
         <label
-          for="email"
+          htmlFor="email"
           className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
         >
           Employee Id
@@ -28,6 +47,11 @@ function Home() {
           required
           onChange={(e) => setId(e.target.value)}
         />
+       <div>
+       {
+        errorMsg!==""? <span>{errorMsg}</span>:null
+       }
+       </div>
         <button
           className="bg-purple-900 text-white disabled:bg-purple-900 hover:bg-blue-400 font-bold py-2 px-4 mt-6  rounded text-center ml-15"
           onClick={handleNavigate}

src/pages/layout/index.jsx

@@ -13,7 +13,7 @@ function Layout({children}) {
                 <div className="bg-[#E9EDEE] w-full" style={{height:"88vh"}}>
                     {children}
                 </div>
-                {url.includes('/reports') && <LeftSidebar/>}
+                {url.includes('/viewreportee') && <LeftSidebar/>}
             </div>
         </div>
     )

src/pages/reports/index.jsx

@@ -4,19 +4,22 @@ import { useParams } from "react-router";
 import { base_url } from "../../utils/constants";
 import axios from 'axios';
 import { fetchReports } from "../../redux/reducers/reportSlice";
+import { fetchReportees } from "../../redux/reducers/reporteesSlice";
 import Accordion from "../../components/accordion";
-import DateRangePicker from "../../components/DateRangePicker";
+import DateRangePicker from "../../components/dateRangePicker/DateRangePicker";
 
 function Reports() {
+  const dispatch = useDispatch();
   const { id } = useParams();
   const empId = Number(id)
-  const dispatch = useDispatch();
   const reportees = useSelector((state) => state.reportees.reportees);
+  const user=useSelector((state)=>state.userDetails.user)
   const [empDetails, setEmpDetails] = useState(null);
   const { reports } = useSelector((state) => state.reports);
   const [open, setOpen] = useState({"accordianOne":true,"accordianTwo":false});
 
 
+
   /*Example post data
 {
     "empId":41689,
@@ -29,7 +32,7 @@ function Reports() {
       const filtered = Object.groupBy(reports, ({ type }) => type);
       return filtered;
     }
-  }, [reports]);
+  }, [reports,id]);
 
   const handleAccordian=(value)=>{
     switch (value){
@@ -48,6 +51,18 @@ function Reports() {
     const data = { "empId": empId, "fromDate": startDate, "toDate": endDate }
     dispatch(fetchReports(data))
   }
+  const fetchLatestReporteesData=()=>{
+    if(user){
+      const data = {
+        reportees: user.reportees,
+        sort: { type: "empId", order: 1 },
+        page: 1,
+        perPage: 10,
+      };
+      dispatch(fetchReportees(data));
+    }
+  
+    }
 
   const handleAddActivity = (activityData) => {
     if (id) {
@@ -58,6 +73,7 @@ function Reports() {
       axios.post(`${base_url}/createActivity`, newData)
         .then((result) => {
           getReports()
+          fetchLatestReporteesData()
         })
     } else {
       alert("Please login")
@@ -70,18 +86,21 @@ function Reports() {
       setEmpDetails(emp[0]);
       const data = {
         "empId": Number(id),
-        "fromDate": "2024-03-10",
-        "toDate": "2024-03-15"
+        "fromDate": "",
+        "toDate": ""
       }
       dispatch(fetchReports(data))
     }
     return (() => {
       setEmpDetails(null)
     })
-  }, [id]);
+  }, [id,reportees]);
+
+
+
 
   return (
-    <div className="p-4">
+    <div className="p-4" >
       <div className=" bg-white p-3">
         <div className="flex">
           {/* <img src="/generic-male-avatar-rectangular.jpg" width="100px" height="100px" /> */}

src/redux/reducers/reportSlice.js

@@ -32,8 +32,8 @@ const reportSlice = createSlice({
     calculateInitiativeScore:(state,action)=>{
       const defaultItems = action.payload?.filter(item => item.type === "initiative");
       const totalDefaultScore = defaultItems?.reduce((acc, curr) => acc+ curr.score, 0);
-      const defaultAvgScore = totalDefaultScore > 0 ? totalDefaultScore / defaultItems.length : 0;
-      return {...state,initiativeAvgScore :defaultAvgScore.toFixed(1)}
+      const initialAvgScore = totalDefaultScore > 0 ? totalDefaultScore / defaultItems.length : 0;
+      return {...state,initiativeAvgScore :initialAvgScore.toFixed(1)}
     },
 
   },

src/redux/reducers/reporteesSlice.js

@@ -8,9 +8,8 @@ const initialState = {
   error: null,
 };
 
-export const fetchReportees = createAsyncThunk("getReportees", async (data) => {
-  return await axios
-    .post(`${base_url}/getreportees`, data)
+export const fetchReportees = createAsyncThunk("getreportees", async (data) => {
+  return await axios.post(`${base_url}/getreportees`, data)
     .then((response) => response.data);
 });
 

src/redux/reducers/userSlice.js

@@ -3,7 +3,7 @@ import { base_url } from "../../utils/constants";
 import axios from "axios";
 
 const initialState = {
-  user: {},
+  user: null,
   loading: false,
   error: null,
 };
@@ -20,6 +20,9 @@ const userSlice = createSlice({
   reducers: {
     resetUser:() => {
       return initialState
+    },
+    loginUser:(state,action)=>{
+      return {...state,user:action.payload}
     }
   },
   extraReducers: (builder) => {
@@ -41,6 +44,6 @@ const userSlice = createSlice({
   },
 });
 
-export const {resetUser} = userSlice.actions;
+export const {resetUser,loginUser} = userSlice.actions;
 
 export default userSlice.reducer;

src/redux/store.js

-import { configureStore } from '@reduxjs/toolkit';
+import { configureStore,Tuple } from '@reduxjs/toolkit';
 import rootReducer from './reducers/rootReducer';
 import sessionStorage from 'redux-persist/es/storage/session'
 import { persistReducer, persistStore } from 'redux-persist';
+import { thunk } from 'redux-thunk'
 
 
 const persistConfig={
@@ -12,8 +13,9 @@ const persistConfig={
 const persistState=persistReducer(persistConfig, rootReducer)
 
 const store = configureStore({
-  reducer: persistState,
-});
+  reducer: persistState,middleware:()=>new Tuple(thunk)
+},
+);
 
 export const  persistor = persistStore(store);