fixed inputs to accept decimals

web/src/components/CurrencyInput.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 type BaseProps = Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
@@ -39,21 +39,32 @@ export default function CurrencyInput({
 
   if ("valueCents" in rest) {
     const { valueCents, onChange, ...inputProps } = rest as CentsProps;
+    const [display, setDisplay] = useState<string>("");
+
+    // keep display in sync when valueCents prop changes externally
+    useEffect(() => {
+      const asNumber = (valueCents ?? 0) / 100;
+      setDisplay(Number.isFinite(asNumber) ? asNumber.toString() : "");
+    }, [valueCents]);
+
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       const formatted = formatString(e.target.value);
-      const parsed = Number.parseFloat(formatted || "0");
-      onChange(Number.isFinite(parsed) ? Math.round(parsed * 100) : 0);
+      setDisplay(formatted);
+      const parsed = Number.parseFloat(formatted);
+      if (Number.isFinite(parsed)) {
+        onChange(Math.round(parsed * 100));
+      }
     };
-    const displayValue = (valueCents ?? 0) / 100;
-    const value = Number.isFinite(displayValue) ? displayValue.toString() : "";
+
     return (
       <input
         {...inputProps}
         className={mergedClass}
         inputMode="decimal"
         placeholder={placeholder}
-        value={value}
+        value={display}
         onChange={handleChange}
+        pattern="[0-9]*[.,]?[0-9]*"
       />
     );
   }
@@ -70,6 +81,7 @@ export default function CurrencyInput({
       placeholder={placeholder}
       value={value}
       onChange={handleChange}
+      pattern="[0-9]*[.,]?[0-9]*"
     />
   );
 }