112 lines
5.3 KiB
HTML
112 lines
5.3 KiB
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>Page {{ pagination.page }} of {{ pagination.pages }} · {{ ((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 %}
|