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/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);
+    }
+};