From 8324fffeb664bff3751ffc26e988a4a506b658a9 Mon Sep 17 00:00:00 2001 From: Blake Matthes Date: Wed, 19 Mar 2025 17:11:00 -0500 Subject: [PATCH] test(ocp): more work on the dashboard --- .../components/production/ocp/LabelLog.tsx | 89 ++++++- .../src/components/production/ocp/Lots.tsx | 170 +++++++++++++- .../ocp/ManualPrinting/ManualPrint.tsx | 32 +++ .../ocp/ManualPrinting/ManualPrintForm.tsx | 217 ++++++++++++++++++ .../ocp/ManualPrinting/ManualPrintLabel.ts | 44 ++++ .../src/components/providers/Providers.tsx | 3 + frontend/src/components/ui/select.tsx | 183 +++++++++++++++ frontend/src/components/ui/textarea.tsx | 18 ++ frontend/src/routes/ocp/lots.tsx | 9 - frontend/src/types/lots.ts | 19 ++ .../src/utils/querys/production/labels.tsx | 20 ++ frontend/src/utils/querys/production/lots.tsx | 21 ++ 12 files changed, 814 insertions(+), 11 deletions(-) create mode 100644 frontend/src/components/production/ocp/ManualPrinting/ManualPrint.tsx create mode 100644 frontend/src/components/production/ocp/ManualPrinting/ManualPrintForm.tsx create mode 100644 frontend/src/components/production/ocp/ManualPrinting/ManualPrintLabel.ts create mode 100644 frontend/src/components/ui/select.tsx create mode 100644 frontend/src/components/ui/textarea.tsx delete mode 100644 frontend/src/routes/ocp/lots.tsx create mode 100644 frontend/src/types/lots.ts create mode 100644 frontend/src/utils/querys/production/labels.tsx create mode 100644 frontend/src/utils/querys/production/lots.tsx diff --git a/frontend/src/components/production/ocp/LabelLog.tsx b/frontend/src/components/production/ocp/LabelLog.tsx index 421f82c..91bc1ee 100644 --- a/frontend/src/components/production/ocp/LabelLog.tsx +++ b/frontend/src/components/production/ocp/LabelLog.tsx @@ -1,5 +1,92 @@ import {LstCard} from "@/components/extendedUI/LstCard"; +import {CardHeader} from "@/components/ui/card"; +import {Skeleton} from "@/components/ui/skeleton"; +import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table"; +// import {useSessionStore} from "@/lib/store/sessionStore"; +// import {useSettingStore} from "@/lib/store/useSettings"; +import {useQuery} from "@tanstack/react-query"; +import {getlabels} from "@/utils/querys/production/labels"; +import {format} from "date-fns"; +const labelLogs = [ + {key: "line", label: "Line"}, + {key: "printerName", label: "Printer"}, + {key: "runningNr", label: "Running #"}, + {key: "upd_date", label: "Label date"}, + {key: "status", label: "Label Status"}, + //{key: "reprint", label: "Reprint"}, // removing the reprint button for now until repritning is working as intended +]; export default function LabelLog() { - return label logs here; + const {data, isError, error, isLoading} = useQuery(getlabels("4")); + //const {user} = useSessionStore(); + //const {settings} = useSettingStore(); + //const server = settings.filter((n) => n.name === "server")[0]?.value || ""; + + //const roles = ["admin", "manager", "operator"]; + + if (isError) { + return ( +
+ + There was an error loading the lots + {JSON.stringify(error)} + +
+ ); + } + + return ( + + + + + {labelLogs.map((l) => ( + {l.label} + ))} + + + {isLoading ? ( + <> + + {Array(7) + .fill(0) + .map((_, i) => ( + + + + + + + + + + + + + + + + + + ))} + + + ) : ( + + {data?.map((label: any) => ( + + {label.line} + {label.printerName} + {label.runningNr} + + {format(label.upd_date, "M/d/yyyy hh:mm")} + + {label.status} + + ))} + + )} +
+ + ); } diff --git a/frontend/src/components/production/ocp/Lots.tsx b/frontend/src/components/production/ocp/Lots.tsx index 6b3cc9d..2af4ac7 100644 --- a/frontend/src/components/production/ocp/Lots.tsx +++ b/frontend/src/components/production/ocp/Lots.tsx @@ -1,9 +1,177 @@ import {LstCard} from "@/components/extendedUI/LstCard"; +import {CardHeader} from "@/components/ui/card"; +import {Skeleton} from "@/components/ui/skeleton"; +import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table"; +import {useSessionStore} from "@/lib/store/sessionStore"; +import {useSettingStore} from "@/lib/store/useSettings"; +import {LotType} from "@/types/lots"; +import {getlots} from "@/utils/querys/production/lots"; +import {useQuery} from "@tanstack/react-query"; +import ManualPrint from "./ManualPrinting/ManualPrint"; +import ManualPrintForm from "./ManualPrinting/ManualPrintForm"; +let lotColumns = [ + { + key: "MachineDescription", + label: "Machine", + }, + { + key: "AV", + label: "AV", + }, + { + key: "Alias", + label: "AvDescription", + }, + { + key: "LOT", + label: "LotNumber", + }, + { + key: "ProlinkLot", + label: "ProlinkLot", + }, + { + key: "PlannedQTY", + label: "PlannedQTY", + }, + { + key: "Produced", + label: "Produced", + }, + { + key: "Remaining", + label: "Remaining", + }, + { + key: "overPrinting", + label: "Overprinting", + }, + // { + // key: "lastProlinkUpdate", + // label: "Last ProlinkCheck", + // }, + // { + // key: "printLabel", + // label: "Print Label", + // }, +]; export default function Lots() { + const {data, isError, error, isLoading} = useQuery(getlots()); + const {user} = useSessionStore(); + const {settings} = useSettingStore(); + const server = settings.filter((n) => n.name === "server")[0]?.value || ""; + + console.log(server); + + const roles = ["admin", "manager", "operator"]; + + if (user && roles.includes(user.role)) { + //width = 1280; + const checkCol = lotColumns.some((l) => l.key === "printLabel"); + if (!checkCol) { + lotColumns = [ + ...lotColumns, + { + key: "printLabel", + label: "Print Label", + }, + ]; + } + } + + if (isError) { + return ( +
+ + There was an error loading the lots + {JSON.stringify(error)} + +
+ ); + } + return ( -

Lots

+ + + + {lotColumns.map((l) => ( + {l.label} + ))} + + + {isLoading ? ( + <> + + {Array(10) + .fill(0) + .map((_, i) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ))} + + + ) : ( + + {data?.map((lot: LotType) => ( + + {lot.MachineLocation} + {lot.AV} + {lot.Alias} + {lot.LOT} + {lot.ProlinkLot} + {lot.PlannedQTY} + {lot.Produced} + {lot.Remaining} + {lot.overPrinting} + {user && roles.includes(user.role) && ( + <> + {server === "usday1vms006" || server === "localhost" ? ( + <> + + + + + ) : ( + + + + )} + + )} + + ))} + + )} +
); } diff --git a/frontend/src/components/production/ocp/ManualPrinting/ManualPrint.tsx b/frontend/src/components/production/ocp/ManualPrinting/ManualPrint.tsx new file mode 100644 index 0000000..59daf69 --- /dev/null +++ b/frontend/src/components/production/ocp/ManualPrinting/ManualPrint.tsx @@ -0,0 +1,32 @@ +import {Button} from "@/components/ui/button"; +import {useSessionStore} from "@/lib/store/sessionStore"; +//import {useSettingStore} from "@/lib/store/useSettings"; +import {LotType} from "@/types/lots"; +import {Tag} from "lucide-react"; +import {toast} from "sonner"; +import {manualPrintLabels} from "./ManualPrintLabel"; + +export default function ManualPrint({lot}: {lot: LotType}) { + const {user} = useSessionStore(); + //const {settings} = useSettingStore(); + //const server = settings.filter((n) => n.name === "server")[0]?.value; + //const serverPort = settings.filter((n) => n.name === "serverPort")[0]?.value; + //const serverUrl = `http://${server}:${serverPort}`; + + const handlePrintLabel = async (lot: LotType) => { + //console.log(lot); + + const labels: any = await manualPrintLabels(lot, user); + + if (labels.success) { + toast.success(labels.message); + } else { + toast.error(labels.message); + } + }; + return ( + + ); +} diff --git a/frontend/src/components/production/ocp/ManualPrinting/ManualPrintForm.tsx b/frontend/src/components/production/ocp/ManualPrinting/ManualPrintForm.tsx new file mode 100644 index 0000000..2336302 --- /dev/null +++ b/frontend/src/components/production/ocp/ManualPrinting/ManualPrintForm.tsx @@ -0,0 +1,217 @@ +import {Button} from "@/components/ui/button"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import {Input} from "@/components/ui/input"; +import {Label} from "@/components/ui/label"; +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectLabel, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import {Textarea} from "@/components/ui/textarea"; +import {useSessionStore} from "@/lib/store/sessionStore"; +import {useSettingStore} from "@/lib/store/useSettings"; +import {LotType} from "@/types/lots"; +import axios from "axios"; +import {Tag} from "lucide-react"; +import {useState} from "react"; +import {Controller, useForm} from "react-hook-form"; +import {toast} from "sonner"; +import {manualPrintLabels} from "./ManualPrintLabel"; + +const printReason = [ + {key: "printerIssue", label: "Printer Related"}, + {key: "strapper", label: "Strapper Error"}, + {key: "manualCheck", label: "20th pallet check"}, + {key: "outOfSync", label: "Labeler Out of Sync"}, +]; + +export default function ManualPrintForm({lot}: {lot: LotType}) { + const {user} = useSessionStore(); + const token = localStorage.getItem("auth_token"); + const {settings} = useSettingStore(); + const [open, setOpen] = useState(false); + const server = settings.filter((n) => n.name === "server")[0]?.value; + // const serverPort = settings.filter((n) => n.name === "serverPort")[0]?.value; + // const serverUrl = `http://${server}:${serverPort}`; + const { + register, + handleSubmit, + //watch, + formState: {errors}, + reset, + control, + } = useForm(); + + const handlePrintLabel = async (lot: LotType) => { + //console.log(lot); + const labels: any = await manualPrintLabels(lot, user); + + if (labels.success) { + toast.success(labels.message); + } else { + toast.error(labels.message); + } + }; + + const handleManualPrintLog = async (logData: any, lot: LotType) => { + // toast.success(`A new label was sent to printer: ${lot.PrinterName} for line ${lot.MachineDescription} `); + const logdataUrl = `/api/ocp/manualLabelLog`; + axios + .post(logdataUrl, logData, {headers: {Authorization: `Bearer ${token}`}}) + .then((d) => { + //console.log(d); + toast.success(d.data.message); + handlePrintLabel(lot); + reset(); + }) + .catch((e) => { + if (e.response.status === 500) { + toast.error(`Internal Server error please try again.`); + return {sucess: false}; + } + + if (e.response.status === 401) { + //console.log(e.response); + toast.error(`You are not authorized to do this.`); + return {sucess: false}; + } + }); + }; + + const onSubmit = (data: any) => { + console.log(data); + + handleManualPrintLog(data, lot); + }; + return ( + { + if (!open) { + reset(); + } + setOpen(isOpen); + // toast.message("Model was something", { + // description: isOpen ? "Modal is open" : "Modal is closed", + // }); + }} + > + + + + + + Edit profile + + Make changes to your profile here. Click save when you're done. + + +
+

+ To manually print a label you must complete all the required fields below. +
+ If you clicked this in error just click close +

+
+ {server == "usday1vms006" ? ( + ( + + )} + /> + ) : ( +
+ + +
+ )} +
+ + +
+ +
+ + +
+ +