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>
2026-08-30 14:57:16 +02:00
parent bd79b83339
commit 0b19e07ce0
15 changed files with 413 additions and 35 deletions
@@ -0,0 +1,96 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import Icon from "./Icon";
+import { formatMonthLabel } from "../format";
+
+/** Auf welchen Tag der Monat gekappt fällt – einen 31. Februar gibt es nicht.
+ *  Dieselbe Kappung wie `_clamp_day` im Server, sonst fiele der 28. Februar bei
+ *  Starttag 31 in einen Monat, der ihn gar nicht enthält. */
+function gekappt(jahr, monat, tag) {
+  return Math.min(tag, new Date(jahr, monat, 0).getDate());
+}
+
+/** Der Budget-Monat, in den ein Datum von selbst fällt – die Entsprechung zu
+ *  `budget.period_of` im Server. Hier gerechnet und nicht erfragt, damit die
+ *  Anzeige mitläuft, während man im Formular noch am Datum dreht. */
+export function budgetMonat(iso, startTag) {
+  const [j, m, d] = String(iso).split("-").map(Number);
+  if (!j || !m) return "";
+  const zwei = (n) => String(n).padStart(2, "0");
+  if (startTag <= 1 || d < gekappt(j, m, startTag)) return `${j}-${zwei(m)}`;
+  return m === 12 ? `${j + 1}-01` : `${j}-${zwei(m + 1)}`;
+}
+
+export function verschoben(label, monate) {
+  const [j, m] = label.split("-").map(Number);
+  const d = new Date(j, m - 1 + monate, 1);
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
+}
+
+// Drei Monate in jede Richtung – so weit wie der Server es annimmt, und weit
+// genug für den echten Fall (eine Zahlung kurz vor dem Stichtag, eine
+// verspätet beglichene Rechnung).
+const REICHWEITE = 3;
+
+/**
+ * Zu welchem Budget-Monat eine Buchung zählt.
+ *
+ * Normalerweise entscheidet das Datum, und dann ist hier nichts zu tun – das
+ * Feld sagt nur, was gilt. Das Ändern liegt bewusst hinter einem Klick und
+ * hinter Pfeilen statt hinter einer Auswahlliste: Es ist der Ausnahmefall,
+ * nicht der Normalfall, und soll sich auch so anfühlen.
+ */
+export default function BudgetZeitraum({ wert, datum, startTag, onChange }) {
+  const { t, i18n } = useTranslation();
+  const [offen, setOffen] = useState(false);
+  const eigen = budgetMonat(datum, startTag);
+  if (!eigen) return null;
+  const gilt = wert || eigen;
+  const abstand = Math.round(
+    (Number(gilt.split("-")[0]) - Number(eigen.split("-")[0])) * 12
+    + Number(gilt.split("-")[1]) - Number(eigen.split("-")[1]));
+
+  function setze(schritt) {
+    const neu = verschoben(gilt, schritt);
+    onChange(neu === eigen ? null : neu);
+  }
+
+  return (
+    <div className="budgetzeitraum">
+      <span className="line-label">{t("transactions.budgetPeriod")}</span>
+      <div className="budgetzeitraum-kopf">
+        <strong>{formatMonthLabel(gilt, i18n.language)}</strong>
+        {wert
+          ? <span className="badge">{t("transactions.budgetPeriodManual")}</span>
+          : <span className="muted small">{t("transactions.budgetPeriodAuto")}</span>}
+        <span className="grow" />
+        {!offen && (
+          <button type="button" className="link-btn" onClick={() => setOffen(true)}>
+            {t("transactions.budgetPeriodChange")}
+          </button>
+        )}
+      </div>
+      {offen && (
+        <div className="budgetzeitraum-wahl">
+          <p className="muted small">{t("transactions.budgetPeriodHint")}</p>
+          <div className="budgetzeitraum-schritte">
+            <button type="button" className="btn sm" disabled={abstand <= -REICHWEITE}
+                    aria-label={t("transactions.budgetPeriodBack")} onClick={() => setze(-1)}>
+              <Icon name="chevron-left" size={16} />
+            </button>
+            <span className="budgetzeitraum-monat">{formatMonthLabel(gilt, i18n.language)}</span>
+            <button type="button" className="btn sm" disabled={abstand >= REICHWEITE}
+                    aria-label={t("transactions.budgetPeriodForward")} onClick={() => setze(1)}>
+              <Icon name="chevron-right" size={16} />
+            </button>
+            {wert && (
+              <button type="button" className="link-btn" onClick={() => onChange(null)}>
+                {t("transactions.budgetPeriodReset")}
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
@@ -72,6 +72,13 @@ const PATHS = {
      <path d="M7 10l5 5 5-5M12 15V3" />
    </>
  ),
+  calendar: (
+    <>
+      <rect width="18" height="18" x="3" y="4" rx="2" />
+      <path d="M16 2v4M8 2v4M3 10h18" />
+    </>
+  ),
+  "chevron-left": <path d="m15 18-6-6 6-6" />,
  "chevron-right": <path d="m9 18 6-6-6-6" />,
  "chevron-down": <path d="m6 9 6 6 6-6" />,
  "chevron-up": <path d="m18 15-6-6-6 6" />,