Add +-1000 spinner buttons to amount fields, floor (not round) to nearest 1000 in all allocation calculations

src/components/FormField.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { InfoBubble } from "@/components/InfoBubble";
-import { formatChf, parseChfInput, roundToThousand } from "@/lib/format";
+import { floorToThousand, formatChf, parseChfInput } from "@/lib/format";
 
 const baseInputClass =
   "w-full rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm text-zinc-900 focus:border-zinc-500 focus:outline-none dark:border-zinc-600 dark:bg-zinc-900 dark:text-zinc-100";
@@ -50,8 +50,9 @@ export function NumberField({
 }
 
 // Roher Betrags-Input ohne Label (fuer kompakte Tabellenzellen o.ae.). Zeigt den Wert
-// formatiert mit 1'000er-Trennzeichen an, solange das Feld nicht fokussiert ist, und
-// rundet beim Verlassen des Feldes auf ein Vielfaches von 1'000 (siehe lib/format.ts).
+// formatiert mit 1'000er-Trennzeichen an, solange das Feld nicht fokussiert ist, rundet
+// beim Verlassen des Feldes auf ein Vielfaches von 1'000 ABwaerts (siehe lib/format.ts)
+// und bietet Pfeil-Buttons zum Erhoehen/Verringern in 1'000er-Schritten.
 export function MoneyInput({
   value,
   onChange,
@@ -62,24 +63,52 @@ export function MoneyInput({
   className?: string;
 }) {
   const [focused, setFocused] = useState(false);
-  const [text, setText] = useState(() => String(Math.round(value || 0)));
+  const [text, setText] = useState(() => String(Math.floor(value || 0)));
+
+  function step(delta: number) {
+    onChange(floorToThousand(value) + delta);
+  }
 
   return (
-    <input
-      type="text"
-      inputMode="numeric"
-      className={className ?? baseInputClass}
-      value={focused ? text : formatChf(value)}
-      onFocus={() => {
-        setFocused(true);
-        setText(String(Math.round(value || 0)));
-      }}
-      onChange={(e) => setText(e.target.value.replace(/[^0-9-]/g, ""))}
-      onBlur={() => {
-        setFocused(false);
-        onChange(roundToThousand(parseChfInput(text)));
-      }}
-    />
+    <div className={`relative ${className ?? "w-full"}`}>
+      <input
+        type="text"
+        inputMode="numeric"
+        className={`${baseInputClass} w-full pr-6`}
+        value={focused ? text : formatChf(value)}
+        onFocus={() => {
+          setFocused(true);
+          setText(String(Math.floor(value || 0)));
+        }}
+        onChange={(e) => setText(e.target.value.replace(/[^0-9-]/g, ""))}
+        onBlur={() => {
+          setFocused(false);
+          onChange(floorToThousand(parseChfInput(text)));
+        }}
+      />
+      <div className="absolute inset-y-0 right-0 flex w-5 flex-col overflow-hidden rounded-r-md border-l border-zinc-300 dark:border-zinc-600">
+        <button
+          type="button"
+          tabIndex={-1}
+          aria-label="Um 1'000 erhoehen"
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={() => step(1000)}
+          className="flex flex-1 items-center justify-center text-[8px] leading-none text-zinc-500 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-zinc-800"
+        >
+          ▲
+        </button>
+        <button
+          type="button"
+          tabIndex={-1}
+          aria-label="Um 1'000 verringern"
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={() => step(-1000)}
+          className="flex flex-1 items-center justify-center border-t border-zinc-300 text-[8px] leading-none text-zinc-500 hover:bg-zinc-100 dark:border-zinc-600 dark:text-zinc-400 dark:hover:bg-zinc-800"
+        >
+          ▼
+        </button>
+      </div>
+    </div>
   );
 }