Fix request ID duplication, correct spelling in comments, and enhance status display with color coding in the Request Management component

Add   modal & dismissableMask props to Dialog in RequestManagement.jsx to ensure Dialog/Modal closes when the user clicks outside.

src/components/qs2/RequestManagement.jsx

@@ -27,7 +27,7 @@ const initialRequests = [
     },
   },
   {
-    id: 3,
+    id: 2,
     type: "Track",
     artist: "We Butter The Bread With Butter",
     album: "Das Album",
@@ -49,7 +49,7 @@ const initialRequests = [
     details: {
       requestedBy: "codey",
       timestamp: "2025-06-11T09:00:00Z",
-      comments: "Track retrieved succesfully.",
+      comments: "Track retrieved successfully.",
     },
   },
 ];
@@ -75,6 +75,20 @@ export default function RequestManagement() {
     setFilteredRequests(filtered);
   }, [filterType, filterStatus, requests]);
 
+  const getStatusTextColor = (status) => {
+    switch (status) {
+      case "Pending":
+        return "text-yellow-500";
+      case "Completed":
+        return "text-green-500";
+      case "Failed":
+        return "text-red-500";
+      default:
+        return "text-neutral-500";
+    }
+  };
+
+
   const confirmDelete = (requestId) => {
     console.log("WHOAA");
     confirmDialog({
@@ -436,6 +450,8 @@ export default function RequestManagement() {
         style={{ width: "500px" }}
         onHide={() => setIsDialogVisible(false)}
         breakpoints={{ '960px': '95vw' }}
+        modal
+        dismissableMask
       >
         {selectedRequest && (
           <div className="space-y-4 text-sm">
@@ -444,7 +460,21 @@ export default function RequestManagement() {
             <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>
+            <p className="text-sm flex items-center gap-2">
+              <span className="font-semibold">Status:</span>
+              <span
+                className={`px-2 py-0.5 rounded-full text-xs font-bold ${selectedRequest.status === "Pending"
+                  ? "bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100"
+                  : selectedRequest.status === "Completed"
+                    ? "bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100"
+                    : "bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100"
+                  }`}
+              >
+                {selectedRequest.status}
+              </span>
+            </p>
+
+
             {selectedRequest.details && (
               <>
                 <p><strong>Requested By:</strong> {selectedRequest.details.requestedBy}</p>