4b7c01e632
Adds a full translation layer (English + European Portuguese) using
BurntSushi/toml with go:embed. Locale detection reads the lang cookie,
falls back to Accept-Language, then defaults to "en". A language switcher
in the nav writes the cookie and redirects back. All 20 personal finance
templates now use {{.T.Get "key"}} for every UI string.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
319 lines
17 KiB
HTML
319 lines
17 KiB
HTML
{{define "content"}}
|
||
{{$d := .}}
|
||
|
||
<div style="display:flex; align-items:baseline; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:8px;">
|
||
<h1>{{$d.T.Get "dashboard.title"}}</h1>
|
||
<span class="text-muted">{{if $d.Email}}{{$d.Email}}{{end}}</span>
|
||
</div>
|
||
|
||
{{if $d.Alerts}}
|
||
<div style="display:flex; flex-direction:column; gap:8px; margin-bottom:16px;">
|
||
{{range $d.Alerts}}
|
||
<div style="display:flex; align-items:flex-start; gap:10px; padding:12px 16px; border-radius:10px; font-size:13px;
|
||
{{if eq .Level "danger"}}background:rgba(248,113,113,0.08); border:1px solid rgba(248,113,113,0.25); color:var(--red);
|
||
{{else if eq .Level "warn"}}background:rgba(245,158,11,0.08); border:1px solid rgba(245,158,11,0.25); color:#f59e0b;
|
||
{{else}}background:rgba(105,121,248,0.08); border:1px solid rgba(105,121,248,0.25); color:var(--accent);{{end}}">
|
||
<span style="flex-shrink:0; font-size:15px;">{{if eq .Level "danger"}}🔴{{else if eq .Level "warn"}}⚠{{else}}ℹ{{end}}</span>
|
||
<span>{{.Message}}</span>
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
{{end}}
|
||
|
||
<!-- HERO: available to spend -->
|
||
<div class="card animate-on-scroll" style="margin-bottom:16px; padding:24px 28px;">
|
||
<div style="font-size:12px; color:var(--text2); text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; display:flex; align-items:center; gap:8px;">
|
||
{{$d.T.Get "dashboard.available_to_spend"}}
|
||
<span style="font-size:11px; background:var(--bg3); color:var(--text3); padding:2px 8px; border-radius:99px; font-weight:400; text-transform:none; letter-spacing:0;">
|
||
{{$d.T.Get "dashboard.available_formula"}}
|
||
</span>
|
||
</div>
|
||
|
||
<div style="display:flex; align-items:baseline; gap:20px; flex-wrap:wrap; margin-bottom:16px;">
|
||
<div class="animate-counter {{if lt $d.AvailableToSpend 0}}negative{{else}}positive{{end}}"
|
||
style="font-size:42px; font-weight:500; letter-spacing:-1.5px; line-height:1;"
|
||
data-target="{{$d.AvailableToSpend}}" data-prefix="€">€0.00</div>
|
||
<div style="font-size:13px; color:var(--text2);">
|
||
of <span style="color:var(--text); font-weight:500;" class="animate-counter" data-target="{{$d.DisposableIncome}}" data-prefix="€">€0.00</span> {{$d.T.Get "dashboard.disposable_label"}}
|
||
· <span style="color:var(--text2);">{{$d.MonthSpentPct}}% used</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background:var(--bg3); border-radius:99px; height:6px; overflow:hidden; margin-bottom:6px;">
|
||
<div style="height:100%; border-radius:99px; width:{{$d.MonthSpentPct}}%;
|
||
background:{{if gt $d.MonthSpentPct 90}}var(--red){{else if gt $d.MonthSpentPct 70}}#f59e0b{{else}}var(--green){{end}};
|
||
transition:width 1s ease;"></div>
|
||
</div>
|
||
<div style="display:flex; justify-content:space-between;">
|
||
<span style="font-size:11px; color:var(--text3);">Month progress: {{$d.MonthProgressPct}}%</span>
|
||
<span style="font-size:11px; color:var(--text3);">Spent: {{$d.MonthSpentPct}}%</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 3 diagnostic cards -->
|
||
<div class="grid" style="margin-bottom:16px;">
|
||
|
||
<div class="card value-card animate-on-scroll">
|
||
<h2>{{$d.T.Get "dashboard.cards.bank_should_be"}}</h2>
|
||
<div class="value animate-counter" data-target="{{$d.BankShouldBe}}" data-prefix="€" style="color:var(--text);">€0.00</div>
|
||
<p style="font-size:12px; color:var(--text3); margin-top:6px;">{{$d.T.Get "dashboard.cards.bank_should_be_sub"}}</p>
|
||
</div>
|
||
|
||
<div class="card value-card animate-on-scroll">
|
||
<h2>{{$d.T.Get "dashboard.cards.savings_rate"}}</h2>
|
||
<div class="value {{if gt $d.SavingsRatePct 0}}positive{{else}}negative{{end}}">{{$d.SavingsRatePct}}%</div>
|
||
{{if $d.LastMonthSavingsRatePct}}
|
||
<p style="font-size:12px; margin-top:6px; {{if gt $d.SavingsRatePct $d.LastMonthSavingsRatePct}}color:var(--green){{else}}color:var(--red){{end}};">
|
||
{{if gt $d.SavingsRatePct $d.LastMonthSavingsRatePct}}↑{{else}}↓{{end}} {{$d.T.Get "dashboard.alerts.vs_last_month_up"}} ({{$d.LastMonthSavingsRatePct}}%)
|
||
</p>
|
||
{{end}}
|
||
</div>
|
||
|
||
<div class="card value-card animate-on-scroll">
|
||
<h2>{{$d.T.Get "dashboard.cards.net_worth"}}</h2>
|
||
<div class="value animate-counter {{if lt $d.NetWorthCents 0}}negative{{else}}positive{{end}}"
|
||
data-target="{{$d.NetWorthCents}}" data-prefix="€">€0.00</div>
|
||
<p style="font-size:12px; color:var(--text3); margin-top:6px;"><a href="/networth" style="color:var(--accent);">{{$d.T.Get "dashboard.cards.net_worth_link"}}</a></p>
|
||
</div>
|
||
|
||
<div class="card value-card animate-on-scroll">
|
||
<h2>{{$d.T.Get "dashboard.cards.portfolio_today"}}</h2>
|
||
{{if $d.PortfolioHoldings}}
|
||
<div class="value animate-counter" data-target="{{$d.PortfolioValueCents}}" data-prefix="€" style="color:var(--text);">€0.00</div>
|
||
{{if $d.PortfolioPricesAvailable}}
|
||
<p style="font-size:12px; margin-top:6px; {{if ge $d.PortfolioPCLCents 0}}color:var(--green){{else}}color:var(--red){{end}};">
|
||
{{if ge $d.PortfolioPCLCents 0}}+{{else}}−{{end}}€{{cents (centsAbs $d.PortfolioPCLCents)}} total P&L
|
||
</p>
|
||
{{else}}
|
||
<p style="font-size:12px; color:var(--text3); margin-top:6px;">{{$d.T.Get "dashboard.cards.portfolio_cost_basis"}}</p>
|
||
{{end}}
|
||
{{else}}
|
||
<div class="value" style="color:var(--text3); font-size:18px;">{{$d.T.Get "dashboard.cards.portfolio_no_trades"}}</div>
|
||
<p style="font-size:12px; color:var(--text3); margin-top:6px;"><a href="/import" style="color:var(--accent);">{{$d.T.Get "dashboard.cards.portfolio_import_link"}}</a></p>
|
||
{{end}}
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Bank math + stocks -->
|
||
<div class="grid-2" style="margin-bottom:16px;">
|
||
|
||
<div class="card animate-on-scroll">
|
||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
|
||
<h2>{{$d.T.Get "dashboard.bank_math.section_title"}}</h2>
|
||
<span style="font-size:11px; color:var(--text3);">{{$d.T.Get "dashboard.bank_math.section_subtitle"}}</span>
|
||
</div>
|
||
{{if $d.RecurringExpenses}}
|
||
<div style="display:flex; flex-direction:column;">
|
||
{{range $d.RecurringExpenses}}
|
||
{{$color := index $d.CategoryColors .Category}}
|
||
<div style="display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--border);">
|
||
<span style="font-size:13px; color:var(--text2); display:flex; align-items:center; gap:7px;">
|
||
{{if $color}}<span style="width:7px;height:7px;border-radius:50%;background:{{$color}};display:inline-block;"></span>{{end}}
|
||
{{.Category}}
|
||
</span>
|
||
<span style="font-size:13px; font-weight:500; color:var(--red);">− €{{cents .MonthlyCents}}</span>
|
||
</div>
|
||
{{end}}
|
||
{{if $d.SafetyBufferCents}}
|
||
<div style="display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--border);">
|
||
<span style="font-size:13px; color:var(--text2);">{{$d.T.Get "dashboard.bank_math.safety_buffer"}}</span>
|
||
<span style="font-size:13px; font-weight:500; color:var(--red);">− €{{cents $d.SafetyBufferCents}}</span>
|
||
</div>
|
||
{{end}}
|
||
<div style="display:flex; justify-content:space-between; align-items:center; padding:12px 0 0 0;">
|
||
<span style="font-size:13px; font-weight:500; color:var(--text);">{{$d.T.Get "dashboard.bank_math.minimum_recommended"}}</span>
|
||
<span class="animate-counter positive" style="font-size:16px; font-weight:600;"
|
||
data-target="{{$d.BankShouldBe}}" data-prefix="€">€0.00</span>
|
||
</div>
|
||
</div>
|
||
{{else}}
|
||
<div class="empty-state" style="padding:24px;">
|
||
<p>{{$d.T.Get "dashboard.bank_math.no_recurring_msg"}}<br>{{$d.T.Get "dashboard.bank_math.no_recurring_sub"}}</p>
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
|
||
<div class="card animate-on-scroll">
|
||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
|
||
<h2>{{$d.T.Get "dashboard.stocks.section_title"}}</h2>
|
||
<a href="/portfolio" style="font-size:12px; color:var(--text3);">{{$d.T.Get "dashboard.stocks.portfolio_link"}}</a>
|
||
</div>
|
||
{{if $d.PortfolioHoldings}}
|
||
<div style="display:flex; flex-direction:column;">
|
||
{{range $d.PortfolioHoldings}}
|
||
<div style="display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border);">
|
||
<div>
|
||
<div style="font-size:13px; font-weight:600; color:var(--text);">{{.Name}}</div>
|
||
<div style="font-size:11px; color:var(--text3);">{{printf "%.4f" .SharesOwned}} {{$d.T.Get "dashboard.stocks.shares_label"}}</div>
|
||
</div>
|
||
<div style="text-align:right;">
|
||
{{if $d.PortfolioPricesAvailable}}
|
||
<div style="font-size:13px; font-weight:500; color:var(--text);">€{{cents .CurrentValueCents}}</div>
|
||
<div style="font-size:12px; {{if ge .UnrealizedPCLCents 0}}color:var(--green){{else}}color:var(--red){{end}};">
|
||
{{pctSign .UnrealizedPCLPct}}{{printf "%.1f" .UnrealizedPCLPct}}%
|
||
</div>
|
||
{{else}}
|
||
<div style="font-size:13px; font-weight:500; color:var(--text);">€{{cents .TotalCostCents}}</div>
|
||
<div style="font-size:11px; color:var(--text3);">{{$d.T.Get "dashboard.stocks.cost_basis"}}</div>
|
||
{{end}}
|
||
</div>
|
||
</div>
|
||
{{end}}
|
||
<div style="display:flex; justify-content:space-between; align-items:center; padding:12px 0 0 0;">
|
||
<span style="font-size:13px; font-weight:500; color:var(--text);">{{$d.T.Get "dashboard.stocks.total_label"}}{{if not $d.PortfolioPricesAvailable}} {{$d.T.Get "dashboard.stocks.total_invested"}}{{end}}</span>
|
||
<span class="animate-counter" style="font-size:15px; font-weight:600; color:var(--text);"
|
||
data-target="{{$d.PortfolioValueCents}}" data-prefix="€">€0.00</span>
|
||
</div>
|
||
</div>
|
||
{{else}}
|
||
<div class="empty-state" style="padding:24px;">
|
||
<p>{{$d.T.Get "dashboard.stocks.no_holdings_msg"}}<br><a href="/import" style="color:var(--accent);">{{$d.T.Get "dashboard.stocks.import_link"}}</a></p>
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Budget health + recent activity -->
|
||
<div class="grid-2">
|
||
|
||
{{if $d.CategoryBudgets}}
|
||
<div class="card animate-on-scroll">
|
||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
|
||
<h2>{{$d.T.Get "dashboard.budget_health.section_title"}}</h2>
|
||
<a href="/categories" style="font-size:12px; color:var(--text3);">{{$d.T.Get "dashboard.budget_health.categories_link"}}</a>
|
||
</div>
|
||
<div style="display:flex; flex-direction:column; gap:10px;">
|
||
{{range $cat, $budget := $d.CategoryBudgets}}
|
||
{{$spent := index $d.ThisMonth.ByCategory $cat}}
|
||
{{$spentAbs := centsAbs $spent}}
|
||
{{$color := index $d.CategoryColors $cat}}
|
||
{{$over := isOver $spentAbs $budget}}
|
||
{{$pct := clampPct $spentAbs $budget}}
|
||
<div>
|
||
<div style="display:flex; justify-content:space-between; margin-bottom:5px;">
|
||
<span style="font-size:12px; color:var(--text2); display:flex; align-items:center; gap:6px;">
|
||
{{if $color}}<span style="width:7px;height:7px;border-radius:50%;background:{{$color}};display:inline-block;"></span>{{end}}
|
||
{{$cat}}
|
||
</span>
|
||
<span style="font-size:11px; {{if $over}}color:var(--red); font-weight:600;{{else}}color:var(--text3);{{end}}">
|
||
{{$pct}}%{{if $over}} ⚠{{end}}
|
||
</span>
|
||
</div>
|
||
<div style="background:var(--bg3); border-radius:99px; height:5px; overflow:hidden;">
|
||
<div style="height:100%; border-radius:99px; width:{{$pct}}%;
|
||
background:{{if $over}}var(--red){{else if $color}}{{$color}}{{else}}var(--accent){{end}};
|
||
transition:width 1s ease;"></div>
|
||
</div>
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
</div>
|
||
{{end}}
|
||
|
||
<div class="card animate-on-scroll">
|
||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
|
||
<h2>{{$d.T.Get "dashboard.recent.section_title"}}</h2>
|
||
<a href="/transactions" style="font-size:12px; color:var(--text3);">{{$d.T.Get "dashboard.recent.all_txns_link"}}</a>
|
||
</div>
|
||
{{if $d.RecentTxns}}
|
||
<div style="display:flex; flex-direction:column;">
|
||
{{range $d.RecentTxns}}
|
||
{{$color := index $d.CategoryColors .Category}}
|
||
<div style="display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border);">
|
||
<div style="display:flex; align-items:center; gap:10px; min-width:0;">
|
||
<div style="width:8px; height:8px; border-radius:50%; flex-shrink:0;
|
||
background:{{if $color}}{{$color}}{{else}}var(--text3){{end}};"></div>
|
||
<div style="min-width:0;">
|
||
<div style="font-size:13px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px;">{{.Description}}</div>
|
||
<div style="font-size:11px; color:var(--text3);">{{dateShort .Date}}</div>
|
||
</div>
|
||
</div>
|
||
<div style="font-size:13px; font-weight:500; white-space:nowrap; margin-left:12px;
|
||
{{if lt .AmountCents 0}}color:var(--red){{else}}color:var(--green){{end}};">
|
||
{{if lt .AmountCents 0}}−{{else}}+{{end}}€{{cents (centsAbs .AmountCents)}}
|
||
</div>
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
{{else}}
|
||
<div class="empty-state" style="padding:24px;">
|
||
{{$d.T.Get "dashboard.recent.no_txns_msg"}} <a href="/import" style="color:var(--accent);">{{$d.T.Get "dashboard.recent.import_link"}}</a>
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
|
||
</div>
|
||
|
||
{{if $d.DashGoals}}
|
||
<div class="card animate-on-scroll" style="margin-top:16px;">
|
||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
|
||
<h2>{{$d.T.Get "dashboard.goals.section_title"}}</h2>
|
||
<a href="/goals" style="font-size:12px; color:var(--text3);">{{$d.T.Get "dashboard.goals.all_goals_link"}}</a>
|
||
</div>
|
||
<div style="display:flex; flex-direction:column; gap:14px;">
|
||
{{range $d.DashGoals}}
|
||
<div>
|
||
<div style="display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;">
|
||
<div style="display:flex; align-items:center; gap:8px;">
|
||
<span style="font-size:15px;">{{if eq .Type "once"}}🎯{{else if eq .Type "deposit"}}🏠{{else if eq .Type "emergency"}}🛡️{{else}}📈{{end}}</span>
|
||
<span style="font-size:13px; font-weight:500; color:var(--text);">{{.Name}}</span>
|
||
</div>
|
||
<div style="display:flex; align-items:center; gap:12px;">
|
||
<span style="font-size:12px; color:var(--text3);">{{.MonthsLeft}}{{$d.T.Get "dashboard.goals.months_left"}}</span>
|
||
<span style="font-size:12px; font-weight:600; color:{{if .Feasible}}var(--green){{else}}var(--red){{end}};">{{.ProgressPct}}%</span>
|
||
</div>
|
||
</div>
|
||
<div style="background:var(--bg3); border-radius:99px; height:5px; overflow:hidden;">
|
||
<div style="height:100%; border-radius:99px; width:{{.ProgressPct}}%;
|
||
background:{{if .Feasible}}var(--green){{else}}var(--accent){{end}};
|
||
transition:width 1s ease;"></div>
|
||
</div>
|
||
<div style="display:flex; justify-content:space-between; margin-top:4px; font-size:11px; color:var(--text3);">
|
||
<span>€{{cents .SavedCents}} of €{{cents .TargetCents}}</span>
|
||
<span style="color:{{if .Feasible}}var(--green){{else}}var(--red){{end}};">€{{cents .MonthlyCents}}{{$d.T.Get "dashboard.goals.per_month_needed"}}</span>
|
||
</div>
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
</div>
|
||
{{end}}
|
||
|
||
{{if $d.RecurringExpenses}}
|
||
<div class="card animate-on-scroll" style="margin-top:16px;">
|
||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;">
|
||
<h2>{{$d.T.Get "dashboard.fixed_costs.section_title"}}</h2>
|
||
<span style="font-size:11px; color:var(--text3);">{{$d.T.Get "dashboard.fixed_costs.auto_detected"}}</span>
|
||
</div>
|
||
<div style="display:flex; flex-direction:column;">
|
||
{{range $d.RecurringExpenses}}
|
||
{{$color := index $d.CategoryColors .Category}}
|
||
<div style="display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border);">
|
||
<div style="display:flex; align-items:center; gap:10px;">
|
||
{{if .IsGoal}}
|
||
<span style="width:9px; height:9px; border-radius:50%; background:var(--accent); flex-shrink:0; display:inline-block;"></span>
|
||
{{else if $color}}
|
||
<span style="width:9px; height:9px; border-radius:50%; background:{{$color}}; flex-shrink:0; display:inline-block;"></span>
|
||
{{end}}
|
||
<div>
|
||
<div style="font-size:13px; font-weight:500; color:var(--text);">{{.Category}}</div>
|
||
<div style="font-size:11px; color:var(--text3);">{{if .IsGoal}}{{$d.T.Get "dashboard.fixed_costs.committed_goal"}}{{else}}{{$d.T.Get "dashboard.fixed_costs.recurring_expense"}}{{end}}</div>
|
||
</div>
|
||
</div>
|
||
<div style="text-align:right;">
|
||
<div style="font-size:14px; font-weight:600; color:var(--red);">− €{{cents .MonthlyCents}}</div>
|
||
<div style="font-size:11px; color:var(--text3);">{{$d.T.Get "dashboard.fixed_costs.per_month"}}</div>
|
||
</div>
|
||
</div>
|
||
{{end}}
|
||
<div style="display:flex; justify-content:space-between; align-items:center; padding:12px 0 0 0;">
|
||
<span style="font-size:13px; font-weight:500; color:var(--text);">{{$d.T.Get "dashboard.fixed_costs.total_committed"}}</span>
|
||
<span class="animate-counter" style="font-size:15px; font-weight:600; color:var(--red);"
|
||
data-target="{{$d.TotalCommittedCents}}" data-prefix="€">€0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{{end}}
|
||
{{end}}
|