updated

2025-06-23 09:37:53 +05:30
parent 2fbdf8ab61
commit 54b02541c1
278 changed files with 10134 additions and 7904 deletions
--- a/app/src/components/layout/sidebarRight/Header.tsx
+++ b/app/src/components/layout/sidebarRight/Header.tsx
@@ -8,10 +8,11 @@ import { useSelectedUserStore } from "../../../store/collaboration/useCollabStor
 import { useToggleStore } from "../../../store/useUIToggleStore";
 import { ToggleSidebarIcon } from "../../icons/HeaderIcons";
 import useModuleStore from "../../../store/useModuleStore";
+import { getUserData } from "../../../functions/getUserData";

 const Header: React.FC = () => {
  const { activeUsers } = useActiveUsers();
-  const userName = localStorage.getItem("userName") ?? "Anonymous";
+  const { userName } = getUserData();
  const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
  const { activeModule } = useModuleStore();

@@ -113,7 +114,7 @@ const Header: React.FC = () => {
            ))}
          </div>
          <div className="user-profile-container">
-            <div className="user-profile">{userName[0]}</div>
+            <div className="user-profile">{userName?.charAt(0).toUpperCase()}</div>
            <div className="user-organization">
              <img src={orgImg} alt="" />
            </div>
--- a/app/src/components/layout/sidebarRight/SideBarRight.tsx
+++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx
@@ -13,7 +13,7 @@ import { useToggleStore } from "../../../store/useUIToggleStore";
 import Visualization from "./visualization/Visualization";
 import Analysis from "./analysis/Analysis";
 import Simulations from "./simulation/Simulations";
-import useVersionHistoryStore, {
+import useVersionHistoryVisibleStore, {
  useSaveVersion,
  useSelectedFloorItem,
  useToolMode,
@@ -38,7 +38,7 @@ const SideBarRight: React.FC = () => {
  const { selectedFloorItem } = useSelectedFloorItem();
  const { selectedEventData } = useSelectedEventData();
  const { selectedEventSphere } = useSelectedEventSphere();
-  const { viewVersionHistory, setVersionHistory } = useVersionHistoryStore();
+  const { viewVersionHistory, setVersionHistoryVisible } = useVersionHistoryVisibleStore();
  const { isVersionSaved } = useSaveVersion();

  // Reset activeList whenever activeModule changes
@@ -81,7 +81,7 @@ const SideBarRight: React.FC = () => {
                    }`}
                  onClick={() => {
                    setSubModule("properties");
-                    setVersionHistory(false);
+                    setVersionHistoryVisible(false);
                  }}
                >
                  <div className="tooltip">properties</div>
@@ -96,7 +96,7 @@ const SideBarRight: React.FC = () => {
                      }`}
                    onClick={() => {
                      setSubModule("simulations");
-                      setVersionHistory(false);
+                      setVersionHistoryVisible(false);
                    }}
                  >
                    <div className="tooltip">simulations</div>
@@ -108,7 +108,7 @@ const SideBarRight: React.FC = () => {
                      }`}
                    onClick={() => {
                      setSubModule("mechanics");
-                      setVersionHistory(false);
+                      setVersionHistoryVisible(false);
                    }}
                  >
                    <div className="tooltip">mechanics</div>
@@ -120,7 +120,7 @@ const SideBarRight: React.FC = () => {
                      }`}
                    onClick={() => {
                      setSubModule("analysis");
-                      setVersionHistory(false);
+                      setVersionHistoryVisible(false);
                    }}
                  >
                    <div className="tooltip">analysis</div>
--- a/app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx
+++ b/app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx
@@ -24,7 +24,7 @@ const Vector3Input: React.FC<PositionInputProps> = ({
    if (!value) return;
    const updatedValue = [...value] as [number, number, number];
    updatedValue[index] = parseFloat(newValue) || 0;
-    console.log('updatedValue: ', updatedValue);
+    // console.log('updatedValue: ', updatedValue);
    onChange(updatedValue);
  };

--- a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
@@ -20,6 +20,7 @@ import {
 import { setEnvironment } from "../../../../services/factoryBuilder/environment/setEnvironment";
 import * as CONSTANTS from "../../../../types/world/worldConstants";
 import { useParams } from "react-router-dom";
+import { getUserData } from "../../../../functions/getUserData";
 const GlobalProperties: React.FC = () => {
    const { toggleView, setToggleView } = useToggleView();
    const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
@@ -38,14 +39,13 @@ const GlobalProperties: React.FC = () => {
    const [limitGridDistance, setLimitGridDistance] = useState(false);
    const [gridDistance, setGridDistance] = useState<number>(3);
    const { projectId } = useParams();
+    const { email, userId, organization } = getUserData();

    const optimizeScene = async (value: any) => {
-        const email = localStorage.getItem("email");
-        const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg";

        setEnvironment(
            organization,
-            localStorage.getItem("userId")!,
+            userId,
            wallVisibility,
            roofVisibility,
            shadows,
@@ -58,13 +58,11 @@ const GlobalProperties: React.FC = () => {
    };

    const limitRenderDistance = async () => {
-        const email = localStorage.getItem("email");
-        const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg";

        if (limitDistance) {
            setEnvironment(
                organization,
-                localStorage.getItem("userId")!,
+                userId,
                wallVisibility,
                roofVisibility,
                shadows,
@@ -76,7 +74,7 @@ const GlobalProperties: React.FC = () => {
        } else {
            setEnvironment(
                organization,
-                localStorage.getItem("userId")!,
+                userId,
                wallVisibility,
                roofVisibility,
                shadows,
@@ -104,13 +102,11 @@ const GlobalProperties: React.FC = () => {
    }

    const updatedDist = async (value: number) => {
-        const email = localStorage.getItem("email");
-        const organization = email?.split("@")[1]?.split(".")[0] || "defaultOrg";
        setRenderDistance(value);
        // setDistance(value);
        const data = await setEnvironment(
            organization,
-            localStorage.getItem("userId")!,
+            userId,
            wallVisibility,
            roofVisibility,
            shadows,
@@ -122,13 +118,11 @@ const GlobalProperties: React.FC = () => {

    // Function to toggle roof visibility
    const changeRoofVisibility = async () => {
-        const email = localStorage.getItem("email");
-        const organization = email!.split("@")[1].split(".")[0];

        //using REST
        const data = await setEnvironment(
            organization,
-            localStorage.getItem("userId")!,
+            userId,
            wallVisibility,
            !roofVisibility,
            shadows,
@@ -153,12 +147,10 @@ const GlobalProperties: React.FC = () => {
    };
    // Function to toggle wall visibility
    const changeWallVisibility = async () => {
-        const email = localStorage.getItem("email");
-        const organization = email!.split("@")[1].split(".")[0];
        //using REST
        const data = await setEnvironment(
            organization,
-            localStorage.getItem("userId")!,
+            userId,
            !wallVisibility,
            roofVisibility,
            shadows,
@@ -182,12 +174,10 @@ const GlobalProperties: React.FC = () => {
    };

    const shadowVisibility = async () => {
-        const email = localStorage.getItem("email");
-        const organization = email!.split("@")[1].split(".")[0];
        //using REST
        const data = await setEnvironment(
            organization,
-            localStorage.getItem("userId")!,
+            userId,
            wallVisibility,
            roofVisibility,
            !shadows,
--- a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
@@ -10,6 +10,7 @@ import {
 } from "../../../../store/builder/store";
 import { zoneCameraUpdate } from "../../../../services/visulization/zone/zoneCameraUpdation";
 import { useParams } from "react-router-dom";
+import { getUserData } from "../../../../functions/getUserData";

 const ZoneProperties: React.FC = () => {
  const { Edit, setEdit } = useEditPosition();
@@ -17,7 +18,8 @@ const ZoneProperties: React.FC = () => {
  const { zonePosition, setZonePosition } = usezonePosition();
  const { zoneTarget, setZoneTarget } = usezoneTarget();
  const { zones, setZones } = useZones();
-  const { projectId } = useParams()
+  const { projectId } = useParams();
+  const { userName, userId, organization, email } = getUserData();

  useEffect(() => {
    setZonePosition(selectedZone.zoneViewPortPosition);
@@ -26,8 +28,6 @@ const ZoneProperties: React.FC = () => {

  async function handleSetView() {
    try {
-      const email = localStorage.getItem("email") || "";
-      const organization = email?.split("@")[1]?.split(".")[0];

      let zonesdata = {
        zoneUuid: selectedZone.zoneUuid,
@@ -36,7 +36,7 @@ const ZoneProperties: React.FC = () => {
      };

      let response = await zoneCameraUpdate(zonesdata, organization, projectId);
-      console.log('response: ', response);
+      // console.log('response: ', response);
      if (response.message === "zone updated") {
        setEdit(false);
      } else {
@@ -52,8 +52,6 @@ const ZoneProperties: React.FC = () => {
  }

  async function handleZoneNameChange(newName: string) {
-    const email = localStorage.getItem("email") || "";
-    const organization = email?.split("@")[1]?.split(".")[0];
    const zonesdata = {
      zoneUuid: selectedZone.zoneUuid,
      zoneName: newName,
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx
@@ -3,7 +3,6 @@ import {
  useSelectedEventData,
  useSelectedEventSphere,
 } from "../../../../../store/simulation/useSimulationStore";
-import { useProductStore } from "../../../../../store/simulation/useProductStore";
 import ConveyorMechanics from "./mechanics/conveyorMechanics";
 import VehicleMechanics from "./mechanics/vehicleMechanics";
 import RoboticArmMechanics from "./mechanics/roboticArmMechanics";
@@ -11,21 +10,22 @@ import MachineMechanics from "./mechanics/machineMechanics";
 import StorageMechanics from "./mechanics/storageMechanics";
 import { AddIcon } from "../../../../icons/ExportCommonIcons";
 import { handleAddEventToProduct } from "../../../../../modules/simulation/events/points/functions/handleAddEventToProduct";
-import { useEventsStore } from "../../../../../store/simulation/useEventsStore";
 import { useProductContext } from "../../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
+import { useVersionContext } from "../../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../../modules/scene/sceneContext";

 const EventProperties: React.FC = () => {
  const { selectedEventData } = useSelectedEventData();
-  const { getEventByModelUuid } = useProductStore();
  const { selectedProductStore } = useProductContext();
+  const { eventStore, productStore } = useSceneContext();
  const { selectedProduct } = selectedProductStore();
-  const [currentEventData, setCurrentEventData] = useState<EventsSchema | null>(
-    null
-  );
+  const [currentEventData, setCurrentEventData] = useState<EventsSchema | null>(null);
  const [assetType, setAssetType] = useState<string | null>(null);
-  const { products, addEvent } = useProductStore();
+  const { products, addEvent, getEventByModelUuid } = productStore();
  const { selectedEventSphere } = useSelectedEventSphere();
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
  const { projectId } = useParams();

  useEffect(() => {
@@ -102,14 +102,15 @@ const EventProperties: React.FC = () => {
                  onClick={() => {
                    if (selectedEventData) {
                      handleAddEventToProduct({
-                        event: useEventsStore
+                        event: eventStore
                          .getState()
                          .getEventByModelUuid(
                            selectedEventData?.data.modelUuid
                          ),
                        addEvent,
                        selectedProduct,
-                        projectId: projectId || ''
+                        projectId: projectId || '',
+                        versionId: selectedVersion?.versionId || '',
                      });
                    }
                  }}
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/WallProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/WallProperties.tsx
@@ -13,23 +13,26 @@ type Material = {
  textureName: string;
 };

-// Initial and default material
-const initialMaterial: Material = {
-  texture: wallTexture1,
-  textureName: "Grunge Concrete Wall",
-};
-
+// Default and initial materials
 const defaultMaterial: Material = {
  texture: defaultTexture,
  textureName: "Default Material",
 };

+const initialMaterial: Material = {
+  texture: wallTexture1,
+  textureName: "Grunge Concrete Wall",
+};
+
 const WallProperties = () => {
  const { wallHeight, wallThickness, setWallHeight, setWallThickness } = useBuilderStore();

  const [activeSide, setActiveSide] = useState<"side1" | "side2">("side1");

-  const [materials, setMaterials] = useState<Material[]>([initialMaterial]);
+  const [materials, setMaterials] = useState<Material[]>([
+    defaultMaterial,
+    initialMaterial,
+  ]);

  const [selectedMaterials, setSelectedMaterials] = useState<{
    side1: Material | null;
@@ -39,11 +42,11 @@ const WallProperties = () => {
    side2: null,
  });

-  // Select initial material for both sides on mount
+  // Set default material initially for both sides
  useEffect(() => {
    setSelectedMaterials({
-      side1: initialMaterial,
-      side2: initialMaterial,
+      side1: defaultMaterial,
+      side2: defaultMaterial,
    });
  }, []);

@@ -71,21 +74,16 @@ const WallProperties = () => {
  };

  const handleRemoveMaterial = (index: number) => {
-    const updatedMaterials = materials.filter((_, i) => i !== index);
+    const removedTexture = materials[index].texture;

-    // Ensure there's always at least one material
-    const newMaterials =
-      updatedMaterials.length === 0 ? [defaultMaterial] : updatedMaterials;
+    const updatedMaterials = materials.filter((_, i) => i !== index);
+    const newMaterials = updatedMaterials.length === 0 ? [defaultMaterial] : updatedMaterials;
    setMaterials(newMaterials);

-    // Deselect the material if it's the one removed
    setSelectedMaterials((prev) => {
      const updated = { ...prev };
      ["side1", "side2"].forEach((side) => {
-        if (
-          updated[side as "side1" | "side2"]?.texture ===
-          materials[index].texture
-        ) {
+        if (updated[side as "side1" | "side2"]?.texture === removedTexture) {
          updated[side as "side1" | "side2"] = defaultMaterial;
        }
      });
@@ -119,42 +117,43 @@ const WallProperties = () => {

        <div className="material-preview">
          <div className="sides-wrapper">
-            <div
-              className={`side-wrapper ${activeSide === "side1" ? "active" : ""
-                }`}
+            <button
+              className={`side-wrapper ${activeSide === "side1" ? "active" : ""}`}
              onClick={() => setActiveSide("side1")}
            >
              <div className="label">Side 1</div>
              <div className="texture-image">
                {selectedMaterials.side1 && (
                  <img
+                    draggable={false}
                    src={selectedMaterials.side1.texture}
                    alt={selectedMaterials.side1.textureName}
                  />
                )}
              </div>
-            </div>
+            </button>

-            <div
-              className={`side-wrapper ${activeSide === "side2" ? "active" : ""
-                }`}
+            <button
+              className={`side-wrapper ${activeSide === "side2" ? "active" : ""}`}
              onClick={() => setActiveSide("side2")}
            >
              <div className="label">Side 2</div>
              <div className="texture-image">
                {selectedMaterials.side2 && (
                  <img
+                    draggable={false}
                    src={selectedMaterials.side2.texture}
                    alt={selectedMaterials.side2.textureName}
                  />
                )}
              </div>
-            </div>
+            </button>
          </div>

          <div className="preview">
            {selectedMaterials[activeSide] && (
              <img
+                draggable={false}
                src={selectedMaterials[activeSide]!.texture}
                alt={selectedMaterials[activeSide]!.textureName}
              />
@@ -167,29 +166,37 @@ const WallProperties = () => {
            <div className="no-materials">No materials added yet.</div>
          ) : (
            <div className="material-container">
-              {materials.map((material, index) => (
-                <div
-                  className="material-wrapper"
-                  key={`${material.textureName}_${index}`}
-                  onClick={() => handleSelectMaterial(material)}
-                >
-                  <div className="material-property">
-                    <div className="material-image">
-                      <img src={material.texture} alt={material.textureName} />
-                    </div>
-                    <div className="material-name">{material.textureName}</div>
-                  </div>
-                  <div
-                    className="delete-material"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleRemoveMaterial(index);
-                    }}
+              {materials.map((material, index) => {
+                const isSelected = selectedMaterials[activeSide]?.texture === material.texture;
+
+                return (
+                  <button
+                    className={`material-wrapper ${isSelected ? "selectedMaterial" : ""}`}
+                    key={`${material.textureName}_${index}`}
+                    onClick={() => handleSelectMaterial(material)}
                  >
-                    <RemoveIcon />
-                  </div>
-                </div>
-              ))}
+                    <div className="material-property">
+                      <div className="material-image">
+                        <img
+                          draggable={false}
+                          src={material.texture}
+                          alt={material.textureName}
+                        />
+                      </div>
+                      <div className="material-name">{material.textureName}</div>
+                    </div>
+                    <button
+                      className="delete-material"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleRemoveMaterial(index);
+                      }}
+                    >
+                      <RemoveIcon />
+                    </button>
+                  </button>
+                );
+              })}
            </div>
          )}
        </div>
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/components/ActionsList.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/components/ActionsList.tsx
@@ -9,10 +9,11 @@ import { handleResize } from "../../../../../../functions/handleResizePannel";
 import {
  useSelectedAction,
 } from "../../../../../../store/simulation/useSimulationStore";
-import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/products/UpsertProductOrEventApi";
 import { useProductContext } from "../../../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
+import { useVersionContext } from "../../../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../../../modules/scene/sceneContext";

 interface ActionsListProps {
  selectedPointData: any;
@@ -30,10 +31,14 @@ const ActionsList: React.FC<ActionsListProps> = ({
  const actionsContainerRef = useRef<HTMLDivElement>(null);

  // store
-  const { renameAction } = useProductStore();
+
+  const { productStore } = useSceneContext();
+  const { renameAction } = productStore();
  const { selectedProductStore } = useProductContext();
  const { selectedProduct } = selectedProductStore();
  const { selectedAction, setSelectedAction } = useSelectedAction();
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();
  const { projectId } = useParams();

  const handleRenameAction = (newName: string) => {
@@ -50,6 +55,7 @@ const ActionsList: React.FC<ActionsListProps> = ({
        productUuid: selectedProduct.productUuid,
        projectId,
        eventDatas: event,
+        versionId: selectedVersion?.versionId || '',
      });
    }
  };
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx
@@ -9,21 +9,25 @@ import SpawnAction from "../actions/SpawnAction";
 import DefaultAction from "../actions/DefaultAction";
 import Trigger from "../trigger/Trigger";
 import { useSelectedAction, useSelectedEventData } from "../../../../../../store/simulation/useSimulationStore";
-import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import ActionsList from "../components/ActionsList";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/products/UpsertProductOrEventApi";
 import { useProductContext } from "../../../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
+import { useVersionContext } from "../../../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../../../modules/scene/sceneContext";

 function ConveyorMechanics() {
    const [activeOption, setActiveOption] = useState<"default" | "spawn" | "swap" | "delay" | "despawn">("default");
    const [selectedPointData, setSelectedPointData] = useState<ConveyorPointSchema | undefined>();
    const { selectedEventData } = useSelectedEventData();
-    const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = useProductStore();
+    const { productStore } = useSceneContext();
+    const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = productStore();
    const { selectedProductStore } = useProductContext();
    const { selectedProduct } = selectedProductStore();
    const { setSelectedAction, clearSelectedAction } = useSelectedAction();
    const { projectId } = useParams();
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();

    useEffect(() => {
        if (selectedEventData) {
@@ -52,7 +56,8 @@ function ConveyorMechanics() {
            productName: productName,
            productUuid: productUuid,
            projectId: projectId,
-            eventDatas: eventData
+            eventDatas: eventData,
+            versionId: selectedVersion?.versionId || '',
        })
    }

@@ -66,7 +71,7 @@ function ConveyorMechanics() {
            updateBackend(
                selectedProduct.productName,
                selectedProduct.productUuid,
-                projectId ||'',
+                projectId || '',
                event
            );
        }
@@ -85,7 +90,7 @@ function ConveyorMechanics() {
            updateBackend(
                selectedProduct.productName,
                selectedProduct.productUuid,
-                projectId ||'',
+                projectId || '',
                event
            );
        }
@@ -99,7 +104,7 @@ function ConveyorMechanics() {
            updateBackend(
                selectedProduct.productName,
                selectedProduct.productUuid,
-                projectId ||'',
+                projectId || '',
                event
            );
        }
@@ -115,7 +120,7 @@ function ConveyorMechanics() {
            updateBackend(
                selectedProduct.productName,
                selectedProduct.productUuid,
-                projectId ||'',
+                projectId || '',
                event
            );
        }
@@ -131,7 +136,7 @@ function ConveyorMechanics() {
            updateBackend(
                selectedProduct.productName,
                selectedProduct.productUuid,
-                projectId ||'',
+                projectId || '',
                event
            );
        }
@@ -145,7 +150,7 @@ function ConveyorMechanics() {
            updateBackend(
                selectedProduct.productName,
                selectedProduct.productUuid,
-                projectId ||'',
+                projectId || '',
                event
            );
        }
@@ -161,7 +166,7 @@ function ConveyorMechanics() {
            updateBackend(
                selectedProduct.productName,
                selectedProduct.productUuid,
-                projectId ||'',
+                projectId || '',
                event
            );
        }
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx
@@ -3,22 +3,25 @@ import RenameInput from "../../../../../ui/inputs/RenameInput";
 import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
 import Trigger from "../trigger/Trigger";
 import { useSelectedAction, useSelectedEventData } from "../../../../../../store/simulation/useSimulationStore";
-import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import ProcessAction from "../actions/ProcessAction";
 import ActionsList from "../components/ActionsList";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/products/UpsertProductOrEventApi";
 import { useProductContext } from "../../../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
+import { useVersionContext } from "../../../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../../../modules/scene/sceneContext";

 function MachineMechanics() {
    const [activeOption, setActiveOption] = useState<"default" | "process">("default");
    const [selectedPointData, setSelectedPointData] = useState<MachinePointSchema | undefined>();
    const { selectedEventData } = useSelectedEventData();
-    const { getPointByUuid, updateAction } = useProductStore();
+    const { productStore } = useSceneContext();
+    const { getPointByUuid, updateAction } = productStore();
    const { selectedProductStore } = useProductContext();
    const { selectedProduct } = selectedProductStore();
    const { setSelectedAction, clearSelectedAction } = useSelectedAction();
-
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
    const { projectId } = useParams();

    useEffect(() => {
@@ -48,7 +51,8 @@ function MachineMechanics() {
            productName: productName,
            productUuid: productUuid,
            projectId: projectId,
-            eventDatas: eventData
+            eventDatas: eventData,
+            versionId: selectedVersion?.versionId || '',
        })
    }

--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx
@@ -5,22 +5,25 @@ import RenameInput from "../../../../../ui/inputs/RenameInput";
 import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
 import Trigger from "../trigger/Trigger";
 import { useSelectedEventData, useSelectedAction } from "../../../../../../store/simulation/useSimulationStore";
-import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import PickAndPlaceAction from "../actions/PickAndPlaceAction";
 import ActionsList from "../components/ActionsList";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/products/UpsertProductOrEventApi";
 import { useProductContext } from "../../../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
+import { useVersionContext } from "../../../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../../../modules/scene/sceneContext";

 function RoboticArmMechanics() {
    const [activeOption, setActiveOption] = useState<"default" | "pickAndPlace">("default");
    const [selectedPointData, setSelectedPointData] = useState<RoboticArmPointSchema | undefined>();
    const { selectedEventData } = useSelectedEventData();
-    const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction, addAction, removeAction, } = useProductStore();
+    const { productStore } = useSceneContext();
+    const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction, addAction, removeAction, } = productStore();
    const { selectedProductStore } = useProductContext();
    const { selectedProduct } = selectedProductStore();
    const { selectedAction, setSelectedAction, clearSelectedAction } = useSelectedAction();
-
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
    const { projectId } = useParams();

    useEffect(() => {
@@ -58,6 +61,7 @@ function RoboticArmMechanics() {
            productUuid: productUuid,
            projectId: projectId,
            eventDatas: eventData,
+            versionId: selectedVersion?.versionId || '',
        });
    };

--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
@@ -5,21 +5,24 @@ import Trigger from "../trigger/Trigger";
 import StorageAction from "../actions/StorageAction";
 import ActionsList from "../components/ActionsList";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/products/UpsertProductOrEventApi";
-import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import { useSelectedAction, useSelectedEventData } from "../../../../../../store/simulation/useSimulationStore";
 import * as THREE from 'three';
 import { useProductContext } from "../../../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
+import { useVersionContext } from "../../../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../../../modules/scene/sceneContext";

 function StorageMechanics() {
    const [activeOption, setActiveOption] = useState<"default" | "store" | "spawn">("default");
    const [selectedPointData, setSelectedPointData] = useState<StoragePointSchema | undefined>();
    const { selectedEventData } = useSelectedEventData();
-    const { getPointByUuid, updateAction } = useProductStore();
+    const { productStore } = useSceneContext();
+    const { getPointByUuid, updateAction } = productStore();
    const { selectedProductStore } = useProductContext();
    const { selectedProduct } = selectedProductStore();
    const { setSelectedAction, clearSelectedAction } = useSelectedAction();
-
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
    const { projectId } = useParams();

    const updateSelectedPointData = () => {
@@ -66,7 +69,8 @@ function StorageMechanics() {
            productName: productName,
            productUuid: productUuid,
            projectId: projectId,
-            eventDatas: eventData
+            eventDatas: eventData,
+            versionId: selectedVersion?.versionId || '',
        })
    }

--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
@@ -7,22 +7,25 @@ import {
    useSelectedAction,
    useSelectedEventData,
 } from "../../../../../../store/simulation/useSimulationStore";
-import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import TravelAction from "../actions/TravelAction";
 import ActionsList from "../components/ActionsList";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/products/UpsertProductOrEventApi";
 import { useProductContext } from "../../../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
+import { useVersionContext } from "../../../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../../../modules/scene/sceneContext";

 function VehicleMechanics() {
    const [activeOption, setActiveOption] = useState<"default" | "travel">("default");
    const [selectedPointData, setSelectedPointData] = useState<VehiclePointSchema | undefined>();
    const { selectedEventData } = useSelectedEventData();
-    const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = useProductStore();
+    const { productStore } = useSceneContext();
+    const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = productStore();
    const { selectedProductStore } = useProductContext();
    const { selectedProduct } = selectedProductStore();
    const { setSelectedAction, clearSelectedAction } = useSelectedAction();
-
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
    const { projectId } = useParams();

    useEffect(() => {
@@ -54,6 +57,7 @@ function VehicleMechanics() {
            productUuid: productUuid,
            projectId: projectId,
            eventDatas: eventData,
+            versionId: selectedVersion?.versionId || '',
        });
    };

--- a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
@@ -4,11 +4,12 @@ import { AddIcon, RemoveIcon, ResizeHeightIcon } from "../../../../../icons/Expo
 import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
 import RenameInput from "../../../../../ui/inputs/RenameInput";
 import { handleResize } from "../../../../../../functions/handleResizePannel";
-import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import { useSelectedAction } from "../../../../../../store/simulation/useSimulationStore";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/products/UpsertProductOrEventApi";
 import { useProductContext } from "../../../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
+import { useVersionContext } from "../../../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../../../modules/scene/sceneContext";

 type TriggerProps = {
    selectedPointData?: PointsScheme | undefined;
@@ -19,13 +20,15 @@ const Trigger = ({ selectedPointData, type }: TriggerProps) => {
    const [currentAction, setCurrentAction] = useState<string | undefined>();
    const { selectedProductStore } = useProductContext();
    const { selectedProduct } = selectedProductStore();
-    const { getActionByUuid, getEventByModelUuid, getPointByUuid, getTriggerByUuid, addTrigger, removeTrigger, updateTrigger, renameTrigger, getProductById, } = useProductStore();
+    const { productStore } = useSceneContext();
+    const { getActionByUuid, getEventByModelUuid, getPointByUuid, getTriggerByUuid, addTrigger, removeTrigger, updateTrigger, renameTrigger, getProductById, } = productStore();
    const [triggers, setTriggers] = useState<TriggerSchema[]>([]);
    const [selectedTrigger, setSelectedTrigger] = useState<TriggerSchema | undefined>();
    const [activeOption, setActiveOption] = useState<"onComplete" | "onStart" | "onStop" | "delay" | "onError">("onComplete");
    const triggersContainerRef = useRef<HTMLDivElement>(null);
    const { selectedAction } = useSelectedAction();
-
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
    const { projectId } = useParams();

    useEffect(() => {
@@ -53,6 +56,7 @@ const Trigger = ({ selectedPointData, type }: TriggerProps) => {
            productUuid: productUuid,
            projectId: projectId,
            eventDatas: eventData,
+            versionId: selectedVersion?.versionId || '',
        });
    };

--- a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx
+++ b/app/src/components/layout/sidebarRight/simulation/Simulations.tsx
@@ -3,12 +3,10 @@ import { AddIcon, ArrowIcon, RemoveIcon, ResizeHeightIcon, } from "../../../icon
 import RenameInput from "../../../ui/inputs/RenameInput";
 import { handleResize } from "../../../../functions/handleResizePannel";
 import { useMainProduct, useSelectedAsset } from "../../../../store/simulation/useSimulationStore";
-import { useProductStore } from "../../../../store/simulation/useProductStore";
 import { generateUUID } from "three/src/math/MathUtils";
 import RenderOverlay from "../../../templates/Overlay";
 import EditWidgetOption from "../../../ui/menu/EditWidgetOption";
 import { handleAddEventToProduct } from "../../../../modules/simulation/events/points/functions/handleAddEventToProduct";
-import { useEventsStore } from "../../../../store/simulation/useEventsStore";
 import { deleteEventDataApi } from "../../../../services/simulation/products/deleteEventDataApi";
 import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi";
 import { deleteProductApi } from "../../../../services/simulation/products/deleteProductApi";
@@ -19,6 +17,8 @@ import { useCompareStore, useSaveVersion, } from "../../../../store/builder/stor
 import { useToggleStore } from "../../../../store/useUIToggleStore";
 import { useProductContext } from "../../../../modules/simulation/products/productContext";
 import { useParams } from "react-router-dom";
+import { useVersionContext } from "../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../modules/scene/sceneContext";

 interface Event {
    modelName: string;
@@ -39,17 +39,19 @@ const List: React.FC<ListProps> = ({ val }) => {

 const Simulations: React.FC = () => {
    const productsContainerRef = useRef<HTMLDivElement>(null);
-    const { products, addProduct, removeProduct, renameProduct, addEvent, removeEvent, getProductById, } = useProductStore();
+    const { eventStore, productStore } = useSceneContext();
+    const { products, addProduct, removeProduct, renameProduct, addEvent, removeEvent, getProductById, } = productStore();
    const { selectedProductStore } = useProductContext();
    const { selectedProduct, setSelectedProduct } = selectedProductStore();
-    const { getEventByModelUuid } = useEventsStore();
+    const { getEventByModelUuid } = eventStore();
    const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
    const [openObjects, setOpenObjects] = useState(true);
    const [processes, setProcesses] = useState<Event[][]>();
    const { setToggleUI } = useToggleStore();
    const { projectId } = useParams();
    const { setMainProduct } = useMainProduct();
-
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
    const { comparePopUp, setComparePopUp } = useCompareStore();
    const { setIsVersionSaved } = useSaveVersion();

@@ -67,6 +69,7 @@ const Simulations: React.FC = () => {
            productName: name,
            productUuid: id,
            projectId: projectId,
+            versionId: selectedVersion?.versionId || '',
        });
    };

@@ -99,13 +102,14 @@ const Simulations: React.FC = () => {
        removeProduct(productUuid);
        deleteProductApi({
            productUuid,
+            versionId: selectedVersion?.versionId || '',
            projectId
        });
    };

    const handleRenameProduct = (productUuid: string, newName: string) => {
        renameProduct(productUuid, newName);
-        renameProductApi({ productName: newName, productUuid, projectId: projectId || '' });
+        renameProductApi({ productName: newName, productUuid, projectId: projectId || '', versionId: selectedVersion?.versionId || '' });
        if (selectedProduct.productUuid === productUuid) {
            setSelectedProduct(productUuid, newName);
            setMainProduct(productUuid, newName);
@@ -118,6 +122,7 @@ const Simulations: React.FC = () => {
            deleteEventDataApi({
                productUuid: selectedProduct.productUuid,
                modelUuid: selectedAsset.modelUuid,
+                versionId: selectedVersion?.versionId || '',
                projectId: projectId,
            });
            removeEvent(selectedProduct.productUuid, selectedAsset.modelUuid);
@@ -265,7 +270,8 @@ const Simulations: React.FC = () => {
                                    addEvent,
                                    selectedProduct,
                                    clearSelectedAsset,
-                                    projectId: projectId || ''
+                                    projectId: projectId || '',
+                                    versionId: selectedVersion?.versionId || '',
                                });
                            } else {
                                handleRemoveEventFromProduct();
--- a/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx
+++ b/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx
@@ -1,147 +1,156 @@
-import React, { useState } from "react";
 import {
-  AddIcon,
-  ArrowIcon,
-  CloseIcon,
-  KebabIcon,
-  LocationIcon,
+    AddIcon,
+    ArrowIcon,
+    CloseIcon,
+    KebabIcon,
+    LocationIcon,
 } from "../../../icons/ExportCommonIcons";
 import RenameInput from "../../../ui/inputs/RenameInput";
-import { useVersionStore } from "../../../../store/builder/store";
-import { generateUniqueId } from "../../../../functions/generateUniqueId";
+import { useVersionHistoryStore } from "../../../../store/builder/useVersionHistoryStore";
+import { useSubModuleStore } from "../../../../store/useModuleStore";
+import useVersionHistoryVisibleStore from "../../../../store/builder/store";
+import { useParams } from "react-router-dom";
+import { getVersionDataApi } from "../../../../services/factoryBuilder/versionControl/getVersionDataApi";
+import { useVersionContext } from "../../../../modules/builder/version/versionContext";

 const VersionHistory = () => {
-  const userName = localStorage.getItem("userName") ?? "Anonymous";
-  const { versions, addVersion, setVersions, updateVersion } =
-    useVersionStore();
-  const [selectedVersion, setSelectedVersion] = useState(
-    versions.length > 0 ? versions[0] : null
-  );
+    const { setSubModule } = useSubModuleStore();
+    const { setVersionHistoryVisible } = useVersionHistoryVisibleStore();
+    const { versionHistory, setCreateNewVersion } = useVersionHistoryStore();
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion, setSelectedVersion } = selectedVersionStore();
+    const { projectId } = useParams();

-  const addNewVersion = () => {
-    const newVersion = {
-      id: generateUniqueId(),
-      versionLabel: `v${versions.length + 1}.0`,
-      versionName: "",
-      timestamp: new Date().toLocaleDateString("en-US", {
-        year: "numeric",
-        month: "long",
-        day: "2-digit",
-      }),
-      savedBy: userName,
+    const addNewVersion = () => {
+        setCreateNewVersion(true);
    };

-    const newVersions = [newVersion, ...versions];
-    addVersion(newVersion);
-    setSelectedVersion(newVersion);
-    setVersions(newVersions);
-  };
+    const handleSelectVersion = (version: Version) => {
+        if (!projectId) return;

-  const handleSelectVersion = (version: any) => {
-    setSelectedVersion(version);
-    const reordered = [version, ...versions.filter((v) => v.id !== version.id)];
-    setVersions(reordered);
-  };
+        getVersionDataApi(projectId, version.versionId).then((verdionData) => {
+            setSelectedVersion(version);
+            console.log(verdionData);
+        }).catch((err) => {
+            console.log(err);
+        })
+    };

-  const handleVersionNameChange = (newName: string, versionId: string) => {
-    const updated = versions.map((v) =>
-      v.id === versionId ? { ...v, versionName: newName } : v
-    );
-    setVersions(updated);
-    updateVersion(versionId, { versionName: newName });
-  };
+    const handleVersionNameChange = (newName: string, versionId: string) => {

-  return (
-    <div className="version-history-container">
-      {/* Header */}
-      <div className="version-history-header">
-        <div className="version-history-title">Version History</div>
-        <div className="version-history-icons">
-          <button
-            id="add-version"
-            className="icon add-icon"
-            onClick={addNewVersion}
-          >
-            <AddIcon />
-          </button>
-          <div id="version-kebab" className="icon kebab-icon">
-            <KebabIcon />
-          </div>
-          <div id="version-close" className="icon close-icon">
-            <CloseIcon />
-          </div>
-        </div>
-      </div>
+    };

-      {/* Shortcut Info */}
-      <div className="version-history-shortcut-info">
-        <div className="info-icon">i</div>
-        <div className="shortcut-text">
-          Press Ctrl + Alt + S to add to version history while editing
-        </div>
-      </div>
-
-      {/* Current Version Display */}
-      {selectedVersion && (
-        <div className="version-history-location">
-          <div className="location-label">
-            <LocationIcon />
-          </div>
-          <div className="location-details">
-            <div className="current-version">
-              Current Version ({selectedVersion.versionLabel})
-            </div>
-            <div className="saved-history-count">
-              {versions.length} Saved History
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Versions List */}
-      <div className="saved-versions-list">
-        {versions.length === 0 ? (
-          <div className="no-versions-message">No saved versions</div>
-        ) : (
-          versions.map((version) => (
-            <button
-              key={version.id}
-              className="saved-version"
-              onClick={() => handleSelectVersion(version)}
-            >
-              <div className="version-name">{version.versionLabel}</div>
-              <div className="version-details">
-                <div className="details">
-                  <span className="timestamp">
-                    {version.versionName ? (
-                      <RenameInput
-                        value={version.versionName}
-                        onRename={(newName) =>
-                          handleVersionNameChange(newName, version.id)
-                        }
-                      />
-                    ) : (
-                      <RenameInput
-                        value={version.timestamp}
-                        onRename={(newName) =>
-                          handleVersionNameChange(newName, version.id)
-                        }
-                      />
-                    )}
-                  </span>
-                  <span className="saved-by">
-                    <div className="user-profile">{version.savedBy[0]}</div>
-                    <div className="user-name">{version.savedBy}</div>
-                  </span>
+    return (
+        <div className="version-history-container">
+            {/* Header */}
+            <div className="version-history-header">
+                <div className="version-history-title">Version History</div>
+                <div className="version-history-icons">
+                    <button
+                        id="add-version"
+                        className="icon add-icon"
+                        onClick={addNewVersion}
+                    >
+                        <AddIcon />
+                    </button>
+                    <div id="version-kebab" className="icon kebab-icon">
+                        <KebabIcon />
+                    </div>
+                    <div
+                        id="version-close"
+                        className="icon close-icon"
+                        onClick={() => {
+                            setSubModule("properties");
+                            setVersionHistoryVisible(false);
+                        }}
+                    >
+                        <CloseIcon />
+                    </div>
                </div>
-                <ArrowIcon />
-              </div>
-            </button>
-          ))
-        )}
-      </div>
-    </div>
-  );
+            </div>
+
+            {/* Shortcut Info */}
+            <div className="version-history-shortcut-info">
+                <div className="info-icon">i</div>
+                <div className="shortcut-text">
+                    Press Ctrl + Alt + S to add to version history while editing
+                </div>
+            </div>
+
+            {/* Current Version Display */}
+            {selectedVersion && (
+                <div className="version-history-location">
+                    <div className="location-label">
+                        <LocationIcon />
+                    </div>
+                    <div className="location-details">
+                        <div className="current-version">
+                            Current Version ({selectedVersion.version})
+                        </div>
+                        <div className="saved-history-count">
+                            {versionHistory.length} Saved History
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* Versions List */}
+            <div className="saved-versions-list">
+                {versionHistory.length === 0 ? (
+                    <div className="no-versions-message">No saved versions</div>
+                ) : (
+                    versionHistory.map((version) => {
+                        const key = `version-${version.versionId}`;
+                        return (
+                            <VersionHistoryItem
+                                key={key}
+                                version={version}
+                                onSelect={handleSelectVersion}
+                                onRename={handleVersionNameChange}
+                            />
+                        );
+                    })
+
+                )}
+            </div>
+        </div>
+    );
 };

 export default VersionHistory;
+
+type VersionHistoryItemProps = {
+    version: Version;
+    onSelect: (version: Version) => void;
+    onRename: (newName: string, versionId: string) => void;
+};
+
+const VersionHistoryItem: React.FC<VersionHistoryItemProps> = ({ version, onSelect, onRename }) => {
+    return (
+        <button
+            className="saved-version"
+        >
+            <div
+                className="version-name"
+                onClick={() => onSelect(version)}
+            >
+                v {version.version}
+            </div>
+            <div className="version-details">
+                <div className="details">
+                    <span className="timestamp">
+                        <RenameInput
+                            value={version.versionName ? version.versionName : version.timeStamp}
+                            onRename={(newName) => onRename(newName, version.versionId)}
+                        />
+                    </span>
+                    <span className="saved-by">
+                        <div className="user-profile">{version.createdBy[0]}</div>
+                        <div className="user-name">{version.createdBy}</div>
+                    </span>
+                </div>
+                <ArrowIcon />
+            </div>
+        </button>
+    );
+};
--- a/app/src/components/layout/sidebarRight/versionHisory/VersionSaved.tsx
+++ b/app/src/components/layout/sidebarRight/versionHisory/VersionSaved.tsx
@@ -1,148 +1,100 @@
-import React, { useState, useEffect, useRef } from "react";
-import { useVersionStore } from "../../../../store/builder/store";
+import { useEffect, useState } from "react";
 import {
-  CloseIcon,
  FinishEditIcon,
  RenameVersionIcon,
-  SaveIcon,
-  SaveVersionIcon,
 } from "../../../icons/ExportCommonIcons";
 import RenderOverlay from "../../../templates/Overlay";
+import { useVersionHistoryStore } from "../../../../store/builder/useVersionHistoryStore";
+import { createVersionApi } from "../../../../services/factoryBuilder/versionControl/addVersionApi";
+import { useParams } from "react-router-dom";
+import { getUserData } from "../../../../functions/getUserData";
+import { useVersionContext } from "../../../../modules/builder/version/versionContext";

 const VersionSaved = () => {
-  const { versions, updateVersion } = useVersionStore();
-  const [isEditing, setIsEditing] = useState(false);
-  const [shouldDismiss, setShouldDismiss] = useState(false);
-  const [showNotification, setShowNotification] = useState(false);
-  const [newName, setNewName] = useState("");
+  const { versionHistory, addVersion, createNewVersion, setCreateNewVersion } = useVersionHistoryStore();
+  const { selectedVersionStore } = useVersionContext();
+  const { setSelectedVersion } = selectedVersionStore();
+  const [newName, setNewName] = useState(new Date().toLocaleString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  }));
  const [description, setDescription] = useState("");
-  const [showEditedFinish, setShowEditedFinish] = useState(false);
-  const [editedVersionName, setEditedVersionName] = useState("");
-  const prevVersionCount = useRef(versions.length);
-  const dismissTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const [showSaveFinish, setSaveFinish] = useState(false);
+  const { projectId } = useParams();
+  const { userId } = getUserData();

-  const latestVersion = versions?.[0];
+  const latestVersion = versionHistory?.[0];

  useEffect(() => {
-    return () => {
-      if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (versions.length > prevVersionCount.current && latestVersion) {
-      setShowNotification(true);
-      setShouldDismiss(false);
-      setIsEditing(false);
-      setNewName(latestVersion.versionName ?? "");
-      setDescription(latestVersion.description ?? "");
-      setEditedVersionName(latestVersion.versionName ?? ""); // Initialize editedVersionName
-
-      if (!isEditing) {
-        startDismissTimer();
-      }
-
-      prevVersionCount.current = versions.length;
-    } else if (versions.length < prevVersionCount.current) {
-      prevVersionCount.current = versions.length;
+    if (createNewVersion) {
+      const defaultName = new Date().toLocaleString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+      });
+      setNewName(defaultName);
+      setDescription("");
    }
-  }, [versions, isEditing, latestVersion]);
+  }, [createNewVersion]);

-  const startDismissTimer = (delay = 5000) => {
-    if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
-    dismissTimerRef.current = setTimeout(() => {
-      setShouldDismiss(true);
-    }, delay);
-  };
+  const handleSave = () => {
+    if (!latestVersion || !projectId) return;

-  useEffect(() => {
-    if (shouldDismiss) {
-      const timer = setTimeout(() => setShowNotification(false), 200);
-      return () => clearTimeout(timer);
-    }
-  }, [shouldDismiss]);
+    const updatedName = (newName.trim() || latestVersion.versionName) ?? latestVersion.timeStamp;
+    const updatedDescription = (description.trim() || latestVersion.versionName) ?? latestVersion.timeStamp;

-  const handleEditName = () => {
-    if (!latestVersion) return;
+    createVersionApi(projectId, userId, latestVersion.versionId, updatedName, updatedDescription).then((data) => {
+      setSaveFinish(true);
+      setCreateNewVersion(false);

-    setIsEditing(true);
-    setNewName(latestVersion.versionName ?? "");
-    setDescription(latestVersion.description ?? "");
-    if (dismissTimerRef.current) {
-      clearTimeout(dismissTimerRef.current);
-      dismissTimerRef.current = null;
-    }
-  };
+      addVersion({
+        version: data.version,
+        versionId: data.versionId,
+        versionName: data.versionName,
+        versionDescription: data.description,
+        timeStamp: data.createdAt,
+        createdBy: data.createdBy.userName
+      })

-  const handleFinishEdit = () => {
-    if (!latestVersion) return;
+      setSelectedVersion({
+        version: data.version,
+        versionId: data.versionId,
+        versionName: data.versionName,
+        versionDescription: data.description,
+        timeStamp: data.createdAt,
+        createdBy: data.createdBy.userName
+      })

-    const updatedName =
-      (newName.trim() || latestVersion.versionName) ?? latestVersion.timestamp;
-    updateVersion(latestVersion.id, {
-      versionName: updatedName,
-      description,
-    });
-
-    setEditedVersionName(updatedName);
-    setIsEditing(false);
-    setShowEditedFinish(true);
-
-    setTimeout(() => {
-      setShowEditedFinish(false);
-    }, 5000);
-
-    startDismissTimer();
+      setTimeout(() => {
+        setSaveFinish(false);
+      }, 3000);
+    }).catch((err) => {
+      setSaveFinish(false);
+      setCreateNewVersion(false);
+    })
  };

  const handleCancel = () => {
-    setIsEditing(false);
-    startDismissTimer();
+    setSaveFinish(false);
+    setCreateNewVersion(false);
  };

-  const handleClose = () => {
-    setShouldDismiss(true);
-    if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
-  };
-
-  if (!showNotification || !latestVersion) return null;
+  if (!latestVersion) return null;

  return (
-    <div className={`versionSaved ${shouldDismiss ? "dismissing" : ""}`}>
-      {!isEditing && !showEditedFinish && (
-        <div className="versionSaved-wrapper">
-          <div className="version-header">
-            <div className="header-wrapper">
-              <div className="icon">
-                <SaveIcon />
-              </div>
-              <span>Saved New Version</span>
-            </div>
-            <button className="close-btn" onClick={handleClose}>
-              <CloseIcon />
-            </button>
-          </div>
-
-          <div className="version-details">
-            <SaveVersionIcon />
-            <div className="details">
-              <div className="details-wrapper">
-                New Version Created {latestVersion.versionLabel}{" "}
-                {latestVersion.timestamp.toUpperCase()}
-              </div>
-              <button onClick={handleEditName}>Edit name</button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {isEditing && (
+    <div className={`versionSaved`}>
+      {createNewVersion &&
        <RenderOverlay>
          <div className="edit-version-popup-wrapper">
            <div className="details-wrapper-popup-container">
              <div className="header-wrapper">
                <RenameVersionIcon />
-                <div className="label">Rename Version</div>
+                <div className="label">Create Version</div>
              </div>
              <div className="details-wrapper">
                <div className="version-name">
@@ -153,13 +105,10 @@ const VersionSaved = () => {
                    placeholder="Enter new version name"
                  />
                  <div className="label">
-                    by @{latestVersion.savedBy}{" "}
-                    {new Date(latestVersion.timestamp).toLocaleString("en-US", {
-                      month: "short",
-                      day: "numeric",
-                      year: "2-digit",
-                      hour: "numeric",
-                      minute: "2-digit",
+                    by @{latestVersion.createdBy}{" "}{new Date(latestVersion.timeStamp).toLocaleDateString("en-US", {
+                      year: "numeric",
+                      month: "long",
+                      day: "2-digit",
                    })}
                  </div>
                </div>
@@ -176,16 +125,16 @@ const VersionSaved = () => {
                <button className="cancel" onClick={handleCancel}>
                  Cancel
                </button>
-                <button className="save" onClick={handleFinishEdit}>
+                <button className="save" onClick={handleSave}>
                  Save
                </button>
              </div>
            </div>
          </div>
        </RenderOverlay>
-      )}
+      }

-      {showEditedFinish && (
+      {showSaveFinish && (
        <RenderOverlay>
          <div className="finishEdit-version-popup-wrapper">
            <div className="finishEdit-wrapper-popup-container">
@@ -193,7 +142,7 @@ const VersionSaved = () => {
                <FinishEditIcon />
              </div>
              <div className="versionname">
-                {editedVersionName || latestVersion.versionName}
+                {newName.trim()}
              </div>
              <div className="success-message">Saved Successfully!</div>
            </div>
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx
@@ -9,6 +9,9 @@ import axios from "axios";
 import RenameInput from "../../../../ui/inputs/RenameInput";
 import { useParams } from "react-router-dom";
 import { useSocketStore } from "../../../../../store/builder/store";
+import { getUserData } from "../../../../../functions/getUserData";
+import { addingWidgets } from "../../../../../services/visulization/zone/addWidgets";
+import { useVersionContext } from "../../../../../modules/builder/version/versionContext";

 type Props = {};

@@ -23,12 +26,12 @@ const BarChartInput = (props: Props) => {
  const { selectedZone } = useSelectedZoneStore();
  const { selectedChartId } = useWidgetStore();
  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
-  const email = localStorage.getItem("email") || "";
-  const organization = email?.split("@")[1]?.split(".")[0];
+  const { userName, userId, organization, email } = getUserData();
  const [isLoading, setLoading] = useState<boolean>(true);
  const { projectId } = useParams();
  const { visualizationSocket } = useSocketStore();
-
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();

  useEffect(() => {
    const fetchZoneData = async () => {
@@ -36,15 +39,15 @@ const BarChartInput = (props: Props) => {
        setLoading(true);
        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
        if (response.status === 200) {
-          // console.log("dropdown data:", response.data);
+          // 
          setDropDownData(response.data);
          setLoading(false);
        } else {
-          console.log("Unexpected response:", response);
+          
        }
      } catch (error) {
        echo.log("Failed to fetch zone data");
-        console.error("There was an error!", error);
+        
      }
    };
    fetchZoneData();
@@ -55,7 +58,7 @@ const BarChartInput = (props: Props) => {
      if (selectedChartId.id !== "") {
        try {
          const response = await axios.get(
-            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}&versionId=${selectedVersion?.versionId || ""}`,
            {
              headers: {
                Authorization: "Bearer <access_token>",
@@ -66,15 +69,16 @@ const BarChartInput = (props: Props) => {
            }
          );
          if (response.status === 200) {
-            setSelections(response.data.Data.measurements);
-            setDuration(response.data.Data.duration);
+            
+            setSelections(response.data.Datastructure.measurements);
+            setDuration(response.data.Datastructure.duration);
            setWidgetName(response.data.widgetName);
          } else {
-            console.log("Unexpected response:", response);
+            
          }
        } catch (error) {
          echo.error("Failed to fetch saved inputs");
-          console.error("There was an error!", error);
+          
        }
      }
    };
@@ -95,15 +99,15 @@ const BarChartInput = (props: Props) => {
    inputName: any
  ) => {
    // const userId = localStorage.getItem("userId");
-    // let newWidget = {
-    //   id: selectedChartId.id,
-    // panel: selectedChartId.panel,
-    // widgetName: inputName,
-    // Data: {
-    //   measurements: inputMeasurement,
-    //   duration: inputDuration,
-    // }
-    // }
+    let newWidget = {
+      id: selectedChartId.id,
+      panel: selectedChartId.panel,
+      widgetName: inputName,
+      Data: {
+        measurements: inputMeasurement,
+        duration: inputDuration,
+      }
+    }
    // const adding3dWidget = {
    //   organization: organization,
    //   widget: newWidget,
@@ -112,43 +116,49 @@ const BarChartInput = (props: Props) => {
    // };
    // if (visualizationSocket) {
    //   visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget);
+
    // }
-    try {
-      const response = await axios.post(
-        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,
-        {
-          headers: {
-            Authorization: "Bearer <access_token>",
-            "Content-Type": "application/json",
-            token: localStorage.getItem("token") || "",
-            refresh_token: localStorage.getItem("refreshToken") || "",
-          },
-        },
-        {
-          organization: organization,
-          zoneUuid: selectedZone.zoneUuid,
-          widget: {
-            id: selectedChartId.id,
-            panel: selectedChartId.panel,
-            widgetName: inputName,
-            Data: {
-              measurements: inputMeasurement,
-              duration: inputDuration,
-            },
-          },
-        } as any
-      );
-      if (response.status === 200) {
-        return true;
-      } else {
-        console.log("Unexpected response:", response);
-        return false;
-      }
-    } catch (error) {
-      echo.error("Failed to send input");
-      console.error("There was an error!", error);
+    let response = await addingWidgets(selectedZone.zoneUuid, organization, newWidget,projectId);
+    
+
+    if(response.message==="Widget updated successfully"){
+      return true;
+    }else{
+      
      return false;
-    }
+    };
+    // try {
+    //   const response = await axios.post(
+    //     `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,
+    //     {
+    //       headers: {
+    //         Authorization: "Bearer <access_token>",
+    //         "Content-Type": "application/json",
+    //         token: localStorage.getItem("token") || "",
+    //         refresh_token: localStorage.getItem("refreshToken") || "",
+    //       },
+    //     },
+    //     {
+    //       zoneUuid: selectedZone.zoneUuid,
+    //       organization: organization,
+    //       widget: {
+    //         id: selectedChartId.id,
+    //         panel: selectedChartId.panel,
+    //         widgetName: inputName,
+    //         Data: {
+    //           measurements: inputMeasurement,
+    //           duration: inputDuration,
+    //         },
+    //       },
+    //     } as any
+    //   );
+
+  
+    // } catch (error) {
+    //   echo.error("Failed to send input");
+    //   
+    //   return false;
+    // }
  };

  const handleSelect = async (
@@ -163,7 +173,7 @@ const BarChartInput = (props: Props) => {
      newSelections[inputKey] = selectedData;
    }
    // setMeasurements(newSelections); // Update Zustand store
-    // console.log(newSelections);
+    // 
    if (await sendInputes(newSelections, duration, widgetName)) {
      setSelections(newSelections);
    }
@@ -180,7 +190,7 @@ const BarChartInput = (props: Props) => {
  };

  const handleNameChange = async (name: any) => {
-    console.log("name change requested", name);
+    

    if (await sendInputes(selections, duration, name)) {
      setWidgetName(name);
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/FleetEfficiencyInputComponent.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/FleetEfficiencyInputComponent.tsx
@@ -7,6 +7,9 @@ import { useSelectedZoneStore } from "../../../../../store/visualization/useZone
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import axios from "axios";
 import RenameInput from "../../../../ui/inputs/RenameInput";
+import { getUserData } from "../../../../../functions/getUserData";
+import { addingFloatingWidgets } from "../../../../../services/visulization/zone/addFloatingWidgets";
+import { useParams } from "react-router-dom";

 type Props = {};

@@ -22,11 +25,12 @@ const FleetEfficiencyInputComponent = (props: Props) => {
  const { selectedZone } = useSelectedZoneStore();
  const { selectedChartId } = useWidgetStore();
  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
-  const email = localStorage.getItem("email") || "";
-  const organization = email?.split("@")[1]?.split(".")[0];
+  const { userName, userId, organization, email } = getUserData();
  const [isLoading, setLoading] = useState<boolean>(true);

-  const isSelected = () => {};
+  const { projectId } = useParams()
+
+  const isSelected = () => { };

  useEffect(() => {
    const fetchZoneData = async () => {
@@ -38,7 +42,7 @@ const FleetEfficiencyInputComponent = (props: Props) => {
          setDropDownData(response.data);
          setLoading(false);
        } else {
-          console.log("Unexpected response:", response);
+          // console.log("Unexpected response:", response);
        }
      } catch (error) {
        echo.error("Failed to fetch zone data");
@@ -53,14 +57,22 @@ const FleetEfficiencyInputComponent = (props: Props) => {
      if (selectedChartId.id !== "") {
        try {
          const response = await axios.get(
-            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`
+            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`,
+            {
+              headers: {
+                Authorization: "Bearer <access_token>",
+                "Content-Type": "application/json",
+                token: localStorage.getItem("token") || "",
+                refresh_token: localStorage.getItem("refreshToken") || "",
+              },
+            }
          );
          if (response.status === 200) {
            setSelections(response.data.Data.measurements);
            setDuration(response.data.Data.duration);
            setWidgetName(response.data.header);
          } else {
-            console.log("Unexpected response:", response);
+            // console.log("Unexpected response:", response);
          }
        } catch (error) {
          echo.error("Failed to fetch saved inputs");
@@ -85,34 +97,51 @@ const FleetEfficiencyInputComponent = (props: Props) => {
    inputDuration: any,
    inputName: any
  ) => {
-    try {
-      const response = await axios.post(
-        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/floatWidget/save`,
-        {
-          organization: organization,
-          zoneUuid: selectedZone.zoneUuid,
-          widget: {
-            id: selectedChartId.id,
-            header: inputName,
-            Data: {
-              measurements: inputMeasurement,
-              duration: inputDuration,
-            },
-          },
-        } as any
-      );
-      if (response.status === 200) {
-        return true;
-      } else {
-        console.log("Unexpected response:", response);
-        return false;
-      }
-    } catch (error) {
-      echo.error("Failed to send input");
-
-      console.error("There was an error!", error);
+    let newWidget = {
+      id: selectedChartId.id,
+      header: inputName,
+      Data: {
+        measurements: inputMeasurement,
+        duration: inputDuration,
+      },
+    }
+    const response = await addingFloatingWidgets(selectedZone.zoneUuid, organization, newWidget, projectId)
+    // console.log('response: ', response);
+    if (response.message === "Widget updated successfully") {
+      return true;
+    } else {
+      console.log("Unexpected response:", response);
      return false;
    }
+    // try {
+    //   const response = await axios.post(
+    //     `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/floatWidget/save`,
+    //     {
+    //       organization: organization,
+    //       zoneUuid: selectedZone.zoneUuid,
+    //       widget: {
+    //         id: selectedChartId.id,
+    //         header: inputName,
+    //         Data: {
+    //           measurements: inputMeasurement,
+    //           duration: inputDuration,
+    //         },
+    //       },
+
+    //     } as any
+    //   );
+    // if (response.status === 200) {
+    //   return true;
+    // } else {
+    //   console.log("Unexpected response:", response);
+    //   return false;
+    // }
+    // } catch (error) {
+    //   echo.error("Failed to send input");
+
+    //   console.error("There was an error!", error);
+    //   return false;
+    // }
  };

  const handleSelect = async (
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/FlotingWidgetInput.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/FlotingWidgetInput.tsx
@@ -7,6 +7,9 @@ import { useSelectedZoneStore } from "../../../../../store/visualization/useZone
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import axios from "axios";
 import RenameInput from "../../../../ui/inputs/RenameInput";
+import { getUserData } from "../../../../../functions/getUserData";
+import { addingFloatingWidgets } from "../../../../../services/visulization/zone/addFloatingWidgets";
+import { useParams } from "react-router-dom";

 type Props = {};

@@ -22,9 +25,9 @@ const FlotingWidgetInput = (props: Props) => {
  const { selectedZone } = useSelectedZoneStore();
  const { selectedChartId } = useWidgetStore();
  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
-  const email = localStorage.getItem("email") || "";
-  const organization = email?.split("@")[1]?.split(".")[0];
+  const { userName, userId, organization, email } = getUserData();
  const [isLoading, setLoading] = useState<boolean>(true);
+  const { projectId } = useParams()

  useEffect(() => {
    const fetchZoneData = async () => {
@@ -36,7 +39,7 @@ const FlotingWidgetInput = (props: Props) => {
          setDropDownData(response.data);
          setLoading(false);
        } else {
-          console.log("Unexpected response:", response);
+          // console.log("Unexpected response:", response);
        }
      } catch (error) {
        echo.error("Failed to fetch zone data");
@@ -52,14 +55,22 @@ const FlotingWidgetInput = (props: Props) => {
      if (selectedChartId.id !== "") {
        try {
          const response = await axios.get(
-            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`
+            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`,
+            {
+              headers: {
+                Authorization: "Bearer <access_token>",
+                "Content-Type": "application/json",
+                token: localStorage.getItem("token") || "",
+                refresh_token: localStorage.getItem("refreshToken") || "",
+              },
+            }
          );
          if (response.status === 200) {
            setSelections(response.data.Data.measurements);
            setDuration(response.data.Data.duration);
            setWidgetName(response.data.header);
          } else {
-            console.log("Unexpected response:", response);
+            // console.log("Unexpected response:", response);
          }
        } catch (error) {
          echo.error("Failed to fetch saved inputs");
@@ -84,34 +95,51 @@ const FlotingWidgetInput = (props: Props) => {
    inputDuration: any,
    inputName: any
  ) => {
-    try {
-      const response = await axios.post(
-        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/floatWidget/save`,
-        {
-          organization: organization,
-          zoneUuid: selectedZone.zoneUuid,
-          widget: {
-            id: selectedChartId.id,
-            header: inputName,
-            Data: {
-              measurements: inputMeasurement,
-              duration: inputDuration,
-            },
-          },
-        } as any
-      );
-      if (response.status === 200) {
-        return true;
-      } else {
-        console.log("Unexpected response:", response);
-        return false;
-      }
-    } catch (error) {
-      echo.error("Failed to send input");
+    let newWidget = {
+      id: selectedChartId.id,
+      header: inputName,
+      Data: {
+        measurements: inputMeasurement,
+        duration: inputDuration,
+      },
+    }

-      console.error("There was an error!", error);
+    const response = await addingFloatingWidgets(selectedZone.zoneUuid, organization, newWidget, projectId)
+    // console.log('response: ', response);
+    if (response.message === "Widget updated successfully") {
+      return true;
+    } else {
+      // console.log("Unexpected response:", response);
      return false;
    }
+    // try {
+    //   const response = await axios.post(
+    //     `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/floatWidget/save`,
+    //     {
+    //       organization: organization,
+    //       zoneUuid: selectedZone.zoneUuid,
+    //       widget: {
+    //         id: selectedChartId.id,
+    //         header: inputName,
+    //         Data: {
+    //           measurements: inputMeasurement,
+    //           duration: inputDuration,
+    //         },
+    //       },
+    //     } as any
+    //   );
+    // if (response.status === 200) {
+    //   return true;
+    // } else {
+    //   console.log("Unexpected response:", response);
+    //   return false;
+    // }
+    // } catch (error) {
+    //   echo.error("Failed to send input");
+
+    //   console.error("There was an error!", error);
+    //   return false;
+    // }
  };

  const handleSelect = async (
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx
@@ -23,20 +23,20 @@
 //             try {
 //                 const response = await axios.get(`http://${iotApiUrl}/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) => {
@@ -125,6 +125,9 @@ import axios from "axios";
 import RenameInput from "../../../../ui/inputs/RenameInput";
 import { useParams } from "react-router-dom";
 import { useSocketStore } from "../../../../../store/builder/store";
+import { getUserData } from "../../../../../functions/getUserData";
+import { addingWidgets } from "../../../../../services/visulization/zone/addWidgets";
+import { useVersionContext } from "../../../../../modules/builder/version/versionContext";

 type Props = {};

@@ -139,11 +142,12 @@ const LineGrapInput = (props: Props) => {
  const { selectedZone } = useSelectedZoneStore();
  const { selectedChartId } = useWidgetStore();
  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
-  const email = localStorage.getItem("email") || "";
-  const organization = email?.split("@")[1]?.split(".")[0];
+  const { userName, userId, organization, email } = getUserData();
  const [isLoading, setLoading] = useState<boolean>(true);
  const { projectId } = useParams();
  const { visualizationSocket } = useSocketStore();
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();

  useEffect(() => {
    const fetchZoneData = async () => {
@@ -151,15 +155,15 @@ const LineGrapInput = (props: Props) => {
        setLoading(true);
        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
        if (response.status === 200) {
-          // console.log("dropdown data:", response.data);
+          // 
          setDropDownData(response.data);
          setLoading(false);
        } else {
-          console.log("Unexpected response:", response);
+          
        }
      } catch (error) {
        echo.error("Failed to fetch zone data");
-        console.error("There was an error!", error);
+        
      }
    };
    fetchZoneData();
@@ -170,7 +174,7 @@ const LineGrapInput = (props: Props) => {
      if (selectedChartId.id !== "") {
        try {
          const response = await axios.get(
-            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}&versionId=${selectedVersion?.versionId || ""}`,
            {
              headers: {
                Authorization: "Bearer <access_token>",
@@ -181,15 +185,16 @@ const LineGrapInput = (props: Props) => {
            }
          );
          if (response.status === 200) {
-            setSelections(response.data.Data.measurements);
-            setDuration(response.data.Data.duration);
+            
+            setSelections(response.data.Datastructure.measurements);
+            setDuration(response.data.Datastructure.duration);
            setWidgetName(response.data.widgetName);
          } else {
-            console.log("Unexpected response:", response);
+            
          }
        } catch (error) {
          echo.error("Failed to fetch saved inputs");
-          console.error("There was an error!", error);
+          
        }
      }
    };
@@ -210,15 +215,16 @@ const LineGrapInput = (props: Props) => {
    inputName: any
  ) => {
    // const userId = localStorage.getItem("userId");
-    // let newWidget = {
-    //    id: selectedChartId.id,
-    // panel: selectedChartId.panel,
-    // widgetName: inputName,
-    // Data: {
-    //   measurements: inputMeasurement,
-    //   duration: inputDuration,
-    // }
-    // }
+    let newWidget = {
+      id: selectedChartId.id,
+      panel: selectedChartId.panel,
+      widgetName: inputName,
+      Data: {
+        measurements: inputMeasurement,
+        duration: inputDuration,
+      }
+    }
+    
    // const adding3dWidget = {
    //   organization: organization,
    //   widget: newWidget,
@@ -228,42 +234,46 @@ const LineGrapInput = (props: Props) => {
    // if (visualizationSocket) {
    //   visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget);
    // }
-    try {
-      const response = await axios.post(
-        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,
-        {
-          headers: {
-            Authorization: "Bearer <access_token>",
-            "Content-Type": "application/json",
-            token: localStorage.getItem("token") || "",
-            refresh_token: localStorage.getItem("refreshToken") || "",
-          },
-        },
-        {
-          organization: organization,
-          zoneUuid: selectedZone.zoneUuid,
-          widget: {
-            id: selectedChartId.id,
-            panel: selectedChartId.panel,
-            widgetName: inputName,
-            Data: {
-              measurements: inputMeasurement,
-              duration: inputDuration,
-            },
-          },
-        } as any
-      );
-      if (response.status === 200) {
-        return true;
-      } else {
-        console.log("Unexpected response:", response);
-        return false;
-      }
-    } catch (error) {
-      echo.error("Failed to send input");
-      console.error("There was an error!", error);
+    let response = await addingWidgets(selectedZone.zoneUuid, organization, newWidget, projectId);
+    
+    if (response.message === "Widget updated successfully") {
+      
+      return true;
+    } else {
+      
      return false;
    }
+    // try {
+    //   const response = await axios.post(
+    //     `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,
+    //     {
+    //       headers: {
+    //         Authorization: "Bearer <access_token>",
+    //         "Content-Type": "application/json",
+    //         token: localStorage.getItem("token") || "",
+    //         refresh_token: localStorage.getItem("refreshToken") || "",
+    //       },
+    //     },
+    //     {
+    //       zoneUuid: selectedZone.zoneUuid,
+    //       organization: organization,
+    //       widget: {
+    //         id: selectedChartId.id,
+    //         panel: selectedChartId.panel,
+    //         widgetName: inputName,
+    //         Data: {
+    //           measurements: inputMeasurement,
+    //           duration: inputDuration,
+    //         },
+    //       },
+    //     } as any
+    //   );
+
+    // } catch (error) {
+    //   echo.error("Failed to send input");
+    //   
+    //   return false;
+    // }
  };

  const handleSelect = async (
@@ -278,7 +288,7 @@ const LineGrapInput = (props: Props) => {
      newSelections[inputKey] = selectedData;
    }
    // setMeasurements(newSelections); // Update Zustand store
-    // console.log(newSelections);
+    // 
    if (await sendInputes(newSelections, duration, widgetName)) {
      setSelections(newSelections);
    }
@@ -295,7 +305,7 @@ const LineGrapInput = (props: Props) => {
  };

  const handleNameChange = async (name: any) => {
-    console.log("name change requested", name);
+    

    if (await sendInputes(selections, duration, name)) {
      setWidgetName(name);
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx
@@ -9,6 +9,9 @@ import axios from "axios";
 import RenameInput from "../../../../ui/inputs/RenameInput";
 import { useParams } from "react-router-dom";
 import { useSocketStore } from "../../../../../store/builder/store";
+import { getUserData } from "../../../../../functions/getUserData";
+import { addingWidgets } from "../../../../../services/visulization/zone/addWidgets";
+import { useVersionContext } from "../../../../../modules/builder/version/versionContext";

 type Props = {};

@@ -23,12 +26,12 @@ const PieChartInput = (props: Props) => {
  const { selectedZone } = useSelectedZoneStore();
  const { selectedChartId } = useWidgetStore();
  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
-  const email = localStorage.getItem("email") || "";
-  const organization = email?.split("@")[1]?.split(".")[0];
+  const { userName, userId, organization, email } = getUserData();
  const [isLoading, setLoading] = useState<boolean>(true);
  const { projectId } = useParams();
  const { visualizationSocket } = useSocketStore();
-
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();

  useEffect(() => {
    const fetchZoneData = async () => {
@@ -36,15 +39,15 @@ const PieChartInput = (props: Props) => {
        setLoading(true);
        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
        if (response.status === 200) {
-          // console.log("dropdown data:", response.data);
+          // 
          setDropDownData(response.data);
          setLoading(false);
        } else {
-          console.log("Unexpected response:", response);
+
        }
      } catch (error) {
        echo.error("Failed to fetch zone data");
-        console.error("There was an error!", error);
+
      }
    };
    fetchZoneData();
@@ -55,7 +58,7 @@ const PieChartInput = (props: Props) => {
      if (selectedChartId.id !== "") {
        try {
          const response = await axios.get(
-            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}&versionId=${selectedVersion?.versionId || ""}`,
            {
              headers: {
                Authorization: "Bearer <access_token>",
@@ -66,15 +69,16 @@ const PieChartInput = (props: Props) => {
            }
          );
          if (response.status === 200) {
-            setSelections(response.data.Data.measurements);
-            setDuration(response.data.Data.duration);
+
+            setSelections(response.data.Datastructure.measurements);
+            setDuration(response.data.Datastructure.duration);
            setWidgetName(response.data.widgetName);
          } else {
-            console.log("Unexpected response:", response);
+
          }
        } catch (error) {
          echo.error("Failed to fetch saved inputs");
-          console.error("There was an error!", error);
+
        }
      }
    };
@@ -96,15 +100,15 @@ const PieChartInput = (props: Props) => {
  ) => {

    // const userId = localStorage.getItem("userId");
-    // let newWidget = {
-    //   id: selectedChartId.id,
-    // panel: selectedChartId.panel,
-    // widgetName: inputName,
-    // Data: {
-    //   measurements: inputMeasurement,
-    //   duration: inputDuration,
-    // },
-    // }
+    let newWidget = {
+      id: selectedChartId.id,
+      panel: selectedChartId.panel,
+      widgetName: inputName,
+      Data: {
+        measurements: inputMeasurement,
+        duration: inputDuration,
+      },
+    }
    // const adding3dWidget = {
    //   organization: organization,
    //   widget: newWidget,
@@ -114,42 +118,48 @@ const PieChartInput = (props: Props) => {
    // if (visualizationSocket) {
    //   visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget);
    // }
-    try {
-      const response = await axios.post(
-        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,
-        {
-          headers: {
-            Authorization: "Bearer <access_token>",
-            "Content-Type": "application/json",
-            token: localStorage.getItem("token") || "",
-            refresh_token: localStorage.getItem("refreshToken") || "",
-          },
-        },
-        {
-          organization: organization,
-          zoneUuid: selectedZone.zoneUuid,
-          widget: {
-            id: selectedChartId.id,
-            panel: selectedChartId.panel,
-            widgetName: inputName,
-            Data: {
-              measurements: inputMeasurement,
-              duration: inputDuration,
-            },
-          },
-        } as any
-      );
-      if (response.status === 200) {
-        return true;
-      } else {
-        console.log("Unexpected response:", response);
-        return false;
-      }
-    } catch (error) {
-      echo.error("Failed to send input");
-      console.error("There was an error!", error);
+
+    let response = await addingWidgets(selectedZone.zoneUuid, organization, newWidget, projectId);
+
+    if (response.message === "Widget updated successfully") {
+
+      return true;
+    } else {
+
+
      return false;
    }
+    // try {
+    //   const response = await axios.post(
+    //     `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,
+    //     {
+    //       headers: {
+    //         Authorization: "Bearer <access_token>",
+    //         "Content-Type": "application/json",
+    //         token: localStorage.getItem("token") || "",
+    //         refresh_token: localStorage.getItem("refreshToken") || "",
+    //       },
+    //     },
+    //     {
+    //       zoneUuid: selectedZone.zoneUuid,
+    //       organization: organization,
+    //       widget: {
+    //         id: selectedChartId.id,
+    //         panel: selectedChartId.panel,
+    //         widgetName: inputName,
+    //         Data: {
+    //           measurements: inputMeasurement,
+    //           duration: inputDuration,
+    //         },
+    //       },
+    //     } as any
+    //   );
+
+    // } catch (error) {
+    //   echo.error("Failed to send input");
+    //   
+    //   return false;
+    // }
  };

  const handleSelect = async (
@@ -164,7 +174,7 @@ const PieChartInput = (props: Props) => {
      newSelections[inputKey] = selectedData;
    }
    // setMeasurements(newSelections); // Update Zustand store
-    // console.log(newSelections);
+    // 
    if (await sendInputes(newSelections, duration, widgetName)) {
      setSelections(newSelections);
    }
@@ -181,7 +191,7 @@ const PieChartInput = (props: Props) => {
  };

  const handleNameChange = async (name: any) => {
-    console.log("name change requested", name);
+

    if (await sendInputes(selections, duration, name)) {
      setWidgetName(name);
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress1Input.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress1Input.tsx
@@ -9,6 +9,9 @@ import axios from "axios";
 import RenameInput from "../../../../ui/inputs/RenameInput";
 import { useParams } from "react-router-dom";
 import { useSocketStore } from "../../../../../store/builder/store";
+import { getUserData } from "../../../../../functions/getUserData";
+import { addingWidgets } from "../../../../../services/visulization/zone/addWidgets";
+import { useVersionContext } from "../../../../../modules/builder/version/versionContext";

 type Props = {};

@@ -23,12 +26,12 @@ const Progress1Input = (props: Props) => {
  const { selectedZone } = useSelectedZoneStore();
  const { selectedChartId } = useWidgetStore();
  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
-  const email = localStorage.getItem("email") || "";
-  const organization = email?.split("@")[1]?.split(".")[0];
+  const { userName, userId, organization, email } = getUserData();
  const [isLoading, setLoading] = useState<boolean>(true);
  const { projectId } = useParams();
  const { visualizationSocket } = useSocketStore();
-
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();

  useEffect(() => {
    const fetchZoneData = async () => {
@@ -36,15 +39,15 @@ const Progress1Input = (props: Props) => {
        setLoading(true);
        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
        if (response.status === 200) {
-          // console.log("dropdown data:", response.data);
+          // 
          setDropDownData(response.data);
          setLoading(false);
        } else {
-          console.log("Unexpected response:", response);
+
        }
      } catch (error) {
        echo.error("Failed to fetch zone data");
-        console.error("There was an error!", error);
+
      }
    };
    fetchZoneData();
@@ -55,7 +58,7 @@ const Progress1Input = (props: Props) => {
      if (selectedChartId.id !== "") {
        try {
          const response = await axios.get(
-            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}&versionId=${selectedVersion?.versionId || ""}`,
            {
              headers: {
                Authorization: "Bearer <access_token>",
@@ -66,15 +69,16 @@ const Progress1Input = (props: Props) => {
            }
          );
          if (response.status === 200) {
-            setSelections(response.data.Data.measurements);
-            setDuration(response.data.Data.duration);
+
+            setSelections(response.data.Datastructure.measurements);
+            setDuration(response.data.Datastructure.duration);
            setWidgetName(response.data.widgetName);
          } else {
-            console.log("Unexpected response:", response);
+
          }
        } catch (error) {
          echo.error("Failed to fetch saved inputs");
-          console.error("There was an error!", error);
+
        }
      }
    };
@@ -95,15 +99,15 @@ const Progress1Input = (props: Props) => {
    inputName: any
  ) => {
    // const userId = localStorage.getItem("userId");
-    // let newWidget = {
-    //   id: selectedChartId.id,
-    //   panel: selectedChartId.panel,
-    //   widgetName: inputName,
-    //   Data: {
-    //     measurements: inputMeasurement,
-    //     duration: inputDuration,
-    //   },
-    // }
+    let newWidget = {
+      id: selectedChartId.id,
+      panel: selectedChartId.panel,
+      widgetName: inputName,
+      Data: {
+        measurements: inputMeasurement,
+        duration: inputDuration,
+      },
+    }
    // const adding3dWidget = {
    //   organization: organization,
    //   widget: newWidget,
@@ -113,42 +117,47 @@ const Progress1Input = (props: Props) => {
    // if (visualizationSocket) {
    //   visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget);
    // }
-    try {
-      const response = await axios.post(
-        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,
-        {
-          headers: {
-            Authorization: "Bearer <access_token>",
-            "Content-Type": "application/json",
-            token: localStorage.getItem("token") || "",
-            refresh_token: localStorage.getItem("refreshToken") || "",
-          },
-        },
-        {
-          organization: organization,
-          zoneUuid: selectedZone.zoneUuid,
-          widget: {
-            id: selectedChartId.id,
-            panel: selectedChartId.panel,
-            widgetName: inputName,
-            Data: {
-              measurements: inputMeasurement,
-              duration: inputDuration,
-            },
-          },
-        } as any
-      );
-      if (response.status === 200) {
-        return true;
-      } else {
-        console.log("Unexpected response:", response);
-        return false;
-      }
-    } catch (error) {
-      echo.error("Failed to send input");
-      console.error("There was an error!", error);
+    let response = await addingWidgets(selectedZone.zoneUuid, organization, newWidget, projectId);
+
+    if (response.message === "Widget updated successfully") {
+
+      return true;
+    } else {
+
+
      return false;
    }
+    // try {
+    // const response = await axios.post(
+    //   `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,
+    //   {
+    //     headers: {
+    //       Authorization: "Bearer <access_token>",
+    //       "Content-Type": "application/json",
+    //       token: localStorage.getItem("token") || "",
+    //       refresh_token: localStorage.getItem("refreshToken") || "",
+    //     },
+    //   },
+    //   {
+    //     zoneUuid: selectedZone.zoneUuid,
+    //     organization: organization,
+    //     widget: {
+    //       id: selectedChartId.id,
+    //       panel: selectedChartId.panel,
+    //       widgetName: inputName,
+    //       Data: {
+    //         measurements: inputMeasurement,
+    //         duration: inputDuration,
+    //       },
+    //     },
+    //   } as any
+    // );
+
+    // } catch (error) {
+    //   echo.error("Failed to send input");
+    //   
+    //   return false;
+    // }
  };

  const handleSelect = async (
@@ -163,7 +172,7 @@ const Progress1Input = (props: Props) => {
      newSelections[inputKey] = selectedData;
    }
    // setMeasurements(newSelections); // Update Zustand store
-    // console.log(newSelections);
+    // 
    if (await sendInputes(newSelections, duration, widgetName)) {
      setSelections(newSelections);
    }
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress2Input.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress2Input.tsx
@@ -9,6 +9,9 @@ import axios from "axios";
 import RenameInput from "../../../../ui/inputs/RenameInput";
 import { useParams } from "react-router-dom";
 import { useSocketStore } from "../../../../../store/builder/store";
+import { getUserData } from "../../../../../functions/getUserData";
+import { addingWidgets } from "../../../../../services/visulization/zone/addWidgets";
+import { useVersionContext } from "../../../../../modules/builder/version/versionContext";

 type Props = {};

@@ -23,12 +26,12 @@ const Progress2Input = (props: Props) => {
  const { selectedZone } = useSelectedZoneStore();
  const { selectedChartId } = useWidgetStore();
  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
-  const email = localStorage.getItem("email") || "";
-  const organization = email?.split("@")[1]?.split(".")[0];
+  const { userName, userId, organization, email } = getUserData();
  const [isLoading, setLoading] = useState<boolean>(true);
  const { projectId } = useParams();
  const { visualizationSocket } = useSocketStore();
-
+  const { selectedVersionStore } = useVersionContext();
+  const { selectedVersion } = selectedVersionStore();

  useEffect(() => {
    const fetchZoneData = async () => {
@@ -36,15 +39,15 @@ const Progress2Input = (props: Props) => {
        setLoading(true);
        const response = await axios.get(`http://${iotApiUrl}/floatinput`);
        if (response.status === 200) {
-          // console.log("dropdown data:", response.data);
+          // 
          setDropDownData(response.data);
          setLoading(false);
        } else {
-          console.log("Unexpected response:", response);
+          
        }
      } catch (error) {
        echo.error("Failed to fetch zone data");
-        console.error("There was an error!", error);
+        
      }
    };
    fetchZoneData();
@@ -55,7 +58,7 @@ const Progress2Input = (props: Props) => {
      if (selectedChartId.id !== "") {
        try {
          const response = await axios.get(
-            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}`,
+            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/data?widgetID=${selectedChartId.id}&zoneUuid=${selectedZone.zoneUuid}&projectId=${projectId}&versionId=${selectedVersion?.versionId || ""}`,
            {
              headers: {
                Authorization: "Bearer <access_token>",
@@ -66,15 +69,16 @@ const Progress2Input = (props: Props) => {
            }
          );
          if (response.status === 200) {
-            setSelections(response.data.Data.measurements);
-            setDuration(response.data.Data.duration);
+            
+            setSelections(response.data.Datastructure.measurements);
+            setDuration(response.data.Datastructure.duration);
            setWidgetName(response.data.widgetName);
          } else {
-            console.log("Unexpected response:", response);
+            
          }
        } catch (error) {
          echo.error("Failed to fetch saved inputs");
-          console.error("There was an error!", error);
+          
        }
      }
    };
@@ -95,15 +99,16 @@ const Progress2Input = (props: Props) => {
    inputName: any
  ) => {
    // const userId = localStorage.getItem("userId");
-    // let newWidget = {
-    //   id: selectedChartId.id,
-    //   panel: selectedChartId.panel,
-    //   widgetName: inputName,
-    //   Data: {
-    //     measurements: inputMeasurement,
-    //     duration: inputDuration,
-    //   }
-    // }
+    let newWidget = {
+      id: selectedChartId.id,
+      panel: selectedChartId.panel,
+      widgetName: inputName,
+      Data: {
+        measurements: inputMeasurement,
+        duration: inputDuration,
+      }
+    }
+    
    // const adding3dWidget = {
    //   organization: organization,
    //   widget: newWidget,
@@ -113,42 +118,48 @@ const Progress2Input = (props: Props) => {
    // if (visualizationSocket) {
    //   visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget);
    // }
-    try {
-      const response = await axios.post(
-        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,
-        {
-          headers: {
-            Authorization: "Bearer <access_token>",
-            "Content-Type": "application/json",
-            token: localStorage.getItem("token") || "",
-            refresh_token: localStorage.getItem("refreshToken") || "",
-          },
-        },
-        {
-          organization: organization,
-          zoneUuid: selectedZone.zoneUuid,
-          widget: {
-            id: selectedChartId.id,
-            panel: selectedChartId.panel,
-            widgetName: inputName,
-            Data: {
-              measurements: inputMeasurement,
-              duration: inputDuration,
-            },
-          },
-        } as any
-      );
-      if (response.status === 200) {
-        return true;
-      } else {
-        console.log("Unexpected response:", response);
-        return false;
-      }
-    } catch (error) {
-      echo.error("Failed to send input");
-      console.error("There was an error!", error);
+
+    let response = await addingWidgets(selectedZone.zoneUuid, organization, newWidget,projectId);
+    
+    if(response.message==="Widget updated successfully"){
+
+      return true;
+    }else{
+
+      
      return false;
    }
+    // try {
+    //   const response = await axios.post(
+    //     `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,
+    //     {
+    //       headers: {
+    //         Authorization: "Bearer <access_token>",
+    //         "Content-Type": "application/json",
+    //         token: localStorage.getItem("token") || "",
+    //         refresh_token: localStorage.getItem("refreshToken") || "",
+    //       },
+    //     },
+    //     {
+    //       zoneUuid: selectedZone.zoneUuid,
+    //       organization: organization,
+    //       widget: {
+    //         id: selectedChartId.id,
+    //         panel: selectedChartId.panel,
+    //         widgetName: inputName,
+    //         Data: {
+    //           measurements: inputMeasurement,
+    //           duration: inputDuration,
+    //         },
+    //       },
+    //     } as any
+    //   );
+
+    // } catch (error) {
+    //   echo.error("Failed to send input");
+    //   
+    //   return false;
+    // }
  };

  const handleSelect = async (
@@ -163,7 +174,7 @@ const Progress2Input = (props: Props) => {
      newSelections[inputKey] = selectedData;
    }
    // setMeasurements(newSelections); // Update Zustand store
-    // console.log(newSelections);
+    // 
    if (await sendInputes(newSelections, duration, widgetName)) {
      setSelections(newSelections);
    }
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/WarehouseThroughputInputComponent.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/WarehouseThroughputInputComponent.tsx
@@ -7,6 +7,9 @@ import { useSelectedZoneStore } from "../../../../../store/visualization/useZone
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import axios from "axios";
 import RenameInput from "../../../../ui/inputs/RenameInput";
+import { getUserData } from "../../../../../functions/getUserData";
+import { addingFloatingWidgets } from "../../../../../services/visulization/zone/addFloatingWidgets";
+import { useParams } from "react-router-dom";

 type Props = {};

@@ -22,9 +25,9 @@ const WarehouseThroughputInputComponent = (props: Props) => {
  const { selectedZone } = useSelectedZoneStore();
  const { selectedChartId } = useWidgetStore();
  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
-  const email = localStorage.getItem("email") || "";
-  const organization = email?.split("@")[1]?.split(".")[0];
+  const { userName, userId, organization, email } = getUserData();
  const [isLoading, setLoading] = useState<boolean>(true);
+  const { projectId } = useParams();

  useEffect(() => {
    const fetchZoneData = async () => {
@@ -36,7 +39,7 @@ const WarehouseThroughputInputComponent = (props: Props) => {
          setDropDownData(response.data);
          setLoading(false);
        } else {
-          console.log("Unexpected response:", response);
+          // console.log("Unexpected response:", response);
        }
      } catch (error) {
        echo.error("Failed to fetch zone data");
@@ -51,14 +54,22 @@ const WarehouseThroughputInputComponent = (props: Props) => {
      if (selectedChartId.id !== "") {
        try {
          const response = await axios.get(
-            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`
+            `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/A_floatWidget/${selectedChartId.id}/${organization}`,
+            {
+              headers: {
+                Authorization: "Bearer <access_token>",
+                "Content-Type": "application/json",
+                token: localStorage.getItem("token") || "",
+                refresh_token: localStorage.getItem("refreshToken") || "",
+              },
+            }
          );
          if (response.status === 200) {
            setSelections(response.data.Data.measurements);
            setDuration(response.data.Data.duration);
            setWidgetName(response.data.header);
          } else {
-            console.log("Unexpected response:", response);
+            // console.log("Unexpected response:", response);
          }
        } catch (error) {
          echo.error("Failed to fetch saved inputs");
@@ -82,33 +93,45 @@ const WarehouseThroughputInputComponent = (props: Props) => {
    inputDuration: any,
    inputName: any
  ) => {
-    try {
-      const response = await axios.post(
-        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/floatWidget/save`,
-        {
-          organization: organization,
-          zoneUuid: selectedZone.zoneUuid,
-          widget: {
-            id: selectedChartId.id,
-            header: inputName,
-            Data: {
-              measurements: inputMeasurement,
-              duration: inputDuration,
-            },
-          },
-        } as any
-      );
-      if (response.status === 200) {
-        return true;
-      } else {
-        console.log("Unexpected response:", response);
-        return false;
-      }
-    } catch (error) {
-      echo.error("Failed to send input");
-      console.error("There was an error!", error);
+
+    let newWidget = {
+      id: selectedChartId.id,
+      header: inputName,
+      Data: {
+        measurements: inputMeasurement,
+        duration: inputDuration,
+      },
+    }
+    const response = await addingFloatingWidgets(selectedZone.zoneUuid, organization, newWidget,projectId)
+    // console.log('response: ', response);
+    if (response.message === "Widget updated successfully") {
+      return true;
+    } else {
+      // console.log("Unexpected response:", response);
      return false;
    }
+    // try {
+    //   const response = await axios.post(
+    //     `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/floatWidget/save`,
+    //     {
+    //       organization: organization,
+    //       zoneUuid: selectedZone.zoneUuid,
+    //       widget: {
+    //         id: selectedChartId.id,
+    //         header: inputName,
+    //         Data: {
+    //           measurements: inputMeasurement,
+    //           duration: inputDuration,
+    //         },
+    //       },
+    //     } as any
+    //   );
+
+    // } catch (error) {
+    //   echo.error("Failed to send input");
+    //   console.error("There was an error!", error);
+    //   return false;
+    // }
  };

  const handleSelect = async (
@@ -140,7 +163,7 @@ const WarehouseThroughputInputComponent = (props: Props) => {
  };

  const handleNameChange = async (name: any) => {
-    console.log("name change requested", name);
+    // console.log("name change requested", name);

    if (await sendInputes(selections, duration, name)) {
      setWidgetName(name);
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget2InputCard3D.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget2InputCard3D.tsx
@@ -7,6 +7,7 @@ import { useSelectedZoneStore } from "../../../../../store/visualization/useZone
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import axios from "axios";
 import RenameInput from "../../../../ui/inputs/RenameInput";
+import { getUserData } from "../../../../../functions/getUserData";

 type Props = {};

@@ -21,8 +22,7 @@ const Widget2InputCard3D = (props: Props) => {
  >({});
  const { selectedZone } = useSelectedZoneStore();
  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
-  const email = localStorage.getItem("email") || "";
-  const organization = email?.split("@")[1]?.split(".")[0];
+  const { userName, userId, organization, email } = getUserData();
  const [isLoading, setLoading] = useState<boolean>(true);

  useEffect(() => {
@@ -35,7 +35,7 @@ const Widget2InputCard3D = (props: Props) => {
          setDropDownData(response.data);
          setLoading(false);
        } else {
-          console.log("Unexpected response:", response);
+          // console.log("Unexpected response:", response);
        }
      } catch (error) {
        echo.error("Failed to fetch zone data");
@@ -57,7 +57,7 @@ const Widget2InputCard3D = (props: Props) => {
            setDuration(response.data.Data.duration);
            setWidgetName(response.data.widgetName);
          } else {
-            console.log("Unexpected response:", response);
+            // console.log("Unexpected response:", response);
          }
        } catch (error) {
          echo.error("Failed to fetch saved inputs");
@@ -85,7 +85,7 @@ const Widget2InputCard3D = (props: Props) => {
      const response = await axios.post(
        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget3d/save`,
        {
-          organization: organization,
+          organization,
          zoneUuid: selectedZone.zoneUuid,
          widget: {
            id: selectedChartId.id,
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget3InputCard3D.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget3InputCard3D.tsx
@@ -7,6 +7,7 @@ import { useSelectedZoneStore } from "../../../../../store/visualization/useZone
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import axios from "axios";
 import RenameInput from "../../../../ui/inputs/RenameInput";
+import { getUserData } from "../../../../../functions/getUserData";

 const Widget3InputCard3D = () => {
  const { selectedChartId } = useWidgetStore();
@@ -19,8 +20,7 @@ const Widget3InputCard3D = () => {
  >({});
  const { selectedZone } = useSelectedZoneStore();
  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
-  const email = localStorage.getItem("email") || "";
-  const organization = email?.split("@")[1]?.split(".")[0];
+  const { userName, userId, organization, email } = getUserData();
  const [isLoading, setLoading] = useState<boolean>(true);

  useEffect(() => {
@@ -33,7 +33,7 @@ const Widget3InputCard3D = () => {
          setDropDownData(response.data);
          setLoading(false);
        } else {
-          console.log("Unexpected response:", response);
+          // console.log("Unexpected response:", response);
        }
      } catch (error) {
        echo.error("Failed to fetch zone data");
@@ -55,7 +55,7 @@ const Widget3InputCard3D = () => {
            setDuration(response.data.Data.duration);
            setWidgetName(response.data.widgetName);
          } else {
-            console.log("Unexpected response:", response);
+            // console.log("Unexpected response:", response);
          }
        } catch (error) {
          echo.error("Failed to fetch saved inputs");
@@ -82,7 +82,7 @@ const Widget3InputCard3D = () => {
      const response = await axios.post(
        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget3d/save`,
        {
-          organization: organization,
+          organization,
          zoneUuid: selectedZone.zoneUuid,
          widget: {
            id: selectedChartId.id,
@@ -97,7 +97,7 @@ const Widget3InputCard3D = () => {
      if (response.status === 200) {
        return true;
      } else {
-        console.log("Unexpected response:", response);
+        // console.log("Unexpected response:", response);
        return false;
      }
    } catch (error) {
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget4InputCard3D.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/Widget4InputCard3D.tsx
@@ -7,6 +7,7 @@ import { useSelectedZoneStore } from "../../../../../store/visualization/useZone
 import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import axios from "axios";
 import RenameInput from "../../../../ui/inputs/RenameInput";
+import { getUserData } from "../../../../../functions/getUserData";

 type Props = {};

@@ -21,8 +22,7 @@ const Widget4InputCard3D = (props: Props) => {
  >({});
  const { selectedZone } = useSelectedZoneStore();
  const iotApiUrl = process.env.REACT_APP_IOT_SOCKET_SERVER_URL;
-  const email = localStorage.getItem("email") || "";
-  const organization = email?.split("@")[1]?.split(".")[0];
+  const { userName, userId, organization, email } = getUserData();
  const [isLoading, setLoading] = useState<boolean>(true);

  useEffect(() => {
@@ -35,7 +35,7 @@ const Widget4InputCard3D = (props: Props) => {
          setDropDownData(response.data);
          setLoading(false);
        } else {
-          console.log("Unexpected response:", response);
+          // console.log("Unexpected response:", response);
        }
      } catch (error) {
        echo.error("Failed to fetch zone data");
@@ -57,7 +57,7 @@ const Widget4InputCard3D = (props: Props) => {
            setDuration(response.data.Data.duration);
            setWidgetName(response.data.widgetName);
          } else {
-            console.log("Unexpected response:", response);
+            // console.log("Unexpected response:", response);
          }
        } catch (error) {
          echo.error("Failed to fetch saved inputs");
@@ -85,7 +85,7 @@ const Widget4InputCard3D = (props: Props) => {
      const response = await axios.post(
        `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget3d/save`,
        {
-          organization: organization,
+          organization,
          zoneUuid: selectedZone.zoneUuid,
          widget: {
            id: selectedChartId.id,
@@ -100,7 +100,7 @@ const Widget4InputCard3D = (props: Props) => {
      if (response.status === 200) {
        return true;
      } else {
-        console.log("Unexpected response:", response);
+        // console.log("Unexpected response:", response);
        return false;
      }
    } catch (error) {
--- a/app/src/components/layout/sidebarRight/visualization/design/Design.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/design/Design.tsx
@@ -44,7 +44,7 @@ const Design = () => {
  };

  useEffect(() => {
-    console.log("Styles", styles);
+    // console.log("Styles", styles);
  }, [styles]);

  return (