<div class="row mb-4">

    <div class="col-md-3">
        <div class="card shadow-sm p-3">
            <h6>Total Income</h6>
            <h4>KES {{ financial.total_collected }}</h4>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card shadow-sm p-3">
            <h6>Total Expenses</h6>
            <h4>KES {{ financial.total_expenses }}</h4>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card shadow-sm p-3">
            <h6>Net Profit</h6>
            <h4>KES {{ financial.net_profit }}</h4>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card shadow-sm p-3">
            <h6>Occupancy Rate</h6>
            <h4>{{ occupancy.occupancy_rate }}%</h4>
        </div>
    </div>

</div>