feat(silo attached detach): added in silo attach detach setup in the silo card

frontend/src/components/logistics/siloAdjustments/AttachSilo.tsx

@@ -0,0 +1,164 @@
+import { Button } from "@/components/ui/button";
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog";
+
+import { useAppForm } from "@/utils/formStuff";
+import { getMachineConnected } from "@/utils/querys/logistics/machineConnected";
+import { getMachineNotConnected } from "@/utils/querys/logistics/notConnected";
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { useState } from "react";
+import { toast } from "sonner";
+
+export function AttachSilo(props: any) {
+    const [open, setOpen] = useState(false);
+    const { data, isError, isLoading, refetch } = useQuery(
+        getMachineNotConnected({
+            siloID: props.silo.LocationID,
+            connectionType: "detached",
+        })
+    );
+    const { refetch: attached } = useQuery(
+        getMachineConnected({
+            siloID: props.silo.LocationID,
+            connectionType: "connected",
+        })
+    );
+
+    const form = useAppForm({
+        defaultValues: {
+            laneId: props.silo.LocationID,
+            productionLotId: "",
+            machineId: "",
+        },
+        onSubmit: async ({ value }) => {
+            console.log(value);
+            try {
+                const res = await axios.post(
+                    "/api/logistics/attachsilo",
+                    value
+                );
+
+                if (res.data.success) {
+                    toast.success(res.data.message);
+                    refetch();
+                    attached();
+                    form.reset();
+                    setOpen(!open);
+                } else {
+                    console.log(res.data);
+                    toast.error(res.data.message);
+                    refetch();
+                    form.reset();
+                    setOpen(!open);
+                }
+            } catch (error) {
+                console.log(error);
+                toast.error(
+                    "There was an error attaching the silo please try again, if persist please enter a helpdesk ticket."
+                );
+            }
+        },
+    });
+
+    if (isError)
+        return (
+            <div>
+                <p>There was an error loading data</p>
+            </div>
+        );
+
+    if (isLoading)
+        return (
+            <div>
+                <p>Loading....</p>
+            </div>
+        );
+
+    // convert the array that comes over to label and value
+    const tranMachine = data.map((i: any) => ({
+        value: i.machineId.toString(),
+        label: i.name,
+    }));
+
+    return (
+        <Dialog open={open}>
+            <DialogTrigger asChild>
+                <Button variant="outline" onClick={() => setOpen(!open)}>
+                    Attach Silo
+                </Button>
+            </DialogTrigger>
+
+            <DialogContent className="sm:max-w-[425px]">
+                <form
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        form.handleSubmit();
+                    }}
+                >
+                    <DialogHeader>
+                        <DialogTitle>
+                            Attach silo for: {props.silo.Description}
+                        </DialogTitle>
+                        <DialogDescription>
+                            Enter the new lotnumber, select the machine you
+                            would like to attach.
+                        </DialogDescription>
+                    </DialogHeader>
+                    <div>
+                        <p className="text-sm">
+                            NOTE: If the machine you are trying to attach is not
+                            showing in the drop down this means it is already
+                            attached to this silo.
+                        </p>
+                    </div>
+                    <div className="mt-3">
+                        <form.AppField
+                            name="productionLotId"
+                            children={(field) => (
+                                <field.InputField
+                                    label="Lot Number"
+                                    inputType="number"
+                                    required={true}
+                                />
+                            )}
+                        />
+                    </div>
+                    <div className="mt-2">
+                        <form.AppField
+                            name="machineId"
+                            children={(field) => (
+                                <field.SelectField
+                                    label="Select Machine"
+                                    options={tranMachine}
+                                />
+                            )}
+                        />
+                    </div>
+
+                    <DialogFooter className="mt-2">
+                        <DialogClose asChild>
+                            <Button
+                                variant="outline"
+                                onClick={() => setOpen(!open)}
+                            >
+                                Cancel
+                            </Button>
+                        </DialogClose>
+                        <form.AppForm>
+                            <form.SubmitButton>Attach</form.SubmitButton>
+                        </form.AppForm>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    );
+}

frontend/src/components/logistics/siloAdjustments/DetachSilo.tsx

@@ -0,0 +1,145 @@
+import { Button } from "@/components/ui/button";
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog";
+
+import { useAppForm } from "@/utils/formStuff";
+import { getMachineConnected } from "@/utils/querys/logistics/machineConnected";
+import { getMachineNotConnected } from "@/utils/querys/logistics/notConnected";
+
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { useState } from "react";
+import { toast } from "sonner";
+
+export function DetachSilo(props: any) {
+    const [open, setOpen] = useState(false);
+    const { data, isError, isLoading, refetch } = useQuery(
+        getMachineConnected({
+            siloID: props.silo.LocationID,
+            connectionType: "connected",
+        })
+    );
+
+    const { refetch: notConnected } = useQuery(
+        getMachineNotConnected({
+            siloID: props.silo.LocationID,
+            connectionType: "detached",
+        })
+    );
+
+    const form = useAppForm({
+        defaultValues: {
+            laneId: props.silo.LocationID,
+            machineId: 0,
+        },
+        onSubmit: async ({ value }) => {
+            try {
+                const res = await axios.post(
+                    "/api/logistics/detachsilo",
+                    value
+                );
+
+                if (res.status === 200) {
+                    toast.success(res.data.message);
+
+                    refetch();
+                    notConnected();
+                    form.reset();
+                    setOpen(!open);
+                } else {
+                    console.log(res.data);
+                    toast.error(res.data.message);
+                    refetch();
+                    form.reset();
+                    setOpen(!open);
+                }
+            } catch (error) {
+                console.log(error);
+                toast.error(
+                    "There was an error detaching the silo please try again, if persist please enter a helpdesk ticket."
+                );
+            }
+        },
+    });
+
+    if (isError)
+        return (
+            <div>
+                <p>There was an error loading data</p>
+            </div>
+        );
+
+    if (isLoading)
+        return (
+            <div>
+                <p>Loading....</p>
+            </div>
+        );
+
+    // convert the array that comes over to label and value
+    const tranMachine = data.map((i: any) => ({
+        value: i.machineId.toString(),
+        label: i.name,
+    }));
+    return (
+        <Dialog open={open}>
+            <DialogTrigger asChild>
+                <Button
+                    variant="outline"
+                    onClick={() => setOpen(!open)}
+                    disabled={data.length === 0}
+                >
+                    Detach Silo
+                </Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[425px]">
+                <form
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        form.handleSubmit();
+                    }}
+                >
+                    <DialogHeader>
+                        <DialogTitle>
+                            Attach silo for: {props.silo.Description}
+                        </DialogTitle>
+                        <DialogDescription>
+                            Select the machine you would like to detach.
+                        </DialogDescription>
+                    </DialogHeader>
+                    <div className="grid gap-4">
+                        <div className="grid gap-3">
+                            <div className="mt-2">
+                                <form.AppField
+                                    name="machineId"
+                                    children={(field) => (
+                                        <field.SelectField
+                                            label="Select Machine"
+                                            options={tranMachine}
+                                        />
+                                    )}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    <DialogFooter>
+                        <DialogClose asChild>
+                            <Button variant="outline">Cancel</Button>
+                        </DialogClose>
+                        <form.AppForm>
+                            <form.SubmitButton>Detach</form.SubmitButton>
+                        </form.AppForm>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    );
+}

frontend/src/components/logistics/siloAdjustments/SiloCard.tsx

@@ -19,6 +19,8 @@ import { CircleAlert } from "lucide-react";
 import { useState } from "react";
 import { toast } from "sonner";
 import ChartData from "./ChartData";
+import { AttachSilo } from "./AttachSilo";
+import { DetachSilo } from "./DetachSilo";
 
 export default function SiloCard(data: any) {
     const token = localStorage.getItem("auth_token");
@@ -151,6 +153,7 @@ export default function SiloCard(data: any) {
                                                     />
                                                     <Button
                                                         className="ml-1"
+                                                        variant="outline"
                                                         type="submit"
                                                         onClick={
                                                             form.handleSubmit
@@ -188,13 +191,17 @@ export default function SiloCard(data: any) {
                 <div className="grow max-w-[600px]">
                     <ChartData laneId={silo.LocationID} />
 
-                    <div className="flex justify-end m-1">
-                        <Link
-                            to={"/siloAdjustments/$hist"}
-                            params={{ hist: silo.LocationID }}
-                        >
-                            Historical Data
-                        </Link>
+                    <div className="flex justify-end m-1 gap-3">
+                        <AttachSilo silo={silo} />
+                        <DetachSilo silo={silo} />
+                        <Button variant="outline">
+                            <Link
+                                to={"/siloAdjustments/$hist"}
+                                params={{ hist: silo.LocationID }}
+                            >
+                                Historical Data
+                            </Link>
+                        </Button>
                     </div>
                 </div>
             </div>

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

@@ -1,5 +1,5 @@
 import ConsumeMaterial from "@/components/logistics/materialHelper/consumption/ConsumeMaterial";
-import PreformReturn from "@/components/logistics/materialHelper/consumption/PreformReturn";
+import PreformReturn from "@/components/logistics/materialHelper/consumption/MaterialReturn";
 import { createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute(

frontend/src/utils/formStuff/index.tsx

@@ -0,0 +1,14 @@
+import { createFormHook, createFormHookContexts } from "@tanstack/react-form";
+import { InputField } from "./options/InputField";
+import { SubmitButton } from "./options/submitButton";
+import { SelectField } from "./options/selectorField";
+
+export const { fieldContext, useFieldContext, formContext, useFormContext } =
+    createFormHookContexts();
+
+export const { useAppForm } = createFormHook({
+    fieldComponents: { InputField, SelectField },
+    formComponents: { SubmitButton },
+    fieldContext,
+    formContext,
+});

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

@@ -0,0 +1,16 @@
+import { AnyFieldMeta } from "@tanstack/react-form";
+import { ZodError } from "zod";
+
+type FieldErrorsProps = {
+    meta: AnyFieldMeta;
+};
+
+export const FieldErrors = ({ meta }: FieldErrorsProps) => {
+    if (!meta.isTouched) return null;
+
+    return meta.errors.map(({ message }: ZodError, index) => (
+        <p key={index} className="text-sm font-medium text-destructive">
+            {message}
+        </p>
+    ));
+};

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

@@ -1,32 +1,28 @@
-//import { Input } from "@/components/ui/input";
-//import { Label } from "@radix-ui/react-dropdown-menu";
+import { Label } from "@/components/ui/label";
+import { useFieldContext } from "..";
+import { Input } from "@/components/ui/input";
+import { FieldErrors } from "./FieldErrors";
 
-// export const FormInput = (form: any, label: string) => {
-//     // <form.Field
-//     //     name="username"
-//     //     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 max-w-96 p-2">
-//     //                 <Label htmlFor="username">{label}</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>
-//     //         );
-//     //     }}
-//     // />;
-// };
+type InputFieldProps = {
+    label: string;
+    inputType: string;
+    required: boolean;
+};
+export const InputField = ({ label, inputType, required }: InputFieldProps) => {
+    const field = useFieldContext<any>();
+
+    return (
+        <div className="grid gap-3">
+            <Label htmlFor={field.name}>{label}</Label>
+            <Input
+                id={field.name}
+                value={field.state.value}
+                onChange={(e) => field.handleChange(e.target.value)}
+                onBlur={field.handleBlur}
+                type={inputType}
+                required={required}
+            />
+            <FieldErrors meta={field.state.meta} />
+        </div>
+    );
+};

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

@@ -0,0 +1,57 @@
+import { Label } from "@/components/ui/label";
+import { useFieldContext } from "..";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+import { FieldErrors } from "./FieldErrors";
+
+type SelectOption = {
+    value: string;
+    label: string;
+};
+
+type SelectFieldProps = {
+    label: string;
+    options: SelectOption[];
+    placeholder?: string;
+};
+
+export const SelectField = ({
+    label,
+    options,
+    placeholder,
+}: SelectFieldProps) => {
+    const field = useFieldContext<string>();
+
+    return (
+        <div className="grid gap-3">
+            <div className="grid gap-3">
+                <Label htmlFor={field.name}>{label}</Label>
+                <Select
+                    value={field.state.value}
+                    onValueChange={(value) => field.handleChange(value)}
+                >
+                    <SelectTrigger
+                        id={field.name}
+                        onBlur={field.handleBlur}
+                        className="w-[380px]"
+                    >
+                        <SelectValue placeholder={placeholder} />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {options.map((option) => (
+                            <SelectItem key={option.value} value={option.value}>
+                                {option.label}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+            </div>
+            <FieldErrors meta={field.state.meta} />
+        </div>
+    );
+};

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

@@ -0,0 +1,24 @@
+import { useStore } from "@tanstack/react-form";
+import { useFormContext } from "..";
+import { Button } from "@/components/ui/button";
+
+type SubmitButtonProps = {
+    children: React.ReactNode;
+};
+
+export const SubmitButton = ({ children }: SubmitButtonProps) => {
+    const form = useFormContext();
+
+    const [isSubmitting] = useStore(form.store, (state) => [
+        state.isSubmitting,
+        state.canSubmit,
+    ]);
+
+    return (
+        <div className="">
+            <Button type="submit" disabled={isSubmitting}>
+                {children}
+            </Button>
+        </div>
+    );
+};

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

@@ -0,0 +1,23 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getMachineConnected(siloCon: any) {
+    return queryOptions({
+        queryKey: [`siloConnectionAttached-${siloCon.siloID}`],
+        queryFn: () => fetchStockSilo(siloCon),
+        //enabled:
+        //staleTime: 1000,
+        //refetchInterval: 60 * 1000,
+        refetchOnWindowFocus: true,
+    });
+}
+
+const fetchStockSilo = async (siloCon: any) => {
+    const { data } = await axios.post(`/api/logistics/siloconnection`, {
+        siloID: siloCon.siloID,
+        connectionType: siloCon.connectionType,
+    });
+    // if we are not localhost ignore the devDir setting.
+    //const url: string = window.location.host.split(":")[0];
+    return data.data ?? [];
+};

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

@@ -0,0 +1,23 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getMachineNotConnected(siloCon: any) {
+    return queryOptions({
+        queryKey: [`siloConnectionNotConnected-${siloCon.siloID}`],
+        queryFn: () => fetchStockSilo(siloCon),
+        //enabled:
+        //staleTime: 1000,
+        //refetchInterval: 60 * 1000,
+        refetchOnWindowFocus: true,
+    });
+}
+
+const fetchStockSilo = async (siloCon: any) => {
+    const { data } = await axios.post(`/api/logistics/siloconnection`, {
+        siloID: siloCon.siloID,
+        connectionType: siloCon.connectionType,
+    });
+    // if we are not localhost ignore the devDir setting.
+    //const url: string = window.location.host.split(":")[0];
+    return data.data ?? [];
+};