Merge pull request 'bugfix/saveandload' (#13 ) from bugfix/saveandload into develop

Reviewed-on: #13
added save and load endpoints
2025-11-17 10:22:36 +00:00 · 2025-11-17 10:19:44 +00:00 · 2025-11-17 09:08:32 +00:00 · 2025-11-17 09:08:19 +00:00 · 2025-11-17 09:07:13 +00:00 · 2025-11-14 15:41:31 +00:00
57 changed files with 1539 additions and 584 deletions
--- a/README.md
+++ b/README.md
@@ -1,69 +1,116 @@
-# 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:
+## Getting started

- [@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
+### Prerequisites

-## Expanding the ESLint configuration
+- Node.js (v18 or higher recommended)
+- Yarn (v1.22+) (https://yarnpkg.com/)

-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+### Installation

-```js
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // 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...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+```bash
+git clone https://mavportal.com/TobaOjo/Mav-Mobile-UI.git
+cd Mav-Mobile-UI
+yarn install
 ```

-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:
+### Running Locally
+
+```bash
+yarn dev
+```
+
+The app will be available at `http://localhost:5173`.
+
+To run on locally on other devices
+
+```bash
+yarn dev --host
+```
+
+The app will be available at the exposed addresses to access e.g. http://1xx.xxx.x.xxx:<PORT>/Mobile
+
+## Tech Stack
+
+- **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://1xx.xxx.xxx.xxx:<PORT>
+```
+
+## Development
+
+### Linting & Formatting
+
+```bash
+yarn lint
+yarn format
+```
+
+### Testing
+
+(Currently not implemented – consider adding Jest or Vitest)
+
+## Deployment
+
+To build for production:
+Navigate to the Mav-Mobile-UI folder
+
+```bash
+cd Mav-Mobile-UI
+```
+
+**Delete** the local .env (Production will use its own domain)
+
+run
+
+```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
+```
+
+- add the following between the lines </body> & </html>

 ```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-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...
-    },
-  },
-])
+<foot>
+<script>
+      if (window.location.pathname !== "/Mobile") {
+          window.location.replace(window.location.origin + "/Mobile");
+      }
+</script>
+</foot>
 ```
+
+- Run
+
+```bash
+sudo reboot
+```
+
+It should come back up all working
--- a/src/App.tsx
+++ b/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="rear-camera-settings" element={<RearCamera />} />
+                <Route path="a-camera-settings" element={<FrontCamera />} />
+                <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 />} />
--- a/src/components/CameraOverview/SnapshotContainer.tsx
+++ b/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 = ({
-  side,
-  settingsPage,
-  zoomLevel,
-  onZoomLevelChange,
-}: SnapshotContainerProps) => {
+export const SnapshotContainer = ({ side, settingsPage }: 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
-          onClick={handleZoomClick}
-          ref={canvasRef}
-          className="absolute inset-0 object-contain min-h-[100%] z-20"
-        />
+        <canvas ref={canvasRef} className="absolute w-full h-full z-20" />
      </div>
    </div>
  );
--- a/src/components/CameraSettings/CameraSettingFields.tsx
+++ b/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 { parseRTSPUrl } from "../../utils/utils";
+import { useCameraMode, useCameraZoom } from "../../hooks/useCameraZoom";
+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]);
-
-  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;
-    }
-  };
+  }, [query?.data, onZoomLevelChange, apiZoom]);

  const initialValues = useMemo<CameraSettingValues>(
    () => ({
@@ -60,11 +44,11 @@ const CameraSettingFields = ({
      userName: parsed?.username ?? "",
      password: parsed?.password ?? "",
      id: initialData?.id,
-
-      zoom: zoomLevel,
+      mode: cameraMode ?? "day",
+      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 }) => (
-        <Form className="flex flex-col space-y-6 p-2">
+      {({ errors, touched, values, setFieldValue, isSubmitting }) => (
+        <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>
-                  Retry
+              {
+                <button type="submit" className="bg-green-700 text-white rounded-lg p-2 mx-auto w-full">
+                  {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>
--- a/src/components/CameraSettings/CameraSettings.tsx
+++ b/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}
--- a/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx
+++ b/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"),
-    onSwipedLeft: () => navigate("/rear-camera-settings"),
+    onSwipedRight: () => navigate("/a-camera-settings"),
+    onSwipedLeft: () => navigate("/b-camera-settings"),
    trackMouse: true,
  });

--- a/src/components/FrontCameraSettings/OverviewVideoContainer.tsx
+++ b/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}
--- a/src/components/PlateStack/NumberPlate.tsx
+++ b/src/components/PlateStack/NumberPlate.tsx
@@ -40,9 +40,7 @@ const NumberPlate = ({ motion, vrm, size }: NumberPlateProps) => {

  return (
    <div
-      className={`relative ${options.plateWidth} ${
-        options.borderWidth
-      } border-black rounded-xl text-nowrap
+      className={`relative ${options.plateWidth} ${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`}>
-          {vrm && formatNumberPlate(vrm)}
-        </p>
+        <p className={`pl-4 font-extrabold ${options.textSize} text-right`}>{vrm && formatNumberPlate(vrm)}</p>
      </div>
    </div>
  );
--- a/src/components/PopupSettings/NPEDCategoryPopup.tsx
+++ b/src/components/PopupSettings/NPEDCategoryPopup.tsx
@@ -0,0 +1,73 @@
+import Card from "../UI/Card";
+import CardHeader from "../UI/CardHeader";
+import NPEDCatToggle from "../SettingForms/NPED/NPEDCatToggle";
+import FormGroup from "../SettingForms/components/FormGroup";
+import { Form, Formik } from "formik";
+import { useIntegrationsContext } from "../../context/IntegrationsContext";
+import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
+import type { CategoryPopups } from "../../types/types";
+import { toast } from "sonner";
+
+const NPEDCategoryPopup = () => {
+  const { state, dispatch } = useIntegrationsContext();
+  const { mutation } = useCameraBlackboard();
+
+  const isCatAEnabled = state?.iscatEnabled?.catA;
+  const isCatBEnabled = state?.iscatEnabled?.catB;
+  const isCatCEnabled = state?.iscatEnabled?.catC;
+  const isCatDEnabled = state?.iscatEnabled?.catD;
+
+  const initialValues = {
+    catA: isCatAEnabled ?? true,
+    catB: isCatBEnabled ?? true,
+    catC: isCatCEnabled ?? true,
+    catD: isCatDEnabled ?? false,
+  };
+
+  const handleSubmit = async (values: CategoryPopups) => {
+    const result = await mutation.mutateAsync({
+      operation: "INSERT",
+      value: values,
+      path: "CategoryPopup",
+    });
+
+    await mutation.mutateAsync({
+      operation: "SAVE",
+      path: "",
+      value: null
+    })
+    if (result?.reason === "OK") toast.success("Pop up settings saved");
+    dispatch({ type: "NPEDCATENABLED", payload: values });
+  };
+
+  return (
+    <Card className="p-4">
+      <CardHeader title={"Alert Pop ups"} />
+      <p className="italic my-2">Allows alerts to pop up to user.</p>
+      <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+        <Form className="flex flex-col space-y-5 px-2">
+          <FormGroup>
+            <NPEDCatToggle name={"catA"} label="NPED Category A" />
+          </FormGroup>
+          <FormGroup>
+            <NPEDCatToggle name={"catB"} label="NPED Category B" />
+          </FormGroup>
+          <FormGroup>
+            <NPEDCatToggle name={"catC"} label="NPED Category C" />
+          </FormGroup>
+          <FormGroup>
+            <NPEDCatToggle name={"catD"} label="NPED Category D" />
+          </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"
+          >
+            Save
+          </button>
+        </Form>
+      </Formik>
+    </Card>
+  );
+};
+
+export default NPEDCategoryPopup;
--- a/src/components/RearCameraOverview/RearCameraOverviewCard.tsx
+++ b/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();
--- a/src/components/SessionForm/SessionCard.tsx
+++ b/src/components/SessionForm/SessionCard.tsx
@@ -62,7 +62,11 @@ const SessionCard = () => {
      path: "sessionStats",
      value: dedupedSightings,
    });
-
+    await mutation.mutateAsync({
+      operation: "SAVE",
+      path: "",
+      value: null,
+    });
    if (result.reason === "OK") toast.success("Session saved");
  };

--- a/src/components/SettingForms/BearerType/BearerTypeCard.tsx
+++ b/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>
--- a/src/components/SettingForms/Channel1-JSON/ChannelCard.tsx
+++ b/src/components/SettingForms/Channel1-JSON/ChannelCard.tsx
@@ -9,14 +9,17 @@ import { useEffect, useMemo } from "react";
 type ChannelCardProps = {
  touched: FormikTouched<BearerTypeFieldType & InitialValuesForm>;
  isSubmitting: boolean;
+  isBof2ConstantsLoading: boolean;
+  isDispatcherLoading: boolean;
 };

-const ChannelCard = ({ touched, isSubmitting }: ChannelCardProps) => {
+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;
+    const d = backOfficeQuery?.data;
    return {
      backOfficeURL: d?.propBackofficeURL?.value ?? "",
      username: d?.propUsername?.value ?? "",
@@ -24,24 +27,28 @@ const ChannelCard = ({ touched, isSubmitting }: ChannelCardProps) => {
      connectTimeoutSeconds: Number(d?.propConnectTimeoutSeconds?.value),
      readTimeoutSeconds: Number(d?.propReadTimeoutSeconds?.value),
    };
-  }, [backOfficeQuery.data]);
+  }, [backOfficeQuery?.data]);

  useEffect(() => {
-    if (!backOfficeQuery.isSuccess) return;
+    if (!backOfficeQuery?.isSuccess) return;
    for (const [key, value] of Object.entries(mapped)) {
      setFieldValue(key, value);
    }
  }, [backOfficeQuery.isSuccess, mapped, setFieldValue]);

  return (
-    <Card className="p-4">
+    <Card className="p-4 overflow-y-auto ">
      <CardHeader title={`Channel (${values?.format})`} />
-      <ChannelFields
-        touched={touched}
-        isSubmitting={isSubmitting}
-        backOfficeData={backOfficeQuery}
-        format={values?.format}
-      />
+      {!isBof2ConstantsLoading && !isDispatcherLoading && !isBackOfficeQueryLoading ? (
+        <ChannelFields
+          touched={touched}
+          isSubmitting={isSubmitting}
+          backOfficeData={backOfficeQuery}
+          format={values?.format}
+        />
+      ) : (
+        <>Loading...</>
+      )}
    </Card>
  );
 };
--- a/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx
+++ b/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx
@@ -58,9 +58,7 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) =>
                type="text"
                id="backoffice"
                placeholder="https://www.backoffice.com"
-                className={`p-1.5 border ${
-                  errors.backOfficeURL && touched.backOfficeURL ? "border-red-500" : "border-gray-400 "
-                } rounded-lg w-full md:w-60`}
+                className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
              />
            </FormGroup>
            <FormGroup>
@@ -70,9 +68,7 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) =>
                type="text"
                id="username"
                placeholder="Back office username"
-                className={`p-1.5 border ${
-                  errors.username && touched.username ? "border-red-500" : "border-gray-400 "
-                } rounded-lg w-full md:w-60`}
+                className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
              />
            </FormGroup>
            <FormGroup>
@@ -119,71 +115,126 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) =>
                } 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="border-b border-gray-500 my-3">
-                  <h2 className="font-bold">{values.format} Constants</h2>
+                <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>
-                <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="">-- Select format --</option>
-                    <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="">-- Select format --</option>
-                    <option value={"Decimal degrees"}>Decimal degrees</option>
-                    <option value={"minutes"}>Minutes</option>
-                  </Field>
-                </FormGroup>
              </>
            )}
          </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"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
          >
            {isSubmitting ? "Saving..." : "Save Changes"}
          </button>
--- a/src/components/SettingForms/NPED/NPEDCard.tsx
+++ b/src/components/SettingForms/NPED/NPEDCard.tsx
@@ -6,7 +6,7 @@ import NPEDIcon from "/NPED.svg";
 const NPEDCard = () => {
  return (
    <Card className="p-4">
-      <CardHeader title={"NPED Config"} img={NPEDIcon} />
+      <CardHeader title={"NPED"} img={NPEDIcon} />
      <NPEDFields />
    </Card>
  );
--- a/src/components/SettingForms/NPED/NPEDCatToggle.tsx
+++ b/src/components/SettingForms/NPED/NPEDCatToggle.tsx
@@ -0,0 +1,22 @@
+import { Field } from "formik";
+
+type NPEDToggleProps = {
+  name: string;
+  label: string;
+};
+
+const NPEDCatToggle = ({ name, label }: NPEDToggleProps) => {
+  return (
+    <label className="flex items-center gap-3 cursor-pointer select-none w-full justify-between">
+      <span className="text-lg">{label}</span>
+      <Field id={name} type="checkbox" name={name} className="sr-only peer" />
+      <div
+        className="relative w-10 h-5 rounded-full bg-gray-300 transition peer-checked:bg-blue-500 after:content-[''] 
+      after:absolute after:top-0.5 after:left-0.5 after:w-4 after:h-4 after:rounded-full after:bg-white after:shadow after:transition 
+      after:duration-300 peer-checked:after:translate-x-5"
+      />
+    </label>
+  );
+};
+
+export default NPEDCatToggle;
--- a/src/components/SettingForms/NPED/NPEDFields.tsx
+++ b/src/components/SettingForms/NPED/NPEDFields.tsx
@@ -13,21 +13,19 @@ const NPEDFields = () => {
  const [showPwd, setShowPwd] = useState(false);
  const { signIn, signOut } = useNPEDAuth();

-  const initialValues = state.npedUser
-    ? {
-        username: state.npedUser?.propUsername?.value,
-        password: state.npedUser?.propPassword?.value,
-        clientId: state.npedUser?.propClientID?.value,
-        frontId: "NPED",
-        rearId: "NPED",
-      }
-    : {
-        username: "",
-        password: "",
-        clientId: "",
-        frontId: "NPED",
-        rearId: "NPED",
-      };
+  const username = state.npedUser?.propUsername?.value;
+  const password = state.npedUser?.propPassword?.value;
+  const clientId = state.npedUser?.propClientID?.value;
+  const frontId = "NPED";
+  const rearId = "NPED";
+
+  const initialValues = {
+    username: username ?? "",
+    password: password ?? "",
+    clientId: clientId ?? "",
+    frontId: frontId,
+    rearId: rearId,
+  };

  const handleSubmit = async (values: NPEDFieldType) => {
    const valuesToSend = {
@@ -100,17 +98,18 @@ const NPEDFields = () => {
              className="p-1.5 border border-gray-400 rounded-lg"
            />
          </FormGroup>
+
          {!state.npedUser?.propClientID?.value ? (
            <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 hover:cursor-pointer"
+              className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
            >
              {isSubmitting ? "Logging in..." : "Login"}
            </button>
          ) : (
            <button
              type="button"
-              className="w-1/4  border-red-700 bg-red-800 text-white font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
+              className="w-full md:w-1/4  border-red-700 bg-red-800 text-white font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
              onClick={handleLogoutClick}
            >
              Logout
--- a/src/components/SettingForms/NPED/NPEDHotlist.tsx
+++ b/src/components/SettingForms/NPED/NPEDHotlist.tsx
@@ -47,7 +47,7 @@ const NPEDHotlist = () => {
            />
            <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"
+              className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
              // disabled={errors ? true : false}
            >
              Upload
--- a/src/components/SettingForms/SettingForms/SettingForms.tsx
+++ b/src/components/SettingForms/SettingForms/SettingForms.tsx
@@ -7,27 +7,42 @@ import type {
  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 } = useCameraOutput();
+  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 initialValues: BearerTypeFieldType & InitialValuesForm & OptionalBOF2Constants = {
+  const isDispatcherLoading = dispatcherQuery?.isFetching;
+  const isBof2ConstantsLoading = bof2ConstantsQuery?.isFetching;
+
+  const initialValues: BearerTypeFieldType & InitialValuesForm & OptionalBOF2Constants & OptionalBOF2LaneIDs = {
    format: format ?? "JSON",
    enabled: enabled === "true",
    backOfficeURL: "",
@@ -35,27 +50,24 @@ const SettingForms = () => {
    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 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";
@@ -72,10 +84,11 @@ const SettingForms = () => {
    return errors;
  };

-  const handleSubmit = async (values: BearerTypeFieldType & InitialValuesForm & OptionalBOF2Constants) => {
-    // if (formErrors && Object.entries(formErrors).length > 0) {
-    //   return;
-    // }
+  const handleSubmit = async (
+    values: BearerTypeFieldType & InitialValuesForm & OptionalBOF2Constants & OptionalBOF2LaneIDs
+  ) => {
+    const validResponse = await validateMutation.mutateAsync(values);
+
    const dispatcherData = {
      format: values.format,
      enabled: values.enabled,
@@ -85,23 +98,32 @@ const SettingForms = () => {
    if (result?.id) {
      qc.invalidateQueries({ queryKey: ["dispatcher"] });
      qc.invalidateQueries({ queryKey: ["backoffice", values.format] });
-      const validResponse = await validateMutation.mutateAsync(values);
+
      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;
      }
    }
-
-    if (values.format.toLowerCase() === "bof2") {
-      const bof2ConstantsData: OptionalBOF2Constants = {
-        FFID: values.FFID,
-        SCID: values.SCID,
-        timestampSource: values.timestampSource,
-        GPSFormat: values.GPSFormat,
-      };
-      await backOfficeDispatcherMutation.mutateAsync(bof2ConstantsData);
-    }
  };

  return (
@@ -109,8 +131,17 @@ const SettingForms = () => {
      {({ 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">
-            <BearerTypeCard />
-            <ChannelCard touched={touched} isSubmitting={isSubmitting} />
+            <div>
+              <BearerTypeCard />
+              <StoreCard />
+            </div>
+
+            <ChannelCard
+              touched={touched}
+              isSubmitting={isSubmitting}
+              isDispatcherLoading={isDispatcherLoading}
+              isBof2ConstantsLoading={isBof2ConstantsLoading}
+            />
          </div>
        </Form>
      )}
--- a/src/components/SettingForms/Sound/SoundSettingsFields.tsx
+++ b/src/components/SettingForms/Sound/SoundSettingsFields.tsx
@@ -39,6 +39,11 @@ const SoundSettingsFields = () => {
      path: "soundSettings",
      value: updatedValues,
    });
+    await mutation.mutateAsync({
+      operation: "SAVE",
+      path: "",
+      value: null,
+    });
    if (result.reason !== "OK") {
      toast.error("Cannot update sound settings");
    } else {
@@ -139,7 +144,7 @@ const SoundSettingsFields = () => {
          </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"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
          >
            Save Settings
          </button>
--- a/src/components/SettingForms/Sound/SoundUpload.tsx
+++ b/src/components/SettingForms/Sound/SoundUpload.tsx
@@ -46,7 +46,11 @@ const SoundUpload = () => {
    if (result.reason !== "OK") {
      toast.error("Cannot update sound settings");
    }
-
+    await mutation.mutateAsync({
+      operation: "SAVE",
+      path: "",
+      value: null,
+    });
    dispatch({ type: "ADD", payload: values });
  };

@@ -96,7 +100,7 @@ const SoundUpload = () => {
          {errors.soundFile && <p className="text-red-500 text-sm mt-1">Not an mp3 file</p>}
          <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 mt-[5%]"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 mt-[5%]"
            disabled={errors.soundFile ? true : false}
          >
            Upload
--- a/src/components/SettingForms/Store/StoreCard.tsx
+++ b/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;
--- a/src/components/SettingForms/Store/StoreFields.tsx
+++ b/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;
--- a/src/components/SettingForms/System/SettingSaveRecall.tsx
+++ b/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(
-        `HTTP ${response.status} ${response.statusText}${
-          text ? ` - ${text}` : ""
-        }`
-      );
+      throw new Error(`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(
-        `HTTP ${response.status} ${response.statusText}${
-          text ? ` - ${text}` : ""
-        }`
-      );
+      throw new Error(`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"
-        ? sntpIntervalRaw
-        : Number.parseInt(String(sntpIntervalRaw).trim(), 10);
+      typeof sntpIntervalRaw === "number" ? sntpIntervalRaw : Number.parseInt(String(sntpIntervalRaw).trim(), 10);

    if (!Number.isFinite(sntpInterval)) {
      sntpInterval = 60;
--- a/src/components/SettingForms/System/SystemConfigFields.tsx
+++ b/src/components/SettingForms/System/SystemConfigFields.tsx
@@ -4,21 +4,31 @@ 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";
+import { ValidateIPaddress } from "../../../utils/utils";
+import { toast } from "sonner";

 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 = {};
@@ -27,12 +37,20 @@ const SystemConfigFields = () => {
    if (!values.timeZone) errors.timeZone = "Required";
    if (isNaN(interval) || interval <= 0) errors.sntpInterval = "Cannot be less than 0";
    if (!values.sntpServer) errors.sntpServer = "Required";
+    const invalidPrimary = ValidateIPaddress(values.serverPrimary);
+    const invalidSecondary = ValidateIPaddress(values.serverSecondary);
+
+    if (invalidPrimary || invalidSecondary) {
+      toast.error(invalidPrimary || invalidSecondary, {
+        id: "invalid-ip",
+      });
+    }
    return errors;
  };

-  const handleSoftReboot = async () => {
-    await softRebootMutation.mutate();
-  };
+  // const handleSoftReboot = async () => {
+  //   await softRebootMutation.mutate();
+  // };

  const handleHardReboot = async () => {
    await hardRebootMutation.mutate();
@@ -44,7 +62,7 @@ const SystemConfigFields = () => {
      onSubmit={handleSubmit}
      validate={validateValues}
      enableReinitialize
-      validateOnChange
+      validateOnChange={false}
      validateOnBlur
    >
      {({ values, errors, touched, isSubmitting }) => (
@@ -102,6 +120,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,9 +137,37 @@ 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"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
            disabled={isSubmitting}
          >
            {saveSystemSettingsLoading ? "Saving..." : "Save System Settings"}
@@ -130,13 +177,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%]"
--- a/src/components/SettingForms/System/SystemFileUpload.tsx
+++ b/src/components/SettingForms/System/SystemFileUpload.tsx
@@ -52,7 +52,7 @@ const SystemFileUpload = ({ name, selectedFile }: SystemFileUploadProps) => {
      </FormGroup>
      <button
        type="button"
-        className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
+        className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
        disabled={!selectedFile}
        onClick={handleFileUploadClick}
      >
--- a/src/components/SettingForms/System/Upload.ts
+++ b/src/components/SettingForms/System/Upload.ts
@@ -14,9 +14,6 @@ export async function sendBlobFileUpload({ file, opts }: BlobFileUpload): Promis
  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;
--- a/src/components/SettingForms/WiFi&Modem/ModemCard.tsx
+++ b/src/components/SettingForms/WiFi&Modem/ModemCard.tsx
@@ -6,7 +6,6 @@ const ModemCard = () => {
  return (
    <Card className="p-4">
      <CardHeader title={"Modem"} />
-
      <ModemSettings />
    </Card>
  );
--- a/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx
+++ b/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx
@@ -6,6 +6,8 @@ import { useEffect, useState } from "react";
 import ModemToggle from "./ModemToggle";
 import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ValidateIPaddress } from "../../../utils/utils";
+import { toast, Toaster } from "sonner";

 const ModemSettings = () => {
  const [showSettings, setShowSettings] = useState(false);
@@ -16,6 +18,8 @@ const ModemSettings = () => {
  const username = modemQuery?.data?.propUsername.value;
  const password = modemQuery?.data?.propPassword?.value;
  const mode = modemQuery?.data?.propMode?.value;
+  const serverPrimary = modemQuery?.data?.propNameServerPrimary?.value;
+  const serverSecondary = modemQuery?.data?.propNameServerSecondary?.value;

  useEffect(() => {
    setShowSettings(mode === "AUTO");
@@ -26,9 +30,19 @@ const ModemSettings = () => {
    username: username ?? "",
    password: password ?? "",
    authenticationType: "PAP",
+    serverPrimary: serverPrimary ?? "",
+    serverSecondary: serverSecondary ?? "",
  };

  const handleSubmit = async (values: ModemSettingsType) => {
+    const invalidPrimary = ValidateIPaddress(values.serverPrimary);
+    const invalidSecondary = ValidateIPaddress(values.serverSecondary);
+    if (invalidPrimary || invalidSecondary) {
+      toast.error(invalidPrimary || invalidSecondary, {
+        id: "invalid-ip",
+      });
+      return;
+    }
    const modemConfig = {
      id: "ModemAndWifiManager-modem",
      fields: [
@@ -49,86 +63,129 @@ const ModemSettings = () => {
          property: "propMode",
          value: showSettings ? "AUTO" : "MANUAL",
        },
+        {
+          property: "propNameServerPrimary",
+          value: values.serverPrimary,
+        },
+        {
+          property: "propNameServerSecondary",
+          value: values.serverSecondary,
+        },
      ],
    };
-    await modemMutation.mutateAsync(modemConfig);
+
+    const response = await modemMutation.mutateAsync(modemConfig);
+
+    if (!response?.id) {
+      toast.success("Modem settings updated successfully", {
+        id: "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">
-              <FormGroup>
-                <label htmlFor="apn" className="font-medium whitespace-nowrap md:w-2/3">
-                  APN
-                </label>
-                <Field
-                  placeholder="Enter APN"
-                  name="apn"
-                  id="apn"
-                  type="text"
-                  className="p-1.5 border border-gray-400 rounded-lg"
-                />
-              </FormGroup>
-              <FormGroup>
-                <label htmlFor="username" className="font-medium whitespace-nowrap md:w-2/3">
-                  Username
-                </label>
-                <Field
-                  placeholder="Enter Username"
-                  name="username"
-                  id="username"
-                  type="text"
-                  className="p-1.5 border border-gray-400 rounded-lg"
-                />
-              </FormGroup>
-              <FormGroup>
-                <label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
-                  Password
-                </label>
-                <div className="flex gap-2 items-center relative mb-4">
+
+      <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
+                  </label>
                  <Field
-                    id="password"
-                    name="password"
-                    type={showPwd ? "text" : "password"}
-                    className="p-2 border border-gray-400 rounded-lg w-full"
-                    placeholder="Enter Password"
+                    placeholder="Enter APN"
+                    name="apn"
+                    id="apn"
+                    type="text"
+                    className="p-1.5 border border-gray-400 rounded-lg"
                  />
-                  <FontAwesomeIcon
-                    type="button"
-                    className="absolute right-5 end-0"
-                    onClick={() => setShowPwd((s) => !s)}
-                    icon={showPwd ? faEyeSlash : faEye}
+                </FormGroup>
+                <FormGroup>
+                  <label htmlFor="username" className="font-medium whitespace-nowrap md:w-2/3">
+                    Username
+                  </label>
+                  <Field
+                    placeholder="Enter Username"
+                    name="username"
+                    id="username"
+                    type="text"
+                    className="p-1.5 border border-gray-400 rounded-lg"
                  />
-                </div>
-              </FormGroup>
-              <FormGroup>
-                <label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
-                  Password
-                </label>
-                <Field
-                  name="authenticationType"
-                  as="select"
-                  className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 w-2/3"
-                >
-                  <option value="PAP">PAP</option>
-                  <option value="CHAP">CHAP</option>
-                  <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"
-              >
-                {isSubmitting || modemMutation.isPending ? "Saving..." : "Save Modem settings"}
-              </button>
-            </Form>
-          )}
-        </Formik>
-      )}
+                </FormGroup>
+                <FormGroup>
+                  <label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
+                    Password
+                  </label>
+                  <div className="flex gap-2 items-center relative mb-4">
+                    <Field
+                      id="password"
+                      name="password"
+                      type={showPwd ? "text" : "password"}
+                      className="p-2 border border-gray-400 rounded-lg w-full"
+                      placeholder="Enter Password"
+                    />
+                    <FontAwesomeIcon
+                      type="button"
+                      className="absolute right-5 end-0"
+                      onClick={() => setShowPwd((s) => !s)}
+                      icon={showPwd ? faEyeSlash : faEye}
+                    />
+                  </div>
+                </FormGroup>
+                <FormGroup>
+                  <label htmlFor="serverPrimary" className="font-medium whitespace-nowrap md:w-2/3">
+                    Name server primary
+                  </label>
+                  <Field
+                    placeholder="Enter Server primary"
+                    name="serverPrimary"
+                    id="serverPrimary"
+                    type="text"
+                    className="p-1.5 border border-gray-400 rounded-lg"
+                  />
+                </FormGroup>
+                <FormGroup>
+                  <label htmlFor="serverSecondary" className="font-medium whitespace-nowrap md:w-2/3">
+                    Name server secondary
+                  </label>
+                  <Field
+                    placeholder="Enter Server secondary"
+                    name="serverSecondary"
+                    id="serverSecondary"
+                    type="text"
+                    className="p-1.5 border border-gray-400 rounded-lg"
+                  />
+                </FormGroup>
+                <FormGroup>
+                  <label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
+                    Authentication Type
+                  </label>
+                  <Field
+                    name="authenticationType"
+                    as="select"
+                    className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 w-2/3"
+                  >
+                    <option value="PAP">PAP</option>
+                    <option value="CHAP">CHAP</option>
+                    <option value="none">None</option>
+                  </Field>
+                </FormGroup>
+              </>
+            )}
+            <button
+              type="submit"
+              className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+            >
+              {isSubmitting || modemMutation.isPending ? "Saving..." : "Save Modem settings"}
+            </button>
+          </Form>
+        )}
+      </Formik>
+      <Toaster />
    </>
  );
 };
--- a/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx
+++ b/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,66 +45,71 @@ const WiFiSettingsForm = () => {
    await wifiMutation.mutateAsync(wifiConfig);
  };
  return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
-      {({ isSubmitting }) => (
-        <Form className="flex flex-col space-y-5 px-2">
-          <FormGroup>
-            <label htmlFor="ssid" className="font-medium whitespace-nowrap md:w-2/3">
-              SSID
-            </label>
-            <Field
-              id="ssid"
-              name="ssid"
-              type="text"
-              className="p-1.5 border border-gray-400 rounded-lg"
-              placeholder="Enter SSID"
-            />
-          </FormGroup>
-          <FormGroup>
-            <label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
-              Password
-            </label>
-            <div className="flex gap-2 items-center relative mb-4">
+    <>
+      <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
+        {({ isSubmitting }) => (
+          <Form className="flex flex-col space-y-5 px-2">
+            <FormGroup>
+              <label htmlFor="ssid" className="font-medium whitespace-nowrap md:w-2/3">
+                SSID
+              </label>
              <Field
-                id="password"
-                name="password"
-                type={showPwd ? "text" : "password"}
-                className="p-2 border border-gray-400 rounded-lg w-full"
-                placeholder="Enter Password"
+                id="ssid"
+                name="ssid"
+                type="text"
+                className="p-1.5 border border-gray-400 rounded-lg"
+                placeholder="Enter SSID"
              />
-              <FontAwesomeIcon
-                type="button"
-                className="absolute right-5 end-0"
-                onClick={() => setShowPwd((s) => !s)}
-                icon={showPwd ? faEyeSlash : faEye}
-              />
-            </div>
-          </FormGroup>
-          <FormGroup>
-            <label htmlFor="encryption" className="font-medium whitespace-nowrap md:w-2/3">
-              WPA/Encryption Type
-            </label>
-            <Field
-              id="encryption"
-              name="encryption"
-              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 w-2/3"
-              as="select"
+            </FormGroup>
+            <FormGroup>
+              <label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
+                Password
+              </label>
+              <div className="flex gap-2 items-center relative mb-4">
+                <Field
+                  id="password"
+                  name="password"
+                  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"
+                  onClick={() => setShowPwd((s) => !s)}
+                  icon={showPwd ? faEyeSlash : faEye}
+                />
+              </div>
+            </FormGroup>
+            <FormGroup>
+              <label htmlFor="encryption" className="font-medium whitespace-nowrap md:w-2/3">
+                WPA/Encryption Type
+              </label>
+              <Field
+                id="encryption"
+                name="encryption"
+                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 w-2/3"
+                as="select"
+              >
+                <option value="WPA2">WPA2</option>
+                <option value="WPA3">WPA3</option>
+                <option value="WEP">WEP</option>
+                <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"
            >
-              <option value="WPA2">WPA2</option>
-              <option value="WPA3">WPA3</option>
-              <option value="WEP">WEP</option>
-              <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"
-          >
-            {isSubmitting || wifiMutation.isPending ? "Saving..." : " Save WiFi settings"}
-          </button>
-        </Form>
-      )}
-    </Formik>
+              {isSubmitting || wifiMutation.isPending ? "Saving..." : " Save WiFi settings"}
+            </button>
+          </Form>
+        )}
+      </Formik>
+      <Toaster />
+    </>
  );
 };

--- a/src/components/SightingModal/SightingModal.tsx
+++ b/src/components/SightingModal/SightingModal.tsx
@@ -21,10 +21,11 @@ type SightingModalProps = {

 const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }: SightingModalProps) => {
  const { dispatch } = useAlertHitContext();
+
  const { query, mutation } = useCameraBlackboard();

  const hotlistNames = getHotlistName(sighting?.metadata?.hotlistMatches);
-  const handleAcknowledgeButton = () => {
+  const handleAcknowledgeButton = async () => {
    try {
      if (!sighting) {
        toast.error("Cannot add sighting to alert list");
@@ -32,17 +33,27 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
        return;
      }
      if (!query.data.alertHistory) {
-        mutation.mutate({
+        await mutation.mutateAsync({
          operation: "INSERT",
          path: "alertHistory",
          value: [sighting],
        });
+        await mutation.mutateAsync({
+          operation: "SAVE",
+          path: "",
+          value: null,
+        });
      } else {
-        mutation.mutate({
+        await mutation.mutateAsync({
          operation: "APPEND",
          path: "alertHistory",
          value: sighting,
        });
+        await mutation.mutateAsync({
+          operation: "SAVE",
+          path: "",
+          value: null,
+        });
        toast.success("Sighting Successfully added to alert list");
      }

@@ -160,23 +171,24 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
                  <dd className="font-medium text-2xl">{sighting?.seenCount ?? "-"}</dd>
                </div>

-                {sighting?.make && (
+                {sighting?.make && sighting.make.trim() && sighting.make.toLowerCase() !== "disabled" && (
                  <div>
                    <dt className="text-gray-300">Make</dt>
-                    <dd className="font-medium text-2xl">{sighting?.make ?? "-"}</dd>
+                    <dd className="font-medium text-2xl">{sighting.make}</dd>
                  </div>
                )}
-                {sighting?.model ||
-                  (!sighting?.model.trim() && (
-                    <div>
-                      <dt className="text-gray-300">Model</dt>
-                      <dd className="font-medium text-2xl">{sighting?.model ?? "-"}</dd>
-                    </div>
-                  ))}
-                {sighting?.color && (
+
+                {sighting?.model && sighting.model.trim() && sighting.model.toLowerCase() !== "disabled" && (
+                  <div>
+                    <dt className="text-gray-300">Model</dt>
+                    <dd className="font-medium text-2xl">{sighting.model}</dd>
+                  </div>
+                )}
+
+                {sighting?.color && sighting.color.trim() && sighting.color.toLowerCase() !== "disabled" && (
                  <div className="sm:col-span-2">
                    <dt className="text-gray-300">Colour</dt>
-                    <dd className="font-medium text-2xl">{sighting?.color ?? "-"}</dd>
+                    <dd className="font-medium text-2xl">{sighting.color}</dd>
                  </div>
                )}

--- a/src/components/SightingsWidget/SightingWidget.tsx
+++ b/src/components/SightingsWidget/SightingWidget.tsx
@@ -59,19 +59,28 @@ 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);
  const npedRef = useRef(false);

+  const isCatAEnabled = integrationState?.iscatEnabled?.catA;
+  const isCatBEnabled = integrationState?.iscatEnabled?.catB;
+  const isCatCEnabled = integrationState?.iscatEnabled?.catC;
+  const isCatDEnabled = integrationState?.iscatEnabled?.catD;
+
  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 }]);
@@ -114,7 +123,11 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
      if (processedRefs.current.has(id)) continue;
      const isHotlistHit = checkIsHotListHit(sighting);
      const npedcategory = sighting?.metadata?.npedJSON?.["NPED CATEGORY"];
-      const isNPED = npedcategory === "A" || npedcategory === "B" || npedcategory === "C";
+      const isNPED =
+        (npedcategory === "A" && isCatAEnabled) ||
+        (npedcategory === "B" && isCatBEnabled) ||
+        (npedcategory === "C" && isCatCEnabled) ||
+        (npedcategory === "D" && isCatDEnabled);

      if (isNPED || isHotlistHit) {
        enqueue(sighting, isNPED ? "NPED" : "HOTLIST"); // enqueue ONLY
@@ -144,7 +157,8 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
      const isNPEDHitA = cat === "A";
      const isNPEDHitB = cat === "B";
      const isNPEDHitC = cat === "C";
-      return isNPEDHitA || isNPEDHitB || isNPEDHitC;
+      const isNPEDHitD = cat === "D";
+      return isNPEDHitA || isNPEDHitB || isNPEDHitC || isNPEDHitD;
    });
    const firstHot = rows?.find((r) => {
      const isHotListHit = checkIsHotListHit(r);
@@ -154,7 +168,6 @@ export default function SightingHistoryWidget({ className, title }: SightingHist

    if (firstNPED) {
      enqueue(firstNPED, "NPED");
-
      npedRef.current = true;
    }

@@ -173,6 +186,7 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
      else hotlistsound();

      setSelectedSighting(next.sighting);
+
      setSightingModalOpen(true);
    }
  }, [isSightingModalOpen, npedSound, hotlistsound, setSelectedSighting, setSightingModalOpen, modalQueue]);
--- a/src/components/UI/Header.tsx
+++ b/src/components/UI/Header.tsx
@@ -1,15 +1,26 @@
 import { Link } from "react-router";
 import Logo from "/MAV.svg";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faGear, faHome, faListCheck, faMaximize, faMinimize, faRotate } from "@fortawesome/free-solid-svg-icons";
+import {
+  faBars,
+  faGear,
+  faHome,
+  faListCheck,
+  faMaximize,
+  faMinimize,
+  faRotate,
+} from "@fortawesome/free-solid-svg-icons";
 import { useState } from "react";
 import SoundBtn from "./SoundBtn";
 import { useIntegrationsContext } from "../../context/IntegrationsContext";

 export default function Header() {
  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const { state } = useIntegrationsContext();

+  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
+
  const sessionStarted = state.sessionStarted;

  const sessionPaused = state.sessionPaused;
@@ -36,7 +47,7 @@ export default function Header() {
        </Link>
      </div>
      <div className="flex flex-col lg:flex-row items-center space-x-24 justify-items-center">
-        <div className="flex flex-row lg:flex-row space-x-2">
+        <div className="flex flex-row lg:flex-row space-x-2 mx-10 p-2 md:p-0 items-center">
          {sessionStarted && sessionPaused ? (
            <p className="text-gray-400 font-bold">Session Paused</p>
          ) : (
@@ -44,7 +55,7 @@ export default function Header() {
          )}
        </div>

-        <div className="flex flex-row space-x-8">
+        <div className="flex flex-row space-x-6 md:space-x-8 items-center">
          <Link to={"/"}>
            <FontAwesomeIcon className="text-white" icon={faHome} size="2x" />
          </Link>
@@ -59,15 +70,35 @@ export default function Header() {
            <FontAwesomeIcon icon={faRotate} size="2x" />
          </div>
          <SoundBtn />
-          <Link to={"/session-settings"}>
+          <div className="md:hidden">
+            <FontAwesomeIcon icon={faBars} size="2x" onClick={toggleMenu} />
+          </div>
+
+          <Link className="hidden md:flex" to={"/session-settings"}>
            <FontAwesomeIcon className="text-white" icon={faListCheck} size="2x" />
          </Link>

-          <Link to={"/system-settings"}>
+          <Link className="hidden md:flex" to={"/system-settings"}>
            <FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
          </Link>
        </div>
      </div>
+      {isMenuOpen && (
+        <div className="md:hidden">
+          <ul className="flex flex-row gap-5">
+            <li onClick={() => setIsMenuOpen(false)}>
+              <Link to={"/session-settings"}>
+                <FontAwesomeIcon className="text-white" icon={faListCheck} size="2x" />
+              </Link>
+            </li>
+            <li onClick={() => setIsMenuOpen(false)}>
+              <Link to={"/system-settings"}>
+                <FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
+              </Link>
+            </li>
+          </ul>
+        </div>
+      )}
    </div>
  );
 }
--- a/src/components/UI/NavigationArrow.tsx
+++ b/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"
-            onClick={() => navigationDest("Front")}
+            className="absolute top-[50%] right-[2%] backdrop-blur-lg hover:cursor-pointer animate-bounce z-30 rounded-md arrow-outline"
+            onClick={() => navigationDest("a")}
          />
        ) : (
          <FontAwesomeIcon
            icon={faArrowLeft}
            size="2xl"
-            className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-30"
-            onClick={() => navigationDest(side)}
+            className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-30 rounded-md arrow-outline"
+            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")}
      />
    </>
--- a/src/components/UI/SoundBtn.tsx
+++ b/src/components/UI/SoundBtn.tsx
@@ -16,6 +16,11 @@ const SoundBtn = () => {
      path: "soundEnabled",
      value: { enabled: newEnabled },
    });
+    await mutation.mutateAsync({
+      operation: "SAVE",
+      path: "",
+      value: null,
+    });
  };
  useEffect(() => {
    setEnabled(query?.data?.soundEnabled?.enabled);
@@ -23,10 +28,7 @@ const SoundBtn = () => {

  return (
    <button onClick={handleClick}>
-      <FontAwesomeIcon
-        icon={enabled ? faVolumeHigh : faVolumeXmark}
-        size="2x"
-      />
+      <FontAwesomeIcon icon={enabled ? faVolumeHigh : faVolumeXmark} size="2x" />
    </button>
  );
 };
--- a/src/context/providers/IntegrationsContextProvider.tsx
+++ b/src/context/providers/IntegrationsContextProvider.tsx
@@ -12,17 +12,44 @@ export const IntegrationsProvider = ({ children }: IntegrationsProviderType) =>
  const { mutation } = useCameraBlackboard();

  useEffect(() => {
-    const fetchData = async () => {
-      const result = await mutation.mutateAsync({
-        operation: "VIEW",
-        path: "sessionStats",
-      });
-      if (!result.result || typeof result.result === "string") return;
+    let isMounted = true;

-      dispatch({ type: "UPDATE", payload: result?.result });
+    const fetchData = async () => {
+      try {
+        await mutation.mutateAsync({
+          operation: "Load",
+          path: "",
+          value: null,
+        });
+        const result = await mutation.mutateAsync({
+          operation: "VIEW",
+          path: "sessionStats",
+        });
+
+        if (!isMounted) return;
+
+        const catResult = await mutation.mutateAsync({
+          operation: "VIEW",
+          path: "CategoryPopup",
+        });
+
+        if (!isMounted) return;
+        if (!result?.result || typeof result.result === "string") return;
+
+        dispatch({ type: "UPDATE", payload: result.result });
+        dispatch({ type: "NPEDCATENABLED", payload: catResult.result });
+      } catch (error) {
+        console.error("Error in fetchData:", error);
+      }
    };
+
    fetchData();
+
+    return () => {
+      isMounted = false;
+    };
  }, []);
+
  return (
    <IntegrationsContext.Provider
      value={{
--- a/src/context/providers/SoundContextProvider.tsx
+++ b/src/context/providers/SoundContextProvider.tsx
@@ -20,6 +20,11 @@ const SoundContextProvider = ({ children }: SoundContextProviderProps) => {
        operation: "VIEW",
        path: "soundSettings",
      });
+      await mutation.mutateAsync({
+        operation: "LOAD",
+        path: "",
+        value: null,
+      });

      if (!result.result || typeof result.result !== "object") {
        dispatch({ type: "UPDATE", payload: state });
--- a/src/context/reducers/IntegrationsContextReducer.ts
+++ b/src/context/reducers/IntegrationsContextReducer.ts
@@ -6,6 +6,12 @@ export const initialState = {
  sessionPaused: false,
  savedSightings: [],
  npedUser: null,
+  iscatEnabled: {
+    catA: true,
+    catB: true,
+    catC: true,
+    catD: false,
+  },
 };

 export function reducer(state: NPEDSTATE, action: NPEDACTION) {
@@ -40,6 +46,11 @@ export function reducer(state: NPEDSTATE, action: NPEDACTION) {
        ...state,
        sessionList: action.payload,
      };
+    case "NPEDCATENABLED":
+      return {
+        ...state,
+        iscatEnabled: action.payload,
+      };
    default:
      return { ...state };
  }
--- a/src/hooks/useBackOfficeConfig.ts
+++ b/src/hooks/useBackOfficeConfig.ts
@@ -36,7 +36,7 @@ const updateBackOfficeConfig = async (data: InitialValuesForm) => {
      },
    ],
  };
-  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),
  });
--- a/src/hooks/useCameraBlackboard.ts
+++ b/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),
--- a/src/hooks/useCameraConfig.ts
+++ b/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) => {
--- a/src/hooks/useCameraOutput.ts
+++ b/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, OptionalBOF2Constants } 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`);
@@ -24,7 +24,7 @@ const updateDispatcherConfig = async (data: BearerTypeFieldType) => {
      },
    ],
  };
-  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),
  });
@@ -54,7 +54,7 @@ const updateBackOfficeDispatcher = async (data: OptionalBOF2Constants) => {
      },
    ],
  };
-  const response = await fetch(`${CAM_BASE}/api/update-config?id=Dispatcher-bof2-constants`, {
+  const response = await fetch(`${CAM_BASE}/api/update-config`, {
    method: "POST",
    body: JSON.stringify(bof2ContantsPayload),
  });
@@ -63,11 +63,40 @@ const updateBackOfficeDispatcher = async (data: OptionalBOF2Constants) => {
 };

 const getBof2DispatcherData = async () => {
-  const response = await fetch(`http://100.118.196.113:8080/api/fetch-config?id=Dispatcher-bof2-constants`);
+  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();
+};
+
 export const useCameraOutput = () => {
  const dispatcherQuery = useQuery({
    queryKey: ["dispatcher"],
@@ -95,6 +124,16 @@ export const useCameraOutput = () => {
    },
  });

+  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]);
@@ -103,6 +142,8 @@ export const useCameraOutput = () => {
    dispatcherQuery,
    dispatcherMutation,
    backOfficeDispatcherMutation,
+    bof2LandMutation,
+    laneIdQuery,
  };
 };

--- a/src/hooks/useCameraWifiandModem.ts
+++ b/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`, {
-    signal: AbortSignal.timeout(500),
+  const response = await fetch(`${camBase}/api/fetch-config?id=ModemAndWifiManager-wifi`, {
+    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`, {
-    signal: AbortSignal.timeout(500),
+  const response = await fetch(`${camBase}/api/fetch-config?id=ModemAndWifiManager-modem`, {
+    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),
--- a/src/hooks/useCameraZoom.ts
+++ b/src/hooks/useCameraZoom.ts
@@ -1,18 +1,38 @@
-import {
-  useMutation,
-  useQuery,
-  type QueryFunctionContext,
-} from "@tanstack/react-query";
+import { 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 }) => {
+  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 +42,21 @@ async function zoomIn(options: ZoomInOptions) {
  return response.json();
 }

-async function fetchZoomInConfig({
-  queryKey,
-}: QueryFunctionContext<[string, zoomConfig]>) {
+async function fetchZoomInConfig({ queryKey }: QueryFunctionContext<[string, zoomConfig]>) {
  const [, { camera }] = queryKey;
-  const response = await fetch(`${CAM_BASE}/Ip${camera}-inspect`, {
-    signal: AbortSignal.timeout(500),
+  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=Ip${camera}`, {
+    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 +65,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,
+  };
+};
--- a/src/hooks/useGetOverviewSnapshot
+++ b/src/hooks/useGetOverviewSnapshot
@@ -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 };
+}
--- a/src/hooks/useGetOverviewSnapshot.ts
+++ b/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();
+}
+
+/** 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;
  }

-  return await response.blob();
+  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 img = imageRef.current;
-
-    if (!canvas || !ctx || !img) return;
-
-    canvas.width = canvas.clientWidth;
-    canvas.height = canvas.clientHeight;
-
-    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    const bmp = latestBitmapRef.current;
+    if (!canvas || !bmp) return;
+    drawBitmapToCanvas(canvas, bmp);
  }, []);

  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);
-    const img = new Image();
-    imageRef.current = img;
+    (async () => {
+      try {
+        const bitmap = await createImageBitmap(snapshotBlob);
+        if (cancelled) {
+          bitmap.close();
+          return;
+        }

-    img.onload = () => {
-      drawImage();
-    };
-    img.src = imgUrl;
+        // Dispose previous bitmap to free memory
+        if (latestBitmapRef.current) {
+          latestBitmapRef.current.close();
+        }
+        latestBitmapRef.current = bitmap;

-    if (latestUrlRef.current) {
-      URL.revokeObjectURL(latestUrlRef.current);
-    }
-    latestUrlRef.current = imgUrl;
+        // Draw now (and again on next resize)
+        draw();
+      } catch {
+        // noop — fetch handler surfaces the main error path
+      }
+    })();

    return () => {
-      if (latestUrlRef.current) {
-        URL.revokeObjectURL(latestUrlRef.current);
-        latestUrlRef.current = null;
-      }
+      cancelled = true;
    };
-  }, [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);
-    return () => {
-      window.removeEventListener("resize", drawImage);
-    };
-  }, [drawImage]);
+    const el = canvasRef.current?.parentElement; // the box
+    if (!el) return;
+    const ro = new ResizeObserver(() => draw()); // your draw() calls aspect-fit logic
+    ro.observe(el);
+    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 };
 }
--- a/src/hooks/useNPEDAuth.ts
+++ b/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");

--- a/src/hooks/useSightingAmend.ts
+++ b/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,
+  };
+};
--- a/src/hooks/useSightingFeed.ts
+++ b/src/hooks/useSightingFeed.ts
@@ -12,7 +12,7 @@ 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();
@@ -48,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;
    }
--- a/src/hooks/useStoreDispatch.ts
+++ b/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 };
+};
--- a/src/hooks/useSystemConfig.ts
+++ b/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 {
-  handleSystemSave,
-  handleSystemRecall,
-} from "../components/SettingForms/System/SettingSaveRecall";
+import { 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,
+  };
+};
--- a/src/index.css
+++ b/src/index.css
@@ -31,3 +31,9 @@ body {
    }
  }
 }
+
+.arrow-outline path {
+  stroke: black;
+  stroke-width: 20px;
+  stroke-linejoin: round;
+}
--- a/src/pages/FrontCamera.tsx
+++ b/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
--- a/src/pages/RearCamera.tsx
+++ b/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"}
--- a/src/pages/SystemSettings.tsx
+++ b/src/pages/SystemSettings.tsx
@@ -10,6 +10,7 @@ import { Toaster } from "sonner";
 import { useNPEDAuth } from "../hooks/useNPEDAuth";
 import SoundSettingsCard from "../components/SettingForms/Sound/SoundSettingsCard";
 import SoundUploadCard from "../components/SettingForms/Sound/SoundUploadCard";
+import NPEDCategoryPopup from "../components/PopupSettings/NPEDCategoryPopup";

 const SystemSettings = () => {
  useNPEDAuth();
@@ -21,7 +22,7 @@ const SystemSettings = () => {
          <Tab>System</Tab>
          <Tab>Output</Tab>
          <Tab>Integrations</Tab>
-          <Tab>WiFi and Modem</Tab>
+          <Tab>WiFi & Modem</Tab>
          <Tab>Sound</Tab>
        </TabList>
        <TabPanel>
@@ -38,6 +39,7 @@ const SystemSettings = () => {
          <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">
            <NPEDCard />
            <NPEDHotlistCard />
+            <NPEDCategoryPopup />
          </div>
        </TabPanel>
        <TabPanel>
--- a/src/types/types.ts
+++ b/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>>;
@@ -58,6 +59,8 @@ export type InitialValuesForm = {
  password: string;
  connectTimeoutSeconds: number;
  readTimeoutSeconds: number;
+  overviewQuality?: string;
+  cropSizeFactor?: string;
 };

 export type InitialValuesFormErrors = {
@@ -69,10 +72,17 @@ export type InitialValuesFormErrors = {
 };

 export type OptionalBOF2Constants = {
-  FFID?: "";
-  SCID?: "";
-  timestampSource?: "";
-  GPSFormat?: "";
+  FFID?: string;
+  SCID?: string;
+  timestampSource?: string;
+  GPSFormat?: string;
+};
+
+export type OptionalBOF2LaneIDs = {
+  laneId?: string;
+  LID1?: string;
+  LID2?: string;
+  LID3?: string;
 };

 export type NPEDFieldType = {
@@ -157,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 = {
@@ -265,7 +282,7 @@ export type CameraConfig = {
 export type CameraBlackBoardOptions = {
  operation?: string;
  path?: string;
-  value?: object | string | number | (string | number)[];
+  value?: object | string | number | (string | number)[] | null;
 };

 export type CameraBlackboardResponse = {
@@ -374,6 +391,7 @@ export type ModemConfig = {
 export type ZoomInOptions = {
  camera: string;
  multiplier: number;
+  multiplierText?: string;
 };

 export type zoomConfig = {
@@ -385,6 +403,8 @@ export type ModemSettingsType = {
  username: string;
  password: string;
  authenticationType: string;
+  serverPrimary: string;
+  serverSecondary: string;
 };

 export type HitKind = "NPED" | "HOTLIST";
@@ -403,9 +423,18 @@ export type NPEDSTATE = {
  sessionPaused: boolean;
  savedSightings: DedupedSightings;
  npedUser: NPEDUser;
+  iscatEnabled: CategoryPopups;
 };

 export type NPEDACTION = {
  type: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  payload: any;
 };
+
+export type CategoryPopups = {
+  catA: boolean;
+  catB: boolean;
+  catC: boolean;
+  catD: boolean;
+};
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -158,3 +158,40 @@ export function getHotlistName(obj: HotlistMatches | undefined) {

 export const getNPEDCategory = (r?: SightingType | null) =>
  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;
+  }
+};
+
+export const ValidateIPaddress = (value: string | undefined) => {
+  if (!value) return;
+
+  const regex =
+    /^(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)$/;
+
+  if (!regex.test(value)) {
+    return "Invalid IP address format";
+  }
+};
Author	SHA1	Message	Date
TobaOjo	1b788271a8	Merge pull request 'bugfix/saveandload' (#13 ) from bugfix/saveandload into develop Reviewed-on: #13	2025-11-17 10:22:36 +00:00
Toba Ojo	d2f030f221	added save and load endpoints	2025-11-17 10:19:44 +00:00
TobaOjo	5ce70ffa06	Merge pull request 'develop' (#12 ) from develop into main Reviewed-on: #12	2025-11-17 09:08:32 +00:00
TobaOjo	b1cd2cef8a	Merge branch 'main' into develop	2025-11-17 09:08:19 +00:00
Toba Ojo	8db9d7ff51	minor tweaks to spelling and wording	2025-11-17 09:07:13 +00:00
TobaOjo	0b1f0b72a8	Merge pull request 'feature/mobile-menu' (#11 ) from feature/mobile-menu into develop Reviewed-on: #11	2025-11-14 15:41:31 +00:00
Toba Ojo	0945097abb	Merge branch 'develop' into feature/mobile-menu	2025-11-14 15:25:57 +00:00
TobaOjo	1b46ecc3d1	Merge pull request '- added nped category options for alert popups' (#10 ) from bugfix/NPEDconfig into develop Reviewed-on: #10	2025-11-14 15:10:57 +00:00
Toba Ojo	dd1cd342c1	- added nped category options for alert popups - minor fix on modal for 'DISABLED' MCC	2025-11-14 15:01:01 +00:00
Toba Ojo	0a1ac97c57	- removed console.log	2025-11-14 11:55:01 +00:00
Toba Ojo	ac53a8fd7f	Merge branch 'develop' into feature/mobile-menu	2025-11-12 10:17:49 +00:00
TobaOjo	96a880a4df	Merge pull request 'develop' (#9 ) from develop into main Reviewed-on: #9	2025-11-12 09:50:18 +00:00
TobaOjo	3ceca96276	Merge branch 'main' into develop	2025-11-12 09:50:09 +00:00
TobaOjo	e7b741af78	Merge pull request 'updated and improved ip address validation' (#8 ) from bugfix/ipaddress into develop Reviewed-on: #8	2025-11-12 09:49:03 +00:00
Toba Ojo	ed271964d8	updated and improved ip address validation	2025-11-12 09:46:59 +00:00
TobaOjo	9b996430d0	Merge pull request '- added additional modem settings and ip validation' (#6 ) from bugfix/modem into develop Reviewed-on: #6	2025-11-11 16:24:02 +00:00
Toba Ojo	2ccc26ebdc	- added additional modem settings and ip validation	2025-11-11 16:22:30 +00:00
Toba Ojo	b86830a3c3	updated styling for small mobile screens	2025-11-11 15:44:06 +00:00
TobaOjo	3d1cc09a5b	Merge pull request '- removed dist and updated readme' (#5 ) from develop into main Reviewed-on: #5	2025-11-11 14:27:59 +00:00
TobaOjo	f571ab80a2	Merge branch 'main' into develop	2025-11-11 14:27:50 +00:00
Toba Ojo	b2335d2d4d	- removed dist and updated readme	2025-11-11 14:26:52 +00:00
TobaOjo	a873da8ef5	Merge pull request 'develop' (#4 ) from develop into main Reviewed-on: #4	2025-11-11 13:58:46 +00:00
Toba Ojo	5014c97b4d	updated readme	2025-11-11 13:57:05 +00:00
Toba Ojo	e374456588	updated readme	2025-11-11 13:52:58 +00:00
TobaOjo	ee3e111e9b	Merge pull request 'Update README.md' (#3 ) from tobaojo-patch-1 into develop Reviewed-on: #3	2025-11-11 13:50:02 +00:00
TobaOjo	a8178269c2	Update README.md	2025-11-11 13:49:46 +00:00
TobaOjo	c057ce5084	Merge pull request 'develop' (#2 ) from develop into main Reviewed-on: #2	2025-11-11 12:52:29 +00:00
Toba Ojo	0c7d99f7ea	minor bugfix: removed csv check for update files	2025-11-11 12:50:48 +00:00
TobaOjo	f2e10f958d	Merge pull request 'added wifi validation' (#1 ) from bugfix/wifi into develop Reviewed-on: #1	2025-11-11 12:40:15 +00:00
Toba Ojo	903b856303	added wifi validation	2025-11-11 12:37:28 +00:00
Toba Ojo	be0a047d30	- commiting changes for now will revert back	2025-11-11 12:01:28 +00:00
Toba Ojo	672ff1d2f1	Merged main into develop	2025-11-11 10:49:06 +00:00
Toba Ojo	08a07b7ffb	Merged in develop (pull request #38 ) Develop	2025-11-11 10:46:53 +00:00
Toba Ojo	d60c546db1	Merged in bugfix/Matttesting (pull request #37 ) Bugfix/Matttesting	2025-11-11 10:45:25 +00:00
Toba Ojo	f35e2f9fb5	- added store and forward - amended sighting ammend endpoint	2025-11-11 10:43:14 +00:00
Toba Ojo	cac9a2167d	- tweaked timeouts	2025-11-10 13:47:19 +00:00
Toba Ojo	feddaa1eb0	- addressed bugs flagged by BR	2025-11-10 13:44:29 +00:00
Toba Ojo	ddeedd2d72	- fixed cropped live feed and amended APIs for submission	2025-11-10 11:55:15 +00:00
Toba Ojo	a734de6261	- removed ids in api enpoints as they are in JSON objects being sent	2025-11-10 09:05:08 +00:00
Toba Ojo	d57ad1003a	-address fixes and changes per feedback from Matt and Brad	2025-11-05 16:30:27 +00:00
Toba Ojo	861f2dd31d	- added endpoints for dns and other	2025-11-04 17:04:19 +00:00
Toba Ojo	647fd201a3	- minor tweaks on zoom and navigation arrow	2025-11-04 16:09:24 +00:00
Toba Ojo	c127ce8a8c	- more addition bugfixes	2025-11-04 15:29:48 +00:00
Toba Ojo	61894c0c42	- minor big fixes - default settings toggled -update camera zoom need to test	2025-11-04 13:38:06 +00:00
Toba Ojo	76643cc84c	Merged main into develop	2025-11-04 12:00:04 +00:00
Toba Ojo	f6c1ea2b1c	- fixed endpoint typo	2025-11-04 11:49:40 +00:00
Toba Ojo	18e4d1dcff	- quick fix for bof2	2025-11-04 11:45:54 +00:00
Toba Ojo	010a9fb59d	Merged in develop (pull request #36 ) Develop	2025-11-04 11:41:47 +00:00
Toba Ojo	b1953dd965	Merged in bugfix/uploadsounds-2 (pull request #35 ) Bugfix/uploadsounds 2	2025-11-04 11:40:16 +00:00