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

06/05 Optimize app: implement Plaid

Browse Source
This commit is contained in:
nngo
2026-06-05 09:52:11 -04:00
parent 8481e9c214
commit fbfb7ab33c
15 changed files with 1612 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/plaid/index.html
+250
View File
@@ -0,0 +1,250 @@
{% extends "base.html" %}
{% block title %}Plaid Bank Sync{% endblock %}
{% block page_title %}Plaid Bank Sync{% endblock %}
{% block content %}
{% if not plaid_configured %}
<div class="alert alert-warning" style="font-size:13px;">
<i class="bi bi-exclamation-triangle me-2"></i>
Plaid is not configured. Add <code>PLAID_CLIENT_ID</code>, <code>PLAID_SECRET</code>, and
<code>PLAID_ENV</code> to your <code>.env</code> file and restart the app.
</div>
{% endif %}
<!-- Connect card -->
<div class="pcard mb-4">
<div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
<div>
<div class="d-flex align-items-center gap-2 mb-1">
<div style="width:32px;height:32px;border-radius:8px;background:#f5f3ff;display:flex;align-items:center;justify-content:center;">
<i class="bi bi-bank2" style="color:#7c3aed;font-size:16px;"></i>
</div>
<span style="font-weight:600;font-size:15px;">Connect a Bank Account</span>
</div>
<div style="font-size:12px;color:var(--muted);">
Plaid supports 12,000+ US financial institutions — checking, savings, credit cards, and investments.
Trial accounts work in sandbox and development environments.
</div>
</div>
<button id="plaid-link-btn" class="btn btn-primary"
style="font-size:13px;min-width:150px;"
{% if not plaid_configured %}disabled{% endif %}>
<i class="bi bi-plus-lg me-1"></i>Connect Bank
</button>
</div>
</div>
{% if items %}
{% for item in items %}
<div class="pcard mb-3">
<!-- Item header -->
<div class="d-flex justify-content-between align-items-start mb-3">
<div>
<div style="font-size:15px;font-weight:600;">{{ item.institution_name }}</div>
<div style="font-size:11px;color:var(--muted);">
{{ item.accounts.filter_by(is_active=True).count() }} account(s) connected
{% if item.last_synced_at %}· Last synced {{ item.last_synced_at.strftime('%b %d, %Y %H:%M') }}{% endif %}
</div>
</div>
<div class="d-flex gap-2 flex-wrap">
<a href="{{ url_for('plaid.sync_preview_view', item_db_id=item.id) }}"
class="btn btn-sm btn-outline-primary" style="font-size:12px;">
<i class="bi bi-cloud-download me-1"></i>Sync Transactions
</a>
<form method="POST" action="{{ url_for('plaid.refresh_liabilities_view', item_db_id=item.id) }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<input type="hidden" name="next" value="{{ url_for('plaid.index') }}">
<button type="submit" class="btn btn-sm btn-outline-secondary" style="font-size:12px;"
title="Refresh credit card due dates and minimum payments">
<i class="bi bi-credit-card me-1"></i>Billing Details
</button>
</form>
<form method="POST" action="{{ url_for('plaid.disconnect', item_db_id=item.id) }}"
onsubmit="return confirm('Disconnect {{ item.institution_name }}?\nImported transactions will be kept.')">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button type="submit" class="btn btn-sm btn-outline-danger" style="font-size:12px;">
<i class="bi bi-x-lg me-1"></i>Disconnect
</button>
</form>
</div>
</div>
<!-- Accounts table -->
{% set accts = item.accounts.filter_by(is_active=True).all() %}
{% if accts %}
<div style="overflow-x:auto;">
<table class="pfm-table mb-0">
<thead>
<tr>
<th>Account</th>
<th>Type</th>
<th>Mapped to</th>
<th>Last Sync</th>
<th>Credit Card Billing</th>
<th style="text-align:right;padding-right:12px;">Actions</th>
</tr>
</thead>
<tbody>
{% for pa in accts %}
<tr>
<td>
<div style="font-size:13px;font-weight:500;">{{ pa.display_name }}</div>
<div style="font-size:11px;color:var(--muted);">{{ pa.account_type | title }} · {{ pa.account_subtype | replace('_',' ') | title }}</div>
</td>
<td>
<span class="badge" style="font-size:10px;
{% if pa.account_type == 'credit' %}background:#fee2e2;color:#991b1b;
{% elif pa.account_type == 'depository' %}background:#dbeafe;color:#1e40af;
{% else %}background:#f1f5f9;color:#475569;{% endif %}">
{{ pa.account_type | title }}
</span>
</td>
<td style="font-size:12px;">
{% if pa.pfm_account %}
<span style="color:#10b981;font-weight:500;">{{ pa.pfm_account.name }}</span>
{% else %}
<a href="{{ url_for('plaid.map_accounts', item_db_id=item.id) }}"
style="font-size:11px;color:#f59e0b;">Map Account</a>
{% endif %}
</td>
<td style="font-size:11px;color:var(--muted);">
{{ pa.last_sync_date.strftime('%b %d') if pa.last_sync_date else '—' }}
</td>
<td style="font-size:11px;">
{% if pa.account_type == 'credit' %}
{% if pa.cc_due_date %}
{% set days_left = (pa.cc_due_date - today).days %}
<div>
<span style="color:#6d28d9;font-weight:600;">Due {{ pa.cc_due_date.strftime('%b %d') }}</span>
{% if days_left <= 0 %}
<span style="color:#ef4444;font-size:10px;"> · Overdue!</span>
{% elif days_left <= 3 %}
<span style="color:#f59e0b;font-size:10px;"> · {{ days_left }}d left</span>
{% else %}
<span style="color:var(--muted);font-size:10px;"> · {{ days_left }}d</span>
{% endif %}
</div>
{% if pa.cc_minimum_payment %}
<div style="color:var(--muted);">Min: {{ pa.cc_minimum_payment | currency }}</div>
{% endif %}
{% else %}
<span style="color:var(--muted);">—</span>
{% endif %}
{% else %}
<span style="color:var(--muted);">N/A</span>
{% endif %}
</td>
<td style="text-align:right;padding-right:12px;">
{% if pa.pfm_account_id %}
<button onclick="refreshPlaidBalance({{ pa.id }}, {{ pa.pfm_account_id }}, '{{ pa.account_type }}', this)"
class="btn btn-sm btn-outline-secondary" style="font-size:11px;">
<i class="bi bi-arrow-clockwise me-1"></i>Balance
</button>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
</div>
{% endfor %}
{% else %}
<div class="pcard text-center py-5 text-muted">
<i class="bi bi-bank" style="font-size:3rem;opacity:.25;display:block;margin-bottom:16px;"></i>
<div style="font-size:14px;font-weight:500;margin-bottom:4px;">No banks connected yet</div>
<div style="font-size:12px;">Click "Connect Bank" to link your first account via Plaid.</div>
</div>
{% endif %}
{% endblock %}
{% block extra_js %}
<script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>
<script>
(function () {
const CSRF = document.querySelector('meta[name="csrf-token"]').content;
const linkBtn = document.getElementById('plaid-link-btn');
linkBtn && linkBtn.addEventListener('click', async () => {
linkBtn.disabled = true;
linkBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Loading…';
try {
const r = await fetch('{{ url_for("plaid.create_link_token_view") }}',
{ method: 'POST', headers: { 'X-CSRFToken': CSRF } });
const data = await r.json();
if (!r.ok || data.error) throw new Error(data.error || 'Failed to create link token');
const handler = Plaid.create({
token: data.link_token,
onSuccess: async (publicToken, metadata) => {
linkBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Connecting…';
const resp = await fetch('{{ url_for("plaid.exchange_token") }}', {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'X-CSRFToken': CSRF },
body: JSON.stringify({
public_token: publicToken,
institution_id: metadata.institution?.institution_id || '',
institution_name: metadata.institution?.name || 'Unknown Bank',
accounts: metadata.accounts || [],
}),
});
const result = await resp.json();
if (result.error) {
alert('Error: ' + result.error);
resetBtn();
} else {
window.location.href = result.redirect;
}
},
onExit: (err) => {
if (err) console.error('[Plaid] Link exit with error:', err);
resetBtn();
},
});
handler.open();
} catch (err) {
alert('Could not open Plaid Link: ' + err.message);
resetBtn();
}
function resetBtn() {
linkBtn.disabled = false;
linkBtn.innerHTML = '<i class="bi bi-plus-lg me-1"></i>Connect Bank';
}
});
// Balance refresh (AJAX)
window.refreshPlaidBalance = function (paId, acctId, acctType, btn) {
btn.disabled = true;
btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';
fetch('/plaid/balance/' + paId, { method: 'POST', headers: { 'X-CSRFToken': CSRF } })
.then(r => r.json())
.then(data => {
btn.disabled = false;
btn.innerHTML = '<i class="bi bi-arrow-clockwise me-1"></i>Balance';
if (data.error) {
btn.title = data.error;
btn.style.color = '#ef4444';
setTimeout(() => { btn.style.color = ''; btn.title = ''; }, 4000);
} else {
btn.style.color = '#10b981';
btn.title = 'Updated just now';
setTimeout(() => { btn.style.color = ''; btn.title = ''; }, 3000);
}
})
.catch(() => {
btn.disabled = false;
btn.innerHTML = '<i class="bi bi-arrow-clockwise me-1"></i>Balance';
btn.style.color = '#ef4444';
setTimeout(() => { btn.style.color = ''; }, 4000);
});
};
})();
</script>
{% endblock %}