From 71a1194373de063397b5ea849ea4bc8e3c073fb7 Mon Sep 17 00:00:00 2001
From: Malena Aguiar <malenacaroline01@gmail.com>
Date: Mon, 14 Sep 2026 16:46:25 -0600
Subject: [PATCH] fix: add code adjustments

---
 client/src/Components/sidebar/Menu.tsx                 | 10 +++++-----
 client/src/Pages/Dashboard/components/cards/BarRow.tsx |  8 ++++----
 .../Dashboard/components/cards/MonitorsByTypeCard.tsx  |  5 +++--
 client/src/Pages/Dashboard/index.tsx                   |  4 +---
 client/src/Pages/Dashboard/types.ts                    |  4 +++-
 client/src/Routes/index.tsx                            |  2 +-
 client/src/Types/Monitor.ts                            |  8 ++++++++
 7 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/client/src/Components/sidebar/Menu.tsx b/client/src/Components/sidebar/Menu.tsx
index 0e89c22a2..287b5149c 100644
--- a/client/src/Components/sidebar/Menu.tsx
+++ b/client/src/Components/sidebar/Menu.tsx
@@ -27,11 +27,11 @@ export const getMenu = (t: Function) => {
 		{
 			group: t("components.sidebar.menu.groups.monitoring"),
 			items: [
-				{
-					name: t("components.sidebar.menu.dashboard"),
-					path: "dashboard",
-					icon: <Icon icon={LayoutDashboard} />,
-				},
+				// {
+				// 	name: t("components.sidebar.menu.dashboard"),
+				// 	path: "dashboard",
+				// 	icon: <Icon icon={LayoutDashboard} />,
+				// },
 				{
 					name: t("components.sidebar.menu.uptime"),
 					path: "uptime",
diff --git a/client/src/Pages/Dashboard/components/cards/BarRow.tsx b/client/src/Pages/Dashboard/components/cards/BarRow.tsx
index f9c7df09f..231bd6497 100644
--- a/client/src/Pages/Dashboard/components/cards/BarRow.tsx
+++ b/client/src/Pages/Dashboard/components/cards/BarRow.tsx
@@ -3,7 +3,7 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { useTheme } from "@mui/material/styles";
 import { typographyLevels } from "@/Utils/Theme/Palette";
-import { SPACING } from "@/Utils/Theme/constants";
+import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
 
 interface BarRowProps {
 	label: string;
@@ -38,15 +38,15 @@ export const BarRow = ({ label, value, fillRatio, valueColor }: BarRowProps) =>
 				</Typography>
 			</Stack>
 			<Box
-				height={4}
-				borderRadius={2}
+				height={theme.spacing(LAYOUT.XS)}
+				borderRadius={theme.shape.borderRadius}
 				bgcolor={theme.palette.action.disabledBackground}
 				overflow="hidden"
 			>
 				<Box
 					height="100%"
 					width={`${clampedRatio * 100}%`}
-					borderRadius={2}
+					borderRadius={theme.shape.borderRadius}
 					bgcolor={theme.palette.primary.main}
 				/>
 			</Box>
diff --git a/client/src/Pages/Dashboard/components/cards/MonitorsByTypeCard.tsx b/client/src/Pages/Dashboard/components/cards/MonitorsByTypeCard.tsx
index a1182579b..2922f708f 100644
--- a/client/src/Pages/Dashboard/components/cards/MonitorsByTypeCard.tsx
+++ b/client/src/Pages/Dashboard/components/cards/MonitorsByTypeCard.tsx
@@ -4,6 +4,7 @@ import { BarRow } from "@/Pages/Dashboard/components/cards/BarRow";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "@mui/material/styles";
 import type { DashboardTypeCount } from "@/Pages/Dashboard/types";
+import { getMonitorTypeLabel } from "@/Types/Monitor";
 import { LAYOUT } from "@/Utils/Theme/constants";
 
 interface MonitorsByTypeCardProps {
@@ -18,11 +19,11 @@ export const MonitorsByTypeCard = ({ monitorsByType }: MonitorsByTypeCardProps)
 
 	return (
 		<DashboardCard title={t("pages.dashboard.cards.monitorsByType")}>
-			<Stack gap={LAYOUT.SM}>
+			<Stack gap={theme.spacing(LAYOUT.SM)}>
 				{monitorsByType.map(({ type, count }) => (
 					<BarRow
 						key={type}
-						label={type}
+						label={getMonitorTypeLabel(type, t)}
 						value={String(count)}
 						fillRatio={count / maxCount}
 						valueColor={theme.palette.text.primary}
diff --git a/client/src/Pages/Dashboard/index.tsx b/client/src/Pages/Dashboard/index.tsx
index 9f89ead27..9d48fb5a4 100644
--- a/client/src/Pages/Dashboard/index.tsx
+++ b/client/src/Pages/Dashboard/index.tsx
@@ -1,6 +1,5 @@
 import Box from "@mui/material/Box";
 import { useTheme } from "@mui/material/styles";
-import useMediaQuery from "@mui/material/useMediaQuery";
 
 import { BasePage } from "@/Components/design-elements/BasePage";
 import { LAYOUT } from "@/Utils/Theme/constants";
@@ -28,13 +27,12 @@ const MOCK_MONITORS_BY_TYPE: DashboardTypeCount[] = [
 
 const Dashboard = () => {
 	const theme = useTheme();
-	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 
 	return (
 		<BasePage headerKey="dashboard">
 			<Box
 				display="grid"
-				gridTemplateColumns={isSmall ? "1fr" : "1fr 1fr"}
+				gridTemplateColumns={{ xs: "1fr", md: "1fr 1fr" }}
 				gap={theme.spacing(LAYOUT.MD)}
 			>
 				<MonitorStatusCard summary={MOCK_SUMMARY} />
diff --git a/client/src/Pages/Dashboard/types.ts b/client/src/Pages/Dashboard/types.ts
index bbb5c3924..1b9b75d60 100644
--- a/client/src/Pages/Dashboard/types.ts
+++ b/client/src/Pages/Dashboard/types.ts
@@ -1,4 +1,6 @@
+import type { MonitorType } from "@/Types/Monitor";
+
 export interface DashboardTypeCount {
-	type: string;
+	type: MonitorType;
 	count: number;
 }
diff --git a/client/src/Routes/index.tsx b/client/src/Routes/index.tsx
index c96ecd7d0..937fd0f93 100644
--- a/client/src/Routes/index.tsx
+++ b/client/src/Routes/index.tsx
@@ -93,7 +93,7 @@ const Routes = () => {
 			>
 				<Route
 					path="/"
-					element={<Navigate to="/dashboard" />}
+					element={<Navigate to="/uptime" />}
 				/>
 				<Route
 					path="dashboard"
diff --git a/client/src/Types/Monitor.ts b/client/src/Types/Monitor.ts
index c81df9c82..c8a7af184 100644
--- a/client/src/Types/Monitor.ts
+++ b/client/src/Types/Monitor.ts
@@ -60,6 +60,14 @@ export const monitorTypeLabelKey: Record<SelectableMonitorType, string> &
 	pagespeed: "optionPagespeed",
 };
 
+export const getMonitorTypeLabel = (
+	type: MonitorType,
+	t: (key: string) => string
+): string => {
+	const monitorLabel = monitorTypeLabelKey[type];
+	return monitorLabel ? t(`pages.common.monitors.monitorTypes.${monitorLabel}`) : type;
+};
+
 export const MonitorIntervalOptions = [
 	{ value: 15000, labelKey: "fifteenSeconds" },
 	{ value: 30000, labelKey: "thirtySeconds" },