From 50f48d27f2ec3a8e3550494e157882a7fed4994c Mon Sep 17 00:00:00 2001
From: Vikas Nale <vikas@marcoaiot.com>
Date: Wed, 7 May 2025 15:53:03 +0530
Subject: [PATCH] Handle menu navigation from shortcut so that smoot navigation
 happens and page does not reload

---
 src/components/Employee/EmployeeNav.jsx |   9 +-
 src/components/Layout/Header.jsx        |  74 ++++++----
 src/pages/employee/EmployeeProfile.jsx  | 176 +++++++++++++++---------
 3 files changed, 163 insertions(+), 96 deletions(-)

diff --git a/src/components/Employee/EmployeeNav.jsx b/src/components/Employee/EmployeeNav.jsx
index f9c12961..32c94b20 100644
--- a/src/components/Employee/EmployeeNav.jsx
+++ b/src/components/Employee/EmployeeNav.jsx
@@ -5,8 +5,7 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
     <div className="col-md-12">
       <div className="nav-align-top ">
         <ul className="nav nav-tabs">
-
-        <li className="nav-item">
+          <li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
             <a
               className={`nav-link py-1 px-2 small ${
                 activePill === "attendance" ? "active" : ""
@@ -20,7 +19,7 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
               <i className="bx bx-group bx-sm me-1_5"></i> Attendances
             </a>
           </li>
-          <li className="nav-item">
+          <li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
             <a
               className={`nav-link py-1 px-2 small  ${
                 activePill === "account" ? "active" : ""
@@ -34,8 +33,8 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
               <i className="bx bx-user bx-sm me-1_5"></i> Documents
             </a>
           </li>
-       
-          <li className="nav-item">
+
+          <li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
             <a
               className={`nav-link py-1 px-2 small ${
                 activePill === "activities" ? "active" : ""
diff --git a/src/components/Layout/Header.jsx b/src/components/Layout/Header.jsx
index 712f1efa..a0568c1c 100644
--- a/src/components/Layout/Header.jsx
+++ b/src/components/Layout/Header.jsx
@@ -54,7 +54,7 @@ const Header = () => {
   };
 
   const handleProfilePage = () => {
-    navigate(`/employee/${profile?.employeeInfo?.id}?for=account`);
+    navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`);
   };
   return (
     <nav
@@ -120,7 +120,7 @@ const Header = () => {
               className="nav-link dropdown-toggle hide-arrow"
               href="#;"
               data-bs-toggle="dropdown"
-              data-bs-auto-close="outside"
+              data-bs-auto-close="true"
               aria-expanded="false"
             >
               <i className="icon-base bx bx-grid-alt icon-md"></i>
@@ -143,39 +143,53 @@ const Header = () => {
               <div className="dropdown-shortcuts-list scrollable-container ps">
                 <div className="row row-bordered overflow-visible g-0">
                   <div className="dropdown-shortcuts-item col">
-                    <span className="dropdown-shortcuts-icon rounded-circle mb-3">
-                      <i className="icon-base bx bx-home icon-26px text-heading"></i>
-                    </span>
-                    <a href="/dashboard" className="stretched-link">
+                    <a
+                      onClick={() => navigate(`/dashboard`)}
+                      className="text-heading text-truncate cursor-pointer"
+                    >
+                      <span className="dropdown-shortcuts-icon rounded-circle mb-3">
+                        <i className="icon-base bx bx-home icon-26px text-heading"></i>
+                      </span>
                       Dashboard
                     </a>
+
                     <small>User Dashboard</small>
                   </div>
                   <div className="dropdown-shortcuts-item col">
-                    <span className="dropdown-shortcuts-icon rounded-circle mb-3">
-                      <i className="icon-base bx bx-building-house icon-26px text-heading"></i>
-                    </span>
-                    <a href="/projects" className="stretched-link">
+                    <a
+                      onClick={() => navigate(`/projects`)}
+                      className="text-heading text-truncate cursor-pointer"
+                    >
+                      <span className="dropdown-shortcuts-icon rounded-circle mb-3">
+                        <i className="icon-base bx bx-building-house icon-26px text-heading"></i>
+                      </span>
                       Projects
                     </a>
+
                     <small>Projects List</small>
                   </div>
                 </div>
                 <div className="row row-bordered overflow-visible g-0">
                   <div className="dropdown-shortcuts-item col">
-                    <span className="dropdown-shortcuts-icon rounded-circle mb-3">
-                      <i className="icon-base bx bxs-user-account icon-26px text-heading"></i>
-                    </span>
-                    <a href="/employees" className="stretched-link">
+                    <a
+                      onClick={() => navigate(`/employees`)}
+                      className="text-heading text-truncate cursor-pointer"
+                    >
+                      <span className="dropdown-shortcuts-icon rounded-circle mb-3">
+                        <i className="icon-base bx bxs-user-account icon-26px text-heading"></i>
+                      </span>
                       Employees
                     </a>
                     <small>Manage Employees</small>
                   </div>
                   <div className="dropdown-shortcuts-item col">
-                    <span className="dropdown-shortcuts-icon rounded-circle mb-3">
-                      <i className="icon-base bx bx-user-check icon-26px text-heading"></i>
-                    </span>
-                    <a href="/activities/attendance" className="stretched-link">
+                    <a
+                      onClick={() => navigate(`/activities/attendance`)}
+                      className="text-heading text-truncate cursor-pointer"
+                    >
+                      <span className="dropdown-shortcuts-icon rounded-circle mb-3">
+                        <i className="icon-base bx bx-user-check icon-26px text-heading"></i>
+                      </span>
                       Attendance
                     </a>
                     <small>Manage Attendance</small>
@@ -183,21 +197,29 @@ const Header = () => {
                 </div>
                 <div className="row row-bordered overflow-visible g-0">
                   <div className="dropdown-shortcuts-item col">
-                    <span className="dropdown-shortcuts-icon rounded-circle mb-3">
-                      <i className="icon-base bx bxs-wrench icon-26px text-heading"></i>
-                    </span>
-                    <a href="/activities/task" className="stretched-link">
+                    <a
+                      onClick={() => navigate(`/activities/task`)}
+                      className="text-heading text-truncate cursor-pointer"
+                    >
+                      <span className="dropdown-shortcuts-icon rounded-circle mb-3">
+                        <i className="icon-base bx bxs-wrench icon-26px text-heading"></i>
+                      </span>
                       Allocate Work
                     </a>
+
                     <small>Work Allocations</small>
                   </div>
                   <div className="dropdown-shortcuts-item col">
-                    <span className="dropdown-shortcuts-icon rounded-circle mb-3">
-                      <i className="icon-base bx bx-list-ul icon-26px text-heading"></i>
-                    </span>
-                    <a href="/activities/records" className="stretched-link">
+                    <a
+                      onClick={() => navigate(`/activities/records`)}
+                      className="text-heading text-truncate cursor-pointer"
+                    >
+                      <span className="dropdown-shortcuts-icon rounded-circle mb-3">
+                        <i className="icon-base bx bx-list-ul icon-26px text-heading"></i>
+                      </span>
                       Daily Work Log
                     </a>
+
                     <small>Daily Work Allocations</small>
                   </div>
                 </div>
diff --git a/src/pages/employee/EmployeeProfile.jsx b/src/pages/employee/EmployeeProfile.jsx
index 8bf3e7f5..a215bba0 100644
--- a/src/pages/employee/EmployeeProfile.jsx
+++ b/src/pages/employee/EmployeeProfile.jsx
@@ -3,9 +3,13 @@ import EmpProfile from "../../components/Employee/EmpProfile";
 import axios from "axios";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import EmployeeNav from "../../components/Employee/EmployeeNav";
-import { useSearchParams,useParams } from "react-router-dom";
+import { useSearchParams, useParams } from "react-router-dom";
 import { getCachedData } from "../../slices/apiDataManager";
-import { useEmployeeProfile, useEmployees, useEmployeesByProject } from "../../hooks/useEmployees";
+import {
+  useEmployeeProfile,
+  useEmployees,
+  useEmployeesByProject,
+} from "../../hooks/useEmployees";
 import { useSelector } from "react-redux";
 import EmployeeRepository from "../../repositories/EmployeeRepository";
 import { ComingSoonPage } from "../Misc/ComingSoonPage";
@@ -13,41 +17,33 @@ import { useNavigate } from "react-router-dom";
 import Avatar from "../../components/common/Avatar";
 import AttendancesEmployeeRecords from "./AttendancesEmployeeRecords";
 const EmployeeProfile = () => {
- 
-  const projectID = useSelector((store)=>store.localVariables.projectId)
-  const {employeeId} = useParams();
+  const projectID = useSelector((store) => store.localVariables.projectId);
+  const { employeeId } = useParams();
   // const {employee,loading} = useEmployeeProfile(employeeId)
-  const [loading,setLoading] = useState(true)
+  const [loading, setLoading] = useState(true);
 
-  const [SearchParams] = useSearchParams()
-  const tab = SearchParams.get( "for" )
+  const [SearchParams] = useSearchParams();
+  const tab = SearchParams.get("for");
   const [activePill, setActivePill] = useState(tab);
-  const[currentEmployee,setCurrentEmployee] = useState()
+  const [currentEmployee, setCurrentEmployee] = useState();
 
- 
   const handlePillClick = (pillKey) => {
     setActivePill(pillKey);
   };
 
- const fetchEmployeeProfile = async( employeeID ) =>
-  {
-    try
-    {
-      const resp = await EmployeeRepository.getEmployeeProfile( employeeID )
-      setCurrentEmployee( resp.data )
-      setLoading(false)
-      
-    } catch ( err )
-    {
-      setLoading(false)
-      
+  const fetchEmployeeProfile = async (employeeID) => {
+    try {
+      const resp = await EmployeeRepository.getEmployeeProfile(employeeID);
+      setCurrentEmployee(resp.data);
+      setLoading(false);
+    } catch (err) {
+      setLoading(false);
     }
- }
+  };
 
   useEffect(() => {
-    if ( employeeId )
-    {
-      fetchEmployeeProfile(employeeId)
+    if (employeeId) {
+      fetchEmployeeProfile(employeeId);
     }
   }, [employeeId]);
 
@@ -58,42 +54,40 @@ const EmployeeProfile = () => {
       case "attendance": {
         return (
           <>
-             <AttendancesEmployeeRecords employee={employeeId } />
-            
+            <AttendancesEmployeeRecords employee={employeeId} />
           </>
         );
       }
       case "dcoument": {
         return (
           <>
-            <ComingSoonPage/>
-        </>
+            <ComingSoonPage />
+          </>
         );
         break;
       }
       case "activities": {
         return (
           <>
-          <ComingSoonPage/>
-        </>
+            <ComingSoonPage />
+          </>
         );
         break;
       }
 
       default:
-        return   <>
-        <ComingSoonPage/>
-      </>;
+        return (
+          <>
+            <ComingSoonPage />
+          </>
+        );
     }
   };
 
- 
-
   if (loading) {
     return <div>Loading...</div>;
   }
 
- 
   return (
     <div className="container-xxl flex-grow-1 container-p-y">
       <Breadcrumb
@@ -123,75 +117,127 @@ const EmployeeProfile = () => {
                     </div>
                     <div className="w-100 d-flex flex-column justify-content-start">
                       <div className="mt-3 w-100">
-                        <h6 className="mb-2 text-muted text-start">Employee Info</h6>
+                        <h6 className="mb-2 text-muted text-start">
+                          Employee Info
+                        </h6>
                         <table className="table table-borderless mb-3">
                           <tbody>
                             <tr>
                               <td className="fw-medium text-start">Email:</td>
-                              <td className="text-start">{currentEmployee?.email || <em>NA</em>}</td>
+                              <td className="text-start">
+                                {currentEmployee?.email || <em>NA</em>}
+                              </td>
                             </tr>
                             <tr>
-                              <td className="fw-medium text-start">Phone Number:</td>
-                              <td className="text-start">{currentEmployee?.phoneNumber || <em>NA</em>}</td>
+                              <td className="fw-medium text-start">
+                                Phone Number:
+                              </td>
+                              <td className="text-start">
+                                {currentEmployee?.phoneNumber || <em>NA</em>}
+                              </td>
                             </tr>
                             <tr>
-                              <td className="fw-medium text-start">Emergency Contact Person:</td>
-                              <td className="text-start">{currentEmployee?.emergencyContactPerson || <em>NA</em>}</td>
+                              <td className="fw-medium text-start">
+                                Emergency Contact Person:
+                              </td>
+                              <td className="text-start">
+                                {currentEmployee?.emergencyContactPerson || (
+                                  <em>NA</em>
+                                )}
+                              </td>
                             </tr>
                             <tr>
-                              <td className="fw-medium text-start">Emergency Contact Number:</td>
-                              <td className="text-start">{currentEmployee?.emergencyPhoneNumber || <em>NA</em>}</td>
+                              <td className="fw-medium text-start">
+                                Emergency Contact Number:
+                              </td>
+                              <td className="text-start">
+                                {currentEmployee?.emergencyPhoneNumber || (
+                                  <em>NA</em>
+                                )}
+                              </td>
                             </tr>
 
                             <tr>
                               <td className="fw-medium text-start">Gender:</td>
-                              <td className="text-start">{currentEmployee?.gender || <em>NA</em>}</td>
+                              <td className="text-start">
+                                {currentEmployee?.gender || <em>NA</em>}
+                              </td>
                             </tr>
                             <tr>
-                              <td className="fw-medium text-start">Birth Date:</td>
-                              <td className="text-start">{currentEmployee?.birthDate ? new Date(currentEmployee.birthDate).toLocaleDateString() : <em>NA</em>}</td>
+                              <td className="fw-medium text-start">
+                                Birth Date:
+                              </td>
+                              <td className="text-start">
+                                {currentEmployee?.birthDate ? (
+                                  new Date(
+                                    currentEmployee.birthDate
+                                  ).toLocaleDateString()
+                                ) : (
+                                  <em>NA</em>
+                                )}
+                              </td>
                             </tr>
 
-
                             <tr>
-                              <td className="fw-medium text-start">Joining Date:</td>
-                              <td className="text-start">{currentEmployee?.joiningDate ? new Date(currentEmployee.joiningDate).toLocaleDateString() : <em>NA</em>}</td>
+                              <td className="fw-medium text-start">
+                                Joining Date:
+                              </td>
+                              <td className="text-start">
+                                {currentEmployee?.joiningDate ? (
+                                  new Date(
+                                    currentEmployee.joiningDate
+                                  ).toLocaleDateString()
+                                ) : (
+                                  <em>NA</em>
+                                )}
+                              </td>
                             </tr>
                             <tr>
-                              <td className="fw-medium text-start">Job Role:</td>
-                              <td className="text-start">{currentEmployee?.jobRole || <em>NA</em>}</td>
+                              <td className="fw-medium text-start">
+                                Job Role:
+                              </td>
+                              <td className="text-start">
+                                {currentEmployee?.jobRole || <em>NA</em>}
+                              </td>
                             </tr>
                             <tr>
                               <td className="fw-medium text-start">Address:</td>
-                              <td className="text-start">{currentEmployee?.currentAddress || <em>NA</em>}</td>
+                              <td className="text-start">
+                                {currentEmployee?.currentAddress || <em>NA</em>}
+                              </td>
                             </tr>
                           </tbody>
                         </table>
                       </div>
-                      <button className="btn btn-primary btn-block" onClick={() => navigate(`/employee/manage/${currentEmployee?.id}`)}>
+                      <button
+                        className="btn btn-primary btn-block"
+                        onClick={() =>
+                          navigate(`/employee/manage/${currentEmployee?.id}`)
+                        }
+                      >
                         Edit Profile
                       </button>
                     </div>
                   </div>
                 </div>
-
               </div>
             </div>
           </div>
         </div>
 
-      <div className="col-12 col-lg-8 order-2 order-lg-2 mb-4">
-        <div className="row">
-          <EmployeeNav onPillClick={handlePillClick} activePill={activePill} />
-        </div>
-        <div className="card">
-          <div className="row row-bordered g-0">
-            {renderContent()} 
+        <div className="col-12 col-lg-8 order-2 order-lg-2 mb-4">
+          <div className="row">
+            <EmployeeNav
+              onPillClick={handlePillClick}
+              activePill={activePill}
+            />
+          </div>
+          <div className="card">
+            <div className="row row-bordered g-0">{renderContent()}</div>
           </div>
         </div>
       </div>
     </div>
-    </div>
   );
 };