docs(scanner): added in instructions on how to update the scanner

only test2 stage now commands for now.

frontend/src/docs/mobile/updateInstructions.tsx

@@ -0,0 +1,137 @@
+import { useMutation } from "@tanstack/react-query";
+import { Button } from "../../components/ui/button";
+import { Separator } from "../../components/ui/separator";
+
+export default function UpdateInstructions() {
+	const getFile = useMutation({
+		mutationFn: async () => {
+			// 1. Fetch the file from the public folder
+			const response = await fetch(
+				`/lst/app/stage-now/${window.LST_CONFIG?.server}-stageNow.pdf`,
+			);
+			if (!response.ok) throw new Error("Network response was not ok");
+
+			// 2. Convert to blob
+			return await response.blob();
+		},
+		onSuccess: (blob) => {
+			// 3. Create a temporary anchor element to trigger download
+			const url = window.URL.createObjectURL(blob);
+			const a = document.createElement("a");
+			a.href = url;
+			a.download = `${window.LST_CONFIG?.server}-stageNow.pdf`; // Desired filename
+			document.body.appendChild(a);
+			a.click();
+
+			// 4. Cleanup
+			window.URL.revokeObjectURL(url);
+			document.body.removeChild(a);
+		},
+	});
+
+	return (
+		<div className="flex flex-row gap-2">
+			<div className="w-1/2">
+				<div className="flex flex-col gap-1 justify-center">
+					<div>
+						<p className="text-center text-3xl">
+							Updating the lst mobile scanner app
+						</p>
+						<p className="text-center text-sm">
+							NOTE: LST Mobile only works on TC8300
+						</p>
+					</div>
+					<div className="flex justify-center">
+						<Button
+							onClick={() => getFile.mutate()}
+							disabled={getFile.isPending}
+						>
+							{getFile.isPending ? "Downloading..." : "Get StageNow Codes"}
+						</Button>
+					</div>
+				</div>
+				<Separator className="m-3" />
+				<div>
+					<p className="text-2xl text-center">
+						How to know the scanner has an update?
+					</p>
+					<p>
+						The bottom part of the scanner will show a red or orange bar
+						indicating there is an update. As shown below
+					</p>
+					<div className="flex flex-row gap-2 justify-center">
+						<div className="w-1/2">
+							<img
+								src="/lst/app/imgs/docs/mobile/critical_update.png"
+								alt="Home"
+								className="max-w-[50%] h-auto"
+							/>
+						</div>
+
+						<div className="w-1/2">
+							<img
+								src="/lst/app/imgs/docs/mobile/update.png"
+								alt="Home"
+								className="max-w-[50%] h-auto"
+							/>
+						</div>
+					</div>
+				</div>
+
+				<Separator className="m-3" />
+				<div>
+					<p className="text-2xl text-center">
+						To update the scanner follow the below steps.
+					</p>
+					<p>Step 1) Tap the 3 dots top right of the home screen</p>
+					<img
+						src="/lst/app/imgs/docs/mobile/ehs_homeScreen.png"
+						alt="Home"
+						className="max-w-[25%] h-auto m-3"
+					/>
+					<p>Step 2) Tap tools</p>
+					<img
+						src="/lst/app/imgs/docs/mobile/ehs_menu.png"
+						alt="Home"
+						className="max-w-[25%] h-auto m-3"
+					/>
+					<p>Step 3) Tap Stage Now</p>
+					<img
+						src="/lst/app/imgs/docs/mobile/tools.png"
+						alt="Home"
+						className="max-w-[25%] h-auto m-3"
+					/>
+					<p>
+						Step 4) Scan the 3 barcode's to the right or from the printed sheet
+					</p>
+					<img
+						src="/lst/app/imgs/docs/mobile/stagenow.png"
+						alt="Home"
+						className="max-w-[25%] h-auto m-3"
+					/>
+				</div>
+			</div>
+			<div className="w-1/2">
+				<p>Scan Commands</p>
+				<Separator className="m-3" />
+				<div className="flex flex-col justify-center">
+					<img
+						src={`/lst/app/imgs/docs/mobile/${window.LST_CONFIG?.server}-1.png`}
+						alt="Home"
+						className="m-3"
+					/>
+					<img
+						src={`/lst/app/imgs/docs/mobile/${window.LST_CONFIG?.server}-2.png`}
+						alt="Home"
+						className="m-3"
+					/>
+					<img
+						src={`/lst/app/imgs/docs/mobile/${window.LST_CONFIG?.server}-3.png`}
+						alt="Home"
+						className="m-3"
+					/>
+				</div>
+			</div>
+		</div>
+	);
+}