test(ocp): more work on the dashboard

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 <LstCard className="m-2 p-2"> label logs here</LstCard>;
+    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 (
+            <div>
+                <LstCard>
+                    <CardHeader>There was an error loading the lots</CardHeader>
+                    {JSON.stringify(error)}
+                </LstCard>
+            </div>
+        );
+    }
+
+    return (
+        <LstCard className="m-2 p-2 min-h-2/5">
+            <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>
+                        {data?.map((label: any) => (
+                            <TableRow key={label.runningNr}>
+                                <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, "M/d/yyyy hh:mm")}
+                                </TableCell>
+                                <TableCell className="font-medium">{label.status}</TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                )}
+            </Table>
+        </LstCard>
+    );
 }