Header_UI_Enhancement #28
@ -151,3 +151,12 @@
|
|||||||
.font-italic {
|
.font-italic {
|
||||||
font-style: 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;
|
||||||
|
}
|
||||||
|
|||||||
65530
public/assets/vendor/css/core.css
vendored
65530
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 moment from "moment";
|
||||||
import Avatar from "../common/Avatar";
|
import Avatar from "../common/Avatar";
|
||||||
import { convertShortTime } from "../../utils/dateUtils";
|
import { convertShortTime } from "../../utils/dateUtils";
|
||||||
@ -6,105 +6,151 @@ import RenderAttendanceStatus from "./RenderAttendanceStatus";
|
|||||||
import usePagination from "../../hooks/usePagination";
|
import usePagination from "../../hooks/usePagination";
|
||||||
import { useNavigate } from "react-router-dom";
|
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 (
|
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>
|
</div>
|
||||||
</td>
|
</div>
|
||||||
|
</td>
|
||||||
<td>
|
|
||||||
{item.jobRoleName}
|
|
||||||
|
|
||||||
</td>
|
|
||||||
<td>{item.checkInTime ? convertShortTime(item.checkInTime):"--"}</td>
|
|
||||||
<td>{item.checkOutTime ? convertShortTime(item.checkOutTime):"--"}</td>
|
|
||||||
|
|
||||||
<td className="text-center" >
|
<td>{item.jobRoleName}</td>
|
||||||
<RenderAttendanceStatus attendanceData={item} handleModalData={handleModalData} Tab={1} currentDate={null}/>
|
<td>
|
||||||
</td>
|
{item.checkInTime
|
||||||
</tr>
|
? convertShortTime(item.checkInTime)
|
||||||
))}
|
: "--"}
|
||||||
</tbody>
|
</td>
|
||||||
|
<td>
|
||||||
</table>
|
{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 ">
|
||||||
!loading && (
|
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||||
<nav aria-label="Page " >
|
<li
|
||||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
className={`page-item ${
|
||||||
<li className={`page-item ${currentPage === 1 ? 'disabled' : ''}`}>
|
currentPage === 1 ? "disabled" : ""
|
||||||
<button className="page-link btn-xs" onClick={() => paginate(currentPage - 1)}>«</button>
|
}`}
|
||||||
</li>
|
>
|
||||||
{[...Array(totalPages)].map((_, index) => (
|
<button
|
||||||
<li key={index} className={`page-item ${currentPage === index + 1 ? 'active' : ''}`}>
|
className="page-link btn-xs"
|
||||||
<button className="page-link " onClick={() => paginate(index + 1)}>
|
onClick={() => paginate(currentPage - 1)}
|
||||||
{index + 1}
|
>
|
||||||
</button>
|
«
|
||||||
</li>
|
</button>
|
||||||
))}
|
</li>
|
||||||
<li className={`page-item ${currentPage === totalPages ? 'disabled' : ''}`}>
|
{[...Array(totalPages)].map((_, index) => (
|
||||||
<button className="page-link " onClick={() => paginate(currentPage + 1)}>»</button>
|
<li
|
||||||
</li>
|
key={index}
|
||||||
</ul>
|
className={`page-item ${
|
||||||
</nav>
|
currentPage === index + 1 ? "active" : ""
|
||||||
)
|
}`}
|
||||||
}
|
>
|
||||||
|
<button
|
||||||
</> ) : (
|
className="page-link "
|
||||||
<span>No employees assigned to the project</span>
|
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>
|
</div>
|
||||||
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Attendance;
|
export default Attendance;
|
||||||
|
|||||||
@ -87,7 +87,7 @@ const AttendanceLog = ({ attendance, handleModalData, projectId }) => {
|
|||||||
/>
|
/>
|
||||||
<div className="d-flex flex-column">
|
<div className="d-flex flex-column">
|
||||||
<a href="#" className="text-heading text-truncate">
|
<a href="#" className="text-heading text-truncate">
|
||||||
<span className="fw-medium">
|
<span className="fw-normal">
|
||||||
{attendance.firstName} {attendance.lastName}
|
{attendance.firstName} {attendance.lastName}
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@ -47,7 +47,7 @@ const Regularization = ({ handleRequest }) => {
|
|||||||
></Avatar>
|
></Avatar>
|
||||||
<div className="d-flex flex-column">
|
<div className="d-flex flex-column">
|
||||||
<a href="#" className="text-heading text-truncate">
|
<a href="#" className="text-heading text-truncate">
|
||||||
<span className="fw-medium">
|
<span className="fw-normal">
|
||||||
{att.firstName} {att.lastName}
|
{att.firstName} {att.lastName}
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@ -76,7 +76,7 @@ const Header = () => {
|
|||||||
{/* Search */}
|
{/* Search */}
|
||||||
<div className="navbar-nav align-items-center">
|
<div className="navbar-nav align-items-center">
|
||||||
<div className="nav-item navbar-search-wrapper mb-0">
|
<div className="nav-item navbar-search-wrapper mb-0">
|
||||||
<a className="nav-item nav-link search-toggler px-0" href="#;">
|
<a className="nav-item nav-link search-toggler px-0" href="#">
|
||||||
<span
|
<span
|
||||||
className="d-inline-block text-body-secondary fw-normal"
|
className="d-inline-block text-body-secondary fw-normal"
|
||||||
id="autocomplete"
|
id="autocomplete"
|
||||||
|
|||||||
@ -5,16 +5,17 @@ const Breadcrumb = ({ data }) => {
|
|||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
return (
|
return (
|
||||||
<nav aria-label="breadcrumb">
|
<nav aria-label="breadcrumb">
|
||||||
<ol className="breadcrumb breadcrumb-style1">
|
<ol className="breadcrumb breadcrumb-custom-icon">
|
||||||
{data.map((item, index) =>
|
{data.map((item, index) =>
|
||||||
item.link ? (
|
item.link ? (
|
||||||
<li className="breadcrumb-item cursor-pointer" key={index}>
|
<li className="breadcrumb-item cursor-pointer" key={index}>
|
||||||
<a
|
<a
|
||||||
aria-label="pagination link link-underline-primary "
|
aria-label="breadcrumb link link-underline-primary "
|
||||||
onClick={() => navigate(item.link)}
|
onClick={() => navigate(item.link)}
|
||||||
>
|
>
|
||||||
{item.label}
|
{item.label}
|
||||||
</a>
|
</a>
|
||||||
|
<i className="breadcrumb-icon icon-base bx bx-chevron-right align-middle"></i>
|
||||||
</li>
|
</li>
|
||||||
) : (
|
) : (
|
||||||
<li
|
<li
|
||||||
|
|||||||
@ -366,7 +366,7 @@ const EmployeeList = () => {
|
|||||||
}
|
}
|
||||||
className="text-heading text-truncate cursor-pointer"
|
className="text-heading text-truncate cursor-pointer"
|
||||||
>
|
>
|
||||||
<span className="fw-medium">
|
<span className="fw-normal">
|
||||||
{item.firstName} {item.lastName}
|
{item.firstName} {item.lastName}
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user