<div class="card shadow-sm p-3 mb-4">
    <h6>Arrears Breakdown</h6>

    <table class="table table-sm">
        <thead>
            <tr>
                <th>Range</th>
                <th>Amount (KES)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>0–7 Days</td>
                <td>{{ arrears.range_0_7 }}</td>
            </tr>
            <tr>
                <td>8–30 Days</td>
                <td>{{ arrears.range_8_30 }}</td>
            </tr>
            <tr>
                <td>31–60 Days</td>
                <td>{{ arrears.range_31_60 }}</td>
            </tr>
            <tr>
                <td>60+ Days</td>
                <td>{{ arrears.range_60_plus }}</td>
            </tr>
        </tbody>
    </table>
</div>