feat: goals now update in UI

ref: N25B-400

src/pages/MonitoringPage/MonitoringPage.tsx

@@ -17,6 +17,7 @@ const MonitoringPage: React.FC = () => {
   // Can be used to block actions until feedback from CB.
   const [loading, setLoading] = React.useState(false);
   const [activeIds, setActiveIds] = React.useState<Record<string, boolean>>({});
+  const [goalIndex, setGoalIndex] = React.useState(0);
 
   const phaseIds = getPhaseIds();
   const [phaseIndex, setPhaseIndex] = React.useState(0);
@@ -29,11 +30,25 @@ const MonitoringPage: React.FC = () => {
       const newIndex = allIds.indexOf(data.phase_id);
       if (newIndex !== -1) {
         setPhaseIndex(newIndex);
+        setGoalIndex(0); //when phase change we reset the index
       }
     } 
-    
-    
-    else if (data.type === 'trigger_update' || data.type === 'goal_update') {
+    else if (data.type === 'goal_update') {
+    // We find which goal in the current phase matches this ID
+    const currentPhaseGoals = getGoalsInPhase(phaseIds[phaseIndex]);
+    const gIndex = currentPhaseGoals.findIndex((g: any) => g.id === data.id);
+    if (gIndex !== -1) {
+      setGoalIndex(gIndex);
+      console.log(`Goal index updated to ${gIndex} for goal ID ${data.id}`);
+    }
+
+      setActiveIds((prev) => ({
+        ...prev,
+        [data.id]: true
+      }));
+    }
+
+    else if (data.type === 'trigger_update') {
     setActiveIds((prev) => ({
       ...prev,
       [data.id]: data.achieved // data.id is de key, achieved is true/false