From 6acea3da316cbd9320723514a3bf6503ae9cf585 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gon=C3=A7alo=20Rodrigues?= Date: Fri, 19 Jun 2026 22:43:59 +0100 Subject: [PATCH] feat(finance): inline help tips + guided empty states MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Global .help-tip / .help-popup CSS + click-toggle JS in base.html - Global .setup-steps / .setup-step CSS for step-by-step guidance - Dashboard: ? tooltips on Free Cash (formula), Savings Rate, Net Worth - Goals: ? tooltips on Monthly Amount, At Current Rate, Free Cash After - Goals empty state: 3-step guide (planner → commit → fund) - Transactions empty state: 3-step guide (account → import → tag) with prominent Import / Add buttons replacing the inline text links Co-Authored-By: Claude Sonnet 4.6 --- .../services/api/main/templates/base.html | 56 +++++++++++++++++++ .../api/main/templates/dashboard.html | 6 +- .../services/api/main/templates/goals.html | 31 ++++++++-- .../api/main/templates/transactions.html | 37 ++++++++++-- 4 files changed, 119 insertions(+), 11 deletions(-) diff --git a/apps/finance/services/api/main/templates/base.html b/apps/finance/services/api/main/templates/base.html index 2d78781..d765952 100644 --- a/apps/finance/services/api/main/templates/base.html +++ b/apps/finance/services/api/main/templates/base.html @@ -481,6 +481,55 @@ } .empty-state h3 { font-size: 17px; color: var(--text2); margin-bottom: 8px; } + /* ── Setup steps (empty-state guidance) ────────────────────────── */ + .setup-steps { display: flex; flex-direction: column; gap: 10px; max-width: 380px; margin: 0 auto 24px; } + .setup-step { + display: flex; align-items: flex-start; gap: 12px; + background: var(--bg3); border: 1px solid var(--border); + border-radius: var(--radius-sm); padding: 11px 14px; + text-align: left; + } + .setup-step-num { + flex-shrink: 0; + width: 22px; height: 22px; border-radius: 50%; + background: var(--accent-glow); border: 1px solid var(--accent); + color: var(--accent); font-size: 11px; font-weight: 700; + display: flex; align-items: center; justify-content: center; + } + .setup-step strong { display: block; font-size: 13px; color: var(--text); margin-bottom: 2px; } + .setup-step p { font-size: 12px; color: var(--text3); margin: 0; line-height: 1.5; } + + /* ── Help tooltips ──────────────────────────────────────────────── */ + .help-tip { + display: inline-flex; align-items: center; justify-content: center; + width: 14px; height: 14px; border-radius: 50%; + background: var(--bg3); border: 1px solid var(--border2); + color: var(--text3); font-size: 8px; font-weight: 700; + cursor: help; position: relative; vertical-align: middle; + margin-left: 5px; flex-shrink: 0; user-select: none; + transition: border-color 0.15s, color 0.15s; + } + .help-tip:hover, .help-tip.open { border-color: var(--accent); color: var(--accent); } + .help-popup { + display: none; position: absolute; z-index: 400; + bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); + min-width: 230px; max-width: 300px; + background: var(--surface); border: 1px solid var(--border2); + border-radius: var(--radius); padding: 12px 14px; + box-shadow: var(--shadow-md); + font-size: 12px; line-height: 1.6; color: var(--text2); + font-weight: 400; white-space: normal; text-align: left; + pointer-events: none; cursor: default; + } + .help-tip.open .help-popup { display: block; } + .help-popup strong { color: var(--text); display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 600; } + .help-popup code { + display: block; margin-top: 8px; + background: var(--bg3); border-radius: 6px; padding: 7px 9px; + font-family: ui-monospace, monospace; font-size: 11px; color: var(--accent2); + line-height: 1.7; + } + /* ── Misc utils ──────────────────────────────────────────────────── */ .flex { display: flex; gap: 8px; align-items: center; } .flex-wrap { flex-wrap: wrap; } @@ -730,6 +779,13 @@ } Chart.defaults.color = () => getThemeColor('textColor'); Chart.defaults.borderColor = () => getThemeColor('gridColor'); + + /* ── Help tips ────────────────────────────────────────────────────── */ + document.addEventListener('click', e => { + const tip = e.target.closest('.help-tip'); + document.querySelectorAll('.help-tip.open').forEach(t => { if (t !== tip) t.classList.remove('open'); }); + if (tip) { e.stopPropagation(); tip.classList.toggle('open'); } + }); diff --git a/apps/finance/services/api/main/templates/dashboard.html b/apps/finance/services/api/main/templates/dashboard.html index d64f56c..38b2a12 100644 --- a/apps/finance/services/api/main/templates/dashboard.html +++ b/apps/finance/services/api/main/templates/dashboard.html @@ -136,7 +136,7 @@
- {{$d.T.Get "dashboard.waterfall.free_cash"}} + {{$d.T.Get "dashboard.waterfall.free_cash"}}?
Free CashWhat's left after paying for life and funding your goals. Positive means you have room to save or spend more.Income − Living expenses − Goal contributions
€0
@@ -249,7 +249,7 @@ function wfToggleCat(id) {
-

{{$d.T.Get "dashboard.cards.savings_rate"}}

+

{{$d.T.Get "dashboard.cards.savings_rate"}}?
Savings RateThe share of your income you're keeping. Above 20% is healthy; below 0% means you spent more than you earned.(Income − Expenses) ÷ Income × 100

{{$d.SavingsRatePct}}%
{{if $d.LastMonthSavingsRatePct}}

@@ -259,7 +259,7 @@ function wfToggleCat(id) {

-

{{$d.T.Get "dashboard.cards.net_worth"}}

+

{{$d.T.Get "dashboard.cards.net_worth"}}?
Net WorthEverything you own minus everything you owe. Tracking this monthly is the single best measure of financial health.Cash + Investments + Property equity − Debts

€0.00

{{$d.T.Get "dashboard.cards.net_worth_link"}}

diff --git a/apps/finance/services/api/main/templates/goals.html b/apps/finance/services/api/main/templates/goals.html index 7009c4f..adf2edb 100644 --- a/apps/finance/services/api/main/templates/goals.html +++ b/apps/finance/services/api/main/templates/goals.html @@ -80,7 +80,7 @@
-
{{$d.T.Get "goals.goal_card.need_per_month"}}
+
{{$d.T.Get "goals.goal_card.need_per_month"}}?
Monthly amount neededHow much to set aside each month to hit your target by the deadline.(Target − Saved) ÷ Months remaining
€0
@@ -89,7 +89,7 @@
{{.MonthsLeft}}
-
{{$d.T.Get "goals.goal_card.at_current_rate"}}
+
{{$d.T.Get "goals.goal_card.at_current_rate"}}?
At current rateHow many months it would actually take based on your average monthly savings. Green = on time, red = late.
{{if gt .MonthsAtCurrentRate 0}}
@@ -100,7 +100,7 @@ {{end}}
-
{{$d.T.Get "goals.goal_card.disposable_after"}}
+
{{$d.T.Get "goals.goal_card.disposable_after"}}?
Free cash after this goalYour estimated monthly free cash if you commit to this goal. Red means you'd need to cut spending elsewhere.Income − Living − All committed goals − This goal
€0
@@ -186,7 +186,30 @@
🎯

{{$d.T.Get "goals.empty.title"}}

-

{{$d.T.Get "goals.empty.desc"}}

+

{{$d.T.Get "goals.empty.desc"}}

+
+
+ 1 +
+ Open the Goal Planner +

Simulate how much you need to save monthly and by when. Try different deadlines to find a realistic target.

+
+
+
+ 2 +
+ Commit to the goal +

Mark a goal as committed so it appears in your waterfall and "what now?" prompts on the dashboard.

+
+
+
+ 3 +
+ Fund it every month +

Add expense transactions tagged to this goal, or link a spending category in Settings to auto-tag them.

+
+
+
{{$d.T.Get "goals.empty.btn_open_planner"}}
{{end}} diff --git a/apps/finance/services/api/main/templates/transactions.html b/apps/finance/services/api/main/templates/transactions.html index d9128ff..537fa4c 100644 --- a/apps/finance/services/api/main/templates/transactions.html +++ b/apps/finance/services/api/main/templates/transactions.html @@ -100,10 +100,39 @@ {{else}} - - {{$d.T.Get "transactions.table.empty_msg"}} - {{$d.T.Get "transactions.table.empty_import_link"}} or - . + +
+
🧾
+
No transactions yet
+

Transactions are the foundation of every chart, goal, and insight in this app.

+
+
+ 1 +
+ Add an account +

Go to Settings → Accounts and create your checking or savings account first.

+
+
+
+ 2 +
+ Import a CSV or add manually +

Export a statement from your bank and import it, or tap "+ Add Transaction" to enter one by hand.

+
+
+
+ 3 +
+ Tag categories & goals +

Once imported, categorise your spending. Link categories to goals so contributions are tracked automatically.

+
+
+
+
+ {{$d.T.Get "transactions.table.empty_import_link"}} + +
+
{{end}}