refactor: updating outline

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}