feat: Enhance vehicle simulation UI with draggable points and asset details

- Updated VehicleInstances component to include asset details card for each vehicle.
- Refactored Vehicles component to remove unused vehicle state logging.
- Added new styles for asset details card in simulation.scss.
- Removed unnecessary styles from realTimeViz.scss.
- Implemented PickDropPoints component for draggable pick and drop locations.
- Created ArmBotUI component to manage robotic arm interactions and actions.
- Developed useDraggableGLTF hook for handling drag-and-drop functionality for GLTF models.
- Introduced VehicleUI component to visualize vehicle start and end points with rotation controls.
- Updated backend integration for vehicle actions and positions.

app/src/components/ui/simulation/AssetDetailsCard.tsx

@@ -1,11 +1,114 @@
-import React from 'react'
+import React, { useState } from "react";
+import {
+  CartBagIcon,
+  ExpandIcon,
+  IndicationArrow,
+  SimulationStatusIcon,
+} from "../../icons/SimulationIcons";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
 
-const AssetDetailsCard:React.FC = () => {
-  return (
-    <div className="asset-details-card-wrapper">
-        
-    </div>
-  )
+interface AssetDetailsCardInterface {
+  name: string;
+  status: string;
+  count?: number;
+  totalCapacity?: number;
+  assetDetails?: {
+    assetName: string;
+    const: string;
+    performance: string;
+  };
 }
 
-export default AssetDetailsCard
+const GetStatus = (status: string) => {
+  // "idle" | "running" | "stopped" | "disabled" | "error"
+  switch (status) {
+    case "idle":
+      return (
+        <div className="status">
+          <div className="icon">
+            <SimulationStatusIcon color="#FFD321" />
+          </div>
+          <div className="value">Idle</div>
+        </div>
+      );
+    case "running":
+      return (
+        <div className="status">
+          <div className="icon">
+            <SimulationStatusIcon color="#21FF59" />
+          </div>
+          <div className="value">Running</div>
+        </div>
+      );
+    case "stopped":
+      return (
+        <div className="status">
+          <div className="icon">
+            <SimulationStatusIcon color="#FF1010" />
+          </div>
+          <div className="value">Stopped</div>
+        </div>
+      );
+  }
+};
+
+const AssetDetailsCard: React.FC<AssetDetailsCardInterface> = ({
+  name,
+  status,
+  count,
+  totalCapacity,
+  assetDetails,
+}) => {
+  const [moreDetails, setMoreDetails] = useState(false);
+  // hooks
+  const { isPlaying } = usePlayButtonStore();
+
+  return (
+    <div
+      className="asset-details-card-wrapper"
+      style={{ display: isPlaying ? "" : "none" }}
+    >
+      <div className="asset-details-card-container">
+        <div className="asset-details-header">
+          <div className="content">
+            <div className="name">{name}</div>
+            <div className="status-container">{GetStatus(status)}</div>
+          </div>
+          <button
+            className="expand-button"
+            onClick={() => {
+              setMoreDetails(!moreDetails);
+            }}
+          >
+            <ExpandIcon />
+          </button>
+        </div>
+
+        {totalCapacity && (
+          <div className="count-ui-wrapper">
+            <div className="count-ui-container">
+              <div className="icon">
+                <CartBagIcon />
+              </div>
+              <div className="value">{count?.toString()}</div>
+            </div>
+          </div>
+        )}
+
+        {status === "running" && (
+          <div className={`process-running-container ${status}`}>
+            <div
+              className="process-running"
+              style={{ "--process-color": "#21FF59" } as React.CSSProperties}
+            ></div>
+          </div>
+        )}
+        <div className="indication-arrow">
+          <IndicationArrow />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AssetDetailsCard;