refactor(dockscanning): more work on the dock door scanning

ref #12

frontend/src/components/Sidebar/Warhouse.tsx

@@ -0,0 +1,94 @@
+import { useQuery } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
+import { ChevronRight, Link as link } from "lucide-react";
+import { permissionQuery } from "../../lib/queries/permsCheck";
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "../ui/collapsible";
+import {
+	SidebarGroup,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarMenuSub,
+	SidebarMenuSubButton,
+	SidebarMenuSubItem,
+	useSidebar,
+} from "../ui/sidebar";
+
+export default function WarehouseBar() {
+	const { data: canCreate = false } = useQuery(
+		permissionQuery({
+			warehouse: ["read"],
+		}),
+	);
+
+	const { setOpen } = useSidebar();
+	const items = [
+		{
+			title: "Dock Door Scanning",
+			url: "/warehouse",
+			//icon,
+			isActive: canCreate,
+			items: [
+				{
+					title: "DockDoorScanning",
+					icon: link,
+					url: "/warehouse/dockdoorscanning",
+				},
+			],
+		},
+	];
+
+	return (
+		<SidebarGroup>
+			<SidebarGroupLabel>Warehouse</SidebarGroupLabel>
+			<SidebarGroupContent>
+				<SidebarMenu>
+					{items.map((item) => (
+						<div key={item.title}>
+							{item.isActive && (
+								<Collapsible
+									asChild
+									//defaultOpen={isNotifications}
+									className="group/collapsible"
+								>
+									<SidebarMenuItem>
+										<CollapsibleTrigger asChild>
+											<SidebarMenuButton tooltip={item.title}>
+												{item.title}
+
+												<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+											</SidebarMenuButton>
+										</CollapsibleTrigger>
+										<CollapsibleContent>
+											<SidebarMenuSub>
+												{item.items?.map((subItem) => (
+													<SidebarMenuSubItem key={subItem.title}>
+														<SidebarMenuSubButton asChild>
+															<Link
+																to={subItem.url}
+																onClick={() => setOpen(false)}
+															>
+																<subItem.icon />
+																<span>{subItem.title}</span>
+															</Link>
+														</SidebarMenuSubButton>
+													</SidebarMenuSubItem>
+												))}
+											</SidebarMenuSub>
+										</CollapsibleContent>
+									</SidebarMenuItem>
+								</Collapsible>
+							)}
+						</div>
+					))}
+				</SidebarMenu>
+			</SidebarGroupContent>
+		</SidebarGroup>
+	);
+}

frontend/src/components/Sidebar/sidebar.tsx

@@ -13,16 +13,23 @@ import AdminSidebar from "./AdminBar";
 import DocBar from "./DocBar";
 import MobileBar from "./MobileBar";
 import TransportationBar from "./TransportationBar";
+import WarehouseBar from "./Warhouse";
 
 export function AppSidebar() {
 	const { data: session } = useSession();
 	const { data: settings, isLoading } = useSuspenseQuery(getSettings());
-	const { data: canRead = false } = useQuery(
+	const { data: canReadOpenDock = false } = useQuery(
 		permissionQuery({
 			openDock: ["read"],
 		}),
 	);
 
+	const { data: canReadWarehouse = false } = useQuery(
+		permissionQuery({
+			warehouse: ["read"],
+		}),
+	);
+
 	return (
 		<Sidebar
 			variant="sidebar"
@@ -42,7 +49,12 @@ export function AppSidebar() {
 							{!isLoading &&
 								settings.filter((n: any) => n.name === "opendock_sync")[0]
 									?.active &&
-								canRead && <TransportationBar />}
+								canReadOpenDock && <TransportationBar />}
+
+							{!isLoading &&
+								settings.filter((n: any) => n.name === "dockDoorScanning")[0]
+									?.active &&
+								canReadWarehouse && <WarehouseBar />}
 
 							{session &&
 								(session.user.role === "admin" ||

frontend/src/lib/queries/getActiveDockScanners.ts

@@ -0,0 +1,21 @@
+import { keepPreviousData, queryOptions } from "@tanstack/react-query";
+import { api } from "../apiHelper";
+
+export function getActiveLoadingOrders() {
+	return queryOptions({
+		queryKey: ["getActiveLoadingOrders"],
+		queryFn: () => dataFetch(),
+		staleTime: 5000,
+		refetchOnWindowFocus: true,
+		placeholderData: keepPreviousData,
+	});
+}
+
+const dataFetch = async () => {
+	const { data } = await api.get("/dockDoor/activeLoadingOrders");
+	if (!data.success) {
+		throw new Error(data.message ?? "Failed to load articles");
+	}
+
+	return data.data ?? [];
+};

frontend/src/lib/queries/getActiveLoadingOrders.ts

@@ -0,0 +1,25 @@
+import { keepPreviousData, queryOptions } from "@tanstack/react-query";
+import { api } from "../apiHelper";
+
+export function getActiveDockScanners() {
+	return queryOptions({
+		queryKey: ["getActiveDockScanners"],
+		queryFn: () => dataFetch(),
+		staleTime: 5000,
+		refetchOnWindowFocus: true,
+		placeholderData: keepPreviousData,
+	});
+}
+
+const dataFetch = async () => {
+	if (window.location.hostname === "localhost") {
+		await new Promise((res) => setTimeout(res, 1500));
+	}
+
+	const { data } = await api.get("/dockDoor/scanners");
+	if (!data.success) {
+		throw new Error(data.message ?? "Failed to load articles");
+	}
+
+	return data.data ?? [];
+};

frontend/src/routeTree.gen.ts

@@ -22,7 +22,10 @@ import { Route as AdminScanUsersRouteImport } from './routes/admin/scanUsers'
 import { Route as AdminNotificationsRouteImport } from './routes/admin/notifications'
 import { Route as AdminLogsRouteImport } from './routes/admin/logs'
 import { Route as authLoginRouteImport } from './routes/(auth)/login'
+import { Route as WarehouseDockdoorscanningIndexRouteImport } from './routes/warehouse/dockdoorscanning/index'
 import { Route as TransportationOpendockIndexRouteImport } from './routes/transportation/opendock/index'
+import { Route as WarehouseDockdoorscanningDockScansRouteImport } from './routes/warehouse/dockdoorscanning/$dockScans'
+import { Route as WarehouseDockdoorscanningDockRouteImport } from './routes/warehouse/dockdoorscanning/$dock'
 import { Route as authUserSignupRouteImport } from './routes/(auth)/user.signup'
 import { Route as authUserResetpasswordRouteImport } from './routes/(auth)/user.resetpassword'
 import { Route as authUserProfileRouteImport } from './routes/(auth)/user.profile'
@@ -92,12 +95,30 @@ const authLoginRoute = authLoginRouteImport.update({
   path: '/login',
   getParentRoute: () => rootRouteImport,
 } as any)
+const WarehouseDockdoorscanningIndexRoute =
+  WarehouseDockdoorscanningIndexRouteImport.update({
+    id: '/warehouse/dockdoorscanning/',
+    path: '/warehouse/dockdoorscanning/',
+    getParentRoute: () => rootRouteImport,
+  } as any)
 const TransportationOpendockIndexRoute =
   TransportationOpendockIndexRouteImport.update({
     id: '/transportation/opendock/',
     path: '/transportation/opendock/',
     getParentRoute: () => rootRouteImport,
   } as any)
+const WarehouseDockdoorscanningDockScansRoute =
+  WarehouseDockdoorscanningDockScansRouteImport.update({
+    id: '/warehouse/dockdoorscanning/$dockScans',
+    path: '/warehouse/dockdoorscanning/$dockScans',
+    getParentRoute: () => rootRouteImport,
+  } as any)
+const WarehouseDockdoorscanningDockRoute =
+  WarehouseDockdoorscanningDockRouteImport.update({
+    id: '/warehouse/dockdoorscanning/$dock',
+    path: '/warehouse/dockdoorscanning/$dock',
+    getParentRoute: () => rootRouteImport,
+  } as any)
 const authUserSignupRoute = authUserSignupRouteImport.update({
   id: '/(auth)/user/signup',
   path: '/user/signup',
@@ -131,7 +152,10 @@ export interface FileRoutesByFullPath {
   '/user/profile': typeof authUserProfileRoute
   '/user/resetpassword': typeof authUserResetpasswordRoute
   '/user/signup': typeof authUserSignupRoute
+  '/warehouse/dockdoorscanning/$dock': typeof WarehouseDockdoorscanningDockRoute
+  '/warehouse/dockdoorscanning/$dockScans': typeof WarehouseDockdoorscanningDockScansRoute
   '/transportation/opendock/': typeof TransportationOpendockIndexRoute
+  '/warehouse/dockdoorscanning/': typeof WarehouseDockdoorscanningIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
@@ -150,7 +174,10 @@ export interface FileRoutesByTo {
   '/user/profile': typeof authUserProfileRoute
   '/user/resetpassword': typeof authUserResetpasswordRoute
   '/user/signup': typeof authUserSignupRoute
+  '/warehouse/dockdoorscanning/$dock': typeof WarehouseDockdoorscanningDockRoute
+  '/warehouse/dockdoorscanning/$dockScans': typeof WarehouseDockdoorscanningDockScansRoute
   '/transportation/opendock': typeof TransportationOpendockIndexRoute
+  '/warehouse/dockdoorscanning': typeof WarehouseDockdoorscanningIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -170,7 +197,10 @@ export interface FileRoutesById {
   '/(auth)/user/profile': typeof authUserProfileRoute
   '/(auth)/user/resetpassword': typeof authUserResetpasswordRoute
   '/(auth)/user/signup': typeof authUserSignupRoute
+  '/warehouse/dockdoorscanning/$dock': typeof WarehouseDockdoorscanningDockRoute
+  '/warehouse/dockdoorscanning/$dockScans': typeof WarehouseDockdoorscanningDockScansRoute
   '/transportation/opendock/': typeof TransportationOpendockIndexRoute
+  '/warehouse/dockdoorscanning/': typeof WarehouseDockdoorscanningIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -191,7 +221,10 @@ export interface FileRouteTypes {
     | '/user/profile'
     | '/user/resetpassword'
     | '/user/signup'
+    | '/warehouse/dockdoorscanning/$dock'
+    | '/warehouse/dockdoorscanning/$dockScans'
     | '/transportation/opendock/'
+    | '/warehouse/dockdoorscanning/'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -210,7 +243,10 @@ export interface FileRouteTypes {
     | '/user/profile'
     | '/user/resetpassword'
     | '/user/signup'
+    | '/warehouse/dockdoorscanning/$dock'
+    | '/warehouse/dockdoorscanning/$dockScans'
     | '/transportation/opendock'
+    | '/warehouse/dockdoorscanning'
   id:
     | '__root__'
     | '/'
@@ -229,7 +265,10 @@ export interface FileRouteTypes {
     | '/(auth)/user/profile'
     | '/(auth)/user/resetpassword'
     | '/(auth)/user/signup'
+    | '/warehouse/dockdoorscanning/$dock'
+    | '/warehouse/dockdoorscanning/$dockScans'
     | '/transportation/opendock/'
+    | '/warehouse/dockdoorscanning/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -249,7 +288,10 @@ export interface RootRouteChildren {
   authUserProfileRoute: typeof authUserProfileRoute
   authUserResetpasswordRoute: typeof authUserResetpasswordRoute
   authUserSignupRoute: typeof authUserSignupRoute
+  WarehouseDockdoorscanningDockRoute: typeof WarehouseDockdoorscanningDockRoute
+  WarehouseDockdoorscanningDockScansRoute: typeof WarehouseDockdoorscanningDockScansRoute
   TransportationOpendockIndexRoute: typeof TransportationOpendockIndexRoute
+  WarehouseDockdoorscanningIndexRoute: typeof WarehouseDockdoorscanningIndexRoute
 }
 
 declare module '@tanstack/react-router' {
@@ -345,6 +387,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof authLoginRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/warehouse/dockdoorscanning/': {
+      id: '/warehouse/dockdoorscanning/'
+      path: '/warehouse/dockdoorscanning'
+      fullPath: '/warehouse/dockdoorscanning/'
+      preLoaderRoute: typeof WarehouseDockdoorscanningIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/transportation/opendock/': {
       id: '/transportation/opendock/'
       path: '/transportation/opendock'
@@ -352,6 +401,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof TransportationOpendockIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/warehouse/dockdoorscanning/$dockScans': {
+      id: '/warehouse/dockdoorscanning/$dockScans'
+      path: '/warehouse/dockdoorscanning/$dockScans'
+      fullPath: '/warehouse/dockdoorscanning/$dockScans'
+      preLoaderRoute: typeof WarehouseDockdoorscanningDockScansRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/warehouse/dockdoorscanning/$dock': {
+      id: '/warehouse/dockdoorscanning/$dock'
+      path: '/warehouse/dockdoorscanning/$dock'
+      fullPath: '/warehouse/dockdoorscanning/$dock'
+      preLoaderRoute: typeof WarehouseDockdoorscanningDockRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/(auth)/user/signup': {
       id: '/(auth)/user/signup'
       path: '/user/signup'
@@ -393,7 +456,11 @@ const rootRouteChildren: RootRouteChildren = {
   authUserProfileRoute: authUserProfileRoute,
   authUserResetpasswordRoute: authUserResetpasswordRoute,
   authUserSignupRoute: authUserSignupRoute,
+  WarehouseDockdoorscanningDockRoute: WarehouseDockdoorscanningDockRoute,
+  WarehouseDockdoorscanningDockScansRoute:
+    WarehouseDockdoorscanningDockScansRoute,
   TransportationOpendockIndexRoute: TransportationOpendockIndexRoute,
+  WarehouseDockdoorscanningIndexRoute: WarehouseDockdoorscanningIndexRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

frontend/src/routes/warehouse/dockdoorscanning/$dock.tsx

@@ -0,0 +1,118 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { createFileRoute } from "@tanstack/react-router";
+import { format } from "date-fns";
+import { Button } from "../../../components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+} from "../../../components/ui/card";
+import { Separator } from "../../../components/ui/separator";
+import { getActiveLoadingOrders } from "../../../lib/queries/getActiveDockScanners";
+import { getActiveDockScanners } from "../../../lib/queries/getActiveLoadingOrders";
+import { finishLoadingOrder} from './index'
+import { api } from "../../../lib/apiHelper";
+import { toast } from "sonner";
+
+export const Route = createFileRoute("/warehouse/dockdoorscanning/$dock")({
+	component: RouteComponent,
+});
+
+export const startOrder = async (loadingOrder: string, dockId: string, refetch:any, refetchActiveLoading:any) => {
+
+	try {
+		const res = await api.post("/dockDoor/startLoad", {
+  "loadingOrder":String(loadingOrder),
+  "dockId":dockId
+},{validateStatus: (status) => status < 500,})
+
+if (!res.data.success) {
+	toast.error(res.data.message)
+	refetch()
+	refetchActiveLoading()
+	return
+}
+toast.success(res.data.message)
+refetch()
+	refetchActiveLoading()
+	} catch (error) {
+		console.log(error)
+		toast.error(`Encountered error: ${JSON.stringify(error)}`)
+	}
+
+}
+
+function RouteComponent() {
+	const { dock } = Route.useParams();
+	const { data, refetch } = useSuspenseQuery(getActiveDockScanners());
+	const { data: loadingPlanItems, refetch: refetchActiveLoading } = useSuspenseQuery(getActiveLoadingOrders());
+
+	const dockData = data.filter((i: any) => i.dockId === dock);
+	const loadingPlans = loadingPlanItems.filter(
+		(l: any) => l.dockId === Number(dock),
+	);
+	console.log(dockData[0].currentLoadingOrder === "");
+	return (
+		<div className="flex flex-col">
+			<div className="flex justify-center">
+				<p>Please select an active loading order for {dockData[0].name}</p>
+			</div>
+			<div className="flex justify-center mt-5 gap-2">
+				{loadingPlans &&
+					loadingPlans.length > 0 &&
+					loadingPlans.map((i: any) => {
+						return (
+							<Card key={i.id} className="max-w-96">
+								<CardHeader>
+									Loading order ID: {i.id}{" "}
+									<p>
+										Loading Date: {format(i.loadingDate, "MM/dd/yyyy HH:mm")}
+									</p>
+								</CardHeader>
+								<CardDescription className="">
+									<p className="p-3">
+										Below are the loading order details please validate the
+										loading order you are selecting before pressing start.
+									</p>
+								</CardDescription>
+								{/* Mapping the items out so in case we have more than 1 it will display correctly */}
+								<CardContent>
+									{i?.loadingPlanItems?.map((l: any) => {
+										return (
+											<div key={i.id}>
+												<p>Loading Sequence {l.loadingSequence}</p>
+												<p>
+													Article: {l.articleId} - {l.articleDescription}
+												</p>
+												<p>
+													Current loaded: {l.loadedQuantityLUs}/
+													{l.plannedQuantityLUs}
+												</p>
+												{l.remark !== "" && <p>Remark: {l.remark}</p>}
+
+												{i?.loadingPlanItems.length > 1 && (
+													<Separator className="m-2" />
+												)}
+											</div>
+										);
+									})}
+								</CardContent>
+								<CardFooter>
+									<div className="flex flex-row justify-between">
+										<Button 
+										onClick={()=> startOrder(i.id, dock, refetch, refetchActiveLoading)}
+										disabled={dockData[0].currentLoadingOrder !== "" ? true : false}>Start Loading</Button>
+										<Button>Scan progress</Button>
+										<Button onClick={()=> finishLoadingOrder(String(i.id), dock, refetch, refetchActiveLoading)}
+											disabled={dockData[0].currentLoadingOrder === "" ? true : false}>Finish Loading</Button>
+									</div>
+								</CardFooter>
+							</Card>
+						);
+					})}
+			</div>
+		</div>
+	);
+}

frontend/src/routes/warehouse/dockdoorscanning/$dockScans.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/warehouse/dockdoorscanning/$dockScans")({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	const { dockScans } = Route.useParams();
+	return <div>Hello "/warehouse/dockdoorscanning/$docScans"! {dockScans}</div>;
+}

frontend/src/routes/warehouse/dockdoorscanning/index.tsx

@@ -0,0 +1,120 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { Card, CardContent, CardDescription, CardHeader } from "../../../components/ui/card";
+import { getActiveLoadingOrders } from "../../../lib/queries/getActiveDockScanners";
+import { getActiveDockScanners } from "../../../lib/queries/getActiveLoadingOrders";
+import { Button } from "../../../components/ui/button";
+import { api } from "../../../lib/apiHelper";
+import { toast } from "sonner";
+
+export const Route = createFileRoute("/warehouse/dockdoorscanning/")({
+	component: RouteComponent,
+});
+
+export const finishLoadingOrder = async (loadingOrder: string, dockId: string, refetch:any, refetchActiveLoading:any) => {
+
+	try {
+		const res = await api.post("/dockDoor/finishOrder", {
+  "loadingOrder":loadingOrder,
+  "dockId":dockId
+},{validateStatus: (status) => status < 500,})
+
+if (!res.data.success) {
+	toast.error(res.data.message)
+	refetch()
+	refetchActiveLoading()
+	return
+}
+toast.info(res.data.message)
+refetch()
+	refetchActiveLoading()
+	} catch (error) {
+		console.log(error)
+		toast.error(`Encountered error: ${JSON.stringify(error)}`)
+	}
+
+}
+
+function RouteComponent() {
+	const { data, isLoading, refetch } = useSuspenseQuery(getActiveDockScanners());
+	const { data: loadingPlanItems, refetch : refetchActiveLoading  } = useSuspenseQuery(getActiveLoadingOrders());
+	const navigate = useNavigate();
+
+	if (isLoading) {
+		return (
+			<div className="flex justify-center-safe">
+				<p>Loading active dock scanners....</p>
+			</div>
+		);
+	}
+	return (
+		<div className="flex flex-col ">
+			<div className="flex justify-center-safe">
+				<p className="text-2xl underline">
+					Select a dock you would like to work with
+				</p>
+			</div>
+			<div className="flex justify-center gap-3 mt-5">
+				{!isLoading &&
+					data.length > 0 &&
+					data.map((i: any) => {
+						const loadingPlan =
+							i.currentLoadingOrder !== ""
+								? loadingPlanItems.filter(
+										(x: any) => x.id === Number(i.currentLoadingOrder),
+									)
+								: [];
+
+						
+						return (
+							<Card
+								key={i.id}
+								className="max-w-96"
+								onClick={() => {
+									if (i.currentLoadingOrder === "") {
+										navigate({
+											to: "/warehouse/dockdoorscanning/$dock",
+											params: { dock: i.dockId },
+											search: {
+												name: i.name,
+											},
+										});
+									}
+								}}
+							>
+								<CardHeader className="text-center">{i.name}</CardHeader>
+								<CardDescription>For Abbott loads reminder: 3 lots per load max.</CardDescription>
+
+								{i.currentLoadingOrder !== "" ? (
+									<CardContent>
+										<div className="flex flex-col gap-2">
+											Current loading order: {i.currentLoadingOrder}
+										</div>
+										
+										<div>
+
+										
+										{loadingPlan && loadingPlan.length !== 0 ? (<>
+										
+											<p>{`${loadingPlan[0].loadingPlanItems[0].articleId} - ${loadingPlan[0].loadingPlanItems[0].articleDescription}`}</p>
+										
+										<p>Current Loaded :{" "}
+										{loadingPlan[0].loadingPlanItems[0].loadedQuantityLUs} /{" "}
+										{loadingPlan[0].loadingPlanItems[0].plannedQuantityLUs}</p></>
+									): <><p>The Current Loading order is invalid</p>
+									<p> It appears it could have been finished via another process</p>
+									<div className="m-2 flex justify-center">
+										<Button onClick={()=> finishLoadingOrder(i.currentLoadingOrder, i.dockId, refetch, refetchActiveLoading)}>Clear {i.currentLoadingOrder}</Button></div></>}</div>
+									</CardContent>
+								) : (
+									<CardContent>
+										No active loading orders please click me to select an order
+									</CardContent>
+								)}
+							</Card>
+						);
+					})}
+			</div>
+		</div>
+	);
+}