105 lines
4.2 KiB
JavaScript
105 lines
4.2 KiB
JavaScript
import React,{useState}from "react";
|
|
import moment from "moment";
|
|
import Avatar from "../common/Avatar";
|
|
import { convertShortTime } from "../../utils/dateUtils";
|
|
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()
|
|
|
|
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.map((item) => (
|
|
<tr key={item.id}>
|
|
<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
|
|
// href="#"
|
|
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>
|
|
</td>
|
|
|
|
<td>
|
|
<span className="badge bg-label-primary me-1">
|
|
{getRole(item.roleID)}
|
|
</span>
|
|
</td>
|
|
<td>{item.checkInTime ? convertShortTime(item.checkInTime):"--"}</td>
|
|
<td>{item.checkOutTime ? convertShortTime(item.checkOutTime):"--"}</td>
|
|
|
|
<td className="mx-24" >
|
|
<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>
|
|
)}
|
|
</div>
|
|
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Attendance; |