feat: Eine Arbeitsliste, und Kategorien direkt in der Buchungsliste
'Eingang' und 'Offene Buchungen' zeigten fast dasselbe. Seit angebundene Konten selbst buchen, ist eine Bank-Buchung sofort gebucht und ohne Kategorie – sie stand damit in BEIDEN Listen. Die Trennung stammte aus der Zeit, als der Eingang nur Vorschlaege enthielt. Jetzt eine Seite 'Zu erledigen' mit allem, was noch eine Hand braucht: offene Vorschlaege zum Buchen oder Uebertragen und Buchungen ohne Kategorie, egal ob von Bank, Mail, Kurzbefehl oder Datei. Aelteste zuerst, mit der Herkunft in der Zeile. Erledigtes verschwindet – die Eingangs-Eintraege bleiben in der Datenbank, weil der spaetere Import gegen sie abgleicht. /offen leitet um. Das Haekchen 'Schlagwort merken' aus der alten Seite bleibt: Es ist der Grund, warum der Stapel mit der Zeit kleiner wird, und der Eingang hatte es nie. Der Uebertrags-Knopf gilt jetzt auch fuer schon gebuchte Buchungen – sonst haette in einer gemeinsamen Liste die eine Haelfte der Zeilen ihn gehabt und die andere nicht. In der Buchungsliste steht die Kategorie jetzt als Auswahl in der Zeile, dort wo bisher nur ihr Name stand. Vorher musste man jede Buchung einzeln zum Bearbeiten oeffnen. Die Zeile aendert sich an Ort und Stelle, die Bildlaufposition bleibt. Ausserdem tragen API-Antworten jetzt 'Cache-Control: no-store'. Ohne das darf ein Browser selbst entscheiden, und der Zurueck-Knopf zeigt Salden von vorhin – bei Geld ist eine veraltete Anzeige schlimmer als eine langsame. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Guido
Claude Opus 5
+283
-129
@@ -2,10 +2,10 @@ import { useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { api } from "../api";
|
||||
import AccountSelect from "../components/AccountSelect";
|
||||
import CategorySelect from "../components/CategorySelect";
|
||||
import Icon from "../components/Icon";
|
||||
import IconChip from "../components/IconChip";
|
||||
import AccountSelect from "../components/AccountSelect";
|
||||
import Modal from "../components/Modal";
|
||||
import Money from "../components/Money";
|
||||
import Uebertragsvorschlaege from "../components/Uebertragsvorschlaege";
|
||||
@@ -15,19 +15,31 @@ import { useSettings } from "../settings";
|
||||
import { gruppenFuer } from "../kategorien";
|
||||
import { formatDate } from "../format";
|
||||
|
||||
// Was unterwegs erfasst wurde – per Kurzbefehl vom Telefon. Die Einträge bleiben
|
||||
// hier stehen, auch nachdem sie gebucht sind: Der spätere Kontoauszug gleicht
|
||||
// gegen sie ab, damit dieselbe Zahlung nicht ein zweites Mal in den Saldo läuft.
|
||||
// Die Arbeitsliste: alles, was noch eine Hand braucht – aus welcher Quelle auch
|
||||
// immer. Zwei Arten von Zeilen:
|
||||
//
|
||||
// Vorschlag – kam per Mail oder Kurzbefehl und ist noch nicht gebucht.
|
||||
// Buchung – ist gebucht, hat aber keine Kategorie.
|
||||
//
|
||||
// Das war früher auf zwei Seiten verteilt („Eingang" und „Offene Buchungen").
|
||||
// Seit angebundene Konten selbst buchen, stand jede Bank-Buchung ohne Kategorie
|
||||
// in BEIDEN – die Trennung stammte aus der Zeit, als der Eingang nur Vorschläge
|
||||
// enthielt.
|
||||
//
|
||||
// Erledigtes verschwindet aus der Liste. Die Eingangs-Einträge bleiben in der
|
||||
// Datenbank: Der spätere CSV-Import gleicht gegen sie ab, damit dieselbe
|
||||
// Zahlung nicht ein zweites Mal verbucht wird.
|
||||
export default function Eingang() {
|
||||
const { t } = useTranslation();
|
||||
const { toast } = useToast();
|
||||
const confirm = useConfirm();
|
||||
const { baseCurrency } = useSettings();
|
||||
|
||||
const [rows, setRows] = useState(null);
|
||||
const [inbox, setInbox] = useState(null);
|
||||
const [buchungen, setBuchungen] = useState([]);
|
||||
const [accounts, setAccounts] = useState([]);
|
||||
const [groups, setGroups] = useState([]);
|
||||
// Vorschlag, der gerade als Übertrag gebucht wird, samt Zielkonto.
|
||||
const [merken, setMerken] = useState(true);
|
||||
const [uebertrag, setUebertrag] = useState(null);
|
||||
|
||||
const expenseGroups = useMemo(() => gruppenFuer(groups, "expense"), [groups]);
|
||||
@@ -37,10 +49,14 @@ export default function Eingang() {
|
||||
|
||||
async function laden() {
|
||||
try {
|
||||
const [items, acc, cat] = await Promise.all([
|
||||
api.listInbox(), api.listAccounts(), api.listCategories(),
|
||||
const [items, tx, acc, cat] = await Promise.all([
|
||||
api.listInbox(),
|
||||
api.listTransactions({ uncategorized: true }),
|
||||
api.listAccounts(),
|
||||
api.listCategories(),
|
||||
]);
|
||||
setRows(items);
|
||||
setInbox(items);
|
||||
setBuchungen(tx);
|
||||
setAccounts(acc);
|
||||
setGroups(cat);
|
||||
} catch (e) {
|
||||
@@ -49,22 +65,69 @@ export default function Eingang() {
|
||||
}
|
||||
useEffect(() => { laden(); }, []);
|
||||
|
||||
async function zuordnen(item, categoryId) {
|
||||
// Woher eine Buchung stammt. Die gebuchten Eingangs-Einträge sagen es für
|
||||
// alles, was über Bank, Mail oder Kurzbefehl kam – dafür braucht es keine
|
||||
// zweite Abfrage, die Liste ist ohnehin schon da.
|
||||
const herkunft = useMemo(() => {
|
||||
const nach = {};
|
||||
for (const e of inbox || []) {
|
||||
if (e.transaction_id != null) nach[e.transaction_id] = e.source;
|
||||
}
|
||||
return nach;
|
||||
}, [inbox]);
|
||||
|
||||
// Beides in EINER Liste, älteste zuerst – so sieht man den Stapel kleiner
|
||||
// werden, statt zwischen zwei Seiten zu wechseln.
|
||||
const aufgaben = useMemo(() => {
|
||||
const offen = (inbox || [])
|
||||
.filter((e) => e.status === "pending" || e.status === "unclear")
|
||||
.map((e) => ({ art: "vorschlag", schluessel: `v${e.id}`, datum: e.date, e }));
|
||||
const ohneKategorie = buchungen.map((tx) => ({
|
||||
art: "buchung", schluessel: `b${tx.id}`, datum: tx.date, tx,
|
||||
quelle: herkunft[tx.id] || (tx.import_batch_id != null ? "csv" : "manuell"),
|
||||
}));
|
||||
return [...offen, ...ohneKategorie]
|
||||
.sort((a, b) => a.datum.localeCompare(b.datum) || a.schluessel.localeCompare(b.schluessel));
|
||||
}, [inbox, buchungen, herkunft]);
|
||||
|
||||
const offeneVorschlaege = aufgaben.filter(
|
||||
(a) => a.art === "vorschlag" && a.e.account_id);
|
||||
|
||||
async function zuordnenVorschlag(e, categoryId) {
|
||||
if (categoryId == null) return;
|
||||
try {
|
||||
await api.setInboxCategory(item.id, categoryId);
|
||||
setRows((r) => r.map((x) => (x.id === item.id ? { ...x, category_id: categoryId } : x)));
|
||||
} catch (e) {
|
||||
toast(e.message, "error");
|
||||
const neu = await api.setInboxCategory(e.id, categoryId);
|
||||
setInbox((r) => r.map((x) => (x.id === e.id ? neu : x)));
|
||||
} catch (err) {
|
||||
toast(err.message, "error");
|
||||
}
|
||||
}
|
||||
|
||||
async function buchen(item) {
|
||||
async function zuordnenBuchung(tx, categoryId) {
|
||||
if (categoryId == null) return;
|
||||
try {
|
||||
await api.bookInboxItem(item.id);
|
||||
await api.updateTransaction(tx.id, { category_id: Number(categoryId) });
|
||||
// Aus dem Text ein Schlagwort machen, damit die nächste gleiche Buchung
|
||||
// schon beim Import zugeordnet wird. Das ist der Grund, warum der Stapel
|
||||
// mit der Zeit kleiner wird.
|
||||
const wort = (tx.payee || tx.description || "").trim();
|
||||
if (merken && wort) {
|
||||
try {
|
||||
await api.addKeyword(Number(categoryId), { pattern: wort, match_field: "any" });
|
||||
} catch { /* Schlagwort existiert schon oder kollidiert – nicht schlimm */ }
|
||||
}
|
||||
setBuchungen((r) => r.filter((x) => x.id !== tx.id));
|
||||
} catch (err) {
|
||||
toast(err.message, "error");
|
||||
}
|
||||
}
|
||||
|
||||
async function buchen(e) {
|
||||
try {
|
||||
await api.bookInboxItem(e.id);
|
||||
laden();
|
||||
} catch (e) {
|
||||
toast(e.message, "error");
|
||||
} catch (err) {
|
||||
toast(err.message, "error");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -73,39 +136,12 @@ export default function Eingang() {
|
||||
const r = await api.bookAllInbox();
|
||||
toast(t("inbox.bookedN", { n: r.gebucht }));
|
||||
laden();
|
||||
} catch (e) {
|
||||
toast(e.message, "error");
|
||||
} catch (err) {
|
||||
toast(err.message, "error");
|
||||
}
|
||||
}
|
||||
|
||||
async function uebertragBuchen() {
|
||||
const { item, ziel } = uebertrag;
|
||||
if (!ziel) return;
|
||||
try {
|
||||
await api.bookInboxAsTransfer(item.id, Number(ziel));
|
||||
} catch (e) {
|
||||
// 409: Das Zielkonto haengt selbst an einer Bank und meldet den Zugang
|
||||
// von allein. Die Begruendung kommt vom Server – dort steht das Wissen,
|
||||
// ob ein Konto angebunden ist.
|
||||
if (e.status !== 409) { toast(e.message, "error"); return; }
|
||||
if (!(await confirm({
|
||||
title: t("inbox.transferTitle"),
|
||||
message: e.message,
|
||||
confirmLabel: t("inbox.asTransfer"),
|
||||
}))) return;
|
||||
try {
|
||||
await api.bookInboxAsTransfer(item.id, Number(ziel), true);
|
||||
} catch (zweiter) {
|
||||
toast(zweiter.message, "error");
|
||||
return;
|
||||
}
|
||||
}
|
||||
setUebertrag(null);
|
||||
toast(t("inbox.transferBooked"));
|
||||
laden();
|
||||
}
|
||||
|
||||
async function verwerfen(item) {
|
||||
async function verwerfen(e) {
|
||||
if (!(await confirm({
|
||||
title: t("inbox.discard"),
|
||||
message: t("inbox.discardConfirm"),
|
||||
@@ -113,21 +149,85 @@ export default function Eingang() {
|
||||
confirmLabel: t("inbox.discard"),
|
||||
}))) return;
|
||||
try {
|
||||
await api.discardInboxItem(item.id);
|
||||
await api.discardInboxItem(e.id);
|
||||
laden();
|
||||
} catch (e) {
|
||||
toast(e.message, "error");
|
||||
} catch (err) {
|
||||
toast(err.message, "error");
|
||||
}
|
||||
}
|
||||
|
||||
if (rows === null) return <div className="card"><div className="empty-state">…</div></div>;
|
||||
// Der Empfängertext ist oft genau das, was man nachschlagen will („welches
|
||||
// Franchise steckt hinter diesem Namen?"). Abtippen fällt damit weg.
|
||||
async function kopieren(text) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
toast(t("open.copied"));
|
||||
} catch {
|
||||
toast(t("open.copyFailed"), "error");
|
||||
}
|
||||
}
|
||||
|
||||
// --- Übertrag -------------------------------------------------------------
|
||||
// Beide Arten führen durch denselben Dialog; nur der Aufruf am Ende
|
||||
// unterscheidet sich. Die Frage nach dem Konto hängt an der Richtung.
|
||||
|
||||
function oeffneUebertrag(aufgabe) {
|
||||
const s = aufgabe.art === "vorschlag"
|
||||
? {
|
||||
art: "vorschlag", id: aufgabe.e.id, kontoId: aufgabe.e.account_id,
|
||||
betrag: aufgabe.e.amount_cents, waehrung: aufgabe.e.currency,
|
||||
text: aufgabe.e.payee, datum: aufgabe.e.date,
|
||||
}
|
||||
: {
|
||||
art: "buchung", id: aufgabe.tx.id, kontoId: aufgabe.tx.account_id,
|
||||
betrag: aufgabe.tx.type === "income"
|
||||
? aufgabe.tx.amount_cents : -aufgabe.tx.amount_cents,
|
||||
waehrung: accountById[aufgabe.tx.account_id]?.currency,
|
||||
text: aufgabe.tx.payee || aufgabe.tx.description, datum: aufgabe.tx.date,
|
||||
};
|
||||
setUebertrag({ ...s, ziel: "" });
|
||||
}
|
||||
|
||||
async function uebertragBuchen() {
|
||||
const { art, id, ziel } = uebertrag;
|
||||
if (!ziel) return;
|
||||
const senden = (trotzdem) => (art === "vorschlag"
|
||||
? api.bookInboxAsTransfer(id, Number(ziel), trotzdem)
|
||||
: api.makeTransactionTransfer(id, Number(ziel), trotzdem));
|
||||
try {
|
||||
await senden(false);
|
||||
} catch (e) {
|
||||
// 409 heisst nachfragen: Der Betrag der Gegenseite ist geschätzt und das
|
||||
// Zielkonto meldet den Zugang selbst. Die Begründung kommt vom Server –
|
||||
// dort steht das Wissen, nicht hier.
|
||||
if (e.status !== 409) { toast(e.message, "error"); return; }
|
||||
if (!(await confirm({
|
||||
title: t("inbox.transferTitle"),
|
||||
message: e.message,
|
||||
confirmLabel: t("inbox.asTransfer"),
|
||||
}))) return;
|
||||
try {
|
||||
await senden(true);
|
||||
} catch (zweiter) {
|
||||
toast(zweiter.message, "error");
|
||||
return;
|
||||
}
|
||||
}
|
||||
setUebertrag(null);
|
||||
toast(t("inbox.transferBooked"));
|
||||
await laden();
|
||||
}
|
||||
|
||||
if (inbox === null) {
|
||||
return <div className="card"><div className="empty-state">…</div></div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="page">
|
||||
<div className="page-head">
|
||||
<h1>{t("inbox.title")}</h1>
|
||||
<p className="muted">{t("inbox.intro")}</p>
|
||||
{rows.some((r) => r.status === "pending" && r.account_id) && (
|
||||
<h1>{t("todo.title")}</h1>
|
||||
<p className="muted">{t("todo.subtitle", { n: aufgaben.length })}</p>
|
||||
{offeneVorschlaege.length > 0 && (
|
||||
<button className="btn primary" onClick={alleBuchen}>
|
||||
<Icon name="check" size={15} /> {t("inbox.bookAll")}
|
||||
</button>
|
||||
@@ -138,6 +238,44 @@ export default function Eingang() {
|
||||
deshalb steht der Vorschlag hier und nicht in der Buchungsliste. */}
|
||||
<Uebertragsvorschlaege baseCurrency={baseCurrency} onChange={laden} />
|
||||
|
||||
{aufgaben.length === 0 ? (
|
||||
<div className="card">
|
||||
<div className="empty-state">
|
||||
<Icon name="check" size={28} />
|
||||
<p>{t("todo.allDone")}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="card">
|
||||
<label className="check-inline" style={{ marginBottom: "var(--sp-3)" }}>
|
||||
<input type="checkbox" checked={merken}
|
||||
onChange={(e) => setMerken(e.target.checked)} />
|
||||
<span>{t("open.rememberKeyword")}</span>
|
||||
</label>
|
||||
|
||||
<div className="account-list">
|
||||
{aufgaben.map((aufgabe) => (
|
||||
<Zeile
|
||||
key={aufgabe.schluessel}
|
||||
aufgabe={aufgabe}
|
||||
accountById={accountById}
|
||||
baseCurrency={baseCurrency}
|
||||
expenseGroups={expenseGroups}
|
||||
incomeGroups={incomeGroups}
|
||||
t={t}
|
||||
onKategorie={(id) => (aufgabe.art === "vorschlag"
|
||||
? zuordnenVorschlag(aufgabe.e, id)
|
||||
: zuordnenBuchung(aufgabe.tx, id))}
|
||||
onBuchen={() => buchen(aufgabe.e)}
|
||||
onUebertrag={() => oeffneUebertrag(aufgabe)}
|
||||
onVerwerfen={() => verwerfen(aufgabe.e)}
|
||||
onKopieren={kopieren}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{uebertrag && (
|
||||
<Modal
|
||||
title={t("inbox.transferTitle")}
|
||||
@@ -157,101 +295,117 @@ export default function Eingang() {
|
||||
<p className="muted small">{t("inbox.transferIntro")}</p>
|
||||
<div className="account-row" style={{ borderBottom: "none" }}>
|
||||
<div className="named-text grow">
|
||||
<div><strong>{uebertrag.item.payee || t("inbox.noText")}</strong></div>
|
||||
<div><strong>{uebertrag.text || t("inbox.noText")}</strong></div>
|
||||
<div className="named-sub">
|
||||
{formatDate(uebertrag.item.date)} ·{" "}
|
||||
{accountById[uebertrag.item.account_id]?.name || "—"}
|
||||
{formatDate(uebertrag.datum)} ·{" "}
|
||||
{accountById[uebertrag.kontoId]?.name || "—"}
|
||||
</div>
|
||||
</div>
|
||||
<Money cents={Math.abs(uebertrag.item.amount_cents)}
|
||||
currency={uebertrag.item.currency}
|
||||
sign={uebertrag.item.amount_cents < 0 ? "neg" : "pos"}
|
||||
<Money cents={Math.abs(uebertrag.betrag)} currency={uebertrag.waehrung}
|
||||
sign={uebertrag.betrag < 0 ? "neg" : "pos"}
|
||||
baseCurrency={baseCurrency} />
|
||||
</div>
|
||||
<label>
|
||||
{/* Die Frage hängt an der Richtung – „wohin" bei einem Abgang,
|
||||
„woher" bei einem Zugang. */}
|
||||
<span>
|
||||
{uebertrag.item.amount_cents < 0
|
||||
{uebertrag.betrag < 0
|
||||
? t("inbox.transferTargetOut")
|
||||
: t("inbox.transferTargetIn")}
|
||||
</span>
|
||||
<AccountSelect
|
||||
accounts={accounts.filter((a) => a.id !== uebertrag.item.account_id)}
|
||||
accounts={accounts.filter((a) => a.id !== uebertrag.kontoId)}
|
||||
value={uebertrag.ziel}
|
||||
onChange={(id) => setUebertrag((u) => ({ ...u, ziel: id ?? "" }))}
|
||||
/>
|
||||
</label>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
{rows.length === 0 ? (
|
||||
<div className="card"><div className="empty-state">{t("inbox.empty")}</div></div>
|
||||
) : (
|
||||
<div className="card">
|
||||
<div className="account-list">
|
||||
{rows.map((item) => {
|
||||
const konto = accountById[item.account_id];
|
||||
const ausgabe = item.amount_cents < 0;
|
||||
return (
|
||||
<div className="account-row" key={item.id}>
|
||||
<IconChip name={konto?.icon || "wallet"} color={konto?.color || "#6b7480"} size={26} />
|
||||
<div className="named-text grow">
|
||||
<div><strong>{item.payee || t("inbox.noText")}</strong></div>
|
||||
<div className="named-sub">
|
||||
{/* Jede Angabe für sich unzertrennlich: Auf dem Telefon
|
||||
brach sonst „Revolut CHF" um oder wurde gekürzt – und
|
||||
genau die Währung im Namen unterscheidet die Konten. */}
|
||||
<span className="nowrap">{formatDate(item.date)}</span>
|
||||
{" · "}
|
||||
<span className="nowrap">{konto?.name || "—"}</span>
|
||||
{item.source === "shortcut" && ` · ${t("inbox.viaShortcut")}`}
|
||||
{item.source === "mail" && ` · ${t("inbox.viaMail")}`}
|
||||
{item.status === "unclear" && ` · ${t("inbox.unclear")}`}
|
||||
{item.status === "booked" && ` · ${t("inbox.booked")}`}
|
||||
</div>
|
||||
</div>
|
||||
<Money cents={Math.abs(item.amount_cents)} currency={item.currency}
|
||||
sign={ausgabe ? "neg" : "pos"} baseCurrency={baseCurrency} />
|
||||
{/* Ein Übertrag ist keine Ausgabe – er bekommt keine
|
||||
Kategorie, also auch keine Auswahl dafür. */}
|
||||
{item.transfer_account_id != null ? (
|
||||
<div className="uebertrag-marke">
|
||||
<Icon name="arrow-left-right" size={14} />
|
||||
<span className="ellipsis">
|
||||
{accountById[item.transfer_account_id]?.name
|
||||
|| t("transfers.linked")}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<CategorySelect
|
||||
groups={ausgabe ? expenseGroups : incomeGroups}
|
||||
value={item.category_id}
|
||||
onChange={(id) => zuordnen(item, id)}
|
||||
/>
|
||||
)}
|
||||
{item.status !== "booked" && item.account_id && (
|
||||
<>
|
||||
<button className="btn sm primary" onClick={() => buchen(item)}>
|
||||
<Icon name="check" size={14} /> {t("inbox.book")}
|
||||
</button>
|
||||
{/* Eine Umbuchung ist keine Ausgabe. Ohne diesen Weg
|
||||
bliebe nur, sie als solche zu kategorisieren. */}
|
||||
<button className="btn sm" title={t("inbox.asTransfer")}
|
||||
onClick={() => setUebertrag({ item, ziel: "" })}>
|
||||
<Icon name="arrow-left-right" size={14} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
<button className="btn sm ghost" title={t("inbox.discard")}
|
||||
onClick={() => verwerfen(item)}>
|
||||
<Icon name="trash" size={15} />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
function Zeile({
|
||||
aufgabe, accountById, baseCurrency, expenseGroups, incomeGroups, t,
|
||||
onKategorie, onBuchen, onUebertrag, onVerwerfen, onKopieren,
|
||||
}) {
|
||||
const vorschlag = aufgabe.art === "vorschlag";
|
||||
const e = aufgabe.e;
|
||||
const tx = aufgabe.tx;
|
||||
|
||||
const kontoId = vorschlag ? e.account_id : tx.account_id;
|
||||
const konto = accountById[kontoId];
|
||||
const betrag = vorschlag ? e.amount_cents : tx.amount_cents;
|
||||
const ausgabe = vorschlag ? betrag < 0 : tx.type !== "income";
|
||||
const text = vorschlag ? e.payee : (tx.payee || tx.description);
|
||||
const uebertragsKonto = vorschlag ? e.transfer_account_id : null;
|
||||
|
||||
return (
|
||||
<div className="account-row">
|
||||
<IconChip name={konto?.icon || "wallet"} color={konto?.color || "#6b7480"} size={26} />
|
||||
<div className="named-text grow">
|
||||
<div className="row" style={{ gap: "var(--sp-2)", alignItems: "center" }}>
|
||||
<strong>{text || t("inbox.noText")}</strong>
|
||||
{text && (
|
||||
<button type="button" className="btn sm ghost" title={t("open.copy")}
|
||||
onClick={() => onKopieren(text)}>
|
||||
<Icon name="copy" size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="named-sub">
|
||||
{/* Jede Angabe für sich unzertrennlich: Auf dem Telefon brach sonst
|
||||
„Revolut CHF" um – und genau die Währung im Namen unterscheidet
|
||||
die Konten. */}
|
||||
<span className="nowrap">{formatDate(aufgabe.datum)}</span>
|
||||
{" · "}
|
||||
<span className="nowrap">{konto?.name || "—"}</span>
|
||||
{" · "}
|
||||
<span className="nowrap">
|
||||
{t(`todo.from.${vorschlag ? e.source : aufgabe.quelle}`, {
|
||||
defaultValue: vorschlag ? e.source : aufgabe.quelle,
|
||||
})}
|
||||
</span>
|
||||
{vorschlag && e.status === "unclear" && ` · ${t("inbox.unclear")}`}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Money cents={Math.abs(betrag)} currency={vorschlag ? e.currency : konto?.currency}
|
||||
sign={ausgabe ? "neg" : "pos"} baseCurrency={baseCurrency} />
|
||||
|
||||
{/* Ein Übertrag ist keine Ausgabe – er bekommt keine Kategorie. */}
|
||||
{uebertragsKonto != null ? (
|
||||
<div className="uebertrag-marke">
|
||||
<Icon name="arrow-left-right" size={14} />
|
||||
<span className="ellipsis">
|
||||
{accountById[uebertragsKonto]?.name || t("transfers.linked")}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<CategorySelect
|
||||
groups={ausgabe ? expenseGroups : incomeGroups}
|
||||
value={vorschlag ? e.category_id : ""}
|
||||
onChange={onKategorie}
|
||||
placeholder={t("open.choose")}
|
||||
/>
|
||||
)}
|
||||
|
||||
{vorschlag && e.account_id && (
|
||||
<button className="btn sm primary" onClick={onBuchen}>
|
||||
<Icon name="check" size={14} /> {t("inbox.book")}
|
||||
</button>
|
||||
)}
|
||||
{/* Eine Umbuchung ist keine Ausgabe. Ohne diesen Weg bliebe nur, sie als
|
||||
solche zu kategorisieren. */}
|
||||
{uebertragsKonto == null && kontoId && (
|
||||
<button className="btn sm" title={t("inbox.asTransfer")} onClick={onUebertrag}>
|
||||
<Icon name="arrow-left-right" size={14} />
|
||||
</button>
|
||||
)}
|
||||
{vorschlag && (
|
||||
<button className="btn sm ghost" title={t("inbox.discard")} onClick={onVerwerfen}>
|
||||
<Icon name="trash" size={15} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user