added pannel hide and EditWidgetOption component

app/.env

@@ -7,11 +7,11 @@ REACT_APP_SERVER_SOCKET_API_BASE_URL=185.100.212.76:8000
 # Base URL for the server REST API, used for HTTP requests to the backend server.
 REACT_APP_SERVER_REST_API_BASE_URL=185.100.212.76:5000
 
-REACT_APP_SERVER_REST_API_LOCAL_BASE_URL=192.168.0.102:5000
+# Base URL for the server marketplace, used for market place model blob.
+REACT_APP_SERVER_MARKETPLACE_URL=185.100.212.76:50011
 
-# Base URL for the server marketplace API.
+# Base URL for the asset library server, used for asset library images and model blob id.
-# REACT_APP_SERVER_MARKETPLACE_URL=185.100.212.76:50011
+REACT_APP_SERVER_ASSET_LIBRARY_URL=192.168.0.111:3501
-REACT_APP_SERVER_MARKETPLACE_URL=192.168.0.111:3501
 
 # base url for IoT socket server
 REACT_APP_IOT_SOCKET_SERVER_URL =185.100.212.76:5010

app/src/components/layout/confirmationPopup/ConfirmationPopup.tsx

@@ -0,0 +1,32 @@
+// ConfirmationDialog.tsx
+import React from "react";
+
+interface ConfirmationPopupProps {
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+const ConfirmationPopup: React.FC<ConfirmationPopupProps> = ({
+  message,
+  onConfirm,
+  onCancel,
+}) => {
+  return (
+    <div className="confirmation-overlay">
+      <div className="confirmation-modal">
+        <p className="message">{message}</p>
+        <div className="buttton-wrapper">
+          <div className="confirmation-button" onClick={onConfirm}>
+            OK
+          </div>
+          <div className="confirmation-button" onClick={onCancel}>
+            Cancel
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConfirmationPopup;

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

@@ -207,10 +207,11 @@ export const DraggableWidget = ({
     }
   };
 
-  useClickOutside(chartWidget, () => {
+  // useClickOutside(chartWidget, () => {
-    setSelectedChartId(null);
+  //   setSelectedChartId(null);
-  });
+  // });
 
+  console.log('isPanelHidden: ', isPanelHidden);
   return (
     <>
       <div
@@ -225,7 +226,6 @@ export const DraggableWidget = ({
         onDragOver={handleDragOver}
         onDrop={handleDrop}
         style={{
-          opacity: isPanelHidden ? 0 : 1,
           pointerEvents: isPanelHidden ? "none" : "auto",
         }}
         ref={chartWidget}

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

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

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

@@ -21,6 +21,8 @@ import WarehouseThroughputComponent from "../realTimeVis/floating/WarehouseThrou
 import FleetEfficiencyComponent from "../realTimeVis/floating/FleetEfficiencyComponent";
 import { useWidgetStore } from "../../../store/useWidgetStore";
 import { useClickOutside } from "./functions/handleWidgetsOuterClick";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import { useSelectedZoneStore } from "../../../store/useZoneStore";
 interface DraggingState {
   zone: string;
   index: number;
@@ -43,11 +45,14 @@ interface DraggingState {
   };
 }
 const DroppedObjects: React.FC = () => {
+  const { isPlaying } = usePlayButtonStore();
   const zones = useDroppedObjectsStore((state) => state.zones);
   const [openKebabId, setOpenKebabId] = useState<string | null>(null);
   const updateObjectPosition = useDroppedObjectsStore(
     (state) => state.updateObjectPosition
   );
+  const { setSelectedZone, selectedZone } = useSelectedZoneStore();
+
   const deleteObject = useDroppedObjectsStore((state) => state.deleteObject);
 
   const duplicateObject = useDroppedObjectsStore(
@@ -70,10 +75,9 @@ const DroppedObjects: React.FC = () => {
   } | null>(null); // State to track the current position during drag
   const animationRef = useRef<number | null>(null);
   const { activeModule } = useModuleStore();
-  const chartWidgetFloating = useRef<HTMLDivElement>(null);
+  const chartWidget = useRef<HTMLDivElement>(null);
-
-  // useClickOutside(chartWidgetFloating, () => {
 
+  // useClickOutside(chartWidget, () => {
   //   setSelectedChartId(null);
   // });
 
@@ -115,7 +119,7 @@ const DroppedObjects: React.FC = () => {
     ) {
       return;
     }
-
+    if (isPlaying === true) return;
     const obj = zone.objects[index];
     const element = event.currentTarget as HTMLElement;
 
@@ -283,7 +287,6 @@ const DroppedObjects: React.FC = () => {
           updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
         }
       } catch (error) {
-        console.error("Error in handlePointerUp:", error);
       } finally {
         setDraggingIndex(null);
         setOffset(null);
@@ -304,7 +307,7 @@ const DroppedObjects: React.FC = () => {
 
   const handlePointerMove = (event: React.PointerEvent) => {
     if (!draggingIndex || !offset) return;
-
+    if (isPlaying === true) return;
     const container = document.getElementById("real-time-vis-canvas");
     if (!container) return;
 
@@ -414,7 +417,6 @@ const DroppedObjects: React.FC = () => {
         updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
       }
     } catch (error) {
-      console.error("Error in handlePointerUp:", error);
     } finally {
       // Clean up regardless of success or failure
       setDraggingIndex(null);
@@ -447,29 +449,45 @@ const DroppedObjects: React.FC = () => {
           className={`${obj.className} ${
             selectedChartId?.id === obj.id && "activeChart"
           }`}
-          ref={chartWidgetFloating}
+          ref={chartWidget}
           style={{
             position: "absolute",
             top:
               typeof obj.position.top === "number"
-                ? `${obj.position.top}px`
+                ? `calc(${obj.position.top}px + ${
+                    isPlaying && selectedZone.activeSides.includes("top")
+                      ? 90
+                      : 0
+                  }px)`
                 : "auto",
             left:
               typeof obj.position.left === "number"
-                ? `${obj.position.left}px`
+                ? `calc(${obj.position.left}px + ${
+                    isPlaying && selectedZone.activeSides.includes("left")
+                      ? 90
+                      : 0
+                  }px)`
                 : "auto",
             right:
               typeof obj.position.right === "number"
-                ? `${obj.position.right}px`
+                ? `calc(${obj.position.right}px + ${
+                    isPlaying && selectedZone.activeSides.includes("right")
+                      ? 90
+                      : 0
+                  }px)`
                 : "auto",
             bottom:
               typeof obj.position.bottom === "number"
-                ? `${obj.position.bottom}px`
+                ? `calc(${obj.position.bottom}px + ${
+                    isPlaying && selectedZone.activeSides.includes("bottom")
+                      ? 90
+                      : 0
+                  }px)`
                 : "auto",
           }}
-          onPointerDown={(event) => handlePointerDown(event, index)}
+          onPointerDown={(event) => {
-          onClick={() => {
             setSelectedChartId(obj);
+            handlePointerDown(event, index);
           }}
         >
           {obj.className === "floating total-card" ? (
@@ -523,7 +541,8 @@ const DroppedObjects: React.FC = () => {
       ))}
 
       {/* Render DistanceLines component during drag */}
-      {draggingIndex !== null &&
+      {isPlaying === false &&
+        draggingIndex !== null &&
         activeEdges !== null &&
         currentPosition !== null && (
           <DistanceLines
@@ -555,3 +574,5 @@ const DroppedObjects: React.FC = () => {
 };
 
 export default DroppedObjects;
+
+// always place the mousePointer in the same point in the floatingCard even in pointerMove

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

@@ -24,7 +24,7 @@ interface PanelProps {
     lockedPanels: Side[];
     zoneId: string;
     zoneViewPortTarget: number[];
-    zoneViewPortPosition: number[]
+    zoneViewPortPosition: number[];
     widgets: Widget[];
   };
   setSelectedZone: React.Dispatch<
@@ -36,7 +36,7 @@ interface PanelProps {
       lockedPanels: Side[];
       zoneId: string;
       zoneViewPortTarget: number[];
-      zoneViewPortPosition: number[]
+      zoneViewPortPosition: number[];
       widgets: Widget[];
     }>
   >;
@@ -60,6 +60,14 @@ const Panel: React.FC<PanelProps> = ({
   const [openKebabId, setOpenKebabId] = useState<string | null>(null);
 
   const { isPlaying } = usePlayButtonStore();
+  console.log("selectedZone: ", selectedZone.panelOrder);
+  console.log("hiddenPanels: ", hiddenPanels);
+
+  // Check if any hidden panel is in the panelOrder of selectedZone
+  const isPanelInSelectedZone = hiddenPanels.some(
+    (panel) => selectedZone.panelOrder.includes(panel as Side) // Typecast to Side
+  );
+  console.log("Is panel in selectedZone: ", isPanelInSelectedZone);
 
   const getPanelStyle = useMemo(
     () => (side: Side) => {
@@ -75,8 +83,9 @@ const Panel: React.FC<PanelProps> = ({
         case "top":
         case "bottom":
           return {
-            width: `calc(100% - ${(leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
+            width: `calc(100% - ${
-              }px)`,
+              (leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
+            }px)`,
             height: `${panelSize - 2}px`,
             left: leftActive ? `${panelSize}px` : "0",
             right: rightActive ? `${panelSize}px` : "0",
@@ -86,8 +95,9 @@ const Panel: React.FC<PanelProps> = ({
         case "right":
           return {
             width: `${panelSize - 2}px`,
-            height: `calc(100% - ${(topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
+            height: `calc(100% - ${
-              }px)`,
+              (topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
+            }px)`,
             top: topActive ? `${panelSize}px` : "0",
             bottom: bottomActive ? `${panelSize}px` : "0",
             [side]: "0",
@@ -100,7 +110,6 @@ const Panel: React.FC<PanelProps> = ({
   );
 
   const handleDrop = (e: React.DragEvent, panel: Side) => {
-
     e.preventDefault();
     const { draggedAsset } = useWidgetStore.getState();
     if (!draggedAsset) return;
@@ -141,15 +150,19 @@ const Panel: React.FC<PanelProps> = ({
   // while dublicate check this and add
   const addWidgetToPanel = async (asset: any, panel: Side) => {
     const email = localStorage.getItem("email") || "";
-    const organization = email?.split("@")[1]?.split(".")[0]
+    const organization = email?.split("@")[1]?.split(".")[0];
     const newWidget = {
       ...asset,
       id: generateUniqueId(),
       panel,
     };
     try {
-      let response = await addingWidgets(selectedZone.zoneId, organization, newWidget);
+      let response = await addingWidgets(
- 
+        selectedZone.zoneId,
+        organization,
+        newWidget
+      );
+
       if (response.message === "Widget created successfully") {
         setSelectedZone((prev) => ({
           ...prev,
@@ -159,7 +172,6 @@ const Panel: React.FC<PanelProps> = ({
     } catch (error) {
       console.error("Error adding widget:", error);
     }
-
   };
 
   useEffect(() => {
@@ -191,7 +203,6 @@ const Panel: React.FC<PanelProps> = ({
   const handleReorder = (fromIndex: number, toIndex: number, panel: Side) => {
     if (!selectedZone) return; // Ensure selectedZone is not null
 
-
     setSelectedZone((prev) => {
       if (!prev) return prev; // Ensure prev is not null
 
@@ -218,7 +229,9 @@ const Panel: React.FC<PanelProps> = ({
       {selectedZone.activeSides.map((side) => (
         <div
           key={side}
-          className={`panel ${side}-panel absolute ${isPlaying && ""}`}
+          className={`panel ${side}-panel absolute ${isPlaying ? "" : ""} ${
+            hiddenPanels.includes(side) ? "hidePanel" : ""
+          }`}
           style={getPanelStyle(side)}
           onDrop={(e) => handleDrop(e, side)}
           onDragOver={(e) => e.preventDefault()}
@@ -264,4 +277,3 @@ const Panel: React.FC<PanelProps> = ({
 };
 
 export default Panel;
-

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

@@ -18,6 +18,9 @@ import { getZone2dData } from "../../../services/realTimeVisulization/zoneData/g
 import { generateUniqueId } from "../../../functions/generateUniqueId";
 import { determinePosition } from "./functions/determinePosition";
 import { addingFloatingWidgets } from "../../../services/realTimeVisulization/zoneData/addFloatingWidgets";
+import EditWidgetOption from "../menu/EditWidgetOption";
+import RenderOverlay from "../../templates/Overlay";
+import ConfirmationPopup from "../../layout/confirmationPopup/ConfirmationPopup";
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -51,6 +54,9 @@ const RealTimeVisulization: React.FC = () => {
   const [zonesData, setZonesData] = useState<FormattedZoneData>({});
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
   const { zones } = useZones();
+
+  const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
+
   const [floatingWidgets, setFloatingWidgets] = useState<
     Record<string, { zoneName: string; zoneId: string; objects: any[] }>
   >({});
@@ -63,6 +69,7 @@ const RealTimeVisulization: React.FC = () => {
       const organization = email?.split("@")[1]?.split(".")[0];
       try {
         const response = await getZone2dData(organization);
+        // console.log('response: ', response);
 
         if (!Array.isArray(response)) {
           return;
@@ -184,6 +191,20 @@ const RealTimeVisulization: React.FC = () => {
         left: isPlaying || activeModule !== "visualization" ? "0%" : "",
       }}
     >
+      {/* <RenderOverlay>
+        <EditWidgetOption
+          options={["Dublicate", "Vertical Move", "Horizontal Move", "Delete"]}
+        />
+      </RenderOverlay> */}
+      {openConfirmationPopup && (
+        <RenderOverlay>
+          <ConfirmationPopup
+            message={"Are you sure want to delete?"}
+            onConfirm={() => console.log("confirm")}
+            onCancel={() => setOpenConfirmationPopup(false)}
+          />
+        </RenderOverlay>
+      )}
       <div
         className="scene-container"
         style={{
@@ -195,7 +216,7 @@ const RealTimeVisulization: React.FC = () => {
         onDrop={(event) => handleDrop(event)}
         onDragOver={(event) => event.preventDefault()}
       >
-        <Scene />
+        {/* <Scene /> */}
       </div>
       {activeModule === "visualization" && selectedZone.zoneName !== "" && (
         <DroppedObjects />

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

@@ -6,17 +6,15 @@ export const useClickOutside = (
 ) => {
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (ref.current && !ref.current.contains(event.target as Node)) {
+      if (ref.current && !event.composedPath().includes(ref.current)) {
         callback();
       }
     };
 
-    // Add event listener to document
     document.addEventListener("mousedown", handleClickOutside);
 
-    // Cleanup event listener on component unmount
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [ref, callback]);
-};
+};

app/src/components/ui/menu/EditWidgetOption.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+interface EditWidgetOptionProps {
+  options: string[];
+}
+
+const EditWidgetOption: React.FC<EditWidgetOptionProps> = ({ options }) => {
+  return (
+    <div className="editWidgetOptions-wrapper">
+      <div className="editWidgetOptions">
+        {options.map((option, index) => (
+          <div className="option" key={index}>
+            {option}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default EditWidgetOption;

app/src/modules/builder/geomentries/assets/addAssetModel.ts

@@ -60,7 +60,7 @@ async function addAssetModel(
             if (intersectPoint.y < 0) {
                 intersectPoint = new THREE.Vector3(intersectPoint.x, 0, intersectPoint.z);
             }
-            console.log('selectedItem: ', selectedItem);
+            // console.log('selectedItem: ', selectedItem);
             const cachedModel = THREE.Cache.get(selectedItem.id);
             if (cachedModel) {
                 // console.log(`[Cache] Fetching ${selectedItem.name}`);
@@ -145,10 +145,9 @@ async function handleModelLoad(
     };
 
     const email = localStorage.getItem("email");
-    const organization = email ? email.split("@")[1].split(".")[0] : "default";
+    const organization = email ? email.split("@")[1].split(".")[0] : "";
 
     getAssetEventType(selectedItem.id, organization).then(async (res) => {
-        console.log('res: ', res);
 
         if (res.type === "Conveyor") {
             const pointUUIDs = res.points.map(() => THREE.MathUtils.generateUUID());
@@ -177,7 +176,7 @@ async function handleModelLoad(
                 speed: 'Inherit'
             };
 
-            console.log('eventData: ', eventData);
+            // console.log('eventData: ', eventData);
             newFloorItem.eventData = eventData;
         }
 
@@ -215,6 +214,8 @@ async function handleModelLoad(
             eventData: newFloorItem.eventData,
             socketId: socket.id
         };
+        console.log('data: ', data);
+
 
         socket.emit("v2:model-asset:add", data);
 

app/src/modules/builder/geomentries/assets/deleteFloorItems.ts

@@ -2,9 +2,9 @@ import { toast } from 'react-toastify';
 import * as THREE from 'three';
 
 import * as Types from "../../../../types/world/worldTypes";
-import { getFloorItems } from '../../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi';
 // import { deleteFloorItem } from '../../../../services/factoryBuilder/assest/floorAsset/deleteFloorItemApi';
 import { Socket } from 'socket.io-client';
+import { getFloorAssets } from '../../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi';
 
 async function DeleteFloorItems(
     itemsGroup: Types.RefGroup,
@@ -20,7 +20,7 @@ async function DeleteFloorItems(
         const email = localStorage.getItem('email')
         const organization = (email!.split("@")[1]).split(".")[0];
 
-        const items = await getFloorItems(organization);
+        const items = await getFloorAssets(organization);
         const removedItem = items.find(
             (item: { modeluuid: string }) => item.modeluuid === hoveredDeletableFloorItem.current?.uuid
         );
@@ -42,7 +42,7 @@ async function DeleteFloorItems(
             socketId: socket.id
         }
 
-        const response = socket.emit('v1:FloorItems:delete', data)
+        const response = socket.emit('v2:model-asset:delete', data)
 
         if (response) {
             const updatedItems = items.filter(

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

@@ -27,7 +27,7 @@ import DeletableHoveredFloorItems from "../geomentries/assets/deletableHoveredFl
 import DeleteFloorItems from "../geomentries/assets/deleteFloorItems";
 import loadInitialFloorItems from "../../scene/IntialLoad/loadInitialFloorItems";
 import addAssetModel from "../geomentries/assets/addAssetModel";
-import { getFloorItems } from "../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi";
+import { getFloorAssets } from "../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi";
 import useModuleStore from "../../../store/useModuleStore";
 // import { retrieveGLTF } from "../../../utils/indexDB/idbUtils";
 const assetManagerWorker = new Worker(
@@ -95,7 +95,7 @@ const FloorItemsGroup = ({
       }
     };
 
-    getFloorItems(organization).then((data) => {
+    getFloorAssets(organization).then((data) => {
       const uniqueItems = (data as Types.FloorItems).filter(
         (item, index, self) =>
           index === self.findIndex((t) => t.modelfileID === item.modelfileID)

app/src/modules/collaboration/collabCams.tsx

@@ -32,7 +32,7 @@ const CamModelsGroup = () => {
     if (!socket) return;
     const organization = email!.split("@")[1].split(".")[0];
 
-    socket.on("userConnectRespones", (data: any) => {
+    socket.on("userConnectResponse", (data: any) => {
       if (!groupRef.current) return;
       if (data.data.userData.email === email) return;
       if (socket.id === data.socketId || organization !== data.organization)
@@ -64,7 +64,11 @@ const CamModelsGroup = () => {
       });
     });
 
-    socket.on("userDisConnectRespones", (data: any) => {
+    // socket.on("users:online", (data: any) => { 
+    //   console.log('users online: ', data);
+    // })
+
+    socket.on("userDisConnectResponse", (data: any) => {
       if (!groupRef.current) return;
       if (socket.id === data.socketId || organization !== data.organization)
         return;
@@ -109,6 +113,15 @@ const CamModelsGroup = () => {
     };
   }, [socket, activeUsers]);
 
+
+  // useEffect(() => {
+  //   console.log(activeUsers);
+  // }, [activeUsers])
+
+  // useEffect(() => {
+  //   console.log(models);
+  // }, [models])
+
   useFrame(() => {
     if (!groupRef.current) return;
     Object.keys(models).forEach((uuid) => {
@@ -142,7 +155,7 @@ const CamModelsGroup = () => {
       const filteredData = data.cameraDatas.filter(
         (camera: any) => camera.userData.email !== email
       );
-      let a:any = [];
+      let a: any = [];
       if (filteredData.length > 0) {
         loader.load(camModel, (gltf) => {
           const newCams = filteredData.map((cam: any) => {

app/src/modules/collaboration/socketResponses.dev.tsx

@@ -82,14 +82,14 @@ export default function SocketResponses({
         })
 
         socket.on('model-asset:response:updates', async (data: any) => {
-            console.log('data: ', data);
+            // console.log('data: ', data);
             if (socket.id === data.socketId) {
                 return
             }
             if (organization !== data.organization) {
                 return
             }
-            if (data.message === "flooritem created") {
+            if (data.message === "Model created successfully") {
                 const loader = new GLTFLoader();
                 const dracoLoader = new DRACOLoader();
 
@@ -101,10 +101,61 @@ export default function SocketResponses({
                     isTempLoader.current = true;
                     const cachedModel = THREE.Cache.get(data.data.modelname);
                     let url;
-
                     if (cachedModel) {
                         // console.log(`Getting ${data.data.modelname} from cache`);
-                        url = URL.createObjectURL(cachedModel);
+                        const model = cachedModel.scene.clone();
+                        model.uuid = data.data.modeluuid;
+                        model.userData = { name: data.data.modelname, modelId: data.data.modelFileID };
+                        model.position.set(...data.data.position as [number, number, number]);
+                        model.rotation.set(data.data.rotation.x, data.data.rotation.y, data.data.rotation.z);
+                        model.scale.set(...CONSTANTS.assetConfig.defaultScaleBeforeGsap);
+
+                        model.traverse((child: any) => {
+                            if (child.isMesh) {
+                                // Clone the material to ensure changes are independent
+                                // child.material = child.material.clone();
+
+                                child.castShadow = true;
+                                child.receiveShadow = true;
+                            }
+                        });
+
+                        itemsGroup.current.add(model);
+
+                        if (tempLoader.current) {
+                            tempLoader.current.material.dispose();
+                            tempLoader.current.geometry.dispose();
+                            itemsGroup.current.remove(tempLoader.current);
+                            tempLoader.current = undefined;
+                        }
+
+                        const newFloorItem: Types.FloorItemType = {
+                            modeluuid: data.data.modeluuid,
+                            modelname: data.data.modelname,
+                            modelfileID: data.data.modelfileID,
+                            position: [...data.data.position as [number, number, number]],
+                            rotation: {
+                                x: model.rotation.x,
+                                y: model.rotation.y,
+                                z: model.rotation.z,
+                            },
+                            isLocked: data.data.isLocked,
+                            isVisible: data.data.isVisible,
+                        };
+
+                        if (data.data.eventData) {
+                            newFloorItem.eventData = data.data.eventData;
+                        }
+
+                        setFloorItems((prevItems: any) => {
+                            const updatedItems = [...(prevItems || []), newFloorItem];
+                            localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
+                            return updatedItems;
+                        });
+
+                        gsap.to(model.position, { y: data.data.position[1], duration: 1.5, ease: 'power2.out' });
+                        gsap.to(model.scale, { x: 1, y: 1, z: 1, duration: 1.5, ease: 'power2.out', onComplete: () => { toast.success("Model Added!") } });
+
                     } else {
                         const indexedDBModel = await retrieveGLTF(data.data.modelname);
                         if (indexedDBModel) {
@@ -118,7 +169,9 @@ export default function SocketResponses({
                         }
                     }
 
-                    loadModel(url);
+                    if (url) {
+                        loadModel(url);
+                    }
 
                 } catch (error) {
                     console.error('Error fetching asset model:', error);
@@ -168,6 +221,10 @@ export default function SocketResponses({
                             isVisible: data.data.isVisible,
                         };
 
+                        if (data.data.eventData) {
+                            newFloorItem.eventData = data.data.eventData;
+                        }
+
                         setFloorItems((prevItems: any) => {
                             const updatedItems = [...(prevItems || []), newFloorItem];
                             localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
@@ -183,7 +240,7 @@ export default function SocketResponses({
                     });
                 }
 
-            } else if (data.message === "flooritems updated") {
+            } else if (data.message === "Model updated successfully") {
                 itemsGroup.current.children.forEach((item: THREE.Group) => {
                     if (item.uuid === data.data.modeluuid) {
                         item.position.set(...data.data.position as [number, number, number]);
@@ -212,14 +269,14 @@ export default function SocketResponses({
             }
         })
 
-        socket.on('FloorItemsDeleteResponse', (data: any) => {
+        socket.on('model-asset:response:updates', (data: any) => {
             if (socket.id === data.socketId) {
                 return
             }
             if (organization !== data.organization) {
                 return
             }
-            if (data.message === "flooritem deleted") {
+            if (data.message === "Model deleted successfully") {
                 const deletedUUID = data.data.modeluuid;
                 let items = JSON.parse(localStorage.getItem("FloorItems")!);
 
@@ -746,7 +803,6 @@ export default function SocketResponses({
                 return
             }
             if (data.message === "zone deleted") {
-                console.log('data: ', data);
                 const updatedZones = zones.filter((zone: any) => zone.zoneId !== data.data.zoneId);
                 setZones(updatedZones);
 
@@ -769,7 +825,7 @@ export default function SocketResponses({
 
         return () => {
             socket.off('zone:response:updates');
-            socket.off('zone:response:updates');
+            socket.off('zone:response:delete');
         };
     }, [socket, zones, zonePoints])
 

app/src/modules/scene/IntialLoad/loadInitialFloorItems.ts

@@ -5,9 +5,9 @@ import * as THREE from 'three';
 import * as CONSTANTS from '../../../types/world/worldConstants';
 import { toast } from 'react-toastify';
 import * as Types from "../../../types/world/worldTypes";
-import { getFloorItems } from '../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi';
 import { initializeDB, retrieveGLTF, storeGLTF } from '../../../utils/indexDB/idbUtils';
 import { getCamera } from '../../../services/factoryBuilder/camera/getCameraApi';
+import { getFloorAssets } from '../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi';
 
 async function loadInitialFloorItems(
     itemsGroup: Types.RefGroup,
@@ -18,7 +18,7 @@ async function loadInitialFloorItems(
     const email = localStorage.getItem('email');
     const organization = (email!.split("@")[1]).split(".")[0];
 
-    const items = await getFloorItems(organization);
+    const items = await getFloorAssets(organization);
     localStorage.setItem("FloorItems", JSON.stringify(items));
     await initializeDB();
 
@@ -121,18 +121,34 @@ async function loadInitialFloorItems(
                 });
             } else {
                 // console.log(`Item ${item.modelname} is not near`);
-                setFloorItems((prevItems) => [
+                if (item.eventData) {
-                    ...(prevItems || []),
+                    setFloorItems((prevItems) => [
-                    {
+                        ...(prevItems || []),
-                        modeluuid: item.modeluuid,
+                        {
-                        modelname: item.modelname,
+                            modeluuid: item.modeluuid,
-                        position: item.position,
+                            modelname: item.modelname,
-                        rotation: item.rotation,
+                            position: item.position,
-                        modelfileID: item.modelfileID,
+                            rotation: item.rotation,
-                        isLocked: item.isLocked,
+                            modelfileID: item.modelfileID,
-                        isVisible: item.isVisible,
+                            isLocked: item.isLocked,
-                    },
+                            isVisible: item.isVisible,
-                ]);
+                            // eventData: item.eventData,
+                        },
+                    ]);
+                } else {
+                    setFloorItems((prevItems) => [
+                        ...(prevItems || []),
+                        {
+                            modeluuid: item.modeluuid,
+                            modelname: item.modelname,
+                            position: item.position,
+                            rotation: item.rotation,
+                            modelfileID: item.modelfileID,
+                            isLocked: item.isLocked,
+                            isVisible: item.isVisible,
+                        },
+                    ]);
+                }
                 modelsLoaded++;
                 checkLoadingCompletion(modelsLoaded, modelsToLoad, dracoLoader, () => { });
             }
@@ -169,18 +185,35 @@ function processLoadedModel(
 
 
     itemsGroup?.current?.add(model);
-    setFloorItems((prevItems) => [
+
-        ...(prevItems || []),
+    if (item.eventData) {
-        {
+        setFloorItems((prevItems) => [
-            modeluuid: item.modeluuid,
+            ...(prevItems || []),
-            modelname: item.modelname,
+            {
-            position: item.position,
+                modeluuid: item.modeluuid,
-            rotation: item.rotation,
+                modelname: item.modelname,
-            modelfileID: item.modelfileID,
+                position: item.position,
-            isLocked: item.isLocked,
+                rotation: item.rotation,
-            isVisible: item.isVisible,
+                modelfileID: item.modelfileID,
-        },
+                isLocked: item.isLocked,
-    ]);
+                isVisible: item.isVisible,
+                // eventData: item.eventData,
+            },
+        ]);
+    } else {
+        setFloorItems((prevItems) => [
+            ...(prevItems || []),
+            {
+                modeluuid: item.modeluuid,
+                modelname: item.modelname,
+                position: item.position,
+                rotation: item.rotation,
+                modelfileID: item.modelfileID,
+                isLocked: item.isLocked,
+                isVisible: item.isVisible,
+            },
+        ]);
+    }
 
     gsap.to(model.position, { y: item.position[1], duration: 1.5, ease: 'power2.out' });
     gsap.to(model.scale, { x: 1, y: 1, z: 1, duration: 1.5, ease: 'power2.out' });

app/src/modules/scene/controls/selection/copyPasteControls.tsx

@@ -180,7 +180,7 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
                     socketId: socket.id,
                 };
 
-                socket.emit("v1:FloorItems:set", data);
+                socket.emit("v2:model-asset:add", data);
 
                 itemsGroupRef.current.add(obj);
             }

app/src/modules/scene/controls/selection/duplicationControls.tsx

@@ -161,7 +161,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
                     socketId: socket.id,
                 };
 
-                socket.emit("v1:FloorItems:set", data);
+                socket.emit("v2:model-asset:add", data);
 
                 itemsGroupRef.current.add(obj);
             }

app/src/modules/scene/controls/selection/moveControls.tsx

@@ -209,7 +209,7 @@ function MoveControls({ movedObjects, setMovedObjects, itemsGroupRef, copiedObje
                     socketId: socket.id,
                 };
 
-                socket.emit("v1:FloorItems:set", data);
+                socket.emit("v2:model-asset:add", data);
 
                 itemsGroupRef.current.add(obj);
             }

app/src/modules/scene/controls/selection/rotateControls.tsx

@@ -212,7 +212,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
                     socketId: socket.id,
                 };
 
-                socket.emit("v1:FloorItems:set", data);
+                socket.emit("v2:model-asset:add", data);
 
                 itemsGroupRef.current.add(obj);
             }

app/src/modules/scene/controls/selection/selectionControls.tsx

@@ -222,7 +222,7 @@ const SelectionControls: React.FC = () => {
                     socketId: socket.id
                 };
 
-                socket.emit('v1:FloorItems:delete', data);
+                socket.emit('v2:model-asset:delete', data);
 
                 selectedMesh.traverse((child: THREE.Object3D) => {
                     if (child instanceof THREE.Mesh) {

app/src/modules/scene/controls/transformControls.tsx

@@ -83,7 +83,7 @@ export default function TransformControl() {
                     socketId: socket.id
                 }
 
-                socket.emit('v1:FloorItems:set', data);
+                socket.emit('v2:model-asset:add', data);
             }
             localStorage.setItem("FloorItems", JSON.stringify(updatedItems));
             return updatedItems;

app/src/modules/simulation/behaviour/behaviour.tsx

@@ -12,14 +12,15 @@ function Behaviour() {
 
         floorItems.forEach((item: Types.FloorItemType) => {
             if (item.modelfileID === "672a090f80d91ac979f4d0bd") {
+                console.log('item: ', item);
                 const point1Position = new THREE.Vector3(0, 0.85, 2.2);
                 const middlePointPosition = new THREE.Vector3(0, 0.85, 0);
                 const point2Position = new THREE.Vector3(0, 0.85, -2.2);
-
+                
                 const point1UUID = THREE.MathUtils.generateUUID();
                 const middlePointUUID = THREE.MathUtils.generateUUID();
                 const point2UUID = THREE.MathUtils.generateUUID();
-
+                
                 const newPath: Types.ConveyorEventsSchema = {
                     modeluuid: item.modeluuid,
                     modelName: item.modelname,
@@ -29,7 +30,7 @@ function Behaviour() {
                             uuid: point1UUID,
                             position: [point1Position.x, point1Position.y, point1Position.z],
                             rotation: [0, 0, 0],
-                            actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Inherit', material: 'Inherit', delay: 'Inherit', spawnInterval: 'Inherit', isUsed: false }],
+                            actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Inherit', material: 'Inherit', delay: 'Inherit', spawnInterval: 'Inherit', isUsed: true }],
                             triggers: [],
                             connections: { source: { pathUUID: item.modeluuid, pointUUID: point1UUID }, targets: [] },
                         },
@@ -37,7 +38,7 @@ function Behaviour() {
                             uuid: middlePointUUID,
                             position: [middlePointPosition.x, middlePointPosition.y, middlePointPosition.z],
                             rotation: [0, 0, 0],
-                            actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Inherit', material: 'Inherit', delay: 'Inherit', spawnInterval: 'Inherit', isUsed: false }],
+                            actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Inherit', material: 'Inherit', delay: 'Inherit', spawnInterval: 'Inherit', isUsed: true }],
                             triggers: [],
                             connections: { source: { pathUUID: item.modeluuid, pointUUID: middlePointUUID }, targets: [] },
                         },
@@ -45,13 +46,13 @@ function Behaviour() {
                             uuid: point2UUID,
                             position: [point2Position.x, point2Position.y, point2Position.z],
                             rotation: [0, 0, 0],
-                            actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Inherit', material: 'Inherit', delay: 'Inherit', spawnInterval: 'Inherit', isUsed: false }],
+                            actions: [{ uuid: THREE.MathUtils.generateUUID(), name: 'Action 1', type: 'Inherit', material: 'Inherit', delay: 'Inherit', spawnInterval: 'Inherit', isUsed: true }],
                             triggers: [],
                             connections: { source: { pathUUID: item.modeluuid, pointUUID: point2UUID }, targets: [] },
                         },
                     ],
-                    assetPosition: [...item.position],
+                    position: [...item.position],
-                    assetRotation: [item.rotation.x, item.rotation.y, item.rotation.z],
+                    rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
                     speed: 'Inherit',
                 };
 
@@ -71,7 +72,7 @@ function Behaviour() {
                         connections: { source: { pathUUID: item.modeluuid, pointUUID: pointUUID }, targets: [] },
                         speed: 2,
                     },
-                    assetPosition: [...item.position],
+                    position: [...item.position],
                 };
 
                 newPaths.push(newVehiclePath);

app/src/modules/simulation/path/pathCreation.tsx

@@ -171,8 +171,8 @@ function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject
                             name={`${path.modeluuid}-event-path`}
                             key={path.modeluuid}
                             ref={el => (groupRefs.current[path.modeluuid] = el!)}
-                            position={path.assetPosition}
+                            position={path.position}
-                            rotation={path.assetRotation}
+                            rotation={path.rotation}
                             onClick={(e) => {
                                 if (isConnecting || eyeDropMode) return;
                                 e.stopPropagation();
@@ -237,7 +237,7 @@ function PathCreation({ pathsGroupRef }: { pathsGroupRef: React.MutableRefObject
                             name={`${path.modeluuid}-vehicle-path`}
                             key={path.modeluuid}
                             ref={el => (groupRefs.current[path.modeluuid] = el!)}
-                            position={path.assetPosition}
+                            position={path.position}
                             onClick={(e) => {
                                 if (isConnecting || eyeDropMode) return;
                                 e.stopPropagation();

app/src/modules/simulation/process/processAnimator.tsx

@@ -0,0 +1,416 @@
+import React, { useRef, useState, useEffect, useMemo } from "react";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import { GLTFLoader } from "three-stdlib";
+import { useLoader, useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+import { GLTF } from "three-stdlib";
+import boxGltb from "../../../assets/gltf-glb/crate_box.glb";
+
+interface PointAction {
+  uuid: string;
+  name: string;
+  type: "Inherit" | "Spawn" | "Despawn" | "Delay" | "Swap";
+  material: string;
+  delay: string | number;
+  spawnInterval: string | number;
+  isUsed: boolean;
+}
+
+interface ProcessPoint {
+  uuid: string;
+  position: number[];
+  rotation: number[];
+  actions: PointAction[];
+  connections: {
+    source: { pathUUID: string; pointUUID: string };
+    targets: { pathUUID: string; pointUUID: string }[];
+  };
+}
+
+interface ProcessPath {
+  modeluuid: string;
+  modelName: string;
+  points: ProcessPoint[];
+  pathPosition: number[];
+  pathRotation: number[];
+  speed: number;
+}
+
+interface ProcessData {
+  id: string;
+  paths: ProcessPath[];
+  animationPath: { x: number; y: number; z: number }[];
+  pointActions: PointAction[][];
+  speed: number;
+}
+
+interface AnimationState {
+  currentIndex: number;
+  progress: number;
+  isAnimating: boolean;
+  speed: number;
+  isDelaying: boolean;
+  delayStartTime: number;
+  currentDelayDuration: number;
+  delayComplete: boolean;
+  currentPathIndex: number;
+  spawnPoints: Record<
+    string,
+    {
+      position: THREE.Vector3;
+      interval: number;
+      lastSpawnTime: number;
+    }
+  >;
+}
+
+const MAX_SPAWNED_OBJECTS = 20;
+
+const ProcessAnimator: React.FC<{ processes: ProcessData[] }> = ({
+  processes,
+}) => {
+  console.log("processes: ", processes);
+  const gltf = useLoader(GLTFLoader, boxGltb) as GLTF;
+  const { isPlaying, setIsPlaying } = usePlayButtonStore();
+
+  const groupRef = useRef<THREE.Group>(null);
+  const meshRef = useRef<THREE.Mesh>(null);
+  const [visible, setVisible] = useState(false);
+  const spawnedObjectsRef = useRef<THREE.Object3D[]>([]);
+
+  const materials = useMemo(
+    () => ({
+      Wood: new THREE.MeshStandardMaterial({ color: 0x8b4513 }),
+      Box: new THREE.MeshStandardMaterial({
+        color: 0xcccccc,
+        metalness: 0.8,
+        roughness: 0.2,
+      }),
+      Crate: new THREE.MeshStandardMaterial({
+        color: 0x00aaff,
+        metalness: 0.1,
+        roughness: 0.5,
+      }),
+      Default: new THREE.MeshStandardMaterial({ color: 0x00ff00 }),
+    }),
+    []
+  );
+
+  const [currentMaterial, setCurrentMaterial] = useState<THREE.Material>(
+    materials.Default
+  );
+
+  const { animationPath, currentProcess } = useMemo(() => {
+    const defaultProcess = {
+      animationPath: [],
+      pointActions: [],
+      speed: 1,
+      paths: [],
+    };
+    const cp = processes?.[0] || defaultProcess;
+    return {
+      animationPath:
+        cp.animationPath?.map((p) => new THREE.Vector3(p.x, p.y, p.z)) || [],
+      currentProcess: cp,
+    };
+  }, [processes]);
+
+  const animationStateRef = useRef<AnimationState>({
+    currentIndex: 0,
+    progress: 0,
+    isAnimating: false,
+    speed: currentProcess.speed,
+    isDelaying: false,
+    delayStartTime: 0,
+    currentDelayDuration: 0,
+    delayComplete: false,
+    currentPathIndex: 0,
+    spawnPoints: {},
+  });
+
+  const getPointDataForAnimationIndex = (index: number) => {
+    if (!processes[0]?.paths) return null;
+
+    if (index < 3) {
+      return processes[0].paths[0]?.points[index];
+    } else {
+      const path2Index = index - 3;
+      return processes[0].paths[1]?.points[path2Index];
+    }
+  };
+
+  useEffect(() => {
+    if (isPlaying) {
+      setVisible(true);
+      animationStateRef.current = {
+        currentIndex: 0,
+        progress: 0,
+        isAnimating: true,
+        speed: currentProcess.speed,
+        isDelaying: false,
+        delayStartTime: 0,
+        currentDelayDuration: 0,
+        delayComplete: false,
+        currentPathIndex: 0,
+        spawnPoints: {},
+      };
+
+      // Clear spawned objects
+      if (groupRef.current) {
+        spawnedObjectsRef.current.forEach((obj) => {
+          if (groupRef.current?.children.includes(obj)) {
+            groupRef.current.remove(obj);
+          }
+          if (obj instanceof THREE.Mesh) {
+            obj.material.dispose();
+          }
+        });
+        spawnedObjectsRef.current = [];
+      }
+
+      const currentRef = gltf?.scene ? groupRef.current : meshRef.current;
+      if (currentRef && animationPath.length > 0) {
+        currentRef.position.copy(animationPath[0]);
+      }
+    } else {
+      animationStateRef.current.isAnimating = false;
+    }
+  }, [isPlaying, currentProcess, animationPath]);
+
+  const handleMaterialSwap = (materialType: string) => {
+    const newMaterial =
+      materials[materialType as keyof typeof materials] || materials.Default;
+    setCurrentMaterial(newMaterial);
+
+    spawnedObjectsRef.current.forEach((obj) => {
+      if (obj instanceof THREE.Mesh) {
+        obj.material = newMaterial.clone();
+      }
+    });
+  };
+
+  const hasNonInheritActions = (actions: PointAction[] = []) => {
+    return actions.some((action) => action.isUsed && action.type !== "Inherit");
+  };
+
+  const handlePointActions = (
+    actions: PointAction[] = [],
+    currentTime: number,
+    currentPosition: THREE.Vector3
+  ) => {
+    let shouldStopAnimation = false;
+
+    actions.forEach((action) => {
+      if (!action.isUsed) return;
+
+      switch (action.type) {
+        case "Delay":
+          if (
+            !animationStateRef.current.isDelaying &&
+            !animationStateRef.current.delayComplete
+          ) {
+            const delayDuration =
+              typeof action.delay === "number"
+                ? action.delay
+                : parseFloat(action.delay as string) || 0;
+
+            if (delayDuration > 0) {
+              animationStateRef.current.isDelaying = true;
+              animationStateRef.current.delayStartTime = currentTime;
+              animationStateRef.current.currentDelayDuration = delayDuration;
+              shouldStopAnimation = true;
+            }
+          }
+          break;
+
+        case "Despawn":
+          setVisible(false);
+          setIsPlaying(false);
+          animationStateRef.current.isAnimating = false;
+          shouldStopAnimation = true;
+          break;
+
+        case "Spawn":
+          const spawnInterval =
+            typeof action.spawnInterval === "number"
+              ? action.spawnInterval
+              : parseFloat(action.spawnInterval as string) || 1;
+
+          const positionKey = currentPosition.toArray().join(",");
+
+          animationStateRef.current.spawnPoints[positionKey] = {
+            position: currentPosition.clone(),
+            interval: spawnInterval,
+            lastSpawnTime: currentTime - spawnInterval, // Force immediate spawn
+          };
+          break;
+
+        case "Swap":
+          if (action.material) {
+            handleMaterialSwap(action.material);
+          }
+          break;
+
+        case "Inherit":
+          break;
+      }
+    });
+
+    return shouldStopAnimation;
+  };
+
+  useFrame((state, delta) => {
+    const currentRef = gltf?.scene ? groupRef.current : meshRef.current;
+    if (
+      !currentRef ||
+      !animationStateRef.current.isAnimating ||
+      animationPath.length < 2
+    ) {
+      return;
+    }
+
+    const currentTime = state.clock.getElapsedTime();
+    const path = animationPath;
+    const stateRef = animationStateRef.current;
+
+    if (stateRef.currentIndex === 3 && stateRef.currentPathIndex === 0) {
+      stateRef.currentPathIndex = 1;
+    }
+
+    const currentPointData = getPointDataForAnimationIndex(
+      stateRef.currentIndex
+    );
+
+    if (stateRef.progress === 0 && currentPointData?.actions) {
+      const shouldStop = handlePointActions(
+        currentPointData.actions,
+        currentTime,
+        currentRef.position
+      );
+      if (shouldStop) return;
+    }
+
+    if (stateRef.isDelaying) {
+      if (
+        currentTime - stateRef.delayStartTime >=
+        stateRef.currentDelayDuration
+      ) {
+        stateRef.isDelaying = false;
+        stateRef.delayComplete = true;
+      } else {
+        return;
+      }
+    }
+
+    // Handle spawning - this is the key updated part
+    Object.entries(stateRef.spawnPoints).forEach(([key, spawnPoint]) => {
+      if (currentTime - spawnPoint.lastSpawnTime >= spawnPoint.interval) {
+        spawnPoint.lastSpawnTime = currentTime;
+
+        if (gltf?.scene && groupRef?.current) {
+          const newObject = gltf.scene.clone();
+          newObject.position.copy(spawnPoint.position);
+
+          newObject.traverse((child) => {
+            if (child instanceof THREE.Mesh) {
+              child.material = currentMaterial.clone();
+            }
+          });
+
+          groupRef.current.add(newObject);
+          spawnedObjectsRef.current.push(newObject);
+
+          // Clean up old objects if needed
+          console.log(
+            "spawnedObjectsRef.current.length: ",
+            spawnedObjectsRef.current.length
+          );
+          if (spawnedObjectsRef.current.length > MAX_SPAWNED_OBJECTS) {
+            const oldest = spawnedObjectsRef.current.shift();
+            if (oldest && groupRef.current.children.includes(oldest)) {
+              groupRef.current.remove(oldest);
+              if (oldest instanceof THREE.Mesh) {
+                oldest.material.dispose();
+              }
+            }
+          }
+        }
+      }
+    });
+
+    const nextPointIdx = stateRef.currentIndex + 1;
+    const isLastPoint = nextPointIdx >= path.length;
+
+    if (isLastPoint) {
+      if (currentPointData?.actions) {
+        const shouldStop = !hasNonInheritActions(currentPointData.actions);
+        if (shouldStop) {
+          currentRef.position.copy(path[stateRef.currentIndex]);
+          setIsPlaying(false);
+          stateRef.isAnimating = false;
+          return;
+        }
+      }
+    }
+
+    if (!isLastPoint) {
+      const nextPoint = path[nextPointIdx];
+      const distance = path[stateRef.currentIndex].distanceTo(nextPoint);
+      const movement = stateRef.speed * delta;
+      stateRef.progress += movement / distance;
+
+      if (stateRef.progress >= 1) {
+        stateRef.currentIndex = nextPointIdx;
+        stateRef.progress = 0;
+        stateRef.delayComplete = false;
+        currentRef.position.copy(nextPoint);
+      } else {
+        currentRef.position.lerpVectors(
+          path[stateRef.currentIndex],
+          nextPoint,
+          stateRef.progress
+        );
+      }
+    }
+  });
+
+  useEffect(() => {
+    return () => {
+      if (groupRef.current) {
+        spawnedObjectsRef.current.forEach((obj) => {
+          if (groupRef.current?.children.includes(obj)) {
+            groupRef.current.remove(obj);
+          }
+          if (obj instanceof THREE.Mesh) {
+            obj.material.dispose();
+          }
+        });
+        spawnedObjectsRef.current = [];
+      }
+    };
+  }, []);
+
+  if (!processes || processes.length === 0) {
+    return null;
+  }
+
+  if (!gltf?.scene) {
+    return visible ? (
+      <mesh ref={meshRef} material={currentMaterial}>
+        <boxGeometry args={[1, 1, 1]} />
+      </mesh>
+    ) : null;
+  }
+
+  return visible ? (
+    <group ref={groupRef}>
+      <primitive
+        object={gltf.scene.clone()}
+        scale={[1, 1, 1]}
+        material={currentMaterial}
+      />
+    </group>
+  ) : null;
+};
+
+export default ProcessAnimator;

app/src/modules/simulation/process/processContainer.tsx

@@ -0,0 +1,17 @@
+import React, { useState } from "react";
+import ProcessCreator from "./processCreator";
+import ProcessAnimator from "./processAnimator";
+
+const ProcessContainer: React.FC = () => {
+  const [processes, setProcesses] = useState<any[]>([]);
+
+
+  return (
+    <>
+      <ProcessCreator onProcessesCreated={setProcesses} />
+      {processes.length > 0 && <ProcessAnimator processes={processes} />}
+    </>
+  );
+};
+
+export default ProcessContainer;

app/src/modules/simulation/process/processCreator.tsx

@@ -0,0 +1,398 @@
+import React, {
+  useEffect,
+  useMemo,
+  useState,
+  useCallback,
+  useRef,
+} from "react";
+import { useSimulationPaths } from "../../../store/store";
+import * as THREE from "three";
+import { useThree } from "@react-three/fiber";
+import {
+  ConveyorEventsSchema,
+  VehicleEventsSchema,
+} from "../../../types/world/worldTypes";
+
+// Type definitions
+export interface PointAction {
+  uuid: string;
+  name: string;
+  type: string;
+  material: string;
+  delay: number | string;
+  spawnInterval: string | number;
+  isUsed: boolean;
+}
+
+export interface PathPoint {
+  uuid: string;
+  position: [number, number, number];
+  actions: PointAction[];
+  connections: {
+    targets: Array<{ pathUUID: string }>;
+  };
+}
+
+export interface SimulationPath {
+  modeluuid: string;
+  points: PathPoint[];
+  pathPosition: [number, number, number];
+  speed?: number;
+}
+
+export interface Process {
+  id: string;
+  paths: SimulationPath[];
+  animationPath: THREE.Vector3[];
+  pointActions: PointAction[][];
+  speed: number;
+}
+
+interface ProcessCreatorProps {
+  onProcessesCreated: (processes: Process[]) => void;
+}
+
+// Convert event schemas to SimulationPath
+function convertToSimulationPath(
+  path: ConveyorEventsSchema | VehicleEventsSchema
+): SimulationPath {
+  const { modeluuid } = path;
+
+  // Simplified normalizeAction function that preserves exact original properties
+  const normalizeAction = (action: any): PointAction => {
+    return { ...action }; // Return exact copy with no modifications
+  };
+
+  if (path.type === "Conveyor") {
+    return {
+      modeluuid,
+      points: path.points.map((point) => ({
+        uuid: point.uuid,
+        position: point.position,
+        actions: point.actions.map(normalizeAction), // Preserve exact actions
+        connections: {
+          targets: point.connections.targets.map((target) => ({
+            pathUUID: target.pathUUID,
+          })),
+        },
+      })),
+      pathPosition: path.position,
+      speed:
+        typeof path.speed === "string"
+          ? parseFloat(path.speed) || 1
+          : path.speed || 1,
+    };
+  } else {
+    return {
+      modeluuid,
+      points: [
+        {
+          uuid: path.point.uuid,
+          position: path.point.position,
+          actions: Array.isArray(path.point.actions)
+            ? path.point.actions.map(normalizeAction)
+            : [normalizeAction(path.point.actions)],
+          connections: {
+            targets: path.point.connections.targets.map((target) => ({
+              pathUUID: target.pathUUID,
+            })),
+          },
+        },
+      ],
+      pathPosition: path.position,
+      speed: path.point.speed || 1,
+    };
+  }
+}
+
+// Custom shallow comparison for arrays
+const areArraysEqual = (a: any[], b: any[]) => {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+};
+
+// Helper function to create an empty process
+const createEmptyProcess = (): Process => ({
+  id: `process-${Math.random().toString(36).substring(2, 11)}`,
+  paths: [],
+  animationPath: [],
+  pointActions: [],
+  speed: 1,
+});
+
+// Enhanced connection checking function
+function shouldReverseNextPath(
+  currentPath: SimulationPath,
+  nextPath: SimulationPath
+): boolean {
+  if (nextPath.points.length !== 3) return false;
+
+  const currentLastPoint = currentPath.points[currentPath.points.length - 1];
+  const nextFirstPoint = nextPath.points[0];
+  const nextLastPoint = nextPath.points[nextPath.points.length - 1];
+
+  // Check if current last connects to next last (requires reversal)
+  const connectsToLast = currentLastPoint.connections.targets.some(
+    (target) =>
+      target.pathUUID === nextPath.modeluuid &&
+      nextLastPoint.connections.targets.some(
+        (t) => t.pathUUID === currentPath.modeluuid
+      )
+  );
+
+  // Check if current last connects to next first (no reversal needed)
+  const connectsToFirst = currentLastPoint.connections.targets.some(
+    (target) =>
+      target.pathUUID === nextPath.modeluuid &&
+      nextFirstPoint.connections.targets.some(
+        (t) => t.pathUUID === currentPath.modeluuid
+      )
+  );
+
+  // Only reverse if connected to last point and not to first point
+  return connectsToLast && !connectsToFirst;
+}
+
+// Updated path adjustment function
+function adjustPathPointsOrder(paths: SimulationPath[]): SimulationPath[] {
+  if (paths.length < 2) return paths;
+
+  const adjustedPaths = [...paths];
+
+  for (let i = 0; i < adjustedPaths.length - 1; i++) {
+    const currentPath = adjustedPaths[i];
+    const nextPath = adjustedPaths[i + 1];
+
+    if (shouldReverseNextPath(currentPath, nextPath)) {
+      const reversedPoints = [
+        nextPath.points[2],
+        nextPath.points[1],
+        nextPath.points[0],
+      ];
+
+      adjustedPaths[i + 1] = {
+        ...nextPath,
+        points: reversedPoints,
+      };
+    }
+  }
+
+  return adjustedPaths;
+}
+
+// Main hook for process creation
+export function useProcessCreation() {
+  const { scene } = useThree();
+  const [processes, setProcesses] = useState<Process[]>([]);
+
+  const hasSpawnAction = useCallback((path: SimulationPath): boolean => {
+    return path.points.some((point) =>
+      point.actions.some((action) => action.type.toLowerCase() === "spawn")
+    );
+  }, []);
+
+  const createProcess = useCallback(
+    (paths: SimulationPath[]): Process => {
+      if (!paths || paths.length === 0) {
+        return createEmptyProcess();
+      }
+
+      const animationPath: THREE.Vector3[] = [];
+      const pointActions: PointAction[][] = [];
+      const processSpeed = paths[0]?.speed || 1;
+
+      for (const path of paths) {
+        for (const point of path.points) {
+          const obj = scene.getObjectByProperty("uuid", point.uuid);
+          if (!obj) {
+            console.warn(`Object with UUID ${point.uuid} not found in scene`);
+            continue;
+          }
+
+          const position = obj.getWorldPosition(new THREE.Vector3());
+          animationPath.push(position.clone());
+          pointActions.push(point.actions);
+        }
+      }
+
+      return {
+        id: `process-${Math.random().toString(36).substring(2, 11)}`,
+        paths,
+        animationPath,
+        pointActions,
+        speed: processSpeed,
+      };
+    },
+    [scene]
+  );
+
+  const getAllConnectedPaths = useCallback(
+    (
+      initialPath: SimulationPath,
+      allPaths: SimulationPath[],
+      visited: Set<string> = new Set()
+    ): SimulationPath[] => {
+      const connectedPaths: SimulationPath[] = [];
+      const queue: SimulationPath[] = [initialPath];
+      visited.add(initialPath.modeluuid);
+
+      const pathMap = new Map<string, SimulationPath>();
+      allPaths.forEach((path) => pathMap.set(path.modeluuid, path));
+
+      while (queue.length > 0) {
+        const currentPath = queue.shift()!;
+        connectedPaths.push(currentPath);
+
+        // Process outgoing connections
+        for (const point of currentPath.points) {
+          for (const target of point.connections.targets) {
+            if (!visited.has(target.pathUUID)) {
+              const targetPath = pathMap.get(target.pathUUID);
+              if (targetPath) {
+                visited.add(target.pathUUID);
+                queue.push(targetPath);
+              }
+            }
+          }
+        }
+
+        // Process incoming connections
+        for (const [uuid, path] of pathMap) {
+          if (!visited.has(uuid)) {
+            const hasConnectionToCurrent = path.points.some((point) =>
+              point.connections.targets.some(
+                (t) => t.pathUUID === currentPath.modeluuid
+              )
+            );
+            if (hasConnectionToCurrent) {
+              visited.add(uuid);
+              queue.push(path);
+            }
+          }
+        }
+      }
+
+      return connectedPaths;
+    },
+    []
+  );
+
+  const createProcessesFromPaths = useCallback(
+    (paths: SimulationPath[]): Process[] => {
+      if (!paths || paths.length === 0) return [];
+
+      const visited = new Set<string>();
+      const processes: Process[] = [];
+      const pathMap = new Map<string, SimulationPath>();
+      paths.forEach((path) => pathMap.set(path.modeluuid, path));
+
+      for (const path of paths) {
+        if (!visited.has(path.modeluuid) && hasSpawnAction(path)) {
+          const connectedPaths = getAllConnectedPaths(path, paths, visited);
+          const adjustedPaths = adjustPathPointsOrder(connectedPaths);
+          const process = createProcess(adjustedPaths);
+          processes.push(process);
+        }
+      }
+
+      return processes;
+    },
+    [createProcess, getAllConnectedPaths, hasSpawnAction]
+  );
+
+  return {
+    processes,
+    createProcessesFromPaths,
+    setProcesses,
+  };
+}
+
+const ProcessCreator: React.FC<ProcessCreatorProps> = React.memo(
+  ({ onProcessesCreated }) => {
+    const { simulationPaths } = useSimulationPaths();
+    const { createProcessesFromPaths } = useProcessCreation();
+    const prevPathsRef = useRef<SimulationPath[]>([]);
+    const prevProcessesRef = useRef<Process[]>([]);
+
+    const convertedPaths = useMemo((): SimulationPath[] => {
+      if (!simulationPaths) return [];
+      return simulationPaths.map((path) =>
+        convertToSimulationPath(
+          path as ConveyorEventsSchema | VehicleEventsSchema
+        )
+      );
+    }, [simulationPaths]);
+
+    const pathsDependency = useMemo(() => {
+      if (!convertedPaths) return null;
+      return convertedPaths.map((path) => ({
+        id: path.modeluuid,
+        hasSpawn: path.points.some((p: PathPoint) =>
+          p.actions.some((a: PointAction) => a.type.toLowerCase() === "spawn")
+        ),
+        connections: path.points
+          .flatMap((p: PathPoint) =>
+            p.connections.targets.map((t: { pathUUID: string }) => t.pathUUID)
+          )
+          .join(","),
+      }));
+    }, [convertedPaths]);
+
+    useEffect(() => {
+      if (!convertedPaths || convertedPaths.length === 0) {
+        if (prevProcessesRef.current.length > 0) {
+          onProcessesCreated([]);
+          prevProcessesRef.current = [];
+        }
+        return;
+      }
+
+      if (areArraysEqual(prevPathsRef.current, convertedPaths)) {
+        return;
+      }
+
+      prevPathsRef.current = convertedPaths;
+      const newProcesses = createProcessesFromPaths(convertedPaths);
+
+      // console.log("--- Action Types in Paths ---");
+      // convertedPaths.forEach((path) => {
+      //   path.points.forEach((point) => {
+      //     point.actions.forEach((action) => {
+      //       console.log(
+      //         `Path ${path.modeluuid}, Point ${point.uuid}: ${action.type}`
+      //       );
+      //     });
+      //   });
+      // });
+      // console.log("New processes:", newProcesses);
+
+      if (
+        newProcesses.length !== prevProcessesRef.current.length ||
+        !newProcesses.every(
+          (proc, i) =>
+            proc.paths.length === prevProcessesRef.current[i]?.paths.length &&
+            proc.paths.every(
+              (path, j) =>
+                path.modeluuid ===
+                prevProcessesRef.current[i]?.paths[j]?.modeluuid
+            )
+        )
+      ) {
+        onProcessesCreated(newProcesses);
+        // prevProcessesRef.current = newProcesses;
+      }
+    }, [
+      pathsDependency,
+      onProcessesCreated,
+      convertedPaths,
+      createProcessesFromPaths,
+    ]);
+
+    return null;
+  }
+);
+
+export default ProcessCreator;

app/src/modules/simulation/simulation.tsx

@@ -5,6 +5,7 @@ import Behaviour from './behaviour/behaviour';
 import PathCreation from './path/pathCreation';
 import PathConnector from './path/pathConnector';
 import useModuleStore from '../../store/useModuleStore';
+import ProcessContainer from './process/processContainer';
 
 function Simulation() {
     const { activeModule } = useModuleStore();
@@ -13,6 +14,7 @@ function Simulation() {
     const [processes, setProcesses] = useState([]);
 
     useEffect(() => {
+        // console.log('simulationPaths: ', simulationPaths);
     }, [simulationPaths]);
 
     // useEffect(() => {
@@ -35,6 +37,7 @@ function Simulation() {
                 <>
                     <PathCreation pathsGroupRef={pathsGroupRef} />
                     <PathConnector pathsGroupRef={pathsGroupRef} />
+                    <ProcessContainer />
                 </>
             )}
         </>

app/src/pages/Project.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import ModuleToggle from "../components/ui/ModuleToggle";
 import SideBarLeft from "../components/layout/sidebarLeft/SideBarLeft";
 import SideBarRight from "../components/layout/sidebarRight/SideBarRight";
@@ -20,6 +20,8 @@ import { usePlayButtonStore } from "../store/usePlayButtonStore";
 import MarketPlace from "../modules/market/MarketPlace";
 import LoadingPage from "../components/templates/LoadingPage";
 import SimulationPlayer from "../components/ui/simulation/simulationPlayer";
+import RenderOverlay from "../components/templates/Overlay";
+import MenuBar from "../components/ui/menu/menu";
 
 const Project: React.FC = () => {
   let navigate = useNavigate();
@@ -30,6 +32,7 @@ const Project: React.FC = () => {
   const { setFloorItems } = useFloorItems();
   const { setWallItems } = useWallItems();
   const { setZones } = useZones();
+  const [openMenu, setOpenMenu] = useState<boolean>(true);
 
   useEffect(() => {
     setFloorItems([]);
@@ -53,7 +56,7 @@ const Project: React.FC = () => {
 
   return (
     <div className="project-main">
-      {loadingProgress && <LoadingPage progress={loadingProgress} />}
+      {/* {loadingProgress && <LoadingPage progress={loadingProgress} />} */}
       {!isPlaying && (
         <>
           {toggleThreeD && <ModuleToggle />}
@@ -61,6 +64,9 @@ const Project: React.FC = () => {
           <SideBarRight />
         </>
       )}
+      {/* <RenderOverlay>
+        <MenuBar setOpenMenu={setOpenMenu} />
+      </RenderOverlay> */}
       {activeModule === "market" && <MarketPlace />}
       <RealTimeVisulization />
       {activeModule !== "market" && <Tools />}

app/src/services/factoryBuilder/assest/assets/getCategoryAsset.ts

@@ -1,4 +1,4 @@
-let BackEnd_url = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
+let BackEnd_url = `http://${process.env.REACT_APP_SERVER_ASSET_LIBRARY_URL}`;
 export const getCategoryAsset = async (categoryName: any) => {
   try {
     const response = await fetch(

app/src/services/factoryBuilder/assest/floorAsset/getFloorItemsApi.ts

@@ -1,8 +1,8 @@
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 
-export const getFloorItems = async (organization: string) => {
+export const getFloorAssets = async (organization: string) => {
     try {
-        const response = await fetch(`${url_Backend_dwinzo}/api/v1/findfloorItems/${organization}`, {
+        const response = await fetch(`${url_Backend_dwinzo}/api/v2/floorAssets/${organization}`, {
             method: "GET",
             headers: {
                 "Content-Type": "application/json",
@@ -10,7 +10,7 @@ export const getFloorItems = async (organization: string) => {
         });
 
         if (!response.ok) {
-            throw new Error("Failed to get Floor Items");
+            throw new Error("Failed to get assets");
         }
 
         const result = await response.json();

app/src/services/factoryBuilder/assest/floorAsset/setFloorItemApi.ts

@@ -1,4 +1,4 @@
-let url_Backend_dwinzo = `http://${process.env.REACT_APP_TEST}`;
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 
 export const setFloorItemApi = async (
     organization: string,

app/src/services/simulation/getAssetEventType.ts

@@ -1,4 +1,4 @@
-let url_Backend_dwinzo = `http://${process.env.REACT_APP_TEST}`;
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 
 export const getAssetEventType = async (modelId: string, organization: string) => {
     try {

app/src/styles/components/confirmationPopUp.scss

@@ -0,0 +1,43 @@
+.confirmation-overlay {
+    width: 100vw;
+    height: 100vh;
+    background: var(--background-color-secondary);
+    backdrop-filter: blur(2px);
+
+    .confirmation-modal {
+        min-width: 35%;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 5;
+        background-color: var(--background-color);
+        padding: 14px 12px;
+        border-radius: 6px;
+
+        .buttton-wrapper {
+            padding-top: 12px;
+            display: flex;
+            justify-content: end;
+            align-items: end;
+            gap: 12px;
+
+            .confirmation-button {
+                padding: 6px 10px;
+                border-radius: 6px;
+                cursor: pointer;
+
+                &:first-child {
+                    color: var(--accent-color);
+                }
+
+                &:last-child {
+                    background-color: #ffe3e0;
+                    color: #f65648;
+                }
+
+            }
+
+        }
+    }
+}

app/src/styles/main.scss

@@ -24,6 +24,7 @@
 @use 'components/marketPlace/marketPlace';
 @use 'components/simulation/simulation';
 @use 'components/menu/menu';
+@use 'components/confirmationPopUp';
 
 // layout
 @use 'layout/loading';

app/src/styles/pages/realTimeViz.scss

@@ -172,6 +172,7 @@
     border-radius: 6px;
     overflow: visible !important;
     z-index: $z-index-tools;
+    overflow: auto;
 
     .panel-content {
       position: relative;
@@ -320,6 +321,10 @@
       bottom: 0;
     }
   }
+
+  .panel.hidePanel {
+    opacity: 0;
+  }
 }
 
 .playingFlase {
@@ -707,4 +712,43 @@
 .activeChart {
   outline: 1px solid var(--accent-color);
   z-index: 2 !important;
+}
+
+
+.editWidgetOptions-wrapper {
+
+  height: 100vh;
+  width: 100vw;
+}
+
+.editWidgetOptions {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: var(--background-color);
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  border-radius: 6px;
+  overflow: hidden;
+
+  .option {
+    padding: 8px 10px;
+    color: var(--text-color);
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--highlight-accent-color);
+      color: var(--accent-color);
+    }
+
+    &:last-child {
+      color: #f65648;
+
+      &:hover {
+        background-color: #ffe3e0;
+      }
+    }
+  }
 }

app/src/types/world/worldTypes.d.ts

@@ -319,8 +319,8 @@ interface ConveyorEventsSchema {
         triggers: { uuid: string; name: string; type: string; isUsed: boolean; bufferTime: number }[] | [];
         connections: { source: { pathUUID: string; pointUUID: string }; targets: { pathUUID: string; pointUUID: string }[] };
     }[];
-    assetPosition: [number, number, number];
+    position: [number, number, number];
-    assetRotation: [number, number, number];
+    rotation: [number, number, number];
     speed: number | string;
 }
 
@@ -335,5 +335,5 @@ interface VehicleEventsSchema {
         connections: { source: { pathUUID: string; pointUUID: string }; targets: { pathUUID: string; pointUUID: string }[] };
         speed: number;
     };
-    assetPosition: [number, number, number];
+    position: [number, number, number];
 }

app/src/utils/theme.ts

@@ -18,5 +18,4 @@ export function toggleTheme() {
     localStorage.setItem('theme', newTheme);
 }
 
-// Initialize theme on page load
 setTheme();