feat(cards): migrated cards over

frontend/src/components/dashboard/Cards.tsx

@@ -0,0 +1,183 @@
+import { useCardStore } from "@/lib/store/useCardStore";
+import { useForm } from "@tanstack/react-form";
+import { Label } from "../ui/label";
+import { Checkbox } from "../ui/checkbox";
+import { Input } from "../ui/input";
+// import {
+//     Select,
+//     SelectContent,
+//     SelectGroup,
+//     SelectItem,
+//     SelectLabel,
+//     SelectTrigger,
+//     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);
+    const form = useForm({
+        defaultValues: {
+            name: existing?.name || card.name,
+            rowType: existing?.type ?? card.rowType,
+            age: existing?.age ?? 90,
+            active: existing.active ? existing.active : false,
+        },
+        onSubmit: async ({ value }) => {
+            console.log(value);
+            const testCard: any = cards.filter(
+                (i: any) => i.name === value.name
+            );
+
+            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,
+                };
+                addCard(newCard);
+            } else {
+                removeCard(value.name);
+            }
+        },
+    });
+    return (
+        <div className="border-solid border-2">
+            <p>{card.name}</p>
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }}
+                className="flex flex-row"
+            >
+                <form.Field
+                    name="active"
+                    // validators={{
+                    //     // We can choose between form-wide and field-specific validators
+                    //     onChange: ({ value }) =>
+                    //         value.length > 3
+                    //             ? undefined
+                    //             : "Username must be longer than 3 letters",
+                    // }}
+                    children={(field) => {
+                        return (
+                            <div className="m-2 p-2 flex flex-row">
+                                <div>
+                                    <Label htmlFor="active">
+                                        <span>Active</span>
+                                    </Label>
+                                </div>
+
+                                <Checkbox
+                                    className="ml-2"
+                                    name={field.name}
+                                    onBlur={field.handleBlur}
+                                    checked={field.state.value}
+                                    onCheckedChange={(e) =>
+                                        field.handleChange(e)
+                                    }
+                                />
+                            </div>
+                        );
+                    }}
+                />
+                {!card.inventory && (
+                    <>
+                        <form.Field
+                            name="age"
+                            // validators={{
+                            //     // We can choose between form-wide and field-specific validators
+                            //     onChange: ({ value }) =>
+                            //         value.length > 3
+                            //             ? undefined
+                            //             : "Username must be longer than 3 letters",
+                            // }}
+                            children={(field) => {
+                                return (
+                                    <div className="m-2 min-w-48 p-2">
+                                        <Label htmlFor="active" className="">
+                                            Age
+                                        </Label>
+                                        <Input
+                                            name={field.name}
+                                            onBlur={field.handleBlur}
+                                            type="number"
+                                            onChange={(e) =>
+                                                field.handleChange(
+                                                    e.target.value
+                                                )
+                                            }
+                                        />
+                                    </div>
+                                );
+                            }}
+                        />
+
+                        {/* <form.Field
+                            name="rowType"
+                            //listeners={{onChange: ({value})=>{}}}
+                            children={(field) => {
+                                return (
+                                    <div className="m-2 min-w-48 max-w-96 p-2">
+                                        <Label htmlFor={field.name}>
+                                            Row Type
+                                        </Label>
+                                        <Select
+                                            value={field.state.value}
+                                            onValueChange={field.handleChange}
+                                        >
+                                            <SelectTrigger className="w-[180px]">
+                                                <SelectValue
+                                                    id={field.name}
+                                                    placeholder="Select Role"
+                                                />
+                                            </SelectTrigger>
+                                            <SelectContent>
+                                                <SelectGroup>
+                                                    <SelectLabel>
+                                                        Row Type
+                                                    </SelectLabel>
+                                                    <SelectItem value="empty">
+                                                        Empty
+                                                    </SelectItem>
+                                                    <SelectItem value="fg">
+                                                        Finished Goods
+                                                    </SelectItem>
+                                                    <SelectItem value="materials">
+                                                        Materials
+                                                    </SelectItem>
+                                                    <SelectItem value="waste">
+                                                        Waste
+                                                    </SelectItem>
+                                                    <SelectItem value="packaging">
+                                                        Packaging
+                                                    </SelectItem>
+                                                </SelectGroup>
+                                            </SelectContent>
+                                        </Select>
+                                    </div>
+                                );
+                            }}
+                        /> */}
+                    </>
+                )}
+                <div className="mt-7">
+                    <Button type="submit" onClick={() => form.handleSubmit()}>
+                        Save Card
+                    </Button>
+                </div>
+            </form>
+        </div>
+    );
+}