hospital-management/templates/laboratory/partials/lab_stats.html

<!-- Laboratory Statistics Cards -->
<div class="col-xl-3 col-md-6 mb-3">
    <div class="card bg-gradient-primary text-white">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="h2 mb-1">{{ stats.total_orders_today|default:0 }}</div>
                    <div class="small">Orders Today</div>
                </div>
                <div class="fa-3x opacity-50">
                    <i class="fas fa-clipboard-list"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-xl-3 col-md-6 mb-3">
    <div class="card bg-gradient-{% if stats.pending_orders > 0 %}warning{% else %}secondary{% endif %} text-white">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="h2 mb-1">{{ stats.pending_orders|default:0 }}</div>
                    <div class="small">Pending Orders</div>
                </div>
                <div class="fa-3x opacity-50">
                    <i class="fas fa-clock"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-xl-3 col-md-6 mb-3">
    <div class="card bg-gradient-{% if stats.stat_orders > 0 %}danger{% else %}secondary{% endif %} text-white">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="h2 mb-1">{{ stats.stat_orders|default:0 }}</div>
                    <div class="small">STAT Orders</div>
                </div>
                <div class="fa-3x opacity-50">
                    <i class="fas fa-exclamation-triangle"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-xl-3 col-md-6 mb-3">
    <div class="card bg-gradient-{% if stats.critical_results > 0 %}danger{% else %}secondary{% endif %} text-white">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="h2 mb-1">{{ stats.critical_results|default:0 }}</div>
                    <div class="small">Critical Results</div>
                </div>
                <div class="fa-3x opacity-50">
                    <i class="fas fa-exclamation-circle"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-xl-3 col-md-6 mb-3">
    <div class="card bg-gradient-success text-white">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="h2 mb-1">{{ stats.specimens_collected_today|default:0 }}</div>
                    <div class="small">Specimens Collected</div>
                </div>
                <div class="fa-3x opacity-50">
                    <i class="fas fa-vial"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-xl-3 col-md-6 mb-3">
    <div class="card bg-gradient-{% if stats.results_pending_verification > 0 %}warning{% else %}secondary{% endif %} text-white">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="h2 mb-1">{{ stats.results_pending_verification|default:0 }}</div>
                    <div class="small">Pending Verification</div>
                </div>
                <div class="fa-3x opacity-50">
                    <i class="fas fa-check-circle"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-xl-3 col-md-6 mb-3">
    <div class="card bg-gradient-{% if stats.qc_failures_today > 0 %}danger{% else %}secondary{% endif %} text-white">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="h2 mb-1">{{ stats.qc_failures_today|default:0 }}</div>
                    <div class="small">QC Failures Today</div>
                </div>
                <div class="fa-3x opacity-50">
                    <i class="fas fa-times-circle"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-xl-3 col-md-6 mb-3">
    <div class="card bg-gradient-info text-white">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <div class="h2 mb-1">{{ stats.total_orders_today|add:stats.specimens_collected_today|default:0 }}</div>
                    <div class="small">Total Activity</div>
                </div>
                <div class="fa-3x opacity-50">
                    <i class="fas fa-chart-bar"></i>
                </div>
            </div>
        </div>
    </div>
</div>