add code adjustments

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 [

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

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

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