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>
 

src/pages/MonitoringPage/MonitoringPageAPI.ts

@@ -1,4 +1,23 @@
-const API_BASE = "http://localhost:8000/"; // Change depending on Pims interup agent/ correct endpoint
+const API_BASE = "http://localhost:8000/button_pressed"; // Change depending on Pims interup agent/ correct endpoint
+
+
+/**
+ * HELPER: Unified sender function
+ * In a real app, you might move this to a /services or /hooks folder
+ */
+const sendAPICall = async (type: string, context: string, endpoint?: string) => {
+  try {
+    const response = await fetch(`${API_BASE}${endpoint ?? ""}`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ type, context }),
+    });
+    if (!response.ok) throw new Error("Backend response error");
+    console.log(`API Call send - Type: ${type}, Context: ${context} ${endpoint ? `, Endpoint: ${endpoint}` : ""}`);
+  } catch (err) {
+    console.error(`Failed to send api call:`, err);
+  }
+};
 
 
 /**
@@ -6,14 +25,28 @@ const API_BASE = "http://localhost:8000/"; // Change depending on Pims interup a
  * In case we can't go to the next phase, the function will throw an error.
  */
 export async function nextPhase(): Promise<void> {
-  const res = await fetch(`${API_BASE}/experiment/next`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-  });
+  const type = "next_phase"
+  const context = ""
+  sendAPICall(type, context)
+}
 
-  if (!res.ok) {
-    throw new Error("Failed to advance to next phase");
-  }
-}
+
+/**
+ * Sends an API call to the CB for going to reset the currect phase 
+ * In case we can't go to the next phase, the function will throw an error.
+ */
+export async function resetPhase(): Promise<void> {
+  const type = "reset_phase"
+  const context = ""
+  sendAPICall(type, context)
+}
+
+/**
+ * Sends an API call to the CB for going to reset the experiment
+ * In case we can't go to the next phase, the function will throw an error.
+ */
+export async function resetExperiment(): Promise<void> {
+  const type = "reset_experiment"
+  const context = ""
+  sendAPICall(type, context)
+}