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="label">Units/hour</span>
-                <span className="value">{avgProcessTime}</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 texturePath from "../../../../assets/textures/floor/white.png";
-import normalPath from "../../../../assets/textures/floor/concreteFloorWorn001NorGl2k.jpg";
+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 floorTexture = textureLoader.load(savedTheme === "dark" ? texturePathDark : texturePath);
-        const normalMap = textureLoader.load(normalPath);
+        // 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,30 +1,48 @@
 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 = ({
-const WallsAndWallItems = ({ CSGGroup, AssetConfigurations, setSelectedItemsIndex, selectedItemsIndex, currentWallItem, csg, lines, hoveredDeletableWallItem }: any) => {
+  CSGGroup,
-    const { walls, setWalls } = useWalls();
+  AssetConfigurations,
-    const { wallItems, setWallItems } = useWallItems();
+  setSelectedItemsIndex,
-    const { toggleView, setToggleView } = useToggleView();
+  selectedItemsIndex,
-    const { deleteTool, setDeleteTool } = useDeleteTool();
+  currentWallItem,
-    const { transformMode, setTransformMode } = useTransformMode();
+  csg,
-    const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
+  lines,
+  hoveredDeletableWallItem,
+}: any) => {
+  const { walls } = useWalls();
+  const { wallItems } = useWallItems();
+  const { toggleView } = useToggleView();
+  const { deleteTool } = useDeleteTool();
+  const { transformMode } = useTransformMode();
+  const { setSelectedWallItem } = useSelectedWallItem();
 
   useEffect(() => {
     if (transformMode === null) {
       if (!deleteTool) {
-                handleMeshMissed(currentWallItem, setSelectedWallItem, setSelectedItemsIndex);
+        handleMeshMissed(
+          currentWallItem,
+          setSelectedWallItem,
+          setSelectedItemsIndex
+        );
         setSelectedWallItem(null);
         setSelectedItemsIndex(null);
       }
     }
-    }, [transformMode])
+  }, [transformMode]);
-
   return (
     <mesh
       ref={CSGGroup as any}
@@ -34,12 +52,23 @@ const WallsAndWallItems = ({ CSGGroup, AssetConfigurations, setSelectedItemsInde
       visible={!toggleView}
       onClick={(event) => {
         if (!deleteTool && transformMode !== null) {
-                    handleMeshDown(event, currentWallItem, setSelectedWallItem, setSelectedItemsIndex, wallItems, toggleView);
+          handleMeshDown(
+            event,
+            currentWallItem,
+            setSelectedWallItem,
+            setSelectedItemsIndex,
+            wallItems,
+            toggleView
+          );
         }
       }}
       onPointerMissed={() => {
         if (!deleteTool) {
-                    handleMeshMissed(currentWallItem, setSelectedWallItem, setSelectedItemsIndex);
+          handleMeshMissed(
+            currentWallItem,
+            setSelectedWallItem,
+            setSelectedItemsIndex
+          );
           setSelectedWallItem(null);
           setSelectedItemsIndex(null);
         }
@@ -47,10 +76,17 @@ const WallsAndWallItems = ({ CSGGroup, AssetConfigurations, setSelectedItemsInde
     >
       <Geometry ref={csg as any} computeVertexNormals useGroups>
         <WallsMesh lines={lines} />
-                <WallItemsGroup currentWallItem={currentWallItem} AssetConfigurations={AssetConfigurations} hoveredDeletableWallItem={hoveredDeletableWallItem} selectedItemsIndex={selectedItemsIndex} setSelectedItemsIndex={setSelectedItemsIndex} CSGGroup={CSGGroup} />
+        <WallItemsGroup
+          currentWallItem={currentWallItem}
+          AssetConfigurations={AssetConfigurations}
+          hoveredDeletableWallItem={hoveredDeletableWallItem}
+          selectedItemsIndex={selectedItemsIndex}
+          setSelectedItemsIndex={setSelectedItemsIndex}
+          CSGGroup={CSGGroup}
+        />
       </Geometry>
     </mesh>
-    )
+  );
-}
+};
 
 export default WallsAndWallItems;

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

@@ -1,23 +1,27 @@
-import * as THREE from 'three';
+import * as THREE from "three";
-import * as Types from '../../../types/world/worldTypes';
+import * as Types from "../../../types/world/worldTypes";
-import * as CONSTANTS from '../../../types/world/worldConstants';
+import * as CONSTANTS from "../../../types/world/worldConstants";
-import { Base } from '@react-three/csg';
+import { Base } from "@react-three/csg";
-import { MeshDiscardMaterial } from '@react-three/drei';
+import { MeshDiscardMaterial } from "@react-three/drei";
-import { useUpdateScene, useWalls } from '../../../store/store';
+import { useUpdateScene, useWalls } from "../../../store/store";
-import { useEffect } from 'react';
+import React, { useEffect } from "react";
-import { getLines } from '../../../services/factoryBuilder/lines/getLinesApi';
+import { getLines } from "../../../services/factoryBuilder/lines/getLinesApi";
-import objectLinesToArray from '../geomentries/lines/lineConvertions/objectLinesToArray';
+import objectLinesToArray from "../geomentries/lines/lineConvertions/objectLinesToArray";
-import loadWalls from '../geomentries/walls/loadWalls';
+import loadWalls from "../geomentries/walls/loadWalls";
+// texture
+import texturePath from "../../../assets/textures/floor/wall-tex.png";
 
-const WallsMesh = ({ lines }: any) => {
+// Cache for materials
+const materialCache = new Map<string, THREE.Material>();
+
+const WallsMeshComponent = ({ lines }: any) => {
   const { walls, setWalls } = useWalls();
   const { updateScene, setUpdateScene } = useUpdateScene();
 
   useEffect(() => {
     if (updateScene) {
-
+      const email = localStorage.getItem("email");
-            const email = localStorage.getItem('email')
+      const organization = email!.split("@")[1].split(".")[0];
-            const organization = (email!.split("@")[1]).split(".")[0];
 
       getLines(organization).then((data) => {
         const Lines: Types.Lines = objectLinesToArray(data);
@@ -26,15 +30,22 @@ const WallsMesh = ({ lines }: any) => {
         if (Lines) {
           loadWalls(lines, setWalls);
         }
-            })
+      });
       setUpdateScene(false);
     }
-    }, [updateScene])
+  }, [updateScene]);
+
+  const textureLoader = new THREE.TextureLoader();
+  const wallTexture = textureLoader.load(texturePath);
+
+  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}>
+        <mesh key={index} renderOrder={1}>
           <Base
             name={`Wall${index + 1}`}
             geometry={wall[0]}
@@ -45,6 +56,7 @@ const WallsMesh = ({ lines }: any) => {
             <meshStandardMaterial
               side={THREE.DoubleSide}
               color={CONSTANTS.wallConfig.defaultColor}
+              map={wallTexture}
             />
           </Base>
           <mesh
@@ -59,7 +71,8 @@ const WallsMesh = ({ lines }: any) => {
         </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);
+          color: var(--accent-color);
-          opacity: 0.4;
           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);
 }