- added AUTO setting to mode

- minor fix on secondary ip address in modem settings

src/components/CameraSettings/CameraSettingFields.tsx

@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
 import CardHeader from "../UI/CardHeader";
 import { useCameraMode, useCameraZoom } from "../../hooks/useCameraZoom";
-import { parseRTSPUrl, reverseZoomMapping, zoomMapping } from "../../utils/utils";
+import { capitalize, parseRTSPUrl, reverseZoomMapping, zoomMapping } from "../../utils/utils";
 
 type CameraSettingsProps = {
   initialData: CameraConfig;
@@ -181,9 +181,9 @@ const CameraSettingFields = ({
               <div
                 role="radiogroup"
                 aria-label="Camera mode"
-                className="mx-auto grid grid-cols-2 place-items-center gap-3"
+                className="mx-auto grid grid-cols-3 place-items-center gap-3"
               >
-                {["day", "night"].map((el) => (
+                {["day", "night", "auto"].map((el) => (
                   <div key={el} className="my-3">
                     <Field
                       type="radio"
@@ -205,7 +205,7 @@ const CameraSettingFields = ({
                 peer-checked:text-blue-600 peer-checked:bg-gray-100
                 ${cameraModeMutation.isPending ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`}
                     >
-                      {el === "day" ? "Day" : "Night"}
+                      {capitalize(el)}
                     </label>
                   </div>
                 ))}

src/components/HotlistList/HotlistList.tsx

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

src/components/PopupSettings/NPEDCategoryPopup.tsx

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

src/components/SessionForm/SessionCard.tsx

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

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

@@ -183,7 +183,7 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) =>
                       className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] w-full md:w-60"
                     >
                       <option value={"UTC"}>UTC</option>
-                      <option value={"local"}>Local</option>
+                      <option value={"LOCAL"}>Local</option>
                     </Field>
                   </FormGroup>
                   <FormGroup>
@@ -234,7 +234,7 @@ const ChannelFields = ({ touched, isSubmitting, format }: ChannelFieldsProps) =>
 
           <button
             type="submit"
-            className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+            className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
           >
             {isSubmitting ? "Saving..." : "Save Changes"}
           </button>

src/components/SettingForms/NPED/NPEDCard.tsx

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

src/components/SettingForms/NPED/NPEDCatToggle.tsx

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

src/components/SettingForms/NPED/NPEDFields.tsx

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

src/components/SettingForms/NPED/NPEDHotlist.tsx

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

src/components/SettingForms/Sound/SoundSettingsFields.tsx

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

src/components/SettingForms/Sound/SoundUpload.tsx

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

src/components/SettingForms/System/SystemConfigFields.tsx

@@ -167,7 +167,7 @@ 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="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
             disabled={isSubmitting}
           >
             {saveSystemSettingsLoading ? "Saving..." : "Save System Settings"}

src/components/SettingForms/System/SystemFileUpload.tsx

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

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

@@ -37,41 +37,32 @@ const ModemSettings = () => {
   const handleSubmit = async (values: ModemSettingsType) => {
     const invalidPrimary = ValidateIPaddress(values.serverPrimary);
     const invalidSecondary = ValidateIPaddress(values.serverSecondary);
+
     if (invalidPrimary || invalidSecondary) {
       toast.error(invalidPrimary || invalidSecondary, {
         id: "invalid-ip",
       });
       return;
     }
+
+    const fields = [
+      { property: "propAPN", value: values.apn },
+      { property: "propPassword", value: values.password },
+      { property: "propUsername", value: values.username },
+      { property: "propMode", value: showSettings ? "AUTO" : "MANUAL" },
+      { property: "propNameServerPrimary", value: values.serverPrimary },
+    ];
+
+    if (values.serverSecondary?.trim()) {
+      fields.push({
+        property: "propNameServerSecondary",
+        value: values.serverSecondary.trim(),
+      });
+    }
+
     const modemConfig = {
       id: "ModemAndWifiManager-modem",
-      fields: [
-        {
-          property: "propAPN",
-          value: values.apn,
-        },
-        {
-          property: "propPassword",
-          value: values.password,
-        },
-        {
-          property: "propUsername",
-          value: values.username,
-        },
-
-        {
-          property: "propMode",
-          value: showSettings ? "AUTO" : "MANUAL",
-        },
-        {
-          property: "propNameServerPrimary",
-          value: values.serverPrimary,
-        },
-        {
-          property: "propNameServerSecondary",
-          value: values.serverSecondary,
-        },
-      ],
+      fields,
     };
 
     const response = await modemMutation.mutateAsync(modemConfig);
@@ -178,7 +169,7 @@ const ModemSettings = () => {
             )}
             <button
               type="submit"
-              className="w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
+              className="w-full md:w-1/4 text-white bg-green-700 hover:bg-green-800 font-small rounded-lg text-sm px-2 py-2.5"
             >
               {isSubmitting || modemMutation.isPending ? "Saving..." : "Save Modem settings"}
             </button>

src/components/SightingModal/SightingModal.tsx

@@ -21,10 +21,11 @@ type SightingModalProps = {
 
 const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }: SightingModalProps) => {
   const { dispatch } = useAlertHitContext();
+
   const { query, mutation } = useCameraBlackboard();
 
   const hotlistNames = getHotlistName(sighting?.metadata?.hotlistMatches);
-  const handleAcknowledgeButton = () => {
+  const handleAcknowledgeButton = async () => {
     try {
       if (!sighting) {
         toast.error("Cannot add sighting to alert list");
@@ -32,17 +33,27 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
         return;
       }
       if (!query.data.alertHistory) {
-        mutation.mutate({
+        await mutation.mutateAsync({
           operation: "INSERT",
           path: "alertHistory",
           value: [sighting],
         });
+        await mutation.mutateAsync({
+          operation: "SAVE",
+          path: "",
+          value: null,
+        });
       } else {
-        mutation.mutate({
+        await mutation.mutateAsync({
           operation: "APPEND",
           path: "alertHistory",
           value: sighting,
         });
+        await mutation.mutateAsync({
+          operation: "SAVE",
+          path: "",
+          value: null,
+        });
         toast.success("Sighting Successfully added to alert list");
       }
 
@@ -72,7 +83,7 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
   return (
     <>
       <ModalComponent isModalOpen={isSightingModalOpen} close={handleClose}>
-        <div className="max-w-screen-lg mx-auto py-4 px-2">
+        <div className="mx-auto py-4 px-6 overflow-y-scroll">
           <div className="border-b border-gray-600 mb-4">
             <h2 className="text-lg md:text-xl font-semibold">Sighting Details</h2>
           </div>
@@ -123,7 +134,7 @@ 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 && (
+          {hotlistNames && hotlistNames.length > 0 && (
             <div className="flex flex-col border-b border-gray-600 mb-4">
               <p className="text-gray-300">Hotlists</p>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-x-[90%] lg:gap-x-[15%] w-[50%]">
@@ -137,11 +148,11 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
               </div>
             </div>
           )}
-          <div className="flex flex-col lg:flex-row items-center gap-3">
+          <div className="flex flex-col lg:flex-row items-center gap-3 ">
             <img
               src={sighting?.overviewUrl}
               alt="overview patch"
-              className="w-full h-56 sm:h-72 md:h-96 rounded-lg object-cover border border-gray-700"
+              className="w-full h-56 sm:h-72 md:h-72 rounded-lg object-cover border border-gray-700"
             />
             <aside className="w-full lg:w-80  bg-gray-800/70 text-white rounded-xl py-4 px-2 border h-[70%] border-gray-700">
               <h3 className="text-base md:text-lg font-semibold pb-2 border-b border-gray-700">Vehicle Info</h3>
@@ -160,27 +171,26 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
                   <dd className="font-medium text-2xl">{sighting?.seenCount ?? "-"}</dd>
                 </div>
 
-                {sighting?.make ||
-                  (sighting?.make.trim() && (
-                    <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 ||
-                  (!sighting?.color.trim() && (
-                    <div className="sm:col-span-2">
-                      <dt className="text-gray-300">Colour</dt>
-                      <dd className="font-medium text-2xl">{sighting?.color ?? "-"}</dd>
-                    </div>
-                  ))}
+                {sighting?.make && sighting.make.trim() && sighting.make.toLowerCase() !== "disabled" && (
+                  <div>
+                    <dt className="text-gray-300">Make</dt>
+                    <dd className="font-medium text-2xl">{sighting.make}</dd>
+                  </div>
+                )}
+
+                {sighting?.model && sighting.model.trim() && sighting.model.toLowerCase() !== "disabled" && (
+                  <div>
+                    <dt className="text-gray-300">Model</dt>
+                    <dd className="font-medium text-2xl">{sighting.model}</dd>
+                  </div>
+                )}
+
+                {sighting?.color && sighting.color.trim() && sighting.color.toLowerCase() !== "disabled" && (
+                  <div className="sm:col-span-2">
+                    <dt className="text-gray-300">Colour</dt>
+                    <dd className="font-medium text-2xl">{sighting.color}</dd>
+                  </div>
+                )}
 
                 <div>
                   <dt className="text-gray-300">Time</dt>

src/components/SightingsWidget/SightingWidget.tsx

@@ -68,6 +68,11 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
   const hasAutoOpenedRef = useRef(false);
   const npedRef = useRef(false);
 
+  const isCatAEnabled = integrationState?.iscatEnabled?.catA;
+  const isCatBEnabled = integrationState?.iscatEnabled?.catB;
+  const isCatCEnabled = integrationState?.iscatEnabled?.catC;
+  const isCatDEnabled = integrationState?.iscatEnabled?.catD;
+
   const enqueue = useCallback((sighting: SightingType, kind: HitKind) => {
     const id = sighting.vrm ?? sighting.ref;
     if (processedRefs.current.has(id)) return;
@@ -118,7 +123,11 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
       if (processedRefs.current.has(id)) continue;
       const isHotlistHit = checkIsHotListHit(sighting);
       const npedcategory = sighting?.metadata?.npedJSON?.["NPED CATEGORY"];
-      const isNPED = npedcategory === "A" || npedcategory === "B" || npedcategory === "C";
+      const isNPED =
+        (npedcategory === "A" && isCatAEnabled) ||
+        (npedcategory === "B" && isCatBEnabled) ||
+        (npedcategory === "C" && isCatCEnabled) ||
+        (npedcategory === "D" && isCatDEnabled);
 
       if (isNPED || isHotlistHit) {
         enqueue(sighting, isNPED ? "NPED" : "HOTLIST"); // enqueue ONLY
@@ -148,7 +157,8 @@ export default function SightingHistoryWidget({ className, title }: SightingHist
       const isNPEDHitA = cat === "A";
       const isNPEDHitB = cat === "B";
       const isNPEDHitC = cat === "C";
-      return isNPEDHitA || isNPEDHitB || isNPEDHitC;
+      const isNPEDHitD = cat === "D";
+      return isNPEDHitA || isNPEDHitB || isNPEDHitC || isNPEDHitD;
     });
     const firstHot = rows?.find((r) => {
       const isHotListHit = checkIsHotListHit(r);

src/components/UI/Header.tsx

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

src/components/UI/ModalComponent.tsx

@@ -12,7 +12,7 @@ const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) =
     <Modal
       isOpen={isModalOpen}
       onRequestClose={close}
-      className="bg-[#1e2a38] p-6 rounded-lg shadow-lg max-w-[80%] mx-auto mt-[1%] md:w-[70%] md:h-[95%] z-[100] overflow-y-auto max-h-screen"
+      className="bg-[#1e2a38] p-3 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[60%] h-[100%] md:h-[95%] lg:h-[85%] z-[100] overflow-y-auto"
       overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
     >
       {children}

src/components/UI/SoundBtn.tsx

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

src/context/providers/IntegrationsContextProvider.tsx

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

src/context/providers/SoundContextProvider.tsx

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

src/context/reducers/IntegrationsContextReducer.ts

@@ -1,11 +1,18 @@
 import type { NPEDACTION, NPEDSTATE } from "../../types/types";
 
 export const initialState = {
-  sessionStarted: false,
+  sessionStarted: true,
   sessionList: [],
   sessionPaused: false,
   savedSightings: [],
   npedUser: null,
+  iscatEnabled: {
+    catA: true,
+    catB: true,
+    catC: true,
+    catD: false,
+  },
+  hotlistFiles: [],
 };
 
 export function reducer(state: NPEDSTATE, action: NPEDACTION) {
@@ -30,6 +37,11 @@ export function reducer(state: NPEDSTATE, action: NPEDACTION) {
         ...state,
         sessionPaused: action.payload,
       };
+    case "SESSIONRESTART":
+      return {
+        ...state,
+        sessionList: action.payload,
+      };
     case "ADD":
       return {
         ...state,
@@ -40,6 +52,22 @@ export function reducer(state: NPEDSTATE, action: NPEDACTION) {
         ...state,
         sessionList: action.payload,
       };
+    case "NPEDCATENABLED":
+      return {
+        ...state,
+        iscatEnabled: action.payload,
+      };
+
+    case "SETHOTLISTS":
+      return {
+        ...state,
+        hotlistFiles: action.payload,
+      };
+    case "DELETEHOTLIST":
+      return {
+        ...state,
+        hotlistFiles: state.hotlistFiles.filter((hotlist) => hotlist.filename !== action.payload),
+      };
     default:
       return { ...state };
   }

src/hooks/useCameraZoom.ts

@@ -11,7 +11,7 @@ const getCameraMode = async (options: { camera: string }) => {
 };
 
 const updateCameraMode = async (options: { camera: string; mode: string }) => {
-  console.log(options);
+  console.log(options.mode);
   const dayNightPayload = {
     id: options.camera,
     fields: [

src/hooks/useGetOverviewSnapshot.ts

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

src/hooks/useHotListData.ts

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

src/index.css

@@ -33,7 +33,7 @@ body {
 }
 
 .arrow-outline path {
-  stroke: black; /* outline color */
-  stroke-width: 20px; /* thickness of outline (tweak this) */
+  stroke: black;
+  stroke-width: 20px;
   stroke-linejoin: round;
 }

src/pages/SystemSettings.tsx

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

src/types/types.ts

@@ -282,7 +282,7 @@ export type CameraConfig = {
 export type CameraBlackBoardOptions = {
   operation?: string;
   path?: string;
-  value?: object | string | number | (string | number)[];
+  value?: object | string | number | (string | number)[] | null;
 };
 
 export type CameraBlackboardResponse = {
@@ -417,12 +417,20 @@ export type QueuedHit = {
 
 export type DedupedSightings = ReducedSightingType[];
 
+export type HotlistFile = {
+  fileSizeBytes: number;
+  filename: string;
+  rowCount: number;
+};
+
 export type NPEDSTATE = {
   sessionStarted: boolean;
   sessionList: ReducedSightingType[];
   sessionPaused: boolean;
   savedSightings: DedupedSightings;
   npedUser: NPEDUser;
+  iscatEnabled: CategoryPopups;
+  hotlistFiles: HotlistFile[];
 };
 
 export type NPEDACTION = {
@@ -430,3 +438,10 @@ export type NPEDACTION = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   payload: any;
 };
+
+export type CategoryPopups = {
+  catA: boolean;
+  catB: boolean;
+  catC: boolean;
+  catD: boolean;
+};