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,15 +57,18 @@ const RenameInput: React.FC<RenameInputProps> = ({ value, onRename }) => {
   return (
     <>
       {isEditing ? (
-        <input
-          ref={inputRef}
-          type="text"
-          value={text}
-          onChange={handleChange}
-          onBlur={handleBlur}
-          onKeyDown={handleKeyDown}
-          className="rename-input"
-        />
+        <>
+          <input
+            ref={inputRef}
+            type="text"
+            value={text}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            onKeyDown={handleKeyDown}
+            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];
@@ -128,10 +142,17 @@ 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">