From 982a8ef4aa2fd8e0befdf4b209b8779f2cd782a0 Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Thu, 28 Aug 2025 18:11:54 +0530
Subject: [PATCH] aisle props update

---
 .../properties/AisleProperties.tsx            | 25 ++++++++--------
 .../properties/SelectedAisleProperties.tsx    | 30 +++++--------------
 2 files changed, 20 insertions(+), 35 deletions(-)

diff --git a/app/src/components/layout/sidebarRight/properties/AisleProperties.tsx b/app/src/components/layout/sidebarRight/properties/AisleProperties.tsx
index 2fb8042..ca2317d 100644
--- a/app/src/components/layout/sidebarRight/properties/AisleProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/AisleProperties.tsx
@@ -21,24 +21,25 @@ interface TextureItem {
   texture: string;
 }
 
+export const aisleTextureList: TextureItem[] = [
+  { color: "yellow", id: "#FBE50E", brief: "pedestrian walkways", texture: "" },
+  { color: "gray", id: "#6F6F7A", brief: "basic", texture: "" },
+  { color: "green", id: "#43C06D", brief: "pedestrian walkways", texture: "" },
+  { color: "orange", id: "#FF711B", brief: "material flow", texture: "" },
+  { color: "blue", id: "#488EF6", brief: "vehicle paths", texture: "" },
+  { color: "purple", id: "#AF52DE", brief: "material flow", texture: "" },
+  { color: "red", id: "#FF3B30", brief: "safety zone", texture: "" },
+  { color: "bright green", id: "#66FF00", brief: "safety zone", texture: "" },
+  { color: "yellow-black", id: "yellow-black", brief: "utility aisles", texture: "" },
+  { color: "white-black", id: "white-black", brief: "utility aisles", texture: "" },
+];
+
 const AisleProperties: React.FC = () => {
   const [collapsePresets, setCollapsePresets] = useState(false);
   const [collapseTexture, setCollapseTexture] = useState(true);
 
   const { aisleType, aisleWidth, aisleColor, dashLength, gapLength, dotRadius, aisleLength, isFlipped, setAisleType, setAisleColor, setAisleWidth, setDashLength, setGapLength, setDotRadius, setAisleLength, setIsFlipped } = useBuilderStore();
 
-  const aisleTextureList: TextureItem[] = [
-    { color: "yellow", id: "#FBE50E", brief: "pedestrian walkways", texture: "" },
-    { color: "gray", id: "#6F6F7A", brief: "basic", texture: "" },
-    { color: "green", id: "#43C06D", brief: "pedestrian walkways", texture: "" },
-    { color: "orange", id: "#FF711B", brief: "material flow", texture: "" },
-    { color: "blue", id: "#488EF6", brief: "vehicle paths", texture: "" },
-    { color: "purple", id: "#AF52DE", brief: "material flow", texture: "" },
-    { color: "red", id: "#FF3B30", brief: "safety zone", texture: "" },
-    { color: "bright green", id: "#66FF00", brief: "safety zone", texture: "" },
-    { color: "yellow-black", id: "yellow-black", brief: "utility aisles", texture: "" },
-    { color: "white-black", id: "white-black", brief: "utility aisles", texture: "" },
-  ];
 
   const aisleTypes: {
     name: string;
diff --git a/app/src/components/layout/sidebarRight/properties/SelectedAisleProperties.tsx b/app/src/components/layout/sidebarRight/properties/SelectedAisleProperties.tsx
index c1e1d24..3dc2540 100644
--- a/app/src/components/layout/sidebarRight/properties/SelectedAisleProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/SelectedAisleProperties.tsx
@@ -18,15 +18,7 @@ import { useSceneContext } from "../../../../modules/scene/sceneContext";
 import { useVersionContext } from "../../../../modules/builder/version/versionContext";
 import { useSocketStore } from "../../../../store/builder/store";
 import { getUserData } from "../../../../functions/getUserData";
-
-// import { upsertAisleApi } from "../../../../services/factoryBuilder/aisle/upsertAisleApi";
-
-interface TextureItem {
-    color: string;
-    id: AisleColors;
-    brief: string;
-    texture: string;
-}
+import { aisleTextureList } from "./AisleProperties";
 
 const SelectedAisleProperties: React.FC = () => {
     const [collapsePresets, setCollapsePresets] = useState(false);
@@ -72,19 +64,6 @@ const SelectedAisleProperties: React.FC = () => {
         }
     }
 
-    const aisleTextureList: TextureItem[] = [
-        { color: "yellow", id: "yellow", brief: "pedestrian walkways", texture: "" },
-        { color: "gray", id: "gray", brief: "basic", texture: "" },
-        { color: "green", id: "green", brief: "pedestrian walkways", texture: "" },
-        { color: "orange", id: "orange", brief: "material flow", texture: "" },
-        { color: "blue", id: "blue", brief: "vehicle paths", texture: "" },
-        { color: "purple", id: "purple", brief: "material flow", texture: "" },
-        { color: "red", id: "red", brief: "safety zone", texture: "" },
-        { color: "bright green", id: "#66FF00", brief: "safety zone", texture: "" },
-        { color: "yellow-black", id: "yellow-black", brief: "utility aisles", texture: "" },
-        { color: "white-black", id: "white-black", brief: "utility aisles", texture: "" },
-    ];
-
     const aisleTypes: {
         name: string;
         type: AisleTypes;
@@ -530,7 +509,12 @@ const SelectedAisleProperties: React.FC = () => {
                                 onClick={() => handleColorChange(val.id)}
                                 aria-pressed={selectedAisleData.type.aisleColor === val.id}
                             >
-                                <div className="texture-display">{val.texture}</div>
+                                <div
+                                    className={`texture-display ${val.id}`}
+                                    style={{ background: val.id }}
+                                >
+                                    {val.texture}
+                                </div>
                                 <div className="aisle-color">{val.color}</div>
                                 <div className="aisle-brief">{`( ${val.brief} )`}</div>
                             </button>