commited profile page

src/App.js

@@ -6,6 +6,7 @@ import Viewreportee from './pages/viewReportee';
 import './App.css';
 import PageNotFound from './pages/pagenotfound/PageNotFound';
 import Exporttable from './pages/reportexport'
+import AdminProfile from './pages/adminProfile';
 
 function App() {
   return (
@@ -15,6 +16,8 @@ function App() {
         <Route path="/dashboard" element={<Layout><Dashboard/></Layout>}/>
         <Route path="/viewreportee" element={<Layout><Viewreportee/></Layout>}/>
         <Route path="/reportees" element={<Layout><Exporttable/></Layout>}/>
+        <Route path="/adminProfile" element={<Layout><AdminProfile/></Layout>}/>
+
         <Route path="/*" element={<PageNotFound/>}/>
       </Routes>
     </BrowserRouter>

src/assets/icons/adminProfileIcon.js

+import React from "react";
+
+function AdminProfileIcon() {
+  return (
+    <svg
+    className="size-4"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    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" />
+  </svg>
+  );
+}
+
+export default AdminProfileIcon;

src/components/sidebar/index.jsx

+// import React from "react";
+// import { Link, useParams } from "react-router-dom";
+// import SetWindowSize from '../../utils/SetWindowSize';
+// import DashboardIcon from '../../assets/icons/dashboardIcon';
+// import ReportsIcon from '../../assets/icons/reportsIcon';
+
+// const menus = [
+//   {title: "Dashboard", path: '/dashboard', selectPaths: ['dashboard', 'viewreportee'], icon: <DashboardIcon/> },
+//   {title: "Reports", path: '/reportees', selectPaths:['reportees'], icon: <ReportsIcon />}
+// ]
+
+// function Sidebar() {
+//   const url = window.location.href;
+//   const  [windowWidth, windowHeight] = SetWindowSize();
+//   const selected = url.split('/').at(-1)
+
+//   return (
+//     <div className="w-[20%] flex 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"
+//         data-hs-accordion-always-open
+//       >
+//         <ul className="space-y-1.5">
+//           {
+//             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 `}
+//                 to={menu.path}
+//               >
+//                 <span>{menu.icon}</span>
+//                 {menu.title}
+//               </Link>
+//             </li>
+//             ))
+//           }
+          
+//         </ul>
+//       </nav>
+//     </div>
+//   );
+// }
+
+// export default Sidebar;
 import React from "react";
 import { Link, useParams } from "react-router-dom";
 import SetWindowSize from '../../utils/SetWindowSize';
 import DashboardIcon from '../../assets/icons/dashboardIcon';
 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: "Reports", path: '/reportees', selectPaths:['reportees'], icon: <ReportsIcon />}
+  { title: "Dashboard", path: '/dashboard', selectPaths: ['dashboard', 'viewreportee'], icon: <DashboardIcon /> },
+  { title: "Reports", path: '/reportees', selectPaths:['reportees'], icon: <ReportsIcon /> },
+  // Add Admin Profile menu item
+  { title: "Admin Profile", path: '/adminProfile', selectPaths: ['adminProfile'], icon: <AdminProfileIcon /> },
 ]
 
 function Sidebar() {

src/pages/adminProfile/index.jsx

+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { fetchUser } from "../../redux/reducers/userSlice";
+import { scoreColor } from "../../utils/commonFunctions";
+import Tabs from "./tabs";
+
+const AdminProfile = () => {
+    const dispatch = useDispatch();
+    const { user, loading, error } = useSelector((state) => state.userDetails); // Get user data from Redux store
+
+
+
+    if (loading) return <div>Loading...</div>;
+    if (error) return <div>Error: {error}</div>;
+
+    return (
+
+
+
+        <div className="p-4" >
+            <div className="bg-white p-3 rounded-md">
+                <div className="flex justify-between">
+
+                    {user && (
+                        <div className="flex items-center">
+                            <div>
+                                <p className="font-medium mb-2">
+                                    Employee Name
+                                </p>
+                                <p className="font-medium">
+                                    Employee 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>
+                            </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>
+                        <div className="">
+                            <span className="text-blue-400 font-semibold">Total Score</span>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+            <div className="mt-10">
+                < Tabs />
+            </div>
+
+
+        </div>
+
+
+    );
+};
+
+export default AdminProfile;

src/pages/adminProfile/tabs.jsx

+import React, { useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import {fetchReporteeActivities} from '../../redux/reducers/viewreporteeSlice'
+import Accordion from "../../components/accordion";
+import profileSlice from "../../redux/reducers/profileSlice";
+
+
+const Tabs = () => {
+
+    const [index, setIndex] = useState(0);
+    const dispatch = useDispatch();
+    const { reports, loading, error, dutiesReports, initiativeReports } = useSelector((state) => state.reports);
+    const {reportees, viewReportee,currPage, reporteeId } = useSelector((state) => state.reportees);
+
+    const fetchActivities = (type) => {
+        const data ={
+          empId:viewReportee?.empId, 
+          types:[type], 
+          page: 1,
+          perPage: 5
+        }
+        dispatch(fetchReporteeActivities(data))
+      }
+
+    console.log(fetchActivities)
+
+    return (
+        <>
+
+
+
+            <div className="text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 ">
+                <ul className="flex flex-wrap -mb-px">
+
+                    <li className="me-2" onClick={()=>{}}>
+                        <button onClick={()=>{setIndex(0); fetchActivities('duties')}} className="inline-block p-4 text-blue-600 border-b-2 border-blue-600  dark:text-blue-500 " >Duties</button>
+                    </li>
+                    <li className="me-2">
+                        <button onClick={()=>{setIndex(index+1); fetchActivities('initiative')}} className="inline-block p-4 border-b-2 border-transparent  hover:text-gray-600 hover:border-gray-300 " >Initiatives</button>
+                    </li>
+
+                </ul>
+                
+                {index === 0 ? <div>
+                    {/* <Accordion data={dutiesReports} /> */}
+                    Duties
+                </div> : <div>
+                    <p>Intiatives </p>
+                </div>}
+
+
+
+
+
+            </div>
+
+
+        </>
+    )
+
+}
+
+export default Tabs;
\ No newline at end of file

src/pages/dashboard/index.jsx

@@ -63,6 +63,7 @@ function Dashboard() {
   }, [userDetails]);
 
   useEffect(() => {
+    debugger
    if(inputValue!==null){
     const debounceTimeout = setTimeout(() => {
       const data = {

src/pages/home/index.jsx

@@ -6,6 +6,7 @@ import { loginUser } from "../../redux/reducers/userSlice";
 import {useDispatch,useSelector} from 'react-redux'
 
 function Home() {
+  debugger
   const inputRef = useRef(null);
   const navigate = useNavigate();
   const dispatch=useDispatch()
@@ -16,6 +17,7 @@ function Home() {
  
 
   const handleSubmit = async (e) => {
+    debugger
     e.preventDefault();
     setLoading(true)
     if(id!==null){
@@ -35,10 +37,12 @@ function Home() {
 
   };
   useEffect(()=>{
+    debugger
      setLoading(false)
      inputRef.current.focus();
   },[])
   useEffect(()=>{
+    debugger
     if (userDetails?.user!=null)
     navigate("/dashboard")
     else
@@ -46,6 +50,7 @@ function Home() {
   },[userDetails])
 
   return (
+  
     <div className="container py-10 px-10 mx-0 min-w-full h-screen flex items-center justify-center bg-blue-100 ">
       <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>

src/pages/pagenotfound/PageNotFound.jsx

@@ -3,7 +3,7 @@ import React, { memo } from 'react';
 const PageNotFound = memo(() => {
     return (
         <div className="w-full h-full ">
-            <p className="text-center align-middle pt-14 pb-14 text-red-500 text-3xl font-bold">Page Not Found</p>
+            <p className="text-center align-middle pt-14 pb-14 text-red-500 text-3xl font-bold">Page Not Found54</p>
         </div>
     );
 });

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/viewReportee/index.jsx

@@ -9,6 +9,7 @@ import {scoreColor} from '../../utils/commonFunctions';
 
 
 function Viewreportee() {
+  debugger
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const {reportees, viewReportee,currPage, reporteeId } = useSelector((state) => state.reportees);
@@ -171,4 +172,5 @@ function Viewreportee() {
 }
 
 
+
 export default Viewreportee;

src/redux/reducers/actions.js

+// // actions.js
+// export const FETCH_EMPLOYEE_REQUEST = 'FETCH_EMPLOYEE_REQUEST';
+// export const FETCH_EMPLOYEE_SUCCESS = 'FETCH_EMPLOYEE_SUCCESS';
+// export const FETCH_EMPLOYEE_FAILURE = 'FETCH_EMPLOYEE_FAILURE';
+
+// // actions.js
+// export const fetchEmployeeRequest = () => ({
+//     type: FETCH_EMPLOYEE_REQUEST
+//   });
+  
+//   export const fetchEmployeeSuccess = (data) => ({
+//     type: FETCH_EMPLOYEE_SUCCESS,
+//     payload: data
+//   });
+  
+//   export const fetchEmployeeFailure = (error) => ({
+//     type: FETCH_EMPLOYEE_FAILURE,
+//     payload: error
+//   });
+  
\ No newline at end of file

src/redux/reducers/profileSlice.js

+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import axiosApi from '../../api/axiosConfig'
+
+const initialState = {
+  reports: null,
+  dutiesReports: null,
+  initiativeReports: null,
+ 
+  loading: false,
+  error: null,
+};
+
+export const fetchProfileReporteeActivities = createAsyncThunk("getReports", async (data) => {
+  return await axiosApi
+    .post(`/getActivities`, data)
+    .then((response) => {return {data:response.data?.activities, type:data.types}});
+});
+
+
+
+const reportSlice = createSlice({
+  name: "reportees",
+  initialState,
+  reducers: {
+    resetReports:() => {
+      return initialState
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchProfileReporteeActivities.pending, (state) => {
+      return {...state,loading :true,error :"loading"}
+    });
+    builder.addCase(fetchProfileReporteeActivities.fulfilled, (state, action) => {
+      const {data, type} = action.payload;
+      return {...state,loading :false,error :"", [`${type[0]}Reports`]: data}
+    });
+    builder.addCase(fetchProfileReporteeActivities.rejected, (state, action) => {
+      return {...state,loading :false,error :action.error || "Something went wrong!",reports:null}
+    });
+
+  
+  },
+});
+
+export const {resetReports} = reportSlice.actions;
+
+export default reportSlice.reducer;