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 [sceneAssetsDataList, setSceneAssetsDataList] = useState<
-  const [buildingsList, setBuildingsList] = useState<{ id: string; name: string }[]>([]);
+    ZoneData[] | AssetData[]
-  const [isLayersOpen, setIsLayersOpen] = useState(true);
+  >([]);
-  const [isBuildingsOpen, setIsBuildingsOpen] = useState(false);
+  // const [buildingsList, setBuildingsList] = useState<{ id: string; name: string }[]>([]);
-  const [isZonesOpen, setIsZonesOpen] = useState(false);
+  // 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 assignedAssets = new Set<string>();
-      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 updatedZoneList: ZoneData[] =
-      return {
+      zones?.map((zone: any) => {
-        id: zone.zoneUuid,
+        const polygon2D = zone.points.map((p: any) => [
-        name: zone.zoneName,
+          p.position[0],
-        assets: assetsInZone,
+          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 { useState } from 'react'
-import NavigateCatagory from '../../NavigateCatagory'
+// 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">
 

app/src/components/ui/list/List.tsx

@@ -12,9 +12,7 @@ import {
   LockIcon,
   RemoveIcon,
 } from "../../icons/ExportCommonIcons";
-import {
+import { useZoneAssetId } from "../../../store/builder/store";
-  useZoneAssetId,
-} from "../../../store/builder/store";
 import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation";
 import { setAssetsApi } from "../../../services/factoryBuilder/asset/floorAsset/setAssetsApi";
 import { useParams } from "react-router-dom";
@@ -47,7 +45,9 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
   const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
 
   const { setSubModule } = useSubModuleStore();
-  const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>({});
+  const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
+    {}
+  );
   const { projectId } = useParams();
   const { assetStore } = useSceneContext();
   const { setName } = assetStore();
@@ -55,7 +55,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
   const { selectedVersionStore } = useVersionContext();
   const { selectedVersion } = selectedVersionStore();
   const { zoneStore } = useSceneContext();
-  const { zones, setZoneName } = zoneStore()
+  const { zones, setZoneName } = zoneStore();
 
   useEffect(() => {
     useSelectedZoneStore.getState().setSelectedZone({
@@ -78,14 +78,24 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
   };
 
   async function handleSelectZone(id: string) {
+    
     try {
-      if (selectedZone?.zoneUuid === id) {
+      if (selectedZone?.zoneUuid === id || id === 'unassigned-zone') {
         return;
       }
 
       setSubModule("zoneProperties");
 
-      let response = await getZoneData(id, organization, projectId, selectedVersion?.versionId || "");
+      let response = await getZoneData(
+        id,
+        organization,
+        projectId,
+        selectedVersion?.versionId || ""
+      );
+      console.log("response: ", response?.zoneName);
+
+      if (!response) return;
+
       setSelectedZone({
         zoneName: response?.zoneName,
         activeSides: response?.activeSides ?? [],
@@ -121,10 +131,15 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
       zoneUuid: selectedZone.zoneUuid,
       zoneName: newName,
     };
-    const response = await zoneCameraUpdate(zonesdata, organization, projectId, selectedVersion?.versionId || "");
+    const response = await zoneCameraUpdate(
+      zonesdata,
+      organization,
+      projectId,
+      selectedVersion?.versionId || ""
+    );
     if (response.message === "zone updated") {
       setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
-      setZoneName(selectedZone.zoneUuid, newName)
+      setZoneName(selectedZone.zoneUuid, newName);
       // setZones((prevZones: any[]) =>
       //   prevZones.map((zone) =>
       //     zone.zoneUuid === selectedZone.zoneUuid
@@ -140,7 +155,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
       let response = await setAssetsApi({
         modelUuid: zoneAssetId.id,
         modelName: newName,
-        projectId
+        projectId,
       });
       // console.log("response: ", response);
 
@@ -159,11 +174,15 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
     let drag = false;
     let isLeftMouseDown = false;
 
-    const contextClassNames = ["list-wrapper", "zone-properties-container", "list-container"];
+    const contextClassNames = [
+      "list-wrapper",
+      "zone-properties-container",
+      "list-container",
+    ];
 
     const isOutsideClick = (target: EventTarget | null) => {
       if (!(target instanceof HTMLElement)) return true;
-      return !contextClassNames.some(className =>
+      return !contextClassNames.some((className) =>
         target.closest(`.${className}`)
       );
     };
@@ -189,38 +208,37 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
         if (isOutsideClick(evt.target)) {
           // Clear selected zone
           setSelectedZone({
-            zoneUuid: '',
+            zoneUuid: "",
-            zoneName: '',
+            zoneName: "",
             activeSides: [],
             panelOrder: [],
             lockedPanels: [],
             widgets: [],
             zoneViewPortTarget: [],
-            zoneViewPortPosition: []
+            zoneViewPortPosition: [],
           });
           setZoneAssetId({
-            id: '',
+            id: "",
-            name: '',
+            name: "",
           });
-          setSubModule("properties")
+          setSubModule("properties");
         }
       }
     };
 
-    if (selectedZone.zoneName! === '' && activeModule === 'Builder') {
+    if (selectedZone.zoneName! === "" && activeModule === "Builder") {
-      document.addEventListener('mousedown', onMouseDown);
+      document.addEventListener("mousedown", onMouseDown);
-      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener("mousemove", onMouseMove);
-      document.addEventListener('mouseup', onMouseUp);
+      document.addEventListener("mouseup", onMouseUp);
     }
 
     return () => {
-      document.removeEventListener('mousedown', onMouseDown);
+      document.removeEventListener("mousedown", onMouseDown);
-      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener("mousemove", onMouseMove);
-      document.removeEventListener('mouseup', onMouseUp);
+      document.removeEventListener("mouseup", onMouseUp);
     };
   }, [selectedZone, activeModule]);
 
-
   return (
     <>
       {items?.length > 0 ? (
@@ -234,7 +252,11 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                   toggleZoneExpansion(item.id);
                 }}
               >
-                <div className={`list-item ${selectedZone.zoneUuid === item.id ? "active" : ""}`}>
+                <div
+                  className={`list-item ${
+                    selectedZone.zoneUuid === item.id ? "active" : ""
+                  }`}
+                >
                   <div className="zone-header">
                     <button className="value" id="zone-name">
                       <RenameInput
@@ -276,7 +298,9 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                     {item.assets.map((asset) => (
                       <li
                         key={`asset-${asset.id}`}
-                        className={`list-container asset-item ${zoneAssetId?.id === asset.id ? "active" : ""}`}
+                        className={`list-container asset-item ${
+                          zoneAssetId?.id === asset.id ? "active" : ""
+                        }`}
                       >
                         <div className="list-item">
                           <button

app/src/pages/Project.tsx

@@ -4,7 +4,6 @@ import {
   useSocketStore,
   useOrganization,
   useUserName,
-  useSaveVersion,
   useProjectName,
   useActiveTool,
 } from "../store/builder/store";
@@ -33,7 +32,7 @@ const Project: React.FC = () => {
   const { setUserName } = useUserName();
   const { setOrganization } = useOrganization();
   const { projectId } = useParams();
-  const { projectName, setProjectName } = useProjectName();
+  const { setProjectName } = useProjectName();
   const { userId, email, organization, userName } = getUserData();
   const { selectedUser } = useSelectedUserStore();
   const { isLogListVisible } = useLogger();