feat(frontend): ocp added

frontend/src/components/production/ocp/LabelLog.tsx

@@ -0,0 +1,5 @@
+import {LstCard} from "@/components/extendedUI/LstCard";
+
+export default function LabelLog() {
+    return <LstCard className="m-2 p-2"> label logs here</LstCard>;
+}

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

@@ -0,0 +1,9 @@
+import {LstCard} from "@/components/extendedUI/LstCard";
+
+export default function Lots() {
+    return (
+        <LstCard className="m-2 p-2 min-h-2/5">
+            <h1>Lots</h1>
+        </LstCard>
+    );
+}

frontend/src/components/production/ocp/OcpLogs.tsx

@@ -0,0 +1,5 @@
+import {LstCard} from "@/components/extendedUI/LstCard";
+
+export default function OcpLogs() {
+    return <LstCard className="m-2 p-2">Ocp Logs</LstCard>;
+}

frontend/src/components/production/ocp/OcpPage.tsx

@@ -0,0 +1,30 @@
+import LabelLog from "./LabelLog";
+import Lots from "./Lots";
+import OcpLogs from "./OcpLogs";
+import PrinterStatus from "./PrinterStatus";
+
+export default function OCPPage() {
+    return (
+        <div className="h-dvh w-full overflow-hidden">
+            <div className="flex flex-wrap gap-2">
+                <div className="flex flex-col w-4/5 h-dvh">
+                    <div className="">
+                        <Lots />
+                    </div>
+
+                    <div className="flex flex-row">
+                        <div className="w-1/2">
+                            <LabelLog />
+                        </div>
+                        <div className="w-1/2">
+                            <OcpLogs />
+                        </div>
+                    </div>
+                </div>
+                <div className="w-1/6">
+                    <PrinterStatus />
+                </div>
+            </div>
+        </div>
+    );
+}

frontend/src/components/production/ocp/PrinterStatus.tsx

@@ -0,0 +1,5 @@
+import {LstCard} from "@/components/extendedUI/LstCard";
+
+export default function PrinterStatus() {
+    return <LstCard className="m-2 p-2">Printer Status</LstCard>;
+}

frontend/src/routes/ocp/index.tsx

@@ -1,21 +1,10 @@
-import {createFileRoute, Link} from "@tanstack/react-router";
+import OCPPage from "@/components/production/ocp/OcpPage";
+import {createFileRoute} from "@tanstack/react-router";
 
 export const Route = createFileRoute("/ocp/")({
     component: RouteComponent,
 });
 
 function RouteComponent() {
-    const lines = ["l", "2", "3"];
-    return (
-        <div>
-            <h2>Hello "/ocp/something"!</h2>
-            {lines.map((line) => {
-                return (
-                    <div key={line}>
-                        <Link to="/ocp">Specific Line</Link>
-                    </div>
-                );
-            })}
-        </div>
-    );
+    return <OCPPage />;
 }