156 lines
6.5 KiB
TypeScript
156 lines
6.5 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 { 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() {
|
|
const { data, isError, isLoading } = useQuery(getlabels("4"));
|
|
|
|
if (isError) {
|
|
return (
|
|
<div className="m-2 p-2 min-h-2/5">
|
|
<LstCard>
|
|
<p className="text-center">Labels for the last 2 hours</p>
|
|
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
{labelLogs.map((l) => (
|
|
<TableHead key={l.key}>{l.label}</TableHead>
|
|
))}
|
|
</TableRow>
|
|
</TableHeader>
|
|
|
|
<TableBody>
|
|
{Array(7)
|
|
.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>
|
|
</Table>
|
|
</LstCard>
|
|
</div>
|
|
);
|
|
}
|
|
const labelData = data ? data : [];
|
|
return (
|
|
<LstCard className="m-2 p-2 min-h-2/5">
|
|
<p className="text-center">
|
|
{labelData.length === 0 ? (
|
|
<span>No labels have been printed in the last 2 hours</span>
|
|
) : (
|
|
<span>Labels for the last 2 hours</span>
|
|
)}
|
|
</p>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
{labelLogs.map((l) => (
|
|
<TableHead key={l.key}>{l.label}</TableHead>
|
|
))}
|
|
</TableRow>
|
|
</TableHeader>
|
|
{isLoading ? (
|
|
<>
|
|
<TableBody>
|
|
{Array(7)
|
|
.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>
|
|
{labelData.map((label: any) => (
|
|
<TableRow key={label.label_id}>
|
|
<TableCell className="font-medium">
|
|
{label.line}
|
|
</TableCell>
|
|
<TableCell className="font-medium">
|
|
{label.printerName}
|
|
</TableCell>
|
|
<TableCell className="font-medium">
|
|
{label.runningNr}
|
|
</TableCell>
|
|
<TableCell className="font-medium">
|
|
{format(
|
|
label?.upd_date.replace("Z", ""),
|
|
"M/d/yyyy hh:mm"
|
|
)}
|
|
</TableCell>
|
|
<TableCell className="font-medium">
|
|
{label.status}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
)}
|
|
|
|
{/* <TableFooter>
|
|
{labelData.length === 0 && (
|
|
<div className="flex justify-center">
|
|
<h2 className="text-center text-2xl">
|
|
No labels have been printed in the last 2 hours
|
|
</h2>
|
|
</div>
|
|
)}
|
|
</TableFooter> */}
|
|
</Table>
|
|
</LstCard>
|
|
);
|
|
}
|