app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx

@@ -57,7 +57,7 @@ const ZoneProperties: React.FC = () => {
     };
     // Call your API to update the zone
     let response = await zoneCameraUpdate(zonesdata, organization);
-    console.log("response: ", response);
+    // console.log("response: ", response);
     if (response.message === "updated successfully") {
       setZones((prevZones: any[]) =>
         prevZones.map((zone) =>

app/src/components/ui/list/DropDownList.tsx

@@ -98,6 +98,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
         assets: assetsInZone,
       };
     });
+  
     setZoneDataList(updatedZoneList);
   }, [zones, floorItems]);
 

app/src/components/ui/list/List.tsx

@@ -19,6 +19,7 @@ import {
 } from "../../../store/builder/store";
 import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation";
 import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
+import OuterClick from "../../../utils/outerClick";
 
 interface Asset {
   id: string;
@@ -43,13 +44,14 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
   const { activeModule } = useModuleStore();
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
   const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
-  const { zones } = useZones();
+  const { zones, setZones } = useZones();
   const { setSubModule } = useSubModuleStore();
   const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
     {}
   );
   const { setFloorItems } = useFloorItems();
 
+
   useEffect(() => {
     useSelectedZoneStore.getState().setSelectedZone({
       zoneName: "",
@@ -82,7 +84,6 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
       const organization = email?.split("@")[1]?.split(".")[0] ?? "";
 
       let response = await getZoneData(id, organization);
-
       setSelectedZone({
         zoneName: response?.zoneName,
         activeSides: response?.activeSides ?? [],
@@ -125,6 +126,14 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
     const response = await zoneCameraUpdate(zonesdata, organization);
     if (response.message === "updated successfully") {
       setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
+
+      setZones((prevZones: any[]) =>
+        prevZones.map((zone) =>
+          zone.zoneId === selectedZone.zoneId
+            ? { ...zone, zoneName: newName }
+            : zone
+        )
+      );
     }
   }
 
@@ -138,7 +147,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
         zoneAssetId.id,
         newName
       );
-      console.log("response: ", response);
+      // console.log("response: ", response);
       setFloorItems((prevFloorItems: any[]) =>
         prevFloorItems.map((floorItems) =>
           floorItems.modelUuid === zoneAssetId.id
@@ -156,6 +165,69 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
     );
   };
 
+  useEffect(() => {
+    let drag = false;
+    let isLeftMouseDown = false;
+
+    const contextClassNames = ["list-wrapper", "zone-properties-container", "list-container"];
+
+    const isOutsideClick = (target: EventTarget | null) => {
+      if (!(target instanceof HTMLElement)) return true;
+      return !contextClassNames.some(className =>
+        target.closest(`.${className}`)
+      );
+    };
+
+    const onMouseDown = (evt: MouseEvent) => {
+      if (evt.button === 0) {
+        isLeftMouseDown = true;
+        drag = false;
+      }
+    };
+
+    const onMouseMove = () => {
+      if (isLeftMouseDown) {
+        drag = true;
+      }
+    };
+
+    const onMouseUp = (evt: MouseEvent) => {
+      if (evt.button === 0) {
+        isLeftMouseDown = false;
+        if (drag) return;
+
+        if (isOutsideClick(evt.target)) {
+          // Clear selected zone
+          setSelectedZone({
+            zoneId: '',
+            zoneName: '',
+            activeSides: [],
+            panelOrder: [],
+            lockedPanels: [],
+            widgets: [],
+            zoneViewPortTarget: [],
+            zoneViewPortPosition: []
+          });
+          setZoneAssetId({
+            id: '',
+            name: '',
+          });
+        }
+      }
+    };
+
+    document.addEventListener('mousedown', onMouseDown);
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+
+    return () => {
+      document.removeEventListener('mousedown', onMouseDown);
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+  }, []);
+
+
   return (
     <>
       {items?.length > 0 ? (
@@ -169,7 +241,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                   toggleZoneExpansion(item.id);
                 }}
               >
-                <div className={`list-item ${item.active ? "active" : ""}`}>
+                <div className={`list-item ${selectedZone.zoneId === item.id ? "active" : ""}`}>
                   <div className="zone-header">
                     <button className="value" id="zone-name">
                       <RenameInput
@@ -211,7 +283,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                     {item.assets.map((asset) => (
                       <li
                         key={`asset-${asset.id}`}
-                        className="list-container asset-item"
+                        className={`list-container asset-item ${zoneAssetId?.id === asset.id ? "active" : ""}`}
                       >
                         <div className="list-item">
                           <button

app/src/modules/builder/groups/zoneGroup.tsx

@@ -533,7 +533,7 @@ const ZoneGroup: React.FC = () => {
           <group
             key={zone.zoneId}
             name={zone.zoneName}
-            visible={zone.zoneName === selectedZone.zoneName}
+            visible={zone.zoneId === selectedZone.zoneId}
           >
             {zone.points
               .slice(0, -1)

app/src/modules/simulation/events/arrows/arrows.tsx

@@ -160,29 +160,26 @@ export function ArrowOnQuadraticBezier({
     const arrowRadius = 0.01 * scale;
     const arrowHeadRadius = arrowRadius * 2.5;
 
-    const curveLength = useMemo(() => fullCurve.getLength(), [fullCurve]);
-    const arrowHeadTOffset = useMemo(() => Math.min(arrowHeadLength / curveLength, 0.5), [arrowHeadLength, curveLength]);
-
-    const endT = 1 - arrowHeadTOffset;
-
     const subCurve = useMemo(() => {
-        const t1 = Math.max(0, endT - segmentSize / 2);
+        const centerT = 0.5;
-        const t2 = Math.min(1, endT + segmentSize / 2);
+        const t1 = Math.max(0, centerT - segmentSize / 2);
+        const t2 = Math.min(1, centerT + segmentSize / 2);
+
         const divisions = 10;
         const subPoints = Array.from({ length: divisions + 1 }, (_, i) => {
             const t = THREE.MathUtils.lerp(t1, t2, i / divisions);
             return fullCurve.getPoint(t);
         });
         return new THREE.CatmullRomCurve3(subPoints);
-    }, [fullCurve, endT, segmentSize]);
+    }, [fullCurve, segmentSize]);
 
     const tubeGeometry = useMemo(
         () => new THREE.TubeGeometry(subCurve, 20, arrowRadius, 8, false),
         [subCurve, arrowRadius]
     );
 
-    const arrowPosition = useMemo(() => fullCurve.getPoint(1), [fullCurve]);
+    const arrowPosition = useMemo(() => subCurve.getPoint(1), [subCurve]);
-    const arrowTangent = useMemo(() => fullCurve.getTangent(1).normalize(), [fullCurve]);
+    const arrowTangent = useMemo(() => subCurve.getTangent(1).normalize(), [subCurve]);
 
     const arrowRotation = useMemo(() => {
         return new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0, 1, 0), arrowTangent);

app/src/modules/simulation/events/points/creator/pointsCreator.tsx

@@ -15,7 +15,7 @@ function PointsCreator() {
     const { gl, raycaster, scene, pointer, camera } = useThree();
     const { subModule } = useSubModuleStore();
     const { events, updatePoint, getPointByUuid, getEventByModelUuid } = useEventsStore();
-    const { getEventByModelUuid: getEventByModelUuidFromProduct, updatePoint: updatePointFromProduct, getEventByModelUuid: getEventByModelUuidFromProduct2 } = useProductStore();
+    const { getEventByModelUuid: getEventByModelUuidFromProduct, updatePoint: updatePointFromProduct, getEventByModelUuid: getEventByModelUuidFromProduct2, getPointByUuid: getPointByUuidFromProduct } = useProductStore();
     const { selectedProduct } = useSelectedProduct();
     const { activeModule } = useModuleStore();
     const transformRef = useRef<any>(null);
@@ -76,7 +76,7 @@ function PointsCreator() {
     }, [selectedEventSphere]);
 
     const updatePointToState = (selectedEventSphere: THREE.Mesh) => {
-        let point = JSON.parse(
+        let point: PointsScheme = JSON.parse(
             JSON.stringify(
                 getPointByUuid(
                     selectedEventSphere.userData.modelUuid,
@@ -90,15 +90,30 @@ function PointsCreator() {
                 selectedEventSphere.position.y,
                 selectedEventSphere.position.z,
             ];
+            point.rotation = [
+                selectedEventSphere.rotation.x,
+                selectedEventSphere.rotation.y,
+                selectedEventSphere.rotation.z,
+            ];
 
             const event = getEventByModelUuidFromProduct(selectedProduct.productId, selectedEventSphere.userData.modelUuid);
 
             if (event && selectedProduct.productId !== '') {
+
+                const updatedPoint = JSON.parse(
+                    JSON.stringify(
+                        getPointByUuidFromProduct(selectedProduct.productId, selectedEventSphere.userData.modelUuid, selectedEventSphere.userData.pointUuid)
+                    )
+                );
+                if (updatedPoint) {
+                    updatedPoint.position = point.position;
+                    updatedPoint.rotation = point.rotation;
+
                     const updatedEvent = updatePointFromProduct(
                         selectedProduct.productId,
                         selectedEventSphere.userData.modelUuid,
                         selectedEventSphere.userData.pointUuid,
-                    point
+                        updatedPoint
                     )
                     if (updatedEvent) {
                         updatePoint(
@@ -115,6 +130,7 @@ function PointsCreator() {
                     }
                 }
             }
+        }
     };
 
     useEffect(() => {

app/src/modules/simulation/machine/eventManager/useMachineEventManager.ts

@@ -0,0 +1,65 @@
+import { useEffect, useRef } from 'react';
+import { useFrame } from '@react-three/fiber';
+import { useMachineStore } from '../../../../store/simulation/useMachineStore';
+
+type MachineCallback = {
+    machineId: string;
+    callback: () => void;
+};
+
+export function useMachineEventManager() {
+    const { getMachineById } = useMachineStore();
+    const callbacksRef = useRef<MachineCallback[]>([]);
+    const isMonitoringRef = useRef(false);
+
+    // Add a new machine to monitor
+    const addMachineToMonitor = (machineId: string, callback: () => void) => {
+        // Avoid duplicates
+        if (!callbacksRef.current.some((entry) => entry.machineId === machineId)) {
+            callbacksRef.current.push({ machineId, callback });
+        }
+
+        // Start monitoring if not already running
+        if (!isMonitoringRef.current) {
+            isMonitoringRef.current = true;
+        }
+    };
+
+    // Remove a machine from monitoring
+    const removeMachineFromMonitor = (machineId: string) => {
+        callbacksRef.current = callbacksRef.current.filter(
+            (entry) => entry.machineId !== machineId
+        );
+
+        // Stop monitoring if no more machines to track
+        if (callbacksRef.current.length === 0) {
+            isMonitoringRef.current = false;
+        }
+    };
+
+    // Check machine states every frame
+    useFrame(() => {
+        if (!isMonitoringRef.current || callbacksRef.current.length === 0) return;
+
+        callbacksRef.current.forEach(({ machineId, callback }) => {
+            const machine = getMachineById(machineId);
+            if (machine && machine.isActive === false && machine.state === 'idle' && !machine.currentAction) {
+                callback();
+                removeMachineFromMonitor(machineId); // Remove after triggering
+            }
+        });
+    });
+
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            callbacksRef.current = [];
+            isMonitoringRef.current = false;
+        };
+    }, []);
+
+    return {
+        addMachineToMonitor,
+        removeMachineFromMonitor,
+    };
+}

app/src/modules/simulation/triggers/triggerHandler/useTriggerHandler.ts

@@ -10,6 +10,8 @@ import { useStorageUnitStore } from '../../../../store/simulation/useStorageUnit
 import { useArmBotEventManager } from '../../roboticArm/eventManager/useArmBotEventManager';
 import { useConveyorStore } from '../../../../store/simulation/useConveyorStore';
 import { useConveyorEventManager } from '../../conveyor/eventManager/useConveyorEventManager';
+import { useVehicleEventManager } from '../../vehicle/instances/eventManager/useVehicleEventManager';
+import { useMachineEventManager } from '../../machine/eventManager/useMachineEventManager';
 
 export function useTriggerHandler() {
     const { handleAction } = useActionHandler();
@@ -19,6 +21,8 @@ export function useTriggerHandler() {
     const { getConveyorById } = useConveyorStore();
     const { addArmBotToMonitor } = useArmBotEventManager();
     const { addConveyorToMonitor } = useConveyorEventManager();
+    const { addVehicleToMonitor } = useVehicleEventManager();
+    const { addMachineToMonitor } = useMachineEventManager();
     const { getVehicleById } = useVehicleStore();
     const { getMachineById } = useMachineStore();
     const { getStorageUnitById } = useStorageUnitStore();
@@ -89,7 +93,7 @@ export function useTriggerHandler() {
 
                                 if (vehicle) {
 
-                                    if (vehicle.isActive === false && vehicle.state === 'idle' && vehicle.currentLoad < vehicle.point.action.loadCapacity) {
+                                    if (vehicle.isActive === false && vehicle.state === 'idle' && vehicle.isPicking && vehicle.currentLoad < vehicle.point.action.loadCapacity) {
 
                                         setIsVisible(materialId, false);
 
@@ -98,8 +102,10 @@ export function useTriggerHandler() {
 
                                     } else {
 
-                                        // Event Manager Needed
+                                        // Handle current action using Event Manager
-
+                                        addVehicleToMonitor(vehicle.modelUuid, () => {
+                                            handleAction(action, materialId);
+                                        })
                                     }
                                 }
                             }
@@ -140,7 +146,78 @@ export function useTriggerHandler() {
                             if (action) {
 
                                 if (armBot) {
+                                    if (action && action.triggers.length > 0 &&
+                                        action.triggers[0]?.triggeredAsset?.triggeredModel.modelUuid &&
+                                        action.triggers[0]?.triggeredAsset?.triggeredAction?.actionUuid &&
+                                        action.triggers[0]?.triggeredAsset?.triggeredPoint?.pointUuid) {
+                                        const model = getEventByModelUuid(selectedProduct.productId, action.triggers[0]?.triggeredAsset?.triggeredModel.modelUuid);
 
+                                        if (model?.type === 'vehicle') {
+                                            const vehicle = getVehicleById(action.triggers[0]?.triggeredAsset?.triggeredModel.modelUuid);
+                                            if (vehicle) {
+                                                if (vehicle.isActive === false && vehicle.state === 'idle' && vehicle.isPicking && vehicle.currentLoad < vehicle.point.action.loadCapacity) {
+                                                    // Handle current action from vehicle
+                                                    setIsPaused(materialId, true);
+                                                    handleAction(action, materialId);
+
+                                                } else {
+
+                                                    // Handle current action using Event Manager
+                                                    setIsPaused(materialId, true);
+
+                                                    addVehicleToMonitor(vehicle.modelUuid,
+                                                        () => {
+                                                            handleAction(action, materialId);
+                                                        }
+                                                    )
+                                                }
+                                            }
+                                        } else if (model?.type === 'machine') {
+                                            const armBot = getArmBotById(trigger.triggeredAsset?.triggeredModel.modelUuid);
+                                            if (armBot) {
+                                                if (armBot.isActive === false && armBot.state === 'idle') {
+                                                    const machine = getMachineById(action.triggers[0]?.triggeredAsset?.triggeredModel.modelUuid);
+                                                    if (machine) {
+                                                        if (machine.isActive === false && machine.state === 'idle' && !machine.currentAction) {
+                                                            setIsPaused(materialId, true);
+                                                            handleAction(action, materialId);
+                                                        } else {
+
+                                                            // Handle current action using Event Manager
+                                                            setIsPaused(materialId, true);
+
+                                                            addMachineToMonitor(machine.modelUuid,
+                                                                () => {
+                                                                    handleAction(action, materialId);
+                                                                }
+                                                            )
+                                                        }
+                                                    }
+                                                } else {
+                                                    addArmBotToMonitor(armBot.modelUuid,
+                                                        () => {
+                                                            const machine = getMachineById(action.triggers[0]?.triggeredAsset?.triggeredModel.modelUuid || '');
+                                                            if (machine) {
+                                                                if (machine.isActive === false && machine.state === 'idle' && !machine.currentAction) {
+                                                                    setIsPaused(materialId, true);
+                                                                    handleAction(action, materialId);
+                                                                } else {
+
+                                                                    // Handle current action using Event Manager
+                                                                    setIsPaused(materialId, true);
+
+                                                                    addMachineToMonitor(machine.modelUuid,
+                                                                        () => {
+                                                                            handleAction(action, materialId);
+                                                                        }
+                                                                    )
+                                                                }
+                                                            }
+                                                        }
+                                                    );
+                                                }
+                                            }
+                                        } else {
                                             if (armBot.isActive === false && armBot.state === 'idle') {
 
                                                 // Handle current action from arm bot
@@ -149,7 +226,7 @@ export function useTriggerHandler() {
 
                                             } else {
 
-                                        // Event Manager Needed
+                                                // Handle current action using Event Manager
                                                 setIsPaused(materialId, true);
                                                 addArmBotToMonitor(armBot.modelUuid,
                                                     () => handleAction(action, materialId)
@@ -157,6 +234,24 @@ export function useTriggerHandler() {
 
                                             }
                                         }
+                                    } else {
+                                        if (armBot.isActive === false && armBot.state === 'idle') {
+
+                                            // Handle current action from arm bot
+                                            setIsPaused(materialId, true);
+                                            handleAction(action, materialId);
+
+                                        } else {
+
+                                            // Handle current action using Event Manager
+                                            setIsPaused(materialId, true);
+                                            addArmBotToMonitor(armBot.modelUuid,
+                                                () => handleAction(action, materialId)
+                                            );
+
+                                        }
+                                    }
+                                }
                             }
                         }
                     }
@@ -334,11 +429,20 @@ export function useTriggerHandler() {
                                 if (model?.type === 'transfer') {
                                     const conveyor = getConveyorById(action.triggers[0]?.triggeredAsset?.triggeredModel.modelUuid || '');
                                     if (conveyor) {
+                                        const previousModel = getEventByModelUuid(selectedProduct.productId, material.previous?.modelUuid || '');
+                                        if (previousModel) {
+                                            if (previousModel.type === 'transfer' && previousModel.modelUuid === model.modelUuid) {
+                                                handleAction(action, materialId)
+                                            } else {
                                                 addConveyorToMonitor(conveyor.modelUuid,
                                                     () => {
                                                         handleAction(action, materialId)
                                                     }
                                                 )
+                                            }
+                                        } else {
+                                            handleAction(action, materialId)
+                                        }
                                         // handleAction(action, materialId)
                                     }
                                 } else {
@@ -347,18 +451,28 @@ export function useTriggerHandler() {
 
                             } else {
 
-                                // Event Manager Needed
+                                // Handle current action using Event Manager
+
                                 addArmBotToMonitor(armBot.modelUuid,
                                     () => {
                                         const model = getEventByModelUuid(selectedProduct.productId, action.triggers[0]?.triggeredAsset?.triggeredModel.modelUuid || '');
                                         if (model?.type === 'transfer') {
                                             const conveyor = getConveyorById(action.triggers[0]?.triggeredAsset?.triggeredModel.modelUuid || '');
                                             if (conveyor) {
+                                                const previousModel = getEventByModelUuid(selectedProduct.productId, material.previous?.modelUuid || '');
+                                                if (previousModel) {
+                                                    if (previousModel.type === 'transfer' && previousModel.modelUuid === model.modelUuid) {
+                                                        handleAction(action, materialId)
+                                                    } else {
                                                         addConveyorToMonitor(conveyor.modelUuid,
                                                             () => {
                                                                 handleAction(action, materialId)
                                                             }
                                                         )
+                                                    }
+                                                } else {
+                                                    handleAction(action, materialId)
+                                                }
                                                 // handleAction(action, materialId)
                                             }
                                         } else {
@@ -432,17 +546,54 @@ export function useTriggerHandler() {
 
                                         if (vehicle) {
 
-                                            if (vehicle.isActive === false && vehicle.state === 'idle' && vehicle.currentLoad < vehicle.point.action.loadCapacity) {
+                                            if (vehicle.isActive === false && vehicle.state === 'idle' && vehicle.isPicking && vehicle.currentLoad < vehicle.point.action.loadCapacity) {
+
+                                                setPreviousLocation(material.materialId, {
+                                                    modelUuid: material.current.modelUuid,
+                                                    pointUuid: material.current.pointUuid,
+                                                    actionUuid: material.current.actionUuid,
+                                                })
+
+                                                setCurrentLocation(material.materialId, {
+                                                    modelUuid: action.triggers[0]?.triggeredAsset?.triggeredModel.modelUuid || '',
+                                                    pointUuid: action.triggers[0]?.triggeredAsset?.triggeredPoint?.pointUuid || '',
+                                                    actionUuid: action.triggers[0]?.triggeredAsset?.triggeredAction?.actionUuid || '',
+                                                });
+
+                                                setNextLocation(material.materialId, null);
 
                                                 setIsVisible(materialId, false);
+                                                setIsPaused(materialId, false);
 
                                                 // Handle current action from vehicle
                                                 handleAction(nextAction, materialId);
 
                                             } else {
 
-                                                // Event Manager Needed
+                                                // Handle current action using Event Manager
+                                                setIsPaused(materialId, true);
 
+                                                addVehicleToMonitor(vehicle.modelUuid,
+                                                    () => {
+                                                        setPreviousLocation(material.materialId, {
+                                                            modelUuid: material.current.modelUuid,
+                                                            pointUuid: material.current.pointUuid,
+                                                            actionUuid: material.current.actionUuid,
+                                                        })
+
+                                                        setCurrentLocation(material.materialId, {
+                                                            modelUuid: action.triggers[0]?.triggeredAsset?.triggeredModel.modelUuid || '',
+                                                            pointUuid: action.triggers[0]?.triggeredAsset?.triggeredPoint?.pointUuid || '',
+                                                            actionUuid: action.triggers[0]?.triggeredAsset?.triggeredAction?.actionUuid || '',
+                                                        });
+
+                                                        setNextLocation(material.materialId, null);
+
+                                                        setIsPaused(materialId, false);
+                                                        setIsVisible(materialId, false);
+                                                        handleAction(nextAction, materialId);
+                                                    }
+                                                )
                                             }
                                         }
                                     }
@@ -491,7 +642,7 @@ export function useTriggerHandler() {
 
                             if (vehicle) {
 
-                                if (vehicle.isActive === false && vehicle.state === 'idle' && vehicle.currentLoad < vehicle.point.action.loadCapacity) {
+                                if (vehicle.isActive === false && vehicle.state === 'idle' && vehicle.isPicking && vehicle.currentLoad < vehicle.point.action.loadCapacity) {
 
                                     setIsVisible(materialId, false);
 

app/src/modules/simulation/vehicle/instances/eventManager/useVehicleEventManager.ts

@@ -0,0 +1,65 @@
+import { useEffect, useRef } from 'react';
+import { useFrame } from '@react-three/fiber';
+import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore';
+
+type VehicleCallback = {
+    vehicleId: string;
+    callback: () => void;
+};
+
+export function useVehicleEventManager() {
+    const { getVehicleById } = useVehicleStore();
+    const callbacksRef = useRef<VehicleCallback[]>([]);
+    const isMonitoringRef = useRef(false);
+
+    // Add a new vehicle to monitor
+    const addVehicleToMonitor = (vehicleId: string, callback: () => void) => {
+        // Avoid duplicates
+        if (!callbacksRef.current.some((entry) => entry.vehicleId === vehicleId)) {
+            callbacksRef.current.push({ vehicleId, callback });
+        }
+
+        // Start monitoring if not already running
+        if (!isMonitoringRef.current) {
+            isMonitoringRef.current = true;
+        }
+    };
+
+    // Remove a vehicle from monitoring
+    const removeVehicleFromMonitor = (vehicleId: string) => {
+        callbacksRef.current = callbacksRef.current.filter(
+            (entry) => entry.vehicleId !== vehicleId
+        );
+
+        // Stop monitoring if no more vehicles to track
+        if (callbacksRef.current.length === 0) {
+            isMonitoringRef.current = false;
+        }
+    };
+
+    // Check vehicle states every frame
+    useFrame(() => {
+        if (!isMonitoringRef.current || callbacksRef.current.length === 0) return;
+
+        callbacksRef.current.forEach(({ vehicleId, callback }) => {
+            const vehicle = getVehicleById(vehicleId);
+            if (vehicle && vehicle.isActive === false && vehicle.state === 'idle' && vehicle.isPicking && vehicle.currentLoad < vehicle.point.action.loadCapacity) {
+                callback();
+                removeVehicleFromMonitor(vehicleId); // Remove after triggering
+            }
+        });
+    });
+
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            callbacksRef.current = [];
+            isMonitoringRef.current = false;
+        };
+    }, []);
+
+    return {
+        addVehicleToMonitor,
+        removeVehicleFromMonitor,
+    };
+}

app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx

@@ -41,6 +41,7 @@ export default function Dropped3dWidgets() {
   const { raycaster, gl, scene, mouse, camera }: ThreeState = useThree();
   const { widgetSubOption } = useWidgetSubOption();
   const { selectedZone } = useSelectedZoneStore();
+  let lastClientY = useRef<number | null>(null);
   const { top, setTop } = useTopData();
   const { left, setLeft } = useLeftData();
   const { rightSelect, setRightSelect } = useRightSelected();
@@ -412,6 +413,7 @@ export default function Dropped3dWidgets() {
       }
     };
    
+
     const handleMouseMove = (event: MouseEvent) => {
       if (!rightClickSelected || !rightSelect) return;
       const selectedZoneId = Object.keys(zoneWidgetData).find(
@@ -465,18 +467,51 @@ export default function Dropped3dWidgets() {
         }
       }
 
+      // if (rightSelect === "Vertical Move") {
+      //   // console.log('rightSelect: ', rightSelect);
+
+      //   // console.log('floorPlanesVertical: ', floorPlanesVertical);
+      //   // console.log('planeIntersect.current: ', planeIntersect.current);
+      //   // const intersect = raycaster.ray.intersectPlane(
+      //   //   floorPlanesVertical,
+      //   //   planeIntersect.current
+      //   // );
+      //   // console.log('intersect: ', intersect);
+     
+      //   let intersect = event.clientY
+        
+      //   if (intersect && typeof intersectcontextmenu === "number") {
+      //     console.log('intersect: ', intersect);
+      //     const diff = intersect - intersectcontextmenu;
+      //     const unclampedY = selectedWidget.position[1] + diff;
+      //     const newY = Math.max(0, unclampedY); // Prevent going below floor (y=0)
+
+      //     setintersectcontextmenu(intersect);
+
+      //     const newPosition: [number, number, number] = [
+      //       selectedWidget.position[0],
+      //       newY,
+      //       selectedWidget.position[2],
+      //     ];
+      //     console.log('newPosition: ', newPosition);
+
+
+      //     updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
+      //   }
+      // }
       if (rightSelect === "Vertical Move") {
-        const intersect = raycaster.ray.intersectPlane(
+        if (lastClientY.current === null) {
-          floorPlanesVertical,
+          lastClientY.current = event.clientY;
-          planeIntersect.current
+          return;
-        );
+        }
     
-        if (intersect && typeof intersectcontextmenu === "number") {
+        const diff = lastClientY.current - event.clientY; // dragging up = increase Y
-          const diff = intersect.y - intersectcontextmenu;
+        const scaleFactor = 0.05; // tune this based on your scene scale
-          const unclampedY = selectedWidget.position[1] + diff;
-          const newY = Math.max(0, unclampedY); // Prevent going below floor (y=0)
     
-          setintersectcontextmenu(intersect.y);
+        const unclampedY = selectedWidget.position[1] + diff * scaleFactor;
+        const newY = Math.max(0, unclampedY);
+    
+        lastClientY.current = event.clientY;
     
         const newPosition: [number, number, number] = [
           selectedWidget.position[0],
@@ -486,7 +521,6 @@ export default function Dropped3dWidgets() {
     
         updateWidgetPosition(selectedZoneId, rightClickSelected, newPosition);
       }
-      }
 
       if (rightSelect?.startsWith("Rotate")) {
         const axis = rightSelect.slice(-1).toLowerCase(); // "x", "y", or "z"
@@ -668,9 +702,12 @@ export default function Dropped3dWidgets() {
 
     raycaster.setFromCamera(mouse, camera);
 
+    const up = new THREE.Vector3(0, 1, 0);
     const cameraDirection = new THREE.Vector3();
     camera.getWorldDirection(cameraDirection);
-    const verticalPlane = new THREE.Plane(cameraDirection);
+    const right = new THREE.Vector3().crossVectors(up, cameraDirection).normalize();
+    const verticalPlane = new THREE.Plane(right, 0);
+    // const verticalPlane = new THREE.Plane(cameraDirection);
     setFloorPlanesVertical(verticalPlane);
 
     const intersectPoint = raycaster.ray.intersectPlane(

app/src/modules/visualization/widgets/3d/cards/ProductionCapacity.tsx

@@ -198,31 +198,31 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
   useEffect(() => { }, [rotation]);
 
   return (
+
     <Html
+      // data
       position={position}
       scale={[0.5, 0.5, 0.5]}
       rotation={rotation}
+      // class
+      wrapperClass="pointer-none"
+      // other
       transform
-      sprite={true}
       zIndexRange={[1, 0]}
-      // style={{
+      prepend
-      //   transform: transformStyle.transform,
+      // sprite
-      //   transformStyle: "preserve-3d",
+      distanceFactor={20}
-      //   transition: "transform 0.1s ease-out",
+      // events
-      // }}
       onDragOver={(e) => {
         e.preventDefault();
         e.stopPropagation();
       }}
       onDrop={(e) => {
         e.preventDefault();
-        // e.stopPropagation();
       }}
-      wrapperClass="pointer-none"
     >
       <div
-        className={`productionCapacity-wrapper card ${
+        className={`productionCapacity-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""
-          selectedChartId?.id === id ? "activeChart" : ""
           }`}
         onClick={() => setSelectedChartId({ id: id, type: type })}
         onContextMenu={onContextMenu}

app/src/modules/visualization/widgets/3d/cards/ReturnOfInvestment.tsx

@@ -242,12 +242,12 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
       rotation={rotation}
       scale={[0.5, 0.5, 0.5]}
       transform
-      sprite={true}
+      zIndexRange={[1, 0]}
-      // style={{
+      prepend 
-      //   transform: transformStyle.transform,
+      distanceFactor={20}
-      //   transformStyle: "preserve-3d",
+      
-      //   transition: "transform 0.1s ease-out",
+
-      // }}
+  
     >
       <div
         className={`returnOfInvestment card ${

app/src/modules/visualization/widgets/3d/cards/StateWorking.tsx

@@ -121,7 +121,9 @@ const StateWorking: React.FC<StateWorkingProps> = ({
       scale={[0.5, 0.5, 0.5]}
       transform
       zIndexRange={[1, 0]}
-      sprite={true}
+      // sprite={true}
+      prepend 
+      distanceFactor={20}
       // style={{
       //   transform: transformStyle.transform,
       //   transformStyle: "preserve-3d",

app/src/modules/visualization/widgets/3d/cards/Throughput.tsx

@@ -223,7 +223,9 @@ const Throughput: React.FC<ThroughputProps> = ({
       scale={[0.5, 0.5, 0.5]}
       transform
       zIndexRange={[1, 0]}
-      sprite={true}
+      prepend 
+      distanceFactor={20}
+      // sprite={true}
     >
       <div
         className={`throughput-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""

app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx

@@ -478,7 +478,6 @@ const DroppedObjects: React.FC = () => {
 
   const widthMultiplier = parseFloat(containerWidth) * 0.13;
 
-  console.log('zone?.objects: ', zone?.objects);
   return (
     <div
       onPointerMove={handlePointerMove}

app/src/modules/visualization/zone/DisplayZone.tsx

@@ -176,7 +176,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
       let response = await getSelect2dZoneData(zoneId, organization);
-      console.log("response: ", response);
+
       let res = await getFloatingZoneData(zoneId, organization);
       console.log("res: ", res);
 

app/src/styles/components/lists.scss

@@ -85,3 +85,12 @@
     margin-left: 20px;
   }
 }
+
+.list-container.active {
+  .list-item {
+    background: var(--highlight-accent-color);
+    .input-value {
+      color: var(--highlight-text-color);
+    }
+  }
+}

app/src/styles/components/simulation/simulation.scss

@@ -105,6 +105,7 @@
         height: fit-content;
         cursor: pointer;
         transition: all 0.2s;
+        outline: 1px solid transparent;
 
         &:hover {
           outline: 1px solid var(--border-color);