refactor(dock scanner): more work on dock scanner and semi finished

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

@@ -1,6 +1,7 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { format } from "date-fns";
+import { toast } from "sonner";
 import { Button } from "../../../components/ui/button";
 import {
 	Card,
@@ -10,108 +11,155 @@ import {
 	CardHeader,
 } from "../../../components/ui/card";
 import { Separator } from "../../../components/ui/separator";
+import { api } from "../../../lib/apiHelper";
 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";
+import { finishLoadingOrder } from "./index";
 
 export const Route = createFileRoute("/warehouse/dockdoorscanning/$dock")({
 	component: RouteComponent,
 });
 
-export const startOrder = async (loadingOrder: string, dockId: string, refetch:any, refetchActiveLoading:any) => {
-
+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,})
+		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()
+		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)}`)
+		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 { data: loadingPlanItems, refetch: refetchActiveLoading } =
+		useSuspenseQuery(getActiveLoadingOrders());
+	const navigate = useNavigate();
 
 	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>}
+				{loadingPlans && loadingPlans.length > 0 ? (
+					<div>
+						{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>
-						);
-					})}
+													{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
+												onClick={() =>
+													navigate({
+														to: "/warehouse/dockdoorscanning/scans/$dockScans",
+														params: { dockScans: dock },
+													})
+												}
+											>
+												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>
+						<p>There are know loading orders currently active.</p>
+						<p>
+							Head over to Outbound deliveries to create a loading order to
+							start the flow
+						</p>
+					</div>
+				)}
 			</div>
 		</div>
 	);

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

@@ -1,10 +0,0 @@
-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

@@ -1,43 +1,58 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
-import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { Card, CardContent, CardDescription, CardHeader } from "../../../components/ui/card";
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { toast } from "sonner";
+import { Button } from "../../../components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+} from "../../../components/ui/card";
+import { api } from "../../../lib/apiHelper";
 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) => {
-
+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,})
+		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()
+		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)}`)
+		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 { data, isLoading, refetch } = useSuspenseQuery(
+		getActiveDockScanners(),
+	);
+	const { data: loadingPlanItems, refetch: refetchActiveLoading } =
+		useSuspenseQuery(getActiveLoadingOrders());
 	const navigate = useNavigate();
 
 	if (isLoading) {
@@ -47,6 +62,7 @@ function RouteComponent() {
 			</div>
 		);
 	}
+
 	return (
 		<div className="flex flex-col ">
 			<div className="flex justify-center-safe">
@@ -64,8 +80,8 @@ function RouteComponent() {
 										(x: any) => x.id === Number(i.currentLoadingOrder),
 									)
 								: [];
-
-						
+						console.log(loadingPlan);
+						console.log(loadingPlanItems);
 						return (
 							<Card
 								key={i.id}
@@ -83,28 +99,66 @@ function RouteComponent() {
 								}}
 							>
 								<CardHeader className="text-center">{i.name}</CardHeader>
-								<CardDescription>For Abbott loads reminder: 3 lots per load max.</CardDescription>
+								<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>
+										<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>
+													Check Scans:{" "}
+													<Link
+														to={"/warehouse/dockdoorscanning/scans/$dockScans"}
+														params={{ dockScans: i.dockId }}
+														className="underline"
+													>
+														CLICK HERE
+													</Link>
+												</>
+											) : (
+												<>
+													<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>

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

@@ -0,0 +1,198 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { createFileRoute } from "@tanstack/react-router";
+import { createColumnHelper } from "@tanstack/react-table";
+import { formatInTimeZone } from "date-fns-tz";
+import { toast } from "sonner";
+import { Button } from "../../../../components/ui/button";
+import { useSocketRoom } from "../../../../hooks/socket.io.hook";
+import { api } from "../../../../lib/apiHelper";
+import { useAppForm } from "../../../../lib/formSutff";
+import { getActiveLoadingOrders } from "../../../../lib/queries/getActiveDockScanners";
+import { getActiveDockScanners } from "../../../../lib/queries/getActiveLoadingOrders";
+import LstTable from "../../../../lib/tableStuff/LstTable";
+import SearchableHeader from "../../../../lib/tableStuff/SearchableHeader";
+import { finishLoadingOrder } from "..";
+
+export const Route = createFileRoute(
+	"/warehouse/dockdoorscanning/scans/$dockScans",
+)({
+	component: RouteComponent,
+});
+
+function RouteComponent() {
+	const { dockScans } = Route.useParams();
+	const { data: logs, clearRoom } = useSocketRoom<any>(
+		`dockDoorLoading:${dockScans}`,
+	);
+	const { data, refetch } = useSuspenseQuery(getActiveDockScanners());
+	const { data: loadingPlanItems, refetch: refetchActiveLoading } =
+		useSuspenseQuery(getActiveLoadingOrders());
+	const columnHelper = createColumnHelper<any>();
+
+	const column = [
+		columnHelper.accessor("loadingOrder", {
+			header: ({ column }) => (
+				<SearchableHeader column={column} title="Loading Order" />
+			),
+			filterFn: "includesString",
+			cell: (i) => i.getValue(),
+		}),
+		columnHelper.accessor("loadingUnit", {
+			header: ({ column }) => (
+				<SearchableHeader column={column} title="Loading Unit" />
+			),
+			filterFn: "includesString",
+			cell: (i) => i.getValue(),
+		}),
+		columnHelper.accessor("loadingUnitStatus", {
+			header: ({ column }) => (
+				<SearchableHeader column={column} title="Status" />
+			),
+			filterFn: "includesString",
+			cell: (i) => i.getValue(),
+		}),
+		columnHelper.accessor("message", {
+			header: ({ column }) => (
+				<SearchableHeader column={column} title="Message" />
+			),
+			filterFn: "includesString",
+			cell: (i) => i.getValue(),
+		}),
+		columnHelper.accessor("upd_date", {
+			header: ({ column }) => (
+				<SearchableHeader column={column} title="Scanned At" />
+			),
+			filterFn: "includesString",
+			cell: (i) => {
+				function isDateValid(date: any) {
+					return date instanceof Date && !isNaN(date.getTime());
+				}
+
+				const trueDate = isDateValid(new Date(i.getValue()))
+					? formatInTimeZone(
+							i.getValue(),
+							`${window.LST_CONFIG?.timezone}`,
+							"MM/dd/yyyy HH:mm:ss",
+						)
+					: "invalid time";
+
+				return <span>{trueDate}</span>;
+			},
+		}),
+		columnHelper.accessor("status", {
+			header: ({ column }) => (
+				<SearchableHeader column={column} title="Status" />
+			),
+			filterFn: "includesString",
+			cell: (i) => i.getValue(),
+		}),
+	];
+
+	const form = useAppForm({
+		defaultValues: {
+			runningNo: "",
+			dockId: data[0].dockId,
+		},
+		onSubmit: async ({ value }) => {
+			try {
+				const res = await api.post("/dockDoor/loadUnit", value, {
+					validateStatus: (status) => status < 500,
+				});
+
+				refetchActiveLoading();
+				form.reset();
+				if (!res.data.success) {
+					toast.error(res.data.data.message);
+					return;
+				}
+
+				toast.success(res.data.message);
+			} catch (error) {
+				console.log(error);
+			}
+		},
+	});
+
+	const loadingPlan =
+		data[0].currentLoadingOrder !== ""
+			? loadingPlanItems.filter(
+					(x: any) => x.id === Number(data[0].currentLoadingOrder),
+				)
+			: [];
+	return (
+		<div>
+			<div>
+				<p className="text-2xl text-center">
+					You are monitoring scans for {data[0].name}
+				</p>
+
+				<p className="text-center">
+					Current load status:{" "}
+					{loadingPlan && loadingPlan.length !== 0 ? (
+						<span>
+							{loadingPlan[0].loadingPlanItems[0].loadedQuantityLUs} /{" "}
+							{loadingPlan[0].loadingPlanItems[0].plannedQuantityLUs}
+						</span>
+					) : (
+						<span>"No active loading orders</span>
+					)}
+				</p>
+			</div>
+			<div className="max-w-1/2 flex flex-col">
+				<div>
+					<form
+						onSubmit={(e) => {
+							e.preventDefault();
+							form.handleSubmit();
+						}}
+					>
+						<div className="flex flex-row">
+							<div className="mb-2 mr-2 max-w-48">
+								<form.AppField name="runningNo">
+									{(field) => (
+										<field.InputField
+											label="Running Number"
+											inputType="text"
+											required={true}
+										/>
+									)}
+								</form.AppField>
+							</div>
+							<div className="flex justify-end mt-8 mr-3 ">
+								<form.AppForm>
+									<form.SubmitButton>Submit</form.SubmitButton>
+								</form.AppForm>
+							</div>
+						</div>
+					</form>
+				</div>
+
+				<div className="flex justify-end mr-3 ">
+					<Button
+						type="button"
+						onClick={() => {
+							finishLoadingOrder(
+								String(data[0].currentLoadingOrder),
+								dockScans,
+								refetch,
+								refetchActiveLoading,
+							);
+							clearRoom();
+						}}
+						disabled={
+							loadingPlan ||
+							loadingPlan[0].loadingPlanItems[0].loadedQuantityLUs !==
+								loadingPlan[0].loadingPlanItems[0].plannedQuantityLUs
+						}
+					>
+						Finish Loading order
+					</Button>
+					<Button onClick={() => clearRoom()}>Clear Table</Button>
+				</div>
+			</div>
+			<div>
+				<LstTable data={logs} columns={column} pageSize={50} />
+			</div>
+		</div>
+	);
+}