81 lines
2.0 KiB
JavaScript
81 lines
2.0 KiB
JavaScript
import React, { useEffect, useState } from 'react'
|
|
import { useEmployeeAttendacesLog } from '../../hooks/useAttendance';
|
|
import { convertShortTime } from '../../utils/dateUtils';
|
|
|
|
|
|
const AttendLogs = ({ Id }) => {
|
|
|
|
const {logs, loading} = useEmployeeAttendacesLog( Id )
|
|
|
|
const whichActivityPerform = ( actvity ) =>
|
|
{
|
|
switch (actvity) {
|
|
case 1:
|
|
return "IN"
|
|
break;
|
|
case 2:
|
|
return "Requested"
|
|
break;
|
|
case 3:
|
|
return "Deleted"
|
|
break;
|
|
case 4:
|
|
return "OUT"
|
|
break;
|
|
case 5:
|
|
return "Regularized"
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="table-responsive">
|
|
{loading && <p>Loading..</p>}
|
|
{ logs && logs.length > 0 && (
|
|
<>
|
|
<div className="d-flex justify-content-start align-items-center gap-2 my-1">
|
|
<div className="align-item-center">
|
|
<p className="p-0 m-0">Date : {logs[0].activityTime.slice(0,10)} </p>
|
|
</div>
|
|
</div>
|
|
|
|
<table className="table table-sm mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th style={{width: '15%'}}>Time</th>
|
|
<th style={{ width: '20%' }}>Activity</th>
|
|
<th style={{ width: '20%' }}>Date</th>
|
|
<th style={{ width: '45%' }}>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{logs
|
|
.slice()
|
|
.sort((a, b) => b.id - a.id)
|
|
.map((log, index) => (
|
|
<tr key={index}>
|
|
<td>{convertShortTime( log.activityTime )}</td>
|
|
<td>{whichActivityPerform(log.activity)}</td>
|
|
<td>{log.activityTime.slice(0, 10)}</td>
|
|
<td className="text-wrap" colSpan={3}>
|
|
{log?.comment}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</>
|
|
)
|
|
}
|
|
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AttendLogs;
|
|
|
|
|