zone assets camera updation and rename.panel api added

app/src/components/ui/componets/AddButtons.tsx

@@ -8,6 +8,8 @@ import { panelData } from "../../../services/realTimeVisulization/zoneData/panel
 import { AddIcon } from "../../icons/ExportCommonIcons";
 import { deletePanelApi } from "../../../services/realTimeVisulization/zoneData/deletePanel";
 import { useSocketStore } from "../../../store/store";
+import { clearPanel } from "../../../services/realTimeVisulization/zoneData/clearPanel";
+import { lockPanel } from "../../../services/realTimeVisulization/zoneData/lockPanel";
 
 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";
@@ -64,8 +66,10 @@ const AddButtons: React.FC<ButtonsProps> = ({
   // Local state to track hidden panels
 
   // Function to toggle lock/unlock a panel
-  const toggleLockPanel = (side: Side) => {
+  const toggleLockPanel = async (side: Side) => {
     console.log('side: ', side);
+    const email = localStorage.getItem("email") || "";
+    const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
     //add api
     const newLockedPanels = selectedZone.lockedPanels.includes(side)
       ? selectedZone.lockedPanels.filter((panel) => panel !== side)
@@ -76,12 +80,28 @@ const AddButtons: React.FC<ButtonsProps> = ({
       lockedPanels: newLockedPanels,
     };
 
-    // Update the selectedZone state
+    let lockedPanel = {
+      organization: organization,
+      lockedPanel: newLockedPanels,
+      zoneId: selectedZone.zoneId,
+    };
+    if (visualizationSocket) {
+      visualizationSocket.emit("v2:viz-panel:locked", lockedPanel);
+    }
+
     setSelectedZone(updatedZone);
+    // let response = await lockPanel(selectedZone.zoneId, organization, newLockedPanels)
+    // console.log('response: ', response);
+    // if (response.message === 'locked panel updated successfully') {
+    //   // Update the selectedZone state
+    //   setSelectedZone(updatedZone);
+    // }
+
   };
 
   // Function to toggle visibility of a panel
   const toggleVisibility = (side: Side) => {
+
     const isHidden = hiddenPanels.includes(side);
     if (isHidden) {
       // If the panel is already hidden, remove it from the hiddenPanels array
@@ -93,19 +113,45 @@ const AddButtons: React.FC<ButtonsProps> = ({
   };
 
   // Function to clean all widgets from a panel
-  const cleanPanel = (side: Side) => {
+  const cleanPanel = async (side: Side) => {
     //add api
     console.log('side: ', side);
+    const email = localStorage.getItem("email") || "";
+    const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
+
+    let clearPanel = {
+      organization: organization,
+      panelName: side,
+      zoneId: selectedZone.zoneId,
+    };
+    if (visualizationSocket) {
+      visualizationSocket.emit("v2:viz-panel:clear", clearPanel);
+    }
     const cleanedWidgets = selectedZone.widgets.filter(
       (widget) => widget.panel !== side
     );
-
     const updatedZone = {
       ...selectedZone,
       widgets: cleanedWidgets,
     };
     // Update the selectedZone state
+    console.log('updatedZone: ', updatedZone);
     setSelectedZone(updatedZone);
+
+    // let response = await clearPanel(selectedZone.zoneId, organization, side)
+    // console.log('response: ', response);
+    // if (response.message === 'PanelWidgets cleared successfully') {
+
+    //   const cleanedWidgets = selectedZone.widgets.filter(
+    //     (widget) => widget.panel !== side
+    //   );
+    //   const updatedZone = {
+    //     ...selectedZone,
+    //     widgets: cleanedWidgets,
+    //   };
+    //   // Update the selectedZone state
+    //   setSelectedZone(updatedZone);
+    // }
   };
 
   // Function to handle "+" button click
@@ -185,7 +231,7 @@ const AddButtons: React.FC<ButtonsProps> = ({
         // } else {
         //
         // }
-      } catch (error) {}
+      } catch (error) { }
     }
   };
 
@@ -196,9 +242,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
           <div key={side} className={`side-button-container ${side}`}>
             {/* "+" Button */}
             <button
-              className={`side-button ${side}${
-                selectedZone.activeSides.includes(side) ? " active" : ""
-              }`}
+              className={`side-button ${side}${selectedZone.activeSides.includes(side) ? " active" : ""
+                }`}
               onClick={() => handlePlusButtonClick(side)}
               title={
                 selectedZone.activeSides.includes(side)
@@ -216,9 +261,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
               <div className="extra-Bs">
                 {/* Hide Panel */}
                 <div
-                  className={`icon ${
-                    hiddenPanels.includes(side) ? "active" : ""
-                  }`}
+                  className={`icon ${hiddenPanels.includes(side) ? "active" : ""
+                    }`}
                   title={
                     hiddenPanels.includes(side) ? "Show Panel" : "Hide Panel"
                   }
@@ -244,9 +288,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
 
                 {/* Lock/Unlock Panel */}
                 <div
-                  className={`icon ${
-                    selectedZone.lockedPanels.includes(side) ? "active" : ""
-                  }`}
+                  className={`icon ${selectedZone.lockedPanels.includes(side) ? "active" : ""
+                    }`}
                   title={
                     selectedZone.lockedPanels.includes(side)
                       ? "Unlock Panel"