// Rumbo — Gastos Fijos · v3 · Lista "Próximos Vencimientos" + semáforo de urgencia const { useState: useStCal, useMemo: useMemoCAL, useEffect: useEffectCal } = React; /* ── Drawer "Nuevo gasto fijo" — selector dinámico de frecuencia ── */ const AddFixedDrawer = ({ onClose, onAdd, fxRates, data }) => { const MONTHS_NAMES = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre']; const [form, setF] = useStCal({ name: '', amount: '', currency: 'ARS', dueDay: 1, // mensual: día 1-31 | quincenal: día de inicio weekDay: 0, // semanal: 0=Lun … 6=Dom annualDay: 1, annualMonth: 1, category: 'Servicios', frequency: 'mensual', iconName: 'home', active: true, reminder: 1, }); const [showCurrencyPicker, setShowCurrencyPicker] = useStCal(false); const [showIconPicker, setShowIconPicker] = useStCal(false); const WEEK_DAYS = [ { short:'L', full:'Lunes' }, { short:'M', full:'Martes' }, { short:'M', full:'Miércoles' }, { short:'J', full:'Jueves' }, { short:'V', full:'Viernes' }, { short:'S', full:'Sábado' }, { short:'D', full:'Domingo' }, ]; const ICONS = [ 'home','building','wifi','smartphone','zap','droplet','flame', 'film','music','headphones','gamepad','cpu', 'heart','pill','coffee','shoppingCart', 'car','plane','bookOpen','briefcase','palette','gift','lightbulb','package', ]; const CATS = ['Hogar','Servicios','Entretenimiento','Salud','IA / Software','Transporte','Transferencias','Educación','Otros']; const REMINDERS = [ { value: 0, label: 'El mismo día' }, { value: 1, label: '1 día antes' }, { value: 3, label: '3 días antes' }, ]; const selCur = SUPPORTED_CURRENCIES.find(c => c.code === form.currency) || SUPPORTED_CURRENCIES[0]; const secCard = { background:'var(--surface-2)', border:'1.5px solid var(--border)', borderRadius:'var(--r-lg)', padding:'14px 18px', marginBottom:14 }; const lbl = { fontSize:11, fontWeight:700, color:'var(--t5)', textTransform:'uppercase', letterSpacing:'0.4px', marginBottom:8 }; const rawInput = { width:'100%', background:'none', border:'none', outline:'none', color:'var(--t1)', fontSize:15, fontFamily:'var(--font)', fontWeight:500 }; const noSpin = { WebkitAppearance:'none', MozAppearance:'textfield' }; // Helpers — formato decimal es-AR const parseAmount = (s) => { let v = String(s || '').replace(/[^\d,]/g, ''); const parts = v.split(','); if (parts.length > 2) v = parts[0] + ',' + parts.slice(1).join(''); const [i, d] = v.split(','); return d !== undefined ? `${i},${d.slice(0,2)}` : (i || ''); }; const fmtAmount = (raw) => { if (raw === '' || raw == null) return ''; const [i, d] = String(raw).split(','); const intNum = Number(i || '0'); const intFmt = isNaN(intNum) ? '0' : intNum.toLocaleString('es-AR'); return d !== undefined ? `${intFmt},${d}` : intFmt; }; const toNumber = (raw) => { if (raw === '' || raw == null) return 0; return parseFloat(String(raw).replace(',', '.')) || 0; }; // Contexto financiero — gastos fijos mensuales actuales + impacto del nuevo const baseCurrency = data?.settings?.currency || 'ARS'; const fixedExpenses = data?.fixedExpenses || []; const totalMensualActual = (typeof getMonthlyFixedTotal === 'function') ? getMonthlyFixedTotal(fixedExpenses, fxRates, baseCurrency) : fixedExpenses.filter(f => f.active).reduce((s,f) => s + (f.amount||0), 0); const nuevoMontoBase = (() => { const n = toNumber(form.amount); if (n === 0) return 0; const mult = (typeof FREQUENCIES !== 'undefined' && FREQUENCIES[form.frequency]?.multiplier) || 1; const monthly = n * mult; return (typeof convertToBase === 'function') ? convertToBase(monthly, form.currency, fxRates, baseCurrency) : monthly; })(); const totalMensualFinal = totalMensualActual + nuevoMontoBase; // ── Frase resumen dinámica ────────────────────────────── const amtStr = form.amount ? `${selCur.symbol}${fmtAmount(form.amount)}` : 'Este gasto'; const reminderLabel = REMINDERS.find(r => r.value === form.reminder)?.label?.toLowerCase() || '1 día antes'; const summaryPhrase = (() => { switch (form.frequency) { case 'diario': return `${amtStr} se registrará todos los días automáticamente.`; case 'semanal': return `${amtStr} se registrará cada ${WEEK_DAYS[form.weekDay].full} y te avisaremos ${reminderLabel}.`; case 'quincenal': return form.dueDay ? `${amtStr} se registrará a partir del día ${form.dueDay} y se repetirá cada 15 días. Te avisaremos ${reminderLabel}.` : `${amtStr} se repetirá cada 15 días. Elegí el día de inicio.`; case 'mensual': return `${amtStr} se registrará el día ${form.dueDay} de cada mes y te avisaremos ${reminderLabel}.`; case 'anual': return `${amtStr} se registrará el ${form.annualDay} de ${MONTHS_NAMES[form.annualMonth-1]} de cada año y te avisaremos ${reminderLabel}.`; default: return ''; } })(); // ── Submit ───────────────────────────────────────────── const submit = () => { if (!form.name || !form.amount) { window.showToast('Completá nombre y monto', 'warning'); return; } const dueDay = form.frequency === 'anual' ? form.annualDay : parseInt(form.dueDay) || 1; onAdd({ ...form, id: 'f' + Date.now(), amount: toNumber(form.amount), dueDay, }); onClose(); window.showToast('Gasto fijo agregado', 'success'); }; return ( <>
{/* Header */}
Nuevo gasto fijo
Servicio, suscripción o cuota
{/* Tira de contexto financiero */}
Fijos por mes {nuevoMontoBase > 0 ? <>{fmtFull(totalMensualActual)} → {fmtFull(totalMensualFinal)} : fmtFull(totalMensualActual) }
{nuevoMontoBase > 0 && (
+{fmtFull(nuevoMontoBase)}
)}
{/* Ícono — botón que abre el IconPicker */}
Ícono
{/* Nombre */}
Nombre * {(form.name||'').length}/60
setF(f=>({...f,name:e.target.value}))} style={rawInput} />
{/* Monto + moneda */}
Monto *
– setF(f=>({...f,amount:parseAmount(e.target.value)}))} style={{ ...rawInput, fontSize:30, fontWeight:900, fontVariantNumeric:'tabular-nums', flex:1 }} />
{/* ── FRECUENCIA — selector principal ── */}
Frecuencia
{/* ══ DIARIO — sin selector, solo confirmación ══ */} {form.frequency === 'diario' && (
Se registrará automáticamente todos los días.
)} {/* ══ SEMANAL — 7 botones L M M J V S D ══ */} {form.frequency === 'semanal' && (
¿Qué día de la semana?
{WEEK_DAYS.map((d, i) => { const active = form.weekDay === i; return ( ); })}
)} {/* ══ QUINCENAL — selector del día de inicio (1-31) ══ */} {form.frequency === 'quincenal' && (
setF(f=>({...f,dueDay:v}))} dayOnly />
El sistema calculará automáticamente que se repite cada 15 días desde el día {form.dueDay || '—'}.
)} {/* ══ MENSUAL — selector numérico día 1-31 ══ */} {form.frequency === 'mensual' && (
setF(f=>({...f,dueDay:v}))} dayOnly />
)} {/* ══ ANUAL — Día (1-31) + Mes ══ */} {form.frequency === 'anual' && (
¿Qué día del año vence?
{/* Día — grid compacto 1-31 */}
Día
{Array.from({length:31},(_,i)=>i+1).map(d => ( ))}
{/* Mes — lista scrolleable */}
Mes
{MONTHS_NAMES.map((m,i) => ( ))}
{/* Confirmación visual */}
Cada año el {form.annualDay} de {MONTHS_NAMES[form.annualMonth-1]}
)}
{/* ── RECORDATORIO ── */}
Recordatorio
{REMINDERS.map(r => ( ))}
{/* Categoría */}
Categoría
{/* ── FRASE RESUMEN ── */} {summaryPhrase && (

{summaryPhrase}

)} {/* Botón */}
{/* Currency Picker reutilizado */} {showCurrencyPicker && ( setF(f=>({...f,currency:c}))} onClose={() => setShowCurrencyPicker(false)} /> )} {showIconPicker && ( setF(f=>({...f,iconName:ic}))} onClose={() => setShowIconPicker(false)} /> )} ); }; /* ── Pantalla principal ── */ const CalendarView = ({ data, setData, theme, toggleTheme, selectedMonth, setSelectedMonth }) => { const [showAdd, setShowAdd] = useStCal(false); const [activeTab, setActiveTab] = useStCal('upcoming'); const { fixedExpenses = [], fxRates = DEFAULT_FX_RATES, settings } = data; const baseCurrency = settings?.currency || 'ARS'; const curMonth = selectedMonth || `${new Date().getFullYear()}-${String(new Date().getMonth()+1).padStart(2,'0')}`; const todayKey = `${new Date().getFullYear()}-${String(new Date().getMonth()+1).padStart(2,'0')}`; const isCurrentMonth = curMonth === todayKey; // Solicitar notificaciones useEffectCal(() => { if ('Notification' in window && Notification.permission === 'default') { Notification.requestPermission(); } }, []); // El FAB central del bottom-nav mobile dispara este evento contextual useEffectCal(() => { const handler = (e) => { if (e.detail === 'fixed') setShowAdd(true); }; window.addEventListener('rumbo:openAdd', handler); return () => window.removeEventListener('rumbo:openAdd', handler); }, []); const handleAdd = (fe) => { const updated = { ...data, fixedExpenses: [...fixedExpenses, fe] }; setData(updated); saveData(updated); }; const handleToggle = (id) => { const updated = { ...data, fixedExpenses: fixedExpenses.map(f => f.id===id?{...f,active:!f.active}:f) }; setData(updated); saveData(updated); }; const handleDelete = (id) => { const updated = { ...data, fixedExpenses: fixedExpenses.filter(f => f.id!==id) }; setData(updated); saveData(updated); window.showToast('Gasto fijo eliminado'); }; // Calcular urgencia const withUrgency = useMemoCAL(() => fixedExpenses.map(f => ({ ...f, daysUntil: getDaysUntilDue(f.dueDay), monthlyARS: convertToBase(f.amount * (FREQUENCIES[f.frequency||'mensual']?.multiplier||1), f.currency, fxRates, baseCurrency), })).sort((a,b) => a.daysUntil - b.daysUntil) , [fixedExpenses, fxRates, baseCurrency]); const totalMonthly = useMemoCAL(() => fixedExpenses.filter(f=>f.active).reduce((s,f) => { const freq = FREQUENCIES[f.frequency||'mensual']; return s + convertToBase(f.amount*(freq?.multiplier||1), f.currency, fxRates, baseCurrency); }, 0) , [fixedExpenses, fxRates, baseCurrency]); const upcoming = withUrgency.filter(f => f.active && f.daysUntil <= 10); const allActive = withUrgency.filter(f => f.active); const inactive = withUrgency.filter(f => !f.active); // Vencimientos del mes seleccionado — para navegación temporal const monthDuesItems = useMemoCAL(() => { const items = []; fixedExpenses.filter(f => f.active).forEach(f => { const dates = (typeof getDueDatesInMonth === 'function') ? getDueDatesInMonth(f, curMonth) : []; dates.forEach(date => items.push({ fixed: f, date, amount: f.amount })); }); return items.sort((a,b) => a.date - b.date); }, [fixedExpenses, curMonth]); const monthDuesTotal = monthDuesItems.reduce((s,i) => s + convertToBase(i.amount, i.fixed.currency, fxRates, baseCurrency), 0); const urgencyConfig = (days) => { if (days <= 0) return { cls:'u-red', label:'Vence hoy', color:'var(--danger)', labelColor:'var(--danger-text)' }; if (days === 1) return { cls:'u-red', label:'Mañana', color:'var(--danger)', labelColor:'var(--danger-text)' }; if (days <= 3) return { cls:'u-red', label:'En unos días', color:'var(--danger)', labelColor:'var(--danger-text)' }; if (days <= 7) return { cls:'u-yellow', label:'Esta semana', color:'var(--warning)', labelColor:'var(--warning-text)' }; if (days <= 10) return { cls:'u-green', label:'La semana que viene', color:'var(--success)', labelColor:'var(--success-text)' }; return { cls:'u-green', label:'Próximamente', color:'var(--success)', labelColor:'var(--success-text)' }; }; const FixedRow = ({ f, showUrgency = false }) => { const urg = urgencyConfig(f.daysUntil); const curInfo = SUPPORTED_CURRENCIES.find(c=>c.code===f.currency)||SUPPORTED_CURRENCIES[0]; return (
e.currentTarget.style.background='var(--surface-2)'} onMouseLeave={e=>e.currentTarget.style.background=''}> {/* Semáforo */} {showUrgency && (
)} {/* Icono */}
{/* Info */}
{f.name}
{FREQUENCIES[f.frequency||'mensual']?.label} · {f.category} {showUrgency && ( · {urg.label} )}
{/* Monto */}
{curInfo.symbol}{f.amount.toLocaleString('es-AR')}
{f.currency !== baseCurrency && (
≈ {fmt(f.monthlyARS)}/mes
)}
{/* Toggle + delete */}
); }; return (
{/* Header */}

Gastos fijos

{allActive.length} activos · {fmt(totalMonthly)}/mes

{setSelectedMonth && ( )} {toggleTheme && ( )}
{/* Vencimientos del mes seleccionado — solo cuando NO es el mes actual */} {!isCurrentMonth && monthDuesItems.length > 0 && (
{curMonth > todayKey ? 'Te toca pagar en' : 'Te tocó pagar en'}
{(() => { const [y,m]=curMonth.split('-').map(Number); const lbl=new Date(y,m-1,1).toLocaleDateString('es-AR',{month:'long',year:'numeric'}); return lbl.charAt(0).toUpperCase()+lbl.slice(1); })()}
{fmt(monthDuesTotal)}
{monthDuesItems.length} vencimientos
{monthDuesItems.map((it, i) => (
{it.fixed.name}
{it.date.toLocaleDateString('es-AR', { weekday:'short', day:'numeric', month:'short' })} · {it.fixed.category}
{fmtFull(it.amount, it.fixed.currency)}
))}
)} {/* Resumen total */}
Total mensual fijos
{fmt(totalMonthly)}
{[ { v:upcoming.filter(f=>f.daysUntil<=3).length, l:'Urgentes', cls:'u-red' }, { v:upcoming.filter(f=>f.daysUntil>3).length, l:'Esta semana', cls:'u-yellow' }, { v:inactive.length, l:'Pausados', cls:'u-gray' }, ].map(({ v, l, cls }) => (
{v}
{l}
))}
{/* Tabs */}
{[ ['upcoming','Próximos','bell'], ['all','Todos',null], ['inactive','Pausados',null], ].map(([v,l,ic]) => ( ))}
{/* Próximos vencimientos */} {activeTab === 'upcoming' && ( <> {upcoming.length === 0 ? (
Todo en orden
No tenés vencimientos en los próximos 10 días.
) : ( <> {/* Leyenda semáforo */}
{[ {cls:'u-red',l:'Inminente'}, {cls:'u-yellow',l:'Esta semana'}, {cls:'u-green',l:'Próximas semanas'}, ].map(({cls,l}) => (
{l}
))}
{upcoming.map(f => )}
)} )} {/* Todos los activos */} {activeTab === 'all' && (
{allActive.length === 0 ?
Sin gastos fijos activos
: allActive.map(f => ) }
)} {/* Pausados */} {activeTab === 'inactive' && (
{inactive.length === 0 ?
No hay gastos pausados
: inactive.map(f => ) }
)}
{/* FAB persistente */} {showAdd && setShowAdd(false)} onAdd={handleAdd} fxRates={fxRates} data={data} />}
); }; Object.assign(window, { CalendarView });