From f6bf21a911dee43800cb5c4f2e47e74c6eb2a53f Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Thu, 18 Sep 2025 15:14:47 +0100
Subject: [PATCH] tweaked sizing and added refresh btn

---
 .../SightingModal/SightingModal.tsx           | 181 ++++++++++--------
 src/components/UI/Header.tsx                  |  12 +-
 src/pages/Dashboard.tsx                       |   3 +-
 3 files changed, 111 insertions(+), 85 deletions(-)

diff --git a/src/components/SightingModal/SightingModal.tsx b/src/components/SightingModal/SightingModal.tsx
index 31afe06..d132acc 100644
--- a/src/components/SightingModal/SightingModal.tsx
+++ b/src/components/SightingModal/SightingModal.tsx
@@ -3,6 +3,8 @@ import type { SightingType } from "../../types/types";
 import NumberPlate from "../PlateStack/NumberPlate";
 import ModalComponent from "../UI/ModalComponent";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useAlertHitContext } from "../../context/AlertHitContext";
+import { toast, Toaster } from "sonner";
 
 type SightingModalProps = {
   isSightingModalOpen: boolean;
@@ -15,99 +17,116 @@ const SightingModal = ({
   handleClose,
   sighting,
 }: SightingModalProps) => {
+  const { dispatch } = useAlertHitContext();
+
+  const handleAcknowledgeButton = () => {
+    if (!sighting) {
+      toast.error("Cannot add sigthing to alert list");
+      handleClose();
+      return;
+    }
+    dispatch({ type: "ADD", payload: sighting });
+    toast.success("Sighting successfully added to alert list");
+    handleClose();
+  };
+
   const motionAway = (sighting?.motion ?? "").toUpperCase() === "AWAY";
 
   return (
-    <ModalComponent isModalOpen={isSightingModalOpen} close={handleClose}>
-      <div className="max-w-screen-lg mx-auto p-4">
-        <div className="border-b border-gray-600 mb-4">
-          <h2 className="text-lg md:text-xl font-semibold">Sighting Details</h2>
-        </div>
-
-        <div className="flex flex-col gap-6 md:flex-row">
-          <div className="flex-1 flex flex-col gap-2">
-            <div className="flex justify-start md:justify-start">
-              <NumberPlate vrm={sighting?.vrm} motion={motionAway} />
-            </div>
-
+    <>
+      <ModalComponent isModalOpen={isSightingModalOpen} close={handleClose}>
+        <div className="max-w-screen-lg mx-auto py-4 px-2">
+          <div className="border-b border-gray-600 mb-4">
+            <h2 className="text-lg md:text-xl font-semibold">
+              Sighting Details
+            </h2>
+          </div>
+          <div className="flex flex-col md:flex-row gap-3 items-center">
+            <NumberPlate vrm={sighting?.vrm} motion={motionAway} />
+            <img
+              src={sighting?.plateUrlColour}
+              alt="plate patch"
+              className="h-16 object-contain rounded-md"
+            />
+          </div>
+          <div className="flex flex-col md: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">
+              <h3 className="text-base md:text-lg font-semibold pb-2 border-b border-gray-700">
+                Vehicle Info
+              </h3>
+              <dl className="mt-3  gap-x-4 gap-y-2 text-sm">
+                <div>
+                  <dt className="text-gray-300">VRM</dt>
+                  <dd className="font-medium text-2xl break-all">
+                    {sighting?.vrm ?? "-"}
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-gray-300">Motion</dt>
+                  <dd className="font-medium text-2xl">
+                    {sighting?.motion ?? "-"}
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-gray-300">Seen Count</dt>
+                  <dd className="font-medium text-2xl">
+                    {sighting?.seenCount ?? "-"}
+                  </dd>
+                </div>
 
-            <div className="flex flex-col md:flex-row items-center gap-3">
-              <img
-                src={sighting?.plateUrlColour}
-                alt="plate patch"
-                className="h-16 w-auto object-contain rounded-md border border-gray-700"
-              />
-              <img
-                src={sighting?.plateUrlInfrared}
-                alt="infrared patch"
-                className="h-16 w-auto object-contain rounded-md border border-gray-700 opacity-70"
-              />
-            </div>
+                <div>
+                  <dt className="text-gray-300">Make</dt>
+                  <dd className="font-medium text-2xl">
+                    {sighting?.make ?? "-"}
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-gray-300">Model</dt>
+                  <dd className="font-medium text-2xl">
+                    {sighting?.model ?? "-"}
+                  </dd>
+                </div>
+                <div className="sm:col-span-2">
+                  <dt className="text-gray-300">Colour</dt>
+                  <dd className="font-medium text-2xl">
+                    {sighting?.color ?? "-"}
+                  </dd>
+                </div>
+                <div>
+                  <dt className="text-gray-300">Time</dt>
+                  <dd className="font-medium text-xl">
+                    {sighting?.timeStamp ?? "-"}
+                  </dd>
+                </div>
+              </dl>
+            </aside>
           </div>
 
-          <aside className="md:w-80 lg:w-[40%] bg-gray-800/70 text-white rounded-xl p-4 border h-[70%] border-gray-700">
-            <h3 className="text-base md:text-lg font-semibold pb-2 border-b border-gray-700">
-              Vehicle Info
-            </h3>
-
-            <dl className="mt-3 grid grid-cols-1 sm:grid-cols-1 gap-x-4 gap-y-2 text-sm">
-              <div>
-                <dt className="text-gray-300">VRM</dt>
-                <dd className="font-medium text-2xl break-all">
-                  {sighting?.vrm ?? "-"}
-                </dd>
-              </div>
-              <div>
-                <dt className="text-gray-300">Motion</dt>
-                <dd className="font-medium">{sighting?.motion ?? "-"}</dd>
-              </div>
-              <div>
-                <dt className="text-gray-300">Seen Count</dt>
-                <dd className="font-medium">{sighting?.seenCount ?? "-"}</dd>
-              </div>
-              <div>
-                <dt className="text-gray-300">Time</dt>
-                <dd className="font-medium">{sighting?.timeStamp ?? "-"}</dd>
-              </div>
-              <div>
-                <dt className="text-gray-300">Make</dt>
-                <dd className="font-medium">{sighting?.make ?? "-"}</dd>
-              </div>
-              <div>
-                <dt className="text-gray-300">Model</dt>
-                <dd className="font-medium">{sighting?.model ?? "-"}</dd>
-              </div>
-              <div className="sm:col-span-2">
-                <dt className="text-gray-300">Colour</dt>
-                <dd className="font-medium">{sighting?.color ?? "-"}</dd>
-              </div>
-            </dl>
-          </aside>
+          <div className="mt-3 flex flex-col-reverse gap-3 md:flex-row md:justify-center">
+            <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>
+            <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>
+          </div>
         </div>
-
-        <div className="mt-3 flex flex-col-reverse gap-3 md:flex-row md:justify-center">
-          <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-auto"
-            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-auto"
-            onClick={handleClose}
-          >
-            <FontAwesomeIcon icon={faCheck} />
-            Acknowledge
-          </button>
-        </div>
-      </div>
-    </ModalComponent>
+      </ModalComponent>
+      <Toaster />
+    </>
   );
 };
 
diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx
index 13f4e23..ad3fc8a 100644
--- a/src/components/UI/Header.tsx
+++ b/src/components/UI/Header.tsx
@@ -6,6 +6,7 @@ import {
   faListCheck,
   faMaximize,
   faMinimize,
+  faRotate,
 } from "@fortawesome/free-solid-svg-icons";
 import type { VersionFieldType } from "../../types/types";
 import { useEffect, useState } from "react";
@@ -54,6 +55,10 @@ export default function Header() {
     }
   };
 
+  const refreshBrowser = () => {
+    window.location.reload();
+  };
+
   useEffect(() => {
     const ac = new AbortController();
     fetchVersions(ac.signal)
@@ -94,7 +99,7 @@ export default function Header() {
       </div>
       {/* Right: Texts stacked + icons */}
       <div className="flex items-center space-x-24">
-        <div className="flex flex-col leading-tight text-white text-sm tabular-nums">
+        <div className="flex flex-col leading-tight text-white  tabular-nums text-xl">
           <h2>Local: {localStr}</h2>
           <h2>UTC: {utcStr}</h2>
         </div>
@@ -105,8 +110,11 @@ export default function Header() {
             ) : (
               <FontAwesomeIcon icon={faMaximize} size="2x" />
             )}
-            {/* <small>{isFullscreen ? "Shrink" : "enlarge"}</small> */}
           </div>
+          <div onClick={refreshBrowser}>
+            <FontAwesomeIcon icon={faRotate} size="2x" />
+          </div>
+
           <Link to={"/session-settings"}>
             <FontAwesomeIcon
               className="text-white"
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index a611beb..c23f6be 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -5,7 +5,6 @@ import { SightingFeedProvider } from "../context/providers/SightingFeedProvider"
 
 const Dashboard = () => {
   const folkestoneUrl = import.meta.env.VITE_FOLKESTONE_URL;
-  const outsideCamUrl = import.meta.env.VITE_MAV_URL;
 
   return (
     <div className="mx-auto grid grid-cols-1  sm:grid-cols-1 lg:grid-cols-2 gap-2 px-1 sm:px-2 lg:px-0 w-full">
@@ -17,7 +16,7 @@ const Dashboard = () => {
         />
       </SightingFeedProvider>
 
-      <SightingFeedProvider url={outsideCamUrl} side="Rear">
+      <SightingFeedProvider url={folkestoneUrl} side="Rear">
         <RearCameraOverviewCard className="order-2" />
         <SightingHistoryWidget
           className="order-4"