Adopt TanStack Query: provider, timeouts, useBudget, Budget page

QueryClientProvider (30s staleTime, 1 retry) + Sonner Toaster at the
root. api.ts gains AbortSignal support and a default 30s timeout
(FE-24); query cancellation kills the stale-response races (FE-01,
FE-03). useBudget is now queries + mutations with targeted ['budget']
invalidation and success/error toasts on every mutation (ARCH-13,
UX-01); month navigation keeps the previous month visible while
fetching. Budget's transaction list is a cancellable query with
placeholder data; deferred-toggle gets feedback (UX-05); both panels
render a shared ErrorState with retry instead of failing silently.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/pages/Budget.tsx

@@ -1,10 +1,13 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useCallback } from 'react';
 import { ChevronLeft, ChevronRight, Calculator } from 'lucide-react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
 
 import api, { type Transaction } from '@/lib/api';
 import { useBudget } from '@/hooks/useBudget';
 import { Button } from '@/components/ui/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import ErrorState from '@/components/ErrorState';
 import MonthlyDetail from '@/components/budget/MonthlyDetail';
 import RecurringItemsManager from '@/components/budget/RecurringItemsManager';
 import TransactionList from '@/components/TransactionList';
@@ -27,28 +30,25 @@ export default function Budget() {
     monthDetail,
     recurringItems,
     monthLoading,
+    error: budgetError,
     addItem,
     updateItem,
     deleteItem,
     refresh,
   } = useBudget(currentYear);
+  const queryClient = useQueryClient();
 
   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_AND_TRANSFER'>('CREDIT_CARD');
 
-  const fetchTransactions = useCallback(async () => {
-    setTxLoading(true);
-    try {
+  const txQuery = useQuery({
+    queryKey: ['transactions', 'budget', year, selectedMonth, txSource, txSearch],
+    queryFn: async ({ signal }) => {
       const params: Record<string, string | number | boolean | undefined> = {
         search: txSearch || undefined,
         limit: 200,
       };
-
       if (txSource === 'CREDIT_CARD') {
         params.source = 'CREDIT_CARD';
         // Credit card: billing cycle that ends around the 18th of selectedMonth
@@ -66,33 +66,41 @@ export default function Budget() {
         params.start_date = startDate;
         params.end_date = endDate;
       }
-
-      const { data } = await api.get<Transaction[]>('/transactions/', { params });
+      const { data } = await api.get<Transaction[]>('/transactions/', { params, signal });
       const INCOME_TYPES = ['DEPOSITO', 'SALARY'];
-      const filtered = data.filter((tx) => !INCOME_TYPES.includes(tx.transaction_type));
-      setTransactions(filtered);
-    } finally {
-      setTxLoading(false);
-    }
-  }, [year, selectedMonth, txSource, txSearch]);
+      return data.filter((tx) => !INCOME_TYPES.includes(tx.transaction_type));
+    },
+    placeholderData: (prev) => prev,
+  });
+  const transactions = txQuery.data ?? [];
+
+  const invalidateTransactionsAndBudget = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: ['transactions'] });
+    refresh();
+  }, [queryClient, refresh]);
 
   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]);
+    try {
+      await api.patch(`/transactions/${tx.id}`, {
+        deferred_to_next_cycle: !tx.deferred_to_next_cycle,
+      });
+      toast.success(
+        tx.deferred_to_next_cycle
+          ? 'Transacción restaurada a su ciclo original'
+          : 'Transacción diferida al siguiente ciclo',
+      );
+    } catch {
+      toast.error('No se pudo actualizar la transacción');
+      return;
+    }
+    invalidateTransactionsAndBudget();
+  }, [invalidateTransactionsAndBudget]);
 
   const handleNavigateToTransactions = useCallback(() => {
     setTxSource('CASH_AND_TRANSFER');
     setSubTab('transactions');
   }, []);
 
-  useEffect(() => {
-    fetchTransactions();
-  }, [fetchTransactions]);
-
   return (
     <div className="space-y-6">
       {/* Header */}
@@ -154,11 +162,15 @@ export default function Budget() {
             </div>
 
             <TabsContent value="detail" className="space-y-6 mt-4">
-              <MonthlyDetail
-                detail={monthDetail}
-                loading={monthLoading || !monthDetail}
-                onNavigateToTransactions={handleNavigateToTransactions}
-              />
+              {budgetError ? (
+                <ErrorState onRetry={refresh} />
+              ) : (
+                <MonthlyDetail
+                  detail={monthDetail}
+                  loading={monthLoading || !monthDetail}
+                  onNavigateToTransactions={handleNavigateToTransactions}
+                />
+              )}
             </TabsContent>
 
             <TabsContent value="transactions" className="space-y-3 mt-4">
@@ -171,21 +183,25 @@ export default function Budget() {
                   <TabsTrigger value="CASH_AND_TRANSFER">Efectivo y Transferencias</TabsTrigger>
                 </TabsList>
               </Tabs>
+              {txQuery.isError ? (
+                <ErrorState
+                  message="No se pudieron cargar las transacciones"
+                  onRetry={() => txQuery.refetch()}
+                />
+              ) : (
               <TransactionList
                 transactions={transactions}
-                loading={txLoading}
+                loading={txQuery.isPending}
                 source={txSource === 'CREDIT_CARD' ? 'CREDIT_CARD' : 'CASH'}
                 search={txSearch}
                 onSearchChange={setTxSearch}
-                onRefresh={() => {
-                  fetchTransactions();
-                  refresh();
-                }}
+                onRefresh={invalidateTransactionsAndBudget}
                 showCategory={txSource === 'CREDIT_CARD'}
                 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>
           </Tabs>
         </TabsContent>