From 8d44444c4d19ff12bebf96ce5292d9983a2854a0 Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Fri, 9 Jan 2026 08:50:03 +0000
Subject: [PATCH] - Refactored Dashboard layout

 - enhanced PlatesProcessed component display
---
 src/features/dashboard/Dashboard.tsx          |  2 +-
 .../SystemOverview/PlatesProcessed.tsx        | 37 +++++++++++--------
 .../SystemOverview/SystemOverview.tsx         |  1 -
 .../SightingModalContent.tsx                  |  4 +-
 4 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/features/dashboard/Dashboard.tsx b/src/features/dashboard/Dashboard.tsx
index 5e56d78..843a8dc 100644
--- a/src/features/dashboard/Dashboard.tsx
+++ b/src/features/dashboard/Dashboard.tsx
@@ -15,7 +15,7 @@ const Dashboard = () => {
   return (
     <div>
       <SystemOverview />
-      <div className="grid grid-cols-1 md:grid-cols-12 gap-2 md:gap-5">
+      <div className="grid grid-cols-1 md:grid-cols-12 gap-2 md:gap-5 mt-4">
         <div className="col-span-7">
           <VideoFeed mostRecentSighting={mostRecent} isLoading={isLoading} size={size} />
           <PlateRead sighting={mostRecent} />
diff --git a/src/features/dashboard/SystemOverview/PlatesProcessed.tsx b/src/features/dashboard/SystemOverview/PlatesProcessed.tsx
index 83866c0..5d4b5d6 100644
--- a/src/features/dashboard/SystemOverview/PlatesProcessed.tsx
+++ b/src/features/dashboard/SystemOverview/PlatesProcessed.tsx
@@ -11,25 +11,30 @@ const PlatesProcessed = ({ platesProcessed }: PlatesProcessedProps) => {
   const toastReceived = platesProcessed?.totalReceived || 0;
 
   return (
-    <div className="grid grid-cols-2 gap-2">
-      <div>
-        <h4 className="text-md">Total Active</h4>
-        <span className="bg-[#151b22] py-1 px-2 rounded-md font-bold text-blue-500">{totalActive}</span>
-      </div>
-      <div>
-        <h4 className="text-md">Total Received</h4>
-        <span className="bg-[#151b22] py-1 px-2  rounded-md font-bold text-green-500">{toastReceived}</span>
-      </div>
-      <div>
-        <h4 className="text-md">Total Pending</h4>
-        <span className="bg-[#151b22] py-1 px-2 rounded-md font-bold text-amber-500">{totalPending}</span>
+    <>
+      <div className="flex flex-row items-center border-b border-gray-500">
+        <h3 className="text-lg ">Reads</h3>
       </div>
+      <div className="grid grid-cols-2 gap-2">
+        <div>
+          <h4 className="text-md">Total Active</h4>
+          <span className="bg-[#151b22] py-1 px-2 rounded-md font-bold text-blue-500">{totalActive}</span>
+        </div>
+        <div>
+          <h4 className="text-md">Total Received</h4>
+          <span className="bg-[#151b22] py-1 px-2  rounded-md font-bold text-green-500">{toastReceived}</span>
+        </div>
+        <div>
+          <h4 className="text-md">Total Pending</h4>
+          <span className="bg-[#151b22] py-1 px-2 rounded-md font-bold text-amber-500">{totalPending}</span>
+        </div>
 
-      <div>
-        <h4 className="text-md">Total Failed</h4>
-        <span className="bg-[#151b22] py-1 px-2  rounded-md font-bold text-red-500">{totalFailed}</span>
+        <div>
+          <h4 className="text-md">Total Failed</h4>
+          <span className="bg-[#151b22] py-1 px-2  rounded-md font-bold text-red-500">{totalFailed}</span>
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/src/features/dashboard/SystemOverview/SystemOverview.tsx b/src/features/dashboard/SystemOverview/SystemOverview.tsx
index 63d1e0f..907b000 100644
--- a/src/features/dashboard/SystemOverview/SystemOverview.tsx
+++ b/src/features/dashboard/SystemOverview/SystemOverview.tsx
@@ -28,7 +28,6 @@ const SystemOverview = () => {
           <h3 className="text-lg">Active Sightings</h3>
         </Card>
         <Card className="p-4 hover:bg-[#233241] cursor-pointer">
-          <h3 className="text-lg">Reads</h3>
           <PlatesProcessed platesProcessed={platesProcessed} />
         </Card>
         <Card className="p-4 hover:bg-[#233241] cursor-pointer">
diff --git a/src/features/dashboard/components/sightingStack/sightingItemModal/SightingModalContent.tsx b/src/features/dashboard/components/sightingStack/sightingItemModal/SightingModalContent.tsx
index a33013c..45acd45 100644
--- a/src/features/dashboard/components/sightingStack/sightingItemModal/SightingModalContent.tsx
+++ b/src/features/dashboard/components/sightingStack/sightingItemModal/SightingModalContent.tsx
@@ -51,9 +51,7 @@ const SightingModalContent = ({ sighting }: SightingModalContentProps) => {
             </div>
           </div>
         </>
-      ) : (
-        <p className="text-gray-300">No sighting data available.</p>
-      )}
+      ) : null}
     </div>
   );
 };