feat: add the buttons for next, reset phase and reset experiment

ref: N25B-400

src/pages/MonitoringPage/MonitoringPage.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styles from './MonitoringPage.module.css';
 import useProgramStore from "../../utils/programStore.ts";
 import { GestureControls, SpeechPresets, DirectSpeechInput, StatusList } from './Components';
-import { nextPhase } from ".//MonitoringPageAPI.ts"
+import { nextPhase, resetExperiment, resetPhase } from ".//MonitoringPageAPI.ts"
 
 type Goal = { id?: string | number; description?: string; achieved?: boolean };
 type Trigger = { id?: string | number; label?: string ; achieved?: boolean };
@@ -32,18 +32,28 @@ const MonitoringPage: React.FC = () => {
   const norms = getNormsInPhase(phaseId) as Norm[];
 
   // Handle logic of 'next' button.
-  const handleNext = async () => {
+
+  const handleButton = async (button: string, _context?: string, _endpoint?: string) => {
     try {
       setLoading(true);
-      await nextPhase();
+      switch (button)  {
+        case "nextPhase":
+          await nextPhase();
+          break;
+        case "resetPhase":
+          await resetPhase();
+          break;
+        case "resetExperiment":
+          await resetExperiment();
+          break;
+        default:
+      }
     } catch (err) {
-      console.log("Monitoring Page could not advance to the next phase:")
       console.error(err);
     } finally {
       setLoading(false);
     }
-  };
-  
+  }
   return (
     <div className={styles.dashboardContainer}>
       {/* HEADER */}
@@ -66,13 +76,25 @@ const MonitoringPage: React.FC = () => {
             <button className={styles.pause}>▶</button>
             <button
               className={styles.next}
-              onClick={handleNext}
+              onClick={() => handleButton("nextPhase")}
               disabled={loading}
             >
               ⏭
             </button>
-            <button className={styles.restartPhase}>↩</button>
-            <button className={styles.restartExperiment}>⟲</button>
+            <button 
+              className={styles.restartPhase}
+              onClick={() => handleButton("resetPhase")}
+              disabled={loading}
+            >
+              ↩
+            </button>
+            <button 
+              className={styles.restartExperiment}
+              onClick={() => handleButton("resetExperiment")}
+              disabled={loading}
+              >
+                ⟲
+              </button>
           </div>
         </div>