Scarriffle/certain
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Schlagwörter je Kategorie + auf-/zuklappbares Kategorie-Dropdown

Browse Source 
- Manuelle Schlagwörter je Kategorie (Popup mit Chips, Doppelklick zum Bearbeiten)
- Treffer über Empfänger ODER Verwendungszweck; längstes Schlagwort gewinnt;
  Kind-Filter (Ausgabe/Einnahme); wirken nur bei künftigen Importen
- Lernende Korrektur-Erkennung: ab 5 Anwendungen und >= 1/3 Korrekturen
  erscheint eine Prüf-Meldung in den Einstellungen (Behalten/Entfernen)
- Neue CategorySelect-Komponente (Baum + Suche, per Portal) ersetzt die
  nativen optgroup-Selects in Buchungen und Import-Prüfansicht
- Migration 0006 (source/applied_count/overridden_count/confirmed, match_field any)
- Endpunkte, i18n DE/EN, Tests (test_keywords: 7 neu, gesamt 27 grün)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Guido
2026-08-19 21:31:29 +02:00
co-authored by Claude Opus 4.8
parent f375fc5eaa
commit 37f64999cd
17 changed files with 1137 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/api.js
+8
View File
@@ -141,6 +141,14 @@ export const api = {
updateCategory: (id, body) => request(`/categories/${id}`, { method: "PATCH", body }),
deleteCategory: (id) => request(`/categories/${id}`, { method: "DELETE" }),
// Schlagwörter je Kategorie (manuelle Auto-Zuordnung) + Prüfmeldungen
listKeywords: (categoryId) => request(`/categories/${categoryId}/keywords`),
addKeyword: (categoryId, word) => request(`/categories/${categoryId}/keywords`, { method: "POST", body: { word } }),
updateKeyword: (ruleId, word) => request(`/categories/keywords/${ruleId}`, { method: "PATCH", body: { word } }),
deleteKeyword: (ruleId) => request(`/categories/keywords/${ruleId}`, { method: "DELETE" }),
flaggedKeywords: () => request("/categories/keywords/flagged"),
confirmKeyword: (ruleId) => request(`/categories/keywords/${ruleId}/confirm`, { method: "POST" }),
// Transaktionen
listTransactions: (params = {}) => {
const qs = new URLSearchParams();
web/src/components/CategorySelect.jsx
+198
View File
@@ -0,0 +1,198 @@
import { useEffect, useMemo, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { useTranslation } from "react-i18next";
import Icon from "./Icon";
import IconChip from "./IconChip";
// Auf-/zuklappbares Kategorie-Dropdown (Gruppe -> Kategorien als Baum) mit
// Suchfeld. Ersetzt das native <select> mit optgroup, das die oberste Gruppe
// abgesetzt wirken ließ. Das Panel wird per Portal mit fester Position gerendert,
// damit es in scrollbaren Tabellen (Import-Prüfansicht) nicht abgeschnitten wird.
export default function CategorySelect({
groups = [],
value,
onChange,
allowNone = false,
noneLabel = "—",
placeholder = "—",
minWidth = 0,
disabled = false,
}) {
const { t } = useTranslation();
const selectedId = value === "" || value == null ? null : Number(value);
const [open, setOpen] = useState(false);
const [q, setQ] = useState("");
const [collapsed, setCollapsed] = useState(() => new Set());
const [pos, setPos] = useState(null);
const btnRef = useRef(null);
const panelRef = useRef(null);
const searchRef = useRef(null);
const byId = useMemo(() => {
const m = {};
for (const g of groups) for (const c of g.categories) m[c.id] = c;
return m;
}, [groups]);
const sel = selectedId != null ? byId[selectedId] : null;
function computePos() {
const el = btnRef.current;
if (!el) return;
const r = el.getBoundingClientRect();
const width = Math.max(r.width, 260);
const spaceBelow = window.innerHeight - r.bottom;
const spaceAbove = r.top;
const desired = 340;
let top;
let maxHeight;
if (spaceBelow >= 220 || spaceBelow >= spaceAbove) {
maxHeight = Math.min(desired, spaceBelow - 10);
top = r.bottom + 4;
} else {
maxHeight = Math.min(desired, spaceAbove - 10);
top = r.top - 4 - maxHeight;
}
let left = r.left;
if (left + width > window.innerWidth - 8) left = window.innerWidth - 8 - width;
if (left < 8) left = 8;
setPos({ left, top, width, maxHeight });
}
function openPanel() {
if (disabled) return;
computePos();
setQ("");
setOpen(true);
}
useEffect(() => {
if (!open) return undefined;
searchRef.current?.focus();
const onDown = (e) => {
if (panelRef.current?.contains(e.target) || btnRef.current?.contains(e.target)) return;
setOpen(false);
};
const onKey = (e) => e.key === "Escape" && setOpen(false);
const onScrollResize = () => setOpen(false);
document.addEventListener("mousedown", onDown);
document.addEventListener("keydown", onKey);
// capture=true: fängt auch das Scrollen innerhalb der Tabelle ab.
window.addEventListener("scroll", onScrollResize, true);
window.addEventListener("resize", onScrollResize);
return () => {
document.removeEventListener("mousedown", onDown);
document.removeEventListener("keydown", onKey);
window.removeEventListener("scroll", onScrollResize, true);
window.removeEventListener("resize", onScrollResize);
};
}, [open]);
function choose(id) {
onChange(id);
setOpen(false);
}
function toggleGroup(id) {
setCollapsed((prev) => {
const next = new Set(prev);
next.has(id) ? next.delete(id) : next.add(id);
return next;
});
}
const ql = q.trim().toLowerCase();
return (
<div className="catsel" style={{ minWidth }}>
<button
type="button"
ref={btnRef}
className={`catsel-btn${open ? " open" : ""}`}
onClick={() => (open ? setOpen(false) : openPanel())}
disabled={disabled}
>
{sel ? (
<span className="catsel-value">
<IconChip name={sel.icon} color={sel.color} size={22} />
<span className="ellipsis">{sel.name}</span>
</span>
) : (
<span className="catsel-value muted ellipsis">{placeholder}</span>
)}
<Icon name="chevron-down" size={15} className="catsel-caret" />
</button>
{open &&
pos &&
createPortal(
<div
ref={panelRef}
className="catsel-panel"
style={{ left: pos.left, top: pos.top, width: pos.width, maxHeight: pos.maxHeight }}
>
<div className="catsel-search">
<Icon name="search" size={14} />
<input
ref={searchRef}
value={q}
onChange={(e) => setQ(e.target.value)}
placeholder={t("categories.searchPlaceholder")}
/>
</div>
<div className="catsel-list">
{allowNone && (
<button
type="button"
className={`catsel-opt${selectedId == null ? " selected" : ""}`}
onClick={() => choose(null)}
>
<span className="muted ellipsis">{noneLabel}</span>
{selectedId == null && <Icon name="check" size={15} className="catsel-check" />}
</button>
)}
{groups.map((g) => {
const cats = ql
? g.categories.filter((c) => c.name.toLowerCase().includes(ql))
: g.categories;
if (ql && cats.length === 0) return null;
const isCollapsed = !ql && collapsed.has(g.id);
return (
<div className="catsel-group" key={g.id}>
<button
type="button"
className="catsel-group-head"
onClick={() => toggleGroup(g.id)}
>
<Icon
name="chevron-down"
size={14}
className={`catsel-gchev${isCollapsed ? " collapsed" : ""}`}
/>
<IconChip name={g.icon} color={g.color} size={18} />
<span className="ellipsis">{g.name}</span>
</button>
{!isCollapsed &&
cats.map((c) => (
<button
type="button"
key={c.id}
className={`catsel-opt${selectedId === c.id ? " selected" : ""}`}
onClick={() => choose(c.id)}
>
<IconChip name={c.icon} color={c.color} size={20} />
<span className="ellipsis">{c.name}</span>
{selectedId === c.id && <Icon name="check" size={15} className="catsel-check" />}
</button>
))}
</div>
);
})}
{groups.length === 0 && <div className="catsel-empty muted small">{t("categories.emptyGroup")}</div>}
</div>
</div>,
document.body
)}
</div>
);
}
web/src/components/Icon.jsx
+8
View File
@@ -71,6 +71,14 @@ const PATHS = {
</>
),
"chevron-right": <path d="m9 18 6-6-6-6" />,
"chevron-down": <path d="m6 9 6 6 6-6" />,
tags: (
<>
<path d="M9 5H2v7l6.29 6.29c.94.94 2.48.94 3.42 0l3.58-3.58c.94-.94.94-2.48 0-3.42L9 5Z" />
<path d="M6 9.01V9" />
<path d="m15 5 6.3 6.3a2.4 2.4 0 0 1 0 3.4L17 19" />
</>
),
"refresh-ccw": (
<>
<path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
web/src/finance.css
+216
View File
@@ -571,3 +571,219 @@ tr.row-dup {
border-radius: var(--radius-sm);
margin-top: var(--sp-2);
}
/* ---------- Kategorie-Auswahl (auf-/zuklappbarer Baum, Ersatz für <select>) ---------- */
.catsel {
width: 100%;
}
.catsel-btn {
width: 100%;
margin-top: 5px;
display: flex;
align-items: center;
gap: var(--sp-2);
padding: 7px 10px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text);
font: inherit;
text-align: left;
cursor: pointer;
transition: border-color .12s, box-shadow .12s;
}
.catsel-btn:hover:not(:disabled) {
border-color: var(--accent);
}
.catsel-btn:disabled {
opacity: 0.6;
cursor: default;
}
.catsel-btn.open {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.catsel-value {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: var(--sp-2);
}
.catsel-caret {
flex: 0 0 auto;
color: var(--muted);
}
.catsel-panel {
position: fixed;
z-index: 1000;
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
overflow: hidden;
}
.catsel-search {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: 8px 10px;
border-bottom: 1px solid var(--border);
color: var(--muted);
flex: 0 0 auto;
}
.catsel-search input {
width: 100%;
border: none;
background: none;
outline: none;
margin: 0;
padding: 0;
color: var(--text);
font: inherit;
}
.catsel-list {
overflow-y: auto;
padding: 5px;
}
.catsel-group + .catsel-group {
margin-top: 2px;
}
.catsel-group-head {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
padding: 6px;
border: none;
background: none;
cursor: pointer;
color: var(--muted);
font-weight: 650;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.catsel-group-head:hover {
color: var(--text);
}
.catsel-gchev {
flex: 0 0 auto;
transition: transform .12s ease;
}
.catsel-gchev.collapsed {
transform: rotate(-90deg);
}
.catsel-opt {
display: flex;
align-items: center;
gap: var(--sp-2);
width: 100%;
padding: 6px 8px 6px 22px;
border: none;
border-radius: var(--radius-sm);
background: none;
color: var(--text);
font: inherit;
text-align: left;
cursor: pointer;
}
.catsel-opt:hover {
background: var(--surface-2);
}
.catsel-opt.selected {
background: var(--accent-soft);
color: var(--accent);
font-weight: 600;
}
.catsel-check {
margin-left: auto;
flex: 0 0 auto;
color: var(--accent);
}
.catsel-empty {
padding: 10px;
}
/* ---------- Schlagwörter (Kategorie-Popup + Prüfmeldungen) ---------- */
.kw-add {
display: flex;
gap: var(--sp-2);
margin-bottom: var(--sp-3);
}
.kw-add input {
flex: 1 1 auto;
min-width: 0;
margin-top: 0;
}
.kw-chips {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
}
.kw-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 6px 4px 11px;
border-radius: 20px;
background: var(--surface-2);
border: 1px solid var(--border);
font-size: 0.85rem;
}
.kw-chip button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
padding: 0;
margin: 0;
border: none;
border-radius: 50%;
background: none;
color: var(--muted);
cursor: pointer;
}
.kw-chip button:hover {
background: var(--danger);
color: #fff;
}
.kw-chip.editing {
padding: 2px 6px;
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent-soft);
}
.kw-chip.editing input {
width: 12ch;
min-width: 70px;
margin: 0;
padding: 2px 2px;
border: none;
background: none;
outline: none;
font: inherit;
font-size: 0.85rem;
color: var(--text);
}
.kw-flag {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3) 0;
border-bottom: 1px solid var(--border);
}
.kw-flag:last-child {
border-bottom: none;
}
.kw-flag-main {
flex: 1;
min-width: 0;
}
.kw-flag-word {
font-weight: 600;
}
web/src/locales/de.json
+14 -2
View File
@@ -79,7 +79,12 @@
"exportTxnJson": "Buchungen (JSON)",
"exportAll": "Alle Daten (JSON)",
"dbBackup": "Komplettes DB-Backup herunterladen",
"dbBackupHint": "Vollständige Datenbank aller Nutzer (nur Admin) – zum Wiederherstellen sichern."
"dbBackupHint": "Vollständige Datenbank aller Nutzer (nur Admin) – zum Wiederherstellen sichern.",
"keywordReview": "Schlagwörter prüfen",
"keywordReviewHint": "Diese Schlagwörter werden auffällig oft wieder wegkorrigiert – stimmen sie vielleicht nicht mehr?",
"keywordCorrected": "{{overridden}} von {{applied}} Buchungen korrigiert",
"keep": "Behalten",
"remove": "Entfernen"
},
"dashboard": {
"title": "Übersicht",
@@ -153,7 +158,14 @@
"expense": "Ausgabe",
"emptyGroup": "Keine Kategorien in dieser Gruppe.",
"deleteConfirm": "Diese Kategorie löschen?",
"deleteGroupConfirm": "Diese Gruppe samt aller Kategorien löschen?"
"deleteGroupConfirm": "Diese Gruppe samt aller Kategorien löschen?",
"keywordsBtn": "Schlagwörter",
"keywordsTitle": "Schlagwörter – {{name}}",
"keywordsHint": "Buchungen, die eines dieser Wörter im Empfänger oder Verwendungszweck enthalten, werden bei künftigen Importen automatisch dieser Kategorie zugeordnet.",
"keywordAdd": "Wort eingeben und Enter",
"keywordEmpty": "Noch keine Schlagwörter.",
"keywordEditHint": "Doppelklick auf ein Schlagwort, um es zu bearbeiten.",
"searchPlaceholder": "Kategorie suchen …"
},
"transactions": {
"title": "Buchungen",
web/src/locales/en.json
+14 -2
View File
@@ -79,7 +79,12 @@
"exportTxnJson": "Transactions (JSON)",
"exportAll": "All data (JSON)",
"dbBackup": "Download full DB backup",
"dbBackupHint": "Complete database of all users (admin only) — keep it for restore."
"dbBackupHint": "Complete database of all users (admin only) — keep it for restore.",
"keywordReview": "Review keywords",
"keywordReviewHint": "These keywords keep getting corrected away — maybe they no longer fit?",
"keywordCorrected": "{{overridden}} of {{applied}} transactions corrected",
"keep": "Keep",
"remove": "Remove"
},
"dashboard": {
"title": "Overview",
@@ -153,7 +158,14 @@
"expense": "Expense",
"emptyGroup": "No categories in this group.",
"deleteConfirm": "Delete this category?",
"deleteGroupConfirm": "Delete this group and all its categories?"
"deleteGroupConfirm": "Delete this group and all its categories?",
"keywordsBtn": "Keywords",
"keywordsTitle": "Keywords – {{name}}",
"keywordsHint": "Transactions whose payee or description contains one of these words are automatically assigned to this category on future imports.",
"keywordAdd": "Type a word and press Enter",
"keywordEmpty": "No keywords yet.",
"keywordEditHint": "Double-click a keyword to edit it.",
"searchPlaceholder": "Search category …"
},
"transactions": {
"title": "Transactions",
web/src/pages/Categories.jsx
+134
View File
@@ -8,12 +8,141 @@ import IconChip from "../components/IconChip";
import Modal from "../components/Modal";
import IconPicker, { CATEGORY_ICONS } from "../components/IconPicker";
// Popup zum Pflegen der Schlagwörter einer Kategorie. Wörter werden beim Import
// gegen Empfänger/Verwendungszweck geprüft und ordnen Buchungen automatisch zu.
function KeywordModal({ category, onClose }) {
const { t } = useTranslation();
const toast = useToast();
const [words, setWords] = useState([]);
const [input, setInput] = useState("");
const [busy, setBusy] = useState(false);
const [editId, setEditId] = useState(null);
const [editVal, setEditVal] = useState("");
async function laden() {
try { setWords(await api.listKeywords(category.id)); }
catch (err) { toast(err.message, "error"); }
}
useEffect(() => { laden(); }, [category.id]);
async function hinzufuegen() {
const w = input.trim();
if (!w) return;
setBusy(true);
try {
await api.addKeyword(category.id, w);
setInput("");
await laden();
} catch (err) {
toast(err.message, "error");
} finally {
setBusy(false);
}
}
async function entfernen(id) {
try {
await api.deleteKeyword(id);
setWords((ws) => ws.filter((x) => x.id !== id));
} catch (err) {
toast(err.message, "error");
}
}
function starteBearbeiten(w) {
setEditId(w.id);
setEditVal(w.word);
}
function abbrechenBearbeiten() {
setEditId(null);
setEditVal("");
}
async function speichernBearbeiten(id) {
const val = editVal.trim();
const orig = words.find((x) => x.id === id);
if (!val || (orig && val === orig.word)) { abbrechenBearbeiten(); return; }
try {
await api.updateKeyword(id, val);
abbrechenBearbeiten();
await laden();
} catch (err) {
toast(err.message, "error");
abbrechenBearbeiten();
await laden();
}
}
return (
<Modal
title={t("categories.keywordsTitle", { name: category.name })}
onClose={onClose}
footer={<button className="btn primary" onClick={onClose}>{t("common.close")}</button>}
>
<p className="muted small" style={{ marginTop: 0 }}>{t("categories.keywordsHint")}</p>
<div className="kw-add">
{/* eslint-disable-next-line jsx-a11y/no-autofocus */}
<input
autoFocus
value={input}
placeholder={t("categories.keywordAdd")}
onChange={(e) => setInput(e.target.value)}
onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); hinzufuegen(); } }}
/>
<button className="btn" onClick={hinzufuegen} disabled={busy || !input.trim()}>
<Icon name="plus" size={15} />
</button>
</div>
{words.length === 0 ? (
<div className="muted small">{t("categories.keywordEmpty")}</div>
) : (
<>
<div className="kw-chips">
{words.map((w) =>
editId === w.id ? (
<span className="kw-chip editing" key={w.id}>
{/* eslint-disable-next-line jsx-a11y/no-autofocus */}
<input
autoFocus
value={editVal}
onFocus={(e) => e.target.select()}
onChange={(e) => setEditVal(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter") { e.preventDefault(); speichernBearbeiten(w.id); }
else if (e.key === "Escape") { e.preventDefault(); abbrechenBearbeiten(); }
}}
onBlur={() => speichernBearbeiten(w.id)}
/>
</span>
) : (
<span
className="kw-chip"
key={w.id}
title={t("categories.keywordEditHint")}
onDoubleClick={() => starteBearbeiten(w)}
>
{w.word}
<button type="button" title={t("common.delete")} onClick={() => entfernen(w.id)}>
<Icon name="close" size={13} />
</button>
</span>
)
)}
</div>
<p className="muted small" style={{ marginTop: "var(--sp-2)", marginBottom: 0 }}>
{t("categories.keywordEditHint")}
</p>
</>
)}
</Modal>
);
}
export default function Categories() {
const { t } = useTranslation();
const confirm = useConfirm();
const toast = useToast();
const [groups, setGroups] = useState([]);
const [modal, setModal] = useState(null); // {type:'group'|'category', editing, groupId, form}
const [keywordCat, setKeywordCat] = useState(null); // Kategorie fürs Schlagwort-Popup
async function laden() {
try {
@@ -103,6 +232,9 @@ export default function Categories() {
<div className="cat-row" key={c.id}>
<IconChip name={c.icon} color={c.color} size={28} />
<span className="grow">{c.name}</span>
<button className="btn sm ghost" title={t("categories.keywordsBtn")} onClick={() => setKeywordCat(c)}>
<Icon name="tags" size={14} />
</button>
<button className="btn sm ghost" title={t("common.edit")} onClick={() => openCategory(g.id, c)}>
<Icon name="edit" size={14} />
</button>
@@ -164,6 +296,8 @@ export default function Categories() {
</form>
</Modal>
)}
{keywordCat && <KeywordModal category={keywordCat} onClose={() => setKeywordCat(null)} />}
</div>
);
}
web/src/pages/Import.jsx
+10 -8
View File
@@ -5,6 +5,7 @@ import { useSettings } from "../settings";
import { useConfirm } from "../confirm";
import { useToast } from "../toast";
import Icon from "../components/Icon";
import CategorySelect from "../components/CategorySelect";
import { formatMoney } from "../format";
const DATE_FORMATS = [
@@ -421,14 +422,15 @@ export default function Import() {
{accounts.filter((a) => a.id !== Number(accountId)).map((a) => <option key={a.id} value={a.id}>{a.name}</option>)}
</select>
) : (
<select value={r.category_id || ""} onChange={(e) => updateRow(idx, { category_id: e.target.value ? Number(e.target.value) : null })} style={{ minWidth: 150 }}>
<option value="">{t("transactions.uncategorized")}</option>
{(r.type === "income" ? incomeGroups : expenseGroups).map((g) => (
<optgroup key={g.id} label={g.name}>
{g.categories.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
</optgroup>
))}
</select>
<CategorySelect
groups={r.type === "income" ? incomeGroups : expenseGroups}
value={r.category_id || ""}
onChange={(id) => updateRow(idx, { category_id: id != null ? Number(id) : null })}
allowNone
noneLabel={t("transactions.uncategorized")}
placeholder={t("transactions.uncategorized")}
minWidth={180}
/>
)}
</td>
</tr>
web/src/pages/Settings.jsx
+41
View File
@@ -1,3 +1,4 @@
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useSettings } from "../settings";
import { useAuth } from "../auth";
@@ -10,6 +11,22 @@ export default function Settings() {
const s = useSettings();
const { isAdmin } = useAuth();
const toast = useToast();
const [flagged, setFlagged] = useState([]);
async function ladenFlagged() {
try { setFlagged(await api.flaggedKeywords()); }
catch { /* still ignorieren – nicht kritisch für die Einstellungen */ }
}
useEffect(() => { ladenFlagged(); }, []);
async function keywordBehalten(id) {
try { await api.confirmKeyword(id); setFlagged((f) => f.filter((x) => x.id !== id)); }
catch (err) { toast(err.message, "error"); }
}
async function keywordEntfernen(id) {
try { await api.deleteKeyword(id); setFlagged((f) => f.filter((x) => x.id !== id)); }
catch (err) { toast(err.message, "error"); }
}
async function set(key, value) {
try {
@@ -32,6 +49,30 @@ export default function Settings() {
<div>
<h1>{t("settings.title")}</h1>
{flagged.length > 0 && (
<div className="card" style={{ maxWidth: 520, marginBottom: "var(--sp-4)", borderColor: "var(--danger)" }}>
<h2 style={{ display: "flex", alignItems: "center", gap: "var(--sp-2)", marginTop: 0 }}>
<Icon name="alert" size={18} /> {t("settings.keywordReview")}
</h2>
<p className="muted small">{t("settings.keywordReviewHint")}</p>
{flagged.map((f) => (
<div className="kw-flag" key={f.id}>
<div className="kw-flag-main">
<div className="ellipsis">
<span className="kw-flag-word">{f.word}</span>
<Icon name="chevron-right" size={12} /> {f.category_name}
</div>
<div className="muted small">
{t("settings.keywordCorrected", { overridden: f.overridden_count, applied: f.applied_count })}
</div>
</div>
<button className="btn sm" onClick={() => keywordBehalten(f.id)}>{t("settings.keep")}</button>
<button className="btn sm danger" onClick={() => keywordEntfernen(f.id)}>{t("settings.remove")}</button>
</div>
))}
</div>
)}
<div className="card" style={{ maxWidth: 520 }}>
<label>
<span>{t("settings.baseCurrency")}</span>
web/src/pages/Transactions.jsx
+15 -15
View File
@@ -8,6 +8,7 @@ import Icon from "../components/Icon";
import IconChip from "../components/IconChip";
import Money from "../components/Money";
import Modal from "../components/Modal";
import CategorySelect from "../components/CategorySelect";
import { centsToInput, parseAmountToCents, todayIso } from "../format";
const TYPES = ["expense", "income", "transfer"];
@@ -321,14 +322,14 @@ export default function Transactions() {
) : (
<label>
<span>{t("transactions.category")}</span>
<select value={form.category_id} onChange={(e) => setForm({ ...form, category_id: e.target.value })}>
<option value="">{t("transactions.uncategorized")}</option>
{catOptions.map((g) => (
<optgroup key={g.id} label={g.name}>
{g.categories.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
</optgroup>
))}
</select>
<CategorySelect
groups={catOptions}
value={form.category_id}
onChange={(id) => setForm({ ...form, category_id: id != null ? String(id) : "" })}
allowNone
noneLabel={t("transactions.uncategorized")}
placeholder={t("transactions.uncategorized")}
/>
</label>
)}
@@ -357,13 +358,12 @@ export default function Transactions() {
{form.budget_as_expense && (
<label>
<span>{t("transactions.budgetCategory")}</span>
<select value={form.budget_category_id} onChange={(e) => setForm({ ...form, budget_category_id: e.target.value })}>
{expenseGroups.map((g) => (
<optgroup key={g.id} label={g.name}>
{g.categories.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
</optgroup>
))}
</select>
<CategorySelect
groups={expenseGroups}
value={form.budget_category_id}
onChange={(id) => setForm({ ...form, budget_category_id: id != null ? String(id) : "" })}
placeholder={t("transactions.budgetCategory")}
/>
</label>
)}
</div>