feat(frontend): ocp added

frontend/package-lock.json

@@ -21,6 +21,7 @@
                 "@tailwindcss/vite": "^4.0.9",
                 "@tanstack/react-query": "^5.66.9",
                 "@tanstack/react-router": "^1.111.11",
+                "@tanstack/react-table": "^8.21.2",
                 "class-variance-authority": "^0.7.1",
                 "clsx": "^2.1.1",
                 "dotenv": "^16.4.7",
@@ -2660,6 +2661,26 @@
                 "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
             }
         },
+        "node_modules/@tanstack/react-table": {
+            "version": "8.21.2",
+            "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.2.tgz",
+            "integrity": "sha512-11tNlEDTdIhMJba2RBH+ecJ9l1zgS2kjmexDPAraulc8jeNA4xocSNeyzextT0XJyASil4XsCYlJmf5jEWAtYg==",
+            "license": "MIT",
+            "dependencies": {
+                "@tanstack/table-core": "8.21.2"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/tannerlinsley"
+            },
+            "peerDependencies": {
+                "react": ">=16.8",
+                "react-dom": ">=16.8"
+            }
+        },
         "node_modules/@tanstack/router-core": {
             "version": "1.111.7",
             "resolved": "https://registry.npmjs.org/@tanstack/router-core/-/router-core-1.111.7.tgz",
@@ -2821,6 +2842,19 @@
                 "url": "https://github.com/sponsors/tannerlinsley"
             }
         },
+        "node_modules/@tanstack/table-core": {
+            "version": "8.21.2",
+            "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.2.tgz",
+            "integrity": "sha512-uvXk/U4cBiFMxt+p9/G7yUWI/UbHYbyghLCjlpWZ3mLeIZiUBSKcUnw9UnKkdRz7Z/N4UBuFLWQdJCjUe7HjvA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/tannerlinsley"
+            }
+        },
         "node_modules/@tanstack/virtual-file-routes": {
             "version": "1.99.0",
             "resolved": "https://registry.npmjs.org/@tanstack/virtual-file-routes/-/virtual-file-routes-1.99.0.tgz",

frontend/package.json

@@ -24,6 +24,7 @@
         "@tailwindcss/vite": "^4.0.9",
         "@tanstack/react-query": "^5.66.9",
         "@tanstack/react-router": "^1.111.11",
+        "@tanstack/react-table": "^8.21.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "dotenv": "^16.4.7",

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 />;
 }