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

ref #12

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>
+	);
+}