fix(dashboard): some more rending fixes due to some strange behaivers

frontend/src/components/dashboard/Cards.tsx

@@ -1,25 +1,15 @@
 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 { useAppForm } from "@/utils/formStuff";
 
 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({
+    const form = useAppForm({
         defaultValues: {
             name: existing[0]?.name || card.name,
             rowType: existing[0]?.type ?? card.rowType,
@@ -62,7 +52,7 @@ export default function Cards(card: any) {
                 }}
                 className="flex flex-row"
             >
-                <form.Field
+                <form.AppField
                     name="active"
                     // validators={{
                     //     // We can choose between form-wide and field-specific validators
@@ -95,83 +85,16 @@ export default function Cards(card: any) {
                 />
                 {!card.inventory && (
                     <>
-                        <form.Field
+                        <form.AppField
                             name="age"
-                            // validators={{
+                            children={(field) => (
-                            //     // We can choose between form-wide and field-specific validators
+                                <field.InputField
-                            //     onChange: ({ value }) =>
+                                    label="Age"
-                            //         value.length > 3
+                                    inputType="number"
-                            //             ? undefined
+                                    required={true}
-                            //             : "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}
-                                            value={field.state.value}
-                                            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">

frontend/src/components/dashboard/DashBoard.tsx

@@ -27,9 +27,10 @@ export default function DashBoard() {
                         </div>
                     );
                 } else {
+                    //console.log(name.split("-")[0], a);
                     return (
                         <div key={a.name} className="col-span-3">
-                            <Component age={a.age} type={a.rowType} />
+                            <Component data={a} />
                         </div>
                     );
                 }

frontend/src/components/logistics/warehouse/InventoryCard.tsx

@@ -9,8 +9,12 @@ import { useQuery } from "@tanstack/react-query";
 //import { toast } from "sonner";
 
 export default function INVCheckCard(props: any) {
-    //{ style = {} }
+    const { age, rowType } = props.data;
-    const { data, isError, isLoading } = useQuery(getinventoryCheck(props));
+
+    //console.log(props.data);
+    const { data, isError, isLoading } = useQuery(
+        getinventoryCheck({ age: age })
+    );
 
     if (isLoading) return <div>Loading inventory data...</div>;
     if (isError) {
@@ -23,11 +27,11 @@ export default function INVCheckCard(props: any) {
     let laneData: any = data;
     if (props.type != "") {
         laneData = laneData.filter(
-            (l: any) => l.rowType === props.type.toUpperCase()
+            (l: any) => l.rowType === rowType.toUpperCase()
         );
 
         // age
-        laneData = laneData.filter((l: any) => l.DaysSinceLast >= props.age);
+        laneData = laneData.filter((l: any) => l.DaysSinceLast >= age);
     }
 
     // const handleCloseCard = () => {
@@ -36,5 +40,5 @@ export default function INVCheckCard(props: any) {
     //     toast.success("card removed");
     // };
 
-    return <InvTable columns={invColumns} data={laneData} info={props} />;
+    return <InvTable columns={invColumns} data={laneData} info={props.data} />;
 }

frontend/src/components/ui/popover.tsx

@@ -28,7 +28,7 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
           className
         )}
         {...props}

frontend/src/utils/formStuff/options/checkbox.tsx

@@ -0,0 +1,34 @@
+import { Checkbox } from "@radix-ui/react-checkbox";
+import { useFieldContext } from "..";
+import { Label } from "@/components/ui/label";
+import { FieldErrors } from "./FieldErrors";
+
+type CheckboxFieldProps = {
+    label: string;
+    description?: string;
+};
+
+export const CheckboxField = ({ label }: CheckboxFieldProps) => {
+    const field = useFieldContext<boolean>();
+
+    return (
+        <div>
+            <div className="m-2 p-2 flex flex-row">
+                <div>
+                    <Label htmlFor="active">
+                        <span>{label}</span>
+                    </Label>
+                </div>
+                <Checkbox
+                    id={field.name}
+                    checked={field.state.value}
+                    onCheckedChange={(checked) => {
+                        field.handleChange(checked === true);
+                    }}
+                    onBlur={field.handleBlur}
+                />
+            </div>
+            <FieldErrors meta={field.state.meta} />
+        </div>
+    );
+};

frontend/src/utils/querys/logistics/getInventoryCheck.tsx

@@ -13,7 +13,7 @@ export function getinventoryCheck(data: any) {
 }
 
 const fetchStockSilo = async (info: any) => {
-    console.log(info);
+    //console.log("What tpye of info:", info);
     const { data } = await axios.post(`/api/logistics/cyclecountcheck`, {
         age: info.age ? parseInt(info.age) : null,
         type: "",