feat: added a skeleton for the monitoringpage.

ref: N25B-398

src/pages/MonitoringPage/MonitoringPage.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import styles from './MonitoringPage.module.css'
+
+export default function ExperimentDashboard() {
+  return (
+    <div className="dashboard-container">
+      <header className="experiment-overview">
+        <div className="phase-name">
+          <h2>Experiment Overview</h2>
+          <p><strong>Phase name:</strong> Rhyming fish</p>
+          <div className="phase-progress">
+            <span className="phase active">1</span>
+            <span className="phase active">2</span>
+            <span className="phase current">3</span>
+            <span className="phase">4</span>
+            <span className="phase">5</span>
+          </div>
+        </div>
+
+        <div className="experiment-controls">
+          <h3>Experiment Controls</h3>
+          <div className="controls-buttons">
+            <button className="play">▶️</button>
+            <button className="pause">⏸️</button>
+            <button className="restart">🔁</button>
+            <button className="stop">⏹️</button>
+          </div>
+        </div>
+
+        <div className="connection-status">
+          <h3>Connection:</h3>
+          <p className="connected">● Robot is connected</p>
+        </div>
+      </header>
+
+      <main className="phase-overview">
+        <section>
+          <h3>Goals</h3>
+          <ul>
+            <li className="checked">Convince the RP that you are a fish</li>
+            <li>Reference Shakespeare</li>
+            <li>Give a compliment</li>
+          </ul>
+        </section>
+
+        <section>
+          <h3>Triggers</h3>
+          <ul>
+            <li className="checked">Convince the RP that you are a fish</li>
+            <li>Reference Shakespeare</li>
+            <li>Give a compliment</li>
+          </ul>
+        </section>
+
+        <section>
+          <h3>Norms</h3>
+          <ul>
+            <li>Rhyme when talking</li>
+            <li>Talk like a fish</li>
+          </ul>
+        </section>
+
+        <section>
+          <h3>Conditional Norms</h3>
+          <ul>
+            <li>“RP is sad” - Be nice</li>
+          </ul>
+        </section>
+      </main>
+
+      <aside className="logs">
+        <h3>Logs</h3>
+        <div className="log-header">
+          <span>Global:</span>
+          <button>ALL</button>
+          <button>Add</button>
+          <button className="live">Live</button>
+        </div>
+        <textarea defaultValue="Example Log: much log"></textarea>
+      </aside>
+
+      <footer className="controls-section">
+        <div className="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="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="direct-speech">
+          <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="speech-input">
+            <input type="text" placeholder="Type message..." />
+            <button>Send</button>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}