- Tax Summary (/tax): annual gross income from Income transactions, FIFO capital gains/losses from trades, expenses by category, CSV export - Household Mode (/household): link a partner account, combined income/expense/disposable view for current month, shared goals list - Auto Import (/auto-import): schedule recurring CSV imports with account, format and optional source URL; delete schedules; webhook docs - New store methods for households and import_schedules collections - storeIface extended; mockStore updated; all tests still pass Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
114 lines
5.0 KiB
HTML
114 lines
5.0 KiB
HTML
{{template "base" .}}
|
|
|
|
{{define "content"}}
|
|
{{$d := .}}
|
|
<style>
|
|
.hh-hero { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
|
|
.hh-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px 24px; flex:1; min-width:160px; }
|
|
.hh-card h3 { margin:0 0 4px; font-size:0.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
|
|
.hh-card .val { font-size:1.5rem; font-weight:700; }
|
|
.section-title { font-size:1rem; font-weight:700; margin:24px 0 12px; }
|
|
.partner-form { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:24px; max-width:480px; }
|
|
.partner-form label { display:block; font-size:0.85rem; color:var(--muted); margin-bottom:6px; }
|
|
.partner-form input { width:100%; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); font-size:0.9rem; box-sizing:border-box; }
|
|
.btn { padding:8px 20px; border:none; border-radius:8px; font-size:0.9rem; font-weight:600; cursor:pointer; }
|
|
.btn-primary { background:var(--accent); color:#fff; }
|
|
.btn-danger { background:#f44336; color:#fff; }
|
|
.goals-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
|
|
.goal-row { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border-bottom:1px solid var(--border); font-size:0.9rem; }
|
|
.goal-row:last-child { border-bottom:none; }
|
|
.badge { padding:2px 8px; border-radius:20px; font-size:0.72rem; font-weight:600; }
|
|
.badge-committed { background:rgba(76,175,80,0.15); color:#4caf50; }
|
|
</style>
|
|
|
|
<h1 style="margin:0 0 24px;">Household</h1>
|
|
|
|
{{if not $d.HasHousehold}}
|
|
<div class="partner-form">
|
|
<h2 style="margin:0 0 16px; font-size:1.1rem;">Link a partner account</h2>
|
|
<p style="font-size:0.85rem; color:var(--muted); margin:0 0 20px;">
|
|
Combine your finances with a partner to see a shared dashboard. Enter their account email address below.
|
|
</p>
|
|
<form method="post" action="/household">
|
|
<label for="partner_email">Partner email</label>
|
|
<input type="email" id="partner_email" name="partner_email" placeholder="partner@example.com" required style="margin-bottom:16px;">
|
|
<button type="submit" class="btn btn-primary" style="width:100%;">Link Partner</button>
|
|
</form>
|
|
</div>
|
|
{{else}}
|
|
|
|
<div style="display:flex; align-items:center; gap:12px; margin-bottom:20px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px 20px;">
|
|
<div style="flex:1;">
|
|
<div style="font-size:0.8rem; color:var(--muted);">Linked partner</div>
|
|
<div style="font-weight:600;">{{$d.PartnerEmail}}</div>
|
|
</div>
|
|
<button class="btn btn-danger" onclick="unlinkHousehold()" style="font-size:0.8rem; padding:6px 14px;">Unlink</button>
|
|
</div>
|
|
|
|
<div class="section-title">This Month — Combined View</div>
|
|
<div class="hh-hero">
|
|
<div class="hh-card">
|
|
<h3>Combined Income</h3>
|
|
<div class="val" style="color:#4caf50;">€{{cents $d.CombinedIncomeCents}}</div>
|
|
</div>
|
|
<div class="hh-card">
|
|
<h3>My Income</h3>
|
|
<div class="val">€{{cents $d.MyIncomeCents}}</div>
|
|
</div>
|
|
<div class="hh-card">
|
|
<h3>Partner Income</h3>
|
|
<div class="val">€{{cents $d.PartnerIncomeCents}}</div>
|
|
</div>
|
|
<div class="hh-card">
|
|
<h3>Combined Expenses</h3>
|
|
<div class="val" style="color:#f44336;">€{{cents $d.CombinedExpenseCents}}</div>
|
|
</div>
|
|
<div class="hh-card">
|
|
<h3>Disposable</h3>
|
|
{{if ge $d.CombinedDisposable 0}}
|
|
<div class="val" style="color:#4caf50;">€{{cents $d.CombinedDisposable}}</div>
|
|
{{else}}
|
|
<div class="val" style="color:#f44336;">-€{{cents (centsAbs $d.CombinedDisposable)}}</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
{{if or $d.MyGoals $d.PartnerGoals}}
|
|
<div class="section-title">Goals</div>
|
|
<div class="goals-grid">
|
|
<div style="background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden;">
|
|
<div style="padding:12px 16px; font-weight:600; border-bottom:1px solid var(--border); font-size:0.85rem; color:var(--muted);">YOUR GOALS</div>
|
|
{{range $d.MyGoals}}
|
|
<div class="goal-row">
|
|
<span>{{.Name}}</span>
|
|
{{if .Committed}}<span class="badge badge-committed">committed</span>{{end}}
|
|
</div>
|
|
{{else}}
|
|
<div style="padding:16px; color:var(--muted); font-size:0.85rem;">No goals</div>
|
|
{{end}}
|
|
</div>
|
|
<div style="background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden;">
|
|
<div style="padding:12px 16px; font-weight:600; border-bottom:1px solid var(--border); font-size:0.85rem; color:var(--muted);">PARTNER GOALS</div>
|
|
{{range $d.PartnerGoals}}
|
|
<div class="goal-row">
|
|
<span>{{.Name}}</span>
|
|
{{if .Committed}}<span class="badge badge-committed">committed</span>{{end}}
|
|
</div>
|
|
{{else}}
|
|
<div style="padding:16px; color:var(--muted); font-size:0.85rem;">No goals</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{end}}
|
|
|
|
<script>
|
|
function unlinkHousehold() {
|
|
if (!confirm('Unlink household? This only removes the link, not any data.')) return;
|
|
fetch('/household', { method: 'DELETE' })
|
|
.then(r => { if (r.ok) location.reload(); });
|
|
}
|
|
</script>
|
|
{{end}}
|