fix: naming conventions changes and using more native props

client/src/Pages/StatusPage/Create/index.tsx

@@ -28,7 +28,7 @@ import { useStatusPageForm } from "@/Hooks/useStatusPageForm";
 import type { StatusPageFormData } from "@/Validation/statusPage";
 import { useGet, usePost, usePut, useDelete } from "@/Hooks/UseApi";
 import type { Monitor } from "@/Types/Monitor";
-import type { MonitorDisplayType, StatusPageResponse } from "@/Types/StatusPage";
+import type { StatusPageType, StatusPageResponse } from "@/Types/StatusPage";
 import { getMonitorTypeLabel } from "@/Types/StatusPage";
 import timezones from "@/Utils/timezones.json";
 import { useNavigate, useParams } from "react-router-dom";
@@ -101,12 +101,12 @@ const CreateStatusPage = () => {
 	}, [defaults, reset]);
 
 	const watchedMonitorIds: string[] = form.watch("monitors") ?? [];
-	const computedTypes: MonitorDisplayType[] = useMemo(() => {
+	const computedTypes: StatusPageType[] = useMemo(() => {
 		const selectedMonitors = (watchedMonitorIds ?? [])
 			.map((id) => monitors.find((m) => m.id === id))
 			.filter((m): m is Monitor => m !== undefined);
 
-		const typesSet = new Set<MonitorDisplayType>();
+		const typesSet = new Set<StatusPageType>();
 		selectedMonitors.forEach((m) => {
 			if (m.type === "hardware") typesSet.add("infrastructure");
 			else if (m.type === "pagespeed") typesSet.add("pagespeed");

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

@@ -15,6 +15,13 @@ interface StatusPageMonitor extends Monitor {
 	checks?: Monitor["recentChecks"];
 }
 
+interface PageSpeedCheck {
+	performance: number;
+	accessibility: number;
+	bestPractices: number;
+	seo: number;
+}
+
 interface MetricConfig {
 	key: string;
 	label: string;
@@ -26,13 +33,13 @@ const MetricItem = ({ label, progress }: MetricConfig) => {
 	return (
 		<Grid
 			size={{ xs: 12, md: 3 }}
+			display="flex"
+			flexDirection="column"
+			alignItems="center"
+			textAlign="center"
+			gap={theme.spacing(SPACING.LG)}
+			padding={theme.spacing(LAYOUT.XS)}
 			sx={{
-				display: "flex",
-				flexDirection: "column",
-				alignItems: "center",
-				textAlign: "center",
-				gap: theme.spacing(SPACING.LG),
-				padding: theme.spacing(LAYOUT.XS),
 				borderRight: { xs: "none", md: `1px solid ${theme.palette.divider}` },
 				borderBottom: { xs: `1px solid ${theme.palette.divider}`, md: "none" },
 				"&:last-child": {
@@ -60,28 +67,28 @@ const MetricItem = ({ label, progress }: MetricConfig) => {
 };
 
 const buildMetrics = (
-	check: NonNullable<Monitor["recentChecks"]>[number],
+	check: PageSpeedCheck,
 	t: (key: string) => string
 ): MetricConfig[] => [
 	{
 		key: "performance",
 		label: t("pages.statusPages.monitorsList.pagespeed.performance"),
-		progress: check.performance ?? 0,
+		progress: check.performance,
 	},
 	{
 		key: "accessibility",
 		label: t("pages.statusPages.monitorsList.pagespeed.accessibility"),
-		progress: check.accessibility ?? 0,
+		progress: check.accessibility,
 	},
 	{
 		key: "bestPractices",
 		label: t("pages.statusPages.monitorsList.pagespeed.bestPractices"),
-		progress: check.bestPractices ?? 0,
+		progress: check.bestPractices,
 	},
 	{
 		key: "seo",
 		label: t("pages.statusPages.monitorsList.pagespeed.seo"),
-		progress: check.seo ?? 0,
+		progress: check.seo,
 	},
 ];
 
@@ -102,7 +109,7 @@ export const PageSpeedMetrics = ({ monitor }: { monitor: StatusPageMonitor }) =>
 		);
 	}
 
-	const metrics = buildMetrics(latestCheck, t);
+	const metrics = buildMetrics(latestCheck as PageSpeedCheck, t);
 
 	return (
 		<Grid

client/src/Types/StatusPage.ts

@@ -1,6 +1,6 @@
 import type { Monitor, MonitorType } from "@/Types/Monitor";
-export const MONITOR_DISPLAY_TYPES = ["uptime", "infrastructure", "pagespeed"] as const;
-export type MonitorDisplayType = (typeof MONITOR_DISPLAY_TYPES)[number];
+export const StatusPageTypes = ["uptime", "infrastructure", "pagespeed"] as const;
+export type StatusPageType = (typeof StatusPageTypes)[number];
 
 export const MONITOR_TYPE_KEYS: Partial<Record<MonitorType, string>> = {
 	http: "pages.common.monitors.monitorTypes.optionHttp",
@@ -26,7 +26,7 @@ export interface StatusPage {
 	id: string;
 	userId: string;
 	teamId: string;
-	type: MonitorDisplayType[];
+	type: StatusPageType[];
 	companyName: string;
 	url: string;
 	timezone?: string;

client/src/Validation/statusPage.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { MONITOR_DISPLAY_TYPES } from "@/Types/StatusPage";
+import { StatusPageTypes } from "@/Types/StatusPage";
 
 export const statusPageSchema = z.object({
 	companyName: z
@@ -15,7 +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(MONITOR_DISPLAY_TYPES)).min(1, "At least one type is required"),
+	type: z.array(z.enum(StatusPageTypes)).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(),