hospital-management/templates/billing/partials/billing_stats.html

<div class="col-lg-3 col-md-6 mb-3">
    <div class="card border-success">
        <div class="card-body">
            <div class="d-flex justify-content-between">
                <div>
                    <h6 class="card-title text-success">Revenue Today</h6>
                    <h3 class="mb-0"><span class="symbol">&#xea;</span>{{ stats.total_revenue_today|floatformat:'2g' }}</h3>
                    <small class="text-muted">From paid bills</small>
                </div>
                <div class="align-self-center">
                    <i class="fas fa-dollar-sign fa-2x text-success"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-lg-3 col-md-6 mb-3">
    <div class="card border-warning">
        <div class="card-body">
            <div class="d-flex justify-content-between">
                <div>
                    <h6 class="card-title text-warning">Outstanding Bills</h6>
                    <h3 class="mb-0">{{ stats.outstanding_bills }}</h3>
                    <small class="text-muted"><span class="symbol">&#xea;</span>{{ stats.outstanding_amount|floatformat:'2g' }}</small>
                </div>
                <div class="align-self-center">
                    <i class="fas fa-file-invoice fa-2x text-warning"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-lg-3 col-md-6 mb-3">
    <div class="card border-danger">
        <div class="card-body">
            <div class="d-flex justify-content-between">
                <div>
                    <h6 class="card-title text-danger">Overdue Bills</h6>
                    <h3 class="mb-0">{{ stats.overdue_bills }}</h3>
                    <small class="text-muted"><span class="symbol">&#xea;</span>{{ stats.overdue_amount|floatformat:'2g' }}</small>
                </div>
                <div class="align-self-center">
                    <i class="fas fa-exclamation-triangle fa-2x text-danger"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-lg-3 col-md-6 mb-3">
    <div class="card border-primary">
        <div class="card-body">
            <div class="d-flex justify-content-between">
                <div>
                    <h6 class="card-title text-primary">Payments Today</h6>
                    <h3 class="mb-0"><span class="symbol">&#xea;</span>{{ stats.payments_today|floatformat:'2g' }}</h3>
                    <small class="text-muted">All payment sources</small>
                </div>
                <div class="align-self-center">
                    <i class="fas fa-credit-card fa-2x text-primary"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-lg-3 col-md-6 mb-3">
    <div class="card border-info">
        <div class="card-body">
            <div class="d-flex justify-content-between">
                <div>
                    <h6 class="card-title text-info">Pending Claims</h6>
                    <h3 class="mb-0">{{ stats.pending_claims }}</h3>
                    <small class="text-muted">Awaiting response</small>
                </div>
                <div class="align-self-center">
                    <i class="fas fa-file-medical fa-2x text-info"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-lg-3 col-md-6 mb-3">
    <div class="card border-secondary">
        <div class="card-body">
            <div class="d-flex justify-content-between">
                <div>
                    <h6 class="card-title text-secondary">Denied Claims</h6>
                    <h3 class="mb-0">{{ stats.denied_claims }}</h3>
                    <small class="text-muted">Require attention</small>
                </div>
                <div class="align-self-center">
                    <i class="fas fa-times-circle fa-2x text-secondary"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-lg-3 col-md-6 mb-3">
    <div class="card border-dark">
        <div class="card-body">
            <div class="d-flex justify-content-between">
                <div>
                    <h6 class="card-title text-dark">Collections</h6>
                    <h3 class="mb-0"><span class="symbol">&#xea;</span>{{ stats.collections_amount|floatformat:'2g' }}</h3>
                    <small class="text-muted">In collections process</small>
                </div>
                <div class="align-self-center">
                    <i class="fas fa-gavel fa-2x text-dark"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-lg-3 col-md-6 mb-3">
    <div class="card border-light">
        <div class="card-body">
            <div class="d-flex justify-content-between">
                <div>
                    <h6 class="card-title text-muted">Last Updated</h6>
                    <h6 class="mb-0">{{ "now"|date:"M d, Y H:i" }}</h6>
                    <small class="text-muted">Real-time data</small>
                </div>
                <div class="align-self-center">
                    <i class="fas fa-sync-alt fa-2x text-muted"></i>
                </div>
            </div>
        </div>
    </div>
</div>