From d0538ccfae0abfca1a2cb40dd93de1b82455f7d4 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Fri, 13 Jun 2025 15:22:03 +0530
Subject: [PATCH 1/7] feat: implement duplicate scene functionality with
 builder, controls, and post-processing components

---
 .../layout/scenes/ComparisonScene.tsx         |   2 +-
 .../ui/compareVersion/CompareLayOut.tsx       |  11 +-
 .../aisle/Instances/aisleInstances.tsx        |   2 -
 app/src/modules/builder/groups/wallsMesh.tsx  |   2 +-
 .../duplicateBuilder/builderDuplicate.tsx     |  48 +++++
 .../duplicateAisle/aislesDuplicate.tsx        |  27 +++
 .../duplicateAsset/assetsGroupDuplicate.tsx   | 123 ++++++++++++
 .../duplicateAsset/modelDuplicate.tsx         | 123 ++++++++++++
 .../duplicateFloor/floorGroupDuplicate.tsx    |  47 +++++
 .../duplicateWall/wallMeshDuplicate.tsx       |  66 +++++++
 .../duplicateWall/wallsDuplicate.tsx          |  29 +++
 .../duplicateZone/zoneDuplicate.tsx           | 182 ++++++++++++++++++
 .../duplicateSetup/controlsDuplicate.tsx      |  54 ++++++
 .../postProcessingDuplicate.tsx               |  18 ++
 app/src/modules/duplicate/sceneDuplicate.tsx  |  44 +++++
 app/src/modules/scene/controls/controls.tsx   |   1 -
 app/src/modules/scene/scene.tsx               |   7 +-
 .../utils/shortcutkeys/handleShortcutKeys.ts  |   5 +-
 18 files changed, 775 insertions(+), 16 deletions(-)
 create mode 100644 app/src/modules/duplicate/duplicateBuilder/builderDuplicate.tsx
 create mode 100644 app/src/modules/duplicate/duplicateBuilder/duplicateAisle/aislesDuplicate.tsx
 create mode 100644 app/src/modules/duplicate/duplicateBuilder/duplicateAsset/assetsGroupDuplicate.tsx
 create mode 100644 app/src/modules/duplicate/duplicateBuilder/duplicateAsset/modelDuplicate.tsx
 create mode 100644 app/src/modules/duplicate/duplicateBuilder/duplicateFloor/floorGroupDuplicate.tsx
 create mode 100644 app/src/modules/duplicate/duplicateBuilder/duplicateWall/wallMeshDuplicate.tsx
 create mode 100644 app/src/modules/duplicate/duplicateBuilder/duplicateWall/wallsDuplicate.tsx
 create mode 100644 app/src/modules/duplicate/duplicateBuilder/duplicateZone/zoneDuplicate.tsx
 create mode 100644 app/src/modules/duplicate/duplicateSetup/controlsDuplicate.tsx
 create mode 100644 app/src/modules/duplicate/duplicateSetup/postProcessingDuplicate.tsx
 create mode 100644 app/src/modules/duplicate/sceneDuplicate.tsx

diff --git a/app/src/components/layout/scenes/ComparisonScene.tsx b/app/src/components/layout/scenes/ComparisonScene.tsx
index ce8e455..9c895ad 100644
--- a/app/src/components/layout/scenes/ComparisonScene.tsx
+++ b/app/src/components/layout/scenes/ComparisonScene.tsx
@@ -82,7 +82,7 @@ function ComparisonScene() {
                     {comparisonProduct && !isPlaying &&
                         <div className="initial-selectLayout-wrapper">
                             <RegularDropDown
-                                header={selectedProduct.productName}
+                                header={'Product 1'}
                                 options={products.map((l) => l.productName)} // Pass layout names as options
                                 onSelect={handleSelectLayout}
                                 search={false}
diff --git a/app/src/components/ui/compareVersion/CompareLayOut.tsx b/app/src/components/ui/compareVersion/CompareLayOut.tsx
index 9229dba..e111252 100644
--- a/app/src/components/ui/compareVersion/CompareLayOut.tsx
+++ b/app/src/components/ui/compareVersion/CompareLayOut.tsx
@@ -14,10 +14,10 @@ import { useProductStore } from "../../../store/simulation/useProductStore";
 import Scene from "../../../modules/scene/scene";
 import { useComparisonProduct } from "../../../store/simulation/useSimulationStore";
 import { usePauseButtonStore, usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import DuplicateScene from "../../../modules/duplicate/sceneDuplicate";
 
 const CompareLayOut = () => {
-  const { comparisonProduct, setComparisonProduct, clearComparisonProduct } =
-    useComparisonProduct();
+  const { comparisonProduct, setComparisonProduct, clearComparisonProduct } = useComparisonProduct();
   const { products } = useProductStore();
   const { setLoadingProgress } = useLoadingProgress();
   const [width, setWidth] = useState("50vw");
@@ -127,7 +127,7 @@ const CompareLayOut = () => {
       ref={wrapperRef}
       style={{ width }}
     >
-      {loadingProgress == 0 && (
+      {loadingProgress == 0 && comparisonProduct && (
         <button
           title="resize-canvas"
           id="compare-resize-slider-btn"
@@ -141,7 +141,8 @@ const CompareLayOut = () => {
         {comparisonProduct && (
           <div className="compare-layout-canvas-container">
             <Suspense fallback={null}>
-              <Scene layout="Comparison Layout" />
+              {/* <Scene layout="Comparison Layout" /> */}
+              <DuplicateScene />
             </Suspense>
           </div>
         )}
@@ -163,7 +164,7 @@ const CompareLayOut = () => {
               {showLayoutDropdown && (
                 <div className="displayLayouts-container">
                   <div className="header">Layouts</div>
-                  <Search onChange={() => {}} />
+                  <Search onChange={() => { }} />
                   <div className="layouts-container">
                     {products.map((layout) => (
                       <button
diff --git a/app/src/modules/builder/aisle/Instances/aisleInstances.tsx b/app/src/modules/builder/aisle/Instances/aisleInstances.tsx
index d83028b..d0e44a4 100644
--- a/app/src/modules/builder/aisle/Instances/aisleInstances.tsx
+++ b/app/src/modules/builder/aisle/Instances/aisleInstances.tsx
@@ -26,8 +26,6 @@ function AisleInstances() {
         return points;
     }, [aisles]);
 
-
-
     return (
         <>
             {toggleView &&
diff --git a/app/src/modules/builder/groups/wallsMesh.tsx b/app/src/modules/builder/groups/wallsMesh.tsx
index 42a1a9c..c072f12 100644
--- a/app/src/modules/builder/groups/wallsMesh.tsx
+++ b/app/src/modules/builder/groups/wallsMesh.tsx
@@ -21,7 +21,7 @@ const WallsMeshComponent = ({ lines }: any) => {
             const email = localStorage.getItem("email");
             const organization = email!.split("@")[1].split(".")[0];
 
-            getLines(organization,projectId).then((data) => {
+            getLines(organization, projectId).then((data) => {
                 const Lines: Types.Lines = objectLinesToArray(data);
                 localStorage.setItem("Lines", JSON.stringify(Lines));
 
diff --git a/app/src/modules/duplicate/duplicateBuilder/builderDuplicate.tsx b/app/src/modules/duplicate/duplicateBuilder/builderDuplicate.tsx
new file mode 100644
index 0000000..1a40f24
--- /dev/null
+++ b/app/src/modules/duplicate/duplicateBuilder/builderDuplicate.tsx
@@ -0,0 +1,48 @@
+//////////  Three and React Three Fiber Imports  //////////
+
+import * as THREE from "three";
+import { useRef } from "react";
+
+import * as Types from "../../../types/world/worldTypes";
+import Ground from "../../scene/environment/ground";
+import { Bvh } from "@react-three/drei";
+import AssetsGroupDuplicate from "./duplicateAsset/assetsGroupDuplicate";
+import FloorGroupDuplicate from "./duplicateFloor/floorGroupDuplicate";
+import WallsDuplicate from "./duplicateWall/wallsDuplicate";
+import ZoneDuplicate from "./duplicateZone/zoneDuplicate";
+import AislesDuplicate from "./duplicateAisle/aislesDuplicate";
+
+export default function BuilderDuplicate({ projectId }: { projectId: string }) {
+    const plane = useRef<THREE.Mesh>(null); // Reference for a plane object for raycaster reference.
+    const grid = useRef() as any; // Reference for a grid object for raycaster reference.
+    const lines = useRef([]) as Types.RefLines; // Reference for lines which stores all the lines that are ever drawn.
+    const floorGroup = useRef() as Types.RefGroup; // Reference to the THREE.Group that has the roofs and the floors.
+
+    //////////  Return  //////////
+
+    return (
+        <>
+            <Ground grid={grid} plane={plane} />
+
+            <WallsDuplicate
+                lines={lines}
+                projectId={projectId}
+            />
+
+            <Bvh firstHitOnly>
+
+                <FloorGroupDuplicate
+                    floorGroup={floorGroup}
+                    lines={lines}
+                    projectId={projectId}
+                />
+
+                <ZoneDuplicate projectId={projectId} />
+
+                <AssetsGroupDuplicate projectId={projectId} />
+
+                <AislesDuplicate projectId={projectId} />
+            </Bvh>
+        </>
+    );
+}
diff --git a/app/src/modules/duplicate/duplicateBuilder/duplicateAisle/aislesDuplicate.tsx b/app/src/modules/duplicate/duplicateBuilder/duplicateAisle/aislesDuplicate.tsx
new file mode 100644
index 0000000..ac8ba0c
--- /dev/null
+++ b/app/src/modules/duplicate/duplicateBuilder/duplicateAisle/aislesDuplicate.tsx
@@ -0,0 +1,27 @@
+import  { useEffect, useState } from 'react'
+import { getAisleApi } from '../../../../services/factoryBuilder/aisle/getAisleApi';
+import AisleInstance from '../../../builder/aisle/Instances/instance/aisleInstance';
+
+function AislesDuplicate({ projectId }: { projectId: string }) {
+    const [aisles, setAisles] = useState<Aisles>([]);
+
+    useEffect(() => {
+        const fetchAisle = async () => {
+            if (projectId) {
+                const aisles = await getAisleApi(projectId);
+                setAisles(aisles);
+            }
+        }
+        fetchAisle()
+    }, [])
+
+    return (
+        <group name='Aisles-Group'>
+            {aisles.map((aisle) => (
+                <AisleInstance aisle={aisle} key={aisle.aisleUuid} />
+            ))}
+        </group>
+    )
+}
+
+export default AislesDuplicate
\ No newline at end of file
diff --git a/app/src/modules/duplicate/duplicateBuilder/duplicateAsset/assetsGroupDuplicate.tsx b/app/src/modules/duplicate/duplicateBuilder/duplicateAsset/assetsGroupDuplicate.tsx
new file mode 100644
index 0000000..fd639a9
--- /dev/null
+++ b/app/src/modules/duplicate/duplicateBuilder/duplicateAsset/assetsGroupDuplicate.tsx
@@ -0,0 +1,123 @@
+import * as THREE from "three"
+import { useEffect, useState } from 'react'
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
+import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
+import ModelDuplicate from "./modelDuplicate";
+import { useLoadingProgress } from "../../../../store/builder/store";
+import { getFloorAssets } from "../../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi";
+import { FloorItems } from "../../../../types/world/worldTypes";
+
+const gltfLoaderWorker = new Worker(
+    new URL(
+        "../../../../services/factoryBuilder/webWorkers/gltfLoaderWorker.js",
+        import.meta.url
+    )
+);
+
+function AssetsGroupDuplicate({ projectId }: { projectId: string }) {
+    const { setLoadingProgress } = useLoadingProgress();
+    const email = localStorage.getItem("email");
+    const organization = email!.split("@")[1].split(".")[0];
+    const [assetsDuplicates, setAssetsDuplicates] = useState<Assets>([]);
+
+    const loader = new GLTFLoader();
+    const dracoLoader = new DRACOLoader();
+
+    dracoLoader.setDecoderPath(
+        "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/"
+    );
+    loader.setDRACOLoader(dracoLoader);
+
+    useEffect(() => {
+        let totalAssets = 0;
+        let loadedAssets = 0;
+
+        const updateLoadingProgress = (progress: number) => {
+            if (progress < 100) {
+                setLoadingProgress(progress);
+            } else if (progress === 100) {
+                setTimeout(() => {
+                    setLoadingProgress(100);
+                    setTimeout(() => {
+                        setLoadingProgress(0);
+                    }, 1500);
+                }, 1000);
+            }
+        };
+
+        getFloorAssets(organization, projectId).then((data) => {
+            if (data.length > 0) {
+                const uniqueItems = (data as FloorItems).filter((item, index, self) => index === self.findIndex((t) => t.assetId === item.assetId));
+                totalAssets = uniqueItems.length;
+                if (totalAssets === 0) {
+                    updateLoadingProgress(100);
+                    return;
+                }
+                gltfLoaderWorker.postMessage({ floorItems: uniqueItems });
+            } else {
+                gltfLoaderWorker.postMessage({ floorItems: [] });
+                updateLoadingProgress(100);
+            }
+        });
+
+        gltfLoaderWorker.onmessage = async (event) => {
+            if (event.data.message === "gltfLoaded" && event.data.modelBlob) {
+                const blobUrl = URL.createObjectURL(event.data.modelBlob);
+                loader.load(blobUrl, (gltf) => {
+                    URL.revokeObjectURL(blobUrl);
+                    THREE.Cache.remove(blobUrl);
+                    THREE.Cache.add(event.data.modelID, gltf);
+
+                    loadedAssets++;
+                    const progress = Math.round((loadedAssets / totalAssets) * 100);
+                    updateLoadingProgress(progress);
+
+                    if (loadedAssets === totalAssets) {
+                        getFloorAssets(organization, projectId).then((data: FloorItems) => {
+                            const newAssets: Assets = data.map((item) => {
+                                if (item.eventData) {
+                                    return {
+                                        modelUuid: item.modelUuid,
+                                        modelName: item.modelName,
+                                        assetId: item.assetId,
+                                        position: item.position,
+                                        rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
+                                        isLocked: item.isLocked,
+                                        isCollidable: false,
+                                        isVisible: item.isVisible,
+                                        opacity: 1,
+                                        eventData: item.eventData
+                                    };
+                                } else {
+                                    return {
+                                        modelUuid: item.modelUuid,
+                                        modelName: item.modelName,
+                                        assetId: item.assetId,
+                                        position: item.position,
+                                        rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
+                                        isLocked: item.isLocked,
+                                        isCollidable: false,
+                                        isVisible: item.isVisible,
+                                        opacity: 1,
+                                    };
+                                }
+                            });
+                            setAssetsDuplicates(newAssets);
+                        });
+                        updateLoadingProgress(100);
+                    }
+                });
+            }
+        };
+    }, []);
+
+    return (
+        <>
+            {assetsDuplicates.map((asset) =>
+                <ModelDuplicate key={`${asset.modelUuid}_Duplicate`} asset={asset} />
+            )}
+        </>
+    )
+}
+
+export default AssetsGroupDuplicate;
\ No newline at end of file
diff --git a/app/src/modules/duplicate/duplicateBuilder/duplicateAsset/modelDuplicate.tsx b/app/src/modules/duplicate/duplicateBuilder/duplicateAsset/modelDuplicate.tsx
new file mode 100644
index 0000000..f25458e
--- /dev/null
+++ b/app/src/modules/duplicate/duplicateBuilder/duplicateAsset/modelDuplicate.tsx
@@ -0,0 +1,123 @@
+import * as THREE from 'three';
+import { useEffect, useRef, useState } from 'react';
+import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { useFrame, useThree } from '@react-three/fiber';
+import { useRenderDistance } from '../../../../store/builder/store';
+import { AssetBoundingBox } from '../../../builder/asset/functions/assetBoundingBox';
+import { retrieveGLTF, storeGLTF } from '../../../../utils/indexDB/idbUtils';
+
+function ModelDuplicate({ asset }: { readonly asset: Asset }) {
+    const { camera } = useThree();
+    const { renderDistance } = useRenderDistance();
+    const [isRendered, setIsRendered] = useState(false);
+    const url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
+    const [gltfScene, setGltfScene] = useState<GLTF["scene"] | null>(null);
+    const [boundingBox, setBoundingBox] = useState<THREE.Box3 | null>(null);
+    const groupRef = useRef<THREE.Group>(null);
+
+    useEffect(() => {
+        const loader = new GLTFLoader();
+        const dracoLoader = new DRACOLoader();
+
+        dracoLoader.setDecoderPath('https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/gltf/');
+        loader.setDRACOLoader(dracoLoader);
+        const loadModel = async () => {
+            try {
+                // Check Cache
+                const assetId = asset.assetId;
+                const cachedModel = THREE.Cache.get(assetId);
+                if (cachedModel) {
+                    setGltfScene(cachedModel.scene.clone());
+                    calculateBoundingBox(cachedModel.scene);
+                    return;
+                }
+
+                // Check IndexedDB
+                const indexedDBModel = await retrieveGLTF(assetId);
+                if (indexedDBModel) {
+                    const blobUrl = URL.createObjectURL(indexedDBModel);
+                    loader.load(blobUrl, (gltf) => {
+                        URL.revokeObjectURL(blobUrl);
+                        THREE.Cache.remove(blobUrl);
+                        THREE.Cache.add(assetId, gltf);
+                        setGltfScene(gltf.scene.clone());
+                        calculateBoundingBox(gltf.scene);
+                    },
+                        undefined,
+                        (error) => {
+                            echo.error(`[IndexedDB] Error loading ${asset.modelName}:`);
+                            URL.revokeObjectURL(blobUrl);
+                        }
+                    );
+                    return;
+                }
+
+                // Fetch from Backend
+                const modelUrl = `${url_Backend_dwinzo}/api/v2/AssetFile/${assetId}`;
+                const handleBackendLoad = async (gltf: GLTF) => {
+                    try {
+                        const response = await fetch(modelUrl);
+                        const modelBlob = await response.blob();
+                        await storeGLTF(assetId, modelBlob);
+                        THREE.Cache.add(assetId, gltf);
+                        setGltfScene(gltf.scene.clone());
+                        calculateBoundingBox(gltf.scene);
+                    } catch (error) {
+                        console.error(`[Backend] Error storing/loading ${asset.modelName}:`, error);
+                    }
+                };
+                loader.load(
+                    modelUrl,
+                    handleBackendLoad,
+                    undefined,
+                    (error) => {
+                        echo.error(`[Backend] Error loading ${asset.modelName}:`);
+                    }
+                );
+            } catch (err) {
+                console.error("Failed to load model:", asset.assetId, err);
+            }
+        };
+
+        const calculateBoundingBox = (scene: THREE.Object3D) => {
+            const box = new THREE.Box3().setFromObject(scene);
+            setBoundingBox(box);
+        };
+
+        loadModel();
+
+    }, []);
+
+    useFrame(() => {
+        const assetPosition = new THREE.Vector3(...asset.position);
+        if (!isRendered && assetPosition.distanceTo(camera.position) <= renderDistance) {
+            setIsRendered(true);
+        } else if (isRendered && assetPosition.distanceTo(camera.position) > renderDistance) {
+            setIsRendered(false);
+        }
+    })
+
+    return (
+        <group
+            key={asset.modelUuid}
+            name='Asset Model'
+            ref={groupRef}
+            uuid={asset.modelUuid}
+            position={asset.position}
+            rotation={asset.rotation}
+            visible={asset.isVisible}
+            userData={asset}
+        >
+            {gltfScene && (
+                isRendered ? (
+                    <primitive object={gltfScene} />
+                ) : (
+                    <AssetBoundingBox boundingBox={boundingBox} />
+                )
+            )}
+        </group>
+    );
+}
+
+export default ModelDuplicate;
\ No newline at end of file
diff --git a/app/src/modules/duplicate/duplicateBuilder/duplicateFloor/floorGroupDuplicate.tsx b/app/src/modules/duplicate/duplicateBuilder/duplicateFloor/floorGroupDuplicate.tsx
new file mode 100644
index 0000000..9f062df
--- /dev/null
+++ b/app/src/modules/duplicate/duplicateBuilder/duplicateFloor/floorGroupDuplicate.tsx
@@ -0,0 +1,47 @@
+import {
+    useRoofVisibility,
+    useToggleView,
+    useWallVisibility,
+} from "../../../../store/builder/store";
+import { useEffect } from "react";
+import loadFloor from "../../../builder/geomentries/floors/loadFloor";
+import { getLines } from "../../../../services/factoryBuilder/lines/getLinesApi";
+import objectLinesToArray from "../../../builder/geomentries/lines/lineConvertions/objectLinesToArray";
+import { useFrame, useThree } from "@react-three/fiber";
+import hideRoof from "../../../builder/geomentries/roofs/hideRoof";
+import hideWalls from "../../../builder/geomentries/walls/hideWalls";
+
+const FloorGroupDuplicate = ({
+    floorGroup,
+    lines,
+    projectId
+}: any) => {
+    const { scene, camera } = useThree();
+    const { toggleView } = useToggleView();
+    const { roofVisibility } = useRoofVisibility();
+    const { wallVisibility } = useWallVisibility();
+
+    useEffect(() => {
+        const email = localStorage.getItem('email')
+        const organization = (email!.split("@")[1]).split(".")[0];
+        getLines(organization, projectId).then((data) => {
+            const Lines = objectLinesToArray(data);
+
+            if (Lines) {
+                lines.current = Lines;
+                loadFloor(lines, floorGroup);
+            }
+        })
+    }, []);
+
+    useFrame(() => {
+        hideRoof(roofVisibility, floorGroup, camera);
+        hideWalls(wallVisibility, scene, camera);
+    });
+
+    return (
+        <group ref={floorGroup} visible={!toggleView} name="floorGroup"></group>
+    );
+};
+
+export default FloorGroupDuplicate;
diff --git a/app/src/modules/duplicate/duplicateBuilder/duplicateWall/wallMeshDuplicate.tsx b/app/src/modules/duplicate/duplicateBuilder/duplicateWall/wallMeshDuplicate.tsx
new file mode 100644
index 0000000..6a3adb5
--- /dev/null
+++ b/app/src/modules/duplicate/duplicateBuilder/duplicateWall/wallMeshDuplicate.tsx
@@ -0,0 +1,66 @@
+import * as THREE from "three";
+import * as Types from "../../../../types/world/worldTypes";
+import * as CONSTANTS from "../../../../types/world/worldConstants";
+import { Base } from "@react-three/csg";
+import { MeshDiscardMaterial } from "@react-three/drei";
+import { useEffect } from "react";
+import objectLinesToArray from "../../../builder/geomentries/lines/lineConvertions/objectLinesToArray";
+import loadWalls from "../../../builder/geomentries/walls/loadWalls";
+import texturePath from "../../../../assets/textures/floor/wall-tex.png";
+import { getLines } from "../../../../services/factoryBuilder/lines/getLinesApi";
+
+const WallsMeshDuplicate = ({ projectId, walls, setWalls, lines }: any) => {
+
+    useEffect(() => {
+        const email = localStorage.getItem("email");
+        const organization = email!.split("@")[1].split(".")[0];
+
+        getLines(organization, projectId).then((data) => {
+            const Lines: Types.Lines = objectLinesToArray(data);
+            if (Lines) {
+                lines.current = Lines;
+                loadWalls(lines, setWalls);
+            }
+        });
+    }, []);
+
+    const textureLoader = new THREE.TextureLoader();
+    const wallTexture = textureLoader.load(texturePath);
+
+    wallTexture.wrapS = wallTexture.wrapT = THREE.RepeatWrapping;
+    wallTexture.repeat.set(0.1, 0.1);
+    wallTexture.colorSpace = THREE.SRGBColorSpace;
+
+    return (
+        <>
+            {walls.map((wall: Types.Wall, index: number) => (
+                <mesh key={index} renderOrder={1}>
+                    <Base
+                        name={`Wall${index + 1}`}
+                        geometry={wall[0]}
+                        rotation={wall[1]}
+                        position={wall[2]}
+                        userData={{ WallType: wall[3], Layer: wall[4] }}
+                    >
+                        <meshStandardMaterial
+                            side={THREE.DoubleSide}
+                            color={CONSTANTS.wallConfig.defaultColor}
+                            map={wallTexture}
+                        />
+                    </Base>
+                    <mesh
+                        castShadow
+                        geometry={wall[0]}
+                        rotation={wall[1]}
+                        position={wall[2]}
+                        name={`WallRaycastReference_${index + 1}`}
+                    >
+                        <MeshDiscardMaterial />
+                    </mesh>
+                </mesh>
+            ))}
+        </>
+    );
+};
+
+export default WallsMeshDuplicate;
diff --git a/app/src/modules/duplicate/duplicateBuilder/duplicateWall/wallsDuplicate.tsx b/app/src/modules/duplicate/duplicateBuilder/duplicateWall/wallsDuplicate.tsx
new file mode 100644
index 0000000..bcedb51
--- /dev/null
+++ b/app/src/modules/duplicate/duplicateBuilder/duplicateWall/wallsDuplicate.tsx
@@ -0,0 +1,29 @@
+import { Geometry } from "@react-three/csg";
+import {
+    useToggleView,
+} from "../../../../store/builder/store";
+import WallsMeshDuplicate from "./wallMeshDuplicate";
+import { useState } from "react";
+
+const WallsDuplicate = ({
+    lines,
+    projectId
+}: any) => {
+    const { toggleView } = useToggleView();
+    const [walls, setWalls] = useState([]);
+
+    return (
+        <mesh
+            name="Walls"
+            key={walls.length}
+            receiveShadow
+            visible={!toggleView}
+        >
+            <Geometry computeVertexNormals useGroups>
+                <WallsMeshDuplicate projectId={projectId} setWalls={setWalls} walls={walls} lines={lines} />
+            </Geometry>
+        </mesh>
+    );
+};
+
+export default WallsDuplicate;
diff --git a/app/src/modules/duplicate/duplicateBuilder/duplicateZone/zoneDuplicate.tsx b/app/src/modules/duplicate/duplicateBuilder/duplicateZone/zoneDuplicate.tsx
new file mode 100644
index 0000000..8158438
--- /dev/null
+++ b/app/src/modules/duplicate/duplicateBuilder/duplicateZone/zoneDuplicate.tsx
@@ -0,0 +1,182 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Html } from "@react-three/drei";
+import * as THREE from "three";
+import {
+    useToggleView,
+    useZonePoints,
+} from "../../../../store/builder/store";
+import { getZonesApi } from "../../../../services/factoryBuilder/zones/getZonesApi";
+import * as CONSTANTS from "../../../../types/world/worldConstants";
+import * as turf from "@turf/turf";
+import { useSelectedZoneStore } from "../../../../store/visualization/useZoneStore";
+
+const ZoneDuplicate = ({ projectId }: { projectId: string }) => {
+    const [zones, setZones] = useState([]);
+    const { setZonePoints } = useZonePoints();
+    const { selectedZone } = useSelectedZoneStore();
+    const { toggleView } = useToggleView();
+
+    const groupsRef = useRef<any>();
+
+    const zoneMaterial = useMemo(
+        () =>
+            new THREE.ShaderMaterial({
+                side: THREE.DoubleSide,
+                vertexShader: `
+        varying vec2 vUv;
+        void main(){
+            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+            vUv = uv;
+        }
+        `,
+                fragmentShader: `
+        varying vec2 vUv;
+        uniform vec3 uOuterColor;
+        void main(){
+            float alpha = 1.0 - vUv.y;
+            gl_FragColor = vec4(uOuterColor, alpha);
+        }
+        `,
+                uniforms: {
+                    uOuterColor: { value: new THREE.Color(CONSTANTS.zoneConfig.color) },
+                },
+                transparent: true,
+                depthWrite: false,
+            }),
+        []
+    );
+
+    useEffect(() => {
+        const fetchZones = async () => {
+            const email = localStorage.getItem("email");
+            if (!email) return;
+
+            const organization = email.split("@")[1].split(".")[0];
+            const data = await getZonesApi(organization, projectId);
+
+            if (data.length > 0) {
+                const fetchedZones = data.map((zone: any) => ({
+                    zoneUuid: zone.zoneUuid,
+                    zoneName: zone.zoneName,
+                    points: zone.points,
+                    viewPortCenter: zone.viewPortCenter,
+                    viewPortposition: zone.viewPortposition,
+                    layer: zone.layer,
+                }));
+
+                setZones(fetchedZones);
+
+                const fetchedPoints = data.flatMap((zone: any) =>
+                    zone.points.slice(0, 4).map((point: [number, number, number]) => new THREE.Vector3(...point))
+                );
+
+                setZonePoints(fetchedPoints);
+            }
+        };
+
+        fetchZones();
+    }, []);
+
+    return (
+        <group ref={groupsRef} name="zoneGroup">
+            <group name="zones" visible={!toggleView}>
+                {zones.map((zone: any) => (
+                    <group
+                        key={zone.zoneUuid}
+                        name={zone.zoneName}
+                        visible={zone.zoneUuid === selectedZone.zoneUuid}
+                    >
+                        {zone.points
+                            .slice(0, -1)
+                            .map((point: [number, number, number], index: number) => {
+                                const nextPoint = zone.points[index + 1];
+
+                                const point1 = new THREE.Vector3(point[0], point[1], point[2]);
+                                const point2 = new THREE.Vector3(
+                                    nextPoint[0],
+                                    nextPoint[1],
+                                    nextPoint[2]
+                                );
+
+                                const planeWidth = point1.distanceTo(point2);
+                                const planeHeight = CONSTANTS.zoneConfig.height;
+
+                                const midpoint = new THREE.Vector3(
+                                    (point1.x + point2.x) / 2,
+                                    CONSTANTS.zoneConfig.height / 2 +
+                                    (zone.layer - 1) * CONSTANTS.zoneConfig.height,
+                                    (point1.z + point2.z) / 2
+                                );
+
+                                const angle = Math.atan2(
+                                    point2.z - point1.z,
+                                    point2.x - point1.x
+                                );
+
+                                return (
+                                    <mesh
+                                        key={index}
+                                        position={midpoint}
+                                        rotation={[0, -angle, 0]}
+                                    >
+                                        <planeGeometry args={[planeWidth, planeHeight]} />
+                                        <primitive
+                                            object={zoneMaterial.clone()}
+                                            attach="material"
+                                        />
+                                    </mesh>
+                                );
+                            })}
+                        {!toggleView &&
+                            (() => {
+                                const points3D = zone.points || [];
+                                const coords2D = points3D.map((p: any) => [p[0], p[2]]);
+
+                                // Ensure the polygon is closed
+                                if (
+                                    coords2D.length >= 4 &&
+                                    (coords2D[0][0] !== coords2D[coords2D.length - 1][0] ||
+                                        coords2D[0][1] !== coords2D[coords2D.length - 1][1])
+                                ) {
+                                    coords2D.push(coords2D[0]);
+                                }
+                                if (coords2D.length < 4) return null;
+
+                                const polygon = turf.polygon([coords2D]);
+                                const center2D = turf.center(polygon).geometry.coordinates;
+
+                                // Calculate the average Y value
+                                const sumY = points3D.reduce(
+                                    (sum: number, p: any) => sum + p[1],
+                                    0
+                                );
+                                const avgY = points3D.length > 0 ? sumY / points3D.length : 0;
+
+                                const htmlPosition: [number, number, number] = [
+                                    center2D[0],
+                                    avgY + (CONSTANTS.zoneConfig.height || 0) + 1.5,
+                                    center2D[1],
+                                ];
+
+                                return (
+                                    <Html
+                                        // data
+                                        key={zone.zoneUuid}
+                                        position={htmlPosition}
+                                        // class
+                                        className="zone-name-wrapper"
+                                        // others
+                                        center
+                                    >
+                                        <div className="zone-name">{zone.zoneName}</div>
+                                    </Html>
+                                );
+                            })()}
+                    </group>
+                ))}
+            </group>
+        </group>
+    );
+};
+
+export default ZoneDuplicate;
diff --git a/app/src/modules/duplicate/duplicateSetup/controlsDuplicate.tsx b/app/src/modules/duplicate/duplicateSetup/controlsDuplicate.tsx
new file mode 100644
index 0000000..173f4e8
--- /dev/null
+++ b/app/src/modules/duplicate/duplicateSetup/controlsDuplicate.tsx
@@ -0,0 +1,54 @@
+import { CameraControls } from "@react-three/drei";
+import { useRef, useEffect } from "react";
+import { useThree } from "@react-three/fiber";
+import * as CONSTANTS from '../../../types/world/worldConstants';
+
+import { useToggleView } from "../../../store/builder/store";
+import { getCamera } from "../../../services/factoryBuilder/camera/getCameraApi";
+
+export default function ControlsDuplicate({ projectId }: { projectId: string }) {
+    const controlsRef = useRef<CameraControls>(null);
+
+    const { toggleView } = useToggleView();
+    const state = useThree();
+
+    useEffect(() => {
+        if (controlsRef.current) {
+            (controlsRef.current as any).mouseButtons.left = CONSTANTS.thirdPersonControls.leftMouse;
+            (controlsRef.current as any).mouseButtons.right = CONSTANTS.thirdPersonControls.rightMouse;
+        }
+        const email = localStorage.getItem("email");
+        const organization = email!.split("@")[1].split(".")[0];
+        const userId = localStorage.getItem("userId")!;
+
+        getCamera(organization, userId, projectId).then((data) => {
+            if (data && data.position && data.target) {
+                controlsRef.current?.setPosition(data.position.x, data.position.y, data.position.z);
+                controlsRef.current?.setTarget(data.target.x, data.target.y, data.target.z);
+            } else {
+                controlsRef.current?.setPosition(...CONSTANTS.threeDimension.defaultPosition);
+                controlsRef.current?.setTarget(...CONSTANTS.threeDimension.defaultTarget);
+            }
+        })
+            .catch((error) => console.error("Failed to fetch camera data:", error));
+    }, []);
+
+    return (
+        <>
+            <CameraControls
+                makeDefault
+                ref={controlsRef}
+                minDistance={toggleView ? CONSTANTS.twoDimension.minDistance : CONSTANTS.threeDimension.minDistance}
+                maxDistance={CONSTANTS.thirdPersonControls.maxDistance}
+                minZoom={CONSTANTS.thirdPersonControls.minZoom}
+                maxZoom={CONSTANTS.thirdPersonControls.maxZoom}
+                maxPolarAngle={CONSTANTS.thirdPersonControls.maxPolarAngle}
+                camera={state.camera}
+                verticalDragToForward={true}
+                boundaryEnclosesCamera={true}
+                dollyToCursor={toggleView}
+            >
+            </CameraControls>
+        </>
+    );
+}
\ No newline at end of file
diff --git a/app/src/modules/duplicate/duplicateSetup/postProcessingDuplicate.tsx b/app/src/modules/duplicate/duplicateSetup/postProcessingDuplicate.tsx
new file mode 100644
index 0000000..dfc2e2c
--- /dev/null
+++ b/app/src/modules/duplicate/duplicateSetup/postProcessingDuplicate.tsx
@@ -0,0 +1,18 @@
+import { EffectComposer, N8AO } from "@react-three/postprocessing";
+
+export default function PostProcessingDuplicate() {
+
+    return (
+        <EffectComposer autoClear={false}>
+            <N8AO
+                color="black"
+                aoRadius={20}
+                intensity={7}
+                distanceFalloff={4}
+                aoSamples={32}
+                denoiseRadius={6}
+                denoiseSamples={16}
+            />
+        </EffectComposer>
+    );
+}
diff --git a/app/src/modules/duplicate/sceneDuplicate.tsx b/app/src/modules/duplicate/sceneDuplicate.tsx
new file mode 100644
index 0000000..eff0082
--- /dev/null
+++ b/app/src/modules/duplicate/sceneDuplicate.tsx
@@ -0,0 +1,44 @@
+import { Canvas } from "@react-three/fiber";
+
+import BuilderDuplicate from "./duplicateBuilder/builderDuplicate";
+import { Environment } from "@react-three/drei";
+import Shadows from "../scene/environment/shadow";
+import Sun from "../scene/environment/sky";
+
+import background from "../../assets/textures/hdr/mudroadpuresky2k.hdr";
+import ControlsDuplicate from "./duplicateSetup/controlsDuplicate";
+import PostProcessingDuplicate from "./duplicateSetup/postProcessingDuplicate";
+import { Color } from "three";
+
+export default function DuplicateScene() {
+    const projectId = "684bcd620a64bc2a815a88d6";
+
+    return (
+        <Canvas
+            id="sceneCanvas"
+            shadows
+            color="#aaaa"
+            eventPrefix="client"
+            onContextMenu={(e) => {
+                e.preventDefault();
+            }}
+            onCreated={(e) => {
+                e.scene.background = new Color(0x19191d);
+            }}
+            gl={{ powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }}
+        >
+
+            <Sun />
+
+            <Shadows />
+
+            <ControlsDuplicate projectId={projectId} />
+
+            <PostProcessingDuplicate />
+
+            <Environment files={background} environmentIntensity={1.5} />
+
+            <BuilderDuplicate projectId={projectId} />
+        </Canvas>
+    );
+}
\ No newline at end of file
diff --git a/app/src/modules/scene/controls/controls.tsx b/app/src/modules/scene/controls/controls.tsx
index da85988..d611114 100644
--- a/app/src/modules/scene/controls/controls.tsx
+++ b/app/src/modules/scene/controls/controls.tsx
@@ -22,7 +22,6 @@ export default function Controls() {
     const state = useThree();
     const { projectId } = useParams();
 
-
     useEffect(() => {
         if (controlsRef.current) {
             (controlsRef.current as any).mouseButtons.left = CONSTANTS.thirdPersonControls.leftMouse;
diff --git a/app/src/modules/scene/scene.tsx b/app/src/modules/scene/scene.tsx
index ee47596..748145c 100644
--- a/app/src/modules/scene/scene.tsx
+++ b/app/src/modules/scene/scene.tsx
@@ -14,6 +14,7 @@ import { getAllProjects } from "../../services/dashboard/getAllProjects";
 import { getUserData } from "../../components/Dashboard/functions/getUserData";
 import { useLoadingProgress, useSocketStore } from "../../store/builder/store";
 import { useAssetsStore } from "../../store/builder/useAssetStore";
+import { Color } from "three";
 
 export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Comparison Layout' }) {
     const map = useMemo(() => [
@@ -28,6 +29,7 @@ export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Co
     const { projectId } = useParams();
     const { projectSocket } = useSocketStore();
     const { loadingProgress } = useLoadingProgress();
+
     const handleUpdatingProject = async () => {
         if (!projectId) return;
         try {
@@ -36,7 +38,6 @@ export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Co
                 (val: any) => val.projectUuid === projectId || val._id === projectId
             );
 
-
             if (activeModule === "builder" && loadingProgress !== 1) {
                 const canvas =
                     document.getElementById("sceneCanvas")?.children[0]?.children[0];
@@ -64,8 +65,6 @@ export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Co
                     projectName: projectUuid.projectName,
                     thumbnail: screenshotDataUrl,
                 };
-                // console.log('screenshotDataUrl: ', screenshotDataUrl);
-                // console.log('updateProjects: ', updateProjects);
                 if (projectSocket) {
                     projectSocket.emit("v1:project:update", updateProjects);
                 }
@@ -89,7 +88,7 @@ export default function Scene({ layout }: { readonly layout: 'Main Layout' | 'Co
                         e.preventDefault();
                     }}
                     onCreated={(e) => {
-                        e.scene.background = null;
+                        e.scene.background = layout === 'Main Layout' ? null : new Color(0x19191d);
                     }}
                     gl={{ powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }}
                 >
diff --git a/app/src/utils/shortcutkeys/handleShortcutKeys.ts b/app/src/utils/shortcutkeys/handleShortcutKeys.ts
index 180129e..c1a5a98 100644
--- a/app/src/utils/shortcutkeys/handleShortcutKeys.ts
+++ b/app/src/utils/shortcutkeys/handleShortcutKeys.ts
@@ -23,7 +23,7 @@ import { useLogger } from "../../components/ui/log/LoggerContext";
 import { useComparisonProduct } from "../../store/simulation/useSimulationStore";
 
 const KeyPressListener: React.FC = () => {
-  const { clearComparisonProduct } = useComparisonProduct();
+  const { comparisonProduct, clearComparisonProduct } = useComparisonProduct();
   const { activeModule, setActiveModule } = useModuleStore();
   const { setActiveSubTool } = useActiveSubTool();
   const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
@@ -195,7 +195,7 @@ const KeyPressListener: React.FC = () => {
     handleBuilderShortcuts(keyCombination);
 
     // Shortcut to enter play mode
-    if (keyCombination === "Ctrl+P" && !toggleView) {
+    if (keyCombination === "Ctrl+P" && !toggleView && !comparisonProduct) {
       setIsPlaying(true);
     }
 
@@ -242,6 +242,7 @@ const KeyPressListener: React.FC = () => {
     hidePlayer,
     selectedFloorItem,
     isRenameMode,
+    comparisonProduct
   ]);
 
   return null;

From f8bcc5aa1c221e44e7dce8871c7c14d5872fd48b Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Fri, 13 Jun 2025 17:40:55 +0530
Subject: [PATCH 2/7] feat: Implement duplicate event and product stores using
 Zustand with immer middleware

- Created `duplicateEventStore` to manage events with actions for adding, removing, updating events, points, actions, and triggers.
- Implemented helper functions to retrieve events, points, actions, and triggers by their unique identifiers.
- Created `duplicateProductStore` to manage products and their associated events, including actions for adding, removing, updating products, events, points, actions, and triggers.
- Added renaming functions for products, actions, and triggers.
- Included comprehensive helper functions to retrieve products and their related data by various identifiers.
---
 .../duplicateAsset/assetsGroupDuplicate.tsx   | 142 +++-
 .../duplicateWall/wallMeshDuplicate.tsx       |  16 +-
 .../duplicateSetup/controlsDuplicate.tsx      |  35 +-
 .../duplicatePoint/duplicatePoint.tsx         | 142 ++++
 .../duplicateProduct/duplicateProduct.tsx     | 149 ++++
 .../duplicateSimulation.tsx                   |  20 +
 .../duplicateTrigger/duplicateTrigger.tsx     | 165 ++++
 .../duplicateStores/duplicateEventStore.ts    | 357 ++++++++
 .../duplicateStores/duplicateProductStore.ts  | 798 ++++++++++++++++++
 app/src/modules/duplicate/sceneDuplicate.tsx  |  49 +-
 app/src/modules/scene/controls/controls.tsx   |  17 +-
 app/src/store/builder/store.ts                |  34 +-
 app/src/styles/layout/compareLayout.scss      |  41 +-
 13 files changed, 1888 insertions(+), 77 deletions(-)
 create mode 100644 app/src/modules/duplicate/duplicateSimulation/duplicatePoint/duplicatePoint.tsx
 create mode 100644 app/src/modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct.tsx
 create mode 100644 app/src/modules/duplicate/duplicateSimulation/duplicateSimulation.tsx
 create mode 100644 app/src/modules/duplicate/duplicateSimulation/duplicateTrigger/duplicateTrigger.tsx
 create mode 100644 app/src/modules/duplicate/duplicateStores/duplicateEventStore.ts
 create mode 100644 app/src/modules/duplicate/duplicateStores/duplicateProductStore.ts

diff --git a/app/src/modules/duplicate/duplicateBuilder/duplicateAsset/assetsGroupDuplicate.tsx b/app/src/modules/duplicate/duplicateBuilder/duplicateAsset/assetsGroupDuplicate.tsx
index fd639a9..6759b2d 100644
--- a/app/src/modules/duplicate/duplicateBuilder/duplicateAsset/assetsGroupDuplicate.tsx
+++ b/app/src/modules/duplicate/duplicateBuilder/duplicateAsset/assetsGroupDuplicate.tsx
@@ -6,6 +6,7 @@ import ModelDuplicate from "./modelDuplicate";
 import { useLoadingProgress } from "../../../../store/builder/store";
 import { getFloorAssets } from "../../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi";
 import { FloorItems } from "../../../../types/world/worldTypes";
+import { useDuplicateEventsStore } from "../../duplicateStores/duplicateEventStore";
 
 const gltfLoaderWorker = new Worker(
     new URL(
@@ -19,6 +20,7 @@ function AssetsGroupDuplicate({ projectId }: { projectId: string }) {
     const email = localStorage.getItem("email");
     const organization = email!.split("@")[1].split(".")[0];
     const [assetsDuplicates, setAssetsDuplicates] = useState<Assets>([]);
+    const { addEvent } = useDuplicateEventsStore();
 
     const loader = new GLTFLoader();
     const dracoLoader = new DRACOLoader();
@@ -73,10 +75,11 @@ function AssetsGroupDuplicate({ projectId }: { projectId: string }) {
                     updateLoadingProgress(progress);
 
                     if (loadedAssets === totalAssets) {
+                        const assets: Asset[] = [];
                         getFloorAssets(organization, projectId).then((data: FloorItems) => {
-                            const newAssets: Assets = data.map((item) => {
+                            data.map((item) => {
                                 if (item.eventData) {
-                                    return {
+                                    assets.push({
                                         modelUuid: item.modelUuid,
                                         modelName: item.modelName,
                                         assetId: item.assetId,
@@ -87,9 +90,136 @@ function AssetsGroupDuplicate({ projectId }: { projectId: string }) {
                                         isVisible: item.isVisible,
                                         opacity: 1,
                                         eventData: item.eventData
-                                    };
+                                    })
+
+                                    if (item.eventData.type === "Vehicle") {
+                                        const vehicleEvent: VehicleEventSchema = {
+                                            modelUuid: item.modelUuid,
+                                            modelName: item.modelName,
+                                            position: item.position,
+                                            rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
+                                            state: "idle",
+                                            type: "vehicle",
+                                            speed: 1,
+                                            point: {
+                                                uuid: item.eventData.point?.uuid || THREE.MathUtils.generateUUID(),
+                                                position: [item.eventData.point?.position[0] || 0, item.eventData.point?.position[1] || 0, item.eventData.point?.position[2] || 0],
+                                                rotation: [item.eventData.point?.rotation[0] || 0, item.eventData.point?.rotation[1] || 0, item.eventData.point?.rotation[2] || 0],
+                                                action: {
+                                                    actionUuid: THREE.MathUtils.generateUUID(),
+                                                    actionName: "Action 1",
+                                                    actionType: "travel",
+                                                    unLoadDuration: 5,
+                                                    loadCapacity: 1,
+                                                    steeringAngle: 0,
+                                                    pickUpPoint: null,
+                                                    unLoadPoint: null,
+                                                    triggers: []
+                                                }
+                                            }
+                                        };
+                                        addEvent(vehicleEvent);
+                                    } else if (item.eventData.type === "Conveyor") {
+                                        const ConveyorEvent: ConveyorEventSchema = {
+                                            modelUuid: item.modelUuid,
+                                            modelName: item.modelName,
+                                            position: item.position,
+                                            rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
+                                            state: "idle",
+                                            type: "transfer",
+                                            speed: 1,
+                                            points: item.eventData.points?.map((point: any, index: number) => ({
+                                                uuid: point.uuid || THREE.MathUtils.generateUUID(),
+                                                position: [point.position[0], point.position[1], point.position[2]],
+                                                rotation: [point.rotation[0], point.rotation[1], point.rotation[2]],
+                                                action: {
+                                                    actionUuid: THREE.MathUtils.generateUUID(),
+                                                    actionName: `Action 1`,
+                                                    actionType: 'default',
+                                                    material: 'Default material',
+                                                    delay: 0,
+                                                    spawnInterval: 5,
+                                                    spawnCount: 1,
+                                                    triggers: []
+                                                }
+                                            })) || [],
+                                        };
+                                        addEvent(ConveyorEvent);
+                                    } else if (item.eventData.type === "StaticMachine") {
+                                        const machineEvent: MachineEventSchema = {
+                                            modelUuid: item.modelUuid,
+                                            modelName: item.modelName,
+                                            position: item.position,
+                                            rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
+                                            state: "idle",
+                                            type: "machine",
+                                            point: {
+                                                uuid: item.eventData.point?.uuid || THREE.MathUtils.generateUUID(),
+                                                position: [item.eventData.point?.position[0] || 0, item.eventData.point?.position[1] || 0, item.eventData.point?.position[2] || 0],
+                                                rotation: [item.eventData.point?.rotation[0] || 0, item.eventData.point?.rotation[1] || 0, item.eventData.point?.rotation[2] || 0],
+                                                action: {
+                                                    actionUuid: THREE.MathUtils.generateUUID(),
+                                                    actionName: "Action 1",
+                                                    actionType: "process",
+                                                    processTime: 10,
+                                                    swapMaterial: "Default Material",
+                                                    triggers: []
+                                                }
+                                            }
+                                        };
+                                        addEvent(machineEvent);
+                                    } else if (item.eventData.type === "ArmBot") {
+                                        const roboticArmEvent: RoboticArmEventSchema = {
+                                            modelUuid: item.modelUuid,
+                                            modelName: item.modelName,
+                                            position: item.position,
+                                            rotation: [item.rotation.x, item.rotation.y, item.rotation.z],
+                                            state: "idle",
+                                            type: "roboticArm",
+                                            speed: 1,
+                                            point: {
+                                                uuid: item.eventData.point?.uuid || THREE.MathUtils.generateUUID(),
+                                                position: [item.eventData.point?.position[0] || 0, item.eventData.point?.position[1] || 0, item.eventData.point?.position[2] || 0],
+                                                rotation: [item.eventData.point?.rotation[0] || 0, item.eventData.point?.rotation[1] || 0, item.eventData.point?.rotation[2] || 0],
+                                                actions: [
+                                                    {
+                                                        actionUuid: THREE.MathUtils.generateUUID(),
+                                                        actionName: "Action 1",
+                                                        actionType: "pickAndPlace",
+                                                        process: {
+                                                            startPoint: null,
+                                                            endPoint: null
+                                                        },
+                                                        triggers: []
+                                                    }
+                                                ]
+                                            }
+                                        };
+                                        addEvent(roboticArmEvent);
+                                    } else if (item.eventData.type === 'Storage') {
+                                        const storageEvent: StorageEventSchema = {
+                                            modelUuid: item.modelUuid,
+                                            modelName: item.modelName,
+                                            position: item.position,
+                                            rotation: [item.rotation.x, item.rotation.y, item.rotation.z], state: "idle",
+                                            type: "storageUnit",
+                                            point: {
+                                                uuid: item.eventData.point?.uuid || THREE.MathUtils.generateUUID(),
+                                                position: [item.eventData.point?.position[0] || 0, item.eventData.point?.position[1] || 0, item.eventData.point?.position[2] || 0],
+                                                rotation: [item.eventData.point?.rotation[0] || 0, item.eventData.point?.rotation[1] || 0, item.eventData.point?.rotation[2] || 0],
+                                                action: {
+                                                    actionUuid: THREE.MathUtils.generateUUID(),
+                                                    actionName: "Action 1",
+                                                    actionType: "store",
+                                                    storageCapacity: 10,
+                                                    triggers: []
+                                                }
+                                            }
+                                        };
+                                        addEvent(storageEvent);
+                                    }
                                 } else {
-                                    return {
+                                    assets.push({
                                         modelUuid: item.modelUuid,
                                         modelName: item.modelName,
                                         assetId: item.assetId,
@@ -99,10 +229,10 @@ function AssetsGroupDuplicate({ projectId }: { projectId: string }) {
                                         isCollidable: false,
                                         isVisible: item.isVisible,
                                         opacity: 1,
-                                    };
+                                    });
                                 }
                             });
-                            setAssetsDuplicates(newAssets);
+                            setAssetsDuplicates(assets);
                         });
                         updateLoadingProgress(100);
                     }
diff --git a/app/src/modules/duplicate/duplicateBuilder/duplicateWall/wallMeshDuplicate.tsx b/app/src/modules/duplicate/duplicateBuilder/duplicateWall/wallMeshDuplicate.tsx
index 6a3adb5..d819d57 100644
--- a/app/src/modules/duplicate/duplicateBuilder/duplicateWall/wallMeshDuplicate.tsx
+++ b/app/src/modules/duplicate/duplicateBuilder/duplicateWall/wallMeshDuplicate.tsx
@@ -3,7 +3,7 @@ import * as Types from "../../../../types/world/worldTypes";
 import * as CONSTANTS from "../../../../types/world/worldConstants";
 import { Base } from "@react-three/csg";
 import { MeshDiscardMaterial } from "@react-three/drei";
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import objectLinesToArray from "../../../builder/geomentries/lines/lineConvertions/objectLinesToArray";
 import loadWalls from "../../../builder/geomentries/walls/loadWalls";
 import texturePath from "../../../../assets/textures/floor/wall-tex.png";
@@ -24,12 +24,14 @@ const WallsMeshDuplicate = ({ projectId, walls, setWalls, lines }: any) => {
         });
     }, []);
 
-    const textureLoader = new THREE.TextureLoader();
-    const wallTexture = textureLoader.load(texturePath);
-
-    wallTexture.wrapS = wallTexture.wrapT = THREE.RepeatWrapping;
-    wallTexture.repeat.set(0.1, 0.1);
-    wallTexture.colorSpace = THREE.SRGBColorSpace;
+    const wallTexture = React.useMemo(() => {
+        const textureLoader = new THREE.TextureLoader();
+        const texture = textureLoader.load(texturePath);
+        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+        texture.repeat.set(0.1, 0.1);
+        texture.colorSpace = THREE.SRGBColorSpace;
+        return texture;
+    }, []);
 
     return (
         <>
diff --git a/app/src/modules/duplicate/duplicateSetup/controlsDuplicate.tsx b/app/src/modules/duplicate/duplicateSetup/controlsDuplicate.tsx
index 173f4e8..18b4259 100644
--- a/app/src/modules/duplicate/duplicateSetup/controlsDuplicate.tsx
+++ b/app/src/modules/duplicate/duplicateSetup/controlsDuplicate.tsx
@@ -1,37 +1,20 @@
 import { CameraControls } from "@react-three/drei";
-import { useRef, useEffect } from "react";
-import { useThree } from "@react-three/fiber";
+import { useRef } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
 import * as CONSTANTS from '../../../types/world/worldConstants';
 
-import { useToggleView } from "../../../store/builder/store";
-import { getCamera } from "../../../services/factoryBuilder/camera/getCameraApi";
+import { useDuplicatedCamData, useToggleView } from "../../../store/builder/store";
 
-export default function ControlsDuplicate({ projectId }: { projectId: string }) {
+export default function ControlsDuplicate() {
     const controlsRef = useRef<CameraControls>(null);
-
     const { toggleView } = useToggleView();
     const state = useThree();
+    const { duplicatedCamData } = useDuplicatedCamData();
 
-    useEffect(() => {
-        if (controlsRef.current) {
-            (controlsRef.current as any).mouseButtons.left = CONSTANTS.thirdPersonControls.leftMouse;
-            (controlsRef.current as any).mouseButtons.right = CONSTANTS.thirdPersonControls.rightMouse;
-        }
-        const email = localStorage.getItem("email");
-        const organization = email!.split("@")[1].split(".")[0];
-        const userId = localStorage.getItem("userId")!;
-
-        getCamera(organization, userId, projectId).then((data) => {
-            if (data && data.position && data.target) {
-                controlsRef.current?.setPosition(data.position.x, data.position.y, data.position.z);
-                controlsRef.current?.setTarget(data.target.x, data.target.y, data.target.z);
-            } else {
-                controlsRef.current?.setPosition(...CONSTANTS.threeDimension.defaultPosition);
-                controlsRef.current?.setTarget(...CONSTANTS.threeDimension.defaultTarget);
-            }
-        })
-            .catch((error) => console.error("Failed to fetch camera data:", error));
-    }, []);
+    useFrame(() => {
+        controlsRef.current?.setPosition(...duplicatedCamData.camPosition, true);
+        controlsRef.current?.setTarget(...duplicatedCamData.camTarget, true);
+    })
 
     return (
         <>
diff --git a/app/src/modules/duplicate/duplicateSimulation/duplicatePoint/duplicatePoint.tsx b/app/src/modules/duplicate/duplicateSimulation/duplicatePoint/duplicatePoint.tsx
new file mode 100644
index 0000000..07e8ad6
--- /dev/null
+++ b/app/src/modules/duplicate/duplicateSimulation/duplicatePoint/duplicatePoint.tsx
@@ -0,0 +1,142 @@
+import * as THREE from "three";
+import { useEventsStore } from "../../../../store/simulation/useEventsStore";
+import useModuleStore from "../../../../store/useModuleStore";
+import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
+
+function PointsDuplicate() {
+    const { events } = useEventsStore();
+    const { activeModule } = useModuleStore();
+    const { isPlaying } = usePlayButtonStore();
+
+    return (
+        <>
+            {activeModule === "simulation" && (
+                <>
+                    <group name="EventPointsGroup" visible={!isPlaying}>
+                        {events.map((event, index) => {
+                            const usedEvent = event;
+
+                            if (usedEvent.type === "transfer") {
+                                return (
+                                    <group
+                                        key={`${index}-${usedEvent.modelUuid}`}
+                                        position={usedEvent.position}
+                                        rotation={usedEvent.rotation}
+                                    >
+                                        {usedEvent.points.map((point, j) => (
+                                            <mesh
+                                                name="Event-Sphere"
+                                                uuid={point.uuid}
+                                                key={`${index}-${point.uuid}`}
+                                                position={new THREE.Vector3(...point.position)}
+                                                userData={{
+                                                    modelUuid: usedEvent.modelUuid,
+                                                    pointUuid: point.uuid,
+                                                }}
+                                            >
+                                                <sphereGeometry args={[0.1, 16, 16]} />
+                                                <meshStandardMaterial color="orange" />
+                                            </mesh>
+                                        ))}
+                                    </group>
+                                );
+                            } else if (usedEvent.type === "vehicle") {
+                                const point = usedEvent.point;
+                                return (
+                                    <group
+                                        key={`${index}-${usedEvent.modelUuid}`}
+                                        position={usedEvent.position}
+                                        rotation={usedEvent.rotation}
+                                    >
+                                        <mesh
+                                            name="Event-Sphere"
+                                            uuid={point.uuid}
+                                            position={new THREE.Vector3(...point.position)}
+                                            userData={{
+                                                modelUuid: usedEvent.modelUuid,
+                                                pointUuid: point.uuid,
+                                            }}
+                                        >
+                                            <sphereGeometry args={[0.1, 16, 16]} />
+                                            <meshStandardMaterial color="blue" />
+                                        </mesh>
+                                    </group>
+                                );
+                            } else if (usedEvent.type === "roboticArm") {
+                                const point = usedEvent.point;
+                                return (
+                                    <group
+                                        key={`${index}-${usedEvent.modelUuid}`}
+                                        position={usedEvent.position}
+                                        rotation={usedEvent.rotation}
+                                    >
+                                        <mesh
+                                            name="Event-Sphere"
+                                            uuid={point.uuid}
+                                            position={new THREE.Vector3(...point.position)}
+                                            userData={{
+                                                modelUuid: usedEvent.modelUuid,
+                                                pointUuid: point.uuid,
+                                            }}
+                                        >
+                                            <sphereGeometry args={[0.1, 16, 16]} />
+                                            <meshStandardMaterial color="green" />
+                                        </mesh>
+                                    </group>
+                                );
+                            } else if (usedEvent.type === "machine") {
+                                const point = usedEvent.point;
+                                return (
+                                    <group
+                                        key={`${index}-${usedEvent.modelUuid}`}
+                                        position={usedEvent.position}
+                                        rotation={usedEvent.rotation}
+                                    >
+                                        <mesh
+                                            name="Event-Sphere"
+                                            uuid={point.uuid}
+                                            position={new THREE.Vector3(...point.position)}
+                                            userData={{
+                                                modelUuid: usedEvent.modelUuid,
+                                                pointUuid: point.uuid,
+                                            }}
+                                        >
+                                            <sphereGeometry args={[0.1, 16, 16]} />
+                                            <meshStandardMaterial color="purple" />
+                                        </mesh>
+                                    </group>
+                                );
+                            } else if (usedEvent.type === "storageUnit") {
+                                const point = usedEvent.point;
+                                return (
+                                    <group
+                                        key={`${index}-${usedEvent.modelUuid}`}
+                                        position={usedEvent.position}
+                                        rotation={usedEvent.rotation}
+                                    >
+                                        <mesh
+                                            name="Event-Sphere"
+                                            uuid={point.uuid}
+                                            position={new THREE.Vector3(...point.position)}
+                                            userData={{
+                                                modelUuid: usedEvent.modelUuid,
+                                                pointUuid: point.uuid,
+                                            }}
+                                        >
+                                            <sphereGeometry args={[0.1, 16, 16]} />
+                                            <meshStandardMaterial color="red" />
+                                        </mesh>
+                                    </group>
+                                );
+                            } else {
+                                return null;
+                            }
+                        })}
+                    </group>
+                </>
+            )}
+        </>
+    );
+}
+
+export default PointsDuplicate;
diff --git a/app/src/modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct.tsx b/app/src/modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct.tsx
new file mode 100644
index 0000000..92126c5
--- /dev/null
+++ b/app/src/modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct.tsx
@@ -0,0 +1,149 @@
+import * as THREE from 'three';
+import { useEffect } from 'react';
+import { upsertProductOrEventApi } from '../../../../services/simulation/products/UpsertProductOrEventApi';
+import { getAllProductsApi } from '../../../../services/simulation/products/getallProductsApi';
+import { usePlayButtonStore, useResetButtonStore } from '../../../../store/usePlayButtonStore';
+import { useSceneContext } from '../../../scene/sceneContext';
+import { useProductContext } from '../../../simulation/products/productContext';
+import { useComparisonProduct, useMainProduct } from '../../../../store/simulation/useSimulationStore';
+import { useDuplicateProductStore } from '../../duplicateStores/duplicateProductStore';
+
+function ProductsDuplicate({ projectId }: { projectId: string }) {
+    const { armBotStore, machineStore, conveyorStore, vehicleStore, storageUnitStore, layout } = useSceneContext();
+    const { products, getProductById, addProduct, setProducts } = useDuplicateProductStore();
+    const { selectedProductStore } = useProductContext();
+    const { setMainProduct } = useMainProduct();
+    const { selectedProduct, setSelectedProduct } = selectedProductStore();
+    const { addVehicle, clearvehicles } = vehicleStore();
+    const { addArmBot, clearArmBots } = armBotStore();
+    const { addMachine, clearMachines } = machineStore();
+    const { addConveyor, clearConveyors } = conveyorStore();
+    const { setCurrentMaterials, clearStorageUnits, updateCurrentLoad, addStorageUnit } = storageUnitStore();
+    const { isReset } = useResetButtonStore();
+    const { isPlaying } = usePlayButtonStore();
+    const { comparisonProduct } = useComparisonProduct();
+
+    useEffect(() => {
+        if (layout === 'Comparison Layout' && comparisonProduct) {
+            setSelectedProduct(comparisonProduct.productUuid, comparisonProduct.productName);
+        }
+    }, [comparisonProduct])
+
+    useEffect(() => {
+        getAllProductsApi(projectId || '').then((data) => {
+            if (data.length === 0) {
+                const id = THREE.MathUtils.generateUUID();
+                const name = 'Product 1';
+                addProduct(name, id);
+                console.log(name, id, projectId);
+                upsertProductOrEventApi({
+                    productName: name,
+                    productUuid: id,
+                    projectId: projectId || ''
+                })
+                if (layout === 'Main Layout') {
+                    setSelectedProduct(id, name);
+                    setMainProduct(id, name);
+                }
+            } else {
+                setProducts(data);
+                if (layout === 'Main Layout') {
+                    setSelectedProduct(data[0].productUuid, data[0].productName);
+                    setMainProduct(data[0].productUuid, data[0].productName);
+                }
+            }
+        })
+    }, [])
+
+    useEffect(() => {
+        if (selectedProduct.productUuid) {
+            const product = getProductById(selectedProduct.productUuid);
+            if (product) {
+                clearvehicles();
+                product.eventDatas.forEach(events => {
+                    if (events.type === 'vehicle') {
+                        addVehicle(selectedProduct.productUuid, events);
+                    }
+                });
+            }
+        }
+    }, [selectedProduct, products, isReset, isPlaying]);
+
+    useEffect(() => {
+        if (selectedProduct.productUuid) {
+            const product = getProductById(selectedProduct.productUuid);
+            if (product) {
+                clearArmBots();
+                product.eventDatas.forEach(events => {
+                    if (events.type === 'roboticArm') {
+                        addArmBot(selectedProduct.productUuid, events);
+                    }
+                });
+            }
+        }
+    }, [selectedProduct, products, isReset, isPlaying]);
+
+    useEffect(() => {
+        if (selectedProduct.productUuid) {
+            const product = getProductById(selectedProduct.productUuid);
+            if (product) {
+                clearConveyors();
+                product.eventDatas.forEach(events => {
+                    if (events.type === 'transfer') {
+                        addConveyor(selectedProduct.productUuid, events);
+                    }
+                });
+            }
+        }
+    }, [selectedProduct, products, isReset, isPlaying]);
+
+    useEffect(() => {
+        if (selectedProduct.productUuid) {
+            const product = getProductById(selectedProduct.productUuid);
+            if (product) {
+                clearMachines();
+                product.eventDatas.forEach(events => {
+                    if (events.type === 'machine') {
+                        addMachine(selectedProduct.productUuid, events);
+                    }
+                });
+            }
+        }
+    }, [selectedProduct, products, isReset, isPlaying]);
+
+    useEffect(() => {
+        if (selectedProduct.productUuid) {
+            const product = getProductById(selectedProduct.productUuid);
+            if (product) {
+                clearStorageUnits();
+                product.eventDatas.forEach(event => {
+                    if (event.type === 'storageUnit') {
+                        addStorageUnit(selectedProduct.productUuid, event);
+
+                        if (event.point.action.actionType === 'retrieve') {
+                            const storageAction = event.point.action;
+                            const materials = Array.from({ length: storageAction.storageCapacity }, () => ({
+                                materialType: storageAction.materialType || 'Default material',
+                                materialId: THREE.MathUtils.generateUUID()
+                            }));
+
+                            setCurrentMaterials(event.modelUuid, materials);
+                            updateCurrentLoad(event.modelUuid, storageAction.storageCapacity);
+                        } else {
+                            setCurrentMaterials(event.modelUuid, []);
+                            updateCurrentLoad(event.modelUuid, 0);
+                        }
+                    }
+                });
+            }
+        }
+    }, [selectedProduct, products, isReset, isPlaying]);
+
+    return (
+        <>
+
+        </>
+    )
+}
+
+export default ProductsDuplicate
\ No newline at end of file
diff --git a/app/src/modules/duplicate/duplicateSimulation/duplicateSimulation.tsx b/app/src/modules/duplicate/duplicateSimulation/duplicateSimulation.tsx
new file mode 100644
index 0000000..ced7d2f
--- /dev/null
+++ b/app/src/modules/duplicate/duplicateSimulation/duplicateSimulation.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import ProductsDuplicate from './duplicateProduct/duplicateProduct'
+import PointsDuplicate from './duplicatePoint/duplicatePoint'
+import TriggerDuplicate from './duplicateTrigger/duplicateTrigger'
+
+function SimulationDuplicate({ projectId }: { projectId: string }) {
+    return (
+        <>
+
+            <ProductsDuplicate projectId={projectId} />
+
+            <PointsDuplicate />
+
+            <TriggerDuplicate />
+
+        </>
+    )
+}
+
+export default SimulationDuplicate
\ No newline at end of file
diff --git a/app/src/modules/duplicate/duplicateSimulation/duplicateTrigger/duplicateTrigger.tsx b/app/src/modules/duplicate/duplicateSimulation/duplicateTrigger/duplicateTrigger.tsx
new file mode 100644
index 0000000..d9e70e4
--- /dev/null
+++ b/app/src/modules/duplicate/duplicateSimulation/duplicateTrigger/duplicateTrigger.tsx
@@ -0,0 +1,165 @@
+import { useEffect, useState } from "react";
+import {  useThree } from "@react-three/fiber";
+import * as THREE from "three";
+import { QuadraticBezierLine } from "@react-three/drei";
+import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
+import { Arrows } from "../../../simulation/events/arrows/arrows";
+import { useProductContext } from "../../../simulation/products/productContext";
+import { useDuplicateProductStore } from "../../duplicateStores/duplicateProductStore";
+
+interface ConnectionLine {
+    id: string;
+    startPointUuid: string;
+    endPointUuid: string;
+    trigger: TriggerSchema;
+}
+
+function TriggerDuplicate() {
+    const { scene } = useThree();
+    const { selectedProductStore } = useProductContext();
+    const { products, getProductById } = useDuplicateProductStore();
+    const { selectedProduct } = selectedProductStore();
+    const { isPlaying } = usePlayButtonStore();
+
+    const [connections, setConnections] = useState<ConnectionLine[]>([]);
+
+    useEffect(() => {
+        const newConnections: ConnectionLine[] = [];
+
+        const product = getProductById(selectedProduct.productUuid);
+        if (!product || products.length === 0) return;
+
+        product.eventDatas.forEach(event => {
+            // Handle Conveyor points
+            if (event.type === "transfer" && 'points' in event) {
+                event.points.forEach(point => {
+                    if (point.action?.triggers) {
+                        point.action.triggers.forEach(trigger => {
+                            if (trigger.triggeredAsset && trigger.triggeredAsset.triggeredPoint) {
+                                newConnections.push({
+                                    id: `${point.uuid}-${trigger.triggeredAsset.triggeredPoint.pointUuid}-${trigger.triggerUuid}`,
+                                    startPointUuid: point.uuid,
+                                    endPointUuid: trigger.triggeredAsset.triggeredPoint.pointUuid,
+                                    trigger
+                                });
+                            }
+                        });
+                    }
+                });
+            }
+            // Handle Vehicle point
+            else if (event.type === "vehicle" && 'point' in event) {
+                const point = event.point;
+                if (point.action?.triggers) {
+                    point.action.triggers.forEach(trigger => {
+                        if (trigger.triggeredAsset && trigger.triggeredAsset.triggeredPoint) {
+                            newConnections.push({
+                                id: `${point.uuid}-${trigger.triggeredAsset.triggeredPoint.pointUuid}-${trigger.triggerUuid}`,
+                                startPointUuid: point.uuid,
+                                endPointUuid: trigger.triggeredAsset.triggeredPoint.pointUuid,
+                                trigger
+                            });
+                        }
+                    });
+                }
+            }
+            // Handle Robotic Arm points
+            else if (event.type === "roboticArm" && 'point' in event) {
+                const point = event.point;
+                point.actions?.forEach(action => {
+                    action.triggers?.forEach(trigger => {
+                        if (trigger.triggeredAsset && trigger.triggeredAsset.triggeredPoint) {
+                            newConnections.push({
+                                id: `${point.uuid}-${trigger.triggeredAsset.triggeredPoint.pointUuid}-${trigger.triggerUuid}`,
+                                startPointUuid: point.uuid,
+                                endPointUuid: trigger.triggeredAsset.triggeredPoint.pointUuid,
+                                trigger
+                            });
+                        }
+                    });
+                });
+            }
+            // Handle Machine point
+            else if (event.type === "machine" && 'point' in event) {
+                const point = event.point;
+                if (point.action?.triggers) {
+                    point.action.triggers.forEach(trigger => {
+                        if (trigger.triggeredAsset && trigger.triggeredAsset.triggeredPoint) {
+                            newConnections.push({
+                                id: `${point.uuid}-${trigger.triggeredAsset.triggeredPoint.pointUuid}-${trigger.triggerUuid}`,
+                                startPointUuid: point.uuid,
+                                endPointUuid: trigger.triggeredAsset.triggeredPoint.pointUuid,
+                                trigger
+                            });
+                        }
+                    });
+                }
+            }
+            // Handle StorageUnit point
+            else if (event.type === "storageUnit" && 'point' in event) {
+                const point = event.point;
+                if (point.action?.triggers) {
+                    point.action.triggers.forEach(trigger => {
+                        if (trigger.triggeredAsset && trigger.triggeredAsset.triggeredPoint) {
+                            newConnections.push({
+                                id: `${point.uuid}-${trigger.triggeredAsset.triggeredPoint.pointUuid}-${trigger.triggerUuid}`,
+                                startPointUuid: point.uuid,
+                                endPointUuid: trigger.triggeredAsset.triggeredPoint.pointUuid,
+                                trigger
+                            });
+                        }
+                    });
+                }
+            }
+        });
+
+        setConnections(newConnections);
+    }, [products, selectedProduct.productUuid]);
+
+    const getWorldPositionFromScene = (pointUuid: string): THREE.Vector3 | null => {
+        const pointObj = scene.getObjectByProperty("uuid", pointUuid);
+        if (!pointObj) return null;
+
+        const worldPosition = new THREE.Vector3();
+        pointObj.getWorldPosition(worldPosition);
+        return worldPosition;
+    };
+
+    return (
+        <group name="simulationConnectionGroup" visible={!isPlaying}>
+            {connections.map((connection) => {
+                const startPoint = getWorldPositionFromScene(connection.startPointUuid);
+                const endPoint = getWorldPositionFromScene(connection.endPointUuid);
+
+                if (!startPoint || !endPoint) return null;
+
+                const distance = startPoint.distanceTo(endPoint);
+                const heightFactor = Math.max(0.5, distance * 0.2);
+                const midPoint = new THREE.Vector3(
+                    (startPoint.x + endPoint.x) / 2,
+                    Math.max(startPoint.y, endPoint.y) + heightFactor,
+                    (startPoint.z + endPoint.z) / 2
+                );
+
+                return (
+                    <QuadraticBezierLine
+                        key={connection.id}
+                        start={startPoint.toArray()}
+                        end={endPoint.toArray()}
+                        mid={midPoint.toArray()}
+                        color={"#42a5f5"}
+                        lineWidth={4}
+                        dashed={true}
+                        dashSize={0.75}
+                        dashScale={20}
+                        userData={connection.trigger}
+                    />
+                );
+            })}
+
+            <Arrows connections={connections} />
+        </group>
+    );
+}
+
+export default TriggerDuplicate;
\ No newline at end of file
diff --git a/app/src/modules/duplicate/duplicateStores/duplicateEventStore.ts b/app/src/modules/duplicate/duplicateStores/duplicateEventStore.ts
new file mode 100644
index 0000000..81594ea
--- /dev/null
+++ b/app/src/modules/duplicate/duplicateStores/duplicateEventStore.ts
@@ -0,0 +1,357 @@
+import { create } from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+
+type EventsStore = {
+    events: EventsSchema[];
+
+    // Event-level actions
+    addEvent: (event: EventsSchema) => void;
+    removeEvent: (modelUuid: string) => void;
+    clearEvents: () => void;
+    updateEvent: (modelUuid: string, updates: Partial<EventsSchema>) => EventsSchema | undefined;
+
+    // Point-level actions
+    addPoint: (modelUuid: string, point: ConveyorPointSchema | VehiclePointSchema | RoboticArmPointSchema | MachinePointSchema | StoragePointSchema) => void;
+    removePoint: (modelUuid: string, pointUuid: string) => void;
+    updatePoint: (
+        modelUuid: string,
+        pointUuid: string,
+        updates: Partial<ConveyorPointSchema | VehiclePointSchema | RoboticArmPointSchema | MachinePointSchema | StoragePointSchema>
+    ) => EventsSchema | undefined;
+
+    // Action-level actions
+    addAction: (
+        modelUuid: string,
+        pointUuid: string,
+        action: ConveyorPointSchema['action'] | VehiclePointSchema['action'] | RoboticArmPointSchema['actions'][0] | MachinePointSchema['action'] | StoragePointSchema['action']
+    ) => void;
+    removeAction: (actionUuid: string) => void;
+    updateAction: (
+        actionUuid: string,
+        updates: Partial<ConveyorPointSchema['action'] | VehiclePointSchema['action'] | RoboticArmPointSchema['actions'][0] | MachinePointSchema['action'] | StoragePointSchema['action']>
+    ) => void;
+
+    // Trigger-level actions
+    addTrigger: (actionUuid: string, trigger: TriggerSchema) => void;
+    removeTrigger: (triggerUuid: string) => void;
+    updateTrigger: (triggerUuid: string, updates: Partial<TriggerSchema>) => void;
+
+    // Helper functions
+    getEventByModelUuid: (modelUuid: string) => EventsSchema | undefined;
+    getPointByUuid: (modelUuid: string, pointUuid: string) => ConveyorPointSchema | VehiclePointSchema | RoboticArmPointSchema | MachinePointSchema | StoragePointSchema | undefined;
+    getActionByUuid: (actionUuid: string) => (ConveyorPointSchema['action'] | VehiclePointSchema['action'] | RoboticArmPointSchema['actions'][0] | MachinePointSchema['action'] | StoragePointSchema['action']) | undefined;
+    getTriggerByUuid: (triggerUuid: string) => TriggerSchema | undefined;
+};
+
+export const useDuplicateEventsStore = create<EventsStore>()(
+    immer((set, get) => ({
+        events: [],
+
+        // Event-level actions
+        addEvent: (event) => {
+            set((state) => {
+                if (!state.events.some(e => 'modelUuid' in e && e.modelUuid === event.modelUuid)) {
+                    state.events.push(event);
+                }
+            });
+        },
+
+        removeEvent: (modelUuid) => {
+            set((state) => {
+                state.events = state.events.filter(e => 'modelUuid' in e && e.modelUuid !== modelUuid);
+            });
+        },
+
+        clearEvents: () => {
+            set((state) => {
+                state.events = [];
+            });
+        },
+
+        updateEvent: (modelUuid, updates) => {
+            let updatedEvent: EventsSchema | undefined;
+            set((state) => {
+                const event = state.events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
+                if (event) {
+                    Object.assign(event, updates);
+                    updatedEvent = JSON.parse(JSON.stringify(event));
+                }
+            });
+            return updatedEvent;
+        },
+
+        // Point-level actions
+        addPoint: (modelUuid, point) => {
+            set((state) => {
+                const event = state.events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
+                if (event && 'points' in event) {
+                    const existingPoint = (event as ConveyorEventSchema).points.find(p => p.uuid === point.uuid);
+                    if (!existingPoint) {
+                        (event as ConveyorEventSchema).points.push(point as ConveyorPointSchema);
+                    }
+                } else if (event && 'point' in event) {
+                    if (!(event as any).point || (event as any).point.uuid !== point.uuid) {
+                        (event as VehicleEventSchema | RoboticArmEventSchema | MachineEventSchema | StorageEventSchema).point = point as any;
+                    }
+                }
+            });
+        },
+
+        removePoint: (modelUuid, pointUuid) => {
+            set((state) => {
+                const event = state.events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
+                if (event && 'points' in event) {
+                    (event as ConveyorEventSchema).points = (event as ConveyorEventSchema).points.filter(p => p.uuid !== pointUuid);
+                }
+                // For single-point events, you might want to handle differently
+            });
+        },
+
+        updatePoint: (modelUuid, pointUuid, updates) => {
+            let updatedEvent: EventsSchema | undefined;
+            set((state) => {
+                const event = state.events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
+                if (event && 'points' in event) {
+                    const point = (event as ConveyorEventSchema).points.find(p => p.uuid === pointUuid);
+                    if (point) {
+                        Object.assign(point, updates);
+                        updatedEvent = JSON.parse(JSON.stringify(event));
+                    }
+                } else if (event && 'point' in event && (event as any).point.uuid === pointUuid) {
+                    Object.assign((event as any).point, updates);
+                    updatedEvent = JSON.parse(JSON.stringify(event));
+                }
+            });
+            return updatedEvent;
+        },
+
+        // Action-level actions
+        addAction: (modelUuid, pointUuid, action) => {
+            set((state) => {
+                const event = state.events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
+                if (event && 'points' in event) {
+                    const point = (event as ConveyorEventSchema).points.find(p => p.uuid === pointUuid);
+                    if (point && (!point.action || point.action.actionUuid !== action.actionUuid)) {
+                        point.action = action as any;
+                    }
+                } else if (event && 'point' in event && (event as any).point.uuid === pointUuid) {
+                    const point = (event as any).point;
+                    if ('action' in point && (!point.action || point.action.actionUuid !== action.actionUuid)) {
+                        point.action = action;
+                    } else if ('actions' in point && !point.actions.some((a: any) => a.actionUuid === action.actionUuid)) {
+                        point.actions.push(action);
+                    }
+                }
+            });
+        },
+
+        removeAction: (actionUuid) => {
+            set((state) => {
+                for (const event of state.events) {
+                    if ('points' in event) {
+                        for (const point of (event as ConveyorEventSchema).points) {
+                            if (point.action && point.action.actionUuid === actionUuid) {
+                                // Handle removal for single action points
+                            }
+                        }
+                    } else if ('point' in event) {
+                        const point = (event as any).point;
+                        if (event.type === "roboticArm") {
+                            if ('actions' in point) {
+                                point.actions = point.actions.filter((a: any) => a.actionUuid !== actionUuid);
+                            }
+                        } else if ('action' in point && point.action?.actionUuid === actionUuid) {
+                            // Handle single action
+                        }
+                    }
+                }
+            });
+        },
+
+        updateAction: (actionUuid, updates) => {
+            set((state) => {
+                for (const event of state.events) {
+                    if ('points' in event) {
+                        for (const point of (event as ConveyorEventSchema).points) {
+                            if (point.action && point.action.actionUuid === actionUuid) {
+                                Object.assign(point.action, updates);
+                                return;
+                            }
+                        }
+                    } else if ('point' in event) {
+                        const point = (event as any).point;
+                        if ('action' in point && point.action.actionUuid === actionUuid) {
+                            Object.assign(point.action, updates);
+                            return;
+                        } else if ('actions' in point) {
+                            const action = point.actions.find((a: any) => a.actionUuid === actionUuid);
+                            if (action) {
+                                Object.assign(action, updates);
+                                return;
+                            }
+                        }
+                    }
+                }
+            });
+        },
+
+        // Trigger-level actions
+        addTrigger: (actionUuid, trigger) => {
+            set((state) => {
+                for (const event of state.events) {
+                    if ('points' in event) {
+                        for (const point of (event as ConveyorEventSchema).points) {
+                            if (point.action && point.action.actionUuid === actionUuid) {
+                                if (!point.action.triggers.some(t => t.triggerUuid === trigger.triggerUuid)) {
+                                    point.action.triggers.push(trigger);
+                                }
+                                return;
+                            }
+                        }
+                    } else if ('point' in event) {
+                        const point: MachinePointSchema | VehiclePointSchema = (event as any).point;
+                        if ('action' in point && point.action.actionUuid === actionUuid) {
+                            if (!point.action.triggers.some(t => t.triggerUuid === trigger.triggerUuid)) {
+                                point.action.triggers.push(trigger);
+                            }
+                            return;
+                        } else if ('actions' in point) {
+                            const action = (point as RoboticArmPointSchema).actions.find((a) => a.actionUuid === actionUuid);
+                            if (action && !action.triggers.some(t => t.triggerUuid === trigger.triggerUuid)) {
+                                action.triggers.push(trigger);
+                                return;
+                            }
+                        }
+                    }
+                }
+            });
+        },
+
+        removeTrigger: (triggerUuid) => {
+            set((state) => {
+                for (const event of state.events) {
+                    if ('points' in event) {
+                        for (const point of (event as ConveyorEventSchema).points) {
+                            if (point.action && 'triggers' in point.action) {
+                                point.action.triggers = point.action.triggers.filter(t => t.triggerUuid !== triggerUuid);
+                            }
+                        }
+                    } else if ('point' in event) {
+                        const point = (event as any).point;
+                        if ('action' in point && 'triggers' in point.action) {
+                            point.action.triggers = point.action.triggers.filter((t: any) => t.triggerUuid !== triggerUuid);
+                        } else if ('actions' in point) {
+                            for (const action of point.actions) {
+                                if ('triggers' in action) {
+                                    action.triggers = action.triggers.filter((t: any) => t.triggerUuid !== triggerUuid);
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+        },
+
+        updateTrigger: (triggerUuid, updates) => {
+            set((state) => {
+                for (const event of state.events) {
+                    if ('points' in event) {
+                        for (const point of (event as ConveyorEventSchema).points) {
+                            if (point.action && 'triggers' in point.action) {
+                                const trigger = point.action.triggers.find(t => t.triggerUuid === triggerUuid);
+                                if (trigger) {
+                                    Object.assign(trigger, updates);
+                                    return;
+                                }
+                            }
+                        }
+                    } else if ('point' in event) {
+                        const point = (event as any).point;
+                        if ('action' in point && 'triggers' in point.action) {
+                            const trigger = point.action.triggers.find((t: any) => t.triggerUuid === triggerUuid);
+                            if (trigger) {
+                                Object.assign(trigger, updates);
+                                return;
+                            }
+                        } else if ('actions' in point) {
+                            for (const action of point.actions) {
+                                if ('triggers' in action) {
+                                    const trigger = action.triggers.find((t: any) => t.triggerUuid === triggerUuid);
+                                    if (trigger) {
+                                        Object.assign(trigger, updates);
+                                        return;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+        },
+
+        // Helper functions
+        getEventByModelUuid: (modelUuid) => {
+            return get().events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
+        },
+
+        getPointByUuid: (modelUuid, pointUuid) => {
+            const event = get().events.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
+            if (event && 'points' in event) {
+                return (event as ConveyorEventSchema).points.find(p => p.uuid === pointUuid);
+            } else if (event && 'point' in event && (event as any).point.uuid === pointUuid) {
+                return (event as any).point;
+            }
+            return undefined;
+        },
+
+        getActionByUuid: (actionUuid) => {
+            const state = get();
+            for (const event of state.events) {
+                if ('points' in event) {
+                    for (const point of (event as ConveyorEventSchema).points) {
+                        if (point.action && point.action.actionUuid === actionUuid) {
+                            return point.action;
+                        }
+                    }
+                } else if ('point' in event) {
+                    const point = (event as any).point;
+                    if ('action' in point && point.action.actionUuid === actionUuid) {
+                        return point.action;
+                    } else if ('actions' in point) {
+                        const action = point.actions.find((a: any) => a.actionUuid === actionUuid);
+                        if (action) return action;
+                    }
+                }
+            }
+            return undefined;
+        },
+
+        getTriggerByUuid: (triggerUuid) => {
+            const state = get();
+            for (const event of state.events) {
+                if ('points' in event) {
+                    for (const point of (event as ConveyorEventSchema).points) {
+                        if (point.action && 'triggers' in point.action) {
+                            const trigger = point.action.triggers.find(t => t.triggerUuid === triggerUuid);
+                            if (trigger) return trigger;
+                        }
+                    }
+                } else if ('point' in event) {
+                    const point = (event as any).point;
+                    if ('action' in point && 'triggers' in point.action) {
+                        const trigger = point.action.triggers.find((t: any) => t.triggerUuid === triggerUuid);
+                        if (trigger) return trigger;
+                    } else if ('actions' in point) {
+                        for (const action of point.actions) {
+                            if ('triggers' in action) {
+                                const trigger = action.triggers.find((t: any) => t.triggerUuid === triggerUuid);
+                                if (trigger) return trigger;
+                            }
+                        }
+                    }
+                }
+            }
+            return undefined;
+        }
+    }))
+);
diff --git a/app/src/modules/duplicate/duplicateStores/duplicateProductStore.ts b/app/src/modules/duplicate/duplicateStores/duplicateProductStore.ts
new file mode 100644
index 0000000..d3dc8ff
--- /dev/null
+++ b/app/src/modules/duplicate/duplicateStores/duplicateProductStore.ts
@@ -0,0 +1,798 @@
+import { create } from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+
+type ProductsStore = {
+    products: productsSchema;
+
+    // Product-level actions
+    addProduct: (productName: string, productUuid: string) => void;
+    setProducts: (products: productsSchema) => void;
+    clearProducts: () => void;
+    removeProduct: (productUuid: string) => void;
+    updateProduct: (productUuid: string, updates: Partial<{ productName: string; eventDatas: EventsSchema[] }>) => void;
+
+    // Event-level actions
+    addEvent: (productUuid: string, event: EventsSchema) => void;
+    removeEvent: (productUuid: string, modelUuid: string) => void;
+    deleteEvent: (modelUuid: string) => void;
+    updateEvent: (productUuid: string, modelUuid: string, updates: Partial<EventsSchema>) => EventsSchema | undefined;
+
+    // Point-level actions
+    addPoint: (productUuid: string, modelUuid: string, point: ConveyorPointSchema | VehiclePointSchema | RoboticArmPointSchema | MachinePointSchema | StoragePointSchema) => void;
+    removePoint: (productUuid: string, modelUuid: string, pointUuid: string) => void;
+    updatePoint: (
+        productUuid: string,
+        modelUuid: string,
+        pointUuid: string,
+        updates: Partial<ConveyorPointSchema | VehiclePointSchema | RoboticArmPointSchema | MachinePointSchema | StoragePointSchema>
+    ) => EventsSchema | undefined;
+
+    // Action-level actions
+    addAction: (
+        productUuid: string,
+        modelUuid: string,
+        pointUuid: string,
+        action: ConveyorPointSchema['action'] | VehiclePointSchema['action'] | RoboticArmPointSchema['actions'][0] | MachinePointSchema['action'] | StoragePointSchema['action']
+    ) => EventsSchema | undefined;
+    removeAction: (productUuid: string, actionUuid: string) => EventsSchema | undefined;
+    updateAction: (
+        productUuid: string,
+        actionUuid: string,
+        updates: Partial<ConveyorPointSchema['action'] | VehiclePointSchema['action'] | RoboticArmPointSchema['actions'][0] | MachinePointSchema['action'] | StoragePointSchema['action']>
+    ) => EventsSchema | undefined;
+
+    // Trigger-level actionss
+    addTrigger: (
+        productUuid: string,
+        actionUuid: string,
+        trigger: TriggerSchema
+    ) => EventsSchema | undefined;
+    removeTrigger: (productUuid: string, triggerUuid: string) => EventsSchema | undefined;
+    updateTrigger: (
+        productUuid: string,
+        triggerUuid: string,
+        updates: Partial<TriggerSchema>
+    ) => EventsSchema | undefined;
+
+    // Renaming functions
+    renameProduct: (productUuid: string, newName: string) => void;
+    renameAction: (productUuid: string, actionUuid: string, newName: string) => EventsSchema | undefined;
+    renameTrigger: (productUuid: string, triggerUuid: string, newName: string) => EventsSchema | undefined;
+
+    // Helper functions
+    getProductById: (productUuid: string) => { productName: string; productUuid: string; eventDatas: EventsSchema[] } | undefined;
+    getEventByModelUuid: (productUuid: string, modelUuid: string) => EventsSchema | undefined;
+    getEventByActionUuid: (productUuid: string, actionUuid: string) => EventsSchema | undefined;
+    getEventByTriggerUuid: (productUuid: string, triggerUuid: string) => EventsSchema | undefined;
+    getEventByPointUuid: (productUuid: string, pointUuid: string) => EventsSchema | undefined;
+    getPointByUuid: (productUuid: string, modelUuid: string, pointUuid: string) => ConveyorPointSchema | VehiclePointSchema | RoboticArmPointSchema | MachinePointSchema | StoragePointSchema | undefined;
+    getActionByUuid: (productUuid: string, actionUuid: string) => (ConveyorPointSchema['action'] | VehiclePointSchema['action'] | RoboticArmPointSchema['actions'][0] | MachinePointSchema['action'] | StoragePointSchema['action']) | undefined;
+    getActionByPointUuid: (productUuid: string, pointUuid: string) => (ConveyorPointSchema['action'] | VehiclePointSchema['action'] | RoboticArmPointSchema['actions'][0] | MachinePointSchema['action'] | StoragePointSchema['action']) | undefined;
+    getModelUuidByPointUuid: (productUuid: string, actionUuid: string) => (string) | undefined;
+    getModelUuidByActionUuid: (productUuid: string, actionUuid: string) => (string) | undefined;
+    getPointUuidByActionUuid: (productUuid: string, actionUuid: string) => (string) | undefined;
+    getTriggerByUuid: (productUuid: string, triggerUuid: string) => TriggerSchema | undefined;
+    getIsEventInProduct: (productUuid: string, modelUuid: string) => boolean;
+};
+
+export const useDuplicateProductStore = create<ProductsStore>()(
+    immer((set, get) => ({
+        products: [],
+
+        // Product-level actions
+        addProduct: (productName, productUuid) => {
+            set((state) => {
+                const existingProduct = state.products.find(p => p.productUuid === productUuid);
+                if (!existingProduct) {
+                    const newProduct = {
+                        productName,
+                        productUuid: productUuid,
+                        eventDatas: []
+                    };
+                    state.products.push(newProduct);
+                }
+            });
+        },
+
+        setProducts: (products) => {
+            set((state) => {
+                state.products = products;
+            });
+        },
+
+        clearProducts: () => {
+            set((state) => {
+                state.products = [];
+            });
+        },
+
+        removeProduct: (productUuid) => {
+            set((state) => {
+                state.products = state.products.filter(p => p.productUuid !== productUuid);
+            });
+        },
+
+        updateProduct: (productUuid, updates) => {
+            set((state) => {
+                const product = state.products.find(p => p.productUuid === productUuid);
+                if (product) {
+                    Object.assign(product, updates);
+                }
+            });
+        },
+
+        // Event-level actions
+        addEvent: (productUuid, event) => {
+            set((state) => {
+                const product = state.products.find(p => p.productUuid === productUuid);
+                if (product) {
+                    const existingEvent = product.eventDatas.find(e => 'modelUuid' in e && e.modelUuid === event.modelUuid);
+                    if (!existingEvent) {
+                        product.eventDatas.push(event);
+                    }
+                }
+            });
+        },
+
+        removeEvent: (productUuid, modelUuid) => {
+            set((state) => {
+                const product = state.products.find(p => p.productUuid === productUuid);
+                if (product) {
+                    product.eventDatas = product.eventDatas.filter(e => 'modelUuid' in e && e.modelUuid !== modelUuid);
+                }
+            });
+        },
+
+        deleteEvent: (modelUuid) => {
+            set((state) => {
+                for (const product of state.products) {
+                    product.eventDatas = product.eventDatas.filter(e => 'modelUuid' in e && e.modelUuid !== modelUuid);
+                }
+            });
+        },
+
+        updateEvent: (productUuid, modelUuid, updates) => {
+            let updatedEvent: EventsSchema | undefined;
+            set((state) => {
+                const product = state.products.find(p => p.productUuid === productUuid);
+                if (product) {
+                    const event = product.eventDatas.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
+                    if (event) {
+                        Object.assign(event, updates);
+                        updatedEvent = JSON.parse(JSON.stringify(event));
+                    }
+                }
+            });
+            return updatedEvent;
+        },
+
+        // Point-level actions
+        addPoint: (productUuid, modelUuid, point) => {
+            set((state) => {
+                const product = state.products.find(p => p.productUuid === productUuid);
+                if (product) {
+                    const event = product.eventDatas.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
+                    if (event && 'points' in event) {
+                        const existingPoint = (event as ConveyorEventSchema).points.find(p => p.uuid === point.uuid);
+                        if (!existingPoint) {
+                            (event as ConveyorEventSchema).points.push(point as ConveyorPointSchema);
+                        }
+                    } else if (event && 'point' in event) {
+                        const existingPoint = (event as any).point?.uuid === point.uuid;
+                        if (!existingPoint) {
+                            (event as VehicleEventSchema | RoboticArmEventSchema | MachineEventSchema | StorageEventSchema).point = point as any;
+                        }
+                    }
+                }
+            });
+        },
+
+        removePoint: (productUuid, modelUuid, pointUuid) => {
+            set((state) => {
+                const product = state.products.find(p => p.productUuid === productUuid);
+                if (product) {
+                    const event = product.eventDatas.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
+                    if (event && 'points' in event) {
+                        (event as ConveyorEventSchema).points = (event as ConveyorEventSchema).points.filter(p => p.uuid !== pointUuid);
+                    } else if (event && 'point' in event && (event as any).point.uuid === pointUuid) {
+                        // For events with single point, we can't remove it, only reset to empty
+                    }
+                }
+            });
+        },
+
+        updatePoint: (productUuid, modelUuid, pointUuid, updates) => {
+            let updatedEvent: EventsSchema | undefined;
+            set((state) => {
+                const product = state.products.find(p => p.productUuid === productUuid);
+                if (product) {
+                    const event = product.eventDatas.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
+                    if (event && 'points' in event) {
+                        const point = (event as ConveyorEventSchema).points.find(p => p.uuid === pointUuid);
+                        if (point) {
+                            Object.assign(point, updates);
+                            updatedEvent = JSON.parse(JSON.stringify(event));
+                        }
+                    } else if (event && 'point' in event && (event as any).point.uuid === pointUuid) {
+                        Object.assign((event as any).point, updates);
+                        updatedEvent = JSON.parse(JSON.stringify(event));
+                    }
+                }
+            });
+            return updatedEvent;
+        },
+
+        // Action-level actions
+        addAction: (productUuid, modelUuid, pointUuid, action) => {
+            let updatedEvent: EventsSchema | undefined;
+            set((state) => {
+                const product = state.products.find(p => p.productUuid === productUuid);
+                if (product) {
+                    const event = product.eventDatas.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
+                    if (event && 'points' in event) {
+                        const point = (event as ConveyorEventSchema).points.find(p => p.uuid === pointUuid);
+                        if (point && (!point.action || point.action.actionUuid !== action.actionUuid)) {
+                            point.action = action as any;
+                            updatedEvent = JSON.parse(JSON.stringify(event));
+                        }
+                    } else if (event && 'point' in event && (event as any).point.uuid === pointUuid) {
+                        if ('action' in (event as any).point) {
+                            if (!(event as any).point.action || (event as any).point.action.actionUuid !== action.actionUuid) {
+                                (event as any).point.action = action;
+                                updatedEvent = JSON.parse(JSON.stringify(event));
+                            }
+                        } else if ('actions' in (event as any).point) {
+                            const existingAction = (event as any).point.actions.find((a: any) => a.actionUuid === action.actionUuid);
+                            if (!existingAction) {
+                                (event as any).point.actions.push(action);
+                                updatedEvent = JSON.parse(JSON.stringify(event));
+                            }
+                        }
+                    }
+                }
+            });
+            return updatedEvent;
+        },
+
+        removeAction: (productUuid, actionUuid) => {
+            let updatedEvent: EventsSchema | undefined;
+            set((state) => {
+                const product = state.products.find(p => p.productUuid === productUuid);
+                if (product) {
+                    for (const event of product.eventDatas) {
+                        if ('points' in event) {
+                            // Handle ConveyorEventSchema
+                            for (const point of (event as ConveyorEventSchema).points) {
+                            }
+                        } else if ('point' in event) {
+                            const point = (event as any).point;
+                            if (event.type === "roboticArm") {
+                                if ('actions' in point) {
+                                    const index = point.actions.findIndex((a: any) => a.actionUuid === actionUuid);
+                                    if (index !== -1) {
+                                        point.actions.splice(index, 1);
+                                        updatedEvent = JSON.parse(JSON.stringify(event));
+                                        return;
+                                    }
+                                }
+                            } else if ('action' in point && point.action?.actionUuid === actionUuid) {
+                                point.action = undefined;
+                                updatedEvent = JSON.parse(JSON.stringify(event));
+                                return;
+                            }
+                        }
+                    }
+                }
+            });
+            return updatedEvent;
+        },
+
+        updateAction: (productUuid, actionUuid, updates) => {
+            let updatedEvent: EventsSchema | undefined;
+            set((state) => {
+                const product = state.products.find(p => p.productUuid === productUuid);
+                if (product) {
+                    for (const event of product.eventDatas) {
+                        if ('points' in event) {
+                            for (const point of (event as ConveyorEventSchema).points) {
+                                if (point.action && point.action.actionUuid === actionUuid) {
+                                    Object.assign(point.action, updates);
+                                    updatedEvent = JSON.parse(JSON.stringify(event));
+                                    return;
+                                }
+                            }
+                        } else if ('point' in event) {
+                            const point = (event as any).point;
+                            if ('action' in point && point.action.actionUuid === actionUuid) {
+                                Object.assign(point.action, updates);
+                                updatedEvent = JSON.parse(JSON.stringify(event));
+                                return;
+                            } else if ('actions' in point) {
+                                const action = point.actions.find((a: any) => a.actionUuid === actionUuid);
+                                if (action) {
+                                    Object.assign(action, updates);
+                                    updatedEvent = JSON.parse(JSON.stringify(event));
+                                    return;
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+            return updatedEvent;
+        },
+
+        // Trigger-level actions
+        addTrigger: (productUuid, actionUuid, trigger) => {
+            let updatedEvent: EventsSchema | undefined;
+            set((state) => {
+                const product = state.products.find(p => p.productUuid === productUuid);
+                if (product) {
+                    for (const event of product.eventDatas) {
+                        if ('points' in event) {
+                            for (const point of (event as ConveyorEventSchema).points) {
+                                if (point.action && point.action.actionUuid === actionUuid) {
+                                    const existingTrigger = point.action.triggers.find(t => t.triggerUuid === trigger.triggerUuid);
+                                    if (!existingTrigger) {
+                                        point.action.triggers.push(trigger);
+                                        updatedEvent = JSON.parse(JSON.stringify(event));
+                                    }
+                                    return;
+                                }
+                            }
+                        } else if ('point' in event) {
+                            const point = (event as any).point;
+                            if ('action' in point && point.action.actionUuid === actionUuid) {
+                                const existingTrigger = point.action.triggers.find((t: any) => t.triggerUuid === trigger.triggerUuid);
+                                if (!existingTrigger) {
+                                    point.action.triggers.push(trigger);
+                                    updatedEvent = JSON.parse(JSON.stringify(event));
+                                }
+                                return;
+                            } else if ('actions' in point) {
+                                const action = point.actions.find((a: any) => a.actionUuid === actionUuid);
+                                if (action) {
+                                    const existingTrigger = action.triggers.find((t: any) => t.triggerUuid === trigger.triggerUuid);
+                                    if (!existingTrigger) {
+                                        action.triggers.push(trigger);
+                                        updatedEvent = JSON.parse(JSON.stringify(event));
+                                    }
+                                    return;
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+            return updatedEvent;
+        },
+
+        removeTrigger: (productUuid, triggerUuid) => {
+            let updatedEvent: EventsSchema | undefined;
+            set((state) => {
+                const product = state.products.find(p => p.productUuid === productUuid);
+                if (product) {
+                    for (const event of product.eventDatas) {
+                        if ('points' in event) {
+                            for (const point of (event as ConveyorEventSchema).points) {
+                                if (point.action && 'triggers' in point.action) {
+                                    const Trigger = point.action.triggers.find(t => t.triggerUuid === triggerUuid);
+                                    if (Trigger) {
+                                        point.action.triggers = point.action.triggers.filter(t => t.triggerUuid !== triggerUuid);
+                                        updatedEvent = JSON.parse(JSON.stringify(event));
+                                    }
+                                }
+                            }
+                        } else if ('point' in event) {
+                            const point = (event as any).point;
+                            if ('action' in point && 'triggers' in point.action) {
+                                const Trigger = point.action.triggers.find((t: any) => t.triggerUuid === triggerUuid);
+                                if (Trigger) {
+                                    point.action.triggers = point.action.triggers.filter((t: any) => t.triggerUuid !== triggerUuid);
+                                    updatedEvent = JSON.parse(JSON.stringify(event));
+                                }
+                            } else if ('actions' in point) {
+                                for (const action of point.actions) {
+                                    if ('triggers' in action) {
+                                        const Trigger = action.triggers.find((t: any) => t.triggerUuid === triggerUuid);
+                                        if (Trigger) {
+                                            action.triggers = action.triggers.filter((t: any) => t.triggerUuid !== triggerUuid);
+                                            updatedEvent = JSON.parse(JSON.stringify(event));
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+            return updatedEvent;
+        },
+
+        updateTrigger: (productUuid, triggerUuid, updates) => {
+            let updatedEvent: EventsSchema | undefined;
+            set((state) => {
+                const product = state.products.find(p => p.productUuid === productUuid);
+                if (product) {
+                    for (const event of product.eventDatas) {
+                        if ('points' in event) {
+                            for (const point of (event as ConveyorEventSchema).points) {
+                                if (point.action && 'triggers' in point.action) {
+                                    const trigger = point.action.triggers.find(t => t.triggerUuid === triggerUuid);
+                                    if (trigger) {
+                                        Object.assign(trigger, updates);
+                                        updatedEvent = JSON.parse(JSON.stringify(event));
+                                        return;
+                                    }
+                                }
+                            }
+                        } else if ('point' in event) {
+                            const point = (event as any).point;
+                            if ('action' in point && 'triggers' in point.action) {
+                                const trigger = point.action.triggers.find((t: any) => t.triggerUuid === triggerUuid);
+                                if (trigger) {
+                                    Object.assign(trigger, updates);
+                                    updatedEvent = JSON.parse(JSON.stringify(event));
+                                    return;
+                                }
+                            } else if ('actions' in point) {
+                                for (const action of point.actions) {
+                                    if ('triggers' in action) {
+                                        const trigger = action.triggers.find((t: any) => t.triggerUuid === triggerUuid);
+                                        if (trigger) {
+                                            Object.assign(trigger, updates);
+                                            updatedEvent = JSON.parse(JSON.stringify(event));
+                                            return;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+            return updatedEvent;
+        },
+
+        // Renaming functions
+        renameProduct: (productUuid, newName) => {
+            set((state) => {
+                const product = state.products.find(p => p.productUuid === productUuid);
+                if (product) {
+                    product.productName = newName;
+                }
+            });
+        },
+
+        renameAction: (productUuid, actionUuid, newName) => {
+            let updatedEvent: EventsSchema | undefined;
+            set((state) => {
+                const product = state.products.find(p => p.productUuid === productUuid);
+                if (product) {
+                    for (const event of product.eventDatas) {
+                        if ('points' in event) {
+                            for (const point of (event as ConveyorEventSchema).points) {
+                                if (point.action && point.action.actionUuid === actionUuid) {
+                                    point.action.actionName = newName;
+                                    updatedEvent = JSON.parse(JSON.stringify(event));
+                                    return;
+                                }
+                            }
+                        } else if ('point' in event) {
+                            const point = (event as any).point;
+                            if ('action' in point && point.action.actionUuid === actionUuid) {
+                                point.action.actionName = newName;
+                                updatedEvent = JSON.parse(JSON.stringify(event));
+                                return;
+                            } else if ('actions' in point) {
+                                const action = point.actions.find((a: any) => a.actionUuid === actionUuid);
+                                if (action) {
+                                    action.actionName = newName;
+                                    updatedEvent = JSON.parse(JSON.stringify(event));
+                                    return;
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+            return updatedEvent;
+        },
+
+        renameTrigger: (productUuid, triggerUuid, newName) => {
+            let updatedEvent: EventsSchema | undefined;
+            set((state) => {
+                const product = state.products.find(p => p.productUuid === productUuid);
+                if (product) {
+                    for (const event of product.eventDatas) {
+                        if ('points' in event) {
+                            for (const point of (event as ConveyorEventSchema).points) {
+                                if (point.action && 'triggers' in point.action) {
+                                    const trigger = point.action.triggers.find(t => t.triggerUuid === triggerUuid);
+                                    if (trigger) {
+                                        trigger.triggerName = newName;
+                                        updatedEvent = JSON.parse(JSON.stringify(event));
+                                        return;
+                                    }
+                                }
+                            }
+                        } else if ('point' in event) {
+                            const point = (event as any).point;
+                            if ('action' in point && 'triggers' in point.action) {
+                                const trigger = point.action.triggers.find((t: any) => t.triggerUuid === triggerUuid);
+                                if (trigger) {
+                                    trigger.triggerName = newName;
+                                    updatedEvent = JSON.parse(JSON.stringify(event));
+                                    return;
+                                }
+                            } else if ('actions' in point) {
+                                for (const action of point.actions) {
+                                    if ('triggers' in action) {
+                                        const trigger = action.triggers.find((t: any) => t.triggerUuid === triggerUuid);
+                                        if (trigger) {
+                                            trigger.triggerName = newName;
+                                            updatedEvent = JSON.parse(JSON.stringify(event));
+                                            return;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+            return updatedEvent;
+        },
+
+        // Helper functions
+        getProductById: (productUuid) => {
+            return get().products.find(p => p.productUuid === productUuid);
+        },
+
+        getEventByModelUuid: (productUuid, modelUuid) => {
+            const product = get().getProductById(productUuid);
+            if (!product) return undefined;
+            return product.eventDatas.find(e => 'modelUuid' in e && e.modelUuid === modelUuid);
+        },
+
+        getEventByActionUuid: (productUuid, actionUuid) => {
+            const product = get().getProductById(productUuid);
+            if (!product) return undefined;
+
+            for (const event of product.eventDatas) {
+                if ('points' in event) {
+                    for (const point of (event as ConveyorEventSchema).points) {
+                        if (point.action?.actionUuid === actionUuid) {
+                            return event;
+                        }
+                    }
+                } else if ('point' in event) {
+                    const point = (event as any).point;
+                    if ('action' in point && point.action?.actionUuid === actionUuid) {
+                        return event;
+                    } else if ('actions' in point) {
+                        const action = point.actions.find((a: any) => a.actionUuid === actionUuid);
+                        if (action) {
+                            return event;
+                        }
+                    }
+                }
+            }
+            return undefined;
+        },
+
+        getEventByTriggerUuid: (productUuid, triggerUuid) => {
+            const product = get().getProductById(productUuid);
+            if (!product) return undefined;
+
+            for (const event of product.eventDatas) {
+                if ('points' in event) {
+                    for (const point of (event as ConveyorEventSchema).points) {
+                        if (point.action?.triggers?.some(t => t.triggerUuid === triggerUuid)) {
+                            return event;
+                        }
+                    }
+                } else if ('point' in event) {
+                    const point = (event as any).point;
+                    if ('action' in point) {
+                        if (point.action?.triggers?.some((t: any) => t.triggerUuid === triggerUuid)) {
+                            return event;
+                        }
+                    } else if ('actions' in point) {
+                        for (const action of point.actions) {
+                            if (action.triggers?.some((t: any) => t.triggerUuid === triggerUuid)) {
+                                return event;
+                            }
+                        }
+                    }
+                }
+            }
+            return undefined;
+        },
+
+        getEventByPointUuid: (productUuid, pointUuid) => {
+            const product = get().getProductById(productUuid);
+            if (!product) return undefined;
+
+            for (const event of product.eventDatas) {
+                if ('points' in event) {
+                    if ((event as ConveyorEventSchema).points.some(p => p.uuid === pointUuid)) {
+                        return event;
+                    }
+                } else if ('point' in event) {
+                    if ((event as any).point?.uuid === pointUuid) {
+                        return event;
+                    }
+                }
+            }
+            return undefined;
+        },
+
+        getPointByUuid: (productUuid, modelUuid, pointUuid) => {
+            const event = get().getEventByModelUuid(productUuid, modelUuid);
+            if (!event) return undefined;
+
+            if ('points' in event) {
+                return (event as ConveyorEventSchema).points.find(p => p.uuid === pointUuid);
+            } else if ('point' in event && (event as any).point.uuid === pointUuid) {
+                return (event as VehicleEventSchema | RoboticArmEventSchema | MachineEventSchema | StorageEventSchema).point;
+            }
+            return undefined;
+        },
+
+        getActionByUuid: (productUuid, actionUuid) => {
+            const product = get().products.find(p => p.productUuid === productUuid);
+            if (!product) return undefined;
+
+            for (const event of product.eventDatas) {
+                if ('points' in event) {
+                    for (const point of (event as ConveyorEventSchema).points) {
+                        if (point.action?.actionUuid === actionUuid) {
+                            return point.action;
+                        }
+                    }
+                } else if ('point' in event) {
+                    const point = (event as any).point;
+                    if ('action' in point && point.action?.actionUuid === actionUuid) {
+                        return point.action;
+                    } else if ('actions' in point) {
+                        const action = point.actions.find((a: any) => a.actionUuid === actionUuid);
+                        if (action) return action;
+                    }
+                }
+            }
+            return undefined;
+        },
+
+        getActionByPointUuid: (productUuid, pointUuid) => {
+            const product = get().products.find(p => p.productUuid === productUuid);
+            if (!product) return undefined;
+
+            for (const event of product.eventDatas) {
+                if ('points' in event) {
+                    for (const point of (event as ConveyorEventSchema).points) {
+                        if (point.uuid === pointUuid) {
+                            return point.action;
+                        }
+                    }
+                } else if ('point' in event) {
+                    const point = (event as any).point;
+                    if (point.uuid === pointUuid) {
+                        return point.action;
+                    }
+                }
+            }
+            return undefined;
+        },
+
+        getModelUuidByPointUuid: (productUuid, pointUuid) => {
+            const product = get().products.find(p => p.productUuid === productUuid);
+            if (!product) return undefined;
+
+            for (const event of product.eventDatas) {
+                if ('points' in event) {
+                    for (const point of (event as ConveyorEventSchema).points) {
+                        if (point.uuid === pointUuid) {
+                            return event.modelUuid;
+                        }
+                    }
+                } else if ('point' in event) {
+                    const point = (event as any).point;
+                    if (point.uuid === pointUuid) {
+                        return event.modelUuid;
+                    }
+                }
+            }
+            return undefined;
+        },
+
+        getModelUuidByActionUuid: (productUuid, actionUuid) => {
+            const product = get().products.find(p => p.productUuid === productUuid);
+            if (!product) return undefined;
+
+            for (const event of product.eventDatas) {
+                if ('points' in event) {
+                    for (const point of (event as ConveyorEventSchema).points) {
+                        if (point.action?.actionUuid === actionUuid) {
+                            return event.modelUuid;
+                        }
+                    }
+                } else if ('point' in event) {
+                    const point = (event as any).point;
+                    if ('action' in point && point.action?.actionUuid === actionUuid) {
+                        return event.modelUuid;
+                    } else if ('actions' in point) {
+                        const action = point.actions.find((a: any) => a.actionUuid === actionUuid);
+                        if (action) return event.modelUuid;
+                    }
+                }
+            }
+            return undefined;
+        },
+
+        getPointUuidByActionUuid: (productUuid, actionUuid) => {
+            const product = get().products.find(p => p.productUuid === productUuid);
+            if (!product) return undefined;
+
+            for (const event of product.eventDatas) {
+                if ('points' in event) {
+                    for (const point of (event as ConveyorEventSchema).points) {
+                        if (point.action?.actionUuid === actionUuid) {
+                            return point.uuid;
+                        }
+                    }
+                } else if ('point' in event) {
+                    const point = (event as any).point;
+                    if ('action' in point && point.action?.actionUuid === actionUuid) {
+                        return point.uuid;
+                    } else if ('actions' in point) {
+                        const action = point.actions.find((a: any) => a.actionUuid === actionUuid);
+                        if (action) return point.uuid;
+                    }
+                }
+            }
+            return undefined;
+        },
+
+        getTriggerByUuid: (productUuid, triggerUuid) => {
+            const product = get().products.find(p => p.productUuid === productUuid);
+            if (!product) return undefined;
+
+            for (const event of product.eventDatas) {
+                if ('points' in event) {
+                    for (const point of (event as ConveyorEventSchema).points) {
+                        for (const trigger of point.action?.triggers || []) {
+                            if (trigger.triggerUuid === triggerUuid) {
+                                return trigger;
+                            }
+                        }
+                    }
+                } else if ('point' in event) {
+                    const point = (event as any).point;
+                    if ('action' in point) {
+                        for (const trigger of point.action?.triggers || []) {
+                            if (trigger.triggerUuid === triggerUuid) {
+                                return trigger;
+                            }
+                        }
+                    } else if ('actions' in point) {
+                        for (const action of point.actions) {
+                            for (const trigger of action.triggers || []) {
+                                if (trigger.triggerUuid === triggerUuid) {
+                                    return trigger;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            return undefined;
+        },
+
+        getIsEventInProduct: (productUuid, modelUuid) => {
+            const product = get().getProductById(productUuid);
+            if (!product) return false;
+            return product.eventDatas.some(e => 'modelUuid' in e && e.modelUuid === modelUuid);
+        }
+    }))
+);
diff --git a/app/src/modules/duplicate/sceneDuplicate.tsx b/app/src/modules/duplicate/sceneDuplicate.tsx
index eff0082..248d044 100644
--- a/app/src/modules/duplicate/sceneDuplicate.tsx
+++ b/app/src/modules/duplicate/sceneDuplicate.tsx
@@ -9,36 +9,45 @@ import background from "../../assets/textures/hdr/mudroadpuresky2k.hdr";
 import ControlsDuplicate from "./duplicateSetup/controlsDuplicate";
 import PostProcessingDuplicate from "./duplicateSetup/postProcessingDuplicate";
 import { Color } from "three";
+import { SceneProvider } from "../scene/sceneContext";
+import SimulationDuplicate from "./duplicateSimulation/duplicateSimulation";
 
 export default function DuplicateScene() {
     const projectId = "684bcd620a64bc2a815a88d6";
 
     return (
-        <Canvas
-            id="sceneCanvas"
-            shadows
-            color="#aaaa"
-            eventPrefix="client"
-            onContextMenu={(e) => {
-                e.preventDefault();
-            }}
-            onCreated={(e) => {
-                e.scene.background = new Color(0x19191d);
-            }}
-            gl={{ powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }}
-        >
+        <SceneProvider layout='Comparison Layout'>
+            <Canvas
+                id="sceneCanvas"
+                shadows
+                color="#aaaa"
+                eventPrefix="client"
+                style={{
+                    pointerEvents: 'none'
+                }}
+                onContextMenu={(e) => {
+                    e.preventDefault();
+                }}
+                onCreated={(e) => {
+                    e.scene.background = new Color(0x19191d);
+                }}
+                gl={{ powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }}
+            >
 
-            <Sun />
+                <Sun />
 
-            <Shadows />
+                <Shadows />
 
-            <ControlsDuplicate projectId={projectId} />
+                <ControlsDuplicate />
 
-            <PostProcessingDuplicate />
+                <PostProcessingDuplicate />
 
-            <Environment files={background} environmentIntensity={1.5} />
+                <Environment files={background} environmentIntensity={1.5} />
 
-            <BuilderDuplicate projectId={projectId} />
-        </Canvas>
+                <BuilderDuplicate projectId={projectId} />
+
+                <SimulationDuplicate projectId={projectId} />
+            </Canvas>
+        </SceneProvider>
     );
 }
\ No newline at end of file
diff --git a/app/src/modules/scene/controls/controls.tsx b/app/src/modules/scene/controls/controls.tsx
index d611114..20ca348 100644
--- a/app/src/modules/scene/controls/controls.tsx
+++ b/app/src/modules/scene/controls/controls.tsx
@@ -4,7 +4,7 @@ import { useThree } from "@react-three/fiber";
 import * as THREE from "three";
 import * as CONSTANTS from '../../../types/world/worldConstants';
 
-import { useSocketStore, useToggleView, useResetCamera } from "../../../store/builder/store";
+import { useSocketStore, useToggleView, useResetCamera, useDuplicatedCamData } from "../../../store/builder/store";
 import { getCamera } from "../../../services/factoryBuilder/camera/getCameraApi";
 import updateCamPosition from "../camera/updateCameraPosition";
 import CamMode from "../camera/camMode";
@@ -21,6 +21,7 @@ export default function Controls() {
     const { socket } = useSocketStore();
     const state = useThree();
     const { projectId } = useParams();
+    const { setDuplicatedCamData } = useDuplicatedCamData();
 
     useEffect(() => {
         if (controlsRef.current) {
@@ -106,10 +107,23 @@ export default function Controls() {
             }
         };
 
+        const camUpdate = () => {
+            if (!controlsRef.current) return;
+            const position = controlsRef.current.getPosition(new THREE.Vector3(0, 0, 0));
+            const target = controlsRef.current.getTarget(new THREE.Vector3(0, 0, 0));
+            const rotation = state.camera.rotation;
+            setDuplicatedCamData(
+                [position.x, position.y, position.z],
+                [target.x, target.y, target.z],
+                [rotation.x, rotation.y, rotation.z]
+            )
+        };
+
         const controls = controlsRef.current;
         if (controls) {
             controls.addEventListener("sleep", handleRest);
             controls.addEventListener("control", startInterval);
+            controls.addEventListener("control", camUpdate);
             controls.addEventListener("controlend", stopInterval);
         }
 
@@ -117,6 +131,7 @@ export default function Controls() {
             if (controls) {
                 controls.removeEventListener("sleep", handleRest);
                 controls.removeEventListener("control", startInterval);
+                controls.removeEventListener("control", camUpdate);
                 controls.removeEventListener("controlend", stopInterval);
             }
             stopInterval();
diff --git a/app/src/store/builder/store.ts b/app/src/store/builder/store.ts
index 890a0e8..4cb8947 100644
--- a/app/src/store/builder/store.ts
+++ b/app/src/store/builder/store.ts
@@ -741,4 +741,36 @@ export const useCompareProductDataStore = create<{
 }>((set) => ({
   compareProductsData: [],
   setCompareProductsData: (x) => set({ compareProductsData: x }),
-}));
\ No newline at end of file
+}));
+
+export const useDuplicatedCamData = create<{
+  duplicatedCamData: {
+    camPosition: [number, number, number];
+    camTarget: [number, number, number];
+    camRotation: [number, number, number];
+  };
+  setDuplicatedCamData: (
+    camPosition: [number, number, number],
+    camTarget: [number, number, number],
+    camRotation: [number, number, number],
+  ) =>
+    void;
+}>((set) => ({
+  duplicatedCamData: {
+    camPosition: [0, 0, 0],
+    camTarget: [0, 0, 0],
+    camRotation: [0, 0, 0],
+  },
+  setDuplicatedCamData: (
+    camPosition: [number, number, number],
+    camTarget: [number, number, number],
+    camRotation: [number, number, number],
+  ) => set({
+    duplicatedCamData: {
+      camPosition: camPosition,
+      camTarget: camTarget,
+      camRotation: camRotation,
+    }
+  })
+})
+)
diff --git a/app/src/styles/layout/compareLayout.scss b/app/src/styles/layout/compareLayout.scss
index 31966be..9d3ae0a 100644
--- a/app/src/styles/layout/compareLayout.scss
+++ b/app/src/styles/layout/compareLayout.scss
@@ -37,6 +37,7 @@
     animation: slideInFromRight 0.4s ease-out forwards;
     user-select: none;
     border-left: 2px solid var(--border-color);
+    pointer-events: none;
 
     .resizer {
         width: 32px;
@@ -54,6 +55,7 @@
         cursor: ew-resize;
         transition: transform 0.1s ease;
         z-index: 100;
+        pointer-events: all;
     }
 
     .chooseLayout-container {
@@ -82,6 +84,7 @@
             max-width: 80%;
             text-align: center;
             position: relative;
+            pointer-events: all;
 
             .icon {
                 width: 100%;
@@ -162,7 +165,9 @@
                         width: 100%;
 
                         &:hover {
-                            background-color: var(--highlight-text-color) !important;
+                            background-color: var(
+                                --highlight-text-color
+                            ) !important;
                             border-radius: 4px;
 
                             .layout {
@@ -301,19 +306,21 @@
                                 background-color: #b7b7c6;
 
                                 // Custom polygon shape (adjust if needed)
-                                clip-path: polygon(96% 52%,
-                                        96% 54%,
-                                        45% 53%,
-                                        3% 100%,
-                                        0 100%,
-                                        42% 52%);
+                                clip-path: polygon(
+                                    96% 52%,
+                                    96% 54%,
+                                    45% 53%,
+                                    3% 100%,
+                                    0 100%,
+                                    42% 52%
+                                );
 
                                 z-index: 0; // Behind any inner content
                             }
                         }
 
                         // Optional: content above the shape
-                        >* {
+                        > * {
                             position: relative;
                             z-index: 1;
                         }
@@ -368,19 +375,21 @@
                             height: 100%;
 
                             background: var(--background-color, wheat);
-                            clip-path: polygon(25% 0%,
-                                    75% 0%,
-                                    100% 50%,
-                                    75% 100%,
-                                    25% 100%,
-                                    0% 50%);
+                            clip-path: polygon(
+                                25% 0%,
+                                75% 0%,
+                                100% 50%,
+                                75% 100%,
+                                25% 100%,
+                                0% 50%
+                            );
                             filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
 
                             z-index: 0;
                         }
 
                         // Content stays above the shape
-                        >* {
+                        > * {
                             position: relative;
                             z-index: 1;
                         }
@@ -603,4 +612,4 @@
             position: relative;
         }
     }
-}
\ No newline at end of file
+}

From 48c62c9189bf4412ffddef6fd0b9edc77427ccb8 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Fri, 13 Jun 2025 17:45:45 +0530
Subject: [PATCH 3/7] feat: Update ComparisonScene to display selected product
 name in dropdown header and add console log for products in TriggerDuplicate

---
 app/src/components/layout/scenes/ComparisonScene.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/components/layout/scenes/ComparisonScene.tsx b/app/src/components/layout/scenes/ComparisonScene.tsx
index 9c895ad..ce8e455 100644
--- a/app/src/components/layout/scenes/ComparisonScene.tsx
+++ b/app/src/components/layout/scenes/ComparisonScene.tsx
@@ -82,7 +82,7 @@ function ComparisonScene() {
                     {comparisonProduct && !isPlaying &&
                         <div className="initial-selectLayout-wrapper">
                             <RegularDropDown
-                                header={'Product 1'}
+                                header={selectedProduct.productName}
                                 options={products.map((l) => l.productName)} // Pass layout names as options
                                 onSelect={handleSelectLayout}
                                 search={false}

From fe12ab2f4a1bf15c1479bacbb0586de6f3e2e100 Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Fri, 13 Jun 2025 18:15:35 +0530
Subject: [PATCH 4/7] feat: Enhance MainScene with comparison product handling
 and update styles for layout components

---
 .../components/layout/scenes/MainScene.tsx    |    6 +-
 app/src/styles/base/global.scss               |    3 +
 app/src/styles/layout/compareLayout.scss      | 1039 ++++++++---------
 3 files changed, 525 insertions(+), 523 deletions(-)

diff --git a/app/src/components/layout/scenes/MainScene.tsx b/app/src/components/layout/scenes/MainScene.tsx
index 67dc35a..4139b5a 100644
--- a/app/src/components/layout/scenes/MainScene.tsx
+++ b/app/src/components/layout/scenes/MainScene.tsx
@@ -52,7 +52,7 @@ function MainScene() {
   const { visualizationSocket } = useSocketStore();
   const { selectedZone } = useSelectedZoneStore();
   const { setFloatingWidget } = useFloatingWidget();
-  const { clearComparisonProduct } = useComparisonProduct();
+  const { comparisonProduct, clearComparisonProduct } = useComparisonProduct();
   const { selectedFloorItem, setSelectedFloorItem } = useSelectedFloorItem();
   const { setName } = useAssetsStore();
   const { projectId } = useParams()
@@ -120,7 +120,9 @@ function MainScene() {
         </>
       )}
       <div
-        className="scene-container"
+        className={`scene-container${
+          comparisonProduct?.productUuid ? " half-view" : ""
+        }`}
         id="work-space-three-d-canvas"
         style={{
           height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
diff --git a/app/src/styles/base/global.scss b/app/src/styles/base/global.scss
index 3b12635..56dc3cc 100644
--- a/app/src/styles/base/global.scss
+++ b/app/src/styles/base/global.scss
@@ -28,6 +28,9 @@ section,
     border: none;
   }
 }
+.scene-container.half-view{
+  width: 50vw !important;
+}
 
 .tooltip {
   position: absolute;
diff --git a/app/src/styles/layout/compareLayout.scss b/app/src/styles/layout/compareLayout.scss
index f5bba52..15c0a6b 100644
--- a/app/src/styles/layout/compareLayout.scss
+++ b/app/src/styles/layout/compareLayout.scss
@@ -2,616 +2,613 @@
 @use "../abstracts/mixins" as *;
 
 .initial-selectLayout-wrapper {
-    position: fixed;
-    top: 100px;
-    right: 40px;
-    z-index: 10;
+  position: fixed;
+  top: 100px;
+  right: 40px;
+  z-index: 10;
 
-    .regularDropdown-container {
-        background: var(--background-color);
-    }
+  .regularDropdown-container {
+    background: var(--background-color);
+  }
 }
 
 .selectLayout-wrapper {
-    position: fixed;
-    left: 40px;
-    top: 100px;
-    z-index: 10;
+  position: fixed;
+  left: 40px;
+  top: 100px;
+  z-index: 10;
 
-    .regularDropdown-container {
-        background: var(--background-color);
-    }
+  .regularDropdown-container {
+    background: var(--background-color);
+  }
 }
 
 .compareLayOut-wrapper {
-    position: fixed;
-    top: 0;
-    right: 0;
-    z-index: 2;
-    height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  height: 100vh;
+  background: var(--background-color);
+  backdrop-filter: blur(20px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation: slideInFromRight 0.4s ease-out forwards;
+  user-select: none;
+  border-left: 2px solid var(--border-color);
+  pointer-events: none;
+
+  .resizer {
+    width: 32px;
+    height: 32px;
+    @include flex-center;
+    padding: 6px;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translate(-50%, -50%);
     background: var(--background-color);
     backdrop-filter: blur(20px);
+    box-shadow: $box-shadow-heavy;
+    border-radius: 50%;
+    cursor: ew-resize;
+    transition: transform 0.1s ease;
+    z-index: 100;
+    // pointer-events: all;
+    opacity: 0;
+  }
+
+  .chooseLayout-container {
+    width: 100%;
+    height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
-    animation: slideInFromRight 0.4s ease-out forwards;
-    user-select: none;
-    border-left: 2px solid var(--border-color);
-    pointer-events: none;
+    position: relative;
+    overflow: hidden;
 
-    .resizer {
-        width: 32px;
-        height: 32px;
-        @include flex-center;
-        padding: 6px;
-        position: absolute;
-        top: 50%;
-        left: 0;
-        transform: translate(-50%, -50%);
+    .compare-layout-canvas-container {
+      position: absolute;
+      height: 100vh;
+      width: 50vw;
+      top: 0;
+      right: 0;
+    }
+
+    .chooseLayout-wrapper {
+      background: var(--background-color);
+      backdrop-filter: blur(20px);
+      padding: 20px;
+      border-radius: 8px;
+      box-shadow: $box-shadow-medium;
+      max-width: 80%;
+      text-align: center;
+      position: relative;
+      pointer-events: all;
+
+      .icon {
+        width: 100%;
+        margin-bottom: 15px;
+        text-align: center;
+
+        svg {
+          width: 100%;
+        }
+      }
+
+      .value {
+        margin-bottom: 15px;
+        font-size: var(--font-size-small);
+        font-weight: 500;
+        color: var(--text-primary);
+      }
+
+      button {
+        display: block;
+        margin: 0 auto;
+        padding: 8px 16px;
+        background: var(--background-color-button);
+        color: var(--icon-default-color-active);
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+
+        &:hover {
+          transform: translateY(-1px);
+        }
+      }
+
+      .displayLayouts-container {
+        max-width: 170px;
+        height: auto;
         background: var(--background-color);
         backdrop-filter: blur(20px);
-        box-shadow: $box-shadow-heavy;
-        border-radius: 50%;
-        cursor: ew-resize;
-        transition: transform 0.1s ease;
-        z-index: 100;
-        pointer-events: all;
-    }
-
-    .chooseLayout-container {
-        width: 100%;
-        height: 100%;
+        padding: 6px;
+        border-radius: 8px;
+        box-shadow: $box-shadow-medium;
+        position: absolute;
+        right: 0;
+        top: 100%;
+        transform: translate(50%, -10px);
         display: flex;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-        overflow: hidden;
+        flex-direction: column;
+        gap: 6px;
 
-        .compare-layout-canvas-container {
-            position: absolute;
-            height: 100vh;
-            width: 100vw;
-            top: 0;
-            right: 0;
+        .header {
+          text-align: left;
+          padding-top: 6px;
+          padding-left: 6px;
         }
 
-        .chooseLayout-wrapper {
-            background: var(--background-color);
-            backdrop-filter: blur(20px);
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: $box-shadow-medium;
-            max-width: 80%;
-            text-align: center;
-            position: relative;
-            pointer-events: all;
+        .search-wrapper {
+          padding: 6px 0;
 
-            .icon {
-                width: 100%;
-                margin-bottom: 15px;
-                text-align: center;
-
-                svg {
-                    width: 100%;
-                }
-            }
-
-            .value {
-                margin-bottom: 15px;
-                font-size: var(--font-size-small);
-                font-weight: 500;
-                color: var(--text-primary);
-            }
-
-            button {
-                display: block;
-                margin: 0 auto;
-                padding: 8px 16px;
-                background: var(--background-color-button);
-                color: var(--icon-default-color-active);
-                border: none;
-                border-radius: 4px;
-                cursor: pointer;
-                transition: all 0.2s ease;
-
-                &:hover {
-                    transform: translateY(-1px);
-                }
-            }
-
-            .displayLayouts-container {
-                max-width: 170px;
-                height: auto;
-                background: var(--background-color);
-                backdrop-filter: blur(20px);
-                padding: 6px;
-                border-radius: 8px;
-                box-shadow: $box-shadow-medium;
-                position: absolute;
-                right: 0;
-                top: 100%;
-                transform: translate(50%, -10px);
-                display: flex;
-                flex-direction: column;
-                gap: 6px;
-
-                .header {
-                    text-align: left;
-                    padding-top: 6px;
-                    padding-left: 6px;
-                }
-
-                .search-wrapper {
-                    padding: 6px 0;
-
-                    .search-container {
-                        padding: 0;
-                        border-radius: 6px;
-                    }
-                }
-
-                .layouts-container {
-                    .layout {
-                        padding: 6px 0;
-                    }
-
-                    .layout-wrapper {
-                        display: flex;
-                        align-items: center;
-                        gap: 6px;
-                        cursor: pointer;
-                        padding: 0 10px;
-                        background: none;
-                        width: 100%;
-
-                        &:hover {
-                            background-color: var(
-                                --highlight-text-color
-                            ) !important;
-                            border-radius: 4px;
-
-                            .layout {
-                                color: var(--text-button-color) !important;
-                            }
-
-                            svg {
-                                path {
-                                    fill: var(--text-button-color) !important;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
+          .search-container {
+            padding: 0;
+            border-radius: 6px;
+          }
         }
+
+        .layouts-container {
+          .layout {
+            padding: 6px 0;
+          }
+
+          .layout-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            cursor: pointer;
+            padding: 0 10px;
+            background: none;
+            width: 100%;
+
+            &:hover {
+              background-color: var(--highlight-text-color) !important;
+              border-radius: 4px;
+
+              .layout {
+                color: var(--text-button-color) !important;
+              }
+
+              svg {
+                path {
+                  fill: var(--text-button-color) !important;
+                }
+              }
+            }
+          }
+        }
+      }
     }
+  }
 }
 
 .compare-result-container {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    position: fixed;
-    bottom: 40px;
-    width: 100%;
-    min-height: 200px;
-    z-index: 10;
-    background: var(--background-color-secondary);
-    backdrop-filter: blur(20px);
-    padding: 18px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  position: fixed;
+  bottom: 40px;
+  width: 100%;
+  min-height: 200px;
+  z-index: 10;
+  background: var(--background-color-secondary);
+  backdrop-filter: blur(20px);
+  padding: 18px 8px;
 
-    .header {
-        width: fit-content;
-        background-color: var(--background-color-solid);
-        color: var(--background-color-accent);
-        padding: 6px 10px;
-        border-radius: 6px;
+  .header {
+    width: fit-content;
+    background-color: var(--background-color-solid);
+    color: var(--background-color-accent);
+    padding: 6px 10px;
+    border-radius: 6px;
+  }
+
+  .compare-result-wrapper {
+    display: flex;
+    gap: 12px;
+
+    h4 {
+      font-weight: 600;
     }
 
-    .compare-result-wrapper {
+    .comparisionCard {
+      position: relative;
+      flex: 1;
+      width: auto;
+      max-height: 200px;
+      background: var(--background-color);
+      outline: 1px solid var(--border-color);
+      outline-offset: -1px;
+      border-radius: 12px;
+      padding: 8px 12px;
+      overflow: hidden;
+    }
+
+    .performanceResult-wrapper {
+      min-width: 328px;
+      flex: 0;
+      position: relative;
+      padding-right: 65px;
+
+      .header {
         display: flex;
         gap: 12px;
+        align-items: center;
+      }
 
-        h4 {
-            font-weight: 600;
-        }
+      .metrics-container {
+        display: flex;
+        gap: 12px;
+        height: 100%;
 
-        .comparisionCard {
-            position: relative;
-            flex: 1;
-            width: auto;
-            max-height: 200px;
-            background: var(--background-color);
-            outline: 1px solid var(--border-color);
-            outline-offset: -1px;
-            border-radius: 12px;
-            padding: 8px 12px;
-            overflow: hidden;
-        }
+        .metrics-left {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          height: 100%;
 
-        .performanceResult-wrapper {
-            min-width: 328px;
-            flex: 0;
-            position: relative;
-            padding-right: 65px;
+          .metric {
+            .metric-label {
+              display: flex;
+              align-items: center;
+              gap: 6px;
 
-            .header {
+              span {
                 display: flex;
-                gap: 12px;
-                align-items: center;
+              }
             }
 
-            .metrics-container {
-                display: flex;
-                gap: 12px;
-                height: 100%;
-
-                .metrics-left {
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-around;
-                    height: 100%;
-
-                    .metric {
-                        .metric-label {
-                            display: flex;
-                            align-items: center;
-                            gap: 6px;
-
-                            span {
-                                display: flex;
-                            }
-                        }
-
-                        .metric-value {
-                            padding-top: 6px;
-                            font-size: var(--font-size-xlarge);
-                            color: var(--background-color-accent);
-                            font-weight: 600;
-                        }
-                    }
-
-                    .label {
-                        padding-bottom: 68px;
-                    }
-                }
-
-                .metrics-right {
-                    height: fit-content;
-                    display: grid;
-                    grid-template-columns: repeat(2, 1fr);
-                    grid-template-rows: repeat(2, 1fr);
-
-                    gap: 2px;
-                    overflow: visible;
-
-                    margin: auto 0;
-
-                    .metric-wrapper {
-                        position: relative;
-                        width: 64px;
-                        height: 50px;
-                        overflow: visible; // allow content like labels to overflow
-
-                        &:nth-child(1) {
-                            .metric-label {
-                                top: -57%;
-                                left: 220%;
-                            }
-
-                            &::after {
-                                content: "";
-                                position: absolute;
-
-                                top: -100%;
-                                left: 50%;
-                                width: 100%; // Required for visible shape
-                                height: 40px;
-                                background-color: #b7b7c6;
-
-                                // Custom polygon shape (adjust if needed)
-                                clip-path: polygon(
-                                    96% 52%,
-                                    96% 54%,
-                                    45% 53%,
-                                    3% 100%,
-                                    0 100%,
-                                    42% 52%
-                                );
-
-                                z-index: 0; // Behind any inner content
-                            }
-                        }
-
-                        // Optional: content above the shape
-                        > * {
-                            position: relative;
-                            z-index: 1;
-                        }
-
-                        &:nth-child(2) {
-                            grid-column-start: 1;
-                            grid-row-start: 2;
-
-                            .metric-label {
-                                white-space: normal;
-                                width: 50px;
-                                left: 230%;
-                            }
-                        }
-
-                        &:nth-child(3) {
-                            grid-row: span 2 / span 2;
-                            grid-column-start: 2;
-                            grid-row-start: 1;
-                            margin-top: 40%;
-                            left: -16px;
-                            position: relative;
-                        }
-                    }
-
-                    .metric-label {
-                        position: absolute;
-                        top: 0px;
-                        left: 0%;
-                        white-space: nowrap;
-
-                        transform: translate(-50%, -50%);
-
-                        font-size: 10px;
-                        z-index: 1;
-                    }
-
-                    .metric {
-                        width: 100%;
-                        height: 100%;
-                        position: relative;
-                        display: flex;
-                        justify-content: center;
-                        align-items: center;
-
-                        &::after {
-                            content: "";
-                            position: absolute;
-                            top: 0;
-                            left: 0;
-                            width: 100%;
-                            height: 100%;
-
-                            background: var(--background-color, wheat);
-                            clip-path: polygon(
-                                25% 0%,
-                                75% 0%,
-                                100% 50%,
-                                75% 100%,
-                                25% 100%,
-                                0% 50%
-                            );
-                            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
-
-                            z-index: 0;
-                        }
-
-                        // Content stays above the shape
-                        > * {
-                            position: relative;
-                            z-index: 1;
-                        }
-                    }
-                }
+            .metric-value {
+              padding-top: 6px;
+              font-size: var(--font-size-xlarge);
+              color: var(--background-color-accent);
+              font-weight: 600;
             }
+          }
 
-            .simulation-tag {
-                background: var(--background-color-button);
+          .label {
+            padding-bottom: 68px;
+          }
+        }
 
-                color: var(--icon-default-color-active);
+        .metrics-right {
+          height: fit-content;
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          grid-template-rows: repeat(2, 1fr);
+
+          gap: 2px;
+          overflow: visible;
+
+          margin: auto 0;
+
+          .metric-wrapper {
+            position: relative;
+            width: 64px;
+            height: 50px;
+            overflow: visible; // allow content like labels to overflow
+
+            &:nth-child(1) {
+              .metric-label {
+                top: -57%;
+                left: 220%;
+              }
+
+              &::after {
+                content: "";
                 position: absolute;
-                bottom: 0;
-                right: 0;
-                padding: 10px 5px;
-                border-radius: 12px 0 0 0;
+
+                top: -100%;
+                left: 50%;
+                width: 100%; // Required for visible shape
+                height: 40px;
+                background-color: #b7b7c6;
+
+                // Custom polygon shape (adjust if needed)
+                clip-path: polygon(
+                  96% 52%,
+                  96% 54%,
+                  45% 53%,
+                  3% 100%,
+                  0 100%,
+                  42% 52%
+                );
+
+                z-index: 0; // Behind any inner content
+              }
             }
+
+            // Optional: content above the shape
+            > * {
+              position: relative;
+              z-index: 1;
+            }
+
+            &:nth-child(2) {
+              grid-column-start: 1;
+              grid-row-start: 2;
+
+              .metric-label {
+                white-space: normal;
+                width: 50px;
+                left: 230%;
+              }
+            }
+
+            &:nth-child(3) {
+              grid-row: span 2 / span 2;
+              grid-column-start: 2;
+              grid-row-start: 1;
+              margin-top: 40%;
+              left: -16px;
+              position: relative;
+            }
+          }
+
+          .metric-label {
+            position: absolute;
+            top: 0px;
+            left: 0%;
+            white-space: nowrap;
+
+            transform: translate(-50%, -50%);
+
+            font-size: 10px;
+            z-index: 1;
+          }
+
+          .metric {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            &::after {
+              content: "";
+              position: absolute;
+              top: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+
+              background: var(--background-color, wheat);
+              clip-path: polygon(
+                25% 0%,
+                75% 0%,
+                100% 50%,
+                75% 100%,
+                25% 100%,
+                0% 50%
+              );
+              filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
+
+              z-index: 0;
+            }
+
+            // Content stays above the shape
+            > * {
+              position: relative;
+              z-index: 1;
+            }
+          }
         }
+      }
+
+      .simulation-tag {
+        background: var(--background-color-button);
+
+        color: var(--icon-default-color-active);
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        padding: 10px 5px;
+        border-radius: 12px 0 0 0;
+      }
     }
+  }
 }
 
 @keyframes slideInFromRight {
-    from {
-        transform: translateX(100%);
-        opacity: 0;
-    }
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
 
-    to {
-        transform: translateX(0);
-        opacity: 1;
-    }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
 }
 
 .energy-usage {
-    position: relative;
+  position: relative;
 
-    .energy-usage-wrapper {
-
-
-        .value {
-            padding-top: 25px;
-            font-size: var(--font-size-xxxlarge);
-            color: var(--background-color-accent);
-        }
+  .energy-usage-wrapper {
+    .value {
+      padding-top: 25px;
+      font-size: var(--font-size-xxxlarge);
+      color: var(--background-color-accent);
     }
+  }
 
-    .simulation-details {
-        position: absolute;
-        bottom: 12px;
-        right: 12px;
+  .simulation-details {
+    position: absolute;
+    bottom: 12px;
+    right: 12px;
 
-        .simulation-wrapper {
-            display: flex;
-            align-items: center;
-            gap: 6px;
+    .simulation-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 6px;
 
-            .icon {
-                width: 20px;
-                height: 20px;
-                border-radius: 50%;
-                background-color: var(--background-color-accent);
-            }
-        }
+      .icon {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background-color: var(--background-color-accent);
+      }
     }
+  }
 
-    .chart {
-        width: 90%;
-        position: absolute;
-        top: 10px;
-        left: 0;
-    }
+  .chart {
+    width: 90%;
+    position: absolute;
+    top: 10px;
+    left: 0;
+  }
 }
 
 .throughPutCard-container {
-    .layers-wrapper {
-        padding: 20px 10px;
-        height: 100%;
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        position: relative;
+  .layers-wrapper {
+    padding: 20px 10px;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
 
-        .layer-wrapper {
-            display: flex;
-            flex-direction: column;
+    .layer-wrapper {
+      display: flex;
+      flex-direction: column;
 
-            &:last-child {
-                justify-content: end;
-            }
-        }
-
-        .chart {
-            width: 60%;
-            height: 70%;
-            position: absolute;
-        }
+      &:last-child {
+        justify-content: end;
+      }
     }
 
     .chart {
-        width: 80%;
-        height: 90%;
-        position: absolute;
-        bottom: 0;
-        left: 0;
+      width: 60%;
+      height: 70%;
+      position: absolute;
     }
+  }
+
+  .chart {
+    width: 80%;
+    height: 90%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
 }
 
 .cycle-time-container {
-    position: relative;
+  position: relative;
 
-    .cycle-main {
+  .cycle-main {
+    display: flex;
+    justify-content: space-between;
+    height: 100%;
+
+    .layers-wrapper {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .layers {
         display: flex;
-        justify-content: space-between;
-        height: 100%;
+        flex-direction: column;
+        gap: 4px;
 
-        .layers-wrapper {
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-
-            .layers {
-                display: flex;
-                flex-direction: column;
-                gap: 4px;
-
-                .layer-name {
-                    color: var(--background-color-accent);
-                }
-
-                .layer-time {
-                    font-size: var(--font-size-large);
-                }
-
-                .layer-profit {
-                    color: #14ca44;
-                    text-align: end;
-
-                    span {
-                        color: #14ca44;
-                    }
-                }
-            }
+        .layer-name {
+          color: var(--background-color-accent);
         }
-    }
 
-    .chart {
-        position: absolute;
-        bottom: 0;
-        left: 10px;
-        width: 60%;
-        height: 80%;
+        .layer-time {
+          font-size: var(--font-size-large);
+        }
+
+        .layer-profit {
+          color: #14ca44;
+          text-align: end;
+
+          span {
+            color: #14ca44;
+          }
+        }
+      }
     }
+  }
+
+  .chart {
+    position: absolute;
+    bottom: 0;
+    left: 10px;
+    width: 60%;
+    height: 80%;
+  }
 }
 
 .overallDowntime-container {
-    .totalDownTime-wrapper {
+  .totalDownTime-wrapper {
+    display: flex;
+
+    .totalDownTime {
+      width: 70%;
+      background: var(--background-color-secondary);
+      backdrop-filter: blur(20px);
+      border-radius: 12px;
+
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      // gap: 20px;
+      padding: 8px 10px;
+      margin: 44px 0;
+
+      .totalDownTime-right {
         display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
 
-        .totalDownTime {
-            width: 70%;
-            background: var(--background-color-secondary);
-            backdrop-filter: blur(20px);
-            border-radius: 12px;
+      .totalDownTime-left {
+        display: flex;
+        align-items: center;
+        gap: 6px;
 
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            // gap: 20px;
-            padding: 8px 10px;
-            margin: 44px 0;
-
-            .totalDownTime-right {
-                display: flex;
-                flex-direction: column;
-                gap: 6px;
-            }
-
-            .totalDownTime-left {
-                display: flex;
-                align-items: center;
-                gap: 6px;
-
-                .value {
-                    font-size: var(--font-size-xlarge);
-                    color: var(--background-color-button);
-                }
-            }
-        }
-
-        .chart {
-            width: 30%;
-            position: relative;
+        .value {
+          font-size: var(--font-size-xlarge);
+          color: var(--background-color-button);
         }
+      }
     }
+
+    .chart {
+      width: 30%;
+      position: relative;
+    }
+  }
 }
 
 .overallScrapRate {
-    .overallScrapRate-wrapper {
-        display: flex;
+  .overallScrapRate-wrapper {
+    display: flex;
 
-        .overallScrapRate-value {
-            width: 50%;
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-            margin: 40px 0;
+    .overallScrapRate-value {
+      width: 50%;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      margin: 40px 0;
 
-            .overallScrapRate-key {
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-        }
-
-        .chart {
-            width: 50%;
-            position: relative;
-        }
+      .overallScrapRate-key {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
+
+    .chart {
+      width: 50%;
+      position: relative;
+    }
+  }
 }

From 971a4b64858760151c7a095a7e51106463000e47 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Fri, 13 Jun 2025 18:27:04 +0530
Subject: [PATCH 5/7] refactor: Remove console log from addProduct in
 ProductsDuplicate component

---
 .../layout/scenes/ComparisonScene.tsx         | 96 ++++++++++++-------
 .../duplicateProduct/duplicateProduct.tsx     |  1 -
 2 files changed, 62 insertions(+), 35 deletions(-)

diff --git a/app/src/components/layout/scenes/ComparisonScene.tsx b/app/src/components/layout/scenes/ComparisonScene.tsx
index ce8e455..54334fc 100644
--- a/app/src/components/layout/scenes/ComparisonScene.tsx
+++ b/app/src/components/layout/scenes/ComparisonScene.tsx
@@ -1,6 +1,5 @@
 import { useProductContext } from '../../../modules/simulation/products/productContext'
 import RegularDropDown from '../../ui/inputs/RegularDropDown';
-import { useProductStore } from '../../../store/simulation/useProductStore';
 import { useCompareProductDataStore, useLoadingProgress, useSaveVersion } from '../../../store/builder/store';
 import useModuleStore from '../../../store/useModuleStore';
 import CompareLayOut from '../../ui/compareVersion/CompareLayOut';
@@ -8,10 +7,11 @@ import ComparisonResult from '../../ui/compareVersion/ComparisonResult';
 import { useComparisonProduct, useMainProduct } from '../../../store/simulation/useSimulationStore';
 import { usePlayButtonStore } from '../../../store/usePlayButtonStore';
 import { useEffect, useState } from 'react';
+import { useDuplicateProductStore } from '../../../modules/duplicate/duplicateStores/duplicateProductStore';
 
 function ComparisonScene() {
-    const { isPlaying, setIsPlaying } = usePlayButtonStore();
-    const { products } = useProductStore();
+    const { isPlaying } = usePlayButtonStore();
+    const { products, getProductById } = useDuplicateProductStore();
     const { isVersionSaved } = useSaveVersion();
     const { activeModule } = useModuleStore();
     const { selectedProductStore } = useProductContext();
@@ -28,41 +28,69 @@ function ComparisonScene() {
             setComparisonProduct(product.productUuid, product.productName);
         }
     };
-    // useEffect(() => {
-    //     setCompareProductsData([
-    //         {
-    //             "productUuid": "15193386-ec58-4ec6-8a92-e665a39eebf1",
-    //             "productName": "Product 1",
-    //             "simulationData": {
-    //                 "roiPercentage": 273.9428571428571,
-    //                 "paybackPeriod": 1.8251981643721318,
-    //                 "netProfit": 9588000,
-    //                 "productionCapacity": 4508.5,
-    //                 "machineIdleTime": 1450,
-    //                 "machineActiveTime": 430,
-    //                 "throughputData": 180.34
-    //             }
-    //         },
-    //         {
-    //             "productUuid": "f614bf50-f61d-41c5-acc0-3783fb4da6b8",
-    //             "productName": "Product 2",
-    //             "simulationData": {
-    //                 "roiPercentage": 281.7214285714286,
-    //                 "paybackPeriod": 1.7748028701097842,
-    //                 "netProfit": 9860250,
-    //                 "productionCapacity": 4599.25,
-    //                 "machineIdleTime": 1885,
-    //                 "machineActiveTime": 646,
-    //                 "throughputData": 183.97
-    //             }
-    //         }
-    //     ])
-    // }, []); // ✅ Runs only once on mount
+    useEffect(() => {
+        if (compareProductsData.length === 2) return;
 
+        // const productData = getProductById(selectedProduct.productUuid);
+
+        // const newData = {
+        //     "productUuid": "15193386-ec58-4ec6-8a92-e665a39eebf2",
+        //     "productName": "Product 2",
+        //     "simulationData": {
+        //         "roiPercentage": 281.7214285714286,
+        //         "paybackPeriod": 1.7748028701097842,
+        //         "netProfit": 9860250,
+        //         "productionCapacity": 4599.25,
+        //         "machineIdleTime": 1885,
+        //         "machineActiveTime": 646,
+        //         "throughputData": 183.97
+        //     }
+        // }
+
+        // const existingIndex = compareProductsData.findIndex((item) =>
+        //     item.productUuid === productData?.productUuid
+        // );
+
+        // if (existingIndex !== -1) {
+        //     const updated = [...compareProductsData];
+        //     updated[existingIndex] = newData;
+        //     setCompareProductsData(updated);
+        // } else {
+        //     setCompareProductsData([...compareProductsData, newData]);
+        // }
+
+        setCompareProductsData([
+            {
+                "productUuid": "15193386-ec58-4ec6-8a92-e665a39eebf1",
+                "productName": "Product 1",
+                "simulationData": {
+                    "roiPercentage": 273.9428571428571,
+                    "paybackPeriod": 1.8251981643721318,
+                    "netProfit": 9588000,
+                    "productionCapacity": 4508.5,
+                    "machineIdleTime": 1450,
+                    "machineActiveTime": 430,
+                    "throughputData": 180.34
+                }
+            },
+            {
+                "productUuid": "15193386-ec58-4ec6-8a92-e665a39eebf2",
+                "productName": "Product 2",
+                "simulationData": {
+                    "roiPercentage": 281.7214285714286,
+                    "paybackPeriod": 1.7748028701097842,
+                    "netProfit": 9860250,
+                    "productionCapacity": 4599.25,
+                    "machineIdleTime": 1885,
+                    "machineActiveTime": 646,
+                    "throughputData": 183.97
+                }
+            }
+        ])
+    }, [compareProductsData]); // ✅ Runs only once on mount
 
     useEffect(() => {
         if (mainProduct && comparisonProduct && compareProductsData.length > 1) {
-            // console.log('compareProductsData: ', compareProductsData);
             const hasMain = compareProductsData.some(val => val.productUuid === mainProduct.productUuid);
             const hasComparison = compareProductsData.some(val => val.productUuid === comparisonProduct.productUuid);
             if (hasMain && hasComparison && mainProduct.productUuid !== comparisonProduct.productUuid) {
diff --git a/app/src/modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct.tsx b/app/src/modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct.tsx
index 92126c5..f75a410 100644
--- a/app/src/modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct.tsx
+++ b/app/src/modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct.tsx
@@ -35,7 +35,6 @@ function ProductsDuplicate({ projectId }: { projectId: string }) {
                 const id = THREE.MathUtils.generateUUID();
                 const name = 'Product 1';
                 addProduct(name, id);
-                console.log(name, id, projectId);
                 upsertProductOrEventApi({
                     productName: name,
                     productUuid: id,

From 11aea042fdd8f40f2a4d4dac54af8dce57ee7e5a Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Fri, 13 Jun 2025 19:18:32 +0530
Subject: [PATCH 6/7] feat: Integrate ProductsDuplicate component into
 ComparisonScene and update Project to use SceneProvider

---
 .../layout/scenes/ComparisonScene.tsx         |  3 ++
 .../ui/compareVersion/CompareLayOut.tsx       |  4 +-
 .../duplicateProduct/duplicateProduct.tsx     | 24 ++-------
 .../duplicateSimulation.tsx                   |  4 +-
 app/src/modules/duplicate/sceneDuplicate.tsx  | 51 +++++++++----------
 app/src/pages/Project.tsx                     |  5 +-
 6 files changed, 37 insertions(+), 54 deletions(-)

diff --git a/app/src/components/layout/scenes/ComparisonScene.tsx b/app/src/components/layout/scenes/ComparisonScene.tsx
index 54334fc..f803dee 100644
--- a/app/src/components/layout/scenes/ComparisonScene.tsx
+++ b/app/src/components/layout/scenes/ComparisonScene.tsx
@@ -8,6 +8,7 @@ import { useComparisonProduct, useMainProduct } from '../../../store/simulation/
 import { usePlayButtonStore } from '../../../store/usePlayButtonStore';
 import { useEffect, useState } from 'react';
 import { useDuplicateProductStore } from '../../../modules/duplicate/duplicateStores/duplicateProductStore';
+import ProductsDuplicate from '../../../modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct';
 
 function ComparisonScene() {
     const { isPlaying } = usePlayButtonStore();
@@ -119,6 +120,8 @@ function ComparisonScene() {
                     }
                     <CompareLayOut />
 
+                    <ProductsDuplicate projectId={"684bcd620a64bc2a815a88d6"} />
+
                     {(shouldShowComparisonResult && !loadingProgress) && <ComparisonResult />}
                 </>
             )}
diff --git a/app/src/components/ui/compareVersion/CompareLayOut.tsx b/app/src/components/ui/compareVersion/CompareLayOut.tsx
index 1a5f14c..2eb81a7 100644
--- a/app/src/components/ui/compareVersion/CompareLayOut.tsx
+++ b/app/src/components/ui/compareVersion/CompareLayOut.tsx
@@ -10,15 +10,15 @@ import {
 } from "../../../store/builder/store";
 import Search from "../inputs/Search";
 import OuterClick from "../../../utils/outerClick";
-import { useProductStore } from "../../../store/simulation/useProductStore";
 import Scene from "../../../modules/scene/scene";
 import { useComparisonProduct } from "../../../store/simulation/useSimulationStore";
 import { usePauseButtonStore, usePlayButtonStore } from "../../../store/usePlayButtonStore";
 import DuplicateScene from "../../../modules/duplicate/sceneDuplicate";
+import { useDuplicateProductStore } from "../../../modules/duplicate/duplicateStores/duplicateProductStore";
 
 const CompareLayOut = () => {
   const { comparisonProduct, setComparisonProduct, clearComparisonProduct } = useComparisonProduct();
-  const { products } = useProductStore();
+  const { products } = useDuplicateProductStore();
   const { setLoadingProgress } = useLoadingProgress();
   const [width, setWidth] = useState("50vw");
   const [isResizing, setIsResizing] = useState(false);
diff --git a/app/src/modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct.tsx b/app/src/modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct.tsx
index f75a410..4c1a69d 100644
--- a/app/src/modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct.tsx
+++ b/app/src/modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct.tsx
@@ -5,14 +5,13 @@ import { getAllProductsApi } from '../../../../services/simulation/products/geta
 import { usePlayButtonStore, useResetButtonStore } from '../../../../store/usePlayButtonStore';
 import { useSceneContext } from '../../../scene/sceneContext';
 import { useProductContext } from '../../../simulation/products/productContext';
-import { useComparisonProduct, useMainProduct } from '../../../../store/simulation/useSimulationStore';
+import { useComparisonProduct } from '../../../../store/simulation/useSimulationStore';
 import { useDuplicateProductStore } from '../../duplicateStores/duplicateProductStore';
 
 function ProductsDuplicate({ projectId }: { projectId: string }) {
     const { armBotStore, machineStore, conveyorStore, vehicleStore, storageUnitStore, layout } = useSceneContext();
-    const { products, getProductById, addProduct, setProducts } = useDuplicateProductStore();
+    const { products, getProductById, setProducts } = useDuplicateProductStore();
     const { selectedProductStore } = useProductContext();
-    const { setMainProduct } = useMainProduct();
     const { selectedProduct, setSelectedProduct } = selectedProductStore();
     const { addVehicle, clearvehicles } = vehicleStore();
     const { addArmBot, clearArmBots } = armBotStore();
@@ -31,25 +30,8 @@ function ProductsDuplicate({ projectId }: { projectId: string }) {
 
     useEffect(() => {
         getAllProductsApi(projectId || '').then((data) => {
-            if (data.length === 0) {
-                const id = THREE.MathUtils.generateUUID();
-                const name = 'Product 1';
-                addProduct(name, id);
-                upsertProductOrEventApi({
-                    productName: name,
-                    productUuid: id,
-                    projectId: projectId || ''
-                })
-                if (layout === 'Main Layout') {
-                    setSelectedProduct(id, name);
-                    setMainProduct(id, name);
-                }
-            } else {
+            if (data.length > 0)  {
                 setProducts(data);
-                if (layout === 'Main Layout') {
-                    setSelectedProduct(data[0].productUuid, data[0].productName);
-                    setMainProduct(data[0].productUuid, data[0].productName);
-                }
             }
         })
     }, [])
diff --git a/app/src/modules/duplicate/duplicateSimulation/duplicateSimulation.tsx b/app/src/modules/duplicate/duplicateSimulation/duplicateSimulation.tsx
index ced7d2f..71aa629 100644
--- a/app/src/modules/duplicate/duplicateSimulation/duplicateSimulation.tsx
+++ b/app/src/modules/duplicate/duplicateSimulation/duplicateSimulation.tsx
@@ -3,12 +3,10 @@ import ProductsDuplicate from './duplicateProduct/duplicateProduct'
 import PointsDuplicate from './duplicatePoint/duplicatePoint'
 import TriggerDuplicate from './duplicateTrigger/duplicateTrigger'
 
-function SimulationDuplicate({ projectId }: { projectId: string }) {
+function SimulationDuplicate() {
     return (
         <>
 
-            <ProductsDuplicate projectId={projectId} />
-
             <PointsDuplicate />
 
             <TriggerDuplicate />
diff --git a/app/src/modules/duplicate/sceneDuplicate.tsx b/app/src/modules/duplicate/sceneDuplicate.tsx
index 248d044..3c501a5 100644
--- a/app/src/modules/duplicate/sceneDuplicate.tsx
+++ b/app/src/modules/duplicate/sceneDuplicate.tsx
@@ -9,45 +9,42 @@ import background from "../../assets/textures/hdr/mudroadpuresky2k.hdr";
 import ControlsDuplicate from "./duplicateSetup/controlsDuplicate";
 import PostProcessingDuplicate from "./duplicateSetup/postProcessingDuplicate";
 import { Color } from "three";
-import { SceneProvider } from "../scene/sceneContext";
 import SimulationDuplicate from "./duplicateSimulation/duplicateSimulation";
 
 export default function DuplicateScene() {
     const projectId = "684bcd620a64bc2a815a88d6";
 
     return (
-        <SceneProvider layout='Comparison Layout'>
-            <Canvas
-                id="sceneCanvas"
-                shadows
-                color="#aaaa"
-                eventPrefix="client"
-                style={{
-                    pointerEvents: 'none'
-                }}
-                onContextMenu={(e) => {
-                    e.preventDefault();
-                }}
-                onCreated={(e) => {
-                    e.scene.background = new Color(0x19191d);
-                }}
-                gl={{ powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }}
-            >
+        <Canvas
+            id="sceneCanvas"
+            shadows
+            color="#aaaa"
+            eventPrefix="client"
+            style={{
+                pointerEvents: 'none'
+            }}
+            onContextMenu={(e) => {
+                e.preventDefault();
+            }}
+            onCreated={(e) => {
+                e.scene.background = new Color(0x19191d);
+            }}
+            gl={{ powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }}
+        >
 
-                <Sun />
+            <Sun />
 
-                <Shadows />
+            <Shadows />
 
-                <ControlsDuplicate />
+            <ControlsDuplicate />
 
-                <PostProcessingDuplicate />
+            <PostProcessingDuplicate />
 
-                <Environment files={background} environmentIntensity={1.5} />
+            <Environment files={background} environmentIntensity={1.5} />
 
-                <BuilderDuplicate projectId={projectId} />
+            <BuilderDuplicate projectId={projectId} />
 
-                <SimulationDuplicate projectId={projectId} />
-            </Canvas>
-        </SceneProvider>
+            <SimulationDuplicate />
+        </Canvas>
     );
 }
\ No newline at end of file
diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx
index cc984af..a1cc636 100644
--- a/app/src/pages/Project.tsx
+++ b/app/src/pages/Project.tsx
@@ -34,6 +34,7 @@ import { setFloorItemApi } from "../services/factoryBuilder/assest/floorAsset/se
 import { useAssetsStore } from "../store/builder/useAssetStore";
 import ComparisonSceneProvider from "../components/layout/scenes/ComparisonSceneProvider";
 import MainSceneProvider from "../components/layout/scenes/MainSceneProvider";
+import { SceneProvider } from "../modules/scene/sceneContext";
 
 const Project: React.FC = () => {
   let navigate = useNavigate();
@@ -127,7 +128,9 @@ const Project: React.FC = () => {
 
   return (
     <div className="project-main">
-      <ComparisonSceneProvider />
+      <SceneProvider layout='Comparison Layout'>
+        <ComparisonSceneProvider />
+      </SceneProvider>
       <MainSceneProvider />
       {selectedUser && <FollowPerson />}
       {isLogListVisible && (

From 52301808adeca35870d31c173df296ab59725138 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Fri, 13 Jun 2025 19:24:28 +0530
Subject: [PATCH 7/7] fix: update arrow colors in TriggerDuplicate and
 TriggerConnector components

---
 .../duplicateTrigger/duplicateTrigger.tsx                   | 4 ++--
 app/src/modules/simulation/events/arrows/arrows.tsx         | 6 +++---
 .../events/triggerConnections/triggerConnector.tsx          | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/src/modules/duplicate/duplicateSimulation/duplicateTrigger/duplicateTrigger.tsx b/app/src/modules/duplicate/duplicateSimulation/duplicateTrigger/duplicateTrigger.tsx
index d9e70e4..a6cd8fd 100644
--- a/app/src/modules/duplicate/duplicateSimulation/duplicateTrigger/duplicateTrigger.tsx
+++ b/app/src/modules/duplicate/duplicateSimulation/duplicateTrigger/duplicateTrigger.tsx
@@ -147,7 +147,7 @@ function TriggerDuplicate() {
                         start={startPoint.toArray()}
                         end={endPoint.toArray()}
                         mid={midPoint.toArray()}
-                        color={"#42a5f5"}
+                        color={"#c4abf1"}
                         lineWidth={4}
                         dashed={true}
                         dashSize={0.75}
@@ -157,7 +157,7 @@ function TriggerDuplicate() {
                 );
             })}
 
-            <Arrows connections={connections} />
+            <Arrows connections={connections} color={'#c4abf1'} />
         </group>
     );
 }
diff --git a/app/src/modules/simulation/events/arrows/arrows.tsx b/app/src/modules/simulation/events/arrows/arrows.tsx
index 59e56e2..eca413f 100644
--- a/app/src/modules/simulation/events/arrows/arrows.tsx
+++ b/app/src/modules/simulation/events/arrows/arrows.tsx
@@ -10,7 +10,7 @@ interface ConnectionLine {
     trigger: TriggerSchema;
 }
 
-export function Arrows({ connections }: { readonly connections: ConnectionLine[] }) {
+export function Arrows({ connections, color = "#42a5f5" }: { readonly connections: ConnectionLine[], color?: string }) {
     const [hoveredLineKey, setHoveredLineKey] = useState<string | null>(null);
     const groupRef = useRef<THREE.Group>(null);
     const { scene } = useThree();
@@ -61,7 +61,7 @@ export function Arrows({ connections }: { readonly connections: ConnectionLine[]
                     onPointerOut={() => setHoveredLineKey(null)}
                 >
                     <meshStandardMaterial
-                        color={toolMode === '2D-Delete' && hoveredLineKey === key ? "red" : "#42a5f5"}
+                        color={toolMode === '2D-Delete' && hoveredLineKey === key ? "red" : color}
                     />
                 </mesh>
                 <mesh
@@ -72,7 +72,7 @@ export function Arrows({ connections }: { readonly connections: ConnectionLine[]
                     onPointerOut={() => setHoveredLineKey(null)}
                 >
                     <meshStandardMaterial
-                        color={toolMode === '2D-Delete' && hoveredLineKey === key ? "red" : "#42a5f5"}
+                        color={toolMode === '2D-Delete' && hoveredLineKey === key ? "red" : color}
                     />
                 </mesh>
             </group>
diff --git a/app/src/modules/simulation/events/triggerConnections/triggerConnector.tsx b/app/src/modules/simulation/events/triggerConnections/triggerConnector.tsx
index c63612a..80e5ae9 100644
--- a/app/src/modules/simulation/events/triggerConnections/triggerConnector.tsx
+++ b/app/src/modules/simulation/events/triggerConnections/triggerConnector.tsx
@@ -477,7 +477,7 @@ function TriggerConnector() {
                         start={startPoint.toArray()}
                         end={endPoint.toArray()}
                         mid={midPoint.toArray()}
-                        color={toolMode === '3D-Delete' && hoveredLineKey === connection.id ? "red" : "#42a5f5"}
+                        color={toolMode === '3D-Delete' && hoveredLineKey === connection.id ? "red" : "#6f42c1"}
                         lineWidth={4}
                         dashed={toolMode === '3D-Delete' && hoveredLineKey === connection.id ? false : true}
                         dashSize={0.75}
@@ -496,7 +496,7 @@ function TriggerConnector() {
                 );
             })}
 
-            <Arrows connections={connections} />
+            <Arrows connections={connections} color="#6f42c1"/>
 
             {currentLine && (
                 <>