feat: Kontostand aufschluesseln – und der Angleich-Knopf bleibt
Zwei Sachen aus derselben Wurzel: Wenn ein Saldo nicht stimmt, sieht man nicht, warum, und kann auch nichts dagegen tun. Ein Klick auf den Kontostand zeigt jetzt die Rechnung: Anfangsbestand, Einnahmen, Ausgaben, Uebertraege raus und rein – jeweils mit der Anzahl der Buchungen – und was daraus wird. Darunter der Saldo der Bank und, einzeln aufgefuehrt, alle Uebertraege des Kontos. Genau die sind die haeufigste Ursache und in einer langen Buchungsliste am schwersten zu ueberblicken. Rechnung und Kontenliste kommen aus EINER Quelle: ``account_balance_cents`` liest jetzt aus der Aufschluesselung. Sonst koennte die Anzeige etwas anderes behaupten als der Saldo, und man suchte den Fehler im Falschen. Ausserdem war der Knopf "Saldo der Bank uebernehmen" verschwunden, sobald die Bank nur einen verfuegbaren Saldo meldet. Das war zu weit gedacht: Nicht vergleichbar heisst nicht, dass man nicht angleichen duerfte. Der Knopf ist zurueck, und die Nachfrage sagt in dem Fall, worauf man sich einlaesst – der verfuegbare Saldo enthaelt Vorgemerktes, das spaeter noch als Buchung kommt. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Guido
Claude Opus 5
@@ -251,6 +251,8 @@ export const api = {
|
||||
{ method: "POST" }),
|
||||
// Den Saldo der Bank als richtig uebernehmen – die Differenz wandert in
|
||||
// den Anfangsbestand, die Buchungen bleiben unangetastet.
|
||||
// Woraus sich ein Saldo zusammensetzt – zum Nachrechnen, wenn er nicht stimmt.
|
||||
balanceBreakdown: (accountId) => request(`/accounts/${accountId}/aufschluesselung`),
|
||||
adoptBankBalance: (accountId) =>
|
||||
request(`/accounts/${accountId}/saldo-uebernehmen`, { method: "POST" }),
|
||||
setBankPoll: (id, minutes) =>
|
||||
|
||||
@@ -1407,3 +1407,39 @@ tr.row-dup {
|
||||
.uebertrag-frage .btn {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* Aufgeschlüsselter Kontostand: eine Rechnung, also untereinander und rechts
|
||||
ausgerichtet – so lässt sie sich nachvollziehen wie auf Papier. */
|
||||
/* Die Zeile darf nur umbrechen, wenn die Rechnung offen ist – sonst
|
||||
verschiebt sich die Kontenliste ohne Grund. */
|
||||
.account-row.mit-aufschluss {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.aufschluss {
|
||||
flex: 1 1 100%;
|
||||
margin: var(--sp-2) 0 0 38px;
|
||||
padding: var(--sp-3);
|
||||
border-left: 2px solid var(--border-strong);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.aufschluss-zeile {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--sp-3);
|
||||
padding: 2px 0;
|
||||
min-width: 0;
|
||||
}
|
||||
.aufschluss-zeile > span:last-child {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.aufschluss-summe {
|
||||
margin-top: 4px;
|
||||
padding-top: 4px;
|
||||
border-top: 1px solid var(--border-strong);
|
||||
font-weight: 600;
|
||||
}
|
||||
.aufschluss-uebertraege {
|
||||
margin-top: var(--sp-3);
|
||||
padding-top: var(--sp-2);
|
||||
border-top: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
+14
-1
@@ -178,7 +178,20 @@
|
||||
"adopted": "Saldo übernommen.",
|
||||
"identShort_one": "{{count}} Kennung",
|
||||
"identShort_other": "{{count}} Kennungen",
|
||||
"bankBalanceAvailable": "Bank meldet {{bank}} als verfügbaren Saldo – der enthält Vorgemerktes und lässt sich nicht vergleichen."
|
||||
"bankBalanceAvailable": "Bank meldet {{bank}} als verfügbaren Saldo – der enthält Vorgemerktes und lässt sich nicht vergleichen.",
|
||||
"adoptConfirmAvailable": "Achtung: {{bank}} ist der VERFÜGBARE Saldo – er enthält Vorgemerktes, das später noch als Buchung kommt. Gleichst du jetzt an, ist dein Konto genau um diese Vormerkungen zu hoch, sobald sie gebucht werden. Die Differenz von {{diff}} wandert in den Anfangsbestand, deine Buchungen bleiben unverändert.",
|
||||
"breakdown": "Woraus setzt sich das zusammen?",
|
||||
"part": {
|
||||
"anfangsbestand": "Anfangsbestand",
|
||||
"einnahmen": "Einnahmen",
|
||||
"ausgaben": "Ausgaben",
|
||||
"uebertraege_raus": "Überträge raus",
|
||||
"uebertraege_rein": "Überträge rein",
|
||||
"saldo": "ergibt",
|
||||
"bankGebucht": "Bank (gebucht)",
|
||||
"bankVerfuegbar": "Bank (verfügbar)",
|
||||
"legs": "Die Überträge dieses Kontos"
|
||||
}
|
||||
},
|
||||
"accountTypes": {
|
||||
"girokonto": "Girokonto",
|
||||
|
||||
+14
-1
@@ -178,7 +178,20 @@
|
||||
"adopted": "Balance adopted.",
|
||||
"identShort_one": "{{count}} identifier",
|
||||
"identShort_other": "{{count}} identifiers",
|
||||
"bankBalanceAvailable": "The bank reports {{bank}} as the available balance – it includes pending items and cannot be compared."
|
||||
"bankBalanceAvailable": "The bank reports {{bank}} as the available balance – it includes pending items and cannot be compared.",
|
||||
"adoptConfirmAvailable": "Careful: {{bank}} is the AVAILABLE balance – it includes pending items that will still arrive as bookings. If you align now, your account will be off by exactly those once they are booked. The difference of {{diff}} moves into the opening balance; your transactions stay unchanged.",
|
||||
"breakdown": "What is this made of?",
|
||||
"part": {
|
||||
"anfangsbestand": "Opening balance",
|
||||
"einnahmen": "Income",
|
||||
"ausgaben": "Expenses",
|
||||
"uebertraege_raus": "Transfers out",
|
||||
"uebertraege_rein": "Transfers in",
|
||||
"saldo": "makes",
|
||||
"bankGebucht": "Bank (booked)",
|
||||
"bankVerfuegbar": "Bank (available)",
|
||||
"legs": "This account's transfers"
|
||||
}
|
||||
},
|
||||
"accountTypes": {
|
||||
"girokonto": "Checking",
|
||||
|
||||
@@ -44,6 +44,8 @@ function TransferKeywords({ accounts }) {
|
||||
const [amount, setAmount] = useState("");
|
||||
const [target, setTarget] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
// Aufgeschlüsselter Saldo je Konto, sobald man danach fragt.
|
||||
const [aufschluss, setAufschluss] = useState({});
|
||||
// Was beim nachträglichen Anwenden übersprungen wurde, samt Grund.
|
||||
const [uebersprungen, setUebersprungen] = useState([]);
|
||||
const confirm = useConfirm();
|
||||
@@ -179,11 +181,24 @@ export default function Accounts() {
|
||||
const [editing, setEditing] = useState(null); // Account-Objekt oder null
|
||||
const [form, setForm] = useState(null); // Formularzustand oder null (geschlossen)
|
||||
const [busy, setBusy] = useState(false);
|
||||
// Aufgeschlüsselter Saldo je Konto, sobald man danach fragt.
|
||||
const [aufschluss, setAufschluss] = useState({});
|
||||
|
||||
async function aufschluesseln(a) {
|
||||
if (aufschluss[a.id]) { setAufschluss((s) => ({ ...s, [a.id]: null })); return; }
|
||||
try {
|
||||
const daten = await api.balanceBreakdown(a.id);
|
||||
setAufschluss((s) => ({ ...s, [a.id]: daten }));
|
||||
} catch (e) {
|
||||
toast(e.message, "error");
|
||||
}
|
||||
}
|
||||
|
||||
async function saldoUebernehmen(a) {
|
||||
if (!(await confirm({
|
||||
title: t("accounts.adoptBankBalance"),
|
||||
message: t("accounts.adoptConfirm", {
|
||||
message: t(a.bank_balance_vergleichbar
|
||||
? "accounts.adoptConfirm" : "accounts.adoptConfirmAvailable", {
|
||||
bank: formatMoney(a.bank_balance_cents, a.currency),
|
||||
diff: formatMoney(a.balance_cents - a.bank_balance_cents, a.currency),
|
||||
}),
|
||||
@@ -309,7 +324,8 @@ export default function Accounts() {
|
||||
</div>
|
||||
<div className="account-list">
|
||||
{accounts.map((a, i) => (
|
||||
<div className="account-row" key={a.id}>
|
||||
<div className={`account-row${aufschluss[a.id] ? " mit-aufschluss" : ""}`}
|
||||
key={a.id}>
|
||||
<IconChip name={a.icon} color={a.color} />
|
||||
<div className="named-text grow">
|
||||
<div><strong>{a.name}</strong></div>
|
||||
@@ -333,7 +349,17 @@ export default function Accounts() {
|
||||
<span className="muted">
|
||||
{t("accounts.bankBalanceAvailable", {
|
||||
bank: formatMoney(a.bank_balance_cents, a.currency),
|
||||
})}
|
||||
})}{" "}
|
||||
{/* Nicht vergleichbar heisst nicht, dass man nicht
|
||||
angleichen dürfte – nur, dass Certain es nicht
|
||||
von sich aus als Abweichung meldet. Die
|
||||
Entscheidung bleibt beim Nutzer. */}
|
||||
{a.bank_balance_cents !== a.balance_cents && (
|
||||
<button type="button" className="btn sm"
|
||||
onClick={() => saldoUebernehmen(a)}>
|
||||
{t("accounts.adoptBankBalance")}
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
) : a.bank_balance_cents === a.balance_cents ? (
|
||||
<span className="saldo-ok">
|
||||
@@ -359,8 +385,14 @@ export default function Accounts() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Money cents={a.balance_cents} currency={a.currency}
|
||||
baseCents={a.balance_base_cents} baseCurrency={baseCurrency} />
|
||||
<button type="button" className="btn sm ghost" title={t("accounts.breakdown")}
|
||||
onClick={() => aufschluesseln(a)}>
|
||||
<Money cents={a.balance_cents} currency={a.currency}
|
||||
baseCents={a.balance_base_cents} baseCurrency={baseCurrency} />
|
||||
</button>
|
||||
{aufschluss[a.id] && (
|
||||
<Aufschluesselung daten={aufschluss[a.id]} t={t} />
|
||||
)}
|
||||
<div className="row-actions">
|
||||
<button className="btn sm ghost" title={t("accounts.moveUp")}
|
||||
disabled={i === 0} onClick={() => verschiebe(i, -1)}>
|
||||
@@ -488,3 +520,61 @@ export default function Accounts() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
// Woraus sich ein Kontostand zusammensetzt. Stimmt er nicht, liegt es fast
|
||||
// immer an einer dieser Zahlen oder an einem Übertrag, der zu viel oder zu
|
||||
// wenig verschiebt – dann sieht man hier sofort, welcher Teil nicht passt.
|
||||
function Aufschluesselung({ daten, t }) {
|
||||
const { teile, uebertraege, bank, waehrung } = daten;
|
||||
const zeile = (schluessel, vorzeichen) => {
|
||||
const teil = teile[schluessel];
|
||||
return (
|
||||
<div className="aufschluss-zeile" key={schluessel}>
|
||||
<span>
|
||||
{t(`accounts.part.${schluessel}`)}
|
||||
{teil.anzahl > 0 && <span className="muted"> ({teil.anzahl})</span>}
|
||||
</span>
|
||||
<span className="nowrap">
|
||||
{vorzeichen}{formatMoney(teil.cents, waehrung)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div className="aufschluss">
|
||||
{zeile("anfangsbestand", "")}
|
||||
{zeile("einnahmen", "+")}
|
||||
{zeile("ausgaben", "−")}
|
||||
{zeile("uebertraege_raus", "−")}
|
||||
{zeile("uebertraege_rein", "+")}
|
||||
<div className="aufschluss-zeile aufschluss-summe">
|
||||
<span>{t("accounts.part.saldo")}</span>
|
||||
<span className="nowrap">{formatMoney(teile.saldo.cents, waehrung)}</span>
|
||||
</div>
|
||||
{bank.cents != null && (
|
||||
<div className="aufschluss-zeile muted">
|
||||
<span>{t(bank.vergleichbar ? "accounts.part.bankGebucht"
|
||||
: "accounts.part.bankVerfuegbar")}</span>
|
||||
<span className="nowrap">{formatMoney(bank.cents, waehrung)}</span>
|
||||
</div>
|
||||
)}
|
||||
{uebertraege.length > 0 && (
|
||||
<div className="aufschluss-uebertraege">
|
||||
<div className="muted small">{t("accounts.part.legs")}</div>
|
||||
{uebertraege.map((u) => (
|
||||
<div className="aufschluss-zeile" key={u.id}>
|
||||
<span className="ellipsis">
|
||||
{formatDate(u.datum)} · {u.von} → {u.nach}
|
||||
{u.text ? ` · ${u.text}` : ""}
|
||||
</span>
|
||||
<span className="nowrap">
|
||||
{u.raus ? "−" : "+"}{formatMoney(u.cents, waehrung)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user