feat: Uebertraege lassen sich endlich bedienen
Der Uebertrags-Dienst und seine fuenf Endpunkte gab es seit Wochen – ohne einen einzigen Aufrufer in der Oberflaeche. Man konnte also nirgends sagen, dass zwei Buchungen derselbe Uebertrag sind, und eine gefundene Verknuepfung auch nicht wieder loesen. Jetzt: eine Karte "Moegliche Uebertraege" im Eingang mit beiden Seiten nebeneinander, Verbinden und Ignorieren; in der Buchungsliste eine Marke mit dem Gegenkonto und ein Knopf zum Loesen. Das Gegenkonto kommt vom Server mit – die andere Buchung steht oft gar nicht in der gefilterten Liste, und "Uebertrag" ohne Angabe wohin sagt nichts. Ausserdem wird nach dem Buchen aus dem Eingang nach Uebertraegen gesucht, so wie bisher nur nach einem Import. Seit die Bankanbindung ihre Umsaetze in den Eingang legt, entsteht die Gegenseite naemlich erst dort; ohne diesen Aufruf wuerde sie nie gefunden. Ein Fehler dabei kippt das Buchen nicht. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Guido
Claude Opus 5
@@ -204,6 +204,18 @@ export const api = {
|
||||
bankCallback: (state, code) =>
|
||||
request(`/bank/callback?state=${encodeURIComponent(state)}&code=${encodeURIComponent(code)}`,
|
||||
{ method: "POST" }),
|
||||
// --- Überträge zwischen eigenen Konten -----------------------------------
|
||||
// Ändern ausschliesslich die Verknüpfungs-Schicht. Keine Buchung wird
|
||||
// angefasst – deshalb ist auch eine falsche Verknüpfung folgenlos.
|
||||
transactionLinks: () => request("/transactions/links"),
|
||||
searchTransfers: () => request("/uebertraege/suchen", { method: "POST" }),
|
||||
connectTransfer: (a_id, b_id) =>
|
||||
request("/uebertraege/verbinden", { method: "POST", body: { a_id, b_id } }),
|
||||
releaseTransfer: (linkId) =>
|
||||
request(`/uebertraege/${linkId}`, { method: "DELETE" }),
|
||||
ignoreTransfer: (a_id, b_id) =>
|
||||
request("/uebertraege/ignorieren", { method: "POST", body: { a_id, b_id } }),
|
||||
|
||||
listBankConnections: () => request("/bank/connections"),
|
||||
syncBankConnection: (id) => request(`/bank/connections/${id}/sync`, { method: "POST" }),
|
||||
refreshBankBalances: (id) =>
|
||||
|
||||
@@ -0,0 +1,123 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { api } from "../api";
|
||||
import Icon from "../components/Icon";
|
||||
import Money from "../components/Money";
|
||||
import { useToast } from "../toast";
|
||||
import { formatDate } from "../format";
|
||||
|
||||
// Paare, die zusammengehören könnten: ein Abgang auf dem einen Konto, ein
|
||||
// Zugang auf dem anderen. Verbinden ändert KEINE Buchung – es setzt nur einen
|
||||
// Vermerk, dass die beiden dasselbe Geld sind. Beide bleiben mit Betrag,
|
||||
// Kategorie und Import-Schlüssel stehen; sie fallen nur aus der Auswertung.
|
||||
// Deshalb ist auch eine falsche Verknüpfung folgenlos: Lösen stellt alles her.
|
||||
export default function Uebertragsvorschlaege({ baseCurrency, onChange }) {
|
||||
const { t } = useTranslation();
|
||||
const { toast } = useToast();
|
||||
|
||||
const [stand, setStand] = useState(null); // { verknuepft, vorschlaege }
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
async function suchen(melden = false) {
|
||||
setBusy(true);
|
||||
try {
|
||||
const r = await api.searchTransfers();
|
||||
setStand(r);
|
||||
if (melden) {
|
||||
toast(t("transfers.searched", {
|
||||
verknuepft: r.verknuepft, offen: r.vorschlaege.length,
|
||||
}));
|
||||
}
|
||||
if (r.verknuepft > 0) onChange?.();
|
||||
} catch (e) {
|
||||
toast(e.message, "error");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => { suchen(false); }, []);
|
||||
|
||||
async function verbinden(paar) {
|
||||
try {
|
||||
await api.connectTransfer(paar.a.id, paar.b.id);
|
||||
onChange?.();
|
||||
suchen(false);
|
||||
} catch (e) {
|
||||
toast(e.message, "error");
|
||||
}
|
||||
}
|
||||
|
||||
async function ignorieren(paar) {
|
||||
try {
|
||||
await api.ignoreTransfer(paar.a.id, paar.b.id);
|
||||
suchen(false);
|
||||
} catch (e) {
|
||||
toast(e.message, "error");
|
||||
}
|
||||
}
|
||||
|
||||
// Vor dem ersten Ergebnis keine leere Karte zeigen.
|
||||
if (stand === null) return null;
|
||||
if (stand.vorschlaege.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<div className="card-head">
|
||||
<Icon name="arrow-left-right" size={18} />
|
||||
<h2>{t("transfers.title")}</h2>
|
||||
<button className="btn sm" disabled={busy} onClick={() => suchen(true)}>
|
||||
{t("transfers.search")}
|
||||
</button>
|
||||
</div>
|
||||
<p className="muted small">{t("transfers.intro")}</p>
|
||||
|
||||
<div className="account-list">
|
||||
{stand.vorschlaege.map((paar) => {
|
||||
const mitKategorie = paar.a.category_id != null || paar.b.category_id != null;
|
||||
return (
|
||||
<div className="uebertrag-vorschlag" key={`${paar.a.id}-${paar.b.id}`}>
|
||||
<div className="uebertrag-seiten">
|
||||
<Seite seite={paar.a} baseCurrency={baseCurrency} />
|
||||
<Icon name="arrow-left-right" size={16} className="uebertrag-pfeil" />
|
||||
<Seite seite={paar.b} baseCurrency={baseCurrency} />
|
||||
</div>
|
||||
{/* Eine zugeordnete Buchung faellt durchs Verbinden aus dem
|
||||
Budget. Das soll niemanden ueberraschen. */}
|
||||
{mitKategorie && (
|
||||
<p className="muted small" style={{ margin: "4px 0 0" }}>
|
||||
{t("transfers.hasCategory")}
|
||||
</p>
|
||||
)}
|
||||
<div className="btn-pair" style={{ marginTop: "var(--sp-2)" }}>
|
||||
<button className="btn sm primary" onClick={() => verbinden(paar)}>
|
||||
<Icon name="arrow-left-right" size={14} /> {t("transfers.connect")}
|
||||
</button>
|
||||
<button className="btn sm ghost" onClick={() => ignorieren(paar)}>
|
||||
{t("transfers.ignore")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Seite({ seite, baseCurrency }) {
|
||||
return (
|
||||
<div className="uebertrag-seite selectable">
|
||||
<div className="named-sub">
|
||||
<span className="nowrap">{formatDate(seite.date)}</span>
|
||||
{" · "}
|
||||
<span className="nowrap">{seite.account_name}</span>
|
||||
</div>
|
||||
<div><strong>{seite.payee || seite.description || "—"}</strong></div>
|
||||
<Money cents={seite.amount_cents} currency={seite.currency}
|
||||
sign={seite.type === "expense" ? "neg" : "pos"}
|
||||
baseCurrency={baseCurrency} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1153,3 +1153,44 @@ tr.row-dup {
|
||||
fehlende oder doppelte Buchung – deshalb warnend, nicht rot. */
|
||||
.saldo-ok { color: var(--ok); }
|
||||
.saldo-abweichung { color: var(--warn); font-weight: 560; }
|
||||
|
||||
/* ---------- Übertrags-Vorschläge ---------- */
|
||||
.uebertrag-vorschlag {
|
||||
padding: var(--sp-3) 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.uebertrag-vorschlag:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
/* Die beiden Seiten nebeneinander, damit man sie vergleicht statt sie zu
|
||||
lesen. Auf schmalen Schirmen untereinander – gestapelt bleibt der Vergleich
|
||||
möglich, gequetscht nicht. */
|
||||
.uebertrag-seiten {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-3);
|
||||
}
|
||||
.uebertrag-seite {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
}
|
||||
.uebertrag-pfeil {
|
||||
flex: 0 0 auto;
|
||||
color: var(--muted);
|
||||
}
|
||||
@media (max-width: 820px) {
|
||||
.uebertrag-seiten {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--sp-2);
|
||||
}
|
||||
}
|
||||
|
||||
/* Übertrags-Marke in der Buchungsliste: gedämpft, nicht warnend – die Buchung
|
||||
ist in Ordnung, sie zählt nur nicht als Ausgabe oder Einnahme. */
|
||||
.uebertrag-marke {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
@@ -633,5 +633,17 @@
|
||||
"noAccounts": "Verbunden, aber die Bank hat kein Konto übermittelt",
|
||||
"noAccountsHint": "Im eingeschränkten Betrieb gibt die Bank nur Konten heraus, die du bei Enable Banking selbst verknüpft hast. Öffne dort deine Anwendung, drück „Activate by linking accounts“ und wähle diese Bank – danach hier noch einmal verbinden.",
|
||||
"noAccountsDropped": "Die Bank hat {{n}} Einträge geschickt, aber ohne Kennung – damit lässt sich nichts abrufen. Das ist ein Fall für den Support von Enable Banking; schick mir die Meldung, dann formuliere ich die Anfrage."
|
||||
},
|
||||
"transfers": {
|
||||
"title": "Mögliche Überträge",
|
||||
"intro": "Ein Abgang hier, ein Zugang dort – vermutlich dasselbe Geld. Verbinden ändert keine Buchung: Beide bleiben stehen und zählen nur nicht mehr als Ausgabe und Einnahme. Lösen stellt alles wieder her.",
|
||||
"search": "Neu suchen",
|
||||
"searched": "{{verknuepft}} verbunden, {{offen}} zum Ansehen.",
|
||||
"connect": "Verbinden",
|
||||
"ignore": "Ignorieren",
|
||||
"hasCategory": "Eine der beiden hat eine Kategorie – sie fällt durchs Verbinden aus der Auswertung.",
|
||||
"linked": "Übertrag",
|
||||
"release": "Verknüpfung lösen",
|
||||
"releaseConfirm": "Die beiden Buchungen bleiben unverändert stehen und zählen danach wieder als Ausgabe und Einnahme."
|
||||
}
|
||||
}
|
||||
|
||||
@@ -633,5 +633,17 @@
|
||||
"noAccounts": "Connected, but the bank returned no account",
|
||||
"noAccountsHint": "In restricted mode the bank only releases accounts you linked at Enable Banking yourself. Open your application there, press “Activate by linking accounts” and pick this bank – then connect again here.",
|
||||
"noAccountsDropped": "The bank sent {{n}} entries but without an identifier, so nothing can be fetched. That is one for Enable Banking support; send me the message and I will draft the question."
|
||||
},
|
||||
"transfers": {
|
||||
"title": "Possible transfers",
|
||||
"intro": "Money out here, money in there – probably the same money. Connecting changes no transaction: both stay put and simply stop counting as expense and income. Releasing restores everything.",
|
||||
"search": "Search again",
|
||||
"searched": "{{verknuepft}} connected, {{offen}} to review.",
|
||||
"connect": "Connect",
|
||||
"ignore": "Ignore",
|
||||
"hasCategory": "One of them has a category – connecting takes it out of the evaluation.",
|
||||
"linked": "Transfer",
|
||||
"release": "Release link",
|
||||
"releaseConfirm": "Both transactions stay exactly as they are and count as expense and income again afterwards."
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@ import CategorySelect from "../components/CategorySelect";
|
||||
import Icon from "../components/Icon";
|
||||
import IconChip from "../components/IconChip";
|
||||
import Money from "../components/Money";
|
||||
import Uebertragsvorschlaege from "../components/Uebertragsvorschlaege";
|
||||
import { useToast } from "../toast";
|
||||
import { useConfirm } from "../confirm";
|
||||
import { useSettings } from "../settings";
|
||||
@@ -102,6 +103,10 @@ export default function Eingang() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Nach dem Buchen entsteht die Gegenseite eines Übertrags erst –
|
||||
deshalb steht der Vorschlag hier und nicht in der Buchungsliste. */}
|
||||
<Uebertragsvorschlaege baseCurrency={baseCurrency} onChange={laden} />
|
||||
|
||||
{rows.length === 0 ? (
|
||||
<div className="card"><div className="empty-state">{t("inbox.empty")}</div></div>
|
||||
) : (
|
||||
|
||||
@@ -41,6 +41,8 @@ export default function Transactions() {
|
||||
const toast = useToast();
|
||||
|
||||
const [txns, setTxns] = useState([]);
|
||||
// Je Buchungs-ID die Gegenseite, falls sie Teil eines Übertrags ist.
|
||||
const [links, setLinks] = useState({});
|
||||
const [accounts, setAccounts] = useState([]);
|
||||
const [groups, setGroups] = useState([]);
|
||||
const [filter, setFilter] = useState({ account_id: "", type: "" });
|
||||
@@ -66,7 +68,30 @@ export default function Transactions() {
|
||||
}
|
||||
async function ladenBuchungen() {
|
||||
try {
|
||||
setTxns(await api.listTransactions({ account_id: filter.account_id, type: filter.type }));
|
||||
// Verknüpfungen getrennt: Sie sind eine Schicht über den Buchungen,
|
||||
// kein Feld an ihnen – deshalb auch ein eigener Abruf.
|
||||
const [liste, verkn] = await Promise.all([
|
||||
api.listTransactions({ account_id: filter.account_id, type: filter.type }),
|
||||
api.transactionLinks().catch(() => ({})),
|
||||
]);
|
||||
setTxns(liste);
|
||||
setLinks(verkn);
|
||||
} catch (err) {
|
||||
toast(err.message, "error");
|
||||
}
|
||||
}
|
||||
|
||||
async function loesen(tx) {
|
||||
const link = links[String(tx.id)];
|
||||
if (!link) return;
|
||||
if (!(await confirm({
|
||||
title: t("transfers.release"),
|
||||
message: t("transfers.releaseConfirm"),
|
||||
confirmLabel: t("transfers.release"),
|
||||
}))) return;
|
||||
try {
|
||||
await api.releaseTransfer(link.link_id);
|
||||
ladenBuchungen();
|
||||
} catch (err) {
|
||||
toast(err.message, "error");
|
||||
}
|
||||
@@ -218,6 +243,15 @@ export default function Transactions() {
|
||||
<div className="named-text">
|
||||
<div className="ellipsis">{l.title}</div>
|
||||
{l.sub && <div className="named-sub ellipsis">{l.sub}</div>}
|
||||
{/* Verknüpft heisst: zählt nicht als Ausgabe oder Einnahme.
|
||||
Ohne das Gegenkonto sagt „Übertrag" nichts. */}
|
||||
{links[String(tx.id)] && (
|
||||
<div className="named-sub ellipsis uebertrag-marke">
|
||||
<Icon name="arrow-left-right" size={12} />{" "}
|
||||
{accountById[links[String(tx.id)].other_account_id]?.name
|
||||
|| t("transfers.linked")}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -247,6 +281,12 @@ export default function Transactions() {
|
||||
<button className="btn sm ghost" title={t("common.edit")} onClick={() => openEdit(tx)}>
|
||||
<Icon name="edit" size={14} />
|
||||
</button>
|
||||
{links[String(tx.id)] && (
|
||||
<button className="btn sm ghost" title={t("transfers.release")}
|
||||
onClick={() => loesen(tx)}>
|
||||
<Icon name="arrow-left-right" size={14} />
|
||||
</button>
|
||||
)}
|
||||
<button className="btn sm danger" title={t("common.delete")} onClick={() => loeschen(tx)}>
|
||||
<Icon name="trash" size={14} />
|
||||
</button>
|
||||
@@ -254,7 +294,7 @@ export default function Transactions() {
|
||||
),
|
||||
},
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
], [accountById, categoryById, baseCurrency, formatDate, t]);
|
||||
], [accountById, categoryById, baseCurrency, formatDate, links, t]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user