added api to fetch data

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

@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from "react";
 import Header from "./Header";
-import useModuleStore, { useSubModuleStore } from "../../../store/useModuleStore";
+import useModuleStore, {
+  useSubModuleStore,
+} from "../../../store/useModuleStore";
 import {
   AnalysisIcon,
   MechanicsIcon,
@@ -15,16 +17,18 @@ import AsstePropertiies from "./properties/AssetProperties";
 import Analysis from "./analysis/Analysis";
 import Simulations from "./simulation/Simulations";
 import { useSelectedActionSphere } from "../../../store/store";
+import ZoneProperties from "./properties/ZoneProperties";
 
 const SideBarRight: React.FC = () => {
   const { activeModule } = useModuleStore();
+  const [activeList] = useState("properties");
+  const { toggleUI } = useToggleStore();
   const { selectedActionSphere } = useSelectedActionSphere();
   const { subModule, setSubModule } = useSubModuleStore();
-  const { toggleUI } = useToggleStore();
-
-  // Reset subModule whenever activeModule changes
+  // Reset activeList whenever activeModule changes
   useEffect(() => {
-    setSubModule("properties");
+    if (activeModule !== "simulation") setSubModule("properties");
+    if (activeModule === "simulation") setSubModule("mechanics");
   }, [activeModule]);
 
   return (
@@ -32,35 +36,41 @@ const SideBarRight: React.FC = () => {
       <Header />
       {toggleUI && (
         <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"} />
           </div>
+          {/* )} */}
           {activeModule === "simulation" && (
             <>
               <div
-                className={`sidebar-action-list ${subModule === "mechanics" ? "active" : ""
-                  }`}
+                className={`sidebar-action-list ${
+                  subModule === "mechanics" ? "active" : ""
+                }`}
                 onClick={() => setSubModule("mechanics")}
               >
-                <MechanicsIcon isActive={subModule === "mechanics"} />
+                <MechanicsIcon isActive={activeList === "mechanics"} />
               </div>
               <div
-                className={`sidebar-action-list ${subModule === "simulations" ? "active" : ""
-                  }`}
+                className={`sidebar-action-list ${
+                  subModule === "simulations" ? "active" : ""
+                }`}
                 onClick={() => setSubModule("simulations")}
               >
-                <SimulationIcon isActive={subModule === "simulations"} />
+                <SimulationIcon isActive={activeList === "simulations"} />
               </div>
               <div
-                className={`sidebar-action-list ${subModule === "analysis" ? "active" : ""
-                  }`}
+                className={`sidebar-action-list ${
+                  subModule === "analysis" ? "active" : ""
+                }`}
                 onClick={() => setSubModule("analysis")}
               >
-                <AnalysisIcon isActive={subModule === "analysis"} />
+                <AnalysisIcon isActive={activeList === "analysis"} />
               </div>
             </>
           )}
@@ -68,11 +78,12 @@ const SideBarRight: React.FC = () => {
       )}
       {/* process builder */}
       {toggleUI &&
-        subModule === "properties" &&
+        activeList === "properties" &&
         activeModule !== "visualization" && (
           <div className="sidebar-right-container">
             <div className="sidebar-right-content-container">
               <GlobalProperties />
+              {/* <ZoneProperties /> */}
               {/* <AsstePropertiies /> */}
             </div>
           </div>
@@ -82,17 +93,17 @@ const SideBarRight: React.FC = () => {
 
       {toggleUI && activeModule === "simulation" && (
         <>
-          {(subModule === "mechanics" && selectedActionSphere) && (
+          {subModule === "mechanics" && selectedActionSphere && (
             <div className="sidebar-right-container">
               <div className="sidebar-right-content-container">
                 <MachineMechanics />
               </div>
             </div>
           )}
-          {(subModule === "mechanics" && !selectedActionSphere) && (
+          {subModule === "mechanics" && !selectedActionSphere && (
             <div className="sidebar-right-container">
               <div className="sidebar-right-content-container">
-                {/* <MachineMechanics /> */}
+                <MachineMechanics />
               </div>
             </div>
           )}
@@ -103,7 +114,7 @@ const SideBarRight: React.FC = () => {
               </div>
             </div>
           )}
-          {subModule === "simulations" && (
+          {activeList === "simulations" && (
             <div className="sidebar-right-container">
               <div className="sidebar-right-content-container">
                 <Simulations />

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

@@ -0,0 +1,62 @@
+import React from "react";
+import { EyeDroperIcon } from "../../../icons/ExportCommonIcons";
+
+interface PositionInputProps {
+  onChange: (value: string) => void; // Callback for value change
+  header: string;
+  placeholder?: string; // Optional placeholder
+  type?: string; // Input type (e.g., text, number, email)
+}
+
+const Vector3Input: React.FC<PositionInputProps> = ({
+  onChange,
+  header,
+  placeholder = "Enter value", // Default placeholder
+  type = "number", // Default type
+}) => {
+  return (
+    <div className="custom-input-container">
+      <div className="header">
+        {header}{" "}
+        <div className="eyedrop-button">
+          <EyeDroperIcon isActive={false} />
+        </div>
+      </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>
+      </div>
+    </div>
+  );
+};
+
+export default Vector3Input;

app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx

@@ -14,8 +14,8 @@ import EyeDropInput from "../../../ui/inputs/EyeDropInput";
 import { useSelectedActionSphere } from "../../../../store/store";
 
 const MachineMechanics: React.FC = () => {
-  const { selectedActionSphere, setSelectedActionSphere } = useSelectedActionSphere();
-  console.log('selectedActionSphere: ', selectedActionSphere);
+  const { selectedActionSphere } = useSelectedActionSphere();
+  console.log("selectedActionSphere: ", selectedActionSphere);
   const [actionList, setActionList] = useState<string[]>([]);
   const [triggerList, setTriggerList] = useState<string[]>([]);
   const [selectedItem, setSelectedItem] = useState<{
@@ -71,7 +71,9 @@ const MachineMechanics: React.FC = () => {
 
   return (
     <div className="machine-mechanics-container">
-      <div className="machine-mechanics-header">{selectedActionSphere.path.modelName}</div>
+      <div className="machine-mechanics-header">
+        {selectedActionSphere?.path?.modelName || "path name not found"}
+      </div>
       {/* <div className="process-list-container">
         <div className="label">Process:</div>
         <RegularDropDown
@@ -100,11 +102,12 @@ const MachineMechanics: React.FC = () => {
               {actionList.map((action, index) => (
                 <div
                   key={index}
-                  className={`list-item ${selectedItem?.type === "action" &&
+                  className={`list-item ${
+                    selectedItem?.type === "action" &&
                     selectedItem.name === action
-                    ? "active"
-                    : ""
-                    }`}
+                      ? "active"
+                      : ""
+                  }`}
                 >
                   <div
                     className="value"
@@ -146,11 +149,12 @@ const MachineMechanics: React.FC = () => {
               {triggerList.map((trigger, index) => (
                 <div
                   key={index}
-                  className={`list-item ${selectedItem?.type === "trigger" &&
+                  className={`list-item ${
+                    selectedItem?.type === "trigger" &&
                     selectedItem.name === trigger
-                    ? "active"
-                    : ""
-                    }`}
+                      ? "active"
+                      : ""
+                  }`}
                 >
                   <div
                     className="value"
@@ -188,7 +192,7 @@ const MachineMechanics: React.FC = () => {
                 label="Speed"
                 value=""
                 activeOption=".mm"
-                onChange={() => { }}
+                onChange={() => {}}
               />
               <EyeDropInput />
             </>

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

@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import RenameInput from "../../../ui/inputs/RenameInput";
+import Vector3Input from "../customInput/Vector3Input";
+
+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="Viewport Target" />
+      <Vector3Input onChange={() => {}} header="Viewport Position" />
+      {Edit && (
+        <div className="button-save" onClick={handleSetView}>
+          Set View
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ZoneProperties;

app/src/components/layout/sidebarRight/simulation/Simulations.tsx

@@ -28,7 +28,7 @@ const DropList: React.FC<DropListProps> = ({ val }) => {
         }}
       >
         {val.pathName}
-        <div className="arrow-container">
+        <div className={`arrow-container${openDrop ? " active" : ""}`}>
           <ArrowIcon />
         </div>
       </div>
@@ -87,8 +87,9 @@ const Simulations: React.FC = () => {
               {productsList.map((action, index) => (
                 <div
                   key={index}
-                  className={`list-item ${selectedItem === action ? "active" : ""
-                    }`}
+                  className={`list-item ${
+                    selectedItem === action ? "active" : ""
+                  }`}
                 >
                   <div
                     className="value"

app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx

@@ -1,115 +1,115 @@
-import React, { useEffect, useState } from 'react'
-import MultiLevelDropdown from '../../../../ui/inputs/MultiLevelDropDown'
-import { AddIcon } from '../../../../icons/ExportCommonIcons'
-import RegularDropDown from '../../../../ui/inputs/RegularDropDown'
-import useChartStore from '../../../../../store/useChartStore'
-import axios from 'axios'
-
-type Props = {}
-
-const LineGrapInput = (props: Props) => {
-    const [dropDowndata, setDropDownData] = useState({})
-    const [selections, setSelections] = useState<Record<string, { name: string, fields: string }>>({})
-    const [selectedOption, setSelectedOption] = useState('1h')
-    const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
-
-    const handleSelectDuration = (option: string) => {
-        updateDuration(option); // Normalize for key matching
-    };
-
-    useEffect(() => {
-        const fetchZoneData = async () => {
-            try {
-                const response = await axios.get('http://192.168.0.192:5010/getinput');
-                if (response.status === 200) {
-                    console.log('dropdown data:', response.data);
-                    setDropDownData(response.data)
-                } else {
-                    console.log('Unexpected response:', response);
-                }
-            } catch (error) {
-                console.error('There was an error!', error);
-            }
-        };
-        fetchZoneData();
-    }, []);
-
-    useEffect(() => {
-        console.log(selections);
-    }, [selections])
-
-    const handleSelect = (inputKey: string, selectedData: { name: string, fields: string } | null) => {
-        setSelections(prev => {
-            if (selectedData === null) {
-                const newSelections = { ...prev };
-                delete newSelections[inputKey];
-                return newSelections;
-            } else {
-                return {
-                    ...prev,
-                    [inputKey]: selectedData
-                };
-            }
-        });
-    };
-
-    interface Measurement {
-        name: string;
-        fields: string;
-      }
-      
-      interface InputData {
-        [key: string]: Measurement;
-      }
-      
-      const extractMeasurements = (input: InputData): Measurement[] => {
-        return Object.values(input);
-      };
-
-    useEffect(() => {
-        const measurementsData = extractMeasurements(selections);
-        setMeasurements(measurementsData);
-    }, [selections]);
-    
-
-    return (
-        <>
-            <div className="inputs-wrapper">
-                {[...Array(6)].map((_, index) => {
-                    const inputKey = `input${index + 1}`;
-                    return (
-                        <div key={index} className="datas">
-                            <div className="datas__label">Input {index + 1}</div>
-                            <div className="datas__class">
-                                <MultiLevelDropdown
-                                    data={dropDowndata}
-                                    onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
-                                    onUnselect={() => handleSelect(inputKey, null)}
-                                    selectedValue={selections[inputKey]}
-                                />
-                                <div className="icon">
-                                    <AddIcon />
-                                </div>
-                            </div>
-                        </div>
-                    );
-                })}
-            </div>
-            <div>
-                <div className="datas">
-                    <div className="datas__label">duration</div>
-                    <div className="datas__class">
-                    <RegularDropDown
-                        header={duration}
-                        options={["1h", "2h", "12h"]}
-                        onSelect={handleSelectDuration}
-                        search={false}
-                    />
-                    </div>
-                </div>
-            </div>
-        </>
-    )
-}
-
+import React, { useEffect, useState } from 'react'
+import MultiLevelDropdown from '../../../../ui/inputs/MultiLevelDropDown'
+import { AddIcon } from '../../../../icons/ExportCommonIcons'
+import RegularDropDown from '../../../../ui/inputs/RegularDropDown'
+import useChartStore from '../../../../../store/useChartStore'
+import axios from 'axios'
+
+type Props = {}
+
+const LineGrapInput = (props: Props) => {
+    const [dropDowndata, setDropDownData] = useState({})
+    const [selections, setSelections] = useState<Record<string, { name: string, fields: string }>>({})
+    const [selectedOption, setSelectedOption] = useState('1h')
+    const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
+
+    const handleSelectDuration = (option: string) => {
+        updateDuration(option); // Normalize for key matching
+    };
+
+    useEffect(() => {
+        const fetchZoneData = async () => {
+            try {
+                const response = await axios.get('http://192.168.0.192:5010/getinput');
+                if (response.status === 200) {
+                    console.log('dropdown data:', response.data);
+                    setDropDownData(response.data)
+                } else {
+                    console.log('Unexpected response:', response);
+                }
+            } catch (error) {
+                console.error('There was an error!', error);
+            }
+        };
+        fetchZoneData();
+    }, []);
+
+    useEffect(() => {
+        console.log(selections);
+    }, [selections])
+
+    const handleSelect = (inputKey: string, selectedData: { name: string, fields: string } | null) => {
+        setSelections(prev => {
+            if (selectedData === null) {
+                const newSelections = { ...prev };
+                delete newSelections[inputKey];
+                return newSelections;
+            } else {
+                return {
+                    ...prev,
+                    [inputKey]: selectedData
+                };
+            }
+        });
+    };
+
+    interface Measurement {
+        name: string;
+        fields: string;
+      }
+      
+      interface InputData {
+        [key: string]: Measurement;
+      }
+      
+      const extractMeasurements = (input: InputData): Measurement[] => {
+        return Object.values(input);
+      };
+
+    useEffect(() => {
+        const measurementsData = extractMeasurements(selections);
+        setMeasurements(measurementsData);
+    }, [selections]);
+    
+
+    return (
+        <>
+            <div className="inputs-wrapper">
+                {[...Array(6)].map((_, index) => {
+                    const inputKey = `input${index + 1}`;
+                    return (
+                        <div key={index} className="datas">
+                            <div className="datas__label">Input {index + 1}</div>
+                            <div className="datas__class">
+                                <MultiLevelDropdown
+                                    data={dropDowndata}
+                                    onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
+                                    onUnselect={() => handleSelect(inputKey, null)}
+                                    selectedValue={selections[inputKey]}
+                                />
+                                <div className="icon">
+                                    <AddIcon />
+                                </div>
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+            <div>
+                <div className="datas">
+                    <div className="datas__label">duration</div>
+                    <div className="datas__class">
+                    <RegularDropDown
+                        header={duration}
+                        options={["1h", "2h", "12h"]}
+                        onSelect={handleSelectDuration}
+                        search={false}
+                    />
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
 export default LineGrapInput

app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx

@@ -1,77 +1,77 @@
-import React, { useEffect, useState } from 'react'
-import MultiLevelDropdown from '../../../../ui/inputs/MultiLevelDropDown'
-import { AddIcon } from '../../../../icons/ExportCommonIcons'
-import axios from 'axios'
-
-type Props = {}
-
-const PieChartInput = (props: Props) => {
-    const [dropDowndata, setDropDownData] = useState({})
-    const [selections, setSelections] = useState<Record<string, {name: string, fields: string}>>({})
-
-    useEffect(() => {
-        const fetchZoneData = async () => {
-            try {
-                const response = await axios.get('http://192.168.0.192:5010/getinput');
-                if (response.status === 200) {
-                    console.log('dropdown data:', response.data);
-                    setDropDownData(response.data)
-                } else {
-                    console.log('Unexpected response:', response);
-                }
-            } catch (error) {
-                console.error('There was an error!', error);
-            }
-        };
-        fetchZoneData();
-    }, []);
-
-    useEffect(() => {console.log(selections);
-    },[selections])
-
-    const handleSelect = (inputKey: string, selectedData: {name: string, fields: string} | null) => {
-        setSelections(prev => {
-            if (selectedData === null) {
-                const newSelections = {...prev};
-                delete newSelections[inputKey];
-                return newSelections;
-            } else {
-                return {
-                    ...prev,
-                    [inputKey]: selectedData
-                };
-            }
-        });
-    };
-
-    return (
-        <>
-        <div className="inputs-wrapper">
-            {[...Array(3)].map((_, index) => {
-                const inputKey = `input${index+1}`;
-                return (
-                    <div key={index} className="datas">
-                        <div className="datas__label">Input {index+1}</div>
-                        <div className="datas__class">
-                            <MultiLevelDropdown 
-                                data={dropDowndata} 
-                                onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
-                                onUnselect={() => handleSelect(inputKey, null)}
-                                selectedValue={selections[inputKey]}
-                            />
-                            <div className="icon">
-                                <AddIcon />
-                            </div>
-                        </div>
-                    </div>
-                );
-            })}
-        </div>
-        <div>
-            
-        </div>
-        </>
-    )
-}
-
+import React, { useEffect, useState } from 'react'
+import MultiLevelDropdown from '../../../../ui/inputs/MultiLevelDropDown'
+import { AddIcon } from '../../../../icons/ExportCommonIcons'
+import axios from 'axios'
+
+type Props = {}
+
+const PieChartInput = (props: Props) => {
+    const [dropDowndata, setDropDownData] = useState({})
+    const [selections, setSelections] = useState<Record<string, {name: string, fields: string}>>({})
+
+    useEffect(() => {
+        const fetchZoneData = async () => {
+            try {
+                const response = await axios.get('http://192.168.0.192:5010/getinput');
+                if (response.status === 200) {
+                    console.log('dropdown data:', response.data);
+                    setDropDownData(response.data)
+                } else {
+                    console.log('Unexpected response:', response);
+                }
+            } catch (error) {
+                console.error('There was an error!', error);
+            }
+        };
+        fetchZoneData();
+    }, []);
+
+    useEffect(() => {console.log(selections);
+    },[selections])
+
+    const handleSelect = (inputKey: string, selectedData: {name: string, fields: string} | null) => {
+        setSelections(prev => {
+            if (selectedData === null) {
+                const newSelections = {...prev};
+                delete newSelections[inputKey];
+                return newSelections;
+            } else {
+                return {
+                    ...prev,
+                    [inputKey]: selectedData
+                };
+            }
+        });
+    };
+
+    return (
+        <>
+        <div className="inputs-wrapper">
+            {[...Array(3)].map((_, index) => {
+                const inputKey = `input${index+1}`;
+                return (
+                    <div key={index} className="datas">
+                        <div className="datas__label">Input {index+1}</div>
+                        <div className="datas__class">
+                            <MultiLevelDropdown 
+                                data={dropDowndata} 
+                                onSelect={(selectedData) => handleSelect(inputKey, selectedData)}
+                                onUnselect={() => handleSelect(inputKey, null)}
+                                selectedValue={selections[inputKey]}
+                            />
+                            <div className="icon">
+                                <AddIcon />
+                            </div>
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+        <div>
+            
+        </div>
+        </>
+    )
+}
+
 export default PieChartInput