feat(migration): moved ocp, ocme, wrapper stuff
This commit is contained in:
@@ -1,31 +0,0 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import axios from "axios";
|
||||
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function ManualTrigger() {
|
||||
const rfidReaderTrigger = async () => {
|
||||
try {
|
||||
const res = await axios.post("/api/rfid/manualtrigger/wrapper1");
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(res.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
//stoast.success(error.data.message);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<Button onClick={rfidReaderTrigger}>Wrapper 1 RFID</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
/**
|
||||
* we will do a very sloppy way for this just keep fetching the logs we spent to much time on this :()
|
||||
*/
|
||||
|
||||
// //import {useEffect, useState} from "react";
|
||||
// import {LstCard} from "../extendedUI/LstCard";
|
||||
// import {CardContent, CardHeader} from "../ui/card";
|
||||
// import {Skeleton} from "../ui/skeleton";
|
||||
// import {Button} from "../ui/button";
|
||||
// import {toast} from "sonner";
|
||||
// import {useEffect} from "react";
|
||||
|
||||
// export default function CycleCountLog() {
|
||||
// //const [logs, setLogs] = useState([]);
|
||||
// //const [streaming, setStreaming] = useState(false); // Track if streaming is active
|
||||
|
||||
// useEffect(() => {
|
||||
// // Start streaming when the button is clicked
|
||||
// let es;
|
||||
|
||||
// const url = `http://localhost:4000/api/logger/logs/stream?service=ocme-count&level=info`;
|
||||
|
||||
// es = new EventSource(url);
|
||||
// es.onopen = () => console.log(">>> Connection opened!");
|
||||
// es.onerror = (e) => console.log("ERROR!", e);
|
||||
// es.onmessage = (e) => {
|
||||
// const data = JSON.parse(e.data);
|
||||
|
||||
// console.log(e);
|
||||
// console.log(data);
|
||||
// switch (data.type) {
|
||||
// case "time-update":
|
||||
// console.log(data);
|
||||
// break;
|
||||
// case "error":
|
||||
// console.log(data);
|
||||
// break;
|
||||
// case "done":
|
||||
// console.log(data);
|
||||
// es.close(); // Close the connection when done
|
||||
|
||||
// break;
|
||||
// default:
|
||||
// break;
|
||||
// }
|
||||
// };
|
||||
|
||||
// return () => es.close();
|
||||
// }, []);
|
||||
|
||||
// // const handleStartStreaming = () => {
|
||||
// // setStreaming(true); // Start streaming when button is clicked
|
||||
// // };
|
||||
// return (
|
||||
// <LstCard className="w-48">
|
||||
// <CardHeader className="flex justify-center">
|
||||
// <span>Cycle Count logs</span>
|
||||
// </CardHeader>
|
||||
// <CardContent>
|
||||
// {Array(10)
|
||||
// .fill(0)
|
||||
// .map((_, i) => (
|
||||
// <div key={i}>
|
||||
// <Skeleton className="m-2 h-4" />
|
||||
// </div>
|
||||
// ))}
|
||||
// </CardContent>
|
||||
// <Button onClick={() => toast.success("SOmething")}>Start Stream</Button>
|
||||
// </LstCard>
|
||||
// );
|
||||
// }
|
||||
@@ -1,106 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,172 +0,0 @@
|
||||
import axios from "axios";
|
||||
import { LstCard } from "../extendedUI/LstCard";
|
||||
import { Button } from "../ui/button";
|
||||
import { ScrollArea } from "../ui/scroll-area";
|
||||
import { Skeleton } from "../ui/skeleton";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "../ui/table";
|
||||
import { toast } from "sonner";
|
||||
import { getOcmeInfo } from "@/utils/querys/production/getOcmeInfo";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { format } from "date-fns";
|
||||
import { Trash } from "lucide-react";
|
||||
import ManualTrigger from "../logistics/rfid/ManualTrigger";
|
||||
|
||||
const currentPallets = [
|
||||
{ key: "line", label: "Line" },
|
||||
{ key: "runningNumber", label: "Running #" },
|
||||
{ key: "upd_date", label: "Date Scanned" },
|
||||
{ key: "waitingfor", label: "Waiting For" },
|
||||
{ key: "clear", label: "Clear" },
|
||||
];
|
||||
|
||||
// const currentTags = [
|
||||
// { key: "line", label: "Line" },
|
||||
// { key: "printerName", label: "Printer" },
|
||||
// { key: "runningNr", label: "Running #" },
|
||||
// { key: "upd_date", label: "Label date" },
|
||||
// { key: "status", label: "Label Status" },
|
||||
// ];
|
||||
export default function WrapperManualTrigger() {
|
||||
const { data, isError, isLoading } = useQuery(getOcmeInfo());
|
||||
const cameraTrigger = async () => {
|
||||
try {
|
||||
const res = await axios.get("/ocme/api/v1/manualCameraTrigger");
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(res.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
//stoast.success(error.data.message);
|
||||
}
|
||||
};
|
||||
|
||||
const clearLabel = async (d: any) => {
|
||||
const data = {
|
||||
runningNr: d.runningNr,
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await axios.patch("/ocme/api/v1/pickedUp", data);
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(
|
||||
`${d.runningNr} was just removed from being picked up.`
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(res.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
//stoast.success(error.data.message);
|
||||
}
|
||||
};
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<div>
|
||||
<p className="text-center text-pretty">
|
||||
There was an error getting wrapper scans
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const info = data?.filter((r: any) => r.areaFrom === "wrapper_1");
|
||||
return (
|
||||
<LstCard className="m-2 p-2 w-auto">
|
||||
<ScrollArea className="max-h-[200px]">
|
||||
<span>Wrapper Pallet Info</span>
|
||||
<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">
|
||||
{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>
|
||||
</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 m-2">
|
||||
<Button onClick={cameraTrigger}>Camera</Button>
|
||||
<ManualTrigger />
|
||||
</div>
|
||||
</div>
|
||||
</LstCard>
|
||||
);
|
||||
}
|
||||
@@ -1,260 +0,0 @@
|
||||
import { toast } from "sonner";
|
||||
import { LstCard } from "../extendedUI/LstCard";
|
||||
import { Button } from "../ui/button";
|
||||
import { Input } from "../ui/input";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "../ui/table";
|
||||
import { Skeleton } from "../ui/skeleton";
|
||||
//import CycleCountLog from "./CycleCountLog";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "../ui/select";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function OcmeCycleCount() {
|
||||
const token = localStorage.getItem("auth_token");
|
||||
const [data, setData] = useState([]);
|
||||
const [counting, setCounting] = useState(false);
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
//watch,
|
||||
formState: { errors },
|
||||
reset,
|
||||
control,
|
||||
} = useForm({
|
||||
defaultValues: {
|
||||
lane: "",
|
||||
laneType: "name",
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (data: any) => {
|
||||
setData([]);
|
||||
setCounting(true);
|
||||
|
||||
if (data.laneType === "") {
|
||||
toast.error("Please select a type");
|
||||
setCounting(false);
|
||||
return;
|
||||
}
|
||||
toast.success(`Cycle count started`);
|
||||
try {
|
||||
const res = await axios.post("/ocme/api/v1/cycleCount", data, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
setData(res.data.data);
|
||||
setCounting(false);
|
||||
reset();
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
|
||||
setCounting(false);
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error("There was an error cycle counting");
|
||||
setCounting(false);
|
||||
reset();
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="flex flex-row w-screen">
|
||||
<div className="m-2 w-5/6">
|
||||
<LstCard>
|
||||
<p className="ml-2">
|
||||
Please enter the name or laneID you want to cycle count.
|
||||
</p>
|
||||
<div>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="flex justify-between">
|
||||
<div className="m-2 flex flex-row">
|
||||
<Input
|
||||
placeholder="enter lane: L064"
|
||||
className={
|
||||
errors.lane ? "border-red-500" : ""
|
||||
}
|
||||
aria-invalid={!!errors.lane}
|
||||
{...register("lane", {
|
||||
required: true,
|
||||
minLength: {
|
||||
value: 3,
|
||||
message:
|
||||
"The lane is too short!",
|
||||
},
|
||||
})}
|
||||
/>
|
||||
<div className="ml-2">
|
||||
<Controller
|
||||
control={control}
|
||||
name="laneType"
|
||||
render={({
|
||||
field: { onChange },
|
||||
fieldState: {},
|
||||
//formState,
|
||||
}) => (
|
||||
<Select
|
||||
onValueChange={onChange}
|
||||
>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Select name or id" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="name">
|
||||
Name
|
||||
</SelectItem>
|
||||
<SelectItem value="laneID">
|
||||
Lane ID
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
className="m-2"
|
||||
type="submit"
|
||||
disabled={counting}
|
||||
>
|
||||
{counting ? (
|
||||
<span>Counting...</span>
|
||||
) : (
|
||||
<span>CycleCount</span>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>LaneID</TableHead>
|
||||
<TableHead>Lane</TableHead>
|
||||
<TableHead>AV</TableHead>
|
||||
<TableHead>Description</TableHead>
|
||||
<TableHead>Running Number</TableHead>
|
||||
<TableHead>In Ocme</TableHead>
|
||||
<TableHead>In Stock</TableHead>
|
||||
<TableHead>Result</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
{data?.length === 0 ? (
|
||||
<TableBody>
|
||||
{Array(10)
|
||||
.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>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
) : (
|
||||
<>
|
||||
{data.map((i: any) => {
|
||||
let classname = ``;
|
||||
if (
|
||||
i.info === "Validate pallet is ok."
|
||||
) {
|
||||
classname = `bg-red-500`;
|
||||
}
|
||||
if (i.info === "Sent to Inv") {
|
||||
classname = `bg-amber-700`;
|
||||
}
|
||||
return (
|
||||
<TableRow key={i.runningNumber}>
|
||||
<TableCell
|
||||
className={`font-medium ${classname}`}
|
||||
>
|
||||
{i.alpla_laneID}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={`font-medium ${classname}`}
|
||||
>
|
||||
{i.alpla_laneDescription}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={`font-medium ${classname}`}
|
||||
>
|
||||
{i.Article}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={`font-medium ${classname}`}
|
||||
>
|
||||
{i.alpla_laneDescription}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={`font-medium ${classname}`}
|
||||
>
|
||||
{i.runningNumber}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={`font-medium ${classname}`}
|
||||
>
|
||||
{i.ocme}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={`font-medium ${classname}`}
|
||||
>
|
||||
{i.stock}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={`font-medium ${classname}`}
|
||||
>
|
||||
{i.info}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</Table>
|
||||
</div>
|
||||
</LstCard>
|
||||
</div>
|
||||
{/* <div className="m-2">
|
||||
<CycleCountLog />
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
// 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 { LabelTable } from "@/utils/tableData/production/labels/labelData";
|
||||
import { labelolumns } from "@/utils/tableData/production/labels/labelColumns";
|
||||
|
||||
export default function LabelLog() {
|
||||
const { data, isError, isLoading } = useQuery(getlabels("4"));
|
||||
|
||||
if (isError) return <div>Error</div>;
|
||||
|
||||
if (isLoading) return <div>Loading</div>;
|
||||
const labelData = data ? data : [];
|
||||
return (
|
||||
<div className="m-2">
|
||||
<LabelTable
|
||||
columns={labelolumns}
|
||||
data={labelData}
|
||||
//style={style}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import { getlabelRatio } from "@/utils/querys/production/labelRatio";
|
||||
import { labelRatioColumns } from "@/utils/tableData/production/labelRatio/labelRatioColumns";
|
||||
import { LabelRatioTable } from "@/utils/tableData/production/labelRatio/labelRatioData";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
export default function LabelRatio() {
|
||||
const { data, isError, isLoading } = useQuery(getlabelRatio());
|
||||
|
||||
const ratioData = data ? data : [];
|
||||
if (isError) {
|
||||
return <div>Error</div>;
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return <div>Loading</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="m-2">
|
||||
<LabelRatioTable
|
||||
columns={labelRatioColumns}
|
||||
data={ratioData}
|
||||
//style={style}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,256 +0,0 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { useSessionStore } from "@/lib/store/sessionStore";
|
||||
import { useGetUserRoles } from "@/lib/store/useGetRoles";
|
||||
import { useModuleStore } from "@/lib/store/useModuleStore";
|
||||
import { useSettingStore } from "@/lib/store/useSettings";
|
||||
import { LotType } from "@/types/lots";
|
||||
import { getlots } from "@/utils/querys/production/lots";
|
||||
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, isLoading } = useQuery(getlots());
|
||||
const { user } = useSessionStore();
|
||||
const { settings } = useSettingStore();
|
||||
const { userRoles } = useGetUserRoles();
|
||||
const { modules } = useModuleStore();
|
||||
|
||||
const server = settings.filter((n) => n.name === "server")[0]?.value || "";
|
||||
|
||||
const roles = ["systemAdmin", "technician", "admin", "manager", "operator"];
|
||||
const lotdata = data ? data : [];
|
||||
|
||||
const module = modules.filter((n) => n.name === "logistics");
|
||||
|
||||
const accessRoles = userRoles.filter(
|
||||
(n: any) => n.module === module[0]?.name,
|
||||
) as any;
|
||||
|
||||
if (user && roles.includes(accessRoles[0]?.role)) {
|
||||
//width = 1280;
|
||||
const checkCol = lotColumns.some((l) => l.key === "printLabel");
|
||||
if (!checkCol) {
|
||||
lotColumns = [
|
||||
...lotColumns,
|
||||
{
|
||||
key: "printLabel",
|
||||
label: "Print Label",
|
||||
},
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<div className="m-2 p-2 min-h-2/5">
|
||||
<ScrollArea className="max-h-1/2 rounded-md border p-4">
|
||||
<LstCard>
|
||||
<p className="text-center">Current Assigned lots</p>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{lotColumns.map((l) => (
|
||||
<TableHead key={l.key}>{l.label}</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{Array(10)
|
||||
.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>
|
||||
<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>
|
||||
</Table>
|
||||
</LstCard>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<LstCard className="m-2 p-2 min-h-2/5">
|
||||
<ScrollArea className="h-[400px]">
|
||||
<p className="text-center">Current Assigned lots</p>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{lotColumns.map((l) => (
|
||||
<TableHead key={l.key}>{l.label}</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<TableBody>
|
||||
{Array(10)
|
||||
.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>
|
||||
<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>
|
||||
{lotdata.map((lot: LotType) => (
|
||||
<TableRow key={lot.LabelOnlineID}>
|
||||
<TableCell className="font-medium">
|
||||
{lot.MachineLocation}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">{lot.AV}</TableCell>
|
||||
<TableCell className="font-medium">{lot.Alias}</TableCell>
|
||||
<TableCell
|
||||
className={`font-medium ${lot.ProlinkLot != lot.lot ? "text-red-500" : ""}`}
|
||||
>
|
||||
{lot.lot}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={`font-medium ${lot.ProlinkLot != lot.lot ? "text-red-500" : ""}`}
|
||||
>
|
||||
{lot.ProlinkLot}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{lot.PlannedQTY}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">{lot.Produced}</TableCell>
|
||||
<TableCell className="font-medium">{lot.Remaining}</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{lot.overPrinting}
|
||||
</TableCell>
|
||||
{user && roles.includes(accessRoles[0]?.role) && (
|
||||
<>
|
||||
{server === "usday1vms006" || server === "localhost" ? (
|
||||
<>
|
||||
<TableCell className="flex justify-center">
|
||||
<ManualPrintForm />
|
||||
</TableCell>
|
||||
</>
|
||||
) : (
|
||||
<TableCell className="flex justify-center">
|
||||
<ManualPrint lot={lot} />
|
||||
</TableCell>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
)}
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
</LstCard>
|
||||
);
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
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";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ManualPrint({ lot }: { lot: LotType }) {
|
||||
const { user } = useSessionStore();
|
||||
const [printing, setPrinting] = useState(false);
|
||||
//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) => {
|
||||
const labels: any = await manualPrintLabels(lot, user);
|
||||
|
||||
if (labels.success) {
|
||||
toast.success(labels.message);
|
||||
setTimeout(() => {
|
||||
setPrinting(false);
|
||||
}, 5 * 1000);
|
||||
setPrinting(true);
|
||||
} else {
|
||||
toast.error(labels.message);
|
||||
setTimeout(() => {
|
||||
setPrinting(false);
|
||||
}, 5 * 1000);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => handlePrintLabel(lot)}
|
||||
disabled={printing}
|
||||
>
|
||||
<Tag className="h-[16px] w-[16px]" />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
@@ -1,275 +0,0 @@
|
||||
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 { useSettingStore } from "@/lib/store/useSettings";
|
||||
import axios from "axios";
|
||||
import { Tag } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
|
||||
const printReason = [
|
||||
{ key: "printerIssue", label: "Printer Related" },
|
||||
{ key: "missingRfidTag", label: "Missing or incorrect tag" },
|
||||
{ key: "rfidMissScan", label: "Missed Scan from RFID reader" },
|
||||
{ key: "strapper", label: "Strapper Error" },
|
||||
{ key: "manualCheck", label: "20th pallet check" },
|
||||
{ key: "outOfSync", label: "Labeler Out of Sync" },
|
||||
];
|
||||
|
||||
export default function ManualPrintForm() {
|
||||
const token = localStorage.getItem("auth_token");
|
||||
const { settings } = useSettingStore();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = 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}`;
|
||||
|
||||
// what is the dyco set to? rfid or dyco
|
||||
const dyco = settings.filter((n) => n.name === "dycoPrint");
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
//watch,
|
||||
formState: { errors },
|
||||
reset,
|
||||
control,
|
||||
} = useForm();
|
||||
|
||||
const handleManualPrintLog = async (logData: any) => {
|
||||
// toast.success(`A new label was sent to printer: ${lot.PrinterName} for line ${lot.MachineDescription} `);
|
||||
const logdataUrl = `/api/ocp/manuallabellog`;
|
||||
setIsSubmitting(true);
|
||||
axios
|
||||
.post(logdataUrl, logData, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then((d) => {
|
||||
console.log(d);
|
||||
if (d.data.success) {
|
||||
toast.success(d.data.message);
|
||||
} else {
|
||||
toast.error(d.data.message);
|
||||
}
|
||||
reset();
|
||||
setOpen(false);
|
||||
setIsSubmitting(false);
|
||||
})
|
||||
.catch((e) => {
|
||||
if (e.response.status === 500) {
|
||||
toast.error(`Internal Server error please try again.`);
|
||||
setIsSubmitting(false);
|
||||
return { sucess: false };
|
||||
}
|
||||
|
||||
if (e.response.status === 401) {
|
||||
//console.log(e.response);
|
||||
toast.error(`You are not authorized to do this.`);
|
||||
setIsSubmitting(false);
|
||||
return { sucess: false };
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const onSubmit = (data: any) => {
|
||||
console.log(data);
|
||||
|
||||
handleManualPrintLog(data);
|
||||
};
|
||||
|
||||
const closeForm = () => {
|
||||
reset();
|
||||
setOpen(false);
|
||||
};
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={(isOpen) => {
|
||||
if (!open) {
|
||||
reset();
|
||||
}
|
||||
setOpen(isOpen);
|
||||
// toast.message("Model was something", {
|
||||
// description: isOpen ? "Modal is open" : "Modal is closed",
|
||||
// });
|
||||
}}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" size="icon">
|
||||
<Tag className="h-[16px] w-[16px]" />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Manual Print form</DialogTitle>
|
||||
{/* <DialogDescription>
|
||||
Make changes to your profile here. Click save when
|
||||
you're done.
|
||||
</DialogDescription> */}
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<p>
|
||||
To manually print a label you must complete all the
|
||||
required fields below.
|
||||
<br />
|
||||
If you clicked this in error just click close
|
||||
</p>
|
||||
<hr className="mt-2 mb-2" />
|
||||
{server == "usday1vms006" ? (
|
||||
<Controller
|
||||
control={control}
|
||||
name="printReason"
|
||||
defaultValue={""}
|
||||
render={({
|
||||
field: { onChange },
|
||||
fieldState: {},
|
||||
//formState,
|
||||
}) => (
|
||||
<Select onValueChange={onChange}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Select Reason" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>
|
||||
Print Reasons
|
||||
</SelectLabel>
|
||||
{printReason.map(
|
||||
(printReason: any) => (
|
||||
<SelectItem
|
||||
value={printReason.key}
|
||||
>
|
||||
{printReason.label}
|
||||
</SelectItem>
|
||||
)
|
||||
)}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<div className="m-2">
|
||||
<Label htmlFor="printRason" className="m-1">
|
||||
Why are you manually printing?
|
||||
</Label>
|
||||
<Input
|
||||
type="text"
|
||||
className={
|
||||
errors.printReason ? "border-red-500" : ""
|
||||
}
|
||||
aria-invalid={!!errors.printReason}
|
||||
{...register("printReason", {
|
||||
required: true,
|
||||
minLength: {
|
||||
value: 5,
|
||||
message:
|
||||
"To short of a reason please try again!",
|
||||
},
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="m-2">
|
||||
<Label htmlFor="line" className="m-1">
|
||||
"What is the line number you are printing?"
|
||||
</Label>
|
||||
<Input
|
||||
//variant="underlined"
|
||||
type="number"
|
||||
className={errors.line ? "border-red-500" : ""}
|
||||
aria-invalid={!!errors.line}
|
||||
{...register("line", { required: true })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="m-2">
|
||||
<Label htmlFor="initials" className="m-1">
|
||||
Enter intials
|
||||
</Label>
|
||||
<Input
|
||||
//variant="underlined"
|
||||
//label="Enter intials"
|
||||
|
||||
{...register("initials", { required: true })}
|
||||
/>
|
||||
</div>
|
||||
<hr />
|
||||
{dyco[0].value === "0" && (
|
||||
<div>
|
||||
<p>Enter the missing tag number.</p>
|
||||
<hr />
|
||||
<Label htmlFor="rfidTag" className="m-1">
|
||||
Enter the tag number only Example
|
||||
ALPLA000002541. only enter 2541
|
||||
</Label>
|
||||
<Input
|
||||
type="text"
|
||||
className={
|
||||
errors.printReason ? "border-red-500" : ""
|
||||
}
|
||||
aria-invalid={!!errors.printReason}
|
||||
{...register("rfidTag", {
|
||||
required: true,
|
||||
minLength: {
|
||||
value: 1,
|
||||
message: "Tag number is to short!",
|
||||
},
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="m-2">
|
||||
<Textarea
|
||||
//label="Comments"
|
||||
placeholder="add more info as needed."
|
||||
{
|
||||
...register("additionalComments")
|
||||
// { required: true, minLength: 10 }
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<div className="mt-3">
|
||||
<Button
|
||||
color="danger"
|
||||
variant="default"
|
||||
onClick={closeForm}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
<Button
|
||||
color="primary"
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Print
|
||||
</Button>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
import { LotType } from "@/types/lots";
|
||||
import axios from "axios";
|
||||
|
||||
export const manualPrintLabels = async (lot: LotType, user: any) => {
|
||||
//console.log(lot);
|
||||
const labelUrl = `/api/ocp/manualprintandfollow`;
|
||||
|
||||
try {
|
||||
const res = await axios.post(
|
||||
labelUrl,
|
||||
{ line: lot.MachineLocation, printerName: lot.PrinterName },
|
||||
{ headers: { Authorization: `Basic ${user?.prod}` } }
|
||||
);
|
||||
|
||||
if (res.data.success) {
|
||||
return {
|
||||
success: true,
|
||||
message: `A new label was printed for ${lot.MachineDescription} to printer: ${lot.PrinterName}`,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
success: false,
|
||||
message: `Line ${lot.MachineDescription} encountered an error printing labels: ${res.data.message}`,
|
||||
};
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error.response.status === 500) {
|
||||
//toast.error(`Internal Server error please try again.`);
|
||||
return {
|
||||
success: false,
|
||||
message: `Internal Server error please try again.`,
|
||||
};
|
||||
}
|
||||
|
||||
if (error.response.status === 401) {
|
||||
//console.log(e.response);
|
||||
//toast.error(`You are not authorized to do this.`);
|
||||
return {
|
||||
success: false,
|
||||
message: `You are not authorized to do this.`,
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,46 +0,0 @@
|
||||
import { getOcpLogs } from "@/utils/querys/production/ocpLogs";
|
||||
import { ocpColumns } from "@/utils/tableData/production/ocpLogs/ocpLogColumns";
|
||||
import { OcpLogTable } from "@/utils/tableData/production/ocpLogs/ocpLogData";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
|
||||
import { useMemo } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function OcpLogs() {
|
||||
const { data, isError, isLoading } = useQuery(getOcpLogs("4"));
|
||||
|
||||
const clearLog = async (log: any) => {
|
||||
try {
|
||||
const res = await axios.patch(`/api/logger/logs/${log.log_id}`);
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(`Log message: ${log.message}, was just cleared`);
|
||||
} else {
|
||||
console.log(res);
|
||||
toast.error(`There was an error clearing the message.`);
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error(`There was an error trying to clearing the message.`);
|
||||
}
|
||||
};
|
||||
const columns = useMemo(() => ocpColumns(clearLog), [clearLog]);
|
||||
const logData = data ? data : [];
|
||||
if (isError) {
|
||||
return <div>Error</div>;
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return <div>Loading</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="m-2">
|
||||
<OcpLogTable
|
||||
columns={columns}
|
||||
data={logData}
|
||||
//style={style}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,153 +0,0 @@
|
||||
import WrapperManualTrigger from "@/components/ocme/WrapperCard";
|
||||
|
||||
import Lots from "./Lots";
|
||||
import OcpLogs from "./OcpLogs";
|
||||
import PrinterStatus from "./PrinterStatus";
|
||||
import { useSettingStore } from "@/lib/store/useSettings";
|
||||
|
||||
import LabelLog from "./LabelLog";
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from "@/components/ui/resizable-panels";
|
||||
import LabelRatio from "./LabelRatio";
|
||||
|
||||
export default function OCPPage() {
|
||||
const { settings } = useSettingStore();
|
||||
|
||||
if (settings.length === 0) return;
|
||||
let server = settings.filter((n) => n.name === "server");
|
||||
|
||||
return (
|
||||
<div className="ml-5 w-11/12 h-9/10">
|
||||
<ResizablePanelGroup
|
||||
direction="horizontal"
|
||||
//className="rounded-lg border"
|
||||
autoSaveId="ocpPage"
|
||||
>
|
||||
<ResizablePanel>
|
||||
<ResizablePanelGroup direction="vertical">
|
||||
<ResizablePanel
|
||||
style={{
|
||||
overflow: "auto",
|
||||
scrollbarWidth: "none",
|
||||
}}
|
||||
>
|
||||
<Lots />
|
||||
</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
<ResizablePanel>
|
||||
<ResizablePanelGroup
|
||||
direction="horizontal"
|
||||
autoSaveId="ocpPage"
|
||||
>
|
||||
<ResizablePanel
|
||||
//className="text-sm p-4 overflow-scroll"
|
||||
style={{
|
||||
overflow: "auto",
|
||||
scrollbarWidth: "none",
|
||||
}}
|
||||
>
|
||||
<LabelLog />
|
||||
</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
<ResizablePanel
|
||||
style={{
|
||||
overflow: "auto",
|
||||
scrollbarWidth: "none",
|
||||
}}
|
||||
>
|
||||
<OcpLogs />
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
<ResizablePanel className="min-h-[200px] min-w-[200px] max-w-[450px]">
|
||||
<ResizablePanelGroup
|
||||
direction="vertical"
|
||||
autoSaveId="ocpPage_vert"
|
||||
>
|
||||
{server[0].value === "usday1vms006" && (
|
||||
<ResizablePanel
|
||||
style={{
|
||||
overflow: "auto",
|
||||
scrollbarWidth: "none",
|
||||
}}
|
||||
defaultSize={50}
|
||||
className="min-h-[200px]"
|
||||
>
|
||||
<WrapperManualTrigger />
|
||||
</ResizablePanel>
|
||||
)}
|
||||
{server[0]?.value === "localhost" && (
|
||||
<ResizablePanel
|
||||
className="min-h-[200px]"
|
||||
style={{
|
||||
overflow: "auto",
|
||||
scrollbarWidth: "none",
|
||||
}}
|
||||
defaultSize={50}
|
||||
>
|
||||
<WrapperManualTrigger />
|
||||
</ResizablePanel>
|
||||
)}
|
||||
|
||||
<ResizableHandle />
|
||||
<ResizablePanel>
|
||||
<PrinterStatus />
|
||||
<LabelRatio />
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
);
|
||||
// return (
|
||||
// <div className="h-screen w-full ">
|
||||
// <div className="flex flex-row gap-2">
|
||||
// <div className="flex flex-col w-4/5 h-dvh">
|
||||
// <div className="">
|
||||
// <Lots />
|
||||
// </div>
|
||||
|
||||
// <div className="w-5/6 h-1/2">
|
||||
// <Tabs defaultValue="ocplogs" className="w-full">
|
||||
// <TabsList className="grid w-full grid-cols-2">
|
||||
// <TabsTrigger value="ocplogs">
|
||||
// OcpLogs
|
||||
// </TabsTrigger>
|
||||
// <TabsTrigger value="labels">Labels</TabsTrigger>
|
||||
// </TabsList>
|
||||
// <TabsContent value="ocplogs">
|
||||
// <div className="w-full">
|
||||
// <OcpLogs />
|
||||
// </div>
|
||||
// </TabsContent>
|
||||
// <TabsContent value="labels">
|
||||
// <LabelLog />
|
||||
// </TabsContent>
|
||||
// </Tabs>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div className="flex flex-col">
|
||||
// {server[0].value === "usday1vms006" && (
|
||||
// <div>
|
||||
// <WrapperManualTrigger />
|
||||
// </div>
|
||||
// )}
|
||||
// {server[0].value === "localhost" && (
|
||||
// <div>
|
||||
// <WrapperManualTrigger />
|
||||
// </div>
|
||||
// )}
|
||||
// <div>
|
||||
// <PrinterStatus />
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
}
|
||||
@@ -1,114 +0,0 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { getPrinters } from "@/utils/querys/production/printers";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
let printerCols = [
|
||||
{
|
||||
key: "printer",
|
||||
label: "Printer",
|
||||
},
|
||||
{
|
||||
key: "statusMessage",
|
||||
label: "Status Message",
|
||||
},
|
||||
];
|
||||
export default function PrinterStatus() {
|
||||
const { data, isError, isLoading } = useQuery(getPrinters());
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<ScrollArea className="h-[400px]">
|
||||
<p className="text-center">Printer Staus error</p>
|
||||
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{printerCols.map((l) => (
|
||||
<TableHead key={l.key}>{l.label}</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{Array(5)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell className="font-medium">
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* only show the assigned printers
|
||||
*/
|
||||
|
||||
const assigned = data?.filter((a: any) => a.assigned) || [];
|
||||
return (
|
||||
<LstCard className="m-2 p-2">
|
||||
<ScrollArea className="max-h-[800px]">
|
||||
<p className="text-center">
|
||||
{isLoading ? (
|
||||
<span>Printers status loading...</span>
|
||||
) : (
|
||||
<span>Printer Status</span>
|
||||
)}
|
||||
</p>
|
||||
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{printerCols.map((l) => (
|
||||
<TableHead key={l.key}>{l.label}</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
{isLoading ? (
|
||||
<TableBody>
|
||||
{Array(5)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell className="font-medium">
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
) : (
|
||||
<TableBody>
|
||||
{assigned?.map((p: any) => (
|
||||
<TableRow key={p.printer_id}>
|
||||
<TableCell>{p.name}</TableCell>
|
||||
<TableCell>{p.statusText}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
)}
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
</LstCard>
|
||||
);
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import OcmeCycleCount from "@/components/ocme/ocmeCycleCount";
|
||||
import {createFileRoute} from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/(ocme)/cyclecount/")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return (
|
||||
<div className="m-2">
|
||||
<OcmeCycleCount />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
import {createFileRoute} from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/about")({
|
||||
component: About,
|
||||
});
|
||||
|
||||
function About() {
|
||||
return (
|
||||
<div className="m-auto">
|
||||
<h2>About page to come.</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import Changelog from "@/components/changelog/ChangeLog";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/changelog")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return (
|
||||
<div>
|
||||
<Changelog />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
//import GridLayout from "react-grid-layout";
|
||||
import "../../node_modules/react-grid-layout/css/styles.css";
|
||||
import "../../node_modules/react-resizable/css/styles.css";
|
||||
import DashBoard from "@/components/dashboard/DashBoard";
|
||||
|
||||
export const Route = createFileRoute("/")({
|
||||
component: Index,
|
||||
});
|
||||
|
||||
function Index() {
|
||||
return (
|
||||
<div className="h-dvh w-dvw">
|
||||
<DashBoard />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import OCPPage from "@/components/production/ocp/OcpPage";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/ocp/")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return (
|
||||
<div className="h-dvh w-dvw">
|
||||
<OCPPage />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user