Add deferred transactions, revamp budget projections and UI

Adds deferred_to_next_cycle flag to transactions for billing cycle
bleed-over handling. Overhauls budget projection engine and refreshes
Budget page with improved monthly detail and transaction columns.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/pages/Budget.tsx

@@ -1,14 +1,10 @@
 import { useState, useEffect, useCallback } from 'react';
-import { ChevronLeft, ChevronRight, Calculator, Loader2 } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Calculator } from 'lucide-react';
 
 import api, { type Transaction } from '@/api';
 import { useBudget } from '@/hooks/useBudget';
-import { formatAmount } from '@/lib/format';
-import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import YearlyOverview from '@/components/budget/YearlyOverview';
 import MonthlyDetail from '@/components/budget/MonthlyDetail';
 import RecurringItemsManager from '@/components/budget/RecurringItemsManager';
 import TransactionList from '@/components/TransactionList';
@@ -28,51 +24,69 @@ export default function Budget() {
     setYear,
     selectedMonth,
     setSelectedMonth,
-    projection,
     monthDetail,
     recurringItems,
-    loading,
     monthLoading,
     addItem,
     updateItem,
     deleteItem,
-    saveBalanceOverride,
-    clearBalanceOverride,
     refresh,
   } = useBudget(currentYear);
 
-  const [subTab, setSubTab] = useState<'detail' | 'transactions' | 'projections'>('detail');
+  const [subTab, setSubTab] = useState<'detail' | 'transactions'>('detail');
 
   // Transaction list state for the selected month
   const [transactions, setTransactions] = useState<Transaction[]>([]);
   const [txLoading, setTxLoading] = useState(false);
   const [txSearch, setTxSearch] = useState('');
-  const [txSource, setTxSource] = useState<'CREDIT_CARD' | 'CASH' | 'TRANSFER'>('CREDIT_CARD');
+  const [txSource, setTxSource] = useState<'CREDIT_CARD' | 'CASH_AND_TRANSFER'>('CREDIT_CARD');
 
   const fetchTransactions = useCallback(async () => {
     setTxLoading(true);
     try {
-      // Use calendar month date range
-      const startDate = `${year}-${String(selectedMonth).padStart(2, '0')}-01`;
-      const endMonth = selectedMonth === 12 ? 1 : selectedMonth + 1;
-      const endYear = selectedMonth === 12 ? year + 1 : year;
-      const endDate = `${endYear}-${String(endMonth).padStart(2, '0')}-01`;
+      const params: Record<string, unknown> = {
+        search: txSearch || undefined,
+        limit: 200,
+      };
 
-      const { data } = await api.get<Transaction[]>('/transactions/', {
-        params: {
-          source: txSource,
-          search: txSearch || undefined,
-          limit: 200,
-          start_date: startDate,
-          end_date: endDate,
-        },
-      });
+      if (txSource === 'CREDIT_CARD') {
+        params.source = 'CREDIT_CARD';
+        // Credit card: billing cycle that ends around the 18th of selectedMonth
+        const prevMonth = selectedMonth === 1 ? 12 : selectedMonth - 1;
+        const prevYear = selectedMonth === 1 ? year - 1 : year;
+        params.cycle_year = prevYear;
+        params.cycle_month = prevMonth;
+      } else {
+        // Cash + Transfer merged: calendar month, exclude credit card
+        params.exclude_source = 'CREDIT_CARD';
+        const startDate = `${year}-${String(selectedMonth).padStart(2, '0')}-01`;
+        const endMonth = selectedMonth === 12 ? 1 : selectedMonth + 1;
+        const endYear = selectedMonth === 12 ? year + 1 : year;
+        const endDate = `${endYear}-${String(endMonth).padStart(2, '0')}-01`;
+        params.start_date = startDate;
+        params.end_date = endDate;
+      }
+
+      const { data } = await api.get<Transaction[]>('/transactions/', { params });
       setTransactions(data);
     } finally {
       setTxLoading(false);
     }
   }, [year, selectedMonth, txSource, txSearch]);
 
+  const handleToggleDeferred = useCallback(async (tx: Transaction) => {
+    await api.patch(`/transactions/${tx.id}`, {
+      deferred_to_next_cycle: !tx.deferred_to_next_cycle,
+    });
+    fetchTransactions();
+    refresh();
+  }, [fetchTransactions, refresh]);
+
+  const handleNavigateToTransactions = useCallback(() => {
+    setTxSource('CASH_AND_TRANSFER');
+    setSubTab('transactions');
+  }, []);
+
   useEffect(() => {
     fetchTransactions();
   }, [fetchTransactions]);
@@ -107,16 +121,44 @@ export default function Budget() {
             value={subTab}
             onValueChange={(v) => setSubTab(v as typeof subTab)}
           >
-            <TabsList variant="line">
-              <TabsTrigger value="detail">
-                Detalle: {MONTH_NAMES[selectedMonth]} {year}
-              </TabsTrigger>
-              <TabsTrigger value="transactions">Transacciones</TabsTrigger>
-              <TabsTrigger value="projections">Proyecciones</TabsTrigger>
-            </TabsList>
+            <div className="flex items-center justify-between">
+              <TabsList variant="line">
+                <TabsTrigger value="detail">Detalle</TabsTrigger>
+                <TabsTrigger value="transactions">Transacciones</TabsTrigger>
+              </TabsList>
+              <div className="flex items-center gap-1">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7"
+                  disabled={selectedMonth <= 1}
+                  onClick={() => setSelectedMonth(selectedMonth - 1)}
+                >
+                  <ChevronLeft className="w-4 h-4" />
+                </Button>
+                <span className="text-sm font-medium w-28 text-center">
+                  {MONTH_NAMES[selectedMonth]} {year}
+                </span>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7"
+                  disabled={selectedMonth >= 12}
+                  onClick={() => setSelectedMonth(selectedMonth + 1)}
+                >
+                  <ChevronRight className="w-4 h-4" />
+                </Button>
+              </div>
+            </div>
 
             <TabsContent value="detail" className="space-y-6 mt-4">
-              {monthDetail && <MonthlyDetail detail={monthDetail} loading={monthLoading} />}
+              {monthDetail && (
+                <MonthlyDetail
+                  detail={monthDetail}
+                  loading={monthLoading}
+                  onNavigateToTransactions={handleNavigateToTransactions}
+                />
+              )}
             </TabsContent>
 
             <TabsContent value="transactions" className="space-y-3 mt-4">
@@ -126,14 +168,13 @@ export default function Budget() {
               >
                 <TabsList>
                   <TabsTrigger value="CREDIT_CARD">Tarjeta</TabsTrigger>
-                  <TabsTrigger value="CASH">Efectivo</TabsTrigger>
-                  <TabsTrigger value="TRANSFER">Transferencias</TabsTrigger>
+                  <TabsTrigger value="CASH_AND_TRANSFER">Efectivo y Transferencias</TabsTrigger>
                 </TabsList>
               </Tabs>
               <TransactionList
                 transactions={transactions}
                 loading={txLoading}
-                source={txSource}
+                source={txSource === 'CREDIT_CARD' ? 'CREDIT_CARD' : 'CASH'}
                 search={txSearch}
                 onSearchChange={setTxSearch}
                 onRefresh={() => {
@@ -141,81 +182,11 @@ export default function Budget() {
                   refresh();
                 }}
                 showCategory={txSource === 'CREDIT_CARD'}
-                emptyMessage={`Sin transacciones de ${txSource === 'CREDIT_CARD' ? 'tarjeta' : txSource === 'CASH' ? 'efectivo' : 'transferencia'} en ${MONTH_NAMES[selectedMonth]}`}
+                showSourceIcon={txSource === 'CASH_AND_TRANSFER'}
+                emptyMessage={`Sin transacciones de ${txSource === 'CREDIT_CARD' ? 'tarjeta' : 'efectivo o transferencia'} en ${MONTH_NAMES[selectedMonth]}`}
+                onToggleDeferred={txSource === 'CREDIT_CARD' ? handleToggleDeferred : undefined}
               />
             </TabsContent>
-
-            <TabsContent value="projections" className="space-y-6 mt-4">
-              {projection && (
-                <div className="grid gap-3 grid-cols-2 md:grid-cols-4">
-                  <Card>
-                    <CardContent className="pt-4 pb-3 px-4">
-                      <p className="text-xs text-muted-foreground">Ingresos Anuales</p>
-                      <p data-sensitive className="text-lg font-bold font-mono text-primary">
-                        {formatAmount(projection.annual_income, 'CRC')}
-                      </p>
-                    </CardContent>
-                  </Card>
-                  <Card>
-                    <CardContent className="pt-4 pb-3 px-4">
-                      <p className="text-xs text-muted-foreground">Egresos Anuales</p>
-                      <p data-sensitive className="text-lg font-bold font-mono">
-                        {formatAmount(projection.annual_expenses, 'CRC')}
-                      </p>
-                    </CardContent>
-                  </Card>
-                  <Card>
-                    <CardContent className="pt-4 pb-3 px-4">
-                      <p className="text-xs text-muted-foreground">Ahorro Anual</p>
-                      <p data-sensitive className="text-lg font-bold font-mono">
-                        {formatAmount(projection.annual_savings, 'CRC')}
-                      </p>
-                    </CardContent>
-                  </Card>
-                  <Card>
-                    <CardContent className="pt-4 pb-3 px-4">
-                      <p className="text-xs text-muted-foreground">Balance Neto Anual</p>
-                      <p
-                        data-sensitive
-                        className={cn(
-                          'text-lg font-bold font-mono',
-                          projection.annual_net >= 0 ? 'text-primary' : 'text-destructive',
-                        )}
-                      >
-                        {projection.annual_net >= 0 ? '+' : ''}
-                        {formatAmount(projection.annual_net, 'CRC')}
-                      </p>
-                    </CardContent>
-                  </Card>
-                </div>
-              )}
-
-              {loading ? (
-                <div className="flex items-center justify-center py-12">
-                  <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
-                </div>
-              ) : projection ? (
-                <Card>
-                  <CardContent className="p-0">
-                    <YearlyOverview
-                      months={projection.months}
-                      selectedMonth={selectedMonth}
-                      year={year}
-                      onSelectMonth={(m) => {
-                        setSelectedMonth(m);
-                        setSubTab('detail');
-                      }}
-                      onSaveOverride={async (month, value) => {
-                        await saveBalanceOverride(year, month, value);
-                      }}
-                      onClearOverride={async (month) => {
-                        await clearBalanceOverride(year, month);
-                      }}
-                    />
-                  </CardContent>
-                </Card>
-              ) : null}
-            </TabsContent>
           </Tabs>
         </TabsContent>