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/components/TransactionList.tsx

@@ -7,6 +7,8 @@ import {
   TrendingUp,
   TrendingDown,
   ArrowLeftRight,
+  ArrowRightFromLine,
+  Banknote,
 } from 'lucide-react';
 
 import api, { type Transaction } from '../api';
@@ -30,7 +32,9 @@ export interface TransactionListProps {
   emptyIcon?: React.ReactNode;
   emptyMessage?: string;
   showCategory?: boolean;
+  showSourceIcon?: boolean;
   addLabel?: string;
+  onToggleDeferred?: (tx: Transaction) => void;
 }
 
 export default function TransactionList({
@@ -43,7 +47,9 @@ export default function TransactionList({
   emptyIcon,
   emptyMessage = 'No transactions found',
   showCategory = true,
+  showSourceIcon = false,
   addLabel = 'Add Transaction',
+  onToggleDeferred,
 }: TransactionListProps) {
   const [modalOpen, setModalOpen] = useState(false);
   const [editing, setEditing] = useState<Transaction | null>(null);
@@ -68,8 +74,8 @@ export default function TransactionList({
   };
 
   const columns = useMemo(
-    () => getTransactionColumns({ showCategory, onEdit: handleEdit, onDelete: (id) => setDeleteId(id) }),
-    [showCategory],
+    () => getTransactionColumns({ showCategory, showSourceIcon, onEdit: handleEdit, onDelete: (id) => setDeleteId(id), onToggleDeferred }),
+    [showCategory, showSourceIcon, onToggleDeferred],
   );
 
   const empty = transactions.length === 0 && !loading;
@@ -119,7 +125,16 @@ export default function TransactionList({
                   )}
                 </div>
                 <div className="min-w-0 flex-1">
-                  <p className="text-sm font-medium truncate">{tx.merchant}</p>
+                  <div className="flex items-center gap-1">
+                    <p className="text-sm font-medium truncate">{tx.merchant}</p>
+                    {showSourceIcon && (
+                      tx.source === 'CASH'
+                        ? <Banknote className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+                        : tx.source === 'TRANSFER'
+                          ? <ArrowLeftRight className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
+                          : null
+                    )}
+                  </div>
                   <p className="text-xs text-muted-foreground">
                     {new Date(tx.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
                     {showCategory && tx.category && (
@@ -138,6 +153,18 @@ export default function TransactionList({
                   {formatAmount(tx.amount, tx.currency)}
                 </span>
                 <div className="flex items-center gap-0.5 shrink-0">
+                  {onToggleDeferred && (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      title={tx.deferred_to_next_cycle ? 'Quitar diferida' : 'Diferir al siguiente ciclo'}
+                      aria-label={tx.deferred_to_next_cycle ? 'Remove deferred' : 'Defer to next cycle'}
+                      onClick={() => onToggleDeferred(tx)}
+                      className={cn(tx.deferred_to_next_cycle && 'text-amber-600')}
+                    >
+                      <ArrowRightFromLine className="w-4 h-4" />
+                    </Button>
+                  )}
                   <Button variant="ghost" size="icon" title="Edit transaction" aria-label="Edit transaction" onClick={() => handleEdit(tx)}>
                     <Pencil className="w-4 h-4" />
                   </Button>

frontend/src/components/budget/MonthlyDetail.tsx

@@ -1,9 +1,18 @@
+import { useState } from 'react';
+import { PieChart, Pie, Cell } from 'recharts';
+
 import { type MonthlyDetail as MonthlyDetailType } from '@/api';
 import { formatAmount } from '@/lib/format';
 import { cn } from '@/lib/utils';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
+import { Button } from '@/components/ui/button';
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from '@/components/ui/chart';
 import {
   TrendingUp,
   TrendingDown,
@@ -14,13 +23,30 @@ import {
   Info,
 } from 'lucide-react';
 
-const MONTH_NAMES = [
-  '', 'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
-  'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre',
-];
+type PaletteMode = 'chatgpt' | 'gemini';
 
-const SOURCE_LABELS: Record<string, { label: string; icon: typeof CreditCard }> = {
-  CREDIT_CARD: { label: 'Tarjeta de Crédito', icon: CreditCard },
+const PALETTES: Record<PaletteMode, { income: string[]; expense: string[]; cc: string[] }> = {
+  chatgpt: {
+    // Pure green scale, darkest → lightest (assigned by rank)
+    income: ['#14532D', '#16A34A', '#4ADE80', '#BBF7D0'],
+    // Pure amber scale, darkest → lightest (assigned by rank)
+    expense: ['#92400E', '#B45309', '#D97706', '#F59E0B', '#FCD34D'],
+    // Warm-to-cool alternating for CC categories
+    cc: ['#B45309', '#2563EB', '#DC2626', '#16A34A', '#7C3AED',
+         '#D97706', '#0F766E', '#DB2777', '#EA580C', '#4F46E5'],
+  },
+  gemini: {
+    // Qualitative greens: dark green, mint, pale green, forest
+    income: ['#2D6A4F', '#52B788', '#B7E4C7', '#1B4332'],
+    // Terracotta, slate blue, sage, sand — diverse hues
+    expense: ['#E07A5F', '#3D405B', '#81B29A', '#F2CC8F', '#D56B4E', '#2E344A', '#6A9E85', '#E5B87A'],
+    // Pastel/muted diverse for CC categories
+    cc: ['#6366F1', '#EC4899', '#14B8A6', '#F97316', '#8B5CF6',
+         '#06B6D4', '#EF4444', '#10B981', '#F59E0B', '#3B82F6'],
+  },
+};
+
+const SOURCE_LABELS: Record<string, { label: string; icon: typeof Banknote }> = {
   CASH: { label: 'Efectivo', icon: Banknote },
   TRANSFER: { label: 'Transferencias', icon: ArrowLeftRight },
 };
@@ -28,9 +54,12 @@ const SOURCE_LABELS: Record<string, { label: string; icon: typeof CreditCard }>
 interface MonthlyDetailProps {
   detail: MonthlyDetailType;
   loading?: boolean;
+  onNavigateToTransactions?: () => void;
 }
 
-export default function MonthlyDetail({ detail, loading }: MonthlyDetailProps) {
+export default function MonthlyDetail({ detail, loading, onNavigateToTransactions }: MonthlyDetailProps) {
+  const [paletteMode, setPaletteMode] = useState<PaletteMode>('chatgpt');
+
   if (loading) {
     return (
       <div className="grid gap-4 md:grid-cols-3">
@@ -43,108 +72,320 @@ export default function MonthlyDetail({ detail, loading }: MonthlyDetailProps) {
     );
   }
 
+  const { income: incomeColors, expense: expenseColors, cc: ccColors } = PALETTES[paletteMode];
+
+  const incomeData = detail.income_items.map((item) => ({ name: item.name, value: item.amount }));
+  const expenseData = detail.expense_items.map((item) => ({ name: item.name, value: item.amount }));
+
+  // For ChatGPT mode: assign colors by rank (largest = darkest)
+  // For Gemini mode: assign colors by position (qualitative)
+  function buildColorMap(data: { name: string; value: number }[], colors: string[]): Map<string, string> {
+    if (paletteMode === 'chatgpt') {
+      const sorted = [...data].sort((a, b) => b.value - a.value);
+      const map = new Map<string, string>();
+      sorted.forEach((item, i) => {
+        map.set(item.name, colors[Math.min(i, colors.length - 1)]);
+      });
+      return map;
+    }
+    // Gemini: positional
+    const map = new Map<string, string>();
+    data.forEach((item, i) => {
+      map.set(item.name, colors[i % colors.length]);
+    });
+    return map;
+  }
+
+  const incomeColorMap = buildColorMap(incomeData, incomeColors);
+  const expenseColorMap = buildColorMap(expenseData, expenseColors);
+
+  const incomeConfig = incomeData.reduce<ChartConfig>((acc, item) => {
+    acc[item.name] = { label: item.name, color: incomeColorMap.get(item.name)! };
+    return acc;
+  }, {});
+
+  const expenseConfig = expenseData.reduce<ChartConfig>((acc, item) => {
+    acc[item.name] = { label: item.name, color: expenseColorMap.get(item.name)! };
+    return acc;
+  }, {});
+
+  // CC spending by category
+  const ccData = (detail.cc_by_category ?? []).map((item) => ({
+    name: item.category_name,
+    value: item.amount,
+  }));
+  const ccConfig = ccData.reduce<ChartConfig>((acc, item, i) => {
+    acc[item.name] = { label: item.name, color: ccColors[i % ccColors.length] };
+    return acc;
+  }, {});
+  const ccTotal = ccData.reduce((sum, item) => sum + item.value, 0);
+
+  // Filter actuals to only cash and transfer (no credit card)
+  const cashTransferActuals = detail.actuals_by_source.filter(
+    (src) => src.source !== 'CREDIT_CARD' && src.count > 0
+  );
+
   return (
     <div className="space-y-4">
-      <h3 className="text-lg font-semibold">
-        Detalle: {MONTH_NAMES[detail.month]} {detail.year}
-      </h3>
+      {/* Palette Toggle */}
+      <div className="flex items-center justify-end gap-1">
+        <span className="text-xs text-muted-foreground mr-1">Paleta:</span>
+        <Button
+          variant={paletteMode === 'chatgpt' ? 'default' : 'outline'}
+          size="sm"
+          className="h-6 text-xs px-2"
+          onClick={() => setPaletteMode('chatgpt')}
+        >
+          ChatGPT
+        </Button>
+        <Button
+          variant={paletteMode === 'gemini' ? 'default' : 'outline'}
+          size="sm"
+          className="h-6 text-xs px-2"
+          onClick={() => setPaletteMode('gemini')}
+        >
+          Gemini
+        </Button>
+      </div>
 
-      <div className="grid gap-4 md:grid-cols-3">
-        {/* Income Card */}
+      {/* Pie Charts */}
+      <div className="grid gap-4 md:grid-cols-2">
+        {/* Income Pie */}
         <Card>
-          <CardHeader className="pb-2">
+          <CardHeader className="pb-0">
             <CardTitle className="text-sm font-medium flex items-center gap-2">
               <TrendingUp className="w-4 h-4 text-primary" />
               Ingresos
             </CardTitle>
           </CardHeader>
-          <CardContent className="space-y-2">
-            {detail.income_items.map((item) => (
-              <div key={item.id} className="flex items-center justify-between text-sm">
-                <span className="truncate mr-2">{item.name}</span>
-                <span data-sensitive className="font-mono text-primary whitespace-nowrap">
-                  {formatAmount(item.amount, 'CRC')}
-                </span>
+          <CardContent>
+            {incomeData.length > 0 ? (
+              <div className="flex flex-col items-center">
+                <ChartContainer config={incomeConfig} className="h-[200px] w-full">
+                  <PieChart>
+                    <Pie
+                      data={incomeData}
+                      dataKey="value"
+                      nameKey="name"
+                      cx="50%"
+                      cy="50%"
+                      innerRadius={50}
+                      outerRadius={80}
+                      paddingAngle={2}
+                      strokeWidth={2}
+                      stroke="var(--card)"
+                    >
+                      {incomeData.map((item, i) => (
+                        <Cell key={i} fill={incomeColorMap.get(item.name)!} />
+                      ))}
+                    </Pie>
+                    <ChartTooltip
+                      content={
+                        <ChartTooltipContent
+                          nameKey="name"
+                          formatter={(value, name) => (
+                            <span>{name}: {formatAmount(Number(value), 'CRC')}</span>
+                          )}
+                        />
+                      }
+                    />
+                  </PieChart>
+                </ChartContainer>
+                <div className="grid grid-cols-2 gap-x-4 gap-y-1 mt-1 w-full">
+                  {incomeData.map((item, i) => (
+                    <div key={item.name} className="flex items-center gap-1.5 text-xs">
+                      <div
+                        className="w-2 h-2 rounded-full shrink-0"
+                        style={{ background: incomeColorMap.get(item.name) }}
+                      />
+                      <span className="truncate text-muted-foreground">{item.name}</span>
+                    </div>
+                  ))}
+                </div>
+                <Separator className="mt-3" />
+                <div className="flex items-center justify-between w-full mt-2 font-semibold text-sm">
+                  <span>Total</span>
+                  <span data-sensitive className="font-mono text-primary">
+                    {formatAmount(detail.total_projected_income, 'CRC')}
+                  </span>
+                </div>
               </div>
-            ))}
-            <Separator />
-            <div className="flex items-center justify-between font-semibold text-sm">
-              <span>Total</span>
-              <span data-sensitive className="font-mono text-primary">
-                {formatAmount(detail.total_projected_income, 'CRC')}
-              </span>
-            </div>
+            ) : (
+              <p className="text-sm text-muted-foreground py-8 text-center">Sin ingresos</p>
+            )}
           </CardContent>
         </Card>
 
-        {/* Expenses Card */}
+        {/* Expenses Pie */}
         <Card>
-          <CardHeader className="pb-2">
+          <CardHeader className="pb-0">
             <CardTitle className="text-sm font-medium flex items-center gap-2">
               <TrendingDown className="w-4 h-4 text-destructive" />
               Egresos Fijos
             </CardTitle>
           </CardHeader>
-          <CardContent className="space-y-2">
-            {detail.expense_items.map((item) => (
-              <div key={item.id} className="flex items-center justify-between text-sm">
-                <div className="flex items-center gap-1 truncate mr-2">
-                  <span className="truncate">{item.name}</span>
-                  {item.used_actual && (
-                    <Badge variant="secondary" className="text-[10px] px-1 py-0 shrink-0">
-                      real
-                    </Badge>
-                  )}
+          <CardContent>
+            {expenseData.length > 0 ? (
+              <div className="flex flex-col items-center">
+                <ChartContainer config={expenseConfig} className="h-[200px] w-full">
+                  <PieChart>
+                    <Pie
+                      data={expenseData}
+                      dataKey="value"
+                      nameKey="name"
+                      cx="50%"
+                      cy="50%"
+                      innerRadius={50}
+                      outerRadius={80}
+                      paddingAngle={2}
+                      strokeWidth={2}
+                      stroke="var(--card)"
+                    >
+                      {expenseData.map((item, i) => (
+                        <Cell key={i} fill={expenseColorMap.get(item.name)!} />
+                      ))}
+                    </Pie>
+                    <ChartTooltip
+                      content={
+                        <ChartTooltipContent
+                          formatter={(value, name) => (
+                            <span>{name}: {formatAmount(Number(value), 'CRC')}</span>
+                          )}
+                        />
+                      }
+                    />
+                  </PieChart>
+                </ChartContainer>
+                <div className="grid grid-cols-2 gap-x-4 gap-y-1 mt-1 w-full">
+                  {expenseData.map((item, i) => (
+                    <div key={item.name} className="flex items-center gap-1.5 text-xs">
+                      <div
+                        className="w-2 h-2 rounded-full shrink-0"
+                        style={{ background: expenseColorMap.get(item.name) }}
+                      />
+                      <span className="truncate text-muted-foreground">{item.name}</span>
+                    </div>
+                  ))}
                 </div>
-                <div data-sensitive className="text-right whitespace-nowrap">
-                  <span className="font-mono">{formatAmount(item.amount, 'CRC')}</span>
-                  {item.used_actual && item.projected_amount != null && (
-                    <span className="block text-[10px] text-muted-foreground font-mono line-through">
-                      {formatAmount(item.projected_amount, 'CRC')}
-                    </span>
-                  )}
+                <Separator className="mt-3" />
+                <div className="flex items-center justify-between w-full mt-2 font-semibold text-sm">
+                  <span>Total Fijos</span>
+                  <span data-sensitive className="font-mono">
+                    {formatAmount(detail.total_projected_expenses, 'CRC')}
+                  </span>
                 </div>
               </div>
-            ))}
-            {detail.expense_items.length === 0 && (
-              <p className="text-sm text-muted-foreground">Sin egresos fijos</p>
+            ) : (
+              <p className="text-sm text-muted-foreground py-8 text-center">Sin egresos fijos</p>
             )}
-            <Separator />
-            <div className="flex items-center justify-between font-semibold text-sm">
-              <span>Total Fijos</span>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Credit Card by Category */}
+      {ccData.length > 0 && (
+        <Card>
+          <CardHeader className="pb-0">
+            <CardTitle className="text-sm font-medium flex items-center gap-2">
+              <CreditCard className="w-4 h-4" />
+              Tarjeta de Crédito
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-col md:flex-row items-center gap-4">
+              <ChartContainer config={ccConfig} className="h-[200px] w-full md:w-1/2">
+                <PieChart>
+                  <Pie
+                    data={ccData}
+                    dataKey="value"
+                    nameKey="name"
+                    cx="50%"
+                    cy="50%"
+                    innerRadius={50}
+                    outerRadius={80}
+                    paddingAngle={2}
+                    strokeWidth={2}
+                    stroke="var(--card)"
+                  >
+                    {ccData.map((_, i) => (
+                      <Cell key={i} fill={ccColors[i % ccColors.length]} />
+                    ))}
+                  </Pie>
+                  <ChartTooltip
+                    content={
+                      <ChartTooltipContent
+                        nameKey="name"
+                        formatter={(value, name) => (
+                          <span>{name}: {formatAmount(Number(value), 'CRC')}</span>
+                        )}
+                      />
+                    }
+                  />
+                </PieChart>
+              </ChartContainer>
+              <div className="grid grid-cols-2 gap-x-4 gap-y-1 w-full md:w-1/2">
+                {ccData.map((item, i) => (
+                  <div key={item.name} className="flex items-center gap-1.5 text-xs">
+                    <div
+                      className="w-2 h-2 rounded-full shrink-0"
+                      style={{ background: ccColors[i % ccColors.length] }}
+                    />
+                    <span className="truncate text-muted-foreground">{item.name}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <Separator className="mt-3" />
+            <div className="flex items-center justify-between w-full mt-2 font-semibold text-sm">
+              <span>Total Tarjeta</span>
               <span data-sensitive className="font-mono">
-                {formatAmount(detail.total_projected_expenses, 'CRC')}
+                {formatAmount(ccTotal, 'CRC')}
               </span>
             </div>
           </CardContent>
         </Card>
+      )}
 
-        {/* Actuals Card */}
+      {/* Actuals + Savings + Summary */}
+      <div className="grid gap-4 md:grid-cols-3">
+        {/* Cash & Transfer Actuals Card */}
         <Card>
           <CardHeader className="pb-2">
             <CardTitle className="text-sm font-medium flex items-center gap-2">
-              <CreditCard className="w-4 h-4" />
-              Transacciones Reales
+              <Banknote className="w-4 h-4" />
+              Efectivo o Transferencias
             </CardTitle>
           </CardHeader>
           <CardContent className="space-y-2">
-            {detail.actuals_by_source.map((src) => {
+            {cashTransferActuals.map((src) => {
               const meta = SOURCE_LABELS[src.source];
-              if (!meta || src.count === 0) return null;
+              if (!meta) return null;
               const Icon = meta.icon;
+              const isClickable = onNavigateToTransactions != null;
               return (
                 <div key={src.source} className="flex items-center justify-between text-sm">
-                  <div className="flex items-center gap-1.5">
+                  <button
+                    type="button"
+                    className={cn(
+                      'flex items-center gap-1.5',
+                      isClickable && 'cursor-pointer hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded',
+                    )}
+                    onClick={isClickable ? onNavigateToTransactions : undefined}
+                    disabled={!isClickable}
+                  >
                     <Icon className="w-3.5 h-3.5 text-muted-foreground" />
                     <span>{meta.label}</span>
                     <span className="text-xs text-muted-foreground">({src.count})</span>
-                  </div>
+                  </button>
                   <span data-sensitive className="font-mono whitespace-nowrap">
                     {formatAmount(src.net, 'CRC')}
                   </span>
                 </div>
               );
             })}
+            {cashTransferActuals.length === 0 && (
+              <p className="text-sm text-muted-foreground">Sin transacciones</p>
+            )}
             {detail.uncovered_actual > 0 && (
               <>
                 <Separator />
@@ -159,10 +400,7 @@ export default function MonthlyDetail({ detail, loading }: MonthlyDetailProps) {
             )}
           </CardContent>
         </Card>
-      </div>
 
-      {/* Savings + Summary */}
-      <div className="grid gap-4 md:grid-cols-2">
         {/* Savings */}
         {detail.savings_items.length > 0 && (
           <Card>

frontend/src/components/transactions/transaction-columns.tsx

@@ -1,5 +1,5 @@
 import { type ColumnDef } from '@tanstack/react-table';
-import { Pencil, Trash2, TrendingDown, TrendingUp } from 'lucide-react';
+import { ArrowLeftRight, ArrowRightFromLine, Banknote, Pencil, Trash2, TrendingDown, TrendingUp } from 'lucide-react';
 
 import { type Transaction } from '@/api';
 import { formatAmount } from '@/lib/format';
@@ -10,14 +10,18 @@ import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
 
 interface TransactionColumnOptions {
   showCategory: boolean;
+  showSourceIcon?: boolean;
   onEdit: (tx: Transaction) => void;
   onDelete: (txId: number) => void;
+  onToggleDeferred?: (tx: Transaction) => void;
 }
 
 export function getTransactionColumns({
   showCategory,
+  showSourceIcon,
   onEdit,
   onDelete,
+  onToggleDeferred,
 }: TransactionColumnOptions): ColumnDef<Transaction, unknown>[] {
   const columns: ColumnDef<Transaction, unknown>[] = [
     {
@@ -55,6 +59,17 @@ export function getTransactionColumns({
               )}
             </div>
             <span className="truncate">{tx.merchant}</span>
+            {showSourceIcon && tx.source === 'CASH' && (
+              <Banknote className="w-3.5 h-3.5 text-muted-foreground shrink-0 ml-1" />
+            )}
+            {showSourceIcon && tx.source === 'TRANSFER' && (
+              <ArrowLeftRight className="w-3.5 h-3.5 text-muted-foreground shrink-0 ml-1" />
+            )}
+            {tx.deferred_to_next_cycle && (
+              <Badge variant="outline" className="ml-1.5 text-[10px] px-1 py-0 shrink-0 text-amber-600 border-amber-300">
+                Diferida
+              </Badge>
+            )}
           </div>
         );
       },
@@ -109,6 +124,18 @@ export function getTransactionColumns({
         const tx = row.original;
         return (
           <div className="flex items-center justify-end gap-1">
+            {onToggleDeferred && (
+              <Button
+                variant="ghost"
+                size="icon"
+                title={tx.deferred_to_next_cycle ? 'Quitar diferida' : 'Diferir al siguiente ciclo'}
+                aria-label={tx.deferred_to_next_cycle ? 'Remove deferred' : 'Defer to next cycle'}
+                onClick={() => onToggleDeferred(tx)}
+                className={cn(tx.deferred_to_next_cycle && 'text-amber-600')}
+              >
+                <ArrowRightFromLine className="w-4 h-4" />
+              </Button>
+            )}
             <Button
               variant="ghost"
               size="icon"

frontend/src/index.css

@@ -25,11 +25,11 @@
     --border: oklch(0.92 0.004 286.32);
     --input: oklch(0.92 0.004 286.32);
     --ring: oklch(0.705 0.015 286.067);
-    --chart-1: oklch(0.905 0.182 98.111);
-    --chart-2: oklch(0.795 0.184 86.047);
-    --chart-3: oklch(0.681 0.162 75.834);
-    --chart-4: oklch(0.554 0.135 66.442);
-    --chart-5: oklch(0.476 0.114 61.907);
+    --chart-1: oklch(0.55 0.16 145);
+    --chart-2: oklch(0.62 0.19 25);
+    --chart-3: oklch(0.58 0.14 250);
+    --chart-4: oklch(0.68 0.15 80);
+    --chart-5: oklch(0.52 0.13 320);
     --radius: 0.625rem;
     --sidebar: oklch(0.985 0 0);
     --sidebar-foreground: oklch(0.141 0.005 285.823);
@@ -60,11 +60,11 @@
     --border: oklch(1 0 0 / 10%);
     --input: oklch(1 0 0 / 15%);
     --ring: oklch(0.552 0.016 285.938);
-    --chart-1: oklch(0.905 0.182 98.111);
-    --chart-2: oklch(0.795 0.184 86.047);
-    --chart-3: oklch(0.681 0.162 75.834);
-    --chart-4: oklch(0.554 0.135 66.442);
-    --chart-5: oklch(0.476 0.114 61.907);
+    --chart-1: oklch(0.60 0.16 145);
+    --chart-2: oklch(0.67 0.19 25);
+    --chart-3: oklch(0.63 0.14 250);
+    --chart-4: oklch(0.73 0.15 80);
+    --chart-5: oklch(0.57 0.13 320);
     --sidebar: oklch(0.21 0.006 285.885);
     --sidebar-foreground: oklch(0.985 0 0);
     --sidebar-primary: oklch(0.704 0.14 182.503);

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>