{% extends "base.html" %}
{% block title %}Landlord Snapshot{% endblock %}

{% block content %}

<div class="container-fluid">

    <h4 class="mb-4">
        <i class="bi bi-bar-chart"></i> Quick Overview
    </h4>

    <div class="row g-3">

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

        <div class="col-md-3">
            <div class="card shadow-sm p-3">
                <h6>Pending Invoices</h6>
                <h4>{{ pending_invoices }}</h4>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card shadow-sm p-3">
                <h6>Complaints</h6>
                <h4>{{ complaints }}</h4>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card shadow-sm p-3">
                <h6>Repairs</h6>
                <h4>{{ repairs }}</h4>
            </div>
        </div>

    </div>

</div>

{% endblock %}