Added-modal

src/components/accordion/accordionTable.jsx

+import React from "react";
+import moment from "moment";
+
+function AccordionTable({ headers, data }) {
+  const getDate = (utc) => {
+    const utcDate = new Date(utc);
+    const localTime = utcDate.toLocaleString();
+    return moment(localTime).format("DD-MM-YY");
+  };
+  return (
+    <div className="p-4">
+      <table className="border-2 border-collapse w-full border-[#B7B7B7]">
+        <thead>
+          <tr>
+            {headers?.map(({ title, width }) => (
+              <th
+                className={`border-2 p-2 border-[#B7B7B7] text-start font-medium bg-[#D9D9D9] w-[${width}]`}
+              >
+                {title}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data?.map((item) => (
+            <tr>
+              {headers?.map((header) => (
+                <td
+                  className={`border-2 p-2 border-[#B7B7B7] bg-${
+                    header.id === "aName" ? "[#D9D9D9]" : "white"
+                  }`}
+                >
+                  {header?.id === "recorded_date" ? (
+                    <span>{getDate(item[header?.id])}</span>
+                  ) : (
+                    <span>{item[header?.id]}</span>
+                  )}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default AccordionTable;

src/components/accordion/index.jsx

+import React, { useState } from "react";
+import AccordionTable from "./accordionTable";
+import ModalButton from "../modal/modalButton";
+
+function Accordion({ title, data }) {
+  const [open, setOpen] = useState(false);
+
+  const headers = [
+    { title: "Name", id: "aName", width: "30%" },
+    { title: "Date", id: "recorded_date", width: "20%" },
+    { title: "Score", id: "score", width: "10%" },
+    { title: "Comments", id: "comments", width: "40%" },
+  ];
+  return (
+    <div className="px-4">
+      <button
+        onClick={() => setOpen(!open)}
+        type="button"
+        className="flex items-center justify-between w-full py-2 px-5 mt-4 font-medium rtl:text-right bg-[#B7B7B7] 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"
+      >
+        <span>{title}</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"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M9 5 5 1 1 5"
+          />
+        </svg>
+      </button>
+      <div
+        className={`${!open && "hidden"} mt-2`}
+        aria-labelledby="accordion-collapse-heading-2"
+      >
+        <AccordionTable headers={headers} data={data} />
+        <div className="flex justify-end mr-4">
+             <ModalButton type={`${title === "Default Activities:" ? "default" : "initiative"}`}/>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Accordion;

src/components/header/index.jsx

 import React from 'react';
-import {useNavigate} from 'react-router-dom';
-import { useDispatch } from 'react-redux';
+import {useNavigate, Link } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
 import clearStore from '../../utils/clearStore';
 
 function Header() {
     const dispatch = useDispatch();
-    const navigate = useNavigate()
+    const navigate = useNavigate();
+    const userDetails = useSelector((state) => state.userDetails.user);
+
     const handleLogout = () => {
         navigate('/');
         clearStore(dispatch)
     }
+
     return (
         <div className="flex items-center justify-between py-5 px-10">
             <img src="/logo.png"/>
+            <div className="w-[23%]">
+                <Link to={`/${userDetails?.empId}/dashboard`}><button className="pr-10 hover:text-blue-400">Home</button></Link>
+                <Link><button className="hover:text-blue-400">Reports</button></Link>
+            </div>
             <div className="flex items-center">
                 <img src="/power-button.png" width="30px" height="30px"/>
                 <button className="ml-2 -mt-1 text-2xl" onClick={handleLogout}>

src/components/modal/index.jsx

@@ -40,12 +40,9 @@ export default function MyModal({ visible, onClose ,type}) {
   useEffect(()=>{handleScoreChange(activityData.score)},[scoreType])
 
   useEffect(() => {
-    console.log("activityData changed:", activityData);
-    if (activityData.aName !== "" && activityData.aId !== "" && activityData.comments !== "" && activityData.score != 0 || -0) {
-      console.log("All conditions met. Enabling submit button.");
+    if (activityData.aName !== "" && activityData.aId !== ""  && activityData.score != 0 || -0) {
       setEnableSubmit(true);
     } else {
-      console.log("Some conditions not met. Disabling submit button.");
       setEnableSubmit(false);
     }
   }, [activityData]);

src/components/sidebar/index.jsx

 import React from "react";
+import {Link} from 'react-router-dom';
 import { useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
 
@@ -6,12 +7,13 @@ import { useParams } from "react-router-dom";
 function Sidebar() {
     const user = useSelector((state) => state.userDetails.user);
     const reportees = useSelector((state) => state.reportees.reportees);
-    const url = window.location.href
+    const url = window.location.href;
+    const {id} = useParams()
 
   return (
     <div className="w-[30%] flex items-center flex-col px-4">
       <div>
-        <img src="/user.png" width="130px" height="130px" />
+        <img src="/generic-male-avatar-rectangular.jpg" width="130px" height="130px" />
       </div>
       <div className="flex items-center flex-col mt-5">
         <p className="text-lg font-semibold">{user.empName}</p>
@@ -20,14 +22,14 @@ function Sidebar() {
       {
         url.includes('/reports') && <div className="mt-5 border-t-2 border-gray-300 w-[-webkit-fill-available] flex flex-col ">
         <p className="text-xl text-blue-400 font-semibold pl-4 mt-3">My Project Allocations</p>
-        <div className="p-2 bg-[#E9EDEE] mt-4 max-h-[50vh] overflow-auto">
+        <div className="p-2 bg-[#E9EDEE] mt-4 max-h-[49vh] overflow-auto">
           {
             reportees?.map(({empName, score, empId}) => (
-              <div className="flex items-center bg-white p-2 justify-between mb-1" key={empId}>
-                  <img src="/man.png" width="18px" height="18px" />
-                  <p className="w-[80%]">{empName}</p>
-                  <p className="w-[10%] bg-blue-200 rounded-sm text-center">{score}</p>
-              </div>
+                <Link to={`/${empId}/reports`} className={`flex items-center bg-${Number(id) === empId ? "indigo-400" : "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-[10%] bg-blue-200 rounded-sm text-center">{score}</p>
+                </Link>
             ))
           }
         </div>

src/components/table/index.jsx

@@ -3,7 +3,7 @@ import {Link} from 'react-router-dom';
 
 function Table({headers, data, isView}) {
   return (
-    <div className="relative overflow-x-auto shadow-md sm:rounded-lg p-3">
+    <div className="relative overflow-x-auto sm:rounded-lg p-3">
       <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 bg-transparent justify-center">
         <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400 ">
           <tr>
@@ -19,15 +19,17 @@ function Table({headers, data, isView}) {
                 data?.map((item, index) => (
                     <tr className="bg-white border-b-8 dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                         {headers?.map((field) => (
-                            field.id !== "action" ?<td className="px-6 py-4 listData" >{field.id==="empName"?<span className="flex items-center"><img className="pr-2" src="/user.png" width="30px" height="30px"/>{item[field.id]}</span> :item[field.id]}</td> : <td className="px-6 py-3 border-l-2"><Link to={`/${item.empId}/reports`}><button type="button" className="bg-blue-400 text-white rounded-md px-3 py-1">View</button></Link></td>
+                            field.id !== "action" ?<td className="px-6 py-4 listData" >{field.id==="empName"?<span className="flex items-center"><img className="pr-2" src="/man.png" width="30px" height="30px"/>{item[field.id]}</span> :item[field.id]}</td> : <td className="px-6 py-3 border-l-2"><Link to={`/${item.empId}/reports`}><button type="button" className="bg-blue-400 text-white rounded-md px-3 py-1">View</button></Link></td>
                         ))}
                         
                     </tr>
                 ))
             }
-
         </tbody>
       </table>
+      <div className={`w-full h-[30vh] justify-center bg-white mt-3 flex items-center rounded ${data?.lenght !== 0 && 'hidden'}`}>
+        <p className="text-lg">Reportees not assigned</p>
+      </div>
     </div>
   );
 }

src/pages/reports/index.jsx

-import React, {useState, useEffect} from 'react';
-import { useSelector,useDispatch } from 'react-redux';
-import { useParams } from 'react-router';
+import React, { useState, useEffect, useMemo } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { useParams } from "react-router";
 import { fetchReports } from "../../redux/reducers/reportSlice";
-import ModalButton from '../../components/modal/modalButton';
+import Accordion from "../../components/accordion";
 
 function Reports() {
-    const {id} = useParams();
-    const dispatch = useDispatch();
-    const reportees = useSelector((state) => state.reportees.reportees);
-    const [empDetails, setEmpDetails] = useState(null);
-    const { report, loading, error}=useSelector((state)=>state.reports)
+  const { id } = useParams();
+  const dispatch = useDispatch();
+  const reportees = useSelector((state) => state.reportees.reportees);
+  const [empDetails, setEmpDetails] = useState(null);
+  const { reports } = useSelector((state) => state.reports);
 
-    /*Example post data
+  /*Example post data
 {
     "empId":41689,
     "fromDate":"2024-03-10",
     "toDate":"2024-03-11"
 }
 */
+  const activities = useMemo(() => {
+    if(reports !== undefined) {
+        const filtered = Object.groupBy(reports, ({ type }) => type);
+    return filtered;
+    }
+  }, [reports]);
 
     useEffect(() => {
         if(id) {
@@ -35,13 +41,49 @@ function Reports() {
         })
     },[id]);
 
-    return (
-
-        <div>This Perots
-            <ModalButton type={"default"}/>
+  return (
+    <div className="p-4">
+      <div className="flex bg-white p-3">
+        <div className="w-[25%]">
+          <img src="/generic-male-avatar-rectangular.jpg" width="100px" height="100px" />
+          <div>
+            <p className="text-lg font-medium mt-1">{empDetails?.empName}</p>
+            <p>{empDetails?.designation}</p>
+          </div>
+        </div>
+        <div className="flex flex-col w-[85%]">
+          <div className="flex py-4">
+            <p className="w-[23%]">
+              <span className="font-medium">Email Id: </span>Null
+            </p>
+            <p className="w-[23%]">
+              <span className="font-medium">Emp.Id: </span>
+              {empDetails?.empId}
+            </p>
+            <p className="w-[23%]">
+              <span className="font-medium">Experience: </span>Null
+            </p>
+            <p className="w-[23%]">
+              <span className="font-medium">Scorecard: </span>
+              {empDetails?.score}
+            </p>
+          </div>
+          <div className="flex">
+            <p className="w-[23%]">
+              <span className="font-medium">Joining Date: </span>Null
+            </p>
+            <p className="w-[23%]">
+              <span className="font-medium">Technologies Know: </span>Null
+            </p>
+          </div>
         </div>
-        
-    )
+      </div>
+      <div className="max-h-[60vh] overflow-auto">
+        <Accordion title="Default Activities:" data={activities?.default} />
+        <Accordion title="Initiatives:" data={activities?.initiatives} />
+      </div>
+    </div>
+  );
 }
 
-export default Reports
+export default Reports;