Merge remote-tracking branch 'origin/rtViz' into simulation

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

@@ -45,7 +45,7 @@ const Header: React.FC = () => {
               <div
                 key={index}
                 className="user-profile"
-                style={{ background: getAvatarColor(index) }}
+                style={{ background: getAvatarColor(index, user.userName) }}
               >
                 {user.userName[0]}
               </div>

app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import RenameInput from "../../../ui/inputs/RenameInput";
 import Vector3Input from "../customInput/Vector3Input";
 import { useSelectedZoneStore } from "../../../../store/useZoneStore";
-import { useEditPosition, usezonePosition, usezoneTarget } from "../../../../store/store";
+import { useEditPosition, usezonePosition, useZones, usezoneTarget } from "../../../../store/store";
 import { zoneCameraUpdate } from "../../../../services/realTimeVisulization/zoneData/zoneCameraUpdation";
 
 const ZoneProperties: React.FC = () => {
@@ -10,6 +10,7 @@ const ZoneProperties: React.FC = () => {
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
   const { zonePosition, setZonePosition } = usezonePosition();
   const { zoneTarget, setZoneTarget } = usezoneTarget();
+  const { zones, setZones } = useZones();
 
   useEffect(() => {
     setZonePosition(selectedZone.zoneViewPortPosition)
@@ -31,11 +32,11 @@ const ZoneProperties: React.FC = () => {
       if (response.message === "updated successfully") {
         setEdit(false);
       } else {
-        console.log("Not updated Camera Position and Target");
+        console.log(response);
       }
 
     } catch (error) {
-      console.error("Error in handleSetView:", error);
+
     }
   }
 
@@ -43,17 +44,32 @@ const ZoneProperties: React.FC = () => {
     setEdit(!Edit);  // This will toggle the `Edit` state correctly
   }
 
-  function handleZoneNameChange(newName: string) {
-    setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
+  async function handleZoneNameChange(newName: string) {
+    const email = localStorage.getItem("email") || "";
+    const organization = email?.split("@")[1]?.split(".")[0];
+    const zonesdata = {
+      zoneId: selectedZone.zoneId,
+      zoneName: newName
+    };
+    // Call your API to update the zone
+    let response = await zoneCameraUpdate(zonesdata, organization);
+    console.log('response: ', response);
+    if (response.message === "updated successfully") {
+      setZones((prevZones: any[]) =>
+        prevZones.map((zone) =>
+          zone.zoneId === selectedZone.zoneId
+            ? { ...zone, zoneName: newName }
+            : zone
+        )
+      );
+    }else{
+      console.log(response?.message);
+    }
   }
-
   function handleVectorChange(key: "zoneViewPortTarget" | "zoneViewPortPosition", newValue: [number, number, number]) {
     setSelectedZone((prev) => ({ ...prev, [key]: newValue }));
   }
 
-  useEffect(() => {
-
-  }, [selectedZone]);
 
   return (
     <div className="zone-properties-container">