From db7800367de952b4742793418c09233c7d13194d Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Sat, 10 May 2025 14:18:07 +0530
Subject: [PATCH] Refactor AssetDetailsCard and MaterialAnimator: improve
 progress calculation and enhance group positioning syntax

---
 app/src/components/ui/simulation/AssetDetailsCard.tsx      | 7 +++----
 .../storageUnit/instances/animator/MaterialAnimator.tsx    | 2 +-
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/app/src/components/ui/simulation/AssetDetailsCard.tsx b/app/src/components/ui/simulation/AssetDetailsCard.tsx
index 08eb280..5a4b4da 100644
--- a/app/src/components/ui/simulation/AssetDetailsCard.tsx
+++ b/app/src/components/ui/simulation/AssetDetailsCard.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import {
-  CartBagIcon,
   ExpandIcon,
   IndicationArrow,
   SimulationStatusIcon,
@@ -107,7 +106,7 @@ const AssetDetailsCard: React.FC<AssetDetailsCardInterface> = ({
               <div className="value-container">
                 <div className="progress-bar">
                   {[...Array(5)].map((_, i) => {
-                    const percentage = (count ?? 0 / totalCapacity) * 100;
+                    const percentage = (count! / totalCapacity) * 100;
                     const start = i * 20;
                     const end = (i + 1) * 20;
                     // fill amount: 0 to 100
@@ -120,7 +119,7 @@ const AssetDetailsCard: React.FC<AssetDetailsCardInterface> = ({
                       fillPercent = ((percentage - start) / 20) * 100;
                     }
                     return (
-                      <div key={i} className="block">
+                      <div key={`block-${i}-${start}-${end}`} className="block">
                         <div
                           className="fill"
                           style={
@@ -134,7 +133,7 @@ const AssetDetailsCard: React.FC<AssetDetailsCardInterface> = ({
                   })}
                 </div>
                 <div className="value">
-                  {Math.round((count ?? 0 / totalCapacity) * 100).toString()}%
+                  {Math.round((count! / totalCapacity) * 100).toString()}%
                 </div>
               </div>
             </div>
diff --git a/app/src/modules/simulation/storageUnit/instances/animator/MaterialAnimator.tsx b/app/src/modules/simulation/storageUnit/instances/animator/MaterialAnimator.tsx
index 259b455..4ddc374 100644
--- a/app/src/modules/simulation/storageUnit/instances/animator/MaterialAnimator.tsx
+++ b/app/src/modules/simulation/storageUnit/instances/animator/MaterialAnimator.tsx
@@ -58,7 +58,7 @@ const MaterialAnimator = ({
   }, [storageModel, storage.currentMaterials]);
 
   return (
-    <group position={[0, -padding, 0]}>
+    <group {...{ position: [0, -padding, 0] }}>
       {hasLoad &&
         storage.currentMaterials.map((mat, index) => (
           <MaterialModel