feat: Zu welchem Budget-Monat eine Buchung gehoert

Bisher entschied allein das Datum. Bei einem Budget-Monat, der nicht am
Ersten beginnt, faellt das auf: Die Zahlung geht am 24. ab und gehoert
doch zum naechsten Monat, die Rechnung wird verspaetet beglichen und
gehoert zum letzten.

Neu traegt jede Buchung einen Budget-Monat. Leer heisst weiterhin "aus dem
Datum" - der Normalfall, und er bleibt es. Wird einer von Hand gesetzt,
zaehlt die Buchung nur noch dort und in ihrem eigenen Monat NICHT mehr,
sonst stuende sie zweimal da.

Das Aendern liegt bewusst hinter einem Klick und hinter Pfeilen statt
hinter einer Auswahlliste: Es ist der Ausnahmefall, nicht der Normalfall,
und soll sich auch so anfuehlen. Waehlt man genau den Monat, der ohnehin
gilt, bleibt die Buchung automatisch - verschiebt sich das Datum spaeter,
wandert sie mit. In der Liste zeigt eine Marke den Monat, aber nur, wenn
jemand eingegriffen hat.

Der Server nimmt drei Monate in jede Richtung an. Ein Vertipper wie
2019-03 wird abgelehnt: Er liesse die Buchung aus jeder Auswertung
verschwinden, ohne dass irgendwo etwas fehlt.

Geprueft im Browser gegen eine Wegwerf-Datenbank mit Stichtag 25: Die
Karte summiert 25.08.-24.09., eine verschobene Buchung verlaesst diesen
Zeitraum und kehrt beim Zuruecknehmen zurueck.

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

web/src/pages/Transactions.jsx

@@ -8,12 +8,13 @@ import Icon from "../components/Icon";
 import IconChip from "../components/IconChip";
 import Money from "../components/Money";
 import Modal from "../components/Modal";
+import BudgetZeitraum from "../components/BudgetZeitraum";
 import AccountSelect from "../components/AccountSelect";
 import CategorySelect from "../components/CategorySelect";
 import UebertragDialog from "../components/UebertragDialog";
 import DataTable from "../components/DataTable";
 import { gruppenFuer } from "../kategorien";
-import { centsToInput, formatMoney, parseAmountToCents, todayIso } from "../format";
+import { centsToInput, formatMonthLabel, formatMonthShort, formatMoney, parseAmountToCents, todayIso } from "../format";
 
 const TYPES = ["expense", "income", "transfer"];
 
@@ -32,12 +33,14 @@ function emptyForm() {
     description: "",
     budget_as_expense: true,
     budget_category_id: "",
+    // Leer heisst: aus dem Datum. Der Normalfall, und er bleibt es.
+    budget_period: null,
   };
 }
 
 export default function Transactions() {
-  const { t } = useTranslation();
-  const { baseCurrency, formatDate } = useSettings();
+  const { t, i18n } = useTranslation();
+  const { baseCurrency, formatDate, budget_start_day: startTag } = useSettings();
   const confirm = useConfirm();
   const toast = useToast();
 
@@ -203,6 +206,9 @@ export default function Transactions() {
       description: tx.description || "",
       budget_as_expense: tx.budget_treatment !== "neutral",
       budget_category_id: tx.budget_category_id ? String(tx.budget_category_id) : "",
+      // Nur der von Hand gesetzte Monat gehoert ins Formular. Leer heisst:
+      // aus dem Datum – und wandert mit, wenn man das Datum noch aendert.
+      budget_period: tx.budget_period_manuell ? tx.budget_period : null,
     });
   }
 
@@ -225,6 +231,7 @@ export default function Transactions() {
       amount_cents: cents,
       payee: form.payee.trim() || null,
       description: form.description.trim() || null,
+      budget_period: form.budget_period || null,
     };
     if (form.type === "transfer") {
       body.to_account_id = Number(form.to_account_id);
@@ -332,6 +339,16 @@ export default function Transactions() {
                 <span className="badge herkunft">{t(`todo.from.${tx.herkunft}`, {
                   defaultValue: tx.herkunft,
                 })}</span>
+                {/* Nur der Ausnahmefall wird gezeigt: Steht hier nichts, gilt
+                    das Datum – und das steht ohnehin in seiner eigenen
+                    Spalte. */}
+                {tx.budget_period_manuell && (
+                  <span className="badge accent herkunft"
+                        title={`${t("transactions.budgetPeriod")}: ${formatMonthLabel(tx.budget_period, i18n.language)} (${t("transactions.budgetPeriodManual")})`}>
+                    <Icon name="calendar" size={11} />
+                    {formatMonthShort(tx.budget_period, i18n.language)}
+                  </span>
+                )}
               </div>
               {l.sub && <div className="named-sub ellipsis">{l.sub}</div>}
               {/* Verknüpft heisst: zählt nicht als Ausgabe oder Einnahme.
@@ -593,6 +610,13 @@ export default function Transactions() {
               )}
             </div>
 
+            <BudgetZeitraum
+              wert={form.budget_period}
+              datum={form.date}
+              startTag={Number(startTag) || 1}
+              onChange={(label) => setForm({ ...form, budget_period: label })}
+            />
+
             {savingsDest && (
               <div className="savings-opt">
                 <label className="checkline">