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>
   );
 }
 

src/components/TransitionPanel.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import { MoneyInput } from "@/components/FormField";
 import { api } from "@/lib/api-client";
-import { formatChf } from "@/lib/format";
+import { floorToThousand, formatChf } from "@/lib/format";
 import type { PhaseInput, TransitionDecision } from "@/lib/types";
 import type { PhaseComputed } from "@/lib/calculations";
 
@@ -106,19 +106,21 @@ export function TransitionPanel({
     );
   }
 
-  const totalAvailableCapital = items.reduce((sum, it) => {
-    if (it.positionType === "SECURITY") {
+  const totalAvailableCapital = floorToThousand(
+    items.reduce((sum, it) => {
+      if (it.positionType === "SECURITY") {
+        if (it.decision === "CARRY_OVER") return sum;
+        const gain = Math.max(0, it.carryOverValue - it.originalValue);
+        const tax = gain * (it.saleTaxRate / 100);
+        return sum + (it.carryOverValue - tax);
+      }
       if (it.decision === "CARRY_OVER") return sum;
-      const gain = Math.max(0, it.carryOverValue - it.originalValue);
+      const salePrice = it.salePrice ?? 0;
+      const gain = Math.max(0, salePrice - it.originalValue);
       const tax = gain * (it.saleTaxRate / 100);
-      return sum + (it.carryOverValue - tax);
-    }
-    if (it.decision === "CARRY_OVER") return sum;
-    const salePrice = it.salePrice ?? 0;
-    const gain = Math.max(0, salePrice - it.originalValue);
-    const tax = gain * (it.saleTaxRate / 100);
-    return sum + (salePrice - tax);
-  }, 0);
+      return sum + (salePrice - tax);
+    }, 0)
+  );
 
   async function handleSave() {
     setSaving(true);
@@ -181,7 +183,7 @@ export function TransitionPanel({
               <td className="py-2">
                 {it.positionType === "REAL_ESTATE" && it.decision === "SELL" ? (
                   <MoneyInput
-                    className="w-32 rounded-md border border-zinc-300 bg-white px-2 py-1 text-xs dark:border-zinc-600 dark:bg-zinc-900"
+                    className="w-32"
                     value={it.salePrice ?? 0}
                     onChange={(v) =>
                       setItems((prev) => prev.map((x, idx) => (idx === i ? { ...x, salePrice: v } : x)))