refactor: Clean up code by removing unused imports, enhancing component props, and improving styles for better maintainability

app/src/modules/visualization/widgets/panel/Panel.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 
 import { arrayMove } from "@dnd-kit/sortable";
-import { useAsset3dWidget, useSocketStore } from "../../../../store/builder/store";
+import { useSocketStore } from "../../../../store/builder/store";
 import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
 import { useWidgetStore } from "../../../../store/useWidgetStore";
 import { DraggableWidget } from "../2d/DraggableWidget";
@@ -47,7 +47,7 @@ interface PanelProps {
 }
 
 const generateUniqueId = () =>
-  `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
 
 const Panel: React.FC<PanelProps> = ({
   selectedZone,
@@ -56,7 +56,6 @@ const Panel: React.FC<PanelProps> = ({
   setZonesData,
   waitingPanels,
 }) => {
-  const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
   const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({});
   const [panelDimensions, setPanelDimensions] = useState<{
     [side in Side]?: { width: number; height: number };
@@ -183,7 +182,7 @@ const Panel: React.FC<PanelProps> = ({
 
   // Add widget to panel
   const addWidgetToPanel = async (asset: any, panel: Side) => {
-    const email = localStorage.getItem("email") || "";
+    const email = localStorage.getItem("email") ?? "";
     const organization = email?.split("@")[1]?.split(".")[0];
 
     const newWidget = {
@@ -285,7 +284,7 @@ const Panel: React.FC<PanelProps> = ({
       {selectedZone.activeSides.map((side) => (
         <div
           key={side}
-          id="panel-wrapper"
+          id={`panel-wrapper-${side}`}
           className={`panel ${side}-panel absolute ${
             hiddenPanels[selectedZone.zoneId]?.includes(side) ? "hidePanel" : ""
           }`}
@@ -301,14 +300,14 @@ const Panel: React.FC<PanelProps> = ({
           }}
         >
           <div
-            className={`panel-content
-  ${waitingPanels === side ? `${side}-closing` : ""}
-  ${
-    !hiddenPanels[selectedZone.zoneId]?.includes(side) && waitingPanels !== side
-      ? `${side}-opening`
-      : ""
-  }
-  ${isPlaying ? "fullScreen" : ""}`}
+            className={`panel-content ${
+              waitingPanels === side ? `${side}-closing` : ""
+            }${
+              !hiddenPanels[selectedZone.zoneId]?.includes(side) &&
+              waitingPanels !== side
+                ? `${side}-opening`
+                : ""
+            } ${isPlaying ? "fullScreen" : ""}`}
             style={{
               pointerEvents:
                 selectedZone.lockedPanels.includes(side) ||