Merge pull request 'rtViz' (#9) from rtViz into main

Reviewed-on: http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev/pulls/9

app/.gitignore

@@ -1,29 +1,29 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
+
-# dependencies
+# dependencies
-/node_modules
+/node_modules
-# /package-lock.json
+# /package-lock.json
-/.pnp
+/.pnp
-.pnp.js
+.pnp.js
-
+
-# testing
+# testing
-/coverage
+/coverage
-
+
-# production
+# production
-/build
+/build
-
+
-# misc
+# misc
-.DS_Store
+.DS_Store
-.env.local
+.env.local
-.env.development.local
+.env.development.local
-.env.test.local
+.env.test.local
-.env.production.local
+.env.production.local
-
+
-npm-debug.log*
+npm-debug.log*
-yarn-debug.log*
+yarn-debug.log*
-yarn-error.log*
+yarn-error.log*
-
+
-
+
-# remove zip
+# remove zip
-*.zip
+*.zip
-**/temp/
+**/temp/

app/package.json

@@ -67,6 +67,7 @@
   "devDependencies": {
     "@types/node": "^22.9.1",
     "@types/three": "^0.169.0",
+    "axios": "^1.8.4",
     "cypress": "^13.14.2",
     "dotenv": "^16.4.5",
     "husky": "^9.1.6",

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 ${
+            className={`sidebar-action-list ${subModule === "properties" ? "active" : ""
-              subModule === "properties" ? "active" : ""
+              }`}
-            }`}
             onClick={() => setSubModule("properties")}
           >
             <PropertiesIcon isActive={subModule === "properties"} />
@@ -48,25 +47,22 @@ const SideBarRight: React.FC = () => {
           {activeModule === "simulation" && (
             <>
               <div
-                className={`sidebar-action-list ${
+                className={`sidebar-action-list ${subModule === "mechanics" ? "active" : ""
-                  subModule === "mechanics" ? "active" : ""
+                  }`}
-                }`}
                 onClick={() => setSubModule("mechanics")}
               >
                 <MechanicsIcon isActive={subModule === "mechanics"} />
               </div>
               <div
-                className={`sidebar-action-list ${
+                className={`sidebar-action-list ${subModule === "simulations" ? "active" : ""
-                  subModule === "simulations" ? "active" : ""
+                  }`}
-                }`}
                 onClick={() => setSubModule("simulations")}
               >
                 <SimulationIcon isActive={subModule === "simulations"} />
               </div>
               <div
-                className={`sidebar-action-list ${
+                className={`sidebar-action-list ${subModule === "analysis" ? "active" : ""
-                  subModule === "analysis" ? "active" : ""
+                  }`}
-                }`}
                 onClick={() => setSubModule("analysis")}
               >
                 <AnalysisIcon isActive={subModule === "analysis"} />
@@ -87,7 +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}{" "}
+        {header}
-        <div className="eyedrop-button">
-          <EyeDroperIcon isActive={false} />
-        </div>
       </div>
       <div className="inputs-container">
-        <div className="input-container">
+        {["X", "Y", "Z"].map((axis, i) => (
-          <div className="custom-input-label">X : </div>
+          <div className="input-container" key={axis}>
-          <input
+            <div className="custom-input-label">{axis}:</div>
-            className="custom-input-field"
+            <input
-            type={type}
+              className="custom-input-field"
-            onChange={(e) => onChange(e.target.value)}
+              type={type}
-            placeholder={placeholder}
+              value={value?.[i] !== undefined ? value[i].toFixed(2) : ""}
-            disabled
+              // onChange={(e) => handleChange(i, e.target.value)}
-          />
+              placeholder={placeholder}
-        </div>
+              disabled={disabled}
-        <div className="input-container">
+            />
-          <div className="custom-input-label">Y : </div>
+          </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;
+export default Vector3Input;

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

@@ -1,32 +1,65 @@
-import React, { useState } from "react";
+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(!Edit);  // This will toggle the `Edit` state correctly
-      setEdit(false);
-    } else {
-      setEdit(true);
-    }
   }
 
+  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="Selected Zone Name" />
+        <RenameInput value={selectedZone.zoneName} onRename={handleZoneNameChange} />
         <div className="button" onClick={handleEditView}>
           {Edit ? "Cancel" : "Edit"}
         </div>
       </div>
-      <Vector3Input onChange={() => {}} header="Viewport Target" />
+      <Vector3Input
-      <Vector3Input onChange={() => {}} header="Viewport Position" />
+        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
@@ -37,3 +70,4 @@ const ZoneProperties: React.FC = () => {
 };
 
 export default ZoneProperties;
+

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

@@ -0,0 +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>
+        </>
+    )
+}
+
+export default LineGrapInput

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

@@ -0,0 +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>
+        </>
+    )
+}
+
+export default PieChartInput

app/src/components/layout/sidebarRight/visualization/data/Data.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import { AddIcon, RemoveIcon } from "../../../../icons/ExportCommonIcons";
 import MultiLevelDropDown from "../../../../ui/inputs/MultiLevelDropDown";
+import LineGrapInput from "../IotInputCards/LineGrapInput";
 
 // Define the data structure for demonstration purposes
 const DATA_STRUCTURE = {
@@ -123,41 +124,10 @@ const Data = () => {
         <div className="sideBarHeader">{selectedChartId?.title}</div>
       )}
       {/* Render groups dynamically */}
-      {chartDataGroups[selectedChartId?.id]?.map((group) => (
+      {
-        <div key={group.id} className="inputs-wrapper">
+        chartDataGroups[selectedChartId?.id] && <LineGrapInput />
-          {group.children.map((child, index) => (
+      }
-            <div key={child.id} className="datas">
+      
-              <div className="datas__label">Input {index + 1}</div>
-              <div className="datas__class">
-                <MultiLevelDropDown data={DATA_STRUCTURE} />
-                {/* Add Icon */}
-                {group.children.length < 7 && (
-                  <div
-                    className="icon"
-                    onClick={() => handleAddClick(group.id)} // Pass groupId to handleAddClick
-                  >
-                    <AddIcon />
-                  </div>
-                )}
-                {/* Remove Icon */}
-
-                <span
-                  className={`datas__separator ${
-                    group.children.length > 1 ? "" : "disable"
-                  }`}
-                  onClick={(e) => {
-                    e.stopPropagation(); // Prevent event bubbling
-                    removeChild(group.id, child.id); // Pass groupId and childId to removeChild
-                  }}
-                >
-                  <RemoveIcon />
-                </span>
-              </div>
-            </div>
-          ))}
-        </div>
-      ))}
-
       {/* Info Box */}
       <div className="infoBox">
         <span className="infoIcon">i</span>
@@ -173,3 +143,40 @@ const Data = () => {
 };
 
 export default Data;
+
+
+
+// {chartDataGroups[selectedChartId?.id]?.map((group) => (
+//   <div key={group.id} className="inputs-wrapper">
+//     {group.children.map((child, index) => (
+//       <div key={child.id} className="datas">
+//         <div className="datas__label">Input {index + 1}</div>
+//         <div className="datas__class">
+//           <MultiLevelDropDown data={DATA_STRUCTURE} />
+//           {/* Add Icon */}
+//           {group.children.length < 7 && (
+//             <div
+//               className="icon"
+//               onClick={() => handleAddClick(group.id)} // Pass groupId to handleAddClick
+//             >
+//               <AddIcon />
+//             </div>
+//           )}
+//           {/* Remove Icon */}
+
+//           <span
+//             className={`datas__separator ${
+//               group.children.length > 1 ? "" : "disable"
+//             }`}
+//             onClick={(e) => {
+//               e.stopPropagation(); // Prevent event bubbling
+//               removeChild(group.id, child.id); // Pass groupId and childId to removeChild
+//             }}
+//           >
+//             <RemoveIcon />
+//           </span>
+//         </div>
+//       </div>
+//     ))}
+//   </div>
+// ))}

app/src/components/ui/componets/AddButtons.tsx

@@ -4,7 +4,7 @@ import {
   EyeIcon,
   LockIcon,
 } from "../../icons/RealTimeVisulationIcons";
-import { AddIcon } from "../../icons/ExportCommonIcons";
+import { panelData } from "../../../services/realTimeVisulization/zoneData/panel";
 
 // Define the type for `Side`
 type Side = "top" | "bottom" | "left" | "right";
@@ -16,6 +16,9 @@ interface ButtonsProps {
     activeSides: Side[];
     panelOrder: Side[];
     lockedPanels: Side[];
+    zoneId: string;
+    zoneViewPortTarget: number[];
+    zoneViewPortPosition: number[]
     widgets: {
       id: string;
       type: string;
@@ -30,6 +33,9 @@ interface ButtonsProps {
       activeSides: Side[];
       panelOrder: Side[];
       lockedPanels: Side[];
+      zoneId: string;
+      zoneViewPortTarget: number[];
+      zoneViewPortPosition: number[]
       widgets: {
         id: string;
         type: string;
@@ -109,8 +115,8 @@ const AddButtons: React.FC<ButtonsProps> = ({
         panelOrder: newActiveSides,
       };
 
-      // Update the selectedZone state
+      // Delete the selectedZone state
-      console.log("updatedZone: ", updatedZone);
+      console.log('updatedZone: ', updatedZone);
       setSelectedZone(updatedZone);
     } else {
       // If the panel is not active, activate it
@@ -121,6 +127,10 @@ const AddButtons: React.FC<ButtonsProps> = ({
         activeSides: newActiveSides,
         panelOrder: newActiveSides,
       };
+      const email = localStorage.getItem('email')
+      const organization = (email!.split("@")[1]).split(".")[0];
+      // let response = panelData(organization, selectedZone.zoneId, newActiveSides)
+      // console.log('response: ', response);
 
       // Update the selectedZone state
       console.log("updatedZone: ", updatedZone);
@@ -129,77 +139,72 @@ const AddButtons: React.FC<ButtonsProps> = ({
   };
 
   return (
-    <div>
+    <>
-      {(["top", "right", "bottom", "left"] as Side[]).map((side) => (
+      <div>
-        <div key={side} className={`side-button-container ${side}`}>
+        {(["top", "right", "bottom", "left"] as Side[]).map((side) => (
-          <button
+          <div key={side} className={`side-button-container ${side}`}>
-            className={`side-button ${side}${
+            {/* "+" Button */}
-              selectedZone.activeSides.includes(side) ? " active" : ""
+            <button
-            }`}
+              className={`side-button ${side}`}
-            onClick={() => handlePlusButtonClick(side)}
+              onClick={() => handlePlusButtonClick(side)}
-            title={
+              title={
-              selectedZone.activeSides.includes(side)
+                selectedZone.activeSides.includes(side)
-                ? `Remove all items and close ${side} panel`
+                  ? `Remove all items and close ${side} panel`
-                : `Activate ${side} panel`
+                  : `Activate ${side} panel`
-            }
+              }
-          >
+            >
-            <div className="add-icon">
+              +
-              <AddIcon />
+            </button>
-            </div>
-          </button>
 
-          {/* Extra Buttons */}
+            {/* Extra Buttons */}
-          {selectedZone.activeSides.includes(side) && (
+            {selectedZone.activeSides.includes(side) && (
-            <div className="extra-Bs">
+              <div className="extra-Bs">
-              {/* Hide Panel */}
+                {/* Hide Panel */}
-              <div
+                <div
-                className={`icon ${
+                  className={`icon ${hiddenPanels.includes(side) ? "active" : ""
-                  hiddenPanels.includes(side) ? "active" : ""
+                    }`}
-                }`}
+                  title={
-                title={
+                    hiddenPanels.includes(side) ? "Show Panel" : "Hide Panel"
-                  hiddenPanels.includes(side) ? "Show Panel" : "Hide Panel"
-                }
-                onClick={() => toggleVisibility(side)}
-              >
-                <EyeIcon
-                  fill={hiddenPanels.includes(side) ? "white" : "#1D1E21"}
-                />
-              </div>
-
-              {/* Clean Panel */}
-              <div
-                className="icon"
-                title="Clean Panel"
-                onClick={() => cleanPanel(side)}
-              >
-                <CleanPannel />
-              </div>
-
-              {/* Lock/Unlock Panel */}
-              <div
-                className={`icon ${
-                  selectedZone.lockedPanels.includes(side) ? "active" : ""
-                }`}
-                title={
-                  selectedZone.lockedPanels.includes(side)
-                    ? "Unlock Panel"
-                    : "Lock Panel"
-                }
-                onClick={() => toggleLockPanel(side)}
-              >
-                <LockIcon
-                  fill={
-                    selectedZone.lockedPanels.includes(side)
-                      ? "#ffffff"
-                      : "#1D1E21"
                   }
-                />
+                  onClick={() => toggleVisibility(side)}
+                >
+                  <EyeIcon
+                    fill={
+                      hiddenPanels.includes(side)
+                        ? "white"
+                        : "#1D1E21"
+                    }
+                  />
+                </div>
+
+                {/* Clean Panel */}
+                <div
+                  className="icon"
+                  title="Clean Panel"
+                  onClick={() => cleanPanel(side)}
+                >
+                  <CleanPannel />
+                </div>
+
+                {/* Lock/Unlock Panel */}
+                <div
+                  className={`icon ${selectedZone.lockedPanels.includes(side) ? "active" : ""
+                    }`}
+                  title={
+                    selectedZone.lockedPanels.includes(side)
+                      ? "Unlock Panel"
+                      : "Lock Panel"
+                  }
+                  onClick={() => toggleLockPanel(side)}
+                >
+                  <LockIcon fill={selectedZone.lockedPanels.includes(side) ? "#ffffff" : "#1D1E21"} />
+                </div>
               </div>
-            </div>
+            )}
-          )}
+          </div>
-        </div>
+        ))}
-      ))}
+      </div>
-    </div>
+    </>
   );
 };
 

app/src/components/ui/componets/DisplayZone.tsx

@@ -11,6 +11,9 @@ interface DisplayZoneProps {
       panelOrder: Side[];
       lockedPanels: Side[];
       widgets: Widget[];
+      zoneId: string;
+      zoneViewPortTarget: number[];
+      zoneViewPortPosition: number[];
     };
   };
   selectedZone: {
@@ -18,6 +21,9 @@ interface DisplayZoneProps {
     activeSides: Side[];
     panelOrder: Side[];
     lockedPanels: Side[];
+    zoneId: string;
+    zoneViewPortTarget: number[];
+    zoneViewPortPosition: number[];
     widgets: {
       id: string;
       type: string;
@@ -32,6 +38,9 @@ interface DisplayZoneProps {
       activeSides: Side[];
       panelOrder: Side[];
       lockedPanels: Side[];
+      zoneId: string;
+      zoneViewPortTarget: number[];
+      zoneViewPortPosition: number[];
       widgets: {
         id: string;
         type: string;
@@ -152,16 +161,16 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   return (
     <div
       ref={containerRef}
-      className={`zoon-wrapper ${selectedZone.activeSides.includes("bottom") && "bottom"
+      className={`zoon-wrapper ${selectedZone?.activeSides?.includes("bottom") && "bottom"
         }`}
     >
       {Object.keys(zonesData).map((zoneName, index) => (
         <div
           key={index}
           className={`zone ${selectedZone.zoneName === zoneName ? "active" : ""
-          }`}
+            }`}
           onClick={() => {
-            console.log('zoneName: ', zoneName);
+
 
             setSelectedZone({
               zoneName,
@@ -169,12 +178,15 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
               panelOrder: zonesData[zoneName].panelOrder || [],
               lockedPanels: zonesData[zoneName].lockedPanels || [],
               widgets: zonesData[zoneName].widgets || [],
-            })
+              zoneId: zonesData[zoneName]?.zoneId || "",
+              zoneViewPortTarget: zonesData[zoneName].zoneViewPortTarget || [],
+              zoneViewPortPosition:
+                zonesData[zoneName].zoneViewPortPosition || [],
+            });
             // setSelectedZone({
             //   zoneName,
             //   ...zonesData[zoneName],
             // });
-            console.log(selectedZone);
           }}
         >
           {zoneName}
@@ -184,4 +196,4 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   );
 };
 
-export default DisplayZone;
+export default DisplayZone;

app/src/components/ui/componets/DraggableWidget.tsx

@@ -1,165 +1,164 @@
-import { useWidgetStore } from "../../../store/useWidgetStore";
+import { useWidgetStore } from "../../../store/useWidgetStore";
-import ProgressCard from "../realTimeVis/charts/ProgressCard";
+import ProgressCard from "../realTimeVis/charts/ProgressCard";
-import PieGraphComponent from "../realTimeVis/charts/PieGraphComponent";
+import PieGraphComponent from "../realTimeVis/charts/PieGraphComponent";
-import BarGraphComponent from "../realTimeVis/charts/BarGraphComponent";
+import BarGraphComponent from "../realTimeVis/charts/BarGraphComponent";
-import LineGraphComponent from "../realTimeVis/charts/LineGraphComponent";
+import LineGraphComponent from "../realTimeVis/charts/LineGraphComponent";
-import RadarGraphComponent from "../realTimeVis/charts/RadarGraphComponent";
+import RadarGraphComponent from "../realTimeVis/charts/RadarGraphComponent";
-import DoughnutGraphComponent from "../realTimeVis/charts/DoughnutGraphComponent";
+import DoughnutGraphComponent from "../realTimeVis/charts/DoughnutGraphComponent";
-import PolarAreaGraphComponent from "../realTimeVis/charts/PolarAreaGraphComponent";
+import PolarAreaGraphComponent from "../realTimeVis/charts/PolarAreaGraphComponent";
-
+
-export const DraggableWidget = ({
+export const DraggableWidget = ({
-  widget,
+  widget,
-  hiddenPanels, // Add this prop to track hidden panels
+  hiddenPanels, // Add this prop to track hidden panels
-  index, onReorder
+  index, onReorder
-}: {
+}: {
-  widget: any;
+  widget: any;
-  hiddenPanels: string[]; // Array of hidden panel names
+  hiddenPanels: string[]; // Array of hidden panel names
-  index: number; onReorder: (fromIndex: number, toIndex: number) => void
+  index: number; onReorder: (fromIndex: number, toIndex: number) => void
-}) => {
+}) => {
-
+  const { selectedChartId, setSelectedChartId } = useWidgetStore();
-  const { selectedChartId, setSelectedChartId } = useWidgetStore();
+
-
+  const handlePointerDown = () => {
-  const handlePointerDown = () => {
+    if (selectedChartId?.id !== widget.id) {
-    if (selectedChartId?.id !== widget.id) {
+      setSelectedChartId(widget);
-      setSelectedChartId(widget);
+    }
-    }
+  };
-  };
+
-
+  // Determine if the widget's panel is hidden
-  // Determine if the widget's panel is hidden
+  const isPanelHidden = hiddenPanels.includes(widget.panel);
-  const isPanelHidden = hiddenPanels.includes(widget.panel);
+
-
+  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
-  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
+    event.dataTransfer.setData('text/plain', index.toString()); // Store the index of the dragged widget
-    event.dataTransfer.setData('text/plain', index.toString()); // Store the index of the dragged widget
+  };
-  };
+  const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
-  const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault(); // Allow drop
-    event.preventDefault(); // Allow drop
+  };
-  };
+
-
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
-  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault(); // Allow drop
-    event.preventDefault(); // Allow drop
+  };
-  };
+
-
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
-  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
-    event.preventDefault();
+    const fromIndex = parseInt(event.dataTransfer.getData('text/plain'), 10); // Get the dragged widget's index
-    const fromIndex = parseInt(event.dataTransfer.getData('text/plain'), 10); // Get the dragged widget's index
+    const toIndex = index; // The index of the widget where the drop occurred
-    const toIndex = index; // The index of the widget where the drop occurred
+    if (fromIndex !== toIndex) {
-    if (fromIndex !== toIndex) {
+      onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop
-      onReorder(fromIndex, toIndex); // Call the reorder function passed as a prop
+    }
-    }
+  };
-  };
+
-
+
-
+  return (
-  return (
+    <>
-    <>
+      <div
-      <div
+        draggable
-        draggable
+        key={widget.id}
-        key={widget.id}
+        className={`chart-container ${selectedChartId?.id === widget.id && "activeChart"
-        className={`chart-container ${selectedChartId?.id === widget.id && "activeChart"
+          }`}
-          }`}
+        onPointerDown={handlePointerDown}
-        onPointerDown={handlePointerDown}
+        onDragStart={handleDragStart}
-        onDragStart={handleDragStart}
+        onDragEnter={handleDragEnter}
-        onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
-        onDragOver={handleDragOver}
+        onDrop={handleDrop}
-        onDrop={handleDrop}
+        style={{
-        style={{
+          opacity: isPanelHidden ? 0 : 1, // Set opacity to 0 if the panel is hidden
-          opacity: isPanelHidden ? 0 : 1, // Set opacity to 0 if the panel is hidden
+          pointerEvents: isPanelHidden ? "none" : "auto", // Disable interaction when hidden
-          pointerEvents: isPanelHidden ? "none" : "auto", // Disable interaction when hidden
+        }}
-        }}
+      >
-      >
+        {/* Render charts based on widget type */}
-        {/* Render charts based on widget type */}
+        {widget.type === "progress" && (
-        {widget.type === "progress" && (
+          <ProgressCard title={widget.title} data={widget.data} />
-          <ProgressCard title={widget.title} data={widget.data} />
+        )}
-        )}
+        {widget.type === "line" && (
-        {widget.type === "line" && (
+          <LineGraphComponent
-          <LineGraphComponent
+            type={widget.type}
-            type={widget.type}
+            title={widget.title}
-            title={widget.title}
+            fontSize={widget.fontSize}
-            fontSize={widget.fontSize}
+            fontWeight={widget.fontWeight}
-            fontWeight={widget.fontWeight}
+            data={{
-            data={{
+              measurements: [
-              measurements: [
+                { name: "testDevice", fields: "powerConsumption" },
-                { name: "testDevice", fields: "powerConsumption" },
+                { name: "furnace", fields: "powerConsumption" },
-                { name: "furnace", fields: "powerConsumption" },
+              ],
-              ],
+              interval: 1000,
-              interval: 1000,
+              duration: "1h",
-              duration: "1h",
+            }}
-            }}
+          />
-          />
+        )}
-        )}
+        {widget.type === "bar" && (
-        {widget.type === "bar" && (
+          <BarGraphComponent
-          <BarGraphComponent
+            type={widget.type}
-            type={widget.type}
+            title={widget.title}
-            title={widget.title}
+            fontSize={widget.fontSize}
-            fontSize={widget.fontSize}
+            fontWeight={widget.fontWeight}
-            fontWeight={widget.fontWeight}
+            data={{
-            data={{
+              measurements: [
-              measurements: [
+                { name: "testDevice", fields: "powerConsumption" },
-                { name: "testDevice", fields: "powerConsumption" },
+                { name: "furnace", fields: "powerConsumption" },
-                { name: "furnace", fields: "powerConsumption" },
+              ],
-              ],
+              interval: 1000,
-              interval: 1000,
+              duration: "1h",
-              duration: "1h",
+            }}
-            }}
+          />
-          />
+        )}
-        )}
+        {/* {widget.type === "radar" && (
-        {/* {widget.type === "radar" && (
+          <RadarGraphComponent
-          <RadarGraphComponent
+            type={widget.type}
-            type={widget.type}
+            title={widget.title}
-            title={widget.title}
+            fontSize={widget.fontSize}
-            fontSize={widget.fontSize}
+            fontWeight={widget.fontWeight}
-            fontWeight={widget.fontWeight}
+            data={widget.data.measurements.map((item: any) => item.fields)}
-            data={widget.data.measurements.map((item: any) => item.fields)}
+          />
-          />
+        )} */}
-        )} */}
+        {widget.type === "pie" && (
-        {widget.type === "pie" && (
+          <PieGraphComponent
-          <PieGraphComponent
+            type={widget.type}
-            type={widget.type}
+            title={widget.title}
-            title={widget.title}
+            fontSize={widget.fontSize}
-            fontSize={widget.fontSize}
+            fontWeight={widget.fontWeight}
-            fontWeight={widget.fontWeight}
+            data={{
-            data={{
+              measurements: [
-              measurements: [
+                { name: "testDevice", fields: "powerConsumption" },
-                { name: "testDevice", fields: "powerConsumption" },
+                { name: "furnace", fields: "powerConsumption" },
-                { name: "furnace", fields: "powerConsumption" },
+              ],
-              ],
+              interval: 1000,
-              interval: 1000,
+              duration: "1h",
-              duration: "1h",
+            }}
-            }}
+          />
-          />
+        )}
-        )}
+        {widget.type === "doughnut" && (
-        {widget.type === "doughnut" && (
+          <DoughnutGraphComponent
-          <DoughnutGraphComponent
+            type={widget.type}
-            type={widget.type}
+            title={widget.title}
-            title={widget.title}
+            fontSize={widget.fontSize}
-            fontSize={widget.fontSize}
+            fontWeight={widget.fontWeight}
-            fontWeight={widget.fontWeight}
+            data={{
-            data={{
+              measurements: [
-              measurements: [
+                { name: "testDevice", fields: "powerConsumption" },
-                { name: "testDevice", fields: "powerConsumption" },
+                { name: "furnace", fields: "powerConsumption" },
-                { name: "furnace", fields: "powerConsumption" },
+              ],
-              ],
+              interval: 1000,
-              interval: 1000,
+              duration: "1h",
-              duration: "1h",
+            }}
-            }}
+          />
-          />
+        )}
-        )}
+        {widget.type === "polarArea" && (
-        {widget.type === "polarArea" && (
+          <PolarAreaGraphComponent
-          <PolarAreaGraphComponent
+            type={widget.type}
-            type={widget.type}
+            title={widget.title}
-            title={widget.title}
+            fontSize={widget.fontSize}
-            fontSize={widget.fontSize}
+            fontWeight={widget.fontWeight}
-            fontWeight={widget.fontWeight}
+            data={{
-            data={{
+              measurements: [
-              measurements: [
+                { name: "testDevice", fields: "powerConsumption" },
-                { name: "testDevice", fields: "powerConsumption" },
+                { name: "furnace", fields: "powerConsumption" },
-                { name: "furnace", fields: "powerConsumption" },
+              ],
-              ],
+              interval: 1000,
-              interval: 1000,
+              duration: "1h",
-              duration: "1h",
+            }}
-            }}
+          />
-          />
+        )}
-        )}
+      </div>
-      </div>
+    </>
-    </>
+  );
-  );
+};
-};

app/src/components/ui/componets/DroppedFloatingWidgets.tsx

@@ -0,0 +1,89 @@
+// import { useState } from "react";
+// import { useThree } from "@react-three/fiber";
+// import * as THREE from "three";
+
+
+
+// const DroppedObjects = () => {
+//   const { camera } = useThree(); // Now inside Canvas ✅
+//   const [objects, setObjects] = useState<{ id: number; position: [number, number, number] }[]>([]);
+
+//   // Function to convert drop event into 3D position
+//   const handleDrop = (event: DragEvent) => {
+//     event.preventDefault();
+
+//     const data = event.dataTransfer?.getData("text/plain");
+//     if (!data) return;
+
+//     try {
+//       const cardData = JSON.parse(data);
+//       if (!cardData.className.includes("floating total-card")) {
+//         console.log("Drop rejected: Incorrect element.");
+//         return;
+//       }
+
+//       // Convert 2D drop position to 3D world coordinates
+//       const x = (event.clientX / window.innerWidth) * 2 - 1;
+//       const y = -(event.clientY / window.innerHeight) * 2 + 1;
+
+//       // Raycasting to determine the drop position in 3D
+//       const raycaster = new THREE.Raycaster();
+//       const mouseVector = new THREE.Vector2(x, y);
+//       raycaster.setFromCamera(mouseVector, camera);
+
+//       // Intersect with a ground plane (assume y = 0)
+//       const groundPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
+//       const intersection = new THREE.Vector3();
+//       raycaster.ray.intersectPlane(groundPlane, intersection);
+
+//       console.log("Spawn Object at:", intersection);
+
+//       // Add the dropped object to the scene state
+//       setObjects((prev) => [...prev, { id: Date.now(), position: [intersection.x, intersection.y, intersection.z] }]);
+//     } catch (error) {
+//       console.error("Invalid data:", error);
+//     }
+//   };
+
+//   return (
+//     <group>
+//       {/* Render dropped objects as green boxes */}
+//       {objects.map((obj) => (
+//         <mesh key={obj.id} position={obj.position}>
+//           <boxGeometry args={[1, 1, 1]} />
+//           <meshStandardMaterial color="green" />
+//         </mesh>
+//       ))}
+//     </group>
+//   );
+// };
+
+import { Html } from "@react-three/drei";
+import { useDroppedObjectsStore } from "../../../store/store";
+
+
+const DroppedObjects: React.FC = () => {
+  const objects = useDroppedObjectsStore((state) => state.objects); // Get objects from Zustand store
+  console.log('objects: ', objects);
+
+  return (
+    <>
+      {objects.map((obj, index) => (
+        <group key={index} position={[Math.random() * 5, Math.random() * 5, 0]}>
+          <Html wrapperClass={obj.className}>
+            <div style={{ padding: "10px", background: "#fff", borderRadius: "6px" }}>
+              <div className="header">{obj.header}</div>
+              <div className="data-values">
+                <div className="value">{obj.value}</div>
+                <div className="per">{obj.per}</div>
+              </div>
+            </div>
+          </Html>
+        </group>
+      ))}
+    </>
+  );
+};
+
+export default DroppedObjects;
+

app/src/components/ui/componets/Panel.tsx

@@ -20,6 +20,9 @@ interface PanelProps {
     activeSides: Side[];
     panelOrder: Side[];
     lockedPanels: Side[];
+    zoneId: string;
+    zoneViewPortTarget: number[];
+    zoneViewPortPosition: number[]
     widgets: Widget[];
   };
   setSelectedZone: React.Dispatch<
@@ -28,6 +31,9 @@ interface PanelProps {
       activeSides: Side[];
       panelOrder: Side[];
       lockedPanels: Side[];
+      zoneId: string;
+      zoneViewPortTarget: number[];
+      zoneViewPortPosition: number[]
       widgets: Widget[];
     }>
   >;

app/src/components/ui/componets/RealTimeVisulization.tsx

@@ -6,7 +6,9 @@ import { useSelectedZoneStore } from "../../../store/useZoneStore";
 import DisplayZone from "./DisplayZone";
 import Scene from "../../../modules/scene/scene";
 import useModuleStore from "../../../store/useModuleStore";
-import { getZonesApi } from "../../../services/realTimeVisulization/zoneData/getZones";
+import { useDroppedObjectsStore, useZones } from "../../../store/store";
+import DroppedObjects from "./DroppedFloatingWidgets";
+
 
 
 type Side = "top" | "bottom" | "left" | "right";
@@ -17,7 +19,9 @@ type FormattedZoneData = Record<
     activeSides: Side[];
     panelOrder: Side[];
     lockedPanels: Side[];
-    zoneCentrePoint: number[];
+    zoneId: string;
+    zoneViewPortTarget: number[];
+    zoneViewPortPosition: number[]
     widgets: Widget[];
   }
 >;
@@ -28,72 +32,85 @@ type Widget = {
   panel: Side;
   data: any;
 };
-type Zone = {
-  zoneId: string;
-  zoneName: string;
-  points: number[][];
-  layer: number;
-};
 
 const RealTimeVisulization: React.FC = () => {
   const [hiddenPanels, setHiddenPanels] = React.useState<Side[]>([]);
   const containerRef = useRef<HTMLDivElement>(null);
   const { isPlaying } = usePlayButtonStore();
   const { activeModule } = useModuleStore();
-
+  const [droppedObjects, setDroppedObjects] = useState<any[]>([]);
   const [zonesData, setZonesData] = useState<FormattedZoneData>({});
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
+  const { zones } = useZones()
 
   useEffect(() => {
-    async function GetZoneData() {
+    const data = Array.isArray(zones) ? zones : [];
-      try {
-        const response: { data: Zone[] } | undefined = await getZonesApi(
-          "hexrfactory"
-        );
 
-        if (!response || !response.data) {
+    const formattedData = data.reduce<FormattedZoneData>((acc, zone) => {
-          return;
+      acc[zone.zoneName] = {
-        }
+        activeSides: [],
-        const formattedData = response?.data?.reduce<FormattedZoneData>(
+        panelOrder: [],
-          (acc, zone) => {
+        lockedPanels: [],
-            acc[zone.zoneName] = {
+        zoneId: zone.zoneId,
-              activeSides: [],
+        zoneViewPortTarget: zone.viewPortCenter,
-              panelOrder: [],
+        zoneViewPortPosition: zone.viewPortposition,
-              lockedPanels: [],
+        widgets: [],
-              zoneCentrePoint: [],
+      };
-              widgets: [],
+      return acc;
-            };
+    }, {});
-            return acc;
+
-          },
+    setZonesData(formattedData);
-          {}
+  }, [zones]);
-        );
+
-        setZonesData(formattedData);
+  useEffect(() => {
-      } catch (error) { }
+    setZonesData((prev) => {
+      if (!selectedZone) return prev;
+      return {
+        ...prev,
+        [selectedZone.zoneName]: {
+          ...prev[selectedZone.zoneName], // Keep existing properties
+          activeSides: selectedZone.activeSides || [],
+          panelOrder: selectedZone.panelOrder || [],
+          lockedPanels: selectedZone.lockedPanels || [],
+          zoneId: selectedZone.zoneId || "",
+          zoneViewPortTarget: selectedZone.zoneViewPortTarget || [],
+          zoneViewPortPosition: selectedZone.zoneViewPortPosition || [],
+          widgets: selectedZone.widgets || [],
+        },
+      };
+    });
+  }, [selectedZone]);
+
+  // const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+  //   console.log("Drop event fired! ✅");
+  //   event.preventDefault();
+
+  //   const data = event.dataTransfer.getData("text/plain");
+  //   if (!data) {
+  //     console.log("❌ No data received on drop!");
+  //     return;
+  //   }
+
+  //   try {
+  //     const droppedData = JSON.parse(data);
+  //     console.log("✅ Dropped Data:", droppedData);
+
+  //     console.log('droppedData: ', droppedData);
+  //     setDroppedObjects((prev) => [...prev, droppedData]); // ✅ Add to state
+  //     console.log(droppedObjects);
+  //   } catch (error) {
+  //     console.error("❌ Error parsing dropped data:", error);
+  //   }
+  // };
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    const data = event.dataTransfer.getData("text/plain"); // Use "text/plain" to match the drag event
+
+    if (data) {
+      const droppedData = JSON.parse(data);
+      useDroppedObjectsStore.getState().addObject(droppedData); // Add to Zustand store
     }
-    GetZoneData();
+  };
-  }, []);
-
-  useEffect(() => {
-
-    console.log('zonesData: ', zonesData);
-  }, [zonesData]);
-
-  // useEffect(() => {
-  //   setZonesData((prev) => {
-  //     if (!selectedZone) return prev;
-
-  //     return {
-  //       ...prev,
-  //       [selectedZone.zoneName]: {
-  //         ...prev[selectedZone.zoneName], // Keep existing properties
-  //         activeSides: selectedZone.activeSides || [],
-  //         panelOrder: selectedZone.panelOrder || [],
-  //         lockedPanels: selectedZone.lockedPanels || [],
-  //         widgets: selectedZone.widgets || [],
-  //       },
-  //     };
-  //   });
-  // }, [selectedZone]);
 
   return (
     <div
@@ -113,7 +130,10 @@ const RealTimeVisulization: React.FC = () => {
           width: "100%",
           borderRadius: isPlaying || activeModule !== "visualization" ? "" : "6px",
         }}
+        onDrop={(event) => handleDrop(event)}
+        onDragOver={(event) => event.preventDefault()}
       >
+      
         <Scene />
       </div>
       {activeModule === "visualization" && (
@@ -124,7 +144,7 @@ const RealTimeVisulization: React.FC = () => {
             setSelectedZone={setSelectedZone}
           />
 
-          {!isPlaying && (
+          {!isPlaying && selectedZone?.zoneName !== "" && (
             <AddButtons
               hiddenPanels={hiddenPanels}
               setHiddenPanels={setHiddenPanels}
@@ -134,9 +154,10 @@ const RealTimeVisulization: React.FC = () => {
           )}
 
           <Panel
+            hiddenPanels={hiddenPanels}
             selectedZone={selectedZone}
             setSelectedZone={setSelectedZone}
-            hiddenPanels={hiddenPanels}
+
           />
         </>
       )}

app/src/components/ui/componets/zoneCameraTarget.tsx

@@ -0,0 +1,107 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+import * as THREE from "three";
+import { useSelectedZoneStore } from "../../../store/useZoneStore";
+import { useEditPosition, usezonePosition, usezoneTarget } from "../../../store/store";
+
+export default function ZoneCentreTarget() {
+    const { selectedZone, setSelectedZone } = useSelectedZoneStore();
+    const [previousZoneCentre, setPreviousZoneCentre] = useState<number[] | null>(null);
+    const sphereRef = useRef<THREE.Mesh>(null);
+    const { camera, controls }: any = useThree();
+    const { zonePosition, setZonePosition } = usezonePosition();
+    const { zoneTarget, setZoneTarget } = usezoneTarget();
+    const { Edit, setEdit } = useEditPosition();
+
+
+    useEffect(() => {
+        if (
+            selectedZone.zoneViewPortTarget &&
+            JSON.stringify(previousZoneCentre) !== JSON.stringify(selectedZone.zoneViewPortTarget)
+        ) {
+            setPreviousZoneCentre(selectedZone.zoneViewPortTarget);
+        }
+    }, [selectedZone.zoneViewPortTarget, previousZoneCentre]);
+
+    const centrePoint = useMemo(() => {
+        if (!previousZoneCentre || !selectedZone.zoneViewPortTarget) return null;
+        return previousZoneCentre.map((value, index) =>
+            (value + selectedZone.zoneViewPortTarget[index]) / 2
+        );
+    }, [previousZoneCentre, selectedZone.zoneViewPortTarget]);
+
+    useEffect(() => {
+        if (selectedZone.zoneName !== "") {
+            if (sphereRef.current) {
+                sphereRef.current.position.set(selectedZone.zoneViewPortTarget[0], selectedZone.zoneViewPortTarget[1], selectedZone.zoneViewPortTarget[2]);
+            }
+            if (centrePoint) {
+
+                if (centrePoint.length > 0) {
+
+                    let camPosition = new THREE.Vector3(...selectedZone.zoneViewPortPosition);
+                    let CamTarget = new THREE.Vector3(...selectedZone.zoneViewPortTarget);
+
+                    const direction = new THREE.Vector3().subVectors(CamTarget, camPosition).normalize();
+
+                    const worldUp = new THREE.Vector3(0, 0, 1);
+                    const right = new THREE.Vector3().crossVectors(worldUp, direction).normalize();
+                    const up = new THREE.Vector3().crossVectors(direction, right).normalize();
+
+                    const offsetPosition = up.clone().multiplyScalar(20);
+
+                    camPosition.add(offsetPosition);
+
+
+                    const setCam = async () => {
+                        controls.setLookAt(centrePoint[0], 100, centrePoint[2], ...centrePoint, true);
+                        setTimeout(() => {
+                            controls?.setLookAt(
+                                ...camPosition.toArray(),
+                                selectedZone.zoneViewPortTarget[0],
+                                selectedZone.zoneViewPortTarget[1],
+                                selectedZone.zoneViewPortTarget[2],
+                                true
+                            );
+                        }, 400)
+                    };
+                    setCam();
+                } else {
+
+                    let camPosition = new THREE.Vector3(...selectedZone.zoneViewPortPosition);
+                    let CamTarget = new THREE.Vector3(...selectedZone.zoneViewPortTarget);
+
+                    const direction = new THREE.Vector3().subVectors(CamTarget, camPosition).normalize();
+
+                    const worldUp = new THREE.Vector3(0, 0, 1);
+                    const right = new THREE.Vector3().crossVectors(worldUp, direction).normalize();
+                    const up = new THREE.Vector3().crossVectors(direction, right).normalize();
+
+                    const offsetPosition = up.clone().multiplyScalar(20);
+
+                    camPosition.add(offsetPosition);
+                    const setCam = async () => {
+                        controls?.setLookAt(
+                            ...camPosition.toArray(),
+                            selectedZone.zoneViewPortTarget[0],
+                            selectedZone.zoneViewPortTarget[1],
+                            selectedZone.zoneViewPortTarget[2],
+                            true
+                        );
+                    };
+                    setCam();
+                }
+            }
+        }
+    }, [selectedZone.zoneViewPortTarget]);
+
+    useFrame(() => {
+        if (Edit) {
+            setZonePosition([controls.getPosition().x, controls.getPosition().y, controls.getPosition().z])
+            setZoneTarget([controls.getTarget().x, controls.getTarget().y, controls.getTarget().z])
+        }
+    })
+    return (
+        <> </>
+    );
+}

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

@@ -1,99 +1,213 @@
+// import React, { useState, useRef, useEffect } from "react";
+
+// // Dropdown Item Component
+// const DropdownItem = ({
+//   label,
+//   href,
+//   onClick,
+// }: {
+//   label: string;
+//   href?: string;
+//   onClick?: () => void;
+// }) => (
+//   <a
+//     href={href || "#"}
+//     className="dropdown-item"
+//     onClick={(e) => {
+//       e.preventDefault();
+//       onClick?.();
+//     }}
+//   >
+//     {label}
+//   </a>
+// );
+
+// // Nested Dropdown Component
+// const NestedDropdown = ({
+//   label,
+//   children,
+//   onSelect,
+// }: {
+//   label: string;
+//   children: React.ReactNode;
+//   onSelect: (selectedLabel: string) => void;
+// }) => {
+//   const [open, setOpen] = useState(false);
+
+//   return (
+//     <div className="nested-dropdown">
+//       {/* Dropdown Trigger */}
+//       <div
+//         className={`dropdown-trigger ${open ? "open" : ""}`}
+//         onClick={() => setOpen(!open)} // Toggle submenu on click
+//       >
+//         {label} <span className="icon">{open ? "▼" : "▶"}</span>
+//       </div>
+
+//       {/* Submenu */}
+//       {open && (
+//         <div className="submenu">
+//           {React.Children.map(children, (child) => {
+//             if (React.isValidElement(child)) {
+//               // Clone the element and pass the `onSelect` prop only if it's expected
+//               return React.cloneElement(child as React.ReactElement<any>, { onSelect });
+//             }
+//             return child; // Return non-element children as-is
+//           })}
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+
+// // Recursive Function to Render Nested Data
+// const renderNestedData = (
+//   data: Record<string, any>,
+//   onSelect: (selectedLabel: string) => void
+// ) => {
+//   return Object.entries(data).map(([key, value]) => {
+//     if (typeof value === "object" && !Array.isArray(value)) {
+//       // If the value is an object, render it as a nested dropdown
+//       return (
+//         <NestedDropdown key={key} label={key} onSelect={onSelect}>
+//           {renderNestedData(value, onSelect)}
+//         </NestedDropdown>
+//       );
+//     } else if (Array.isArray(value)) {
+//       // If the value is an array, render each item as a dropdown item
+//       return value.map((item, index) => (
+//         <DropdownItem key={index} label={item} onClick={() => onSelect(item)} />
+//       ));
+//     } else {
+//       // If the value is a simple string, render it as a dropdown item
+//       return (
+//         <DropdownItem key={key} label={value} onClick={() => onSelect(value)} />
+//       );
+//     }
+//   });
+// };
+
+// // Main Multi-Level Dropdown Component
+// const MultiLevelDropdown = ({ data }: { data: Record<string, any> }) => {
+//   const [open, setOpen] = useState(false);
+//   const [selectedLabel, setSelectedLabel] = useState("Dropdown trigger");
+//   const dropdownRef = useRef<HTMLDivElement>(null);
+
+//   // Handle outer click to close the dropdown
+//   useEffect(() => {
+//     const handleClickOutside = (event: MouseEvent) => {
+//       if (
+//         dropdownRef.current &&
+//         !dropdownRef.current.contains(event.target as Node)
+//       ) {
+//         setOpen(false);
+//       }
+//     };
+
+//     document.addEventListener("mousedown", handleClickOutside);
+//     return () => {
+//       document.removeEventListener("mousedown", handleClickOutside);
+//     };
+//   }, []);
+
+//   // Handle selection of an item
+//   const handleSelect = (selectedLabel: string) => {
+//     setSelectedLabel(selectedLabel); // Update the dropdown trigger text
+//     setOpen(false); // Close the dropdown
+//   };
+
+//   return (
+//     <div className="multi-level-dropdown" ref={dropdownRef}>
+//       {/* Dropdown Trigger Button */}
+//       <button
+//         className={`dropdown-button ${open ? "open" : ""}`}
+//         onClick={() => setOpen(!open)} // Toggle main menu on click
+//       >
+//         {selectedLabel} <span className="icon">▾</span>
+//       </button>
+
+//       {/* Dropdown Menu */}
+//       {open && (
+//         <div className="dropdown-menu">
+//           <div className="dropdown-content">
+//             {renderNestedData(data, handleSelect)}
+//           </div>
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+
+// export default MultiLevelDropdown;
+
 import React, { useState, useRef, useEffect } from "react";
 
 // Dropdown Item Component
 const DropdownItem = ({
   label,
-  href,
   onClick,
 }: {
   label: string;
-  href?: string;
+  onClick: () => void;
-  onClick?: () => void;
 }) => (
-  <a
+  <div className="dropdown-item" onClick={onClick}>
-    href={href || "#"}
-    className="dropdown-item"
-    onClick={(e) => {
-      e.preventDefault();
-      onClick?.();
-    }}
-  >
     {label}
-  </a>
+  </div>
 );
 
 // Nested Dropdown Component
 const NestedDropdown = ({
   label,
-  children,
+  fields,
   onSelect,
 }: {
   label: string;
-  children: React.ReactNode;
+  fields: string[];
-  onSelect: (selectedLabel: string) => void;
+  onSelect: (selectedData: { name: string; fields: string }) => void;
 }) => {
   const [open, setOpen] = useState(false);
 
   return (
     <div className="nested-dropdown">
-      {/* Dropdown Trigger */}
       <div
         className={`dropdown-trigger ${open ? "open" : ""}`}
-        onClick={() => setOpen(!open)} // Toggle submenu on click
+        onClick={() => setOpen(!open)}
       >
         {label} <span className="icon">{open ? "▼" : "▶"}</span>
       </div>
-
-      {/* Submenu */}
       {open && (
         <div className="submenu">
-          {React.Children.map(children, (child) => {
+          {fields.map((field) => (
-            if (React.isValidElement(child)) {
+            <DropdownItem
-              // Clone the element and pass the `onSelect` prop only if it's expected
+              key={field}
-              return React.cloneElement(child as React.ReactElement<any>, { onSelect });
+              label={field}
-            }
+              onClick={() => onSelect({ name: label, fields: field })}
-            return child; // Return non-element children as-is
+            />
-          })}
+          ))}
         </div>
       )}
     </div>
   );
 };
 
-// Recursive Function to Render Nested Data
+// Props type for MultiLevelDropdown
-const renderNestedData = (
+interface MultiLevelDropdownProps {
-  data: Record<string, any>,
+  data: Record<string, any>;
-  onSelect: (selectedLabel: string) => void
+  onSelect: (selectedData: { name: string; fields: string }) => void;
-) => {
+  onUnselect: () => void;
-  return Object.entries(data).map(([key, value]) => {
+  selectedValue?: { name: string; fields: string };
-    if (typeof value === "object" && !Array.isArray(value)) {
+}
-      // If the value is an object, render it as a nested dropdown
-      return (
-        <NestedDropdown key={key} label={key} onSelect={onSelect}>
-          {renderNestedData(value, onSelect)}
-        </NestedDropdown>
-      );
-    } else if (Array.isArray(value)) {
-      // If the value is an array, render each item as a dropdown item
-      return value.map((item, index) => (
-        <DropdownItem key={index} label={item} onClick={() => onSelect(item)} />
-      ));
-    } else {
-      // If the value is a simple string, render it as a dropdown item
-      return (
-        <DropdownItem key={key} label={value} onClick={() => onSelect(value)} />
-      );
-    }
-  });
-};
 
 // Main Multi-Level Dropdown Component
-const MultiLevelDropdown = ({ data }: { data: Record<string, any> }) => {
+const MultiLevelDropdown = ({ 
+  data, 
+  onSelect, 
+  onUnselect,
+  selectedValue 
+}: MultiLevelDropdownProps) => {
   const [open, setOpen] = useState(false);
-  const [selectedLabel, setSelectedLabel] = useState("Dropdown trigger");
   const dropdownRef = useRef<HTMLDivElement>(null);
 
-  // Handle outer click to close the dropdown
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
@@ -103,34 +217,51 @@ const MultiLevelDropdown = ({ data }: { data: Record<string, any> }) => {
         setOpen(false);
       }
     };
-
     document.addEventListener("mousedown", handleClickOutside);
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
 
-  // Handle selection of an item
+  // Handle item selection
-  const handleSelect = (selectedLabel: string) => {
+  const handleItemSelect = (selectedData: { name: string; fields: string }) => {
-    setSelectedLabel(selectedLabel); // Update the dropdown trigger text
+    onSelect(selectedData);
-    setOpen(false); // Close the dropdown
+    setOpen(false);
   };
 
+  // Handle unselect
+  const handleItemUnselect = () => {
+    onUnselect();
+    setOpen(false);
+  };
+
+  // Determine the display label
+  const displayLabel = selectedValue 
+    ? `${selectedValue.name} - ${selectedValue.fields}`
+    : "Dropdown trigger";
+
   return (
     <div className="multi-level-dropdown" ref={dropdownRef}>
-      {/* Dropdown Trigger Button */}
       <button
         className={`dropdown-button ${open ? "open" : ""}`}
-        onClick={() => setOpen(!open)} // Toggle main menu on click
+        onClick={() => setOpen(!open)}
       >
-        {selectedLabel} <span className="icon">▾</span>
+        {displayLabel} <span className="icon">▾</span>
       </button>
-
-      {/* Dropdown Menu */}
       {open && (
         <div className="dropdown-menu">
           <div className="dropdown-content">
-            {renderNestedData(data, handleSelect)}
+            {/* Unselect Option */}
+            <DropdownItem label="Unselect" onClick={handleItemUnselect} />
+            {/* Nested Dropdown Items */}
+            {Object.entries(data).map(([key, value]) => (
+              <NestedDropdown
+                key={key}
+                label={key}
+                fields={Object.keys(value)}
+                onSelect={handleItemSelect}
+              />
+            ))}
           </div>
         </div>
       )}
@@ -138,4 +269,5 @@ const MultiLevelDropdown = ({ data }: { data: Record<string, any> }) => {
   );
 };
 
-export default MultiLevelDropdown;
+export default MultiLevelDropdown;
+

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
 
 interface RenameInputProps {
   value: string;
@@ -9,6 +9,9 @@ const RenameInput: React.FC<RenameInputProps> = ({ value, onRename }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [text, setText] = useState(value);
   const inputRef = useRef<HTMLInputElement | null>(null);
+  useEffect(() => {
+    setText(value); // Ensure state updates when parent value changes
+  }, [value]);
 
   const handleDoubleClick = () => {
     setIsEditing(true);

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

@@ -2,7 +2,8 @@ import React, { useEffect, useState } from "react";
 import List from "./List";
 import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons";
 import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";
-import { getZonesApi } from "../../../services/realTimeVisulization/zoneData/getZones";
+import { useZones } from "../../../store/store";
+import { useSelectedZoneStore } from "../../../store/useZoneStore";
 
 interface DropDownListProps {
   value?: string; // Value to display in the DropDownList
@@ -31,27 +32,23 @@ const DropDownList: React.FC<DropDownListProps> = ({
   listType = "default",
   remove,
 }) => {
+  
   const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
+  const { zones, setZones } = useZones()
 
   const handleToggle = () => {
     setIsOpen((prev) => !prev); // Toggle the state
   };
-  const [zoneDataList, setZoneDataList] = useState<
+  const [zoneDataList, setZoneDataList] = useState<{ id: string; name: string }[]>([]);
-    { id: string; name: string }[]
+  const { selectedZone, setSelectedZone } = useSelectedZoneStore();
-  >([]);
 
   useEffect(() => {
-    async function GetZoneData() {
+    const value = (zones || []).map((val: { zoneId: string; zoneName: string }) => ({
-      const response = await getZonesApi("hexrfactory");
+      id: val.zoneId,
-      console.log("response: ", response.data);
+      name: val.zoneName
-      setZoneDataList([
+    }));
-        { id: "1", name: "zone1" },
+    setZoneDataList(prev => (JSON.stringify(prev) !== JSON.stringify(value) ? value : prev));
-        { id: "2", name: "Zone 2" },
+  }, [zones]);
-      ]);
-    }
-
-    GetZoneData();
-  }, []);
 
   return (
     <div className="dropdown-list-container">

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

@@ -1,6 +1,9 @@
 import React from "react";
 import RenameInput from "../inputs/RenameInput";
 import { EyeIcon, LockIcon, RmoveIcon } from "../../icons/ExportCommonIcons";
+import { useSelectedZoneStore } from "../../../store/useZoneStore";
+import { getZoneData } from "../../../services/realTimeVisulization/zoneData/getZones";
+import { useSubModuleStore } from "../../../store/useModuleStore";
 
 interface ListProps {
   items?: { id: string; name: string }[]; // Optional array of items to render
@@ -9,7 +12,27 @@ interface ListProps {
 }
 
 const List: React.FC<ListProps> = ({ items = [], remove }) => {
-  console.log("items: ", items);
+  const { setSelectedZone } = useSelectedZoneStore();
+  const { setSubModule } = useSubModuleStore();
+
+  async function handleSelectZone(id: string) {
+    setSubModule("zoneProperties")
+    const email = localStorage.getItem('email')
+    const organization = (email!.split("@")[1]).split(".")[0];
+    let response = await getZoneData(id, organization)
+    setSelectedZone({
+      zoneName: response?.zoneName,
+      activeSides: response?.activeSides || [],
+      panelOrder: response?.panelOrder || [],
+      lockedPanels: response?.lockedPanels || [],
+      widgets: response?.widgets || [],
+      zoneId: response?.zoneId,
+      zoneViewPortTarget: response?.viewPortCenter || [],
+      zoneViewPortPosition:
+        response?.viewPortposition || [],
+    });
+
+  }
   return (
     <>
       {items.length > 0 ? (
@@ -17,7 +40,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
           {items.map((item, index) => (
             <li key={index} className="list-container">
               <div className="list-item">
-                <div className="value">
+                <div className="value" onClick={() => handleSelectZone(item.id)}>
                   <RenameInput value={item.name} />
                 </div>
                 <div className="options-container">

app/src/components/ui/realTimeVis/charts/LineGraphComponent.tsx

@@ -1,5 +1,107 @@
-import { useMemo } from "react";
+// import { useMemo } from "react";
-import { Line } from "react-chartjs-2";
+// import { Line } from "react-chartjs-2";
+
+// interface ChartComponentProps {
+//   type: any;
+//   title: string;
+//   fontFamily?: string;
+//   fontSize?: string;
+//   fontWeight?: "Light" | "Regular" | "Bold";
+//   data: any;
+// }
+
+// const LineGraphComponent = ({
+//   title,
+//   fontFamily,
+//   fontSize,
+//   fontWeight = "Regular",
+// }: ChartComponentProps) => {
+//   // Memoize Font Weight Mapping
+//   const chartFontWeightMap = useMemo(
+//     () => ({
+//       Light: "lighter" as const,
+//       Regular: "normal" as const,
+//       Bold: "bold" as const,
+//     }),
+//     []
+//   );
+
+//   // Parse and Memoize Font Size
+//   const fontSizeValue = useMemo(
+//     () => (fontSize ? parseInt(fontSize) : 12),
+//     [fontSize]
+//   );
+
+//   // Determine and Memoize Font Weight
+//   const fontWeightValue = useMemo(
+//     () => chartFontWeightMap[fontWeight],
+//     [fontWeight, chartFontWeightMap]
+//   );
+
+//   // Memoize Chart Font Style
+//   const chartFontStyle = useMemo(
+//     () => ({
+//       family: fontFamily || "Arial",
+//       size: fontSizeValue,
+//       weight: fontWeightValue,
+//     }),
+//     [fontFamily, fontSizeValue, fontWeightValue]
+//   );
+
+//   const options = useMemo(
+//     () => ({
+//       responsive: true,
+//       maintainAspectRatio: false,
+//       plugins: {
+//         title: {
+//           display: true,
+//           text: title,
+//           font: chartFontStyle,
+//         },
+//         legend: {
+//           display: false,
+//         },
+//       },
+//       scales: {
+//         x: {
+//           ticks: {
+//             display: true, // This hides the x-axis labels
+//           },
+//         },
+//       },
+//     }),
+//     [title, chartFontStyle]
+//   );
+
+//   const chartData = {
+//     labels: ["January", "February", "March", "April", "May", "June", "July"],
+//     datasets: [
+//       {
+//         label: "My First Dataset",
+//         data: [65, 59, 80, 81, 56, 55, 40],
+//         backgroundColor: "#6f42c1", // Updated to #6f42c1 (Purple)
+//         borderColor: "#ffffff", // Keeping border color white
+//         borderWidth: 2,
+//         fill: false,
+//       },
+//     ],
+//   };
+
+//   return <Line data={chartData} options={options} />;
+// };
+
+// export default LineGraphComponent;
+
+
+import React, { useEffect, useRef, useMemo, useState } from "react";
+import { Chart } from "chart.js/auto";
+import { useThemeStore } from "../../../../store/useThemeStore";
+import io from "socket.io-client";
+import { Line } from 'react-chartjs-2';
+import useChartStore from "../../../../store/useChartStore";
+
+// WebSocket Connection
+// const socket = io("http://localhost:5000"); // Adjust to your backend URL
 
 interface ChartComponentProps {
   type: any;
@@ -11,86 +113,153 @@ interface ChartComponentProps {
 }
 
 const LineGraphComponent = ({
+  type,
   title,
   fontFamily,
   fontSize,
   fontWeight = "Regular",
+  data,
 }: ChartComponentProps) => {
-  // Memoize Font Weight Mapping
+  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const chartFontWeightMap = useMemo(
+  const { themeColor } = useThemeStore();
-    () => ({
+  const [chartData, setChartData] = useState<{ labels: string[]; datasets: any[] }>({
-      Light: "lighter" as const,
+    labels: [],
-      Regular: "normal" as const,
+    datasets: [],
-      Bold: "bold" as const,
+  });
-    }),
-    []
-  );
 
-  // Parse and Memoize Font Size
+  // Memoize Theme Colors to Prevent Unnecessary Recalculations
-  const fontSizeValue = useMemo(
+    const buttonActionColor = useMemo(
-    () => (fontSize ? parseInt(fontSize) : 12),
+      () => themeColor[0] || "#5c87df",
-    [fontSize]
+      [themeColor]
-  );
+    );
-
+    const buttonAbortColor = useMemo(
-  // Determine and Memoize Font Weight
+      () => themeColor[1] || "#ffffff",
-  const fontWeightValue = useMemo(
+      [themeColor]
-    () => chartFontWeightMap[fontWeight],
+    );
-    [fontWeight, chartFontWeightMap]
+  
-  );
+    // Memoize Font Weight Mapping
-
+    const chartFontWeightMap = useMemo(
-  // Memoize Chart Font Style
+      () => ({
-  const chartFontStyle = useMemo(
+        Light: "lighter" as const,
-    () => ({
+        Regular: "normal" as const,
-      family: fontFamily || "Arial",
+        Bold: "bold" as const,
-      size: fontSizeValue,
+      }),
-      weight: fontWeightValue,
+      []
-    }),
+    );
-    [fontFamily, fontSizeValue, fontWeightValue]
+  
-  );
+    // Parse and Memoize Font Size
-
+    const fontSizeValue = useMemo(
-  const options = useMemo(
+      () => (fontSize ? parseInt(fontSize) : 12),
-    () => ({
+      [fontSize]
-      responsive: true,
+    );
-      maintainAspectRatio: false,
+  
-      plugins: {
+    // Determine and Memoize Font Weight
-        title: {
+    const fontWeightValue = useMemo(
-          display: true,
+      () => chartFontWeightMap[fontWeight],
-          text: title,
+      [fontWeight, chartFontWeightMap]
-          font: chartFontStyle,
+    );
-        },
+  
-        legend: {
+    // Memoize Chart Font Style
-          display: false,
+    const chartFontStyle = useMemo(
-        },
+      () => ({
-      },
+        family: fontFamily || "Arial",
-      scales: {
+        size: fontSizeValue,
-        x: {
+        weight: fontWeightValue,
-          ticks: {
+      }),
-            display: true, // This hides the x-axis labels
+      [fontFamily, fontSizeValue, fontWeightValue]
+    );
+  
+    // Memoize Chart Data
+    // const data = useMemo(() => propsData, [propsData]);
+  
+    // Memoize Chart Options
+    const options = useMemo(
+      () => ({
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          title: {
+            display: true,
+            text: title,
+            font: chartFontStyle,
+          },
+          legend: {
+            display: false,
           },
         },
-      },
+        scales: {
-    }),
+          x: {
-    [title, chartFontStyle]
+            ticks: {
-  );
+              display: true, // This hides the x-axis labels
+            },
+          },
+        },
+      }),
+      [title, chartFontStyle]
+    );
 
-  const chartData = {
+    const { measurements, setMeasurements, updateDuration, duration } = useChartStore();
-    labels: ["January", "February", "March", "April", "May", "June", "July"],
+
-    datasets: [
+  useEffect(() => {
-      {
+    if ( measurements.length > 0 ) {
-        label: "My First Dataset",
+      const socket = io("http://192.168.0.192:5010");
-        data: [65, 59, 80, 81, 56, 55, 40],
+
-        backgroundColor: "#6f42c1", // Updated to #6f42c1 (Purple)
+      var inputes = {
-        borderColor: "#ffffff", // Keeping border color white
+        measurements: measurements,
+        duration: duration,
+        interval: 1000,
+      }
+
+      console.log('graphHHHHHHHHHHHHHHHHHHHHHHHHHHHHH',inputes);
+      
+
+    // Start stream
+    const startStream = () => {
+      socket.emit("lineInput", inputes);
+    }
+
+    socket.on('connect', startStream);
+
+    socket.on("lineOutput", (response) => {
+      const responceData = response.data;
+      console.log("Received data:", responceData);
+
+      // Extract timestamps and values
+      const labels = responceData.time;
+      const datasets = data.measurements.map((measurement: any) => ({
+        label: `${measurement.name}.${measurement.fields}`,
+        data: responceData[`${measurement.name}.${measurement.fields}`]?.values || [],
+        backgroundColor: themeColor[0] || "#5c87df",
+        borderColor: themeColor[1] || "#ffffff",
         borderWidth: 2,
-        fill: false,
+        // fill: false,
-      },
+      }));
-    ],
+
-  };
+      setChartData({ labels, datasets });
+    });
+
+    return () => {
+      socket.off("lineOutput");
+      socket.emit("stop_stream"); // Stop streaming when component unmounts
+    };
+    }
+  }, [measurements, duration]);
+
+  // useEffect(() => {
+  //   if (!canvasRef.current) return;
+  //   const ctx = canvasRef.current.getContext("2d");
+  //   if (!ctx) return;
+
+  //   const chart = new Chart(ctx, {
+  //     type,
+  //     data: chartData,
+  //     options: options,
+  //   });
+
+  //   return () => chart.destroy();
+  // }, [chartData, type, title]);
 
   return <Line data={chartData} options={options} />;
 };
 
-export default LineGraphComponent;
+export default LineGraphComponent;
-
-
-// like this

app/src/components/ui/realTimeVis/floating/SimpleCard.tsx

@@ -13,8 +13,22 @@ const SimpleCard: React.FC<SimpleCardProps> = ({
   value,
   per,
 }) => {
+
+  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
+    const cardData = JSON.stringify({
+      header,
+      value,
+      per,
+      className: event.currentTarget.className, 
+    });
+  
+    console.log("Dragging Data:", cardData); // ✅ Debugging log
+  
+    event.dataTransfer.setData("text/plain", cardData);
+  };
+
   return (
-    <div className="floating total-card" draggable>
+    <div className="floating total-card" draggable onDragStart={handleDragStart}>
       <div className="header-wrapper">
         <div className="header">{header}</div>
         <div className="data-values">

app/src/modules/builder/geomentries/assets/assetManager.ts

@@ -112,7 +112,7 @@ export default async function assetManager(
         ) {
             if (!activePromises.get(taskId)) return; // Stop processing if task is canceled
 
-            const existingModel = itemsGroup.current.getObjectByProperty("uuid", item.modeluuid);
+            const existingModel = itemsGroup?.current?.getObjectByProperty("uuid", item.modeluuid);
             if (existingModel) {
                 // console.log(`Model ${item.modelname} already exists in the scene.`);
                 resolve();

app/src/modules/builder/groups/zoneGroup.tsx

@@ -65,6 +65,8 @@ const ZoneGroup: React.FC = () => {
                     zoneId: zone.zoneId,
                     zoneName: zone.zoneName,
                     points: zone.points,
+                    viewPortCenter: zone.viewPortCenter,
+                    viewPortposition: zone.viewPortposition,
                     layer: zone.layer
                 }));
 
@@ -145,7 +147,7 @@ const ZoneGroup: React.FC = () => {
 
         const target: [number, number, number] | null = calculateCenter(zone.points);
         if (!target) return;
-        const position = [target[0], 75, target[2]];
+        const position = [target[0], 10, target[2]];
 
         const input = {
             userId: userId,
@@ -186,7 +188,7 @@ const ZoneGroup: React.FC = () => {
 
         const target: [number, number, number] | null = calculateCenter(zone.points);
         if (!target) return;
-        const position = [target[0], 75, target[2]];
+        const position = [target[0], 10, target[2]];
 
         const input = {
             userId: userId,

app/src/modules/collaboration/socketResponses.dev.tsx

@@ -745,6 +745,7 @@ export default function SocketResponses({
                 return
             }
             if (data.message === "zone deleted") {
+                console.log('data: ', data);
                 const updatedZones = zones.filter((zone: any) => zone.zoneId !== data.data.zoneId);
                 setZones(updatedZones);
 

app/src/modules/market/Card.tsx

@@ -1,4 +1,3 @@
-// Card.tsx
 import React from "react";
 import {
   CommentsIcon,
@@ -9,51 +8,24 @@ import {
 } from "../../components/icons/marketPlaceIcons";
 
 import assetImage from "../../assets/image/image.png";
-
+const Card: React.FC = () => {
-interface CardProps {
-  assetName: string;
-  uploadedOn: string;
-  price: number;
-  rating: number;
-  views: number;
-  onSelectCard: (cardData: {
-    assetName: string;
-    uploadedOn: string;
-    price: number;
-    rating: number;
-    views: number;
-  }) => void;
-}
-
-const Card: React.FC<CardProps> = ({
-  assetName,
-  uploadedOn,
-  price,
-  rating,
-  views,
-  onSelectCard,
-}) => {
-  const handleCardSelect = () => {
-    onSelectCard({ assetName, uploadedOn, price, rating, views });
-  };
-
   return (
     <div className="card-container">
       <div className="icon">
         <DownloadIcon />
       </div>
       <div className="image-container">
-        <img src={assetImage} alt={assetName} />
+        <img src={assetImage} alt="" />
       </div>
       <div className="assets-container">
         <div className="name-container">
-          <div className="assets-name">{assetName}</div>
+          <div className="asstes-container">Asset name</div>
-          <div className="assets-date">{uploadedOn}</div>
+          <div className="assets-date">Uploaded on-12 Jan 23</div>
         </div>
         <div className="details">
           <div className="content">
             <EyeIconBig />
-            {views}
+            1.5k
           </div>
           <div className="content">
             <CommentsIcon />
@@ -67,17 +39,17 @@ const Card: React.FC<CardProps> = ({
       </div>
       <div className="stars-container">
         <div className="stars-wrapper">
-          {[...Array(5)].map((_, index) => (
+          <StarsIconSmall />
-            <StarsIconSmall key={index} />
+          <StarsIconSmall />
-          ))}
+          <StarsIconSmall />
+          <StarsIconSmall />
+          <StarsIconSmall />
         </div>
         <div className="units">
-          ₹ {price}/<span>unit</span>
+          ₹ 36,500/<span>unit</span>
         </div>
       </div>
-      <div className="buy-now-button" onClick={handleCardSelect}>
+      <div className="buy-now-button">Buy now</div>
-        Buy now
-      </div>
     </div>
   );
 };

app/src/modules/market/CardsContainer.tsx

@@ -1,149 +1,15 @@
-import React, { useState } from "react";
+import React from "react";
 import Card from "./Card";
-import AssetPreview from "./AssetPreview";
-import RenderOverlay from "../../components/templates/Overlay";
 
 const CardsContainer: React.FC = () => {
-  const array = [
+  const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-    {
-      id: 1,
-      name: "Asset 1",
-      uploadedOn: "12 Jan 23",
-      price: 36500,
-      rating: 4.5,
-      views: 500,
-    },
-    {
-      id: 2,
-      name: "Asset 2",
-      uploadedOn: "14 Jan 23",
-      price: 45000,
-      rating: 4.0,
-      views: 500,
-    },
-    {
-      id: 3,
-      name: "Asset 3",
-      uploadedOn: "15 Jan 23",
-      price: 52000,
-      rating: 4.8,
-      views: 500,
-    },
-    {
-      id: 4,
-      name: "Asset 4",
-      uploadedOn: "18 Jan 23",
-      price: 37000,
-      rating: 3.9,
-      views: 500,
-    },
-    {
-      id: 5,
-      name: "Asset 5",
-      uploadedOn: "20 Jan 23",
-      price: 60000,
-      rating: 5.0,
-      views: 500,
-    },
-    {
-      id: 6,
-      name: "Asset 6",
-      uploadedOn: "22 Jan 23",
-      price: 46000,
-      rating: 4.2,
-      views: 500,
-    },
-    {
-      id: 7,
-      name: "Asset 7",
-      uploadedOn: "25 Jan 23",
-      price: 38000,
-      rating: 4.3,
-      views: 500,
-    },
-    {
-      id: 8,
-      name: "Asset 8",
-      uploadedOn: "27 Jan 23",
-      price: 41000,
-      rating: 4.1,
-      views: 500,
-    },
-    {
-      id: 9,
-      name: "Asset 9",
-      uploadedOn: "30 Jan 23",
-      price: 55000,
-      rating: 4.6,
-      views: 500,
-    },
-    {
-      id: 10,
-      name: "Asset 10",
-      uploadedOn: "2 Feb 23",
-      price: 49000,
-      rating: 4.4,
-      views: 500,
-    },
-    {
-      id: 11,
-      name: "Asset 11",
-      uploadedOn: "5 Feb 23",
-      price: 62000,
-      rating: 5.0,
-      views: 500,
-    },
-    {
-      id: 12,
-      name: "Asset 12",
-      uploadedOn: "7 Feb 23",
-      price: 53000,
-      rating: 4.7,
-      views: 500,
-    },
-  ];
-
-  const [selectedCard, setSelectedCard] = useState<{
-    assetName: string;
-    uploadedOn: string;
-    price: number;
-    rating: number;
-    views: number;
-  } | null>(null);
-
-  const handleCardSelect = (cardData: {
-    assetName: string;
-    uploadedOn: string;
-    price: number;
-    rating: number;
-    views: number;
-  }) => {
-    setSelectedCard(cardData);
-  };
-
   return (
     <div className="cards-container-container">
       <div className="header">Products You May Like</div>
       <div className="cards-wrapper-container">
-        {array.map((asset) => (
+        {array.map((index) => (
-          <Card
+          <Card key={index} />
-            key={asset.id}
-            assetName={asset.name}
-            uploadedOn={asset.uploadedOn}
-            price={asset.price}
-            rating={asset.rating}
-            views={asset.views}
-            onSelectCard={handleCardSelect}
-          />
         ))}
-        {/* <RenderOverlay> */}
-          {selectedCard && (
-            <AssetPreview
-              selectedCard={selectedCard}
-              setSelectedCard={setSelectedCard}
-            />
-          )}
-        {/* </RenderOverlay> */}
       </div>
     </div>
   );

app/src/modules/market/FilterSearch.tsx

@@ -13,12 +13,10 @@ const FilterSearch: React.FC = () => {
   };
   return (
     <div className="filter-search-container">
-      <div className="asset-search-wrapper">
+      <Search onChange={() => {}} />
-        <Search onChange={() => {}} />
-      </div>
       <RegularDropDown
         header={activeOption}
-        options={["Alphabet ascending", "Alphabet descending"]}
+        options={["Alphabet ascending", "Alphabet descending", ""]}
         onSelect={handleSelect}
         search={false}
       />

app/src/modules/market/MarketPlace.tsx

@@ -1,18 +1,18 @@
-import React from "react";
+import React from "react";
-import FilterSearch from "./FilterSearch";
+import FilterSearch from "./FilterSearch";
-import CardsContainer from "./CardsContainer";
+import CardsContainer from "./CardsContainer";
-
+
-const MarketPlace = () => {
+const MarketPlace = () => {
-  return (
+  return (
-    <div className="marketplace-wrapper">
+    <div className="marketplace-wrapper">
-      <div className="marketplace-container">
+      <div className="marketplace-container">
-        <div className="marketPlace">
+        <div className="marketPlace">
-          <FilterSearch />
+          <FilterSearch />
-          <CardsContainer />
+          <CardsContainer />
-        </div>
+        </div>
-      </div>
+      </div>
-    </div>
+    </div>
-  );
+  );
-};
+};
-
+
-export default MarketPlace;
+export default MarketPlace;

app/src/modules/scene/scene.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { Canvas } from "@react-three/fiber";
 import { Environment, KeyboardControls } from "@react-three/drei";
 
@@ -15,6 +15,12 @@ import background from "../../assets/textures/hdr/mudroadpuresky2k.hdr";
 import SelectionControls from "./controls/selection/selectionControls";
 import MeasurementTool from "./tools/measurementTool";
 import Simulation from "../simulation/simulation";
+import ZoneCentreTarget from "../../components/ui/componets/zoneCameraTarget";
+
+import { useThree } from "@react-three/fiber";
+import * as THREE from "three";
+import DroppedObjects from "../../components/ui/componets/DroppedFloatingWidgets";
+
 // import Simulation from "./simulationtemp/simulation";
 
 export default function Scene() {
@@ -27,6 +33,9 @@ export default function Scene() {
     // { name: "jump", keys: ["Space"] },
   ], [])
 
+
+
+
   return (
     <KeyboardControls map={map}>
       <Canvas
@@ -36,12 +45,15 @@ export default function Scene() {
         onContextMenu={(e) => {
           e.preventDefault();
         }}
+
       >
+        <DroppedObjects/>
         <Controls />
         <TransformControl />
         <SelectionControls />
         <MeasurementTool />
         <World />
+        <ZoneCentreTarget />
         {/* <Simulation /> */}
         <Simulation />
         <PostProcessing />

app/src/services/realTimeVisulization/zoneData/getZones.ts

@@ -1,25 +1,23 @@
-let url_Backend_dwinzo = `http://185.100.212.76:5000`;
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
 
-export const getZonesApi = async (organization: string) => {
+export const getZoneData = async (zoneId: string, organization: string) => {
-    try {
+  try {
-        const response = await fetch(`${url_Backend_dwinzo}/api/v2/findZones/${organization}`, {
+    const response = await fetch(
-            method: "GET",
+      `${url_Backend_dwinzo}/api/v2/A_zone/${zoneId}/${organization}`,
-            headers: {
+      {
-                "Content-Type": "application/json",
+        method: "GET",
-            },
+        headers: {
-        });
+          "Content-Type": "application/json",
+        },
+      }
+    );
 
-        // if (!response.ok) {
+    if (!response.ok) {
-        //     throw new Error("Failed to get Zones");
+      throw new Error("Failed to fetch zoneData");
-        // }
-
-        const result = await response.json();
-        return result;
-    } catch (error) {
-        if (error instanceof Error) {
-            throw new Error(error.message);
-        } else {
-            throw new Error("An unknown error occurred");
-        }
     }
-};
+
+    return await response.json();
+  } catch (error: any) {
+    throw new Error(error.message);
+  }
+};

app/src/services/realTimeVisulization/zoneData/panel.ts

@@ -0,0 +1,31 @@
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_BACKEND_URL}`;
+
+type Side = "top" | "bottom" | "left" | "right";
+
+export const panelData = async (organization: string, zoneID: string, panelOrder: Side[]) => {
+    console.log('panelOrder: ', panelOrder);
+    console.log('zoneID: ', zoneID);
+    console.log('organization: ', organization);
+    try {
+        const response = await fetch(`${url_Backend_dwinzo}/api/v1/panel/save`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ organization, zoneID, panelOrder }),
+        });
+
+        if (!response.ok) {
+            throw new Error("Failed to add panelOrder for Zone");
+        }
+
+        const result = await response.json();
+        return result;
+    } catch (error) {
+        if (error instanceof Error) {
+            throw new Error(error.message);
+        } else {
+            throw new Error("An unknown error occurred");
+        }
+    }
+};

app/src/store/store.ts

@@ -1,324 +1,344 @@
 import * as THREE from "three";
-import * as Types from '../types/world/worldTypes';
+import * as Types from "../types/world/worldTypes";
 import { create } from "zustand";
 import { io } from "socket.io-client";
 
 export const useSocketStore = create<any>((set: any, get: any) => ({
-    socket: null,
+  socket: null,
-    initializeSocket: (email: any) => {
+  initializeSocket: (email: any) => {
-        const existingSocket = get().socket;
+    const existingSocket = get().socket;
-        if (existingSocket) {
+    if (existingSocket) {
-            return;
+      return;
-        }
-
-        const socket = io(`http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/`, {
-            reconnection: false,
-            auth: { email }
-        });
-
-        set({ socket });
-    },
-    disconnectSocket: () => {
-        set((state: any) => {
-            state.socket?.disconnect();
-            return { socket: null };
-        });
     }
+
+    const socket = io(
+      `http://${process.env.REACT_APP_SERVER_SOCKET_API_BASE_URL}/`,
+      {
+        reconnection: false,
+        auth: { email },
+      }
+    );
+
+    set({ socket });
+  },
+  disconnectSocket: () => {
+    set((state: any) => {
+      state.socket?.disconnect();
+      return { socket: null };
+    });
+  },
 }));
 
 export const useOrganization = create<any>((set: any) => ({
-    organization: "",
+  organization: "",
-    setOrganization: (x: any) => set(() => ({ organization: x })),
+  setOrganization: (x: any) => set(() => ({ organization: x })),
 }));
 
 export const useToggleView = create<any>((set: any) => ({
-    toggleView: false,
+  toggleView: false,
-    setToggleView: (x: any) => set(() => ({ toggleView: x })),
+  setToggleView: (x: any) => set(() => ({ toggleView: x })),
 }));
 
 export const useUpdateScene = create<any>((set: any) => ({
-    updateScene: false,
+  updateScene: false,
-    setUpdateScene: (x: any) => set(() => ({ updateScene: x })),
+  setUpdateScene: (x: any) => set(() => ({ updateScene: x })),
 }));
 
 export const useWalls = create<any>((set: any) => ({
-    walls: [],
+  walls: [],
-    setWalls: (x: any) => set(() => ({ walls: x })),
+  setWalls: (x: any) => set(() => ({ walls: x })),
 }));
 
 export const useZones = create<any>((set: any) => ({
-    zones: [],
+  zones: [],
-    setZones: (x: any) => set(() => ({ zones: x })),
+  setZones: (x: any) => set(() => ({ zones: x })),
 }));
 
 interface ZonePointsState {
-    zonePoints: THREE.Vector3[];
+  zonePoints: THREE.Vector3[];
-    setZonePoints: (points: THREE.Vector3[]) => void;
+  setZonePoints: (points: THREE.Vector3[]) => void;
 }
 
 export const useZonePoints = create<ZonePointsState>((set) => ({
-    zonePoints: [],
+  zonePoints: [],
-    setZonePoints: (points) => set({ zonePoints: points }),
+  setZonePoints: (points) => set({ zonePoints: points }),
 }));
 
 export const useSelectedItem = create<any>((set: any) => ({
-    selectedItem: { name: "", id: "" },
+  selectedItem: { name: "", id: "" },
-    setSelectedItem: (x: any) => set(() => ({ selectedItem: x })),
+  setSelectedItem: (x: any) => set(() => ({ selectedItem: x })),
 }));
 
 export const useSelectedAssets = create<any>((set: any) => ({
-    selectedAssets: [],
+  selectedAssets: [],
-    setSelectedAssets: (x: any) => set(() => ({ selectedAssets: x })),
+  setSelectedAssets: (x: any) => set(() => ({ selectedAssets: x })),
 }));
 
 export const useLayers = create<any>((set: any) => ({
-    Layers: 1,
+  Layers: 1,
-    setLayers: (x: any) => set(() => ({ Layers: x })),
+  setLayers: (x: any) => set(() => ({ Layers: x })),
 }));
 
 export const useCamPosition = create<any>((set: any) => ({
-    camPosition: { x: undefined, y: undefined, z: undefined },
+  camPosition: { x: undefined, y: undefined, z: undefined },
-    setCamPosition: (newCamPosition: any) => set({ camPosition: newCamPosition }),
+  setCamPosition: (newCamPosition: any) => set({ camPosition: newCamPosition }),
 }));
 
 export const useMenuVisible = create<any>((set: any) => ({
-    menuVisible: false,
+  menuVisible: false,
-    setMenuVisible: (x: any) => set(() => ({ menuVisible: x })),
+  setMenuVisible: (x: any) => set(() => ({ menuVisible: x })),
 }));
 
 export const useDeleteModels = create<any>((set: any) => ({
-    deleteModels: false,
+  deleteModels: false,
-    setDeleteModels: (x: any) => set(() => ({ deleteModels: x })),
+  setDeleteModels: (x: any) => set(() => ({ deleteModels: x })),
 }));
 
 export const useToolMode = create<any>((set: any) => ({
-    toolMode: null,
+  toolMode: null,
-    setToolMode: (x: any) => set(() => ({ toolMode: x })),
+  setToolMode: (x: any) => set(() => ({ toolMode: x })),
 }));
 
 export const useNewLines = create<any>((set: any) => ({
-    newLines: [],
+  newLines: [],
-    setNewLines: (x: any) => set(() => ({ newLines: x })),
+  setNewLines: (x: any) => set(() => ({ newLines: x })),
 }));
 
 export const useDeletedLines = create<any>((set: any) => ({
-    deletedLines: [],
+  deletedLines: [],
-    setDeletedLines: (x: any) => set(() => ({ deletedLines: x })),
+  setDeletedLines: (x: any) => set(() => ({ deletedLines: x })),
 }));
 
 export const useMovePoint = create<any>((set: any) => ({
-    movePoint: false,
+  movePoint: false,
-    setMovePoint: (x: any) => set(() => ({ movePoint: x })),
+  setMovePoint: (x: any) => set(() => ({ movePoint: x })),
 }));
 
 export const useTransformMode = create<any>((set: any) => ({
-    transformMode: null,
+  transformMode: null,
-    setTransformMode: (x: any) => set(() => ({ transformMode: x })),
+  setTransformMode: (x: any) => set(() => ({ transformMode: x })),
 }));
 
 export const useDeletePointOrLine = create<any>((set: any) => ({
-    deletePointOrLine: false,
+  deletePointOrLine: false,
-    setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })),
+  setDeletePointOrLine: (x: any) => set(() => ({ deletePointOrLine: x })),
 }));
 
 export const useFloorItems = create<any>((set: any) => ({
-    floorItems: null,
+  floorItems: null,
-    setFloorItems: (callback: any) =>
+  setFloorItems: (callback: any) =>
-        set((state: any) => ({
+    set((state: any) => ({
-            floorItems:
+      floorItems:
-                typeof callback === "function"
+        typeof callback === "function" ? callback(state.floorItems) : callback,
-                    ? callback(state.floorItems)
+    })),
-                    : callback,
-        })),
 }));
 
 export const useWallItems = create<any>((set: any) => ({
-    wallItems: [],
+  wallItems: [],
-    setWallItems: (callback: any) =>
+  setWallItems: (callback: any) =>
-        set((state: any) => ({
+    set((state: any) => ({
-            wallItems:
+      wallItems:
-                typeof callback === "function"
+        typeof callback === "function" ? callback(state.wallItems) : callback,
-                    ? callback(state.wallItems)
+    })),
-                    : callback,
-        })),
 }));
 
 export const useSelectedWallItem = create<any>((set: any) => ({
-    selectedWallItem: null,
+  selectedWallItem: null,
-    setSelectedWallItem: (x: any) => set(() => ({ selectedWallItem: x })),
+  setSelectedWallItem: (x: any) => set(() => ({ selectedWallItem: x })),
 }));
 
 export const useselectedFloorItem = create<any>((set: any) => ({
-    selectedFloorItem: null,
+  selectedFloorItem: null,
-    setselectedFloorItem: (x: any) => set(() => ({ selectedFloorItem: x })),
+  setselectedFloorItem: (x: any) => set(() => ({ selectedFloorItem: x })),
 }));
 
 export const useDeletableFloorItem = create<any>((set: any) => ({
-    deletableFloorItem: null,
+  deletableFloorItem: null,
-    setDeletableFloorItem: (x: any) => set(() => ({ deletableFloorItem: x })),
+  setDeletableFloorItem: (x: any) => set(() => ({ deletableFloorItem: x })),
 }));
 
 export const useSetScale = create<any>((set: any) => ({
-    scale: null,
+  scale: null,
-    setScale: (x: any) => set(() => ({ scale: x })),
+  setScale: (x: any) => set(() => ({ scale: x })),
 }));
 
 export const useRoofVisibility = create<any>((set: any) => ({
-    roofVisibility: false,
+  roofVisibility: false,
-    setRoofVisibility: (x: any) => set(() => ({ roofVisibility: x })),
+  setRoofVisibility: (x: any) => set(() => ({ roofVisibility: x })),
 }));
 
 export const useWallVisibility = create<any>((set: any) => ({
-    wallVisibility: false,
+  wallVisibility: false,
-    setWallVisibility: (x: any) => set(() => ({ wallVisibility: x })),
+  setWallVisibility: (x: any) => set(() => ({ wallVisibility: x })),
 }));
 
 export const useShadows = create<any>((set: any) => ({
-    shadows: false,
+  shadows: false,
-    setShadows: (x: any) => set(() => ({ shadows: x })),
+  setShadows: (x: any) => set(() => ({ shadows: x })),
 }));
 
 export const useSunPosition = create<any>((set: any) => ({
-    sunPosition: { x: undefined, y: undefined, z: undefined },
+  sunPosition: { x: undefined, y: undefined, z: undefined },
-    setSunPosition: (newSuntPosition: any) => set({ sunPosition: newSuntPosition }),
+  setSunPosition: (newSuntPosition: any) =>
+    set({ sunPosition: newSuntPosition }),
 }));
 
 export const useRemoveLayer = create<any>((set: any) => ({
-    removeLayer: false,
+  removeLayer: false,
-    setRemoveLayer: (x: any) => set(() => ({ removeLayer: x })),
+  setRemoveLayer: (x: any) => set(() => ({ removeLayer: x })),
 }));
 
 export const useRemovedLayer = create<any>((set: any) => ({
-    removedLayer: null,
+  removedLayer: null,
-    setRemovedLayer: (x: any) => set(() => ({ removedLayer: x })),
+  setRemovedLayer: (x: any) => set(() => ({ removedLayer: x })),
 }));
 
 export const useActiveLayer = create<any>((set: any) => ({
-    activeLayer: 1,
+  activeLayer: 1,
-    setActiveLayer: (x: any) => set({ activeLayer: x }),
+  setActiveLayer: (x: any) => set({ activeLayer: x }),
 }));
 
 export const useResetCamera = create<any>((set: any) => ({
-    resetCamera: false,
+  resetCamera: false,
-    setResetCamera: (x: any) => set({ resetCamera: x }),
+  setResetCamera: (x: any) => set({ resetCamera: x }),
 }));
 
 export const useAddAction = create<any>((set: any) => ({
-    addAction: null,
+  addAction: null,
-    setAddAction: (x: any) => set({ addAction: x }),
+  setAddAction: (x: any) => set({ addAction: x }),
 }));
 
 export const useActiveTool = create<any>((set: any) => ({
-    activeTool: "Cursor",
+  activeTool: "Cursor",
-    setActiveTool: (x: any) => set({ activeTool: x }),
+  setActiveTool: (x: any) => set({ activeTool: x }),
 }));
 
 export const use2DUndoRedo = create<any>((set: any) => ({
-    is2DUndoRedo: null,
+  is2DUndoRedo: null,
-    set2DUndoRedo: (x: any) => set({ is2DUndoRedo: x }),
+  set2DUndoRedo: (x: any) => set({ is2DUndoRedo: x }),
-}))
+}));
 
 export const useElevation = create<any>((set: any) => ({
-    elevation: 45,
+  elevation: 45,
-    setElevation: (x: any) => set({ elevation: x }),
+  setElevation: (x: any) => set({ elevation: x }),
 }));
 
 export const useAzimuth = create<any>((set: any) => ({
-    azimuth: -160,
+  azimuth: -160,
-    setAzimuth: (x: any) => set({ azimuth: x }),
+  setAzimuth: (x: any) => set({ azimuth: x }),
 }));
 
 export const useRenderDistance = create<any>((set: any) => ({
-    renderDistance: 50,
+  renderDistance: 50,
-    setRenderDistance: (x: any) => set({ renderDistance: x }),
+  setRenderDistance: (x: any) => set({ renderDistance: x }),
 }));
 
 export const useCamMode = create<any>((set: any) => ({
-    camMode: "ThirdPerson",
+  camMode: "ThirdPerson",
-    setCamMode: (x: any) => set({ camMode: x }),
+  setCamMode: (x: any) => set({ camMode: x }),
 }));
 
 export const useUserName = create<any>((set: any) => ({
-    userName: "",
+  userName: "",
-    setUserName: (x: any) => set({ userName: x }),
+  setUserName: (x: any) => set({ userName: x }),
 }));
 
 export const useObjectPosition = create<any>((set: any) => ({
-    objectPosition: { x: undefined, y: undefined, z: undefined },
+  objectPosition: { x: undefined, y: undefined, z: undefined },
-    setObjectPosition: (newObjectPosition: any) => set({ objectPosition: newObjectPosition }),
+  setObjectPosition: (newObjectPosition: any) =>
+    set({ objectPosition: newObjectPosition }),
 }));
 
 export const useObjectScale = create<any>((set: any) => ({
-    objectScale: { x: undefined, y: undefined, z: undefined },
+  objectScale: { x: undefined, y: undefined, z: undefined },
-    setObjectScale: (newObjectScale: any) => set({ objectScale: newObjectScale }),
+  setObjectScale: (newObjectScale: any) => set({ objectScale: newObjectScale }),
 }));
 
 export const useObjectRotation = create<any>((set: any) => ({
-    objectRotation: { x: undefined, y: undefined, z: undefined },
+  objectRotation: { x: undefined, y: undefined, z: undefined },
-    setObjectRotation: (newObjectRotation: any) => set({ objectRotation: newObjectRotation }),
+  setObjectRotation: (newObjectRotation: any) =>
+    set({ objectRotation: newObjectRotation }),
 }));
 
 export const useDrieTemp = create<any>((set: any) => ({
-    drieTemp: undefined,
+  drieTemp: undefined,
-    setDrieTemp: (x: any) => set({ drieTemp: x }),
+  setDrieTemp: (x: any) => set({ drieTemp: x }),
 }));
 
 export const useActiveUsers = create<any>((set: any) => ({
-    activeUsers: [],
+  activeUsers: [],
-    setActiveUsers: (x: any) => set({ activeUsers: x }),
+  setActiveUsers: (x: any) => set({ activeUsers: x }),
 }));
 
 export const useDrieUIValue = create<any>((set: any) => ({
-    drieUIValue: { touch: null, temperature: null, humidity: null },
+  drieUIValue: { touch: null, temperature: null, humidity: null },
 
-    setDrieUIValue: (x: any) => set((state: any) => ({ drieUIValue: { ...state.drieUIValue, ...x } })),
+  setDrieUIValue: (x: any) =>
+    set((state: any) => ({ drieUIValue: { ...state.drieUIValue, ...x } })),
 
-    setTouch: (value: any) => set((state: any) => ({ drieUIValue: { ...state.drieUIValue, touch: value } })),
+  setTouch: (value: any) =>
-    setTemperature: (value: any) => set((state: any) => ({ drieUIValue: { ...state.drieUIValue, temperature: value } })),
+    set((state: any) => ({
-    setHumidity: (value: any) => set((state: any) => ({ drieUIValue: { ...state.drieUIValue, humidity: value } })),
+      drieUIValue: { ...state.drieUIValue, touch: value },
+    })),
+  setTemperature: (value: any) =>
+    set((state: any) => ({
+      drieUIValue: { ...state.drieUIValue, temperature: value },
+    })),
+  setHumidity: (value: any) =>
+    set((state: any) => ({
+      drieUIValue: { ...state.drieUIValue, humidity: value },
+    })),
 }));
 
 export const useDrawMaterialPath = create<any>((set: any) => ({
-    drawMaterialPath: false,
+  drawMaterialPath: false,
-    setDrawMaterialPath: (x: any) => set({ drawMaterialPath: x }),
+  setDrawMaterialPath: (x: any) => set({ drawMaterialPath: x }),
 }));
 
 export const useSelectedActionSphere = create<any>((set: any) => ({
-    selectedActionSphere: undefined,
+  selectedActionSphere: undefined,
-    setSelectedActionSphere: (x: any) => set({ selectedActionSphere: x }),
+  setSelectedActionSphere: (x: any) => set({ selectedActionSphere: x }),
 }));
 
 export const useSelectedPath = create<any>((set: any) => ({
-    selectedPath: undefined,
+  selectedPath: undefined,
-    setSelectedPath: (x: any) => set({ selectedPath: x }),
+  setSelectedPath: (x: any) => set({ selectedPath: x }),
 }));
 
 interface Path {
-    modeluuid: string;
+  modeluuid: string;
-    modelName: string;
+  modelName: string;
-    points: {
+  points: {
-        uuid: string;
+    uuid: string;
-        position: [number, number, number];
+    position: [number, number, number];
-        rotation: [number, number, number];
+    rotation: [number, number, number];
-        actions: { uuid: string; type: string; material: string; delay: number | string; spawnInterval: number | string; isUsed: boolean }[] | [];
+    actions:
-        triggers: { uuid: string; type: string; isUsed: boolean }[] | [];
+      | {
-    }[];
+          uuid: string;
-    pathPosition: [number, number, number];
+          type: string;
-    pathRotation: [number, number, number];
+          material: string;
-    speed: number;
+          delay: number | string;
+          spawnInterval: number | string;
+          isUsed: boolean;
+        }[]
+      | [];
+    triggers: { uuid: string; type: string; isUsed: boolean }[] | [];
+  }[];
+  pathPosition: [number, number, number];
+  pathRotation: [number, number, number];
+  speed: number;
 }
 
 interface SimulationPathsStore {
-    simulationPaths: Path[];
+  simulationPaths: Path[];
-    setSimulationPaths: (paths: Path[]) => void;
+  setSimulationPaths: (paths: Path[]) => void;
 }
 
 export const useSimulationPaths = create<SimulationPathsStore>((set) => ({
-    simulationPaths: [],
+  simulationPaths: [],
-    setSimulationPaths: (paths) => set({ simulationPaths: paths }),
+  setSimulationPaths: (paths) => set({ simulationPaths: paths }),
 }));
 
-
 // interface Point {
 //     uuid: string;
 //     position: [number, number, number];
@@ -363,40 +383,75 @@ export const useSimulationPaths = create<SimulationPathsStore>((set) => ({
 //     setSimulationPaths: (paths) => set({ simulationPaths: paths }),
 // }));
 
-
 export const useConnections = create<Types.ConnectionStore>((set) => ({
-    connections: [],
+  connections: [],
 
-    setConnections: (connections) => set({ connections }),
+  setConnections: (connections) => set({ connections }),
 
-    addConnection: (newConnection) =>
+  addConnection: (newConnection) =>
-        set((state) => ({
+    set((state) => ({
-            connections: [...state.connections, newConnection],
+      connections: [...state.connections, newConnection],
-        })),
+    })),
 
-    removeConnection: (fromUUID, toUUID) =>
+  removeConnection: (fromUUID, toUUID) =>
-        set((state) => ({
+    set((state) => ({
-            connections: state.connections
+      connections: state.connections
-                .map((connection) =>
+        .map((connection) =>
-                    connection.fromUUID === fromUUID
+          connection.fromUUID === fromUUID
-                        ? {
+            ? {
-                            ...connection,
+                ...connection,
-                            toConnections: connection.toConnections.filter(
+                toConnections: connection.toConnections.filter(
-                                (to) => to.toUUID !== toUUID
+                  (to) => to.toUUID !== toUUID
-                            ),
+                ),
-                        }
+              }
-                        : connection
+            : connection
-                )
+        )
-                .filter((connection) => connection.toConnections.length > 0),
+        .filter((connection) => connection.toConnections.length > 0),
-        })),
+    })),
 }));
 
 export const useIsConnecting = create<any>((set: any) => ({
-    isConnecting: false,
+  isConnecting: false,
-    setIsConnecting: (x: any) => set({ isConnecting: x }),
+  setIsConnecting: (x: any) => set({ isConnecting: x }),
 }));
 
 export const useStartSimulation = create<any>((set: any) => ({
-    startSimulation: false,
+  startSimulation: false,
-    setStartSimulation: (x: any) => set({ startSimulation: x }),
+  setStartSimulation: (x: any) => set({ startSimulation: x }),
-}));
+}));
+export const usezoneTarget = create<any>((set: any) => ({
+  zoneTarget: [],
+  setZoneTarget: (x: any) => set({ zoneTarget: x }),
+}));
+export const usezonePosition = create<any>((set: any) => ({
+  zonePosition: [],
+  setZonePosition: (x: any) => set({ zonePosition: x }),
+}));
+
+
+interface EditPositionState {
+    Edit: boolean;
+    setEdit: (value: boolean) => void;
+  }
+  
+  export const useEditPosition = create<EditPositionState>((set) => ({
+    Edit: false,
+    setEdit: (value) => set({ Edit: value }), // Properly updating the state
+  }));
+
+  interface DroppedObject {
+    header: string;
+    value: string;
+    per: string;
+    className: string;
+  }
+  
+  interface DroppedObjectsState {
+    objects: DroppedObject[];
+    addObject: (obj: DroppedObject) => void;
+  }
+  
+  export const useDroppedObjectsStore = create<DroppedObjectsState>((set) => ({
+    objects: [],
+    addObject: (obj) => set((state) => ({ objects: [...state.objects, obj] })),
+  }));

app/src/store/useChartStore.ts

@@ -0,0 +1,28 @@
+import { create } from "zustand";
+
+interface Measurement {
+  name: string;
+  fields: string;
+}
+
+interface MeasurementStore {
+  measurements: Measurement[];
+  interval: number;
+  duration: string;
+  setMeasurements: (newMeasurements: Measurement[]) => void;
+  updateDuration: (newDuration: string) => void;
+}
+
+const useChartStore = create<MeasurementStore>((set) => ({
+  measurements: [],
+  interval: 1000,
+  duration: "1h",
+
+  setMeasurements: (newMeasurements) =>
+    set(() => ({ measurements: newMeasurements })),
+
+  updateDuration: (newDuration) =>
+    set(() => ({ duration: newDuration })),
+}));
+
+export default useChartStore;

app/src/store/useZoneStore.ts

@@ -15,21 +15,31 @@ interface SelectedZoneState {
   activeSides: Side[];
   panelOrder: Side[];
   lockedPanels: Side[];
+  zoneId: string;
+  zoneViewPortTarget: number[];
+  zoneViewPortPosition: number[];
   widgets: Widget[];
 }
 
 interface SelectedZoneStore {
   selectedZone: SelectedZoneState;
-  setSelectedZone: (zone: Partial<SelectedZoneState> | ((prev: SelectedZoneState) => SelectedZoneState)) => void;
+  setSelectedZone: (
+    zone:
+      | Partial<SelectedZoneState>
+      | ((prev: SelectedZoneState) => SelectedZoneState)
+  ) => void;
 }
 
 export const useSelectedZoneStore = create<SelectedZoneStore>((set) => ({
   selectedZone: {
-    zoneName: "",
+    zoneName: "", // Empty string initially
-    activeSides: [],
+    activeSides: [], // Empty array
-    panelOrder: [],
+    panelOrder: [], // Empty array
-    lockedPanels: [],
+    lockedPanels: [], // Empty array
-    widgets: [],
+    zoneId: "",
+    zoneViewPortTarget: [],
+    zoneViewPortPosition: [],
+    widgets: [], // Empty array
   },
   setSelectedZone: (zone) =>
     set((state) => ({
@@ -38,4 +48,4 @@ export const useSelectedZoneStore = create<SelectedZoneStore>((set) => ({
           ? zone(state.selectedZone) // Handle functional updates
           : { ...state.selectedZone, ...zone }, // Handle partial updates
     })),
-}));
+}));

app/src/styles/components/marketPlace/marketPlace.scss

@@ -2,370 +2,186 @@
 @use "../../abstracts/mixins.scss" as *;
 
 .marketplace-wrapper {
-  height: 100vh;
+    height: 100vh;
-  width: 100vw;
+    width: 100vw;
-  z-index: #{$z-index-marketplace};
+    z-index: #{$z-index-marketplace};
-  background-color: var(--background-color-secondary);
+    background-color: var(--background-color-secondary);
-  position: absolute;
+    position: absolute;
-  left: 0;
+    left: 0;
-  padding: 95px 8px;
+    padding: 100px 50px;
-  padding-bottom: 32px;
 
-  .marketplace-container {
+    .marketplace-container {
-    padding: 20px 2px;
+        padding: 20px 2px;
-    // height: calc(100vh - 120px);
+        height: calc(100vh - 120px);
-    height: 100%;
+        background-color: var(--background-color);
-    background-color: var(--background-color);
+        box-shadow: #{$box-shadow-medium};
-    box-shadow: #{$box-shadow-medium};
+        border-radius: #{$border-radius-extra-large};
-    border-radius: #{$border-radius-extra-large};
-    position: relative;
-  }
-
-  .marketPlace {
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    left: calc(120px / 2);
-    top: 100px;
-    padding: 14px;
-    padding-bottom: 60px;
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-
-    .filter-search-container {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      gap: 20px;
-
-      .asset-search-wrapper {
-        min-width: 60%;
-        max-width: 684px;
-        padding: 0;
-        border-radius: $border-radius-large;
-        .search-wrapper {
-          padding: 0 12px;
-          .search-container {
-            display: flex;
-            align-items: center;
-            width: 100%;
-            border: none !important;
-            border-radius: $border-radius-large;
-            overflow: hidden;
-            padding: 6px 12px;
-            outline: 1px solid var(--border-color);
-
-            input {
-              border: none !important;
-              outline: none;
-            }
-          }
-        }
-      }
-
-      .regularDropdown-container {
-        max-width: 159px;
-        max-height: 30px;
-        height: 100%;
-        .dropdown-header {
-          align-items: center;
-        }
-      }
-
-      .button {
-        padding: 5px 20px;
-        border: 1px solid var(--accent-color);
-        border-radius: 14px;
-        color: var(--accent-color);
-      }
-
-      .rating-container {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-
-        .stars {
-          display: flex;
-          align-items: center;
-        }
-      }
     }
 
-    .cards-container-container {
+    .marketPlace {
-      padding: 0px 20px;
+        width: 100%;
-      display: flex;
+        height: 100%;
-      flex-direction: column;
+        overflow: auto;
-      gap: 6px;
+        left: calc(120px / 2);
-
+        top: 100px;
-      .header {
+        padding: 14px;
-        color: var(--text-color);
+        padding-bottom: 60px;
-        font-weight: $medium-weight;
-        font-size: $xlarge;
-        margin: 10px 0;
-      }
-
-      .cards-wrapper-container {
         display: flex;
-        flex-wrap: wrap;
+        flex-direction: column;
-        gap: 28px;
+        gap: 24px;
 
-        .card-container {
+        .filter-search-container {
-          width: calc(25% - 23px);
-          border-radius: 18px;
-          padding: 12px;
-          box-shadow: 0px 2px 10.5px 0px #0000000d;
-          border: 1px solid var(--background-accent-transparent, #e0dfff80);
-          position: relative;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          gap: 6px;
-
-          .icon {
-            position: absolute;
-            top: 12px;
-            left: 12px;
-            width: 30px;
-            height: 30px;
-            border-radius: 10px;
-            padding: 5px;
-            background-color: var(--accent-color);
-            cursor: pointer;
-          }
-
-          .image-container {
             width: 100%;
             display: flex;
-            justify-content: center;
+            align-items: center;
-          }
+            gap: 12px;
 
-          .assets-container {
+            .search-wrapper {
-            display: flex;
+                min-width: 60%;
-            justify-content: space-between;
+                max-width: 684px;
+                padding: 0;
+                border-radius: $border-radius-large ;
 
-            .name-container {
+                .search-container {
-              display: flex;
+                    border: none !important;
-              flex-direction: column;
+                    box-shadow: $box-shadow-medium;
-              gap: 3px;
+                    border-radius: $border-radius-large ;
 
-              .asstes-container {
+                    input {
-                font-weight: #{$bold-weight};
+                        border: none !important;
-                font-size: $regular;
+                        outline: none;
-              }
 
-              .assets-date {
+                    }
-                color: var(--accent-color);
+                }
-                font-size: $small;
-              }
             }
 
-            .details {
+            .regularDropdown-container {
-              display: flex;
+                max-width: 159px;
-              align-items: center;
+            }
-              gap: 10px;
 
-              .content {
+            .button {
+                padding: 5px 20px;
+                border: 1px solid var(--accent-color);
+                border-radius: 14px;
+            }
+
+            .rating-container {
                 display: flex;
                 align-items: center;
                 gap: 6px;
-              }
+
+                .stars {
+                    display: flex;
+                    align-items: center;
+
+                }
             }
-          }
+        }
 
-          .vendor-icon {
+        .cards-container-container {
-            font-weight: #{$bold-weight};
+            padding: 0px 20px;
-            font-size: $regular;
-          }
-
-          .stars-container {
             display: flex;
-            justify-content: space-between;
+            flex-direction: column;
-          }
+            gap: 6px;
 
-          .buy-now-button {
+            .header {
-            width: 100%;
+                color: var(--text-color);
-            background-color: var(--background-color-secondary);
+                font-weight: $medium-weight;
-            border-radius: $border-radius-extra-large;
+                font-size: $xlarge;
-            padding: 8px 0;
+            }
-            @include flex-center;
+
-            color: var(--accent-color);
+            .cards-wrapper-container {
-
+                display: flex;
-            &:hover {
+                flex-wrap: wrap;
-              cursor: pointer;
+                gap: 28px;
+
+                .card-container {
+                    width: calc(25% - 23px);
+                    border-radius: 18px;
+                    padding: 12px;
+                    box-shadow: 0px 2px 10.5px 0px #0000000D;
+                    border: 1px solid var(--background-accent-transparent, #E0DFFF80);
+                    position: relative;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    gap: 6px;
+
+                    .icon {
+                        position: absolute;
+                        top: 12px;
+                        left: 12px;
+                        width: 30px;
+                        height: 30px;
+                        border-radius: 10px;
+                        padding: 5px;
+                        background-color: var(--accent-color);
+                    }
+
+                    .image-container {
+                        width: 100%;
+                        display: flex;
+                        justify-content: center;
+                    }
+
+                    .assets-container {
+                        display: flex;
+                        justify-content: space-between;
+
+                        .name-container {
+                            display: flex;
+                            flex-direction: column;
+                            gap: 3px;
+
+                            .asstes-container {
+                                font-weight: #{$bold-weight};
+                                font-size: $regular ;
+                            }
+
+                            .assets-date {
+                                color: var(--accent-color);
+                                font-size: $small;
+                            }
+                        }
+
+                        .details {
+                            display: flex;
+                            align-items: center;
+                            gap: 10px;
+
+                            .content {
+                                display: flex;
+                                align-items: center;
+                                gap: 6px;
+                            }
+                        }
+                    }
+
+                    .vendor-icon {
+
+                        font-weight: #{$bold-weight};
+                        font-size: $regular ;
+                    }
+
+                    .stars-container {
+                        display: flex;
+                        justify-content: space-between;
+                    }
+
+                    .buy-now-button {
+                        width: 100%;
+                        background-color: var(--background-color-secondary);
+                        border-radius: $border-radius-extra-large ;
+                        padding: 8px 0;
+                        @include flex-center;
+                        color: var(--accent-color);
+
+                        &:hover {
+                            cursor: pointer;
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
-}
-
-.assetPreview-wrapper {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  .assetPreview {
-    width: 100%;
-    height: 100%;
-    background-color: var(--background-color);
-    display: flex;
-    gap: 12px;
-    z-index: 100;
-    border-radius: 20px;
-  }
-
-  // Image Preview Section
-  .image-preview {
-    width: 50%;
-    height: 100%;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-    }
-  }
-
-  // Asset Details Section
-  .asset-details-preview {
-    width: 50%;
-    padding: 50px 20px;
-    overflow-y: auto;
-  }
-
-  // Organization Section (Top part with image and details)
-  .organization {
-    display: flex;
-    align-items: center;
-    margin-bottom: 20px;
-    gap: 10px;
-
-    .image {
-      @include flex-center;
-      height: 30px;
-      width: 30px;
-      min-height: 26px;
-      min-width: 26px;
-      border-radius: 50%;
-      font-weight: var(--font-weight-bold);
-      color: var(--background-color);
-      background-color: var(--accent-color);
-    }
-
-    .organization-details {
-      display: flex;
-      flex-direction: column;
-
-      .organization-name {
-        font-weight: bold;
-        margin-bottom: 5px;
-
-        font-weight: #{$bold-weight};
-        font-size: $regular;
-      }
-
-      .follow {
-        color: var(--accent-color);
-        cursor: pointer;
-      }
-    }
-  }
-
-  // Asset Details
-  .asset-details {
-    margin-top: 20px;
-
-    .asset-name {
-      font-size: 1.5em;
-      font-weight: bold;
-      margin-bottom: 10px;
-      font-weight: #{$bold-weight};
-      font-size: $large;
-    }
-
-    .asset-description {
-      margin-bottom: 20px;
-      color: #666;
-    }
-
-    .asset-review {
-      width: fit-content;
-      padding: 5px 10px;
-      display: flex;
-      align-items: center;
-      margin-bottom: 20px;
-      outline: 1px solid #909090cc;
-      border-radius: 6px;
-
-      .asset-rating {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        margin-right: 10px;
-        font-weight: bold;
-        position: relative;
-
-        font-weight: #{$bold-weight};
-        font-size: $regular;
-
-        &::after {
-          margin-left: 5px;
-          content: "";
-          display: block;
-          width: 2px;
-          height: 12px;
-          background-color: #ccc;
-        }
-      }
-
-      .asset-view {
-        font-weight: #{$bold-weight};
-        font-size: $regular;
-      }
-    }
-
-    .asset-price {
-      font-size: $xxlarge;
-      font-weight: bold;
-      margin-bottom: 20px;
-    }
-  }
-
-  // Button Container and Button Styles
-  .button-container {
-    display: flex;
-    gap: 10px;
-  }
-
-  .button {
-    color: white;
-    padding: 10px 20px;
-    border-radius: 5px;
-    cursor: pointer;
-    text-align: center;
-
-    &:first-child {
-      outline: 1px solid var(--accent-color);
-      color: var(--accent-color);
-    }
-
-    &:last-child {
-      background-color: var(--accent-color);
-      color: var(--background-color);
-    }
-  }
-
-  .closeButton {
-    color: var(--accent-color);
-    position: absolute;
-    top: 18px;
-    left: 18px;
-    @include flex-center;
-    cursor: pointer;
-    font-size: var(--font-size-large);
-  }
 }

app/src/styles/pages/realTimeViz.scss

@@ -1,5 +1,4 @@
 @use "../abstracts/variables.scss" as *;
-@use "../abstracts/mixins" as *;
 
 // Main Container
 .realTime-viz {
@@ -149,8 +148,9 @@
     background: white;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
+    border-radius: 6px;
     overflow: visible !important;
-    
+
     .panel-content {
       position: relative;
       height: 100%;
@@ -160,7 +160,6 @@
       flex-direction: column;
       gap: 10px;
       background-color: var(--background-color);
-      border-radius: #{$border-radius-small};
 
       &::-webkit-scrollbar {
         display: none;
@@ -195,6 +194,8 @@
       left: 0;
       right: 0;
 
+
+
       .panel-content {
         display: flex;
         flex-direction: row;
@@ -235,9 +236,9 @@
   }
 }
 
-.playingFlase {
+.playingFlase{
-  .zoon-wrapper.bottom {
+  .zoon-wrapper{
-    bottom: 300px;
+    bottom: 300px !important;
   }
 }
 // Side Buttons
@@ -245,11 +246,9 @@
   position: absolute;
   display: flex;
   background-color: var(--background-color);
-  padding: 2px;
+  padding: 5px;
-  border-radius: 2px;
+  border-radius: 8px;
   transition: transform 0.3s ease;
-  box-shadow: #{$box-shadow-medium};
-  // outline: 1px solid var(--border-color);
 
   .extra-Bs {
     display: flex;
@@ -279,29 +278,13 @@
     transition: background-color 0.3s ease;
     width: 18px;
     height: 18px;
-    @include flex-center;
+    display: flex;
+    justify-content: center;
+    // align-items: center;
     background-color: var(--accent-color);
     border: none;
     color: var(--background-color);
     border-radius: 4px;
-    .add-icon {
-      @include flex-center;
-      transition: rotate 0.2s;
-    }
-    path {
-      stroke: var(--primary-color);
-      stroke-width: 2;
-    }
-  }
-  .active {
-    background: #ffe3e0;
-    .add-icon {
-      rotate: 45deg;
-      path {
-        stroke: #f65648;
-        stroke-width: 2;
-      }
-    }
   }
 
   &.top {

compose.yaml

@@ -1,24 +1,24 @@
-services:
+services:
-  frontend:
+  frontend:
-    build: 
+    build: 
-      context: ./app
+      context: ./app
-      dockerfile: Dockerfile
+      dockerfile: Dockerfile
-      args:
+      args:
-        - REACT_APP_SERVER_SOCKET_API_BASE_URL=185.100.212.76:8000
+        - REACT_APP_SERVER_SOCKET_API_BASE_URL=185.100.212.76:8000
-        - REACT_APP_SERVER_REST_API_BASE_URL=185.100.212.76:5000
+        - REACT_APP_SERVER_REST_API_BASE_URL=185.100.212.76:5000
-        - REACT_APP_SERVER_MARKETPLACE_URL=185.100.212.76:50011
+        - REACT_APP_SERVER_MARKETPLACE_URL=185.100.212.76:50011
-    container_name: dwinzo-beta
+    container_name: dwinzo-beta
-    stdin_open: true
+    stdin_open: true
-    tty: true
+    tty: true
-    ports:
+    ports:
-      - "8200:3000"
+      - "8200:3000"
-    environment:
+    environment:
-      - WDS_SOCKET_PORT=0
+      - WDS_SOCKET_PORT=0
-      - PORT=3000
+      - PORT=3000
-      - DOCSIFY_PORT=8201
+      - DOCSIFY_PORT=8201
-    volumes:
+    volumes:
-      - ./app:/app
+      - ./app:/app
-
+
-volumes:
+volumes:
-  frontend:
+  frontend:
-    driver: local
+    driver: local