added zoom functionality, need to add endpoint to post

src/pages/Dashboard.tsx

@@ -4,7 +4,7 @@ import { SightingFeedProvider } from "../context/providers/SightingFeedProvider"
 import { CAM_BASE } from "../utils/config";
 
 const Dashboard = () => {
-  const base_url = `${CAM_BASE}/SightingList/sightingSummary?mostRecentRef=`;
+  const base_url = `${CAM_BASE}/SightingListFront/sightingSummary?mostRecentRef=`;
   return (
     <SightingFeedProvider url={base_url} side="Front">
       <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">

src/pages/FrontCamera.tsx

@@ -1,16 +1,34 @@
+import { useState } from "react";
 import CameraSettings from "../components/CameraSettings/CameraSettings";
 import OverviewVideoContainer from "../components/FrontCameraSettings/OverviewVideoContainer";
 import { Toaster } from "sonner";
+import type { ZoomLevel } from "../types/types";
 
 const FrontCamera = () => {
+  const [zoomLevel, setZoomLevel] = useState<ZoomLevel>({
+    left: 0,
+    top: 0,
+    x: 0,
+    y: 0,
+    px: 0,
+    py: 0,
+    level: 1,
+  });
   return (
     <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">
       <OverviewVideoContainer
         title={"Front Camera"}
         side="CameraRear"
         settingsPage={true}
+        zoomLevel={zoomLevel}
+        onZoomLevelChange={setZoomLevel}
+      />
+      <CameraSettings
+        title="Front Camera Settings"
+        side="CameraFront"
+        zoomLevel={zoomLevel}
+        onZoomLevelChange={setZoomLevel}
       />
-      <CameraSettings title="Front Camera Settings" side="CameraFront" />
       <Toaster />
     </div>
   );