Merge remote-tracking branch 'origin/v3-ui' into v3

2025-06-05 15:41:49 +05:30 · 2025-06-05 15:41:49 +05:30 · 3575f2bf73
parent 6780e73dd1 3916f6270c
commit 3575f2bf73
16 changed files with 546 additions and 194 deletions
--- a/app/src/assets/image/wallTextures/defaultTexture.jpg
+++ b/app/src/assets/image/wallTextures/defaultTexture.jpg
--- a/app/src/assets/image/wallTextures/wallTexture.png
+++ b/app/src/assets/image/wallTextures/wallTexture.png
--- a/app/src/components/layout/scenes/MainScene.tsx
+++ b/app/src/components/layout/scenes/MainScene.tsx
@ -1,44 +1,52 @@
-import React from 'react'
-import { useLoadingProgress, useSaveVersion, useSocketStore, useWidgetSubOption } from '../../../store/builder/store';
-import useModuleStore, { useThreeDStore } from '../../../store/useModuleStore';
-import { usePlayButtonStore } from '../../../store/usePlayButtonStore';
-import { useSelectedZoneStore } from '../../../store/visualization/useZoneStore';
-import { useFloatingWidget } from '../../../store/visualization/useDroppedObjectsStore';
-import { useSelectedUserStore } from '../../../store/collaboration/useCollabStore';
-import KeyPressListener from '../../../utils/shortcutkeys/handleShortcutKeys';
-import LoadingPage from '../../templates/LoadingPage';
-import ModuleToggle from '../../ui/ModuleToggle';
-import SideBarLeft from '../sidebarLeft/SideBarLeft';
-import SideBarRight from '../sidebarRight/SideBarRight';
-import RealTimeVisulization from '../../../modules/visualization/RealTimeVisulization';
-import MarketPlace from '../../../modules/market/MarketPlace';
-import Tools from '../../ui/Tools';
-import SimulationPlayer from '../../ui/simulation/simulationPlayer';
-import ControlsPlayer from '../controls/ControlsPlayer';
-import SelectFloorPlan from '../../temporary/SelectFloorPlan';
-import { createHandleDrop } from '../../../modules/visualization/functions/handleUiDrop';
-import Scene from '../../../modules/scene/scene';
-import { useComparisonProduct, useMainProduct } from '../../../store/simulation/useSimulationStore';
-import { useProductContext } from '../../../modules/simulation/products/productContext';
-import { useProductStore } from '../../../store/simulation/useProductStore';
-import RegularDropDown from '../../ui/inputs/RegularDropDown';
+import React from "react";
+import {
+  useLoadingProgress,
+  useSaveVersion,
+  useSocketStore,
+  useWidgetSubOption,
+} from "../../../store/builder/store";
+import useModuleStore, { useThreeDStore } from "../../../store/useModuleStore";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore";
+import { useFloatingWidget } from "../../../store/visualization/useDroppedObjectsStore";
+import { useSelectedUserStore } from "../../../store/collaboration/useCollabStore";
+import KeyPressListener from "../../../utils/shortcutkeys/handleShortcutKeys";
+import LoadingPage from "../../templates/LoadingPage";
+import ModuleToggle from "../../ui/ModuleToggle";
+import SideBarLeft from "../sidebarLeft/SideBarLeft";
+import SideBarRight from "../sidebarRight/SideBarRight";
+import RealTimeVisulization from "../../../modules/visualization/RealTimeVisulization";
+import MarketPlace from "../../../modules/market/MarketPlace";
+import Tools from "../../ui/Tools";
+import SimulationPlayer from "../../ui/simulation/simulationPlayer";
+import ControlsPlayer from "../controls/ControlsPlayer";
+import SelectFloorPlan from "../../temporary/SelectFloorPlan";
+import { createHandleDrop } from "../../../modules/visualization/functions/handleUiDrop";
+import Scene from "../../../modules/scene/scene";
+import {
+  useComparisonProduct,
+  useMainProduct,
+} from "../../../store/simulation/useSimulationStore";
+import { useProductContext } from "../../../modules/simulation/products/productContext";
+import { useProductStore } from "../../../store/simulation/useProductStore";
+import RegularDropDown from "../../ui/inputs/RegularDropDown";

 function MainScene() {
-    const { products } = useProductStore();
-    const { setMainProduct } = useMainProduct();
-    const { selectedProductStore } = useProductContext();
-    const { selectedProduct } = selectedProductStore();
-    const { isVersionSaved } = useSaveVersion();
-    const { activeModule } = useModuleStore();
-    const { selectedUser } = useSelectedUserStore();
-    const { loadingProgress } = useLoadingProgress();
-    const { toggleThreeD } = useThreeDStore();
-    const { isPlaying } = usePlayButtonStore();
-    const { widgetSubOption } = useWidgetSubOption();
-    const { visualizationSocket } = useSocketStore();
-    const { selectedZone } = useSelectedZoneStore();
-    const { setFloatingWidget } = useFloatingWidget();
-    const { comparisonProduct } = useComparisonProduct();
+  const { products } = useProductStore();
+  const { setMainProduct } = useMainProduct();
+  const { selectedProductStore } = useProductContext();
+  const { selectedProduct } = selectedProductStore();
+  const { isVersionSaved } = useSaveVersion();
+  const { activeModule } = useModuleStore();
+  const { selectedUser } = useSelectedUserStore();
+  const { loadingProgress } = useLoadingProgress();
+  const { toggleThreeD } = useThreeDStore();
+  const { isPlaying } = usePlayButtonStore();
+  const { widgetSubOption } = useWidgetSubOption();
+  const { visualizationSocket } = useSocketStore();
+  const { selectedZone } = useSelectedZoneStore();
+  const { setFloatingWidget } = useFloatingWidget();
+  const { comparisonProduct } = useComparisonProduct();

    const handleSelectLayout = (option: string) => {
        const product = products.find((product) => product.productName === option);
@ -47,68 +55,71 @@ function MainScene() {
        }
    };

-    return (
+  return (
+    <>
+      {!selectedUser && (
        <>
-            {!selectedUser && (
-                <>
-                    <KeyPressListener />
-                    {loadingProgress > 0 && <LoadingPage progress={loadingProgress} />}
-                    {!isPlaying && (
-                        <>
-                            {toggleThreeD && <ModuleToggle />}
-                            <SideBarLeft />
-                            <SideBarRight />
-                        </>
-                    )}
-                    <RealTimeVisulization />
-                    {activeModule === "market" && <MarketPlace />}
-                    {activeModule !== "market" && !isPlaying && !isVersionSaved && (
-                        <Tools />
-                    )}
-                    {(isPlaying || comparisonProduct !== null) && activeModule === "simulation" && <SimulationPlayer />}
-                    {(isPlaying || comparisonProduct !== null) && activeModule !== "simulation" && <ControlsPlayer />}
+          <KeyPressListener />
+          {loadingProgress > 0 && <LoadingPage progress={loadingProgress} />}
+          {!isPlaying && (
+            <>
+              {toggleThreeD && <ModuleToggle />}
+              <SideBarLeft />
+              <SideBarRight />
+            </>
+          )}
+          <RealTimeVisulization />
+          {activeModule === "market" && <MarketPlace />}
+          {activeModule !== "market" && !isPlaying && !isVersionSaved && (
+            <Tools />
+          )}
+          {(isPlaying || comparisonProduct !== null) &&
+            activeModule === "simulation" &&
+            loadingProgress == 0 && <SimulationPlayer />}
+          {(isPlaying || comparisonProduct !== null) &&
+            activeModule !== "simulation" && <ControlsPlayer />}

-                    {/* remove this later */}
-                    {activeModule === "builder" && !toggleThreeD && <SelectFloorPlan />}
-                </>
-            )}
-            <div
-                className="scene-container"
-                id="work-space-three-d-canvas"
-                style={{
-                    height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
-                    width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
-                    left: isPlaying || activeModule !== "visualization" ? "0%" : "",
-                    borderRadius:
-                        isPlaying || activeModule !== "visualization" ? "" : "6px",
-                }}
-                role="application"
-                onDrop={(event) =>
-                    createHandleDrop({
-                        widgetSubOption,
-                        visualizationSocket,
-                        selectedZone,
-                        setFloatingWidget,
-                        event,
-                    })
-                }
-                onDragOver={(event) => event.preventDefault()}
-            >
-                <Scene layout="Main Layout" />
-            </div>
-
-            {selectedProduct && isVersionSaved && !isPlaying && (
-                <div className="selectLayout-wrapper">
-                    <RegularDropDown
-                        header={selectedProduct.productName}
-                        options={products.map((l) => l.productName)} // Pass layout names as options
-                        onSelect={handleSelectLayout}
-                        search={false}
-                    />
-                </div>
-            )}
+          {/* remove this later */}
+          {activeModule === "builder" && !toggleThreeD && <SelectFloorPlan />}
        </>
-    )
+      )}
+      <div
+        className="scene-container"
+        id="work-space-three-d-canvas"
+        style={{
+          height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
+          width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
+          left: isPlaying || activeModule !== "visualization" ? "0%" : "",
+          borderRadius:
+            isPlaying || activeModule !== "visualization" ? "" : "6px",
+        }}
+        role="application"
+        onDrop={(event) =>
+          createHandleDrop({
+            widgetSubOption,
+            visualizationSocket,
+            selectedZone,
+            setFloatingWidget,
+            event,
+          })
+        }
+        onDragOver={(event) => event.preventDefault()}
+      >
+        <Scene layout="Main Layout" />
+      </div>
+
+      {selectedProduct && isVersionSaved && !isPlaying && (
+        <div className="selectLayout-wrapper">
+          <RegularDropDown
+            header={selectedProduct.productName}
+            options={products.map((l) => l.productName)} // Pass layout names as options
+            onSelect={handleSelectLayout}
+            search={false}
+          />
+        </div>
+      )}
+    </>
+  );
 }

-export default MainScene
+export default MainScene;
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/WallProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/WallProperties.tsx
@ -0,0 +1,213 @@
+import { useEffect, useState } from "react";
+import InputWithDropDown from "../../../../ui/inputs/InputWithDropDown";
+import { AddIcon, RemoveIcon } from "../../../../icons/ExportCommonIcons";
+
+// Texture Imports
+import wallTexture1 from "../../../../../assets/image/wallTextures/wallTexture.png";
+import defaultTexture from "../../../../../assets/image/wallTextures/defaultTexture.jpg";
+
+// Define Material type
+type Material = {
+  texture: string;
+  textureName: string;
+};
+
+// Initial and default material
+const initialMaterial: Material = {
+  texture: wallTexture1,
+  textureName: "Grunge Concrete Wall",
+};
+
+const defaultMaterial: Material = {
+  texture: defaultTexture,
+  textureName: "Default Material",
+};
+
+const WallProperties = () => {
+  const [wallProperties, setWallProperties] = useState({
+    height: "10",
+    thickness: "10",
+    length: "10",
+  });
+
+  const [activeSide, setActiveSide] = useState<"side1" | "side2">("side1");
+
+  const [materials, setMaterials] = useState<Material[]>([initialMaterial]);
+
+  const [selectedMaterials, setSelectedMaterials] = useState<{
+    side1: Material | null;
+    side2: Material | null;
+  }>({
+    side1: null,
+    side2: null,
+  });
+
+  // Select initial material for both sides on mount
+  useEffect(() => {
+    setSelectedMaterials({
+      side1: initialMaterial,
+      side2: initialMaterial,
+    });
+  }, []);
+
+  const handleInputChange = (
+    key: keyof typeof wallProperties,
+    newValue: string
+  ) => {
+    setWallProperties((prev) => ({
+      ...prev,
+      [key]: newValue,
+    }));
+  };
+
+  const handleAddMaterial = () => {
+    const newMaterial: Material = {
+      texture: defaultMaterial.texture,
+      textureName: `Material ${materials.length + 1}`,
+    };
+    setMaterials([...materials, newMaterial]);
+  };
+
+  const handleSelectMaterial = (material: Material) => {
+    setSelectedMaterials((prev) => ({
+      ...prev,
+      [activeSide]: material,
+    }));
+  };
+
+  const handleRemoveMaterial = (index: number) => {
+    const updatedMaterials = materials.filter((_, i) => i !== index);
+
+    // Ensure there's always at least one material
+    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
+        ) {
+          updated[side as "side1" | "side2"] = defaultMaterial;
+        }
+      });
+      return updated;
+    });
+  };
+
+  return (
+    <div className="wall-properties-container">
+      <div className="header">Wall</div>
+      <div className="wall-properties">
+        <InputWithDropDown
+          label="Height"
+          value={wallProperties.height}
+          onChange={(val) => handleInputChange("height", val)}
+        />
+        <InputWithDropDown
+          label="Thickness"
+          value={wallProperties.thickness}
+          onChange={(val) => handleInputChange("thickness", val)}
+        />
+        <InputWithDropDown
+          label="Length"
+          value={wallProperties.length}
+          onChange={(val) => handleInputChange("length", val)}
+        />
+      </div>
+
+      <section>
+        <div className="header-wrapper">
+          <div className="header">Materials</div>
+          <button className="addMaterial" onClick={handleAddMaterial}>
+            <AddIcon />
+          </button>
+        </div>
+
+        <div className="material-preview">
+          <div className="sides-wrapper">
+            <div
+              className={`side-wrapper ${
+                activeSide === "side1" ? "active" : ""
+              }`}
+              onClick={() => setActiveSide("side1")}
+            >
+              <div className="label">Side 1</div>
+              <div className="texture-image">
+                {selectedMaterials.side1 && (
+                  <img
+                    src={selectedMaterials.side1.texture}
+                    alt={selectedMaterials.side1.textureName}
+                  />
+                )}
+              </div>
+            </div>
+
+            <div
+              className={`side-wrapper ${
+                activeSide === "side2" ? "active" : ""
+              }`}
+              onClick={() => setActiveSide("side2")}
+            >
+              <div className="label">Side 2</div>
+              <div className="texture-image">
+                {selectedMaterials.side2 && (
+                  <img
+                    src={selectedMaterials.side2.texture}
+                    alt={selectedMaterials.side2.textureName}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+
+          <div className="preview">
+            {selectedMaterials[activeSide] && (
+              <img
+                src={selectedMaterials[activeSide]!.texture}
+                alt={selectedMaterials[activeSide]!.textureName}
+              />
+            )}
+          </div>
+        </div>
+
+        <div className="materials">
+          {materials.length === 0 ? (
+            <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);
+                    }}
+                  >
+                    <RemoveIcon />
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default WallProperties;
--- a/app/src/components/templates/LoadingPage.tsx
+++ b/app/src/components/templates/LoadingPage.tsx
@ -4,6 +4,7 @@ import { LogoIconLarge } from "../icons/Logo";
 import { useParams } from "react-router-dom";
 import { useProjectName } from "../../store/builder/store";
 import { getAllProjects } from "../../services/dashboard/getAllProjects";
+import { useComparisonProduct } from "../../store/simulation/useSimulationStore";

 interface LoadingPageProps {
  progress: number; // Expect progress as a percentage (0-100)
@ -12,6 +13,8 @@ interface LoadingPageProps {
 const LoadingPage: React.FC<LoadingPageProps> = ({ progress }) => {
  const { projectName, setProjectName } = useProjectName();
  const { projectId } = useParams();
+  const { comparisonProduct } = useComparisonProduct();
+
  const validatedProgress = Math.min(100, Math.max(0, progress));
  const generateThumbnail = async () => {
    const email = localStorage.getItem("email");
@ -30,25 +33,24 @@ const LoadingPage: React.FC<LoadingPageProps> = ({ progress }) => {

      const domainParts = emailParts[1].split(".");
      const Organization = domainParts[0];
-      const projects = await getAllProjects(
-        userId, Organization
+      const projects = await getAllProjects(userId, Organization);
+      const filterProject = projects?.Projects.find(
+        (val: any) => val.projectUuid === projectId || val._id === projectId
      );
-      const filterProject = projects?.Projects.find((val: any) => val.projectUuid === projectId || val._id
-        === projectId)

-      setProjectName(filterProject.projectName)
-
-    }
-    catch {
-
-    }
-  }
+      setProjectName(filterProject.projectName);
+    } catch {}
+  };
  useEffect(() => {
    generateThumbnail();
  }, []);
  return (
    <RenderOverlay>
-      <div className="loading-wrapper">
+      <div
+        className={`loading-wrapper ${
+          comparisonProduct != null ? "comparisionLoading" : ""
+        }`}
+      >
        <div className="loading-container">
          <div className="project-name">{projectName}</div>
          <div className="loading-hero-container">
--- a/app/src/components/ui/compareVersion/CompareLayOut.tsx
+++ b/app/src/components/ui/compareVersion/CompareLayOut.tsx
@ -4,7 +4,10 @@ import {
  LayoutIcon,
  ResizerIcon,
 } from "../../icons/SimulationIcons";
-import { useLoadingProgress, useSaveVersion } from "../../../store/builder/store";
+import {
+  useLoadingProgress,
+  useSaveVersion,
+} from "../../../store/builder/store";
 import Search from "../inputs/Search";
 import OuterClick from "../../../utils/outerClick";
 import { useProductStore } from "../../../store/simulation/useProductStore";
@ -13,7 +16,8 @@ import { useComparisonProduct } from "../../../store/simulation/useSimulationSto
 import { usePauseButtonStore, usePlayButtonStore } from "../../../store/usePlayButtonStore";

 const CompareLayOut = () => {
-  const { comparisonProduct, setComparisonProduct, clearComparisonProduct } = useComparisonProduct();
+  const { comparisonProduct, setComparisonProduct, clearComparisonProduct } =
+    useComparisonProduct();
  const { products } = useProductStore();
  const { setLoadingProgress } = useLoadingProgress();
  const [width, setWidth] = useState("50vw");
@ -23,6 +27,7 @@ const CompareLayOut = () => {
  const startWidthRef = useRef<number>(0);
  const startXRef = useRef<number>(0);
  const { setIsVersionSaved } = useSaveVersion();
+  const { loadingProgress } = useLoadingProgress();
  const { setIsPlaying } = usePlayButtonStore();
  const { setIsPaused } = usePauseButtonStore();

@ -124,14 +129,16 @@ const CompareLayOut = () => {
      ref={wrapperRef}
      style={{ width }}
    >
-      <button
-        title="resize-canvas"
-        id="compare-resize-slider-btn"
-        className="resizer"
-        onMouseDown={handleStartResizing}
-      >
-        <ResizerIcon />
-      </button>
+      {loadingProgress == 0 && (
+        <button
+          title="resize-canvas"
+          id="compare-resize-slider-btn"
+          className="resizer"
+          onMouseDown={handleStartResizing}
+        >
+          <ResizerIcon />
+        </button>
+      )}
      <div className="chooseLayout-container">
        {comparisonProduct && (
          <div className="compare-layout-canvas-container">
@ -158,7 +165,7 @@ const CompareLayOut = () => {
              {showLayoutDropdown && (
                <div className="displayLayouts-container">
                  <div className="header">Layouts</div>
-                  <Search onChange={() => { }} />
+                  <Search onChange={() => {}} />
                  <div className="layouts-container">
                    {products.map((layout) => (
                      <button
--- a/app/src/modules/simulation/machine/instances/machineInstances.tsx
+++ b/app/src/modules/simulation/machine/instances/machineInstances.tsx
@ -2,20 +2,23 @@ import React from "react";
 import MachineInstance from "./machineInstance/machineInstance";
 import MachineContentUi from "../../ui3d/MachineContentUi";
 import { useSceneContext } from "../../../scene/sceneContext";
+import { useViewSceneStore } from "../../../../store/builder/store";

 function MachineInstances() {
-    const { machineStore } = useSceneContext();
-    const { machines } = machineStore();
-    return (
-        <>
-            {machines.map((machine: MachineStatus) => (
-                <React.Fragment key={machine.modelUuid}>
-                    <MachineInstance machineDetail={machine} />
-                    <MachineContentUi machine={machine} />
-                </React.Fragment>
-            ))}
-        </>
-    );
+  const { machineStore } = useSceneContext();
+  const { machines } = machineStore();
+  const { viewSceneLabels } = useViewSceneStore();
+
+  return (
+    <>
+      {machines.map((machine: MachineStatus) => (
+        <React.Fragment key={machine.modelUuid}>
+          <MachineInstance machineDetail={machine} />
+          {viewSceneLabels && <MachineContentUi machine={machine} />}
+        </React.Fragment>
+      ))}
+    </>
+  );
 }

 export default MachineInstances;
--- a/app/src/modules/simulation/storageUnit/instances/storageUnitInstances.tsx
+++ b/app/src/modules/simulation/storageUnit/instances/storageUnitInstances.tsx
@ -1,22 +1,24 @@
-import React from 'react'
-import StorageUnitInstance from './storageUnitInstance/storageUnitInstance'
-import StorageContentUi from '../../ui3d/StorageContentUi';
-import { useSceneContext } from '../../../scene/sceneContext';
+import React from "react";
+import StorageUnitInstance from "./storageUnitInstance/storageUnitInstance";
+import StorageContentUi from "../../ui3d/StorageContentUi";
+import { useSceneContext } from "../../../scene/sceneContext";
+import { useViewSceneStore } from "../../../../store/builder/store";

 function StorageUnitInstances() {
-    const { storageUnitStore } = useSceneContext();
-    const { storageUnits } = storageUnitStore();
+  const { storageUnitStore } = useSceneContext();
+  const { storageUnits } = storageUnitStore();
+  const { viewSceneLabels } = useViewSceneStore();

-    return (
-        <>
-            {storageUnits.map((storageUnit: StorageUnitStatus) => (
-                <React.Fragment key={storageUnit.modelUuid}>
-                    <StorageUnitInstance storageUnit={storageUnit} />
-                    <StorageContentUi storageUnit={storageUnit} />
-                </React.Fragment>
-            ))}
-        </>
-    )
+  return (
+    <>
+      {storageUnits.map((storageUnit: StorageUnitStatus) => (
+        <React.Fragment key={storageUnit.modelUuid}>
+          <StorageUnitInstance storageUnit={storageUnit} />
+          {viewSceneLabels && <StorageContentUi storageUnit={storageUnit} />}
+        </React.Fragment>
+      ))}
+    </>
+  );
 }

-export default StorageUnitInstances
+export default StorageUnitInstances;
--- a/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx
+++ b/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx
@ -2,21 +2,23 @@ import React from "react";
 import VehicleInstance from "./instance/vehicleInstance";
 import VehicleContentUi from "../../ui3d/VehicleContentUi";
 import { useSceneContext } from "../../../scene/sceneContext";
+import { useViewSceneStore } from "../../../../store/builder/store";

 function VehicleInstances() {
    const { vehicleStore } = useSceneContext();
    const { vehicles } = vehicleStore();
+  const { viewSceneLabels } = useViewSceneStore();

-    return (
-        <>
-            {vehicles.map((vehicle: VehicleStatus) => (
-                <React.Fragment key={vehicle.modelUuid}>
-                    <VehicleInstance agvDetail={vehicle} />
-                    <VehicleContentUi vehicle={vehicle} />
-                </React.Fragment>
-            ))}
-        </>
-    );
+  return (
+    <>
+      {vehicles.map((vehicle: VehicleStatus) => (
+        <React.Fragment key={vehicle.modelUuid}>
+          <VehicleInstance agvDetail={vehicle} />
+          {viewSceneLabels && <VehicleContentUi vehicle={vehicle} />}
+        </React.Fragment>
+      ))}
+    </>
+  );
 }

 export default VehicleInstances;
--- a/app/src/pages/Project.tsx
+++ b/app/src/pages/Project.tsx
@ -6,6 +6,7 @@ import {
  useUserName,
  useWallItems,
  useSaveVersion,
+  useViewSceneStore,
  useProjectName,
  useRenameModeStore,
  useSelectedFloorItem,
--- a/app/src/store/builder/store.ts
+++ b/app/src/store/builder/store.ts
@ -680,3 +680,31 @@ export const useVersionStore = create<VersionListStore>((set) => ({
      ),
    })),
 }));
+
+
+
+interface ViewSceneState {
+  viewSceneLabels: boolean;
+  setViewSceneLabels: (value: boolean | ((prev: boolean) => boolean)) => void;
+}
+
+export const useViewSceneStore = create<ViewSceneState>((set) => ({
+  viewSceneLabels: getInitialViewSceneLabels(),
+  setViewSceneLabels: (value) => {
+    set((state) => {
+      const newValue =
+        typeof value === 'function' ? value(state.viewSceneLabels) : value;
+
+      // Store in localStorage manually
+      localStorage.setItem('viewSceneLabels', JSON.stringify(newValue));
+
+      return { viewSceneLabels: newValue };
+    });
+  },
+}));
+
+function getInitialViewSceneLabels(): boolean {
+  if (typeof window === 'undefined') return false; // SSR safety
+  const saved = localStorage.getItem('viewSceneLabels');
+  return saved ? JSON.parse(saved) : false;
+}
--- a/app/src/styles/components/input.scss
+++ b/app/src/styles/components/input.scss
@ -46,6 +46,7 @@ textarea {
 }

 input[type="number"] {
+
  // Chrome, Safari, Edge, Opera
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
@ -146,6 +147,7 @@ input[type="number"] {
      border-radius: #{$border-radius-large};
      cursor: pointer;
      background: transparent;
+
      &:hover {
        background: var(--background-color-secondary);
      }
@ -337,6 +339,7 @@ input[type="number"] {
      max-width: 80%;
      text-overflow: ellipsis;
    }
+
    &:hover {
      background: #333333;
    }
@ -413,6 +416,7 @@ input[type="number"] {
      cursor: pointer;
      transition: background-color 0.3s ease;
      border-radius: #{$border-radius-large};
+
      &:hover {
        color: var(--accent-color);
        background: var(--highlight-accent-color);
@ -483,6 +487,7 @@ input[type="number"] {
    position: relative;
    cursor: pointer;

+
    .check-box-style {
      position: absolute;
      height: 20px;
@ -714,21 +719,26 @@ input[type="number"] {
  .input-header-container {
    padding: 6px 12px;
    @include flex-space-between;
+
    .arrow-container {
      transition: all 0.2s;
      @include flex-center;
    }
  }
+
  .upload-custom-asset-button {
    padding: 6px 12px;
    @include flex-space-between;
+
    .title {
      white-space: nowrap;
      width: 40%;
    }
+
    input {
      display: none;
    }
+
    .upload-button {
      width: 60%;
      background: var(--highlight-accent-color);
@ -738,6 +748,7 @@ input[type="number"] {
      text-align: center;
    }
  }
+
  .canvas-wrapper {
    height: 150px;
    width: 100%;
@ -745,6 +756,7 @@ input[type="number"] {
    padding-right: 4px;
    overflow: hidden;
    position: relative;
+
    .canvas-container {
      width: 100%;
      height: 100%;
@ -752,4 +764,4 @@ input[type="number"] {
      background: var(--background-color-gray);
    }
  }
-}
+}
--- a/app/src/styles/layout/compareLayout.scss
+++ b/app/src/styles/layout/compareLayout.scss
@ -52,7 +52,7 @@
        border-radius: 50%;
        cursor: ew-resize;
        transition: transform 0.1s ease;
-        z-index: 10;
+        z-index: 100;
    }

    .chooseLayout-container {
@ -161,9 +161,7 @@
                        width: 100%;

                        &:hover {
-                            background-color: var(
-                                --highlight-text-color
-                            ) !important;
+                            background-color: var(--highlight-text-color) !important;
                            border-radius: 4px;

                            .layout {
@ -254,6 +252,7 @@
                                display: flex;
                            }
                        }
+
                        .metric-value {
                            padding-top: 6px;
                            font-size: var(--font-size-xlarge);
@ -289,6 +288,7 @@
                                top: -57%;
                                left: 220%;
                            }
+
                            &::after {
                                content: "";
                                position: absolute;
@ -300,21 +300,19 @@
                                background-color: #b7b7c6;

                                // Custom polygon shape (adjust if needed)
-                                clip-path: polygon(
-                                    96% 52%,
-                                    96% 54%,
-                                    45% 53%,
-                                    3% 100%,
-                                    0 100%,
-                                    42% 52%
-                                );
+                                clip-path: polygon(96% 52%,
+                                        96% 54%,
+                                        45% 53%,
+                                        3% 100%,
+                                        0 100%,
+                                        42% 52%);

                                z-index: 0; // Behind any inner content
                            }
                        }

                        // Optional: content above the shape
-                        > * {
+                        >* {
                            position: relative;
                            z-index: 1;
                        }
@ -322,12 +320,14 @@
                        &:nth-child(2) {
                            grid-column-start: 1;
                            grid-row-start: 2;
+
                            .metric-label {
                                white-space: normal;
                                width: 50px;
                                left: 230%;
                            }
                        }
+
                        &:nth-child(3) {
                            grid-row: span 2 / span 2;
                            grid-column-start: 2;
@ -367,21 +367,19 @@
                            height: 100%;

                            background: var(--background-color, wheat);
-                            clip-path: polygon(
-                                25% 0%,
-                                75% 0%,
-                                100% 50%,
-                                75% 100%,
-                                25% 100%,
-                                0% 50%
-                            );
+                            clip-path: polygon(25% 0%,
+                                    75% 0%,
+                                    100% 50%,
+                                    75% 100%,
+                                    25% 100%,
+                                    0% 50%);
                            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));

                            z-index: 0;
                        }

                        // Content stays above the shape
-                        > * {
+                        >* {
                            position: relative;
                            z-index: 1;
                        }
@ -586,4 +584,4 @@
            position: relative;
        }
    }
-}
+}
--- a/app/src/styles/layout/loading.scss
+++ b/app/src/styles/layout/loading.scss
@ -6,6 +6,16 @@
  width: 100vw;
  background: var(--background-color-solid);

+  &.comparisionLoading {
+
+    position: fixed;
+    top: 0;
+    right: 0;
+
+    height: 100vh;
+    width: 50vw;
+  }
+
  .loading-container {
    position: relative;
    height: 100%;
@ -59,6 +69,12 @@
    }

    .progress-container {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
      .progress-value {
        font-family: #{$font-josefin-sans};
        font-weight: #{$thin-weight};
@ -69,7 +85,7 @@

      .progress-indicator-container {
        height: 6px;
-        width: 60vw;
+        width: 60%;
        background: var(--highlight-accent-color);
        border-radius: #{$border-radius-small};
        position: relative;
--- a/app/src/styles/scene/scene.scss
+++ b/app/src/styles/scene/scene.scss
@ -4,11 +4,21 @@
 .distance-text-wrapper,
 .zone-name-wrapper,
 .pointer-none {
-  pointer-events: none !important;
+  pointer-events: auto !important;
+  background-color: gray;
+}
+
+.zone-name-wrapper {
+  background: var(--background-color-accent);
+  color: var(--text-button-color);
+  outline: 1px solid var(--border-color);
+  border-radius: #{$border-radius-medium};
+  backdrop-filter: blur(12px);
 }

 .distance-text {
  pointer-events: none !important;
+
  div {
    position: absolute;
    transform: translate(-50%, -50%) scale(0.8);
@ -22,18 +32,16 @@
    border-radius: #{$border-radius-medium};
    box-shadow: var(--box-shadow-light);
  }
+
  .area {
    background: #008cff;
  }
 }

-.zone-name{
-  background: var(--background-color);
-  padding: 2px 8px;
+.zone-name {
+  padding: 2px 10px;
  text-wrap: nowrap;
-  backdrop-filter: blur(12px);
-  border-radius: #{$border-radius-medium};
-  outline: 1px solid var(--border-color);
+  color: var(--text-button-color);
 }

 //
@ -54,19 +62,55 @@
  border-radius: #{$border-radius-large};
  outline: 1px solid var(--border-color);
  transform: translate(-50%, 12px);
-  z-index: 100;
+  z-index: 2;
+
  .presets-container {
    @include flex-center;
    gap: 4px;
+
    .preset {
      background: var(--background-color);
      padding: 2px 8px;
      border-radius: #{$border-radius-large};
      outline: 1px solid var(--border-color);
    }
+
    .active {
      background: var(--background-color-accent);
      color: var(--text-button-color);
    }
  }
 }
+
+
+
+.label-toogler {
+  position: fixed;
+  bottom: 4%;
+  right: 1.5%;
+  z-index: 10;
+
+  // background: var(--background-color);
+  // backdrop-filter: blur(10px);
+  // outline: 1px solid var(--border-color);
+  border-radius: 8px;
+
+  .input-toggle-container {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    gap: 12px;
+
+    .check-box {
+      width: 35px;
+      height: 20px;
+
+      .check-box-style {
+        width: 16px;
+        height: 16px;
+        background: var(--text-button-color) !important;
+      }
+    }
+  }
+}
--- a/app/src/utils/shortcutkeys/handleShortcutKeys.ts
+++ b/app/src/utils/shortcutkeys/handleShortcutKeys.ts
@ -13,6 +13,7 @@ import {
  useShortcutStore,
  useToggleView,
  useToolMode,
+  useViewSceneStore,
 } from "../../store/builder/store";
 import useCameraModeStore, {
  usePlayButtonStore,
@ -41,6 +42,7 @@ const KeyPressListener: React.FC = () => {
  const { setIsVersionSaved } = useSaveVersion();
  const { isLogListVisible, setIsLogListVisible } = useLogger();
  const { hidePlayer, setHidePlayer } = usePlayerStore();
+  const { viewSceneLabels, setViewSceneLabels } = useViewSceneStore();
  const { isRenameMode, setIsRenameMode } = useRenameModeStore();
  const { selectedFloorItem } = useSelectedFloorItem();

@ -158,6 +160,12 @@ const KeyPressListener: React.FC = () => {
  };

  const handleKeyPress = (event: KeyboardEvent) => {
+    console.log(
+      "isTextInput(document.activeElement): ",
+      isTextInput(document.activeElement)
+    );
+    if (isTextInput(document.activeElement)) return;
+
    const keyCombination = detectModifierKeys(event);

    if (isTextInput(document.activeElement) && keyCombination !== "ESCAPE")
@ -183,6 +191,7 @@ const KeyPressListener: React.FC = () => {
      keyCombination === "Ctrl+R"
    )
      return;
+    console.log("keyCombination: ", keyCombination);

    event.preventDefault();

@ -211,6 +220,10 @@ const KeyPressListener: React.FC = () => {
    if (keyCombination === "Ctrl+Shift+?") {
      setShowShortcuts(!showShortcuts);
    }
+    if (keyCombination === "U") {
+      console.log("viewSceneLabels: ", viewSceneLabels);
+      setViewSceneLabels((prev) => !prev);
+    }

    if (selectedFloorItem && keyCombination === "F2") {
      setIsRenameMode(true);