- finland version release

2025-10-17 09:07:32 +01:00
32 changed files with 391 additions and 470 deletions
--- a/package.json
+++ b/package.json
@@ -22,7 +22,6 @@
    "country-flag-icons": "^1.5.19",
    "formik": "^2.4.6",
    "howler": "^2.2.4",
-    "rc-slider": "^11.1.9",
    "react": "^19.1.1",
    "react-dom": "^19.1.1",
    "react-modal": "^3.16.3",
--- a/src/assets/sounds/ui/Beep.wav
+++ b/src/assets/sounds/ui/Beep.wav
--- a/src/assets/sounds/ui/Ding.wav
+++ b/src/assets/sounds/ui/Ding.wav
--- a/src/assets/sounds/ui/Warning.wav
+++ b/src/assets/sounds/ui/Warning.wav
--- a/src/assets/sounds/ui/readClick.wav
+++ b/src/assets/sounds/ui/readClick.wav
--- a/src/assets/sounds/ui/shutter.mp3
+++ b/src/assets/sounds/ui/shutter.mp3
--- a/src/components/PlateStack/NumberPlate.tsx
+++ b/src/components/PlateStack/NumberPlate.tsx
@@ -1,5 +1,5 @@
-import { GB } from "country-flag-icons/react/3x2";
-import { formatNumberPlate } from "../../utils/utils";
+// import { EU } from "country-flag-icons/react/3x2";
+import { formatNumberPlateEU } from "../../utils/utils";

 type NumberPlateProps = {
  vrm?: string | undefined;
@@ -40,19 +40,16 @@ 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"}`}
+        ${motion ? "bg-white" : "bg-white"}`}
    >
      <div>
-        <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>
+        {/* <div className="absolute inset-y-0 left-0 bg-[#003399] w-8 flex flex-col">
+          <EU />
+          <small className="text-white font-semibold text-center">FIN</small>
+        </div> */}
+        <p className={`pl-4 font-extrabold ${options.textSize} text-center`}>{vrm && formatNumberPlateEU(vrm)}</p>
      </div>
    </div>
  );
--- a/src/components/SettingForms/BearerType/BearerTypeFields.tsx
+++ b/src/components/SettingForms/BearerType/BearerTypeFields.tsx
@@ -29,7 +29,11 @@ const BearerTypeFields = () => {
  };

  return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
+    <Formik
+      initialValues={initialValues}
+      onSubmit={handleSubmit}
+      enableReinitialize
+    >
      {({ isSubmitting }) => (
        <Form>
          <div className="flex flex-col space-y-4 px-2">
@@ -56,9 +60,11 @@ const BearerTypeFields = () => {
            </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="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
            >
-              {isSubmitting || dispatcherMutation.isPending ? "Saving..." : "Save Changes"}
+              {isSubmitting || dispatcherMutation.isPending
+                ? "Saving..."
+                : "Save Changes"}
            </button>
          </div>
        </Form>
--- a/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx
+++ b/src/components/SettingForms/Channel1-JSON/ChannelFields.tsx
@@ -4,7 +4,10 @@ import { useEffect, useState } from "react";
 import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useCameraOutput } from "../../../hooks/useCameraOutput";
-import type { InitialValuesForm, InitialValuesFormErrors } from "../../../types/types";
+import type {
+  InitialValuesForm,
+  InitialValuesFormErrors,
+} from "../../../types/types";
 import { toast } from "sonner";

 const ChannelFields = () => {
@@ -14,8 +17,10 @@ const ChannelFields = () => {
  const backOfficeURL = backOfficeQuery?.data?.propBackofficeURL?.value;
  const username = backOfficeQuery?.data?.propUsername?.value;
  const password = backOfficeQuery?.data?.propPassword?.value;
-  const connectTimeoutSeconds = backOfficeQuery?.data?.propConnectTimeoutSeconds?.value;
-  const readTimeoutSeconds = backOfficeQuery?.data?.propReadTimeoutSeconds?.value;
+  const connectTimeoutSeconds =
+    backOfficeQuery?.data?.propConnectTimeoutSeconds?.value;
+  const readTimeoutSeconds =
+    backOfficeQuery?.data?.propReadTimeoutSeconds?.value;

  const initialValues: InitialValuesForm = {
    backOfficeURL: backOfficeURL ?? "",
@@ -39,7 +44,9 @@ const ChannelFields = () => {
    return null;
  };

-  const validateValues = (values: InitialValuesForm): InitialValuesFormErrors => {
+  const validateValues = (
+    values: InitialValuesForm
+  ): InitialValuesFormErrors => {
    const errors: InitialValuesFormErrors = {};

    const url = values.backOfficeURL?.trim();
@@ -71,7 +78,12 @@ const ChannelFields = () => {
  };

  return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize validate={validateValues}>
+    <Formik
+      initialValues={initialValues}
+      onSubmit={handleSubmit}
+      enableReinitialize
+      validate={validateValues}
+    >
      {({ errors, touched, isSubmitting }) => (
        <Form>
          <div className="flex flex-col space-y-2 px-2">
@@ -86,7 +98,9 @@ const ChannelFields = () => {
                id="backoffice"
                placeholder="https://www.backoffice.com"
                className={`p-1.5 border ${
-                  errors.backOfficeURL && touched.backOfficeURL ? "border-red-500" : "border-gray-400 "
+                  errors.backOfficeURL && touched.backOfficeURL
+                    ? "border-red-500"
+                    : "border-gray-400 "
                } rounded-lg w-full md:w-60`}
              />
            </FormGroup>
@@ -98,7 +112,9 @@ const ChannelFields = () => {
                id="username"
                placeholder="Back office username"
                className={`p-1.5 border ${
-                  errors.username && touched.username ? "border-red-500" : "border-gray-400 "
+                  errors.username && touched.username
+                    ? "border-red-500"
+                    : "border-gray-400 "
                } rounded-lg w-full md:w-60`}
              />
            </FormGroup>
@@ -111,7 +127,9 @@ const ChannelFields = () => {
                  id="password"
                  placeholder="Back office password"
                  className={`p-1.5 border ${
-                    errors.password && touched.password ? "border-red-500" : "border-gray-400 "
+                    errors.password && touched.password
+                      ? "border-red-500"
+                      : "border-gray-400 "
                  } rounded-lg w-full md:w-60`}
                />
                <FontAwesomeIcon
@@ -124,13 +142,17 @@ const ChannelFields = () => {
            </FormGroup>

            <FormGroup>
-              <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
+              <label htmlFor="connectTimeoutSeconds">
+                Connect Timeout Seconds
+              </label>
              <Field
                name={"connectTimeoutSeconds"}
                type="number"
                id="connectTimeoutSeconds"
                className={`p-1.5 border ${
-                  errors.connectTimeoutSeconds && touched.connectTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                  errors.connectTimeoutSeconds && touched.connectTimeoutSeconds
+                    ? "border-red-500"
+                    : "border-gray-400 "
                } rounded-lg w-full md:w-60`}
              />
            </FormGroup>
@@ -142,16 +164,20 @@ const ChannelFields = () => {
                id="readTimeoutSeconds"
                placeholder="https://example.com"
                className={`p-1.5 border ${
-                  errors.readTimeoutSeconds && touched.readTimeoutSeconds ? "border-red-500" : "border-gray-400 "
+                  errors.readTimeoutSeconds && touched.readTimeoutSeconds
+                    ? "border-red-500"
+                    : "border-gray-400 "
                } rounded-lg w-full md:w-60`}
              />
            </FormGroup>
          </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="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
          >
-            {isSubmitting || backOfficeMutation.isPending ? "Saving..." : "Save Changes"}
+            {isSubmitting || backOfficeMutation.isPending
+              ? "Saving..."
+              : "Save Changes"}
          </button>
          <ValidationToastOnce />
        </Form>
--- a/src/components/SettingForms/NPED/NPEDHotlist.tsx
+++ b/src/components/SettingForms/NPED/NPEDHotlist.tsx
@@ -31,7 +31,7 @@ const NPEDHotlist = () => {
              type="file"
              name="file"
              id="file"
-              className="mt-4 w-full flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center file:px-3 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5"
+              className="file:px-3 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5"
              onChange={(e) => {
                if (e.target.files) {
                  if (e.target.files[0].type !== "text/csv") {
--- a/src/components/SettingForms/Sound/SoundSettingsCard.tsx
+++ b/src/components/SettingForms/Sound/SoundSettingsCard.tsx
@@ -4,7 +4,7 @@ import SoundSettingsFields from "./SoundSettingsFields";

 const SoundSettingsCard = () => {
  return (
-    <Card className="p-4 col-span-5 w-full">
+    <Card className="p-4">
      <CardHeader title={"Sound Settings"} />
      <SoundSettingsFields />
    </Card>
--- a/src/components/SettingForms/Sound/SoundSettingsFields.tsx
+++ b/src/components/SettingForms/Sound/SoundSettingsFields.tsx
@@ -1,10 +1,9 @@
-import { Field, Form, Formik } from "formik";
+import { Field, FieldArray, Form, Formik } from "formik";
 import FormGroup from "../components/FormGroup";
 import type { FormValues, Hotlist } from "../../../types/types";
 import { useSoundContext } from "../../../context/SoundContext";
 import { useCameraBlackboard } from "../../../hooks/useCameraBlackboard";
 import { toast } from "sonner";
-import SliderComponent from "../../UI/Slider";

 const SoundSettingsFields = () => {
  const { state, dispatch } = useSoundContext();
@@ -13,32 +12,22 @@ const SoundSettingsFields = () => {
  const hotlists: Hotlist[] = state.hotlists;

  const soundOptions = state?.soundOptions?.map((soundOption) => ({
-    value: soundOption?.soundFileName,
+    value: soundOption?.name,
    label: soundOption?.name,
  }));

  const initialValues: FormValues = {
    sightingSound: state.sightingSound ?? "switch",
    NPEDsound: state.NPEDsound ?? "popup",
-    hotlistSound: state.hotlistSound ?? "notification",
    hotlists,
  };

  const handleSubmit = async (values: FormValues) => {
-    const updatedValues = {
-      ...values,
-      sightingVolume: state.sightingVolume,
-      NPEDsoundVolume: state.NPEDsoundVolume,
-      hotlistSoundVolume: state.hotlistSoundVolume,
-      soundOptions: [...(state.soundOptions ?? [])],
-    };
-
-    dispatch({ type: "UPDATE", payload: updatedValues });
-
+    dispatch({ type: "UPDATE", payload: values });
    const result = await mutation.mutateAsync({
      operation: "INSERT",
      path: "soundSettings",
-      value: updatedValues,
+      value: values,
    });
    if (result.reason !== "OK") {
      toast.error("Cannot update sound settings");
@@ -48,72 +37,55 @@ const SoundSettingsFields = () => {
  };
  return (
    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-      {() => (
+      {({ values }) => (
        <Form className="flex flex-col space-y-3">
          <FormGroup>
-            <div className="flex flex-col md:flex-row space-y-2 w-full justify-between gap-3">
-              <label htmlFor="sightingSound">Sighting Sound</label>
-              <Field
-                as="select"
-                name="sightingSound"
-                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
-              >
-                {soundOptions?.map(({ value, label }) => {
-                  return (
-                    <option key={label} value={value}>
-                      {label}
-                    </option>
-                  );
-                })}
-              </Field>
-              <SliderComponent soundCategory="SIGHTINGVOLUME" />
-            </div>
-          </FormGroup>
-          <FormGroup>
-            <div className="flex flex-col md:flex-row space-y-2 w-full justify-between gap-3">
-              <label htmlFor="NPEDsound">NPED notification Sound</label>
-              <Field
-                as="select"
-                name="NPEDsound"
-                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
-              >
-                {soundOptions?.map(({ value, label }) => (
+            <label htmlFor="sightingSound">Sighting Sound</label>
+            <Field
+              as="select"
+              name="sightingSound"
+              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]  w-full md:w-60"
+            >
+              {soundOptions?.map(({ value, label }) => {
+                return (
                  <option key={value} value={value}>
                    {label}
                  </option>
-                ))}
-              </Field>
-              <SliderComponent soundCategory="NPEDVOLUME" />
-            </div>
+                );
+              })}
+            </Field>
+          </FormGroup>
+          <FormGroup>
+            <label htmlFor="NPEDsound">NPED notification Sound</label>
+            <Field
+              as="select"
+              name="NPEDsound"
+              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]  w-full md:w-60"
+            >
+              {soundOptions?.map(({ value, label }) => (
+                <option key={value} value={value}>
+                  {label}
+                </option>
+              ))}
+            </Field>
          </FormGroup>
          <div>
            <h3 className="text-lg font-semibold mb-2">Hotlist Sounds</h3>
            <FormGroup>
-              <div className="flex flex-col md:flex-row space-y-2 w-full justify-between gap-3">
-                <label htmlFor="hotlistSound">All hotlist Sounds</label>
-                <Field
-                  as="select"
-                  name="hotlistSound"
-                  className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
-                >
-                  {soundOptions?.map(({ value, label }) => (
-                    <option key={value} value={value}>
-                      {label}
-                    </option>
-                  ))}
-                </Field>
-                <SliderComponent soundCategory="HOTLISTVOLUME" />
-              </div>
-            </FormGroup>
-            {/* <FormGroup>
              <FieldArray
                name="hotlists"
                render={() => (
                  <div className="w-full m-2">
                    {values?.hotlists?.length > 0 ? (
                      values?.hotlists?.map((hotlist, index) => (
-                        <div key={hotlist.name} className="flex items-center m-2 w-full justify-between">
-                          <label htmlFor={`hotlists.${index}.sound`} className="w-32 shrink-0">
+                        <div
+                          key={hotlist.name}
+                          className="flex items-center m-2 w-full justify-between"
+                        >
+                          <label
+                            htmlFor={`hotlists.${index}.sound`}
+                            className="w-32 shrink-0"
+                          >
                            {hotlist.name}
                          </label>
                          <Field
@@ -136,7 +108,7 @@ const SoundSettingsFields = () => {
                  </div>
                )}
              />
-            </FormGroup> */}
+            </FormGroup>
          </div>
          <button
            type="submit"
--- a/src/components/SettingForms/Sound/SoundUpload.tsx
+++ b/src/components/SettingForms/Sound/SoundUpload.tsx
@@ -3,69 +3,44 @@ import FormGroup from "../components/FormGroup";
 import type { SoundUploadValue } from "../../../types/types";
 import { useSoundContext } from "../../../context/SoundContext";
 import { toast } from "sonner";
-import { useCameraBlackboard } from "../../../hooks/useCameraBlackboard";

 const SoundUpload = () => {
-  const { state, dispatch } = useSoundContext();
-  const { mutation } = useCameraBlackboard();
-
+  const { dispatch } = useSoundContext();
  const initialValues: SoundUploadValue = {
    name: "",
    soundFile: null,
-    soundFileName: "",
-    soundUrl: "",
  };

-  const handleSubmit = async (values: SoundUploadValue) => {
+  const handleSubmit = (values: SoundUploadValue) => {
    if (!values.soundFile) {
      toast.warning("Please select an audio file");
-      return;
-    }
-    const alreadyExists = state?.soundOptions?.some((soundOption) => soundOption.name === values.name);
-    if (state.soundOptions?.includes(values) || alreadyExists) {
-      toast.warning("Sound already in list");
-      return;
-    }
-
-    const updatedValues = {
-      ...state,
-      soundOptions: [...(state.soundOptions ?? []), values],
-    };
-
-    const result = await mutation.mutateAsync({
-      operation: "INSERT",
-      path: "soundSettings",
-      value: updatedValues,
-    });
-    if (result.reason !== "OK") {
-      toast.error("Cannot update sound settings");
    } else {
-      toast.success(`${values.name} file added`);
+      dispatch({ type: "ADD", payload: values });
+      toast.success("Sound file upload successfully");
    }
-
-    dispatch({ type: "ADD", payload: values });
  };

  return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
-      {({ setFieldValue, errors, setFieldError, values }) => (
+    <Formik
+      initialValues={initialValues}
+      onSubmit={handleSubmit}
+      enableReinitialize
+    >
+      {({ setFieldValue, errors, setFieldError }) => (
        <Form>
-          <label htmlFor="soundFile" className="">
-            Sound File
-          </label>
          <FormGroup>
+            <label htmlFor="soundFile">Sound File</label>
            <input
              type="file"
              name="soundFile"
              id="sightingSoundinput"
              accept="audio/mpeg"
-              className="mt-4 w-full flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center file:px-3 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5"
              onChange={(e) => {
-                if (e.target?.files && e.target?.files[0]?.type === "audio/mpeg") {
-                  const url = URL.createObjectURL(e.target.files[0]);
-                  setFieldValue("soundUrl", url);
+                if (
+                  e.target?.files &&
+                  e.target?.files[0]?.type === "audio/mpeg"
+                ) {
                  setFieldValue("name", e.target.files[0].name);
-                  setFieldValue("soundFileName", e.target.files[0].name);
                  setFieldValue("soundFile", e.target.files[0]);
                } else {
                  setFieldError("soundFile", "Not an mp3 file");
@@ -74,24 +49,12 @@ const SoundUpload = () => {
              }}
            />
          </FormGroup>
-
-          <div className="mt-4 flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center">
-            {!values.soundFile && (
-              <div className="mb-3 rounded-xl bg-slate-800 px-3 py-1 text-xs uppercase tracking-wider text-slate-400">
-                No uploaded sound files
-              </div>
-            )}
-            <p className="max-w-md text-slate-300">
-              Uploaded Sound files will appear in the <span className="font-bold">drop downs</span> once they are
-              uploaded. They can be used for any <span className="text-blue-400">Sighting,</span>{" "}
-              <span className="text-emerald-400">Hotlist</span> or <span className="text-amber-600">NPED</span> hits.
-            </p>
-          </div>
-
-          {errors.soundFile && <p className="text-red-500 text-sm mt-1">Not an mp3 file</p>}
+          {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-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
            disabled={errors.soundFile ? true : false}
          >
            Upload
--- a/src/components/SettingForms/Sound/SoundUploadCard.tsx
+++ b/src/components/SettingForms/Sound/SoundUploadCard.tsx
@@ -4,7 +4,7 @@ import SoundUpload from "./SoundUpload";

 const SoundUploadCard = () => {
  return (
-    <Card className="p-4 col-span-3 w-full">
+    <Card className="p-4">
      <CardHeader title={"Sound upload"} />
      <SoundUpload />
    </Card>
--- a/src/components/SettingForms/System/SystemConfigFields.tsx
+++ b/src/components/SettingForms/System/SystemConfigFields.tsx
@@ -7,7 +7,8 @@ import type { SystemValues, SystemValuesErrors } from "../../../types/types";
 import { useSystemConfig } from "../../../hooks/useSystemConfig";

 const SystemConfigFields = () => {
-  const { saveSystemSettings, systemSettingsData, saveSystemSettingsLoading } = useSystemConfig();
+  const { saveSystemSettings, systemSettingsData, saveSystemSettingsLoading } =
+    useSystemConfig();
  const { softRebootMutation, hardRebootMutation } = useReboots();

  const initialvalues: SystemValues = {
@@ -25,7 +26,8 @@ const SystemConfigFields = () => {
    const interval = Number(values.sntpInterval);
    if (!values.deviceName) errors.deviceName = "Required";
    if (!values.timeZone) errors.timeZone = "Required";
-    if (isNaN(interval) || interval <= 0) errors.sntpInterval = "Cannot be less than 0";
+    if (isNaN(interval) || interval <= 0)
+      errors.sntpInterval = "Cannot be less than 0";
    if (!values.sntpServer) errors.sntpServer = "Required";
    return errors;
  };
@@ -50,11 +52,16 @@ const SystemConfigFields = () => {
      {({ values, errors, touched, isSubmitting }) => (
        <Form className="flex flex-col space-y-5 px-2">
          <FormGroup>
-            <label htmlFor="deviceName" className="font-medium whitespace-nowrap md:w-1/2 text-left">
+            <label
+              htmlFor="deviceName"
+              className="font-medium whitespace-nowrap md:w-1/2 text-left"
+            >
              Device Name
            </label>
            {touched.deviceName && errors.deviceName && (
-              <small className="absolute right-0 -top-5 text-red-500">{errors.deviceName}</small>
+              <small className="absolute right-0 -top-5 text-red-500">
+                {errors.deviceName}
+              </small>
            )}
            <Field
              id="deviceName"
@@ -66,11 +73,16 @@ const SystemConfigFields = () => {
            />
          </FormGroup>
          <FormGroup>
-            <label htmlFor="timeZone" className="font-medium whitespace-nowrap md:w-1/2 text-left">
+            <label
+              htmlFor="timeZone"
+              className="font-medium whitespace-nowrap md:w-1/2 text-left"
+            >
              Local Time Zone
            </label>
            {touched.timeZone && errors.timeZone && (
-              <small className="absolute right-0 -top-5 text-red-500">{errors.timeZone}</small>
+              <small className="absolute right-0 -top-5 text-red-500">
+                {errors.timeZone}
+              </small>
            )}
            <Field
              id="timeZone"
@@ -87,11 +99,16 @@ const SystemConfigFields = () => {
            </Field>
          </FormGroup>
          <FormGroup>
-            <label htmlFor="sntpServer" className="font-medium whitespace-nowrap md:w-1/2 text-left">
+            <label
+              htmlFor="sntpServer"
+              className="font-medium whitespace-nowrap md:w-1/2 text-left"
+            >
              SNTP Server
            </label>
            {touched.sntpServer && errors.sntpServer && (
-              <small className="absolute right-0 -top-5 text-red-500">{errors.sntpServer}</small>
+              <small className="absolute right-0 -top-5 text-red-500">
+                {errors.sntpServer}
+              </small>
            )}
            <Field
              id="sntpServer"
@@ -103,11 +120,16 @@ const SystemConfigFields = () => {
            />
          </FormGroup>
          <FormGroup>
-            <label htmlFor="sntpInterval" className="font-medium whitespace-nowrap md:w-1/2 text-left">
+            <label
+              htmlFor="sntpInterval"
+              className="font-medium whitespace-nowrap md:w-1/2 text-left"
+            >
              SNTP Interval minutes
            </label>
            {touched.sntpInterval && errors.sntpInterval && (
-              <small className="absolute right-0 -top-5 text-red-500">{errors.sntpInterval}</small>
+              <small className="absolute right-0 -top-5 text-red-500">
+                {errors.sntpInterval}
+              </small>
            )}
            <Field
              id="sntpInterval"
@@ -120,12 +142,15 @@ const SystemConfigFields = () => {
          </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="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
            disabled={isSubmitting}
          >
            {saveSystemSettingsLoading ? "Saving..." : "Save System Settings"}
          </button>
-          <SystemFileUpload name={"softwareUpdate"} selectedFile={values.softwareUpdate} />
+          <SystemFileUpload
+            name={"softwareUpdate"}
+            selectedFile={values.softwareUpdate}
+          />
          <div className="border-b border-gray-600">
            <p>Reboot</p>
          </div>
@@ -135,14 +160,18 @@ const SystemConfigFields = () => {
            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"}
+            {softRebootMutation.isPending || isSubmitting
+              ? "Rebooting..."
+              : "Software Reboot"}
          </button>
          <button
            type="button"
            className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition w-full md:w-[50%]"
            onClick={handleHardReboot}
          >
-            {hardRebootMutation.isPending || isSubmitting ? "Rebooting" : "Hardware Reboot"}
+            {hardRebootMutation.isPending || isSubmitting
+              ? "Rebooting"
+              : "Hardware Reboot"}
          </button>
        </Form>
      )}
--- a/src/components/SettingForms/System/SystemFileUpload.tsx
+++ b/src/components/SettingForms/System/SystemFileUpload.tsx
@@ -36,7 +36,7 @@ const SystemFileUpload = ({ name, selectedFile }: SystemFileUploadProps) => {
            type="file"
            name="softwareUpdate"
            id="softwareUpdate"
-            className="mt-4 w-full flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center file:px-3 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5"
+            className="file:px-10 file:border file:border-gray-500 file:rounded-lg file:bg-blue-800 file:mr-5 w-full max-w-xs"
            onChange={(event) => {
              const file = event.currentTarget.files?.[0];
              if (!file) {
@@ -44,7 +44,8 @@ const SystemFileUpload = ({ name, selectedFile }: SystemFileUploadProps) => {
                return;
              }

-              if (file?.size > 8 * 1024 * 1024) toast.error("File is too large (max 8MB).");
+              if (file?.size > 8 * 1024 * 1024)
+                toast.error("File is too large (max 8MB).");
              setFieldValue(name, file);
            }}
          />
@@ -52,7 +53,7 @@ const SystemFileUpload = ({ name, selectedFile }: SystemFileUploadProps) => {
      </FormGroup>
      <button
        type="button"
-        className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
+        className="w-full md:w-[50%] text-white bg-[#26B170]  hover:bg-green-700 font-small rounded-lg text-sm px-2 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
        disabled={!selectedFile}
        onClick={handleFileUploadClick}
      >
--- a/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx
+++ b/src/components/SettingForms/WiFi&Modem/ModemSettings.tsx
@@ -56,13 +56,23 @@ const ModemSettings = () => {

  return (
    <>
-      <ModemToggle showSettings={showSettings} onShowSettings={setShowSettings} />
+      <ModemToggle
+        showSettings={showSettings}
+        onShowSettings={setShowSettings}
+      />
      {!showSettings && (
-        <Formik initialValues={inititalValues} onSubmit={handleSubmit} enableReinitialize>
+        <Formik
+          initialValues={inititalValues}
+          onSubmit={handleSubmit}
+          enableReinitialize
+        >
          {({ isSubmitting }) => (
            <Form className="flex flex-col space-y-5 px-2">
              <FormGroup>
-                <label htmlFor="apn" className="font-medium whitespace-nowrap md:w-2/3">
+                <label
+                  htmlFor="apn"
+                  className="font-medium whitespace-nowrap md:w-2/3"
+                >
                  APN
                </label>
                <Field
@@ -74,7 +84,10 @@ const ModemSettings = () => {
                />
              </FormGroup>
              <FormGroup>
-                <label htmlFor="username" className="font-medium whitespace-nowrap md:w-2/3">
+                <label
+                  htmlFor="username"
+                  className="font-medium whitespace-nowrap md:w-2/3"
+                >
                  Username
                </label>
                <Field
@@ -86,7 +99,10 @@ const ModemSettings = () => {
                />
              </FormGroup>
              <FormGroup>
-                <label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
+                <label
+                  htmlFor="password"
+                  className="font-medium whitespace-nowrap md:w-2/3"
+                >
                  Password
                </label>
                <div className="flex gap-2 items-center relative mb-4">
@@ -106,7 +122,10 @@ const ModemSettings = () => {
                </div>
              </FormGroup>
              <FormGroup>
-                <label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
+                <label
+                  htmlFor="password"
+                  className="font-medium whitespace-nowrap md:w-2/3"
+                >
                  Password
                </label>
                <Field
@@ -121,9 +140,11 @@ const ModemSettings = () => {
              </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="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
              >
-                {isSubmitting || modemMutation.isPending ? "Saving..." : "Save Modem settings"}
+                {isSubmitting || modemMutation.isPending
+                  ? "Saving..."
+                  : "Save Modem settings"}
              </button>
            </Form>
          )}
--- a/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx
+++ b/src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx
@@ -37,11 +37,18 @@ const WiFiSettingsForm = () => {
    await wifiMutation.mutateAsync(wifiConfig);
  };
  return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
+    <Formik
+      initialValues={initialValues}
+      onSubmit={handleSubmit}
+      enableReinitialize
+    >
      {({ isSubmitting }) => (
        <Form className="flex flex-col space-y-5 px-2">
          <FormGroup>
-            <label htmlFor="ssid" className="font-medium whitespace-nowrap md:w-2/3">
+            <label
+              htmlFor="ssid"
+              className="font-medium whitespace-nowrap md:w-2/3"
+            >
              SSID
            </label>
            <Field
@@ -53,7 +60,10 @@ const WiFiSettingsForm = () => {
            />
          </FormGroup>
          <FormGroup>
-            <label htmlFor="password" className="font-medium whitespace-nowrap md:w-2/3">
+            <label
+              htmlFor="password"
+              className="font-medium whitespace-nowrap md:w-2/3"
+            >
              Password
            </label>
            <div className="flex gap-2 items-center relative mb-4">
@@ -73,7 +83,10 @@ const WiFiSettingsForm = () => {
            </div>
          </FormGroup>
          <FormGroup>
-            <label htmlFor="encryption" className="font-medium whitespace-nowrap md:w-2/3">
+            <label
+              htmlFor="encryption"
+              className="font-medium whitespace-nowrap md:w-2/3"
+            >
              WPA/Encryption Type
            </label>
            <Field
@@ -90,9 +103,11 @@ const WiFiSettingsForm = () => {
          </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="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
          >
-            {isSubmitting || wifiMutation.isPending ? "Saving..." : " Save WiFi settings"}
+            {isSubmitting || wifiMutation.isPending
+              ? "Saving..."
+              : " Save WiFi settings"}
          </button>
        </Form>
      )}
--- a/src/components/SettingForms/components/FormGroup.tsx
+++ b/src/components/SettingForms/components/FormGroup.tsx
@@ -5,7 +5,11 @@ type FormGroupProps = {
 };

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

 export default FormGroup;
--- a/src/components/SightingModal/SightingModal.tsx
+++ b/src/components/SightingModal/SightingModal.tsx
@@ -23,7 +23,8 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
  const { dispatch } = useAlertHitContext();
  const { query, mutation } = useCameraBlackboard();

-  const hotlistNames = getHotlistName(sighting?.metadata?.hotlistMatches);
+  const hotlistName = getHotlistName(sighting?.metadata?.hotlistMatches);
+
  const handleAcknowledgeButton = () => {
    try {
      if (!sighting) {
@@ -108,7 +109,7 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
                onClick={handleAcknowledgeButton}
              >
                <FontAwesomeIcon icon={faCheck} />
-                Acknowledge
+                Accept
              </button>
            )}
          </div>
@@ -116,6 +117,16 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
            <div className="flex flex-col md:flex-row gap-3 items-center">
              <NumberPlate vrm={sighting?.vrm} motion={motionAway} />
              <img src={sighting?.plateUrlColour} alt="plate patch" className="h-16 object-contain rounded-md" />
+              {hotlistName && (
+                <div>
+                  <p className="text-gray-300">Hotlist</p>
+                  <div className="items-center px-2.5 py-0.5 rounded-sm me-2 bg-amber-500">
+                    <p className="font-medium text-2xl break-all text-amber-800">
+                      {hotlistName ? hotlistName[0] : "-"}
+                    </p>
+                  </div>
+                </div>
+              )}
            </div>

            {isHotListHit && <img src={HotListImg} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
@@ -123,20 +134,6 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
            {isNPEDHitB && <img src={NPED_CAT_B} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
            {isNPEDHitC && <img src={NPED_CAT_C} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
          </div>
-          {hotlistNames && (
-            <div className="flex flex-col border-b border-gray-600 mb-4">
-              <p className="text-gray-300">Hotlists</p>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-[90%] lg:gap-x-[15%] w-[50%]">
-                {hotlistNames.map((hotlistName) => (
-                  <div className="items-center px-2.5 py-0.5 rounded-sm me-2 bg-amber-500 w-55 m-2">
-                    <p className="font-medium text-2xl break-all text-amber-800">
-                      {hotlistName ? hotlistName?.replace(/\.csv$/i, "") : "-"}
-                    </p>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
          <div className="flex flex-col lg:flex-row items-center gap-3">
            <img
              src={sighting?.overviewUrl}
@@ -160,26 +157,18 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
                  <dd className="font-medium text-2xl">{sighting?.seenCount ?? "-"}</dd>
                </div>

-                {sighting?.make && (
-                  <div>
-                    <dt className="text-gray-300">Make</dt>
-                    <dd className="font-medium text-2xl">{sighting?.make ?? "-"}</dd>
-                  </div>
-                )}
-                {sighting?.model ||
-                  (!sighting?.model.trim() && (
-                    <div>
-                      <dt className="text-gray-300">Model</dt>
-                      <dd className="font-medium text-2xl">{sighting?.model ?? "-"}</dd>
-                    </div>
-                  ))}
-                {sighting?.color && (
-                  <div className="sm:col-span-2">
-                    <dt className="text-gray-300">Colour</dt>
-                    <dd className="font-medium text-2xl">{sighting?.color ?? "-"}</dd>
-                  </div>
-                )}
-
+                <div>
+                  <dt className="text-gray-300">Make</dt>
+                  <dd className="font-medium text-2xl">{sighting?.make ?? "-"}</dd>
+                </div>
+                <div>
+                  <dt className="text-gray-300">Model</dt>
+                  <dd className="font-medium text-2xl">{sighting?.model ?? "-"}</dd>
+                </div>
+                <div className="sm:col-span-2">
+                  <dt className="text-gray-300">Colour</dt>
+                  <dd className="font-medium text-2xl">{sighting?.color ?? "-"}</dd>
+                </div>
                <div>
                  <dt className="text-gray-300">Time</dt>
                  <dd className="font-medium text-xl">{sighting?.timeStamp ?? "-"}</dd>
@@ -203,7 +192,7 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
                onClick={handleAcknowledgeButton}
              >
                <FontAwesomeIcon icon={faCheck} />
-                Acknowledge
+                Accept
              </button>
            )}
            {onDelete ? (
--- a/src/components/SightingsWidget/SightingWidget.tsx
+++ b/src/components/SightingsWidget/SightingWidget.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import type { HitKind, QueuedHit, ReducedSightingType, SightingType } from "../../types/types";
+import type { ReducedSightingType, SightingType } from "../../types/types";
 import { BLANK_IMG, getSoundFileURL } from "../../utils/utils";
 import NumberPlate from "../PlateStack/NumberPlate";
 import Card from "../UI/Card";
@@ -38,29 +38,23 @@ type SightingHistoryProps = {
  className?: string;
 };

-export default function SightingHistoryWidget({ className, title }: SightingHistoryProps) {
-  const [modalQueue, setModalQueue] = useState<QueuedHit[]>([]);
+export default function SightingHistoryWidget({
+  className,
+  title,
+}: SightingHistoryProps) {
  useNow(1000);
  const { state } = useSoundContext();

  const soundSrcNped = useMemo(() => {
-    if (state?.NPEDsound?.includes(".mp3") || state.NPEDsound?.includes(".wav")) {
-      const file = state.soundOptions?.find((item) => item.name === state.NPEDsound);
-      return file?.soundUrl ?? popup;
-    }
    return getSoundFileURL(state.NPEDsound) ?? popup;
-  }, [state.NPEDsound, state.soundOptions]);
+  }, [state.NPEDsound]);

  const soundSrcHotlist = useMemo(() => {
-    if (state?.hotlistSound?.includes(".mp3") || state.hotlistSound?.includes(".wav")) {
-      const file = state.soundOptions?.find((item) => item.name === state.hotlistSound);
-      return file?.soundUrl ?? notification;
-    }
-    return getSoundFileURL(state?.hotlistSound) ?? notification;
-  }, [state.hotlistSound, state.soundOptions]);
+    return getSoundFileURL(state?.hotlists?.[0]?.sound) ?? notification;
+  }, [state.hotlists]);

-  const { play: npedSound } = useSound(soundSrcNped, { volume: state.NPEDsoundVolume });
-  const { play: hotlistsound } = useSound(soundSrcHotlist, { volume: state.hotlistSoundVolume });
+  const { play: npedSound } = useSound(soundSrcNped);
+  const { play: hotlistsound } = useSound(soundSrcHotlist);
  const {
    sightings,
    setSelectedSighting,
@@ -79,14 +73,6 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
  const hasAutoOpenedRef = useRef(false);
  const npedRef = useRef(false);

-  const enqueue = useCallback((sighting: SightingType, kind: HitKind) => {
-    const id = sighting.vrm ?? sighting.ref;
-    if (processedRefs.current.has(id)) return;
-    processedRefs.current.add(id);
-
-    setModalQueue((q) => [...q, { id, sighting, kind }]);
-  }, []);
-
  const reduceObject = (obj: SightingType): ReducedSightingType => {
    return {
      vrm: obj.vrm,
@@ -112,7 +98,10 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
    [setSelectedSighting, setSightingModalOpen]
  );

-  const rows = useMemo(() => sightings?.filter(Boolean) as SightingType[], [sightings]);
+  const rows = useMemo(
+    () => sightings?.filter(Boolean) as SightingType[],
+    [sightings]
+  );

  useEffect(() => {
    if (!rows?.length) return;
@@ -121,15 +110,32 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
      const id = sighting.vrm;

      if (processedRefs.current.has(id)) continue;
-      const isHotlistHit = checkIsHotListHit(sighting);
-      const npedcategory = sighting?.metadata?.npedJSON?.["NPED CATEGORY"];
-      const isNPED = npedcategory === "A" || npedcategory === "B" || npedcategory === "C";
+      const isHot = checkIsHotListHit(sighting);
+      const cat = sighting?.metadata?.npedJSON?.["NPED CATEGORY"];

-      if (isNPED || isHotlistHit) {
-        enqueue(sighting, isNPED ? "NPED" : "HOTLIST"); // enqueue ONLY
+      if (cat === "A" || cat === "B" || cat === "C") {
+        npedSound();
+        setSelectedSighting(sighting);
+        setSightingModalOpen(true);
+        processedRefs.current.add(id);
+        break; // stop after one new open per render cycle
+      }
+
+      if (isHot) {
+        hotlistsound();
+        setSelectedSighting(sighting);
+        setSightingModalOpen(true);
+        processedRefs.current.add(id);
+        break;
      }
    }
-  }, [rows, enqueue]);
+  }, [
+    rows,
+    hotlistsound,
+    npedSound,
+    setSightingModalOpen,
+    setSelectedSighting,
+  ]);

  useEffect(() => {
    rows?.forEach((obj) => {
@@ -162,37 +168,31 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
    });

    if (firstNPED) {
-      enqueue(firstNPED, "NPED");
-
+      setSelectedSighting(firstNPED);
+      npedSound();
+      setSightingModalOpen(true);
      npedRef.current = true;
    }

    if (firstHot) {
-      enqueue(firstHot, "HOTLIST");
-
+      setSelectedSighting(firstHot);
+      hotlistsound();
+      setSightingModalOpen(true);
      hasAutoOpenedRef.current = true;
    }
-  }, [enqueue, hotlistsound, npedSound, rows, setSelectedSighting, setSightingModalOpen]);
-
-  useEffect(() => {
-    if (!isSightingModalOpen && modalQueue.length > 0) {
-      const next = modalQueue[0];
-
-      if (next.kind === "NPED") npedSound();
-      else hotlistsound();
-
-      setSelectedSighting(next.sighting);
-      setSightingModalOpen(true);
-    }
-  }, [isSightingModalOpen, npedSound, hotlistsound, setSelectedSighting, setSightingModalOpen, modalQueue]);
+  }, [hotlistsound, npedSound, setSelectedSighting]);

  const handleClose = () => {
    setSightingModalOpen(false);
-    setModalQueue((q) => q.slice(1));
  };
  return (
    <>
-      <Card className={clsx("overflow-y-auto min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[40%] p-4", className)}>
+      <Card
+        className={clsx(
+          "overflow-y-auto min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[40%] p-4",
+          className
+        )}
+      >
        <CardHeader title={title} />
        <div className="flex flex-col gap-3 ">
          {isLoading && (
@@ -215,16 +215,45 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
                  className={`border border-gray-700 rounded-md mb-2 p-2 cursor-pointer `}
                  onClick={() => onRowClick(obj)}
                >
-                  <div className={`flex items-center gap-3 mt-2 justify-between `}>
+                  <div
+                    className={`flex items-center gap-3 mt-2 justify-between `}
+                  >
                    <div className={`border p-1 `}>
-                      <img src={obj?.plateUrlColour || BLANK_IMG} height={48} width={200} alt="colour patch" />
+                      <img
+                        src={obj?.plateUrlColour || BLANK_IMG}
+                        height={48}
+                        width={200}
+                        alt="colour patch"
+                      />
                    </div>
                    {isHotListHit && (
-                      <img src={HotListImg} alt="hotlistHit" className="h-20 object-contain rounded-md" />
+                      <img
+                        src={HotListImg}
+                        alt="hotlistHit"
+                        className="h-20 object-contain rounded-md"
+                      />
+                    )}
+                    {isNPEDHitA && (
+                      <img
+                        src={NPED_CAT_A}
+                        alt="hotlistHit"
+                        className="h-20 object-contain rounded-md"
+                      />
+                    )}
+                    {isNPEDHitB && (
+                      <img
+                        src={NPED_CAT_B}
+                        alt="hotlistHit"
+                        className="h-20 object-contain rounded-md"
+                      />
+                    )}
+                    {isNPEDHitC && (
+                      <img
+                        src={NPED_CAT_C}
+                        alt="hotlistHit"
+                        className="h-20 object-contain rounded-md"
+                      />
                    )}
-                    {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" />}
                    <NumberPlate motion={motionAway} vrm={obj?.vrm} />
                  </div>
                </div>
@@ -233,7 +262,11 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
          </div>
        </div>
      </Card>
-      <SightingModal isSightingModalOpen={isSightingModalOpen} handleClose={handleClose} sighting={selectedSighting} />
+      <SightingModal
+        isSightingModalOpen={isSightingModalOpen}
+        handleClose={handleClose}
+        sighting={selectedSighting}
+      />
    </>
  );
 }
--- a/src/components/UI/ModalComponent.tsx
+++ b/src/components/UI/ModalComponent.tsx
@@ -7,12 +7,16 @@ type ModalComponentProps = {
  close: () => void;
 };

-const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) => {
+const ModalComponent = ({
+  isModalOpen,
+  children,
+  close,
+}: ModalComponentProps) => {
  return (
    <Modal
      isOpen={isModalOpen}
      onRequestClose={close}
-      className="bg-[#1e2a38] p-6 rounded-lg shadow-lg max-w-[80%] mx-auto mt-[1%] md:w-[70%] md:h-[95%] z-[100] overflow-y-auto max-h-screen"
+      className="bg-[#1e2a38] p-6 rounded-lg shadow-lg max-w-[90%] mx-auto mt-[1%] md:w-[80%] md:h-[95%] z-[100] overflow-y-auto max-h-screen"
      overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
    >
      {children}
--- a/src/components/UI/NavigationArrow.tsx
+++ b/src/components/UI/NavigationArrow.tsx
@@ -11,6 +11,7 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
  const navigate = useNavigate();

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

-export const SoundContext = createContext<SoundContextType | undefined>(undefined);
+export const SoundContext = createContext<SoundContextType | undefined>(
+  undefined
+);

 export const useSoundContext = () => {
  const ctx = useContext(SoundContext);
-  if (!ctx) throw new Error("useSoundContext must be used within <SoundContext>");
+  if (!ctx)
+    throw new Error("useSoundContext must be used within <SoundContext>");
  return ctx;
 };
--- a/src/context/providers/SoundContextProvider.tsx
+++ b/src/context/providers/SoundContextProvider.tsx
@@ -1,4 +1,11 @@
-import { useEffect, useMemo, useReducer, useRef, useState, type ReactNode } from "react";
+import {
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import { SoundContext } from "../SoundContext";
 import { initialState, reducer } from "../reducers/SoundContextReducer";
 import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
@@ -21,11 +28,7 @@ const SoundContextProvider = ({ children }: SoundContextProviderProps) => {
        path: "soundSettings",
      });

-      if (!result.result || typeof result.result !== "object") {
-        dispatch({ type: "UPDATE", payload: state });
-      } else {
-        dispatch({ type: "UPDATE", payload: result.result });
-      }
+      dispatch({ type: "UPDATE", payload: result.result });
    };
    fetchSound();
    // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -60,8 +63,13 @@ const SoundContextProvider = ({ children }: SoundContextProviderProps) => {
    };
  }, []);

-  const value = useMemo(() => ({ state, dispatch, audioArmed }), [state, audioArmed]);
-  return <SoundContext.Provider value={value}>{children}</SoundContext.Provider>;
+  const value = useMemo(
+    () => ({ state, dispatch, audioArmed }),
+    [state, audioArmed]
+  );
+  return (
+    <SoundContext.Provider value={value}>{children}</SoundContext.Provider>
+  );
 };

 export default SoundContextProvider;
--- a/src/context/reducers/SoundContextReducer.ts
+++ b/src/context/reducers/SoundContextReducer.ts
@@ -3,20 +3,12 @@ import type { SoundAction, SoundState } from "../../types/types";
 export const initialState: SoundState = {
  sightingSound: "switch",
  NPEDsound: "popup",
-  hotlistSound: "warning",
  hotlists: [{ name: "hotlistName", sound: "notification" }],
  soundOptions: [
-    { name: "Switch (Default)", soundFileName: "switch" },
-    { name: "Popup", soundFileName: "popup" },
-    { name: "Notification", soundFileName: "notification" },
-    { name: "Beep", soundFileName: "beep" },
-    { name: "Ding", soundFileName: "ding" },
-    { name: "Shutter", soundFileName: "shutter" },
-    { name: "Warning (voice)", soundFileName: "warning" },
+    { name: "switch (Default)", soundFile: null },
+    { name: "popup", soundFile: null },
+    { name: "notification", soundFile: null },
  ],
-  sightingVolume: 1,
-  NPEDsoundVolume: 1,
-  hotlistSoundVolume: 1,
 };

 export function reducer(state: SoundState, action: SoundAction): SoundState {
@@ -26,15 +18,10 @@ export function reducer(state: SoundState, action: SoundAction): SoundState {
        ...state,
        sightingSound: action.payload.sightingSound,
        NPEDsound: action.payload.NPEDsound,
-        hotlistSound: action.payload.hotlistSound,
        hotlists: action.payload.hotlists?.map((hotlist) => ({
          name: hotlist.name,
          sound: hotlist.sound,
        })),
-        NPEDsoundVolume: action.payload.NPEDsoundVolume,
-        sightingVolume: action.payload.sightingVolume,
-        hotlistSoundVolume: action.payload.hotlistSoundVolume,
-        soundOptions: action.payload.soundOptions,
      };
    }

@@ -44,24 +31,6 @@ export function reducer(state: SoundState, action: SoundAction): SoundState {
        soundOptions: [...(state.soundOptions ?? []), action.payload],
      };
    }
-    // todo: refactor to use single state coupled with sound name. e.g : {name: <soundname>, volume: <volume>}
-    case "SIGHTINGVOLUME":
-      return {
-        ...state,
-        sightingVolume: action.payload,
-      };
-
-    case "NPEDVOLUME":
-      return {
-        ...state,
-        NPEDsoundVolume: action.payload,
-      };
-
-    case "HOTLISTVOLUME":
-      return {
-        ...state,
-        hotlistSoundVolume: action.payload,
-      };

    default:
      return state;
--- a/src/hooks/useSightingFeed.ts
+++ b/src/hooks/useSightingFeed.ts
@@ -43,12 +43,8 @@ export function useSightingFeed(url: string | undefined) {
  }, [audioArmed, latestRef]);

  const soundSrc = useMemo(() => {
-    if (state?.sightingSound?.includes(".mp3") || state.sightingSound?.includes(".wav")) {
-      const file = state.soundOptions?.find((item) => item.name === state.sightingSound);
-      return file?.soundUrl ?? switchSound;
-    }
    return getSoundFileURL(state?.sightingSound) ?? switchSound;
-  }, [state.sightingSound, state.soundOptions]);
+  }, [state.sightingSound]);

  function refetchInterval(query: Query<SightingType, Error, SightingType, (string | undefined)[]>) {
    if (!query) return;
@@ -79,9 +75,8 @@ export function useSightingFeed(url: string | undefined) {
  });

  //use latestref instead of trigger to revert back
-
  useSoundOnChange(soundSrc, trigger, {
-    volume: state.sightingVolume,
+    volume: 1,
    initial: false,
  });

--- a/src/pages/SystemSettings.tsx
+++ b/src/pages/SystemSettings.tsx
@@ -47,7 +47,7 @@ const SystemSettings = () => {
          </div>
        </TabPanel>
        <TabPanel>
-          <div className="mx-auto grid grid-rows-2 sm:grid-cols-1 lg:grid-cols-8 gap-4 px-2 sm:px-4 lg:px-0 w-full">
+          <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-4 px-2 sm:px-4 lg:px-0 w-full">
            <SoundSettingsCard />
            <SoundUploadCard />
          </div>
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -43,7 +43,9 @@ export type CameraSettingValues = {
  id: number | string;
 };

-export type CameraSettingErrorValues = Partial<Record<keyof CameraSettingValues, string>>;
+export type CameraSettingErrorValues = Partial<
+  Record<keyof CameraSettingValues, string>
+>;

 export type BearerTypeFieldType = {
  format: string;
@@ -285,26 +287,18 @@ export type FormValues = {
  sightingSound: SoundValue;
  NPEDsound: SoundValue;
  hotlists: Hotlist[];
-  hotlistSound: SoundValue;
-  soundOptions?: SoundUploadValue[];
 };

 export type SoundUploadValue = {
  name: string;
-  soundFileName?: string;
-  soundFile?: File | null;
-  soundUrl?: string;
+  soundFile: File | null;
 };

 export type SoundState = {
  sightingSound: SoundValue;
  NPEDsound: SoundValue;
  hotlists: Hotlist[];
-  hotlistSound: SoundValue;
  soundOptions?: SoundUploadValue[];
-  sightingVolume: number;
-  NPEDsoundVolume: number;
-  hotlistSoundVolume: number;
 };

 type UpdateAction = {
@@ -313,11 +307,6 @@ type UpdateAction = {
    sightingSound: SoundValue;
    NPEDsound: SoundValue;
    hotlists: Hotlist[];
-    sightingVolume: number;
-    NPEDsoundVolume: number;
-    hotlistSoundVolume: number;
-    hotlistSound: SoundValue;
-    soundOptions?: SoundUploadValue[];
  };
 };

@@ -326,12 +315,7 @@ type AddAction = {
  payload: SoundUploadValue;
 };

-type VolumeAction = {
-  type: "SIGHTINGVOLUME" | "NPEDVOLUME" | "HOTLISTVOLUME";
-  payload: number;
-};
-
-export type SoundAction = UpdateAction | AddAction | VolumeAction;
+export type SoundAction = UpdateAction | AddAction;
 export type WifiSettingValues = {
  ssid: string;
  password: string;
@@ -371,11 +355,3 @@ export type ModemSettingsType = {
  password: string;
  authenticationType: string;
 };
-
-export type HitKind = "NPED" | "HOTLIST";
-
-export type QueuedHit = {
-  id: number | string;
-  sighting: SightingType;
-  kind: HitKind;
-};
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,30 +1,18 @@
 import switchSound from "../assets/sounds/ui/switch.mp3";
 import popup from "../assets/sounds/ui/popup_open.mp3";
 import notification from "../assets/sounds/ui/notification.mp3";
-import beep from "../assets/sounds/ui/Beep.wav";
-import warning from "../assets/sounds/ui/Warning.wav";
-import ding from "../assets/sounds/ui/Ding.wav";
-import shutter from "../assets/sounds/ui/shutter.mp3";
-
 import type { HotlistMatches, SightingType } from "../types/types";
+import { hasFlag } from "country-flag-icons";

 export function getSoundFileURL(name: string) {
  const sounds: Record<string, string> = {
    switch: switchSound,
    popup: popup,
    notification: notification,
-    beep: beep,
-    warning: warning,
-    ding: ding,
-    shutter: shutter,
  };
  return sounds[name] ?? null;
 }

-export const showSoundURL = (url: URL | string | undefined) => {
-  console.log(url);
-};
-
 const randomChars = () => {
  const uppercaseAsciiStart = 65;
  const letterIndex = Math.floor(Math.random() * 26);
@@ -91,6 +79,12 @@ export const formatNumberPlate = (plate: string) => {
  const formattedPlate = splittedPlate?.join("");
  return formattedPlate;
 };
+export const formatNumberPlateEU = (plate: string) => {
+  const splittedPlate = plate?.split("");
+  splittedPlate?.splice(3, 0, " ");
+  const formattedPlate = splittedPlate?.join("");
+  return formattedPlate;
+};

 export const BLANK_IMG = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";

@@ -147,13 +141,16 @@ export const checkIsHotListHit = (sigthing: SightingType | null) => {
 };

 export function getHotlistName(obj: HotlistMatches | undefined) {
-  if (!obj) return;
+  if (!obj || Object.values(obj).includes(false)) return;

-  const hotlistNames = Object.entries(obj)
-    .filter(([, value]) => value === true)
-    .map(([key]) => key);
-  return hotlistNames;
+  const keys = Object.keys(obj);
+  return keys;
 }

 export const getNPEDCategory = (r?: SightingType | null) =>
  r?.metadata?.npedJSON?.["NPED CATEGORY"] as "A" | "B" | "C" | undefined;
+
+export const numberPlateFlag = (countryCode: string) => {
+  const result = hasFlag(countryCode) === true;
+  console.log(result);
+};
--- a/yarn.lock
+++ b/yarn.lock
@@ -138,7 +138,7 @@
  dependencies:
    "@babel/helper-plugin-utils" "^7.27.1"

-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.18.3":
+"@babel/runtime@^7.1.2":
  version "7.28.4"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.4.tgz#a70226016fabe25c5783b2f22d3e1c9bc5ca3326"
  integrity sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==
@@ -1044,11 +1044,6 @@ chownr@^3.0.0:
  resolved "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz"
  integrity sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==

-classnames@^2.2.5:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
-  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
-
 clsx@^2.0.0, clsx@^2.1.1:
  version "2.1.1"
  resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz"
@@ -1880,23 +1875,6 @@ queue-microtask@^1.2.2:
  resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==

-rc-slider@^11.1.9:
-  version "11.1.9"
-  resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-11.1.9.tgz#d872130fbf4ec51f28543d62e90451091d6f5208"
-  integrity sha512-h8IknhzSh3FEM9u8ivkskh+Ef4Yo4JRIY2nj7MrH6GQmrwV6mcpJf5/4KgH5JaVI1H3E52yCdpOlVyGZIeph5A==
-  dependencies:
-    "@babel/runtime" "^7.10.1"
-    classnames "^2.2.5"
-    rc-util "^5.36.0"
-
-rc-util@^5.36.0:
-  version "5.44.4"
-  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.44.4.tgz#89ee9037683cca01cd60f1a6bbda761457dd6ba5"
-  integrity sha512-resueRJzmHG9Q6rI/DfK6Kdv9/Lfls05vzMs1Sk3M2P+3cJa+MakaZyWY8IPfehVuhPJFKrIY1IK4GqbiaiY5w==
-  dependencies:
-    "@babel/runtime" "^7.18.3"
-    react-is "^18.2.0"
-
 react-dom@^19.1.1:
  version "19.1.1"
  resolved "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz"
@@ -1914,11 +1892,6 @@ react-is@^16.13.1, react-is@^16.7.0:
  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==

-react-is@^18.2.0:
-  version "18.3.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
-  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
-
 react-lifecycles-compat@^3.0.0:
  version "3.0.4"
  resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"