feat: Phase 4 – CSV-Import (Templates, Prüfansicht, Duplikat/Transfer-Erkennung, Undo)
Backend: - Modelle + Migration 0005: import_templates, import_batches, categorization_rules; transactions um import_batch_id + import_hash erweitert. - services/csv_import: Datei parsen (Trennzeichen, Dezimal-/Datumsformat, Kodierung, Header/Skip, Vorzeichen vs. Soll/Haben), Vorschau mit Duplikat-Erkennung (Hash), interner-Transfer-Erkennung via IBAN, lernender Auto-Kategorisierung; Buchen mit Batch und Undo. - routers/imports: Templates (CRUD), Roh-Vorschau, Prüf-Vorschau, Buchen, Verlauf, Rückgängig. pytest: Parsing, Duplikate, Transfer, Buchen, Undo, Lernen. Frontend: - Import-Seite: Konto+Datei, Format/Spaltenzuordnung (mit Roh-Vorschau), editierbare Prüfansicht (Kategorie/Typ/Zielkonto, Duplikate markiert), Buchen, Import-Verlauf mit Undo; Vorlagen speichern; i18n DE/EN. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Guido
Claude Opus 4.8
@@ -0,0 +1,397 @@
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { api } from "../api";
|
||||
import { useSettings } from "../settings";
|
||||
import { useConfirm } from "../confirm";
|
||||
import { useToast } from "../toast";
|
||||
import Icon from "../components/Icon";
|
||||
import { formatMoney } from "../format";
|
||||
|
||||
const DATE_FORMATS = [
|
||||
{ v: "%d.%m.%Y", l: "TT.MM.JJJJ" },
|
||||
{ v: "%Y-%m-%d", l: "JJJJ-MM-TT" },
|
||||
{ v: "%d/%m/%Y", l: "TT/MM/JJJJ" },
|
||||
{ v: "%m/%d/%Y", l: "MM/TT/JJJJ" },
|
||||
{ v: "%d.%m.%y", l: "TT.MM.JJ" },
|
||||
];
|
||||
|
||||
function defaultConfig() {
|
||||
return {
|
||||
delimiter: ";",
|
||||
decimal_sep: ",",
|
||||
date_format: "%d.%m.%Y",
|
||||
encoding: "utf-8",
|
||||
has_header: true,
|
||||
skip_rows: 0,
|
||||
amount_mode: "signed",
|
||||
column_map: {},
|
||||
};
|
||||
}
|
||||
|
||||
export default function Import() {
|
||||
const { t } = useTranslation();
|
||||
const { formatDate } = useSettings();
|
||||
const confirm = useConfirm();
|
||||
const toast = useToast();
|
||||
const fileRef = useRef(null);
|
||||
|
||||
const [accounts, setAccounts] = useState([]);
|
||||
const [groups, setGroups] = useState([]);
|
||||
const [templates, setTemplates] = useState([]);
|
||||
const [batches, setBatches] = useState([]);
|
||||
|
||||
const [accountId, setAccountId] = useState("");
|
||||
const [file, setFile] = useState(null);
|
||||
const [config, setConfig] = useState(defaultConfig());
|
||||
const [raw, setRaw] = useState(null);
|
||||
const [rows, setRows] = useState(null);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [saveName, setSaveName] = useState("");
|
||||
|
||||
const accountById = useMemo(() => Object.fromEntries(accounts.map((a) => [a.id, a])), [accounts]);
|
||||
|
||||
async function loadStamm() {
|
||||
try {
|
||||
const [a, g, tp, b] = await Promise.all([
|
||||
api.listAccounts(), api.listCategories(), api.importTemplates(), api.importBatches(),
|
||||
]);
|
||||
setAccounts(a); setGroups(g); setTemplates(tp); setBatches(b);
|
||||
if (a[0] && !accountId) setAccountId(String(a[0].id));
|
||||
} catch (e) { toast(e.message, "error"); }
|
||||
}
|
||||
useEffect(() => { loadStamm(); }, []);
|
||||
|
||||
function setCfg(patch) { setConfig((c) => ({ ...c, ...patch })); }
|
||||
function setCol(field, value) {
|
||||
setConfig((c) => ({ ...c, column_map: { ...c.column_map, [field]: value === "" ? null : Number(value) } }));
|
||||
}
|
||||
|
||||
function applyTemplate(id) {
|
||||
const tpl = templates.find((x) => String(x.id) === String(id));
|
||||
if (!tpl) return;
|
||||
setConfig({
|
||||
delimiter: tpl.delimiter, decimal_sep: tpl.decimal_sep, date_format: tpl.date_format,
|
||||
encoding: tpl.encoding, has_header: tpl.has_header, skip_rows: tpl.skip_rows,
|
||||
amount_mode: tpl.amount_mode, column_map: tpl.column_map || {},
|
||||
});
|
||||
}
|
||||
|
||||
function baseForm() {
|
||||
const fd = new FormData();
|
||||
fd.append("file", file);
|
||||
fd.append("delimiter", config.delimiter);
|
||||
fd.append("encoding", config.encoding);
|
||||
fd.append("has_header", config.has_header ? "true" : "false");
|
||||
fd.append("skip_rows", String(config.skip_rows || 0));
|
||||
return fd;
|
||||
}
|
||||
|
||||
async function loadRaw() {
|
||||
if (!file) { toast(t("import.needFile"), "error"); return; }
|
||||
setBusy(true);
|
||||
try {
|
||||
setRaw(await api.importRaw(baseForm()));
|
||||
setRows(null);
|
||||
} catch (e) { toast(e.message, "error"); } finally { setBusy(false); }
|
||||
}
|
||||
|
||||
async function loadPreview() {
|
||||
if (!file || !accountId) { toast(t("import.needFileAccount"), "error"); return; }
|
||||
setBusy(true);
|
||||
try {
|
||||
const fd = baseForm();
|
||||
fd.append("account_id", accountId);
|
||||
fd.append("decimal_sep", config.decimal_sep);
|
||||
fd.append("date_format", config.date_format);
|
||||
fd.append("amount_mode", config.amount_mode);
|
||||
fd.append("column_map", JSON.stringify(config.column_map));
|
||||
const res = await api.importPreview(fd);
|
||||
setRows(res.rows.map((r) => ({ ...r })));
|
||||
} catch (e) { toast(e.message, "error"); } finally { setBusy(false); }
|
||||
}
|
||||
|
||||
async function commit() {
|
||||
setBusy(true);
|
||||
try {
|
||||
const batch = await api.importCommit({
|
||||
account_id: Number(accountId),
|
||||
template_id: null,
|
||||
filename: file?.name || "",
|
||||
rows,
|
||||
});
|
||||
toast(t("import.imported", { n: batch.imported_count }));
|
||||
setRows(null); setRaw(null); setFile(null);
|
||||
if (fileRef.current) fileRef.current.value = "";
|
||||
loadStamm();
|
||||
} catch (e) { toast(e.message, "error"); } finally { setBusy(false); }
|
||||
}
|
||||
|
||||
async function saveTemplate() {
|
||||
if (!saveName.trim()) { toast(t("import.templateName"), "error"); return; }
|
||||
try {
|
||||
await api.createImportTemplate({ name: saveName.trim(), ...config });
|
||||
setSaveName("");
|
||||
setTemplates(await api.importTemplates());
|
||||
toast(t("settings.saved"));
|
||||
} catch (e) { toast(e.message, "error"); }
|
||||
}
|
||||
|
||||
async function undo(b) {
|
||||
if (!(await confirm({ title: t("import.undo"), message: t("import.undoConfirm", { file: b.filename }), danger: true, confirmLabel: t("import.undo") }))) return;
|
||||
try { await api.undoImportBatch(b.id); loadStamm(); } catch (e) { toast(e.message, "error"); }
|
||||
}
|
||||
|
||||
const colOptions = useMemo(() => {
|
||||
const n = raw ? Math.max(raw.header?.length || 0, ...(raw.rows || []).map((r) => r.length), 0) : 0;
|
||||
return Array.from({ length: n }, (_, i) => ({
|
||||
i, label: `${i}${raw?.header?.[i] ? ` · ${raw.header[i]}` : ""}`,
|
||||
}));
|
||||
}, [raw]);
|
||||
|
||||
const expenseGroups = useMemo(() => groups.filter((g) => g.kind === "expense"), [groups]);
|
||||
const incomeGroups = useMemo(() => groups.filter((g) => g.kind === "income"), [groups]);
|
||||
|
||||
const includeCount = rows ? rows.filter((r) => r.include).length : 0;
|
||||
|
||||
function updateRow(idx, patch) {
|
||||
setRows((rs) => rs.map((r, i) => (i === idx ? { ...r, ...patch } : r)));
|
||||
}
|
||||
|
||||
const acc = accountById[Number(accountId)];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>{t("import.title")}</h1>
|
||||
|
||||
{/* Schritt 1: Konto + Datei */}
|
||||
<div className="card">
|
||||
<h2>{t("import.step1")}</h2>
|
||||
<div className="row">
|
||||
<label className="grow">
|
||||
<span>{t("import.account")}</span>
|
||||
<select value={accountId} onChange={(e) => setAccountId(e.target.value)}>
|
||||
{accounts.map((a) => <option key={a.id} value={a.id}>{a.name} ({a.currency})</option>)}
|
||||
</select>
|
||||
</label>
|
||||
<label className="grow">
|
||||
<span>{t("import.file")}</span>
|
||||
<input ref={fileRef} type="file" accept=".csv,text/csv,text/plain"
|
||||
onChange={(e) => { setFile(e.target.files?.[0] || null); setRaw(null); setRows(null); }} />
|
||||
</label>
|
||||
</div>
|
||||
{templates.length > 0 && (
|
||||
<label>
|
||||
<span>{t("import.template")}</span>
|
||||
<select defaultValue="" onChange={(e) => applyTemplate(e.target.value)}>
|
||||
<option value="">{t("import.templateManual")}</option>
|
||||
{templates.map((tp) => <option key={tp.id} value={tp.id}>{tp.name}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Schritt 2: Format */}
|
||||
<div className="card">
|
||||
<h2>{t("import.step2")}</h2>
|
||||
<div className="row">
|
||||
<label>
|
||||
<span>{t("import.delimiter")}</span>
|
||||
<select value={config.delimiter} onChange={(e) => setCfg({ delimiter: e.target.value })}>
|
||||
<option value=";">Semikolon ;</option>
|
||||
<option value=",">Komma ,</option>
|
||||
<option value={"\t"}>Tab</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>{t("import.decimal")}</span>
|
||||
<select value={config.decimal_sep} onChange={(e) => setCfg({ decimal_sep: e.target.value })}>
|
||||
<option value=",">Komma (1.234,56)</option>
|
||||
<option value=".">Punkt (1,234.56)</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>{t("import.dateFormat")}</span>
|
||||
<select value={config.date_format} onChange={(e) => setCfg({ date_format: e.target.value })}>
|
||||
{DATE_FORMATS.map((f) => <option key={f.v} value={f.v}>{f.l}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div className="row">
|
||||
<label>
|
||||
<span>{t("import.encoding")}</span>
|
||||
<select value={config.encoding} onChange={(e) => setCfg({ encoding: e.target.value })}>
|
||||
<option value="utf-8">UTF-8</option>
|
||||
<option value="latin-1">ISO-8859-1 / Latin-1</option>
|
||||
<option value="cp1252">Windows-1252</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>{t("import.amountMode")}</span>
|
||||
<select value={config.amount_mode} onChange={(e) => setCfg({ amount_mode: e.target.value })}>
|
||||
<option value="signed">{t("import.modeSigned")}</option>
|
||||
<option value="debit_credit">{t("import.modeDebitCredit")}</option>
|
||||
<option value="abs_expense">{t("import.modeAbsExpense")}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label style={{ maxWidth: 160 }}>
|
||||
<span>{t("import.skipRows")}</span>
|
||||
<input type="number" min="0" value={config.skip_rows}
|
||||
onChange={(e) => setCfg({ skip_rows: Math.max(0, Number(e.target.value) || 0) })} />
|
||||
</label>
|
||||
<label className="checkline" style={{ alignSelf: "flex-end", marginBottom: 14 }}>
|
||||
<input type="checkbox" checked={config.has_header}
|
||||
onChange={(e) => setCfg({ has_header: e.target.checked })} />
|
||||
<span>{t("import.hasHeader")}</span>
|
||||
</label>
|
||||
</div>
|
||||
<button className="btn" onClick={loadRaw} disabled={busy || !file}>
|
||||
<Icon name="search" size={15} /> {t("import.readFile")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Schritt 3: Spaltenzuordnung */}
|
||||
{raw && (
|
||||
<div className="card">
|
||||
<h2>{t("import.step3")}</h2>
|
||||
<div className="table-scroll">
|
||||
<table className="table raw-table">
|
||||
<thead>
|
||||
<tr>{colOptions.map((c) => <th key={c.i}>{c.label}</th>)}</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{raw.rows.map((r, ri) => (
|
||||
<tr key={ri}>{colOptions.map((c) => <td key={c.i}>{r[c.i] ?? ""}</td>)}</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="map-grid">
|
||||
{[
|
||||
["date", t("import.colDate"), true],
|
||||
...(config.amount_mode === "debit_credit"
|
||||
? [["debit", t("import.colDebit"), true], ["credit", t("import.colCredit"), true]]
|
||||
: [["amount", t("import.colAmount"), true]]),
|
||||
["payee", t("import.colPayee"), false],
|
||||
["purpose", t("import.colPurpose"), false],
|
||||
["counterparty_iban", t("import.colIban"), false],
|
||||
].map(([field, label]) => (
|
||||
<label key={field}>
|
||||
<span>{label}</span>
|
||||
<select value={config.column_map[field] ?? ""} onChange={(e) => setCol(field, e.target.value)}>
|
||||
<option value="">—</option>
|
||||
{colOptions.map((c) => <option key={c.i} value={c.i}>{c.label}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="field-inline" style={{ marginTop: "var(--sp-3)" }}>
|
||||
<button className="btn primary" onClick={loadPreview} disabled={busy}>
|
||||
<Icon name="chevron-right" size={15} /> {t("import.makePreview")}
|
||||
</button>
|
||||
<div className="input-with-button" style={{ maxWidth: 320 }}>
|
||||
<input placeholder={t("import.templateName")} value={saveName} onChange={(e) => setSaveName(e.target.value)} />
|
||||
<button className="btn sm" onClick={saveTemplate}>{t("import.saveTemplate")}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Schritt 4: Prüfansicht */}
|
||||
{rows && (
|
||||
<div className="card">
|
||||
<div className="page-head">
|
||||
<h2 style={{ margin: 0 }}>{t("import.step4")}</h2>
|
||||
<button className="btn primary" onClick={commit} disabled={busy || includeCount === 0}>
|
||||
<Icon name="download" size={15} /> {t("import.commit", { n: includeCount })}
|
||||
</button>
|
||||
</div>
|
||||
<div className="table-scroll">
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>{t("transactions.date")}</th>
|
||||
<th>{t("transactions.amount")}</th>
|
||||
<th>{t("import.typeCol")}</th>
|
||||
<th>{t("import.payeeCol")}</th>
|
||||
<th>{t("transactions.category")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((r, idx) => (
|
||||
<tr key={idx} className={!r.valid ? "row-invalid" : r.is_duplicate ? "row-dup" : ""}>
|
||||
<td>
|
||||
<input type="checkbox" checked={!!r.include} disabled={!r.valid}
|
||||
onChange={(e) => updateRow(idx, { include: e.target.checked })} style={{ width: "auto" }} />
|
||||
</td>
|
||||
<td className="nowrap">{r.date ? formatDate(r.date) : <span className="amount neg">{t("import.badDate")}</span>}</td>
|
||||
<td className="nowrap">
|
||||
<span className={`amount ${(r.amount_cents || 0) < 0 ? "neg" : "pos"}`}>
|
||||
{formatMoney(Math.abs(r.amount_cents || 0), acc?.currency || "EUR")}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<select value={r.type} onChange={(e) => updateRow(idx, { type: e.target.value })} style={{ minWidth: 110 }}>
|
||||
<option value="expense">{t("transactions.expense")}</option>
|
||||
<option value="income">{t("transactions.income")}</option>
|
||||
<option value="transfer">{t("transactions.transfer")}</option>
|
||||
</select>
|
||||
</td>
|
||||
<td className="ellipsis" style={{ maxWidth: 200 }}>
|
||||
{r.payee || r.purpose || ""}
|
||||
{r.is_duplicate && <span className="badge" style={{ marginLeft: 6 }}>{t("import.duplicate")}</span>}
|
||||
</td>
|
||||
<td>
|
||||
{r.type === "transfer" ? (
|
||||
<select value={r.to_account_id || ""} onChange={(e) => updateRow(idx, { to_account_id: e.target.value ? Number(e.target.value) : null })} style={{ minWidth: 150 }}>
|
||||
<option value="">{t("import.chooseAccount")}</option>
|
||||
{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>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Verlauf */}
|
||||
{batches.length > 0 && (
|
||||
<div className="card">
|
||||
<h2>{t("import.history")}</h2>
|
||||
<table className="table">
|
||||
<tbody>
|
||||
{batches.map((b) => (
|
||||
<tr key={b.id} className={b.status === "undone" ? "row-dup" : ""}>
|
||||
<td><strong>{b.filename || "—"}</strong> <span className="muted small">{accountById[b.account_id]?.name}</span></td>
|
||||
<td className="nowrap">{formatDate(b.created_at)}</td>
|
||||
<td className="nowrap">{t("import.importedCount", { n: b.imported_count })}</td>
|
||||
<td style={{ textAlign: "right" }}>
|
||||
{b.status === "committed" ? (
|
||||
<button className="btn sm danger" onClick={() => undo(b)}>
|
||||
<Icon name="refresh-ccw" size={14} /> {t("import.undo")}
|
||||
</button>
|
||||
) : <span className="muted small">{t("import.undone")}</span>}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user