Merge pull request 'bugfix/fixesAndEnhancments' (#17) from bugfix/fixesAndEnhancments into develop

Reviewed-on: #17
2025-12-16 12:23:35 +00:00
parent 1ebd8aaa6f 26e9238518
commit 1c760cb2a8
28 changed files with 4191 additions and 181 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "in-car-system-fe",
  "private": true,
-  "version": "0.0.0",
+  "version": "1.0.20",
  "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",
--- a/public/NPED_Cat_D.svg
+++ b/public/NPED_Cat_D.svg
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,25 +9,28 @@ import { IntegrationsProvider } from "./context/providers/IntegrationsContextPro
 import { AlertHitProvider } from "./context/providers/AlertHitProvider";
 import { SoundProvider } from "react-sounds";
 import SoundContextProvider from "./context/providers/SoundContextProvider";
+import WebSocketProvider from "./context/providers/WebSocketProvider";

 function App() {
  return (
    <SoundContextProvider>
      <SoundProvider initialEnabled={true}>
-        <IntegrationsProvider>
-          <AlertHitProvider>
-            <Routes>
-              <Route path="/" element={<Container />}>
-                <Route index element={<Dashboard />} />
-                <Route path="a-camera-settings" element={<FrontCamera />} />
-                <Route path="b-camera-settings" element={<RearCamera />} />
-                <Route path="system-settings" element={<SystemSettings />} />
-                <Route path="session-settings" element={<Session />} />
-                <Route path="*" element={<Navigate to="/" replace />} />
-              </Route>
-            </Routes>
-          </AlertHitProvider>
-        </IntegrationsProvider>
+        <WebSocketProvider>
+          <IntegrationsProvider>
+            <AlertHitProvider>
+              <Routes>
+                <Route path="/" element={<Container />}>
+                  <Route index element={<Dashboard />} />
+                  <Route path="a-camera-settings" element={<FrontCamera />} />
+                  <Route path="b-camera-settings" element={<RearCamera />} />
+                  <Route path="system-settings" element={<SystemSettings />} />
+                  <Route path="session-settings" element={<Session />} />
+                  <Route path="*" element={<Navigate to="/" replace />} />
+                </Route>
+              </Routes>
+            </AlertHitProvider>
+          </IntegrationsProvider>
+        </WebSocketProvider>
      </SoundProvider>
    </SoundContextProvider>
  );
--- a/src/components/CameraSettings/CameraSettingFields.tsx
+++ b/src/components/CameraSettings/CameraSettingFields.tsx
@@ -44,7 +44,7 @@ const CameraSettingFields = ({
      userName: parsed?.username ?? "",
      password: parsed?.password ?? "",
      id: initialData?.id,
-      mode: cameraMode ?? "day",
+      mode: cameraMode ?? "",
      zoom: apiZoom,
    }),

--- a/src/components/HistoryList/AlertItem.tsx
+++ b/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>
--- a/src/components/HistoryList/HistoryList.tsx
+++ b/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">
--- a/src/components/PopupSettings/NPEDCategoryPopup.tsx
+++ b/src/components/PopupSettings/NPEDCategoryPopup.tsx
@@ -10,6 +10,7 @@ import { toast } from "sonner";

 const NPEDCategoryPopup = () => {
  const { state, dispatch } = useIntegrationsContext();
+
  const { mutation } = useCameraBlackboard();

  const isCatAEnabled = state?.iscatEnabled?.catA;
@@ -34,8 +35,8 @@ const NPEDCategoryPopup = () => {
    await mutation.mutateAsync({
      operation: "SAVE",
      path: "",
-      value: null
-    })
+      value: null,
+    });
    if (result?.reason === "OK") toast.success("Pop up settings saved");
    dispatch({ type: "NPEDCATENABLED", payload: values });
  };
@@ -44,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" />
--- a/src/components/SessionForm/SessionCard.tsx
+++ b/src/components/SessionForm/SessionCard.tsx
@@ -172,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>
--- a/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx
+++ b/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"
--- a/src/components/SightingModal/SightingModal.tsx
+++ b/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;
@@ -74,11 +75,19 @@ 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 (
    <>
@@ -133,17 +142,18 @@ 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.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>
@@ -158,44 +168,97 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
              <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>
+                    </div>

-                <div>
-                  <dt className="text-gray-300">Motion</dt>
-                  <dd className="font-medium text-2xl">{sighting?.motion ?? "-"}</dd>
-                </div>
-                <div>
-                  <dt className="text-gray-300">Seen Count</dt>
-                  <dd className="font-medium text-2xl">{sighting?.seenCount ?? "-"}</dd>
-                </div>
+                    {sighting?.make && sighting.make.trim() && sighting.make.toLowerCase() !== "disabled" && (
+                      <div>
+                        <dt className="text-gray-300">Make</dt>
+                        <dd className="font-medium text-2xl">{sighting.make}</dd>
+                      </div>
+                    )}

-                {sighting?.make && sighting.make.trim() && sighting.make.toLowerCase() !== "disabled" && (
-                  <div>
-                    <dt className="text-gray-300">Make</dt>
-                    <dd className="font-medium text-2xl">{sighting.make}</dd>
-                  </div>
+                    {sighting?.model && sighting.model.trim() && sighting.model.toLowerCase() !== "disabled" && (
+                      <div>
+                        <dt className="text-gray-300">Model</dt>
+                        <dd className="font-medium text-2xl">{sighting.model}</dd>
+                      </div>
+                    )}
+
+                    {sighting?.color && sighting.color.trim() && sighting.color.toLowerCase() !== "disabled" && (
+                      <div className="sm:col-span-2">
+                        <dt className="text-gray-300">Colour</dt>
+                        <dd className="font-medium text-2xl">{sighting.color}</dd>
+                      </div>
+                    )}
+
+                    <div>
+                      <dt className="text-gray-300">Time</dt>
+                      <dd className="font-medium text-xl">{sighting?.timeStamp ?? "-"}</dd>
+                    </div>
+                  </>
                )}
-
-                {sighting?.model && sighting.model.trim() && sighting.model.toLowerCase() !== "disabled" && (
-                  <div>
-                    <dt className="text-gray-300">Model</dt>
-                    <dd className="font-medium text-2xl">{sighting.model}</dd>
-                  </div>
-                )}
-
-                {sighting?.color && sighting.color.trim() && sighting.color.toLowerCase() !== "disabled" && (
-                  <div className="sm:col-span-2">
-                    <dt className="text-gray-300">Colour</dt>
-                    <dd className="font-medium text-2xl">{sighting.color}</dd>
-                  </div>
-                )}
-
-                <div>
-                  <dt className="text-gray-300">Time</dt>
-                  <dd className="font-medium text-xl">{sighting?.timeStamp ?? "-"}</dd>
-                </div>
              </dl>
            </aside>
          </div>
--- a/src/components/SightingsWidget/SightingWidget.tsx
+++ b/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,18 +64,24 @@ 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 id = sighting.vrm ?? sighting.ref;
-    if (processedRefs.current.has(id)) return;
+  const enqueue = useCallback(
+    (sighting: SightingType, kind: HitKind) => {
+      if (!sighting) return;

-    const inList = alertState?.alertList?.find((sighting) => sighting.vrm === id);
-    if (inList) {
-      return;
-    }
-    processedRefs.current.add(id);
+      const id = sighting.vrm ?? sighting.ref;
+      if (processedRefs.current.has(id)) return;

-    setModalQueue((q) => [...q, { id, sighting, kind }]);
-  }, []);
+      const inList = alertState?.alertList?.find((sighting) => sighting.vrm === id);
+      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,20 +158,41 @@ 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);
@@ -212,6 +215,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 (
@@ -230,6 +234,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>
--- a/src/components/UI/Footer.tsx
+++ b/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>
-    </footer>
+    <>
+      <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} 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} />
+    </>
  );
 };

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

        if (!isMounted) return;
-        if (!result?.result || typeof result.result === "string") return;

-        dispatch({ type: "UPDATE", payload: result.result });
-        dispatch({ type: "NPEDCATENABLED", payload: catResult.result });
+        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);
      }
--- a/src/context/providers/WebSocketProvider.tsx
+++ b/src/context/providers/WebSocketProvider.tsx
@@ -0,0 +1,40 @@
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+import type { InfoBarData } from "../../types/types";
+import useWebSocket from "react-use-websocket";
+import { ws_config } from "../../utils/ws_config";
+import { WebsocketContext, type WebsocketContextValue } from "../WebsocketContext";
+
+type WebSocketProviderProps = {
+  children: ReactNode;
+};
+
+const WebSocketProvider = ({ children }: WebSocketProviderProps) => {
+  const [systemData, setSystemData] = useState<InfoBarData | null>(null);
+
+  const infoSocket = useWebSocket(ws_config.infoBar, { share: true, shouldReconnect: () => true });
+
+  useEffect(() => {
+    async function parseData() {
+      if (infoSocket.lastMessage) {
+        const text = await infoSocket.lastMessage.data.text();
+        const data = JSON.parse(text);
+        setSystemData(data);
+      }
+    }
+    parseData();
+  }, [infoSocket.lastMessage]);
+
+  const value = useMemo<WebsocketContextValue>(
+    () => ({
+      info: {
+        data: systemData,
+        readyState: infoSocket.readyState,
+        sendJson: infoSocket.sendJsonMessage,
+      },
+    }),
+    [systemData, infoSocket.readyState, infoSocket.sendJsonMessage]
+  );
+  return <WebsocketContext.Provider value={value}>{children}</WebsocketContext.Provider>;
+};
+
+export default WebSocketProvider;
--- a/src/hooks/useCameraZoom.ts
+++ b/src/hooks/useCameraZoom.ts
@@ -11,7 +11,6 @@ const getCameraMode = async (options: { camera: string }) => {
 };

 const updateCameraMode = async (options: { camera: string; mode: string }) => {
-  console.log(options.mode);
  const dayNightPayload = {
    id: options.camera,
    fields: [
--- a/src/hooks/useGetVersions.ts
+++ b/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 };
+};
--- a/src/hooks/useSightingFeed.ts
+++ b/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();
--- a/src/index.css
+++ b/src/index.css
@@ -37,3 +37,33 @@ body {
  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;
+}
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -367,7 +367,7 @@ export type SoundAction = UpdateAction | AddAction | VolumeAction | UploadedStat
 export type WifiSettingValues = {
  ssid: string;
  password: string;
-  encryption: string;
+  encryption?: string;
 };
 export type ModemConfigPayload = {
  property: string;
@@ -445,3 +445,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;
+};
--- a/src/utils/utils.ts
+++ b/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:
--- a/src/utils/ws_config.ts
+++ b/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`,
+};
--- a/src/vite-env.d.ts
+++ b/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;
--- a/vite.config.ts
+++ b/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({
@@ -15,4 +33,10 @@ export default defineConfig({
    },
  },
  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),
+  },
 });
--- a/yarn.lock
+++ b/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: