Merge branch 'main' into simulation

app/package-lock.json

@@ -29,6 +29,7 @@
         "chartjs-plugin-annotation": "^3.1.0",
         "glob": "^11.0.0",
         "gsap": "^3.12.5",
+        "html2canvas": "^1.4.1",
         "leva": "^0.10.0",
         "mqtt": "^5.10.4",
         "postprocessing": "^6.36.4",
@@ -2019,7 +2020,7 @@
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
       "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "0.3.9"
       },
@@ -2031,7 +2032,7 @@
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
       "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -4134,26 +4135,6 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
-    "node_modules/@testing-library/dom": {
-      "version": "10.4.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
-      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^5.0.1",
-        "aria-query": "5.3.0",
-        "chalk": "^4.1.0",
-        "dom-accessibility-api": "^0.5.9",
-        "lz-string": "^1.5.0",
-        "pretty-format": "^27.0.2"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@@ -4265,25 +4246,25 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
       "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@tsconfig/node12": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
       "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@tsconfig/node14": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
       "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@tsconfig/node16": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
       "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@turf/along": {
       "version": "7.2.0",
@@ -8047,6 +8028,15 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -9017,7 +9007,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/cross-env": {
       "version": "7.0.3",
@@ -9102,6 +9092,15 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-loader": {
       "version": "6.11.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.11.0.tgz",
@@ -9885,7 +9884,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
       "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=0.3.1"
       }
@@ -12489,6 +12488,19 @@
         }
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -15235,7 +15247,7 @@
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/makeerror": {
       "version": "1.0.12",
@@ -20434,6 +20446,15 @@
         "node": "*"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -20694,7 +20715,7 @@
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -20737,7 +20758,7 @@
       "version": "8.3.4",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
       "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "acorn": "^8.11.0"
       },
@@ -20749,7 +20770,7 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
       "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
@@ -21220,6 +21241,15 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
@@ -21236,7 +21266,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
       "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/v8-to-istanbul": {
       "version": "8.1.1",
@@ -22295,7 +22325,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=6"
       }

app/package.json

@@ -24,6 +24,7 @@
     "chartjs-plugin-annotation": "^3.1.0",
     "glob": "^11.0.0",
     "gsap": "^3.12.5",
+    "html2canvas": "^1.4.1",
     "leva": "^0.10.0",
     "mqtt": "^5.10.4",
     "postprocessing": "^6.36.4",

app/src/components/icons/RealTimeVisulationIcons.tsx

@@ -8,37 +8,45 @@ export function CleanPannel() {
       xmlns="http://www.w3.org/2000/svg"
     >
       <g clipPath="url(#clip0_1782_1158)">
-        <path d="M12 0H0V12H12V0Z" fill="white" fillOpacity="0.01" />
+        <path
+          d="M12 0H0V12H12V0Z"
+          fill="var(--text-color)"
+          fillOpacity="0.01"
+        />
         <path
           fillRule="evenodd"
           clipRule="evenodd"
           d="M5 1.47852H7V3.47853H10.75V5.47853H1.25V3.47853H5V1.47852Z"
-          stroke="#2B3344"
+          stroke="var(--text-color)"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
-        <path d="M2 10H10V5.5H2V10Z" stroke="#2B3344" strokeLinejoin="round" />
+        <path
+          d="M2 10H10V5.5H2V10Z"
+          stroke="var(--text-color)"
+          strokeLinejoin="round"
+        />
         <path
           d="M4 9.97439V8.47852"
-          stroke="#2B3344"
+          stroke="var(--text-color)"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M6 9.97461V8.47461"
-          stroke="#2B3344"
+          stroke="var(--text-color)"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M8 9.97439V8.47852"
-          stroke="#2B3344"
+          stroke="var(--text-color)"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M3 10H9"
-          stroke="#2B3344"
+          stroke="var(--text-color)"
           strokeLinecap="round"
           strokeLinejoin="round"
         />

app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx

@@ -30,14 +30,13 @@ interface ProductionCapacityProps {
   id: string;
   type: string;
   position: [number, number, number];
+  rotation: [number, number, number];
   onContextMenu?: (event: React.MouseEvent) => void;
   // onPointerDown:any
 }
 
-const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ id, type, position, onContextMenu }) => {
+const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ id, type, position, rotation, onContextMenu }) => {
-
   const { selectedChartId, setSelectedChartId } = useWidgetStore();
-
   const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
   const [measurements, setmeasurements] = useState<any>({});
   const [duration, setDuration] = useState("1h")
@@ -158,10 +157,10 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ id, type, posit
           setDuration(response.data.Data.duration)
           setName(response.data.widgetName)
         } else {
-          console.log("Unexpected response:", response);
+          
         }
       } catch (error) {
-        console.error("There was an error!", error);
+        
       }
     }
   }
@@ -177,15 +176,42 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({ id, type, posit
   }
     , [chartMeasurements, chartDuration, widgetName])
 
+  useEffect(() => {
+
+    
+  }, [rotation])
+  const rotationDegrees = {
+    x: (rotation[0] * 180) / Math.PI,
+    y: (rotation[1] * 180) / Math.PI,
+    z: (rotation[2] * 180) / Math.PI,
+  };
+
+  const transformStyle = {
+    transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
+  };
+
   return (
-    <Html position={[position[0], position[1], position[2]]}
+    <Html position={position}
       scale={[0.5, 0.5, 0.5]}
-      zIndexRange={[1, 0]}
       transform
-      sprite>
+      sprite
+      zIndexRange={[1,0]}
+      // center
+      // distanceFactor={10} // Adjusted for visual balance
+      style={{
+        transform: transformStyle.transform,
+        transformStyle: 'preserve-3d',
+        transition: 'transform 0.1s ease-out'
+      }}>
       <div className="productionCapacity-wrapper card"
         onClick={() => setSelectedChartId({ id: id, type: type })}
         onContextMenu={onContextMenu}
+        style={{
+          width: '300px', // Original width
+          height: '300px', // Original height
+          transform: transformStyle.transform,
+          transformStyle: 'preserve-3d'
+        }}
       >
         <div className="headeproductionCapacityr-wrapper">
           <div className="header">Production Capacity</div>

app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx

@@ -43,9 +43,10 @@ interface ReturnOfInvestmentProps {
   id: string;
   type: string;
   position: [number, number, number];
+  rotation: [number, number, number];
   onContextMenu?: (event: React.MouseEvent) => void;
 }
-const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, position, onContextMenu }) => {
+const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, position, rotation, onContextMenu }) => {
 
   const { selectedChartId, setSelectedChartId } = useWidgetStore();
   const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
@@ -203,13 +204,29 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, posit
     }
   }
     , [chartMeasurements, chartDuration, widgetName])
+  const rotationDegrees = {
+    x: (rotation[0] * 180) / Math.PI,
+    y: (rotation[1] * 180) / Math.PI,
+    z: (rotation[2] * 180) / Math.PI,
+  };
+
+  const transformStyle = {
+    transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
+  };
 
   return (
     <Html position={[position[0], position[1], position[2]]}
       scale={[0.5, 0.5, 0.5]}
       transform
       zIndexRange={[1, 0]}
-      sprite>
+      sprite
+      style={{
+        transform: transformStyle.transform,
+        transformStyle: 'preserve-3d',
+        transition: 'transform 0.1s ease-out'
+
+      }}
+    >
       <div className="returnOfInvestment card"
         onClick={() => setSelectedChartId({ id: id, type: type })}
         onContextMenu={onContextMenu}

app/src/components/layout/3D-cards/cards/StateWorking.tsx

@@ -10,9 +10,10 @@ interface StateWorkingProps {
   id: string;
   type: string;
   position: [number, number, number];
+  rotation: [number, number, number];
   onContextMenu?: (event: React.MouseEvent) => void;
 }
-const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, onContextMenu }) => {
+const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, rotation, onContextMenu }) => {
   const { selectedChartId, setSelectedChartId } = useWidgetStore();
   const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
   const [measurements, setmeasurements] = useState<any>({});
@@ -89,13 +90,28 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, onConte
   }
     , [chartMeasurements, chartDuration, widgetName])
 
+  const rotationDegrees = {
+    x: (rotation[0] * 180) / Math.PI,
+    y: (rotation[1] * 180) / Math.PI,
+    z: (rotation[2] * 180) / Math.PI,
+  };
 
+  const transformStyle = {
+    transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
+  };
   return (
     <Html position={[position[0], position[1], position[2]]}
       scale={[0.5, 0.5, 0.5]}
       transform
       zIndexRange={[1, 0]}
-      sprite>
+      sprite
+      style={{
+        transform: transformStyle.transform,
+        transformStyle: 'preserve-3d',
+        transition: 'transform 0.1s ease-out'
+
+      }}
+    >
       <div className="stateWorking-wrapper card"
         onClick={() => setSelectedChartId({ id: id, type: type })}
         onContextMenu={onContextMenu}

app/src/components/layout/3D-cards/cards/Throughput.tsx

@@ -45,10 +45,11 @@ interface ThroughputProps {
   id: string;
   type: string;
   position: [number, number, number];
+  rotation: [number, number, number];
   onContextMenu?: (event: React.MouseEvent) => void;
 }
 
-const Throughput: React.FC<ThroughputProps> = ({ id, type, position, onContextMenu }) => {
+const Throughput: React.FC<ThroughputProps> = ({ id, type, position, rotation, onContextMenu }) => {
 
   const { selectedChartId, setSelectedChartId } = useWidgetStore();
   const { measurements: chartMeasurements, duration: chartDuration, name: widgetName } = useChartStore();
@@ -183,13 +184,29 @@ const Throughput: React.FC<ThroughputProps> = ({ id, type, position, onContextMe
     }
   }
     , [chartMeasurements, chartDuration, widgetName])
+  const rotationDegrees = {
+    x: (rotation[0] * 180) / Math.PI,
+    y: (rotation[1] * 180) / Math.PI,
+    z: (rotation[2] * 180) / Math.PI,
+  };
+
+  const transformStyle = {
+    transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg)`,
+  };
 
   return (
     <Html position={[position[0], position[1], position[2]]}
       scale={[0.5, 0.5, 0.5]}
       transform
       zIndexRange={[1, 0]}
-      sprite>
+      sprite
+      style={{
+        transform: transformStyle.transform,
+        transformStyle: 'preserve-3d',
+        transition: 'transform 0.1s ease-out'
+
+      }}
+    >
       <div className="throughput-wrapper"
         onClick={() => setSelectedChartId({ id: id, type: type })}
         onContextMenu={onContextMenu}

app/src/components/layout/sidebarLeft/SideBarLeft.tsx

@@ -49,7 +49,7 @@ const SideBarLeft: React.FC = () => {
             </>
           ) : activeModule === "market" ? (
             <></>
-          ) : (
+          ) : activeModule === "builder" ? (
             <>
               <ToggleHeader
                 options={["Outline", "Assets"]}
@@ -60,6 +60,17 @@ const SideBarLeft: React.FC = () => {
                 {activeOption === "Outline" ? <Outline /> : <Assets />}
               </div>
             </>
+          ) : (
+            <>
+              <ToggleHeader
+                options={["Outline"]}
+                activeOption={activeOption}
+                handleClick={handleToggleClick}
+              />
+              <div className="sidebar-left-content-container">
+                {activeOption === "Outline" ? <Outline /> : <Assets />}
+              </div>
+            </>
           )}
         </div>
       )}

app/src/components/layout/sidebarLeft/visualization/widgets/Widgets2D.tsx

@@ -14,7 +14,7 @@ const chartTypes: ChartType[] = [
 ];
 
 const sampleData = {
-  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
+  labels: ["January", "February", "March", "April", "May", "June", "July"],
   datasets: [
     {
       data: [65, 59, 80, 81, 56, 55, 40],

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

@@ -33,7 +33,7 @@ const GlobalProperties: React.FC = () => {
   const { setPlaneValue, setGridValue, planeValue, gridValue } =
     useTileDistance();
   useEffect(() => {
-    // console.log(gridValue, planeValue, "values");
+ 
   }, [gridValue, planeValue]);
   const { socket } = useSocketStore();
   const { limitDistance, setLimitDistance } = useLimitDistance();

app/src/components/layout/sidebarRight/visualization/IotInputCards/FleetEfficiencyInputComponent.tsx

@@ -45,7 +45,7 @@ const FleetEfficiencyInputComponent = (props: Props) => {
         try {
           const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`);
           if (response.status === 200) {
-            console.log(response.data);
+           
             
             setSelections(response.data.Data.measurements)
             setDuration(response.data.Data.duration)

app/src/components/layout/sidebarRight/visualization/IotInputCards/FlotingWidgetInput.tsx

@@ -45,7 +45,7 @@ const FlotingWidgetInput = (props: Props) => {
         try {
           const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`);
           if (response.status === 200) {
-            console.log(response.data);
+        
             
             setSelections(response.data.Data.measurements)
             setDuration(response.data.Data.duration)

app/src/components/layout/sidebarRight/visualization/IotInputCards/WarehouseThroughputInputComponent.tsx

@@ -45,7 +45,7 @@ const WarehouseThroughputInputComponent = (props: Props) => {
         try {
           const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`);
           if (response.status === 200) {
-            console.log(response.data);
+        
             
             setSelections(response.data.Data.measurements)
             setDuration(response.data.Data.duration)

app/src/components/layout/sidebarRight/visualization/design/Design.tsx

@@ -1,18 +1,21 @@
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import ChartComponent from "../../../sidebarLeft/visualization/widgets/ChartComponent";
 import RegularDropDown from "../../../../ui/inputs/RegularDropDown";
+import { WalletIcon } from "../../../../icons/3dChartIcons";
+import SimpleCard from "../../../../ui/realTimeVis/floating/SimpleCard";
 
-// Define Props Interface
 interface Widget {
   id: string;
-  type: string; // Chart type (e.g., "bar", "line")
+  type?: string;
-  panel: "top" | "bottom" | "left" | "right"; // Panel location
+  panel: "top" | "bottom" | "left" | "right";
-  title: string;
+  title?: string;
+  header?: string;
   fontFamily?: string;
   fontSize?: string;
   fontWeight?: string;
-  data: {
+  className?: string;
+  data?: {
     labels: string[];
     datasets: {
       data: number[];
@@ -20,162 +23,263 @@ interface Widget {
       borderColor: string;
       borderWidth: number;
     }[];
-  }; // Data for the chart
+  };
+  value?: string;
+  per?: string;
+}
+
+interface ChartElement {
+  tagName: string;
+  className: string;
+  textContent: string;
+  selector: string;
 }
 
 const Design = () => {
-  const [selectedName, setSelectedName] = useState("drop down");
-  console.log("selectedName: ", selectedName);
-
-  const [selectedElement, setSelectedElement] = useState("drop down");
-  console.log("selectedElement: ", selectedElement);
-
   const [selectedFont, setSelectedFont] = useState("drop down");
-  console.log("selectedFont: ", selectedFont);
-
   const [selectedSize, setSelectedSize] = useState("drop down");
-  console.log("selectedSize: ", selectedSize);
-
   const [selectedWeight, setSelectedWeight] = useState("drop down");
-  console.log("selectedWeight: ", selectedWeight);
+  const [elementColor, setElementColor] = useState("#6f42c1");
+  const [showColorPicker, setShowColorPicker] = useState(false);
+  const [chartElements, setChartElements] = useState<ChartElement[]>([]);
+  const [selectedElementToStyle, setSelectedElementToStyle] = useState<string | null>(null);
+  const [nameInput, setNameInput] = useState("");
+  const chartRef = useRef<HTMLDivElement>(null);
 
-  const [elementColor, setElementColor] = useState("#6f42c1"); // Default color for elements
+  const { selectedChartId, setSelectedChartId, widgets, setWidgets } = useWidgetStore();
-  const [showColorPicker, setShowColorPicker] = useState(false); // Manage visibility of the color picker
 
-  // Zustand Store Hooks
+  // Initialize name input and extract elements when selectedChartId changes
-  const { selectedChartId, setSelectedChartId, widgets, setWidgets } =
+  useEffect(() => {
-    useWidgetStore();
+    setNameInput(selectedChartId?.header || selectedChartId?.title || "");
+    
+    if (!chartRef.current) return;
+
+    const timer = setTimeout(() => {
+      const chartContainer = chartRef.current;
+      if (!chartContainer) return;
+
+      const elements = Array.from(chartContainer.querySelectorAll("*"))
+        .filter((el) => {
+          const tagName = el.tagName.toLowerCase();
+          return !["script", "style", "meta", "link", "head"].includes(tagName);
+        })
+        .map((el, index) => {
+          const tagName = el.tagName.toLowerCase();
+          const className = typeof el.className === "string" ? el.className : "";
+          const textContent = el.textContent?.trim() || "";
+
+          let selector = tagName;
+
+          if (className && typeof className === "string") {
+            const classList = className.split(/\s+/).filter((c) => c.length > 0);
+            if (classList.length > 0) {
+              selector += "." + classList.join(".");
+            }
+          }
+
+          if (!className || className.trim() === "") {
+            const parent = el.parentElement;
+            if (parent) {
+              const siblings = Array.from(parent.children).filter(
+                (child) => child.tagName.toLowerCase() === tagName
+              );
+              const position = siblings.indexOf(el) + 1;
+              selector += `:nth-of-type(${position})`;
+            }
+          }
+
+          return {
+            tagName,
+            className,
+            textContent,
+            selector,
+          };
+        });
+
+      setChartElements(elements);
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, [selectedChartId]);
+
+  const applyStyles = () => {
+    if (!selectedElementToStyle || !chartRef.current) return;
+
+    const element = chartRef.current.querySelector(selectedElementToStyle);
+    if (!element) return;
+
+    const elementToStyle = element as HTMLElement;
+
+    if (selectedFont !== "drop down") {
+      elementToStyle.style.fontFamily = selectedFont;
+    }
+    if (selectedSize !== "drop down") {
+      elementToStyle.style.fontSize = selectedSize;
+    }
+    if (selectedWeight !== "drop down") {
+      elementToStyle.style.fontWeight = selectedWeight.toLowerCase();
+    }
+    if (elementColor) {
+      elementToStyle.style.color = elementColor;
+    }
+  };
+
+  useEffect(() => {
+    applyStyles();
+  }, [selectedFont, selectedSize, selectedWeight, elementColor, selectedElementToStyle]);
 
-  // Handle Widget Updates
   const handleUpdateWidget = (updatedProperties: Partial<Widget>) => {
     if (!selectedChartId) return;
 
-    // Update the selectedChartId
     const updatedChartId = {
       ...selectedChartId,
       ...updatedProperties,
     };
     setSelectedChartId(updatedChartId);
 
-    // Update the widgets array
     const updatedWidgets = widgets.map((widget) =>
-      widget.id === selectedChartId.id
+      widget.id === selectedChartId.id ? { ...widget, ...updatedProperties } : widget
-        ? { ...widget, ...updatedProperties }
-        : widget
     );
     setWidgets(updatedWidgets);
   };
 
-  // Default Chart Data
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newName = e.target.value;
+    setNameInput(newName);
+    
+    if (selectedChartId?.title) {
+      handleUpdateWidget({ title: newName });
+    } else if (selectedChartId?.header) {
+      handleUpdateWidget({ header: newName });
+    }
+  };
+
   const defaultChartData = {
     labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
     datasets: [
       {
         data: [65, 59, 80, 81, 56, 55, 40],
-        backgroundColor: elementColor, // Default background color
+        backgroundColor: elementColor,
-        borderColor: "#ffffff", // Default border color
+        borderColor: "#ffffff",
         borderWidth: 1,
       },
     ],
   };
 
+  const elementOptions = chartElements.map((el) => {
+    let displayName = el.tagName;
+    if (el.className) displayName += `.${el.className}`;
+    if (el.textContent)
+      displayName += ` (${el.textContent.substring(0, 20)}${
+        el.textContent.length > 20 ? "..." : ""
+      })`;
+    return {
+      display: displayName,
+      value: el.selector,
+    };
+  });
+
   return (
     <div className="design">
-      {/* Title of the Selected Widget */}
       <div className="selectedWidget">
-        {selectedChartId?.title || "Widget 1"}
+        {selectedChartId?.title || selectedChartId?.header || "Widget 1"}
       </div>
 
-      {/* Chart Component */}
+      <div className="reviewChart" ref={chartRef}>
-      <div className="reviewChart">
+        {selectedChartId?.title ? (
-        {selectedChartId && (
           <ChartComponent
-            type={selectedChartId.type}
+            type={selectedChartId.type || "bar"}
             title={selectedChartId.title}
-            data={selectedChartId.data || defaultChartData} // Use widget data or default
+            data={selectedChartId.data || defaultChartData}
+          />
+        ) : (
+          <SimpleCard
+            header={selectedChartId?.header || ""}
+            icon={WalletIcon}
+            value={selectedChartId?.value || ""}
+            per={selectedChartId?.per || ""}
           />
         )}
       </div>
 
-      {/* Options Container */}
       <div className="optionsContainer">
-        {/* Name Dropdown */}
         <div className="option">
-          <span>Name</span>
+          <span>Element to Style</span>
           <RegularDropDown
-            header={selectedChartId?.title || "Select Name"}
+            header={selectedElementToStyle || "Select Element"}
-            options={["Option 1", "Option 2", "Option 3"]}
+            options={
+              elementOptions.length > 0
+                ? elementOptions.map((opt) => opt.display)
+                : ["No elements found"]
+            }
             onSelect={(value) => {
-              setSelectedName(value);
+              const selected = elementOptions.find(
-              handleUpdateWidget({ title: value });
+                (opt) => opt.display === value
+              );
+              setSelectedElementToStyle(selected?.value || null);
             }}
           />
         </div>
 
-        {/* Element Dropdown */}
         <div className="option">
-          <span>Element</span>
+          <span>Name</span>
+          <input
+            type="text"
+            value={nameInput}
+            onChange={handleNameChange}
+            placeholder="Enter name"
+          />
+        </div>
+
+        {selectedChartId?.title && (
+          <div className="option">
+            <span>Chart Type</span>
             <RegularDropDown
-            header={selectedChartId?.type || "Select Element"}
+              header={selectedChartId?.type || "Select Type"}
-            options={["bar", "line", "pie", "doughnut", "radar", "polarArea"]} // Valid chart types
+              options={["bar", "line", "pie", "doughnut", "radar", "polarArea"]}
               onSelect={(value) => {
-              setSelectedElement(value);
                 handleUpdateWidget({ type: value });
               }}
             />
           </div>
+        )}
 
-        {/* Font Family Dropdown */}
         <div className="option">
           <span>Font Family</span>
           <RegularDropDown
             header={selectedChartId?.fontFamily || "Select Font"}
             options={["Arial", "Roboto", "Sans-serif"]}
-            onSelect={(value) => {
+            onSelect={(value) => setSelectedFont(value)}
-              setSelectedFont(value);
-              handleUpdateWidget({ fontFamily: value });
-            }}
           />
         </div>
 
-        {/* Size Dropdown */}
         <div className="option">
           <span>Size</span>
           <RegularDropDown
             header={selectedChartId?.fontSize || "Select Size"}
             options={["12px", "14px", "16px", "18px"]}
-            onSelect={(value) => {
+            onSelect={(value) => setSelectedSize(value)}
-              setSelectedSize(value);
-              handleUpdateWidget({ fontSize: value });
-            }}
           />
         </div>
 
-        {/* Weight Dropdown */}
         <div className="option">
           <span>Weight</span>
           <RegularDropDown
             header={selectedChartId?.fontWeight || "Select Weight"}
             options={["Light", "Regular", "Bold"]}
-            onSelect={(value) => {
+            onSelect={(value) => setSelectedWeight(value)}
-              setSelectedWeight(value);
-              handleUpdateWidget({ fontWeight: value });
-            }}
           />
         </div>
 
-        {/* Element Color Picker */}
         <div className="option">
           <div
             className="header"
             onClick={() => setShowColorPicker((prev) => !prev)}
           >
             <span>Element Color</span>
-            <div className="icon">▾</div>{" "}
+            <div className="icon">▾</div>
-            {/* Change icon based on the visibility */}
           </div>
 
-          {/* Show color picker only when 'showColorPicker' is true */}
           {showColorPicker && (
             <div className="colorDisplayer">
               <input
@@ -183,20 +287,21 @@ const Design = () => {
                 value={elementColor}
                 onChange={(e) => {
                   setElementColor(e.target.value);
+                  if (selectedChartId?.data) {
                     handleUpdateWidget({
                       data: {
-                      labels: selectedChartId?.data?.labels || [],
+                        ...selectedChartId.data,
                         datasets: [
                           {
-                          ...selectedChartId?.data?.datasets[0],
+                            ...selectedChartId.data.datasets[0],
-                          backgroundColor: e.target.value, // Update the element color
+                            backgroundColor: e.target.value,
                           },
                         ],
                       },
                     });
+                  }
                 }}
               />
-              {/* Display the selected color value */}
               <span style={{ marginLeft: "10px" }}>{elementColor}</span>
             </div>
           )}

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

@@ -239,14 +239,13 @@ export const DraggableWidget = ({
       onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop
     }
   };
-  console.log("widget.type", widget.type);
 
   // useClickOutside(chartWidget, () => {
   //   setSelectedChartId(null);
   // });
   const { isPlaying } = usePlayButtonStore();
 
-  console.log('isPanelHidden: ', isPanelHidden);
+ 
   return (
     <>
       <div

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

@@ -1,5 +1,5 @@
 import { useThree } from "@react-three/fiber";
-import React, { useState, useEffect, useRef } from "react";
+import React, { useEffect, useRef } from "react";
 import { useAsset3dWidget, useSocketStore, useWidgetSubOption } from "../../../store/store";
 import useModuleStore from "../../../store/useModuleStore";
 import { ThreeState } from "../../../types/world/worldTypes";
@@ -13,9 +13,19 @@ import { generateUniqueId } from "../../../functions/generateUniqueId";
 import { adding3dWidgets } from "../../../services/realTimeVisulization/zoneData/add3dWidget";
 import { get3dWidgetZoneData } from "../../../services/realTimeVisulization/zoneData/get3dWidgetData";
 import { use3DWidget } from "../../../store/useDroppedObjectsStore";
-import { useLeftData, useRightClickSelected, useRightSelected, useTopData, useZoneWidgetStore } from "../../../store/useZone3DWidgetStore";
+import { useEditWidgetOptionsStore, useLeftData, useRightClickSelected, useRightSelected, useTopData, useZoneWidgetStore } from "../../../store/useZone3DWidgetStore";
 import { useWidgetStore } from "../../../store/useWidgetStore";
 import EditWidgetOption from "../menu/EditWidgetOption";
+import { delete3dWidgetApi } from "../../../services/realTimeVisulization/zoneData/delete3dWidget";
+import { update3dWidget, update3dWidgetRotation } from "../../../services/realTimeVisulization/zoneData/update3dWidget";
+type WidgetData = {
+    id: string;
+    type: string;
+    position: [number, number, number];
+    rotation?: [number, number, number];
+    tempPosition?: [number, number, number];
+};
+
 
 export default function Dropped3dWidgets() {
     const { widgetSelect } = useAsset3dWidget();
@@ -23,22 +33,22 @@ export default function Dropped3dWidgets() {
     const { raycaster, gl, scene, mouse, camera }: ThreeState = useThree();
     const { widgetSubOption } = useWidgetSubOption();
     const { selectedZone } = useSelectedZoneStore();
-    const { top, setTop } = useTopData()
+    const { top, setTop } = useTopData();
-    const { left, setLeft } = useLeftData()
+    const { left, setLeft } = useLeftData();
-    const { rightSelect, setRightSelect } = useRightSelected()
+    const { rightSelect, setRightSelect } = useRightSelected();
-
+    const { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore()
-    // ✅ Use Zustand Store instead of useState
+    const { zoneWidgetData, setZoneWidgetData, addWidget, updateWidgetPosition, updateWidgetRotation } = useZoneWidgetStore();
-    const { zoneWidgetData, setZoneWidgetData, addWidget, updateWidgetPosition } = useZoneWidgetStore();
     const { setWidgets3D } = use3DWidget();
     const { visualizationSocket } = useSocketStore();
-    const { rightClickSelected, setRightClickSelected } = useRightClickSelected()
+    const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
-
     const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)); // Floor plane for horizontal move
     const verticalPlane = useRef(new THREE.Plane(new THREE.Vector3(0, 0, 1), 0)); // Vertical plane for vertical move
     const planeIntersect = useRef(new THREE.Vector3());
-    // let [verticalPlane, setFloorPlanesVertical] = useState(
+    // const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
-    //     new THREE.Plane(new THREE.Vector3(0, 1, 0))
+    // const verticalPlane = useRef(new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
-    // );
+    // const planeIntersect = useRef(new THREE.Vector3());
+    const rotationStartRef = useRef<[number, number, number]>([0, 0, 0]);
+    const mouseStartRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
 
     useEffect(() => {
         if (activeModule !== "visualization") return;
@@ -48,16 +58,18 @@ export default function Dropped3dWidgets() {
         const organization = email?.split("@")[1]?.split(".")[0];
 
         async function get3dWidgetData() {
-            let result = await get3dWidgetZoneData(selectedZone.zoneId, organization);
+            const result = await get3dWidgetZoneData(selectedZone.zoneId, organization);
-
+            console.log('result: ', result);
             setWidgets3D(result);
 
-            const formattedWidgets = result.map((widget: any) => ({
+            const formattedWidgets = result.map((widget: WidgetData) => ({
                 id: widget.id,
                 type: widget.type,
                 position: widget.position,
+                rotation: widget.rotation || [0, 0, 0],
             }));
 
+
             setZoneWidgetData(selectedZone.zoneId, formattedWidgets);
         }
 
@@ -91,28 +103,24 @@ export default function Dropped3dWidgets() {
 
             if (intersects.length > 0) {
                 const { x, y, z } = intersects[0].point;
-                const newWidget = {
+                const newWidget: WidgetData = {
                     id: generateUniqueId(),
                     type: widgetSelect,
-                    position: [x, y, z] as [number, number, number],
+                    position: [x, y, z],
+                    rotation: [0, 0, 0],
                 };
 
-                let add3dWidget = {
+                const add3dWidget = {
                     organization: organization,
                     widget: newWidget,
                     zoneId: selectedZone.zoneId
-                }
+                };
 
                 if (visualizationSocket) {
-                    visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget)
+                    visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget);
                 }
 
-                // let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget);
-                // 
-
-                // if (response.message === "Widget created successfully") {
                 addWidget(selectedZone.zoneId, newWidget);
-                // }
             }
         };
 
@@ -128,63 +136,103 @@ export default function Dropped3dWidgets() {
         if (!rightClickSelected) return;
         const email = localStorage.getItem("email") || "";
         const organization = email?.split("@")[1]?.split(".")[0];
+
         if (rightSelect === "Duplicate") {
-            const widgetToDuplicate = activeZoneWidgets.find(w => w.id === rightClickSelected);
+            async function duplicateWidget() {
+
+
+                const widgetToDuplicate = activeZoneWidgets.find((w: WidgetData) => w.id === rightClickSelected);
                 if (!widgetToDuplicate) return;
-            const newWidget = {
+                const newWidget: WidgetData = {
                     id: generateUniqueId(),
                     type: widgetToDuplicate.type,
                     position: [
-                    widgetToDuplicate.position[0] + 0.5, // Slightly shift position
+                        widgetToDuplicate.position[0] + 0.5,
                         widgetToDuplicate.position[1],
                         widgetToDuplicate.position[2] + 0.5,
-                ] as [number, number, number],
+                    ],
+                    rotation: widgetToDuplicate.rotation || [0, 0, 0],
                 };
-            let add3dWidget = {
+                const adding3dWidget = {
                     organization,
                     widget: newWidget,
                     zoneId: selectedZone.zoneId
                 };
-            // if (visualizationSocket) {
+                let response = await adding3dWidgets(selectedZone.zoneId, organization, newWidget)
-            //     visualizationSocket.emit("v2:viz-3D-widget:add", add3dWidget);
+                console.log('response: ', response);
-            // }
+
                 addWidget(selectedZone.zoneId, newWidget);
                 setRightSelect(null);
                 setRightClickSelected(null);
             }
+            duplicateWidget()
+        }
+
         if (rightSelect === "Delete") {
-            let deleteWidget = {
+            const deleteWidgetApi = async () => {
+                try {
+                    const deleteWidget = {
                         organization,
                         widgetId: rightClickSelected,
-                zoneId: selectedZone.zoneId
+                        zoneId: selectedZone.zoneId,
                     };
-            // if (visualizationSocket) {
+
-            //     visualizationSocket.emit("v2:viz-3D-widget:delete", deleteWidget);
+                    // Call the API to delete the widget
+                    const response = await delete3dWidgetApi(selectedZone.zoneId, organization, rightClickSelected);
+        
+
+                    // if (response?.success) {
+                    // Remove from state only if API call succeeds
+                    setZoneWidgetData(
+                        selectedZone.zoneId,
+                        activeZoneWidgets.filter((w: WidgetData) => w.id !== rightClickSelected)
+                    );
+                    // } else {
+                    //     console.error("Failed to delete widget:", response?.message);
                     // }
-            setZoneWidgetData(selectedZone.zoneId, activeZoneWidgets.filter(w => w.id !== rightClickSelected));
+                } catch (error) {
+                    console.error("Error deleting widget:", error);
+                } finally {
                     setRightClickSelected(null);
                     setRightSelect(null);
                 }
-        if (rightSelect === "Horizontal Move") {
+            };
 
+            deleteWidgetApi();
         }
-        if (rightSelect === "Vertical Move") {
-
-        }
-
     }, [rightSelect, rightClickSelected]);
 
     useEffect(() => {
-        const handleMouseMove = (event: MouseEvent) => {
+
+        const email = localStorage.getItem("email") || "";
+        const organization = email?.split("@")[1]?.split(".")[0];
+        const handleMouseDown = (event: MouseEvent) => {
             if (!rightClickSelected || !rightSelect) return;
 
+            if (rightSelect === "RotateX" || rightSelect === "RotateY") {
+                mouseStartRef.current = { x: event.clientX, y: event.clientY };
 
-            const selectedZone = Object.keys(zoneWidgetData).find(zoneId =>
+                const selectedZone = Object.keys(zoneWidgetData).find((zoneId: string) =>
-                zoneWidgetData[zoneId].some(widget => widget.id === rightClickSelected)
+                    zoneWidgetData[zoneId].some((widget: WidgetData) => widget.id === rightClickSelected)
+                );
+
+                if (!selectedZone) return;
+
+                const selectedWidget = zoneWidgetData[selectedZone].find((widget: WidgetData) => widget.id === rightClickSelected);
+                if (selectedWidget) {
+                    rotationStartRef.current = selectedWidget.rotation || [0, 0, 0];
+                }
+            }
+        };
+
+        const handleMouseMove = (event: MouseEvent) => {
+            if (!rightClickSelected || !rightSelect) return;
+            const selectedZone = Object.keys(zoneWidgetData).find((zoneId: string) =>
+                zoneWidgetData[zoneId].some((widget: WidgetData) => widget.id === rightClickSelected)
             );
             if (!selectedZone) return;
 
-            const selectedWidget = zoneWidgetData[selectedZone].find(widget => widget.id === rightClickSelected);
+            const selectedWidget = zoneWidgetData[selectedZone].find((widget: WidgetData) => widget.id === rightClickSelected);
             if (!selectedWidget) return;
 
             const rect = gl.domElement.getBoundingClientRect();
@@ -194,72 +242,184 @@ export default function Dropped3dWidgets() {
             raycaster.setFromCamera(mouse, camera);
 
             if (rightSelect === "Horizontal Move" && raycaster.ray.intersectPlane(plane.current, planeIntersect.current)) {
-
+                const newPosition: [number, number, number] = [
-                updateWidgetPosition(selectedZone, rightClickSelected, [
                     planeIntersect.current.x,
                     selectedWidget.position[1],
                     planeIntersect.current.z
-                ]);
+                ];
+                updateWidgetPosition(selectedZone, rightClickSelected, newPosition);
+
             }
 
             if (rightSelect === "Vertical Move") {
                 if (raycaster.ray.intersectPlane(verticalPlane.current, planeIntersect.current)) {
                     updateWidgetPosition(selectedZone, rightClickSelected, [
                         selectedWidget.position[0],
-                        planeIntersect.current.y, // Ensure Y value updates correctly
+                        planeIntersect.current.y,
                         selectedWidget.position[2]
                     ]);
-                } else {
-                    console.log("No Intersection with Vertical Plane");
                 }
             }
+
+            if (rightSelect === "RotateX") {
+                const deltaX = event.clientX - mouseStartRef.current.x;
+                const rotationSpeed = 0.03;
+                const newRotation: [number, number, number] = [
+                    rotationStartRef.current[0] + deltaX * rotationSpeed,
+                    rotationStartRef.current[1],
+                    rotationStartRef.current[2]
+                ];
+                updateWidgetRotation(selectedZone, rightClickSelected, newRotation);
+            }
+
+            if (rightSelect === "RotateY") {
+                const deltaY = event.clientY - mouseStartRef.current.y;
+                const rotationSpeed = 0.03;
+                const newRotation: [number, number, number] = [
+                    rotationStartRef.current[0],
+                    rotationStartRef.current[1] + deltaY * rotationSpeed,
+                    rotationStartRef.current[2]
+                ];
+                updateWidgetRotation(selectedZone, rightClickSelected, newRotation);
+            }
+            if (rightSelect === "RotateZ") {
+                const deltaX = event.movementX;
+                const rotationSpeed = 0.03;
+                const currentRotation = selectedWidget.rotation || [0, 0, 0];
+                const newRotation: [number, number, number] = [
+                    currentRotation[0],
+                    currentRotation[1],
+                    currentRotation[2] + deltaX * rotationSpeed
+                ];
+                updateWidgetRotation(selectedZone, rightClickSelected, newRotation);
+            }
+
         };
 
         const handleMouseUp = () => {
+            if (!rightClickSelected || !rightSelect) return;
 
-            if (rightClickSelected && (rightSelect === "Horizontal Move" || rightSelect === "Vertical Move")) {
+            const selectedZone = Object.keys(zoneWidgetData).find(zoneId =>
+                zoneWidgetData[zoneId].some(widget => widget.id === rightClickSelected)
+            );
 
+            if (!selectedZone) return;
+
+            const selectedWidget = zoneWidgetData[selectedZone].find(widget => widget.id === rightClickSelected);
+            if (!selectedWidget) return;
+
+            // Format values to 2 decimal places
+            const formatValues = (vals: number[]) => vals.map(val => parseFloat(val.toFixed(2)));
+
+            if (rightSelect === "Horizontal Move" || rightSelect === "Vertical Move") {
+                console.log(`${rightSelect} Completed - Full Position:`, formatValues(selectedWidget.position));
+                let lastPosition = formatValues(selectedWidget.position) as [number, number, number];
+
+                (async () => {
+                    let response = await update3dWidget(selectedZone, organization, rightClickSelected, lastPosition);
+                    console.log('response: ', response);
+                    if (response) {
+                        console.log("Widget position updated in API:", response);
+                    }
+                })();
+            }
+            else if (rightSelect.includes("Rotate")) {
+                const rotation = selectedWidget.rotation || [0, 0, 0];
+                console.log(`${rightSelect} Completed - Full Rotation:`, formatValues(rotation));
+                let lastPosition = formatValues(rotation) as [number, number, number];
+                console.log('lastPosition: ', lastPosition);
+
+                (async () => {
+                    let response = await update3dWidgetRotation(selectedZone, organization, rightClickSelected, lastPosition);
+                    console.log('response: ', response);
+                    if (response) {
+                        console.log("Widget position updated in API:", response);
+                    }
+                })();
+            }
+
+            // Reset selection
             setTimeout(() => {
                 setRightClickSelected(null);
                 setRightSelect(null);
             }, 50);
-            }
         };
-
+        window.addEventListener("mousedown", handleMouseDown);
-        // Attach events to window instead of gl.domElement
         window.addEventListener("mousemove", handleMouseMove);
         window.addEventListener("mouseup", handleMouseUp);
 
         return () => {
+            window.removeEventListener("mousedown", handleMouseDown);
             window.removeEventListener("mousemove", handleMouseMove);
             window.removeEventListener("mouseup", handleMouseUp);
         };
     }, [rightClickSelected, rightSelect, zoneWidgetData, gl]);
 
-
-
-
     return (
         <>
-            {activeZoneWidgets.map(({ id, type, position }) => {
+            {activeZoneWidgets.map(({ id, type, position, rotation = [0, 0, 0] }: WidgetData) => {
-                const handleRightClick = (event: React.MouseEvent) => {
+                const handleRightClick = (event: React.MouseEvent, id: string) => {
                     event.preventDefault();
-                    setRightClickSelected(id)
+                    const canvasElement = document.getElementById("real-time-vis-canvas");
+                    if (!canvasElement) throw new Error("Canvas element not found");
+                    const canvasRect = canvasElement.getBoundingClientRect();
+                    const relativeX = event.clientX - canvasRect.left;
+                    const relativeY = event.clientY - canvasRect.top;
+                    setEditWidgetOptions(true);
+                    setRightClickSelected(id);
+                    setTop(relativeY);
+                    setLeft(relativeX);
                 };
+
                 switch (type) {
                     case "ui-Widget 1":
-                        return <ProductionCapacity key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
+                        return (
+                            <ProductionCapacity
+                                key={id}
+                                id={id}
+                                type={type}
+                                position={position}
+                                rotation={rotation}
+                                onContextMenu={(e) => handleRightClick(e, id)}
+                            />
+                        );
                     case "ui-Widget 2":
-                        return <ReturnOfInvestment key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
+                        return (
+                            <ReturnOfInvestment
+                                key={id}
+                                id={id}
+                                type={type}
+                                position={position}
+                                rotation={rotation}
+                                onContextMenu={(e) => handleRightClick(e, id)}
+                            />
+                        );
                     case "ui-Widget 3":
-                        return <StateWorking key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
+                        return (
+                            <StateWorking
+                                key={id}
+                                id={id}
+                                type={type}
+                                position={position}
+                                rotation={rotation}
+                                onContextMenu={(e) => handleRightClick(e, id)}
+                            />
+                        );
                     case "ui-Widget 4":
-                        return <Throughput key={id} id={id} type={type} position={position} onContextMenu={handleRightClick} />;
+                        return (
+                            <Throughput
+                                key={id}
+                                id={id}
+                                type={type}
+                                position={position}
+                                rotation={rotation}
+                                onContextMenu={(e) => handleRightClick(e, id)}
+                            />
+                        );
                     default:
                         return null;
                 }
             })}
-
         </>
     );
 }

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

@@ -509,40 +509,34 @@ const DroppedObjects: React.FC = () => {
       {zone.objects.map((obj, index) => (
         <div
           key={`${zoneName}-${index}`}
-          className={`${obj.className} ${
+          className={`${obj.className} ${selectedChartId?.id === obj.id && "activeChart"}`}
-            selectedChartId?.id === obj.id && "activeChart"
-          }`}
           ref={chartWidget}
           style={{
             position: "absolute",
             top:
               typeof obj.position.top === "number"
-                ? `calc(${obj.position.top}px + ${
+                ? `calc(${obj.position.top}px + ${isPlaying && selectedZone.activeSides.includes("top")
-                    isPlaying && selectedZone.activeSides.includes("top")
                   ? 90
                   : 0
                 }px)`
                 : "auto",
             left:
               typeof obj.position.left === "number"
-                ? `calc(${obj.position.left}px + ${
+                ? `calc(${obj.position.left}px + ${isPlaying && selectedZone.activeSides.includes("left")
-                    isPlaying && selectedZone.activeSides.includes("left")
                   ? 90
                   : 0
                 }px)`
                 : "auto",
             right:
               typeof obj.position.right === "number"
-                ? `calc(${obj.position.right}px + ${
+                ? `calc(${obj.position.right}px + ${isPlaying && selectedZone.activeSides.includes("right")
-                    isPlaying && selectedZone.activeSides.includes("right")
                   ? 90
                   : 0
                 }px)`
                 : "auto",
             bottom:
               typeof obj.position.bottom === "number"
-                ? `calc(${obj.position.bottom}px + ${
+                ? `calc(${obj.position.bottom}px + ${isPlaying && selectedZone.activeSides.includes("bottom")
-                    isPlaying && selectedZone.activeSides.includes("bottom")
                   ? 90
                   : 0
                 }px)`

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

@@ -124,8 +124,8 @@ const Panel: React.FC<PanelProps> = ({
     selectedZone.widgets.filter((w) => w.panel === panel).length;
 
   const calculatePanelCapacity = (panel: Side) => {
-    const CHART_WIDTH = 150;
+    const CHART_WIDTH = 170;
-    const CHART_HEIGHT = 150;
+    const CHART_HEIGHT = 170;
     const FALLBACK_HORIZONTAL_CAPACITY = 5;
     const FALLBACK_VERTICAL_CAPACITY = 3;
 

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

@@ -7,7 +7,6 @@ import DisplayZone from "./DisplayZone";
 import Scene from "../../../modules/scene/scene";
 import useModuleStore from "../../../store/useModuleStore";
 
-
 import { useDroppedObjectsStore } from "../../../store/useDroppedObjectsStore";
 import {
   useAsset3dWidget,
@@ -24,7 +23,8 @@ import RenderOverlay from "../../templates/Overlay";
 import ConfirmationPopup from "../../layout/confirmationPopup/ConfirmationPopup";
 import DroppedObjects from "./DroppedFloatingWidgets";
 import EditWidgetOption from "../menu/EditWidgetOption";
-import { useRightClickSelected } from "../../../store/useZone3DWidgetStore";
+import { useEditWidgetOptionsStore, useRightClickSelected, useRightSelected } from "../../../store/useZone3DWidgetStore";
+
 
 type Side = "top" | "bottom" | "left" | "right";
 
@@ -59,6 +59,8 @@ const RealTimeVisulization: React.FC = () => {
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
 
 
+  const { rightSelect, setRightSelect } = useRightSelected()
+  const { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore()
   const { rightClickSelected, setRightClickSelected } = useRightClickSelected()
   const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
 
@@ -69,6 +71,7 @@ const RealTimeVisulization: React.FC = () => {
   const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
   const { visualizationSocket } = useSocketStore();
 
+
   useEffect(() => {
     async function GetZoneData() {
       const email = localStorage.getItem("email") || "";
@@ -142,8 +145,8 @@ const RealTimeVisulization: React.FC = () => {
       const relativeX = event.clientX - canvasRect.left;
       const relativeY = event.clientY - canvasRect.top;
 
-      const newPosition = determinePosition(canvasRect, relativeX, relativeY)
+      const newPosition = determinePosition(canvasRect, relativeX, relativeY);
-      console.log('newPosition: ', newPosition);
+      console.log("newPosition: ", newPosition);
       const newObject = {
         ...droppedData,
         id: generateUniqueId(),
@@ -162,12 +165,12 @@ const RealTimeVisulization: React.FC = () => {
       let addFloatingWidget = {
         organization: organization,
         widget: newObject,
-        zoneId: selectedZone.zoneId
+        zoneId: selectedZone.zoneId,
-      }
+      };
-      console.log('newObject: ', newObject);
+      console.log("newObject: ", newObject);
 
       if (visualizationSocket) {
-        visualizationSocket.emit("v2:viz-float:add", addFloatingWidget)
+        visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
       }
 
       // let response = await addingFloatingWidgets(
@@ -196,8 +199,47 @@ const RealTimeVisulization: React.FC = () => {
       }));
     } catch (error) { }
   };
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const editWidgetOptions = document.querySelector(
+        ".editWidgetOptions-wrapper"
+      );
+      if (
+        editWidgetOptions &&
+        !editWidgetOptions.contains(event.target as Node)
+      ) {
+        setRightClickSelected(null);
+        setRightSelect(null);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [setRightClickSelected]);
+
+  // Add this useEffect hook to your component
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const editWidgetOptions = document.querySelector(
+        ".editWidgetOptions-wrapper"
+      );
+      if (
+        editWidgetOptions &&
+        !editWidgetOptions.contains(event.target as Node)
+      ) {
+        setRightClickSelected(null);
+        setRightSelect(null);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [setRightClickSelected]);
 
-  function handleRightClickSel(){}
   return (
     <div
       ref={containerRef}
@@ -231,12 +273,25 @@ const RealTimeVisulization: React.FC = () => {
       >
         <Scene />
       </div>
-      {activeModule === "visualization" && selectedZone.zoneName !== "" && <DroppedObjects />}
+      {activeModule === "visualization" && selectedZone.zoneName !== "" && (
+        <DroppedObjects />
+      )}
       {activeModule === "visualization" && <SocketRealTimeViz />}
 
-      {activeModule === "visualization" && widgetSubOption === "3D" && rightClickSelected && <EditWidgetOption
+      {activeModule === "visualization" &&
-        options={["Duplicate", "Vertical Move", "Horizontal Move", "Delete"]} 
+        editWidgetOptions &&
-      />}
+        rightClickSelected && (
+          <EditWidgetOption
+            options={[
+              "Duplicate",
+              "Vertical Move",
+              "Horizontal Move",
+              "RotateX",
+              "RotateY",
+              "Delete",
+            ]}
+          />
+        )}
 
       {activeModule === "visualization" && (
         <>

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

@@ -1,4 +1,3 @@
-
 export function determinePosition(
   canvasRect: DOMRect,
   relativeX: number,
@@ -12,6 +11,23 @@ export function determinePosition(
   const centerX = canvasRect.width / 2;
   const centerY = canvasRect.height / 2;
 
+  // Define a threshold for considering a point as "centered"
+  const centerThreshold = 10; // Adjust this value as needed
+
+  // Check if the point is within the center threshold
+  const isCenterX = Math.abs(relativeX - centerX) <= centerThreshold;
+  const isCenterY = Math.abs(relativeY - centerY) <= centerThreshold;
+
+  // If the point is centered, return a special "centered" position
+  if (isCenterX && isCenterY) {
+    return {
+      top: "auto",
+      left: "auto",
+      right: "auto",
+      bottom: "auto",
+    };
+  }
+
   let position: {
     top: number | "auto";
     left: number | "auto";
@@ -21,7 +37,7 @@ export function determinePosition(
 
   if (relativeY < centerY) {
     if (relativeX < centerX) {
-      
+      // Top-left quadrant
       position = {
         top: relativeY - 41.5,
         left: relativeX - 125,
@@ -29,7 +45,7 @@ export function determinePosition(
         bottom: "auto",
       };
     } else {
-      
+      // Top-right quadrant
       position = {
         top: relativeY - 41.5,
         right: canvasRect.width - relativeX - 125,
@@ -39,7 +55,7 @@ export function determinePosition(
     }
   } else {
     if (relativeX < centerX) {
-      
+      // Bottom-left quadrant
       position = {
         bottom: canvasRect.height - relativeY - 41.5,
         left: relativeX - 125,
@@ -47,7 +63,7 @@ export function determinePosition(
         top: "auto",
       };
     } else {
-      
+      // Bottom-right quadrant
       position = {
         bottom: canvasRect.height - relativeY - 41.5,
         right: canvasRect.width - relativeX - 125,

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

@@ -32,14 +32,22 @@ const DropDownList: React.FC<DropDownListProps> = ({
   listType = "default",
   remove,
 }) => {
-
   const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
-  const { zones, setZones } = useZones()
+  const { zones, setZones } = useZones();
 
   const handleToggle = () => {
     setIsOpen((prev) => !prev); // Toggle the state
   };
-  const [zoneDataList, setZoneDataList] = useState<{ id: string; name: string }[]>([]);
+
+  interface Asset {
+    id: string;
+    name: string;
+  }
+
+  const [zoneDataList, setZoneDataList] = useState<
+    { id: string; name: string; assets: Asset[] }[]
+  >([]);
+
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
 
   useEffect(() => {
@@ -53,12 +61,65 @@ const DropDownList: React.FC<DropDownListProps> = ({
     //       { id: "70fa55cd-b5c9-4f80-a8c4-6319af3bfb4e", name: "zone6" },
     //     ])
 
-
+    const value = (zones || []).map(
-    const value = (zones || []).map((val: { zoneId: string; zoneName: string }) => ({
+      (val: { zoneId: string; zoneName: string }) => ({
         id: val.zoneId,
-      name: val.zoneName
+        name: val.zoneName,
-    }));
+      })
-    setZoneDataList(prev => (JSON.stringify(prev) !== JSON.stringify(value) ? value : prev));
+    );
+    setZoneDataList([
+      {
+        id: "zone1",
+        name: "Zone 1",
+        assets: [
+          {
+            id: "asset1",
+            name: "Asset 1",
+          },
+          {
+            id: "asset2",
+            name: "Asset 2",
+          },
+          {
+            id: "asset3",
+            name: "Asset 3",
+          },
+        ],
+      },
+      {
+        id: "zone2",
+        name: "Zone 2",
+        assets: [
+          {
+            id: "asset4",
+            name: "Asset 4",
+          },
+          {
+            id: "asset5",
+            name: "Asset 5",
+          },
+          {
+            id: "asset6",
+            name: "Asset 6",
+          },
+        ],
+      },
+      {
+        id: "zone3",
+        name: "Zone 3",
+        assets: [
+          {
+            id: "asset7",
+            name: "Asset 7",
+          },
+          {
+            id: "asset8",
+            name: "Asset 8",
+          },
+        ],
+      },
+    ]);
+    
   }, [zones]);
 
   return (
@@ -101,6 +162,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
                 value="Buildings"
                 showKebabMenu={false}
                 showAddIcon={false}
+                items={zoneDataList}
               />
               <DropDownList
                 value="Zones"

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

@@ -1,20 +1,44 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import RenameInput from "../inputs/RenameInput";
-import { EyeIcon, LockIcon, RmoveIcon } from "../../icons/ExportCommonIcons";
+
 import { useSelectedZoneStore } from "../../../store/useZoneStore";
 import { getZoneData } from "../../../services/realTimeVisulization/zoneData/getZones";
-import useModuleStore, { useSubModuleStore } from "../../../store/useModuleStore";
+import useModuleStore, {
+  useSubModuleStore,
+} from "../../../store/useModuleStore";
+import {
+  ArrowIcon,
+  EyeIcon,
+  LockIcon,
+  RmoveIcon,
+} from "../../icons/ExportCommonIcons";
+
+interface Asset {
+  id: string;
+  name: string;
+}
+
+interface ZoneItem {
+  id: string;
+  name: string;
+  assets?: Asset[];
+}
 
 interface ListProps {
-  items?: { id: string; name: string }[]; // Optional array of items to render
+  items?: ZoneItem[];
-  placeholder?: string; // Optional placeholder text
+  placeholder?: string;
   remove?: boolean;
 }
 
 const List: React.FC<ListProps> = ({ items = [], remove }) => {
+  console.log("items: ", items);
   const { activeModule, setActiveModule } = useModuleStore();
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
   const { setSubModule } = useSubModuleStore();
+  const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
+    {}
+  );
+
   useEffect(() => {
     useSelectedZoneStore.getState().setSelectedZone({
       zoneName: "",
@@ -28,10 +52,15 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
     });
   }, [activeModule]);
 
+  const toggleZoneExpansion = (zoneId: string) => {
+    setExpandedZones((prev) => ({
+      ...prev,
+      [zoneId]: !prev[zoneId],
+    }));
+  };
 
   async function handleSelectZone(id: string) {
     try {
-      // Avoid re-fetching if the same zone is already selected
       if (selectedZone?.zoneId === id) {
         console.log("Zone is already selected:", selectedZone.zoneName);
         return;
@@ -65,12 +94,55 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
     <>
       {items.length > 0 ? (
         <ul className="list-wrapper">
-          {items.map((item, index) => (
+          {items.map((item) => (
-            <li key={index} className="list-container">
+            <React.Fragment key={`zone-${item.id}`}>
+              <li className="list-container">
                 <div className="list-item">
-                <div className="value" onClick={() => handleSelectZone(item.id)}>
+                  <div className="zone-header">
+                    <div
+                      className="value"
+                      onClick={() => handleSelectZone(item.id)}
+                    >
                       <RenameInput value={item.name} />
                     </div>
+                  </div>
+                  <div className="options-container">
+                    <div className="lock option">
+                      <LockIcon isLocked />
+                    </div>
+                    <div className="visibe option">
+                      <EyeIcon isClosed />
+                    </div>
+                    {remove && (
+                      <div className="remove option">
+                        <RmoveIcon />
+                      </div>
+                    )}
+                    {item.assets && item.assets.length > 0 && (
+                      <div
+                        className="expand-icon option"
+                        onClick={() => toggleZoneExpansion(item.id)}
+                      >
+                        <ArrowIcon />
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </li>
+              {/* Nested assets list - only shown when expanded */}
+              {item.assets &&
+                item.assets.length > 0 &&
+                expandedZones[item.id] && (
+                  <ul className="asset-list">
+                    {item.assets.map((asset) => (
+                      <li
+                        key={`asset-${asset.id}`}
+                        className="list-container asset-item"
+                      >
+                        <div className="list-item">
+                          <div className="value">
+                            <RenameInput value={asset.name} />
+                          </div>
                           <div className="options-container">
                             <div className="lock option">
                               <LockIcon isLocked />
@@ -88,6 +160,10 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                       </li>
                     ))}
                   </ul>
+                )}
+            </React.Fragment>
+          ))}
+        </ul>
       ) : (
         <div className="list-wrapper">
           <div className="no-item">No items to display</div>

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

@@ -1,26 +1,48 @@
 import React, { useEffect } from "react";
-import { useLeftData, useRightSelected, useTopData } from "../../../store/useZone3DWidgetStore";
+import {
+  useEditWidgetOptionsStore,
+  useLeftData,
+  useRightClickSelected,
+  useRightSelected,
+  useTopData,
+} from "../../../store/useZone3DWidgetStore";
 
 interface EditWidgetOptionProps {
   options: string[];
 }
 
-const EditWidgetOption: React.FC<EditWidgetOptionProps> = ({ options }) => {
+const EditWidgetOption: React.FC<EditWidgetOptionProps> = ({
-  const { top, setTop } = useTopData()
+  options,
-  const { left, setLeft } = useLeftData()
+}) => {
-  const { rightSelect, setRightSelect } = useRightSelected()
+  const { top } = useTopData();
+  const { left } = useLeftData();
+  const { setRightSelect } = useRightSelected();
+  const { setEditWidgetOptions } = useEditWidgetOptionsStore();
 
   useEffect(() => {
 
-    console.log('left: ', left);
+  }, [top, left]);
-    console.log('top: ', top);
-  }, [top, left])
 
   return (
-    <div className="editWidgetOptions-wrapper" style={{ top: top + "px", left: left + "px" }}>
+    <div
+      className="editWidgetOptions-wrapper"
+      style={{
+        position: "absolute",
+        top: `${top}px`,
+        left: `${left}px`,
+        zIndex: 10000,
+      }}
+    >
       <div className="editWidgetOptions">
         {options.map((option, index) => (
-          <div className="option" key={index} onClick={(e) => setRightSelect(option)}>
+          <div
+            className="option"
+            key={index}
+            onClick={(e) => {
+              setRightSelect(option);
+              setEditWidgetOptions(false);
+            }}
+          >
             {option}
           </div>
         ))}

app/src/components/ui/realTimeVis/charts/BarGraphComponent.tsx

@@ -238,7 +238,7 @@ const BarGraphComponent = ({
   };
 
   useEffect(() => {
-    console.log("titleeeeeeeeeeeeeeeeeee",title);
+    
   },[])
 
   // Memoize Theme Colors

app/src/components/ui/realTimeVis/charts/DoughnutGraphComponent.tsx

@@ -51,7 +51,7 @@ const DoughnutGraphComponent = ({
   };
 
   useEffect(() => {
-    console.log("titleeeeeeeeeeeeeeeeeee",title);
+   
   },[])
 
   // Memoize Theme Colors

app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx

@@ -51,7 +51,7 @@ const LineGraphComponent = ({
   };
 
   useEffect(() => {
-    console.log("titleeeeeeeeeeeeeeeeeee",title);
+  
   },[])
 
   // Memoize Theme Colors

app/src/components/ui/realTimeVis/charts/PieGraphComponent.tsx

@@ -237,7 +237,7 @@ const PieChartComponent = ({
   };
 
   useEffect(() => {
-    console.log("titleeeeeeeeeeeeeeeeeee",title);
+  
   },[])
 
   // Memoize Theme Colors

app/src/components/ui/realTimeVis/charts/PolarAreaGraphComponent.tsx

@@ -51,7 +51,7 @@ const PolarAreaGraphComponent = ({
   };
 
   useEffect(() => {
-    console.log("titleeeeeeeeeeeeeeeeeee",title);
+
   },[])
 
   // Memoize Theme Colors

app/src/modules/visualization/handleSaveTemplate.ts

@@ -30,7 +30,7 @@ export const handleSaveTemplate = async ({
 }: HandleSaveTemplateProps): Promise<void> => {
   try {
     // Check if the selected zone has any widgets
-    if (!selectedZone.widgets || selectedZone.widgets.length === 0) {
+    if (!selectedZone.panelOrder || selectedZone.panelOrder.length === 0) {
       console.warn("No widgets found in the selected zone.");
       return;
     }

app/src/services/realTimeVisulization/zoneData/add3dWidget.ts

@@ -5,9 +5,6 @@ export const adding3dWidgets = async (
   organization: string,
   widget: {}
 ) => {
-    console.log('widget: ', widget);
-    console.log('organization: ', organization);
-    console.log('zoneId: ', zoneId);
   try {
     const response = await fetch(
       `${url_Backend_dwinzo}/api/v2/3dwidget/save`,

app/src/services/realTimeVisulization/zoneData/delete3dWidget.ts

@@ -0,0 +1,38 @@
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+// let url_Backend_dwinzo = `http://192.168.0.102:5000`;
+
+export const delete3dWidgetApi = async (
+  zoneId: string,
+  organization: string,
+  id: string
+) => {
+  console.log("zoneId: ", zoneId);
+  console.log("organization: ", organization);
+  console.log("id: ", id);
+
+  try {
+    const response = await fetch(
+      `${url_Backend_dwinzo}/api/v2/widget3D/delete`,
+      {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ organization, zoneId, id }),
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error("Failed to delete floating widget in the zone");
+    }
+
+    const result = await response.json();
+    return result;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new Error(error.message);
+    } else {
+      throw new Error("An unknown error occurred");
+    }
+  }
+};

app/src/services/realTimeVisulization/zoneData/saveTempleteApi.ts

@@ -16,7 +16,7 @@ export const saveTemplateApi = async (organization: string, template: {}) => {
     }
 
     const result = await response.json();
-    console.log('result: ', result);
+
     return result;
   } catch (error) {
     if (error instanceof Error) {

app/src/services/realTimeVisulization/zoneData/update3dWidget.ts

@@ -0,0 +1,81 @@
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+// let url_Backend_dwinzo = `http://192.168.0.102:5000`;
+export const update3dWidget = async (
+    zoneId: string,
+    organization: string,
+    id: string,
+    position?: [number, number, number]
+) => {
+    console.log("organization: ", organization);
+    console.log("zoneId: ", zoneId);
+    try {
+        const response = await fetch(
+            `${url_Backend_dwinzo}/api/v2/modifyPR/widget3D`,
+            {
+                method: "PATCH",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    organization,
+                    zoneId,
+                    id,
+                    position,
+                }),
+            }
+        );
+
+        if (!response.ok) {
+            throw new Error("Failed to add 3dwidget in the zone");
+        }
+
+        const result = await response.json();
+        return result;
+    } catch (error) {
+        if (error instanceof Error) {
+            throw new Error(error.message);
+        } else {
+            throw new Error("An unknown error occurred");
+        }
+    }
+};
+
+export const update3dWidgetRotation = async (
+    zoneId: string,
+    organization: string,
+    id: string,
+    rotation?: [number, number, number]
+) => {
+    console.log("organization: ", organization);
+    console.log("zoneId: ", zoneId);
+    try {
+        const response = await fetch(
+            `${url_Backend_dwinzo}/api/v2/modifyPR/widget3D`,
+            {
+                method: "PATCH",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    organization,
+                    zoneId,
+                    id,
+                    rotation,
+                }),
+            }
+        );
+
+        if (!response.ok) {
+            throw new Error("Failed to add 3dwidget in the zone");
+        }
+
+        const result = await response.json();
+        return result;
+    } catch (error) {
+        if (error instanceof Error) {
+            throw new Error(error.message);
+        } else {
+            throw new Error("An unknown error occurred");
+        }
+    }
+};

app/src/store/useZone3DWidgetStore.ts

@@ -1,10 +1,10 @@
-
 import { create } from "zustand";
 
 type WidgetData = {
   id: string;
   type: string;
   position: [number, number, number];
+  rotation?: [number, number, number];
   tempPosition?: [number, number, number];
 };
 
@@ -13,38 +13,59 @@ type ZoneWidgetStore = {
   setZoneWidgetData: (zoneId: string, widgets: WidgetData[]) => void;
   addWidget: (zoneId: string, widget: WidgetData) => void;
   updateWidgetPosition: (zoneId: string, widgetId: string, newPosition: [number, number, number]) => void;
+  updateWidgetRotation: (zoneId: string, widgetId: string, newRotation: [number, number, number]) => void;
 };
 
 export const useZoneWidgetStore = create<ZoneWidgetStore>((set) => ({
   zoneWidgetData: {},
 
-  setZoneWidgetData: (zoneId, widgets) =>
+  setZoneWidgetData: (zoneId: string, widgets: WidgetData[]) =>
-    set((state) => ({
+    set((state: ZoneWidgetStore) => ({
       zoneWidgetData: { ...state.zoneWidgetData, [zoneId]: widgets },
     })),
 
-  addWidget: (zoneId, widget) =>
+  addWidget: (zoneId: string, widget: WidgetData) =>
-    set((state) => ({
+    set((state: ZoneWidgetStore) => ({
       zoneWidgetData: {
         ...state.zoneWidgetData,
-        [zoneId]: [...(state.zoneWidgetData[zoneId] || []), widget],
+        [zoneId]: [...(state.zoneWidgetData[zoneId] || []), { ...widget, rotation: widget.rotation || [0, 0, 0] }],
       },
     })),
 
-  updateWidgetPosition: (zoneId, widgetId, newPosition) =>
+  updateWidgetPosition: (zoneId: string, widgetId: string, newPosition: [number, number, number]) =>
-    set((state) => {
+    set((state: ZoneWidgetStore) => {
       const widgets = state.zoneWidgetData[zoneId] || [];
       return {
         zoneWidgetData: {
           ...state.zoneWidgetData,
-          [zoneId]: widgets.map((widget) =>
+          [zoneId]: widgets.map((widget: WidgetData) =>
             widget.id === widgetId ? { ...widget, position: newPosition } : widget
           ),
         },
       };
     }),
+
+  updateWidgetRotation: (zoneId: string, widgetId: string, newRotation: [number, number, number]) =>
+    set((state: ZoneWidgetStore) => {
+      const widgets = state.zoneWidgetData[zoneId] || [];
+      return {
+        zoneWidgetData: {
+          ...state.zoneWidgetData,
+          [zoneId]: widgets.map((widget: WidgetData) =>
+            widget.id === widgetId ? { ...widget, rotation: newRotation } : widget
+          ),
+        },
+      };
+    }),
 }));
 
+// export type WidgetData = {
+//   id: string;
+//   type: string;
+//   position: [number, number, number];
+//   rotation?: [number, number, number];
+//   tempPosition?: [number, number, number];
+// };
 
 interface RightClickStore {
   rightClickSelected: string | null;
@@ -75,3 +96,13 @@ export const useRightSelected = create<RightSelectStore>((set) => ({
   rightSelect: null, // Default state is null
   setRightSelect: (x) => set({ rightSelect: x }),
 }));
+
+interface EditWidgetOptionsStore {
+  editWidgetOptions: boolean;
+  setEditWidgetOptions: (value: boolean) => void;
+}
+
+export const useEditWidgetOptionsStore = create<EditWidgetOptionsStore>((set) => ({
+  editWidgetOptions: false,  // Initial state
+  setEditWidgetOptions: (value: boolean) => set({ editWidgetOptions: value }),
+}));

app/src/styles/components/lists.scss

@@ -3,15 +3,23 @@
 
 .dropdown-list-container {
   border-bottom: 1px solid var(--border-color);
+
+  .lists-container {
+    margin-bottom: 6px;
+  }
+
   &:last-child {
     border: none;
   }
+
   .head {
     @include flex-space-between;
     padding: 6px 12px;
+
     .options {
       @include flex-center;
       gap: 6px;
+
       .option {
         @include flex-center;
         cursor: pointer;
@@ -22,34 +30,52 @@
 }
 
 .list-wrapper {
+
+
   .no-item {
     padding: 12px;
   }
+
   .list-container {
     padding: 2px;
+    // margin-left: 10px;
+    overflow: hidden;
+
+
     .list-item {
       @include flex-space-between;
       width: 100%;
       text-align: center;
-      padding: 4px 12px;
+      padding: 4px 8px;
       border-radius: #{$border-radius-large};
+
       .value {
         width: 100%;
         text-align: start;
         max-width: 180px;
       }
+
       .options-container {
         @include flex-center;
         gap: 6px;
+
         .option {
           @include flex-center;
           cursor: pointer;
         }
       }
     }
+
     .active {
       background-color: var(--highlight-accent-color);
       color: var(--primary-color);
     }
   }
+
+  .asset-list {
+    border-left: 2px solid var(--border-color);
+
+    margin-left: 20px
+  }
+
 }

app/src/styles/layout/sidebar.scss

@@ -253,6 +253,7 @@
 
       .user-profile-container {
         display: flex;
+
         .user-profile {
           background: var(--accent-color);
           color: var(--primary-color);
@@ -483,6 +484,9 @@
         height: 150px;
         background: #f0f0f0;
         // border-radius: 8px;
+        display: flex;
+        align-items: center;
+        // justify-content: center;
       }
 
       .optionsContainer {
@@ -497,7 +501,8 @@
           justify-content: space-between;
           gap: 12px;
 
-          .regularDropdown-container {
+          .regularDropdown-container,
+          input {
             width: 160px;
           }
 
@@ -686,6 +691,7 @@
         font-weight: var(--font-weight-regular);
         padding: 8px 0;
       }
+
       .input-toggle-container {
         padding: 0;
         margin-bottom: 6px;
@@ -1009,11 +1015,9 @@
           top: 50%;
           right: -10px;
           transform: translate(0, -50%);
-          background: linear-gradient(
+          background: linear-gradient(144.19deg,
-            144.19deg,
               #f1e7cd 16.62%,
-            #fffaef 85.81%
+              #fffaef 85.81%);
-          );
         }
 
         .category-image {
@@ -1117,10 +1121,12 @@
     }
   }
 }
+
 .assets-result {
   width: 100%;
   height: 100%;
   margin: 8px 10px;
+
   .assets-wrapper {
     margin: 0;
   }

app/src/styles/pages/realTimeViz.scss

@@ -61,7 +61,7 @@
     border-radius: 8px;
     max-width: 80%;
     overflow: auto;
-    // max-width: calc(100% - 450px);
+    max-width: calc(100% - 500px);
 
     &::-webkit-scrollbar {
       display: none;
@@ -166,14 +166,16 @@
 
   .panel {
     position: absolute;
-    background: white;
+    background: var(--background-color);
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
     border-radius: 6px;
-    overflow: visible !important;
+    overflow: auto;
     z-index: $z-index-tools;
     overflow: auto;
-
+    &::-webkit-scrollbar {
+      display: none;
+    }
     .panel-content {
       position: relative;
       height: 100%;
@@ -319,6 +321,7 @@
       right: 0;
       top: 0;
       bottom: 0;
+
     }
   }
 
@@ -715,13 +718,20 @@
   z-index: 2 !important;
 }
 
+.connectionSuccess {
+  outline-color: #43C06D;
+}
+
+.connectionFails {
+  outline-color: #ffe3e0;
+}
 
 
 .editWidgetOptions {
   position: absolute;
-  top: 50%;
+  // top: 50%;
-  left: 50%;
+  // left: 50%;
-  transform: translate(-50%, -50%);
+  // transform: translate(-50%, -50%);
   background-color: var(--background-color);
   z-index: 3;
   display: flex;
@@ -729,6 +739,7 @@
   border-radius: 6px;
   overflow: hidden;
 
+min-width: 150px;
   .option {
     padding: 8px 10px;
     color: var(--text-color);