+ {merchant.logo_asset_id ? (
+ })
+ ) : (
+
+ {initialsOf(merchant.name)}
+
+ )}
+
+ );
+}
diff --git a/frontend/src/components/MerchantLogoDialog.test.tsx b/frontend/src/components/MerchantLogoDialog.test.tsx
new file mode 100644
index 0000000..65058ba
--- /dev/null
+++ b/frontend/src/components/MerchantLogoDialog.test.tsx
@@ -0,0 +1,172 @@
+/** Tests des Logo-Auswahldialogs. */
+
+import { screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { MerchantLogoDialog } from "@/components/MerchantLogoDialog";
+import { renderWithProviders } from "@/test/utils";
+import type { LogoCandidate, Merchant } from "@/types/api";
+
+const FIRMA: Merchant = {
+ id: 3,
+ name: "Netflix",
+ normalized_name: "netflix",
+ domain: "netflix.com",
+ aliases: [],
+ logo_asset_id: null,
+ brand_color: null,
+ brand_color_dark: null,
+ logo_source: null,
+ logo_status: "pending",
+ created_at: "2026-03-01T10:00:00+01:00",
+};
+
+const KANDIDATEN: LogoCandidate[] = [
+ {
+ candidate_id: 11,
+ source: "simple-icons",
+ title: "Netflix",
+ score: 1,
+ mime: "image/svg+xml",
+ width: null,
+ height: null,
+ brand_color: "#e50914",
+ is_preselected: true,
+ },
+ {
+ candidate_id: 12,
+ source: "favicon",
+ title: "Netflix",
+ score: 0.5,
+ mime: "image/png",
+ width: 128,
+ height: 128,
+ brand_color: "#e40813",
+ is_preselected: false,
+ },
+ {
+ candidate_id: 13,
+ source: "generated",
+ title: "Netflix",
+ score: 0.1,
+ mime: "image/svg+xml",
+ width: 96,
+ height: 96,
+ brand_color: "#f97316",
+ is_preselected: false,
+ },
+];
+
+/** Antwortet auf Suche und Auswahl und merkt sich die gesendeten Anfragen. */
+function mockLogoApi(kandidaten: LogoCandidate[] = KANDIDATEN) {
+ const anfragen: { url: string; method: string; body: string | null }[] = [];
+
+ const nachbildung = vi.fn(async (eingabe: RequestInfo | URL, init?: RequestInit) => {
+ const url = typeof eingabe === "string" ? eingabe : eingabe.toString();
+ anfragen.push({
+ url,
+ method: init?.method ?? "GET",
+ body: typeof init?.body === "string" ? init.body : null,
+ });
+
+ if (url.includes("/logo/search")) {
+ return new Response(JSON.stringify({ merchant_id: 3, candidates: kandidaten }), {
+ status: 200,
+ headers: { "content-type": "application/json" },
+ });
+ }
+ if (url.includes("/logo/select")) {
+ return new Response(JSON.stringify({ ...FIRMA, logo_asset_id: 11, logo_status: "manual" }), {
+ status: 200,
+ headers: { "content-type": "application/json" },
+ });
+ }
+ return new Response("{}", { status: 200, headers: { "content-type": "application/json" } });
+ });
+
+ vi.stubGlobal("fetch", nachbildung);
+ return anfragen;
+}
+
+describe("MerchantLogoDialog", () => {
+ beforeEach(() => {
+ mockLogoApi();
+ });
+
+ it("sucht beim Öffnen und wählt den besten Treffer vor", async () => {
+ renderWithProviders(
+
+
+
+ {(id) => (
+ setDomain(ereignis.target.value)}
+ onKeyDown={(ereignis) => {
+ if (ereignis.key === "Enter") {
+ ereignis.preventDefault();
+ erneutSuchen();
+ }
+ }}
+ />
+ )}
+
+
+
+
+ {suchen.isPending ? (
+
+ {Array.from({ length: 3 }, (_, index) => (
+
+ ) : kandidaten.length > 0 ? (
+ -
+ {kandidaten.map((kandidat) => (
+
- + + + ))} +
+ Keine Vorschläge. Lade stattdessen ein eigenes Bild hoch. +
+ )} + +
+
+
+
+ SVG, PNG oder JPEG bis 1 MB.
+
+
+ {(id) => (
+
+
+
+ );
+}
+
+/** Die nächsten fünf Termine – berechnet vom Backend, nicht im Browser. */
+function NextDates({
+ recurrenceId,
+ dtstart,
+}: {
+ recurrenceId: number | null;
+ dtstart: string;
+}) {
+ const von = dtstart;
+ const bis = addMonthsIso(dtstart, 36);
+ const { data, isLoading } = useRecurrencePreview(recurrenceId, von, bis);
+
+ if (recurrenceId === null) {
+ return (
+
+ {PRESETS.map((vorlage) => (
+
+ ))}
+
+ )}
+
+ {(zustand.preset === "monthly" ||
+ zustand.preset === "everyNMonths" ||
+ zustand.preset === "quarterly" ||
+ zustand.preset === "yearly") && (
+
+ {(id) => (
+
+ )}
+
+ )}
+
+ {zustand.preset === "everyNMonths" && (
+
+ {(id) => (
+ aendern({ interval: Number(ereignis.target.value) })}
+ />
+ )}
+
+ )}
+
+ {zustand.preset === "yearly" && (
+
+ {(id) => (
+
+ )}
+
+ )}
+
+ {zustand.preset === "weekly" && (
+ <>
+
+ {(id) => (
+
+
+ {(id) => (
+ aendern({ interval: Number(ereignis.target.value) })}
+ />
+ )}
+
+
+ )}
+
+ {zustand.preset === "custom" && (
+
+ {(id) => (
+ aendern({ custom: ereignis.target.value })}
+ />
+ )}
+
+ )}
+
+
+
+ {WEEKDAYS.map((tag) => {
+ const gewaehlt = zustand.weekdays.includes(tag.code);
+ return (
+
+ );
+ })}
+
+ )}
+
+
+
+ {zustand.preset !== "custom" && error &&
+
+
+
+ {klartext}
+{rrule || "–"}
+{error}
} + ++ Die nächsten Termine erscheinen, sobald der Posten gespeichert ist. +
+ ); + } + + if (isLoading) returnDiese Regel ergibt keine Termine.
; + } + + return ( +
+
+ );
+}
diff --git a/frontend/src/components/RecurrenceDetail.tsx b/frontend/src/components/RecurrenceDetail.tsx
new file mode 100644
index 0000000..866398a
--- /dev/null
+++ b/frontend/src/components/RecurrenceDetail.tsx
@@ -0,0 +1,365 @@
+/** Detailansicht eines wiederkehrenden Postens als seitlicher Drawer. */
+
+import { type FormEvent, useState } from "react";
+
+import { CalendarX2, Pencil, Plus, Trash2, X } from "lucide-react";
+
+import { useCategoryLookup } from "@/hooks/useCategoryLookup";
+import { MerchantLogo } from "@/components/MerchantLogo";
+import { Button } from "@/components/ui/Button";
+import { Badge, ConfirmDialog, Skeleton } from "@/components/ui/Feedback";
+import { Field, Input } from "@/components/ui/Field";
+import { MoneyInput } from "@/components/ui/MoneyInput";
+import {
+ useAddAmountVersion,
+ useCancelContract,
+ useDeleteRecurrence,
+ useRecurrence,
+} from "@/hooks/useEntities";
+import { formatDate, formatMoney, relativeDays, todayIso } from "@/lib/format";
+import { describeRRule } from "@/lib/rrule";
+import type { Recurrence } from "@/types/api";
+
+export function RecurrenceDetailDrawer({
+ recurrenceId,
+ onClose,
+ onEdit,
+}: {
+ recurrenceId: number | null;
+ onClose: () => void;
+ onEdit: (recurrence: Recurrence) => void;
+}) {
+ const { data: posten, isLoading } = useRecurrence(recurrenceId);
+ const entfernen = useDeleteRecurrence();
+ const kuendigen = useCancelContract();
+ const kategorieName = useCategoryLookup();
+
+ const [preisFormular, setPreisFormular] = useState(false);
+ const [loeschen, setLoeschen] = useState(false);
+
+ if (recurrenceId === null) return null;
+
+ return (
+
+
-
+ {termine.map((termin) => (
+
- + {formatDate(termin.due_date)} + {termin.due_date !== termin.nominal_date && ( + ↦ + )} + + ))} +
+
+
+
+
+ setLoeschen(false)}
+ onConfirm={() => {
+ if (!posten) return;
+ entfernen.mutate(posten.id, {
+ onSuccess: () => {
+ setLoeschen(false);
+ onClose();
+ },
+ });
+ }}
+ />
+
+ );
+}
+
+function Kennzahl({
+ label,
+ value,
+ tone = "default",
+}: {
+ label: string;
+ value: string;
+ tone?: "default" | "positive";
+}) {
+ return (
+
+
+ );
+}
+
+function Zeile({ label, wert }: { label: string; wert: string }) {
+ return (
+ {label}
++ {value} +
+
+ {label}
+ {wert}
+
+ );
+}
+
+function AmountVersionForm({
+ recurrenceId,
+ onDone,
+}: {
+ recurrenceId: number;
+ onDone: () => void;
+}) {
+ const [betrag, setBetrag] = useState("");
+ const [gueltigAb, setGueltigAb] = useState(todayIso());
+ const anlegen = useAddAmountVersion();
+
+ function absenden(ereignis: FormEvent) {
+ ereignis.preventDefault();
+ if (!betrag) return;
+ anlegen.mutate(
+ { recurrenceId, daten: { amount: betrag, valid_from: gueltigAb } },
+ { onSuccess: onDone },
+ );
+ }
+
+ return (
+
+ );
+}
diff --git a/frontend/src/components/RecurrenceForm.tsx b/frontend/src/components/RecurrenceForm.tsx
new file mode 100644
index 0000000..ff2fe47
--- /dev/null
+++ b/frontend/src/components/RecurrenceForm.tsx
@@ -0,0 +1,452 @@
+/** Formular für wiederkehrende Posten samt RRULE-Editor. */
+
+import { type FormEvent, useState } from "react";
+
+import { AccountSelect, CategorySelect, MerchantSelect } from "@/components/EntitySelects";
+import { RRuleEditor } from "@/components/RRuleEditor";
+import { Button } from "@/components/ui/Button";
+import { Checkbox, Field, Input, Select, Textarea } from "@/components/ui/Field";
+import { Modal } from "@/components/ui/Modal";
+import { MoneyInput } from "@/components/ui/MoneyInput";
+import { useAccounts, useSaveRecurrence } from "@/hooks/useEntities";
+import { ApiError } from "@/lib/api";
+import { todayIso } from "@/lib/format";
+import type { BusinessDayShift, EntryKind, Recurrence } from "@/types/api";
+
+interface FormularZustand {
+ kind: EntryKind;
+ title: string;
+ amount: string;
+ rrule: string;
+ dtstart: string;
+ until: string;
+ category_id: number | null;
+ account_id: number | null;
+ merchant_id: number | null;
+ business_day_shift: BusinessDayShift;
+ is_variable: boolean;
+ reserve_enabled: boolean;
+ is_active: boolean;
+ notes: string;
+ installments_total: string;
+ principal_amount: string;
+ contract_start: string;
+ contract_min_term_months: string;
+ contract_notice_period_days: string;
+ contract_auto_renew_months: string;
+}
+
+function leeresFormular(kontoId: number | null): FormularZustand {
+ return {
+ kind: "expense",
+ title: "",
+ amount: "",
+ rrule: "FREQ=MONTHLY;BYMONTHDAY=1",
+ dtstart: todayIso(),
+ until: "",
+ category_id: null,
+ account_id: kontoId,
+ merchant_id: null,
+ business_day_shift: "next",
+ is_variable: false,
+ reserve_enabled: false,
+ is_active: true,
+ notes: "",
+ installments_total: "",
+ principal_amount: "",
+ contract_start: "",
+ contract_min_term_months: "",
+ contract_notice_period_days: "",
+ contract_auto_renew_months: "",
+ };
+}
+
+function ausPosten(posten: Recurrence): FormularZustand {
+ return {
+ kind: posten.kind,
+ title: posten.title,
+ amount: posten.amount,
+ rrule: posten.rrule,
+ dtstart: posten.dtstart,
+ until: posten.until ?? "",
+ category_id: posten.category_id,
+ account_id: posten.account_id,
+ merchant_id: posten.merchant_id,
+ business_day_shift: posten.business_day_shift,
+ is_variable: posten.is_variable,
+ reserve_enabled: posten.reserve_enabled,
+ is_active: posten.is_active,
+ notes: posten.notes ?? "",
+ installments_total: posten.installments_total?.toString() ?? "",
+ principal_amount: posten.principal_amount ?? "",
+ contract_start: posten.contract_start ?? "",
+ contract_min_term_months: posten.contract_min_term_months?.toString() ?? "",
+ contract_notice_period_days: posten.contract_notice_period_days?.toString() ?? "",
+ contract_auto_renew_months: posten.contract_auto_renew_months?.toString() ?? "",
+ };
+}
+
+function zahlOderNull(wert: string): number | null {
+ const zahl = Number.parseInt(wert, 10);
+ return Number.isFinite(zahl) && zahl > 0 ? zahl : null;
+}
+
+export function RecurrenceFormDialog({
+ recurrence,
+ open,
+ onClose,
+}: {
+ recurrence: Recurrence | null | undefined;
+ open: boolean;
+ onClose: () => void;
+}) {
+ const { data: konten = [] } = useAccounts(true);
+ const speichern = useSaveRecurrence();
+ const [formular, setFormular] = useState