routing chages

src/App.js

@@ -13,10 +13,15 @@ function App() {
     <BrowserRouter>
       <Routes>
         <Route path='/' element={<Home />}/>
-        <Route path="/dashboard" element={<Layout><Dashboard/></Layout>}/>
+        {/* profile  page */}
+        <Route path="/dashboard" element={<Layout><AdminProfile/></Layout>}/>
+         {/* reportees  page */}
+         <Route path="/myreportees" element={<Layout><Dashboard/></Layout>}/>
+          {/*adding activities*/}
         <Route path="/viewreportee" element={<Layout><Viewreportee/></Layout>}/>
+         {/* fetch reports */}
         <Route path="/reportees" element={<Layout><Exporttable/></Layout>}/>
-        <Route path="/adminProfile" element={<Layout><AdminProfile/></Layout>}/>
+       
 
         <Route path="/*" element={<PageNotFound/>}/>
       </Routes>

src/components/sidebar/index.jsx

@@ -50,10 +50,9 @@ import ReportsIcon from '../../assets/icons/reportsIcon';
 import AdminProfileIcon from '../../assets/icons/adminProfileIcon'; // Assuming you have an icon for Admin Profile
 
 const menus = [
-  { title: "Dashboard", path: '/dashboard', selectPaths: ['dashboard', 'viewreportee'], icon: <DashboardIcon /> },
+  { title: "Dashboard", path: '/dashboard', selectPaths: ['dashboard'], icon: <DashboardIcon /> },
+  { title: "My Reportees", path: '/myreportees', selectPaths: ['myreportees', 'viewreportee'], icon: <ReportsIcon /> },
   { title: "Reports", path: '/reportees', selectPaths:['reportees'], icon: <ReportsIcon /> },
-  // Add Admin Profile menu item
-  { title: "Admin Profile", path: '/adminProfile', selectPaths: ['adminProfile'], icon: <AdminProfileIcon /> },
 ]
 
 function Sidebar() {
@@ -62,9 +61,9 @@ function Sidebar() {
   const selected = url.split('/').at(-1)
 
   return (
-    <div className="w-[20%] flex items-center flex-col overflow-auto" style={{ height: `calc(${windowHeight}px - 87px)` }}>
+    <div className="w-[20%] flex bg-blue-700 text-white items-center flex-col overflow-auto" style={{ height: `calc(${windowHeight}px - 87px)` }}>
       <nav
-        className="hs-accordion-group p-6 w-full flex flex-col flex-wrap"
+        className="hs-accordion-group mt-1 w-full flex flex-col flex-wrap"
         data-hs-accordion-always-open
       >
         <ul className="space-y-1.5">
@@ -72,11 +71,11 @@ function Sidebar() {
             menus.map((menu) => (
               <li key={menu.path}>
                 <Link
-                  className={`flex items-center ${menu.selectPaths.includes(selected) && 'bg-gray-100'} gap-x-3.5 py-2 px-2.5  text-sm text-slate-700 rounded-lg hover:bg-gray-100 `}
+                  className={`flex  ${menu.selectPaths.includes(selected) && 'bg-blue-500 ' } gap-x-3.5 py-2 lg:px-5 min-sm:px-4  text-sm text-slate-700  hover:bg-blue-500 text-white`}
                   to={menu.path}
                 >
-                  <span>{menu.icon}</span>
-                  {menu.title}
+                  <p className="flex items-center">{menu.icon}  <span className="ps-2"> {menu.title}</span></p>
+                 
                 </Link>
               </li>
             ))

src/components/table/index.jsx

@@ -59,10 +59,10 @@ function Table({headers, data,loading, handleSorting }) {
   if(loading) return <Loading/>
   else
   return (
-    <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 bg-transparent justify-center border-separate border-spacing-y-2">
-        <thead className="text-xs text-gray-700 uppercase bg-gray-50">
-          <tr className="mb-2">
+    <div className={` overflow-auto sm:rounded-lg p-4 `}>
+      <table className="w-full text-sm text-left rtl:text-right  bg-transparent justify-center ">
+        <thead className="  uppercase bg-white font-extrabold">
+          <tr className="mb-2 border-2 border-black-200">
             {headers?.map((item,index) => (
               <th key={index} scope="col" className={`px-6 py-4 w-[${item.width}]`} > 
                 { item.renderHeader ? item.renderHeader(item.title) : item.isSorting ? 
@@ -80,7 +80,7 @@ function Table({headers, data,loading, handleSorting }) {
        (data?.length)?<tbody >
          {
            data?.map((item, index) => (
-               <tr key={item.id} className="bg-white  hover:bg-gray-300 " >
+               <tr key={item.id} className="bg-[#eef5ff] font-medium hover:bg-white " >
                    {
                      headers?.map(({render, id}) => (
                        <td className="px-6 py-2 "  >

src/pages/adminProfile/index.jsx

@@ -6,8 +6,8 @@ import Tabs from "./tabs";
 
 const AdminProfile = () => {
     const dispatch = useDispatch();
-    const { user,error,loading } = useSelector((state) => state.userDetails); // Get user data from Redux store
-  
+    const { user, error, loading } = useSelector((state) => state.userDetails); // Get user data from Redux store
+
     if (loading) return <div>Loading...</div>;
     if (error) return <div>Error: {error}</div>;
 
@@ -18,50 +18,58 @@ const AdminProfile = () => {
         <div className="p-4" >
             <div className="bg-white p-3 rounded-md">
                 <div className="flex justify-between">
-
-                    {user && (
+                    {user && (<>
                         <div className="flex items-center">
                             <div>
                                 <p className="font-medium mb-2">
                                     Employee Name
                                 </p>
-                                <p className="font-medium">
+                                <p className="font-medium mb-2">
                                     Employee Id
                                 </p>
+                                <p className="font-medium">
+                                    Email Id
+                                </p>
                             </div>
                             <div>
                                 <p className="mb-2"><span className="font-medium">:</span> {user.empName}</p>
-                                <p><span className="font-medium">:</span> {user.empId}</p>
+                                <p className="mb-2"><span className="font-medium">:</span> {user.empId}</p>
+                                <p><span className="font-medium">:</span> {user.empEmail}</p>
                             </div>
                         </div>
-                    )}
-
-                    <div className="flex items-center">
-                        <div>
-                            <p className="font-medium mb-2">
-                                Designation
-                            </p>
-                            <p className="font-medium">
-                                Role
-                            </p>
-                        </div>
-                        <div>
-                            <p className="mb-2"><span className="font-medium">:</span> {user.designation}</p>
-                            <p><span className="font-medium">:</span> {user.techStack}</p>
-                        </div>
-                    </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  ${scoreColor(user.score)}`}>
-                            <span className="text-lg font-bold">{user.score}</span>
+                        <div className="flex items-center">
+                            <div>
+                                <p className="font-medium mb-2">
+                                    Designation
+                                </p>
+                                <p className="font-medium mb-2">
+                                    Role
+                                </p>
+                                <p className="font-medium">
+                                    Project
+                                </p>
+                            </div>
+                            <div>
+                                <p className="mb-2"><span className="font-medium">:</span> {user.designation}</p>
+                                <p className="mb-2"><span className="font-medium">:</span> {user.techStack}</p>
+                                <p><span className="font-medium">:</span> {user.project}</p>
+                            </div>
                         </div>
-                        <div className="">
-                            <span className="text-blue-400 font-semibold">Total Score</span>
+                        <div className="flex flex-col justify-center items-center">
+                            <div className={`w-[40px] h-[40px] rounded-full flex items-center text-white justify-center  ${scoreColor(user.score)}`}>
+                                <span className="text-lg font-bold">{user.score}</span>
+                            </div>
+                            <div className="">
+                                <span className="text-blue-400 font-semibold">Total Score</span>
+                            </div>
                         </div>
-                    </div>
+                    </>
+                    )}
+    
                 </div>
 
             </div>
-            <div className="mt-10">
+            <div className="mt-1">
                 < Tabs />
             </div>
 

src/pages/adminProfile/tabs.jsx

@@ -8,11 +8,8 @@ import Loading from "../../components/loading Component/Loading";
 const Tabs = () => {
   const [index, setIndex] = useState(0);
   const dispatch = useDispatch();
-  const { reports, loading, error, dutiesReports, initiativeReports } =
-    useSelector((state) => state.reports);
+  const { loading, error, dutiesReports, initiativeReports } =useSelector((state) => state.reports);
   const { user } = useSelector((state) => state.userDetails);
-//   console.log(dutiesReports);
-//   console.log(initiativeReports);
   const fetchActivities = (type) => {
     const data = {
       empId: user?.empId,
@@ -20,7 +17,6 @@ const Tabs = () => {
       page: 1,
       perPage: 5,
     };
-    console.log(data);
     dispatch(fetchProfileReporteeActivities(data));
   };
   useEffect(() => {
@@ -64,7 +60,10 @@ const Tabs = () => {
                 setIndex(0);
                 fetchActivities("duties");
               }}
-              className="inline-block p-4 text-blue-600 border-b-2 border-blue-600  dark:text-blue-500 "
+              className={`inline-block p-4 border-b-2 border-blue-600 ${index === 0
+                ? 'text-blue-600'
+                : 'border-transparent hover:text-blue-300 hover:border-blue-300'
+                }`} 
             >
               Duties
             </button>
@@ -75,7 +74,10 @@ const Tabs = () => {
                 setIndex(index + 1);
                 fetchActivities("initiative");
               }}
-              className="inline-block p-4 border-b-2 border-transparent  hover:text-gray-600 hover:border-gray-300 "
+              className={`inline-block p-4 border-b-2  border-blue-600 ${index >0
+                ? 'text-blue-600'
+                : 'border-transparent hover:text-blue-300 hover:border-blue-300'
+              }`}
             >
               Initiatives
             </button>

src/pages/layout/index.jsx

@@ -17,7 +17,7 @@ function Layout({children}) {
             <Header isOpen={isOpen} />
             <div className="flex pt-[85px]">
                 <Sidebar/>
-                <div className="bg-[#E9EDEE] w-full overflow-auto" style={{ height: `calc(${windowHeight}px - 87px)` }}>
+                <div className="bg-[#fafafb] w-full overflow-auto" style={{ height: `calc(${windowHeight}px - 87px)` }}>
                     {children}
                 </div>
                 {url.includes('/viewreportee') && <LeftSidebar/>}

src/pages/reportexport/App.jsx

-import React from 'react'
-
-function Exporttable() {
-  return (
-    <div>
-        Exporttable
-    </div>
-  )
-}
-
-export default Exporttable;
\ No newline at end of file

src/pages/reportexport/styles.js

 export const styles = {
-  genarateReportContainer: "overflow-auto sm:rounded-lg p-4 bg-[#E9EDEE] ",
+  genarateReportContainer: "overflow-auto sm:rounded-lg p-4 bg-gray-50 ",
   textBlueHeading: "text-blue-800 py-3 pl-2 text-center fond-bold text-2xl",
   formContainer: "p-2 text-[12px] mb-4",
   flexContainer: "flex items-center justify-between",