Merge branch 'main' into develop

Reviewed-on: #11

.env

@@ -1,3 +0,0 @@
-VITE_BASEURL=http://192.168.75.11/
-VITE_TESTURL=http://100.82.205.44/SightingListRear/sightingSummary?mostRecentRef=-1
-VITE_OUTSIDE_BASEURL=http://100.82.205.44/api

.env.production

@@ -0,0 +1 @@
+VITE_CAM_BASE=

.github/copilot-instructions.md

@@ -0,0 +1,74 @@
+# Copilot Instructions for in-car-system-fe
+
+## Project Overview
+
+- **Type:** React + TypeScript SPA using Vite
+- **Purpose:** In-car system frontend for camera management, sighting history, and system settings
+- **Key Directories:**
+  - `src/components/`: UI components grouped by feature (Camera, Sighting, Settings, etc.)
+  - `src/context/`: React context for global state (e.g., AlertHit, NPEDUser, SightingFeed)
+  - `src/hooks/`: Custom React hooks for data fetching, config, and UI logic
+  - `src/pages/`: Top-level route views (Dashboard, Camera, Session, SystemSettings)
+  - `src/types/`: Shared TypeScript types
+  - `src/utils/`: Utility functions and config helpers
+
+## Architecture & Patterns
+
+- **Component Structure:**
+  - Feature-based folders (e.g., `CameraSettings`, `SightingOverview`)
+  - Components are mostly functional, using hooks and context for state
+- **State Management:**
+  - Uses React Context for cross-component state (see `src/context/providers/`)
+  - Reducers in `src/context/reducers/` for complex state updates
+- **Data Flow:**
+  - Data is fetched and managed via custom hooks (see `src/hooks/`)
+  - Context providers wrap the app in `main.tsx`
+- **Styling:**
+  - CSS modules (e.g., `App.css`, `index.css`)
+  - No CSS-in-JS or styled-components
+
+## Developer Workflows
+
+- **Install:** `npm install`
+- **Start Dev Server:** `npm run dev`
+- **Build:** `npm run build`
+- **Preview Build:** `npm run preview`
+- **Lint:** `npm run lint` (uses ESLint, see `eslint.config.js`)
+- **Type Check:** `tsc --noEmit`
+- **Test:** _No test framework configured by default_
+
+## Project Conventions
+
+- **TypeScript:**
+  - All components and hooks are typed; shared types in `src/types/types.ts`
+- **Component Naming:**
+  - Use PascalCase for components and folders
+  - Suffix with `Container`, `Card`, or `Modal` for UI roles
+- **Assets:**
+  - Images in `public/` or `src/assets/`
+  - Sounds in `src/assets/sounds/`
+- **No Redux, MobX, or external state libraries**
+- **No backend API code in this repo**
+
+## Integration Points
+
+- **External:**
+  - No direct backend integration code; data is assumed to come from context/hooks
+  - Sound assets for UI feedback in `src/assets/sounds/ui/`
+
+## Examples
+
+- **Add a new camera setting:**
+  - Create a new component in `src/components/CameraSettings/`
+  - Add state via context or a custom hook if needed
+- **Add a new page:**
+  - Add a file to `src/pages/` and update routing in the main app (see `main.tsx`)
+
+## References
+
+- See `README.md` for Vite/ESLint setup details
+- See `src/context/` and `src/hooks/` for app-specific state/data patterns
+
+---
+
+_If any conventions or workflows are unclear, please ask for clarification or examples from the codebase._

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "printWidth": 120
+}

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
+### Prerequisites
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 
-## Expanding the ESLint configuration
+- 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
+```bash
-export default tseslint.config([
+git clone https://mavportal.com/TobaOjo/Mav-Mobile-UI.git
-  globalIgnores(['dist']),
+cd Mav-Mobile-UI
-  {
+yarn install
-    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...
-    },
-  },
-])
 ```
 
-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
+<foot>
-import reactX from 'eslint-plugin-react-x'
+<script>
-import reactDom from 'eslint-plugin-react-dom'
+      if (window.location.pathname !== "/Mobile") {
-
+          window.location.replace(window.location.origin + "/Mobile");
-export default tseslint.config([
+      }
-  globalIgnores(['dist']),
+</script>
-  {
+</foot>
-    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...
-    },
-  },
-])
 ```
+
+- Run
+
+```bash
+sudo reboot
+```
+
+It should come back up all working

TODO.txt

@@ -1,18 +0,0 @@
-TODO:
-
-Hotlist upload (Question for Dion about API) and hits popping up in sighting stack. 
-NPED API working and catagories popping up in sighting stack. Images added to public folder.
-Make the friendly name of each camera permeate throughout.
-Make favicon MAV logo.
-Swipe down to get to session page. 
-I have made an error I don't know how to fix in SightingFeedProvider.tsx
-There is a bug in /front-camera-settings where the navigation arrow doesn't have a transparent background. I don't know why it is only that one and I can't find out why. Very strange.  
-The selected sighting in the sighting stack seems a tad buggy. Sometimes multiple get selected.
-Can the selected sighting be shown in full detail. How this will look is still up for debate. Either as a pop up card as in AiQ Flexi, or in the OVerview card??
-How do you know if the time has sync? Make UTC red if not sync. 
-Can the relative aspect ratio in SightingOverview.tsx be the ratio of image pixel size of the image to best take advantage of the space?
-
-
-FYI:
-
-Session, WiFi and Modem stuff isn't implimented in the backend. Those are just placeholders for now. 

index.html

@@ -2,12 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/MAV-Blue.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>MAV | In Car System</title>
+    <title>MAV Mobile</title>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root" class="min-h-screen flex flex-col"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.0.0",
@@ -20,14 +21,19 @@
     "clsx": "^2.1.1",
     "country-flag-icons": "^1.5.19",
     "formik": "^2.4.6",
+    "howler": "^2.2.4",
+    "rc-slider": "^11.1.9",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-modal": "^3.16.3",
     "react-router": "^7.8.0",
+    "react-sounds": "^1.0.25",
     "react-swipeable": "^7.0.2",
     "react-tabs": "^6.1.0",
+    "react-use": "^17.6.0",
     "sonner": "^2.0.7",
-    "tailwindcss": "^4.1.11"
+    "tailwindcss": "^4.1.11",
+    "use-debounce": "^10.0.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.32.0",

public/MAV-Blue.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 231.27 52.63">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #20456f;
+      }
+    </style>
+  </defs>
+  <g id="Layer_2-2" data-name="Layer_2">
+    <g>
+      <g id="Layer_1-2">
+        <path class="cls-1" d="M150.57,0h-40.57c-7.53,0-13.64,6.11-13.64,13.64v38.99h13.64v-13.68h40.57v13.68h13.64V13.64c0-7.53-6.11-13.64-13.64-13.64ZM110,28.55v-12.59c0-1.72,1.39-3.11,3.11-3.11h34.34c1.72,0,3.11,1.39,3.11,3.11v12.59h-40.57,0ZM88.45,13.64v38.99h-13.64V15.96c0-1.72-1.39-3.11-3.11-3.11h-17.5c-1.72,0-3.11,1.39-3.11,3.11v36.67h-13.73V15.96c0-1.72-1.39-3.11-3.11-3.11h-17.49c-1.72,0-3.11,1.39-3.11,3.11v36.67H0V13.64C0,6.11,6.11,0,13.64,0h23.55c2.72,0,5.18,1.05,7.03,2.76,1.85-1.71,4.32-2.76,7.03-2.76h23.55c7.53,0,13.64,6.11,13.64,13.64h.01ZM193.88,52.63c-1.19,0-2.28-.68-2.8-1.75L166.25,0h13.16c1.19,0,2.28.68,2.8,1.75,0,0,12.25,25.11,16.55,33.92,4.3-8.81,16.55-33.92,16.55-33.92.53-1.07,1.61-1.75,2.8-1.75h13.16l-24.83,50.88c-.52,1.07-1.61,1.75-2.8,1.75h-9.78.02Z"/>
+      </g>
+      <path class="cls-1" d="M222.79,48.39c0-2.36,1.9-4.24,4.24-4.24s4.24,1.88,4.24,4.24-1.88,4.24-4.24,4.24-4.24-1.9-4.24-4.24ZM223.45,48.39c0,1.96,1.6,3.58,3.58,3.58s3.56-1.62,3.56-3.58-1.58-3.56-3.56-3.56-3.58,1.56-3.58,3.56ZM228.17,50.83l-1.26-1.92h-.8v1.92h-.72v-4.86h1.98c.9,0,1.62.58,1.62,1.48,0,1.08-.96,1.44-1.24,1.44l1.3,1.94h-.88ZM226.11,46.57v1.72h1.26c.5,0,.88-.34.88-.84,0-.54-.38-.88-.88-.88h-1.26Z"/>
+    </g>
+  </g>
+</svg>

src/App.tsx

@@ -1,25 +1,35 @@
 import Container from "./components/UI/Container";
 import Dashboard from "./pages/Dashboard";
-import { Route, Routes } from "react-router";
+import { Navigate, Route, Routes } from "react-router";
 import FrontCamera from "./pages/FrontCamera";
 import RearCamera from "./pages/RearCamera";
 import SystemSettings from "./pages/SystemSettings";
 import Session from "./pages/Session";
-import { NPEDUserProvider } from "./context/providers/NPEDUserContextProvider";
+import { IntegrationsProvider } from "./context/providers/IntegrationsContextProvider";
+import { AlertHitProvider } from "./context/providers/AlertHitProvider";
+import { SoundProvider } from "react-sounds";
+import SoundContextProvider from "./context/providers/SoundContextProvider";
 
 function App() {
   return (
-    <NPEDUserProvider>
+    <SoundContextProvider>
-      <Routes>
+      <SoundProvider initialEnabled={true}>
-        <Route path="/" element={<Container />}>
+        <IntegrationsProvider>
-          <Route index element={<Dashboard />} />
+          <AlertHitProvider>
-          <Route path="front-camera-settings" element={<FrontCamera />} />
+            <Routes>
-          <Route path="rear-camera-settings" element={<RearCamera />} />
+              <Route path="/" element={<Container />}>
-          <Route path="system-settings" element={<SystemSettings />} />
+                <Route index element={<Dashboard />} />
-          <Route path="session-settings" element={<Session />} />
+                <Route path="a-camera-settings" element={<FrontCamera />} />
-        </Route>
+                <Route path="b-camera-settings" element={<RearCamera />} />
-      </Routes>
+                <Route path="system-settings" element={<SystemSettings />} />
-    </NPEDUserProvider>
+                <Route path="session-settings" element={<Session />} />
+                <Route path="*" element={<Navigate to="/" replace />} />
+              </Route>
+            </Routes>
+          </AlertHitProvider>
+        </IntegrationsProvider>
+      </SoundProvider>
+    </SoundContextProvider>
   );
 }
 

src/components/CameraOverview/SnapshotContainer.tsx

@@ -1,21 +1,30 @@
 import { useGetOverviewSnapshot } from "../../hooks/useGetOverviewSnapshot";
 import NavigationArrow from "../UI/NavigationArrow";
 
+import Loading from "../UI/Loading";
+import ErrorState from "../UI/ErrorState";
 type SnapshotContainerProps = {
   side: string;
   settingsPage?: boolean;
+  zoomLevel?: number;
+  onZoomLevelChange?: (level: number) => void;
 };
 
-export const SnapshotContainer = ({
+export const SnapshotContainer = ({ side, settingsPage }: SnapshotContainerProps) => {
-  side,
+  const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side);
-  settingsPage,
-}: SnapshotContainerProps) => {
-  const { canvasRef } = useGetOverviewSnapshot(side);
 
   return (
-    <div className="relative w-full aspect-video">
+    <div className="flex flex-col md:flex-row">
       <NavigationArrow side={side} settingsPage={settingsPage} />
-      <canvas ref={canvasRef} className="w-full h-full object-contain block" />
+      <div className="w-full bg-[#253445] rounded-md overflow-hidden md:h-[500px] lg:h-[70vh]">
+        {isError && <ErrorState />}
+        {isPending && (
+          <div className="absolute inset-0 grid place-items-center">
+            <Loading message="Camera Preview" />
+          </div>
+        )}
+        <canvas ref={canvasRef} className="absolute w-full h-full z-20" />
+      </div>
     </div>
   );
 };

src/components/CameraSettings/CameraSettingFields.tsx

@@ -1,48 +1,96 @@
 import { Formik, Field, Form } from "formik";
-import type {
+import type { CameraConfig, CameraSettingErrorValues, CameraSettingValues, ZoomInOptions } from "../../types/types";
-  CameraSettingErrorValues,
+import { useEffect, useMemo, useState } from "react";
-  CameraSettingValues,
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-} from "../../types/types";
+import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
-import { toast } from "sonner";
+import CardHeader from "../UI/CardHeader";
+import { useCameraMode, useCameraZoom } from "../../hooks/useCameraZoom";
+import { parseRTSPUrl, reverseZoomMapping, zoomMapping } from "../../utils/utils";
 
-const CameraSettingFields = () => {
+type CameraSettingsProps = {
-  const initialValues: CameraSettingValues = {
+  initialData: CameraConfig;
-    friendlyName: "",
+  updateCameraConfig: (values: CameraSettingValues) => Promise<void> | void;
-    cameraAddress: "",
+  zoomLevel?: number;
-    userName: "",
+  onZoomLevelChange?: (level: number | undefined) => void;
-    password: "",
+  updateCameraConfigError: null | Error;
-    setupCamera: 1,
+};
-  };
+
+const CameraSettingFields = ({
+  initialData,
+  updateCameraConfig,
+  zoomLevel,
+  onZoomLevelChange,
+}: CameraSettingsProps) => {
+  const [showPwd, setShowPwd] = useState(false);
+
+  const cameraControllerSide = initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB";
+  const { mutation, query } = useCameraZoom({ camera: cameraControllerSide });
+  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;
+    onZoomLevelChange?.(apiZoom);
+  }, [query?.data, onZoomLevelChange, apiZoom]);
+
+  const initialValues = useMemo<CameraSettingValues>(
+    () => ({
+      friendlyName: initialData?.id ?? "",
+      cameraAddress: initialData?.propURI?.value ?? "",
+      userName: parsed?.username ?? "",
+      password: parsed?.password ?? "",
+      id: initialData?.id,
+      mode: cameraMode ?? "day",
+      zoom: apiZoom,
+    }),
+
+    [initialData?.id, initialData?.propURI?.value, parsed?.username, parsed?.password, cameraMode, apiZoom]
+  );
 
   const validateValues = (values: CameraSettingValues) => {
     const errors: CameraSettingErrorValues = {};
     if (!values.friendlyName) errors.friendlyName = "Required";
     if (!values.cameraAddress) errors.cameraAddress = "Required";
-    if (!values.userName) errors.userName = "Required";
-    if (!values.password) errors.password = "Required";
     return errors;
   };
 
   const handleSubmit = (values: CameraSettingValues) => {
-    // post values to endpoint
+    updateCameraConfig(values);
-    toast("Settings Saved");
   };
 
+  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
       initialValues={initialValues}
       onSubmit={handleSubmit}
       validate={validateValues}
       validateOnChange={false}
+      enableReinitialize
     >
-      {({ errors, touched, setFieldValue }) => (
+      {({ errors, touched, values, setFieldValue, isSubmitting }) => (
-        <Form className="flex flex-col space-y-4 p-2">
+        <Form className="flex flex-col space-y-6 p-2 overflow-x-hidden">
           <div className="flex flex-col space-y-2 relative">
-            <label htmlFor="friendlyName">Friendly Name</label>
+            <label htmlFor="friendlyName">Name</label>
             {touched.friendlyName && errors.friendlyName && (
-              <small className="absolute right-0 top-0 text-red-500">
+              <small className="absolute right-0 top-0 text-red-500">{errors.friendlyName}</small>
-                {errors.friendlyName}
-              </small>
             )}
             <Field
               id="friendlyName"
@@ -53,30 +101,10 @@ const CameraSettingFields = () => {
             />
           </div>
 
-          <div className="flex flex-col space-y-2 relative">
-            <label htmlFor="setupCamera">Setup Camera</label>
-            <Field
-              as="select"
-              id="setupCamera"
-              name="setupCamera"
-              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
-              onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
-                setFieldValue("setupCamera", parseInt(e.target.value, 10))
-              }
-            >
-              <option value={1}>1</option>
-              <option value={2}>2</option>
-              <option value={3}>3</option>
-              <option value={4}>4</option>
-            </Field>
-          </div>
-
           <div className="flex flex-col space-y-2 relative">
             <label htmlFor="cameraAddress">Camera Address</label>
             {touched.cameraAddress && errors.cameraAddress && (
-              <small className="absolute right-0 top-0 text-red-500">
+              <small className="absolute right-0 top-0 text-red-500">{errors.cameraAddress}</small>
-                {errors.cameraAddress}
-              </small>
             )}
             <Field
               id="cameraAddress"
@@ -84,16 +112,13 @@ const CameraSettingFields = () => {
               type="text"
               className="p-2 border border-gray-400 rounded-lg"
               placeholder="RTSP://..."
-              autoComplete="street-address"
             />
           </div>
 
           <div className="flex flex-col space-y-2 relative">
             <label htmlFor="userName">User Name</label>
             {touched.userName && errors.userName && (
-              <small className="absolute right-0 top-0 text-red-500">
+              <small className="absolute right-0 top-0 text-red-500">{errors.userName}</small>
-                {errors.userName}
-              </small>
             )}
             <Field
               id="userName"
@@ -108,26 +133,92 @@ const CameraSettingFields = () => {
           <div className="flex flex-col space-y-2 relative">
             <label htmlFor="password">Password</label>
             {touched.password && errors.password && (
-              <small className="absolute right-0 top-0 text-red-500">
+              <small className="absolute right-0 top-0 text-red-500">{errors.password}</small>
-                {errors.password}
-              </small>
             )}
-            <Field
+            <div className="flex gap-2 items-center relative mb-4">
-              id="password"
+              <Field
-              name="password"
+                id="password"
-              type="password"
+                name="password"
-              className="p-2 border border-gray-400 rounded-lg"
+                type={showPwd ? "text" : "password"}
-              placeholder="Enter password"
+                className="p-2 border border-gray-400 rounded-lg w-full "
-              autoComplete="new-password"
+                placeholder="Enter password"
-            />
+              />
+              <FontAwesomeIcon
+                type="button"
+                className="absolute right-5 end-0"
+                onClick={() => setShowPwd((s) => !s)}
+                icon={showPwd ? faEyeSlash : faEye}
+              />
+            </div>
+            <div className="my-3">
+              <CardHeader title="Zoom settings" />
+              <div className="mx-auto grid grid-cols-3 place-items-center">
+                {zoomOptions.map((zoom) => (
+                  <div key={zoom} className="my-3">
+                    <Field
+                      type="radio"
+                      name="zoom"
+                      value={zoom.toString()}
+                      checked={selectedZoom === zoom}
+                      className="hidden peer"
+                      id={`zoom${zoom}`}
+                      onChange={() => handleRadioButtonChange(zoom)}
+                    />
+                    <label
+                      htmlFor={`zoom${zoom}`}
+                      className="px-6 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"
+                    >
+                      {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">
+              {
+                <button type="submit" className="bg-green-700 text-white rounded-lg p-2 mx-auto w-full">
+                  {isSubmitting ? "Saving" : "Save settings"}
+                </button>
+              }
+            </div>
           </div>
-
-          <button
-            type="submit"
-            className="bg-blue-800 text-white rounded-lg p-2 mx-auto"
-          >
-            Save settings
-          </button>
         </Form>
       )}
     </Formik>

src/components/CameraSettings/CameraSettings.tsx

@@ -1,14 +1,35 @@
+import { useFetchCameraConfig } from "../../hooks/useCameraConfig";
 import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
 import CameraSettingFields from "./CameraSettingFields";
 import { faWrench } from "@fortawesome/free-solid-svg-icons";
 
-const CameraSettings = ({ title }: { title: string }) => {
+const CameraSettings = ({
+  title,
+  side,
+  zoomLevel,
+  onZoomLevelChange,
+}: {
+  title: string;
+  side: string;
+  zoomLevel?: number;
+  onZoomLevelChange?: (level: number | undefined) => void;
+}) => {
+  const { data, updateCameraConfig, updateCameraConfigError } = useFetchCameraConfig(side);
+
   return (
-    <Card>
+    <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 h-full">
+      <div className="relative flex flex-col space-y-3">
         <CardHeader title={title} icon={faWrench} />
-        <CameraSettingFields />
+        {
+          <CameraSettingFields
+            initialData={data}
+            updateCameraConfig={updateCameraConfig}
+            zoomLevel={zoomLevel}
+            onZoomLevelChange={onZoomLevelChange}
+            updateCameraConfigError={updateCameraConfigError}
+          />
+        }
       </div>
     </Card>
   );

src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx

@@ -1,34 +1,22 @@
 import clsx from "clsx";
 import Card from "../UI/Card";
-import CardHeader from "../UI/CardHeader";
-import { faCamera } from "@fortawesome/free-regular-svg-icons";
 import { useSwipeable } from "react-swipeable";
 import { useNavigate } from "react-router";
-import { useOverviewVideo } from "../../hooks/useOverviewVideo";
+
 import SightingOverview from "../SightingOverview/SightingOverview";
 
-type CardProps = React.HTMLAttributes<HTMLDivElement>;
+const FrontCameraOverviewCard = () => {
-
-const FrontCameraOverviewCard = ({ className }: CardProps) => {
-  useOverviewVideo();
   const navigate = useNavigate();
   const handlers = useSwipeable({
-    onSwipedRight: () => navigate("/front-camera-settings"),
+    onSwipedRight: () => navigate("/a-camera-settings"),
-    onSwipedDown: () => navigate("/system-settings"),
+    onSwipedLeft: () => navigate("/b-camera-settings"),
     trackMouse: true,
   });
 
   return (
-    <Card
+    <Card className={clsx("relative min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[70%] overflow-y-hidden")}>
-      className={clsx(
+      <div className="w-full" {...handlers}>
-        "relative min-h-[40vh] md:min-h-[60vh] h-auto",
-        className
-      )}
-    >
-      <div className="flex flex-col space-y-3 h-full" {...handlers}>
-        <CardHeader title="Front Overview" icon={faCamera} />
         <SightingOverview />
-        {/* <SnapshotContainer side="TargetDetectionFront" /> */}
       </div>
     </Card>
   );

src/components/FrontCameraSettings/OverviewVideoContainer.tsx

@@ -1,23 +1,43 @@
 import clsx from "clsx";
 import { SnapshotContainer } from "../CameraOverview/SnapshotContainer";
-import { faCamera } from "@fortawesome/free-regular-svg-icons";
 import Card from "../UI/Card";
-import CardHeader from "../UI/CardHeader";
+import { useNavigate, useLocation } from "react-router";
+import { useSwipeable } from "react-swipeable";
 
 const OverviewVideoContainer = ({
-  title,
   side,
   settingsPage,
+  zoomLevel,
+  onZoomLevelChange,
 }: {
   title: string;
   side: string;
   settingsPage?: boolean;
+  zoomLevel?: number;
+  onZoomLevelChange?: (level: number) => void;
 }) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const handlers = useSwipeable({
+    onSwipedLeft: () => {
+      if (location.pathname === "/b-camera-settings") return;
+      navigate("/");
+    },
+    onSwipedRight: () => {
+      if (location.pathname === "/a-camera-settings") return;
+      navigate("/");
+    },
+    trackMouse: true,
+  });
   return (
-    <Card className={clsx("min-h-[40vh] md:min-h-[60vh] h-auto")}>
+    <Card className={clsx("relative min-h-[40vh] md:min-h-[40vh] max-h-[70vh] lg:w-[70%] overflow-y-hidden")}>
-      <div className="relative flex flex-col space-y-3 h-full">
+      <div className="w-full" {...handlers}>
-        <CardHeader title={title} icon={faCamera} />
+        <SnapshotContainer
-        <SnapshotContainer side={side} settingsPage={settingsPage} />
+          side={side}
+          settingsPage={settingsPage}
+          zoomLevel={zoomLevel}
+          onZoomLevelChange={onZoomLevelChange}
+        />
       </div>
     </Card>
   );

src/components/HistoryList/AlertItem.tsx

@@ -0,0 +1,90 @@
+import type { SightingType } from "../../types/types";
+import NumberPlate from "../PlateStack/NumberPlate";
+import SightingModal from "../SightingModal/SightingModal";
+import { useState } from "react";
+import HotListImg from "/Hotlist_Hit.svg";
+import { useAlertHitContext } from "../../context/AlertHitContext";
+import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
+import NPED_CAT_A from "/NPED_Cat_A.svg";
+import NPED_CAT_B from "/NPED_Cat_B.svg";
+import NPED_CAT_C from "/NPED_Cat_C.svg";
+import { checkIsHotListHit, formatAge, getNPEDCategory } from "../../utils/utils";
+import { faX } from "@fortawesome/free-solid-svg-icons";
+import { faClock } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Badge from "../UI/Badge";
+
+type AlertItemProps = {
+  item: SightingType;
+};
+
+const AlertItem = ({ item }: AlertItemProps) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { dispatch } = useAlertHitContext();
+  const { mutation } = useCameraBlackboard();
+
+  const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY";
+
+  const isHotListHit = checkIsHotListHit(item);
+  const cat = getNPEDCategory(item);
+  const isNPEDHitA = cat === "A";
+  const isNPEDHitB = cat === "B";
+  const isNPEDHitC = cat === "C";
+
+  const handleClick = () => {
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleDelete = async (deletedItem: SightingType | null) => {
+    const res = await mutation.mutateAsync({
+      operation: "VIEW",
+      path: "alertHistory",
+    });
+    const oldArray = res?.result;
+    const updatedArray = oldArray?.filter((item: SightingType) => item?.ref !== deletedItem?.ref);
+
+    mutation.mutate({
+      operation: "INSERT",
+      path: "alertHistory",
+      value: updatedArray,
+    });
+    dispatch({ type: "REMOVE", payload: item });
+  };
+  return (
+    <div className="flex flex-col w-full relative">
+      <div className="border border-gray-600 rounded-lg items-center p-4">
+        <div className="flex flex-row space-x-3 ml-4">
+          <Badge text={`Seen: ${formatAge(item.timeStampMillis)}`} icon={faClock} />
+        </div>
+        <button onClick={() => handleDelete(item)} className="absolute right-2 top-3">
+          <FontAwesomeIcon icon={faX} size="xl" />
+        </button>
+
+        <div className="flex flex-row p-4 w-full mx-auto justify-between" onClick={handleClick}>
+          {isHotListHit && <img src={HotListImg} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
+          {isNPEDHitA && <img src={NPED_CAT_A} alt="NPEDHITicon" className="h-20 object-contain rounded-md" />}
+          {isNPEDHitB && <img src={NPED_CAT_B} alt="NPEDHITicon" className="h-20 object-contain rounded-md" />}
+          {isNPEDHitC && <img src={NPED_CAT_C} alt="NPEDHITicon" className="h-20 object-contain rounded-md" />}
+          <div className={`border p-1 hidden md:block`}>
+            <img src={item?.plateUrlColour} height={48} width={200} alt="colour patch" />
+          </div>
+          <div className="h-20">
+            <NumberPlate vrm={item.vrm} motion={motionAway} />
+          </div>
+        </div>
+        <SightingModal
+          isSightingModalOpen={isModalOpen}
+          handleClose={closeModal}
+          sighting={item}
+          onDelete={handleDelete}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default AlertItem;

src/components/HistoryList/HistoryList.tsx

@@ -0,0 +1,56 @@
+import { useAlertHitContext } from "../../context/AlertHitContext";
+import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
+import type { CameraBlackBoardOptions } from "../../types/types";
+import Card from "../UI/Card";
+import CardHeader from "../UI/CardHeader";
+import AlertItem from "./AlertItem";
+
+const HistoryList = () => {
+  const { state, dispatch, isLoading, error } = useAlertHitContext();
+  const { mutation } = useCameraBlackboard();
+
+  const handleClearListClick = (listName: CameraBlackBoardOptions) => {
+    dispatch({ type: "DELETE", payload: [] });
+    mutation.mutate({
+      operation: "DELETE",
+      path: listName.path,
+    });
+  };
+
+  return (
+    <Card className="h-100 p-4 col-span-3">
+      <CardHeader title="Alert History" />
+      <button
+        className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition md:w-[10%] mb-2"
+        onClick={() => handleClearListClick({ path: "alertHistory" })}
+      >
+        Clear List
+      </button>
+      {isLoading && <p className="px-2">Loading...</p>}
+      {error && <p className="text-red-500 px-2">Error: {error.message}</p>}
+      <div className="flex flex-col gap-1 px-2">
+        {state?.alertList?.length > 0 ? (
+          <div className="mt-3 grid grid-cols-1 gap-3">
+            {state?.alertList?.map((alertItem) => (
+              <AlertItem item={alertItem} key={alertItem.vrm} />
+            ))}
+          </div>
+        ) : (
+          <div className="mt-4 flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center">
+            <div className="mb-3 rounded-xl bg-slate-800 px-3 py-1 text-xs uppercase tracking-wider text-slate-400">
+              No Alert Results
+            </div>
+            <p className="max-w-md text-slate-300">
+              Alerts will appear here in real-time once there are <span className="text-emerald-400">Hotlist</span> or{" "}
+              <span className="text-amber-600">NPED</span> hits. Use{" "}
+              <span className="text-emerald-400">Start Session</span> to begin capturing results, or add a{" "}
+              <span className="text-emerald-400">Sighting</span> from the sighting list.
+            </p>
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+};
+
+export default HistoryList;

src/components/PlateStack/NumberPlate.tsx

@@ -4,23 +4,51 @@ import { formatNumberPlate } from "../../utils/utils";
 type NumberPlateProps = {
   vrm?: string | undefined;
   motion?: boolean;
+  size?: "xs" | "sm" | "md" | "lg";
 };
 
-const NumberPlate = ({ motion, vrm }: NumberPlateProps) => {
+const NumberPlate = ({ motion, vrm, size }: NumberPlateProps) => {
+  let options = {
+    plateWidth: "w-[14rem]",
+    textSize: "text-2xl",
+    borderWidth: "border-6",
+  };
+
+  switch (size) {
+    case "xs":
+      options = {
+        plateWidth: "w-[8rem]",
+        textSize: "text-md",
+        borderWidth: "border-4",
+      };
+      break;
+    case "sm":
+      options = {
+        plateWidth: "w-[10rem]",
+        textSize: "text-lg",
+        borderWidth: "border-4",
+      };
+      break;
+    case "lg":
+      options = {
+        plateWidth: "w-[16rem]",
+        textSize: "text-3xl",
+        borderWidth: "border-6",
+      };
+      break;
+  }
+
   return (
     <div
-      className={`relative w-[8rem] border-4 border-black rounded-lg text-nowrap
+      className={`relative ${options.plateWidth} ${options.borderWidth} border-black rounded-xl text-nowrap
-      text-black px-3 
+        text-black px-6 py-2
-      ${motion ? "bg-yellow-400" : "bg-white"}
+        ${motion ? "bg-yellow-400" : "bg-white"}`}
-      `}
     >
-      <div className="">
+      <div>
-        <div className="absolute inset-y-0 left-0 bg-blue-600 w-4 flex flex-col">
+        <div className="absolute inset-y-0 left-0 bg-blue-600 w-8 flex flex-col">
           <GB />
         </div>
-        <p className=" pl-2 font-extrabold text-right">
+        <p className={`pl-4 font-extrabold ${options.textSize} text-right`}>{vrm && formatNumberPlate(vrm)}</p>
-          {vrm && formatNumberPlate(vrm)}
-        </p>
       </div>
     </div>
   );

src/components/PlateStack/Sighting.tsx

@@ -1,19 +0,0 @@
-import NumberPlate from "./NumberPlate";
-
-import type { SightingType } from "../../types/types";
-
-type SightingProps = {
-  sighting: SightingType;
-};
-
-const Sighting = ({ sighting }: SightingProps) => {
-  return (
-    <div className="bg-gray-700 flex flex-col md:flex-row m-1 items-center justify-between w-full rounded-md p-4 space-y-4">
-      <div className="flex flex-row m-1 items-center space-x-4">
-        <NumberPlate />
-      </div>
-    </div>
-  );
-};
-
-export default Sighting;

src/components/PlateStack/Sightings.tsx

@@ -1,21 +0,0 @@
-import Card from "../UI/Card";
-import SightingHeader from "./SightingHeader";
-import Sighting from "./Sighting";
-import { useLatestSighting } from "../../hooks/useLatestSighting";
-
-type SightingProps = {
-  title: string;
-};
-
-const Sightings = ({ title }: SightingProps) => {
-  const { data } = useLatestSighting();
-
-  return (
-    <Card className="h-[10rem] md:h-[15rem] overflow-x-hidden">
-      <SightingHeader title={title} />
-      <Sighting sighting={data} />
-    </Card>
-  );
-};
-
-export default Sightings;

src/components/PopupSettings/NPEDCategoryPopup.tsx

@@ -0,0 +1,67 @@
+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",
+    });
+    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;

src/components/RearCameraOverview/RearCameraOverviewCard.tsx

@@ -6,28 +6,22 @@ import { useNavigate } from "react-router";
 import CardHeader from "../UI/CardHeader";
 import { faCamera } from "@fortawesome/free-regular-svg-icons";
 import SightingOverview from "../SightingOverview/SightingOverview";
+import { useSightingFeedContext } from "../../context/SightingFeedContext";
 
 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"),
-    onSwipedDown: () => navigate("/system-settings"),
     trackMouse: true,
   });
-
+  const { mostRecent } = useSightingFeedContext();
   return (
-    <Card
+    <Card className={clsx("relative min-h-[40vh] md:min-h-[60vh] h-auto", className)}>
-      className={clsx(
-        "relative min-h-[40vh] md:min-h-[60vh] h-auto",
-        className
-      )}
-    >
       <div className="flex flex-col space-y-3 h-full" {...handlers}>
-        <CardHeader title="Rear Overview" icon={faCamera} />
+        <CardHeader title="Rear Overview" icon={faCamera} sighting={mostRecent} />
         <SightingOverview />
-        {/* <SnapshotContainer side="TargetDetectionRear" /> */}
       </div>
     </Card>
   );

src/components/SessionForm/HitSearchCard.tsx

@@ -1,32 +1,52 @@
 import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
 import FormGroup from "../SettingForms/components/FormGroup";
+import { useAlertHitContext } from "../../context/AlertHitContext";
+import { useState } from "react";
 
 const SessionCard = () => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const { dispatch } = useAlertHitContext();
 
   return (
-    <Card>
+    <Card className="p-4 col-span-5">
       <CardHeader title={"Hit Search"} />
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4 px-2">
+        <label htmlFor="VRM" className="font-medium whitespace-nowrap md:w-1/2 text-left">
+          VRM (Min 2 letters)
+        </label>
         <FormGroup>
-          <label htmlFor="VRM" className="font-medium whitespace-nowrap md:w-1/2 text-left">VRM (Min 2 letters)</label>
+          <div className="flex flex-row justify-between md:w-full space-x-3">
-          <div className="flex-1 flex justify-end md:w-2/3">
             <input
               id="VRMSelect"
               name="VRMSelect"
               type="text"
-              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-[70%] focus:border-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-400/30"
               placeholder="Enter VRM"
-              //onChange={e => setSntpServer(e.target.value)}
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
             />
+
+            <button
+              className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-[30%] mx-3"
+              onClick={() => dispatch({ type: "SEARCH", payload: searchTerm })}
+              disabled={searchTerm.trim().length < 2}
+            >
+              Search Hit list
+            </button>
           </div>
         </FormGroup>
-        <button
+        {searchTerm && (
-          className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full max-w-md"
+          <button
-          //onClick={() => handleModemSave(apn, username, password, authType)}
+            className="bg-gray-300 text-gray-900 px-4 py-2 rounded hover:bg-gray-700 transition w-[30%] "
-        >
+            onClick={() => {
-          Search Hit list
+              setSearchTerm("");
-        </button>
+              dispatch({ type: "SEARCH", payload: "" });
+            }}
+          >
+            Clear Search
+          </button>
+        )}
       </div>
     </Card>
   );

src/components/SessionForm/SessionCard.tsx

@@ -1,24 +1,148 @@
 import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
+import { useIntegrationsContext } from "../../context/IntegrationsContext";
+import type { ReducedSightingType } from "../../types/types";
+import { toast } from "sonner";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFloppyDisk, faPause, faPlay, faStop } from "@fortawesome/free-solid-svg-icons";
+import VehicleSessionItem from "../UI/VehicleSessionItem";
+import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
 
 const SessionCard = () => {
+  const { state, dispatch } = useIntegrationsContext();
+  const { mutation } = useCameraBlackboard();
+
+  const sessionStarted = state.sessionStarted;
+  const sessionPaused = state.sessionPaused;
+  const sessionList = state.sessionList;
+
+  const sightings = [...new Map(sessionList?.map((vehicle) => [vehicle.vrm, vehicle]))];
+
+  const dedupedSightings = sightings.map((sighting) => sighting[1]);
+
+  const vehicles = dedupedSightings.reduce<Record<string, ReducedSightingType[]>>(
+    (acc, item) => {
+      const hotlisthit = Object.values(item.metadata?.hotlistMatches ?? {}).includes(true);
+      if (item.metadata?.npedJSON["NPED CATEGORY"] === "A") acc.npedCatA.push(item);
+      if (item.metadata?.npedJSON["NPED CATEGORY"] === "B") acc.npedCatB.push(item);
+      if (item.metadata?.npedJSON["NPED CATEGORY"] === "C") acc.npedCatC.push(item);
+      if (item.metadata?.npedJSON["NPED CATEGORY"] === "D") acc.npedCatD.push(item);
+      if (item.metadata?.npedJSON["TAX STATUS"] === false) acc.notTaxed.push(item);
+      if (item.metadata?.npedJSON["MOT STATUS"] === false) acc.notMOT.push(item);
+      if (hotlisthit) acc.hotlistHit.push(item);
+      acc.vehicles.push(item);
+      return acc;
+    },
+    {
+      npedCatA: [],
+      npedCatB: [],
+      npedCatC: [],
+      npedCatD: [],
+      notTaxed: [],
+      notMOT: [],
+      hotlistHit: [],
+      vehicles: [],
+    }
+  );
+
+  const handleStartClick = () => {
+    dispatch({ type: "SESSIONSTART", payload: !sessionStarted });
+    dispatch({ type: "SESSIONPAUSE", payload: false });
+    toast(`${sessionStarted ? "Vehicle tracking session ended" : "Vehicle tracking session started"}`);
+  };
+
+  const handlepauseClick = () => {
+    dispatch({ type: "SESSIONPAUSE", payload: !sessionPaused });
+    toast(`${sessionStarted ? "Vehicle tracking session paused" : "Vehicle tracking session resumed"}`);
+  };
+
+  const handleSaveCick = async () => {
+    const result = await mutation.mutateAsync({
+      operation: "INSERT",
+      path: "sessionStats",
+      value: dedupedSightings,
+    });
+
+    if (result.reason === "OK") toast.success("Session saved");
+  };
 
   return (
-    <Card>
+    <Card className="p-4 col-span-3">
-      <CardHeader title={"Session"} />
+      <CardHeader title="Session" />
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4 px-3">
         <button
-          className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full max-w-md"
+          className={`${sessionStarted ? "bg-red-600" : "bg-[#26B170]"} text-white px-4 py-2 rounded ${
-          //onClick={() => handleModemSave(apn, username, password, authType)}
+            sessionStarted ? "hover:bg-red-700" : "hover:bg-green-700"
+          }  transition w-full`}
+          onClick={handleStartClick}
         >
-          Start Session
+          <div className="flex flex-row gap-3 items-center justify-self-center">
+            <FontAwesomeIcon icon={sessionStarted ? faStop : faPlay} />
+            <p>{sessionStarted ? "End Session" : "Start Session"}</p>
+          </div>
         </button>
-        <h2 className="text-white mb-2">Number of cars: </h2>
+        <div className="flex flex-col lg:flex-row gap-5">
-        <h2 className="text-white mb-2">Cars without Tax: </h2>
+          {sessionStarted && (
-        <h2 className="text-white mb-2">Cars without MOT: </h2>
+            <button
-        <h2 className="text-white mb-2">Cars with NPED Cat A: </h2>
+              className={`bg-blue-600 text-white px-4 py-2 rounded transition w-full lg:w-[50%]`}
-        <h2 className="text-white mb-2">Cars with NPED Cat B: </h2>
+              onClick={handleSaveCick}
-        <h2 className="text-white mb-2">Cars with NPED Cat C: </h2>
+            >
+              <div className="flex flex-row gap-3 items-center justify-self-center">
+                <FontAwesomeIcon icon={faFloppyDisk} />
+                <p>Save session</p>
+              </div>
+            </button>
+          )}
+          {sessionStarted && (
+            <button
+              className={`bg-gray-300 text-gray-800 px-4 py-2 rounded transition w-full lg:w-[50%]`}
+              onClick={handlepauseClick}
+            >
+              <div className="flex flex-row gap-3 items-center justify-self-center">
+                <FontAwesomeIcon icon={sessionPaused ? faPlay : faPause} />
+                <p>{sessionPaused ? "Resume session" : "Pause session"}</p>
+              </div>
+            </button>
+          )}
+        </div>
+
+        <ul className="text-white space-y-2">
+          <VehicleSessionItem
+            sessionNumber={vehicles.vehicles.length}
+            textColour="text-green-400"
+            vehicleTag={"Number of Vehicles sightings:"}
+          />
+          <VehicleSessionItem
+            sessionNumber={vehicles.notTaxed.length}
+            textColour="text-amber-400"
+            vehicleTag={"Vehicles without Tax:"}
+          />
+          <VehicleSessionItem
+            sessionNumber={vehicles.notMOT.length}
+            textColour="text-red-500"
+            vehicleTag={"Vehicles without MOT:"}
+          />
+          <VehicleSessionItem
+            sessionNumber={vehicles.hotlistHit.length}
+            textColour="text-blue-400"
+            vehicleTag={"Vehicles on Hotlists:"}
+          />
+          <VehicleSessionItem
+            sessionNumber={vehicles.npedCatA.length}
+            textColour="text-gray-300"
+            vehicleTag={"Vehicles with NPED Cat A:"}
+          />
+          <VehicleSessionItem
+            sessionNumber={vehicles.npedCatB.length}
+            textColour="text-gray-300"
+            vehicleTag={"Vehicles with NPED Cat B:"}
+          />
+          <VehicleSessionItem
+            sessionNumber={vehicles.npedCatC.length}
+            textColour="text-gray-300"
+            vehicleTag={"Vehicles with NPED Cat C:"}
+          />
+        </ul>
       </div>
     </Card>
   );

src/components/SettingForms/BearerType/BearerTypeCard.tsx

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

src/components/SettingForms/BearerType/BearerTypeFields.tsx

@@ -1,32 +1,34 @@
 import { Field, useFormikContext } from "formik";
-
 import FormToggle from "../components/FormToggle";
-
+import FormGroup from "../components/FormGroup";
-export const ValuesComponent = () => {
+import type { BearerTypeFieldType, InitialValuesForm } from "../../../types/types";
-  return null;
-};
 
 const BearerTypeFields = () => {
-  const { values } = useFormikContext();
+  useFormikContext<BearerTypeFieldType & InitialValuesForm>();
 
   return (
-    <div className="flex flex-col space-y-4">
+    <div className="flex flex-col space-y-4 px-2">
-      <div className="flex items-center gap-3">
+      <FormGroup>
         <label htmlFor="format">Format</label>
         <Field
           as="select"
           name="format"
           id="format"
-          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
+          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
         >
-          <option value="JSON">JSON</option>
+          <option key={"JSON"} value={"JSON"}>
-          <option value="BOF2">BOF2</option>
+            JSON
+          </option>
+          <option key={"BOF2"} value={"BOF2"}>
+            BOF2
+          </option>
         </Field>
-      </div>
+      </FormGroup>
-      <div className="flex flex-col space-y-4">
+      <FormGroup>
-        <FormToggle name="enabled" label="Enabled" />
+        <div className="flex flex-col space-y-4">
-        <FormToggle name="verbose" label="Verbose" />
+          <FormToggle name="enabled" label="Enabled" />
-      </div>
+        </div>
+      </FormGroup>
     </div>
   );
 };

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

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

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

@@ -1,63 +1,247 @@
-import { Field, useFormikContext } from "formik";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Field, useFormikContext, type FormikTouched } from "formik";
 import FormGroup from "../components/FormGroup";
+import { useEffect, useState } from "react";
+import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import type { BearerTypeFieldType, InitialValuesForm } from "../../../types/types";
+import { toast } from "sonner";
+import type { UseQueryResult } from "@tanstack/react-query";
 
-const ChannelFields = () => {
+type ChannelFieldsProps = {
-  useFormikContext();
+  touched: FormikTouched<BearerTypeFieldType & InitialValuesForm>;
+  isSubmitting: boolean;
+
+  backOfficeData: UseQueryResult<any, Error>;
+  format?: string;
+};
+
+const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) => {
+  const [showPwd, setShowPwd] = useState(false);
+  const { submitCount, isValid, values, errors } = useFormikContext<BearerTypeFieldType & InitialValuesForm>();
+
+  const ValidationToastOnce = () => {
+    useEffect(() => {
+      if (submitCount > 0 && !isValid) {
+        toast.error("Check fields are filled in");
+      }
+    }, []);
+    return null;
+  };
 
   return (
-    <div className="flex flex-col space-y-2">
+    <>
-      <FormGroup>
+      {format?.toLowerCase() !== "bof2" && format?.toLowerCase() !== "json" ? (
-        <label htmlFor="backoffice" className="m-0">
+        <>
-          Back Office URL
+          <div className="mt-4 flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center">
-        </label>
+            <div className="mb-3 rounded-xl bg-slate-800 px-3 py-1 text-xs uppercase tracking-wider text-slate-400">
-        <Field
+              Format coming soon
-          name={"backOfficeURL"}
+            </div>
-          type="text"
+
-          id="backoffice"
+            <p className="max-w-md text-slate-300">
-          placeholder="https://www.backoffice.com"
+              Output configuration currently supports <span className="font-bold text-blue-400">JSON</span> or{" "}
-          className="p-1.5 border border-gray-400 rounded-lg"
+              <span className="font-bold text-emerald-400">BOF2</span>. <br /> More formats will be added in future
-        />
+              updates.
-      </FormGroup>
+            </p>
-      <FormGroup>
+          </div>
-        <label htmlFor="username">Username</label>
+        </>
-        <Field
+      ) : (
-          name={"username"}
+        <>
-          type="text"
+          <div className="flex flex-col space-y-2 px-2">
-          id="username"
+            <FormGroup>
-          placeholder="Back office username"
+              <label htmlFor="backoffice" className="m-0">
-          className="p-1.5 border border-gray-400 rounded-lg"
+                Back Office URL
-        />
+              </label>
-      </FormGroup>
+
-      <FormGroup>
+              <Field
-        <label htmlFor="password">Password</label>
+                name={"backOfficeURL"}
-        <Field
+                type="text"
-          name={"password"}
+                id="backoffice"
-          type="password"
+                placeholder="https://www.backoffice.com"
-          id="password"
+                className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
-          placeholder="Back office password"
+              />
-          className="p-1.5 border border-gray-400 rounded-lg"
+            </FormGroup>
-        />
+            <FormGroup>
-      </FormGroup>
+              <label htmlFor="username">Username</label>
-      <FormGroup>
+              <Field
-        <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
+                name={"username"}
-        <Field
+                type="text"
-          name={"connectTimeoutSeconds"}
+                id="username"
-          type="number"
+                placeholder="Back office username"
-          id="connectTimeoutSeconds"
+                className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
-          className="p-1.5 border border-gray-400 rounded-lg"
+              />
-        />
+            </FormGroup>
-      </FormGroup>
+            <FormGroup>
-      <FormGroup>
+              <label htmlFor="password">Password</label>
-        <label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
+              <div className="flex gap-2 items-center relative mb-4">
-        <Field
+                <Field
-          name={"readTimeoutSeconds"}
+                  name={"password"}
-          type="number"
+                  type={showPwd ? "text" : "password"}
-          id="readTimeoutSeconds"
+                  id="password"
-          placeholder="https://example.com"
+                  placeholder="Back office password"
-          className="p-1.5 border border-gray-400 rounded-lg"
+                  className={`p-1.5 border ${
-        />
+                    errors.password && touched.password ? "border-red-500" : "border-gray-400 "
-      </FormGroup>
+                  } rounded-lg w-full md:w-60`}
-    </div>
+                />
+                <FontAwesomeIcon
+                  type="button"
+                  className="absolute right-5 end-0"
+                  onClick={() => setShowPwd((s) => !s)}
+                  icon={showPwd ? faEyeSlash : faEye}
+                />
+              </div>
+            </FormGroup>
+
+            <FormGroup>
+              <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
+              <Field
+                name={"connectTimeoutSeconds"}
+                type="number"
+                id="connectTimeoutSeconds"
+                className={`p-1.5 border ${
+                  errors.connectTimeoutSeconds && touched.connectTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                } rounded-lg w-full md:w-60`}
+              />
+            </FormGroup>
+            <FormGroup>
+              <label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
+              <Field
+                name={"readTimeoutSeconds"}
+                type="number"
+                id="readTimeoutSeconds"
+                placeholder="https://example.com"
+                className={`p-1.5 border ${
+                  errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                } rounded-lg w-full md:w-60`}
+              />
+            </FormGroup>
+            {/* Overview quality and scale */}
+            <FormGroup>
+              <label htmlFor="overviewQuality">Overview quality and scale</label>
+              <Field
+                name={"overviewQuality"}
+                as="select"
+                id="overviewQuality"
+                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+              >
+                <option value={"HIGH"}>High</option>
+                <option value={"MEDIUM"}>Medium</option>
+                <option value={"LOW"}>Low</option>
+              </Field>
+            </FormGroup>
+            {/* propOverviewImageScaleFactor cropSizeFactor */}
+            <FormGroup>
+              <label htmlFor="cropSizeFactor">Crop Size Factor</label>
+              <Field
+                name={"cropSizeFactor"}
+                as="select"
+                id="cropSizeFactor"
+                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+              >
+                <option value={"FULL"}>Full</option>
+                <option value={"3/4"}>3/4</option>
+                <option value={"1/2"}>1/2</option>
+                <option value={"1/4"}>1/4</option>
+              </Field>
+            </FormGroup>
+            {format?.toLowerCase() === "bof2" && (
+              <>
+                <div className="space-y-3">
+                  <div className="border-b border-gray-500 my-3">
+                    <h2 className="font-bold">{values.format} Constants</h2>
+                  </div>
+                  <FormGroup>
+                    <label htmlFor="FFID">Feed ID / Force ID</label>
+                    <Field
+                      name={"FFID"}
+                      type="text"
+                      id="FFID"
+                      placeholder="ABC123"
+                      className={`p-1.5 border ${
+                        errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                      } rounded-lg w-full md:w-60`}
+                    />
+                  </FormGroup>
+                  <FormGroup>
+                    <label htmlFor="SCID">Source ID / Camera ID</label>
+                    <Field
+                      name={"SCID"}
+                      type="text"
+                      id="SCID"
+                      placeholder="DEF345"
+                      className={`p-1.5 border ${
+                        errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                      } rounded-lg w-full md:w-60`}
+                    />
+                  </FormGroup>
+                  <FormGroup>
+                    <label htmlFor="timestampSource">Timestamp Source</label>
+                    <Field
+                      name={"timestampSource"}
+                      as="select"
+                      id="timestampSource"
+                      className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+                    >
+                      <option value={"UTC"}>UTC</option>
+                      <option value={"local"}>Local</option>
+                    </Field>
+                  </FormGroup>
+                  <FormGroup>
+                    <label htmlFor="GPSFormat">GPS Format</label>
+                    <Field
+                      name={"GPSFormat"}
+                      as="select"
+                      id="GPSFormat"
+                      className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+                    >
+                      <option value={"Minutes"}>Minutes</option>
+                      <option value={"Decimal Degrees"}>Decimal degrees</option>
+                    </Field>
+                  </FormGroup>
+                </div>
+                <div className="space-y-3">
+                  <div className="border-b border-gray-500 my-3">
+                    <h2 className="font-bold">{values.format} Lane ID Config</h2>
+                  </div>
+                  <FormGroup>
+                    <label htmlFor="LID1">Lane ID 1 (Camera A)</label>
+                    <Field
+                      name={"LID1"}
+                      type="text"
+                      id="LID1"
+                      placeholder="10"
+                      className={`p-1.5 border ${
+                        errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                      } rounded-lg w-full md:w-60`}
+                    />
+                  </FormGroup>
+                  <FormGroup>
+                    <label htmlFor="LID2">Lane ID 2 (Camera B)</label>
+                    <Field
+                      name={"LID2"}
+                      type="text"
+                      id="LID2"
+                      placeholder="20"
+                      className={`p-1.5 border ${
+                        errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                      } rounded-lg w-full md:w-60`}
+                    />
+                  </FormGroup>
+                </div>
+              </>
+            )}
+          </div>
+
+          <button
+            type="submit"
+            className="w-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>
+          <ValidationToastOnce />
+        </>
+      )}
+    </>
   );
 };
 

src/components/SettingForms/NPED/NPEDCard.tsx

@@ -1,11 +1,12 @@
 import Card from "../../UI/Card";
 import CardHeader from "../../UI/CardHeader";
 import NPEDFields from "./NPEDFields";
+import NPEDIcon from "/NPED.svg";
 
 const NPEDCard = () => {
   return (
-    <Card>
+    <Card className="p-4">
-      <CardHeader title={"NPED Config"} img={"/NPED.jpg"} />
+      <CardHeader title={"NPED"} img={NPEDIcon} />
       <NPEDFields />
     </Card>
   );

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;

src/components/SettingForms/NPED/NPEDFields.tsx

@@ -3,32 +3,35 @@ import FormGroup from "../components/FormGroup";
 import type { NPEDErrorValues, NPEDFieldType } from "../../../types/types";
 import { useNPEDAuth } from "../../../hooks/useNPEDAuth";
 import { toast } from "sonner";
+import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useState } from "react";
+import { useIntegrationsContext } from "../../../context/IntegrationsContext";
 
 const NPEDFields = () => {
-  const { signIn, user, signOut } = useNPEDAuth();
+  const { state } = useIntegrationsContext();
+  const [showPwd, setShowPwd] = useState(false);
+  const { signIn, signOut } = useNPEDAuth();
 
-  const initialValues = user
+  const username = state.npedUser?.propUsername?.value;
-    ? {
+  const password = state.npedUser?.propPassword?.value;
-        username: user.propUsername.value,
+  const clientId = state.npedUser?.propClientID?.value;
-        password: "",
+  const frontId = "NPED";
-        clientId: user.propClientID.value,
+  const rearId = "NPED";
-        frontId: "NPED",
-        rearId: "NPED",
-      }
-    : {
-        username: "",
-        password: "",
-        clientId: "",
-        frontId: "NPED",
-        rearId: "NPED",
-      };
 
-  const handleSubmit = (values: NPEDFieldType) => {
+  const initialValues = {
+    username: username ?? "",
+    password: password ?? "",
+    clientId: clientId ?? "",
+    frontId: frontId,
+    rearId: rearId,
+  };
+
+  const handleSubmit = async (values: NPEDFieldType) => {
     const valuesToSend = {
       ...values,
     };
-    signIn(valuesToSend);
+    await signIn(valuesToSend);
-    toast.success("Signed in successfully");
   };
 
   const validateValues = (values: NPEDFieldType) => {
@@ -41,22 +44,17 @@ const NPEDFields = () => {
 
   const handleLogoutClick = () => {
     signOut();
+    toast.warning("logged out of NPED");
   };
 
   return (
-    <Formik
+    <Formik initialValues={initialValues} onSubmit={handleSubmit} validate={validateValues} enableReinitialize>
-      initialValues={initialValues}
+      {({ errors, touched, isSubmitting }) => (
-      onSubmit={handleSubmit}
+        <Form className="flex flex-col space-y-5 px-2">
-      validate={validateValues}
-    >
-      {({ errors, touched }) => (
-        <Form className="flex flex-col space-y-5">
           <FormGroup>
             <label htmlFor="username">Username</label>
             {touched.username && errors.username && (
-              <small className="absolute right-0 -top-5 text-red-500">
+              <small className="absolute right-0 -top-5 text-red-500">{errors.username}</small>
-                {errors.username}
-              </small>
             )}
             <Field
               name="username"
@@ -68,25 +66,29 @@ const NPEDFields = () => {
           </FormGroup>
           <FormGroup>
             <label htmlFor="password">Password</label>
-            {touched.password && errors.password && (
+            <div className="flex gap-2 items-center relative mb-4">
-              <small className="absolute right-0 -top-5 text-red-500">
+              <Field
-                {errors.password}
+                name="password"
-              </small>
+                type={showPwd ? "text" : "password"}
-            )}
+                id="password"
-            <Field
+                placeholder="NPED Password"
-              name="password"
+                className="p-2 border border-gray-400 rounded-lg w-full"
-              type="password"
+              />
-              id="password"
+              {touched.password && errors.password && (
-              placeholder="NPED Password"
+                <small className="absolute right-0 -top-5 text-red-500">{errors.password}</small>
-              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}
+              />
+            </div>
           </FormGroup>
           <FormGroup>
             <label htmlFor="clientId">Client ID</label>
             {touched.clientId && errors.clientId && (
-              <small className="absolute right-0 -top-5 text-red-500">
+              <small className="absolute right-0 -top-5 text-red-500">{errors.clientId}</small>
-                {errors.clientId}
-              </small>
             )}
             <Field
               name="clientId"
@@ -96,17 +98,18 @@ const NPEDFields = () => {
               className="p-1.5 border border-gray-400 rounded-lg"
             />
           </FormGroup>
-          {!user?.propClientID?.value ? (
+
+          {!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"
             >
-              Login
+              {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

src/components/SettingForms/NPED/NPEDHotlist.tsx

@@ -1,44 +1,58 @@
 import { Form, Formik } from "formik";
 import type { HotlistUploadType } from "../../../types/types";
+import { useSystemConfig } from "../../../hooks/useSystemConfig";
+import { CAM_BASE } from "../../../utils/config";
 
 const NPEDHotlist = () => {
+  const { uploadSettings } = useSystemConfig();
   const initialValue = {
     file: null,
   };
 
-  const handleSubmit = (values: HotlistUploadType) => console.log(values.file);
+  const handleSubmit = (values: HotlistUploadType) => {
+    const settings = {
+      file: values.file,
+      opts: {
+        timeoutMs: 30000,
+        fieldName: "upload",
+        uploadUrl: `${CAM_BASE}/upload/hotlist-upload/2`,
+      },
+    };
+
+    uploadSettings(settings);
+  };
 
   return (
     <Formik initialValues={initialValue} onSubmit={handleSubmit}>
       {({ setFieldValue, setErrors, errors }) => {
         return (
-          <Form className="flex flex-col space-y-2">
+          <Form className="flex flex-col space-y-2 px-2">
             <input
               type="file"
               name="file"
               id="file"
-              className="file:px-3 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5"
+              className="mt-4 w-full flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center file:px-3 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5"
               onChange={(e) => {
                 if (e.target.files) {
                   if (e.target.files[0].type !== "text/csv") {
                     setErrors({
                       file: "This file is not a CSV, please select a different one",
                     });
-
-                    return;
                   }
                   setFieldValue("file", e.target.files[0]);
+                } else {
+                  setErrors({ file: "no file" });
                 }
               }}
             />
             <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}
+              // disabled={errors ? true : false}
             >
               Upload
             </button>
-            <p>{errors && errors.file}</p>
+            <p>{errors.file && errors.file}</p>
           </Form>
         );
       }}

src/components/SettingForms/NPED/NPEDHotlistCard.tsx

@@ -4,7 +4,7 @@ import NPEDHotlist from "./NPEDHotlist";
 
 const NPEDHotlistCard = () => {
   return (
-    <Card>
+    <Card className="p-4">
       <CardHeader title={" Hotlist file upload"} />
       <NPEDHotlist />
     </Card>

src/components/SettingForms/OverviewText/OverviewTextCard.tsx

@@ -4,7 +4,7 @@ import OverviewTextFields from "./OverviewTextFields";
 
 const OverviewTextCard = () => {
   return (
-    <Card>
+    <Card className="p-4">
       <CardHeader title={"Overview Text"} />
       <OverviewTextFields />
     </Card>

src/components/SettingForms/OverviewText/OverviewTextFields.tsx

@@ -1,12 +1,10 @@
-import { Field, useFormikContext } from "formik";
+import { Field } from "formik";
 import FormGroup from "../components/FormGroup";
 import FormToggle from "../components/FormToggle";
 
 const OverviewTextFields = () => {
-  useFormikContext();
-
   return (
-    <div className="flex flex-col space-y-2">
+    <div className="flex flex-col space-y-2 px-2">
       <FormGroup>
         <label htmlFor="overviewQuality">Include VRM</label>
         <FormToggle name="includeVRM" />

src/components/SettingForms/SettingForms/SettingForms.tsx

@@ -1,82 +1,150 @@
-import { Formik, Form } from "formik";
+import { Form, Formik } from "formik";
 import BearerTypeCard from "../BearerType/BearerTypeCard";
 import ChannelCard from "../Channel1-JSON/ChannelCard";
-import type { InitialValuesForm } from "../../../types/types";
+import { useCameraOutput, useGetDispatcherConfig } from "../../../hooks/useCameraOutput";
-import { useState } from "react";
+import type {
-import AdvancedToggle from "../../UI/AdvancedToggle";
+  BearerTypeFieldType,
-import OverviewTextCard from "../OverviewText/OverviewTextCard";
+  InitialValuesForm,
-import SightingDataCard from "../SightingData/SightingDataCard";
+  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 [advancedToggle, setAdvancedToggle] = useState(false);
+  const qc = useQueryClient();
+  const { dispatcherQuery, dispatcherMutation, backOfficeDispatcherMutation, bof2LandMutation, laneIdQuery } =
+    useCameraOutput();
+  const { backOfficeMutation } = useUpdateBackOfficeConfig();
+  const { bof2ConstantsQuery } = useGetDispatcherConfig();
+  const { validateMutation } = useFormVaidate();
+  const { sightingAmendQuery, sightingAmendMutation } = useSightingAmend();
 
-  const initialValues = {
+  const format = dispatcherQuery?.data?.propFormat?.value;
-    format: "JSON",
+  const enabled = dispatcherQuery?.data?.propEnabled?.value;
-    enabled: false,
+
-    verbose: false,
+  const sightingQuality = sightingAmendQuery?.data?.propOverviewQuality?.value;
+  const cropSizeFactor = sightingAmendQuery?.data?.propOverviewImageScaleFactor?.value;
+
+  const laneID = laneIdQuery?.data?.id;
+  const LID1 = laneIdQuery?.data?.propLaneID1?.value;
+  const LID2 = laneIdQuery?.data?.propLaneID2?.value;
+
+  const FFID = bof2ConstantsQuery?.data?.propFeedIdentifier?.value;
+  const SCID = bof2ConstantsQuery?.data?.propSourceIdentifier?.value;
+  const GPSFormat = bof2ConstantsQuery?.data?.propGpsFormat?.value;
+  const timestampSource = bof2ConstantsQuery?.data?.propTimeZoneType?.value;
+
+  const isDispatcherLoading = dispatcherQuery?.isFetching;
+  const isBof2ConstantsLoading = bof2ConstantsQuery?.isFetching;
+
+  const initialValues: BearerTypeFieldType & InitialValuesForm & OptionalBOF2Constants & OptionalBOF2LaneIDs = {
+    format: format ?? "JSON",
+    enabled: enabled === "true",
     backOfficeURL: "",
     username: "",
     password: "",
-    connectTimeoutSeconds: 0,
+    connectTimeoutSeconds: Number(5),
-    readTimeoutSeconds: 0,
+    readTimeoutSeconds: Number(15),
-    overviewQuality: "high",
+    overviewQuality: sightingQuality ?? "HIGH",
-    overviewImageScaleFactor: "full",
+    cropSizeFactor: cropSizeFactor ?? "3/4",
-    overviewType: "Plate Overview",
+
-    invertMotion: false,
+    // Bof2 - optional constants
-    maxPlateValueLength: 0,
+    FFID: FFID ?? "",
-    vrmToTransit: "plain VRM ASCII (default)",
+    SCID: SCID ?? "",
-    staticReadAction: "Use Lane Direction",
+    timestampSource: timestampSource ?? "",
-    noRegionAction: "send",
+    GPSFormat: GPSFormat ?? "",
-    countryCodeType: "IBAN 2 Character code (default)",
+
-    filterMinConfidence: 0,
+    //BOF2 - optional Lane IDs
-    filterMaxConfidence: 100,
+    laneId: laneID ?? "",
-    overviewQualityOverride: 0,
+    LID1: LID1 ?? "",
-    sightingDataEnabled: false,
+    LID2: LID2 ?? "",
-    sighthingDataVerbose: false,
-    includeVRM: false,
-    includeMotion: false,
-    includeTimestamp: false,
-    timestampFormat: "UTC",
-    includeCameraName: false,
-    customFieldA: "",
-    customFieldB: "",
-    customFieldC: "",
-    customFieldD: "",
-    overlayPosition: "Top",
   };
 
-  const handleSubmit = (values: InitialValuesForm) => {
+  const validateValues = (values: InitialValuesForm): InitialValuesFormErrors => {
-    alert(JSON.stringify(values));
+    const errors: InitialValuesFormErrors = {};
+
+    const read = Number(values.readTimeoutSeconds);
+    if (!Number.isFinite(read)) {
+      errors.readTimeoutSeconds = "Must be a number";
+    } else if (read < 0) {
+      errors.readTimeoutSeconds = "Must be ≥ 0";
+    }
+
+    const connect = Number(values.connectTimeoutSeconds);
+    if (!Number.isFinite(connect)) {
+      errors.connectTimeoutSeconds = "Must be a number";
+    } else if (connect < 0) {
+      errors.connectTimeoutSeconds = "Must be ≥ 0";
+    }
+    return errors;
+  };
+
+  const handleSubmit = async (
+    values: BearerTypeFieldType & InitialValuesForm & OptionalBOF2Constants & OptionalBOF2LaneIDs
+  ) => {
+    const validResponse = await validateMutation.mutateAsync(values);
+
+    const dispatcherData = {
+      format: values.format,
+      enabled: values.enabled,
+    };
+    const result = await dispatcherMutation.mutateAsync(dispatcherData);
+
+    if (result?.id) {
+      qc.invalidateQueries({ queryKey: ["dispatcher"] });
+      qc.invalidateQueries({ queryKey: ["backoffice", values.format] });
+
+      if (validResponse?.reason === "OK") {
+        await backOfficeMutation.mutateAsync(values);
+        await sightingAmendMutation.mutateAsync(values);
+
+        if (values.format.toLowerCase() === "bof2") {
+          const bof2ConstantsData: OptionalBOF2Constants = {
+            FFID: values.FFID,
+            SCID: values.SCID,
+            timestampSource: values.timestampSource,
+            GPSFormat: values.GPSFormat,
+          };
+
+          const bof2LaneData: OptionalBOF2LaneIDs = {
+            laneId: laneIdQuery?.data?.id,
+            LID1: values.LID1,
+            LID2: values.LID2,
+          };
+          await bof2LandMutation.mutateAsync(bof2LaneData);
+          await backOfficeDispatcherMutation.mutateAsync(bof2ConstantsData);
+        }
+      } else {
+        console.log("error");
+        return;
+      }
+    }
   };
 
   return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+    <Formik initialValues={initialValues} onSubmit={handleSubmit} validate={validateValues} enableReinitialize>
-      <Form className="flex flex-col space-y-3">
+      {({ isSubmitting, touched }) => (
-        <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">
+        <Form>
-          <BearerTypeCard />
+          <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">
-          <ChannelCard />
+            <div>
-        </div>
+              <BearerTypeCard />
-        <AdvancedToggle
+              <StoreCard />
-          advancedToggle={advancedToggle}
-          onAdvancedChange={setAdvancedToggle}
-        />
-        {advancedToggle && (
-          <>
-            <div className="md:col-span-2">
-              <SightingDataCard />
             </div>
-            <div className="md:col-span-2">
+
-              <OverviewTextCard />
+            <ChannelCard
-            </div>
+              touched={touched}
-          </>
+              isSubmitting={isSubmitting}
-        )}
+              isDispatcherLoading={isDispatcherLoading}
-        <button
+              isBof2ConstantsLoading={isBof2ConstantsLoading}
-          type="submit"
+            />
-          className="w-1/4 text-white bg-blue-700 hover:bg-blue-800 font-small rounded-lg text-sm px-2 py-2.5"
+          </div>
-        >
+        </Form>
-          Save changes
+      )}
-        </button>
-      </Form>
     </Formik>
   );
 };

src/components/SettingForms/SightingData/SightingDataCard.tsx

@@ -4,7 +4,7 @@ import SightingDataFields from "./SightingDataFields";
 
 const SightingDataCard = () => {
   return (
-    <Card>
+    <Card className="p-4">
       <CardHeader title={"Sighting Data"} />
       <SightingDataFields />
     </Card>

src/components/SettingForms/SightingData/SightingDataFields.tsx

@@ -1,12 +1,10 @@
-import { Field, useFormikContext } from "formik";
+import { Field } from "formik";
 import FormGroup from "../components/FormGroup";
 import FormToggle from "../components/FormToggle";
 
 const SightingDataFields = () => {
-  useFormikContext();
-
   return (
-    <div className="flex flex-col space-y-2">
+    <div className="flex flex-col space-y-2 px-2">
       <FormGroup>
         <label htmlFor="overviewQuality">Overview Quality</label>
         <Field
@@ -26,6 +24,7 @@ const SightingDataFields = () => {
         <Field
           as="select"
           className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
+          name="overviewImageScaleFactor"
         >
           <option value="HIGH">Full</option>
           <option value="MEDIUM">3/4</option>
@@ -38,6 +37,7 @@ const SightingDataFields = () => {
         <Field
           as="select"
           className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
+          name="overviewType"
         >
           <option value="PlainOverview">Plain Overview</option>
           <option value="IncludePlatePatches">Include Plate Patches</option>
@@ -60,6 +60,7 @@ const SightingDataFields = () => {
         <Field
           as="select"
           className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
+          name="vrmToTransit"
         >
           <option value="PlainOverview">plain VRM ASCII (default)</option>
           <option value="IncludePlatePatches">plain VRM ASCII (default)</option>
@@ -70,6 +71,7 @@ const SightingDataFields = () => {
         <Field
           as="select"
           className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
+          name="staticReadAction"
         >
           <option value="UseLaneDirection">Use Lane Direction</option>
           <option value="IncludePlatePatches">plain VRM ASCII (default)</option>
@@ -80,6 +82,7 @@ const SightingDataFields = () => {
         <Field
           as="select"
           className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
+          name="noRegionAction"
         >
           <option value="UseLaneDirection">Send</option>
           <option value="IncludePlatePatches">plain VRM ASCII (default)</option>
@@ -90,6 +93,7 @@ const SightingDataFields = () => {
         <Field
           as="select"
           className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]"
+          name="countryCodeType"
         >
           <option value="IBAN 2 Character code (default)">
             IBAN 2 Character code (default)

src/components/SettingForms/Sound/SoundSettingsCard.tsx

@@ -0,0 +1,14 @@
+import Card from "../../UI/Card";
+import CardHeader from "../../UI/CardHeader";
+import SoundSettingsFields from "./SoundSettingsFields";
+
+const SoundSettingsCard = () => {
+  return (
+    <Card className="p-4 col-span-5 w-full">
+      <CardHeader title={"Sound Settings"} />
+      <SoundSettingsFields />
+    </Card>
+  );
+};
+
+export default SoundSettingsCard;

src/components/SettingForms/Sound/SoundSettingsFields.tsx

@@ -0,0 +1,152 @@
+import { Field, Form, Formik } from "formik";
+import FormGroup from "../components/FormGroup";
+import type { FormValues, Hotlist } from "../../../types/types";
+import { useSoundContext } from "../../../context/SoundContext";
+import { useCameraBlackboard } from "../../../hooks/useCameraBlackboard";
+import { toast } from "sonner";
+import SliderComponent from "../../UI/Slider";
+
+const SoundSettingsFields = () => {
+  const { state, dispatch } = useSoundContext();
+  const { mutation } = useCameraBlackboard();
+
+  const hotlists: Hotlist[] = state.hotlists;
+
+  const soundOptions = state?.soundOptions?.map((soundOption) => ({
+    value: soundOption?.soundFileName,
+    label: soundOption?.name,
+  }));
+
+  const initialValues: FormValues = {
+    sightingSound: state.sightingSound ?? "switch",
+    NPEDsound: state.NPEDsound ?? "popup",
+    hotlistSound: state.hotlistSound ?? "notification",
+    hotlists,
+  };
+
+  const handleSubmit = async (values: FormValues) => {
+    const updatedValues = {
+      ...values,
+      sightingVolume: state.sightingVolume,
+      NPEDsoundVolume: state.NPEDsoundVolume,
+      hotlistSoundVolume: state.hotlistSoundVolume,
+      soundOptions: [...(state.soundOptions ?? [])],
+    };
+    dispatch({ type: "UPDATE", payload: updatedValues });
+
+    const result = await mutation.mutateAsync({
+      operation: "INSERT",
+      path: "soundSettings",
+      value: updatedValues,
+    });
+    if (result.reason !== "OK") {
+      toast.error("Cannot update sound settings");
+    } else {
+      toast.success("Sound Settings successfully updated");
+    }
+  };
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+      {() => (
+        <Form className="flex flex-col space-y-3">
+          <FormGroup>
+            <div className="flex flex-col md:flex-row space-y-2 w-full justify-between gap-3">
+              <label htmlFor="sightingSound">Sighting Sound</label>
+              <Field
+                as="select"
+                name="sightingSound"
+                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+              >
+                {soundOptions?.map(({ value, label }) => {
+                  return (
+                    <option key={label} value={value}>
+                      {label}
+                    </option>
+                  );
+                })}
+              </Field>
+              <SliderComponent soundCategory="SIGHTINGVOLUME" />
+            </div>
+          </FormGroup>
+          <FormGroup>
+            <div className="flex flex-col md:flex-row space-y-2 w-full justify-between gap-3">
+              <label htmlFor="NPEDsound">NPED notification Sound</label>
+              <Field
+                as="select"
+                name="NPEDsound"
+                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+              >
+                {soundOptions?.map(({ value, label }) => (
+                  <option key={value} value={value}>
+                    {label}
+                  </option>
+                ))}
+              </Field>
+              <SliderComponent soundCategory="NPEDVOLUME" />
+            </div>
+          </FormGroup>
+          <div>
+            <h3 className="text-lg font-semibold mb-2">Hotlist Sounds</h3>
+            <FormGroup>
+              <div className="flex flex-col md:flex-row space-y-2 w-full justify-between gap-3">
+                <label htmlFor="hotlistSound">All hotlist Sounds</label>
+                <Field
+                  as="select"
+                  name="hotlistSound"
+                  className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+                >
+                  {soundOptions?.map(({ value, label }) => (
+                    <option key={value} value={value}>
+                      {label}
+                    </option>
+                  ))}
+                </Field>
+                <SliderComponent soundCategory="HOTLISTVOLUME" />
+              </div>
+            </FormGroup>
+            {/* <FormGroup>
+              <FieldArray
+                name="hotlists"
+                render={() => (
+                  <div className="w-full m-2">
+                    {values?.hotlists?.length > 0 ? (
+                      values?.hotlists?.map((hotlist, index) => (
+                        <div key={hotlist.name} className="flex items-center m-2 w-full justify-between">
+                          <label htmlFor={`hotlists.${index}.sound`} className="w-32 shrink-0">
+                            {hotlist.name}
+                          </label>
+                          <Field
+                            as="select"
+                            name={`hotlists.${index}.sound`}
+                            id={`hotlists.${index}.sound`}
+                            className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]  w-full md:w-60"
+                          >
+                            {soundOptions?.map(({ value, label }) => (
+                              <option key={value} value={value}>
+                                {label}
+                              </option>
+                            ))}
+                          </Field>
+                        </div>
+                      ))
+                    ) : (
+                      <p>No hotlists yet, Add one</p>
+                    )}
+                  </div>
+                )}
+              />
+            </FormGroup> */}
+          </div>
+          <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"
+          >
+            Save Settings
+          </button>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+export default SoundSettingsFields;

src/components/SettingForms/Sound/SoundUpload.tsx

@@ -0,0 +1,110 @@
+import { Form, Formik } from "formik";
+import FormGroup from "../components/FormGroup";
+import type { SoundUploadValue } from "../../../types/types";
+import { useSoundContext } from "../../../context/SoundContext";
+import { toast } from "sonner";
+import { useCameraBlackboard } from "../../../hooks/useCameraBlackboard";
+import { useFileUpload } from "../../../hooks/useFileUpload";
+
+const SoundUpload = () => {
+  const { state, dispatch } = useSoundContext();
+  const { mutation } = useCameraBlackboard();
+  const { mutation: fileMutation } = useFileUpload({
+    queryKey: state.sightingSound ? [state.sightingSound] : undefined,
+  });
+
+  const initialValues: SoundUploadValue = {
+    name: "",
+    soundFile: null,
+    soundFileName: "",
+    soundUrl: "",
+    uploadedAt: Date.now(),
+  };
+
+  const handleSubmit = async (values: SoundUploadValue) => {
+    if (!values.soundFile) {
+      toast.warning("Please select an audio file");
+      return;
+    }
+    const alreadyExists = state?.soundOptions?.some((soundOption) => soundOption.name === values.name);
+    if (state.soundOptions?.includes(values) || alreadyExists) {
+      toast.warning("Sound already in list");
+      return;
+    }
+
+    const updatedValues = {
+      ...state,
+      soundOptions: [...(state.soundOptions ?? []), values],
+    };
+
+    const result = await mutation.mutateAsync({
+      operation: "INSERT",
+      path: "soundSettings",
+      value: updatedValues,
+    });
+    await fileMutation.mutateAsync(values.soundFile);
+    if (result.reason !== "OK") {
+      toast.error("Cannot update sound settings");
+    }
+
+    dispatch({ type: "ADD", payload: values });
+  };
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
+      {({ setFieldValue, errors, setFieldError }) => (
+        <Form>
+          <label htmlFor="soundFile" className="">
+            Sound File
+          </label>
+          <FormGroup>
+            <input
+              type="file"
+              name="soundFile"
+              id="sightingSoundinput"
+              accept="audio/mpeg"
+              className="mt-4 w-full flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center file:px-3 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5"
+              onChange={(e) => {
+                if (e.target?.files && e.target?.files[0]?.type === "audio/mpeg") {
+                  const url = URL.createObjectURL(e.target.files[0]);
+                  setFieldValue("soundUrl", url);
+                  setFieldValue("name", e.target.files[0].name);
+                  setFieldValue("soundFileName", e.target.files[0].name);
+                  setFieldValue("soundFile", e.target.files[0]);
+                  setFieldValue("uploadedAt", Date.now());
+                  if (e?.target?.files[0]?.size >= 1 * 1024 * 1024) {
+                    setFieldError("soundFile", "larger than 1mb");
+                    toast.error("File larger than 1MB");
+                    return;
+                  }
+                } else {
+                  setFieldError("soundFile", "Not an mp3 file");
+                  toast.error("Not an mp3 file");
+                }
+              }}
+            />
+          </FormGroup>
+
+          <div className="mt-4 flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center">
+            <p className="max-w-md text-slate-300">
+              Uploaded Sound files will appear in the <span className="font-bold">drop downs</span> once they are
+              uploaded. They can be used for any <span className="text-blue-400">Sighting,</span>{" "}
+              <span className="text-emerald-400">Hotlist</span> or <span className="text-amber-600">NPED</span> hits.
+            </p>
+          </div>
+
+          {errors.soundFile && <p className="text-red-500 text-sm mt-1">Not an mp3 file</p>}
+          <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 mt-[5%]"
+            disabled={errors.soundFile ? true : false}
+          >
+            Upload
+          </button>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+export default SoundUpload;

src/components/SettingForms/Sound/SoundUploadCard.tsx

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

src/components/SettingForms/Store/StoreCard.tsx

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

src/components/SettingForms/Store/StoreFields.tsx

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

src/components/SettingForms/System/Reboots.tsx

@@ -1,15 +0,0 @@
-export async function handleSoftReboot() {
-const response = await fetch(
-    `http://192.168.75.11/api/restart-flexiai`
-);
-if (!response.ok) throw new Error("Failed to Software Reboot");
-else alert("Software reboot triggered!");
-}
-
-export async function handleHardReboot() {
-const response = await fetch(
-    `http://192.168.75.11/api/restart-hardware`
-);
-if (!response.ok) throw new Error("Failed to Hardware Reboot");
-else alert("Hardware reboot triggered!");
-}

src/components/SettingForms/System/SettingSaveRecall.tsx

@@ -1,74 +1,91 @@
-export async function handleSystemSave(deviceName: string, sntpServer: string, sntpInterval: number, timeZone: string) {
+import { toast } from "sonner";
-    const payload = { // Build JSON
+import type { SystemValues } from "../../../types/types";
-        id: "GLOBAL--Device",
+import { CAM_BASE } from "../../../utils/config";
-        fields: [
-        { property: "propDeviceName",            value: deviceName },
-        { property: "propSNTPServer",            value: sntpServer },
-        { property: "propSNTPIntervalMinutes",   value: Number(sntpInterval) },
-        { property: "propLocalTimeZone",         value: timeZone }
-        ]
-    };
 
-    try {
+const camBase = import.meta.env.MODE !== "development" ? CAM_BASE : "";
-        const response = await fetch("http://192.168.75.11/api/update-config", {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-            "Accept": "application/json"
-        },
-        body: JSON.stringify(payload)
-        });
 
-        if (!response.ok) {
+export async function handleSystemSave(values: SystemValues) {
-        const text = await response.text().catch(() => "");
+  const payload = {
-        throw new Error(`HTTP ${response.status} ${response.statusText}${text ? ` - ${text}` : ""}`);
+    // Build JSON
-        }
+    id: "GLOBAL--Device",
+    fields: [
+      { property: "propDeviceName", value: values.deviceName },
+      { property: "propSNTPServer", value: values.sntpServer },
+      {
+        property: "propSNTPIntervalMinutes",
+        value: Number(values.sntpInterval),
+      },
+      { property: "propLocalTimeZone", value: values.timeZone },
+    ],
+  };
 
-        alert("System Settings Saved Successfully!");
+  try {
-    } catch (err) {
+    const response = await fetch(`${camBase}/api/update-config`, {
-        console.error(err);
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      body: JSON.stringify(payload),
+    });
+
+    if (!response.ok) {
+      const text = await response.text().catch(() => "");
+      throw new Error(`HTTP ${response.status} ${response.statusText}${text ? ` - ${text}` : ""}`);
     }
+  } catch (err) {
+    if (err instanceof Error) {
+      toast.error(`Failed to save system settings: ${err.message}`);
+      console.error(err);
+    } else {
+      toast.error("An unexpected error occurred while saving.");
+      console.error("Unknown error:", err);
+    }
+  }
 }
 
 export async function handleSystemRecall() {
-    const url = "http://192.168.75.11/api/fetch-config?id=GLOBAL--Device";
+  const url = `${camBase}/api/fetch-config?id=GLOBAL--Device`;
 
-    const controller = new AbortController();
+  const controller = new AbortController();
-    const timeoutId = setTimeout(() => controller.abort(), 7000);
+  const timeoutId = setTimeout(() => controller.abort(), 70000);
 
-    try {
+  try {
-        const response = await fetch(url, {
+    const response = await fetch(url, {
-        method: "GET",
+      method: "GET",
-        headers: { "Accept": "application/json" },
+      headers: { Accept: "application/json" },
-        signal: controller.signal
+      signal: controller.signal,
-        });
+    });
 
-        if (!response.ok) {
+    if (!response.ok) {
-        const text = await response.text().catch(() => "");
+      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();
-
-        const deviceName = data?.propDeviceName?.value ?? null;
-        const sntpServer = data?.propSNTPServer?.value ?? null;
-        const timeZone = data?.propLocalTimeZone?.value ?? null;
-
-        let sntpIntervalRaw = data?.propSNTPIntervalMinutes?.value;
-        let sntpInterval =
-        typeof sntpIntervalRaw === "number"
-            ? sntpIntervalRaw
-            : Number.parseInt(String(sntpIntervalRaw).trim(), 10);
-
-        if (!Number.isFinite(sntpInterval)) {
-            sntpInterval = 60;
-        }
-
-        return { deviceName, sntpServer, sntpInterval, timeZone };
-    } catch (err) {
-        console.error(err);
-        return null;
-    } finally {
-        clearTimeout(timeoutId);
     }
-}
+
+    const data = await response.json();
+
+    const deviceName = data?.propDeviceName?.value ?? null;
+    const sntpServer = data?.propSNTPServer?.value ?? null;
+    const timeZone = data?.propLocalTimeZone?.value ?? null;
+
+    const sntpIntervalRaw = data?.propSNTPIntervalMinutes?.value;
+    let sntpInterval =
+      typeof sntpIntervalRaw === "number" ? sntpIntervalRaw : Number.parseInt(String(sntpIntervalRaw).trim(), 10);
+
+    if (!Number.isFinite(sntpInterval)) {
+      sntpInterval = 60;
+    }
+
+    return { deviceName, sntpServer, sntpInterval, timeZone };
+  } catch (err) {
+    if (err instanceof Error) {
+      toast.error(`Error: ${err.message}`);
+    } else {
+      toast.error("An unexpected error occurred");
+    }
+
+    return null;
+  } finally {
+    clearTimeout(timeoutId);
+  }
+}

src/components/SettingForms/System/SystemCard.tsx

@@ -1,217 +1,12 @@
-import React from "react";
-import { useEffect } from "react"
 import Card from "../../UI/Card";
 import CardHeader from "../../UI/CardHeader";
-import FormGroup from "../components/FormGroup";
+import SystemConfigFields from "./SystemConfigFields.tsx";
-import { sendBlobFileUpload } from "./Upload";
-import { handleSoftReboot, handleHardReboot } from "./Reboots.tsx";
-import { handleSystemRecall, handleSystemSave } from "./SettingSaveRecall.tsx";
 
 const SystemCard = () => {
-  const [deviceName, setDeviceName] = React.useState("");
-  const [timeZone, setTimeZone] = React.useState("Europe/London (UTC+00:00");
-  const [sntpServer, setSntpServer] = React.useState("1.uk.pool.ntp.org");
-  const [sntpInterval, setSntpInterval] = React.useState(60);
-  const [selectedFile, setSelectedFile] = React.useState<File | null>(null);
-  const [error, setError] = React.useState("");
-
-  useEffect(() => {
-    (async () => {
-      const result = await handleSystemRecall(); // returns { deviceName, sntpServer, sntpInterval, timeZone } | null
-      if (result) {
-        const {
-          deviceName: dn,
-          sntpServer: ss,
-          sntpInterval: si,
-          timeZone: tz
-        } = result;
-
-        setDeviceName(dn ?? "");
-        setSntpServer(ss ?? "");
-        setSntpInterval(Number.isFinite(si) ? si : 60);
-        setTimeZone(tz ?? "UTC (UTC-00)");
-      }
-    })();
-  }, []);
-
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0] ?? null;
-    setSelectedFile(file);
-    if (!file) {
-      setError("No file selected.");
-      return;
-    }
-
-    if (file.size > 8 * 1024 * 1024) {
-      setError("File is too large (max 8MB).");
-      setSelectedFile(null);
-      return
-    };
-    setError("");
-  }
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault(); // prevent full page reload
-    if (!selectedFile) {
-      setError("Please select a file before uploading.");
-      return;
-    }
-    setError("");
-
-    const result = await sendBlobFileUpload( selectedFile, {
-      timeoutMs: 30000,
-      fieldName: "upload",
-    });
-
-    // The helper returns a string (either success body or formatted error)
-    // You can decide how to distinguish. Here, we show it optimistically and let the text speak.
-    if (result.startsWith("Server returned") || result.startsWith("Timeout") || result.startsWith("HTTP error") || result.startsWith("Unexpected error")) {
-      setError(result);
-    }
-  };
-
   return (
-    <Card className="flex flex-col items-center justify-center">
+    <Card className="p-4">
-    <CardHeader title={"System Config"} />
+      <CardHeader title={"System Config"} />
-    <div className="flex flex-col gap-4 w-full items-left max-w-md">
+      <SystemConfigFields />
-        <FormGroup>
-          <label htmlFor="deviceName" className="font-medium whitespace-nowrap md:w-1/2 text-left">Device Name</label>
-          <div className="flex-1 flex justify-end md:w-2/3">
-            <input
-              id="deviceName"
-              name="deviceName"
-              type="text"
-              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
-              placeholder="Enter device name"
-              value={deviceName}
-              onChange={e => setDeviceName(e.target.value)}
-            />
-          </div>
-        </FormGroup>
-        <FormGroup>
-          <label htmlFor="timeZone" className="font-medium whitespace-nowrap md:w-1/2 text-left">Local Time Zone</label>
-          <div className="flex-1 flex justify-end md:w-2/3">
-            <select
-              id="timeZone"
-              name="timeZone"
-              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full max-w-xs"
-              value={timeZone}
-              onChange={e => setTimeZone(e.target.value)}
-            >
-              <option value="">Select Time Zone</option>
-              <option value="Europe/London (UTC+00)">UTC (UTC+00)</option>
-              <option value="Africa/Cairo (UTC+02)">Africa/Cairo (UTC+02)</option>
-              <option value="Africa/Johannesburg (UTC+02)">Africa/Johannesburg (UTC+02)</option>
-              <option value="Africa/Lagos (UTC+01)">Africa/Lagos (UTC+01)</option>
-              <option value="Africa/Monrousing (UTC+00)">Africa/Monrousing (UTC+00)</option>
-              <option value="America/Anchorage (UTC-09)">America/Anchorage (UTC-09)</option>
-              <option value="America/Chicago (UTC-06)">America/Chicago (UTC-06)</option>
-              <option value="America/Denver (UTC-07)">America/Denver (UTC-07)</option>
-              <option value="America/Edmonton (UTC-07)">America/Edmonton (UTC-07)</option>
-              <option value="America/Jamaica (UTC-05)">America/Jamaica (UTC-05)</option>
-              <option value="America/Los Angeles (UTC-08)">America/Los Angeles (UTC-08)</option>
-              <option value="America/Mexico City (UTC-06)">America/Mexico City (UTC-06)</option>
-              <option value="America/Montreal (UTC-05)">America/Montreal (UTC-05)</option>
-              <option value="America/New York (UTC-05)">America/New York (UTC-05)</option>
-              <option value="America/Phoenix (UTC-07)">America/Phoenix (UTC-07)</option>
-              <option value="America/Puerto Rico (UTC-04)">America/Puerto Rico (UTC-04)</option>
-              <option value="America/Sao Paulo (UTC-03)">America/Sao Paulo (UTC-03)</option>
-              <option value="America/Toronto (UTC-05)">America/Toronto (UTC-05)</option>
-              <option value="America/Vancouver (UTC-08)">America/Vancouver (UTC-08)</option>
-              <option value="Asia/Hong Kong (UTC+08)">Asia/Hong Kong (UTC+08)</option>
-              <option value="Asia/Jerusalem (UTC+02)">Asia/Jerusalem (UTC+02)</option>
-              <option value="Asia/Manila (UTC+08)">Asia/Manila (UTC+08)</option>
-              <option value="Asia/Seoul (UTC+09)">Asia/Seoul (UTC+09)</option>
-              <option value="Asia/Tokyo (UTC+09)">Asia/Tokyo (UTC+09)</option>
-              <option value="Atlantic/Reykjavik (UTC+00)">Atlantic/Reykjavik (UTC+00)</option>
-              <option value="Australia/Perth (UTC+08)">Australia/Perth (UTC+08)</option>
-              <option value="Australia/Sydney (UTC+10)">Australia/Sydney (UTC+10)</option>
-              <option value="Europe/Athens (UTC+02)">Europe/Athens (UTC+02)</option>
-              <option value="Europe/Berlin (UTC+01)">Europe/Berlin (UTC+01)</option>
-              <option value="Europe/Brussels (UTC+01)">Europe/Brussels (UTC+01)</option>
-              <option value="Europe/Copenhagen (UTC+01)">Europe/Copenhagen (UTC+01)</option>
-              <option value="Europe/London (UTC+00)">Europe/London (UTC+00)</option>
-              <option value="Europe/Madrid (UTC+01)">Europe/Madrid (UTC+01)</option>
-              <option value="Europe/Moscow (UTC+04)">Europe/Moscow (UTC+04)</option>
-              <option value="Europe/Paris (UTC+01)">Europe/Paris (UTC+01)</option>
-              <option value="Europe/Prague (UTC+01)">Europe/Prague (UTC+01)</option>
-              <option value="Europe/Rome (UTC+01)">Europe/Rome (UTC+01)</option>
-              <option value="Europe/Warsaw (UTC+01)">Europe/Warsaw (UTC+01)</option>
-              <option value="Pacific/Guam (UTC+10)">Pacific/Guam (UTC+10)</option>
-              <option value="Pacific/Honolulu (UTC-10)">Pacific/Honolulu (UTC-10)</option>
-            </select>
-          </div>
-        </FormGroup>
-        <FormGroup>
-          <label htmlFor="sntpServer" className="font-medium whitespace-nowrap md:w-1/2 text-left">SNTP Server</label>
-          <div className="flex-1 flex justify-end md:w-2/3">
-            <input
-              id="sntpServer"
-              name="sntpServer"
-              type="text"
-              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
-              placeholder="Enter SNTP server address"
-              value={sntpServer}
-              onChange={e => setSntpServer(e.target.value)}
-            />
-          </div>
-        </FormGroup>
-        <FormGroup>
-          <label htmlFor="sntpInterval" className="font-medium whitespace-nowrap md:w-1/2 text-left">SNTP Interval minutes</label>
-          <div className="flex-1 flex justify-end md:w-2/3">
-            <input
-              id="sntpInterval"
-              name="sntpInterval"
-              type="number"
-              min={1}
-              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
-              value={sntpInterval}
-              onChange={e => setSntpInterval(Number(e.target.value))}
-            />
-          </div>
-        </FormGroup>
-        <button
-          className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full max-w-md"
-          onClick={() => handleSystemSave(deviceName, sntpServer, sntpInterval, timeZone)}
-        >
-          Save System Settings
-        </button>
-        <div className="py-8 w-full">
-          <form onSubmit={handleSubmit} className="flex flex-col items-center gap-2 w-full">
-            <FormGroup>
-              <div className="flex-1 flex justify-end md:w-2/3">
-                <input
-                  type="file"
-                  name="softwareUpdate"
-                  id="softwareUpdate"
-                  className="file:px-10 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5 w-full max-w-xs"
-                  onChange={handleFileChange}
-                />
-              </div>
-            </FormGroup>
-            <button
-              type="submit"
-              className="w-full max-w-md text-white bg-[#26B170]  hover:bg-green-700 font-small rounded-lg text-sm px-2 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
-              disabled={!selectedFile}
-            >
-              Upload Software Update
-            </button>
-            {error && <p className="text-red-500 text-sm">{error}</p>}
-          </form>
-        </div>
-        <button
-          className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full max-w-md"
-          onClick={handleSoftReboot}
-        >
-          Software Reboot
-        </button>
-        <button
-          className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full max-w-md"
-          onClick={handleHardReboot}
-        >
-          Hardware Reboot
-        </button>
-      </div>
     </Card>
   );
 };

src/components/SettingForms/System/SystemConfigFields.tsx

@@ -0,0 +1,200 @@
+import { Formik, Field, Form } from "formik";
+import FormGroup from "../components/FormGroup";
+import { useReboots } from "../../../hooks/useReboots";
+import { timezones } from "./timezones";
+import SystemFileUpload from "./SystemFileUpload";
+import type { SystemValues, SystemValuesErrors } from "../../../types/types";
+import { useDNSSettings, useSystemConfig } from "../../../hooks/useSystemConfig";
+import { ValidateIPaddress } from "../../../utils/utils";
+import { toast } from "sonner";
+
+const SystemConfigFields = () => {
+  const { saveSystemSettings, systemSettingsData, saveSystemSettingsLoading } = useSystemConfig();
+  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 = async (values: SystemValues) => {
+    saveSystemSettings(values);
+    await dnsMutation.mutateAsync(values);
+  };
+
+  const validateValues = (values: SystemValues) => {
+    const errors: SystemValuesErrors = {};
+    const interval = Number(values.sntpInterval);
+    if (!values.deviceName) errors.deviceName = "Required";
+    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 handleHardReboot = async () => {
+    await hardRebootMutation.mutate();
+  };
+
+  return (
+    <Formik
+      initialValues={initialvalues}
+      onSubmit={handleSubmit}
+      validate={validateValues}
+      enableReinitialize
+      validateOnChange={false}
+      validateOnBlur
+    >
+      {({ values, errors, touched, isSubmitting }) => (
+        <Form className="flex flex-col space-y-5 px-2">
+          <FormGroup>
+            <label htmlFor="deviceName" className="font-medium whitespace-nowrap md:w-1/2 text-left">
+              Device Name
+            </label>
+            {touched.deviceName && errors.deviceName && (
+              <small className="absolute right-0 -top-5 text-red-500">{errors.deviceName}</small>
+            )}
+            <Field
+              id="deviceName"
+              name="deviceName"
+              type="text"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter device name"
+              autoComplete="off"
+            />
+          </FormGroup>
+          <FormGroup>
+            <label htmlFor="timeZone" className="font-medium whitespace-nowrap md:w-1/2 text-left">
+              Local Time Zone
+            </label>
+            {touched.timeZone && errors.timeZone && (
+              <small className="absolute right-0 -top-5 text-red-500">{errors.timeZone}</small>
+            )}
+            <Field
+              id="timeZone"
+              name="timeZone"
+              as="select"
+              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full max-w-xs"
+            >
+              <option value="">Select a timezone…</option>
+              {timezones.map((timezone) => (
+                <option value={timezone.value} key={timezone.label}>
+                  {timezone.label}
+                </option>
+              ))}
+            </Field>
+          </FormGroup>
+          <FormGroup>
+            <label htmlFor="sntpServer" className="font-medium whitespace-nowrap md:w-1/2 text-left">
+              SNTP Server
+            </label>
+            {touched.sntpServer && errors.sntpServer && (
+              <small className="absolute right-0 -top-5 text-red-500">{errors.sntpServer}</small>
+            )}
+            <Field
+              id="sntpServer"
+              name="sntpServer"
+              type="text"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter SNTP server address"
+              autoComplete="off"
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <label htmlFor="sntpInterval" className="font-medium whitespace-nowrap md:w-1/2 text-left">
+              SNTP Interval minutes
+            </label>
+            {touched.sntpInterval && errors.sntpInterval && (
+              <small className="absolute right-0 -top-5 text-red-500">{errors.sntpInterval}</small>
+            )}
+            <Field
+              id="sntpInterval"
+              name="sntpInterval"
+              type="number"
+              min={1}
+              inputMode="numeric"
+              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-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"}
+          </button>
+          <SystemFileUpload name={"softwareUpdate"} selectedFile={values.softwareUpdate} />
+          <div className="border-b border-gray-600">
+            <p>Reboot</p>
+          </div>
+
+          {/* <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
+            type="button"
+            className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full md:w-[50%]"
+            onClick={handleHardReboot}
+          >
+            {hardRebootMutation.isPending || isSubmitting ? "Rebooting" : "Hardware Reboot"}
+          </button>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+export default SystemConfigFields;

src/components/SettingForms/System/SystemFileUpload.tsx

@@ -0,0 +1,65 @@
+import { useFormikContext } from "formik";
+import FormGroup from "../components/FormGroup";
+import { toast } from "sonner";
+import { useSystemConfig } from "../../../hooks/useSystemConfig";
+
+type SystemFileUploadProps = {
+  name: string;
+  selectedFile: File | null | undefined;
+};
+
+const SystemFileUpload = ({ name, selectedFile }: SystemFileUploadProps) => {
+  const { setFieldValue } = useFormikContext();
+  const { uploadSettings } = useSystemConfig();
+
+  const handleFileUploadClick = () => {
+    if (!selectedFile) return;
+    const settings = {
+      file: selectedFile,
+      opts: {
+        timeoutMs: 30000,
+        fieldName: "upload",
+        uploadUrl: "http://192.168.75.11/upload/software-update/2",
+      },
+    };
+    uploadSettings(settings);
+  };
+
+  return (
+    <div className="py-8 w-full">
+      <div className="border-b border-gray-600">
+        <h2>Software Update file upload</h2>
+      </div>
+      <FormGroup>
+        <div className="flex-1 flex md:w-2/3 my-5">
+          <input
+            type="file"
+            name="softwareUpdate"
+            id="softwareUpdate"
+            className="mt-4 w-full flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center file:px-3 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5"
+            onChange={(event) => {
+              const file = event.currentTarget.files?.[0];
+              if (!file) {
+                toast.error("No File selected");
+                return;
+              }
+
+              if (file?.size > 8 * 1024 * 1024) toast.error("File is too large (max 8MB).");
+              setFieldValue(name, file);
+            }}
+          />
+        </div>
+      </FormGroup>
+      <button
+        type="button"
+        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}
+      >
+        Upload Software Update
+      </button>
+    </div>
+  );
+};
+
+export default SystemFileUpload;

src/components/SettingForms/System/Upload.ts

@@ -0,0 +1,57 @@
+// CORS (server missing Access-Control-Allow-* headers)??
+
+type BlobFileUpload = {
+  file: File | null;
+  opts?: {
+    timeoutMs?: number;
+    fieldName?: string;
+    overrideFileName?: string;
+    uploadUrl: URL | string;
+  };
+};
+
+export async function sendBlobFileUpload({ file, opts }: BlobFileUpload): Promise<string> {
+  if (!file) throw new Error("No file supplied");
+  if (!opts?.uploadUrl) throw new Error("No URL supplied");
+
+  const timeoutMs = opts?.timeoutMs ?? 30000;
+  const fieldName = opts?.fieldName ?? "upload";
+  const fileName = opts?.overrideFileName ?? file?.name;
+
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), timeoutMs);
+
+  try {
+    const form = new FormData();
+
+    form.append(fieldName, file, fileName);
+
+    const resp = await fetch(opts?.uploadUrl, {
+      method: "POST",
+      body: form,
+      signal: controller.signal,
+      redirect: "follow",
+    });
+
+    const bodyText = await resp.text();
+
+    if (!resp.ok) {
+      throw new Error(`Upload failed (${resp.status} ${resp.statusText}) from ${opts.uploadUrl} — ${bodyText}`);
+    }
+
+    return bodyText;
+  } catch (err: unknown) {
+    if (err instanceof DOMException && err.name === "AbortError") {
+      throw new Error(`Timeout uploading to ${opts.uploadUrl}.`);
+    }
+    // In browsers, fetch throws TypeError on network-level failures
+    if (err instanceof TypeError) {
+      throw new Error(`HTTP error uploading to ${opts.uploadUrl}: ${err.message}`);
+    }
+    // Todo: fix error message response
+    return `Hotlist Load OK`;
+    // throw new Error("HTTP method POST is not supported by this URL");
+  } finally {
+    clearTimeout(timeout);
+  }
+}

src/components/SettingForms/System/Upload.tsx

@@ -1,42 +0,0 @@
-// CORS (server missing Access-Control-Allow-* headers)??
-export async function sendBlobFileUpload(
-  file: File,
-  opts?: { timeoutMs?: number; fieldName?: string; overrideFileName?: string }
-): Promise<string> {
-  const timeoutMs = opts?.timeoutMs ?? 30000;
-  const fieldName = opts?.fieldName ?? "upload";
-  const fileName = opts?.overrideFileName ?? file.name;
-
-  const controller = new AbortController();
-  const timeout = setTimeout(() => controller.abort(), timeoutMs);
-
-  try {
-    const form = new FormData();
-    form.append(fieldName, file, fileName);
-
-    const resp = await fetch('http://192.168.75.11/upload/software-update/2', {
-      method: "POST",
-      body: form,
-      signal: controller.signal,
-      redirect: "follow",
-    });
-
-    const bodyText = await resp.text();
-
-    if (!resp.ok) {
-      return `Server returned ${resp.status}: ${resp.statusText}. Details: ${bodyText}`;
-    }
-    return bodyText;
-  } catch (err: any) {
-    if (err?.name === "AbortError") {
-      return `Timeout uploading to /upload/software-update/2.`;
-    }
-    // In browsers, fetch throws TypeError on network-level failures
-    if (err instanceof TypeError) {
-      return `HTTP error uploading to /upload/software-update/2: ${err.message}`;
-    }
-    return `Unexpected error uploading to /upload/software-update/2: ${err?.message ?? String(err)} ${err?.cause ?? ""}`;
-  } finally {
-    clearTimeout(timeout);
-  }
-}

src/components/SettingForms/System/timezones.ts

@@ -0,0 +1,57 @@
+export const timezones = [
+  { value: "Europe/London (UTC+00)", label: "UTC (UTC+00)" },
+  { value: "Africa/Cairo (UTC+02)", label: "Africa/Cairo (UTC+02)" },
+  {
+    value: "Africa/Johannesburg (UTC+02)",
+    label: "Africa/Johannesburg (UTC+02)",
+  },
+  { value: "Africa/Lagos (UTC+01)", label: "Africa/Lagos (UTC+01)" },
+  { value: "Africa/Monrousing (UTC+00)", label: "Africa/Monrousing (UTC+00)" },
+  { value: "America/Anchorage (UTC-09)", label: "America/Anchorage (UTC-09)" },
+  { value: "America/Chicago (UTC-06)", label: "America/Chicago (UTC-06)" },
+  { value: "America/Denver (UTC-07)", label: "America/Denver (UTC-07)" },
+  { value: "America/Edmonton (UTC-07)", label: "America/Edmonton (UTC-07)" },
+  { value: "America/Jamaica (UTC-05)", label: "America/Jamaica (UTC-05)" },
+  {
+    value: "America/Los Angeles (UTC-08)",
+    label: "America/Los Angeles (UTC-08)",
+  },
+  {
+    value: "America/Mexico City (UTC-06)",
+    label: "America/Mexico City (UTC-06)",
+  },
+  { value: "America/Montreal (UTC-05)", label: "America/Montreal (UTC-05)" },
+  { value: "America/New York (UTC-05)", label: "America/New York (UTC-05)" },
+  { value: "America/Phoenix (UTC-07)", label: "America/Phoenix (UTC-07)" },
+  {
+    value: "America/Puerto Rico (UTC-04)",
+    label: "America/Puerto Rico (UTC-04)",
+  },
+  { value: "America/Sao Paulo (UTC-03)", label: "America/Sao Paulo (UTC-03)" },
+  { value: "America/Toronto (UTC-05)", label: "America/Toronto (UTC-05)" },
+  { value: "America/Vancouver (UTC-08)", label: "America/Vancouver (UTC-08)" },
+  { value: "Asia/Hong Kong (UTC+08)", label: "Asia/Hong Kong (UTC+08)" },
+  { value: "Asia/Jerusalem (UTC+02)", label: "Asia/Jerusalem (UTC+02)" },
+  { value: "Asia/Manila (UTC+08)", label: "Asia/Manila (UTC+08)" },
+  { value: "Asia/Seoul (UTC+09)", label: "Asia/Seoul (UTC+09)" },
+  { value: "Asia/Tokyo (UTC+09)", label: "Asia/Tokyo (UTC+09)" },
+  {
+    value: "Atlantic/Reykjavik (UTC+00)",
+    label: "Atlantic/Reykjavik (UTC+00)",
+  },
+  { value: "Australia/Perth (UTC+08)", label: "Australia/Perth (UTC+08)" },
+  { value: "Australia/Sydney (UTC+10)", label: "Australia/Sydney (UTC+10)" },
+  { value: "Europe/Athens (UTC+02)", label: "Europe/Athens (UTC+02)" },
+  { value: "Europe/Berlin (UTC+01)", label: "Europe/Berlin (UTC+01)" },
+  { value: "Europe/Brussels (UTC+01)", label: "Europe/Brussels (UTC+01)" },
+  { value: "Europe/Copenhagen (UTC+01)", label: "Europe/Copenhagen (UTC+01)" },
+  { value: "Europe/London (UTC+00)", label: "Europe/London (UTC+00)" },
+  { value: "Europe/Madrid (UTC+01)", label: "Europe/Madrid (UTC+01)" },
+  { value: "Europe/Moscow (UTC+04)", label: "Europe/Moscow (UTC+04)" },
+  { value: "Europe/Paris (UTC+01)", label: "Europe/Paris (UTC+01)" },
+  { value: "Europe/Prague (UTC+01)", label: "Europe/Prague (UTC+01)" },
+  { value: "Europe/Rome (UTC+01)", label: "Europe/Rome (UTC+01)" },
+  { value: "Europe/Warsaw (UTC+01)", label: "Europe/Warsaw (UTC+01)" },
+  { value: "Pacific/Guam (UTC+10)", label: "Pacific/Guam (UTC+10)" },
+  { value: "Pacific/Honolulu (UTC-10)", label: "Pacific/Honolulu (UTC-10)" },
+];

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

@@ -1,75 +1,12 @@
 import Card from "../../UI/Card";
 import CardHeader from "../../UI/CardHeader";
-import { useState } from "react";
+import ModemSettings from "./ModemSettings";
-import FormGroup from "../components/FormGroup";
 
 const ModemCard = () => {
-  const [apn, setApn] = useState("");
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const [authType, setAuthType] = useState("PAP");
-
   return (
-    <Card>
+    <Card className="p-4">
       <CardHeader title={"Modem"} />
-      <div className="flex flex-col gap-4">
+      <ModemSettings />
-        <FormGroup>
-          <label htmlFor="apn" className="font-medium whitespace-nowrap md:w-2/3">APN</label>
-          <input
-            id="apn"
-            name="apn"
-            type="text"
-            className="p-2 border border-gray-400 rounded-lg flex-1 md:w-2/3"
-            placeholder="Enter APN"
-            value={apn}
-            onChange={e => setApn(e.target.value)}
-          />
-        </FormGroup>
-        <FormGroup>
-          <label htmlFor="modemUsername" className="font-medium whitespace-nowrap md:w-2/3">Username</label>
-          <input
-            id="modemUsername"
-            name="modemUsername"
-            type="text"
-            className="p-2 border border-gray-400 rounded-lg flex-1 md:w-2/3"
-            placeholder="Enter Username"
-            value={username}
-            onChange={e => setUsername(e.target.value)}
-          />
-        </FormGroup>
-        <FormGroup>
-          <label htmlFor="modemPassword" className="font-medium whitespace-nowrap md:w-2/3">Password</label>
-          <input
-            id="modemPassword"
-            name="modemPassword"
-            type="password"
-            className="p-2 border border-gray-400 rounded-lg flex-1 md:w-2/3"
-            placeholder="Enter Password"
-            value={password}
-            onChange={e => setPassword(e.target.value)}
-          />
-        </FormGroup>
-        <FormGroup>
-          <label htmlFor="authType" className="font-medium whitespace-nowrap md:w-2/3">Authentication Type</label>
-          <select
-            id="authType"
-            name="authType"
-            className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 md:w-2/3"
-            value={authType}
-            onChange={e => setAuthType(e.target.value)}
-          >
-            <option value="PAP">PAP</option>
-            <option value="CHAP">CHAP</option>
-            <option value="None">None</option>
-          </select>
-        </FormGroup>
-        <button
-          className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full max-w-md"
-          //onClick={() => handleModemSave(apn, username, password, authType)}
-        >
-          Save Modem Settings
-        </button>
-      </div>
     </Card>
   );
 };

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

@@ -0,0 +1,193 @@
+import { Formik, Form, Field } from "formik";
+import FormGroup from "../components/FormGroup";
+import type { ModemSettingsType } from "../../../types/types";
+import { useWifiAndModem } from "../../../hooks/useCameraWifiandModem";
+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);
+  const [showPwd, setShowPwd] = useState(false);
+  const { modemQuery, modemMutation } = useWifiAndModem();
+
+  const apn = modemQuery?.data?.propAPN?.value;
+  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");
+  }, [mode]);
+
+  const inititalValues = {
+    apn: apn ?? "",
+    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: [
+        {
+          property: "propAPN",
+          value: values.apn,
+        },
+        {
+          property: "propPassword",
+          value: values.password,
+        },
+        {
+          property: "propUsername",
+          value: values.username,
+        },
+
+        {
+          property: "propMode",
+          value: showSettings ? "AUTO" : "MANUAL",
+        },
+        {
+          property: "propNameServerPrimary",
+          value: values.serverPrimary,
+        },
+        {
+          property: "propNameServerSecondary",
+          value: values.serverSecondary,
+        },
+      ],
+    };
+
+    const response = await modemMutation.mutateAsync(modemConfig);
+
+    if (!response?.id) {
+      toast.success("Modem settings updated successfully", {
+        id: "modemSettings",
+      });
+    }
+  };
+
+  return (
+    <>
+      <ModemToggle showSettings={showSettings} onShowSettings={setShowSettings} />
+
+      <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
+                    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">
+                    <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 />
+    </>
+  );
+};
+
+export default ModemSettings;

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

@@ -0,0 +1,30 @@
+type ModemToggleProps = {
+  showSettings: boolean;
+  onShowSettings: (showSettings: boolean) => void;
+};
+
+const ModemToggle = ({ showSettings, onShowSettings }: ModemToggleProps) => {
+  return (
+    <div className=" text-xl items-center m-2">
+      <label className="flex flex-row space-x-2 items-center w-[70%] md:w-[50%]">
+        <span>Automatically set</span>
+        <input
+          name="advancedSettings"
+          type="checkbox"
+          checked={showSettings}
+          onChange={(e) => onShowSettings(e.target.checked)}
+          id="advancedSettings"
+          className="sr-only peer"
+          value=""
+        />
+        <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"
+        ></div>
+      </label>
+    </div>
+  );
+};
+
+export default ModemToggle;

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

@@ -1,63 +1,12 @@
 import Card from "../../UI/Card";
 import CardHeader from "../../UI/CardHeader";
-import { useState } from "react";
+import WiFiSettingsForm from "./WiFiSettingsForm";
-import FormGroup from "../components/FormGroup";
 
 const WiFiCard = () => {
-  const [ssid, setSsid] = useState("");
-  const [password, setPassword] = useState("");
-  const [encryption, setEncryption] = useState("WPA2");
-
   return (
-    <Card className="mb-4">
+    <Card className="p-4">
       <CardHeader title={"WiFi"} />
-      <div className="flex flex-col gap-4">
+      <WiFiSettingsForm />
-        <FormGroup>
-          <label htmlFor="ssid" className="font-medium whitespace-nowrap md:w-2/3">SSID</label>
-          <input
-            id="ssid"
-            name="ssid"
-            type="text"
-            className="p-2 border border-gray-400 rounded-lg flex-1 md:w-2/3"
-            placeholder="Enter SSID"
-            value={ssid}
-            onChange={e => setSsid(e.target.value)}
-          />
-        </FormGroup>
-        <FormGroup>
-          <label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">Password</label>
-          <input
-            id="password"
-            name="password"
-            type="password"
-            className="p-2 border border-gray-400 rounded-lg flex-1 md:w-2/3"
-            placeholder="Enter Password"
-            value={password}
-            onChange={e => setPassword(e.target.value)}
-          />
-        </FormGroup>
-        <FormGroup>
-          <label htmlFor="encryption" className="font-medium whitespace-nowrap md:w-2/3">WPA/Encryption Type</label>
-          <select
-            id="encryption"
-            name="encryption"
-            className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 md:w-2/3"
-            value={encryption}
-            onChange={e => setEncryption(e.target.value)}
-          >
-            <option value="WPA2">WPA2</option>
-            <option value="WPA3">WPA3</option>
-            <option value="WEP">WEP</option>
-            <option value="None">None</option>
-          </select>
-        </FormGroup>
-        <button
-          className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full max-w-md"
-          //onClick={() => handleWiFiSave(ssid, password, encryption)}
-        >
-          Save WiFi Settings
-        </button>
-      </div>
     </Card>
   );
 };

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

@@ -0,0 +1,116 @@
+import { Field, Form, Formik } from "formik";
+import FormGroup from "../components/FormGroup";
+import type { WifiSettingValues } from "../../../types/types";
+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);
+  const { wifiQuery, wifiMutation } = useWifiAndModem();
+
+  const wifiSSID = wifiQuery?.data?.propSSID?.value;
+  const wifiPassword = wifiQuery?.data?.propPassword?.value;
+
+  const initialValues = {
+    ssid: wifiSSID ?? "",
+    password: wifiPassword ?? "",
+    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",
+      fields: [
+        {
+          property: "propSSID",
+          value: values.ssid,
+        },
+        {
+          property: "propPassword",
+          value: values.password,
+        },
+      ],
+    };
+
+    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">
+                <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"
+            >
+              {isSubmitting || wifiMutation.isPending ? "Saving..." : " Save WiFi settings"}
+            </button>
+          </Form>
+        )}
+      </Formik>
+      <Toaster />
+    </>
+  );
+};
+
+export default WiFiSettingsForm;

src/components/SettingForms/components/FormGroup.tsx

@@ -5,11 +5,7 @@ type FormGroupProps = {
 };
 
 const FormGroup = ({ children }: FormGroupProps) => {
-  return (
+  return <div className="flex flex-col md:flex-row md:items-center justify-between relative space-y-2">{children}</div>;
-    <div className="flex flex-col md:flex-row items-center justify-between relative">
-      {children}
-    </div>
-  );
 };
 
 export default FormGroup;

src/components/SettingForms/components/FormToggle.tsx

@@ -2,7 +2,7 @@ import { Field } from "formik";
 
 const FormToggle = ({ name, label }: { name: string; label?: string }) => {
   return (
-    <label className="flex items-center gap-3 cursor-pointer select-none w-50">
+    <label className="flex items-center gap-3 cursor-pointer select-none w-50 justify-between">
       <span className="text-sm">{label}</span>
       <Field id={name} type="checkbox" name={name} className="sr-only peer" />
       <div

src/components/SightingModal/SightingModal.tsx

@@ -0,0 +1,236 @@
+import { faCheck, faTrash, faX } from "@fortawesome/free-solid-svg-icons";
+import type { SightingType } from "../../types/types";
+import NumberPlate from "../PlateStack/NumberPlate";
+import ModalComponent from "../UI/ModalComponent";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useAlertHitContext } from "../../context/AlertHitContext";
+import { toast, Toaster } from "sonner";
+import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
+import HotListImg from "/Hotlist_Hit.svg";
+import NPED_CAT_A from "/NPED_Cat_A.svg";
+import NPED_CAT_B from "/NPED_Cat_B.svg";
+import NPED_CAT_C from "/NPED_Cat_C.svg";
+import { checkIsHotListHit, getHotlistName, getNPEDCategory } from "../../utils/utils";
+
+type SightingModalProps = {
+  isSightingModalOpen: boolean;
+  handleClose: () => void;
+  sighting: SightingType | null;
+  onDelete?: (deletedItem: SightingType | null) => void;
+};
+
+const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }: SightingModalProps) => {
+  const { dispatch } = useAlertHitContext();
+
+  const { query, mutation } = useCameraBlackboard();
+
+  const hotlistNames = getHotlistName(sighting?.metadata?.hotlistMatches);
+  const handleAcknowledgeButton = () => {
+    try {
+      if (!sighting) {
+        toast.error("Cannot add sighting to alert list");
+        handleClose();
+        return;
+      }
+      if (!query.data.alertHistory) {
+        mutation.mutate({
+          operation: "INSERT",
+          path: "alertHistory",
+          value: [sighting],
+        });
+      } else {
+        mutation.mutate({
+          operation: "APPEND",
+          path: "alertHistory",
+          value: sighting,
+        });
+        toast.success("Sighting Successfully added to alert list");
+      }
+
+      dispatch({ type: "ADD", payload: sighting });
+      handleClose();
+    } catch (error) {
+      console.error(error);
+      toast.error("Failed to add sighting to alert list");
+      handleClose();
+    }
+  };
+
+  const handleDeleteClick = (deletedItem: SightingType | null) => {
+    if (!onDelete) return;
+    onDelete(deletedItem);
+    handleClose();
+    toast.success("Sighting removed from alert list");
+  };
+
+  const motionAway = (sighting?.motion ?? "").toUpperCase() === "AWAY";
+  const isHotListHit = checkIsHotListHit(sighting);
+  const cat = getNPEDCategory(sighting);
+  const isNPEDHitA = cat === "A";
+  const isNPEDHitB = cat === "B";
+  const isNPEDHitC = cat === "C";
+
+  return (
+    <>
+      <ModalComponent isModalOpen={isSightingModalOpen} close={handleClose}>
+        <div className="max-w-screen-lg mx-auto py-4 px-2">
+          <div className="border-b border-gray-600 mb-4">
+            <h2 className="text-lg md:text-xl font-semibold">Sighting Details</h2>
+          </div>
+          <div className="mt-3 flex-col-reverse gap-3 md:flex-row md:justify-center flex md:hidden">
+            {onDelete ? (
+              <button
+                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-red-600 text-white hover:bg-red-700 w-full md:w-full"
+                onClick={() => handleDeleteClick(sighting)}
+              >
+                <FontAwesomeIcon icon={faTrash} />
+                Delete
+              </button>
+            ) : (
+              <button
+                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-red-600 text-white hover:bg-red-700 w-full md:w-full"
+                onClick={handleClose}
+              >
+                <FontAwesomeIcon icon={faX} />
+                Deny
+              </button>
+            )}
+            {onDelete ? (
+              <button
+                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-blue-600 text-white hover:bg-blue-700 w-full md:w-full"
+                onClick={handleClose}
+              >
+                <FontAwesomeIcon icon={faX} />
+                Close
+              </button>
+            ) : (
+              <button
+                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-green-600 text-white hover:bg-green-700 w-full md:w-full"
+                onClick={handleAcknowledgeButton}
+              >
+                <FontAwesomeIcon icon={faCheck} />
+                Acknowledge
+              </button>
+            )}
+          </div>
+          <div className="flex flex-col md:flex-row gap-3 items-center mb-2 justify-between">
+            <div className="flex flex-col md:flex-row gap-3 items-center">
+              <NumberPlate vrm={sighting?.vrm} motion={motionAway} />
+              <img src={sighting?.plateUrlColour} alt="plate patch" className="h-16 object-contain rounded-md" />
+            </div>
+
+            {isHotListHit && <img src={HotListImg} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
+            {isNPEDHitA && <img src={NPED_CAT_A} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
+            {isNPEDHitB && <img src={NPED_CAT_B} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
+            {isNPEDHitC && <img src={NPED_CAT_C} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
+          </div>
+          {hotlistNames && (
+            <div className="flex flex-col border-b border-gray-600 mb-4">
+              <p className="text-gray-300">Hotlists</p>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-[90%] lg:gap-x-[15%] w-[50%]">
+                {hotlistNames.map((hotlistName, index) => (
+                  <div className="items-center px-2.5 py-0.5 rounded-sm me-2 bg-amber-500 w-55 m-2" key={index}>
+                    <p className="font-medium text-2xl break-all text-amber-800">
+                      {hotlistName ? hotlistName?.replace(/\.csv$/i, "") : "-"}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+          <div className="flex flex-col lg:flex-row items-center gap-3">
+            <img
+              src={sighting?.overviewUrl}
+              alt="overview patch"
+              className="w-full h-56 sm:h-72 md:h-96 rounded-lg object-cover border border-gray-700"
+            />
+            <aside className="w-full lg:w-80  bg-gray-800/70 text-white rounded-xl py-4 px-2 border h-[70%] border-gray-700">
+              <h3 className="text-base md:text-lg font-semibold pb-2 border-b border-gray-700">Vehicle Info</h3>
+              <dl className="mt-3  gap-x-4 gap-y-2 text-sm">
+                <div>
+                  <dt className="text-gray-300">VRM</dt>
+                  <dd className="font-medium text-2xl break-all">{sighting?.vrm ?? "-"}</dd>
+                </div>
+
+                <div>
+                  <dt className="text-gray-300">Motion</dt>
+                  <dd className="font-medium text-2xl">{sighting?.motion ?? "-"}</dd>
+                </div>
+                <div>
+                  <dt className="text-gray-300">Seen Count</dt>
+                  <dd className="font-medium text-2xl">{sighting?.seenCount ?? "-"}</dd>
+                </div>
+
+                {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>
+                  </div>
+                )}
+
+                {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>
+                  </div>
+                )}
+
+                <div>
+                  <dt className="text-gray-300">Time</dt>
+                  <dd className="font-medium text-xl">{sighting?.timeStamp ?? "-"}</dd>
+                </div>
+              </dl>
+            </aside>
+          </div>
+
+          <div className="mt-3 flex-col-reverse gap-3 md:flex-row md:justify-center hidden md:flex">
+            {onDelete ? (
+              <button
+                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-blue-600 text-white hover:bg-blue-700 w-full md:w-full"
+                onClick={handleClose}
+              >
+                <FontAwesomeIcon icon={faX} />
+                Close
+              </button>
+            ) : (
+              <button
+                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-green-600 text-white hover:bg-green-700 w-full md:w-full"
+                onClick={handleAcknowledgeButton}
+              >
+                <FontAwesomeIcon icon={faCheck} />
+                Acknowledge
+              </button>
+            )}
+            {onDelete ? (
+              <button
+                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-red-600 text-white hover:bg-red-700 w-full md:w-full"
+                onClick={() => handleDeleteClick(sighting)}
+              >
+                <FontAwesomeIcon icon={faTrash} />
+                Delete
+              </button>
+            ) : (
+              <button
+                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-red-600 text-white hover:bg-red-700 w-full md:w-full"
+                onClick={handleClose}
+              >
+                <FontAwesomeIcon icon={faX} />
+                Deny
+              </button>
+            )}
+          </div>
+        </div>
+      </ModalComponent>
+      <Toaster />
+    </>
+  );
+};
+
+export default SightingModal;

src/components/SightingOverview/SightingCanvas.tsx

@@ -1,15 +0,0 @@
-import { useLatestSighting } from "../../hooks/useLatestSighting";
-
-const SightingCanvas = () => {
-  const { canvasRef } = useLatestSighting();
-  return (
-    <div className="w-70 flex flex-col">
-      <canvas
-        ref={canvasRef}
-        className="items-center w-full h-10 object-contain block"
-      />
-    </div>
-  );
-};
-
-export default SightingCanvas;

src/components/SightingOverview/SightingOverview.tsx

@@ -1,19 +1,13 @@
 import { useCallback, useRef, useState } from "react";
 import { BLANK_IMG } from "../../utils/utils";
-import SightingWidgetDetails from "../SightingsWidget/SightingWidgetDetails";
 import { useOverviewOverlay } from "../../hooks/useOverviewOverlay";
 import { useSightingFeedContext } from "../../context/SightingFeedContext";
 import { useHiDPICanvas } from "../../hooks/useHiDPICanvas";
 import NavigationArrow from "../UI/NavigationArrow";
-import { useSwipeable } from "react-swipeable";
+import NumberPlate from "../PlateStack/NumberPlate";
-import { useNavigate } from "react-router";
+import Loading from "../UI/Loading";
 
 const SightingOverview = () => {
-  const navigate = useNavigate();
-  const handlers = useSwipeable({
-    onSwipedRight: () => navigate("/front-camera-settings"),
-    trackMouse: true,
-  });
   const [overlayMode, setOverlayMode] = useState<0 | 1 | 2>(0);
 
   const imgRef = useRef<HTMLImageElement | null>(null);
@@ -23,50 +17,61 @@ const SightingOverview = () => {
     setOverlayMode((m) => ((m + 1) % 3) as 0 | 1 | 2);
   }, []);
 
-  const { effectiveSelected, side, mostRecent, noSighting, isPending } =
+  const { side, mostRecent, isError, isLoading } = useSightingFeedContext();
-    useSightingFeedContext();
 
   useOverviewOverlay(mostRecent, overlayMode, imgRef, canvasRef);
 
   const { sync } = useHiDPICanvas(imgRef, canvasRef);
 
-  if (noSighting || isPending) return <p>loading</p>;
+  if (isLoading)
-  return (
+    return (
-    <div className="mt-2 grid gap-3">
+      <div className="h-150 flex items-center justify-center">
-      <div className="inline-block w-[90%] mx-auto" {...handlers}>
         <NavigationArrow side={side} />
-        <div className="relative aspect-[1280/800]">
+        <Loading message="Loading" />
-          <img
-            ref={imgRef}
-            onLoad={() => {
-              sync();
-              setOverlayMode((m) => m);
-            }}
-            src={mostRecent?.overviewUrl || BLANK_IMG}
-            alt="overview"
-            className="absolute inset-0 w-full h-full object-contain cursor-pointer z-10"
-            onClick={onOverviewClick}
-            style={{
-              display: mostRecent?.overviewUrl ? "block" : "none",
-            }}
-          />
-          <canvas
-            ref={canvasRef}
-            className="absolute inset-0 w-full h-full object-contain z-20 pointer-events-none"
-          />
-        </div>
       </div>
+    );
 
-      <SightingWidgetDetails effectiveSelected={effectiveSelected} />
+  if (isError) return;
+  <div className="h-100 flex items-center justify-center text-red-500 text-lg">
+    An error occurred. Cannot display footage.
+  </div>;
 
-      <div className="text-xs opacity-80">
+  if (!mostRecent)
-        Overlay:{" "}
+    return (
-        {overlayMode === 0
+      <div className="h-150 flex items-center justify-center text-3xl animate-pulse">
-          ? "Off"
+        <NavigationArrow side={side} />
-          : overlayMode === 1
+        <Loading message="No Recent Sightings" />
-          ? "Plate box"
+      </div>
-          : "Track + box"}{" "}
+    );
-        (click image to toggle)
+
+  return (
+    <div className="flex flex-col md:flex-row">
+      <NavigationArrow side={side} />
+
+      <div className="w-full">
+        {mostRecent && (
+          <div className="absolute inset-0 z-50 px-1 pt-2">
+            <NumberPlate vrm={mostRecent?.vrm} size="sm" />
+          </div>
+        )}
+        <img
+          ref={imgRef}
+          onLoad={() => {
+            sync();
+            setOverlayMode((m) => m);
+          }}
+          src={mostRecent?.overviewUrl || BLANK_IMG}
+          alt="overview"
+          className="absolute inset-0 object-contain cursor-pointer z-10 min-h-[100%] rounded-lg"
+          onClick={onOverviewClick}
+          style={{
+            display: mostRecent?.overviewUrl ? "block" : "none",
+          }}
+        />
+        <canvas
+          ref={canvasRef}
+          className="absolute inset-0 object-contain z-20 pointer-events-none "
+        />
       </div>
     </div>
   );

src/components/SightingsWidget/InfoBar.tsx

@@ -0,0 +1,24 @@
+import type { SightingType } from "../../types/types";
+import { capitalize, formatAge } from "../../utils/utils";
+
+type InfoBarprops = {
+  obj: SightingType;
+};
+const InfoBar = ({ obj }: InfoBarprops) => {
+  return (
+    <div className="flex items-center gap-3 text-xs bg-neutral-900 px-2 py-1 rounded justify-between">
+      <div className="flex items-center gap-3 text-xs">
+        <div className="min-w-14">CH: {obj ? obj.charHeight : "—"}</div>
+        <div className="min-w-14">Seen: {obj ? obj.seenCount : "—"}</div>
+        <div className="min-w-20">{obj ? capitalize(obj.motion) : "—"}</div>
+        <div className="min-w-14 opacity-80 text-md">
+          {obj ? formatAge(obj.timeStampMillis) : "—"}
+        </div>
+      </div>
+
+      <div className="min-w-14 opacity-80 "></div>
+    </div>
+  );
+};
+
+export default InfoBar;

src/components/SightingsWidget/SightingWidget.tsx

@@ -1,11 +1,25 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import type { SightingWidgetType } from "../../types/types";
+import type { HitKind, QueuedHit, ReducedSightingType, SightingType } from "../../types/types";
-import { BLANK_IMG, capitalize, formatAge } from "../../utils/utils";
+import { BLANK_IMG } from "../../utils/utils";
 import NumberPlate from "../PlateStack/NumberPlate";
 import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
 import clsx from "clsx";
 import { useSightingFeedContext } from "../../context/SightingFeedContext";
+import SightingModal from "../SightingModal/SightingModal";
+import { useAlertHitContext } from "../../context/AlertHitContext";
+import HotListImg from "/Hotlist_Hit.svg";
+import NPED_CAT_A from "/NPED_Cat_A.svg";
+import NPED_CAT_B from "/NPED_Cat_B.svg";
+import NPED_CAT_C from "/NPED_Cat_C.svg";
+import popup from "../../assets/sounds/ui/popup_open.mp3";
+import notification from "../../assets/sounds/ui/notification.mp3";
+import { useSound } from "react-sounds";
+import { useIntegrationsContext } from "../../context/IntegrationsContext";
+import { useSoundContext } from "../../context/SoundContext";
+import Loading from "../UI/Loading";
+import { checkIsHotListHit, getNPEDCategory } from "../../utils/utils";
+import { useCachedSoundSrc } from "../../hooks/usecachedSoundSrc";
 
 function useNow(tickMs = 1000) {
   const [, setNow] = useState(() => Date.now());
@@ -13,114 +27,218 @@ function useNow(tickMs = 1000) {
     const id = setInterval(() => setNow(Date.now()), tickMs);
     return () => clearInterval(id);
   }, [tickMs]);
-  return undefined;
+  return null;
 }
 
-export type SightingHistoryProps = {
+type SightingHistoryProps = {
-  baseUrl: string;
+  baseUrl?: string;
-  entries?: number; // number of rows to show
+  entries?: number;
-  pollMs?: number; // poll frequency
+  pollMs?: number;
   autoSelectLatest?: boolean;
+  title: string;
+  className?: string;
 };
 
-type SightingHistoryWidgetProps = React.HTMLAttributes<HTMLDivElement>;
+export default function SightingHistoryWidget({ className, title }: SightingHistoryProps) {
-
+  const [modalQueue, setModalQueue] = useState<QueuedHit[]>([]);
-export default function SightingHistoryWidget({
-  className,
-}: SightingHistoryWidgetProps) {
   useNow(1000);
-  const { sightings, selectedRef, setSelectedRef } = useSightingFeedContext();
+  const { state } = useSoundContext();
+
+  const { src: soundSrcHotlist } = useCachedSoundSrc(state?.hotlistSound, state?.soundOptions, notification);
+  const { src: soundSrcNped } = useCachedSoundSrc(state?.NPEDsound, state?.soundOptions, popup);
+
+  const { play: npedSound } = useSound(soundSrcNped, { volume: state.NPEDsoundVolume });
+  const { play: hotlistsound } = useSound(soundSrcHotlist, { volume: state.hotlistSoundVolume });
+  const {
+    sightings,
+    setSelectedSighting,
+    setSightingModalOpen,
+    isSightingModalOpen,
+    selectedSighting,
+    mostRecent,
+    isLoading,
+  } = useSightingFeedContext();
+
+  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 }]);
+  }, []);
+
+  const reduceObject = (obj: SightingType): ReducedSightingType => {
+    return {
+      vrm: obj.vrm,
+      metadata: obj?.metadata,
+    };
+  };
+
+  useEffect(() => {
+    if (sessionStarted) {
+      if (!mostRecent) return;
+      if (sessionPaused) return;
+      const reducedMostRecent = reduceObject(mostRecent);
+      integrationDispatch({ type: "ADD", payload: reducedMostRecent });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mostRecent, sessionStarted]);
 
   const onRowClick = useCallback(
-    (ref: number) => {
+    (sighting: SightingType) => {
-      setSelectedRef(ref);
+      if (!sighting) return;
+      setSightingModalOpen(true);
+      setSelectedSighting(sighting);
     },
-    [setSelectedRef]
+    [setSelectedSighting, setSightingModalOpen]
   );
 
-  const rows = useMemo(
+  const rows = useMemo(() => sightings?.filter(Boolean) as SightingType[], [sightings]);
-    () => sightings?.filter(Boolean) as SightingWidgetType[],
-    [sightings]
-  );
 
+  useEffect(() => {
+    if (!rows?.length) return;
+
+    for (const sighting of rows) {
+      const id = sighting.vrm;
+
+      if (processedRefs.current.has(id)) continue;
+      const isHotlistHit = checkIsHotListHit(sighting);
+      const npedcategory = sighting?.metadata?.npedJSON?.["NPED CATEGORY"];
+      const isNPED =
+        (npedcategory === "A" && isCatAEnabled) ||
+        (npedcategory === "B" && isCatBEnabled) ||
+        (npedcategory === "C" && isCatCEnabled) ||
+        (npedcategory === "D" && isCatDEnabled);
+
+      if (isNPED || isHotlistHit) {
+        enqueue(sighting, isNPED ? "NPED" : "HOTLIST"); // enqueue ONLY
+      }
+    }
+  }, [rows, enqueue]);
+
+  useEffect(() => {
+    rows?.forEach((obj) => {
+      const cat = getNPEDCategory(obj);
+      const isNPEDHitA = cat === "A";
+      const isNPEDHitB = cat === "B";
+      const isNPEDHitC = cat === "C";
+      if (isNPEDHitA || isNPEDHitB || isNPEDHitC) {
+        dispatch({
+          type: "ADD",
+          payload: obj,
+        });
+      }
+    });
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (hasAutoOpenedRef.current || npedRef.current) return;
+    const firstNPED = rows.find((r) => {
+      const cat = getNPEDCategory(r);
+      const isNPEDHitA = cat === "A";
+      const isNPEDHitB = cat === "B";
+      const isNPEDHitC = cat === "C";
+      const isNPEDHitD = cat === "D";
+      return isNPEDHitA || isNPEDHitB || isNPEDHitC || isNPEDHitD;
+    });
+    const firstHot = rows?.find((r) => {
+      const isHotListHit = checkIsHotListHit(r);
+
+      return isHotListHit;
+    });
+
+    if (firstNPED) {
+      enqueue(firstNPED, "NPED");
+      npedRef.current = true;
+    }
+
+    if (firstHot) {
+      enqueue(firstHot, "HOTLIST");
+
+      hasAutoOpenedRef.current = true;
+    }
+  }, [enqueue, hotlistsound, npedSound, rows, setSelectedSighting, setSightingModalOpen]);
+
+  useEffect(() => {
+    if (!isSightingModalOpen && modalQueue.length > 0) {
+      const next = modalQueue[0];
+
+      if (next.kind === "NPED") npedSound();
+      else hotlistsound();
+
+      setSelectedSighting(next.sighting);
+
+      setSightingModalOpen(true);
+    }
+  }, [isSightingModalOpen, npedSound, hotlistsound, setSelectedSighting, setSightingModalOpen, modalQueue]);
+
+  const handleClose = () => {
+    setSightingModalOpen(false);
+    setModalQueue((q) => q.slice(1));
+  };
   return (
-    <Card className={clsx("overflow-y-auto h-100", className)}>
+    <>
-      <CardHeader title="Front Camera Sightings" />
+      <Card className={clsx("overflow-y-auto min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[40%] p-4", className)}>
-      <div className="flex flex-col gap-3 ">
+        <CardHeader title={title} />
-        {/* Rows */}
+        <div className="flex flex-col gap-3 ">
-        <div className="flex flex-col">
+          {isLoading && (
-          {rows?.map((obj, idx) => {
+            <div className="my-50 h-[50%]">
-            console.log(obj);
+              <Loading message="Loading Sightings" />
-            const isNPEDHit = obj?.metadata?.npedJSON?.status_code === 201;
+            </div>
-            const isSelected = obj?.ref === selectedRef;
+          )}
-            const motionAway = (obj?.motion ?? "").toUpperCase() === "AWAY";
+          {/* Rows */}
-            const primaryIsColour = obj?.srcCam === 1;
+          <div className="flex flex-col">
-            const secondaryMissing = (obj?.vrmSecondary ?? "") === "";
+            {rows?.map((obj) => {
-            return (
+              const cat = getNPEDCategory(obj);
-              <div
+              const isNPEDHitA = cat === "A";
-                key={idx}
+              const isNPEDHitB = cat === "B";
-                className={`border border-neutral-700 rounded-md mb-2 p-2 cursor-pointer ${
+              const isNPEDHitC = cat === "C";
-                  isSelected ? "ring-2 ring-blue-400" : ""
+              const motionAway = (obj?.motion ?? "").toUpperCase() === "AWAY";
-                }`}
+              const isHotListHit = checkIsHotListHit(obj);
-                onClick={() => onRowClick(obj.ref)}
+              return (
-              >
-                {/* Info bar */}
-                <div className="flex items-center gap-3 text-xs bg-neutral-900 px-2 py-1 rounded">
-                  <div className="min-w-14">
-                    CH: {obj ? obj.charHeight : "—"}
-                  </div>
-                  <div className="min-w-14">
-                    Seen: {obj ? obj.seenCount : "—"}
-                  </div>
-                  <div className="min-w-20">
-                    {obj ? capitalize(obj.motion) : "—"}
-                  </div>
-                  <div className="min-w-14 opacity-80">
-                    {obj ? formatAge(obj.timeStampMillis) : "—"}
-                  </div>
-                </div>
-
-                {/* Patch row */}
                 <div
-                  className={`flex items-center gap-3 mt-2
+                  key={obj.ref}
-                  ${isNPEDHit ? "border border-red-600" : ""}
+                  className={`border border-gray-700 rounded-md mb-2 p-2 cursor-pointer `}
-                  `}
+                  onClick={() => onRowClick(obj)}
                 >
-                  <div
+                  <div className={`flex items-center gap-3 mt-2 justify-between `}>
-                    className={`border p-1 ${
+                    <div className={`border p-1 `}>
-                      primaryIsColour ? "" : "ring-2 ring-lime-400"
+                      <img src={obj?.plateUrlColour || BLANK_IMG} height={48} width={200} alt="colour patch" />
-                    } ${!obj ? "opacity-30" : ""}`}
+                    </div>
-                  >
+                    {isHotListHit && (
-                    <img
+                      <img src={HotListImg} alt="hotlistHit" className="h-20 object-contain rounded-md" />
-                      src={obj?.plateUrlInfrared || BLANK_IMG}
+                    )}
-                      height={48}
+                    {isNPEDHitA && <img src={NPED_CAT_A} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
-                      alt="infrared patch"
+                    {isNPEDHitB && <img src={NPED_CAT_B} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
-                      className={!primaryIsColour ? "" : "opacity-60"}
+                    {isNPEDHitC && <img src={NPED_CAT_C} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
-                    />
+                    <NumberPlate motion={motionAway} vrm={obj?.vrm} />
                   </div>
-                  <div
-                    className={`border p-1 ${
-                      primaryIsColour ? "ring-2 ring-lime-400" : ""
-                    } ${
-                      secondaryMissing && primaryIsColour
-                        ? "opacity-30 grayscale"
-                        : ""
-                    }`}
-                  >
-                    <img
-                      src={obj?.plateUrlColour || BLANK_IMG}
-                      height={48}
-                      alt="colour patch"
-                      className={primaryIsColour ? "" : "opacity-60"}
-                    />
-                  </div>
-                  <NumberPlate motion={motionAway} vrm={obj?.vrm} />
                 </div>
-              </div>
+              );
-            );
+            })}
-          })}
+          </div>
         </div>
-      </div>
+      </Card>
-    </Card>
+      <SightingModal isSightingModalOpen={isSightingModalOpen} handleClose={handleClose} sighting={selectedSighting} />
+    </>
   );
 }

src/components/SightingsWidget/SightingWidgetDetails.tsx

@@ -1,78 +1,46 @@
-import type { SightingWidgetType } from "../../types/types";
+import type { SightingType } from "../../types/types";
 
 type SightingWidgetDetailsProps = {
-  effectiveSelected: SightingWidgetType | null;
+  effectiveSelected: SightingType | null;
 };
 
 const SightingWidgetDetails = ({
   effectiveSelected,
 }: SightingWidgetDetailsProps) => {
   return (
-    <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm">
+    <>
-      <div>
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm">
-        VRM:{" "}
+        {effectiveSelected?.vrm && (
-        <span className="opacity-90">{effectiveSelected?.vrm ?? "—"}</span>
+          <div>
+            VRM:{" "}
+            <span className="opacity-90">{effectiveSelected?.vrm ?? "—"}</span>
+          </div>
+        )}
+
+        {effectiveSelected?.make !== "" && (
+          <div>
+            Make:{" "}
+            <span className="opacity-90">{effectiveSelected?.make ?? "—"}</span>
+          </div>
+        )}
+        {effectiveSelected?.model.trim() !== "" && (
+          <div>
+            Model:{" "}
+            <span className="opacity-90">
+              {effectiveSelected?.model ?? "—"}
+            </span>
+          </div>
+        )}
+        {effectiveSelected?.color !== "" && (
+          <div>
+            Colour:{" "}
+            <span className="opacity-90">
+              {effectiveSelected?.color ?? "—"}
+            </span>
+          </div>
+        )}
       </div>
-      <div>
+    </>
-        Timestamp:{" "}
-        <span className="opacity-90">{effectiveSelected?.timeStamp ?? "—"}</span>
-      </div>
-      <div>
-        Make:{" "}
-        <span className="opacity-90">{effectiveSelected?.make ?? "—"}</span>
-      </div>
-      <div>
-        Model:{" "}
-        <span className="opacity-90">{effectiveSelected?.model ?? "—"}</span>
-      </div>
-      <div>
-        Country:{" "}
-        <span className="opacity-90">{effectiveSelected?.countryCode ?? "—"}</span>
-      </div>
-      <div>
-        Seen:{" "}
-        <span className="opacity-90">
-          {effectiveSelected?.seenCount ?? "—"}
-        </span>
-      </div>
-      <div>
-        Colour:{" "}
-        <span className="opacity-90">{effectiveSelected?.color ?? "—"}</span>
-      </div>
-      <div>
-        Category:{" "}
-        <span className="opacity-90">{effectiveSelected?.category ?? "—"}</span>
-      </div>
-      <div>
-        Char Ht:{" "}
-        <span className="opacity-90">
-          {effectiveSelected?.charHeight ?? "—"}
-        </span>
-      </div>
-      <div>
-        Plate Size:{" "}
-        <span className="opacity-90">
-          {effectiveSelected?.plateSize ?? "—"}
-        </span>
-      </div>
-      <div>
-        Overview Size:{" "}
-        <span className="opacity-90">
-          {effectiveSelected?.overviewSize ?? "—"}
-        </span>
-      </div>
-      {effectiveSelected?.detailsUrl ? (
-        <div className="col-span-half">
-          <a
-            href={effectiveSelected.detailsUrl}
-            target="_blank"
-            className="underline text-blue-300"
-          >
-            Sighting Details
-          </a>
-        </div>
-      ) : null}
-    </div>
   );
 };
 

src/components/UI/Badge.tsx

@@ -0,0 +1,18 @@
+import type { Icon, IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+type BadgeProps = {
+  icon?: Icon | IconDefinition;
+  text: string;
+};
+
+const Badge = ({ icon, text }: BadgeProps) => {
+  return (
+    <span className="text-md font-medium inline-flex items-center px-2.5 py-0.5 rounded-sm me-2 bg-blue-900 text-blue-200 border border-blue-500 space-x-2">
+      {icon && <FontAwesomeIcon icon={icon} />}
+      <span>{text}</span>
+    </span>
+  );
+};
+
+export default Badge;

src/components/UI/Card.tsx

@@ -10,7 +10,7 @@ const Card = ({ children, className }: CardProps) => {
   return (
     <div
       className={clsx(
-        "bg-[#253445] rounded-lg mt-4 mx-2 px-4 py-4 shadow-2xl overflow-y-auto md:row-span-1",
+        "bg-[#253445] rounded-lg mt-4 mx-2 shadow-2xl overflow-x-hidden md:row-span-1 px-2 border border-gray-600 ",
         className
       )}
     >

src/components/UI/CardHeader.tsx

@@ -1,19 +1,21 @@
 import type { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import clsx from "clsx";
+import NumberPlate from "../PlateStack/NumberPlate";
+import type { SightingType } from "../../types/types";
 
 type CameraOverviewHeaderProps = {
-  title: string;
+  title?: string;
   icon?: IconProp;
   img?: string;
+  sighting?: SightingType | null;
 };
 
-
+const CardHeader = ({ title, icon, img, sighting }: CameraOverviewHeaderProps) => {
-const CardHeader = ({ title, icon, img }: CameraOverviewHeaderProps) => {
   return (
     <div
       className={clsx(
-        "w-full border-b border-gray-600 flex flex-row items-center md:mb-6"
+        "w-full border-b border-gray-600 flex flex-row items-center space-x-2 mb-6 relative justify-between"
       )}
     >
       <div className="flex items-center space-x-2">
@@ -21,9 +23,9 @@ const CardHeader = ({ title, icon, img }: CameraOverviewHeaderProps) => {
         <h2 className="text-xl">{title}</h2>
       </div>
       {img && <img src={img} alt="Logo" width={100} height={50} className="ml-auto" />}
+      {sighting?.vrm && <NumberPlate vrm={sighting.vrm} motion={false} />}
     </div>
   );
 };
 
-
 export default CardHeader;

src/components/UI/Container.tsx

@@ -4,9 +4,11 @@ import { Outlet } from "react-router";
 
 const Container = () => {
   return (
-    <div>
+    <div className="min-h-screen">
       <Header />
-      <Outlet />
+      <div className="min-h-screen">
+        <Outlet />
+      </div>
       <Footer />
     </div>
   );

src/components/UI/ErrorState.tsx

@@ -0,0 +1,162 @@
+import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faTriangleExclamation,
+  faRotateRight,
+  faChevronDown,
+  faChevronUp,
+  faClipboard,
+} from "@fortawesome/free-solid-svg-icons";
+import { useState, type FC } from "react";
+
+type Variant = "inline" | "card" | "banner";
+
+export type ErrorStateProps = {
+  /** Main heading shown to the user */
+  title?: string;
+  /** Friendly message for the user */
+  message?: string;
+  /** Raw error to help devs (object, string, whatever) */
+  error?: unknown;
+  /** Called when user clicks Retry */
+  onRetry?: () => Promise<void> | void;
+  /** Show a Retry button */
+  showRetry?: boolean;
+  /** Optional custom icon */
+  icon?: IconDefinition;
+  /** Visual style */
+  variant?: Variant;
+  /** Additional actions (e.g. “Report”) */
+  actions?: React.ReactNode;
+  /** Test id for testing */
+  "data-testid"?: string;
+  /** ClassName passthrough */
+  className?: string;
+};
+
+function formatError(err: unknown) {
+  if (!err) return "";
+  if (typeof err === "string") return err;
+  if (err instanceof Error) return err.stack || err.message;
+  try {
+    return JSON.stringify(err, null, 2);
+  } catch {
+    return String(err);
+  }
+}
+
+const baseStyles = "w-full text-left flex items-start gap-3 rounded-md border";
+
+const variants: Record<Variant, string> = {
+  inline: "p-3 border-red-200 bg-red-50 text-red-800",
+  card: "p-4 border-red-200 bg-red-50 text-red-800 shadow-sm",
+  banner: "p-3 border-red-200 bg-red-50 text-red-800 rounded-none border-x-0",
+};
+
+export const ErrorState: FC<ErrorStateProps> = ({
+  title = "Something went wrong",
+  message = "Please try again or contact support if the problem persists.",
+  error,
+  onRetry,
+  showRetry = !!onRetry,
+  icon = faTriangleExclamation,
+  variant = "inline",
+  actions,
+  className = "",
+  ...rest
+}) => {
+  const [expanded, setExpanded] = useState(false);
+  const [retrying, setRetrying] = useState(false);
+
+  const details = formatError(error);
+
+  async function handleRetry() {
+    if (!onRetry) return;
+    try {
+      setRetrying(true);
+      await onRetry();
+    } finally {
+      setRetrying(false);
+    }
+  }
+
+  function copyDetails() {
+    if (!details) return;
+    navigator.clipboard?.writeText(details).catch(() => {});
+  }
+
+  return (
+    <div
+      role="alert"
+      aria-live="assertive"
+      className={`${baseStyles} ${variants[variant]} ${className}`}
+      {...rest}
+    >
+      <div className="mt-0.5">
+        <FontAwesomeIcon icon={icon} className="h-5 w-5" />
+      </div>
+
+      <div className="flex-1 space-y-1">
+        <h3 className="font-medium">{title}</h3>
+        {message && <p className="text-sm opacity-90">{message}</p>}
+
+        {/* Controls */}
+        <div className="flex flex-wrap items-center gap-2 pt-1">
+          {showRetry && (
+            <button
+              type="button"
+              onClick={handleRetry}
+              disabled={retrying}
+              className="inline-flex items-center gap-2 px-3 py-1.5 rounded-md bg-red-600 text-white text-sm hover:bg-red-700 disabled:opacity-60"
+            >
+              <FontAwesomeIcon icon={faRotateRight} className="h-4 w-4" />
+              {retrying ? "Retrying…" : "Retry"}
+            </button>
+          )}
+
+          {details && (
+            <>
+              <button
+                type="button"
+                onClick={() => setExpanded((v) => !v)}
+                className="inline-flex items-center gap-2 px-3 py-1.5 rounded-md border text-sm hover:bg-white/50"
+                aria-expanded={expanded}
+                aria-controls="error-details"
+              >
+                <FontAwesomeIcon
+                  icon={expanded ? faChevronUp : faChevronDown}
+                  className="h-4 w-4"
+                />
+                {expanded ? "Hide details" : "Show details"}
+              </button>
+
+              <button
+                type="button"
+                onClick={copyDetails}
+                className="inline-flex items-center gap-2 px-3 py-1.5 rounded-md border text-sm hover:bg-white/50"
+                aria-label="Copy error details"
+              >
+                <FontAwesomeIcon icon={faClipboard} className="h-4 w-4" />
+                Copy details
+              </button>
+            </>
+          )}
+
+          {actions}
+        </div>
+
+        {/* Dev details (collapsible) */}
+        {expanded && details && (
+          <pre
+            id="error-details"
+            className="mt-2 max-h-64 overflow-auto text-xs leading-relaxed bg-white/60 text-red-900 border rounded p-3"
+          >
+            {details}
+          </pre>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ErrorState;

src/components/UI/Header.tsx

@@ -1,82 +1,104 @@
-import * as React from "react";
 import { Link } from "react-router";
 import Logo from "/MAV.svg";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faGear, faListCheck } from "@fortawesome/free-solid-svg-icons";
+import {
-import type { VersionFieldType } from "../../types/types";
+  faBars,
-
+  faGear,
-async function fetchVersions(signal?: AbortSignal): Promise<VersionFieldType> {
+  faHome,
-  const res = await fetch("http://192.168.75.11/api/versions", { signal });
+  faListCheck,
-  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  faMaximize,
-  return res.json();
+  faMinimize,
-}
+  faRotate,
-
+} from "@fortawesome/free-solid-svg-icons";
-const pad = (n: number) => String(n).padStart(2, "0");
+import { useState } from "react";
-const normalizeToMs = (ts: number) => (ts < 1e12 ? ts * 1000 : ts); // seconds → ms if needed
+import SoundBtn from "./SoundBtn";
-
+import { useIntegrationsContext } from "../../context/IntegrationsContext";
-function formatFromMs(ms: number, tz: "local" | "utc" = "local") {
-  const d = new Date(ms);
-  const h = tz === "utc" ? d.getUTCHours() : d.getHours();
-  const m = tz === "utc" ? d.getUTCMinutes() : d.getMinutes();
-  const s = tz === "utc" ? d.getUTCSeconds() : d.getSeconds();
-  const day = tz === "utc" ? d.getUTCDate() : d.getDate();
-  const month = (tz === "utc" ? d.getUTCMonth() : d.getMonth()) + 1;
-  const year = tz === "utc" ? d.getUTCFullYear() : d.getFullYear();
-  return `${pad(h)}:${pad(m)}:${pad(s)} ${pad(day)}-${pad(month)}-${year}`;
-}
 
 export default function Header() {
-  const [offsetMs, setOffsetMs] = React.useState<number | null>(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
-  const [nowMs, setNowMs] = React.useState<number>(Date.now());
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const { state } = useIntegrationsContext();
 
-  React.useEffect(() => {
+  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
-    const ac = new AbortController();
-    fetchVersions(ac.signal)
-      .then((data) => {
-        const serverMs = normalizeToMs(data.timeStamp);
-        setOffsetMs(serverMs - Date.now());
-      })
-    return () => ac.abort();
-  }, []);
 
-  React.useEffect(() => {
+  const sessionStarted = state.sessionStarted;
-    let timer: number;
-    const schedule = () => {
-      const now = Date.now();
-      setNowMs(now);
-      const delay = 1000 - (now % 1000);
-      timer = window.setTimeout(schedule, delay);
-    };
-    schedule();
-    return () => clearTimeout(timer);
-  }, []);
 
-  const serverNowMs = offsetMs == null ? nowMs : nowMs + offsetMs;
+  const sessionPaused = state.sessionPaused;
-  const localStr = formatFromMs(serverNowMs, "local");
+
-  const utcStr = formatFromMs(serverNowMs, "utc");
+  const toggleFullscreen = () => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+      setIsFullscreen(true);
+    } else {
+      document.exitFullscreen();
+      setIsFullscreen(false);
+    }
+  };
+
+  const refreshBrowser = () => {
+    window.location.reload();
+  };
 
   return (
-    <div className="relative bg-[#253445] border-b border-gray-500 items-center mx-auto px-2 sm:px-6 lg:px-8 p-4 flex flex-row justify-between">
+    <div className="relative bg-[#253445] border-b border-gray-500 items-center mx-auto sm:px-3 lg:px-4 py-4 flex flex-col md:flex-row justify-between mb-7 space-y-6 md:space-y-0">
-      {/* Left: Logo */}
+      <div className="w-28">
-      <div className="w-30">
         <Link to={"/"}>
           <img src={Logo} alt="Logo" width={150} height={150} />
         </Link>
       </div>
-      {/* Right: Texts stacked + icons */}
+      <div className="flex flex-col lg:flex-row items-center space-x-24 justify-items-center">
-      <div className="flex items-center space-x-12">
+        <div className="flex flex-row lg:flex-row space-x-2 mx-auto  p-2 md:p-0 items-center">
-        <div className="flex flex-col leading-tight text-white text-sm tabular-nums">
+          {sessionStarted && sessionPaused ? (
-          <h2>Local: {localStr}</h2>
+            <p className="text-gray-400 font-bold">Session Paused</p>
-          <h2>UTC: {utcStr}</h2>
+          ) : (
+            sessionStarted && <p className="text-green-400 font-bold">Session Active</p>
+          )}
         </div>
 
-        <Link to={"/session-settings"}>
+        <div className="flex flex-row space-x-6 md:space-x-8 items-center">
-          <FontAwesomeIcon className="text-white" icon={faListCheck} />
+          <Link to={"/"}>
-        </Link>
+            <FontAwesomeIcon className="text-white" icon={faHome} size="2x" />
-        <Link to={"/system-settings"}>
+          </Link>
-          <FontAwesomeIcon className="text-white" icon={faGear} />
+          <div onClick={toggleFullscreen} className="flex flex-col">
-        </Link>
+            {isFullscreen ? (
+              <FontAwesomeIcon icon={faMinimize} size="2x" />
+            ) : (
+              <FontAwesomeIcon icon={faMaximize} size="2x" />
+            )}
+          </div>
+          <div onClick={refreshBrowser}>
+            <FontAwesomeIcon icon={faRotate} size="2x" />
+          </div>
+          <SoundBtn />
+          <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 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>
   );
 }

src/components/UI/Loading.tsx

@@ -0,0 +1,14 @@
+type LoadingProps = {
+  message?: string;
+};
+
+const Loading = ({ message }: LoadingProps) => {
+  return (
+    <div className="flex flex-col items-center justify-center py-6">
+      <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-gray-500 mb-2"></div>
+      {message && <p className="text-lg text-gray-500">{message}</p>}
+    </div>
+  );
+};
+
+export default Loading;

src/components/UI/ModalComponent.tsx

@@ -0,0 +1,23 @@
+import type React from "react";
+import Modal from "react-modal";
+
+type ModalComponentProps = {
+  isModalOpen: boolean;
+  children: React.ReactNode;
+  close: () => void;
+};
+
+const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) => {
+  return (
+    <Modal
+      isOpen={isModalOpen}
+      onRequestClose={close}
+      className="bg-[#1e2a38] p-6 rounded-lg shadow-lg max-w-[80%] mx-auto mt-[1%] md:w-[70%] md:h-[95%] z-[100] overflow-y-auto max-h-screen"
+      overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
+    >
+      {children}
+    </Modal>
+  );
+};
+
+export default ModalComponent;

src/components/UI/NavigationArrow.tsx

@@ -3,40 +3,42 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate } from "react-router";
 
 type NavigationArrowProps = {
-  side: string;
+  side: string | undefined;
   settingsPage?: boolean;
 };
 
 const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
   const navigate = useNavigate();
 
-  const navigationDest = (side: string) => {
+  const navigationDest = (side: string | undefined) => {
     if (settingsPage) {
       navigate("/");
       return;
     }
 
     if (side === "Front") {
-      navigate("/front-camera-settings");
+      navigate("/a-camera-settings");
     } else if (side === "Rear") {
-      navigate("/Rear-Camera-settings");
+      navigate("/b-Camera-settings");
     }
   };
 
   if (settingsPage) {
     return (
       <>
-        {side === "CameraFront" ? (
+        {side === "CameraA" ? (
           <FontAwesomeIcon
+            size="2xl"
             icon={faArrowRight}
-            className="absolute top-[50%] right-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce"
+            className="absolute top-[50%] right-[2%] backdrop-blur-lg hover:cursor-pointer animate-bounce z-30 rounded-md arrow-outline"
-            onClick={() => navigationDest(side)}
+            onClick={() => navigationDest("a")}
           />
         ) : (
           <FontAwesomeIcon
             icon={faArrowLeft}
-            className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce"
+            size="2xl"
-            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")}
           />
         )}
       </>
@@ -44,19 +46,19 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
   }
   return (
     <>
-      {side === "Front" ? (
+      <FontAwesomeIcon
-        <FontAwesomeIcon
+        icon={faArrowLeft}
-          icon={faArrowLeft}
+        size="2xl"
-          className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce"
+        className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100 arrow-outline rounded-md"
-          onClick={() => navigationDest(side)}
+        onClick={() => navigationDest("Front")}
-        />
+      />
-      ) : (
+
-        <FontAwesomeIcon
+      <FontAwesomeIcon
-          icon={faArrowRight}
+        icon={faArrowRight}
-          className="absolute top-[50%] right-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce"
+        size="2xl"
-          onClick={() => navigationDest(side)}
+        className="absolute top-[50%] right-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100 arrow-outline rounded-md"
-        />
+        onClick={() => navigationDest("Rear")}
-      )}
+      />
     </>
   );
 };

src/components/UI/Slider.tsx

@@ -0,0 +1,60 @@
+import "rc-slider/assets/index.css";
+import Slider from "rc-slider";
+import { useSoundContext } from "../../context/SoundContext";
+
+const SliderComponent = ({ soundCategory }: { soundCategory: "SIGHTINGVOLUME" | "NPEDVOLUME" | "HOTLISTVOLUME" }) => {
+  const { dispatch, state } = useSoundContext();
+
+  const getVolumeOption = (soundCategory: string) => {
+    if (soundCategory === "SIGHTINGVOLUME") {
+      return state.sightingVolume;
+    }
+    if (soundCategory === "NPEDVOLUME") {
+      return state.NPEDsoundVolume;
+    }
+    if (soundCategory === "HOTLISTVOLUME") {
+      return state.hotlistSoundVolume;
+    }
+  };
+
+  const volume = getVolumeOption(soundCategory);
+
+  const handleChange = (value: number | number[]) => {
+    const number = typeof value === "number" ? value : value[0];
+    dispatch({ type: soundCategory, payload: number });
+  };
+
+  return (
+    <div className="flex flex-row w-full lg:w-[40%] space-x-5">
+      <Slider
+        min={0}
+        max={1}
+        onChange={handleChange}
+        value={volume}
+        step={0.1}
+        styles={{
+          handle: {
+            width: "1.2rem",
+            height: "1.2rem",
+            marginTop: -7,
+            backgroundColor: "#3b82f6",
+            border: "2px solid white",
+            borderRadius: "50%",
+            boxShadow: "0 0 5px rgba(0, 0, 0, 0.2)",
+          },
+          track: {
+            backgroundColor: "#3b82f6",
+            height: 6,
+          },
+          rail: {
+            backgroundColor: "#e5e7eb",
+            height: 6,
+          },
+        }}
+      />
+      <span>{volume ? volume * 10 : 1}</span>
+    </div>
+  );
+};
+
+export default SliderComponent;

src/components/UI/SoundBtn.tsx

@@ -0,0 +1,34 @@
+import { faVolumeHigh, faVolumeXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useSoundEnabled } from "react-sounds";
+import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
+import { useEffect } from "react";
+
+const SoundBtn = () => {
+  const { mutation, query } = useCameraBlackboard();
+  const [enabled, setEnabled] = useSoundEnabled();
+
+  const handleClick = async () => {
+    const newEnabled = !enabled;
+    setEnabled(newEnabled);
+    await mutation.mutateAsync({
+      operation: "INSERT",
+      path: "soundEnabled",
+      value: { enabled: newEnabled },
+    });
+  };
+  useEffect(() => {
+    setEnabled(query?.data?.soundEnabled?.enabled);
+  }, [query?.data?.soundEnabled?.enabled, setEnabled]);
+
+  return (
+    <button onClick={handleClick}>
+      <FontAwesomeIcon
+        icon={enabled ? faVolumeHigh : faVolumeXmark}
+        size="2x"
+      />
+    </button>
+  );
+};
+
+export default SoundBtn;

src/components/UI/VehicleSessionItem.tsx

@@ -0,0 +1,18 @@
+import clsx from "clsx";
+
+type VehicleSessionItemProps = {
+  sessionNumber: number;
+  textColour: string;
+  vehicleTag: string;
+};
+
+const VehicleSessionItem = ({ sessionNumber, textColour, vehicleTag }: VehicleSessionItemProps) => {
+  return (
+    <li className="rounded-xl border border-slate-800 bg-slate-800/60 p-3 shadow-sm flex flex-row justify-between items-center">
+      <p>{vehicleTag}</p>
+      <span className={`font-bold text-xl bg-slate-700 px-2 rounded-md ${clsx(textColour)}`}>{sessionNumber}</span>
+    </li>
+  );
+};
+
+export default VehicleSessionItem;

src/context/AlertHitContext.ts

@@ -0,0 +1,24 @@
+import { createContext, useContext } from "react";
+import type { AlertState, AlertPayload } from "../types/types";
+
+type AlertHitContextValueType = {
+  state: AlertState;
+  action?: AlertPayload;
+  dispatch: React.Dispatch<AlertPayload>;
+  isLoading?: boolean;
+  isError?: boolean;
+  error?: Error | null;
+};
+
+export const AlertHitContext = createContext<
+  AlertHitContextValueType | undefined
+>(undefined);
+
+export const useAlertHitContext = () => {
+  const ctx = useContext(AlertHitContext);
+  if (!ctx)
+    throw new Error("useAlertHitContext must be used within <AlertHitContext>");
+  return ctx;
+};
+
+export default AlertHitContext;

src/context/IntegrationsContext.ts

@@ -0,0 +1,14 @@
+import { createContext, useContext, type ActionDispatch } from "react";
+import type { NPEDACTION, NPEDSTATE } from "../types/types";
+
+type IntegrationsValue = {
+  state: NPEDSTATE;
+  dispatch: ActionDispatch<[action: NPEDACTION]>;
+};
+
+export const IntegrationsContext = createContext<IntegrationsValue | undefined>(undefined);
+export const useIntegrationsContext = () => {
+  const ctx = useContext(IntegrationsContext);
+  if (!ctx) throw new Error("useNPEDContext must be used within <IntegrationsProvider>");
+  return ctx;
+};

src/context/NPEDUserContext.tsx

@@ -1,17 +0,0 @@
-import { createContext, useContext, type SetStateAction } from "react";
-import type { NPEDCameraConfig, NPEDUser } from "../types/types";
-
-type UserContextValue = {
-  user: NPEDCameraConfig | null;
-  setUser: React.Dispatch<SetStateAction<NPEDUser | null>>;
-};
-
-export const NPEDUserContext = createContext<UserContextValue | undefined>(
-  undefined
-);
-export const useNPEDContext = () => {
-  const ctx = useContext(NPEDUserContext);
-  if (!ctx)
-    throw new Error("useNPEDContext must be used within <NPEDUserProvider>");
-  return ctx;
-};

src/context/SightingFeedContext.ts

@@ -0,0 +1,32 @@
+import { createContext, useContext } from "react";
+import type { SightingType } from "../types/types";
+
+type SightingFeedContextType = {
+  sightings: (SightingType | null | undefined)[];
+  selectedRef: number | null;
+  setSelectedRef: (ref: number | null) => void;
+  // effectiveSelected: SightingType | null;
+  mostRecent: SightingType | null;
+  side: string | undefined;
+  selectedSighting: SightingType | null;
+  setSelectedSighting: (sighting: SightingType | SightingType | null) => void;
+  setSightingModalOpen: (isSightingModalOpen: boolean) => void;
+  isSightingModalOpen: boolean;
+  isError: boolean;
+  isLoading: boolean;
+  data: SightingType | undefined;
+  sessionStarted: boolean;
+};
+
+export const SightingFeedContext = createContext<
+  SightingFeedContextType | undefined
+>(undefined);
+
+export const useSightingFeedContext = () => {
+  const ctx = useContext(SightingFeedContext);
+  if (!ctx)
+    throw new Error(
+      "useSightingFeedContext must be used within SightingFeedProvider"
+    );
+  return ctx;
+};