fix: refactoring changes and removing unnecessary changes

client/src/Pages/StatusPage/Status/Components/PageSpeedMetrics.tsx

@@ -4,7 +4,6 @@ import { useTheme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
 import type { Monitor } from "@/Types/Monitor";
 import Grid from "@mui/material/Grid";
-import useMediaQuery from "@mui/material/useMediaQuery";
 import Box from "@mui/material/Box";
 import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
 import { getPageSpeedGaugeColor } from "@/Utils/MonitorUtils";
@@ -24,10 +23,9 @@ interface MetricConfig {
 
 const MetricItem = ({ label, progress }: MetricConfig) => {
 	const theme = useTheme();
-	const isSmall = useMediaQuery(theme.breakpoints.down("sm"));
 	return (
 		<Grid
-			size={isSmall ? 12 : 3}
+			size={{ xs: 12, md: 3 }}
 			sx={{
 				display: "flex",
 				flexDirection: "column",
@@ -35,8 +33,8 @@ const MetricItem = ({ label, progress }: MetricConfig) => {
 				textAlign: "center",
 				gap: theme.spacing(SPACING.LG),
 				padding: theme.spacing(LAYOUT.XS),
-				borderRight: isSmall ? "none" : `1px solid ${theme.palette.divider}`,
-				borderBottom: isSmall ? `1px solid ${theme.palette.divider}` : "none",
+				borderRight: { xs: "none", md: `1px solid ${theme.palette.divider}` },
+				borderBottom: { xs: `1px solid ${theme.palette.divider}`, md: "none" },
 				"&:last-child": {
 					borderRight: "none",
 					borderBottom: "none",
@@ -64,40 +62,28 @@ const MetricItem = ({ label, progress }: MetricConfig) => {
 const buildMetrics = (
 	check: NonNullable<Monitor["recentChecks"]>[number],
 	t: (key: string) => string
-): MetricConfig[] => {
-	const metrics: MetricConfig[] = [];
-
-	if (typeof check.performance === "number") {
-		metrics.push({
-			key: "performance",
-			label: t("pages.statusPages.monitorsList.pagespeed.performance"),
-			progress: check.performance,
-		});
-	}
-	if (typeof check.accessibility === "number") {
-		metrics.push({
-			key: "accessibility",
-			label: t("pages.statusPages.monitorsList.pagespeed.accessibility"),
-			progress: check.accessibility,
-		});
-	}
-	if (typeof check.bestPractices === "number") {
-		metrics.push({
-			key: "bestPractices",
-			label: t("pages.statusPages.monitorsList.pagespeed.bestPractices"),
-			progress: check.bestPractices,
-		});
-	}
-	if (typeof check.seo === "number") {
-		metrics.push({
-			key: "seo",
-			label: t("pages.statusPages.monitorsList.pagespeed.seo"),
-			progress: check.seo,
-		});
-	}
-
-	return metrics;
-};
+): MetricConfig[] => [
+	{
+		key: "performance",
+		label: t("pages.statusPages.monitorsList.pagespeed.performance"),
+		progress: check.performance ?? 0,
+	},
+	{
+		key: "accessibility",
+		label: t("pages.statusPages.monitorsList.pagespeed.accessibility"),
+		progress: check.accessibility ?? 0,
+	},
+	{
+		key: "bestPractices",
+		label: t("pages.statusPages.monitorsList.pagespeed.bestPractices"),
+		progress: check.bestPractices ?? 0,
+	},
+	{
+		key: "seo",
+		label: t("pages.statusPages.monitorsList.pagespeed.seo"),
+		progress: check.seo ?? 0,
+	},
+];
 
 export const PageSpeedMetrics = ({ monitor }: { monitor: StatusPageMonitor }) => {
 	const theme = useTheme();
@@ -118,23 +104,12 @@ export const PageSpeedMetrics = ({ monitor }: { monitor: StatusPageMonitor }) =>
 
 	const metrics = buildMetrics(latestCheck, t);
 
-	if (metrics.length === 0) {
-		return (
-			<Typography
-				variant="body2"
-				color={theme.palette.text.secondary}
-			>
-				{t("pages.statusPages.monitorsList.noData")}
-			</Typography>
-		);
-	}
-
 	return (
 		<Grid
 			container
 			alignItems="center"
 			padding={theme.spacing(LAYOUT.LG)}
-			sx={{ flex: 1 }}
+			flex={1}
 		>
 			{metrics.map((metric) => (
 				<MetricItem

client/src/Types/StatusPage.ts

@@ -1,5 +1,6 @@
 import type { Monitor, MonitorType } from "@/Types/Monitor";
-export type MonitorDisplayType = "uptime" | "infrastructure" | "pagespeed";
+export const MONITOR_DISPLAY_TYPES = ["uptime", "infrastructure", "pagespeed"] as const;
+export type MonitorDisplayType = (typeof MONITOR_DISPLAY_TYPES)[number];
 
 export const MONITOR_TYPE_KEYS: Partial<Record<MonitorType, string>> = {
 	http: "pages.common.monitors.monitorTypes.optionHttp",

client/src/Validation/statusPage.ts

@@ -1,4 +1,5 @@
 import { z } from "zod";
+import { MONITOR_DISPLAY_TYPES } from "@/Types/StatusPage";
 
 export const statusPageSchema = z.object({
 	companyName: z
@@ -14,9 +15,7 @@ export const statusPageSchema = z.object({
 			"URL can only contain lowercase letters, numbers, and hyphens"
 		),
 	timezone: z.string().optional(),
-	type: z
-		.array(z.enum(["uptime", "infrastructure", "pagespeed"]))
-		.min(1, "At least one type is required"),
+	type: z.array(z.enum(MONITOR_DISPLAY_TYPES)).min(1, "At least one type is required"),
 	color: z.string().min(1, "Color is required"),
 	monitors: z.array(z.string()).min(1, "At least one monitor is required"),
 	isPublished: z.boolean(),