refactor: Update TextureItem interface and aisle color identifiers for consistency

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

@@ -15,8 +15,8 @@ import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
 import InputToggle from "../../../ui/inputs/InputToggle";
 
 interface TextureItem {
-  color: AisleColors;
+  color: string;
-  id: string;
+  id: AisleColors;
   brief: string;
   texture: string;
 }
@@ -28,14 +28,14 @@ const AisleProperties: React.FC = () => {
   const { aisleType, aisleWidth, aisleColor, dashLength, gapLength, dotRadius, aisleLength, isFlipped, setAisleType, setAisleColor, setAisleWidth, setDashLength, setGapLength, setDotRadius, setAisleLength, setIsFlipped } = useBuilderStore();
 
   const aisleTextureList: TextureItem[] = [
-    { color: "yellow", id: "yellow1", brief: "pedestrian walkways", texture: "" },
+    { color: "yellow", id: "yellow", brief: "pedestrian walkways", texture: "" },
     { color: "gray", id: "gray", brief: "basic", texture: "" },
-    { color: "green", id: "green1", brief: "pedestrian walkways", 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: "bright-green", 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: "" },
   ];
@@ -166,7 +166,8 @@ const AisleProperties: React.FC = () => {
                   step={0.1}
                   max={2}
                   onChange={handleGapLengthChange}
-                /></>
+                />
+              </>
             }
           </>
         );
@@ -190,7 +191,8 @@ const AisleProperties: React.FC = () => {
                   step={0.1}
                   max={2}
                   onChange={handleGapLengthChange}
-                /></>
+                />
+              </>
             }
           </>
         );
@@ -280,7 +282,7 @@ const AisleProperties: React.FC = () => {
                 key={val.id}
                 title={val.brief || val.id}
                 className={`aisle-list ${aisleColor === val.color ? "selected" : ""}`}
-                onClick={() => setAisleColor(val.color)}
+                onClick={() => setAisleColor(val.id)}
                 aria-pressed={aisleColor === val.id}
               >
                 <div className="texture-display">{val.texture}</div>

app/src/modules/builder/aisle/Instances/instance/aisleTypes/solidAisle.tsx

@@ -9,7 +9,6 @@ function SolidAisle({ aisle }: { readonly aisle: Aisle }) {
     const aisleRef = useRef<THREE.Group>(null);
     const { toolMode } = useToolMode();
     const { setSelectedAisle, hoveredPoint } = useBuilderStore();
-
     const shape = useMemo(() => {
         if (aisle.points.length < 2 || aisle.type.aisleType !== 'solid-aisle') return null;
 

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

@@ -251,6 +251,7 @@ function ReferenceAisle({ tempPoints }: Readonly<ReferenceAisleProps>) {
 export default ReferenceAisle;
 
 function SolidAisle({ aisle }: { readonly aisle: Aisle }) {
+
     const shape = useMemo(() => {
         if (aisle.points.length < 2 || aisle.type.aisleType !== 'solid-aisle') return null;
 
@@ -288,10 +289,7 @@ function SolidAisle({ aisle }: { readonly aisle: Aisle }) {
                 receiveShadow
                 castShadow
             >
-                <meshStandardMaterial
+                <meshStandardMaterial color={aisle.type.aisleColor || '#ffffff'} side={THREE.DoubleSide} />
-                    color={aisle.type.aisleColor || '#ffffff'}
-                    side={THREE.DoubleSide}
-                />
             </Extrude>
         </group>
     );

app/src/modules/builder/groups/zoneGroup.tsx

@@ -91,7 +91,6 @@ const ZoneGroup: React.FC = () => {
                     layer: zone.layer,
                 }));
 
-                console.log('fetchedZones: ', fetchedZones);
                 setZones(fetchedZones);
 
                 const fetchedPoints = data.data.flatMap((zone: any) =>
@@ -110,7 +109,6 @@ const ZoneGroup: React.FC = () => {
     }, []);
 
     useEffect(() => {
-        console.log('zones: ', zones);
         localStorage.setItem("zones", JSON.stringify(zones));
     }, [zones]);
 

app/src/types/builderTypes.d.ts

@@ -1,3 +1,5 @@
+// Asset
+
 interface Asset {
     modelUuid: string;
     modelName: string;
@@ -31,6 +33,8 @@ interface Asset {
 type Assets = Asset[];
 
 
+// Point
+
 type PointTypes = 'Aisle' | 'Wall' | 'Floor' | 'Zone';
 
 interface Point {
@@ -41,9 +45,23 @@ interface Point {
 }
 
 
+// Wall
+
+interface Wall {
+    wallUuid: string;
+    points: [Point, Point];
+    outSideMaterial: string;
+    inSideMaterial: string;
+    thickness: number;
+    height: number;
+}
+
+
+// Aisle
+
 type AisleTypes = 'solid-aisle' | 'dashed-aisle' | 'stripped-aisle' | 'dotted-aisle' | 'arrow-aisle' | 'arrows-aisle' | 'arc-aisle' | 'circle-aisle' | 'junction-aisle';
 
-type AisleColors = 'gray' | 'yellow' | 'green' | 'orange' | 'blue' | 'purple' | 'red' | 'bright green' | 'yellow-black' | 'white-black'
+type AisleColors = 'gray' | 'yellow' | 'green' | 'orange' | 'blue' | 'purple' | 'red' | '#66FF00' | 'yellow-black' | 'white-black'
 
 interface SolidAisle {
     aisleType: 'solid-aisle';