80 lines
3.2 KiB
JavaScript
80 lines
3.2 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>}
|
|
{
|
|
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-medium">
|
|
{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>
|
|
))
|
|
):(
|
|
<td colSpan={5}>No Record Found</td>
|
|
)
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Regularization
|