67 lines
3.3 KiB
HTML
67 lines
3.3 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ goal.name }} — History{% endblock %}
|
|
{% block page_title %}{{ goal.name }}{% endblock %}
|
|
|
|
{% block topbar_actions %}
|
|
<a href="{{ url_for('goals.contribute', id=goal.id) }}" class="btn btn-sm btn-primary" style="font-size:12px;"><i class="bi bi-plus-lg me-1"></i>Add Contribution</a>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Goal summary -->
|
|
<div class="pcard mb-4" style="border-left:4px solid {{ goal.color }};">
|
|
<div class="row align-items-center g-3">
|
|
<div class="col-12 col-md-8">
|
|
<div style="height:10px;background:#f1f5f9;border-radius:5px;overflow:hidden;">
|
|
<div style="height:10px;border-radius:5px;background:{{ goal.color }};width:{{ goal.progress_percent }}%;transition:width .6s;"></div>
|
|
</div>
|
|
<div class="d-flex justify-content-between mt-2">
|
|
<span class="mono" style="font-size:14px;font-weight:600;color:{{ goal.color }};">{{ goal.current_amount | currency }}</span>
|
|
<span class="mono text-muted" style="font-size:13px;">{{ goal.target_amount | currency }}</span>
|
|
</div>
|
|
<small class="text-muted">{{ goal.progress_percent }}% complete</small>
|
|
</div>
|
|
<div class="col-12 col-md-4 text-md-end">
|
|
{% if projection %}
|
|
<div style="font-size:12px;color:var(--muted);">Projected completion</div>
|
|
<div style="font-size:15px;font-weight:600;">{{ projection.strftime('%B %Y') }}</div>
|
|
{% endif %}
|
|
{% if goal.target_date %}
|
|
<div style="font-size:12px;color:var(--muted);">Target: {{ goal.target_date.strftime('%b %d, %Y') }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contribution history -->
|
|
<div class="pcard p-0">
|
|
<div class="d-flex justify-content-between align-items-center px-4 py-3" style="border-bottom:1px solid var(--border);">
|
|
<span class="pcard-title mb-0">Contribution History</span>
|
|
<span class="text-muted" style="font-size:12px;">{{ contribs|length }} contributions</span>
|
|
</div>
|
|
{% if contribs %}
|
|
<table class="pfm-table">
|
|
<thead><tr><th style="padding-left:20px;">Date</th><th>Amount</th><th>Notes</th><th class="text-end" style="padding-right:20px;">Actions</th></tr></thead>
|
|
<tbody>
|
|
{% for c in contribs %}
|
|
<tr>
|
|
<td style="padding-left:20px;font-size:12px;color:var(--muted);">{{ c.date.strftime('%b %d, %Y') }}</td>
|
|
<td><span class="mono text-income" style="font-size:13px;font-weight:500;">+{{ c.amount | currency }}</span></td>
|
|
<td style="font-size:12px;color:var(--muted);">{{ c.notes or '—' }}</td>
|
|
<td class="text-end" style="padding-right:20px;">
|
|
<form method="POST" action="{{ url_for('goals.delete_contribution', id=c.id) }}" onsubmit="return confirm('Remove this contribution?')">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
<button type="submit" class="btn btn-sm btn-outline-danger" style="font-size:11px;padding:2px 8px;">Del</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{% else %}
|
|
<div class="text-center py-4">
|
|
<p class="text-muted small mb-0">No contributions yet.</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|