Refactor: Remove deprecated API endpoints and implement new zone management features

- Deleted obsolete API files for wall items, layers, lines, and points. - Introduced new zone management APIs including create, delete, and update functionalities. - Enhanced zone state management in the store with new properties for height and color. - Implemented 2D and 3D zone rendering components for better visualization. - Added asset fetching functionalities for marketplace integration. - Updated types to accommodate new zone properties and API responses.
2025-06-27 17:51:57 +05:30
parent 812a4f6aef
commit fa6506c0be
46 changed files with 1301 additions and 1301 deletions
--- a/app/src/components/layout/scenes/MainScene.tsx
+++ b/app/src/components/layout/scenes/MainScene.tsx
@@ -33,7 +33,7 @@ import {
 import { useProductContext } from "../../../modules/simulation/products/productContext";
 import RegularDropDown from "../../ui/inputs/RegularDropDown";
 import RenameTooltip from "../../ui/features/RenameTooltip";
-import { setAssetsApi } from "../../../services/factoryBuilder/assest/floorAsset/setAssetsApi";
+import { setAssetsApi } from "../../../services/factoryBuilder/asset/floorAsset/setAssetsApi";
 import { useParams } from "react-router-dom";
 import { useSceneContext } from "../../../modules/scene/sceneContext";
 import { useVersionHistoryStore } from "../../../store/builder/useVersionHistoryStore";
--- a/app/src/components/layout/sidebarLeft/Assets.tsx
+++ b/app/src/components/layout/sidebarLeft/Assets.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Search from "../../ui/inputs/Search";
-import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets/getCategoryAsset";
+import { getCategoryAsset } from "../../../services/factoryBuilder/asset/assets/getCategoryAsset";
 import { fetchAssets } from "../../../services/marketplace/fetchAssets";
 import { useSelectedItem } from "../../../store/builder/store";

--- a/app/src/components/ui/list/List.tsx
+++ b/app/src/components/ui/list/List.tsx
@@ -17,7 +17,7 @@ import {
  useZones,
 } from "../../../store/builder/store";
 import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation";
-import { setAssetsApi } from "../../../services/factoryBuilder/assest/floorAsset/setAssetsApi";
+import { setAssetsApi } from "../../../services/factoryBuilder/asset/floorAsset/setAssetsApi";
 import { useParams } from "react-router-dom";
 import { getUserData } from "../../../functions/getUserData";
 import { useSceneContext } from "../../../modules/scene/sceneContext";
--- a/app/src/modules/builder/IntialLoad/loadInitialWallItems.ts
+++ b/app/src/modules/builder/IntialLoad/loadInitialWallItems.ts
@@ -2,7 +2,7 @@
 // import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
 // import * as THREE from "three";
 // import * as Types from "../../../types/world/worldTypes";
-// import { getWallItems } from "../../../services/factoryBuilder/assest/wallAsset/getWallItemsApi";
+// import { getWallItems } from "../../../services/factoryBuilder/asset/wallAsset/getWallItemsApi";
 // import { retrieveGLTF, storeGLTF } from "../../../utils/indexDB/idbUtils";
 // import { getUserData } from "../../../functions/getUserData";

--- a/app/src/modules/builder/asset/assetsGroup.tsx
+++ b/app/src/modules/builder/asset/assetsGroup.tsx
@@ -1,6 +1,6 @@
 import * as THREE from "three"
 import { useEffect } from 'react'
-import { getFloorAssets } from '../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi';
+import { getFloorAssets } from '../../../services/factoryBuilder/asset/floorAsset/getFloorItemsApi';
 import { useLoadingProgress, useRenameModeStore, useSelectedFloorItem, useSelectedItem, useSocketStore } from '../../../store/builder/store';
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
--- a/app/src/modules/builder/asset/functions/addAssetModel.ts
+++ b/app/src/modules/builder/asset/functions/addAssetModel.ts
@@ -3,7 +3,7 @@ import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
 import * as Types from "../../../../types/world/worldTypes";
 import { retrieveGLTF, storeGLTF } from "../../../../utils/indexDB/idbUtils";
-// import { setAssetsApi } from '../../../../services/factoryBuilder/assest/floorAsset/setAssetsApi';
+// import { setAssetsApi } from '../../../../services/factoryBuilder/asset/floorAsset/setAssetsApi';
 import { Socket } from "socket.io-client";
 import * as CONSTANTS from "../../../../types/world/worldConstants";
 import PointsCalculator from "../../../simulation/events/points/functions/pointsCalculator";
--- a/app/src/modules/builder/builder.tsx
+++ b/app/src/modules/builder/builder.tsx
@@ -24,7 +24,7 @@ import * as Types from "../../types/world/worldTypes";
 import SocketResponses from "../collaboration/socket/socketResponses.dev";
 import Ground from "../scene/environment/ground";
 import { findEnvironment } from "../../services/factoryBuilder/environment/findEnvironment";
-import ZoneGroup from "./groups/zoneGroup";
+
 import MeasurementTool from "../scene/tools/measurementTool";
 import NavMesh from "../simulation/vehicle/navMesh/navMesh";
 import CalculateAreaGroup from "./groups/calculateAreaGroup";
@@ -34,21 +34,19 @@ import DxfFile from "./dfx/LoadBlueprint";
 import AislesGroup from "./aisle/aislesGroup";
 import WallGroup from "./wall/wallGroup";
 import FloorGroup from "./floor/floorGroup";
+import ZoneGroup from "./zone/zoneGroup";
+
 import { useParams } from "react-router-dom";
 import { useBuilderStore } from "../../store/builder/useBuilderStore";
 import { getUserData } from "../../functions/getUserData";

 export default function Builder() {
    const state = useThree<Types.ThreeState>(); // Importing the state from the useThree hook, which contains the scene, camera, and other Three.js elements.
-    const dragPointControls = useRef() as Types.RefDragControl; // Reference for drag point controls, an array for drag control.

    // Assigning the scene and camera from the Three.js state to the references.

    const plane = useRef<THREE.Mesh>(null); // Reference for a plane object for raycaster reference.
    const grid = useRef() as any; // Reference for a grid object for raycaster reference.
-    const floorPlanGroupLine = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the lines that are drawn.
-    const floorPlanGroupPoint = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the points that are created.
-    const currentLayerPoint = useRef([]) as Types.RefMeshArray; // Reference for points that re in the current layer used to update the points in drag controls.

    const { toggleView } = useToggleView(); // State for toggling between 2D and 3D.
    const { setToolMode } = useToolMode();
@@ -111,14 +109,16 @@ export default function Builder() {
                hoveredDeletableWallItem={hoveredDeletableWallItem}
            /> */}

-            <Bvh firstHitOnly>
-
-                <ZoneGroup />
-
            <AssetsGroup plane={plane} />

            <AislesGroup />

+            <WallGroup />
+
+            <FloorGroup />
+
+            <ZoneGroup />
+
            <MeasurementTool />

            <CalculateAreaGroup />
@@ -128,11 +128,6 @@ export default function Builder() {
            <DxfFile />

            <LayoutImage />
-            </Bvh>
-
-            <WallGroup />
-
-            <FloorGroup />
        </>
    );
 }
--- a/app/src/modules/builder/floor/Instances/Instance/floor2DInstance.tsx
+++ b/app/src/modules/builder/floor/Instances/Instance/floor2DInstance.tsx
@@ -32,7 +32,6 @@ function Floor2DInstance({ floor }: { floor: Floor }) {
                name={`Floor-${floor.floorUuid}`}
                args={[shape, {
                    depth: Constants.floorConfig.height,
-                    bevelEnabled: floor.isBeveled,
                }]}
                userData={floor}
            >
--- a/app/src/modules/builder/groups/zoneGroup.tsx
+++ b/app/src/modules/builder/groups/zoneGroup.tsx
--- a/app/src/modules/builder/wall/Instances/wallInstances.tsx
+++ b/app/src/modules/builder/wall/Instances/wallInstances.tsx
@@ -17,7 +17,7 @@ import texturePathDark from "../../../../assets/textures/floor/black.png";
 function WallInstances() {
    const { wallStore } = useSceneContext();
    const { walls } = wallStore();
-    const { rooms } = useWallClassification(walls)
+    const { rooms } = useWallClassification(walls);
    const { toggleView } = useToggleView();

    useEffect(() => {
--- a/app/src/modules/builder/zone/Instances/Instance/zone2DInstance.tsx
+++ b/app/src/modules/builder/zone/Instances/Instance/zone2DInstance.tsx
@@ -0,0 +1,50 @@
+import { useMemo } from 'react';
+import { DoubleSide, Shape, Vector2 } from 'three';
+import { Extrude } from '@react-three/drei';
+import * as Constants from '../../../../../types/world/worldConstants';
+
+function Zone2DInstance({ zone }: { zone: Zone }) {
+    const savedTheme: string | null = localStorage.getItem("theme");
+
+    const shape = useMemo(() => {
+        const shape = new Shape();
+        const points = zone.points.map(p => new Vector2(p.position[0], p.position[2]));
+        if (points.length < 3) return null;
+        shape.moveTo(points[0].x, points[0].y);
+        for (let i = 1; i < points.length; i++) {
+            shape.lineTo(points[i].x, points[i].y);
+        }
+        return shape;
+    }, [zone]);
+
+    if (!shape) return null;
+
+    return (
+        <mesh
+            castShadow
+            receiveShadow
+            name={`Zone-2D-${zone.zoneUuid}`}
+            rotation={[Math.PI / 2, 0, 0]}
+            position={[0, 0, 0]}
+            userData={zone}
+        >
+            <Extrude
+                name={`Zone-${zone.zoneUuid}`}
+                args={[shape, {
+                    depth: Constants.floorConfig.height,
+                }]}
+                userData={zone}
+            >
+                <meshBasicMaterial
+                    color={savedTheme === "dark" ? "green" : "green"}
+                    side={DoubleSide}
+                    transparent
+                    opacity={0.4}
+                    depthWrite={false}
+                />
+            </Extrude>
+        </mesh>
+    );
+}
+
+export default Zone2DInstance;
--- a/app/src/modules/builder/zone/Instances/Instance/zoneInstance.tsx
+++ b/app/src/modules/builder/zone/Instances/Instance/zoneInstance.tsx
@@ -0,0 +1,73 @@
+import { useMemo } from 'react'
+import { Color, DoubleSide, ShaderMaterial } from 'three';
+import { Vector3 } from 'three';
+
+function ZoneInstance({ zone }: { zone: Zone }) {
+    const zoneLayer = zone.points[0].layer;
+
+    const zoneMaterial = useMemo(() => {
+        return new ShaderMaterial({
+            side: DoubleSide,
+            vertexShader: `
+                    varying vec2 vUv;
+                    void main(){
+                        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+                        vUv = uv;
+                    }
+                `,
+            fragmentShader: `
+                    varying vec2 vUv;
+                    uniform vec3 uOuterColor;
+                    void main(){
+                        float alpha = 1.0 - vUv.y;
+                        gl_FragColor = vec4(uOuterColor, alpha);
+                    }
+                `,
+            uniforms: {
+                uOuterColor: { value: new Color(zone.zoneColor) },
+            },
+            transparent: true,
+            depthWrite: false,
+        })
+    }, []);
+
+    return (
+        <>
+            <mesh
+                name={`Zone-${zone.zoneUuid}`}
+                userData={zone}
+            >
+                {zone.points.slice(0, -1).map((point, index: number) => {
+                    const nextPoint = zone.points[index + 1];
+
+                    const point1 = new Vector3(point.position[0], point.position[1], point.position[2]);
+                    const point2 = new Vector3(nextPoint.position[0], nextPoint.position[1], nextPoint.position[2]);
+
+                    const planeWidth = point1.distanceTo(point2);
+                    const planeHeight = zone.zoneHeight;
+
+                    const midpoint = new Vector3((point1.x + point2.x) / 2, zone.zoneHeight / 2 + (zoneLayer - 1) * zone.zoneHeight, (point1.z + point2.z) / 2);
+
+                    const angle = Math.atan2(point2.z - point1.z, point2.x - point1.x);
+
+                    return (
+                        <mesh
+                            key={index}
+                            position={midpoint}
+                            rotation={[0, -angle, 0]}
+                        >
+                            <planeGeometry args={[planeWidth, planeHeight]} />
+                            <primitive
+                                object={zoneMaterial.clone()}
+                                attach="material"
+                            />
+                        </mesh>
+                    );
+                })}
+
+            </ mesh>
+        </>
+    )
+}
+
+export default ZoneInstance
--- a/app/src/modules/builder/zone/Instances/zoneInstances.tsx
+++ b/app/src/modules/builder/zone/Instances/zoneInstances.tsx
@@ -0,0 +1,132 @@
+import React, { useEffect, useMemo } from 'react';
+import { Vector3 } from 'three';
+import { Html } from '@react-three/drei';
+import { useSceneContext } from '../../../scene/sceneContext';
+import { useToggleView } from '../../../../store/builder/store';
+import Line from '../../line/line';
+import Point from '../../point/point';
+import ZoneInstance from './Instance/zoneInstance';
+import Zone2DInstance from './Instance/zone2DInstance';
+
+function ZoneInstances() {
+    const { zoneStore } = useSceneContext();
+    const { zones } = zoneStore();
+    const { toggleView } = useToggleView();
+
+    useEffect(() => {
+        console.log('zones: ', zones);
+    }, [zones]);
+
+    const allPoints = useMemo(() => {
+        const points: Point[] = [];
+        const seenUuids = new Set<string>();
+
+        zones.forEach(zone => {
+            zone.points.forEach(point => {
+                if (!seenUuids.has(point.pointUuid)) {
+                    seenUuids.add(point.pointUuid);
+                    points.push(point);
+                }
+            });
+        });
+
+        return points;
+    }, [zones]);
+
+    const allLines = useMemo(() => {
+        const lines: { start: Point; end: Point; key: string }[] = [];
+        const seenUuids = new Set<string>();
+
+        zones.forEach((zone) => {
+            const points = zone.points;
+            if (points.length < 2) return;
+
+            for (let i = 0; i < points.length; i++) {
+                const current = points[i];
+                const next = points[(i + 1) % points.length];
+                const lineKey = `${current.pointUuid}-${next.pointUuid}`;
+                if (current.pointUuid !== next.pointUuid && !seenUuids.has(lineKey)) {
+                    seenUuids.add(lineKey);
+                    lines.push({
+                        start: current,
+                        end: next,
+                        key: lineKey
+                    });
+                }
+            }
+        });
+
+        return lines;
+    }, [zones]);
+
+    return (
+        <>
+
+            {!toggleView && zones.length > 0 && (
+                <mesh name='Zones-Group'>
+                    {zones.map((zone) => (
+                        <ZoneInstance key={zone.zoneUuid} zone={zone} />
+                    ))}
+                </mesh>
+            )}
+
+            {toggleView && zones.length > 0 && (
+                <mesh name='Zones-2D-Group'>
+                    {zones.map((zone) => (
+                        <Zone2DInstance key={zone.zoneUuid} zone={zone} />
+                    ))}
+                </mesh>
+            )}
+
+            {toggleView && (
+                <>
+                    <group name='Zone-Points-Group'>
+                        {allPoints.map((point) => (
+                            <Point key={point.pointUuid} point={point} />
+                        ))}
+                    </group>
+
+                    <group name='Zone-Lines-Group'>
+
+                        {allLines.map(({ start, end, key }) => (
+                            <Line key={key} points={[start, end]} />
+                        ))}
+
+                        {allLines.map((line) => {
+                            const { start, end, key } = line;
+                            const textPosition = new Vector3().addVectors(new Vector3(...start.position), new Vector3(...end.position)).divideScalar(2);
+                            const distance = new Vector3(...start.position).distanceTo(new Vector3(...end.position));
+
+                            return (
+                                <React.Fragment key={key}>
+                                    {toggleView &&
+                                        <Html
+                                            key={`${start.pointUuid}_${end.pointUuid}`}
+                                            userData={line}
+                                            position={[textPosition.x, 1, textPosition.z]}
+                                            wrapperClass="distance-text-wrapper"
+                                            className="distance-text"
+                                            zIndexRange={[1, 0]}
+                                            prepend
+                                            sprite
+                                        >
+                                            <div
+                                                key={key}
+                                                className={`distance ${key}`}
+                                            >
+                                                {distance.toFixed(2)} m
+                                            </div>
+                                        </Html>
+                                    }
+                                </React.Fragment>
+                            )
+                        })}
+
+                    </group>
+                </>
+            )}
+        </>
+    )
+}
+
+export default ZoneInstances
--- a/app/src/modules/builder/zone/zoneCreator/zoneCreator.tsx
+++ b/app/src/modules/builder/zone/zoneCreator/zoneCreator.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+
+function ZoneCreator() {
+    return (
+        <>
+        </>
+    )
+}
+
+export default ZoneCreator
--- a/app/src/modules/builder/zone/zoneGroup.tsx
+++ b/app/src/modules/builder/zone/zoneGroup.tsx
@@ -0,0 +1,54 @@
+import { useEffect } from 'react';
+import { useToggleView } from '../../../store/builder/store';
+import { useBuilderStore } from '../../../store/builder/useBuilderStore';
+import { useVersionContext } from '../version/versionContext';
+import { useSceneContext } from '../../scene/sceneContext';
+import { useParams } from 'react-router-dom';
+import useModuleStore from '../../../store/useModuleStore';
+import ZoneCreator from './zoneCreator/zoneCreator';
+import ZoneInstances from './Instances/zoneInstances';
+
+import { getZonesApi } from '../../../services/factoryBuilder/zone/getZonesApi';
+
+function ZoneGroup() {
+    const { togglView } = useToggleView();
+    const { setSelectedZone } = useBuilderStore();
+    const { activeModule } = useModuleStore();
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
+    const { zoneStore } = useSceneContext();
+    const { setZones } = zoneStore();
+    const { projectId } = useParams();
+
+    useEffect(() => {
+        if (togglView || activeModule !== 'builder') {
+            setSelectedZone(null);
+        }
+    }, [togglView, activeModule])
+
+    useEffect(() => {
+        if (projectId && selectedVersion) {
+            getZonesApi(projectId, selectedVersion?.versionId || '').then((zones) => {
+                if (zones && zones.length > 0) {
+                    setZones(zones);
+                } else {
+                    setZones([]);
+                }
+            }).catch((err) => {
+                console.log(err);
+            })
+        }
+    }, [projectId, selectedVersion?.versionId])
+
+    return (
+        <>
+
+            <ZoneCreator />
+
+            <ZoneInstances />
+
+        </>
+    )
+}
+
+export default ZoneGroup
--- a/app/src/modules/market/MarketPlace.tsx
+++ b/app/src/modules/market/MarketPlace.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import FilterSearch from "./FilterSearch";
 import CardsContainer from "./CardsContainer";
-import { getAssetImages } from "../../services/factoryBuilder/assest/assets/getAssetImages";
+import { getAssetImages } from "../../services/factoryBuilder/asset/assets/getAssetImages";
 import SkeletonUI from "../../components/templates/SkeletonUI";
 interface ModelData {
  CreatedBy: string;
--- a/app/src/modules/scene/controls/selectionControls/copyPasteControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/copyPasteControls.tsx
@@ -2,7 +2,7 @@ import * as THREE from "three";
 import { useEffect, useMemo } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
 import { useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/builder/store";
-// import { setAssetsApi } from '../../../../services/factoryBuilder/assest/floorAsset/setAssetsApi';
+// import { setAssetsApi } from '../../../../services/factoryBuilder/asset/floorAsset/setAssetsApi';
 import * as Types from "../../../../types/world/worldTypes";
 import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
 import { useParams } from "react-router-dom";
--- a/app/src/modules/scene/controls/selectionControls/duplicationControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/duplicationControls.tsx
@@ -2,7 +2,7 @@ import * as THREE from "three";
 import { useEffect, useMemo } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
 import { useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/builder/store";
-// import { setAssetsApi } from '../../../../services/factoryBuilder/assest/floorAsset/setAssetsApi';
+// import { setAssetsApi } from '../../../../services/factoryBuilder/asset/floorAsset/setAssetsApi';
 import * as Types from "../../../../types/world/worldTypes";
 import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
 import { useParams } from "react-router-dom";
--- a/app/src/modules/scene/controls/selectionControls/moveControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/moveControls.tsx
@@ -2,7 +2,7 @@ import * as THREE from "three";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
 import { useSelectedAssets, useSocketStore, useToggleView, } from "../../../../store/builder/store";
-// import { setAssetsApi } from '../../../../services/factoryBuilder/assest/floorAsset/setAssetsApi';
+// import { setAssetsApi } from '../../../../services/factoryBuilder/asset/floorAsset/setAssetsApi';
 import * as Types from "../../../../types/world/worldTypes";
 import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
 import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi";
--- a/app/src/modules/scene/controls/selectionControls/rotateControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/rotateControls.tsx
@@ -2,7 +2,7 @@ import * as THREE from "three";
 import { useEffect, useMemo, useRef } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
 import { useSelectedAssets, useSocketStore, useToggleView } from "../../../../store/builder/store";
-// import { setAssetsApi } from '../../../../services/factoryBuilder/assest/floorAsset/setAssetsApi';
+// import { setAssetsApi } from '../../../../services/factoryBuilder/asset/floorAsset/setAssetsApi';
 import * as Types from "../../../../types/world/worldTypes";
 import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi";
 import { useParams } from "react-router-dom";
--- a/app/src/modules/scene/controls/selectionControls/selectionControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/selectionControls.tsx
@@ -5,7 +5,7 @@ import { SelectionHelper } from "./selectionHelper";
 import { useFrame, useThree } from "@react-three/fiber";
 import { useSelectedAssets, useSocketStore, useToggleView, useToolMode, } from "../../../../store/builder/store";
 import BoundingBox from "./boundingBoxHelper";
-// import { deleteFloorItem } from '../../../../services/factoryBuilder/assest/floorAsset/deleteFloorItemApi';
+// import { deleteFloorItem } from '../../../../services/factoryBuilder/asset/floorAsset/deleteFloorItemApi';
 import * as Types from "../../../../types/world/worldTypes";

 import DuplicationControls from "./duplicationControls";
--- a/app/src/modules/scene/controls/transformControls/transformControls.tsx
+++ b/app/src/modules/scene/controls/transformControls/transformControls.tsx
@@ -6,7 +6,7 @@ import { useThree } from "@react-three/fiber";
 import { useEffect, useState } from "react";
 import { detectModifierKeys } from "../../../../utils/shortcutkeys/detectModifierKeys";
 import { upsertProductOrEventApi } from "../../../../services/simulation/products/UpsertProductOrEventApi";
-// import { setAssetsApi } from "../../../../services/factoryBuilder/assest/floorAsset/setAssetsApi";
+// import { setAssetsApi } from "../../../../services/factoryBuilder/asset/floorAsset/setAssetsApi";
 import { useParams } from "react-router-dom";
 import { useProductContext } from "../../../simulation/products/productContext";
 import { getUserData } from "../../../../functions/getUserData";
--- a/app/src/services/factoryBuilder/assest/wallAsset/deleteWallItemApi.ts
+++ b/app/src/services/factoryBuilder/assest/wallAsset/deleteWallItemApi.ts
@@ -1,42 +0,0 @@
-let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
-
-export const deleteWallItem = async (
-  organization: string,
-  modelUuid: string,
-  modelName: string
-) => {
-  try {
-    const response = await fetch(
-      `${url_Backend_dwinzo}/api/V1/wallItems/delete`,
-      {
-        method: "DELETE",
-        headers: {
-          Authorization: "Bearer <access_token>",
-          "Content-Type": "application/json",
-          token: localStorage.getItem("token") || "",
-          refresh_token: localStorage.getItem("refreshToken") || "",
-        },
-        body: JSON.stringify({ organization, modelUuid, modelName }),
-      }
-    );
-    const newAccessToken = response.headers.get("x-access-token");
-    if (newAccessToken) {
-      //console.log("New token received:", newAccessToken);
-      localStorage.setItem("token", newAccessToken);
-    }
-
-    if (!response.ok) {
-      console.error("Failed to delete Wall Item");
-    }
-
-    const result = await response.json();
-    return result;
-  } catch (error) {
-    echo.error("Failed to delete wall items");
-    if (error instanceof Error) {
-      console.log(error.message);
-    } else {
-      console.log("An unknown error occurred");
-    }
-  }
-};
--- a/app/src/services/factoryBuilder/assest/wallAsset/getWallItemsApi.ts
+++ b/app/src/services/factoryBuilder/assest/wallAsset/getWallItemsApi.ts
@@ -1,37 +0,0 @@
-let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
-
-export const getWallItems = async (organization: string, projectId?: string, versionId?: string) => {
-  try {
-    const response = await fetch(
-      `${url_Backend_dwinzo}/api/V1/wallItems/${projectId}/${versionId}`,
-      {
-        method: "GET",
-        headers: {
-          Authorization: "Bearer <access_token>",
-          "Content-Type": "application/json",
-          token: localStorage.getItem("token") || "",
-          refresh_token: localStorage.getItem("refreshToken") || "",
-        },
-      }
-    );
-    const newAccessToken = response.headers.get("x-access-token");
-    if (newAccessToken) {
-      //console.log("New token received:", newAccessToken);
-      localStorage.setItem("token", newAccessToken);
-    }
-    // console.log('response: ', response);
-    if (!response.ok) {
-      console.error("Failed to get Wall Items");
-    }
-
-    const result = await response.json();
-    return result;
-  } catch (error) {
-    echo.error("Failed to get wall items");
-    if (error instanceof Error) {
-      console.log(error.message);
-    } else {
-      console.log("An unknown error occurred");
-    }
-  }
-};
--- a/app/src/services/factoryBuilder/assest/wallAsset/setWallItemApi.ts
+++ b/app/src/services/factoryBuilder/assest/wallAsset/setWallItemApi.ts
@@ -1,55 +0,0 @@
-let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
-
-export const setWallItem = async (
-  organization: string,
-  modelUuid: string,
-  modelName: string,
-  type: string,
-  csgposition: Object,
-  csgscale: Object,
-  position: Object,
-  quaternion: Object,
-  scale: Object
-) => {
-  try {
-    const response = await fetch(`${url_Backend_dwinzo}/api/V1/wallItems`, {
-      method: "POST",
-      headers: {
-        Authorization: "Bearer <access_token>",
-        "Content-Type": "application/json",
-        token: localStorage.getItem("token") || "",
-        refresh_token: localStorage.getItem("refreshToken") || "",
-      },
-      body: JSON.stringify({
-        organization,
-        modelUuid,
-        modelName,
-        position,
-        type,
-        csgposition,
-        csgscale,
-        quaternion,
-        scale,
-      }),
-    });
-
-    const newAccessToken = response.headers.get("x-access-token");
-    if (newAccessToken) {
-      //console.log("New token received:", newAccessToken);
-      localStorage.setItem("token", newAccessToken);
-    }
-    if (!response.ok) {
-      console.error("Failed to set or update Wall Item");
-    }
-
-    const result = await response.json();
-    return result;
-  } catch (error) {
-    echo.error("Failed to set wall items");
-    if (error instanceof Error) {
-      console.log(error.message);
-    } else {
-      console.log("An unknown error occurred");
-    }
-  }
-};
--- a/app/src/services/factoryBuilder/assest/assets/getAssetImages.ts
+++ b/app/src/services/factoryBuilder/assest/assets/getAssetImages.ts
--- a/app/src/services/factoryBuilder/assest/assets/getAssetModel.ts
+++ b/app/src/services/factoryBuilder/assest/assets/getAssetModel.ts
--- a/app/src/services/factoryBuilder/assest/assets/getCategoryAsset.ts
+++ b/app/src/services/factoryBuilder/assest/assets/getCategoryAsset.ts
--- a/app/src/services/factoryBuilder/assest/floorAsset/deleteFloorItemApi.ts
+++ b/app/src/services/factoryBuilder/assest/floorAsset/deleteFloorItemApi.ts
--- a/app/src/services/factoryBuilder/assest/floorAsset/getFloorItemsApi.ts
+++ b/app/src/services/factoryBuilder/assest/floorAsset/getFloorItemsApi.ts
--- a/app/src/services/factoryBuilder/assest/floorAsset/setAssetsApi.ts
+++ b/app/src/services/factoryBuilder/assest/floorAsset/setAssetsApi.ts
--- a/app/src/services/factoryBuilder/lines/deleteLayerApi.ts
+++ b/app/src/services/factoryBuilder/lines/deleteLayerApi.ts
@@ -1,34 +0,0 @@
-let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
-
-export const deleteLayer = async (organization: string, layer: number) => {
-  try {
-    const response = await fetch(`${url_Backend_dwinzo}/api/v1/deleteLayer`, {
-      method: "POST",
-      headers: {
-        Authorization: "Bearer <access_token>",
-        "Content-Type": "application/json",
-        token: localStorage.getItem("token") || "",
-        refresh_token: localStorage.getItem("refreshToken") || "",
-      },
-      body: JSON.stringify({ organization, layer }),
-    });
-    const newAccessToken = response.headers.get("x-access-token");
-    if (newAccessToken) {
-      //console.log("New token received:", newAccessToken);
-      localStorage.setItem("token", newAccessToken);
-    }
-    if (!response.ok) {
-      console.error("Failed to delete line");
-    }
-
-    const result = await response.json();
-    return result;
-  } catch (error) {
-    echo.error("Failed to delete line");
-    if (error instanceof Error) {
-      console.log(error.message);
-    } else {
-      console.log("An unknown error occurred");
-    }
-  }
-};
--- a/app/src/services/factoryBuilder/lines/deleteLineApi.ts
+++ b/app/src/services/factoryBuilder/lines/deleteLineApi.ts
@@ -1,34 +0,0 @@
-let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
-
-export const deleteLineApi = async (organization: string, line: Object) => {
-  try {
-    const response = await fetch(`${url_Backend_dwinzo}/api/v1/deleteLine`, {
-      method: "DELETE",
-      headers: {
-        Authorization: "Bearer <access_token>",
-        "Content-Type": "application/json",
-        token: localStorage.getItem("token") || "",
-        refresh_token: localStorage.getItem("refreshToken") || "",
-      },
-      body: JSON.stringify({ organization, line }),
-    });
-    const newAccessToken = response.headers.get("x-access-token");
-    if (newAccessToken) {
-      //console.log("New token received:", newAccessToken);
-      localStorage.setItem("token", newAccessToken);
-    }
-    if (!response.ok) {
-      console.error("Failed to delete line");
-    }
-
-    const result = await response.json();
-    return result;
-  } catch (error) {
-    echo.error("Failed to delete line");
-    if (error instanceof Error) {
-      console.log(error.message);
-    } else {
-      console.log("An unknown error occurred");
-    }
-  }
-};
--- a/app/src/services/factoryBuilder/lines/deletePointApi.ts
+++ b/app/src/services/factoryBuilder/lines/deletePointApi.ts
@@ -1,35 +0,0 @@
-let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
-
-export const deletePointApi = async (organization: string, uuid: string) => {
-  try {
-    const response = await fetch(`${url_Backend_dwinzo}/api/v1/deletePoint`, {
-      method: "DELETE",
-      headers: {
-        Authorization: "Bearer <access_token>",
-        "Content-Type": "application/json",
-        token: localStorage.getItem("token") || "",
-        refresh_token: localStorage.getItem("refreshToken") || "",
-      },
-      body: JSON.stringify({ organization, uuid }),
-    });
-    const newAccessToken = response.headers.get("x-access-token");
-    if (newAccessToken) {
-      //console.log("New token received:", newAccessToken);
-      localStorage.setItem("token", newAccessToken);
-    }
-
-    if (!response.ok) {
-      console.error("Failed to delete point");
-    }
-
-    const result = await response.json();
-    return result;
-  } catch (error) {
-    echo.error("Failed to delete point");
-    if (error instanceof Error) {
-      console.log(error.message);
-    } else {
-      console.log("An unknown error occurred");
-    }
-  }
-};
--- a/app/src/services/factoryBuilder/lines/getLinesApi.ts
+++ b/app/src/services/factoryBuilder/lines/getLinesApi.ts
@@ -1,38 +0,0 @@
-let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
-
-export const getLines = async (organization: string, projectId?: string, versionId?: string) => {
-  try {
-    const response = await fetch(
-      `${url_Backend_dwinzo}/api/V1/lines/${projectId}/${versionId}`,
-      {
-        method: "GET",
-        headers: {
-          Authorization: "Bearer <access_token>",
-          "Content-Type": "application/json",
-          token: localStorage.getItem("token") || "",
-          refresh_token: localStorage.getItem("refreshToken") || "",
-        },
-      }
-    );
-    const newAccessToken = response.headers.get("x-access-token");
-    if (newAccessToken) {
-      //console.log("New token received:", newAccessToken);
-      localStorage.setItem("token", newAccessToken);
-    }
- 
-    if (!response.ok) {
-      console.error("Failed to get Lines");
-    }
-
-    const result = await response.json();
-    // console.log('result: ', result);
-    return result;
-  } catch (error) {
-    echo.error("Failed to get Lines");
-    if (error instanceof Error) {
-      console.log(error.message);
-    } else {
-      console.log("An unknown error occurred");
-    }
-  }
-};
--- a/app/src/services/factoryBuilder/lines/setLineApi.ts
+++ b/app/src/services/factoryBuilder/lines/setLineApi.ts
@@ -1,41 +0,0 @@
-let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
-
-export const setLine = async (
-  organization: string,
-  layer: number,
-  line: Object,
-  type: string
-) => {
-  try {
-    const response = await fetch(`${url_Backend_dwinzo}/api/v1/setLine`, {
-      method: "POST",
-      headers: {
-        Authorization: "Bearer <access_token>",
-        "Content-Type": "application/json",
-        token: localStorage.getItem("token") || "",
-        refresh_token: localStorage.getItem("refreshToken") || "",
-      },
-      body: JSON.stringify({ organization, layer, line, type }),
-    });
-
-    const newAccessToken = response.headers.get("x-access-token");
-    if (newAccessToken) {
-      //console.log("New token received:", newAccessToken);
-      localStorage.setItem("token", newAccessToken);
-    }
-
-    if (!response.ok) {
-      console.error("Failed to set line");
-    }
-
-    const result = await response.json();
-    return result;
-  } catch (error) {
-    echo.error("Failed to set line");
-    if (error instanceof Error) {
-      console.log(error.message);
-    } else {
-      console.log("An unknown error occurred");
-    }
-  }
-};
--- a/app/src/services/factoryBuilder/lines/updatePointApi.ts
+++ b/app/src/services/factoryBuilder/lines/updatePointApi.ts
@@ -1,38 +0,0 @@
-let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
-
-export const updatePoint = async (
-  organization: string,
-  position: Object,
-  uuid: string
-) => {
-  try {
-    const response = await fetch(`${url_Backend_dwinzo}/api/v1/updatePoint`, {
-      method: "POST",
-      headers: {
-        Authorization: "Bearer <access_token>",
-        "Content-Type": "application/json",
-        token: localStorage.getItem("token") || "",
-        refresh_token: localStorage.getItem("refreshToken") || "",
-      },
-      body: JSON.stringify({ organization, position, uuid }),
-    });
-    const newAccessToken = response.headers.get("x-access-token");
-    if (newAccessToken) {
-      //console.log("New token received:", newAccessToken);
-      localStorage.setItem("token", newAccessToken);
-    }
-    if (!response.ok) {
-      console.error("Failed to update point");
-    }
-
-    const result = await response.json();
-    return result;
-  } catch (error) {
-    echo.error("Failed to update point");
-    if (error instanceof Error) {
-      console.log(error.message);
-    } else {
-      console.log("An unknown error occurred");
-    }
-  }
-};
--- a/app/src/services/factoryBuilder/zone/deleteZoneApi.ts
+++ b/app/src/services/factoryBuilder/zone/deleteZoneApi.ts
@@ -0,0 +1,39 @@
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+
+export const deleteZoneApi = async (
+    projectId: string,
+    versionId: string,
+    zoneUuid: string
+) => {
+    try {
+        const response = await fetch(`${url_Backend_dwinzo}/api/V2/deleteZone`, {
+            method: "PATCH",
+            headers: {
+                Authorization: "Bearer <access_token>",
+                "Content-Type": "application/json",
+                token: localStorage.getItem("token") || "",
+                refresh_token: localStorage.getItem("refreshToken") || "",
+            },
+            body: JSON.stringify({ projectId, versionId, zoneUuid }),
+        });
+
+        const newAccessToken = response.headers.get("x-access-token");
+        if (newAccessToken) {
+            localStorage.setItem("token", newAccessToken);
+        }
+
+        if (!response.ok) {
+            console.error("Failed to delete zone:", response.statusText);
+        }
+
+        const result = await response.json();
+        return result;
+    } catch (error) {
+        echo.error("Failed to delete zone");
+        if (error instanceof Error) {
+            console.log(error.message);
+        } else {
+            console.log("An unknown error occurred");
+        }
+    }
+};
--- a/app/src/services/factoryBuilder/zone/getZonesApi.ts
+++ b/app/src/services/factoryBuilder/zone/getZonesApi.ts
@@ -0,0 +1,37 @@
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+
+export const getZonesApi = async (
+    projectId: string,
+    versionId: string,
+) => {
+    try {
+        const response = await fetch(`${url_Backend_dwinzo}/api/V2/zones/${projectId}/${versionId}`, {
+            method: "GET",
+            headers: {
+                Authorization: "Bearer <access_token>",
+                "Content-Type": "application/json",
+                token: localStorage.getItem("token") || "",
+                refresh_token: localStorage.getItem("refreshToken") || "",
+            },
+        });
+
+        const newAccessToken = response.headers.get("x-access-token");
+        if (newAccessToken) {
+            localStorage.setItem("token", newAccessToken);
+        }
+
+        if (!response.ok) {
+            console.error("Failed to get zones:", response.statusText);
+        }
+
+        const result = await response.json();
+        return result;
+    } catch (error) {
+        echo.error("Failed to get zones");
+        if (error instanceof Error) {
+            console.log(error.message);
+        } else {
+            console.log("An unknown error occurred");
+        }
+    }
+};
--- a/app/src/services/factoryBuilder/zone/upsertZoneApi.ts
+++ b/app/src/services/factoryBuilder/zone/upsertZoneApi.ts
@@ -0,0 +1,39 @@
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+
+export const upsertWallApi = async (
+    projectId: string,
+    versionId: string,
+    ZoneData: Zone
+) => {
+    try {
+        const response = await fetch(`${url_Backend_dwinzo}/api/V2/UpsertZone`, {
+            method: "POST",
+            headers: {
+                Authorization: "Bearer <access_token>",
+                "Content-Type": "application/json",
+                token: localStorage.getItem("token") || "",
+                refresh_token: localStorage.getItem("refreshToken") || "",
+            },
+            body: JSON.stringify({ projectId, versionId, ZoneData }),
+        });
+
+        const newAccessToken = response.headers.get("x-access-token");
+        if (newAccessToken) {
+            localStorage.setItem("token", newAccessToken);
+        }
+
+        if (!response.ok) {
+            console.error("Failed to upsert zone:", response.statusText);
+        }
+
+        const result = await response.json();
+        return result;
+    } catch (error) {
+        echo.error("Failed to upsert zone");
+        if (error instanceof Error) {
+            console.log(error.message);
+        } else {
+            console.log("An unknown error occurred");
+        }
+    }
+};
--- a/app/src/services/factoryBuilder/zones/deleteZoneApi.ts
+++ b/app/src/services/factoryBuilder/zones/deleteZoneApi.ts
@@ -1,39 +0,0 @@
-let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
-
-export const deleteZonesApi = async (
-  userId: string,
-  organization: string,
-  zoneUuid: string
-) => {
-  try {
-    const response = await fetch(`${url_Backend_dwinzo}/api/v1/setLine`, {
-      method: "POST",
-      headers: {
-        Authorization: "Bearer <access_token>",
-        "Content-Type": "application/json",
-        token: localStorage.getItem("token") || "",
-        refresh_token: localStorage.getItem("refreshToken") || "",
-      },
-      body: JSON.stringify({ userId, organization, zoneUuid }),
-    });
-    const newAccessToken = response.headers.get("x-access-token");
-    if (newAccessToken) {
-      //console.log("New token received:", newAccessToken);
-      localStorage.setItem("token", newAccessToken);
-    }
-    if (!response.ok) {
-      console.error("Failed to delete zone");
-    }
-
-    const result = await response.json();
-
-    return result;
-  } catch (error) {
-    echo.error("Failed to delete zone");
-    if (error instanceof Error) {
-      console.log(error.message);
-    } else {
-      console.log("An unknown error occurred");
-    }
-  }
-};
--- a/app/src/services/factoryBuilder/zones/getZonesApi.ts
+++ b/app/src/services/factoryBuilder/zones/getZonesApi.ts
@@ -1,40 +0,0 @@
-let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
-// let url_Backend_dwinzo = `http://192.168.0.102:5000`;
-
-export const getZonesApi = async (organization: string, projectId?: string, versionId?: string) => {
-  try {
-    const response = await fetch(
-      `${url_Backend_dwinzo}/api/V1/zones/${projectId}/${versionId}`,
-      {
-        method: "GET",
-        headers: {
-          Authorization: "Bearer <access_token>",
-          "Content-Type": "application/json",
-          token: localStorage.getItem("token") || "",
-          refresh_token: localStorage.getItem("refreshToken") || "",
-        },
-      }
-    );
-    const newAccessToken = response.headers.get("x-access-token");
-    if (newAccessToken) {
-      //console.log("New token received:", newAccessToken);
-      localStorage.setItem("token", newAccessToken);
-    }
-
-    if (!response.ok) {
-      console.error("Failed to get Zones");
-    }
-
-    const result = await response.json();
-    // console.log('result:zone ', result);
-
-    return result;
-  } catch (error) {
-    echo.error("Failed to get zone data");
-    if (error instanceof Error) {
-      console.log(error.message);
-    } else {
-      console.log("An unknown error occurred");
-    }
-  }
-};
--- a/app/src/services/factoryBuilder/zones/setZonesApi.ts
+++ b/app/src/services/factoryBuilder/zones/setZonesApi.ts
@@ -1,38 +0,0 @@
-let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
-
-export const setZonesApi = async (
-  userId: string,
-  organization: string,
-  zoneData: any
-) => {
-  try {
-    const response = await fetch(`${url_Backend_dwinzo}/api/v1/setLine`, {
-      method: "POST",
-      headers: {
-        Authorization: "Bearer <access_token>",
-        "Content-Type": "application/json",
-        token: localStorage.getItem("token") || "",
-        refresh_token: localStorage.getItem("refreshToken") || "",
-      },
-      body: JSON.stringify({ userId, organization, zoneData }),
-    });
-    const newAccessToken = response.headers.get("x-access-token");
-    if (newAccessToken) {
-      //console.log("New token received:", newAccessToken);
-      localStorage.setItem("token", newAccessToken);
-    }
-    if (!response.ok) {
-      console.error("Failed to set zone");
-    }
-
-    const result = await response.json();
-    return result;
-  } catch (error) {
-    echo.error("Failed to zone data");
-    if (error instanceof Error) {
-      console.log(error.message);
-    } else {
-      console.log("An unknown error occurred");
-    }
-  }
-};
--- a/app/src/store/builder/useBuilderStore.ts
+++ b/app/src/store/builder/useBuilderStore.ts
@@ -24,6 +24,11 @@ interface BuilderState {
    sideMaterial: string;
    topMaterial: string;

+    // Zone Settings
+    selectedZone: Object3D | null;
+    zoneHeight: number;
+    zoneColor: string;
+
    // Decal Settings
    selectedDecal: Object3D | null;

@@ -59,6 +64,11 @@ interface BuilderState {
    setBevelStrength: (strength: number) => void;
    setFloorMaterial: (material: string, side: 'side' | 'top') => void;

+    // Setters - Zone
+    setSelectedZone: (zone: Object3D | null) => void;
+    setZoneHeight: (height: number) => void;
+    setZoneColor: (color: string) => void;
+
    // Setters - Decal
    setSelectedDecal: (decal: Object3D | null) => void;

@@ -103,6 +113,10 @@ export const useBuilderStore = create<BuilderState>()(
        sideMaterial: 'Material 1',
        topMaterial: 'Default Material',

+        selectedZone: null,
+        zoneHeight: 7,
+        zoneColor: 'blue',
+
        selectedDecal: null,

        selectedAisle: null,
@@ -201,6 +215,26 @@ export const useBuilderStore = create<BuilderState>()(
            });
        },

+        // === Setters: Zone ===
+
+        setSelectedZone: (zone: Object3D | null) => {
+            set((state) => {
+                state.selectedZone = zone;
+            });
+        },
+
+        setZoneHeight: (height: number) => {
+            set((state) => {
+                state.zoneHeight = height;
+            });
+        },
+
+        setZoneColor: (color: string) => {
+            set((state) => {
+                state.zoneColor = color;
+            });
+        },
+
        // === Setters: Decal ===

        setSelectedDecal: (decal: Object3D | null) => {
--- a/app/src/store/builder/useZoneStore.ts
+++ b/app/src/store/builder/useZoneStore.ts
@@ -7,11 +7,12 @@ interface ZoneStore {
    addZone: (zone: Zone) => void;
    updateZone: (uuid: string, updated: Partial<Zone>) => void;
    setZoneName: (uuid: string, name: string) => void;
+    setZoneHeight: (uuid: string, height: number) => void;
+    setZoneColor: (uuid: string, color: string) => void;
    removeZone: (uuid: string) => void;
    removePointFromZones: (pointUuid: string) => void;
    clearZones: () => void;
    setViewPort: (uuid: string, position: [number, number, number], target: [number, number, number]) => void;
-    setColor: (uuid: string, color: string) => void;

    getZoneById: (uuid: string) => Zone | undefined;
 }
@@ -43,6 +44,20 @@ export const createZoneStore = () => {
                }
            }),

+            setZoneHeight: (uuid, height) => set(state => {
+                const zone = state.zones.find(z => z.zoneUuid === uuid);
+                if (zone) {
+                    zone.zoneHeight = height;
+                }
+            }),
+
+            setZoneColor: (uuid, color) => set(state => {
+                const zone = state.zones.find(z => z.zoneUuid === uuid);
+                if (zone) {
+                    zone.zoneColor = color;
+                }
+            }),
+
            removeZone: (uuid) => set(state => {
                state.zones = state.zones.filter(z => z.zoneUuid !== uuid);
            }),
@@ -65,13 +80,6 @@ export const createZoneStore = () => {
                }
            }),

-            setColor: (uuid, color) => set(state => {
-                const zone = state.zones.find(z => z.zoneUuid === uuid);
-                if (zone) {
-                    zone.zoneColor = color;
-                }
-            }),
-
            getZoneById: (uuid) => {
                return get().zones.find(z => z.zoneUuid === uuid);
            },
--- a/app/src/types/builderTypes.d.ts
+++ b/app/src/types/builderTypes.d.ts
@@ -131,6 +131,7 @@ type Floors = Floor[];
 interface Zone {
    zoneUuid: string;
    zoneName: string;
+    zoneHeight: number;
    zoneColor: string;
    points: Point[];
    viewPortTarget: [number, number, number];