fix: add code adjustments

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",

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>

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}

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} />

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;
 }

client/src/Routes/index.tsx

@@ -93,7 +93,7 @@ const Routes = () => {
 			>
 				<Route
 					path="/"
-					element={<Navigate to="/dashboard" />}
+					element={<Navigate to="/uptime" />}
 				/>
 				<Route
 					path="dashboard"

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" },