fix(balance): hide period selector, chart and table on empty /balance (S2)

Before this commit, /balance rendered the BalanceOnboardingCard plus the
period selector + evolution chart + accounts table whenever the user had
no accounts or no snapshot. The lower three components surfaced their
own empty states, producing 3 stacked "no data" messages under the
onboarding card.

Lifts the (accountsCount, hasAnySnapshot) computation out of the inline
IIFE and uses a single isEmpty branch: empty profiles see only the
BalanceOnboardingCard; populated profiles see the full overview.

No logic change — only JSX restructuring. Tests covering useBalanceOverview
and BalanceOnboardingCard remain green (61 tests passing).

Suggestion S2 from PR #184 review (#187).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
le king fu 2026-05-03 16:28:41 -04:00
parent 445822b792
commit 372a785834

View file

@ -173,26 +173,32 @@ export default function BalancePage() {
</div>
)}
<div className="space-y-6">
{/* Issue #178 — empty-state guard. We probe accountsLatest for ANY
snapshot date so the guard is independent of the active period
filter (state.period). When empty, we render only the onboarding
card — period selector, chart and accounts table would all show
empty states stacked under it (S2 from #187). */}
{(() => {
// Issue #178 — show a 2-step onboarding card while the user has no
// accounts or no snapshots yet. We probe accountsLatest for ANY
// snapshot date so the empty-state guard is independent of the
// active period filter (state.period).
const accountsCount = state.accountsLatest.length;
const hasAnySnapshot = state.accountsLatest.some(
(a) => a.latest_snapshot_date != null
);
if (accountsCount === 0 || !hasAnySnapshot) {
const isEmpty = accountsCount === 0 || !hasAnySnapshot;
if (isEmpty) {
return (
<div className="space-y-6">
<BalanceOnboardingCard
accountsCount={accountsCount}
snapshotsCount={hasAnySnapshot ? 1 : 0}
/>
</div>
);
}
return <BalanceOverviewCard totals={state.evolutionTotals} />;
})()}
return (
<div className="space-y-6">
<BalanceOverviewCard totals={state.evolutionTotals} />
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
{/* Period selector */}
@ -263,6 +269,8 @@ export default function BalancePage() {
/>
</div>
</div>
);
})()}
<StarterAccountsModal
isOpen={showStarterModal}