marco.pms.web/src/components/Dashboard/PendingAttendance.jsx

32 lines
1.1 KiB
JavaScript

import React from "react";
import { useDashboardPendingAttendenceData } from "../../hooks/useDashboard_Data";
const PendingAttendance = () => {
const { PendingAttendenceData } = useDashboardPendingAttendenceData();
return (
<div className="card p-3 h-100 text-center d-flex justify-content-between">
<div className="d-flex justify-content-start align-items-center mb-3">
<h5 className="fw-bold mb-0 ms-2">
<i className="bx bx-group text-warning"></i> Pending Attendence
</h5>
</div>
<div className="d-flex justify-content-around align-items-start mt-n2">
<div>
<h4 className="mb-0 fw-bold">
{PendingAttendenceData.pendingCheckOut?.toLocaleString()}
</h4>
<small className="text-muted">Checkout</small>
</div>
<div>
<h4 className="mb-0 fw-bold">
{PendingAttendenceData.pendingRegularization?.toLocaleString()}
</h4>
<small className="text-muted">Regularization</small>
</div>
</div>
</div>
);
};
export default PendingAttendance;