Added route from pagespeed to monitor

Client/src/App.jsx

@@ -95,7 +95,7 @@ function App() {
             element={<ProtectedRoute Component={CreatePageSpeed} />}
           />
           <Route
-            path="page-speed/:monitorId"
+            path="pagespeed/:monitorId"
             element={<ProtectedRoute Component={PageSpeedDetails} />}
           />
         </Route>

Client/src/Pages/PageSpeed/Details/index.jsx

@@ -1,13 +1,15 @@
 import { Box, Stack, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
 import { useTheme } from "@emotion/react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
+import { useSelector } from "react-redux";
+import axiosInstance from "../../../Utils/axiosConfig";
 import Button from "../../../Components/Button";
 import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import SettingsIcon from "../../../assets/icons/settings.svg?react";
 import LastCheckedIcon from "../../../assets/icons/calendar-check.svg?react";
 import ClockIcon from "../../../assets/icons/maintenance.svg?react";
 import IntervalCheckIcon from "../../../assets/icons/interval-check.svg?react";
-import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
 import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
 import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
 
@@ -38,6 +40,27 @@ const StatBox = ({ icon, title, value }) => {
 const PageSpeedDetails = () => {
   const theme = useTheme();
   const navigate = useNavigate();
+  const [monitor, setMonitor] = useState({});
+  const { monitorId } = useParams();
+  const { authToken } = useSelector((state) => state.auth);
+
+  useEffect(() => {
+    const fetchMonitor = async () => {
+      const res = await axiosInstance.get(
+        `/monitors/${monitorId}?sortOrder=asc`,
+        {
+          headers: {
+            Authorization: `Bearer ${authToken}`,
+          },
+        }
+      );
+      setMonitor(res.data.data);
+    };
+
+    fetchMonitor();
+  }, []);
+
+  console.log(monitor);
 
   const data = {
     _id: "66ad34001d483d284550e8cb",

Client/src/Pages/PageSpeed/index.jsx

@@ -13,6 +13,7 @@ import { useNavigate } from "react-router";
 
 const Card = ({ data }) => {
   const theme = useTheme();
+  const navigate = useNavigate();
 
   /**
    * Helper function to get duration since last check or the last date checked
@@ -33,8 +34,19 @@ const Card = ({ data }) => {
   };
 
   return (
-    <Grid item lg={6} flexGrow={1}>
-      <Stack direction="row" gap={theme.gap.medium} p={theme.gap.ml}>
+    <Grid
+      item
+      lg={6}
+      flexGrow={1}
+      sx={{ "&:hover > .MuiStack-root": { backgroundColor: "#f9fafb" } }}
+    >
+      <Stack
+        direction="row"
+        gap={theme.gap.medium}
+        p={theme.gap.ml}
+        onClick={() => navigate(`/pagespeed/${data._id}`)}
+        sx={{ cursor: "pointer" }}
+      >
         <PageSpeedIcon style={{ width: theme.gap.ml, height: theme.gap.ml }} />
         <Box flex={1}>
           <Stack direction="row" justifyContent="space-between">