From feddaa1eb075978e5082d242b73d7173d7e72c79 Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Mon, 10 Nov 2025 13:44:29 +0000
Subject: [PATCH] - addressed bugs flagged by BR

---
 .../CameraOverview/SnapshotContainer.tsx      |  13 +--
 .../CameraSettings/CameraSettingFields.tsx    | 105 +++++++-----------
 .../CameraSettings/CameraSettings.tsx         |   3 +-
 src/components/UI/NavigationArrow.tsx         |   8 +-
 src/hooks/useCameraConfig.ts                  |   2 +-
 src/hooks/useCameraZoom.ts                    |   1 +
 src/index.css                                 |   6 +
 src/pages/RearCamera.tsx                      |   2 +-
 src/types/types.ts                            |   1 +
 9 files changed, 60 insertions(+), 81 deletions(-)

diff --git a/src/components/CameraOverview/SnapshotContainer.tsx b/src/components/CameraOverview/SnapshotContainer.tsx
index 0efc454..2b3e1e1 100644
--- a/src/components/CameraOverview/SnapshotContainer.tsx
+++ b/src/components/CameraOverview/SnapshotContainer.tsx
@@ -10,18 +10,9 @@ type SnapshotContainerProps = {
   onZoomLevelChange?: (level: number) => void;
 };
 
-export const SnapshotContainer = ({ side, settingsPage, zoomLevel, onZoomLevelChange }: SnapshotContainerProps) => {
+export const SnapshotContainer = ({ side, settingsPage }: SnapshotContainerProps) => {
   const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side);
 
-  const handleZoomClick = () => {
-    const baseLevel = zoomLevel ?? 1;
-    const newLevel = baseLevel >= 4 ? 1 : baseLevel * 2;
-
-    if (onZoomLevelChange) onZoomLevelChange(newLevel);
-
-    if (!zoomLevel) return;
-  };
-
   return (
     <div className="flex flex-col md:flex-row">
       <NavigationArrow side={side} settingsPage={settingsPage} />
@@ -32,7 +23,7 @@ export const SnapshotContainer = ({ side, settingsPage, zoomLevel, onZoomLevelCh
             <Loading message="Camera Preview" />
           </div>
         )}
-        <canvas onClick={handleZoomClick} ref={canvasRef} className="block w-full h-full z-20" />
+        <canvas ref={canvasRef} className="absolute w-full h-full z-20" />
       </div>
     </div>
   );
diff --git a/src/components/CameraSettings/CameraSettingFields.tsx b/src/components/CameraSettings/CameraSettingFields.tsx
index 1f2d743..c7040bf 100644
--- a/src/components/CameraSettings/CameraSettingFields.tsx
+++ b/src/components/CameraSettings/CameraSettingFields.tsx
@@ -32,30 +32,10 @@ const CameraSettingFields = ({
   const parsed = parseRTSPUrl(initialData?.propURI?.value);
   const cameraMode = cameraModeQuery?.data?.propDayNightMode?.value;
 
-  const handleModeClick = async (mode: string) => {
-    await cameraModeMutation.mutate({ camera: cameraControllerSide, mode });
-  };
   useEffect(() => {
     if (!query?.data) return;
     onZoomLevelChange?.(apiZoom);
-  }, [query?.data, onZoomLevelChange]);
-
-  // const getZoomLevel = (levelstring: string | undefined) => {
-  //   console.log(levelstring);
-  //   switch (levelstring) {
-  //     case "1x":
-  //       return 1;
-
-  //     case "2x":
-  //       return 2;
-
-  //     case "4x":
-  //       return 4;
-
-  //     default:
-  //       return 1;
-  //   }
-  // };
+  }, [query?.data, onZoomLevelChange, apiZoom]);
 
   const initialValues = useMemo<CameraSettingValues>(
     () => ({
@@ -64,11 +44,11 @@ const CameraSettingFields = ({
       userName: parsed?.username ?? "",
       password: parsed?.password ?? "",
       id: initialData?.id,
-
+      mode: cameraMode ?? "day",
       zoom: apiZoom,
     }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [initialData?.id, initialData?.propURI?.value, zoomLevel]
+
+    [initialData?.id, initialData?.propURI?.value, parsed?.username, parsed?.password, cameraMode, apiZoom]
   );
 
   const validateValues = (values: CameraSettingValues) => {
@@ -95,6 +75,7 @@ const CameraSettingFields = ({
 
     mutation.mutate(zoomInOptions);
   };
+
   const selectedZoom = zoomLevel ?? 1;
   return (
     <Formik
@@ -104,8 +85,8 @@ const CameraSettingFields = ({
       validateOnChange={false}
       enableReinitialize
     >
-      {({ errors, touched }) => (
-        <Form className="flex flex-col space-y-6 p-2">
+      {({ errors, touched, values, setFieldValue, isSubmitting }) => (
+        <Form className="flex flex-col space-y-6 p-2 overflow-x-hidden">
           <div className="flex flex-col space-y-2 relative">
             <label htmlFor="friendlyName">Name</label>
             {touched.friendlyName && errors.friendlyName && (
@@ -117,7 +98,6 @@ const CameraSettingFields = ({
               type="text"
               className="p-2 border border-gray-400 rounded-lg"
               placeholder="Enter camera name"
-              disabled
             />
           </div>
 
@@ -132,7 +112,6 @@ const CameraSettingFields = ({
               type="text"
               className="p-2 border border-gray-400 rounded-lg"
               placeholder="RTSP://..."
-              disabled
             />
           </div>
 
@@ -148,7 +127,6 @@ const CameraSettingFields = ({
               className="p-2 border border-gray-400 rounded-lg"
               placeholder="Enter user name"
               autoComplete="username"
-              disabled
             />
           </div>
 
@@ -164,7 +142,6 @@ const CameraSettingFields = ({
                 type={showPwd ? "text" : "password"}
                 className="p-2 border border-gray-400 rounded-lg w-full "
                 placeholder="Enter password"
-                disabled
               />
               <FontAwesomeIcon
                 type="button"
@@ -201,42 +178,46 @@ const CameraSettingFields = ({
             </div>
             <div>
               <CardHeader title="Mode" />
-              <div className="mx-auto grid grid-cols-2 place-items-center">
-                <button
-                  type="button"
-                  onClick={() => handleModeClick("day")}
-                  className={`px-8 py-2 rounded-md border border-gray-300 ${
-                    cameraMode === "day" ? "bg-gray-100 text-blue-600" : ""
-                  }`}
-                >
-                  Day
-                </button>
-                <button
-                  type="button"
-                  onClick={() => handleModeClick("night")}
-                  className={`px-8 py-2 rounded-md border border-gray-300 ${
-                    cameraMode === "night" ? "bg-gray-100 text-blue-600" : ""
-                  }`}
-                >
-                  Night
-                </button>
+              <div
+                role="radiogroup"
+                aria-label="Camera mode"
+                className="mx-auto grid grid-cols-2 place-items-center gap-3"
+              >
+                {["day", "night"].map((el) => (
+                  <div key={el} className="my-3">
+                    <Field
+                      type="radio"
+                      name="mode"
+                      value={el}
+                      checked={values.mode === el}
+                      id={`mode-${el}`}
+                      className="peer hidden"
+                      disabled={cameraModeMutation.isPending}
+                      onChange={async () => {
+                        setFieldValue("mode", el);
+                        await cameraModeMutation.mutateAsync({ camera: cameraControllerSide, mode: el });
+                      }}
+                    />
+                    <label
+                      htmlFor={`mode-${el}`}
+                      className={`px-8 py-2 rounded-md border border-gray-300
+                peer-checked:border-2 peer-checked:border-blue-900
+                peer-checked:text-blue-600 peer-checked:bg-gray-100
+                ${cameraModeMutation.isPending ? "opacity-60 cursor-not-allowed" : "cursor-pointer"}`}
+                    >
+                      {el === "day" ? "Day" : "Night"}
+                    </label>
+                  </div>
+                ))}
               </div>
             </div>
-            {/* <div className="mt-3">
-              {updateCameraConfigError ? (
-                <button className="bg-red-500 text-white rounded-lg p-2 mx-auto h-[100%] w-full" disabled>
-                  Retry
-                </button>
-              ) : (
-                <button
-                  type="submit"
-                  className="bg-blue-700 text-white rounded-lg p-2 mx-auto h-[100%] w-full"
-                  disabled
-                >
+            <div className="mt-3">
+              {
+                <button type="submit" className="bg-green-700 text-white rounded-lg p-2 mx-auto w-full">
                   {isSubmitting ? "Saving" : "Save settings"}
                 </button>
-              )}
-            </div> */}
+              }
+            </div>
           </div>
         </Form>
       )}
diff --git a/src/components/CameraSettings/CameraSettings.tsx b/src/components/CameraSettings/CameraSettings.tsx
index 29fa40a..22156fc 100644
--- a/src/components/CameraSettings/CameraSettings.tsx
+++ b/src/components/CameraSettings/CameraSettings.tsx
@@ -18,10 +18,9 @@ const CameraSettings = ({
   const { data, updateCameraConfig, updateCameraConfigError } = useFetchCameraConfig(side);
 
   return (
-    <Card className="overflow-x-auto min-h-[40vh] md:min-h-[60vh] max-h-[83vh] lg:w-[40%] p-4">
+    <Card className="overflow-x-visible min-h-[40vh] md:min-h-[60vh] lg:w-[40%] p-4">
       <div className="relative flex flex-col space-y-3">
         <CardHeader title={title} icon={faWrench} />
-
         {
           <CameraSettingFields
             initialData={data}
diff --git a/src/components/UI/NavigationArrow.tsx b/src/components/UI/NavigationArrow.tsx
index f3011ae..6913c6f 100644
--- a/src/components/UI/NavigationArrow.tsx
+++ b/src/components/UI/NavigationArrow.tsx
@@ -30,14 +30,14 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
           <FontAwesomeIcon
             size="2xl"
             icon={faArrowRight}
-            className="absolute top-[50%] right-[2%] backdrop-blur-lg hover:cursor-pointer animate-bounce z-30"
+            className="absolute top-[50%] right-[2%] backdrop-blur-lg hover:cursor-pointer animate-bounce z-30 rounded-md arrow-outline"
             onClick={() => navigationDest("a")}
           />
         ) : (
           <FontAwesomeIcon
             icon={faArrowLeft}
             size="2xl"
-            className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-30"
+            className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-30 rounded-md arrow-outline"
             onClick={() => navigationDest("b")}
           />
         )}
@@ -49,14 +49,14 @@ const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
       <FontAwesomeIcon
         icon={faArrowLeft}
         size="2xl"
-        className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100 "
+        className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100 arrow-outline rounded-md"
         onClick={() => navigationDest("Front")}
       />
 
       <FontAwesomeIcon
         icon={faArrowRight}
         size="2xl"
-        className="absolute top-[50%] right-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100"
+        className="absolute top-[50%] right-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce z-100 arrow-outline rounded-md"
         onClick={() => navigationDest("Rear")}
       />
     </>
diff --git a/src/hooks/useCameraConfig.ts b/src/hooks/useCameraConfig.ts
index df4e30a..cd78a43 100644
--- a/src/hooks/useCameraConfig.ts
+++ b/src/hooks/useCameraConfig.ts
@@ -31,7 +31,7 @@ const updateCamerasideConfig = async (data: { id: string | number; friendlyName:
     method: "POST",
     body: JSON.stringify(updateConfigPayload),
   });
-  if (!response.ok) throw new Error("Feature unavailable: Coming soon");
+  if (!response.ok) throw new Error("Please make sure fields are filled in correctly");
 };
 
 export const useFetchCameraConfig = (cameraSide: string) => {
diff --git a/src/hooks/useCameraZoom.ts b/src/hooks/useCameraZoom.ts
index 7862f1f..e7e174a 100644
--- a/src/hooks/useCameraZoom.ts
+++ b/src/hooks/useCameraZoom.ts
@@ -11,6 +11,7 @@ const getCameraMode = async (options: { camera: string }) => {
 };
 
 const updateCameraMode = async (options: { camera: string; mode: string }) => {
+  console.log(options);
   const dayNightPayload = {
     id: options.camera,
     fields: [
diff --git a/src/index.css b/src/index.css
index 326a490..92bfa28 100644
--- a/src/index.css
+++ b/src/index.css
@@ -31,3 +31,9 @@ body {
     }
   }
 }
+
+.arrow-outline path {
+  stroke: black; /* outline color */
+  stroke-width: 20px; /* thickness of outline (tweak this) */
+  stroke-linejoin: round;
+}
diff --git a/src/pages/RearCamera.tsx b/src/pages/RearCamera.tsx
index e73d7a4..1306908 100644
--- a/src/pages/RearCamera.tsx
+++ b/src/pages/RearCamera.tsx
@@ -6,7 +6,7 @@ import { useState } from "react";
 const RearCamera = () => {
   const [zoomLevel, setZoomLevel] = useState<number | undefined>(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">
+    <div className="mx-auto flex flex-col-reverse lg:flex-row gap-2 px-1 sm:px-2 lg:px-0 w-full min-h-screen">
       <CameraSettings
         title="Camera B Settings"
         side={"CameraB"}
diff --git a/src/types/types.ts b/src/types/types.ts
index 2da3246..fbf4f0e 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -41,6 +41,7 @@ export type CameraSettingValues = {
   userName: string;
   password: string;
   id: number | string;
+  mode: string;
 };
 
 export type CameraSettingErrorValues = Partial<Record<keyof CameraSettingValues, string>>;