refactor(dock door scanning): fixes and final writes for the intial trial went smooth

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

@@ -2,6 +2,7 @@ import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
 import { createColumnHelper } from "@tanstack/react-table";
 import { formatInTimeZone } from "date-fns-tz";
+import { useEffect, useMemo } from "react";
 import { toast } from "sonner";
 import { Button } from "../../../../components/ui/button";
 import { useSocketRoom } from "../../../../hooks/socket.io.hook";
@@ -21,11 +22,25 @@ export const Route = createFileRoute(
 });
 
 function RouteComponent() {
-	const { dockScans } = Route.useParams();
-	const { data: logs, clearRoom } = useSocketRoom<any>(
-		`dockDoorLoading:${dockScans}`,
+	const { data: canSee = false } = useQuery(
+		permissionQuery({
+			warehouse: ["update"],
+		}),
 	);
 	const { data, refetch } = useSuspenseQuery(getActiveDockScanners());
+	const { dockScans } = Route.useParams();
+	const params = useMemo(
+		() => ({
+			dockId: dockScans,
+			loadingOrder: data[0].currentLoadingOrder ?? undefined,
+		}),
+		[dockScans, data],
+	);
+	const { data: logs, clearRoom } = useSocketRoom<any>(
+		`dockDoorLoading`,
+		params,
+	);
+
 	const { data: loadingPlanItems, refetch: refetchActiveLoading } =
 		useSuspenseQuery(getActiveLoadingOrders());
 
@@ -36,6 +51,24 @@ function RouteComponent() {
 	);
 	const columnHelper = createColumnHelper<any>();
 
+	const logCount = logs.length;
+
+	// TODO: move this to an onMessage: handFunction
+	/*
+	const handleLogMessage = useCallback(() => {
+	refetchActiveLoading();
+	}, [refetchActiveLoading]);
+
+	const { data: logs } = useSocketRoom<LogEntry>("logs", {
+		onMessage: handleLogMessage,
+	});
+	*/
+
+	// biome-ignore lint: false
+	useEffect(() => {
+		refetchActiveLoading();
+	}, [logCount, refetchActiveLoading]);
+
 	const column = [
 		columnHelper.accessor("loadingOrder", {
 			header: ({ column }) => (
@@ -147,33 +180,36 @@ function RouteComponent() {
 				</p>
 			</div>
 			<div className="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>
+				{canSee && (
+					<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>
-							<div className="flex justify-end mt-8 mr-3 ">
-								<form.AppForm>
-									<form.SubmitButton>Submit</form.SubmitButton>
-								</form.AppForm>
-							</div>
-						</div>
-					</form>
-				</div>
+						</form>
+					</div>
+				)}
+
 				{loadingPlan && loadingPlan.length > 0 && (
 					<div className="flex mb-2 gap-2">
 						<Button