Minor fixes:

removed clock
added navigation arrow to main sighting screen
added zoom functionality to rear (camera B) settings
brought back navigation to rear cam page

src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx

@@ -10,6 +10,7 @@ const FrontCameraOverviewCard = () => {
   const navigate = useNavigate();
   const handlers = useSwipeable({
     onSwipedRight: () => navigate("/camera-settings"),
+    onSwipedLeft: () => navigate("/rear-camera-settings"),
     trackMouse: true,
   });
 

src/components/FrontCameraSettings/OverviewVideoContainer.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
 import { SnapshotContainer } from "../CameraOverview/SnapshotContainer";
 import Card from "../UI/Card";
-import { useNavigate } from "react-router";
+import { useNavigate, useLocation } from "react-router";
 import { useSwipeable } from "react-swipeable";
 import type { ZoomLevel } from "../../types/types";
 
@@ -18,8 +18,17 @@ const OverviewVideoContainer = ({
   onZoomLevelChange?: (level: ZoomLevel) => void;
 }) => {
   const navigate = useNavigate();
+  const location = useLocation();
+  console.log(location);
   const handlers = useSwipeable({
-    onSwipedLeft: () => navigate("/"),
+    onSwipedLeft: () => {
+      if (location.pathname === "/rear-camera-settings") return;
+      navigate("/");
+    },
+    onSwipedRight: () => {
+      if (location.pathname === "/camera-settings") return;
+      navigate("/");
+    },
     trackMouse: true,
   });
   return (

src/components/SightingOverview/SightingOverview.tsx

@@ -30,6 +30,7 @@ const SightingOverview = () => {
   return (
     <div className="flex flex-col md:flex-row">
       <NavigationArrow side={side} />
+
       <div className="w-full">
         {mostRecent && (
           <div className="absolute inset-0 z-50 px-1 pt-2">

src/components/UI/Header.tsx

@@ -3,56 +3,25 @@ import Logo from "/MAV.svg";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faGear,
+  faHome,
   faListCheck,
   faMaximize,
   faMinimize,
   faRotate,
 } from "@fortawesome/free-solid-svg-icons";
-import type { VersionFieldType } from "../../types/types";
+import { useState } from "react";
-import { useEffect, useState } from "react";
 import SoundBtn from "./SoundBtn";
 import { useNPEDContext } from "../../context/NPEDUserContext";
 
-async function fetchVersions(
-  signal?: AbortSignal
-): Promise<VersionFieldType | undefined> {
-  try {
-    const res = await fetch("http://192.168.75.11/api/versions", { signal });
-    if (!res.ok) throw new Error(`HTTP ${res.status}`);
-    return res.json();
-  } catch (error) {
-    console.log(error);
-    return undefined;
-  }
-}
-
-const pad = (n: number) => String(n).padStart(2, "0");
-const normalizeToMs = (ts: number) => (ts < 1e12 ? ts * 1000 : ts); // seconds → ms if needed
-
-function formatFromMs(ms: number, tz: "local" | "utc" = "local") {
-  const d = new Date(ms);
-  const h = tz === "utc" ? d.getUTCHours() : d.getHours();
-  const m = tz === "utc" ? d.getUTCMinutes() : d.getMinutes();
-  const s = tz === "utc" ? d.getUTCSeconds() : d.getSeconds();
-  const day = tz === "utc" ? d.getUTCDate() : d.getDate();
-  const month = (tz === "utc" ? d.getUTCMonth() : d.getMonth()) + 1;
-  const year = tz === "utc" ? d.getUTCFullYear() : d.getFullYear();
-  return `${pad(h)}:${pad(m)}:${pad(s)} ${pad(day)}-${pad(month)}-${year}`;
-}
-
 export default function Header() {
-  const [offsetMs, setOffsetMs] = useState<number | null>(null);
-  const [nowMs, setNowMs] = useState<number>(Date.now());
   const [isFullscreen, setIsFullscreen] = useState(false);
   const { sessionStarted } = useNPEDContext();
 
   const toggleFullscreen = () => {
     if (!document.fullscreenElement) {
-      // Enter fullscreen on the entire app
       document.documentElement.requestFullscreen();
       setIsFullscreen(true);
     } else {
-      // Exit fullscreen
       document.exitFullscreen();
       setIsFullscreen(false);
     }
@@ -62,38 +31,8 @@ export default function Header() {
     window.location.reload();
   };
 
-  useEffect(() => {
-    const ac = new AbortController();
-    fetchVersions(ac.signal)
-      .then((data) => {
-        if (!data) throw new Error("No data");
-        const serverMs = normalizeToMs(data?.timeStamp);
-        setOffsetMs(serverMs - Date.now());
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-    return () => ac.abort("failed");
-  }, []);
-
-  useEffect(() => {
-    let timer: number;
-    const schedule = () => {
-      const now = Date.now();
-      setNowMs(now);
-      const delay = 1000 - (now % 1000);
-      timer = window.setTimeout(schedule, delay);
-    };
-    schedule();
-    return () => clearTimeout(timer);
-  }, []);
-
-  const serverNowMs = offsetMs == null ? nowMs : nowMs + offsetMs;
-  const localStr = formatFromMs(serverNowMs, "local");
-  const utcStr = formatFromMs(serverNowMs, "utc");
-
   return (
-    <div className="relative bg-[#253445] border-b border-gray-500 items-center mx-auto px-2 sm:px-6 lg:px-8 p-4 flex flex-col md:flex-row justify-between">
+    <div className="relative bg-[#253445] border-b border-gray-500 items-center mx-auto px-2 sm:px-6 lg:px-8 p-4 flex flex-col md:flex-row justify-between mb-7">
       <div className="w-30">
         <Link to={"/"}>
           <img src={Logo} alt="Logo" width={150} height={150} />
@@ -103,11 +42,11 @@ export default function Header() {
         {sessionStarted && (
           <div className="text-green-400 font-bold">Session Active</div>
         )}
-        <div className="flex flex-col leading-tight text-white tabular-nums text-xl text-right mx-auto md:mx-10 space-y-1 my-2">
+
-          <h2>Local: {localStr}</h2>
-          <h2>UTC: {utcStr}</h2>
-        </div>
         <div className="flex flex-row space-x-8">
+          <Link to={"/"}>
+            <FontAwesomeIcon className="text-white" icon={faHome} size="2x" />
+          </Link>
           <div onClick={toggleFullscreen} className="flex flex-col">
             {isFullscreen ? (
               <FontAwesomeIcon icon={faMinimize} size="2x" />

src/components/UI/NavigationArrow.tsx

@@ -9,7 +9,6 @@ type NavigationArrowProps = {
 
 const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
   const navigate = useNavigate();
-
   const navigationDest = (side: string | undefined) => {
     if (settingsPage) {
       navigate("/");
@@ -44,19 +43,17 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
   }
   return (
     <>
-      {side === "Front" ? (
       <FontAwesomeIcon
         icon={faArrowLeft}
         className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-30"
         onClick={() => navigationDest(side)}
       />
-      ) : (
+
       <FontAwesomeIcon
         icon={faArrowRight}
         className="absolute top-[50%] right-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-30"
         onClick={() => navigationDest(side)}
       />
-      )}
     </>
   );
 };

src/pages/Dashboard.tsx

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

src/pages/FrontCamera.tsx

@@ -18,7 +18,7 @@ const FrontCamera = () => {
     <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"
+        side="CameraFront"
         settingsPage={true}
         zoomLevel={zoomLevel}
         onZoomLevelChange={setZoomLevel}

src/pages/RearCamera.tsx

@@ -1,27 +1,34 @@
-import { useNavigate } from "react-router";
-import { useSwipeable } from "react-swipeable";
 import OverviewVideoContainer from "../components/FrontCameraSettings/OverviewVideoContainer";
 import CameraSettings from "../components/CameraSettings/CameraSettings";
 import { Toaster } from "sonner";
+import { useState } from "react";
+import type { ZoomLevel } from "../types/types";
 
 const RearCamera = () => {
-  const navigate = useNavigate();
+  const [zoomLevel, setZoomLevel] = useState<ZoomLevel>({
-  const handlers = useSwipeable({
+    left: 0,
-    onSwipedRight: () => navigate("/"),
+    top: 0,
-    trackMouse: true,
+    x: 0,
+    y: 0,
+    px: 0,
+    py: 0,
+    level: 1,
   });
-
   return (
-    <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-4 px-2 sm:px-4 lg:px-0 w-full order-first">
+    <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">
-      <CameraSettings title="Rear Camera Settings" side={"CameraRear"} />
+      <CameraSettings
-
+        title="Rear Camera Settings"
-      <div {...handlers}>
+        side={"CameraRear"}
+        zoomLevel={zoomLevel}
+        onZoomLevelChange={setZoomLevel}
+      />
       <OverviewVideoContainer
         title={"Rear Camera"}
         side={"CameraRear"}
         settingsPage={true}
+        zoomLevel={zoomLevel}
+        onZoomLevelChange={setZoomLevel}
       />
-      </div>
       <Toaster />
     </div>
   );