2025-05-03 04:44:41 +00:00
15 changed files with 1031 additions and 898 deletions
--- a/app/src/components/icons/SimulationIcons.tsx
+++ b/app/src/components/icons/SimulationIcons.tsx
@@ -125,21 +125,21 @@ export function ResetIcon() {
    >
      <path
        d="M2.54182 4.09637C3.33333 2.73422 4.80832 1.81836 6.49721 1.81836C9.02194 1.81836 11.0686 3.86506 11.0686 6.38979C11.0686 8.91452 9.02194 10.9612 6.49721 10.9612C3.97248 10.9612 1.92578 8.91452 1.92578 6.38979"
-        stroke="var(--icon-default-color-active)"
+        stroke="var(--text-color)"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M7.64118 6.38895C7.64118 7.02013 7.12951 7.53181 6.49833 7.53181C5.86714 7.53181 5.35547 7.02013 5.35547 6.38895C5.35547 5.75777 5.86714 5.24609 6.49833 5.24609C7.12951 5.24609 7.64118 5.75777 7.64118 6.38895Z"
-        fill="var(--icon-default-color-active)"
-        stroke="var(--icon-default-color-active)"
+        fill="var(--text-color)"
+        stroke="var(--text-color)"
        strokeWidth="0.571429"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M4.78125 4.10407H2.49554V1.81836"
-        stroke="var(--icon-default-color-active)"
+        stroke="var(--text-color)"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
@@ -158,7 +158,7 @@ export function PlayStopIcon() {
    >
      <path
        d="M8 2.88867V9.88867M11 2.88867V9.88867M2 3.99171V8.78562C2 9.28847 2 9.53987 2.09943 9.65627C2.1857 9.75732 2.31512 9.81092 2.44756 9.80047C2.60019 9.78847 2.77796 9.61072 3.13352 9.25517L5.5305 6.85817C5.69485 6.69382 5.777 6.61167 5.8078 6.51692C5.83485 6.43357 5.83485 6.34377 5.8078 6.26042C5.777 6.16567 5.69485 6.08352 5.5305 5.91917L3.13352 3.52219C2.77796 3.16664 2.60019 2.98886 2.44756 2.97685C2.31512 2.96643 2.1857 3.02004 2.09943 3.12105C2 3.23747 2 3.48888 2 3.99171Z"
-        stroke="var(--icon-default-color-active)"
+        stroke="var(--text-color)"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
@@ -177,7 +177,7 @@ export function ExitIcon() {
    >
      <path
        d="M2.08203 6.34311L5.03647 3.38867M2.08203 6.34311L5.03647 9.29755M2.08203 6.34311H5.9228C7.22276 6.34334 9.34995 7.05241 10.7681 9.88867"
-        stroke="var(--icon-default-color-active)"
+        stroke="var(--text-color)"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
--- a/app/src/components/ui/Tools.tsx
+++ b/app/src/components/ui/Tools.tsx
@@ -36,7 +36,6 @@ import {
 import useToggleStore from "../../store/useUIToggleStore";
 import {
  use3DWidget,
-  useDroppedObjectsStore,
  useFloatingWidget,
 } from "../../store/visualization/useDroppedObjectsStore";

@@ -57,20 +56,18 @@ const Tools: React.FC = () => {

  const { widgets3D } = use3DWidget();

-  const zones = useDroppedObjectsStore((state) => state.zones);
-
  // wall options
  const { toggleView, setToggleView } = useToggleView();
  const { setDeleteTool } = useDeleteTool();
  const { setAddAction } = useAddAction();
  const { setSelectedWallItem } = useSelectedWallItem();

-  const { transformMode, setTransformMode } = useTransformMode();
-  const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
-  const { movePoint, setMovePoint } = useMovePoint();
-  const { toolMode, setToolMode } = useToolMode();
+  const { setTransformMode } = useTransformMode();
+  const { setDeletePointOrLine } = useDeletePointOrLine();
+  const { setMovePoint } = useMovePoint();
+  const { setToolMode } = useToolMode();
  const { activeTool, setActiveTool } = useActiveTool();
-  const { refTextupdate, setRefTextUpdate } = useRefTextUpdate();
+  const { setRefTextUpdate } = useRefTextUpdate();

  // Reset activeTool whenever activeModule changes
  useEffect(() => {
@@ -209,7 +206,6 @@ const Tools: React.FC = () => {
  return (
    <>
      {!isPlaying ? (
-        <>
        <div className="tools-container">
          <div className="drop-down-icons">
            <div className="activeDropicon">
@@ -464,13 +460,12 @@ const Tools: React.FC = () => {
            </>
          )}
        </div>
-        </>
      ) : (
        <>
          {activeModule !== "simulation" && (
-            <div className="exitPlay" onClick={() => setIsPlaying(false)}>
+            <button className="exitPlay" onClick={() => setIsPlaying(false)}>
              X
-            </div>
+            </button>
          )}
        </>
      )}
--- a/app/src/components/ui/simulation/simulationPlayer.tsx
+++ b/app/src/components/ui/simulation/simulationPlayer.tsx
@@ -19,6 +19,9 @@ import {
 } from "../../icons/ExportCommonIcons";
 import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
 import { useSubModuleStore } from "../../../store/useModuleStore";
+import ProductionCapacity from "../analysis/ProductionCapacity";
+import ThroughputSummary from "../analysis/ThroughputSummary";
+import ROISummary from "../analysis/ROISummary";

 const SimulationPlayer: React.FC = () => {
  const MAX_SPEED = 8; // Maximum speed
@@ -162,6 +165,7 @@ const SimulationPlayer: React.FC = () => {
  };

  return (
+    <>
      <div className="simulation-player-wrapper">
        <div className={`simulation-player-container ${expand ? "open" : ""}`}>
          <div className="controls-container">
@@ -206,7 +210,10 @@ const SimulationPlayer: React.FC = () => {
                    <div className="label">Monthly ROI</div>
                  </div>
                  <div className="progress-wrapper">
-                  <div className="progress" style={{ width: monthlyROI }}></div>
+                    <div
+                      className="progress"
+                      style={{ width: monthlyROI }}
+                    ></div>
                  </div>{" "}
                </div>
              </div>
@@ -380,6 +387,14 @@ const SimulationPlayer: React.FC = () => {
          )}
        </div>
      </div>
+      <div className="analysis">
+        <div className="analysis-wrapper">
+          <ProductionCapacity />
+          <ThroughputSummary />
+        </div>
+        <ROISummary />
+      </div>
+    </>
  );
 };

--- a/app/src/modules/visualization/RealTimeVisulization.tsx
+++ b/app/src/modules/visualization/RealTimeVisulization.tsx
@@ -143,109 +143,109 @@ const RealTimeVisulization: React.FC = () => {
    });
  }, [selectedZone]);

-  const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    try {
-      const email = localStorage.getItem("email") ?? "";
-      const organization = email?.split("@")[1]?.split(".")[0];
+  // const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
+  //   event.preventDefault();
+  //   try {
+  //     const email = localStorage.getItem("email") ?? "";
+  //     const organization = email?.split("@")[1]?.split(".")[0];

-      const data = event.dataTransfer.getData("text/plain");
-      if (widgetSubOption === "3D") return;
-      if (!data || selectedZone.zoneName === "") return;
+  //     const data = event.dataTransfer.getData("text/plain");
+  //     if (widgetSubOption === "3D") return;
+  //     if (!data || selectedZone.zoneName === "") return;

-      const droppedData = JSON.parse(data);
-      const canvasElement = document.getElementById("real-time-vis-canvas");
-      if (!canvasElement) throw new Error("Canvas element not found");
+  //     const droppedData = JSON.parse(data);
+  //     const canvasElement = document.getElementById("real-time-vis-canvas");
+  //     if (!canvasElement) throw new Error("Canvas element not found");

-      const rect = canvasElement.getBoundingClientRect();
-      const relativeX = event.clientX - rect.left;
-      const relativeY = event.clientY - rect.top;
+  //     const rect = canvasElement.getBoundingClientRect();
+  //     const relativeX = event.clientX - rect.left;
+  //     const relativeY = event.clientY - rect.top;

-      // Widget dimensions
-      const widgetWidth = droppedData.width ?? 125;
-      const widgetHeight = droppedData.height ?? 100;
+  //     // Widget dimensions
+  //     const widgetWidth = droppedData.width ?? 125;
+  //     const widgetHeight = droppedData.height ?? 100;

-      // Center the widget at cursor
-      const centerOffsetX = widgetWidth / 2;
-      const centerOffsetY = widgetHeight / 2;
+  //     // Center the widget at cursor
+  //     const centerOffsetX = widgetWidth / 2;
+  //     const centerOffsetY = widgetHeight / 2;

-      const adjustedX = relativeX - centerOffsetX;
-      const adjustedY = relativeY - centerOffsetY;
+  //     const adjustedX = relativeX - centerOffsetX;
+  //     const adjustedY = relativeY - centerOffsetY;

-      const finalPosition = determinePosition(rect, adjustedX, adjustedY);
-      const [activeProp1, activeProp2] = getActiveProperties(finalPosition);
+  //     const finalPosition = determinePosition(rect, adjustedX, adjustedY);
+  //     const [activeProp1, activeProp2] = getActiveProperties(finalPosition);

-      let finalY = 0;
-      let finalX = 0;
+  //     let finalY = 0;
+  //     let finalX = 0;

-      if (activeProp1 === "top") {
-        finalY = adjustedY;
-      } else {
-        finalY = rect.height - (adjustedY + widgetHeight);
-      }
+  //     if (activeProp1 === "top") {
+  //       finalY = adjustedY;
+  //     } else {
+  //       finalY = rect.height - (adjustedY + widgetHeight);
+  //     }

-      if (activeProp2 === "left") {
-        finalX = adjustedX;
-      } else {
-        finalX = rect.width - (adjustedX + widgetWidth);
-      }
+  //     if (activeProp2 === "left") {
+  //       finalX = adjustedX;
+  //     } else {
+  //       finalX = rect.width - (adjustedX + widgetWidth);
+  //     }

-      // Clamp to boundaries
-      finalX = Math.max(0, Math.min(rect.width - widgetWidth, finalX));
-      finalY = Math.max(0, Math.min(rect.height - widgetHeight, finalY));
+  //     // Clamp to boundaries
+  //     finalX = Math.max(0, Math.min(rect.width - widgetWidth, finalX));
+  //     finalY = Math.max(0, Math.min(rect.height - widgetHeight, finalY));

-      const boundedPosition = {
-        ...finalPosition,
-        [activeProp1]: finalY,
-        [activeProp2]: finalX,
-        [activeProp1 === "top" ? "bottom" : "top"]: "auto",
-        [activeProp2 === "left" ? "right" : "left"]: "auto",
-      };
+  //     const boundedPosition = {
+  //       ...finalPosition,
+  //       [activeProp1]: finalY,
+  //       [activeProp2]: finalX,
+  //       [activeProp1 === "top" ? "bottom" : "top"]: "auto",
+  //       [activeProp2 === "left" ? "right" : "left"]: "auto",
+  //     };

-      const newObject = {
-        ...droppedData,
-        id: generateUniqueId(),
-        position: boundedPosition,
-      };
+  //     const newObject = {
+  //       ...droppedData,
+  //       id: generateUniqueId(),
+  //       position: boundedPosition,
+  //     };

-      const existingZone =
-        useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
-      if (!existingZone) {
-        useDroppedObjectsStore
-          .getState()
-          .setZone(selectedZone.zoneName, selectedZone.zoneId);
-      }
+  //     const existingZone =
+  //       useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
+  //     if (!existingZone) {
+  //       useDroppedObjectsStore
+  //         .getState()
+  //         .setZone(selectedZone.zoneName, selectedZone.zoneId);
+  //     }

-      const addFloatingWidget = {
-        organization,
-        widget: newObject,
-        zoneId: selectedZone.zoneId,
-      };
+  //     const addFloatingWidget = {
+  //       organization,
+  //       widget: newObject,
+  //       zoneId: selectedZone.zoneId,
+  //     };

-      if (visualizationSocket) {
-        visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
-      }
+  //     if (visualizationSocket) {
+  //       visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
+  //     }

-      useDroppedObjectsStore
-        .getState()
-        .addObject(selectedZone.zoneName, newObject);
+  //     useDroppedObjectsStore
+  //       .getState()
+  //       .addObject(selectedZone.zoneName, newObject);

-      const droppedObjectsStore = useDroppedObjectsStore.getState();
-      const currentZone = droppedObjectsStore.zones[selectedZone.zoneName];
+  //     const droppedObjectsStore = useDroppedObjectsStore.getState();
+  //     const currentZone = droppedObjectsStore.zones[selectedZone.zoneName];

-      if (currentZone && currentZone.zoneId === selectedZone.zoneId) {
-        console.log(
-          `Objects for Zone ${selectedZone.zoneId}:`,
-          currentZone.objects
-        );
-        setFloatingWidget(currentZone.objects);
-      } else {
-        console.warn("Zone not found or zoneId mismatch");
-      }
-    } catch (error) {
-      console.error("Error in handleDrop:", error);
-    }
-  };
+  //     if (currentZone && currentZone.zoneId === selectedZone.zoneId) {
+  //       console.log(
+  //         `Objects for Zone ${selectedZone.zoneId}:`,
+  //         currentZone.objects
+  //       );
+  //       setFloatingWidget(currentZone.objects);
+  //     } else {
+  //       console.warn("Zone not found or zoneId mismatch");
+  //     }
+  //   } catch (error) {
+  //     console.error("Error in handleDrop:", error);
+  //   }
+  // };

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
@@ -302,16 +302,7 @@ const RealTimeVisulization: React.FC = () => {
    }
  `}
      </style>
-      <div
-        ref={containerRef}
-        id="real-time-vis-canvas"
-        className={`realTime-viz canvas ${isPlaying ? "playingFlase" : ""}`}
-        style={{
-          height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
-          width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
-          left: isPlaying || activeModule !== "visualization" ? "0%" : "",
-        }}
-      >
+      <div ref={containerRef} className="realTime-viz">
        <div className="realTime-viz-wrapper">
          {openConfirmationPopup && (
            <RenderOverlay>
@@ -322,20 +313,6 @@ const RealTimeVisulization: React.FC = () => {
              />
            </RenderOverlay>
          )}
-          <div
-            className="scene-container"
-            style={{
-              height: "100%",
-              width: "100%",
-              borderRadius:
-                isPlaying || activeModule !== "visualization" ? "" : "6px",
-            }}
-            role="application"
-            onDrop={(event) => handleDrop(event)}
-            onDragOver={(event) => event.preventDefault()}
-          >
-            <Scene />
-          </div>
          {activeModule === "visualization" && selectedZone.zoneName !== "" && (
            <DroppedObjects />
          )}
--- a/app/src/modules/visualization/functions/handleUiDrop.ts
+++ b/app/src/modules/visualization/functions/handleUiDrop.ts
@@ -0,0 +1,122 @@
+import { generateUniqueId } from "../../../functions/generateUniqueId";
+import { useDroppedObjectsStore } from "../../../store/visualization/useDroppedObjectsStore";
+import { determinePosition } from "./determinePosition";
+import { getActiveProperties } from "./getActiveProperties";
+
+interface HandleDropProps {
+    widgetSubOption: any;
+    visualizationSocket: any;
+    selectedZone: any;
+    setFloatingWidget: (value: any) => void;
+    event: React.DragEvent<HTMLDivElement>
+}
+
+export const createHandleDrop = ({
+    widgetSubOption,
+    visualizationSocket,
+    selectedZone,
+    setFloatingWidget,
+    event,
+}: HandleDropProps) => {
+    event.preventDefault();
+    try {
+        const email = localStorage.getItem("email") ?? "";
+        const organization = email?.split("@")[1]?.split(".")[0];
+
+        const data = event.dataTransfer.getData("text/plain");
+        if (widgetSubOption === "3D") return;
+        if (!data || selectedZone.zoneName === "") return;
+
+        const droppedData = JSON.parse(data);
+        const canvasElement = document.getElementById("real-time-vis-canvas");
+        if (!canvasElement) throw new Error("Canvas element not found");
+
+        const rect = canvasElement.getBoundingClientRect();
+        const relativeX = event.clientX - rect.left;
+        const relativeY = event.clientY - rect.top;
+
+        // Widget dimensions
+        const widgetWidth = droppedData.width ?? 125;
+        const widgetHeight = droppedData.height ?? 100;
+
+        // Center the widget at cursor
+        const centerOffsetX = widgetWidth / 2;
+        const centerOffsetY = widgetHeight / 2;
+
+        const adjustedX = relativeX - centerOffsetX;
+        const adjustedY = relativeY - centerOffsetY;
+
+        const finalPosition = determinePosition(rect, adjustedX, adjustedY);
+        const [activeProp1, activeProp2] = getActiveProperties(finalPosition);
+
+        let finalY = 0;
+        let finalX = 0;
+
+        if (activeProp1 === "top") {
+            finalY = adjustedY;
+        } else {
+            finalY = rect.height - (adjustedY + widgetHeight);
+        }
+
+        if (activeProp2 === "left") {
+            finalX = adjustedX;
+        } else {
+            finalX = rect.width - (adjustedX + widgetWidth);
+        }
+
+        // Clamp to boundaries
+        finalX = Math.max(0, Math.min(rect.width - widgetWidth, finalX));
+        finalY = Math.max(0, Math.min(rect.height - widgetHeight, finalY));
+
+        const boundedPosition = {
+            ...finalPosition,
+            [activeProp1]: finalY,
+            [activeProp2]: finalX,
+            [activeProp1 === "top" ? "bottom" : "top"]: "auto",
+            [activeProp2 === "left" ? "right" : "left"]: "auto",
+        };
+
+        const newObject = {
+            ...droppedData,
+            id: generateUniqueId(),
+            position: boundedPosition,
+        };
+
+        const existingZone =
+            useDroppedObjectsStore.getState().zones[selectedZone.zoneName];
+        if (!existingZone) {
+            useDroppedObjectsStore
+                .getState()
+                .setZone(selectedZone.zoneName, selectedZone.zoneId);
+        }
+
+        const addFloatingWidget = {
+            organization,
+            widget: newObject,
+            zoneId: selectedZone.zoneId,
+        };
+
+        if (visualizationSocket) {
+            visualizationSocket.emit("v2:viz-float:add", addFloatingWidget);
+        }
+
+        useDroppedObjectsStore
+            .getState()
+            .addObject(selectedZone.zoneName, newObject);
+
+        const droppedObjectsStore = useDroppedObjectsStore.getState();
+        const currentZone = droppedObjectsStore.zones[selectedZone.zoneName];
+
+        if (currentZone && currentZone.zoneId === selectedZone.zoneId) {
+            console.log(
+                `Objects for Zone ${selectedZone.zoneId}:`,
+                currentZone.objects
+            );
+            setFloatingWidget(currentZone.objects);
+        } else {
+            console.warn("Zone not found or zoneId mismatch");
+        }
+    } catch (error) {
+        console.error("Error in handleDrop:", error);
+    }
+};
--- a/app/src/pages/Project.tsx
+++ b/app/src/pages/Project.tsx
@@ -13,6 +13,7 @@ import {
  useWallItems,
  useZones,
  useLoadingProgress,
+  useWidgetSubOption,
 } from "../store/store";
 import { useNavigate } from "react-router-dom";
 import { usePlayButtonStore } from "../store/usePlayButtonStore";
@@ -22,9 +23,10 @@ import SimulationPlayer from "../components/ui/simulation/simulationPlayer";
 import KeyPressListener from "../utils/shortcutkeys/handleShortcutKeys";
 import { useSelectedUserStore } from "../store/useCollabStore";
 import FollowPerson from "../components/templates/FollowPerson";
-import ProductionCapacity from "../components/ui/analysis/ProductionCapacity";
-import ThroughputSummary from "../components/ui/analysis/ThroughputSummary";
-import ROISummary from "../components/ui/analysis/ROISummary";
+import Scene from "../modules/scene/scene";
+import { createHandleDrop } from "../modules/visualization/functions/handleUiDrop";
+import { useSelectedZoneStore } from "../store/visualization/useZoneStore";
+import { useFloatingWidget } from "../store/visualization/useDroppedObjectsStore";

 const Project: React.FC = () => {
  let navigate = useNavigate();
@@ -53,21 +55,28 @@ const Project: React.FC = () => {
    } else {
      navigate("/");
    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

-  const { isPlaying } = usePlayButtonStore();
+  // global store
  const { toggleThreeD } = useThreeDStore();
+
+  // simulation store
+  const { isPlaying } = usePlayButtonStore();
+
+  // collaboration store
  const { selectedUser } = useSelectedUserStore();

+  // real-time visualization store
+  const { widgetSubOption } = useWidgetSubOption();
+  const { visualizationSocket } = useSocketStore();
+  const { selectedZone } = useSelectedZoneStore();
+  const { setFloatingWidget } = useFloatingWidget();
+
  return (
    <div className="project-main">
-      {/* <div className="analysis">
-        <div className="analysis-wrapper">
-          <ProductionCapacity />
-          <ThroughputSummary />
-        </div>
-        <ROISummary />
-      </div> */}
+      {!selectedUser && (
+        <>
          <KeyPressListener />
          {loadingProgress > 0 && <LoadingPage progress={loadingProgress} />}
          {!isPlaying && (
@@ -77,14 +86,36 @@ const Project: React.FC = () => {
              <SideBarRight />
            </>
          )}
-      {/* <RenderOverlay>
-        <MenuBar setOpenMenu={setOpenMenu} />
-      </RenderOverlay> */}
-      {activeModule === "market" && <MarketPlace />}
          <RealTimeVisulization />
+          {activeModule === "market" && <MarketPlace />}
          {activeModule !== "market" && <Tools />}
          {isPlaying && activeModule === "simulation" && <SimulationPlayer />}
-      {/* {<SimulationPlayer />} */}
+        </>
+      )}
+      <div
+        className="scene-container"
+        id="real-time-vis-canvas"
+        style={{
+          height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
+          width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
+          left: isPlaying || activeModule !== "visualization" ? "0%" : "",
+          borderRadius:
+            isPlaying || activeModule !== "visualization" ? "" : "6px",
+        }}
+        role="application"
+        onDrop={(event) =>
+          createHandleDrop({
+            widgetSubOption,
+            visualizationSocket,
+            selectedZone,
+            setFloatingWidget,
+            event,
+          })
+        }
+        onDragOver={(event) => event.preventDefault()}
+      >
+        <Scene />
+      </div>
      {selectedUser && <FollowPerson />}
    </div>
  );
--- a/app/src/store/visualization/useDroppedObjectsStore.ts
+++ b/app/src/store/visualization/useDroppedObjectsStore.ts
@@ -1,5 +1,4 @@
 import { create } from "zustand";
-import { addingFloatingWidgets } from "../../services/visulization/zone/addFloatingWidgets";
 import { useSocketStore } from "../store";
 import useChartStore from "./useChartStore";

--- a/app/src/styles/base/global.scss
+++ b/app/src/styles/base/global.scss
@@ -1,7 +1,8 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;

-section, .section{
+section,
+.section {
  padding: 4px;
  outline: 1px solid var(--border-color);
  outline-offset: -1px;
@@ -9,3 +10,20 @@ section, .section{
  background: var(--background-color);
  margin: 4px 0;
 }
+
+.scene-container {
+  width: calc(100% - (320px + 270px + 90px));
+  height: calc(100% - (250px));
+  position: absolute;
+  top: 50%;
+  left: calc(270px + 45px);
+  overflow: hidden;
+  z-index: 1;
+  transform: translate(0, -50%);
+  transition: all 0.2s;
+  box-shadow: $box-shadow-medium;
+  canvas {
+    outline: none;
+    border: none;
+  }
+}
--- a/app/src/styles/base/reset.scss
+++ b/app/src/styles/base/reset.scss
@@ -12,10 +12,3 @@ input[type="password"]::-webkit-clear-button, /* For Chrome/Safari clear button
 input[type="password"]::-webkit-inner-spin-button {  /* Just in case */
  display: none;
 }
-
-button{
-  border: none;
-  outline: none;
-  background: none;
-  cursor: pointer;
-}
--- a/app/src/styles/components/analysis/ROISummary.scss
+++ b/app/src/styles/components/analysis/ROISummary.scss
@@ -1,3 +1,6 @@
+@use "../../abstracts/variables" as *;
+@use "../../abstracts/mixins" as *;
+
 .roiSummary-container {
    .roiSummary-wrapper {
        background-color: var(--background-color);
@@ -64,7 +67,7 @@
                    width: 100%;
                    border-radius: 6px;
                    border: 1px solid #00FF56;
-                    background: #436D51;
+                    background: #17eb5d65;
                    display: flex;
                    flex-direction: column;
                    padding: 4px 6px;
@@ -223,12 +226,11 @@
            background: none;

            .btn {
-                background-color: var(--accent-color);
-                color: var(--background-color);
-                padding: 4px 6px;
-                border-radius: 5px;
+                color: var(--text-button-color);
+                background: var(--background-color-button);
+                padding: 4px 12px;
+                border-radius: #{$border-radius-large};
                display: inline-block;
-                font-size: 14px;
                text-align: center;
            }
        }
@@ -244,7 +246,6 @@
            height: 250px;
            border-radius: 50%;
            position: relative;
-            transition: background 0.5s ease;
        }
        .progress-cover {
            position: absolute;
@@ -252,7 +253,6 @@
            height: 75%;
            top: 12.5%;
            left: 12.5%;
-            background: #000000cc;
            border-radius: 50%;
        }
    }
--- a/app/src/styles/components/analysis/analysis.scss
+++ b/app/src/styles/components/analysis/analysis.scss
@@ -7,29 +7,30 @@
  align-items: start;
  width: 100%;
  height: 100vh;
-    // pointer-events: none;
-    z-index: 10000;
+  pointer-events: none;
+  padding: 10px;
+  z-index: 2;

  .analysis-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
-}
-
  .analysis-card {
    min-width: 333px;
    background: var(--background-color);
    border-radius: 20px;
-
    padding: 8px;
+    backdrop-filter: blur(10px);
+    outline: 1px solid var(--border-color);
+    outline-offset: -1px;
+    pointer-events: all;

    .analysis-card-wrapper {
      width: 100%;
      background: var(--background-color);
      border-radius: 14px;
      padding: 16px;
-
      display: flex;
      flex-direction: column;
      gap: 14px;
@@ -67,19 +68,18 @@

        .progress-bar {
          position: relative;
-                // width: 36px;
          width: 100%;
          height: 4px;
          border-radius: 13px;
          overflow: hidden;
-                background: #FBEBD7;
+          background: #fbebd7;

          .bar-fill {
            position: absolute;
            height: 100%;
            top: 0;
            left: 0;
-                    background: #FC9D2F;
+            background: #fc9d2f;
            border-radius: 13px;
          }

@@ -114,10 +114,6 @@
        }
      }
    }
-}
-
-
-.throughoutSummary {
    .throughoutSummary-wrapper {
      .process-container {
        display: flex;
@@ -209,15 +205,15 @@
                height: 5px;

                &:nth-child(1) {
-                                background: #F3C64D;
+                  background: #f3c64d;
                }

                &:nth-child(2) {
-                                background: #67B3F4;
+                  background: #67b3f4;
                }

                &:nth-child(3) {
-                                background: #7981F5;
+                  background: #7981f5;
                }
              }
            }
@@ -236,22 +232,19 @@
                /* Align items vertically */
                &:nth-child(1) {
                  .indicator {
-
-                                    background: #F3C64D;
+                    background: #f3c64d;
                  }
                }

                &:nth-child(2) {
                  .indicator {
-
-                                    background: #67B3F4;
+                    background: #67b3f4;
                  }
                }

                &:nth-child(3) {
                  .indicator {
-
-                                    background: #7981F5;
+                    background: #7981f5;
                  }
                }

@@ -265,15 +258,12 @@
                  width: 5px;
                  height: 5px;
                  border-radius: 50%;
-
                }
              }
            }
          }
        }
-
-        }
-
-
+      }
+    }
  }
 }
--- a/app/src/styles/components/button.scss
+++ b/app/src/styles/components/button.scss
@@ -0,0 +1,24 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+.labeled-button-container {
+  @include flex-space-between;
+  padding: 6px 12px;
+
+  button {
+    padding: 2px 32px;
+    border: none;
+    border-radius: #{$border-radius-large};
+    color: var(--text-button-color);
+    background: var(--background-color-button);
+    transition: all 0.2s;
+    cursor: pointer;
+  }
+}
+
+button {
+  border: none;
+  outline: none;
+  background: none;
+  cursor: pointer;
+}
--- a/app/src/styles/components/input.scss
+++ b/app/src/styles/components/input.scss
@@ -639,21 +639,6 @@ input[type="number"] {
  }
 }

-.labeled-button-container {
-  @include flex-space-between;
-  padding: 6px 12px;
-
-  button {
-    padding: 2px 32px;
-    border: none;
-    border-radius: #{$border-radius-large};
-    color: var(--text-button-color);
-    background: var(--background-color-button);
-    transition: all 0.2s;
-    cursor: pointer;
-  }
-}
-
 .value-field-container {
  margin-bottom: 6px;
  padding: 6px 12px;
--- a/app/src/styles/components/tools.scss
+++ b/app/src/styles/components/tools.scss
@@ -15,7 +15,7 @@
  transition: width 0.2s;
  background: var(--background-color);
  backdrop-filter: blur(8px);
-  z-index: #{$z-index-default};
+  z-index: 2;
  outline: 1px solid var(--border-color);
  outline-offset: -1px;

--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@@ -3,8 +3,6 @@

 // Main Container
 .realTime-viz {
-  background: #131313;
-  box-shadow: $box-shadow-medium;
  width: calc(100% - (320px + 270px + 90px));
  height: calc(100% - (250px));
  position: absolute;
@@ -12,8 +10,8 @@
  left: calc(270px + 45px);
  transform: translate(0, -50%);
  border-radius: #{$border-radius-medium};
-  transition: all 0.2s;
-  z-index: #{$z-index-default};
+  z-index: 2;
+  pointer-events: none;

  .realTime-viz-wrapper {
    width: 100%;
@@ -39,10 +37,6 @@
    z-index: 1;
  }

-  .scene-container {
-    overflow: hidden;
-  }
-
  .icon {
    display: flex;
    align-items: center;
@@ -74,6 +68,8 @@
    z-index: 3;
    transform: translate(-50%, -10%);
    transition: transform 0.5s linear;
+    pointer-events: all;
+
    &::-webkit-scrollbar {
      display: none;
    }
@@ -367,6 +363,7 @@
  border-radius: 2px;
  transition: transform 0.3s ease;
  box-shadow: #{$box-shadow-medium};
+  pointer-events: all;

  svg {
    stroke: var(--icon-default-color) !important;
@@ -428,8 +425,6 @@
        stroke: #f65648;
        stroke-width: 1.3;
      }
-
-
    }
  }

@@ -778,17 +773,10 @@
  }
 }

-
-
-
 .panel-content {
  background: var(--background-color);
-
 }

-
-
-
 /* RIGHT */
 .panel-content.right-opening {
  animation: rightExpand 0.5s ease-in-out forwards;
@@ -913,9 +901,6 @@
  }
 }

-
-
-
 // Add button

 .extra-Bs-addopening {
@@ -926,7 +911,6 @@
  animation: slideUp 0.3s ease forwards;
 }

-
@keyframes slideDown {
  from {
    opacity: 0;