- bumped version to 1.0.28

- bugfix Clamped numbers for sighting store

package.json

@@ -1,7 +1,7 @@
 {
   "name": "in-car-system-fe",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.28",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -31,12 +31,14 @@
     "react-swipeable": "^7.0.2",
     "react-tabs": "^6.1.0",
     "react-use": "^17.6.0",
+    "react-use-websocket": "^4.13.0",
     "sonner": "^2.0.7",
     "tailwindcss": "^4.1.11",
     "use-debounce": "^10.0.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.32.0",
+    "@types/node": "^25.0.1",
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
     "@types/react-modal": "^3.16.3",

src/components/CameraSettings/CameraSettingFields.tsx

@@ -1,29 +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 { parseRTSPUrl, reverseZoomMapping, zoomMapping } from "../../utils/utils";
+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];
@@ -31,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;
@@ -39,16 +34,24 @@ const CameraSettingFields = ({
 
   const initialValues = useMemo<CameraSettingValues>(
     () => ({
-      friendlyName: initialData?.id ?? "",
+      friendlyName: friendlyName,
       cameraAddress: initialData?.propURI?.value ?? "",
       userName: parsed?.username ?? "",
       password: parsed?.password ?? "",
       id: initialData?.id,
-      mode: cameraMode ?? "day",
+      mode: cameraMode ?? "",
       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) => {
@@ -58,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) => {
@@ -102,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">
@@ -181,9 +145,9 @@ const CameraSettingFields = ({
               <div
                 role="radiogroup"
                 aria-label="Camera mode"
-                className="mx-auto grid grid-cols-2 place-items-center gap-3"
+                className="mx-auto grid grid-cols-3 place-items-center gap-3"
               >
-                {["day", "night"].map((el) => (
+                {["day", "night", "auto"].map((el) => (
                   <div key={el} className="my-3">
                     <Field
                       type="radio"
@@ -205,7 +169,7 @@ const CameraSettingFields = ({
                 peer-checked:text-blue-600 peer-checked:bg-gray-100
                 ${cameraModeMutation.isPending ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`}
                     >
-                      {el === "day" ? "Day" : "Night"}
+                      {capitalize(el)}
                     </label>
                   </div>
                 ))}
@@ -213,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>

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>
   );

src/components/HistoryList/AlertItem.tsx

@@ -8,6 +8,7 @@ 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 NPED_CAT_D from "/NPED_Cat_D.svg";
 import { checkIsHotListHit, formatAge, getNPEDCategory } from "../../utils/utils";
 import { faX } from "@fortawesome/free-solid-svg-icons";
 import { faClock } from "@fortawesome/free-regular-svg-icons";
@@ -30,6 +31,7 @@ const AlertItem = ({ item }: AlertItemProps) => {
   const isNPEDHitA = cat === "A";
   const isNPEDHitB = cat === "B";
   const isNPEDHitC = cat === "C";
+  const isNPEDHitD = cat === "D";
 
   const handleClick = () => {
     setIsModalOpen(true);
@@ -69,6 +71,7 @@ const AlertItem = ({ item }: AlertItemProps) => {
           {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" />}
+          {isNPEDHitD && <img src={NPED_CAT_D} 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>

src/components/HistoryList/HistoryList.tsx

@@ -31,9 +31,7 @@ const HistoryList = () => {
       <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} />
-            ))}
+            {state?.alertList?.map((alertItem) => <AlertItem item={alertItem} key={alertItem.vrm} />).reverse()}
           </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">

src/components/HotlistList/HotlistList.tsx

@@ -0,0 +1,67 @@
+import { useHotlistData } from "../../hooks/useHotListData";
+import { useIntegrationsContext } from "../../context/IntegrationsContext";
+import Card from "../UI/Card";
+import CardHeader from "../UI/CardHeader";
+import { toast } from "sonner";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const HotlistList = () => {
+  const { state, dispatch } = useIntegrationsContext();
+  const { mutation } = useHotlistData();
+
+  const hotlists = state?.hotlistFiles;
+
+  const handleDeleteClick = async (filename: string) => {
+    await mutation.mutateAsync(filename);
+    dispatch({ type: "DELETEHOTLIST", payload: filename });
+    toast.success(`${filename} successfully deleted`);
+  };
+
+  return (
+    <Card className="p-4">
+      <CardHeader title="Uploaded hotlists" />
+      {hotlists?.length > 0 ? (
+        <ul className="px-2">
+          {hotlists?.map((hotlist) => (
+            <li
+              key={hotlist.filename}
+              className="flex flex-row justify-between my-3 items-center border-b border-gray-700"
+            >
+              <div>
+                <p className="text-xl">{hotlist.filename}</p>
+                <div className="flex flex-row gap-3">
+                  <div>
+                    <p className="text-gray-400">
+                      Number of records: <span>{hotlist.rowCount}</span>
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-gray-400">
+                      File Size (bytes): <span>{hotlist.fileSizeBytes}</span>
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <button onClick={() => handleDeleteClick(hotlist.filename)}>
+                <FontAwesomeIcon icon={faTrash} />
+              </button>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <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 Uploaded Hotlists
+          </div>
+          <p className="max-w-md text-slate-300">
+            <span className="text-emerald-400">Hotlists</span> will appear here once there are uploaded.
+          </p>
+        </div>
+      )}
+    </Card>
+  );
+};
+
+export default HotlistList;

src/components/PopupSettings/NPEDCategoryPopup.tsx

@@ -6,9 +6,11 @@ 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;
@@ -24,11 +26,18 @@ const NPEDCategoryPopup = () => {
   };
 
   const handleSubmit = async (values: CategoryPopups) => {
-    await mutation.mutateAsync({
+    const result = await mutation.mutateAsync({
       operation: "INSERT",
       value: values,
       path: "CategoryPopup",
     });
+
+    await mutation.mutateAsync({
+      operation: "SAVE",
+      path: "",
+      value: null,
+    });
+    if (result?.reason === "OK") toast.success("Pop up settings saved");
     dispatch({ type: "NPEDCATENABLED", payload: values });
   };
 
@@ -36,7 +45,7 @@ const NPEDCategoryPopup = () => {
     <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}>
+      <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
         <Form className="flex flex-col space-y-5 px-2">
           <FormGroup>
             <NPEDCatToggle name={"catA"} label="NPED Category A" />

src/components/SessionForm/SessionCard.tsx

@@ -4,7 +4,7 @@ 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 { faFloppyDisk, faPause, faPlay, faStop, faArrowRotateRight } from "@fortawesome/free-solid-svg-icons";
 import VehicleSessionItem from "../UI/VehicleSessionItem";
 import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
 
@@ -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;
@@ -62,10 +62,29 @@ const SessionCard = () => {
       path: "sessionStats",
       value: dedupedSightings,
     });
-
+    await mutation.mutateAsync({
+      operation: "SAVE",
+      path: "",
+      value: null,
+    });
     if (result.reason === "OK") toast.success("Session saved");
   };
 
+  const handleRestartClick = async () => {
+    const result = await mutation.mutateAsync({
+      operation: "INSERT",
+      path: "sessionStats",
+      value: [],
+    });
+    await mutation.mutateAsync({
+      operation: "SAVE",
+      path: "",
+      value: null,
+    });
+    if (result.reason === "OK") toast.success("Session restarted");
+    dispatch({ type: "SESSIONRESTART", payload: [] });
+  };
+
   return (
     <Card className="p-4 col-span-3">
       <CardHeader title="Session" />
@@ -81,6 +100,17 @@ const SessionCard = () => {
             <p>{sessionStarted ? "End Session" : "Start Session"}</p>
           </div>
         </button>
+        {sessionStarted && (
+          <button
+            className={`bg-none text-white px-4 py-2 rounded transition w-full border border-gray-500 hover:bg-gray-500 hover:text-gray-900`}
+            onClick={handleRestartClick}
+          >
+            <div className="flex flex-row gap-3 items-center justify-self-center">
+              <FontAwesomeIcon icon={faArrowRotateRight} />
+              <p>Restart Session</p>
+            </div>
+          </button>
+        )}
         <div className="flex flex-col lg:flex-row gap-5">
           {sessionStarted && (
             <button
@@ -142,6 +172,11 @@ const SessionCard = () => {
             textColour="text-gray-300"
             vehicleTag={"Vehicles with NPED Cat C:"}
           />
+          <VehicleSessionItem
+            sessionNumber={vehicles.npedCatD.length}
+            textColour="text-gray-300"
+            vehicleTag={"Vehicles with NPED Cat D:"}
+          />
         </ul>
       </div>
     </Card>

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

@@ -183,7 +183,7 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) =>
                       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>
+                      <option value={"LOCAL"}>Local</option>
                     </Field>
                   </FormGroup>
                   <FormGroup>
@@ -234,7 +234,7 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) =>
 
           <button
             type="submit"
-            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
           >
             {isSubmitting ? "Saving..." : "Save Changes"}
           </button>

src/components/SettingForms/NPED/NPEDCard.tsx

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

src/components/SettingForms/NPED/NPEDFields.tsx

@@ -102,14 +102,14 @@ const NPEDFields = () => {
           {!state.npedUser?.propClientID?.value ? (
             <button
               type="submit"
-              className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
+              className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
             >
               {isSubmitting ? "Logging in..." : "Login"}
             </button>
           ) : (
             <button
               type="button"
-              className="w-1/4  border-red-700 bg-red-800 text-white font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
+              className="w-full md:w-1/4  border-red-700 bg-red-800 text-white font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
               onClick={handleLogoutClick}
             >
               Logout

src/components/SettingForms/NPED/NPEDHotlist.tsx

@@ -5,6 +5,7 @@ import { CAM_BASE } from "../../../utils/config";
 
 const NPEDHotlist = () => {
   const { uploadSettings } = useSystemConfig();
+
   const initialValue = {
     file: null,
   };
@@ -47,7 +48,7 @@ const NPEDHotlist = () => {
             />
             <button
               type="submit"
-              className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+              className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
               // disabled={errors ? true : false}
             >
               Upload

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 {

src/components/SettingForms/Sound/SoundSettingsFields.tsx

@@ -39,6 +39,11 @@ const SoundSettingsFields = () => {
       path: "soundSettings",
       value: updatedValues,
     });
+    await mutation.mutateAsync({
+      operation: "SAVE",
+      path: "",
+      value: null,
+    });
     if (result.reason !== "OK") {
       toast.error("Cannot update sound settings");
     } else {
@@ -139,7 +144,7 @@ const SoundSettingsFields = () => {
           </div>
           <button
             type="submit"
-            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
           >
             Save Settings
           </button>

src/components/SettingForms/Sound/SoundUpload.tsx

@@ -5,13 +5,13 @@ import { useSoundContext } from "../../../context/SoundContext";
 import { toast } from "sonner";
 import { useCameraBlackboard } from "../../../hooks/useCameraBlackboard";
 import { useFileUpload } from "../../../hooks/useFileUpload";
+import { useEffect, useRef } from "react";
 
 const SoundUpload = () => {
   const { state, dispatch } = useSoundContext();
   const { mutation } = useCameraBlackboard();
-  const { mutation: fileMutation } = useFileUpload({
-    queryKey: state.sightingSound ? [state.sightingSound] : undefined,
-  });
+  const currentUrlRef = useRef<string | null>(null);
+  const { mutation: fileMutation } = useFileUpload();
 
   const initialValues: SoundUploadValue = {
     name: "",
@@ -43,13 +43,29 @@ const SoundUpload = () => {
       value: updatedValues,
     });
     await fileMutation.mutateAsync(values.soundFile);
+    if (currentUrlRef.current) {
+      URL.revokeObjectURL(currentUrlRef.current);
+      currentUrlRef.current = null;
+    }
     if (result.reason !== "OK") {
       toast.error("Cannot update sound settings");
     }
-
+    await mutation.mutateAsync({
+      operation: "SAVE",
+      path: "",
+      value: null,
+    });
     dispatch({ type: "ADD", payload: values });
   };
 
+  useEffect(() => {
+    return () => {
+      if (currentUrlRef.current) {
+        URL.revokeObjectURL(currentUrlRef.current);
+      }
+    };
+  }, []);
+
   return (
     <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
       {({ setFieldValue, errors, setFieldError }) => (
@@ -65,14 +81,26 @@ const SoundUpload = () => {
               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]);
+                if (currentUrlRef.current) {
+                  URL.revokeObjectURL(currentUrlRef.current);
+                }
+                const files = e.target?.files;
+                if (
+                  files &&
+                  (files[0]?.type === "audio/mp3" ||
+                  files[0]?.type === "audio/mpeg" ||
+                  files[0]?.name.endsWith(".wav"))
+                ) {
+                  const file = e.target?.files;
+                  if(file === null) return;
+                  currentUrlRef.current = URL.createObjectURL(file[0]);
+                  const url = currentUrlRef.current;
                   setFieldValue("soundUrl", url);
-                  setFieldValue("name", e.target.files[0].name);
-                  setFieldValue("soundFileName", e.target.files[0].name);
-                  setFieldValue("soundFile", e.target.files[0]);
+                  setFieldValue("name", file[0].name);
+                  setFieldValue("soundFileName", file[0].name);
+                  setFieldValue("soundFile", file[0]);
                   setFieldValue("uploadedAt", Date.now());
-                  if (e?.target?.files[0]?.size >= 1 * 1024 * 1024) {
+                  if (file[0]?.size >= 1 * 1024 * 1024) {
                     setFieldError("soundFile", "larger than 1mb");
                     toast.error("File larger than 1MB");
                     return;
@@ -96,7 +124,7 @@ const SoundUpload = () => {
           {errors.soundFile && <p className="text-red-500 text-sm mt-1">Not an mp3 file</p>}
           <button
             type="submit"
-            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 mt-[5%]"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 mt-[5%]"
             disabled={errors.soundFile ? true : false}
           >
             Upload

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>
   );

src/components/SettingForms/System/SystemConfigFields.tsx

@@ -5,21 +5,40 @@ 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 { 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();
+  const { systemStatusQuery } = useSystemStatus();
   const { hardRebootMutation } = useReboots();
   const { dnsQuery, dnsMutation } = useDNSSettings();
 
+  if (systemStatusQuery?.isLoading || !systemStatusQuery?.data) {
+    return <div>Loading...</div>;
+  }
+  const utcTime = systemStatusQuery?.data?.SystemStatus?.utctime;
+  const localDate = systemStatusQuery?.data?.SystemStatus?.localdate;
+  const localTime = systemStatusQuery?.data?.SystemStatus?.localtime;
+
+  const utcOutOfSync = isUtcOutOfSync({
+    utctime: utcTime,
+    localdate: localDate,
+    localtime: localTime,
+  });
+  const syncTime = new Date(systemStatusQuery?.data?.SystemStatus?.synctime * 1000).toLocaleString();
+
+  const sntpInterval = systemSettingsData?.sntpInterval;
   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,
+    sntpInterval: sntpInterval ?? 60,
     serverPrimary: dnsPrimary ?? "",
     serverSecondary: dnsSecondary ?? "",
     softwareUpdate: null,
@@ -165,9 +184,17 @@ 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-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
             disabled={isSubmitting}
           >
             {saveSystemSettingsLoading ? "Saving..." : "Save System Settings"}
@@ -191,6 +218,7 @@ const SystemConfigFields = () => {
           >
             {hardRebootMutation.isPending || isSubmitting ? "Rebooting" : "Hardware Reboot"}
           </button>
+          <ResetUserSettings />
         </Form>
       )}
     </Formik>

src/components/SettingForms/System/SystemFileUpload.tsx

@@ -2,6 +2,7 @@ import { useFormikContext } from "formik";
 import FormGroup from "../components/FormGroup";
 import { toast } from "sonner";
 import { useSystemConfig } from "../../../hooks/useSystemConfig";
+import { CAM_BASE } from "../../../utils/config";
 
 type SystemFileUploadProps = {
   name: string;
@@ -19,7 +20,7 @@ const SystemFileUpload = ({ name, selectedFile }: SystemFileUploadProps) => {
       opts: {
         timeoutMs: 30000,
         fieldName: "upload",
-        uploadUrl: "http://192.168.75.11/upload/software-update/2",
+        uploadUrl: `${CAM_BASE}/upload/software-update/4`,
       },
     };
     uploadSettings(settings);
@@ -52,7 +53,7 @@ const SystemFileUpload = ({ name, selectedFile }: SystemFileUploadProps) => {
       </FormGroup>
       <button
         type="button"
-        className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
+        className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
         disabled={!selectedFile}
         onClick={handleFileUploadClick}
       >

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;

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;

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

@@ -37,41 +37,32 @@ const ModemSettings = () => {
   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 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 },
+    ];
+
+    if (values.serverSecondary?.trim()) {
+      fields.push({
+        property: "propNameServerSecondary",
+        value: values.serverSecondary.trim(),
+      });
+    }
+
     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,
-        },
-      ],
+      fields,
     };
 
     const response = await modemMutation.mutateAsync(modemConfig);
@@ -178,7 +169,7 @@ const ModemSettings = () => {
             )}
             <button
               type="submit"
-              className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+              className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
             >
               {isSubmitting || modemMutation.isPending ? "Saving..." : "Save Modem settings"}
             </button>

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

@@ -17,7 +17,6 @@ const WiFiSettingsForm = () => {
   const initialValues = {
     ssid: wifiSSID ?? "",
     password: wifiPassword ?? "",
-    encryption: "WPA2",
   };
 
   const validatePassword = (password: string) => {
@@ -83,22 +82,7 @@ const WiFiSettingsForm = () => {
                 />
               </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"

src/components/SightingModal/SightingModal.tsx

@@ -10,7 +10,8 @@ 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";
+import NPED_CAT_D from "/NPED_Cat_D.svg";
+import { checkIsHotListHit, getHotlistName, getNPEDCategory, getNPEDReason } from "../../utils/utils";
 
 type SightingModalProps = {
   isSightingModalOpen: boolean;
@@ -25,7 +26,7 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
   const { query, mutation } = useCameraBlackboard();
 
   const hotlistNames = getHotlistName(sighting?.metadata?.hotlistMatches);
-  const handleAcknowledgeButton = () => {
+  const handleAcknowledgeButton = async () => {
     try {
       if (!sighting) {
         toast.error("Cannot add sighting to alert list");
@@ -33,17 +34,27 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
         return;
       }
       if (!query.data.alertHistory) {
-        mutation.mutate({
+        await mutation.mutateAsync({
           operation: "INSERT",
           path: "alertHistory",
           value: [sighting],
         });
+        await mutation.mutateAsync({
+          operation: "SAVE",
+          path: "",
+          value: null,
+        });
       } else {
-        mutation.mutate({
+        await mutation.mutateAsync({
           operation: "APPEND",
           path: "alertHistory",
           value: sighting,
         });
+        await mutation.mutateAsync({
+          operation: "SAVE",
+          path: "",
+          value: null,
+        });
         toast.success("Sighting Successfully added to alert list");
       }
 
@@ -64,16 +75,24 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
   };
 
   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";
+  const isNPEDHitD = cat === "D";
+
+  const reason = getNPEDReason(sighting);
+
+  const insuranceStatus = reason ? reason["INSURANCE STATUS"] : null;
+  const motStatus = reason ? reason["MOT STATUS"] : null;
+  const taxStatus = reason ? reason["TAX STATUS"] : null;
 
   return (
     <>
       <ModalComponent isModalOpen={isSightingModalOpen} close={handleClose}>
-        <div className="max-w-screen-lg mx-auto py-4 px-2">
+        <div className="mx-auto py-4 px-6 overflow-y-scroll">
           <div className="border-b border-gray-600 mb-4">
             <h2 className="text-lg md:text-xl font-semibold">Sighting Details</h2>
           </div>
@@ -123,42 +142,90 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
             {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" />}
+            {isNPEDHitD && <img src={NPED_CAT_D} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
           </div>
-          {hotlistNames && (
+          {hotlistNames && hotlistNames.length > 0 && (
             <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%]">
+              <div className="grid grid-cols-1 md:grid-cols-2 md:gap-x-[20%] 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}>
+                  <span className="items-center px-2.5 py-0.5 rounded-sm me-2 bg-amber-500 w-50 m-2" key={index}>
                     <p className="font-medium text-2xl break-all text-amber-800">
                       {hotlistName ? hotlistName?.replace(/\.csv$/i, "") : "-"}
                     </p>
-                  </div>
+                  </span>
                 ))}
               </div>
             </div>
           )}
-          <div className="flex flex-col lg:flex-row items-center gap-3">
+          <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"
+              className="w-full h-56 sm:h-72 md:h-72 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>
+                  <dd className="font-medium text-2xl break-all font-mono tracking-wide">{sighting?.vrm ?? "-"}</dd>
                 </div>
-
+                {isNPEDHitA || isNPEDHitB || isNPEDHitC || isNPEDHitD ? (
+                  <>
+                    <div className="">
+                      <dt className="text-gray-300 text-xl">Insurance</dt>
+                      <dd className="font-medium text-2xl flex">
+                        {insuranceStatus ? (
+                          <span
+                            className={`text-green-600 bg-green-300 w-[30%] px-2 rounded-lg border border-green-900`}
+                          >
+                            YES
+                          </span>
+                        ) : (
+                          <span className={`text-red-300 bg-red-600 w-[30%] px-2 rounded-lg border border-red-900`}>
+                            NO
+                          </span>
+                        )}
+                      </dd>
+                    </div>
+                    <div>
+                      <dt className="text-gray-300 text-3xl">MOT</dt>
+                      <dd className="font-medium text-2xl">
+                        {motStatus ? (
+                          <span
+                            className={`text-green-700 bg-green-400 w-[30%] px-2 rounded-lg border border-green-900`}
+                          >
+                            VALID
+                          </span>
+                        ) : (
+                          <span className={`text-red-600 bg-red-300 w-[30%] px-2 rounded-lg border border-red-900`}>
+                            EXPIRED
+                          </span>
+                        )}
+                      </dd>
+                    </div>
+                    <div>
+                      <dt className="text-gray-300 text-3xl">Tax</dt>
+                      <dd className="font-medium text-2xl">
+                        {taxStatus ? (
+                          <span
+                            className={`text-green-700 bg-green-400 w-[30%] px-2 rounded-lg border border-green-900`}
+                          >
+                            VALID
+                          </span>
+                        ) : (
+                          <span className={`text-red-600 bg-red-300 w-[30%] px-2 rounded-lg border border-red-900`}>
+                            EXPIRED
+                          </span>
+                        )}
+                      </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>
+                      <dd className="font-medium text-2xl ">{sighting?.motion ?? "-"}</dd>
                     </div>
 
                     {sighting?.make && sighting.make.trim() && sighting.make.toLowerCase() !== "disabled" && (
@@ -186,6 +253,8 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
                       <dt className="text-gray-300">Time</dt>
                       <dd className="font-medium text-xl">{sighting?.timeStamp ?? "-"}</dd>
                     </div>
+                  </>
+                )}
               </dl>
             </aside>
           </div>

src/components/SightingsWidget/SightingWidget.tsx

@@ -12,14 +12,10 @@ 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 NPED_CAT_D from "/NPED_Cat_D.svg";
 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());
@@ -41,14 +37,9 @@ type SightingHistoryProps = {
 
 export default function SightingHistoryWidget({ className, title }: SightingHistoryProps) {
   const [modalQueue, setModalQueue] = useState<QueuedHit[]>([]);
+
   useNow(1000);
-  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,
@@ -73,7 +64,10 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
   const isCatCEnabled = integrationState?.iscatEnabled?.catC;
   const isCatDEnabled = integrationState?.iscatEnabled?.catD;
 
-  const enqueue = useCallback((sighting: SightingType, kind: HitKind) => {
+  const enqueue = useCallback(
+    (sighting: SightingType, kind: HitKind) => {
+      if (!sighting) return;
+
       const id = sighting.vrm ?? sighting.ref;
       if (processedRefs.current.has(id)) return;
 
@@ -81,10 +75,13 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
       if (inList) {
         return;
       }
+
       processedRefs.current.add(id);
 
       setModalQueue((q) => [...q, { id, sighting, kind }]);
-  }, []);
+    },
+    [alertState?.alertList]
+  );
 
   const reduceObject = (obj: SightingType): ReducedSightingType => {
     return {
@@ -133,31 +130,16 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
         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]);
+  }, [rows, enqueue, isCatAEnabled, isCatBEnabled, isCatCEnabled, isCatDEnabled]);
 
   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";
+      const isNPEDHitA = cat === "A" && isCatAEnabled;
+      const isNPEDHitB = cat === "B" && isCatBEnabled;
+      const isNPEDHitC = cat === "C" && isCatCEnabled;
+      const isNPEDHitD = cat === "D" && isCatDEnabled;
       return isNPEDHitA || isNPEDHitB || isNPEDHitC || isNPEDHitD;
     });
     const firstHot = rows?.find((r) => {
@@ -176,25 +158,47 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
 
       hasAutoOpenedRef.current = true;
     }
-  }, [enqueue, hotlistsound, npedSound, rows, setSelectedSighting, setSightingModalOpen]);
+  }, [
+    enqueue,
+    rows,
+    setSelectedSighting,
+    setSightingModalOpen,
+    isCatAEnabled,
+    isCatBEnabled,
+    isCatCEnabled,
+    isCatDEnabled,
+  ]);
 
   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]);
+  }, [isSightingModalOpen, setSelectedSighting, setSightingModalOpen, modalQueue]);
+
+  useEffect(() => {
+    rows?.forEach((obj) => {
+      const cat = getNPEDCategory(obj);
+      const isNPEDHitA = cat === "A";
+      const isNPEDHitB = cat === "B";
+      const isNPEDHitC = cat === "C";
+      const isNPEDHitD = cat === "D";
+      if (isNPEDHitA || isNPEDHitB || isNPEDHitC || isNPEDHitD) {
+        dispatch({
+          type: "ADD",
+          payload: obj,
+        });
+      }
+    });
+  }, [dispatch, rows]);
 
   const handleClose = () => {
     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)}>
@@ -212,6 +216,7 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
               const isNPEDHitA = cat === "A";
               const isNPEDHitB = cat === "B";
               const isNPEDHitC = cat === "C";
+              const isNPEDHitD = cat === "D";
               const motionAway = (obj?.motion ?? "").toUpperCase() === "AWAY";
               const isHotListHit = checkIsHotListHit(obj);
               return (
@@ -221,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" />
@@ -230,6 +240,7 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
                     {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" />}
+                    {isNPEDHitD && <img src={NPED_CAT_D} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
                     <NumberPlate motion={motionAway} vrm={obj?.vrm} />
                   </div>
                 </div>

src/components/UI/Footer.tsx

@@ -1,13 +1,25 @@
+import { useState } from "react";
+import { useGetVersions } from "../../hooks/useGetVersions";
 import Logo from "/MAV.svg";
+import VersionsModal from "./VersionsModal";
 
 const Footer = () => {
+  const { versionsQuery } = useGetVersions();
+  const [isDevModalOpen, setDevModalOpen] = useState(false);
+
+  const versionsData = versionsQuery?.data;
+
+  const handleClick = () => {
+    setDevModalOpen(true);
+  };
   return (
+    <>
       <footer className="bg-gray-900 border-t border-gray-700 text-white py-5 text-left p-8 h-30 mt-5 flex flex-col space-y-4 ">
-      <img src={Logo} alt="Logo" width={100} height={100} />
-      <p className="text-sm">
-        {new Date().getFullYear()} MAV Systems &copy; All rights reserved.
-      </p>
+        <img src={Logo} alt="Logo" width={100} height={100} onClick={handleClick} />
+        <p className="text-sm">{new Date().getFullYear()} MAV Systems &copy; All rights reserved.</p>
       </footer>
+      <VersionsModal isDevModalOpen={isDevModalOpen} handleClose={() => setDevModalOpen(false)} data={versionsData} />
+    </>
   );
 };
 

src/components/UI/Header.tsx

@@ -1,15 +1,26 @@
 import { Link } from "react-router";
 import Logo from "/MAV.svg";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faGear, faHome, faListCheck, faMaximize, faMinimize, faRotate } from "@fortawesome/free-solid-svg-icons";
+import {
+  faBars,
+  faGear,
+  faHome,
+  faListCheck,
+  faMaximize,
+  faMinimize,
+  faRotate,
+} from "@fortawesome/free-solid-svg-icons";
 import { useState } from "react";
 import SoundBtn from "./SoundBtn";
 import { useIntegrationsContext } from "../../context/IntegrationsContext";
 
 export default function Header() {
   const [isFullscreen, setIsFullscreen] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
   const { state } = useIntegrationsContext();
 
+  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
+
   const sessionStarted = state.sessionStarted;
 
   const sessionPaused = state.sessionPaused;
@@ -36,7 +47,7 @@ export default function Header() {
         </Link>
       </div>
       <div className="flex flex-col lg:flex-row items-center space-x-24 justify-items-center">
-        <div className="flex flex-row lg:flex-row space-x-2">
+        <div className="flex flex-row lg:flex-row space-x-2 mx-10 p-2 md:p-0 items-center">
           {sessionStarted && sessionPaused ? (
             <p className="text-gray-400 font-bold">Session Paused</p>
           ) : (
@@ -44,7 +55,7 @@ export default function Header() {
           )}
         </div>
 
-        <div className="flex flex-row space-x-8">
+        <div className="flex flex-row space-x-6 md:space-x-8 items-center">
           <Link to={"/"}>
             <FontAwesomeIcon className="text-white" icon={faHome} size="2x" />
           </Link>
@@ -59,15 +70,35 @@ export default function Header() {
             <FontAwesomeIcon icon={faRotate} size="2x" />
           </div>
           <SoundBtn />
-          <Link to={"/session-settings"}>
+          <div className="md:hidden">
+            <FontAwesomeIcon icon={faBars} size="2x" onClick={toggleMenu} />
+          </div>
+
+          <Link className="hidden md:flex" to={"/session-settings"}>
             <FontAwesomeIcon className="text-white" icon={faListCheck} size="2x" />
           </Link>
 
-          <Link to={"/system-settings"}>
+          <Link className="hidden md:flex" to={"/system-settings"}>
             <FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
           </Link>
         </div>
       </div>
+      {isMenuOpen && (
+        <div className="md:hidden">
+          <ul className="flex flex-row gap-5">
+            <li onClick={() => setIsMenuOpen(false)}>
+              <Link to={"/session-settings"}>
+                <FontAwesomeIcon className="text-white" icon={faListCheck} size="2x" />
+              </Link>
+            </li>
+            <li onClick={() => setIsMenuOpen(false)}>
+              <Link to={"/system-settings"}>
+                <FontAwesomeIcon className="text-white" icon={faGear} size="2x" />
+              </Link>
+            </li>
+          </ul>
+        </div>
+      )}
     </div>
   );
 }

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,8 +13,18 @@ const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) =
     <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"
+      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: {
+          transition: "opacity 200ms ease-in-out",
+        },
+        content: {
+          transition: "all 200ms ease-in-out",
+        },
+      }}
     >
       {children}
     </Modal>

src/components/UI/SoundBtn.tsx

@@ -16,6 +16,11 @@ const SoundBtn = () => {
       path: "soundEnabled",
       value: { enabled: newEnabled },
     });
+    await mutation.mutateAsync({
+      operation: "SAVE",
+      path: "",
+      value: null,
+    });
   };
   useEffect(() => {
     setEnabled(query?.data?.soundEnabled?.enabled);
@@ -23,10 +28,7 @@ const SoundBtn = () => {
 
   return (
     <button onClick={handleClick}>
-      <FontAwesomeIcon
-        icon={enabled ? faVolumeHigh : faVolumeXmark}
-        size="2x"
-      />
+      <FontAwesomeIcon icon={enabled ? faVolumeHigh : faVolumeXmark} size="2x" />
     </button>
   );
 };

src/components/UI/VersionsModal.tsx

@@ -0,0 +1,84 @@
+import type { versionInfo } from "../../types/types";
+import ModalComponent from "./ModalComponent";
+
+type VersionsModalProps = {
+  isDevModalOpen: boolean;
+  handleClose: () => void;
+  data: versionInfo;
+};
+
+const VersionsModal = ({ isDevModalOpen, handleClose, data }: VersionsModalProps) => {
+  const uiName = __APP_NAME__;
+  const uiVersion = __APP_VERSION__;
+  const commitID = __GIT_COMMIT__;
+  const commitTimeStamp = __GIT_TIMESTAMP__;
+
+  return (
+    <ModalComponent isModalOpen={isDevModalOpen} close={handleClose}>
+      <div className="flex justify-end overflow-auto">
+        <button
+          onClick={handleClose}
+          className="p-2 border border-gray-600 rounded-md text-gray-200 hover:bg-gray-700 transition"
+        >
+          Close
+        </button>
+      </div>
+      <div className="space-y-6 p-5">
+        <div className="border-b border-gray-600 pb-3">
+          <h2 className="text-2xl font-bold text-gray-100">System Information</h2>
+          <p className="text-sm text-gray-400 mt-1">Application version details</p>
+        </div>
+        <div className="space-y-3">
+          <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wide">Frontend (UI)</h3>
+          <div className="bg-gray-800/50 rounded-lg p-4 space-y-3">
+            <div className="flex justify-between items-center border-b border-gray-700 pb-2">
+              <span className="text-gray-400 text-sm">Name</span>
+              <span className="text-gray-200 font-mono font-semibold">{uiName}</span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-gray-400 text-sm">Version</span>
+              <span className="text-gray-200 font-mono font-semibold">{uiVersion}</span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-gray-400 text-sm">Revision (Commit ID)</span>
+              <span className="bg-[#233241] p-2 rounded-md text-gray-200 font-mono text-sm">{commitID}</span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-gray-400 text-sm">Build Time</span>
+              <span className="text-gray-200 font-mono text-sm">{commitTimeStamp}</span>
+            </div>
+          </div>
+        </div>
+        <div className="space-y-3">
+          <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wide">Backend</h3>
+          <div className="bg-gray-800/50 rounded-lg p-4 space-y-3">
+            <div className="flex justify-between items-center border-b border-gray-700 pb-2">
+              <span className="text-gray-400 text-sm"> Name</span>
+              <span className="text-gray-200 font-mono font-semibold">{data?.appname || "N/A"}</span>
+            </div>
+            <div className="flex justify-between items-center pb-2">
+              <span className="text-gray-400 text-sm">Version</span>
+              <span className="text-gray-200 font-mono font-semibold">{data?.version || "N/A"}</span>
+            </div>
+            <div className="flex justify-between items-center  pb-2">
+              <span className="text-gray-400 text-sm">Revision (Commit ID)</span>
+              <span className="bg-[#233241] p-2 rounded-md text-gray-200 font-mono text-sm">
+                {data?.revision || "N/A"}
+              </span>
+            </div>
+            <div className="flex justify-between items-center  pb-2">
+              <span className="text-gray-400 text-sm">Build Time</span>
+              <span className="text-gray-200 font-mono text-sm">{data?.buildtime || "N/A"}</span>
+            </div>
+            <div className="flex justify-between items-center">
+              <span className="text-gray-400 text-sm">MAC Address</span>
+              <span className="text-gray-200 font-mono text-sm">{data?.MAC || "N/A"}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ModalComponent>
+  );
+};
+
+export default VersionsModal;

src/context/providers/IntegrationsContextProvider.tsx

@@ -2,6 +2,7 @@ import { useEffect, useReducer, type ReactNode } from "react";
 import { IntegrationsContext } from "../IntegrationsContext";
 import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
 import { initialState, reducer } from "../reducers/IntegrationsContextReducer";
+import { useHotlistData } from "../../hooks/useHotListData";
 
 type IntegrationsProviderType = {
   children: ReactNode;
@@ -10,12 +11,18 @@ type IntegrationsProviderType = {
 export const IntegrationsProvider = ({ children }: IntegrationsProviderType) => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const { mutation } = useCameraBlackboard();
+  const { query } = useHotlistData();
 
   useEffect(() => {
     let isMounted = true;
 
     const fetchData = async () => {
       try {
+        await mutation.mutateAsync({
+          operation: "Load",
+          path: "",
+          value: null,
+        });
         const result = await mutation.mutateAsync({
           operation: "VIEW",
           path: "sessionStats",
@@ -29,10 +36,19 @@ export const IntegrationsProvider = ({ children }: IntegrationsProviderType) =>
         });
 
         if (!isMounted) return;
-        if (!result?.result || typeof result.result === "string") return;
 
+        if (result?.result && typeof result.result !== "string") {
           dispatch({ type: "UPDATE", payload: result.result });
+        }
+
+        if (catResult?.result) {
           dispatch({ type: "NPEDCATENABLED", payload: catResult.result });
+        } else {
+          dispatch({
+            type: "NPEDCATENABLED",
+            payload: { catA: true, catB: true, catC: true, catD: true },
+          });
+        }
       } catch (error) {
         console.error("Error in fetchData:", error);
       }
@@ -45,6 +61,37 @@ export const IntegrationsProvider = ({ children }: IntegrationsProviderType) =>
     };
   }, []);
 
+  useEffect(() => {
+    const fetchHotlistData = async () => {
+      dispatch({ type: "SETHOTLISTS", payload: query?.data?.hotlists });
+    };
+    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={{

src/context/providers/SoundContextProvider.tsx

@@ -20,6 +20,11 @@ const SoundContextProvider = ({ children }: SoundContextProviderProps) => {
         operation: "VIEW",
         path: "soundSettings",
       });
+      await mutation.mutateAsync({
+        operation: "LOAD",
+        path: "",
+        value: null,
+      });
 
       if (!result.result || typeof result.result !== "object") {
         dispatch({ type: "UPDATE", payload: state });

src/context/reducers/IntegrationsContextReducer.ts

@@ -1,7 +1,7 @@
 import type { NPEDACTION, NPEDSTATE } from "../../types/types";
 
 export const initialState = {
-  sessionStarted: false,
+  sessionStarted: true,
   sessionList: [],
   sessionPaused: false,
   savedSightings: [],
@@ -12,6 +12,9 @@ export const initialState = {
     catC: true,
     catD: false,
   },
+  hotlistFiles: [],
+  cameraAFriendlyName: "Camera A",
+  cameraBFriendlyName: "Camera B",
 };
 
 export function reducer(state: NPEDSTATE, action: NPEDACTION) {
@@ -36,6 +39,11 @@ export function reducer(state: NPEDSTATE, action: NPEDACTION) {
         ...state,
         sessionPaused: action.payload,
       };
+    case "SESSIONRESTART":
+      return {
+        ...state,
+        sessionList: action.payload,
+      };
     case "ADD":
       return {
         ...state,
@@ -51,6 +59,29 @@ export function reducer(state: NPEDSTATE, action: NPEDACTION) {
         ...state,
         iscatEnabled: action.payload,
       };
+
+    case "SETHOTLISTS":
+      return {
+        ...state,
+        hotlistFiles: action.payload,
+      };
+    case "DELETEHOTLIST":
+      return {
+        ...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 };
   }

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;
   }

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) => {

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 };
+};

src/hooks/useFileUpload.ts

@@ -1,12 +1,8 @@
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
 import { CAM_BASE } from "../utils/config";
 import { toast } from "sonner";
-import { getOrCacheBlob } from "../utils/cacheSound";
-const camBase = import.meta.env.MODE !== "development" ? CAM_BASE : CAM_BASE;
 
-type UseFileUploadProps = {
-  queryKey?: string[];
-};
+const camBase = import.meta.env.MODE !== "development" ? CAM_BASE : CAM_BASE;
 
 const uploadFile = async (file: File) => {
   const form = new FormData();
@@ -21,19 +17,7 @@ const uploadFile = async (file: File) => {
   return response.text();
 };
 
-const getUploadFiles = async ({ queryKey }: { queryKey: string[] }) => {
-  const [, fileName] = queryKey;
-  const url = fileName;
-  return getOrCacheBlob(url);
-};
-
-export const useFileUpload = ({ queryKey }: UseFileUploadProps) => {
-  const query = useQuery({
-    queryKey: ["getUploadFiles", ...(queryKey ?? [])],
-    queryFn: () => getUploadFiles({ queryKey: ["getUploadFiles", ...(queryKey ?? [])] }),
-    enabled: !!queryKey,
-  });
-
+export const useFileUpload = () => {
   const mutation = useMutation({
     mutationFn: (file: File) => uploadFile(file),
     mutationKey: ["uploadFile"],
@@ -41,5 +25,5 @@ export const useFileUpload = ({ queryKey }: UseFileUploadProps) => {
     onSuccess: async (msg) => toast.success(msg),
   });
 
-  return { query: queryKey ? query : undefined, mutation };
+  return { mutation };
 };

src/hooks/useGetOverviewSnapshot.ts

@@ -15,7 +15,6 @@ async function fetchSnapshot(cameraSide: string): Promise<Blob> {
   return response.blob();
 }
 
-/** Draw an ImageBitmap to canvas with aspect-fill (like object-fit: cover) */
 function drawBitmapToCanvas(canvas: HTMLCanvasElement, bitmap: ImageBitmap) {
   const ctx = canvas.getContext("2d");
   if (!ctx) return;
@@ -42,18 +41,14 @@ function drawBitmapToCanvas(canvas: HTMLCanvasElement, bitmap: ImageBitmap) {
   let drawWidth = width;
   let drawHeight = height;
 
-  // aspect-fit calculation (no cropping)
   if (srcAspect > dstAspect) {
-    // image is wider → fit to canvas width
     drawWidth = width;
     drawHeight = width / srcAspect;
   } else {
-    // image is taller → fit to canvas height
     drawHeight = height;
     drawWidth = height * srcAspect;
   }
 
-  // center image (adds black borders if aspect ratios differ)
   const dx = (width - drawWidth) / 50;
   const dy = (height - drawHeight) / 2;
 
@@ -66,7 +61,6 @@ export function useGetOverviewSnapshot(side: string) {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const latestBitmapRef = useRef<ImageBitmap | null>(null);
 
-  // Redraw helper; always draws the current bitmap if available
   const draw = useCallback(() => {
     const canvas = canvasRef.current;
     const bmp = latestBitmapRef.current;
@@ -82,16 +76,15 @@ export function useGetOverviewSnapshot(side: string) {
   } = useQuery({
     queryKey: ["overviewSnapshot", side],
     queryFn: () => fetchSnapshot(side),
-    // Poll ~4 fps when visible; pause when tab hidden
+
     refetchInterval: () => (document.visibilityState === "visible" ? 250 : false),
     refetchOnWindowFocus: false,
-    // Avoid keeping lots of blobs around in cache
-    gcTime: 0, // v5 name (cacheTime in v4)
+
+    gcTime: 0,
     staleTime: 0,
-    retry: false, // or a small number if you prefer retries
+    retry: false,
   });
 
-  // Convert Blob -> ImageBitmap and draw
   useEffect(() => {
     let cancelled = false;
     if (!snapshotBlob) return;
@@ -104,13 +97,11 @@ export function useGetOverviewSnapshot(side: string) {
           return;
         }
 
-        // Dispose previous bitmap to free memory
         if (latestBitmapRef.current) {
           latestBitmapRef.current.close();
         }
         latestBitmapRef.current = bitmap;
 
-        // Draw now (and again on next resize)
         draw();
       } catch {
         // noop — fetch handler surfaces the main error path
@@ -122,12 +113,11 @@ export function useGetOverviewSnapshot(side: string) {
     };
   }, [snapshotBlob, draw]);
 
-  // Redraw on resize & DPR changes
   useEffect(() => {
     const onResize = () => draw();
     const onDPR = () => draw();
     window.addEventListener("resize", onResize);
-    // Listen for DPR changes (some browsers support this)
+
     const mql = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
     mql.addEventListener?.("change", onDPR);
     return () => {
@@ -137,14 +127,13 @@ export function useGetOverviewSnapshot(side: string) {
   }, [draw]);
 
   useEffect(() => {
-    const el = canvasRef.current?.parentElement; // the box
+    const el = canvasRef.current?.parentElement;
     if (!el) return;
-    const ro = new ResizeObserver(() => draw()); // your draw() calls aspect-fit logic
+    const ro = new ResizeObserver(() => draw());
     ro.observe(el);
     return () => ro.disconnect();
   }, [draw]);
 
-  // Cleanup on unmount
   useEffect(() => {
     return () => {
       if (latestBitmapRef.current) {
@@ -154,7 +143,6 @@ export function useGetOverviewSnapshot(side: string) {
     };
   }, []);
 
-  // Optional: normalize error type
   const typedError = error instanceof Error ? error : undefined;
 
   return { canvasRef, isError, error: typedError, isPending };

src/hooks/useGetUploadedFiles.ts

@@ -0,0 +1,22 @@
+import { useQuery } from "@tanstack/react-query";
+import { getOrCacheBlob } from "../utils/cacheSound";
+
+type UseFileUploadProps = {
+  queryKey?: string[];
+};
+
+const getUploadFiles = async ({ queryKey }: { queryKey: string[] }) => {
+  const [, fileName] = queryKey;
+  const url = fileName;
+  return getOrCacheBlob(url);
+};
+
+export const useGetUploadedFiles = ({ queryKey }: UseFileUploadProps) => {
+  const query = useQuery({
+    queryKey: ["getUploadFiles", ...(queryKey ?? [])],
+    queryFn: () => getUploadFiles({ queryKey: ["getUploadFiles", ...(queryKey ?? [])] }),
+    enabled: !!queryKey,
+  });
+
+  return { query: queryKey ? query : undefined };
+};

src/hooks/useGetVersions.ts

@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
+import { CAM_BASE } from "../utils/config";
+
+const fetchVersions = async () => {
+  const response = await fetch(`${CAM_BASE}/api/versions`);
+  if (!response.ok) throw new Error("Cannot get Versions");
+  return response.json();
+};
+
+export const useGetVersions = () => {
+  const versionsQuery = useQuery({
+    queryKey: ["getversions"],
+    queryFn: fetchVersions,
+  });
+
+  return { versionsQuery };
+};

src/hooks/useHotListData.ts

@@ -0,0 +1,28 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { CAM_BASE } from "../utils/config";
+
+const fetchHotlists = async () => {
+  const response = await fetch(`${CAM_BASE}/Hotlist-csv-metadata`);
+  if (!response.ok) throw new Error("Cannot reach hotlist endpoint");
+  return response.json();
+};
+
+const deleteHotlist = async (filename: string) => {
+  const response = await fetch(`${CAM_BASE}/Hotlist-csv-delete?filename=${filename}`);
+  if (!response.ok) throw new Error(`Cannot delte hotlist: ${filename}`);
+  return response.json();
+};
+
+export const useHotlistData = () => {
+  const query = useQuery({
+    queryKey: ["fetchHotlists"],
+    queryFn: fetchHotlists,
+  });
+
+  const mutation = useMutation({
+    mutationKey: ["deleteHotlist"],
+    mutationFn: (filename: string) => deleteHotlist(filename),
+  });
+
+  return { query, mutation };
+};

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 {

src/hooks/useSightingFeed.ts

@@ -88,8 +88,14 @@ export function useSightingFeed(url: string | undefined) {
     const isNPEDHitA = cat === "A";
     const isNPEDHitB = cat === "B";
     const isNPEDHitC = cat === "C";
+    const isNPEDHitD = cat === "D";
 
-    if ((isNPEDHitA && audioArmed) || (isNPEDHitB && audioArmed) || (isNPEDHitC && audioArmed)) {
+    if (
+      (isNPEDHitA && audioArmed) ||
+      (isNPEDHitB && audioArmed) ||
+      (isNPEDHitC && audioArmed) ||
+      (isNPEDHitD && audioArmed)
+    ) {
       playNPEDHitSound();
     } else if (isHotListHit && audioArmed) {
       playHotlistsound();

src/hooks/useSystemStatus.ts

@@ -0,0 +1,20 @@
+import { useQuery } from "@tanstack/react-query";
+import { CAM_BASE } from "../utils/config";
+
+const fetchSystemStatus = async () => {
+  const response = await fetch(`${CAM_BASE}/sysstatus?func=getstatus`);
+  if (!response.ok) {
+    throw new Error("Network response was not ok");
+  }
+  return response.json();
+};
+
+export const useSystemStatus = () => {
+  const systemStatusQuery = useQuery({
+    queryKey: ["get systemStatus"],
+    queryFn: fetchSystemStatus,
+    refetchInterval: 60000,
+  });
+
+  return { systemStatusQuery };
+};

src/hooks/usecachedSoundSrc.ts

@@ -1,8 +1,8 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { useFileUpload } from "./useFileUpload";
 import { getSoundFileURL } from "../utils/utils";
 import type { SoundUploadValue } from "../types/types";
 import { resolveSoundSource } from "../utils/soundResolver";
+import { useGetUploadedFiles } from "./useGetUploadedFiles";
 
 export function useCachedSoundSrc(
   selected: string | undefined,
@@ -13,7 +13,7 @@ export function useCachedSoundSrc(
 
   const resolved = resolveSoundSource(selected, soundOptions);
 
-  const { query } = useFileUpload({
+  const { query } = useGetUploadedFiles({
     queryKey: resolved?.type === "uploaded" ? [resolved?.url] : undefined,
   });
 

src/index.css

@@ -33,7 +33,37 @@ body {
 }
 
 .arrow-outline path {
-  stroke: black; /* outline color */
-  stroke-width: 20px; /* thickness of outline (tweak this) */
+  stroke: black;
+  stroke-width: 20px;
   stroke-linejoin: round;
 }
+
+/* Modal animations */
+.ReactModal__Overlay {
+  opacity: 0;
+  transition: opacity 200ms ease-in-out;
+}
+
+.ReactModal__Overlay--after-open {
+  opacity: 1;
+}
+
+.ReactModal__Overlay--before-close {
+  opacity: 0;
+}
+
+.ReactModal__Content {
+  transform: scale(0.9) translateY(-20px);
+  opacity: 0;
+  transition: all 200ms ease-in-out;
+}
+
+.ReactModal__Content--after-open {
+  transform: scale(1) translateY(0);
+  opacity: 1;
+}
+
+.ReactModal__Content--before-close {
+  transform: scale(0.9) translateY(-20px);
+  opacity: 0;
+}

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>
   );

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}

src/pages/SystemSettings.tsx

@@ -11,6 +11,7 @@ import { useNPEDAuth } from "../hooks/useNPEDAuth";
 import SoundSettingsCard from "../components/SettingForms/Sound/SoundSettingsCard";
 import SoundUploadCard from "../components/SettingForms/Sound/SoundUploadCard";
 import NPEDCategoryPopup from "../components/PopupSettings/NPEDCategoryPopup";
+import HotlistList from "../components/HotlistList/HotlistList";
 
 const SystemSettings = () => {
   useNPEDAuth();
@@ -22,7 +23,7 @@ const SystemSettings = () => {
           <Tab>System</Tab>
           <Tab>Output</Tab>
           <Tab>Integrations</Tab>
-          <Tab>WiFi and Modem</Tab>
+          <Tab>WiFi & Modem</Tab>
           <Tab>Sound</Tab>
         </TabList>
         <TabPanel>
@@ -40,6 +41,7 @@ const SystemSettings = () => {
             <NPEDCard />
             <NPEDHotlistCard />
             <NPEDCategoryPopup />
+            <HotlistList />
           </div>
         </TabPanel>
         <TabPanel>

src/types/types.ts

@@ -282,7 +282,7 @@ export type CameraConfig = {
 export type CameraBlackBoardOptions = {
   operation?: string;
   path?: string;
-  value?: object | string | number | (string | number)[];
+  value?: object | string | number | (string | number)[] | null;
 };
 
 export type CameraBlackboardResponse = {
@@ -363,11 +363,15 @@ 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;
-  encryption: string;
+  encryption?: string;
 };
 export type ModemConfigPayload = {
   property: string;
@@ -417,6 +421,12 @@ export type QueuedHit = {
 
 export type DedupedSightings = ReducedSightingType[];
 
+export type HotlistFile = {
+  fileSizeBytes: number;
+  filename: string;
+  rowCount: number;
+};
+
 export type NPEDSTATE = {
   sessionStarted: boolean;
   sessionList: ReducedSightingType[];
@@ -424,6 +434,9 @@ export type NPEDSTATE = {
   savedSightings: DedupedSightings;
   npedUser: NPEDUser;
   iscatEnabled: CategoryPopups;
+  hotlistFiles: HotlistFile[];
+  cameraAFriendlyName: string;
+  cameraBFriendlyName: string;
 };
 
 export type NPEDACTION = {
@@ -438,3 +451,23 @@ export type CategoryPopups = {
   catC: boolean;
   catD: boolean;
 };
+
+export type versionInfo = {
+  version: string;
+  revision: string;
+  buildtime: string;
+  appname: string;
+  MAC: string;
+  timeStamp: number;
+  UUID: string;
+  proquint: string;
+  "Serial No.": string;
+  "Model No.": string;
+};
+
+export type InfoBarData = {
+  "system-clock-utc": string;
+  "system-clock-local": string;
+  "memory-cpu-status": string;
+  "thread-count": string;
+};

src/utils/cacheSound.ts

@@ -1,4 +1,12 @@
 export async function getOrCacheBlob(url: string) {
+  const cacheAvailable = typeof window !== "undefined" && "caches" in window;
+
+  if (!cacheAvailable) {
+    const res = await fetch(url, { cache: "no-store" });
+    if (!res.ok) throw new Error(`Fetch failed: ${res.status}`);
+    return await res.blob();
+  }
+
   const cache = await caches.open("app-sounds-v1");
   const hit = await cache.match(url);
   if (hit) return await hit.blob();
@@ -11,6 +19,11 @@ export async function getOrCacheBlob(url: string) {
 }
 
 export async function evictFromCache(url: string) {
+  const cacheAvailable = typeof window !== "undefined" && "caches" in window;
+
+  if (!cacheAvailable) {
+    return;
+  }
   const cache = await caches.open("app-sounds-v1");
   await cache.delete(url);
 }

src/utils/config.ts

@@ -1,5 +1,4 @@
-const rawCamBase = import.meta.env.VITE_AGX_BOX_URL;
+const rawCamBase = import.meta.env.VITE_CHRIS_BOX_URL;
 const environment = import.meta.env.MODE;
 
-export const CAM_BASE =
-  environment === "development" ? rawCamBase : window.location.origin;
+export const CAM_BASE = environment === "development" ? rawCamBase : window.location.origin;

src/utils/utils.ts

@@ -159,6 +159,8 @@ export function getHotlistName(obj: HotlistMatches | undefined) {
 export const getNPEDCategory = (r?: SightingType | null) =>
   r?.metadata?.npedJSON?.["NPED CATEGORY"] as "A" | "B" | "C" | "D" | undefined;
 
+export const getNPEDReason = (r?: SightingType | null) => r?.metadata?.npedJSON;
+
 export const zoomMapping = (zoomLevel: number | undefined) => {
   switch (zoomLevel) {
     case 1:
@@ -195,3 +197,21 @@ export const ValidateIPaddress = (value: string | undefined) => {
     return "Invalid IP address format";
   }
 };
+
+export function isUtcOutOfSync(
+  data: {
+    utctime: number;
+    localdate: string;
+    localtime: string;
+  },
+  maxDriftMs = 60_000
+) {
+  const utc = new Date(data.utctime);
+
+  const [d, m, y] = data.localdate.split("/").map(Number);
+  const [hh, mm, ss] = data.localtime.split(":").map(Number);
+  // Construct local Date in device’s local timezone
+  const local = new Date(y, m - 1, d, hh, mm, ss);
+  const driftMs = Math.abs(utc.getTime() - local.getTime() + utc.getTimezoneOffset() * 60_000);
+  return { driftMs, outOfSync: driftMs > maxDriftMs };
+}

src/utils/ws_config.ts

@@ -0,0 +1,6 @@
+import { CAM_BASE } from "./config";
+
+export const ws_config = {
+  infoBar: `${CAM_BASE.replace("http", "ws")}/websocket-infobar`,
+  heatmap: `${CAM_BASE.replace("http", "ws")}/websocket-SystemConfig`,
+};

src/vite-env.d.ts

@@ -1 +1,6 @@
 /// <reference types="vite/client" />
+
+declare const __APP_NAME__: string;
+declare const __APP_VERSION__: string;
+declare const __GIT_COMMIT__: string;
+declare const __GIT_TIMESTAMP__: string;

vite.config.ts

@@ -1,6 +1,24 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
+import pkg from "./package.json";
+import { execSync } from "child_process";
+
+const gitCommitHash = (() => {
+  try {
+    return execSync("git rev-parse --short HEAD").toString().trim();
+  } catch {
+    return "unknown";
+  }
+})();
+
+const gitCommitTimeStamp = (() => {
+  try {
+    return execSync("git log -1 --format=%cd --date=iso").toString().trim();
+  } catch {
+    return "unknown";
+  }
+})();
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -9,10 +27,17 @@ export default defineConfig({
     host: true,
     proxy: {
       "/api": {
-        target: "http://100.118.196.113:8080",
+        target: "http://100.72.72.70:8080",
         changeOrigin: true,
       },
     },
   },
   base: "/Mobile",
+  define: {
+    __APP_NAME__: JSON.stringify(pkg.name),
+    __APP_VERSION__: JSON.stringify(pkg.version),
+    __GIT_COMMIT__: JSON.stringify(gitCommitHash),
+    __GIT_TIMESTAMP__: JSON.stringify(gitCommitTimeStamp),
+  },
 });
+// Previous target: "http://100.118.196.113:8080",

yarn.lock

@@ -140,7 +140,7 @@
 
 "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.18.3":
   version "7.28.4"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.4.tgz#a70226016fabe25c5783b2f22d3e1c9bc5ca3326"
+  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz"
   integrity sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==
 
 "@babel/template@^7.27.2":
@@ -174,17 +174,17 @@
     "@babel/helper-validator-identifier" "^7.27.1"
 
 "@emnapi/core@^1.4.3":
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@emnapi/core/-/core-1.5.0.tgz#85cd84537ec989cebb2343606a1ee663ce4edaf0"
-  integrity sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@emnapi/core/-/core-1.7.1.tgz#3a79a02dbc84f45884a1806ebb98e5746bdfaac4"
+  integrity sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg==
   dependencies:
     "@emnapi/wasi-threads" "1.1.0"
     tslib "^2.4.0"
 
 "@emnapi/runtime@^1.4.3":
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.5.0.tgz#9aebfcb9b17195dce3ab53c86787a6b7d058db73"
-  integrity sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.7.1.tgz#a73784e23f5d57287369c808197288b52276b791"
+  integrity sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==
   dependencies:
     tslib "^2.4.0"
 
@@ -810,7 +810,7 @@
 
 "@types/js-cookie@^2.2.6":
   version "2.2.7"
-  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-2.2.7.tgz#226a9e31680835a6188e887f3988e60c04d3f6a3"
+  resolved "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz"
   integrity sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==
 
 "@types/json-schema@^7.0.15":
@@ -818,6 +818,13 @@
   resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
 
+"@types/node@^25.0.1":
+  version "25.0.1"
+  resolved "https://registry.npmjs.org/@types/node/-/node-25.0.1.tgz"
+  integrity sha512-czWPzKIAXucn9PtsttxmumiQ9N0ok9FrBwgRWrwmVLlp86BrMExzvXRLFYRJ+Ex3g6yqj+KuaxfX1JTgV2lpfg==
+  dependencies:
+    undici-types "~7.16.0"
+
 "@types/react-dom@^19.1.7":
   version "19.1.7"
   resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.7.tgz"
@@ -949,7 +956,7 @@
 
 "@xobotyi/scrollbar-width@^1.9.5":
   version "1.9.5"
-  resolved "https://registry.yarnpkg.com/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz#80224a6919272f405b87913ca13b92929bdf3c4d"
+  resolved "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz"
   integrity sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==
 
 acorn-jsx@^5.3.2:
@@ -1046,7 +1053,7 @@ chownr@^3.0.0:
 
 classnames@^2.2.5:
   version "2.5.1"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  resolved "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz"
   integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
 
 clsx@^2.0.0, clsx@^2.1.1:
@@ -1083,7 +1090,7 @@ cookie@^1.0.1:
 
 copy-to-clipboard@^3.3.1:
   version "3.3.3"
-  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
+  resolved "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz"
   integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
   dependencies:
     toggle-selection "^1.0.6"
@@ -1104,14 +1111,14 @@ cross-spawn@^7.0.6:
 
 css-in-js-utils@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz#640ae6a33646d401fc720c54fc61c42cd76ae2bb"
+  resolved "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz"
   integrity sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==
   dependencies:
     hyphenate-style-name "^1.0.3"
 
 css-tree@^1.1.2:
   version "1.1.3"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  resolved "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz"
   integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
   dependencies:
     mdn-data "2.0.14"
@@ -1159,7 +1166,7 @@ enhanced-resolve@^5.18.1:
 
 error-stack-parser@^2.0.6:
   version "2.1.4"
-  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.1.4.tgz#229cb01cdbfa84440bfa91876285b94680188286"
+  resolved "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.1.4.tgz"
   integrity sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==
   dependencies:
     stackframe "^1.3.4"
@@ -1341,12 +1348,12 @@ fast-levenshtein@^2.0.6:
 
 fast-shallow-equal@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz#d4dcaf6472440dcefa6f88b98e3251e27f25628b"
+  resolved "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz"
   integrity sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw==
 
 fastest-stable-stringify@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz#3757a6774f6ec8de40c4e86ec28ea02417214c76"
+  resolved "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz"
   integrity sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==
 
 fastq@^1.6.0:
@@ -1468,12 +1475,12 @@ hoist-non-react-statics@^3.3.0:
 
 howler@^2.2.3, howler@^2.2.4:
   version "2.2.4"
-  resolved "https://registry.yarnpkg.com/howler/-/howler-2.2.4.tgz#bd3df4a4f68a0118a51e4bd84a2bfc2e93e6e5a1"
+  resolved "https://registry.npmjs.org/howler/-/howler-2.2.4.tgz"
   integrity sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w==
 
 hyphenate-style-name@^1.0.3:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz#1797bf50369588b47b72ca6d5e65374607cf4436"
+  resolved "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz"
   integrity sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==
 
 ignore@^5.2.0:
@@ -1501,7 +1508,7 @@ imurmurhash@^0.1.4:
 
 inline-style-prefixer@^7.0.1:
   version "7.0.1"
-  resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-7.0.1.tgz#9310f3cfa2c6f3901d1480f373981c02691781e8"
+  resolved "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-7.0.1.tgz"
   integrity sha512-lhYo5qNTQp3EvSSp3sRvXMbVQTLrvGV6DycRMJ5dm2BLMiJ30wpXKdDdgX+GmJZ5uQMucwRKHamXSst3Sj/Giw==
   dependencies:
     css-in-js-utils "^3.1.0"
@@ -1535,7 +1542,7 @@ jiti@^2.4.2:
 
 js-cookie@^2.2.1:
   version "2.2.1"
-  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
+  resolved "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz"
   integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
 
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
@@ -1703,7 +1710,7 @@ magic-string@^0.30.17:
 
 mdn-data@2.0.14:
   version "2.0.14"
-  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+  resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz"
   integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
 
 merge2@^1.3.0:
@@ -1757,7 +1764,7 @@ ms@^2.1.3:
 
 nano-css@^5.6.2:
   version "5.6.2"
-  resolved "https://registry.yarnpkg.com/nano-css/-/nano-css-5.6.2.tgz#584884ddd7547278f6d6915b6805069742679a32"
+  resolved "https://registry.npmjs.org/nano-css/-/nano-css-5.6.2.tgz"
   integrity sha512-+6bHaC8dSDGALM1HJjOHVXpuastdu2xFoZlC77Jh4cg+33Zcgm+Gxd+1xsnpZK14eyHObSp82+ll5y3SX75liw==
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
@@ -1882,7 +1889,7 @@ queue-microtask@^1.2.2:
 
 rc-slider@^11.1.9:
   version "11.1.9"
-  resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-11.1.9.tgz#d872130fbf4ec51f28543d62e90451091d6f5208"
+  resolved "https://registry.npmjs.org/rc-slider/-/rc-slider-11.1.9.tgz"
   integrity sha512-h8IknhzSh3FEM9u8ivkskh+Ef4Yo4JRIY2nj7MrH6GQmrwV6mcpJf5/4KgH5JaVI1H3E52yCdpOlVyGZIeph5A==
   dependencies:
     "@babel/runtime" "^7.10.1"
@@ -1891,7 +1898,7 @@ rc-slider@^11.1.9:
 
 rc-util@^5.36.0:
   version "5.44.4"
-  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.44.4.tgz#89ee9037683cca01cd60f1a6bbda761457dd6ba5"
+  resolved "https://registry.npmjs.org/rc-util/-/rc-util-5.44.4.tgz"
   integrity sha512-resueRJzmHG9Q6rI/DfK6Kdv9/Lfls05vzMs1Sk3M2P+3cJa+MakaZyWY8IPfehVuhPJFKrIY1IK4GqbiaiY5w==
   dependencies:
     "@babel/runtime" "^7.18.3"
@@ -1916,7 +1923,7 @@ react-is@^16.13.1, react-is@^16.7.0:
 
 react-is@^18.2.0:
   version "18.3.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 
 react-lifecycles-compat@^3.0.0:
@@ -1949,7 +1956,7 @@ react-router@^7.8.0:
 
 react-sounds@^1.0.25:
   version "1.0.25"
-  resolved "https://registry.yarnpkg.com/react-sounds/-/react-sounds-1.0.25.tgz#cc7b176d05c7b8ae8e476749246160c76d325a60"
+  resolved "https://registry.npmjs.org/react-sounds/-/react-sounds-1.0.25.tgz"
   integrity sha512-szyOayVjaTomED1MSQdcNw5gBxHffClR982sl3yxeUi3hmmfJZf0Q1+hneab7z8x4khM64bvlrF4VQltzyEjUg==
   dependencies:
     howler "^2.2.3"
@@ -1969,12 +1976,17 @@ react-tabs@^6.1.0:
 
 react-universal-interface@^0.6.2:
   version "0.6.2"
-  resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b"
+  resolved "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz"
   integrity sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==
 
+react-use-websocket@^4.13.0:
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/react-use-websocket/-/react-use-websocket-4.13.0.tgz#9db1dbac6dc8ba2fdc02a5bba06205fbf6406736"
+  integrity sha512-anMuVoV//g2N76Wxqvqjjo1X48r9Np3y1/gMl7arX84tAPXdy5R7sB5lO5hvCzQRYjqXwV8XMAiEBOUbyrZFrw==
+
 react-use@^17.6.0:
   version "17.6.0"
-  resolved "https://registry.yarnpkg.com/react-use/-/react-use-17.6.0.tgz#2101a3a79dc965a25866b21f5d6de4b128488a14"
+  resolved "https://registry.npmjs.org/react-use/-/react-use-17.6.0.tgz"
   integrity sha512-OmedEScUMKFfzn1Ir8dBxiLLSOzhKe/dPZwVxcujweSj45aNM7BEGPb9BEVIgVEqEXx6f3/TsXzwIktNgUR02g==
   dependencies:
     "@types/js-cookie" "^2.2.6"
@@ -1999,7 +2011,7 @@ react@^19.1.1:
 
 resize-observer-polyfill@^1.5.1:
   version "1.5.1"
-  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  resolved "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz"
   integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
 
 resolve-from@^4.0.0:
@@ -2043,7 +2055,7 @@ rollup@^4.43.0:
 
 rtl-css-js@^1.16.1:
   version "1.16.1"
-  resolved "https://registry.yarnpkg.com/rtl-css-js/-/rtl-css-js-1.16.1.tgz#4b48b4354b0ff917a30488d95100fbf7219a3e80"
+  resolved "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz"
   integrity sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==
   dependencies:
     "@babel/runtime" "^7.1.2"
@@ -2062,7 +2074,7 @@ scheduler@^0.26.0:
 
 screenfull@^5.1.0:
   version "5.2.0"
-  resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-5.2.0.tgz#6533d524d30621fc1283b9692146f3f13a93d1ba"
+  resolved "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz"
   integrity sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==
 
 semver@^6.3.1:
@@ -2082,7 +2094,7 @@ set-cookie-parser@^2.6.0:
 
 set-harmonic-interval@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz#e1773705539cdfb80ce1c3d99e7f298bb3995249"
+  resolved "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz"
   integrity sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==
 
 shebang-command@^2.0.0:
@@ -2109,29 +2121,29 @@ source-map-js@^1.2.1:
 
 source-map@0.5.6:
   version "0.5.6"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz"
   integrity sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==
 
 source-map@^0.6.1:
   version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
 stack-generator@^2.0.5:
   version "2.0.10"
-  resolved "https://registry.yarnpkg.com/stack-generator/-/stack-generator-2.0.10.tgz#8ae171e985ed62287d4f1ed55a1633b3fb53bb4d"
+  resolved "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.10.tgz"
   integrity sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==
   dependencies:
     stackframe "^1.3.4"
 
 stackframe@^1.3.4:
   version "1.3.4"
-  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.3.4.tgz#b881a004c8c149a5e8efef37d51b16e412943310"
+  resolved "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz"
   integrity sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==
 
 stacktrace-gps@^3.0.4:
   version "3.1.2"
-  resolved "https://registry.yarnpkg.com/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz#0c40b24a9b119b20da4525c398795338966a2fb0"
+  resolved "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.1.2.tgz"
   integrity sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==
   dependencies:
     source-map "0.5.6"
@@ -2139,7 +2151,7 @@ stacktrace-gps@^3.0.4:
 
 stacktrace-js@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/stacktrace-js/-/stacktrace-js-2.0.2.tgz#4ca93ea9f494752d55709a081d400fdaebee897b"
+  resolved "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz"
   integrity sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==
   dependencies:
     error-stack-parser "^2.0.6"
@@ -2153,7 +2165,7 @@ strip-json-comments@^3.1.1:
 
 stylis@^4.3.0:
   version "4.3.6"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.6.tgz#7c7b97191cb4f195f03ecab7d52f7902ed378320"
+  resolved "https://registry.npmjs.org/stylis/-/stylis-4.3.6.tgz"
   integrity sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==
 
 supports-color@^7.1.0:
@@ -2187,7 +2199,7 @@ tar@^7.4.3:
 
 throttle-debounce@^3.0.1:
   version "3.0.1"
-  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb"
+  resolved "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz"
   integrity sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==
 
 tiny-warning@^1.0.2:
@@ -2212,7 +2224,7 @@ to-regex-range@^5.0.1:
 
 toggle-selection@^1.0.6:
   version "1.0.6"
-  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  resolved "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz"
   integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
 
 ts-api-utils@^2.1.0:
@@ -2222,7 +2234,7 @@ ts-api-utils@^2.1.0:
 
 ts-easing@^0.2.0:
   version "0.2.0"
-  resolved "https://registry.yarnpkg.com/ts-easing/-/ts-easing-0.2.0.tgz#c8a8a35025105566588d87dbda05dd7fbfa5a4ec"
+  resolved "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz"
   integrity sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==
 
 tslib@^2.0.0, tslib@^2.1.0, tslib@^2.4.0, tslib@^2.8.0:
@@ -2252,6 +2264,11 @@ typescript@~5.8.3:
   resolved "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz"
   integrity sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==
 
+undici-types@~7.16.0:
+  version "7.16.0"
+  resolved "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz"
+  integrity sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==
+
 update-browserslist-db@^1.1.3:
   version "1.1.3"
   resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz"
@@ -2269,7 +2286,7 @@ uri-js@^4.2.2:
 
 use-debounce@^10.0.6:
   version "10.0.6"
-  resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-10.0.6.tgz#e05060a5e561432ec740c653698f3eb162bd28ec"
+  resolved "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.6.tgz"
   integrity sha512-C5OtPyhAZgVoteO9heXMTdW7v/IbFI+8bSVKYCJrSmiWWCLsbUxiBSp4t9v0hNBTGY97bT72ydDIDyGSFWfwXg==
 
 vite@^7.1.0: