test(added in commands): relocate and updated to remove

frontend/src/components/logistics/helperCommands/commands/Relocate.tsx

@@ -0,0 +1,133 @@
+import { LstCard } from "@/components/extendedUI/LstCard";
+import { Button } from "@/components/ui/button";
+import { CardContent, CardHeader } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useForm } from "@tanstack/react-form";
+import axios from "axios";
+import { useState } from "react";
+import { toast } from "sonner";
+
+export default function Relocate() {
+    const [bookingIn, setBookingIn] = useState(false);
+    const form = useForm({
+        defaultValues: { runningNr: " ", lane: "" },
+        onSubmit: async ({ value }) => {
+            // Do something with form data
+            setBookingIn(true);
+
+            try {
+                const res = await axios.post("/api/ocp/bookin", {
+                    runningNr: parseInt(value.runningNr),
+                });
+
+                if (res.data.success) {
+                    toast.success(res.data.message);
+                    form.reset();
+                    setBookingIn(false);
+                } else {
+                    console.log(res.data.data.errors);
+                    toast.error(res.data.data.errors[0]?.message);
+                    form.reset();
+                    setBookingIn(false);
+                }
+            } catch (error) {
+                console.log(error);
+                toast.error(
+                    "There was an error booking in pallet please validate you entered the correct info and try again."
+                );
+                setBookingIn(false);
+            }
+        },
+    });
+    return (
+        <LstCard>
+            <CardHeader>
+                <p>Relocate a pallet to another lane</p>
+            </CardHeader>
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }}
+            >
+                <CardContent>
+                    <form.Field
+                        name="runningNr"
+                        validators={{
+                            // We can choose between form-wide and field-specific validators
+                            onChange: ({ value }) =>
+                                value.length > 2
+                                    ? undefined
+                                    : "Please enter a valid running number",
+                        }}
+                        children={(field) => {
+                            return (
+                                <div className="">
+                                    <Label htmlFor="runningNr" className="mb-2">
+                                        Runnning 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>
+                            );
+                        }}
+                    />
+                    <form.Field
+                        name="lane"
+                        validators={{
+                            // We can choose between form-wide and field-specific validators
+                            onChange: ({ value }) =>
+                                value.length > 2
+                                    ? undefined
+                                    : "Please enter a valid running number",
+                        }}
+                        children={(field) => {
+                            return (
+                                <div className="">
+                                    <Label htmlFor="runningNr" className="mb-2">
+                                        Enter lane
+                                    </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="flex mt-2 justify-end">
+                        <Button
+                            onClick={form.handleSubmit}
+                            disabled={bookingIn}
+                        >
+                            Relocate
+                        </Button>
+                    </div>
+                </CardContent>
+            </form>
+        </LstCard>
+    );
+}

frontend/src/components/logistics/helperCommands/helperPage.tsx

@@ -1,7 +1,9 @@
 import Bookin from "./commands/Bookin";
+import Relocate from "./commands/Relocate";
 import RemoveAsNonReusable from "./commands/RemoveAsNonReusable";
 
 export default function HelperPage() {
+    const url: string = window.location.host.split(":")[0];
     return (
         <div className="flex flex-wrap m-2 justify-center">
             <div className="m-1">
@@ -11,6 +13,7 @@ export default function HelperPage() {
             <div className="m-1">
                 <RemoveAsNonReusable />
             </div>
+            <div className="m-1">{url === "localhost" && <Relocate />}</div>
         </div>
     );
 }

frontend/src/routes/(logistics)/materialHelper/consumption/index.tsx

@@ -1,7 +1,10 @@
 import ConsumeMaterial from "@/components/logistics/materialHelper/consumption/ConsumeMaterial";
-import {createFileRoute} from "@tanstack/react-router";
+import PreformReturn from "@/components/logistics/materialHelper/consumption/PreformReturn";
+import { createFileRoute } from "@tanstack/react-router";
 
-export const Route = createFileRoute("/(logistics)/materialHelper/consumption/")({
+export const Route = createFileRoute(
+    "/(logistics)/materialHelper/consumption/"
+)({
     component: RouteComponent,
     head: () => ({
         meta: [
@@ -17,9 +20,11 @@ export const Route = createFileRoute("/(logistics)/materialHelper/consumption/")
 });
 
 function RouteComponent() {
+    const url: string = window.location.host.split(":")[0];
     return (
         <div>
             <ConsumeMaterial />
+            {url === "localhost" && <PreformReturn />}
         </div>
     );
 }

frontend/src/routes/(logistics)/materialHelper/index.tsx

@@ -1,5 +1,5 @@
 import MaterialHelperPage from "@/components/logistics/materialHelper/materialHelperPage";
-import {createFileRoute} from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/(logistics)/materialHelper/")({
     component: RouteComponent,