Merge remote-tracking branch 'origin/rtViz' into simulation

app/src/components/ui/Tools.tsx

@@ -32,6 +32,7 @@ import {
   useTransformMode,
 } from "../../store/store";
 import useToggleStore from "../../store/useUIToggleStore";
+import { use3DWidget, useFloatingWidget } from "../../store/useDroppedObjectsStore";
 
 const Tools: React.FC = () => {
   const { templates } = useTemplateStore();
@@ -46,6 +47,8 @@ const Tools: React.FC = () => {
   const { isPlaying, setIsPlaying } = usePlayButtonStore();
   const { addTemplate } = useTemplateStore();
   const { selectedZone } = useSelectedZoneStore();
+  const { floatingWidget } = useFloatingWidget()
+  const { widgets3D } = use3DWidget()
 
   // wall options
   const { toggleView, setToggleView } = useToggleView();
@@ -386,13 +389,17 @@ const Tools: React.FC = () => {
                 <div className="draw-tools">
                   <div
                     className={`tool-button`}
-                    onClick={() =>
+                    onClick={() => {
+
                       handleSaveTemplate({
                         addTemplate,
+                        floatingWidget,
+                        widgets3D,
                         selectedZone,
                         templates,
                       })
                     }
+                    }
                   >
                     <SaveTemplateIcon isActive={false} />
                   </div>

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

@@ -119,7 +119,6 @@ const AddButtons: React.FC<ButtonsProps> = ({
       };
 
       // Delete the selectedZone state
-      
       setSelectedZone(updatedZone);
     } else {
       const updatePanelData = async () => {

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

@@ -2,9 +2,10 @@ import React, { useEffect, useRef, useState, useCallback } from "react";
 import { Widget } from "../../../store/useWidgetStore";
 import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons";
 import { InfoIcon } from "../../icons/ExportCommonIcons";
-import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
+import { useDroppedObjectsStore, useFloatingWidget } from "../../../store/useDroppedObjectsStore";
 import { getSelect2dZoneData } from "../../../services/realTimeVisulization/zoneData/getSelect2dZoneData";
 import { getFloatingZoneData } from "../../../services/realTimeVisulization/zoneData/getFloatingData";
+import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData";
 
 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";
@@ -72,6 +73,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   // State to track overflow visibility
   const [showLeftArrow, setShowLeftArrow] = useState(false);
   const [showRightArrow, setShowRightArrow] = useState(false);
+  const { floatingWidget, setFloatingWidget } = useFloatingWidget()
 
   // Function to calculate overflow state
   const updateOverflowState = useCallback(() => {
@@ -150,14 +152,16 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   async function handleSelect2dZoneData(zoneId: string, zoneName: string) {
     try {
       if (selectedZone?.zoneId === zoneId) {
-        console.log("Zone is already selected:", zoneName);
+
         return;
       }
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
       // Fetch data from backend
       let response = await getSelect2dZoneData(zoneId, organization);
+      console.log('response: ', response);
       let res = await getFloatingZoneData(zoneId, organization);
+      setFloatingWidget(res)
       // Set the selected zone in the store
       useDroppedObjectsStore.getState().setZone(zoneName, zoneId);
       if (Array.isArray(res)) {
@@ -177,8 +181,8 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
         zoneViewPortPosition: response.viewPortposition || {},
       });
     } catch (error) {
-      console.log('error: ', error);
-      
+
+
     }
   }
 
@@ -186,9 +190,8 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   return (
     <div
       ref={containerRef}
-      className={`zone-wrapper ${
-        selectedZone?.activeSides?.includes("bottom") && "bottom"
-      }`}
+      className={`zone-wrapper ${selectedZone?.activeSides?.includes("bottom") && "bottom"
+        }`}
     >
       {/* Left Arrow */}
       {showLeftArrow && (

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

@@ -0,0 +1,93 @@
+import React from "react";
+
+interface DistanceLinesProps {
+  obj: {
+    position: {
+      top?: number | "auto";
+      left?: number | "auto";
+      right?: number | "auto";
+      bottom?: number | "auto";
+    };
+  };
+  activeEdges: {
+    vertical: "top" | "bottom";
+    horizontal: "left" | "right";
+  } | null;
+}
+
+const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
+  if (!activeEdges) return null;
+
+  return (
+    <>
+      {activeEdges.vertical === "top" && typeof obj.position.top === "number" && (
+        <div
+          className="distance-line top"
+          style={{
+            top: 0,
+            left:
+              activeEdges.horizontal === "left"
+                ? `${(obj.position.left as number) + 125}px`
+                : `calc(100% - ${(obj.position.right as number) + 125}px)`,
+            height: `${obj.position.top}px`,
+          }}
+        >
+          <span className="distance-label">{obj.position.top.toFixed()}px</span>
+        </div>
+      )}
+
+      {activeEdges.vertical === "bottom" &&
+        typeof obj.position.bottom === "number" && (
+          <div
+            className="distance-line bottom"
+            style={{
+              bottom: 0,
+              left:
+                activeEdges.horizontal === "left"
+                  ? `${(obj.position.left as number) + 125}px`
+                  : `calc(100% - ${(obj.position.right as number) + 125}px)`,
+              height: `${obj.position.bottom}px`,
+            }}
+          >
+            <span className="distance-label">{obj.position.bottom.toFixed()}px</span>
+          </div>
+        )}
+
+      {activeEdges.horizontal === "left" &&
+        typeof obj.position.left === "number" && (
+          <div
+            className="distance-line left"
+            style={{
+              left: 0,
+              top:
+                activeEdges.vertical === "top"
+                  ? `${(obj.position.top as number) + 41.5}px`
+                  : `calc(100% - ${(obj.position.bottom as number) + 41.5}px)`,
+              width: `${obj.position.left}px`,
+            }}
+          >
+            <span className="distance-label">{obj.position.left.toFixed()}px</span>
+          </div>
+        )}
+
+      {activeEdges.horizontal === "right" &&
+        typeof obj.position.right === "number" && (
+          <div
+            className="distance-line right"
+            style={{
+              right: 0,
+              top:
+                activeEdges.vertical === "top"
+                  ? `${(obj.position.top as number) + 41.5}px`
+                  : `calc(100% - ${(obj.position.bottom as number) + 41.5}px)`,
+              width: `${obj.position.right}px`,
+            }}
+          >
+            <span className="distance-label">{obj.position.right.toFixed()}px</span>
+          </div>
+        )}
+    </>
+  );
+};
+
+export default DistanceLines;

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

@@ -0,0 +1,93 @@
+import React from "react";
+
+interface DistanceLinesProps {
+  obj: {
+    position: {
+      top?: number | "auto";
+      left?: number | "auto";
+      right?: number | "auto";
+      bottom?: number | "auto";
+    };
+  };
+  activeEdges: {
+    vertical: "top" | "bottom";
+    horizontal: "left" | "right";
+  } | null;
+}
+
+const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
+  if (!activeEdges) return null;
+
+  return (
+    <>
+      {activeEdges.vertical === "top" && typeof obj.position.top === "number" && (
+        <div
+          className="distance-line top"
+          style={{
+            top: 0,
+            left:
+              activeEdges.horizontal === "left"
+                ? `${(obj.position.left as number) + 125}px`
+                : `calc(100% - ${(obj.position.right as number) + 125}px)`,
+            height: `${obj.position.top}px`,
+          }}
+        >
+          <span className="distance-label">{obj.position.top}px</span>
+        </div>
+      )}
+
+      {activeEdges.vertical === "bottom" &&
+        typeof obj.position.bottom === "number" && (
+          <div
+            className="distance-line bottom"
+            style={{
+              bottom: 0,
+              left:
+                activeEdges.horizontal === "left"
+                  ? `${(obj.position.left as number) + 125}px`
+                  : `calc(100% - ${(obj.position.right as number) + 125}px)`,
+              height: `${obj.position.bottom}px`,
+            }}
+          >
+            <span className="distance-label">{obj.position.bottom}px</span>
+          </div>
+        )}
+
+      {activeEdges.horizontal === "left" &&
+        typeof obj.position.left === "number" && (
+          <div
+            className="distance-line left"
+            style={{
+              left: 0,
+              top:
+                activeEdges.vertical === "top"
+                  ? `${(obj.position.top as number) + 41.5}px`
+                  : `calc(100% - ${(obj.position.bottom as number) + 41.5}px)`,
+              width: `${obj.position.left}px`,
+            }}
+          >
+            <span className="distance-label">{obj.position.left}px</span>
+          </div>
+        )}
+
+      {activeEdges.horizontal === "right" &&
+        typeof obj.position.right === "number" && (
+          <div
+            className="distance-line right"
+            style={{
+              right: 0,
+              top:
+                activeEdges.vertical === "top"
+                  ? `${(obj.position.top as number) + 41.5}px`
+                  : `calc(100% - ${(obj.position.bottom as number) + 41.5}px)`,
+              width: `${obj.position.right}px`,
+            }}
+          >
+            <span className="distance-label">{obj.position.right}px</span>
+          </div>
+        )}
+    </>
+  );
+};
+
+export default DistanceLines;

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

@@ -10,79 +10,138 @@ import ProductionCapacity from "../../layout/3D-cards/cards/ProductionCapacity";
 import ReturnOfInvestment from "../../layout/3D-cards/cards/ReturnOfInvestment";
 import StateWorking from "../../layout/3D-cards/cards/StateWorking";
 import { useSelectedZoneStore } from "../../../store/useZoneStore";
+import { generateUniqueId } from "../../../functions/generateUniqueId";
+import { adding3dWidgets } from "../../../services/realTimeVisulization/zoneData/add3dWidget";
+import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData";
+import { use3DWidget } from "../../../store/useDroppedObjectsStore";
 
 export default function Dropped3dWidgets() {
-    const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
+    const { widgetSelect } = useAsset3dWidget();
     const { activeModule } = useModuleStore();
     const { raycaster, gl, scene }: ThreeState = useThree();
-    const { selectedZone } = useSelectedZoneStore(); // Get currently selected zone
-    const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption()
-    // 🔥 Store widget positions per zone
-    const [zoneWidgets, setZoneWidgets] = useState<Record<
-        string, // Zone ID
-        Record<string, [number, number, number][]> // Widget type -> Positions array
-    >>({});
+    const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
+    const { selectedZone } = useSelectedZoneStore(); // Get the currently active zone
+    // 🔥 Store widget data (id, type, position) based on the selected zone
+    const [zoneWidgetData, setZoneWidgetData] = useState<
+        Record<string, { id: string; type: string; position: [number, number, number] }[]>
+    >({});
+    const { setWidgets3D } = use3DWidget()
+    useEffect(() => {
+        if (activeModule !== "visualization") return
+        if (selectedZone.zoneName === "") return;
 
+        const email = localStorage.getItem("email") || "";
+        const organization = email?.split("@")[1]?.split(".")[0];
+
+        async function get3dWidgetData() {
+            let result = await get3dWidgetZoneData(selectedZone.zoneId, organization);
+            setWidgets3D(result)
+            // Ensure the extracted data has id, type, and position correctly mapped
+            const formattedWidgets = result.map((widget: any) => ({
+                id: widget.id,
+                type: widget.type,
+                position: widget.position,
+            }));
+
+            setZoneWidgetData((prev) => ({
+                ...prev,
+                [selectedZone.zoneId]: formattedWidgets,
+            }));
+        }
+
+        get3dWidgetData();
+
+    }, [selectedZone.zoneId,activeModule]);
+    // useEffect(() => {
+    //     // ✅ Set data only for the selected zone, keeping existing state structure
+    //     setZoneWidgetData((prev) => ({
+    //         ...prev,
+    //         [selectedZone.zoneId]: [
+    //             {
+    //                 "id": "1743322674626-50mucpb1c",
+    //                 "type": "ui-Widget 1",
+    //                 "position": [120.94655021768133, 4.142360029666558, 124.39283546121099]
+    //             },
+    //             {
+    //                 "id": "1743322682086-je2h9x33v",
+    //                 "type": "ui-Widget 2",
+    //                 "position": [131.28751045879255, 0.009999999999970264, 133.92059801984362]
+    //             }
+    //         ]
+    //     }));
+    // }, [selectedZone.zoneId]); // ✅ Only update when the zone changes
 
     useEffect(() => {
-        if (widgetSubOption === "Floating") return
-        // if (activeModule !== "visualization") return;
+        if (activeModule !== "visualization") return;
+        if (widgetSubOption === "Floating") return;
+        if (selectedZone.zoneName === "") return
         const canvasElement = gl.domElement;
-        const onDrop = (event: DragEvent) => {
+        const onDrop = async (event: DragEvent) => {
             event.preventDefault(); // Prevent default browser behavior
-            if (widgetSubOption === "3D") {
-                if (selectedZone.zoneName === "") return
-                if (!widgetSelect?.startsWith("ui")) return;
-                const group1 = scene.getObjectByName("itemsGroup");
-                if (!group1) return;
-                const Assets = group1.children
-                    .map((val) => scene.getObjectByProperty("uuid", val.uuid))
-                    .filter(Boolean) as THREE.Object3D[];
-                const intersects = raycaster.intersectObjects(scene.children, true).filter(
-                    (intersect) =>
-                        !intersect.object.name.includes("Roof") &&
-                        !intersect.object.name.includes("agv-collider") &&
-                        !intersect.object.name.includes("MeasurementReference") &&
-                        !intersect.object.userData.isPathObject &&
-                        !(intersect.object.type === "GridHelper")
-                );
-                if (intersects.length > 0) {
-                    const { x, y, z } = intersects[0].point;
+            const email = localStorage.getItem("email") || "";
+            const organization = email?.split("@")[1]?.split(".")[0];
+            if (!widgetSelect.startsWith("ui")) return;
+            const group1 = scene.getObjectByName("itemsGroup");
+            if (!group1) return;
+            const intersects = raycaster.intersectObjects(scene.children, true).filter(
+                (intersect) =>
+                    !intersect.object.name.includes("Roof") &&
+                    !intersect.object.name.includes("agv-collider") &&
+                    !intersect.object.name.includes("MeasurementReference") &&
+                    !intersect.object.userData.isPathObject &&
+                    !(intersect.object.type === "GridHelper")
+            );
+            if (intersects.length > 0) {
+                const { x, y, z } = intersects[0].point;
 
-                    setZoneWidgets((prev) => ({
-                        ...prev,
-                        [selectedZone.zoneId]: {
-                            ...(prev[selectedZone.zoneId] || {}),
-                            [widgetSelect]: [...(prev[selectedZone.zoneId]?.[widgetSelect] || []), [x, y, z]],
-                        },
-                    }));
-                }
+                // ✅ Explicitly define position as a tuple
+                const newWidget: { id: string; type: string; position: [number, number, number] } = {
+                    id: generateUniqueId(),
+                    type: widgetSelect,
+                    position: [x, y, z], // Ensures TypeScript recognizes it as a tuple
+                };
+
+
+                let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget)
+
+
+                // ✅ Store widgets uniquely for each zone
+                setZoneWidgetData((prev) => ({
+                    ...prev,
+                    [selectedZone.zoneId]: [...(prev[selectedZone.zoneId] || []), newWidget],
+                }));
             }
         };
 
+
         canvasElement.addEventListener("drop", onDrop);
         return () => {
-            canvasElement.removeEventListener("drop", onDrop)
-            // setWidgetSelect()
+            canvasElement.removeEventListener("drop", onDrop);
         };
-    }, [widgetSelect, activeModule, widgetSubOption]);
+    }, [widgetSelect, activeModule, selectedZone.zoneId, widgetSubOption]);
+
+    // Get widgets for the currently active zone
+    const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];
 
     return (
         <>
-            {zoneWidgets[selectedZone.zoneId]?.["ui-Widget 1"]?.map((pos, index) => (
-                <ProductionCapacity key={`Widget1-${index}`} position={pos} />
-            ))}
-            {zoneWidgets[selectedZone.zoneId]?.["ui-Widget 2"]?.map((pos, index) => (
-                <ReturnOfInvestment key={`Widget2-${index}`} position={pos} />
-            ))}
-            {zoneWidgets[selectedZone.zoneId]?.["ui-Widget 3"]?.map((pos, index) => (
-                <StateWorking key={`Widget3-${index}`} position={pos} />
-            ))}
-            {zoneWidgets[selectedZone.zoneId]?.["ui-Widget 4"]?.map((pos, index) => (
-                <Throughput key={`Widget4-${index}`} position={pos} />
-            ))}
+            {activeZoneWidgets.map(({ id, type, position }) => {
+                switch (type) {
+                    case "ui-Widget 1":
+                        return <ProductionCapacity key={id} position={position} />;
+                    case "ui-Widget 2":
+                        return <ReturnOfInvestment key={id} position={position} />;
+                    case "ui-Widget 3":
+                        return <StateWorking key={id} position={position} />;
+                    case "ui-Widget 4":
+                        return <Throughput key={id} position={position} />;
+                    default:
+                        return null;
+                }
+            })}
         </>
     );
 }
 
 
+

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

@@ -1,6 +1,6 @@
+
 import { WalletIcon } from "../../icons/3dChartIcons";
 import { useEffect, useRef, useState } from "react";
-import { Line } from "react-chartjs-2";
 import {
   useDroppedObjectsStore,
   Zones,
@@ -9,21 +9,51 @@ import useModuleStore from "../../../store/useModuleStore";
 import { determinePosition } from "./functions/determinePosition";
 import { getActiveProperties } from "./functions/getActiveProperties";
 import { addingFloatingWidgets } from "../../../services/realTimeVisulization/zoneData/addFloatingWidgets";
+import {
+  DublicateIcon,
+  KebabIcon,
+  DeleteIcon,
+} from "../../icons/ExportCommonIcons";
+import DistanceLines from "./DistanceLines"; // Import the DistanceLines component
+import { deleteFloatingWidgetApi } from "../../../services/realTimeVisulization/zoneData/deleteFloatingWidget";
 
 import TotalCardComponent from "../realTimeVis/floating/TotalCardComponent";
 import WarehouseThroughputComponent from "../realTimeVis/floating/WarehouseThroughputComponent";
 import FleetEfficiencyComponent from "../realTimeVis/floating/FleetEfficiencyComponent";
 import { useWidgetStore } from "../../../store/useWidgetStore";
+interface DraggingState {
+  zone: string;
+  index: number;
+  initialPosition: {
+    top: number | "auto";
+    left: number | "auto";
+    right: number | "auto";
+    bottom: number | "auto";
+  };
+}
+
+interface DraggingState {
+  zone: string;
+  index: number;
+  initialPosition: {
+    top: number | "auto";
+    left: number | "auto";
+    right: number | "auto";
+    bottom: number | "auto";
+  };
+}
 const DroppedObjects: React.FC = () => {
   const zones = useDroppedObjectsStore((state) => state.zones);
-
+  const [openKebabId, setOpenKebabId] = useState<string | null>(null);
   const updateObjectPosition = useDroppedObjectsStore(
     (state) => state.updateObjectPosition
   );
-  const [draggingIndex, setDraggingIndex] = useState<{
-    zone: string;
-    index: number;
-  } | null>(null);
+  const deleteObject = useDroppedObjectsStore((state) => state.deleteObject);
+
+  const duplicateObject = useDroppedObjectsStore((state) => state.duplicateObject);
+  const [draggingIndex, setDraggingIndex] = useState<DraggingState | null>(
+    null
+  );
   const [offset, setOffset] = useState<[number, number] | null>(null);
   const { setSelectedChartId } = useWidgetStore();
   const positionRef = useRef<[number, number] | null>(null);
@@ -41,189 +71,401 @@ const DroppedObjects: React.FC = () => {
   // Handle pointer down event
   function handlePointerDown(event: React.PointerEvent, index: number) {
 
-    const obj = zone.objects[index];
-    const container = document.getElementById("real-time-vis-canvas");
-    if (!container) return;
+    const [activeEdges, setActiveEdges] = useState<{
+      vertical: "top" | "bottom";
+      horizontal: "left" | "right";
+    } | null>(null); // State to track active edges for distance lines
+    const [currentPosition, setCurrentPosition] = useState<{
+      top: number | "auto";
+      left: number | "auto";
+      right: number | "auto";
+      bottom: number | "auto";
+    } | null>(null); // State to track the current position during drag
+    const animationRef = useRef<number | null>(null);
+    const { activeModule } = useModuleStore();
 
-    const rect = container.getBoundingClientRect();
-    const relativeX = event.clientX - rect.left;
-    const relativeY = event.clientY - rect.top;
-
-    // Determine which properties are active for this object
-    const [activeProp1, activeProp2] = getActiveProperties(obj.position);
-
-    // Calculate the offset based on the active properties
-    let offsetX = 0;
-    let offsetY = 0;
-
-    if (activeProp1 === "top") {
-      offsetY =
-        relativeY -
-        (typeof obj.position.top === "number" ? obj.position.top : 0);
-    } else if (activeProp1 === "bottom") {
-      offsetY =
-        rect.height -
-        relativeY -
-        (typeof obj.position.bottom === "number" ? obj.position.bottom : 0);
-    }
-
-    if (activeProp2 === "left") {
-      offsetX =
-        relativeX -
-        (typeof obj.position.left === "number" ? obj.position.left : 0);
-    } else if (activeProp2 === "right") {
-      offsetX =
-        rect.width -
-        relativeX -
-        (typeof obj.position.right === "number" ? obj.position.right : 0);
-    }
-
-    setDraggingIndex({ zone: zoneName, index });
-    setOffset([offsetY, offsetX]);
-  }
-
-  // Handle pointer move event
-  function handlePointerMove(event: React.PointerEvent) {
-    if (!draggingIndex || !offset) return;
-
-    const container = document.getElementById("real-time-vis-canvas");
-    if (!container) return;
-
-    const rect = container.getBoundingClientRect();
-    const relativeX = event.clientX - rect.left;
-    const relativeY = event.clientY - rect.top;
-
-    // Determine which properties are active for the dragged object
-    const obj = zone.objects[draggingIndex.index];
-    const [activeProp1, activeProp2] = getActiveProperties(obj.position);
-
-    // Calculate the new position based on the active properties
-    let newX = 0;
-    let newY = 0;
-
-    if (activeProp2 === "left") {
-      newX = relativeX - offset[1];
-    } else if (activeProp2 === "right") {
-      newX = rect.width - (relativeX + offset[1]);
-    }
-
-    if (activeProp1 === "top") {
-      newY = relativeY - offset[0];
-    } else if (activeProp1 === "bottom") {
-      newY = rect.height - (relativeY + offset[0]);
-    }
-
-    // Ensure the object stays within the canvas boundaries
-    newX = Math.max(0, Math.min(rect.width - 50, newX));
-    newY = Math.max(0, Math.min(rect.height - 50, newY));
-
-    // Update the position reference
-    positionRef.current = [newY, newX];
-
-    // Update the object's position using requestAnimationFrame for smoother animations
-    if (!animationRef.current) {
-      animationRef.current = requestAnimationFrame(() => {
-        if (positionRef.current) {
-          updateObjectPosition(zoneName, draggingIndex.index, {
-            ...obj.position,
-            [activeProp1]: positionRef.current[0],
-            [activeProp2]: positionRef.current[1],
-          });
+    // Clean up animation frame on unmount
+    useEffect(() => {
+      return () => {
+        if (animationRef.current) {
+          cancelAnimationFrame(animationRef.current);
         }
-        animationRef.current = null;
-      });
+      };
+    }, []);
+
+    const zoneEntries = Object.entries(zones);
+    if (zoneEntries.length === 0) return null;
+    const [zoneName, zone] = zoneEntries[0];
+
+    function handleDuplicate(zoneName: string, index: number) {
+      setOpenKebabId(null)
+      duplicateObject(zoneName, index); // Call the duplicateObject method from the store
     }
-  }
 
-  // Handle pointer up event
-  async function handlePointerUp(event: React.MouseEvent<HTMLDivElement>) {
-    try {
-      if (!draggingIndex || !offset) return;
+    async function handleDelete(zoneName: string, id: string, index: number) {
+      try {
+        const email = localStorage.getItem("email") || "";
+        const organization = email?.split("@")[1]?.split(".")[0];
 
-      const email = localStorage.getItem("email") || "";
-      const organization = email?.split("@")[1]?.split(".")[0];
+        let res = await deleteFloatingWidgetApi(id, organization);
+        console.log('res: ', res);
+
+        if (res.message === "FloatingWidget deleted successfully") {
+          deleteObject(zoneName, index); // Call the deleteObject method from the store
+        }
+      } catch (error) {
+        console.error("Error deleting floating widget:", error);
+      }
+    }
+
+
+    const handlePointerDown = (event: React.PointerEvent, index: number) => {
+      const obj = zone.objects[index];
       const container = document.getElementById("real-time-vis-canvas");
-      if (!container) throw new Error("Canvas container not found");
+      if (!container) return;
 
       const rect = container.getBoundingClientRect();
       const relativeX = event.clientX - rect.left;
       const relativeY = event.clientY - rect.top;
 
-      // Recalculate the position using determinePosition
-      const newPosition = determinePosition(rect, relativeX, relativeY);
+      // Determine active properties for the initial position
+      const [activeProp1, activeProp2] = getActiveProperties(obj.position);
 
-      // Validate the dragging index and get the object
-      if (!zone.objects[draggingIndex.index]) {
-        throw new Error("Dragged object not found in the zone");
-      }
-      const obj = { ...zone.objects[draggingIndex.index], position: newPosition };
-      let response = await addingFloatingWidgets(zone.zoneId, organization, obj);
-      if (response.message === "Widget updated successfully") {
-        updateObjectPosition(zoneName, draggingIndex.index, newPosition);
+      // Set active edges for distance lines
+      const vertical = activeProp1 === "top" ? "top" : "bottom";
+      const horizontal = activeProp2 === "left" ? "left" : "right";
+      setActiveEdges({ vertical, horizontal });
+
+      // Store the initial position strategy and active edges
+      setDraggingIndex({
+        zone: zoneName,
+        index,
+        initialPosition: { ...obj.position },
+      });
+
+      // Calculate offset from mouse to object edges
+      let offsetX = 0;
+      let offsetY = 0;
+
+      if (activeProp1 === "top") {
+        offsetY = relativeY - (obj.position.top as number);
+      } else {
+        offsetY = rect.height - relativeY - (obj.position.bottom as number);
       }
 
-      // Reset states
-      setDraggingIndex(null);
-      setOffset(null);
-
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current);
-        animationRef.current = null;
+      if (activeProp2 === "left") {
+        offsetX = relativeX - (obj.position.left as number);
+      } else {
+        offsetX = rect.width - relativeX - (obj.position.right as number);
       }
-    } catch (error) {
 
-    }
-  }
+      setOffset([offsetY, offsetX]);
+    };
 
+    const handlePointerMove = (event: React.PointerEvent) => {
+      if (!draggingIndex || !offset) return;
 
-  return (
-    <div onPointerMove={handlePointerMove} onPointerUp={handlePointerUp}>
-      {zone.objects.map((obj, index) => (
-        <div
-          key={`${zoneName}-${index}`}
-          className={obj.className}
-          style={{
-            position: "absolute",
-            top:
-              typeof obj.position.top !== "string"
-                ? `${obj.position.top}px`
-                : "auto",
-            left:
-              typeof obj.position.left !== "string"
-                ? `${obj.position.left}px`
-                : "auto",
-            right:
-              typeof obj.position.right !== "string"
-                ? `${obj.position.right}px`
-                : "auto",
-            bottom:
-              typeof obj.position.bottom !== "string"
-                ? `${obj.position.bottom}px`
-                : "auto",
-            // transition: draggingIndex?.index === index ? "none" : "transform 0.1s ease-out",
-          }}
-          onPointerDown={(event) => handlePointerDown(event, index)}
-          onClick={() => {
-            setSelectedChartId(obj)
-          }}
-        >
-          {obj.className === "floating total-card" ? (
+      const container = document.getElementById("real-time-vis-canvas");
+      if (!container) return;
+
+      const rect = container.getBoundingClientRect();
+      const relativeX = event.clientX - rect.left;
+      const relativeY = event.clientY - rect.top;
+
+      // Dynamically determine the current position strategy
+      const newPositionStrategy = determinePosition(rect, relativeX, relativeY);
+      const [activeProp1, activeProp2] = getActiveProperties(newPositionStrategy);
+
+      // Update active edges for distance lines
+      const vertical = activeProp1 === "top" ? "top" : "bottom";
+      const horizontal = activeProp2 === "left" ? "left" : "right";
+      setActiveEdges({ vertical, horizontal });
+
+      // Calculate new position based on the active properties
+      let newY = 0;
+      let newX = 0;
+
+      if (activeProp1 === "top") {
+        newY = relativeY - offset[0];
+      } else {
+        newY = rect.height - (relativeY + offset[0]);
+      }
+
+      if (activeProp2 === "left") {
+        newX = relativeX - offset[1];
+      } else {
+        newX = rect.width - (relativeX + offset[1]);
+      }
+
+      // Apply boundaries
+      newX = Math.max(0, Math.min(rect.width - 50, newX));
+      newY = Math.max(0, Math.min(rect.height - 50, newY));
+
+      // Create new position object
+      const newPosition = {
+        ...newPositionStrategy,
+        [activeProp1]: newY,
+        [activeProp2]: newX,
+        // Clear opposite properties
+        [activeProp1 === "top" ? "bottom" : "top"]: "auto",
+        [activeProp2 === "left" ? "right" : "left"]: "auto",
+      };
+
+      // Update the current position state for DistanceLines
+      setCurrentPosition(newPosition);
+
+      if (!animationRef.current) {
+        animationRef.current = requestAnimationFrame(() => {
+          updateObjectPosition(zoneName, draggingIndex.index, newPosition);
+          animationRef.current = null;
+        });
+      }
+    };
+
+    const handlePointerUp = async (event: React.PointerEvent<HTMLDivElement>) => {
+      try {
+        if (!draggingIndex || !offset) return;
+
+        const container = document.getElementById("real-time-vis-canvas");
+        if (!container) return;
+
+        const rect = container.getBoundingClientRect();
+        const relativeX = event.clientX - rect.left;
+        const relativeY = event.clientY - rect.top;
+
+        // Only now determine the final position strategy
+        const finalPosition = determinePosition(rect, relativeX, relativeY);
+        const [activeProp1, activeProp2] = getActiveProperties(finalPosition);
+
+        // Calculate final position using the new strategy
+        let finalY = 0;
+        let finalX = 0;
+
+        if (activeProp1 === "top") {
+          finalY = relativeY - offset[0];
+        } else {
+          finalY = rect.height - (relativeY + offset[0]);
+        }
+
+        if (activeProp2 === "left") {
+          finalX = relativeX - offset[1];
+        } else {
+          finalX = rect.width - (relativeX + offset[1]);
+        }
+
+        // Apply boundaries
+        finalX = Math.max(0, Math.min(rect.width - 50, finalX));
+        finalY = Math.max(0, Math.min(rect.height - 50, finalY));
+
+        const boundedPosition = {
+          ...finalPosition,
+          [activeProp1]: finalY,
+          [activeProp2]: finalX,
+        };
+
+        // Save to backend
+        const email = localStorage.getItem("email") || "";
+        const organization = email?.split("@")[1]?.split(".")[0];
+        const response = await addingFloatingWidgets(zone.zoneId, organization, {
+          ...zone.objects[draggingIndex.index],
+          position: boundedPosition,
+        });
+
+        if (response.message === "Widget updated successfully") {
+          updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
+        }
+
+        // Clean up
+        setDraggingIndex(null);
+        setOffset(null);
+        setActiveEdges(null); // Clear active edges
+        setCurrentPosition(null); // Reset current position
+        if (animationRef.current) {
+          cancelAnimationFrame(animationRef.current);
+          animationRef.current = null;
+        }
+      } catch (error) {
+        console.error("Error in handlePointerUp:", error);
+      }
+    };
+
+    const handleKebabClick = (id: string, event: React.MouseEvent) => {
+      event.stopPropagation();
+      setOpenKebabId((prevId) => (prevId === id ? null : id));
+    };
+
+    const renderObjectContent = (obj: any) => {
+      switch (obj.className) {
+        case "floating total-card":
+          return (
             <>
-              <TotalCardComponent object={obj} />
+              <div className="header-wrapper">
+                <div className="header">{obj.header}</div>
+                <div className="data-values">
+                  <div className="value">{obj.value}</div>
+                  <div className="per">{obj.per}</div>
+                </div>
+              </div>
+              <div className="icon">
+                <WalletIcon />
+              </div>
             </>
-          ) : obj.className === "warehouseThroughput floating" ? (
+          );
+        case "warehouseThroughput floating":
+          return (
             <>
-              <WarehouseThroughputComponent />
+              <div className="header">
+                <h2>Warehouse Throughput</h2>
+                <p>
+                  <span>(+5) more</span> in 2025
+                </p>
+              </div>
+              <div className="lineGraph" style={{ height: "100%" }}>
+                {/* <Line data={lineGraphData} options={lineGraphOptions} /> */}
+              </div>
             </>
-          ) : obj.className === "fleetEfficiency floating" ? (
+          );
+        case "fleetEfficiency floating":
+          return (
             <>
-              <FleetEfficiencyComponent object={obj} />
+              <h2 className="header">Fleet Efficiency</h2>
+              <div className="progressContainer">
+                <div className="progress">
+                  <div className="barOverflow">
+                    <div
+                      className="bar"
+                      style={{ transform: `rotate(${obj.value}deg)` }}
+                    ></div>
+                  </div>
+                </div>
+              </div>
+              <div className="scaleLabels">
+                <span>0%</span>
+                <div className="centerText">
+                  <div className="percentage">{obj.per}%</div>
+                  <div className="status">Optimal</div>
+                </div>
+                <span>100%</span>
+              </div>
             </>
-          ) : null}
-        </div>
-      ))}
-    </div>
-  );
-};
+          );
+        default:
+          return null;
+      }
+    };
+
+    return (
+      <div
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
+        className="floating-wrapper"
+      >
+        {zone.objects.map((obj, index) => (
+          <div
+            key={`${zoneName}-${index}`}
+            className={obj.className}
+            style={{
+              position: "absolute",
+              top:
+                typeof obj.position.top === "number"
+                  ? `${obj.position.top}px`
+                  : "auto",
+              left:
+                typeof obj.position.left === "number"
+                  ? `${obj.position.left}px`
+                  : "auto",
+              right:
+                typeof obj.position.right === "number"
+                  ? `${obj.position.right}px`
+                  : "auto",
+              bottom:
+                typeof obj.position.bottom === "number"
+                  ? `${obj.position.bottom}px`
+                  : "auto",
+            }}
+            onPointerDown={(event) => handlePointerDown(event, index)}
+            onClick={() => {
+              setSelectedChartId(obj)
+            }}
+          >
+            {obj.className === "floating total-card" ? (
+              <>
+                <TotalCardComponent object={obj} />
+              </>
+            ) : obj.className === "warehouseThroughput floating" ? (
+              <>
+                <WarehouseThroughputComponent />
+              </>
+            ) : obj.className === "fleetEfficiency floating" ? (
+              <>
+                <FleetEfficiencyComponent object={obj} />
+              </>
+            ) : null}
+            {renderObjectContent(obj)}
+            <div
+              className="icon kebab"
+              onClick={(event) => handleKebabClick(obj.id, event)}
+            >
+              <KebabIcon />
+            </div>
+            {openKebabId === obj.id && (
+              <div className="kebab-options">
+                <div className="dublicate btn" onClick={(event) => {
+                  event.stopPropagation();
+                  handleDuplicate(zoneName, index); // Call the duplicate handler
+                }}>
+                  <div className="icon">
+                    <DublicateIcon />
+                  </div>
+                  <div className="label">Duplicate</div>
+                </div>
+                <div className="edit btn" onClick={(event) => {
+                  event.stopPropagation();
+                  handleDelete(zoneName, obj.id, index); // Call the delete handler
+                }}>
+                  <div className="icon">
+                    <DeleteIcon />
+                  </div>
+                  <div className="label">Delete</div>
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+
+        {/* Render DistanceLines component during drag */}
+        {draggingIndex !== null &&
+          activeEdges !== null &&
+          currentPosition !== null && (
+            <DistanceLines
+              obj={{
+                position: {
+                  top:
+                    currentPosition.top !== "auto"
+                      ? currentPosition.top
+                      : undefined,
+                  bottom:
+                    currentPosition.bottom !== "auto"
+                      ? currentPosition.bottom
+                      : undefined,
+                  left:
+                    currentPosition.left !== "auto"
+                      ? currentPosition.left
+                      : undefined,
+                  right:
+                    currentPosition.right !== "auto"
+                      ? currentPosition.right
+                      : undefined,
+                },
+              }}
+              activeEdges={activeEdges}
+            />
+          )}
+      </div>
+    );
+  };
+}
 
 export default DroppedObjects;
+
+

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

@@ -63,6 +63,8 @@ const RealTimeVisulization: React.FC = () => {
       const organization = email?.split("@")[1]?.split(".")[0];
       try {
         const response = await getZone2dData(organization);
+        console.log('response: ', response);
+
         if (!Array.isArray(response)) {
           return;
         }
@@ -83,7 +85,7 @@ const RealTimeVisulization: React.FC = () => {
         );
         setZonesData(formattedData);
       } catch (error) {
-        console.log("error: ", error);
+
       }
     }
 
@@ -109,7 +111,7 @@ const RealTimeVisulization: React.FC = () => {
     });
   }, [selectedZone]);
 
-  useEffect(() => {}, [floatingWidgets]);
+  // useEffect(() => {}, [floatingWidgets]);
 
   const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
     try {
@@ -135,6 +137,7 @@ const RealTimeVisulization: React.FC = () => {
         id: generateUniqueId(),
         position: determinePosition(canvasRect, relativeX, relativeY),
       };
+      console.log('newObject: ', newObject);
 
       let response = await addingFloatingWidgets(
         selectedZone.zoneId,
@@ -171,7 +174,7 @@ const RealTimeVisulization: React.FC = () => {
           ],
         },
       }));
-    } catch (error) {}
+    } catch (error) { }
   };
 
   return (
@@ -198,7 +201,8 @@ const RealTimeVisulization: React.FC = () => {
       >
         <Scene />
       </div>
-      <DroppedObjects />
+      {activeModule === "visualization" && selectedZone.zoneName !== "" && <DroppedObjects />}
+      {/* <DroppedObjects /> */}
       {activeModule === "visualization" && (
         <>
           <DisplayZone

app/src/components/ui/componets/functions/determinePosition.ts

@@ -1,3 +1,70 @@
+// export function determinePosition(
+//   canvasRect: DOMRect,
+//   relativeX: number,
+//   relativeY: number
+// ): {
+//   top: number | "auto";
+//   left: number | "auto";
+//   right: number | "auto";
+//   bottom: number | "auto";
+// } {
+//   // Calculate the midpoints of the canvas
+//   const centerX = canvasRect.width / 2;
+//   const centerY = canvasRect.height / 2;
+
+//   // Initialize position with default values
+//   let position: {
+//     top: number | "auto";
+//     left: number | "auto";
+//     right: number | "auto";
+//     bottom: number | "auto";
+//   };
+
+//   if (relativeY < centerY) {
+//     // Top half
+//     if (relativeX < centerX) {
+//       // Left side
+//       position = {
+//         top: relativeY,
+//         left: relativeX,
+//         right: "auto",
+//         bottom: "auto",
+//       };
+//     } else {
+//       // Right side
+//       position = {
+//         top: relativeY,
+//         right: canvasRect.width - relativeX,
+//         left: "auto",
+//         bottom: "auto",
+//       };
+//     }
+//   } else {
+//     // Bottom half
+//     if (relativeX < centerX) {
+//       // Left side
+//       position = {
+//         bottom: canvasRect.height - relativeY,
+//         left: relativeX,
+//         right: "auto",
+//         top: "auto",
+//       };
+//     } else {
+//       // Right side
+//       position = {
+//         bottom: canvasRect.height - relativeY,
+//         right: canvasRect.width - relativeX,
+//         left: "auto",
+//         top: "auto",
+//       };
+//     }
+//   }
+
+//   return position;
+// }
+
+
+
 export function determinePosition(
   canvasRect: DOMRect,
   relativeX: number,
@@ -8,11 +75,9 @@ export function determinePosition(
   right: number | "auto";
   bottom: number | "auto";
 } {
-  // Calculate the midpoints of the canvas
   const centerX = canvasRect.width / 2;
   const centerY = canvasRect.height / 2;
 
-  // Initialize position with default values
   let position: {
     top: number | "auto";
     left: number | "auto";
@@ -21,9 +86,8 @@ export function determinePosition(
   };
 
   if (relativeY < centerY) {
-    // Top half
     if (relativeX < centerX) {
-      // Left side
+      console.log("Top-left");
       position = {
         top: relativeY,
         left: relativeX,
@@ -31,7 +95,7 @@ export function determinePosition(
         bottom: "auto",
       };
     } else {
-      // Right side
+      console.log("Top-right");
       position = {
         top: relativeY,
         right: canvasRect.width - relativeX,
@@ -40,9 +104,8 @@ export function determinePosition(
       };
     }
   } else {
-    // Bottom half
     if (relativeX < centerX) {
-      // Left side
+      console.log("Bottom-left");
       position = {
         bottom: canvasRect.height - relativeY,
         left: relativeX,
@@ -50,7 +113,7 @@ export function determinePosition(
         top: "auto",
       };
     } else {
-      // Right side
+      console.log("Bottom-right");
       position = {
         bottom: canvasRect.height - relativeY,
         right: canvasRect.width - relativeX,
@@ -61,4 +124,4 @@ export function determinePosition(
   }
 
   return position;
-}
+}

app/src/components/ui/componets/functions/getActiveProperties.ts

@@ -1,17 +1,11 @@
-export const getActiveProperties = (position: {
-  top: number | "auto";
-  left: number | "auto";
-  right: number | "auto";
-  bottom: number | "auto";
-}) => {
-  let activeProps: ["top", "left"] | ["bottom", "right"] = ["top", "left"]; // Default to top-left
-
-  if (
-    typeof position.bottom !== "string" &&
-    typeof position.right !== "string"
-  ) {
-    activeProps = ["bottom", "right"];
+export function getActiveProperties(position: any): [string, string] {
+  if (position.top !== "auto" && position.left !== "auto") {
+    return ["top", "left"]; // Top-left
+  } else if (position.top !== "auto" && position.right !== "auto") {
+    return ["top", "right"]; // Top-right
+  } else if (position.bottom !== "auto" && position.left !== "auto") {
+    return ["bottom", "left"]; // Bottom-left
+  } else {
+    return ["bottom", "right"]; // Bottom-right
   }
-
-  return activeProps;
-};
+}

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

@@ -0,0 +1,29 @@
+// import { useSelectedZoneStore } from "../../../store/useZoneStore";
+
+
+// type HandleDropTemplateProps = {
+//   templateId: string;
+// };
+
+// export const handleDropTemplate = ({ templateId }: HandleDropTemplateProps): void => {
+//   const { getTemplate } = useTemplateStore.getState();
+//   const { setSelectedZone } = useSelectedZoneStore.getState();
+
+//   // Find the template by ID
+//   const template: Template | undefined = getTemplate(templateId);
+
+//   if (!template) {
+//     console.error("Template not found!");
+//     return;
+//   }
+
+//   // Update the selected zone with the template data
+//   setSelectedZone((prev) => ({
+//     ...prev,
+//     panelOrder: template.panelOrder,
+//     activeSides: Array.from(new Set([...prev.activeSides, ...template.panelOrder])),
+//     widgets: template.widgets, // Keep widget structure the same
+//   }));
+
+//   console.log("Dropped template applied:", template);
+// };