Merge remote-tracking branch 'origin/main' into simulation-agv

2025-04-04 09:46:48 +05:30
parent 37f912a6f1 719cfd04c4
commit bb4f846528
50 changed files with 3905 additions and 978 deletions
--- a/app/src/components/layout/3D-cards/CardsScene.tsx
+++ b/app/src/components/layout/3D-cards/CardsScene.tsx
@@ -8,7 +8,7 @@ import StateWorking from "./cards/StateWorking";
 const CardsScene = () => {
  return (
    <div className="cards-scene" style={{ width: "100%", height: "100%" }}>
-      <Canvas>
+      {/* <Canvas> */}
        {/* 3d-cards */}

        {/* <ProductionCapacity /> */}
@@ -16,8 +16,8 @@ const CardsScene = () => {
        {/* <StateWorking /> */}
        {/* <Throughput /> */}

-        <OrbitControls />
-      </Canvas>
+        {/* <OrbitControls /> */}
+      {/* </Canvas> */}
    </div>
  );
 };
--- a/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
+++ b/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
@@ -30,11 +30,13 @@ interface ProductionCapacityProps {
  id: string;
  type: string;
  position: [number, number, number];
+  onContextMenu?: (event: React.MouseEvent) => void;
+  // onPointerDown:any
 }

-const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ id, type, position }) => {
+const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ id, type, position, onContextMenu }) => {

-  const { selectedChartId,setSelectedChartId } = useWidgetStore();
+  const { selectedChartId, setSelectedChartId } = useWidgetStore();

  const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
  const [measurements, setmeasurements] = useState<any>({});
@@ -111,7 +113,7 @@ const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ id, type, posi
    };


-    const startStream = () => {  
+    const startStream = () => {
      socket.emit("lineInput", inputData);
    };

@@ -146,8 +148,8 @@ const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ id, type, posi
    };
  }, [measurements, duration, iotApiUrl]);

-  const fetchSavedInputes = async() => {
-    
+  const fetchSavedInputes = async () => {
+
    if (id !== "") {
      try {
        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`);
@@ -173,20 +175,18 @@ const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ id, type, posi
      fetchSavedInputes();
    }
  }
-  ,[chartMeasurements, chartDuration, widgetName])
+    , [chartMeasurements, chartDuration, widgetName])

  return (
-   <Html position={[position[0], position[1], position[2]]}
-        scale={[0.5, 0.5, 0.5]}
-        transform
-        sprite>
+    <Html position={[position[0], position[1], position[2]]}
+      scale={[0.5, 0.5, 0.5]}
+      zIndexRange={[1, 0]}
+      transform
+      sprite>
      <div className="productionCapacity-wrapper card"
-      onClick={
-        () => setSelectedChartId({
-          id: id,
-          type: type
-        })
-      }>
+        onClick={() => setSelectedChartId({ id: id, type: type })}
+        onContextMenu={onContextMenu}
+      >
        <div className="headeproductionCapacityr-wrapper">
          <div className="header">Production Capacity</div>
          <div className="production-capacity">
@@ -207,7 +207,7 @@ const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ id, type, posi
        </div>{" "}
        <div className="bar-chart charts">
          {/* Bar Chart */}
-          <Bar data={Object.keys(measurements).length > 0 ? chartData : defaultChartData } options={chartOptions} />
+          <Bar data={Object.keys(measurements).length > 0 ? chartData : defaultChartData} options={chartOptions} />
        </div>
      </div>
    </Html>
--- a/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
+++ b/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
@@ -43,10 +43,11 @@ interface ReturnOfInvestmentProps {
  id: string;
  type: string;
  position: [number, number, number];
+  onContextMenu?: (event: React.MouseEvent) => void;
 }
-const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, position }) => {
+const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, position, onContextMenu }) => {

-  const { selectedChartId,setSelectedChartId } = useWidgetStore();
+  const { selectedChartId, setSelectedChartId } = useWidgetStore();
  const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
  const [measurements, setmeasurements] = useState<any>({});
  const [duration, setDuration] = useState("1h")
@@ -138,7 +139,7 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, posit
    };


-    const startStream = () => {  
+    const startStream = () => {
      socket.emit("lineInput", inputData);
    };

@@ -155,8 +156,8 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, posit
        return {
          label: datasetKey,
          data: responseData[datasetKey]?.values ?? [],
-          borderColor: index === 0 ? "rgba(75, 192, 192, 1)": "rgba(255, 99, 132, 1)", // Light blue color
-          backgroundColor: index === 0 ? "rgba(75, 192, 192, 0.2)": "rgba(255, 99, 132, 0.2)",
+          borderColor: index === 0 ? "rgba(75, 192, 192, 1)" : "rgba(255, 99, 132, 1)", // Light blue color
+          backgroundColor: index === 0 ? "rgba(75, 192, 192, 0.2)" : "rgba(255, 99, 132, 0.2)",
          fill: true,
          tension: 0.4, // Smooth curve effect
          pointRadius: 0, // Hide dots
@@ -174,8 +175,8 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, posit
    };
  }, [measurements, duration, iotApiUrl]);

-  const fetchSavedInputes = async() => {
-    
+  const fetchSavedInputes = async () => {
+
    if (id !== "") {
      try {
        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`);
@@ -201,21 +202,18 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, posit
      fetchSavedInputes();
    }
  }
-  ,[chartMeasurements, chartDuration, widgetName])
+    , [chartMeasurements, chartDuration, widgetName])

  return (
    <Html position={[position[0], position[1], position[2]]}
      scale={[0.5, 0.5, 0.5]}
      transform
-      zIndexRange={[1,0]}
+      zIndexRange={[1, 0]}
      sprite>
      <div className="returnOfInvestment card"
-      onClick={
-        () => setSelectedChartId({
-          id: id,
-          type: type
-        })
-      }>
+        onClick={() => setSelectedChartId({ id: id, type: type })}
+        onContextMenu={onContextMenu}
+      >
        <div className="header">Return of Investment</div>
        <div className="lineGraph charts">
          {/* Smooth curve graph with two datasets */}
--- a/app/src/components/layout/3D-cards/cards/StateWorking.tsx
+++ b/app/src/components/layout/3D-cards/cards/StateWorking.tsx
@@ -7,11 +7,12 @@ import io from "socket.io-client";

 // import image from "../../../../assets/image/temp/image.png";
 interface StateWorkingProps {
-  id:string;
+  id: string;
  type: string;
  position: [number, number, number];
+  onContextMenu?: (event: React.MouseEvent) => void;
 }
-const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position }) => {
+const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, onContextMenu }) => {
  const { selectedChartId, setSelectedChartId } = useWidgetStore();
  const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
  const [measurements, setmeasurements] = useState<any>({});
@@ -38,14 +39,14 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position }) => {
      duration,
      interval: 1000,
    };
-    const startStream = () => {  
+    const startStream = () => {
      socket.emit("lastInput", inputData);
    };
    socket.on("connect", startStream);
    socket.on("lastOutput", (response) => {
      const responseData = response;
-      console.log("responceeeeeeeeeee",response);
-      
+      console.log("responceeeeeeeeeee", response);
+
      setDatas(responseData);
    });

@@ -56,8 +57,8 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position }) => {
    };
  }, [measurements, duration, iotApiUrl]);

-  const fetchSavedInputes = async() => {
-    
+  const fetchSavedInputes = async () => {
+
    if (id !== "") {
      try {
        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`);
@@ -74,8 +75,8 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position }) => {
    }
  }

-  console.log("dataaaaa",datas);
-  
+  console.log("dataaaaa", datas);
+

  useEffect(() => {
    fetchSavedInputes();
@@ -86,27 +87,24 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position }) => {
      fetchSavedInputes();
    }
  }
-  ,[chartMeasurements, chartDuration, widgetName])
+    , [chartMeasurements, chartDuration, widgetName])


  return (
    <Html position={[position[0], position[1], position[2]]}
      scale={[0.5, 0.5, 0.5]}
      transform
-      zIndexRange={[1,0]}
+      zIndexRange={[1, 0]}
      sprite>
      <div className="stateWorking-wrapper card"
-      onClick={
-        () => setSelectedChartId({
-          id: id,
-          type: type
-        })
-      }>
+        onClick={() => setSelectedChartId({ id: id, type: type })}
+        onContextMenu={onContextMenu}
+      >
        <div className="header-wrapper">
          <div className="header">
            <span>State</span>
            <span>
-            {datas?.input1 ? datas.input1 : 'input1'} <span>.</span>
+              {datas?.input1 ? datas.input1 : 'input1'} <span>.</span>
            </span>
          </div>
          <div className="img">
@@ -126,24 +124,24 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position }) => {
            <div className="key">{datas?.input2 ? datas.input2 : 'data'}</div>
          </div>
          <div className="data-table">
-          <div className="data">{measurements?.input3?.fields ? measurements.input3.fields : 'input3'}</div>
-          <div className="key">{datas?.input3 ? datas.input3 : 'data'}</div>
+            <div className="data">{measurements?.input3?.fields ? measurements.input3.fields : 'input3'}</div>
+            <div className="key">{datas?.input3 ? datas.input3 : 'data'}</div>
          </div>
          <div className="data-table">
-          <div className="data">{measurements?.input4?.fields ? measurements.input4.fields : 'input4'}</div>
-          <div className="key">{datas?.input4 ? datas.input4 : 'data'}</div>
+            <div className="data">{measurements?.input4?.fields ? measurements.input4.fields : 'input4'}</div>
+            <div className="key">{datas?.input4 ? datas.input4 : 'data'}</div>
          </div>
          <div className="data-table">
-          <div className="data">{measurements?.input5?.fields ? measurements.input5.fields : 'input5'}</div>
-          <div className="key">{datas?.input5 ? datas.input5 : 'data'}</div>
+            <div className="data">{measurements?.input5?.fields ? measurements.input5.fields : 'input5'}</div>
+            <div className="key">{datas?.input5 ? datas.input5 : 'data'}</div>
          </div>
          <div className="data-table">
-          <div className="data">{measurements?.input6?.fields ? measurements.input6.fields : 'input6'}</div>
-          <div className="key">{datas?.input6 ? datas.input6 : 'data'}</div>
+            <div className="data">{measurements?.input6?.fields ? measurements.input6.fields : 'input6'}</div>
+            <div className="key">{datas?.input6 ? datas.input6 : 'data'}</div>
          </div>
          <div className="data-table">
-          <div className="data">{measurements?.input7?.fields ? measurements.input7.fields : 'input7'}</div>
-          <div className="key">{datas?.input7 ? datas.input7 : 'data'}</div>
+            <div className="data">{measurements?.input7?.fields ? measurements.input7.fields : 'input7'}</div>
+            <div className="key">{datas?.input7 ? datas.input7 : 'data'}</div>
          </div>
        </div>
      </div>
--- a/app/src/components/layout/3D-cards/cards/Throughput.tsx
+++ b/app/src/components/layout/3D-cards/cards/Throughput.tsx
@@ -45,11 +45,12 @@ interface ThroughputProps {
  id: string;
  type: string;
  position: [number, number, number];
+  onContextMenu?: (event: React.MouseEvent) => void;
 }

-const Throughput: React.FC<ThroughputProps> = ({ id, type, position }) => {
+const Throughput: React.FC<ThroughputProps> = ({ id, type, position, onContextMenu }) => {

-  const { selectedChartId,setSelectedChartId } = useWidgetStore();
+  const { selectedChartId, setSelectedChartId } = useWidgetStore();
  const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
  const [measurements, setmeasurements] = useState<any>({});
  const [duration, setDuration] = useState("1h")
@@ -121,7 +122,7 @@ const Throughput: React.FC<ThroughputProps> = ({ id, type, position }) => {
    };


-    const startStream = () => {  
+    const startStream = () => {
      socket.emit("lineInput", inputData);
    };

@@ -154,8 +155,8 @@ const Throughput: React.FC<ThroughputProps> = ({ id, type, position }) => {
    };
  }, [measurements, duration, iotApiUrl]);

-  const fetchSavedInputes = async() => {
-    
+  const fetchSavedInputes = async () => {
+
    if (id !== "") {
      try {
        const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}`);
@@ -181,7 +182,7 @@ const Throughput: React.FC<ThroughputProps> = ({ id, type, position }) => {
      fetchSavedInputes();
    }
  }
-  ,[chartMeasurements, chartDuration, widgetName])
+    , [chartMeasurements, chartDuration, widgetName])

  return (
    <Html position={[position[0], position[1], position[2]]}
@@ -189,13 +190,10 @@ const Throughput: React.FC<ThroughputProps> = ({ id, type, position }) => {
      transform
      zIndexRange={[1, 0]}
      sprite>
-      <div className="throughput-wrapper" 
-      onClick={
-        () => setSelectedChartId({
-          id: id,
-          type: type
-        })
-      }>
+      <div className="throughput-wrapper"
+        onClick={() => setSelectedChartId({ id: id, type: type })}
+        onContextMenu={onContextMenu}
+      >
        <div className="header">{name}</div>
        <div className="display-value">
          <div className="left">
--- a/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx
@@ -101,7 +101,6 @@ const ProgressBarWidget = ({
    </div>
  );
 };
-console.log(chartTypes, "chartTypes");

 const Widgets2D = () => {
  return (
--- a/app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx
@@ -10,6 +10,7 @@ import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
 import LabledDropdown from "../../../ui/inputs/LabledDropdown";
 import { handleResize } from "../../../../functions/handleResizePannel";
 import {
+  useFloorItems,
  useSelectedActionSphere,
  useSelectedPath,
  useSimulationPaths,
@@ -17,11 +18,14 @@ import {
 import * as THREE from "three";
 import * as Types from "../../../../types/world/worldTypes";
 import InputToggle from "../../../ui/inputs/InputToggle";
+import { setFloorItemApi } from "../../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
+import { setEventApi } from "../../../../services/factoryBuilder/assest/floorAsset/setEventsApt";

 const ConveyorMechanics: React.FC = () => {
  const { selectedActionSphere } = useSelectedActionSphere();
  const { selectedPath, setSelectedPath } = useSelectedPath();
  const { simulationPaths, setSimulationPaths } = useSimulationPaths();
+  const { floorItems, setFloorItems } = useFloorItems();

  const actionsContainerRef = useRef<HTMLDivElement>(null);
  const triggersContainerRef = useRef<HTMLDivElement>(null);
@@ -36,6 +40,19 @@ const ConveyorMechanics: React.FC = () => {
      .find((point) => point.uuid === selectedActionSphere.point.uuid);
  }, [selectedActionSphere, simulationPaths]);

+  const updateBackend = async (updatedPath: Types.ConveyorEventsSchema | undefined) => {
+    if (!updatedPath) return;
+    // const email = localStorage.getItem("email");
+    // const organization = email ? email.split("@")[1].split(".")[0] : "";
+    // console.log('updatedPath: ', updatedPath);
+    // const a = await setEventApi(
+    //   organization,
+    //   updatedPath.modeluuid,
+    //   updatedPath.points
+    // );
+    // console.log('a: ', a);
+  }
+
  const handleAddAction = () => {
    if (!selectedActionSphere) return;

@@ -65,6 +82,15 @@ const ConveyorMechanics: React.FC = () => {
      return path;
    });

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);
  };

@@ -74,21 +100,30 @@ const ConveyorMechanics: React.FC = () => {
    const updatedPaths = simulationPaths.map((path) =>
      path.type === "Conveyor"
        ? {
-            ...path,
-            points: path.points.map((point) =>
-              point.uuid === selectedActionSphere.point.uuid
-                ? {
-                    ...point,
-                    actions: point.actions.filter(
-                      (action) => action.uuid !== uuid
-                    ),
-                  }
-                : point
-            ),
-          }
+          ...path,
+          points: path.points.map((point) =>
+            point.uuid === selectedActionSphere.point.uuid
+              ? {
+                ...point,
+                actions: point.actions.filter(
+                  (action) => action.uuid !== uuid
+                ),
+              }
+              : point
+          ),
+        }
        : path
    );

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);
  };

@@ -98,36 +133,45 @@ const ConveyorMechanics: React.FC = () => {
    const updatedPaths = simulationPaths.map((path) =>
      path.type === "Conveyor"
        ? {
-            ...path,
-            points: path.points.map((point) =>
-              point.uuid === selectedActionSphere.point.uuid
-                ? {
-                    ...point,
-                    actions: point.actions.map((action) =>
-                      action.uuid === uuid
-                        ? {
-                            ...action,
-                            type: actionType,
-                            material:
-                              actionType === "Spawn" || actionType === "Swap"
-                                ? "Inherit"
-                                : action.material,
-                            delay:
-                              actionType === "Delay" ? "Inherit" : action.delay,
-                            spawnInterval:
-                              actionType === "Spawn"
-                                ? "Inherit"
-                                : action.spawnInterval,
-                          }
-                        : action
-                    ),
-                  }
-                : point
-            ),
-          }
+          ...path,
+          points: path.points.map((point) =>
+            point.uuid === selectedActionSphere.point.uuid
+              ? {
+                ...point,
+                actions: point.actions.map((action) =>
+                  action.uuid === uuid
+                    ? {
+                      ...action,
+                      type: actionType,
+                      material:
+                        actionType === "Spawn" || actionType === "Swap"
+                          ? "Inherit"
+                          : action.material,
+                      delay:
+                        actionType === "Delay" ? "Inherit" : action.delay,
+                      spawnInterval:
+                        actionType === "Spawn"
+                          ? "Inherit"
+                          : action.spawnInterval,
+                    }
+                    : action
+                ),
+              }
+              : point
+          ),
+        }
        : path
    );

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);

    // Update the selected item to reflect changes
@@ -156,24 +200,33 @@ const ConveyorMechanics: React.FC = () => {
    const updatedPaths = simulationPaths.map((path) =>
      path.type === "Conveyor"
        ? {
-            ...path,
-            points: path.points.map((point) =>
-              point.uuid === selectedActionSphere.point.uuid
-                ? {
-                    ...point,
-                    actions: point.actions.map((action) =>
-                      action.uuid === uuid &&
-                      (action.type === "Spawn" || action.type === "Swap")
-                        ? { ...action, material }
-                        : action
-                    ),
-                  }
-                : point
-            ),
-          }
+          ...path,
+          points: path.points.map((point) =>
+            point.uuid === selectedActionSphere.point.uuid
+              ? {
+                ...point,
+                actions: point.actions.map((action) =>
+                  action.uuid === uuid &&
+                    (action.type === "Spawn" || action.type === "Swap")
+                    ? { ...action, material }
+                    : action
+                ),
+              }
+              : point
+          ),
+        }
        : path
    );

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);

    // Update selected item if it's the current action
@@ -194,21 +247,30 @@ const ConveyorMechanics: React.FC = () => {
    const updatedPaths = simulationPaths.map((path) =>
      path.type === "Conveyor"
        ? {
-            ...path,
-            points: path.points.map((point) =>
-              point.uuid === selectedActionSphere.point.uuid
-                ? {
-                    ...point,
-                    actions: point.actions.map((action) =>
-                      action.uuid === uuid ? { ...action, delay } : action
-                    ),
-                  }
-                : point
-            ),
-          }
+          ...path,
+          points: path.points.map((point) =>
+            point.uuid === selectedActionSphere.point.uuid
+              ? {
+                ...point,
+                actions: point.actions.map((action) =>
+                  action.uuid === uuid ? { ...action, delay } : action
+                ),
+              }
+              : point
+          ),
+        }
        : path
    );

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);
  };

@@ -221,23 +283,32 @@ const ConveyorMechanics: React.FC = () => {
    const updatedPaths = simulationPaths.map((path) =>
      path.type === "Conveyor"
        ? {
-            ...path,
-            points: path.points.map((point) =>
-              point.uuid === selectedActionSphere.point.uuid
-                ? {
-                    ...point,
-                    actions: point.actions.map((action) =>
-                      action.uuid === uuid
-                        ? { ...action, spawnInterval }
-                        : action
-                    ),
-                  }
-                : point
-            ),
-          }
+          ...path,
+          points: path.points.map((point) =>
+            point.uuid === selectedActionSphere.point.uuid
+              ? {
+                ...point,
+                actions: point.actions.map((action) =>
+                  action.uuid === uuid
+                    ? { ...action, spawnInterval }
+                    : action
+                ),
+              }
+              : point
+          ),
+        }
        : path
    );

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);
  };

@@ -248,6 +319,15 @@ const ConveyorMechanics: React.FC = () => {
      path.modeluuid === selectedPath.path.modeluuid ? { ...path, speed } : path
    );

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);
    setSelectedPath({ ...selectedPath, path: { ...selectedPath.path, speed } });
  };
@@ -258,26 +338,35 @@ const ConveyorMechanics: React.FC = () => {
    const updatedPaths = simulationPaths.map((path) =>
      path.type === "Conveyor"
        ? {
-            ...path,
-            points: path.points.map((point) => {
-              if (point.uuid === selectedActionSphere.point.uuid) {
-                const triggerIndex = point.triggers.length;
-                const newTrigger = {
-                  uuid: THREE.MathUtils.generateUUID(),
-                  name: `Trigger ${triggerIndex + 1}`,
-                  type: "",
-                  bufferTime: 0,
-                  isUsed: false,
-                };
+          ...path,
+          points: path.points.map((point) => {
+            if (point.uuid === selectedActionSphere.point.uuid) {
+              const triggerIndex = point.triggers.length;
+              const newTrigger = {
+                uuid: THREE.MathUtils.generateUUID(),
+                name: `Trigger ${triggerIndex + 1}`,
+                type: "",
+                bufferTime: 0,
+                isUsed: false,
+              };

-                return { ...point, triggers: [...point.triggers, newTrigger] };
-              }
-              return point;
-            }),
-          }
+              return { ...point, triggers: [...point.triggers, newTrigger] };
+            }
+            return point;
+          }),
+        }
        : path
    );

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);
  };

@@ -287,21 +376,30 @@ const ConveyorMechanics: React.FC = () => {
    const updatedPaths = simulationPaths.map((path) =>
      path.type === "Conveyor"
        ? {
-            ...path,
-            points: path.points.map((point) =>
-              point.uuid === selectedActionSphere.point.uuid
-                ? {
-                    ...point,
-                    triggers: point.triggers.filter(
-                      (trigger) => trigger.uuid !== uuid
-                    ),
-                  }
-                : point
-            ),
-          }
+          ...path,
+          points: path.points.map((point) =>
+            point.uuid === selectedActionSphere.point.uuid
+              ? {
+                ...point,
+                triggers: point.triggers.filter(
+                  (trigger) => trigger.uuid !== uuid
+                ),
+              }
+              : point
+          ),
+        }
        : path
    );

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);
  };

@@ -311,23 +409,32 @@ const ConveyorMechanics: React.FC = () => {
    const updatedPaths = simulationPaths.map((path) =>
      path.type === "Conveyor"
        ? {
-            ...path,
-            points: path.points.map((point) =>
-              point.uuid === selectedActionSphere.point.uuid
-                ? {
-                    ...point,
-                    triggers: point.triggers.map((trigger) =>
-                      trigger.uuid === uuid
-                        ? { ...trigger, type: triggerType }
-                        : trigger
-                    ),
-                  }
-                : point
-            ),
-          }
+          ...path,
+          points: path.points.map((point) =>
+            point.uuid === selectedActionSphere.point.uuid
+              ? {
+                ...point,
+                triggers: point.triggers.map((trigger) =>
+                  trigger.uuid === uuid
+                    ? { ...trigger, type: triggerType }
+                    : trigger
+                ),
+              }
+              : point
+          ),
+        }
        : path
    );

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);

    // Ensure the selectedItem is updated immediately
@@ -347,22 +454,31 @@ const ConveyorMechanics: React.FC = () => {
    const updatedPaths = simulationPaths.map((path) =>
      path.type === "Conveyor"
        ? {
-            ...path,
-            points: path.points.map((point) =>
-              point.uuid === selectedActionSphere.point.uuid
-                ? {
-                    ...point,
-                    actions: point.actions.map((action) => ({
-                      ...action,
-                      isUsed: action.uuid === uuid ? !action.isUsed : false,
-                    })),
-                  }
-                : point
-            ),
-          }
+          ...path,
+          points: path.points.map((point) =>
+            point.uuid === selectedActionSphere.point.uuid
+              ? {
+                ...point,
+                actions: point.actions.map((action) => ({
+                  ...action,
+                  isUsed: action.uuid === uuid ? !action.isUsed : false,
+                })),
+              }
+              : point
+          ),
+        }
        : path
    );

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);

    // Immediately update the selected item if it's the one being toggled
@@ -384,22 +500,31 @@ const ConveyorMechanics: React.FC = () => {
    const updatedPaths = simulationPaths.map((path) =>
      path.type === "Conveyor"
        ? {
-            ...path,
-            points: path.points.map((point) =>
-              point.uuid === selectedActionSphere.point.uuid
-                ? {
-                    ...point,
-                    triggers: point.triggers.map((trigger) => ({
-                      ...trigger,
-                      isUsed: trigger.uuid === uuid ? !trigger.isUsed : false,
-                    })),
-                  }
-                : point
-            ),
-          }
+          ...path,
+          points: path.points.map((point) =>
+            point.uuid === selectedActionSphere.point.uuid
+              ? {
+                ...point,
+                triggers: point.triggers.map((trigger) => ({
+                  ...trigger,
+                  isUsed: trigger.uuid === uuid ? !trigger.isUsed : false,
+                })),
+              }
+              : point
+          ),
+        }
        : path
    );

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);

    // Immediately update the selected item if it's the one being toggled
@@ -420,23 +545,32 @@ const ConveyorMechanics: React.FC = () => {
    const updatedPaths = simulationPaths.map((path) =>
      path.type === "Conveyor"
        ? {
-            ...path,
-            points: path.points.map((point) =>
-              point.uuid === selectedActionSphere.point.uuid
-                ? {
-                    ...point,
-                    triggers: point.triggers.map((trigger) =>
-                      trigger.uuid === uuid
-                        ? { ...trigger, bufferTime }
-                        : trigger
-                    ),
-                  }
-                : point
-            ),
-          }
+          ...path,
+          points: path.points.map((point) =>
+            point.uuid === selectedActionSphere.point.uuid
+              ? {
+                ...point,
+                triggers: point.triggers.map((trigger) =>
+                  trigger.uuid === uuid
+                    ? { ...trigger, bufferTime }
+                    : trigger
+                ),
+              }
+              : point
+          ),
+        }
        : path
    );

+    const updatedPath = updatedPaths.find(
+      (path): path is Types.ConveyorEventsSchema =>
+        path.type === "Conveyor" &&
+        path.points.some(
+          (point) => point.uuid === selectedActionSphere.point.uuid
+        )
+    );
+    updateBackend(updatedPath);
+
    setSimulationPaths(updatedPaths);

    // Immediately update selectedItem if it's the currently selected trigger
@@ -493,12 +627,11 @@ const ConveyorMechanics: React.FC = () => {
                  {selectedPoint?.actions.map((action) => (
                    <div
                      key={action.uuid}
-                      className={`list-item ${
-                        selectedItem?.type === "action" &&
+                      className={`list-item ${selectedItem?.type === "action" &&
                        selectedItem.item?.uuid === action.uuid
-                          ? "active"
-                          : ""
-                      }`}
+                        ? "active"
+                        : ""
+                        }`}
                    >
                      <div
                        className="value"
@@ -506,7 +639,7 @@ const ConveyorMechanics: React.FC = () => {
                          setSelectedItem({ type: "action", item: action })
                        }
                      >
-                        <input type="radio" name="action" id="action" defaultChecked={action.isUsed}/>
+                        <input type="radio" name="action" id="action" defaultChecked={action.isUsed} />
                        <RenameInput value={action.name} />
                      </div>
                      <div
@@ -543,12 +676,11 @@ const ConveyorMechanics: React.FC = () => {
                  {selectedPoint?.triggers.map((trigger) => (
                    <div
                      key={trigger.uuid}
-                      className={`list-item ${
-                        selectedItem?.type === "trigger" &&
+                      className={`list-item ${selectedItem?.type === "trigger" &&
                        selectedItem.item?.uuid === trigger.uuid
-                          ? "active"
-                          : ""
-                      }`}
+                        ? "active"
+                        : ""
+                        }`}
                    >
                      <div
                        className="value"
@@ -588,8 +720,8 @@ const ConveyorMechanics: React.FC = () => {
              {selectedItem.type === "action" && (
                <>
                  <InputToggle
-                    inputKey="enableTrigger"
-                    label="Enable Trigger"
+                    inputKey="enableAction"
+                    label="Enable Action"
                    value={selectedItem.item.isUsed}
                    onClick={() => handleActionToggle(selectedItem.item.uuid)}
                  />
@@ -604,19 +736,19 @@ const ConveyorMechanics: React.FC = () => {
                  {/* Only show material dropdown for Spawn/Swap actions */}
                  {(selectedItem.item.type === "Spawn" ||
                    selectedItem.item.type === "Swap") && (
-                    <LabledDropdown
-                      label={
-                        selectedItem.item.type === "Spawn"
-                          ? "Spawn Material"
-                          : "Swap Material"
-                      }
-                      defaultOption={selectedItem.item.material}
-                      options={["Inherit", "Crate", "Box"]}
-                      onSelect={(option) =>
-                        handleMaterialSelect(selectedItem.item.uuid, option)
-                      }
-                    />
-                  )}
+                      <LabledDropdown
+                        label={
+                          selectedItem.item.type === "Spawn"
+                            ? "Spawn Material"
+                            : "Swap Material"
+                        }
+                        defaultOption={selectedItem.item.material}
+                        options={["Inherit", "Crate", "Box"]}
+                        onSelect={(option) =>
+                          handleMaterialSelect(selectedItem.item.uuid, option)
+                        }
+                      />
+                    )}

                  {/* Only show delay input for Delay actions */}
                  {selectedItem.item.type === "Delay" && (
--- a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
@@ -33,7 +33,7 @@ const GlobalProperties: React.FC = () => {
  const { setPlaneValue, setGridValue, planeValue, gridValue } =
    useTileDistance();
  useEffect(() => {
-    console.log(gridValue, planeValue, "values");
+    // console.log(gridValue, planeValue, "values");
  }, [gridValue, planeValue]);
  const { socket } = useSocketStore();
  const { limitDistance, setLimitDistance } = useLimitDistance();
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx
@@ -25,7 +25,7 @@ const BarChartInput = (props: Props) => {
  useEffect(() => {
    const fetchZoneData = async () => {
      try {
-        const response = await axios.get(`http://${iotApiUrl}/getinput`);
+        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
        if (response.status === 200) {
          // console.log("dropdown data:", response.data);
          setDropDownData(response.data);
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/FleetEfficiencyInputComponent.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/FleetEfficiencyInputComponent.tsx
@@ -25,7 +25,7 @@ const FleetEfficiencyInputComponent = (props: Props) => {
  useEffect(() => {
    const fetchZoneData = async () => {
      try {
-        const response = await axios.get(`http://${iotApiUrl}/getinput`);
+        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
        if (response.status === 200) {
          // console.log("dropdown data:", response.data);
          setDropDownData(response.data);
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/FlotingWidgetInput.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/FlotingWidgetInput.tsx
@@ -25,7 +25,7 @@ const FlotingWidgetInput = (props: Props) => {
  useEffect(() => {
    const fetchZoneData = async () => {
      try {
-        const response = await axios.get(`http://${iotApiUrl}/getinput`);
+        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
        if (response.status === 200) {
          // console.log("dropdown data:", response.data);
          setDropDownData(response.data);
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/InputSelecterComponent.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/InputSelecterComponent.tsx
@@ -14,8 +14,6 @@ import { useWidgetStore } from '../../../../../store/useWidgetStore'

 const InputSelecterComponent = () => {
    const { selectedChartId } = useWidgetStore();
-    console.log('selectedChartId:',selectedChartId);
-    

  if (selectedChartId && selectedChartId.type && selectedChartId.type === 'bar' ) {
    return (
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx
@@ -144,7 +144,7 @@ const LineGrapInput = (props: Props) => {
  useEffect(() => {
    const fetchZoneData = async () => {
      try {
-        const response = await axios.get(`http://${iotApiUrl}/getinput`);
+        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
        if (response.status === 200) {
          // console.log("dropdown data:", response.data);
          setDropDownData(response.data);
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx
@@ -25,7 +25,7 @@ const PieChartInput = (props: Props) => {
  useEffect(() => {
    const fetchZoneData = async () => {
      try {
-        const response = await axios.get(`http://${iotApiUrl}/getinput`);
+        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
        if (response.status === 200) {
          // console.log("dropdown data:", response.data);
          setDropDownData(response.data);
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress1Input.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress1Input.tsx
@@ -25,7 +25,7 @@ const Progress1Input = (props: Props) => {
  useEffect(() => {
    const fetchZoneData = async () => {
      try {
-        const response = await axios.get(`http://${iotApiUrl}/getinput`);
+        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
        if (response.status === 200) {
          // console.log("dropdown data:", response.data);
          setDropDownData(response.data);
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress2Input.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress2Input.tsx
@@ -25,7 +25,7 @@ const Progress2Input = (props: Props) => {
  useEffect(() => {
    const fetchZoneData = async () => {
      try {
-        const response = await axios.get(`http://${iotApiUrl}/getinput`);
+        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
        if (response.status === 200) {
          // console.log("dropdown data:", response.data);
          setDropDownData(response.data);
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/WarehouseThroughputInputComponent.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/WarehouseThroughputInputComponent.tsx
@@ -25,7 +25,7 @@ const WarehouseThroughputInputComponent = (props: Props) => {
  useEffect(() => {
    const fetchZoneData = async () => {
      try {
-        const response = await axios.get(`http://${iotApiUrl}/getinput`);
+        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
        if (response.status === 200) {
          // console.log("dropdown data:", response.data);
          setDropDownData(response.data);
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget2InputCard3D.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget2InputCard3D.tsx
@@ -21,13 +21,11 @@ const Widget2InputCard3D = (props: Props) => {
  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
  const email = localStorage.getItem("email") || "";
  const organization = email?.split("@")[1]?.split(".")[0]
-  console.log(selectedChartId);
-  

  useEffect(() => {
    const fetchZoneData = async () => {
      try {
-        const response = await axios.get(`http://${iotApiUrl}/getinput`);
+        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
        if (response.status === 200) {
          // console.log("dropdown data:", response.data);
          setDropDownData(response.data);
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget3InputCard3D.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget3InputCard3D.tsx
@@ -19,9 +19,7 @@ const Widget3InputCard3D = () => {
  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
  const email = localStorage.getItem("email") || "";
  const organization = email?.split("@")[1]?.split(".")[0]
-  console.log(selectedChartId);
-  
-
+ 
  useEffect(() => {
    const fetchZoneData = async () => {
      try {
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget4InputCard3D.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget4InputCard3D.tsx
@@ -21,13 +21,11 @@ const Widget4InputCard3D = (props: Props) => {
  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
  const email = localStorage.getItem("email") || "";
  const organization = email?.split("@")[1]?.split(".")[0]
-  console.log(selectedChartId);
-  
-
+ 
  useEffect(() => {
    const fetchZoneData = async () => {
      try {
-        const response = await axios.get(`http://${iotApiUrl}/getinput`);
+        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
        if (response.status === 200) {
          // console.log("dropdown data:", response.data);
          setDropDownData(response.data);
--- a/app/src/components/ui/componets/DraggableWidget.tsx
+++ b/app/src/components/ui/componets/DraggableWidget.tsx
@@ -17,6 +17,7 @@ import { duplicateWidgetApi } from "../../../services/realTimeVisulization/zoneD
 import { deleteWidgetApi } from "../../../services/realTimeVisulization/zoneData/deleteWidgetApi";
 import { useClickOutside } from "./functions/handleWidgetsOuterClick";
 import { useSocketStore } from "../../../store/store";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";

 type Side = "top" | "bottom" | "left" | "right";

@@ -243,6 +244,7 @@ export const DraggableWidget = ({
  // useClickOutside(chartWidget, () => {
  //   setSelectedChartId(null);
  // });
+  const { isPlaying } = usePlayButtonStore();

  console.log('isPanelHidden: ', isPanelHidden);
  return (
@@ -250,9 +252,8 @@ export const DraggableWidget = ({
      <div
        draggable
        key={widget.id}
-        className={`chart-container ${
-          selectedChartId?.id === widget.id && "activeChart"
-        }`}
+        className={`chart-container ${(selectedChartId?.id === widget.id) && !isPlaying && "activeChart"
+          }`}
        onPointerDown={handlePointerDown}
        onDragStart={handleDragStart}
        onDragEnter={handleDragEnter}
@@ -273,9 +274,8 @@ export const DraggableWidget = ({
        {openKebabId === widget.id && (
          <div className="kebab-options" ref={widgetRef}>
            <div
-              className={`edit btn ${
-                isPanelFull(widget.panel) ? "btn-blur" : ""
-              }`}
+              className={`edit btn ${isPanelFull(widget.panel) ? "btn-blur" : ""
+                }`}
              onClick={isPanelFull(widget.panel) ? undefined : duplicateWidget}
            >
              <div className="icon">
--- a/app/src/components/ui/componets/Dropped3dWidget.tsx
+++ b/app/src/components/ui/componets/Dropped3dWidget.tsx
@@ -1,5 +1,5 @@
 import { useThree } from "@react-three/fiber";
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { useAsset3dWidget, useSocketStore, useWidgetSubOption } from "../../../store/store";
 import useModuleStore from "../../../store/useModuleStore";
 import { ThreeState } from "../../../types/world/worldTypes";
@@ -13,30 +13,43 @@ import { generateUniqueId } from "../../../functions/generateUniqueId";
 import { adding3dWidgets } from "../../../services/realTimeVisulization/zoneData/add3dWidget";
 import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData";
 import { use3DWidget } from "../../../store/useDroppedObjectsStore";
-import { useZoneWidgetStore } from "../../../store/useZone3DWidgetStore";
+import { useLeftData, useRightClickSelected, useRightSelected, useTopData, useZoneWidgetStore } from "../../../store/useZone3DWidgetStore";
+import { useWidgetStore } from "../../../store/useWidgetStore";
+import EditWidgetOption from "../menu/EditWidgetOption";

 export default function Dropped3dWidgets() {
    const { widgetSelect } = useAsset3dWidget();
    const { activeModule } = useModuleStore();
-    const { raycaster, gl, scene }: ThreeState = useThree();
+    const { raycaster, gl, scene, mouse, camera }: ThreeState = useThree();
    const { widgetSubOption } = useWidgetSubOption();
    const { selectedZone } = useSelectedZoneStore();
+    const { top, setTop } = useTopData()
+    const { left, setLeft } = useLeftData()
+    const { rightSelect, setRightSelect } = useRightSelected()

    // ✅ Use Zustand Store instead of useState
-    const { zoneWidgetData, setZoneWidgetData, addWidget } = useZoneWidgetStore();
+    const { zoneWidgetData, setZoneWidgetData, addWidget, updateWidgetPosition } = useZoneWidgetStore();
    const { setWidgets3D } = use3DWidget();
    const { visualizationSocket } = useSocketStore();
+    const { rightClickSelected, setRightClickSelected } = useRightClickSelected()
+
+    const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)); // Floor plane for horizontal move
+    const verticalPlane = useRef(new THREE.Plane(new THREE.Vector3(0, 0, 1), 0)); // Vertical plane for vertical move
+    const planeIntersect = useRef(new THREE.Vector3());
+    // let [verticalPlane, setFloorPlanesVertical] = useState(
+    //     new THREE.Plane(new THREE.Vector3(0, 1, 0))
+    // );

    useEffect(() => {
        if (activeModule !== "visualization") return;
        if (!selectedZone.zoneId) return;

-    const email = localStorage.getItem("email") || "";
-    const organization = email?.split("@")[1]?.split(".")[0];
+        const email = localStorage.getItem("email") || "";
+        const organization = email?.split("@")[1]?.split(".")[0];

        async function get3dWidgetData() {
            let result = await get3dWidgetZoneData(selectedZone.zoneId, organization);
-            console.log('result: ', result);
+
            setWidgets3D(result);

            const formattedWidgets = result.map((widget: any) => ({
@@ -89,13 +102,13 @@ export default function Dropped3dWidgets() {
                    widget: newWidget,
                    zoneId: selectedZone.zoneId
                }
-                console.log('add3dWidget: ', add3dWidget);
+
                if (visualizationSocket) {
                    visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget)
                }

                // let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget);
-                // console.log('response: ', response);
+                // 

                // if (response.message === "Widget created successfully") {
                addWidget(selectedZone.zoneId, newWidget);
@@ -111,23 +124,142 @@ export default function Dropped3dWidgets() {

    const activeZoneWidgets = zoneWidgetData[selectedZone.zoneId] || [];

+    useEffect(() => {
+        if (!rightClickSelected) return;
+        const email = localStorage.getItem("email") || "";
+        const organization = email?.split("@")[1]?.split(".")[0];
+        if (rightSelect === "Duplicate") {
+            const widgetToDuplicate = activeZoneWidgets.find(w => w.id === rightClickSelected);
+            if (!widgetToDuplicate) return;
+            const newWidget = {
+                id: generateUniqueId(),
+                type: widgetToDuplicate.type,
+                position: [
+                    widgetToDuplicate.position[0] + 0.5, // Slightly shift position
+                    widgetToDuplicate.position[1],
+                    widgetToDuplicate.position[2] + 0.5,
+                ] as [number, number, number],
+            };
+            let add3dWidget = {
+                organization,
+                widget: newWidget,
+                zoneId: selectedZone.zoneId
+            };
+            // if (visualizationSocket) {
+            //     visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget);
+            // }
+            addWidget(selectedZone.zoneId, newWidget);
+            setRightSelect(null);
+            setRightClickSelected(null);
+        }
+        if (rightSelect === "Delete") {
+            let deleteWidget = {
+                organization,
+                widgetId: rightClickSelected,
+                zoneId: selectedZone.zoneId
+            };
+            // if (visualizationSocket) {
+            //     visualizationSocket.emit("v2:viz-3D-widget:delete", deleteWidget);
+            // }
+            setZoneWidgetData(selectedZone.zoneId, activeZoneWidgets.filter(w => w.id !== rightClickSelected));
+            setRightClickSelected(null);
+            setRightSelect(null);
+        }
+        if (rightSelect === "Horizontal Move") {
+
+        }
+        if (rightSelect === "Vertical Move") {
+
+        }
+
+    }, [rightSelect, rightClickSelected]);
+
+    useEffect(() => {
+        const handleMouseMove = (event: MouseEvent) => {
+            if (!rightClickSelected || !rightSelect) return;
+
+
+            const selectedZone = Object.keys(zoneWidgetData).find(zoneId =>
+                zoneWidgetData[zoneId].some(widget => widget.id === rightClickSelected)
+            );
+            if (!selectedZone) return;
+
+            const selectedWidget = zoneWidgetData[selectedZone].find(widget => widget.id === rightClickSelected);
+            if (!selectedWidget) return;
+
+            const rect = gl.domElement.getBoundingClientRect();
+            mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+            mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+
+            raycaster.setFromCamera(mouse, camera);
+
+            if (rightSelect === "Horizontal Move" && raycaster.ray.intersectPlane(plane.current, planeIntersect.current)) {
+
+                updateWidgetPosition(selectedZone, rightClickSelected, [
+                    planeIntersect.current.x,
+                    selectedWidget.position[1],
+                    planeIntersect.current.z
+                ]);
+            }
+
+            if (rightSelect === "Vertical Move") {
+                if (raycaster.ray.intersectPlane(verticalPlane.current, planeIntersect.current)) {
+                    updateWidgetPosition(selectedZone, rightClickSelected, [
+                        selectedWidget.position[0],
+                        planeIntersect.current.y, // Ensure Y value updates correctly
+                        selectedWidget.position[2]
+                    ]);
+                } else {
+                    console.log("No Intersection with Vertical Plane");
+                }
+            }
+        };
+
+        const handleMouseUp = () => {
+
+            if (rightClickSelected && (rightSelect === "Horizontal Move" || rightSelect === "Vertical Move")) {
+
+                setTimeout(() => {
+                    setRightClickSelected(null);
+                    setRightSelect(null);
+                }, 50);
+            }
+        };
+
+        // Attach events to window instead of gl.domElement
+        window.addEventListener("mousemove", handleMouseMove);
+        window.addEventListener("mouseup", handleMouseUp);
+
+        return () => {
+            window.removeEventListener("mousemove", handleMouseMove);
+            window.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [rightClickSelected, rightSelect, zoneWidgetData, gl]);
+
+
+
+
    return (
        <>
            {activeZoneWidgets.map(({ id, type, position }) => {
-                console.log('Typeeeeeeeeeeee',type);
+                const handleRightClick = (event: React.MouseEvent) => {
+                    event.preventDefault();
+                    setRightClickSelected(id)
+                };
                switch (type) {
                    case "ui-Widget 1":
-                        return <ProductionCapacity key={id} id={id} type={type} position={position} />;
+                        return <ProductionCapacity key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
                    case "ui-Widget 2":
-                        return <ReturnOfInvestment key={id} id={id} type={type} position={position} />;
+                        return <ReturnOfInvestment key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
                    case "ui-Widget 3":
-                        return <StateWorking key={id} id={id} type={type} position={position} />;
+                        return <StateWorking key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
                    case "ui-Widget 4":
-                        return <Throughput key={id} id={id} type={type} position={position} />;
+                        return <Throughput key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
                    default:
                        return null;
                }
            })}
+
        </>
    );
 }
--- a/app/src/components/ui/componets/RealTimeVisulization.tsx
+++ b/app/src/components/ui/componets/RealTimeVisulization.tsx
@@ -23,6 +23,8 @@ import SocketRealTimeViz from "../../../modules/visualization/realTimeVizSocket.
 import RenderOverlay from "../../templates/Overlay";
 import ConfirmationPopup from "../../layout/confirmationPopup/ConfirmationPopup";
 import DroppedObjects from "./DroppedFloatingWidgets";
+import EditWidgetOption from "../menu/EditWidgetOption";
+import { useRightClickSelected } from "../../../store/useZone3DWidgetStore";

 type Side = "top" | "bottom" | "left" | "right";

@@ -55,8 +57,9 @@ const RealTimeVisulization: React.FC = () => {
  const [droppedObjects, setDroppedObjects] = useState<any[]>([]);
  const [zonesData, setZonesData] = useState<FormattedZoneData>({});
  const { selectedZone, setSelectedZone } = useSelectedZoneStore();
-  const { zones } = useZones();

+
+  const { rightClickSelected, setRightClickSelected } = useRightClickSelected()
  const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);

  const [floatingWidgets, setFloatingWidgets] = useState<
@@ -93,7 +96,7 @@ const RealTimeVisulization: React.FC = () => {
          {}
        );
        setZonesData(formattedData);
-      } catch (error) {}
+      } catch (error) { }
    }

    GetZoneData();
@@ -178,7 +181,6 @@ const RealTimeVisulization: React.FC = () => {
        .getState()
        .addObject(selectedZone.zoneName, newObject);
      // }
-
      // Update floating widgets state
      setFloatingWidgets((prevWidgets) => ({
        ...prevWidgets,
@@ -192,9 +194,10 @@ const RealTimeVisulization: React.FC = () => {
          ],
        },
      }));
-    } catch (error) {}
+    } catch (error) { }
  };

+  function handleRightClickSel(){}
  return (
    <div
      ref={containerRef}
@@ -206,11 +209,6 @@ const RealTimeVisulization: React.FC = () => {
        left: isPlaying || activeModule !== "visualization" ? "0%" : "",
      }}
    >
-      {/* <RenderOverlay>
-        <EditWidgetOption
-          options={["Dublicate", "Vertical Move", "Horizontal Move", "Delete"]}
-        />
-      </RenderOverlay> */}
      {openConfirmationPopup && (
        <RenderOverlay>
          <ConfirmationPopup
@@ -235,12 +233,11 @@ const RealTimeVisulization: React.FC = () => {
      </div>
      {activeModule === "visualization" && selectedZone.zoneName !== "" && <DroppedObjects />}
      {activeModule === "visualization" && <SocketRealTimeViz />}
-      {/* <DroppedObjects /> */}
-      {/* <RenderOverlay>
-        <EditWidgetOption
-          options={["Dublicate", "Vertical Move", "Horizontal Move", "Delete"]}
-        />
-      </RenderOverlay> */}
+
+      {activeModule === "visualization" && widgetSubOption === "3D" && rightClickSelected && <EditWidgetOption
+        options={["Duplicate", "Vertical Move", "Horizontal Move", "Delete"]} 
+      />}
+
      {activeModule === "visualization" && (
        <>
          <DisplayZone
--- a/app/src/components/ui/componets/handleDropTemplate
+++ b/app/src/components/ui/componets/handleDropTemplate
@@ -1,29 +0,0 @@
-// 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);
-// };
--- a/app/src/components/ui/menu/EditWidgetOption.tsx
+++ b/app/src/components/ui/menu/EditWidgetOption.tsx
@@ -1,15 +1,26 @@
-import React from "react";
+import React, { useEffect } from "react";
+import { useLeftData, useRightSelected, useTopData } from "../../../store/useZone3DWidgetStore";

 interface EditWidgetOptionProps {
  options: string[];
 }

 const EditWidgetOption: React.FC<EditWidgetOptionProps> = ({ options }) => {
+  const { top, setTop } = useTopData()
+  const { left, setLeft } = useLeftData()
+  const { rightSelect, setRightSelect } = useRightSelected()
+
+  useEffect(() => {
+
+    console.log('left: ', left);
+    console.log('top: ', top);
+  }, [top, left])
+
  return (
-    <div className="editWidgetOptions-wrapper">
+    <div className="editWidgetOptions-wrapper" style={{ top: top + "px", left: left + "px" }}>
      <div className="editWidgetOptions">
        {options.map((option, index) => (
-          <div className="option" key={index}>
+          <div className="option" key={index} onClick={(e) => setRightSelect(option)}>
            {option}
          </div>
        ))}