From 947f5ff773310ae76ba694f08d543a08c2822d09 Mon Sep 17 00:00:00 2001
From: Owaise Imdad <owaiseimdad@gmail.com>
Date: Sat, 1 Mar 2025 08:10:16 +0530
Subject: [PATCH 01/19] Added a new HOC in status bar in order to make sure it
 works on both the resolution, high and low.

---
 .../Charts/StatusPageBarChart/index.jsx       | 35 +++++++++++--------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/Components/Charts/StatusPageBarChart/index.jsx b/src/Components/Charts/StatusPageBarChart/index.jsx
index 5acf4c3d6..46e8ae2a1 100644
--- a/src/Components/Charts/StatusPageBarChart/index.jsx
+++ b/src/Components/Charts/StatusPageBarChart/index.jsx
@@ -24,6 +24,21 @@ const StatusPageBarChart = ({ checks = [] }) => {
 		checks = [...checks, ...placeholders];
 	}
 
+	const BarBox = ({ width, height, backgroundColor, borderRadius, children }) => (
+		<Box
+			marginRight="5px"
+			position="relative"
+			width={width}
+			height={height}
+			backgroundColor={backgroundColor}
+			sx={{
+				borderRadius: borderRadius || theme.spacing(1.5),
+			}}
+		>
+			{children}
+		</Box>
+	);
+
 	return (
 		<Stack
 			direction="row"
@@ -41,15 +56,11 @@ const StatusPageBarChart = ({ checks = [] }) => {
 					/* TODO what is the purpose of this box? 	*/
 					// CAIO_REVIEW the purpose of this box is to make sure there are always at least 25 bars
 					// even if there are less than 25 checks
-					<Box
+					<BarBox
 						key={`${check}-${index}`}
-						position="relative"
-						width="calc(30vw / 25)"
+						width="calc(30rem / 25)"
 						height="100%"
 						backgroundColor={theme.palette.primary.lowContrast}
-						sx={{
-							borderRadius: theme.spacing(1.5),
-						}}
 					/>
 				) : (
 					<Tooltip
@@ -140,14 +151,10 @@ const StatusPageBarChart = ({ checks = [] }) => {
 							},
 						}}
 					>
-						<Box
-							position="relative"
-							width="calc(30vw / 25)"
+						<BarBox
+							width="calc(30rem / 25)"
 							height="100%"
-							backgroundColor={theme.palette.primary.lowContrast} // CAIO_REVIEW
-							sx={{
-								borderRadius: theme.spacing(1.5),
-							}}
+							backgroundColor={theme.palette.primary.lowContrast}
 						>
 							<Box
 								position="absolute"
@@ -164,7 +171,7 @@ const StatusPageBarChart = ({ checks = [] }) => {
 									transition: "height 600ms cubic-bezier(0.4, 0, 0.2, 1)",
 								}}
 							/>
-						</Box>
+						</BarBox>
 					</Tooltip>
 				)
 			)}

From 4f6c29cd9af842f32b018284d64fb4dfbfe792ad Mon Sep 17 00:00:00 2001
From: Aditya <adirismis31@gmail.com>
Date: Sun, 2 Mar 2025 09:13:30 +0530
Subject: [PATCH 02/19] feat(sidebar): Improve sidebar menu UI

---
 src/Components/Sidebar/index.jsx | 155 ++++++++++++++++++++++++-------
 1 file changed, 120 insertions(+), 35 deletions(-)

diff --git a/src/Components/Sidebar/index.jsx b/src/Components/Sidebar/index.jsx
index ee0071d4f..bc915b371 100644
--- a/src/Components/Sidebar/index.jsx
+++ b/src/Components/Sidebar/index.jsx
@@ -63,35 +63,29 @@ const menu = [
 
 	{ name: "Status pages", path: "status", icon: <StatusPages /> },
 	{ name: "Maintenance", path: "maintenance", icon: <Maintenance /> },
-	// { name: "Integrations", path: "integrations", icon: <Integrations /> },
-	{
-		name: "Account",
-		icon: <Account />,
-		nested: [
-			{ name: "Profile", path: "account/profile", icon: <UserSvg /> },
-			{ name: "Password", path: "account/password", icon: <LockSvg /> },
-			{ name: "Team", path: "account/team", icon: <TeamSvg /> },
-		],
-	},
+	{ name: "Integrations", path: "integrations", icon: <Integrations /> },
 	{
 		name: "Settings",
 		icon: <Settings />,
 		path: "settings",
 	},
+];
+
+const otherMenuItems = [
+	{ name: "Support", path: "support", icon: <Support /> },
 	{
-		name: "Other",
-		icon: <Folder />,
-		nested: [
-			{ name: "Support", path: "support", icon: <Support /> },
-			{
-				name: "Discussions",
-				path: "discussions",
-				icon: <Discussions />,
-			},
-			{ name: "Docs", path: "docs", icon: <Docs /> },
-			{ name: "Changelog", path: "changelog", icon: <ChangeLog /> },
-		],
+		name: "Discussions",
+		path: "discussions",
+		icon: <Discussions />,
 	},
+	{ name: "Docs", path: "docs", icon: <Docs /> },
+	{ name: "Changelog", path: "changelog", icon: <ChangeLog /> },
+];
+
+const accountMenuItems = [
+	{ name: "Profile", path: "account/profile", icon: <UserSvg /> },
+	{ name: "Password", path: "account/password", icon: <LockSvg /> },
+	{ name: "Team", path: "account/team", icon: <TeamSvg /> },
 ];
 
 /* TODO this could be a key in nested Path would be the link */
@@ -133,12 +127,38 @@ function Sidebar() {
 		(state) => state.ui.distributedUptimeEnabled
 	);
 
-	const accountMenuItem = menu.find((item) => item.name === "Account");
-	if (user.role?.includes("demo") && accountMenuItem) {
-		accountMenuItem.nested = accountMenuItem.nested.filter((item) => {
-			return item.name !== "Password";
-		});
-	}
+	const renderAccountMenuItems = () => {
+		let filteredAccountMenuItems = [...accountMenuItems];
+
+		// If the user is in demo mode, remove the "Password" option
+		if (user.role?.includes("demo")) {
+			filteredAccountMenuItems = filteredAccountMenuItems.filter(
+				(item) => item.name !== "Password"
+			);
+		}
+
+		// If the user is NOT a superadmin, remove the "Team" option
+		if (user.role && !user.role.includes("superadmin")) {
+			filteredAccountMenuItems = filteredAccountMenuItems.filter(
+				(item) => item.name !== "Team"
+			);
+		}
+
+		return filteredAccountMenuItems.map((item) => (
+			<MenuItem
+				key={item.name}
+				onClick={() => navigate(item.path)}
+				sx={{
+					gap: theme.spacing(2),
+					borderRadius: theme.shape.borderRadius,
+					pl: theme.spacing(4),
+				}}
+			>
+				{item.icon}
+				{item.name}
+			</MenuItem>
+		));
+	};
 
 	const openPopup = (event, id) => {
 		setAnchorEl(event.currentTarget);
@@ -260,7 +280,6 @@ function Sidebar() {
 			>
 				{collapsed ? <ArrowRight /> : <ArrowLeft />}
 			</IconButton>
-
 			{/* TODO Alignment done using padding. Use single source of truth to that*/}
 			<Stack
 				pt={theme.spacing(6)}
@@ -588,8 +607,59 @@ function Sidebar() {
 					})}
 				</List>
 			</Box>
-			<Divider sx={{ mt: "auto", borderColor: theme.palette.primary.lowContrast }} />
 
+			<List
+				component="nav"
+				disablePadding
+				sx={{ px: theme.spacing(6) }}
+			>
+				{otherMenuItems.map((item) => {
+					return item.path ? (
+						<Tooltip
+							key={item.path}
+							placement="right"
+							title={collapsed ? item.name : ""}
+							slotProps={{
+								popper: {
+									modifiers: [
+										{
+											name: "offset",
+											options: {
+												offset: [0, -16],
+											},
+										},
+									],
+								},
+							}}
+							disableInteractive
+						>
+							<ListItemButton
+								className={
+									location.pathname.startsWith(`/ $ { item.path }`) ? "selected-path" : ""
+								}
+								onClick={() => {
+									const url = URL_MAP[item.path];
+									if (url) {
+										window.open(url, "_blank", "noreferrer");
+									} else {
+										navigate(`/${item.path}`);
+									}
+								}}
+								sx={{
+									height: "37px",
+									gap: theme.spacing(4),
+									borderRadius: theme.shape.borderRadius,
+									px: theme.spacing(4),
+								}}
+							>
+								<ListItemIcon sx={{ minWidth: 0 }}>{item.icon} </ListItemIcon>
+								<ListItemText>{item.name} </ListItemText>{" "}
+							</ListItemButton>
+						</Tooltip>
+					) : null;
+				})}
+			</List>
+			<Divider sx={{ mt: "auto", borderColor: theme.palette.primary.lowContrast }} />
 			<Stack
 				direction="row"
 				height="50px"
@@ -715,10 +785,15 @@ function Sidebar() {
 					}}
 				>
 					{collapsed && (
-						<MenuItem sx={{ cursor: "default", minWidth: "50%" }}>
+						<MenuItem sx={{ cursor: "default", minWidth: "200px" }}>
 							<Box
 								mb={theme.spacing(2)}
-								sx={{ maxWidth: "50%", overflow: "hidden" }}
+								sx={{
+									minWidth: "200px",
+									maxWidth: "max-content",
+									overflow: "visible",
+									whiteSpace: "nowrap",
+								}}
 							>
 								<Typography
 									component="span"
@@ -727,13 +802,22 @@ function Sidebar() {
 									sx={{
 										display: "block",
 										whiteSpace: "nowrap",
-										overflow: "hidden",
-										textOverflow: "ellipsis",
+										overflow: "visible",
+										// wordBreak: "break-word",
+										textOverflow: "clip",
 									}}
 								>
 									{authState.user?.firstName} {authState.user?.lastName}
 								</Typography>
-								<Typography sx={{ textTransform: "capitalize", fontSize: 12 }}>
+								<Typography
+									sx={{
+										textTransform: "capitalize",
+										fontSize: 12,
+										whiteSpace: "nowrap",
+										overflow: "visible",
+										// wordBreak: "break-word",
+									}}
+								>
 									{authState.user?.role}
 								</Typography>
 							</Box>
@@ -742,6 +826,7 @@ function Sidebar() {
 					{/* TODO Do we need two dividers? */}
 					{collapsed && <Divider />}
 					<Divider />
+					{renderAccountMenuItems()}
 					<MenuItem
 						onClick={logout}
 						sx={{

From 039d471af7e25626a4624f34c78503907cc5a405 Mon Sep 17 00:00:00 2001
From: Owaise Imdad <owaiseimdad@gmail.com>
Date: Sun, 2 Mar 2025 12:51:36 +0530
Subject: [PATCH 03/19] FIX-1847 implemented the logic.

---
 src/Components/Inputs/Select/index.jsx        | 15 +++++-
 .../Components/OptionsHeader/index.jsx        | 49 ++++++++++++-------
 src/Utils/Input/utils.jsx                     | 27 ++++++++++
 3 files changed, 72 insertions(+), 19 deletions(-)
 create mode 100644 src/Utils/Input/utils.jsx

diff --git a/src/Components/Inputs/Select/index.jsx b/src/Components/Inputs/Select/index.jsx
index f0a1d11c0..4be84b6e0 100644
--- a/src/Components/Inputs/Select/index.jsx
+++ b/src/Components/Inputs/Select/index.jsx
@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { MenuItem, Select as MuiSelect, Stack, Typography } from "@mui/material";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-
+import { renderTruncatedValue } from "../../../Utils/Input/utils";
 import "./index.css";
 
 /**
@@ -50,8 +50,14 @@ const Select = ({
 	sx,
 	name = "",
 	labelControlSpacing = 2,
+	truncate = false,
+	maxTruncateLength = 15,
 }) => {
 	const theme = useTheme();
+
+	const selectedItem = items.find((item) => item._id === value);
+	const displayName = selectedItem ? selectedItem.name : "";
+
 	const itemStyles = {
 		fontSize: "var(--env-var-font-size-medium)",
 		color: theme.palette.primary.contrastTextTertiary,
@@ -59,6 +65,10 @@ const Select = ({
 		margin: theme.spacing(2),
 	};
 
+	const renderShortValue = () => {
+		return renderTruncatedValue(displayName, truncate, maxTruncateLength, placeholder);
+	};
+
 	return (
 		<Stack
 			gap={theme.spacing(labelControlSpacing)}
@@ -99,6 +109,7 @@ const Select = ({
 					},
 					...sx,
 				}}
+				renderValue={renderShortValue}
 			>
 				{placeholder && (
 					<MenuItem
@@ -146,6 +157,8 @@ Select.propTypes = {
 	onBlur: PropTypes.func,
 	sx: PropTypes.object,
 	labelControlSpacing: PropTypes.number,
+	truncate: PropTypes.bool, // New prop: enable/disable truncation
+	maxTruncateLength: PropTypes.number, // New prop: configurable length
 };
 
 export default Select;
diff --git a/src/Pages/Incidents/Components/OptionsHeader/index.jsx b/src/Pages/Incidents/Components/OptionsHeader/index.jsx
index 967acfed5..2e0db24c9 100644
--- a/src/Pages/Incidents/Components/OptionsHeader/index.jsx
+++ b/src/Pages/Incidents/Components/OptionsHeader/index.jsx
@@ -20,6 +20,14 @@ const OptionsHeader = ({
 	const theme = useTheme();
 	const monitorNames = typeof monitors !== "undefined" ? Object.values(monitors) : [];
 
+	// The stacks below which are three in number have the same style so
+	const stackStyles = {
+		direction: "row",
+		alignItems: "center",
+		gap: theme.spacing(6),
+		marginLeft: "5px",
+	};
+
 	if (!shouldRender) return <SkeletonLayout />;
 
 	return (
@@ -27,17 +35,13 @@ const OptionsHeader = ({
 			direction="row"
 			justifyContent="space-between"
 		>
-			<Stack
-				direction="row"
-				alignItems="center"
-				gap={theme.spacing(6)}
-			>
+			<Stack {...stackStyles}>
 				<Typography
 					display="inline-block"
 					component="h1"
 					color={theme.palette.primary.contrastTextSecondary}
 				>
-					Incidents for
+					Incidents for:
 				</Typography>
 				<Select
 					id="incidents-select-monitor"
@@ -49,13 +53,10 @@ const OptionsHeader = ({
 						backgroundColor: theme.palette.primary.main,
 						color: theme.palette.primary.contrastTextSecondary,
 					}}
+					truncate={true}
 				/>
 			</Stack>
-			<Stack
-				direction="row"
-				alignItems="center"
-				gap={theme.spacing(6)}
-			>
+			<Stack {...stackStyles}>
 				<Typography
 					display="inline-block"
 					component="h1"
@@ -66,7 +67,15 @@ const OptionsHeader = ({
 				<ButtonGroup
 					sx={{
 						ml: "auto",
-						"& .MuiButtonBase-root, & .MuiButtonBase-root:hover": {
+						alignItems: "stretch",
+						"& .MuiButtonBase-root": {
+							whiteSpace: "nowrap",
+							height: "auto",
+							"&.MuiButton-group": {
+								borderColor: theme.palette.primary.lowContrast,
+							},
+						},
+						"& .MuiButtonBase-root:hover": {
 							borderColor: theme.palette.primary.lowContrast,
 						},
 					}}
@@ -94,11 +103,7 @@ const OptionsHeader = ({
 					</Button>
 				</ButtonGroup>
 			</Stack>
-			<Stack
-				direction="row"
-				alignItems="center"
-				gap={theme.spacing(6)}
-			>
+			<Stack {...stackStyles}>
 				<Typography
 					display="inline-block"
 					component="h1"
@@ -109,7 +114,15 @@ const OptionsHeader = ({
 				<ButtonGroup
 					sx={{
 						ml: "auto",
-						"& .MuiButtonBase-root, & .MuiButtonBase-root:hover": {
+						alignItems: "stretch",
+						"& .MuiButtonBase-root": {
+							whiteSpace: "nowrap",
+							height: "auto",
+							"&.MuiButton-group": {
+								borderColor: theme.palette.primary.lowContrast,
+							},
+						},
+						"& .MuiButtonBase-root:hover": {
 							borderColor: theme.palette.primary.lowContrast,
 						},
 					}}
diff --git a/src/Utils/Input/utils.jsx b/src/Utils/Input/utils.jsx
new file mode 100644
index 000000000..3d567fe8d
--- /dev/null
+++ b/src/Utils/Input/utils.jsx
@@ -0,0 +1,27 @@
+/**
+ * Utility function to render a truncated value with an optional title.
+ * @param {string} value - The selected value (But this will always come as id).
+ * @param {array} items - The list of items to find the selected value from.
+ * @param {boolean} truncate - Whether to truncate the text or not.
+ * @param {number} maxLength - The maximum length of the text.
+ * @param {string} placeholder - Placeholder text if no value is selected.
+ * @returns {JSX.Element} - The JSX element for the rendered value.
+ */
+
+export const renderTruncatedValue = (displayName, truncate, maxLength, placeholder) => {
+	// If no value or the value is '0', return the placeholder
+	if (!displayName || displayName === "0") return placeholder;
+
+	// Function to truncate the text with a dotted end
+	const truncateTextWithDottedEnds = (text, maxLength) => {
+		if (!text || text.length <= maxLength) return text;
+		return `${text.substring(0, maxLength)}...`;
+	};
+
+	// If truncation is enabled, return the truncated text with a title for full value
+	return truncate ? (
+		<span title={displayName}>{truncateTextWithDottedEnds(displayName, maxLength)}</span>
+	) : (
+		displayName
+	);
+};

From b04fc145a220840d1f662d5155087e14f5fa9d91 Mon Sep 17 00:00:00 2001
From: Aditya <adirismis31@gmail.com>
Date: Mon, 3 Mar 2025 14:51:03 +0530
Subject: [PATCH 04/19] fix(sidebar): Address PR feedback

---
 src/Components/Sidebar/index.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Components/Sidebar/index.jsx b/src/Components/Sidebar/index.jsx
index bc915b371..432fc673b 100644
--- a/src/Components/Sidebar/index.jsx
+++ b/src/Components/Sidebar/index.jsx
@@ -635,7 +635,7 @@ function Sidebar() {
 						>
 							<ListItemButton
 								className={
-									location.pathname.startsWith(`/ $ { item.path }`) ? "selected-path" : ""
+									location.pathname.startsWith(`/${item.path}`) ? "selected-path" : ""
 								}
 								onClick={() => {
 									const url = URL_MAP[item.path];
@@ -785,11 +785,11 @@ function Sidebar() {
 					}}
 				>
 					{collapsed && (
-						<MenuItem sx={{ cursor: "default", minWidth: "200px" }}>
+						<MenuItem sx={{ cursor: "default", minWidth: "50%" }}>
 							<Box
 								mb={theme.spacing(2)}
 								sx={{
-									minWidth: "200px",
+									minWidth: "50%",
 									maxWidth: "max-content",
 									overflow: "visible",
 									whiteSpace: "nowrap",

From da64cd0a56341cbfc040cfdfc44f57d2338a51d4 Mon Sep 17 00:00:00 2001
From: Owaise Imdad <owaiseimdad@gmail.com>
Date: Mon, 3 Mar 2025 23:12:17 +0530
Subject: [PATCH 05/19] FIX-1725 minor UI changes.

---
 src/Components/Charts/Bar/index.jsx           | 47 +++++++++++++++++++
 .../Charts/StatusPageBarChart/index.jsx       | 26 +++-------
 2 files changed, 53 insertions(+), 20 deletions(-)
 create mode 100644 src/Components/Charts/Bar/index.jsx

diff --git a/src/Components/Charts/Bar/index.jsx b/src/Components/Charts/Bar/index.jsx
new file mode 100644
index 000000000..5826788a6
--- /dev/null
+++ b/src/Components/Charts/Bar/index.jsx
@@ -0,0 +1,47 @@
+import { Box } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import PropTypes from "prop-types";
+
+/**
+ * A customizable Bar component that renders a colored bar with optional children.
+ *
+ * @component
+ *
+ * @param {string} width The width of the bar (e.g., "100px").
+ * @param {string} height The height of the bar (e.g., "50px").
+ * @param {string} backgroundColor The background color of the bar (e.g., "#FF5733").
+ * @param {string} [borderRadius] Optional border radius for the bar (e.g., "8px").
+ * @param {node} children The content to be rendered inside the bar.
+ *
+ * @returns {JSX.Element} The Bar component.
+ */
+
+const Bar = ({ width, height, backgroundColor, borderRadius, children }) => {
+	const theme = useTheme();
+
+	return (
+		<Box
+			position="relative"
+			width={width}
+			height={height}
+			backgroundColor={backgroundColor}
+			sx={{
+				borderRadius: borderRadius || theme.spacing(1.5),
+				gap: "2px",
+				display: "flex",
+			}}
+		>
+			{children}
+		</Box>
+	);
+};
+
+Bar.propTypes = {
+	width: PropTypes.string.isRequired,
+	height: PropTypes.string.isRequired,
+	backgroundColor: PropTypes.string.isRequired,
+	borderRadius: PropTypes.string,
+	children: PropTypes.node,
+};
+
+export default Bar;
diff --git a/src/Components/Charts/StatusPageBarChart/index.jsx b/src/Components/Charts/StatusPageBarChart/index.jsx
index 46e8ae2a1..84015da4a 100644
--- a/src/Components/Charts/StatusPageBarChart/index.jsx
+++ b/src/Components/Charts/StatusPageBarChart/index.jsx
@@ -3,6 +3,7 @@ import { Box, Stack, Tooltip, Typography } from "@mui/material";
 import { formatDateWithTz } from "../../../Utils/timeUtils";
 import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
+import Bar from "../Bar";
 
 /* TODO add prop validation and jsdocs */
 const StatusPageBarChart = ({ checks = [] }) => {
@@ -24,21 +25,6 @@ const StatusPageBarChart = ({ checks = [] }) => {
 		checks = [...checks, ...placeholders];
 	}
 
-	const BarBox = ({ width, height, backgroundColor, borderRadius, children }) => (
-		<Box
-			marginRight="5px"
-			position="relative"
-			width={width}
-			height={height}
-			backgroundColor={backgroundColor}
-			sx={{
-				borderRadius: borderRadius || theme.spacing(1.5),
-			}}
-		>
-			{children}
-		</Box>
-	);
-
 	return (
 		<Stack
 			direction="row"
@@ -56,9 +42,9 @@ const StatusPageBarChart = ({ checks = [] }) => {
 					/* TODO what is the purpose of this box? 	*/
 					// CAIO_REVIEW the purpose of this box is to make sure there are always at least 25 bars
 					// even if there are less than 25 checks
-					<BarBox
+					<Bar
 						key={`${check}-${index}`}
-						width="calc(30rem / 25)"
+						width="calc(85% / 25)"
 						height="100%"
 						backgroundColor={theme.palette.primary.lowContrast}
 					/>
@@ -151,8 +137,8 @@ const StatusPageBarChart = ({ checks = [] }) => {
 							},
 						}}
 					>
-						<BarBox
-							width="calc(30rem / 25)"
+						<Bar
+							width="calc(85% / 25)"
 							height="100%"
 							backgroundColor={theme.palette.primary.lowContrast}
 						>
@@ -171,7 +157,7 @@ const StatusPageBarChart = ({ checks = [] }) => {
 									transition: "height 600ms cubic-bezier(0.4, 0, 0.2, 1)",
 								}}
 							/>
-						</BarBox>
+						</Bar>
 					</Tooltip>
 				)
 			)}

From 8dc353ce90df6b3a3cdf37c39c3a6aab97ec35ea Mon Sep 17 00:00:00 2001
From: Owaise Imdad <owaiseimdad@gmail.com>
Date: Mon, 3 Mar 2025 23:14:21 +0530
Subject: [PATCH 06/19] Removed the constant values.

---
 src/Components/Charts/Bar/index.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/Components/Charts/Bar/index.jsx b/src/Components/Charts/Bar/index.jsx
index 5826788a6..e6d5fbea3 100644
--- a/src/Components/Charts/Bar/index.jsx
+++ b/src/Components/Charts/Bar/index.jsx
@@ -27,8 +27,6 @@ const Bar = ({ width, height, backgroundColor, borderRadius, children }) => {
 			backgroundColor={backgroundColor}
 			sx={{
 				borderRadius: borderRadius || theme.spacing(1.5),
-				gap: "2px",
-				display: "flex",
 			}}
 		>
 			{children}

From f3537131efbfb598c1ca30d25d1dcca3e82f4c2d Mon Sep 17 00:00:00 2001
From: Owaise Imdad <owaiseimdad@gmail.com>
Date: Tue, 4 Mar 2025 06:09:54 +0530
Subject: [PATCH 07/19] made the component to come outside of the main
 function.

---
 src/Components/Charts/Bar/index.jsx           | 45 -------------------
 .../Charts/StatusPageBarChart/index.jsx       | 44 ++++++++++++++++--
 2 files changed, 41 insertions(+), 48 deletions(-)
 delete mode 100644 src/Components/Charts/Bar/index.jsx

diff --git a/src/Components/Charts/Bar/index.jsx b/src/Components/Charts/Bar/index.jsx
deleted file mode 100644
index e6d5fbea3..000000000
--- a/src/Components/Charts/Bar/index.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Box } from "@mui/material";
-import { useTheme } from "@emotion/react";
-import PropTypes from "prop-types";
-
-/**
- * A customizable Bar component that renders a colored bar with optional children.
- *
- * @component
- *
- * @param {string} width The width of the bar (e.g., "100px").
- * @param {string} height The height of the bar (e.g., "50px").
- * @param {string} backgroundColor The background color of the bar (e.g., "#FF5733").
- * @param {string} [borderRadius] Optional border radius for the bar (e.g., "8px").
- * @param {node} children The content to be rendered inside the bar.
- *
- * @returns {JSX.Element} The Bar component.
- */
-
-const Bar = ({ width, height, backgroundColor, borderRadius, children }) => {
-	const theme = useTheme();
-
-	return (
-		<Box
-			position="relative"
-			width={width}
-			height={height}
-			backgroundColor={backgroundColor}
-			sx={{
-				borderRadius: borderRadius || theme.spacing(1.5),
-			}}
-		>
-			{children}
-		</Box>
-	);
-};
-
-Bar.propTypes = {
-	width: PropTypes.string.isRequired,
-	height: PropTypes.string.isRequired,
-	backgroundColor: PropTypes.string.isRequired,
-	borderRadius: PropTypes.string,
-	children: PropTypes.node,
-};
-
-export default Bar;
diff --git a/src/Components/Charts/StatusPageBarChart/index.jsx b/src/Components/Charts/StatusPageBarChart/index.jsx
index 84015da4a..29a52b053 100644
--- a/src/Components/Charts/StatusPageBarChart/index.jsx
+++ b/src/Components/Charts/StatusPageBarChart/index.jsx
@@ -3,7 +3,45 @@ import { Box, Stack, Tooltip, Typography } from "@mui/material";
 import { formatDateWithTz } from "../../../Utils/timeUtils";
 import { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import Bar from "../Bar";
+import PropTypes from "prop-types";
+
+/**
+ * A customizable Bar component that renders a colored bar with optional children.
+ * @component
+ *
+ * @param {string} width The width of the bar (e.g., "100px").
+ * @param {string} height The height of the bar (e.g., "50px").
+ * @param {string} backgroundColor The background color of the bar (e.g., "#FF5733").
+ * @param {string} [borderRadius] Optional border radius for the bar (e.g., "8px").
+ * @param {node} children The content to be rendered inside the bar.
+ * @returns {JSX.Element} The Bar component.
+ */
+
+const Bar = ({ width, height, backgroundColor, borderRadius, children }) => {
+	const theme = useTheme();
+
+	return (
+		<Box
+			position="relative"
+			width={width}
+			height={height}
+			backgroundColor={backgroundColor}
+			sx={{
+				borderRadius: borderRadius || theme.spacing(1.5),
+			}}
+		>
+			{children}
+		</Box>
+	);
+};
+
+Bar.propTypes = {
+	width: PropTypes.string.isRequired,
+	height: PropTypes.string.isRequired,
+	backgroundColor: PropTypes.string.isRequired,
+	borderRadius: PropTypes.string,
+	children: PropTypes.node,
+};
 
 /* TODO add prop validation and jsdocs */
 const StatusPageBarChart = ({ checks = [] }) => {
@@ -44,7 +82,7 @@ const StatusPageBarChart = ({ checks = [] }) => {
 					// even if there are less than 25 checks
 					<Bar
 						key={`${check}-${index}`}
-						width="calc(85% / 25)"
+						width="calc(60% / 25)"
 						height="100%"
 						backgroundColor={theme.palette.primary.lowContrast}
 					/>
@@ -138,7 +176,7 @@ const StatusPageBarChart = ({ checks = [] }) => {
 						}}
 					>
 						<Bar
-							width="calc(85% / 25)"
+							width="calc(60% / 25)"
 							height="100%"
 							backgroundColor={theme.palette.primary.lowContrast}
 						>

From 751e83f909c3f275c3778d97d13c1eccfba252a4 Mon Sep 17 00:00:00 2001
From: Owaise Imdad <owaiseimdad@gmail.com>
Date: Tue, 4 Mar 2025 08:30:44 +0530
Subject: [PATCH 08/19] FIX-1847 incident page changes with respect to length
 and width.

---
 src/Components/Inputs/Select/index.jsx        |  2 +-
 .../Components/OptionsHeader/index.jsx        | 23 ++++-----------
 src/Utils/Input/utils.jsx                     | 28 +++++++++++++------
 3 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/src/Components/Inputs/Select/index.jsx b/src/Components/Inputs/Select/index.jsx
index 4be84b6e0..49749f2ca 100644
--- a/src/Components/Inputs/Select/index.jsx
+++ b/src/Components/Inputs/Select/index.jsx
@@ -158,7 +158,7 @@ Select.propTypes = {
 	sx: PropTypes.object,
 	labelControlSpacing: PropTypes.number,
 	truncate: PropTypes.bool, // New prop: enable/disable truncation
-	maxTruncateLength: PropTypes.number, // New prop: configurable length
+	maxTruncateLength: PropTypes.number, // New prop: deafult is 15
 };
 
 export default Select;
diff --git a/src/Pages/Incidents/Components/OptionsHeader/index.jsx b/src/Pages/Incidents/Components/OptionsHeader/index.jsx
index 2e0db24c9..d61899d23 100644
--- a/src/Pages/Incidents/Components/OptionsHeader/index.jsx
+++ b/src/Pages/Incidents/Components/OptionsHeader/index.jsx
@@ -25,7 +25,6 @@ const OptionsHeader = ({
 		direction: "row",
 		alignItems: "center",
 		gap: theme.spacing(6),
-		marginLeft: "5px",
 	};
 
 	if (!shouldRender) return <SkeletonLayout />;
@@ -68,15 +67,10 @@ const OptionsHeader = ({
 					sx={{
 						ml: "auto",
 						alignItems: "stretch",
-						"& .MuiButtonBase-root": {
-							whiteSpace: "nowrap",
-							height: "auto",
-							"&.MuiButton-group": {
-								borderColor: theme.palette.primary.lowContrast,
-							},
-						},
-						"& .MuiButtonBase-root:hover": {
+						"& .MuiButtonBase-root, & .MuiButtonBase-root:hover": {
 							borderColor: theme.palette.primary.lowContrast,
+							width: "auto",
+							whiteSpace: "nowrap",
 						},
 					}}
 				>
@@ -115,15 +109,10 @@ const OptionsHeader = ({
 					sx={{
 						ml: "auto",
 						alignItems: "stretch",
-						"& .MuiButtonBase-root": {
-							whiteSpace: "nowrap",
-							height: "auto",
-							"&.MuiButton-group": {
-								borderColor: theme.palette.primary.lowContrast,
-							},
-						},
-						"& .MuiButtonBase-root:hover": {
+						"& .MuiButtonBase-root, & .MuiButtonBase-root:hover": {
 							borderColor: theme.palette.primary.lowContrast,
+							width: "auto",
+							whiteSpace: "nowrap",
 						},
 					}}
 				>
diff --git a/src/Utils/Input/utils.jsx b/src/Utils/Input/utils.jsx
index 3d567fe8d..f0cb75ac7 100644
--- a/src/Utils/Input/utils.jsx
+++ b/src/Utils/Input/utils.jsx
@@ -1,27 +1,37 @@
+import PropTypes from "prop-types";
+
 /**
  * Utility function to render a truncated value with an optional title.
- * @param {string} value - The selected value (But this will always come as id).
- * @param {array} items - The list of items to find the selected value from.
+ * @param {string} displayName - The name or text to display.
  * @param {boolean} truncate - Whether to truncate the text or not.
  * @param {number} maxLength - The maximum length of the text.
- * @param {string} placeholder - Placeholder text if no value is selected.
+ * @param {string} placeholder - Placeholder text if no value is provided.
  * @returns {JSX.Element} - The JSX element for the rendered value.
  */
 
-export const renderTruncatedValue = (displayName, truncate, maxLength, placeholder) => {
-	// If no value or the value is '0', return the placeholder
+export const renderTruncatedValue = function (
+	displayName,
+	truncate,
+	maxLength,
+	placeholder
+) {
 	if (!displayName || displayName === "0") return placeholder;
 
-	// Function to truncate the text with a dotted end
-	const truncateTextWithDottedEnds = (text, maxLength) => {
+	const truncateTextWithDottedEnds = function (text, maxLength) {
 		if (!text || text.length <= maxLength) return text;
 		return `${text.substring(0, maxLength)}...`;
 	};
 
-	// If truncation is enabled, return the truncated text with a title for full value
 	return truncate ? (
 		<span title={displayName}>{truncateTextWithDottedEnds(displayName, maxLength)}</span>
 	) : (
-		displayName
+		<span title={displayName}>{displayName}</span>
 	);
 };
+
+renderTruncatedValue.propTypes = {
+	displayName: PropTypes.string, // The name or text to display
+	truncate: PropTypes.bool, // Whether to truncate the text or not
+	maxLength: PropTypes.number, // The maximum length of the text
+	placeholder: PropTypes.string, // Placeholder text if no value is provided
+};

From 0eebd2929b17ec2438667e3ca93ba27d62c72eed Mon Sep 17 00:00:00 2001
From: Owaise Imdad <owaiseimdad@gmail.com>
Date: Tue, 4 Mar 2025 09:00:37 +0530
Subject: [PATCH 09/19] FIX-1847 added methods in string utils in order to
 utilise in our code.

---
 src/Utils/Input/utils.jsx |  3 ++-
 src/Utils/stringUtils.js  | 47 +++++++++++++++++++++++++++------------
 2 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/src/Utils/Input/utils.jsx b/src/Utils/Input/utils.jsx
index f0cb75ac7..f9a3b0137 100644
--- a/src/Utils/Input/utils.jsx
+++ b/src/Utils/Input/utils.jsx
@@ -1,4 +1,5 @@
 import PropTypes from "prop-types";
+import { isEmpty } from "../stringUtils";
 
 /**
  * Utility function to render a truncated value with an optional title.
@@ -15,7 +16,7 @@ export const renderTruncatedValue = function (
 	maxLength,
 	placeholder
 ) {
-	if (!displayName || displayName === "0") return placeholder;
+	if (isEmpty(displayName)) return placeholder;
 
 	const truncateTextWithDottedEnds = function (text, maxLength) {
 		if (!text || text.length <= maxLength) return text;
diff --git a/src/Utils/stringUtils.js b/src/Utils/stringUtils.js
index 0bf7aaf11..6693a420f 100644
--- a/src/Utils/stringUtils.js
+++ b/src/Utils/stringUtils.js
@@ -3,8 +3,8 @@
  * @param {string} str String whose first letter is to be capitalized
  * @returns A string with first letter capitalized
  */
-export const capitalizeFirstLetter = (str) => {	
-  if (str === null || str === undefined) {
+export const capitalizeFirstLetter = (str) => {
+	if (str === null || str === undefined) {
 		return "";
 	}
 	if (typeof str !== "string") {
@@ -12,7 +12,7 @@ export const capitalizeFirstLetter = (str) => {
 	}
 	if (str.length === 0) {
 		return "";
-	}  
+	}
 	return str.charAt(0).toUpperCase() + str.slice(1);
 };
 
@@ -22,15 +22,34 @@ export const capitalizeFirstLetter = (str) => {
  * @returns A string with first letter lower cased
  */
 
-export const toLowerCaseFirstLetter = (str) => {	
+export const toLowerCaseFirstLetter = (str) => {
 	if (str === null || str === undefined) {
-		  return "";
-	  }
-	  if (typeof str !== "string") {
-		  throw new TypeError("Input must be a string");
-	  }
-	  if (str.length === 0) {
-		  return "";
-	  }  
-	  return str.charAt(0).toLowerCase() + str.slice(1);
-  };
\ No newline at end of file
+		return "";
+	}
+	if (typeof str !== "string") {
+		throw new TypeError("Input must be a string");
+	}
+	if (str.length === 0) {
+		return "";
+	}
+	return str.charAt(0).toLowerCase() + str.slice(1);
+};
+
+/**
+ * Checks if a string is null, undefined, or empty (including strings with only whitespace).
+ * @param {string} str - The string to check.
+ * @returns {boolean} - Returns true if the string is null, undefined, or empty.
+ */
+export const isEmpty = (str) => {
+	// Check if string is null, undefined, or empty (including whitespace only)
+	return str === null || str === undefined || str.trim().length === 0;
+};
+
+/**
+ * Checks if a string is not null, undefined, and not empty (including strings with only whitespace).
+ * @param {string} str - The string to check.
+ * @returns {boolean} - Returns true if the string is not null, undefined, and not empty.
+ */
+export const isNotEmpty = (str) => {
+	return !isEmpty(str);
+};

From 4d437a889811488470d622c1ef857982ec85dfc6 Mon Sep 17 00:00:00 2001
From: Owaise Imdad <owaiseimdad@gmail.com>
Date: Tue, 4 Mar 2025 13:36:42 +0530
Subject: [PATCH 10/19] FIX-1847 added all the changes and removed the truncate
 algo.

---
 src/Components/Inputs/Select/index.jsx        |  8 ----
 .../Components/OptionsHeader/index.jsx        | 24 +-----------
 src/Utils/Input/utils.jsx                     | 38 -------------------
 src/Utils/Theme/globalTheme.js                | 12 ++++++
 src/Utils/stringUtils.js                      | 11 +-----
 5 files changed, 15 insertions(+), 78 deletions(-)
 delete mode 100644 src/Utils/Input/utils.jsx

diff --git a/src/Components/Inputs/Select/index.jsx b/src/Components/Inputs/Select/index.jsx
index 49749f2ca..189ff360c 100644
--- a/src/Components/Inputs/Select/index.jsx
+++ b/src/Components/Inputs/Select/index.jsx
@@ -2,7 +2,6 @@ import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { MenuItem, Select as MuiSelect, Stack, Typography } from "@mui/material";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import { renderTruncatedValue } from "../../../Utils/Input/utils";
 import "./index.css";
 
 /**
@@ -50,8 +49,6 @@ const Select = ({
 	sx,
 	name = "",
 	labelControlSpacing = 2,
-	truncate = false,
-	maxTruncateLength = 15,
 }) => {
 	const theme = useTheme();
 
@@ -65,10 +62,6 @@ const Select = ({
 		margin: theme.spacing(2),
 	};
 
-	const renderShortValue = () => {
-		return renderTruncatedValue(displayName, truncate, maxTruncateLength, placeholder);
-	};
-
 	return (
 		<Stack
 			gap={theme.spacing(labelControlSpacing)}
@@ -109,7 +102,6 @@ const Select = ({
 					},
 					...sx,
 				}}
-				renderValue={renderShortValue}
 			>
 				{placeholder && (
 					<MenuItem
diff --git a/src/Pages/Incidents/Components/OptionsHeader/index.jsx b/src/Pages/Incidents/Components/OptionsHeader/index.jsx
index d61899d23..c3a15963d 100644
--- a/src/Pages/Incidents/Components/OptionsHeader/index.jsx
+++ b/src/Pages/Incidents/Components/OptionsHeader/index.jsx
@@ -63,17 +63,7 @@ const OptionsHeader = ({
 				>
 					Filter by:
 				</Typography>
-				<ButtonGroup
-					sx={{
-						ml: "auto",
-						alignItems: "stretch",
-						"& .MuiButtonBase-root, & .MuiButtonBase-root:hover": {
-							borderColor: theme.palette.primary.lowContrast,
-							width: "auto",
-							whiteSpace: "nowrap",
-						},
-					}}
-				>
+				<ButtonGroup>
 					<Button
 						variant="group"
 						filled={(filter === "all").toString()}
@@ -105,17 +95,7 @@ const OptionsHeader = ({
 				>
 					Show:
 				</Typography>
-				<ButtonGroup
-					sx={{
-						ml: "auto",
-						alignItems: "stretch",
-						"& .MuiButtonBase-root, & .MuiButtonBase-root:hover": {
-							borderColor: theme.palette.primary.lowContrast,
-							width: "auto",
-							whiteSpace: "nowrap",
-						},
-					}}
-				>
+				<ButtonGroup>
 					<Button
 						variant="group"
 						filled={(dateRange === "hour").toString()}
diff --git a/src/Utils/Input/utils.jsx b/src/Utils/Input/utils.jsx
deleted file mode 100644
index f9a3b0137..000000000
--- a/src/Utils/Input/utils.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import PropTypes from "prop-types";
-import { isEmpty } from "../stringUtils";
-
-/**
- * Utility function to render a truncated value with an optional title.
- * @param {string} displayName - The name or text to display.
- * @param {boolean} truncate - Whether to truncate the text or not.
- * @param {number} maxLength - The maximum length of the text.
- * @param {string} placeholder - Placeholder text if no value is provided.
- * @returns {JSX.Element} - The JSX element for the rendered value.
- */
-
-export const renderTruncatedValue = function (
-	displayName,
-	truncate,
-	maxLength,
-	placeholder
-) {
-	if (isEmpty(displayName)) return placeholder;
-
-	const truncateTextWithDottedEnds = function (text, maxLength) {
-		if (!text || text.length <= maxLength) return text;
-		return `${text.substring(0, maxLength)}...`;
-	};
-
-	return truncate ? (
-		<span title={displayName}>{truncateTextWithDottedEnds(displayName, maxLength)}</span>
-	) : (
-		<span title={displayName}>{displayName}</span>
-	);
-};
-
-renderTruncatedValue.propTypes = {
-	displayName: PropTypes.string, // The name or text to display
-	truncate: PropTypes.bool, // Whether to truncate the text or not
-	maxLength: PropTypes.number, // The maximum length of the text
-	placeholder: PropTypes.string, // Placeholder text if no value is provided
-};
diff --git a/src/Utils/Theme/globalTheme.js b/src/Utils/Theme/globalTheme.js
index 66631edec..3598af675 100644
--- a/src/Utils/Theme/globalTheme.js
+++ b/src/Utils/Theme/globalTheme.js
@@ -382,6 +382,18 @@ const baseTheme = (palette) => ({
 				}),
 			},
 		},
+		MuiButtonGroup: {
+			styleOverrides: {
+				root: ({ theme }) => ({
+					ml: "auto",
+					"& .MuiButtonBase-root, & .MuiButtonBase-root:hover": {
+						borderColor: theme.palette.primary.lowContrast,
+						width: "auto",
+						whiteSpace: "nowrap",
+					},
+				}),
+			},
+		},
 	},
 	shape: {
 		borderRadius: 2,
diff --git a/src/Utils/stringUtils.js b/src/Utils/stringUtils.js
index 6693a420f..bb62d0169 100644
--- a/src/Utils/stringUtils.js
+++ b/src/Utils/stringUtils.js
@@ -42,14 +42,5 @@ export const toLowerCaseFirstLetter = (str) => {
  */
 export const isEmpty = (str) => {
 	// Check if string is null, undefined, or empty (including whitespace only)
-	return str === null || str === undefined || str.trim().length === 0;
-};
-
-/**
- * Checks if a string is not null, undefined, and not empty (including strings with only whitespace).
- * @param {string} str - The string to check.
- * @returns {boolean} - Returns true if the string is not null, undefined, and not empty.
- */
-export const isNotEmpty = (str) => {
-	return !isEmpty(str);
+	return str === null || typeof str === "undefined" || str.trim().length === 0;
 };

From eafaa415eca2bafb77b5b938b0ea29a27de9612d Mon Sep 17 00:00:00 2001
From: Owaise Imdad <owaiseimdad@gmail.com>
Date: Tue, 4 Mar 2025 13:38:52 +0530
Subject: [PATCH 11/19] Removed redundant code.

---
 src/Components/Inputs/Select/index.jsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/Components/Inputs/Select/index.jsx b/src/Components/Inputs/Select/index.jsx
index 189ff360c..9f128bd37 100644
--- a/src/Components/Inputs/Select/index.jsx
+++ b/src/Components/Inputs/Select/index.jsx
@@ -2,6 +2,7 @@ import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { MenuItem, Select as MuiSelect, Stack, Typography } from "@mui/material";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+
 import "./index.css";
 
 /**
@@ -52,9 +53,6 @@ const Select = ({
 }) => {
 	const theme = useTheme();
 
-	const selectedItem = items.find((item) => item._id === value);
-	const displayName = selectedItem ? selectedItem.name : "";
-
 	const itemStyles = {
 		fontSize: "var(--env-var-font-size-medium)",
 		color: theme.palette.primary.contrastTextTertiary,
@@ -149,8 +147,6 @@ Select.propTypes = {
 	onBlur: PropTypes.func,
 	sx: PropTypes.object,
 	labelControlSpacing: PropTypes.number,
-	truncate: PropTypes.bool, // New prop: enable/disable truncation
-	maxTruncateLength: PropTypes.number, // New prop: deafult is 15
 };
 
 export default Select;

From b49096cfe460e7034f0fa70877c780ad5f685816 Mon Sep 17 00:00:00 2001
From: Owaise Imdad <owaiseimdad@gmail.com>
Date: Tue, 4 Mar 2025 13:39:48 +0530
Subject: [PATCH 12/19] Extra space removed.

---
 src/Components/Inputs/Select/index.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Components/Inputs/Select/index.jsx b/src/Components/Inputs/Select/index.jsx
index 9f128bd37..f0a1d11c0 100644
--- a/src/Components/Inputs/Select/index.jsx
+++ b/src/Components/Inputs/Select/index.jsx
@@ -52,7 +52,6 @@ const Select = ({
 	labelControlSpacing = 2,
 }) => {
 	const theme = useTheme();
-
 	const itemStyles = {
 		fontSize: "var(--env-var-font-size-medium)",
 		color: theme.palette.primary.contrastTextTertiary,

From c5326e5d6a19777b38792c2b35af4f348b636ab0 Mon Sep 17 00:00:00 2001
From: Owaise Imdad <owaiseimdad@gmail.com>
Date: Tue, 4 Mar 2025 15:53:40 +0530
Subject: [PATCH 13/19] Added a constant and utilised a responsive-values in
 MUI.

---
 src/Components/Charts/StatusPageBarChart/index.jsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/Components/Charts/StatusPageBarChart/index.jsx b/src/Components/Charts/StatusPageBarChart/index.jsx
index 29a52b053..e912934a0 100644
--- a/src/Components/Charts/StatusPageBarChart/index.jsx
+++ b/src/Components/Charts/StatusPageBarChart/index.jsx
@@ -49,6 +49,11 @@ const StatusPageBarChart = ({ checks = [] }) => {
 	const [animate, setAnimate] = useState(false);
 	const uiTimezone = useSelector((state) => state.ui.timezone);
 
+	const barWidth = {
+		xs: "calc(60% / 25)",
+		xl: "calc(40% / 25)",
+	};
+
 	useEffect(() => {
 		setAnimate(true);
 	}, []);
@@ -82,7 +87,7 @@ const StatusPageBarChart = ({ checks = [] }) => {
 					// even if there are less than 25 checks
 					<Bar
 						key={`${check}-${index}`}
-						width="calc(60% / 25)"
+						width={barWidth}
 						height="100%"
 						backgroundColor={theme.palette.primary.lowContrast}
 					/>
@@ -176,7 +181,7 @@ const StatusPageBarChart = ({ checks = [] }) => {
 						}}
 					>
 						<Bar
-							width="calc(60% / 25)"
+							width={barWidth}
 							height="100%"
 							backgroundColor={theme.palette.primary.lowContrast}
 						>

From 740887e61ab30752821a6ae6926ccbaf602ea1af Mon Sep 17 00:00:00 2001
From: Aditya <adirismis31@gmail.com>
Date: Tue, 4 Mar 2025 22:31:20 +0530
Subject: [PATCH 14/19] fix(sidebar): Implement PR review feedback

---
 src/Components/Sidebar/index.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Components/Sidebar/index.jsx b/src/Components/Sidebar/index.jsx
index 432fc673b..3b78d9f51 100644
--- a/src/Components/Sidebar/index.jsx
+++ b/src/Components/Sidebar/index.jsx
@@ -781,7 +781,7 @@ function Sidebar() {
 						},
 					}}
 					sx={{
-						ml: theme.spacing(8),
+						ml: theme.spacing(4),
 					}}
 				>
 					{collapsed && (
@@ -825,7 +825,7 @@ function Sidebar() {
 					)}
 					{/* TODO Do we need two dividers? */}
 					{collapsed && <Divider />}
-					<Divider />
+					{/* <Divider /> */}
 					{renderAccountMenuItems()}
 					<MenuItem
 						onClick={logout}

From 2065f420d1f3ce768b4675d62fbbfcf5259438c3 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 4 Mar 2025 10:18:24 -0800
Subject: [PATCH 15/19] Add

---
 src/Utils/NetworkService.js | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/Utils/NetworkService.js b/src/Utils/NetworkService.js
index 73a54136d..1f6a36726 100644
--- a/src/Utils/NetworkService.js
+++ b/src/Utils/NetworkService.js
@@ -807,6 +807,31 @@ class NetworkService {
 		);
 	}
 
+	getDistributedUptimeMonitors(config) {
+		const { teamId, limit, types, page, rowsPerPage, filter, field, order } = config;
+
+		const params = new URLSearchParams();
+
+		if (limit) params.append("limit", limit);
+		if (types) {
+			types.forEach((type) => {
+				params.append("type", type);
+			});
+		}
+		if (page) params.append("page", page);
+		if (rowsPerPage) params.append("rowsPerPage", rowsPerPage);
+		if (filter) params.append("filter", filter);
+		if (field) params.append("field", field);
+		if (order) params.append("order", order);
+
+		if (this.eventSource) {
+			this.eventSource.close();
+		}
+
+		const url = `${this.axiosInstance.defaults.baseURL}/distributed-uptime/monitors/${teamId}/initial?${params.toString()}`;
+		return this.axiosInstance.get(url);
+	}
+
 	subscribeToDistributedUptimeMonitors(config) {
 		const {
 			teamId,

From a0830f0f34ad1f1906255686aacae5cc3ba8a060 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 4 Mar 2025 10:18:36 -0800
Subject: [PATCH 16/19] add initial data fetch

---
 .../Monitors/Hooks/useSubscribeToMonitors.jsx | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx b/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx
index 6855c44c5..ffca50cd7 100644
--- a/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx
+++ b/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx
@@ -20,6 +20,43 @@ const useSubscribeToMonitors = (page, rowsPerPage) => {
 	const { getMonitorWithPercentage } = useMonitorUtils();
 
 	useEffect(() => {
+		const fetchInitialData = async () => {
+			try {
+				const initialDataRes = await networkService.getDistributedUptimeMonitors({
+					teamId: user.teamId,
+					limit: 25,
+					types: [
+						typeof import.meta.env.VITE_DEPIN_TESTING === "undefined"
+							? "distributed_http"
+							: "distributed_test",
+					],
+					page,
+					rowsPerPage,
+				});
+				const responseData = initialDataRes?.data?.data;
+				if (typeof responseData === "undefined") throw new Error("No data");
+
+				const { monitors, filteredMonitors, summary } = responseData;
+
+				const mappedMonitors = filteredMonitors?.map((monitor) =>
+					getMonitorWithPercentage(monitor, theme)
+				);
+
+				setMonitors(monitors);
+				setMonitorsSummary(summary);
+				setFilteredMonitors(mappedMonitors);
+			} catch (error) {
+				setNetworkError(true);
+				createToast({
+					body: error.message,
+				});
+			} finally {
+				setIsLoading(false);
+			}
+		};
+
+		fetchInitialData();
+
 		try {
 			const cleanup = networkService.subscribeToDistributedUptimeMonitors({
 				teamId: user.teamId,

From f490e13b2e0a90ec12699c50e8109f7a2ebbc0bf Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 4 Mar 2025 11:19:21 -0800
Subject: [PATCH 17/19] remove devices

---
 src/Components/Sidebar/index.jsx              |  2 +-
 .../Details/Hooks/useSubscribeToDetails.jsx   | 68 +------------------
 2 files changed, 3 insertions(+), 67 deletions(-)

diff --git a/src/Components/Sidebar/index.jsx b/src/Components/Sidebar/index.jsx
index 3b78d9f51..c82f2e5be 100644
--- a/src/Components/Sidebar/index.jsx
+++ b/src/Components/Sidebar/index.jsx
@@ -63,7 +63,7 @@ const menu = [
 
 	{ name: "Status pages", path: "status", icon: <StatusPages /> },
 	{ name: "Maintenance", path: "maintenance", icon: <Maintenance /> },
-	{ name: "Integrations", path: "integrations", icon: <Integrations /> },
+	// { name: "Integrations", path: "integrations", icon: <Integrations /> },
 	{
 		name: "Settings",
 		icon: <Settings />,
diff --git a/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx b/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx
index 684ae587b..7febdc478 100644
--- a/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx
+++ b/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx
@@ -1,49 +1,6 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 import { networkService } from "../../../../main";
 
-const getRandomDevice = () => {
-	const manufacturers = {
-		Apple: ["iPhone 15 Pro Max", "iPhone 15", "iPhone 14 Pro", "iPhone 14", "iPhone 13"],
-		Samsung: [
-			"Galaxy S23 Ultra",
-			"Galaxy S23+",
-			"Galaxy S23",
-			"Galaxy Z Fold5",
-			"Galaxy Z Flip5",
-		],
-		Google: ["Pixel 8 Pro", "Pixel 8", "Pixel 7a", "Pixel 7", "Pixel 6a"],
-		OnePlus: [
-			"OnePlus 11",
-			"OnePlus 10T",
-			"OnePlus Nord 3",
-			"OnePlus 10 Pro",
-			"OnePlus Nord 2T",
-		],
-		Xiaomi: ["13 Pro", "13", "Redmi Note 12", "POCO F5", "Redmi 12"],
-		Huawei: ["P60 Pro", "Mate X3", "Nova 11", "P50 Pro", "Mate 50"],
-		Sony: ["Xperia 1 V", "Xperia 5 V", "Xperia 10 V", "Xperia Pro-I", "Xperia 1 IV"],
-		Motorola: ["Edge 40 Pro", "Edge 40", "G84", "G54", "Razr 40 Ultra"],
-		ASUS: [
-			"ROG Phone 7",
-			"Zenfone 10",
-			"ROG Phone 6",
-			"Zenfone 9",
-			"ROG Phone 7 Ultimate",
-		],
-	};
-
-	const manufacturerNames = Object.keys(manufacturers);
-	const randomManufacturer =
-		manufacturerNames[Math.floor(Math.random() * manufacturerNames.length)];
-
-	const models = manufacturers[randomManufacturer];
-	const randomModel = models[Math.floor(Math.random() * models.length)];
-
-	return {
-		manufacturer: randomManufacturer,
-		model: randomModel,
-	};
-};
 const useSubscribeToDetails = ({ monitorId, isPublic, isPublished, dateRange }) => {
 	const [isLoading, setIsLoading] = useState(true);
 	const [connectionStatus, setConnectionStatus] = useState(undefined);
@@ -51,9 +8,6 @@ const useSubscribeToDetails = ({ monitorId, isPublic, isPublished, dateRange })
 	const [networkError, setNetworkError] = useState(false);
 	const [monitor, setMonitor] = useState(undefined);
 	const [lastUpdateTrigger, setLastUpdateTrigger] = useState(0);
-	const [devices, setDevices] = useState(Array.from({ length: 5 }, getRandomDevice));
-
-	const prevDateRangeRef = useRef(dateRange);
 
 	useEffect(() => {
 		if (typeof monitorId === "undefined") {
@@ -77,15 +31,7 @@ const useSubscribeToDetails = ({ monitorId, isPublic, isPublished, dateRange })
 						setNetworkError(false);
 					}
 					setLastUpdateTrigger(Date.now());
-					const latestChecksWithDevice = data?.monitor?.latestChecks.map((check, idx) => {
-						check.device = devices[idx];
-						return check;
-					});
-					const monitorWithDevice = {
-						...data.monitor,
-						latestChecks: latestChecksWithDevice,
-					};
-					setMonitor(monitorWithDevice);
+					setMonitor(data.monitor);
 				},
 				onOpen: () => {
 					setConnectionStatus("up");
@@ -107,21 +53,11 @@ const useSubscribeToDetails = ({ monitorId, isPublic, isPublished, dateRange })
 		retryCount,
 		setConnectionStatus,
 		networkError,
-		devices,
 		isLoading,
 		isPublic,
 		isPublished,
 	]);
 
-	useEffect(() => {
-		const hasDateRangeChanged = prevDateRangeRef.current !== dateRange;
-		prevDateRangeRef.current = dateRange; // Update the ref to the current dateRange
-
-		if (!hasDateRangeChanged) {
-			setDevices(Array.from({ length: 5 }, getRandomDevice));
-		}
-	}, [dateRange]);
-
 	return [isLoading, networkError, connectionStatus, monitor, lastUpdateTrigger];
 };
 

From a2c35c903bff01edffae7401a936c5aa0d4f3edd Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 4 Mar 2025 11:52:50 -0800
Subject: [PATCH 18/19] add getDistributedUptimeDetails

---
 src/Utils/NetworkService.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/Utils/NetworkService.js b/src/Utils/NetworkService.js
index 1f6a36726..c15a816e0 100644
--- a/src/Utils/NetworkService.js
+++ b/src/Utils/NetworkService.js
@@ -897,6 +897,15 @@ class NetworkService {
 		};
 	}
 
+	getDistributedUptimeDetails(config) {
+		const params = new URLSearchParams();
+		const { monitorId, onUpdate, onOpen, onError, dateRange, normalize } = config;
+		if (dateRange) params.append("dateRange", dateRange);
+		if (normalize) params.append("normalize", normalize);
+		const url = `${this.axiosInstance.defaults.baseURL}/distributed-uptime/monitors/details/${monitorId}/initial?${params.toString()}`;
+		return this.axiosInstance.get(url);
+	}
+
 	subscribeToDistributedUptimeDetails(config) {
 		const params = new URLSearchParams();
 		const { monitorId, onUpdate, onOpen, onError, dateRange, normalize } = config;

From ceedf231bda3cd7b53ebf644b5d286c07fbf57ca Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 4 Mar 2025 11:53:04 -0800
Subject: [PATCH 19/19] fetch initial data

---
 .../Details/Hooks/useSubscribeToDetails.jsx   | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx b/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx
index 7febdc478..99e048e26 100644
--- a/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx
+++ b/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import { networkService } from "../../../../main";
+import { createToast } from "../../../../Utils/toastUtils";
 
 const useSubscribeToDetails = ({ monitorId, isPublic, isPublished, dateRange }) => {
 	const [isLoading, setIsLoading] = useState(true);
@@ -18,6 +19,35 @@ const useSubscribeToDetails = ({ monitorId, isPublic, isPublished, dateRange })
 			return;
 		}
 
+		// Get initial data
+
+		const fetchInitialData = async () => {
+			try {
+				const res = await networkService.getDistributedUptimeDetails({
+					monitorId,
+					dateRange: dateRange,
+					normalize: true,
+				});
+				const responseData = res?.data?.data;
+
+				if (typeof responseData === "undefined") {
+					throw new Error("No data");
+				}
+
+				setLastUpdateTrigger(Date.now());
+				setMonitor(responseData);
+			} catch (error) {
+				setNetworkError(true);
+				createToast({
+					body: error.message,
+				});
+			} finally {
+				setIsLoading(false);
+			}
+		};
+
+		fetchInitialData();
+
 		try {
 			const cleanup = networkService.subscribeToDistributedUptimeDetails({
 				monitorId,