111 lines
4.1 KiB
HTML
111 lines
4.1 KiB
HTML
<div class="row">
|
|
<div class="col-md-2 mb-3">
|
|
<div class="card stat-card bg-primary text-white">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h4 class="card-title">{{ stats.total_appointments }}</h4>
|
|
<p class="card-text">Total Appointments</p>
|
|
</div>
|
|
<i class="fas fa-calendar-alt fa-2x opacity-75"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-2 mb-3">
|
|
<div class="card stat-card bg-info text-white">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h4 class="card-title">{{ stats.todays_appointments }}</h4>
|
|
<p class="card-text">Today's Appointments</p>
|
|
</div>
|
|
<i class="fas fa-calendar-day fa-2x opacity-75"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-2 mb-3">
|
|
<div class="card stat-card bg-warning text-white">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h4 class="card-title">{{ stats.pending_appointments }}</h4>
|
|
<p class="card-text">Pending</p>
|
|
</div>
|
|
<i class="fas fa-clock fa-2x opacity-75"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-2 mb-3">
|
|
<div class="card stat-card bg-success text-white">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h4 class="card-title">{{ stats.completed_today }}</h4>
|
|
<p class="card-text">Completed Today</p>
|
|
</div>
|
|
<i class="fas fa-check-circle fa-2x opacity-75"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-2 mb-3">
|
|
<div class="card stat-card bg-secondary text-white">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h4 class="card-title">{{ stats.total_in_queue }}</h4>
|
|
<p class="card-text">In Queue</p>
|
|
</div>
|
|
<i class="fas fa-users fa-2x opacity-75"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-2 mb-3">
|
|
<div class="card stat-card bg-dark text-white">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h4 class="card-title">{{ stats.telemedicine_today }}</h4>
|
|
<p class="card-text">Telemedicine</p>
|
|
</div>
|
|
<i class="fas fa-video fa-2x opacity-75"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if stats.provider_stats %}
|
|
<div class="row mt-3">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="card-title mb-0">
|
|
<i class="fas fa-chart-bar"></i> Top Providers Today
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
{% for provider in stats.provider_stats %}
|
|
<div class="col-md-2 text-center mb-2">
|
|
<div class="h5 mb-0">{{ provider.appointment_count }}</div>
|
|
<small class="text-muted">{{ provider.provider__first_name }} {{ provider.provider__last_name }}</small>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|