refactor: update component structure and enhance list functionality with new asset and zone handling

app/src/functions/outlineHelpers/useZoneAssetHandlers.ts

@@ -0,0 +1,111 @@
+import { useCallback } from "react";
+import { useParams } from "react-router-dom";
+import { getUserData } from "../getUserData";
+import { useVersionContext } from "../../modules/builder/version/versionContext";
+import { getZoneData } from "../../services/visulization/zone/getZones";
+import { zoneCameraUpdate } from "../../services/visulization/zone/zoneCameraUpdation";
+import { setAssetsApi } from "../../services/factoryBuilder/asset/floorAsset/setAssetsApi";
+import { useSelectedZoneStore } from "../../store/visualization/useZoneStore";
+import { useSubModuleStore } from "../../store/useModuleStore";
+import { useSceneContext } from "../../modules/scene/sceneContext";
+import { useZoneAssetId } from "../../store/builder/store";
+
+export const useZoneAssetHandlers = () => {
+  const { projectId } = useParams();
+  const { organization } = getUserData();
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
+
+  const { selectedZone, setSelectedZone } = useSelectedZoneStore();
+  const { setSubModule } = useSubModuleStore();
+  const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
+  const { assetStore, zoneStore } = useSceneContext();
+  const { setName } = assetStore();
+  const { zones, setZoneName } = zoneStore();
+
+  // 🔹 Zone selection
+  const handleSelectZone = useCallback(
+    async (id: string) => {
+      if (selectedZone?.zoneUuid === id || id === "unassigned-zone") return;
+      setSubModule("zoneProperties");
+
+      const response = await getZoneData(
+        id,
+        organization,
+        projectId,
+        selectedVersion?.versionId || ""
+      );
+      if (!response) return;
+
+      setSelectedZone({
+        zoneName: response.zoneName,
+        activeSides: response.activeSides ?? [],
+        panelOrder: response.panelOrder ?? [],
+        lockedPanels: response.lockedPanels ?? [],
+        widgets: response.widgets ?? [],
+        zoneUuid: response.zoneUuid,
+        zoneViewPortTarget: response.viewPortTarget ?? [],
+        zoneViewPortPosition: response.viewPortPosition ?? [],
+      });
+    },
+    [organization, projectId, selectedVersion, selectedZone?.zoneUuid, setSelectedZone, setSubModule]
+  );
+
+  // 🔹 Zone rename
+  const handleZoneNameChange = useCallback(
+    async (newName: string) => {
+      const isDuplicate = zones.some(
+        (zone: any) =>
+          zone.zoneName?.trim().toLowerCase() === newName.trim().toLowerCase() &&
+          zone.zoneUuid !== selectedZone.zoneUuid
+      );
+      if (isDuplicate) {
+        alert("Zone name already exists. Please choose a different name.");
+        return;
+      }
+
+      const response = await zoneCameraUpdate(
+        { zoneUuid: selectedZone.zoneUuid, zoneName: newName },
+        organization,
+        projectId,
+        selectedVersion?.versionId || ""
+      );
+
+      if (response.message === "zone updated") {
+        setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
+        setZoneName(selectedZone.zoneUuid, newName);
+      }
+    },
+    [organization, projectId, selectedVersion, selectedZone, setSelectedZone, setZoneName, zones]
+  );
+
+  // 🔹 Asset selection
+  const handleAssetClick = useCallback(
+    (asset: ListAsset) => {
+      setZoneAssetId(asset);
+    },
+    [setZoneAssetId]
+  );
+
+  // 🔹 Asset rename
+  const handleZoneAssetName = useCallback(
+    async (newName: string) => {
+      if (!zoneAssetId?.id) return;
+      const response = await setAssetsApi({
+        modelUuid: zoneAssetId.id,
+        modelName: newName,
+        projectId,
+        versionId: selectedVersion?.versionId || "",
+      });
+      setName(zoneAssetId.id, response.modelName);
+    },
+    [projectId, selectedVersion, setName, zoneAssetId]
+  );
+
+  return {
+    handleSelectZone,
+    handleZoneNameChange,
+    handleAssetClick,
+    handleZoneAssetName,
+  };
+};

app/src/functions/outlineHelpers/useZonesExpansion.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState, useCallback } from "react";
+
+export const useZonesExpansion = (zones: any[]) => {
+  const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>({});
+
+  useEffect(() => {
+    const expanded: Record<string, boolean> = { "unassigned-zone": true };
+    zones.forEach((zone) => {
+      expanded[zone.zoneUuid] = true;
+    });
+    setExpandedZones(expanded);
+  }, [zones, zones.length]);
+
+  const toggleZoneExpansion = useCallback((zoneUuid: string) => {
+    setExpandedZones((prev) => ({
+      ...prev,
+      [zoneUuid]: !prev[zoneUuid],
+    }));
+  }, []);
+
+  return { expandedZones, toggleZoneExpansion };
+};