From 41fa2717a9d3a9055e4dec024b63e58bddd2a651 Mon Sep 17 00:00:00 2001
From: mannilakash <mannilakash@gmail.com>
Date: Mon, 30 Mar 2026 07:30:06 -0400
Subject: [PATCH] fix: changes fixing type errors and adding colorFn comment

---
 client/src/Components/design-elements/Gauge.tsx       |  7 +++++--
 .../StatusPage/Status/Components/MonitorsList.tsx     | 11 +++++------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/client/src/Components/design-elements/Gauge.tsx b/client/src/Components/design-elements/Gauge.tsx
index ff653489f..fdc92db74 100644
--- a/client/src/Components/design-elements/Gauge.tsx
+++ b/client/src/Components/design-elements/Gauge.tsx
@@ -3,7 +3,7 @@ import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 
-import { useTheme } from "@mui/material/styles";
+import { useTheme, type Theme } from "@mui/material/styles";
 import { useMemo, useState, useEffect } from "react";
 import { getInfraGaugeColor } from "@/Utils/MonitorUtils";
 
@@ -17,6 +17,9 @@ export const Gauge = ({
 	strokeWidth = 15,
 	precision = 1,
 	unit = "%",
+	// colorFn lets callers override the default color logic.
+	// The Gauge was originally designed for metrics where higher values are worse (e.g., CPU usage).
+	// PageSpeed scores are the opposite—higher is better—so a custom colorFn can be used to invert the behavior.
 	colorFn,
 }: {
 	isLoading?: boolean;
@@ -25,7 +28,7 @@ export const Gauge = ({
 	strokeWidth?: number;
 	precision?: number;
 	unit?: string;
-	colorFn?: (val: number, theme: any) => string;
+	colorFn?: (val: number, theme: Theme) => string;
 }) => {
 	const theme = useTheme();
 	const progressWithinRange = Math.max(MINIMUM_VALUE, Math.min(progress, MAXIMUM_VALUE));
diff --git a/client/src/Pages/StatusPage/Status/Components/MonitorsList.tsx b/client/src/Pages/StatusPage/Status/Components/MonitorsList.tsx
index 2eb2c0ff3..4027f8d15 100644
--- a/client/src/Pages/StatusPage/Status/Components/MonitorsList.tsx
+++ b/client/src/Pages/StatusPage/Status/Components/MonitorsList.tsx
@@ -27,14 +27,12 @@ interface MonitorsListProps {
 }
 
 const getMonitorBadgeStyles = (monitorType: string, theme: Theme) => {
-	const monitorColors = {
+	const monitorColors: Record<string, string> = {
 		hardware: theme.palette.info.light,
 		pagespeed: theme.palette.warning.light,
 	};
 
-	const bg =
-		monitorColors[monitorType as keyof typeof monitorColors] ||
-		theme.palette.success.light;
+	const bg = monitorColors[monitorType] || theme.palette.success.light;
 	return {
 		backgroundColor: bg,
 		color: theme.palette.background.paper,
@@ -113,8 +111,9 @@ const MonitorContent = ({
 	}
 
 	if (monitor.type === "pagespeed") {
-		if (statusPage.showPageSpeed === false) return null;
-		return <PageSpeedMetrics monitor={monitor} />;
+		return statusPage.showPageSpeed === false ? null : (
+			<PageSpeedMetrics monitor={monitor} />
+		);
 	}
 
 	if (statusPage.showCharts === false) return null;