feat(migration): moved ocp, ocme, wrapper stuff

2025-10-26 10:35:06 -05:00
parent 0fe0a8f56a
commit 4ca20a085e
52 changed files with 1522 additions and 1525 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -43,6 +43,8 @@
                "react-calendar-timeline": "^0.30.0-beta.3",
                "react-day-picker": "^9.11.1",
                "react-dom": "^19.1.1",
+                "react-hook-form": "^7.65.0",
+                "react-resizable-panels": "^3.0.6",
                "recharts": "^2.15.4",
                "socket.io-client": "^4.8.1",
                "sonner": "^2.0.7",
@@ -6598,6 +6600,22 @@
                "react": "^19.1.1"
            }
        },
+        "node_modules/react-hook-form": {
+            "version": "7.65.0",
+            "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.65.0.tgz",
+            "integrity": "sha512-xtOzDz063WcXvGWaHgLNrNzlsdFgtUWcb32E6WFaGTd7kPZG3EeDusjdZfUsPwKCKVXy1ZlntifaHZ4l8pAsmw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=18.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/react-hook-form"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17 || ^18 || ^19"
+            }
+        },
        "node_modules/react-is": {
            "version": "18.3.1",
            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
@@ -6651,6 +6669,16 @@
                }
            }
        },
+        "node_modules/react-resizable-panels": {
+            "version": "3.0.6",
+            "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-3.0.6.tgz",
+            "integrity": "sha512-b3qKHQ3MLqOgSS+FRYKapNkJZf5EQzuf6+RLiq1/IlTHw99YrZ2NJZLk4hQIzTnnIkRg2LUqyVinu6YWWpUYew==",
+            "license": "MIT",
+            "peerDependencies": {
+                "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+                "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+            }
+        },
        "node_modules/react-smooth": {
            "version": "4.0.4",
            "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -45,6 +45,8 @@
        "react-calendar-timeline": "^0.30.0-beta.3",
        "react-day-picker": "^9.11.1",
        "react-dom": "^19.1.1",
+        "react-hook-form": "^7.65.0",
+        "react-resizable-panels": "^3.0.6",
        "recharts": "^2.15.4",
        "socket.io-client": "^4.8.1",
        "sonner": "^2.0.7",
--- a/frontend/src/components/ui/resizable.tsx
+++ b/frontend/src/components/ui/resizable.tsx
@@ -0,0 +1,54 @@
+import * as React from "react"
+import { GripVerticalIcon } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+  return (
+    <ResizablePrimitive.PanelGroup
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      data-slot="resizable-handle"
+      className={cn(
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  )
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
--- a/frontend/src/routeTree.gen.ts
+++ b/frontend/src/routeTree.gen.ts
@@ -19,6 +19,7 @@ import { Route as MobileMobileLayoutRouteRouteImport } from './routes/_mobile/_m
 import { Route as AppAdminLayoutRouteRouteImport } from './routes/_app/_adminLayout/route'
 import { Route as OldOldIndexRouteImport } from './routes/_old/old/index'
 import { Route as AppauthLoginRouteImport } from './routes/_app/(auth)/login'
+import { Route as OldOldOcpIndexRouteImport } from './routes/_old/old/ocp/index'
 import { Route as MobileMobileLayoutMIndexRouteImport } from './routes/_mobile/_mobileLayout/m/index'
 import { Route as AppauthUserIndexRouteImport } from './routes/_app/(auth)/user/index'
 import { Route as MobileMobileLayoutMRelocateRouteImport } from './routes/_mobile/_mobileLayout/m/relocate'
@@ -31,6 +32,7 @@ import { Route as AppauthUserSignupRouteImport } from './routes/_app/(auth)/user
 import { Route as AppauthUserResetpasswordRouteImport } from './routes/_app/(auth)/user/resetpassword'
 import { Route as AppauthUserProfileRouteImport } from './routes/_app/(auth)/user/profile'
 import { Route as AppAdminLayoutAdminUsersRouteRouteImport } from './routes/_app/_adminLayout/admin/_users/route'
+import { Route as OldOldocmeCyclecountIndexRouteImport } from './routes/_old/old/(ocme)/cyclecount/index'
 import { Route as OldOldlogisticsSiloAdjustmentsIndexRouteImport } from './routes/_old/old/(logistics)/siloAdjustments/index'
 import { Route as OldOldlogisticsSiloAdjustmentsHistRouteImport } from './routes/_old/old/(logistics)/siloAdjustments/$hist'
 import { Route as AppAdminLayoutAdminUsersUsersRouteImport } from './routes/_app/_adminLayout/admin/_users/users'
@@ -83,6 +85,11 @@ const AppauthLoginRoute = AppauthLoginRouteImport.update({
  path: '/login',
  getParentRoute: () => AppRouteRoute,
 } as any)
+const OldOldOcpIndexRoute = OldOldOcpIndexRouteImport.update({
+  id: '/ocp/',
+  path: '/ocp/',
+  getParentRoute: () => OldOldRouteRoute,
+} as any)
 const MobileMobileLayoutMIndexRoute =
  MobileMobileLayoutMIndexRouteImport.update({
    id: '/m/',
@@ -151,6 +158,12 @@ const AppAdminLayoutAdminUsersRouteRoute =
    id: '/_users',
    getParentRoute: () => AppAdminLayoutAdminRoute,
  } as any)
+const OldOldocmeCyclecountIndexRoute =
+  OldOldocmeCyclecountIndexRouteImport.update({
+    id: '/(ocme)/cyclecount/',
+    path: '/cyclecount/',
+    getParentRoute: () => OldOldRouteRoute,
+  } as any)
 const OldOldlogisticsSiloAdjustmentsIndexRoute =
  OldOldlogisticsSiloAdjustmentsIndexRouteImport.update({
    id: '/(logistics)/siloAdjustments/',
@@ -200,10 +213,12 @@ export interface FileRoutesByFullPath {
  '/m/relocate': typeof MobileMobileLayoutMRelocateRoute
  '/user': typeof AppauthUserIndexRoute
  '/m': typeof MobileMobileLayoutMIndexRoute
+  '/old/ocp': typeof OldOldOcpIndexRoute
  '/admin/prodUsers': typeof AppAdminLayoutAdminUsersProdUsersRoute
  '/admin/users': typeof AppAdminLayoutAdminUsersUsersRoute
  '/old/siloAdjustments/$hist': typeof OldOldlogisticsSiloAdjustmentsHistRoute
  '/old/siloAdjustments': typeof OldOldlogisticsSiloAdjustmentsIndexRoute
+  '/old/cyclecount': typeof OldOldocmeCyclecountIndexRoute
  '/old/siloAdjustments/comment/$comment': typeof OldOldlogisticsSiloAdjustmentsCommentCommentRoute
 }
 export interface FileRoutesByTo {
@@ -223,10 +238,12 @@ export interface FileRoutesByTo {
  '/m/relocate': typeof MobileMobileLayoutMRelocateRoute
  '/user': typeof AppauthUserIndexRoute
  '/m': typeof MobileMobileLayoutMIndexRoute
+  '/old/ocp': typeof OldOldOcpIndexRoute
  '/admin/prodUsers': typeof AppAdminLayoutAdminUsersProdUsersRoute
  '/admin/users': typeof AppAdminLayoutAdminUsersUsersRoute
  '/old/siloAdjustments/$hist': typeof OldOldlogisticsSiloAdjustmentsHistRoute
  '/old/siloAdjustments': typeof OldOldlogisticsSiloAdjustmentsIndexRoute
+  '/old/cyclecount': typeof OldOldocmeCyclecountIndexRoute
  '/old/siloAdjustments/comment/$comment': typeof OldOldlogisticsSiloAdjustmentsCommentCommentRoute
 }
 export interface FileRoutesById {
@@ -252,10 +269,12 @@ export interface FileRoutesById {
  '/_mobile/_mobileLayout/m/relocate': typeof MobileMobileLayoutMRelocateRoute
  '/_app/(auth)/user/': typeof AppauthUserIndexRoute
  '/_mobile/_mobileLayout/m/': typeof MobileMobileLayoutMIndexRoute
+  '/_old/old/ocp/': typeof OldOldOcpIndexRoute
  '/_app/_adminLayout/admin/_users/prodUsers': typeof AppAdminLayoutAdminUsersProdUsersRoute
  '/_app/_adminLayout/admin/_users/users': typeof AppAdminLayoutAdminUsersUsersRoute
  '/_old/old/(logistics)/siloAdjustments/$hist': typeof OldOldlogisticsSiloAdjustmentsHistRoute
  '/_old/old/(logistics)/siloAdjustments/': typeof OldOldlogisticsSiloAdjustmentsIndexRoute
+  '/_old/old/(ocme)/cyclecount/': typeof OldOldocmeCyclecountIndexRoute
  '/_old/old/(logistics)/siloAdjustments/comment/$comment': typeof OldOldlogisticsSiloAdjustmentsCommentCommentRoute
 }
 export interface FileRouteTypes {
@@ -278,10 +297,12 @@ export interface FileRouteTypes {
    | '/m/relocate'
    | '/user'
    | '/m'
+    | '/old/ocp'
    | '/admin/prodUsers'
    | '/admin/users'
    | '/old/siloAdjustments/$hist'
    | '/old/siloAdjustments'
+    | '/old/cyclecount'
    | '/old/siloAdjustments/comment/$comment'
  fileRoutesByTo: FileRoutesByTo
  to:
@@ -301,10 +322,12 @@ export interface FileRouteTypes {
    | '/m/relocate'
    | '/user'
    | '/m'
+    | '/old/ocp'
    | '/admin/prodUsers'
    | '/admin/users'
    | '/old/siloAdjustments/$hist'
    | '/old/siloAdjustments'
+    | '/old/cyclecount'
    | '/old/siloAdjustments/comment/$comment'
  id:
    | '__root__'
@@ -329,10 +352,12 @@ export interface FileRouteTypes {
    | '/_mobile/_mobileLayout/m/relocate'
    | '/_app/(auth)/user/'
    | '/_mobile/_mobileLayout/m/'
+    | '/_old/old/ocp/'
    | '/_app/_adminLayout/admin/_users/prodUsers'
    | '/_app/_adminLayout/admin/_users/users'
    | '/_old/old/(logistics)/siloAdjustments/$hist'
    | '/_old/old/(logistics)/siloAdjustments/'
+    | '/_old/old/(ocme)/cyclecount/'
    | '/_old/old/(logistics)/siloAdjustments/comment/$comment'
  fileRoutesById: FileRoutesById
 }
@@ -407,6 +432,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof AppauthLoginRouteImport
      parentRoute: typeof AppRouteRoute
    }
+    '/_old/old/ocp/': {
+      id: '/_old/old/ocp/'
+      path: '/ocp'
+      fullPath: '/old/ocp'
+      preLoaderRoute: typeof OldOldOcpIndexRouteImport
+      parentRoute: typeof OldOldRouteRoute
+    }
    '/_mobile/_mobileLayout/m/': {
      id: '/_mobile/_mobileLayout/m/'
      path: '/m'
@@ -491,6 +523,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof AppAdminLayoutAdminUsersRouteRouteImport
      parentRoute: typeof AppAdminLayoutAdminRoute
    }
+    '/_old/old/(ocme)/cyclecount/': {
+      id: '/_old/old/(ocme)/cyclecount/'
+      path: '/cyclecount'
+      fullPath: '/old/cyclecount'
+      preLoaderRoute: typeof OldOldocmeCyclecountIndexRouteImport
+      parentRoute: typeof OldOldRouteRoute
+    }
    '/_old/old/(logistics)/siloAdjustments/': {
      id: '/_old/old/(logistics)/siloAdjustments/'
      path: '/siloAdjustments'
@@ -624,17 +663,21 @@ const MobileMobileLayoutRouteRouteWithChildren =

 interface OldOldRouteRouteChildren {
  OldOldIndexRoute: typeof OldOldIndexRoute
+  OldOldOcpIndexRoute: typeof OldOldOcpIndexRoute
  OldOldlogisticsSiloAdjustmentsHistRoute: typeof OldOldlogisticsSiloAdjustmentsHistRoute
  OldOldlogisticsSiloAdjustmentsIndexRoute: typeof OldOldlogisticsSiloAdjustmentsIndexRoute
+  OldOldocmeCyclecountIndexRoute: typeof OldOldocmeCyclecountIndexRoute
  OldOldlogisticsSiloAdjustmentsCommentCommentRoute: typeof OldOldlogisticsSiloAdjustmentsCommentCommentRoute
 }

 const OldOldRouteRouteChildren: OldOldRouteRouteChildren = {
  OldOldIndexRoute: OldOldIndexRoute,
+  OldOldOcpIndexRoute: OldOldOcpIndexRoute,
  OldOldlogisticsSiloAdjustmentsHistRoute:
    OldOldlogisticsSiloAdjustmentsHistRoute,
  OldOldlogisticsSiloAdjustmentsIndexRoute:
    OldOldlogisticsSiloAdjustmentsIndexRoute,
+  OldOldocmeCyclecountIndexRoute: OldOldocmeCyclecountIndexRoute,
  OldOldlogisticsSiloAdjustmentsCommentCommentRoute:
    OldOldlogisticsSiloAdjustmentsCommentCommentRoute,
 }
--- a/frontend/src/routes/_old/old/(ocme)/cyclecount/index.tsx
+++ b/frontend/src/routes/_old/old/(ocme)/cyclecount/index.tsx
@@ -0,0 +1,14 @@
+import { createFileRoute } from "@tanstack/react-router";
+import OcmeCycleCount from "../../-components/ocme/ocmeCycleCount";
+
+export const Route = createFileRoute("/_old/old/(ocme)/cyclecount/")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	return (
+		<div className="m-2">
+			<OcmeCycleCount />
+		</div>
+	);
+}
--- a/frontend/src/routes/_old/old/-components/ocme/CycleCountLog.tsx
+++ b/frontend/src/routes/_old/old/-components/ocme/CycleCountLog.tsx
@@ -0,0 +1,71 @@
+/**
+ * we will do a very sloppy way for this just keep fetching the logs we spent to much time on this :()
+ */
+
+// //import {useEffect, useState} from "react";
+// import {LstCard} from "../extendedUI/LstCard";
+// import {CardContent, CardHeader} from "../ui/card";
+// import {Skeleton} from "../ui/skeleton";
+// import {Button} from "../ui/button";
+// import {toast} from "sonner";
+// import {useEffect} from "react";
+
+// export default function CycleCountLog() {
+//     //const [logs, setLogs] = useState([]);
+//     //const [streaming, setStreaming] = useState(false); // Track if streaming is active
+
+//     useEffect(() => {
+//         // Start streaming when the button is clicked
+//         let es;
+
+//         const url = `http://localhost:4000/api/logger/logs/stream?service=ocme-count&level=info`;
+
+//         es = new EventSource(url);
+//         es.onopen = () => console.log(">>> Connection opened!");
+//         es.onerror = (e) => console.log("ERROR!", e);
+//         es.onmessage = (e) => {
+//             const data = JSON.parse(e.data);
+
+//             console.log(e);
+//             console.log(data);
+//             switch (data.type) {
+//                 case "time-update":
+//                     console.log(data);
+//                     break;
+//                 case "error":
+//                     console.log(data);
+//                     break;
+//                 case "done":
+//                     console.log(data);
+//                     es.close(); // Close the connection when done
+
+//                     break;
+//                 default:
+//                     break;
+//             }
+//         };
+
+//         return () => es.close();
+//     }, []);
+
+//     // const handleStartStreaming = () => {
+//     //     setStreaming(true); // Start streaming when button is clicked
+//     // };
+//     return (
+//         <LstCard className="w-48">
+//             <CardHeader className="flex justify-center">
+//                 <span>Cycle Count logs</span>
+//             </CardHeader>
+//             <CardContent>
+//                 {Array(10)
+//                 .fill(0)
+//                 .map((_, i) => (
+//                     <div key={i}>
+//                         <Skeleton className="m-2 h-4" />
+//                     </div>
+//                 ))}
+//             </CardContent>
+//             <Button onClick={() => toast.success("SOmething")}>Start Stream</Button>
+//         </LstCard>
+//     );
+// }
--- a/frontend/src/routes/_old/old/-components/ocme/ManuallyEnterRn.tsx
+++ b/frontend/src/routes/_old/old/-components/ocme/ManuallyEnterRn.tsx
@@ -0,0 +1,101 @@
+import { useForm } from "@tanstack/react-form";
+
+import axios from "axios";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export default function ManuallyEnterRn() {
+	const [sending, setSendingRn] = useState(false);
+	const form = useForm({
+		defaultValues: {
+			runningNr: "",
+		},
+		onSubmit: async ({ value }) => {
+			console.log(value);
+			setSendingRn(true);
+			try {
+				const res = await axios.post("/ocme/api/v1/postRunningNumber", {
+					runningNr: value.runningNr,
+					areaFrom: "wrapper_1",
+					completed: true,
+				});
+
+				if (res.data.success) {
+					form.reset();
+					toast.success(`${value.runningNr} was just created please login`);
+					setTimeout(() => {
+						setSendingRn(false);
+					}, 3 * 1000);
+				}
+
+				if (!res.data.success) {
+					toast.error(res.data.message);
+					setTimeout(() => {
+						setSendingRn(false);
+					}, 3 * 1000);
+				}
+			} catch (error) {
+				//console.log(error);
+				toast.error("There was an error registering");
+				setTimeout(() => {
+					setSendingRn(false);
+				}, 3 * 1000);
+			}
+		},
+	});
+	return (
+		<div>
+			<form
+				onSubmit={(e) => {
+					e.preventDefault();
+					//e.stopPropagation();
+				}}
+			>
+				<form.Field
+					name="runningNr"
+					validators={{
+						// We can choose between form-wide and field-specific validators
+						onChange: ({ value }) =>
+							value.length > 3
+								? undefined
+								: "pallet number must be greater than 4 numbers",
+					}}
+					children={(field) => {
+						return (
+							<div className="m-2 min-w-48 max-w-96 p-2 flex flex-row">
+								<div>
+									<Label htmlFor="runningNr" className="mb-2">
+										Running Number
+									</Label>
+									<Input
+										name={field.name}
+										value={field.state.value}
+										onBlur={field.handleBlur}
+										type="number"
+										onChange={(e) => field.handleChange(e.target.value)}
+									/>
+									{field.state.meta.errors.length ? (
+										<em>{field.state.meta.errors.join(",")}</em>
+									) : null}
+								</div>
+								<div className="ml-1 mt-5">
+									<Button
+										className="ml-1"
+										type="submit"
+										onClick={form.handleSubmit}
+										disabled={sending}
+									>
+										Submit
+									</Button>
+								</div>
+							</div>
+						);
+					}}
+				/>
+			</form>
+		</div>
+	);
+}
--- a/frontend/src/routes/_old/old/-components/ocme/WrapperCard.tsx
+++ b/frontend/src/routes/_old/old/-components/ocme/WrapperCard.tsx
@@ -0,0 +1,165 @@
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { format } from "date-fns";
+import { Trash } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { getOcmeInfo } from "../../-utils/querys/ocp/getOcmeInfo";
+import { LstCard } from "../extendedUi/LstCard";
+import ManualTrigger from "../rfid/ManualTrigger";
+
+const currentPallets = [
+	{ key: "line", label: "Line" },
+	{ key: "runningNumber", label: "Running #" },
+	{ key: "upd_date", label: "Date Scanned" },
+	{ key: "waitingfor", label: "Waiting For" },
+	{ key: "clear", label: "Clear" },
+];
+
+// const currentTags = [
+//     { key: "line", label: "Line" },
+//     { key: "printerName", label: "Printer" },
+//     { key: "runningNr", label: "Running #" },
+//     { key: "upd_date", label: "Label date" },
+//     { key: "status", label: "Label Status" },
+// ];
+export default function WrapperManualTrigger() {
+	const { data, isError, isLoading } = useQuery(getOcmeInfo());
+	const cameraTrigger = async () => {
+		try {
+			const res = await axios.get("/ocme/api/v1/manualCameraTrigger");
+
+			if (res.data.success) {
+				toast.success(res.data.message);
+				return;
+			}
+
+			if (!res.data.success) {
+				toast.error(res.data.message);
+			}
+		} catch (error) {
+			console.log(error);
+			//stoast.success(error.data.message);
+		}
+	};
+
+	const clearLabel = async (d: any) => {
+		const data = {
+			runningNr: d.runningNr,
+		};
+
+		try {
+			const res = await axios.patch("/ocme/api/v1/pickedUp", data);
+
+			if (res.data.success) {
+				toast.success(`${d.runningNr} was just removed from being picked up.`);
+				return;
+			}
+
+			if (!res.data.success) {
+				toast.error(res.data.message);
+			}
+		} catch (error) {
+			console.log(error);
+			//stoast.success(error.data.message);
+		}
+	};
+
+	if (isError) {
+		return (
+			<div>
+				<p className="text-center  text-pretty">
+					There was an error getting wrapper scans
+				</p>
+			</div>
+		);
+	}
+
+	const info = data?.filter((r: any) => r.areaFrom === "wrapper_1");
+	return (
+		<LstCard className="m-2 p-2 w-auto">
+			<ScrollArea className="max-h-[200px]">
+				<span>Wrapper Pallet Info</span>
+				<div>
+					<Table>
+						<TableHeader>
+							<TableRow>
+								{currentPallets.map((l) => (
+									<TableHead key={l.key}>{l.label}</TableHead>
+								))}
+							</TableRow>
+						</TableHeader>
+						{isLoading ? (
+							<TableBody>
+								{Array(3)
+									.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>
+								{info.map((i: any) => (
+									<TableRow key={i.runningNr}>
+										<TableCell className="font-medium">{i.lineNum}</TableCell>
+										<TableCell>{i.runningNr}</TableCell>
+										<TableCell>
+											{format(i?.upd_date.replace("Z", ""), "M/d/yyyy hh:mm")}
+										</TableCell>
+										<TableCell>{i.waitingFor}</TableCell>
+										<TableCell>
+											<Button
+												variant="destructive"
+												size="icon"
+												onClick={() => clearLabel(i)}
+											>
+												<Trash />
+											</Button>
+										</TableCell>
+									</TableRow>
+								))}
+							</TableBody>
+						)}
+					</Table>
+				</div>
+			</ScrollArea>
+
+			<div>
+				<hr />
+				{/* <p className="text-center mb-3">Manual Trigger</p>
+                <ManuallyEnterRn />
+                <Separator className="m-1" /> */}
+				<div className="flex flex-row justify-between m-2">
+					<Button onClick={cameraTrigger}>Camera</Button>
+					<ManualTrigger />
+				</div>
+			</div>
+		</LstCard>
+	);
+}
--- a/frontend/src/routes/_old/old/-components/ocme/ocmeCycleCount.tsx
+++ b/frontend/src/routes/_old/old/-components/ocme/ocmeCycleCount.tsx
@@ -0,0 +1,229 @@
+import axios from "axios";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { LstCard } from "@/components/ui/lstCard";
+//import CycleCountLog from "./CycleCountLog";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+
+export default function OcmeCycleCount() {
+	const token = localStorage.getItem("auth_token");
+	const [data, setData] = useState([]);
+	const [counting, setCounting] = useState(false);
+	const {
+		register,
+		handleSubmit,
+		//watch,
+		formState: { errors },
+		reset,
+		control,
+	} = useForm({
+		defaultValues: {
+			lane: "",
+			laneType: "name",
+		},
+	});
+
+	const onSubmit = async (data: any) => {
+		setData([]);
+		setCounting(true);
+
+		if (data.laneType === "") {
+			toast.error("Please select a type");
+			setCounting(false);
+			return;
+		}
+		toast.success(`Cycle count started`);
+		try {
+			const res = await axios.post("/ocme/api/v1/cycleCount", data, {
+				headers: { Authorization: `Bearer ${token}` },
+			});
+
+			if (res.data.success) {
+				toast.success(res.data.message);
+				setData(res.data.data);
+				setCounting(false);
+				reset();
+			}
+
+			if (!res.data.success) {
+				toast.success(res.data.message);
+
+				setCounting(false);
+			}
+		} catch (error) {
+			toast.error("There was an error cycle counting");
+			setCounting(false);
+			reset();
+		}
+	};
+	return (
+		<div className="flex flex-row w-screen">
+			<div className="m-2 w-5/6">
+				<LstCard>
+					<p className="ml-2">
+						Please enter the name or laneID you want to cycle count.
+					</p>
+					<div>
+						<form onSubmit={handleSubmit(onSubmit)}>
+							<div className="flex justify-between">
+								<div className="m-2 flex flex-row">
+									<Input
+										placeholder="enter lane: L064"
+										className={errors.lane ? "border-red-500" : ""}
+										aria-invalid={!!errors.lane}
+										{...register("lane", {
+											required: true,
+											minLength: {
+												value: 3,
+												message: "The lane is too short!",
+											},
+										})}
+									/>
+									<div className="ml-2">
+										<Controller
+											control={control}
+											name="laneType"
+											render={({
+												field: { onChange },
+												fieldState: {},
+												//formState,
+											}) => (
+												<Select onValueChange={onChange}>
+													<SelectTrigger className="w-[180px]">
+														<SelectValue placeholder="Select name or id" />
+													</SelectTrigger>
+													<SelectContent>
+														<SelectItem value="name">Name</SelectItem>
+														<SelectItem value="laneID">Lane ID</SelectItem>
+													</SelectContent>
+												</Select>
+											)}
+										/>
+									</div>
+								</div>
+								<Button className="m-2" type="submit" disabled={counting}>
+									{counting ? (
+										<span>Counting...</span>
+									) : (
+										<span>CycleCount</span>
+									)}
+								</Button>
+							</div>
+						</form>
+					</div>
+					<div>
+						<Table>
+							<TableHeader>
+								<TableRow>
+									<TableHead>LaneID</TableHead>
+									<TableHead>Lane</TableHead>
+									<TableHead>AV</TableHead>
+									<TableHead>Description</TableHead>
+									<TableHead>Running Number</TableHead>
+									<TableHead>In Ocme</TableHead>
+									<TableHead>In Stock</TableHead>
+									<TableHead>Result</TableHead>
+								</TableRow>
+							</TableHeader>
+							{data?.length === 0 ? (
+								<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>
+											</TableRow>
+										))}
+								</TableBody>
+							) : (
+								<>
+									{data.map((i: any) => {
+										let classname = ``;
+										if (i.info === "Validate pallet is ok.") {
+											classname = `bg-red-500`;
+										}
+										if (i.info === "Sent to Inv") {
+											classname = `bg-amber-700`;
+										}
+										return (
+											<TableRow key={i.runningNumber}>
+												<TableCell className={`font-medium ${classname}`}>
+													{i.alpla_laneID}
+												</TableCell>
+												<TableCell className={`font-medium ${classname}`}>
+													{i.alpla_laneDescription}
+												</TableCell>
+												<TableCell className={`font-medium ${classname}`}>
+													{i.Article}
+												</TableCell>
+												<TableCell className={`font-medium ${classname}`}>
+													{i.alpla_laneDescription}
+												</TableCell>
+												<TableCell className={`font-medium ${classname}`}>
+													{i.runningNumber}
+												</TableCell>
+												<TableCell className={`font-medium ${classname}`}>
+													{i.ocme}
+												</TableCell>
+												<TableCell className={`font-medium ${classname}`}>
+													{i.stock}
+												</TableCell>
+												<TableCell className={`font-medium ${classname}`}>
+													{i.info}
+												</TableCell>
+											</TableRow>
+										);
+									})}
+								</>
+							)}
+						</Table>
+					</div>
+				</LstCard>
+			</div>
+			{/* <div className="m-2">
+                <CycleCountLog />
+            </div> */}
+		</div>
+	);
+}
--- a/frontend/src/routes/_old/old/-components/ocp/LabelLog.tsx
+++ b/frontend/src/routes/_old/old/-components/ocp/LabelLog.tsx
@@ -0,0 +1,24 @@
+// import {useSessionStore} from "@/lib/store/sessionStore";
+// import {useSettingStore} from "@/lib/store/useSettings";
+import { useQuery } from "@tanstack/react-query";
+import { getlabels } from "../../-utils/querys/ocp/labels";
+import { labelolumns } from "../../-utils/tableData/production/labels/labelColumns";
+import { LabelTable } from "../../-utils/tableData/production/labels/labelData";
+
+export default function LabelLog() {
+	const { data, isError, isLoading } = useQuery(getlabels("4"));
+
+	if (isError) return <div>Error</div>;
+
+	if (isLoading) return <div>Loading</div>;
+	const labelData = data ? data : [];
+	return (
+		<div className="m-2">
+			<LabelTable
+				columns={labelolumns}
+				data={labelData}
+				//style={style}
+			/>
+		</div>
+	);
+}
--- a/frontend/src/routes/_old/old/-components/ocp/LabelRatio.tsx
+++ b/frontend/src/routes/_old/old/-components/ocp/LabelRatio.tsx
@@ -0,0 +1,27 @@
+import { useQuery } from "@tanstack/react-query";
+import { getlabelRatio } from "../../-utils/querys/ocp/labelRatio";
+import { labelRatioColumns } from "../../-utils/tableData/production/labelRatio/labelRatioColumns";
+import { LabelRatioTable } from "../../-utils/tableData/production/labelRatio/labelRatioData";
+
+export default function LabelRatio() {
+	const { data, isError, isLoading } = useQuery(getlabelRatio());
+
+	const ratioData = data ? data : [];
+	if (isError) {
+		return <div>Error</div>;
+	}
+
+	if (isLoading) {
+		return <div>Loading</div>;
+	}
+
+	return (
+		<div className="m-2">
+			<LabelRatioTable
+				columns={labelRatioColumns}
+				data={ratioData}
+				//style={style}
+			/>
+		</div>
+	);
+}
--- a/frontend/src/routes/_old/old/-components/ocp/Lots.tsx
+++ b/frontend/src/routes/_old/old/-components/ocp/Lots.tsx
@@ -0,0 +1,252 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { useAuth, userAccess } from "@/lib/authClient";
+import { useSettingStore } from "../../-lib/store/useSettings";
+import type { LotType } from "../../-types/lots";
+import { getlots } from "../../-utils/querys/ocp/lots";
+import { LstCard } from "../extendedUi/LstCard";
+import ManualPrint from "./ManualPrinting/ManualPrint";
+import ManualPrintForm from "./ManualPrinting/ManualPrintForm";
+
+let lotColumns = [
+	{
+		key: "MachineDescription",
+		label: "Machine",
+	},
+	{
+		key: "AV",
+		label: "AV",
+	},
+	{
+		key: "Alias",
+		label: "AvDescription",
+	},
+	{
+		key: "lot",
+		label: "LotNumber",
+	},
+	{
+		key: "ProlinkLot",
+		label: "ProlinkLot",
+	},
+	{
+		key: "PlannedQTY",
+		label: "PlannedQTY",
+	},
+	{
+		key: "Produced",
+		label: "Produced",
+	},
+	{
+		key: "Remaining",
+		label: "Remaining",
+	},
+	{
+		key: "overPrinting",
+		label: "Overprinting",
+	},
+	// {
+	//     key: "lastProlinkUpdate",
+	//     label: "Last ProlinkCheck",
+	// },
+	// {
+	//     key: "printLabel",
+	//     label: "Print Label",
+	// },
+];
+export default function Lots() {
+	const { data, isError, isLoading } = useQuery(getlots());
+	const { session } = useAuth();
+	const { settings } = useSettingStore();
+
+	const server = settings.filter((n) => n.name === "dbServer")[0]?.value || "";
+	const lotdata = data ? data : [];
+
+	const accessRoles = userAccess("ocp", [
+		"systemAdmin",
+		"technician",
+		"admin",
+		"manager",
+	]);
+
+	if (session?.user && accessRoles) {
+		//width = 1280;
+		const checkCol = lotColumns.some((l) => l.key === "printLabel");
+		if (!checkCol) {
+			lotColumns = [
+				...lotColumns,
+				{
+					key: "printLabel",
+					label: "Print Label",
+				},
+			];
+		}
+	}
+
+	if (isError) {
+		return (
+			<div className="m-2 p-2 min-h-2/5">
+				<ScrollArea className="max-h-1/2 rounded-md border p-4">
+					<LstCard>
+						<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>
+				</ScrollArea>
+			</div>
+		);
+	}
+	return (
+		<LstCard className="m-2 p-2 min-h-2/5">
+			<ScrollArea className="h-[400px]">
+				<p className="text-center">Current Assigned lots</p>
+				<Table>
+					<TableHeader>
+						<TableRow>
+							{lotColumns.map((l) => (
+								<TableHead key={l.key}>{l.label}</TableHead>
+							))}
+						</TableRow>
+					</TableHeader>
+					{isLoading ? (
+						<>
+							<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>
+						</>
+					) : (
+						<TableBody>
+							{lotdata.map((lot: LotType) => (
+								<TableRow key={lot.LabelOnlineID}>
+									<TableCell className="font-medium">
+										{lot.MachineLocation}
+									</TableCell>
+									<TableCell className="font-medium">{lot.AV}</TableCell>
+									<TableCell className="font-medium">{lot.Alias}</TableCell>
+									<TableCell
+										className={`font-medium ${lot.ProlinkLot != lot.lot ? "text-red-500" : ""}`}
+									>
+										{lot.lot}
+									</TableCell>
+									<TableCell
+										className={`font-medium ${lot.ProlinkLot != lot.lot ? "text-red-500" : ""}`}
+									>
+										{lot.ProlinkLot}
+									</TableCell>
+									<TableCell className="font-medium">
+										{lot.PlannedQTY}
+									</TableCell>
+									<TableCell className="font-medium">{lot.Produced}</TableCell>
+									<TableCell className="font-medium">{lot.Remaining}</TableCell>
+									<TableCell className="font-medium">
+										{lot.overPrinting}
+									</TableCell>
+									{session?.user && accessRoles && (
+										<>
+											{server === "usday1vms006" || server === "localhost" ? (
+												<>
+													<TableCell className="flex justify-center">
+														<ManualPrintForm />
+													</TableCell>
+												</>
+											) : (
+												<TableCell className="flex justify-center">
+													<ManualPrint lot={lot} />
+												</TableCell>
+											)}
+										</>
+									)}
+								</TableRow>
+							))}
+						</TableBody>
+					)}
+				</Table>
+			</ScrollArea>
+		</LstCard>
+	);
+}
--- a/frontend/src/routes/_old/old/-components/ocp/ManualPrinting/ManualPrint.tsx
+++ b/frontend/src/routes/_old/old/-components/ocp/ManualPrinting/ManualPrint.tsx
@@ -0,0 +1,46 @@
+import { Button } from "@/components/ui/button";
+
+//import {useSettingStore} from "@/lib/store/useSettings";
+
+import { Tag } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { useAuth } from "@/lib/authClient";
+import type { LotType } from "../../../-types/lots";
+import { manualPrintLabels } from "./ManualPrintLabel";
+
+export default function ManualPrint({ lot }: { lot: LotType }) {
+	const { session } = useAuth();
+	const [printing, setPrinting] = useState(false);
+	//const {settings} = useSettingStore();
+	//const server = settings.filter((n) => n.name === "server")[0]?.value;
+	//const serverPort = settings.filter((n) => n.name === "serverPort")[0]?.value;
+	//const serverUrl = `http://${server}:${serverPort}`;
+
+	const handlePrintLabel = async (lot: LotType) => {
+		const labels: any = await manualPrintLabels(lot, session?.user);
+
+		if (labels.success) {
+			toast.success(labels.message);
+			setTimeout(() => {
+				setPrinting(false);
+			}, 5 * 1000);
+			setPrinting(true);
+		} else {
+			toast.error(labels.message);
+			setTimeout(() => {
+				setPrinting(false);
+			}, 5 * 1000);
+		}
+	};
+	return (
+		<Button
+			variant="outline"
+			size="icon"
+			onClick={() => handlePrintLabel(lot)}
+			disabled={printing}
+		>
+			<Tag className="h-[16px] w-[16px]" />
+		</Button>
+	);
+}
--- a/frontend/src/routes/_old/old/-components/ocp/ManualPrinting/ManualPrintForm.tsx
+++ b/frontend/src/routes/_old/old/-components/ocp/ManualPrinting/ManualPrintForm.tsx
@@ -0,0 +1,256 @@
+import axios from "axios";
+import { Tag } from "lucide-react";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	// DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { useSettingStore } from "../../../-lib/store/useSettings";
+
+const printReason = [
+	{ key: "printerIssue", label: "Printer Related" },
+	{ key: "missingRfidTag", label: "Missing or incorrect tag" },
+	{ key: "rfidMissScan", label: "Missed Scan from RFID reader" },
+	{ key: "strapper", label: "Strapper Error" },
+	{ key: "manualCheck", label: "20th pallet check" },
+	{ key: "outOfSync", label: "Labeler Out of Sync" },
+];
+
+export default function ManualPrintForm() {
+	const token = localStorage.getItem("auth_token");
+	const { settings } = useSettingStore();
+	const [open, setOpen] = useState(false);
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const server = settings.filter((n) => n.name === "server")[0]?.value;
+	// const serverPort = settings.filter((n) => n.name === "serverPort")[0]?.value;
+	// const serverUrl = `http://${server}:${serverPort}`;
+
+	// what is the dyco set to? rfid or dyco
+	const dyco = settings.filter((n) => n.name === "dycoPrint");
+	const {
+		register,
+		handleSubmit,
+		//watch,
+		formState: { errors },
+		reset,
+		control,
+	} = useForm();
+
+	const handleManualPrintLog = async (logData: any) => {
+		// toast.success(`A new label was sent to printer: ${lot.PrinterName} for line ${lot.MachineDescription} `);
+		const logdataUrl = `/lst/old/api/ocp/manuallabellog`;
+		setIsSubmitting(true);
+		axios
+			.post(logdataUrl, logData, {
+				headers: { Authorization: `Bearer ${token}` },
+			})
+			.then((d) => {
+				console.log(d);
+				if (d.data.success) {
+					toast.success(d.data.message);
+				} else {
+					toast.error(d.data.message);
+				}
+				reset();
+				setOpen(false);
+				setIsSubmitting(false);
+			})
+			.catch((e) => {
+				if (e.response.status === 500) {
+					toast.error(`Internal Server error please try again.`);
+					setIsSubmitting(false);
+					return { sucess: false };
+				}
+
+				if (e.response.status === 401) {
+					//console.log(e.response);
+					toast.error(`You are not authorized to do this.`);
+					setIsSubmitting(false);
+					return { sucess: false };
+				}
+			});
+	};
+
+	const onSubmit = (data: any) => {
+		console.log(data);
+
+		handleManualPrintLog(data);
+	};
+
+	const closeForm = () => {
+		reset();
+		setOpen(false);
+	};
+	return (
+		<Dialog
+			open={open}
+			onOpenChange={(isOpen) => {
+				if (!open) {
+					reset();
+				}
+				setOpen(isOpen);
+				// toast.message("Model was something", {
+				//     description: isOpen ? "Modal is open" : "Modal is closed",
+				// });
+			}}
+		>
+			<DialogTrigger asChild>
+				<Button variant="outline" size="icon">
+					<Tag className="h-[16px] w-[16px]" />
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-[425px]">
+				<DialogHeader>
+					<DialogTitle>Manual Print form</DialogTitle>
+					{/* <DialogDescription>
+                        Make changes to your profile here. Click save when
+                        you're done.
+                    </DialogDescription> */}
+				</DialogHeader>
+				<form onSubmit={handleSubmit(onSubmit)}>
+					<p>
+						To manually print a label you must complete all the required fields
+						below.
+						<br />
+						If you clicked this in error just click close
+					</p>
+					<hr className="mt-2 mb-2" />
+					{server == "usday1vms006" ? (
+						<Controller
+							control={control}
+							name="printReason"
+							defaultValue={""}
+							render={({
+								field: { onChange },
+								fieldState: {},
+								//formState,
+							}) => (
+								<Select onValueChange={onChange}>
+									<SelectTrigger className="w-[180px]">
+										<SelectValue placeholder="Select Reason" />
+									</SelectTrigger>
+									<SelectContent>
+										<SelectGroup>
+											<SelectLabel>Print Reasons</SelectLabel>
+											{printReason.map((printReason: any) => (
+												<SelectItem value={printReason.key}>
+													{printReason.label}
+												</SelectItem>
+											))}
+										</SelectGroup>
+									</SelectContent>
+								</Select>
+							)}
+						/>
+					) : (
+						<div className="m-2">
+							<Label htmlFor="printRason" className="m-1">
+								Why are you manually printing?
+							</Label>
+							<Input
+								type="text"
+								className={errors.printReason ? "border-red-500" : ""}
+								aria-invalid={!!errors.printReason}
+								{...register("printReason", {
+									required: true,
+									minLength: {
+										value: 5,
+										message: "To short of a reason please try again!",
+									},
+								})}
+							/>
+						</div>
+					)}
+					<div className="m-2">
+						<Label htmlFor="line" className="m-1">
+							"What is the line number you are printing?"
+						</Label>
+						<Input
+							//variant="underlined"
+							type="number"
+							className={errors.line ? "border-red-500" : ""}
+							aria-invalid={!!errors.line}
+							{...register("line", { required: true })}
+						/>
+					</div>
+
+					<div className="m-2">
+						<Label htmlFor="initials" className="m-1">
+							Enter intials
+						</Label>
+						<Input
+							//variant="underlined"
+							//label="Enter intials"
+
+							{...register("initials", { required: true })}
+						/>
+					</div>
+					<hr />
+					{dyco[0].value === "0" && (
+						<div>
+							<p>Enter the missing tag number.</p>
+							<hr />
+							<Label htmlFor="rfidTag" className="m-1">
+								Enter the tag number only Example ALPLA000002541. only enter
+								2541
+							</Label>
+							<Input
+								type="text"
+								className={errors.printReason ? "border-red-500" : ""}
+								aria-invalid={!!errors.printReason}
+								{...register("rfidTag", {
+									required: true,
+									minLength: {
+										value: 1,
+										message: "Tag number is to short!",
+									},
+								})}
+							/>
+						</div>
+					)}
+					<div className="m-2">
+						<Textarea
+							//label="Comments"
+							placeholder="add more info as needed."
+							{
+								...register("additionalComments")
+								// { required: true, minLength: 10 }
+							}
+						/>
+					</div>
+
+					<DialogFooter>
+						<div className="mt-3">
+							<Button color="danger" variant="default" onClick={closeForm}>
+								Close
+							</Button>
+							<Button color="primary" type="submit" disabled={isSubmitting}>
+								Print
+							</Button>
+						</div>
+					</DialogFooter>
+				</form>
+			</DialogContent>
+		</Dialog>
+	);
+}
--- a/frontend/src/routes/_old/old/-components/ocp/ManualPrinting/ManualPrintLabel.ts
+++ b/frontend/src/routes/_old/old/-components/ocp/ManualPrinting/ManualPrintLabel.ts
@@ -0,0 +1,44 @@
+import axios from "axios";
+import type { LotType } from "../../../-types/lots";
+
+export const manualPrintLabels = async (lot: LotType, user: any) => {
+	//console.log(lot);
+	const labelUrl = `/lst/old/api/ocp/manualprintandfollow`;
+
+	try {
+		const res = await axios.post(
+			labelUrl,
+			{ line: lot.MachineLocation, printerName: lot.PrinterName },
+			{ headers: { Authorization: `Basic ${user?.prod}` } },
+		);
+
+		if (res.data.success) {
+			return {
+				success: true,
+				message: `A new label was printed for ${lot.MachineDescription} to printer: ${lot.PrinterName}`,
+			};
+		} else {
+			return {
+				success: false,
+				message: `Line ${lot.MachineDescription} encountered an error printing labels: ${res.data.message}`,
+			};
+		}
+	} catch (error: any) {
+		if (error.response.status === 500) {
+			//toast.error(`Internal Server error please try again.`);
+			return {
+				success: false,
+				message: `Internal Server error please try again.`,
+			};
+		}
+
+		if (error.response.status === 401) {
+			//console.log(e.response);
+			//toast.error(`You are not authorized to do this.`);
+			return {
+				success: false,
+				message: `You are not authorized to do this.`,
+			};
+		}
+	}
+};
--- a/frontend/src/routes/_old/old/-components/ocp/OcpLogs.tsx
+++ b/frontend/src/routes/_old/old/-components/ocp/OcpLogs.tsx
@@ -0,0 +1,46 @@
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+
+import { useMemo } from "react";
+import { toast } from "sonner";
+import { getOcpLogs } from "../../-utils/querys/ocp/ocpLogs";
+import { ocpColumns } from "../../-utils/tableData/production/ocpLogs/ocpLogColumns";
+import { OcpLogTable } from "../../-utils/tableData/production/ocpLogs/ocpLogData";
+
+export default function OcpLogs() {
+	const { data, isError, isLoading } = useQuery(getOcpLogs("4"));
+
+	const clearLog = async (log: any) => {
+		try {
+			const res = await axios.patch(`/lst/old/api/logger/logs/${log.log_id}`);
+
+			if (res.data.success) {
+				toast.success(`Log message: ${log.message}, was just cleared`);
+			} else {
+				console.log(res);
+				toast.error(`There was an error clearing the message.`);
+			}
+		} catch (error) {
+			toast.error(`There was an error trying to clearing the message.`);
+		}
+	};
+	const columns = useMemo(() => ocpColumns(clearLog), [clearLog]);
+	const logData = data ? data : [];
+	if (isError) {
+		return <div>Error</div>;
+	}
+
+	if (isLoading) {
+		return <div>Loading</div>;
+	}
+
+	return (
+		<div className="m-2">
+			<OcpLogTable
+				columns={columns}
+				data={logData}
+				//style={style}
+			/>
+		</div>
+	);
+}
--- a/frontend/src/routes/_old/old/-components/ocp/OcpPage.tsx
+++ b/frontend/src/routes/_old/old/-components/ocp/OcpPage.tsx
@@ -0,0 +1,134 @@
+import {
+	ResizableHandle,
+	ResizablePanel,
+	ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import { useSettingStore } from "../../-lib/store/useSettings";
+import WrapperManualTrigger from "../ocme/WrapperCard";
+import LabelLog from "./LabelLog";
+import LabelRatio from "./LabelRatio";
+import Lots from "./Lots";
+import OcpLogs from "./OcpLogs";
+import PrinterStatus from "./PrinterStatus";
+
+export default function OCPPage() {
+	const { settings } = useSettingStore();
+
+	if (settings.length === 0) return;
+	let token = settings.filter((n) => n.name === "plantToken");
+
+	return (
+		<div className="ml-5 w-11/12 h-9/10">
+			<ResizablePanelGroup
+				direction="horizontal"
+				//className="rounded-lg border"
+				autoSaveId="ocpPage"
+			>
+				<ResizablePanel>
+					<ResizablePanelGroup direction="vertical">
+						<ResizablePanel
+							style={{
+								overflow: "auto",
+								scrollbarWidth: "none",
+							}}
+						>
+							<Lots />
+						</ResizablePanel>
+						<ResizableHandle />
+						<ResizablePanel>
+							<ResizablePanelGroup direction="horizontal" autoSaveId="ocpPage">
+								<ResizablePanel
+									//className="text-sm p-4 overflow-scroll"
+									style={{
+										overflow: "auto",
+										scrollbarWidth: "none",
+									}}
+								>
+									<LabelLog />
+								</ResizablePanel>
+								<ResizableHandle />
+								<ResizablePanel
+									style={{
+										overflow: "auto",
+										scrollbarWidth: "none",
+									}}
+								>
+									<OcpLogs />
+								</ResizablePanel>
+							</ResizablePanelGroup>
+						</ResizablePanel>
+					</ResizablePanelGroup>
+				</ResizablePanel>
+				<ResizableHandle />
+				<ResizablePanel className="min-h-[200px] min-w-[200px] max-w-[450px]">
+					<ResizablePanelGroup direction="vertical" autoSaveId="ocpPage_vert">
+						{token[0].value === "usday1vms006" ||
+							(location.pathname === "localhost" && (
+								<ResizablePanel
+									style={{
+										overflow: "auto",
+										scrollbarWidth: "none",
+									}}
+									defaultSize={50}
+									className="min-h-[200px]"
+								>
+									<WrapperManualTrigger />
+								</ResizablePanel>
+							))}
+
+						<ResizableHandle />
+						<ResizablePanel>
+							<PrinterStatus />
+							<LabelRatio />
+						</ResizablePanel>
+					</ResizablePanelGroup>
+				</ResizablePanel>
+			</ResizablePanelGroup>
+		</div>
+	);
+	// return (
+	//     <div className="h-screen w-full ">
+	//         <div className="flex flex-row gap-2">
+	//             <div className="flex flex-col w-4/5 h-dvh">
+	//                 <div className="">
+	//                     <Lots />
+	//                 </div>
+
+	//                 <div className="w-5/6 h-1/2">
+	//                     <Tabs defaultValue="ocplogs" className="w-full">
+	//                         <TabsList className="grid w-full grid-cols-2">
+	//                             <TabsTrigger value="ocplogs">
+	//                                 OcpLogs
+	//                             </TabsTrigger>
+	//                             <TabsTrigger value="labels">Labels</TabsTrigger>
+	//                         </TabsList>
+	//                         <TabsContent value="ocplogs">
+	//                             <div className="w-full">
+	//                                 <OcpLogs />
+	//                             </div>
+	//                         </TabsContent>
+	//                         <TabsContent value="labels">
+	//                             <LabelLog />
+	//                         </TabsContent>
+	//                     </Tabs>
+	//                 </div>
+	//             </div>
+	//             <div className="flex flex-col">
+	//                 {server[0].value === "usday1vms006" && (
+	//                     <div>
+	//                         <WrapperManualTrigger />
+	//                     </div>
+	//                 )}
+	//                 {server[0].value === "localhost" && (
+	//                     <div>
+	//                         <WrapperManualTrigger />
+	//                     </div>
+	//                 )}
+	//                 <div>
+	//                     <PrinterStatus />
+	//                 </div>
+	//             </div>
+	//         </div>
+	//     </div>
+	// );
+}
--- a/frontend/src/routes/_old/old/-components/ocp/PrinterStatus.tsx
+++ b/frontend/src/routes/_old/old/-components/ocp/PrinterStatus.tsx
@@ -0,0 +1,114 @@
+import { useQuery } from "@tanstack/react-query";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import { getPrinters } from "../../-utils/querys/ocp/printers";
+import { LstCard } from "../extendedUi/LstCard";
+
+let printerCols = [
+	{
+		key: "printer",
+		label: "Printer",
+	},
+	{
+		key: "statusMessage",
+		label: "Status Message",
+	},
+];
+export default function PrinterStatus() {
+	const { data, isError, isLoading } = useQuery(getPrinters());
+
+	if (isError) {
+		return (
+			<ScrollArea className="h-[400px]">
+				<p className="text-center">Printer Staus error</p>
+
+				<Table>
+					<TableHeader>
+						<TableRow>
+							{printerCols.map((l) => (
+								<TableHead key={l.key}>{l.label}</TableHead>
+							))}
+						</TableRow>
+					</TableHeader>
+
+					<TableBody>
+						{Array(5)
+							.fill(0)
+							.map((_, i) => (
+								<TableRow key={i}>
+									<TableCell className="font-medium">
+										<Skeleton className="h-4" />
+									</TableCell>
+									<TableCell>
+										<Skeleton className="h-4" />
+									</TableCell>
+								</TableRow>
+							))}
+					</TableBody>
+				</Table>
+			</ScrollArea>
+		);
+	}
+
+	/**
+	 * only show the assigned printers
+	 */
+
+	const assigned = data?.filter((a: any) => a.assigned) || [];
+	return (
+		<LstCard className="m-2 p-2">
+			<ScrollArea className="max-h-[800px]">
+				<p className="text-center">
+					{isLoading ? (
+						<span>Printers status loading...</span>
+					) : (
+						<span>Printer Status</span>
+					)}
+				</p>
+
+				<Table>
+					<TableHeader>
+						<TableRow>
+							{printerCols.map((l) => (
+								<TableHead key={l.key}>{l.label}</TableHead>
+							))}
+						</TableRow>
+					</TableHeader>
+					{isLoading ? (
+						<TableBody>
+							{Array(5)
+								.fill(0)
+								.map((_, i) => (
+									<TableRow key={i}>
+										<TableCell className="font-medium">
+											<Skeleton className="h-4" />
+										</TableCell>
+										<TableCell>
+											<Skeleton className="h-4" />
+										</TableCell>
+									</TableRow>
+								))}
+						</TableBody>
+					) : (
+						<TableBody>
+							{assigned?.map((p: any) => (
+								<TableRow key={p.printer_id}>
+									<TableCell>{p.name}</TableCell>
+									<TableCell>{p.statusText}</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+					)}
+				</Table>
+			</ScrollArea>
+		</LstCard>
+	);
+}
--- a/frontend/src/routes/_old/old/-components/rfid/ManualTrigger.tsx
+++ b/frontend/src/routes/_old/old/-components/rfid/ManualTrigger.tsx
@@ -0,0 +1,30 @@
+import axios from "axios";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+
+export default function ManualTrigger() {
+	const rfidReaderTrigger = async () => {
+		try {
+			const res = await axios.post("/lst/old/api/rfid/manualtrigger/wrapper1");
+
+			if (res.data.success) {
+				toast.success(res.data.message);
+
+				return;
+			}
+
+			if (!res.data.success) {
+				toast.error(res.data.message);
+			}
+		} catch (error) {
+			console.log(error);
+
+			//stoast.success(error.data.message);
+		}
+	};
+	return (
+		<div>
+			<Button onClick={rfidReaderTrigger}>Wrapper 1 RFID</Button>
+		</div>
+	);
+}
--- a/frontend/src/routes/_old/old/-utils/querys/ocp/getOcmeInfo.tsx
+++ b/frontend/src/routes/_old/old/-utils/querys/ocp/getOcmeInfo.tsx
@@ -0,0 +1,19 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getOcmeInfo() {
+	return queryOptions({
+		queryKey: ["ocmeInfo"],
+		queryFn: () => fetchSettings(),
+		staleTime: 1000,
+		refetchInterval: 2 * 2000,
+		refetchOnWindowFocus: true,
+	});
+}
+
+const fetchSettings = async () => {
+	const { data } = await axios.get(`/lst/old/ocme/api/v1/getInfo`);
+	// if we are not localhost ignore the devDir setting.
+	//const url: string = window.location.host.split(":")[0];
+	return data.data ?? [];
+};
--- a/frontend/src/routes/_old/old/-utils/querys/ocp/labelRatio.tsx
+++ b/frontend/src/routes/_old/old/-utils/querys/ocp/labelRatio.tsx
@@ -0,0 +1,20 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getlabelRatio() {
+	return queryOptions({
+		queryKey: ["labelRatio"],
+		queryFn: () => fetchSettings(),
+
+		//staleTime: 1000,
+		refetchInterval: 2 * 2000,
+		refetchOnWindowFocus: true,
+	});
+}
+
+const fetchSettings = async () => {
+	const { data } = await axios.get(`/lst/old/api/ocp/labelratio`);
+	// if we are not localhost ignore the devDir setting.
+	//const url: string = window.location.host.split(":")[0];
+	return data.data ?? [];
+};
--- a/frontend/src/routes/_old/old/-utils/querys/ocp/labels.tsx
+++ b/frontend/src/routes/_old/old/-utils/querys/ocp/labels.tsx
@@ -0,0 +1,20 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getlabels(hours: string) {
+	return queryOptions({
+		queryKey: ["labels"],
+		queryFn: () => fetchSettings(hours),
+
+		//staleTime: 1000,
+		refetchInterval: 2 * 2000,
+		refetchOnWindowFocus: true,
+	});
+}
+
+const fetchSettings = async (hours: string) => {
+	const { data } = await axios.get(`/lst/old/api/ocp/getlabels?hours=${hours}`);
+	// if we are not localhost ignore the devDir setting.
+	//const url: string = window.location.host.split(":")[0];
+	return data.data ?? [];
+};
--- a/frontend/src/routes/_old/old/-utils/querys/ocp/lots.tsx
+++ b/frontend/src/routes/_old/old/-utils/querys/ocp/lots.tsx
@@ -0,0 +1,21 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getlots() {
+	return queryOptions({
+		queryKey: ["lots"],
+		queryFn: () => fetchSettings(),
+
+		staleTime: 10 * 1000,
+		refetchInterval: 1000 * 10,
+		refetchOnWindowFocus: true,
+	});
+}
+
+const fetchSettings = async () => {
+	const { data } = await axios.get("/lst/old/api/ocp/getlots");
+	// if we are not localhost ignore the devDir setting.
+	//const url: string = window.location.host.split(":")[0];
+	let lotData = data.data;
+	return lotData ?? [];
+};
--- a/frontend/src/routes/_old/old/-utils/querys/ocp/ocpLogs.tsx
+++ b/frontend/src/routes/_old/old/-utils/querys/ocp/ocpLogs.tsx
@@ -0,0 +1,22 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getOcpLogs(hours: string) {
+	return queryOptions({
+		queryKey: ["ocpLogs"],
+		queryFn: () => fetchSettings(hours),
+
+		staleTime: 1000,
+		refetchInterval: 2 * 1000,
+		refetchOnWindowFocus: true,
+	});
+}
+
+const fetchSettings = async (hours: string) => {
+	const { data } = await axios.get(
+		`/lst/old/api/logger/logs?service=ocp&service=rfid&service=dyco&level=error&level=warn&hours=${hours}`,
+	);
+	// if we are not localhost ignore the devDir setting.
+	//const url: string = window.location.host.split(":")[0];
+	return data.data ?? [];
+};
--- a/frontend/src/routes/_old/old/-utils/querys/ocp/printers.tsx
+++ b/frontend/src/routes/_old/old/-utils/querys/ocp/printers.tsx
@@ -0,0 +1,20 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getPrinters() {
+	return queryOptions({
+		queryKey: ["printers"],
+		queryFn: () => fetchSettings(),
+
+		staleTime: 1000,
+		refetchInterval: 2 * 2000,
+		refetchOnWindowFocus: true,
+	});
+}
+
+const fetchSettings = async () => {
+	const { data } = await axios.get(`/lst/old/api/ocp/getprinters`);
+	// if we are not localhost ignore the devDir setting.
+	//const url: string = window.location.host.split(":")[0];
+	return data.data ?? [];
+};
--- a/frontend/src/routes/_old/old/-utils/querys/production/getOcmeInfo.tsx
+++ b/frontend/src/routes/_old/old/-utils/querys/production/getOcmeInfo.tsx
@@ -1,19 +0,0 @@
-import { queryOptions } from "@tanstack/react-query";
-import axios from "axios";
-
-export function getOcmeInfo() {
-    return queryOptions({
-        queryKey: ["ocmeInfo"],
-        queryFn: () => fetchSettings(),
-        staleTime: 1000,
-        refetchInterval: 2 * 2000,
-        refetchOnWindowFocus: true,
-    });
-}
-
-const fetchSettings = async () => {
-    const { data } = await axios.get(`/ocme/api/v1/getInfo`);
-    // if we are not localhost ignore the devDir setting.
-    //const url: string = window.location.host.split(":")[0];
-    return data.data ?? [];
-};
--- a/frontend/src/routes/_old/old/-utils/querys/production/labelRatio.tsx
+++ b/frontend/src/routes/_old/old/-utils/querys/production/labelRatio.tsx
@@ -1,20 +0,0 @@
-import { queryOptions } from "@tanstack/react-query";
-import axios from "axios";
-
-export function getlabelRatio() {
-    return queryOptions({
-        queryKey: ["labelRatio"],
-        queryFn: () => fetchSettings(),
-
-        //staleTime: 1000,
-        refetchInterval: 2 * 2000,
-        refetchOnWindowFocus: true,
-    });
-}
-
-const fetchSettings = async () => {
-    const { data } = await axios.get(`/api/ocp/labelratio`);
-    // if we are not localhost ignore the devDir setting.
-    //const url: string = window.location.host.split(":")[0];
-    return data.data ?? [];
-};
--- a/frontend/src/routes/_old/old/-utils/querys/production/labels.tsx
+++ b/frontend/src/routes/_old/old/-utils/querys/production/labels.tsx
@@ -1,20 +0,0 @@
-import { queryOptions } from "@tanstack/react-query";
-import axios from "axios";
-
-export function getlabels(hours: string) {
-    return queryOptions({
-        queryKey: ["labels"],
-        queryFn: () => fetchSettings(hours),
-
-        //staleTime: 1000,
-        refetchInterval: 2 * 2000,
-        refetchOnWindowFocus: true,
-    });
-}
-
-const fetchSettings = async (hours: string) => {
-    const { data } = await axios.get(`/api/ocp/getlabels?hours=${hours}`);
-    // if we are not localhost ignore the devDir setting.
-    //const url: string = window.location.host.split(":")[0];
-    return data.data ?? [];
-};
--- a/frontend/src/routes/_old/old/-utils/querys/production/lots.tsx
+++ b/frontend/src/routes/_old/old/-utils/querys/production/lots.tsx
@@ -1,21 +0,0 @@
-import { queryOptions } from "@tanstack/react-query";
-import axios from "axios";
-
-export function getlots() {
-    return queryOptions({
-        queryKey: ["lots"],
-        queryFn: () => fetchSettings(),
-
-        staleTime: 10 * 1000,
-        refetchInterval: 1000 * 10,
-        refetchOnWindowFocus: true,
-    });
-}
-
-const fetchSettings = async () => {
-    const { data } = await axios.get("/api/ocp/getlots");
-    // if we are not localhost ignore the devDir setting.
-    //const url: string = window.location.host.split(":")[0];
-    let lotData = data.data;
-    return lotData ?? [];
-};
--- a/frontend/src/routes/_old/old/-utils/querys/production/ocpLogs.tsx
+++ b/frontend/src/routes/_old/old/-utils/querys/production/ocpLogs.tsx
@@ -1,22 +0,0 @@
-import { queryOptions } from "@tanstack/react-query";
-import axios from "axios";
-
-export function getOcpLogs(hours: string) {
-    return queryOptions({
-        queryKey: ["ocpLogs"],
-        queryFn: () => fetchSettings(hours),
-
-        staleTime: 1000,
-        refetchInterval: 2 * 1000,
-        refetchOnWindowFocus: true,
-    });
-}
-
-const fetchSettings = async (hours: string) => {
-    const { data } = await axios.get(
-        `/api/logger/logs?service=ocp&service=rfid&service=dyco&level=error&level=warn&hours=${hours}`
-    );
-    // if we are not localhost ignore the devDir setting.
-    //const url: string = window.location.host.split(":")[0];
-    return data.data ?? [];
-};
--- a/frontend/src/routes/_old/old/-utils/querys/production/printers.tsx
+++ b/frontend/src/routes/_old/old/-utils/querys/production/printers.tsx
@@ -1,20 +0,0 @@
-import { queryOptions } from "@tanstack/react-query";
-import axios from "axios";
-
-export function getPrinters() {
-    return queryOptions({
-        queryKey: ["printers"],
-        queryFn: () => fetchSettings(),
-
-        staleTime: 1000,
-        refetchInterval: 2 * 2000,
-        refetchOnWindowFocus: true,
-    });
-}
-
-const fetchSettings = async () => {
-    const { data } = await axios.get(`/api/ocp/getprinters`);
-    // if we are not localhost ignore the devDir setting.
-    //const url: string = window.location.host.split(":")[0];
-    return data.data ?? [];
-};
--- a/frontend/src/routes/_old/old/-utils/querys/rfid/getReaders.tsx
+++ b/frontend/src/routes/_old/old/-utils/querys/rfid/getReaders.tsx
@@ -2,19 +2,19 @@ import { queryOptions } from "@tanstack/react-query";
 import axios from "axios";

 export function getReaders() {
-    return queryOptions({
-        queryKey: ["getReaders"],
-        queryFn: () => fetchReaders(),
-        //enabled:
-        staleTime: 1000,
-        refetchInterval: 60 * 1000,
-        refetchOnWindowFocus: true,
-    });
+	return queryOptions({
+		queryKey: ["getReaders"],
+		queryFn: () => fetchReaders(),
+		//enabled:
+		staleTime: 1000,
+		refetchInterval: 60 * 1000,
+		refetchOnWindowFocus: true,
+	});
 }

 const fetchReaders = async () => {
-    const { data } = await axios.get(`/api/rfid/getreaders`);
-    // if we are not localhost ignore the devDir setting.
-    //const url: string = window.location.host.split(":")[0];
-    return data.data ?? [];
+	const { data } = await axios.get(`/lst/old/api/rfid/getreaders`);
+	// if we are not localhost ignore the devDir setting.
+	//const url: string = window.location.host.split(":")[0];
+	return data.data ?? [];
 };
--- a/frontend/src/routes/_old/old/ocp/index.tsx
+++ b/frontend/src/routes/_old/old/ocp/index.tsx
@@ -0,0 +1,14 @@
+import { createFileRoute } from "@tanstack/react-router";
+import OCPPage from "../-components/ocp/OcpPage";
+
+export const Route = createFileRoute("/_old/old/ocp/")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	return (
+		<div className="h-dvh w-dvw">
+			<OCPPage />
+		</div>
+	);
+}
--- a/frontend/src/routes/_old/old/route.tsx
+++ b/frontend/src/routes/_old/old/route.tsx
@@ -29,7 +29,7 @@ function RouteComponent() {
 	const { session } = useAuth();
 	const logout = useLogout();
 	//const { settings } = useSettingStore();
-	console.log(location.pathname);
+	//console.log(location.pathname);
 	return (
 		<div>
 			<nav className="flex justify-end w-full shadow ">
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -5,7 +5,6 @@
 		{ "path": "./tsconfig.node.json" }
 	],
 	"compilerOptions": {
-		"baseUrl": ".",
 		"paths": {
 			"@/*": ["./src/*"]
 		}