From f3c4c26ef957e6fe359a77f139ad36cdacefb8ef Mon Sep 17 00:00:00 2001
From: Blake Matthes <cowchmonkey@gmail.com>
Date: Thu, 20 Mar 2025 14:02:46 -0500
Subject: [PATCH] test(ocp dash): more work on the dashboard

---
 .../components/production/ocp/LabelLog.tsx    | 43 +++++++++++++--
 .../src/components/production/ocp/Lots.tsx    | 55 +++++++++++++++++--
 .../production/ocp/PrinterStatus.tsx          | 49 ++++++++++++++++-
 3 files changed, 136 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/production/ocp/LabelLog.tsx b/frontend/src/components/production/ocp/LabelLog.tsx
index 91bc1ee..d7e563f 100644
--- a/frontend/src/components/production/ocp/LabelLog.tsx
+++ b/frontend/src/components/production/ocp/LabelLog.tsx
@@ -1,5 +1,5 @@
 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";
@@ -17,7 +17,7 @@ const labelLogs = [
     //{key: "reprint", label: "Reprint"}, // removing the reprint button for now until repritning is working as intended
 ];
 export default function LabelLog() {
-    const {data, isError, error, isLoading} = useQuery(getlabels("4"));
+    const {data, isError, isLoading} = useQuery(getlabels("4"));
     //const {user} = useSessionStore();
     //const {settings} = useSettingStore();
     //const server = settings.filter((n) => n.name === "server")[0]?.value || "";
@@ -26,10 +26,42 @@ export default function LabelLog() {
 
     if (isError) {
         return (
-            <div>
+            <div className="m-2 p-2 min-h-2/5">
                 <LstCard>
-                    <CardHeader>There was an error loading the lots</CardHeader>
-                    {JSON.stringify(error)}
+                    <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>
         );
@@ -37,6 +69,7 @@ export default function LabelLog() {
 
     return (
         <LstCard className="m-2 p-2 min-h-2/5">
+            <p className="text-center">Labels for the last 2 hours</p>
             <Table>
                 <TableHeader>
                     <TableRow>
diff --git a/frontend/src/components/production/ocp/Lots.tsx b/frontend/src/components/production/ocp/Lots.tsx
index 2af4ac7..64564e4 100644
--- a/frontend/src/components/production/ocp/Lots.tsx
+++ b/frontend/src/components/production/ocp/Lots.tsx
@@ -1,5 +1,5 @@
 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";
@@ -57,7 +57,7 @@ let lotColumns = [
     // },
 ];
 export default function Lots() {
-    const {data, isError, error, isLoading} = useQuery(getlots());
+    const {data, isError, isLoading} = useQuery(getlots());
     const {user} = useSessionStore();
     const {settings} = useSettingStore();
     const server = settings.filter((n) => n.name === "server")[0]?.value || "";
@@ -82,10 +82,54 @@ export default function Lots() {
 
     if (isError) {
         return (
-            <div>
+            <div className="m-2 p-2 min-h-2/5">
                 <LstCard>
-                    <CardHeader>There was an error loading the lots</CardHeader>
-                    {JSON.stringify(error)}
+                    <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>
             </div>
         );
@@ -93,6 +137,7 @@ export default function Lots() {
 
     return (
         <LstCard className="m-2 p-2 min-h-2/5">
+            <p className="text-center">Current Assigned lots</p>
             <Table>
                 <TableHeader>
                     <TableRow>
diff --git a/frontend/src/components/production/ocp/PrinterStatus.tsx b/frontend/src/components/production/ocp/PrinterStatus.tsx
index abf704a..27fe9f4 100644
--- a/frontend/src/components/production/ocp/PrinterStatus.tsx
+++ b/frontend/src/components/production/ocp/PrinterStatus.tsx
@@ -1,5 +1,52 @@
 import {LstCard} from "@/components/extendedUI/LstCard";
+import {Skeleton} from "@/components/ui/skeleton";
+import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
 
+let printerCols = [
+    {
+        key: "status",
+        label: "Status",
+    },
+    {
+        key: "printer",
+        label: "Printer",
+    },
+    {
+        key: "statusMessage",
+        label: "Status Message",
+    },
+];
 export default function PrinterStatus() {
-    return <LstCard className="m-2 p-2">Printer Status</LstCard>;
+    return (
+        <LstCard className="m-2 p-2">
+            <p className="text-center">Printer Status</p>
+            <Table>
+                <TableHeader>
+                    <TableRow>
+                        {printerCols.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>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </LstCard>
+    );
 }