From 579e32e62351b7304d518d75b5f9bdae91ca5ed8 Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Wed, 26 Mar 2025 12:22:04 +0530
Subject: [PATCH] zone properties updated

---
 .../sidebarRight/customInput/Vector3Input.tsx |  3 ++
 .../properties/ZoneProperties.tsx             | 30 ++++++++++++++++---
 app/src/styles/layout/sidebar.scss            |  4 ++-
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx b/app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx
index 9a6389a..05b7041 100644
--- a/app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx
+++ b/app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx
@@ -30,6 +30,7 @@ const Vector3Input: React.FC<PositionInputProps> = ({
             type={type}
             onChange={(e) => onChange(e.target.value)}
             placeholder={placeholder}
+            disabled
           />
         </div>
         <div className="input-container">
@@ -39,6 +40,7 @@ const Vector3Input: React.FC<PositionInputProps> = ({
             type={type}
             onChange={(e) => onChange(e.target.value)}
             placeholder={placeholder}
+            disabled
             min={0}
           />
         </div>
@@ -49,6 +51,7 @@ const Vector3Input: React.FC<PositionInputProps> = ({
             type={type}
             onChange={(e) => onChange(e.target.value)}
             placeholder={placeholder}
+            disabled
           />
         </div>
       </div>
diff --git a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
index 3428b48..65dd55f 100644
--- a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
@@ -1,15 +1,37 @@
-import React from "react";
+import React, { useState } from "react";
 import RenameInput from "../../../ui/inputs/RenameInput";
 import Vector3Input from "../customInput/Vector3Input";
 
-const ZoneProperties = () => {
+const ZoneProperties: React.FC = () => {
+  const [Edit, setEdit] = useState(false);
+
+  function handleSetView() {
+    setEdit(false);
+  }
+
+  function handleEditView() {
+    if (Edit) {
+      setEdit(false);
+    } else {
+      setEdit(true);
+    }
+  }
+
   return (
     <div className="zone-properties-container">
       <div className="header">
         <RenameInput value="Selected Zone Name" />
+        <div className="button" onClick={handleEditView}>
+          {Edit ? "Cancel" : "Edit"}
+        </div>
       </div>
-      <Vector3Input onChange={()=>{}} header="Target"/>
-      <Vector3Input onChange={()=>{}} header="Position"/>
+      <Vector3Input onChange={() => {}} header="Viewport Target" />
+      <Vector3Input onChange={() => {}} header="Viewport Position" />
+      {Edit && (
+        <div className="button-save" onClick={handleSetView}>
+          Set View
+        </div>
+      )}
     </div>
   );
 };
diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss
index eba4ba9..63498bb 100644
--- a/app/src/styles/layout/sidebar.scss
+++ b/app/src/styles/layout/sidebar.scss
@@ -733,6 +733,7 @@
   .asset-properties-container,
   .zone-properties-container {
     .header {
+      @include flex-space-between;
       padding: 8px 12px;
       border-top: 1px solid var(--highlight-accent-color);
       border-bottom: 1px solid var(--highlight-accent-color);
@@ -758,7 +759,8 @@
       }
     }
     .optimize-button,
-    .generate-report-button {
+    .generate-report-button,
+    .button-save {
       @include flex-center;
       background-color: var(--accent-color);
       color: var(--primary-color);