refactor: updating outline

app/src/components/layout/scenes/MainScene.tsx

@@ -75,13 +75,13 @@ function MainScene() {
       clearComparisonProduct();
       setIsVersionSaved(false);
     }
-  }, [activeModule])
+  }, [activeModule, clearComparisonProduct, setIsVersionSaved])
 
   useEffect(() => {
     if (versionHistory.length > 0) {
       setSelectedVersion(versionHistory[0])
     }
-  }, [versionHistory])
+  }, [setSelectedVersion, versionHistory])
 
   const handleSelectVersion = (option: string) => {
     const version = versionHistory.find((version) => version.versionName === option);
@@ -140,7 +140,7 @@ function MainScene() {
       {!selectedUser && (
         <>
           <KeyPressListener />
-          {/* {loadingProgress > 0 && <LoadingPage progress={loadingProgress} />} */}
+          {loadingProgress > 0 && <LoadingPage progress={loadingProgress} />}
           {!isPlaying && (
             <>
               {toggleThreeD && !isVersionSaved && <ModuleToggle />}
@@ -155,7 +155,7 @@ function MainScene() {
           )}
           {(isPlaying) &&
             activeModule === "simulation" &&
-            loadingProgress == 0 && <SimulationPlayer />}
+            loadingProgress === 0 && <SimulationPlayer />}
           {(isPlaying) &&
             activeModule !== "simulation" && <ControlsPlayer />}
 
@@ -188,7 +188,7 @@ function MainScene() {
         }
         onDragOver={(event) => event.preventDefault()}
       >
-        {/* <Scene layout="Main Layout" /> */}
+        <Scene layout="Main Layout" />
       </div>
 
       {selectedProduct && selectedVersion && isVersionSaved && !isPlaying && activeModule === "simulation" && (

app/src/components/layout/sidebarLeft/Outline.tsx

@@ -4,54 +4,92 @@ import DropDownList from "../../ui/list/DropDownList";
 import { useSceneContext } from "../../../modules/scene/sceneContext";
 import { isPointInsidePolygon } from "../../../functions/isPointInsidePolygon";
 
+interface AssetData {
+  id: string;
+  name: string;
+  position?: [];
+  rotation?: {};
+}
+
 interface ZoneData {
   id: string;
   name: string;
-  assets: { id: string; name: string; position?: []; rotation?: {} }[];
+  assets: AssetData[];
 }
 
 const Outline: React.FC = () => {
   const [searchValue, setSearchValue] = useState<string>("");
-  const [zoneDataList, setZoneDataList] = useState<ZoneData[]>([]);
-  const [buildingsList, setBuildingsList] = useState<{ id: string; name: string }[]>([]);
-  const [isLayersOpen, setIsLayersOpen] = useState(true);
-  const [isBuildingsOpen, setIsBuildingsOpen] = useState(false);
-  const [isZonesOpen, setIsZonesOpen] = useState(false);
+  const [sceneAssetsDataList, setSceneAssetsDataList] = useState<
+    ZoneData[] | AssetData[]
+  >([]);
+  // const [buildingsList, setBuildingsList] = useState<{ id: string; name: string }[]>([]);
+  // const [isLayersOpen, setIsLayersOpen] = useState(true);
+  // const [isBuildingsOpen, setIsBuildingsOpen] = useState(false);
+  const [isZonesOpen, setIsZonesOpen] = useState(true);
   const { assetStore, zoneStore } = useSceneContext();
   const { assets } = assetStore();
   const { zones } = zoneStore();
 
-
   useEffect(() => {
-    const updatedZoneList: ZoneData[] = zones?.map((zone: any) => {
-      const polygon2D = zone.points.map((p: any) => [p.position[0], p.position[2]]);
-      const assetsInZone = assets.filter((item: any) => {
-        const [x, , z] = item.position;
-        return isPointInsidePolygon([x, z], polygon2D as [number, number][]);
-      })
-        .map((item: any) => ({
-          id: item.modelUuid,
-          name: item.modelName,
-          position: item.position,
-          rotation: item.rotation,
-        }));
+    const assignedAssets = new Set<string>();
 
-      
-      return {
-        id: zone.zoneUuid,
-        name: zone.zoneName,
-        assets: assetsInZone,
-      };
-    });
+    const updatedZoneList: ZoneData[] =
+      zones?.map((zone: any) => {
+        const polygon2D = zone.points.map((p: any) => [
+          p.position[0],
+          p.position[2],
+        ]);
+        const assetsInZone = assets
+          .filter((item: any) => {
+            const [x, , z] = item.position;
+            const inside = isPointInsidePolygon(
+              [x, z],
+              polygon2D as [number, number][]
+            );
+            if (inside) assignedAssets.add(item.modelUuid);
+            return inside;
+          })
+          .map((item: any) => ({
+            id: item.modelUuid,
+            name: item.modelName,
+            position: item.position,
+            rotation: item.rotation,
+          }));
 
-    setZoneDataList(updatedZoneList);
+        return {
+          id: zone.zoneUuid,
+          name: zone.zoneName,
+          assets: assetsInZone,
+        };
+      }) ?? [];
+
+    // Collect unassigned assets
+    const unassignedAssets = assets
+      .filter((item: any) => !assignedAssets.has(item.modelUuid))
+      .map((item: any) => ({
+        id: item.modelUuid,
+        name: item.modelName,
+        position: item.position,
+        rotation: item.rotation,
+      }));
+
+    // Add as a separate "zone"
+    if (unassignedAssets.length > 0) {
+      updatedZoneList.push({
+        id: "unassigned-zone",
+        name: "Unassigned",
+        assets: unassignedAssets,
+      });
+    }
+
+    setSceneAssetsDataList(updatedZoneList);
   }, [zones, assets]);
 
   const handleSearchChange = (value: string) => {
     setSearchValue(value);
   };
 
-  const dropdownItems = [{ id: "1", name: "Ground Floor" }];
+  // const dropdownItems = [{ id: "1", name: "Ground Floor" }];
 
   return (
     <div className="outline-container">
@@ -63,7 +101,7 @@ const Outline: React.FC = () => {
         </div>
       ) : (
         <div className="outline-content-container">
-          <section className="outline-section">
+          {/* <section className="outline-section">
             <DropDownList
               value="Layers"
               items={dropdownItems}
@@ -73,19 +111,19 @@ const Outline: React.FC = () => {
               showFocusIcon={true}
               remove
             />
-          </section>
+          </section> */}
           <section className="outline-section overflow">
-            <DropDownList
+            {/* <DropDownList
               value="Buildings"
               items={buildingsList}
               isOpen={isBuildingsOpen}
               onToggle={() => setIsBuildingsOpen((prev) => !prev)}
               showKebabMenu={false}
               showAddIcon={false}
-            />
+            /> */}
             <DropDownList
               value="Zones"
-              items={zoneDataList}
+              items={sceneAssetsDataList}
               isOpen={isZonesOpen}
               onToggle={() => setIsZonesOpen((prev) => !prev)}
               showKebabMenu={false}

app/src/components/layout/sidebarRight/resourceManagement/hrm/assetManagement/AssetManagement.tsx

@@ -1,9 +1,9 @@
-import React, { useState } from 'react'
-import NavigateCatagory from '../../NavigateCatagory'
+import { useState } from 'react'
+// import NavigateCatagory from '../../NavigateCatagory'
 import { EyeIcon, ForkLiftIcon, KebabIcon, LocationPinIcon, RightHalfFillCircleIcon } from '../../../../../icons/ExportCommonIcons';
 import assetImage from "../../../../../../assets/image/asset-image.png"
 const AssetManagement = () => {
-    const [selectedCategory, setSelectedCategory] = useState("All Assets");
+    // const [selectedCategory, setSelectedCategory] = useState("All Assets");
     const [expandedAssetId, setExpandedAssetId] = useState<string | null>(null);
 
     const dummyAssets = [
@@ -56,7 +56,7 @@ const AssetManagement = () => {
 
             <div className='assetManagement-container assetManagement-wrapper'>
                 {dummyAssets.map((asset, index) => (
-                    <div className={`assetManagement-card-wrapper ${expandedAssetId === asset.id ? "openViewMore" : ""}`}>
+                    <div className={`assetManagement-card-wrapper ${expandedAssetId === asset.id ? "openViewMore" : ""}`} key={index}>
                         <header>
                             <div className="header-wrapper">