deletepanel added

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

@@ -6,6 +6,7 @@ import {
 } from "../../icons/RealTimeVisulationIcons";
 import { panelData } from "../../../services/realTimeVisulization/zoneData/panel";
 import { AddIcon } from "../../icons/ExportCommonIcons";
+import { deletePanelApi } from "../../../services/realTimeVisulization/zoneData/deletePanel";
 
 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";
@@ -34,7 +35,7 @@ interface ButtonsProps {
       zoneName: string;
       activeSides: Side[];
       panelOrder: Side[];
-  
+
       lockedPanels: Side[];
       zoneId: string;
       zoneViewPortTarget: number[];
@@ -103,8 +104,11 @@ const AddButtons: React.FC<ButtonsProps> = ({
   };
 
   // Function to handle "+" button click
-  const handlePlusButtonClick = (side: Side) => {
+  const handlePlusButtonClick = async (side: Side) => {
+
     if (selectedZone.activeSides.includes(side)) {
+      const email = localStorage.getItem("email") || "";
+      const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value
       // If the panel is already active, remove all widgets and close the panel
       const cleanedWidgets = selectedZone.widgets.filter(
         (widget) => widget.panel !== side
@@ -118,8 +122,14 @@ const AddButtons: React.FC<ButtonsProps> = ({
         panelOrder: newActiveSides,
       };
 
+      let response = await deletePanelApi(selectedZone.zoneId, side, organization)
+
+      if (response.message === 'Panel deleted successfully') {
+
+        setSelectedZone(updatedZone);
+      }
+
       // Delete the selectedZone state
-      setSelectedZone(updatedZone);
     } else {
       const updatePanelData = async () => {
         try {
@@ -140,13 +150,15 @@ const AddButtons: React.FC<ButtonsProps> = ({
 
           // API call
           const response = await panelData(organization, selectedZone.zoneId, newActiveSides);
-          
+
+          if (response.message === 'Panels created successfully') {
+            setSelectedZone(updatedZone);
+          }
 
           // Update state
-          
-          setSelectedZone(updatedZone);
+
         } catch (error) {
-          
+
         }
       };
 

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

@@ -152,7 +152,6 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   async function handleSelect2dZoneData(zoneId: string, zoneName: string) {
     try {
       if (selectedZone?.zoneId === zoneId) {
-
         return;
       }
       const email = localStorage.getItem("email") || "";
@@ -161,6 +160,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
       let response = await getSelect2dZoneData(zoneId, organization);
       console.log('response: ', response);
       let res = await getFloatingZoneData(zoneId, organization);
+      console.log('res: ', res);
       setFloatingWidget(res)
       // Set the selected zone in the store
       useDroppedObjectsStore.getState().setZone(zoneName, zoneId);

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

@@ -96,7 +96,7 @@ const DroppedObjects: React.FC = () => {
       console.log('res: ', res);
 
       if (res.message === "FloatingWidget deleted successfully") {
-        deleteObject(zoneName, index); // Call the deleteObject method from the store
+        deleteObject(zoneName,id, index); // Call the deleteObject method from the store
       }
     } catch (error) {
       console.error("Error deleting floating widget:", error);
@@ -255,6 +255,7 @@ const DroppedObjects: React.FC = () => {
         ...zone.objects[draggingIndex.index],
         position: boundedPosition,
       });
+      console.log('response: ', response);
 
       if (response.message === "Widget updated successfully") {
         updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
@@ -386,10 +387,13 @@ const DroppedObjects: React.FC = () => {
               <FleetEfficiencyComponent object={obj} />
             </>
           ) : null}
-          {renderObjectContent(obj)}
+          {/* {renderObjectContent(obj)} */}
           <div
             className="icon kebab"
-            onClick={(event) => handleKebabClick(obj.id, event)}
+            onClick={(event) => {
+              event.stopPropagation();
+              handleKebabClick(obj.id, event)
+            }}
           >
             <KebabIcon />
           </div>