76 lines
3.0 KiB
HTML
76 lines
3.0 KiB
HTML
<div class="row">
|
|
<div class="col-md-3 mb-3">
|
|
<div class="card border-0 bg-success bg-gradient text-white h-100">
|
|
<div class="card-body text-center">
|
|
<i class="fas fa-check-circle fa-2x mb-2"></i>
|
|
<h4 class="mb-1">{{ employees_clocked_in|default:0 }}</h4>
|
|
<small>Present Today</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 mb-3">
|
|
<div class="card border-0 bg-danger bg-gradient text-white h-100">
|
|
<div class="card-body text-center">
|
|
<i class="fas fa-times-circle fa-2x mb-2"></i>
|
|
<h4 class="mb-1">{{ absent_today|default:0 }}</h4>
|
|
<small>Absent Today</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 mb-3">
|
|
<div class="card border-0 bg-warning bg-gradient text-white h-100">
|
|
<div class="card-body text-center">
|
|
<i class="fas fa-clock fa-2x mb-2"></i>
|
|
<h4 class="mb-1">{{ late_today|default:0 }}</h4>
|
|
<small>Late Arrivals</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 mb-3">
|
|
<div class="card border-0 bg-info bg-gradient text-white h-100">
|
|
<div class="card-body text-center">
|
|
<i class="fas fa-stopwatch fa-2x mb-2"></i>
|
|
<h4 class="mb-1">{{ total_hours_today|floatformat:1|default:"0.0" }}h</h4>
|
|
<small>Total Hours</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Detailed Attendance List -->
|
|
<div class="mt-4">
|
|
<h6 class="text-muted mb-3">Currently Working</h6>
|
|
{% if current_employees %}
|
|
<div class="list-group">
|
|
{% for employee in current_employees %}
|
|
<div class="list-group-item d-flex justify-content-between align-items-center">
|
|
<div class="d-flex align-items-center">
|
|
<div class="avatar-sm bg-success bg-gradient rounded-circle d-flex align-items-center justify-content-center me-3">
|
|
<span class="text-white small fw-bold">
|
|
{{ employee.first_name.0 }}{{ employee.last_name.0 }}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-0">{{ employee.get_full_name }}</h6>
|
|
<small class="text-muted">{{ employee.department.name|default:"No department" }}</small>
|
|
</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<span class="badge bg-success">Working</span>
|
|
<br><small class="text-muted">Since {{ employee.clock_in_time|time:"H:i" }}</small>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-3">
|
|
<i class="fas fa-user-clock fa-2x text-muted mb-2"></i>
|
|
<p class="text-muted mb-0">No employees currently clocked in</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|