From 9cea76e01fca91aaf5d2d9a520184429a9936737 Mon Sep 17 00:00:00 2001
From: Blake Matthes <cowchmonkey@gmail.com>
Date: Thu, 24 Apr 2025 21:26:25 -0500
Subject: [PATCH] feat(ocme): added in option to manually add running number if
 camera isnt working

---
 .../src/components/ocme/ManuallyEnterRn.tsx   | 106 ++++++++++++++++
 frontend/src/components/ocme/WrapperCard.tsx  | 115 +++++++++---------
 2 files changed, 166 insertions(+), 55 deletions(-)
 create mode 100644 frontend/src/components/ocme/ManuallyEnterRn.tsx

diff --git a/frontend/src/components/ocme/ManuallyEnterRn.tsx b/frontend/src/components/ocme/ManuallyEnterRn.tsx
new file mode 100644
index 0000000..fa69369
--- /dev/null
+++ b/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>
+    );
+}
diff --git a/frontend/src/components/ocme/WrapperCard.tsx b/frontend/src/components/ocme/WrapperCard.tsx
index 6b4cb0e..6d5e836 100644
--- a/frontend/src/components/ocme/WrapperCard.tsx
+++ b/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,76 +90,79 @@ 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>
-
-                <Table>
-                    <TableHeader>
-                        <TableRow>
-                            {currentPallets.map((l) => (
-                                <TableHead key={l.key}>{l.label}</TableHead>
-                            ))}
-                        </TableRow>
-                    </TableHeader>
-                    {isLoading ? (
-                        <TableBody>
-                            {Array(3)
-                                .fill(0)
-                                .map((_, i) => (
-                                    <TableRow key={i}>
+                <div>
+                    <Table>
+                        <TableHeader>
+                            <TableRow>
+                                {currentPallets.map((l) => (
+                                    <TableHead key={l.key}>{l.label}</TableHead>
+                                ))}
+                            </TableRow>
+                        </TableHeader>
+                        {isLoading ? (
+                            <TableBody>
+                                {Array(3)
+                                    .fill(0)
+                                    .map((_, i) => (
+                                        <TableRow key={i}>
+                                            <TableCell className="font-medium">
+                                                <Skeleton className="h-4" />
+                                            </TableCell>
+                                            <TableCell>
+                                                <Skeleton className="h-4" />
+                                            </TableCell>
+                                            <TableCell>
+                                                <Skeleton className="h-4" />
+                                            </TableCell>
+                                            <TableCell>
+                                                <Skeleton className="h-4" />
+                                            </TableCell>
+                                            <TableCell>
+                                                <Skeleton className="h-4" />
+                                            </TableCell>
+                                        </TableRow>
+                                    ))}
+                            </TableBody>
+                        ) : (
+                            <TableBody>
+                                {info.map((i: any) => (
+                                    <TableRow key={i.runningNr}>
                                         <TableCell className="font-medium">
-                                            <Skeleton className="h-4" />
+                                            {i.lineNum}
                                         </TableCell>
+                                        <TableCell>{i.runningNr}</TableCell>
                                         <TableCell>
-                                            <Skeleton className="h-4" />
+                                            {format(
+                                                i?.upd_date.replace("Z", ""),
+                                                "M/d/yyyy hh:mm"
+                                            )}
                                         </TableCell>
+                                        <TableCell>{i.waitingFor}</TableCell>
                                         <TableCell>
-                                            <Skeleton className="h-4" />
-                                        </TableCell>
-                                        <TableCell>
-                                            <Skeleton className="h-4" />
-                                        </TableCell>
-                                        <TableCell>
-                                            <Skeleton className="h-4" />
+                                            <Button
+                                                variant="destructive"
+                                                size="icon"
+                                                onClick={() => clearLabel(i)}
+                                            >
+                                                <Trash />
+                                            </Button>
                                         </TableCell>
                                     </TableRow>
                                 ))}
-                        </TableBody>
-                    ) : (
-                        <TableBody>
-                            {info.map((i: any) => (
-                                <TableRow key={i.runningNr}>
-                                    <TableCell className="font-medium">
-                                        {i.lineNum}
-                                    </TableCell>
-                                    <TableCell>{i.runningNr}</TableCell>
-                                    <TableCell>
-                                        {format(
-                                            i?.upd_date.replace("Z", ""),
-                                            "M/d/yyyy hh:mm"
-                                        )}
-                                    </TableCell>
-                                    <TableCell>{i.waitingFor}</TableCell>
-                                    <TableCell>
-                                        <Button
-                                            variant="destructive"
-                                            size="icon"
-                                            onClick={() => clearLabel(i)}
-                                        >
-                                            <Trash />
-                                        </Button>
-                                    </TableCell>
-                                </TableRow>
-                            ))}
-                        </TableBody>
-                    )}
-                </Table>
+                            </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>