feat: added and changed the monitoringpage a lot

ref: N25B-398

src/App.tsx

@@ -7,6 +7,7 @@ import ConnectedRobots from './pages/ConnectedRobots/ConnectedRobots.tsx'
 import VisProg from "./pages/VisProgPage/VisProg.tsx";
 import {useState} from "react";
 import Logging from "./components/Logging/Logging.tsx";
+import MonitoringPage from './pages/MonitoringPage/MonitoringPage.tsx'
 
 function App(){
   const [showLogs, setShowLogs] = useState(false);
@@ -25,6 +26,7 @@ function App(){
             <Route path="/editor" element={<VisProg />} />
             <Route path="/robot" element={<Robot />} />
             <Route path="/ConnectedRobots" element={<ConnectedRobots />} />
+            <Route path="/MonitoringPage" element={<MonitoringPage />} />
         </Routes>
         </main>
         {showLogs && <Logging />}

src/pages/Home/Home.tsx

@@ -23,6 +23,7 @@ function Home() {
         <Link to={"/editor"}>Editor →</Link>
         <Link to={"/template"}>Template →</Link>
         <Link to={"/ConnectedRobots"}>Connected Robots →</Link>
+        <Link to={"/MonitoringPage"}>MonitoringPage →</Link>
       </div>
     </div>
   )

src/pages/MonitoringPage/MonitoringPage.module.css

@@ -0,0 +1,175 @@
+.dashboardContainer {
+  display: grid;
+  grid-template-columns: 2fr 1fr; /* Left = content, Right = logs */
+  grid-template-rows: auto 1fr auto; /* Header, Main, Footer */
+  grid-template-areas:
+    "header logs"
+    "main logs"
+    "footer footer";
+  gap: 1rem;
+  padding: 1rem;
+  background-color: #f5f5f5;
+  font-family: Arial, sans-serif;
+}
+
+/* HEADER */
+.experimentOverview {
+  grid-area: header;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  background: #fff;
+  padding: 1rem;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  position: static; /* ensures it scrolls away */
+}
+
+.phaseProgress {
+  margin-top: 0.5rem;
+}
+
+.phase {
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  margin: 0 3px;
+  text-align: center;
+  line-height: 25px;
+  background: #ccc;
+}
+
+.completed {
+  background-color: #5cb85c;
+  color: white;
+}
+
+.current {
+  background-color: #f0ad4e;
+  color: white;
+}
+
+.connected {
+  color: green;
+  font-weight: bold;
+}
+
+.pause{
+  background-color: green;
+}
+
+.next {
+  background-color: #ccc;
+}
+
+.restartPhase{
+  background-color: rgb(255, 123, 0);
+}
+
+.restartExperiment{
+  background-color: red;
+}
+
+/* MAIN GRID */
+.phaseOverview {
+  grid-area: main;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, auto);
+  gap: 1rem;
+  background: #fff;
+  padding: 1rem;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.phaseBox {
+  background: #f9f9f9;
+  border: 1px solid #ddd;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.05);
+}
+
+.phaseOverviewText {
+  grid-column: 1 / -1; /* make the title span across both columns */
+  font-size: 1.4rem;
+  font-weight: 600;
+  margin: 0;            /* remove default section margin */
+  padding: 0.25rem 0;   /* smaller internal space */
+}
+
+.phaseOverviewText h3{
+  margin: 0;            /* removes top/bottom whitespace */
+  padding: 0;           /* keeps spacing tight */
+}
+
+.phaseBox h3 {
+  margin-top: 0;
+  border-bottom: 1px solid #ddd;
+  padding-bottom: 0.4rem;
+}
+
+.checked::before {
+  content: '✔️ ';
+}
+
+/* LOGS */
+.logs {
+  grid-area: logs;
+  background: #fff;
+  padding: 1rem;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.logs textarea {
+  width: 100%;
+  height: 200px;
+  margin-top: 0.5rem;
+}
+
+/* FOOTER */
+.controlsSection {
+  grid-area: footer;
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  background: #fff;
+  padding: 1rem;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.gestures,
+.speech,
+.directSpeech {
+  flex: 1;
+}
+
+.speechInput {
+  display: flex;
+  margin-top: 0.5rem;
+}
+
+.speechInput input {
+  flex: 1;
+  padding: 0.5rem;
+  border: 1px solid #ccc;
+}
+
+.speechInput button {
+  background: #007bff;
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+}
+
+/* RESPONSIVE */
+@media (max-width: 900px) {
+  .phaseOverview {
+    grid-template-columns: 1fr;
+  }
+
+  .controlsSection {
+    flex-direction: column;
+  }
+}

src/pages/MonitoringPage/MonitoringPage.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import styles from './MonitoringPage.module.css';
+
+export default function MonitoringPage() {
+  return (
+    <div className={styles.dashboardContainer}>
+      {/* HEADER */}
+      <header className={styles.experimentOverview}>
+        <div className={styles.phaseName}>
+          <h2>Experiment Overview</h2>
+          <p><strong>Phase name:</strong> Rhyming fish</p>
+          <div className={styles.phaseProgress}>
+            <span className={`${styles.phase} ${styles.completed}`}>1</span>
+            <span className={`${styles.phase} ${styles.completed}`}>2</span>
+            <span className={`${styles.phase} ${styles.current}`}>3</span>
+            <span className={styles.phase}>4</span>
+            <span className={styles.phase}>5</span>
+          </div>
+        </div>
+
+        <div className={styles.experimentControls}>
+          <h3>Experiment Controls</h3>
+          <div className={styles.controlsButtons}>
+            <button className={styles.pause}>▶</button>
+            <button className={styles.next}>⏭</button>
+            <button className={styles.restartPhase}>↩</button>
+            <button className={styles.restartExperiment}>⟲</button>
+          </div>
+        </div>
+
+        <div className={styles.connectionStatus}>
+          <h3>Connection:</h3>
+          <p className={styles.connected}>● Robot is connected</p>
+        </div>
+      </header>
+
+      {/* MAIN GRID */}
+      
+      <main className={styles.phaseOverview}>
+        <section className={styles.phaseOverviewText}>
+          <h3>Phase Overview</h3>
+        </section>
+
+        <section className={styles.phaseBox}>
+          <h3>Goals</h3>
+          <ul>
+            <li className={styles.checked}>Convince the RP that you are a fish</li>
+            <li>Reference Shakespeare</li>
+            <li>Give a compliment</li>
+          </ul>
+        </section>
+
+        <section className={styles.phaseBox}>
+          <h3>Triggers</h3>
+          <ul>
+            <li className={styles.checked}>Convince the RP that you are a fish</li>
+            <li>Reference Shakespeare</li>
+            <li>Give a compliment</li>
+          </ul>
+        </section>
+
+        <section className={styles.phaseBox}>
+          <h3>Norms</h3>
+          <ul>
+            <li>Rhyme when talking</li>
+            <li>Talk like a fish</li>
+          </ul>
+        </section>
+
+        <section className={styles.phaseBox}>
+          <h3>Conditional Norms</h3>
+          <ul>
+            <li>“RP is sad” - Be nice</li>
+          </ul>
+        </section>
+      </main>
+
+      {/* LOGS */}
+      <aside className={styles.logs}>
+        <h3>Logs</h3>
+        <div className={styles.logHeader}>
+          <span>Global:</span>
+          <button>ALL</button>
+          <button>Add</button>
+          <button className={styles.live}>Live</button>
+        </div>
+        <textarea defaultValue="Example Log: much log"></textarea>
+      </aside>
+
+      {/* FOOTER */}
+      <footer className={styles.controlsSection}>
+        <div className={styles.gestures}>
+          <h4>Controls</h4>
+          <ul>
+            <li>Gesture: Wave Left Hand</li>
+            <li>Gesture: Wave Right Hand</li>
+            <li>Gesture: Left Thumbs Up</li>
+            <li>Gesture: Right Thumbs Up</li>
+          </ul>
+        </div>
+
+        <div className={styles.speech}>
+          <h4>Speech Options</h4>
+          <ul>
+            <li>\"Hello, my name is pepper.\"</li>
+            <li>\"How is the weather today?\"</li>
+            <li>\"I like your outfit, very pretty.\"</li>
+            <li>\"How is your day going?\"</li>
+          </ul>
+        </div>
+
+        <div className={styles.directSpeech}>
+          <h4>Direct Pepper Speech</h4>
+          <ul>
+            <li>[time] Send: *Previous message*</li>
+            <li>[time] Send: *Previous message*</li>
+            <li>[time] Send: *Previous message*</li>
+          </ul>
+          <div className={styles.speechInput}>
+            <input type="text" placeholder="Type message..." />
+            <button>Send</button>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}