resolved conflicts from develop

.env

@@ -1,5 +1,5 @@
 VITE_BASEURL=http://192.168.75.11/
-VITE_CAM_BASE=http://100.72.72.70:8080
+VITE_CAM_BASE=http://100.118.196.113:8080
 VITE_FOLKESTONE_BASE=http://100.116.253.81
 VITE_TESTURL=http://100.82.205.44/SightingListRear/sightingSummary?mostRecentRef=-1
 VITE_OUTSIDE_BASEURL=http://100.82.205.44

src/components/CameraOverview/SnapshotContainer.tsx

@@ -1,12 +1,14 @@
 import { useGetOverviewSnapshot } from "../../hooks/useGetOverviewSnapshot";
-import type { ZoomLevel } from "../../types/types";
+import type { ZoomInOptions } from "../../types/types";
 import NavigationArrow from "../UI/NavigationArrow";
+import { useCameraZoom } from "../../hooks/useCameraZoom";
+import { useEffect } from "react";
 
 type SnapshotContainerProps = {
   side: string;
   settingsPage?: boolean;
-  zoomLevel?: ZoomLevel;
+  zoomLevel?: number;
-  onZoomLevelChange?: (level: ZoomLevel) => void;
+  onZoomLevelChange?: (level: number) => void;
 };
 
 export const SnapshotContainer = ({
@@ -16,37 +18,33 @@ export const SnapshotContainer = ({
   onZoomLevelChange,
 }: SnapshotContainerProps) => {
   const { canvasRef, isError, isPending } = useGetOverviewSnapshot(side);
-  if (isError) return <p className="h-100">An error occurred</p>;
+  const cameraControllerSide =
-  if (isPending) return <p className="h-100">Loading...</p>;
+    side === "CameraA" ? "CameraControllerA" : "CameraControllerB";
+  const { mutation } = useCameraZoom({ camera: cameraControllerSide });
 
-  const handleZoomClick = (event: React.MouseEvent<HTMLCanvasElement>) => {
+  const handleZoomClick = () => {
-    const bounds = canvasRef.current?.getBoundingClientRect();
+    const baseLevel = zoomLevel ?? 1;
-    if (!bounds) return;
-    const left = bounds.left;
-    const top = bounds.top;
-    const x = event.pageX;
-    const y = event.pageY;
-    const cw = canvasRef.current?.clientWidth;
-    const ch = canvasRef.current?.clientHeight;
-    if (!cw || !ch) return;
-    const px = x / cw;
-    const py = y / ch;
-
-    const baseLevel = zoomLevel?.level ?? 1;
     const newLevel = baseLevel >= 8 ? 1 : baseLevel * 2;
 
-    if (onZoomLevelChange)
+    if (onZoomLevelChange) onZoomLevelChange(newLevel);
-      onZoomLevelChange({
+
-        left,
+    if (!zoomLevel) return;
-        top,
-        x,
-        y,
-        px,
-        py,
-        level: newLevel,
-      });
   };
 
+  useEffect(() => {
+    if (zoomLevel) {
+      const zoomInOptions: ZoomInOptions = {
+        camera: cameraControllerSide,
+        multiplier: zoomLevel,
+      };
+      mutation.mutate(zoomInOptions);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [zoomLevel]);
+
+  if (isError) return <p className="h-100">An error occurred</p>;
+  if (isPending) return <p className="h-100">Loading...</p>;
+
   return (
     <div className="flex flex-col md:flex-row">
       <NavigationArrow side={side} settingsPage={settingsPage} />

src/components/CameraSettings/CameraSettingFields.tsx

@@ -3,18 +3,19 @@ import type {
   CameraConfig,
   CameraSettingErrorValues,
   CameraSettingValues,
-  ZoomLevel,
+  ZoomInOptions,
 } from "../../types/types";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
 import CardHeader from "../UI/CardHeader";
+import { useCameraZoom } from "../../hooks/useCameraZoom";
 
 type CameraSettingsProps = {
   initialData: CameraConfig;
   updateCameraConfig: (values: CameraSettingValues) => Promise<void> | void;
-  zoomLevel?: ZoomLevel;
+  zoomLevel?: number;
-  onZoomLevelChange?: (level: ZoomLevel) => void;
+  onZoomLevelChange?: (level: number) => void;
 };
 
 const CameraSettingFields = ({
@@ -24,7 +25,38 @@ const CameraSettingFields = ({
   onZoomLevelChange,
 }: CameraSettingsProps) => {
   const [showPwd, setShowPwd] = useState(false);
+  const cameraControllerSide =
+    initialData?.id === "CameraA" ? "CameraControllerA" : "CameraControllerB";
+  const { mutation, query } = useCameraZoom({ camera: cameraControllerSide });
+  const zoomOptions = [1, 2, 4, 8];
 
+  useEffect(() => {
+    if (!query.data) return;
+    const apiZoom = getZoomLevel(query.data);
+    onZoomLevelChange?.(apiZoom);
+  }, [query.data, onZoomLevelChange]);
+
+  const getZoomLevel = (levelstring: string | undefined) => {
+    switch (levelstring) {
+      case "1x":
+        return 1;
+        break;
+      case "2x":
+        return 2;
+        break;
+      case "4x":
+        return 4;
+        break;
+      case "8x":
+        return 8;
+      default:
+        return 1;
+    }
+  };
+  const level = getZoomLevel(query.data);
+
+  console.log("level from get", level);
+  console.log("zoomLevel state", zoomLevel);
   const initialValues = useMemo<CameraSettingValues>(
     () => ({
       friendlyName: initialData?.id ?? "",
@@ -32,18 +64,16 @@ const CameraSettingFields = ({
       userName: "",
       password: "",
       id: initialData?.id,
-      zoom: zoomLevel?.level ? zoomLevel.level : 1,
+
+      zoom: zoomLevel,
     }),
-    [initialData?.id, initialData?.propURI?.value, zoomLevel?.level]
+    [initialData?.id, initialData?.propURI?.value, zoomLevel]
   );
 
   const validateValues = (values: CameraSettingValues) => {
     const errors: CameraSettingErrorValues = {};
     if (!values.friendlyName) errors.friendlyName = "Required";
     if (!values.cameraAddress) errors.cameraAddress = "Required";
-    if (!values.userName) errors.userName = "Required";
-    if (!values.password) errors.password = "Required";
-
     return errors;
   };
 
@@ -51,20 +81,26 @@ const CameraSettingFields = ({
     updateCameraConfig(values);
   };
 
-  const handleRadioButtonChange = (levelNumber: number) => {
+  const handleRadioButtonChange = async (levelNumber: number) => {
     if (!onZoomLevelChange || !zoomLevel) return;
-    onZoomLevelChange({
+    onZoomLevelChange(levelNumber);
-      ...zoomLevel,
+
-      level: zoomLevel?.level !== levelNumber ? levelNumber : zoomLevel?.level,
+    const zoomInOptions: ZoomInOptions = {
-    });
+      camera: cameraControllerSide,
+      multiplier: levelNumber,
     };
 
+    mutation.mutate(zoomInOptions);
+  };
+  const selectedZoom = zoomLevel ?? 1;
+  console.log(selectedZoom);
   return (
     <Formik
       initialValues={initialValues}
       onSubmit={handleSubmit}
       validate={validateValues}
       validateOnChange={false}
+      enableReinitialize
     >
       {({ errors, touched }) => (
         <Form className="flex flex-col space-y-6 p-2">
@@ -143,78 +179,28 @@ const CameraSettingFields = ({
             </div>
             <div className="my-3">
               <CardHeader title="Zoom settings" />
-              <div className="mx-auto flex gap-10 items-center ">
+              <div className="mx-auto flex gap-10 items-center">
-                <div>
+                {zoomOptions.map((zoom) => (
+                  <div key={zoom}>
                     <Field
                       type="radio"
                       name="zoom"
-                    value={zoomLevel?.level ? zoomLevel.level.toString() : "1"}
+                      value={zoom.toString()}
-                    checked={zoomLevel?.level === 1}
+                      checked={selectedZoom === zoom}
                       className="hidden peer"
-                    id="zoom1"
+                      id={`zoom${zoom}`}
-                    onChange={() => handleRadioButtonChange(1)}
+                      onChange={() => handleRadioButtonChange(zoom)}
                     />
                     <label
-                    htmlFor="zoom1"
+                      htmlFor={`zoom${zoom}`}
-                    className="px-6 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"
+                      className="px-6 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"
                     >
-                    x1
+                      x{zoom}
-                  </label>
-                </div>
-
-                <div>
-                  <Field
-                    type="radio"
-                    name="zoom"
-                    value={zoomLevel?.level ? zoomLevel.level.toString() : "2"}
-                    checked={zoomLevel?.level === 2}
-                    className="hidden peer"
-                    id="zoom2"
-                    onChange={() => handleRadioButtonChange(2)}
-                  />
-                  <label
-                    htmlFor="zoom2"
-                    className="px-6 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"
-                  >
-                    x2
-                  </label>
-                </div>
-
-                <div>
-                  <Field
-                    type="radio"
-                    name="zoom"
-                    value={zoomLevel?.level ? zoomLevel.level.toString() : "4"}
-                    checked={zoomLevel?.level === 4}
-                    className="hidden peer"
-                    id="zoom4"
-                    onChange={() => handleRadioButtonChange(4)}
-                  />
-                  <label
-                    htmlFor="zoom4"
-                    className="px-6 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"
-                  >
-                    x4
-                  </label>
-                </div>
-
-                <div>
-                  <Field
-                    type="radio"
-                    name="zoom"
-                    value={zoomLevel?.level ? zoomLevel.level.toString() : "8"}
-                    checked={zoomLevel?.level === 8}
-                    className="hidden peer"
-                    id="zoom8"
-                    onChange={() => handleRadioButtonChange(8)}
-                  />
-                  <label
-                    htmlFor="zoom8"
-                    className="px-6 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"
-                  >
-                    x8
                     </label>
                   </div>
+                ))}
               </div>
             </div>
             <button

src/components/CameraSettings/CameraSettings.tsx

@@ -1,5 +1,5 @@
 import { useFetchCameraConfig } from "../../hooks/useCameraConfig";
-import type { ZoomLevel } from "../../types/types";
+
 import Card from "../UI/Card";
 import CardHeader from "../UI/CardHeader";
 import CameraSettingFields from "./CameraSettingFields";
@@ -13,8 +13,8 @@ const CameraSettings = ({
 }: {
   title: string;
   side: string;
-  zoomLevel?: ZoomLevel;
+  zoomLevel?: number;
-  onZoomLevelChange?: (level: ZoomLevel) => void;
+  onZoomLevelChange?: (level: number) => void;
 }) => {
   const { data, isError, isPending, updateCameraConfig } =
     useFetchCameraConfig(side);

src/components/FrontCameraSettings/OverviewVideoContainer.tsx

@@ -3,7 +3,6 @@ import { SnapshotContainer } from "../CameraOverview/SnapshotContainer";
 import Card from "../UI/Card";
 import { useNavigate, useLocation } from "react-router";
 import { useSwipeable } from "react-swipeable";
-import type { ZoomLevel } from "../../types/types";
 
 const OverviewVideoContainer = ({
   side,
@@ -14,8 +13,8 @@ const OverviewVideoContainer = ({
   title: string;
   side: string;
   settingsPage?: boolean;
-  zoomLevel?: ZoomLevel;
+  zoomLevel?: number;
-  onZoomLevelChange?: (level: ZoomLevel) => void;
+  onZoomLevelChange?: (level: number) => void;
 }) => {
   const navigate = useNavigate();
   const location = useLocation();

src/components/SettingForms/WiFi&Modem/ModemCard.tsx

@@ -1,96 +1,13 @@
 import Card from "../../UI/Card";
 import CardHeader from "../../UI/CardHeader";
-import { useState } from "react";
+import ModemSettings from "./ModemSettings";
-import FormGroup from "../components/FormGroup";
 
 const ModemCard = () => {
-  const [apn, setApn] = useState("");
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const [authType, setAuthType] = useState("PAP");
-
   return (
-    // TODO: Add switch for Auto vs Manual settings
     <Card className="p-4">
       <CardHeader title={"Modem"} />
-      <div className="flex flex-col gap-4 px-2">
+
-        <FormGroup>
+      <ModemSettings />
-          <label
-            htmlFor="apn"
-            className="font-medium whitespace-nowrap md:w-2/3"
-          >
-            APN
-          </label>
-          <input
-            id="apn"
-            name="apn"
-            type="text"
-            className="p-2 border border-gray-400 rounded-lg flex-1 md:w-2/3"
-            placeholder="Enter APN"
-            value={apn}
-            onChange={(e) => setApn(e.target.value)}
-          />
-        </FormGroup>
-        <FormGroup>
-          <label
-            htmlFor="modemUsername"
-            className="font-medium whitespace-nowrap md:w-2/3"
-          >
-            Username
-          </label>
-          <input
-            id="modemUsername"
-            name="modemUsername"
-            type="text"
-            className="p-2 border border-gray-400 rounded-lg flex-1 md:w-2/3"
-            placeholder="Enter Username"
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-          />
-        </FormGroup>
-        <FormGroup>
-          <label
-            htmlFor="modemPassword"
-            className="font-medium whitespace-nowrap md:w-2/3"
-          >
-            Password
-          </label>
-          <input
-            id="modemPassword"
-            name="modemPassword"
-            type="password"
-            className="p-2 border border-gray-400 rounded-lg flex-1 md:w-2/3"
-            placeholder="Enter Password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-          />
-        </FormGroup>
-        <FormGroup>
-          <label
-            htmlFor="authType"
-            className="font-medium whitespace-nowrap md:w-2/3"
-          >
-            Authentication Type
-          </label>
-          <select
-            id="authType"
-            name="authType"
-            className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 md:w-2/3"
-            value={authType}
-            onChange={(e) => setAuthType(e.target.value)}
-          >
-            <option value="PAP">PAP</option>
-            <option value="CHAP">CHAP</option>
-            <option value="None">None</option>
-          </select>
-        </FormGroup>
-        <button
-          className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
-          //onClick={() => handleModemSave(apn, username, password, authType)}
-        >
-          Save Modem Settings
-        </button>
-      </div>
     </Card>
   );
 };

src/components/SettingForms/WiFi&Modem/ModemSettings.tsx

@@ -0,0 +1,148 @@
+import { Formik, Form, Field } from "formik";
+import FormGroup from "../components/FormGroup";
+import type { ModemSettingsType } from "../../../types/types";
+import { useWifiAndModem } from "../../../hooks/useCameraWifiandModem";
+import { useEffect, useState } from "react";
+import ModemToggle from "./ModemToggle";
+import { toast } from "sonner";
+
+const ModemSettings = () => {
+  const [showSettings, setShowSettings] = useState(false);
+  const { modemQuery, modemMutation } = useWifiAndModem();
+
+  const apn = modemQuery?.data?.propAPN?.value;
+  const username = modemQuery?.data?.propUsername.value;
+  const password = modemQuery?.data?.propPassword?.value;
+  const mode = modemQuery?.data?.propMode?.value;
+
+  useEffect(() => {
+    setShowSettings(mode === "AUTO");
+  }, [mode]);
+
+  const inititalValues = {
+    apn: apn ?? "",
+    username: username ?? "",
+    password: password ?? "",
+    authenticationType: "PAP",
+  };
+
+  const handleSubmit = (values: ModemSettingsType) => {
+    const modemConfig = {
+      id: "ModemAndWifiManager-modem",
+      fields: [
+        {
+          property: "propAPN",
+          value: values.apn,
+        },
+        {
+          property: "propPassword",
+          value: values.password,
+        },
+        {
+          property: "propUsername",
+          value: values.username,
+        },
+
+        {
+          property: "propMode",
+          value: showSettings ? "AUTO" : "MANUAL",
+        },
+      ],
+    };
+    modemMutation.mutate(modemConfig);
+    if (modemMutation.error) {
+      toast.error("Failed to update modem settings");
+      return;
+    }
+    toast.success("Modem settings updated");
+  };
+
+  return (
+    <>
+      <ModemToggle
+        showSettings={showSettings}
+        onShowSettings={setShowSettings}
+      />
+      {!showSettings && (
+        <Formik
+          initialValues={inititalValues}
+          onSubmit={handleSubmit}
+          enableReinitialize
+        >
+          <Form className="flex flex-col space-y-5 px-2">
+            <FormGroup>
+              <label
+                htmlFor="apn"
+                className="font-medium whitespace-nowrap md:w-2/3"
+              >
+                APN
+              </label>
+              <Field
+                placeholder="Enter APN"
+                name="apn"
+                id="apn"
+                type="text"
+                className="p-1.5 border border-gray-400 rounded-lg"
+              />
+            </FormGroup>
+            <FormGroup>
+              <label
+                htmlFor="username"
+                className="font-medium whitespace-nowrap md:w-2/3"
+              >
+                Username
+              </label>
+              <Field
+                placeholder="Enter Username"
+                name="username"
+                id="username"
+                type="text"
+                className="p-1.5 border border-gray-400 rounded-lg"
+              />
+            </FormGroup>
+            <FormGroup>
+              <label
+                htmlFor="password"
+                className="font-medium whitespace-nowrap md:w-2/3"
+              >
+                Password
+              </label>
+              <Field
+                placeholder="Enter Password"
+                name="password"
+                id="password"
+                type="text"
+                className="p-1.5 border border-gray-400 rounded-lg"
+              />
+            </FormGroup>
+            <FormGroup>
+              <label
+                htmlFor="password"
+                className="font-medium whitespace-nowrap md:w-2/3"
+              >
+                Password
+              </label>
+              <Field
+                name="authenticationType"
+                as="select"
+                className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 w-2/3"
+              >
+                <option value="PAP">PAP</option>
+                <option value="CHAP">CHAP</option>
+                <option value="none">None</option>
+              </Field>
+            </FormGroup>
+            <button
+              type="submit"
+              className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
+            >
+              Save Modem settings
+            </button>
+          </Form>
+        </Formik>
+      )}
+    </>
+  );
+};
+
+export default ModemSettings;

src/components/SettingForms/WiFi&Modem/ModemToggle.tsx

@@ -0,0 +1,30 @@
+type ModemToggleProps = {
+  showSettings: boolean;
+  onShowSettings: (showSettings: boolean) => void;
+};
+
+const ModemToggle = ({ showSettings, onShowSettings }: ModemToggleProps) => {
+  return (
+    <div className=" text-xl items-center m-2">
+      <label className="flex flex-row space-x-2 items-center w-[70%] md:w-[50%]">
+        <span>Automatically set</span>
+        <input
+          name="advancedSettings"
+          type="checkbox"
+          checked={showSettings}
+          onChange={(e) => onShowSettings(e.target.checked)}
+          id="advancedSettings"
+          className="sr-only peer"
+          value=""
+        />
+        <div
+          className="relative w-10 h-5 rounded-full bg-gray-300 transition peer-checked:bg-blue-500 after:content-[''] 
+      after:absolute after:top-0.5 after:left-0.5 after:w-4 after:h-4 after:rounded-full after:bg-white after:shadow after:transition 
+      after:duration-300 peer-checked:after:translate-x-5"
+        ></div>
+      </label>
+    </div>
+  );
+};
+
+export default ModemToggle;

src/components/SettingForms/WiFi&Modem/WiFiCard.tsx

@@ -1,78 +1,12 @@
 import Card from "../../UI/Card";
 import CardHeader from "../../UI/CardHeader";
-import { useState } from "react";
+import WiFiSettingsForm from "./WiFiSettingsForm";
-import FormGroup from "../components/FormGroup";
 
 const WiFiCard = () => {
-  const [ssid, setSsid] = useState("");
-  const [password, setPassword] = useState("");
-  const [encryption, setEncryption] = useState("WPA2");
-
   return (
     <Card className="p-4">
       <CardHeader title={"WiFi"} />
-      <div className="flex flex-col gap-4 px-2">
+      <WiFiSettingsForm />
-        <FormGroup>
-          <label
-            htmlFor="ssid"
-            className="font-medium whitespace-nowrap md:w-2/3"
-          >
-            SSID
-          </label>
-          <input
-            id="ssid"
-            name="ssid"
-            type="text"
-            className="p-2 border border-gray-400 rounded-lg flex-1 md:w-2/3"
-            placeholder="Enter SSID"
-            value={ssid}
-            onChange={(e) => setSsid(e.target.value)}
-          />
-        </FormGroup>
-        <FormGroup>
-          <label
-            htmlFor="password"
-            className="font-medium whitespace-nowrap md:w-2/3"
-          >
-            Password
-          </label>
-          <input
-            id="password"
-            name="password"
-            type="password"
-            className="p-2 border border-gray-400 rounded-lg flex-1 md:w-2/3"
-            placeholder="Enter Password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-          />
-        </FormGroup>
-        <FormGroup>
-          <label
-            htmlFor="encryption"
-            className="font-medium whitespace-nowrap md:w-2/3"
-          >
-            WPA/Encryption Type
-          </label>
-          <select
-            id="encryption"
-            name="encryption"
-            className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 md:w-2/3"
-            value={encryption}
-            onChange={(e) => setEncryption(e.target.value)}
-          >
-            <option value="WPA2">WPA2</option>
-            <option value="WPA3">WPA3</option>
-            <option value="WEP">WEP</option>
-            <option value="None">None</option>
-          </select>
-        </FormGroup>
-        <button
-          className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
-          //onClick={() => handleWiFiSave(ssid, password, encryption)}
-        >
-          Save WiFi Settings
-        </button>
-      </div>
     </Card>
   );
 };

src/components/SettingForms/WiFi&Modem/WiFiSettingsForm.tsx

@@ -0,0 +1,111 @@
+import { Field, Form, Formik } from "formik";
+import FormGroup from "../components/FormGroup";
+import type { WifiSettingValues } from "../../../types/types";
+import { useWifiAndModem } from "../../../hooks/useCameraWifiandModem";
+import { toast } from "sonner";
+
+const WiFiSettingsForm = () => {
+  const { wifiQuery, wifiMutation } = useWifiAndModem();
+
+  const wifiSSID = wifiQuery?.data?.propSSID?.value;
+  const wifiPassword = wifiQuery?.data?.propPassword?.value;
+
+  const initialValues = {
+    ssid: wifiSSID ?? "",
+    password: wifiPassword ?? "",
+    encryption: "WPA2",
+  };
+
+  const handleSubmit = (values: WifiSettingValues) => {
+    const wifiConfig = {
+      id: "ModemAndWifiManager-wifi",
+      fields: [
+        {
+          property: "propSSID",
+          value: values.ssid,
+        },
+        {
+          property: "propPassword",
+          value: values.password,
+        },
+      ],
+    };
+
+    wifiMutation.mutate(wifiConfig);
+    //todo: check what response is
+    if (wifiMutation.error) {
+      toast.error("Failed to update WiFi settings");
+      return;
+    }
+    toast.success("WiFi settings updated");
+  };
+  return (
+    <Formik
+      initialValues={initialValues}
+      onSubmit={handleSubmit}
+      enableReinitialize
+    >
+      {() => (
+        <Form className="flex flex-col space-y-5 px-2">
+          <FormGroup>
+            <label
+              htmlFor="ssid"
+              className="font-medium whitespace-nowrap md:w-2/3"
+            >
+              SSID
+            </label>
+            <Field
+              id="ssid"
+              name="ssid"
+              type="text"
+              className="p-1.5 border border-gray-400 rounded-lg"
+              placeholder="Enter SSID"
+            />
+          </FormGroup>
+          <FormGroup>
+            <label
+              htmlFor="password"
+              className="font-medium whitespace-nowrap md:w-2/3"
+            >
+              Password
+            </label>
+            <Field
+              id="password"
+              name="password"
+              type="password"
+              className="p-1.5 border border-gray-400 rounded-lg"
+              placeholder="Enter Password"
+            />
+          </FormGroup>
+          <FormGroup>
+            <label
+              htmlFor="encryption"
+              className="font-medium whitespace-nowrap md:w-2/3"
+            >
+              WPA/Encryption Type
+            </label>
+            <Field
+              id="encryption"
+              name="encryption"
+              className="p-2 border border-gray-400 rounded-lg text-white bg-[#253445] flex-1 w-2/3"
+              as="select"
+            >
+              <option value="WPA2">WPA2</option>
+              <option value="WPA3">WPA3</option>
+              <option value="WEP">WEP</option>
+              <option value="None">None</option>
+            </Field>
+          </FormGroup>
+          <button
+            type="submit"
+            className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full md:w-[50%]"
+          >
+            Save WiFi settings
+          </button>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+export default WiFiSettingsForm;

src/components/UI/Header.tsx

@@ -32,7 +32,7 @@ export default function Header() {
   };
 
   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 mb-7">
+    <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 space-y-6 md:space-y-0">
       <div className="w-30">
         <Link to={"/"}>
           <img src={Logo} alt="Logo" width={150} height={150} />

src/hooks/useCameraBlackboard.ts

@@ -2,7 +2,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { CAM_BASE } from "../utils/config";
 import type { CameraBlackBoardOptions } from "../types/types";
 
-const getBlackboardData = async () => {
+const getAllBlackboardData = async () => {
   const response = await fetch(`${CAM_BASE}/api/blackboard`);
   if (!response.ok) {
     throw new Error("Failed to fetch blackboard data");
@@ -25,7 +25,7 @@ const viewBlackboardData = async (options: CameraBlackBoardOptions) => {
 export const useCameraBlackboard = () => {
   const query = useQuery({
     queryKey: ["cameraBlackboard"],
-    queryFn: getBlackboardData,
+    queryFn: getAllBlackboardData,
   });
 
   const mutation = useMutation({

src/hooks/useCameraWifiandModem.ts

@@ -0,0 +1,83 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { CAM_BASE } from "../utils/config";
+import type { ModemConfig, WifiConfig } from "../types/types";
+
+const getWiFiSettings = async () => {
+  const response = await fetch(
+    `${CAM_BASE}/api/fetch-config?id=ModemAndWifiManager-wifi`
+  );
+  if (!response.ok) {
+    throw new Error("Cannot fetch Wifi settings");
+  }
+  return response.json();
+};
+
+const updateWifiSettings = async (wifiConfig: WifiConfig) => {
+  const response = await fetch(
+    `${CAM_BASE}/api/update-config?id=ModemAndWifiManager-wifi`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(wifiConfig),
+    }
+  );
+  if (!response.ok) {
+    throw new Error("Cannot update wifi settings");
+  }
+  return response.json();
+};
+
+const getModemSettings = async () => {
+  const response = await fetch(
+    `${CAM_BASE}/api/fetch-config?id=ModemAndWifiManager-modem`
+  );
+  if (!response.ok) {
+    throw new Error("Cannot fetch modem settings");
+  }
+  return response.json();
+};
+
+const updateModemSettings = async (modemConfig: ModemConfig) => {
+  const response = await fetch(
+    `${CAM_BASE}/api/update-config?id=ModemAndWifiManager-modem`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(modemConfig),
+    }
+  );
+  if (!response.ok) {
+    throw new Error("cannot update modem settings");
+  }
+  return response.json();
+};
+
+export const useWifiAndModem = () => {
+  const wifiQuery = useQuery({
+    queryKey: ["getWifiSettings"],
+    queryFn: getWiFiSettings,
+  });
+
+  const wifiMutation = useMutation({
+    mutationKey: ["updateWifiSettings"],
+    mutationFn: (wifiConfig: WifiConfig) => updateWifiSettings(wifiConfig),
+    onError: (error) => console.log(error),
+  });
+
+  const modemQuery = useQuery({
+    queryKey: ["getModemSettings"],
+    queryFn: getModemSettings,
+  });
+
+  const modemMutation = useMutation({
+    mutationKey: ["updateModemSettings"],
+    mutationFn: (modemConfig: ModemConfig) => updateModemSettings(modemConfig),
+  });
+
+  return {
+    wifiQuery,
+    wifiMutation,
+    modemQuery,
+    modemMutation,
+  };
+};

src/hooks/useCameraZoom.ts

@@ -0,0 +1,44 @@
+import {
+  useMutation,
+  useQuery,
+  type QueryFunctionContext,
+} from "@tanstack/react-query";
+import { CAM_BASE } from "../utils/config";
+import type { zoomConfig, ZoomInOptions } from "../types/types";
+
+async function zoomIn(options: ZoomInOptions) {
+  const response = await fetch(
+    `${CAM_BASE}/Ip${options.camera}-command?magnification=${options.multiplier}x`
+  );
+  if (!response.ok) {
+    throw new Error("Cannot reach camera zoom endpoint");
+  }
+  const data = await response.json();
+  console.log(data);
+  return;
+}
+
+async function fetchZoomInConfig({
+  queryKey,
+}: QueryFunctionContext<[string, zoomConfig]>) {
+  const [, { camera }] = queryKey;
+  console.log(camera);
+  const response = await fetch(`${CAM_BASE}/Ip${camera}-inspect`);
+  if (!response.ok) {
+    throw new Error("Cannot get camera zoom settings");
+  }
+  return response.text();
+}
+//change to string
+export const useCameraZoom = (options: zoomConfig) => {
+  const mutation = useMutation({
+    mutationKey: ["zoomIn"],
+    mutationFn: (options: ZoomInOptions) => zoomIn(options),
+  });
+
+  const query = useQuery({
+    queryKey: ["fetchZoomInConfig", options],
+    queryFn: fetchZoomInConfig,
+  });
+  return { mutation, query };
+};

src/pages/FrontCamera.tsx

@@ -2,18 +2,9 @@ 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>({
+  const [zoomLevel, setZoomLevel] = useState<number>(1);
-    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

src/types/types.ts

@@ -302,3 +302,42 @@ type AddAction = {
 };
 
 export type SoundAction = UpdateAction | AddAction;
+export type WifiSettingValues = {
+  ssid: string;
+  password: string;
+  encryption: string;
+};
+export type ModemConfigPayload = {
+  property: string;
+  value: string;
+};
+export type WifiConfigPayload = {
+  property: string;
+  value: string;
+};
+
+export type WifiConfig = {
+  id: string;
+  fields: WifiConfigPayload[];
+};
+
+export type ModemConfig = {
+  id: string;
+  fields: ModemConfigPayload[];
+};
+
+export type ZoomInOptions = {
+  camera: string;
+  multiplier: number;
+};
+
+export type zoomConfig = {
+  camera: string;
+};
+
+export type ModemSettingsType = {
+  apn: string;
+  username: string;
+  password: string;
+  authenticationType: string;
+};