nngo/Personal-Finance-Management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

06/01 Optimize account balances

Browse Source
This commit is contained in:
nngo
2026-06-01 17:42:25 -04:00
parent b19c202786
commit d8608c7058
2 changed files with 104 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/teller/index.html
+58 -16
View File
@@ -3,6 +3,15 @@
{% block page_title %}Bank Connections{% endblock %}
{% block topbar_actions %}
{% if enrollments %}
<form method="POST" action="{{ url_for('teller.refresh_all_balances') }}" class="d-inline">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button type="submit" class="btn btn-sm btn-outline-secondary me-1" style="font-size:12px;"
title="Pull live balances from your bank for all connected accounts">
<i class="bi bi-arrow-clockwise me-1"></i>Refresh All Balances
</button>
</form>
{% endif %}
<button id="tellerConnectBtn" class="btn btn-sm btn-primary" style="font-size:12px;"
{% if not teller_app_id %}title="TELLER_APP_ID not set in .env" style="opacity:.6;"{% endif %}>
<i class="bi bi-bank me-1"></i>Connect a Bank
@@ -33,30 +42,44 @@
{% for ta in accounts %}
<div class="d-flex justify-content-between align-items-center py-2" style="border-top:1px solid var(--border);">
<div class="d-flex align-items-center gap-2">
<div style="width:32px;height:32px;border-radius:8px;background:#dbeafe;color:#1e40af;display:flex;align-items:center;justify-content:center;font-size:14px;">
<div class="d-flex align-items-center gap-2" style="min-width:0;">
<div style="width:32px;height:32px;border-radius:8px;background:#dbeafe;color:#1e40af;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;">
<i class="bi {% if ta.account_subtype == 'credit_card' %}bi-credit-card{% elif ta.account_subtype == 'savings' %}bi-piggy-bank{% else %}bi-bank{% endif %}"></i>
</div>
<div>
<div style="font-size:13px;font-weight:500;">{{ ta.account_name }}</div>
<div style="min-width:0;">
<div class="d-flex align-items-center gap-2 flex-wrap">
<span style="font-size:13px;font-weight:500;">{{ ta.account_name }}</span>
{% if ta.pfm_account %}
{# Balance display — updated in-place by refreshBalance() #}
<span id="bal-{{ ta.id }}" class="mono"
style="font-size:13px;font-weight:600;color:var(--text);">
{{ ta.pfm_account.balance | currency }}
</span>
{% if ta.last_sync_date %}
<span style="font-size:10px;color:var(--muted);">
synced {{ ta.last_sync_date.strftime('%b %d') }}
</span>
{% endif %}
{% endif %}
</div>
<div style="font-size:11px;color:var(--muted);">
{{ ta.account_subtype | replace('_',' ') | title }}
{% if ta.pfm_account %}
· Mapped to <strong>{{ ta.pfm_account.name }}</strong>
· <span style="color:var(--muted);">{{ ta.pfm_account.name }}</span>
{% else %}
· <span style="color:#f59e0b;">Not mapped</span>
{% endif %}
</div>
</div>
</div>
<div class="d-flex align-items-center gap-2">
<div class="d-flex align-items-center gap-2 flex-shrink-0 ms-2">
{% if ta.pfm_account %}
<!-- Balance refresh -->
<button onclick="refreshBalance({{ ta.id }}, this)"
class="btn btn-sm btn-outline-secondary" style="font-size:11px;" title="Refresh live balance">
<button id="refbtn-{{ ta.id }}"
onclick="refreshBalance({{ ta.id }}, this)"
class="btn btn-sm btn-outline-secondary" style="font-size:11px;"
title="Pull live balance from bank">
<i class="bi bi-arrow-clockwise"></i>
</button>
<!-- Sync transactions -->
<a href="{{ url_for('teller.sync_preview_view', teller_account_id=ta.id) }}"
class="btn btn-sm btn-outline-primary" style="font-size:11px;">
<i class="bi bi-cloud-download me-1"></i>Sync
@@ -182,7 +205,8 @@ initTellerConnect(document.getElementById('tellerConnectBtn2'));
function refreshBalance(taId, btn) {
btn.disabled = true;
btn.innerHTML = '<i class="bi bi-hourglass-split"></i>';
btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';
fetch('/teller/balance/' + taId, {
method: 'POST',
headers: { 'X-CSRFToken': CSRF },
@@ -191,20 +215,38 @@ function refreshBalance(taId, btn) {
.then(data => {
btn.disabled = false;
btn.innerHTML = '<i class="bi bi-arrow-clockwise"></i>';
if (data.balance != null) {
if (data.available != null) {
const sym = '{{ current_user.currency_symbol }}';
btn.title = 'Balance: ' + sym + parseFloat(data.balance).toLocaleString(undefined, {minimumFractionDigits:2});
const fmt = v => sym + parseFloat(v).toLocaleString(undefined, {minimumFractionDigits:2, maximumFractionDigits:2});
// Update inline balance display
const balEl = document.getElementById('bal-' + taId);
if (balEl) {
balEl.textContent = fmt(data.available);
balEl.style.color = '#10b981';
setTimeout(() => balEl.style.color = '', 2500);
}
// Show available vs ledger in button tooltip
const ledgerNote = (data.ledger !== data.available)
? ` · Ledger: ${fmt(data.ledger)}`
: '';
btn.title = `Available: ${fmt(data.available)}${ledgerNote} — updated just now`;
btn.style.color = '#10b981';
setTimeout(() => btn.style.color = '', 3000);
setTimeout(() => { btn.style.color = ''; btn.title = 'Pull live balance from bank'; }, 3000);
} else {
btn.title = data.error || 'Failed';
btn.title = data.error || 'Refresh failed';
btn.style.color = '#ef4444';
setTimeout(() => btn.style.color = '', 3000);
setTimeout(() => { btn.style.color = ''; btn.title = 'Pull live balance from bank'; }, 4000);
}
})
.catch(() => {
btn.disabled = false;
btn.innerHTML = '<i class="bi bi-arrow-clockwise"></i>';
btn.title = 'Network error — try again';
btn.style.color = '#ef4444';
setTimeout(() => { btn.style.color = ''; btn.title = 'Pull live balance from bank'; }, 4000);
});
}
</script>