feat: start with functionality

ref: N25B-400

src/pages/MonitoringPage/MonitoringPage.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styles from './MonitoringPage.module.css';
 import useProgramStore from "../../utils/programStore.ts";
+import { nextPhase } from ".//MonitoringPageAPI.ts"
 
 type Goal = { id?: string | number; description?: string; achieved?: boolean };
 type Trigger = { id?: string | number; label?: string ; achieved?: boolean };
@@ -13,6 +14,9 @@ const MonitoringPage: React.FC = () => {
   const getGoalsInPhase = useProgramStore((s) => s.getGoalsInPhase);
   const getTriggersInPhase = useProgramStore((s) => s.getTriggersInPhase);
 
+  // Can be used to block actions until feedback from CB.
+  const [loading, setLoading] = React.useState(false);
+
   const phaseIds = getPhaseIds();
   const [phaseIndex, setPhaseIndex] = React.useState(0);
 
@@ -26,6 +30,18 @@ const MonitoringPage: React.FC = () => {
   const triggers = getTriggersInPhase(phaseId) as Trigger[];
   const norms = getNormsInPhase(phaseId) as Norm[];
 
+  // Handle logic of 'next' button.
+  const handleNext = async () => {
+    try {
+      setLoading(true);
+      await nextPhase();
+    } catch (err) {
+      console.log("Monitoring Page could not advance to the next phase:")
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
   
   return (
     <div className={styles.dashboardContainer}>
@@ -47,7 +63,13 @@ const MonitoringPage: React.FC = () => {
           <h3>Experiment Controls</h3>
           <div className={styles.controlsButtons}>
             <button className={styles.pause}>▶</button>
-            <button className={styles.next}>⏭</button>
+            <button
+              className={styles.next}
+              onClick={handleNext}
+              disabled={loading}
+            >
+              ⏭
+            </button>
             <button className={styles.restartPhase}>↩</button>
             <button className={styles.restartExperiment}>⟲</button>
           </div>