feat(ocme): added in option to manually add running number if camera isnt working

frontend/src/components/ocme/ManuallyEnterRn.tsx

@@ -0,0 +1,106 @@
+import { useForm } from "@tanstack/react-form";
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+import axios from "axios";
+import { toast } from "sonner";
+import { Button } from "../ui/button";
+import { useState } from "react";
+
+export default function ManuallyEnterRn() {
+    const [sending, setSendingRn] = useState(false);
+    const form = useForm({
+        defaultValues: {
+            runningNr: "",
+        },
+        onSubmit: async ({ value }) => {
+            console.log(value);
+            setSendingRn(true);
+            try {
+                const res = await axios.post("/ocme/api/v1/postRunningNumber", {
+                    runningNr: value.runningNr,
+                    areaFrom: "wrapper_1",
+                    completed: true,
+                });
+
+                if (res.data.success) {
+                    form.reset();
+                    toast.success(
+                        `${value.runningNr} was just created please login`
+                    );
+                    setTimeout(() => {
+                        setSendingRn(false);
+                    }, 3 * 1000);
+                }
+
+                if (!res.data.success) {
+                    toast.error(res.data.message);
+                    setTimeout(() => {
+                        setSendingRn(false);
+                    }, 3 * 1000);
+                }
+            } catch (error) {
+                //console.log(error);
+                toast.error("There was an error registering");
+                setTimeout(() => {
+                    setSendingRn(false);
+                }, 3 * 1000);
+            }
+        },
+    });
+    return (
+        <div>
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    //e.stopPropagation();
+                }}
+            >
+                <form.Field
+                    name="runningNr"
+                    validators={{
+                        // We can choose between form-wide and field-specific validators
+                        onChange: ({ value }) =>
+                            value.length > 3
+                                ? undefined
+                                : "pallet number must be greater than 4 numbers",
+                    }}
+                    children={(field) => {
+                        return (
+                            <div className="m-2 min-w-48 max-w-96 p-2 flex flex-row">
+                                <div>
+                                    <Label htmlFor="runningNr" className="mb-2">
+                                        Running Number
+                                    </Label>
+                                    <Input
+                                        name={field.name}
+                                        value={field.state.value}
+                                        onBlur={field.handleBlur}
+                                        type="number"
+                                        onChange={(e) =>
+                                            field.handleChange(e.target.value)
+                                        }
+                                    />
+                                    {field.state.meta.errors.length ? (
+                                        <em>
+                                            {field.state.meta.errors.join(",")}
+                                        </em>
+                                    ) : null}
+                                </div>
+                                <div className="ml-1 mt-5">
+                                    <Button
+                                        className="ml-1"
+                                        type="submit"
+                                        onClick={form.handleSubmit}
+                                        disabled={sending}
+                                    >
+                                        Submit
+                                    </Button>
+                                </div>
+                            </div>
+                        );
+                    }}
+                />
+            </form>
+        </div>
+    );
+}

frontend/src/components/ocme/WrapperCard.tsx

@@ -16,6 +16,8 @@ import { getOcmeInfo } from "@/utils/querys/production/getOcmeInfo";
 import { useQuery } from "@tanstack/react-query";
 import { format } from "date-fns";
 import { Trash } from "lucide-react";
+import ManuallyEnterRn from "./ManuallyEnterRn";
+import { Separator } from "../ui/separator";
 
 const currentPallets = [
     { key: "line", label: "Line" },
@@ -88,10 +90,10 @@ export default function WrapperManualTrigger() {
 
     const info = data?.filter((r: any) => r.areaFrom === "wrapper_1");
     return (
-        <LstCard className="m-2 p-2">
+        <LstCard className="m-2 p-2 w-auto">
             <ScrollArea className="max-h-[200px]">
                 <span>Wrapper Pallet Info</span>
-
+                <div>
                     <Table>
                         <TableHeader>
                             <TableRow>
@@ -153,11 +155,14 @@ export default function WrapperManualTrigger() {
                             </TableBody>
                         )}
                     </Table>
+                </div>
             </ScrollArea>
 
             <div>
                 <hr />
                 <p className="text-center mb-3">Manual Trigger</p>
+                <ManuallyEnterRn />
+                <Separator className="m-1" />
                 <div className="flex flex-row justify-between">
                     <Button onClick={cameraTrigger}>Camera</Button>
                 </div>