Repository navigation
fix(frontend): three money formatters, mixed placeholders, left-aligned money columns #739
Description
Summary
Money is formatted by three different functions with different rules, absent values use two different placeholders, and money columns are left-aligned without tabular numerals.
Where
Reviewed commit b50ca38:
frontend/src/utils.ts:41(0 decimals, separators)frontend/src/modules/savings-history.ts:335-342(ownformatCurrencywith$1.23K, shadowing the import)frontend/src/recommendations.ts:1674,1693($${x.toFixed(n)}, so yearly prints$123456)frontend/src/dashboard.ts:282-287(--and—in one tile)frontend/src/styles/tables.css:13(allth, tdleft-aligned;tabular-numsused twice)frontend/src/index.html:215-224(Purchases stat cards start at$0.00)
Failure scenario
- Yearly savings on Opportunities print as
$123456with no separators. - On the Purchases page "$19.52K" and "$216.92/mo" (compact, 2 decimals) sit above "$24,400" and "$2,560" (full, 0 decimals).
- Absent values use
--about 18 times and—about 35 times; Home empty shows four different empty values in four KPI tiles (green--,0, bold—, green$0). - Money columns are left-aligned, so digits do not line up for comparison.
Verified live (mock API, static build) and in source.
User impact
All users comparing amounts. Unaligned, inconsistently formatted money makes columns hard to scan, and a $0 placeholder can read as a real zero.
Suggested fix
One formatMoney(v, {compact, digits}) on Intl.NumberFormat, one placeholder for absent values, and td.num { text-align: right; font-variant-numeric: tabular-nums } on every money and count column.
Screenshots
In the review fleet archive (/Users/cristi/.claude/agent-comms/review-fleet-20261008/screens/), NOT uploaded: home-empty-1280.png, purchases-full-1280.png.
Severity
Medium: inconsistent presentation of money across the app, no calculation error.
Related: #6 (generic UX backlog that lists this only in passing; not a duplicate).
Reviewer ID: VIS-11 (vis M5)
Found by the 2026-10-08 review fleet.
Activity
IAmJSD commentedon Oct 24, 2026
Claiming: working on this
fix(frontend): use the one absent-value placeholder in code main added
fix(frontend): use the one absent-value placeholder in Purchases code…
fix(frontend): one money formatter and placeholder, right-align money (…
fix(frontend): share formatCurrency's absent marker in formatCompactC…
Merge remote-tracking branch 'origin/main' into ui/issue-743
fix(frontend): plot one savings series per axis with shared formatters (
fix(frontend): right-align money and count columns on Inventory, Plan…
IAmJSD commentedon Oct 27, 2026
Status update (2026-10-27, checked against main at 7b86e38): What is left is frontend UI work, which cristim owns, so no PR from us.
#1449 right-aligned the money and count columns on Inventory, Plans and RI Exchange. The single money formatter and single placeholder were already on main. The Archera comparison tables are the last place with money cells that lack the num class.
Left / blocked on: Frontend (cristim): add th.num/td.num to the money columns in frontend/src/archera-comparison.ts (cell('td', money(...)) around lines 91 and 136-142).
cristim commentedon Nov 11, 2026
Claimed by claude-platform-2.
fix(frontend): right-align the Archera comparison money columns
cristim commentedon Nov 11, 2026
Checked against main: the shared formatter and NO_VALUE placeholder (#1376, #1385) and num alignment (#1449) are on main; the Archera comparison tables now get num too (this push, Part of #739). Remaining: 27 literal '—' sites that do not import NO_VALUE (same glyph), history.ts:1820-1821 uses '-', and frontend/src/ladder-timeline.ts:136 Budget and Cumulative columns have no num class (possibly also the ladder-config-table Target Coverage column). Archera's 'Unknown' placeholder is deliberate (#151). Leaving open for those. Claim released (claude-platform-2).
cristim commentedon Nov 12, 2026
Verified on origin/main 447a98b: money formatting and alignment are met.
$${x.toFixed()}money output left.Minor leftover, not a requirement of this issue: formatCompactCurrency (utils.ts:71) remains for chart axes, and apikeys.ts:145 falls back to '--' for an empty last-used time.
Closing as completed.