hook up header

client/src/Pages/PageSpeed/Details/index.tsx

@@ -1,4 +1,5 @@
 import { BasePage } from "@/Components/design-elements";
+import { HeaderTimeRange } from "@/Components/common";
 import type { PageSpeedDetailsResponse } from "@/Types/Monitor";
 import Stack from "@mui/material/Stack";
 import {
@@ -13,18 +14,30 @@ import { useIsAdmin } from "@/Hooks/useIsAdmin";
 import { useGet } from "@/Hooks/UseApi";
 import { useParams } from "react-router-dom";
 import { useTheme } from "@mui/material";
+import { useState, useMemo } from "react";
 
 const PageSpeedDetails = () => {
 	const { monitorId } = useParams();
 	const isAdmin = useIsAdmin();
 	const theme = useTheme();
+	const [dateRange, setDateRange] = useState<string>("day");
+
+	const monitorDetailsUrl = useMemo(() => {
+		if (!monitorId) {
+			return null;
+		}
+		const params = new URLSearchParams();
+		params.append("dateRange", dateRange);
+		return `/monitors/pagespeed/details/${monitorId}?${params.toString()}`;
+	}, [monitorId, dateRange]);
+
 	const {
 		data: monitorData,
 		isLoading,
 		error,
 		refetch,
 	} = useGet<PageSpeedDetailsResponse>(
-		monitorId ? `/monitors/pagespeed/details/${monitorId}?dateRange=day` : null,
+		monitorDetailsUrl,
 		{},
 		{ keepPreviousData: true, refreshInterval: 30000 }
 	);
@@ -47,9 +60,15 @@ const PageSpeedDetails = () => {
 				monitor={monitor}
 				monitorStats={monitorStats}
 			/>
+			<HeaderTimeRange
+				isLoading={isLoading}
+				hasDateRange={true}
+				dateRange={dateRange}
+				setDateRange={setDateRange}
+			/>
 			<HistogramPageSpeedDetails
 				checks={monitor?.recentChecks || []}
-				range="day"
+				range={dateRange}
 			/>
 			<Stack
 				direction={{ xs: "column", md: "row" }}