Merge pull request #3319 from bluewave-labs/develop

develop -> master

.gitignore

@@ -3,3 +3,6 @@
 .VSCodeCounter
 *.sh
 mongo
+node_modules/
+docs/architecture
+docs/reviews

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+echo "Running lint-staged..."
+cd client && npx lint-staged && cd ..
+cd server && npx lint-staged && cd ..

README.md

@@ -79,9 +79,8 @@ You can see the memory footprint of MongoDB and Redis on the same server (398Mb
 
 If you have any questions, suggestions or comments, you have several options: 
 
-- [Discord channel](https://discord.gg/NAb6H3UTjK)
-- [GitHub Discussions](https://github.com/bluewave-labs/bluewave-uptime/discussions)
-- [Reddit group](https://www.reddit.com/r/CheckmateMonitoring/)
+- [Discord channel](https://discord.gg/NAb6H3UTjK) (preferred)
+- [GitHub Discussions](https://github.com/bluewave-labs/bluewave-uptime/discussions) (we check here from time to time)
 
 Feel free to ask questions or share your ideas - we'd love to hear from you!
 
@@ -148,7 +147,7 @@ If you would like to sponsor an additional feature, [see this page](https://chec
 
 ## Contributing
 
-We are [Alex](http://github.com/ajhollid) (team lead), [Gorkem](http://github.com/gorkem-bwl/), [Owaise](http://github.com/Owaiseimdad), [Aryaman](https://github.com/Br0wnHammer), [Mert](https://github.com/mertssmnoglu) and [Karen](https://github.com/karenvicent) helping individuals and businesses monitor their infra and servers.
+We are [Alex](http://github.com/ajhollid) (team lead), [Gorkem](http://github.com/gorkem-bwl/), [Aryaman](https://github.com/Br0wnHammer), [Mert](https://github.com/mertssmnoglu) and [Karen](https://github.com/karenvicent) helping individuals and businesses monitor their infra and servers.
 
 We pride ourselves on building strong connections with contributors at every level. Despite being a young project, Checkmate has already earned 7000+ stars and attracted 90+ contributors from around the globe.
 

client/index.html

@@ -18,7 +18,7 @@
 		<div id="root"></div>
 		<script
 			type="module"
-			src="/src/main.jsx"
+			src="/src/main.tsx"
 		></script>
 	</body>
 </html>

client/package.json

@@ -12,15 +12,18 @@
 		"format": "prettier --write .",
 		"format-check": "prettier --check ."
 	},
+	"lint-staged": {
+		"**/*": "npm run format"
+	},
 	"dependencies": {
 		"@emotion/react": "^11.13.3",
 		"@emotion/styled": "^11.13.0",
 		"@hello-pangea/dnd": "^18.0.0",
 		"@hookform/resolvers": "5.2.2",
-		"@mui/lab": "6.0.0-dev.240424162023-9968b4889d",
-		"@mui/material": "6.4.11",
-		"@mui/x-charts": "^7.5.1",
-		"@mui/x-date-pickers": "7.29.0",
+		"@mui/lab": "7.0.0",
+		"@mui/material": "7.3.7",
+		"@mui/x-charts": "7.29.1",
+		"@mui/x-date-pickers": "7.29.4",
 		"@reduxjs/toolkit": "2.7.0",
 		"axios": "^1.7.4",
 		"dayjs": "1.11.13",
@@ -30,11 +33,12 @@
 		"i18next": "25.4.2",
 		"joi": "17.13.3",
 		"lucide-react": "^0.562.0",
-		"mui-color-input": "^6.0.0",
+		"mui-color-input": "^7.0.0",
+		"pretty-bytes": "^7.1.0",
 		"pretty-ms": "^9.3.0",
 		"react": "18.3.1",
 		"react-dom": "^18.2.0",
-		"react-hook-form": "7.63.0",
+		"react-hook-form": "^7.63.0",
 		"react-i18next": "^15.4.0",
 		"react-icons": "5.5.0",
 		"react-redux": "9.2.0",
@@ -45,7 +49,7 @@
 		"redux-persist": "6.0.0",
 		"swr": "^2.3.6",
 		"vite-plugin-svgr": "^4.2.0",
-		"zod": "4.1.11"
+		"zod": "^4.1.11"
 	},
 	"devDependencies": {
 		"@types/node": "24.5.2",
@@ -56,6 +60,7 @@
 		"eslint-plugin-react": "^7.34.1",
 		"eslint-plugin-react-hooks": "^5.0.0",
 		"eslint-plugin-react-refresh": "^0.4.6",
+		"lint-staged": "^16.2.7",
 		"prettier": "^3.3.3",
 		"typescript": "5.9.3",
 		"vite": "6.3.6"

client/src/App.tsx

@@ -1,27 +1,16 @@
-import { useEffect } from "react";
+import { type CSSProperties } from "react";
 import { useSelector } from "react-redux";
 import "react-toastify/dist/ReactToastify.css";
 import { ToastContainer } from "react-toastify";
 import { ThemeProvider } from "@emotion/react";
-import lightTheme from "./Utils/Theme/lightTheme";
-import darkTheme from "./Utils/Theme/darkTheme";
 import { CssBaseline, GlobalStyles } from "@mui/material";
-import { logger } from "./Utils/Logger"; // Import the logger
-import { networkService } from "./main";
 import { Routes } from "./Routes";
-import AppLayout from "@/Components/v1/Layouts/AppLayout";
+import AppLayout from "@/Components/layout/AppLayout";
+import type { RootState } from "@/Types/state";
+import { lightTheme, darkTheme } from "@/Utils/Theme/Theme";
 
 function App() {
-	const mode = useSelector((state) => state.ui.mode);
-
-	// Cleanup
-	useEffect(() => {
-		return () => {
-			logger.cleanup();
-			networkService.cleanup();
-		};
-	}, []);
-
+	const mode = useSelector((state: RootState) => state.ui.mode);
 	const theme = mode === "light" ? lightTheme : darkTheme;
 
 	return (
@@ -30,7 +19,7 @@ function App() {
 			<GlobalStyles
 				styles={{
 					body: {
-						backgroundColor: theme.palette.background.main,
+						backgroundColor: theme.palette.background.default,
 					},
 				}}
 			/>
@@ -40,10 +29,12 @@ function App() {
 			<ToastContainer
 				newestOnTop={true}
 				theme={mode}
-				style={{
-					"--toastify-color-progress-light": "#7C8BA1",
-					"--toastify-color-progress-dark": "#7C8BA1",
-				}}
+				style={
+					{
+						"--toastify-color-progress-light": "#7C8BA1",
+						"--toastify-color-progress-dark": "#7C8BA1",
+					} as CSSProperties
+				}
 			/>
 		</ThemeProvider>
 	);

client/src/Components/WalletProvider/index.css

@@ -1,53 +0,0 @@
-.wallet-adapter-dropdown {
-	width: 100%;
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	align-items: center;
-	gap: var(--env-var-spacing-1);
-}
-
-.wallet-adapter-button {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: auto;
-	height: var(--env-var-height-2) !important;
-	font-size: var(--env-var-font-size-medium-plus) !important;
-	font-weight: 500 !important;
-	margin: 0;
-	padding: calc(
-			(var(--env-var-height-2) - var(--env-var-font-size-medium-plus) * 1.2) / 2
-		)
-		var(--env-var-spacing-1);
-	white-space: nowrap;
-}
-
-.wallet-adapter-modal-title {
-	font-size: var(--font-size-h5) !important;
-}
-
-/* Separator styling */
-.wallet-adapter-modal-divider {
-	background-color: var(--border-color) !important;
-	margin: var(--spacing-md) 0 !important;
-}
-
-/* Responsive fixes */
-@media (max-width: 1200px) {
-	.wallet-adapter-button {
-		font-size: var(--env-var-font-size-medium) !important;
-		padding: calc((var(--env-var-height-2) - var(--env-var-font-size-medium) * 1.2) / 2)
-			var(--env-var-spacing-1-minus) !important;
-	}
-}
-
-@media (max-width: 900px) {
-	.wallet-adapter-modal-wrapper {
-		flex-direction: column !important;
-	}
-
-	.wallet-adapter-modal-divider {
-		margin: var(--spacing-sm) 0 !important;
-	}
-}

client/src/Components/WalletProvider/index.jsx

@@ -1,50 +0,0 @@
-// import { useMemo } from "react";
-// import { ConnectionProvider, WalletProvider } from "@solana/wallet-adapter-react";
-// import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
-// import {
-// 	UnsafeBurnerWalletAdapter,
-// 	PhantomWalletAdapter,
-// } from "@solana/wallet-adapter-wallets";
-
-// import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
-// import { clusterApiUrl } from "@solana/web3.js";
-// import PropTypes from "prop-types";
-// import "./index.css";
-
-// // Default styles that can be overridden by your app
-// import "@solana/wallet-adapter-react-ui/styles.css";
-
-// export const Wallet = ({ children }) => {
-// 	// The network can be set to 'devnet', 'testnet', or 'mainnet-beta'.
-// 	const network = WalletAdapterNetwork.Mainnet;
-
-// 	// You can also provide a custom RPC endpoint.
-// 	const endpoint = useMemo(() => clusterApiUrl(network), [network]);
-
-// 	const wallets = useMemo(
-// 		() => [new PhantomWalletAdapter()],
-// 		// eslint-disable-next-line react-hooks/exhaustive-deps
-// 		[network]
-// 	);
-
-// 	return (
-// 		<ConnectionProvider endpoint={endpoint}>
-// 			<WalletProvider
-// 				wallets={wallets}
-// 				autoConnect
-// 			>
-// 				<WalletModalProvider>{children}</WalletModalProvider>
-// 			</WalletProvider>
-// 		</ConnectionProvider>
-// 	);
-// };
-
-// Wallet.propTypes = {
-// 	children: PropTypes.node,
-// };
-
-const Wallet = ({ children }) => {
-	return children;
-};
-
-export default Wallet;

client/src/Components/common/charts/HeatmapResponseTime.tsx

@@ -2,7 +2,7 @@ import Box from "@mui/material/Box";
 import { useTheme } from "@mui/material/styles";
 import type { CheckSnapshot } from "@/Types/Check";
 import { getResponseColor } from "@/Utils/DataUtils";
-import { HeatmapResponseTimeTooltip } from "@/Components/v2/common/charts/HeatmapResponseTimeTooltip";
+import { HeatmapResponseTimeTooltip } from "@/Components/common/charts/HeatmapResponseTimeTooltip";
 import type { SxProps } from "@mui/material/styles";
 import type { ResponsiveStyleValue } from "@mui/system";
 

client/src/Components/common/charts/HeatmapResponseTimeTooltip.tsx

@@ -7,6 +7,7 @@ import { useTheme } from "@mui/material/styles";
 import { useSelector } from "react-redux";
 import type { RootState } from "@/Types/state";
 import { useTranslation } from "react-i18next";
+
 type HeatmapCheck =
 	| CheckSnapshot
 	| { status: "placeholder"; responseTime: 0; createdAt: "" };
@@ -55,12 +56,9 @@ export const HeatmapResponseTimeTooltip = ({
 					<Typography>
 						{formatDateWithTz(check?.createdAt, "ddd, MMMM D, YYYY, HH:mm A", uiTimezone)}
 					</Typography>
-					{check?.responseTime && (
-						<Typography>
-							{t("common.labels.responseTime")}: {check.responseTime.toFixed()} ms
-						</Typography>
-					)}
-
+					<Typography>
+						{t("common.labels.responseTime")}: {check.originalResponseTime.toFixed()} ms
+					</Typography>
 					<Typography textTransform={"capitalize"}>
 						Status:{" "}
 						<span style={{ color: getColor(check?.status) }}>

client/src/Components/common/charts/HistogramResponseTime.tsx

@@ -0,0 +1,155 @@
+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 type { ResponsiveStyleValue } from "@mui/system";
+import type { CheckSnapshot } from "@/Types/Check";
+import { HeatmapResponseTimeTooltip } from "./HeatmapResponseTimeTooltip";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+
+interface HistogramResponseTimeProps {
+	checks: CheckSnapshot[];
+	height?: ResponsiveStyleValue<number | string>;
+	gap?: ResponsiveStyleValue<number | string>;
+	showStats?: boolean;
+	statsPosition?: "left" | "right";
+}
+
+interface ResponseTimeStats {
+	max: number | string;
+	avg: number | string;
+}
+
+const DEFAULT_HEIGHT = 50;
+
+const calculateResponseTimeStats = (checks: CheckSnapshot[]): ResponseTimeStats => {
+	if (!Array.isArray(checks) || checks.length === 0) {
+		return { max: "-", avg: "-" };
+	}
+
+	const validChecks = checks.filter((check) => check.originalResponseTime != null);
+	if (validChecks.length === 0) {
+		return { max: "-", avg: "-" };
+	}
+
+	const responseTimes = validChecks.map((check) => check.originalResponseTime);
+	const max = Math.max(...responseTimes);
+	const avg = Math.round(
+		responseTimes.reduce((sum, time) => sum + time, 0) / responseTimes.length
+	);
+
+	return { max, avg };
+};
+
+export const HistogramResponseTime = ({
+	checks,
+	height = DEFAULT_HEIGHT,
+	gap,
+	showStats = true,
+	statsPosition = "right",
+}: HistogramResponseTimeProps) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+
+	const stats = useMemo(() => calculateResponseTimeStats(checks), [checks]);
+
+	if (!Array.isArray(checks) || checks.length === 0) return null;
+
+	const data =
+		checks.length !== 25
+			? [...checks, ...Array(25 - checks.length).fill({ status: "placeholder" })]
+			: checks;
+
+	const chartHeight = typeof height === "number" ? `${height}px` : height;
+	const gridGap = gap ?? theme.spacing(0.5);
+
+	const statsContent = showStats &&
+		(typeof stats.max === "number" || typeof stats.avg === "number") && (
+			<Stack
+				justifyContent="center"
+				alignItems={statsPosition === "left" ? "flex-end" : "flex-start"}
+				minWidth={70}
+				pr={statsPosition === "left" ? theme.spacing(8) : 0}
+				pl={statsPosition === "right" ? theme.spacing(8) : 0}
+			>
+				<Typography variant="body2">
+					{t("common.charts.histogram.avg", { value: stats.avg })}
+				</Typography>
+				<Typography variant="body2">
+					{t("common.charts.histogram.max", { value: stats.max })}
+				</Typography>
+			</Stack>
+		);
+
+	return (
+		<Stack
+			direction={statsPosition === "left" ? "row-reverse" : "row"}
+			alignItems="center"
+			sx={{ width: "100%" }}
+		>
+			<Box sx={{ flex: 1 }}>
+				<Box
+					sx={{
+						width: "100%",
+						display: "grid",
+						gridTemplateColumns: "repeat(25, 1fr)",
+						gap: gridGap,
+						alignItems: "end",
+						height: chartHeight,
+					}}
+				>
+					{data.map((check, index) => {
+						const isPlaceholder = (check as any).status === "placeholder";
+						const heightPct = `${Math.max(0, Math.min(100, (check as any).responseTime ?? 0))}%`;
+						const barColor =
+							check.status === true
+								? theme.palette.success.light
+								: theme.palette.error.light;
+						const bar = (
+							<Box
+								sx={{
+									position: "relative",
+									width: "100%",
+									height: "100%",
+									borderRadius: theme.spacing(1),
+									bgcolor: theme.palette.action.hover,
+									overflow: "hidden",
+								}}
+							>
+								<Box
+									sx={{
+										position: "absolute",
+										bottom: 0,
+										left: 0,
+										width: "100%",
+										height: isPlaceholder ? 0 : heightPct,
+										bgcolor: barColor,
+										transition: "height 500ms cubic-bezier(0.4, 0, 0.2, 1)",
+									}}
+								/>
+							</Box>
+						);
+
+						return isPlaceholder ? (
+							<Box
+								key={index}
+								sx={{ height: "100%" }}
+							>
+								{bar}
+							</Box>
+						) : (
+							<HeatmapResponseTimeTooltip
+								key={index}
+								check={check}
+							>
+								{bar}
+							</HeatmapResponseTimeTooltip>
+						);
+					})}
+				</Box>
+			</Box>
+			{statsContent}
+		</Stack>
+	);
+};

client/src/Components/common/controls/HeaderTimeRange.tsx

@@ -1,7 +1,11 @@
 import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
-import { ToggleButtonGroup, ToggleButton } from "@/Components/v2/inputs";
+import { ToggleButtonGroup, ToggleButton } from "@/Components/inputs";
 import { useTheme } from "@mui/material/styles";
+import CircularProgress from "@mui/material/CircularProgress";
+import { useTranslation } from "react-i18next";
+import { useMediaQuery } from "@mui/material";
 
 interface MonitorTimeFrameHeaderProps {
 	isLoading?: boolean;
@@ -17,7 +21,8 @@ export const HeaderTimeRange = ({
 	setDateRange,
 }: MonitorTimeFrameHeaderProps) => {
 	const theme = useTheme();
-
+	const { t } = useTranslation();
+	const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
 	const handleChange = (
 		_event: React.MouseEvent<HTMLElement>,
 		newValue: string | null
@@ -32,34 +37,24 @@ export const HeaderTimeRange = ({
 	if (hasDateRange) {
 		timeFramePicker = (
 			<ToggleButtonGroup
+				orientation={isSmallScreen ? "vertical" : "horizontal"}
 				value={dateRange}
 				exclusive
 				onChange={handleChange}
 				size="small"
+				fullWidth={isSmallScreen}
 			>
-				<ToggleButton
-					disabled={isLoading}
-					value="recent"
-				>
-					Recent
+				<ToggleButton value="recent">
+					{t("components.headerTimeRange.labels.recent")}
 				</ToggleButton>
-				<ToggleButton
-					disabled={isLoading}
-					value="day"
-				>
-					Day
+				<ToggleButton value="day">
+					{t("components.headerTimeRange.labels.day")}
 				</ToggleButton>
-				<ToggleButton
-					disabled={isLoading}
-					value="week"
-				>
-					Week
+				<ToggleButton value="week">
+					{t("components.headerTimeRange.labels.week")}
 				</ToggleButton>
-				<ToggleButton
-					disabled={isLoading}
-					value="month"
-				>
-					Month
+				<ToggleButton value="month">
+					{t("components.headerTimeRange.labels.month")}
 				</ToggleButton>
 			</ToggleButtonGroup>
 		);
@@ -67,21 +62,19 @@ export const HeaderTimeRange = ({
 
 	return (
 		<Stack
-			direction="row"
+			direction={{ xs: "column", md: "row" }}
 			justifyContent="flex-end"
 			alignItems="center"
 			gap={theme.spacing(4)}
 		>
+			<Box
+				width={16}
+				height={16}
+			>
+				{isLoading && <CircularProgress size={16} />}
+			</Box>
 			<Typography variant="body2">
-				Showing statistics for past{" "}
-				{dateRange === "recent"
-					? "2 hours"
-					: dateRange === "day"
-						? "24 hours"
-						: dateRange === "week"
-							? "7 days"
-							: "30 days"}
-				.
+				{t(`components.headerTimeRange.description.${dateRange}`)}
 			</Typography>
 			{timeFramePicker}
 		</Stack>

client/src/Components/common/index.ts

@@ -0,0 +1,5 @@
+export * from "./charts/HistogramResponseTime";
+export * from "./charts/HeatmapResponseTime";
+export * from "./charts/HeatmapResponseTimeTooltip";
+export * from "./controls/HeaderCreate";
+export * from "./controls/HeaderTimeRange";

client/src/Components/design-elements/Avatar.tsx

@@ -0,0 +1,48 @@
+import { Avatar as MuiAvatar } from "@mui/material";
+import { useSelector } from "react-redux";
+import { useEffect, useState } from "react";
+import { useTheme } from "@mui/material";
+import type { RootState } from "@/Types/state";
+
+interface AvatarProps {
+	src?: string;
+	small?: boolean;
+	sx?: object;
+	onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+export const Avatar = ({ src, small, sx, onClick = () => {} }: AvatarProps) => {
+	const { user } = useSelector((state: RootState) => state.auth);
+	const theme = useTheme();
+	if (!user) return null;
+
+	const style = small ? { width: 32, height: 32 } : { width: 64, height: 64 };
+
+	const [image, setImage] = useState<string>();
+	useEffect(() => {
+		if (user.avatarImage) {
+			setImage(`data:image/png;base64,${user.avatarImage}`);
+		}
+	}, [user?.avatarImage]);
+
+	return (
+		<MuiAvatar
+			onClick={onClick}
+			alt={`${user?.firstName} ${user?.lastName}`}
+			src={src ? src : user?.avatarImage ? image : undefined}
+			sx={{
+				color: theme.palette.primary.contrastText,
+				fontSize: small ? "16px" : "22px",
+				fontWeight: 400,
+				backgroundColor: theme.palette.primary.main,
+				display: "inline-flex",
+
+				...style,
+				...sx,
+			}}
+		>
+			{user.firstName?.charAt(0)}
+			{user.lastName?.charAt(0) || ""}
+		</MuiAvatar>
+	);
+};

client/src/Components/design-elements/BaseChart.tsx

@@ -1,4 +1,4 @@
-import { BaseBox } from "../design-elements";
+import { BaseBox } from ".";
 import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";

client/src/Components/design-elements/BasePage.tsx

@@ -1,4 +1,6 @@
+import Logo from "@/assets/icons/checkmate-icon.svg?react";
 import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
 import Alert from "@mui/material/Alert";
 import Link from "@mui/material/Link";
 import {
@@ -6,9 +8,10 @@ import {
 	EmptyFallback,
 	EmptyMonitorFallback,
 	BaseFallback,
-} from "@/Components/v2/design-elements/Fallback";
-import { Breadcrumb } from "@/Components/v2/design-elements/Breadcrumb";
+} from "@/Components/design-elements/Fallback";
+import { Breadcrumb } from "@/Components/design-elements/Breadcrumb";
 import CircularProgress from "@mui/material/CircularProgress";
+import { HeaderAuthControls } from "@/Pages/Auth/components/HeaderAuthControls";
 
 import type { StackProps } from "@mui/material/Stack";
 import { useTheme } from "@mui/material/styles";
@@ -91,7 +94,7 @@ export const BasePage = ({
 			spacing={theme.spacing(10)}
 			{...props}
 		>
-			<Breadcrumb />
+			<Breadcrumb breadcrumbOverride={breadcrumbOverride} />
 			{children}
 		</Stack>
 	);
@@ -100,7 +103,7 @@ export const BasePage = ({
 interface BasePageWithStatesProps extends StackProps {
 	loading: boolean;
 	error: any;
-	items: any[];
+	totalCount: number;
 	bullets: string[] | unknown;
 	page: string;
 	actionButtonText: string;
@@ -111,7 +114,7 @@ interface BasePageWithStatesProps extends StackProps {
 export const BasePageWithStates = ({
 	loading,
 	error,
-	items,
+	totalCount,
 	page,
 	bullets,
 	actionButtonText,
@@ -119,9 +122,9 @@ export const BasePageWithStates = ({
 	children,
 	...props
 }: BasePageWithStatesProps) => {
-	const showLoading = loading && (!items || items.length === 0);
+	const showLoading = loading && totalCount === 0;
 
-	if (isEmpty(items)) {
+	if (!loading && totalCount === 0) {
 		return (
 			<EmptyFallback
 				bullets={bullets}
@@ -146,23 +149,17 @@ export const BasePageWithStates = ({
 interface MonitorBasePageWithStatesProps extends StackProps {
 	loading: boolean;
 	error: any;
-	items: any[];
+	totalCount: number;
 	page: string;
 	actionLink?: string;
 	children: React.ReactNode;
 	priorityFallback?: React.ReactNode;
 }
 
-const isEmpty = (items: any[]) => {
-	if (!items) return true;
-	if (Array.isArray(items) && items.length === 0) return true;
-	return false;
-};
-
 export const MonitorBasePageWithStates = ({
 	loading,
 	error,
-	items,
+	totalCount,
 	page,
 	actionLink,
 	children,
@@ -171,7 +168,7 @@ export const MonitorBasePageWithStates = ({
 }: MonitorBasePageWithStatesProps) => {
 	const { t } = useTranslation();
 
-	const showLoading = loading && (!items || items.length === 0);
+	const showLoading = loading && totalCount === 0;
 
 	if (priorityFallback) {
 		return (
@@ -180,12 +177,12 @@ export const MonitorBasePageWithStates = ({
 				error={error}
 				{...props}
 			>
-				{priorityFallback}
+				<Stack height={"100%"}>{priorityFallback}</Stack>
 			</BasePage>
 		);
 	}
 
-	if (!loading && isEmpty(items)) {
+	if (!loading && totalCount === 0) {
 		return (
 			<EmptyMonitorFallback
 				page={page}
@@ -207,3 +204,61 @@ export const MonitorBasePageWithStates = ({
 		</BasePage>
 	);
 };
+
+interface BaseAuthPageProps extends React.PropsWithChildren, StackProps {
+	title: string;
+	subtitle: string;
+}
+
+export const BaseAuthPage = ({
+	title,
+	subtitle,
+	children,
+	...props
+}: BaseAuthPageProps) => {
+	const theme = useTheme();
+	return (
+		<BasePage
+			breadcrumbOverride={[]}
+			gap={theme.spacing(8)}
+			alignItems={"center"}
+			justifyContent={"center"}
+			minHeight="100vh"
+			position={"relative"}
+			{...props}
+		>
+			<HeaderAuthControls
+				hideLogo
+				py={theme.spacing(4)}
+				position={"absolute"}
+				top={0}
+				left={0}
+			/>
+			<Box width={{ xs: 60, sm: 70, md: 80 }}>
+				<Logo
+					width={"100%"}
+					height={"100%"}
+				/>
+			</Box>
+			<Stack alignItems={"center"}>
+				<Typography
+					variant="h1"
+					mb={theme.spacing(2)}
+				>
+					{title}
+				</Typography>
+				<Typography variant="h2">{subtitle}</Typography>
+			</Stack>
+			<Stack
+				gap={theme.spacing(8)}
+				width={{
+					xs: "80%",
+					md: "25%",
+					lg: "15%",
+				}}
+			>
+				{children}
+			</Stack>
+		</BasePage>
+	);
+};

client/src/Components/design-elements/Breadcrumb.tsx

@@ -0,0 +1,140 @@
+import MuiBreadcrumbs from "@mui/material/Breadcrumbs";
+import Typography from "@mui/material/Typography";
+import { Link, useLocation } from "react-router-dom";
+import { useTheme } from "@mui/material/styles";
+import { ChevronRight } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import type { ReactNode } from "react";
+
+const isId = (segment: string): boolean => {
+	return segment.length === 24 || /^[a-f0-9-]{36}$/.test(segment);
+};
+
+const actionSegments = ["create", "configure"];
+
+const BreadcrumbWrapper = ({ children }: { children: ReactNode }) => {
+	const theme = useTheme();
+	return (
+		<MuiBreadcrumbs
+			separator={
+				<ChevronRight
+					size={16}
+					strokeWidth={1.5}
+				/>
+			}
+			sx={{
+				fontSize: "14px",
+				marginBottom: theme.spacing(6),
+				"& .MuiBreadcrumbs-separator": {
+					color: theme.palette.text.secondary,
+				},
+			}}
+		>
+			{children}
+		</MuiBreadcrumbs>
+	);
+};
+
+export const Breadcrumb = ({
+	breadcrumbOverride,
+}: {
+	breadcrumbOverride?: string[] | undefined;
+}) => {
+	const { t } = useTranslation();
+	const theme = useTheme();
+	const location = useLocation();
+
+	// If override is an empty array, hide entirely
+	if (breadcrumbOverride !== undefined && breadcrumbOverride.length === 0) {
+		return null;
+	}
+
+	// If override has items, render them directly
+	if (breadcrumbOverride !== undefined && breadcrumbOverride.length > 0) {
+		return (
+			<BreadcrumbWrapper>
+				{breadcrumbOverride.map((item, index) => {
+					const isLast = index === breadcrumbOverride.length - 1;
+					return (
+						<Typography
+							key={index}
+							sx={{
+								fontSize: "14px",
+								fontWeight: isLast ? 600 : 400,
+								color: isLast ? theme.palette.primary.main : theme.palette.text.secondary,
+							}}
+						>
+							{item}
+						</Typography>
+					);
+				})}
+			</BreadcrumbWrapper>
+		);
+	}
+
+	// Default behavior: use location pathname
+	const segments = location.pathname.split("/").filter((x) => x);
+
+	if (segments.length === 0) {
+		return null;
+	}
+
+	// Build simplified breadcrumb: "uptime" or "uptime / details" or "uptime / create"
+	const basePage = segments[0] || t("common.breadcrumbs.home");
+
+	const secondSegment = segments[1];
+	const isActionPage = secondSegment && actionSegments.includes(secondSegment);
+	const isDetailsPage = secondSegment && isId(secondSegment);
+	const hasSubPage = isActionPage || isDetailsPage;
+
+	const getSubPageLabel = (): string => {
+		if (isActionPage) {
+			return secondSegment.charAt(0).toUpperCase() + secondSegment.slice(1);
+		}
+		return t("common.breadcrumbs.details");
+	};
+
+	return (
+		<BreadcrumbWrapper>
+			{hasSubPage ? (
+				<Link
+					to={`/${basePage}`}
+					style={{ textDecoration: "none" }}
+				>
+					<Typography
+						sx={{
+							fontSize: "14px",
+							color: theme.palette.text.secondary,
+							"&:hover": {
+								color: theme.palette.primary.main,
+							},
+						}}
+					>
+						{basePage.charAt(0).toUpperCase() + basePage.slice(1)}
+					</Typography>
+				</Link>
+			) : (
+				<Typography
+					sx={{
+						fontSize: "14px",
+						fontWeight: 600,
+						color: theme.palette.primary.main,
+					}}
+				>
+					{basePage.charAt(0).toUpperCase() + basePage.slice(1)}
+				</Typography>
+			)}
+			{hasSubPage && (
+				<Typography
+					sx={{
+						fontSize: "14px",
+						fontWeight: 600,
+						color: theme.palette.primary.main,
+					}}
+				>
+					{getSubPageLabel()}
+				</Typography>
+			)}
+		</BreadcrumbWrapper>
+	);
+};

client/src/Components/design-elements/BulletPointCheck.tsx

@@ -27,6 +27,7 @@ export const BulletPointCheck = ({
 			<Check
 				size={16}
 				strokeWidth={1.5}
+				color={variant === "info" ? theme.palette.text.secondary : colors[variant]}
 				style={{
 					flexShrink: 0,
 				}}

client/src/Components/design-elements/Fallback.tsx

@@ -1,7 +1,7 @@
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-import { BulletPointCheck, SkeletonCard } from "@/Components/v2/design-elements";
-import { Button } from "@/Components/v2/inputs";
+import { BulletPointCheck, SkeletonCard } from "@/Components/design-elements";
+import { Button } from "@/Components/inputs";
 
 import { useNavigate } from "react-router";
 import useMediaQuery from "@mui/material/useMediaQuery";
@@ -85,12 +85,7 @@ export const EmptyFallback = ({
 				zIndex={1}
 				alignItems="center"
 			>
-				<Typography
-					component="h1"
-					color={theme.palette.primary.contrastText}
-				>
-					{title}
-				</Typography>
+				<Typography component="h1">{title}</Typography>
 				<Stack
 					sx={{
 						flexWrap: "wrap",

client/src/Components/design-elements/Gauge.tsx

@@ -0,0 +1,155 @@
+import { BaseChart } from "@/Components/design-elements";
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+
+import { useTheme } from "@mui/material/styles";
+import { useMemo, useState, useEffect } from "react";
+import { getInfraGaugeColor } from "@/Utils/MonitorUtils";
+
+const MINIMUM_VALUE = 0;
+const MAXIMUM_VALUE = 100;
+
+export const Gauge = ({
+	isLoading = false,
+	progress = 0,
+	radius = 70,
+	strokeWidth = 15,
+	precision = 1,
+	unit = "%",
+}: {
+	isLoading?: boolean;
+	progress?: number;
+	radius?: number;
+	strokeWidth?: number;
+	precision?: number;
+	unit?: string;
+}) => {
+	const theme = useTheme();
+	const progressWithinRange = Math.max(MINIMUM_VALUE, Math.min(progress, MAXIMUM_VALUE));
+
+	// Calculate the length of the stroke for the circle
+	const { circumference, totalSize, strokeLength } = useMemo(
+		() => ({
+			circumference: 2 * Math.PI * radius,
+			totalSize: radius * 2 + strokeWidth * 2,
+			strokeLength: (progress / 100) * (2 * Math.PI * radius),
+		}),
+		[radius, strokeWidth, progress]
+	);
+
+	const [offset, setOffset] = useState(circumference);
+	useEffect(() => {
+		setOffset(circumference);
+		const timer = setTimeout(() => {
+			setOffset(circumference - strokeLength);
+		}, 100);
+
+		return () => clearTimeout(timer);
+	}, [progress, circumference, strokeLength]);
+
+	const fillColor = getInfraGaugeColor(progressWithinRange, theme);
+
+	if (isLoading) {
+		return;
+	}
+
+	return (
+		<Box
+			display={"inline-block"}
+			position={"relative"}
+			width={radius}
+			height={radius}
+			bgcolor={theme.palette.background.paper}
+			borderRadius={"50%"}
+		>
+			<svg
+				viewBox={`0 0 ${totalSize} ${totalSize}`}
+				width={radius}
+				height={radius}
+			>
+				<circle
+					stroke={theme.palette.secondary.main}
+					strokeWidth={strokeWidth}
+					fill="none"
+					cx={totalSize / 2}
+					cy={totalSize / 2}
+					r={radius}
+				/>
+				<circle
+					stroke={fillColor}
+					strokeWidth={strokeWidth}
+					strokeDasharray={`${circumference} ${circumference}`}
+					strokeDashoffset={offset}
+					fill="none"
+					cx={totalSize / 2}
+					cy={totalSize / 2}
+					r={radius}
+					style={{
+						transform: "rotate(-90deg)",
+						transformOrigin: "center",
+						transition: "stroke-dashoffset 1.5s ease-in-out",
+					}}
+				/>
+			</svg>
+
+			<Typography
+				style={{
+					position: "absolute",
+					top: "50%",
+					left: "50%",
+					transform: "translate(-50%, -50%)",
+				}}
+			>
+				{`${progressWithinRange.toFixed(precision)}${unit}`}
+			</Typography>
+		</Box>
+	);
+};
+
+export const DetailGauge = ({
+	title,
+	progress,
+	upperLabel,
+	upperValue,
+	lowerLabel,
+	lowerValue,
+}: {
+	title: string;
+	progress: number;
+	upperLabel?: string;
+	upperValue?: string | number;
+	lowerLabel?: string;
+	lowerValue?: string | number;
+}) => {
+	const theme = useTheme();
+	return (
+		<BaseChart
+			icon={null}
+			title={title}
+			maxWidth={225}
+		>
+			<Stack
+				alignItems={"center"}
+				mb={theme.spacing(4)}
+				gap={theme.spacing(4)}
+			>
+				<Gauge progress={progress} />
+			</Stack>
+			<Stack
+				direction={"row"}
+				justifyContent={"space-between"}
+			>
+				<Typography>{upperLabel}</Typography>
+				<Typography>{upperValue}</Typography>
+			</Stack>
+			<Stack
+				direction={"row"}
+				justifyContent={"space-between"}
+			>
+				<Typography>{lowerLabel}</Typography>
+				<Typography>{lowerValue}</Typography>
+			</Stack>
+		</BaseChart>
+	);
+};

client/src/Components/design-elements/Icon.tsx

@@ -4,6 +4,7 @@ interface IconProps {
 	icon: LucideIcon;
 	size?: number;
 	strokeWidth?: number;
+	stroke?: string;
 }
 
 const Icon = ({ icon: Icon, size = 20, strokeWidth = 1.5 }: IconProps) => {

client/src/Components/design-elements/MonitorStatus.tsx

@@ -1,11 +1,11 @@
 import type { Monitor } from "@/Types/Monitor";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-import { PulseDot, Dot } from "@/Components/v2/design-elements";
+import { PulseDot, Dot } from "@/Components/design-elements";
 import { getStatusColor, formatUrl } from "@/Utils/MonitorUtils";
 import { useTheme } from "@mui/material/styles";
 import prettyMilliseconds from "pretty-ms";
-import { typographyLevels } from "@/Utils/Theme/v2Palette";
+import { typographyLevels } from "@/Utils/Theme/Palette";
 import useMediaQuery from "@mui/material/useMediaQuery";
 export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 	const theme = useTheme();
@@ -19,11 +19,9 @@ export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 			<Typography
 				fontSize={typographyLevels.xl}
 				fontWeight={500}
-				color={theme.palette.primary.contrastText}
 				overflow={"hidden"}
 				textOverflow={"ellipsis"}
 				whiteSpace={"nowrap"}
-				maxWidth={isSmall ? "100%" : "calc((100vw - var(--env-var-width-2)) / 2)"}
 			>
 				{monitor.name}
 			</Typography>
@@ -40,7 +38,6 @@ export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 					overflow={"hidden"}
 					textOverflow={"ellipsis"}
 					whiteSpace={"nowrap"}
-					maxWidth={isSmall ? "100%" : "calc((100vw - var(--env-var-width-2)) / 2)"}
 				>
 					{formatUrl(monitor?.url)}
 				</Typography>

client/src/Components/design-elements/OfflineBanner.tsx

@@ -0,0 +1,63 @@
+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 { useTranslation } from "react-i18next";
+import { WifiOff } from "lucide-react";
+import { useState, useEffect } from "react";
+
+interface OfflineBannerProps {
+	visible: boolean;
+}
+
+export const OfflineBanner = ({ visible }: OfflineBannerProps) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const [shouldRender, setShouldRender] = useState(visible);
+	const [isAnimating, setIsAnimating] = useState(false);
+
+	useEffect(() => {
+		if (visible) {
+			setShouldRender(true);
+			requestAnimationFrame(() => setIsAnimating(true));
+		} else {
+			setIsAnimating(false);
+			const timer = setTimeout(() => setShouldRender(false), 1000);
+			return () => clearTimeout(timer);
+		}
+	}, [visible]);
+
+	if (!shouldRender) return null;
+
+	return (
+		<Box
+			sx={{
+				position: "fixed",
+				top: isAnimating ? 0 : "-100%",
+				left: 0,
+				right: 0,
+				zIndex: theme.zIndex.snackbar,
+				backgroundColor: theme.palette.error.main,
+				color: theme.palette.error.contrastText,
+				px: theme.spacing(8),
+				py: theme.spacing(4),
+				transition: "top 1s ease-in-out",
+			}}
+		>
+			<Stack
+				direction="row"
+				alignItems="center"
+				justifyContent="center"
+				gap={theme.spacing(4)}
+			>
+				<WifiOff size={20} />
+				<Typography
+					variant="body2"
+					fontWeight={500}
+				>
+					{t("components.offlineBanner.serverUnreachable")}
+				</Typography>
+			</Stack>
+		</Box>
+	);
+};

client/src/Components/design-elements/PulseDot.tsx

@@ -1,4 +1,17 @@
-import { Box, Stack, useTheme } from "@mui/material";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import { useTheme, keyframes } from "@mui/material";
+
+const ripple = keyframes`
+	from {
+		opacity: 1;
+		transform: scale(0);
+	}
+	to {
+		opacity: 0;
+		transform: scale(2);
+	}
+`;
 
 interface PulseDotProps {
 	color: string;
@@ -28,7 +41,7 @@ export const PulseDot = ({ color }: PulseDotProps) => {
 						height: "100%",
 						backgroundColor: "inherit",
 						borderRadius: "50%",
-						animation: "ripple 1.8s ease-out infinite",
+						animation: `${ripple} 1.8s ease-out infinite`,
 					},
 					"&::after": {
 						content: `""`,

client/src/Components/design-elements/SplitBox.tsx

@@ -0,0 +1,78 @@
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+export const SplitBox = ({
+	left,
+	right,
+}: {
+	left: React.ReactNode;
+	right: React.ReactNode;
+}) => {
+	const theme = useTheme();
+	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
+	return (
+		<Stack
+			direction={isSmall ? "column" : "row"}
+			bgcolor={theme.palette.background.paper}
+			border={1}
+			borderColor={theme.palette.divider}
+			borderRadius={theme.spacing(2)}
+		>
+			<Box
+				padding={theme.spacing(15)}
+				borderRight={isSmall ? 0 : 1}
+				borderBottom={isSmall ? 1 : 0}
+				borderColor={theme.palette.divider}
+				flex={0.7}
+				sx={{
+					background:
+						theme.palette.mode === "dark"
+							? "linear-gradient(135deg, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255, 0.02) 100%)"
+							: "linear-gradient(135deg, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.02) 100%)",
+				}}
+			>
+				{left}
+			</Box>
+			<Box
+				flex={1}
+				padding={theme.spacing(15)}
+			>
+				{right}
+			</Box>
+		</Stack>
+	);
+};
+
+export const ConfigBox = ({
+	title,
+	subtitle,
+	leftContent,
+	rightContent,
+}: {
+	title: string;
+	subtitle: string;
+	leftContent?: React.ReactNode;
+	rightContent: React.ReactNode;
+}) => {
+	const theme = useTheme();
+	return (
+		<SplitBox
+			left={
+				<Stack spacing={theme.spacing(4)}>
+					<Typography
+						textTransform={"capitalize"}
+						component="h2"
+						variant="h2"
+					>
+						{title}
+					</Typography>
+					<Typography component="p">{subtitle}</Typography>
+					{leftContent}
+				</Stack>
+			}
+			right={rightContent}
+		/>
+	);
+};

client/src/Components/design-elements/StatBox.tsx

@@ -4,8 +4,8 @@ import Box from "@mui/material/Box";
 import { useTheme } from "@mui/material/styles";
 import { lighten } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import type { PaletteKey } from "@/Utils/Theme/v2Theme";
-import { BaseBox, TooltipWithInfo } from "@/Components/v2/design-elements";
+import type { PaletteKey } from "@/Utils/Theme/Theme";
+import { BaseBox, TooltipWithInfo } from "@/Components/design-elements";
 import type { SxProps } from "@mui/material";
 
 type GradientBox = React.PropsWithChildren<{

client/src/Components/design-elements/StatusBox.tsx

@@ -0,0 +1,186 @@
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import { BaseBox } from "@/Components/design-elements";
+import { useTranslation } from "react-i18next";
+import type { SxProps } from "@mui/material";
+
+import { useTheme } from "@mui/material/styles";
+
+type StatusBoxProps = React.PropsWithChildren<{
+	children: React.ReactNode;
+	sx?: SxProps;
+}>;
+
+export const BGBox = ({ children, sx }: StatusBoxProps) => {
+	const theme = useTheme();
+	return (
+		<BaseBox
+			sx={{
+				backgroundColor: theme.palette.background.default,
+				overflow: "hidden",
+				position: "relative",
+				flex: 1,
+				padding: theme.spacing(4),
+				...sx,
+			}}
+		>
+			<Box
+				position="absolute"
+				top={0}
+				left={0}
+				right={0}
+				bottom={0}
+				sx={{
+					pointerEvents: "none",
+					backgroundImage: `
+						linear-gradient(${theme.palette.divider} 1px, transparent 1px),
+						linear-gradient(90deg, ${theme.palette.divider} 1px, transparent 1px)
+					`,
+					backgroundSize: "24px 24px",
+					maskImage:
+						"linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.4) 100%)",
+					WebkitMaskImage:
+						"linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.4) 100%)",
+				}}
+			/>
+			{children}
+		</BaseBox>
+	);
+};
+
+const StatusBox = ({
+	label,
+	n,
+	color,
+	sx,
+}: {
+	label: string;
+	n: number;
+	color: string | undefined;
+	sx?: SxProps;
+}) => {
+	const theme = useTheme();
+	return (
+		<BGBox sx={sx}>
+			<Stack spacing={theme.spacing(4)}>
+				<Typography
+					variant={"h2"}
+					textTransform="uppercase"
+					color={theme.palette.text.secondary}
+				>
+					{label}
+				</Typography>
+				<Typography
+					variant="h1"
+					color={color}
+				>
+					{n}
+				</Typography>
+			</Stack>
+		</BGBox>
+	);
+};
+
+export const UpStatusBox = ({ n }: { n: number }) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	return (
+		<StatusBox
+			label={t("pages.common.monitors.status.up")}
+			n={n}
+			color={theme.palette.success.light}
+		/>
+	);
+};
+
+export const DownStatusBox = ({ n }: { n: number }) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	return (
+		<StatusBox
+			label={t("pages.common.monitors.status.down")}
+			n={n}
+			color={theme.palette.error.light}
+		/>
+	);
+};
+
+export const PausedStatusBox = ({ n }: { n: number }) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	return (
+		<StatusBox
+			label={t("pages.common.monitors.status.paused")}
+			n={n}
+			color={theme.palette.warning.light}
+		/>
+	);
+};
+export const MaintenanceStatusBox = ({ n }: { n: number }) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	return (
+		<StatusBox
+			label={t("pages.common.monitors.status.maintenance")}
+			n={n}
+			color={theme.palette.warning.light}
+		/>
+	);
+};
+export const InitializingStatusBox = ({ n }: { n: number }) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	return (
+		<StatusBox
+			label={t("pages.common.monitors.status.initializing")}
+			n={n}
+			color={theme.palette.warning.light}
+		/>
+	);
+};
+export const BreachedStatusBox = ({ n }: { n: number }) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	return (
+		<StatusBox
+			label={t("pages.common.monitors.status.breached")}
+			n={n}
+			color={theme.palette.warning.main}
+		/>
+	);
+};
+
+export const TotalChecksBox = ({ n }: { n: number }) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	return (
+		<StatusBox
+			label={t("pages.common.monitors.status.total")}
+			n={n}
+			color={theme.palette.primary.light}
+		/>
+	);
+};
+export const DownChecksBox = ({ n }: { n: number }) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	return (
+		<StatusBox
+			label={t("pages.common.monitors.status.down")}
+			n={n}
+			color={theme.palette.error.light}
+		/>
+	);
+};
+export const UpChecksBox = ({ n }: { n: number }) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	return (
+		<StatusBox
+			label={t("pages.common.monitors.status.up")}
+			n={n}
+			color={theme.palette.success.light}
+		/>
+	);
+};

client/src/Components/design-elements/StatusLabel.tsx

@@ -1,5 +1,5 @@
 import Box from "@mui/material/Box";
-import { BaseBox } from "@/Components/v2/design-elements";
+import { BaseBox } from "@/Components/design-elements";
 import Typography from "@mui/material/Typography";
 
 import type { MonitorStatus } from "@/Types/Monitor";
@@ -11,33 +11,26 @@ import { useTranslation } from "react-i18next";
 export const ValueTypes = ["positive", "negative", "neutral"] as const;
 export type ValueType = (typeof ValueTypes)[number];
 
-export const StatusLabel = ({
-	status,
-	isActive,
-	sx,
-}: {
-	status: MonitorStatus;
-	isActive?: boolean;
-	sx?: SxProps;
-}) => {
+export const StatusLabel = ({ status, sx }: { status: MonitorStatus; sx?: SxProps }) => {
 	const { t } = useTranslation();
 	const theme = useTheme();
 	const palette = getStatusPalette(status);
 
-	const determineStatus = (
-		isActive: boolean | undefined,
-		status: MonitorStatus
-	): string => {
-		if (isActive === false) {
+	const determineStatus = (status: MonitorStatus): string => {
+		if (status === "up") {
+			return t("pages.common.monitors.status.up");
+		} else if (status === "down") {
+			return t("pages.common.monitors.status.down");
+		} else if (status === "breached") {
+			return t("pages.common.monitors.status.breached");
+		} else if (status === "maintenance") {
+			return t("pages.common.monitors.status.maintenance");
+		} else if (status === "paused") {
 			return t("pages.common.monitors.status.paused");
+		} else if (status === "initializing") {
+			return t("pages.common.monitors.status.initializing");
 		}
 
-		if (status === true) {
-			return t("pages.common.monitors.status.up");
-		}
-		if (status === false) {
-			return t("pages.common.monitors.status.down");
-		}
 		return t("pages.common.monitors.status.initializing");
 	};
 
@@ -64,9 +57,7 @@ export const StatusLabel = ({
 				borderRadius="50%"
 				marginRight="5px"
 			/>
-			<Typography textTransform={"capitalize"}>
-				{determineStatus(isActive, status)}
-			</Typography>
+			<Typography textTransform={"capitalize"}>{determineStatus(status)}</Typography>
 		</BaseBox>
 	);
 };
@@ -98,7 +89,7 @@ export const ValueLabel = ({ value, text }: { value: ValueType; text: string })
 				borderRadius="50%"
 				marginRight="5px"
 			/>
-			{transformedText}
+			<Typography>{transformedText}</Typography>
 		</BaseBox>
 	);
 };

client/src/Components/design-elements/Table.tsx

@@ -1,5 +1,5 @@
 import Stack from "@mui/material/Stack";
-import Grid2 from "@mui/material/Grid2";
+import Grid2 from "@mui/material/Grid";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import Paper from "@mui/material/Paper";
@@ -27,8 +27,9 @@ import TablePagination from "@mui/material/TablePagination";
 import type { TablePaginationOwnProps } from "@mui/material/TablePagination";
 
 import { useTranslation } from "react-i18next";
-import { useState, Fragment } from "react";
+import { useState, Fragment, useEffect } from "react";
 import { useTheme } from "@mui/material/styles";
+import type { SxProps, Theme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 
 export type Header<T> = {
@@ -47,6 +48,7 @@ type DataTableProps<T extends { id?: string | number; _id?: string | number }> =
 	renderExpandedContent?: (row: T) => React.ReactNode;
 	emptyViewText?: string;
 	emptyViewPositive?: boolean;
+	getRowSx?: (row: T) => SxProps<Theme>;
 };
 
 export function DataTable<
@@ -64,6 +66,7 @@ export function DataTable<
 	renderExpandedContent,
 	emptyViewText,
 	emptyViewPositive,
+	getRowSx,
 }: DataTableProps<T>) {
 	const theme = useTheme();
 	const [expanded, setExpanded] = useState<(string | number) | null>(null);
@@ -204,6 +207,7 @@ export function DataTable<
 								<TableRow
 									sx={{
 										cursor: onRowClick ? "pointer" : "default",
+										...(getRowSx?.(row) as object),
 									}}
 									onClick={() => {
 										if (expandableRows) handleExpand(row);
@@ -454,12 +458,26 @@ function HasMoreTablePaginationActions(props: HasMoreTablePaginationActionsProps
 interface PaginationProps extends TablePaginationOwnProps {
 	component?: React.ElementType;
 	hasMore?: boolean;
+	itemsOnPage?: number;
 }
 
 export const Pagination = ({ ...props }: PaginationProps) => {
-	const { hasMore, ...rest } = props;
+	const { hasMore, itemsOnPage, ...rest } = props;
 	const isSmall = useMediaQuery((theme: any) => theme.breakpoints.down("sm"));
 	const theme = useTheme();
+
+	useEffect(() => {
+		if (
+			typeof itemsOnPage === "number" &&
+			itemsOnPage === 0 &&
+			rest.count > 0 &&
+			rest.page > 0 &&
+			rest.onPageChange
+		) {
+			rest.onPageChange(null, rest.page - 1);
+		}
+	}, [itemsOnPage, rest.count, rest.page, rest.onPageChange]);
+
 	const labelDisplayedRows = ({
 		from,
 		to,

client/src/Components/design-elements/Tabs.tsx

@@ -0,0 +1,64 @@
+import MuiTabs from "@mui/material/Tabs";
+import type { TabsProps } from "@mui/material/Tabs";
+import { useTheme } from "@mui/material/styles";
+interface CustomTabsProps extends TabsProps {}
+
+export const Tabs = (props: CustomTabsProps) => {
+	const theme = useTheme();
+	return (
+		<MuiTabs
+			sx={{
+				minHeight: 34,
+				borderBottom: `1px solid ${theme.palette.divider}`,
+				"& .MuiTabs-indicator": {
+					backgroundColor: theme.palette.primary.main,
+					height: 2,
+					bottom: 0,
+				},
+				"& .MuiTabs-flexContainer": {
+					gap: theme.spacing(16),
+				},
+			}}
+			{...props}
+		>
+			{props.children}
+		</MuiTabs>
+	);
+};
+
+import MuiTab from "@mui/material/Tab";
+import type { TabProps } from "@mui/material/Tab";
+interface CustomTabProps extends TabProps {}
+
+export const Tab = (props: CustomTabProps) => {
+	const theme = useTheme();
+	return (
+		<MuiTab
+			disableRipple
+			iconPosition="start"
+			sx={{
+				textTransform: "none",
+				fontSize: 14,
+				fontWeight: 500,
+				minHeight: 34,
+				padding: theme.spacing(1, 0),
+				paddingBottom: 0,
+				minWidth: "auto",
+				alignItems: "flex-start",
+				color: theme.palette.text.secondary,
+				"&.Mui-selected": {
+					color: theme.palette.primary.main,
+					fontWeight: 600,
+				},
+				"&:hover": {
+					color: theme.palette.text.secondary,
+				},
+				"& .MuiTab-iconWrapper": {
+					marginRight: theme.spacing(2),
+					marginBottom: 0,
+				},
+			}}
+			{...props}
+		/>
+	);
+};

client/src/Components/design-elements/TextLink.tsx

@@ -0,0 +1,43 @@
+import Typography from "@mui/material/Typography";
+import Stack from "@mui/material/Stack";
+import type { StackProps } from "@mui/material/Stack";
+import Link from "@mui/material/Link";
+import { Link as RouterLink } from "react-router-dom";
+
+import { useTheme } from "@mui/material/styles";
+
+interface TextLinkProps extends StackProps {
+	text: string;
+	linkText: string;
+	href: string;
+	target?: "_self" | "_blank" | "_parent" | "_top";
+}
+
+export const TextLink = ({
+	text,
+	linkText,
+	href,
+	target = "_self",
+	...props
+}: TextLinkProps) => {
+	const theme = useTheme();
+
+	return (
+		<Stack
+			direction="row"
+			gap={theme.spacing(4)}
+			{...props}
+		>
+			<Typography>{text}</Typography>
+			<Link
+				color="primary"
+				to={href}
+				component={RouterLink}
+				target={target}
+				{...(target === "_blank" && { rel: "noopener noreferrer" })}
+			>
+				{linkText}
+			</Link>
+		</Stack>
+	);
+};

client/src/Components/design-elements/index.tsx

@@ -15,3 +15,9 @@ export { default as Icon } from "./Icon";
 export * from "./Tooltip";
 export * from "./StatBox";
 export * from "./BaseChart";
+export * from "./Gauge";
+export * from "./Tabs";
+export * from "./SplitBox";
+export * from "./TextLink";
+export * from "./OfflineBanner";
+export * from "./Avatar";

client/src/Components/i18nLoader/index.tsx

@@ -1,8 +1,9 @@
-import i18n from "../../../Utils/i18n.js";
+import i18n from "@/Utils/i18n.js";
 import { useSelector } from "react-redux";
 import { useEffect } from "react";
+import type { RootState } from "@/store";
 const I18nLoader = () => {
-	const language = useSelector((state) => state.ui.language ?? "en");
+	const language = useSelector((state: RootState) => state.ui.language ?? "en");
 
 	useEffect(() => {
 		if (language && i18n.language !== language) {

client/src/Components/inputs/AutoComplete.tsx

@@ -1,6 +1,6 @@
 import Autocomplete from "@mui/material/Autocomplete";
 import type { AutocompleteProps } from "@mui/material/Autocomplete";
-import { TextField, Checkbox } from "@/Components/v2/inputs";
+import { TextField, Checkbox } from "@/Components/inputs";
 import ListItem from "@mui/material/ListItem";
 import Stack from "@mui/material/Stack";
 import { useTheme } from "@mui/material/styles";

client/src/Components/inputs/ColorPicker.tsx

@@ -0,0 +1,48 @@
+import { MuiColorInput } from "mui-color-input";
+import type { MuiColorInputProps } from "mui-color-input";
+import { typographyLevels } from "@/Utils/Theme/Palette";
+import { useTheme } from "@mui/material";
+import Stack from "@mui/material/Stack";
+import { FieldLabel } from "@/Components/inputs/FieldLabel";
+
+interface ColorPickerProps extends MuiColorInputProps {
+	fieldLabel?: string;
+	required?: boolean;
+}
+
+export const ColorInput = ({ fieldLabel, required, ...props }: ColorPickerProps) => {
+	const theme = useTheme();
+	const input = (
+		<MuiColorInput
+			{...props}
+			sx={{
+				"& .MuiOutlinedInput-root": {
+					borderRadius: theme.shape.borderRadius,
+					height: 34,
+					fontSize: typographyLevels.base,
+				},
+				"& .MuiOutlinedInput-notchedOutline": {
+					borderColor: theme.palette.divider,
+				},
+				"&:hover .MuiOutlinedInput-notchedOutline": {
+					borderColor: theme.palette.divider,
+				},
+				"& .MuiFormHelperText-root": {
+					marginLeft: 0,
+					marginRight: 0,
+					marginTop: theme.spacing(1),
+				},
+			}}
+		/>
+	);
+	if (fieldLabel) {
+		return (
+			<Stack spacing={theme.spacing(2)}>
+				<FieldLabel required={required}>{fieldLabel}</FieldLabel>
+				{input}
+			</Stack>
+		);
+	}
+
+	return input;
+};

client/src/Components/inputs/DatePicker.tsx

@@ -0,0 +1,100 @@
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import type { DatePickerProps } from "@mui/x-date-pickers/DatePicker";
+import type { Dayjs } from "dayjs";
+import { useTheme } from "@mui/material/styles";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { FieldLabel } from "./FieldLabel";
+import { Calendar } from "lucide-react";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+
+interface DatePickerComponentProps extends Omit<DatePickerProps<Dayjs>, "label"> {
+	fieldLabel?: string;
+	required?: boolean;
+	error?: boolean;
+	helperText?: string;
+}
+
+export const DatePickerComponent = ({
+	fieldLabel,
+	required,
+	error,
+	helperText,
+	...props
+}: DatePickerComponentProps) => {
+	const theme = useTheme();
+
+	const picker = (
+		<LocalizationProvider dateAdapter={AdapterDayjs}>
+			<DatePicker
+				{...props}
+				slots={{
+					openPickerIcon: () => (
+						<Calendar
+							size={20}
+							stroke={theme.palette.text.secondary}
+						/>
+					),
+					...props.slots,
+				}}
+				slotProps={{
+					switchViewButton: { sx: { display: "none" } },
+					nextIconButton: { sx: { ml: theme.spacing(2) } },
+					day: {
+						sx: {
+							"&.MuiPickersDay-root.Mui-disabled": {
+								color: theme.palette.text.disabled,
+							},
+						},
+					},
+					field: {
+						sx: {
+							width: "fit-content",
+							"& > .MuiOutlinedInput-root": {
+								flexDirection: "row-reverse",
+							},
+							"& input": {
+								minHeight: 34,
+								p: 0,
+								pl: theme.spacing(3),
+								pr: theme.spacing(5),
+							},
+							"& fieldset": {
+								borderColor: error ? theme.palette.error.main : theme.palette.divider,
+								borderRadius: theme.shape.borderRadius,
+							},
+							"&:not(:has(.Mui-disabled)):not(:has(.Mui-error)) .MuiOutlinedInput-root:not(:has(input:focus)):hover fieldset":
+								{
+									borderColor: error ? theme.palette.error.main : theme.palette.divider,
+								},
+						},
+					},
+					inputAdornment: { sx: { ml: 0 } },
+					openPickerButton: {
+						sx: {
+							py: 0,
+							mr: 0,
+						},
+					},
+					...props.slotProps,
+				}}
+			/>
+		</LocalizationProvider>
+	);
+
+	return (
+		<Stack spacing={theme.spacing(2)}>
+			{fieldLabel && <FieldLabel required={required}>{fieldLabel}</FieldLabel>}
+			{picker}
+			{helperText && (
+				<Typography
+					variant="caption"
+					color={error ? "error" : "text.secondary"}
+				>
+					{helperText}
+				</Typography>
+			)}
+		</Stack>
+	);
+};

client/src/Components/inputs/Dialog.tsx

@@ -0,0 +1,78 @@
+import Dialog from "@mui/material/Dialog";
+import type { DialogProps } from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+import { Button } from "@/Components/inputs";
+import { typographyLevels } from "@/Utils/Theme/Palette";
+import { useTranslation } from "react-i18next";
+import type { ReactNode } from "react";
+
+export const DialogInput = ({
+	open,
+	title,
+	content,
+	onConfirm,
+	onCancel,
+	confirmColor = "primary",
+	cancelColor = "error",
+	loading = false,
+	cancelText,
+	confirmText,
+	children,
+	maxWidth,
+	fullWidth = false,
+	additionalButtons,
+}: {
+	open: boolean;
+	title?: string;
+	content?: string;
+	onConfirm?(item: any): any;
+	onCancel?(item: any): any;
+	confirmColor?: "error" | "primary";
+	cancelColor?: "error" | "primary";
+	loading?: boolean;
+	cancelText?: string;
+	confirmText?: string;
+	children?: ReactNode;
+	maxWidth?: DialogProps["maxWidth"];
+	fullWidth?: boolean;
+	additionalButtons?: ReactNode;
+}) => {
+	const { t } = useTranslation();
+	return (
+		<Dialog
+			open={open}
+			maxWidth={maxWidth}
+			fullWidth={fullWidth}
+		>
+			{title && <DialogTitle sx={{ fontSize: typographyLevels.l }}>{title}</DialogTitle>}
+			<DialogContent>
+				{content && <DialogContentText>{content}</DialogContentText>}
+				{children}
+			</DialogContent>
+			<DialogActions>
+				<Button
+					loading={loading}
+					variant="contained"
+					color={cancelColor}
+					onClick={onCancel}
+				>
+					{cancelText ?? t("common.buttons.cancel")}
+				</Button>
+				{additionalButtons}
+				{onConfirm && (
+					<Button
+						loading={loading}
+						variant="contained"
+						color={confirmColor}
+						onClick={onConfirm}
+					>
+						{confirmText ?? t("common.buttons.confirm")}
+					</Button>
+				)}
+			</DialogActions>
+		</Dialog>
+	);
+};

client/src/Components/inputs/FieldLabel.tsx

@@ -9,7 +9,9 @@ interface FieldLabelProps {
 
 export const FieldLabel = ({ children, required = false, htmlFor }: FieldLabelProps) => {
 	const theme = useTheme();
-
+	if (children === " ") {
+		children = "\u00A0";
+	}
 	return (
 		<Typography
 			component="label"

client/src/Components/inputs/ImageUpload.tsx

@@ -0,0 +1,164 @@
+import { Box, Stack, Typography, IconButton } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import { Upload, X } from "lucide-react";
+import { useState, useRef, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+
+interface FileObject {
+	src: string;
+	name: string;
+	file: File;
+}
+
+interface ImageUploadProps {
+	src?: string;
+	onChange?: (file: FileObject | undefined) => void;
+	maxSize?: number;
+	accept?: string[];
+	error?: string;
+}
+
+export const ImageUpload = ({
+	src,
+	onChange,
+	maxSize = 3 * 1024 * 1024,
+	accept = ["jpg", "jpeg", "png"],
+	error,
+}: ImageUploadProps) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const inputRef = useRef<HTMLInputElement>(null);
+	const [isDragging, setIsDragging] = useState(false);
+	const [localError, setLocalError] = useState<string | null>(null);
+	const [preview, setPreview] = useState<FileObject | null>(null);
+
+	const handleFile = useCallback(
+		(file: File | undefined) => {
+			if (!file) return;
+			const isValidType = accept.some((type) => file.type.includes(type));
+			const isValidSize = file.size <= maxSize;
+			if (!isValidType) {
+				setLocalError(t("components.imageUpload.errors.invalidFileFormat"));
+				return;
+			}
+			if (!isValidSize) {
+				setLocalError(t("components.imageUpload.errors.invalidFileSize"));
+				return;
+			}
+			setLocalError(null);
+			const fileObj: FileObject = {
+				src: URL.createObjectURL(file),
+				name: file.name,
+				file,
+			};
+			setPreview(fileObj);
+			onChange?.(fileObj);
+		},
+		[maxSize, accept, onChange, t]
+	);
+
+	const handleClear = () => {
+		setPreview(null);
+		setLocalError(null);
+		onChange?.(undefined);
+		if (inputRef.current) inputRef.current.value = "";
+	};
+
+	const displaySrc = src || preview?.src;
+	const displayError = localError || error;
+
+	return (
+		<Stack sx={{ width: "100%", maxWidth: 500 }}>
+			{displaySrc ? (
+				<Stack
+					alignItems="center"
+					gap={1}
+				>
+					<Box
+						component="img"
+						src={displaySrc}
+						alt="Preview"
+						sx={{ maxWidth: 250, maxHeight: 250, objectFit: "contain", borderRadius: 1 }}
+					/>
+					<IconButton
+						size="small"
+						onClick={handleClear}
+						sx={{ color: theme.palette.error.main }}
+					>
+						<X size={18} />
+					</IconButton>
+				</Stack>
+			) : (
+				<Stack
+					onDragOver={(e) => {
+						e.preventDefault();
+						setIsDragging(true);
+					}}
+					onDragLeave={() => setIsDragging(false)}
+					onDrop={(e) => {
+						e.preventDefault();
+						setIsDragging(false);
+						handleFile(e.dataTransfer.files?.[0]);
+					}}
+					alignItems="center"
+					justifyContent="center"
+					gap={1}
+					sx={{
+						position: "relative",
+						width: "100%",
+						minHeight: 150,
+						border: "2px dashed",
+						borderRadius: 1,
+						borderColor: isDragging ? theme.palette.primary.main : theme.palette.divider,
+						backgroundColor: isDragging ? theme.palette.action.hover : "transparent",
+						transition: "0.2s",
+						cursor: "pointer",
+						"&:hover": {
+							borderColor: theme.palette.primary.main,
+							backgroundColor: theme.palette.action.hover,
+						},
+					}}
+				>
+					<input
+						ref={inputRef}
+						type="file"
+						accept={accept.map((ext) => `.${ext}`).join(",")}
+						onChange={(e) => handleFile(e.target.files?.[0])}
+						style={{ position: "absolute", inset: 0, opacity: 0, cursor: "pointer" }}
+					/>
+					<Upload size={24} />
+					<Typography
+						variant="body2"
+						color="text.secondary"
+					>
+						<Typography
+							component="span"
+							variant="body2"
+							color="primary"
+							fontWeight={500}
+						>
+							{t("components.imageUpload.clickToUpload")}
+						</Typography>{" "}
+						{t("components.imageUpload.orDragAndDrop")}
+					</Typography>
+					<Typography
+						variant="caption"
+						color="text.disabled"
+					>
+						{accept.join(", ").toUpperCase()} • {t("components.imageUpload.maxSize")}{" "}
+						{Math.round(maxSize / 1024 / 1024)}MB
+					</Typography>
+				</Stack>
+			)}
+			{displayError && (
+				<Typography
+					variant="caption"
+					color="error"
+					sx={{ mt: 1 }}
+				>
+					{displayError}
+				</Typography>
+			)}
+		</Stack>
+	);
+};

client/src/Components/inputs/LanguageSelector.tsx

@@ -0,0 +1,100 @@
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import MenuItem from "@mui/material/MenuItem";
+import { Select } from "@/Components/inputs";
+import "flag-icons/css/flag-icons.min.css";
+
+import { useTranslation } from "react-i18next";
+import { useTheme } from "@mui/material";
+import { useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
+import { setLanguage } from "@/Features/UI/uiSlice";
+import type { RootState } from "@/Types/state";
+
+const langMap: Record<string, string> = {
+	cs: "cz",
+	ja: "jp",
+	uk: "ua",
+	vi: "vn",
+};
+
+export const LanguageSelector = () => {
+	const { i18n } = useTranslation();
+	const theme = useTheme();
+	const { language = "en" } = useSelector((state: RootState) => state.ui);
+	const dispatch = useDispatch();
+	const handleChange = (event: any) => {
+		const newLang = event.target.value;
+		dispatch(setLanguage(newLang));
+	};
+
+	const languages = Object.keys(i18n.options.resources || {});
+
+	return (
+		<Select
+			value={language}
+			onChange={handleChange}
+			size="small"
+			// sx={{
+			// 	minWidth: 80,
+			// 	"& .MuiSelect-select": {
+			// 		display: "flex",
+			// 		alignItems: "center",
+			// 		justifyContent: "center",
+			// 	},
+			// 	"& .MuiSelect-icon": {
+			// 		alignSelf: "center",
+			// 	},
+			// }}
+		>
+			{languages.map((lang) => {
+				let parsedLang = lang === "en" ? "gb" : lang;
+
+				if (parsedLang.includes("-")) {
+					parsedLang = parsedLang.split("-")[1].toLowerCase();
+				}
+
+				parsedLang = langMap[parsedLang] || parsedLang;
+
+				const flag = parsedLang ? `fi fi-${parsedLang}` : null;
+
+				return (
+					<MenuItem
+						key={lang}
+						value={lang}
+						sx={{
+							display: "flex",
+							justifyContent: "center",
+							alignItems: "center",
+						}}
+					>
+						<Stack
+							direction="row"
+							spacing={theme.spacing(2)}
+							alignItems="center"
+							justifyContent="center"
+						>
+							<Box
+								component="span"
+								sx={{
+									display: "flex",
+									alignItems: "center",
+								}}
+							>
+								{flag && <span className={flag} />}
+							</Box>
+							<Box
+								component="span"
+								sx={{ textTransform: "uppercase" }}
+							>
+								{lang}
+							</Box>
+						</Stack>
+					</MenuItem>
+				);
+			})}
+		</Select>
+	);
+};
+
+export default LanguageSelector;

client/src/Components/inputs/Radio.tsx

@@ -0,0 +1,88 @@
+import Radio from "@mui/material/Radio";
+import type { RadioProps } from "@mui/material/Radio";
+import { useTheme } from "@mui/material/styles";
+import { Circle, CircleDot } from "lucide-react";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Typography from "@mui/material/Typography";
+
+interface RadioInputProps extends RadioProps {}
+
+export const RadioInput = ({ ...props }: RadioInputProps) => {
+	const theme = useTheme();
+	return (
+		<Radio
+			{...props}
+			icon={
+				<Circle
+					size={16}
+					strokeWidth={1.5}
+				/>
+			}
+			checkedIcon={
+				<CircleDot
+					size={14}
+					strokeWidth={1.5}
+				/>
+			}
+			sx={{
+				padding: 0,
+				mt: theme.spacing(0.5),
+				color: theme.palette.text.secondary,
+				"&.Mui-checked": {
+					color: theme.palette.primary.main,
+					"& svg circle": {
+						fill: theme.palette.primary.main,
+					},
+				},
+				"& .MuiSvgIcon-root": {
+					fontSize: 16,
+				},
+				"& svg": {
+					stroke: "currentColor",
+				},
+				"& svg path, & svg line, & svg polyline, & svg rect, & svg circle": {
+					stroke: "currentColor",
+					fill: "none",
+				},
+			}}
+		/>
+	);
+};
+
+export const RadioWithDescription = ({
+	label,
+	description,
+	...props
+}: RadioInputProps & { label: string; description: string }) => {
+	const theme = useTheme();
+	return (
+		<FormControlLabel
+			control={<RadioInput {...props} />}
+			label={
+				<>
+					<Typography component="p">{label}</Typography>
+					<Typography
+						component="h6"
+						color={theme.palette.text.secondary}
+					>
+						{description}
+					</Typography>
+				</>
+			}
+			sx={{
+				alignItems: "flex-start",
+				p: theme.spacing(2.5),
+				m: theme.spacing(-2.5),
+				borderRadius: theme.shape.borderRadius,
+
+				"&:hover": {
+					backgroundColor: theme.palette.background.paper,
+				},
+				"& .MuiButtonBase-root": {
+					p: 0,
+					mr: theme.spacing(6),
+				},
+			}}
+		/>
+	);
+};

client/src/Components/inputs/Select.tsx

@@ -1,7 +1,7 @@
 import Select from "@mui/material/Select";
-import React from "react";
-import { useTheme } from "@mui/material/styles";
 import type { SelectProps } from "@mui/material/Select";
+import React, { forwardRef } from "react";
+import { useTheme } from "@mui/material/styles";
 import Stack from "@mui/material/Stack";
 import { FieldLabel } from "./FieldLabel";
 import { ChevronDown } from "lucide-react";
@@ -14,18 +14,15 @@ interface SelectInputProps<T> extends Omit<SelectProps<T>, "label"> {
 	placeholderColor?: string;
 }
 
-export const SelectInput = <T,>({
-	fieldLabel,
-	required,
-	placeholder,
-	placeholderColor,
-	...props
-}: SelectInputProps<T>) => {
+const SelectInputInner = <T,>(
+	{ fieldLabel, required, placeholder, placeholderColor, ...props }: SelectInputProps<T>,
+	ref: React.ForwardedRef<HTMLDivElement>
+) => {
 	const theme = useTheme();
 	const emptyPlaceholderColor = placeholderColor || theme.palette.text.disabled;
 
-	const renderValue = (selected: any) => {
-		const isMultiple = Boolean((props as any).multiple);
+	const renderValue = (selected: unknown) => {
+		const isMultiple = Boolean((props as { multiple?: boolean }).multiple);
 		const isEmpty = isMultiple
 			? !Array.isArray(selected) || selected.length === 0
 			: selected === undefined || selected === null || selected === "";
@@ -39,7 +36,7 @@ export const SelectInput = <T,>({
 			const capitalized = items.map(
 				(item) => item.charAt(0).toUpperCase() + item.slice(1)
 			);
-			return (<Typography>{capitalized.join(" | ")}</Typography>) as any;
+			return <Typography>{capitalized.join(" | ")}</Typography>;
 		}
 
 		const nodes = React.Children.toArray(props.children as React.ReactNode);
@@ -59,6 +56,7 @@ export const SelectInput = <T,>({
 	const select = (
 		<Select<T>
 			{...props}
+			ref={ref}
 			displayEmpty
 			renderValue={renderValue}
 			inputProps={{
@@ -74,6 +72,12 @@ export const SelectInput = <T,>({
 			)}
 			sx={{
 				height: "34px",
+				"& .MuiSelect-select": {
+					display: "flex",
+					alignItems: "center",
+					height: "100%",
+					boxSizing: "border-box",
+				},
 				"& .MuiSelect-icon": {
 					right: theme.spacing(3),
 				},
@@ -100,3 +104,7 @@ export const SelectInput = <T,>({
 
 	return select;
 };
+
+export const SelectInput = forwardRef(SelectInputInner) as <T>(
+	props: SelectInputProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> }
+) => React.ReactElement;

client/src/Components/inputs/Slider.tsx

@@ -0,0 +1,92 @@
+import Typography from "@mui/material/Typography";
+import { forwardRef } from "react";
+import Slider from "@mui/material/Slider";
+import type { SliderProps } from "@mui/material/Slider";
+import { useTheme } from "@mui/material/styles";
+import Stack from "@mui/material/Stack";
+import { FieldLabel } from "./FieldLabel";
+import Box from "@mui/material/Box";
+import type { ResponsiveStyleValue } from "@mui/system";
+
+interface SliderInputProps extends SliderProps {
+	sx?: SliderProps["sx"];
+	showValue?: boolean;
+}
+
+export const SliderInput = forwardRef<HTMLSpanElement, SliderInputProps>(
+	({ sx, showValue = false, ...props }, ref) => {
+		const theme = useTheme();
+		const additionalSx = Array.isArray(sx) ? sx : sx ? [sx] : [];
+
+		return (
+			<Stack
+				gap={theme.spacing(8)}
+				direction={"row"}
+				alignItems={"center"}
+			>
+				{showValue && <Typography>{props.value}</Typography>}
+				<Slider
+					{...props}
+					ref={ref}
+					sx={[
+						{
+							"& .MuiSlider-track": {
+								backgroundColor: theme.palette.primary.main,
+								border: "none",
+							},
+							"& .MuiSlider-rail": {
+								backgroundColor: theme.palette.grey[300],
+								opacity: 1,
+							},
+							"& .MuiSlider-thumb": {
+								backgroundColor: "#fff",
+								"&:hover, &.Mui-focusVisible": {
+									boxShadow: "none",
+								},
+								"&:active": {
+									boxShadow: "none",
+								},
+							},
+							"& .MuiSlider-valueLabel": {
+								backgroundColor: theme.palette.primary.main,
+							},
+						},
+						...additionalSx,
+					]}
+				/>
+			</Stack>
+		);
+	}
+);
+
+interface SliderWithLabelProps extends SliderProps {
+	fieldLabel?: string;
+	required?: boolean;
+	showValue?: boolean;
+	sliderMaxWidth?: ResponsiveStyleValue<number | string>;
+}
+
+export const SliderWithLabel = forwardRef<HTMLSpanElement, SliderWithLabelProps>(
+	(
+		{ fieldLabel, required, showValue = true, value, sliderMaxWidth = "100%", ...props },
+		ref
+	) => {
+		const theme = useTheme();
+
+		const labelText = fieldLabel;
+
+		return (
+			<Stack spacing={theme.spacing(2)}>
+				{fieldLabel && <FieldLabel required={required}>{labelText}</FieldLabel>}
+				<Box maxWidth={sliderMaxWidth}>
+					<SliderInput
+						{...props}
+						showValue={showValue}
+						value={value}
+						ref={ref}
+					/>
+				</Box>
+			</Stack>
+		);
+	}
+);

client/src/Components/inputs/Switch.tsx

@@ -0,0 +1,47 @@
+import { forwardRef } from "react";
+import Switch from "@mui/material/Switch";
+import type { SwitchProps } from "@mui/material/Switch";
+import { useTheme } from "@mui/material/styles";
+
+interface SwitchComponentProps extends SwitchProps {
+	dualOption?: boolean;
+}
+
+export const SwitchComponent = forwardRef<HTMLInputElement, SwitchComponentProps>(
+	function SwitchComponent({ sx, dualOption = false, ...props }, ref) {
+		const theme = useTheme();
+		const additionalSx = Array.isArray(sx) ? sx : sx ? [sx] : [];
+
+		return (
+			<Switch
+				{...props}
+				slotProps={{
+					input: {
+						ref: ref,
+					},
+				}}
+				sx={[
+					{
+						"& .MuiSwitch-switchBase": {
+							"&.Mui-checked": {
+								color: "#E0E0E0",
+								"& + .MuiSwitch-track": {
+									backgroundColor: theme.palette.primary.main,
+									opacity: 1,
+									border: 0,
+								},
+							},
+						},
+						...(dualOption && {
+							"& .MuiSwitch-track": {
+								backgroundColor: theme.palette.primary.main,
+								opacity: 1,
+							},
+						}),
+					},
+					...additionalSx,
+				]}
+			/>
+		);
+	}
+);

client/src/Components/inputs/SwitchTheme.tsx

@@ -0,0 +1,48 @@
+import IconButton from "@mui/material/IconButton";
+
+import { Moon, Sun } from "lucide-react";
+
+import { setMode } from "@/Features/UI/uiSlice.js";
+import { useTheme } from "@mui/material";
+import { useDispatch, useSelector } from "react-redux";
+import type { RootState } from "@/Types/state";
+
+export const SwitchTheme = () => {
+	const mode = useSelector((state: RootState) => state.ui.mode);
+	const dispatch = useDispatch();
+	const theme = useTheme();
+
+	const handleChange = () => {
+		dispatch(setMode(mode === "light" ? "dark" : "light"));
+	};
+	return (
+		<IconButton
+			id="theme-toggle"
+			onClick={handleChange}
+			sx={{
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				"& svg": {
+					transition: "stroke 0.2s ease",
+				},
+				"&:hover svg path, &:hover svg line, &:hover svg polyline, &:hover svg rect, &:hover svg circle":
+					{
+						stroke: theme.palette.primary.main,
+					},
+			}}
+		>
+			{mode === "light" ? (
+				<Moon
+					size={16}
+					strokeWidth={1.5}
+				/>
+			) : (
+				<Sun
+					size={16}
+					strokeWidth={1.5}
+				/>
+			)}
+		</IconButton>
+	);
+};

client/src/Components/inputs/TextInput.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from "react";
 import TextField from "@mui/material/TextField";
 import type { TextFieldProps } from "@mui/material";
-import { typographyLevels } from "@/Utils/Theme/v2Palette";
+import { typographyLevels } from "@/Utils/Theme/Palette";
 import { useTheme } from "@mui/material/styles";
 import Stack from "@mui/material/Stack";
 import { FieldLabel } from "./FieldLabel";

client/src/Components/inputs/TimePicker.tsx

@@ -0,0 +1,61 @@
+import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
+import type { MobileTimePickerProps } from "@mui/x-date-pickers/MobileTimePicker";
+import type { Dayjs } from "dayjs";
+import { useTheme } from "@mui/material/styles";
+import Stack from "@mui/material/Stack";
+import { FieldLabel } from "./FieldLabel";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+
+interface TimePickerComponentProps extends Omit<MobileTimePickerProps<Dayjs>, "label"> {
+	fieldLabel?: string;
+	required?: boolean;
+}
+
+export const TimePickerComponent = ({
+	fieldLabel,
+	required,
+	...props
+}: TimePickerComponentProps) => {
+	const theme = useTheme();
+
+	const picker = (
+		<LocalizationProvider dateAdapter={AdapterDayjs}>
+			<MobileTimePicker
+				{...props}
+				slotProps={{
+					field: {
+						sx: {
+							width: "fit-content",
+							"& input": {
+								minHeight: 34,
+								p: 0,
+								px: theme.spacing(5),
+							},
+							"& fieldset": {
+								borderColor: theme.palette.divider,
+								borderRadius: theme.shape.borderRadius,
+							},
+							"&:not(:has(.Mui-disabled)):not(:has(.Mui-error)) .MuiOutlinedInput-root:not(:has(input:focus)):hover fieldset":
+								{
+									borderColor: theme.palette.divider,
+								},
+						},
+					},
+					...props.slotProps,
+				}}
+			/>
+		</LocalizationProvider>
+	);
+
+	if (fieldLabel) {
+		return (
+			<Stack spacing={theme.spacing(2)}>
+				<FieldLabel required={required}>{fieldLabel}</FieldLabel>
+				{picker}
+			</Stack>
+		);
+	}
+
+	return picker;
+};

client/src/Components/inputs/index.tsx

@@ -9,3 +9,12 @@ export {
 	ToggleButtonGroupInput as ToggleButtonGroup,
 } from "./ToggleButton";
 export { DialogInput as Dialog } from "./Dialog";
+export * from "./Radio";
+export * from "./Switch";
+export * from "./Slider";
+export * from "./ImageUpload";
+export * from "./ColorPicker";
+export { DatePickerComponent as DatePicker } from "./DatePicker";
+export { TimePickerComponent as TimePicker } from "./TimePicker";
+export * from "./LanguageSelector";
+export * from "./SwitchTheme";

client/src/Components/layout/AppLayout.tsx

@@ -0,0 +1,62 @@
+import Box from "@mui/material/Box";
+import { useState, useEffect, useRef } from "react";
+import { useTheme } from "@mui/material/styles";
+import { useSelector } from "react-redux";
+import BackgroundSVG from "@/assets/Images/background.svg";
+import type { RootState } from "@/Types/state";
+import { OfflineBanner } from "@/Components/design-elements";
+import { setServerUnreachableCallback, get } from "@/Utils/ApiClient";
+
+interface AppLayoutProps {
+	children: React.ReactNode;
+}
+
+const AppLayout = ({ children }: AppLayoutProps) => {
+	const theme = useTheme();
+	const mode = useSelector((state: RootState) => state.ui.mode);
+	const [serverUnreachable, setServerUnreachable] = useState(false);
+	const retryIntervalRef = useRef<number | null>(null);
+
+	useEffect(() => {
+		setServerUnreachableCallback(setServerUnreachable);
+	}, []);
+
+	useEffect(() => {
+		if (serverUnreachable) {
+			retryIntervalRef.current = window.setInterval(async () => {
+				try {
+					await get("/health", { timeout: 5000 });
+				} catch {
+					// NO_OP
+				}
+			}, 5000);
+		} else if (retryIntervalRef.current) {
+			clearInterval(retryIntervalRef.current);
+			retryIntervalRef.current = null;
+		}
+
+		return () => {
+			if (retryIntervalRef.current) {
+				clearInterval(retryIntervalRef.current);
+			}
+		};
+	}, [serverUnreachable]);
+
+	return (
+		<Box
+			sx={{
+				minHeight: "100vh",
+				backgroundColor: theme.palette.background.default,
+				backgroundImage: mode === "dark" ? `url("${BackgroundSVG}")` : "none",
+				backgroundSize: "100% 100%",
+				backgroundPosition: "center",
+				backgroundRepeat: "no-repeat",
+			}}
+		>
+			<OfflineBanner visible={serverUnreachable} />
+			{children}
+		</Box>
+	);
+};
+
+export default AppLayout;

client/src/Components/layout/RootLayout.tsx

@@ -0,0 +1,44 @@
+import { Sidebar } from "@/Components/sidebar";
+import { Outlet } from "react-router";
+import Stack from "@mui/material/Stack";
+import { useMediaQuery } from "@mui/material";
+import { useSidebar } from "@/Hooks/useSidebar";
+
+import { useTheme } from "@mui/material";
+
+const RootLayout = () => {
+	const theme = useTheme();
+	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
+	const { collapsedWidth } = useSidebar();
+
+	return (
+		<Stack flexDirection="row">
+			<Sidebar />
+			<Stack
+				flex={1}
+				padding={6}
+				overflow={"hidden"}
+				sx={{
+					backgroundColor:
+						theme.palette.mode === "dark"
+							? "rgba(255, 255, 255, 0.01)"
+							: "rgba(0, 0, 0, 0.01)",
+					display: "flex",
+					alignItems: "center",
+					paddingLeft: isSmall ? `${collapsedWidth + 12}px` : 12,
+				}}
+			>
+				<Stack
+					maxWidth={1280}
+					width="100%"
+					paddingY={theme.spacing(6)}
+					flex={1}
+				>
+					<Outlet />
+				</Stack>
+			</Stack>
+		</Stack>
+	);
+};
+
+export default RootLayout;

client/src/Components/monitors/ControlsFilter.tsx

@@ -1,16 +1,17 @@
 import Stack from "@mui/material/Stack";
-import { Select, Button } from "@/Components/v2/inputs";
+import { Select, Button } from "@/Components/inputs";
 import MenuItem from "@mui/material/MenuItem";
 import useMediaQuery from "@mui/material/useMediaQuery";
 
 import type { MonitorType } from "@/Types/Monitor";
 import { Typography, useTheme } from "@mui/material";
 
-const types = ["http", "ping", "port", "docker"];
+const types = ["http", "ping", "port", "docker", "game"];
 const statuses = ["up", "down"];
 const states = ["active", "paused"];
 
 export const ControlsFilter = ({
+	showTypes = true,
 	selectedTypes,
 	setSelectedTypes,
 	selectedStatus,
@@ -19,8 +20,9 @@ export const ControlsFilter = ({
 	setSelectedState,
 	onClearFilters,
 }: {
-	selectedTypes: MonitorType[];
-	setSelectedTypes: React.Dispatch<React.SetStateAction<MonitorType[]>>;
+	showTypes?: boolean;
+	selectedTypes?: MonitorType[];
+	setSelectedTypes?: React.Dispatch<React.SetStateAction<MonitorType[]>>;
 	selectedStatus: string;
 	setSelectedStatus: React.Dispatch<React.SetStateAction<string>>;
 	selectedState: string;
@@ -30,27 +32,29 @@ export const ControlsFilter = ({
 	const theme = useTheme();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const isFilterActive =
-		selectedTypes.length > 0 || selectedStatus !== "" || selectedState !== "";
+		(selectedTypes?.length ?? 0) > 0 || selectedStatus !== "" || selectedState !== "";
 	return (
 		<Stack
 			direction={isSmall ? "column" : "row"}
 			gap={theme.spacing(2)}
 		>
-			<Select
-				multiple
-				placeholder="Type"
-				value={selectedTypes}
-				onChange={(e) => setSelectedTypes(e.target.value as MonitorType[])}
-			>
-				{types.map((type) => (
-					<MenuItem
-						key={type}
-						value={type}
-					>
-						<Typography textTransform={"capitalize"}>{type}</Typography>
-					</MenuItem>
-				))}
-			</Select>
+			{showTypes && setSelectedTypes && (
+				<Select
+					multiple
+					placeholder="Type"
+					value={selectedTypes ?? []}
+					onChange={(e) => setSelectedTypes(e.target.value as MonitorType[])}
+				>
+					{types.map((type) => (
+						<MenuItem
+							key={type}
+							value={type}
+						>
+							<Typography textTransform={"capitalize"}>{type}</Typography>
+						</MenuItem>
+					))}
+				</Select>
+			)}
 			<Select
 				placeholder="Status"
 				value={selectedStatus}

client/src/Components/monitors/HeaderMonitorControls.tsx

@@ -1,7 +1,7 @@
 import Stack from "@mui/material/Stack";
-import { Icon, MonitorStatus } from "@/Components/v2/design-elements";
-import { Button } from "@/Components/v2/inputs";
-import { Settings, Pause, Play, Mail, Bug } from "lucide-react";
+import { Icon, MonitorStatus } from "@/Components/design-elements";
+import { Button } from "@/Components/inputs";
+import { Settings, Pause, Play, Mail, Bug, Trash } from "lucide-react";
 
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
@@ -9,10 +9,28 @@ import { useTheme } from "@mui/material/styles";
 import { usePost } from "@/Hooks/UseApi";
 
 import type { Monitor } from "@/Types/Monitor.js";
+interface BaseHeaderProps {
+	monitor: Monitor;
+}
+
+const BaseHeader = ({ monitor, children }: React.PropsWithChildren<BaseHeaderProps>) => {
+	const theme = useTheme();
+	return (
+		<Stack
+			spacing={{ xs: theme.spacing(8), md: 0 }}
+			direction={{ xs: "column", md: "row" }}
+			alignItems={"center"}
+			justifyContent={"space-between"}
+		>
+			<MonitorStatus monitor={monitor} />
+			{children}
+		</Stack>
+	);
+};
 
 interface HeaderMonitorControlsProps {
 	path: string;
-	monitor?: Monitor;
+	monitor?: Monitor | null;
 	isAdmin: boolean;
 	refetch: Function;
 }
@@ -24,8 +42,8 @@ export const HeaderMonitorControls = ({
 	refetch,
 }: HeaderMonitorControlsProps) => {
 	const { t } = useTranslation();
-	const navigate = useNavigate();
 	const theme = useTheme();
+	const navigate = useNavigate();
 	const {
 		post,
 		loading: isPosting,
@@ -36,13 +54,7 @@ export const HeaderMonitorControls = ({
 		return null;
 	}
 	return (
-		<Stack
-			spacing={{ xs: theme.spacing(8), md: 0 }}
-			direction={{ xs: "column", md: "row" }}
-			alignItems={"center"}
-			justifyContent={"space-between"}
-		>
-			<MonitorStatus monitor={monitor} />
+		<BaseHeader monitor={monitor}>
 			<Stack
 				width={{ xs: "100%", md: "auto" }}
 				direction={{ xs: "column", md: "row" }}
@@ -83,7 +95,7 @@ export const HeaderMonitorControls = ({
 							await refetch();
 						}}
 					>
-						{monitor?.isActive ? t("pause") : t("resume")}
+						{monitor?.isActive ? t("common.buttons.pause") : t("common.buttons.resume")}
 					</Button>
 				)}
 				{isAdmin && (
@@ -93,10 +105,72 @@ export const HeaderMonitorControls = ({
 						startIcon={<Icon icon={Settings} />}
 						onClick={() => navigate(`/${path}/configure/${monitor.id}`)}
 					>
-						Configure
+						{t("common.buttons.configure")}
 					</Button>
 				)}
 			</Stack>
-		</Stack>
+		</BaseHeader>
+	);
+};
+
+interface HeaderDeleteControlsProps {
+	monitor?: Monitor | null;
+	isAdmin: boolean;
+	refetch: Function;
+	onDelete?: () => void;
+}
+
+export const HeaderDeleteControls = ({
+	monitor,
+	isAdmin,
+	refetch,
+	onDelete,
+}: HeaderDeleteControlsProps) => {
+	const { t } = useTranslation();
+	const theme = useTheme();
+	const {
+		post,
+		loading: isPosting,
+		// error: postError,
+	} = usePost<any, Monitor>();
+
+	if (!monitor) {
+		return null;
+	}
+	return (
+		<BaseHeader monitor={monitor}>
+			<Stack
+				width={{ xs: "100%", md: "auto" }}
+				direction={{ xs: "column", md: "row" }}
+				gap={theme.spacing(2)}
+			>
+				{isAdmin && (
+					<Button
+						variant="contained"
+						color="secondary"
+						loading={isPosting}
+						startIcon={monitor?.isActive ? <Icon icon={Pause} /> : <Icon icon={Play} />}
+						onClick={async () => {
+							await post(`/monitors/pause/${monitor.id}`, {});
+							await refetch();
+						}}
+					>
+						{monitor?.isActive ? t("common.buttons.pause") : t("common.buttons.resume")}
+					</Button>
+				)}
+				{isAdmin && (
+					<Button
+						variant="contained"
+						color="error"
+						startIcon={<Icon icon={Trash} />}
+						onClick={() => {
+							onDelete?.();
+						}}
+					>
+						{t("common.buttons.delete")}
+					</Button>
+				)}
+			</Stack>
+		</BaseHeader>
 	);
 };

client/src/Components/monitors/HeaderMonitorsSummary.tsx

@@ -0,0 +1,35 @@
+import {
+	UpStatusBox,
+	DownStatusBox,
+	PausedStatusBox,
+	InitializingStatusBox,
+	BreachedStatusBox,
+} from "@/Components/design-elements";
+import Stack from "@mui/material/Stack";
+
+import type { MonitorsSummary } from "@/Types/Monitor";
+import { useTheme } from "@mui/material";
+
+interface MonitorsSummaryProps {
+	summary: MonitorsSummary | null;
+	showBreached?: boolean;
+}
+
+export const HeaderMonitorsSummary = ({
+	summary,
+	showBreached = false,
+}: MonitorsSummaryProps) => {
+	const theme = useTheme();
+	return (
+		<Stack
+			direction={{ xs: "column", md: "row" }}
+			gap={theme.spacing(8)}
+		>
+			<UpStatusBox n={summary?.upMonitors || 0} />
+			<DownStatusBox n={summary?.downMonitors || 0} />
+			{showBreached && <BreachedStatusBox n={summary?.breachedMonitors || 0} />}
+			<PausedStatusBox n={summary?.pausedMonitors || 0} />
+			<InitializingStatusBox n={summary?.initializingMonitors || 0} />
+		</Stack>
+	);
+};

client/src/Components/monitors/MonitorStatBoxes.tsx

@@ -1,9 +1,9 @@
 import Stack from "@mui/material/Stack";
-import { StatBox } from "@/Components/v2/design-elements";
+import { StatBox } from "@/Components/design-elements";
 
+import prettyMilliseconds from "pretty-ms";
 import { useTheme } from "@mui/material/styles";
 import type { MonitorStats, Monitor } from "@/Types/Monitor";
-import { getHumanReadableDuration } from "@/Utils/timeUtilsLegacy.js";
 import { getStatusPalette } from "@/Utils/MonitorUtils";
 import { useTranslation } from "react-i18next";
 
@@ -32,11 +32,16 @@ export const MonitorStatBoxes = ({
 
 	// Determine time since last check
 	const timeOfLastCheck = monitorStats?.lastCheckTimestamp || 0;
-	const timeSinceLastCheck = Date.now() - timeOfLastCheck;
+	const timeSinceLastCheck = Date.now() - timeOfLastCheck || 0;
 
-	const streakTime = getHumanReadableDuration(timeSinceLastFailure);
+	const options = {
+		secondsDecimalDigits: 0,
+		millisecondsDecimalDigits: 0,
+	};
 
-	const lastCheckTime = getHumanReadableDuration(timeSinceLastCheck);
+	const streakTime = prettyMilliseconds(timeSinceLastFailure, options);
+
+	const lastCheckTime = prettyMilliseconds(timeSinceLastCheck, options);
 	const palette = getStatusPalette(monitor?.status);
 
 	return (
@@ -55,7 +60,7 @@ export const MonitorStatBoxes = ({
 			/>
 			<StatBox
 				title={t("pages.common.monitors.statBoxes.lastResponseTime")}
-				subtitle={monitorStats?.lastResponseTime + " ms"}
+				subtitle={prettyMilliseconds(monitorStats?.lastResponseTime ?? 0)}
 			/>
 
 			{monitor?.type === "http" && (

client/src/Components/monitors/charts/HistogramDetails.tsx

@@ -1,4 +1,4 @@
-import { BaseChart, BaseBox } from "@/Components/v2/design-elements";
+import { BaseChart, BaseBox } from "@/Components/design-elements";
 import { Clock } from "lucide-react";
 import {
 	AreaChart,

client/src/Components/monitors/charts/HistogramInfrastructure.tsx

@@ -0,0 +1,206 @@
+import { BaseChart } from "@/Components/design-elements";
+import {
+	AreaChart,
+	Area,
+	XAxis,
+	YAxis,
+	CartesianGrid,
+	ResponsiveContainer,
+} from "recharts";
+import { Fragment, useId } from "react";
+import { XTick } from "@/Components/monitors";
+
+import { useTheme } from "@mui/material/styles";
+import type { HardwareCheckStats } from "@/Types/Monitor";
+
+const AREA_COLORS = [
+	// Blues
+	"#3182bd", // Deep blue
+	"#6baed6", // Medium blue
+	"#9ecae1", // Light blue
+
+	// Greens
+	"#74c476", // Soft green
+	"#a1d99b", // Light green
+	"#c7e9c0", // Pale green
+
+	// Oranges
+	"#fdae6b", // Warm orange
+	"#fdd0a2", // Light orange
+	"#feedde", // Pale orange
+
+	// Purples
+	"#9467bd", // Lavender
+	"#a55194", // Deep magenta
+	"#c994c7", // Soft magenta
+
+	// Reds
+	"#ff9896", // Soft red
+	"#de2d26", // Deep red
+	"#fc9272", // Medium red
+
+	// Cyans/Teals
+	"#17becf", // Cyan
+	"#7fcdbb", // Teal
+	"#a1dab4", // Light teal
+
+	// Yellows
+	"#fec44f", // Mustard
+	"#fee391", // Light yellow
+	"#ffffd4", // Pale yellow
+
+	// Additional colors
+	"#e377c2", // Soft pink
+	"#bcbd22", // Olive
+	"#2ca02c", // Vibrant green
+];
+
+const createGradient = ({
+	id,
+	startColor,
+	endColor,
+	startOpacity = 0.8,
+	endOpacity = 0,
+	direction = "vertical",
+}: {
+	id: string;
+	startColor: string;
+	endColor: string;
+	startOpacity?: number;
+	endOpacity?: number;
+	direction?: "vertical" | "horizontal";
+}) => (
+	<defs>
+		<linearGradient
+			id={id}
+			x1={direction === "vertical" ? "0" : "0"}
+			y1={direction === "vertical" ? "0" : "0"}
+			x2={direction === "vertical" ? "0" : "1"}
+			y2={direction === "vertical" ? "1" : "0"}
+		>
+			<stop
+				offset="0%"
+				stopColor={startColor}
+				stopOpacity={startOpacity}
+			/>
+			<stop
+				offset="100%"
+				stopColor={endColor}
+				stopOpacity={endOpacity}
+			/>
+		</linearGradient>
+	</defs>
+);
+
+export const HistogramInfrastructure = ({
+	dateRange,
+	title,
+	type,
+	idx: _idx,
+	checks,
+	xKey,
+	yDomain,
+	dataKeys,
+	gradient = false,
+	gradientDirection = "vertical",
+	gradientStartColor,
+	gradientEndColor,
+	strokeColor,
+	fillColor,
+	yAxisFormatter,
+}: {
+	dateRange: string;
+	title: string;
+	type: string;
+	idx: number | null;
+	checks: HardwareCheckStats[];
+	xKey: string;
+	yDomain?: number[];
+	dataKeys: string[];
+	gradient?: boolean;
+	gradientDirection?: "vertical" | "horizontal";
+	gradientStartColor?: string;
+	gradientEndColor?: string;
+	strokeColor: string;
+	fillColor?: string;
+	yAxisFormatter?: (value: number) => string;
+}) => {
+	const theme = useTheme();
+	const uniqueId = useId();
+	const data = checks;
+
+	let avgTemps: { bucketDate: string; avg_temp: number | null }[] = [];
+	let tempYDomain: number[] = [];
+	if (type === "temp") {
+		avgTemps = data.map((check) => {
+			const temps = check.avgTemperature || [];
+			if (temps.length === 0) return { bucketDate: check.bucketDate, avg_temp: null };
+			const totalTemp = temps.reduce((sum, temp) => sum + (temp || 0), 0);
+			const avgTemp = totalTemp / temps.length;
+			return { bucketDate: check.bucketDate, avg_temp: avgTemp };
+		});
+
+		const maxTemp: number = avgTemps.reduce((max, item) => {
+			return item.avg_temp && item.avg_temp > max ? item.avg_temp : max;
+		}, 0);
+
+		tempYDomain = [0, Math.ceil((maxTemp * 1.3) / 10) * 10];
+	}
+
+	return (
+		<BaseChart
+			icon={null}
+			title={title}
+		>
+			<ResponsiveContainer
+				width="100%"
+				height={200}
+			>
+				<AreaChart data={type === "temp" ? avgTemps : data}>
+					<XAxis
+						dataKey={xKey}
+						tick={(props) => (
+							<XTick
+								{...props}
+								range={dateRange}
+							/>
+						)}
+					/>
+					<YAxis
+						domain={type === "temp" ? tempYDomain : yDomain}
+						tickFormatter={yAxisFormatter}
+					/>
+
+					<CartesianGrid
+						stroke={theme.palette.divider}
+						strokeWidth={1}
+						strokeOpacity={1}
+						fill="transparent"
+						vertical={false}
+					/>
+					{dataKeys?.map((dataKey, index) => {
+						const gradientId = `gradient-${uniqueId}-${index}`;
+						return (
+							<Fragment key={`${dataKey}-${index}`}>
+								{gradient === true &&
+									createGradient({
+										id: gradientId,
+										startColor: gradientStartColor || AREA_COLORS[index],
+										endColor: gradientEndColor || "transparent",
+										direction: gradientDirection,
+									})}
+								<Area
+									key={dataKey}
+									type="monotone"
+									dataKey={dataKey}
+									stroke={strokeColor || AREA_COLORS[index]}
+									fill={gradient === true ? `url(#${gradientId})` : fillColor}
+								/>
+							</Fragment>
+						);
+					})}
+				</AreaChart>
+			</ResponsiveContainer>
+		</BaseChart>
+	);
+};

client/src/Components/monitors/charts/HistogramPageSpeed.tsx

@@ -1,6 +1,6 @@
 import Stack from "@mui/material/Stack";
 import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip } from "recharts";
-import { HistogramPageSpeedTooltip } from "@/Components/v2/monitors/charts/HistogramPageSpeedTooltip";
+import { HistogramPageSpeedTooltip } from "@/Components/monitors/charts/HistogramPageSpeedTooltip";
 import { useTheme } from "@mui/material/styles";
 import type { CheckSnapshot } from "@/Types/Check";
 import type { MonitorStatus } from "@/Types/Monitor";

client/src/Components/monitors/charts/HistogramPageSpeedDetails.tsx

@@ -1,6 +1,6 @@
-import { BaseChart } from "@/Components/v2/design-elements";
+import { BaseChart } from "@/Components/design-elements";
 import { TrendingUp } from "lucide-react";
-import { XTick } from "@/Components/v2/monitors/";
+import { XTick } from "@/Components/monitors";
 import {
 	XAxis,
 	AreaChart,
@@ -9,7 +9,7 @@ import {
 	CartesianGrid,
 	ResponsiveContainer,
 } from "recharts";
-import { HistogramPageSpeedScoresTooltip } from "@/Components/v2/monitors";
+import { HistogramPageSpeedScoresTooltip } from "@/Components/monitors";
 
 import { useTheme } from "@mui/material/styles";
 import type { CheckSnapshot } from "@/Types/Check";

client/src/Components/monitors/charts/HistogramPageSpeedDetailsTooltip.tsx

@@ -3,13 +3,14 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { useTheme } from "@mui/material/styles";
 import { formatDateWithTz } from "@/Utils/TimeUtils";
-import type { ConfigItem } from "@/Components/v2/monitors";
+import type { ConfigItem } from "@/Components/monitors";
 import type { TooltipProps } from "recharts";
 import { useSelector } from "react-redux";
 import type { RootState } from "@/Types/state";
 
-interface HistogramPageSpeedScoresTooltipProps
-	extends Partial<TooltipProps<number, string>> {
+interface HistogramPageSpeedScoresTooltipProps extends Partial<
+	TooltipProps<number, string>
+> {
 	config: Record<string, ConfigItem>;
 }
 export const HistogramPageSpeedScoresTooltip = ({

client/src/Components/monitors/charts/HistogramStatus.tsx

@@ -1,9 +1,9 @@
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-import { BaseChart } from "@/Components/v2/design-elements";
+import { BaseChart } from "@/Components/design-elements";
 import { useTheme } from "@mui/material/styles";
 import { useSelector } from "react-redux";
-import { formatDateWithTz } from "@/Utils/timeUtilsLegacy";
+import { formatDateWithTz } from "@/Utils/TimeUtils";
 import { useTranslation } from "react-i18next";
 import { ResponsiveContainer, BarChart, XAxis, Bar, Cell, Tooltip } from "recharts";
 import { getResponseTimeColor } from "@/Utils/MonitorUtils";

client/src/Components/monitors/charts/PiePageSpeed.tsx

@@ -1,4 +1,4 @@
-import { BaseChart } from "@/Components/v2/design-elements";
+import { BaseChart } from "@/Components/design-elements";
 import { FileText } from "lucide-react";
 import type { CheckAudits, CheckSnapshot } from "@/Types/Check";
 import { Pie, PieChart, ResponsiveContainer, Label } from "recharts";

client/src/Components/monitors/charts/PiePageSpeedLegend.tsx

@@ -1,7 +1,7 @@
 import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
 import { BarChart3 } from "lucide-react";
-import { BaseChart } from "@/Components/v2/design-elements";
+import { BaseChart } from "@/Components/design-elements";
 import Typography from "@mui/material/Typography";
 
 import type { CheckSnapshot } from "@/Types/Check";

client/src/Components/monitors/charts/RadialAvgResponse.tsx

@@ -1,4 +1,4 @@
-import { BaseChart } from "@/Components/v2/design-elements";
+import { BaseChart } from "@/Components/design-elements";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { Gauge } from "lucide-react";

client/src/Components/monitors/index.tsx

@@ -1,5 +1,6 @@
 export * from "./ControlsFilter";
 export * from "./MonitorStatBoxes";
+export * from "./HeaderMonitorControls";
 export * from "./charts/HistogramStatus";
 export * from "./charts/RadialAvgResponse";
 export * from "./charts/HistogramDetails";
@@ -9,3 +10,5 @@ export * from "./charts/PiePageSpeed";
 export * from "./charts/PiePageSpeedLegend";
 export * from "./charts/HistogramPageSpeedDetails";
 export * from "./charts/HistogramPageSpeedDetailsTooltip";
+export * from "./charts/HistogramInfrastructure";
+export * from "./HeaderMonitorsSummary";

client/src/Components/routing/RouteProtected.tsx

@@ -0,0 +1,41 @@
+import { Navigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import type { RootState } from "@/Types/state";
+import type { UserRole } from "@/Types/User";
+
+interface ProtectedRouteProps {
+	children: React.ReactNode;
+}
+
+export const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
+	const authState = useSelector((state: RootState) => state.auth);
+
+	return authState.authToken ? (
+		children
+	) : (
+		<Navigate
+			to="/login"
+			replace
+		/>
+	);
+};
+
+interface RoleProtectedRouteProps {
+	roles: UserRole[];
+	children: React.ReactNode;
+}
+
+export const RoleProtectedRoute = ({ roles, children }: RoleProtectedRouteProps) => {
+	const authState = useSelector((state: RootState) => state.auth);
+	const userRoles = authState?.user?.role || [];
+	const canAccess = userRoles.some((role) => roles.includes(role));
+
+	return canAccess ? (
+		children
+	) : (
+		<Navigate
+			to="/uptime"
+			replace
+		/>
+	);
+};

client/src/Components/sidebar/Authfooter.tsx

@@ -0,0 +1,183 @@
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import { useTheme } from "@mui/material";
+import { useSelector, useDispatch } from "react-redux";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import { MoreVertical, LogOut } from "lucide-react";
+import { Avatar, Icon } from "@/Components/design-elements";
+import { clearAuthState } from "@/Features/Auth/authSlice.js";
+import type { RootState } from "@/Types/state.js";
+
+interface AuthFooterProps {
+	collapsed: boolean;
+	accountMenuItems: Array<{
+		name: string;
+		path: string;
+		icon: React.ReactNode;
+	}>;
+}
+
+export const AuthFooter = ({ collapsed, accountMenuItems }: AuthFooterProps) => {
+	const { t } = useTranslation();
+	const theme = useTheme();
+	const user = useSelector((state: RootState) => state.auth.user);
+	const navigate = useNavigate();
+	const dispatch = useDispatch();
+	const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+	const menuOpen = Boolean(anchorEl);
+	const handleMenuOpen = (e: React.MouseEvent<HTMLElement>) =>
+		setAnchorEl(e.currentTarget);
+	const handleMenuClose = () => setAnchorEl(null);
+
+	const handleNavigate = (path: string) => {
+		handleMenuClose();
+		navigate(path);
+	};
+
+	const handleLogout = () => {
+		dispatch(clearAuthState());
+		navigate("/login");
+	};
+
+	const getRoleText = () => {
+		const role = user?.role ?? "";
+		if (role.includes("superadmin"))
+			return t("components.sidebar.authFooter.roles.superAdmin");
+		if (role.includes("admin")) return t("components.sidebar.authFooter.roles.admin");
+		if (role.includes("user")) return t("components.sidebar.authFooter.roles.user");
+		if (role.includes("demo")) return t("components.sidebar.authFooter.roles.demoUser");
+		return role;
+	};
+
+	const filteredMenuItems = accountMenuItems.filter((item) => {
+		if (!user) return false;
+		if (item.name === "Password" && user.role?.includes("demo")) return false;
+		if (item.name === "Team" && !user.role?.includes("superadmin")) return false;
+		return true;
+	});
+
+	const menuItemSx = {
+		gap: theme.spacing(2),
+		borderRadius: theme.shape.borderRadius,
+		pl: theme.spacing(4),
+		"& svg": { stroke: theme.palette.text.secondary },
+	};
+
+	return (
+		<Stack
+			direction="row"
+			alignItems="center"
+			py={theme.spacing(4)}
+			px={theme.spacing(8)}
+			gap={theme.spacing(4)}
+		>
+			<Avatar
+				small
+				onClick={collapsed ? handleMenuOpen : undefined}
+				sx={{ cursor: collapsed ? "pointer" : "default" }}
+			/>
+
+			{!collapsed && (
+				<Stack
+					direction="row"
+					alignItems="center"
+					gap={theme.spacing(2)}
+					minWidth={0}
+					flex={1}
+				>
+					<Stack
+						minWidth={0}
+						flex={1}
+					>
+						<Typography
+							fontWeight={500}
+							noWrap
+							sx={{ color: theme.palette.text.primary }}
+						>
+							{user?.firstName} {user?.lastName}
+						</Typography>
+						<Typography
+							noWrap
+							sx={{ textTransform: "capitalize", color: theme.palette.text.secondary }}
+						>
+							{getRoleText()}
+						</Typography>
+					</Stack>
+					<IconButton
+						onClick={handleMenuOpen}
+						sx={{
+							"&:focus": { outline: "none" },
+							"& svg": { stroke: theme.palette.text.secondary },
+						}}
+					>
+						<Icon
+							icon={MoreVertical}
+							size={22}
+						/>
+					</IconButton>
+				</Stack>
+			)}
+
+			<Menu
+				anchorEl={anchorEl}
+				open={menuOpen}
+				onClose={handleMenuClose}
+				disableScrollLock
+				anchorOrigin={{ vertical: "top", horizontal: "right" }}
+				slotProps={{
+					paper: { sx: { mt: theme.spacing(-4), ml: collapsed ? theme.spacing(2) : 0 } },
+				}}
+				MenuListProps={{ sx: { p: 2, "& li": { m: 0 } } }}
+				sx={{ ml: theme.spacing(4) }}
+			>
+				{collapsed && (
+					<Box
+						px={2}
+						pb={2}
+						sx={{ pointerEvents: "none" }}
+					>
+						<Typography
+							fontWeight={500}
+							fontSize={13}
+						>
+							{user?.firstName} {user?.lastName}
+						</Typography>
+						<Typography
+							fontSize={12}
+							sx={{ textTransform: "capitalize" }}
+						>
+							{getRoleText()}
+						</Typography>
+					</Box>
+				)}
+				{filteredMenuItems.map((item) => (
+					<MenuItem
+						key={item.name}
+						onClick={() => handleNavigate(item.path)}
+						sx={menuItemSx}
+					>
+						{item.icon}
+						{item.name}
+					</MenuItem>
+				))}
+				<MenuItem
+					onClick={handleLogout}
+					sx={menuItemSx}
+				>
+					<Icon
+						icon={LogOut}
+						size={20}
+					/>
+					{t("components.sidebar.authFooter.logOut")}
+				</MenuItem>
+			</Menu>
+		</Stack>
+	);
+};

client/src/Components/sidebar/Logo.tsx

@@ -1,37 +1,37 @@
-import Stack from "@mui/material/Stack";
+import Stack, { type StackProps } from "@mui/material/Stack";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import { useTheme } from "@mui/material/styles";
-import { useNavigate } from "react-router";
+import { toggleSidebar } from "@/Features/UI/uiSlice.js";
+import { useDispatch } from "react-redux";
 import { useTranslation } from "react-i18next";
-import PropTypes from "prop-types";
+import useSidebar from "@/Hooks/useSidebar";
 
-const Logo = ({ collapsed }) => {
+export const Logo = (props: StackProps) => {
 	const { t } = useTranslation();
 	const theme = useTheme();
-	const navigate = useNavigate();
-
+	const dispatch = useDispatch();
+	const { collapsed } = useSidebar();
 	return (
 		<Stack
-			pt={theme.spacing(6)}
-			pb={theme.spacing(12)}
-			pl={theme.spacing(8)}
 			direction="row"
 			alignItems="center"
 			gap={theme.spacing(4)}
-			onClick={() => navigate("/")}
+			onClick={() => {
+				dispatch(toggleSidebar());
+			}}
 			sx={{ cursor: "pointer" }}
+			{...props}
 		>
 			<Typography
-				pl={theme.spacing("1px")}
 				minWidth={theme.spacing(16)}
 				minHeight={theme.spacing(16)}
 				display={"flex"}
 				justifyContent={"center"}
 				alignItems={"center"}
-				backgroundColor={theme.palette.accent.main}
+				bgcolor={theme.palette.primary.main}
 				borderRadius={theme.shape.borderRadius}
-				color={theme.palette.accent.contrastText}
+				color={theme.palette.primary.contrastText}
 				fontSize={18}
 			>
 				C
@@ -49,9 +49,8 @@ const Logo = ({ collapsed }) => {
 				<Typography
 					lineHeight={1}
 					mt={theme.spacing(2)}
-					color={theme.palette.primary.contrastText}
-					fontSize={"var(--env-var-font-size-medium-plus)"}
-					sx={{ fontWeight: 500 }}
+					variant="h2"
+					fontWeight={500}
 				>
 					{t("common.appName")}
 				</Typography>
@@ -59,9 +58,3 @@ const Logo = ({ collapsed }) => {
 		</Stack>
 	);
 };
-
-Logo.propTypes = {
-	collapsed: PropTypes.bool,
-};
-
-export default Logo;

client/src/Components/sidebar/Menu.tsx

@@ -0,0 +1,120 @@
+import { Icon } from "@/Components/design-elements";
+
+import {
+	Globe,
+	Gauge,
+	Link,
+	Bell,
+	FileText,
+	AlertTriangle,
+	Wifi,
+	Wrench,
+	Database,
+	Settings,
+	HelpCircle,
+	MessageCircle,
+	Code,
+	User,
+	Lock,
+	Users,
+} from "lucide-react";
+
+export const getMenu = (t: Function) => {
+	return [
+		{
+			name: t("components.sidebar.menu.uptime"),
+			path: "uptime",
+			icon: <Icon icon={Globe} />,
+		},
+		{
+			name: t("components.sidebar.menu.pagespeed"),
+			path: "pagespeed",
+			icon: <Icon icon={Gauge} />,
+		},
+		{
+			name: t("components.sidebar.menu.infrastructure"),
+			path: "infrastructure",
+			icon: <Icon icon={Link} />,
+		},
+		{
+			name: t("components.sidebar.menu.notifications"),
+			path: "notifications",
+			icon: <Icon icon={Bell} />,
+		},
+		{
+			name: t("components.sidebar.menu.checks"),
+			path: "checks",
+			icon: <Icon icon={FileText} />,
+		},
+		{
+			name: t("components.sidebar.menu.incidents"),
+			path: "incidents",
+			icon: <Icon icon={AlertTriangle} />,
+		},
+		{
+			name: t("components.sidebar.menu.statusPages"),
+			path: "status",
+			icon: <Icon icon={Wifi} />,
+		},
+		{
+			name: t("components.sidebar.menu.maintenance"),
+			path: "maintenance",
+			icon: <Icon icon={Wrench} />,
+		},
+		{
+			name: t("components.sidebar.menu.logs"),
+			path: "logs",
+			icon: <Icon icon={Database} />,
+		},
+		{
+			name: t("components.sidebar.menu.settings"),
+			icon: <Icon icon={Settings} />,
+			path: "settings",
+		},
+	];
+};
+
+export const getBottomMenu = (t: Function) => {
+	return [
+		{
+			name: t("components.sidebar.bottomMenu.support"),
+			path: "support",
+			icon: <Icon icon={HelpCircle} />,
+		},
+		{
+			name: t("components.sidebar.bottomMenu.discussions"),
+			path: "discussions",
+			icon: <Icon icon={MessageCircle} />,
+		},
+		{
+			name: t("components.sidebar.bottomMenu.docs"),
+			path: "docs",
+			icon: <Icon icon={FileText} />,
+		},
+		{
+			name: t("components.sidebar.bottomMenu.changelog"),
+			path: "changelog",
+			icon: <Icon icon={Code} />,
+		},
+	];
+};
+
+export const getAccountMenu = (t: Function) => {
+	return [
+		{
+			name: t("components.sidebar.accountMenu.profile"),
+			path: "account/profile",
+			icon: <Icon icon={User} />,
+		},
+		{
+			name: t("components.sidebar.accountMenu.password"),
+			path: "account/password",
+			icon: <Icon icon={Lock} />,
+		},
+		{
+			name: t("components.sidebar.accountMenu.team"),
+			path: "account/team",
+			icon: <Icon icon={Users} />,
+		},
+	];
+};

client/src/Components/sidebar/NavItem.tsx

@@ -3,19 +3,31 @@ import ListItemButton from "@mui/material/ListItemButton";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
-import { useTheme } from "@emotion/react";
-import PropTypes from "prop-types";
+import { useTheme } from "@mui/material/styles";
+import useSidebar from "@/Hooks/useSidebar";
 
-const NavItem = ({ item, collapsed, selected, onClick }) => {
+export interface NavData {
+	name: string;
+	icon: React.ReactElement;
+}
+
+export const NavItem = ({
+	item,
+	selected,
+	onClick,
+}: {
+	item: NavData;
+	selected: boolean;
+	onClick: (event: React.MouseEvent) => void;
+}) => {
+	const { collapsed } = useSidebar();
 	const theme = useTheme();
-	const iconStroke = selected
-		? theme.palette.primary.contrastText
-		: theme.palette.primary.contrastTextTertiary;
+	const iconStroke = selected ? theme.palette.primary.main : theme.palette.text.secondary;
 
-	const buttonBgColor = selected ? theme.palette.secondary.main : "transparent";
+	const buttonBgColor = selected ? theme.palette.action.selected : "transparent";
 	const buttonBgHoverColor = selected
-		? theme.palette.secondary.main
-		: theme.palette.tertiary.main;
+		? theme.palette.action.selected
+		: theme.palette.action.hover;
 	const fontWeight = selected ? 600 : 400;
 	return (
 		<Tooltip
@@ -38,10 +50,14 @@ const NavItem = ({ item, collapsed, selected, onClick }) => {
 			<ListItemButton
 				sx={{
 					backgroundColor: buttonBgColor,
+					backgroundImage: "none",
+					border: 1,
+					borderColor: "transparent",
 					"&:hover": {
 						backgroundColor: buttonBgHoverColor,
+						backgroundImage: "none",
 					},
-					height: 37,
+					height: 32,
 					gap: theme.spacing(4),
 					borderRadius: theme.shape.borderRadius,
 					px: theme.spacing(4),
@@ -52,13 +68,20 @@ const NavItem = ({ item, collapsed, selected, onClick }) => {
 				<ListItemIcon
 					sx={{
 						minWidth: 0,
-						color: iconStroke,
 						"& svg": {
-							height: 20,
-							width: 20,
+							height: 16,
+							width: 16,
 							opacity: 0.81,
+							transition: "stroke 0.2s ease",
+						},
+						"& svg path, & svg line, & svg polyline, & svg rect, & svg circle": {
 							stroke: iconStroke,
 						},
+						".MuiListItemButton-root:hover &": {
+							"& svg path, & svg line, & svg polyline, & svg rect, & svg circle": {
+								stroke: theme.palette.primary.main,
+							},
+						},
 					}}
 				>
 					{item.icon}
@@ -73,7 +96,6 @@ const NavItem = ({ item, collapsed, selected, onClick }) => {
 				>
 					<Typography
 						variant="body1"
-						color={theme.palette.primary.contrastText}
 						sx={{
 							fontWeight: fontWeight,
 							opacity: 0.9,
@@ -86,11 +108,3 @@ const NavItem = ({ item, collapsed, selected, onClick }) => {
 		</Tooltip>
 	);
 };
-
-NavItem.propTypes = {
-	item: PropTypes.object,
-	collapsed: PropTypes.bool,
-	selected: PropTypes.bool,
-	onClick: PropTypes.func,
-};
-export default NavItem;

client/src/Components/sidebar/StarPrompt.tsx

@@ -1,18 +1,25 @@
-import React from "react";
 import { Typography, IconButton, Stack, Box } from "@mui/material";
-import Icon from "../Icon";
-import { useTheme } from "@emotion/react";
+import { Icon } from "@/Components/design-elements";
+import { X } from "lucide-react";
+
+import { useTheme } from "@mui/material";
 import { useSelector, useDispatch } from "react-redux";
 import { useTranslation } from "react-i18next";
-import { setStarPromptOpen } from "../../../Features/UI/uiSlice.js";
+import { setStarPromptOpen } from "@/Features/UI/uiSlice.js";
+import type { RootState } from "@/Types/state.js";
+import useSidebar from "@/Hooks/useSidebar.js";
 
-const StarPrompt = ({ repoUrl = "https://github.com/bluewave-labs/checkmate" }) => {
+export const StarPrompt = ({
+	repoUrl = "https://github.com/bluewave-labs/checkmate",
+}: {
+	repoUrl?: string;
+}) => {
 	const theme = useTheme();
 	const dispatch = useDispatch();
 	const { t } = useTranslation();
-	const isOpen = useSelector((state) => state.ui?.starPromptOpen ?? true);
-	const mode = useSelector((state) => state.ui.mode);
-
+	const isOpen = useSelector((state: RootState) => state.ui?.starPromptOpen ?? true);
+	const mode = useSelector((state: RootState) => state.ui.mode);
+	const { collapsed } = useSidebar();
 	const handleClose = () => {
 		dispatch(setStarPromptOpen(false));
 	};
@@ -21,6 +28,7 @@ const StarPrompt = ({ repoUrl = "https://github.com/bluewave-labs/checkmate" })
 		window.open(repoUrl, "_blank");
 	};
 
+	if (collapsed) return null;
 	if (!isOpen) return null;
 
 	return (
@@ -29,8 +37,8 @@ const StarPrompt = ({ repoUrl = "https://github.com/bluewave-labs/checkmate" })
 			sx={{
 				width: "100%",
 				padding: `${theme.spacing(6)} ${theme.spacing(6)}`,
-				borderTop: `1px solid ${theme.palette.primary.lowContrast}`,
-				borderBottom: `1px solid ${theme.palette.primary.lowContrast}`,
+				borderTop: `1px solid ${theme.palette.divider}`,
+				borderBottom: `1px solid ${theme.palette.divider}`,
 				borderRadius: 0,
 				gap: theme.spacing(1.5),
 			}}
@@ -44,15 +52,9 @@ const StarPrompt = ({ repoUrl = "https://github.com/bluewave-labs/checkmate" })
 			>
 				<Typography
 					variant="subtitle2"
-					sx={{
-						color:
-							mode === "dark"
-								? theme.palette.primary.contrastText
-								: theme.palette.text.primary,
-						mt: theme.spacing(3),
-					}}
+					mt={theme.spacing(3)}
 				>
-					{t("starPromptTitle")}
+					{t("components.sidebar.starPrompt.title")}
 				</Typography>
 				<IconButton
 					onClick={handleClose}
@@ -60,7 +62,6 @@ const StarPrompt = ({ repoUrl = "https://github.com/bluewave-labs/checkmate" })
 					sx={{
 						color: theme.palette.text.primary,
 						padding: 0,
-						marginTop: theme.spacing(-5),
 						"&:hover": {
 							backgroundColor: "transparent",
 							opacity: 0.8,
@@ -68,23 +69,19 @@ const StarPrompt = ({ repoUrl = "https://github.com/bluewave-labs/checkmate" })
 					}}
 				>
 					<Icon
-						name="X"
+						icon={X}
 						size={20}
 					/>
 				</IconButton>
 			</Stack>
 
 			<Typography
-				variant="body1"
 				sx={{
-					color: theme.palette.primary.contrastTextTertiary,
-					fontSize: "0.938rem",
-					lineHeight: 1.5,
 					mb: 1,
 					px: theme.spacing(4),
 				}}
 			>
-				{t("starPromptDescription")}
+				{t("components.sidebar.starPrompt.description")}
 			</Typography>
 
 			<Box
@@ -106,5 +103,3 @@ const StarPrompt = ({ repoUrl = "https://github.com/bluewave-labs/checkmate" })
 		</Stack>
 	);
 };
-
-export default StarPrompt;

client/src/Components/sidebar/index.tsx

@@ -0,0 +1,131 @@
+import { useEffect } from "react";
+import Backdrop from "@mui/material/Backdrop";
+import Stack from "@mui/material/Stack";
+import List from "@mui/material/List";
+import Divider from "@mui/material/Divider";
+import { useSidebar } from "@/Hooks/useSidebar.js";
+import { Logo } from "@/Components/sidebar/Logo";
+import { getMenu, getBottomMenu, getAccountMenu } from "@/Components/sidebar/Menu";
+import { NavItem } from "@/Components/sidebar/NavItem";
+import { StarPrompt } from "@/Components/sidebar/StarPrompt";
+import { AuthFooter } from "@/Components/sidebar/Authfooter";
+
+import { useNavigate, useLocation } from "react-router";
+import { useTranslation } from "react-i18next";
+import { useTheme, useMediaQuery } from "@mui/material";
+import { useDispatch } from "react-redux";
+import { setCollapsed } from "@/Features/UI/uiSlice";
+
+const URL_MAP: Record<string, string> = {
+	support: "https://discord.com/invite/NAb6H3UTjK",
+	discussions: "https://github.com/bluewave-labs/checkmate/discussions",
+	docs: "https://bluewavelabs.gitbook.io/checkmate",
+	changelog: "https://github.com/bluewave-labs/checkmate/releases",
+};
+
+export const Sidebar = () => {
+	const dispatch = useDispatch();
+	const navigate = useNavigate();
+	const location = useLocation();
+	const { t } = useTranslation();
+	const { width, transition, collapsed } = useSidebar();
+	const theme = useTheme();
+	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
+	const menu = getMenu(t);
+	const bottomMenu = getBottomMenu(t);
+	const accountMenu = getAccountMenu(t);
+
+	useEffect(() => {
+		dispatch(setCollapsed({ collapsed: isSmall }));
+	}, [isSmall, dispatch]);
+
+	const handleNavClick = (path: string) => {
+		const url = URL_MAP[path];
+		if (url) {
+			window.open(url, "_blank", "noreferrer");
+		} else {
+			navigate(`/${path}`);
+		}
+		if (isSmall) {
+			dispatch(setCollapsed({ collapsed: true }));
+		}
+	};
+
+	return (
+		<>
+			<Backdrop
+				open={!collapsed && isSmall}
+				onClick={() => dispatch(setCollapsed({ collapsed: true }))}
+				sx={{ zIndex: 999 }}
+			/>
+			<Stack
+				component="aside"
+				position={isSmall ? "fixed" : "sticky"}
+				top={0}
+				left={0}
+				minHeight={"100vh"}
+				maxHeight={"100vh"}
+				paddingTop={theme.spacing(6)}
+				paddingBottom={theme.spacing(6)}
+				gap={theme.spacing(6)}
+				borderRight={`1px solid ${theme.palette.divider}`}
+				width={width}
+				sx={{
+					touchAction: "none",
+					transition: transition,
+					zIndex: 1000,
+					backdropFilter: "blur(8px)",
+				}}
+			>
+				<List
+					component="nav"
+					disablePadding
+					sx={{
+						px: theme.spacing(6),
+						flex: 1,
+					}}
+				>
+					<Logo
+						pt={theme.spacing(8)}
+						pb={theme.spacing(10)}
+					/>
+					{menu.map((item) => {
+						const selected = location.pathname.startsWith(`/${item.path}`);
+						return (
+							<NavItem
+								key={item.path}
+								item={item}
+								selected={selected}
+								onClick={() => handleNavClick(item.path)}
+							/>
+						);
+					})}
+				</List>
+				<StarPrompt />
+				<List
+					component="nav"
+					disablePadding
+					sx={{ px: theme.spacing(6) }}
+				>
+					{bottomMenu.map((item) => {
+						const selected = location.pathname.startsWith(`/${item.path}`);
+						return (
+							<NavItem
+								key={item.path}
+								item={item}
+								selected={selected}
+								onClick={() => handleNavClick(item.path)}
+							/>
+						);
+					})}
+				</List>
+				<Divider sx={{ borderColor: theme.palette.divider }} />
+
+				<AuthFooter
+					collapsed={collapsed}
+					accountMenuItems={accountMenu}
+				/>
+			</Stack>
+		</>
+	);
+};

client/src/Components/v1/ActionsMenu/index.jsx

@@ -1,228 +0,0 @@
-// Components
-import IconButton from "@mui/material/IconButton";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import Icon from "../Icon";
-import Dialog from "../Dialog/index.jsx";
-
-// Utils
-import { useState } from "react";
-import { useTheme } from "@emotion/react";
-import { useNavigate } from "react-router-dom";
-import { createToast } from "../../../Utils/toastUtils.jsx";
-
-import PropTypes from "prop-types";
-import { usePauseMonitor, useDeleteMonitor } from "../../../Hooks/monitorHooks.js";
-
-const ActionsMenu = ({
-	monitor,
-	isAdmin,
-	updateRowCallback,
-	pauseCallback,
-	setIsLoading = () => {},
-}) => {
-	const [anchorEl, setAnchorEl] = useState(null);
-	const [actions, setActions] = useState({});
-	const [isOpen, setIsOpen] = useState(false);
-	const theme = useTheme();
-	const [pauseMonitor, isPausing, error] = usePauseMonitor();
-	const [deleteMonitor, isDeleting] = useDeleteMonitor();
-
-	const handleRemove = async (event) => {
-		event.preventDefault();
-		event.stopPropagation();
-		let monitor = { id: actions.id };
-		await deleteMonitor({ monitor });
-		updateRowCallback();
-	};
-
-	const handlePause = async () => {
-		try {
-			setIsLoading(true);
-			await pauseMonitor({ monitorId: monitor.id });
-			pauseCallback();
-		} catch (error) {
-			createToast({ body: "Failed to pause monitor." });
-		} finally {
-			setIsLoading(false);
-		}
-	};
-
-	const openMenu = (event, id, url) => {
-		event.preventDefault();
-		event.stopPropagation();
-		setAnchorEl(event.currentTarget);
-		setActions({ id: id, url: url });
-	};
-
-	const openRemove = (e) => {
-		closeMenu(e);
-		setIsOpen(true);
-	};
-
-	const closeMenu = (e) => {
-		e.stopPropagation();
-		setAnchorEl(null);
-	};
-
-	const navigate = useNavigate();
-	return (
-		<>
-			<IconButton
-				aria-label="monitor actions"
-				onClick={(event) => {
-					event.stopPropagation();
-					openMenu(event, monitor.id, monitor.type === "ping" ? null : monitor.url);
-				}}
-				sx={{
-					"&:focus": {
-						outline: "none",
-					},
-					"& svg path": {
-						stroke: theme.palette.primary.contrastTextTertiary,
-					},
-				}}
-			>
-				<Icon
-					name="Settings"
-					size={20}
-				/>
-			</IconButton>
-
-			<Menu
-				className="actions-menu"
-				anchorEl={anchorEl}
-				open={Boolean(anchorEl)}
-				onClose={(e) => closeMenu(e)}
-				disableScrollLock
-				slotProps={{
-					paper: {
-						sx: {
-							"& ul": {
-								p: theme.spacing(2.5),
-								backgroundColor: theme.palette.primary.main,
-							},
-							"& li": { m: 0, color: theme.palette.primary.contrastTextSecondary },
-							/* 
-							This should not be set automatically on the last of type
-							"& li:last-of-type": {
-								color: theme.palette.error.main,
-							}, */
-						},
-					},
-				}}
-			>
-				{actions.url !== null ? (
-					<MenuItem
-						onClick={(e) => {
-							closeMenu(e);
-							e.stopPropagation();
-							window.open(actions.url, "_blank", "noreferrer");
-						}}
-					>
-						Open site
-					</MenuItem>
-				) : (
-					""
-				)}
-				<MenuItem
-					onClick={(e) => {
-						e.stopPropagation();
-						navigate(`/uptime/${actions.id}`);
-					}}
-				>
-					Details
-				</MenuItem>
-				{/* TODO - pass monitor id to Incidents page */}
-				<MenuItem
-					onClick={(e) => {
-						e.stopPropagation();
-						navigate(`/incidents/${actions.id}`);
-					}}
-				>
-					Incidents
-				</MenuItem>
-				{isAdmin && (
-					<MenuItem
-						onClick={(e) => {
-							e.stopPropagation();
-
-							navigate(`/uptime/configure/${actions.id}`);
-						}}
-					>
-						Configure
-					</MenuItem>
-				)}
-				{isAdmin && (
-					<MenuItem
-						onClick={(e) => {
-							e.stopPropagation();
-							navigate(`/uptime/create/${actions.id}`);
-						}}
-					>
-						Clone
-					</MenuItem>
-				)}
-				{isAdmin && (
-					<MenuItem
-						onClick={(e) => {
-							closeMenu(e);
-
-							e.stopPropagation();
-							handlePause(e);
-						}}
-					>
-						{monitor?.isActive === true ? "Pause" : "Resume"}
-					</MenuItem>
-				)}
-				{isAdmin && (
-					<MenuItem
-						onClick={(e) => {
-							e.stopPropagation();
-							openRemove(e);
-						}}
-						sx={{ "&.MuiButtonBase-root": { color: theme.palette.error.main } }}
-					>
-						Remove
-					</MenuItem>
-				)}
-			</Menu>
-			<Dialog
-				open={isOpen}
-				theme={theme}
-				title="Do you really want to delete this monitor?"
-				description="Once deleted, this monitor cannot be retrieved."
-				/* Do we need stop propagation? */
-				onCancel={(e) => {
-					e.stopPropagation();
-					setIsOpen(false);
-				}}
-				confirmationButtonLabel="Delete"
-				/* Do we need stop propagation? */
-				onConfirm={(e) => {
-					console.log(e);
-					e.stopPropagation();
-					handleRemove(e);
-				}}
-				isLoading={isDeleting}
-				modelTitle="modal-delete-monitor"
-				modelDescription="delete-monitor-confirmation"
-			/>
-		</>
-	);
-};
-
-ActionsMenu.propTypes = {
-	monitor: PropTypes.shape({
-		id: PropTypes.string,
-		url: PropTypes.string,
-		type: PropTypes.string,
-		isActive: PropTypes.bool,
-	}).isRequired,
-	isAdmin: PropTypes.bool,
-	updateRowCallback: PropTypes.func,
-	pauseCallback: PropTypes.func,
-	setIsLoading: PropTypes.func,
-};
-
-export default ActionsMenu;

client/src/Components/v1/Alert/index.css

@@ -1,9 +0,0 @@
-.alert {
-	margin: 0;
-	width: fit-content;
-}
-.alert,
-.alert button,
-.alert .MuiTypography-root {
-	font-size: var(--env-var-font-size-medium);
-}

client/src/Components/v1/Alert/index.jsx

@@ -1,138 +0,0 @@
-import PropTypes from "prop-types";
-import { useTheme } from "@emotion/react";
-import { Box, Button, IconButton, Stack, Typography } from "@mui/material";
-import Icon from "../Icon";
-import "./index.css";
-
-/**
- * Icons mapping for different alert variants.
- * @type {Object<string, JSX.Element>}
- */
-
-const icons = {
-	info: (
-		<Icon
-			name="Info"
-			size={24}
-		/>
-	),
-	error: (
-		<Icon
-			name="AlertCircle"
-			size={24}
-		/>
-	),
-	warning: (
-		<Icon
-			name="AlertTriangle"
-			size={24}
-		/>
-	),
-};
-
-/**
- * @param {Object} props
- * @param {'info' | 'error' | 'warning'} props.variant - The type of alert.
- * @param {string} [props.title] - The title of the alert.
- * @param {string} [props.body] - The body text of the alert.
- * @param {boolean} [props.isToast] - Indicates if the alert is used as a toast notification.
- * @param {boolean} [props.hasIcon] - Whether to display an icon in the alert.
- * @param {function} props.onClick - Toast dismiss function.
- * @returns {JSX.Element}
- */
-
-const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => {
-	const theme = useTheme();
-	/* TODO 
-	Do we need other variants for alert?
-	*/
-
-	const text = theme.palette.secondary.contrastText;
-	const border = theme.palette.alert.contrastText;
-	const bg = theme.palette.alert.main;
-	const icon = icons[variant];
-
-	return (
-		<Stack
-			direction="row"
-			justifyContent="flex-start"
-			alignItems={hasIcon ? "" : "center"}
-			className="alert row-stack"
-			gap={theme.spacing(8)}
-			sx={{
-				padding: hasIcon ? theme.spacing(8) : `${theme.spacing(4)} ${theme.spacing(8)}`,
-				backgroundColor: bg,
-				border: `solid 1px ${border}`,
-				borderRadius: theme.shape.borderRadius,
-			}}
-		>
-			{hasIcon && <Box sx={{ color: text }}>{icon}</Box>}
-			<Stack
-				direction="column"
-				gap="2px"
-				sx={{ flex: 1 }}
-			>
-				{title && (
-					<Typography sx={{ fontWeight: "700", color: `${text}` }}>{title}</Typography>
-				)}
-				{body && (
-					<Typography sx={{ fontWeight: "400", color: `${text}` }}>{body}</Typography>
-				)}
-				{hasIcon && isToast && (
-					<Button
-						variant="text"
-						color="info"
-						onClick={onClick}
-						sx={{
-							fontWeight: "600",
-							width: "fit-content",
-							mt: theme.spacing(4),
-							padding: 0,
-							minWidth: 0,
-						}}
-					>
-						Dismiss
-					</Button>
-				)}
-			</Stack>
-			{isToast && (
-				<IconButton
-					onClick={onClick}
-					sx={{
-						alignSelf: "flex-start",
-						ml: "auto",
-						mr: "-5px",
-						mt: hasIcon ? "-5px" : 0,
-						padding: "5px",
-						"&:focus": {
-							outline: "none",
-						},
-					}}
-				>
-					<Icon
-						name="X"
-						size={20}
-					/>
-				</IconButton>
-			)}
-		</Stack>
-	);
-};
-
-Alert.propTypes = {
-	variant: PropTypes.oneOf(["info", "error", "warning"]).isRequired,
-	title: PropTypes.string,
-	body: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-	isToast: PropTypes.bool,
-	hasIcon: PropTypes.bool,
-	onClick: function (props, propName, componentName) {
-		if (props.isToast && !props[propName]) {
-			return new Error(
-				`Prop '${propName}' is required when 'isToast' is true in '${componentName}'.`
-			);
-		}
-		return null;
-	},
-};
-
-export default Alert;

client/src/Components/v1/Animated/PulseDot.jsx

@@ -1,68 +0,0 @@
-import PropTypes from "prop-types";
-import { Box, Stack, useTheme } from "@mui/material";
-// import useUtils from "../../Pages/Uptime/utils";
-
-/**
- * A component that renders a pulsating dot with a specified color.
- *
- * @component
- * @example
- * // Example usage:
- * <PulseDot color="#f00" />
- *
- * @param {Object} props
- * @param {string} props.color - The color of the dot.
- * @returns {JSX.Element} The PulseDot component.
- */
-
-const PulseDot = ({ color }) => {
-	const theme = useTheme();
-	// const { statusToTheme } = useUtils();
-	/* TODO refactor so it gets status and gets theme color. Then uses theme.palette.[themeColor].lowContrast  */
-	/* const themeColor = statusToTheme[status]; */
-
-	return (
-		<Stack
-			width="26px"
-			height="24px"
-			alignItems="center"
-			justifyContent="center"
-		>
-			<Box
-				minWidth="18px"
-				minHeight="18px"
-				sx={{
-					position: "relative",
-					backgroundColor: color,
-					borderRadius: "50%",
-					"&::before": {
-						content: `""`,
-						position: "absolute",
-						width: "100%",
-						height: "100%",
-						backgroundColor: "inherit",
-						borderRadius: "50%",
-						animation: "ripple 1.8s ease-out infinite",
-					},
-					"&::after": {
-						content: `""`,
-						position: "absolute",
-						width: "7px",
-						height: "7px",
-						borderRadius: "50%",
-						backgroundColor: theme.palette.accent.contrastText,
-						top: "50%",
-						left: "50%",
-						transform: "translate(-50%, -50%)",
-					},
-				}}
-			/>
-		</Stack>
-	);
-};
-
-PulseDot.propTypes = {
-	color: PropTypes.string.isRequired,
-};
-
-export default PulseDot;

client/src/Components/v1/ArrowLeft/index.jsx

@@ -1,36 +0,0 @@
-import Icon from "../Icon";
-import PropTypes from "prop-types";
-
-const ArrowLeft = ({ type, color = "#667085", ...props }) => {
-	if (type === "double") {
-		return (
-			<Icon
-				name="ChevronsLeft"
-				color={color}
-				{...props}
-			/>
-		);
-	} else if (type === "long") {
-		return (
-			<Icon
-				name="ArrowLeft"
-				color={color}
-				{...props}
-			/>
-		);
-	} else {
-		return (
-			<Icon
-				name="ChevronLeft"
-				color={color}
-				{...props}
-			/>
-		);
-	}
-};
-
-ArrowLeft.propTypes = {
-	color: PropTypes.string,
-	type: PropTypes.oneOf(["double", "long", "default"]),
-};
-export default ArrowLeft;

client/src/Components/v1/ArrowRight/index.jsx

@@ -1,29 +0,0 @@
-import Icon from "../Icon";
-import PropTypes from "prop-types";
-
-const ArrowRight = ({ type, color = "#667085", ...props }) => {
-	if (type === "double") {
-		return (
-			<Icon
-				name="ChevronsRight"
-				color={color}
-				{...props}
-			/>
-		);
-	} else {
-		return (
-			<Icon
-				name="ChevronRight"
-				color={color}
-				{...props}
-			/>
-		);
-	}
-};
-
-ArrowRight.propTypes = {
-	type: PropTypes.oneOf(["double", "default"]),
-	color: PropTypes.string,
-};
-
-export default ArrowRight;

client/src/Components/v1/Avatar/index.jsx

@@ -1,73 +0,0 @@
-import { Avatar as MuiAvatar } from "@mui/material";
-import PropTypes from "prop-types";
-import { useSelector } from "react-redux";
-import { useEffect, useState } from "react";
-import { useTheme } from "@emotion/react";
-/**
- * @component
- * @param {Object} props
- * @param {string} props.src - Path to image for avatar
- * @param {boolean} props.small - Specifies if avatar should be large
- * @param {Object} [props.sx] - Additional styles to apply to the button.
- * @returns {JSX.Element}
- * @example
- * // Render a red label
- * <Avatar src="assets/img" first="Alex" last="Holliday" small />
- */
-
-const Avatar = ({ src, small, sx, onClick = () => {} }) => {
-	const { user } = useSelector((state) => state.auth);
-	const theme = useTheme();
-
-	const style = small ? { width: 32, height: 32 } : { width: 64, height: 64 };
-	const border = small ? 1 : 3;
-
-	const [image, setImage] = useState();
-	useEffect(() => {
-		if (user.avatarImage) {
-			setImage(`data:image/png;base64,${user.avatarImage}`);
-		}
-	}, [user?.avatarImage]);
-
-	return (
-		<MuiAvatar
-			onClick={onClick}
-			alt={`${user?.firstName} ${user?.lastName}`}
-			/* TODO What is the  /static/images/avatar/2.jpg ?*/
-			src={src ? src : user?.avatarImage ? image : "/static/images/avatar/2.jpg"}
-			sx={{
-				fontSize: small ? "16px" : "22px",
-				fontWeight: 400,
-				color: theme.palette.accent.contrastText,
-				backgroundColor: theme.palette.accent.main, // Same BG color as checkmate BG in sidebar
-				display: "inline-flex",
-				/* 
-				TODO not sure what this is for*/
-				"&::before": {
-					content: `""`,
-					position: "absolute",
-					top: 0,
-					left: 0,
-					width: `100%`,
-					height: `100%`,
-					border: `${border}px solid rgba(255,255,255,0.2)`,
-					borderRadius: "50%",
-				},
-				...style,
-				...sx,
-			}}
-		>
-			{user.firstName?.charAt(0)}
-			{user.lastName?.charAt(0) || ""}
-		</MuiAvatar>
-	);
-};
-
-Avatar.propTypes = {
-	src: PropTypes.string,
-	small: PropTypes.bool,
-	sx: PropTypes.object,
-	onClick: PropTypes.func,
-};
-
-export default Avatar;

client/src/Components/v1/Breadcrumbs/index.css

@@ -1,22 +0,0 @@
-.MuiBreadcrumbs-root {
-	min-height: 34px;
-}
-.MuiBreadcrumbs-root svg {
-	width: 16px;
-	min-height: 16px;
-}
-.MuiBreadcrumbs-root .MuiBreadcrumbs-li a {
-	font-size: var(--env-var-font-size-medium);
-	font-weight: 400;
-}
-.MuiBreadcrumbs-root .MuiBreadcrumbs-li:not(:last-child) {
-	cursor: pointer;
-}
-.MuiBreadcrumbs-root .MuiBreadcrumbs-li:last-child a {
-	font-weight: 500;
-	opacity: 1;
-	cursor: default;
-}
-.MuiBreadcrumbs-root .MuiBreadcrumbs-separator {
-	margin: 0;
-}

client/src/Components/v1/Breadcrumbs/index.jsx

@@ -1,78 +0,0 @@
-import PropTypes from "prop-types";
-import { Box, Breadcrumbs as MUIBreadcrumbs } from "@mui/material";
-import { useTheme } from "@emotion/react";
-import { useNavigate } from "react-router-dom";
-import ArrowRight from "../ArrowRight/index.jsx";
-import "./index.css";
-
-/**
- * Breadcrumbs component that displays a list of breadcrumb items.
- *
- * @param {Object} props
- * @param {Array} props.list - Array of breadcrumb items. Each item should have `name` and `path` properties.
- * @param {string} props.list.name - The name to display for the breadcrumb.
- * @param {string} props.list.path - The path to navigate to when the breadcrumb is clicked.
- *
- * @returns {JSX.Element} The rendered Breadcrumbs component.
- */
-
-const Breadcrumbs = ({ list }) => {
-	const theme = useTheme();
-	const navigate = useNavigate();
-
-	return (
-		<MUIBreadcrumbs
-			separator={<ArrowRight />}
-			aria-label="breadcrumb"
-			px={theme.spacing(2)}
-			py={theme.spacing(3.5)}
-			width="fit-content"
-			backgroundColor={theme.palette.secondary.main}
-			borderRadius={theme.shape.borderRadius}
-			lineHeight="18px"
-			sx={{
-				"& .MuiBreadcrumbs-li a": {
-					transition: "background-color 0.2s ease-in-out, color 0.2s ease-in-out",
-				},
-				"& .MuiBreadcrumbs-li:not(:last-of-type):hover a": {
-					backgroundColor: theme.palette.secondary.contrastText,
-					color: theme.palette.secondary.main,
-				},
-			}}
-		>
-			{list.map((item, index) => {
-				return (
-					<Box
-						component="a"
-						key={`${item.name}-${index}`}
-						px={theme.spacing(4)}
-						pt={theme.spacing(2)}
-						pb={theme.spacing(3)}
-						borderRadius={theme.shape.borderRadius}
-						onClick={() => navigate(item.path)}
-						sx={{
-							opacity: 0.8,
-							textTransform: "capitalize",
-							"&, &:hover": {
-								color: theme.palette.secondary.contrastText,
-							},
-						}}
-					>
-						{item.name}
-					</Box>
-				);
-			})}
-		</MUIBreadcrumbs>
-	);
-};
-
-Breadcrumbs.propTypes = {
-	list: PropTypes.arrayOf(
-		PropTypes.shape({
-			name: PropTypes.string.isRequired,
-			path: PropTypes.string.isRequired,
-		}).isRequired
-	).isRequired,
-};
-
-export default Breadcrumbs;

client/src/Components/v1/Buttons/RoundGradientButton.jsx

@@ -1,30 +0,0 @@
-import React from "react";
-import Button from "@mui/material/Button";
-import { styled } from "@mui/material/styles";
-
-const RoundGradientButton = styled(Button)(({ theme }) => ({
-	position: "relative",
-	border: "5px solid transparent",
-	backgroundClip: "padding-box",
-	borderRadius: 30,
-	fontSize: "1.2rem",
-	color: theme.palette.primary.contrastText,
-	backgroundColor: theme.palette.background.main,
-
-	"&:after": {
-		position: "absolute",
-		top: -3,
-		left: -3,
-		right: -3,
-		bottom: -3,
-		background:
-			theme.palette.mode === "dark"
-				? "linear-gradient(90deg, #842bd2, #ff5451, #8c52ff)"
-				: "linear-gradient(90deg, #842bd2, #ff5451, #8c52ff)",
-		content: '""',
-		zIndex: -1,
-		borderRadius: 30,
-	},
-}));
-
-export default RoundGradientButton;

client/src/Components/v1/Charts/AreaChart/index.jsx

@@ -1,214 +0,0 @@
-/**
- * CustomAreaChart component for rendering an area chart with optional gradient and custom ticks.
- *
- * @param {Object} props - The properties object.
- * @param {Array} props.data - The data array for the chart.
- * @param {Array} props.dataKeys - An array of data keys to be plotted as separate areas.
- * @param {string} props.xKey - The key for the x-axis data.
- * @param {string} [props.yKey] - The key for the y-axis data (optional).
- * @param {Object} [props.xTick] - Custom tick component for the x-axis.
- * @param {Object} [props.yTick] - Custom tick component for the y-axis.
- * @param {string} [props.strokeColor] - The base stroke color for the areas.
- *                                       If not provided, uses a predefined color palette.
- * @param {string} [props.fillColor] - The base fill color for the areas.
- * @param {boolean} [props.gradient=false] - Whether to apply a gradient fill to the areas.
- * @param {string} [props.gradientDirection="vertical"] - The direction of the gradient.
- * @param {string} [props.gradientStartColor] - The start color of the gradient.
- *                                              Defaults to the area's stroke color if not provided.
- * @param {string} [props.gradientEndColor] - The end color of the gradient.
- * @param {Object} [props.customTooltip] - Custom tooltip component for the chart.
- * @param {string|number} [props.height="100%"] - Height of the chart container.
- *
- * @returns {JSX.Element} The rendered area chart component.
- *
- * @example
- * // Single series chart
- * <CustomAreaChart
- *   data={temperatureData}
- *   dataKeys={["temperature"]}
- *   xKey="date"
- *   yKey="temperature"
- *   gradient={true}
- *   gradientStartColor="#ff6b6b"
- *   gradientEndColor="#4ecdc4"
- * />
- *
- * @example
- * // Multi-series chart with custom tooltip
- * <CustomAreaChart
- *   data={performanceData}
- *   dataKeys={["cpu.usage", "memory.usage"]}
- *   xKey="timestamp"
- *   xTick={<CustomTimeTick />}
- *   yTick={<PercentageTick />}
- *   gradient={true}
- *   customTooltip={({ active, payload, label }) => (
- *     <CustomTooltip
- *       label={label}
- *       payload={payload}
- *       active={active}
- *     />
- *   )}
- * />
- */
-
-import {
-	AreaChart,
-	Area,
-	XAxis,
-	YAxis,
-	CartesianGrid,
-	Tooltip,
-	ResponsiveContainer,
-} from "recharts";
-import { createGradient } from "../Utils/gradientUtils.jsx";
-import PropTypes from "prop-types";
-import { useTheme } from "@mui/material";
-import { useId } from "react";
-import { Fragment } from "react";
-
-const CustomAreaChart = ({
-	data,
-	dataKeys,
-	xKey,
-	xDomain,
-	yKey,
-	yDomain,
-	xTick,
-	yTick,
-	strokeColor,
-	fillColor,
-	gradient = false,
-	gradientDirection = "vertical",
-	gradientStartColor,
-	gradientEndColor,
-	customTooltip,
-	height = "100%",
-}) => {
-	const theme = useTheme();
-	const uniqueId = useId();
-
-	const AREA_COLORS = [
-		// Blues
-		"#3182bd", // Deep blue
-		"#6baed6", // Medium blue
-		"#9ecae1", // Light blue
-
-		// Greens
-		"#74c476", // Soft green
-		"#a1d99b", // Light green
-		"#c7e9c0", // Pale green
-
-		// Oranges
-		"#fdae6b", // Warm orange
-		"#fdd0a2", // Light orange
-		"#feedde", // Pale orange
-
-		// Purples
-		"#9467bd", // Lavender
-		"#a55194", // Deep magenta
-		"#c994c7", // Soft magenta
-
-		// Reds
-		"#ff9896", // Soft red
-		"#de2d26", // Deep red
-		"#fc9272", // Medium red
-
-		// Cyans/Teals
-		"#17becf", // Cyan
-		"#7fcdbb", // Teal
-		"#a1dab4", // Light teal
-
-		// Yellows
-		"#fec44f", // Mustard
-		"#fee391", // Light yellow
-		"#ffffd4", // Pale yellow
-
-		// Additional colors
-		"#e377c2", // Soft pink
-		"#bcbd22", // Olive
-		"#2ca02c", // Vibrant green
-	];
-
-	return (
-		<ResponsiveContainer
-			width="100%"
-			height={height}
-			// FE team HELP!  Why does this overflow if set to 100%?
-		>
-			<AreaChart data={data}>
-				<XAxis
-					dataKey={xKey}
-					{...(xDomain && { domain: xDomain })}
-					{...(xTick && { tick: xTick })}
-				/>
-				<YAxis
-					dataKey={yKey}
-					{...(yDomain && { domain: yDomain })}
-					{...(yTick && { tick: yTick })}
-				/>
-
-				<CartesianGrid
-					stroke={theme.palette.primary.lowContrast}
-					strokeWidth={1}
-					strokeOpacity={1}
-					fill="transparent"
-					vertical={false}
-				/>
-				{dataKeys.map((dataKey, index) => {
-					const gradientId = `gradient-${uniqueId}-${index}`;
-
-					return (
-						<Fragment key={dataKey}>
-							{gradient === true &&
-								createGradient({
-									id: gradientId,
-									startColor: gradientStartColor || AREA_COLORS[index],
-									endColor: gradientEndColor,
-									direction: gradientDirection,
-								})}
-							<Area
-								yKey={dataKey}
-								key={dataKey}
-								type="monotone"
-								dataKey={dataKey}
-								stroke={strokeColor || AREA_COLORS[index]}
-								fill={gradient === true ? `url(#${gradientId})` : fillColor}
-							/>
-						</Fragment>
-					);
-				})}
-				{customTooltip ? (
-					<Tooltip
-						cursor={{ stroke: theme.palette.primary.lowContrast }}
-						content={customTooltip}
-						wrapperStyle={{ pointerEvents: "none" }}
-					/>
-				) : (
-					<Tooltip />
-				)}
-			</AreaChart>
-		</ResponsiveContainer>
-	);
-};
-
-CustomAreaChart.propTypes = {
-	data: PropTypes.array.isRequired,
-	dataKeys: PropTypes.array.isRequired,
-	xTick: PropTypes.object, // Recharts takes an instance of component, so we can't pass the component itself
-	yTick: PropTypes.object, // Recharts takes an instance of component, so we can't pass the component itself
-	xKey: PropTypes.string.isRequired,
-	xDomain: PropTypes.array,
-	yKey: PropTypes.string,
-	yDomain: PropTypes.array,
-	fillColor: PropTypes.string,
-	strokeColor: PropTypes.string,
-	gradient: PropTypes.bool,
-	gradientDirection: PropTypes.string,
-	gradientStartColor: PropTypes.string,
-	gradientEndColor: PropTypes.string,
-	customTooltip: PropTypes.object,
-	height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};
-
-export default CustomAreaChart;

client/src/Components/v1/Charts/BarChart/index.jsx

@@ -1,181 +0,0 @@
-import { useTheme } from "@emotion/react";
-import { Box, Stack, Tooltip, Typography } from "@mui/material";
-import { formatDateWithTz } from "../../../../Utils/timeUtilsLegacy.js";
-import { useEffect, useState } from "react";
-import "./index.css";
-import { useSelector } from "react-redux";
-
-/* TODO add prop validation and jsdocs */
-const BarChart = ({ checks = [] }) => {
-	const theme = useTheme();
-	const [animate, setAnimate] = useState(false);
-	const uiTimezone = useSelector((state) => state.ui.timezone);
-
-	useEffect(() => {
-		setAnimate(true);
-	});
-
-	// set responseTime to average if there's only one check
-	if (checks.length === 1) {
-		checks[0] = { ...checks[0], responseTime: 50 };
-	}
-
-	if (checks.length !== 25) {
-		const placeholders = Array(25 - checks.length).fill("placeholder");
-		checks = [...checks, ...placeholders];
-	}
-
-	return (
-		<Stack
-			direction="row"
-			flexWrap="nowrap"
-			gap={theme.spacing(1.5)}
-			height="50px"
-			width="fit-content"
-			onClick={(event) => event.stopPropagation()}
-			sx={{
-				cursor: "default",
-			}}
-		>
-			{checks.map((check, index) =>
-				check === "placeholder" ? (
-					/* 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
-						key={`${check}-${index}`}
-						position="relative"
-						width={theme.spacing(4.5)}
-						height="100%"
-						backgroundColor={theme.palette.primary.lowContrast}
-						sx={{
-							borderRadius: theme.spacing(1.5),
-						}}
-					/>
-				) : (
-					<Tooltip
-						title={
-							<>
-								<Typography>
-									{formatDateWithTz(
-										check.updatedAt,
-										"ddd, MMMM D, YYYY, HH:mm A",
-										uiTimezone
-									)}
-								</Typography>
-								<Box mt={theme.spacing(2)}>
-									<Box
-										display="inline-block"
-										width={theme.spacing(4)}
-										height={theme.spacing(4)}
-										backgroundColor={
-											check.status
-												? theme.palette.success.lowContrast
-												: theme.palette.error.lowContrast
-										}
-										sx={{ borderRadius: "50%" }}
-									/>
-									<Stack
-										display="inline-flex"
-										direction="row"
-										justifyContent="space-between"
-										ml={theme.spacing(2)}
-										gap={theme.spacing(12)}
-									>
-										<Typography
-											component="span"
-											sx={{ opacity: 0.8 }}
-										>
-											Response Time
-										</Typography>
-										<Typography component="span">
-											{check.originalResponseTime}
-											<Typography
-												component="span"
-												sx={{ opacity: 0.8 }}
-											>
-												{" "}
-												ms
-											</Typography>
-										</Typography>
-									</Stack>
-								</Box>
-							</>
-						}
-						placement="top"
-						key={`check-${check?.id}`}
-						slotProps={{
-							popper: {
-								className: "bar-tooltip",
-								modifiers: [
-									{
-										name: "offset",
-										options: {
-											offset: [0, -10],
-										},
-									},
-								],
-								sx: {
-									"& .MuiTooltip-tooltip": {
-										backgroundColor: theme.palette.secondary.main,
-										border: 1,
-										borderColor: theme.palette.primary.lowContrast,
-										borderRadius: theme.shape.borderRadius,
-										boxShadow: theme.shape.boxShadow,
-										px: theme.spacing(4),
-										py: theme.spacing(3),
-									},
-									"& .MuiTooltip-tooltip p": {
-										/* TODO Font size should point to theme */
-										fontSize: 12,
-										color: theme.palette.secondary.contrastText,
-										fontWeight: 500,
-									},
-									"& .MuiTooltip-tooltip span": {
-										/* TODO Font size should point to theme */
-										fontSize: 11,
-										color: theme.palette.secondary.contrastText,
-										fontWeight: 600,
-									},
-								},
-							},
-						}}
-					>
-						<Box
-							position="relative"
-							width="9px"
-							height="100%"
-							backgroundColor={theme.palette.primary.lowContrast}
-							sx={{
-								borderRadius: theme.spacing(1.5),
-								/* 
-								TODO this doesn't seem to be used
-								"&:hover > .MuiBox-root": {
-									filter: "brightness(0.8)",
-								}, */
-							}}
-						>
-							<Box
-								position="absolute"
-								bottom={0}
-								width="100%"
-								height={`${animate ? check.responseTime : 0}%`}
-								backgroundColor={
-									check.status
-										? theme.palette.success.lowContrast
-										: theme.palette.error.lowContrast
-								}
-								sx={{
-									borderRadius: theme.spacing(1.5),
-									transition: "height 600ms cubic-bezier(0.4, 0, 0.2, 1)",
-								}}
-							/>
-						</Box>
-					</Tooltip>
-				)
-			)}
-		</Stack>
-	);
-};
-
-export default BarChart;

client/src/Components/v1/Charts/ChartBox/EmptyView.jsx

@@ -1,106 +0,0 @@
-// Components
-import { Typography, Stack } from "@mui/material";
-import PropTypes from "prop-types";
-import { useTheme } from "@emotion/react";
-import IconBox from "../../IconBox/index.jsx";
-
-/**
- * `EmptyView` is a functional React component that displays an empty state view with an optional icon, header, and message.
- *
- * @component
- * @param {Object} props - The properties that define the `EmptyView` component.
- * @param {React.ReactNode} [props.icon] - An optional icon to display at the top of the empty view.
- * @param {string} [props.header] - An optional header text displayed next to the icon.
- * @param {string} [props.message="No Data"] - The message to be displayed in the empty view.
- * @param {'h1' | 'h2' | 'h3'} [props.headingLevel="h2"] - The heading level for the message text.
- * @param {string} [props.justifyContent="flex-start"] - The CSS `justify-content` value to align elements vertically.
- * @param {string} [props.height="100%"] - The height of the empty view container.
- *
- * @example
- * // Example usage of EmptyView component:
- * <EmptyView
- *   icon={<SomeIcon />}
- *   header="Average Response Time"
- *   message="No Response Time Available"
- *   headingLevel="h2"
- *   justifyContent="center"
- *   height="50%"
- * />
- *
- * @returns {React.Element} The `EmptyView` component with customizable icon, header, and message.
- */
-
-const EmptyView = ({
-	icon,
-	header,
-	message = "No Data",
-	headingLevel = "h2",
-	justifyContent = "flex-start",
-	height = "100%",
-}) => {
-	const theme = useTheme();
-	return (
-		<Stack
-			flex={1}
-			direction="row"
-			sx={{
-				backgroundColor: theme.palette.primary.main,
-
-				border: 1,
-				borderStyle: "solid",
-				borderColor: theme.palette.primary.lowContrast,
-				borderRadius: 2,
-				borderTopRightRadius: 4,
-				borderBottomRightRadius: 4,
-			}}
-		>
-			<Stack
-				flex={1}
-				alignItems="center"
-				sx={{
-					padding: theme.spacing(8),
-					justifyContent,
-					gap: theme.spacing(8),
-					height,
-					"& h2": {
-						color: theme.palette.primary.contrastTextSecondary,
-						fontSize: 15,
-						fontWeight: 500,
-					},
-
-					"& tspan, & text": {
-						fill: theme.palette.primary.contrastTextTertiary,
-					},
-				}}
-			>
-				<Stack
-					alignSelf="flex-start"
-					direction="row"
-					alignItems="center"
-					gap={theme.spacing(6)}
-				>
-					{icon && <IconBox>{icon}</IconBox>}
-					{header && <Typography component="h2">{header}</Typography>}
-				</Stack>
-				<Stack
-					flex={1}
-					justifyContent="center"
-					alignItems="center"
-				>
-					<Typography component={headingLevel}>{message}</Typography>
-				</Stack>
-			</Stack>
-		</Stack>
-	);
-};
-
-EmptyView.propTypes = {
-	message: PropTypes.string,
-	icon: PropTypes.node,
-	header: PropTypes.string,
-	headingLevel: PropTypes.oneOf(["h1", "h2", "h3"]),
-	justifyContent: PropTypes.string,
-	height: PropTypes.string,
-};
-
-export default EmptyView;

client/src/Components/v1/Charts/ChartBox/index.jsx

@@ -1,104 +0,0 @@
-import { Stack, Typography } from "@mui/material";
-import { useTheme } from "@emotion/react";
-import IconBox from "../../IconBox/index.jsx";
-import EmptyView from "./EmptyView.jsx";
-import PropTypes from "prop-types";
-
-const ChartBox = ({
-	children,
-	icon,
-	header,
-	height = "300px",
-	justifyContent = "space-between",
-	Legend,
-	borderRadiusRight = 4,
-	sx,
-	noDataMessage,
-	isEmpty = false,
-}) => {
-	const theme = useTheme();
-	if (isEmpty) {
-		return (
-			<EmptyView
-				icon={icon}
-				header={header}
-				message={noDataMessage}
-			/>
-		);
-	}
-	return (
-		<Stack
-			flex={1}
-			direction="row"
-			sx={{
-				backgroundColor: theme.palette.primary.main,
-
-				border: 1,
-				borderStyle: "solid",
-				borderColor: theme.palette.primary.lowContrast,
-				borderRadius: 2,
-				borderTopRightRadius: borderRadiusRight,
-				borderBottomRightRadius: borderRadiusRight,
-			}}
-		>
-			<Stack
-				flex={1}
-				sx={{
-					padding: theme.spacing(8),
-					justifyContent,
-					gap: theme.spacing(8),
-					height,
-					minWidth: 250,
-					"& h2": {
-						color: theme.palette.primary.contrastTextSecondary,
-						fontSize: 15,
-						fontWeight: 500,
-					},
-					"& .MuiBox-root:not(.area-tooltip) p": {
-						color: theme.palette.primary.contrastTextTertiary,
-						fontSize: 13,
-					},
-					"& .MuiBox-root > span": {
-						color: theme.palette.primary.contrastText,
-						fontSize: 20,
-						"& span": {
-							opacity: 0.8,
-							marginLeft: 2,
-							fontSize: 15,
-						},
-					},
-
-					"& tspan, & text": {
-						fill: theme.palette.primary.contrastTextTertiary,
-					},
-					"& path": {
-						transition: "fill 300ms ease, stroke-width 400ms ease",
-					},
-				}}
-			>
-				<Stack
-					alignSelf="flex-start"
-					direction="row"
-					alignItems="center"
-					gap={theme.spacing(6)}
-				>
-					{icon && <IconBox>{icon}</IconBox>}
-					{header && <Typography component="h2">{header}</Typography>}
-				</Stack>
-				{children}
-			</Stack>
-			{Legend && Legend}
-		</Stack>
-	);
-};
-
-export default ChartBox;
-
-ChartBox.propTypes = {
-	children: PropTypes.node,
-	icon: PropTypes.node,
-	header: PropTypes.string,
-	height: PropTypes.string,
-	noDataMessage: PropTypes.string,
-	isEmpty: PropTypes.bool,
-};

client/src/Components/v1/Charts/CustomGauge/index.css

@@ -1,14 +0,0 @@
-.radial-chart {
-	position: relative;
-	display: inline-block;
-}
-
-.radial-chart-base {
-	opacity: 0.3;
-}
-
-.radial-chart-progress {
-	transform: rotate(-90deg);
-	transform-origin: center;
-	transition: stroke-dashoffset 1.5s ease-in-out;
-}

client/src/Components/v1/Charts/CustomGauge/index.jsx

@@ -1,148 +0,0 @@
-import { useTheme } from "@emotion/react";
-import { useEffect, useState, useMemo } from "react";
-import Stack from "@mui/material/Stack";
-import { Box, Typography } from "@mui/material";
-import PropTypes from "prop-types";
-import "./index.css";
-import CircularProgress from "@mui/material/CircularProgress";
-
-const MINIMUM_VALUE = 0;
-const MAXIMUM_VALUE = 100;
-
-/**
- * A Performant SVG based circular gauge
- *
- * @component
- * @param {Object} props - Component properties
- * @param {number} [props.progress=0] - Progress percentage (0-100)
- * @param {number} [props.radius=60] - Radius of the gauge circle
- * @param {number} [props.strokeWidth=15] - Width of the gauge stroke
- * @param {number} [props.precision=1] - Precision of the progress percentage
- * @param {string} [props.unit="%"] - Unit of progress
- *
- * @example
- * <CustomGauge
- *   progress={75}
- *   radius={50}
- *   strokeWidth={10}
- * />
- *
- * @returns {React.ReactElement} Rendered CustomGauge component
- */
-const CustomGauge = ({
-	isLoading = false,
-	progress = 0,
-	radius = 70,
-	strokeWidth = 15,
-	precision = 1,
-	unit = "%",
-}) => {
-	const theme = useTheme();
-	// Calculate the length of the stroke for the circle
-	const { circumference, totalSize, strokeLength } = useMemo(
-		() => ({
-			circumference: 2 * Math.PI * radius,
-			totalSize: radius * 2 + strokeWidth * 2,
-			strokeLength: (progress / 100) * (2 * Math.PI * radius),
-		}),
-		[radius, strokeWidth, progress]
-	);
-
-	// Handle initial animation
-	const [offset, setOffset] = useState(circumference);
-	useEffect(() => {
-		setOffset(circumference);
-		const timer = setTimeout(() => {
-			setOffset(circumference - strokeLength);
-		}, 100);
-
-		return () => clearTimeout(timer);
-	}, [progress, circumference, strokeLength]);
-
-	const progressWithinRange = Math.max(MINIMUM_VALUE, Math.min(progress, MAXIMUM_VALUE));
-
-	let fillColor;
-	if (progressWithinRange < 50) {
-		fillColor = theme.palette.success.main;
-	} else if (progressWithinRange < 80) {
-		fillColor = theme.palette.warning.lowContrast;
-	} else {
-		fillColor = theme.palette.error.lowContrast;
-	}
-
-	if (isLoading) {
-		return (
-			<Stack
-				className="radial-chart"
-				width={radius}
-				height={radius}
-				alignItems="center"
-				justifyContent="center"
-			>
-				<CircularProgress color="accent" />
-			</Stack>
-		);
-	}
-
-	return (
-		<Box
-			className="radial-chart"
-			width={radius}
-			height={radius}
-			sx={{ backgroundColor: theme.palette.primary.main, borderRadius: "50%" }}
-		>
-			<svg
-				viewBox={`0 0 ${totalSize} ${totalSize}`}
-				width={radius}
-				height={radius}
-			>
-				<circle
-					className="radial-chart-base"
-					stroke={theme.palette.secondary.light}
-					strokeWidth={strokeWidth}
-					fill="none"
-					cx={totalSize / 2} // Center the circle
-					cy={totalSize / 2} // Center the circle
-					r={radius}
-				/>
-				<circle
-					className="radial-chart-progress"
-					stroke={fillColor}
-					strokeWidth={strokeWidth}
-					strokeDasharray={`${circumference} ${circumference}`}
-					strokeDashoffset={offset}
-					strokeLinecap="round"
-					fill="none"
-					cx={totalSize / 2}
-					cy={totalSize / 2}
-					r={radius}
-				/>
-			</svg>
-
-			<Typography
-				className="radial-chart-text"
-				style={{
-					position: "absolute",
-					top: "50%",
-					left: "50%",
-					transform: "translate(-50%, -50%)",
-					...theme.typography.h2,
-					fill: theme.typography.h2.color,
-				}}
-			>
-				{`${progressWithinRange.toFixed(precision)}${unit}`}
-			</Typography>
-		</Box>
-	);
-};
-
-export default CustomGauge;
-
-CustomGauge.propTypes = {
-	isLoading: PropTypes.bool,
-	progress: PropTypes.number,
-	radius: PropTypes.number,
-	strokeWidth: PropTypes.number,
-	precision: PropTypes.number,
-	unit: PropTypes.string,
-};