fixed issues with number input on firefox, created handleNumericKeydown function to deal with that issue

src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx

@@ -5,6 +5,8 @@ import { PortfolioSettingsType } from "../../utils";
 import { Button } from "@/app/shadcn_components/ui/button";
 import { Input } from "@/app/shadcn_components/ui/input";
 import { useRouter } from "next/navigation";
+import { handleNumericKeyDown } from "@/app/utils";
+
 
 export default function PortfolioSettings({
   portfolioId,
@@ -16,6 +18,8 @@ export default function PortfolioSettings({
   // Running in the client
   const router = useRouter();
 
+  //Renaming functionality
+
   const [portfolioName, setPortfolioName] = useState(
     portfolioSettingsData.name
   );
@@ -33,16 +37,42 @@ export default function PortfolioSettings({
 
   // Last thing we'd need to do is make that update in the db
 
+  //Change budget functionality
+  const [portfolioBudget, setPortfolioBudget] = useState<number|string|null>(
+    portfolioSettingsData.budget
+  );
+
+  function handleBudgetUpdate() {
+    // API call to change the budget
+    // apiFunction(portfolioBudget)
+    // Update portfolio function with budget is equal to portfolioBudget
+    console.log(portfolioBudget)
+    router.refresh();
+  }
+  
+  function handlePortfolioBudgetUpdate(e: React.ChangeEvent<HTMLInputElement>) {
+    setPortfolioBudget(Number(e.target.value));
+  }
+
   return (
     <>
       <div className="flex justify-center max-w-8xl w-8xl">
         <ul>
           <li>
-            Name:{" "}
-            <Input value={portfolioName} onChange={handlePortfolioNameChange} />{" "}
+            Name:
+            <Input value={portfolioName} onChange={handlePortfolioNameChange} />
             <Button onClick={handleRename}>Rename</Button>
           </li>
-          <li>Budget: {portfolioSettingsData.budget}</li>
+          <li>
+            Budget:
+            <Input
+              type="number"
+              value={portfolioBudget ?? undefined}
+              onChange={handlePortfolioBudgetUpdate}
+              onKeyDown={(e) => {handleNumericKeyDown(e)}}
+            />
+            <Button onClick={handleBudgetUpdate}>Update</Button>
+          </li>
           <li>Goal: {portfolioSettingsData.goal}</li>
           <li>Status: {portfolioSettingsData.status}</li>
         </ul>

src/app/utils.ts

@@ -1,4 +1,16 @@
 import { Rating } from "./db/schema/property";
+import { KeyboardEvent} from "react";
+
+ export function handleNumericKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+
+    /**
+     * Allowing: Integers | Backspace | Tab | Delete | Left & Right arrow keys
+     **/
+ 
+    const regex = new RegExp(/(^\d*$)|(Backspace|Tab|Delete|ArrowLeft|ArrowRight|ArrowUp|ArrowDown)/);
+         
+    return !event.key.match(regex) && event.preventDefault();
+ }
 
 export function convertDaysToWorkingWeeks(days: number | null) {
   if (days === null) {
@@ -149,3 +161,5 @@ export function roundToDecimalPlaces(
   const factor = 10 ** decimalPlaces;
   return Math.round(number * factor) / factor;
 }
+
+