Fix breadcrumb navigation links and add request management dialog functionality (clicking row brings up modal w/ related details)

src/components/qs2/BreadcrumbNav.jsx

@@ -2,8 +2,8 @@ import React from "react";
 
 export default function BreadcrumbNav({ currentPage }) {
     const pages = [
-        { key: "request", label: "Request Media", href: "../" },
-        { key: "management", label: "Manage Requests", href: "requests" },
+        { key: "request", label: "Request Media", href: "/qs2" },
+        { key: "management", label: "Manage Requests", href: "/qs2/requests" },
     ];
 
     return (

src/components/qs2/RequestManagement.jsx

@@ -4,6 +4,7 @@ import { Column } from "primereact/column";
 import { Dropdown } from "primereact/dropdown";
 import { Button } from "@mui/joy";
 import { toast } from "react-toastify";
+import { Dialog } from "primereact/dialog";
 import { confirmDialog, ConfirmDialog } from "primereact/confirmdialog";
 import BreadcrumbNav from "./BreadcrumbNav";
 
@@ -19,14 +20,11 @@ const initialRequests = [
     album: "",
     track: "",
     status: "Pending",
-  },
-  {
-    id: 2,
-    type: "Album",
-    artist: "Pink Floyd",
-    album: "Dark Side of the Moon",
-    track: "",
-    status: "Completed",
+    details: {
+      requestedBy: "codey",
+      timestamp: "2025-07-01T12:00:00Z",
+      comments: "",
+    },
   },
   {
     id: 3,
@@ -35,22 +33,36 @@ const initialRequests = [
     album: "Das Album",
     track: "20 km/h",
     status: "Failed",
+    details: {
+      requestedBy: "codey",
+      timestamp: "2025-06-11T09:00:00Z",
+      comments: "Track not found in external database.",
+    },
   },
   {
-    id: 4,
+    id: 3,
     type: "Track",
-    artist: "Chappell Roan",
-    album: "Pink Pony Club",
-    track: "Pink Pony Club",
+    artist: "We Butter The Bread With Butter",
+    album: "Das Album",
+    track: "20 km/h",
     status: "Completed",
+    details: {
+      requestedBy: "codey",
+      timestamp: "2025-06-11T09:00:00Z",
+      comments: "Track retrieved succesfully.",
+    },
   },
 ];
 
+
 export default function RequestManagement() {
   const [requests, setRequests] = useState(initialRequests);
   const [filterType, setFilterType] = useState(null);
   const [filterStatus, setFilterStatus] = useState(null);
   const [filteredRequests, setFilteredRequests] = useState(initialRequests);
+  const [selectedRequest, setSelectedRequest] = useState(null);
+  const [isDialogVisible, setIsDialogVisible] = useState(false);
+
 
   useEffect(() => {
     let filtered = [...requests];
@@ -329,6 +341,32 @@ export default function RequestManagement() {
 [data-theme='dark'] .p-dialog-header-icon {
   color: #ccc;
 }
+  /* PrimeReact Dialog Theming */
+.p-dialog {
+  background-color: #ffffff;
+  color: #000000;
+}
+
+[data-theme="dark"] .p-dialog {
+  background-color: #1e1e1e;
+  color: #ffffff;
+}
+
+[data-theme="dark"] .p-dialog .p-dialog-header {
+  background-color: #1e1e1e;
+  border-bottom: 1px solid #444;
+}
+
+[data-theme="dark"] .p-dialog .p-dialog-content {
+  background-color: #2a2a2a;
+  color: #ffffff;
+}
+
+[data-theme="dark"] .p-dialog .p-dialog-footer {
+  background-color: #1e1e1e;
+  border-top: 1px solid #444;
+}
+
   
   `}</style>
       <BreadcrumbNav currentPage="management" />
@@ -368,6 +406,10 @@ export default function RequestManagement() {
         emptyMessage="No requests found."
         rowClassName="!py-4"
         className="min-w-full bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100"
+        onRowClick={(e) => {
+          setSelectedRequest(e.data);
+          setIsDialogVisible(true);
+        }}
       >
         <Column field="id" header="ID" sortable style={{ width: "5rem" }} />
         <Column field="type" header="Type" sortable />
@@ -388,6 +430,35 @@ export default function RequestManagement() {
         />
       </DataTable>
       <ConfirmDialog />
+      <Dialog
+        header="Request Details"
+        visible={isDialogVisible}
+        style={{ width: "500px" }}
+        onHide={() => setIsDialogVisible(false)}
+        breakpoints={{ '960px': '95vw' }}
+      >
+        {selectedRequest && (
+          <div className="space-y-4 text-sm">
+            <p><strong>ID:</strong> {selectedRequest.id}</p>
+            <p><strong>Type:</strong> {selectedRequest.type}</p>
+            <p><strong>Artist:</strong> {selectedRequest.artist}</p>
+            {selectedRequest.album && <p><strong>Album:</strong> {selectedRequest.album}</p>}
+            {selectedRequest.track && <p><strong>Track:</strong> {selectedRequest.track}</p>}
+            <p><strong>Status:</strong> {selectedRequest.status}</p>
+            {selectedRequest.details && (
+              <>
+                <p><strong>Requested By:</strong> {selectedRequest.details.requestedBy}</p>
+                <p><strong>Timestamp:</strong> {new Date(selectedRequest.details.timestamp).toLocaleString()}</p>
+                {selectedRequest.details.comments && (
+                  <p><strong>Comments:</strong> {selectedRequest.details.comments}</p>
+                )}
+              </>
+            )}
+          </div>
+        )}
+      </Dialog>
+
+
     </div>
   );
 }