test(ocp dash): more work on the dashboard

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>
+    );
 }