Added Plan My Path button and moved Close to upper-left of popoutpanel

src/components/PopoutPanel.css

@@ -22,6 +22,12 @@
   display: block;
 }
 
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
 
 /* Mobile responsiveness */
 @media (max-width: 768px) {
@@ -39,9 +45,6 @@
 
 /* Close button adjustments for mobile */
 .close-btn {
-  position: absolute;
-  top: 10px;
-  right: 15px;
   background-color: #dc3545;
   color: #fff;
   border: none;
@@ -51,6 +54,17 @@
   z-index: 1001; /* Keep button above the panel */
 }
 
+.plan-path-btn {
+  background-color: #4A90E2;
+  color: white;
+  border: none;
+  padding: 10px 15px;
+  cursor: pointer;
+  font-size: 16px;
+  border-radius: 5px;
+  text-align: center;
+}
+
 /* Job Description and Expected Tasks section */
 .section {
   margin-bottom: 20px;

src/components/PopoutPanel.js

@@ -87,9 +87,14 @@ function PopoutPanel({
 
   return (
     <div className="popout-panel">
-      <button onClick={handleClosePanel}>Close</button>
+      {/* Header with Close & Plan My Path Buttons */}
-      <h2>{title}</h2>
+      <div className="panel-header">
+        <button className="close-btn" onClick={closePanel}>X</button>
+        <button className="plan-path-btn">Plan My Path</button>
+      </div>
 
+      <h2>{title}</h2>
+      
       {/* Job Description and Tasks */}
       <div className="job-description">
         <h3>Job Description</h3>