feat(lstv2 move): moved lstv2 into this app to keep them combined and easier to maintain

lstV2/frontend/src/utils/adminUrlCheck.ts

@@ -0,0 +1,8 @@
+export const adminUrlCheck = () => {
+    const host = window.location.host.split(":")[0];
+    const okHost = ["localhost", "usmcd1vms036"];
+    if (okHost.includes(host)) {
+        return true;
+    }
+    return false;
+};

lstV2/frontend/src/utils/auth.ts

@@ -0,0 +1,11 @@
+export function isAuthenticated() {
+    return localStorage.getItem("isAuthenticated") === "true";
+}
+
+export function signIn() {
+    return localStorage.setItem("isAuthenticated", "true");
+}
+
+export function signOut() {
+    return localStorage.removeItem("isAuthenticated");
+}

lstV2/frontend/src/utils/delay.ts

@@ -0,0 +1,3 @@
+export function delay(ms: number) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}

lstV2/frontend/src/utils/fixTime.ts

@@ -0,0 +1,21 @@
+import { addHours } from "date-fns";
+import { format } from "date-fns-tz";
+
+export const fixTime = (date: any) => {
+    /**
+     * This fix is when it comes directly from lst
+     */
+    if (!date) return;
+    //const strippedDate = date?.replace("Z", ""); // Remove Z
+    //return format(strippedDate, "MM/dd/yyyy hh:mm a");
+
+    const rawDate = new Date(date).toISOString();
+    const offsetMinutes = new Date().getTimezoneOffset(); // in minutes
+    const offsetHours =
+        -offsetMinutes / 60 >= 0 ? offsetMinutes / 60 : -offsetMinutes / 60;
+
+    return format(
+        addHours(rawDate, offsetHours).toISOString(),
+        "MM/dd/yyyy HH:mm"
+    );
+};

lstV2/frontend/src/utils/formStuff/debugButton.tsx

@@ -0,0 +1,5 @@
+import { Button } from "@/components/ui/button";
+
+export const DebugButton = (data: any) => {
+    return <Button onClick={() => console.log(data.data)}>Debug</Button>;
+};

lstV2/frontend/src/utils/formStuff/index.tsx

@@ -0,0 +1,15 @@
+import { createFormHook, createFormHookContexts } from "@tanstack/react-form";
+import { InputField } from "./options/InputField";
+import { SubmitButton } from "./options/submitButton";
+import { SelectField } from "./options/selectorField";
+import { CheckboxField } from "./options/checkbox";
+
+export const { fieldContext, useFieldContext, formContext, useFormContext } =
+    createFormHookContexts();
+
+export const { useAppForm } = createFormHook({
+    fieldComponents: { InputField, SelectField, CheckboxField },
+    formComponents: { SubmitButton },
+    fieldContext,
+    formContext,
+});

lstV2/frontend/src/utils/formStuff/options/FieldErrors.tsx

@@ -0,0 +1,16 @@
+import { AnyFieldMeta } from "@tanstack/react-form";
+import { ZodError } from "zod";
+
+type FieldErrorsProps = {
+    meta: AnyFieldMeta;
+};
+
+export const FieldErrors = ({ meta }: FieldErrorsProps) => {
+    if (!meta.isTouched) return null;
+
+    return meta.errors.map(({ message }: ZodError, index) => (
+        <p key={index} className="text-sm font-medium text-destructive">
+            {message}
+        </p>
+    ));
+};

lstV2/frontend/src/utils/formStuff/options/InputField.tsx

@@ -0,0 +1,28 @@
+import { Label } from "@/components/ui/label";
+import { useFieldContext } from "..";
+import { Input } from "@/components/ui/input";
+import { FieldErrors } from "./FieldErrors";
+
+type InputFieldProps = {
+    label: string;
+    inputType: string;
+    required: boolean;
+};
+export const InputField = ({ label, inputType, required }: InputFieldProps) => {
+    const field = useFieldContext<any>();
+
+    return (
+        <div className="grid gap-3">
+            <Label htmlFor={field.name}>{label}</Label>
+            <Input
+                id={field.name}
+                value={field.state.value}
+                onChange={(e) => field.handleChange(e.target.value)}
+                onBlur={field.handleBlur}
+                type={inputType}
+                required={required}
+            />
+            <FieldErrors meta={field.state.meta} />
+        </div>
+    );
+};

lstV2/frontend/src/utils/formStuff/options/checkbox.tsx

@@ -0,0 +1,34 @@
+import { Checkbox } from "@radix-ui/react-checkbox";
+import { useFieldContext } from "..";
+import { Label } from "@/components/ui/label";
+import { FieldErrors } from "./FieldErrors";
+
+type CheckboxFieldProps = {
+    label: string;
+    description?: string;
+};
+
+export const CheckboxField = ({ label }: CheckboxFieldProps) => {
+    const field = useFieldContext<boolean>();
+
+    return (
+        <div>
+            <div className="m-2 p-2 flex flex-row">
+                <div>
+                    <Label htmlFor="active">
+                        <span>{label}</span>
+                    </Label>
+                </div>
+                <Checkbox
+                    id={field.name}
+                    checked={field.state.value}
+                    onCheckedChange={(checked) => {
+                        field.handleChange(checked === true);
+                    }}
+                    onBlur={field.handleBlur}
+                />
+            </div>
+            <FieldErrors meta={field.state.meta} />
+        </div>
+    );
+};

lstV2/frontend/src/utils/formStuff/options/selectorField.tsx

@@ -0,0 +1,57 @@
+import { Label } from "@/components/ui/label";
+import { useFieldContext } from "..";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+import { FieldErrors } from "./FieldErrors";
+
+type SelectOption = {
+    value: string;
+    label: string;
+};
+
+type SelectFieldProps = {
+    label: string;
+    options: SelectOption[];
+    placeholder?: string;
+};
+
+export const SelectField = ({
+    label,
+    options,
+    placeholder,
+}: SelectFieldProps) => {
+    const field = useFieldContext<string>();
+
+    return (
+        <div className="grid gap-3">
+            <div className="grid gap-3">
+                <Label htmlFor={field.name}>{label}</Label>
+                <Select
+                    value={field.state.value}
+                    onValueChange={(value) => field.handleChange(value)}
+                >
+                    <SelectTrigger
+                        id={field.name}
+                        onBlur={field.handleBlur}
+                        className="w-[380px]"
+                    >
+                        <SelectValue placeholder={placeholder} />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {options.map((option) => (
+                            <SelectItem key={option.value} value={option.value}>
+                                {option.label}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+            </div>
+            <FieldErrors meta={field.state.meta} />
+        </div>
+    );
+};

lstV2/frontend/src/utils/formStuff/options/submitButton.tsx

@@ -0,0 +1,24 @@
+import { useStore } from "@tanstack/react-form";
+import { useFormContext } from "..";
+import { Button } from "@/components/ui/button";
+
+type SubmitButtonProps = {
+    children: React.ReactNode;
+};
+
+export const SubmitButton = ({ children }: SubmitButtonProps) => {
+    const form = useFormContext();
+
+    const [isSubmitting] = useStore(form.store, (state) => [
+        state.isSubmitting,
+        state.canSubmit,
+    ]);
+
+    return (
+        <div className="">
+            <Button type="submit" disabled={isSubmitting}>
+                {children}
+            </Button>
+        </div>
+    );
+};

lstV2/frontend/src/utils/formStuff/options/userformOptions.tsx

@@ -0,0 +1,14 @@
+import { formOptions } from "@tanstack/react-form";
+
+export const userFormOptions = (user: any) => {
+    return formOptions({
+        defaultValues: {
+            username: user.username,
+            password: "",
+            email: user.email,
+            role: user.role,
+            //hobbies: [],
+        },
+        // } as Person,
+    });
+};

lstV2/frontend/src/utils/moduleActive.ts

@@ -0,0 +1,23 @@
+// type Feature = string;
+// interface Module {
+//     id: number;
+//     name: string;
+//     features: Feature[];
+//     active: boolean;
+// }
+
+import {useModuleStore} from "../lib/store/useModuleStore";
+
+// const modules: Module[] = [
+//     {id: 1, name: "production", active: true, features: ["view", "edit", "approve"]},
+//     {id: 2, name: "logistics", active: true, features: ["view", "assign", "track"]},
+//     {id: 3, name: "quality", active: false, features: ["view", "audit", "approve"]},
+//     {id: 4, name: "forklift", active: true, features: ["view", "request", "operate"]},
+//     {id: 5, name: "admin", active: true, features: ["view", "manage_users", "view_logs", "settings"]},
+// ];
+
+export function moduleActive(moduleName: string): boolean {
+    const {modules} = useModuleStore();
+    const module = modules?.find((m: any) => m.name === moduleName && m.active === true);
+    return module ? true : false;
+}

lstV2/frontend/src/utils/passwordGen.ts

@@ -0,0 +1,27 @@
+export const generatePassword = (length: number) => {
+    const uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    const lowercase = "abcdefghijklmnopqrstuvwxyz";
+    const numbers = "0123456789";
+    const symbols = "!@#$%&()_+-={}:,.<>?/"; // Safe symbol list
+
+    // Ensure the password contains at least one of each required type
+    let password: any = [
+        uppercase[Math.floor(Math.random() * uppercase.length)],
+        lowercase[Math.floor(Math.random() * lowercase.length)],
+        numbers[Math.floor(Math.random() * numbers.length)],
+        symbols[Math.floor(Math.random() * symbols.length)],
+    ];
+
+    // Fill the rest of the password with random characters from all sets
+    const allCharacters = uppercase + lowercase;
+    for (let i = password.length; i < length; i++) {
+        password.push(
+            allCharacters[Math.floor(Math.random() * allCharacters.length)]
+        );
+    }
+
+    // Shuffle the password to avoid predictable patterns
+    password = password.sort(() => Math.random() - 0.5).join("");
+
+    return password;
+};

lstV2/frontend/src/utils/querys/admin/modules.tsx

@@ -0,0 +1,25 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getModules(token: string) {
+    return queryOptions({
+        queryKey: ["modules"],
+        queryFn: () => fetchSettings(token),
+        enabled: !!token,
+        //staleTime: 1000,
+        refetchOnWindowFocus: true,
+    });
+}
+
+const fetchSettings = async (token: string) => {
+    const { data } = await axios.get("/api/server/modules", {
+        headers: { Authorization: `Bearer ${token}` },
+    });
+    // if we are not localhost ignore the devDir setting.
+    const url: string = window.location.host.split(":")[0];
+    let settingsData = data.data;
+    if (url != "localhost") {
+        settingsData.filter((n: any) => n.name === "devDir");
+    }
+    return settingsData;
+};

lstV2/frontend/src/utils/querys/admin/notifications.tsx

@@ -0,0 +1,26 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getnotifications() {
+    const token = localStorage.getItem("auth_token");
+    return queryOptions({
+        queryKey: ["getNotifications"],
+        queryFn: () => fetchUsers(token),
+        enabled: !!token, // Prevents query if token is null
+        staleTime: 1000,
+        refetchInterval: 2 * 2000,
+        refetchOnWindowFocus: true,
+    });
+}
+
+const fetchUsers = async (token: string | null) => {
+    const { data } = await axios.get(`/api/notify/notifications`, {
+        headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+        },
+    });
+    // if we are not localhost ignore the devDir setting.
+    //const url: string = window.location.host.split(":")[0];
+    return data.data ?? [];
+};

lstV2/frontend/src/utils/querys/admin/subModules.tsx

@@ -0,0 +1,25 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getSubModules(token: string) {
+    return queryOptions({
+        queryKey: ["submodules"],
+        queryFn: () => fetchSettings(token),
+        enabled: !!token,
+        //staleTime: 1000,
+        refetchOnWindowFocus: true,
+    });
+}
+
+const fetchSettings = async (token: string) => {
+    const { data } = await axios.get("/api/server/submodules", {
+        headers: { Authorization: `Bearer ${token}` },
+    });
+    // if we are not localhost ignore the devDir setting.
+    const url: string = window.location.host.split(":")[0];
+    let settingsData = data.data;
+    if (url != "localhost") {
+        settingsData.filter((n: any) => n.name === "devDir");
+    }
+    return settingsData;
+};

lstV2/frontend/src/utils/querys/admin/userRoles.tsx

@@ -0,0 +1,26 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getUserRoles() {
+    const token = localStorage.getItem("auth_token");
+    return queryOptions({
+        queryKey: ["getUsers"],
+        queryFn: () => fetchUsers(token),
+        enabled: !!token, // Prevents query if token is null
+        staleTime: 1000,
+        //refetchInterval: 2 * 2000,
+        refetchOnWindowFocus: true,
+    });
+}
+
+const fetchUsers = async (token: string | null) => {
+    const { data } = await axios.get(`/api/auth/allusersroles`, {
+        headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+        },
+    });
+    // if we are not localhost ignore the devDir setting.
+    //const url: string = window.location.host.split(":")[0];
+    return data.data ?? [];
+};

lstV2/frontend/src/utils/querys/admin/users.tsx

@@ -0,0 +1,26 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getUsers() {
+    const token = localStorage.getItem("auth_token");
+    return queryOptions({
+        queryKey: ["getUsers"],
+        queryFn: () => fetchUsers(token),
+        enabled: !!token, // Prevents query if token is null
+        staleTime: 1000,
+        refetchInterval: 2 * 2000,
+        refetchOnWindowFocus: true,
+    });
+}
+
+const fetchUsers = async (token: string | null) => {
+    const { data } = await axios.get(`/api/auth/allusers`, {
+        headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+        },
+    });
+    // if we are not localhost ignore the devDir setting.
+    //const url: string = window.location.host.split(":")[0];
+    return data.data ?? [];
+};

lstV2/frontend/src/utils/querys/logistics/getInventoryCheck.tsx

@@ -0,0 +1,25 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getinventoryCheck(data: any) {
+    return queryOptions({
+        queryKey: ["getInvCheck"],
+        queryFn: () => fetchStockSilo(data),
+        //enabled:
+        staleTime: 1000,
+        refetchInterval: 1000 * 60 * 15,
+        refetchOnWindowFocus: true,
+    });
+}
+
+const fetchStockSilo = async (info: any) => {
+    //console.log("What tpye of info:", info);
+    const { data } = await axios.post(`/api/logistics/cyclecountcheck`, {
+        age: info.age ? parseInt(info.age) : null,
+        type: "",
+    });
+
+    // if we are not localhost ignore the devDir setting.
+    //const url: string = window.location.host.split(":")[0];
+    return data.data ?? [];
+};

lstV2/frontend/src/utils/querys/logistics/getOpenOrders.tsx

@@ -0,0 +1,22 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getOpenOrders() {
+    return queryOptions({
+        queryKey: ["getOpenOrders"],
+        queryFn: () => fetchStockSilo(),
+        //enabled:
+        staleTime: 1000,
+        refetchInterval: 1000 * 60 * 15,
+        refetchOnWindowFocus: true,
+    });
+}
+
+const fetchStockSilo = async () => {
+    const { data } = await axios.get(
+        `/api/datamart/getopenorders?sDay=15&eDay=45`
+    );
+    // if we are not localhost ignore the devDir setting.
+    //const url: string = window.location.host.split(":")[0];
+    return data.data ?? [];
+};

lstV2/frontend/src/utils/querys/logistics/getPPOO.tsx

@@ -0,0 +1,20 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getPPOO() {
+    return queryOptions({
+        queryKey: ["getPPOO"],
+        queryFn: () => fetchStockSilo(),
+        //enabled:
+        staleTime: 1000,
+        refetchInterval: 60 * 1000,
+        refetchOnWindowFocus: true,
+    });
+}
+
+const fetchStockSilo = async () => {
+    const { data } = await axios.get(`/api/logistics/getppoo`);
+    // if we are not localhost ignore the devDir setting.
+    //const url: string = window.location.host.split(":")[0];
+    return data.data ?? [];
+};

lstV2/frontend/src/utils/querys/logistics/getWarehouseLanes.tsx

@@ -0,0 +1,20 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getLanes() {
+    return queryOptions({
+        queryKey: ["getLanes"],
+        queryFn: () => fetch(),
+        //enabled:
+        staleTime: 1000,
+        refetchInterval: 60 * 1000,
+        refetchOnWindowFocus: true,
+    });
+}
+
+const fetch = async () => {
+    const { data } = await axios.get(`/api/logistics/getactivelanes`);
+    // // if we are not localhost ignore the devDir setting.
+    // //const url: string = window.location.host.split(":")[0];
+    return data.data ?? [];
+};

lstV2/frontend/src/utils/querys/logistics/machineConnected.tsx

@@ -0,0 +1,23 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getMachineConnected(siloCon: any) {
+    return queryOptions({
+        queryKey: [`siloConnectionAttached-${siloCon.siloID}`],
+        queryFn: () => fetchStockSilo(siloCon),
+        //enabled:
+        //staleTime: 1000,
+        //refetchInterval: 60 * 1000,
+        refetchOnWindowFocus: true,
+    });
+}
+
+const fetchStockSilo = async (siloCon: any) => {
+    const { data } = await axios.post(`/api/logistics/siloconnection`, {
+        siloID: siloCon.siloID,
+        connectionType: siloCon.connectionType,
+    });
+    // if we are not localhost ignore the devDir setting.
+    //const url: string = window.location.host.split(":")[0];
+    return data.data ?? [];
+};

lstV2/frontend/src/utils/querys/logistics/notConnected.tsx

@@ -0,0 +1,23 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getMachineNotConnected(siloCon: any) {
+    return queryOptions({
+        queryKey: [`siloConnectionNotConnected-${siloCon.siloID}`],
+        queryFn: () => fetchStockSilo(siloCon),
+        //enabled:
+        //staleTime: 1000,
+        //refetchInterval: 60 * 1000,
+        refetchOnWindowFocus: true,
+    });
+}
+
+const fetchStockSilo = async (siloCon: any) => {
+    const { data } = await axios.post(`/api/logistics/siloconnection`, {
+        siloID: siloCon.siloID,
+        connectionType: siloCon.connectionType,
+    });
+    // if we are not localhost ignore the devDir setting.
+    //const url: string = window.location.host.split(":")[0];
+    return data.data ?? [];
+};

lstV2/frontend/src/utils/querys/logistics/siloAdjustments/getAdjustments.tsx

@@ -0,0 +1,26 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getAdjustments() {
+    const token = localStorage.getItem("auth_token");
+    return queryOptions({
+        queryKey: ["getAdjustments"],
+        queryFn: () => fetchStockSilo(token),
+        enabled: !!token, // Prevents query if token is null
+        staleTime: 1000,
+        refetchInterval: 2 * 2000,
+        refetchOnWindowFocus: true,
+    });
+}
+
+const fetchStockSilo = async (token: string | null) => {
+    const { data } = await axios.get(`/api/logistics/getsilosdjustment`, {
+        headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+        },
+    });
+    // if we are not localhost ignore the devDir setting.
+    //const url: string = window.location.host.split(":")[0];
+    return data.data ?? [];
+};

lstV2/frontend/src/utils/querys/logistics/siloAdjustments/getStockSilo.tsx

@@ -0,0 +1,26 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getStockSilo() {
+    const token = localStorage.getItem("auth_token");
+    return queryOptions({
+        queryKey: ["getSiloData"],
+        queryFn: () => fetchStockSilo(token),
+        enabled: !!token, // Prevents query if token is null
+        staleTime: 1000,
+        //refetchInterval: 2 * 2000,
+        refetchOnWindowFocus: true,
+    });
+}
+
+const fetchStockSilo = async (token: string | null) => {
+    const { data } = await axios.get(`/api/logistics/getstocksilo`, {
+        headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+        },
+    });
+    // if we are not localhost ignore the devDir setting.
+    //const url: string = window.location.host.split(":")[0];
+    return data.data ?? [];
+};

lstV2/frontend/src/utils/querys/prodUser/getProdPerms.tsx

@@ -0,0 +1,25 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getProdPerms(token: string) {
+    return queryOptions({
+        queryKey: ["prodPerms"],
+        queryFn: () => fetch(token),
+        enabled: !!token,
+        staleTime: 1000,
+        refetchOnWindowFocus: true,
+    });
+}
+
+const fetch = async (token: string) => {
+    const { data } = await axios.get("/api/produser/prodrole", {
+        headers: { Authorization: `Bearer ${token}` },
+    });
+    // if we are not localhost ignore the devDir setting.
+    // const url: string = window.location.host.split(":")[0];
+    // let settingsData = data.data;
+    // if (url != "localhost") {
+    //     settingsData.filter((n: any) => n.name === "devDir");
+    // }
+    return data.data;
+};

lstV2/frontend/src/utils/querys/production/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(`/ocme/api/v1/getInfo`);
+    // if we are not localhost ignore the devDir setting.
+    //const url: string = window.location.host.split(":")[0];
+    return data.data ?? [];
+};

lstV2/frontend/src/utils/querys/production/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(`/api/ocp/labelratio`);
+    // if we are not localhost ignore the devDir setting.
+    //const url: string = window.location.host.split(":")[0];
+    return data.data ?? [];
+};

lstV2/frontend/src/utils/querys/production/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(`/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 ?? [];
+};

lstV2/frontend/src/utils/querys/production/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("/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 ?? [];
+};

lstV2/frontend/src/utils/querys/production/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(
+        `/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 ?? [];
+};

lstV2/frontend/src/utils/querys/production/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(`/api/ocp/getprinters`);
+    // if we are not localhost ignore the devDir setting.
+    //const url: string = window.location.host.split(":")[0];
+    return data.data ?? [];
+};

lstV2/frontend/src/utils/querys/rfid/getReaders.tsx

@@ -0,0 +1,20 @@
+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,
+    });
+}
+
+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 ?? [];
+};

lstV2/frontend/src/utils/querys/servers.tsx

@@ -0,0 +1,19 @@
+import {queryOptions} from "@tanstack/react-query";
+import axios from "axios";
+
+export function getServers(token: string) {
+    return queryOptions({
+        queryKey: ["servers"],
+        queryFn: () => fetchSettings(token),
+        enabled: !!token,
+        staleTime: 1000,
+        refetchInterval: 2500,
+        refetchOnWindowFocus: true,
+    });
+}
+
+const fetchSettings = async (token: string) => {
+    const {data} = await axios.get("/api/server/servers", {headers: {Authorization: `Bearer ${token}`}});
+
+    return data.data;
+};

lstV2/frontend/src/utils/querys/settings.tsx

@@ -0,0 +1,25 @@
+import { queryOptions } from "@tanstack/react-query";
+import axios from "axios";
+
+export function getSettings(token: string) {
+    return queryOptions({
+        queryKey: ["settings"],
+        queryFn: () => fetch(token),
+        enabled: !!token,
+        staleTime: 1000,
+        refetchOnWindowFocus: true,
+    });
+}
+
+const fetch = async (token: string) => {
+    const { data } = await axios.get("/api/server/settings", {
+        headers: { Authorization: `Bearer ${token}` },
+    });
+    // if we are not localhost ignore the devDir setting.
+    // const url: string = window.location.host.split(":")[0];
+    // let settingsData = data.data;
+    // if (url != "localhost") {
+    //     settingsData.filter((n: any) => n.name === "devDir");
+    // }
+    return data.data;
+};

lstV2/frontend/src/utils/tableData/InventoryCards/inventoryColumns.tsx

@@ -0,0 +1,27 @@
+import { ColumnDef } from "@tanstack/react-table";
+
+// This type is used to define the shape of our data.
+// You can use a Zod schema here if you want.
+export type Adjustmnets = {
+    siloAdjust_id: string;
+    currentStockLevel: string;
+    newLevel: number;
+    dateAdjusted: string;
+    lastDateAdjusted: string;
+    comment: string;
+    commentAddedBy: string;
+    commentDate: string;
+    add_user: string;
+};
+
+export const invColumns: ColumnDef<Adjustmnets>[] = [
+    {
+        accessorKey: "Description",
+        header: () => <div className="text-left">Lane</div>,
+    },
+    {
+        accessorKey: "DaysSinceLast",
+        header: "Age",
+        //enableSorting: true,
+    },
+];

lstV2/frontend/src/utils/tableData/InventoryCards/inventoryData.tsx

@@ -0,0 +1,168 @@
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+    getPaginationRowModel,
+    getSortedRowModel,
+} from "@tanstack/react-table";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table";
+//import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { LstCard } from "@/components/extendedUI/LstCard";
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    info: any;
+}
+
+type ColumnSort = {
+    id: string;
+    desc: boolean;
+};
+type SortingState = ColumnSort[];
+
+export function InvTable<TData, TValue>({
+    columns,
+    data,
+    info,
+}: DataTableProps<TData, TValue>) {
+    const [sorting, setSorting] = useState<SortingState>([]);
+    const [pagination, setPagination] = useState({
+        pageIndex: 0, //initial page index
+        pageSize: 500, //default page size
+    });
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        onPaginationChange: setPagination,
+        getSortedRowModel: getSortedRowModel(),
+        state: {
+            //...
+            pagination,
+            sorting,
+        },
+        manualSorting: true,
+        onSortingChange: setSorting,
+        initialState: {
+            sorting: [
+                {
+                    id: "DaysSinceLast",
+                    desc: true,
+                },
+            ],
+        },
+    });
+    //console.log(table.getState().sorting);
+    //console.log(parseInt(style.height.replace("px", "")) - 50);
+    console.log(info);
+    return (
+        <LstCard
+            className="p-3"
+            // style={{
+            //     width: `${parseInt(style.width.replace("px", "")) - 50}px`,
+            //     height: `${parseInt(style.height.replace("px", "")) - 150}px`,
+            //     cursor: "move",
+            // }}
+            //style={{ overflow: "auto" }}
+        >
+            <div>
+                <div className="flex flex-row justify-between">
+                    <p className="text-center text-pretty">
+                        {info.rowType} {data.length > 0 ? "lanes" : "lane"}{" "}
+                        older than: {info.age}, {data.length} needing to be
+                        completed
+                    </p>
+                </div>
+                <ScrollArea className="h-72 rounded-md border m-2">
+                    <Table
+                    // style={{
+                    //     width: `${parseInt(style.width.replace("px", "")) - 50}px`,
+                    //     height: `${parseInt(style.height.replace("px", "")) - 200}px`,
+                    //     cursor: "move",
+                    // }}
+                    >
+                        <TableHeader>
+                            {table.getHeaderGroups().map((headerGroup) => (
+                                <TableRow key={headerGroup.id}>
+                                    {headerGroup.headers.map((header) => {
+                                        return (
+                                            <TableHead key={header.id}>
+                                                {header.isPlaceholder
+                                                    ? null
+                                                    : flexRender(
+                                                          header.column
+                                                              .columnDef.header,
+                                                          header.getContext()
+                                                      )}
+                                            </TableHead>
+                                        );
+                                    })}
+                                </TableRow>
+                            ))}
+                        </TableHeader>
+                        <TableBody>
+                            {table.getRowModel().rows?.length ? (
+                                table.getRowModel().rows.map((row) => (
+                                    <TableRow
+                                        key={row.id}
+                                        data-state={
+                                            row.getIsSelected() && "selected"
+                                        }
+                                    >
+                                        {row.getVisibleCells().map((cell) => (
+                                            <TableCell key={cell.id}>
+                                                {flexRender(
+                                                    cell.column.columnDef.cell,
+                                                    cell.getContext()
+                                                )}
+                                            </TableCell>
+                                        ))}
+                                    </TableRow>
+                                ))
+                            ) : (
+                                <TableRow>
+                                    <TableCell
+                                        colSpan={columns.length}
+                                        className="h-24 text-center"
+                                    >
+                                        No results.
+                                    </TableCell>
+                                </TableRow>
+                            )}
+                        </TableBody>
+                    </Table>
+                </ScrollArea>
+            </div>
+            {/* <div className="flex items-center justify-end space-x-2">
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => table.previousPage()}
+                    disabled={!table.getCanPreviousPage()}
+                >
+                    Previous
+                </Button>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => table.nextPage()}
+                    disabled={!table.getCanNextPage()}
+                >
+                    Next
+                </Button>
+            </div> */}
+        </LstCard>
+    );
+}

lstV2/frontend/src/utils/tableData/notifications/notifyColumns.tsx

@@ -0,0 +1,68 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { format } from "date-fns";
+
+// This type is used to define the shape of our data.
+// You can use a Zod schema here if you want.
+export type Adjustmnets = {
+    siloAdjust_id: string;
+    currentStockLevel: string;
+    newLevel: number;
+    dateAdjusted: string;
+    lastDateAdjusted: string;
+    comment: string;
+    commentAddedBy: string;
+    commentDate: string;
+    add_user: string;
+};
+
+export const notifyColumns: ColumnDef<Adjustmnets>[] = [
+    {
+        accessorKey: "name",
+        header: () => <div className="text-left">Name</div>,
+    },
+    {
+        accessorKey: "description",
+        header: "Description",
+        cell: ({ row }) => {
+            return (
+                <div className="text-left font-medium">
+                    <p className="max-w-48 text-pretty">
+                        {row.getValue("description")}
+                    </p>
+                </div>
+            );
+        },
+    },
+
+    {
+        accessorKey: "checkInterval",
+        header: "Check Interval",
+    },
+    {
+        accessorKey: "timeType",
+        header: "Time tpye",
+    },
+    {
+        accessorKey: "emails",
+        header: "Emails",
+    },
+    {
+        accessorKey: "active",
+        header: "Active",
+    },
+    {
+        accessorKey: "lastRan",
+        header: "Last Ran",
+        cell: ({ row }) => {
+            if (row.getValue("lastRan")) {
+                const correctDate = format(
+                    row.getValue("lastRan"),
+                    "M/d/yyyy hh:mm"
+                );
+                return (
+                    <div className="text-left font-medium">{correctDate}</div>
+                );
+            }
+        },
+    },
+];

lstV2/frontend/src/utils/tableData/notifications/notifyData.tsx

@@ -0,0 +1,134 @@
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+    getPaginationRowModel,
+} from "@tanstack/react-table";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    //style: any;
+}
+
+export function NotifyTable<TData, TValue>({
+    columns,
+    data,
+    //style,
+}: DataTableProps<TData, TValue>) {
+    const [pagination, setPagination] = useState({
+        pageIndex: 0, //initial page index
+        pageSize: 5, //default page size
+    });
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        onPaginationChange: setPagination,
+        state: {
+            //...
+            pagination,
+        },
+    });
+
+    // console.log(parseInt(style.height.replace("px", "")) - 50);
+    return (
+        <div
+        // style={{
+        //     width: `${parseInt(style.width.replace("px", "")) - 50}px`,
+        //     height: `${parseInt(style.height.replace("px", "")) - 150}px`,
+        //     cursor: "move",
+        // }}
+        >
+            <div>
+                <Table
+                // style={{
+                //     width: `${parseInt(style.width.replace("px", "")) - 50}px`,
+                //     height: `${parseInt(style.height.replace("px", "")) - 200}px`,
+                //     cursor: "move",
+                // }}
+                >
+                    <TableHeader>
+                        {table.getHeaderGroups().map((headerGroup) => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map((header) => {
+                                    return (
+                                        <TableHead key={header.id}>
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                      header.column.columnDef
+                                                          .header,
+                                                      header.getContext()
+                                                  )}
+                                        </TableHead>
+                                    );
+                                })}
+                            </TableRow>
+                        ))}
+                    </TableHeader>
+                    <TableBody>
+                        {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map((row) => (
+                                <TableRow
+                                    key={row.id}
+                                    data-state={
+                                        row.getIsSelected() && "selected"
+                                    }
+                                >
+                                    {row.getVisibleCells().map((cell) => (
+                                        <TableCell key={cell.id}>
+                                            {flexRender(
+                                                cell.column.columnDef.cell,
+                                                cell.getContext()
+                                            )}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell
+                                    colSpan={columns.length}
+                                    className="h-24 text-center"
+                                >
+                                    No results.
+                                </TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            </div>
+            <div className="flex items-center justify-end space-x-2 py-4">
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => table.previousPage()}
+                    disabled={!table.getCanPreviousPage()}
+                >
+                    Previous
+                </Button>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => table.nextPage()}
+                    disabled={!table.getCanNextPage()}
+                >
+                    Next
+                </Button>
+            </div>
+        </div>
+    );
+}

lstV2/frontend/src/utils/tableData/openorders/ooColumns.tsx

@@ -0,0 +1,63 @@
+import { ColumnDef } from "@tanstack/react-table";
+//import { format } from "date-fns-tz";
+
+// This type is used to define the shape of our data.
+// You can use a Zod schema here if you want.
+export type Adjustmnets = {
+    siloAdjust_id: string;
+    currentStockLevel: string;
+    newLevel: number;
+    dateAdjusted: string;
+    lastDateAdjusted: string;
+    comment: string;
+    commentAddedBy: string;
+    commentDate: string;
+    add_user: string;
+};
+
+export const openOrderColumns: ColumnDef<Adjustmnets>[] = [
+    {
+        accessorKey: "Remark",
+        header: () => <div className="text-left">Carrier/Remark</div>,
+        cell: ({ row }) => {
+            const remark: any = row.getValue("Remark");
+            if (!remark) {
+                return <p className="text-gray-700/35">No remark</p>;
+            }
+            return <p>{remark}</p>;
+        },
+    },
+    {
+        accessorKey: "DeliveryAddressDescription",
+        header: "Delivery Address",
+    },
+    {
+        accessorKey: "header",
+        header: "PO",
+    },
+    {
+        accessorKey: "releaseNumber",
+        header: "Release #",
+    },
+    {
+        accessorKey: "deliveryDate",
+        header: "DeliveryDate",
+        cell: ({ row }) => {
+            if (row.getValue("deliveryDate")) {
+                // const correctDate = format(
+                //     row.getValue("deliveryDate"),
+                //     "M/d/yyyy hh:mm"
+                // );
+                return (
+                    <div className="text-left font-medium">
+                        {row.getValue("deliveryDate")}
+                    </div>
+                );
+            }
+        },
+    },
+    {
+        accessorKey: "customerItemNumber",
+        header: "Material #",
+    },
+];

lstV2/frontend/src/utils/tableData/openorders/ooData.tsx

@@ -0,0 +1,251 @@
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+    getPaginationRowModel,
+} from "@tanstack/react-table";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { LstCard } from "@/components/extendedUI/LstCard";
+import { useLocation } from "@tanstack/react-router";
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    //style: any;
+}
+
+export function OpenOrderTable<TData, TValue>({
+    columns,
+    data,
+    //style,
+}: DataTableProps<TData, TValue>) {
+    const [pagination, setPagination] = useState({
+        pageIndex: 0, //initial page index
+        pageSize: 5, //default page size
+    });
+    const location = useLocation();
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        onPaginationChange: setPagination,
+        state: {
+            //...
+            pagination,
+        },
+    });
+
+    //console.log(parseInt(style.height.replace("px", "")) - 50);
+    return (
+        <LstCard
+            className="p-3"
+            // style={{
+            //     width: `${parseInt(style.width.replace("px", "")) - 50}px`,
+            //     height: `${parseInt(style.height.replace("px", "")) - 150}px`,
+            //     cursor: "move",
+            // }}
+            //style={{ overflow: "auto" }}
+        >
+            <div>
+                <div className="flex flex-row justify-between">
+                    <p className="text-center">Open orders </p>
+                    <Select
+                        value={pagination.pageSize.toString()}
+                        onValueChange={(e) =>
+                            setPagination({
+                                ...pagination,
+                                pageSize: parseInt(e),
+                            })
+                        }
+                    >
+                        <SelectTrigger className="w-[180px]">
+                            <SelectValue
+                                //id={field.name}
+                                placeholder="Select Page"
+                            />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectGroup>
+                                <SelectLabel>Page Size</SelectLabel>
+                                <SelectItem value="5">5</SelectItem>
+                                <SelectItem value="10">10</SelectItem>
+                                <SelectItem value="50">50</SelectItem>
+                                <SelectItem value="100">100</SelectItem>
+                            </SelectGroup>
+                        </SelectContent>
+                    </Select>
+                </div>
+                {location.pathname === "/" ? (
+                    <ScrollArea className="h-72 rounded-md border m-2">
+                        <Table
+                        // style={{
+                        //     width: `${parseInt(style.width.replace("px", "")) - 50}px`,
+                        //     height: `${parseInt(style.height.replace("px", "")) - 200}px`,
+                        //     cursor: "move",
+                        // }}
+                        >
+                            <TableHeader>
+                                {table.getHeaderGroups().map((headerGroup) => (
+                                    <TableRow key={headerGroup.id}>
+                                        {headerGroup.headers.map((header) => {
+                                            return (
+                                                <TableHead key={header.id}>
+                                                    {header.isPlaceholder
+                                                        ? null
+                                                        : flexRender(
+                                                              header.column
+                                                                  .columnDef
+                                                                  .header,
+                                                              header.getContext()
+                                                          )}
+                                                </TableHead>
+                                            );
+                                        })}
+                                    </TableRow>
+                                ))}
+                            </TableHeader>
+                            <TableBody>
+                                {table.getRowModel().rows?.length ? (
+                                    table.getRowModel().rows.map((row) => (
+                                        <TableRow
+                                            key={row.id}
+                                            data-state={
+                                                row.getIsSelected() &&
+                                                "selected"
+                                            }
+                                        >
+                                            {row
+                                                .getVisibleCells()
+                                                .map((cell) => (
+                                                    <TableCell key={cell.id}>
+                                                        {flexRender(
+                                                            cell.column
+                                                                .columnDef.cell,
+                                                            cell.getContext()
+                                                        )}
+                                                    </TableCell>
+                                                ))}
+                                        </TableRow>
+                                    ))
+                                ) : (
+                                    <TableRow>
+                                        <TableCell
+                                            colSpan={columns.length}
+                                            className="h-24 text-center"
+                                        >
+                                            No results.
+                                        </TableCell>
+                                    </TableRow>
+                                )}
+                            </TableBody>
+                        </Table>
+                    </ScrollArea>
+                ) : (
+                    <ScrollArea className={`h-[725px] rounded-md border m-2`}>
+                        <Table
+                        // style={{
+                        //     width: `${parseInt(style.width.replace("px", "")) - 50}px`,
+                        //     height: `${parseInt(style.height.replace("px", "")) - 200}px`,
+                        //     cursor: "move",
+                        // }}
+                        >
+                            <TableHeader>
+                                {table.getHeaderGroups().map((headerGroup) => (
+                                    <TableRow key={headerGroup.id}>
+                                        {headerGroup.headers.map((header) => {
+                                            return (
+                                                <TableHead key={header.id}>
+                                                    {header.isPlaceholder
+                                                        ? null
+                                                        : flexRender(
+                                                              header.column
+                                                                  .columnDef
+                                                                  .header,
+                                                              header.getContext()
+                                                          )}
+                                                </TableHead>
+                                            );
+                                        })}
+                                    </TableRow>
+                                ))}
+                            </TableHeader>
+                            <TableBody>
+                                {table.getRowModel().rows?.length ? (
+                                    table.getRowModel().rows.map((row) => (
+                                        <TableRow
+                                            key={row.id}
+                                            data-state={
+                                                row.getIsSelected() &&
+                                                "selected"
+                                            }
+                                        >
+                                            {row
+                                                .getVisibleCells()
+                                                .map((cell) => (
+                                                    <TableCell key={cell.id}>
+                                                        {flexRender(
+                                                            cell.column
+                                                                .columnDef.cell,
+                                                            cell.getContext()
+                                                        )}
+                                                    </TableCell>
+                                                ))}
+                                        </TableRow>
+                                    ))
+                                ) : (
+                                    <TableRow>
+                                        <TableCell
+                                            colSpan={columns.length}
+                                            className="h-24 text-center"
+                                        >
+                                            No results.
+                                        </TableCell>
+                                    </TableRow>
+                                )}
+                            </TableBody>
+                        </Table>
+                    </ScrollArea>
+                )}
+            </div>
+            <div className="flex items-center justify-end space-x-2">
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => table.previousPage()}
+                    disabled={!table.getCanPreviousPage()}
+                >
+                    Previous
+                </Button>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => table.nextPage()}
+                    disabled={!table.getCanNextPage()}
+                >
+                    Next
+                </Button>
+            </div>
+        </LstCard>
+    );
+}

lstV2/frontend/src/utils/tableData/ppoo/ppooColumns.tsx

@@ -0,0 +1,46 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { format } from "date-fns-tz";
+
+// This type is used to define the shape of our data.
+// You can use a Zod schema here if you want.
+export type Adjustmnets = {
+    siloAdjust_id: string;
+    currentStockLevel: string;
+    newLevel: number;
+    dateAdjusted: string;
+    lastDateAdjusted: string;
+    comment: string;
+    commentAddedBy: string;
+    commentDate: string;
+    add_user: string;
+};
+
+export const columns: ColumnDef<Adjustmnets>[] = [
+    {
+        accessorKey: "MachineLocation",
+        header: () => <div className="text-left">Line</div>,
+    },
+    {
+        accessorKey: "ArticleHumanReadableId",
+        header: "AV",
+    },
+    {
+        accessorKey: "RunningNumber",
+        header: "Label",
+    },
+    {
+        accessorKey: "ProductionDate",
+        header: "Booked in",
+        cell: ({ row }) => {
+            if (row.getValue("ProductionDate")) {
+                const correctDate = format(
+                    row.getValue("ProductionDate"),
+                    "M/d/yyyy HH:mm"
+                );
+                return (
+                    <div className="text-left font-medium">{correctDate}</div>
+                );
+            }
+        },
+    },
+];

lstV2/frontend/src/utils/tableData/ppoo/ppooData.tsx

@@ -0,0 +1,177 @@
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+    getPaginationRowModel,
+} from "@tanstack/react-table";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { LstCard } from "@/components/extendedUI/LstCard";
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    //style: any;
+}
+
+export function PPOOTable<TData, TValue>({
+    columns,
+    data,
+    //style,
+}: DataTableProps<TData, TValue>) {
+    const [pagination, setPagination] = useState({
+        pageIndex: 0, //initial page index
+        pageSize: 5, //default page size
+    });
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        onPaginationChange: setPagination,
+        state: {
+            //...
+            pagination,
+        },
+    });
+
+    //console.log(parseInt(style.height.replace("px", "")) - 50);
+    return (
+        <LstCard
+            className="p-3"
+            // style={{
+            //     width: `${parseInt(style.width.replace("px", "")) - 50}px`,
+            //     height: `${parseInt(style.height.replace("px", "")) - 150}px`,
+            //     cursor: "move",
+            // }}
+            //style={{ overflow: "auto" }}
+        >
+            <div>
+                <div className="flex flex-row justify-between">
+                    <p className="text-center">PPOO Data </p>
+                    <Select
+                        value={pagination.pageSize.toString()}
+                        onValueChange={(e) =>
+                            setPagination({
+                                ...pagination,
+                                pageSize: parseInt(e),
+                            })
+                        }
+                    >
+                        <SelectTrigger className="w-[180px]">
+                            <SelectValue
+                                //id={field.name}
+                                placeholder="Select Page"
+                            />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectGroup>
+                                <SelectLabel>Page Size</SelectLabel>
+                                <SelectItem value="5">5</SelectItem>
+                                <SelectItem value="10">10</SelectItem>
+                                <SelectItem value="50">50</SelectItem>
+                                <SelectItem value="100">100</SelectItem>
+                            </SelectGroup>
+                        </SelectContent>
+                    </Select>
+                </div>
+                <ScrollArea className="h-72 rounded-md border m-2">
+                    <Table
+                    // style={{
+                    //     width: `${parseInt(style.width.replace("px", "")) - 50}px`,
+                    //     height: `${parseInt(style.height.replace("px", "")) - 200}px`,
+                    //     cursor: "move",
+                    // }}
+                    >
+                        <TableHeader>
+                            {table.getHeaderGroups().map((headerGroup) => (
+                                <TableRow key={headerGroup.id}>
+                                    {headerGroup.headers.map((header) => {
+                                        return (
+                                            <TableHead key={header.id}>
+                                                {header.isPlaceholder
+                                                    ? null
+                                                    : flexRender(
+                                                          header.column
+                                                              .columnDef.header,
+                                                          header.getContext()
+                                                      )}
+                                            </TableHead>
+                                        );
+                                    })}
+                                </TableRow>
+                            ))}
+                        </TableHeader>
+                        <TableBody>
+                            {table.getRowModel().rows?.length ? (
+                                table.getRowModel().rows.map((row) => (
+                                    <TableRow
+                                        key={row.id}
+                                        data-state={
+                                            row.getIsSelected() && "selected"
+                                        }
+                                    >
+                                        {row.getVisibleCells().map((cell) => (
+                                            <TableCell key={cell.id}>
+                                                {flexRender(
+                                                    cell.column.columnDef.cell,
+                                                    cell.getContext()
+                                                )}
+                                            </TableCell>
+                                        ))}
+                                    </TableRow>
+                                ))
+                            ) : (
+                                <TableRow>
+                                    <TableCell
+                                        colSpan={columns.length}
+                                        className="h-24 text-center"
+                                    >
+                                        No results.
+                                    </TableCell>
+                                </TableRow>
+                            )}
+                        </TableBody>
+                    </Table>
+                </ScrollArea>
+            </div>
+            <div className="flex items-center justify-end space-x-2">
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => table.previousPage()}
+                    disabled={!table.getCanPreviousPage()}
+                >
+                    Previous
+                </Button>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => table.nextPage()}
+                    disabled={!table.getCanNextPage()}
+                >
+                    Next
+                </Button>
+            </div>
+        </LstCard>
+    );
+}

lstV2/frontend/src/utils/tableData/printers/printerColumns.tsx

@@ -0,0 +1,68 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { format } from "date-fns";
+
+// This type is used to define the shape of our data.
+// You can use a Zod schema here if you want.
+export type Adjustmnets = {
+    siloAdjust_id: string;
+    currentStockLevel: string;
+    newLevel: number;
+    dateAdjusted: string;
+    lastDateAdjusted: string;
+    comment: string;
+    commentAddedBy: string;
+    commentDate: string;
+    add_user: string;
+};
+
+export const notifyColumns: ColumnDef<Adjustmnets>[] = [
+    {
+        accessorKey: "name",
+        header: () => <div className="text-left">Name</div>,
+    },
+    {
+        accessorKey: "description",
+        header: "Description",
+        cell: ({ row }) => {
+            return (
+                <div className="text-left font-medium">
+                    <p className="max-w-48 text-pretty">
+                        {row.getValue("description")}
+                    </p>
+                </div>
+            );
+        },
+    },
+
+    {
+        accessorKey: "checkInterval",
+        header: "Check Interval",
+    },
+    {
+        accessorKey: "timeType",
+        header: "Time tpye",
+    },
+    {
+        accessorKey: "emails",
+        header: "Emails",
+    },
+    {
+        accessorKey: "active",
+        header: "Active",
+    },
+    {
+        accessorKey: "lastRan",
+        header: "Last Ran",
+        cell: ({ row }) => {
+            if (row.getValue("lastRan")) {
+                const correctDate = format(
+                    row.getValue("lastRan"),
+                    "M/d/yyyy hh:mm"
+                );
+                return (
+                    <div className="text-left font-medium">{correctDate}</div>
+                );
+            }
+        },
+    },
+];

lstV2/frontend/src/utils/tableData/printers/printerData.tsx

@@ -0,0 +1,134 @@
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+    getPaginationRowModel,
+} from "@tanstack/react-table";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    //style: any;
+}
+
+export function NotifyTable<TData, TValue>({
+    columns,
+    data,
+    //style,
+}: DataTableProps<TData, TValue>) {
+    const [pagination, setPagination] = useState({
+        pageIndex: 0, //initial page index
+        pageSize: 5, //default page size
+    });
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        onPaginationChange: setPagination,
+        state: {
+            //...
+            pagination,
+        },
+    });
+
+    // console.log(parseInt(style.height.replace("px", "")) - 50);
+    return (
+        <div
+        // style={{
+        //     width: `${parseInt(style.width.replace("px", "")) - 50}px`,
+        //     height: `${parseInt(style.height.replace("px", "")) - 150}px`,
+        //     cursor: "move",
+        // }}
+        >
+            <div>
+                <Table
+                // style={{
+                //     width: `${parseInt(style.width.replace("px", "")) - 50}px`,
+                //     height: `${parseInt(style.height.replace("px", "")) - 200}px`,
+                //     cursor: "move",
+                // }}
+                >
+                    <TableHeader>
+                        {table.getHeaderGroups().map((headerGroup) => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map((header) => {
+                                    return (
+                                        <TableHead key={header.id}>
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                      header.column.columnDef
+                                                          .header,
+                                                      header.getContext()
+                                                  )}
+                                        </TableHead>
+                                    );
+                                })}
+                            </TableRow>
+                        ))}
+                    </TableHeader>
+                    <TableBody>
+                        {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map((row) => (
+                                <TableRow
+                                    key={row.id}
+                                    data-state={
+                                        row.getIsSelected() && "selected"
+                                    }
+                                >
+                                    {row.getVisibleCells().map((cell) => (
+                                        <TableCell key={cell.id}>
+                                            {flexRender(
+                                                cell.column.columnDef.cell,
+                                                cell.getContext()
+                                            )}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell
+                                    colSpan={columns.length}
+                                    className="h-24 text-center"
+                                >
+                                    No results.
+                                </TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            </div>
+            <div className="flex items-center justify-end space-x-2 py-4">
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => table.previousPage()}
+                    disabled={!table.getCanPreviousPage()}
+                >
+                    Previous
+                </Button>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => table.nextPage()}
+                    disabled={!table.getCanNextPage()}
+                >
+                    Next
+                </Button>
+            </div>
+        </div>
+    );
+}

lstV2/frontend/src/utils/tableData/production/labelRatio/labelRatioColumns.tsx

@@ -0,0 +1,87 @@
+//import { fixTime } from "@/utils/fixTime";
+import { Button } from "@/components/ui/button";
+import { getReaders } from "@/utils/querys/rfid/getReaders";
+import { useQuery } from "@tanstack/react-query";
+import { ColumnDef } from "@tanstack/react-table";
+import axios from "axios";
+import { useState } from "react";
+import { toast } from "sonner";
+
+// This type is used to define the shape of our data.
+// You can use a Zod schema here if you want.
+export type Adjustmnets = {
+    ratio_id: string;
+    name: string;
+    autoLabel: number;
+    manualLabel: string;
+};
+
+export const labelRatioColumns: ColumnDef<Adjustmnets>[] = [
+    // {
+    //     accessorKey: "line",
+    //     header: () => <div className="text-left">Line</div>,
+    // },
+    {
+        accessorKey: "autoLabel",
+        header: "Auto Labels",
+    },
+    {
+        accessorKey: "manualLabel",
+        header: "Manual Labels",
+    },
+    {
+        accessorKey: "goodRatio",
+        header: "Ratio",
+        cell: ({ row }) => {
+            const goodRatio =
+                (parseInt(row.getValue("autoLabel")) /
+                    (parseInt(row.getValue("autoLabel")) +
+                        parseInt(row.getValue("manualLabel")))) *
+                100;
+            return (
+                <div className="text-center font-medium">
+                    {isNaN(goodRatio) ? 0 : goodRatio.toFixed(2)}%
+                </div>
+            );
+        },
+    },
+    {
+        accessorKey: "reset",
+        header: "Reset Reads",
+        cell: () => {
+            const { refetch } = useQuery(getReaders());
+            const [readerReset, setReaderReset] = useState(false);
+            const resetReads = async () => {
+                setReaderReset(true);
+                try {
+                    const res = await axios.post("/api/ocp/resetlabelratio", {
+                        reader: name,
+                    });
+
+                    if (res.status === 200) {
+                        toast.success(res.data.message);
+                        setReaderReset(false);
+                    } else {
+                        toast.error(res.data.message);
+                        setReaderReset(false);
+                    }
+                } catch (error: any) {
+                    toast.error(error.data.message);
+                    setReaderReset(false);
+                }
+                refetch();
+            };
+            return (
+                <div className="text-left font-medium">
+                    <Button
+                        className="h-4"
+                        onClick={resetReads}
+                        disabled={readerReset}
+                    >
+                        Reset
+                    </Button>
+                </div>
+            );
+        },
+    },
+];

lstV2/frontend/src/utils/tableData/production/labelRatio/labelRatioData.tsx

@@ -0,0 +1,124 @@
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+    getPaginationRowModel,
+} from "@tanstack/react-table";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table";
+
+import { useState } from "react";
+
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { LstCard } from "@/components/extendedUI/LstCard";
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    //style: any;
+}
+
+export function LabelRatioTable<TData, TValue>({
+    columns,
+    data,
+    //style,
+}: DataTableProps<TData, TValue>) {
+    const [pagination, setPagination] = useState({
+        pageIndex: 0, //initial page index
+        pageSize: 5, //default page size
+    });
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        onPaginationChange: setPagination,
+        state: {
+            //...
+            pagination,
+        },
+    });
+
+    //console.log(parseInt(style.height.replace("px", "")) - 50);
+    return (
+        <LstCard>
+            <div>
+                <div className="flex flex-row justify-between">
+                    {data.length === 0 ? (
+                        <span className="text-center">
+                            No labels printed since last reset.
+                        </span>
+                    ) : (
+                        <span>Label Ratio</span>
+                    )}
+                </div>
+                <ScrollArea className="max-h-32 rounded-md border m-2">
+                    <Table
+                    // style={{
+                    //     width: `${parseInt(style.width.replace("px", "")) - 50}px`,
+                    //     height: `${parseInt(style.height.replace("px", "")) - 200}px`,
+                    //     cursor: "move",
+                    // }}
+                    >
+                        <TableHeader>
+                            {table.getHeaderGroups().map((headerGroup) => (
+                                <TableRow key={headerGroup.id}>
+                                    {headerGroup.headers.map((header) => {
+                                        return (
+                                            <TableHead key={header.id}>
+                                                {header.isPlaceholder
+                                                    ? null
+                                                    : flexRender(
+                                                          header.column
+                                                              .columnDef.header,
+                                                          header.getContext()
+                                                      )}
+                                            </TableHead>
+                                        );
+                                    })}
+                                </TableRow>
+                            ))}
+                        </TableHeader>
+                        <TableBody>
+                            {table.getRowModel().rows?.length ? (
+                                table.getRowModel().rows.map((row) => (
+                                    <TableRow
+                                        key={row.id}
+                                        data-state={
+                                            row.getIsSelected() && "selected"
+                                        }
+                                    >
+                                        {row.getVisibleCells().map((cell) => (
+                                            <TableCell key={cell.id}>
+                                                {flexRender(
+                                                    cell.column.columnDef.cell,
+                                                    cell.getContext()
+                                                )}
+                                            </TableCell>
+                                        ))}
+                                    </TableRow>
+                                ))
+                            ) : (
+                                <TableRow>
+                                    <TableCell
+                                        colSpan={columns.length}
+                                        className="h-24 text-center"
+                                    >
+                                        No labels.
+                                    </TableCell>
+                                </TableRow>
+                            )}
+                        </TableBody>
+                    </Table>
+                </ScrollArea>
+            </div>
+        </LstCard>
+    );
+}

lstV2/frontend/src/utils/tableData/production/labels/labelColumns.tsx

@@ -0,0 +1,50 @@
+//import { fixTime } from "@/utils/fixTime";
+import { ColumnDef } from "@tanstack/react-table";
+import { format } from "date-fns-tz";
+
+// This type is used to define the shape of our data.
+// You can use a Zod schema here if you want.
+export type Adjustmnets = {
+    siloAdjust_id: string;
+    currentStockLevel: string;
+    newLevel: number;
+    dateAdjusted: string;
+    lastDateAdjusted: string;
+    comment: string;
+    commentAddedBy: string;
+    commentDate: string;
+    add_user: string;
+};
+
+export const labelolumns: ColumnDef<Adjustmnets>[] = [
+    {
+        accessorKey: "line",
+        header: () => <div className="text-left">Line</div>,
+    },
+    {
+        accessorKey: "printerName",
+        header: "Printer",
+    },
+    {
+        accessorKey: "runningNr",
+        header: "Running Number",
+    },
+    {
+        accessorKey: "upd_date",
+        header: "Label Date",
+        cell: ({ row }) => {
+            if (row.getValue("upd_date")) {
+                const correctDate: any = row.getValue("upd_date");
+                const strippedDate = correctDate.replace("Z", ""); // Remove Z
+                const formattedDate = format(strippedDate, "MM/dd/yyyy HH:mm");
+                return (
+                    <div className="text-left font-medium">{formattedDate}</div>
+                );
+            }
+        },
+    },
+    {
+        accessorKey: "status",
+        header: "Label Status",
+    },
+];

lstV2/frontend/src/utils/tableData/production/labels/labelData.tsx

@@ -0,0 +1,175 @@
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+    getPaginationRowModel,
+} from "@tanstack/react-table";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { LstCard } from "@/components/extendedUI/LstCard";
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    //style: any;
+}
+
+export function LabelTable<TData, TValue>({
+    columns,
+    data,
+    //style,
+}: DataTableProps<TData, TValue>) {
+    const [pagination, setPagination] = useState({
+        pageIndex: 0, //initial page index
+        pageSize: 5, //default page size
+    });
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        onPaginationChange: setPagination,
+        state: {
+            //...
+            pagination,
+        },
+    });
+
+    //console.log(parseInt(style.height.replace("px", "")) - 50);
+    return (
+        <LstCard>
+            <div>
+                <div className="flex flex-row justify-between">
+                    {data.length === 0 ? (
+                        <span>
+                            No labels have been printed in the last 2 hours
+                        </span>
+                    ) : (
+                        <span>Labels for the last 2 hours</span>
+                    )}
+                    <Select
+                        value={pagination.pageSize.toString()}
+                        onValueChange={(e) =>
+                            setPagination({
+                                ...pagination,
+                                pageSize: parseInt(e),
+                            })
+                        }
+                    >
+                        <SelectTrigger className="w-[180px]">
+                            <SelectValue
+                                //id={field.name}
+                                placeholder="Select Page"
+                            />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectGroup>
+                                <SelectLabel>Page Size</SelectLabel>
+                                <SelectItem value="5">5</SelectItem>
+                                <SelectItem value="10">10</SelectItem>
+                                <SelectItem value="50">50</SelectItem>
+                                <SelectItem value="100">100</SelectItem>
+                            </SelectGroup>
+                        </SelectContent>
+                    </Select>
+                </div>
+                <ScrollArea className="h-72 rounded-md border m-2">
+                    <Table
+                    // style={{
+                    //     width: `${parseInt(style.width.replace("px", "")) - 50}px`,
+                    //     height: `${parseInt(style.height.replace("px", "")) - 200}px`,
+                    //     cursor: "move",
+                    // }}
+                    >
+                        <TableHeader>
+                            {table.getHeaderGroups().map((headerGroup) => (
+                                <TableRow key={headerGroup.id}>
+                                    {headerGroup.headers.map((header) => {
+                                        return (
+                                            <TableHead key={header.id}>
+                                                {header.isPlaceholder
+                                                    ? null
+                                                    : flexRender(
+                                                          header.column
+                                                              .columnDef.header,
+                                                          header.getContext()
+                                                      )}
+                                            </TableHead>
+                                        );
+                                    })}
+                                </TableRow>
+                            ))}
+                        </TableHeader>
+                        <TableBody>
+                            {table.getRowModel().rows?.length ? (
+                                table.getRowModel().rows.map((row) => (
+                                    <TableRow
+                                        key={row.id}
+                                        data-state={
+                                            row.getIsSelected() && "selected"
+                                        }
+                                    >
+                                        {row.getVisibleCells().map((cell) => (
+                                            <TableCell key={cell.id}>
+                                                {flexRender(
+                                                    cell.column.columnDef.cell,
+                                                    cell.getContext()
+                                                )}
+                                            </TableCell>
+                                        ))}
+                                    </TableRow>
+                                ))
+                            ) : (
+                                <TableRow>
+                                    <TableCell
+                                        colSpan={columns.length}
+                                        className="h-24 text-center"
+                                    >
+                                        No labels.
+                                    </TableCell>
+                                </TableRow>
+                            )}
+                        </TableBody>
+                    </Table>
+                </ScrollArea>
+            </div>
+            <div className="flex items-center justify-end space-x-2">
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => table.previousPage()}
+                    disabled={!table.getCanPreviousPage()}
+                >
+                    Previous
+                </Button>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => table.nextPage()}
+                    disabled={!table.getCanNextPage()}
+                >
+                    Next
+                </Button>
+            </div>
+        </LstCard>
+    );
+}

lstV2/frontend/src/utils/tableData/production/ocpLogs/ocpLogColumns.tsx

@@ -0,0 +1,62 @@
+import { Button } from "@/components/ui/button";
+import { ColumnDef } from "@tanstack/react-table";
+import { format } from "date-fns-tz";
+import { Trash } from "lucide-react";
+
+// This type is used to define the shape of our data.
+// You can use a Zod schema here if you want.
+export type Adjustmnets = {
+    siloAdjust_id: string;
+    currentStockLevel: string;
+    newLevel: number;
+    dateAdjusted: string;
+    lastDateAdjusted: string;
+    comment: string;
+    commentAddedBy: string;
+    commentDate: string;
+    add_user: string;
+};
+
+export const ocpColumns = (
+    clearLog: (label: any) => void
+): ColumnDef<any>[] => [
+    {
+        accessorKey: "message",
+        header: () => <div className="text-left">Error Message</div>,
+        cell: ({ row }) => {
+            if (row.getValue("message")) {
+                return (
+                    <div className="text-left font-medium text-pretty max-w-48">
+                        {row.getValue("message")}
+                    </div>
+                );
+            }
+        },
+    },
+    {
+        accessorKey: "created_at",
+        header: "Error Date",
+        cell: ({ row }) => {
+            if (row.getValue("created_at")) {
+                const correctDate: any = row.getValue("created_at");
+                const strippedDate = correctDate.replace("Z", ""); // Remove Z
+                const formattedDate = format(strippedDate, "MM/dd/yyyy HH:mm");
+                return (
+                    <div className="text-left font-medium">{formattedDate}</div>
+                );
+            }
+        },
+    },
+    {
+        accessorKey: "clear",
+        header: "Clear",
+        cell: ({ row }) => {
+            const label = row.original;
+            return (
+                <Button size="icon" onClick={() => clearLog(label)}>
+                    <Trash />
+                </Button>
+            );
+        },
+    },
+];

lstV2/frontend/src/utils/tableData/production/ocpLogs/ocpLogData.tsx

@@ -0,0 +1,181 @@
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+    getPaginationRowModel,
+} from "@tanstack/react-table";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { LstCard } from "@/components/extendedUI/LstCard";
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    //style: any;
+}
+
+export function OcpLogTable<TData, TValue>({
+    columns,
+    data,
+    //style,
+}: DataTableProps<TData, TValue>) {
+    const [pagination, setPagination] = useState({
+        pageIndex: 0, //initial page index
+        pageSize: 5, //default page size
+    });
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        onPaginationChange: setPagination,
+        state: {
+            //...
+            pagination,
+        },
+    });
+
+    //console.log(parseInt(style.height.replace("px", "")) - 50);
+    return (
+        <LstCard
+            className="p-3"
+            // style={{
+            //     width: `${parseInt(style.width.replace("px", "")) - 50}px`,
+            //     height: `${parseInt(style.height.replace("px", "")) - 150}px`,
+            //     cursor: "move",
+            // }}
+            //style={{ overflow: "auto" }}
+        >
+            <div>
+                <div className="flex flex-row justify-between">
+                    {data?.length === 0 ? (
+                        <span>No errors in the last 4 hours</span>
+                    ) : (
+                        <span>Logs for the last 4 hours</span>
+                    )}
+                    <Select
+                        value={pagination.pageSize.toString()}
+                        onValueChange={(e) =>
+                            setPagination({
+                                ...pagination,
+                                pageSize: parseInt(e),
+                            })
+                        }
+                    >
+                        <SelectTrigger className="w-[180px]">
+                            <SelectValue
+                                //id={field.name}
+                                placeholder="Select Page"
+                            />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectGroup>
+                                <SelectLabel>Page Size</SelectLabel>
+                                <SelectItem value="5">5</SelectItem>
+                                <SelectItem value="10">10</SelectItem>
+                                <SelectItem value="50">50</SelectItem>
+                                <SelectItem value="100">100</SelectItem>
+                            </SelectGroup>
+                        </SelectContent>
+                    </Select>
+                </div>
+                <ScrollArea className="h-72 rounded-md border m-2">
+                    <Table
+                    // style={{
+                    //     width: `${parseInt(style.width.replace("px", "")) - 50}px`,
+                    //     height: `${parseInt(style.height.replace("px", "")) - 200}px`,
+                    //     cursor: "move",
+                    // }}
+                    >
+                        <TableHeader>
+                            {table.getHeaderGroups().map((headerGroup) => (
+                                <TableRow key={headerGroup.id}>
+                                    {headerGroup.headers.map((header) => {
+                                        return (
+                                            <TableHead key={header.id}>
+                                                {header.isPlaceholder
+                                                    ? null
+                                                    : flexRender(
+                                                          header.column
+                                                              .columnDef.header,
+                                                          header.getContext()
+                                                      )}
+                                            </TableHead>
+                                        );
+                                    })}
+                                </TableRow>
+                            ))}
+                        </TableHeader>
+                        <TableBody>
+                            {table.getRowModel().rows?.length ? (
+                                table.getRowModel().rows.map((row) => (
+                                    <TableRow
+                                        key={row.id}
+                                        data-state={
+                                            row.getIsSelected() && "selected"
+                                        }
+                                    >
+                                        {row.getVisibleCells().map((cell) => (
+                                            <TableCell key={cell.id}>
+                                                {flexRender(
+                                                    cell.column.columnDef.cell,
+                                                    cell.getContext()
+                                                )}
+                                            </TableCell>
+                                        ))}
+                                    </TableRow>
+                                ))
+                            ) : (
+                                <TableRow>
+                                    <TableCell
+                                        colSpan={columns.length}
+                                        className="h-24 text-center"
+                                    >
+                                        No results.
+                                    </TableCell>
+                                </TableRow>
+                            )}
+                        </TableBody>
+                    </Table>
+                </ScrollArea>
+            </div>
+            <div className="flex items-center justify-end space-x-2">
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => table.previousPage()}
+                    disabled={!table.getCanPreviousPage()}
+                >
+                    Previous
+                </Button>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => table.nextPage()}
+                    disabled={!table.getCanNextPage()}
+                >
+                    Next
+                </Button>
+            </div>
+        </LstCard>
+    );
+}

lstV2/frontend/src/utils/tableData/rfid/readers/readerColumns.tsx

@@ -0,0 +1,148 @@
+//import { fixTime } from "@/utils/fixTime";
+import { Button } from "@/components/ui/button";
+import { getReaders } from "@/utils/querys/rfid/getReaders";
+import { useQuery } from "@tanstack/react-query";
+import { ColumnDef } from "@tanstack/react-table";
+import axios from "axios";
+import { format } from "date-fns-tz";
+import { useState } from "react";
+import { toast } from "sonner";
+
+// This type is used to define the shape of our data.
+// You can use a Zod schema here if you want.
+export type Readers = {
+    rfidReader_id: string;
+    reader: string;
+    readerIP: string;
+    lastHeartBeat: string;
+    lastTrigger: string;
+    lastTriggerGood: boolean;
+    active: boolean;
+    lastTagScanned: string;
+    goodReads: number;
+    badReads: number;
+    totalReads: number;
+    goodRatio: number;
+};
+
+export const readerColumns: ColumnDef<Readers>[] = [
+    {
+        accessorKey: "reader",
+        header: () => <div className="text-left">Name</div>,
+    },
+    {
+        accessorKey: "lastHeartBeat",
+        header: "Last HeartBeat",
+        cell: ({ row }) => {
+            if (row.getValue("lastHeartBeat")) {
+                const correctDate: any = row.getValue("lastHeartBeat");
+                const strippedDate = correctDate.replace("Z", ""); // Remove Z
+                const formattedDate = format(strippedDate, "MM/dd/yyyy HH:mm");
+                return (
+                    <div className="text-left font-medium">{formattedDate}</div>
+                );
+            }
+        },
+    },
+    {
+        accessorKey: "lastTrigger",
+        header: "Last Trigger",
+        cell: ({ row }) => {
+            if (row.getValue("lastTrigger")) {
+                const correctDate: any = row.getValue("lastTrigger");
+                const strippedDate = correctDate.replace("Z", ""); // Remove Z
+                const formattedDate = format(strippedDate, "MM/dd/yyyy HH:mm");
+                return (
+                    <div className="text-left font-medium">{formattedDate}</div>
+                );
+            }
+        },
+    },
+    {
+        accessorKey: "lastTriggerGood",
+        header: "Last Trigger Status",
+    },
+    {
+        accessorKey: "lastTagScanned",
+        header: "Last Scanned Tag",
+    },
+    {
+        accessorKey: "goodReads",
+        header: "Total Good Reads",
+    },
+    {
+        accessorKey: "badReads",
+        header: "Total Bad Reads",
+    },
+    {
+        accessorKey: "totalReads",
+        header: "Total Reads",
+        cell: ({ row }) => {
+            const total =
+                parseInt(row.getValue("goodReads")) +
+                parseInt(row.getValue("badReads"));
+            return <div className="text-left font-medium">{total}</div>;
+        },
+    },
+    {
+        accessorKey: "goodRatio",
+        header: "Good Ratio",
+        cell: ({ row }) => {
+            const goodRatio =
+                (parseInt(row.getValue("goodReads")) /
+                    (parseInt(row.getValue("goodReads")) +
+                        parseInt(row.getValue("badReads")))) *
+                100;
+            return (
+                <div className="text-left font-medium">
+                    {isNaN(goodRatio) ? 0 : goodRatio.toFixed(2)}%
+                </div>
+            );
+        },
+    },
+    {
+        accessorKey: "reset",
+        header: "Reset Reads",
+        cell: ({ row }) => {
+            const { refetch } = useQuery(getReaders());
+            const [readerReset, setReaderReset] = useState(false);
+            // const goodRatio =
+            //     (parseInt(row.getValue("goodReads")) /
+            //         (parseInt(row.getValue("goodReads")) +
+            //             parseInt(row.getValue("badReads")))) *
+            //     100;
+            const name = row.getValue("reader");
+            const resetReads = async () => {
+                setReaderReset(true);
+                try {
+                    const res = await axios.post("/api/rfid/resetRatio", {
+                        reader: name,
+                    });
+
+                    if (res.status === 200) {
+                        toast.success(res.data.message);
+                        setReaderReset(false);
+                    } else {
+                        toast.error(res.data.message);
+                        setReaderReset(false);
+                    }
+                } catch (error: any) {
+                    toast.error(error.data.message);
+                    setReaderReset(false);
+                }
+                refetch();
+            };
+            return (
+                <div className="text-left font-medium">
+                    <Button
+                        className="h-4"
+                        onClick={resetReads}
+                        disabled={readerReset}
+                    >
+                        Reset Reads
+                    </Button>
+                </div>
+            );
+        },
+    },
+];

lstV2/frontend/src/utils/tableData/rfid/readers/readerData.tsx

@@ -0,0 +1,174 @@
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+    getPaginationRowModel,
+} from "@tanstack/react-table";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { LstCard } from "@/components/extendedUI/LstCard";
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    //style: any;
+}
+
+export function ReaderTable<TData, TValue>({
+    columns,
+    data,
+    //style,
+}: DataTableProps<TData, TValue>) {
+    const [pagination, setPagination] = useState({
+        pageIndex: 0, //initial page index
+        pageSize: 10, //default page size
+    });
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        onPaginationChange: setPagination,
+        state: {
+            //...
+            pagination,
+        },
+    });
+
+    //console.log(parseInt(style.height.replace("px", "")) - 50);
+    return (
+        <LstCard>
+            <div>
+                <div className="flex flex-row justify-between">
+                    {data.length === 0 ? (
+                        <span>No readers</span>
+                    ) : (
+                        <span>Current reader Info</span>
+                    )}
+                    <Select
+                        value={pagination.pageSize.toString()}
+                        onValueChange={(e) =>
+                            setPagination({
+                                ...pagination,
+                                pageSize: parseInt(e),
+                            })
+                        }
+                    >
+                        <SelectTrigger className="w-[180px]">
+                            <SelectValue
+                                //id={field.name}
+                                placeholder="Select Page"
+                                defaultValue={10}
+                            />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectGroup>
+                                <SelectLabel>Page Size</SelectLabel>
+                                <SelectItem value="5">5</SelectItem>
+                                <SelectItem value="10">10</SelectItem>
+                                <SelectItem value="50">50</SelectItem>
+                                <SelectItem value="100">100</SelectItem>
+                            </SelectGroup>
+                        </SelectContent>
+                    </Select>
+                </div>
+                <ScrollArea className="h-96 rounded-md border m-2">
+                    <Table
+                    // style={{
+                    //     width: `${parseInt(style.width.replace("px", "")) - 50}px`,
+                    //     height: `${parseInt(style.height.replace("px", "")) - 200}px`,
+                    //     cursor: "move",
+                    // }}
+                    >
+                        <TableHeader>
+                            {table.getHeaderGroups().map((headerGroup) => (
+                                <TableRow key={headerGroup.id}>
+                                    {headerGroup.headers.map((header) => {
+                                        return (
+                                            <TableHead key={header.id}>
+                                                {header.isPlaceholder
+                                                    ? null
+                                                    : flexRender(
+                                                          header.column
+                                                              .columnDef.header,
+                                                          header.getContext()
+                                                      )}
+                                            </TableHead>
+                                        );
+                                    })}
+                                </TableRow>
+                            ))}
+                        </TableHeader>
+                        <TableBody>
+                            {table.getRowModel().rows?.length ? (
+                                table.getRowModel().rows.map((row) => (
+                                    <TableRow
+                                        key={row.id}
+                                        data-state={
+                                            row.getIsSelected() && "selected"
+                                        }
+                                    >
+                                        {row.getVisibleCells().map((cell) => (
+                                            <TableCell key={cell.id}>
+                                                {flexRender(
+                                                    cell.column.columnDef.cell,
+                                                    cell.getContext()
+                                                )}
+                                            </TableCell>
+                                        ))}
+                                    </TableRow>
+                                ))
+                            ) : (
+                                <TableRow>
+                                    <TableCell
+                                        colSpan={columns.length}
+                                        className="h-24 text-center"
+                                    >
+                                        No labels.
+                                    </TableCell>
+                                </TableRow>
+                            )}
+                        </TableBody>
+                    </Table>
+                </ScrollArea>
+            </div>
+            <div className="flex items-center justify-end space-x-2">
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => table.previousPage()}
+                    disabled={!table.getCanPreviousPage()}
+                >
+                    Previous
+                </Button>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => table.nextPage()}
+                    disabled={!table.getCanNextPage()}
+                >
+                    Next
+                </Button>
+            </div>
+        </LstCard>
+    );
+}

lstV2/frontend/src/utils/tableData/siloAdjustmentHist/siloAdjHistColumns.tsx

@@ -0,0 +1,84 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { format } from "date-fns";
+
+// This type is used to define the shape of our data.
+// You can use a Zod schema here if you want.
+export type Adjustmnets = {
+    siloAdjust_id: string;
+    currentStockLevel: string;
+    newLevel: number;
+    dateAdjusted: string;
+    lastDateAdjusted: string;
+    comment: string;
+    commentAddedBy: string;
+    commentDate: string;
+    add_user: string;
+};
+
+export const columns: ColumnDef<Adjustmnets>[] = [
+    {
+        accessorKey: "currentStockLevel",
+        header: () => <div className="text-right">Stock At Post</div>,
+    },
+    {
+        accessorKey: "newLevel",
+        header: "Level Entered",
+    },
+    {
+        accessorKey: "dateAdjusted",
+        header: "Adjustmnet",
+        cell: ({ row }) => {
+            if (row.getValue("dateAdjusted")) {
+                const correctDate = format(
+                    row.original.dateAdjusted?.replace("Z", ""),
+                    "M/d/yyyy hh:mm"
+                );
+                return (
+                    <div className="text-right font-medium">{correctDate}</div>
+                );
+            }
+        },
+    },
+    {
+        accessorKey: "lastDateAdjusted",
+        header: "Last Adjusted",
+        cell: ({ row }) => {
+            if (row.getValue("lastDateAdjusted")) {
+                const correctDate = format(
+                    row.original.lastDateAdjusted?.replace("Z", ""),
+                    "M/d/yyyy hh:mm"
+                );
+                return (
+                    <div className="text-right font-medium">{correctDate}</div>
+                );
+            }
+        },
+    },
+    {
+        accessorKey: "comment",
+        header: "Comment",
+    },
+    {
+        accessorKey: "commentAddedBy",
+        header: "Commenter ",
+    },
+    {
+        accessorKey: "commentDate",
+        header: "Comment Date ",
+        cell: ({ row }) => {
+            if (row.getValue("commentDate")) {
+                const correctDate = format(
+                    row.original.commentDate?.replace("Z", ""),
+                    "M/d/yyyy hh:mm"
+                );
+                return (
+                    <div className="text-right font-medium">{correctDate}</div>
+                );
+            }
+        },
+    },
+    {
+        accessorKey: "add_user",
+        header: "Creator",
+    },
+];

lstV2/frontend/src/utils/tableData/siloAdjustmentHist/siloData.tsx

@@ -0,0 +1,110 @@
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+    getPaginationRowModel,
+} from "@tanstack/react-table";
+
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+}
+
+export function SiloTable<TData, TValue>({
+    columns,
+    data,
+}: DataTableProps<TData, TValue>) {
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+    });
+    //console.log(data);
+    return (
+        <div className="rounded-md border w-[1028px]">
+            <div>
+                <Table>
+                    <TableHeader>
+                        {table.getHeaderGroups().map((headerGroup) => (
+                            <TableRow key={headerGroup.id}>
+                                {headerGroup.headers.map((header) => {
+                                    return (
+                                        <TableHead key={header.id}>
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                      header.column.columnDef
+                                                          .header,
+                                                      header.getContext()
+                                                  )}
+                                        </TableHead>
+                                    );
+                                })}
+                            </TableRow>
+                        ))}
+                    </TableHeader>
+                    <TableBody>
+                        {table.getRowModel().rows?.length ? (
+                            table.getRowModel().rows.map((row) => (
+                                <TableRow
+                                    key={row.id}
+                                    data-state={
+                                        row.getIsSelected() && "selected"
+                                    }
+                                >
+                                    {row.getVisibleCells().map((cell) => (
+                                        <TableCell key={cell.id}>
+                                            {flexRender(
+                                                cell.column.columnDef.cell,
+                                                cell.getContext()
+                                            )}
+                                        </TableCell>
+                                    ))}
+                                </TableRow>
+                            ))
+                        ) : (
+                            <TableRow>
+                                <TableCell
+                                    colSpan={columns.length}
+                                    className="h-24 text-center"
+                                >
+                                    No results.
+                                </TableCell>
+                            </TableRow>
+                        )}
+                    </TableBody>
+                </Table>
+            </div>
+            <div className="flex items-center justify-end space-x-2 py-4">
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => table.previousPage()}
+                    disabled={!table.getCanPreviousPage()}
+                >
+                    Previous
+                </Button>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => table.nextPage()}
+                    disabled={!table.getCanNextPage()}
+                >
+                    Next
+                </Button>
+            </div>
+        </div>
+    );
+}

lstV2/frontend/src/utils/userAccess.ts

@@ -0,0 +1,44 @@
+import { Modules } from "@/types/modules";
+import { User } from "@/types/users";
+
+// user will need access to the module.
+// users role will determine there visual access
+export function hasAccess(
+    user: User | null,
+    moduleName: string | null,
+    modules: Modules[]
+): boolean {
+    // get the modules for the id
+    const filteredModule = modules?.filter((f) => f.name === moduleName);
+    //console.log(filteredModule[0]);
+    // userroles and filter out by the module id,
+
+    const roleCheck: any = user?.roles.find(
+        (role) => role.module_id === filteredModule[0].module_id
+    );
+
+    if (filteredModule[0].roles.includes(roleCheck?.role)) {
+        return true;
+    }
+    //if(filteredModule[0].roles.includes(roleCheck.))
+    return false;
+}
+
+export function hasPageAccess(
+    user: User | null,
+    role: any,
+    module_id: string
+): boolean {
+    if (role.includes("viewer")) return true;
+    if (!user) return false;
+
+    // get only the module in the user profile
+    //console.log(user);
+    const userRole = user?.roles.filter((role) => role.module_id === module_id);
+    //console.log(userRole[0]?.role);
+    // if (role.includes(userRole[0]?.role)) {
+
+    //     return true};
+    if (userRole.length !== 0) return true;
+    return false;
+}