From d3e12722b7dae99d5a056fe463b8d909eba6629b Mon Sep 17 00:00:00 2001
From: Malena Aguiar <malenacaroline01@gmail.com>
Date: Tue, 15 Sep 2026 11:46:23 -0600
Subject: [PATCH] add code adjustments

---
 client/src/Components/sidebar/Menu.tsx        |  2 +-
 .../Dashboard/components/ProgressBar.tsx      | 28 +++++++++++++++++++
 .../Dashboard/components/cards/BarRow.tsx     | 19 ++-----------
 .../components/cards/MonitorStatusCard.tsx    | 16 ++---------
 4 files changed, 34 insertions(+), 31 deletions(-)
 create mode 100644 client/src/Pages/Dashboard/components/ProgressBar.tsx

diff --git a/client/src/Components/sidebar/Menu.tsx b/client/src/Components/sidebar/Menu.tsx
index 287b5149c..300ce0346 100644
--- a/client/src/Components/sidebar/Menu.tsx
+++ b/client/src/Components/sidebar/Menu.tsx
@@ -20,7 +20,7 @@ import {
 	Tag,
 	Waypoints,
 	Container,
-	LayoutDashboard,
+	// LayoutDashboard,
 } from "lucide-react";
 export const getMenu = (t: Function) => {
 	return [
diff --git a/client/src/Pages/Dashboard/components/ProgressBar.tsx b/client/src/Pages/Dashboard/components/ProgressBar.tsx
new file mode 100644
index 000000000..6e0f86837
--- /dev/null
+++ b/client/src/Pages/Dashboard/components/ProgressBar.tsx
@@ -0,0 +1,28 @@
+import { LAYOUT } from "@/Utils/Theme/constants";
+import Box from "@mui/material/Box";
+import { useTheme } from "@mui/material/styles";
+
+interface ProgressBarProps {
+	fillRatio: number;
+}
+
+export const ProgressBar = ({ fillRatio }: ProgressBarProps) => {
+	const theme = useTheme();
+	const clamped = Math.min(1, Math.max(0, fillRatio));
+
+	return (
+		<Box
+			height={theme.spacing(LAYOUT.XS)}
+			borderRadius={theme.shape.borderRadius}
+			bgcolor={theme.palette.action.disabledBackground}
+			overflow="hidden"
+		>
+			<Box
+				height="100%"
+				width={`${clamped * 100}%`}
+				borderRadius={theme.shape.borderRadius}
+				bgcolor={theme.palette.primary.main}
+			/>
+		</Box>
+	);
+};
diff --git a/client/src/Pages/Dashboard/components/cards/BarRow.tsx b/client/src/Pages/Dashboard/components/cards/BarRow.tsx
index 231bd6497..af87105e4 100644
--- a/client/src/Pages/Dashboard/components/cards/BarRow.tsx
+++ b/client/src/Pages/Dashboard/components/cards/BarRow.tsx
@@ -1,9 +1,9 @@
-import Box from "@mui/material/Box";
 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 { LAYOUT, SPACING } from "@/Utils/Theme/constants";
+import { SPACING } from "@/Utils/Theme/constants";
+import { ProgressBar } from "@/Pages/Dashboard/components/ProgressBar";
 
 interface BarRowProps {
 	label: string;
@@ -14,7 +14,6 @@ interface BarRowProps {
 
 export const BarRow = ({ label, value, fillRatio, valueColor }: BarRowProps) => {
 	const theme = useTheme();
-	const clampedRatio = Math.min(1, Math.max(0, fillRatio));
 
 	return (
 		<Stack gap={theme.spacing(SPACING.LG)}>
@@ -37,19 +36,7 @@ export const BarRow = ({ label, value, fillRatio, valueColor }: BarRowProps) =>
 					{value}
 				</Typography>
 			</Stack>
-			<Box
-				height={theme.spacing(LAYOUT.XS)}
-				borderRadius={theme.shape.borderRadius}
-				bgcolor={theme.palette.action.disabledBackground}
-				overflow="hidden"
-			>
-				<Box
-					height="100%"
-					width={`${clampedRatio * 100}%`}
-					borderRadius={theme.shape.borderRadius}
-					bgcolor={theme.palette.primary.main}
-				/>
-			</Box>
+			<ProgressBar fillRatio={fillRatio} />
 		</Stack>
 	);
 };
diff --git a/client/src/Pages/Dashboard/components/cards/MonitorStatusCard.tsx b/client/src/Pages/Dashboard/components/cards/MonitorStatusCard.tsx
index 6ef28301e..10016e8f2 100644
--- a/client/src/Pages/Dashboard/components/cards/MonitorStatusCard.tsx
+++ b/client/src/Pages/Dashboard/components/cards/MonitorStatusCard.tsx
@@ -1,8 +1,8 @@
-import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { useTheme } from "@mui/material/styles";
 import { DashboardCard } from "@/Pages/Dashboard/components/DashboardCard";
+import { ProgressBar } from "@/Pages/Dashboard/components/ProgressBar";
 import { typographyLevels } from "@/Utils/Theme/Palette";
 import { SPACING } from "@/Utils/Theme/constants";
 import { useTranslation } from "react-i18next";
@@ -42,19 +42,7 @@ export const MonitorStatusCard = ({ summary }: MonitorStatusCardProps) => {
 						{t("pages.dashboard.monitorStatus.ofUp", { total })}
 					</Typography>
 				</Stack>
-				<Box
-					height={4}
-					borderRadius={2}
-					bgcolor={theme.palette.action.disabledBackground}
-					overflow="hidden"
-				>
-					<Box
-						height="100%"
-						width={`${ratio * 100}%`}
-						borderRadius={2}
-						bgcolor={theme.palette.primary.main}
-					/>
-				</Box>
+				<ProgressBar fillRatio={ratio} />
 			</Stack>
 		</DashboardCard>
 	);