-
${esc(loan.title)}
+
+
${esc(loan.title)}
+
+ ${esc(loan.borrower)} · ${t('budget.loanInstallmentMeta', {
paid: loan.paid_installments,
total: loan.installment_count,
@@ -554,7 +647,7 @@ function formatEntryDate(dateStr) {
// Modal
// --------------------------------------------------------
-function openBudgetModal({ mode, entry = null }) {
+function openBudgetModal({ mode, entry = null, initialType = '' }) {
const isEdit = mode === 'edit';
const today = new Date().toISOString().slice(0, 10);
const todayMonth = today.slice(0, 7);
@@ -671,7 +764,7 @@ function openBudgetModal({ mode, entry = null }) {
content,
size: 'sm',
onSave(panel) {
- let currentType = isExpense ? 'expense' : 'income';
+ let currentType = !isEdit && initialType === 'loan' ? 'loan' : (isExpense ? 'expense' : 'income');
const setType = (type) => {
currentType = type;
@@ -724,7 +817,11 @@ function openBudgetModal({ mode, entry = null }) {
};
const addCategory = async () => {
- const name = window.prompt(t('budget.newCategoryPrompt'));
+ const name = await requestNameInPanel(panel, {
+ title: t('budget.newCategoryTitle'),
+ label: t('budget.newCategoryPrompt'),
+ placeholder: t('budget.newCategoryPlaceholder'),
+ });
if (!name?.trim()) return;
try {
const res = await api.post('/budget/categories', { name: name.trim(), type: currentType });
@@ -740,7 +837,11 @@ function openBudgetModal({ mode, entry = null }) {
if (currentType !== 'expense') return;
const category = panel.querySelector('#bm-category').value;
if (!category) return;
- const name = window.prompt(t('budget.newSubcategoryPrompt'));
+ const name = await requestNameInPanel(panel, {
+ title: t('budget.newSubcategoryTitle'),
+ label: t('budget.newSubcategoryPrompt'),
+ placeholder: t('budget.newSubcategoryPlaceholder'),
+ });
if (!name?.trim()) return;
try {
const res = await api.post(`/budget/categories/${encodeURIComponent(category)}/subcategories`, { name: name.trim() });
@@ -812,8 +913,7 @@ function openBudgetModal({ mode, entry = null }) {
const idx = state.entries.findIndex((e) => e.id === entry.id);
if (idx !== -1) state.entries[idx] = res.data;
}
- const sumRes = await api.get(`/budget/summary?month=${state.month}`);
- state.summary = sumRes.data;
+ await loadMonth(state.month);
closeModal({ force: true });
renderBody();
@@ -829,6 +929,50 @@ function openBudgetModal({ mode, entry = null }) {
});
}
+function requestNameInPanel(panel, { title, label, placeholder }) {
+ return new Promise((resolve) => {
+ const overlay = document.createElement('div');
+ overlay.className = 'budget-inline-modal';
+ setHtml(overlay, `
+
+
+ `);
+ panel.append(overlay);
+ if (window.lucide) lucide.createIcons();
+
+ const input = overlay.querySelector('#budget-inline-name');
+ const cleanup = (value = '') => {
+ overlay.remove();
+ resolve(value);
+ };
+ overlay.querySelectorAll('[data-action="inline-cancel"]').forEach((btn) => {
+ btn.addEventListener('click', () => cleanup(''));
+ });
+ overlay.querySelector('[data-action="inline-save"]').addEventListener('click', () => {
+ cleanup(input.value.trim());
+ });
+ input.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter') cleanup(input.value.trim());
+ if (e.key === 'Escape') cleanup('');
+ });
+ input.focus();
+ });
+}
+
async function saveLoanFromPanel(panel, saveBtn, { loan = null, closeAfterSave = false } = {}) {
const isEdit = Boolean(loan);
const borrower = panel.querySelector('#lm-borrower').value.trim();
@@ -976,8 +1120,7 @@ async function deleteEntry(id) {
if (undone) return;
try {
await api.delete(`/budget/${id}`);
- const sumRes = await api.get(`/budget/summary?month=${state.month}`);
- state.summary = sumRes.data;
+ await loadMonth(state.month);
renderBody();
} catch (err) {
if (entry) {
diff --git a/public/styles/budget.css b/public/styles/budget.css
index 8b65616..bcf9582 100644
--- a/public/styles/budget.css
+++ b/public/styles/budget.css
@@ -25,6 +25,21 @@
.budget-page { height: 100dvh; }
}
+@media (max-width: 640px) {
+ .budget-nav {
+ flex-wrap: wrap;
+ }
+
+ .budget-nav__label {
+ order: 3;
+ flex-basis: 100%;
+ }
+
+ .budget-tabs {
+ margin-left: auto;
+ }
+}
+
/* --------------------------------------------------------
* Monat-Navigation
* -------------------------------------------------------- */
@@ -58,6 +73,49 @@
white-space: nowrap;
}
+.budget-tabs {
+ display: flex;
+ align-items: center;
+ gap: var(--space-1);
+ padding: 2px;
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-sm);
+ background: var(--color-surface-2);
+}
+
+.budget-tab {
+ min-height: 34px;
+ padding: 0 var(--space-3);
+ border: 0;
+ border-radius: var(--radius-xs);
+ background: transparent;
+ color: var(--color-text-secondary);
+ cursor: pointer;
+ font-size: var(--text-sm);
+ font-weight: var(--font-weight-medium);
+}
+
+.budget-tab--active {
+ background: var(--module-accent);
+ color: var(--color-text-on-accent);
+}
+
+.budget-tab-panel {
+ flex: 1;
+ min-height: 0;
+}
+
+.budget-tab-panel--budget {
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+}
+
+.budget-tab-panel--loans {
+ overflow-y: auto;
+ padding-top: var(--space-3);
+}
+
/* --------------------------------------------------------
* Zusammenfassungs-Karten
* -------------------------------------------------------- */
@@ -252,8 +310,9 @@
grid-template-columns: 1fr;
gap: var(--space-2);
margin-top: var(--space-3);
- max-height: 260px;
+ max-height: min(58dvh, 640px);
overflow-y: auto;
+ padding-right: var(--space-1);
}
.budget-loans__empty {
@@ -283,6 +342,37 @@
white-space: nowrap;
}
+.budget-loan-card__title-row {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+ min-width: 0;
+}
+
+.budget-loan-card__filter {
+ width: 30px;
+ height: 30px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-sm);
+ background: var(--color-surface-2);
+ color: var(--color-text-secondary);
+ cursor: pointer;
+}
+
+.budget-loan-card__filter:hover {
+ color: var(--module-accent);
+ border-color: var(--module-accent);
+}
+
+.budget-loan-card__filter i {
+ width: 15px;
+ height: 15px;
+}
+
.budget-loan-card__amounts {
text-align: right;
}
@@ -356,6 +446,7 @@
flex-direction: column;
overflow: hidden;
border-top: 1px solid var(--color-border);
+ min-height: 0;
}
.budget-list-header {
@@ -367,6 +458,20 @@
border-top: 3px solid var(--module-accent);
}
+.budget-list-header__actions {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+ flex-wrap: wrap;
+ justify-content: flex-end;
+}
+
+.budget-list-header__filter {
+ color: var(--color-text-secondary);
+ font-size: var(--text-xs);
+ margin-top: 2px;
+}
+
.budget-list-header__title {
font-size: var(--text-sm);
font-weight: var(--font-weight-semibold);
@@ -377,10 +482,39 @@
.budget-list {
flex: 1;
+ min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
+.budget-list,
+.budget-loans__list,
+.budget-tab-panel--loans {
+ scrollbar-width: thin;
+ scrollbar-color: var(--module-accent) transparent;
+}
+
+.budget-list::-webkit-scrollbar,
+.budget-loans__list::-webkit-scrollbar,
+.budget-tab-panel--loans::-webkit-scrollbar {
+ width: 10px;
+}
+
+.budget-list::-webkit-scrollbar-track,
+.budget-loans__list::-webkit-scrollbar-track,
+.budget-tab-panel--loans::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.budget-list::-webkit-scrollbar-thumb,
+.budget-loans__list::-webkit-scrollbar-thumb,
+.budget-tab-panel--loans::-webkit-scrollbar-thumb {
+ background: color-mix(in srgb, var(--module-accent) 55%, transparent);
+ border: 3px solid transparent;
+ border-radius: var(--radius-full);
+ background-clip: padding-box;
+}
+
.budget-entry {
display: flex;
align-items: center;
@@ -528,3 +662,39 @@
padding: 2px var(--space-2);
font-size: var(--text-xs);
}
+
+.budget-inline-modal {
+ position: fixed;
+ inset: 0;
+ z-index: 2;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: var(--space-4);
+ background: rgba(0, 0, 0, 0.38);
+}
+
+.budget-inline-modal__panel {
+ width: min(100%, 380px);
+ padding: var(--space-4);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-md);
+ background: var(--color-surface);
+ box-shadow: var(--shadow-lg);
+}
+
+.budget-inline-modal__header,
+.budget-inline-modal__footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--space-3);
+}
+
+.budget-inline-modal__header {
+ margin-bottom: var(--space-3);
+}
+
+.budget-inline-modal__footer {
+ justify-content: flex-end;
+}
diff --git a/server/routes/budget.js b/server/routes/budget.js
index 00e123c..f914e09 100644
--- a/server/routes/budget.js
+++ b/server/routes/budget.js
@@ -287,6 +287,22 @@ function refreshLoanStatus(loanId) {
return loan;
}
+function entryWithLoanMeta(id) {
+ return db.get().prepare(`
+ SELECT b.*, u.display_name AS creator_name,
+ p.id AS loan_payment_id,
+ p.loan_id AS loan_id,
+ p.installment_number AS loan_installment_number,
+ l.title AS loan_title,
+ l.borrower AS loan_borrower
+ FROM budget_entries b
+ LEFT JOIN users u ON u.id = b.created_by
+ LEFT JOIN budget_loan_payments p ON p.budget_entry_id = b.id
+ LEFT JOIN budget_loans l ON l.id = p.loan_id
+ WHERE b.id = ?
+ `).get(id);
+}
+
// --------------------------------------------------------
// Statische Routen vor /:id
// --------------------------------------------------------
@@ -761,21 +777,36 @@ router.get('/', (req, res) => {
try {
const today = new Date().toISOString().slice(0, 7);
const month = req.query.month || today;
+ const loanId = req.query.loan_id ? parseInt(req.query.loan_id, 10) : null;
- if (!MONTH_RE.test(month))
+ if (!loanId && !MONTH_RE.test(month))
return res.status(400).json({ error: 'month muss YYYY-MM sein', code: 400 });
- generateRecurringInstances(db.get(), month);
+ if (!loanId) generateRecurringInstances(db.get(), month);
const from = `${month}-01`;
const to = `${month}-31`;
let sql = `
- SELECT b.*, u.display_name AS creator_name
+ SELECT b.*, u.display_name AS creator_name,
+ p.id AS loan_payment_id,
+ p.loan_id AS loan_id,
+ p.installment_number AS loan_installment_number,
+ l.title AS loan_title,
+ l.borrower AS loan_borrower
FROM budget_entries b
LEFT JOIN users u ON u.id = b.created_by
- WHERE b.date BETWEEN ? AND ?
+ LEFT JOIN budget_loan_payments p ON p.budget_entry_id = b.id
+ LEFT JOIN budget_loans l ON l.id = p.loan_id
`;
- const params = [from, to];
+ const params = [];
+
+ if (loanId) {
+ sql += ' WHERE p.loan_id = ?';
+ params.push(loanId);
+ } else {
+ sql += ' WHERE b.date BETWEEN ? AND ?';
+ params.push(from, to);
+ }
if (req.query.category && validCategoryKeys().includes(req.query.category)) {
sql += ' AND b.category = ?';
@@ -822,11 +853,7 @@ router.post('/', (req, res) => {
req.session.userId
);
- const entry = db.get().prepare(`
- SELECT b.*, u.display_name AS creator_name
- FROM budget_entries b LEFT JOIN users u ON u.id = b.created_by
- WHERE b.id = ?
- `).get(result.lastInsertRowid);
+ const entry = entryWithLoanMeta(result.lastInsertRowid);
res.status(201).json({ data: entry });
} catch (err) {
@@ -856,6 +883,12 @@ router.put('/:id', (req, res) => {
const errors = collectErrors(checks);
if (errors.length) return res.status(400).json({ error: errors.join(' '), code: 400 });
const { title, amount, category, subcategory: requestedSubcategory, date, is_recurring, recurrence_rule } = req.body;
+ const linkedPayment = db.get().prepare(`
+ SELECT * FROM budget_loan_payments WHERE budget_entry_id = ?
+ `).get(id);
+ if (linkedPayment && amount !== undefined && Number(amount) <= 0) {
+ return res.status(400).json({ error: 'Loan repayment entries must remain income.', code: 400 });
+ }
const nextCategory = category ?? entry.category;
const subcategory = requestedSubcategory !== undefined || category !== undefined
? validateSubcategory(nextCategory, requestedSubcategory ?? entry.subcategory)
@@ -864,31 +897,45 @@ router.put('/:id', (req, res) => {
return res.status(400).json({ error: 'Invalid subcategory.', code: 400 });
}
- db.get().prepare(`
- UPDATE budget_entries
- SET title = COALESCE(?, title),
- amount = COALESCE(?, amount),
- category = COALESCE(?, category),
- subcategory = COALESCE(?, subcategory),
- date = COALESCE(?, date),
- is_recurring = COALESCE(?, is_recurring),
- recurrence_rule = ?
- WHERE id = ?
- `).run(
- title?.trim() ?? null,
- amount !== undefined ? Number(amount) : null,
- category ?? null,
- subcategory !== undefined ? subcategory : null,
- date ?? null,
- is_recurring !== undefined ? (is_recurring ? 1 : 0) : null,
- recurrence_rule !== undefined ? (recurrence_rule || null) : entry.recurrence_rule,
- id
- );
+ const tx = db.get().transaction(() => {
+ db.get().prepare(`
+ UPDATE budget_entries
+ SET title = COALESCE(?, title),
+ amount = COALESCE(?, amount),
+ category = COALESCE(?, category),
+ subcategory = COALESCE(?, subcategory),
+ date = COALESCE(?, date),
+ is_recurring = COALESCE(?, is_recurring),
+ recurrence_rule = ?
+ WHERE id = ?
+ `).run(
+ title?.trim() ?? null,
+ amount !== undefined ? Number(amount) : null,
+ category ?? null,
+ subcategory !== undefined ? subcategory : null,
+ date ?? null,
+ is_recurring !== undefined ? (is_recurring ? 1 : 0) : null,
+ recurrence_rule !== undefined ? (recurrence_rule || null) : entry.recurrence_rule,
+ id
+ );
- const updated = db.get().prepare(`
- SELECT b.*, u.display_name AS creator_name
- FROM budget_entries b LEFT JOIN users u ON u.id = b.created_by WHERE b.id = ?
- `).get(id);
+ if (linkedPayment) {
+ db.get().prepare(`
+ UPDATE budget_loan_payments
+ SET amount = COALESCE(?, amount),
+ paid_date = COALESCE(?, paid_date)
+ WHERE id = ?
+ `).run(
+ amount !== undefined ? cents(amount) : null,
+ date ?? null,
+ linkedPayment.id
+ );
+ refreshLoanStatus(linkedPayment.loan_id);
+ }
+ });
+ tx();
+
+ const updated = entryWithLoanMeta(id);
res.json({ data: updated });
} catch (err) {
@@ -908,7 +955,18 @@ router.delete('/:id', (req, res) => {
const entry = db.get().prepare('SELECT * FROM budget_entries WHERE id = ?').get(id);
if (!entry) return res.status(404).json({ error: 'Entry not found', code: 404 });
- db.get().prepare('DELETE FROM budget_entries WHERE id = ?').run(id);
+ const linkedPayment = db.get().prepare(`
+ SELECT * FROM budget_loan_payments WHERE budget_entry_id = ?
+ `).get(id);
+
+ const tx = db.get().transaction(() => {
+ if (linkedPayment) {
+ db.get().prepare('DELETE FROM budget_loan_payments WHERE id = ?').run(linkedPayment.id);
+ }
+ db.get().prepare('DELETE FROM budget_entries WHERE id = ?').run(id);
+ if (linkedPayment) refreshLoanStatus(linkedPayment.loan_id);
+ });
+ tx();
// Wenn eine Instanz gelöscht wird: Monat als übersprungen markieren
if (entry.recurrence_parent_id) {
+ ${esc(title)}
+
+
+
+
+
+
+
+
+
+
+