app/src/components/layout/scenes/ComparisonScene.tsx

@@ -1,21 +1,14 @@
-import { useProductContext } from "../../../modules/simulation/products/productContext";
+import { useProductContext } from '../../../modules/simulation/products/productContext'
-import RegularDropDown from "../../ui/inputs/RegularDropDown";
+import RegularDropDown from '../../ui/inputs/RegularDropDown';
-import {
+import { useCompareProductDataStore, useLoadingProgress, useSaveVersion } from '../../../store/builder/store';
-  useCompareProductDataStore,
+import useModuleStore from '../../../store/useModuleStore';
-  useLoadingProgress,
+import CompareLayOut from '../../ui/compareVersion/CompareLayOut';
-  useSaveVersion,
+import ComparisonResult from '../../ui/compareVersion/ComparisonResult';
-} from "../../../store/builder/store";
+import { useComparisonProduct, useMainProduct } from '../../../store/simulation/useSimulationStore';
-import useModuleStore from "../../../store/useModuleStore";
+import { usePlayButtonStore } from '../../../store/usePlayButtonStore';
-import CompareLayOut from "../../ui/compareVersion/CompareLayOut";
+import { useEffect, useState } from 'react';
-import ComparisonResult from "../../ui/compareVersion/ComparisonResult";
+import { useDuplicateProductStore } from '../../../modules/duplicate/duplicateStores/duplicateProductStore';
-import {
+import ProductsDuplicate from '../../../modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct';
-  useComparisonProduct,
-  useMainProduct,
-} from "../../../store/simulation/useSimulationStore";
-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();
@@ -27,10 +20,8 @@ function ComparisonScene() {
     const { comparisonProduct, setComparisonProduct } = useComparisonProduct();
     const { mainProduct } = useMainProduct();
     const { loadingProgress } = useLoadingProgress();
-  const { compareProductsData, setCompareProductsData } =
+    const { compareProductsData, setCompareProductsData } = useCompareProductDataStore();
-    useCompareProductDataStore();
+    const [shouldShowComparisonResult, setShouldShowComparisonResult] = useState(false);
-  const [shouldShowComparisonResult, setShouldShowComparisonResult] =
-    useState(false);
 
     const handleSelectLayout = (option: string) => {
         const product = products.find((product) => product.productName === option);
@@ -71,47 +62,39 @@ function ComparisonScene() {
 
         setCompareProductsData([
             {
-        productUuid: "70a4d942-f201-4364-bc19-de98ed41500a",
+                "productUuid": "15193386-ec58-4ec6-8a92-e665a39eebf1",
-        productName: "Product 1",
+                "productName": "Product 1",
-        simulationData: {
+                "simulationData": {
-          roiPercentage: 273.9428571428571,
+                    "roiPercentage": 273.9428571428571,
-          paybackPeriod: 1.8251981643721318,
+                    "paybackPeriod": 1.8251981643721318,
-          netProfit: 9588000,
+                    "netProfit": 9588000,
-          productionCapacity: 4508.5,
+                    "productionCapacity": 4508.5,
-          machineIdleTime: 1450,
+                    "machineIdleTime": 1450,
-          machineActiveTime: 430,
+                    "machineActiveTime": 430,
-          throughputData: 180.34,
+                    "throughputData": 180.34
-        },
+                }
             },
             {
-        productUuid: "70a4d942-f201-4364-bc19-de98ed41500b",
+                "productUuid": "15193386-ec58-4ec6-8a92-e665a39eebf2",
-        productName: "Product 2",
+                "productName": "Product 2",
-        simulationData: {
+                "simulationData": {
-          roiPercentage: 281.7214285714286,
+                    "roiPercentage": 281.7214285714286,
-          paybackPeriod: 1.7748028701097842,
+                    "paybackPeriod": 1.7748028701097842,
-          netProfit: 9860250,
+                    "netProfit": 9860250,
-          productionCapacity: 4599.25,
+                    "productionCapacity": 4599.25,
-          machineIdleTime: 1885,
+                    "machineIdleTime": 1885,
-          machineActiveTime: 646,
+                    "machineActiveTime": 646,
-          throughputData: 183.97,
+                    "throughputData": 183.97
-        },
+                }
-      },
+            }
-    ]);
+        ])
     }, [compareProductsData]); // ✅ Runs only once on mount
 
     useEffect(() => {
         if (mainProduct && comparisonProduct && compareProductsData.length > 1) {
-      const hasMain = compareProductsData.some(
+            const hasMain = compareProductsData.some(val => val.productUuid === mainProduct.productUuid);
-        (val) => val.productUuid === mainProduct.productUuid
+            const hasComparison = compareProductsData.some(val => val.productUuid === comparisonProduct.productUuid);
-      );
+            if (hasMain && hasComparison && mainProduct.productUuid !== comparisonProduct.productUuid) {
-      const hasComparison = compareProductsData.some(
-        (val) => val.productUuid === comparisonProduct.productUuid
-      );
-      if (
-        hasMain &&
-        hasComparison &&
-        mainProduct.productUuid !== comparisonProduct.productUuid
-      ) {
                 setShouldShowComparisonResult(true);
             } else {
                 setShouldShowComparisonResult(false);
@@ -125,7 +108,7 @@ function ComparisonScene() {
         <>
             {isVersionSaved && activeModule === "simulation" && selectedProduct && (
                 <>
-          {comparisonProduct && !isPlaying && (
+                    {comparisonProduct && !isPlaying &&
                         <div className="initial-selectLayout-wrapper">
                             <RegularDropDown
                                 header={selectedProduct.productName}
@@ -134,18 +117,16 @@ function ComparisonScene() {
                                 search={false}
                             />
                         </div>
-          )}
+                    }
                     <CompareLayOut />
 
-          <ProductsDuplicate projectId={"6842c683d4c6ce57664da93b"} />
+                    <ProductsDuplicate projectId={"684bcd620a64bc2a815a88d6"} />
 
-          {shouldShowComparisonResult && !loadingProgress && (
+                    {(shouldShowComparisonResult && !loadingProgress) && <ComparisonResult />}
-            <ComparisonResult />
-          )}
                 </>
             )}
         </>
-  );
+    )
 }
 
 export default ComparisonScene;

app/src/components/layout/scenes/MainScene.tsx

@@ -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" : "",

app/src/components/ui/compareVersion/ComparisonResult.tsx

@@ -53,8 +53,8 @@ const ComparisonResult = () => {
   );
 
   // Color palette
-  const purpleDark = "#3466F1";
+  const purpleDark = "#6a0dad";
-  const purpleLight = "#FFC527";
+  const purpleLight = "#b19cd9";
 
   const throughputData = {
     labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName],
@@ -71,6 +71,7 @@ const ComparisonResult = () => {
     ],
   };
 
+
   const cycleTimePieData = {
     labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName],
     datasets: [

app/src/components/ui/compareVersion/result-card/EnergyUsage.tsx

@@ -22,7 +22,7 @@ ChartJS.register(
 const EnergyUsage = ({comparedProducts}:any) => {
   const data = useMemo(() => {
     const randomizeData = () =>
-      Array.from({ length: 7 }, () => Math.floor(Math.random() * 10));
+      Array.from({ length: 5 }, () => Math.floor(Math.random() * (2000 - 300 + 1)) + 300);
 
     return {
       labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
@@ -30,7 +30,7 @@ const EnergyUsage = ({comparedProducts}:any) => {
         {
           label: "Simulation 1",
           data: randomizeData(),
-          borderColor: "#3466F1",
+          borderColor: "#6a0dad",
           fill: false,
           tension: 0.5, // More curved line
           pointRadius: 0, // Remove point indicators
@@ -38,7 +38,7 @@ const EnergyUsage = ({comparedProducts}:any) => {
         {
           label: "Simulation 2",
           data: randomizeData(),
-          borderColor: "#FFC527",
+          borderColor: "#b19cd9",
           fill: false,
           tension: 0.5,
           pointRadius: 0,

app/src/modules/duplicate/duplicateSetup/postProcessingDuplicate.tsx

@@ -5,7 +5,7 @@ export default function PostProcessingDuplicate() {
     return (
         <EffectComposer autoClear={false}>
             <N8AO
-                color="#323232"
+                color="black"
                 aoRadius={20}
                 intensity={7}
                 distanceFalloff={4}

app/src/modules/duplicate/duplicateSimulation/duplicatePoint/duplicatePoint.tsx

@@ -1,10 +1,10 @@
 import * as THREE from "three";
+import { useEventsStore } from "../../../../store/simulation/useEventsStore";
 import useModuleStore from "../../../../store/useModuleStore";
 import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
-import { useDuplicateEventsStore } from "../../duplicateStores/duplicateEventStore";
 
 function PointsDuplicate() {
-  const { events } = useDuplicateEventsStore();
+    const { events } = useEventsStore();
     const { activeModule } = useModuleStore();
     const { isPlaying } = usePlayButtonStore();
 

app/src/modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct.tsx

@@ -1,5 +1,6 @@
 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';

app/src/modules/duplicate/duplicateSimulation/duplicateSimulation.tsx

@@ -1,13 +1,18 @@
-import PointsDuplicate from "./duplicatePoint/duplicatePoint";
+import React from 'react'
-import TriggerDuplicate from "./duplicateTrigger/duplicateTrigger";
+import ProductsDuplicate from './duplicateProduct/duplicateProduct'
+import PointsDuplicate from './duplicatePoint/duplicatePoint'
+import TriggerDuplicate from './duplicateTrigger/duplicateTrigger'
 
 function SimulationDuplicate() {
     return (
         <>
+
             <PointsDuplicate />
+
             <TriggerDuplicate />
+
         </>
-  );
+    )
 }
 
-export default SimulationDuplicate;
+export default SimulationDuplicate

app/src/modules/duplicate/duplicateSimulation/duplicateTrigger/duplicateTrigger.tsx

@@ -147,7 +147,7 @@ function TriggerDuplicate() {
                         start={startPoint.toArray()}
                         end={endPoint.toArray()}
                         mid={midPoint.toArray()}
-                        color={"#FFC527"}
+                        color={"#c4abf1"}
                         lineWidth={4}
                         dashed={true}
                         dashSize={0.75}
@@ -157,7 +157,7 @@ function TriggerDuplicate() {
                 );
             })}
 
-            <Arrows connections={connections} color={'#FFC527'} />
+            <Arrows connections={connections} color={'#c4abf1'} />
         </group>
     );
 }

app/src/modules/duplicate/sceneDuplicate.tsx

@@ -12,7 +12,7 @@ import { Color } from "three";
 import SimulationDuplicate from "./duplicateSimulation/duplicateSimulation";
 
 export default function DuplicateScene() {
-  const projectId = "6842c683d4c6ce57664da93b";
+    const projectId = "684bcd620a64bc2a815a88d6";
 
     return (
         <Canvas
@@ -21,7 +21,7 @@ export default function DuplicateScene() {
             color="#aaaa"
             eventPrefix="client"
             style={{
-        pointerEvents: "none",
+                pointerEvents: 'none'
             }}
             onContextMenu={(e) => {
                 e.preventDefault();
@@ -29,12 +29,9 @@ export default function DuplicateScene() {
             onCreated={(e) => {
                 e.scene.background = new Color(0x19191d);
             }}
-      gl={{
+            gl={{ powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }}
-        powerPreference: "high-performance",
-        antialias: true,
-        preserveDrawingBuffer: true,
-      }}
         >
+
             <Sun />
 
             <Shadows />

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

@@ -150,7 +150,7 @@ export function ArrowOnQuadraticBezier({
     start,
     mid,
     end,
-    color = "#3466F1",
+    color = "#42a5f5",
 }: {
     start: number[];
     mid: number[];

app/src/modules/simulation/events/triggerConnections/triggerConnector.tsx

@@ -421,7 +421,7 @@ function TriggerConnector() {
                     end: endPoint,
                 });
 
-                setHelperLineColor(sphereIntersects.length > 0 ? "#3466F1" : "red");
+                setHelperLineColor(sphereIntersects.length > 0 ? "#6cf542" : "red");
             } else {
                 setCurrentLine(null);
             }
@@ -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} color="#42a5f5"/>
+            <Arrows connections={connections} color="#6f42c1"/>
 
             {currentLine && (
                 <>

app/src/styles/layout/compareLayout.scss

@@ -8,12 +8,7 @@
   z-index: 10;
 
   .regularDropdown-container {
-    background: #FFC527;
+    background: var(--background-color);
-    .key,
-    .icon {
-      color: #323232;
-      font-weight: 600;
-    }
   }
 }
 
@@ -24,11 +19,7 @@
   z-index: 10;
 
   .regularDropdown-container {
-    background: #3466f1;
+    background: var(--background-color);
-    .key,
-    .icon {
-      color: #fff;
-    }
   }
 }
 
@@ -64,8 +55,8 @@
     cursor: ew-resize;
     transition: transform 0.1s ease;
     z-index: 100;
-    pointer-events: all;
+    // pointer-events: all;
-    // opacity: 0;
+    opacity: 0;
   }
 
   .chooseLayout-container {
@@ -80,7 +71,7 @@
     .compare-layout-canvas-container {
       position: absolute;
       height: 100vh;
-      width: 100vw;
+      width: 50vw;
       top: 0;
       right: 0;
     }
@@ -274,7 +265,7 @@
             .metric-value {
               padding-top: 6px;
               font-size: var(--font-size-xlarge);
-              color: #14ca44;
+              color: var(--background-color-accent);
               font-weight: 600;
             }
           }
@@ -410,9 +401,9 @@
       }
 
       .simulation-tag {
-        background: #FFC527;
+        background: var(--background-color-button);
-        color: #323232;
+
-        font-weight: 600;
+        color: var(--icon-default-color-active);
         position: absolute;
         bottom: 0;
         right: 0;
@@ -440,7 +431,7 @@
 
   .energy-usage-wrapper {
     .value {
-      padding-top: 100px;
+      padding-top: 25px;
       font-size: var(--font-size-xxxlarge);
       color: var(--background-color-accent);
     }
@@ -448,7 +439,7 @@
 
   .simulation-details {
     position: absolute;
-    top: 12px;
+    bottom: 12px;
     right: 12px;
 
     .simulation-wrapper {
@@ -456,16 +447,6 @@
       align-items: center;
       gap: 6px;
 
-      &.sim-1 {
-        .icon {
-          background-color: #3466f1;
-        }
-      }
-      &.sim-2 {
-        .icon {
-          background-color: #FFC527;
-        }
-      }
       .icon {
         width: 20px;
         height: 20px;
@@ -476,10 +457,9 @@
   }
 
   .chart {
-    height: 80px;
     width: 90%;
     position: absolute;
-    top: 40px;
+    top: 10px;
     left: 0;
   }
 }
@@ -496,16 +476,9 @@
     .layer-wrapper {
       display: flex;
       flex-direction: column;
-      &:first-child {
+
-        .key {
+      &:last-child {
-          color: #3466f1;
+        justify-content: end;
-        }
-      }
-      &:nth-child(2) {
-        // justify-content: end;
-        .key {
-          color: #FFC527;
-        }
       }
     }
 
@@ -543,16 +516,6 @@
         display: flex;
         flex-direction: column;
         gap: 4px;
-        &:first-child {
-          .layer-name {
-            color: #3466f1;
-          }
-        }
-        &:last-child {
-          .layer-name {
-            color: #FFC527;
-          }
-        }
 
         .layer-name {
           color: var(--background-color-accent);