mirror of
https://github.com/we-promise/sure.git
synced 2026-05-30 15:59:02 +00:00
feat(savings): match Claude Design — projection chart, target-icon modal, grouped funding accounts
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.
This commit is contained in:
Guillem Arias
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -3,46 +3,86 @@ import { Controller } from "@hotwired/stimulus";
|
||||
// 2-step modal stepper for creating a savings goal.
|
||||
//
|
||||
// Single <form> 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user