Merged develop into bugfix/uploadsounds-2

Bugfix/bearertype

package.json

@@ -32,7 +32,8 @@
     "react-tabs": "^6.1.0",
     "react-use": "^17.6.0",
     "sonner": "^2.0.7",
-    "tailwindcss": "^4.1.11"
+    "tailwindcss": "^4.1.11",
+    "use-debounce": "^10.0.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.32.0",

src/components/SettingForms/BearerType/BearerTypeFields.tsx

@@ -1,69 +1,35 @@
-import { Field, Form, Formik } from "formik";
+import { Field, useFormikContext } from "formik";
 import FormToggle from "../components/FormToggle";
-import { useCameraOutput } from "../../../hooks/useCameraOutput";
-import { cleanArray } from "../../../utils/utils";
 import FormGroup from "../components/FormGroup";
-import type { BearerTypeFieldType } from "../../../types/types";
-
-export const ValuesComponent = () => {
-  return null;
-};
+import type { BearerTypeFieldType, InitialValuesForm } from "../../../types/types";
 
 const BearerTypeFields = () => {
-  const { dispatcherQuery, dispatcherMutation } = useCameraOutput();
-
-  const format = dispatcherQuery?.data?.propFormat?.value;
-  const rawOptions = dispatcherQuery?.data?.propFormat?.accepted;
-  const enabled = dispatcherQuery?.data?.propEnabled?.value;
-  const verbose = dispatcherQuery?.data?.propVerbose?.value;
-  const options = cleanArray(rawOptions);
-
-  const initialValues: BearerTypeFieldType = {
-    format: format ?? "JSON",
-    enabled: enabled === "true",
-    verbose: verbose === "true",
-  };
-
-  const handleSubmit = async (values: BearerTypeFieldType) => {
-    await dispatcherMutation.mutateAsync(values);
-  };
+  useFormikContext<BearerTypeFieldType & InitialValuesForm>();
 
   return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
-      {({ isSubmitting }) => (
-        <Form>
-          <div className="flex flex-col space-y-4 px-2">
-            <FormGroup>
-              <label htmlFor="format">Format</label>
-              <Field
-                as="select"
-                name="format"
-                id="format"
-                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445]  w-full md:w-60"
-              >
-                {options?.map((option: string) => (
-                  <option key={option} value={option}>
-                    {option}
-                  </option>
-                ))}
-              </Field>
-            </FormGroup>
-            <FormGroup>
-              <div className="flex flex-col space-y-4">
-                <FormToggle name="enabled" label="Enabled" />
-                <FormToggle name="verbose" label="Verbose" />
-              </div>
-            </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"
-            >
-              {isSubmitting || dispatcherMutation.isPending ? "Saving..." : "Save Changes"}
-            </button>
-          </div>
-        </Form>
-      )}
-    </Formik>
+    <div className="flex flex-col space-y-4 px-2">
+      <FormGroup>
+        <label htmlFor="format">Format</label>
+        <Field
+          as="select"
+          name="format"
+          id="format"
+          className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
+        >
+          <option key={"JSON"} value={"JSON"}>
+            JSON
+          </option>
+          <option key={"BOF2"} value={"BOF2"}>
+            BOF2
+          </option>
+        </Field>
+      </FormGroup>
+      <FormGroup>
+        <div className="flex flex-col space-y-4">
+          <FormToggle name="enabled" label="Enabled" />
+        </div>
+      </FormGroup>
+    </div>
   );
 };
 

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

@@ -1,12 +1,47 @@
+import { useFormikContext, type FormikTouched } from "formik";
 import Card from "../../UI/Card";
 import CardHeader from "../../UI/CardHeader";
 import ChannelFields from "./ChannelFields";
+import type { BearerTypeFieldType, InitialValuesForm } from "../../../types/types";
+import { useCameraBackOfficeOutput } from "../../../hooks/useBackOfficeConfig";
+import { useEffect, useMemo } from "react";
+
+type ChannelCardProps = {
+  touched: FormikTouched<BearerTypeFieldType & InitialValuesForm>;
+  isSubmitting: boolean;
+};
+
+const ChannelCard = ({ touched, isSubmitting }: ChannelCardProps) => {
+  const { values, setFieldValue } = useFormikContext<BearerTypeFieldType & InitialValuesForm>();
+  const { backOfficeQuery } = useCameraBackOfficeOutput(values?.format);
+
+  const mapped = useMemo(() => {
+    const d = backOfficeQuery.data;
+    return {
+      backOfficeURL: d?.propBackofficeURL?.value ?? "",
+      username: d?.propUsername?.value ?? "",
+      password: d?.propPassword?.value ?? "",
+      connectTimeoutSeconds: Number(d?.propConnectTimeoutSeconds?.value),
+      readTimeoutSeconds: Number(d?.propReadTimeoutSeconds?.value),
+    };
+  }, [backOfficeQuery.data]);
+
+  useEffect(() => {
+    if (!backOfficeQuery.isSuccess) return;
+    for (const [key, value] of Object.entries(mapped)) {
+      setFieldValue(key, value);
+    }
+  }, [backOfficeQuery.isSuccess, mapped, setFieldValue]);
 
-const ChannelCard = () => {
   return (
     <Card className="p-4">
-      <CardHeader title="Channel 1 (JSON)" />
-      <ChannelFields />
+      <CardHeader title={`Channel (${values?.format})`} />
+      <ChannelFields
+        touched={touched}
+        isSubmitting={isSubmitting}
+        backOfficeData={backOfficeQuery}
+        format={values?.format}
+      />
     </Card>
   );
 };

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

@@ -1,79 +1,52 @@
-import { Field, Form, Formik, useFormikContext } from "formik";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Field, useFormikContext, type FormikTouched } from "formik";
 import FormGroup from "../components/FormGroup";
 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 { BearerTypeFieldType, InitialValuesForm } from "../../../types/types";
 import { toast } from "sonner";
+import type { UseQueryResult } from "@tanstack/react-query";
 
-const ChannelFields = () => {
+type ChannelFieldsProps = {
+  touched: FormikTouched<BearerTypeFieldType & InitialValuesForm>;
+  isSubmitting: boolean;
+
+  backOfficeData: UseQueryResult<any, Error>;
+  format?: string;
+};
+
+const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) => {
   const [showPwd, setShowPwd] = useState(false);
-  const { backOfficeQuery, backOfficeMutation } = useCameraOutput();
-
-  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 initialValues: InitialValuesForm = {
-    backOfficeURL: backOfficeURL ?? "",
-    username: username ?? "",
-    password: password ?? "",
-    connectTimeoutSeconds: Number(connectTimeoutSeconds),
-    readTimeoutSeconds: Number(readTimeoutSeconds),
-  };
-
-  const handleSubmit = async (values: InitialValuesForm) => {
-    await backOfficeMutation.mutateAsync(values);
-  };
+  const { submitCount, isValid, values, errors } = useFormikContext<BearerTypeFieldType & InitialValuesForm>();
 
   const ValidationToastOnce = () => {
-    const { submitCount, isValid } = useFormikContext();
     useEffect(() => {
       if (submitCount > 0 && !isValid) {
         toast.error("Check fields are filled in");
       }
-    }, [submitCount, isValid]);
+    }, []);
     return null;
   };
 
-  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";
-    } else if (read < 0) {
-      errors.readTimeoutSeconds = "Must be ≥ 0";
-    }
-
-    const connect = Number(values.connectTimeoutSeconds);
-    if (!Number.isFinite(connect)) {
-      errors.connectTimeoutSeconds = "Must be a number";
-    } else if (connect < 0) {
-      errors.connectTimeoutSeconds = "Must be ≥ 0";
-    }
-
-    return errors;
-  };
-
   return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize validate={validateValues}>
-      {({ errors, touched, isSubmitting }) => (
-        <Form>
+    <>
+      {format?.toLowerCase() !== "bof2" && format?.toLowerCase() !== "json" ? (
+        <>
+          <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">
+              Format coming soon
+            </div>
+
+            <p className="max-w-md text-slate-300">
+              Output configuration currently supports <span className="font-bold text-blue-400">JSON</span> or{" "}
+              <span className="font-bold text-emerald-400">BOF2</span>. <br /> More formats will be added in future
+              updates.
+            </p>
+          </div>
+        </>
+      ) : (
+        <>
           <div className="flex flex-col space-y-2 px-2">
             <FormGroup>
               <label htmlFor="backoffice" className="m-0">
@@ -146,17 +119,78 @@ const ChannelFields = () => {
                 } rounded-lg w-full md:w-60`}
               />
             </FormGroup>
+
+            {format?.toLowerCase() === "bof2" && (
+              <>
+                <div className="border-b border-gray-500 my-3">
+                  <h2 className="font-bold">{values.format} Constants</h2>
+                </div>
+                <FormGroup>
+                  <label htmlFor="FFID">Feed ID / Force ID</label>
+                  <Field
+                    name={"FFID"}
+                    type="text"
+                    id="FFID"
+                    placeholder="ABC123"
+                    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="SCID">Source ID / Camera ID</label>
+                  <Field
+                    name={"SCID"}
+                    type="text"
+                    id="SCID"
+                    placeholder="DEF345"
+                    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="timestampSource">Timestamp Source</label>
+                  <Field
+                    name={"timestampSource"}
+                    as="select"
+                    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>
+                  </Field>
+                </FormGroup>
+                <FormGroup>
+                  <label htmlFor="GPSFormat">GPS Format</label>
+                  <Field
+                    name={"GPSFormat"}
+                    as="select"
+                    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>
+                  </Field>
+                </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"
           >
-            {isSubmitting || backOfficeMutation.isPending ? "Saving..." : "Save Changes"}
+            {isSubmitting ? "Saving..." : "Save Changes"}
           </button>
           <ValidationToastOnce />
-        </Form>
+        </>
       )}
-    </Formik>
+    </>
   );
 };
 

src/components/SettingForms/SettingForms/SettingForms.tsx

@@ -1,12 +1,120 @@
+import { Form, Formik } from "formik";
 import BearerTypeCard from "../BearerType/BearerTypeCard";
 import ChannelCard from "../Channel1-JSON/ChannelCard";
+import { useCameraOutput, useGetDispatcherConfig } from "../../../hooks/useCameraOutput";
+import type {
+  BearerTypeFieldType,
+  InitialValuesForm,
+  InitialValuesFormErrors,
+  OptionalBOF2Constants,
+} from "../../../types/types";
+import { useQueryClient } from "@tanstack/react-query";
+import { useUpdateBackOfficeConfig } from "../../../hooks/useBackOfficeConfig";
+import { useFormVaidate } from "../../../hooks/useFormValidate";
 
 const SettingForms = () => {
+  const qc = useQueryClient();
+  const { dispatcherQuery, dispatcherMutation, backOfficeDispatcherMutation } = useCameraOutput();
+  const { backOfficeMutation } = useUpdateBackOfficeConfig();
+  const { bof2ConstantsQuery } = useGetDispatcherConfig();
+  const { validateMutation } = useFormVaidate();
+
+  const format = dispatcherQuery?.data?.propFormat?.value;
+  const enabled = dispatcherQuery?.data?.propEnabled?.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 = {
+    format: format ?? "JSON",
+    enabled: enabled === "true",
+    backOfficeURL: "",
+    username: "",
+    password: "",
+    connectTimeoutSeconds: Number(5),
+    readTimeoutSeconds: Number(15),
+
+    // Bof2 - optional constants
+    FFID: FFID ?? "",
+    SCID: SCID ?? "",
+    timestampSource: timestampSource ?? "",
+    GPSFormat: GPSFormat ?? "",
+  };
+
+  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";
+    } else if (read < 0) {
+      errors.readTimeoutSeconds = "Must be ≥ 0";
+    }
+
+    const connect = Number(values.connectTimeoutSeconds);
+    if (!Number.isFinite(connect)) {
+      errors.connectTimeoutSeconds = "Must be a number";
+    } else if (connect < 0) {
+      errors.connectTimeoutSeconds = "Must be ≥ 0";
+    }
+    return errors;
+  };
+
+  const handleSubmit = async (values: BearerTypeFieldType & InitialValuesForm & OptionalBOF2Constants) => {
+    // if (formErrors && Object.entries(formErrors).length > 0) {
+    //   return;
+    // }
+    const dispatcherData = {
+      format: values.format,
+      enabled: values.enabled,
+    };
+    const result = await dispatcherMutation.mutateAsync(dispatcherData);
+
+    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;
+      }
+    }
+
+    if (values.format.toLowerCase() === "bof2") {
+      const bof2ConstantsData: OptionalBOF2Constants = {
+        FFID: values.FFID,
+        SCID: values.SCID,
+        timestampSource: values.timestampSource,
+        GPSFormat: values.GPSFormat,
+      };
+      await backOfficeDispatcherMutation.mutateAsync(bof2ConstantsData);
+    }
+  };
+
   return (
-    <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">
-      <BearerTypeCard />
-      <ChannelCard />
-    </div>
+    <Formik initialValues={initialValues} onSubmit={handleSubmit} validate={validateValues} enableReinitialize>
+      {({ 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">
+            <BearerTypeCard />
+            <ChannelCard touched={touched} isSubmitting={isSubmitting} />
+          </div>
+        </Form>
+      )}
+    </Formik>
   );
 };
 

src/components/SettingForms/Sound/SoundSettingsFields.tsx

@@ -32,7 +32,6 @@ const SoundSettingsFields = () => {
       hotlistSoundVolume: state.hotlistSoundVolume,
       soundOptions: [...(state.soundOptions ?? [])],
     };
-
     dispatch({ type: "UPDATE", payload: updatedValues });
 
     const result = await mutation.mutateAsync({

src/components/SettingForms/Sound/SoundUpload.tsx

@@ -4,16 +4,21 @@ import type { SoundUploadValue } from "../../../types/types";
 import { useSoundContext } from "../../../context/SoundContext";
 import { toast } from "sonner";
 import { useCameraBlackboard } from "../../../hooks/useCameraBlackboard";
+import { useFileUpload } from "../../../hooks/useFileUpload";
 
 const SoundUpload = () => {
   const { state, dispatch } = useSoundContext();
   const { mutation } = useCameraBlackboard();
+  const { mutation: fileMutation } = useFileUpload({
+    queryKey: state.sightingSound ? [state.sightingSound] : undefined,
+  });
 
   const initialValues: SoundUploadValue = {
     name: "",
     soundFile: null,
     soundFileName: "",
     soundUrl: "",
+    uploadedAt: Date.now(),
   };
 
   const handleSubmit = async (values: SoundUploadValue) => {
@@ -37,10 +42,9 @@ const SoundUpload = () => {
       path: "soundSettings",
       value: updatedValues,
     });
+    await fileMutation.mutateAsync(values.soundFile);
     if (result.reason !== "OK") {
       toast.error("Cannot update sound settings");
-    } else {
-      toast.success(`${values.name} file added`);
     }
 
     dispatch({ type: "ADD", payload: values });
@@ -48,7 +52,7 @@ const SoundUpload = () => {
 
   return (
     <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
-      {({ setFieldValue, errors, setFieldError, values }) => (
+      {({ setFieldValue, errors, setFieldError }) => (
         <Form>
           <label htmlFor="soundFile" className="">
             Sound File
@@ -67,6 +71,12 @@ const SoundUpload = () => {
                   setFieldValue("name", e.target.files[0].name);
                   setFieldValue("soundFileName", e.target.files[0].name);
                   setFieldValue("soundFile", e.target.files[0]);
+                  setFieldValue("uploadedAt", Date.now());
+                  if (e?.target?.files[0]?.size >= 1 * 1024 * 1024) {
+                    setFieldError("soundFile", "larger than 1mb");
+                    toast.error("File larger than 1MB");
+                    return;
+                  }
                 } else {
                   setFieldError("soundFile", "Not an mp3 file");
                   toast.error("Not an mp3 file");
@@ -76,11 +86,6 @@ 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>{" "}

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 col-span-5 lg:col-span-3 w-full">
       <CardHeader title={"Sound upload"} />
       <SoundUpload />
     </Card>

src/components/SettingForms/System/Upload.ts

@@ -10,10 +10,7 @@ type BlobFileUpload = {
   };
 };
 
-export async function sendBlobFileUpload({
-  file,
-  opts,
-}: BlobFileUpload): Promise<string> {
+export async function sendBlobFileUpload({ file, opts }: BlobFileUpload): Promise<string> {
   if (!file) throw new Error("No file supplied");
   if (!opts?.uploadUrl) throw new Error("No URL supplied");
 
@@ -42,9 +39,7 @@ export async function sendBlobFileUpload({
     const bodyText = await resp.text();
 
     if (!resp.ok) {
-      throw new Error(
-        `Upload failed (${resp.status} ${resp.statusText}) from ${opts.uploadUrl} — ${bodyText}`
-      );
+      throw new Error(`Upload failed (${resp.status} ${resp.statusText}) from ${opts.uploadUrl} — ${bodyText}`);
     }
 
     return bodyText;
@@ -54,9 +49,7 @@ export async function sendBlobFileUpload({
     }
     // In browsers, fetch throws TypeError on network-level failures
     if (err instanceof TypeError) {
-      throw new Error(
-        `HTTP error uploading to ${opts.uploadUrl}: ${err.message}`
-      );
+      throw new Error(`HTTP error uploading to ${opts.uploadUrl}: ${err.message}`);
     }
     // Todo: fix error message response
     return `Hotlist Load OK`;

src/components/SightingsWidget/SightingWidget.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { HitKind, QueuedHit, ReducedSightingType, SightingType } from "../../types/types";
-import { BLANK_IMG, getSoundFileURL } from "../../utils/utils";
+import { BLANK_IMG } from "../../utils/utils";
 import NumberPlate from "../PlateStack/NumberPlate";
 import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
@@ -19,6 +19,7 @@ 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());
@@ -43,21 +44,8 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
   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]);
-
-  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]);
+  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 });

src/components/UI/CardHeader.tsx

@@ -11,25 +11,18 @@ type CameraOverviewHeaderProps = {
   sighting?: SightingType | null;
 };
 
-const CardHeader = ({
-  title,
-  icon,
-  img,
-  sighting,
-}: CameraOverviewHeaderProps) => {
+const CardHeader = ({ title, icon, img, sighting }: CameraOverviewHeaderProps) => {
   return (
     <div
       className={clsx(
-        "w-full border-b border-gray-600 flex flex-row items-center space-x-2 md:mb-6 relative justify-between"
+        "w-full border-b border-gray-600 flex flex-row items-center space-x-2 mb-6 relative justify-between"
       )}
     >
       <div className="flex items-center space-x-2">
         {icon && <FontAwesomeIcon icon={icon} className="size-4" />}
         <h2 className="text-xl">{title}</h2>
       </div>
-      {img && (
-        <img src={img} alt="Logo" width={100} height={50} className="ml-auto" />
-      )}
+      {img && <img src={img} alt="Logo" width={100} height={50} className="ml-auto" />}
       {sighting?.vrm && <NumberPlate vrm={sighting.vrm} motion={false} />}
     </div>
   );

src/context/reducers/SoundContextReducer.ts

@@ -13,10 +13,12 @@ export const initialState: SoundState = {
     { name: "Ding", soundFileName: "ding" },
     { name: "Shutter", soundFileName: "shutter" },
     { name: "Warning (voice)", soundFileName: "warning" },
+    { name: "Attention (voice)", soundFileName: "attention" },
   ],
   sightingVolume: 1,
   NPEDsoundVolume: 1,
   hotlistSoundVolume: 1,
+  uploadedSound: null,
 };
 
 export function reducer(state: SoundState, action: SoundAction): SoundState {
@@ -62,7 +64,11 @@ export function reducer(state: SoundState, action: SoundAction): SoundState {
         ...state,
         hotlistSoundVolume: action.payload,
       };
-
+    case "UPLOADEDSOUND":
+      return {
+        ...state,
+        uploadedSound: action.payload,
+      };
     default:
       return state;
   }

src/hooks/useBackOfficeConfig.ts

@@ -0,0 +1,75 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useEffect } from "react";
+import { toast } from "sonner";
+import type { InitialValuesForm } from "../types/types";
+import { CAM_BASE } from "../utils/config";
+
+const getBackOfficeConfig = async (format: string) => {
+  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=Dispatcher-${format?.toLowerCase()}`);
+  if (!response.ok) throw new Error("Cannot get Back Office configuration");
+  return response.json();
+};
+
+const updateBackOfficeConfig = async (data: InitialValuesForm) => {
+  const updateConfigPayload = {
+    id: `Dispatcher-${data.format.toLowerCase()}`,
+    fields: [
+      {
+        property: "propBackofficeURL",
+        value: data.backOfficeURL,
+      },
+      {
+        property: "propConnectTimeoutSeconds",
+        value: data.connectTimeoutSeconds,
+      },
+      {
+        property: "propPassword",
+        value: data.password,
+      },
+      {
+        property: "propReadTimeoutSeconds",
+        value: data.readTimeoutSeconds,
+      },
+      {
+        property: "propUsername",
+        value: data.username,
+      },
+    ],
+  };
+  const response = await fetch(`${CAM_BASE}/api/update-config?id=Dispatcher`, {
+    method: "POST",
+    body: JSON.stringify(updateConfigPayload),
+  });
+  if (!response.ok) throw new Error("Cannot update Back Office configuration");
+  return response.json();
+};
+
+export const useCameraBackOfficeOutput = (format: string) => {
+  const backOfficeQuery = useQuery({
+    queryKey: ["backoffice", format],
+    queryFn: () => getBackOfficeConfig(format),
+    enabled: !!format,
+  });
+
+  useEffect(() => {
+    if (backOfficeQuery.isError) toast.error(backOfficeQuery.error.message);
+  }, [backOfficeQuery?.error?.message, backOfficeQuery.isError]);
+
+  return {
+    backOfficeQuery,
+  };
+};
+
+export const useUpdateBackOfficeConfig = () => {
+  const backOfficeMutation = useMutation({
+    mutationKey: ["backOfficeUpdate"],
+    mutationFn: updateBackOfficeConfig,
+    onError: (error) => toast.error(error.message),
+    onSuccess: (data) => {
+      if (data) {
+        toast.success("Settings successfully updated", { id: "dispatchSettings" });
+      }
+    },
+  });
+  return { backOfficeMutation };
+};

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, InitialValuesForm } from "../types/types";
+import type { BearerTypeFieldType, OptionalBOF2Constants } from "../types/types";
 
 const getDispatcherConfig = async () => {
   const response = await fetch(`${CAM_BASE}/api/fetch-config?id=Dispatcher`);
@@ -18,7 +18,6 @@ const updateDispatcherConfig = async (data: BearerTypeFieldType) => {
         property: "propEnabled",
         value: data.enabled,
       },
-      //   Todo: figure out how to add verbose conditionally
       {
         property: "propFormat",
         value: data.format,
@@ -33,43 +32,39 @@ const updateDispatcherConfig = async (data: BearerTypeFieldType) => {
   return response.json();
 };
 
-const getBackOfficeConfig = async () => {
-  const response = await fetch(`${CAM_BASE}/api/fetch-config?id=Dispatcher-json`);
-  if (!response.ok) throw new Error("Cannot get Back Office configuration");
-  return response.json();
-};
-
-const updateBackOfficeConfig = async (data: InitialValuesForm) => {
-  const updateConfigPayload = {
-    id: "Dispatcher-json",
+const updateBackOfficeDispatcher = async (data: OptionalBOF2Constants) => {
+  const bof2ContantsPayload = {
+    id: "Dispatcher-bof2-constants",
     fields: [
       {
-        property: "propBackofficeURL",
-        value: data.backOfficeURL,
+        property: "propFeedIdentifier",
+        value: data?.FFID,
       },
       {
-        property: "propConnectTimeoutSeconds",
-        value: data.connectTimeoutSeconds,
+        property: "propSourceIdentifier",
+        value: data?.SCID,
       },
       {
-        property: "propPassword",
-        value: data.password,
+        property: "propTimeZoneType",
+        value: data?.timestampSource,
       },
       {
-        property: "propReadTimeoutSeconds",
-        value: data.readTimeoutSeconds,
-      },
-      {
-        property: "propUsername",
-        value: data.username,
+        property: "propGpsFormat",
+        value: data?.GPSFormat,
       },
     ],
   };
-  const response = await fetch(`${CAM_BASE}/api/update-config?id=Dispatcher-json`, {
+  const response = await fetch(`${CAM_BASE}/api/update-config?id=Dispatcher-bof2-constants`, {
     method: "POST",
-    body: JSON.stringify(updateConfigPayload),
+    body: JSON.stringify(bof2ContantsPayload),
   });
-  if (!response.ok) throw new Error("Cannot update Back Office configuration");
+  if (!response.ok) throw new Error("Cannot update dispatcher configuration");
+  return response.json();
+};
+
+const getBof2DispatcherData = async () => {
+  const response = await fetch(`http://100.118.196.113:8080/api/fetch-config?id=Dispatcher-bof2-constants`);
+  if (!response.ok) throw new Error("Cannot get BOF2 dispatcher config");
   return response.json();
 };
 
@@ -79,29 +74,23 @@ export const useCameraOutput = () => {
     queryFn: getDispatcherConfig,
   });
 
-  const backOfficeQuery = useQuery({
-    queryKey: ["backoffice"],
-    queryFn: getBackOfficeConfig,
-  });
-
   const dispatcherMutation = useMutation({
     mutationFn: updateDispatcherConfig,
     mutationKey: ["dispatcherUpdate"],
     onError: (error) => toast.error(error.message),
     onSuccess: (data) => {
       if (data) {
-        toast.success("Settings successfully updated");
+        toast.success("Settings successfully updated", { id: "dispatchSettings" });
       }
     },
   });
 
-  const backOfficeMutation = useMutation({
-    mutationKey: ["backOfficeUpdate"],
-    mutationFn: updateBackOfficeConfig,
-    onError: (error) => toast.error(error.message),
+  const backOfficeDispatcherMutation = useMutation({
+    mutationKey: ["backofficedDispatcher"],
+    mutationFn: updateBackOfficeDispatcher,
     onSuccess: (data) => {
       if (data) {
-        toast.success("Settings successfully updated");
+        toast.success("Settings successfully updated", { id: "dispatchSettings" });
       }
     },
   });
@@ -110,14 +99,18 @@ export const useCameraOutput = () => {
     if (dispatcherQuery.isError) toast.error(dispatcherQuery.error.message);
   }, [dispatcherQuery?.error?.message, dispatcherQuery.isError]);
 
-  useEffect(() => {
-    if (backOfficeQuery.isError) toast.error(backOfficeQuery.error.message);
-  }, [backOfficeQuery?.error?.message, backOfficeQuery.isError]);
-
   return {
     dispatcherQuery,
     dispatcherMutation,
-    backOfficeQuery,
-    backOfficeMutation,
+    backOfficeDispatcherMutation,
   };
 };
+
+export const useGetDispatcherConfig = () => {
+  const bof2ConstantsQuery = useQuery({
+    queryKey: ["getBof2DispatcherData"],
+    queryFn: getBof2DispatcherData,
+  });
+
+  return { bof2ConstantsQuery };
+};

src/hooks/useFileUpload.ts

@@ -0,0 +1,45 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { CAM_BASE } from "../utils/config";
+import { toast } from "sonner";
+import { getOrCacheBlob } from "../utils/cacheSound";
+const camBase = import.meta.env.MODE !== "development" ? CAM_BASE : CAM_BASE;
+
+type UseFileUploadProps = {
+  queryKey?: string[];
+};
+
+const uploadFile = async (file: File) => {
+  const form = new FormData();
+  form.append("upload", file, file.name);
+  const response = await fetch(`${camBase}/upload/file-upload/3`, {
+    method: "POST",
+    body: form,
+  });
+  if (!response.ok) {
+    throw new Error("Cannot reach upload file endpoint");
+  }
+  return response.text();
+};
+
+const getUploadFiles = async ({ queryKey }: { queryKey: string[] }) => {
+  const [, fileName] = queryKey;
+  const url = fileName;
+  return getOrCacheBlob(url);
+};
+
+export const useFileUpload = ({ queryKey }: UseFileUploadProps) => {
+  const query = useQuery({
+    queryKey: ["getUploadFiles", ...(queryKey ?? [])],
+    queryFn: () => getUploadFiles({ queryKey: ["getUploadFiles", ...(queryKey ?? [])] }),
+    enabled: !!queryKey,
+  });
+
+  const mutation = useMutation({
+    mutationFn: (file: File) => uploadFile(file),
+    mutationKey: ["uploadFile"],
+    onError: (err) => toast.error(err ? err.message : ""),
+    onSuccess: async (msg) => toast.success(msg),
+  });
+
+  return { query: queryKey ? query : undefined, mutation };
+};

src/hooks/useFormValidate.ts

@@ -0,0 +1,46 @@
+import { useMutation } from "@tanstack/react-query";
+import { CAM_BASE } from "../utils/config";
+import type { InitialValuesForm } from "../types/types";
+
+const sendToValidate = async (data: InitialValuesForm) => {
+  const updateConfigPayload = {
+    id: `Dispatcher-${data.format.toLowerCase()}`,
+    fields: [
+      {
+        property: "propBackofficeURL",
+        value: data.backOfficeURL,
+      },
+      {
+        property: "propConnectTimeoutSeconds",
+        value: data.connectTimeoutSeconds,
+      },
+      {
+        property: "propPassword",
+        value: data.password,
+      },
+      {
+        property: "propReadTimeoutSeconds",
+        value: data.readTimeoutSeconds,
+      },
+      {
+        property: "propUsername",
+        value: data.username,
+      },
+    ],
+  };
+  const response = await fetch(`${CAM_BASE}/api/update-config-isvalid`, {
+    method: "post",
+    body: JSON.stringify(updateConfigPayload),
+  });
+  if (!response.ok) throw new Error("Cannot send to validate");
+  return response.json();
+};
+
+export const useFormVaidate = () => {
+  const validateMutation = useMutation({
+    mutationKey: ["sendToValidate"],
+    mutationFn: sendToValidate,
+  });
+
+  return { validateMutation };
+};

src/hooks/useSightingFeed.ts

@@ -1,10 +1,14 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
 import { Query, useQuery } from "@tanstack/react-query";
 import type { SightingType } from "../types/types";
-import { useSoundOnChange } from "react-sounds";
+import { useSound } from "react-sounds";
 import { useSoundContext } from "../context/SoundContext";
-import { getSoundFileURL } from "../utils/utils";
+import { checkIsHotListHit, getNPEDCategory } from "../utils/utils";
 import switchSound from "../assets/sounds/ui/switch.mp3";
+import notification from "../assets/sounds/ui/notification.mp3";
+import popup from "../assets/sounds/ui/popup_open.mp3";
+import { useCachedSoundSrc } from "./usecachedSoundSrc";
 
 async function fetchSighting(url: string | undefined, ref: number): Promise<SightingType> {
   const res = await fetch(`${url}${ref}`, {
@@ -21,35 +25,19 @@ export function useSightingFeed(url: string | undefined) {
   const [sessionStarted, setSessionStarted] = useState(false);
   const [selectedSighting, setSelectedSighting] = useState<SightingType | null>(null);
 
-  const mostRecent = sightings[0] ?? null;
-  const latestRef = mostRecent?.ref ?? null;
+  const { src: soundSrc } = useCachedSoundSrc(state?.sightingSound, state?.soundOptions, switchSound);
+  const { src: soundSrcHotlist } = useCachedSoundSrc(state?.hotlistSound, state?.soundOptions, notification);
+  const { src: soundSrcNped } = useCachedSoundSrc(state?.NPEDsound, state?.soundOptions, popup);
+
+  const { play: hotlistsound } = useSound(soundSrcHotlist, { volume: state.hotlistSoundVolume });
+  const { play: npedSound } = useSound(soundSrcNped, { volume: state.NPEDsoundVolume });
+  const { play: sightingSound } = useSound(soundSrc, { volume: state.sightingVolume });
+
+  const mostRecent = sightings[0] ?? null;
 
-  const first = useRef(true);
-  const lastSoundAt = useRef(0);
-  const COOLDOWN_MS = 1500;
   const currentRef = useRef<number>(-1);
   const lastValidTimestamp = useRef<number>(Date.now());
 
-  const trigger = useMemo(() => {
-    if (latestRef == null || !audioArmed) return null;
-    if (first.current) {
-      first.current = false;
-      return Symbol("skip");
-    }
-    const now = Date.now();
-    if (now - lastSoundAt.current < COOLDOWN_MS) return Symbol("skip");
-    lastSoundAt.current = now;
-    return latestRef;
-  }, [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]);
-
   function refetchInterval(query: Query<SightingType, Error, SightingType, (string | undefined)[]>) {
     if (!query) return;
     const data = query.state.data as SightingType | undefined;
@@ -78,16 +66,36 @@ export function useSightingFeed(url: string | undefined) {
     staleTime: 0,
   });
 
-  //use latestref instead of trigger to revert back
+  const playHotlistsound = useDebouncedCallback(() => {
+    hotlistsound();
+  }, 500);
 
-  useSoundOnChange(soundSrc, trigger, {
-    volume: state.sightingVolume,
-    initial: false,
-  });
+  const playNPEDHitSound = useDebouncedCallback(() => {
+    npedSound();
+  }, 500);
+
+  const playSightingHitSound = useDebouncedCallback(() => {
+    sightingSound();
+  }, 500);
 
   useEffect(() => {
     const data = query.data;
+
     if (!data || data.ref === -1) return;
+    const isHotListHit = checkIsHotListHit(data);
+    const cat = getNPEDCategory(data);
+
+    const isNPEDHitA = cat === "A";
+    const isNPEDHitB = cat === "B";
+    const isNPEDHitC = cat === "C";
+
+    if ((isNPEDHitA && audioArmed) || (isNPEDHitB && audioArmed) || (isNPEDHitC && audioArmed)) {
+      playNPEDHitSound();
+    } else if (isHotListHit && audioArmed) {
+      playHotlistsound();
+    } else if (audioArmed) {
+      playSightingHitSound();
+    }
 
     const now = Date.now();
 

src/hooks/usecachedSoundSrc.ts

@@ -0,0 +1,56 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useFileUpload } from "./useFileUpload";
+import { getSoundFileURL } from "../utils/utils";
+import type { SoundUploadValue } from "../types/types";
+import { resolveSoundSource } from "../utils/soundResolver";
+
+export function useCachedSoundSrc(
+  selected: string | undefined,
+  soundOptions: SoundUploadValue[] | undefined,
+  fallbackUrl: string
+) {
+  const isUploaded = !!selected && (selected.endsWith(".mp3") || selected.endsWith(".wav"));
+
+  const resolved = resolveSoundSource(selected, soundOptions);
+
+  const { query } = useFileUpload({
+    queryKey: resolved?.type === "uploaded" ? [resolved?.url] : undefined,
+  });
+
+  const [objectUrl, setObjectUrl] = useState<string>();
+  const objRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    const blob = query?.data;
+
+    if (blob instanceof Blob) {
+      if (objRef.current) URL.revokeObjectURL(objRef.current);
+      const url = URL.createObjectURL(blob);
+      objRef.current = url;
+      setObjectUrl(url);
+    } else {
+      if (objRef.current) URL.revokeObjectURL(objRef.current);
+      objRef.current = null;
+      setObjectUrl(undefined);
+    }
+  }, [query?.data]);
+
+  useEffect(() => {
+    return () => {
+      if (objRef.current) URL.revokeObjectURL(objRef.current);
+    };
+  }, []);
+
+  const src = useMemo(() => {
+    if (isUploaded && objectUrl) return objectUrl;
+    if (!selected) return fallbackUrl;
+    return getSoundFileURL(selected) ?? fallbackUrl;
+  }, [isUploaded, objectUrl, selected, fallbackUrl]);
+
+  return {
+    src,
+    isUploaded,
+    isLoading: !!query?.isLoading,
+    error: (query?.error as Error) || undefined,
+  };
+}

src/types/types.ts

@@ -48,10 +48,11 @@ export type CameraSettingErrorValues = Partial<Record<keyof CameraSettingValues,
 export type BearerTypeFieldType = {
   format: string;
   enabled: boolean;
-  verbose: boolean;
+  verbose?: boolean;
 };
 
 export type InitialValuesForm = {
+  format: string;
   backOfficeURL: string;
   username: string;
   password: string;
@@ -67,6 +68,13 @@ export type InitialValuesFormErrors = {
   readTimeoutSeconds?: string;
 };
 
+export type OptionalBOF2Constants = {
+  FFID?: "";
+  SCID?: "";
+  timestampSource?: "";
+  GPSFormat?: "";
+};
+
 export type NPEDFieldType = {
   frontId: string;
   username: string | undefined;
@@ -294,6 +302,7 @@ export type SoundUploadValue = {
   soundFileName?: string;
   soundFile?: File | null;
   soundUrl?: string;
+  uploadedAt?: number;
 };
 
 export type SoundState = {
@@ -305,6 +314,7 @@ export type SoundState = {
   sightingVolume: number;
   NPEDsoundVolume: number;
   hotlistSoundVolume: number;
+  uploadedSound?: Blob | null;
 };
 
 type UpdateAction = {
@@ -331,7 +341,12 @@ type VolumeAction = {
   payload: number;
 };
 
-export type SoundAction = UpdateAction | AddAction | VolumeAction;
+type UploadedState = {
+  type: "UPLOADEDSOUND";
+  payload: Blob | undefined;
+};
+
+export type SoundAction = UpdateAction | AddAction | VolumeAction | UploadedState;
 export type WifiSettingValues = {
   ssid: string;
   password: string;

src/utils/cacheSound.ts

@@ -0,0 +1,16 @@
+export async function getOrCacheBlob(url: string) {
+  const cache = await caches.open("app-sounds-v1");
+  const hit = await cache.match(url);
+  if (hit) return await hit.blob();
+
+  const res = await fetch(url, { cache: "no-store" });
+  if (!res.ok) throw new Error(`Fetch failed: ${res.status}`);
+
+  await cache.put(url, res.clone());
+  return await res.blob();
+}
+
+export async function evictFromCache(url: string) {
+  const cache = await caches.open("app-sounds-v1");
+  await cache.delete(url);
+}

src/utils/soundResolver.ts

@@ -0,0 +1,24 @@
+import { getSoundFileURL } from "./utils";
+import { CAM_BASE } from "./config";
+import type { SoundUploadValue } from "../types/types";
+
+export function resolveSoundSource(
+  selected: string | undefined,
+  soundOptions: SoundUploadValue[] | undefined
+): { type: "uploaded"; url: string } | { type: "builtin"; url: string } | undefined {
+  if (!selected) return undefined;
+
+  const isFile = selected.endsWith(".mp3") || selected.endsWith(".wav");
+
+  if (isFile) {
+    const match = soundOptions?.find((o) => o.soundFileName === selected);
+    const version = match?.uploadedAt ?? 0;
+    const url = `${CAM_BASE}/Mobile/${encodeURIComponent(selected)}?v=${version}`;
+    return { type: "uploaded", url };
+  }
+
+  const builtin = getSoundFileURL(selected);
+  if (builtin) return { type: "builtin", url: builtin };
+
+  return undefined;
+}

src/utils/utils.ts

@@ -5,7 +5,7 @@ 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 attention from "../assets/sounds/ui/Attention.wav";
 import type { HotlistMatches, SightingType } from "../types/types";
 
 export function getSoundFileURL(name: string) {
@@ -17,6 +17,7 @@ export function getSoundFileURL(name: string) {
     warning: warning,
     ding: ding,
     shutter: shutter,
+    attention: attention,
   };
   return sounds[name] ?? null;
 }
@@ -156,4 +157,4 @@ export function getHotlistName(obj: HotlistMatches | undefined) {
 }
 
 export const getNPEDCategory = (r?: SightingType | null) =>
-  r?.metadata?.npedJSON?.["NPED CATEGORY"] as "A" | "B" | "C" | undefined;
+  r?.metadata?.npedJSON?.["NPED CATEGORY"] as "A" | "B" | "C" | "D" | undefined;

yarn.lock

@@ -2267,6 +2267,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-debounce@^10.0.6:
+  version "10.0.6"
+  resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-10.0.6.tgz#e05060a5e561432ec740c653698f3eb162bd28ec"
+  integrity sha512-C5OtPyhAZgVoteO9heXMTdW7v/IbFI+8bSVKYCJrSmiWWCLsbUxiBSp4t9v0hNBTGY97bT72ydDIDyGSFWfwXg==
+
 vite@^7.1.0:
   version "7.1.2"
   resolved "https://registry.npmjs.org/vite/-/vite-7.1.2.tgz"