624 lines
28 KiB
JavaScript
624 lines
28 KiB
JavaScript
import getGreetingMessage from "../../utils/greetingHandler";
|
||
import { clearAllCache } from "../../slices/apiDataManager";
|
||
import AuthRepository from "../../repositories/AuthRepository";
|
||
import { useDispatch } from "react-redux";
|
||
import { changeMaster } from "../../slices/localVariablesSlice";
|
||
import useMaster from "../../hooks/masterHook/useMaster";
|
||
import { useProfile } from "../../hooks/useProfile";
|
||
import { useNavigate } from "react-router-dom";
|
||
import Avatar from "../../components/common/Avatar";
|
||
const Header = () => {
|
||
const { profile } = useProfile();
|
||
const dispatch = useDispatch(changeMaster("Job Role"));
|
||
const { data, loading } = useMaster();
|
||
const navigate = useNavigate();
|
||
const getRole = (roles, joRoleId) => {
|
||
if (!Array.isArray(roles)) return "User";
|
||
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();
|
||
};
|
||
|
||
const logout = async () => {
|
||
try {
|
||
// Notify server about the logout (optional)
|
||
let data = {
|
||
refreshToken: localStorage.getItem("refreshToken"),
|
||
};
|
||
|
||
AuthRepository.logout(data)
|
||
.then((response) => {
|
||
localStorage.removeItem("jwtToken");
|
||
localStorage.removeItem("refreshToken");
|
||
localStorage.removeItem("user");
|
||
localStorage.clear();
|
||
clearAllCache();
|
||
window.location.href = "/auth/login";
|
||
})
|
||
.catch((error) => {
|
||
localStorage.removeItem("jwtToken");
|
||
localStorage.removeItem("refreshToken");
|
||
localStorage.removeItem("user");
|
||
clearAllCache();
|
||
window.location.href = "/auth/login";
|
||
});
|
||
} catch (error) {
|
||
console.error(
|
||
"Error during logout:",
|
||
error.response?.data || error.message
|
||
);
|
||
}
|
||
};
|
||
|
||
const handleProfilePage = () => {
|
||
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"
|
||
id="layout-navbar"
|
||
>
|
||
<div className="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
|
||
<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>
|
||
</div>
|
||
<div
|
||
className="navbar-nav-right d-flex align-items-center justify-content-between"
|
||
id="navbar-collapse"
|
||
>
|
||
{/* Search */}
|
||
<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 bxs-user-account icon-26px text-heading"></i>
|
||
</span>
|
||
<a href="/employees" className="stretched-link">
|
||
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">
|
||
Attendance
|
||
</a>
|
||
<small>Manage Attendance</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-wrench icon-26px text-heading"></i>
|
||
</span>
|
||
<a href="/activities/task" className="stretched-link">
|
||
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">
|
||
Daily Work Log
|
||
</a>
|
||
<small>Daily 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"
|
||
className="nav-link dropdown-toggle hide-arrow"
|
||
href="#"
|
||
data-bs-toggle="dropdown"
|
||
>
|
||
<div className="avatar avatar-online">
|
||
<Avatar
|
||
firstName={`${profile?.employeeInfo?.firstName}`}
|
||
lastName={`${profile?.employeeInfo?.lastName}`}
|
||
/>
|
||
</div>
|
||
</a>
|
||
<ul className="dropdown-menu dropdown-menu-end">
|
||
<li onClick={handleProfilePage}>
|
||
<a aria-label="go to profile" className="dropdown-item">
|
||
<div className="d-flex">
|
||
<div className="flex-shrink-0 me-3">
|
||
<div className="avatar avatar-online">
|
||
<Avatar
|
||
firstName={`${profile?.employeeInfo?.firstName}`}
|
||
lastName={`${profile?.employeeInfo?.lastName}`}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="flex-grow-1">
|
||
<span className="fw-medium d-block">
|
||
{profile?.employeeInfo?.firstName}
|
||
</span>
|
||
<small className="text-muted">
|
||
{getRole(data, profile?.employeeInfo?.joRoleId)}
|
||
</small>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<div className="dropdown-divider"></div>
|
||
</li>
|
||
<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>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
aria-label="go to setting "
|
||
className="dropdown-item cusor-pointer"
|
||
>
|
||
<i className="bx bx-cog me-2"></i>
|
||
<span className="align-middle">Settings</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
aria-label="go to billing "
|
||
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>
|
||
<span className="flex-grow-1 align-middle ms-1">
|
||
Billing
|
||
</span>
|
||
<span className="flex-shrink-0 badge badge-center rounded-pill bg-danger w-px-20 h-px-20">
|
||
4
|
||
</span>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<div className="dropdown-divider"></div>
|
||
</li>
|
||
<li>
|
||
<a
|
||
aria-label="click to log out"
|
||
className="dropdown-item cusor-pointer"
|
||
href="/logout" // Optional: Add this for accessibility, but it won't actually redirect
|
||
onClick={handleLogout}
|
||
>
|
||
<i className="bx bx-power-off me-2"></i>
|
||
<span className="align-middle">Log Out</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
);
|
||
};
|
||
export default Header;
|