Created new layout for employee profile page

public/assets/css/core-extend.css

@@ -3,10 +3,6 @@
   --bs-nav-link-font-size: 0.7375rem;
 }
 
-.nav {
-  --bs-nav-link-font-size: 0.7375rem;
-}
-
 .card-header {
   padding: 0.5rem var(--bs-card-cap-padding-x);
 }

src/components/Employee/EmpAttendance.jsx

@@ -1,24 +1,30 @@
 import React, { useState, useEffect } from "react";
 import moment from "moment";
-import DateRangePicker from "../../components/common/DateRangePicker";
+import DateRangePicker from "../common/DateRangePicker";
 import { useDispatch, useSelector } from "react-redux";
 import { fetchEmployeeAttendanceData } from "../../slices/apiSlice/employeeAttendanceSlice";
 import usePagination from "../../hooks/usePagination";
-import Avatar from "../../components/common/Avatar";
+import Avatar from "../common/Avatar";
 import { convertShortTime } from "../../utils/dateUtils";
-import RenderAttendanceStatus from "../../components/Activities/RenderAttendanceStatus";
+import RenderAttendanceStatus from "../Activities/RenderAttendanceStatus";
-import AttendLogs from "../../components/Activities/AttendLogs";
+import AttendLogs from "../Activities/AttendLogs";
 import { useAttendanceByEmployee } from "../../hooks/useAttendance";
-import GlobalModel from "../../components/common/GlobalModel";
+import GlobalModel from "../common/GlobalModel";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
 
-const AttendancesEmployeeRecords = ({ employee }) => {
+const EmpAttendance = ({ employee }) => {
   const [attendances, setAttendnaces] = useState([]);
   const [selectedDate, setSelectedDate] = useState("");
   const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [attendanceId, setAttendanecId] = useState();
-  const {data =[],isLoading:loading,isFetching,error,refetch} = useAttendanceByEmployee(employee,dateRange.startDate, dateRange.endDate)
+  const {
+    data = [],
+    isLoading: loading,
+    isFetching,
+    error,
+    refetch,
+  } = useAttendanceByEmployee(employee, dateRange.startDate, dateRange.endDate);
   const dispatch = useDispatch();
 
   // const { data, loading, error } = useSelector(
@@ -75,16 +81,24 @@ const AttendancesEmployeeRecords = ({ employee }) => {
   const uniqueMap = new Map();
 
   [...group1, ...group2, ...group3, ...group4, ...group5].forEach((rec) => {
-    const date = moment(rec.checkInTime || rec.checkOutTime).format("YYYY-MM-DD");
+    const date = moment(rec.checkInTime || rec.checkOutTime).format(
+      "YYYY-MM-DD"
+    );
     const key = `${rec.employeeId}-${date}`;
     const existing = uniqueMap.get(key);
-    if (!existing || new Date(rec.checkInTime || rec.checkOutTime) > new Date(existing.checkInTime || existing.checkOutTime)) {
+    if (
+      !existing ||
+      new Date(rec.checkInTime || rec.checkOutTime) >
+        new Date(existing.checkInTime || existing.checkOutTime)
+    ) {
       uniqueMap.set(key, rec);
     }
   });
 
-  const sortedFinalList = [...uniqueMap.values()].sort((a, b) =>
+  const sortedFinalList = [...uniqueMap.values()].sort(
-    new Date(b.checkInTime || b.checkOutTime) - new Date(a.checkInTime || a.checkOutTime)
+    (a, b) =>
+      new Date(b.checkInTime || b.checkOutTime) -
+      new Date(a.checkInTime || a.checkOutTime)
   );
 
   const currentDate = new Date().toLocaleDateString("en-CA");
@@ -93,8 +107,6 @@ const AttendancesEmployeeRecords = ({ employee }) => {
     ITEMS_PER_PAGE
   );
 
- 
-
   const openModal = (id) => {
     setAttendanecId(id);
     setIsModalOpen(true);
@@ -103,24 +115,27 @@ const AttendancesEmployeeRecords = ({ employee }) => {
 
   return (
     <>
-     
-
       {isModalOpen && (
         <GlobalModel size="lg" isOpen={isModalOpen} closeModal={closeModal}>
           <AttendLogs Id={attendanceId} />
         </GlobalModel>
       )}
-      <div className="px-4 py-2 " style={{ minHeight: "500px" }}>
+      <div className="card px-4 mt-0 py-2 " style={{ minHeight: "500px" }}>
         <div
           className="dataTables_length text-start py-2 d-flex justify-content-between "
           id="DataTables_Table_0_length"
         >
           <div className="col-md-3 my-0 ">
-            <DateRangePicker onRangeChange={setDateRange} endDateMode="yesterday" />
+            <DateRangePicker
+              DateDifference="30"
+              onRangeChange={setDateRange}
+              endDateMode="today"
+            />
           </div>
           <div className="col-md-2 m-0 text-end">
             <i
-              className={`bx bx-refresh cursor-pointer fs-4 ${isFetching ? "spin" : ""
+              className={`bx bx-refresh cursor-pointer fs-4 ${
+                isFetching ? "spin" : ""
               }`}
               data-toggle="tooltip"
               title="Refresh"
@@ -214,7 +229,8 @@ const AttendancesEmployeeRecords = ({ employee }) => {
               {[...Array(totalPages)].map((_, index) => (
                 <li
                   key={index}
-                  className={`page-item ${currentPage === index + 1 ? "active" : ""
+                  className={`page-item ${
+                    currentPage === index + 1 ? "active" : ""
                   }`}
                 >
                   <button
@@ -226,7 +242,8 @@ const AttendancesEmployeeRecords = ({ employee }) => {
                 </li>
               ))}
               <li
-                className={`page-item ${currentPage === totalPages ? "disabled" : ""
+                className={`page-item ${
+                  currentPage === totalPages ? "disabled" : ""
                 }`}
               >
                 <button
@@ -244,4 +261,4 @@ const AttendancesEmployeeRecords = ({ employee }) => {
   );
 };
 
-export default AttendancesEmployeeRecords;
+export default EmpAttendance;

src/components/Employee/EmpBanner.jsx

@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from "react";
+
+import { useChangePassword } from "../../components/Context/ChangePasswordContext";
+import GlobalModel from "../common/GlobalModel";
+import ManageEmployee from "./ManageEmployee";
+
+const EmpBanner = ({ profile, loggedInUser }) => {
+  const { openChangePassword } = useChangePassword();
+  const [showModal, setShowModal] = useState(false);
+
+  return (
+    <>
+      {showModal && (
+        <GlobalModel
+          size="lg"
+          isOpen={showModal}
+          closeModal={() => setShowModal(false)}
+        >
+          <ManageEmployee
+            employeeId={profile.id}
+            onClosed={() => setShowModal(false)}
+          />
+        </GlobalModel>
+      )}
+      <div class="user-profile-header d-flex flex-column flex-lg-row text-sm-start text-center mb-8">
+        <div class="flex-shrink-0 mt-1 mx-sm-0 mx-auto">
+          <img
+            width={125}
+            src="../../assets/img/avatars/00.jpg"
+            alt="user image"
+            class="d-block h-auto ms-0 ms-sm-6 rounded-3 user-profile-img"
+          />
+        </div>
+        <div class="flex-grow-1 mt-1 mt-lg-1">
+          <div class="d-flex align-items-md-end align-items-sm-start align-items-center justify-content-md-between justify-content-start mx-5 flex-md-row flex-column gap-4">
+            <div class="user-profile-info">
+              <h4 class="mb-2">{`${profile?.firstName} ${profile?.middleName} ${profile?.lastName}`}</h4>
+              <ul class="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center gap-4 mt-4">
+                <li class="list-inline-item">
+                  <i class="icon-base bx bx-palette me-2 align-top"></i>
+                  <span class="fw-medium">
+                    {profile?.jobRole || <em>NA</em>}
+                  </span>
+                </li>
+                <li class="list-inline-item">
+                  <i class="icon-base bx bx-phone me-2 align-top"></i>
+                  <span class="fw-medium">
+                    {" "}
+                    {profile?.phoneNumber || <em>NA</em>}
+                  </span>
+                </li>
+                <li class="list-inline-item">
+                  <i class="icon-base bx bx-calendar me-2 align-top"></i>
+                  <span class="fw-medium">
+                    {" "}
+                    Joined on{" "}
+                    {profile?.joiningDate ? (
+                      new Date(profile.joiningDate).toLocaleDateString()
+                    ) : (
+                      <em>NA</em>
+                    )}
+                  </span>
+                </li>
+              </ul>
+              <ul class="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center mt-4">
+                <li class="list-inline-item">
+                  <button
+                    className="btn btn-sm btn-primary btn-block"
+                    onClick={() => setShowModal(true)}
+                  >
+                    Edit Profile
+                  </button>
+                </li>
+                <li class="list-inline-item">
+                  {profile?.id == loggedInUser?.employeeInfo?.id && (
+                    <button
+                      className="btn  btn-sm btn-outline-primary btn-block"
+                      onClick={() => openChangePassword()}
+                    >
+                      Change Password
+                    </button>
+                  )}
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default EmpBanner;

src/components/Employee/EmpDashboard.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import Avatar from "../common/Avatar";
+import EmpOverview from "./EmpOverview";
+
+const EmpDashboard = ({ profile }) => {
+  return (
+    <>
+      <div className="row">
+        <div className="col col-4 pt-5">
+          {" "}
+          <EmpOverview profile={profile}></EmpOverview>
+        </div>
+        <div className="col col-4 pt-5">
+          <div className="card">
+            {" "}
+            <div class="card-body">
+              <small class="card-text text-uppercase text-body-secondary small">
+                My Projects
+              </small>{" "}
+            </div>
+          </div>
+        </div>
+        <div className="col col-4 pt-5">
+          <div className="card">
+            <div class="card-body">
+              <small class="card-text text-uppercase text-body-secondary small">
+                My Expences
+              </small>{" "}
+            </div>{" "}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default EmpDashboard;

src/components/Employee/EmpOverview.jsx

@@ -0,0 +1,111 @@
+import React from "react";
+import Avatar from "../common/Avatar";
+import { useProfile } from "../../hooks/useProfile";
+
+const EmpOverview = ({ profile }) => {
+  const { loggedInUserProfile } = useProfile();
+  console.log(loggedInUserProfile);
+  console.log(profile);
+  return (
+    <>
+      {" "}
+      <div className="row">
+        <div className="col-12 mb-4">
+          <div className="card">
+            <div className="card-body">
+              <small className="card-text text-uppercase text-body-secondary small">
+                About
+              </small>
+              <ul className="list-unstyled my-3 py-1">
+                <li className="d-flex align-items-center mb-4">
+                  <i className="icon-base bx bx-user"></i>
+                  <span className="fw-medium mx-2">Full Name:</span>{" "}
+                  <span>{`${profile?.firstName} ${profile?.lastName}`}</span>
+                </li>
+                <li className="d-flex align-items-center mb-4">
+                  <i className="icon-base bx bx-check"></i>
+                  <span className="fw-medium mx-2">Status:</span>{" "}
+                  <span>Active</span>
+                </li>
+                <li className="d-flex align-items-center mb-4">
+                  <i className="icon-base bx bx-crown"></i>
+                  <span className="fw-medium mx-2">Role:</span>{" "}
+                  <span> {profile?.jobRole || <em>NA</em>}</span>
+                </li>
+                <li className="d-flex align-items-center mb-4">
+                  <i className="icon-base bx bx-flag"></i>
+                  <span className="fw-medium mx-2">Gender:</span>{" "}
+                  <span> {profile?.gender || <em>NA</em>}</span>
+                </li>{" "}
+                <li className="d-flex align-items-center mb-2">
+                  <i className="icon-base bx bx-calendar "></i>
+                  <span className="fw-medium mx-2">Birth Date:</span>{" "}
+                  <span>
+                    {profile?.birthDate ? (
+                      new Date(profile.birthDate).toLocaleDateString()
+                    ) : (
+                      <em>NA</em>
+                    )}
+                  </span>
+                </li>
+                <li className="d-flex align-items-center mb-2">
+                  <i className="icon-base bx bx-calendar "></i>
+                  <span className="fw-medium mx-2">Joining Date:</span>{" "}
+                  <span>
+                    {profile?.joiningDate ? (
+                      new Date(profile.joiningDate).toLocaleDateString()
+                    ) : (
+                      <em>NA</em>
+                    )}
+                  </span>
+                </li>
+              </ul>
+              <small className="card-text text-uppercase text-body-secondary small">
+                Contacts
+              </small>
+              <ul className="list-unstyled my-3 py-1">
+                <li className="d-flex align-items-center mb-4">
+                  <i className="icon-base bx bx-phone"></i>
+                  <span className="fw-medium mx-2">Contact:</span>{" "}
+                  <span> {profile?.phoneNumber || <em>NA</em>}</span>
+                </li>
+                <li className="d-flex align-items-center mb-4">
+                  <i className="icon-base bx bx-envelope"></i>
+                  <span className="fw-medium mx-2">Email:</span>{" "}
+                  <a href={`${profile?.email}`}>
+                    {" "}
+                    {profile?.email || <em>NA</em>}
+                  </a>
+                </li>
+                <li className="d-flex align-items-center mb-4">
+                  <i className="icon-base bx bx-user"></i>
+                  <span className="fw-medium mx-2">
+                    {" "}
+                    Emergency Contact:
+                  </span>{" "}
+                  <span> {profile?.emergencyContactPerson || <em>NA</em>}</span>
+                </li>
+                <li className="d-flex align-items-center mb-4">
+                  <i className="icon-base bx bx-phone"></i>
+                  <span className="fw-medium mx-2"> Emergency Phone:</span>{" "}
+                  <span> {profile?.emergencyPhoneNumber || <em>NA</em>}</span>
+                </li>
+                <li className="d-flex align-items-center ">
+                  <div className="container p-0">
+                    <div className="fw-medium text-start">
+                      <i className="icon-base bx bx-map "></i> Address:
+                    </div>
+                    <div className="text-start ms-7">
+                      {profile?.currentAddress || <em>NA</em>}
+                    </div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+export default EmpOverview;

src/components/Employee/EmployeeNav.jsx

@@ -5,6 +5,20 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
     <div className="col-md-12">
       <div className="nav-align-top ">
         <ul className="nav nav-tabs">
+          <li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
+            <a
+              className={`nav-link py-1 px-2 small ${
+                activePill === "profile" ? "active" : ""
+              }`}
+              href="#"
+              onClick={(e) => {
+                e.preventDefault(); // Prevent page reload
+                onPillClick("profile");
+              }}
+            >
+              <i className="icon-base bx bx-user icon-sm me-1_5"></i> Profile
+            </a>
+          </li>
           <li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
             <a
               className={`nav-link py-1 px-2 small ${

src/components/Layout/Header.jsx

@@ -82,7 +82,7 @@ const Header = () => {
   };
 
   const handleProfilePage = () => {
-    navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`);
+    navigate(`/employee/${profile?.employeeInfo?.id}`);
   };
 
   const { projectNames, loading: projectLoading, fetchData } = useProjectName();
@@ -91,7 +91,7 @@ const Header = () => {
 
   const projectsForDropdown = isDashboard
     ? projectNames
-    : projectNames?.filter(project =>
+    : projectNames?.filter((project) =>
         allowedProjectStatusIds.includes(project.projectStatusId)
       );
 
@@ -109,7 +109,9 @@ const Header = () => {
       const selectedProjectObj = projectNames.find(
         (p) => p?.id === selectedProject
       );
-      currentProjectDisplayName = selectedProjectObj ? selectedProjectObj.name : "All Projects";
+      currentProjectDisplayName = selectedProjectObj
+        ? selectedProjectObj.name
+        : "All Projects";
     }
   }
 
@@ -128,14 +130,15 @@ const Header = () => {
         if (isDashboard) {
           dispatch(setProjectId(null));
         } else {
-          const firstAllowedProject = projectNames.find(project => allowedProjectStatusIds.includes(project.projectStatusId));
+          const firstAllowedProject = projectNames.find((project) =>
+            allowedProjectStatusIds.includes(project.projectStatusId)
+          );
           dispatch(setProjectId(firstAllowedProject?.id || null));
         }
       }
     }
   }, [projectNames, selectedProject, dispatch, isDashboard]);
 
-
   const handler = useCallback(
     async (data) => {
       if (!HasManageProjectPermission) {
@@ -223,7 +226,9 @@ const Header = () => {
                 </span>
               )}
 
-              {shouldShowDropdown && projectsForDropdown && projectsForDropdown.length > 0 && (
+              {shouldShowDropdown &&
+                projectsForDropdown &&
+                projectsForDropdown.length > 0 && (
                   <ul
                     className="dropdown-menu"
                     style={{ overflow: "auto", maxHeight: "300px" }}

src/pages/employee/EmployeeList.jsx

@@ -51,7 +51,8 @@ const EmployeeList = () => {
 
   const { employees, loading, setLoading, error, recallEmployeeData } =
     useEmployeesAllOrByProjectId(
-      showAllEmployees ,selectedProjectId,
+      showAllEmployees,
+      selectedProjectId,
       showInactive
     );
 
@@ -153,8 +154,6 @@ const EmployeeList = () => {
     }
   };
 
-
-
   const handleAllEmployeesToggle = (e) => {
     const isChecked = e.target.checked;
     setShowInactive(false);
@@ -334,7 +333,7 @@ const EmployeeList = () => {
                           role="switch"
                           id="inactiveEmployeesCheckbox"
                           checked={showInactive}
-                           onChange={(e)=> setShowInactive(e.target.checked)}
+                          onChange={(e) => setShowInactive(e.target.checked)}
                         />
                         <label
                           className="form-check-label ms-0"
@@ -480,7 +479,9 @@ const EmployeeList = () => {
                         aria-label="User: activate to sort column ascending"
                         aria-sort="descending"
                       >
-                          <div className="text-start ms-5">Official Designation</div>
+                        <div className="text-start ms-5">
+                          Official Designation
+                        </div>
                       </th>
 
                       <th
@@ -564,9 +565,7 @@ const EmployeeList = () => {
                               <div className="d-flex flex-column">
                                 <a
                                   onClick={() =>
-                                      navigate(
+                                    navigate(`/employee/${item.id}`)
-                                        `/employee/${item.id}?for=attendance`
-                                      )
                                   }
                                   className="text-heading text-truncate cursor-pointer"
                                 >
@@ -639,8 +638,7 @@ const EmployeeList = () => {
                                     }
                                     className="dropdown-item py-1"
                                   >
-                                      <i className="bx bx-detail bx-sm"></i>{" "}
+                                    <i className="bx bx-detail bx-sm"></i> View
-                                      View
                                   </button>
                                   <button
                                     className="dropdown-item py-1"
@@ -737,8 +735,8 @@ const EmployeeList = () => {
               </div>
             </div>
           </div>
-          // </div>
         ) : (
+          // </div>
           <div className="card">
             <div className="text-center">
               <i className="fa-solid fa-triangle-exclamation fs-5"></i>

src/pages/employee/EmployeeProfile.jsx

@@ -1,26 +1,25 @@
 import React, { useState, useEffect } from "react";
-import EmpProfile from "../../components/Employee/EmpProfile";
+import { useSearchParams, useParams, useNavigate } from "react-router-dom";
-import axios from "axios";
+import { useSelector } from "react-redux";
-import Breadcrumb from "../../components/common/Breadcrumb";
+
-import EmployeeNav from "../../components/Employee/EmployeeNav";
-import { useSearchParams, useParams } from "react-router-dom";
-import { getCachedData } from "../../slices/apiDataManager";
 import {
   useEmployeeProfile,
   useEmployees,
   useEmployeesByProject,
 } from "../../hooks/useEmployees";
 import { useProfile } from "../../hooks/useProfile";
+import { getCachedData } from "../../slices/apiDataManager";
 
-import { useSelector } from "react-redux";
 import EmployeeRepository from "../../repositories/EmployeeRepository";
 import { ComingSoonPage } from "../Misc/ComingSoonPage";
-import { useNavigate } from "react-router-dom";
+
-import Avatar from "../../components/common/Avatar";
+import Breadcrumb from "../../components/common/Breadcrumb";
-import AttendancesEmployeeRecords from "./AttendancesEmployeeRecords";
+import EmployeeNav from "../../components/Employee/EmployeeNav";
+import EmpProfile from "../../components/Employee/EmpProfile";
+import EmpAttendance from "../../components/Employee/EmpAttendance";
 import ManageEmployee from "../../components/Employee/ManageEmployee";
-import { useChangePassword } from "../../components/Context/ChangePasswordContext";
+import EmpBanner from "../../components/Employee/EmpBanner";
-import GlobalModel from "../../components/common/GlobalModel";
+import EmpDashboard from "../../components/Employee/EmpDashboard";
 
 const EmployeeProfile = () => {
   const { profile } = useProfile();
@@ -32,7 +31,7 @@ const EmployeeProfile = () => {
 
   const [SearchParams] = useSearchParams();
   const tab = SearchParams.get("for");
-  const [activePill, setActivePill] = useState(tab);
+  const [activePill, setActivePill] = useState(tab || "profile");
   const [currentEmployee, setCurrentEmployee] = useState();
   const [showModal, setShowModal] = useState(false);
 
@@ -40,8 +39,6 @@ const EmployeeProfile = () => {
     setActivePill(pillKey);
   };
 
-
-
   const fetchEmployeeProfile = async (employeeID) => {
     try {
       const resp = await EmployeeRepository.getEmployeeProfile(employeeID);
@@ -62,10 +59,17 @@ const EmployeeProfile = () => {
   const renderContent = () => {
     if (loading) return <div>Loading</div>;
     switch (activePill) {
+      case "profile": {
+        return (
+          <>
+            <EmpDashboard profile={currentEmployee} />
+          </>
+        );
+      }
       case "attendance": {
         return (
           <>
-            <AttendancesEmployeeRecords employee={employeeId} />
+            <EmpAttendance employee={employeeId} />
           </>
         );
       }
@@ -98,14 +102,8 @@ const EmployeeProfile = () => {
   if (loading) {
     return <div>Loading...</div>;
   }
-  const { openChangePassword } = useChangePassword();
   return (
     <>
-      {showModal && (
-        <GlobalModel size="lg" isOpen={showModal} closeModal={() => setShowModal(false)}>
-          <ManageEmployee employeeId={employeeId} onClosed={() => setShowModal(false)} />
-        </GlobalModel>
-      )}
       <div className="container-fluid">
         <Breadcrumb
           data={[
@@ -114,148 +112,25 @@ const EmployeeProfile = () => {
             { label: "Profile", link: null },
           ]}
         ></Breadcrumb>
-
         <div className="row">
-          <div className="col-12 col-md-8 col-lg-4 order-1 order-lg-1">
+          <div className="col-12 ">
-            <div className="row">
+            <EmpBanner
-              <div className="col-12 mb-4">
+              profile={currentEmployee}
-                <div className="card">
+              loggedInUser={profile}
-                  <div className="card-body">
+            ></EmpBanner>
-                    <div className="d-flex flex-row flex-lg-column">
+          </div>
-                      <div className="d-flex flex-column justify-content-center align-items-center text-center">
+        </div>{" "}
-                        <Avatar
-                          firstName={`${currentEmployee?.firstName}`}
-                          lastName={`${currentEmployee?.lastName}`}
-                          size={"lg"}
-                        />
-                        <div className="py-2">
-                          <p className="h6">{`${currentEmployee?.firstName} ${currentEmployee?.lastName}`}</p>
-                        </div>
-                      </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>
-                          <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>
-                              </tr>
-                              <tr>
-                                <td className="fw-medium text-start text-nowrap">
-                                  Phone Number:
-                                </td>
-                                <td className="text-start">
-                                  {currentEmployee?.phoneNumber || <em>NA</em>}
-                                </td>
-                              </tr> 
-                              <tr>
-                                <td className="fw-medium text-start" style={{ width: '120px' }}>
-                                  Emergency Contact Person:
-                                </td>
-                                <td className="text-start align-bottom">
-                                  {currentEmployee?.emergencyContactPerson || <em>NA</em>}
-                                </td>
-                              </tr>
-                              <tr>
-                                <td className="fw-medium text-start">
-                                  Emergency Contact Number:
-                                </td>
-                                <td className="text-start align-bottom">
-                                  {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>
-                              </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>
-                              </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>
-                              </tr>
-                              <tr>
-                                <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 align-top" >
-                                  Address:
-                                </td>
-                                <td className="text-start">
-                                  {currentEmployee?.currentAddress || <em>NA</em>}
-                                </td>
-                              </tr>
-
-                            </tbody>
-                          </table>
-                        </div>
-                        <button
-                          className="btn btn-primary btn-block"
-                          onClick={() => setShowModal(true)}
-                        >
-                          Edit Profile
-                        </button>
-                        {currentEmployee?.id == profile?.employeeInfo?.id && (
-                          <button
-                            className="btn btn-outline-primary btn-block mt-2"
-                            onClick={() => openChangePassword()}
-                          >
-                            Change Password
-                          </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">
+          <div className="col-12 ">
             <EmployeeNav
               onPillClick={handlePillClick}
               activePill={activePill}
             />
           </div>
-            <div className="card">
+        </div>
+        <div className="row">
+          <div className="col-12">
+            <div>
               <div className="row row-bordered g-0">{renderContent()}</div>
             </div>
           </div>