refactor(cards): allow for changes to the existing card and corrected the display of current stats

frontend/src/components/dashboard/AddCards.tsx

@@ -24,12 +24,18 @@ export function AddCards() {
                     </DialogDescription>
                 </DialogHeader>
 
-                <Cards name={"ppoo"} inventory />
-                <Cards name={"inv-empty"} rowType={"empty"} />
-                <Cards name={"inv-fg"} rowType={"fg"} />
-                <Cards name={"inv-materials"} rowType={"materials"} />
-                <Cards name={"inv-packaging"} rowType={"packaging"} />
-                <Cards name={"inv-waste"} rowType={"waste"} />
+                <div className="flex flex-row">
+                    <div className="">
+                        <Cards name={"ppoo"} inventory />
+                        <Cards name={"inv-empty"} rowType={"empty"} />
+                        <Cards name={"inv-fg"} rowType={"fg"} />
+                    </div>
+                    <div className="">
+                        <Cards name={"inv-materials"} rowType={"materials"} />
+                        <Cards name={"inv-packaging"} rowType={"packaging"} />
+                        <Cards name={"inv-waste"} rowType={"waste"} />
+                    </div>
+                </div>
 
                 {/* <DialogFooter>
                     <Button type="submit">Save changes</Button>

frontend/src/components/dashboard/Cards.tsx

@@ -13,19 +13,18 @@ import { Input } from "../ui/input";
 //     SelectValue,
 // } from "../ui/select";
 import { Button } from "../ui/button";
-import { toast } from "sonner";
 
 export default function Cards(card: any) {
     const { addCard, removeCard, cards } = useCardStore();
     let existing: any = cards.filter((n: any) => n.name === card.name);
 
-    console.log(existing);
+    //console.log(existing);
     const form = useForm({
         defaultValues: {
-            name: existing?.name || card.name,
-            rowType: existing?.type ?? card.rowType,
-            age: existing?.age ?? 90,
-            active: existing.active ? existing.active : false,
+            name: existing[0]?.name || card.name,
+            rowType: existing[0]?.type ?? card.rowType,
+            age: existing[0]?.age ?? 90,
+            active: existing[0]?.active ?? false,
         },
         onSubmit: async ({ value }) => {
             console.log(value);
@@ -34,17 +33,19 @@ export default function Cards(card: any) {
             );
 
             if (value.active) {
-                if (testCard.length > 0) {
-                    toast.error("Card already exists");
-                    return;
-                }
-                // change the name for a type card
                 const newCard = {
                     name: `${value.name}`,
                     rowType: value.rowType,
                     age: value.age ?? 90,
                     active: value.active,
                 };
+                if (testCard.length > 0) {
+                    removeCard(value.name);
+                    addCard(newCard);
+                    return;
+                }
+                // change the name for a type card
+
                 addCard(newCard);
             } else {
                 removeCard(value.name);
@@ -52,7 +53,7 @@ export default function Cards(card: any) {
         },
     });
     return (
-        <div className="border-solid border-2">
+        <div className="border-solid border-2 m-2">
             <p>{card.name}</p>
             <form
                 onSubmit={(e) => {
@@ -112,6 +113,7 @@ export default function Cards(card: any) {
                                         <Input
                                             name={field.name}
                                             onBlur={field.handleBlur}
+                                            value={field.state.value}
                                             type="number"
                                             onChange={(e) =>
                                                 field.handleChange(