- added reset all modal and integrate with camera settings

src/features/cameras/components/CameraSettings/RegionSelector.tsx

@@ -10,9 +10,20 @@ type RegionSelectorProps = {
   selectedRegionIndex: number;
   mode: string;
   cameraFeedID: "A" | "B" | "C";
+  isResetAllModalOpen: boolean;
+  handleClose: () => void;
+  setIsResetModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: RegionSelectorProps) => {
+const RegionSelector = ({
+  regions,
+  selectedRegionIndex,
+  mode,
+  cameraFeedID,
+  isResetAllModalOpen,
+
+  setIsResetModalOpen,
+}: RegionSelectorProps) => {
   const { colourMutation } = useColourDectection();
   const { state, dispatch } = useCameraFeedContext();
   const { blackboardMutation } = useBlackBoard();
@@ -61,8 +72,9 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
     });
   };
 
-  const handleResetAll = () => {
-    dispatch({ type: "RESET_CAMERA_FEED" });
+  const openResetModal = () => {
+    if (isResetAllModalOpen) return;
+    setIsResetModalOpen(true);
   };
 
   const handleSaveclick = () => {
@@ -228,7 +240,7 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
             Reset Region
           </button>
           <button
-            onClick={handleResetAll}
+            onClick={openResetModal}
             className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-full hover:bg-red-700 hover:cursor-pointer"
           >
             Reset All