zone camera and target updation added

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

@@ -37,9 +37,8 @@ const SideBarRight: React.FC = () => {
         <div className="sidebar-actions-container">
           {/* {activeModule === "builder" && ( */}
           <div
-            className={`sidebar-action-list ${
-              subModule === "properties" ? "active" : ""
-            }`}
+            className={`sidebar-action-list ${subModule === "properties" ? "active" : ""
+              }`}
             onClick={() => setSubModule("properties")}
           >
             <PropertiesIcon isActive={subModule === "properties"} />
@@ -84,6 +83,17 @@ const SideBarRight: React.FC = () => {
             </div>
           </div>
         )}
+      {toggleUI &&
+        subModule === "zoneProperties" &&
+        activeModule === "builder" && (
+          <div className="sidebar-right-container">
+            <div className="sidebar-right-content-container">
+              {/* <GlobalProperties /> */}
+              <ZoneProperties />
+              {/* <AsstePropertiies /> */}
+            </div>
+          </div>
+        )}
       {/* simulation */}
 
       {toggleUI && activeModule === "simulation" && (

app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx

@@ -1,62 +1,57 @@
 import React from "react";
 import { EyeDroperIcon } from "../../../icons/ExportCommonIcons";
+// import { useThree } from "@react-three/fiber";
 
 interface PositionInputProps {
-  onChange: (value: string) => void; // Callback for value change
+  onChange: (value: [number, number, number]) => void; // Callback for value change
   header: string;
   placeholder?: string; // Optional placeholder
   type?: string; // Input type (e.g., text, number, email)
+  value: [number, number, number] | null;
+  disabled?: boolean; // To enable/disable editing
 }
 
 const Vector3Input: React.FC<PositionInputProps> = ({
   onChange,
   header,
   placeholder = "Enter value", // Default placeholder
-  type = "number", // Default type
+  type = "string", // Default type
+  value,
+  disabled = false, // Default to disabled
 }) => {
+
+  const handleChange = (index: number, newValue: string) => {
+    if (!value) return;
+    const updatedValue = [...value] as [number, number, number];
+    updatedValue[index] = parseFloat(newValue) || 0;
+    console.log('updatedValue: ', updatedValue);
+    onChange(updatedValue);
+  };
+
+
+
   return (
     <div className="custom-input-container">
       <div className="header">
-        {header}{" "}
-        <div className="eyedrop-button">
-          <EyeDroperIcon isActive={false} />
-        </div>
+        {header}
       </div>
       <div className="inputs-container">
-        <div className="input-container">
-          <div className="custom-input-label">X : </div>
-          <input
-            className="custom-input-field"
-            type={type}
-            onChange={(e) => onChange(e.target.value)}
-            placeholder={placeholder}
-            disabled
-          />
-        </div>
-        <div className="input-container">
-          <div className="custom-input-label">Y : </div>
-          <input
-            className="custom-input-field"
-            type={type}
-            onChange={(e) => onChange(e.target.value)}
-            placeholder={placeholder}
-            disabled
-            min={0}
-          />
-        </div>
-        <div className="input-container">
-          <div className="custom-input-label">Z : </div>
-          <input
-            className="custom-input-field"
-            type={type}
-            onChange={(e) => onChange(e.target.value)}
-            placeholder={placeholder}
-            disabled
-          />
-        </div>
+        {["X", "Y", "Z"].map((axis, i) => (
+          <div className="input-container" key={axis}>
+            <div className="custom-input-label">{axis}:</div>
+            <input
+              className="custom-input-field"
+              type={type}
+              value={value?.[i] !== undefined ? value[i].toFixed(2) : ""}
+              // onChange={(e) => handleChange(i, e.target.value)}
+              placeholder={placeholder}
+              disabled={disabled}
+            />
+          </div>
+        ))}
       </div>
     </div>
   );
 };
 
-export default Vector3Input;
+export default Vector3Input;

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

@@ -2,37 +2,64 @@ 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";
 
 const ZoneProperties: React.FC = () => {
-  const [Edit, setEdit] = useState(false);
+  const { Edit, setEdit } = useEditPosition();
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
+  const { zonePosition, setZonePosition } = usezonePosition();
+  const { zoneTarget, setZoneTarget } = usezoneTarget();
+
+  useEffect(() => {
+    setZonePosition(selectedZone.zoneViewPortPosition)
+    setZoneTarget(selectedZone.zoneViewPortTarget)
+  }, [selectedZone?.zoneViewPortPosition, selectedZone?.zoneViewPortTarget])
 
   function handleSetView() {
+    console.log("setApi");
+
+    console.log('zoneTarget: ', zoneTarget);
+    console.log('zonePosition: ', zonePosition);
     setEdit(false);
   }
 
   function handleEditView() {
-    if (Edit) {
-      setEdit(false);
-    } else {
-      setEdit(true);
-    }
+    setEdit(!Edit);  // This will toggle the `Edit` state correctly
   }
-  useEffect(() => {
 
-    console.log(' selectedZone.zoneName: ', selectedZone.zoneName);
-  }, [selectedZone])
+  function handleZoneNameChange(newName: string) {
+    setSelectedZone((prev) => ({ ...prev, zoneName: newName }));
+  }
+
+  function handleVectorChange(key: "zoneViewPortTarget" | "zoneViewPortPosition", newValue: [number, number, number]) {
+    setSelectedZone((prev) => ({ ...prev, [key]: newValue }));
+  }
+
+  useEffect(() => {
+    console.log("Updated selectedZone: ", selectedZone);
+  }, [selectedZone]);
 
   return (
     <div className="zone-properties-container">
       <div className="header">
-        <RenameInput value={selectedZone.zoneName ? selectedZone.zoneName : ""} />
+        <RenameInput value={selectedZone.zoneName} onRename={handleZoneNameChange} />
         <div className="button" onClick={handleEditView}>
           {Edit ? "Cancel" : "Edit"}
         </div>
       </div>
-      <Vector3Input onChange={() => { }} header="Viewport Target" />
-      <Vector3Input onChange={() => { }} header="Viewport Position" />
+      <Vector3Input
+        onChange={(value) => handleVectorChange("zoneViewPortTarget", value)}
+        header="Viewport Target"
+        value={zoneTarget as [number, number, number]}
+        disabled={!Edit}
+      />
+      <Vector3Input
+        onChange={(value) => handleVectorChange("zoneViewPortPosition", value)}
+        header="Viewport Position"
+        value={zonePosition as [number, number, number]}
+        disabled={!Edit}
+      />
+
       {Edit && (
         <div className="button-save" onClick={handleSetView}>
           Set View
@@ -43,3 +70,4 @@ const ZoneProperties: React.FC = () => {
 };
 
 export default ZoneProperties;
+