- Enhanced Dashboard and SystemOverview components with totalSightings prop

- improved layout and loading states in VideoFeed and SightingStack components.

src/features/dashboard/Dashboard.tsx

@@ -6,22 +6,24 @@ import { useCameraSettingsContext } from "../../app/context/CameraSettingsContex
 import SystemOverview from "./SystemOverview/SystemOverview";
 
 const Dashboard = () => {
-  const { sightingList, isLoading } = useSightingList();
+  const { sightingList, isLoading, totalSightings } = useSightingList();
   const { state: cameraSettings } = useCameraSettingsContext();
   const size = cameraSettings.imageSize;
 
   const mostRecent = sightingList[0];
 
   return (
-    <div>
-      <SystemOverview />
-      <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} />
+    <div className="flex flex-col">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-5">
+        <VideoFeed mostRecentSighting={mostRecent} isLoading={isLoading} size={size} />
+        <SightingStack sightings={sightingList} />
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-2 md:gap-5 items-center">
+        <div className="col-span-1">
           <PlateRead sighting={mostRecent} />
         </div>
-        <div className="col-span-5">
-          <SightingStack sightings={sightingList} />
+        <div className="col-span-2">
+          <SystemOverview totalSightings={totalSightings} />
         </div>
       </div>
     </div>