Files
lstV2/frontend/src/components/production/ocp/Lots.tsx

274 lines
12 KiB
TypeScript

import { LstCard } from "@/components/extendedUI/LstCard";
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";
import { ScrollArea } from "@/components/ui/scroll-area";
import { useGetUserRoles } from "@/lib/store/useGetRoles";
import { useModuleStore } from "@/lib/store/useModuleStore";
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) => n.module_id === module[0]?.module_id
) 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>
);
}