Header_UI_Enhancement #28
@ -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;
|
||||
}
|
||||
|
||||
3
public/assets/vendor/css/core-customization.txt
vendored
Normal file
3
public/assets/vendor/css/core-customization.txt
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
--bs-body-font-size: 0.8375rem;
|
||||
|
||||
|
||||
44856
public/assets/vendor/css/core.css
vendored
44856
public/assets/vendor/css/core.css
vendored
File diff suppressed because it is too large
Load Diff
@ -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,105 +6,151 @@ import RenderAttendanceStatus from "./RenderAttendanceStatus";
|
||||
import usePagination from "../../hooks/usePagination";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const Attendance = ({ attendance, getRole, handleModalData }) => {
|
||||
const { currentPage, totalPages, currentItems, paginate } = usePagination(
|
||||
attendance,
|
||||
5
|
||||
);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const Attendance = ( {attendance, getRole, handleModalData} ) =>
|
||||
{
|
||||
|
||||
const { currentPage, totalPages, currentItems, paginate } = usePagination(attendance, 5);
|
||||
const [loading,setLoading] = useState(false);
|
||||
const navigate = useNavigate()
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="table-responsive text-nowrap">
|
||||
{attendance && attendance.length > 0 ? (<>
|
||||
<table className="table ">
|
||||
<thead >
|
||||
<tr>
|
||||
<th className="border-top-0" colSpan={2}>Name</th>
|
||||
<th className="border-top-0">Role</th>
|
||||
<th className="border-top-0"><i className='bx bxs-down-arrow-alt text-success' ></i>Check-In</th>
|
||||
<th className="border-top-0"><i className='bx bxs-up-arrow-alt text-danger' ></i>Check-Out</th>
|
||||
<th className="border-top-0">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="table-border-bottom-0">
|
||||
{currentItems &&
|
||||
currentItems
|
||||
.sort((a, b) => {
|
||||
// If checkInTime exists, compare it, otherwise, treat null as earlier than a date
|
||||
const checkInA = a.checkInTime ? new Date(a.checkInTime) : new Date(0);
|
||||
const checkInB = b.checkInTime ? new Date(b.checkInTime) : new Date(0);
|
||||
return checkInB - checkInA; // Sort in descending order of checkInTime
|
||||
})
|
||||
.map( ( item ) => (
|
||||
<tr key={item.employeeId}>
|
||||
<td colSpan={2}>
|
||||
<div className="d-flex justify-content-start align-items-center">
|
||||
<Avatar
|
||||
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-medium">
|
||||
{item.firstName} {item.lastName}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<>
|
||||
<div className="table-responsive text-nowrap">
|
||||
{attendance && attendance.length > 0 ? (
|
||||
<>
|
||||
<table className="table ">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="border-top-0" colSpan={2}>
|
||||
Name
|
||||
</th>
|
||||
<th className="border-top-0">Role</th>
|
||||
<th className="border-top-0">
|
||||
<i className="bx bxs-down-arrow-alt text-success"></i>
|
||||
Check-In
|
||||
</th>
|
||||
<th className="border-top-0">
|
||||
<i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
|
||||
</th>
|
||||
<th className="border-top-0">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="table-border-bottom-0">
|
||||
{currentItems &&
|
||||
currentItems
|
||||
.sort((a, b) => {
|
||||
// If checkInTime exists, compare it, otherwise, treat null as earlier than a date
|
||||
const checkInA = a.checkInTime
|
||||
? new Date(a.checkInTime)
|
||||
: new Date(0);
|
||||
const checkInB = b.checkInTime
|
||||
? new Date(b.checkInTime)
|
||||
: new Date(0);
|
||||
return checkInB - checkInA; // Sort in descending order of checkInTime
|
||||
})
|
||||
.map((item) => (
|
||||
<tr key={item.employeeId}>
|
||||
<td colSpan={2}>
|
||||
<div className="d-flex justify-content-start align-items-center">
|
||||
<Avatar
|
||||
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>
|
||||
|
||||
<td>
|
||||
{item.jobRoleName}
|
||||
|
||||
</td>
|
||||
<td>{item.checkInTime ? convertShortTime(item.checkInTime):"--"}</td>
|
||||
<td>{item.checkOutTime ? convertShortTime(item.checkOutTime):"--"}</td>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td className="text-center" >
|
||||
<RenderAttendanceStatus attendanceData={item} handleModalData={handleModalData} Tab={1} currentDate={null}/>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
<td>{item.jobRoleName}</td>
|
||||
<td>
|
||||
{item.checkInTime
|
||||
? convertShortTime(item.checkInTime)
|
||||
: "--"}
|
||||
</td>
|
||||
<td>
|
||||
{item.checkOutTime
|
||||
? convertShortTime(item.checkOutTime)
|
||||
: "--"}
|
||||
</td>
|
||||
|
||||
<td className="text-center">
|
||||
<RenderAttendanceStatus
|
||||
attendanceData={item}
|
||||
handleModalData={handleModalData}
|
||||
Tab={1}
|
||||
currentDate={null}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
{
|
||||
!loading && (
|
||||
<nav aria-label="Page " >
|
||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||
<li className={`page-item ${currentPage === 1 ? 'disabled' : ''}`}>
|
||||
<button className="page-link btn-xs" onClick={() => paginate(currentPage - 1)}>«</button>
|
||||
</li>
|
||||
{[...Array(totalPages)].map((_, index) => (
|
||||
<li key={index} className={`page-item ${currentPage === index + 1 ? 'active' : ''}`}>
|
||||
<button className="page-link " onClick={() => paginate(index + 1)}>
|
||||
{index + 1}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
<li className={`page-item ${currentPage === totalPages ? 'disabled' : ''}`}>
|
||||
<button className="page-link " onClick={() => paginate(currentPage + 1)}>»</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
</> ) : (
|
||||
<span>No employees assigned to the project</span>
|
||||
)}
|
||||
{!loading && (
|
||||
<nav aria-label="Page ">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === 1 ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link btn-xs"
|
||||
onClick={() => paginate(currentPage - 1)}
|
||||
>
|
||||
«
|
||||
</button>
|
||||
</li>
|
||||
{[...Array(totalPages)].map((_, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className={`page-item ${
|
||||
currentPage === index + 1 ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
onClick={() => paginate(index + 1)}
|
||||
>
|
||||
{index + 1}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link "
|
||||
onClick={() => paginate(currentPage + 1)}
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<span>No employees assigned to the project</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Attendance;
|
||||
export default Attendance;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 {changeMaster} from "../../slices/localVariablesSlice";
|
||||
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 { 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 )
|
||||
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();
|
||||
@ -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 = ()=>{
|
||||
navigate(`/employee/${profile?.employeeInfo?.id}?for=account`)
|
||||
}
|
||||
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"
|
||||
@ -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>
|
||||
<ul className="navbar-nav flex-row align-items-center ms-auto">
|
||||
{/* 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 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
|
||||
aria-label="go to profile"
|
||||
className="dropdown-item"
|
||||
|
||||
>
|
||||
<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">
|
||||
@ -110,8 +532,12 @@ const Header = () =>{
|
||||
</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>
|
||||
<span className="fw-medium d-block">
|
||||
{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"
|
||||
className="dropdown-item"
|
||||
|
||||
aria-label="go to setting "
|
||||
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"
|
||||
className="dropdown-item"
|
||||
|
||||
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>
|
||||
@ -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}
|
||||
>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user