From 4e2ff6bd019ee3a48fc2b460c0ab1aae4a07421e Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Sat, 10 May 2025 19:36:36 +0530
Subject: [PATCH] Refactor logging in simulation handlers to use echo for
 improved status reporting; update Project component to reflect successful
 login with success message; enhance sidebar styles with text transformation.

---
 .../ui/simulation/simulationPlayer.tsx          | 17 +++++++++++------
 .../conveyor/actionHandler/useDefaultHandler.ts |  2 +-
 .../conveyor/actionHandler/useDelayHandler.ts   |  2 +-
 .../conveyor/actionHandler/useDespawnHandler.ts |  2 +-
 .../conveyor/actionHandler/useSpawnHandler.ts   |  2 +-
 .../conveyor/actionHandler/useSwapHandler.ts    |  2 +-
 .../machine/actionHandler/useProcessHandler.ts  |  2 +-
 .../actionHandler/usePickAndPlaceHandler.ts     |  4 ++--
 .../actionHandler/useRetrieveHandler.ts         | 15 ++++++++-------
 .../actionHandler/useStoreHandler.ts            |  2 +-
 .../vehicle/actionHandler/useTravelHandler.ts   |  4 ++--
 app/src/pages/Project.tsx                       |  2 +-
 app/src/styles/layout/sidebar.scss              |  1 +
 13 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/app/src/components/ui/simulation/simulationPlayer.tsx b/app/src/components/ui/simulation/simulationPlayer.tsx
index 6ef8d2f..a2e05f9 100644
--- a/app/src/components/ui/simulation/simulationPlayer.tsx
+++ b/app/src/components/ui/simulation/simulationPlayer.tsx
@@ -42,19 +42,21 @@ const SimulationPlayer: React.FC = () => {
     if (isReset) {
       setTimeout(() => {
         setReset(false);
-      }, 0)
+      }, 0);
     }
-  }, [isReset, setReset])
+  }, [isReset, setReset]);
 
   // Button functions
   const handleReset = () => {
     setReset(true);
     setIsPaused(false);
     setSpeed(1);
+    echo.info("Simulation RESET.....");
     setPlaySimulation(false); // local state reset
   };
   const handlePlayStop = () => {
     setIsPaused(!isPaused);
+    echo.warn(`Simulation is ${isPaused ? "Resumed" : "Paused"}`);
     setPlaySimulation(!playSimulation);
   };
   const handleExit = () => {
@@ -62,6 +64,7 @@ const SimulationPlayer: React.FC = () => {
     setIsPlaying(false);
     setIsPaused(false);
     setActiveTool("cursor");
+    echo.info("Exit Simulation");
   };
 
   // Slider functions starts
@@ -282,10 +285,11 @@ const SimulationPlayer: React.FC = () => {
                         </div>
                         {index < intervals.length - 1 && (
                           <div
-                            className={`line ${progress >= ((index + 1) / totalSegments) * 100
+                            className={`line ${
+                              progress >= ((index + 1) / totalSegments) * 100
                                 ? "filled"
                                 : ""
-                              }`}
+                            }`}
                           ></div>
                         )}
                       </React.Fragment>
@@ -324,8 +328,9 @@ const SimulationPlayer: React.FC = () => {
                 <div className="custom-slider-wrapper">
                   <div className="custom-slider">
                     <button
-                      className={`slider-handle ${isDragging ? "dragging" : ""
-                        }`}
+                      className={`slider-handle ${
+                        isDragging ? "dragging" : ""
+                      }`}
                       style={{ left: `${calculateHandlePosition()}%` }}
                       onMouseDown={handleMouseDown}
                     >
diff --git a/app/src/modules/simulation/actions/conveyor/actionHandler/useDefaultHandler.ts b/app/src/modules/simulation/actions/conveyor/actionHandler/useDefaultHandler.ts
index ab0a284..2b48a25 100644
--- a/app/src/modules/simulation/actions/conveyor/actionHandler/useDefaultHandler.ts
+++ b/app/src/modules/simulation/actions/conveyor/actionHandler/useDefaultHandler.ts
@@ -5,7 +5,7 @@ export function useDefaultHandler() {
     const { getMaterialById } = useMaterialStore();
 
     const defaultLogStatus = (materialUuid: string, status: string) => {
-        // console.log(`${materialUuid}, ${status}`);
+        echo.info(`${materialUuid}, ${status}`);
     }
 
     const handleDefault = useCallback((action: ConveyorAction, materialId?: string) => {
diff --git a/app/src/modules/simulation/actions/conveyor/actionHandler/useDelayHandler.ts b/app/src/modules/simulation/actions/conveyor/actionHandler/useDelayHandler.ts
index 492ac3d..e21936a 100644
--- a/app/src/modules/simulation/actions/conveyor/actionHandler/useDelayHandler.ts
+++ b/app/src/modules/simulation/actions/conveyor/actionHandler/useDelayHandler.ts
@@ -34,7 +34,7 @@ export function useDelayHandler() {
     }, [isReset, cleanupDelay]);
 
     const delayLogStatus = (materialUuid: string, status: string) => {
-        // console.log(`${materialUuid}, ${status}`);
+        echo.info(`${materialUuid}, ${status}`);
     };
 
     useFrame(() => {
diff --git a/app/src/modules/simulation/actions/conveyor/actionHandler/useDespawnHandler.ts b/app/src/modules/simulation/actions/conveyor/actionHandler/useDespawnHandler.ts
index d72419a..5136e51 100644
--- a/app/src/modules/simulation/actions/conveyor/actionHandler/useDespawnHandler.ts
+++ b/app/src/modules/simulation/actions/conveyor/actionHandler/useDespawnHandler.ts
@@ -5,7 +5,7 @@ export function useDespawnHandler() {
     const { getMaterialById, removeMaterial } = useMaterialStore();
 
     const deSpawnLogStatus = (materialUuid: string, status: string) => {
-        // console.log(`${materialUuid}, ${status}`);
+        echo.info(`${materialUuid}, ${status}`);
     }
 
     const handleDespawn = useCallback((action: ConveyorAction, materialId?: string) => {
diff --git a/app/src/modules/simulation/actions/conveyor/actionHandler/useSpawnHandler.ts b/app/src/modules/simulation/actions/conveyor/actionHandler/useSpawnHandler.ts
index dcd86b8..544dc06 100644
--- a/app/src/modules/simulation/actions/conveyor/actionHandler/useSpawnHandler.ts
+++ b/app/src/modules/simulation/actions/conveyor/actionHandler/useSpawnHandler.ts
@@ -58,7 +58,7 @@ export function useSpawnHandler() {
     }, [isReset, clearAllSpawns]);
 
     const spawnLogStatus = (materialUuid: string, status: string) => {
-        // console.log(`${materialUuid}, ${status}`);
+        echo.info(`${materialUuid}, ${status}`);
     }
 
     const createNewMaterial = useCallback((materialType: string, action: ConveyorAction) => {
diff --git a/app/src/modules/simulation/actions/conveyor/actionHandler/useSwapHandler.ts b/app/src/modules/simulation/actions/conveyor/actionHandler/useSwapHandler.ts
index 68116db..59de9b6 100644
--- a/app/src/modules/simulation/actions/conveyor/actionHandler/useSwapHandler.ts
+++ b/app/src/modules/simulation/actions/conveyor/actionHandler/useSwapHandler.ts
@@ -5,7 +5,7 @@ export function useSwapHandler() {
     const { getMaterialById, setMaterial } = useMaterialStore();
 
     const swapLogStatus = (materialUuid: string, status: string) => {
-        // console.log(`${materialUuid}, ${status}`);
+        echo.info(`${materialUuid}, ${status}`);
     }
 
     const handleSwap = useCallback((action: ConveyorAction, materialId?: string) => {
diff --git a/app/src/modules/simulation/actions/machine/actionHandler/useProcessHandler.ts b/app/src/modules/simulation/actions/machine/actionHandler/useProcessHandler.ts
index a6bf16c..8cb07fb 100644
--- a/app/src/modules/simulation/actions/machine/actionHandler/useProcessHandler.ts
+++ b/app/src/modules/simulation/actions/machine/actionHandler/useProcessHandler.ts
@@ -11,7 +11,7 @@ export function useProcessHandler() {
     const { selectedProduct } = useSelectedProduct();
 
     const processLogStatus = (materialUuid: string, status: string) => {
-        // console.log(`${materialUuid}, ${status}`);
+        echo.log(`${materialUuid}, ${status}`);
     }
 
     const handleProcess = useCallback((action: MachineAction, materialId?: string) => {
diff --git a/app/src/modules/simulation/actions/roboticArm/actionHandler/usePickAndPlaceHandler.ts b/app/src/modules/simulation/actions/roboticArm/actionHandler/usePickAndPlaceHandler.ts
index 5368a82..d880ae0 100644
--- a/app/src/modules/simulation/actions/roboticArm/actionHandler/usePickAndPlaceHandler.ts
+++ b/app/src/modules/simulation/actions/roboticArm/actionHandler/usePickAndPlaceHandler.ts
@@ -11,7 +11,7 @@ export function usePickAndPlaceHandler() {
     const { selectedProduct } = useSelectedProduct();
 
     const pickAndPlaceLogStatus = (materialUuid: string, status: string) => {
-        // console.log(`${materialUuid}, ${status}`);
+        echo.warn(`${materialUuid}, ${status}`);
     }
 
     const handlePickAndPlace = useCallback((action: RoboticArmAction, materialId?: string) => {
@@ -33,7 +33,7 @@ export function usePickAndPlaceHandler() {
 
         pickAndPlaceLogStatus(material.materialId, `is going to be picked by armBot ${modelUuid}`);
 
-    }, [getMaterialById, getModelUuidByActionUuid, addCurrentAction]);
+    }, [getMaterialById, getModelUuidByActionUuid, selectedProduct.productId, addCurrentAction]);
 
     return {
         handlePickAndPlace,
diff --git a/app/src/modules/simulation/actions/storageUnit/actionHandler/useRetrieveHandler.ts b/app/src/modules/simulation/actions/storageUnit/actionHandler/useRetrieveHandler.ts
index fbe51e5..09731a6 100644
--- a/app/src/modules/simulation/actions/storageUnit/actionHandler/useRetrieveHandler.ts
+++ b/app/src/modules/simulation/actions/storageUnit/actionHandler/useRetrieveHandler.ts
@@ -1,5 +1,4 @@
 import { useCallback, useState, useEffect, useRef } from "react";
-import * as THREE from 'three';
 import { useFrame } from "@react-three/fiber";
 import { useMaterialStore } from "../../../../../store/simulation/useMaterialStore";
 import { useProductStore } from "../../../../../store/simulation/useProductStore";
@@ -26,7 +25,7 @@ export function useRetrieveHandler() {
     const delayTimerRef = useRef<NodeJS.Timeout | null>(null);
 
     const retrieveLogStatus = (materialUuid: string, status: string) => {
-        // console.log(`${materialUuid}, ${status}`);
+        echo.info(`${materialUuid}, ${status}`);
     }
 
     const createNewMaterial = useCallback((materialId: string, materialType: string, action: StorageAction) => {
@@ -100,7 +99,7 @@ export function useRetrieveHandler() {
             if (retrieval.isProcessing) return;
 
             const storageUnit = getStorageUnitById(
-                getModelUuidByActionUuid(selectedProduct.productId, retrieval.action.actionUuid) || ''
+                getModelUuidByActionUuid(selectedProduct.productId, retrieval.action.actionUuid) ?? ''
             );
 
             if (!storageUnit || storageUnit.currentLoad <= 0) {
@@ -124,7 +123,7 @@ export function useRetrieveHandler() {
 
             if (triggeredModel.type === 'roboticArm') {
                 const armBot = getArmBotById(triggeredModel.modelUuid);
-                isIdle = armBot && !armBot.isActive && armBot.state === 'idle' && !armBot.currentAction || false;
+                isIdle = (armBot && !armBot.isActive && armBot.state === 'idle' && !armBot.currentAction) || false;
 
                 if (isIdle) {
                     setActiveRetrievals(prev => {
@@ -148,10 +147,11 @@ export function useRetrieveHandler() {
                         if (material) {
                             addCurrentAction(
                                 triggeredModel.modelUuid,
-                                retrieval.action.triggers[0].triggeredAsset.triggeredAction?.actionUuid || '',
+                                retrieval.action.triggers[0].triggeredAsset.triggeredAction?.actionUuid ?? '',
                                 material.materialType,
                                 material.materialId
                             );
+                            retrieveLogStatus(material.materialName, `is being picked by ${armBot?.modelName}`);
                         }
                     }
 
@@ -168,10 +168,10 @@ export function useRetrieveHandler() {
 
             } else if (triggeredModel.type === 'vehicle') {
                 const vehicle = getVehicleById(triggeredModel.modelUuid);
-                isIdle = vehicle && !vehicle.isActive && vehicle.state === 'idle' && vehicle.isPicking || false;
+                isIdle = (vehicle && !vehicle.isActive && vehicle.state === 'idle' && vehicle.isPicking) || false;
 
                 if (!vehicle) return;
-                const loadDuration = vehicle.point.action.unLoadDuration;
+                // const loadDuration = vehicle.point.action.unLoadDuration;
 
                 if (isIdle) {
                     setActiveRetrievals(prev => {
@@ -198,6 +198,7 @@ export function useRetrieveHandler() {
                                 updateCurrentLoad(storageUnit.modelUuid, -1)
                                 incrementVehicleLoad(vehicle.modelUuid, 1);
                                 addCurrentMaterial(vehicle.modelUuid, material.materialType, material.materialId);
+                                retrieveLogStatus(material.materialName, `is picked by ${vehicle.modelName}`);
                             }
                         }
                     }
diff --git a/app/src/modules/simulation/actions/storageUnit/actionHandler/useStoreHandler.ts b/app/src/modules/simulation/actions/storageUnit/actionHandler/useStoreHandler.ts
index 0ceb1dc..beb3d79 100644
--- a/app/src/modules/simulation/actions/storageUnit/actionHandler/useStoreHandler.ts
+++ b/app/src/modules/simulation/actions/storageUnit/actionHandler/useStoreHandler.ts
@@ -11,7 +11,7 @@ export function useStoreHandler() {
     const { selectedProduct } = useSelectedProduct();
 
     const storeLogStatus = (materialUuid: string, status: string) => {
-        // console.log(`${materialUuid}, ${status}`);
+        echo.info(`${materialUuid}, ${status}`);
     }
 
     const handleStore = useCallback((action: StorageAction, materialId?: string) => {
diff --git a/app/src/modules/simulation/actions/vehicle/actionHandler/useTravelHandler.ts b/app/src/modules/simulation/actions/vehicle/actionHandler/useTravelHandler.ts
index c77b518..af7793c 100644
--- a/app/src/modules/simulation/actions/vehicle/actionHandler/useTravelHandler.ts
+++ b/app/src/modules/simulation/actions/vehicle/actionHandler/useTravelHandler.ts
@@ -11,7 +11,7 @@ export function useTravelHandler() {
     const { incrementVehicleLoad, addCurrentMaterial } = useVehicleStore();
 
     const travelLogStatus = (materialUuid: string, status: string) => {
-        // console.log(`${materialUuid}, ${status}`);
+        echo.info(`${materialUuid}, ${status}`);
     }
 
     const handleTravel = useCallback((action: VehicleAction, materialId?: string) => {
@@ -29,7 +29,7 @@ export function useTravelHandler() {
 
         travelLogStatus(material.materialId, `is triggering travel from ${modelUuid}`);
 
-    }, [getMaterialById, getModelUuidByActionUuid]);
+    }, [addCurrentMaterial, getMaterialById, getModelUuidByActionUuid, incrementVehicleLoad, selectedProduct.productId]);
 
     return {
         handleTravel,
diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx
index 8a432cf..04d5854 100644
--- a/app/src/pages/Project.tsx
+++ b/app/src/pages/Project.tsx
@@ -58,7 +58,7 @@ const Project: React.FC = () => {
         setOrganization(Organization);
         setUserName(name);
       }
-      echo.warn("Log in successful");
+      echo.success("Log in successful");
     } else {
       navigate("/");
     }
diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss
index 31ed4a6..4d321d4 100644
--- a/app/src/styles/layout/sidebar.scss
+++ b/app/src/styles/layout/sidebar.scss
@@ -789,6 +789,7 @@
       @include flex-space-between;
       padding: 6px 12px;
       padding-right: 6px;
+      text-transform: capitalize;
 
       .add-button {
         @include flex-center;