feat: add active time display to AssetDetailsCard and update related components

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

@@ -13,6 +13,7 @@ interface AssetDetailsCardInterface {
   enableStatue?: boolean;
   count?: number;
   totalCapacity?: number;
+  activeTime?: any;
   assetDetails?: {
     assetName: string;
     const: string;
@@ -59,6 +60,7 @@ const AssetDetailsCard: React.FC<AssetDetailsCardInterface> = ({
   status,
   count,
   totalCapacity,
+  activeTime,
   assetDetails,
 }) => {
   const [moreDetails, setMoreDetails] = useState(false);
@@ -75,7 +77,10 @@ const AssetDetailsCard: React.FC<AssetDetailsCardInterface> = ({
           <div className="content">
             <div className="name">{name}</div>
             {enableStatue && (
-              <div className="status-container">{GetStatus(status)}</div>
+              <>
+                <div className="active-time">Active Time : <span className="value">{activeTime}</span></div>
+                <div className="status-container">{GetStatus(status)}</div>
+              </>
             )}
             {!enableStatue && totalCapacity && (
               <div className="storage-container">Storage/Inventory</div>

app/src/modules/simulation/ui3d/MachineContentUi.tsx

@@ -26,7 +26,7 @@ const MachineContentUi: React.FC<MachineContentUiProps> = ({ machine }) => {
       center
       distanceFactor={20}
     >
-      <AssetDetailsCard name={machine.modelName} status={machine.state} />
+      <AssetDetailsCard name={machine.modelName} status={machine.state} activeTime={machine.activeTime}/>
     </Html>
   );
 };

app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx

@@ -26,7 +26,7 @@ const RoboticArmContentUi: React.FC<RoboticArmContentUiProps> = ({ roboticArm })
       center
       distanceFactor={20}
     >
-      <AssetDetailsCard name={roboticArm.modelName} status={roboticArm.state} />
+      <AssetDetailsCard name={roboticArm.modelName} status={roboticArm.state} activeTime={roboticArm.activeTime}/>
     </Html>
   );
 };

app/src/modules/simulation/ui3d/VehicleContentUi.tsx

@@ -44,6 +44,8 @@ const VehicleContentUi: React.FC<VehicleContentUiProps> = ({ vehicle }) => {
         status={vehicle.state}
         count={vehicle.currentLoad}
         totalCapacity={vehicle.point.action.loadCapacity}
+        activeTime={vehicle.activeTime}
+        
       />
     </Html>
   );

app/src/styles/components/simulation/simulation.scss

@@ -9,15 +9,16 @@
   transform: translate(-50%, 0);
   width: 70vw;
   transition: all 0.3s;
+
   &.hide {
     width: fit-content;
-    .simulation-player-container
+
-      .controls-container
+    .simulation-player-container .controls-container .simulation-button-container {
-      .simulation-button-container {
       width: 32px;
       height: 24px;
     }
   }
+
   .simulation-player-container {
     background: var(--background-color);
     padding: 7px;
@@ -327,6 +328,7 @@
   }
 
   .open {
+
     .start-displayer,
     .end-displayer {
       display: none;
@@ -423,13 +425,16 @@
       cursor: pointer;
       transition: all 0.2s;
       outline: 1px solid transparent;
+
       &:hover {
         outline: 1px solid var(--border-color);
         color: var(--accent-color);
       }
+
       &.hide {
         width: 32px;
       }
+
       .icon {
         width: 16px;
         height: 16px;
@@ -496,6 +501,7 @@
 
 .asset-details-card-wrapper {
   pointer-events: none;
+
   .asset-details-card-container {
     position: relative;
     padding: 8px;
@@ -527,6 +533,7 @@
     .asset-details-header {
       @include flex-space-between;
       gap: 12px;
+
       .content {
         .name {
           text-wrap: nowrap;
@@ -536,20 +543,34 @@
           margin-bottom: 4px;
           text-transform: capitalize;
         }
+
         .status-container {
           .status {
             display: flex;
             align-items: center;
             gap: 6px;
+            padding-top: 4px;
+
             .icon {
               @include flex-center;
             }
           }
         }
+
+        .active-time {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          .value {
+            color: var(--highlight-text-color);
+          }
+        }
+
         .storage-container {
           font-size: var(--font-size-tiny);
           color: var(--highlight-text-color);
         }
+        
       }
     }
 
@@ -561,6 +582,7 @@
       border-radius: #{$border-radius-small};
       overflow: hidden;
       position: relative;
+
       .process-running {
         height: 100%;
         width: 35%;
@@ -584,6 +606,7 @@
       top: -2px;
       padding: 4px;
       padding-right: 8px;
+
       .count-ui-container {
         background: var(--background-color-solid);
         padding: 8px;
@@ -593,19 +616,24 @@
         max-width: 80px;
         position: absolute;
         left: 0;
+
         .content {
           @include flex-center;
           gap: 2px;
+
           .icon {
             @include flex-center;
           }
+
           .display {
             font-size: var(--font-size-small);
           }
         }
+
         .value-container {
           @include flex-center;
           gap: 4px;
+
           .progress-bar {
             display: flex;
             align-items: center;
@@ -621,13 +649,12 @@
             background: var(--background-color);
             overflow: hidden;
             position: relative;
+
             .fill {
               height: 100%;
-              background: linear-gradient(
+              background: linear-gradient(to top,
-                to top,
+                  var(--background-color-accent) var(--process-fill-percentage),
-                var(--background-color-accent) var(--process-fill-percentage),
+                  transparent var(--process-fill-percentage));
-                transparent var(--process-fill-percentage)
-              );
             }
           }
 
@@ -645,6 +672,7 @@
   from {
     transform: translateX(-100%);
   }
+
   to {
     transform: translateX(300%);
   }
@@ -654,10 +682,12 @@
   0% {
     background-position: 0% 50%;
   }
+
   50% {
     background-position: 100% 50%;
   }
+
   100% {
     background-position: 0% 50%;
   }
-}
+}