87 lines
3.0 KiB
JavaScript
87 lines
3.0 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import Avatar from "../common/Avatar";
|
|
import { convertShortTime } from "../../utils/dateUtils";
|
|
import RegularizationActions from "./RegularizationActions";
|
|
import { useSelector } from "react-redux";
|
|
import { useRegularizationRequests } from "../../hooks/useAttendance";
|
|
import moment from "moment";
|
|
|
|
const Regularization = ({ handleRequest }) => {
|
|
var selectedProject = useSelector((store) => store.localVariables.projectId);
|
|
const [regularizesList, setregularizedList] = useState([]);
|
|
const { regularizes, loading, error, refetch } =
|
|
useRegularizationRequests(selectedProject);
|
|
|
|
useEffect(() => {
|
|
setregularizedList(regularizes);
|
|
}, [regularizes]);
|
|
|
|
return (
|
|
<div className="table-responsive text-nowrap">
|
|
<table className="table mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th colSpan={2}>Name</th>
|
|
<th>Date</th>
|
|
<th>
|
|
<i className="bx bxs-down-arrow-alt text-success"></i>Check-In
|
|
</th>
|
|
<th>
|
|
<i className="bx bxs-up-arrow-alt text-danger"></i>Check-Out
|
|
</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{loading && <td colSpan={5}>Loading...</td>}
|
|
|
|
{!loading &&
|
|
(regularizes?.length > 0 ? (
|
|
regularizes?.map((att, index) => (
|
|
<tr key={index}>
|
|
<td colSpan={2}>
|
|
<div className="d-flex justify-content-start align-items-center">
|
|
<Avatar
|
|
firstName={att.firstName}
|
|
lastName={att.lastName}
|
|
></Avatar>
|
|
<div className="d-flex flex-column">
|
|
<a href="#" className="text-heading text-truncate">
|
|
<span className="fw-normal">
|
|
{att.firstName} {att.lastName}
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>{moment(att.checkOutTime).format("DD-MMM-YYYY")}</td>
|
|
<td>{convertShortTime(att.checkInTime)}</td>
|
|
<td>
|
|
{att.checkOutTime
|
|
? convertShortTime(att.checkOutTime)
|
|
: "--"}
|
|
</td>
|
|
<td className="text-center ">
|
|
{/* <div className='d-flex justify-content-center align-items-center gap-3'> */}
|
|
<RegularizationActions
|
|
attendanceData={att}
|
|
handleRequest={handleRequest}
|
|
refresh={refetch}
|
|
/>
|
|
{/* </div> */}
|
|
</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td colSpan={5}>No Record Found</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Regularization;
|