feat: Kontostand von der Bank – die eigene Rechnung wird geprueft

Certain rechnet den Saldo bisher ausschliesslich selbst aus: Anfangsbestand
plus alle Buchungen. Stimmt eine Buchung nicht, faellt das erst auf, wenn man
von Hand mit dem Auszug vergleicht.

Der von der Bank gemeldete Saldo wird jetzt mitgefuehrt und danebengestellt.
Weicht er ab, fehlt oder doppelt eine Buchung – und man sieht es auf der
Kontenseite und in den Einstellungen sofort, statt es zu suchen.

Banken melden mehrere Saldi nebeneinander; ausgewaehlt wird der gebuchte, denn
nur der ist mit Certains Rechnung vergleichbar. Ein verfuegbarer Saldo enthaelt
Vorgemerktes oder einen Ueberziehungsrahmen.

Die Saldi kommen auch fuer noch nicht zugeordnete Konten: Bei mehreren
Revolut-Pockets ist der Betrag oft das Einzige, woran man sie unterscheidet.
Ein Fehler bei einem Konto beendet den Durchlauf nicht.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/src/pages/Accounts.jsx

@@ -9,7 +9,7 @@ import IconChip from "../components/IconChip";
 import Money from "../components/Money";
 import Modal from "../components/Modal";
 import IconPicker, { ACCOUNT_ICONS } from "../components/IconPicker";
-import { centsToInput, formatMoney, parseAmountToCents } from "../format";
+import { centsToInput, formatDate, formatMoney, parseAmountToCents } from "../format";
 
 const ACCOUNT_TYPES = ["girokonto", "sparkonto", "bargeld", "kreditkarte", "depot", "sonstiges"];
 const TYPE_ICON = {
@@ -248,6 +248,28 @@ export default function Accounts() {
                     {t(`accountTypes.${a.type}`)} · {a.currency}
                     {a.identifiers.length > 0 && ` · ${a.identifiers.length} ${t("accounts.identShort")}`}
                   </div>
+                  {/* Bei angebundenen Konten der Saldo, den die Bank fuehrt.
+                      Er ersetzt die eigene Rechnung nicht, er prueft sie: Eine
+                      Abweichung heisst, dass eine Buchung fehlt oder doppelt
+                      ist – sonst faellt das erst beim Vergleich von Hand auf. */}
+                  {a.bank_balance_cents != null && (
+                    <div className="named-sub">
+                      {a.bank_balance_cents === a.balance_cents ? (
+                        <span className="saldo-ok">
+                          {t("accounts.bankBalanceMatches")}
+                          {a.bank_balance_at ? ` · ${formatDate(a.bank_balance_at)}` : ""}
+                        </span>
+                      ) : (
+                        <span className="saldo-abweichung">
+                          {t("accounts.bankBalanceDiffers", {
+                            bank: formatMoney(a.bank_balance_cents, a.currency),
+                            diff: formatMoney(a.balance_cents - a.bank_balance_cents,
+                                              a.currency),
+                          })}
+                        </span>
+                      )}
+                    </div>
+                  )}
                 </div>
                 <Money cents={a.balance_cents} currency={a.currency}
                        baseCents={a.balance_base_cents} baseCurrency={baseCurrency} />