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:
parent
445822b792
commit
372a785834
1 changed files with 89 additions and 81 deletions
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Reference in a new issue