Refactor RealTimeVisualization component and handle widget drop functionality

- Commented out the handleDrop function in RealTimeVisualization.tsx and moved its logic to a new utility function createHandleDrop for better separation of concerns.
- Updated Project.tsx to utilize the new createHandleDrop function, improving readability and maintainability.
- Enhanced styling for the scene container and real-time visualization components to improve layout and responsiveness.
- Removed unnecessary styles and consolidated button and input styles for consistency.
- Cleaned up unused imports and variables in various files to streamline the codebase.

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,38 +55,67 @@ 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> */}
-      <KeyPressListener />
-      {loadingProgress > 0 && <LoadingPage progress={loadingProgress} />}
-      {!isPlaying && (
+      {!selectedUser && (
         <>
-          {toggleThreeD && <ModuleToggle />}
-          <SideBarLeft />
-          <SideBarRight />
+          <KeyPressListener />
+          {loadingProgress > 0 && <LoadingPage progress={loadingProgress} />}
+          {!isPlaying && (
+            <>
+              {toggleThreeD && <ModuleToggle />}
+              <SideBarLeft />
+              <SideBarRight />
+            </>
+          )}
+          <RealTimeVisulization />
+          {activeModule === "market" && <MarketPlace />}
+          {activeModule !== "market" && <Tools />}
+          {isPlaying && activeModule === "simulation" && <SimulationPlayer />}
         </>
       )}
-      {/* <RenderOverlay>
-        <MenuBar setOpenMenu={setOpenMenu} />
-      </RenderOverlay> */}
-      {activeModule === "market" && <MarketPlace />}
-      <RealTimeVisulization />
-      {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>
   );