feat: Phase 2 – Budget-Engine + Direktzugriff (http://IP:Port)
Budget: - Modelle + Migration 0003: budget_template_lines, planned_income_lines, budget_periods, budget_period_lines. - services/budget: Perioden-Grenzen (einstellbarer Starttag, Label nach Endmonat), Standard-Vorlage vs. Monats-Override (Snapshot-on-Customize), Soll/Ist inkl. budgetierter Sparen-Transfers, geplante Einnahmen (Soll/Ist). - routers/budgets: Vorlage, geplante Einnahmen (CRUD), Monats-Soll/Ist, Monats-Override, Zurücksetzen. pytest: Perioden, Soll/Ist, Override/Reset, Einnahmen. - Frontend: Budget-Seite (Monat + Standard-Budget), Fortschrittsbalken grün/rot, Monats-Navigation, editierbare Soll-Beträge; Sparen-Option im Transfer-Formular. Deployment-Fix (Nutzer-Anforderung: http://IP:Port muss funktionieren): - Dienst bindet an APP_BIND_HOST=0.0.0.0 (direkt im LAN erreichbar). - APP_COOKIE_SECURE=false als Standard (sonst kein Login über reines HTTP); für reinen HTTPS-Betrieb umstellbar. Doku + install.sh entsprechend angepasst. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Guido
Claude Opus 4.8
@@ -0,0 +1,299 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { api } from "../api";
|
||||
import { useSettings } from "../settings";
|
||||
import { useConfirm } from "../confirm";
|
||||
import { useToast } from "../toast";
|
||||
import Icon from "../components/Icon";
|
||||
import IconChip from "../components/IconChip";
|
||||
import Modal from "../components/Modal";
|
||||
import EditableAmount from "../components/EditableAmount";
|
||||
import { formatMoney, formatMonthLabel } from "../format";
|
||||
|
||||
function ProgressBar({ actual, planned }) {
|
||||
const pct = planned > 0 ? Math.min(actual / planned, 1) * 100 : actual > 0 ? 100 : 0;
|
||||
const over = actual > planned;
|
||||
return (
|
||||
<div className="budget-bar">
|
||||
<div className={`budget-bar-fill${over ? " over" : ""}`} style={{ width: `${pct}%` }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Budget() {
|
||||
const { t } = useTranslation();
|
||||
const { locale } = useSettings();
|
||||
const confirm = useConfirm();
|
||||
const toast = useToast();
|
||||
|
||||
const [mode, setMode] = useState("month"); // "month" | "template"
|
||||
const [view, setView] = useState(null);
|
||||
const [label, setLabel] = useState(null);
|
||||
const [groups, setGroups] = useState([]);
|
||||
const [accounts, setAccounts] = useState([]);
|
||||
const [template, setTemplate] = useState({ lines: [], income: [] });
|
||||
const [incomeModal, setIncomeModal] = useState(null);
|
||||
|
||||
const base = view?.base_currency || "EUR";
|
||||
const fmt = (c) => formatMoney(c, base);
|
||||
|
||||
async function loadView(lbl) {
|
||||
try {
|
||||
const v = lbl ? await api.budget(lbl) : await api.budgetCurrent();
|
||||
setView(v);
|
||||
setLabel(v.label);
|
||||
} catch (err) { toast(err.message, "error"); }
|
||||
}
|
||||
async function loadTemplate() {
|
||||
try { setTemplate(await api.budgetTemplate()); } catch (err) { toast(err.message, "error"); }
|
||||
}
|
||||
async function loadStamm() {
|
||||
try {
|
||||
const [g, a] = await Promise.all([api.listCategories(), api.listAccounts()]);
|
||||
setGroups(g); setAccounts(a);
|
||||
} catch (err) { toast(err.message, "error"); }
|
||||
}
|
||||
|
||||
useEffect(() => { loadStamm(); loadView(); }, []);
|
||||
useEffect(() => { if (mode === "template") loadTemplate(); }, [mode]);
|
||||
|
||||
const tplMap = useMemo(
|
||||
() => Object.fromEntries(template.lines.map((l) => [l.category_id, l.planned_cents])),
|
||||
[template]
|
||||
);
|
||||
const expenseGroups = useMemo(() => groups.filter((g) => g.kind === "expense"), [groups]);
|
||||
const incomeCategories = useMemo(
|
||||
() => groups.filter((g) => g.kind === "income").flatMap((g) => g.categories),
|
||||
[groups]
|
||||
);
|
||||
|
||||
async function saveMonth(catId, cents) {
|
||||
try { setView(await api.setMonthCategory(label, catId, cents)); } catch (err) { toast(err.message, "error"); }
|
||||
}
|
||||
async function saveTemplate(catId, cents) {
|
||||
try { await api.setTemplateCategory(catId, cents); loadTemplate(); } catch (err) { toast(err.message, "error"); }
|
||||
}
|
||||
async function resetMonth() {
|
||||
if (!(await confirm({ title: t("budget.resetTitle"), message: t("budget.resetConfirm"), confirmLabel: t("budget.reset") }))) return;
|
||||
try { setView(await api.resetMonth(label)); toast(t("settings.saved")); } catch (err) { toast(err.message, "error"); }
|
||||
}
|
||||
|
||||
async function saveIncome(e) {
|
||||
e.preventDefault();
|
||||
const f = incomeModal;
|
||||
const body = {
|
||||
label: f.label.trim(),
|
||||
category_id: f.category_id ? Number(f.category_id) : null,
|
||||
target_account_id: f.target_account_id ? Number(f.target_account_id) : null,
|
||||
planned_cents: f.planned_cents,
|
||||
};
|
||||
try {
|
||||
if (f.id) await api.updateIncome(f.id, body);
|
||||
else await api.createIncome(body);
|
||||
setIncomeModal(null);
|
||||
loadTemplate();
|
||||
loadView(label);
|
||||
} catch (err) { toast(err.message, "error"); }
|
||||
}
|
||||
async function deleteIncome(id) {
|
||||
if (!(await confirm({ title: t("common.delete"), message: t("budget.deleteIncomeConfirm"), danger: true, confirmLabel: t("common.delete") }))) return;
|
||||
try { await api.deleteIncome(id); loadTemplate(); loadView(label); } catch (err) { toast(err.message, "error"); }
|
||||
}
|
||||
|
||||
if (!view) return <div className="muted">{t("common.loading")}</div>;
|
||||
|
||||
const tot = view.totals;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="page-head">
|
||||
<h1>{t("budget.title")}</h1>
|
||||
<div className="seg" style={{ width: 260, marginBottom: 0 }}>
|
||||
<button type="button" className={`seg-btn${mode === "month" ? " active" : ""}`} onClick={() => setMode("month")}>
|
||||
{t("budget.monthMode")}
|
||||
</button>
|
||||
<button type="button" className={`seg-btn${mode === "template" ? " active" : ""}`} onClick={() => setMode("template")}>
|
||||
{t("budget.templateMode")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{mode === "month" ? (
|
||||
<>
|
||||
<div className="card budget-navbar">
|
||||
<button className="btn ghost" onClick={() => loadView(view.prev)}>
|
||||
<Icon name="chevron-right" size={16} className="flip" />
|
||||
</button>
|
||||
<strong className="budget-month">{formatMonthLabel(view.label, locale)}</strong>
|
||||
<button className="btn ghost" onClick={() => loadView(view.next)}>
|
||||
<Icon name="chevron-right" size={16} />
|
||||
</button>
|
||||
<div className="grow" />
|
||||
{view.customized && (
|
||||
<button className="btn sm" onClick={resetMonth}>
|
||||
<Icon name="refresh-ccw" size={14} /> {t("budget.reset")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{view.income.length > 0 && (
|
||||
<div className="card">
|
||||
<h2>{t("budget.income")}</h2>
|
||||
<table className="table">
|
||||
<tbody>
|
||||
{view.income.map((i) => (
|
||||
<tr key={i.id}>
|
||||
<td>{i.label}</td>
|
||||
<td style={{ textAlign: "right" }} className="muted">{t("budget.planned")}: {fmt(i.planned_cents)}</td>
|
||||
<td style={{ textAlign: "right" }}>
|
||||
<span className={`amount ${i.received_cents >= i.planned_cents ? "pos" : "neg"}`}>{fmt(i.received_cents)}</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
<tr className="budget-total-row">
|
||||
<td><strong>{t("budget.totalIncome")}</strong></td>
|
||||
<td style={{ textAlign: "right" }} className="muted">{fmt(tot.planned_income)}</td>
|
||||
<td style={{ textAlign: "right" }}><strong>{fmt(tot.received_income)}</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="card">
|
||||
<h2>{t("budget.expenses")}</h2>
|
||||
{view.groups.map((g) => (
|
||||
<div className="budget-group" key={g.id}>
|
||||
<div className="budget-group-head">
|
||||
<IconChip name={g.icon} color={g.color} size={26} />
|
||||
<span className="grow"><strong>{g.name}</strong></span>
|
||||
<span className={`amount ${g.over ? "neg" : "muted"}`}>{fmt(g.actual_cents)}</span>
|
||||
<span className="muted"> / {fmt(g.planned_cents)}</span>
|
||||
</div>
|
||||
{g.categories.map((c) => (
|
||||
<div className="budget-cat" key={c.category_id}>
|
||||
<div className="budget-cat-name">
|
||||
<IconChip name={c.icon} color={c.color} size={24} />
|
||||
<span>{c.name}</span>
|
||||
</div>
|
||||
<div className="budget-cat-bar">
|
||||
<ProgressBar actual={c.actual_cents} planned={c.planned_cents} />
|
||||
</div>
|
||||
<span className={`amount budget-actual ${c.over ? "neg" : "muted"}`}>{fmt(c.actual_cents)}</span>
|
||||
<span className="muted budget-slash">/</span>
|
||||
<EditableAmount cents={c.planned_cents} onSave={(cents) => saveMonth(c.category_id, cents)} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
<div className="budget-total-row card-total">
|
||||
<span className="grow"><strong>{t("budget.totalExpense")}</strong></span>
|
||||
<span className={`amount ${tot.actual_expense > tot.planned_expense ? "neg" : ""}`}>{fmt(tot.actual_expense)}</span>
|
||||
<span className="muted"> / {fmt(tot.planned_expense)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="card">
|
||||
<p className="muted small">{t("budget.templateHint")}</p>
|
||||
<h2>{t("budget.expenses")}</h2>
|
||||
{expenseGroups.map((g) => (
|
||||
<div className="budget-group" key={g.id}>
|
||||
<div className="budget-group-head">
|
||||
<IconChip name={g.icon} color={g.color} size={26} />
|
||||
<strong>{g.name}</strong>
|
||||
</div>
|
||||
{g.categories.map((c) => (
|
||||
<div className="budget-cat" key={c.id}>
|
||||
<div className="budget-cat-name grow">
|
||||
<IconChip name={c.icon} color={c.color} size={24} />
|
||||
<span>{c.name}</span>
|
||||
</div>
|
||||
<EditableAmount cents={tplMap[c.id] || 0} onSave={(cents) => saveTemplate(c.id, cents)} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<div className="page-head" style={{ marginBottom: "var(--sp-3)" }}>
|
||||
<h2 style={{ margin: 0 }}>{t("budget.income")}</h2>
|
||||
<button className="btn sm primary" onClick={() => setIncomeModal({ label: "", category_id: "", target_account_id: "", planned_cents: 0 })}>
|
||||
<Icon name="plus" size={15} /> {t("budget.addIncome")}
|
||||
</button>
|
||||
</div>
|
||||
{template.income.length === 0 ? (
|
||||
<div className="muted small">{t("budget.noIncome")}</div>
|
||||
) : (
|
||||
<table className="table">
|
||||
<tbody>
|
||||
{template.income.map((i) => (
|
||||
<tr key={i.id}>
|
||||
<td><strong>{i.label}</strong></td>
|
||||
<td style={{ textAlign: "right" }}>{formatMoney(i.planned_cents, base)}</td>
|
||||
<td className="nowrap" style={{ textAlign: "right", width: 80 }}>
|
||||
<button className="btn sm ghost" onClick={() => setIncomeModal({ ...i, category_id: i.category_id || "", target_account_id: i.target_account_id || "" })}>
|
||||
<Icon name="edit" size={14} />
|
||||
</button>
|
||||
<button className="btn sm danger" onClick={() => deleteIncome(i.id)}>
|
||||
<Icon name="trash" size={14} />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{incomeModal && (
|
||||
<Modal
|
||||
title={incomeModal.id ? t("budget.editIncome") : t("budget.addIncome")}
|
||||
onClose={() => setIncomeModal(null)}
|
||||
footer={
|
||||
<>
|
||||
<button className="btn" onClick={() => setIncomeModal(null)}>{t("common.cancel")}</button>
|
||||
<button className="btn primary" form="income-form" type="submit">{t("common.save")}</button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<form id="income-form" onSubmit={saveIncome}>
|
||||
<label>
|
||||
<span>{t("budget.incomeLabel")}</span>
|
||||
{/* eslint-disable-next-line jsx-a11y/no-autofocus */}
|
||||
<input autoFocus value={incomeModal.label} onChange={(e) => setIncomeModal({ ...incomeModal, label: e.target.value })} required />
|
||||
</label>
|
||||
<div className="row">
|
||||
<label className="grow">
|
||||
<span>{t("budget.incomeCategory")}</span>
|
||||
<select value={incomeModal.category_id} onChange={(e) => setIncomeModal({ ...incomeModal, category_id: e.target.value })}>
|
||||
<option value="">—</option>
|
||||
{incomeCategories.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
<label className="grow">
|
||||
<span>{t("budget.targetAccount")}</span>
|
||||
<select value={incomeModal.target_account_id} onChange={(e) => setIncomeModal({ ...incomeModal, target_account_id: e.target.value })}>
|
||||
<option value="">—</option>
|
||||
{accounts.map((a) => <option key={a.id} value={a.id}>{a.name}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<label>
|
||||
<span>{t("budget.planned")} ({base})</span>
|
||||
<input inputMode="decimal" defaultValue={(incomeModal.planned_cents / 100).toFixed(2).replace(".", ",")}
|
||||
onChange={(e) => {
|
||||
const cleaned = e.target.value.replace(",", ".");
|
||||
setIncomeModal((m) => ({ ...m, planned_cents: Math.round((Number.parseFloat(cleaned) || 0) * 100) }));
|
||||
}} />
|
||||
</label>
|
||||
</form>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -12,6 +12,8 @@ import { centsToInput, parseAmountToCents, todayIso } from "../format";
|
||||
|
||||
const TYPES = ["expense", "income", "transfer"];
|
||||
|
||||
const SAVINGS_TYPES = ["sparkonto", "depot"];
|
||||
|
||||
function emptyForm() {
|
||||
return {
|
||||
type: "expense",
|
||||
@@ -23,6 +25,8 @@ function emptyForm() {
|
||||
to_amount: "",
|
||||
payee: "",
|
||||
description: "",
|
||||
budget_as_expense: true,
|
||||
budget_category_id: "",
|
||||
};
|
||||
}
|
||||
|
||||
@@ -69,6 +73,22 @@ export default function Transactions() {
|
||||
const fromAcc = form && accountById[Number(form.account_id)];
|
||||
const toAcc = form && accountById[Number(form.to_account_id)];
|
||||
const crossCurrency = form?.type === "transfer" && fromAcc && toAcc && fromAcc.currency !== toAcc.currency;
|
||||
const savingsDest = form?.type === "transfer" && toAcc && SAVINGS_TYPES.includes(toAcc.type);
|
||||
|
||||
// Standard-Kategorie für budgetierte Sparen-Transfers (falls vorhanden).
|
||||
const expenseGroups = useMemo(() => groups.filter((g) => g.kind === "expense"), [groups]);
|
||||
const sparenCatId = useMemo(() => {
|
||||
for (const g of expenseGroups)
|
||||
for (const c of g.categories) if (c.name === "Sparen & Investments") return String(c.id);
|
||||
return expenseGroups[0]?.categories?.[0] ? String(expenseGroups[0].categories[0].id) : "";
|
||||
}, [expenseGroups]);
|
||||
|
||||
// Bei Spar-/Depot-Ziel eine Budget-Kategorie vorbelegen.
|
||||
useEffect(() => {
|
||||
if (savingsDest && form && !form.budget_category_id) {
|
||||
setForm((f) => (f && !f.budget_category_id ? { ...f, budget_category_id: sparenCatId } : f));
|
||||
}
|
||||
}, [savingsDest, sparenCatId]);
|
||||
|
||||
// Bei währungsübergreifenden Transfers den Zielbetrag per EZB-Kurs vorschlagen.
|
||||
useEffect(() => {
|
||||
@@ -102,6 +122,8 @@ export default function Transactions() {
|
||||
to_amount: tx.to_amount_cents ? centsToInput(tx.to_amount_cents) : "",
|
||||
payee: tx.payee || "",
|
||||
description: tx.description || "",
|
||||
budget_as_expense: tx.budget_treatment !== "neutral",
|
||||
budget_category_id: tx.budget_category_id ? String(tx.budget_category_id) : "",
|
||||
});
|
||||
}
|
||||
|
||||
@@ -129,6 +151,11 @@ export default function Transactions() {
|
||||
body.to_account_id = Number(form.to_account_id);
|
||||
const toCents = parseAmountToCents(form.to_amount);
|
||||
if (toCents) body.to_amount_cents = toCents;
|
||||
if (savingsDest) {
|
||||
body.budget_treatment = form.budget_as_expense ? "budgeted" : "neutral";
|
||||
body.budget_category_id =
|
||||
form.budget_as_expense && form.budget_category_id ? Number(form.budget_category_id) : null;
|
||||
}
|
||||
} else {
|
||||
body.category_id = form.category_id ? Number(form.category_id) : null;
|
||||
}
|
||||
@@ -320,6 +347,28 @@ export default function Transactions() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{savingsDest && (
|
||||
<div className="savings-opt">
|
||||
<label className="checkline">
|
||||
<input type="checkbox" checked={form.budget_as_expense}
|
||||
onChange={(e) => setForm({ ...form, budget_as_expense: e.target.checked })} />
|
||||
<span>{t("transactions.budgetAsSavings")}</span>
|
||||
</label>
|
||||
{form.budget_as_expense && (
|
||||
<label>
|
||||
<span>{t("transactions.budgetCategory")}</span>
|
||||
<select value={form.budget_category_id} onChange={(e) => setForm({ ...form, budget_category_id: e.target.value })}>
|
||||
{expenseGroups.map((g) => (
|
||||
<optgroup key={g.id} label={g.name}>
|
||||
{g.categories.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
|
||||
</optgroup>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{form.type !== "transfer" && (
|
||||
<div className="row">
|
||||
<label className="grow">
|
||||
|
||||
Reference in New Issue
Block a user