refactor: clean up code in various components; streamline material properties and improve state management

app/src/components/layout/sidebarRight/Header.tsx

@@ -28,15 +28,13 @@ const Header: React.FC = () => {
             <div className="other-guest">+{guestUsers.length - 3}</div>
           )}
           {guestUsers.slice(0, 3).map((user, index) => (
-            <>
-              <div
-                key={index}
-                className="user-profile"
-                style={{ background: getAvatarColor(index) }}
-              >
-                {user.userName[0]}
-              </div>
-            </>
+            <div
+              key={index}
+              className="user-profile"
+              style={{ background: getAvatarColor(index) }}
+            >
+              {user.userName[0]}
+            </div>
           ))}
         </div>
         <div className="user-profile-container">

app/src/modules/builder/geomentries/roofs/addRoofToScene.ts

@@ -17,7 +17,7 @@ function addRoofToScene(
     };
 
     const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
-    const material = new THREE.MeshStandardMaterial({ color: CONSTANTS.roofConfig.defaultColor, side: THREE.DoubleSide, transparent: true, depthWrite: false });
+    const material = new THREE.MeshStandardMaterial({ color: CONSTANTS.roofConfig.defaultColor, side: THREE.DoubleSide });
     const mesh = new THREE.Mesh(geometry, material);
     mesh.position.y = CONSTANTS.wallConfig.height + floor;
     mesh.castShadow = true;

app/src/modules/builder/geomentries/roofs/hideRoof.ts

@@ -22,8 +22,7 @@ function hideRoof(
                 if (roofChild.material) {
                     const materials = Array.isArray(roofChild.material) ? roofChild.material : [roofChild.material];
                     materials.forEach(material => {
-                        // material.visible = v.dot(u) < 0.25;
-                        material.visible = true;
+                        material.visible = v.dot(u) < 0.25;
                     });
                 }
             }

app/src/modules/collaboration/collabCams.tsx

@@ -20,12 +20,7 @@ const CamModelsGroup = () => {
   const loader = new GLTFLoader();
   const dracoLoader = new DRACOLoader();
   const [cams, setCams] = useState<any[]>([]);
-  const [models, setModels] = useState<
-    Record<
-      string,
-      { targetPosition: THREE.Vector3; targetRotation: THREE.Euler }
-    >
-  >({});
+  const [models, setModels] = useState<Record<string, { targetPosition: THREE.Vector3; targetRotation: THREE.Euler }>>({});
 
   dracoLoader.setDecoderPath("three/examples/jsm/libs/draco/gltf/");
   loader.setDRACOLoader(dracoLoader);
@@ -163,7 +158,6 @@ const CamModelsGroup = () => {
               cam.rotation.z
             );
             newModel.userData = cam.userData;
-            console.log('cam.userData: ', cam.userData);
             setActiveUsers([...activeUsers, cam.userData]);
             return newModel;
           });

app/src/services/factoryBuilder/zones/deleteZoneApi.ts

@@ -15,6 +15,7 @@ export const deleteZonesApi = async (userId: string, organization: string, zoneI
         }
 
         const result = await response.json();
+        console.log('result: ', result);
         return result;
     } catch (error) {
         if (error instanceof Error) {