From 5b5ab4a75a2441994bbe89a160f53a6ecf4d6bee Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Tue, 7 Oct 2025 15:42:06 +0100
Subject: [PATCH 1/2] - corrected sighting modal sizing and button locations
 for small screens

---
 .../SightingModal/SightingModal.tsx           | 43 +++++++++++++++++--
 src/hooks/useCameraBlackboard.ts              |  3 +-
 2 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/components/SightingModal/SightingModal.tsx b/src/components/SightingModal/SightingModal.tsx
index 4a6167d..71a3bef 100644
--- a/src/components/SightingModal/SightingModal.tsx
+++ b/src/components/SightingModal/SightingModal.tsx
@@ -49,7 +49,6 @@ const SightingModal = ({
       }
 
       dispatch({ type: "ADD", payload: sighting });
-      toast.success("Sighting successfully added to alert list");
       handleClose();
     } catch (error) {
       console.log(error);
@@ -80,6 +79,42 @@ const SightingModal = ({
               Sighting Details
             </h2>
           </div>
+          <div className="mt-3 flex-col-reverse gap-3 md:flex-row md:justify-center flex md:hidden">
+            {onDelete ? (
+              <button
+                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-red-600 text-white hover:bg-red-700 w-full md:w-full"
+                onClick={handleDeleteClick}
+              >
+                <FontAwesomeIcon icon={faTrash} />
+                Delete
+              </button>
+            ) : (
+              <button
+                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-red-600 text-white hover:bg-red-700 w-full md:w-full"
+                onClick={handleClose}
+              >
+                <FontAwesomeIcon icon={faX} />
+                Deny
+              </button>
+            )}
+            {onDelete ? (
+              <button
+                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-blue-600 text-white hover:bg-blue-700 w-full md:w-full"
+                onClick={handleClose}
+              >
+                <FontAwesomeIcon icon={faX} />
+                Close
+              </button>
+            ) : (
+              <button
+                className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-green-600 text-white hover:bg-green-700 w-full md:w-full"
+                onClick={handleAcknowledgeButton}
+              >
+                <FontAwesomeIcon icon={faCheck} />
+                Accept
+              </button>
+            )}
+          </div>
           <div className="flex flex-col md:flex-row gap-3 items-center mb-2 justify-between">
             <div className="flex flex-col md:flex-row gap-3 items-center">
               <NumberPlate vrm={sighting?.vrm} motion={motionAway} />
@@ -119,13 +154,13 @@ const SightingModal = ({
               />
             )}
           </div>
-          <div className="flex flex-col md: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"
             />
-            <aside className="w-full md:w-80 lg:w-[40%] bg-gray-800/70 text-white rounded-xl py-4 px-2 border h-[70%] 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>
@@ -177,7 +212,7 @@ const SightingModal = ({
             </aside>
           </div>
 
-          <div className="mt-3 flex flex-col-reverse gap-3 md:flex-row md:justify-center">
+          <div className="mt-3 flex-col-reverse gap-3 md:flex-row md:justify-center hidden md:flex">
             {onDelete ? (
               <button
                 className="inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 bg-blue-600 text-white hover:bg-blue-700 w-full md:w-full"
diff --git a/src/hooks/useCameraBlackboard.ts b/src/hooks/useCameraBlackboard.ts
index f344ff1..c8b0d3b 100644
--- a/src/hooks/useCameraBlackboard.ts
+++ b/src/hooks/useCameraBlackboard.ts
@@ -41,10 +41,11 @@ export const useCameraBlackboard = () => {
         value: options?.value,
       }),
     onError: (error) => {
-      toast.error(`cannot get data: ${error.message}`, {
+      toast.error(`${error.message}`, {
         id: "viewBlackboardData",
       });
     },
+    onSuccess: () => toast.success("Sighting successfully added to alert list"),
   });
 
   useEffect(() => {

From 992fb4f9591747ca24be41a6d0f8df3ef3d54ce7 Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Tue, 7 Oct 2025 15:58:16 +0100
Subject: [PATCH 2/2] removed console.logs

---
 src/components/CameraSettings/CameraSettings.tsx | 2 +-
 src/components/HistoryList/AlertItem.tsx         | 3 +--
 src/components/SightingModal/SightingModal.tsx   | 2 +-
 src/hooks/useGetConfigs.ts                       | 4 ++--
 src/pages/Dashboard.tsx                          | 7 ++-----
 5 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/components/CameraSettings/CameraSettings.tsx b/src/components/CameraSettings/CameraSettings.tsx
index 2a0a68e..7f371c9 100644
--- a/src/components/CameraSettings/CameraSettings.tsx
+++ b/src/components/CameraSettings/CameraSettings.tsx
@@ -17,7 +17,7 @@ const CameraSettings = ({
 }) => {
   const { data, updateCameraConfig, updateCameraConfigError } =
     useFetchCameraConfig(side);
-  console.log(updateCameraConfigError);
+
   return (
     <Card className="overflow-hidden min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[40%] p-4">
       <div className="relative flex flex-col space-y-3">
diff --git a/src/components/HistoryList/AlertItem.tsx b/src/components/HistoryList/AlertItem.tsx
index 89838a2..ccdcb26 100644
--- a/src/components/HistoryList/AlertItem.tsx
+++ b/src/components/HistoryList/AlertItem.tsx
@@ -15,7 +15,7 @@ type AlertItemProps = {
 
 const AlertItem = ({ item }: AlertItemProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const { dispatch, isError } = useAlertHitContext();
+  const { dispatch } = useAlertHitContext();
 
   // const {d} = useCameraBlackboard();
   const motionAway = (item?.motion ?? "").toUpperCase() === "AWAY";
@@ -24,7 +24,6 @@ const AlertItem = ({ item }: AlertItemProps) => {
   const isNPEDHitB = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "B";
   const isNPEDHitC = item?.metadata?.npedJSON?.["NPED CATEGORY"] === "C";
 
-  console.log(isError);
   const handleClick = () => {
     setIsModalOpen(true);
   };
diff --git a/src/components/SightingModal/SightingModal.tsx b/src/components/SightingModal/SightingModal.tsx
index 71a3bef..ad2b65e 100644
--- a/src/components/SightingModal/SightingModal.tsx
+++ b/src/components/SightingModal/SightingModal.tsx
@@ -51,7 +51,7 @@ const SightingModal = ({
       dispatch({ type: "ADD", payload: sighting });
       handleClose();
     } catch (error) {
-      console.log(error);
+      console.error(error);
       toast.error("Failed to add sighting to alert list");
       handleClose();
     }
diff --git a/src/hooks/useGetConfigs.ts b/src/hooks/useGetConfigs.ts
index 909db71..2e45744 100644
--- a/src/hooks/useGetConfigs.ts
+++ b/src/hooks/useGetConfigs.ts
@@ -9,12 +9,12 @@ export const useGetConfigs = () => {
         const response = await fetch(`${apiUrl}/api/config-ids`);
 
         if (!response.ok) {
-          console.log("failed fetching");
+          throw new Error("Cannot get configs");
         }
         const data = await response.json();
         setConfigs(data);
       } catch (error) {
-        console.log(error);
+        console.error(error);
       }
     }
     getConfigs();
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index 2a94a9f..9654dd0 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -1,14 +1,11 @@
 import FrontCameraOverviewCard from "../components/FrontCameraOverview/FrontCameraOverviewCard";
 import SightingHistoryWidget from "../components/SightingsWidget/SightingWidget";
 import { SightingFeedProvider } from "../context/providers/SightingFeedProvider";
-import { CAM_BASE, OUTSIDE_CAM_BASE } from "../utils/config";
+import { CAM_BASE } from "../utils/config";
 
 const Dashboard = () => {
-  const mode = import.meta.env.MODE;
   const base_url = `${CAM_BASE}/SightingList/sightingSummary?mostRecentRef=`;
-  // const outside_url = `http://100.82.205.44/mergedHistory/sightingSummary?mostRecentRef=`;
-  console.log(mode);
-  console.log(OUTSIDE_CAM_BASE);
+
   return (
     <SightingFeedProvider url={base_url}>
       <div className="mx-auto flex flex-col lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">