From fdf10589a7bac75fdf03f1b39aa71a54c7dacb8c Mon Sep 17 00:00:00 2001
From: Poovizhi99 <poovizhi@hexrfactory.com>
Date: Tue, 29 Apr 2025 12:56:20 +0530
Subject: [PATCH] Merged With AGV-UI
---
.../simulation/ui/vehicle/vehicleUI.tsx | 99 +++---
.../instances/animator/vehicleAnimator.tsx | 25 +-
.../instances/instance/vehicleInstance.tsx | 7 +-
.../vehicle/instances/vehicleInstances.tsx | 22 +-
.../modules/simulation/vehicle/vehicles.tsx | 317 +++++++++++-------
5 files changed, 287 insertions(+), 183 deletions(-)
diff --git a/app/src/modules/simulation/ui/vehicle/vehicleUI.tsx b/app/src/modules/simulation/ui/vehicle/vehicleUI.tsx
index f927c33..b26cfc9 100644
--- a/app/src/modules/simulation/ui/vehicle/vehicleUI.tsx
+++ b/app/src/modules/simulation/ui/vehicle/vehicleUI.tsx
@@ -5,37 +5,40 @@ import { useGLTF } from "@react-three/drei";
import { useSelectedEventSphere } from "../../../../store/simulation/useSimulationStore";
import * as THREE from "three";
import { useThree } from "@react-three/fiber";
+import { useVehicleStore } from "../../../../store/simulation/useVehicleStore";
type VehicleUIProps = {
vehicleStatusSample: VehicleEventSchema[];
setVehicleStatusSample: React.Dispatch<
React.SetStateAction<VehicleEventSchema[]>
>;
+ vehicle: any
};
const VehicleUI: React.FC<VehicleUIProps> = ({
vehicleStatusSample,
setVehicleStatusSample,
+ vehicle
}) => {
const { scene: startScene } = useGLTF(startPoint) as any;
const { scene: endScene } = useGLTF(startEnd) as any;
const { camera, gl, controls } = useThree();
const { selectedEventSphere } = useSelectedEventSphere();
-
+ const { updateVehicle } = useVehicleStore();
const startMarker = useRef<THREE.Group>(null);
const endMarker = useRef<THREE.Group>(null);
- const hasInitialized = useRef(false);
+ const hasInitialized = useRef<boolean>(false);
+ const raycaster = useRef(new THREE.Raycaster());
+ const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)); // Y = 0 plane
+ const mouse = useRef(new THREE.Vector2());
+ const prevMousePos = useRef({ x: 0, y: 0 });
const [draggedMarker, setDraggedMarker] = useState<"start" | "end" | null>(
null
);
const [dragOffset, setDragOffset] = useState<THREE.Vector3 | null>(null);
- const [isRotating, setIsRotating] = useState(false);
+ const [isRotating, setIsRotating] = useState<boolean>(false);
- const raycaster = useRef(new THREE.Raycaster());
- const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0)); // Y = 0 plane
- const mouse = useRef(new THREE.Vector2());
- const prevMousePos = useRef({ x: 0, y: 0 });
// Initialize start/end markers
useEffect(() => {
@@ -91,9 +94,8 @@ const VehicleUI: React.FC<VehicleUIProps> = ({
pickUpPoint.y,
pickUpPoint.z
);
- const worldPos = selectedEventSphere.localToWorld(localPos);
- worldPos.y = 0; // Force y to 0
- startMarker.current.position.copy(worldPos);
+ localPos.y = 0; // Force y to 0
+ startMarker.current.position.copy(localPos);
} else {
const defaultLocal = new THREE.Vector3(0, 0, 1.5);
const defaultWorld = selectedEventSphere.localToWorld(defaultLocal);
@@ -108,9 +110,10 @@ const VehicleUI: React.FC<VehicleUIProps> = ({
unLoadPoint.y,
unLoadPoint.z
);
- const worldPos = selectedEventSphere.localToWorld(localPos);
- worldPos.y = 0; // Force y to 0
- endMarker.current.position.copy(worldPos);
+
+
+ localPos.y = 0; // Force y to 0
+ endMarker.current.position.copy(localPos);
} else {
const defaultLocal = new THREE.Vector3(0, 0, -1.5);
const defaultWorld = selectedEventSphere.localToWorld(defaultLocal);
@@ -190,6 +193,7 @@ const VehicleUI: React.FC<VehicleUIProps> = ({
z: intersectPoint.z + dragOffset.z,
};
+
if (draggedMarker === "start" && startMarker.current) {
startMarker.current.position.set(newPos.x, newPos.y, newPos.z);
} else if (draggedMarker === "end" && endMarker.current) {
@@ -215,36 +219,51 @@ const VehicleUI: React.FC<VehicleUIProps> = ({
draggedMarker === "start" ? startMarker.current : endMarker.current;
if (!marker) return;
- const worldPos = marker.position.clone();
- const localPos = selectedEventSphere.worldToLocal(worldPos);
+ const worldPos = marker.position;
- // Direct update (no snapping, ground level forced at y = 0)
- const updatedLocalPos = { x: localPos.x, y: 0, z: localPos.z };
+ const updatedLocalPos = { x: worldPos.x, y: 0, z: worldPos.z };
+ console.log('updatedLocalPos: ', updatedLocalPos);
- setVehicleStatusSample((prev) =>
- prev.map((vehicle) => {
- if (
- vehicle.modelUuid === selectedEventSphere.userData.modelUuid &&
- selectedEventSphere
- ) {
- const updatedVehicle = {
- ...vehicle,
- point: {
- ...vehicle.point,
- action: {
- ...vehicle.point?.action,
- ...(draggedMarker === "start"
- ? { pickUpPoint: updatedLocalPos }
- : { unLoadPoint: updatedLocalPos }),
- },
- },
- };
- return updatedVehicle;
- }
- return vehicle;
- })
- );
+ console.log('draggedMarker: ', draggedMarker);
+ // setVehicleStatusSample((prev) =>
+ // prev.map((vehicle) => {
+ // if (
+ // vehicle.modelUuid === selectedEventSphere.userData.modelUuid &&
+ // selectedEventSphere
+ // ) {
+ // const updatedVehicle = {
+ // ...vehicle,
+ // point: {
+ // ...vehicle.point,
+ // action: {
+ // ...vehicle.point?.action,
+ // ...(draggedMarker === "start"
+ // ? { pickUpPoint: updatedLocalPos }
+ // : { unLoadPoint: updatedLocalPos }),
+ // },
+ // },
+ // };
+ // return updatedVehicle;
+ // }
+ // return vehicle;
+ // })
+ // );
+
+ updateVehicle(selectedEventSphere.userData.modelUuid, {
+ point: {
+ ...vehicle?.point,
+ action: {
+ ...vehicle?.point?.action,
+ ...(draggedMarker === "start"
+ ? { pickUpPoint: updatedLocalPos }
+ : { unLoadPoint: updatedLocalPos }),
+ },
+ },
+ });
+
+
+
setDraggedMarker(null);
setDragOffset(null);
};
diff --git a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx b/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
index 6e2093e..e4b2ef5 100644
--- a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
+++ b/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
@@ -1,11 +1,9 @@
import { useEffect, useRef, useState } from 'react'
import { useFrame, useThree } from '@react-three/fiber';
-import { useActiveTool, useFloorItems } from '../../../../../store/store';
import * as THREE from 'three';
import { Line } from '@react-three/drei';
import { useAnimationPlaySpeed, usePauseButtonStore, usePlayButtonStore, useResetButtonStore } from '../../../../../store/usePlayButtonStore';
import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore';
-import useModuleStore from '../../../../../store/useModuleStore';
interface VehicleAnimatorProps {
path: [number, number, number][];
@@ -17,23 +15,24 @@ interface VehicleAnimatorProps {
}
function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetail, reset }: VehicleAnimatorProps) {
+ // console.log('path: ', path);
const { decrementVehicleLoad } = useVehicleStore();
const { isPaused } = usePauseButtonStore();
const { isPlaying } = usePlayButtonStore();
const { speed } = useAnimationPlaySpeed();
const { isReset, setReset } = useResetButtonStore();
- const [restRotation, setRestingRotation] = useState<boolean>(true);
- const [progress, setProgress] = useState<number>(0);
- const [currentPath, setCurrentPath] = useState<[number, number, number][]>([]);
- const { scene } = useThree();
const progressRef = useRef<number>(0);
const movingForward = useRef<boolean>(true);
const completedRef = useRef<boolean>(false);
+ const isPausedRef = useRef<boolean>(false);
+ const pauseTimeRef = useRef<number | null>(null);
+ const [restRotation, setRestingRotation] = useState<boolean>(true);
+ const [currentPath, setCurrentPath] = useState<[number, number, number][]>([]);
+ const [progress, setProgress] = useState<number>(0);
+ const { scene } = useThree();
let startTime: number;
let fixedInterval: number;
let coveredDistance = progressRef.current;
- const isPausedRef = useRef(false);
- const pauseTimeRef = useRef<number | null>(null);
useEffect(() => {
@@ -73,6 +72,9 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
}
}, [isReset, isPlaying])
+ useEffect(() => {
+ isPausedRef.current = isPaused;
+ }, [isPaused]);
useFrame((_, delta) => {
const object = scene.getObjectByProperty('uuid', agvUuid);
@@ -152,10 +154,6 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
}
});
- useEffect(() => {
- isPausedRef.current = isPaused;
- }, [isPaused]);
-
function firstFrame() {
const droppedMaterial = agvDetail.currentLoad;
startTime = performance.now();
@@ -182,11 +180,8 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
fixedInterval = ((unLoadDuration / agvDetail.currentLoad) * (1000 / speed));
if (elapsedTime >= fixedInterval) {
- console.log('elapsedTime: ', elapsedTime);
-
let droppedMat = droppedMaterial - 1;
decrementVehicleLoad(agvDetail.modelUuid, 1);
-
if (droppedMat > 0) {
startTime = performance.now();
requestAnimationFrame(() => step(droppedMat));
diff --git a/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx b/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx
index 3f692d9..570c137 100644
--- a/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx
+++ b/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx
@@ -3,7 +3,7 @@ import VehicleAnimator from '../animator/vehicleAnimator';
import * as THREE from 'three';
import { NavMeshQuery } from '@recast-navigation/core';
import { useNavMesh } from '../../../../../store/store';
-import { usePlayButtonStore, useResetButtonStore } from '../../../../../store/usePlayButtonStore';
+import { usePlayButtonStore } from '../../../../../store/usePlayButtonStore';
import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore';
function VehicleInstance({ agvDetail }: any) {
@@ -12,7 +12,7 @@ function VehicleInstance({ agvDetail }: any) {
const { vehicles, setVehicleActive, setVehicleState, incrementVehicleLoad } = useVehicleStore();
const [currentPhase, setCurrentPhase] = useState<string>('stationed');
const [path, setPath] = useState<[number, number, number][]>([]);
- let isIncrememtable = useRef(true);
+ let isIncrememtable = useRef<boolean>(true);
const computePath = useCallback(
(start: any, end: any) => {
@@ -20,7 +20,7 @@ function VehicleInstance({ agvDetail }: any) {
const navMeshQuery = new NavMeshQuery(navMesh);
const { path: segmentPath } = navMeshQuery.computePath(start, end);
return (
- segmentPath?.map(({ x, y, z }) => [x, y + 0.1, z] as [number, number, number]) || []
+ segmentPath?.map(({ x, y, z }) => [x, 0, z] as [number, number, number]) || []
);
} catch {
return [];
@@ -41,7 +41,6 @@ function VehicleInstance({ agvDetail }: any) {
setPath([]);
}
-
const increment = () => {
if (isIncrememtable.current) {
console.log('called');
diff --git a/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx b/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx
index 2a0070b..aa482c0 100644
--- a/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx
+++ b/app/src/modules/simulation/vehicle/instances/vehicleInstances.tsx
@@ -1,14 +1,32 @@
import React from 'react'
import VehicleInstance from './instance/vehicleInstance'
import { useVehicleStore } from '../../../../store/simulation/useVehicleStore'
+import VehicleUI from '../../ui/vehicle/vehicleUI';
+type VehicleUIProps = {
+ vehicleStatusSample: VehicleEventSchema[];
+ setVehicleStatusSample: React.Dispatch<
+ React.SetStateAction<VehicleEventSchema[]>
+ >;
+};
+const VehicleInstances: React.FC<VehicleUIProps> = ({
+ vehicleStatusSample,
+ setVehicleStatusSample,
+}) => {
-function VehicleInstances() {
const { vehicles } = useVehicleStore();
+
return (
<>
{vehicles.map((val: any, i: any) =>
- <VehicleInstance agvDetail={val} key={i} />
+ <>
+ <VehicleInstance agvDetail={val} key={i} />
+ <VehicleUI
+ setVehicleStatusSample={setVehicleStatusSample}
+ vehicleStatusSample={vehicleStatusSample}
+ vehicle={val}
+ />
+ </>
)}
</>
diff --git a/app/src/modules/simulation/vehicle/vehicles.tsx b/app/src/modules/simulation/vehicle/vehicles.tsx
index 65376f2..3b811b3 100644
--- a/app/src/modules/simulation/vehicle/vehicles.tsx
+++ b/app/src/modules/simulation/vehicle/vehicles.tsx
@@ -5,133 +5,206 @@ import { useFloorItems } from "../../../store/store";
import { useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
import VehicleUI from "../ui/vehicle/vehicleUI";
function Vehicles() {
- const { vehicles, addVehicle } = useVehicleStore();
- const { selectedEventSphere } = useSelectedEventSphere();
- const { floorItems } = useFloorItems();
+ const { vehicles, addVehicle } = useVehicleStore();
- const [vehicleStatusSample, setVehicleStatusSample] = useState<
- VehicleEventSchema[]
- >([
-
- {
- modelUuid: "68f8dc55-7802-47fe-aa1c-eade54b4320a",
- modelName: "AGV",
- position: [89.61609306554463, 0, 33.634136622267356],
- rotation: [0, 0, 0],
- state: "idle",
- type: "vehicle",
- speed: 2.5,
- point: {
- uuid: "point-789",
- position: [0, 1, 0],
- rotation: [0, 0, 0],
- action: {
- actionUuid: "action-456",
- actionName: "Deliver to Zone A",
- actionType: "travel",
- unLoadDuration: 10,
- loadCapacity: 2,
- pickUpPoint: null,
- unLoadPoint: null,
- triggers: [
- {
- triggerUuid: "trig-001",
- triggerName: "Start Travel",
- triggerType: "onStart",
- delay: 0,
- triggeredAsset: {
- triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
- triggeredPoint: {
- pointName: "Pickup Arm Point",
- pointUuid: "arm-point-01",
- },
- triggeredAction: {
- actionName: "Grab Widget",
- actionUuid: "grab-001",
- },
- },
- },
- {
- triggerUuid: "trig-002",
- triggerName: "Complete Travel",
- triggerType: "onComplete",
- delay: 2,
- triggeredAsset: null,
- },
- ],
+ const { floorItems } = useFloorItems()
+
+ const [vehicleStatusSample, setVehicleStatusSample] = useState<
+ VehicleEventSchema[]
+ >([
+ {
+ modelUuid: "9356f710-4727-4b50-bdb2-9c1e747ecc74",
+ modelName: "AGV",
+ position: [97.9252965204558, 0, 37.96138815638661],
+ rotation: [0, 0, 0],
+ state: "idle",
+ type: "vehicle",
+ speed: 2.5,
+ point: {
+ uuid: "point-789",
+ position: [0, 1, 0],
+ rotation: [0, 0, 0],
+ action: {
+ actionUuid: "action-456",
+ actionName: "Deliver to Zone A",
+ actionType: "travel",
+ unLoadDuration: 10,
+ loadCapacity: 2,
+ pickUpPoint: { x: 98.71483985219794, y: 0, z: 28.66321267938962 },
+ unLoadPoint: { x: 105.71483985219794, y: 0, z: 28.66321267938962 },
+ triggers: [
+ {
+ triggerUuid: "trig-001",
+ triggerName: "Start Travel",
+ triggerType: "onComplete",
+ delay: 0,
+ triggeredAsset: {
+ triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
+ triggeredPoint: { pointName: "Pickup Arm Point", pointUuid: "arm-point-01" },
+ triggeredAction: { actionName: "Grab Widget", actionUuid: "grab-001" }
+ }
+ },
+ {
+ triggerUuid: "trig-002",
+ triggerName: "Complete Travel",
+ triggerType: "onComplete",
+ delay: 2,
+ triggeredAsset: null
+ }
+ ]
+ }
+ }
},
- },
- },
- {
- modelUuid: "3a8f6da6-da57-4ef5-91e3-b8daf89e5753",
- modelName: "forklift",
- position: [98.85729337188162, 0, 38.36616546567653],
- rotation: [0, 0, 0],
- state: "idle",
- type: "vehicle",
- speed: 2.5,
- point: {
- uuid: "point-789",
- position: [0, 1, 0],
- rotation: [0, 0, 0],
- action: {
- actionUuid: "action-456",
- actionName: "Deliver to Zone A",
- actionType: "travel",
- unLoadDuration: 15,
- loadCapacity: 5,
- pickUpPoint: null,
- unLoadPoint: null,
- triggers: [
- {
- triggerUuid: "trig-001",
- triggerName: "Start Travel",
- triggerType: "onStart",
- delay: 0,
- triggeredAsset: {
- triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
- triggeredPoint: {
- pointName: "Pickup Arm Point",
- pointUuid: "arm-point-01",
- },
- triggeredAction: {
- actionName: "Grab Widget",
- actionUuid: "grab-001",
- },
- },
- },
- {
- triggerUuid: "trig-002",
- triggerName: "Complete Travel",
- triggerType: "onComplete",
- delay: 2,
- triggeredAsset: null,
- },
- ],
+ {
+ modelUuid: "b06960bb-3d2e-41f7-a646-335f389c68b4",
+ modelName: "AGV",
+ position: [89.61609306554463, 0, 33.634136622267356],
+ rotation: [0, 0, 0],
+ state: "idle",
+ type: "vehicle",
+ speed: 2.5,
+ point: {
+ uuid: "point-789",
+ position: [0, 1, 0],
+ rotation: [0, 0, 0],
+ action: {
+ actionUuid: "action-456",
+ actionName: "Deliver to Zone A",
+ actionType: "travel",
+ unLoadDuration: 10,
+ loadCapacity: 2,
+ pickUpPoint: null,
+ unLoadPoint: null,
+ triggers: [
+ {
+ triggerUuid: "trig-001",
+ triggerName: "Start Travel",
+ triggerType: "onStart",
+ delay: 0,
+ triggeredAsset: {
+ triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
+ triggeredPoint: { pointName: "Pickup Arm Point", pointUuid: "arm-point-01" },
+ triggeredAction: { actionName: "Grab Widget", actionUuid: "grab-001" }
+ }
+ },
+ {
+ triggerUuid: "trig-002",
+ triggerName: "Complete Travel",
+ triggerType: "onComplete",
+ delay: 2,
+ triggeredAsset: null
+ }
+ ]
+ }
+ }
},
- },
- },
- ]);
- // useEffect(())
- console.log("vehicleStatusSample", vehicleStatusSample);
- useEffect(() => {
- addVehicle("123", vehicleStatusSample[0]);
- // addVehicle('123', vehicleStatusSample[1]);
- // addVehicle('123', vehicleStatusSample[2]);
- }, []);
+ {
+ modelUuid: "cd7d0584-0684-42b4-b051-9e882c1914aa",
+ modelName: "AGV",
+ position: [105.90938758014703, 0, 31.584209911095215],
+ rotation: [0, 0, 0],
+ state: "idle",
+ type: "vehicle",
+ speed: 2.5,
+ point: {
+ uuid: "point-789",
+ position: [0, 1, 0],
+ rotation: [0, 0, 0],
+ action: {
+ actionUuid: "action-456",
+ actionName: "Deliver to Zone A",
+ actionType: "travel",
+ unLoadDuration: 10,
+ loadCapacity: 2,
+ pickUpPoint: null,
+ unLoadPoint: null,
+ triggers: [
+ {
+ triggerUuid: "trig-001",
+ triggerName: "Start Travel",
+ triggerType: "onStart",
+ delay: 0,
+ triggeredAsset: {
+ triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
+ triggeredPoint: { pointName: "Pickup Arm Point", pointUuid: "arm-point-01" },
+ triggeredAction: { actionName: "Grab Widget", actionUuid: "grab-001" }
+ }
+ },
+ {
+ triggerUuid: "trig-002",
+ triggerName: "Complete Travel",
+ triggerType: "onComplete",
+ delay: 2,
+ triggeredAsset: null
+ }
+ ]
+ }
+ }
+ },
+ // {
+ // modelUuid: "e729a4f1-11d2-4778-8d6a-468f1b4f6b79",
+ // modelName: "forklift",
+ // position: [98.85729337188162, 0, 38.36616546567653],
+ // rotation: [0, 0, 0],
+ // state: "idle",
+ // type: "vehicle",
+ // speed: 2.5,
+ // point: {
+ // uuid: "point-789",
+ // position: [0, 1, 0],
+ // rotation: [0, 0, 0],
+ // action: {
+ // actionUuid: "action-456",
+ // actionName: "Deliver to Zone A",
+ // actionType: "travel",
+ // unLoadDuration: 15,
+ // loadCapacity: 5,
+ // pickUpPoint: null,
+ // unLoadPoint: null,
+ // triggers: [
+ // {
+ // triggerUuid: "trig-001",
+ // triggerName: "Start Travel",
+ // triggerType: "onStart",
+ // delay: 0,
+ // triggeredAsset: {
+ // triggeredModel: { modelName: "ArmBot-X", modelUuid: "arm-001" },
+ // triggeredPoint: { pointName: "Pickup Arm Point", pointUuid: "arm-point-01" },
+ // triggeredAction: { actionName: "Grab Widget", actionUuid: "grab-001" }
+ // }
+ // },
+ // {
+ // triggerUuid: "trig-002",
+ // triggerName: "Complete Travel",
+ // triggerType: "onComplete",
+ // delay: 2,
+ // triggeredAsset: null
+ // }
+ // ]
+ // }
+ // }
+ // }
+ ]);
+ useEffect(() => {
+ console.log("vehicles", vehicles);
+ }, [vehicles])
+ useEffect(() => {
+ addVehicle("123", vehicleStatusSample[0]);
+ addVehicle('123', vehicleStatusSample[1]);
+ addVehicle('123', vehicleStatusSample[2]);
+ }, []);
- useEffect(() => {}, [vehicles]);
-
- return (
- <>
- <VehicleInstances />
- <VehicleUI
- setVehicleStatusSample={setVehicleStatusSample}
- vehicleStatusSample={vehicleStatusSample}
- />
- </>
- );
+ return (
+ <>
+ <VehicleInstances setVehicleStatusSample={setVehicleStatusSample}
+ vehicleStatusSample={vehicleStatusSample} />
+ {/* <VehicleUI
+ setVehicleStatusSample={setVehicleStatusSample}
+ vehicleStatusSample={vehicles}
+ /> */}
+ </>
+ );
}
export default Vehicles;