${t('budget.title')}
${t('budget.loadingIndicator')}
`;
if (window.lucide) lucide.createIcons();
await loadMonth(state.month);
renderBody();
wireNav();
}
// --------------------------------------------------------
// Navigation
// --------------------------------------------------------
function wireNav() {
_container.querySelector('#budget-prev').addEventListener('click', async () => {
await loadMonth(addMonths(state.month, -1));
renderBody();
updateLabel();
});
_container.querySelector('#budget-next').addEventListener('click', async () => {
await loadMonth(addMonths(state.month, 1));
renderBody();
updateLabel();
});
_container.querySelector('#budget-today').addEventListener('click', async () => {
const today = new Date();
const m = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}`;
if (m === state.month) return;
await loadMonth(m);
renderBody();
updateLabel();
});
const addHandler = () => openBudgetModal({ mode: 'create' });
_container.querySelector('#budget-add').addEventListener('click', addHandler);
_container.querySelector('#fab-new-budget').addEventListener('click', addHandler);
updateLabel();
}
function updateLabel() {
const lbl = _container.querySelector('#budget-label');
if (lbl) lbl.textContent = formatMonthLabel(state.month);
}
// --------------------------------------------------------
// Body
// --------------------------------------------------------
function renderBody() {
const body = _container.querySelector('#budget-body');
if (!body) return;
updateLabel();
const s = state.summary;
const p = state.prevSummary;
const balanceClass = s.balance >= 0 ? 'budget-summary-card--balance-positive' : 'budget-summary-card--balance-negative';
const prevLabel = p ? formatMonthLabel(p.month).split(' ')[0].slice(0, 3) : '';
body.innerHTML = `
${t('budget.income')}
${formatAmount(s.income)}
${p ? renderTrend(s.income, p.income, prevLabel) : ''}
${t('budget.expenses')}
${formatAmount(Math.abs(s.expenses))}
${p ? renderTrend(s.expenses, p.expenses, prevLabel) : ''}
${t('budget.balance')}
${formatAmount(s.balance)}
${p ? renderTrend(s.balance, p.balance, prevLabel) : ''}
${s.byCategory.length ? `
${esc(e.title)}
${date} · ${esc(CATEGORY_LABELS()[e.category] ?? e.category)}${recurTag}
${sign}${formatAmount(e.amount)}
`;
}).join('');
}
/**
* Rendert eine Trend-Zeile im Vergleich zum Vormonat.
* Alle drei Metriken (income, expenses, balance) nutzen dieselbe Logik:
* delta > 0 → positiver Trend (▲ grün), delta < 0 → negativer Trend (▼ rot).
* Ausgaben werden als negative Zahlen übergeben, daher gilt:
* weniger Ausgaben ↔ delta > 0 ↔ gut.
* @param {number} current Aktueller Wert
* @param {number} prev Vormonatswert
* @param {string} prevLabel Kurzname des Vormonats (z.B. "Mär")
*/
function renderTrend(current, prev, prevLabel) {
const delta = current - prev;
if (Math.abs(delta) < 0.005) {
return `${arrow} ${sign}${formatAmount(delta)} vs. ${prevLabel}
`;
}
function formatEntryDate(dateStr) {
return formatDate(new Date(dateStr + 'T00:00:00'));
}
// --------------------------------------------------------
// Modal
// --------------------------------------------------------
function openBudgetModal({ mode, entry = null }) {
const isEdit = mode === 'edit';
const today = new Date().toISOString().slice(0, 10);
const isExpense = isEdit ? entry.amount < 0 : true;
const absAmount = isEdit ? Math.abs(entry.amount).toFixed(2) : '';
const catLabels = CATEGORY_LABELS();
const initialCats = isExpense ? EXPENSE_CATEGORIES : INCOME_CATEGORIES;
const catOpts = initialCats.map((c) =>
`