- bumped version to 1.0.28

- bugfix Clamped numbers for sighting store
- attempted fix on NPED Category
2026-01-14 12:23:16 +00:00 · 2026-01-13 15:29:04 +00:00 · 2026-01-12 12:13:56 +00:00 · 2026-01-07 10:08:55 +00:00 · 2026-01-07 09:52:42 +00:00 · 2026-01-07 09:52:01 +00:00
23 changed files with 327 additions and 235 deletions
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "in-car-system-fe",
  "private": true,
-  "version": "1.0.24",
+  "version": "1.0.28",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,28 +9,25 @@ import { IntegrationsProvider } from "./context/providers/IntegrationsContextPro
 import { AlertHitProvider } from "./context/providers/AlertHitProvider";
 import { SoundProvider } from "react-sounds";
 import SoundContextProvider from "./context/providers/SoundContextProvider";
-import WebSocketProvider from "./context/providers/WebSocketProvider";

 function App() {
  return (
    <SoundContextProvider>
      <SoundProvider initialEnabled={true}>
-        <WebSocketProvider>
-          <IntegrationsProvider>
-            <AlertHitProvider>
-              <Routes>
-                <Route path="/" element={<Container />}>
-                  <Route index element={<Dashboard />} />
-                  <Route path="a-camera-settings" element={<FrontCamera />} />
-                  <Route path="b-camera-settings" element={<RearCamera />} />
-                  <Route path="system-settings" element={<SystemSettings />} />
-                  <Route path="session-settings" element={<Session />} />
-                  <Route path="*" element={<Navigate to="/" replace />} />
-                </Route>
-              </Routes>
-            </AlertHitProvider>
-          </IntegrationsProvider>
-        </WebSocketProvider>
+        <IntegrationsProvider>
+          <AlertHitProvider>
+            <Routes>
+              <Route path="/" element={<Container />}>
+                <Route index element={<Dashboard />} />
+                <Route path="a-camera-settings" element={<FrontCamera />} />
+                <Route path="b-camera-settings" element={<RearCamera />} />
+                <Route path="system-settings" element={<SystemSettings />} />
+                <Route path="session-settings" element={<Session />} />
+                <Route path="*" element={<Navigate to="/" replace />} />
+              </Route>
+            </Routes>
+          </AlertHitProvider>
+        </IntegrationsProvider>
      </SoundProvider>
    </SoundContextProvider>
  );
--- a/src/components/CameraSettings/CameraSettingFields.tsx
+++ b/src/components/CameraSettings/CameraSettingFields.tsx
@@ -1,28 +1,22 @@
 import { Formik, Field, Form } from "formik";
 import type { CameraConfig, CameraSettingErrorValues, CameraSettingValues, ZoomInOptions } from "../../types/types";
-import { useEffect, useMemo, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
+import { useEffect, useMemo } from "react";
 import CardHeader from "../UI/CardHeader";
 import { useCameraMode, useCameraZoom } from "../../hooks/useCameraZoom";
 import { capitalize, parseRTSPUrl, reverseZoomMapping, zoomMapping } from "../../utils/utils";
+import { useIntegrationsContext } from "../../context/IntegrationsContext";
+import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
+import { toast } from "sonner";

 type CameraSettingsProps = {
  initialData: CameraConfig;
-  updateCameraConfig: (values: CameraSettingValues) => Promise<void> | void;
  zoomLevel?: number;
  onZoomLevelChange?: (level: number | undefined) => void;
-  updateCameraConfigError: null | Error;
 };

-const CameraSettingFields = ({
-  initialData,
-  updateCameraConfig,
-  zoomLevel,
-  onZoomLevelChange,
-}: CameraSettingsProps) => {
-  const [showPwd, setShowPwd] = useState(false);
+const CameraSettingFields = ({ initialData, zoomLevel, onZoomLevelChange }: CameraSettingsProps) => {
  const cameraControllerSide = initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB";
+  const { state, dispatch } = useIntegrationsContext();
  const { mutation, query } = useCameraZoom({ camera: cameraControllerSide });
  const { cameraModeQuery, cameraModeMutation } = useCameraMode({ camera: cameraControllerSide });
  const zoomOptions = [1, 2, 4];
@@ -30,6 +24,8 @@ const CameraSettingFields = ({
  const apiZoom = reverseZoomMapping(magnification);
  const parsed = parseRTSPUrl(initialData?.propURI?.value);
  const cameraMode = cameraModeQuery?.data?.propDayNightMode?.value;
+  const friendlyName = initialData?.id === "CameraA" ? state.cameraAFriendlyName : state.cameraBFriendlyName;
+  const { mutation: blackboardMutation } = useCameraBlackboard();

  useEffect(() => {
    if (!query?.data) return;
@@ -38,7 +34,7 @@ const CameraSettingFields = ({

  const initialValues = useMemo<CameraSettingValues>(
    () => ({
-      friendlyName: initialData?.id ?? "",
+      friendlyName: friendlyName,
      cameraAddress: initialData?.propURI?.value ?? "",
      userName: parsed?.username ?? "",
      password: parsed?.password ?? "",
@@ -47,7 +43,15 @@ const CameraSettingFields = ({
      zoom: apiZoom,
    }),

-    [initialData?.id, initialData?.propURI?.value, parsed?.username, parsed?.password, cameraMode, apiZoom]
+    [
+      friendlyName,
+      initialData?.propURI?.value,
+      initialData?.id,
+      parsed?.username,
+      parsed?.password,
+      cameraMode,
+      apiZoom,
+    ]
  );

  const validateValues = (values: CameraSettingValues) => {
@@ -57,8 +61,17 @@ const CameraSettingFields = ({
    return errors;
  };

-  const handleSubmit = (values: CameraSettingValues) => {
-    updateCameraConfig(values);
+  const handleSubmit = async (values: CameraSettingValues) => {
+    const cameraSide = initialData?.id === "CameraA" ? "UPDATE_FRIENDLYNAMEA" : "UPDATE_FRIENDLYNAMEB";
+    dispatch({ type: cameraSide, payload: values.friendlyName });
+    const result = await blackboardMutation.mutateAsync({
+      operation: "INSERT",
+      path: cameraSide,
+      value: values.friendlyName,
+    });
+    if (result.reason === "OK") {
+      toast.success("Camera settings updated successfully");
+    }
  };

  const handleRadioButtonChange = async (levelNumber: number) => {
@@ -101,54 +114,6 @@ const CameraSettingFields = ({
          </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">{errors.cameraAddress}</small>
-            )}
-            <Field
-              id="cameraAddress"
-              name="cameraAddress"
-              type="text"
-              className="p-2 border border-gray-400 rounded-lg"
-              placeholder="RTSP://..."
-            />
-          </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">{errors.userName}</small>
-            )}
-            <Field
-              id="userName"
-              name="userName"
-              type="text"
-              className="p-2 border border-gray-400 rounded-lg"
-              placeholder="Enter user name"
-              autoComplete="username"
-            />
-          </div>
-
-          <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">{errors.password}</small>
-            )}
-            <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>
            <div className="my-3">
              <CardHeader title="Zoom settings" />
              <div className="mx-auto grid grid-cols-3 place-items-center">
@@ -212,8 +177,12 @@ const CameraSettingFields = ({
            </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
+                  type="submit"
+                  disabled={isSubmitting}
+                  className="bg-green-700 text-white rounded-lg p-2 mx-auto w-full"
+                >
+                  {isSubmitting ? "Saving..." : "Save settings"}
                </button>
              }
            </div>
--- a/src/components/CameraSettings/CameraSettings.tsx
+++ b/src/components/CameraSettings/CameraSettings.tsx
@@ -15,21 +15,13 @@ const CameraSettings = ({
  zoomLevel?: number;
  onZoomLevelChange?: (level: number | undefined) => void;
 }) => {
-  const { data, updateCameraConfig, updateCameraConfigError } = useFetchCameraConfig(side);
+  const { data } = useFetchCameraConfig(side);

  return (
    <Card className="overflow-x-visible min-h-[40vh] md:min-h-[60vh] lg:w-[40%] p-4">
      <div className="relative flex flex-col space-y-3">
        <CardHeader title={title} icon={faWrench} />
-        {
-          <CameraSettingFields
-            initialData={data}
-            updateCameraConfig={updateCameraConfig}
-            zoomLevel={zoomLevel}
-            onZoomLevelChange={onZoomLevelChange}
-            updateCameraConfigError={updateCameraConfigError}
-          />
-        }
+        {<CameraSettingFields initialData={data} zoomLevel={zoomLevel} onZoomLevelChange={onZoomLevelChange} />}
      </div>
    </Card>
  );
--- a/src/components/SessionForm/SessionCard.tsx
+++ b/src/components/SessionForm/SessionCard.tsx
@@ -18,17 +18,17 @@ const SessionCard = () => {

  const sightings = [...new Map(sessionList?.map((vehicle) => [vehicle.vrm, vehicle]))];

-  const dedupedSightings = sightings.map((sighting) => sighting[1]);
+  const dedupedSightings = sightings?.map((sighting) => sighting[1]);

-  const vehicles = dedupedSightings.reduce<Record<string, ReducedSightingType[]>>(
+  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 (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;
--- a/src/components/SettingForms/SettingForms/SettingForms.tsx
+++ b/src/components/SettingForms/SettingForms/SettingForms.tsx
@@ -1,7 +1,7 @@
 import { Form, Formik } from "formik";
 import BearerTypeCard from "../BearerType/BearerTypeCard";
 import ChannelCard from "../Channel1-JSON/ChannelCard";
-import { useCameraOutput, useGetDispatcherConfig } from "../../../hooks/useCameraOutput";
+import { useCameraOutput, useGetDispatcherConfig, useLaneIds } from "../../../hooks/useCameraOutput";
 import type {
  BearerTypeFieldType,
  InitialValuesForm,
@@ -14,25 +14,37 @@ import { useUpdateBackOfficeConfig } from "../../../hooks/useBackOfficeConfig";
 import { useFormVaidate } from "../../../hooks/useFormValidate";
 import { useSightingAmend } from "../../../hooks/useSightingAmend";
 import StoreCard from "../Store/StoreCard";
+import { useEffect } from "react";

 const SettingForms = () => {
  const qc = useQueryClient();
-  const { dispatcherQuery, dispatcherMutation, backOfficeDispatcherMutation, bof2LandMutation, laneIdQuery } =
-    useCameraOutput();
+  const { dispatcherQuery, dispatcherMutation, backOfficeDispatcherMutation } = useCameraOutput();
+  const { laneIdQuery: laneIDAQuery, laneIdMutation: laneIDAMutation } = useLaneIds("A");
+  const { laneIdQuery: laneIDBQuery, laneIdMutation: laneIDBMutation } = useLaneIds("B");
  const { backOfficeMutation } = useUpdateBackOfficeConfig();
  const { bof2ConstantsQuery } = useGetDispatcherConfig();
  const { validateMutation } = useFormVaidate();
-  const { sightingAmendQuery, sightingAmendMutation } = useSightingAmend();
+  const { sightingAmendQuery: sightingAmendAQuery, sightingAmendMutation: sightingAmendMutationA } =
+    useSightingAmend("A");
+  const { sightingAmendMutation: sightingAmendMutationB } = useSightingAmend("B");
+
+  useEffect(() => {
+    async function fetchData() {
+      await Promise.all([laneIDAQuery.refetch(), laneIDBQuery.refetch()]);
+    }
+    fetchData();
+  }, [laneIDAQuery, laneIDBQuery]);

  const format = dispatcherQuery?.data?.propFormat?.value;
  const enabled = dispatcherQuery?.data?.propEnabled?.value;

-  const sightingQuality = sightingAmendQuery?.data?.propOverviewQuality?.value;
-  const cropSizeFactor = sightingAmendQuery?.data?.propOverviewImageScaleFactor?.value;
+  const sightingQualityA = sightingAmendAQuery?.data?.propOverviewQuality?.value;
+  const cropSizeFactorA = sightingAmendAQuery?.data?.propOverviewImageScaleFactor?.value;

-  const laneID = laneIdQuery?.data?.id;
-  const LID1 = laneIdQuery?.data?.propLaneID1?.value;
-  const LID2 = laneIdQuery?.data?.propLaneID2?.value;
+  const laneIDA = laneIDAQuery?.data?.id;
+
+  const LID1 = laneIDAQuery?.data?.propLaneID1?.value;
+  const LID2 = laneIDBQuery?.data?.propLaneID1?.value;

  const FFID = bof2ConstantsQuery?.data?.propFeedIdentifier?.value;
  const SCID = bof2ConstantsQuery?.data?.propSourceIdentifier?.value;
@@ -50,8 +62,8 @@ const SettingForms = () => {
    password: "",
    connectTimeoutSeconds: Number(5),
    readTimeoutSeconds: Number(15),
-    overviewQuality: sightingQuality ?? "HIGH",
-    cropSizeFactor: cropSizeFactor ?? "3/4",
+    overviewQuality: sightingQualityA ?? "HIGH",
+    cropSizeFactor: cropSizeFactorA ?? "3/4",

    // Bof2 - optional constants
    FFID: FFID ?? "",
@@ -60,7 +72,7 @@ const SettingForms = () => {
    GPSFormat: GPSFormat ?? "",

    //BOF2 - optional Lane IDs
-    laneId: laneID ?? "",
+    laneId: laneIDA ?? "",
    LID1: LID1 ?? "",
    LID2: LID2 ?? "",
  };
@@ -101,7 +113,8 @@ const SettingForms = () => {

      if (validResponse?.reason === "OK") {
        await backOfficeMutation.mutateAsync(values);
-        await sightingAmendMutation.mutateAsync(values);
+        await sightingAmendMutationA.mutateAsync(values);
+        await sightingAmendMutationB.mutateAsync(values);

        if (values.format.toLowerCase() === "bof2") {
          const bof2ConstantsData: OptionalBOF2Constants = {
@@ -111,12 +124,17 @@ const SettingForms = () => {
            GPSFormat: values.GPSFormat,
          };

-          const bof2LaneData: OptionalBOF2LaneIDs = {
-            laneId: laneIdQuery?.data?.id,
+          const bof2LaneAData: OptionalBOF2LaneIDs = {
+            laneId: laneIDAQuery?.data?.id,
            LID1: values.LID1,
-            LID2: values.LID2,
          };
-          await bof2LandMutation.mutateAsync(bof2LaneData);
+          const bof2LaneBData: OptionalBOF2LaneIDs = {
+            laneId: laneIDBQuery?.data?.id,
+            LID1: values.LID2,
+          };
+
+          await laneIDAMutation.mutateAsync(bof2LaneAData);
+          await laneIDBMutation.mutateAsync(bof2LaneBData);
          await backOfficeDispatcherMutation.mutateAsync(bof2ConstantsData);
        }
      } else {
--- a/src/components/SettingForms/Store/StoreFields.tsx
+++ b/src/components/SettingForms/Store/StoreFields.tsx
@@ -10,17 +10,35 @@ const StoreFields = () => {
  const totalReceived = storeQuery?.data?.totalReceived;
  const totalLost = storeQuery?.data?.totalLost;

+  const clampedTotalPending = totalPending !== undefined ? Math.max(0, totalPending) : 0;
+  const clampedTotalActive = totalActive !== undefined ? Math.max(0, totalActive) : 0;
+  const clampedTotalSent = totalSent !== undefined ? Math.max(0, totalSent) : 0;
+  const clampedTotalReceived = totalReceived !== undefined ? Math.max(0, totalReceived) : 0;
+  const clampedTotalLost = totalLost !== undefined ? Math.max(0, totalLost) : 0;
+
  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:"} />
+        <VehicleSessionItem
+          sessionNumber={clampedTotalActive}
+          textColour="text-gray-400"
+          vehicleTag={"Total Active:"}
+        />
+        <VehicleSessionItem sessionNumber={clampedTotalSent} textColour="text-blue-400" vehicleTag={"Total Sent:"} />
+        <VehicleSessionItem
+          sessionNumber={clampedTotalReceived}
+          textColour="text-green-400"
+          vehicleTag={"Total Received:"}
+        />
+        <VehicleSessionItem
+          sessionNumber={clampedTotalPending}
+          textColour="text-amber-400"
+          vehicleTag={"Total Pending:"}
+        />
+        <VehicleSessionItem sessionNumber={clampedTotalLost} textColour="text-red-400" vehicleTag={"Total Lost:"} />
      </ul>
    </div>
  );
--- a/src/components/SettingForms/System/SystemConfigFields.tsx
+++ b/src/components/SettingForms/System/SystemConfigFields.tsx
@@ -8,6 +8,7 @@ import { useDNSSettings, useSystemConfig } from "../../../hooks/useSystemConfig"
 import { ValidateIPaddress, isUtcOutOfSync } from "../../../utils/utils";
 import { toast } from "sonner";
 import { useSystemStatus } from "../../../hooks/useSystemStatus";
+import ResetUserSettings from "./resetUserSettings/ResetUserSettings";

 const SystemConfigFields = () => {
  const { saveSystemSettings, systemSettingsData, saveSystemSettingsLoading } = useSystemConfig();
@@ -27,6 +28,7 @@ const SystemConfigFields = () => {
    localdate: localDate,
    localtime: localTime,
  });
+  const syncTime = new Date(systemStatusQuery?.data?.SystemStatus?.synctime * 1000).toLocaleString();

  const sntpInterval = systemSettingsData?.sntpInterval;
  const dnsPrimary = dnsQuery?.data?.propNameServerPrimary?.value;
@@ -84,13 +86,6 @@ const SystemConfigFields = () => {
    >
      {({ values, errors, touched, isSubmitting }) => (
        <Form className="flex flex-col space-y-5 px-2">
-          <div>
-            {utcOutOfSync?.outOfSync ? (
-              <span className="text-red-800 bg-red-300 border border-red-800 rounded-lg p-2">UTC is out of sync</span>
-            ) : (
-              <span className="text-green-300 bg-green-800 border border-green-600 rounded-lg p-2">UTC is in sync</span>
-            )}
-          </div>
          <FormGroup>
            <label htmlFor="deviceName" className="font-medium whitespace-nowrap md:w-1/2 text-left">
              Device Name
@@ -189,6 +184,14 @@ const SystemConfigFields = () => {
              autoComplete="off"
            />
          </FormGroup>
+          <div className="flex flex-col gap-2 w-70">
+            {utcOutOfSync?.outOfSync ? (
+              <span className="text-red-800 bg-red-300 border border-red-800 rounded-lg p-2 ">UTC is out of sync</span>
+            ) : (
+              <span className="text-green-300 bg-green-800 border border-green-600 rounded-lg p-2">UTC is in sync</span>
+            )}
+            <p className="mt-2">Last Sync Time: {syncTime}</p>
+          </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"
@@ -215,6 +218,7 @@ const SystemConfigFields = () => {
          >
            {hardRebootMutation.isPending || isSubmitting ? "Rebooting" : "Hardware Reboot"}
          </button>
+          <ResetUserSettings />
        </Form>
      )}
    </Formik>
--- a/src/components/SettingForms/System/resetUserSettings/ResetUserSettings.tsx
+++ b/src/components/SettingForms/System/resetUserSettings/ResetUserSettings.tsx
@@ -0,0 +1,26 @@
+import { useState } from "react";
+import ResetUserSettingsModal from "./ResetUserSettingsModal";
+
+const ResetUserSettings = () => {
+  const [isUserSettingsModalOpen, setIsUserSettingsModalOpen] = useState(false);
+  const handleResetButtonClick = () => {
+    setIsUserSettingsModalOpen(true);
+  };
+  return (
+    <>
+      <button
+        type="button"
+        onClick={handleResetButtonClick}
+        className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full md:w-[50%]"
+      >
+        Reset user settings
+      </button>
+      <ResetUserSettingsModal
+        isUserSettingsModalOpen={isUserSettingsModalOpen}
+        setIsUserSettingsModalOpen={setIsUserSettingsModalOpen}
+      />
+    </>
+  );
+};
+
+export default ResetUserSettings;
--- a/src/components/SettingForms/System/resetUserSettings/ResetUserSettingsModal.tsx
+++ b/src/components/SettingForms/System/resetUserSettings/ResetUserSettingsModal.tsx
@@ -0,0 +1,68 @@
+import { useSoundContext } from "../../../../context/SoundContext";
+import { useCameraBlackboard } from "../../../../hooks/useCameraBlackboard";
+import ModalComponent from "../../../UI/ModalComponent";
+
+type ResetUserSettingsModalProps = {
+  isUserSettingsModalOpen: boolean;
+  setIsUserSettingsModalOpen: (isOpen: boolean) => void;
+};
+
+const ResetUserSettingsModal = ({
+  isUserSettingsModalOpen,
+  setIsUserSettingsModalOpen,
+}: ResetUserSettingsModalProps) => {
+  const { state, dispatch } = useSoundContext();
+  const { mutation } = useCameraBlackboard();
+  const handleClose = () => {
+    setIsUserSettingsModalOpen(false);
+  };
+
+  const handleResetAll = async () => {
+    // Logic to reset all user settings goes here
+    dispatch({ type: "RESET" });
+
+    await mutation.mutateAsync({
+      operation: "INSERT",
+      path: "soundSettings",
+      value: state,
+    });
+
+    handleClose();
+  };
+  return (
+    <ModalComponent isModalOpen={isUserSettingsModalOpen} close={handleClose}>
+      <div className="p-4">
+        <h2 className="text-xl font-bold mb-4">Reset All User Settings</h2>
+        <p className="mb-4">Are you sure you want to reset all user settings to their default values?</p>
+        <p> This action cannot be undone.</p>
+        <div className="my-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">
+            This will <span className="font-bold">RESET ALL</span> user settings including{" "}
+            <span className="text-blue-400">Uploaded user sounds</span> ,
+            <span className="text-emerald-400"> Hotlist Sound hits</span> and{" "}
+            <span className="text-amber-600">NPED Sound hits</span>.
+            {/* It will also reset any customized settings within
+            the app to their original defaults and Clear out the session data and{" "}
+            <span className="text-rose-400">alert history sightings.</span> */}
+          </p>
+        </div>
+        <div className="flex justify-end gap-4">
+          <button
+            onClick={handleResetAll}
+            className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 hover:cursor-pointer"
+          >
+            Reset
+          </button>
+          <button
+            onClick={handleClose}
+            className="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700 hover:cursor-pointer  "
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </ModalComponent>
+  );
+};
+
+export default ResetUserSettingsModal;
--- a/src/components/SightingsWidget/SightingWidget.tsx
+++ b/src/components/SightingsWidget/SightingWidget.tsx
@@ -198,6 +198,7 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
    setSightingModalOpen(false);
    setModalQueue((q) => q.slice(1));
  };
+
  return (
    <>
      <Card className={clsx("overflow-y-auto min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[40%] p-4", className)}>
@@ -225,8 +226,13 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
                  onClick={() => onRowClick(obj)}
                >
                  <div className={`flex items-center gap-3 mt-2 justify-between `}>
-                    <div className={`border p-1 `}>
-                      <img src={obj?.plateUrlColour || BLANK_IMG} height={48} width={200} alt="colour patch" />
+                    <div className={`hidden md:block border p-1 `}>
+                      <img
+                        src={obj?.plateUrlColour || BLANK_IMG}
+                        className="hidden md:block w-[200px] h-[48px]"
+                        style={{ objectFit: "cover" }}
+                        alt="colour patch"
+                      />
                    </div>
                    {isHotListHit && (
                      <img src={HotListImg} alt="hotlistHit" className="h-20 object-contain rounded-md" />
--- a/src/components/UI/ModalComponent.tsx
+++ b/src/components/UI/ModalComponent.tsx
@@ -1,5 +1,6 @@
 import type React from "react";
 import Modal from "react-modal";
+import clsx from "clsx";

 type ModalComponentProps = {
  isModalOpen: boolean;
@@ -12,7 +13,9 @@ const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) =
    <Modal
      isOpen={isModalOpen}
      onRequestClose={close}
-      className="bg-[#1e2a38] p-3 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[60%] h-[100%] md:h-[95%] lg:h-[80%] z-[100] overflow-y-hidden border border-gray-500"
+      className={clsx(
+        "bg-[#1e2a38] p-3 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[65%] h-[100%] md:h-[98%] lg:h-[80%] z-[100] overflow-y-hidden border border-gray-500"
+      )}
      overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100 "
      style={{
        overlay: {
--- a/src/context/WebsocketContext.ts
+++ b/src/context/WebsocketContext.ts
@@ -1,33 +0,0 @@
-import { createContext, useContext } from "react";
-import type { InfoBarData } from "../types/types";
-import { ReadyState } from "react-use-websocket";
-
-type InfoSocketState = {
-  data: InfoBarData | null;
-  readyState: ReadyState;
-  sendJson: (msg: unknown) => void;
-  send?: (msg: string) => void;
-};
-
-type heatmapSocketState = {
-  data: null;
-  readyState: ReadyState;
-  sendJson: (msg: unknown) => void;
-  send?: (msg: string) => void;
-};
-
-export type WebsocketContextValue = {
-  info: InfoSocketState;
-  heatmap?: heatmapSocketState;
-};
-
-export const WebsocketContext = createContext<WebsocketContextValue | null>(null);
-
-const useWebSocketContext = () => {
-  const ctx = useContext(WebsocketContext);
-  if (!ctx) throw new Error("useWebSocketContext must be used inside <WebSocketConext.Provider>");
-  return ctx;
-};
-
-export const useInfoBarSocket = () => useWebSocketContext().info;
-export const useHeatmapSocket = () => useWebSocketContext().heatmap;
--- a/src/context/providers/IntegrationsContextProvider.tsx
+++ b/src/context/providers/IntegrationsContextProvider.tsx
@@ -68,6 +68,30 @@ export const IntegrationsProvider = ({ children }: IntegrationsProviderType) =>
    fetchHotlistData();
  }, [query?.data]);

+  useEffect(() => {
+    async function fetchCameraNames() {
+      const cameraAResult = await mutation.mutateAsync({
+        operation: "VIEW",
+        path: "UPDATE_FRIENDLYNAMEA",
+      });
+
+      const cameraBResult = await mutation.mutateAsync({
+        operation: "VIEW",
+        path: "UPDATE_FRIENDLYNAMEB",
+      });
+
+      if (cameraAResult?.result && typeof cameraAResult.result === "string") {
+        console.log(cameraAResult?.result);
+        dispatch({ type: "UPDATE_FRIENDLYNAMEA", payload: cameraAResult.result });
+      }
+      if (cameraBResult?.result && typeof cameraBResult.result === "string") {
+        console.log(cameraBResult?.result);
+        dispatch({ type: "UPDATE_FRIENDLYNAMEB", payload: cameraBResult.result });
+      }
+    }
+    fetchCameraNames();
+  }, []);
+
  return (
    <IntegrationsContext.Provider
      value={{
--- a/src/context/providers/WebSocketProvider.tsx
+++ b/src/context/providers/WebSocketProvider.tsx
@@ -1,40 +0,0 @@
-import { useEffect, useMemo, useState, type ReactNode } from "react";
-import type { InfoBarData } from "../../types/types";
-import useWebSocket from "react-use-websocket";
-import { ws_config } from "../../utils/ws_config";
-import { WebsocketContext, type WebsocketContextValue } from "../WebsocketContext";
-
-type WebSocketProviderProps = {
-  children: ReactNode;
-};
-
-const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
-  const [systemData, setSystemData] = useState<InfoBarData | null>(null);
-
-  const infoSocket = useWebSocket(ws_config.infoBar, { share: true, shouldReconnect: () => true });
-
-  useEffect(() => {
-    async function parseData() {
-      if (infoSocket.lastMessage) {
-        const text = await infoSocket.lastMessage.data.text();
-        const data = JSON.parse(text);
-        setSystemData(data);
-      }
-    }
-    parseData();
-  }, [infoSocket.lastMessage]);
-
-  const value = useMemo<WebsocketContextValue>(
-    () => ({
-      info: {
-        data: systemData,
-        readyState: infoSocket.readyState,
-        sendJson: infoSocket.sendJsonMessage,
-      },
-    }),
-    [systemData, infoSocket.readyState, infoSocket.sendJsonMessage]
-  );
-  return <WebsocketContext.Provider value={value}>{children}</WebsocketContext.Provider>;
-};
-
-export default WebSocketProvider;
--- a/src/context/reducers/IntegrationsContextReducer.ts
+++ b/src/context/reducers/IntegrationsContextReducer.ts
@@ -13,6 +13,8 @@ export const initialState = {
    catD: false,
  },
  hotlistFiles: [],
+  cameraAFriendlyName: "Camera A",
+  cameraBFriendlyName: "Camera B",
 };

 export function reducer(state: NPEDSTATE, action: NPEDACTION) {
@@ -68,6 +70,18 @@ export function reducer(state: NPEDSTATE, action: NPEDACTION) {
        ...state,
        hotlistFiles: state.hotlistFiles.filter((hotlist) => hotlist.filename !== action.payload),
      };
+
+    case "UPDATE_FRIENDLYNAMEA":
+      return {
+        ...state,
+        cameraAFriendlyName: action.payload,
+      };
+
+    case "UPDATE_FRIENDLYNAMEB":
+      return {
+        ...state,
+        cameraBFriendlyName: action.payload,
+      };
    default:
      return { ...state };
  }
--- a/src/context/reducers/SoundContextReducer.ts
+++ b/src/context/reducers/SoundContextReducer.ts
@@ -69,6 +69,8 @@ export function reducer(state: SoundState, action: SoundAction): SoundState {
        ...state,
        uploadedSound: action.payload,
      };
+    case "RESET":
+      return initialState;
    default:
      return state;
  }
--- a/src/hooks/useCameraConfig.ts
+++ b/src/hooks/useCameraConfig.ts
@@ -31,7 +31,7 @@ const updateCamerasideConfig = async (data: { id: string | number; friendlyName:
    method: "POST",
    body: JSON.stringify(updateConfigPayload),
  });
-  if (!response.ok) throw new Error("Please make sure fields are filled in correctly");
+  if (!response.ok) throw new Error("Cannot update settings");
 };

 export const useFetchCameraConfig = (cameraSide: string) => {
--- a/src/hooks/useCameraOutput.ts
+++ b/src/hooks/useCameraOutput.ts
@@ -78,7 +78,11 @@ const updateBOF2LaneId = async (data: OptionalBOF2LaneIDs) => {
      },
      {
        property: "propLaneID2",
-        value: data?.LID2,
+        value: data?.LID1,
+      },
+      {
+        property: "propLaneID3",
+        value: data?.LID1,
      },
    ],
  };
@@ -91,8 +95,8 @@ const updateBOF2LaneId = async (data: OptionalBOF2LaneIDs) => {
  return response.json();
 };

-const getBOF2LaneId = async () => {
-  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=SightingAmmendA-lane-ids`);
+const getBOF2LaneId = async (cameraID: string) => {
+  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=SightingAmmend${cameraID}-lane-ids`);
  if (!response.ok) throw new Error("Canot get Lane Ids");
  return response.json();
 };
@@ -124,16 +128,6 @@ export const useCameraOutput = () => {
    },
  });

-  const bof2LandMutation = useMutation({
-    mutationKey: ["updateBOF2LaneId"],
-    mutationFn: updateBOF2LaneId,
-  });
-
-  const laneIdQuery = useQuery({
-    queryKey: ["getBOF2LaneId"],
-    queryFn: getBOF2LaneId,
-  });
-
  useEffect(() => {
    if (dispatcherQuery.isError) toast.error(dispatcherQuery.error.message);
  }, [dispatcherQuery?.error?.message, dispatcherQuery.isError]);
@@ -142,8 +136,6 @@ export const useCameraOutput = () => {
    dispatcherQuery,
    dispatcherMutation,
    backOfficeDispatcherMutation,
-    bof2LandMutation,
-    laneIdQuery,
  };
 };

@@ -155,3 +147,17 @@ export const useGetDispatcherConfig = () => {

  return { bof2ConstantsQuery };
 };
+
+export const useLaneIds = (cameraID: string) => {
+  const laneIdQuery = useQuery({
+    queryKey: ["getBOF2LaneId", cameraID],
+    queryFn: () => getBOF2LaneId(cameraID),
+  });
+
+  const laneIdMutation = useMutation({
+    mutationKey: ["updateBOF2LaneId", cameraID],
+    mutationFn: (data: OptionalBOF2LaneIDs) => updateBOF2LaneId(data),
+  });
+
+  return { laneIdQuery, laneIdMutation };
+};
--- a/src/hooks/useSightingAmend.ts
+++ b/src/hooks/useSightingAmend.ts
@@ -2,15 +2,15 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { CAM_BASE } from "../utils/config";
 import type { InitialValuesForm } from "../types/types";

-const getSightingAmend = async () => {
-  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=SightingAmmendA`);
+const getSightingAmend = async (cameraId: string) => {
+  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=SightingAmmend${cameraId}`);
  if (!response.ok) throw new Error("Cannot reach sighting amend endpoint");
  return response.json();
 };

-const updateSightingAmend = async (data: InitialValuesForm) => {
+const updateSightingAmend = async (data: InitialValuesForm, cameraID: string) => {
  const updateSightingAmendPayload = {
-    id: "SightingAmmendA",
+    id: `SightingAmmend${cameraID}`,
    fields: [
      {
        property: "propOverviewQuality",
@@ -30,15 +30,15 @@ const updateSightingAmend = async (data: InitialValuesForm) => {
  return response.json();
 };

-export const useSightingAmend = () => {
+export const useSightingAmend = (cameraID: string) => {
  const sightingAmendQuery = useQuery({
    queryKey: ["getSightingAmend"],
-    queryFn: getSightingAmend,
+    queryFn: () => getSightingAmend(cameraID),
  });

  const sightingAmendMutation = useMutation({
-    mutationKey: ["updateSightingAmend"],
-    mutationFn: updateSightingAmend,
+    mutationKey: ["updateSightingAmend", cameraID],
+    mutationFn: (data: InitialValuesForm) => updateSightingAmend(data, cameraID),
  });

  return {
--- a/src/pages/FrontCamera.tsx
+++ b/src/pages/FrontCamera.tsx
@@ -2,19 +2,28 @@ import { useState } from "react";
 import CameraSettings from "../components/CameraSettings/CameraSettings";
 import OverviewVideoContainer from "../components/FrontCameraSettings/OverviewVideoContainer";
 import { Toaster } from "sonner";
+import { useIntegrationsContext } from "../context/IntegrationsContext";

 const FrontCamera = () => {
  const [zoomLevel, setZoomLevel] = useState<number | undefined>(1);
+  const { state } = useIntegrationsContext();
+
+  const friendlyName = state.cameraAFriendlyName || "Camera A";
  return (
    <div className="mx-auto flex flex-col lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">
      <OverviewVideoContainer
-        title={"Camera A"}
+        title={friendlyName}
        side="CameraA"
        settingsPage={true}
        zoomLevel={zoomLevel}
        onZoomLevelChange={setZoomLevel}
      />
-      <CameraSettings title="Camera A Settings" side="CameraA" zoomLevel={zoomLevel} onZoomLevelChange={setZoomLevel} />
+      <CameraSettings
+        title={friendlyName + " Settings"}
+        side="CameraA"
+        zoomLevel={zoomLevel}
+        onZoomLevelChange={setZoomLevel}
+      />
      <Toaster />
    </div>
  );
--- a/src/pages/RearCamera.tsx
+++ b/src/pages/RearCamera.tsx
@@ -2,13 +2,16 @@ import OverviewVideoContainer from "../components/FrontCameraSettings/OverviewVi
 import CameraSettings from "../components/CameraSettings/CameraSettings";
 import { Toaster } from "sonner";
 import { useState } from "react";
+import { useIntegrationsContext } from "../context/IntegrationsContext";

 const RearCamera = () => {
  const [zoomLevel, setZoomLevel] = useState<number | undefined>(1);
+  const { state } = useIntegrationsContext();
+  const friendlyName = state.cameraBFriendlyName || "Camera B";
  return (
    <div className="mx-auto flex flex-col-reverse lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">
      <CameraSettings
-        title="Camera B Settings"
+        title={friendlyName + " Settings"}
        side={"CameraB"}
        zoomLevel={zoomLevel}
        onZoomLevelChange={setZoomLevel}
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -363,7 +363,11 @@ type UploadedState = {
  payload: Blob | undefined;
 };

-export type SoundAction = UpdateAction | AddAction | VolumeAction | UploadedState;
+type ResetAction = {
+  type: "RESET";
+};
+
+export type SoundAction = UpdateAction | AddAction | VolumeAction | UploadedState | ResetAction;
 export type WifiSettingValues = {
  ssid: string;
  password: string;
@@ -431,6 +435,8 @@ export type NPEDSTATE = {
  npedUser: NPEDUser;
  iscatEnabled: CategoryPopups;
  hotlistFiles: HotlistFile[];
+  cameraAFriendlyName: string;
+  cameraBFriendlyName: string;
 };

 export type NPEDACTION = {
Author	SHA1	Message	Date
Toba Ojo	cbfce837a3	- bumped version to 1.0.28 - bugfix Clamped numbers for sighting store	2026-01-14 12:23:16 +00:00
Toba Ojo	7016fdf632	- attempted fix on NPED Category	2026-01-13 15:29:04 +00:00
Toba Ojo	2066552bdc	- updated camera friendly names and improve camera settings functionality - bugfixes for plate sizing	2026-01-12 12:13:56 +00:00
TobaOjo	d4271d488e	Merge pull request 'develop' (#24 ) from develop into main Reviewed-on: #24	2026-01-07 10:08:55 +00:00
TobaOjo	104c53c127	Merge pull request 'feature/userReset' (#23 ) from feature/userReset into develop Reviewed-on: #23	2026-01-07 09:52:42 +00:00
Toba Ojo	bec28b91e1	add ResetUserSettings component and integrate it into SystemConfigFields	2026-01-07 09:52:01 +00:00
Toba Ojo	71e23c7d45	- removed console.log	2026-01-07 09:41:19 +00:00
Toba Ojo	f9188bb46f	- implement user settings reset functionality with modal confirmation and bug fixes regarding lane IDs to sighting endpoints	2026-01-07 09:39:46 +00:00
TobaOjo	f046ae6dfc	Merge pull request 'develop' (#22 ) from develop into main Reviewed-on: #22	2026-01-06 12:37:48 +00:00