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/styles/components/simulation/simulation.scss

@@ -315,7 +315,6 @@
   }
 
   .open {
-
     .start-displayer,
     .end-displayer {
       display: none;
@@ -401,4 +400,138 @@
       }
     }
   }
-}
+}
+
+.asset-details-card-wrapper {
+  pointer-events: none;
+  .asset-details-card-container {
+    position: relative;
+    padding: 8px;
+    background: var(--background-color);
+    backdrop-filter: blur(6px);
+    border-radius: #{$border-radius-large};
+    transform: translate(0, -100%);
+    z-index: 0;
+    box-shadow: inset 0px 10px 50px #80808075;
+    min-width: 124px;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background: linear-gradient(135deg, var(--accent-color), #ff00f000);
+      background-size: 400% 400%;
+      animation: borderAnimation 5s linear infinite;
+      -webkit-mask: linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+      z-index: -1;
+      padding: 1px;
+    }
+
+    .asset-details-header {
+      @include flex-space-between;
+      gap: 12px;
+      .content {
+        .name {
+          text-wrap: nowrap;
+          max-width: 140px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          margin-bottom: 4px;
+          text-transform: capitalize;
+        }
+        .status-container {
+          .status {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            .icon {
+              @include flex-center;
+            }
+          }
+        }
+      }
+    }
+
+    .process-running-container {
+      width: 100%;
+      height: 8px;
+      background: var(--background-color-solid);
+      margin-top: 12px;
+      border-radius: #{$border-radius-small};
+      overflow: hidden;
+      position: relative;
+      .process-running {
+        height: 100%;
+        width: 35%;
+        border-radius: #{$border-radius-small};
+        background: var(--process-color);
+        animation: playing-process 1s ease-in-out infinite;
+      }
+    }
+
+    .indication-arrow {
+      position: absolute;
+      left: 50%;
+      bottom: 0;
+      transform: translate(-50%, 10px);
+      filter: drop-shadow(0px 0px 4px #ffffff);
+    }
+
+    .count-ui-wrapper {
+      position: absolute;
+      right: -42px;
+      top: 5px;
+      padding: 4px;
+      padding-right: 8px;
+      .count-ui-container {
+        @include flex-center;
+        gap: 6px;
+        .icon{
+          @include flex-center;
+          padding: 3px;
+          border-radius: #{$border-radius-circle};
+          background: var(--background-color-accent);
+          svg {
+            scale: 0.6;
+          }
+        }
+        .value{
+          position: absolute;
+          width: 48px;
+          background: var(--background-color-solid-gradient);
+          border-radius: #{$border-radius-large};
+          outline: 1px solid var(--border-color);
+          padding: 4px 10px;
+          padding-left: 16px;
+          transform: translateX(28px);
+          z-index: -1;
+        }
+      }
+    }
+  }
+}
+
+@keyframes playing-process {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(300%);
+  }
+}
+
+@keyframes borderAnimation {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}