mirror of
https://github.com/we-promise/sure.git
synced 2026-05-30 15:59:02 +00:00
696fbc0b43
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.
30 lines
1.1 KiB
Plaintext
30 lines
1.1 KiB
Plaintext
<%# locals: (linkable_account_count:) %>
|
|
|
|
<div class="bg-container rounded-xl shadow-border-xs py-20">
|
|
<div class="flex flex-col items-center text-center max-w-md mx-auto px-6">
|
|
<div class="w-24 h-24 rounded-full bg-surface-inset flex items-center justify-center mb-5 text-secondary">
|
|
<%= icon("target", size: "2xl") %>
|
|
</div>
|
|
<h2 class="text-lg font-medium text-primary mb-2"><%= t("savings_goals.empty_state.heading") %></h2>
|
|
<p class="text-sm text-secondary leading-relaxed mb-5"><%= t("savings_goals.empty_state.body") %></p>
|
|
|
|
<% if linkable_account_count > 0 %>
|
|
<%= render DS::Link.new(
|
|
text: t("savings_goals.empty_state.new_goal"),
|
|
variant: "primary",
|
|
href: new_savings_goal_path,
|
|
icon: "plus",
|
|
frame: :modal
|
|
) %>
|
|
<% else %>
|
|
<p class="text-sm text-secondary mb-3"><%= t("savings_goals.empty_state.no_depository_accounts") %></p>
|
|
<%= render DS::Link.new(
|
|
text: t("savings_goals.empty_state.add_account"),
|
|
variant: "primary",
|
|
href: new_account_path,
|
|
icon: "plus"
|
|
) %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|