fix: update version to 1.0.17 in package.json

Reviewed-on: #16

README.md

@@ -1,69 +1,116 @@
-# React + TypeScript + Vite
+# Mav Mobile UI
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This is a React-based web application built with Vite (react and typescript).
 
-Currently, two official plugins are available:
+## Getting started
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+### Prerequisites
 
-## Expanding the ESLint configuration
+- Node.js (v18 or higher recommended)
+- Yarn (v1.22+) (https://yarnpkg.com/)
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+### Installation
 
-```js
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      ...tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      ...tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      ...tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+```bash
+git clone https://mavportal.com/TobaOjo/Mav-Mobile-UI.git
+cd Mav-Mobile-UI
+yarn install
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+### Running Locally
+
+```bash
+yarn dev
+```
+
+The app will be available at `http://localhost:5173`.
+
+To run on locally on other devices
+
+```bash
+yarn dev --host
+```
+
+The app will be available at the exposed addresses to access e.g. http://1xx.xxx.x.xxx:<PORT>/Mobile
+
+## Tech Stack
+
+- **React** – UI library
+- **Vite** – Build tool
+- **Yarn** – Package manager
+
+## Configuration
+
+Create a `.env` file to access the Mav Mobile box in unit 5 for or for any environment-specific settings:
+
+```env
+VITE_AGX_BOX_URL=http://1xx.xxx.xxx.xxx:<PORT>
+```
+
+## Development
+
+### Linting & Formatting
+
+```bash
+yarn lint
+yarn format
+```
+
+### Testing
+
+(Currently not implemented – consider adding Jest or Vitest)
+
+## Deployment
+
+To build for production:
+Navigate to the Mav-Mobile-UI folder
+
+```bash
+cd Mav-Mobile-UI
+```
+
+**Delete** the local .env (Production will use its own domain)
+
+run
+
+```bash
+yarn build
+```
+
+- Navigate to your Mav-Mobile-UI folder
+- Select the Dist folder
+- Compress to (ZIP)
+- Log into box on Moba using Session > SSH and putting IP in Remote Host.
+- Creds are mav:mav
+- Drag and drop dist.zip into file explorer menu on left hand side (has to be named dist.zip exactly).
+- Run command
+
+```bash
+sudo ./integrate-web-ui.sh
+```
+
+Run
+
+```bash
+sudo nano web-static/index.html
+```
+
+- add the following between the lines </body> & </html>
 
 ```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+<foot>
+<script>
+      if (window.location.pathname !== "/Mobile") {
+          window.location.replace(window.location.origin + "/Mobile");
+      }
+</script>
+</foot>
 ```
+
+- Run
+
+```bash
+sudo reboot
+```
+
+It should come back up all working

package.json

@@ -1,7 +1,7 @@
 {
   "name": "in-car-system-fe",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.17",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -37,6 +37,7 @@
   },
   "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/App.tsx

@@ -19,8 +19,8 @@ function App() {
             <Routes>
               <Route path="/" element={<Container />}>
                 <Route index element={<Dashboard />} />
-                <Route path="camera-settings" element={<FrontCamera />} />
-                <Route path="rear-camera-settings" element={<RearCamera />} />
+                <Route path="a-camera-settings" element={<FrontCamera />} />
+                <Route path="b-camera-settings" element={<RearCamera />} />
                 <Route path="system-settings" element={<SystemSettings />} />
                 <Route path="session-settings" element={<Session />} />
                 <Route path="*" element={<Navigate to="/" replace />} />

src/components/CameraOverview/SnapshotContainer.tsx

@@ -1,11 +1,8 @@
 import { useGetOverviewSnapshot } from "../../hooks/useGetOverviewSnapshot";
-import type { ZoomInOptions } from "../../types/types";
 import NavigationArrow from "../UI/NavigationArrow";
-import { useCameraZoom } from "../../hooks/useCameraZoom";
-import { useEffect } from "react";
+
 import Loading from "../UI/Loading";
 import ErrorState from "../UI/ErrorState";
-
 type SnapshotContainerProps = {
   side: string;
   settingsPage?: boolean;
@@ -13,52 +10,20 @@ type SnapshotContainerProps = {
   onZoomLevelChange?: (level: number) => void;
 };
 
-export const SnapshotContainer = ({
-  side,
-  settingsPage,
-  zoomLevel,
-  onZoomLevelChange,
-}: SnapshotContainerProps) => {
+export const SnapshotContainer = ({ side, settingsPage }: SnapshotContainerProps) => {
   const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side);
-  const cameraControllerSide =
-    side === "CameraA" ? "CameraControllerA" : "CameraControllerB";
-  const { mutation } = useCameraZoom({ camera: cameraControllerSide });
-
-  const handleZoomClick = () => {
-    const baseLevel = zoomLevel ?? 1;
-    const newLevel = baseLevel >= 8 ? 1 : baseLevel * 2;
-
-    if (onZoomLevelChange) onZoomLevelChange(newLevel);
-
-    if (!zoomLevel) return;
-  };
-
-  useEffect(() => {
-    if (zoomLevel) {
-      const zoomInOptions: ZoomInOptions = {
-        camera: cameraControllerSide,
-        multiplier: zoomLevel,
-      };
-      mutation.mutate(zoomInOptions);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [zoomLevel]);
 
   return (
     <div className="flex flex-col md:flex-row">
       <NavigationArrow side={side} settingsPage={settingsPage} />
-      <div className="w-full">
+      <div className="w-full bg-[#253445] rounded-md overflow-hidden md:h-[500px] lg:h-[70vh]">
         {isError && <ErrorState />}
         {isPending && (
-          <div className="my-50 h-[50%]">
+          <div className="absolute inset-0 grid place-items-center">
             <Loading message="Camera Preview" />
           </div>
         )}
-        <canvas
-          onClick={handleZoomClick}
-          ref={canvasRef}
-          className="absolute inset-0 object-contain min-h-[100%] z-20"
-        />
+        <canvas ref={canvasRef} className="absolute w-full h-full z-20" />
       </div>
     </div>
   );

src/components/CameraSettings/CameraSettingFields.tsx

@@ -4,14 +4,14 @@ import { useEffect, useMemo, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
 import CardHeader from "../UI/CardHeader";
-import { useCameraZoom } from "../../hooks/useCameraZoom";
-import { parseRTSPUrl } from "../../utils/utils";
+import { useCameraMode, useCameraZoom } from "../../hooks/useCameraZoom";
+import { capitalize, parseRTSPUrl, reverseZoomMapping, zoomMapping } from "../../utils/utils";
 
 type CameraSettingsProps = {
   initialData: CameraConfig;
   updateCameraConfig: (values: CameraSettingValues) => Promise<void> | void;
   zoomLevel?: number;
-  onZoomLevelChange?: (level: number) => void;
+  onZoomLevelChange?: (level: number | undefined) => void;
   updateCameraConfigError: null | Error;
 };
 
@@ -20,38 +20,22 @@ const CameraSettingFields = ({
   updateCameraConfig,
   zoomLevel,
   onZoomLevelChange,
-  updateCameraConfigError,
 }: CameraSettingsProps) => {
   const [showPwd, setShowPwd] = useState(false);
+
   const cameraControllerSide = initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB";
   const { mutation, query } = useCameraZoom({ camera: cameraControllerSide });
-  const zoomOptions = [1, 2, 4, 8];
-
+  const { cameraModeQuery, cameraModeMutation } = useCameraMode({ camera: cameraControllerSide });
+  const zoomOptions = [1, 2, 4];
+  const magnification = query?.data?.propMagnification?.value;
+  const apiZoom = reverseZoomMapping(magnification);
   const parsed = parseRTSPUrl(initialData?.propURI?.value);
+  const cameraMode = cameraModeQuery?.data?.propDayNightMode?.value;
 
   useEffect(() => {
     if (!query?.data) return;
-    const apiZoom = getZoomLevel(query.data);
     onZoomLevelChange?.(apiZoom);
-  }, [query?.data, onZoomLevelChange]);
-
-  const getZoomLevel = (levelstring: string | undefined) => {
-    switch (levelstring) {
-      case "1x":
-        return 1;
-
-      case "2x":
-        return 2;
-
-      case "4x":
-        return 4;
-
-      case "8x":
-        return 8;
-      default:
-        return 1;
-    }
-  };
+  }, [query?.data, onZoomLevelChange, apiZoom]);
 
   const initialValues = useMemo<CameraSettingValues>(
     () => ({
@@ -60,11 +44,11 @@ const CameraSettingFields = ({
       userName: parsed?.username ?? "",
       password: parsed?.password ?? "",
       id: initialData?.id,
-
-      zoom: zoomLevel,
+      mode: cameraMode ?? "day",
+      zoom: apiZoom,
     }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [initialData?.id, initialData?.propURI?.value, zoomLevel]
+
+    [initialData?.id, initialData?.propURI?.value, parsed?.username, parsed?.password, cameraMode, apiZoom]
   );
 
   const validateValues = (values: CameraSettingValues) => {
@@ -80,15 +64,18 @@ const CameraSettingFields = ({
 
   const handleRadioButtonChange = async (levelNumber: number) => {
     if (!onZoomLevelChange || !zoomLevel) return;
+    const text = zoomMapping(levelNumber);
     onZoomLevelChange(levelNumber);
 
     const zoomInOptions: ZoomInOptions = {
       camera: cameraControllerSide,
       multiplier: levelNumber,
+      multiplierText: text,
     };
 
     mutation.mutate(zoomInOptions);
   };
+
   const selectedZoom = zoomLevel ?? 1;
   return (
     <Formik
@@ -98,8 +85,8 @@ const CameraSettingFields = ({
       validateOnChange={false}
       enableReinitialize
     >
-      {({ errors, touched }) => (
-        <Form className="flex flex-col space-y-6 p-2">
+      {({ errors, touched, values, setFieldValue, isSubmitting }) => (
+        <Form className="flex flex-col space-y-6 p-2 overflow-x-hidden">
           <div className="flex flex-col space-y-2 relative">
             <label htmlFor="friendlyName">Name</label>
             {touched.friendlyName && errors.friendlyName && (
@@ -111,7 +98,6 @@ const CameraSettingFields = ({
               type="text"
               className="p-2 border border-gray-400 rounded-lg"
               placeholder="Enter camera name"
-              disabled
             />
           </div>
 
@@ -126,7 +112,6 @@ const CameraSettingFields = ({
               type="text"
               className="p-2 border border-gray-400 rounded-lg"
               placeholder="RTSP://..."
-              disabled
             />
           </div>
 
@@ -142,7 +127,6 @@ const CameraSettingFields = ({
               className="p-2 border border-gray-400 rounded-lg"
               placeholder="Enter user name"
               autoComplete="username"
-              disabled
             />
           </div>
 
@@ -158,7 +142,6 @@ const CameraSettingFields = ({
                 type={showPwd ? "text" : "password"}
                 className="p-2 border border-gray-400 rounded-lg w-full "
                 placeholder="Enter password"
-                disabled
               />
               <FontAwesomeIcon
                 type="button"
@@ -169,7 +152,7 @@ const CameraSettingFields = ({
             </div>
             <div className="my-3">
               <CardHeader title="Zoom settings" />
-              <div className="mx-auto grid grid-cols-4 items-center">
+              <div className="mx-auto grid grid-cols-3 place-items-center">
                 {zoomOptions.map((zoom) => (
                   <div key={zoom} className="my-3">
                     <Field
@@ -187,27 +170,53 @@ const CameraSettingFields = ({
                    peer-checked:border-2 peer-checked:border-blue-900  
                    peer-checked:text-blue-600 peer-checked:bg-gray-100"
                     >
-                      x{zoom}
+                      {zoomMapping(zoom)}
+                    </label>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div>
+              <CardHeader title="Mode" />
+              <div
+                role="radiogroup"
+                aria-label="Camera mode"
+                className="mx-auto grid grid-cols-3 place-items-center gap-3"
+              >
+                {["day", "night", "auto"].map((el) => (
+                  <div key={el} className="my-3">
+                    <Field
+                      type="radio"
+                      name="mode"
+                      value={el}
+                      checked={values.mode === el}
+                      id={`mode-${el}`}
+                      className="peer hidden"
+                      disabled={cameraModeMutation.isPending}
+                      onChange={async () => {
+                        setFieldValue("mode", el);
+                        await cameraModeMutation.mutateAsync({ camera: cameraControllerSide, mode: el });
+                      }}
+                    />
+                    <label
+                      htmlFor={`mode-${el}`}
+                      className={`px-8 py-2 rounded-md border border-gray-300
+                peer-checked:border-2 peer-checked:border-blue-900
+                peer-checked:text-blue-600 peer-checked:bg-gray-100
+                ${cameraModeMutation.isPending ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`}
+                    >
+                      {capitalize(el)}
                     </label>
                   </div>
                 ))}
               </div>
             </div>
             <div className="mt-3">
-              {updateCameraConfigError ? (
-                <button className="bg-red-500 text-white rounded-lg p-2 mx-auto h-[100%] w-full" disabled>
-                  Retry
+              {
+                <button type="submit" className="bg-green-700 text-white rounded-lg p-2 mx-auto w-full">
+                  {isSubmitting ? "Saving" : "Save settings"}
                 </button>
-              ) : (
-                <button
-                  type="submit"
-                  className="bg-blue-700 text-white rounded-lg p-2 mx-auto h-[100%] w-full"
-                  disabled
-                >
-                  {/* {isSubmitting ? "Saving" : "Save settings"} bg-[#26B170] */}
-                  {"Disabled: Coming soon"}
-                </button>
-              )}
+              }
             </div>
           </div>
         </Form>

src/components/CameraSettings/CameraSettings.tsx

@@ -13,15 +13,14 @@ const CameraSettings = ({
   title: string;
   side: string;
   zoomLevel?: number;
-  onZoomLevelChange?: (level: number) => void;
+  onZoomLevelChange?: (level: number | undefined) => void;
 }) => {
   const { data, updateCameraConfig, updateCameraConfigError } = useFetchCameraConfig(side);
 
   return (
-    <Card className="overflow-hidden min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[40%] p-4">
+    <Card className="overflow-x-visible min-h-[40vh] md:min-h-[60vh] lg:w-[40%] p-4">
       <div className="relative flex flex-col space-y-3">
         <CardHeader title={title} icon={faWrench} />
-
         {
           <CameraSettingFields
             initialData={data}

src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx

@@ -8,8 +8,8 @@ import SightingOverview from "../SightingOverview/SightingOverview";
 const FrontCameraOverviewCard = () => {
   const navigate = useNavigate();
   const handlers = useSwipeable({
-    onSwipedRight: () => navigate("/camera-settings"),
-    onSwipedLeft: () => navigate("/rear-camera-settings"),
+    onSwipedRight: () => navigate("/a-camera-settings"),
+    onSwipedLeft: () => navigate("/b-camera-settings"),
     trackMouse: true,
   });
 

src/components/FrontCameraSettings/OverviewVideoContainer.tsx

@@ -20,17 +20,17 @@ const OverviewVideoContainer = ({
   const location = useLocation();
   const handlers = useSwipeable({
     onSwipedLeft: () => {
-      if (location.pathname === "/rear-camera-settings") return;
+      if (location.pathname === "/b-camera-settings") return;
       navigate("/");
     },
     onSwipedRight: () => {
-      if (location.pathname === "/camera-settings") return;
+      if (location.pathname === "/a-camera-settings") return;
       navigate("/");
     },
     trackMouse: true,
   });
   return (
-    <Card className={clsx("relative min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[70%] overflow-y-hidden")}>
+    <Card className={clsx("relative min-h-[40vh] md:min-h-[40vh] max-h-[70vh] lg:w-[70%] overflow-y-hidden")}>
       <div className="w-full" {...handlers}>
         <SnapshotContainer
           side={side}

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/PlateStack/NumberPlate.tsx

@@ -40,9 +40,7 @@ const NumberPlate = ({ motion, vrm, size }: NumberPlateProps) => {
 
   return (
     <div
-      className={`relative ${options.plateWidth} ${
-        options.borderWidth
-      } border-black rounded-xl text-nowrap
+      className={`relative ${options.plateWidth} ${options.borderWidth} border-black rounded-xl text-nowrap
         text-black px-6 py-2
         ${motion ? "bg-yellow-400" : "bg-white"}`}
     >
@@ -50,9 +48,7 @@ const NumberPlate = ({ motion, vrm, size }: NumberPlateProps) => {
         <div className="absolute inset-y-0 left-0 bg-blue-600 w-8 flex flex-col">
           <GB />
         </div>
-        <p className={`pl-4 font-extrabold ${options.textSize} text-right`}>
-          {vrm && formatNumberPlate(vrm)}
-        </p>
+        <p className={`pl-4 font-extrabold ${options.textSize} text-right`}>{vrm && formatNumberPlate(vrm)}</p>
       </div>
     </div>
   );

src/components/PopupSettings/NPEDCategoryPopup.tsx

@@ -0,0 +1,74 @@
+import Card from "../UI/Card";
+import CardHeader from "../UI/CardHeader";
+import NPEDCatToggle from "../SettingForms/NPED/NPEDCatToggle";
+import FormGroup from "../SettingForms/components/FormGroup";
+import { Form, Formik } from "formik";
+import { useIntegrationsContext } from "../../context/IntegrationsContext";
+import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
+import type { CategoryPopups } from "../../types/types";
+import { toast } from "sonner";
+
+const NPEDCategoryPopup = () => {
+  const { state, dispatch } = useIntegrationsContext();
+
+  const { mutation } = useCameraBlackboard();
+
+  const isCatAEnabled = state?.iscatEnabled?.catA;
+  const isCatBEnabled = state?.iscatEnabled?.catB;
+  const isCatCEnabled = state?.iscatEnabled?.catC;
+  const isCatDEnabled = state?.iscatEnabled?.catD;
+
+  const initialValues = {
+    catA: isCatAEnabled ?? true,
+    catB: isCatBEnabled ?? true,
+    catC: isCatCEnabled ?? true,
+    catD: isCatDEnabled ?? false,
+  };
+
+  const handleSubmit = async (values: CategoryPopups) => {
+    const result = await mutation.mutateAsync({
+      operation: "INSERT",
+      value: values,
+      path: "CategoryPopup",
+    });
+
+    await mutation.mutateAsync({
+      operation: "SAVE",
+      path: "",
+      value: null,
+    });
+    if (result?.reason === "OK") toast.success("Pop up settings saved");
+    dispatch({ type: "NPEDCATENABLED", payload: values });
+  };
+
+  return (
+    <Card className="p-4">
+      <CardHeader title={"Alert Pop ups"} />
+      <p className="italic my-2">Allows alerts to pop up to user.</p>
+      <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
+        <Form className="flex flex-col space-y-5 px-2">
+          <FormGroup>
+            <NPEDCatToggle name={"catA"} label="NPED Category A" />
+          </FormGroup>
+          <FormGroup>
+            <NPEDCatToggle name={"catB"} label="NPED Category B" />
+          </FormGroup>
+          <FormGroup>
+            <NPEDCatToggle name={"catC"} label="NPED Category C" />
+          </FormGroup>
+          <FormGroup>
+            <NPEDCatToggle name={"catD"} label="NPED Category D" />
+          </FormGroup>
+          <button
+            type="submit"
+            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+          >
+            Save
+          </button>
+        </Form>
+      </Formik>
+    </Card>
+  );
+};
+
+export default NPEDCategoryPopup;

src/components/RearCameraOverview/RearCameraOverviewCard.tsx

@@ -13,7 +13,7 @@ type CardProps = React.HTMLAttributes<HTMLDivElement>;
 const RearCameraOverviewCard = ({ className }: CardProps) => {
   const navigate = useNavigate();
   const handlers = useSwipeable({
-    onSwipedLeft: () => navigate("/rear-camera-settings"),
+    onSwipedLeft: () => navigate("/b-camera-settings"),
     trackMouse: true,
   });
   const { mostRecent } = useSightingFeedContext();

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";
 
@@ -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/BearerType/BearerTypeCard.tsx

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

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

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

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

@@ -58,9 +58,7 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) =>
                 type="text"
                 id="backoffice"
                 placeholder="https://www.backoffice.com"
-                className={`p-1.5 border ${
-                  errors.backOfficeURL && touched.backOfficeURL ? "border-red-500" : "border-gray-400 "
-                } rounded-lg w-full md:w-60`}
+                className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
               />
             </FormGroup>
             <FormGroup>
@@ -70,9 +68,7 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) =>
                 type="text"
                 id="username"
                 placeholder="Back office username"
-                className={`p-1.5 border ${
-                  errors.username && touched.username ? "border-red-500" : "border-gray-400 "
-                } rounded-lg w-full md:w-60`}
+                className={`p-1.5 border border-gray-400 rounded-lg w-full md:w-60`}
               />
             </FormGroup>
             <FormGroup>
@@ -119,9 +115,38 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) =>
                 } rounded-lg w-full md:w-60`}
               />
             </FormGroup>
-
+            {/* Overview quality and scale */}
+            <FormGroup>
+              <label htmlFor="overviewQuality">Overview quality and scale</label>
+              <Field
+                name={"overviewQuality"}
+                as="select"
+                id="overviewQuality"
+                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+              >
+                <option value={"HIGH"}>High</option>
+                <option value={"MEDIUM"}>Medium</option>
+                <option value={"LOW"}>Low</option>
+              </Field>
+            </FormGroup>
+            {/* propOverviewImageScaleFactor cropSizeFactor */}
+            <FormGroup>
+              <label htmlFor="cropSizeFactor">Crop Size Factor</label>
+              <Field
+                name={"cropSizeFactor"}
+                as="select"
+                id="cropSizeFactor"
+                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+              >
+                <option value={"FULL"}>Full</option>
+                <option value={"3/4"}>3/4</option>
+                <option value={"1/2"}>1/2</option>
+                <option value={"1/4"}>1/4</option>
+              </Field>
+            </FormGroup>
             {format?.toLowerCase() === "bof2" && (
               <>
+                <div className="space-y-3">
                   <div className="border-b border-gray-500 my-3">
                     <h2 className="font-bold">{values.format} Constants</h2>
                   </div>
@@ -137,7 +162,6 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) =>
                       } rounded-lg w-full md:w-60`}
                     />
                   </FormGroup>
-
                   <FormGroup>
                     <label htmlFor="SCID">Source ID / Camera ID</label>
                     <Field
@@ -150,7 +174,6 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) =>
                       } rounded-lg w-full md:w-60`}
                     />
                   </FormGroup>
-
                   <FormGroup>
                     <label htmlFor="timestampSource">Timestamp Source</label>
                     <Field
@@ -159,9 +182,8 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) =>
                       id="timestampSource"
                       className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
                     >
-                    <option value="">-- Select format --</option>
                       <option value={"UTC"}>UTC</option>
-                    <option value={"local"}>Local</option>
+                      <option value={"LOCAL"}>Local</option>
                     </Field>
                   </FormGroup>
                   <FormGroup>
@@ -172,18 +194,47 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) =>
                       id="GPSFormat"
                       className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
                     >
-                    <option value="">-- Select format --</option>
-                    <option value={"Decimal degrees"}>Decimal degrees</option>
-                    <option value={"minutes"}>Minutes</option>
+                      <option value={"Minutes"}>Minutes</option>
+                      <option value={"Decimal Degrees"}>Decimal degrees</option>
                     </Field>
                   </FormGroup>
+                </div>
+                <div className="space-y-3">
+                  <div className="border-b border-gray-500 my-3">
+                    <h2 className="font-bold">{values.format} Lane ID Config</h2>
+                  </div>
+                  <FormGroup>
+                    <label htmlFor="LID1">Lane ID 1 (Camera A)</label>
+                    <Field
+                      name={"LID1"}
+                      type="text"
+                      id="LID1"
+                      placeholder="10"
+                      className={`p-1.5 border ${
+                        errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                      } rounded-lg w-full md:w-60`}
+                    />
+                  </FormGroup>
+                  <FormGroup>
+                    <label htmlFor="LID2">Lane ID 2 (Camera B)</label>
+                    <Field
+                      name={"LID2"}
+                      type="text"
+                      id="LID2"
+                      placeholder="20"
+                      className={`p-1.5 border ${
+                        errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                      } rounded-lg w-full md:w-60`}
+                    />
+                  </FormGroup>
+                </div>
               </>
             )}
           </div>
 
           <button
             type="submit"
-            className="w-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/NPEDCatToggle.tsx

@@ -0,0 +1,22 @@
+import { Field } from "formik";
+
+type NPEDToggleProps = {
+  name: string;
+  label: string;
+};
+
+const NPEDCatToggle = ({ name, label }: NPEDToggleProps) => {
+  return (
+    <label className="flex items-center gap-3 cursor-pointer select-none w-full justify-between">
+      <span className="text-lg">{label}</span>
+      <Field id={name} type="checkbox" name={name} className="sr-only peer" />
+      <div
+        className="relative w-10 h-5 rounded-full bg-gray-300 transition peer-checked:bg-blue-500 after:content-[''] 
+      after:absolute after:top-0.5 after:left-0.5 after:w-4 after:h-4 after:rounded-full after:bg-white after:shadow after:transition 
+      after:duration-300 peer-checked:after:translate-x-5"
+      />
+    </label>
+  );
+};
+
+export default NPEDCatToggle;

src/components/SettingForms/NPED/NPEDFields.tsx

@@ -13,20 +13,18 @@ const NPEDFields = () => {
   const [showPwd, setShowPwd] = useState(false);
   const { signIn, signOut } = useNPEDAuth();
 
-  const initialValues = state.npedUser
-    ? {
-        username: state.npedUser?.propUsername?.value,
-        password: state.npedUser?.propPassword?.value,
-        clientId: state.npedUser?.propClientID?.value,
-        frontId: "NPED",
-        rearId: "NPED",
-      }
-    : {
-        username: "",
-        password: "",
-        clientId: "",
-        frontId: "NPED",
-        rearId: "NPED",
+  const username = state.npedUser?.propUsername?.value;
+  const password = state.npedUser?.propPassword?.value;
+  const clientId = state.npedUser?.propClientID?.value;
+  const frontId = "NPED";
+  const rearId = "NPED";
+
+  const initialValues = {
+    username: username ?? "",
+    password: password ?? "",
+    clientId: clientId ?? "",
+    frontId: frontId,
+    rearId: rearId,
   };
 
   const handleSubmit = async (values: NPEDFieldType) => {
@@ -100,17 +98,18 @@ const NPEDFields = () => {
               className="p-1.5 border border-gray-400 rounded-lg"
             />
           </FormGroup>
+
           {!state.npedUser?.propClientID?.value ? (
             <button
               type="submit"
-              className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
+              className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
             >
               {isSubmitting ? "Logging in..." : "Login"}
             </button>
           ) : (
             <button
               type="button"
-              className="w-1/4  border-red-700 bg-red-800 text-white font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
+              className="w-full md:w-1/4  border-red-700 bg-red-800 text-white font-small rounded-lg text-sm px-2 py-2.5 hover:cursor-pointer"
               onClick={handleLogoutClick}
             >
               Logout

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

@@ -7,27 +7,42 @@ import type {
   InitialValuesForm,
   InitialValuesFormErrors,
   OptionalBOF2Constants,
+  OptionalBOF2LaneIDs,
 } from "../../../types/types";
 import { useQueryClient } from "@tanstack/react-query";
 import { useUpdateBackOfficeConfig } from "../../../hooks/useBackOfficeConfig";
 import { useFormVaidate } from "../../../hooks/useFormValidate";
+import { useSightingAmend } from "../../../hooks/useSightingAmend";
+import StoreCard from "../Store/StoreCard";
 
 const SettingForms = () => {
   const qc = useQueryClient();
-  const { dispatcherQuery, dispatcherMutation, backOfficeDispatcherMutation } = useCameraOutput();
+  const { dispatcherQuery, dispatcherMutation, backOfficeDispatcherMutation, bof2LandMutation, laneIdQuery } =
+    useCameraOutput();
   const { backOfficeMutation } = useUpdateBackOfficeConfig();
   const { bof2ConstantsQuery } = useGetDispatcherConfig();
   const { validateMutation } = useFormVaidate();
+  const { sightingAmendQuery, sightingAmendMutation } = useSightingAmend();
 
   const format = dispatcherQuery?.data?.propFormat?.value;
   const enabled = dispatcherQuery?.data?.propEnabled?.value;
 
+  const sightingQuality = sightingAmendQuery?.data?.propOverviewQuality?.value;
+  const cropSizeFactor = sightingAmendQuery?.data?.propOverviewImageScaleFactor?.value;
+
+  const laneID = laneIdQuery?.data?.id;
+  const LID1 = laneIdQuery?.data?.propLaneID1?.value;
+  const LID2 = laneIdQuery?.data?.propLaneID2?.value;
+
   const FFID = bof2ConstantsQuery?.data?.propFeedIdentifier?.value;
   const SCID = bof2ConstantsQuery?.data?.propSourceIdentifier?.value;
   const GPSFormat = bof2ConstantsQuery?.data?.propGpsFormat?.value;
   const timestampSource = bof2ConstantsQuery?.data?.propTimeZoneType?.value;
 
-  const initialValues: BearerTypeFieldType & InitialValuesForm & OptionalBOF2Constants = {
+  const isDispatcherLoading = dispatcherQuery?.isFetching;
+  const isBof2ConstantsLoading = bof2ConstantsQuery?.isFetching;
+
+  const initialValues: BearerTypeFieldType & InitialValuesForm & OptionalBOF2Constants & OptionalBOF2LaneIDs = {
     format: format ?? "JSON",
     enabled: enabled === "true",
     backOfficeURL: "",
@@ -35,27 +50,24 @@ const SettingForms = () => {
     password: "",
     connectTimeoutSeconds: Number(5),
     readTimeoutSeconds: Number(15),
+    overviewQuality: sightingQuality ?? "HIGH",
+    cropSizeFactor: cropSizeFactor ?? "3/4",
 
     // Bof2 - optional constants
     FFID: FFID ?? "",
     SCID: SCID ?? "",
     timestampSource: timestampSource ?? "",
     GPSFormat: GPSFormat ?? "",
+
+    //BOF2 - optional Lane IDs
+    laneId: laneID ?? "",
+    LID1: LID1 ?? "",
+    LID2: LID2 ?? "",
   };
 
   const validateValues = (values: InitialValuesForm): InitialValuesFormErrors => {
     const errors: InitialValuesFormErrors = {};
 
-    const url = values.backOfficeURL?.trim();
-    const username = values.username?.trim();
-    const password = values.password?.trim();
-    if (!url) {
-      errors.backOfficeURL = "Required";
-    }
-
-    if (!username) errors.username = "Required";
-    if (!password) errors.password = "Required";
-
     const read = Number(values.readTimeoutSeconds);
     if (!Number.isFinite(read)) {
       errors.readTimeoutSeconds = "Must be a number";
@@ -72,10 +84,11 @@ const SettingForms = () => {
     return errors;
   };
 
-  const handleSubmit = async (values: BearerTypeFieldType & InitialValuesForm & OptionalBOF2Constants) => {
-    // if (formErrors && Object.entries(formErrors).length > 0) {
-    //   return;
-    // }
+  const handleSubmit = async (
+    values: BearerTypeFieldType & InitialValuesForm & OptionalBOF2Constants & OptionalBOF2LaneIDs
+  ) => {
+    const validResponse = await validateMutation.mutateAsync(values);
+
     const dispatcherData = {
       format: values.format,
       enabled: values.enabled,
@@ -85,13 +98,10 @@ const SettingForms = () => {
     if (result?.id) {
       qc.invalidateQueries({ queryKey: ["dispatcher"] });
       qc.invalidateQueries({ queryKey: ["backoffice", values.format] });
-      const validResponse = await validateMutation.mutateAsync(values);
+
       if (validResponse?.reason === "OK") {
         await backOfficeMutation.mutateAsync(values);
-      } else {
-        return;
-      }
-    }
+        await sightingAmendMutation.mutateAsync(values);
 
         if (values.format.toLowerCase() === "bof2") {
           const bof2ConstantsData: OptionalBOF2Constants = {
@@ -100,8 +110,20 @@ const SettingForms = () => {
             timestampSource: values.timestampSource,
             GPSFormat: values.GPSFormat,
           };
+
+          const bof2LaneData: OptionalBOF2LaneIDs = {
+            laneId: laneIdQuery?.data?.id,
+            LID1: values.LID1,
+            LID2: values.LID2,
+          };
+          await bof2LandMutation.mutateAsync(bof2LaneData);
           await backOfficeDispatcherMutation.mutateAsync(bof2ConstantsData);
         }
+      } else {
+        console.log("error");
+        return;
+      }
+    }
   };
 
   return (
@@ -109,8 +131,17 @@ const SettingForms = () => {
       {({ isSubmitting, touched }) => (
         <Form>
           <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-2 sm:px-4 lg:px-0 w-full">
+            <div>
               <BearerTypeCard />
-            <ChannelCard touched={touched} isSubmitting={isSubmitting} />
+              <StoreCard />
+            </div>
+
+            <ChannelCard
+              touched={touched}
+              isSubmitting={isSubmitting}
+              isDispatcherLoading={isDispatcherLoading}
+              isBof2ConstantsLoading={isBof2ConstantsLoading}
+            />
           </div>
         </Form>
       )}

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

@@ -46,7 +46,11 @@ const SoundUpload = () => {
     if (result.reason !== "OK") {
       toast.error("Cannot update sound settings");
     }
-
+    await mutation.mutateAsync({
+      operation: "SAVE",
+      path: "",
+      value: null,
+    });
     dispatch({ type: "ADD", payload: values });
   };
 
@@ -96,7 +100,7 @@ const SoundUpload = () => {
           {errors.soundFile && <p className="text-red-500 text-sm mt-1">Not an mp3 file</p>}
           <button
             type="submit"
-            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 mt-[5%]"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 mt-[5%]"
             disabled={errors.soundFile ? true : false}
           >
             Upload

src/components/SettingForms/Store/StoreCard.tsx

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

src/components/SettingForms/Store/StoreFields.tsx

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

src/components/SettingForms/System/SettingSaveRecall.tsx

@@ -2,6 +2,8 @@ import { toast } from "sonner";
 import type { SystemValues } from "../../../types/types";
 import { CAM_BASE } from "../../../utils/config";
 
+const camBase = import.meta.env.MODE !== "development" ? CAM_BASE : "";
+
 export async function handleSystemSave(values: SystemValues) {
   const payload = {
     // Build JSON
@@ -18,7 +20,7 @@ export async function handleSystemSave(values: SystemValues) {
   };
 
   try {
-    const response = await fetch(`${CAM_BASE}/api/update-config`, {
+    const response = await fetch(`${camBase}/api/update-config`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -29,11 +31,7 @@ export async function handleSystemSave(values: SystemValues) {
 
     if (!response.ok) {
       const text = await response.text().catch(() => "");
-      throw new Error(
-        `HTTP ${response.status} ${response.statusText}${
-          text ? ` - ${text}` : ""
-        }`
-      );
+      throw new Error(`HTTP ${response.status} ${response.statusText}${text ? ` - ${text}` : ""}`);
     }
   } catch (err) {
     if (err instanceof Error) {
@@ -47,10 +45,10 @@ export async function handleSystemSave(values: SystemValues) {
 }
 
 export async function handleSystemRecall() {
-  const url = `${CAM_BASE}/api/fetch-config?id=GLOBAL--Device`;
+  const url = `${camBase}/api/fetch-config?id=GLOBAL--Device`;
 
   const controller = new AbortController();
-  const timeoutId = setTimeout(() => controller.abort(), 7000);
+  const timeoutId = setTimeout(() => controller.abort(), 70000);
 
   try {
     const response = await fetch(url, {
@@ -61,11 +59,7 @@ export async function handleSystemRecall() {
 
     if (!response.ok) {
       const text = await response.text().catch(() => "");
-      throw new Error(
-        `HTTP ${response.status} ${response.statusText}${
-          text ? ` - ${text}` : ""
-        }`
-      );
+      throw new Error(`HTTP ${response.status} ${response.statusText}${text ? ` - ${text}` : ""}`);
     }
 
     const data = await response.json();
@@ -76,9 +70,7 @@ export async function handleSystemRecall() {
 
     const sntpIntervalRaw = data?.propSNTPIntervalMinutes?.value;
     let sntpInterval =
-      typeof sntpIntervalRaw === "number"
-        ? sntpIntervalRaw
-        : Number.parseInt(String(sntpIntervalRaw).trim(), 10);
+      typeof sntpIntervalRaw === "number" ? sntpIntervalRaw : Number.parseInt(String(sntpIntervalRaw).trim(), 10);
 
     if (!Number.isFinite(sntpInterval)) {
       sntpInterval = 60;

src/components/SettingForms/System/SystemConfigFields.tsx

@@ -4,21 +4,31 @@ import { useReboots } from "../../../hooks/useReboots";
 import { timezones } from "./timezones";
 import SystemFileUpload from "./SystemFileUpload";
 import type { SystemValues, SystemValuesErrors } from "../../../types/types";
-import { useSystemConfig } from "../../../hooks/useSystemConfig";
+import { useDNSSettings, useSystemConfig } from "../../../hooks/useSystemConfig";
+import { ValidateIPaddress } from "../../../utils/utils";
+import { toast } from "sonner";
 
 const SystemConfigFields = () => {
   const { saveSystemSettings, systemSettingsData, saveSystemSettingsLoading } = useSystemConfig();
-  const { softRebootMutation, hardRebootMutation } = useReboots();
+  const { hardRebootMutation } = useReboots();
+  const { dnsQuery, dnsMutation } = useDNSSettings();
 
+  const dnsPrimary = dnsQuery?.data?.propNameServerPrimary?.value;
+  const dnsSecondary = dnsQuery?.data?.propNameServerSecondary?.value;
   const initialvalues: SystemValues = {
     deviceName: systemSettingsData?.deviceName ?? "",
     timeZone: systemSettingsData?.timeZone ?? "",
     sntpServer: systemSettingsData?.sntpServer ?? "",
     sntpInterval: systemSettingsData?.sntpInterval ?? 60,
+    serverPrimary: dnsPrimary ?? "",
+    serverSecondary: dnsSecondary ?? "",
     softwareUpdate: null,
   };
 
-  const handleSubmit = (values: SystemValues) => saveSystemSettings(values);
+  const handleSubmit = async (values: SystemValues) => {
+    saveSystemSettings(values);
+    await dnsMutation.mutateAsync(values);
+  };
 
   const validateValues = (values: SystemValues) => {
     const errors: SystemValuesErrors = {};
@@ -27,12 +37,20 @@ const SystemConfigFields = () => {
     if (!values.timeZone) errors.timeZone = "Required";
     if (isNaN(interval) || interval <= 0) errors.sntpInterval = "Cannot be less than 0";
     if (!values.sntpServer) errors.sntpServer = "Required";
+    const invalidPrimary = ValidateIPaddress(values.serverPrimary);
+    const invalidSecondary = ValidateIPaddress(values.serverSecondary);
+
+    if (invalidPrimary || invalidSecondary) {
+      toast.error(invalidPrimary || invalidSecondary, {
+        id: "invalid-ip",
+      });
+    }
     return errors;
   };
 
-  const handleSoftReboot = async () => {
-    await softRebootMutation.mutate();
-  };
+  // const handleSoftReboot = async () => {
+  //   await softRebootMutation.mutate();
+  // };
 
   const handleHardReboot = async () => {
     await hardRebootMutation.mutate();
@@ -44,7 +62,7 @@ const SystemConfigFields = () => {
       onSubmit={handleSubmit}
       validate={validateValues}
       enableReinitialize
-      validateOnChange
+      validateOnChange={false}
       validateOnBlur
     >
       {({ values, errors, touched, isSubmitting }) => (
@@ -102,6 +120,7 @@ const SystemConfigFields = () => {
               autoComplete="off"
             />
           </FormGroup>
+
           <FormGroup>
             <label htmlFor="sntpInterval" className="font-medium whitespace-nowrap md:w-1/2 text-left">
               SNTP Interval minutes
@@ -118,9 +137,37 @@ const SystemConfigFields = () => {
               className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
             />
           </FormGroup>
+          <FormGroup>
+            <label htmlFor="serverPrimary" className="font-medium whitespace-nowrap md:w-1/2 text-left">
+              Primary DNS Server
+            </label>
+
+            <Field
+              id="serverPrimary"
+              name="serverPrimary"
+              type="text"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter DNS primary address"
+              autoComplete="off"
+            />
+          </FormGroup>
+          <FormGroup>
+            <label htmlFor="serverSecondary" className="font-medium whitespace-nowrap md:w-1/2 text-left">
+              Secondary DNS Server
+            </label>
+
+            <Field
+              id="serverSecondary"
+              name="serverSecondary"
+              type="text"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              placeholder="Enter DNS secondary address"
+              autoComplete="off"
+            />
+          </FormGroup>
           <button
             type="submit"
-            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
             disabled={isSubmitting}
           >
             {saveSystemSettingsLoading ? "Saving..." : "Save System Settings"}
@@ -130,13 +177,13 @@ const SystemConfigFields = () => {
             <p>Reboot</p>
           </div>
 
-          <button
+          {/* <button
             type="button"
             className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition  w-full md:w-[50%]"
             onClick={handleSoftReboot}
           >
             {softRebootMutation.isPending || isSubmitting ? "Rebooting..." : "Software Reboot"}
-          </button>
+          </button> */}
           <button
             type="button"
             className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full md:w-[50%]"

src/components/SettingForms/System/SystemFileUpload.tsx

@@ -52,7 +52,7 @@ const SystemFileUpload = ({ name, selectedFile }: SystemFileUploadProps) => {
       </FormGroup>
       <button
         type="button"
-        className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
+        className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
         disabled={!selectedFile}
         onClick={handleFileUploadClick}
       >

src/components/SettingForms/System/Upload.ts

@@ -14,9 +14,6 @@ export async function sendBlobFileUpload({ file, opts }: BlobFileUpload): Promis
   if (!file) throw new Error("No file supplied");
   if (!opts?.uploadUrl) throw new Error("No URL supplied");
 
-  if (file?.type !== "text/csv") {
-    throw new Error("This file is not supported, please upload a CSV file.");
-  }
   const timeoutMs = opts?.timeoutMs ?? 30000;
   const fieldName = opts?.fieldName ?? "upload";
   const fileName = opts?.overrideFileName ?? file?.name;

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

@@ -6,7 +6,6 @@ const ModemCard = () => {
   return (
     <Card className="p-4">
       <CardHeader title={"Modem"} />
-
       <ModemSettings />
     </Card>
   );

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

@@ -6,6 +6,8 @@ import { useEffect, useState } from "react";
 import ModemToggle from "./ModemToggle";
 import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ValidateIPaddress } from "../../../utils/utils";
+import { toast, Toaster } from "sonner";
 
 const ModemSettings = () => {
   const [showSettings, setShowSettings] = useState(false);
@@ -16,6 +18,8 @@ const ModemSettings = () => {
   const username = modemQuery?.data?.propUsername.value;
   const password = modemQuery?.data?.propPassword?.value;
   const mode = modemQuery?.data?.propMode?.value;
+  const serverPrimary = modemQuery?.data?.propNameServerPrimary?.value;
+  const serverSecondary = modemQuery?.data?.propNameServerSecondary?.value;
 
   useEffect(() => {
     setShowSettings(mode === "AUTO");
@@ -26,41 +30,59 @@ const ModemSettings = () => {
     username: username ?? "",
     password: password ?? "",
     authenticationType: "PAP",
+    serverPrimary: serverPrimary ?? "",
+    serverSecondary: serverSecondary ?? "",
   };
 
   const handleSubmit = async (values: ModemSettingsType) => {
+    const invalidPrimary = ValidateIPaddress(values.serverPrimary);
+    const invalidSecondary = ValidateIPaddress(values.serverSecondary);
+
+    if (invalidPrimary || invalidSecondary) {
+      toast.error(invalidPrimary || invalidSecondary, {
+        id: "invalid-ip",
+      });
+      return;
+    }
+
+    const 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",
-        },
-      ],
+      fields,
     };
-    await modemMutation.mutateAsync(modemConfig);
+
+    const response = await modemMutation.mutateAsync(modemConfig);
+
+    if (!response?.id) {
+      toast.success("Modem settings updated successfully", {
+        id: "modemSettings",
+      });
+    }
   };
 
   return (
     <>
       <ModemToggle showSettings={showSettings} onShowSettings={setShowSettings} />
-      {!showSettings && (
+
       <Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
         {({ isSubmitting }) => (
           <Form className="flex flex-col space-y-5 px-2">
+            {!showSettings && (
+              <>
                 <FormGroup>
                   <label htmlFor="apn" className="font-medium whitespace-nowrap md:w-2/3">
                     APN
@@ -105,9 +127,33 @@ const ModemSettings = () => {
                     />
                   </div>
                 </FormGroup>
+                <FormGroup>
+                  <label htmlFor="serverPrimary" className="font-medium whitespace-nowrap md:w-2/3">
+                    Name server primary
+                  </label>
+                  <Field
+                    placeholder="Enter Server primary"
+                    name="serverPrimary"
+                    id="serverPrimary"
+                    type="text"
+                    className="p-1.5 border border-gray-400 rounded-lg"
+                  />
+                </FormGroup>
+                <FormGroup>
+                  <label htmlFor="serverSecondary" className="font-medium whitespace-nowrap md:w-2/3">
+                    Name server secondary
+                  </label>
+                  <Field
+                    placeholder="Enter Server secondary"
+                    name="serverSecondary"
+                    id="serverSecondary"
+                    type="text"
+                    className="p-1.5 border border-gray-400 rounded-lg"
+                  />
+                </FormGroup>
                 <FormGroup>
                   <label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
-                  Password
+                    Authentication Type
                   </label>
                   <Field
                     name="authenticationType"
@@ -119,16 +165,18 @@ const ModemSettings = () => {
                     <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"
+              className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
             >
               {isSubmitting || modemMutation.isPending ? "Saving..." : "Save Modem settings"}
             </button>
           </Form>
         )}
       </Formik>
-      )}
+      <Toaster />
     </>
   );
 };

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

@@ -5,6 +5,7 @@ import { useWifiAndModem } from "../../../hooks/useCameraWifiandModem";
 import { useState } from "react";
 import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { toast, Toaster } from "sonner";
 
 const WiFiSettingsForm = () => {
   const [showPwd, setShowPwd] = useState(false);
@@ -19,6 +20,13 @@ const WiFiSettingsForm = () => {
     encryption: "WPA2",
   };
 
+  const validatePassword = (password: string) => {
+    if (password.length < 8) {
+      toast.error("Password must be at least 8 characters long", { id: "password" });
+      return "Password must be at least 8 characters long";
+    }
+  };
+
   const handleSubmit = async (values: WifiSettingValues) => {
     const wifiConfig = {
       id: "ModemAndWifiManager-wifi",
@@ -37,6 +45,7 @@ const WiFiSettingsForm = () => {
     await wifiMutation.mutateAsync(wifiConfig);
   };
   return (
+    <>
       <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
         {({ isSubmitting }) => (
           <Form className="flex flex-col space-y-5 px-2">
@@ -63,7 +72,9 @@ const WiFiSettingsForm = () => {
                   type={showPwd ? "text" : "password"}
                   className="p-2 border border-gray-400 rounded-lg w-full"
                   placeholder="Enter Password"
+                  validate={validatePassword}
                 />
+
                 <FontAwesomeIcon
                   type="button"
                   className="absolute right-5 end-0"
@@ -97,6 +108,8 @@ const WiFiSettingsForm = () => {
           </Form>
         )}
       </Formik>
+      <Toaster />
+    </>
   );
 };
 

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;
@@ -21,10 +22,11 @@ type SightingModalProps = {
 
 const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }: SightingModalProps) => {
   const { dispatch } = useAlertHitContext();
+
   const { query, mutation } = useCameraBlackboard();
 
   const hotlistNames = getHotlistName(sighting?.metadata?.hotlistMatches);
-  const handleAcknowledgeButton = () => {
+  const handleAcknowledgeButton = async () => {
     try {
       if (!sighting) {
         toast.error("Cannot add sighting to alert list");
@@ -32,17 +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");
       }
 
@@ -63,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>
@@ -122,8 +142,9 @@ 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%]">
@@ -137,46 +158,98 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
               </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>
+                      <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 && sighting.make.trim() && sighting.make.toLowerCase() !== "disabled" && (
                       <div>
                         <dt className="text-gray-300">Make</dt>
-                    <dd className="font-medium text-2xl">{sighting?.make ?? "-"}</dd>
+                        <dd className="font-medium text-2xl">{sighting.make}</dd>
                       </div>
                     )}
-                {sighting?.model ||
-                  (!sighting?.model.trim() && (
+
+                    {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>
+                        <dd className="font-medium text-2xl">{sighting.model}</dd>
                       </div>
-                  ))}
-                {sighting?.color && (
+                    )}
+
+                    {sighting?.color && sighting.color.trim() && sighting.color.toLowerCase() !== "disabled" && (
                       <div className="sm:col-span-2">
                         <dt className="text-gray-300">Colour</dt>
-                    <dd className="font-medium text-2xl">{sighting?.color ?? "-"}</dd>
+                        <dd className="font-medium text-2xl">{sighting.color}</dd>
                       </div>
                     )}
 
@@ -184,6 +257,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,
@@ -59,23 +50,38 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
     isLoading,
   } = useSightingFeedContext();
 
-  const { dispatch } = useAlertHitContext();
+  const { dispatch, state: alertState } = useAlertHitContext();
   const { state: integrationState, dispatch: integrationDispatch } = useIntegrationsContext();
   const sessionStarted = integrationState.sessionStarted;
   const sessionPaused = integrationState.sessionPaused;
-
   const processedRefs = useRef<Set<number | string>>(new Set());
 
   const hasAutoOpenedRef = useRef(false);
   const npedRef = useRef(false);
 
-  const enqueue = useCallback((sighting: SightingType, kind: HitKind) => {
+  const isCatAEnabled = integrationState?.iscatEnabled?.catA;
+  const isCatBEnabled = integrationState?.iscatEnabled?.catB;
+  const isCatCEnabled = integrationState?.iscatEnabled?.catC;
+  const isCatDEnabled = integrationState?.iscatEnabled?.catD;
+
+  const enqueue = useCallback(
+    (sighting: SightingType, kind: HitKind) => {
+      if (!sighting) return;
+
       const id = sighting.vrm ?? sighting.ref;
       if (processedRefs.current.has(id)) return;
+
+      const inList = alertState?.alertList?.find((sighting) => sighting.vrm === id);
+      if (inList) {
+        return;
+      }
+
       processedRefs.current.add(id);
 
       setModalQueue((q) => [...q, { id, sighting, kind }]);
-  }, []);
+    },
+    [alertState?.alertList]
+  );
 
   const reduceObject = (obj: SightingType): ReducedSightingType => {
     return {
@@ -114,37 +120,27 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
       if (processedRefs.current.has(id)) continue;
       const isHotlistHit = checkIsHotListHit(sighting);
       const npedcategory = sighting?.metadata?.npedJSON?.["NPED CATEGORY"];
-      const isNPED = npedcategory === "A" || npedcategory === "B" || npedcategory === "C";
+      const isNPED =
+        (npedcategory === "A" && isCatAEnabled) ||
+        (npedcategory === "B" && isCatBEnabled) ||
+        (npedcategory === "C" && isCatCEnabled) ||
+        (npedcategory === "D" && isCatDEnabled);
 
       if (isNPED || isHotlistHit) {
         enqueue(sighting, isNPED ? "NPED" : "HOTLIST"); // enqueue ONLY
       }
     }
-  }, [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";
-      return isNPEDHitA || isNPEDHitB || isNPEDHitC;
+      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) => {
       const isHotListHit = checkIsHotListHit(r);
@@ -154,7 +150,6 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
 
     if (firstNPED) {
       enqueue(firstNPED, "NPED");
-
       npedRef.current = true;
     }
 
@@ -163,19 +158,42 @@ 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) {
+        console.log("first");
+        dispatch({
+          type: "ADD",
+          payload: obj,
+        });
+      }
+    });
+  }, [dispatch, rows]);
 
   const handleClose = () => {
     setSightingModalOpen(false);
@@ -198,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 (
@@ -216,6 +235,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

@@ -12,7 +12,7 @@ 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"
+      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"
     >
       {children}

src/components/UI/NavigationArrow.tsx

@@ -17,9 +17,9 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
     }
 
     if (side === "Front") {
-      navigate("/camera-settings");
+      navigate("/a-camera-settings");
     } else if (side === "Rear") {
-      navigate("/Rear-Camera-settings");
+      navigate("/b-Camera-settings");
     }
   };
 
@@ -30,15 +30,15 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
           <FontAwesomeIcon
             size="2xl"
             icon={faArrowRight}
-            className="absolute top-[50%] right-[2%] backdrop-blur-lg hover:cursor-pointer animate-bounce z-30"
-            onClick={() => navigationDest("Front")}
+            className="absolute top-[50%] right-[2%] backdrop-blur-lg hover:cursor-pointer animate-bounce z-30 rounded-md arrow-outline"
+            onClick={() => navigationDest("a")}
           />
         ) : (
           <FontAwesomeIcon
             icon={faArrowLeft}
             size="2xl"
-            className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-30"
-            onClick={() => navigationDest(side)}
+            className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-30 rounded-md arrow-outline"
+            onClick={() => navigationDest("b")}
           />
         )}
       </>
@@ -49,14 +49,14 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
       <FontAwesomeIcon
         icon={faArrowLeft}
         size="2xl"
-        className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100 "
+        className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100 arrow-outline rounded-md"
         onClick={() => navigationDest("Front")}
       />
 
       <FontAwesomeIcon
         icon={faArrowRight}
         size="2xl"
-        className="absolute top-[50%] right-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100"
+        className="absolute top-[50%] right-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100 arrow-outline rounded-md"
         onClick={() => navigationDest("Rear")}
       />
     </>

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">
+        <button
+          onClick={handleClose}
+          className="p-2 border border-gray-600 rounded-md text-gray-200 hover:bg-gray-700 transition mb-4"
+        >
+          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,19 +11,60 @@ 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",
         });
-      if (!result.result || typeof result.result === "string") return;
 
-      dispatch({ type: "UPDATE", payload: result?.result });
+        if (!isMounted) return;
+
+        const catResult = await mutation.mutateAsync({
+          operation: "VIEW",
+          path: "CategoryPopup",
+        });
+
+        if (!isMounted) return;
+
+        if (result?.result && typeof result.result !== "string") {
+          dispatch({ type: "UPDATE", payload: result.result });
+        }
+
+        if (catResult?.result) {
+          dispatch({ type: "NPEDCATENABLED", payload: catResult.result });
+        } else {
+          console.log("Early return: catResult check failed");
+        }
+      } catch (error) {
+        console.error("Error in fetchData:", error);
+      }
     };
+
     fetchData();
+
+    return () => {
+      isMounted = false;
+    };
   }, []);
+
+  useEffect(() => {
+    const fetchHotlistData = async () => {
+      dispatch({ type: "SETHOTLISTS", payload: query?.data?.hotlists });
+    };
+    fetchHotlistData();
+  }, [query?.data]);
+
   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,11 +1,18 @@
 import type { NPEDACTION, NPEDSTATE } from "../../types/types";
 
 export const initialState = {
-  sessionStarted: false,
+  sessionStarted: true,
   sessionList: [],
   sessionPaused: false,
   savedSightings: [],
   npedUser: null,
+  iscatEnabled: {
+    catA: true,
+    catB: true,
+    catC: true,
+    catD: false,
+  },
+  hotlistFiles: [],
 };
 
 export function reducer(state: NPEDSTATE, action: NPEDACTION) {
@@ -30,6 +37,11 @@ export function reducer(state: NPEDSTATE, action: NPEDACTION) {
         ...state,
         sessionPaused: action.payload,
       };
+    case "SESSIONRESTART":
+      return {
+        ...state,
+        sessionList: action.payload,
+      };
     case "ADD":
       return {
         ...state,
@@ -40,6 +52,22 @@ export function reducer(state: NPEDSTATE, action: NPEDACTION) {
         ...state,
         sessionList: action.payload,
       };
+    case "NPEDCATENABLED":
+      return {
+        ...state,
+        iscatEnabled: action.payload,
+      };
+
+    case "SETHOTLISTS":
+      return {
+        ...state,
+        hotlistFiles: action.payload,
+      };
+    case "DELETEHOTLIST":
+      return {
+        ...state,
+        hotlistFiles: state.hotlistFiles.filter((hotlist) => hotlist.filename !== action.payload),
+      };
     default:
       return { ...state };
   }

src/hooks/useBackOfficeConfig.ts

@@ -36,7 +36,7 @@ const updateBackOfficeConfig = async (data: InitialValuesForm) => {
       },
     ],
   };
-  const response = await fetch(`${CAM_BASE}/api/update-config?id=Dispatcher`, {
+  const response = await fetch(`${CAM_BASE}/api/update-config`, {
     method: "POST",
     body: JSON.stringify(updateConfigPayload),
   });

src/hooks/useCameraBlackboard.ts

@@ -8,7 +8,7 @@ const camBase = import.meta.env.MODE !== "development" ? CAM_BASE : "";
 
 const getAllBlackboardData = async () => {
   const response = await fetch(`${camBase}/api/blackboard`, {
-    signal: AbortSignal.timeout(500),
+    signal: AbortSignal.timeout(300000),
   });
   if (!response.ok) {
     throw new Error("Failed to fetch blackboard data");
@@ -17,7 +17,7 @@ const getAllBlackboardData = async () => {
 };
 
 const viewBlackboardData = async (options: CameraBlackBoardOptions) => {
-  const response = await fetch(`/${camBase}api/blackboard`, {
+  const response = await fetch(`${camBase}/api/blackboard`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify(options),

src/hooks/useCameraConfig.ts

@@ -8,7 +8,7 @@ const fetchCameraSideConfig = async ({ queryKey }: { queryKey: string[] }) => {
   const [, cameraSide] = queryKey;
   const fetchUrl = `${base_url}/fetch-config?id=${cameraSide}`;
   const response = await fetch(fetchUrl, {
-    signal: AbortSignal.timeout(500),
+    signal: AbortSignal.timeout(300000),
   });
   if (!response.ok) throw new Error("cannot react cameraSide ");
   return response.json();
@@ -31,7 +31,7 @@ const updateCamerasideConfig = async (data: { id: string | number; friendlyName:
     method: "POST",
     body: JSON.stringify(updateConfigPayload),
   });
-  if (!response.ok) throw new Error("Feature unavailable: Coming soon");
+  if (!response.ok) throw new Error("Please make sure fields are filled in correctly");
 };
 
 export const useFetchCameraConfig = (cameraSide: string) => {

src/hooks/useCameraOutput.ts

@@ -2,7 +2,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { CAM_BASE } from "../utils/config";
 import { useEffect } from "react";
 import { toast } from "sonner";
-import type { BearerTypeFieldType, OptionalBOF2Constants } from "../types/types";
+import type { BearerTypeFieldType, OptionalBOF2Constants, OptionalBOF2LaneIDs } from "../types/types";
 
 const getDispatcherConfig = async () => {
   const response = await fetch(`${CAM_BASE}/api/fetch-config?id=Dispatcher`);
@@ -24,7 +24,7 @@ const updateDispatcherConfig = async (data: BearerTypeFieldType) => {
       },
     ],
   };
-  const response = await fetch(`${CAM_BASE}/api/update-config?id=Dispatcher`, {
+  const response = await fetch(`${CAM_BASE}/api/update-config`, {
     method: "POST",
     body: JSON.stringify(updateConfigPayload),
   });
@@ -54,7 +54,7 @@ const updateBackOfficeDispatcher = async (data: OptionalBOF2Constants) => {
       },
     ],
   };
-  const response = await fetch(`${CAM_BASE}/api/update-config?id=Dispatcher-bof2-constants`, {
+  const response = await fetch(`${CAM_BASE}/api/update-config`, {
     method: "POST",
     body: JSON.stringify(bof2ContantsPayload),
   });
@@ -63,11 +63,40 @@ const updateBackOfficeDispatcher = async (data: OptionalBOF2Constants) => {
 };
 
 const getBof2DispatcherData = async () => {
-  const response = await fetch(`http://100.118.196.113:8080/api/fetch-config?id=Dispatcher-bof2-constants`);
+  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=Dispatcher-bof2-constants`);
   if (!response.ok) throw new Error("Cannot get BOF2 dispatcher config");
   return response.json();
 };
 
+const updateBOF2LaneId = async (data: OptionalBOF2LaneIDs) => {
+  const bof2LaneIds = {
+    id: data?.laneId,
+    fields: [
+      {
+        property: "propLaneID1",
+        value: data?.LID1,
+      },
+      {
+        property: "propLaneID2",
+        value: data?.LID2,
+      },
+    ],
+  };
+
+  const response = await fetch(`${CAM_BASE}/api/update-config`, {
+    method: "post",
+    body: JSON.stringify(bof2LaneIds),
+  });
+  if (!response.ok) throw new Error("cannot send to lane IDs");
+  return response.json();
+};
+
+const getBOF2LaneId = async () => {
+  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=SightingAmmendA-lane-ids`);
+  if (!response.ok) throw new Error("Canot get Lane Ids");
+  return response.json();
+};
+
 export const useCameraOutput = () => {
   const dispatcherQuery = useQuery({
     queryKey: ["dispatcher"],
@@ -95,6 +124,16 @@ export const useCameraOutput = () => {
     },
   });
 
+  const bof2LandMutation = useMutation({
+    mutationKey: ["updateBOF2LaneId"],
+    mutationFn: updateBOF2LaneId,
+  });
+
+  const laneIdQuery = useQuery({
+    queryKey: ["getBOF2LaneId"],
+    queryFn: getBOF2LaneId,
+  });
+
   useEffect(() => {
     if (dispatcherQuery.isError) toast.error(dispatcherQuery.error.message);
   }, [dispatcherQuery?.error?.message, dispatcherQuery.isError]);
@@ -103,6 +142,8 @@ export const useCameraOutput = () => {
     dispatcherQuery,
     dispatcherMutation,
     backOfficeDispatcherMutation,
+    bof2LandMutation,
+    laneIdQuery,
   };
 };
 

src/hooks/useCameraWifiandModem.ts

@@ -3,10 +3,11 @@ import { CAM_BASE } from "../utils/config";
 import type { ModemConfig, WifiConfig } from "../types/types";
 import { useEffect } from "react";
 import { toast } from "sonner";
+const camBase = import.meta.env.MODE !== "development" ? CAM_BASE : "";
 
 const getWiFiSettings = async () => {
-  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=ModemAndWifiManager-wifi`, {
-    signal: AbortSignal.timeout(500),
+  const response = await fetch(`${camBase}/api/fetch-config?id=ModemAndWifiManager-wifi`, {
+    signal: AbortSignal.timeout(600000),
   });
   if (!response.ok) {
     throw new Error("Cannot fetch Wifi settings");
@@ -15,7 +16,7 @@ const getWiFiSettings = async () => {
 };
 
 const updateWifiSettings = async (wifiConfig: WifiConfig) => {
-  const response = await fetch(`${CAM_BASE}/api/update-config?id=ModemAndWifiManager-wifi`, {
+  const response = await fetch(`${camBase}/api/update-config`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify(wifiConfig),
@@ -27,8 +28,8 @@ const updateWifiSettings = async (wifiConfig: WifiConfig) => {
 };
 
 const getModemSettings = async () => {
-  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=ModemAndWifiManager-modem`, {
-    signal: AbortSignal.timeout(500),
+  const response = await fetch(`${camBase}/api/fetch-config?id=ModemAndWifiManager-modem`, {
+    signal: AbortSignal.timeout(600000),
   });
   if (!response.ok) {
     throw new Error("Cannot fetch modem settings");
@@ -37,7 +38,7 @@ const getModemSettings = async () => {
 };
 
 const updateModemSettings = async (modemConfig: ModemConfig) => {
-  const response = await fetch(`${CAM_BASE}/api/update-config?id=ModemAndWifiManager-modem`, {
+  const response = await fetch(`${camBase}/api/update-config`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify(modemConfig),

src/hooks/useCameraZoom.ts

@@ -1,18 +1,38 @@
-import {
-  useMutation,
-  useQuery,
-  type QueryFunctionContext,
-} from "@tanstack/react-query";
+import { useMutation, useQuery, type QueryFunctionContext } from "@tanstack/react-query";
 import { CAM_BASE } from "../utils/config";
 import type { zoomConfig, ZoomInOptions } from "../types/types";
 import { toast } from "sonner";
 import { useEffect } from "react";
 
+const getCameraMode = async (options: { camera: string }) => {
+  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=Ip${options.camera}`);
+  if (!response.ok) throw new Error("Cannot get camera mode");
+  return response.json();
+};
+
+const updateCameraMode = async (options: { camera: string; mode: string }) => {
+  const dayNightPayload = {
+    id: options.camera,
+    fields: [
+      {
+        property: "propDayNightMode",
+        value: options.mode,
+      },
+    ],
+  };
+  const response = await fetch(`${CAM_BASE}/Ip${options.camera}-command?dayNightMode=${options.mode}`, {
+    method: "post",
+    body: JSON.stringify(dayNightPayload),
+  });
+  if (!response.ok) throw new Error("cannot update camera mode");
+  return response.json();
+};
+
 async function zoomIn(options: ZoomInOptions) {
   const response = await fetch(
-    `${CAM_BASE}/Ip${options.camera}-command?magnification=${options.multiplier}x`,
+    `${CAM_BASE}/Ip${options.camera}-command?magnification=${options.multiplierText?.toLowerCase()}`,
     {
-      signal: AbortSignal.timeout(500),
+      signal: AbortSignal.timeout(300000),
     }
   );
   if (!response.ok) {
@@ -22,28 +42,21 @@ async function zoomIn(options: ZoomInOptions) {
   return response.json();
 }
 
-async function fetchZoomInConfig({
-  queryKey,
-}: QueryFunctionContext<[string, zoomConfig]>) {
+async function fetchZoomInConfig({ queryKey }: QueryFunctionContext<[string, zoomConfig]>) {
   const [, { camera }] = queryKey;
-  const response = await fetch(`${CAM_BASE}/Ip${camera}-inspect`, {
-    signal: AbortSignal.timeout(500),
+  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=Ip${camera}`, {
+    signal: AbortSignal.timeout(300000),
   });
   if (!response.ok) {
     throw new Error("Cannot get camera zoom settings");
   }
-  return response.text();
+  return response.json();
 }
 //change to string
 export const useCameraZoom = (options: zoomConfig) => {
   const mutation = useMutation({
     mutationKey: ["zoomIn"],
     mutationFn: (options: ZoomInOptions) => zoomIn(options),
-    onError: (err) => {
-      toast.error(`Failed to update zoom settings: ${err.message}`, {
-        id: "zoom",
-      });
-    },
   });
 
   const query = useQuery({
@@ -52,8 +65,25 @@ export const useCameraZoom = (options: zoomConfig) => {
   });
 
   useEffect(() => {
-    if (query.isError) toast.error(query.error.message, { id: "hardReboot" });
+    if (query.isError) toast.error(query.error.message, { id: "zoom" });
   }, [query?.error?.message, query.isError]);
 
   return { mutation, query };
 };
+
+export const useCameraMode = (option: { camera: string }) => {
+  const cameraModeQuery = useQuery({
+    queryKey: ["getCameraMode"],
+    queryFn: () => getCameraMode(option),
+  });
+
+  const cameraModeMutation = useMutation({
+    mutationKey: ["updateCameraMode"],
+    mutationFn: updateCameraMode,
+  });
+
+  return {
+    cameraModeQuery,
+    cameraModeMutation,
+  };
+};

src/hooks/useGetOverviewSnapshot copy.ts

@@ -0,0 +1,153 @@
+import { useRef, useCallback, useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { CAM_BASE } from "../utils/config";
+
+const apiUrl = CAM_BASE;
+
+async function fetchSnapshot(cameraSide: string): Promise<Blob> {
+  const response = await fetch(`${apiUrl}/${cameraSide}-preview`, {
+    signal: AbortSignal.timeout(300000),
+    cache: "no-store",
+  });
+  if (!response.ok) {
+    throw new Error(`Cannot reach endpoint (${response.status})`);
+  }
+  return response.blob();
+}
+
+/** Draw an ImageBitmap to canvas with aspect-fill (like object-fit: cover) */
+function drawBitmapToCanvas(canvas: HTMLCanvasElement, bitmap: ImageBitmap) {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+
+  const dpr = window.devicePixelRatio || 1;
+  const cssWidth = canvas.clientWidth;
+  const cssHeight = canvas.clientHeight;
+
+  const width = Math.floor(cssWidth * dpr);
+  const height = Math.floor(cssHeight * dpr);
+
+  if (canvas.width !== width || canvas.height !== height) {
+    canvas.width = width;
+    canvas.height = height;
+  }
+
+  ctx.clearRect(0, 0, width, height);
+
+  const srcW = bitmap.width;
+  const srcH = bitmap.height;
+  const srcAspect = srcW / srcH;
+  const dstAspect = width / height;
+
+  let drawWidth = width;
+  let drawHeight = height;
+
+  // aspect-fit calculation (no cropping)
+  if (srcAspect > dstAspect) {
+    // image is wider → fit to canvas width
+    drawWidth = width;
+    drawHeight = width / srcAspect;
+  } else {
+    // image is taller → fit to canvas height
+    drawHeight = height;
+    drawWidth = height * srcAspect;
+  }
+
+  // center image (adds black borders if aspect ratios differ)
+  const dx = (width - drawWidth) / 50;
+  const dy = (height - drawHeight) / 2;
+
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = "high";
+  ctx.drawImage(bitmap, 0, 0, srcW, srcH, dx, dy, drawWidth, drawHeight);
+}
+
+export function useGetOverviewSnapshot(side: string) {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const latestBitmapRef = useRef<ImageBitmap | null>(null);
+
+  // Redraw helper; always draws the current bitmap if available
+  const draw = useCallback(() => {
+    const canvas = canvasRef.current;
+    const bmp = latestBitmapRef.current;
+    if (!canvas || !bmp) return;
+    drawBitmapToCanvas(canvas, bmp);
+  }, []);
+
+  const {
+    data: snapshotBlob,
+    isError,
+    error,
+    isPending,
+  } = useQuery({
+    queryKey: ["overviewSnapshot", side],
+    queryFn: () => fetchSnapshot(side),
+    // Poll ~4 fps when visible; pause when tab hidden
+    refetchInterval: () => (document.visibilityState === "visible" ? 250 : false),
+    refetchOnWindowFocus: false,
+    // Avoid keeping lots of blobs around in cache
+    gcTime: 0, // v5 name (cacheTime in v4)
+    staleTime: 0,
+    retry: false, // or a small number if you prefer retries
+  });
+
+  // Convert Blob -> ImageBitmap and draw
+  useEffect(() => {
+    let cancelled = false;
+    if (!snapshotBlob) return;
+
+    (async () => {
+      try {
+        const bitmap = await createImageBitmap(snapshotBlob);
+        if (cancelled) {
+          bitmap.close();
+          return;
+        }
+
+        // Dispose previous bitmap to free memory
+        if (latestBitmapRef.current) {
+          latestBitmapRef.current.close();
+        }
+        latestBitmapRef.current = bitmap;
+
+        // Draw now (and again on next resize)
+        draw();
+      } catch {
+        // noop — fetch handler surfaces the main error path
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [snapshotBlob, draw]);
+
+  // Redraw on resize & DPR changes
+  useEffect(() => {
+    const onResize = () => draw();
+    const onDPR = () => draw();
+    window.addEventListener("resize", onResize);
+    // Listen for DPR changes (some browsers support this)
+    const mql = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+    mql.addEventListener?.("change", onDPR);
+    return () => {
+      window.removeEventListener("resize", onResize);
+      mql.removeEventListener?.("change", onDPR);
+    };
+  }, [draw]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (latestBitmapRef.current) {
+        latestBitmapRef.current.close();
+        latestBitmapRef.current = null;
+      }
+    };
+  }, []);
+
+  // Optional: normalize error type
+  const typedError = error instanceof Error ? error : undefined;
+
+  return { canvasRef, isError, error: typedError, isPending };
+}

src/hooks/useGetOverviewSnapshot.ts

@@ -3,34 +3,69 @@ import { useQuery } from "@tanstack/react-query";
 import { CAM_BASE } from "../utils/config";
 
 const apiUrl = CAM_BASE;
-// const fetch_url = `http://100.82.205.44/Colour-preview`;
-async function fetchSnapshot(cameraSide: string) {
+
+async function fetchSnapshot(cameraSide: string): Promise<Blob> {
   const response = await fetch(`${apiUrl}/${cameraSide}-preview`, {
-    signal: AbortSignal.timeout(500),
+    signal: AbortSignal.timeout(300000),
+    cache: "no-store",
   });
   if (!response.ok) {
-    throw new Error("Cannot reach endpoint");
+    throw new Error(`Cannot reach endpoint (${response.status})`);
+  }
+  return response.blob();
+}
+
+function drawBitmapToCanvas(canvas: HTMLCanvasElement, bitmap: ImageBitmap) {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+
+  const dpr = window.devicePixelRatio || 1;
+  const cssWidth = canvas.clientWidth;
+  const cssHeight = canvas.clientHeight;
+
+  const width = Math.floor(cssWidth * dpr);
+  const height = Math.floor(cssHeight * dpr);
+
+  if (canvas.width !== width || canvas.height !== height) {
+    canvas.width = width;
+    canvas.height = height;
   }
 
-  return await response.blob();
+  ctx.clearRect(0, 0, width, height);
+
+  const srcW = bitmap.width;
+  const srcH = bitmap.height;
+  const srcAspect = srcW / srcH;
+  const dstAspect = width / height;
+
+  let drawWidth = width;
+  let drawHeight = height;
+
+  if (srcAspect > dstAspect) {
+    drawWidth = width;
+    drawHeight = width / srcAspect;
+  } else {
+    drawHeight = height;
+    drawWidth = height * srcAspect;
+  }
+
+  const dx = (width - drawWidth) / 50;
+  const dy = (height - drawHeight) / 2;
+
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = "high";
+  ctx.drawImage(bitmap, 0, 0, srcW, srcH, dx, dy, drawWidth, drawHeight);
 }
 
 export function useGetOverviewSnapshot(side: string) {
-  const latestUrlRef = useRef<string | null>(null);
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  const imageRef = useRef<HTMLImageElement | null>(null);
+  const latestBitmapRef = useRef<ImageBitmap | null>(null);
 
-  const drawImage = useCallback(() => {
+  const draw = useCallback(() => {
     const canvas = canvasRef.current;
-    const ctx = canvas?.getContext("2d");
-    const img = imageRef.current;
-
-    if (!canvas || !ctx || !img) return;
-
-    canvas.width = canvas.clientWidth;
-    canvas.height = canvas.clientHeight;
-
-    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    const bmp = latestBitmapRef.current;
+    if (!canvas || !bmp) return;
+    drawBitmapToCanvas(canvas, bmp);
   }, []);
 
   const {
@@ -39,43 +74,76 @@ export function useGetOverviewSnapshot(side: string) {
     error,
     isPending,
   } = useQuery({
-    queryKey: ["overviewSnapshot"],
+    queryKey: ["overviewSnapshot", side],
     queryFn: () => fetchSnapshot(side),
+
+    refetchInterval: () => (document.visibilityState === "visible" ? 250 : false),
     refetchOnWindowFocus: false,
-    refetchInterval: 250,
+
+    gcTime: 0,
+    staleTime: 0,
+    retry: false,
   });
 
   useEffect(() => {
+    let cancelled = false;
     if (!snapshotBlob) return;
 
-    const imgUrl = URL.createObjectURL(snapshotBlob);
-    const img = new Image();
-    imageRef.current = img;
-
-    img.onload = () => {
-      drawImage();
-    };
-    img.src = imgUrl;
-
-    if (latestUrlRef.current) {
-      URL.revokeObjectURL(latestUrlRef.current);
+    (async () => {
+      try {
+        const bitmap = await createImageBitmap(snapshotBlob);
+        if (cancelled) {
+          bitmap.close();
+          return;
         }
-    latestUrlRef.current = imgUrl;
+
+        if (latestBitmapRef.current) {
+          latestBitmapRef.current.close();
+        }
+        latestBitmapRef.current = bitmap;
+
+        draw();
+      } catch {
+        // noop — fetch handler surfaces the main error path
+      }
+    })();
 
     return () => {
-      if (latestUrlRef.current) {
-        URL.revokeObjectURL(latestUrlRef.current);
-        latestUrlRef.current = null;
-      }
+      cancelled = true;
     };
-  }, [snapshotBlob, drawImage]);
+  }, [snapshotBlob, draw]);
 
   useEffect(() => {
-    window.addEventListener("resize", drawImage);
-    return () => {
-      window.removeEventListener("resize", drawImage);
-    };
-  }, [drawImage]);
+    const onResize = () => draw();
+    const onDPR = () => draw();
+    window.addEventListener("resize", onResize);
 
-  return { canvasRef, isError, error, isPending };
+    const mql = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+    mql.addEventListener?.("change", onDPR);
+    return () => {
+      window.removeEventListener("resize", onResize);
+      mql.removeEventListener?.("change", onDPR);
+    };
+  }, [draw]);
+
+  useEffect(() => {
+    const el = canvasRef.current?.parentElement;
+    if (!el) return;
+    const ro = new ResizeObserver(() => draw());
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [draw]);
+
+  useEffect(() => {
+    return () => {
+      if (latestBitmapRef.current) {
+        latestBitmapRef.current.close();
+        latestBitmapRef.current = null;
+      }
+    };
+  }, []);
+
+  const typedError = error instanceof Error ? error : undefined;
+
+  return { canvasRef, isError, error: typedError, isPending };
 }

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/useNPEDAuth.ts

@@ -8,7 +8,7 @@ import { toast } from "sonner";
 async function fetchNPEDDetails() {
   const fetchUrl = `${CAM_BASE}/api/fetch-config?id=NPED`;
   const response = await fetch(fetchUrl, {
-    signal: AbortSignal.timeout(500),
+    signal: AbortSignal.timeout(300000),
   });
   if (!response.ok) throw new Error("Cannot reach fetch-config endpoint");
 

src/hooks/useSightingAmend.ts

@@ -0,0 +1,48 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { CAM_BASE } from "../utils/config";
+import type { InitialValuesForm } from "../types/types";
+
+const getSightingAmend = async () => {
+  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=SightingAmmendA`);
+  if (!response.ok) throw new Error("Cannot reach sighting amend endpoint");
+  return response.json();
+};
+
+const updateSightingAmend = async (data: InitialValuesForm) => {
+  const updateSightingAmendPayload = {
+    id: "SightingAmmendA",
+    fields: [
+      {
+        property: "propOverviewQuality",
+        value: data.overviewQuality,
+      },
+      {
+        property: "propOverviewImageScaleFactor",
+        value: data.cropSizeFactor,
+      },
+    ],
+  };
+  const response = await fetch(`${CAM_BASE}/api/update-config`, {
+    method: "Post",
+    body: JSON.stringify(updateSightingAmendPayload),
+  });
+  if (!response.ok) throw new Error("cannot update camera control");
+  return response.json();
+};
+
+export const useSightingAmend = () => {
+  const sightingAmendQuery = useQuery({
+    queryKey: ["getSightingAmend"],
+    queryFn: getSightingAmend,
+  });
+
+  const sightingAmendMutation = useMutation({
+    mutationKey: ["updateSightingAmend"],
+    mutationFn: updateSightingAmend,
+  });
+
+  return {
+    sightingAmendQuery,
+    sightingAmendMutation,
+  };
+};

src/hooks/useSightingFeed.ts

@@ -12,7 +12,7 @@ import { useCachedSoundSrc } from "./usecachedSoundSrc";
 
 async function fetchSighting(url: string | undefined, ref: number): Promise<SightingType> {
   const res = await fetch(`${url}${ref}`, {
-    signal: AbortSignal.timeout(5000),
+    signal: AbortSignal.timeout(300000),
   });
   if (!res.ok) throw new Error(String(res.status));
   return res.json();
@@ -48,7 +48,7 @@ export function useSightingFeed(url: string | undefined) {
       return 100;
     }
 
-    if (now - lastValidTimestamp.current > 60_000) {
+    if (now - lastValidTimestamp.current > 600_000) {
       currentRef.current = -1;
       lastValidTimestamp.current = now;
     }
@@ -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/useStoreDispatch.ts

@@ -0,0 +1,19 @@
+import { useQuery } from "@tanstack/react-query";
+import { CAM_BASE } from "../utils/config";
+
+const getStoreData = async () => {
+  const response = await fetch(`${CAM_BASE}/Store/diagnostics-json`);
+  if (!response.ok) throw new Error("Cannot get store data");
+
+  return response.json();
+};
+
+export const useStoreDispatch = () => {
+  const storeQuery = useQuery({
+    queryKey: ["getStoreData"],
+    queryFn: getStoreData,
+    refetchInterval: 1000,
+    refetchOnWindowFocus: true,
+  });
+  return { storeQuery };
+};

src/hooks/useSystemConfig.ts

@@ -1,11 +1,41 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { sendBlobFileUpload } from "../components/SettingForms/System/Upload";
 import { toast } from "sonner";
-import {
-  handleSystemSave,
-  handleSystemRecall,
-} from "../components/SettingForms/System/SettingSaveRecall";
+import { handleSystemSave, handleSystemRecall } from "../components/SettingForms/System/SettingSaveRecall";
 import { useEffect } from "react";
+import { CAM_BASE } from "../utils/config";
+import type { DNSSettingsType } from "../types/types";
+
+const camBase = import.meta.env.MODE !== "development" ? CAM_BASE : "";
+
+const getDNSSettings = async () => {
+  const response = await fetch(`${camBase}/api/fetch-config?id=GLOBAL--NetworkConfig`);
+  if (!response.ok) throw new Error("Cannot get DNS Settings");
+  return response.json();
+};
+
+const updateDNSSettings = async (data: DNSSettingsType) => {
+  const dnsSettingsPayload = {
+    id: "GLOBAL--NetworkConfig",
+    fields: [
+      {
+        property: "propNameServerPrimary",
+        value: data?.serverPrimary,
+      },
+      {
+        property: "propNameServerSecondary",
+        value: data?.serverSecondary,
+      },
+    ],
+  };
+  const response = await fetch(`${camBase}/api/update-config`, {
+    method: "post",
+    body: JSON.stringify(dnsSettingsPayload),
+  });
+  if (!response.ok) throw new Error("cannot send to DNS endpoint");
+
+  return response.json();
+};
 
 export const useSystemConfig = () => {
   const uploadSettingsMutation = useMutation({
@@ -51,3 +81,20 @@ export const useSystemConfig = () => {
     saveSystemSettingsLoading: saveSystemSettings.isPending,
   };
 };
+
+export const useDNSSettings = () => {
+  const dnsQuery = useQuery({
+    queryKey: ["getDNSSettings"],
+    queryFn: getDNSSettings,
+  });
+
+  const dnsMutation = useMutation({
+    mutationKey: ["updateDNSSettings"],
+    mutationFn: updateDNSSettings,
+  });
+
+  return {
+    dnsQuery,
+    dnsMutation,
+  };
+};

src/index.css

@@ -31,3 +31,9 @@ body {
     }
   }
 }
+
+.arrow-outline path {
+  stroke: black;
+  stroke-width: 20px;
+  stroke-linejoin: round;
+}

src/pages/FrontCamera.tsx

@@ -4,7 +4,7 @@ import OverviewVideoContainer from "../components/FrontCameraSettings/OverviewVi
 import { Toaster } from "sonner";
 
 const FrontCamera = () => {
-  const [zoomLevel, setZoomLevel] = useState<number>(1);
+  const [zoomLevel, setZoomLevel] = useState<number | undefined>(1);
   return (
     <div className="mx-auto flex flex-col lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">
       <OverviewVideoContainer

src/pages/RearCamera.tsx

@@ -4,9 +4,9 @@ import { Toaster } from "sonner";
 import { useState } from "react";
 
 const RearCamera = () => {
-  const [zoomLevel, setZoomLevel] = useState<number>(1);
+  const [zoomLevel, setZoomLevel] = useState<number | undefined>(1);
   return (
-    <div className="mx-auto flex flex-col lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">
+    <div className="mx-auto flex flex-col-reverse lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">
       <CameraSettings
         title="Camera B Settings"
         side={"CameraB"}

src/pages/SystemSettings.tsx

@@ -10,6 +10,8 @@ import { Toaster } from "sonner";
 import { useNPEDAuth } from "../hooks/useNPEDAuth";
 import SoundSettingsCard from "../components/SettingForms/Sound/SoundSettingsCard";
 import SoundUploadCard from "../components/SettingForms/Sound/SoundUploadCard";
+import NPEDCategoryPopup from "../components/PopupSettings/NPEDCategoryPopup";
+import HotlistList from "../components/HotlistList/HotlistList";
 
 const SystemSettings = () => {
   useNPEDAuth();
@@ -21,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>
@@ -38,6 +40,8 @@ const SystemSettings = () => {
           <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-2 sm:px-4 lg:px-0 w-full">
             <NPEDCard />
             <NPEDHotlistCard />
+            <NPEDCategoryPopup />
+            <HotlistList />
           </div>
         </TabPanel>
         <TabPanel>

src/types/types.ts

@@ -41,6 +41,7 @@ export type CameraSettingValues = {
   userName: string;
   password: string;
   id: number | string;
+  mode: string;
 };
 
 export type CameraSettingErrorValues = Partial<Record<keyof CameraSettingValues, string>>;
@@ -58,6 +59,8 @@ export type InitialValuesForm = {
   password: string;
   connectTimeoutSeconds: number;
   readTimeoutSeconds: number;
+  overviewQuality?: string;
+  cropSizeFactor?: string;
 };
 
 export type InitialValuesFormErrors = {
@@ -69,10 +72,17 @@ export type InitialValuesFormErrors = {
 };
 
 export type OptionalBOF2Constants = {
-  FFID?: "";
-  SCID?: "";
-  timestampSource?: "";
-  GPSFormat?: "";
+  FFID?: string;
+  SCID?: string;
+  timestampSource?: string;
+  GPSFormat?: string;
+};
+
+export type OptionalBOF2LaneIDs = {
+  laneId?: string;
+  LID1?: string;
+  LID2?: string;
+  LID3?: string;
 };
 
 export type NPEDFieldType = {
@@ -157,6 +167,13 @@ export type SystemValues = {
   sntpInterval: number;
   timeZone: string;
   softwareUpdate?: File | null;
+  serverPrimary?: string;
+  serverSecondary?: string;
+};
+
+export type DNSSettingsType = {
+  serverPrimary?: string;
+  serverSecondary?: string;
 };
 
 export type SystemValuesErrors = {
@@ -265,7 +282,7 @@ export type CameraConfig = {
 export type CameraBlackBoardOptions = {
   operation?: string;
   path?: string;
-  value?: object | string | number | (string | number)[];
+  value?: object | string | number | (string | number)[] | null;
 };
 
 export type CameraBlackboardResponse = {
@@ -374,6 +391,7 @@ export type ModemConfig = {
 export type ZoomInOptions = {
   camera: string;
   multiplier: number;
+  multiplierText?: string;
 };
 
 export type zoomConfig = {
@@ -385,6 +403,8 @@ export type ModemSettingsType = {
   username: string;
   password: string;
   authenticationType: string;
+  serverPrimary: string;
+  serverSecondary: string;
 };
 
 export type HitKind = "NPED" | "HOTLIST";
@@ -397,15 +417,44 @@ export type QueuedHit = {
 
 export type DedupedSightings = ReducedSightingType[];
 
+export type HotlistFile = {
+  fileSizeBytes: number;
+  filename: string;
+  rowCount: number;
+};
+
 export type NPEDSTATE = {
   sessionStarted: boolean;
   sessionList: ReducedSightingType[];
   sessionPaused: boolean;
   savedSightings: DedupedSightings;
   npedUser: NPEDUser;
+  iscatEnabled: CategoryPopups;
+  hotlistFiles: HotlistFile[];
 };
 
 export type NPEDACTION = {
   type: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   payload: any;
 };
+
+export type CategoryPopups = {
+  catA: boolean;
+  catB: boolean;
+  catC: boolean;
+  catD: boolean;
+};
+
+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;
+};

src/utils/utils.ts

@@ -158,3 +158,42 @@ 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:
+      return "Near";
+    case 2:
+      return "Mid";
+    case 4:
+      return "Far";
+    default:
+      break;
+  }
+};
+
+export const reverseZoomMapping = (magnification: string) => {
+  switch (magnification) {
+    case "near":
+      return 1;
+    case "mid":
+      return 2;
+    case "far":
+      return 4;
+    default:
+      break;
+  }
+};
+
+export const ValidateIPaddress = (value: string | undefined) => {
+  if (!value) return;
+
+  const regex =
+    /^(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)$/;
+
+  if (!regex.test(value)) {
+    return "Invalid IP address format";
+  }
+};

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({
@@ -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),
+  },
 });

yarn.lock

@@ -24,7 +24,7 @@
   resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.0.tgz"
   integrity sha512-60X7qkglvrap8mn1lh2ebxXdZYtUcpd7gsmy9kLaBJ4i/WdY8PqTSdxyA8qraikqKQK5C1KRBKXqznrVapyNaw==
 
-"@babel/core@^7.28.0":
+"@babel/core@^7.0.0", "@babel/core@^7.0.0-0", "@babel/core@^7.28.0":
   version "7.28.0"
   resolved "https://registry.npmjs.org/@babel/core/-/core-7.28.0.tgz"
   integrity sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==
@@ -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":
@@ -173,153 +173,6 @@
     "@babel/helper-string-parser" "^7.27.1"
     "@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==
-  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==
-  dependencies:
-    tslib "^2.4.0"
-
-"@emnapi/wasi-threads@1.1.0", "@emnapi/wasi-threads@^1.0.2":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz#60b2102fddc9ccb78607e4a3cf8403ea69be41bf"
-  integrity sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==
-  dependencies:
-    tslib "^2.4.0"
-
-"@esbuild/aix-ppc64@0.25.9":
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.25.9.tgz#bef96351f16520055c947aba28802eede3c9e9a9"
-  integrity sha512-OaGtL73Jck6pBKjNIe24BnFE6agGl+6KxDtTfHhy1HmhthfKouEcOhqpSL64K4/0WCtbKFLOdzD/44cJ4k9opA==
-
-"@esbuild/android-arm64@0.25.9":
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.25.9.tgz#d2e70be7d51a529425422091e0dcb90374c1546c"
-  integrity sha512-IDrddSmpSv51ftWslJMvl3Q2ZT98fUSL2/rlUXuVqRXHCs5EUF1/f+jbjF5+NG9UffUDMCiTyh8iec7u8RlTLg==
-
-"@esbuild/android-arm@0.25.9":
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.25.9.tgz#d2a753fe2a4c73b79437d0ba1480e2d760097419"
-  integrity sha512-5WNI1DaMtxQ7t7B6xa572XMXpHAaI/9Hnhk8lcxF4zVN4xstUgTlvuGDorBguKEnZO70qwEcLpfifMLoxiPqHQ==
-
-"@esbuild/android-x64@0.25.9":
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.25.9.tgz#5278836e3c7ae75761626962f902a0d55352e683"
-  integrity sha512-I853iMZ1hWZdNllhVZKm34f4wErd4lMyeV7BLzEExGEIZYsOzqDWDf+y082izYUE8gtJnYHdeDpN/6tUdwvfiw==
-
-"@esbuild/darwin-arm64@0.25.9":
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.25.9.tgz#f1513eaf9ec8fa15dcaf4c341b0f005d3e8b47ae"
-  integrity sha512-XIpIDMAjOELi/9PB30vEbVMs3GV1v2zkkPnuyRRURbhqjyzIINwj+nbQATh4H9GxUgH1kFsEyQMxwiLFKUS6Rg==
-
-"@esbuild/darwin-x64@0.25.9":
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.25.9.tgz#e27dbc3b507b3a1cea3b9280a04b8b6b725f82be"
-  integrity sha512-jhHfBzjYTA1IQu8VyrjCX4ApJDnH+ez+IYVEoJHeqJm9VhG9Dh2BYaJritkYK3vMaXrf7Ogr/0MQ8/MeIefsPQ==
-
-"@esbuild/freebsd-arm64@0.25.9":
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.9.tgz#364e3e5b7a1fd45d92be08c6cc5d890ca75908ca"
-  integrity sha512-z93DmbnY6fX9+KdD4Ue/H6sYs+bhFQJNCPZsi4XWJoYblUqT06MQUdBCpcSfuiN72AbqeBFu5LVQTjfXDE2A6Q==
-
-"@esbuild/freebsd-x64@0.25.9":
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.25.9.tgz#7c869b45faeb3df668e19ace07335a0711ec56ab"
-  integrity sha512-mrKX6H/vOyo5v71YfXWJxLVxgy1kyt1MQaD8wZJgJfG4gq4DpQGpgTB74e5yBeQdyMTbgxp0YtNj7NuHN0PoZg==
-
-"@esbuild/linux-arm64@0.25.9":
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.25.9.tgz#48d42861758c940b61abea43ba9a29b186d6cb8b"
-  integrity sha512-BlB7bIcLT3G26urh5Dmse7fiLmLXnRlopw4s8DalgZ8ef79Jj4aUcYbk90g8iCa2467HX8SAIidbL7gsqXHdRw==
-
-"@esbuild/linux-arm@0.25.9":
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.25.9.tgz#6ce4b9cabf148274101701d112b89dc67cc52f37"
-  integrity sha512-HBU2Xv78SMgaydBmdor38lg8YDnFKSARg1Q6AT0/y2ezUAKiZvc211RDFHlEZRFNRVhcMamiToo7bDx3VEOYQw==
-
-"@esbuild/linux-ia32@0.25.9":
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.25.9.tgz#207e54899b79cac9c26c323fc1caa32e3143f1c4"
-  integrity sha512-e7S3MOJPZGp2QW6AK6+Ly81rC7oOSerQ+P8L0ta4FhVi+/j/v2yZzx5CqqDaWjtPFfYz21Vi1S0auHrap3Ma3A==
-
-"@esbuild/linux-loong64@0.25.9":
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.25.9.tgz#0ba48a127159a8f6abb5827f21198b999ffd1fc0"
-  integrity sha512-Sbe10Bnn0oUAB2AalYztvGcK+o6YFFA/9829PhOCUS9vkJElXGdphz0A3DbMdP8gmKkqPmPcMJmJOrI3VYB1JQ==
-
-"@esbuild/linux-mips64el@0.25.9":
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.25.9.tgz#a4d4cc693d185f66a6afde94f772b38ce5d64eb5"
-  integrity sha512-YcM5br0mVyZw2jcQeLIkhWtKPeVfAerES5PvOzaDxVtIyZ2NUBZKNLjC5z3/fUlDgT6w89VsxP2qzNipOaaDyA==
-
-"@esbuild/linux-ppc64@0.25.9":
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.25.9.tgz#0f5805c1c6d6435a1dafdc043cb07a19050357db"
-  integrity sha512-++0HQvasdo20JytyDpFvQtNrEsAgNG2CY1CLMwGXfFTKGBGQT3bOeLSYE2l1fYdvML5KUuwn9Z8L1EWe2tzs1w==
-
-"@esbuild/linux-riscv64@0.25.9":
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.25.9.tgz#6776edece0f8fca79f3386398b5183ff2a827547"
-  integrity sha512-uNIBa279Y3fkjV+2cUjx36xkx7eSjb8IvnL01eXUKXez/CBHNRw5ekCGMPM0BcmqBxBcdgUWuUXmVWwm4CH9kg==
-
-"@esbuild/linux-s390x@0.25.9":
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.25.9.tgz#3f6f29ef036938447c2218d309dc875225861830"
-  integrity sha512-Mfiphvp3MjC/lctb+7D287Xw1DGzqJPb/J2aHHcHxflUo+8tmN/6d4k6I2yFR7BVo5/g7x2Monq4+Yew0EHRIA==
-
-"@esbuild/linux-x64@0.25.9":
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.25.9.tgz#831fe0b0e1a80a8b8391224ea2377d5520e1527f"
-  integrity sha512-iSwByxzRe48YVkmpbgoxVzn76BXjlYFXC7NvLYq+b+kDjyyk30J0JY47DIn8z1MO3K0oSl9fZoRmZPQI4Hklzg==
-
-"@esbuild/netbsd-arm64@0.25.9":
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.9.tgz#06f99d7eebe035fbbe43de01c9d7e98d2a0aa548"
-  integrity sha512-9jNJl6FqaUG+COdQMjSCGW4QiMHH88xWbvZ+kRVblZsWrkXlABuGdFJ1E9L7HK+T0Yqd4akKNa/lO0+jDxQD4Q==
-
-"@esbuild/netbsd-x64@0.25.9":
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.25.9.tgz#db99858e6bed6e73911f92a88e4edd3a8c429a52"
-  integrity sha512-RLLdkflmqRG8KanPGOU7Rpg829ZHu8nFy5Pqdi9U01VYtG9Y0zOG6Vr2z4/S+/3zIyOxiK6cCeYNWOFR9QP87g==
-
-"@esbuild/openbsd-arm64@0.25.9":
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.9.tgz#afb886c867e36f9d86bb21e878e1185f5d5a0935"
-  integrity sha512-YaFBlPGeDasft5IIM+CQAhJAqS3St3nJzDEgsgFixcfZeyGPCd6eJBWzke5piZuZ7CtL656eOSYKk4Ls2C0FRQ==
-
-"@esbuild/openbsd-x64@0.25.9":
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.25.9.tgz#30855c9f8381fac6a0ef5b5f31ac6e7108a66ecf"
-  integrity sha512-1MkgTCuvMGWuqVtAvkpkXFmtL8XhWy+j4jaSO2wxfJtilVCi0ZE37b8uOdMItIHz4I6z1bWWtEX4CJwcKYLcuA==
-
-"@esbuild/openharmony-arm64@0.25.9":
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.9.tgz#2f2144af31e67adc2a8e3705c20c2bd97bd88314"
-  integrity sha512-4Xd0xNiMVXKh6Fa7HEJQbrpP3m3DDn43jKxMjxLLRjWnRsfxjORYJlXPO4JNcXtOyfajXorRKY9NkOpTHptErg==
-
-"@esbuild/sunos-x64@0.25.9":
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.25.9.tgz#69b99a9b5bd226c9eb9c6a73f990fddd497d732e"
-  integrity sha512-WjH4s6hzo00nNezhp3wFIAfmGZ8U7KtrJNlFMRKxiI9mxEK1scOMAaa9i4crUtu+tBr+0IN6JCuAcSBJZfnphw==
-
-"@esbuild/win32-arm64@0.25.9":
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.25.9.tgz#d789330a712af916c88325f4ffe465f885719c6b"
-  integrity sha512-mGFrVJHmZiRqmP8xFOc6b84/7xa5y5YvR1x8djzXpJBSv/UsNK6aqec+6JDjConTgvvQefdGhFDAs2DLAds6gQ==
-
-"@esbuild/win32-ia32@0.25.9":
-  version "0.25.9"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.25.9.tgz#52fc735406bd49688253e74e4e837ac2ba0789e3"
-  integrity sha512-b33gLVU2k11nVx1OhX3C8QQP6UHQK4ZtN56oFWvVXvz2VkDoe6fbG8TOgHFxEvqeqohmRnIHe5A1+HADk4OQww==
-
 "@esbuild/win32-x64@0.25.9":
   version "0.25.9"
   resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.9.tgz"
@@ -373,7 +226,7 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/js@9.33.0", "@eslint/js@^9.32.0":
+"@eslint/js@^9.32.0", "@eslint/js@9.33.0":
   version "9.33.0"
   resolved "https://registry.npmjs.org/@eslint/js/-/js-9.33.0.tgz"
   integrity sha512-5K1/mKhWaMfreBGJTwval43JJmkip0RmM+3+IuqupeSKNC/Th2Kc7ucaq5ovTSra/OOKB9c58CGSz3QMVbWt0A==
@@ -396,7 +249,7 @@
   resolved "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.0.0.tgz"
   integrity sha512-PGMrIYXLGA5K8RWy8zwBkd4vFi4z7ubxtet6Yn13Plf6krRTwPbdlCwlcfmoX0R7B4Z643QvrtHmdQ5fNtfFCg==
 
-"@fortawesome/fontawesome-svg-core@^7.0.0":
+"@fortawesome/fontawesome-svg-core@^7.0.0", "@fortawesome/fontawesome-svg-core@~1 || ~6 || ~7":
   version "7.0.0"
   resolved "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.0.0.tgz"
   integrity sha512-obBEF+zd98r/KtKVW6A+8UGWeaOoyMpl6Q9P3FzHsOnsg742aXsl8v+H/zp09qSSu/a/Hxe9LNKzbBaQq1CEbA==
@@ -492,15 +345,6 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@napi-rs/wasm-runtime@^0.2.11":
-  version "0.2.12"
-  resolved "https://registry.yarnpkg.com/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz#3e78a8b96e6c33a6c517e1894efbd5385a7cb6f2"
-  integrity sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==
-  dependencies:
-    "@emnapi/core" "^1.4.3"
-    "@emnapi/runtime" "^1.4.3"
-    "@tybys/wasm-util" "^0.10.0"
-
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
@@ -509,7 +353,7 @@
     "@nodelib/fs.stat" "2.0.5"
     run-parallel "^1.1.9"
 
-"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+"@nodelib/fs.stat@^2.0.2", "@nodelib/fs.stat@2.0.5":
   version "2.0.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
@@ -527,101 +371,6 @@
   resolved "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz"
   integrity sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==
 
-"@rollup/rollup-android-arm-eabi@4.46.2":
-  version "4.46.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.46.2.tgz#292e25953d4988d3bd1af0f5ebbd5ee4d65c90b4"
-  integrity sha512-Zj3Hl6sN34xJtMv7Anwb5Gu01yujyE/cLBDB2gnHTAHaWS1Z38L7kuSG+oAh0giZMqG060f/YBStXtMH6FvPMA==
-
-"@rollup/rollup-android-arm64@4.46.2":
-  version "4.46.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.46.2.tgz#053b3def3451e6fc1a9078188f22799e868d7c59"
-  integrity sha512-nTeCWY83kN64oQ5MGz3CgtPx8NSOhC5lWtsjTs+8JAJNLcP3QbLCtDDgUKQc/Ro/frpMq4SHUaHN6AMltcEoLQ==
-
-"@rollup/rollup-darwin-arm64@4.46.2":
-  version "4.46.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.46.2.tgz#98d90445282dec54fd05440305a5e8df79a91ece"
-  integrity sha512-HV7bW2Fb/F5KPdM/9bApunQh68YVDU8sO8BvcW9OngQVN3HHHkw99wFupuUJfGR9pYLLAjcAOA6iO+evsbBaPQ==
-
-"@rollup/rollup-darwin-x64@4.46.2":
-  version "4.46.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.46.2.tgz#fe05f95a736423af5f9c3a59a70f41ece52a1f20"
-  integrity sha512-SSj8TlYV5nJixSsm/y3QXfhspSiLYP11zpfwp6G/YDXctf3Xkdnk4woJIF5VQe0of2OjzTt8EsxnJDCdHd2xMA==
-
-"@rollup/rollup-freebsd-arm64@4.46.2":
-  version "4.46.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.46.2.tgz#41e1fbdc1f8c3dc9afb6bc1d6e3fb3104bd81eee"
-  integrity sha512-ZyrsG4TIT9xnOlLsSSi9w/X29tCbK1yegE49RYm3tu3wF1L/B6LVMqnEWyDB26d9Ecx9zrmXCiPmIabVuLmNSg==
-
-"@rollup/rollup-freebsd-x64@4.46.2":
-  version "4.46.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.46.2.tgz#69131e69cb149d547abb65ef3b38fc746c940e24"
-  integrity sha512-pCgHFoOECwVCJ5GFq8+gR8SBKnMO+xe5UEqbemxBpCKYQddRQMgomv1104RnLSg7nNvgKy05sLsY51+OVRyiVw==
-
-"@rollup/rollup-linux-arm-gnueabihf@4.46.2":
-  version "4.46.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.46.2.tgz#977ded91c7cf6fc0d9443bb9c0a064e45a805267"
-  integrity sha512-EtP8aquZ0xQg0ETFcxUbU71MZlHaw9MChwrQzatiE8U/bvi5uv/oChExXC4mWhjiqK7azGJBqU0tt5H123SzVA==
-
-"@rollup/rollup-linux-arm-musleabihf@4.46.2":
-  version "4.46.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.46.2.tgz#dc034fc3c0f0eb5c75b6bc3eca3b0b97fd35f49a"
-  integrity sha512-qO7F7U3u1nfxYRPM8HqFtLd+raev2K137dsV08q/LRKRLEc7RsiDWihUnrINdsWQxPR9jqZ8DIIZ1zJJAm5PjQ==
-
-"@rollup/rollup-linux-arm64-gnu@4.46.2":
-  version "4.46.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.46.2.tgz#5e92613768d3de3ffcabc965627dd0a59b3e7dfc"
-  integrity sha512-3dRaqLfcOXYsfvw5xMrxAk9Lb1f395gkoBYzSFcc/scgRFptRXL9DOaDpMiehf9CO8ZDRJW2z45b6fpU5nwjng==
-
-"@rollup/rollup-linux-arm64-musl@4.46.2":
-  version "4.46.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.46.2.tgz#2a44f88e83d28b646591df6e50aa0a5a931833d8"
-  integrity sha512-fhHFTutA7SM+IrR6lIfiHskxmpmPTJUXpWIsBXpeEwNgZzZZSg/q4i6FU4J8qOGyJ0TR+wXBwx/L7Ho9z0+uDg==
-
-"@rollup/rollup-linux-loongarch64-gnu@4.46.2":
-  version "4.46.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.46.2.tgz#bd5897e92db7fbf7dc456f61d90fff96c4651f2e"
-  integrity sha512-i7wfGFXu8x4+FRqPymzjD+Hyav8l95UIZ773j7J7zRYc3Xsxy2wIn4x+llpunexXe6laaO72iEjeeGyUFmjKeA==
-
-"@rollup/rollup-linux-ppc64-gnu@4.46.2":
-  version "4.46.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.46.2.tgz#a7065025411c14ad9ec34cc1cd1414900ec2a303"
-  integrity sha512-B/l0dFcHVUnqcGZWKcWBSV2PF01YUt0Rvlurci5P+neqY/yMKchGU8ullZvIv5e8Y1C6wOn+U03mrDylP5q9Yw==
-
-"@rollup/rollup-linux-riscv64-gnu@4.46.2":
-  version "4.46.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.46.2.tgz#17f9c0c675e13ef4567cfaa3730752417257ccc3"
-  integrity sha512-32k4ENb5ygtkMwPMucAb8MtV8olkPT03oiTxJbgkJa7lJ7dZMr0GCFJlyvy+K8iq7F/iuOr41ZdUHaOiqyR3iQ==
-
-"@rollup/rollup-linux-riscv64-musl@4.46.2":
-  version "4.46.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.46.2.tgz#bc6ed3db2cedc1ba9c0a2183620fe2f792c3bf3f"
-  integrity sha512-t5B2loThlFEauloaQkZg9gxV05BYeITLvLkWOkRXogP4qHXLkWSbSHKM9S6H1schf/0YGP/qNKtiISlxvfmmZw==
-
-"@rollup/rollup-linux-s390x-gnu@4.46.2":
-  version "4.46.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.46.2.tgz#440c4f6753274e2928e06d2a25613e5a1cf97b41"
-  integrity sha512-YKjekwTEKgbB7n17gmODSmJVUIvj8CX7q5442/CK80L8nqOUbMtf8b01QkG3jOqyr1rotrAnW6B/qiHwfcuWQA==
-
-"@rollup/rollup-linux-x64-gnu@4.46.2":
-  version "4.46.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.46.2.tgz#1e936446f90b2574ea4a83b4842a762cc0a0aed3"
-  integrity sha512-Jj5a9RUoe5ra+MEyERkDKLwTXVu6s3aACP51nkfnK9wJTraCC8IMe3snOfALkrjTYd2G1ViE1hICj0fZ7ALBPA==
-
-"@rollup/rollup-linux-x64-musl@4.46.2":
-  version "4.46.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.46.2.tgz#c6f304dfba1d5faf2be5d8b153ccbd8b5d6f1166"
-  integrity sha512-7kX69DIrBeD7yNp4A5b81izs8BqoZkCIaxQaOpumcJ1S/kmqNFjPhDu1LHeVXv0SexfHQv5cqHsxLOjETuqDuA==
-
-"@rollup/rollup-win32-arm64-msvc@4.46.2":
-  version "4.46.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.46.2.tgz#b4ad4a79219892aac112ed1c9d1356cad0566ef5"
-  integrity sha512-wiJWMIpeaak/jsbaq2HMh/rzZxHVW1rU6coyeNNpMwk5isiPjSTx0a4YLSlYDwBH/WBvLz+EtsNqQScZTLJy3g==
-
-"@rollup/rollup-win32-ia32-msvc@4.46.2":
-  version "4.46.2"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.46.2.tgz#b1b22eb2a9568048961e4a6f540438b4a762aa62"
-  integrity sha512-gBgaUDESVzMgWZhcyjfs9QFK16D8K6QZpwAaVNJxYDLHWayOta4ZMjGm/vsAEy3hvlS2GosVFlBlP9/Wb85DqQ==
-
 "@rollup/rollup-win32-x64-msvc@4.46.2":
   version "4.46.2"
   resolved "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.46.2.tgz"
@@ -640,68 +389,6 @@
     source-map-js "^1.2.1"
     tailwindcss "4.1.11"
 
-"@tailwindcss/oxide-android-arm64@4.1.11":
-  version "4.1.11"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.11.tgz#1f387d8302f011b61c226deb0c3a1d2bd79c6915"
-  integrity sha512-3IfFuATVRUMZZprEIx9OGDjG3Ou3jG4xQzNTvjDoKmU9JdmoCohQJ83MYd0GPnQIu89YoJqvMM0G3uqLRFtetg==
-
-"@tailwindcss/oxide-darwin-arm64@4.1.11":
-  version "4.1.11"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.11.tgz#acd35ffb7e4eae83d0a3fe2f8ea36cfcc9b21f7e"
-  integrity sha512-ESgStEOEsyg8J5YcMb1xl8WFOXfeBmrhAwGsFxxB2CxY9evy63+AtpbDLAyRkJnxLy2WsD1qF13E97uQyP1lfQ==
-
-"@tailwindcss/oxide-darwin-x64@4.1.11":
-  version "4.1.11"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.11.tgz#a0022312993a3893d6ff0312d6e3c83c4636fef4"
-  integrity sha512-EgnK8kRchgmgzG6jE10UQNaH9Mwi2n+yw1jWmof9Vyg2lpKNX2ioe7CJdf9M5f8V9uaQxInenZkOxnTVL3fhAw==
-
-"@tailwindcss/oxide-freebsd-x64@4.1.11":
-  version "4.1.11"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.11.tgz#dd8e55eb0b88fe7995b8148c0e0ae5fa27092d22"
-  integrity sha512-xdqKtbpHs7pQhIKmqVpxStnY1skuNh4CtbcyOHeX1YBE0hArj2romsFGb6yUmzkq/6M24nkxDqU8GYrKrz+UcA==
-
-"@tailwindcss/oxide-linux-arm-gnueabihf@4.1.11":
-  version "4.1.11"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.11.tgz#02ee99090988847d3f13d277679012cbffcdde37"
-  integrity sha512-ryHQK2eyDYYMwB5wZL46uoxz2zzDZsFBwfjssgB7pzytAeCCa6glsiJGjhTEddq/4OsIjsLNMAiMlHNYnkEEeg==
-
-"@tailwindcss/oxide-linux-arm64-gnu@4.1.11":
-  version "4.1.11"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.11.tgz#4837559c102bebe65089879f6a0278ed473b4813"
-  integrity sha512-mYwqheq4BXF83j/w75ewkPJmPZIqqP1nhoghS9D57CLjsh3Nfq0m4ftTotRYtGnZd3eCztgbSPJ9QhfC91gDZQ==
-
-"@tailwindcss/oxide-linux-arm64-musl@4.1.11":
-  version "4.1.11"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.11.tgz#bec465112a13a1383558ff36afdf28b8a8cb9021"
-  integrity sha512-m/NVRFNGlEHJrNVk3O6I9ggVuNjXHIPoD6bqay/pubtYC9QIdAMpS+cswZQPBLvVvEF6GtSNONbDkZrjWZXYNQ==
-
-"@tailwindcss/oxide-linux-x64-gnu@4.1.11":
-  version "4.1.11"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.11.tgz#f9e47e6aa67ff77f32f7412bc9698d4278e101bf"
-  integrity sha512-YW6sblI7xukSD2TdbbaeQVDysIm/UPJtObHJHKxDEcW2exAtY47j52f8jZXkqE1krdnkhCMGqP3dbniu1Te2Fg==
-
-"@tailwindcss/oxide-linux-x64-musl@4.1.11":
-  version "4.1.11"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.11.tgz#7d6e8adcfb9bc84d8e2e2e8781d661edb9e41ba8"
-  integrity sha512-e3C/RRhGunWYNC3aSF7exsQkdXzQ/M+aYuZHKnw4U7KQwTJotnWsGOIVih0s2qQzmEzOFIJ3+xt7iq67K/p56Q==
-
-"@tailwindcss/oxide-wasm32-wasi@4.1.11":
-  version "4.1.11"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.11.tgz#a1762f4939c6ebaa824696fda2fd7db1b85fbed2"
-  integrity sha512-Xo1+/GU0JEN/C/dvcammKHzeM6NqKovG+6921MR6oadee5XPBaKOumrJCXvopJ/Qb5TH7LX/UAywbqrP4lax0g==
-  dependencies:
-    "@emnapi/core" "^1.4.3"
-    "@emnapi/runtime" "^1.4.3"
-    "@emnapi/wasi-threads" "^1.0.2"
-    "@napi-rs/wasm-runtime" "^0.2.11"
-    "@tybys/wasm-util" "^0.9.0"
-    tslib "^2.8.0"
-
-"@tailwindcss/oxide-win32-arm64-msvc@4.1.11":
-  version "4.1.11"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.11.tgz#70ba392dca0fa3707ebe27d2bd6ac3e69d35e3b7"
-  integrity sha512-UgKYx5PwEKrac3GPNPf6HVMNhUIGuUh4wlDFR2jYYdkX6pL/rn73zTq/4pzUm8fOjAn5L8zDeHp9iXmUGOXZ+w==
-
 "@tailwindcss/oxide-win32-x64-msvc@4.1.11":
   version "4.1.11"
   resolved "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.11.tgz"
@@ -749,20 +436,6 @@
   dependencies:
     "@tanstack/query-core" "5.85.2"
 
-"@tybys/wasm-util@^0.10.0":
-  version "0.10.1"
-  resolved "https://registry.yarnpkg.com/@tybys/wasm-util/-/wasm-util-0.10.1.tgz#ecddd3205cf1e2d5274649ff0eedd2991ed7f414"
-  integrity sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==
-  dependencies:
-    tslib "^2.4.0"
-
-"@tybys/wasm-util@^0.9.0":
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/@tybys/wasm-util/-/wasm-util-0.9.0.tgz#3e75eb00604c8d6db470bf18c37b7d984a0e3355"
-  integrity sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==
-  dependencies:
-    tslib "^2.4.0"
-
 "@types/babel__core@^7.20.5":
   version "7.20.5"
   resolved "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz"
@@ -796,7 +469,7 @@
   dependencies:
     "@babel/types" "^7.28.2"
 
-"@types/estree@1.0.8", "@types/estree@^1.0.6":
+"@types/estree@^1.0.6", "@types/estree@1.0.8":
   version "1.0.8"
   resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz"
   integrity sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==
@@ -810,7 +483,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 +491,13 @@
   resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
 
+"@types/node@^20.19.0 || >=22.12.0", "@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"
@@ -830,7 +510,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^19.1.9":
+"@types/react@*", "@types/react@^19.0.0", "@types/react@^19.1.9":
   version "19.1.10"
   resolved "https://registry.npmjs.org/@types/react/-/react-19.1.10.tgz"
   integrity sha512-EhBeSYX0Y6ye8pNebpKrwFJq7BoQ8J5SO6NlvNwwHjSj6adXJViPQrKlsyPw7hLBLvckEMO1yxeGdR82YBBlDg==
@@ -852,7 +532,7 @@
     natural-compare "^1.4.0"
     ts-api-utils "^2.1.0"
 
-"@typescript-eslint/parser@8.39.1":
+"@typescript-eslint/parser@^8.39.1", "@typescript-eslint/parser@8.39.1":
   version "8.39.1"
   resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.39.1.tgz"
   integrity sha512-pUXGCuHnnKw6PyYq93lLRiZm3vjuslIy7tus1lIQTYVK9bL8XBgJnCWm8a0KcTtHC84Yya1Q6rtll+duSMj0dg==
@@ -880,7 +560,7 @@
     "@typescript-eslint/types" "8.39.1"
     "@typescript-eslint/visitor-keys" "8.39.1"
 
-"@typescript-eslint/tsconfig-utils@8.39.1", "@typescript-eslint/tsconfig-utils@^8.39.1":
+"@typescript-eslint/tsconfig-utils@^8.39.1", "@typescript-eslint/tsconfig-utils@8.39.1":
   version "8.39.1"
   resolved "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.39.1.tgz"
   integrity sha512-ePUPGVtTMR8XMU2Hee8kD0Pu4NDE1CN9Q1sxGSGd/mbOtGZDM7pnhXNJnzW63zk/q+Z54zVzj44HtwXln5CvHA==
@@ -896,7 +576,7 @@
     debug "^4.3.4"
     ts-api-utils "^2.1.0"
 
-"@typescript-eslint/types@8.39.1", "@typescript-eslint/types@^8.39.1":
+"@typescript-eslint/types@^8.39.1", "@typescript-eslint/types@8.39.1":
   version "8.39.1"
   resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.39.1.tgz"
   integrity sha512-7sPDKQQp+S11laqTrhHqeAbsCfMkwJMrV7oTDvtDds4mEofJYir414bYKUEb8YPUm9QL3U+8f6L6YExSoAGdQw==
@@ -949,7 +629,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:
@@ -957,7 +637,7 @@ acorn-jsx@^5.3.2:
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn@^8.15.0:
+"acorn@^6.0.0 || ^7.0.0 || ^8.0.0", acorn@^8.15.0:
   version "8.15.0"
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz"
   integrity sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==
@@ -1011,7 +691,7 @@ braces@^3.0.3:
   dependencies:
     fill-range "^7.1.1"
 
-browserslist@^4.24.0:
+browserslist@^4.24.0, "browserslist@>= 4.21.0":
   version "4.25.2"
   resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.25.2.tgz"
   integrity sha512-0si2SJK3ooGzIawRu61ZdPCO1IncZwS8IzuX73sPZsXW6EQ/w/DAfPyKI8l1ETTCr2MnvqWitmlCUxgdul45jA==
@@ -1046,7 +726,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 +763,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 +784,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 +839,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"
@@ -1234,7 +914,7 @@ eslint-visitor-keys@^4.2.1:
   resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz"
   integrity sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==
 
-eslint@^9.32.0:
+"eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0", "eslint@^6.0.0 || ^7.0.0 || >=8.0.0", "eslint@^8.57.0 || ^9.0.0", eslint@^9.32.0, eslint@>=8.40:
   version "9.33.0"
   resolved "https://registry.npmjs.org/eslint/-/eslint-9.33.0.tgz"
   integrity sha512-TS9bTNIryDzStCpJN93aC5VRSW3uTx9sClUn4B87pwiCaJh220otoI0X8mJKr+VcPtniMdN8GKjlwgWGUv5ZKA==
@@ -1341,12 +1021,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:
@@ -1410,11 +1090,6 @@ formik@^2.4.6:
     tiny-warning "^1.0.2"
     tslib "^2.0.0"
 
-fsevents@~2.3.2, fsevents@~2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
-  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
-
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
@@ -1468,12 +1143,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 +1176,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"
@@ -1528,14 +1203,14 @@ isexe@^2.0.0:
   resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
-jiti@^2.4.2:
+jiti@*, jiti@^2.4.2, jiti@>=1.21.0:
   version "2.5.1"
   resolved "https://registry.npmjs.org/jiti/-/jiti-2.5.1.tgz"
   integrity sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==
 
 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:
@@ -1590,57 +1265,12 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-lightningcss-darwin-arm64@1.30.1:
-  version "1.30.1"
-  resolved "https://registry.yarnpkg.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz#3d47ce5e221b9567c703950edf2529ca4a3700ae"
-  integrity sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==
-
-lightningcss-darwin-x64@1.30.1:
-  version "1.30.1"
-  resolved "https://registry.yarnpkg.com/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz#e81105d3fd6330860c15fe860f64d39cff5fbd22"
-  integrity sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==
-
-lightningcss-freebsd-x64@1.30.1:
-  version "1.30.1"
-  resolved "https://registry.yarnpkg.com/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz#a0e732031083ff9d625c5db021d09eb085af8be4"
-  integrity sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==
-
-lightningcss-linux-arm-gnueabihf@1.30.1:
-  version "1.30.1"
-  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz#1f5ecca6095528ddb649f9304ba2560c72474908"
-  integrity sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==
-
-lightningcss-linux-arm64-gnu@1.30.1:
-  version "1.30.1"
-  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz#eee7799726103bffff1e88993df726f6911ec009"
-  integrity sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==
-
-lightningcss-linux-arm64-musl@1.30.1:
-  version "1.30.1"
-  resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz#f2e4b53f42892feeef8f620cbb889f7c064a7dfe"
-  integrity sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==
-
-lightningcss-linux-x64-gnu@1.30.1:
-  version "1.30.1"
-  resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz#2fc7096224bc000ebb97eea94aea248c5b0eb157"
-  integrity sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==
-
-lightningcss-linux-x64-musl@1.30.1:
-  version "1.30.1"
-  resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz#66dca2b159fd819ea832c44895d07e5b31d75f26"
-  integrity sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==
-
-lightningcss-win32-arm64-msvc@1.30.1:
-  version "1.30.1"
-  resolved "https://registry.yarnpkg.com/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz#7d8110a19d7c2d22bfdf2f2bb8be68e7d1b69039"
-  integrity sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==
-
 lightningcss-win32-x64-msvc@1.30.1:
   version "1.30.1"
   resolved "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz"
   integrity sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==
 
-lightningcss@1.30.1:
+lightningcss@^1.21.0, lightningcss@1.30.1:
   version "1.30.1"
   resolved "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz"
   integrity sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==
@@ -1703,7 +1333,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 +1387,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"
@@ -1842,7 +1472,7 @@ picomatch@^2.3.1:
   resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
-picomatch@^4.0.2, picomatch@^4.0.3:
+"picomatch@^3 || ^4", picomatch@^4.0.2, picomatch@^4.0.3:
   version "4.0.3"
   resolved "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz"
   integrity sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==
@@ -1882,7 +1512,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,13 +1521,13 @@ 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"
     react-is "^18.2.0"
 
-react-dom@^19.1.1:
+react-dom@*, "react-dom@^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 || ^19", "react-dom@^18.0.0 || ^19.0.0 || ^19.0.0-rc", react-dom@^19.1.1, react-dom@>=16.9.0, react-dom@>=18:
   version "19.1.1"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz"
   integrity sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==
@@ -1916,7 +1546,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 +1579,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 +1599,12 @@ 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@^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"
@@ -1992,14 +1622,14 @@ react-use@^17.6.0:
     ts-easing "^0.2.0"
     tslib "^2.1.0"
 
-react@^19.1.1:
+react@*, "react@^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 || ^19", "react@^16.3 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.8.3 || ^17 || ^18 || ^19.0.0 || ^19.0.0-rc", "react@^18 || ^19", "react@^18.0.0 || ^19.0.0", "react@^18.0.0 || ^19.0.0 || ^19.0.0-rc", react@^19.1.1, react@>=16.8.0, react@>=16.9.0, react@>=18:
   version "19.1.1"
   resolved "https://registry.npmjs.org/react/-/react-19.1.1.tgz"
   integrity sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==
 
 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 +1673,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 +1692,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 +1712,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:
@@ -2107,31 +1737,31 @@ source-map-js@^1.2.1:
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz"
   integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
 
-source-map@0.5.6:
-  version "0.5.6"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
-  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==
 
+source-map@0.5.6:
+  version "0.5.6"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz"
+  integrity sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==
+
 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 +1769,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 +1783,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:
@@ -2163,7 +1793,7 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-tailwindcss@4.1.11, tailwindcss@^4.1.11:
+tailwindcss@^4.1.11, tailwindcss@4.1.11:
   version "4.1.11"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz"
   integrity sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==
@@ -2187,7 +1817,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 +1842,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,12 +1852,12 @@ 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:
+tslib@*, tslib@^2.0.0, tslib@^2.1.0:
   version "2.8.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz"
   integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
 
 type-check@^0.4.0, type-check@~0.4.0:
@@ -2247,11 +1877,16 @@ typescript-eslint@^8.39.0:
     "@typescript-eslint/typescript-estree" "8.39.1"
     "@typescript-eslint/utils" "8.39.1"
 
-typescript@~5.8.3:
+typescript@>=4.8.4, "typescript@>=4.8.4 <6.0.0", typescript@~5.8.3:
   version "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,10 +1904,10 @@ 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:
+"vite@^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0", "vite@^5.2.0 || ^6 || ^7", vite@^7.1.0:
   version "7.1.2"
   resolved "https://registry.npmjs.org/vite/-/vite-7.1.2.tgz"
   integrity sha512-J0SQBPlQiEXAF7tajiH+rUooJPo0l8KQgyg4/aMunNtrOa7bwuZJsJbDWzeljqQpgftxuq5yNJxQ91O9ts29UQ==