public/assets/css/default.css

@@ -139,3 +139,24 @@
   text-align: left;
   padding-left: 60px;
 }
+
+.cusor-pointer {
+  cursor: pointer;
+}
+
+/* .apexcharts-toolbar {
+  z-index: 0 !important;
+} */
+
+.font-italic {
+  font-style: italic;
+}
+
+.text-sm {
+  font-size: 0.7em;
+}
+
+.menu-vertical .menu-item .menu-link {
+  font-size: 0.7375rem;
+  min-block-size: 0.7375rem;
+}

public/assets/vendor/css/core-customization.txt

@@ -0,0 +1,3 @@
+ --bs-body-font-size: 0.8375rem;
+
+ 

src/components/Activities/Attendance.jsx

@@ -1,4 +1,4 @@
-import React,{useState}from "react";
+import React, { useState } from "react";
 import moment from "moment";
 import Avatar from "../common/Avatar";
 import { convertShortTime } from "../../utils/dateUtils";
@@ -6,103 +6,149 @@ import RenderAttendanceStatus from "./RenderAttendanceStatus";
 import usePagination from "../../hooks/usePagination";
 import { useNavigate } from "react-router-dom";
 
-
+const Attendance = ({ attendance, getRole, handleModalData }) => {
-const Attendance = ( {attendance, getRole, handleModalData} ) =>
+  const { currentPage, totalPages, currentItems, paginate } = usePagination(
-{
+    attendance,
-
+    5
-  const { currentPage, totalPages, currentItems, paginate } = usePagination(attendance, 5);
+  );
-  const [loading,setLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
-  const navigate = useNavigate()
+  const navigate = useNavigate();
 
   return (
     <>
-     <div className="table-responsive text-nowrap">
+      <div className="table-responsive text-nowrap">
-              {attendance && attendance.length > 0 ? (<>
+        {attendance && attendance.length > 0 ? (
-                <table className="table ">
+          <>
-                  <thead >
+            <table className="table ">
-                    <tr>
+              <thead>
-                      <th className="border-top-0" colSpan={2}>Name</th>
+                <tr>
-                      <th className="border-top-0">Role</th>
+                  <th className="border-top-0" colSpan={2}>
-                      <th className="border-top-0"><i className='bx bxs-down-arrow-alt text-success' ></i>Check-In</th>
+                    Name
-                      <th className="border-top-0"><i className='bx bxs-up-arrow-alt text-danger' ></i>Check-Out</th>
+                  </th>
-                      <th className="border-top-0">Actions</th>
+                  <th className="border-top-0">Role</th>
-                    </tr>
+                  <th className="border-top-0">
-                  </thead>
+                    <i className="bx bxs-down-arrow-alt text-success"></i>
-                  <tbody className="table-border-bottom-0">
+                    Check-In
-                    {currentItems &&
+                  </th>
-                currentItems
+                  <th className="border-top-0">
-                .sort((a, b) => {
+                    <i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
-                  // If checkInTime exists, compare it, otherwise, treat null as earlier than a date
+                  </th>
-                  const checkInA = a.checkInTime ? new Date(a.checkInTime) : new Date(0);
+                  <th className="border-top-0">Actions</th>
-                  const checkInB = b.checkInTime ? new Date(b.checkInTime) : new Date(0);
+                </tr>
-                  return checkInB - checkInA; // Sort in descending order of checkInTime
+              </thead>
-                })
+              <tbody className="table-border-bottom-0">
-                  .map( ( item ) => (
+                {currentItems &&
-                        <tr key={item.employeeId}>
+                  currentItems
-                          <td colSpan={2}>
+                    .sort((a, b) => {
-                            <div className="d-flex justify-content-start align-items-center">
+                      // If checkInTime exists, compare it, otherwise, treat null as earlier than a date
-                              <Avatar
+                      const checkInA = a.checkInTime
-                                firstName={item.firstName}
+                        ? new Date(a.checkInTime)
-                                lastName={item.lastName}
+                        : new Date(0);
-                              ></Avatar>
+                      const checkInB = b.checkInTime
-                              <div className="d-flex flex-column">
+                        ? new Date(b.checkInTime)
-                                <a
+                        : new Date(0);
-                                  onClick={(e) =>navigate(`/employee/${item.employeeId}?for=attendance`)}
+                      return checkInB - checkInA; // Sort in descending order of checkInTime
-                                  className="text-heading text-truncate cursor-pointer"
+                    })
-                                >
+                    .map((item) => (
-                                  <span className="fw-medium">
+                      <tr key={item.employeeId}>
-                                    {item.firstName} {item.lastName}
+                        <td colSpan={2}>
-                                  </span>
+                          <div className="d-flex justify-content-start align-items-center">
-                                </a>                             
+                            <Avatar
-                              </div>
+                              firstName={item.firstName}
+                              lastName={item.lastName}
+                            ></Avatar>
+                            <div className="d-flex flex-column">
+                              <a
+                                onClick={(e) =>
+                                  navigate(
+                                    `/employee/${item.employeeId}?for=attendance`
+                                  )
+                                }
+                                className="text-heading text-truncate cursor-pointer"
+                              >
+                                <span className="fw-normal">
+                                  {item.firstName} {item.lastName}
+                                </span>
+                              </a>
                             </div>
-                          </td>
+                          </div>
+                        </td>
 
-                          <td>
+                        <td>{item.jobRoleName}</td>
-                            {item.jobRoleName}
+                        <td>
+                          {item.checkInTime
+                            ? convertShortTime(item.checkInTime)
+                            : "--"}
+                        </td>
+                        <td>
+                          {item.checkOutTime
+                            ? convertShortTime(item.checkOutTime)
+                            : "--"}
+                        </td>
 
-                          </td>
+                        <td className="text-center">
-                         <td>{item.checkInTime ? convertShortTime(item.checkInTime):"--"}</td>
+                          <RenderAttendanceStatus
-                         <td>{item.checkOutTime ? convertShortTime(item.checkOutTime):"--"}</td>
+                            attendanceData={item}
+                            handleModalData={handleModalData}
+                            Tab={1}
+                            currentDate={null}
+                          />
+                        </td>
+                      </tr>
+                    ))}
+              </tbody>
+            </table>
 
-                          <td className="text-center" >    
+            {!loading && (
-                          <RenderAttendanceStatus attendanceData={item} handleModalData={handleModalData} Tab={1} currentDate={null}/>
+              <nav aria-label="Page ">
-                          </td>
+                <ul className="pagination pagination-sm justify-content-end py-1">
-                        </tr>
+                  <li
-                      ))}
+                    className={`page-item  ${
-                  </tbody>
+                      currentPage === 1 ? "disabled" : ""
-                
+                    }`}
-                </table>
+                  >
-
+                    <button
-
+                      className="page-link btn-xs"
-
+                      onClick={() => paginate(currentPage - 1)}
-{
+                    >
-  !loading && (
+                      &laquo;
-    <nav aria-label="Page " >
+                    </button>
-    <ul className="pagination pagination-sm justify-content-end py-1">
+                  </li>
-         <li className={`page-item  ${currentPage === 1 ? 'disabled' : ''}`}>
+                  {[...Array(totalPages)].map((_, index) => (
-             <button className="page-link btn-xs" onClick={() => paginate(currentPage - 1)}>&laquo;</button>
+                    <li
-         </li>
+                      key={index}
-        {[...Array(totalPages)].map((_, index) => (
+                      className={`page-item ${
-           <li key={index} className={`page-item ${currentPage === index + 1 ? 'active' : ''}`}>
+                        currentPage === index + 1 ? "active" : ""
-              <button className="page-link " onClick={() => paginate(index + 1)}>
+                      }`}
-               {index + 1}
+                    >
-              </button>
+                      <button
-           </li>
+                        className="page-link "
-        ))}
+                        onClick={() => paginate(index + 1)}
-        <li className={`page-item ${currentPage === totalPages ? 'disabled' : ''}`}>
+                      >
-            <button className="page-link " onClick={() => paginate(currentPage + 1)}>&raquo;</button>
+                        {index + 1}
-       </li>
+                      </button>
-   </ul>
+                    </li>
-  </nav>
+                  ))}
-  )
+                  <li
-}
+                    className={`page-item ${
-
+                      currentPage === totalPages ? "disabled" : ""
-            </>  ) : (
+                    }`}
-                <span>No employees assigned to the project</span>
+                  >
-              )}
+                    <button
+                      className="page-link "
+                      onClick={() => paginate(currentPage + 1)}
+                    >
+                      &raquo;
+                    </button>
+                  </li>
+                </ul>
+              </nav>
+            )}
+          </>
+        ) : (
+          <span>No employees assigned to the project</span>
+        )}
       </div>
- 
     </>
   );
 };

src/components/Activities/AttendcesLogs.jsx

@@ -87,7 +87,7 @@ const AttendanceLog = ({ attendance, handleModalData, projectId }) => {
                       />
                       <div className="d-flex flex-column">
                         <a href="#" className="text-heading text-truncate">
-                          <span className="fw-medium">
+                          <span className="fw-normal">
                             {attendance.firstName} {attendance.lastName}
                           </span>
                         </a>

src/components/Activities/Regularization.jsx

@@ -47,7 +47,7 @@ const Regularization = ({ handleRequest }) => {
                       ></Avatar>
                       <div className="d-flex flex-column">
                         <a href="#" className="text-heading text-truncate">
-                          <span className="fw-medium">
+                          <span className="fw-normal">
                             {att.firstName} {att.lastName}
                           </span>
                         </a>

src/components/Layout/Header.jsx

@@ -1,23 +1,22 @@
 import getGreetingMessage from "../../utils/greetingHandler";
 import { clearAllCache } from "../../slices/apiDataManager";
 import AuthRepository from "../../repositories/AuthRepository";
-import {useDispatch, } from "react-redux";
+import { useDispatch } from "react-redux";
-import {changeMaster} from "../../slices/localVariablesSlice";
+import { changeMaster } from "../../slices/localVariablesSlice";
 import useMaster from "../../hooks/masterHook/useMaster";
-import {useProfile} from "../../hooks/useProfile";
+import { useProfile } from "../../hooks/useProfile";
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import Avatar from "../../components/common/Avatar";
-const Header = () =>{
+const Header = () => {
-  const {profile} = useProfile()
+  const { profile } = useProfile();
-  const dispatch = useDispatch( changeMaster( "Job Role" ) )
+  const dispatch = useDispatch(changeMaster("Job Role"));
-  const {data, loading} = useMaster()
+  const { data, loading } = useMaster();
-  const navigate = useNavigate()
+  const navigate = useNavigate();
-  const getRole = (roles,joRoleId) =>
+  const getRole = (roles, joRoleId) => {
-  {
     if (!Array.isArray(roles)) return "User";
-    let role = roles.find( role => role.id === joRoleId )
+    let role = roles.find((role) => role.id === joRoleId);
     return role ? role.name : "User";
-  }
+  };
   const handleLogout = (e) => {
     e.preventDefault(); // Prevent default anchor behavior (e.g., page reload)
     logout();
@@ -46,7 +45,6 @@ const Header = () =>{
           clearAllCache();
           window.location.href = "/auth/login";
         });
-
     } catch (error) {
       console.error(
         "Error during logout:",
@@ -55,10 +53,9 @@ const Header = () =>{
     }
   };
 
-
+  const handleProfilePage = () => {
-  const handleProfilePage = ()=>{
+    navigate(`/employee/${profile?.employeeInfo?.id}?for=account`);
-   navigate(`/employee/${profile?.employeeInfo?.id}?for=account`)
+  };
-  }
   return (
     <nav
       className="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
@@ -68,7 +65,6 @@ const Header = () =>{
         <a
           aria-label="toggle for sidebar"
           className="nav-item nav-link px-0 me-xl-4"
-      
         >
           <i className="bx bx-menu bx-sm"></i>
         </a>
@@ -77,8 +73,438 @@ const Header = () =>{
         className="navbar-nav-right d-flex align-items-center"
         id="navbar-collapse"
       >
-        <marquee> {getGreetingMessage(profile?.employeeInfo?.firstName)}</marquee>
+        {/* Search */}
-        <ul className="navbar-nav flex-row align-items-center ms-auto">
+        <div className="navbar-nav align-items-center">
+          <div className="nav-item navbar-search-wrapper mb-0">
+            <a className="nav-item nav-link search-toggler px-0" href="#">
+              <span
+                className="d-inline-block text-body-secondary fw-normal"
+                id="autocomplete"
+              >
+                <div
+                  className="aa-Autocomplete"
+                  role="combobox"
+                  aria-expanded="false"
+                  aria-haspopup="listbox"
+                  aria-labelledby="autocomplete-0-label"
+                >
+                  <button
+                    type="button"
+                    className="aa-DetachedSearchButton"
+                    title="Search"
+                    id="autocomplete-0-label"
+                  >
+                    <div className="aa-DetachedSearchButtonIcon"></div>
+                    <div className="aa-DetachedSearchButtonPlaceholder">
+                      Search -{" "}
+                      <span className="font-italic">Coming Soon...</span>
+                    </div>
+                    <div className="aa-DetachedSearchButtonQuery"></div>
+                  </button>
+                </div>
+              </span>
+            </a>
+          </div>
+        </div>
+
+        {/* marquee */}
+        {/* <marquee>
+          {" "}
+          {getGreetingMessage(profile?.employeeInfo?.firstName)}
+        </marquee> */}
+
+        {/* icon list */}
+        <ul className="navbar-nav flex-row align-items-center ms-md-auto">
+          <li className="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
+            <a
+              className="nav-link dropdown-toggle hide-arrow"
+              href="#;"
+              data-bs-toggle="dropdown"
+              data-bs-auto-close="outside"
+              aria-expanded="false"
+            >
+              <i className="icon-base bx bx-grid-alt icon-md"></i>
+            </a>
+            <div className="dropdown-menu dropdown-menu-end p-0">
+              <div className="dropdown-menu-header border-bottom">
+                <div className="dropdown-header d-flex align-items-center py-3">
+                  <h6 className="mb-0 me-auto">Shortcuts</h6>
+                  <a
+                    className="dropdown-shortcuts-add py-2 cusror-pointer"
+                    data-bs-toggle="tooltip"
+                    data-bs-placement="top"
+                    aria-label="Add shortcuts"
+                    data-bs-original-title="Add shortcuts"
+                  >
+                    <i className="icon-base bx bx-plus-circle text-heading"></i>
+                  </a>
+                </div>
+              </div>
+              <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">
+                      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">
+                      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 bx-user-check icon-26px text-heading"></i>
+                    </span>
+                    <a href="/activities/Attendance" className="stretched-link">
+                      Attendance
+                    </a>
+                    <small>Manage Attendance</small>
+                  </div>
+                  <div className="dropdown-shortcuts-item col">
+                    <span className="dropdown-shortcuts-icon rounded-circle mb-3">
+                      <i className="icon-base bx bx-dumbbell icon-26px text-heading"></i>
+                    </span>
+                    <a href="/activities/task" className="stretched-link">
+                      Task
+                    </a>
+                    <small>Work Allocations</small>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </li>
+
+          <li className="nav-item dropdown-notifications navbar-dropdown dropdown me-2 me-xl-0">
+            <a
+              className="nav-link dropdown-toggle hide-arrow cursor-pointer"
+              data-bs-toggle="dropdown"
+              data-bs-auto-close="outside"
+              aria-expanded="false"
+            >
+              <span className="position-relative">
+                <i className="icon-base bx bx-bell icon-lg"></i>
+                <span className="badge rounded-pill bg-danger badge-dot badge-notifications border"></span>
+              </span>
+            </a>
+            <ul className="dropdown-menu dropdown-menu-end p-0">
+              <li className="dropdown-menu-header border-bottom">
+                <div className="dropdown-header d-flex align-items-center py-3">
+                  <h6 className="mb-0 me-auto">Notification</h6>
+                  <div className="d-flex align-items-center h6 mb-0">
+                    <span className="badge bg-label-primary me-2">8 New</span>
+                    <a
+                      href="#"
+                      className="dropdown-notifications-all p-2"
+                      data-bs-toggle="tooltip"
+                      data-bs-placement="top"
+                      aria-label="Mark all as read"
+                      data-bs-original-title="Mark all as read"
+                    >
+                      <i className="icon-base bx bx-envelope-open text-heading"></i>
+                    </a>
+                  </div>
+                </div>
+              </li>
+              <li className="dropdown-notifications-list scrollable-container ps">
+                <ul className="list-group list-group-flush">
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
+                          <img
+                            src="../../assets/img/avatars/1.png"
+                            alt=""
+                            className="rounded-circle"
+                          ></img>
+                        </div>
+                      </div>
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">Congratulation Lettie 🎉</h6>
+                        <small className="mb-1 d-block text-body">
+                          Won the monthly best seller gold badge
+                        </small>
+                        <small className="text-body-secondary">1h ago</small>
+                      </div>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
+                        </a>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
+                        </a>
+                      </div>
+                    </div>
+                  </li>
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
+                          <span className="avatar-initial rounded-circle bg-label-danger">
+                            CF
+                          </span>
+                        </div>
+                      </div>
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">Charles Franklin</h6>
+                        <small className="mb-1 d-block text-body">
+                          Accepted your connection
+                        </small>
+                        <small className="text-body-secondary">12hr ago</small>
+                      </div>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
+                        </a>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
+                        </a>
+                      </div>
+                    </div>
+                  </li>
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
+                          <img
+                            src="../../assets/img/avatars/2.png"
+                            alt=""
+                            className="rounded-circle"
+                          ></img>
+                        </div>
+                      </div>
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">New Message ✉️</h6>
+                        <small className="mb-1 d-block text-body">
+                          You have new message from Natalie
+                        </small>
+                        <small className="text-body-secondary">1h ago</small>
+                      </div>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
+                        </a>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
+                        </a>
+                      </div>
+                    </div>
+                  </li>
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
+                          <span className="avatar-initial rounded-circle bg-label-success">
+                            <i className="icon-base bx bx-cart"></i>
+                          </span>
+                        </div>
+                      </div>
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">
+                          Whoo! You have new order 🛒
+                        </h6>
+                        <small className="mb-1 d-block text-body">
+                          ACME Inc. made new order $1,154
+                        </small>
+                        <small className="text-body-secondary">1 day ago</small>
+                      </div>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
+                        </a>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
+                        </a>
+                      </div>
+                    </div>
+                  </li>
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
+                          <img
+                            src="../../assets/img/avatars/9.png"
+                            alt=""
+                            className="rounded-circle"
+                          ></img>
+                        </div>
+                      </div>
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">
+                          Application has been approved 🚀
+                        </h6>
+                        <small className="mb-1 d-block text-body">
+                          Your ABC project application has been approved.
+                        </small>
+                        <small className="text-body-secondary">
+                          2 days ago
+                        </small>
+                      </div>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
+                        </a>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
+                        </a>
+                      </div>
+                    </div>
+                  </li>
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
+                          <span className="avatar-initial rounded-circle bg-label-success">
+                            <i className="icon-base bx bx-pie-chart-alt"></i>
+                          </span>
+                        </div>
+                      </div>
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">
+                          Monthly report is generated
+                        </h6>
+                        <small className="mb-1 d-block text-body">
+                          July monthly financial report is generated{" "}
+                        </small>
+                        <small className="text-body-secondary">
+                          3 days ago
+                        </small>
+                      </div>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
+                        </a>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
+                        </a>
+                      </div>
+                    </div>
+                  </li>
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
+                          <img
+                            src="../../assets/img/avatars/5.png"
+                            alt=""
+                            className="rounded-circle"
+                          ></img>
+                        </div>
+                      </div>
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">Send connection request</h6>
+                        <small className="mb-1 d-block text-body">
+                          Peter sent you connection request
+                        </small>
+                        <small className="text-body-secondary">
+                          4 days ago
+                        </small>
+                      </div>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
+                        </a>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
+                        </a>
+                      </div>
+                    </div>
+                  </li>
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
+                          <img
+                            src="../../assets/img/avatars/6.png"
+                            alt=""
+                            className="rounded-circle"
+                          ></img>
+                        </div>
+                      </div>
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">New message from Jane</h6>
+                        <small className="mb-1 d-block text-body">
+                          Your have new message from Jane
+                        </small>
+                        <small className="text-body-secondary">
+                          5 days ago
+                        </small>
+                      </div>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
+                        </a>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
+                        </a>
+                      </div>
+                    </div>
+                  </li>
+                  <li className="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
+                    <div className="d-flex">
+                      <div className="flex-shrink-0 me-3">
+                        <div className="avatar">
+                          <span className="avatar-initial rounded-circle bg-label-warning">
+                            <i className="icon-base bx bx-error"></i>
+                          </span>
+                        </div>
+                      </div>
+                      <div className="flex-grow-1">
+                        <h6 className="small mb-0">CPU is running high</h6>
+                        <small className="mb-1 d-block text-body">
+                          CPU Utilization Percent is currently at 88.63%,
+                        </small>
+                        <small className="text-body-secondary">
+                          5 days ago
+                        </small>
+                      </div>
+                      <div className="flex-shrink-0 dropdown-notifications-actions">
+                        <a href="#" className="dropdown-notifications-read">
+                          <span className="badge badge-dot"></span>
+                        </a>
+                        <a href="#" className="dropdown-notifications-archive">
+                          <span className="icon-base bx bx-x"></span>
+                        </a>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+                {/* <div className="ps__rail-x" style="left: 0px; bottom: 0px;">
+                  <div
+                    className="ps__thumb-x"
+                    tabindex="0"
+                    style="left: 0px; width: 0px;"
+                  ></div>
+                </div>
+                <div className="ps__rail-y" style="top: 0px; right: 0px;">
+                  <div
+                    className="ps__thumb-y"
+                    tabindex="0"
+                    style="top: 0px; height: 0px;"
+                  ></div>
+                </div> */}
+              </li>
+              <li className="border-top">
+                <div className="d-grid p-4">
+                  <a className="btn btn-primary btn-sm d-flex" href="#;">
+                    <small className="align-middle">
+                      View all notifications
+                    </small>
+                  </a>
+                </div>
+              </li>
+            </ul>
+          </li>
           <li className="nav-item navbar-dropdown dropdown-user dropdown">
             <a
               aria-label="dropdown profile avatar"
@@ -95,11 +521,7 @@ const Header = () =>{
             </a>
             <ul className="dropdown-menu dropdown-menu-end">
               <li onClick={handleProfilePage}>
-                <a
+                <a aria-label="go to profile" className="dropdown-item">
-                  aria-label="go to profile"
-                  className="dropdown-item"
-                  
-                >
                   <div className="d-flex">
                     <div className="flex-shrink-0 me-3">
                       <div className="avatar avatar-online">
@@ -110,8 +532,12 @@ const Header = () =>{
                       </div>
                     </div>
                     <div className="flex-grow-1">
-                      <span className="fw-medium d-block">{profile?.employeeInfo?.firstName}</span>
+                      <span className="fw-medium d-block">
-                      <small className="text-muted">{ getRole(data,profile?.employeeInfo?.joRoleId)}</small>
+                        {profile?.employeeInfo?.firstName}
+                      </span>
+                      <small className="text-muted">
+                        {getRole(data, profile?.employeeInfo?.joRoleId)}
+                      </small>
                     </div>
                   </div>
                 </a>
@@ -119,11 +545,10 @@ const Header = () =>{
               <li>
                 <div className="dropdown-divider"></div>
               </li>
-              <li onClick={handleProfilePage} >
+              <li onClick={handleProfilePage}>
                 <a
                   aria-label="go to profile"
                   className="dropdown-item cusor-pointer"
-                  
                 >
                   <i className="bx bx-user me-2"></i>
                   <span className="align-middle">My Profile</span>
@@ -131,9 +556,8 @@ const Header = () =>{
               </li>
               <li>
                 <a
-                  aria-label="go to setting"
+                  aria-label="go to setting "
-                  className="dropdown-item"
+                  className="dropdown-item cusor-pointer"
-               
                 >
                   <i className="bx bx-cog me-2"></i>
                   <span className="align-middle">Settings</span>
@@ -141,9 +565,8 @@ const Header = () =>{
               </li>
               <li>
                 <a
-                  aria-label="go to billing"
+                  aria-label="go to billing "
-                  className="dropdown-item"
+                  className="dropdown-item cusor-pointer"
-              
                 >
                   <span className="d-flex align-items-center align-middle">
                     <i className="flex-shrink-0 bx bx-credit-card me-2"></i>
@@ -162,7 +585,7 @@ const Header = () =>{
               <li>
                 <a
                   aria-label="click to log out"
-                  className="dropdown-item"
+                  className="dropdown-item cusor-pointer"
                   href="/logout" // Optional: Add this for accessibility, but it won't actually redirect
                   onClick={handleLogout}
                 >

src/components/common/Breadcrumb.jsx

@@ -5,16 +5,17 @@ const Breadcrumb = ({ data }) => {
   const navigate = useNavigate();
   return (
     <nav aria-label="breadcrumb">
-      <ol className="breadcrumb breadcrumb-style1">
+      <ol className="breadcrumb breadcrumb-custom-icon">
         {data.map((item, index) =>
           item.link ? (
             <li className="breadcrumb-item cursor-pointer" key={index}>
               <a
-                aria-label="pagination link link-underline-primary "
+                aria-label="breadcrumb link link-underline-primary "
                 onClick={() => navigate(item.link)}
               >
                 {item.label}
               </a>
+              <i className="breadcrumb-icon icon-base bx bx-chevron-right align-middle"></i>
             </li>
           ) : (
             <li

src/pages/employee/EmployeeList.jsx

@@ -366,7 +366,7 @@ const EmployeeList = () => {
                                   }
                                   className="text-heading text-truncate cursor-pointer"
                                 >
-                                  <span className="fw-medium">
+                                  <span className="fw-normal">
                                     {item.firstName} {item.lastName}
                                   </span>
                                 </a>