feat(migration): moved ocp, ocme, wrapper stuff
This commit is contained in:
28
frontend/package-lock.json
generated
28
frontend/package-lock.json
generated
@@ -43,6 +43,8 @@
|
||||
"react-calendar-timeline": "^0.30.0-beta.3",
|
||||
"react-day-picker": "^9.11.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"react-hook-form": "^7.65.0",
|
||||
"react-resizable-panels": "^3.0.6",
|
||||
"recharts": "^2.15.4",
|
||||
"socket.io-client": "^4.8.1",
|
||||
"sonner": "^2.0.7",
|
||||
@@ -6598,6 +6600,22 @@
|
||||
"react": "^19.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-hook-form": {
|
||||
"version": "7.65.0",
|
||||
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.65.0.tgz",
|
||||
"integrity": "sha512-xtOzDz063WcXvGWaHgLNrNzlsdFgtUWcb32E6WFaGTd7kPZG3EeDusjdZfUsPwKCKVXy1ZlntifaHZ4l8pAsmw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/react-hook-form"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17 || ^18 || ^19"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
|
||||
@@ -6651,6 +6669,16 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-resizable-panels": {
|
||||
"version": "3.0.6",
|
||||
"resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-3.0.6.tgz",
|
||||
"integrity": "sha512-b3qKHQ3MLqOgSS+FRYKapNkJZf5EQzuf6+RLiq1/IlTHw99YrZ2NJZLk4hQIzTnnIkRg2LUqyVinu6YWWpUYew==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
||||
}
|
||||
},
|
||||
"node_modules/react-smooth": {
|
||||
"version": "4.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
|
||||
|
||||
@@ -45,6 +45,8 @@
|
||||
"react-calendar-timeline": "^0.30.0-beta.3",
|
||||
"react-day-picker": "^9.11.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"react-hook-form": "^7.65.0",
|
||||
"react-resizable-panels": "^3.0.6",
|
||||
"recharts": "^2.15.4",
|
||||
"socket.io-client": "^4.8.1",
|
||||
"sonner": "^2.0.7",
|
||||
|
||||
54
frontend/src/components/ui/resizable.tsx
Normal file
54
frontend/src/components/ui/resizable.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
import * as React from "react"
|
||||
import { GripVerticalIcon } from "lucide-react"
|
||||
import * as ResizablePrimitive from "react-resizable-panels"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function ResizablePanelGroup({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
|
||||
return (
|
||||
<ResizablePrimitive.PanelGroup
|
||||
data-slot="resizable-panel-group"
|
||||
className={cn(
|
||||
"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ResizablePanel({
|
||||
...props
|
||||
}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
|
||||
return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
|
||||
}
|
||||
|
||||
function ResizableHandle({
|
||||
withHandle,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
|
||||
withHandle?: boolean
|
||||
}) {
|
||||
return (
|
||||
<ResizablePrimitive.PanelResizeHandle
|
||||
data-slot="resizable-handle"
|
||||
className={cn(
|
||||
"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{withHandle && (
|
||||
<div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
|
||||
<GripVerticalIcon className="size-2.5" />
|
||||
</div>
|
||||
)}
|
||||
</ResizablePrimitive.PanelResizeHandle>
|
||||
)
|
||||
}
|
||||
|
||||
export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
|
||||
@@ -19,6 +19,7 @@ import { Route as MobileMobileLayoutRouteRouteImport } from './routes/_mobile/_m
|
||||
import { Route as AppAdminLayoutRouteRouteImport } from './routes/_app/_adminLayout/route'
|
||||
import { Route as OldOldIndexRouteImport } from './routes/_old/old/index'
|
||||
import { Route as AppauthLoginRouteImport } from './routes/_app/(auth)/login'
|
||||
import { Route as OldOldOcpIndexRouteImport } from './routes/_old/old/ocp/index'
|
||||
import { Route as MobileMobileLayoutMIndexRouteImport } from './routes/_mobile/_mobileLayout/m/index'
|
||||
import { Route as AppauthUserIndexRouteImport } from './routes/_app/(auth)/user/index'
|
||||
import { Route as MobileMobileLayoutMRelocateRouteImport } from './routes/_mobile/_mobileLayout/m/relocate'
|
||||
@@ -31,6 +32,7 @@ import { Route as AppauthUserSignupRouteImport } from './routes/_app/(auth)/user
|
||||
import { Route as AppauthUserResetpasswordRouteImport } from './routes/_app/(auth)/user/resetpassword'
|
||||
import { Route as AppauthUserProfileRouteImport } from './routes/_app/(auth)/user/profile'
|
||||
import { Route as AppAdminLayoutAdminUsersRouteRouteImport } from './routes/_app/_adminLayout/admin/_users/route'
|
||||
import { Route as OldOldocmeCyclecountIndexRouteImport } from './routes/_old/old/(ocme)/cyclecount/index'
|
||||
import { Route as OldOldlogisticsSiloAdjustmentsIndexRouteImport } from './routes/_old/old/(logistics)/siloAdjustments/index'
|
||||
import { Route as OldOldlogisticsSiloAdjustmentsHistRouteImport } from './routes/_old/old/(logistics)/siloAdjustments/$hist'
|
||||
import { Route as AppAdminLayoutAdminUsersUsersRouteImport } from './routes/_app/_adminLayout/admin/_users/users'
|
||||
@@ -83,6 +85,11 @@ const AppauthLoginRoute = AppauthLoginRouteImport.update({
|
||||
path: '/login',
|
||||
getParentRoute: () => AppRouteRoute,
|
||||
} as any)
|
||||
const OldOldOcpIndexRoute = OldOldOcpIndexRouteImport.update({
|
||||
id: '/ocp/',
|
||||
path: '/ocp/',
|
||||
getParentRoute: () => OldOldRouteRoute,
|
||||
} as any)
|
||||
const MobileMobileLayoutMIndexRoute =
|
||||
MobileMobileLayoutMIndexRouteImport.update({
|
||||
id: '/m/',
|
||||
@@ -151,6 +158,12 @@ const AppAdminLayoutAdminUsersRouteRoute =
|
||||
id: '/_users',
|
||||
getParentRoute: () => AppAdminLayoutAdminRoute,
|
||||
} as any)
|
||||
const OldOldocmeCyclecountIndexRoute =
|
||||
OldOldocmeCyclecountIndexRouteImport.update({
|
||||
id: '/(ocme)/cyclecount/',
|
||||
path: '/cyclecount/',
|
||||
getParentRoute: () => OldOldRouteRoute,
|
||||
} as any)
|
||||
const OldOldlogisticsSiloAdjustmentsIndexRoute =
|
||||
OldOldlogisticsSiloAdjustmentsIndexRouteImport.update({
|
||||
id: '/(logistics)/siloAdjustments/',
|
||||
@@ -200,10 +213,12 @@ export interface FileRoutesByFullPath {
|
||||
'/m/relocate': typeof MobileMobileLayoutMRelocateRoute
|
||||
'/user': typeof AppauthUserIndexRoute
|
||||
'/m': typeof MobileMobileLayoutMIndexRoute
|
||||
'/old/ocp': typeof OldOldOcpIndexRoute
|
||||
'/admin/prodUsers': typeof AppAdminLayoutAdminUsersProdUsersRoute
|
||||
'/admin/users': typeof AppAdminLayoutAdminUsersUsersRoute
|
||||
'/old/siloAdjustments/$hist': typeof OldOldlogisticsSiloAdjustmentsHistRoute
|
||||
'/old/siloAdjustments': typeof OldOldlogisticsSiloAdjustmentsIndexRoute
|
||||
'/old/cyclecount': typeof OldOldocmeCyclecountIndexRoute
|
||||
'/old/siloAdjustments/comment/$comment': typeof OldOldlogisticsSiloAdjustmentsCommentCommentRoute
|
||||
}
|
||||
export interface FileRoutesByTo {
|
||||
@@ -223,10 +238,12 @@ export interface FileRoutesByTo {
|
||||
'/m/relocate': typeof MobileMobileLayoutMRelocateRoute
|
||||
'/user': typeof AppauthUserIndexRoute
|
||||
'/m': typeof MobileMobileLayoutMIndexRoute
|
||||
'/old/ocp': typeof OldOldOcpIndexRoute
|
||||
'/admin/prodUsers': typeof AppAdminLayoutAdminUsersProdUsersRoute
|
||||
'/admin/users': typeof AppAdminLayoutAdminUsersUsersRoute
|
||||
'/old/siloAdjustments/$hist': typeof OldOldlogisticsSiloAdjustmentsHistRoute
|
||||
'/old/siloAdjustments': typeof OldOldlogisticsSiloAdjustmentsIndexRoute
|
||||
'/old/cyclecount': typeof OldOldocmeCyclecountIndexRoute
|
||||
'/old/siloAdjustments/comment/$comment': typeof OldOldlogisticsSiloAdjustmentsCommentCommentRoute
|
||||
}
|
||||
export interface FileRoutesById {
|
||||
@@ -252,10 +269,12 @@ export interface FileRoutesById {
|
||||
'/_mobile/_mobileLayout/m/relocate': typeof MobileMobileLayoutMRelocateRoute
|
||||
'/_app/(auth)/user/': typeof AppauthUserIndexRoute
|
||||
'/_mobile/_mobileLayout/m/': typeof MobileMobileLayoutMIndexRoute
|
||||
'/_old/old/ocp/': typeof OldOldOcpIndexRoute
|
||||
'/_app/_adminLayout/admin/_users/prodUsers': typeof AppAdminLayoutAdminUsersProdUsersRoute
|
||||
'/_app/_adminLayout/admin/_users/users': typeof AppAdminLayoutAdminUsersUsersRoute
|
||||
'/_old/old/(logistics)/siloAdjustments/$hist': typeof OldOldlogisticsSiloAdjustmentsHistRoute
|
||||
'/_old/old/(logistics)/siloAdjustments/': typeof OldOldlogisticsSiloAdjustmentsIndexRoute
|
||||
'/_old/old/(ocme)/cyclecount/': typeof OldOldocmeCyclecountIndexRoute
|
||||
'/_old/old/(logistics)/siloAdjustments/comment/$comment': typeof OldOldlogisticsSiloAdjustmentsCommentCommentRoute
|
||||
}
|
||||
export interface FileRouteTypes {
|
||||
@@ -278,10 +297,12 @@ export interface FileRouteTypes {
|
||||
| '/m/relocate'
|
||||
| '/user'
|
||||
| '/m'
|
||||
| '/old/ocp'
|
||||
| '/admin/prodUsers'
|
||||
| '/admin/users'
|
||||
| '/old/siloAdjustments/$hist'
|
||||
| '/old/siloAdjustments'
|
||||
| '/old/cyclecount'
|
||||
| '/old/siloAdjustments/comment/$comment'
|
||||
fileRoutesByTo: FileRoutesByTo
|
||||
to:
|
||||
@@ -301,10 +322,12 @@ export interface FileRouteTypes {
|
||||
| '/m/relocate'
|
||||
| '/user'
|
||||
| '/m'
|
||||
| '/old/ocp'
|
||||
| '/admin/prodUsers'
|
||||
| '/admin/users'
|
||||
| '/old/siloAdjustments/$hist'
|
||||
| '/old/siloAdjustments'
|
||||
| '/old/cyclecount'
|
||||
| '/old/siloAdjustments/comment/$comment'
|
||||
id:
|
||||
| '__root__'
|
||||
@@ -329,10 +352,12 @@ export interface FileRouteTypes {
|
||||
| '/_mobile/_mobileLayout/m/relocate'
|
||||
| '/_app/(auth)/user/'
|
||||
| '/_mobile/_mobileLayout/m/'
|
||||
| '/_old/old/ocp/'
|
||||
| '/_app/_adminLayout/admin/_users/prodUsers'
|
||||
| '/_app/_adminLayout/admin/_users/users'
|
||||
| '/_old/old/(logistics)/siloAdjustments/$hist'
|
||||
| '/_old/old/(logistics)/siloAdjustments/'
|
||||
| '/_old/old/(ocme)/cyclecount/'
|
||||
| '/_old/old/(logistics)/siloAdjustments/comment/$comment'
|
||||
fileRoutesById: FileRoutesById
|
||||
}
|
||||
@@ -407,6 +432,13 @@ declare module '@tanstack/react-router' {
|
||||
preLoaderRoute: typeof AppauthLoginRouteImport
|
||||
parentRoute: typeof AppRouteRoute
|
||||
}
|
||||
'/_old/old/ocp/': {
|
||||
id: '/_old/old/ocp/'
|
||||
path: '/ocp'
|
||||
fullPath: '/old/ocp'
|
||||
preLoaderRoute: typeof OldOldOcpIndexRouteImport
|
||||
parentRoute: typeof OldOldRouteRoute
|
||||
}
|
||||
'/_mobile/_mobileLayout/m/': {
|
||||
id: '/_mobile/_mobileLayout/m/'
|
||||
path: '/m'
|
||||
@@ -491,6 +523,13 @@ declare module '@tanstack/react-router' {
|
||||
preLoaderRoute: typeof AppAdminLayoutAdminUsersRouteRouteImport
|
||||
parentRoute: typeof AppAdminLayoutAdminRoute
|
||||
}
|
||||
'/_old/old/(ocme)/cyclecount/': {
|
||||
id: '/_old/old/(ocme)/cyclecount/'
|
||||
path: '/cyclecount'
|
||||
fullPath: '/old/cyclecount'
|
||||
preLoaderRoute: typeof OldOldocmeCyclecountIndexRouteImport
|
||||
parentRoute: typeof OldOldRouteRoute
|
||||
}
|
||||
'/_old/old/(logistics)/siloAdjustments/': {
|
||||
id: '/_old/old/(logistics)/siloAdjustments/'
|
||||
path: '/siloAdjustments'
|
||||
@@ -624,17 +663,21 @@ const MobileMobileLayoutRouteRouteWithChildren =
|
||||
|
||||
interface OldOldRouteRouteChildren {
|
||||
OldOldIndexRoute: typeof OldOldIndexRoute
|
||||
OldOldOcpIndexRoute: typeof OldOldOcpIndexRoute
|
||||
OldOldlogisticsSiloAdjustmentsHistRoute: typeof OldOldlogisticsSiloAdjustmentsHistRoute
|
||||
OldOldlogisticsSiloAdjustmentsIndexRoute: typeof OldOldlogisticsSiloAdjustmentsIndexRoute
|
||||
OldOldocmeCyclecountIndexRoute: typeof OldOldocmeCyclecountIndexRoute
|
||||
OldOldlogisticsSiloAdjustmentsCommentCommentRoute: typeof OldOldlogisticsSiloAdjustmentsCommentCommentRoute
|
||||
}
|
||||
|
||||
const OldOldRouteRouteChildren: OldOldRouteRouteChildren = {
|
||||
OldOldIndexRoute: OldOldIndexRoute,
|
||||
OldOldOcpIndexRoute: OldOldOcpIndexRoute,
|
||||
OldOldlogisticsSiloAdjustmentsHistRoute:
|
||||
OldOldlogisticsSiloAdjustmentsHistRoute,
|
||||
OldOldlogisticsSiloAdjustmentsIndexRoute:
|
||||
OldOldlogisticsSiloAdjustmentsIndexRoute,
|
||||
OldOldocmeCyclecountIndexRoute: OldOldocmeCyclecountIndexRoute,
|
||||
OldOldlogisticsSiloAdjustmentsCommentCommentRoute:
|
||||
OldOldlogisticsSiloAdjustmentsCommentCommentRoute,
|
||||
}
|
||||
|
||||
14
frontend/src/routes/_old/old/(ocme)/cyclecount/index.tsx
Normal file
14
frontend/src/routes/_old/old/(ocme)/cyclecount/index.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import OcmeCycleCount from "../../-components/ocme/ocmeCycleCount";
|
||||
|
||||
export const Route = createFileRoute("/_old/old/(ocme)/cyclecount/")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return (
|
||||
<div className="m-2">
|
||||
<OcmeCycleCount />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
export default function ManuallyEnterRn() {
|
||||
const [sending, setSendingRn] = useState(false);
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
runningNr: "",
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
console.log(value);
|
||||
setSendingRn(true);
|
||||
try {
|
||||
const res = await axios.post("/ocme/api/v1/postRunningNumber", {
|
||||
runningNr: value.runningNr,
|
||||
areaFrom: "wrapper_1",
|
||||
completed: true,
|
||||
});
|
||||
|
||||
if (res.data.success) {
|
||||
form.reset();
|
||||
toast.success(`${value.runningNr} was just created please login`);
|
||||
setTimeout(() => {
|
||||
setSendingRn(false);
|
||||
}, 3 * 1000);
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(res.data.message);
|
||||
setTimeout(() => {
|
||||
setSendingRn(false);
|
||||
}, 3 * 1000);
|
||||
}
|
||||
} catch (error) {
|
||||
//console.log(error);
|
||||
toast.error("There was an error registering");
|
||||
setTimeout(() => {
|
||||
setSendingRn(false);
|
||||
}, 3 * 1000);
|
||||
}
|
||||
},
|
||||
});
|
||||
return (
|
||||
<div>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
//e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<form.Field
|
||||
name="runningNr"
|
||||
validators={{
|
||||
// We can choose between form-wide and field-specific validators
|
||||
onChange: ({ value }) =>
|
||||
value.length > 3
|
||||
? undefined
|
||||
: "pallet number must be greater than 4 numbers",
|
||||
}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2 flex flex-row">
|
||||
<div>
|
||||
<Label htmlFor="runningNr" className="mb-2">
|
||||
Running Number
|
||||
</Label>
|
||||
<Input
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
type="number"
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
/>
|
||||
{field.state.meta.errors.length ? (
|
||||
<em>{field.state.meta.errors.join(",")}</em>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="ml-1 mt-5">
|
||||
<Button
|
||||
className="ml-1"
|
||||
type="submit"
|
||||
onClick={form.handleSubmit}
|
||||
disabled={sending}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
165
frontend/src/routes/_old/old/-components/ocme/WrapperCard.tsx
Normal file
165
frontend/src/routes/_old/old/-components/ocme/WrapperCard.tsx
Normal file
@@ -0,0 +1,165 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
import { format } from "date-fns";
|
||||
import { Trash } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { getOcmeInfo } from "../../-utils/querys/ocp/getOcmeInfo";
|
||||
import { LstCard } from "../extendedUi/LstCard";
|
||||
import ManualTrigger from "../rfid/ManualTrigger";
|
||||
|
||||
const currentPallets = [
|
||||
{ key: "line", label: "Line" },
|
||||
{ key: "runningNumber", label: "Running #" },
|
||||
{ key: "upd_date", label: "Date Scanned" },
|
||||
{ key: "waitingfor", label: "Waiting For" },
|
||||
{ key: "clear", label: "Clear" },
|
||||
];
|
||||
|
||||
// const currentTags = [
|
||||
// { key: "line", label: "Line" },
|
||||
// { key: "printerName", label: "Printer" },
|
||||
// { key: "runningNr", label: "Running #" },
|
||||
// { key: "upd_date", label: "Label date" },
|
||||
// { key: "status", label: "Label Status" },
|
||||
// ];
|
||||
export default function WrapperManualTrigger() {
|
||||
const { data, isError, isLoading } = useQuery(getOcmeInfo());
|
||||
const cameraTrigger = async () => {
|
||||
try {
|
||||
const res = await axios.get("/ocme/api/v1/manualCameraTrigger");
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(res.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
//stoast.success(error.data.message);
|
||||
}
|
||||
};
|
||||
|
||||
const clearLabel = async (d: any) => {
|
||||
const data = {
|
||||
runningNr: d.runningNr,
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await axios.patch("/ocme/api/v1/pickedUp", data);
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(`${d.runningNr} was just removed from being picked up.`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(res.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
//stoast.success(error.data.message);
|
||||
}
|
||||
};
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<div>
|
||||
<p className="text-center text-pretty">
|
||||
There was an error getting wrapper scans
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const info = data?.filter((r: any) => r.areaFrom === "wrapper_1");
|
||||
return (
|
||||
<LstCard className="m-2 p-2 w-auto">
|
||||
<ScrollArea className="max-h-[200px]">
|
||||
<span>Wrapper Pallet Info</span>
|
||||
<div>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{currentPallets.map((l) => (
|
||||
<TableHead key={l.key}>{l.label}</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
{isLoading ? (
|
||||
<TableBody>
|
||||
{Array(3)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell className="font-medium">
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
) : (
|
||||
<TableBody>
|
||||
{info.map((i: any) => (
|
||||
<TableRow key={i.runningNr}>
|
||||
<TableCell className="font-medium">{i.lineNum}</TableCell>
|
||||
<TableCell>{i.runningNr}</TableCell>
|
||||
<TableCell>
|
||||
{format(i?.upd_date.replace("Z", ""), "M/d/yyyy hh:mm")}
|
||||
</TableCell>
|
||||
<TableCell>{i.waitingFor}</TableCell>
|
||||
<TableCell>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="icon"
|
||||
onClick={() => clearLabel(i)}
|
||||
>
|
||||
<Trash />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
)}
|
||||
</Table>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
<div>
|
||||
<hr />
|
||||
{/* <p className="text-center mb-3">Manual Trigger</p>
|
||||
<ManuallyEnterRn />
|
||||
<Separator className="m-1" /> */}
|
||||
<div className="flex flex-row justify-between m-2">
|
||||
<Button onClick={cameraTrigger}>Camera</Button>
|
||||
<ManualTrigger />
|
||||
</div>
|
||||
</div>
|
||||
</LstCard>
|
||||
);
|
||||
}
|
||||
229
frontend/src/routes/_old/old/-components/ocme/ocmeCycleCount.tsx
Normal file
229
frontend/src/routes/_old/old/-components/ocme/ocmeCycleCount.tsx
Normal file
@@ -0,0 +1,229 @@
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { LstCard } from "@/components/ui/lstCard";
|
||||
//import CycleCountLog from "./CycleCountLog";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
|
||||
export default function OcmeCycleCount() {
|
||||
const token = localStorage.getItem("auth_token");
|
||||
const [data, setData] = useState([]);
|
||||
const [counting, setCounting] = useState(false);
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
//watch,
|
||||
formState: { errors },
|
||||
reset,
|
||||
control,
|
||||
} = useForm({
|
||||
defaultValues: {
|
||||
lane: "",
|
||||
laneType: "name",
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (data: any) => {
|
||||
setData([]);
|
||||
setCounting(true);
|
||||
|
||||
if (data.laneType === "") {
|
||||
toast.error("Please select a type");
|
||||
setCounting(false);
|
||||
return;
|
||||
}
|
||||
toast.success(`Cycle count started`);
|
||||
try {
|
||||
const res = await axios.post("/ocme/api/v1/cycleCount", data, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
setData(res.data.data);
|
||||
setCounting(false);
|
||||
reset();
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
|
||||
setCounting(false);
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error("There was an error cycle counting");
|
||||
setCounting(false);
|
||||
reset();
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="flex flex-row w-screen">
|
||||
<div className="m-2 w-5/6">
|
||||
<LstCard>
|
||||
<p className="ml-2">
|
||||
Please enter the name or laneID you want to cycle count.
|
||||
</p>
|
||||
<div>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="flex justify-between">
|
||||
<div className="m-2 flex flex-row">
|
||||
<Input
|
||||
placeholder="enter lane: L064"
|
||||
className={errors.lane ? "border-red-500" : ""}
|
||||
aria-invalid={!!errors.lane}
|
||||
{...register("lane", {
|
||||
required: true,
|
||||
minLength: {
|
||||
value: 3,
|
||||
message: "The lane is too short!",
|
||||
},
|
||||
})}
|
||||
/>
|
||||
<div className="ml-2">
|
||||
<Controller
|
||||
control={control}
|
||||
name="laneType"
|
||||
render={({
|
||||
field: { onChange },
|
||||
fieldState: {},
|
||||
//formState,
|
||||
}) => (
|
||||
<Select onValueChange={onChange}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Select name or id" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="name">Name</SelectItem>
|
||||
<SelectItem value="laneID">Lane ID</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Button className="m-2" type="submit" disabled={counting}>
|
||||
{counting ? (
|
||||
<span>Counting...</span>
|
||||
) : (
|
||||
<span>CycleCount</span>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>LaneID</TableHead>
|
||||
<TableHead>Lane</TableHead>
|
||||
<TableHead>AV</TableHead>
|
||||
<TableHead>Description</TableHead>
|
||||
<TableHead>Running Number</TableHead>
|
||||
<TableHead>In Ocme</TableHead>
|
||||
<TableHead>In Stock</TableHead>
|
||||
<TableHead>Result</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
{data?.length === 0 ? (
|
||||
<TableBody>
|
||||
{Array(10)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell className="font-medium">
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
) : (
|
||||
<>
|
||||
{data.map((i: any) => {
|
||||
let classname = ``;
|
||||
if (i.info === "Validate pallet is ok.") {
|
||||
classname = `bg-red-500`;
|
||||
}
|
||||
if (i.info === "Sent to Inv") {
|
||||
classname = `bg-amber-700`;
|
||||
}
|
||||
return (
|
||||
<TableRow key={i.runningNumber}>
|
||||
<TableCell className={`font-medium ${classname}`}>
|
||||
{i.alpla_laneID}
|
||||
</TableCell>
|
||||
<TableCell className={`font-medium ${classname}`}>
|
||||
{i.alpla_laneDescription}
|
||||
</TableCell>
|
||||
<TableCell className={`font-medium ${classname}`}>
|
||||
{i.Article}
|
||||
</TableCell>
|
||||
<TableCell className={`font-medium ${classname}`}>
|
||||
{i.alpla_laneDescription}
|
||||
</TableCell>
|
||||
<TableCell className={`font-medium ${classname}`}>
|
||||
{i.runningNumber}
|
||||
</TableCell>
|
||||
<TableCell className={`font-medium ${classname}`}>
|
||||
{i.ocme}
|
||||
</TableCell>
|
||||
<TableCell className={`font-medium ${classname}`}>
|
||||
{i.stock}
|
||||
</TableCell>
|
||||
<TableCell className={`font-medium ${classname}`}>
|
||||
{i.info}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</Table>
|
||||
</div>
|
||||
</LstCard>
|
||||
</div>
|
||||
{/* <div className="m-2">
|
||||
<CycleCountLog />
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
24
frontend/src/routes/_old/old/-components/ocp/LabelLog.tsx
Normal file
24
frontend/src/routes/_old/old/-components/ocp/LabelLog.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
// import {useSessionStore} from "@/lib/store/sessionStore";
|
||||
// import {useSettingStore} from "@/lib/store/useSettings";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getlabels } from "../../-utils/querys/ocp/labels";
|
||||
import { labelolumns } from "../../-utils/tableData/production/labels/labelColumns";
|
||||
import { LabelTable } from "../../-utils/tableData/production/labels/labelData";
|
||||
|
||||
export default function LabelLog() {
|
||||
const { data, isError, isLoading } = useQuery(getlabels("4"));
|
||||
|
||||
if (isError) return <div>Error</div>;
|
||||
|
||||
if (isLoading) return <div>Loading</div>;
|
||||
const labelData = data ? data : [];
|
||||
return (
|
||||
<div className="m-2">
|
||||
<LabelTable
|
||||
columns={labelolumns}
|
||||
data={labelData}
|
||||
//style={style}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
27
frontend/src/routes/_old/old/-components/ocp/LabelRatio.tsx
Normal file
27
frontend/src/routes/_old/old/-components/ocp/LabelRatio.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getlabelRatio } from "../../-utils/querys/ocp/labelRatio";
|
||||
import { labelRatioColumns } from "../../-utils/tableData/production/labelRatio/labelRatioColumns";
|
||||
import { LabelRatioTable } from "../../-utils/tableData/production/labelRatio/labelRatioData";
|
||||
|
||||
export default function LabelRatio() {
|
||||
const { data, isError, isLoading } = useQuery(getlabelRatio());
|
||||
|
||||
const ratioData = data ? data : [];
|
||||
if (isError) {
|
||||
return <div>Error</div>;
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return <div>Loading</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="m-2">
|
||||
<LabelRatioTable
|
||||
columns={labelRatioColumns}
|
||||
data={ratioData}
|
||||
//style={style}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
@@ -10,12 +10,11 @@ import {
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { useSessionStore } from "@/lib/store/sessionStore";
|
||||
import { useGetUserRoles } from "@/lib/store/useGetRoles";
|
||||
import { useModuleStore } from "@/lib/store/useModuleStore";
|
||||
import { useSettingStore } from "@/lib/store/useSettings";
|
||||
import { LotType } from "@/types/lots";
|
||||
import { getlots } from "@/utils/querys/production/lots";
|
||||
import { useAuth, userAccess } from "@/lib/authClient";
|
||||
import { useSettingStore } from "../../-lib/store/useSettings";
|
||||
import type { LotType } from "../../-types/lots";
|
||||
import { getlots } from "../../-utils/querys/ocp/lots";
|
||||
import { LstCard } from "../extendedUi/LstCard";
|
||||
import ManualPrint from "./ManualPrinting/ManualPrint";
|
||||
import ManualPrintForm from "./ManualPrinting/ManualPrintForm";
|
||||
|
||||
@@ -67,23 +66,20 @@ let lotColumns = [
|
||||
];
|
||||
export default function Lots() {
|
||||
const { data, isError, isLoading } = useQuery(getlots());
|
||||
const { user } = useSessionStore();
|
||||
const { session } = useAuth();
|
||||
const { settings } = useSettingStore();
|
||||
const { userRoles } = useGetUserRoles();
|
||||
const { modules } = useModuleStore();
|
||||
|
||||
const server = settings.filter((n) => n.name === "server")[0]?.value || "";
|
||||
|
||||
const roles = ["systemAdmin", "technician", "admin", "manager", "operator"];
|
||||
const server = settings.filter((n) => n.name === "dbServer")[0]?.value || "";
|
||||
const lotdata = data ? data : [];
|
||||
|
||||
const module = modules.filter((n) => n.name === "logistics");
|
||||
const accessRoles = userAccess("ocp", [
|
||||
"systemAdmin",
|
||||
"technician",
|
||||
"admin",
|
||||
"manager",
|
||||
]);
|
||||
|
||||
const accessRoles = userRoles.filter(
|
||||
(n: any) => n.module === module[0]?.name,
|
||||
) as any;
|
||||
|
||||
if (user && roles.includes(accessRoles[0]?.role)) {
|
||||
if (session?.user && accessRoles) {
|
||||
//width = 1280;
|
||||
const checkCol = lotColumns.some((l) => l.key === "printLabel");
|
||||
if (!checkCol) {
|
||||
@@ -230,7 +226,7 @@ export default function Lots() {
|
||||
<TableCell className="font-medium">
|
||||
{lot.overPrinting}
|
||||
</TableCell>
|
||||
{user && roles.includes(accessRoles[0]?.role) && (
|
||||
{session?.user && accessRoles && (
|
||||
<>
|
||||
{server === "usday1vms006" || server === "localhost" ? (
|
||||
<>
|
||||
@@ -0,0 +1,46 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
//import {useSettingStore} from "@/lib/store/useSettings";
|
||||
|
||||
import { Tag } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { useAuth } from "@/lib/authClient";
|
||||
import type { LotType } from "../../../-types/lots";
|
||||
import { manualPrintLabels } from "./ManualPrintLabel";
|
||||
|
||||
export default function ManualPrint({ lot }: { lot: LotType }) {
|
||||
const { session } = useAuth();
|
||||
const [printing, setPrinting] = useState(false);
|
||||
//const {settings} = useSettingStore();
|
||||
//const server = settings.filter((n) => n.name === "server")[0]?.value;
|
||||
//const serverPort = settings.filter((n) => n.name === "serverPort")[0]?.value;
|
||||
//const serverUrl = `http://${server}:${serverPort}`;
|
||||
|
||||
const handlePrintLabel = async (lot: LotType) => {
|
||||
const labels: any = await manualPrintLabels(lot, session?.user);
|
||||
|
||||
if (labels.success) {
|
||||
toast.success(labels.message);
|
||||
setTimeout(() => {
|
||||
setPrinting(false);
|
||||
}, 5 * 1000);
|
||||
setPrinting(true);
|
||||
} else {
|
||||
toast.error(labels.message);
|
||||
setTimeout(() => {
|
||||
setPrinting(false);
|
||||
}, 5 * 1000);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => handlePrintLabel(lot)}
|
||||
disabled={printing}
|
||||
>
|
||||
<Tag className="h-[16px] w-[16px]" />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,256 @@
|
||||
import axios from "axios";
|
||||
import { Tag } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
// DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useSettingStore } from "../../../-lib/store/useSettings";
|
||||
|
||||
const printReason = [
|
||||
{ key: "printerIssue", label: "Printer Related" },
|
||||
{ key: "missingRfidTag", label: "Missing or incorrect tag" },
|
||||
{ key: "rfidMissScan", label: "Missed Scan from RFID reader" },
|
||||
{ key: "strapper", label: "Strapper Error" },
|
||||
{ key: "manualCheck", label: "20th pallet check" },
|
||||
{ key: "outOfSync", label: "Labeler Out of Sync" },
|
||||
];
|
||||
|
||||
export default function ManualPrintForm() {
|
||||
const token = localStorage.getItem("auth_token");
|
||||
const { settings } = useSettingStore();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const server = settings.filter((n) => n.name === "server")[0]?.value;
|
||||
// const serverPort = settings.filter((n) => n.name === "serverPort")[0]?.value;
|
||||
// const serverUrl = `http://${server}:${serverPort}`;
|
||||
|
||||
// what is the dyco set to? rfid or dyco
|
||||
const dyco = settings.filter((n) => n.name === "dycoPrint");
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
//watch,
|
||||
formState: { errors },
|
||||
reset,
|
||||
control,
|
||||
} = useForm();
|
||||
|
||||
const handleManualPrintLog = async (logData: any) => {
|
||||
// toast.success(`A new label was sent to printer: ${lot.PrinterName} for line ${lot.MachineDescription} `);
|
||||
const logdataUrl = `/lst/old/api/ocp/manuallabellog`;
|
||||
setIsSubmitting(true);
|
||||
axios
|
||||
.post(logdataUrl, logData, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then((d) => {
|
||||
console.log(d);
|
||||
if (d.data.success) {
|
||||
toast.success(d.data.message);
|
||||
} else {
|
||||
toast.error(d.data.message);
|
||||
}
|
||||
reset();
|
||||
setOpen(false);
|
||||
setIsSubmitting(false);
|
||||
})
|
||||
.catch((e) => {
|
||||
if (e.response.status === 500) {
|
||||
toast.error(`Internal Server error please try again.`);
|
||||
setIsSubmitting(false);
|
||||
return { sucess: false };
|
||||
}
|
||||
|
||||
if (e.response.status === 401) {
|
||||
//console.log(e.response);
|
||||
toast.error(`You are not authorized to do this.`);
|
||||
setIsSubmitting(false);
|
||||
return { sucess: false };
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const onSubmit = (data: any) => {
|
||||
console.log(data);
|
||||
|
||||
handleManualPrintLog(data);
|
||||
};
|
||||
|
||||
const closeForm = () => {
|
||||
reset();
|
||||
setOpen(false);
|
||||
};
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={(isOpen) => {
|
||||
if (!open) {
|
||||
reset();
|
||||
}
|
||||
setOpen(isOpen);
|
||||
// toast.message("Model was something", {
|
||||
// description: isOpen ? "Modal is open" : "Modal is closed",
|
||||
// });
|
||||
}}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" size="icon">
|
||||
<Tag className="h-[16px] w-[16px]" />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Manual Print form</DialogTitle>
|
||||
{/* <DialogDescription>
|
||||
Make changes to your profile here. Click save when
|
||||
you're done.
|
||||
</DialogDescription> */}
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<p>
|
||||
To manually print a label you must complete all the required fields
|
||||
below.
|
||||
<br />
|
||||
If you clicked this in error just click close
|
||||
</p>
|
||||
<hr className="mt-2 mb-2" />
|
||||
{server == "usday1vms006" ? (
|
||||
<Controller
|
||||
control={control}
|
||||
name="printReason"
|
||||
defaultValue={""}
|
||||
render={({
|
||||
field: { onChange },
|
||||
fieldState: {},
|
||||
//formState,
|
||||
}) => (
|
||||
<Select onValueChange={onChange}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Select Reason" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Print Reasons</SelectLabel>
|
||||
{printReason.map((printReason: any) => (
|
||||
<SelectItem value={printReason.key}>
|
||||
{printReason.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<div className="m-2">
|
||||
<Label htmlFor="printRason" className="m-1">
|
||||
Why are you manually printing?
|
||||
</Label>
|
||||
<Input
|
||||
type="text"
|
||||
className={errors.printReason ? "border-red-500" : ""}
|
||||
aria-invalid={!!errors.printReason}
|
||||
{...register("printReason", {
|
||||
required: true,
|
||||
minLength: {
|
||||
value: 5,
|
||||
message: "To short of a reason please try again!",
|
||||
},
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="m-2">
|
||||
<Label htmlFor="line" className="m-1">
|
||||
"What is the line number you are printing?"
|
||||
</Label>
|
||||
<Input
|
||||
//variant="underlined"
|
||||
type="number"
|
||||
className={errors.line ? "border-red-500" : ""}
|
||||
aria-invalid={!!errors.line}
|
||||
{...register("line", { required: true })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="m-2">
|
||||
<Label htmlFor="initials" className="m-1">
|
||||
Enter intials
|
||||
</Label>
|
||||
<Input
|
||||
//variant="underlined"
|
||||
//label="Enter intials"
|
||||
|
||||
{...register("initials", { required: true })}
|
||||
/>
|
||||
</div>
|
||||
<hr />
|
||||
{dyco[0].value === "0" && (
|
||||
<div>
|
||||
<p>Enter the missing tag number.</p>
|
||||
<hr />
|
||||
<Label htmlFor="rfidTag" className="m-1">
|
||||
Enter the tag number only Example ALPLA000002541. only enter
|
||||
2541
|
||||
</Label>
|
||||
<Input
|
||||
type="text"
|
||||
className={errors.printReason ? "border-red-500" : ""}
|
||||
aria-invalid={!!errors.printReason}
|
||||
{...register("rfidTag", {
|
||||
required: true,
|
||||
minLength: {
|
||||
value: 1,
|
||||
message: "Tag number is to short!",
|
||||
},
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="m-2">
|
||||
<Textarea
|
||||
//label="Comments"
|
||||
placeholder="add more info as needed."
|
||||
{
|
||||
...register("additionalComments")
|
||||
// { required: true, minLength: 10 }
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<div className="mt-3">
|
||||
<Button color="danger" variant="default" onClick={closeForm}>
|
||||
Close
|
||||
</Button>
|
||||
<Button color="primary" type="submit" disabled={isSubmitting}>
|
||||
Print
|
||||
</Button>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import axios from "axios";
|
||||
import type { LotType } from "../../../-types/lots";
|
||||
|
||||
export const manualPrintLabels = async (lot: LotType, user: any) => {
|
||||
//console.log(lot);
|
||||
const labelUrl = `/lst/old/api/ocp/manualprintandfollow`;
|
||||
|
||||
try {
|
||||
const res = await axios.post(
|
||||
labelUrl,
|
||||
{ line: lot.MachineLocation, printerName: lot.PrinterName },
|
||||
{ headers: { Authorization: `Basic ${user?.prod}` } },
|
||||
);
|
||||
|
||||
if (res.data.success) {
|
||||
return {
|
||||
success: true,
|
||||
message: `A new label was printed for ${lot.MachineDescription} to printer: ${lot.PrinterName}`,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
success: false,
|
||||
message: `Line ${lot.MachineDescription} encountered an error printing labels: ${res.data.message}`,
|
||||
};
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error.response.status === 500) {
|
||||
//toast.error(`Internal Server error please try again.`);
|
||||
return {
|
||||
success: false,
|
||||
message: `Internal Server error please try again.`,
|
||||
};
|
||||
}
|
||||
|
||||
if (error.response.status === 401) {
|
||||
//console.log(e.response);
|
||||
//toast.error(`You are not authorized to do this.`);
|
||||
return {
|
||||
success: false,
|
||||
message: `You are not authorized to do this.`,
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
46
frontend/src/routes/_old/old/-components/ocp/OcpLogs.tsx
Normal file
46
frontend/src/routes/_old/old/-components/ocp/OcpLogs.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
|
||||
import { useMemo } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { getOcpLogs } from "../../-utils/querys/ocp/ocpLogs";
|
||||
import { ocpColumns } from "../../-utils/tableData/production/ocpLogs/ocpLogColumns";
|
||||
import { OcpLogTable } from "../../-utils/tableData/production/ocpLogs/ocpLogData";
|
||||
|
||||
export default function OcpLogs() {
|
||||
const { data, isError, isLoading } = useQuery(getOcpLogs("4"));
|
||||
|
||||
const clearLog = async (log: any) => {
|
||||
try {
|
||||
const res = await axios.patch(`/lst/old/api/logger/logs/${log.log_id}`);
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(`Log message: ${log.message}, was just cleared`);
|
||||
} else {
|
||||
console.log(res);
|
||||
toast.error(`There was an error clearing the message.`);
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error(`There was an error trying to clearing the message.`);
|
||||
}
|
||||
};
|
||||
const columns = useMemo(() => ocpColumns(clearLog), [clearLog]);
|
||||
const logData = data ? data : [];
|
||||
if (isError) {
|
||||
return <div>Error</div>;
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return <div>Loading</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="m-2">
|
||||
<OcpLogTable
|
||||
columns={columns}
|
||||
data={logData}
|
||||
//style={style}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
134
frontend/src/routes/_old/old/-components/ocp/OcpPage.tsx
Normal file
134
frontend/src/routes/_old/old/-components/ocp/OcpPage.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from "@/components/ui/resizable";
|
||||
import { useSettingStore } from "../../-lib/store/useSettings";
|
||||
import WrapperManualTrigger from "../ocme/WrapperCard";
|
||||
import LabelLog from "./LabelLog";
|
||||
import LabelRatio from "./LabelRatio";
|
||||
import Lots from "./Lots";
|
||||
import OcpLogs from "./OcpLogs";
|
||||
import PrinterStatus from "./PrinterStatus";
|
||||
|
||||
export default function OCPPage() {
|
||||
const { settings } = useSettingStore();
|
||||
|
||||
if (settings.length === 0) return;
|
||||
let token = settings.filter((n) => n.name === "plantToken");
|
||||
|
||||
return (
|
||||
<div className="ml-5 w-11/12 h-9/10">
|
||||
<ResizablePanelGroup
|
||||
direction="horizontal"
|
||||
//className="rounded-lg border"
|
||||
autoSaveId="ocpPage"
|
||||
>
|
||||
<ResizablePanel>
|
||||
<ResizablePanelGroup direction="vertical">
|
||||
<ResizablePanel
|
||||
style={{
|
||||
overflow: "auto",
|
||||
scrollbarWidth: "none",
|
||||
}}
|
||||
>
|
||||
<Lots />
|
||||
</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
<ResizablePanel>
|
||||
<ResizablePanelGroup direction="horizontal" autoSaveId="ocpPage">
|
||||
<ResizablePanel
|
||||
//className="text-sm p-4 overflow-scroll"
|
||||
style={{
|
||||
overflow: "auto",
|
||||
scrollbarWidth: "none",
|
||||
}}
|
||||
>
|
||||
<LabelLog />
|
||||
</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
<ResizablePanel
|
||||
style={{
|
||||
overflow: "auto",
|
||||
scrollbarWidth: "none",
|
||||
}}
|
||||
>
|
||||
<OcpLogs />
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
<ResizablePanel className="min-h-[200px] min-w-[200px] max-w-[450px]">
|
||||
<ResizablePanelGroup direction="vertical" autoSaveId="ocpPage_vert">
|
||||
{token[0].value === "usday1vms006" ||
|
||||
(location.pathname === "localhost" && (
|
||||
<ResizablePanel
|
||||
style={{
|
||||
overflow: "auto",
|
||||
scrollbarWidth: "none",
|
||||
}}
|
||||
defaultSize={50}
|
||||
className="min-h-[200px]"
|
||||
>
|
||||
<WrapperManualTrigger />
|
||||
</ResizablePanel>
|
||||
))}
|
||||
|
||||
<ResizableHandle />
|
||||
<ResizablePanel>
|
||||
<PrinterStatus />
|
||||
<LabelRatio />
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
);
|
||||
// return (
|
||||
// <div className="h-screen w-full ">
|
||||
// <div className="flex flex-row gap-2">
|
||||
// <div className="flex flex-col w-4/5 h-dvh">
|
||||
// <div className="">
|
||||
// <Lots />
|
||||
// </div>
|
||||
|
||||
// <div className="w-5/6 h-1/2">
|
||||
// <Tabs defaultValue="ocplogs" className="w-full">
|
||||
// <TabsList className="grid w-full grid-cols-2">
|
||||
// <TabsTrigger value="ocplogs">
|
||||
// OcpLogs
|
||||
// </TabsTrigger>
|
||||
// <TabsTrigger value="labels">Labels</TabsTrigger>
|
||||
// </TabsList>
|
||||
// <TabsContent value="ocplogs">
|
||||
// <div className="w-full">
|
||||
// <OcpLogs />
|
||||
// </div>
|
||||
// </TabsContent>
|
||||
// <TabsContent value="labels">
|
||||
// <LabelLog />
|
||||
// </TabsContent>
|
||||
// </Tabs>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div className="flex flex-col">
|
||||
// {server[0].value === "usday1vms006" && (
|
||||
// <div>
|
||||
// <WrapperManualTrigger />
|
||||
// </div>
|
||||
// )}
|
||||
// {server[0].value === "localhost" && (
|
||||
// <div>
|
||||
// <WrapperManualTrigger />
|
||||
// </div>
|
||||
// )}
|
||||
// <div>
|
||||
// <PrinterStatus />
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
}
|
||||
114
frontend/src/routes/_old/old/-components/ocp/PrinterStatus.tsx
Normal file
114
frontend/src/routes/_old/old/-components/ocp/PrinterStatus.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { getPrinters } from "../../-utils/querys/ocp/printers";
|
||||
import { LstCard } from "../extendedUi/LstCard";
|
||||
|
||||
let printerCols = [
|
||||
{
|
||||
key: "printer",
|
||||
label: "Printer",
|
||||
},
|
||||
{
|
||||
key: "statusMessage",
|
||||
label: "Status Message",
|
||||
},
|
||||
];
|
||||
export default function PrinterStatus() {
|
||||
const { data, isError, isLoading } = useQuery(getPrinters());
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<ScrollArea className="h-[400px]">
|
||||
<p className="text-center">Printer Staus error</p>
|
||||
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{printerCols.map((l) => (
|
||||
<TableHead key={l.key}>{l.label}</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{Array(5)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell className="font-medium">
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* only show the assigned printers
|
||||
*/
|
||||
|
||||
const assigned = data?.filter((a: any) => a.assigned) || [];
|
||||
return (
|
||||
<LstCard className="m-2 p-2">
|
||||
<ScrollArea className="max-h-[800px]">
|
||||
<p className="text-center">
|
||||
{isLoading ? (
|
||||
<span>Printers status loading...</span>
|
||||
) : (
|
||||
<span>Printer Status</span>
|
||||
)}
|
||||
</p>
|
||||
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{printerCols.map((l) => (
|
||||
<TableHead key={l.key}>{l.label}</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
{isLoading ? (
|
||||
<TableBody>
|
||||
{Array(5)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell className="font-medium">
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
) : (
|
||||
<TableBody>
|
||||
{assigned?.map((p: any) => (
|
||||
<TableRow key={p.printer_id}>
|
||||
<TableCell>{p.name}</TableCell>
|
||||
<TableCell>{p.statusText}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
)}
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
</LstCard>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import axios from "axios";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export default function ManualTrigger() {
|
||||
const rfidReaderTrigger = async () => {
|
||||
try {
|
||||
const res = await axios.post("/lst/old/api/rfid/manualtrigger/wrapper1");
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(res.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
//stoast.success(error.data.message);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<Button onClick={rfidReaderTrigger}>Wrapper 1 RFID</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { queryOptions } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
|
||||
export function getOcmeInfo() {
|
||||
return queryOptions({
|
||||
queryKey: ["ocmeInfo"],
|
||||
queryFn: () => fetchSettings(),
|
||||
staleTime: 1000,
|
||||
refetchInterval: 2 * 2000,
|
||||
refetchOnWindowFocus: true,
|
||||
});
|
||||
}
|
||||
|
||||
const fetchSettings = async () => {
|
||||
const { data } = await axios.get(`/lst/old/ocme/api/v1/getInfo`);
|
||||
// if we are not localhost ignore the devDir setting.
|
||||
//const url: string = window.location.host.split(":")[0];
|
||||
return data.data ?? [];
|
||||
};
|
||||
@@ -0,0 +1,20 @@
|
||||
import { queryOptions } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
|
||||
export function getlabelRatio() {
|
||||
return queryOptions({
|
||||
queryKey: ["labelRatio"],
|
||||
queryFn: () => fetchSettings(),
|
||||
|
||||
//staleTime: 1000,
|
||||
refetchInterval: 2 * 2000,
|
||||
refetchOnWindowFocus: true,
|
||||
});
|
||||
}
|
||||
|
||||
const fetchSettings = async () => {
|
||||
const { data } = await axios.get(`/lst/old/api/ocp/labelratio`);
|
||||
// if we are not localhost ignore the devDir setting.
|
||||
//const url: string = window.location.host.split(":")[0];
|
||||
return data.data ?? [];
|
||||
};
|
||||
20
frontend/src/routes/_old/old/-utils/querys/ocp/labels.tsx
Normal file
20
frontend/src/routes/_old/old/-utils/querys/ocp/labels.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import { queryOptions } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
|
||||
export function getlabels(hours: string) {
|
||||
return queryOptions({
|
||||
queryKey: ["labels"],
|
||||
queryFn: () => fetchSettings(hours),
|
||||
|
||||
//staleTime: 1000,
|
||||
refetchInterval: 2 * 2000,
|
||||
refetchOnWindowFocus: true,
|
||||
});
|
||||
}
|
||||
|
||||
const fetchSettings = async (hours: string) => {
|
||||
const { data } = await axios.get(`/lst/old/api/ocp/getlabels?hours=${hours}`);
|
||||
// if we are not localhost ignore the devDir setting.
|
||||
//const url: string = window.location.host.split(":")[0];
|
||||
return data.data ?? [];
|
||||
};
|
||||
21
frontend/src/routes/_old/old/-utils/querys/ocp/lots.tsx
Normal file
21
frontend/src/routes/_old/old/-utils/querys/ocp/lots.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import { queryOptions } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
|
||||
export function getlots() {
|
||||
return queryOptions({
|
||||
queryKey: ["lots"],
|
||||
queryFn: () => fetchSettings(),
|
||||
|
||||
staleTime: 10 * 1000,
|
||||
refetchInterval: 1000 * 10,
|
||||
refetchOnWindowFocus: true,
|
||||
});
|
||||
}
|
||||
|
||||
const fetchSettings = async () => {
|
||||
const { data } = await axios.get("/lst/old/api/ocp/getlots");
|
||||
// if we are not localhost ignore the devDir setting.
|
||||
//const url: string = window.location.host.split(":")[0];
|
||||
let lotData = data.data;
|
||||
return lotData ?? [];
|
||||
};
|
||||
22
frontend/src/routes/_old/old/-utils/querys/ocp/ocpLogs.tsx
Normal file
22
frontend/src/routes/_old/old/-utils/querys/ocp/ocpLogs.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import { queryOptions } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
|
||||
export function getOcpLogs(hours: string) {
|
||||
return queryOptions({
|
||||
queryKey: ["ocpLogs"],
|
||||
queryFn: () => fetchSettings(hours),
|
||||
|
||||
staleTime: 1000,
|
||||
refetchInterval: 2 * 1000,
|
||||
refetchOnWindowFocus: true,
|
||||
});
|
||||
}
|
||||
|
||||
const fetchSettings = async (hours: string) => {
|
||||
const { data } = await axios.get(
|
||||
`/lst/old/api/logger/logs?service=ocp&service=rfid&service=dyco&level=error&level=warn&hours=${hours}`,
|
||||
);
|
||||
// if we are not localhost ignore the devDir setting.
|
||||
//const url: string = window.location.host.split(":")[0];
|
||||
return data.data ?? [];
|
||||
};
|
||||
20
frontend/src/routes/_old/old/-utils/querys/ocp/printers.tsx
Normal file
20
frontend/src/routes/_old/old/-utils/querys/ocp/printers.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import { queryOptions } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
|
||||
export function getPrinters() {
|
||||
return queryOptions({
|
||||
queryKey: ["printers"],
|
||||
queryFn: () => fetchSettings(),
|
||||
|
||||
staleTime: 1000,
|
||||
refetchInterval: 2 * 2000,
|
||||
refetchOnWindowFocus: true,
|
||||
});
|
||||
}
|
||||
|
||||
const fetchSettings = async () => {
|
||||
const { data } = await axios.get(`/lst/old/api/ocp/getprinters`);
|
||||
// if we are not localhost ignore the devDir setting.
|
||||
//const url: string = window.location.host.split(":")[0];
|
||||
return data.data ?? [];
|
||||
};
|
||||
@@ -1,19 +0,0 @@
|
||||
import { queryOptions } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
|
||||
export function getOcmeInfo() {
|
||||
return queryOptions({
|
||||
queryKey: ["ocmeInfo"],
|
||||
queryFn: () => fetchSettings(),
|
||||
staleTime: 1000,
|
||||
refetchInterval: 2 * 2000,
|
||||
refetchOnWindowFocus: true,
|
||||
});
|
||||
}
|
||||
|
||||
const fetchSettings = async () => {
|
||||
const { data } = await axios.get(`/ocme/api/v1/getInfo`);
|
||||
// if we are not localhost ignore the devDir setting.
|
||||
//const url: string = window.location.host.split(":")[0];
|
||||
return data.data ?? [];
|
||||
};
|
||||
@@ -1,20 +0,0 @@
|
||||
import { queryOptions } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
|
||||
export function getlabelRatio() {
|
||||
return queryOptions({
|
||||
queryKey: ["labelRatio"],
|
||||
queryFn: () => fetchSettings(),
|
||||
|
||||
//staleTime: 1000,
|
||||
refetchInterval: 2 * 2000,
|
||||
refetchOnWindowFocus: true,
|
||||
});
|
||||
}
|
||||
|
||||
const fetchSettings = async () => {
|
||||
const { data } = await axios.get(`/api/ocp/labelratio`);
|
||||
// if we are not localhost ignore the devDir setting.
|
||||
//const url: string = window.location.host.split(":")[0];
|
||||
return data.data ?? [];
|
||||
};
|
||||
@@ -1,20 +0,0 @@
|
||||
import { queryOptions } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
|
||||
export function getlabels(hours: string) {
|
||||
return queryOptions({
|
||||
queryKey: ["labels"],
|
||||
queryFn: () => fetchSettings(hours),
|
||||
|
||||
//staleTime: 1000,
|
||||
refetchInterval: 2 * 2000,
|
||||
refetchOnWindowFocus: true,
|
||||
});
|
||||
}
|
||||
|
||||
const fetchSettings = async (hours: string) => {
|
||||
const { data } = await axios.get(`/api/ocp/getlabels?hours=${hours}`);
|
||||
// if we are not localhost ignore the devDir setting.
|
||||
//const url: string = window.location.host.split(":")[0];
|
||||
return data.data ?? [];
|
||||
};
|
||||
@@ -1,21 +0,0 @@
|
||||
import { queryOptions } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
|
||||
export function getlots() {
|
||||
return queryOptions({
|
||||
queryKey: ["lots"],
|
||||
queryFn: () => fetchSettings(),
|
||||
|
||||
staleTime: 10 * 1000,
|
||||
refetchInterval: 1000 * 10,
|
||||
refetchOnWindowFocus: true,
|
||||
});
|
||||
}
|
||||
|
||||
const fetchSettings = async () => {
|
||||
const { data } = await axios.get("/api/ocp/getlots");
|
||||
// if we are not localhost ignore the devDir setting.
|
||||
//const url: string = window.location.host.split(":")[0];
|
||||
let lotData = data.data;
|
||||
return lotData ?? [];
|
||||
};
|
||||
@@ -1,22 +0,0 @@
|
||||
import { queryOptions } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
|
||||
export function getOcpLogs(hours: string) {
|
||||
return queryOptions({
|
||||
queryKey: ["ocpLogs"],
|
||||
queryFn: () => fetchSettings(hours),
|
||||
|
||||
staleTime: 1000,
|
||||
refetchInterval: 2 * 1000,
|
||||
refetchOnWindowFocus: true,
|
||||
});
|
||||
}
|
||||
|
||||
const fetchSettings = async (hours: string) => {
|
||||
const { data } = await axios.get(
|
||||
`/api/logger/logs?service=ocp&service=rfid&service=dyco&level=error&level=warn&hours=${hours}`
|
||||
);
|
||||
// if we are not localhost ignore the devDir setting.
|
||||
//const url: string = window.location.host.split(":")[0];
|
||||
return data.data ?? [];
|
||||
};
|
||||
@@ -1,20 +0,0 @@
|
||||
import { queryOptions } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
|
||||
export function getPrinters() {
|
||||
return queryOptions({
|
||||
queryKey: ["printers"],
|
||||
queryFn: () => fetchSettings(),
|
||||
|
||||
staleTime: 1000,
|
||||
refetchInterval: 2 * 2000,
|
||||
refetchOnWindowFocus: true,
|
||||
});
|
||||
}
|
||||
|
||||
const fetchSettings = async () => {
|
||||
const { data } = await axios.get(`/api/ocp/getprinters`);
|
||||
// if we are not localhost ignore the devDir setting.
|
||||
//const url: string = window.location.host.split(":")[0];
|
||||
return data.data ?? [];
|
||||
};
|
||||
@@ -13,7 +13,7 @@ export function getReaders() {
|
||||
}
|
||||
|
||||
const fetchReaders = async () => {
|
||||
const { data } = await axios.get(`/api/rfid/getreaders`);
|
||||
const { data } = await axios.get(`/lst/old/api/rfid/getreaders`);
|
||||
// if we are not localhost ignore the devDir setting.
|
||||
//const url: string = window.location.host.split(":")[0];
|
||||
return data.data ?? [];
|
||||
|
||||
14
frontend/src/routes/_old/old/ocp/index.tsx
Normal file
14
frontend/src/routes/_old/old/ocp/index.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import OCPPage from "../-components/ocp/OcpPage";
|
||||
|
||||
export const Route = createFileRoute("/_old/old/ocp/")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return (
|
||||
<div className="h-dvh w-dvw">
|
||||
<OCPPage />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -29,7 +29,7 @@ function RouteComponent() {
|
||||
const { session } = useAuth();
|
||||
const logout = useLogout();
|
||||
//const { settings } = useSettingStore();
|
||||
console.log(location.pathname);
|
||||
//console.log(location.pathname);
|
||||
return (
|
||||
<div>
|
||||
<nav className="flex justify-end w-full shadow ">
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
],
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
|
||||
@@ -1,31 +0,0 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import axios from "axios";
|
||||
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function ManualTrigger() {
|
||||
const rfidReaderTrigger = async () => {
|
||||
try {
|
||||
const res = await axios.post("/api/rfid/manualtrigger/wrapper1");
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(res.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
//stoast.success(error.data.message);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<Button onClick={rfidReaderTrigger}>Wrapper 1 RFID</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,106 +0,0 @@
|
||||
import { useForm } from "@tanstack/react-form";
|
||||
import { Input } from "../ui/input";
|
||||
import { Label } from "../ui/label";
|
||||
import axios from "axios";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "../ui/button";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ManuallyEnterRn() {
|
||||
const [sending, setSendingRn] = useState(false);
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
runningNr: "",
|
||||
},
|
||||
onSubmit: async ({ value }) => {
|
||||
console.log(value);
|
||||
setSendingRn(true);
|
||||
try {
|
||||
const res = await axios.post("/ocme/api/v1/postRunningNumber", {
|
||||
runningNr: value.runningNr,
|
||||
areaFrom: "wrapper_1",
|
||||
completed: true,
|
||||
});
|
||||
|
||||
if (res.data.success) {
|
||||
form.reset();
|
||||
toast.success(
|
||||
`${value.runningNr} was just created please login`
|
||||
);
|
||||
setTimeout(() => {
|
||||
setSendingRn(false);
|
||||
}, 3 * 1000);
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(res.data.message);
|
||||
setTimeout(() => {
|
||||
setSendingRn(false);
|
||||
}, 3 * 1000);
|
||||
}
|
||||
} catch (error) {
|
||||
//console.log(error);
|
||||
toast.error("There was an error registering");
|
||||
setTimeout(() => {
|
||||
setSendingRn(false);
|
||||
}, 3 * 1000);
|
||||
}
|
||||
},
|
||||
});
|
||||
return (
|
||||
<div>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
//e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<form.Field
|
||||
name="runningNr"
|
||||
validators={{
|
||||
// We can choose between form-wide and field-specific validators
|
||||
onChange: ({ value }) =>
|
||||
value.length > 3
|
||||
? undefined
|
||||
: "pallet number must be greater than 4 numbers",
|
||||
}}
|
||||
children={(field) => {
|
||||
return (
|
||||
<div className="m-2 min-w-48 max-w-96 p-2 flex flex-row">
|
||||
<div>
|
||||
<Label htmlFor="runningNr" className="mb-2">
|
||||
Running Number
|
||||
</Label>
|
||||
<Input
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
type="number"
|
||||
onChange={(e) =>
|
||||
field.handleChange(e.target.value)
|
||||
}
|
||||
/>
|
||||
{field.state.meta.errors.length ? (
|
||||
<em>
|
||||
{field.state.meta.errors.join(",")}
|
||||
</em>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="ml-1 mt-5">
|
||||
<Button
|
||||
className="ml-1"
|
||||
type="submit"
|
||||
onClick={form.handleSubmit}
|
||||
disabled={sending}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,172 +0,0 @@
|
||||
import axios from "axios";
|
||||
import { LstCard } from "../extendedUI/LstCard";
|
||||
import { Button } from "../ui/button";
|
||||
import { ScrollArea } from "../ui/scroll-area";
|
||||
import { Skeleton } from "../ui/skeleton";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "../ui/table";
|
||||
import { toast } from "sonner";
|
||||
import { getOcmeInfo } from "@/utils/querys/production/getOcmeInfo";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { format } from "date-fns";
|
||||
import { Trash } from "lucide-react";
|
||||
import ManualTrigger from "../logistics/rfid/ManualTrigger";
|
||||
|
||||
const currentPallets = [
|
||||
{ key: "line", label: "Line" },
|
||||
{ key: "runningNumber", label: "Running #" },
|
||||
{ key: "upd_date", label: "Date Scanned" },
|
||||
{ key: "waitingfor", label: "Waiting For" },
|
||||
{ key: "clear", label: "Clear" },
|
||||
];
|
||||
|
||||
// const currentTags = [
|
||||
// { key: "line", label: "Line" },
|
||||
// { key: "printerName", label: "Printer" },
|
||||
// { key: "runningNr", label: "Running #" },
|
||||
// { key: "upd_date", label: "Label date" },
|
||||
// { key: "status", label: "Label Status" },
|
||||
// ];
|
||||
export default function WrapperManualTrigger() {
|
||||
const { data, isError, isLoading } = useQuery(getOcmeInfo());
|
||||
const cameraTrigger = async () => {
|
||||
try {
|
||||
const res = await axios.get("/ocme/api/v1/manualCameraTrigger");
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(res.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
//stoast.success(error.data.message);
|
||||
}
|
||||
};
|
||||
|
||||
const clearLabel = async (d: any) => {
|
||||
const data = {
|
||||
runningNr: d.runningNr,
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await axios.patch("/ocme/api/v1/pickedUp", data);
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(
|
||||
`${d.runningNr} was just removed from being picked up.`
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.error(res.data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
//stoast.success(error.data.message);
|
||||
}
|
||||
};
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<div>
|
||||
<p className="text-center text-pretty">
|
||||
There was an error getting wrapper scans
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const info = data?.filter((r: any) => r.areaFrom === "wrapper_1");
|
||||
return (
|
||||
<LstCard className="m-2 p-2 w-auto">
|
||||
<ScrollArea className="max-h-[200px]">
|
||||
<span>Wrapper Pallet Info</span>
|
||||
<div>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{currentPallets.map((l) => (
|
||||
<TableHead key={l.key}>{l.label}</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
{isLoading ? (
|
||||
<TableBody>
|
||||
{Array(3)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell className="font-medium">
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
) : (
|
||||
<TableBody>
|
||||
{info.map((i: any) => (
|
||||
<TableRow key={i.runningNr}>
|
||||
<TableCell className="font-medium">
|
||||
{i.lineNum}
|
||||
</TableCell>
|
||||
<TableCell>{i.runningNr}</TableCell>
|
||||
<TableCell>
|
||||
{format(
|
||||
i?.upd_date.replace("Z", ""),
|
||||
"M/d/yyyy hh:mm"
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>{i.waitingFor}</TableCell>
|
||||
<TableCell>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="icon"
|
||||
onClick={() => clearLabel(i)}
|
||||
>
|
||||
<Trash />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
)}
|
||||
</Table>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
<div>
|
||||
<hr />
|
||||
{/* <p className="text-center mb-3">Manual Trigger</p>
|
||||
<ManuallyEnterRn />
|
||||
<Separator className="m-1" /> */}
|
||||
<div className="flex flex-row justify-between m-2">
|
||||
<Button onClick={cameraTrigger}>Camera</Button>
|
||||
<ManualTrigger />
|
||||
</div>
|
||||
</div>
|
||||
</LstCard>
|
||||
);
|
||||
}
|
||||
@@ -1,260 +0,0 @@
|
||||
import { toast } from "sonner";
|
||||
import { LstCard } from "../extendedUI/LstCard";
|
||||
import { Button } from "../ui/button";
|
||||
import { Input } from "../ui/input";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "../ui/table";
|
||||
import { Skeleton } from "../ui/skeleton";
|
||||
//import CycleCountLog from "./CycleCountLog";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "../ui/select";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import axios from "axios";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function OcmeCycleCount() {
|
||||
const token = localStorage.getItem("auth_token");
|
||||
const [data, setData] = useState([]);
|
||||
const [counting, setCounting] = useState(false);
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
//watch,
|
||||
formState: { errors },
|
||||
reset,
|
||||
control,
|
||||
} = useForm({
|
||||
defaultValues: {
|
||||
lane: "",
|
||||
laneType: "name",
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (data: any) => {
|
||||
setData([]);
|
||||
setCounting(true);
|
||||
|
||||
if (data.laneType === "") {
|
||||
toast.error("Please select a type");
|
||||
setCounting(false);
|
||||
return;
|
||||
}
|
||||
toast.success(`Cycle count started`);
|
||||
try {
|
||||
const res = await axios.post("/ocme/api/v1/cycleCount", data, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
setData(res.data.data);
|
||||
setCounting(false);
|
||||
reset();
|
||||
}
|
||||
|
||||
if (!res.data.success) {
|
||||
toast.success(res.data.message);
|
||||
|
||||
setCounting(false);
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error("There was an error cycle counting");
|
||||
setCounting(false);
|
||||
reset();
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="flex flex-row w-screen">
|
||||
<div className="m-2 w-5/6">
|
||||
<LstCard>
|
||||
<p className="ml-2">
|
||||
Please enter the name or laneID you want to cycle count.
|
||||
</p>
|
||||
<div>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="flex justify-between">
|
||||
<div className="m-2 flex flex-row">
|
||||
<Input
|
||||
placeholder="enter lane: L064"
|
||||
className={
|
||||
errors.lane ? "border-red-500" : ""
|
||||
}
|
||||
aria-invalid={!!errors.lane}
|
||||
{...register("lane", {
|
||||
required: true,
|
||||
minLength: {
|
||||
value: 3,
|
||||
message:
|
||||
"The lane is too short!",
|
||||
},
|
||||
})}
|
||||
/>
|
||||
<div className="ml-2">
|
||||
<Controller
|
||||
control={control}
|
||||
name="laneType"
|
||||
render={({
|
||||
field: { onChange },
|
||||
fieldState: {},
|
||||
//formState,
|
||||
}) => (
|
||||
<Select
|
||||
onValueChange={onChange}
|
||||
>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Select name or id" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="name">
|
||||
Name
|
||||
</SelectItem>
|
||||
<SelectItem value="laneID">
|
||||
Lane ID
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
className="m-2"
|
||||
type="submit"
|
||||
disabled={counting}
|
||||
>
|
||||
{counting ? (
|
||||
<span>Counting...</span>
|
||||
) : (
|
||||
<span>CycleCount</span>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>LaneID</TableHead>
|
||||
<TableHead>Lane</TableHead>
|
||||
<TableHead>AV</TableHead>
|
||||
<TableHead>Description</TableHead>
|
||||
<TableHead>Running Number</TableHead>
|
||||
<TableHead>In Ocme</TableHead>
|
||||
<TableHead>In Stock</TableHead>
|
||||
<TableHead>Result</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
{data?.length === 0 ? (
|
||||
<TableBody>
|
||||
{Array(10)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell className="font-medium">
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
) : (
|
||||
<>
|
||||
{data.map((i: any) => {
|
||||
let classname = ``;
|
||||
if (
|
||||
i.info === "Validate pallet is ok."
|
||||
) {
|
||||
classname = `bg-red-500`;
|
||||
}
|
||||
if (i.info === "Sent to Inv") {
|
||||
classname = `bg-amber-700`;
|
||||
}
|
||||
return (
|
||||
<TableRow key={i.runningNumber}>
|
||||
<TableCell
|
||||
className={`font-medium ${classname}`}
|
||||
>
|
||||
{i.alpla_laneID}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={`font-medium ${classname}`}
|
||||
>
|
||||
{i.alpla_laneDescription}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={`font-medium ${classname}`}
|
||||
>
|
||||
{i.Article}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={`font-medium ${classname}`}
|
||||
>
|
||||
{i.alpla_laneDescription}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={`font-medium ${classname}`}
|
||||
>
|
||||
{i.runningNumber}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={`font-medium ${classname}`}
|
||||
>
|
||||
{i.ocme}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={`font-medium ${classname}`}
|
||||
>
|
||||
{i.stock}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className={`font-medium ${classname}`}
|
||||
>
|
||||
{i.info}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</Table>
|
||||
</div>
|
||||
</LstCard>
|
||||
</div>
|
||||
{/* <div className="m-2">
|
||||
<CycleCountLog />
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
// import {useSessionStore} from "@/lib/store/sessionStore";
|
||||
// import {useSettingStore} from "@/lib/store/useSettings";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { getlabels } from "@/utils/querys/production/labels";
|
||||
|
||||
import { LabelTable } from "@/utils/tableData/production/labels/labelData";
|
||||
import { labelolumns } from "@/utils/tableData/production/labels/labelColumns";
|
||||
|
||||
export default function LabelLog() {
|
||||
const { data, isError, isLoading } = useQuery(getlabels("4"));
|
||||
|
||||
if (isError) return <div>Error</div>;
|
||||
|
||||
if (isLoading) return <div>Loading</div>;
|
||||
const labelData = data ? data : [];
|
||||
return (
|
||||
<div className="m-2">
|
||||
<LabelTable
|
||||
columns={labelolumns}
|
||||
data={labelData}
|
||||
//style={style}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import { getlabelRatio } from "@/utils/querys/production/labelRatio";
|
||||
import { labelRatioColumns } from "@/utils/tableData/production/labelRatio/labelRatioColumns";
|
||||
import { LabelRatioTable } from "@/utils/tableData/production/labelRatio/labelRatioData";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
export default function LabelRatio() {
|
||||
const { data, isError, isLoading } = useQuery(getlabelRatio());
|
||||
|
||||
const ratioData = data ? data : [];
|
||||
if (isError) {
|
||||
return <div>Error</div>;
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return <div>Loading</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="m-2">
|
||||
<LabelRatioTable
|
||||
columns={labelRatioColumns}
|
||||
data={ratioData}
|
||||
//style={style}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useSessionStore } from "@/lib/store/sessionStore";
|
||||
//import {useSettingStore} from "@/lib/store/useSettings";
|
||||
import { LotType } from "@/types/lots";
|
||||
import { Tag } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { manualPrintLabels } from "./ManualPrintLabel";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function ManualPrint({ lot }: { lot: LotType }) {
|
||||
const { user } = useSessionStore();
|
||||
const [printing, setPrinting] = useState(false);
|
||||
//const {settings} = useSettingStore();
|
||||
//const server = settings.filter((n) => n.name === "server")[0]?.value;
|
||||
//const serverPort = settings.filter((n) => n.name === "serverPort")[0]?.value;
|
||||
//const serverUrl = `http://${server}:${serverPort}`;
|
||||
|
||||
const handlePrintLabel = async (lot: LotType) => {
|
||||
const labels: any = await manualPrintLabels(lot, user);
|
||||
|
||||
if (labels.success) {
|
||||
toast.success(labels.message);
|
||||
setTimeout(() => {
|
||||
setPrinting(false);
|
||||
}, 5 * 1000);
|
||||
setPrinting(true);
|
||||
} else {
|
||||
toast.error(labels.message);
|
||||
setTimeout(() => {
|
||||
setPrinting(false);
|
||||
}, 5 * 1000);
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => handlePrintLabel(lot)}
|
||||
disabled={printing}
|
||||
>
|
||||
<Tag className="h-[16px] w-[16px]" />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
@@ -1,275 +0,0 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
// DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useSettingStore } from "@/lib/store/useSettings";
|
||||
import axios from "axios";
|
||||
import { Tag } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
|
||||
const printReason = [
|
||||
{ key: "printerIssue", label: "Printer Related" },
|
||||
{ key: "missingRfidTag", label: "Missing or incorrect tag" },
|
||||
{ key: "rfidMissScan", label: "Missed Scan from RFID reader" },
|
||||
{ key: "strapper", label: "Strapper Error" },
|
||||
{ key: "manualCheck", label: "20th pallet check" },
|
||||
{ key: "outOfSync", label: "Labeler Out of Sync" },
|
||||
];
|
||||
|
||||
export default function ManualPrintForm() {
|
||||
const token = localStorage.getItem("auth_token");
|
||||
const { settings } = useSettingStore();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const server = settings.filter((n) => n.name === "server")[0]?.value;
|
||||
// const serverPort = settings.filter((n) => n.name === "serverPort")[0]?.value;
|
||||
// const serverUrl = `http://${server}:${serverPort}`;
|
||||
|
||||
// what is the dyco set to? rfid or dyco
|
||||
const dyco = settings.filter((n) => n.name === "dycoPrint");
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
//watch,
|
||||
formState: { errors },
|
||||
reset,
|
||||
control,
|
||||
} = useForm();
|
||||
|
||||
const handleManualPrintLog = async (logData: any) => {
|
||||
// toast.success(`A new label was sent to printer: ${lot.PrinterName} for line ${lot.MachineDescription} `);
|
||||
const logdataUrl = `/api/ocp/manuallabellog`;
|
||||
setIsSubmitting(true);
|
||||
axios
|
||||
.post(logdataUrl, logData, {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
})
|
||||
.then((d) => {
|
||||
console.log(d);
|
||||
if (d.data.success) {
|
||||
toast.success(d.data.message);
|
||||
} else {
|
||||
toast.error(d.data.message);
|
||||
}
|
||||
reset();
|
||||
setOpen(false);
|
||||
setIsSubmitting(false);
|
||||
})
|
||||
.catch((e) => {
|
||||
if (e.response.status === 500) {
|
||||
toast.error(`Internal Server error please try again.`);
|
||||
setIsSubmitting(false);
|
||||
return { sucess: false };
|
||||
}
|
||||
|
||||
if (e.response.status === 401) {
|
||||
//console.log(e.response);
|
||||
toast.error(`You are not authorized to do this.`);
|
||||
setIsSubmitting(false);
|
||||
return { sucess: false };
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const onSubmit = (data: any) => {
|
||||
console.log(data);
|
||||
|
||||
handleManualPrintLog(data);
|
||||
};
|
||||
|
||||
const closeForm = () => {
|
||||
reset();
|
||||
setOpen(false);
|
||||
};
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={(isOpen) => {
|
||||
if (!open) {
|
||||
reset();
|
||||
}
|
||||
setOpen(isOpen);
|
||||
// toast.message("Model was something", {
|
||||
// description: isOpen ? "Modal is open" : "Modal is closed",
|
||||
// });
|
||||
}}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" size="icon">
|
||||
<Tag className="h-[16px] w-[16px]" />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Manual Print form</DialogTitle>
|
||||
{/* <DialogDescription>
|
||||
Make changes to your profile here. Click save when
|
||||
you're done.
|
||||
</DialogDescription> */}
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<p>
|
||||
To manually print a label you must complete all the
|
||||
required fields below.
|
||||
<br />
|
||||
If you clicked this in error just click close
|
||||
</p>
|
||||
<hr className="mt-2 mb-2" />
|
||||
{server == "usday1vms006" ? (
|
||||
<Controller
|
||||
control={control}
|
||||
name="printReason"
|
||||
defaultValue={""}
|
||||
render={({
|
||||
field: { onChange },
|
||||
fieldState: {},
|
||||
//formState,
|
||||
}) => (
|
||||
<Select onValueChange={onChange}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Select Reason" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>
|
||||
Print Reasons
|
||||
</SelectLabel>
|
||||
{printReason.map(
|
||||
(printReason: any) => (
|
||||
<SelectItem
|
||||
value={printReason.key}
|
||||
>
|
||||
{printReason.label}
|
||||
</SelectItem>
|
||||
)
|
||||
)}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<div className="m-2">
|
||||
<Label htmlFor="printRason" className="m-1">
|
||||
Why are you manually printing?
|
||||
</Label>
|
||||
<Input
|
||||
type="text"
|
||||
className={
|
||||
errors.printReason ? "border-red-500" : ""
|
||||
}
|
||||
aria-invalid={!!errors.printReason}
|
||||
{...register("printReason", {
|
||||
required: true,
|
||||
minLength: {
|
||||
value: 5,
|
||||
message:
|
||||
"To short of a reason please try again!",
|
||||
},
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="m-2">
|
||||
<Label htmlFor="line" className="m-1">
|
||||
"What is the line number you are printing?"
|
||||
</Label>
|
||||
<Input
|
||||
//variant="underlined"
|
||||
type="number"
|
||||
className={errors.line ? "border-red-500" : ""}
|
||||
aria-invalid={!!errors.line}
|
||||
{...register("line", { required: true })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="m-2">
|
||||
<Label htmlFor="initials" className="m-1">
|
||||
Enter intials
|
||||
</Label>
|
||||
<Input
|
||||
//variant="underlined"
|
||||
//label="Enter intials"
|
||||
|
||||
{...register("initials", { required: true })}
|
||||
/>
|
||||
</div>
|
||||
<hr />
|
||||
{dyco[0].value === "0" && (
|
||||
<div>
|
||||
<p>Enter the missing tag number.</p>
|
||||
<hr />
|
||||
<Label htmlFor="rfidTag" className="m-1">
|
||||
Enter the tag number only Example
|
||||
ALPLA000002541. only enter 2541
|
||||
</Label>
|
||||
<Input
|
||||
type="text"
|
||||
className={
|
||||
errors.printReason ? "border-red-500" : ""
|
||||
}
|
||||
aria-invalid={!!errors.printReason}
|
||||
{...register("rfidTag", {
|
||||
required: true,
|
||||
minLength: {
|
||||
value: 1,
|
||||
message: "Tag number is to short!",
|
||||
},
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="m-2">
|
||||
<Textarea
|
||||
//label="Comments"
|
||||
placeholder="add more info as needed."
|
||||
{
|
||||
...register("additionalComments")
|
||||
// { required: true, minLength: 10 }
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<div className="mt-3">
|
||||
<Button
|
||||
color="danger"
|
||||
variant="default"
|
||||
onClick={closeForm}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
<Button
|
||||
color="primary"
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Print
|
||||
</Button>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
import { LotType } from "@/types/lots";
|
||||
import axios from "axios";
|
||||
|
||||
export const manualPrintLabels = async (lot: LotType, user: any) => {
|
||||
//console.log(lot);
|
||||
const labelUrl = `/api/ocp/manualprintandfollow`;
|
||||
|
||||
try {
|
||||
const res = await axios.post(
|
||||
labelUrl,
|
||||
{ line: lot.MachineLocation, printerName: lot.PrinterName },
|
||||
{ headers: { Authorization: `Basic ${user?.prod}` } }
|
||||
);
|
||||
|
||||
if (res.data.success) {
|
||||
return {
|
||||
success: true,
|
||||
message: `A new label was printed for ${lot.MachineDescription} to printer: ${lot.PrinterName}`,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
success: false,
|
||||
message: `Line ${lot.MachineDescription} encountered an error printing labels: ${res.data.message}`,
|
||||
};
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error.response.status === 500) {
|
||||
//toast.error(`Internal Server error please try again.`);
|
||||
return {
|
||||
success: false,
|
||||
message: `Internal Server error please try again.`,
|
||||
};
|
||||
}
|
||||
|
||||
if (error.response.status === 401) {
|
||||
//console.log(e.response);
|
||||
//toast.error(`You are not authorized to do this.`);
|
||||
return {
|
||||
success: false,
|
||||
message: `You are not authorized to do this.`,
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,46 +0,0 @@
|
||||
import { getOcpLogs } from "@/utils/querys/production/ocpLogs";
|
||||
import { ocpColumns } from "@/utils/tableData/production/ocpLogs/ocpLogColumns";
|
||||
import { OcpLogTable } from "@/utils/tableData/production/ocpLogs/ocpLogData";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import axios from "axios";
|
||||
|
||||
import { useMemo } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function OcpLogs() {
|
||||
const { data, isError, isLoading } = useQuery(getOcpLogs("4"));
|
||||
|
||||
const clearLog = async (log: any) => {
|
||||
try {
|
||||
const res = await axios.patch(`/api/logger/logs/${log.log_id}`);
|
||||
|
||||
if (res.data.success) {
|
||||
toast.success(`Log message: ${log.message}, was just cleared`);
|
||||
} else {
|
||||
console.log(res);
|
||||
toast.error(`There was an error clearing the message.`);
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error(`There was an error trying to clearing the message.`);
|
||||
}
|
||||
};
|
||||
const columns = useMemo(() => ocpColumns(clearLog), [clearLog]);
|
||||
const logData = data ? data : [];
|
||||
if (isError) {
|
||||
return <div>Error</div>;
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return <div>Loading</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="m-2">
|
||||
<OcpLogTable
|
||||
columns={columns}
|
||||
data={logData}
|
||||
//style={style}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,153 +0,0 @@
|
||||
import WrapperManualTrigger from "@/components/ocme/WrapperCard";
|
||||
|
||||
import Lots from "./Lots";
|
||||
import OcpLogs from "./OcpLogs";
|
||||
import PrinterStatus from "./PrinterStatus";
|
||||
import { useSettingStore } from "@/lib/store/useSettings";
|
||||
|
||||
import LabelLog from "./LabelLog";
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from "@/components/ui/resizable-panels";
|
||||
import LabelRatio from "./LabelRatio";
|
||||
|
||||
export default function OCPPage() {
|
||||
const { settings } = useSettingStore();
|
||||
|
||||
if (settings.length === 0) return;
|
||||
let server = settings.filter((n) => n.name === "server");
|
||||
|
||||
return (
|
||||
<div className="ml-5 w-11/12 h-9/10">
|
||||
<ResizablePanelGroup
|
||||
direction="horizontal"
|
||||
//className="rounded-lg border"
|
||||
autoSaveId="ocpPage"
|
||||
>
|
||||
<ResizablePanel>
|
||||
<ResizablePanelGroup direction="vertical">
|
||||
<ResizablePanel
|
||||
style={{
|
||||
overflow: "auto",
|
||||
scrollbarWidth: "none",
|
||||
}}
|
||||
>
|
||||
<Lots />
|
||||
</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
<ResizablePanel>
|
||||
<ResizablePanelGroup
|
||||
direction="horizontal"
|
||||
autoSaveId="ocpPage"
|
||||
>
|
||||
<ResizablePanel
|
||||
//className="text-sm p-4 overflow-scroll"
|
||||
style={{
|
||||
overflow: "auto",
|
||||
scrollbarWidth: "none",
|
||||
}}
|
||||
>
|
||||
<LabelLog />
|
||||
</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
<ResizablePanel
|
||||
style={{
|
||||
overflow: "auto",
|
||||
scrollbarWidth: "none",
|
||||
}}
|
||||
>
|
||||
<OcpLogs />
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
<ResizablePanel className="min-h-[200px] min-w-[200px] max-w-[450px]">
|
||||
<ResizablePanelGroup
|
||||
direction="vertical"
|
||||
autoSaveId="ocpPage_vert"
|
||||
>
|
||||
{server[0].value === "usday1vms006" && (
|
||||
<ResizablePanel
|
||||
style={{
|
||||
overflow: "auto",
|
||||
scrollbarWidth: "none",
|
||||
}}
|
||||
defaultSize={50}
|
||||
className="min-h-[200px]"
|
||||
>
|
||||
<WrapperManualTrigger />
|
||||
</ResizablePanel>
|
||||
)}
|
||||
{server[0]?.value === "localhost" && (
|
||||
<ResizablePanel
|
||||
className="min-h-[200px]"
|
||||
style={{
|
||||
overflow: "auto",
|
||||
scrollbarWidth: "none",
|
||||
}}
|
||||
defaultSize={50}
|
||||
>
|
||||
<WrapperManualTrigger />
|
||||
</ResizablePanel>
|
||||
)}
|
||||
|
||||
<ResizableHandle />
|
||||
<ResizablePanel>
|
||||
<PrinterStatus />
|
||||
<LabelRatio />
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
);
|
||||
// return (
|
||||
// <div className="h-screen w-full ">
|
||||
// <div className="flex flex-row gap-2">
|
||||
// <div className="flex flex-col w-4/5 h-dvh">
|
||||
// <div className="">
|
||||
// <Lots />
|
||||
// </div>
|
||||
|
||||
// <div className="w-5/6 h-1/2">
|
||||
// <Tabs defaultValue="ocplogs" className="w-full">
|
||||
// <TabsList className="grid w-full grid-cols-2">
|
||||
// <TabsTrigger value="ocplogs">
|
||||
// OcpLogs
|
||||
// </TabsTrigger>
|
||||
// <TabsTrigger value="labels">Labels</TabsTrigger>
|
||||
// </TabsList>
|
||||
// <TabsContent value="ocplogs">
|
||||
// <div className="w-full">
|
||||
// <OcpLogs />
|
||||
// </div>
|
||||
// </TabsContent>
|
||||
// <TabsContent value="labels">
|
||||
// <LabelLog />
|
||||
// </TabsContent>
|
||||
// </Tabs>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div className="flex flex-col">
|
||||
// {server[0].value === "usday1vms006" && (
|
||||
// <div>
|
||||
// <WrapperManualTrigger />
|
||||
// </div>
|
||||
// )}
|
||||
// {server[0].value === "localhost" && (
|
||||
// <div>
|
||||
// <WrapperManualTrigger />
|
||||
// </div>
|
||||
// )}
|
||||
// <div>
|
||||
// <PrinterStatus />
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
}
|
||||
@@ -1,114 +0,0 @@
|
||||
import { LstCard } from "@/components/extendedUI/LstCard";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { getPrinters } from "@/utils/querys/production/printers";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
let printerCols = [
|
||||
{
|
||||
key: "printer",
|
||||
label: "Printer",
|
||||
},
|
||||
{
|
||||
key: "statusMessage",
|
||||
label: "Status Message",
|
||||
},
|
||||
];
|
||||
export default function PrinterStatus() {
|
||||
const { data, isError, isLoading } = useQuery(getPrinters());
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<ScrollArea className="h-[400px]">
|
||||
<p className="text-center">Printer Staus error</p>
|
||||
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{printerCols.map((l) => (
|
||||
<TableHead key={l.key}>{l.label}</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{Array(5)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell className="font-medium">
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* only show the assigned printers
|
||||
*/
|
||||
|
||||
const assigned = data?.filter((a: any) => a.assigned) || [];
|
||||
return (
|
||||
<LstCard className="m-2 p-2">
|
||||
<ScrollArea className="max-h-[800px]">
|
||||
<p className="text-center">
|
||||
{isLoading ? (
|
||||
<span>Printers status loading...</span>
|
||||
) : (
|
||||
<span>Printer Status</span>
|
||||
)}
|
||||
</p>
|
||||
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{printerCols.map((l) => (
|
||||
<TableHead key={l.key}>{l.label}</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
{isLoading ? (
|
||||
<TableBody>
|
||||
{Array(5)
|
||||
.fill(0)
|
||||
.map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell className="font-medium">
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="h-4" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
) : (
|
||||
<TableBody>
|
||||
{assigned?.map((p: any) => (
|
||||
<TableRow key={p.printer_id}>
|
||||
<TableCell>{p.name}</TableCell>
|
||||
<TableCell>{p.statusText}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
)}
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
</LstCard>
|
||||
);
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import OcmeCycleCount from "@/components/ocme/ocmeCycleCount";
|
||||
import {createFileRoute} from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/(ocme)/cyclecount/")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return (
|
||||
<div className="m-2">
|
||||
<OcmeCycleCount />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
import {createFileRoute} from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/about")({
|
||||
component: About,
|
||||
});
|
||||
|
||||
function About() {
|
||||
return (
|
||||
<div className="m-auto">
|
||||
<h2>About page to come.</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import Changelog from "@/components/changelog/ChangeLog";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/changelog")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return (
|
||||
<div>
|
||||
<Changelog />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
//import GridLayout from "react-grid-layout";
|
||||
import "../../node_modules/react-grid-layout/css/styles.css";
|
||||
import "../../node_modules/react-resizable/css/styles.css";
|
||||
import DashBoard from "@/components/dashboard/DashBoard";
|
||||
|
||||
export const Route = createFileRoute("/")({
|
||||
component: Index,
|
||||
});
|
||||
|
||||
function Index() {
|
||||
return (
|
||||
<div className="h-dvh w-dvw">
|
||||
<DashBoard />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import OCPPage from "@/components/production/ocp/OcpPage";
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createFileRoute("/ocp/")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
return (
|
||||
<div className="h-dvh w-dvw">
|
||||
<OCPPage />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user