Format all monetary amounts as 1'000-separated integers and round amount inputs to nearest 1'000

src/components/FormField.tsx

@@ -1,6 +1,8 @@
 "use client";
 
+import { useState } from "react";
 import { InfoBubble } from "@/components/InfoBubble";
+import { formatChf, parseChfInput, roundToThousand } 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";
@@ -47,6 +49,59 @@ 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).
+export function MoneyInput({
+  value,
+  onChange,
+  className,
+}: {
+  value: number;
+  onChange: (value: number) => void;
+  className?: string;
+}) {
+  const [focused, setFocused] = useState(false);
+  const [text, setText] = useState(() => String(Math.round(value || 0)));
+
+  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)));
+      }}
+    />
+  );
+}
+
+export function MoneyField({
+  label,
+  help,
+  value,
+  onChange,
+}: {
+  label: string;
+  help?: string;
+  value: number;
+  onChange: (value: number) => void;
+}) {
+  return (
+    <div>
+      <FieldLabel label={label} help={help} />
+      <MoneyInput value={value} onChange={onChange} />
+    </div>
+  );
+}
+
 export function TextField({
   label,
   help,