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>
2026-08-26 23:13:40 +02:00
parent 63de8368f0
commit 2379cf4973
9 changed files with 297 additions and 9 deletions
@@ -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>
+  );
+}