// Rumbo — DatePicker · único componente para los 3 formularios
// Props:
// label string — etiqueta uppercase
// value string|number — YYYY-MM-DD (normal) ó 1-31 (dayOnly)
// onChange fn(v) — devuelve string o number según modo
// required bool
// dayOnly bool — modo "día del mes": devuelve 1-31, muestra "Día X de cada mes"
const { useState: useStPK } = React;
const MONTHS_ES = [
'Enero','Febrero','Marzo','Abril','Mayo','Junio',
'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'
];
const DAYS_ES = ['Do','Lu','Ma','Mi','Ju','Vi','Sá'];
const DatePicker = ({ label, value, onChange, required = false, dayOnly = false }) => {
// Inicializar vista del calendario
const initView = () => {
if (dayOnly) {
const n = new Date();
return { y: n.getFullYear(), m: n.getMonth() };
}
const d = value ? new Date(value + 'T00:00:00') : new Date();
return { y: d.getFullYear(), m: d.getMonth() };
};
const [open, setOpen] = useStPK(false);
const [viewY, setViewY] = useStPK(() => initView().y);
const [viewM, setViewM] = useStPK(() => initView().m);
const today = new Date(); today.setHours(0,0,0,0);
const parsedFull = (!dayOnly && value) ? new Date(value + 'T00:00:00') : null;
const firstDay = new Date(viewY, viewM, 1).getDay();
const daysInMonth = new Date(viewY, viewM + 1, 0).getDate();
const prevM = () => { if (viewM===0) { setViewM(11); setViewY(y=>y-1); } else setViewM(m=>m-1); };
const nextM = () => { if (viewM===11){ setViewM(0); setViewY(y=>y+1); } else setViewM(m=>m+1); };
const select = (day) => {
if (dayOnly) {
onChange(day);
} else {
const d = new Date(viewY, viewM, day);
onChange(`${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`);
}
setOpen(false);
};
// Texto del trigger
const displayText = dayOnly
? (value ? `Día ${value} de cada mes` : 'Seleccionar día…')
: (parsedFull
? parsedFull.toLocaleDateString('es-AR', { weekday:'short', day:'numeric', month:'long', year:'numeric' })
: 'Seleccionar fecha…');
const hasValue = dayOnly ? !!value : !!parsedFull;
// ¿está seleccionado este día?
const isSelected = (day) => {
if (dayOnly) return Number(value) === day;
return parsedFull && new Date(viewY, viewM, day).toDateString() === parsedFull.toDateString();
};
// ¿es hoy?
const isToday = (day) => {
if (dayOnly) return false;
return new Date(viewY, viewM, day).getTime() === today.getTime();
};
return (
{/* Label */}
{label}{required && *}
{/* Trigger */}
{/* Calendario inline */}
{open && (
{/* Navegación mes/año */}
{MONTHS_ES[viewM]} {viewY}
{dayOnly && (
Elige en qué día del mes vence
)}
{/* Días de semana */}
{DAYS_ES.map(d => (
{d}
))}
{/* Grilla de días */}
{Array.from({ length: firstDay }).map((_,i) =>
)}
{Array.from({ length: daysInMonth }, (_,i) => i+1).map(day => {
const sel = isSelected(day);
const today_ = isToday(day);
return (
);
})}
{/* Atajo "Hoy" — solo en modo fecha completa */}
{!dayOnly && (
)}
)}
{/* Header */}
Elegir ícono
{ICON_GROUPS.reduce((s,g)=>s+g.icons.length,0)} disponibles
{/* Buscador */}
setQ(e.target.value)}
style={{ flex:1, background:'none', border:'none', outline:'none', color:'var(--t1)', fontSize:14, fontFamily:'var(--font)' }} />
{q && (
)}
{/* Contenido scrolleable */}
{visibleGroups.length === 0 ? (
No encontramos íconos para "{q}". Probá con otra palabra.
) : (
visibleGroups.map(group => (
{group.name}
{group.icons.map(renderIconBtn)}
))
)}
);
};
/* ─────────────────────────────────────────────────────────────
MonthSwitcher — selector global de mes ("rumbo temporal")
Props:
value string YYYY-MM
onChange fn(YYYY-MM)
transactions array opcional para mostrar saldo neto del mes en el dropdown
monthsBack número de meses hacia atrás (default 12)
monthsForward número de meses hacia adelante (default 6)
compact bool — versión sin label expandido (solo flechas + chip)
───────────────────────────────────────────────────────────── */
const MonthSwitcher = ({ value, onChange, transactions = [], monthsBack = 12, monthsForward = 6, compact = false }) => {
const [open, setOpen] = useStPK(false);
// Auto-compact en mobile (< 600px) si no se forzó manualmente
const [isNarrow, setIsNarrow] = useStPK(() => typeof window !== 'undefined' && window.innerWidth < 600);
React.useEffect(() => {
const onResize = () => setIsNarrow(window.innerWidth < 600);
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, []);
const useCompact = compact || isNarrow;
const [refY, refM] = (value || `${new Date().getFullYear()}-${String(new Date().getMonth()+1).padStart(2,'0')}`).split('-').map(Number);
const todayKey = `${new Date().getFullYear()}-${String(new Date().getMonth()+1).padStart(2,'0')}`;
const months = [];
for (let i = monthsForward; i >= -monthsBack; i--) {
const d = new Date(refY, refM - 1 + i, 1);
months.push(`${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}`);
}
const shiftMonth = (delta) => {
const d = new Date(refY, refM - 1 + delta, 1);
onChange(`${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}`);
};
const summaryFor = (yyyymm) => {
const txs = transactions.filter(t => (t.date||'').startsWith(yyyymm));
if (!txs.length) return null;
const inc = txs.filter(t => t.type === 'income').reduce((s,t) => s+t.amount, 0);
const exp = txs.filter(t => t.type === 'expense').reduce((s,t) => s+t.amount, 0);
return { net: inc - exp, hasData: true };
};
// Capitaliza solo la primera letra (no cada palabra como text-transform:capitalize).
const cap = (s) => s ? s.charAt(0).toUpperCase() + s.slice(1) : s;
const labelFor = (yyyymm) => {
const [y, m] = yyyymm.split('-').map(Number);
return cap(new Date(y, m-1, 1).toLocaleDateString('es-AR', { month: 'long', year: 'numeric' }));
};
const shortLabelFor = (yyyymm) => {
const [y, m] = yyyymm.split('-').map(Number);
// Año en 4 dígitos para no confundir con "May 26" (parece día 26)
return cap(new Date(y, m-1, 1).toLocaleDateString('es-AR', { month: 'short', year: 'numeric' }));
};
return (
<>
{open && (
<>
setOpen(false)} style={{ zIndex:750 }} />
Navegar por mes
De dónde venís y a dónde vas
{months.map(m => {
const isSel = m === value;
const isToday = m === todayKey;
const isFuture = m > todayKey;
const sum = summaryFor(m);
return (
);
})}
)}
);
};
Object.assign(window, { DatePicker, IconPicker, ICON_GROUPS, MonthSwitcher });