From 7cfebab6c1311809c6002c5a4e143f82018a6551 Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Wed, 15 Oct 2025 15:15:04 +0100
Subject: [PATCH]  - improved UI for sessions page

---
 .../FrontCameraOverviewCard.tsx               |  6 +-
 .../OverviewVideoContainer.tsx                |  6 +-
 src/components/HistoryList/AlertItem.tsx      | 11 ++-
 src/components/HistoryList/HistoryList.tsx    | 51 +++++--------
 .../RearCameraOverviewCard.tsx                | 13 +---
 src/components/SessionForm/HitSearchCard.tsx  | 32 ++++-----
 src/components/SessionForm/SessionCard.tsx    | 72 +++++++++----------
 src/components/UI/Card.tsx                    |  2 +-
 src/pages/Session.tsx                         |  6 +-
 9 files changed, 87 insertions(+), 112 deletions(-)

diff --git a/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx b/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx
index 75503b1..0aa1787 100644
--- a/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx
+++ b/src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx
@@ -14,11 +14,7 @@ const FrontCameraOverviewCard = () => {
   });
 
   return (
-    <Card
-      className={clsx(
-        "relative min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[70%] overflow-y-hidden"
-      )}
-    >
+    <Card className={clsx("relative min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[70%] overflow-y-hidden")}>
       <div className="w-full" {...handlers}>
         <SightingOverview />
       </div>
diff --git a/src/components/FrontCameraSettings/OverviewVideoContainer.tsx b/src/components/FrontCameraSettings/OverviewVideoContainer.tsx
index 1a0b7a8..379f95b 100644
--- a/src/components/FrontCameraSettings/OverviewVideoContainer.tsx
+++ b/src/components/FrontCameraSettings/OverviewVideoContainer.tsx
@@ -30,11 +30,7 @@ const OverviewVideoContainer = ({
     trackMouse: true,
   });
   return (
-    <Card
-      className={clsx(
-        "relative min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[70%] overflow-y-hidden"
-      )}
-    >
+    <Card className={clsx("relative min-h-[40vh] md:min-h-[60vh] max-h-[80vh] lg:w-[70%] overflow-y-hidden")}>
       <div className="w-full" {...handlers}>
         <SnapshotContainer
           side={side}
diff --git a/src/components/HistoryList/AlertItem.tsx b/src/components/HistoryList/AlertItem.tsx
index 71cabdb..2552a37 100644
--- a/src/components/HistoryList/AlertItem.tsx
+++ b/src/components/HistoryList/AlertItem.tsx
@@ -10,6 +10,8 @@ import NPED_CAT_A from "/NPED_Cat_A.svg";
 import NPED_CAT_B from "/NPED_Cat_B.svg";
 import NPED_CAT_C from "/NPED_Cat_C.svg";
 import { checkIsHotListHit, getNPEDCategory } from "../../utils/utils";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 type AlertItemProps = {
   item: SightingType;
@@ -53,9 +55,12 @@ const AlertItem = ({ item }: AlertItemProps) => {
     dispatch({ type: "REMOVE", payload: item });
   };
   return (
-    <div className="flex flex-col w-full">
+    <div className="flex flex-col w-full relative">
       <div className="border border-gray-600 rounded-lg items-center py-1">
         <InfoBar obj={item} />
+        <button onClick={() => handleDelete(item)} className="absolute right-2 top-1">
+          <FontAwesomeIcon icon={faTrash} size="xl" />
+        </button>
         <div className="flex flex-row p-4  w-full mx-auto justify-between" onClick={handleClick}>
           {isHotListHit && <img src={HotListImg} alt="hotlistHit" className="h-20 object-contain rounded-md" />}
           {isNPEDHitA && <img src={NPED_CAT_A} alt="NPEDHITicon" className="h-20 object-contain rounded-md" />}
@@ -64,7 +69,9 @@ const AlertItem = ({ item }: AlertItemProps) => {
           <div className={`border p-1 hidden md:block`}>
             <img src={item?.plateUrlColour} height={48} width={200} alt="colour patch" />
           </div>
-          <NumberPlate vrm={item.vrm} motion={motionAway} />
+          <div className="h-20">
+            <NumberPlate vrm={item.vrm} motion={motionAway} />
+          </div>
         </div>
         <SightingModal
           isSightingModalOpen={isModalOpen}
diff --git a/src/components/HistoryList/HistoryList.tsx b/src/components/HistoryList/HistoryList.tsx
index 1cd3735..ae09490 100644
--- a/src/components/HistoryList/HistoryList.tsx
+++ b/src/components/HistoryList/HistoryList.tsx
@@ -1,34 +1,14 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useAlertHitContext } from "../../context/AlertHitContext";
 import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
-import type { CameraBlackBoardOptions, SightingType } from "../../types/types";
+import type { CameraBlackBoardOptions } from "../../types/types";
 import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
 import AlertItem from "./AlertItem";
-import { faTrash } from "@fortawesome/free-solid-svg-icons";
 
 const HistoryList = () => {
   const { state, dispatch, isLoading, error } = useAlertHitContext();
   const { mutation } = useCameraBlackboard();
 
-  const handleDeleteClick = async (deletedItem: SightingType) => {
-    const res = await mutation.mutateAsync({
-      operation: "VIEW",
-      path: "alertHistory",
-    });
-    const oldArray = res?.result;
-    const updatedArray = oldArray?.filter(
-      (item: SightingType) => item?.ref !== deletedItem?.ref
-    );
-
-    mutation.mutate({
-      operation: "INSERT",
-      path: "alertHistory",
-      value: updatedArray,
-    });
-    dispatch({ type: "REMOVE", payload: deletedItem });
-  };
-
   const handleClearListClick = (listName: CameraBlackBoardOptions) => {
     dispatch({ type: "DELETE", payload: [] });
     mutation.mutate({
@@ -38,7 +18,7 @@ const HistoryList = () => {
   };
 
   return (
-    <Card className="h-100 p-4">
+    <Card className="h-100 p-4 col-span-3">
       <CardHeader title="Alert History" />
       <button
         className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition md:w-[10%] mb-2"
@@ -50,18 +30,23 @@ const HistoryList = () => {
       {error && <p className="text-red-500 px-2">Error: {error.message}</p>}
       <div className="flex flex-col gap-1 px-2">
         {state?.alertList?.length > 0 ? (
-          state?.alertList?.map((alertItem, index) => (
-            <div key={index} className="flex flex-row space-x-2">
-              <AlertItem item={alertItem} />
-              <button onClick={() => handleDeleteClick(alertItem)}>
-                <div className="p-4">
-                  <FontAwesomeIcon icon={faTrash} size="2x" />
-                </div>
-              </button>
-            </div>
-          ))
+          <div className="mt-3 grid grid-cols-1 gap-3">
+            {state?.alertList?.map((alertItem) => (
+              <AlertItem item={alertItem} key={alertItem.vrm} />
+            ))}
+          </div>
         ) : (
-          <p>No Alert results</p>
+          <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 Alert Results
+            </div>
+            <p className="max-w-md text-slate-300">
+              Alerts will appear here in real-time once there are <span className="text-emerald-400">Hotlist</span> or{" "}
+              <span className="text-amber-600">NPED</span> hits. Use{" "}
+              <span className="text-emerald-400">Start Session</span> to begin capturing results, or add a{" "}
+              <span className="text-emerald-400">Sighting</span> from the sighting list.
+            </p>
+          </div>
         )}
       </div>
     </Card>
diff --git a/src/components/RearCameraOverview/RearCameraOverviewCard.tsx b/src/components/RearCameraOverview/RearCameraOverviewCard.tsx
index 55afe4e..883d096 100644
--- a/src/components/RearCameraOverview/RearCameraOverviewCard.tsx
+++ b/src/components/RearCameraOverview/RearCameraOverviewCard.tsx
@@ -18,18 +18,9 @@ const RearCameraOverviewCard = ({ className }: CardProps) => {
   });
   const { mostRecent } = useSightingFeedContext();
   return (
-    <Card
-      className={clsx(
-        "relative min-h-[40vh] md:min-h-[60vh] h-auto",
-        className
-      )}
-    >
+    <Card className={clsx("relative min-h-[40vh] md:min-h-[60vh] h-auto", className)}>
       <div className="flex flex-col space-y-3 h-full" {...handlers}>
-        <CardHeader
-          title="Rear Overview"
-          icon={faCamera}
-          sighting={mostRecent}
-        />
+        <CardHeader title="Rear Overview" icon={faCamera} sighting={mostRecent} />
         <SightingOverview />
       </div>
     </Card>
diff --git a/src/components/SessionForm/HitSearchCard.tsx b/src/components/SessionForm/HitSearchCard.tsx
index 745a182..4282ac9 100644
--- a/src/components/SessionForm/HitSearchCard.tsx
+++ b/src/components/SessionForm/HitSearchCard.tsx
@@ -9,38 +9,36 @@ const SessionCard = () => {
   const { dispatch } = useAlertHitContext();
 
   return (
-    <Card className="p-4">
+    <Card className="p-4 col-span-5">
       <CardHeader title={"Hit Search"} />
       <div className="flex flex-col gap-4 px-2">
+        <label htmlFor="VRM" className="font-medium whitespace-nowrap md:w-1/2 text-left">
+          VRM (Min 2 letters)
+        </label>
         <FormGroup>
-          <label
-            htmlFor="VRM"
-            className="font-medium whitespace-nowrap md:w-1/2 text-left"
-          >
-            VRM (Min 2 letters)
-          </label>
-          <div className="flex-1 flex justify-end md:w-2/3">
+          <div className="flex flex-row justify-between md:w-full space-x-3">
             <input
               id="VRMSelect"
               name="VRMSelect"
               type="text"
-              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
+              className="p-2 border border-gray-400 rounded-lg w-full max-w-[70%] focus:border-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-400/30"
               placeholder="Enter VRM"
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
             />
+
+            <button
+              className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-[30%] mx-3"
+              onClick={() => dispatch({ type: "SEARCH", payload: searchTerm })}
+              disabled={searchTerm.trim().length < 2}
+            >
+              Search Hit list
+            </button>
           </div>
         </FormGroup>
-        <button
-          className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full mx-auto"
-          onClick={() => dispatch({ type: "SEARCH", payload: searchTerm })}
-          disabled={searchTerm.trim().length < 2}
-        >
-          Search Hit list
-        </button>
         {searchTerm && (
           <button
-            className="bg-gray-300 text-gray-900 px-4 py-2 rounded hover:bg-gray-700 transition w-full mx-auto"
+            className="bg-gray-300 text-gray-900 px-4 py-2 rounded hover:bg-gray-700 transition w-[30%] "
             onClick={() => {
               setSearchTerm("");
               dispatch({ type: "SEARCH", payload: "" });
diff --git a/src/components/SessionForm/SessionCard.tsx b/src/components/SessionForm/SessionCard.tsx
index c722910..a5dc93e 100644
--- a/src/components/SessionForm/SessionCard.tsx
+++ b/src/components/SessionForm/SessionCard.tsx
@@ -9,37 +9,21 @@ const SessionCard = () => {
 
   const handleStartClick = () => {
     setSessionStarted(!sessionStarted);
-    toast(
-      `${
-        sessionStarted
-          ? "Vehicle tracking session Ended"
-          : "Vehicle tracking session  Started"
-      }`
-    );
+    toast(`${sessionStarted ? "Vehicle tracking session Ended" : "Vehicle tracking session  Started"}`);
   };
 
-  const sightings = [
-    ...new Map(sessionList.map((vehicle) => [vehicle.vrm, vehicle])),
-  ];
+  const sightings = [...new Map(sessionList.map((vehicle) => [vehicle.vrm, vehicle]))];
 
   const dedupedSightings = sightings.map((sighting) => sighting[1]);
 
-  const vehicles = dedupedSightings.reduce<
-    Record<string, ReducedSightingType[]>
-  >(
+  const vehicles = dedupedSightings.reduce<Record<string, ReducedSightingType[]>>(
     (acc, item) => {
-      if (item.metadata?.npedJSON["NPED CATEGORY"] === "A")
-        acc.npedCatA.push(item);
-      if (item.metadata?.npedJSON["NPED CATEGORY"] === "B")
-        acc.npedCatB.push(item);
-      if (item.metadata?.npedJSON["NPED CATEGORY"] === "C")
-        acc.npedCatC.push(item);
-      if (item.metadata?.npedJSON["NPED CATEGORY"] === "D")
-        acc.npedCatD.push(item);
-      if (item.metadata?.npedJSON["TAX STATUS"] === false)
-        acc.notTaxed.push(item);
-      if (item.metadata?.npedJSON["MOT STATUS"] === false)
-        acc.notMOT.push(item);
+      if (item.metadata?.npedJSON["NPED CATEGORY"] === "A") acc.npedCatA.push(item);
+      if (item.metadata?.npedJSON["NPED CATEGORY"] === "B") acc.npedCatB.push(item);
+      if (item.metadata?.npedJSON["NPED CATEGORY"] === "C") acc.npedCatC.push(item);
+      if (item.metadata?.npedJSON["NPED CATEGORY"] === "D") acc.npedCatD.push(item);
+      if (item.metadata?.npedJSON["TAX STATUS"] === false) acc.notTaxed.push(item);
+      if (item.metadata?.npedJSON["MOT STATUS"] === false) acc.notMOT.push(item);
 
       return acc;
     },
@@ -54,13 +38,11 @@ const SessionCard = () => {
   );
 
   return (
-    <Card className="p-4">
+    <Card className="p-4 col-span-3">
       <CardHeader title="Session" />
-      <div className="flex flex-col gap-4 px-2">
+      <div className="flex flex-col gap-4 px-3">
         <button
-          className={`${
-            sessionStarted ? "bg-red-600" : "bg-[#26B170]"
-          } text-white px-4 py-2 rounded ${
+          className={`${sessionStarted ? "bg-red-600" : "bg-[#26B170]"} text-white px-4 py-2 rounded ${
             sessionStarted ? "hover:bg-red-700" : "hover:bg-green-700"
           }  transition w-full`}
           onClick={handleStartClick}
@@ -69,12 +51,30 @@ const SessionCard = () => {
         </button>
 
         <ul className="text-white space-y-2">
-          <li>Number of Vehicles: {dedupedSightings.length} </li>
-          <li>Vehicles without Tax: {vehicles.notTaxed.length}</li>
-          <li>Vehicles without MOT: {vehicles.notMOT.length}</li>
-          <li>Vehicles with NPED Cat A: {vehicles.npedCatA.length}</li>
-          <li>Vehicles with NPED Cat B: {vehicles.npedCatB.length}</li>
-          <li>Vehicles with NPED Cat C: {vehicles.npedCatC.length}</li>
+          <li className="rounded-xl border border-slate-800 bg-slate-800/60 p-3 shadow-sm flex flex-row justify-between">
+            <p>Number of Vehicles:</p>
+            <span className="font-bold text-green-600 text-xl">{dedupedSightings.length}</span>
+          </li>
+          <li className="rounded-xl border border-slate-800 bg-slate-800/60 p-3 shadow-sm flex flex-row justify-between">
+            <p>Vehicles without Tax:</p>
+            <span className="font-bold text-amber-600 text-xl">{vehicles.notTaxed.length}</span>
+          </li>
+          <li className="rounded-xl border border-slate-800 bg-slate-800/60 p-3 shadow-sm flex flex-row justify-between">
+            <p>Vehicles without MOT:</p>{" "}
+            <span className="font-bold text-red-500 text-xl">{vehicles.notMOT.length}</span>
+          </li>
+          <li className="rounded-xl border border-slate-800 bg-slate-800/60 p-3 shadow-sm flex flex-row justify-between">
+            <p>Vehicles with NPED Cat A:</p>
+            <span className="font-bold text-gray-300 text-xl">{vehicles.npedCatA.length}</span>
+          </li>
+          <li className="rounded-xl border border-slate-800 bg-slate-800/60 p-3 shadow-sm flex flex-row justify-between">
+            <p>Vehicles with NPED Cat B:</p>{" "}
+            <span className="font-bold text-gray-300text-xl">{vehicles.npedCatB.length}</span>
+          </li>
+          <li className="rounded-xl border border-slate-800 bg-slate-800/60 p-3 shadow-sm flex flex-row justify-between">
+            Vehicles with NPED Cat C:{" "}
+            <span className="font-bold text-gray-300 text-xl">{vehicles.npedCatC.length}</span>
+          </li>
         </ul>
       </div>
     </Card>
diff --git a/src/components/UI/Card.tsx b/src/components/UI/Card.tsx
index 8a4663b..9cadd5d 100644
--- a/src/components/UI/Card.tsx
+++ b/src/components/UI/Card.tsx
@@ -10,7 +10,7 @@ const Card = ({ children, className }: CardProps) => {
   return (
     <div
       className={clsx(
-        "bg-[#253445] rounded-lg mt-4 mx-2 shadow-2xl overflow-x-hidden md:row-span-1 px-2",
+        "bg-[#253445] rounded-lg mt-4 mx-2 shadow-2xl overflow-x-hidden md:row-span-1 px-2 border border-gray-600 ",
         className
       )}
     >
diff --git a/src/pages/Session.tsx b/src/pages/Session.tsx
index 058bf84..e6b2e83 100644
--- a/src/pages/Session.tsx
+++ b/src/pages/Session.tsx
@@ -11,8 +11,10 @@ const Session = () => {
   return (
     <SightingFeedProvider>
       <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">
-        <HitSearchCard />
-        <SessionCard />
+        <div className="grid grid-cols-1 lg:grid-cols-8 col-span-2 w-full">
+          <HitSearchCard />
+          <SessionCard />
+        </div>
         <div className="col-span-2">
           <HistoryList />
         </div>