feat: Add simulation storage unit instance animation and comprehensive dashboard element design panel.

app/src/components/SimulationDashboard/components/element/ElementDesign.tsx

@@ -82,9 +82,11 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
                 <div className="design-section">
                     <InputWithDropDown
                         label="Text Value"
+                        type="string"
                         value={currentElement.textValue || ""}
                         placeholder={"Enter text..."}
-                        onChange={(newValue: string) => {
+                        onChange={(newValue) => {
+                            console.log("newValue: ", newValue);
                             updateTextValue(selectedBlock, selectedElement, newValue);
                         }}
                     />

app/src/modules/simulation/analyzer/analyzer.tsx

@@ -190,6 +190,9 @@ function Analyzer() {
     // Track previous actions for Machines to detect cycle completion
     const previousMachineActionsRef = useRef<Record<string, string | undefined>>({});
 
+    // Track previous storage loads to detect store/retrieve operations
+    const previousStorageLoadsRef = useRef<Record<string, number>>({});
+
     // Track previous action counts for Humans to detect completion from EventManager
     const previousHumanCountsRef = useRef<Record<string, Record<string, number>>>({});
 
@@ -232,6 +235,7 @@ function Analyzer() {
         previousAssetStatesRef.current = {};
         previousArmBotActionsRef.current = {};
         previousMachineActionsRef.current = {};
+        previousStorageLoadsRef.current = {};
         previousHumanCountsRef.current = {};
         previousVehiclePhasesRef.current = {};
         previousCranePhasesRef.current = {};
@@ -1475,8 +1479,8 @@ function Analyzer() {
 
                 currentStatus: {
                     isActive: storage.isActive,
-                    state: storage.state,
-                    currentLoad,
+                    state: storage.state || "idle",
+                    currentLoad: currentLoad,
                     storageCapacity: capacity,
                     currentMaterials: storage.currentMaterials,
                 },
@@ -1530,7 +1534,7 @@ function Analyzer() {
                     roi: costMetrics.roi,
                     valueAdded: costMetrics.valueAdded,
                     costPerUnit: totalOps > 0 ? costMetrics.totalCost / totalOps : 0,
-                    costPerStorageHour: capacity > 0 ? costMetrics.totalCost / (capacity * (timeMetrics.totalTime / 3600)) : 0,
+                    costPerStorageHour: capacity * timeMetrics.totalTime > 0 ? costMetrics.totalCost / (capacity * (timeMetrics.totalTime / 3600)) : 0,
                 },
 
                 // Add energy metrics
@@ -2426,6 +2430,34 @@ function Analyzer() {
         });
     }, [machines, isPlaying]);
 
+    // Monitor Storage load changes to track store/retrieve operations
+    useEffect(() => {
+        if (!isPlaying) return;
+
+        storageUnits.forEach((storage) => {
+            const previousLoad = previousStorageLoadsRef.current[storage.modelUuid] || 0;
+            const currentLoad = storage.currentLoad || 0;
+
+            if (currentLoad !== previousLoad) {
+                if (currentLoad > previousLoad) {
+                    // Store operation
+                    if (!completedActionsRef.current[`${storage.modelUuid}_store`]) {
+                        completedActionsRef.current[`${storage.modelUuid}_store`] = 0;
+                    }
+                    completedActionsRef.current[`${storage.modelUuid}_store`] += currentLoad - previousLoad;
+                } else {
+                    // Retrieve operation
+                    if (!completedActionsRef.current[`${storage.modelUuid}_retrieve`]) {
+                        completedActionsRef.current[`${storage.modelUuid}_retrieve`] = 0;
+                    }
+                    completedActionsRef.current[`${storage.modelUuid}_retrieve`] += previousLoad - currentLoad;
+                }
+            }
+
+            previousStorageLoadsRef.current[storage.modelUuid] = currentLoad;
+        });
+    }, [storageUnits, isPlaying]);
+
     // Monitor Human action changes from EventManager
     useEffect(() => {
         if (!isPlaying || !humanEventManagerRef.current) return;

app/src/modules/simulation/storageUnit/instances/storageUnitInstance/storageUnitInstance.tsx

@@ -5,7 +5,7 @@ import { useAnimationPlaySpeed, usePauseButtonStore, usePlayButtonStore } from "
 
 function StorageUnitInstance({ storageUnit }: Readonly<{ storageUnit: StorageUnitStatus }>) {
     const { storageUnitStore } = useSceneContext();
-    const { storageUnits, incrementActiveTime, incrementIdleTime } = storageUnitStore();
+    const { storageUnits, incrementActiveTime, incrementIdleTime, setStorageUnitActive } = storageUnitStore();
     const { isPlaying } = usePlayButtonStore();
 
     const idleTimeRef = useRef<number>(0);
@@ -18,6 +18,10 @@ function StorageUnitInstance({ storageUnit }: Readonly<{ storageUnit: StorageUni
     const { speed } = useAnimationPlaySpeed();
     const { isPaused } = usePauseButtonStore();
 
+    useEffect(() => {
+        setStorageUnitActive(storageUnit.modelUuid, isPlaying);
+    }, [isPlaying]);
+
     useEffect(() => {
         isPausedRef.current = isPaused;
     }, [isPaused]);