Personal-Finance-Management/app/templates/accounts/payments.html

{% extends "base.html" %}
{% block title %}Payments — {{ account.name }}{% endblock %}
{% block page_title %}Card Payments{% endblock %}

{% block topbar_actions %}
<a href="{{ url_for('transactions.transfer', to_account_id=account.id, description='Credit Card Payment — ' ~ account.name) }}"
   class="btn btn-sm btn-danger" style="font-size:12px;">
    <i class="bi bi-send"></i><span class="btn-label ms-1">Pay Card</span>
</a>
{% endblock %}

{% block content %}

<!-- Account header -->
<div class="pcard mb-3" style="border-left: 4px solid {{ account.color }};">
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
        <div class="d-flex align-items-center gap-2">
            <div style="width:36px;height:36px;border-radius:9px;background:{{ account.color }}22;color:{{ account.color }};display:flex;align-items:center;justify-content:center;font-size:18px;">
                <i class="bi {{ account.icon }}"></i>
            </div>
            <div>
                <div style="font-weight:600;font-size:14px;">{{ account.name }}</div>
                <div style="font-size:11px;color:var(--muted);">Payment History</div>
            </div>
        </div>
        <div class="d-flex gap-3">
            <div style="text-align:right;">
                <div style="font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;">Paid This Month</div>
                <div class="mono text-income" style="font-size:18px;font-weight:700;">+{{ paid_this_month | currency }}</div>
            </div>
            <div style="text-align:right;">
                {% set owed = [0, -account.balance] | max %}
                <div style="font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;">Still Owed</div>
                <div class="mono {% if owed > 0 %}text-expense{% endif %}" style="font-size:18px;font-weight:700;{% if owed == 0 %}color:#10b981;{% endif %}">
                    {% if owed > 0 %}-{% endif %}{{ owed | currency }}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Back link -->
<div class="mb-2">
    <a href="{{ url_for('accounts.index', tab='credit') }}" class="btn btn-sm btn-outline-secondary" style="font-size:12px;">
        <i class="bi bi-arrow-left me-1"></i>Back to Accounts
    </a>
    <a href="{{ url_for('transactions.index', tab='expense', account_id=account.id) }}" class="btn btn-sm btn-outline-secondary ms-1" style="font-size:12px;">
        <i class="bi bi-list-ul me-1"></i>View Charges
    </a>
</div>

{% if payments %}
<div class="pcard p-0">
    <table class="pfm-table">
        <thead>
            <tr>
                <th style="padding-left:20px;">Date</th>
                <th>Description</th>
                <th class="d-mob-none">From Account</th>
                <th class="text-end" style="padding-right:20px;">Amount Paid</th>
            </tr>
        </thead>
        <tbody>
        {% for txn in payments %}
        <tr>
            <td style="padding-left:20px;font-size:12px;color:var(--muted);white-space:nowrap;">
                {{ txn.date.strftime('%b %d, %Y') }}
            </td>
            <td>
                <div style="font-size:13px;font-weight:500;">{{ txn.description }}</div>
                {% if txn.notes %}<div style="font-size:11px;color:var(--muted);">{{ txn.notes | truncate(60) }}</div>{% endif %}
            </td>
            <td class="d-mob-none" style="font-size:12px;color:var(--muted);">
                {{ txn.account.name if txn.account else '—' }}
            </td>
            <td class="text-end mono text-income" style="font-size:13px;font-weight:600;padding-right:20px;">
                +{{ txn.amount | currency }}
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>

    {% if pagination.pages > 1 %}
    <div class="d-flex justify-content-between align-items-center px-4 py-3" style="border-top:1px solid var(--border);font-size:12px;color:var(--muted);">
        <span>{{ ((pagination.page-1)*30)+1 }}–{{ [pagination.page*30, pagination.total]|min }} of {{ pagination.total }}</span>
        <div class="d-flex gap-1">
            {% if pagination.has_prev %}
            <a href="{{ url_for('accounts.payments', id=account.id, page=pagination.prev_num) }}" class="btn btn-sm btn-outline-secondary" style="font-size:11px;">← Prev</a>
            {% endif %}
            {% if pagination.has_next %}
            <a href="{{ url_for('accounts.payments', id=account.id, page=pagination.next_num) }}" class="btn btn-sm btn-outline-secondary" style="font-size:11px;">Next →</a>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>

{% else %}
<div class="pcard text-center py-5">
    <i class="bi bi-send text-muted" style="font-size:3rem;opacity:.4;"></i>
    <p class="fw-semibold mt-3 mb-1">No payments recorded yet</p>
    <p class="text-muted small mb-3">Use "Pay Card" to record a payment from your checking or savings account.</p>
    <a href="{{ url_for('transactions.transfer', to_account_id=account.id, description='Credit Card Payment — ' ~ account.name) }}"
       class="btn btn-sm btn-danger">
        <i class="bi bi-send me-1"></i>Record First Payment
    </a>
</div>
{% endif %}

{% endblock %}