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

@@ -4,13 +4,53 @@ import { computeArea } from '../functions/computeArea';
 import { Html } from '@react-three/drei';
 import * as CONSTANTS from "../../../types/world/worldConstants";
 import * as turf from '@turf/turf';
+import * as THREE from "three"
 
 const CalculateAreaGroup = () => {
   const { roomsState } = useRoomsState();
   const { toggleView } = useToggleView();
+  const savedTheme: string | null = localStorage.getItem('theme');
 
   return (
     <group name="roomArea" visible={toggleView}>
+      <group name="roomFills" visible={toggleView}>
+        {roomsState.length > 0 &&
+          roomsState.flat().map((room: any, index: number) => {
+            const coordinates = room.coordinates;
+            if (!coordinates || coordinates.length < 3) return null;
+
+            const yPos = (room.layer || 0) * CONSTANTS.zoneConfig.height;
+            const coords2D = coordinates.map((p: any) => new THREE.Vector2(p.position.x, p.position.z));
+            // console.log('coords2D: ', coords2D);
+
+            if (!coords2D[0].equals(coords2D[coords2D.length - 1])) {
+              coords2D.push(coords2D[0]);
+            }
+
+            const shape = new THREE.Shape(coords2D);
+            const extrudeSettings = {
+              depth: 0.01,
+              bevelEnabled: false,
+            };
+
+            const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
+            geometry.rotateX(Math.PI / 2);
+
+            const material = new THREE.MeshBasicMaterial({
+              color: savedTheme === "dark" ? "#d2baff" : '#6f42c1',
+              side: THREE.DoubleSide,
+              transparent: true,
+              opacity: 0.4,
+              depthWrite: false,
+            });
+
+            return (
+              <group key={`roomFill-${index}`}>
+                <mesh geometry={geometry} material={material} position={[0, yPos, 0]} />
+              </group>
+            );
+          })}
+      </group>
       {roomsState.length > 0 &&
         roomsState.flat().map((room: any, index: number) => {
           if (!toggleView) return null;

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

@@ -376,7 +376,6 @@ const ZoneGroup: React.FC = () => {
           setZonePoints(updatedZonePoints);
 
           addZoneToBackend(newZone);
-
           setStartPoint(null);
           setEndPoint(null);
         }