From 6428a8fa39d261b6bbbb409cef57337b75278ba6 Mon Sep 17 00:00:00 2001
From: Toba Ojo <toba.ojo@mav-systems.com>
Date: Fri, 28 Nov 2025 09:00:55 +0000
Subject: [PATCH] - added tabs for camera controls

---
 .../components/CameraSettings/CameraPanel.tsx | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/features/cameras/components/CameraSettings/CameraPanel.tsx b/src/features/cameras/components/CameraSettings/CameraPanel.tsx
index fff0e53..bacfc8b 100644
--- a/src/features/cameras/components/CameraSettings/CameraPanel.tsx
+++ b/src/features/cameras/components/CameraSettings/CameraPanel.tsx
@@ -1,3 +1,4 @@
+import { Tabs, Tab, TabList, TabPanel } from "react-tabs";
 import { useEffect } from "react";
 import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
 import RegionSelector from "./RegionSelector";
@@ -33,12 +34,27 @@ const CameraPanel = ({ tabIndex }: CameraPanelProps) => {
   }, [dispatch, tabIndex]);
 
   return (
-    <RegionSelector
-      regions={regions}
-      selectedRegionIndex={selectedRegionIndex}
-      mode={mode}
-      cameraFeedID={cameraFeedID}
-    />
+    <Tabs>
+      <TabList>
+        <Tab>Target Detection</Tab>
+        <Tab>Camera Controls</Tab>
+      </TabList>
+
+      <TabPanel>
+        <RegionSelector
+          regions={regions}
+          selectedRegionIndex={selectedRegionIndex}
+          mode={mode}
+          cameraFeedID={cameraFeedID}
+        />
+      </TabPanel>
+      <TabPanel>
+        <div className="p-4">
+          <h2 className="text-lg font-semibold mb-4">Camera Controls</h2>
+          <p>Controls for camera {cameraFeedID} will go here.</p>
+        </div>
+      </TabPanel>
+    </Tabs>
   );
 };