duplicate zone rename bug resolved

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

@@ -62,19 +62,25 @@ const ZoneProperties: React.FC = () => {
             : zone
         )
       );
-    }else{
+    } else {
       // console.log(response?.message);
     }
   }
   function handleVectorChange(key: "zoneViewPortTarget" | "zoneViewPortPosition", newValue: [number, number, number]) {
     setSelectedZone((prev) => ({ ...prev, [key]: newValue }));
   }
-
+  const checkZoneNameDuplicate = (name: string) => {
+    return zones.some(
+      (zone: any) =>
+        zone.zoneName.trim().toLowerCase() === name.trim().toLowerCase() &&
+        zone.zoneId !== selectedZone.zoneId
+    );
+  };
 
   return (
     <div className="zone-properties-container">
       <div className="header">
-        <RenameInput value={selectedZone.zoneName} onRename={handleZoneNameChange} />
+        <RenameInput value={selectedZone.zoneName} onRename={handleZoneNameChange} checkDuplicate={checkZoneNameDuplicate} />
         <div className="button" onClick={handleEditView}>
           {Edit ? "Cancel" : "Edit"}
         </div>

app/src/components/ui/inputs/RenameInput.tsx

@@ -1,26 +1,42 @@
 import React, { useState, useRef, useEffect } from "react";
 
+// interface RenameInputProps {
+//   value: string;
+//   onRename?: (newText: string) => void;
+// }
+
 interface RenameInputProps {
   value: string;
   onRename?: (newText: string) => void;
+  checkDuplicate?: (name: string) => boolean;
 }
 
-const RenameInput: React.FC<RenameInputProps> = ({ value, onRename }) => {
+const RenameInput: React.FC<RenameInputProps> = ({ value, onRename, checkDuplicate }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [text, setText] = useState(value);
+  const [isDuplicate, setIsDuplicate] = useState(false);
   const inputRef = useRef<HTMLInputElement | null>(null);
+
   useEffect(() => {
-    setText(value); // Ensure state updates when parent value changes
+    setText(value);
   }, [value]);
 
+  useEffect(() => {
+    if (checkDuplicate) {
+      setIsDuplicate(checkDuplicate(text));
+    }
+  }, [text, checkDuplicate]);
+
   const handleDoubleClick = () => {
     setIsEditing(true);
-    setTimeout(() => inputRef.current?.focus(), 0); // Focus the input after rendering
+    setTimeout(() => inputRef.current?.focus(), 0);
   };
 
   const handleBlur = () => {
+  
+    if(isDuplicate) return
     setIsEditing(false);
-    if (onRename) {
+    if (onRename && !isDuplicate) {
       onRename(text);
     }
   };
@@ -30,7 +46,7 @@ const RenameInput: React.FC<RenameInputProps> = ({ value, onRename }) => {
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
+    if (e.key === "Enter" && !isDuplicate) {
       setIsEditing(false);
       if (onRename) {
         onRename(text);
@@ -41,6 +57,7 @@ const RenameInput: React.FC<RenameInputProps> = ({ value, onRename }) => {
   return (
     <>
       {isEditing ? (
+        <>
           <input
             ref={inputRef}
             type="text"
@@ -48,8 +65,10 @@ const RenameInput: React.FC<RenameInputProps> = ({ value, onRename }) => {
             onChange={handleChange}
             onBlur={handleBlur}
             onKeyDown={handleKeyDown}
-          className="rename-input"
+            className={`rename-input ${isDuplicate ? "input-error" : ""}`}
           />
+          {/* {isDuplicate && <div className="error-msg">Name already exists!</div>} */}
+        </>
       ) : (
         <span onDoubleClick={handleDoubleClick} className="input-value">
           {text}
@@ -58,5 +77,4 @@ const RenameInput: React.FC<RenameInputProps> = ({ value, onRename }) => {
     </>
   );
 };
-
+export default RenameInput
-export default RenameInput;

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

@@ -13,7 +13,7 @@ import {
   RmoveIcon,
 } from "../../icons/ExportCommonIcons";
 import { useThree } from "@react-three/fiber";
-import { useFloorItems, useZoneAssetId } from "../../../store/store";
+import { useFloorItems, useZoneAssetId, useZones } from "../../../store/store";
 import { zoneCameraUpdate } from "../../../services/realTimeVisulization/zoneData/zoneCameraUpdation";
 import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi";
 
@@ -40,7 +40,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
   const { activeModule, setActiveModule } = useModuleStore();
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
   const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
-
+  const { zones, setZones } = useZones();
   const { setSubModule } = useSubModuleStore();
   const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
     {}
@@ -100,19 +100,33 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
   function handleAssetClick(asset: Asset) {
     setZoneAssetId(asset)
   }
+
   async function handleZoneNameChange(newName: string) {
-    //zone apiiiiii
     const email = localStorage.getItem("email") || "";
     const organization = email?.split("@")[1]?.split(".")[0];
-    let zonesdata = {
+
+    const isDuplicate = zones.some(
+      (zone: any) =>
+        zone.zoneName.trim().toLowerCase() === newName.trim().toLowerCase() &&
+        zone.zoneId !== selectedZone.zoneId
+    );
+
+    if (isDuplicate) {
+      alert("Zone name already exists. Please choose a different name.");
+      return; // DO NOT update state
+    }
+
+    const zonesdata = {
       zoneId: selectedZone.zoneId,
-      zoneName: newName
+      zoneName: newName,
     };
-    let response = await zoneCameraUpdate(zonesdata, organization);
+
+    const response = await zoneCameraUpdate(zonesdata, organization);
     if (response.message === "updated successfully") {
       setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
     }
   }
+
   async function handleZoneAssetName(newName: string) {
     const email = localStorage.getItem("email") || "";
     const organization = email?.split("@")[1]?.split(".")[0];
@@ -132,6 +146,13 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
     console.log('newName: ', newName);
 
   }
+  const checkZoneNameDuplicate = (name: string) => {
+    return zones.some(
+      (zone: any) =>
+        zone.zoneName.trim().toLowerCase() === name.trim().toLowerCase() &&
+        zone.zoneId !== selectedZone.zoneId
+    );
+  };
 
   return (
     <>
@@ -146,7 +167,12 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                       className="value"
                       onClick={() => handleSelectZone(item.id)}
                     >
-                      <RenameInput value={item.name} onRename={handleZoneNameChange} />
+                      <RenameInput
+                        value={item.name}
+                        onRename={handleZoneNameChange}
+                        checkDuplicate={checkZoneNameDuplicate}
+                      />
+
                     </div>
                   </div>
                   <div className="options-container">

app/src/modules/builder/agv/navMeshCreator.tsx

@@ -19,7 +19,7 @@ function NavMeshCreator({ lines }: NavMeshCreatorProps) {
             <NavMeshDetails lines={lines} setNavMesh={setNavMesh} groupRef={groupRef} />
 
             <group ref={groupRef} visible={false} name="Meshes">
-                <mesh rotation-x={CONSTANTS.planeConfig.rotation} position={CONSTANTS.planeConfig.position3D} name="Plane" receiveShadow>
+                <mesh rotation-x={CONSTANTS.planeConfig.rotation} position={CONSTANTS.planeConfig.position3D} receiveShadow>
                     <planeGeometry args={[300, 300]} />
                     <meshBasicMaterial color={CONSTANTS.planeConfig.color} />
                 </mesh>

app/src/modules/visualization/DisplayZone.tsx

@@ -104,8 +104,8 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
       setShowLeftArrow(isOverflowing && canScrollLeft);
       setShowRightArrow(isOverflowing && canScrollRight);
 
-      console.log('canScrollRight: ', canScrollRight);
+      // console.log('canScrollRight: ', canScrollRight);
-      console.log('isOverflowing: ', isOverflowing);
+      // console.log('isOverflowing: ', isOverflowing);
 
     }
   }, []);

app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx

@@ -520,37 +520,37 @@ const DroppedObjects: React.FC = () => {
       onPointerUp={handlePointerUp}
       className="floating-wrapper"
     >
-      {zone.objects.map((obj, index) => {
+      {zone?.objects?.map((obj, index) => {
         const topPosition =
-          typeof obj.position.top === "number"
+          typeof obj?.position?.top === "number"
-            ? `calc(${obj.position.top}px + ${
+            ? `calc(${obj?.position?.top}px + ${
-                isPlaying && selectedZone.activeSides.includes("top")
+                isPlaying && selectedZone?.activeSides?.includes("top")
                   ? `${heightMultiplier - 55}px`
                   : "0px"
               })`
             : "auto";
 
         const leftPosition =
-          typeof obj.position.left === "number"
+          typeof obj?.position?.left === "number"
-            ? `calc(${obj.position.left}px + ${
+            ? `calc(${obj?.position?.left}px + ${
-                isPlaying && selectedZone.activeSides.includes("left")
+                isPlaying && selectedZone?.activeSides?.includes("left")
                   ? `${widthMultiplier - 150}px`
                   : "0px"
               })`
             : "auto";
 
         const rightPosition =
-          typeof obj.position.right === "number"
+          typeof obj?.position?.right === "number"
-            ? `calc(${obj.position.right}px + ${
+            ? `calc(${obj?.position?.right}px + ${
-                isPlaying && selectedZone.activeSides.includes("right")
+                isPlaying && selectedZone?.activeSides?.includes("right")
                   ? `${widthMultiplier - 150}px`
                   : "0px"
               })`
             : "auto";
         const bottomPosition =
-          typeof obj.position.bottom === "number"
+          typeof obj?.position?.bottom === "number"
-            ? `calc(${obj.position.bottom}px + ${
+            ? `calc(${obj?.position?.bottom}px + ${
-                isPlaying && selectedZone.activeSides.includes("bottom")
+                isPlaying && selectedZone?.activeSides?.includes("bottom")
                   ? `${heightMultiplier - 55}px`
                   : "0px"
               })`

app/src/styles/components/input.scss

@@ -56,6 +56,12 @@ input {
   padding: 0 8px;
 }
 
+.input-error {
+  border: 1px solid #f65648 !important;
+  outline: none !important;
+  color: #f65648;
+}
+
 .toggle-header-container {
   @include flex-center;
   padding: 6px 12px;
@@ -344,7 +350,6 @@ input {
       padding: 10px;
     }
 
-
     .loading {
       position: absolute;
       bottom: 0;
@@ -364,9 +369,7 @@ input {
       left: -50%;
       height: 100%;
       width: 50%;
-      background: linear-gradient(to right,
+      background: linear-gradient(to right, var(--accent-color), transparent);
-          var(--accent-color),
-          transparent);
       animation: loadingAnimation 1.2s linear infinite;
       border-radius: 4px;
     }
@@ -381,8 +384,6 @@ input {
       }
     }
 
-
-
     .dropdown-item {
       display: block;
       padding: 5px 10px;