updated image loading

src/components/FrontCameraOverview/FrontCameraOverviewCard.tsx

@@ -14,6 +14,7 @@ const FrontCameraOverviewCard = ({ className }: CardProps) => {
   const navigate = useNavigate();
   const handlers = useSwipeable({
     onSwipedRight: () => navigate("/front-camera-settings"),
+    onSwipedDown: () => navigate("/system-settings"),
     trackMouse: true,
   });
 

src/components/RearCameraOverview/RearCameraOverviewCard.tsx

@@ -1,10 +1,11 @@
 import clsx from "clsx";
 import Card from "../UI/Card";
-import { SnapshotContainer } from "../CameraOverview/SnapshotContainer";
+// import { SnapshotContainer } from "../CameraOverview/SnapshotContainer";
 import { useSwipeable } from "react-swipeable";
 import { useNavigate } from "react-router";
 import CardHeader from "../UI/CardHeader";
 import { faCamera } from "@fortawesome/free-regular-svg-icons";
+import SightingOverview from "../SightingOverview/SightingOverview";
 
 type CardProps = React.HTMLAttributes<HTMLDivElement>;
 
@@ -12,14 +13,21 @@ const RearCameraOverviewCard = ({ className }: CardProps) => {
   const navigate = useNavigate();
   const handlers = useSwipeable({
     onSwipedLeft: () => navigate("/rear-camera-settings"),
+    onSwipedDown: () => navigate("/system-settings"),
     trackMouse: true,
   });
 
   return (
-    <Card className={clsx("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 Overiew" icon={faCamera} />
-        <SnapshotContainer side="TargetDetectionRear" />
+        <SightingOverview />
+        {/* <SnapshotContainer side="TargetDetectionRear" /> */}
       </div>
     </Card>
   );

src/components/SettingForms/NPED/NPEDFields.tsx

@@ -1,8 +1,11 @@
 import { Form, Formik, Field } from "formik";
 import FormGroup from "../components/FormGroup";
 import type { NPEDFieldType } from "../../../types/types";
+import { useNPEDAuth } from "../../../hooks/useNPEDAuh";
 
 const NPEDFields = () => {
+  const { signIn, isError } = useNPEDAuth();
+
   const initialValues = {
     username: "",
     password: "",
@@ -10,7 +13,8 @@ const NPEDFields = () => {
   };
 
   const handleSubmit = (values: NPEDFieldType) => {
-    alert(JSON.stringify(values));
+    console.log(isError);
+    signIn(values);
   };
 
   return (

src/components/SightingOverview/SightingOverview.tsx

@@ -5,8 +5,15 @@ import { useOverviewOverlay } from "../../hooks/useOverviewOverlay";
 import { useSightingFeedContext } from "../../context/SightingFeedContext";
 import { useHiDPICanvas } from "../../hooks/useHiDPICanvas";
 import NavigationArrow from "../UI/NavigationArrow";
+import { useSwipeable } from "react-swipeable";
+import { useNavigate } from "react-router";
 
 const SightingOverview = () => {
+  const navigate = useNavigate();
+  const handlers = useSwipeable({
+    onSwipedRight: () => navigate("/front-camera-settings"),
+    trackMouse: true,
+  });
   const [overlayMode, setOverlayMode] = useState<0 | 1 | 2>(0);
 
   const imgRef = useRef<HTMLImageElement | null>(null);
@@ -16,20 +23,17 @@ const SightingOverview = () => {
     setOverlayMode((m) => ((m + 1) % 3) as 0 | 1 | 2);
   }, []);
 
-  const { effectiveSelected } = useSightingFeedContext();
+  const { effectiveSelected, side, mostRecent, noSighting } =
+    useSightingFeedContext();
 
-  useOverviewOverlay(effectiveSelected, overlayMode, imgRef, canvasRef);
+  useOverviewOverlay(mostRecent, overlayMode, imgRef, canvasRef);
 
   const { sync } = useHiDPICanvas(imgRef, canvasRef);
+  if (noSighting) return <p>loading</p>;
   return (
     <div className="mt-2 grid gap-3">
-      {/* <div className="flex items-center gap-3 text-sm">
-        <div className="font-semibold">{effectiveSelected?.vrm ?? "—"}</div>
-        <div>{effectiveSelected?.countryCode ?? "—"}</div>
-        <div className="opacity-80">{effectiveSelected?.timeStamp ?? "—"}</div>
-      </div> */}
-
-      <div className="inline-block">
+      <div className="inline-block w-[90%] mx-auto" {...handlers}>
+        <NavigationArrow side={side} />
         <div className="relative aspect-[5/4]">
           <img
             ref={imgRef}
@@ -37,12 +41,12 @@ const SightingOverview = () => {
               sync();
               setOverlayMode((m) => m);
             }}
-            src={effectiveSelected?.overviewUrl || BLANK_IMG}
+            src={mostRecent?.overviewUrl || BLANK_IMG}
             alt="overview"
             className="absolute inset-0 w-full h-full object-contain cursor-pointer z-10"
             onClick={onOverviewClick}
             style={{
-              display: effectiveSelected?.overviewUrl ? "block" : "none",
+              display: mostRecent?.overviewUrl ? "block" : "none",
             }}
           />
           <canvas

src/components/SightingsWidget/SightingWidget.tsx

@@ -29,7 +29,7 @@ export default function SightingHistoryWidget({
   className,
 }: SightingHistoryWidgetProps) {
   useNow(1000);
-  const { items, selectedRef, setSelectedRef } = useSightingFeedContext();
+  const { sightings, selectedRef, setSelectedRef } = useSightingFeedContext();
 
   const onRowClick = useCallback(
     (ref: number) => {
@@ -39,8 +39,8 @@ export default function SightingHistoryWidget({
   );
 
   const rows = useMemo(
-    () => items.filter(Boolean) as SightingWidgetType[],
-    [items]
+    () => sightings?.filter(Boolean) as SightingWidgetType[],
+    [sightings]
   );
 
   return (
@@ -49,7 +49,7 @@ export default function SightingHistoryWidget({
       <div className="flex flex-col gap-3 ">
         {/* Rows */}
         <div className="flex flex-col">
-          {rows.map((obj, idx) => {
+          {rows?.map((obj, idx) => {
             const isSelected = obj?.ref === selectedRef;
             const motionAway = (obj?.motion ?? "").toUpperCase() === "AWAY";
             const primaryIsColour = obj?.srcCam === 1;

src/components/UI/NavigationArrow.tsx

@@ -16,9 +16,9 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
       return;
     }
 
-    if (side === "TargetDetectionFront") {
+    if (side === "Front") {
       navigate("/front-camera-settings");
-    } else if (side === "TargetDetectionRear") {
+    } else if (side === "Rear") {
       navigate("/Rear-Camera-settings");
     }
   };
@@ -42,10 +42,9 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
       </>
     );
   }
-
   return (
     <>
-      {side === "TargetDetectionFront" ? (
+      {side === "Front" ? (
         <FontAwesomeIcon
           icon={faArrowLeft}
           className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce"