Merge pull request 'Update README.md' (#3) from tobaojo-patch-1 into develop

Reviewed-on: #3

README.md

@@ -1,69 +1,77 @@
-# React + TypeScript + Vite
+# Mav Mobile Ui
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This is a React-based web application built with Vite (react and typescript).
 
-Currently, two official plugins are available:
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 
-## Expanding the ESLint configuration
+## Getting started
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+### Prerequisites
+- Node.js (v18 or higher recommended)
+- Yarn (v1.22+) (https://yarnpkg.com/)
 
-```js
+### Installation
-export default tseslint.config([
+```bash
-  globalIgnores(['dist']),
+git clone https://mavportal.com/TobaOjo/Mav-Mobile-UI.git
-  {
+cd Mav-Mobile-UI
-    files: ['**/*.{ts,tsx}'],
+yarn install
-    extends: [
+```
-      // Other configs...
+### Running Locally
+```bash
+yarn dev
+```
+The app will be available at `http://localhost:5173`.
 
-      // Remove tseslint.configs.recommended and replace with this
-      ...tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      ...tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      ...tseslint.configs.stylisticTypeChecked,
 
-      // Other configs...
+To run on locally on other devices
-    ],
+```bash
-    languageOptions: {
+yarn dev --host
-      parserOptions: {
+```
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+The app will be available at the exposed addresses to access e.g. http://192.168.0.123:5173/Mobile
-        tsconfigRootDir: import.meta.dirname,
+
-      },
+## Tech Stack
-      // other options...
+- **React** – UI library
-    },
+- **Vite** – Build tool
-  },
+- **Yarn** – Package manager
-])
+
+
+
+## Configuration
+Create a `.env` file to access the Mav Mobile box in unit 5 for or for any environment-specific settings:
+```env
+VITE_AGX_BOX_URL=http://100.118.196.113:8080
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+## 🧪 Development
-
+### Linting & Formatting
-```js
+```bash
-// eslint.config.js
+yarn lint
-import reactX from 'eslint-plugin-react-x'
+yarn format
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
 ```
+
+### Testing
+(Currently not implemented – consider adding Jest or Vitest)
+
+## 🚢 Deployment
+To build for production:
+```bash
+yarn build
+```
+
+Navigate to your Mav-Mobile-UI folder
+Select the Dist folder 
+Compress to (ZIP)
+Log into box on Moba using Session > SSH and putting IP in Remote Host. 
+Creds are mav:mav
+Drag and drop dist.zip into file explorer menu on left hand side (has to be named dist.zip exactly).
+Run command 
+```bash
+sudo ./integrate-web-ui.sh
+```
+Run 
+
+```bash
+sudo nano web-static/index.html
+``` 
+
+

package.json

@@ -32,7 +32,8 @@
     "react-tabs": "^6.1.0",
     "react-use": "^17.6.0",
     "sonner": "^2.0.7",
-    "tailwindcss": "^4.1.11"
+    "tailwindcss": "^4.1.11",
+    "use-debounce": "^10.0.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.32.0",

src/App.tsx

@@ -19,8 +19,8 @@ function App() {
             <Routes>
               <Route path="/" element={<Container />}>
                 <Route index element={<Dashboard />} />
-                <Route path="camera-settings" element={<FrontCamera />} />
+                <Route path="a-camera-settings" element={<FrontCamera />} />
-                <Route path="rear-camera-settings" element={<RearCamera />} />
+                <Route path="b-camera-settings" element={<RearCamera />} />
                 <Route path="system-settings" element={<SystemSettings />} />
                 <Route path="session-settings" element={<Session />} />
                 <Route path="*" element={<Navigate to="/" replace />} />

src/components/CameraOverview/SnapshotContainer.tsx

@@ -1,11 +1,8 @@
 import { useGetOverviewSnapshot } from "../../hooks/useGetOverviewSnapshot";
-import type { ZoomInOptions } from "../../types/types";
 import NavigationArrow from "../UI/NavigationArrow";
-import { useCameraZoom } from "../../hooks/useCameraZoom";
+
-import { useEffect } from "react";
 import Loading from "../UI/Loading";
 import ErrorState from "../UI/ErrorState";
-
 type SnapshotContainerProps = {
   side: string;
   settingsPage?: boolean;
@@ -13,52 +10,20 @@ type SnapshotContainerProps = {
   onZoomLevelChange?: (level: number) => void;
 };
 
-export const SnapshotContainer = ({
+export const SnapshotContainer = ({ side, settingsPage }: SnapshotContainerProps) => {
-  side,
-  settingsPage,
-  zoomLevel,
-  onZoomLevelChange,
-}: SnapshotContainerProps) => {
   const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side);
-  const cameraControllerSide =
-    side === "CameraA" ? "CameraControllerA" : "CameraControllerB";
-  const { mutation } = useCameraZoom({ camera: cameraControllerSide });
-
-  const handleZoomClick = () => {
-    const baseLevel = zoomLevel ?? 1;
-    const newLevel = baseLevel >= 8 ? 1 : baseLevel * 2;
-
-    if (onZoomLevelChange) onZoomLevelChange(newLevel);
-
-    if (!zoomLevel) return;
-  };
-
-  useEffect(() => {
-    if (zoomLevel) {
-      const zoomInOptions: ZoomInOptions = {
-        camera: cameraControllerSide,
-        multiplier: zoomLevel,
-      };
-      mutation.mutate(zoomInOptions);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [zoomLevel]);
 
   return (
     <div className="flex flex-col md:flex-row">
       <NavigationArrow side={side} settingsPage={settingsPage} />
-      <div className="w-full">
+      <div className="w-full bg-[#253445] rounded-md overflow-hidden md:h-[500px] lg:h-[70vh]">
         {isError && <ErrorState />}
         {isPending && (
-          <div className="my-50 h-[50%]">
+          <div className="absolute inset-0 grid place-items-center">
             <Loading message="Camera Preview" />
           </div>
         )}
-        <canvas
+        <canvas ref={canvasRef} className="absolute w-full h-full z-20" />
-          onClick={handleZoomClick}
-          ref={canvasRef}
-          className="absolute inset-0 object-contain min-h-[100%] z-20"
-        />
       </div>
     </div>
   );

src/components/CameraSettings/CameraSettingFields.tsx

@@ -4,14 +4,14 @@ import { useEffect, useMemo, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
 import CardHeader from "../UI/CardHeader";
-import { useCameraZoom } from "../../hooks/useCameraZoom";
+import { useCameraMode, useCameraZoom } from "../../hooks/useCameraZoom";
-import { parseRTSPUrl } from "../../utils/utils";
+import { parseRTSPUrl, reverseZoomMapping, zoomMapping } from "../../utils/utils";
 
 type CameraSettingsProps = {
   initialData: CameraConfig;
   updateCameraConfig: (values: CameraSettingValues) => Promise<void> | void;
   zoomLevel?: number;
-  onZoomLevelChange?: (level: number) => void;
+  onZoomLevelChange?: (level: number | undefined) => void;
   updateCameraConfigError: null | Error;
 };
 
@@ -20,38 +20,22 @@ const CameraSettingFields = ({
   updateCameraConfig,
   zoomLevel,
   onZoomLevelChange,
-  updateCameraConfigError,
 }: CameraSettingsProps) => {
   const [showPwd, setShowPwd] = useState(false);
+
   const cameraControllerSide = initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB";
   const { mutation, query } = useCameraZoom({ camera: cameraControllerSide });
-  const zoomOptions = [1, 2, 4, 8];
+  const { cameraModeQuery, cameraModeMutation } = useCameraMode({ camera: cameraControllerSide });
-
+  const zoomOptions = [1, 2, 4];
+  const magnification = query?.data?.propMagnification?.value;
+  const apiZoom = reverseZoomMapping(magnification);
   const parsed = parseRTSPUrl(initialData?.propURI?.value);
+  const cameraMode = cameraModeQuery?.data?.propDayNightMode?.value;
 
   useEffect(() => {
     if (!query?.data) return;
-    const apiZoom = getZoomLevel(query.data);
     onZoomLevelChange?.(apiZoom);
-  }, [query?.data, onZoomLevelChange]);
+  }, [query?.data, onZoomLevelChange, apiZoom]);
-
-  const getZoomLevel = (levelstring: string | undefined) => {
-    switch (levelstring) {
-      case "1x":
-        return 1;
-
-      case "2x":
-        return 2;
-
-      case "4x":
-        return 4;
-
-      case "8x":
-        return 8;
-      default:
-        return 1;
-    }
-  };
 
   const initialValues = useMemo<CameraSettingValues>(
     () => ({
@@ -60,11 +44,11 @@ const CameraSettingFields = ({
       userName: parsed?.username ?? "",
       password: parsed?.password ?? "",
       id: initialData?.id,
-
+      mode: cameraMode ?? "day",
-      zoom: zoomLevel,
+      zoom: apiZoom,
     }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+
-    [initialData?.id, initialData?.propURI?.value, zoomLevel]
+    [initialData?.id, initialData?.propURI?.value, parsed?.username, parsed?.password, cameraMode, apiZoom]
   );
 
   const validateValues = (values: CameraSettingValues) => {
@@ -80,15 +64,18 @@ const CameraSettingFields = ({
 
   const handleRadioButtonChange = async (levelNumber: number) => {
     if (!onZoomLevelChange || !zoomLevel) return;
+    const text = zoomMapping(levelNumber);
     onZoomLevelChange(levelNumber);
 
     const zoomInOptions: ZoomInOptions = {
       camera: cameraControllerSide,
       multiplier: levelNumber,
+      multiplierText: text,
     };
 
     mutation.mutate(zoomInOptions);
   };
+
   const selectedZoom = zoomLevel ?? 1;
   return (
     <Formik
@@ -98,8 +85,8 @@ const CameraSettingFields = ({
       validateOnChange={false}
       enableReinitialize
     >
-      {({ errors, touched }) => (
+      {({ errors, touched, values, setFieldValue, isSubmitting }) => (
-        <Form className="flex flex-col space-y-6 p-2">
+        <Form className="flex flex-col space-y-6 p-2 overflow-x-hidden">
           <div className="flex flex-col space-y-2 relative">
             <label htmlFor="friendlyName">Name</label>
             {touched.friendlyName && errors.friendlyName && (
@@ -111,7 +98,6 @@ const CameraSettingFields = ({
               type="text"
               className="p-2 border border-gray-400 rounded-lg"
               placeholder="Enter camera name"
-              disabled
             />
           </div>
 
@@ -126,7 +112,6 @@ const CameraSettingFields = ({
               type="text"
               className="p-2 border border-gray-400 rounded-lg"
               placeholder="RTSP://..."
-              disabled
             />
           </div>
 
@@ -142,7 +127,6 @@ const CameraSettingFields = ({
               className="p-2 border border-gray-400 rounded-lg"
               placeholder="Enter user name"
               autoComplete="username"
-              disabled
             />
           </div>
 
@@ -158,7 +142,6 @@ const CameraSettingFields = ({
                 type={showPwd ? "text" : "password"}
                 className="p-2 border border-gray-400 rounded-lg w-full "
                 placeholder="Enter password"
-                disabled
               />
               <FontAwesomeIcon
                 type="button"
@@ -169,7 +152,7 @@ const CameraSettingFields = ({
             </div>
             <div className="my-3">
               <CardHeader title="Zoom settings" />
-              <div className="mx-auto grid grid-cols-4 items-center">
+              <div className="mx-auto grid grid-cols-3 place-items-center">
                 {zoomOptions.map((zoom) => (
                   <div key={zoom} className="my-3">
                     <Field
@@ -187,27 +170,53 @@ const CameraSettingFields = ({
                    peer-checked:border-2 peer-checked:border-blue-900  
                    peer-checked:text-blue-600 peer-checked:bg-gray-100"
                     >
-                      x{zoom}
+                      {zoomMapping(zoom)}
+                    </label>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div>
+              <CardHeader title="Mode" />
+              <div
+                role="radiogroup"
+                aria-label="Camera mode"
+                className="mx-auto grid grid-cols-2 place-items-center gap-3"
+              >
+                {["day", "night"].map((el) => (
+                  <div key={el} className="my-3">
+                    <Field
+                      type="radio"
+                      name="mode"
+                      value={el}
+                      checked={values.mode === el}
+                      id={`mode-${el}`}
+                      className="peer hidden"
+                      disabled={cameraModeMutation.isPending}
+                      onChange={async () => {
+                        setFieldValue("mode", el);
+                        await cameraModeMutation.mutateAsync({ camera: cameraControllerSide, mode: el });
+                      }}
+                    />
+                    <label
+                      htmlFor={`mode-${el}`}
+                      className={`px-8 py-2 rounded-md border border-gray-300
+                peer-checked:border-2 peer-checked:border-blue-900
+                peer-checked:text-blue-600 peer-checked:bg-gray-100
+                ${cameraModeMutation.isPending ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`}
+                    >
+                      {el === "day" ? "Day" : "Night"}
                     </label>
                   </div>
                 ))}
               </div>
             </div>
             <div className="mt-3">
-              {updateCameraConfigError ? (
+              {
-                <button className="bg-red-500 text-white rounded-lg p-2 mx-auto h-[100%] w-full" disabled>
+                <button type="submit" className="bg-green-700 text-white rounded-lg p-2 mx-auto w-full">
-                  Retry
+                  {isSubmitting ? "Saving" : "Save settings"}
                 </button>
-              ) : (
+              }
-                <button
-                  type="submit"
-                  className="bg-blue-700 text-white rounded-lg p-2 mx-auto h-[100%] w-full"
-                  disabled
-                >
-                  {/* {isSubmitting ? "Saving" : "Save settings"} bg-[#26B170] */}
-                  {"Disabled: Coming soon"}
-                </button>
-              )}
             </div>
           </div>
         </Form>

src/components/CameraSettings/CameraSettings.tsx

@@ -13,15 +13,14 @@ const CameraSettings = ({
   title: string;
   side: string;
   zoomLevel?: number;
-  onZoomLevelChange?: (level: number) => void;
+  onZoomLevelChange?: (level: number | undefined) => void;
 }) => {
   const { data, updateCameraConfig, updateCameraConfigError } = useFetchCameraConfig(side);
 
   return (
-    <Card className="overflow-hidden min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[40%] p-4">
+    <Card className="overflow-x-visible min-h-[40vh] md:min-h-[60vh] lg:w-[40%] p-4">
       <div className="relative flex flex-col space-y-3">
         <CardHeader title={title} icon={faWrench} />
-
         {
           <CameraSettingFields
             initialData={data}

src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx

@@ -8,8 +8,8 @@ import SightingOverview from "../SightingOverview/SightingOverview";
 const FrontCameraOverviewCard = () => {
   const navigate = useNavigate();
   const handlers = useSwipeable({
-    onSwipedRight: () => navigate("/camera-settings"),
+    onSwipedRight: () => navigate("/a-camera-settings"),
-    onSwipedLeft: () => navigate("/rear-camera-settings"),
+    onSwipedLeft: () => navigate("/b-camera-settings"),
     trackMouse: true,
   });
 

src/components/FrontCameraSettings/OverviewVideoContainer.tsx

@@ -20,17 +20,17 @@ const OverviewVideoContainer = ({
   const location = useLocation();
   const handlers = useSwipeable({
     onSwipedLeft: () => {
-      if (location.pathname === "/rear-camera-settings") return;
+      if (location.pathname === "/b-camera-settings") return;
       navigate("/");
     },
     onSwipedRight: () => {
-      if (location.pathname === "/camera-settings") return;
+      if (location.pathname === "/a-camera-settings") return;
       navigate("/");
     },
     trackMouse: true,
   });
   return (
-    <Card className={clsx("relative min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[70%] overflow-y-hidden")}>
+    <Card className={clsx("relative min-h-[40vh] md:min-h-[40vh] max-h-[70vh] lg:w-[70%] overflow-y-hidden")}>
       <div className="w-full" {...handlers}>
         <SnapshotContainer
           side={side}

src/components/PlateStack/NumberPlate.tsx

@@ -40,9 +40,7 @@ const NumberPlate = ({ motion, vrm, size }: NumberPlateProps) => {
 
   return (
     <div
-      className={`relative ${options.plateWidth} ${
+      className={`relative ${options.plateWidth} ${options.borderWidth} border-black rounded-xl text-nowrap
-        options.borderWidth
-      } border-black rounded-xl text-nowrap
         text-black px-6 py-2
         ${motion ? "bg-yellow-400" : "bg-white"}`}
     >
@@ -50,9 +48,7 @@ const NumberPlate = ({ motion, vrm, size }: NumberPlateProps) => {
         <div className="absolute inset-y-0 left-0 bg-blue-600 w-8 flex flex-col">
           <GB />
         </div>
-        <p className={`pl-4 font-extrabold ${options.textSize} text-right`}>
+        <p className={`pl-4 font-extrabold ${options.textSize} text-right`}>{vrm && formatNumberPlate(vrm)}</p>
-          {vrm && formatNumberPlate(vrm)}
-        </p>
       </div>
     </div>
   );

src/components/RearCameraOverview/RearCameraOverviewCard.tsx

@@ -13,7 +13,7 @@ type CardProps = React.HTMLAttributes<HTMLDivElement>;
 const RearCameraOverviewCard = ({ className }: CardProps) => {
   const navigate = useNavigate();
   const handlers = useSwipeable({
-    onSwipedLeft: () => navigate("/rear-camera-settings"),
+    onSwipedLeft: () => navigate("/b-camera-settings"),
     trackMouse: true,
   });
   const { mostRecent } = useSightingFeedContext();

src/components/SettingForms/BearerType/BearerTypeCard.tsx

@@ -4,7 +4,7 @@ import BearerTypeFields from "./BearerTypeFields";
 
 const BearerTypeCard = () => {
   return (
-    <Card className="p-4">
+    <Card className="p-4 h-60">
       <CardHeader title="Bearer Type" />
       <BearerTypeFields />
     </Card>

src/components/SettingForms/BearerType/BearerTypeFields.tsx

@@ -1,37 +1,12 @@
-import { Field, Form, Formik } from "formik";
+import { Field, useFormikContext } from "formik";
 import FormToggle from "../components/FormToggle";
-import { useCameraOutput } from "../../../hooks/useCameraOutput";
-import { cleanArray } from "../../../utils/utils";
 import FormGroup from "../components/FormGroup";
-import type { BearerTypeFieldType } from "../../../types/types";
+import type { BearerTypeFieldType, InitialValuesForm } from "../../../types/types";
-
-export const ValuesComponent = () => {
-  return null;
-};
 
 const BearerTypeFields = () => {
-  const { dispatcherQuery, dispatcherMutation } = useCameraOutput();
+  useFormikContext<BearerTypeFieldType & InitialValuesForm>();
-
-  const format = dispatcherQuery?.data?.propFormat?.value;
-  const rawOptions = dispatcherQuery?.data?.propFormat?.accepted;
-  const enabled = dispatcherQuery?.data?.propEnabled?.value;
-  const verbose = dispatcherQuery?.data?.propVerbose?.value;
-  const options = cleanArray(rawOptions);
-
-  const initialValues: BearerTypeFieldType = {
-    format: format ?? "JSON",
-    enabled: enabled === "true",
-    verbose: verbose === "true",
-  };
-
-  const handleSubmit = async (values: BearerTypeFieldType) => {
-    await dispatcherMutation.mutateAsync(values);
-  };
 
   return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
-      {({ isSubmitting }) => (
-        <Form>
     <div className="flex flex-col space-y-4 px-2">
       <FormGroup>
         <label htmlFor="format">Format</label>
@@ -41,29 +16,20 @@ const BearerTypeFields = () => {
           id="format"
           className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
         >
-                {options?.map((option: string) => (
+          <option key={"JSON"} value={"JSON"}>
-                  <option key={option} value={option}>
+            JSON
-                    {option}
+          </option>
+          <option key={"BOF2"} value={"BOF2"}>
+            BOF2
           </option>
-                ))}
         </Field>
       </FormGroup>
       <FormGroup>
         <div className="flex flex-col space-y-4">
           <FormToggle name="enabled" label="Enabled" />
-                <FormToggle name="verbose" label="Verbose" />
         </div>
       </FormGroup>
-            <button
-              type="submit"
-              className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
-            >
-              {isSubmitting || dispatcherMutation.isPending ? "Saving..." : "Save Changes"}
-            </button>
     </div>
-        </Form>
-      )}
-    </Formik>
   );
 };
 

src/components/SettingForms/Channel1-JSON/ChannelCard.tsx

@@ -1,12 +1,54 @@
+import { useFormikContext, type FormikTouched } from "formik";
 import Card from "../../UI/Card";
 import CardHeader from "../../UI/CardHeader";
 import ChannelFields from "./ChannelFields";
+import type { BearerTypeFieldType, InitialValuesForm } from "../../../types/types";
+import { useCameraBackOfficeOutput } from "../../../hooks/useBackOfficeConfig";
+import { useEffect, useMemo } from "react";
+
+type ChannelCardProps = {
+  touched: FormikTouched<BearerTypeFieldType & InitialValuesForm>;
+  isSubmitting: boolean;
+  isBof2ConstantsLoading: boolean;
+  isDispatcherLoading: boolean;
+};
+
+const ChannelCard = ({ touched, isSubmitting, isBof2ConstantsLoading, isDispatcherLoading }: ChannelCardProps) => {
+  const { values, setFieldValue } = useFormikContext<BearerTypeFieldType & InitialValuesForm>();
+  const { backOfficeQuery } = useCameraBackOfficeOutput(values?.format);
+  const isBackOfficeQueryLoading = backOfficeQuery?.isFetching;
+
+  const mapped = useMemo(() => {
+    const d = backOfficeQuery?.data;
+    return {
+      backOfficeURL: d?.propBackofficeURL?.value ?? "",
+      username: d?.propUsername?.value ?? "",
+      password: d?.propPassword?.value ?? "",
+      connectTimeoutSeconds: Number(d?.propConnectTimeoutSeconds?.value),
+      readTimeoutSeconds: Number(d?.propReadTimeoutSeconds?.value),
+    };
+  }, [backOfficeQuery?.data]);
+
+  useEffect(() => {
+    if (!backOfficeQuery?.isSuccess) return;
+    for (const [key, value] of Object.entries(mapped)) {
+      setFieldValue(key, value);
+    }
+  }, [backOfficeQuery.isSuccess, mapped, setFieldValue]);
 
-const ChannelCard = () => {
   return (
-    <Card className="p-4">
+    <Card className="p-4 overflow-y-auto ">
-      <CardHeader title="Channel 1 (JSON)" />
+      <CardHeader title={`Channel (${values?.format})`} />
-      <ChannelFields />
+      {!isBof2ConstantsLoading && !isDispatcherLoading && !isBackOfficeQueryLoading ? (
+        <ChannelFields
+          touched={touched}
+          isSubmitting={isSubmitting}
+          backOfficeData={backOfficeQuery}
+          format={values?.format}
+        />
+      ) : (
+        <>Loading...</>
+      )}
     </Card>
   );
 };

src/components/SettingForms/Channel1-JSON/ChannelFields.tsx

@@ -1,79 +1,52 @@
-import { Field, Form, Formik, useFormikContext } from "formik";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Field, useFormikContext, type FormikTouched } from "formik";
 import FormGroup from "../components/FormGroup";
 import { useEffect, useState } from "react";
 import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useCameraOutput } from "../../../hooks/useCameraOutput";
+import type { BearerTypeFieldType, InitialValuesForm } from "../../../types/types";
-import type { InitialValuesForm, InitialValuesFormErrors } from "../../../types/types";
 import { toast } from "sonner";
+import type { UseQueryResult } from "@tanstack/react-query";
 
-const ChannelFields = () => {
+type ChannelFieldsProps = {
+  touched: FormikTouched<BearerTypeFieldType & InitialValuesForm>;
+  isSubmitting: boolean;
+
+  backOfficeData: UseQueryResult<any, Error>;
+  format?: string;
+};
+
+const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) => {
   const [showPwd, setShowPwd] = useState(false);
-  const { backOfficeQuery, backOfficeMutation } = useCameraOutput();
+  const { submitCount, isValid, values, errors } = useFormikContext<BearerTypeFieldType & InitialValuesForm>();
-
-  const backOfficeURL = backOfficeQuery?.data?.propBackofficeURL?.value;
-  const username = backOfficeQuery?.data?.propUsername?.value;
-  const password = backOfficeQuery?.data?.propPassword?.value;
-  const connectTimeoutSeconds = backOfficeQuery?.data?.propConnectTimeoutSeconds?.value;
-  const readTimeoutSeconds = backOfficeQuery?.data?.propReadTimeoutSeconds?.value;
-
-  const initialValues: InitialValuesForm = {
-    backOfficeURL: backOfficeURL ?? "",
-    username: username ?? "",
-    password: password ?? "",
-    connectTimeoutSeconds: Number(connectTimeoutSeconds),
-    readTimeoutSeconds: Number(readTimeoutSeconds),
-  };
-
-  const handleSubmit = async (values: InitialValuesForm) => {
-    await backOfficeMutation.mutateAsync(values);
-  };
 
   const ValidationToastOnce = () => {
-    const { submitCount, isValid } = useFormikContext();
     useEffect(() => {
       if (submitCount > 0 && !isValid) {
         toast.error("Check fields are filled in");
       }
-    }, [submitCount, isValid]);
+    }, []);
     return null;
   };
 
-  const validateValues = (values: InitialValuesForm): InitialValuesFormErrors => {
-    const errors: InitialValuesFormErrors = {};
-
-    const url = values.backOfficeURL?.trim();
-    const username = values.username?.trim();
-    const password = values.password?.trim();
-
-    if (!url) {
-      errors.backOfficeURL = "Required";
-    }
-
-    if (!username) errors.username = "Required";
-    if (!password) errors.password = "Required";
-
-    const read = Number(values.readTimeoutSeconds);
-    if (!Number.isFinite(read)) {
-      errors.readTimeoutSeconds = "Must be a number";
-    } else if (read < 0) {
-      errors.readTimeoutSeconds = "Must be ≥ 0";
-    }
-
-    const connect = Number(values.connectTimeoutSeconds);
-    if (!Number.isFinite(connect)) {
-      errors.connectTimeoutSeconds = "Must be a number";
-    } else if (connect < 0) {
-      errors.connectTimeoutSeconds = "Must be ≥ 0";
-    }
-
-    return errors;
-  };
-
   return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize validate={validateValues}>
+    <>
-      {({ errors, touched, isSubmitting }) => (
+      {format?.toLowerCase() !== "bof2" && format?.toLowerCase() !== "json" ? (
-        <Form>
+        <>
+          <div className="mt-4 flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center">
+            <div className="mb-3 rounded-xl bg-slate-800 px-3 py-1 text-xs uppercase tracking-wider text-slate-400">
+              Format coming soon
+            </div>
+
+            <p className="max-w-md text-slate-300">
+              Output configuration currently supports <span className="font-bold text-blue-400">JSON</span> or{" "}
+              <span className="font-bold text-emerald-400">BOF2</span>. <br /> More formats will be added in future
+              updates.
+            </p>
+          </div>
+        </>
+      ) : (
+        <>
           <div className="flex flex-col space-y-2 px-2">
             <FormGroup>
               <label htmlFor="backoffice" className="m-0">
@@ -85,9 +58,7 @@ const ChannelFields = () => {
                 type="text"
                 id="backoffice"
                 placeholder="https://www.backoffice.com"
-                className={`p-1.5 border ${
+                className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
-                  errors.backOfficeURL && touched.backOfficeURL ? "border-red-500" : "border-gray-400 "
-                } rounded-lg w-full md:w-60`}
               />
             </FormGroup>
             <FormGroup>
@@ -97,9 +68,7 @@ const ChannelFields = () => {
                 type="text"
                 id="username"
                 placeholder="Back office username"
-                className={`p-1.5 border ${
+                className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
-                  errors.username && touched.username ? "border-red-500" : "border-gray-400 "
-                } rounded-lg w-full md:w-60`}
               />
             </FormGroup>
             <FormGroup>
@@ -146,17 +115,133 @@ const ChannelFields = () => {
                 } rounded-lg w-full md:w-60`}
               />
             </FormGroup>
+            {/* Overview quality and scale */}
+            <FormGroup>
+              <label htmlFor="overviewQuality">Overview quality and scale</label>
+              <Field
+                name={"overviewQuality"}
+                as="select"
+                id="overviewQuality"
+                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+              >
+                <option value={"HIGH"}>High</option>
+                <option value={"MEDIUM"}>Medium</option>
+                <option value={"LOW"}>Low</option>
+              </Field>
+            </FormGroup>
+            {/* propOverviewImageScaleFactor cropSizeFactor */}
+            <FormGroup>
+              <label htmlFor="cropSizeFactor">Crop Size Factor</label>
+              <Field
+                name={"cropSizeFactor"}
+                as="select"
+                id="cropSizeFactor"
+                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+              >
+                <option value={"FULL"}>Full</option>
+                <option value={"3/4"}>3/4</option>
+                <option value={"1/2"}>1/2</option>
+                <option value={"1/4"}>1/4</option>
+              </Field>
+            </FormGroup>
+            {format?.toLowerCase() === "bof2" && (
+              <>
+                <div className="space-y-3">
+                  <div className="border-b border-gray-500 my-3">
+                    <h2 className="font-bold">{values.format} Constants</h2>
                   </div>
+                  <FormGroup>
+                    <label htmlFor="FFID">Feed ID / Force ID</label>
+                    <Field
+                      name={"FFID"}
+                      type="text"
+                      id="FFID"
+                      placeholder="ABC123"
+                      className={`p-1.5 border ${
+                        errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                      } rounded-lg w-full md:w-60`}
+                    />
+                  </FormGroup>
+                  <FormGroup>
+                    <label htmlFor="SCID">Source ID / Camera ID</label>
+                    <Field
+                      name={"SCID"}
+                      type="text"
+                      id="SCID"
+                      placeholder="DEF345"
+                      className={`p-1.5 border ${
+                        errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                      } rounded-lg w-full md:w-60`}
+                    />
+                  </FormGroup>
+                  <FormGroup>
+                    <label htmlFor="timestampSource">Timestamp Source</label>
+                    <Field
+                      name={"timestampSource"}
+                      as="select"
+                      id="timestampSource"
+                      className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+                    >
+                      <option value={"UTC"}>UTC</option>
+                      <option value={"local"}>Local</option>
+                    </Field>
+                  </FormGroup>
+                  <FormGroup>
+                    <label htmlFor="GPSFormat">GPS Format</label>
+                    <Field
+                      name={"GPSFormat"}
+                      as="select"
+                      id="GPSFormat"
+                      className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+                    >
+                      <option value={"Minutes"}>Minutes</option>
+                      <option value={"Decimal Degrees"}>Decimal degrees</option>
+                    </Field>
+                  </FormGroup>
+                </div>
+                <div className="space-y-3">
+                  <div className="border-b border-gray-500 my-3">
+                    <h2 className="font-bold">{values.format} Lane ID Config</h2>
+                  </div>
+                  <FormGroup>
+                    <label htmlFor="LID1">Lane ID 1 (Camera A)</label>
+                    <Field
+                      name={"LID1"}
+                      type="text"
+                      id="LID1"
+                      placeholder="10"
+                      className={`p-1.5 border ${
+                        errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                      } rounded-lg w-full md:w-60`}
+                    />
+                  </FormGroup>
+                  <FormGroup>
+                    <label htmlFor="LID2">Lane ID 2 (Camera B)</label>
+                    <Field
+                      name={"LID2"}
+                      type="text"
+                      id="LID2"
+                      placeholder="20"
+                      className={`p-1.5 border ${
+                        errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                      } rounded-lg w-full md:w-60`}
+                    />
+                  </FormGroup>
+                </div>
+              </>
+            )}
+          </div>
+
           <button
             type="submit"
             className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
           >
-            {isSubmitting || backOfficeMutation.isPending ? "Saving..." : "Save Changes"}
+            {isSubmitting ? "Saving..." : "Save Changes"}
           </button>
           <ValidationToastOnce />
-        </Form>
+        </>
       )}
-    </Formik>
+    </>
   );
 };
 

src/components/SettingForms/SettingForms/SettingForms.tsx

@@ -1,12 +1,151 @@
+import { Form, Formik } from "formik";
 import BearerTypeCard from "../BearerType/BearerTypeCard";
 import ChannelCard from "../Channel1-JSON/ChannelCard";
+import { useCameraOutput, useGetDispatcherConfig } from "../../../hooks/useCameraOutput";
+import type {
+  BearerTypeFieldType,
+  InitialValuesForm,
+  InitialValuesFormErrors,
+  OptionalBOF2Constants,
+  OptionalBOF2LaneIDs,
+} from "../../../types/types";
+import { useQueryClient } from "@tanstack/react-query";
+import { useUpdateBackOfficeConfig } from "../../../hooks/useBackOfficeConfig";
+import { useFormVaidate } from "../../../hooks/useFormValidate";
+import { useSightingAmend } from "../../../hooks/useSightingAmend";
+import StoreCard from "../Store/StoreCard";
 
 const SettingForms = () => {
+  const qc = useQueryClient();
+  const { dispatcherQuery, dispatcherMutation, backOfficeDispatcherMutation, bof2LandMutation, laneIdQuery } =
+    useCameraOutput();
+  const { backOfficeMutation } = useUpdateBackOfficeConfig();
+  const { bof2ConstantsQuery } = useGetDispatcherConfig();
+  const { validateMutation } = useFormVaidate();
+  const { sightingAmendQuery, sightingAmendMutation } = useSightingAmend();
+
+  const format = dispatcherQuery?.data?.propFormat?.value;
+  const enabled = dispatcherQuery?.data?.propEnabled?.value;
+
+  const sightingQuality = sightingAmendQuery?.data?.propOverviewQuality?.value;
+  const cropSizeFactor = sightingAmendQuery?.data?.propOverviewImageScaleFactor?.value;
+
+  const laneID = laneIdQuery?.data?.id;
+  const LID1 = laneIdQuery?.data?.propLaneID1?.value;
+  const LID2 = laneIdQuery?.data?.propLaneID2?.value;
+
+  const FFID = bof2ConstantsQuery?.data?.propFeedIdentifier?.value;
+  const SCID = bof2ConstantsQuery?.data?.propSourceIdentifier?.value;
+  const GPSFormat = bof2ConstantsQuery?.data?.propGpsFormat?.value;
+  const timestampSource = bof2ConstantsQuery?.data?.propTimeZoneType?.value;
+
+  const isDispatcherLoading = dispatcherQuery?.isFetching;
+  const isBof2ConstantsLoading = bof2ConstantsQuery?.isFetching;
+
+  const initialValues: BearerTypeFieldType & InitialValuesForm & OptionalBOF2Constants & OptionalBOF2LaneIDs = {
+    format: format ?? "JSON",
+    enabled: enabled === "true",
+    backOfficeURL: "",
+    username: "",
+    password: "",
+    connectTimeoutSeconds: Number(5),
+    readTimeoutSeconds: Number(15),
+    overviewQuality: sightingQuality ?? "HIGH",
+    cropSizeFactor: cropSizeFactor ?? "3/4",
+
+    // Bof2 - optional constants
+    FFID: FFID ?? "",
+    SCID: SCID ?? "",
+    timestampSource: timestampSource ?? "",
+    GPSFormat: GPSFormat ?? "",
+
+    //BOF2 - optional Lane IDs
+    laneId: laneID ?? "",
+    LID1: LID1 ?? "",
+    LID2: LID2 ?? "",
+  };
+
+  const validateValues = (values: InitialValuesForm): InitialValuesFormErrors => {
+    const errors: InitialValuesFormErrors = {};
+
+    const read = Number(values.readTimeoutSeconds);
+    if (!Number.isFinite(read)) {
+      errors.readTimeoutSeconds = "Must be a number";
+    } else if (read < 0) {
+      errors.readTimeoutSeconds = "Must be ≥ 0";
+    }
+
+    const connect = Number(values.connectTimeoutSeconds);
+    if (!Number.isFinite(connect)) {
+      errors.connectTimeoutSeconds = "Must be a number";
+    } else if (connect < 0) {
+      errors.connectTimeoutSeconds = "Must be ≥ 0";
+    }
+    return errors;
+  };
+
+  const handleSubmit = async (
+    values: BearerTypeFieldType & InitialValuesForm & OptionalBOF2Constants & OptionalBOF2LaneIDs
+  ) => {
+    const validResponse = await validateMutation.mutateAsync(values);
+
+    const dispatcherData = {
+      format: values.format,
+      enabled: values.enabled,
+    };
+    const result = await dispatcherMutation.mutateAsync(dispatcherData);
+
+    if (result?.id) {
+      qc.invalidateQueries({ queryKey: ["dispatcher"] });
+      qc.invalidateQueries({ queryKey: ["backoffice", values.format] });
+
+      if (validResponse?.reason === "OK") {
+        await backOfficeMutation.mutateAsync(values);
+        await sightingAmendMutation.mutateAsync(values);
+
+        if (values.format.toLowerCase() === "bof2") {
+          const bof2ConstantsData: OptionalBOF2Constants = {
+            FFID: values.FFID,
+            SCID: values.SCID,
+            timestampSource: values.timestampSource,
+            GPSFormat: values.GPSFormat,
+          };
+
+          const bof2LaneData: OptionalBOF2LaneIDs = {
+            laneId: laneIdQuery?.data?.id,
+            LID1: values.LID1,
+            LID2: values.LID2,
+          };
+          await bof2LandMutation.mutateAsync(bof2LaneData);
+          await backOfficeDispatcherMutation.mutateAsync(bof2ConstantsData);
+        }
+      } else {
+        console.log("error");
+        return;
+      }
+    }
+  };
+
   return (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit} validate={validateValues} enableReinitialize>
+      {({ isSubmitting, touched }) => (
+        <Form>
           <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-2 sm:px-4 lg:px-0 w-full">
+            <div>
               <BearerTypeCard />
-      <ChannelCard />
+              <StoreCard />
             </div>
+
+            <ChannelCard
+              touched={touched}
+              isSubmitting={isSubmitting}
+              isDispatcherLoading={isDispatcherLoading}
+              isBof2ConstantsLoading={isBof2ConstantsLoading}
+            />
+          </div>
+        </Form>
+      )}
+    </Formik>
   );
 };
 

src/components/SettingForms/Sound/SoundSettingsFields.tsx

@@ -32,7 +32,6 @@ const SoundSettingsFields = () => {
       hotlistSoundVolume: state.hotlistSoundVolume,
       soundOptions: [...(state.soundOptions ?? [])],
     };
-
     dispatch({ type: "UPDATE", payload: updatedValues });
 
     const result = await mutation.mutateAsync({

src/components/SettingForms/Sound/SoundUpload.tsx

@@ -4,16 +4,21 @@ import type { SoundUploadValue } from "../../../types/types";
 import { useSoundContext } from "../../../context/SoundContext";
 import { toast } from "sonner";
 import { useCameraBlackboard } from "../../../hooks/useCameraBlackboard";
+import { useFileUpload } from "../../../hooks/useFileUpload";
 
 const SoundUpload = () => {
   const { state, dispatch } = useSoundContext();
   const { mutation } = useCameraBlackboard();
+  const { mutation: fileMutation } = useFileUpload({
+    queryKey: state.sightingSound ? [state.sightingSound] : undefined,
+  });
 
   const initialValues: SoundUploadValue = {
     name: "",
     soundFile: null,
     soundFileName: "",
     soundUrl: "",
+    uploadedAt: Date.now(),
   };
 
   const handleSubmit = async (values: SoundUploadValue) => {
@@ -37,10 +42,9 @@ const SoundUpload = () => {
       path: "soundSettings",
       value: updatedValues,
     });
+    await fileMutation.mutateAsync(values.soundFile);
     if (result.reason !== "OK") {
       toast.error("Cannot update sound settings");
-    } else {
-      toast.success(`${values.name} file added`);
     }
 
     dispatch({ type: "ADD", payload: values });
@@ -48,7 +52,7 @@ const SoundUpload = () => {
 
   return (
     <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
-      {({ setFieldValue, errors, setFieldError, values }) => (
+      {({ setFieldValue, errors, setFieldError }) => (
         <Form>
           <label htmlFor="soundFile" className="">
             Sound File
@@ -67,6 +71,12 @@ const SoundUpload = () => {
                   setFieldValue("name", e.target.files[0].name);
                   setFieldValue("soundFileName", e.target.files[0].name);
                   setFieldValue("soundFile", e.target.files[0]);
+                  setFieldValue("uploadedAt", Date.now());
+                  if (e?.target?.files[0]?.size >= 1 * 1024 * 1024) {
+                    setFieldError("soundFile", "larger than 1mb");
+                    toast.error("File larger than 1MB");
+                    return;
+                  }
                 } else {
                   setFieldError("soundFile", "Not an mp3 file");
                   toast.error("Not an mp3 file");
@@ -76,11 +86,6 @@ const SoundUpload = () => {
           </FormGroup>
 
           <div className="mt-4 flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center">
-            {!values.soundFile && (
-              <div className="mb-3 rounded-xl bg-slate-800 px-3 py-1 text-xs uppercase tracking-wider text-slate-400">
-                No uploaded sound files
-              </div>
-            )}
             <p className="max-w-md text-slate-300">
               Uploaded Sound files will appear in the <span className="font-bold">drop downs</span> once they are
               uploaded. They can be used for any <span className="text-blue-400">Sighting,</span>{" "}

src/components/SettingForms/Sound/SoundUploadCard.tsx

@@ -4,7 +4,7 @@ import SoundUpload from "./SoundUpload";
 
 const SoundUploadCard = () => {
   return (
-    <Card className="p-4 col-span-3 w-full">
+    <Card className="p-4 col-span-5 lg:col-span-3 w-full">
       <CardHeader title={"Sound upload"} />
       <SoundUpload />
     </Card>

src/components/SettingForms/Store/StoreCard.tsx

@@ -0,0 +1,14 @@
+import Card from "../../UI/Card";
+import CardHeader from "../../UI/CardHeader";
+import StoreFields from "./StoreFields";
+
+const StoreCard = () => {
+  return (
+    <Card className="p-4">
+      <CardHeader title="Store" />
+      <StoreFields />
+    </Card>
+  );
+};
+
+export default StoreCard;

src/components/SettingForms/Store/StoreFields.tsx

@@ -0,0 +1,29 @@
+import { useStoreDispatch } from "../../../hooks/useStoreDispatch";
+import VehicleSessionItem from "../../UI/VehicleSessionItem";
+
+const StoreFields = () => {
+  const { storeQuery } = useStoreDispatch();
+
+  const totalPending = storeQuery?.data?.totalPending;
+  const totalActive = storeQuery?.data?.totalActive;
+  const totalSent = storeQuery?.data?.totalSent;
+  const totalReceived = storeQuery?.data?.totalReceived;
+  const totalLost = storeQuery?.data?.totalLost;
+
+  if (storeQuery.isLoading) return <div className="p-4">Loading store data...</div>;
+  if (storeQuery.error) return <div className="p-4">Error: {storeQuery.error.message}</div>;
+
+  return (
+    <div className="p-4">
+      <ul className="text-white space-y-3">
+        <VehicleSessionItem sessionNumber={totalActive} textColour="text-gray-400" vehicleTag={"Total Active:"} />
+        <VehicleSessionItem sessionNumber={totalSent} textColour="text-blue-400" vehicleTag={"Total Sent:"} />
+        <VehicleSessionItem sessionNumber={totalReceived} textColour="text-green-400" vehicleTag={"Total Received:"} />
+        <VehicleSessionItem sessionNumber={totalPending} textColour="text-amber-400" vehicleTag={"Total Pending:"} />
+        <VehicleSessionItem sessionNumber={totalLost} textColour="text-red-400" vehicleTag={"Total Lost:"} />
+      </ul>
+    </div>
+  );
+};
+
+export default StoreFields;

src/components/SettingForms/System/SettingSaveRecall.tsx

@@ -2,6 +2,8 @@ import { toast } from "sonner";
 import type { SystemValues } from "../../../types/types";
 import { CAM_BASE } from "../../../utils/config";
 
+const camBase = import.meta.env.MODE !== "development" ? CAM_BASE : "";
+
 export async function handleSystemSave(values: SystemValues) {
   const payload = {
     // Build JSON
@@ -18,7 +20,7 @@ export async function handleSystemSave(values: SystemValues) {
   };
 
   try {
-    const response = await fetch(`${CAM_BASE}/api/update-config`, {
+    const response = await fetch(`${camBase}/api/update-config`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -29,11 +31,7 @@ export async function handleSystemSave(values: SystemValues) {
 
     if (!response.ok) {
       const text = await response.text().catch(() => "");
-      throw new Error(
+      throw new Error(`HTTP ${response.status} ${response.statusText}${text ? ` - ${text}` : ""}`);
-        `HTTP ${response.status} ${response.statusText}${
-          text ? ` - ${text}` : ""
-        }`
-      );
     }
   } catch (err) {
     if (err instanceof Error) {
@@ -47,10 +45,10 @@ export async function handleSystemSave(values: SystemValues) {
 }
 
 export async function handleSystemRecall() {
-  const url = `${CAM_BASE}/api/fetch-config?id=GLOBAL--Device`;
+  const url = `${camBase}/api/fetch-config?id=GLOBAL--Device`;
 
   const controller = new AbortController();
-  const timeoutId = setTimeout(() => controller.abort(), 7000);
+  const timeoutId = setTimeout(() => controller.abort(), 70000);
 
   try {
     const response = await fetch(url, {
@@ -61,11 +59,7 @@ export async function handleSystemRecall() {
 
     if (!response.ok) {
       const text = await response.text().catch(() => "");
-      throw new Error(
+      throw new Error(`HTTP ${response.status} ${response.statusText}${text ? ` - ${text}` : ""}`);
-        `HTTP ${response.status} ${response.statusText}${
-          text ? ` - ${text}` : ""
-        }`
-      );
     }
 
     const data = await response.json();
@@ -76,9 +70,7 @@ export async function handleSystemRecall() {
 
     const sntpIntervalRaw = data?.propSNTPIntervalMinutes?.value;
     let sntpInterval =
-      typeof sntpIntervalRaw === "number"
+      typeof sntpIntervalRaw === "number" ? sntpIntervalRaw : Number.parseInt(String(sntpIntervalRaw).trim(), 10);
-        ? sntpIntervalRaw
-        : Number.parseInt(String(sntpIntervalRaw).trim(), 10);
 
     if (!Number.isFinite(sntpInterval)) {
       sntpInterval = 60;

src/components/SettingForms/System/SystemConfigFields.tsx

@@ -4,21 +4,29 @@ import { useReboots } from "../../../hooks/useReboots";
 import { timezones } from "./timezones";
 import SystemFileUpload from "./SystemFileUpload";
 import type { SystemValues, SystemValuesErrors } from "../../../types/types";
-import { useSystemConfig } from "../../../hooks/useSystemConfig";
+import { useDNSSettings, useSystemConfig } from "../../../hooks/useSystemConfig";
 
 const SystemConfigFields = () => {
   const { saveSystemSettings, systemSettingsData, saveSystemSettingsLoading } = useSystemConfig();
-  const { softRebootMutation, hardRebootMutation } = useReboots();
+  const { hardRebootMutation } = useReboots();
+  const { dnsQuery, dnsMutation } = useDNSSettings();
 
+  const dnsPrimary = dnsQuery?.data?.propNameServerPrimary?.value;
+  const dnsSecondary = dnsQuery?.data?.propNameServerSecondary?.value;
   const initialvalues: SystemValues = {
     deviceName: systemSettingsData?.deviceName ?? "",
     timeZone: systemSettingsData?.timeZone ?? "",
     sntpServer: systemSettingsData?.sntpServer ?? "",
     sntpInterval: systemSettingsData?.sntpInterval ?? 60,
+    serverPrimary: dnsPrimary ?? "",
+    serverSecondary: dnsSecondary ?? "",
     softwareUpdate: null,
   };
 
-  const handleSubmit = (values: SystemValues) => saveSystemSettings(values);
+  const handleSubmit = async (values: SystemValues) => {
+    saveSystemSettings(values);
+    await dnsMutation.mutateAsync(values);
+  };
 
   const validateValues = (values: SystemValues) => {
     const errors: SystemValuesErrors = {};
@@ -30,9 +38,9 @@ const SystemConfigFields = () => {
     return errors;
   };
 
-  const handleSoftReboot = async () => {
+  // const handleSoftReboot = async () => {
-    await softRebootMutation.mutate();
+  //   await softRebootMutation.mutate();
-  };
+  // };
 
   const handleHardReboot = async () => {
     await hardRebootMutation.mutate();
@@ -102,6 +110,7 @@ const SystemConfigFields = () => {
               autoComplete="off"
             />
           </FormGroup>
+
           <FormGroup>
             <label htmlFor="sntpInterval" className="font-medium whitespace-nowrap md:w-1/2 text-left">
               SNTP Interval minutes
@@ -118,6 +127,34 @@ const SystemConfigFields = () => {
               className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
             />
           </FormGroup>
+          <FormGroup>
+            <label htmlFor="serverPrimary" className="font-medium whitespace-nowrap md:w-1/2 text-left">
+              Primary DNS Server
+            </label>
+
+            <Field
+              id="serverPrimary"
+              name="serverPrimary"
+              type="text"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter DNS primary address"
+              autoComplete="off"
+            />
+          </FormGroup>
+          <FormGroup>
+            <label htmlFor="serverSecondary" className="font-medium whitespace-nowrap md:w-1/2 text-left">
+              Secondary DNS Server
+            </label>
+
+            <Field
+              id="serverSecondary"
+              name="serverSecondary"
+              type="text"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter DNS secondary address"
+              autoComplete="off"
+            />
+          </FormGroup>
           <button
             type="submit"
             className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
@@ -130,13 +167,13 @@ const SystemConfigFields = () => {
             <p>Reboot</p>
           </div>
 
-          <button
+          {/* <button
             type="button"
             className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition  w-full md:w-[50%]"
             onClick={handleSoftReboot}
           >
             {softRebootMutation.isPending || isSubmitting ? "Rebooting..." : "Software Reboot"}
-          </button>
+          </button> */}
           <button
             type="button"
             className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full md:w-[50%]"

src/components/SettingForms/System/Upload.ts

@@ -10,16 +10,10 @@ type BlobFileUpload = {
   };
 };
 
-export async function sendBlobFileUpload({
+export async function sendBlobFileUpload({ file, opts }: BlobFileUpload): Promise<string> {
-  file,
-  opts,
-}: BlobFileUpload): Promise<string> {
   if (!file) throw new Error("No file supplied");
   if (!opts?.uploadUrl) throw new Error("No URL supplied");
 
-  if (file?.type !== "text/csv") {
-    throw new Error("This file is not supported, please upload a CSV file.");
-  }
   const timeoutMs = opts?.timeoutMs ?? 30000;
   const fieldName = opts?.fieldName ?? "upload";
   const fileName = opts?.overrideFileName ?? file?.name;
@@ -42,9 +36,7 @@ export async function sendBlobFileUpload({
     const bodyText = await resp.text();
 
     if (!resp.ok) {
-      throw new Error(
+      throw new Error(`Upload failed (${resp.status} ${resp.statusText}) from ${opts.uploadUrl} — ${bodyText}`);
-        `Upload failed (${resp.status} ${resp.statusText}) from ${opts.uploadUrl} — ${bodyText}`
-      );
     }
 
     return bodyText;
@@ -54,9 +46,7 @@ export async function sendBlobFileUpload({
     }
     // In browsers, fetch throws TypeError on network-level failures
     if (err instanceof TypeError) {
-      throw new Error(
+      throw new Error(`HTTP error uploading to ${opts.uploadUrl}: ${err.message}`);
-        `HTTP error uploading to ${opts.uploadUrl}: ${err.message}`
-      );
     }
     // Todo: fix error message response
     return `Hotlist Load OK`;

src/components/SettingForms/WiFi&Modem/ModemSettings.tsx

@@ -57,10 +57,12 @@ const ModemSettings = () => {
   return (
     <>
       <ModemToggle showSettings={showSettings} onShowSettings={setShowSettings} />
-      {!showSettings && (
+
       <Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
         {({ isSubmitting }) => (
           <Form className="flex flex-col space-y-5 px-2">
+            {!showSettings && (
+              <>
                 <FormGroup>
                   <label htmlFor="apn" className="font-medium whitespace-nowrap md:w-2/3">
                     APN
@@ -119,6 +121,8 @@ const ModemSettings = () => {
                     <option value="none">None</option>
                   </Field>
                 </FormGroup>
+              </>
+            )}
             <button
               type="submit"
               className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
@@ -128,7 +132,6 @@ const ModemSettings = () => {
           </Form>
         )}
       </Formik>
-      )}
     </>
   );
 };

src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx

@@ -5,6 +5,7 @@ import { useWifiAndModem } from "../../../hooks/useCameraWifiandModem";
 import { useState } from "react";
 import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { toast, Toaster } from "sonner";
 
 const WiFiSettingsForm = () => {
   const [showPwd, setShowPwd] = useState(false);
@@ -19,6 +20,13 @@ const WiFiSettingsForm = () => {
     encryption: "WPA2",
   };
 
+  const validatePassword = (password: string) => {
+    if (password.length < 8) {
+      toast.error("Password must be at least 8 characters long", { id: "password" });
+      return "Password must be at least 8 characters long";
+    }
+  };
+
   const handleSubmit = async (values: WifiSettingValues) => {
     const wifiConfig = {
       id: "ModemAndWifiManager-wifi",
@@ -37,6 +45,7 @@ const WiFiSettingsForm = () => {
     await wifiMutation.mutateAsync(wifiConfig);
   };
   return (
+    <>
       <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
         {({ isSubmitting }) => (
           <Form className="flex flex-col space-y-5 px-2">
@@ -63,7 +72,9 @@ const WiFiSettingsForm = () => {
                   type={showPwd ? "text" : "password"}
                   className="p-2 border border-gray-400 rounded-lg w-full"
                   placeholder="Enter Password"
+                  validate={validatePassword}
                 />
+
                 <FontAwesomeIcon
                   type="button"
                   className="absolute right-5 end-0"
@@ -97,6 +108,8 @@ const WiFiSettingsForm = () => {
           </Form>
         )}
       </Formik>
+      <Toaster />
+    </>
   );
 };
 

src/components/SightingsWidget/SightingWidget.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { HitKind, QueuedHit, ReducedSightingType, SightingType } from "../../types/types";
-import { BLANK_IMG, getSoundFileURL } from "../../utils/utils";
+import { BLANK_IMG } from "../../utils/utils";
 import NumberPlate from "../PlateStack/NumberPlate";
 import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
@@ -19,6 +19,7 @@ import { useIntegrationsContext } from "../../context/IntegrationsContext";
 import { useSoundContext } from "../../context/SoundContext";
 import Loading from "../UI/Loading";
 import { checkIsHotListHit, getNPEDCategory } from "../../utils/utils";
+import { useCachedSoundSrc } from "../../hooks/usecachedSoundSrc";
 
 function useNow(tickMs = 1000) {
   const [, setNow] = useState(() => Date.now());
@@ -43,21 +44,8 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
   useNow(1000);
   const { state } = useSoundContext();
 
-  const soundSrcNped = useMemo(() => {
+  const { src: soundSrcHotlist } = useCachedSoundSrc(state?.hotlistSound, state?.soundOptions, notification);
-    if (state?.NPEDsound?.includes(".mp3") || state.NPEDsound?.includes(".wav")) {
+  const { src: soundSrcNped } = useCachedSoundSrc(state?.NPEDsound, state?.soundOptions, popup);
-      const file = state.soundOptions?.find((item) => item.name === state.NPEDsound);
-      return file?.soundUrl ?? popup;
-    }
-    return getSoundFileURL(state.NPEDsound) ?? popup;
-  }, [state.NPEDsound, state.soundOptions]);
-
-  const soundSrcHotlist = useMemo(() => {
-    if (state?.hotlistSound?.includes(".mp3") || state.hotlistSound?.includes(".wav")) {
-      const file = state.soundOptions?.find((item) => item.name === state.hotlistSound);
-      return file?.soundUrl ?? notification;
-    }
-    return getSoundFileURL(state?.hotlistSound) ?? notification;
-  }, [state.hotlistSound, state.soundOptions]);
 
   const { play: npedSound } = useSound(soundSrcNped, { volume: state.NPEDsoundVolume });
   const { play: hotlistsound } = useSound(soundSrcHotlist, { volume: state.hotlistSoundVolume });
@@ -71,11 +59,10 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
     isLoading,
   } = useSightingFeedContext();
 
-  const { dispatch } = useAlertHitContext();
+  const { dispatch, state: alertState } = useAlertHitContext();
   const { state: integrationState, dispatch: integrationDispatch } = useIntegrationsContext();
   const sessionStarted = integrationState.sessionStarted;
   const sessionPaused = integrationState.sessionPaused;
-
   const processedRefs = useRef<Set<number | string>>(new Set());
 
   const hasAutoOpenedRef = useRef(false);
@@ -84,6 +71,11 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
   const enqueue = useCallback((sighting: SightingType, kind: HitKind) => {
     const id = sighting.vrm ?? sighting.ref;
     if (processedRefs.current.has(id)) return;
+
+    const inList = alertState?.alertList?.find((sighting) => sighting.vrm === id);
+    if (inList) {
+      return;
+    }
     processedRefs.current.add(id);
 
     setModalQueue((q) => [...q, { id, sighting, kind }]);
@@ -166,7 +158,6 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
 
     if (firstNPED) {
       enqueue(firstNPED, "NPED");
-
       npedRef.current = true;
     }
 
@@ -185,6 +176,7 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
       else hotlistsound();
 
       setSelectedSighting(next.sighting);
+
       setSightingModalOpen(true);
     }
   }, [isSightingModalOpen, npedSound, hotlistsound, setSelectedSighting, setSightingModalOpen, modalQueue]);

src/components/UI/CardHeader.tsx

@@ -11,25 +11,18 @@ type CameraOverviewHeaderProps = {
   sighting?: SightingType | null;
 };
 
-const CardHeader = ({
+const CardHeader = ({ title, icon, img, sighting }: CameraOverviewHeaderProps) => {
-  title,
-  icon,
-  img,
-  sighting,
-}: CameraOverviewHeaderProps) => {
   return (
     <div
       className={clsx(
-        "w-full border-b border-gray-600 flex flex-row items-center space-x-2 md:mb-6 relative justify-between"
+        "w-full border-b border-gray-600 flex flex-row items-center space-x-2 mb-6 relative justify-between"
       )}
     >
       <div className="flex items-center space-x-2">
         {icon && <FontAwesomeIcon icon={icon} className="size-4" />}
         <h2 className="text-xl">{title}</h2>
       </div>
-      {img && (
+      {img && <img src={img} alt="Logo" width={100} height={50} className="ml-auto" />}
-        <img src={img} alt="Logo" width={100} height={50} className="ml-auto" />
-      )}
       {sighting?.vrm && <NumberPlate vrm={sighting.vrm} motion={false} />}
     </div>
   );

src/components/UI/NavigationArrow.tsx

@@ -17,9 +17,9 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
     }
 
     if (side === "Front") {
-      navigate("/camera-settings");
+      navigate("/a-camera-settings");
     } else if (side === "Rear") {
-      navigate("/Rear-Camera-settings");
+      navigate("/b-Camera-settings");
     }
   };
 
@@ -30,15 +30,15 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
           <FontAwesomeIcon
             size="2xl"
             icon={faArrowRight}
-            className="absolute top-[50%] right-[2%] backdrop-blur-lg hover:cursor-pointer animate-bounce z-30"
+            className="absolute top-[50%] right-[2%] backdrop-blur-lg hover:cursor-pointer animate-bounce z-30 rounded-md arrow-outline"
-            onClick={() => navigationDest("Front")}
+            onClick={() => navigationDest("a")}
           />
         ) : (
           <FontAwesomeIcon
             icon={faArrowLeft}
             size="2xl"
-            className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-30"
+            className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-30 rounded-md arrow-outline"
-            onClick={() => navigationDest(side)}
+            onClick={() => navigationDest("b")}
           />
         )}
       </>
@@ -49,14 +49,14 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
       <FontAwesomeIcon
         icon={faArrowLeft}
         size="2xl"
-        className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100 "
+        className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100 arrow-outline rounded-md"
         onClick={() => navigationDest("Front")}
       />
 
       <FontAwesomeIcon
         icon={faArrowRight}
         size="2xl"
-        className="absolute top-[50%] right-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100"
+        className="absolute top-[50%] right-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100 arrow-outline rounded-md"
         onClick={() => navigationDest("Rear")}
       />
     </>

src/context/reducers/SoundContextReducer.ts

@@ -13,10 +13,12 @@ export const initialState: SoundState = {
     { name: "Ding", soundFileName: "ding" },
     { name: "Shutter", soundFileName: "shutter" },
     { name: "Warning (voice)", soundFileName: "warning" },
+    { name: "Attention (voice)", soundFileName: "attention" },
   ],
   sightingVolume: 1,
   NPEDsoundVolume: 1,
   hotlistSoundVolume: 1,
+  uploadedSound: null,
 };
 
 export function reducer(state: SoundState, action: SoundAction): SoundState {
@@ -62,7 +64,11 @@ export function reducer(state: SoundState, action: SoundAction): SoundState {
         ...state,
         hotlistSoundVolume: action.payload,
       };
-
+    case "UPLOADEDSOUND":
+      return {
+        ...state,
+        uploadedSound: action.payload,
+      };
     default:
       return state;
   }

src/hooks/useBackOfficeConfig.ts

@@ -0,0 +1,75 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useEffect } from "react";
+import { toast } from "sonner";
+import type { InitialValuesForm } from "../types/types";
+import { CAM_BASE } from "../utils/config";
+
+const getBackOfficeConfig = async (format: string) => {
+  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=Dispatcher-${format?.toLowerCase()}`);
+  if (!response.ok) throw new Error("Cannot get Back Office configuration");
+  return response.json();
+};
+
+const updateBackOfficeConfig = async (data: InitialValuesForm) => {
+  const updateConfigPayload = {
+    id: `Dispatcher-${data.format.toLowerCase()}`,
+    fields: [
+      {
+        property: "propBackofficeURL",
+        value: data.backOfficeURL,
+      },
+      {
+        property: "propConnectTimeoutSeconds",
+        value: data.connectTimeoutSeconds,
+      },
+      {
+        property: "propPassword",
+        value: data.password,
+      },
+      {
+        property: "propReadTimeoutSeconds",
+        value: data.readTimeoutSeconds,
+      },
+      {
+        property: "propUsername",
+        value: data.username,
+      },
+    ],
+  };
+  const response = await fetch(`${CAM_BASE}/api/update-config`, {
+    method: "POST",
+    body: JSON.stringify(updateConfigPayload),
+  });
+  if (!response.ok) throw new Error("Cannot update Back Office configuration");
+  return response.json();
+};
+
+export const useCameraBackOfficeOutput = (format: string) => {
+  const backOfficeQuery = useQuery({
+    queryKey: ["backoffice", format],
+    queryFn: () => getBackOfficeConfig(format),
+    enabled: !!format,
+  });
+
+  useEffect(() => {
+    if (backOfficeQuery.isError) toast.error(backOfficeQuery.error.message);
+  }, [backOfficeQuery?.error?.message, backOfficeQuery.isError]);
+
+  return {
+    backOfficeQuery,
+  };
+};
+
+export const useUpdateBackOfficeConfig = () => {
+  const backOfficeMutation = useMutation({
+    mutationKey: ["backOfficeUpdate"],
+    mutationFn: updateBackOfficeConfig,
+    onError: (error) => toast.error(error.message),
+    onSuccess: (data) => {
+      if (data) {
+        toast.success("Settings successfully updated", { id: "dispatchSettings" });
+      }
+    },
+  });
+  return { backOfficeMutation };
+};

src/hooks/useCameraBlackboard.ts

@@ -8,7 +8,7 @@ const camBase = import.meta.env.MODE !== "development" ? CAM_BASE : "";
 
 const getAllBlackboardData = async () => {
   const response = await fetch(`${camBase}/api/blackboard`, {
-    signal: AbortSignal.timeout(500),
+    signal: AbortSignal.timeout(300000),
   });
   if (!response.ok) {
     throw new Error("Failed to fetch blackboard data");
@@ -17,7 +17,7 @@ const getAllBlackboardData = async () => {
 };
 
 const viewBlackboardData = async (options: CameraBlackBoardOptions) => {
-  const response = await fetch(`/${camBase}api/blackboard`, {
+  const response = await fetch(`${camBase}/api/blackboard`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify(options),

src/hooks/useCameraConfig.ts

@@ -8,7 +8,7 @@ const fetchCameraSideConfig = async ({ queryKey }: { queryKey: string[] }) => {
   const [, cameraSide] = queryKey;
   const fetchUrl = `${base_url}/fetch-config?id=${cameraSide}`;
   const response = await fetch(fetchUrl, {
-    signal: AbortSignal.timeout(500),
+    signal: AbortSignal.timeout(300000),
   });
   if (!response.ok) throw new Error("cannot react cameraSide ");
   return response.json();
@@ -31,7 +31,7 @@ const updateCamerasideConfig = async (data: { id: string | number; friendlyName:
     method: "POST",
     body: JSON.stringify(updateConfigPayload),
   });
-  if (!response.ok) throw new Error("Feature unavailable: Coming soon");
+  if (!response.ok) throw new Error("Please make sure fields are filled in correctly");
 };
 
 export const useFetchCameraConfig = (cameraSide: string) => {

src/hooks/useCameraOutput.ts

@@ -2,7 +2,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { CAM_BASE } from "../utils/config";
 import { useEffect } from "react";
 import { toast } from "sonner";
-import type { BearerTypeFieldType, InitialValuesForm } from "../types/types";
+import type { BearerTypeFieldType, OptionalBOF2Constants, OptionalBOF2LaneIDs } from "../types/types";
 
 const getDispatcherConfig = async () => {
   const response = await fetch(`${CAM_BASE}/api/fetch-config?id=Dispatcher`);
@@ -18,14 +18,13 @@ const updateDispatcherConfig = async (data: BearerTypeFieldType) => {
         property: "propEnabled",
         value: data.enabled,
       },
-      //   Todo: figure out how to add verbose conditionally
       {
         property: "propFormat",
         value: data.format,
       },
     ],
   };
-  const response = await fetch(`${CAM_BASE}/api/update-config?id=Dispatcher`, {
+  const response = await fetch(`${CAM_BASE}/api/update-config`, {
     method: "POST",
     body: JSON.stringify(updateConfigPayload),
   });
@@ -33,43 +32,68 @@ const updateDispatcherConfig = async (data: BearerTypeFieldType) => {
   return response.json();
 };
 
-const getBackOfficeConfig = async () => {
+const updateBackOfficeDispatcher = async (data: OptionalBOF2Constants) => {
-  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=Dispatcher-json`);
+  const bof2ContantsPayload = {
-  if (!response.ok) throw new Error("Cannot get Back Office configuration");
+    id: "Dispatcher-bof2-constants",
-  return response.json();
-};
-
-const updateBackOfficeConfig = async (data: InitialValuesForm) => {
-  const updateConfigPayload = {
-    id: "Dispatcher-json",
     fields: [
       {
-        property: "propBackofficeURL",
+        property: "propFeedIdentifier",
-        value: data.backOfficeURL,
+        value: data?.FFID,
       },
       {
-        property: "propConnectTimeoutSeconds",
+        property: "propSourceIdentifier",
-        value: data.connectTimeoutSeconds,
+        value: data?.SCID,
       },
       {
-        property: "propPassword",
+        property: "propTimeZoneType",
-        value: data.password,
+        value: data?.timestampSource,
       },
       {
-        property: "propReadTimeoutSeconds",
+        property: "propGpsFormat",
-        value: data.readTimeoutSeconds,
+        value: data?.GPSFormat,
-      },
-      {
-        property: "propUsername",
-        value: data.username,
       },
     ],
   };
-  const response = await fetch(`${CAM_BASE}/api/update-config?id=Dispatcher-json`, {
+  const response = await fetch(`${CAM_BASE}/api/update-config`, {
     method: "POST",
-    body: JSON.stringify(updateConfigPayload),
+    body: JSON.stringify(bof2ContantsPayload),
   });
-  if (!response.ok) throw new Error("Cannot update Back Office configuration");
+  if (!response.ok) throw new Error("Cannot update dispatcher configuration");
+  return response.json();
+};
+
+const getBof2DispatcherData = async () => {
+  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=Dispatcher-bof2-constants`);
+  if (!response.ok) throw new Error("Cannot get BOF2 dispatcher config");
+  return response.json();
+};
+
+const updateBOF2LaneId = async (data: OptionalBOF2LaneIDs) => {
+  const bof2LaneIds = {
+    id: data?.laneId,
+    fields: [
+      {
+        property: "propLaneID1",
+        value: data?.LID1,
+      },
+      {
+        property: "propLaneID2",
+        value: data?.LID2,
+      },
+    ],
+  };
+
+  const response = await fetch(`${CAM_BASE}/api/update-config`, {
+    method: "post",
+    body: JSON.stringify(bof2LaneIds),
+  });
+  if (!response.ok) throw new Error("cannot send to lane IDs");
+  return response.json();
+};
+
+const getBOF2LaneId = async () => {
+  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=SightingAmmendA-lane-ids`);
+  if (!response.ok) throw new Error("Canot get Lane Ids");
   return response.json();
 };
 
@@ -79,45 +103,55 @@ export const useCameraOutput = () => {
     queryFn: getDispatcherConfig,
   });
 
-  const backOfficeQuery = useQuery({
-    queryKey: ["backoffice"],
-    queryFn: getBackOfficeConfig,
-  });
-
   const dispatcherMutation = useMutation({
     mutationFn: updateDispatcherConfig,
     mutationKey: ["dispatcherUpdate"],
     onError: (error) => toast.error(error.message),
     onSuccess: (data) => {
       if (data) {
-        toast.success("Settings successfully updated");
+        toast.success("Settings successfully updated", { id: "dispatchSettings" });
       }
     },
   });
 
-  const backOfficeMutation = useMutation({
+  const backOfficeDispatcherMutation = useMutation({
-    mutationKey: ["backOfficeUpdate"],
+    mutationKey: ["backofficedDispatcher"],
-    mutationFn: updateBackOfficeConfig,
+    mutationFn: updateBackOfficeDispatcher,
-    onError: (error) => toast.error(error.message),
     onSuccess: (data) => {
       if (data) {
-        toast.success("Settings successfully updated");
+        toast.success("Settings successfully updated", { id: "dispatchSettings" });
       }
     },
   });
 
+  const bof2LandMutation = useMutation({
+    mutationKey: ["updateBOF2LaneId"],
+    mutationFn: updateBOF2LaneId,
+  });
+
+  const laneIdQuery = useQuery({
+    queryKey: ["getBOF2LaneId"],
+    queryFn: getBOF2LaneId,
+  });
+
   useEffect(() => {
     if (dispatcherQuery.isError) toast.error(dispatcherQuery.error.message);
   }, [dispatcherQuery?.error?.message, dispatcherQuery.isError]);
 
-  useEffect(() => {
-    if (backOfficeQuery.isError) toast.error(backOfficeQuery.error.message);
-  }, [backOfficeQuery?.error?.message, backOfficeQuery.isError]);
-
   return {
     dispatcherQuery,
     dispatcherMutation,
-    backOfficeQuery,
+    backOfficeDispatcherMutation,
-    backOfficeMutation,
+    bof2LandMutation,
+    laneIdQuery,
   };
 };
+
+export const useGetDispatcherConfig = () => {
+  const bof2ConstantsQuery = useQuery({
+    queryKey: ["getBof2DispatcherData"],
+    queryFn: getBof2DispatcherData,
+  });
+
+  return { bof2ConstantsQuery };
+};

src/hooks/useCameraWifiandModem.ts

@@ -3,10 +3,11 @@ import { CAM_BASE } from "../utils/config";
 import type { ModemConfig, WifiConfig } from "../types/types";
 import { useEffect } from "react";
 import { toast } from "sonner";
+const camBase = import.meta.env.MODE !== "development" ? CAM_BASE : "";
 
 const getWiFiSettings = async () => {
-  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=ModemAndWifiManager-wifi`, {
+  const response = await fetch(`${camBase}/api/fetch-config?id=ModemAndWifiManager-wifi`, {
-    signal: AbortSignal.timeout(500),
+    signal: AbortSignal.timeout(600000),
   });
   if (!response.ok) {
     throw new Error("Cannot fetch Wifi settings");
@@ -15,7 +16,7 @@ const getWiFiSettings = async () => {
 };
 
 const updateWifiSettings = async (wifiConfig: WifiConfig) => {
-  const response = await fetch(`${CAM_BASE}/api/update-config?id=ModemAndWifiManager-wifi`, {
+  const response = await fetch(`${camBase}/api/update-config`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify(wifiConfig),
@@ -27,8 +28,8 @@ const updateWifiSettings = async (wifiConfig: WifiConfig) => {
 };
 
 const getModemSettings = async () => {
-  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=ModemAndWifiManager-modem`, {
+  const response = await fetch(`${camBase}/api/fetch-config?id=ModemAndWifiManager-modem`, {
-    signal: AbortSignal.timeout(500),
+    signal: AbortSignal.timeout(600000),
   });
   if (!response.ok) {
     throw new Error("Cannot fetch modem settings");
@@ -37,7 +38,7 @@ const getModemSettings = async () => {
 };
 
 const updateModemSettings = async (modemConfig: ModemConfig) => {
-  const response = await fetch(`${CAM_BASE}/api/update-config?id=ModemAndWifiManager-modem`, {
+  const response = await fetch(`${camBase}/api/update-config`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify(modemConfig),

src/hooks/useCameraZoom.ts

@@ -1,18 +1,39 @@
-import {
+import { useMutation, useQuery, type QueryFunctionContext } from "@tanstack/react-query";
-  useMutation,
-  useQuery,
-  type QueryFunctionContext,
-} from "@tanstack/react-query";
 import { CAM_BASE } from "../utils/config";
 import type { zoomConfig, ZoomInOptions } from "../types/types";
 import { toast } from "sonner";
 import { useEffect } from "react";
 
+const getCameraMode = async (options: { camera: string }) => {
+  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=Ip${options.camera}`);
+  if (!response.ok) throw new Error("Cannot get camera mode");
+  return response.json();
+};
+
+const updateCameraMode = async (options: { camera: string; mode: string }) => {
+  console.log(options);
+  const dayNightPayload = {
+    id: options.camera,
+    fields: [
+      {
+        property: "propDayNightMode",
+        value: options.mode,
+      },
+    ],
+  };
+  const response = await fetch(`${CAM_BASE}/Ip${options.camera}-command?dayNightMode=${options.mode}`, {
+    method: "post",
+    body: JSON.stringify(dayNightPayload),
+  });
+  if (!response.ok) throw new Error("cannot update camera mode");
+  return response.json();
+};
+
 async function zoomIn(options: ZoomInOptions) {
   const response = await fetch(
-    `${CAM_BASE}/Ip${options.camera}-command?magnification=${options.multiplier}x`,
+    `${CAM_BASE}/Ip${options.camera}-command?magnification=${options.multiplierText?.toLowerCase()}`,
     {
-      signal: AbortSignal.timeout(500),
+      signal: AbortSignal.timeout(300000),
     }
   );
   if (!response.ok) {
@@ -22,28 +43,21 @@ async function zoomIn(options: ZoomInOptions) {
   return response.json();
 }
 
-async function fetchZoomInConfig({
+async function fetchZoomInConfig({ queryKey }: QueryFunctionContext<[string, zoomConfig]>) {
-  queryKey,
-}: QueryFunctionContext<[string, zoomConfig]>) {
   const [, { camera }] = queryKey;
-  const response = await fetch(`${CAM_BASE}/Ip${camera}-inspect`, {
+  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=Ip${camera}`, {
-    signal: AbortSignal.timeout(500),
+    signal: AbortSignal.timeout(300000),
   });
   if (!response.ok) {
     throw new Error("Cannot get camera zoom settings");
   }
-  return response.text();
+  return response.json();
 }
 //change to string
 export const useCameraZoom = (options: zoomConfig) => {
   const mutation = useMutation({
     mutationKey: ["zoomIn"],
     mutationFn: (options: ZoomInOptions) => zoomIn(options),
-    onError: (err) => {
-      toast.error(`Failed to update zoom settings: ${err.message}`, {
-        id: "zoom",
-      });
-    },
   });
 
   const query = useQuery({
@@ -52,8 +66,25 @@ export const useCameraZoom = (options: zoomConfig) => {
   });
 
   useEffect(() => {
-    if (query.isError) toast.error(query.error.message, { id: "hardReboot" });
+    if (query.isError) toast.error(query.error.message, { id: "zoom" });
   }, [query?.error?.message, query.isError]);
 
   return { mutation, query };
 };
+
+export const useCameraMode = (option: { camera: string }) => {
+  const cameraModeQuery = useQuery({
+    queryKey: ["getCameraMode"],
+    queryFn: () => getCameraMode(option),
+  });
+
+  const cameraModeMutation = useMutation({
+    mutationKey: ["updateCameraMode"],
+    mutationFn: updateCameraMode,
+  });
+
+  return {
+    cameraModeQuery,
+    cameraModeMutation,
+  };
+};

src/hooks/useFileUpload.ts

@@ -0,0 +1,45 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { CAM_BASE } from "../utils/config";
+import { toast } from "sonner";
+import { getOrCacheBlob } from "../utils/cacheSound";
+const camBase = import.meta.env.MODE !== "development" ? CAM_BASE : CAM_BASE;
+
+type UseFileUploadProps = {
+  queryKey?: string[];
+};
+
+const uploadFile = async (file: File) => {
+  const form = new FormData();
+  form.append("upload", file, file.name);
+  const response = await fetch(`${camBase}/upload/file-upload/3`, {
+    method: "POST",
+    body: form,
+  });
+  if (!response.ok) {
+    throw new Error("Cannot reach upload file endpoint");
+  }
+  return response.text();
+};
+
+const getUploadFiles = async ({ queryKey }: { queryKey: string[] }) => {
+  const [, fileName] = queryKey;
+  const url = fileName;
+  return getOrCacheBlob(url);
+};
+
+export const useFileUpload = ({ queryKey }: UseFileUploadProps) => {
+  const query = useQuery({
+    queryKey: ["getUploadFiles", ...(queryKey ?? [])],
+    queryFn: () => getUploadFiles({ queryKey: ["getUploadFiles", ...(queryKey ?? [])] }),
+    enabled: !!queryKey,
+  });
+
+  const mutation = useMutation({
+    mutationFn: (file: File) => uploadFile(file),
+    mutationKey: ["uploadFile"],
+    onError: (err) => toast.error(err ? err.message : ""),
+    onSuccess: async (msg) => toast.success(msg),
+  });
+
+  return { query: queryKey ? query : undefined, mutation };
+};

src/hooks/useFormValidate.ts

@@ -0,0 +1,46 @@
+import { useMutation } from "@tanstack/react-query";
+import { CAM_BASE } from "../utils/config";
+import type { InitialValuesForm } from "../types/types";
+
+const sendToValidate = async (data: InitialValuesForm) => {
+  const updateConfigPayload = {
+    id: `Dispatcher-${data.format.toLowerCase()}`,
+    fields: [
+      {
+        property: "propBackofficeURL",
+        value: data.backOfficeURL,
+      },
+      {
+        property: "propConnectTimeoutSeconds",
+        value: data.connectTimeoutSeconds,
+      },
+      {
+        property: "propPassword",
+        value: data.password,
+      },
+      {
+        property: "propReadTimeoutSeconds",
+        value: data.readTimeoutSeconds,
+      },
+      {
+        property: "propUsername",
+        value: data.username,
+      },
+    ],
+  };
+  const response = await fetch(`${CAM_BASE}/api/update-config-isvalid`, {
+    method: "post",
+    body: JSON.stringify(updateConfigPayload),
+  });
+  if (!response.ok) throw new Error("Cannot send to validate");
+  return response.json();
+};
+
+export const useFormVaidate = () => {
+  const validateMutation = useMutation({
+    mutationKey: ["sendToValidate"],
+    mutationFn: sendToValidate,
+  });
+
+  return { validateMutation };
+};

src/hooks/useGetOverviewSnapshot copy.ts

@@ -0,0 +1,153 @@
+import { useRef, useCallback, useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { CAM_BASE } from "../utils/config";
+
+const apiUrl = CAM_BASE;
+
+async function fetchSnapshot(cameraSide: string): Promise<Blob> {
+  const response = await fetch(`${apiUrl}/${cameraSide}-preview`, {
+    signal: AbortSignal.timeout(300000),
+    cache: "no-store",
+  });
+  if (!response.ok) {
+    throw new Error(`Cannot reach endpoint (${response.status})`);
+  }
+  return response.blob();
+}
+
+/** Draw an ImageBitmap to canvas with aspect-fill (like object-fit: cover) */
+function drawBitmapToCanvas(canvas: HTMLCanvasElement, bitmap: ImageBitmap) {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+
+  const dpr = window.devicePixelRatio || 1;
+  const cssWidth = canvas.clientWidth;
+  const cssHeight = canvas.clientHeight;
+
+  const width = Math.floor(cssWidth * dpr);
+  const height = Math.floor(cssHeight * dpr);
+
+  if (canvas.width !== width || canvas.height !== height) {
+    canvas.width = width;
+    canvas.height = height;
+  }
+
+  ctx.clearRect(0, 0, width, height);
+
+  const srcW = bitmap.width;
+  const srcH = bitmap.height;
+  const srcAspect = srcW / srcH;
+  const dstAspect = width / height;
+
+  let drawWidth = width;
+  let drawHeight = height;
+
+  // aspect-fit calculation (no cropping)
+  if (srcAspect > dstAspect) {
+    // image is wider → fit to canvas width
+    drawWidth = width;
+    drawHeight = width / srcAspect;
+  } else {
+    // image is taller → fit to canvas height
+    drawHeight = height;
+    drawWidth = height * srcAspect;
+  }
+
+  // center image (adds black borders if aspect ratios differ)
+  const dx = (width - drawWidth) / 50;
+  const dy = (height - drawHeight) / 2;
+
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = "high";
+  ctx.drawImage(bitmap, 0, 0, srcW, srcH, dx, dy, drawWidth, drawHeight);
+}
+
+export function useGetOverviewSnapshot(side: string) {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const latestBitmapRef = useRef<ImageBitmap | null>(null);
+
+  // Redraw helper; always draws the current bitmap if available
+  const draw = useCallback(() => {
+    const canvas = canvasRef.current;
+    const bmp = latestBitmapRef.current;
+    if (!canvas || !bmp) return;
+    drawBitmapToCanvas(canvas, bmp);
+  }, []);
+
+  const {
+    data: snapshotBlob,
+    isError,
+    error,
+    isPending,
+  } = useQuery({
+    queryKey: ["overviewSnapshot", side],
+    queryFn: () => fetchSnapshot(side),
+    // Poll ~4 fps when visible; pause when tab hidden
+    refetchInterval: () => (document.visibilityState === "visible" ? 250 : false),
+    refetchOnWindowFocus: false,
+    // Avoid keeping lots of blobs around in cache
+    gcTime: 0, // v5 name (cacheTime in v4)
+    staleTime: 0,
+    retry: false, // or a small number if you prefer retries
+  });
+
+  // Convert Blob -> ImageBitmap and draw
+  useEffect(() => {
+    let cancelled = false;
+    if (!snapshotBlob) return;
+
+    (async () => {
+      try {
+        const bitmap = await createImageBitmap(snapshotBlob);
+        if (cancelled) {
+          bitmap.close();
+          return;
+        }
+
+        // Dispose previous bitmap to free memory
+        if (latestBitmapRef.current) {
+          latestBitmapRef.current.close();
+        }
+        latestBitmapRef.current = bitmap;
+
+        // Draw now (and again on next resize)
+        draw();
+      } catch {
+        // noop — fetch handler surfaces the main error path
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [snapshotBlob, draw]);
+
+  // Redraw on resize & DPR changes
+  useEffect(() => {
+    const onResize = () => draw();
+    const onDPR = () => draw();
+    window.addEventListener("resize", onResize);
+    // Listen for DPR changes (some browsers support this)
+    const mql = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+    mql.addEventListener?.("change", onDPR);
+    return () => {
+      window.removeEventListener("resize", onResize);
+      mql.removeEventListener?.("change", onDPR);
+    };
+  }, [draw]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (latestBitmapRef.current) {
+        latestBitmapRef.current.close();
+        latestBitmapRef.current = null;
+      }
+    };
+  }, []);
+
+  // Optional: normalize error type
+  const typedError = error instanceof Error ? error : undefined;
+
+  return { canvasRef, isError, error: typedError, isPending };
+}

src/hooks/useGetOverviewSnapshot.ts

@@ -3,34 +3,75 @@ import { useQuery } from "@tanstack/react-query";
 import { CAM_BASE } from "../utils/config";
 
 const apiUrl = CAM_BASE;
-// const fetch_url = `http://100.82.205.44/Colour-preview`;
+
-async function fetchSnapshot(cameraSide: string) {
+async function fetchSnapshot(cameraSide: string): Promise<Blob> {
   const response = await fetch(`${apiUrl}/${cameraSide}-preview`, {
-    signal: AbortSignal.timeout(500),
+    signal: AbortSignal.timeout(300000),
+    cache: "no-store",
   });
   if (!response.ok) {
-    throw new Error("Cannot reach endpoint");
+    throw new Error(`Cannot reach endpoint (${response.status})`);
+  }
+  return response.blob();
 }
 
-  return await response.blob();
+/** Draw an ImageBitmap to canvas with aspect-fill (like object-fit: cover) */
+function drawBitmapToCanvas(canvas: HTMLCanvasElement, bitmap: ImageBitmap) {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+
+  const dpr = window.devicePixelRatio || 1;
+  const cssWidth = canvas.clientWidth;
+  const cssHeight = canvas.clientHeight;
+
+  const width = Math.floor(cssWidth * dpr);
+  const height = Math.floor(cssHeight * dpr);
+
+  if (canvas.width !== width || canvas.height !== height) {
+    canvas.width = width;
+    canvas.height = height;
+  }
+
+  ctx.clearRect(0, 0, width, height);
+
+  const srcW = bitmap.width;
+  const srcH = bitmap.height;
+  const srcAspect = srcW / srcH;
+  const dstAspect = width / height;
+
+  let drawWidth = width;
+  let drawHeight = height;
+
+  // aspect-fit calculation (no cropping)
+  if (srcAspect > dstAspect) {
+    // image is wider → fit to canvas width
+    drawWidth = width;
+    drawHeight = width / srcAspect;
+  } else {
+    // image is taller → fit to canvas height
+    drawHeight = height;
+    drawWidth = height * srcAspect;
+  }
+
+  // center image (adds black borders if aspect ratios differ)
+  const dx = (width - drawWidth) / 50;
+  const dy = (height - drawHeight) / 2;
+
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = "high";
+  ctx.drawImage(bitmap, 0, 0, srcW, srcH, dx, dy, drawWidth, drawHeight);
 }
 
 export function useGetOverviewSnapshot(side: string) {
-  const latestUrlRef = useRef<string | null>(null);
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  const imageRef = useRef<HTMLImageElement | null>(null);
+  const latestBitmapRef = useRef<ImageBitmap | null>(null);
 
-  const drawImage = useCallback(() => {
+  // Redraw helper; always draws the current bitmap if available
+  const draw = useCallback(() => {
     const canvas = canvasRef.current;
-    const ctx = canvas?.getContext("2d");
+    const bmp = latestBitmapRef.current;
-    const img = imageRef.current;
+    if (!canvas || !bmp) return;
-
+    drawBitmapToCanvas(canvas, bmp);
-    if (!canvas || !ctx || !img) return;
-
-    canvas.width = canvas.clientWidth;
-    canvas.height = canvas.clientHeight;
-
-    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
   }, []);
 
   const {
@@ -39,43 +80,82 @@ export function useGetOverviewSnapshot(side: string) {
     error,
     isPending,
   } = useQuery({
-    queryKey: ["overviewSnapshot"],
+    queryKey: ["overviewSnapshot", side],
     queryFn: () => fetchSnapshot(side),
+    // Poll ~4 fps when visible; pause when tab hidden
+    refetchInterval: () => (document.visibilityState === "visible" ? 250 : false),
     refetchOnWindowFocus: false,
-    refetchInterval: 250,
+    // Avoid keeping lots of blobs around in cache
+    gcTime: 0, // v5 name (cacheTime in v4)
+    staleTime: 0,
+    retry: false, // or a small number if you prefer retries
   });
 
+  // Convert Blob -> ImageBitmap and draw
   useEffect(() => {
+    let cancelled = false;
     if (!snapshotBlob) return;
 
-    const imgUrl = URL.createObjectURL(snapshotBlob);
+    (async () => {
-    const img = new Image();
+      try {
-    imageRef.current = img;
+        const bitmap = await createImageBitmap(snapshotBlob);
-
+        if (cancelled) {
-    img.onload = () => {
+          bitmap.close();
-      drawImage();
+          return;
-    };
-    img.src = imgUrl;
-
-    if (latestUrlRef.current) {
-      URL.revokeObjectURL(latestUrlRef.current);
         }
-    latestUrlRef.current = imgUrl;
+
+        // Dispose previous bitmap to free memory
+        if (latestBitmapRef.current) {
+          latestBitmapRef.current.close();
+        }
+        latestBitmapRef.current = bitmap;
+
+        // Draw now (and again on next resize)
+        draw();
+      } catch {
+        // noop — fetch handler surfaces the main error path
+      }
+    })();
 
     return () => {
-      if (latestUrlRef.current) {
+      cancelled = true;
-        URL.revokeObjectURL(latestUrlRef.current);
-        latestUrlRef.current = null;
-      }
     };
-  }, [snapshotBlob, drawImage]);
+  }, [snapshotBlob, draw]);
+
+  // Redraw on resize & DPR changes
+  useEffect(() => {
+    const onResize = () => draw();
+    const onDPR = () => draw();
+    window.addEventListener("resize", onResize);
+    // Listen for DPR changes (some browsers support this)
+    const mql = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+    mql.addEventListener?.("change", onDPR);
+    return () => {
+      window.removeEventListener("resize", onResize);
+      mql.removeEventListener?.("change", onDPR);
+    };
+  }, [draw]);
 
   useEffect(() => {
-    window.addEventListener("resize", drawImage);
+    const el = canvasRef.current?.parentElement; // the box
-    return () => {
+    if (!el) return;
-      window.removeEventListener("resize", drawImage);
+    const ro = new ResizeObserver(() => draw()); // your draw() calls aspect-fit logic
-    };
+    ro.observe(el);
-  }, [drawImage]);
+    return () => ro.disconnect();
+  }, [draw]);
 
-  return { canvasRef, isError, error, isPending };
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (latestBitmapRef.current) {
+        latestBitmapRef.current.close();
+        latestBitmapRef.current = null;
+      }
+    };
+  }, []);
+
+  // Optional: normalize error type
+  const typedError = error instanceof Error ? error : undefined;
+
+  return { canvasRef, isError, error: typedError, isPending };
 }

src/hooks/useNPEDAuth.ts

@@ -8,7 +8,7 @@ import { toast } from "sonner";
 async function fetchNPEDDetails() {
   const fetchUrl = `${CAM_BASE}/api/fetch-config?id=NPED`;
   const response = await fetch(fetchUrl, {
-    signal: AbortSignal.timeout(500),
+    signal: AbortSignal.timeout(300000),
   });
   if (!response.ok) throw new Error("Cannot reach fetch-config endpoint");
 

src/hooks/useSightingAmend.ts

@@ -0,0 +1,48 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { CAM_BASE } from "../utils/config";
+import type { InitialValuesForm } from "../types/types";
+
+const getSightingAmend = async () => {
+  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=SightingAmmendA`);
+  if (!response.ok) throw new Error("Cannot reach sighting amend endpoint");
+  return response.json();
+};
+
+const updateSightingAmend = async (data: InitialValuesForm) => {
+  const updateSightingAmendPayload = {
+    id: "SightingAmmendA",
+    fields: [
+      {
+        property: "propOverviewQuality",
+        value: data.overviewQuality,
+      },
+      {
+        property: "propOverviewImageScaleFactor",
+        value: data.cropSizeFactor,
+      },
+    ],
+  };
+  const response = await fetch(`${CAM_BASE}/api/update-config`, {
+    method: "Post",
+    body: JSON.stringify(updateSightingAmendPayload),
+  });
+  if (!response.ok) throw new Error("cannot update camera control");
+  return response.json();
+};
+
+export const useSightingAmend = () => {
+  const sightingAmendQuery = useQuery({
+    queryKey: ["getSightingAmend"],
+    queryFn: getSightingAmend,
+  });
+
+  const sightingAmendMutation = useMutation({
+    mutationKey: ["updateSightingAmend"],
+    mutationFn: updateSightingAmend,
+  });
+
+  return {
+    sightingAmendQuery,
+    sightingAmendMutation,
+  };
+};

src/hooks/useSightingFeed.ts

@@ -1,14 +1,18 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
 import { Query, useQuery } from "@tanstack/react-query";
 import type { SightingType } from "../types/types";
-import { useSoundOnChange } from "react-sounds";
+import { useSound } from "react-sounds";
 import { useSoundContext } from "../context/SoundContext";
-import { getSoundFileURL } from "../utils/utils";
+import { checkIsHotListHit, getNPEDCategory } from "../utils/utils";
 import switchSound from "../assets/sounds/ui/switch.mp3";
+import notification from "../assets/sounds/ui/notification.mp3";
+import popup from "../assets/sounds/ui/popup_open.mp3";
+import { useCachedSoundSrc } from "./usecachedSoundSrc";
 
 async function fetchSighting(url: string | undefined, ref: number): Promise<SightingType> {
   const res = await fetch(`${url}${ref}`, {
-    signal: AbortSignal.timeout(5000),
+    signal: AbortSignal.timeout(300000),
   });
   if (!res.ok) throw new Error(String(res.status));
   return res.json();
@@ -21,35 +25,19 @@ export function useSightingFeed(url: string | undefined) {
   const [sessionStarted, setSessionStarted] = useState(false);
   const [selectedSighting, setSelectedSighting] = useState<SightingType | null>(null);
 
-  const mostRecent = sightings[0] ?? null;
+  const { src: soundSrc } = useCachedSoundSrc(state?.sightingSound, state?.soundOptions, switchSound);
-  const latestRef = mostRecent?.ref ?? null;
+  const { src: soundSrcHotlist } = useCachedSoundSrc(state?.hotlistSound, state?.soundOptions, notification);
+  const { src: soundSrcNped } = useCachedSoundSrc(state?.NPEDsound, state?.soundOptions, popup);
+
+  const { play: hotlistsound } = useSound(soundSrcHotlist, { volume: state.hotlistSoundVolume });
+  const { play: npedSound } = useSound(soundSrcNped, { volume: state.NPEDsoundVolume });
+  const { play: sightingSound } = useSound(soundSrc, { volume: state.sightingVolume });
+
+  const mostRecent = sightings[0] ?? null;
 
-  const first = useRef(true);
-  const lastSoundAt = useRef(0);
-  const COOLDOWN_MS = 1500;
   const currentRef = useRef<number>(-1);
   const lastValidTimestamp = useRef<number>(Date.now());
 
-  const trigger = useMemo(() => {
-    if (latestRef == null || !audioArmed) return null;
-    if (first.current) {
-      first.current = false;
-      return Symbol("skip");
-    }
-    const now = Date.now();
-    if (now - lastSoundAt.current < COOLDOWN_MS) return Symbol("skip");
-    lastSoundAt.current = now;
-    return latestRef;
-  }, [audioArmed, latestRef]);
-
-  const soundSrc = useMemo(() => {
-    if (state?.sightingSound?.includes(".mp3") || state.sightingSound?.includes(".wav")) {
-      const file = state.soundOptions?.find((item) => item.name === state.sightingSound);
-      return file?.soundUrl ?? switchSound;
-    }
-    return getSoundFileURL(state?.sightingSound) ?? switchSound;
-  }, [state.sightingSound, state.soundOptions]);
-
   function refetchInterval(query: Query<SightingType, Error, SightingType, (string | undefined)[]>) {
     if (!query) return;
     const data = query.state.data as SightingType | undefined;
@@ -60,7 +48,7 @@ export function useSightingFeed(url: string | undefined) {
       return 100;
     }
 
-    if (now - lastValidTimestamp.current > 60_000) {
+    if (now - lastValidTimestamp.current > 600_000) {
       currentRef.current = -1;
       lastValidTimestamp.current = now;
     }
@@ -78,16 +66,36 @@ export function useSightingFeed(url: string | undefined) {
     staleTime: 0,
   });
 
-  //use latestref instead of trigger to revert back
+  const playHotlistsound = useDebouncedCallback(() => {
+    hotlistsound();
+  }, 500);
 
-  useSoundOnChange(soundSrc, trigger, {
+  const playNPEDHitSound = useDebouncedCallback(() => {
-    volume: state.sightingVolume,
+    npedSound();
-    initial: false,
+  }, 500);
-  });
+
+  const playSightingHitSound = useDebouncedCallback(() => {
+    sightingSound();
+  }, 500);
 
   useEffect(() => {
     const data = query.data;
+
     if (!data || data.ref === -1) return;
+    const isHotListHit = checkIsHotListHit(data);
+    const cat = getNPEDCategory(data);
+
+    const isNPEDHitA = cat === "A";
+    const isNPEDHitB = cat === "B";
+    const isNPEDHitC = cat === "C";
+
+    if ((isNPEDHitA && audioArmed) || (isNPEDHitB && audioArmed) || (isNPEDHitC && audioArmed)) {
+      playNPEDHitSound();
+    } else if (isHotListHit && audioArmed) {
+      playHotlistsound();
+    } else if (audioArmed) {
+      playSightingHitSound();
+    }
 
     const now = Date.now();
 

src/hooks/useStoreDispatch.ts

@@ -0,0 +1,19 @@
+import { useQuery } from "@tanstack/react-query";
+import { CAM_BASE } from "../utils/config";
+
+const getStoreData = async () => {
+  const response = await fetch(`${CAM_BASE}/Store/diagnostics-json`);
+  if (!response.ok) throw new Error("Cannot get store data");
+
+  return response.json();
+};
+
+export const useStoreDispatch = () => {
+  const storeQuery = useQuery({
+    queryKey: ["getStoreData"],
+    queryFn: getStoreData,
+    refetchInterval: 1000,
+    refetchOnWindowFocus: true,
+  });
+  return { storeQuery };
+};

src/hooks/useSystemConfig.ts

@@ -1,11 +1,41 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { sendBlobFileUpload } from "../components/SettingForms/System/Upload";
 import { toast } from "sonner";
-import {
+import { handleSystemSave, handleSystemRecall } from "../components/SettingForms/System/SettingSaveRecall";
-  handleSystemSave,
-  handleSystemRecall,
-} from "../components/SettingForms/System/SettingSaveRecall";
 import { useEffect } from "react";
+import { CAM_BASE } from "../utils/config";
+import type { DNSSettingsType } from "../types/types";
+
+const camBase = import.meta.env.MODE !== "development" ? CAM_BASE : "";
+
+const getDNSSettings = async () => {
+  const response = await fetch(`${camBase}/api/fetch-config?id=GLOBAL--NetworkConfig`);
+  if (!response.ok) throw new Error("Cannot get DNS Settings");
+  return response.json();
+};
+
+const updateDNSSettings = async (data: DNSSettingsType) => {
+  const dnsSettingsPayload = {
+    id: "GLOBAL--NetworkConfig",
+    fields: [
+      {
+        property: "propNameServerPrimary",
+        value: data?.serverPrimary,
+      },
+      {
+        property: "propNameServerSecondary",
+        value: data?.serverSecondary,
+      },
+    ],
+  };
+  const response = await fetch(`${camBase}/api/update-config`, {
+    method: "post",
+    body: JSON.stringify(dnsSettingsPayload),
+  });
+  if (!response.ok) throw new Error("cannot send to DNS endpoint");
+
+  return response.json();
+};
 
 export const useSystemConfig = () => {
   const uploadSettingsMutation = useMutation({
@@ -51,3 +81,20 @@ export const useSystemConfig = () => {
     saveSystemSettingsLoading: saveSystemSettings.isPending,
   };
 };
+
+export const useDNSSettings = () => {
+  const dnsQuery = useQuery({
+    queryKey: ["getDNSSettings"],
+    queryFn: getDNSSettings,
+  });
+
+  const dnsMutation = useMutation({
+    mutationKey: ["updateDNSSettings"],
+    mutationFn: updateDNSSettings,
+  });
+
+  return {
+    dnsQuery,
+    dnsMutation,
+  };
+};

src/hooks/usecachedSoundSrc.ts

@@ -0,0 +1,56 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useFileUpload } from "./useFileUpload";
+import { getSoundFileURL } from "../utils/utils";
+import type { SoundUploadValue } from "../types/types";
+import { resolveSoundSource } from "../utils/soundResolver";
+
+export function useCachedSoundSrc(
+  selected: string | undefined,
+  soundOptions: SoundUploadValue[] | undefined,
+  fallbackUrl: string
+) {
+  const isUploaded = !!selected && (selected.endsWith(".mp3") || selected.endsWith(".wav"));
+
+  const resolved = resolveSoundSource(selected, soundOptions);
+
+  const { query } = useFileUpload({
+    queryKey: resolved?.type === "uploaded" ? [resolved?.url] : undefined,
+  });
+
+  const [objectUrl, setObjectUrl] = useState<string>();
+  const objRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    const blob = query?.data;
+
+    if (blob instanceof Blob) {
+      if (objRef.current) URL.revokeObjectURL(objRef.current);
+      const url = URL.createObjectURL(blob);
+      objRef.current = url;
+      setObjectUrl(url);
+    } else {
+      if (objRef.current) URL.revokeObjectURL(objRef.current);
+      objRef.current = null;
+      setObjectUrl(undefined);
+    }
+  }, [query?.data]);
+
+  useEffect(() => {
+    return () => {
+      if (objRef.current) URL.revokeObjectURL(objRef.current);
+    };
+  }, []);
+
+  const src = useMemo(() => {
+    if (isUploaded && objectUrl) return objectUrl;
+    if (!selected) return fallbackUrl;
+    return getSoundFileURL(selected) ?? fallbackUrl;
+  }, [isUploaded, objectUrl, selected, fallbackUrl]);
+
+  return {
+    src,
+    isUploaded,
+    isLoading: !!query?.isLoading,
+    error: (query?.error as Error) || undefined,
+  };
+}

src/index.css

@@ -31,3 +31,9 @@ body {
     }
   }
 }
+
+.arrow-outline path {
+  stroke: black; /* outline color */
+  stroke-width: 20px; /* thickness of outline (tweak this) */
+  stroke-linejoin: round;
+}

src/pages/FrontCamera.tsx

@@ -4,7 +4,7 @@ import OverviewVideoContainer from "../components/FrontCameraSettings/OverviewVi
 import { Toaster } from "sonner";
 
 const FrontCamera = () => {
-  const [zoomLevel, setZoomLevel] = useState<number>(1);
+  const [zoomLevel, setZoomLevel] = useState<number | undefined>(1);
   return (
     <div className="mx-auto flex flex-col lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">
       <OverviewVideoContainer

src/pages/RearCamera.tsx

@@ -4,9 +4,9 @@ import { Toaster } from "sonner";
 import { useState } from "react";
 
 const RearCamera = () => {
-  const [zoomLevel, setZoomLevel] = useState<number>(1);
+  const [zoomLevel, setZoomLevel] = useState<number | undefined>(1);
   return (
-    <div className="mx-auto flex flex-col lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">
+    <div className="mx-auto flex flex-col-reverse lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">
       <CameraSettings
         title="Camera B Settings"
         side={"CameraB"}

src/types/types.ts

@@ -41,6 +41,7 @@ export type CameraSettingValues = {
   userName: string;
   password: string;
   id: number | string;
+  mode: string;
 };
 
 export type CameraSettingErrorValues = Partial<Record<keyof CameraSettingValues, string>>;
@@ -48,15 +49,18 @@ export type CameraSettingErrorValues = Partial<Record<keyof CameraSettingValues,
 export type BearerTypeFieldType = {
   format: string;
   enabled: boolean;
-  verbose: boolean;
+  verbose?: boolean;
 };
 
 export type InitialValuesForm = {
+  format: string;
   backOfficeURL: string;
   username: string;
   password: string;
   connectTimeoutSeconds: number;
   readTimeoutSeconds: number;
+  overviewQuality?: string;
+  cropSizeFactor?: string;
 };
 
 export type InitialValuesFormErrors = {
@@ -67,6 +71,20 @@ export type InitialValuesFormErrors = {
   readTimeoutSeconds?: string;
 };
 
+export type OptionalBOF2Constants = {
+  FFID?: string;
+  SCID?: string;
+  timestampSource?: string;
+  GPSFormat?: string;
+};
+
+export type OptionalBOF2LaneIDs = {
+  laneId?: string;
+  LID1?: string;
+  LID2?: string;
+  LID3?: string;
+};
+
 export type NPEDFieldType = {
   frontId: string;
   username: string | undefined;
@@ -149,6 +167,13 @@ export type SystemValues = {
   sntpInterval: number;
   timeZone: string;
   softwareUpdate?: File | null;
+  serverPrimary?: string;
+  serverSecondary?: string;
+};
+
+export type DNSSettingsType = {
+  serverPrimary?: string;
+  serverSecondary?: string;
 };
 
 export type SystemValuesErrors = {
@@ -294,6 +319,7 @@ export type SoundUploadValue = {
   soundFileName?: string;
   soundFile?: File | null;
   soundUrl?: string;
+  uploadedAt?: number;
 };
 
 export type SoundState = {
@@ -305,6 +331,7 @@ export type SoundState = {
   sightingVolume: number;
   NPEDsoundVolume: number;
   hotlistSoundVolume: number;
+  uploadedSound?: Blob | null;
 };
 
 type UpdateAction = {
@@ -331,7 +358,12 @@ type VolumeAction = {
   payload: number;
 };
 
-export type SoundAction = UpdateAction | AddAction | VolumeAction;
+type UploadedState = {
+  type: "UPLOADEDSOUND";
+  payload: Blob | undefined;
+};
+
+export type SoundAction = UpdateAction | AddAction | VolumeAction | UploadedState;
 export type WifiSettingValues = {
   ssid: string;
   password: string;
@@ -359,6 +391,7 @@ export type ModemConfig = {
 export type ZoomInOptions = {
   camera: string;
   multiplier: number;
+  multiplierText?: string;
 };
 
 export type zoomConfig = {
@@ -392,5 +425,6 @@ export type NPEDSTATE = {
 
 export type NPEDACTION = {
   type: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   payload: any;
 };

src/utils/cacheSound.ts

@@ -0,0 +1,16 @@
+export async function getOrCacheBlob(url: string) {
+  const cache = await caches.open("app-sounds-v1");
+  const hit = await cache.match(url);
+  if (hit) return await hit.blob();
+
+  const res = await fetch(url, { cache: "no-store" });
+  if (!res.ok) throw new Error(`Fetch failed: ${res.status}`);
+
+  await cache.put(url, res.clone());
+  return await res.blob();
+}
+
+export async function evictFromCache(url: string) {
+  const cache = await caches.open("app-sounds-v1");
+  await cache.delete(url);
+}

src/utils/soundResolver.ts

@@ -0,0 +1,24 @@
+import { getSoundFileURL } from "./utils";
+import { CAM_BASE } from "./config";
+import type { SoundUploadValue } from "../types/types";
+
+export function resolveSoundSource(
+  selected: string | undefined,
+  soundOptions: SoundUploadValue[] | undefined
+): { type: "uploaded"; url: string } | { type: "builtin"; url: string } | undefined {
+  if (!selected) return undefined;
+
+  const isFile = selected.endsWith(".mp3") || selected.endsWith(".wav");
+
+  if (isFile) {
+    const match = soundOptions?.find((o) => o.soundFileName === selected);
+    const version = match?.uploadedAt ?? 0;
+    const url = `${CAM_BASE}/Mobile/${encodeURIComponent(selected)}?v=${version}`;
+    return { type: "uploaded", url };
+  }
+
+  const builtin = getSoundFileURL(selected);
+  if (builtin) return { type: "builtin", url: builtin };
+
+  return undefined;
+}

src/utils/utils.ts

@@ -5,7 +5,7 @@ import beep from "../assets/sounds/ui/Beep.wav";
 import warning from "../assets/sounds/ui/Warning.wav";
 import ding from "../assets/sounds/ui/Ding.wav";
 import shutter from "../assets/sounds/ui/shutter.mp3";
-
+import attention from "../assets/sounds/ui/Attention.wav";
 import type { HotlistMatches, SightingType } from "../types/types";
 
 export function getSoundFileURL(name: string) {
@@ -17,6 +17,7 @@ export function getSoundFileURL(name: string) {
     warning: warning,
     ding: ding,
     shutter: shutter,
+    attention: attention,
   };
   return sounds[name] ?? null;
 }
@@ -156,4 +157,30 @@ export function getHotlistName(obj: HotlistMatches | undefined) {
 }
 
 export const getNPEDCategory = (r?: SightingType | null) =>
-  r?.metadata?.npedJSON?.["NPED CATEGORY"] as "A" | "B" | "C" | undefined;
+  r?.metadata?.npedJSON?.["NPED CATEGORY"] as "A" | "B" | "C" | "D" | undefined;
+
+export const zoomMapping = (zoomLevel: number | undefined) => {
+  switch (zoomLevel) {
+    case 1:
+      return "Near";
+    case 2:
+      return "Mid";
+    case 4:
+      return "Far";
+    default:
+      break;
+  }
+};
+
+export const reverseZoomMapping = (magnification: string) => {
+  switch (magnification) {
+    case "near":
+      return 1;
+    case "mid":
+      return 2;
+    case "far":
+      return 4;
+    default:
+      break;
+  }
+};

yarn.lock

@@ -2267,6 +2267,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-debounce@^10.0.6:
+  version "10.0.6"
+  resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-10.0.6.tgz#e05060a5e561432ec740c653698f3eb162bd28ec"
+  integrity sha512-C5OtPyhAZgVoteO9heXMTdW7v/IbFI+8bSVKYCJrSmiWWCLsbUxiBSp4t9v0hNBTGY97bT72ydDIDyGSFWfwXg==
+
 vite@^7.1.0:
   version "7.1.2"
   resolved "https://registry.npmjs.org/vite/-/vite-7.1.2.tgz"