From 81ae41325aeb37bc37b5b0360a010b30fd31f178 Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Thu, 4 Jun 2026 21:22:20 -0500
Subject: [PATCH] feat: move income modal to tracker page, clickable bank card

---
 client/pages/SummaryPage.jsx | 16 +---------------
 client/pages/TrackerPage.jsx | 33 ++++++++++++++++++++++++++-------
 2 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/client/pages/SummaryPage.jsx b/client/pages/SummaryPage.jsx
index c4e10df..b525743 100644
--- a/client/pages/SummaryPage.jsx
+++ b/client/pages/SummaryPage.jsx
@@ -21,7 +21,6 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Input } from '@/components/ui/input';
 import { cn, fmt } from '@/lib/utils';
 import { moveInArray, reorderPayload } from '@/lib/reorder';
-import IncomeBreakdownModal from '@/components/IncomeBreakdownModal';
 
 const MONTHS = [
   'January',
@@ -205,7 +204,6 @@ export default function SummaryPage() {
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState('');
-  const [incomeModalOpen, setIncomeModalOpen] = useState(false);
   const [startingFirst, setStartingFirst] = useState('0');
   const [startingFifteenth, setStartingFifteenth] = useState('0');
   const [startingOther, setStartingOther] = useState('0');
@@ -568,10 +566,7 @@ export default function SummaryPage() {
               </CardDescription>
             </CardHeader>
             <CardContent>
-              <SummaryChart
-                rows={data.chart || []}
-                onStartingClick={data.bank_tracking?.enabled ? () => setIncomeModalOpen(true) : undefined}
-              />
+              <SummaryChart rows={data.chart || []} />
             </CardContent>
           </Card>
 
@@ -581,15 +576,6 @@ export default function SummaryPage() {
         </>
       )}
 
-      {data?.bank_tracking?.enabled && (
-        <IncomeBreakdownModal
-          open={incomeModalOpen}
-          onClose={() => setIncomeModalOpen(false)}
-          year={data.year}
-          month={data.month}
-          bankTracking={data.bank_tracking}
-        />
-      )}
     </div>
   );
 }
diff --git a/client/pages/TrackerPage.jsx b/client/pages/TrackerPage.jsx
index 7bb4b69..dc210f1 100644
--- a/client/pages/TrackerPage.jsx
+++ b/client/pages/TrackerPage.jsx
@@ -29,6 +29,7 @@ import { FilterChip } from '@/components/tracker/FilterChip';
 import { SummaryCard, TrendCard } from '@/components/tracker/SummaryCards';
 import { PaymentLedgerDialog } from '@/components/tracker/PaymentLedgerDialog';
 import { TrackerBucket as Bucket } from '@/components/tracker/TrackerBucket';
+import IncomeBreakdownModal from '@/components/IncomeBreakdownModal';
 
 
 // ── Main page ──────────────────────────────────────────────────────────────
@@ -107,6 +108,7 @@ export default function TrackerPage() {
   const [editBillData, setEditBillData] = useState(null);
   // Edit Starting Amounts modal: true when open, false when closed
   const [editStartingOpen, setEditStartingOpen] = useState(false);
+  const [incomeModalOpen,  setIncomeModalOpen]  = useState(false);
   const [orderedRows, setOrderedRows] = useState(null);
   const [movingBillId, setMovingBillId] = useState(null);
 
@@ -515,12 +517,18 @@ export default function TrackerPage() {
       ) : (
         <div className="grid grid-cols-2 gap-3 lg:flex">
           {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',
-            )}>
+            <button
+              type="button"
+              onClick={() => setIncomeModalOpen(true)}
+              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 text-left',
+                'hover:ring-2 hover:ring-primary/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                Number(bankTracking.remaining ?? 0) >= 0
+                  ? 'border-emerald-500/30 bg-card/95'
+                  : 'border-destructive/30 bg-card/95',
+              )}
+              title="Click to see income breakdown"
+            >
               <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')} />
@@ -541,7 +549,7 @@ export default function TrackerPage() {
               <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>
+            </button>
           ) : (
             <SummaryCard
               type="starting"
@@ -683,6 +691,17 @@ export default function TrackerPage() {
         onSave={() => { setEditStartingOpen(false); refetch(); }}
       />
 
+      {/* Income breakdown modal — opens when clicking the bank balance card */}
+      {bankTracking?.enabled && (
+        <IncomeBreakdownModal
+          open={incomeModalOpen}
+          onClose={() => setIncomeModalOpen(false)}
+          year={year}
+          month={month}
+          bankTracking={bankTracking}
+        />
+      )}
+
       {/* Late-attribution dialog — fires after sync when a payment just crossed a month boundary */}
       {lateAttributions.length > 0 && (
         <LateAttributionDialog