setQ(e.target.value)}
placeholder="Buscar…"
style={{
flex: 1, minWidth: 180,
padding: "10px 14px", fontSize: 13,
background: "var(--bx-paper)", border: "1px solid var(--bx-line)",
borderRadius: 8, outline: "none", color: "var(--bx-ink-1)",
}} />
{groups.length === 0 ? (
Sin movimientos con esos filtros.
) : groups.map(([day, items], gi, arr) => (
{day}
{window.fmtMXN(items.reduce((s, t) => s + t.amount, 0), { sign: true })}
{items.map((t, i) => (
))}
))}
);
}
// ──────────────────────────────────────────────────────────────
// BudgetsView — list with edit limit inline
// ──────────────────────────────────────────────────────────────
function BudgetsView({ budgets, setBudgets, txs }) {
const [editCat, setEditCat] = rtState(null);
const [draft, setDraft] = rtState("");
// Recompute spent from current month txs
const monthCutoff = window.monthStart();
const enriched = rtMemo(() => budgets.map(b => {
const spent = txs
.filter(t => t.cat === b.cat && t.amount < 0 && new Date(t.date) >= monthCutoff)
.reduce((s, t) => s + Math.abs(t.amount), 0);
return { ...b, spent };
}), [budgets, txs]);
const startEdit = (b) => { setEditCat(b.cat); setDraft(String(b.limit)); };
const saveEdit = () => {
const n = parseFloat(draft);
if (!Number.isFinite(n) || n <= 0) { setEditCat(null); return; }
setBudgets(prev => prev.map(b => b.cat === editCat ? { ...b, limit: n } : b));
setEditCat(null);
};
// Categories without a budget yet
const used = new Set(budgets.map(b => b.cat));
const available = window.FINANZAS_CATEGORIES.filter(c => !used.has(c.id) && c.id !== "ingreso");
const addBudget = (cat) => {
setBudgets(prev => [...prev, { cat, limit: 1000, spent: 0 }]);
};
const removeBudget = (cat) => {
if (!confirm("¿Eliminar este presupuesto?")) return;
setBudgets(prev => prev.filter(b => b.cat !== cat));
};
return (
{enriched.map(b => {
const cat = window.catBy(b.cat);
const pct = Math.min(1, b.spent / b.limit);
const over = pct >= 0.9;
const isEditing = editCat === b.cat;
return (
{cat.label}
{window.fmtMXN(b.spent)} de {window.fmtMXN(b.limit)}
{isEditing ? (
setDraft(e.target.value)}
autoFocus type="number" step="100"
onKeyDown={(e) => e.key === "Enter" && saveEdit()}
style={{
width: 100, padding: "6px 10px", fontSize: 13,
border: "1px solid var(--bx-navy-700)", borderRadius: 6,
outline: "none", fontFamily: "'JetBrains Mono', monospace",
}} />
) : (
)}
);
})}
{available.length > 0 && (
Añadir presupuesto
{available.map(c => (
))}
)}
);
}
// ──────────────────────────────────────────────────────────────
// AccountsView — list + create
// ──────────────────────────────────────────────────────────────
function AccountsView({ accs, setAccs, txs }) {
const [adding, setAdding] = rtState(false);
const [draft, setDraft] = rtState({ name: "", type: "Débito", balance: "", color: "#1a2a5e", last4: "" });
const addAcc = () => {
if (!draft.name.trim()) return;
const id = draft.name.toLowerCase().replace(/[^a-z0-9]+/g, "").slice(0, 12) + Date.now().toString(36).slice(-4);
setAccs(prev => [...prev, {
id, name: draft.name.trim(), type: draft.type,
balance: parseFloat(draft.balance) || 0,
color: draft.color, last4: draft.last4 || null,
}]);
setDraft({ name: "", type: "Débito", balance: "", color: "#1a2a5e", last4: "" });
setAdding(false);
};
const removeAcc = (id) => {
if (!confirm("¿Eliminar cuenta? Las transacciones asociadas se mantendrán.")) return;
setAccs(prev => prev.filter(a => a.id !== id));
};
return (