remove wall and aisle creator bug and added zone properties

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

@@ -21,6 +21,8 @@ import SelectedWallProperties from "./properties/SelectedWallProperties";
 import SelectedFloorProperties from "./properties/SelectedFloorProperties";
 import SelectedDecalProperties from "./properties/SelectedDecalProperties";
 import SelectedAisleProperties from "./properties/SelectedAisleProperties";
+import SelectedZoneProperties from "./properties/SelectedZoneProperties";
+
 import ResourceManagement from "./resourceManagement/ResourceManagement";
 import { useSceneContext } from "../../../modules/scene/sceneContext";
 
@@ -35,6 +37,7 @@ type DisplayComponent =
     | "selectedFloorProperties"
     | "selectedDecalProperties"
     | "selectedAisleProperties"
+    | "selectedZoneProperties"
     | "zoneProperties"
     | "simulations"
     | "mechanics"
@@ -44,12 +47,11 @@ type DisplayComponent =
     | "none";
 
 const SideBarRight: React.FC = () => {
-    const { selectedDecal } = useBuilderStore();
     const { activeModule } = useModuleStore();
     const { toggleUIRight } = useToggleStore();
     const { toolMode } = useToolMode();
     const { subModule, setSubModule } = useSubModuleStore();
-    const { selectedWall, selectedFloor, selectedAisle } = useBuilderStore();
+    const { selectedWall, selectedFloor, selectedAisle, selectedZone, selectedDecal } = useBuilderStore();
     const { selectedEventData } = useSelectedEventData();
     const { selectedEventSphere } = useSelectedEventSphere();
     const { versionStore, assetStore } = useSceneContext();
@@ -114,26 +116,30 @@ const SideBarRight: React.FC = () => {
                 setDisplayComponent("assetProperties");
                 return;
             }
-            if (selectedAssets.length !== 1 && !selectedFloor && !selectedAisle && !selectedDecal && selectedWall) {
+            if (selectedAssets.length !== 1 && !selectedFloor && !selectedAisle && !selectedDecal && !selectedZone && selectedWall) {
                 setDisplayComponent("selectedWallProperties");
                 return;
             }
-            if (selectedAssets.length !== 1 && !selectedWall && !selectedAisle && !selectedDecal && selectedFloor) {
+            if (selectedAssets.length !== 1 && !selectedWall && !selectedAisle && !selectedDecal && !selectedZone && selectedFloor) {
                 setDisplayComponent("selectedFloorProperties");
                 return;
             }
-            if (viewVersionHistory && selectedAssets.length !== 1 && !selectedWall && !selectedAisle && !selectedFloor && !selectedDecal) {
+            if (viewVersionHistory && selectedAssets.length !== 1 && !selectedWall && !selectedAisle && !selectedFloor && !selectedDecal && !selectedZone) {
                 setDisplayComponent("versionHistory");
                 return;
             }
-            if (selectedAssets.length !== 1 && !selectedFloor && !selectedAisle && !selectedWall && selectedDecal) {
+            if (selectedAssets.length !== 1 && !selectedFloor && !selectedAisle && !selectedWall && !selectedZone && selectedDecal) {
                 setDisplayComponent("selectedDecalProperties");
                 return;
             }
-            if (selectedAssets.length !== 1 && !selectedFloor && !selectedWall && !selectedDecal && selectedAisle) {
+            if (selectedAssets.length !== 1 && !selectedFloor && !selectedWall && !selectedDecal && !selectedZone && selectedAisle) {
                 setDisplayComponent("selectedAisleProperties");
                 return;
             }
+            if (selectedAssets.length !== 1 && !selectedFloor && !selectedWall && !selectedDecal && !selectedAisle && selectedZone) {
+                setDisplayComponent("selectedZoneProperties");
+                return;
+            }
             if (selectedAssets.length !== 1 && !selectedFloor && !selectedWall && !selectedDecal && !selectedAisle) {
                 if (toolMode === "Aisle") {
                     setDisplayComponent("aisleProperties");
@@ -158,7 +164,7 @@ const SideBarRight: React.FC = () => {
         }
 
         setDisplayComponent("none");
-    }, [viewVersionHistory, activeModule, subModule, isComparing, selectedAssets, selectedWall, selectedFloor, selectedAisle, toolMode, selectedDecal]);
+    }, [viewVersionHistory, activeModule, subModule, isComparing, selectedAssets, selectedWall, selectedFloor, selectedAisle, toolMode, selectedDecal, selectedZone]);
 
     const renderComponent = () => {
         switch (displayComponent) {
@@ -184,6 +190,8 @@ const SideBarRight: React.FC = () => {
                 return <SelectedDecalProperties />;
             case "selectedAisleProperties":
                 return <SelectedAisleProperties />;
+            case "selectedZoneProperties":
+                return <SelectedZoneProperties />;
             case "simulations":
                 return <Simulations />;
             case "mechanics":

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useParams } from "react-router-dom";
 import { ArrowIcon } from "../../../icons/ExportCommonIcons";
 
@@ -351,7 +351,7 @@ const SelectedAisleProperties: React.FC = () => {
 
     return (
         <div className="aisle-properties-container">
-            <div className="header">Properties</div>
+            <div className="header">Aisle Properties</div>
 
             {/* Basic Properties */}
             <section>

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

@@ -100,6 +100,8 @@ const SelectedFloorProperties = () => {
 
     return (
         <div className="wall-properties-container">
+            <div className="header">Floor Properties</div>
+
             <section className="wall-properties-section">
                 <div className="header">Floor</div>
                 <div className="wall-properties">

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

@@ -14,12 +14,12 @@ import useWallResponseHandler from "../../../../modules/collaboration/responseHa
 import { upsertWallApi } from "../../../../services/factoryBuilder/wall/upsertWallApi";
 
 const SelectedWallProperties = () => {
+    const { projectId } = useParams();
     const { selectedWall } = useBuilderStore();
     const { wallStore, versionStore } = useSceneContext();
     const { selectedVersion } = versionStore();
     const { builderSocket } = useSocketStore();
     const { userId, organization } = getUserData();
-    const { projectId } = useParams();
     const { peekUpdateWall } = wallStore();
     const { updateWallInScene } = useWallResponseHandler();
 
@@ -99,6 +99,8 @@ const SelectedWallProperties = () => {
 
     return (
         <div className="wall-properties-container">
+            <div className="header">Wall Properties</div>
+
             <section className="wall-properties-section">
                 <div className="header">Wall</div>
                 <div className="wall-properties">

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

@@ -0,0 +1,134 @@
+import { useState } from "react";
+import { useParams } from "react-router-dom";
+import { ArrowIcon } from "../../../icons/ExportCommonIcons";
+import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
+import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
+import { useSceneContext } from "../../../../modules/scene/sceneContext";
+import { useSocketStore } from "../../../../store/socket/useSocketStore";
+import { getUserData } from "../../../../functions/getUserData";
+import useZoneResponseHandler from "../../../../modules/collaboration/responseHandler/useZoneResponseHandler";
+
+import { upsertZoneApi } from "../../../../services/factoryBuilder/zone/upsertZoneApi";
+
+interface TextureList {
+    color: string;
+    id: string;
+    zoneType: string;
+}
+
+export const zoneTextureList: TextureList[] = [
+    { color: "blue", id: "#0000ff", zoneType: "" },
+    { color: "red", id: "#ff0000", zoneType: "" },
+    { color: "yellow", id: "#FBE50E", zoneType: "" },
+    { color: "white", id: "#ffffff", zoneType: "" },
+    { color: "green", id: "#43C06D", zoneType: "" },
+    { color: "orange", id: "#FF711B", zoneType: "" },
+    { color: "purple", id: "#AF52DE", zoneType: "" },
+];
+
+function SelectedZoneProperties() {
+    const { projectId } = useParams();
+    const { selectedZone } = useBuilderStore();
+    const { zoneStore, versionStore } = useSceneContext();
+    const { selectedVersion } = versionStore();
+    const { builderSocket } = useSocketStore();
+    const { userId, organization } = getUserData();
+    const { peekUpdateZone } = zoneStore();
+    const { updateZoneInScene } = useZoneResponseHandler();
+    const [collapseTexture, setCollapseTexture] = useState(true);
+
+    if (!selectedZone?.zoneMesh) return null;
+
+    const updateZoneToBackend = (updatedZone: Zone | undefined) => {
+        if (projectId && updatedZone) {
+            if (!builderSocket?.connected) {
+                // API
+
+                upsertZoneApi(projectId, selectedVersion?.versionId || "", updatedZone)
+                    .then((data) => {
+                        if (!data.message || !data.data) {
+                            echo.error(`Error updating zone: ${updatedZone.zoneUuid}`);
+                            return;
+                        }
+                        if (data.message === "Zone Updated Successfully") {
+                            updateZoneInScene(updatedZone, () => {
+                                echo.info(`Updated zone: ${updatedZone.zoneUuid}`);
+                            });
+                        } else {
+                            echo.error(`Error updating zone: ${updatedZone.zoneUuid}`);
+                        }
+                    })
+                    .catch(() => {
+                        echo.error(`Error updating zone: ${updatedZone.zoneUuid}`);
+                    });
+            } else {
+                // SOCKET
+
+                const data = {
+                    zoneData: updatedZone,
+                    projectId: projectId,
+                    versionId: selectedVersion?.versionId || "",
+                    userId: userId,
+                    organization: organization,
+                };
+
+                builderSocket.emit("v1:zone:add", data);
+            }
+        }
+    };
+
+    const handleHeightChange = (val: string) => {
+        const height = parseFloat(val);
+        if (!isNaN(height)) {
+            const updatedZone = peekUpdateZone(selectedZone.zoneData.zoneUuid, { zoneHeight: height });
+            updateZoneToBackend(updatedZone);
+        }
+    };
+
+    const handleColorChange = (val: string) => {
+        const updatedZone = peekUpdateZone(selectedZone.zoneData.zoneUuid, { zoneColor: val });
+        updateZoneToBackend(updatedZone);
+    };
+
+    return (
+        <div className="zone-properties-container">
+            <div className="header">Zone Properties</div>
+
+            {/* Basic Properties */}
+            <section className="zone-properties-section">
+                <div className="header">{selectedZone.zoneData.zoneName}</div>
+                <div className="zone-properties">
+                    <InputWithDropDown label="Height" value={selectedZone.zoneData.zoneHeight.toString()} min={1} max={25} step={1} onChange={handleHeightChange} />
+                </div>
+            </section>
+            {/* Texture */}
+            <section>
+                <button className="header" onClick={() => setCollapseTexture(!collapseTexture)} aria-expanded={!collapseTexture}>
+                    <div className="value">Zone Texture</div>
+                    <div className="icon" style={{ rotate: collapseTexture ? "" : "-90deg" }}>
+                        <ArrowIcon />
+                    </div>
+                </button>
+
+                {collapseTexture && (
+                    <div className="zone-texture-container">
+                        {zoneTextureList.map((val) => (
+                            <button
+                                key={val.id}
+                                className={`zone-list ${selectedZone.zoneData.zoneColor === val.id ? "selected" : ""}`}
+                                onClick={() => handleColorChange(val.id)}
+                                aria-pressed={selectedZone.zoneData.zoneColor === val.id}
+                            >
+                                <div className={`texture-display ${val.id}`} style={{ background: val.id }}></div>
+                                <div className="zone-color">{val.color}</div>
+                            </button>
+                        ))}
+                        <input type="color" className="custom-color-picker" value={selectedZone.zoneData.zoneColor} onChange={(e) => handleColorChange(e.target.value)} />
+                    </div>
+                )}
+            </section>
+        </div>
+    );
+}
+
+export default SelectedZoneProperties;

app/src/modules/builder/aisle/aisleCreator/aisleCreator.tsx

@@ -191,6 +191,7 @@ function AisleCreator() {
             addAilseToBackend(aisle);
 
             setTempPoints([newPoint]);
+            setIsCreating(true);
         };
 
         const onContext = (event: any) => {

app/src/modules/builder/wall/wallCreator/wallCreator.tsx

@@ -334,6 +334,7 @@ function WallCreator() {
                         });
 
                         setTempPoints([newPoint]);
+                        setIsCreating(true);
                     }
 
                     return;
@@ -403,6 +404,7 @@ function WallCreator() {
                 });
 
                 setTempPoints([newPoint]);
+                setIsCreating(true);
             }
         };
 

app/src/modules/collaboration/socket/builderResponses.tsx

@@ -12,7 +12,7 @@ import useZoneResponseHandler from "../responseHandler/useZoneResponseHandler";
 function BuilderResponses() {
     const { assetStore } = useSceneContext();
     const { getAssetById, movedObjects, initialStates, updateAsset, resetAsset, setInitialState } = assetStore();
-    const { selectedAisle, setSelectedAisle, selectedWall, setSelectedWall, selectedFloor, setSelectedFloor } = useBuilderStore();
+    const { selectedAisle, setSelectedAisle, selectedWall, setSelectedWall, selectedFloor, setSelectedFloor, selectedZone, setSelectedZone } = useBuilderStore();
     const { builderSocket } = useSocketStore();
     const { addAssetToScene, updateAssetInScene, removeAssetFromScene } = useAssetResponseHandler();
     const { addWallAssetToScene, updateWallAssetInScene, removeWallAssetFromScene } = useWallAssetResponseHandler();
@@ -510,9 +510,9 @@ function BuilderResponses() {
                 };
 
                 updateZoneInScene(zone, () => {
-                    // if (selectedZone?.zoneData.zoneUuid === zone.zoneUuid) {
+                    if (selectedZone?.zoneData.zoneUuid === zone.zoneUuid) {
-                    //     setSelectedZone({ zoneData: zone, zoneMesh: selectedZone.zoneMesh });
+                        setSelectedZone({ zoneData: zone, zoneMesh: selectedZone.zoneMesh });
-                    // }
+                    }
 
                     echo.info(`Updated zone: ${zone.zoneName}`);
                 });
@@ -543,7 +543,7 @@ function BuilderResponses() {
                 builderSocket.off("v1:zone:response:delete");
             }
         };
-    }, [builderSocket]);
+    }, [builderSocket, selectedZone]);
     //#endregion
 
     return null;

app/src/services/simulation/products/UpsertProductOrEventApi.ts

@@ -26,6 +26,7 @@ export const upsertProductOrEventApi = async (body: any) => {
         }
 
         const result = await response.json();
+        console.log('result: ', result);
         return result;
     } catch {
         echo.error("Failed to upsert product or event");

app/src/services/simulation/products/deleteEventDataApi.ts

@@ -28,6 +28,7 @@ export const deleteEventDataApi = async (body: any) => {
         }
 
         const result = await response.json();
+        console.log('result: ', result);
         return result;
     } catch {
         echo.error("Failed to delete event data");

app/src/services/simulation/products/deleteProductApi.ts

@@ -26,6 +26,7 @@ export const deleteProductApi = async (body: any) => {
         }
 
         const result = await response.json();
+        console.log('result: ', result);
         return result;
     } catch {
         echo.error("Failed to delete product");

app/src/store/builder/useZoneStore.ts

@@ -6,6 +6,7 @@ interface ZoneStore {
     setZones: (zones: Zone[]) => void;
     addZone: (zone: Zone) => void;
     updateZone: (uuid: string, updated: Partial<Zone>) => void;
+    peekUpdateZone: (uuid: string, updated: Partial<Zone>) => Zone | undefined;
     setZoneName: (uuid: string, name: string) => void;
     setZoneHeight: (uuid: string, height: number) => void;
     setZoneColor: (uuid: string, color: string) => void;
@@ -48,6 +49,15 @@ export const createZoneStore = () => {
                     }
                 }),
 
+            peekUpdateZone: (uuid, updated) => {
+                const zone = get().zones.find((z) => z.zoneUuid === uuid);
+                if (!zone) return undefined;
+                return {
+                    ...JSON.parse(JSON.stringify(zone)),
+                    ...updated,
+                } as Zone;
+            },
+
             setZoneName: (uuid, name) =>
                 set((state) => {
                     const zone = state.zones.find((z) => z.zoneUuid === uuid);

app/src/styles/layout/_sidebar.scss

@@ -1436,11 +1436,8 @@
             background: var(--background-color);
             padding: 12px;
             border-radius: #{$border-radius-large};
-
             outline: 1px solid var(--border-color);
             outline-offset: -1px;
-      border-radius: 12px;
-      background: var(--background-color);
 
             .compare-simulations-header {
                 font-weight: var(--font-weight-medium);
@@ -1475,15 +1472,18 @@
         }
     }
 
-  .aisle-properties-container {
+    .aisle-properties-container,
+    .zone-properties-container {
         max-height: 65vh;
         overflow: auto;
 
-    .aisle-texture-container {
+        .aisle-texture-container,
+        .zone-texture-container {
             max-height: 40vh;
             overflow: auto;
 
-      .aisle-list {
+            .aisle-list,
+            .zone-list {
                 width: calc(100% - 8px);
                 text-align: start;
                 padding: 4px 6px;
@@ -1503,28 +1503,17 @@
                     &.yellow-black {
                         background-color: black;
                         background-size: 10px 10px;
-            background-image: repeating-linear-gradient(
+                        background-image: repeating-linear-gradient(45deg, #fbe50e 0, #fbe50e 2px, black 0, black 50%);
-              45deg,
-              #FBE50E 0,
-              #FBE50E 2px,
-              black 0,
-              black 50%
-            );
                     }
                     &.white-black {
                         background-color: black;
                         background-size: 10px 10px;
-            background-image: repeating-linear-gradient(
+                        background-image: repeating-linear-gradient(45deg, white 0, white 2px, black 0, black 50%);
-              45deg,
-              white 0,
-              white 2px,
-              black 0,
-              black 50%
-            );
                     }
                 }
 
-        .aisle-color {
+                .aisle-color,
+                .zone-color {
                     text-transform: capitalize;
                 }
 
@@ -1535,19 +1524,10 @@
 
                 &.selected {
                     background: var(--highlight-accent-color);
-
-          // .aisle-color {
-          // color: var(--text-button-color);
-          // }
-
-          // &:hover {
-          // background: var(--background-color-accent);
-          // }
                 }
 
                 &:hover {
                     background: var(--highlight-accent-color);
-          // background: var(--background-color-secondary);
                 }
             }
         }
@@ -2040,8 +2020,7 @@
                 &:hover {
                     background: var(--background-color-solid);
                     .back-arrow {
-            transform: translateX(-2px) translateY(-1px) scale(1.6)
+                        transform: translateX(-2px) translateY(-1px) scale(1.6) rotate(90deg);
-              rotate(90deg);
                     }
                 }
             }
@@ -2120,11 +2099,7 @@
                 &:nth-child(2) {
                     &::after {
                         // @include gradient-by-child(4); // Second child uses the second color
-            background: linear-gradient(
+                        background: linear-gradient(144.19deg, rgba(197, 137, 26, 0.5) 16.62%, rgba(69, 48, 10, 0.5) 85.81%);
-              144.19deg,
-              rgba(197, 137, 26, 0.5) 16.62%,
-              rgba(69, 48, 10, 0.5) 85.81%
-            );
                     }
                 }
 
@@ -2209,11 +2184,6 @@
                     .sub-catagory {
                         color: #ffffff;
                     }
-
-          // svg {
-          //     stroke: white;
-          //     fill: white;
-          // }
                 }
             }
         }
@@ -2262,11 +2232,7 @@
                     width: 100%;
                     height: 100%;
                     font-size: var(--font-size-regular);
-          background: linear-gradient(
+                    background: linear-gradient(0deg, rgba(37, 24, 51, 0) 0%, rgba(52, 41, 61, 0.5) 100%);
-            0deg,
-            rgba(37, 24, 51, 0) 0%,
-            rgba(52, 41, 61, 0.5) 100%
-          );
                     pointer-events: none;
                     backdrop-filter: blur(8px);
                     opacity: 0;