321 lines
14 KiB
HTML
321 lines
14 KiB
HTML
<!-- Patient Statistics Cards -->
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-6 mb-4">
|
|
<div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
|
|
<div class="card-body text-white">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h3 class="mb-1 fw-bold">{{ stats.total_patients|default:0 }}</h3>
|
|
<p class="mb-0 opacity-75">Total Patients</p>
|
|
</div>
|
|
<div class="text-white-50">
|
|
<i class="fas fa-users fa-2x"></i>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3">
|
|
<small class="opacity-75">
|
|
<i class="fas fa-arrow-up me-1"></i>
|
|
{{ stats.growth_percentage|default:0 }}% from last month
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 mb-4">
|
|
<div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
|
|
<div class="card-body text-white">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h3 class="mb-1 fw-bold">{{ stats.active_patients|default:0 }}</h3>
|
|
<p class="mb-0 opacity-75">Active Patients</p>
|
|
</div>
|
|
<div class="text-white-50">
|
|
<i class="fas fa-user-check fa-2x"></i>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3">
|
|
<small class="opacity-75">
|
|
<i class="fas fa-heartbeat me-1"></i>
|
|
{{ stats.active_percentage|default:0 }}% of total
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 mb-4">
|
|
<div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
|
|
<div class="card-body text-white">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h3 class="mb-1 fw-bold">{{ stats.vip_patients|default:0 }}</h3>
|
|
<p class="mb-0 opacity-75">VIP Patients</p>
|
|
</div>
|
|
<div class="text-white-50">
|
|
<i class="fas fa-star fa-2x"></i>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3">
|
|
<small class="opacity-75">
|
|
<i class="fas fa-crown me-1"></i>
|
|
Premium care patients
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 mb-4">
|
|
<div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
|
|
<div class="card-body text-white">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h3 class="mb-1 fw-bold">{{ stats.recent_registrations|default:0 }}</h3>
|
|
<p class="mb-0 opacity-75">New (30 days)</p>
|
|
</div>
|
|
<div class="text-white-50">
|
|
<i class="fas fa-user-plus fa-2x"></i>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3">
|
|
<small class="opacity-75">
|
|
<i class="fas fa-calendar me-1"></i>
|
|
Recent registrations
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Demographics and Distribution Charts -->
|
|
<div class="row">
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-header bg-transparent border-0 pb-0">
|
|
<h5 class="mb-0 fw-semibold">
|
|
<i class="fas fa-chart-pie text-primary me-2"></i>Age Demographics
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row text-center">
|
|
<div class="col-4">
|
|
<div class="p-3 rounded-3" style="background: rgba(13, 110, 253, 0.1);">
|
|
<h4 class="mb-1 text-primary fw-bold">{{ stats.pediatric_count|default:0 }}</h4>
|
|
<small class="text-muted fw-medium">Pediatric</small>
|
|
<div class="text-muted small">< 18 years</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="p-3 rounded-3" style="background: rgba(25, 135, 84, 0.1);">
|
|
<h4 class="mb-1 text-success fw-bold">{{ stats.adult_count|default:0 }}</h4>
|
|
<small class="text-muted fw-medium">Adult</small>
|
|
<div class="text-muted small">18-64 years</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="p-3 rounded-3" style="background: rgba(255, 193, 7, 0.1);">
|
|
<h4 class="mb-1 text-warning fw-bold">{{ stats.geriatric_count|default:0 }}</h4>
|
|
<small class="text-muted fw-medium">Geriatric</small>
|
|
<div class="text-muted small">65+ years</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Age Distribution Progress Bars -->
|
|
<div class="mt-4">
|
|
<div class="mb-3">
|
|
<div class="d-flex justify-content-between align-items-center mb-1">
|
|
<small class="fw-medium">Pediatric</small>
|
|
<small class="text-muted">{{ stats.pediatric_percentage|default:0 }}%</small>
|
|
</div>
|
|
<div class="progress" style="height: 6px;">
|
|
<div class="progress-bar bg-primary" style="width: {{ stats.pediatric_percentage|default:0 }}%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="d-flex justify-content-between align-items-center mb-1">
|
|
<small class="fw-medium">Adult</small>
|
|
<small class="text-muted">{{ stats.adult_percentage|default:0 }}%</small>
|
|
</div>
|
|
<div class="progress" style="height: 6px;">
|
|
<div class="progress-bar bg-success" style="width: {{ stats.adult_percentage|default:0 }}%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-0">
|
|
<div class="d-flex justify-content-between align-items-center mb-1">
|
|
<small class="fw-medium">Geriatric</small>
|
|
<small class="text-muted">{{ stats.geriatric_percentage|default:0 }}%</small>
|
|
</div>
|
|
<div class="progress" style="height: 6px;">
|
|
<div class="progress-bar bg-warning" style="width: {{ stats.geriatric_percentage|default:0 }}%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-header bg-transparent border-0 pb-0">
|
|
<h5 class="mb-0 fw-semibold">
|
|
<i class="fas fa-chart-bar text-success me-2"></i>Gender Distribution
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row text-center mb-4">
|
|
{% for gender_stat in stats.gender_stats %}
|
|
<div class="col-4">
|
|
<div class="p-3 rounded-3" style="background: {% cycle 'rgba(220, 53, 69, 0.1)' 'rgba(13, 202, 240, 0.1)' 'rgba(108, 117, 125, 0.1)' %};">
|
|
<h4 class="mb-1 fw-bold" style="color: {% cycle '#dc3545' '#0dcaf0' '#6c757d' %};">{{ gender_stat.count|default:0 }}</h4>
|
|
<small class="text-muted fw-medium">{{ gender_stat.gender|title|default:"Unknown" }}</small>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="col-4">
|
|
<div class="p-3 rounded-3" style="background: rgba(220, 53, 69, 0.1);">
|
|
<h4 class="mb-1 text-danger fw-bold">0</h4>
|
|
<small class="text-muted fw-medium">Male</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="p-3 rounded-3" style="background: rgba(13, 202, 240, 0.1);">
|
|
<h4 class="mb-1 text-info fw-bold">0</h4>
|
|
<small class="text-muted fw-medium">Female</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<div class="p-3 rounded-3" style="background: rgba(108, 117, 125, 0.1);">
|
|
<h4 class="mb-1 text-secondary fw-bold">0</h4>
|
|
<small class="text-muted fw-medium">Other</small>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Gender Distribution Progress Bars -->
|
|
<div class="mt-4">
|
|
{% for gender_stat in stats.gender_stats %}
|
|
<div class="mb-3">
|
|
<div class="d-flex justify-content-between align-items-center mb-1">
|
|
<small class="fw-medium">{{ gender_stat.gender|title|default:"Unknown" }}</small>
|
|
<small class="text-muted">{{ gender_stat.percentage|default:0 }}%</small>
|
|
</div>
|
|
<div class="progress" style="height: 6px;">
|
|
<div class="progress-bar"
|
|
style="width: {{ gender_stat.percentage|default:0 }}%; background-color: {% cycle '#dc3545' '#0dcaf0' '#6c757d' %};"></div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="text-center text-muted">
|
|
<i class="fas fa-chart-bar fa-2x mb-2"></i>
|
|
<p class="mb-0">No gender distribution data available</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Statistics Row -->
|
|
<div class="row">
|
|
<div class="col-lg-3 col-md-6 mb-4">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body text-center">
|
|
<div class="text-primary mb-2">
|
|
<i class="fas fa-calendar-check fa-2x"></i>
|
|
</div>
|
|
<h5 class="mb-1 fw-bold">{{ stats.appointments_today|default:0 }}</h5>
|
|
<small class="text-muted">Appointments Today</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 mb-4">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body text-center">
|
|
<div class="text-success mb-2">
|
|
<i class="fas fa-bed fa-2x"></i>
|
|
</div>
|
|
<h5 class="mb-1 fw-bold">{{ stats.admitted_patients|default:0 }}</h5>
|
|
<small class="text-muted">Currently Admitted</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 mb-4">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body text-center">
|
|
<div class="text-warning mb-2">
|
|
<i class="fas fa-exclamation-triangle fa-2x"></i>
|
|
</div>
|
|
<h5 class="mb-1 fw-bold">{{ stats.critical_patients|default:0 }}</h5>
|
|
<small class="text-muted">Critical Condition</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 mb-4">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-body text-center">
|
|
<div class="text-info mb-2">
|
|
<i class="fas fa-user-clock fa-2x"></i>
|
|
</div>
|
|
<h5 class="mb-1 fw-bold">{{ stats.pending_discharges|default:0 }}</h5>
|
|
<small class="text-muted">Pending Discharge</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.card {
|
|
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
|
|
}
|
|
|
|
.progress {
|
|
border-radius: 10px;
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.progress-bar {
|
|
border-radius: 10px;
|
|
transition: width 0.6s ease;
|
|
}
|
|
|
|
.fw-semibold {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.fw-bold {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.shadow-sm {
|
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.card-body {
|
|
padding: 1rem;
|
|
}
|
|
|
|
h3, h4, h5 {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.fa-2x {
|
|
font-size: 1.5em;
|
|
}
|
|
}
|
|
</style>
|
|
|