From d5a0b655324728f837942afaea3ea67a0e168be7 Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Thu, 4 Jun 2026 02:24:10 -0500
Subject: [PATCH] feat: live bank status bar and card on TrackerPage with
 effective balance + pending

---
 client/pages/TrackerPage.jsx | 92 ++++++++++++++++++++++++++++--------
 1 file changed, 73 insertions(+), 19 deletions(-)

diff --git a/client/pages/TrackerPage.jsx b/client/pages/TrackerPage.jsx
index 3854c65..7bb4b69 100644
--- a/client/pages/TrackerPage.jsx
+++ b/client/pages/TrackerPage.jsx
@@ -416,6 +416,35 @@ export default function TrackerPage() {
         </div>
       </div>
 
+      {/* ── B: Bank status bar ── */}
+      {bankTracking?.enabled && (
+        <div className={cn(
+          'flex flex-wrap items-center justify-between gap-x-4 gap-y-1 rounded-xl border px-4 py-2.5 text-xs',
+          Number(bankTracking.remaining ?? 0) >= 0
+            ? 'border-emerald-500/20 bg-emerald-500/5 text-emerald-700 dark:text-emerald-400'
+            : 'border-destructive/20 bg-destructive/5 text-destructive',
+        )}>
+          <div className="flex items-center gap-2">
+            <span className="relative flex h-2 w-2">
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-50" />
+              <span className="relative inline-flex h-2 w-2 rounded-full bg-current" />
+            </span>
+            <span className="font-semibold">{bankTracking.account_name}</span>
+            <span className="text-muted-foreground">·</span>
+            <span>{fmt(bankTracking.balance ?? 0)} balance</span>
+            {Number(bankTracking.pending_payments ?? 0) > 0 && (
+              <>
+                <span className="text-muted-foreground">·</span>
+                <span className="text-amber-600 dark:text-amber-400">{fmt(bankTracking.pending_payments)} pending</span>
+              </>
+            )}
+          </div>
+          <span className="font-semibold tabular-nums">
+            {Number(bankTracking.remaining ?? 0) < 0 ? '−' : ''}{fmt(Math.abs(Number(bankTracking.remaining ?? 0)))} projected
+          </span>
+        </div>
+      )}
+
       <div className="rounded-xl border border-border/80 bg-card/95 p-4 shadow-sm shadow-black/15 space-y-3">
         <div className="grid gap-3 lg:grid-cols-[minmax(220px,1fr)_220px_180px_auto] lg:items-center">
           <label className="relative">
@@ -485,25 +514,50 @@ export default function TrackerPage() {
         </div>
       ) : (
         <div className="grid grid-cols-2 gap-3 lg:flex">
-          <SummaryCard
-            type="starting"
-            value={summary.total_starting}
-            hint={(() => {
-              if (bankTracking?.enabled) {
-                const proj = Number(bankTracking.remaining ?? 0);
-                const sign = proj < 0 ? '−' : '';
-                return `${bankTracking.account_name} · projected ${sign}${fmt(Math.abs(proj))} after bills`;
-              }
-              if (!summary.has_starting_amounts) return 'Set monthly starting cash';
-              if (cashflow?.has_data && cashflow.period_projected !== undefined) {
-                const proj = Number(cashflow.period_projected);
-                const sign = proj < 0 ? '−' : '';
-                return `→ ${sign}${fmt(Math.abs(proj))} projected by ${cashflow.period_end_label}`;
-              }
-              return '';
-            })()}
-            onEdit={bankTracking?.enabled ? undefined : () => setEditStartingOpen(true)}
-          />
+          {bankTracking?.enabled ? (
+            <div className={cn(
+              'flex-1 min-w-0 relative overflow-hidden rounded-xl border px-5 py-4 shadow-sm shadow-black/15 transition-all duration-300',
+              Number(bankTracking.remaining ?? 0) >= 0
+                ? 'border-emerald-500/30 bg-card/95'
+                : 'border-destructive/30 bg-card/95',
+            )}>
+              <div className="absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-emerald-500 to-teal-400" />
+              <div className="flex items-center gap-2 mb-3">
+                <Landmark className={cn('h-4 w-4', Number(bankTracking.remaining ?? 0) >= 0 ? 'text-emerald-500' : 'text-destructive')} />
+                <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground truncate">
+                  {bankTracking.account_name}
+                </p>
+                <span className="ml-auto flex items-center gap-1 text-[10px] text-emerald-600 dark:text-emerald-400 font-medium">
+                  <span className="relative flex h-1.5 w-1.5">
+                    <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
+                    <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-emerald-500" />
+                  </span>
+                  Live
+                </span>
+              </div>
+              <p className="text-[1.75rem] font-bold tracking-tight font-mono leading-none text-foreground">
+                {fmt(bankTracking.effective_balance ?? 0)}
+              </p>
+              <p className="mt-2 text-[11px] text-muted-foreground">
+                {Number(bankTracking.remaining ?? 0) < 0 ? '−' : ''}{fmt(Math.abs(Number(bankTracking.remaining ?? 0)))} projected after bills
+              </p>
+            </div>
+          ) : (
+            <SummaryCard
+              type="starting"
+              value={summary.total_starting}
+              hint={(() => {
+                if (!summary.has_starting_amounts) return 'Set monthly starting cash';
+                if (cashflow?.has_data && cashflow.period_projected !== undefined) {
+                  const proj = Number(cashflow.period_projected);
+                  const sign = proj < 0 ? '−' : '';
+                  return `→ ${sign}${fmt(Math.abs(proj))} projected by ${cashflow.period_end_label}`;
+                }
+                return '';
+              })()}
+              onEdit={() => setEditStartingOpen(true)}
+            />
+          )}
           <SummaryCard type="paid"      value={summary.total_paid} />
           <SummaryCard type="overdue"   value={summary.overdue} />
           <SummaryCard type="paid"      value={summary.previous_month_total} hint="Previous month"/>