stat boxes

client/src/Utils/MonitorUtils.ts

@@ -1,4 +1,13 @@
 import type { MonitorStatus } from "@/Types/Monitor";
+import type { PaletteKey } from "./Theme/v2/theme";
+export const getStatusPalette = (status: MonitorStatus): PaletteKey => {
+	const paletteMap: Record<MonitorStatus, PaletteKey> = {
+		up: "success",
+		down: "error",
+		initializing: "warning",
+	};
+	return paletteMap[status];
+};
 
 export const getStatusColor = (status: MonitorStatus, theme: any): string => {
 	const statusColors: Record<MonitorStatus, string> = {

client/src/Utils/Theme/v2/theme.ts

@@ -1,5 +1,12 @@
 import { createTheme } from "@mui/material";
 import { lightPalette, darkPalette, typographyLevels } from "./palette";
+
+import type { Theme } from "@mui/material/styles";
+
+export type PaletteKey = {
+	[K in keyof Theme["palette"]]: Theme["palette"][K] extends { main: any } ? K : never;
+}[keyof Theme["palette"]];
+
 const fontFamilyPrimary = '"Inter" , sans-serif';
 const shadow =
 	"0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03)";