feat: Implement Zustand stores for machine, simulation, storage unit, vehicle, and visualization management

- Added `useMachineStore` for managing machine statuses, including actions for adding, removing, and updating machines.
- Introduced `useSimulationStore` to handle product and event management with actions for adding, removing, and updating products and events.
- Created `useStorageUnitStore` for managing storage unit statuses, including load tracking and state updates.
- Developed `useVehicleStore` for vehicle management, including load and state updates.
- Implemented `useChartStore` for managing measurement data and visualization settings.
- Added `useDroppedObjectsStore` for handling dropped objects in visualization zones, including object manipulation actions.
- Created `useZone3DWidgetStore` for managing 3D widget data in zones, including position and rotation updates.
- Introduced `useZoneStore` for managing selected zone states and widget configurations.

app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function VehicleAnimator() {
+  return (
+    <div>VehicleAnimator</div>
+  )
+}
+
+export default VehicleAnimator

app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import VehicleAnimator from '../animator/vehicleAnimator'
+
+function VehicleInstance() {
+    return (
+        <>
+
+            <VehicleAnimator />
+
+        </>
+    )
+}
+
+export default VehicleInstance

app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import VehicleInstance from './instance/vehicleInstance'
+
+function VehicleInstances() {
+    return (
+        <>
+
+            <VehicleInstance />
+
+        </>
+    )
+}
+
+export default VehicleInstances

app/src/modules/simulation/vehicle/navMesh/navMesh.tsx

@@ -0,0 +1,31 @@
+import { useRef } from "react";
+import { useNavMesh } from "../../../../store/store";
+import PolygonGenerator from "./polygonGenerator";
+import NavMeshDetails from "./navMeshDetails";
+import * as CONSTANTS from "../../../../types/world/worldConstants";
+import * as Types from "../../../../types/world/worldTypes";
+
+type NavMeshProps = {
+    lines: Types.RefLines
+};
+
+function NavMesh({ lines }: NavMeshProps) {
+    let groupRef = useRef() as Types.RefGroup;
+    const { setNavMesh } = useNavMesh();
+
+    return (
+        <>
+            <PolygonGenerator groupRef={groupRef} lines={lines} />
+            <NavMeshDetails lines={lines} setNavMesh={setNavMesh} groupRef={groupRef} />
+
+            <group ref={groupRef} visible={false} name="Meshes">
+                <mesh rotation-x={CONSTANTS.planeConfig.rotation} position={CONSTANTS.planeConfig.position3D} receiveShadow>
+                    <planeGeometry args={[300, 300]} />
+                    <meshBasicMaterial color={CONSTANTS.planeConfig.color} />
+                </mesh>
+            </group>
+        </>
+    )
+}
+
+export default NavMesh

app/src/modules/simulation/vehicle/navMesh/navMeshDetails.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect } from "react";
+import { init as initRecastNavigation } from "@recast-navigation/core";
+import { generateSoloNavMesh } from "@recast-navigation/generators";
+import { DebugDrawer, getPositionsAndIndices } from "@recast-navigation/three";
+import { useThree } from "@react-three/fiber";
+import * as THREE from "three";
+import * as Types from "../../../../types/world/worldTypes";
+
+interface NavMeshDetailsProps {
+    setNavMesh: (navMesh: any) => void;
+    groupRef: React.MutableRefObject<THREE.Group | null>;
+    lines: Types.RefLines;
+}
+
+export default function NavMeshDetails({
+    lines,
+    setNavMesh,
+    groupRef,
+}: NavMeshDetailsProps) {
+    const { scene } = useThree();
+
+    useEffect(() => {
+        const initializeNavigation = async () => {
+            try {
+                await initRecastNavigation();
+
+                if (!groupRef.current || groupRef.current.children.length === 0) {
+                    return;
+                }
+
+                const meshes = groupRef?.current?.children as THREE.Mesh[];
+
+                const [positions, indices] = getPositionsAndIndices(meshes);
+
+                const cellSize = 0.2;
+                const cellHeight = 0.7;
+                const walkableRadius = 0.5;
+                const { success, navMesh } = generateSoloNavMesh(positions, indices, {
+                    cs: cellSize,
+                    ch: cellHeight,
+                    walkableRadius: Math.round(walkableRadius / cellHeight),
+                });
+
+                if (!success || !navMesh) {
+                    return;
+                }
+
+                setNavMesh(navMesh);
+
+                scene.children
+                    .filter((child) => child instanceof DebugDrawer)
+                    .forEach((child) => scene.remove(child));
+
+                const debugDrawer = new DebugDrawer();
+                debugDrawer.drawNavMesh(navMesh);
+                // scene.add(debugDrawer);
+            } catch (error) { }
+        };
+
+        initializeNavigation();
+    }, [scene, groupRef, lines.current]);
+
+    return null;
+}

app/src/modules/simulation/vehicle/navMesh/polygonGenerator.tsx

@@ -0,0 +1,119 @@
+import * as THREE from "three";
+import { useEffect } from "react";
+import * as turf from "@turf/turf";
+import * as Types from "../../../../types/world/worldTypes";
+import arrayLinesToObject from "../../../builder/geomentries/lines/lineConvertions/arrayLinesToObject";
+
+interface PolygonGeneratorProps {
+    groupRef: React.MutableRefObject<THREE.Group | null>;
+    lines: Types.RefLines;
+}
+
+export default function PolygonGenerator({
+    groupRef,
+    lines,
+}: PolygonGeneratorProps) {
+
+    useEffect(() => {
+        let allLines = arrayLinesToObject(lines.current);
+        const wallLines = allLines?.filter((line) => line?.type === "WallLine");
+        const aisleLines = allLines?.filter((line) => line?.type === "AisleLine");
+
+        const wallPoints = wallLines
+            .map((pair) => pair?.line.map((vals) => vals.position))
+            .filter((wall): wall is THREE.Vector3[] => !!wall);
+
+        const result = aisleLines.map((pair) =>
+            pair?.line.map((point) => ({
+                position: [point.position.x, point.position.z],
+                uuid: point.uuid,
+            }))
+        );
+
+        if (!result || result.some((line) => !line)) {
+            return;
+        }
+
+        const lineFeatures = result?.map((line: any) =>
+            turf.lineString(line.map((p: any) => p?.position))
+        );
+
+        const polygons = turf.polygonize(turf.featureCollection(lineFeatures));
+        renderWallGeometry(wallPoints);
+
+        if (polygons.features.length > 1) {
+            polygons.features.forEach((feature) => {
+                if (feature.geometry.type === "Polygon") {
+
+                    const shape = new THREE.Shape();
+                    const coords = feature.geometry.coordinates[0];
+
+                    shape.moveTo(coords[0][0], coords[0][1]);
+
+                    for (let i = 1; i < coords.length; i++) {
+                        shape.lineTo(coords[i][0], coords[i][1]);
+                    }
+                    shape.lineTo(coords[0][0], coords[0][1]);
+
+                    const extrudeSettings = {
+                        depth: 5,
+                        bevelEnabled: false,
+                    };
+
+                    const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
+
+                    const material = new THREE.MeshBasicMaterial({ color: "blue", transparent: true, opacity: 0.5 });
+                    const mesh = new THREE.Mesh(geometry, material);
+                    mesh.rotateX(Math.PI / 2);
+                    mesh.name = "agv-collider";
+                    mesh.position.y = 5;
+
+                    mesh.receiveShadow = true;
+                    groupRef.current?.add(mesh);
+                }
+            });
+        }
+
+    }, [lines.current]);
+
+    const renderWallGeometry = (walls: THREE.Vector3[][]) => {
+        walls.forEach((wall) => {
+            if (wall.length < 2) return;
+
+            for (let i = 0; i < wall.length - 1; i++) {
+                const start = new THREE.Vector3(wall[i].x, wall[i].y, wall[i].z);
+                const end = new THREE.Vector3(
+                    wall[i + 1].x,
+                    wall[i + 1].y,
+                    wall[i + 1].z
+                );
+
+                const wallHeight = 10;
+                const direction = new THREE.Vector3().subVectors(end, start);
+                const length = direction.length();
+                direction.normalize();
+
+                const wallGeometry = new THREE.BoxGeometry(length, wallHeight);
+                const wallMaterial = new THREE.MeshBasicMaterial({
+                    color: "#aaa",
+                    transparent: true,
+                    opacity: 0.5,
+                });
+
+                const wallMesh = new THREE.Mesh(wallGeometry, wallMaterial);
+                const midPoint = new THREE.Vector3()
+                    .addVectors(start, end)
+                    .multiplyScalar(0.5);
+                wallMesh.position.set(midPoint.x, wallHeight / 2, midPoint.z);
+
+                const quaternion = new THREE.Quaternion();
+                quaternion.setFromUnitVectors(new THREE.Vector3(1, 0, 0), direction);
+                wallMesh.quaternion.copy(quaternion);
+
+                groupRef.current?.add(wallMesh);
+            }
+        });
+    };
+
+    return null;
+}

app/src/modules/simulation/vehicle/vehicle.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import VehicleInstances from './instances/vehicleInstances';
+
+function Vehicle() {
+    return (
+        <>
+
+            <VehicleInstances />
+
+        </>
+    )
+}
+
+export default Vehicle