extract subcomponents

Client/src/Pages/DistributedUptime/Details/Components/DistributedUptimeResponseChart/index.jsx

@@ -8,6 +8,8 @@ import {
 	ResponsiveContainer,
 	Text,
 } from "recharts";
+import ChartBox from "../../../../../Components/Charts/ChartBox";
+import ResponseTimeIcon from "../../../../../assets/icons/response-time-icon.svg?react";
 import { Box, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { useState } from "react";
@@ -22,67 +24,73 @@ const CustomToolTip = ({ active, payload, label }) => {
 			? payload[0]?.payload?.originalAvgResponseTime
 			: (payload[0]?.payload?.avgResponseTime ?? 0);
 		return (
-			<Box
-				className="area-tooltip"
-				sx={{
-					backgroundColor: theme.palette.background.main,
-					border: 1,
-					borderColor: theme.palette.primary.lowContrast,
-					borderRadius: theme.shape.borderRadius,
-					py: theme.spacing(2),
-					px: theme.spacing(4),
-				}}
+			<ChartBox
+				icon={<ResponseTimeIcon />}
+				header="Response Times"
+				sx={{ padding: 0 }}
 			>
-				<Typography
+				<Box
+					className="area-tooltip"
 					sx={{
-						color: theme.palette.text.tertiary,
-						fontSize: 12,
-						fontWeight: 500,
+						backgroundColor: theme.palette.background.main,
+						border: 1,
+						borderColor: theme.palette.primary.lowContrast,
+						borderRadius: theme.shape.borderRadius,
+						py: theme.spacing(2),
+						px: theme.spacing(4),
 					}}
 				>
-					{formatDateWithTz(label, "ddd, MMMM D, YYYY, h:mm A", uiTimezone)}
-				</Typography>
-				<Box mt={theme.spacing(1)}>
-					<Box
-						display="inline-block"
-						width={theme.spacing(4)}
-						height={theme.spacing(4)}
-						backgroundColor={theme.palette.primary.main}
-						sx={{ borderRadius: "50%" }}
-					/>
-					<Stack
-						display="inline-flex"
-						direction="row"
-						justifyContent="space-between"
-						ml={theme.spacing(3)}
+					<Typography
 						sx={{
-							"& span": {
-								color: theme.palette.text.tertiary,
-								fontSize: 11,
-								fontWeight: 500,
-							},
+							color: theme.palette.text.tertiary,
+							fontSize: 12,
+							fontWeight: 500,
 						}}
 					>
-						<Typography
-							component="span"
-							sx={{ opacity: 0.8 }}
+						{formatDateWithTz(label, "ddd, MMMM D, YYYY, h:mm A", uiTimezone)}
+					</Typography>
+					<Box mt={theme.spacing(1)}>
+						<Box
+							display="inline-block"
+							width={theme.spacing(4)}
+							height={theme.spacing(4)}
+							backgroundColor={theme.palette.primary.main}
+							sx={{ borderRadius: "50%" }}
+						/>
+						<Stack
+							display="inline-flex"
+							direction="row"
+							justifyContent="space-between"
+							ml={theme.spacing(3)}
+							sx={{
+								"& span": {
+									color: theme.palette.text.tertiary,
+									fontSize: 11,
+									fontWeight: 500,
+								},
+							}}
 						>
-							Response Time
-						</Typography>{" "}
-						<Typography component="span">
-							{Math.floor(responseTime)}
 							<Typography
 								component="span"
 								sx={{ opacity: 0.8 }}
 							>
-								{" "}
-								ms
+								Response Time
+							</Typography>{" "}
+							<Typography component="span">
+								{Math.floor(responseTime)}
+								<Typography
+									component="span"
+									sx={{ opacity: 0.8 }}
+								>
+									{" "}
+									ms
+								</Typography>
 							</Typography>
-						</Typography>
-					</Stack>
+						</Stack>
+					</Box>
+					{/* Display original value */}
 				</Box>
-				{/* Display original value */}
-			</Box>
+			</ChartBox>
 		);
 	}
 	return null;

Client/src/Pages/DistributedUptime/Details/Components/MonitorHeader/index.jsx

@@ -0,0 +1,23 @@
+import { Stack, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import PropTypes from "prop-types";
+
+const MonitorHeader = ({ monitor }) => {
+	const theme = useTheme();
+	return (
+		<Stack direction="row">
+			<Stack gap={theme.spacing(2)}>
+				<Typography variant="h1">{monitor.name}</Typography>
+				<Typography variant="h2">
+					Distributed Uptime Monitoring powered by DePIN
+				</Typography>
+			</Stack>
+		</Stack>
+	);
+};
+
+MonitorHeader.propTypes = {
+	monitor: PropTypes.object,
+};
+
+export default MonitorHeader;

Client/src/Pages/DistributedUptime/Details/Components/StatBoxes/index.jsx

@@ -0,0 +1,62 @@
+// Components
+import { Stack } from "@mui/material";
+import StatBox from "../../../../../Components/StatBox";
+import LastUpdate from "../LastUpdate";
+import UptLogo from "../../../../../assets/icons/upt_logo.png";
+
+// Utils
+import { useTheme } from "@mui/material/styles";
+import PropTypes from "prop-types";
+
+const StatBoxes = ({ monitor, lastUpdateTrigger }) => {
+	const theme = useTheme();
+
+	return (
+		<Stack
+			direction="row"
+			gap={theme.spacing(8)}
+		>
+			<StatBox
+				heading="Avg Response Time"
+				subHeading={`${Math.floor(monitor?.avgResponseTime ?? 0)} ms`}
+			/>
+			<StatBox
+				heading="Checking every"
+				subHeading={`${(monitor?.interval ?? 0) / 1000} seconds`}
+			/>
+			<StatBox
+				heading={"Last check"}
+				subHeading={
+					<LastUpdate
+						lastUpdateTime={monitor?.timeSinceLastCheck ?? 0}
+						suffix={"seconds ago"}
+					/>
+				}
+			/>
+			<StatBox
+				heading="Last server push"
+				subHeading={
+					<LastUpdate
+						suffix={"seconds ago"}
+						lastUpdateTime={0}
+						trigger={lastUpdateTrigger}
+					/>
+				}
+			/>
+
+			<StatBox
+				heading="UPT Burned"
+				subHeading={monitor?.totalUptBurnt ?? 0}
+				img={UptLogo}
+				alt="Upt Logo"
+			/>
+		</Stack>
+	);
+};
+
+StatBoxes.propTypes = {
+	monitor: PropTypes.object,
+	lastUpdateTrigger: PropTypes.number,
+};
+
+export default StatBoxes;