From 372a785834c0ab4a89461679d0c6f91d4cc34987 Mon Sep 17 00:00:00 2001
From: le king fu <lekingfu@protonmail.com>
Date: Sun, 3 May 2026 16:28:41 -0400
Subject: [PATCH] fix(balance): hide period selector, chart and table on empty
 /balance (S2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/pages/BalancePage.tsx | 170 ++++++++++++++++++++------------------
 1 file changed, 89 insertions(+), 81 deletions(-)

diff --git a/src/pages/BalancePage.tsx b/src/pages/BalancePage.tsx
index 4a15f33..b184641 100644
--- a/src/pages/BalancePage.tsx
+++ b/src/pages/BalancePage.tsx
@@ -173,96 +173,104 @@ export default function BalancePage() {
         </div>
       )}
 
-      <div className="space-y-6">
-        {(() => {
-          // 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) {
-            return (
+      {/* 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). */}
+      {(() => {
+        const accountsCount = state.accountsLatest.length;
+        const hasAnySnapshot = state.accountsLatest.some(
+          (a) => a.latest_snapshot_date != null
+        );
+        const isEmpty = accountsCount === 0 || !hasAnySnapshot;
+
+        if (isEmpty) {
+          return (
+            <div className="space-y-6">
               <BalanceOnboardingCard
                 accountsCount={accountsCount}
                 snapshotsCount={hasAnySnapshot ? 1 : 0}
               />
-            );
-          }
-          return <BalanceOverviewCard totals={state.evolutionTotals} />;
-        })()}
+            </div>
+          );
+        }
 
-        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
-          {/* Period selector */}
-          <div
-            role="group"
-            aria-label={t("balance.period.legend")}
-            className="inline-flex rounded-lg border border-[var(--border)] overflow-hidden"
-          >
-            {PERIOD_OPTIONS.map((p) => (
-              <button
-                key={p}
-                type="button"
-                onClick={() => setPeriod(p)}
-                className={`px-3 py-1.5 text-sm font-medium ${
-                  state.period === p
-                    ? "bg-[var(--primary)] text-white"
-                    : "bg-[var(--card)] text-[var(--foreground)] hover:bg-[var(--muted)]/40"
-                }`}
-                aria-pressed={state.period === p}
+        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 */}
+              <div
+                role="group"
+                aria-label={t("balance.period.legend")}
+                className="inline-flex rounded-lg border border-[var(--border)] overflow-hidden"
               >
-                {t(`balance.period.${p}`)}
-              </button>
-            ))}
-          </div>
+                {PERIOD_OPTIONS.map((p) => (
+                  <button
+                    key={p}
+                    type="button"
+                    onClick={() => setPeriod(p)}
+                    className={`px-3 py-1.5 text-sm font-medium ${
+                      state.period === p
+                        ? "bg-[var(--primary)] text-white"
+                        : "bg-[var(--card)] text-[var(--foreground)] hover:bg-[var(--muted)]/40"
+                    }`}
+                    aria-pressed={state.period === p}
+                  >
+                    {t(`balance.period.${p}`)}
+                  </button>
+                ))}
+              </div>
 
-          {/* Chart mode toggle */}
-          <div
-            role="group"
-            aria-label={t("balance.chart.modeLegend")}
-            className="inline-flex rounded-lg border border-[var(--border)] overflow-hidden"
-          >
-            {(["line", "stacked"] as BalanceChartMode[]).map((mode) => (
-              <button
-                key={mode}
-                type="button"
-                onClick={() => setChartMode(mode)}
-                className={`px-3 py-1.5 text-sm font-medium ${
-                  state.chartMode === mode
-                    ? "bg-[var(--primary)] text-white"
-                    : "bg-[var(--card)] text-[var(--foreground)] hover:bg-[var(--muted)]/40"
-                }`}
-                aria-pressed={state.chartMode === mode}
+              {/* Chart mode toggle */}
+              <div
+                role="group"
+                aria-label={t("balance.chart.modeLegend")}
+                className="inline-flex rounded-lg border border-[var(--border)] overflow-hidden"
               >
-                {t(`balance.chart.mode.${mode}`)}
-              </button>
-            ))}
+                {(["line", "stacked"] as BalanceChartMode[]).map((mode) => (
+                  <button
+                    key={mode}
+                    type="button"
+                    onClick={() => setChartMode(mode)}
+                    className={`px-3 py-1.5 text-sm font-medium ${
+                      state.chartMode === mode
+                        ? "bg-[var(--primary)] text-white"
+                        : "bg-[var(--card)] text-[var(--foreground)] hover:bg-[var(--muted)]/40"
+                    }`}
+                    aria-pressed={state.chartMode === mode}
+                  >
+                    {t(`balance.chart.mode.${mode}`)}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <BalanceEvolutionChart
+              mode={state.chartMode}
+              totals={state.evolutionTotals}
+              byCategory={state.evolutionByCategory}
+              categoryLabels={categoryLabels}
+              transferMarkers={allTransferMarkers}
+            />
+
+            <div>
+              <h2 className="text-lg font-semibold mb-3">
+                {t("balance.overview.accountsTitle")}
+              </h2>
+              <BalanceAccountsTable
+                accounts={state.accountsLatest}
+                periodAnchor={state.accountsPeriodAnchor}
+                sinceCreationDate={earliestSnapshotDate}
+                onArchiveAccount={(acc) => handleArchiveAccount(acc.account_id)}
+                onLinkTransfers={(acc) => setLinkTarget(acc)}
+              />
+            </div>
           </div>
-        </div>
-
-        <BalanceEvolutionChart
-          mode={state.chartMode}
-          totals={state.evolutionTotals}
-          byCategory={state.evolutionByCategory}
-          categoryLabels={categoryLabels}
-          transferMarkers={allTransferMarkers}
-        />
-
-        <div>
-          <h2 className="text-lg font-semibold mb-3">
-            {t("balance.overview.accountsTitle")}
-          </h2>
-          <BalanceAccountsTable
-            accounts={state.accountsLatest}
-            periodAnchor={state.accountsPeriodAnchor}
-            sinceCreationDate={earliestSnapshotDate}
-            onArchiveAccount={(acc) => handleArchiveAccount(acc.account_id)}
-            onLinkTransfers={(acc) => setLinkTarget(acc)}
-          />
-        </div>
-      </div>
+        );
+      })()}
 
       <StarterAccountsModal
         isOpen={showStarterModal}