From 696fbc0b4373213a922a2ddf2052556fc9b65255 Mon Sep 17 00:00:00 2001 From: Guillem Arias Date: Mon, 11 May 2026 12:08:47 +0200 Subject: [PATCH] =?UTF-8?q?feat(savings):=20match=20Claude=20Design=20?= =?UTF-8?q?=E2=80=94=20projection=20chart,=20target-icon=20modal,=20groupe?= =?UTF-8?q?d=20funding=20accounts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Brings the savings goals UI closer to the Claude Design reference shared by the user. Changes: - Sidebar nav label: "Savings goals" → "Savings". - Status pill copy: "Behind" → "Behind pace" (matches Pill component from GoalsCommon.jsx). - Empty state rewritten with a large target icon, "No goals yet" heading, and the descriptive body copy from the design. Goal detail page (matches GoalDetail.jsx): - New "← All goals" back link above the header. - 2-column hero: ring card on the left (320px column), Projection card on the right. - Projection card uses a new D3 Stimulus controller (`savings-goal-projection-chart`) that draws: · saved area + line from goal creation → today (solid, primary) · dashed projection segment from today → target date (yellow when behind, green when on track) · horizontal dashed target line with label · today marker (vertical dashed line + dot) Data shape comes from `SavingsGoal#projection_payload`. - Card subtitle generates a contextual sentence ("At $X/mo you'll fall short. Bump to $Y/mo to hit it on time." / "At your current pace you'll reach this goal around Month YYYY." / "Goal reached. Nice work.") with a strong tag highlighting the actionable figure. - Stat row now shows Linked balance (sum across linked accounts) + "N accounts" sub-caption instead of duplicate "Target date" stat. New goal modal (matches the design images 2 + 3): - DS::Dialog custom header: DS::FilledIcon target glyph + title + step subtitle ("Step 1 of 2 · Goal details" / "Step 2 of 2 · Review & start") that updates as the user advances. - Connected stepper at top of body: numbered circles connected by a bar, step-1 circle flips to ✓ when complete. - Step 1 heading "What are you saving for?" + supporting copy. - Name field paired with a target glyph affordance on its left. - Target amount + Target date in a 2-col grid. - Funding accounts list now grouped by account subtype with uppercase section headers (CHECKING / SAVINGS / HSA / CD / MONEY MARKET / OTHER), each row showing avatar + name + subtype + balance. - Step 2 heading "Looks good?" + Review card (goal target + funding accounts summary + suggested monthly = target/months_remaining), and a disclosure for the optional initial contribution. - Footer: "Cancel" left text-button (closes modal) / "Back" left text when on step 2; "Continue →" or "Create goal →" right arrow button. Demo generator: Depository accounts now set `subtype` ("checking" / "savings") on the accountable so they group correctly in the modal. Tests: all green, 35 runs in the savings suite, 92 assertions. --- app/controllers/savings_goals_controller.rb | 32 ++- ...avings_goal_projection_chart_controller.js | 200 ++++++++++++++ .../savings_goal_stepper_controller.js | 213 +++++++++++---- app/models/demo/generator.rb | 8 +- app/models/savings_goal.rb | 25 ++ app/views/savings_goals/_empty_state.html.erb | 12 +- .../savings_goals/_form_stepper.html.erb | 250 ++++++++++-------- app/views/savings_goals/new.html.erb | 17 +- app/views/savings_goals/show.html.erb | 64 +++-- config/locales/views/layout/en.yml | 2 +- config/locales/views/savings_goals/en.yml | 53 +++- 11 files changed, 681 insertions(+), 195 deletions(-) create mode 100644 app/javascript/controllers/savings_goal_projection_chart_controller.js diff --git a/app/controllers/savings_goals_controller.rb b/app/controllers/savings_goals_controller.rb index 466d83d62..d8590983a 100644 --- a/app/controllers/savings_goals_controller.rb +++ b/app/controllers/savings_goals_controller.rb @@ -185,15 +185,45 @@ class SavingsGoalsController < ApplicationController end months_since_start = ((Date.current.year - goal.created_at.year) * 12 + (Date.current.month - goal.created_at.month)).clamp(0, 1200) sub_started = t("savings_goals.show.stats.months_ago", count: months_since_start) + linked_balance = goal.linked_accounts.sum { |a| a.balance.to_d } + sub_linked = t("savings_goals.show.stats.n_accounts", count: goal.linked_accounts.size) + + summary = projection_summary(goal, avg) + { avg_monthly: avg, avg_monthly_sub: sub_avg, contributions_count: goal.savings_contributions.count, monthly_target_sub: sub_target, - started_sub: sub_started + started_sub: sub_started, + linked_balance: linked_balance, + linked_balance_sub: sub_linked, + projection_summary: summary } end + def projection_summary(goal, avg_monthly) + currency = goal.currency + money = ->(amount) { Money.new(amount, currency).format } + + if goal.completed? || goal.progress_percent >= 100 + t("savings_goals.show.projection.reached") + elsif goal.target_date.nil? + t("savings_goals.show.projection.no_target_date") + elsif goal.monthly_target_amount && avg_monthly < goal.monthly_target_amount + t("savings_goals.show.projection.behind", + current: money.call(avg_monthly), + required: money.call(goal.monthly_target_amount)) + elsif avg_monthly.positive? + months_to_target = (goal.remaining_amount.to_d / avg_monthly).ceil + projected_date = Date.current >> months_to_target.to_i + t("savings_goals.show.projection.on_track", + date: projected_date.strftime("%b %Y")) + else + t("savings_goals.show.projection.no_pace") + end + end + def perform_transition!(event) if @savings_goal.aasm.may_fire_event?(event) @savings_goal.public_send("#{event}!") diff --git a/app/javascript/controllers/savings_goal_projection_chart_controller.js b/app/javascript/controllers/savings_goal_projection_chart_controller.js new file mode 100644 index 000000000..b898d7916 --- /dev/null +++ b/app/javascript/controllers/savings_goal_projection_chart_controller.js @@ -0,0 +1,200 @@ +import { Controller } from "@hotwired/stimulus"; +import * as d3 from "d3"; + +// Projection chart for a savings goal. Renders: +// - Saved area + line from goal creation → today (solid) +// - Dashed projection line from today → target date (yellow if behind, +// green if on track) +// - Horizontal dashed target line with label +// - Today marker (vertical line + dot) +// +// Data shape passed via `data-savings-goal-projection-chart-data-value` +// matches SavingsGoal#projection_payload. +export default class extends Controller { + static values = { data: Object }; + + connect() { + this._draw(); + this._resize = this._draw.bind(this); + window.addEventListener("resize", this._resize); + } + + disconnect() { + window.removeEventListener("resize", this._resize); + } + + _draw() { + const root = this.element; + root.innerHTML = ""; + + const data = this.dataValue || {}; + const width = root.clientWidth || 720; + const height = root.clientHeight || 240; + if (width <= 0 || height <= 0) return; + + const margin = { top: 28, right: 24, bottom: 28, left: 16 }; + const innerWidth = width - margin.left - margin.right; + const innerHeight = height - margin.top - margin.bottom; + + const start = new Date(data.start_date); + const today = new Date(data.today); + const target = data.target_date ? new Date(data.target_date) : null; + const targetAmount = data.target_amount || 0; + const currentAmount = data.current_amount || 0; + const avgMonthly = data.avg_monthly || 0; + + const endDate = target || new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000); + + const savedSeries = [{ date: start, value: 0 }].concat( + (data.saved_series || []).map((p) => ({ date: new Date(p.date), value: p.value })), + ); + if (savedSeries[savedSeries.length - 1].date < today) { + savedSeries.push({ date: today, value: currentAmount }); + } + + const projectionEnd = target + ? Math.max(currentAmount, currentAmount + avgMonthly * Math.max(0, this._monthsBetween(today, target))) + : currentAmount; + const projectionSeries = target + ? [ + { date: today, value: currentAmount }, + { date: target, value: projectionEnd }, + ] + : []; + + const yMax = Math.max(targetAmount * 1.05, projectionEnd, currentAmount, 1); + + const x = d3.scaleTime().domain([start, endDate]).range([margin.left, margin.left + innerWidth]); + const y = d3.scaleLinear().domain([0, yMax]).range([margin.top + innerHeight, margin.top]); + + const svg = d3 + .select(root) + .append("svg") + .attr("width", width) + .attr("height", height) + .attr("viewBox", `0 0 ${width} ${height}`) + .attr("preserveAspectRatio", "none"); + + const defs = svg.append("defs"); + const gradient = defs + .append("linearGradient") + .attr("id", `saved-fill-${this._id()}`) + .attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", 1); + gradient.append("stop").attr("offset", "0%").attr("stop-color", "var(--text-primary)").attr("stop-opacity", 0.10); + gradient.append("stop").attr("offset", "100%").attr("stop-color", "var(--text-primary)").attr("stop-opacity", 0); + + if (targetAmount > 0) { + svg + .append("line") + .attr("x1", margin.left) + .attr("x2", margin.left + innerWidth) + .attr("y1", y(targetAmount)) + .attr("y2", y(targetAmount)) + .attr("stroke", "var(--border-strong)") + .attr("stroke-width", 1) + .attr("stroke-dasharray", "3 3"); + + svg + .append("text") + .attr("x", margin.left + innerWidth - 4) + .attr("y", y(targetAmount) - 6) + .attr("text-anchor", "end") + .attr("font-size", 10) + .attr("fill", "var(--text-secondary)") + .text(`Target · ${this._fmtMoney(targetAmount, data.currency)}`); + } + + const area = d3 + .area() + .x((d) => x(d.date)) + .y0(margin.top + innerHeight) + .y1((d) => y(d.value)) + .curve(d3.curveMonotoneX); + + const line = d3 + .line() + .x((d) => x(d.date)) + .y((d) => y(d.value)) + .curve(d3.curveMonotoneX); + + svg + .append("path") + .datum(savedSeries) + .attr("fill", `url(#saved-fill-${this._id()})`) + .attr("d", area); + + svg + .append("path") + .datum(savedSeries) + .attr("fill", "none") + .attr("stroke", "var(--text-primary)") + .attr("stroke-width", 2) + .attr("stroke-linejoin", "round") + .attr("stroke-linecap", "round") + .attr("d", line); + + if (projectionSeries.length) { + const willHit = projectionEnd >= targetAmount; + svg + .append("path") + .datum(projectionSeries) + .attr("fill", "none") + .attr("stroke", willHit ? "var(--color-green-600)" : "var(--color-yellow-600)") + .attr("stroke-width", 2) + .attr("stroke-linecap", "round") + .attr("stroke-dasharray", "4 4") + .attr("d", line); + } + + svg + .append("line") + .attr("x1", x(today)) + .attr("x2", x(today)) + .attr("y1", margin.top) + .attr("y2", margin.top + innerHeight) + .attr("stroke", "var(--border-subdued)") + .attr("stroke-width", 1) + .attr("stroke-dasharray", "2 4"); + + svg + .append("circle") + .attr("cx", x(today)) + .attr("cy", y(currentAmount)) + .attr("r", 4) + .attr("fill", "var(--text-primary)") + .attr("stroke", "var(--bg-container)") + .attr("stroke-width", 2); + + const tickFmt = d3.timeFormat("%b %y"); + const tickCount = Math.min(5, Math.max(2, Math.round(innerWidth / 110))); + const ticks = x.ticks(tickCount); + svg + .append("g") + .selectAll("text") + .data(ticks) + .enter() + .append("text") + .attr("x", (d) => x(d)) + .attr("y", height - 8) + .attr("text-anchor", "middle") + .attr("font-size", 10) + .attr("fill", "var(--text-subdued)") + .text((d) => tickFmt(d)); + } + + _monthsBetween(a, b) { + return (b - a) / (1000 * 60 * 60 * 24 * 30.44); + } + + _fmtMoney(amount, currency) { + const symbol = currency === "EUR" ? "€" : currency === "GBP" ? "£" : "$"; + return `${symbol}${Math.round(amount).toLocaleString()}`; + } + + _id() { + if (!this._cachedId) { + this._cachedId = Math.random().toString(36).slice(2, 8); + } + return this._cachedId; + } +} diff --git a/app/javascript/controllers/savings_goal_stepper_controller.js b/app/javascript/controllers/savings_goal_stepper_controller.js index 64dd380b4..796ee058f 100644 --- a/app/javascript/controllers/savings_goal_stepper_controller.js +++ b/app/javascript/controllers/savings_goal_stepper_controller.js @@ -3,46 +3,86 @@ import { Controller } from "@hotwired/stimulus"; // 2-step modal stepper for creating a savings goal. // // Single
with two panels. Step 1 collects identity (name, amount, -// date, color, notes). Step 2 collects ≥1 linked depository accounts and -// optionally an initial contribution. Submit button stays disabled until at -// least one linked account is selected. Step state lives entirely in the -// DOM — no half-records. +// date, color, notes, linked accounts). Step 2 reviews + optional initial +// contribution. All state lives in the DOM — no half-records, single POST. export default class extends Controller { static targets = [ "step1Panel", "step2Panel", "step1Indicator", "step2Indicator", - "step1Field", - "nameField", - "targetAmountField", + "step1Circle", + "step2Circle", + "stepperLine", + "modalSubtitle", "linkedAccountCheckbox", "initialContributionAmount", "initialContributionAccountSelect", - "reviewPanel", "reviewName", - "reviewAmount", - "reviewDate", + "reviewSummary", "reviewAccounts", + "reviewSuggested", + "footerLeftButton", + "footerLeftLabel", + "footerRightButton", "submitButton", ]; - next(event) { - event?.preventDefault?.(); - if (!this.validateStep1()) return; + static values = { + step1Subtitle: { type: String, default: "Step 1 of 2 · Goal details" }, + step2Subtitle: { type: String, default: "Step 2 of 2 · Review & start" }, + cancelLabel: { type: String, default: "Cancel" }, + backLabel: { type: String, default: "Back" }, + continueLabel: { type: String, default: "Continue" }, + submitLabel: { type: String, default: "Create goal" }, + }; - this.step1PanelTarget.classList.add("hidden"); - this.step2PanelTarget.classList.remove("hidden"); - this.markStepActive(2); - this.updateReview(); + connect() { + this.currentStep = 1; this.refreshSubmitState(); } - back(event) { - event?.preventDefault?.(); + footerLeft(event) { + event.preventDefault(); + if (this.currentStep === 1) { + const dialog = this.element.closest("dialog"); + if (dialog) dialog.close(); + } else { + this.back(); + } + } + + footerRight(event) { + event.preventDefault(); + if (this.currentStep === 1) { + this.next(); + } else { + this.submitButtonTarget.click(); + } + } + + next() { + if (!this.validateStep1()) return; + if (!this.linkedAccountCheckboxTargets.some((cb) => cb.checked)) { + this.flashLinkedAccountsRequired(); + return; + } + + this.currentStep = 2; + this.step1PanelTarget.classList.add("hidden"); + this.step2PanelTarget.classList.remove("hidden"); + this.updateStepperState(); + this.refreshAccountSelect(); + this.updateReview(); + this.updateFooter(); + } + + back() { + this.currentStep = 1; this.step2PanelTarget.classList.add("hidden"); this.step1PanelTarget.classList.remove("hidden"); - this.markStepActive(1); + this.updateStepperState(); + this.updateFooter(); } linkedAccountChanged() { @@ -66,20 +106,17 @@ export default class extends Controller { } refreshSubmitState() { + if (!this.hasFooterRightButtonTarget) return; const anyChecked = this.linkedAccountCheckboxTargets.some((cb) => cb.checked); - this.submitButtonTarget.disabled = !anyChecked; + this.footerRightButtonTarget.disabled = false; + this.footerRightButtonTarget.classList.toggle("opacity-50", !anyChecked && this.currentStep === 1); } refreshAccountSelect() { if (!this.hasInitialContributionAccountSelectTarget) return; - const select = this.initialContributionAccountSelectTarget; const previous = select.value; - select.innerHTML = ""; - const blank = document.createElement("option"); - blank.value = ""; - blank.textContent = select.dataset.blankLabel || "—"; - select.appendChild(blank); + while (select.options.length > 1) select.remove(1); this.linkedAccountCheckboxTargets .filter((cb) => cb.checked) @@ -95,35 +132,113 @@ export default class extends Controller { } } - updateReview() { - if (!this.hasReviewPanelTarget) return; - - if (this.hasReviewNameTarget) { - const nameInput = this.element.querySelector('input[name="savings_goal[name]"]'); - this.reviewNameTarget.textContent = nameInput?.value || "—"; + updateStepperState() { + if (this.hasStep1CircleTarget) { + this.step1CircleTarget.classList.toggle("bg-inverse", this.currentStep === 1); + this.step1CircleTarget.classList.toggle("text-inverse", this.currentStep === 1); + this.step1CircleTarget.classList.toggle("bg-success", this.currentStep > 1); + this.step1CircleTarget.classList.toggle("text-inverse", this.currentStep === 1); + if (this.currentStep > 1) { + this.step1CircleTarget.textContent = "✓"; + } else { + this.step1CircleTarget.textContent = "1"; + } } - if (this.hasReviewAmountTarget) { - const amountInput = this.element.querySelector('input[name="savings_goal[target_amount]"]'); - this.reviewAmountTarget.textContent = amountInput?.value || "—"; + if (this.hasStep2CircleTarget) { + this.step2CircleTarget.classList.toggle("bg-inverse", this.currentStep === 2); + this.step2CircleTarget.classList.toggle("text-inverse", this.currentStep === 2); + this.step2CircleTarget.classList.toggle("bg-container-inset", this.currentStep < 2); + this.step2CircleTarget.classList.toggle("text-secondary", this.currentStep < 2); } - if (this.hasReviewDateTarget) { - const dateInput = this.element.querySelector('input[type="date"][name="savings_goal[target_date]"]'); - this.reviewDateTarget.textContent = dateInput?.value || "—"; + if (this.hasStepperLineTarget) { + this.stepperLineTarget.classList.toggle("bg-inverse", this.currentStep > 1); } - if (this.hasReviewAccountsTarget) { - const names = this.linkedAccountCheckboxTargets - .filter((cb) => cb.checked) - .map((cb) => cb.dataset.accountName || cb.value); - this.reviewAccountsTarget.textContent = names.length ? names.join(", ") : "—"; + // Modal subtitle lives in the dialog header, outside this controller's + // DOM scope. Locate it by attribute and update directly. + const subtitle = document.querySelector('[data-savings-goal-stepper-modal-subtitle]'); + if (subtitle) { + subtitle.textContent = + this.currentStep === 1 ? this.step1SubtitleValue : this.step2SubtitleValue; } } - markStepActive(stepNumber) { - if (this.hasStep1IndicatorTarget) { - this.step1IndicatorTarget.classList.toggle("text-primary", stepNumber === 1); + updateFooter() { + if (this.hasFooterLeftLabelTarget) { + this.footerLeftLabelTarget.textContent = + this.currentStep === 1 ? this.cancelLabelValue : this.backLabelValue; } - if (this.hasStep2IndicatorTarget) { - this.step2IndicatorTarget.classList.toggle("text-primary", stepNumber === 2); + if (this.hasFooterRightButtonTarget) { + const labelSpan = this.footerRightButtonTarget.querySelector("span"); + if (labelSpan) { + labelSpan.textContent = + this.currentStep === 1 ? this.continueLabelValue : this.submitLabelValue; + } + } + this.refreshSubmitState(); + } + + updateReview() { + if (!this.hasReviewNameTarget) return; + + const name = this.element.querySelector('input[name="savings_goal[name]"]')?.value || "—"; + const amountInput = this.element.querySelector('input[name="savings_goal[target_amount]"]'); + const amount = amountInput?.value ? parseFloat(amountInput.value) : 0; + const dateInput = this.element.querySelector('input[type="date"][name="savings_goal[target_date]"]'); + const dateValue = dateInput?.value; + + this.reviewNameTarget.textContent = name; + + if (this.hasReviewSummaryTarget) { + const currency = amountInput?.dataset?.currency || "$"; + const formattedAmount = amountInput?.value ? `${currency}${amount.toLocaleString()}` : "—"; + this.reviewSummaryTarget.textContent = dateValue + ? `${formattedAmount} by ${this.#formatDate(dateValue)}` + : formattedAmount; + } + + if (this.hasReviewAccountsTarget) { + const checked = this.linkedAccountCheckboxTargets.filter((cb) => cb.checked); + const total = checked.reduce( + (sum, cb) => sum + parseFloat(cb.dataset.accountBalance || 0), + 0, + ); + this.reviewAccountsTarget.textContent = checked.length + ? `${checked.length} ${checked.length === 1 ? "account" : "accounts"} · $${total.toLocaleString()} balance` + : "—"; + } + + if (this.hasReviewSuggestedTarget) { + const months = dateValue ? this.#monthsBetween(new Date(), new Date(dateValue)) : 0; + if (amount > 0 && months > 0) { + const perMonth = Math.ceil(amount / months); + this.reviewSuggestedTarget.textContent = `$${perMonth.toLocaleString()}/mo over ${Math.max(1, Math.round(months))} months`; + } else if (amount > 0) { + this.reviewSuggestedTarget.textContent = `$${amount.toLocaleString()} (no target date)`; + } else { + this.reviewSuggestedTarget.textContent = "—"; + } + } + } + + flashLinkedAccountsRequired() { + const first = this.linkedAccountCheckboxTargets[0]; + if (first) { + first.focus(); + first.classList.add("ring-2", "ring-destructive"); + setTimeout(() => first.classList.remove("ring-2", "ring-destructive"), 1200); + } + } + + #monthsBetween(from, to) { + return (to - from) / (1000 * 60 * 60 * 24 * 30.44); + } + + #formatDate(iso) { + try { + const d = new Date(iso); + return d.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" }); + } catch (e) { + return iso; } } } diff --git a/app/models/demo/generator.rb b/app/models/demo/generator.rb index 1e226f86b..c285aa7f0 100644 --- a/app/models/demo/generator.rb +++ b/app/models/demo/generator.rb @@ -250,14 +250,14 @@ class Demo::Generator def create_realistic_accounts!(family) # Checking accounts (USD) - @chase_checking = family.accounts.create!(accountable: Depository.new, name: "Chase Premier Checking", balance: 0, currency: "USD") - @ally_checking = family.accounts.create!(accountable: Depository.new, name: "Ally Online Checking", balance: 0, currency: "USD") + @chase_checking = family.accounts.create!(accountable: Depository.new(subtype: "checking"), name: "Chase Premier Checking", balance: 0, currency: "USD") + @ally_checking = family.accounts.create!(accountable: Depository.new(subtype: "checking"), name: "Ally Online Checking", balance: 0, currency: "USD") # Savings account (USD) - @marcus_savings = family.accounts.create!(accountable: Depository.new, name: "Marcus High-Yield Savings", balance: 0, currency: "USD") + @marcus_savings = family.accounts.create!(accountable: Depository.new(subtype: "savings"), name: "Marcus High-Yield Savings", balance: 0, currency: "USD") # EUR checking (EUR) - @eu_checking = family.accounts.create!(accountable: Depository.new, name: "Deutsche Bank EUR Account", balance: 0, currency: "EUR") + @eu_checking = family.accounts.create!(accountable: Depository.new(subtype: "checking"), name: "Deutsche Bank EUR Account", balance: 0, currency: "EUR") # Credit cards (USD) @amex_gold = family.accounts.create!(accountable: CreditCard.new, name: "Amex Gold Card", balance: 0, currency: "USD") diff --git a/app/models/savings_goal.rb b/app/models/savings_goal.rb index 2f11c81fb..dcb6167ba 100644 --- a/app/models/savings_goal.rb +++ b/app/models/savings_goal.rb @@ -131,6 +131,31 @@ class SavingsGoal < ApplicationRecord segments end + # Cumulative contributions series for the projection chart, sorted by + # date ascending. Consumed by the + # `savings-goal-projection-chart` Stimulus controller. + def projection_payload + sorted = savings_contributions.order(contributed_at: :asc).to_a + running = 0 + saved_series = sorted.map do |c| + running += c.amount.to_d + { date: c.contributed_at.to_s, value: running.to_f } + end + + { + saved_series: saved_series, + start_date: created_at.to_date.to_s, + today: Date.current.to_s, + target_date: target_date&.to_s, + target_amount: target_amount.to_f, + current_amount: current_balance.to_f, + avg_monthly: average_monthly_contribution.to_f, + required_monthly: monthly_target_amount.to_f, + currency: currency, + status: status.to_s + } + end + # :reached → progress_percent >= 100 # :on_track → has target_date and current pace >= required monthly pace # :behind → has target_date and current pace < required monthly pace diff --git a/app/views/savings_goals/_empty_state.html.erb b/app/views/savings_goals/_empty_state.html.erb index c4f116d73..b11492b5a 100644 --- a/app/views/savings_goals/_empty_state.html.erb +++ b/app/views/savings_goals/_empty_state.html.erb @@ -1,12 +1,12 @@ <%# locals: (linkable_account_count:) %> -
-
-
- <%= icon("piggy-bank", size: "lg") %> +
+
+
+ <%= icon("target", size: "2xl") %>
-

<%= t("savings_goals.empty_state.heading") %>

-

<%= t("savings_goals.empty_state.subtitle") %>

+

<%= t("savings_goals.empty_state.heading") %>

+

<%= t("savings_goals.empty_state.body") %>

<% if linkable_account_count > 0 %> <%= render DS::Link.new( diff --git a/app/views/savings_goals/_form_stepper.html.erb b/app/views/savings_goals/_form_stepper.html.erb index 05105d51c..03c2348ec 100644 --- a/app/views/savings_goals/_form_stepper.html.erb +++ b/app/views/savings_goals/_form_stepper.html.erb @@ -5,45 +5,78 @@ <%= render "shared/form_errors", model: savings_goal %> <% end %> -
    -
  1. - 1 - <%= t("savings_goals.form_stepper.step1.heading") %> -
    2. - → -
  2. - 2 - <%= t("savings_goals.form_stepper.step2.heading") %> -
    3. -
+ <%# Connected stepper %> +
+
+ 1 + <%= t("savings_goals.form_stepper.step1.label") %> +
+
+
+ 2 + <%= t("savings_goals.form_stepper.step2.label") %> +
+
<%= styled_form_with model: savings_goal, url: savings_goals_path, class: "space-y-4" do |f| %> -
- <%= f.text_field :name, - label: t("savings_goals.form_stepper.step1.fields.name"), - required: true, - autofocus: true, - data: { savings_goal_stepper_target: "step1Field nameField" } %> - - <%= f.money_field :target_amount, - label: t("savings_goals.form_stepper.step1.fields.target_amount"), - required: true, - data: { savings_goal_stepper_target: "step1Field targetAmountField" } %> - - <%= f.date_field :target_date, - label: t("savings_goals.form_stepper.step1.fields.target_date") %> +
+
+

<%= t("savings_goals.form_stepper.step1.heading") %>

+

<%= t("savings_goals.form_stepper.step1.subheading") %>

+
- <%= t("savings_goals.form_stepper.step1.fields.color") %> -
- <% SavingsGoal::COLORS.each do |c| %> - + +
+ + <%= render DS::FilledIcon.new(variant: :container, icon: "target", size: "lg", rounded: false) %> + + <%= f.text_field :name, + placeholder: t("savings_goals.form_stepper.step1.fields.name_placeholder"), + required: true, + autofocus: true, + label: "", + class: "flex-1" %> +
+
+ +
+ <%= f.money_field :target_amount, + label: t("savings_goals.form_stepper.step1.fields.target_amount"), + required: true %> + <%= f.date_field :target_date, + label: t("savings_goals.form_stepper.step1.fields.target_date") %> +
+ +
+ <%= t("savings_goals.form_stepper.step1.fields.funding_accounts") %> +
+ <% grouped = linkable_accounts.group_by { |a| a.subtype.to_s.presence || "other" } %> + <% grouped.each_with_index do |(subtype, accts), group_idx| %> +
<%= t("savings_goals.form_stepper.step1.subtypes.#{subtype}", default: subtype.titleize) %>
+
"> + <% accts.each_with_index do |account, idx| %> + + <% end %> +
<% end %>
@@ -52,83 +85,94 @@ label: t("savings_goals.form_stepper.step1.fields.notes"), rows: 2 %> -
- <%= render DS::Button.new( - text: t("savings_goals.form_stepper.continue"), - variant: "primary", - data: { action: "click->savings-goal-stepper#next" } - ) %> -
+ <%# Hidden color (random) %> + <%= f.hidden_field :color, value: savings_goal.color || SavingsGoal::COLORS.sample %>
-
diff --git a/app/views/savings_goals/new.html.erb b/app/views/savings_goals/new.html.erb index ac813f46a..3b445a0aa 100644 --- a/app/views/savings_goals/new.html.erb +++ b/app/views/savings_goals/new.html.erb @@ -1,5 +1,18 @@ -<%= render DS::Dialog.new do |dialog| %> - <% dialog.with_header(title: t(".heading")) %> +<%= render DS::Dialog.new(width: "lg") do |dialog| %> + <% dialog.with_header(custom_header: true) do %> +
+
+ <%= render DS::FilledIcon.new(variant: :container, icon: "target", size: "lg", rounded: false) %> +
+

<%= t(".heading") %>

+

+ <%= t(".step1_subtitle") %> +

+
+
+ <%= render DS::Button.new(variant: "icon", icon: "x", title: t("common.close"), aria_label: t("common.close"), data: { action: "DS--dialog#close" }) %> +
+ <% end %> <% dialog.with_body do %> <%= render "form_stepper", savings_goal: @savings_goal, linkable_accounts: @linkable_accounts %> <% end %> diff --git a/app/views/savings_goals/show.html.erb b/app/views/savings_goals/show.html.erb index b4f4b0798..8a9a02f82 100644 --- a/app/views/savings_goals/show.html.erb +++ b/app/views/savings_goals/show.html.erb @@ -1,4 +1,11 @@
+
+ <%= link_to savings_goals_path, class: "inline-flex items-center gap-1 text-secondary hover:text-primary" do %> + <%= icon("arrow-left", size: "sm") %> + <%= t(".back_to_all") %> + <% end %> +
+
<%= render Savings::GoalAvatarComponent.new(goal: @savings_goal, size: "xl") %>
@@ -64,21 +71,43 @@
-
-
- <%= render Savings::ProgressRingComponent.new(goal: @savings_goal, size: 200) %> -
-

<%= @savings_goal.current_balance_money.format %>

-

- <%= t(".ring.of", target: @savings_goal.target_amount_money.format) %> - <% unless @savings_goal.completed? %> - · <%= t(".ring.to_go", amount: @savings_goal.remaining_amount_money.format) %> - <% end %> -

+ <%# Top row: ring card + projection chart card %> +
+
+ <%= render Savings::ProgressRingComponent.new(goal: @savings_goal, size: 180) %> +

<%= @savings_goal.current_balance_money.format %>

+

+ <%= t(".ring.of", target: @savings_goal.target_amount_money.format) %> + <% unless @savings_goal.completed? %> + · <%= t(".ring.to_go", amount: @savings_goal.remaining_amount_money.format) %> + <% end %> +

+
+ +
+
+
+

<%= t(".projection.heading") %>

+

<%= @stats[:projection_summary].html_safe %>

+
+
+ + + <%= t(".projection.legend_saved") %> + + + + <%= t(".projection.legend_projection") %> + +
+
+ <%# Stat row %>

<%= t(".stats.avg_monthly") %>

@@ -91,9 +120,9 @@

<%= t(".stats.across_all_accounts") %>

-

<%= t(".stats.target_date") %>

-

<%= @savings_goal.target_date ? I18n.l(@savings_goal.target_date, format: :long) : t(".stats.no_target_date") %>

-

<%= @stats[:monthly_target_sub] %>

+

<%= t(".stats.linked_balance") %>

+

<%= Money.new(@stats[:linked_balance], @savings_goal.currency).format %>

+

<%= @stats[:linked_balance_sub] %>

<%= t(".stats.started") %>

@@ -102,8 +131,9 @@
-
-
+ <%# Bottom row: contributions + funding accounts %> +
+

<%= t(".contributions_heading") %>

<%= @contributions.size %> @@ -111,7 +141,7 @@ <%= render "contributions_list", contributions: @contributions %>
-
+

<%= t(".funding_accounts_heading") %>

<%= render Savings::FundingAccountsBreakdownComponent.new(goal: @savings_goal, rows: @funding_breakdown) %>
diff --git a/config/locales/views/layout/en.yml b/config/locales/views/layout/en.yml index 5346c2cad..c7145599b 100644 --- a/config/locales/views/layout/en.yml +++ b/config/locales/views/layout/en.yml @@ -8,7 +8,7 @@ en: budgets: Budgets home: Home reports: Reports - savings_goals: Savings goals + savings_goals: Savings transactions: Transactions auth: existing_account: Already have an account? diff --git a/config/locales/views/savings_goals/en.yml b/config/locales/views/savings_goals/en.yml index 1ebd63406..ce603b3fd 100644 --- a/config/locales/views/savings_goals/en.yml +++ b/config/locales/views/savings_goals/en.yml @@ -19,6 +19,8 @@ en: behind: Behind new: heading: New savings goal + step1_subtitle: Step 1 of 2 · Goal details + step2_subtitle: Step 2 of 2 · Review & start edit: heading: Edit savings goal save: Save changes @@ -67,12 +69,24 @@ en: saved: Saved of: "of %{target}" to_go: "%{amount} to go" + of_target: of target + projection: + heading: Projection + legend_saved: Saved + legend_projection: Projection + reached: Goal reached. Nice work. + no_target_date: No target date set. Set one to project a finish line. + no_pace: No contributions yet. Add some to start a projection. + behind: At %{current}/mo you'll fall short. Bump to %{required}/mo to hit it on time. + on_track: At your current pace, you'll reach this goal around %{date}. + back_to_all: All goals source: initial: Initial manual: Manual stats: avg_monthly: Avg monthly total_contributions: Total contributions + linked_balance: Linked balance across_all_accounts: Across all accounts target_date: Target date no_target_date: No target date @@ -80,6 +94,9 @@ en: started: Started needs_per_month: "Needs %{amount}/mo" above_target_pace: Above target pace + n_accounts: + one: 1 account + other: "%{count} accounts" months_ago: one: 1 month ago other: "%{count} months ago" @@ -90,11 +107,12 @@ en: archived: Archived status: on_track: On track - behind: Behind + behind: Behind pace reached: Reached no_target_date: No date empty_state: - heading: No savings goals yet + heading: No goals yet + body: Set a target, link the accounts you save into, and watch your progress add up. Goals can pull from multiple accounts. subtitle: Set a target and start saving toward it. new_goal: Create your first goal no_depository_accounts: You need at least one Depository account (checking, savings, HSA, CD, money-market) before creating a goal. @@ -112,26 +130,37 @@ en: one: 1 day left · by %{date} other: "%{count} days left · by %{date}" form_stepper: + cancel: Cancel continue: Continue back: Back submit: Create goal step1: - heading: Identity + label: Goal details + heading: What are you saving for? + subheading: Give your goal a name and a target. You can change these later. fields: name: Name + name_placeholder: Emergency fund, House down payment… target_amount: Target amount - target_date: Target date (optional) + target_date: Target date color: Color notes: Notes (optional) + funding_accounts: Funding accounts + subtypes: + checking: Checking + savings: Savings + hsa: HSA + cd: CD + money_market: Money market + other: Other step2: - heading: Review - linked_accounts_heading: Linked accounts - linked_accounts_hint: Pick at least one Depository account that funds this goal. - add_initial_contribution: Add an initial contribution (optional) + label: Review & start + heading: Looks good? + subheading: Review your goal and add an optional starting contribution. + funding_accounts: Funding accounts + suggested_monthly: Suggested monthly + add_initial_contribution: Add an initial contribution + add_initial_contribution_sub: Optional · jumpstart this goal with funds you've already set aside. initial_amount: Amount initial_account: From account select_account: Select an account - review_heading: Review - review_target: Target - review_date: Date - review_accounts: Accounts