#654 Fix Purchase Amounts Not Showing Two Decimal Places

components/ui/form-input.tsx

@@ -37,6 +37,7 @@ function FormInput<TFieldValues extends FieldValues>({
   ...inputProps
 }: FormInputProps<TFieldValues>) {
   const form = useFormContext<TFieldValues>();
+  const [displayValue, setDisplayValue] = React.useState('');
 
   return (
     <FormField
@@ -54,6 +55,18 @@ function FormInput<TFieldValues extends FieldValues>({
                 <Input
                   {...inputProps}
                   {...field}
+                  value={displayValue || Number(field.value || 0).toFixed(2)}
+                  onFocus={() =>
+                    setDisplayValue(Number(field.value || 0).toFixed(2))
+                  }
+                  onChange={(e) => {
+                    setDisplayValue(e.target.value);
+                    field.onChange(e.target.value);
+                  }}
+                  onBlur={() => {
+                    setDisplayValue('');
+                    field.onBlur();
+                  }}
                   className={cn('rounded-l-none', inputProps.className)}
                 />
               </div>

lib/utils.ts

@@ -7,8 +7,10 @@ export function cn(...inputs: ClassValue[]) {
 }
 
 function formatAbsoluteNumber(value: number) {
-  const rounded = Math.round(value * 100) / 100;
-  return rounded.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  return new Intl.NumberFormat('en-US', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(value);
 }
 
 export function formatNumber(value: number) {