updated forms along with addg tabs

src/components/UI/AdvancedToggle.tsx

@@ -0,0 +1,32 @@
+type AdvancedToggleProps = {
+  advancedToggle: boolean;
+  onAdvancedChange: (advancedToggle: boolean) => void;
+};
+
+const AdvancedToggle = ({
+  advancedToggle,
+  onAdvancedChange,
+}: AdvancedToggleProps) => {
+  return (
+    <div className="mx-auto">
+      <label className="flex flex-row space-x-2">
+        <span>Advanced Settings</span>
+        <input
+          name="advancedSettings"
+          type="checkbox"
+          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"
+          onClick={() => onAdvancedChange(!advancedToggle)}
+        ></div>
+      </label>
+    </div>
+  );
+};
+
+export default AdvancedToggle;

src/components/UI/CardHeader.tsx

@@ -5,7 +5,7 @@ import clsx from "clsx";
 
 type CameraOverviewHeaderProps = {
   title: string;
-  icon: IconProp;
+  icon?: IconProp;
 };
 
 const CardHeader = ({ title, icon }: CameraOverviewHeaderProps) => {
@@ -15,7 +15,7 @@ const CardHeader = ({ title, icon }: CameraOverviewHeaderProps) => {
         "w-full border-b border-gray-600 flex flex-row items-center space-x-2 md:mb-6"
       )}
     >
-      <FontAwesomeIcon icon={icon} className="size-4" />
+      {icon && <FontAwesomeIcon icon={icon} className="size-4" />}
       <h2 className="text-xl">{title}</h2>
     </div>
   );

src/components/UI/NavigationArrow.tsx

@@ -4,25 +4,48 @@ import { useNavigate } from "react-router";
 
 type NavigationArrowProps = {
   side: string;
+  settingsPage?: boolean;
 };
 
-const NavigationArrow = ({ side }: NavigationArrowProps) => {
+const NavigationArrow = ({ side, settingsPage }: NavigationArrowProps) => {
   const navigate = useNavigate();
 
   const navigationDest = (side: string) => {
-    if (side === "CameraFront") {
-      navigate("/front-camera-settings");
-    } else if (side === "Rear") {
+    if (settingsPage) {
       navigate("/");
+      return;
+    }
+
+    if (side === "TargetDetectionFront") {
+      navigate("/front-camera-settings");
     } else if (side === "TargetDetectionRear") {
       navigate("/Rear-Camera-settings");
-    } else {
-      navigate("/");
     }
   };
+
+  if (settingsPage) {
+    return (
+      <>
+        {side === "TargetDetectionFront" ? (
+          <FontAwesomeIcon
+            icon={faArrowRight}
+            className="absolute top-[50%] right-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce"
+            onClick={() => navigationDest(side)}
+          />
+        ) : (
+          <FontAwesomeIcon
+            icon={faArrowLeft}
+            className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce"
+            onClick={() => navigationDest(side)}
+          />
+        )}
+      </>
+    );
+  }
+
   return (
     <>
-      {side === "CameraFront" || side === "Rear" ? (
+      {side === "TargetDetectionFront" ? (
         <FontAwesomeIcon
           icon={faArrowLeft}
           className="absolute top-[50%] left-[2%] backdrop-blur-md hover:cursor-pointer animate-bounce"