Improve currency inputs

src/components/ui/currency-input.tsx

@@ -0,0 +1,48 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const CurrencyInput = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, ...props }, ref) => {
+    const { onChange } = props
+
+    /**
+     * Override onChange to handle currency formatting
+     * 
+     * - If the value begins with $, remove it
+     * - If the value contains a comma, remove it
+     * 
+     * @param e - React.ChangeEvent<HTMLInputElement>
+     */
+    const customOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        let val = e.target.value
+        if (val.startsWith("$")) {
+            val = val.slice(1)
+        }
+        if (val.includes(",")) {
+            val = val.replace(/,/g, "")
+        }
+
+        // call the original onChange
+        e.target.value = val
+        onChange && onChange(e)
+    }
+
+    return (
+      <input
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+        onChange={customOnChange}
+      />
+    )
+  }
+)
+CurrencyInput.displayName = "CurrencyInput"
+
+export { CurrencyInput }

src/pages/activity/components/activity-form.tsx

@@ -24,6 +24,7 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
+import { CurrencyInput } from '@/components/ui/currency-input';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import {
   Select,
@@ -263,7 +264,7 @@ const CashActivityFields = ({ currentAccountCurrency }: CashActivityFieldsProps)
             <FormItem>
               <FormLabel>Fee</FormLabel>
               <FormControl>
-                <Input type="number" inputMode="decimal" placeholder="Fee" {...field} />
+                <CurrencyInput placeholder="Fee" {...field} />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -277,7 +278,7 @@ const CashActivityFields = ({ currentAccountCurrency }: CashActivityFieldsProps)
             <FormItem>
               <FormLabel>Amount</FormLabel>
               <FormControl>
-                <Input type="number" inputMode="decimal" placeholder="Amount" {...field} />
+                <CurrencyInput placeholder="Amount" {...field} />
               </FormControl>
               <FormMessage />
             </FormItem>
@@ -353,7 +354,7 @@ const AssetActivityFields = ({ defaultAssetId }: AssetActivityFieldsProps) => {
               <FormItem>
                 <FormLabel>Price</FormLabel>
                 <FormControl>
-                  <Input type="number" inputMode="decimal" placeholder="Price" {...field} />
+                  <CurrencyInput placeholder="Price" {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -366,7 +367,7 @@ const AssetActivityFields = ({ defaultAssetId }: AssetActivityFieldsProps) => {
               <FormItem>
                 <FormLabel>Fee</FormLabel>
                 <FormControl>
-                  <Input type="number" inputMode="decimal" placeholder="Fee" {...field} />
+                  <CurrencyInput placeholder="Fee" {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>
@@ -406,7 +407,7 @@ const DividendActivityFields = ({ defaultAssetId }: DividendActivityFieldsProps)
           <FormItem>
             <FormLabel>Dividend Amount</FormLabel>
             <FormControl>
-              <Input type="number" inputMode="decimal" placeholder="Dividend Amount" {...field} />
+              <CurrencyInput placeholder="Dividend Amount" {...field} />
             </FormControl>
             <FormMessage />
           </FormItem>

src/pages/settings/goals/components/goal-form.tsx

@@ -97,7 +97,7 @@ export function GoalForm({ defaultValues, onSuccess = () => {} }: GoalFormlProps
               <FormItem>
                 <FormLabel>Target amount</FormLabel>
                 <FormControl>
-                  <Input type="number" inputMode="decimal" placeholder="Target amount" {...field} />
+                  <CurrencyInput placeholder="Target amount" {...field} />
                 </FormControl>
                 <FormMessage />
               </FormItem>