Refactor code structure for improved readability and maintainability

app/src/components/ui/FileMenu.tsx

@@ -32,7 +32,7 @@ const FileMenu: React.FC = () => {
   }, []);
 
   // project
-  const [projectName, setProjectName] = useState("project 1");
+  const [projectName, setProjectName] = useState("Demo Project");
 
   // Load project name from localStorage on mount
   useEffect(() => {

app/src/components/ui/analysis/ThroughputSummary.tsx

@@ -5,7 +5,7 @@ import SkeletonUI from "../../templates/SkeletonUI";
 
 const ProductionCapacity = ({
   progressPercent = 50,
-  avgProcessTime = "28.4 Secs/unit",
+  avgProcessTime = "28.4",
   machineUtilization = "78%",
   throughputValue = 128,
   timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" },
@@ -34,7 +34,7 @@ const ProductionCapacity = ({
           <>
             <div className="process-container">
               <div className="throughput-value">
-                <span className="value">{throughputValue}</span> Units/hour
+                <span className="value">{avgProcessTime}</span> secs/unit
               </div>
 
               {/* Dynamic Progress Bar */}
@@ -56,8 +56,8 @@ const ProductionCapacity = ({
 
             <div className="metrics-section">
               <div className="metric">
-                <span className="label">Avg. Process Time</span>
-                <span className="value">{avgProcessTime}</span>
+                <span className="label">Units/hour</span>
+                <span className="value">{throughputValue} avg.</span>
               </div>
               <div className="metric">
                 <span className="label">Machine Utilization</span>

app/src/modules/builder/geomentries/floors/addFloorToScene.ts

@@ -2,8 +2,8 @@ import * as THREE from 'three';
 import * as Types from "../../../../types/world/worldTypes";
 import * as CONSTANTS from "../../../../types/world/worldConstants";
 
-import texturePath from "../../../../assets/textures/floor/concreteFloorWorn001Diff2k.jpg";
-import normalPath from "../../../../assets/textures/floor/concreteFloorWorn001NorGl2k.jpg";
+import texturePath from "../../../../assets/textures/floor/white.png";
+import texturePathDark from "../../../../assets/textures/floor/black.png";
 
 // Cache for materials
 const materialCache = new Map<string, THREE.Material>();
@@ -14,6 +14,8 @@ export default function addFloorToScene(
     floorGroup: Types.RefGroup,
     userData: any,
 ) {
+    const savedTheme: string | null = localStorage.getItem('theme');
+
     const textureLoader = new THREE.TextureLoader();
 
     const textureScale = CONSTANTS.floorConfig.textureScale;
@@ -24,20 +26,17 @@ export default function addFloorToScene(
 
     if (materialCache.has(materialKey)) {
         material = materialCache.get(materialKey) as THREE.Material;
+        // } else {
     } else {
-        const floorTexture = textureLoader.load(texturePath);
-        const normalMap = textureLoader.load(normalPath);
+        const floorTexture = textureLoader.load(savedTheme === "dark" ? texturePathDark : texturePath);
+        // const floorTexture = textureLoader.load(texturePath);
 
         floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
         floorTexture.repeat.set(textureScale, textureScale);
         floorTexture.colorSpace = THREE.SRGBColorSpace;
 
-        normalMap.wrapS = normalMap.wrapT = THREE.RepeatWrapping;
-        normalMap.repeat.set(textureScale, textureScale);
-
         material = new THREE.MeshStandardMaterial({
             map: floorTexture,
-            normalMap: normalMap,
             side: THREE.DoubleSide,
         });
 

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

@@ -1,7 +1,6 @@
 import { useFrame, useThree } from "@react-three/fiber";
 import {
     useActiveTool,
-    useAsset3dWidget,
     useCamMode,
     useDeletableFloorItem,
     useDeleteTool,
@@ -14,7 +13,6 @@ import {
     useToggleView,
     useTransformMode,
 } from "../../../store/store";
-import assetVisibility from "../geomentries/assets/assetVisibility";
 import { useEffect } from "react";
 import * as THREE from "three";
 import * as Types from "../../../types/world/worldTypes";
@@ -29,7 +27,6 @@ import loadInitialFloorItems from "../IntialLoad/loadInitialFloorItems";
 import addAssetModel from "../geomentries/assets/addAssetModel";
 import { getFloorAssets } from "../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi";
 import useModuleStore from "../../../store/useModuleStore";
-// import { retrieveGLTF } from "../../../utils/indexDB/idbUtils";
 import { useEventsStore } from "../../../store/simulation/useEventsStore";
 
 const assetManagerWorker = new Worker(
@@ -198,9 +195,7 @@ const FloorItemsGroup = ({
             };
 
             const startInterval = () => {
-                if (!intervalId) {
-                    intervalId = setInterval(handleChange, 50);
-                }
+                intervalId ??= setInterval(handleChange, 50);
             };
 
             const stopInterval = () => {

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

@@ -1,56 +1,92 @@
 import { Geometry } from "@react-three/csg";
-import { useDeleteTool, useSelectedWallItem, useToggleView, useTransformMode, useWallItems, useWalls } from "../../../store/store";
+import {
+  useDeleteTool,
+  useSelectedWallItem,
+  useToggleView,
+  useTransformMode,
+  useWallItems,
+  useWalls,
+} from "../../../store/store";
 import handleMeshDown from "../eventFunctions/handleMeshDown";
 import handleMeshMissed from "../eventFunctions/handleMeshMissed";
 import WallsMesh from "./wallsMesh";
 import WallItemsGroup from "./wallItemsGroup";
 import { useEffect } from "react";
 
+const WallsAndWallItems = ({
+  CSGGroup,
+  AssetConfigurations,
+  setSelectedItemsIndex,
+  selectedItemsIndex,
+  currentWallItem,
+  csg,
+  lines,
+  hoveredDeletableWallItem,
+}: any) => {
+  const { walls } = useWalls();
+  const { wallItems } = useWallItems();
+  const { toggleView } = useToggleView();
+  const { deleteTool } = useDeleteTool();
+  const { transformMode } = useTransformMode();
+  const { setSelectedWallItem } = useSelectedWallItem();
 
-const WallsAndWallItems = ({ CSGGroup, AssetConfigurations, setSelectedItemsIndex, selectedItemsIndex, currentWallItem, csg, lines, hoveredDeletableWallItem }: any) => {
-    const { walls, setWalls } = useWalls();
-    const { wallItems, setWallItems } = useWallItems();
-    const { toggleView, setToggleView } = useToggleView();
-    const { deleteTool, setDeleteTool } = useDeleteTool();
-    const { transformMode, setTransformMode } = useTransformMode();
-    const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
-
-    useEffect(() => {
-        if (transformMode === null) {
-            if (!deleteTool) {
-                handleMeshMissed(currentWallItem, setSelectedWallItem, setSelectedItemsIndex);
-                setSelectedWallItem(null);
-                setSelectedItemsIndex(null);
-            }
+  useEffect(() => {
+    if (transformMode === null) {
+      if (!deleteTool) {
+        handleMeshMissed(
+          currentWallItem,
+          setSelectedWallItem,
+          setSelectedItemsIndex
+        );
+        setSelectedWallItem(null);
+        setSelectedItemsIndex(null);
+      }
+    }
+  }, [transformMode]);
+  return (
+    <mesh
+      ref={CSGGroup as any}
+      name="Walls"
+      key={walls.length}
+      receiveShadow
+      visible={!toggleView}
+      onClick={(event) => {
+        if (!deleteTool && transformMode !== null) {
+          handleMeshDown(
+            event,
+            currentWallItem,
+            setSelectedWallItem,
+            setSelectedItemsIndex,
+            wallItems,
+            toggleView
+          );
         }
-    }, [transformMode])
+      }}
+      onPointerMissed={() => {
+        if (!deleteTool) {
+          handleMeshMissed(
+            currentWallItem,
+            setSelectedWallItem,
+            setSelectedItemsIndex
+          );
+          setSelectedWallItem(null);
+          setSelectedItemsIndex(null);
+        }
+      }}
+    >
+      <Geometry ref={csg as any} computeVertexNormals useGroups>
+        <WallsMesh lines={lines} />
+        <WallItemsGroup
+          currentWallItem={currentWallItem}
+          AssetConfigurations={AssetConfigurations}
+          hoveredDeletableWallItem={hoveredDeletableWallItem}
+          selectedItemsIndex={selectedItemsIndex}
+          setSelectedItemsIndex={setSelectedItemsIndex}
+          CSGGroup={CSGGroup}
+        />
+      </Geometry>
+    </mesh>
+  );
+};
 
-    return (
-        <mesh
-            ref={CSGGroup as any}
-            name="Walls"
-            key={walls.length}
-            receiveShadow
-            visible={!toggleView}
-            onClick={(event) => {
-                if (!deleteTool && transformMode !== null) {
-                    handleMeshDown(event, currentWallItem, setSelectedWallItem, setSelectedItemsIndex, wallItems, toggleView);
-                }
-            }}
-            onPointerMissed={() => {
-                if (!deleteTool) {
-                    handleMeshMissed(currentWallItem, setSelectedWallItem, setSelectedItemsIndex);
-                    setSelectedWallItem(null);
-                    setSelectedItemsIndex(null);
-                }
-            }}
-        >
-            <Geometry ref={csg as any} computeVertexNormals useGroups>
-                <WallsMesh lines={lines} />
-                <WallItemsGroup currentWallItem={currentWallItem} AssetConfigurations={AssetConfigurations} hoveredDeletableWallItem={hoveredDeletableWallItem} selectedItemsIndex={selectedItemsIndex} setSelectedItemsIndex={setSelectedItemsIndex} CSGGroup={CSGGroup} />
-            </Geometry>
-        </mesh>
-    )
-}
-
-export default WallsAndWallItems;
+export default WallsAndWallItems;

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

@@ -1,65 +1,78 @@
-import * as THREE from 'three';
-import * as Types from '../../../types/world/worldTypes';
-import * as CONSTANTS from '../../../types/world/worldConstants';
-import { Base } from '@react-three/csg';
-import { MeshDiscardMaterial } from '@react-three/drei';
-import { useUpdateScene, useWalls } from '../../../store/store';
-import { useEffect } from 'react';
-import { getLines } from '../../../services/factoryBuilder/lines/getLinesApi';
-import objectLinesToArray from '../geomentries/lines/lineConvertions/objectLinesToArray';
-import loadWalls from '../geomentries/walls/loadWalls';
+import * as THREE from "three";
+import * as Types from "../../../types/world/worldTypes";
+import * as CONSTANTS from "../../../types/world/worldConstants";
+import { Base } from "@react-three/csg";
+import { MeshDiscardMaterial } from "@react-three/drei";
+import { useUpdateScene, useWalls } from "../../../store/store";
+import React, { useEffect } from "react";
+import { getLines } from "../../../services/factoryBuilder/lines/getLinesApi";
+import objectLinesToArray from "../geomentries/lines/lineConvertions/objectLinesToArray";
+import loadWalls from "../geomentries/walls/loadWalls";
+// texture
+import texturePath from "../../../assets/textures/floor/wall-tex.png";
 
-const WallsMesh = ({ lines }: any) => {
-    const { walls, setWalls } = useWalls();
-    const { updateScene, setUpdateScene } = useUpdateScene();
+// Cache for materials
+const materialCache = new Map<string, THREE.Material>();
 
-    useEffect(() => {
-        if (updateScene) {
+const WallsMeshComponent = ({ lines }: any) => {
+  const { walls, setWalls } = useWalls();
+  const { updateScene, setUpdateScene } = useUpdateScene();
 
-            const email = localStorage.getItem('email')
-            const organization = (email!.split("@")[1]).split(".")[0];
+  useEffect(() => {
+    if (updateScene) {
+      const email = localStorage.getItem("email");
+      const organization = email!.split("@")[1].split(".")[0];
 
-            getLines(organization).then((data) => {
-                const Lines: Types.Lines = objectLinesToArray(data);
-                localStorage.setItem("Lines", JSON.stringify(Lines));
+      getLines(organization).then((data) => {
+        const Lines: Types.Lines = objectLinesToArray(data);
+        localStorage.setItem("Lines", JSON.stringify(Lines));
 
-                if (Lines) {
-                    loadWalls(lines, setWalls);
-                }
-            })
-            setUpdateScene(false);
+        if (Lines) {
+          loadWalls(lines, setWalls);
         }
-    }, [updateScene])
+      });
+      setUpdateScene(false);
+    }
+  }, [updateScene]);
 
-    return (
-        <>
-            {walls.map((wall: Types.Wall, index: number) => (
-                <mesh key={index}>
-                    <Base
-                        name={`Wall${index + 1}`}
-                        geometry={wall[0]}
-                        rotation={wall[1]}
-                        position={wall[2]}
-                        userData={{ WallType: wall[3], Layer: wall[4] }}
-                    >
-                        <meshStandardMaterial
-                            side={THREE.DoubleSide}
-                            color={CONSTANTS.wallConfig.defaultColor}
-                        />
-                    </Base>
-                    <mesh
-                        castShadow
-                        geometry={wall[0]}
-                        rotation={wall[1]}
-                        position={wall[2]}
-                        name={`WallRaycastReference_${index + 1}`}
-                    >
-                        <MeshDiscardMaterial />
-                    </mesh>
-                </mesh>
-            ))}
-        </>
-    )
-}
+  const textureLoader = new THREE.TextureLoader();
+  const wallTexture = textureLoader.load(texturePath);
 
-export default WallsMesh;
+  wallTexture.wrapS = wallTexture.wrapT = THREE.RepeatWrapping;
+  wallTexture.repeat.set(0.1, 0.1);
+  wallTexture.colorSpace = THREE.SRGBColorSpace;
+
+  return (
+    <>
+      {walls.map((wall: Types.Wall, index: number) => (
+        <mesh key={index} renderOrder={1}>
+          <Base
+            name={`Wall${index + 1}`}
+            geometry={wall[0]}
+            rotation={wall[1]}
+            position={wall[2]}
+            userData={{ WallType: wall[3], Layer: wall[4] }}
+          >
+            <meshStandardMaterial
+              side={THREE.DoubleSide}
+              color={CONSTANTS.wallConfig.defaultColor}
+              map={wallTexture}
+            />
+          </Base>
+          <mesh
+            castShadow
+            geometry={wall[0]}
+            rotation={wall[1]}
+            position={wall[2]}
+            name={`WallRaycastReference_${index + 1}`}
+          >
+            <MeshDiscardMaterial />
+          </mesh>
+        </mesh>
+      ))}
+    </>
+  );
+};
+
+const WallsMesh = React.memo(WallsMeshComponent);
+export default WallsMesh;

app/src/styles/layout/sidebar.scss

@@ -1002,8 +1002,7 @@
           height: 100%;
           width: 1px;
           position: absolute;
-          color: var(--text-color);
-          opacity: 0.4;
+          color: var(--accent-color);
           font-size: var(--font-size-regular);
           outline-offset: -1px;
           top: 0;

app/src/types/world/worldConstants.ts

@@ -326,7 +326,7 @@ export const lineConfig: LineConfig = {
 };
 
 export const wallConfig: WallConfig = {
-  defaultColor: "white", // Default color of the walls
+  defaultColor: "#f2f2f2", // Default color of the walls
   height: 7, // Height of the walls
   width: 0.05, // Width of the walls
 };
@@ -334,7 +334,7 @@ export const wallConfig: WallConfig = {
 export const floorConfig: FloorConfig = {
   defaultColor: "grey", // Default color of the floors
   height: 0.1, // Height of the floors
-  textureScale: 0.1, // Scale of the floor texture
+  textureScale: 1, // Scale of the floor texture
 };
 
 export const roofConfig: RoofConfig = {
@@ -345,7 +345,7 @@ export const roofConfig: RoofConfig = {
 export const aisleConfig: AisleConfig = {
   width: 0.1, // Width of the aisles
   height: 0.01, // Height of the aisles
-  defaultColor: 0xffff00, // Default color of the aisles
+  defaultColor: 0xE2AC09, // Default color of the aisles
 };
 
 export const zoneConfig: ZoneConfig = {

app/src/utils/theme.ts

@@ -4,7 +4,7 @@ export { };
 function setTheme() {
     const savedTheme: string | null = localStorage.getItem('theme');
     const systemPrefersDark: boolean = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    const defaultTheme: string = savedTheme || (systemPrefersDark ? 'dark' : 'light');
+    const defaultTheme: string = savedTheme ?? (systemPrefersDark ? 'dark' : 'light');
     document.documentElement.setAttribute('data-theme', defaultTheme);
     localStorage.setItem('theme', defaultTheme);
 }